/* ===============================
   ZeusXRAds — consola
   ===============================
   Los tokens son los de Allmighty (labs.zeusxr.com), no una paleta nueva. La
   estructura es la de Meta Ads, que es la que la gente ya sabe usar.

   Cuatro reglas atraviesan todo el fichero:

   1. **Sobriedad.** Superficies neutras (blanco o #f8f9fa), el lima como único
      acento y el rojo sólo en un punto de 7 px o en una palabra. Ni un fondo
      teñido, ni naranja, ni ámbar. Un panel donde se decide un presupuesto se lee
      de un barrido vertical: si tres filas gritan a la vez, deja de distinguirse
      cuál hay que atender.
   2. **Ningún estado se comunica sólo con color.** La palabra lleva el significado;
      el punto sólo ayuda a barrer la columna. En deuteranopía el verde y el rojo de
      esta paleta se separan con un ΔE de 6 — indistinguibles.
   3. **Una sola escala de espacio y una sola escala tipográfica.** No hay un solo
      número fuera de ellas. Antes había 14px 16px, 13px 15px, 11px 14px, 12.5px,
      13.5px, 10.5px… cada regla con su medida: eso es lo que se ve como
      «desalineado sin criterio», porque de verdad no había ninguno.
   4. **Un canal por región, y todo empieza en él.** La barra lateral empieza en 16,
      el área principal en 20, el interior de una tarjeta en 16. Eso incluye las
      celdas de una tabla: la cabecera de columna tiene que caer justo debajo del
      título de su tarjeta, no dos píxeles a la izquierda.

   Y una consecuencia de la 4 que se nota más que ninguna: **una lista dentro de una
   tarjeta son filas con un filo, no cajitas grises redondeadas dentro de otra caja
   redondeada.** Una caja anidada mete un segundo canal que no coincide con nada.
   =============================== */

:root {
  --lime:        #B2D235;
  --lime-hover:  #9BC02E;
  --lime-light:  #f4f9e8;

  --tx:          #868e96;
  --tx-strong:   #6c757d;
  --tx-light:    #adb5bd;

  --bg:          #e9ecef;
  --card:        #ffffff;
  --subtle:      #f8f9fa;
  --hover:       #f1f3f5;

  --line:        #e9ecef;
  --line-soft:   #f1f3f5;
  --line-mid:    #dee2e6;

  /* Un solo color de alarma, y se usa en un punto de 7 px o en una palabra —
     nunca como fondo. Un panel donde se gestiona dinero no puede parecer un
     semáforo: el color grita y luego ya no distingues qué es urgente.
     No hay naranja ni ámbar en este fichero. */
  --danger:      #c92a2a;

  /* ---- escala de espacio, base 4 ----
     Toda medida de hueco, relleno y margen sale de aquí. */
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;

  /* ---- canales ----
     El canal es el eje vertical en el que empieza TODO lo que vive en esa región. */
  --gut-side: var(--s4);   /* barra lateral */
  --gut-main: var(--s5);   /* área principal */
  --gut-card: var(--s4);   /* interior de una tarjeta, celdas de tabla incluidas */

  /* ---- columna de icono ----
     Un icono siempre ocupa lo mismo y siempre deja el mismo hueco, así que toda
     etiqueta de una lista empieza exactamente en canal + 32. */
  --ico:     20px;
  --ico-gap: var(--s3);

  /* ---- escala tipográfica ----
     Sin medias: un 13.5px se renderiza a medio píxel y el texto queda sucio. */
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-bd: 14px;
  --t-lg: 16px;
  --t-xl: 20px;
  --t-2x: 24px;
  --t-3x: 32px;

  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;

  /* Una sola sombra de tarjeta, y ninguna de color: un halo lima alrededor del botón
     principal es lo primero que delata un panel hecho a ojo. Allmighty usa
     `0 1px 3px rgba(0,0,0,.1)` y nada más. */
  --sh-sm:   0 1px 3px rgba(0,0,0,.10);
  --sh-card: 0 1px 3px rgba(0,0,0,.06);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --num: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar: 240px;
  --topbar: 56px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  /* 1.5 sobre 14 px da una caja de línea de 21 px enteros. Con 1.6 salía 22,4 y todo
     lo que se alineaba contra una línea de texto caía a medio píxel. */
  font: var(--t-bd)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }

/* ===============================
   Estructura
   =============================== */

