/* ════════════════════════════════════════════════════════════════════
   «INCIDENCIA O HECHO» · LA HOJA

   Lienzo: `docs/mockups-orvik/incidencia-o-hecho-aprobado.html` y su
   anexo de fechas, que manda donde se contradigan.

   NO ES OTRA SECCIÓN. Es una hoja que se abre encima del detalle del
   turno de Master Staffing: en PC entra por la derecha, 520 px; en
   celular es hoja inferior. Las dos entradas --tocar a la persona en el
   detalle y el botón «Incidencia o hecho»-- llevan a esta misma hoja.

   ── DE DÓNDE SALE CADA MEDIDA ──

   El lienzo del auditor trae su propio vocabulario de variables
   (`--sup`, `--acento`, `--r-full`…) porque es una página suelta. Aquí
   NINGUNA se copia: cada una se traduce al token de
   `08-SISTEMA-VISUAL-v2`, que es el que existe en el panel. Una
   variable que no existe no falla: desaparece --`docs/65` A.1--, y una
   hoja con la mitad de los radios en cero se ve rota sin que nada
   avise.

     lienzo            aquí                  valor
     --sup             --superficie          la hoja
     --sup2            --control             campos y segmentado
     --acento          --marca-principal     el aqua de Orvik
     --acento-s        --marca-suave         el fondo del icono
     --tinta           --marca-sobre-principal texto sobre el aqua
     --velo            rgba(15,23,42,.38)    el del anexo del inspector
     radio 28 (hoja)   --r-contenedor        24 px · «hojas flotantes»
     radio 20 (PC)     --r-tarjeta           20 px · igual que el lienzo
     radio 12          --r-control           12 px · igual que el lienzo
     radio 999         --r-control (12)      el anexo del 27-oct: en la
                                             consola nada que se toque es
                                             píldora. El lienzo dibujaba
                                             999 y el anexo manda sobre él.
     56 px de alto     --toque + --e-3       44 + 12, sin número suelto
   ════════════════════════════════════════════════════════════════════ */

/* ── EN QUÉ CAPA VA ──
   El token dice `--z-dialogo: 40`, pero `panel.css` no lo sigue: la
   barra de abajo del celular está en 50 y sus propios diálogos en 80.
   Medido: con 40 la hoja queda DEBAJO de la barra del menú, que se le
   monta encima en el celular. Así que la hoja va en la misma capa que
   los demás diálogos del panel --80-- y encima de su velo.
   Que el token y `panel.css` no coincidan es un defecto de `panel.css`,
   no de esta hoja; queda dicho para Dirección. */
.ioh-velo {
  position: fixed;
  inset: 0;
  background: var(--velo, rgba(15, 23, 42, 0.38));
  z-index: 80;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ── LA HOJA · celular primero ──
   `position: fixed` a propósito: una hoja dentro del flujo de `#main`
   empujaría la consola de lado y la prueba del banco --`scrollWidth`
   contra `innerWidth`-- trona. */
.ioh {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 94vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 81;
  background: var(--superficie);
  color: var(--texto);
  border-radius: var(--r-contenedor) var(--r-contenedor) 0 0;
  padding: var(--e-2) var(--e-4) var(--e-6);
  box-shadow: var(--sombra-3);
  animation: ioh-sube var(--dur-lenta) var(--curva);
}

@keyframes ioh-sube { from { transform: translateY(16px); opacity: 0 } }

.ioh-asa {
  display: block;
  width: 40px;
  height: 5px;
  border-radius: var(--r-pildora);
  background: var(--linea);
  margin: var(--e-1) auto var(--e-3);
}

@media (min-width: 840px) {
  .ioh {
    left: auto;
    top: 0;
    bottom: 0;
    width: 520px;
    max-width: 100vw;
    max-height: none;
    border-radius: var(--r-tarjeta) 0 0 var(--r-tarjeta);
    padding: var(--e-4) var(--e-6) var(--e-6);
    animation: ioh-entra var(--dur-lenta) var(--curva);
  }
  .ioh-asa { display: none }
  @keyframes ioh-entra { from { transform: translateX(24px); opacity: 0 } }
}

@media (prefers-reduced-motion: reduce) {
  .ioh { animation: none }
}

/* ── LO QUE `panel.css` LE PONE ENCIMA A TODO, Y AQUÍ NO VA ──
   Dos reglas globales de `panel.css` entran en esta hoja sin que nadie
   las llame y la alejan del lienzo:

     · `h2::before` dibuja una rayita de acento junto a CADA título.
       Dirección la quitó de las guías el 27-oct --«Quita la rayita de
       acento junto al título»-- y el lienzo de esta hoja tampoco la
       tiene.
     · `label` pone 12 px, peso 800, MAYÚSCULAS y espaciado de letra.
       El lienzo escribe las etiquetas en minúscula, 13 px y `--texto-2`.
       `font:` no las apaga: `text-transform` y `letter-spacing` son
       propiedades aparte y se heredan de la regla global.

   Se apagan aquí, dentro de la hoja, y no se toca `panel.css`: ese
   archivo lo usan todas las demás pantallas. */
.ioh h2::before { content: none }

/* ── LA CABECERA ── */
.ioh-cab {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  align-items: flex-start;
}
.ioh-cab h2 { font: var(--t-tarjeta); margin: 0 }
.ioh-sub { font: var(--t-nota); color: var(--texto-3); margin: var(--e-1) 0 0 }
.ioh-x {
  /* 44 × 44 y radio 12 · anexo del 27-oct: botón de ícono. */
  width: var(--toque);
  height: var(--toque);
  flex: none;
  border-radius: var(--r-control);
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--texto);
  font: var(--t-tarjeta);
  cursor: pointer;
}
.ioh-x:hover { background: var(--control) }

