/* =====================================================================
   Entrevoce - Transcripcion en vivo

   Las mismas tres reglas que gobiernan public/estilos.css, porque el
   operador es el mismo y el turno dura ocho horas:

   1. EL TEXTO NO SE MUEVE. Lo confirmado no cambia nunca de sitio. Lo
      provisional crece hacia abajo, en su propio hueco, sin empujar lo
      que ya se leyo.
   2. LO NORMAL ES SILENCIOSO. Sin color mientras todo va bien. El color
      queda reservado para lo que exige una decision: la bandeja de
      dudosos y los fallos.
   3. NUNCA COLOR SOLO. Cada lado se identifica por cuatro canales
      redundantes: nombre, codigo de dos letras, color y posicion fija.
   ===================================================================== */

:root {
  --fondo: #0E1116;
  --panel: #121821;
  --panel-alto: #151C25;
  --linea: #222C38;
  --linea-suave: #1A222C;

  --tinta: #E8EDF2;
  --tinta-media: #9AA7B4;
  --tinta-debil: #6B7A89;
  --tinta-fantasma: #4C5462;

  --ok: #3FD07A;
  --aviso: #FFC24B;
  --grave: #FF5A52;
  --info: #4DD6E8;

  /* Mismos colores de hablante que la consola del agente, para que quien
     use las dos pantallas no tenga que reaprender nada. Elegidos para
     seguir siendo distinguibles con deuteranopia y protanopia. */
  --voz-doctor: #5B9BFF;
  --voz-paciente: #3FD07A;
  --voz-dudoso: #FFC24B;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Texto de lectura larga. 16px es el minimo defendible para alguien que
     corrige transcripciones durante un turno completo. */
  --texto-hilo: 1rem;
  --alto-linea: 1.55;
}

/* Modo claro. El trabajo real del operador es correccion de pruebas, y ahi
   la polaridad positiva mide mejor; pero el puesto suele estar en penumbra,
   asi que el oscuro sigue siendo el predeterminado. */
[data-tema="claro"] {
  --fondo: #F4F6F9;
  --panel: #FFFFFF;
  --panel-alto: #FFFFFF;
  --linea: #DDE3EB;
  --linea-suave: #EAEEF3;
  --tinta: #131A22;
  --tinta-media: #4A5563;
  --tinta-debil: #66727F;
  --tinta-fantasma: #98A3B0;
  --ok: #157F45;
  --aviso: #8A5800;
  --grave: #C0261E;
  --info: #0E6E80;
  --voz-doctor: #1C5FD0;
  --voz-paciente: #157F45;
  --voz-dudoso: #8A5800;
}

* { box-sizing: border-box; }

/* El atributo hidden tiene que ganar a cualquier display declarado mas
   abajo. Sin esto, un selector de clase con display (.bloqueo, .turno-vivo)
   le gana a la regla [hidden] de la hoja del navegador y el elemento se
   queda visible con el atributo puesto: la pantalla de bloqueo taparia la
   pagina entera desde el primer segundo. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  /* El scroll vive dentro de cada hilo, no en la pagina. */
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; font-weight: 600; }

/* =====================================================================
   CABECERA
   ===================================================================== */

.cabecera {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}

.cabecera-izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca { color: var(--info); flex: none; }

.marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-texto strong { font-size: 0.95rem; letter-spacing: 0.01em; }
.marca-texto span {
  font-size: 0.72rem;
  color: var(--tinta-debil);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.cabecera-der { display: flex; align-items: center; gap: 14px; }

/* --- Estado del reconocedor -------------------------------------------
   El punto lleva color; el texto dice exactamente lo mismo en palabras.
   Ninguna informacion vive solo en el color. */
.estado { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; }
.estado-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tinta-fantasma);
  flex: none;
}
.estado-texto { color: var(--tinta-media); white-space: nowrap; }

.estado[data-nivel="escuchando"] .estado-punto { background: var(--ok); }
.estado[data-nivel="escuchando"] .estado-texto { color: var(--tinta); }
.estado[data-nivel="aviso"] .estado-punto { background: var(--aviso); }
.estado[data-nivel="aviso"] .estado-texto { color: var(--aviso); }
.estado[data-nivel="error"] .estado-punto { background: var(--grave); }
.estado[data-nivel="error"] .estado-texto { color: var(--grave); }