.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.side {
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

/* El logotipo empieza en el canal y su marca mide 24 con 8 de hueco, así que la palabra
   «ZeusXRAds» cae en 48 — exactamente donde empieza la etiqueta de cada elemento del
   menú (canal 16 + columna de icono 20 + hueco 12). Antes la marca medía 26 con 10 de
   hueco y el logotipo caía en 52: cuatro píxeles fuera de la única columna de texto que
   tiene la barra. */
.brand {
  height: var(--topbar);
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--gut-side);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-lg); font-weight: 700; color: var(--tx-strong); letter-spacing: -.2px;
}
.brand .mark {
  width: var(--s6); height: var(--s6); border-radius: var(--s2);
  background: var(--lime); color: #fff;
  display: grid; place-items: center; flex: none;
}
/* Tamaño base de CUALQUIER icono. Un SVG sin ancho ni alto mide 300×150 por defecto,
   así que un icono en un sitio para el que nadie escribió una regla no se ve pequeño:
   revienta la maqueta. Pasó con el del selector de fechas de la cabecera. Se fija aquí
   —antes que las demás reglas, para que las que necesiten otro tamaño ganen por orden—
   en lugar de ir añadiendo un selector por sitio, que es como apareció el fallo. */
.app svg, dialog svg { width: var(--s4); height: var(--s4); flex: none; }

.brand svg { width: var(--s4); height: var(--s4); }

/* El menú NO lleva relleno lateral: los elementos van a sangre. Así el filo lima del
   activo se apoya en el borde de la barra —como `.sidebar-menu a.active` en Allmighty— y
   no flota a 8 px, que era el muñón que se veía en la captura. */
.nav { padding: var(--s2) 0; display: flex; flex-direction: column; }
.nav-label {
  font-size: var(--t-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tx-light); padding: var(--s4) var(--gut-side) var(--s2);
}
.nav button {
  display: flex; align-items: center; gap: var(--ico-gap);
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: var(--s3) var(--gut-side);
  color: var(--tx-strong); font-size: var(--t-lg); font-weight: 500;
}
/* La columna de icono es fija. Un icono de 17 px —como estaba— se dibuja a medio píxel
   y además desplazaba la etiqueta un píxel respecto a las demás. */
.nav button svg { width: var(--ico); height: var(--ico); flex: none; }
/* Hover y activo, copiados de `.sidebar-menu a` de labs.zeusxr.com: el hover tiñe la
   superficie sutil y pone el texto en lima; el activo lo marca la lima de marca y un
   filo de 3 px a la izquierda. Un fondo lima claro con texto oscuro encima da verde
   oliva, y eso no existe en Allmighty. */
.nav button:hover { background: var(--subtle); color: var(--lime); }
.nav button[aria-current="page"] {
  color: var(--lime); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--lime);
}
.nav button:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

.side-foot {
  margin-top: auto; padding: var(--s3) var(--gut-side);
  border-top: 1px solid var(--line-soft);
}

.main { min-width: 0; display: flex; flex-direction: column; }

.top {
  height: var(--topbar);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--gut-main);
  position: sticky; top: 0; z-index: 5;
}
.top h1 { margin: 0; font-size: var(--t-lg); font-weight: 600; color: var(--tx-strong); }
.top .grow { flex: 1; }

/* El canal principal: la tarjeta empieza en 20 y la barra de arriba también, así que el
   título de la página y el borde de la primera tarjeta caen en el mismo eje. */
.content { padding: var(--gut-main); min-width: 0; display: flex; flex-direction: column; gap: var(--s5); }
/* El hueco lo pone el contenedor, no un margen por pieza: un `margin-top` en `.card` y
   un `gap` en el padre se suman o se colapsan según el vecino, y ahí nacen los saltos
   verticales distintos entre dos pares de tarjetas de la misma pantalla. */
.card + .card { margin-top: 0; }

/* ===============================
   Piezas
   =============================== */

/* El radio es el de `.analytics-metric-card` de Allmighty (16 px) y la sombra, la suya
   (`0 1px 3px rgba(0,0,0,.1)`) rebajada porque aquí hay más tarjetas por pantalla. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}
.card-head {
  padding: var(--s3) var(--gut-card); border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: var(--s3); min-height: 52px;
}
.card-head h2 { margin: 0; font-size: var(--t-bd); font-weight: 600; color: var(--tx-strong); }
.card-head .grow { flex: 1; }
.card-body { padding: var(--gut-card); }

/* En una cabecera con título y frase, la frase la aporta `.card-s` y el bloque de los dos
   no debe crecer más que los botones de al lado: el `min-height` de la cabecera ya reserva
   el alto y `align-items: center` los centra a los dos contra el mismo eje. */
