/* Estilos deliberadamente minimos. Prioridades: contraste alto, tamanos en
   unidades relativas (respetan el zoom del navegador y el tamano de fuente del
   sistema) y foco siempre visible.

   Los contrastes estan CALCULADOS con la formula de WCAG 2.1, no estimados a
   ojo. El minimo exigido por el nivel AA es 4.5:1 para el texto y 3:1 para
   bordes, controles y trazo de foco.

   Tema claro (fondo #ffffff):
     texto #101010 ........................ 19.0:1
     acento #0b4f9e ....................... 8.0:1
     texto del boton (#ffffff sobre acento) 8.0:1
     borde #6b6b6b ........................ 5.3:1
     error #b00020 ........................ 7.3:1
     texto sobre mensaje propio #e4e4e4 ... 15.0:1
     hora (85% de opacidad) sobre propio .. 10.4:1

   Tema oscuro (fondo #101010):
     texto #f2f2f2 ........................ 17.0:1
     acento #79b8ff ....................... 9.2:1
     texto del boton (#101010 sobre acento) 9.2:1
     borde #9a9a9a ........................ 6.8:1
     error #ff8a8a ........................ 8.4:1
     texto sobre mensaje propio #2a2a2a ... 12.8:1
     hora (85% de opacidad) sobre propio .. 9.7:1 */

/* El tamano declarado incluye relleno y borde. Sin esto, un campo con
   width:100% mas relleno mas borde se pasa del ancho del contenedor y aparece
   una barra de desplazamiento horizontal en pantallas angostas o con el zoom
   al 200%. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;
  --fondo: #ffffff;
  --texto: #101010;
  --borde: #6b6b6b;
  --acento: #0b4f9e;
  --propio: #e4e4e4;
  --error: #b00020;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101010;
    --texto: #f2f2f2;
    --borde: #9a9a9a;
    --acento: #79b8ff;
    --propio: #2a2a2a;
    --error: #ff8a8a;
  }
}

body {
  margin: 0 auto;
  padding: 1rem;
  max-width: 48rem;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  /* Una direccion web larga pegada sin espacios no puede ensanchar la pagina y
     obligar a desplazarse de costado para leer. */
  overflow-wrap: break-word;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; margin-bottom: 0.25rem; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Pistas debajo de la etiqueta ("Entre 2 y 24 caracteres."). NO se aclaran con
   un gris tenue, que es la forma tipica de romper el contraste del texto de
   ayuda: conservan el color del texto normal (19:1 en claro, 17:1 en oscuro) y
   se distinguen de la etiqueta por el grosor. Tampoco bajan de 15 px. */
.pista {
  display: block;
  font-size: 0.9375rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

input[type="text"],
select {
  width: 100%;
  max-width: 32rem;
  /* Alto minimo comodo para tocar con el dedo (44 px con la letra por
     defecto). En rem, para que crezca si la persona agranda la letra. */
  min-height: 2.75rem;
  padding: 0.5rem;
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: 4px;
}

button {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--fondo);
  background: var(--acento);
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

/* La casilla y el boton de opcion que vienen por defecto miden unos 13 px:
   demasiado chicos para tocarlos con el dedo. 1.5rem son los 24 px minimos que
   pide WCAG 2.2 para un area de toque, y la etiqueta de al lado tambien los
   acciona. */
input[type="checkbox"],
input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
  accent-color: var(--acento);
}

/* La regla general pone las etiquetas en bloque, que es lo que corresponde para
   un campo de texto. Al lado de una casilla o un boton de opcion tienen que
   quedar en la misma linea. */
input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline;
  vertical-align: middle;
}

summary {
  min-height: 2.75rem;
  padding: 0.5rem 0;
  cursor: pointer;
}

/* Foco: dos anillos, no uno. El de adentro es del color del fondo y rellena la
   separacion, asi el trazo se ve tambien cuando el control tiene el mismo
   color que el acento (los botones). No depende solo del color: aparece un
   contorno de 3 px separado del control, que es un cambio de forma. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--fondo);
}

/* Navegadores sin :focus-visible: mejor mostrar el foco siempre que no
   mostrarlo nunca. */