/* El unico latido de la pagina, y solo sobre un punto de 9 px: nunca sobre
   texto, que parpadeando se vuelve ilegible. */
.estado[data-nivel="escuchando"] .estado-punto { animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.35; } }

.contador {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}
.contador-sep { width: 1px; height: 12px; background: var(--linea); }

.btn-icono {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  background: transparent;
  color: var(--tinta-media);
  cursor: pointer;
}
.btn-icono:hover { color: var(--tinta); border-color: var(--tinta-debil); }

/* =====================================================================
   AVISO LEGAL
   No se puede cerrar. El renglon principal siempre visible; el detalle se
   pliega, pero la frase que importa no esta dentro del plegable.
   ===================================================================== */

.aviso-phi {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 11px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--aviso) 14%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--aviso) 40%, var(--linea));
  color: var(--tinta);
}
.aviso-phi > svg { color: var(--aviso); margin-top: 1px; }
.aviso-phi p { margin: 0; font-size: 0.83rem; line-height: 1.5; max-width: 105ch; }
.aviso-phi b { color: var(--tinta); }

.aviso-mas { grid-column: 2; font-size: 0.8rem; }
.aviso-mas summary {
  cursor: pointer;
  color: var(--tinta-media);
  padding: 3px 0;
  width: fit-content;
}
.aviso-mas summary:hover { color: var(--tinta); }
.aviso-mas ul { margin: 4px 0 2px; padding-left: 18px; color: var(--tinta-media); }
.aviso-mas li { margin: 4px 0; line-height: 1.5; max-width: 100ch; }

/* =====================================================================
   TABLERO DE DOS COLUMNAS
   ===================================================================== */

.tablero {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linea);
}

.columna {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
  background: var(--fondo);
}

.columna-cab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}

/* Codigo de dos letras: el canal redundante que sobrevive a la impresion
   en blanco y negro y a la ceguera al color. */
.codigo {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid currentColor;
  flex: none;
}
.columna-cab h2 { font-size: 0.92rem; }
.idioma {
  font-size: 0.72rem;
  color: var(--tinta-debil);
  margin-left: auto;
  white-space: nowrap;
}

[data-lado="doctor"] .codigo,
[data-lado="doctor"] .columna-cab h2 { color: var(--voz-doctor); }
[data-lado="paciente"] .codigo,
[data-lado="paciente"] .columna-cab h2 { color: var(--voz-paciente); }

.turno-vivo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ok);
}
.turno-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: latido 1.6s ease-in-out infinite;
}

/* --- El hilo ---------------------------------------------------------- */
.hilo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  scrollbar-gutter: stable;
}
.hilo:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }

.hilo-vacio {
  margin: 0;
  color: var(--tinta-fantasma);
  font-size: 0.85rem;
  font-style: italic;
}

/* --- Una intervencion -------------------------------------------------
   Eje de lectura fijo: el texto empieza siempre en la misma x. La franja
   de color va fuera de ese eje, a la izquierda, para no desplazarlo. */
.turno {
  position: relative;
  padding: 7px 0 9px 13px;
  border-left: 3px solid var(--linea);
  margin-bottom: 10px;
}
[data-lado="doctor"] .turno { border-left-color: var(--voz-doctor); }
[data-lado="paciente"] .turno { border-left-color: var(--voz-paciente); }

.turno-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 0.7rem;
  color: var(--tinta-debil);
}
.turno-hora { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.turno-quien { font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
[data-lado="doctor"] .turno-quien { color: var(--voz-doctor); }
[data-lado="paciente"] .turno-quien { color: var(--voz-paciente); }

.turno-texto {
  margin: 0;
  font-size: var(--texto-hilo);
  line-height: var(--alto-linea);
  overflow-wrap: break-word;
}

/* --- Provisional vs confirmado ----------------------------------------
   La distincion NO es solo el color: lo provisional va en cursiva, con un
   borde discontinuo y una etiqueta que lo dice con letras. Un operador
   cansado no debe tener que recordar que significa el gris. */
.turno.provisional {
  border-left-style: dashed;
  border-left-color: var(--tinta-fantasma);
  opacity: 0.92;
}
.turno.provisional .turno-texto {
  color: var(--tinta-media);
  font-style: italic;
}
.etiqueta-prov {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border: 1px dashed var(--tinta-fantasma);
  border-radius: 3px;
  color: var(--tinta-debil);
}

/* Marca de confianza baja del propio reconocedor sobre un turno ya
   atribuido: se escribe, no se insinua. */
.etiqueta-conf {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--aviso);
  border: 1px solid color-mix(in srgb, var(--aviso) 55%, transparent);
}

/* Confianza por encima del umbral: se escribe igual, pero sin pedir
   atencion. Lo normal es silencioso. */
.etiqueta-conf-ok {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--tinta-fantasma);
}