.card-head > div { min-width: 0; }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--line-mid); background: var(--card);
  color: var(--tx-strong); font-size: var(--t-md); font-weight: 600;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm); cursor: pointer;
  white-space: nowrap; line-height: 20px;
}
.btn:hover { background: var(--hover); }
.btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.btn svg { width: var(--s4); height: var(--s4); }
/* Sin halo lima. El botón principal se distingue por ser el único relleno. */
.btn-primary { background: var(--lime); border-color: var(--lime); color: #fff; }
.btn-primary:hover { background: var(--lime-hover); border-color: var(--lime-hover); }
.btn-danger { color: var(--danger); border-color: var(--line-mid); background: var(--card); }
.btn-danger:hover { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: var(--s1) var(--s2); font-size: var(--t-sm); }
.btn-sm svg { width: var(--t-bd); height: var(--t-bd); }

.field { display: block; }
/* El hueco entre dos grupos de campos lo pone la relación entre ellos, no un
   `margin-bottom` que también se aplica al último y descuadra el fondo de la tarjeta.
   Dentro de una rejilla lo pone el `gap`, así que ahí se anula. */
.field + .field { margin-top: var(--s5); }
.grid-2 > .field + .field, .even > .field + .field { margin-top: 0; }
.field > span {
  display: block; font-size: var(--t-sm); font-weight: 600; color: var(--tx-strong);
  margin-bottom: var(--s1);
}
.field > .hint { font-weight: 400; color: var(--tx-light); font-size: var(--t-sm); margin-top: var(--s1); }
.field input, .field select {
  width: 100%; padding: var(--s2) var(--s3); line-height: 20px;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  background: var(--card); color: var(--tx-strong);
}
.field input:focus, .field select:focus {
  outline: 2px solid var(--lime); outline-offset: -1px; border-color: var(--lime);
}
/* Rejillas de campos: el hueco lo pone el `gap` en los dos ejes. Antes el vertical lo
   ponía un `margin-bottom` del campo, así que al plegarse a una columna la separación
   entre filas no era la misma que entre columnas. */
.grid-2, .even {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s4);
}

/* El selector de fechas de la cabecera. Estaba escrito a mano en el HTML con un radio de
   6 y un relleno de 4×6 que no salían de ninguna escala. */
.range {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--num); font-size: var(--t-sm); color: var(--tx-light);
}
.range input {
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  padding: var(--s1) var(--s2); font-family: var(--num); font-size: var(--t-sm);
  color: var(--tx-strong); background: var(--card); line-height: 20px;
}
.range input:focus-visible { outline: 2px solid var(--lime); outline-offset: -1px; }
.range-to { color: var(--tx-light); }

/* ---------- métricas ----------
   Cada métrica es un bloque, no dos spans en línea: dos spans dentro de un span
   se solapan cuando el número es largo, y eso fue exactamente el bug que hubo.

   Las medidas son las de `.analytics-metric-card` de Allmighty, contadas en su fuente:
   radio 16, relleno 20, borde 1px #e9ecef; el título 12px/600 en versal con 0,5 de
   letra y #adb5bd; la cifra 20px/700. Lo único que cambia es la superficie —allí la
   tarjeta es #f8f9fa porque vive DENTRO de una tarjeta blanca, y aquí se apoya
   directamente en el fondo #e9ecef de la aplicación, donde el gris no se separaría— y
   el color de la cifra, que es la lima de marca (CLAUDE.md §0.6).

   La cifra medía 28 px. Cuatro números de 28 px en lima gritan los cuatro a la vez y
   entonces no hay ninguno destacado: es el mismo error que un panel con tres colores
   de alarma. */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); }
.metric {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5); min-width: 0;
}
/* ---------- la regla de las superficies ----------
   Una tarjeta que se apoya en el fondo de la aplicación (#e9ecef) es BLANCA con borde.
   Una superficie que vive DENTRO de una tarjeta blanca es #f8f9fa y sin borde: blanca
   sobre blanca no se separa, sólo se ve el filo, y una rejilla de rectángulos de filo sin
   fondo parece un error de maqueta. Es lo que hace `.analytics-metric-card` en Allmighty.
   Una sola regla, aplicada a todas las piezas que pueden anidarse. */
