/* ============================================================
   HOY · el tablero del recorrido (Bloque 2A). Todo sale de tokens.css.
   El tinte de cada columna es el de su etapa (--e-*): borde superior del color y fondo al
   6 % (--e-*-dim). El mismo tinte se repite en las pestañas de Producción y en los grupos
   de Piezas, así una etapa se ve igual en las tres pantallas.
   ============================================================ */

.hoy-cab{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-6);
}
.hoy-cab h2{ margin:0; font-size:16px; font-weight:600; flex:1 1 auto; }
.hoy-toggle{
  display:inline-flex; align-items:center; gap:var(--sp-2); font-size:12.5px; color:var(--ink-2);
  cursor:pointer; user-select:none;
}
.hoy-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.hoy-sw{
  width:28px; height:16px; border-radius:99px; background:var(--s3); border:1px solid var(--line);
  position:relative; flex:none;
}
.hoy-sw::after{
  content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%;
  background:var(--ink-3); transition:left .15s;
}
.hoy-toggle.on .hoy-sw{ background:var(--ambar-dim); border-color:var(--ambar); }
.hoy-toggle.on .hoy-sw::after{ left:14px; background:var(--ambar); }
.hoy-toggle b{ font-family:var(--f-mono); color:var(--ambar-ink); font-weight:500; }
.hoy-toggle-hint{ font-size:var(--fs-xs); color:var(--ink-3); }
.hoy-cupo{ font-size:var(--fs-sm); color:var(--ink-3); width:100%; text-align:right; }
.hoy-cupo b{ font-family:var(--f-mono); font-weight:500; color:var(--turquesa-ink); }

/* ---------- el tablero ---------- */
/* Seis columnas cuando el contenedor da; tres en dos filas cuando no (1366 con la barra
   abierta: 1084px para seis columnas eran 170px cada una, sin lugar para un botón). Se
   mide el contenedor y no el viewport porque el que angosta esto puede ser el drawer de
   Crear contenido (460px de padding-right en .app) o la barra contraída, sin que la
   ventana cambie. */
#hoy-raiz{ container-type:inline-size; }
.hoy-tablero{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--sp-4); align-items:start;
}
@container (min-width: 1240px){
  .hoy-tablero{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}
.hoy-col{
  --et:var(--ink-3); --et-ink:var(--ink-3); --et-dim:transparent;
  background:linear-gradient(var(--et-dim), var(--et-dim)), var(--s1);
  border:1px solid var(--line); border-top:3px solid var(--et); border-radius:var(--r-md);
  padding:var(--sp-4); min-width:0; min-height:120px;
}
.hoy-col[data-etapa="ideas"]{ --et:var(--e-ideas); --et-ink:var(--e-ideas-ink); --et-dim:var(--e-ideas-dim); }
.hoy-col[data-etapa="prod"]{ --et:var(--e-prod); --et-ink:var(--e-prod-ink); --et-dim:var(--e-prod-dim); }
.hoy-col[data-etapa="rev"]{ --et:var(--e-rev); --et-ink:var(--e-rev-ink); --et-dim:var(--e-rev-dim); }
.hoy-col[data-etapa="salir"]{ --et:var(--e-salir); --et-ink:var(--e-salir-ink); --et-dim:var(--e-salir-dim); }
.hoy-col[data-etapa="prog"]{ --et:var(--e-prog); --et-ink:var(--e-prog-ink); --et-dim:var(--e-prog-dim); }
.hoy-col[data-etapa="num"]{ --et:var(--e-num); --et-ink:var(--e-num-ink); --et-dim:var(--e-num-dim); }
.hoy-col-head{
  display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); font-weight:600;
  color:var(--ink); text-decoration:none; margin-bottom:2px;
}
.hoy-col-head:hover{ color:var(--ink); }
.hoy-col-head:hover .hoy-ir{ color:var(--ink-2); }
.hoy-et-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--et); flex:none; }
.hoy-n{ font:500 var(--fs-xs)/1 var(--f-mono); color:var(--et-ink, var(--et)); }
.hoy-ir{ margin-left:auto; color:var(--ink-3); font-weight:400; font-size:var(--fs-xs); }
.hoy-hint{ margin:0 0 var(--sp-4); font-size:var(--fs-xs); color:var(--ink-3); line-height:var(--lh-tight); }
.hoy-lista{ display:flex; flex-direction:column; gap:var(--sp-2); }