/* --- Reasignar un turno ------------------------------------------------
   El operador es la ultima palabra sobre quien hablo, por encima de
   cualquier heuristica. Pero el boton no compite por atencion con el
   texto: aparece al pasar por encima o al llegar con el tabulador, y
   ocupa su hueco siempre, para que al aparecer no desplace nada. */
.turno-accion {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--linea);
  border-radius: 5px;
  background: transparent;
  color: var(--tinta-debil);
  font-family: var(--sans);
  font-size: 0.68rem;
  cursor: pointer;
  visibility: hidden;
  white-space: nowrap;
}
.turno:hover .turno-accion,
.turno:focus-within .turno-accion { visibility: visible; }
.turno-accion:hover { color: var(--tinta); border-color: var(--tinta-debil); }

/* En tactil no hay hover: el boton se queda visible siempre. */
@media (hover: none) {
  .turno-accion { visibility: visible; }
}

/* Nota del sistema dentro del hilo: "se pidio repetir", "reasignado". */
.nota {
  margin: 0 0 10px;
  padding: 5px 0 5px 13px;
  border-left: 3px dotted var(--tinta-fantasma);
  font-size: 0.78rem;
  color: var(--tinta-debil);
  font-style: italic;
}

/* --- Volver a lo ultimo ----------------------------------------------- */
.volver {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 13px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--panel-alto);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 0.76rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.volver:hover { border-color: var(--tinta-debil); }

/* =====================================================================
   BANDEJA DE DUDOSOS
   El unico panel de la pagina con color permanente, porque es el unico que
   siempre exige una decision. Si esta vacio, no existe.
   ===================================================================== */

.dudosos {
  flex: none;
  max-height: 32vh;
  overflow-y: auto;
  background: color-mix(in srgb, var(--aviso) 9%, var(--panel));
  border-top: 2px solid var(--aviso);
  padding: 10px 16px 12px;
}

.dudosos-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.dudosos-cab > svg { color: var(--aviso); flex: none; }
.dudosos-cab h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.dudosos-cab p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 0.79rem;
  color: var(--tinta-media);
  line-height: 1.45;
}
.dudosos-n {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: var(--aviso);
  color: #1A1206;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
}
[data-tema="claro"] .dudosos-n { color: #FFFFFF; }

.dudosos-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }

.dudoso {
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--aviso) 45%, var(--linea));
  border-radius: 8px;
  background: var(--panel);
}
.dudoso-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.7rem; color: var(--tinta-debil);
  margin-bottom: 4px;
}
.dudoso-motivo { color: var(--aviso); font-weight: 600; }
.dudoso-texto {
  margin: 0 0 8px;
  font-size: var(--texto-hilo);
  line-height: var(--alto-linea);
  overflow-wrap: break-word;
}
.dudoso-acciones { display: flex; flex-wrap: wrap; gap: 6px; }

.btn-mini {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--panel-alto);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 0.78rem;
  cursor: pointer;
}
.btn-mini:hover { border-color: var(--tinta-debil); }
.btn-mini[data-accion="doctor"] { color: var(--voz-doctor); }
.btn-mini[data-accion="paciente"] { color: var(--voz-paciente); }
.btn-mini[data-accion="repetir"] {
  color: var(--aviso);
  border-color: color-mix(in srgb, var(--aviso) 50%, var(--linea));
}
.btn-mini[data-accion="descartar"] { color: var(--tinta-debil); }

/* =====================================================================
   CONTROLES
   ===================================================================== */

.controles {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  background: var(--panel);
  border-top: 1px solid var(--linea);
}