.card-body .metric, .card-body .cre {
  background: var(--subtle); border-color: transparent;
}
.metric-v {
  display: block; min-width: 0;
  font: 700 var(--t-xl)/1.2 var(--font); font-variant-numeric: tabular-nums;
  color: var(--lime);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Una palabra o un hueco no es una cifra: va en el gris fuerte. Ver `metric()`. */
.metric-v.word { color: var(--tx-strong); }
.metric-l {
  display: block; min-width: 0; margin-top: var(--s1);
  font-size: var(--t-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tx-light); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- tabla ----------
   El relleno lateral de la celda es el canal de la tarjeta, no una medida propia. Con
   14 px la cabecera de la primera columna caía dos píxeles a la izquierda del título de
   su tarjeta, y la última columna dos a la derecha del botón de la cabecera. Dos
   píxeles no se leen como dos píxeles: se leen como descuido. */
.table-wrap { overflow-x: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td {
  text-align: left; padding: var(--s3) var(--gut-card);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
th {
  font-size: var(--t-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tx-light); background: var(--subtle);
  padding-top: var(--s2); padding-bottom: var(--s2);
}
td.num, th.num { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--subtle); }
.t-name { color: var(--tx-strong); font-weight: 600; }
.t-sub { display: block; font-size: var(--t-sm); color: var(--tx-light); }

/* Las acciones de la fila van en línea. Apiladas doblan la altura de la fila y una
   tabla de campañas se lee de un barrido vertical: si cada fila mide el doble, se
   ven la mitad. */
.t-actions { display: flex; gap: var(--s2); justify-content: flex-end; white-space: nowrap; }

/* ---------- estados ----------
   Un punto y una palabra. Sin fondo, sin borde, sin cápsula de color.

   El punto NO es lo que comunica: la palabra lo hace. El punto sólo ayuda a
   barrer la columna con la vista. Por eso funciona igual en deuteranopía, donde
   el verde y el rojo de esta paleta son indistinguibles — y por eso hay un test
   que falla si un estado pierde su texto. */
.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  flex: none; background: var(--tx-light);
}
.dot-ok   { background: var(--lime); }
.dot-bad  { background: var(--danger); }
.dot-mute { background: var(--tx-light); }
.dot-open { background: none; box-shadow: inset 0 0 0 1.5px var(--tx-light); }

.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-md); font-weight: 600; white-space: nowrap;
  color: var(--tx-strong);
}
.pill-bad { color: var(--danger); }

/* ---------- ritmo ----------
   La barra es lime o gris. Nunca naranja: "gasta rápido" es una frase, no un
   color, y con tres colores de barra dejas de leer la frase. */
.pace { display: block; min-width: 96px; }
.pace-bar { display: block; height: var(--s1); background: var(--line); border-radius: 999px; overflow: hidden; }
.pace-fill { display: block; height: 100%; background: var(--lime); border-radius: 999px; }
.pace-fill.off { background: var(--tx-light); }
.pace-txt { display: block; font-size: var(--t-sm); margin-top: var(--s1); color: var(--tx-light); }
/* El pie del ritmo es texto de apoyo y va siempre en gris: el lime se reserva para
   las cifras grandes y las barras. */
.pace-txt .dot { margin-right: var(--s1); vertical-align: 1px; }

/* ---------- avisos ----------
   Superficie neutra siempre. La severidad la lleva el punto y, si hace falta, el
   color del título. Un bloque rojo entero no es más urgente: es más molesto. */
.note {
  display: flex; gap: var(--ico-gap); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--subtle);
  color: var(--tx);
}
/* El punto se centra en la PRIMERA LÍNEA de texto, y el desplazamiento se calcula: media
   caja de línea menos medio punto. Antes era un 7 px a ojo que dejaba de estar centrado
   en cuanto cambiaba el tamaño del texto. */
.note > .dot { margin-top: calc((1.5em - 7px) / 2); }
/* El titular es un elemento propio. `strong` se deja EN LÍNEA: si se pone en bloque,
   un `<strong>` a mitad de frase la parte en tres líneas — que es exactamente lo que
   pasaba. */
.note-title { display: block; color: var(--tx-strong); font-weight: 600; }
.note-stop .note-title { color: var(--danger); }
.note strong { color: var(--tx-strong); }

/* ---------- un aviso dentro de una tarjeta es una FILA, no una caja ----------
   Una cajita gris redondeada dentro de una caja blanca redondeada mete un canal propio
   —su propio relleno— que no coincide con el de la tarjeta. Es la mitad de la sensación
   de «desalineado»: el título de la tarjeta empieza en 16, el del aviso en 32, y el ojo
   compara los dos.

   Así que dentro de una tarjeta el aviso va a sangre, con márgenes negativos del canal, y
   se separa de lo de arriba con el mismo filo que una fila de tabla. Suelto sobre el fondo
   de la aplicación sí es una caja: ahí no hay tarjeta cuyo canal romper. */
