/* ==========================================================================
   Domina tu Sector v2 — Librería de maquetas de interfaz animadas (faux UI)
   CONTRACT-V2 §5. Namespace .mk-* (SOLO el core define clases .mk-*).
   Drivers JS en app.js: data-serp, data-chat, data-chart, data-bar,
   data-notify, data-term, data-tabs [data-cycle], data-typed.
   Todas las maquetas: aria-hidden="true" en el wrapper.
   ========================================================================== */

/* ---- Ventana de app (contenedor común) --------------------------------- */
.mk {
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-size: var(--fs-sm);
  max-width: 100%;
  min-width: 0;
}
/* Los textos nowrap internos no deben inflar los tracks de grid/flex de fuera:
   sin esto, una .mk dentro de un grid ensancha la columna más allá del viewport. */
.mk :where(*) { min-width: 0; }
.mk--glass {
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-color: var(--glass-border);
}
.mk--brand { border-color: var(--line-brand); box-shadow: var(--shadow), var(--glow-sm); }

.mk__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .14);
}
.mk__dots { display: inline-flex; gap: 6px; flex: none; }
.mk__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-mute); opacity: .5; }
.mk__dots i:first-child { background: var(--danger); opacity: .7; }
.mk__dots i:nth-child(2) { background: var(--warn); opacity: .7; }
.mk__dots i:last-child { background: var(--brand); opacity: .8; }
.mk__title {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--fs-xs); letter-spacing: .06em;
  color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk__live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: .64rem; font-weight: 700; letter-spacing: .14em;
  color: var(--brand);
}
.mk__live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 8px var(--brand);
  animation: mk-pulse 1.6s ease-in-out infinite;
}
@keyframes mk-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

.mk__body { padding: clamp(14px, 2.4vw, 22px); display: grid; gap: 14px; }

/* ---- Caja de búsqueda (Google-like) ------------------------------------ */
.mk-search {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
}
.mk-search .dts-ico { width: 17px; height: 17px; color: var(--ink-mute); }
.mk-search__q { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; }
.mk-search__caret {
  width: 2px; height: 1.1em; background: var(--brand); flex: none;
  animation: mk-caret 1s steps(1) infinite;
}
@keyframes mk-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mk-search__caret { animation: none; } }

/* ---- SERP (resultados de Google) — data-serp: .is-you sube a #1 -------- */
.mk-serp__list { display: grid; gap: 8px; }
.mk-serp__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: transform .6s var(--ease-out), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease), opacity var(--t) var(--ease);
}
.mk-serp__fav {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--bg-deep); border: 1px solid var(--line);
  font-family: var(--font-display); font-size: .68rem; color: var(--ink-mute);
}
.mk-serp__meta { min-width: 0; display: grid; gap: 2px; }
.mk-serp__t { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-serp__u { font-size: var(--fs-xs); color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-serp__pos {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.mk-serp__row.is-you { border-color: var(--line-brand); background: rgba(46, 232, 105, .07); }
.mk-serp__row.is-you .mk-serp__t { color: var(--brand); }
.mk-serp__row.is-you .mk-serp__fav { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); font-weight: 700; }
.mk-serp__row.is-you .mk-serp__pos { color: var(--brand); }
.mk-serp__row.is-you.is-crowned { box-shadow: var(--glow-sm); }
.mk-serp__badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--brand); color: var(--brand-ink);
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; vertical-align: 2px;
}
.mk-serp__row--dim { opacity: .55; }
.mk-serp__adtag {
  font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  color: var(--ink-mute); text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px;
}

