/* Hoja base de /app/, trozo 08 — su index enlaza los trozos en orden, y la cascada depende de él. */
/* ==================================================================================================
   4 · EL HILO — una columna. Lo tuyo en burbuja a la derecha, lo del agente en prosa plena a la
   izquierda, el sistema en líneas pequeñas centradas.
   ================================================================================================== */
.tiempo {
  max-width: var(--ancho-hilo); width: 100%;
  margin: 0 auto;
  padding: var(--e7) var(--e4) var(--e4);   /* el respiro de arriba deja sitio al hamburguesa */
  display: flex; flex-direction: column; gap: var(--e4);
  min-height: 100%;
  box-sizing: border-box;
}
.tiempo::before, .tiempo::after { display: none; }   /* la espina de F16 se retira */

/* F20 — LA REJILLA DEL TURNO, EN LA CAPA BASE Y NO EN LA DE TRAJES.
   Estaba escrita bajo `html[data-tema]`, y «Automático (sistema)» QUITA ese atributo — es su
   forma de decir «que mande app.css». Consecuencia: con Automático puesto, el turno seguía
   siendo un flex de tres hijos y el botón de copiar flotaba a media altura del mensaje, que es
   exactamente lo que el operador fotografió. Un contrato de disposición que solo existe con
   traje puesto no es un contrato: es una capa de pintura.

     fila 1 · [ rótulo ] [ hora ] [ ............ copiar ]
     fila 2 · [ cuerpo, ocupando las tres columnas      ]  */
.turno {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e2);
  margin: 0; padding: 0; border: 0; background: transparent;
}
.turno .rol          { grid-area: 1 / 1; justify-self: start; }
.turno .turno-hora   { grid-area: 1 / 2; }
.turno .turno-copiar { grid-area: 1 / 3; justify-self: end; }
.turno .cuerpo       { grid-area: 2 / 1 / auto / -1; }
/* En el turno humano el orden se espeja: el copiar al hueco libre de la izquierda y el rótulo
   con su hora pegados a la derecha, junto a la burbuja que rotulan. */
.turno.humano .turno-copiar { grid-area: 1 / 1; justify-self: start; }
.turno.humano .rol          { grid-area: 1 / 2; justify-self: end; }
.turno.humano .turno-hora   { grid-area: 1 / 3; justify-self: end; }
.turno.humano .cuerpo       { justify-self: end; }
.turno.sistema .cuerpo      { justify-self: center; }
.turno-hora {
  font: 400 var(--t-2xs)/1 var(--mono);
  color: var(--tinta-apagada);
  font-variant-numeric: tabular-nums;
  align-self: center;
}
/* F20 — EL RÓTULO, TAMBIÉN SIN TRAJE. Estaba solo bajo `html[data-tema]`, y «Automático
   (sistema)» quita ese atributo: quien usa Automático no veía «TÚ» ni «HERMES» en ningún turno.
   Lo descubrió una auditoría de qué pierde `auto` respecto a los cinco trajes, no la lectura —
   diez reglas de disposición del turno vivían todas ahí arriba.

   El texto del nodo lo pone sesion.js, que es COMPARTIDO con la terminal, y allí los rótulos son
   glifos de canal («›», «H»). Destapados como palabras salían como lo que son: una «H» suelta
   sobre cada respuesta. El glifo se apaga con font-size:0 y la palabra la pone el ::after. */
.turno .rol { display: block; font-size: 0; }
.turno .rol::after {
  font: 600 var(--t-2xs)/1 var(--prosa);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--tinta-apagada);
}
.turno.humano .rol::after { content: 'tú'; }
.turno.hermes .rol::after { content: 'hermes'; }
.turno.sistema .rol { display: none; }   /* el sistema no se presenta */
.turno .cuerpo { min-width: 0; font: 400 var(--t-lg)/var(--lh-lg) var(--prosa); }