@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
  }
}

#historial {
  /* El tope en rem respeta el tamano de letra, y el de vh evita que en una
     pantalla baja (un telefono acostado, o el zoom al 200%) el historial se
     coma todo el alto y deje el cuadro de escritura fuera de la vista. */
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  border: 2px solid var(--borde);
  border-radius: 4px;
  padding: 0.5rem;
}

#lista-mensajes {
  list-style: none;
  margin: 0;
  padding: 0;
}

#lista-mensajes .mensaje {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--borde);
  /* El borde izquierdo marca los mensajes propios. Va tambien en los ajenos,
     transparente, para que el texto de todos quede alineado. */
  border-left: 4px solid transparent;
  /* Un mensaje puede ser mil caracteres sin un solo espacio. Que corte donde
     sea antes que ensanchar la pagina. */
  overflow-wrap: anywhere;
}

#lista-mensajes .mensaje:last-child { border-bottom: none; }

/* Los mensajes propios se distinguen por DOS cosas, no solo por el fondo (que
   a proposito es una diferencia suave): tambien por la barra de la izquierda,
   que se ve igual en contraste forzado. Y el dato de quien escribio esta en el
   texto, que es lo que lee el lector de pantalla. */
#lista-mensajes .mensaje.propio {
  background: var(--propio);
  border-left-color: var(--acento);
}


/* Las regiones con role="alert" NUNCA se ocultan con display:none, ni siquiera
   vacias: eso las saca del arbol de accesibilidad y el lector de pantalla deja
   de anunciar lo que se escriba dentro despues. Los avisos de mensaje entrante
   viven en dos de estas regiones y nacen vacias. Un parrafo vacio no ocupa
   alto; alcanza con sacarle el margen para que no deje un hueco. */
[role="alert"]:empty { margin: 0; }

[role="alert"] { color: var(--error); font-weight: 600; }

/* Contraste forzado de Windows: el sistema pisa colores, fondos y sombras. Hay
   que rehacer con colores del sistema todo lo que ahi se perderia. */
@media (forced-colors: active) {
  /* La sombra se descarta en este modo: el anillo de foco queda solo con el
     contorno, y se pinta con el color de texto, que es el unico que el sistema
     garantiza que contrasta con el fondo. Sigue siendo de 3 px y separado, asi
     no se confunde con el borde comun de 2 px. */
  :focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Un borde transparente en este modo deja al boton sin contorno visible, y
     el fondo de color tampoco sobrevive: sin esto el boton se confunde con la
     pagina. */
  button {
    border-color: ButtonText;
  }

  /* El fondo del mensaje propio desaparece; queda la barra de la izquierda. Se
     declaran los dos colores para que la de los ajenos quede invisible a
     proposito y no por casualidad. */
  #lista-mensajes .mensaje { border-left-color: Canvas; }
  #lista-mensajes .mensaje.propio { border-left-color: CanvasText; }
}

/* Hoy no hay nada animado ni desplazamiento suave. Queda como red de
   seguridad: si alguna vez se agrega, no arranca sin permiso de quien pidio
   menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Panel de administracion (admin.html) --------------------------------- */

/* La caja que envuelve la tabla se desplaza de costado cuando la tabla no entra
   (siete columnas en un telefono), en vez de ensanchar la pagina y obligar a
   desplazar TODO el documento en horizontal. Mismo criterio y mismo aspecto que
   #historial. El tabindex de la caja (ver admin.html) es lo que permite
   desplazarla con el teclado. */
#caja-tabla {
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid var(--borde);
  border-radius: 4px;
  padding: 0.5rem;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* El caption le da el nombre accesible a la tabla. Se deja a la vista, alineado a
   la izquierda como el resto y con el grosor de un rotulo, no centrado ni tenue:
   bajarle el contraste seria romper justo el texto que lo nombra. */
caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

th,
td {
  text-align: left;
  padding: 0.5rem;
  border: 1px solid var(--borde);
  /* Un enlace o un nombre largo corta antes que ensanchar la pagina. */
  overflow-wrap: anywhere;
}