.controles-turno { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.controles-sesion { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.btn-turno {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: var(--panel-alto);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.btn-turno:hover:not(:disabled) { border-color: var(--tinta-debil); }
.btn-turno:disabled { opacity: 0.45; cursor: not-allowed; }

#turno-doctor svg { color: var(--voz-doctor); }
#turno-paciente svg { color: var(--voz-paciente); }

/* El turno activo se marca con fondo, borde grueso y el texto del boton;
   no basta con teñir el icono. */
.btn-turno[aria-pressed="true"] {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}
#turno-doctor[aria-pressed="true"] {
  color: var(--voz-doctor);
  background: color-mix(in srgb, var(--voz-doctor) 16%, var(--panel-alto));
}
#turno-paciente[aria-pressed="true"] {
  color: var(--voz-paciente);
  background: color-mix(in srgb, var(--voz-paciente) 16%, var(--panel-alto));
}

.btn-parar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--linea);
  border-radius: 9px;
  background: transparent;
  color: var(--tinta-media);
  font-family: var(--sans);
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-parar:hover:not(:disabled) { color: var(--tinta); border-color: var(--tinta-debil); }
.btn-parar:disabled { opacity: 0.4; cursor: not-allowed; }

kbd {
  font-family: var(--mono);
  font-size: 0.66rem;
  padding: 1px 5px;
  border: 1px solid var(--linea);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--tinta-debil);
  background: var(--fondo);
}

.btn-plano {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  background: transparent;
  color: var(--tinta-media);
  font-family: var(--sans);
  font-size: 0.8rem;
  cursor: pointer;
}
.btn-plano:hover:not(:disabled) { color: var(--tinta); border-color: var(--tinta-debil); }
.btn-plano:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-peligro:hover:not(:disabled) {
  color: var(--grave);
  border-color: color-mix(in srgb, var(--grave) 55%, var(--linea));
}
/* Segundo clic de confirmacion: destruir la transcripcion no puede ser un
   clic distraido. */
.btn-peligro.armado {
  color: var(--grave);
  border-color: var(--grave);
  box-shadow: inset 0 0 0 1px var(--grave);
}

/* =====================================================================
   TOSTADAS
   Mensajes transitorios. Se superponen: nunca empujan el contenido.
   ===================================================================== */

/* Ancladas abajo a la DERECHA, y el sitio no es casual. Arriba taparian
   el aviso legal, que no puede quedar cubierto ni un segundo. Abajo a la
   izquierda tapaban los botones de la bandeja de dudosos, que es justo
   donde hay que pulsar. A la derecha solo se solapan con el texto de una
   tarjeta, nunca con una accion. */
.tostadas {
  position: fixed;
  right: 16px;
  bottom: 68px;
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.tostada {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--panel-alto);
  color: var(--tinta);
  font-size: 0.83rem;
  line-height: 1.45;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
}
.tostada b { display: block; margin-bottom: 2px; }
.tostada p { margin: 0; color: var(--tinta-media); }
.tostada[data-tipo="info"] { border-left-color: var(--info); }
.tostada[data-tipo="info"] > svg { color: var(--info); }
.tostada[data-tipo="aviso"] { border-left-color: var(--aviso); }
.tostada[data-tipo="aviso"] > svg { color: var(--aviso); }
.tostada[data-tipo="error"] { border-left-color: var(--grave); }
.tostada[data-tipo="error"] > svg { color: var(--grave); }

.tostada-cerrar {
  border: none; background: transparent; cursor: pointer;
  color: var(--tinta-debil); padding: 0; line-height: 0;
}
.tostada-cerrar:hover { color: var(--tinta); }

/* =====================================================================
   PANTALLA DE BLOQUEO
   ===================================================================== */

.bloqueo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--fondo);
  overflow-y: auto;
}
.bloqueo-caja {
  max-width: 620px;
  padding: 26px 28px;
  border: 1px solid var(--linea);
  border-top: 3px solid var(--grave);
  border-radius: 12px;
  background: var(--panel);
}
.bloqueo-caja > svg { color: var(--grave); margin-bottom: 10px; }
.bloqueo-caja h1 { font-size: 1.2rem; margin-bottom: 10px; }
.bloqueo-caja p { margin: 0 0 14px; color: var(--tinta-media); line-height: 1.6; }
.bloqueo-extra { font-size: 0.86rem; color: var(--tinta-media); line-height: 1.6; }
.bloqueo-extra ul { margin: 8px 0; padding-left: 20px; }
.bloqueo-extra li { margin: 6px 0; }
.bloqueo-extra code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  overflow-wrap: break-word;
}