.card-body > .note {
  border: 0; border-radius: 0; background: none;
  margin-left: calc(var(--gut-card) * -1); margin-right: calc(var(--gut-card) * -1);
  padding: var(--s3) var(--gut-card);
}
.card-body > .note:first-child { margin-top: calc(var(--gut-card) * -1); }
.card-body > .note:last-child { margin-bottom: calc(var(--gut-card) * -1); }
.card-body > * + .note { border-top: 1px solid var(--line-soft); }

.blockers { margin: var(--s2) 0 0; padding-left: var(--s5); }
.blockers li { margin: var(--s1) 0; }

.empty { padding: var(--s8) var(--s5); text-align: center; color: var(--tx-light); }
.empty svg { width: var(--s8); height: var(--s8); opacity: .5; margin-bottom: var(--s2); }

.muted { color: var(--tx-light); }
.mono { font-family: var(--num); font-size: var(--t-sm); }

/* ---------- diálogo ---------- */
dialog {
  border: 0; border-radius: var(--r-lg); padding: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  width: min(560px, calc(100vw - 32px));
  color: var(--tx);
}
dialog::backdrop { background: rgba(33,37,41,.42); }
dialog .card-head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
dialog .actions {
  display: flex; gap: var(--s2); justify-content: flex-end;
  padding: var(--s3) var(--gut-card); border-top: 1px solid var(--line-soft); background: var(--subtle);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ---------- avisador ---------- */
.toasts {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 50;
  display: flex; flex-direction: column; gap: var(--s2); max-width: 380px;
}
.toast {
  display: flex; gap: var(--ico-gap); align-items: flex-start;
  background: var(--card); border: 1px solid var(--line-mid);
  border-radius: var(--r-sm); box-shadow: var(--sh-sm);
  padding: var(--s3) var(--s4); color: var(--tx-strong);
}
.toast > .dot { margin-top: calc((1.5em - 7px) / 2); }
.toast-bad { color: var(--danger); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .side .nav { flex-direction: row; padding: var(--s2); }
  .nav-label, .side-foot { display: none; }
}

/* ===============================
   Formulario de campaña — copiado de docs/portal-mockup.html §2 y §3
   ===============================
   Mismos valores que el mockup. La diferencia es que aquí los `.pick` son botones y
   los `.input` son campos de verdad: una maqueta puede pintar un span, un panel tiene
   que poder recibir un tabulador y un lector de pantalla.
   =============================== */

.crumb { font-size: var(--t-md); color: var(--tx-light); margin: 0; }
.crumb b { color: var(--tx-strong); font-weight: 600; }

/* ---------- pasos del flujo ---------- */
/* Los pasos, copiados de `.wizard-step-*` de labs.zeusxr.com: número en círculo y
   etiqueta al lado, sin cápsula ni borde. El paso hecho y el actual llevan el círculo en
   lima; lo que cambia en la etiqueta es el gris y el peso, no un fondo teñido. */
.flow { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.fstep {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s2) 0 0;
  font-size: var(--t-md); font-weight: 500; color: var(--tx); white-space: nowrap;
}
.fstep i {
  width: var(--s6); height: var(--s6); border-radius: 50%; background: var(--line); color: var(--tx);
  font: 600 var(--t-xs)/1 var(--font); display: grid; place-items: center; font-style: normal; flex: none;
}
.fstep i svg { width: var(--t-sm); height: var(--t-sm); }
.fstep.ok { color: var(--tx-strong); font-weight: 600; }
.fstep.ok i { background: var(--lime); color: #fff; }
.fstep.on { color: var(--tx-strong); font-weight: 600; }
.fstep.on i { background: var(--lime); color: #fff; }

/* ---------- columnas ---------- */
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s5); align-items: start; }
/* Cada columna reparte el hueco entre SUS tarjetas. El `gap` de `.content` sólo alcanza a
   sus hijos directos, así que dos tarjetas apiladas dentro de una columna se quedaban
   pegadas: se veían como una sola pieza partida por una raya. */
.two > div { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
@media (max-width: 1080px) { .two { grid-template-columns: 1fr; } }

/* ---------- cabecera de tarjeta de formulario ---------- */
.card-t {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-lg); font-weight: 600; color: var(--tx-strong); margin: 0 0 var(--s1);
}
.card-t svg { width: var(--ico); height: var(--ico); color: var(--lime); flex: none; }
.card-s { font-size: var(--t-md); color: var(--tx-light); margin: 0 0 var(--s4); }

/* El título de sección y su frase son una CABECERA, no dos párrafos flotando encima del
   contenido: llevan un filo a sangre debajo, como la cabecera de cualquier otra tarjeta.
   Sin él el ojo compara el borde izquierdo del título —que arranca después de su icono—
   con el de los campos de abajo y lee un desalineado donde hay una jerarquía. */
.card-body > .card-t:first-child { margin: 0 0 var(--s1); }
.card-body > .card-t:first-child + .card-s {
  margin: 0 calc(var(--gut-card) * -1) var(--s5);
  padding: 0 var(--gut-card) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.hint { font-size: var(--t-sm); color: var(--tx-light); margin: var(--s1) 0 0; }

/* ---------- chips seleccionables ---------- */
.picks { display: flex; gap: var(--s2); flex-wrap: wrap; }
.pick {
  padding: var(--s1) var(--s3); border-radius: 999px; border: 1px solid var(--line-mid);
  background: var(--card); font-size: var(--t-md); font-weight: 500; color: var(--tx);
  white-space: nowrap; cursor: pointer; line-height: 22px;
}
.pick:hover { background: var(--hover); }
.pick[aria-pressed="true"] {
  background: var(--lime); border-color: var(--lime); color: #fff; font-weight: 600;
}
/* Excluido: tachado, no rojo. Excluir no es un error. */
.pick.off, .pick[data-exclude="true"] {
  color: var(--tx-light); text-decoration: line-through; background: var(--subtle);
}
.pick:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ---------- filas de ajuste con control a la derecha ---------- */
.srow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft);
}
/* La última fila pierde el filo, pero NO el relleno: quitarlo hacía que su caja midiera
   menos que su contenido y cualquier botón dentro quedara 6 px descentrado. El hueco al
   fondo de la tarjeta lo pone el relleno del cuerpo, no la ausencia del de la fila. */