/* ── EL SEGMENTADO Incidencia | Un hecho ──
   La forma del anexo del 27-oct, la misma del control «Todo · Guardias
   · Rondines» de En vivo: contenedor de radio 14 con borde de 1, fondo
   `--superficie` y relleno 4; segmento de radio 12 y 36 de alto. Era
   una píldora dentro de otra píldora.

   ── Y EL SEGMENTO MIDE 36, NO 44 · 5a auditoría ──

   Aquí decía 44 «porque la hoja es táctil». El anexo de controles no
   tiene esa excepción, y no la necesita: el contenedor son 4 + 36 + 4
   = 44, que es el área que se toca. Un segmento de 44 dentro de un
   contenedor con relleno da 52, y entonces este control mide distinto
   que el mismo control de En vivo, que es justo lo que el anexo vino
   a quitar.

   El activo lleva `--marca-suave` de fondo y su texto en el color de
   acento, con peso 600: el segmentado se lee por su color de marca,
   no por una sombra. */
.ioh-seg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-1);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-control-g);
  padding: var(--e-1);
  margin-top: var(--e-4);
}
.ioh-seg button {
  min-height: 36px;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--texto-2);
  font: var(--t-cuerpo-f);
  cursor: pointer;
}
.ioh-seg button[aria-selected="true"] {
  background: var(--marca-suave);
  /* `--marca-principal-texto` y no `--marca-principal`: el token de
     acento como TEXTO es ése, y en claro el otro no contrasta. */
  color: var(--marca-principal-texto);
  font-weight: 600;
}

/* ── LAS LISTAS DE OPCIONES ── */
.ioh-et {
  font: var(--t-etiqueta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin: var(--e-6) 0 var(--e-2);
}
.ioh-opc {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 64px;
  padding: var(--e-3) 0;
  border: 0;
  border-top: 1px solid var(--linea);
  background: none;
  color: var(--texto);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.ioh-opc:first-child { border-top: 0 }
.ioh-opc:hover { background: var(--marca-suave) }
/* LA OPCION QUE TODAVIA NO SE PUEDE se dibuja igual y se explica en su
   propia linea; lo que cambia es que no se puede tocar y que el icono
   pierde el acento. Esconderla dejaria a quien la busca creyendo que la
   pantalla esta incompleta. */
.ioh-opc.apagada { cursor: default; opacity: .62 }
.ioh-opc.apagada:hover { background: none }
.ioh-opc.apagada .ioh-ico { background: var(--control); color: var(--texto-3) }
.ioh-ico {
  width: var(--e-10);
  height: var(--e-10);
  flex: none;
  border-radius: var(--r-control);
  background: var(--marca-suave);
  color: var(--marca-principal-texto);
  display: grid;
  place-items: center;
}
.ioh-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round }
.ioh-txt { flex: 1; min-width: 0 }
.ioh-txt b { display: block; font: var(--t-cuerpo-f) }
.ioh-txt span { display: block; font: var(--t-nota); color: var(--texto-3) }
.ioh-chev { color: var(--texto-3); flex: none }
.ioh-pil {
  display: inline-flex;
  align-items: center;
  height: var(--e-6);
  padding: 0 var(--e-3);
  border-radius: var(--r-chico);
  background: var(--control);
  color: var(--texto-2);
  font: var(--t-nota);
  white-space: nowrap;
  flex: none;
}

.ioh-nota {
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-control);
  background: var(--control);
  font: var(--t-sec);
  color: var(--texto-2);
}
/* El aviso que sí hay que leer: la quincena ya pagada y el art. 517. */
.ioh-nota.avisa {
  background: var(--proceso-suave);
  color: var(--proceso-texto);
}
.ioh-nota.mal {
  background: var(--peligro-suave);
  color: var(--peligro-texto);
}

