/**
 * Base compartida de MicroVision como módulo de CELL-IA (rediseño «Campo claro», 2026-10-28): reset,
 * tipografía, cabecera con el lockup «CELL-IA | MicroVision», conmutador de iluminación, botones con
 * descripción emergente, chips de estado, tarjetas, campos, líneas de estado y el escenario del video
 * (con pizarra, telón y pantalla completa). Cada página añade su maquetación en emitir.css y ver.css.
 *
 * Reglas de la casa: nada inline (la CSP no admite style= ni onclick=; lo dinámico va por CSSOM o
 * por atributos), un solo acento (violeta = acción), objetivos táctiles de 44 px, foco visible
 * siempre, 100dvh y nunca 100vh, sin emojis. La regla `[hidden]` de este archivo es la que oculta el
 * sprite `<svg hidden>` de iconos: no puede desaparecer.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
  background: var(--fondo);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--fuente);
  font-size: var(--texto-cuerpo);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

h1,
h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

h1:focus {
  outline: none;
}

.icono {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

.icono--16 {
  width: 16px;
  height: 16px;
}

.icono--20 {
  width: 20px;
  height: 20px;
}

/* Cabecera: el lockup a la izquierda y los iconos de 44 px a la derecha, como el Workbench. */
.cabecera {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  min-height: var(--alto-cabecera);
  padding: var(--esp-2) 20px;
  border-bottom: 1px solid var(--vidrio-borde);
  background: color-mix(in srgb, var(--fondo) 80%, transparent);
}

.cabecera__herramientas {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.cabecera__separador {
  width: 1px;
  height: 24px;
  margin: 0 var(--esp-1);
  background: var(--borde);
}

/* Isotipo y lockup «CELL-IA | MicroVision»: el wordmark en Unbounded 700 con «IA» en el acento y el
   módulo en Inter 600, tras un separador fino. Se lee «CELL-IA, pantalla MicroVision». */
.iso-coral {
  fill: var(--iso-coral);
}

.iso-violeta {
  fill: var(--iso-violeta);
}

.iso-pastilla {
  fill: var(--iso-pastilla);
}

.iso-pastilla-texto {
  fill: var(--iso-pastilla-texto);
  font-family: var(--fuente);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.isotipo {
  width: 40px;
  height: 40px;
  flex: none;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lockup__cellia {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.lockup__cellia span {
  color: var(--acento);
}

.lockup__separador {
  width: 1px;
  height: 20px;
  margin: 0 2px;
  flex: none;
  background: var(--borde);
}

.lockup__modulo {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* Conmutador de iluminación: el anillo de CELL-IA con luna (en campo claro) o sol (en oscuro). */
.luz {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  flex: none;
  padding: 0;
  border: 2.5px solid var(--tinta);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color var(--duracion-rapida) ease;
}

.luz:hover {
  background: color-mix(in srgb, var(--tinta) 10%, transparent);
}

.luz svg {
  width: 22px;
  height: 22px;
}

.luz__sol {
  display: none;
}

:root[data-iluminacion="oscuro"] .luz__luna {
  display: none;
}

:root[data-iluminacion="oscuro"] .luz__sol {
  display: block;
}

/* Botones: la píldora del Workbench. Violeta solo para la acción que toca. */
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--objetivo-tactil);
  min-width: var(--objetivo-tactil);
  padding: 0 var(--esp-4);
  border: 1px solid var(--borde);
  border-radius: var(--redondo);
  background: var(--tarjeta);
  color: var(--tinta);
  font-size: var(--texto-control);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracion-rapida) ease, border-color var(--duracion-rapida) ease, color var(--duracion-rapida) ease;
}

.boton:hover {
  background: color-mix(in srgb, var(--tinta) 6%, var(--tarjeta));
}

.boton--principal {
  border-color: transparent;
  background: var(--acento);
  color: var(--acento-tinta);
}

.boton--principal:hover {
  background: var(--acento-hover);
}

.boton--fantasma {
  border-color: transparent;
  background: transparent;
  color: var(--tinta-suave);
}

.boton--fantasma:hover {
  background: color-mix(in srgb, var(--tinta) 7%, transparent);
  color: var(--tinta);
}

.boton--icono {
  width: var(--objetivo-tactil);
  padding: 0;
}

.boton--ancho {
  width: 100%;
}

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.boton:disabled:hover {
  background: var(--tarjeta);
}

.boton--principal:disabled:hover {
  background: var(--acento);
}

.boton--fantasma:disabled:hover {
  background: transparent;
}

.boton[aria-busy="true"]:disabled {
  opacity: 0.85;
  cursor: progress;
}

/* Descripción emergente de los iconos (la de los iconos de 44 px del Workbench). Es decorativa: el
   nombre accesible va en aria-label. */
.con-pista {
  position: relative;
}

.pista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 50%;
  padding: 6px 9px;
  border-radius: var(--radio-xs);
  background: var(--tinta);
  color: var(--fondo);
  font-size: var(--texto-mini);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity 120ms ease, transform 120ms var(--salida);
}

.pista--derecha {
  left: auto;
  right: 0;
  transform: translate(0, -3px);
}

.pista--arriba {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 3px);
}

.pista--izquierda {
  left: auto;
  right: 0;
  transform: translate(0, 3px);
}

.con-pista:hover > .pista,
.con-pista:focus-visible > .pista {
  opacity: 1;
  transform: translate(-50%, 0);
}

.con-pista:hover > .pista--derecha,
.con-pista:focus-visible > .pista--derecha,
.con-pista:hover > .pista--izquierda,
.con-pista:focus-visible > .pista--izquierda {
  transform: translate(0, 0);
}