.srow:last-child { border-bottom: 0; }
.srow .body { min-width: 0; }
.srow .body b { display: block; font-size: var(--t-bd); font-weight: 600; color: var(--tx-strong); }
.srow .body span { display: block; font-size: var(--t-sm); color: var(--tx-light); }
.srow .ctl { flex: none; }

/* Un bloque de texto tal cual: ads.txt, sellers.json. Va en monoespaciada porque son
   líneas donde una coma de más importa, y se lee mejor alineado. */
.codebox {
  width: 100%; resize: vertical;
  font: var(--t-sm)/1.5 var(--num);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  background: var(--card); color: var(--tx-strong);
}
.codebox:focus { outline: 2px solid var(--lime); outline-offset: -1px; border-color: var(--lime); }

.numbox {
  border: 1px solid var(--line-mid); border-radius: var(--r-sm); background: var(--card);
  padding: var(--s1) var(--s2); font: 700 var(--t-bd)/22px var(--num); color: var(--tx-strong);
  width: 64px; text-align: center;
}

/* Interruptor: es un botón, no un span. `aria-pressed` lleva el estado. */
.sw {
  display: inline-block; width: 38px; height: 22px; border-radius: 999px;
  background: var(--line-mid); position: relative; flex: none; vertical-align: middle;
  border: 0; padding: 0; cursor: pointer;
}
.sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
        background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .12s ease; }
.sw[aria-pressed="true"] { background: var(--lime); }
.sw[aria-pressed="true"] i { left: 19px; }
.sw:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sw i { transition: none; } }

/* ---------- lista de comprobaciones ---------- */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: var(--ico-gap); align-items: flex-start; padding: var(--s3) 0; font-size: var(--t-md); }
.checks li + li { border-top: 1px solid var(--line-soft); }
.checks .ci {
  width: var(--ico); height: var(--ico); border-radius: 50%; background: var(--subtle);
  display: grid; place-items: center; flex: none;
}
.checks .ci svg { width: var(--t-sm); height: var(--t-sm); }
.checks .ci.ok { color: var(--lime); }
.checks .ci.bad { color: var(--danger); }
.checks .ci.wait { color: var(--tx-light); }
.checks .tx { min-width: 0; }
.checks .tx b { color: var(--tx-strong); font-weight: 600; }

/* ---------- panel de disponibilidad ----------
   Tarjeta blanca como cualquier otra: el acento es la cifra en lima, no el fondo. */