.turno.humano { justify-content: flex-end; }
.turno.humano .cuerpo {
  background: var(--hundida); color: var(--tinta);
  border-radius: var(--r-burbuja);
  padding: var(--e2) var(--e4);
  max-width: 88%;                        /* en un móvil, casi todo el ancho; arriba se estrecha */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.turno.hermes { justify-content: flex-start; }
.turno.hermes .cuerpo { max-width: 100%; width: 100%; padding: 0; }
.turno.sistema { justify-content: center; }
.turno.sistema .cuerpo {
  font: 400 var(--t-xs)/var(--lh-xs) var(--prosa); color: var(--tinta-apagada);
  text-align: center; max-width: 60ch;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* F20 · Copiar. ESTABA `position:absolute; top:-12px`, y en el turno humano además `left:0` —
   que es exactamente donde empieza el `.rol`. Medido a 375 px con sesión real: 49 × 6 px de
   solape, el botón encima de la palabra «TÚ». En el turno de Hermes iba a la derecha y no
   chocaba, y por eso el defecto sobrevivió: solo se veía en la mitad de los turnos.

   La corrección no es moverlo unos píxeles. Es sacarlo del posicionamiento absoluto: mientras
   esté fuera del flujo, cualquier traje que cambie la caja del turno vuelve a solaparlo y el
   siguiente que lo mida creerá que es un fallo nuevo. Ahora el rótulo y el botón comparten FILA
   —la rejilla la declara temas.css— y no hay geometría que puedan pisar.

   Sigue discreto y siempre presente: en un teléfono no hay `hover` y un control que solo aparece
   con el ratón es un control que ahí no existe. */
.turno-copiar {
  justify-self: end; align-self: center;
  opacity: .55; transition: opacity .12s ease;
  background: var(--elevada); color: var(--tinta-apagada);
  border: var(--filete) solid var(--linea); border-radius: var(--r-menudo);
  padding: 2px var(--e2); font-size: var(--t-2xs); cursor: pointer;
  /* El dibujo se queda pequeño; el blanco llega a 44. Un chip de 26 px de alto cumple la regla
     de tacto sin engordar hasta parecer un botón primario. */
  position: relative;
}
.turno-copiar::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, var(--alto-tactil)); height: var(--alto-tactil);
}
.turno-copiar:hover, .turno-copiar:focus-visible { opacity: 1; }

/* ==================================================================================================
   5 · EL VACÍO — la pregunta manda. En el teléfono, UNA columna de tarjetas: dos de 150px en 375
   de ancho salen ilegibles.
   ================================================================================================== */
.hero {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--e2);
  max-width: 560px; width: 100%;
  padding: var(--e6) 0;
  animation: hero-entra .3s cubic-bezier(.2, .7, .3, 1) both;
}
.hero-marca { width: 34px; height: 34px; color: var(--tinta-apagada); margin-bottom: var(--e2); }
.hero-pregunta {
  font: 600 var(--t-2xl)/var(--lh-2xl) var(--prosa);
  letter-spacing: var(--track-titulo); color: var(--tinta);
}
.hero-sub { font: 400 var(--t-md)/var(--lh-md) var(--prosa); color: var(--tinta-apagada); max-width: 44ch; }
.hero-tarjetas {
  display: grid; grid-template-columns: 1fr;
  gap: var(--e2); width: 100%; margin-top: var(--e4);
}
.hero-tarjeta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: var(--e3) var(--e4);
  min-height: var(--alto-tactil);
  background: var(--elevada); color: var(--tinta);
  border: var(--filete) solid var(--borde-flotante); border-radius: var(--r-tarjeta);
  text-align: left; cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: border-color .14s ease, transform .14s ease, background .14s ease;
}
.hero-tarjeta:hover { border-color: var(--borde); background: var(--hundida); }
.hero-tarjeta:active { transform: scale(.99); }
.hero-ic { color: var(--acento); width: 20px; height: 20px; margin-bottom: var(--e1); }
.hero-titulo { font: 600 var(--t-md)/var(--lh-sm) var(--prosa); }
.hero-detalle { font: 400 var(--t-sm)/var(--lh-sm) var(--prosa); color: var(--tinta-apagada); }
@keyframes hero-entra { from { opacity: 0; transform: translateY(8px); } }

.tiempo > .vacio {
  text-align: center; margin: 0 auto; max-width: 56ch;
  font-size: var(--t-xs); color: var(--tinta-apagada);
  background: transparent; border: 0; box-shadow: none; padding: var(--e2) 0;
}
.tiempo > .vacio::before { display: none; }

/* ==================================================================================================
   6 · EL TURNO EN VIVO — actividad del agente mientras trabaja.
   ================================================================================================== */