/* Chips de estado: forma y color con un solo significado. Círculo verde = en vivo, cuadrado coral =
   foto fija, círculo hueco = vista previa. El texto va en la tinta del relleno (AA en los dos campos). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 11px 0 9px;
  border-radius: var(--redondo);
  font-size: var(--texto-etiqueta);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
}

.chip--vivo {
  background: var(--vivo);
  color: var(--vivo-tinta);
}

.chip--vivo::before {
  border-radius: 50%;
  background: var(--vivo-tinta);
}

.chip--fija {
  background: var(--fija);
  color: var(--fija-tinta);
}

.chip--fija::before {
  border-radius: 1.5px;
  background: var(--fija-tinta);
}

.chip--previa {
  background: var(--apagado);
  color: var(--tinta-suave);
  box-shadow: inset 0 0 0 1px var(--borde);
}

.chip--previa::before {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--tinta-suave);
}

/* Tarjetas del Workbench: blancas sobre el gris del campo claro. */
.tarjeta {
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--tarjeta);
  box-shadow: inset 0 1px 0 var(--brillo-interno);
}

/* Campos: etiqueta visible siempre, borde con al menos 3:1, foco por anillo. */
.campo {
  display: grid;
  gap: var(--esp-1);
}

.campo__etiqueta {
  font-size: var(--texto-etiqueta);
  font-weight: 600;
  color: var(--tinta-suave);
}

.campo__control {
  width: 100%;
  min-height: var(--objetivo-tactil);
  padding: 0 var(--esp-3);
  border: 1px solid var(--campo-borde);
  border-radius: var(--radio-s);
  background: var(--campo);
  color: var(--tinta);
  font-size: var(--texto-control);
}

.campo__control:focus-visible {
  outline-offset: 0;
  border-color: var(--foco);
}

.campo__control:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.campo__control[aria-invalid="true"] {
  border-color: var(--error-texto);
}

/* Selector con su flecha dibujada en CSS: la CSP no admite imágenes externas y el control nativo se
   aplana para que tenga la misma altura que los campos. */
.selector {
  position: relative;
  display: block;
}

.selector select {
  appearance: none;
  padding-right: 34px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.selector::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  transform: rotate(45deg);
  pointer-events: none;
}

select option {
  color: var(--tinta);
  background: var(--tarjeta);
}

/* Líneas de estado con aria-live: tono por atributo de datos, siempre texto legible (AA). */
.estado {
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
  min-height: 1.5em;
}

.estado[data-tono="error"] {
  color: var(--error-texto);
}

.estado[data-tono="exito"] {
  color: var(--exito-texto);
}

.estado[data-tono="aviso"] {
  color: var(--aviso-texto);
}

.estado--nota {
  min-height: 0;
  font-size: var(--texto-etiqueta);
  line-height: 1.42;
}

/* En las notas, el verde tampoco se usa para el éxito («fuente detectada», «ajustes guardados»): queda
   reservado a lo que está en vivo. */
.estado--nota[data-tono="neutro"],
.estado--nota[data-tono="exito"],
.estado--nota:not([data-tono]) {
  color: var(--tinta-suave);
}

/* Pie: una sola línea discreta. MicroVision vive en CELL-IA; la universidad queda como texto. */
.pie {
  margin-top: auto;
  padding: var(--esp-4) 20px;
  font-size: var(--texto-mini);
  color: var(--tinta-tenue);
  text-align: center;
}

/*
 * Escenario: el video con la pizarra encima, el telón cuando no hay imagen y los controles. La
 * imagen del microscopio es campo claro de verdad, así que el fondo del escenario es el gris apagado
 * del tema y no un teatro negro.
 */
.escenario__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.escenario__pizarra {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
}

.escenario__pizarra--activa {
  pointer-events: auto;
  cursor: crosshair;
}

.escenario__pizarra--oculta {
  visibility: hidden;
}

.escenario__pizarra:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: -3px;
}

.escenario__telon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-6);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--tinta-suave);
  pointer-events: none;
}

.escenario__telon .icono {
  width: 28px;
  height: 28px;
}

/* Marco coral de la foto fija: la misma forma y color del chip, alrededor de la imagen. */
.escenario__marco-fija {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--fija), inset 0 0 0 4px color-mix(in srgb, var(--fija) 45%, var(--tinta));
  pointer-events: none;
}

.escenario__controles {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: var(--esp-2);
}

/* Botón sobre la imagen (pantalla completa del teléfono): velo oscuro con icono claro, que se lee
   igual sobre la imagen clara del microscopio que sobre la oscuridad de la pantalla completa. */
.boton--sobre-imagen {
  border-color: transparent;
  background: var(--velo);
  color: var(--sobre-velo);
  font-weight: 500;
}

.boton--sobre-imagen:hover {
  background: rgb(19 35 49 / 0.92);
}

.boton--sobre-imagen:focus-visible {
  outline-color: var(--sobre-velo);
  outline-offset: -4px;
}

/* Pantalla completa: vía estándar (:fullscreen) o capa fija por CSS cuando el navegador no la tiene
   sobre elementos (iPhone). En las dos, el contenedor entero se muestra y la pizarra sigue encima. */
.escenario:fullscreen,
.escenario--pantalla-completa,
.escenario--capa-fija {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
}

.escenario--capa-fija {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100dvh;
}

.con-capa-fija {
  overflow: hidden;
}

@media (forced-colors: active) {
  .chip,
  .escenario__marco-fija {
    forced-color-adjust: none;
    outline: 2px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}