.est {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh-card);
}
.est > .card-t:first-child { margin: 0 0 var(--s1); }
.est > .card-t:first-child + .card-s {
  margin: 0 calc(var(--s5) * -1) var(--s5);
  padding: 0 var(--s5) var(--s4);
  border-bottom: 1px solid var(--line-soft);
}
.est-nums { display: flex; gap: var(--s6); flex-wrap: wrap; margin-bottom: var(--s5); }
.est-num { min-width: 0; }
.est-num .v {
  display: block; font: 700 var(--t-3x)/1.1 var(--font); color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.est-num .v.grey { color: var(--tx-strong); }
.est-num .l { display: block; font-size: var(--t-md); color: var(--tx); margin-top: var(--s1); line-height: 1.4; }

.gauge { margin-bottom: var(--s5); }
.gauge .lbls { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--tx-strong); margin-bottom: var(--s2); }
.gauge .bar { display: block; height: var(--s2); border-radius: 999px; background: var(--line); position: relative; overflow: hidden; }
.gauge .bar i { position: absolute; inset: 0 auto 0 0; background: var(--lime); border-radius: 999px; }

/* ---------- métrica compacta con icono (la del formulario) ---------- */
.metric-row { display: flex; align-items: center; gap: var(--ico-gap);
  background: var(--subtle); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); min-width: 0; }
.metric-ic {
  width: var(--s8); height: var(--s8); border-radius: var(--r-sm); background: var(--line);
  display: grid; place-items: center; color: var(--tx); flex: none;
}
.metric-ic svg { width: var(--s4); height: var(--s4); }
.metric-ic.lime { background: var(--lime-light); color: var(--lime); }
.metric-row .metric-v { font-size: var(--t-lg); line-height: 1.3; color: var(--tx-strong); }
.metric-row .metric-l { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: 400; }

/* ---------- previsualización en el casco ----------
   Es la maqueta de lo que ve el usuario con el visor puesto, no interfaz: por eso es
   lo único oscuro de todo el panel. */
.preview {
  background: #14181b; border-radius: var(--r-md); padding: var(--s5); position: relative;
  display: grid; place-items: center; min-height: 180px; overflow: hidden;
}
.preview .screen {
  width: 74%; aspect-ratio: 16/9; border-radius: 8px;
  background: linear-gradient(135deg, #3a4a52 0%, #222c31 100%);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.5);
}
.preview .screen .ttl { color: rgba(255,255,255,.5); font-size: var(--t-sm); font-weight: 600; }
.preview .tag {
  position: absolute; top: var(--s2); left: var(--s2); background: rgba(0,0,0,.7); color: #fff;
  font: 700 var(--t-xs)/var(--s4) var(--font); padding: 0 var(--s2); border-radius: var(--s1);
  letter-spacing: .4px;
}
.preview .skip {
  position: absolute; bottom: var(--s2); right: var(--s2); background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.8); font-size: var(--t-xs); font-weight: 600;
  padding: var(--s1) var(--s2); border-radius: var(--r-sm);
}
.preview .cap {
  position: absolute; bottom: var(--s2); left: var(--s3); color: rgba(255,255,255,.35);
  font-size: var(--t-xs);
}

/* ---------- zona de subida ---------- */
.drop {
  border: 1px dashed var(--line-mid); border-radius: var(--r-md);
  background: var(--subtle); padding: var(--s6) var(--s5); text-align: center; cursor: pointer;
  display: block; width: 100%;
}
.drop:hover { background: var(--hover); border-color: var(--lime); }
.drop b { display: block; color: var(--tx-strong); font-size: var(--t-bd); font-weight: 600; }
.drop span { display: block; font-size: var(--t-md); color: var(--tx-light); margin-top: var(--s1); }
.drop:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.progress { height: var(--s1); background: var(--line); border-radius: 999px; overflow: hidden; margin-top: var(--s3); }
.progress i { display: block; height: 100%; background: var(--lime); border-radius: 999px; }

/* ===============================
   Tres espacios: el selector
   ===============================
   Comprar, vender y llevar la red son oficios distintos. El selector cambia de espacio;
   dentro de cada uno el menú habla el vocabulario de ese oficio (docs/09-CONSOLA-IA.md).
   =============================== */

.switch-wrap { position: relative; padding: var(--s3) var(--gut-side) 0; }
.switch {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  background: var(--subtle); border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); font-size: var(--t-md); color: var(--tx-strong);
  cursor: pointer; text-align: left; line-height: 22px;
}
.switch:hover { background: var(--hover); }
.switch > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch b { color: var(--tx-strong); font-weight: 600; }
.switch svg { width: var(--s4); height: var(--s4); color: var(--tx-light); flex: none; }
.switch:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.switch-menu {
  position: absolute; z-index: 20; left: var(--gut-side); right: var(--gut-side); top: 100%;
  background: var(--card); border: 1px solid var(--line-mid); border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: var(--s1); margin-top: var(--s1);
}
.switch-menu button {
  display: flex; align-items: flex-start; gap: var(--ico-gap); width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  color: var(--tx-strong);
}
.switch-menu button:hover { background: var(--hover); }
.switch-menu button[aria-current="true"] b { color: var(--lime); }
.switch-menu button[aria-current="true"] svg { color: var(--lime); }
.switch-menu svg { width: var(--ico); height: var(--ico); color: var(--tx-light); flex: none; }
.switch-menu b { display: block; font-size: var(--t-bd); font-weight: 600; color: var(--tx-strong); }
.switch-menu span span { display: block; font-size: var(--t-sm); color: var(--tx-light); line-height: 1.4; }