.vivo-actividad {
  display: flex; align-items: center; gap: var(--e2);
  color: var(--tinta-apagada);
  font: 400 var(--t-sm)/var(--lh-sm) var(--prosa);
  margin-bottom: var(--e2);
}
.vivo-actividad::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento); flex: 0 0 auto;
  animation: latido 1.15s ease-in-out infinite;
}
.vivo-actividad.mal { color: var(--mal); }
.vivo-actividad.mal::before { background: var(--mal); animation: none; }
.vivo-actividad.pensamiento { font-style: italic; }
/* El nombre de una herramienta es un IDENTIFICADOR y se lee como tal. */
.vivo-actividad.herramienta { font-family: var(--mono); font-size: var(--t-xs); }
.vivo-actividad.plan { font-variant-numeric: tabular-nums; }
/* REGLA 4 también aquí. Esta la encontró la PRUEBA que generalizó el hallazgo, no el hallazgo:
   arreglar dos piezas a mano habría dejado la tercera. El punto late en su color pero un evento
   sin nombre conocido también se subraya, porque el color solo no basta. */
.vivo-actividad.desconocido { color: var(--desconocido); text-decoration: underline dotted; text-underline-offset: 3px; }
.vivo-actividad.desconocido::before { background: var(--desconocido); animation: none; }
.vivo-pie {
  color: var(--tinta-apagada);
  font: 400 var(--t-xs)/var(--lh-xs) var(--prosa);
  margin-top: var(--e3); padding-top: var(--e2);
  border-top: var(--filete) solid var(--linea);
}
@keyframes latido { 50% { opacity: .35; transform: scale(.8); } }

/* ==================================================================================================
   7 · EL COMPOSITOR — la píldora. La alineación es ARITMÉTICA: la línea de texto (25.6 de altura
   + 5+5 de padding) mide 36, igual que el «+» y que el enviar; la píldora cierra en 52.
   Se estila por CLASE y no por `#enviar`: una pieza que no se puede documentar sin su id está mal
   factorizada — el id es único por página y la pieza salió rota en su propia tarjeta.
   ================================================================================================== */
/* `position: relative` NO es decorativo: el popover de «/» (.sugerencias) es `absolute` con
   `bottom: 100%` y se ancla al ancestro posicionado más cercano. Sin esto, ese ancestro era
   .columna y el popover se pintaba ENCIMA de la columna entera — fuera de la pantalla por arriba.
   El operador tecleaba «/» y no salía nada: el menú llevaba semanas abriéndose donde nadie podía
   verlo. /ui/ lo tenía (`.cajon { position: relative }` en ui.css) y la reconstrucción de esta
   hoja lo perdió. */
.cajon { position: relative; background: transparent; border: 0; box-shadow: none; padding: var(--e1) var(--e3) var(--e3); }
.cajon-aviso { max-width: var(--ancho-hilo); margin: 0 auto var(--e1); }
.cajon-aviso:empty { display: none; }
.cajon-linea {
  max-width: var(--ancho-hilo); margin: 0 auto;
  display: flex; align-items: flex-end; gap: 6px;
  min-height: 52px;
  background: var(--elevada);
  border: var(--filete) solid var(--borde-flotante);
  border-radius: 28px;
  padding: var(--e2);
  box-shadow: var(--sombra-1);
  transition: border-color .14s ease, box-shadow .14s ease;
}
/* El foco no grita: superficie y sombra, sin halo de color. */
.cajon-linea:focus-within { border-color: var(--borde); box-shadow: var(--sombra-1); }
#entrada-texto {
  flex: 1; resize: none; max-height: 40vh;
  background: transparent; color: var(--tinta);
  border: 0; outline: none; box-shadow: none;
  padding: 5px 0; margin: 0 var(--e1);
  /* 16px como mínimo real: por debajo, iOS hace ZOOM al enfocar el campo y descoloca la página
     entera. Es el defecto de móvil más común y no se ve en ningún escritorio. */
  font: 400 max(16px, var(--t-lg))/var(--lh-md) var(--prosa);
}
#entrada-texto::placeholder { color: var(--tinta-apagada); }

.adjuntar {
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--tinta-suave);
  border: 0; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.adjuntar:hover { background: var(--hundida); color: var(--tinta); }