/* ---- Chat con IA — data-chat: is-on → is-typing → is-answered ---------- */
.mk-ai__body { display: grid; gap: 12px; }
.mk-ai__msg {
  max-width: 92%;
  padding: 12px 15px;
  border-radius: var(--r);
  font-size: var(--fs-sm); line-height: 1.55;
}
.mk-ai__msg--user {
  justify-self: end;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-bottom-right-radius: 6px;
  color: var(--ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
[data-chat].is-on .mk-ai__msg--user { opacity: 1; transform: none; }
.mk-ai__typing {
  display: none; gap: 5px; padding: 12px 15px;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r); border-bottom-left-radius: 6px;
  width: max-content;
}
.mk-ai__typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute);
  animation: mk-typing 1.1s ease-in-out infinite;
}
.mk-ai__typing span:nth-child(2) { animation-delay: .15s; }
.mk-ai__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mk-typing { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
[data-chat].is-typing .mk-ai__typing { display: inline-flex; }
[data-chat].is-answered .mk-ai__typing { display: none; }
.mk-ai__msg--ai {
  justify-self: start;
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg-elev);
  border: 1px solid var(--line-brand);
  border-bottom-left-radius: 6px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
[data-chat].is-answered .mk-ai__msg--ai { opacity: 1; transform: none; }
.mk-ai__spark { color: var(--brand); flex: none; margin-top: 2px; }
.mk-ai__spark .dts-ico { width: 18px; height: 18px; }
.mk-ai__cite {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(46, 232, 105, .12); border: 1px solid var(--line-brand);
  color: var(--brand); font-size: .68rem; font-weight: 700;
}
.mk-ai__cite .dts-ico { width: 12px; height: 12px; }
.mk-ai__engines { display: inline-flex; gap: 6px; margin-left: auto; }
.mk-ai__engines i {
  font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-mute); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 2px 8px;
}

/* ---- KPI cards (dashboard) --------------------------------------------- */
.mk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.mk-kpi {
  padding: 12px 14px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-sm);
  display: grid; gap: 3px; align-content: start;
}
.mk-kpi__val {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.mk-kpi__lab { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
.mk-kpi__delta { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 700; }
.mk-kpi__delta .dts-ico { width: 12px; height: 12px; }
.mk-kpi__delta.is-up { color: var(--brand); }
.mk-kpi__delta.is-down { color: var(--danger); }
.mk-kpi--hero .mk-kpi__val { color: var(--brand); }

/* ---- Gráfico SVG (línea/área) — data-chart dibuja el path .mk-chart__line */
.mk-chart { position: relative; }
.mk-chart svg { width: 100%; height: auto; display: block; }
.mk-chart__grid line { stroke: var(--line); stroke-width: 1; }
.mk-chart__line {
  fill: none; stroke: var(--brand); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(46, 232, 105, .5));
}
.mk-chart__area { fill: url(#mkAreaFill, rgba(46, 232, 105, .12)); opacity: 0; transition: opacity .8s var(--ease) .5s; }
.mk-chart.is-drawn .mk-chart__area { opacity: 1; }
.mk-chart__dot { fill: var(--brand); }
.mk-chart__tag {
  position: absolute; padding: 4px 10px;
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--r-pill);
  font-size: .66rem; font-weight: 800;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out) .9s, transform .5s var(--ease-out) .9s;
}
.mk-chart.is-drawn .mk-chart__tag { opacity: 1; transform: none; }

/* ---- Tabla de posiciones SEO — data-rank (filas .mk-rank__row) ---------- */
.mk-rank { display: grid; gap: 8px; }
.mk-rank__head, .mk-rank__row {
  display: grid; grid-template-columns: 1.4fr auto auto; align-items: center; gap: 12px;
}
.mk-rank__head {
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); padding-inline: 14px;
}
.mk-rank__row {
  padding: 10px 14px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mk-rank__kw { font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-rank__spark { width: 64px; height: 22px; }
.mk-rank__spark path { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; opacity: .85; }
.mk-rank__pos {
  min-width: 46px; text-align: center;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 4px 8px; border-radius: var(--r-pill);
  background: var(--bg-deep); border: 1px solid var(--line-strong); color: var(--ink-soft);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.mk-rank__row.is-climbed .mk-rank__pos { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: var(--glow-sm); }

/* ---- Anuncio de Google (preview) ---------------------------------------- */
.mk-ad {
  padding: 14px 16px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-sm);
  display: grid; gap: 5px;
}
.mk-ad__tag {
  width: max-content;
  font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px;
}
.mk-ad__t { font-weight: 700; font-size: 1rem; color: #9ec9ff; line-height: 1.3; }
.mk-ad__u { font-size: var(--fs-xs); color: var(--brand); }
.mk-ad__d { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.mk-ad__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mk-ad__links span {
  font-size: .68rem; color: #9ec9ff;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--r-pill);
}

/* ---- Facturas (filas del portal) ---------------------------------------- */
.mk-invoice { display: grid; gap: 8px; }
.mk-invoice__row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.mk-invoice__row .dts-ico { width: 17px; height: 17px; color: var(--ink-mute); }
.mk-invoice__num { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: var(--fs-xs); color: var(--ink-soft); }
.mk-invoice__amt { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Mini-portal (teaser con pestañas rotando: data-tabs + data-cycle) --- */
.mk-portal__tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill);
  width: max-content; max-width: 100%;
}
.mk-portal__tabs button {
  padding: .5em 1em; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-mute);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  white-space: nowrap;
}
.mk-portal__tabs button.is-active { color: var(--brand-ink); background: var(--brand); }
.mk-portal__panel { display: none; }
.mk-portal__panel.is-active { display: grid; gap: 10px; animation: mk-fade .45s var(--ease-out); }
@keyframes mk-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mk-portal__panel.is-active { animation: none; } }

/* ---- Accesos (chips del portal) ------------------------------------------ */
.mk-access { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-access__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--ink-soft);
}
.mk-access__item .dts-ico { width: 16px; height: 16px; color: var(--brand); flex: none; }

