/* ==========================================================================
   Panel de marca — sistema visual recalibrado a fondo claro.

   Mismo sistema que la landing y el portal de la creadora, pero para alguien
   que está decidiendo gastar entre $400.000 y $3.000.000 por colaboración.
   Tiene que transmitir orden y control, no fiesta.

   La regla de uso del color es lo que lo hace verse serio:

     · El LIMA está reservado para el dinero. Una sola cosa por pantalla: el
       "desde" en el catálogo, el total en el modal, el monto del trato. Nunca
       en botones de navegación ni en decoración.
     · El MAGENTA es solo alarma y bloqueo: identidad bloqueada, error, monto
       por debajo de la tarifa, acción requerida, descartar.
     · El AZUL es solo categoría de nicho y enlaces.
     · El NEGRO carga toda la estructura: botones primarios, encabezados,
       la columna de filtros, los bloques de dinero.
   ========================================================================== */

:root {
  --canvas:      #F4F4F1;
  --surface:     #FFFFFF;
  --surface-alt: #FAFAF8;
  --ink:         #0E0E0E;
  --ink-soft:    #1A1A1A;
  --lima:        #D6FF00;
  --magenta:     #FF2E9A;
  --azul:        #2323F0;

  --text-2: #4A4A44;
  --text-3: #6E6E68;
  --text-4: #9A9A93;

  --border-1: #D8D8D3;
  --border-2: #C9C9C2;
  --border-3: #EDEDE8;
  --border-dark: #262626;
  --chip-dark-border: #3A3A34;
  --chip-dark-text: #B4B4AE;
  --fila-alerta: #FFFBFD;

  --mono-t: 'Martian Mono', ui-monospace, Menlo, monospace;
  --mono-b: 'Space Mono', ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--mono-b);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ── Tipografía ─────────────────────────────────────────────────────────── */

.h1 { font-family: var(--mono-t); font-weight: 800; font-size: clamp(22px, 2.4vw, 32px);
      letter-spacing: -1.6px; text-transform: uppercase; margin: 0; }
.h-sec { font-family: var(--mono-t); font-weight: 800; font-size: 13px;
         letter-spacing: -0.3px; text-transform: uppercase; margin: 0; }
.p { font-size: 12.5px; line-height: 1.7; margin: 0; color: var(--text-2); }
.etiqueta { font-family: var(--mono-b); font-size: 9.5px; letter-spacing: 1.2px;
            text-transform: uppercase; color: var(--text-3); }
.dato-num { font-family: var(--mono-t); font-weight: 800; letter-spacing: -0.5px; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */

/* Cabecera blanca sobre borde negro.

   Es la diferencia entre este lado y el de la creadora: allá el negro a
   sangre es la cara ruidosa de la marca; aquí quien mira está por gastar
   varios millones y lo que tiene que sentir es orden. El negro se guarda para
   la estructura —el borde, la columna de filtros— no para el fondo. */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  padding: 0 clamp(14px, 2vw, 30px);
  background: var(--surface); border-bottom: 2px solid var(--ink);
  min-height: 68px;
}
.cab__logo { display: flex; align-items: center; gap: 9px; flex: none; }
/* El corchete es la marca: encierra, protege, contiene lo que está adentro —
   que es exactamente lo que hace el escrow. */
.cab__marca { font-family: var(--mono-t); font-weight: 800; font-size: 21px;
              letter-spacing: -1.2px; line-height: 1; color: var(--ink); }
.cab__texto { font-family: var(--mono-t); font-weight: 800; font-size: 12.5px;
              letter-spacing: -0.5px; color: var(--ink); }
.cab__sello { font-size: 9px; letter-spacing: 1px; border: 1px solid var(--border-2);
              color: var(--text-3); padding: 3px 6px; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 24px);
       align-self: stretch; flex: none; white-space: nowrap; }
.nav__item {
  background: none; border: none; padding: 0 2px; cursor: pointer; align-self: stretch;
  font-family: var(--mono-t); font-weight: 800; font-size: 11px; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 7px;
  transition: color 120ms ease-out;
}
.nav__item:hover { color: var(--ink); }
/* El subrayado va en negro, no en lima: navegar no es dinero. Es la única
   sombra que existe en todo el sistema, y por eso marca el activo sin ruido. */
.nav__item.activo { color: var(--ink); box-shadow: inset 0 -4px 0 var(--ink); }
.nav__badge { background: var(--magenta); color: var(--ink); font-size: 9.5px;
              font-weight: 700; padding: 1px 5px; }

.cab__marca-info { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cab__marca-nombre { font-family: var(--mono-t); font-weight: 800; font-size: 11.5px;
                     letter-spacing: -0.2px; color: var(--ink); text-align: right; }
.cab__marca-sub { font-size: 9px; letter-spacing: 0.8px; color: var(--text-4);
                  text-transform: uppercase; text-align: right; }
.cab__avatar { width: 34px; height: 34px; background: var(--ink); color: #fff;
               display: grid; place-items: center; font-family: var(--mono-t);
               font-weight: 800; font-size: 11px; }

/* Buscador de la cabecera.

   `flex: none` a propósito: sin eso el flex lo aprieta hasta que el
   placeholder se parte en cuatro líneas. */
.buscador {
  flex: none; width: 250px; margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-alt); border: 1px solid var(--border-2);
  padding: 0 10px; height: 34px;
}
.buscador__lupa { color: var(--text-4); font-size: 13px; line-height: 1; }
.buscador input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--ink); font-family: var(--mono-b); font-size: 11px;
}
.buscador input::placeholder { color: var(--text-4); }
.buscador:focus-within { border-color: var(--ink); }

/* Contador del plan */
.cab__plan { text-align: right; padding-right: 14px; margin-right: 4px;
             border-right: 1px solid var(--border-3); }
.cab__plan-label { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase;
                   color: var(--text-4); }