button.primario.redondo {
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--superficie);
  border: 0; border-radius: 50%;
  cursor: pointer;
  transition: opacity .12s ease, transform .12s ease;
}
button.primario.redondo:hover:not(:disabled) { opacity: .8; }
button.primario.redondo:active:not(:disabled) { transform: scale(.94); }
button.primario.redondo:disabled { background: var(--hundida); color: var(--tinta-apagada); }
button.primario.redondo .ic { width: 17px; height: 17px; vertical-align: 0; }
/* Un solo botón envía y DETIENE: los dos iconos están presentes y la clase decide cuál se ve, así
   no hay que reconstruir el árbol en pleno streaming. */
button.primario.redondo .ic-detener { display: none; }
button.primario.redondo.deteniendo .ic-enviar { display: none; }
button.primario.redondo.deteniendo .ic-detener { display: block; }

.cajon-pie {
  max-width: var(--ancho-hilo); margin: var(--e2) auto 0;
  text-align: center;
  color: var(--tinta-apagada);
  font-size: var(--t-2xs); line-height: var(--lh-2xs);
}
.chip-proveedor { color: var(--tinta-suave); }

/* El selector de modelo, como un elemento MÁS de la línea «a · b · c» del pie — no como un control
   suelto. Mismo tratamiento que el chip del proveedor, con un subrayado punteado que es la única
   pista de que se puede tocar.

   Esta regla está DUPLICADA en /ui/ui.css a propósito, y no por descuido: /app/ carga solo
   app.css y /ui/ carga solo ui.css, aunque las dos superficies compartan los MISMOS módulos JS. La
   primera versión estiló solo ui.css y en /app/ salió el desplegable con el borde por defecto del
   navegador. `tests/modeloRecordado.test.ts` exige que las dos hojas lo estilen. */
.cajon-pie .sel-modelo { display: inline-flex; align-items: baseline; gap: 3px; }
.cajon-pie .sel-modelo select {
  font: inherit; color: var(--tinta-suave);
  background: transparent; border: 0; border-bottom: 1px dotted currentColor;
  padding: 0 0 1px; cursor: pointer; max-width: 12em;
  -webkit-appearance: none; appearance: none;
}
.cajon-pie .sel-modelo select:hover,
.cajon-pie .sel-modelo select:focus-visible { color: var(--tinta); }
.adj-cola { max-width: var(--ancho-hilo); margin: 0 auto var(--e1); }

/* ==================================================================================================
   8 · LA FRANJA DERIVADA — cinco datos, cada uno con su marca. La idea entera en 20px de alto: el
   estado NO es el fondo del chip, es la raya de 2px del margen más el color de la cifra.
   Este bloque se perdió una vez al reensamblar la hoja y en el pie se leía «pendientes0», etiqueta
   y cifra pegadas. Lo cazó el operador pegando su HTML, no una revisión.
   ================================================================================================== */
.franja {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  padding: 0 var(--e2);
  font-variant-numeric: tabular-nums;
}
.dato {
  display: inline-flex; align-items: baseline; gap: var(--e2);
  font: 400 var(--t-xs)/var(--lh-2xs) var(--prosa);
}
.dato::before {
  content: ''; align-self: center; flex: 0 0 auto;
  width: var(--carril-fino); height: 1.1em;
  border-radius: var(--r-chip); background: var(--marca);
}
.dato .etq { color: var(--tinta-apagada); text-transform: uppercase; letter-spacing: var(--track-micro); }

/* ==================================================================================================
   UNA FORMA POR ESTADO — F18
   ==================================================================================================
   Las CUATRO direcciones del rediseño coinciden en algo que esta hoja no hacía: cada estado tiene
   una FORMA propia, no solo un color. Círculo lo bueno, triángulo la alerta, cuadrado lo malo, aro
   punteado el hueco. Coincidieron sin haberlo acordado, que es la señal de que la idea es del
   dominio y no del gusto de nadie.

   Aquí los cuatro compartían la misma barrita de 2px y solo cambiaba el color. La regla 4 se
   cumplía —la palabra acompaña siempre— pero la marca en sí no distinguía nada: en una captura en
   gris, «bien» y «mal» eran la misma raya.

   Va en app.css y no en un traje: no es una decisión estética, es la diferencia entre una flota
   sana y una caída. Se dibuja con CSS —sin tocar el marcado ni añadir un sprite— para que valga
   igual en las dos presentaciones y en cualquier traje. La forma nace en el pseudo-elemento que ya
   existía, así que ningún módulo se entera.
   ================================================================================================== */