/* ---- Barras horizontales — data-bar + .mk-bars__fill[data-w] ------------- */
.mk-bars { display: grid; gap: 10px; }
.mk-bars__row { display: grid; grid-template-columns: minmax(90px, auto) 1fr auto; align-items: center; gap: 10px; }
.mk-bars__lab { font-size: var(--fs-xs); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-bars__track { height: 8px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.mk-bars__fill {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  box-shadow: 0 0 10px rgba(46, 232, 105, .4);
  transition: width 1.1s var(--ease-out);
}
.mk-bars__val { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: var(--fs-xs); color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* ---- Toasts flotantes — data-notify (hijos .mk-toast) -------------------- */
.mk-toast {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px;
  background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); border-left: 3px solid var(--brand);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-xs); color: var(--ink);
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}
.mk-toast.is-show { opacity: 1; transform: none; }
.mk-toast .dts-ico { width: 18px; height: 18px; color: var(--brand); flex: none; }
.mk-toast__t { font-weight: 700; }
.mk-toast__s { color: var(--ink-mute); display: block; font-size: .68rem; }
.mk-toast__time { margin-left: auto; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .64rem; color: var(--ink-mute); }

/* ---- Terminal — data-term (líneas .mk-term__line[data-text]) ------------- */
.mk-term__body {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--fs-xs); line-height: 1.9;
  display: grid; gap: 2px;
}
.mk-term__line { min-height: 1.9em; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; }
.mk-term__line::before { content: "$ "; color: var(--brand); font-weight: 700; }
.mk-term__line--out::before { content: "  "; }
.mk-term__line--out { color: var(--ink-mute); }
.mk-term__line .ok { color: var(--brand); font-weight: 700; }
.mk-term__caret { display: inline-block; width: .55em; height: 1.05em; background: var(--brand); vertical-align: -2px; animation: mk-caret 1s steps(1) infinite; }

/* ---- Etiqueta flotante sobre mockups (anotación) -------------------------- */
.mk-note {
  position: absolute; z-index: 3;
  padding: 6px 12px;
  background: var(--brand); color: var(--brand-ink);
  border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  box-shadow: var(--glow-sm);
}
.mk-note::after {
  content: ""; position: absolute; left: 18px; top: 100%;
  border: 5px solid transparent; border-top-color: var(--brand);
}

/* ---- Responsive de maquetas ---------------------------------------------- */
@media (max-width: 640px) {
  .mk__body { padding: 14px; }
  .mk-access { grid-template-columns: 1fr; }
  .mk-rank__head, .mk-rank__row { grid-template-columns: 1fr auto; }
  .mk-rank__spark { display: none; }
  .mk-rank__head span:nth-child(2) { display: none; }
  .mk-kpis { grid-template-columns: repeat(2, 1fr); }
  .mk-ai__engines { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mk__live::before { animation: none; }
  .mk-ai__msg--user, .mk-ai__msg--ai { opacity: 1; transform: none; transition: none; }
  .mk-ai__typing { display: none !important; }
  .mk-toast { opacity: 1; transform: none; transition: none; }
  .mk-serp__row { transition: none; }
  .mk-bars__fill { transition: none; }
  .mk-chart__area, .mk-chart__tag { opacity: 1; transition: none; transform: none; }
}