/* Aviso de cuántas revisiones esperan. Va en el menú porque es trabajo, no una alarma:
   fondo neutro y número, nunca un punto rojo. */
.nav .tag {
  margin-left: auto; font: 700 var(--t-xs)/var(--s4) var(--num);
  background: var(--hover); color: var(--tx-strong);
  border-radius: 999px; padding: 0 var(--s2);
}
.nav button[aria-current="page"] .tag { background: var(--lime-light); color: var(--lime); }

/* ===============================
   Pestañas de nivel — copiadas de docs/portal-mockup.html §2
   ===============================
   Campaña → conjunto → anuncio, como en Meta. La jerarquía se queda: es cómo funciona el
   motor y cómo compra la gente. Lo que cambia son los nombres de los PASOS del alta.
   =============================== */

.levels { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.level {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4);
  font-size: var(--t-bd); font-weight: 600; color: var(--tx-light);
  border-bottom: 3px solid transparent; margin-bottom: -3px; white-space: nowrap;
  background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer;
}
.level:hover { color: var(--tx-strong); }
.level svg { width: var(--s4); height: var(--s4); }
.level .n {
  font: 700 var(--t-xs)/var(--s4) var(--num); background: var(--hover); color: var(--tx);
  border-radius: 999px; padding: 0 var(--s2);
}
.level.on { color: var(--lime); border-bottom-color: var(--lime); }
.level.on .n { background: var(--lime-light); color: var(--lime); }
.level.on { font-weight: 600; }
.level:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

/* ===============================
   Resumen: lo que hay que atender hoy
   =============================== */

/* ---------- la lista de «lo que hay que atender» ----------
   Una fila de tarea, no un aviso con viñeta. Tres cosas que estaban mal y se ven:

   1. **La fila se salía de la tarjeta.** El contenedor llevaba margen negativo del canal
      y CADA fila llevaba otro: -32 sobre un relleno de 16, así que el punto quedaba
      encima del borde de la tarjeta y el botón lo pisaba por el otro lado. Ahora el
      margen negativo es sólo vertical —para que la lista llene el cuerpo— y lo
      horizontal lo respeta el canal.
   2. **El botón se alineaba arriba.** Con dos líneas de texto al lado, un botón pegado a
      la primera línea se lee como una pieza suelta. Va centrado con la fila.
   3. **La viñeta.** Un punto gris de 7 px delante de cada título no dice nada que el
      título no diga ya, y empuja el texto 19 px fuera del canal de la tarjeta. Fuera: el
      título de la fila arranca exactamente donde el de la tarjeta.

   El filo entre filas va de canal a canal, no a sangre: separar dentro de una tarjeta es
   un asunto del contenido, y una raya que toca los bordes redondeados se lee como si la
   tarjeta estuviera partida. */
.card-body > .alerts { margin: calc(var(--gut-card) * -1) 0; }
.alerts { display: flex; flex-direction: column; }
.alerts .note {
  display: flex; align-items: center; gap: var(--s4);
  margin: 0; padding: var(--s4) 0;
  border: 0; border-radius: 0; background: none;
}
.alerts .note + .note { border-top: 1px solid var(--line-soft); }
/* El botón de una fila se centra CON la fila, no con su primera línea. `align-self` en el
   propio botón y no `align-items` en la fila: así el punto y el texto siguen alineados
   arriba —que es donde tienen que estar cuando el texto ocupa dos líneas— y sólo la acción
   se centra. Vale igual para un aviso suelto dentro de una tarjeta, que es donde el audit
   de maqueta encontró los 2 px. */
.note-act { margin-left: auto; flex: none; align-self: center; }

/* Ficha de creatividad de la biblioteca. El estado va en palabra y punto, como todo. */
.cre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); }
.cre {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); min-width: 0;
}
.cre-name { color: var(--tx-strong); font-weight: 600; font-size: var(--t-bd); }
.cre-meta { font-size: var(--t-sm); color: var(--tx-light); }
.cre-foot { display: flex; align-items: center; gap: var(--s4); margin-top: auto; flex-wrap: wrap; }
.cre-foot .grow { flex: 1; }