/* Base: la raya de siempre para lo que no tiene estado (el saldo, por ejemplo). */
.dato.bien::before, .dato.alerta::before, .dato.mal::before, .dato.desconocido::before,
.insignia.ejecutada::after, .insignia.pendiente::after, .insignia.fallida::after,
.insignia.desconocido::after, .insignia.est-desconocido::after {
  width: .62em; height: .62em;
  align-self: center;
}
/* BIEN — círculo macizo. Lo cerrado se dibuja cerrado. */
.dato.bien::before, .insignia.ejecutada::after { border-radius: 50%; }
/* MAL — cuadrado. La esquina viva es la forma que más «para» a la vista. */
.dato.mal::before, .insignia.fallida::after { border-radius: 0; }
/* ALERTA — triángulo, con bordes: no hay `clip-path` que herede el color de forma fiable en los
   dos pseudo-elementos, y un triángulo de bordes usa `currentColor` sin más. */
.dato.alerta::before, .insignia.pendiente::after {
  width: 0; height: 0; background: none; border-radius: 0;
  border-left: .34em solid transparent;
  border-right: .34em solid transparent;
  border-bottom: .58em solid currentColor;
}
.dato.alerta::before { border-bottom-color: var(--marca); }
/* DESCONOCIDO — aro HUECO y punteado. Un hueco tiene que verse hueco, y ese es literalmente el
   argumento con el que las cuatro direcciones lo dibujaron así. */
.dato.desconocido::before, .insignia.desconocido::after, .insignia.est-desconocido::after {
  background: none; border-radius: 50%;
  border: 1.5px dotted currentColor;
}
.dato.desconocido::before { border-color: var(--marca); }
.dato .val { font-size: var(--t-sm); font-weight: 700; color: var(--tinta); letter-spacing: -.01em; }
.dato.bien        { --marca: var(--bien); }
.dato.alerta      { --marca: var(--alerta); }
.dato.mal         { --marca: var(--mal); }
.dato.desconocido { --marca: var(--desconocido); }
.dato.bien .val        { color: var(--bien); }
.dato.alerta .val      { color: var(--alerta); }
.dato.mal .val         { color: var(--mal); }
/* El color no es la única señal: lo no comprobado se subraya de puntos y se ve igual sin
   distinguir colores. */
.dato.desconocido .val { color: var(--desconocido); text-decoration: underline dotted; text-underline-offset: 3px; }
/* El saldo trae dos cifras en una (dinero medido + tokens estimados): línea entera para él, y sin
   color de estado — nadie ha declarado qué es «poco saldo», y pintarlo de rojo sería una política
   que no existe. */
.dato:first-child { flex-basis: 100%; }
/* F18 — el motivo de un hueco, escrito. estado.js lo emite SIEMPRE (hasta ahora solo vivía en el
   `title`, y en un teléfono no hay hover: era inalcanzable). Aquí nace OCULTO porque la franja de
   F16 es una tira de cifras y una frase entera la rompe; los trajes que la componen de otra manera
   lo encienden. Que el nodo exista siempre es lo que permite encenderlo sin tocar el módulo. */
.dato-nota { display: none; }

/* ==================================================================================================
   9 · PANTALLA GRANDE (≥ 48em) — lo que se AÑADE cuando hay sitio. Nada se deshace.
   ================================================================================================== */