/* Los encabezados (fila de arriba y el nombre de cada fila) van en negrita: es la
   distincion que el lector ya anuncia como encabezado, reforzada a la vista. */
thead th,
tbody th {
  font-weight: 700;
}

/* Los botones dentro de una celda no necesitan el ancho completo del campo: se
   ajustan a su texto para no empujar la columna mas de lo necesario. */
td button {
  width: auto;
}

/* El cuadro de confirmacion de revocar. <dialog> centrado por el navegador; se le
   dan los colores, el borde y un ancho comodo. */
dialog {
  max-width: min(32rem, 92vw);
  padding: 1rem;
  color: var(--texto);
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: 4px;
}

/* El fondo detras del dialogo modal. Un velo oscuro semitransparente marca que el
   resto de la pagina quedo inerte. */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* Los dos botones del dialogo, uno al lado del otro, con aire entre ellos para no
   pulsar el equivocado. */
#dialogo-revocar button {
  margin-right: 0.5rem;
}

/* Un boton anunciado como deshabilitado (una invitacion ya revocada) se ve
   atenuado, pero SIN bajar de los mismos minimos de contraste: sigue siendo texto
   que hay que poder leer. El cursor deja de invitar a pulsarlo. */
button[aria-disabled="true"] {
  opacity: 0.7;
  cursor: default;
}

@media (forced-colors: active) {
  /* En contraste forzado el sistema pisa los bordes; hay que rehacerlos con un
     color del sistema o la tabla queda sin lineas y las celdas se confunden. */
  th,
  td {
    border-color: CanvasText;
  }
  /* La opacidad no sobrevive a este modo y no debe: atenuar iria contra lo que la
     persona pidio al activarlo. El estado "ya revocada" se lee en el texto del
     boton, no en su aspecto. */
  button[aria-disabled="true"] {
    opacity: 1;
  }
  dialog {
    border-color: CanvasText;
  }
}

/* Visible para el lector de pantalla, no para la vista. NO usar display:none
   ni visibility:hidden: eso lo saca tambien del arbol de accesibilidad. */
.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   LA CONSOLA. Estilos de disposicion, no de adorno: aunque quien la usa a
   diario no ve la pantalla, los invitados pueden ver, y una pagina que se ve
   rota tambien se navega peor (el orden visual y el orden de lectura tienen
   que coincidir).
   =========================================================================== */

/* Barra del estudio: los botones globales juntos y a la vista. */
#barra-estudio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border: 1px solid currentColor;
  border-radius: 6px;
}

/* Un bloque por participante, con sus controles debajo del nombre. */
.participante {
  padding: 0.6rem;
  border-bottom: 1px solid currentColor;
}
.participante:last-child { border-bottom: none; }
.participante p { margin: 0.3rem 0; }

/* El nombre lleva el peso: es lo primero que se lee al llegar a esa persona. */
.nombre-participante { font-weight: 600; }

/* Los controles de la mesa NO son campos de formulario a lo ancho: la regla
   general de "select" (ancho 100%) los estiraria de punta a punta. */
.participante select { width: auto; max-width: none; }

/* Deslizantes anchos, que es lo que los hace usables con el mouse y con el dedo.
   Con el teclado da igual, pero no hay motivo para que sea incomodo para el
   resto. */
input[type="range"] {
  width: 100%;
  max-width: 22rem;
  vertical-align: middle;
}
/* La etiqueta del deslizante, en su propia linea y pegada al control. */
.participante label { display: block; }

/* EL FOCO SIEMPRE VISIBLE. Con muchos controles seguidos, no ver donde se esta
   parado vuelve la pagina inusable para quien mira la pantalla. */