/* =====================================================================
   RESPONSIVE
   Por debajo de 900 px las columnas se apilan. Se apilan, no se convierten
   en pestanas: con pestanas se pierde de vista un lado de la conversacion,
   que es justo lo que esta pagina existe para evitar.
   ===================================================================== */

@media (max-width: 900px) {
  html, body { overflow: auto; height: auto; }
  body { min-height: 100%; }

  .tablero { grid-template-columns: 1fr; }
  .columna { min-height: 46vh; }
  .hilo { max-height: 52vh; }

  .cabecera { flex-wrap: wrap; }
  .cabecera-der { gap: 10px; }

  .controles {
    position: sticky;
    bottom: 0;
    z-index: 20;
  }
  .controles-turno { flex: 1 1 100%; }
  .btn-turno { flex: 1 1 0; justify-content: center; }
  .btn-turno kbd { display: none; }

  .tostadas { bottom: 118px; right: 12px; width: calc(100vw - 24px); }
}

@media (max-width: 520px) {
  .aviso-phi { grid-template-columns: 1fr; }
  .aviso-mas { grid-column: 1; }
  .idioma { display: none; }
  .btn-plano span { display: none; }
  .btn-plano { padding: 8px 10px; }
}

/* Alguien que trabaja ocho horas seguidas puede tener activada la
   reduccion de movimiento del sistema. Se respeta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Foco visible en todo lo interactivo: se navega con teclado a proposito,
   porque las manos del operador estan en el teclado, no en el raton. */
button:focus-visible,
summary:focus-visible,
details:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* Vuelta al sitio principal. Anadido al integrar la consola en
   entrevoce.pages.dev/demo/: sin esto no hay camino de regreso. */
.volver-sitio {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  color: inherit;
  opacity: .72;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 6px;
  white-space: nowrap;
}
.volver-sitio:hover { opacity: 1; }

/* Contador de repeticiones de una tostada. Se anade cuando el mismo fallo
   vuelve a dispararse en vez de apilar avisos identicos. */
.tostada-veces {
  opacity: .65;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* =====================================================================
   REPARTO AUTOMATICO
   Piezas anadidas al pasar de turnos declarados a un solo boton.
   ===================================================================== */

/* El boton unico. Es el unico control primario de la pantalla, asi que
   pesa mas que todo lo demas del pie. */
.controles-auto {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.btn-escuchar {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--voz-paciente);
  color: var(--fondo);
  font: 600 0.95rem/1 var(--sans);
  letter-spacing: 0.01em;
  padding: 13px 22px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-escuchar:hover { filter: brightness(1.08); }
.btn-escuchar[data-escuchando="true"] {
  background: transparent;
  border-color: var(--grave);
  color: var(--grave);
}

.ayuda-arranque {
  margin: 0;
  max-width: 46ch;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

/* Nivel de estado nuevo: el hueco entre dos idiomas. Distinto de "aviso"
   a proposito: no es un problema, es una transicion. */
.estado[data-nivel="relevo"] .estado-punto { background: var(--info); }
.estado[data-nivel="relevo"] .estado-texto { color: var(--info); }

/* Solo aparece mientras el ancla esta en ingles, que es el unico estado
   en el que un error puede no verse. */
.aviso-excursion {
  margin: 0;
  max-width: 34ch;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--aviso);
}

/* La apuesta de la maquina: primera y resaltada, pero a un clic de
   distancia. Nunca se ejecuta sola. */
.btn-mini.dudoso-sugerido {
  border-color: currentColor;
  font-weight: 600;
}

/* Los limites. Letra pequena, permanente, no se cierra. */
.limites {
  border-top: 1px solid var(--linea);
  background: var(--fondo);
  padding: 14px 18px 18px;
}
.limites ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 10px 26px;
  max-width: 1400px;
}
.limites li {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--tinta-debil);
  border-left: 2px solid var(--linea);
  padding-left: 11px;
}
.limites b { color: var(--tinta-media); font-weight: 600; }

/* La medicion del hueco de cambio de idioma. */
.medicion {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--tinta-fantasma);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .controles-auto { flex-direction: column; align-items: stretch; }
  .btn-escuchar { width: 100%; }
}