@media (min-width: 48em) {
  /* La barra deja de flotar y pasa a ocupar su columna. */
  .lateral {
    position: static; inset: auto;
    width: var(--ancho-lateral); flex: 0 0 var(--ancho-lateral);
    box-shadow: none;
    /* F20 — `transform`, no `margin-left`: la segunda es de maqueta y recalculaba el hilo entero
       en cada uno de los 220 ms. El compositor resuelve la primera sin volver a maquetar. */
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
  }
  .lateral.oculta {
    transform: translateX(-100%);
    margin-left: calc(-1 * var(--ancho-lateral));
  }

  /* Densidad de cursor: lo pulsable baja de 44 a 36 y la letra a tamaño de interfaz. */
  .ic { width: 18px; height: 18px; vertical-align: -3px; }
  .ic-marca { width: 20px; height: 20px; }
  .marca { font-size: var(--t-lg); }
  .nav-item { height: 36px; font-size: var(--t-md); gap: var(--e2); padding: 0 var(--e2); }
  .nav-item .ic { width: 18px; height: 18px; }
  .buscar-envoltura { height: var(--alto-control); margin: var(--e2); padding: 0 var(--e2); }
  .buscar-envoltura .ic { width: 15px; height: 15px; }
  .buscar-envoltura .buscar-conv { font-size: var(--t-md); }
  .conversaciones { padding: var(--e1) var(--e2) var(--e2); }
  .grupo-titulo { padding: var(--e4) var(--e2) var(--e1); font-size: var(--t-2xs); }
  .conv-titulo { font-size: var(--t-md); line-height: var(--lh-sm); }
  .cuando { font-size: var(--t-2xs); margin-top: 1px; }
  .conv-btn { width: 24px; height: 24px; font-size: var(--t-sm); }
  .conv-editar { font-size: var(--t-md); padding: 5px var(--e2); }
  .badge-pendientes { min-width: 18px; height: 18px; padding: 0 5px; font-size: var(--t-2xs); }
  .lateral-pie { padding: var(--e3) var(--e4); gap: var(--e2); }
  .quien, .escape a { font-size: var(--t-xs); }
  .escape { gap: var(--e3); }
  .escape .ic { width: 14px; height: 14px; }
  .dato { font-size: var(--t-2xs); }
  .dato .val { font-size: var(--t-xs); }

  /* Con cursor, los botones de fila se revelan al posarse: la fila respira mientras se lee. */
  .conv-abrir { padding: 7px var(--e2); }
  .conv-acciones { opacity: 0; transition: opacity .12s ease; }
  .conv:hover .conv-acciones, .conv:focus-within .conv-acciones { opacity: 1; }

  /* EL RIEL se ENCIENDE aquí, y solo aquí. */
  body:has(#lateral.oculta) .riel:not([hidden]) {
    display: flex;
    position: absolute; inset: 0 auto 0 0;
    width: 52px; z-index: 25;
    flex-direction: column; align-items: center;
    gap: var(--e1); padding: var(--e3) 0;
  }
  .riel-btn {
    width: 36px; height: 36px; padding: 0;
    display: grid; place-items: center;
    background: transparent; color: var(--tinta-suave);
    border: 0; border-radius: var(--r-control);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
  }
  .riel-btn:hover { background: var(--hundida); color: var(--tinta); }
  .riel-btn:first-child { margin-bottom: var(--e2); }
  /* Con el riel presente el ☰ flotante sobra: el riel trae su propio botón de abrir. */
  body:has(#lateral.oculta) .btn-lateral { display: none; }
    /* F20 — el ☰ ya no flota: vive en la barra superior, que es una rejilla. */

  /* El asomo no existe: la barra ya no tapa nada. */
  body:has(#lateral:not(.oculta)) .velo-lateral:not([hidden]) { display: none; }

  /* El eje de lectura se ensancha y respira. */
  .tiempo { padding: var(--e6) var(--e5) var(--e5); }
  .turno.humano .cuerpo { max-width: 72%; padding: 9px var(--e4); }
  /* La mitad de arriba del botón de ejecutar: con cursor no hace falta la fila entera. */
  .confirmar button.primario { flex: 0 1 auto; min-height: 0; }
  /* Con ratón se retira hasta que el cursor entra en el turno. Sin `top`: ya no hay absoluto. */
  .turno-copiar { opacity: 0; }
  .turno:hover .turno-copiar { opacity: 1; }
  .cajon { padding: var(--e1) var(--e5) var(--e3); }
  .cajon-linea { padding: var(--e2) var(--e2) var(--e2) var(--e3); }

  /* El vacío pasa a dos columnas y la pregunta crece. */
  .hero-pregunta { font: 600 var(--t-3xl)/var(--lh-3xl) var(--prosa); }
  .hero-marca { width: 36px; height: 36px; }
  .hero-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--e5); }
  .hero-tarjeta:hover { transform: translateY(-1px); box-shadow: var(--sombra-1); }
  .hero-ic { width: 19px; height: 19px; }
}