.cab__plan-cifra { font-family: var(--mono-t); font-weight: 800; font-size: 13px;
                   letter-spacing: -0.4px; color: var(--ink); margin-top: 2px;
                   font-variant-numeric: tabular-nums; }
.cab__plan-tope { color: var(--text-4); font-weight: 700; }
/* Quedan pocas: magenta, que en este sistema es alarma. */
.cab__plan--poco .cab__plan-cifra { color: var(--magenta); }

/* Barra de bandejas: el triage a la vista, no escondido en un desplegable. */
.barra-bandejas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--surface); border-bottom: 2px solid var(--ink);
  padding: 10px clamp(14px, 2vw, 20px);
  margin: 0 calc(-1 * clamp(18px, 2.4vw, 34px)) 20px;
}
.barra-bandejas__der { display: flex; align-items: center; gap: 14px; }

/* El gap de 2px sobre el fondo gris dibuja las divisiones sin bordes. */
.bandejas { display: flex; gap: 2px; background: var(--border-3); flex-wrap: wrap; min-width: 0; }
.bandeja {
  background: none; border: none; cursor: pointer; padding: 8px 12px;
  font-family: var(--mono-t); font-weight: 700; font-size: 9.5px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.bandeja:hover { background: var(--surface-alt); color: var(--ink); }
.bandeja.on { background: var(--ink); color: #fff; }
.bandeja__n { font-variant-numeric: tabular-nums; color: var(--text-4); }
.bandeja.on .bandeja__n { color: var(--chip-dark-text); }

/* Menú desplegable de bandejas */
.menu { position: relative; }
.menu__lista {
  position: absolute; top: 100%; left: 0; min-width: 250px; z-index: 50;
  background: var(--ink); border: 1px solid var(--border-dark); display: none;
}
.menu__lista.abierto { display: block; }
.menu__op {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--border-dark);
  padding: 12px 14px; cursor: pointer; text-align: left;
  font-family: var(--mono-t); font-weight: 700; font-size: 10.5px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--chip-dark-text);
}
.menu__op:last-child { border-bottom: none; }
.menu__op:hover { background: var(--ink-soft); color: #fff; }
.menu__op.activo { background: var(--ink-soft); color: #fff; }
.menu__op.activo[data-bandeja="pre"] { color: var(--lima); }
.menu__op.activo[data-bandeja="desc"] { color: var(--magenta); }
.menu__conteo { font-size: 10px; color: var(--text-4); }

/* ── Estructura de la vista ─────────────────────────────────────────────── */

.layout { display: flex; align-items: flex-start; min-height: calc(100vh - 68px); }
.filtros {
  width: 262px; flex: none; background: var(--ink); color: #fff;
  position: sticky; top: 68px; max-height: calc(100vh - 68px); overflow-y: auto;
}
.contenido { flex: 1; min-width: 0; padding: clamp(18px, 2.4vw, 34px); }
/* La columna de filtros solo existe en el catálogo. */
.filtros.oculta { display: none; }

.filtros__cab { display: flex; justify-content: space-between; align-items: center;
                padding: 16px 18px; border-bottom: 1px solid var(--border-dark); }
.filtros__titulo { font-family: var(--mono-t); font-weight: 800; font-size: 11.5px;
                   letter-spacing: 0.6px; text-transform: uppercase; }
.filtros__limpiar { background: none; border: none; color: var(--lima); cursor: pointer;
                    font-family: var(--mono-b); font-size: 10px; letter-spacing: 0.8px;
                    text-transform: uppercase; padding: 0; }
.filtros__grupo { padding: 16px 18px; border-bottom: 1px solid var(--border-dark); }
.filtros__label { font-size: 9px; letter-spacing: 1.2px; color: var(--text-4);
                  text-transform: uppercase; margin-bottom: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono-b); font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 6px 9px; cursor: pointer;
  border: 1px solid var(--chip-dark-border); background: transparent; color: var(--chip-dark-text);
}
.chip:hover { border-color: var(--chip-dark-text); color: #fff; }
.chip.on { background: var(--lima); border-color: var(--lima); color: var(--ink); }

.presupuesto__valor { font-family: var(--mono-t); font-weight: 800; font-size: 20px;
                      letter-spacing: -1.1px; color: var(--lima); margin-bottom: 8px; }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: var(--chip-dark-border); border: none; padding: 0; cursor: pointer; margin: 4px 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  background: var(--lima); border: none; cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--lima); border: none; border-radius: 0; cursor: pointer;
}
.rango-extremos { display: flex; justify-content: space-between; font-size: 9px;
                  color: var(--text-4); letter-spacing: 0.6px; }
.filtros__nota { font-size: 9px; line-height: 1.5; color: var(--text-4);
                 letter-spacing: 0.6px; text-transform: uppercase; margin-top: 8px; }

/* ── Encabezado de la vista ─────────────────────────────────────────────── */