/* ---------- las tarjetas ---------- */
.hoy-tarjeta{
  background:var(--s2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px var(--sp-4); font-size:12.5px; line-height:1.35; min-width:0;
}
.hoy-t{
  color:var(--ink); font-weight:500; display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.hoy-m{
  font-size:var(--fs-xs); color:var(--ink-3); margin-top:3px; font-family:var(--f-mono);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.hoy-a{ margin-top:7px; display:flex; gap:var(--sp-1); flex-wrap:wrap; }
.hoy-a button{ padding:3px var(--sp-3); font-size:11.5px; }
.hoy-a button.ghost{ background:transparent; border-color:transparent; color:var(--ink-2); }
.hoy-a button.ghost:hover{ color:var(--ink); border-color:var(--line); }
.hoy-a:empty{ display:none; }
/* Lo que espera una respuesta lleva un pin: borde izquierdo y un degradé del color. */
.hoy-tarjeta[data-pin]{ border-left:3px solid var(--ambar); background:linear-gradient(90deg, var(--ambar-dim), var(--s2) 55%); }
.hoy-tarjeta[data-pin="rojo"]{ border-left-color:var(--rojo); background:linear-gradient(90deg, rgba(232,48,42,.12), var(--s2) 55%); }
.hoy-tarjeta[data-pin="turquesa"]{ border-left-color:var(--turquesa); background:linear-gradient(90deg, var(--turquesa-dim), var(--s2) 55%); }
.hoy-tarjeta[data-pin="gris"]{ border-left-color:var(--ink-3); background:var(--s2); }
.hoy-pinlbl{
  display:block; font:600 var(--fs-micro)/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ambar-ink); margin-bottom:var(--sp-1);
}
.hoy-tarjeta[data-pin="rojo"] .hoy-pinlbl{ color:var(--rojo-2); }
.hoy-tarjeta[data-pin="turquesa"] .hoy-pinlbl{ color:var(--turquesa-ink); }
.hoy-tarjeta[data-pin="gris"] .hoy-pinlbl{ color:var(--ink-2); }
.hoy-tablero.solo .hoy-tarjeta:not([data-pin]){ display:none; }
.hoy-tablero.solo .hoy-mas{ display:none; }
.hoy-punto{
  display:inline-block; width:7px; height:7px; border-radius:50%; flex:none; margin-right:5px;
  background:var(--ink-3); vertical-align:middle;
}
.hoy-tarjeta[data-situacion="corriendo"] .hoy-punto{ background:var(--turquesa); animation:cc-latido 1.1s ease-in-out infinite; }
.hoy-vacio{
  font-size:11.5px; color:var(--ink-3); padding:var(--sp-4) var(--sp-2); line-height:1.35;
  border:1px dashed var(--line); border-radius:6px;
}
.hoy-vacio b{ color:var(--ink-2); }
.hoy-solo-vacio{ border-style:solid; border-color:transparent; }
.hoy-reintentar{ font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-3); vertical-align:baseline; }
.hoy-mas{ display:block; font-size:var(--fs-xs); color:var(--ink-3); margin-top:var(--sp-1); }

/* ---------- 390: una columna por pantalla, scroll lateral con snap ---------- */
/* El overflow es del tablero y no del documento: es lo que el harness mide
   (scrollWidth > innerWidth del documentElement). */
/* ---------- el teléfono: las seis etapas, una debajo de otra ----------
   Esto era un carrusel horizontal con snap. En un teléfono de 390 la columna entraba a
   335px y la siguiente asomaba cortada a la mitad de una palabra, así que la pantalla
   principal del sistema se recorría de costado y no se veía cuántas etapas faltaban.
   Apiladas se recorren con el pulgar, que es el gesto que la mano ya viene haciendo, y
   cada una dice su nombre y su número.

   El corte es 700 y no 900: entre 700 y 1240 el tablero da tres columnas de ~215px, que
   siguen sirviendo. Abajo de 700 serían ~160px y ahí no entra ni un botón de la tarjeta. */
@media (max-width: 700px){
  .hoy-tablero{ grid-template-columns:1fr; gap:var(--sp-3); }
  /* Sin nada adentro, una etapa no necesita 120px de alto: es una línea diciendo que no
     hay nada, y son seis. Con contenido, la lista manda igual. */
  .hoy-col{ min-height:0; }
  .hoy-cupo{ text-align:left; }
  /* El encabezado de cada etapa es el link que entra a esa etapa, y ocupa el ancho entero:
     crecerlo no mueve nada de al lado y deja de ser una línea de 17px para el dedo. Con él
     crece «ver ›», que vive adentro. Lo mismo «+ N pendientes de elegir», que es la otra
     salida de la columna. */
  .hoy-col-head{ min-height:40px; }
  .hoy-mas{ display:inline-block; min-height:40px; line-height:40px; }
}