#mesa :focus,
#barra-estudio :focus,
[role="dialog"] :focus {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Los dialogos son <div role="dialog">, no <dialog> nativo: se posicionan a
   mano. Fondo propio y opaco, para que lo de atras no se lea encima. */
[role="dialog"][aria-modal="true"] {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  max-width: 34rem;
  width: calc(100% - 2rem);
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.2rem;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: Canvas;
  color: CanvasText;
  z-index: 100;
}
[role="dialog"][aria-modal="true"] h2 { margin-top: 0; }
[role="dialog"][aria-modal="true"] h3 { margin-bottom: 0.3rem; }

/* Pie. Discreto a la vista, pero texto normal para el lector de pantalla: nada
   de ocultarlo ni de achicarlo tanto que no se pueda leer. */
#pie {
  margin-top: 2rem;
  padding-top: 0.8rem;
  border-top: 1px solid currentColor;
  opacity: 0.8;
}

/* ===========================================================================
   IDENTIDAD VISUAL — marca "Bridge" (2026-09-07). SOLO estilo: no cambia el
   orden de tabulacion, ni las etiquetas, ni el arbol que lee el lector. Es para
   el que VE (ahora entran videntes al estudio); para el lector no cambia nada.

   Los colores nuevos estan CALCULADOS igual que los de arriba (contra #ffffff en
   claro y #101010 en oscuro), no estimados:
     blanco s/ destructivo #b00020 ........ 7.3:1   (boton "Salir", tema claro)
     #101010 s/ destructivo #ff8a8a ....... 8.4:1   (boton "Salir", tema oscuro)
     texto s/ tarjeta #f4f7fb / #1b1b1b ... 17.7:1 / 15.4:1
     acento s/ tarjeta .................... 7.4:1 / 8.3:1
   =========================================================================== */
:root { --tarjeta: #f4f7fb; }
@media (prefers-color-scheme: dark) { :root { --tarjeta: #1b1b1b; } }

/* Encabezado: logo + nombre, con una franja de acento debajo. Divs comunes, no
   <header> (que seria un landmark "banner" y el lector lo anunciaria de mas). */
#encabezado {
  border-bottom: 3px solid var(--acento);
  padding-bottom: 0.6rem;
  margin-bottom: 1.2rem;
}
#marca { display: flex; align-items: center; gap: 0.7rem; }
#marca h1 { margin: 0; }
/* El logo es decoracion (aria-hidden): el nombre ya esta en el <h1> que anuncia
   el lector. currentColor lo pinta con el acento y lo adapta a los dos temas. */
#marca .logo { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; color: var(--acento); }
/* Bajada solo para la vista (aria-hidden): no le agrega charla al lector. */
#encabezado .bajada { margin: 0.25rem 0 0; font-size: 0.95rem; }

/* Tarjetas: agrupan cada seccion a la vista. El fondo es apenas distinto del de
   la pagina (1.1:1, imperceptible a proposito para no bajar el contraste del
   texto) y el que separa es el borde. */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin: 0 0 1.1rem;
}
.tarjeta > *:first-child { margin-top: 0; }

/* La barra del estudio pasa a tener el mismo aspecto de tarjeta que el resto. */
#barra-estudio { background: var(--tarjeta); border: 1px solid var(--borde); }

/* Chip de estado del microfono: la MISMA frase que ya lee el lector, dentro de
   una pastilla para que quien ve capte el estado de un vistazo. */
#mi-estado {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--borde);
  border-radius: 999px;
  font-weight: 600;
}

/* Jerarquia de botones: rompe el muro de un solo azul, pero SIN informar por
   color unicamente (cada boton sigue diciendo su accion en el texto):
     - secundario: contorno en vez de relleno (acciones de menor peso).
     - peligro: fondo de error para "Salir". */
button.secundario { background: transparent; color: var(--acento); border-color: var(--acento); }
button.peligro { background: var(--error); }   /* el texto sigue en var(--fondo) */

/* Velo detras del dialogo modal. Estos dialogos son <div role="dialog">, no
   <dialog> nativo, asi que no tienen ::backdrop: el box-shadow gigante pinta el
   velo alrededor sin agregar ningun nodo al DOM ni tocar el JS. */
[role="dialog"][aria-modal="true"] { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5); }
@media (forced-colors: active) {
  [role="dialog"][aria-modal="true"] { box-shadow: none; }
}