.vista-cab { display: flex; justify-content: space-between; align-items: flex-start;
             gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.vista-cab__texto { max-width: 52ch; }
.vista-cab .p { margin-top: 10px; }
.vista-cab__acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.conteo { font-family: var(--mono-t); font-weight: 800; font-size: 10.5px;
          letter-spacing: 0.5px; border: 2px solid var(--ink); padding: 8px 11px;
          text-transform: uppercase; background: var(--surface); }
.toggle { display: flex; border: 2px solid var(--ink); }
.toggle button {
  background: var(--surface); border: none; padding: 8px 13px; cursor: pointer;
  font-family: var(--mono-t); font-weight: 800; font-size: 10.5px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink);
}
.toggle button.on { background: var(--ink); color: #fff; }

/* ── Botones ────────────────────────────────────────────────────────────── */

.btn {
  font-family: var(--mono-t); font-weight: 800; font-size: 11px; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 11px 15px; cursor: pointer;
  background: var(--ink); color: #fff; border: 2px solid var(--ink);
}
.btn:hover { background: var(--azul); border-color: var(--azul); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* Magenta: la acción principal del sistema. El lima NO se usa en botones —
   está reservado al dinero, y un botón lima compite con el precio que está
   justo al lado. */
.btn--magenta { background: var(--magenta); color: var(--ink); border-color: var(--ink); }
.btn--magenta:hover { background: var(--ink); color: var(--magenta); border-color: var(--ink); }

.btn--lima { background: var(--lima); color: var(--ink); border-color: var(--lima); }
.btn--lima:hover { background: var(--ink); color: var(--lima); border-color: var(--ink); }
.btn--linea { background: transparent; color: var(--ink); }
.btn--linea:hover { background: var(--border-3); color: var(--ink); border-color: var(--ink); }
.btn--sm { padding: 8px 11px; font-size: 10px; }

/* ── Fila de creadora ───────────────────────────────────────────────────── */

.fila { background: var(--surface); border: 1px solid var(--border-1); margin-bottom: 14px;
        border-left: 5px solid transparent; transition: background-color 120ms ease-out; }
.fila:hover { background: var(--surface-alt); }
/* El estado del triage se lee de un vistazo bajando por el borde izquierdo,
   sin tener que buscar el ✓ de cada fila. */
.fila--pre  { border-color: var(--ink); border-left-color: var(--magenta); }
.fila--desc { border-color: var(--border-3); border-left-color: var(--border-2); }
.fila--desc .fila__cab { opacity: .62; }

.tarjeta--pre  { border-color: var(--ink); box-shadow: inset 5px 0 0 var(--magenta); }
.tarjeta--desc { border-color: var(--border-3); box-shadow: inset 5px 0 0 var(--border-2); }
.tarjeta--desc .tarjeta__cuerpo { opacity: .62; }
.fila:hover { border-color: var(--ink); }
.fila__cab { display: flex; align-items: center; gap: 16px; padding: 13px 15px; flex-wrap: wrap; }
.avatar { width: 42px; height: 42px; flex: none; background: var(--border-3);
          display: grid; place-items: center; font-size: 8.5px; color: var(--text-4);
          letter-spacing: 0.6px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.fila__id { flex: 1; min-width: 190px; }
.alias { font-family: var(--mono-t); font-weight: 800; font-size: 14px;
         letter-spacing: -0.4px; text-transform: uppercase; }
.sub-id { font-size: 10px; letter-spacing: 0.8px; color: var(--text-3);
          text-transform: uppercase; margin-top: 5px; }

/* Las métricas se alinean en columnas fijas para poder compararlas de arriba
   abajo entre filas. Es la razón de ser de este layout. */
.metricas { display: flex; gap: clamp(14px, 2vw, 30px); align-items: flex-start; }
.metrica { min-width: 62px; }
.metrica__valor { font-family: var(--mono-t); font-weight: 800; font-size: 13px; letter-spacing: -0.5px; }
.metrica__label { font-size: 8.5px; letter-spacing: 1px; color: var(--text-4);
                  text-transform: uppercase; margin-top: 4px; }

.desde { border-left: 4px solid var(--lima); padding-left: 10px; min-width: 106px; }
.desde__valor { font-family: var(--mono-t); font-weight: 800; font-size: 16px; letter-spacing: -0.9px; }
.desde__label { font-size: 8.5px; letter-spacing: 1px; color: var(--text-4);
                text-transform: uppercase; margin-top: 4px; }

.triage { display: flex; gap: 6px; }
.tri {
  width: 34px; height: 34px; border: 2px solid var(--border-2); background: var(--surface);
  cursor: pointer; font-size: 13px; line-height: 1; color: var(--text-3);
  display: grid; place-items: center;
}
.tri:hover { border-color: var(--ink); color: var(--ink); }
/* Los dos que hacen algo, no los que solo marcan. Se distinguen del ✓/✕ para
   que no parezca que descartar y proponer son la misma clase de decisión. */
/* Las dos formas de poner el monto de una propuesta. Van como elección y no
   como atajo: pagarle lo que pide y ofrecerle otra cosa son decisiones
   distintas, y la segunda hay que tomarla a propósito. */
.eleccion-monto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
/* Con canje son tres opciones. Se reparten en dos filas y no en tres columnas:
   a 320 px de ancho, tres cajas dejan cada rotulo en dos lineas y el precio
   partido, que es justo la cifra que hay que leer de un golpe. */
.eleccion-monto--tres { grid-template-columns: 1fr 1fr; }
.eleccion-monto--tres .opcion-monto--canje { grid-column: 1 / -1; }
/* El canje no mueve la plata de la marca, mueve producto. Se marca en azul
   (el color de "esto es informacion", no el magenta de "esto cobra") para que
   no se confunda con las dos opciones que si terminan en un pago grande. */
.opcion-monto--canje.on { background: var(--azul, #2323F0); border-color: var(--azul, #2323F0); }
.opcion-monto--canje.on .opcion-monto__cifra { color: #fff; }
.opcion-monto { background: var(--surface); border: 2px solid var(--border-1);
                padding: 11px 12px; cursor: pointer; text-align: left;
                font-family: var(--mono-t); font-weight: 700; font-size: 11px;
                letter-spacing: -0.2px; color: var(--ink); }
.opcion-monto:hover { border-color: var(--ink); }
.opcion-monto.on { background: var(--ink); color: var(--off-white, #F2F2F2); border-color: var(--ink); }
.opcion-monto__cifra { display: block; font-family: var(--mono-b, 'Space Mono', monospace);
                       font-weight: 400; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.opcion-monto.on .opcion-monto__cifra { color: var(--lima); }

.tri--obrar { border-style: dashed; }
.tri--obrar:hover { background: var(--lima); border-style: solid; }
/* Preseleccionar es magenta y no lima: el lima está reservado al dinero, y un
   ✓ lima justo al lado del precio hace que los dos dejen de significar algo.
   Magenta es el estado de selección en todo el sistema. */
.tri.on-si { background: var(--magenta); border-color: var(--ink); color: var(--ink); }

/* Descartar es GRIS, nunca rojo ni magenta: es una decisión privada de la
   marca sobre su propia lista, no un juicio sobre la creadora. */
.tri.on-no { background: var(--border-2); border-color: var(--ink); color: var(--ink); }

/* La tira de trabajo es lo que hace que este layout funcione: se juzga el
   trabajo real, no solo los números. */
/* Filtro desplegable. El chip sigue sirviendo donde hay pocas opciones y se
   comparan de un vistazo —los rangos de alcance—; para listas largas, un
   desplegable ocupa una linea en vez de veinte. */
.filtro-select {
  width: 100%; font-family: var(--mono-b); font-size: 12.5px;
  padding: 9px 10px; border: 1px solid var(--border-2); background: var(--surface);
  color: var(--ink); cursor: pointer;
}
.filtro-select:focus { outline: none; border-color: var(--ink); }
.filtro-select.activo { border-color: var(--ink); border-width: 2px; font-weight: 700; }

/* ── Piezas en video ─────────────────────────────────────────────────────
   Se definen aparte y antes de la tira: viven pegados a `.tira > *` pero no
   son parte de su bloque, y al reescribirlo se han perdido dos veces.

   `place-self: stretch` es lo que hace que llenen la celda —la tira centra a
   sus hijos, y un hijo centrado toma su tamaño natural, que en un <video> es
   300x150—. Y `contain` en vez de `cover` porque recortando, un video vertical
   de celular queda reducido a una franja del centro que no dice nada del
   trabajo de la creadora. */
.pieza-wrap { position: relative; display: block; place-self: stretch;
              width: 100%; height: 100%; min-width: 0; overflow: hidden;
              padding: 0; border: none; background: none; cursor: pointer; }
.pieza-wrap:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.pieza-video { width: 100%; height: 100%; object-fit: contain; display: block;
               background: var(--ink); }
/* Un video sin portada generada. Gris y no negro: un rectángulo negro entre
   piezas buenas hace que la fila entera se lea como rota, que es justo lo que
   pasaba mientras el navegador sacaba el fotograma él mismo. */
.pieza-sin-portada { display: block; width: 100%; height: 100%; background: var(--border-3); }
.pieza-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
              width: 30px; height: 30px; display: grid; place-items: center;
              background: rgba(14, 14, 14, .72); color: var(--lime); font-size: 11px;
              pointer-events: none; transition: opacity .15s; }
/* Mientras corre, el triangulo estorba. */
.pieza-wrap.corriendo .pieza-play { opacity: 0; }

/* Miniaturas del trabajo.
   Cuatro por fila repartiendose el ancho. No se les fija proporcion: una pieza
   vertical que ocupara un cuarto de una pantalla ancha tendria que medir 650px
   de alto y cada creadora se comeria la pantalla entera. Con alto fijo y
   `contain`, el video se ve completo sobre el fondo oscuro y la fila cabe de
   un vistazo.
   El tope de ancho evita que con una sola pieza quede un panoramico absurdo. */
.tira { display: flex; gap: 2px; padding: 2px 0 0;
        border-top: 1px solid var(--border-1); }
.tira > * { flex: 1 1 0; max-width: 380px; height: 400px;
            background: var(--ink); min-width: 0; overflow: hidden;
            display: grid; place-items: center; font-size: 9px; color: var(--text-4);
            letter-spacing: 0.8px; }
/* Igual que el video: completa sobre fondo oscuro. Recortando, una foto
   vertical perdia la mitad del encuadre —y la mitad que se pierde suele ser
   justo donde esta el producto o la cara—. */
.tira img { width: 100%; height: 100%; object-fit: contain; background: var(--ink); }

@media (max-width: 720px) {
  .tira > * { height: 230px; }
}

/* Sin trabajo no se muestran cajas vacias: se dice. */
.tira-vacia { border-top: 1px solid var(--border-1); padding: 12px 14px;
              font-size: 11px; color: var(--text-4); letter-spacing: 0.4px; }

/* ── Tarjeta de creadora ────────────────────────────────────────────────── */

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.tarjeta { background: var(--surface); border: 1px solid var(--border-1); min-width: 0; }
.tarjeta:hover { border-color: var(--ink); }
.tarjeta__foto { position: relative; height: 196px; background: var(--border-3);
                 display: grid; place-items: center; font-size: 10px; color: var(--text-4);
                 overflow: hidden; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__codigo { position: absolute; top: 0; left: 0; background: var(--ink); color: #fff;
                   font-family: var(--mono-t); font-weight: 700; font-size: 9.5px;
                   letter-spacing: 0.5px; padding: 5px 8px; }
.tarjeta__triage { position: absolute; top: 6px; right: 6px; display: flex;
                   flex-direction: column; gap: 4px; }
.tarjeta__cuerpo { padding: 13px 14px; }
.tarjeta__chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.chip-claro { font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
              padding: 4px 7px; border: 1px solid var(--border-2); color: var(--text-2); }
.chip-nicho { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Sello de cumplimiento.
   Lo que la marca más quiere saber antes de pagar: si esta persona entrega.
   Sale de hechos —kits despachados y contenido publicado— y por eso se dibuja
   con el color de acento, no con un ícono decorativo.
   El estado neutro dice "sin historial" en gris: nunca se rellena con ceros,
   que se leen como un reproche a quien simplemente es nueva. */
.sello { display: inline-flex; align-items: center; gap: 5px;
         font-family: var(--mono-t); font-size: 9.5px; font-weight: 700;
         letter-spacing: 0.4px; text-transform: uppercase;
         padding: 4px 7px; border: 1px solid var(--border-2); color: var(--text-3); }

/* ── Trayectoria ─────────────────────────────────────────────────────────

   Una línea de hecho, no una insignia. Se cambió porque de 299 creadoras 40
   tienen un trato y NINGUNA tiene tres: una píldora que dice "NUEVA" repetida
   259 veces no informa nada y se lee como un defecto de todo el catálogo.

   Con cero tratos dice algo cierto y positivo —las métricas están
   verificadas— y el salto visual del primer trato, que es el que más se va a
   ver estos meses, es el cuadrado pasando de contorno a relleno.            */

.trayectoria { display: inline-flex; align-items: center; gap: 7px;
               font-family: var(--mono-t); font-weight: 700; font-size: 10px;
               letter-spacing: -0.2px; color: var(--ink); }
.trayectoria__marca { width: 15px; height: 15px; flex: none;
                      display: grid; place-items: center;
                      background: var(--ink); color: #fff; font-size: 9px; }
.trayectoria__marca--vacia { background: none; border: 1px solid var(--border-2); }
.trayectoria--nueva { color: var(--text-3); }

/* Sobre negro el relleno va en lima con el ✓ oscuro: es el color de mayor
   jerarquía disponible ahí. */
.trayectoria--oscuro { color: #F2F2F2; }
.trayectoria--oscuro .trayectoria__marca { background: var(--lima); color: var(--ink); }
.trayectoria--oscuro .trayectoria__marca--vacia { background: none; border-color: #4A4A44; }

/* El tamaño de audiencia, como etiqueta del dato de su red y no como insignia
   suelta: solo significa algo junto al número al que acompaña. */
.tier { color: var(--azul); font-family: var(--mono-b); font-weight: 700;
        font-size: 9px; letter-spacing: 0.7px; margin-left: 5px; }
/* Negro y no lima, por lo mismo: es una señal de confianza, no una cifra de
   dinero. En negro además pesa más, que es lo que se busca — el historial de
   cumplimiento es el diferenciador del producto. */
.sello--cumple { background: var(--ink); border-color: var(--ink); color: #fff; }
.sello__marca { font-size: 11px; line-height: 1; }

/* Paquetes en la ficha. Van antes del trabajo porque es la oferta que más
   conviene a las dos partes: menos fricción para la marca, trato más grande
   para ella. */
.paquetes-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.paq-card { border: 2px solid var(--ink); padding: 13px 14px; display: flex; flex-direction: column; }
.paq-card__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.paq-card__nombre { font-family: var(--mono-t); font-weight: 800; font-size: 13px; letter-spacing: -0.3px; }
.paq-card__desc { font-size: 11.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.paq-card__precio { font-family: var(--mono-t); font-weight: 800; font-size: 16px;
                    letter-spacing: -0.7px; white-space: nowrap; }
.paq-card__incluye { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.paq-card__ahorro { font-size: 11px; background: var(--lima); color: var(--ink);
                    padding: 6px 8px; margin-top: auto; line-height: 1.45; }

/* Bloque de historial en la ficha ampliada. */
.historial { border: 2px solid var(--ink); padding: 14px 15px; margin-top: 18px; }
.historial--vacio { border-color: var(--border-2); }
.historial__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 14px; }
.historial__valor { font-family: var(--mono-t); font-size: 19px; font-weight: 800;
                    letter-spacing: -0.8px; line-height: 1.1; }
.tarjeta__metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px;
                     padding-top: 13px; border-top: 1px solid var(--border-3); }
.tarjeta__pie { display: flex; justify-content: space-between; align-items: center; gap: 10px;
                margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border-3); }

/* ── Barra de comparación ───────────────────────────────────────────────── */

.barra-comp {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--ink); color: #fff; padding: 12px clamp(14px, 2vw, 26px);
  display: none; align-items: center; gap: 16px; flex-wrap: wrap;
}
.barra-comp.visible { display: flex; }
.barra-comp__conteo { font-family: var(--mono-t); font-weight: 800; font-size: 12px;
                      letter-spacing: -0.2px; }
.barra-comp__codigos { font-size: 10px; letter-spacing: 0.8px; color: var(--chip-dark-text);
                       flex: 1; min-width: 120px; }
.barra-comp button { margin-left: 0; }
.btn-oscuro { background: transparent; border: 2px solid var(--chip-dark-border);
              color: var(--chip-dark-text); font-family: var(--mono-t); font-weight: 800;
              font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
              padding: 9px 12px; cursor: pointer; }
.btn-oscuro:hover { border-color: #fff; color: #fff; }

/* ── Estados vacíos, carga y error ──────────────────────────────────────── */

.estado { background: var(--surface); border: 1px solid var(--border-1); padding: 40px 32px; }
.estado__cuadro { width: 44px; height: 44px; border: 2px solid var(--ink); display: grid;
                  place-items: center; font-family: var(--mono-t); font-weight: 800;
                  font-size: 16px; margin-bottom: 18px; }
.estado__titulo { font-family: var(--mono-t); font-weight: 800; font-size: 15px;
                  letter-spacing: -0.4px; text-transform: uppercase; margin-bottom: 10px; }
.estado__texto { font-size: 12.5px; line-height: 1.7; color: var(--text-2); max-width: 46ch; }
.estado__acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.estado--error { border: 2px solid var(--magenta); }
.estado--error .estado__cuadro { background: var(--magenta); border-color: var(--magenta); }
.estado__meta { font-size: 9.5px; letter-spacing: 0.8px; color: var(--text-4);
                margin-top: 16px; text-transform: uppercase; }

@keyframes pulso { 0%, 100% { opacity: .5 } 50% { opacity: .16 } }
.hueso { background: var(--border-3); animation: pulso 1.4s ease-in-out infinite; }
.hueso:nth-child(2) { animation-delay: .1s }
.hueso:nth-child(3) { animation-delay: .2s }
.hueso:nth-child(4) { animation-delay: .3s }
.hueso:nth-child(5) { animation-delay: .45s }
@media (prefers-reduced-motion: reduce) {
  .hueso { animation: none; opacity: .4; }
}

.oculto { display: none !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Bajo 900px la columna de filtros se vuelve un panel desplegable. */
@media (max-width: 900px) {
  .filtros { position: fixed; inset: 68px 0 0 0; width: 100%; max-height: none;
             z-index: 44; display: none; overflow-y: auto; }
  .filtros.abierto { display: block; }
  .abrir-filtros { display: inline-flex !important; }
  .fila__cab { gap: 12px; }
  .metricas { width: 100%; order: 3; }
  .triage { order: 2; margin-left: auto; }
}
.abrir-filtros { display: none; }

/* El buscador tiene ancho fijo a propósito —si no, el flex lo aprieta hasta
   partir el placeholder— así que por debajo de 1280 hay que sacarlo del flujo
   en vez de dejar que empuje la cabecera fuera de la pantalla. Los filtros
   hacen el mismo trabajo y siguen ahí. */
@media (max-width: 1280px) {
  .buscador { display: none; }
  .cab__marca-info { margin-left: auto; }
}

@media (max-width: 1100px) {
  .nav { display: none; }
  /* En pantallas angostas el nombre de la marca empuja la cabecera fuera del
     viewport. Se deja solo el avatar, que es suficiente para saber con qué
     cuenta se está trabajando. */
  .cab__marca-info > div:nth-child(2) { display: none; }
  .cab__marca-info { min-width: 0; }
  .nav.abierto { display: flex; position: absolute; top: 68px; left: 0; right: 0;
                 background: var(--surface); border-bottom: 2px solid var(--ink);
                 flex-direction: column; align-items: stretch;
                 height: auto; padding: 8px 0; z-index: 46; }
  .nav.abierto .nav__item { align-self: stretch; padding: 12px 18px; }
  .abrir-nav { display: block !important; }
}

/* Ya no cabe el contador junto al menú, al logo y al avatar. El plan se sigue
   viendo en "Mi perfil"; lo que no puede pasar es que la cabecera desborde. */
@media (max-width: 620px) {
  .cab__plan { display: none; }
  .cab__sello { display: none; }
}

.abrir-nav { display: none; background: none; border: 2px solid var(--ink);
             color: var(--ink); font-family: var(--mono-t); font-weight: 800; font-size: 10.5px;
             padding: 7px 10px; cursor: pointer; }
.abrir-nav:hover { background: var(--ink); color: #fff; }

/* ── Home editorial ──────────────────────────────────────────────────────────

   La puerta de entrada de la marca. El contenido real de las creadoras es el
   protagonista y la interfaz es el marco: de ahí que las piezas sean grandes y
   todo lo demás sea texto sobre blanco.                                      */

.hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: 18px; align-items: start; margin-bottom: 34px; }
.hero--solo { grid-template-columns: minmax(0, 1fr); }

.hero__pieza { position: relative; margin: 0; min-width: 0; overflow: hidden;
               background: var(--border-3); border: 1px solid var(--border-1); }
/* aspect-ratio dentro de un grid necesita ancho explícito: si la fila se
   estira por el otro hijo, calcula el ANCHO a partir del alto y desborda su
   columna. Es un bug que ya se coló una vez. */
.hero__pieza > img, .hero__pieza > .pieza-wrap { width: 100%; aspect-ratio: 16/10; }
.hero__pieza img, .hero__pieza video { width: 100%; height: 100%; object-fit: cover; }

.hero__etiqueta { position: absolute; top: 0; left: 0; z-index: 2;
                  background: var(--azul); color: #fff; font-family: var(--mono-t);
                  font-weight: 700; font-size: 9.5px; letter-spacing: 0.8px;
                  text-transform: uppercase; padding: 6px 10px; }
.hero__pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
             padding: 26px 14px 12px; color: #fff;
             background: linear-gradient(to top, rgba(14,14,14,.86), transparent); }
.hero__alias { font-family: var(--mono-t); font-weight: 800; font-size: 15px;
               letter-spacing: -0.5px; text-transform: uppercase; }
.hero__meta { font-size: 10px; letter-spacing: 0.7px; text-transform: uppercase;
              color: #D8D8D3; margin-top: 3px; }

.hero__panel { background: var(--surface); border: 2px solid var(--ink);
               padding: 22px 20px; min-height: 100%; }
.hero__panel-etiqueta { display: inline-block; background: var(--magenta); color: var(--ink);
                        font-family: var(--mono-t); font-weight: 700; font-size: 9.5px;
                        letter-spacing: 0.8px; text-transform: uppercase; padding: 5px 9px; }
.hero__panel-etiqueta--proceso { background: var(--azul); color: #fff; }

/* ── Bandas ─────────────────────────────────────────────────────────────── */

.banda { margin-bottom: 34px; }
.banda__cab { display: flex; align-items: flex-end; justify-content: space-between;
              gap: 16px; flex-wrap: wrap;
              border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 16px; }
.banda__titulo { display: flex; align-items: stretch; gap: 12px; }
.banda__barra { width: 9px; flex: none; }
.banda__sub { font-size: 11.5px; color: var(--text-3); margin: 5px 0 0; }

/* "Nuestro equipo", nunca "curado por IA": el copy es deliberado. Lo que hace
   valer la selección es que la firmó una persona. */
.sello-equipo { background: var(--magenta); color: var(--ink); font-family: var(--mono-t);
                font-weight: 700; font-size: 9.5px; letter-spacing: 0.7px;
                text-transform: uppercase; padding: 6px 10px; }

/* ── Tarjetas de la selección ───────────────────────────────────────────── */

.sel-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
              gap: 16px; }
.sel-card { background: var(--surface); border: 1px solid var(--border-1); min-width: 0;
            display: flex; flex-direction: column; }
.sel-card:hover { border-color: var(--ink); }
.sel-card__foto { aspect-ratio: 4/5; width: 100%; background: var(--border-3);
                  overflow: hidden; display: grid; place-items: center;
                  font-size: 10px; color: var(--text-4); }
.sel-card__foto img, .sel-card__foto video { width: 100%; height: 100%; object-fit: cover; }
.sel-card__cuerpo { padding: 13px 14px; display: flex; flex-direction: column; flex: 1; }

/* La razón, con la barra del acento a la izquierda. Es lo que distingue esta
   tarjeta de una del catálogo, así que tiene que leerse como algo escrito y no
   como un dato más. */
.sel-card__razon { background: var(--surface-alt); border-left: 3px solid var(--azul);
                   font-size: 11.5px; line-height: 1.6; color: var(--text-2);
                   padding: 9px 11px; margin: 10px 0 0; }
.sel-card__pie { display: flex; align-items: flex-end; justify-content: space-between;
                 gap: 10px; margin-top: auto; padding-top: 12px; }

/* ── Tira de una colección ──────────────────────────────────────────────── */

.col-tira { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.col-pieza { position: relative; min-width: 0; padding: 0; border: 1px solid var(--border-1);
             background: var(--border-3); cursor: pointer; overflow: hidden;
             aspect-ratio: 4/5; width: 100%; }
.col-pieza:hover { border-color: var(--ink); }
.col-pieza img, .col-pieza video { width: 100%; height: 100%; object-fit: cover; }
.col-pieza__alias { position: absolute; left: 0; right: 0; bottom: 0;
                    padding: 20px 8px 7px; color: #fff; text-align: left;
                    font-family: var(--mono-t); font-weight: 700; font-size: 10px;
                    letter-spacing: -0.2px; text-transform: uppercase;
                    background: linear-gradient(to top, rgba(14,14,14,.84), transparent); }

@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__pieza > img, .hero__pieza > .pieza-wrap { aspect-ratio: 4/5; }
  /* Seis piezas en fila no caben; el scroll táctil conserva la banda entera
     en vez de partirla en dos filas cortadas. */
  .col-tira { grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr);
              grid-template-columns: none; overflow-x: auto; padding-bottom: 6px; }
}

/* ── Campañas con cupos ──────────────────────────────────────────────────────

   Más peso del negro que en el resto del panel: acá el negro no solo hace
   bordes y botones, también carga secciones completas de fondo. El claro queda
   para donde hay que leer y comparar datos.

   Y una licencia: sobre negro el lima se usa como acento tipográfico —títulos
   de panel, contadores— además de para el dinero. Funciona porque sobre negro
   es el color de mayor jerarquía disponible.                                */

.cab-negra { background: var(--ink); color: #fff; padding: 22px clamp(16px,2vw,26px);
             display: flex; align-items: flex-end; justify-content: space-between;
             gap: 20px; flex-wrap: wrap;
             margin: 0 calc(-1 * clamp(18px,2.4vw,34px)) 20px; }
.cab-negra__eyebrow { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
                      color: var(--text-4); display: flex; align-items: center; gap: 10px; }
.cab-negra__titulo { font-family: var(--mono-t); font-weight: 800; font-size: clamp(19px,2.4vw,26px);
                     letter-spacing: -1.3px; margin: 8px 0 0; color: #fff; }
.cab-negra__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip-oscuro { font-family: var(--mono-t); font-weight: 700; font-size: 9.5px;
               letter-spacing: 0.6px; text-transform: uppercase; padding: 6px 9px;
               border: 1px solid var(--chip-dark-border); color: var(--chip-dark-text); }
.chip-estado { font-family: var(--mono-b); font-weight: 700; font-size: 9.5px;
               letter-spacing: 0.6px; text-transform: uppercase; padding: 4px 8px; color: #fff; }
.chip-estado--azul { background: var(--azul); }

.cuenta-regresiva { font-family: var(--mono-t); font-weight: 800; font-size: 28px;
                    letter-spacing: -1.6px; color: var(--lima);
                    font-variant-numeric: tabular-nums; }
.cuenta-regresiva--neutra { color: #fff; }

.cupos-layout { display: grid; grid-template-columns: minmax(0,1fr) 372px;
                gap: 18px; align-items: start; }
.cupos-layout__col { min-width: 0; }
.cupos-layout__panel { min-width: 0; }

.tarjeta-plana { background: var(--surface); border: 1px solid var(--border-1); padding: 18px 20px; }
.cab-interna { background: var(--ink); padding: 14px 18px; display: flex;
               align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.contador-magenta { background: var(--magenta); color: var(--ink); font-family: var(--mono-t);
                    font-weight: 800; font-size: 10px; letter-spacing: 0.6px;
                    text-transform: uppercase; padding: 6px 10px; }

.panel-negro { background: var(--ink); color: #fff; padding: 18px 20px; }
.panel-negro__titulo { font-family: var(--mono-t); font-weight: 800; font-size: 12px;
                       letter-spacing: 0.5px; text-transform: uppercase; color: var(--lima); }
.panel-azul { background: var(--azul); color: #fff; padding: 18px 20px; margin-top: 14px; }
.nota-oscura { font-size: 11px; line-height: 1.65; color: var(--chip-dark-text); margin: 10px 0 0; }
.contador-gigante { font-family: var(--mono-t); font-weight: 800; font-size: 48px;
                    letter-spacing: -3px; line-height: 1; margin: 6px 0 10px; }
.rango-extremos { display: flex; justify-content: space-between;
                  font-size: 9.5px; color: var(--text-4); }
.total-escrow { font-size: 28px; color: var(--lima); margin-top: 4px;
                border-left: 4px solid var(--lima); padding-left: 10px; }

/* Separadores como fondo, no como borde: da líneas exactas de 1px sin dobles. */
.filas-cupo { display: flex; flex-direction: column; gap: 1px; background: var(--border-3); }
.filas-cupo--apagadas { opacity: .55; }

.fila-cupo { background: var(--surface); display: flex; align-items: center;
             gap: 14px; padding: 12px 16px; border-left: 5px solid transparent;
             transition: background-color 120ms ease-out; }
.fila-cupo:hover { background: var(--surface-alt); }
/* Marcada = fila invertida a negro. Es el peso visual más fuerte de la
   pantalla, y corresponde: es la decisión que cuesta dinero. */
.fila-cupo--on { background: var(--ink); color: #fff; border-left-color: var(--magenta); }
.fila-cupo--on:hover { background: var(--ink); }
.fila-cupo--on .alias, .fila-cupo--on .desde__valor { color: #fff; }
.fila-cupo--on .sub-id, .fila-cupo--on .etiqueta { color: var(--chip-dark-text); }
.fila-cupo--on .metrica__valor { color: #fff; }
.fila-cupo--on .tier { color: #6FA4FF; }
.fila-cupo--acepto { border-left-color: var(--magenta); }
.fila-cupo--invitada { border-left-color: var(--azul); }
.fila-cupo--paso, .fila-cupo--cupos_llenos { border-left-color: var(--border-2); }
.fila-cupo--confirmada { border-left-color: var(--ink); }

.fila-cupo__avatar { width: 42px; height: 42px; flex: none; background: var(--border-3);
                     overflow: hidden; display: grid; place-items: center; }
.fila-cupo__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fila-cupo__id { flex: none; width: 176px; min-width: 0; }
.fila-cupo__metricas { flex: 1; min-width: 0; display: flex; gap: 22px; }
.fila-cupo__tray { flex: none; width: 182px; }
.fila-cupo__tarifa { flex: none; width: 112px; text-align: right;
                     border-right: 4px solid var(--lima); padding-right: 9px; }
.fila-cupo__estado { flex: none; width: 104px; text-align: right; }

.casilla { width: 22px; height: 22px; flex: none; border: 2px solid var(--ink);
           background: var(--surface); cursor: pointer; font-size: 12px; line-height: 1;
           display: grid; place-items: center; }
.casilla--on { background: var(--magenta); color: var(--ink); }

.pill { font-family: var(--mono-b); font-weight: 700; font-size: 9.5px; letter-spacing: 0.6px;
        text-transform: uppercase; padding: 4px 8px; display: inline-block; }
.pill--acepto { background: var(--magenta); color: var(--ink); }
.pill--invitada { background: var(--surface); border: 1px solid var(--border-2); color: var(--text-3); }
.pill--paso, .pill--cupos_llenos, .pill--vencida { background: var(--border-3); color: var(--text-3); }
.pill--confirmada { background: var(--ink); color: #fff; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
               gap: 1px; background: var(--border-dark); margin-bottom: 20px; }
.indicador { background: #141414; color: #fff; padding: 16px 18px; }
.indicador__cifra { font-family: var(--mono-t); font-weight: 800; font-size: 24px;
                    letter-spacing: -1.4px; margin: 6px 0 4px; }
.indicador__nota { font-size: 10.5px; color: var(--chip-dark-text); }

/* Medidor del plan: el trabajo pesado lo hace esto, no la tipografía. Ver ocho
   celdas magenta llenándose de golpe comunica el costo mejor que un titular. */
.medidor { display: flex; gap: 3px; flex-wrap: wrap; margin: 10px 0; }
.medidor__celda { width: 18px; height: 18px; border: 1px solid var(--border-2); }
.medidor__celda--usada { background: var(--ink); border-color: var(--ink); }
.medidor__celda--esta { background: var(--magenta); border-color: var(--magenta); }
.plan-cab { display: flex; justify-content: space-between; align-items: baseline;
            gap: 12px; font-size: 11px; }
.plan-linea { display: flex; justify-content: space-between; align-items: center;
              gap: 12px; padding-top: 10px; border-top: 1px solid var(--border-3);
              font-size: 11.5px; }
.plan-delta { font-family: var(--mono-t); font-weight: 800; color: var(--magenta); }

/* El aviso de saldo SÍ es enfático: acá sí hay un error que evitar. */
.aviso-fuerte { border: 2px solid var(--magenta); background: var(--surface);
                padding: 14px 16px; margin-top: 14px; }

.chip-claro--on { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--linea-oscuro { background: transparent; color: #fff; border-color: var(--chip-dark-border); }
.btn--linea-oscuro:hover { background: transparent; border-color: #fff; color: #fff; }
.dinero-fila--oscura { border-bottom-color: var(--border-dark); }
.dinero-fila--oscura .dinero-fila__label { color: var(--chip-dark-text); }

/* Para lectores de pantalla: lo que hoy solo se comunica por color. */
.aria-solo { position: absolute; width: 1px; height: 1px; overflow: hidden;
             clip: rect(0 0 0 0); white-space: nowrap; }

/* Las filas de seis columnas fijas no sobreviven a menos de ~1300px: la
   columna flexible se colapsa y el contenido se monta encima del vecino. Se
   convierten en tarjeta apilada en vez de dejarlas encogerse. */
@media (max-width: 1200px) {
  .cupos-layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1300px) {
  .fila-cupo { flex-wrap: wrap; align-items: flex-start; }
  .fila-cupo__id { width: auto; flex: 1; }
  .fila-cupo__metricas { flex: 1 0 100%; order: 3; }
  .fila-cupo__tray { width: auto; order: 4; }
  .fila-cupo__tarifa { order: 5; margin-left: auto; }
  .fila-cupo__estado { width: auto; order: 2; margin-left: auto; }
}