/* ── LOS CAMPOS ── */
.ioh-campo { margin-top: var(--e-4) }
.ioh-campo label,
.ioh-campo .lab {
  display: block;
  font: var(--t-sec);
  color: var(--texto-2);
  margin-bottom: var(--e-2);
  text-transform: none;
  letter-spacing: normal;
}
.ioh-ent {
  width: 100%;
  min-width: 0;
  min-height: calc(var(--toque) + var(--e-3));
  padding: 0 var(--e-4);
  border-radius: var(--r-control);
  border: 1px solid var(--linea);
  background: var(--control);
  color: var(--texto);
  font: var(--t-cuerpo);
}
textarea.ioh-ent { padding: var(--e-4); min-height: 112px; resize: vertical }
.ioh-ent:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px }
.ioh-dos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-3);
}
@media (max-width: 420px) { .ioh-dos { grid-template-columns: minmax(0, 1fr) } }

.ioh-subir {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 64px;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-control);
  border: 1px dashed var(--texto-3);
  background: transparent;
  color: var(--texto);
  font: var(--t-cuerpo-f);
  text-align: left;
  cursor: pointer;
}
.ioh-subir.listo { border-style: solid; border-color: var(--marca-principal) }
.ioh-archivo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }

.ioh-acc { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-6) }
.ioh-bt {
  /* Radio 12 · anexo del 27-oct. El alto se queda: son 56, los del
     lienzo, y el anexo no toca el alto del botón principal. */
  min-height: calc(var(--toque) + var(--e-3));
  padding: 0 var(--e-6);
  border-radius: var(--r-control);
  border: 0;
  background: var(--marca-principal);
  color: var(--marca-sobre-principal);
  font: var(--t-boton-g);
  cursor: pointer;
  width: 100%;
}
.ioh-bt[disabled] { opacity: 0.45; cursor: not-allowed }

.ioh-est {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  margin-top: var(--e-3);
  font: var(--t-sec);
  color: var(--texto-2);
}
.ioh-est::before {
  content: "";
  width: var(--e-2);
  height: var(--e-2);
  border-radius: var(--r-pildora);
  background: var(--marca-principal);
  flex: none;
  margin-top: 5px;
}
.ioh-volver {
  min-height: var(--toque);
  border: 0;
  background: none;
  color: var(--marca-principal-texto);
  font: var(--t-cuerpo-f);
  cursor: pointer;
  padding: 0;
  margin-top: var(--e-2);
}
.ioh-oculto { display: none }
.ioh-ok { display: flex; gap: var(--e-3); align-items: flex-start; margin-top: var(--e-4) }
.ioh-ok h2 { font: var(--t-tarjeta); margin: 0 }
.ioh-ok p { font: var(--t-cuerpo); color: var(--texto-2); margin: var(--e-1) 0 0 }
.ioh-lect { font: var(--t-cuerpo); color: var(--texto-2); margin: var(--e-4) 0 0 }

/* ── LA PERSONA DEL DETALLE, QUE AHORA SE TOCA ──
   Es la primera de las dos entradas del anexo. Era un bloque muerto;
   ahora es un botón, y tiene que verse que lo es sin cambiar su
   dibujo. */
button.ms-per {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-control);
}
button.ms-per:hover { background: var(--marca-suave) }
button.ms-per:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px }

/* ── EL DÍA PASADO, EN MODO CONSULTA ──
   El anexo: un día anterior a hoy abre su turno «en modo consulta»: no
   cambia quién iba, pero sí deja registrar. La cinta lo dice con
   palabras, no con un color. */
.ms-consulta {
  margin: var(--e-3) 0 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-control);
  background: var(--control);
  color: var(--texto-2);
  font: var(--t-sec);
}