/* componentes.css — piezas reutilizables de OftajmV2 (Fase 1.3). Catálogo visual en _dev/componentes.php.
   Solo usa variables de tokens.css. Nombres en español, en minúsculas y con guiones. */

/* ---------------------------------------------------------------- estructura de la página */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e2) var(--e5);
  background: var(--acento); color: #fff; box-shadow: var(--sombra-barra);
}
.marca { color: #fff; font-size: var(--texto-grande); font-weight: 700; letter-spacing: .5px; text-decoration: none; }
.marca:hover { color: #fff; }
.barra-titulo { font-size: var(--texto); opacity: .9; }
.menu-modulos { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
.menu-modulos a { color: #fff; text-decoration: none; padding: 4px 10px; border-radius: var(--radio); opacity: .9; }
.menu-modulos a:hover { background: rgba(255, 255, 255, .14); color: #fff; opacity: 1; }
.menu-modulos a[aria-current=page] { background: rgba(255, 255, 255, .22); opacity: 1; font-weight: 600; }
.barra-nav { margin-left: auto; display: flex; align-items: center; gap: var(--e4); }
.barra-nav a { color: #fff; text-decoration: none; }
.barra-nav a:hover { color: #fff; text-decoration: underline; }
.btn-barra { border: 1px solid #fff; border-radius: var(--radio); background: transparent; color: #fff; padding: 4px 12px; }
.btn-barra:hover { background: rgba(255, 255, 255, .16); }
.en-linea { display: inline; margin: 0; }

.contenido {
  display: grid; gap: var(--e5); justify-items: center;
  padding: var(--e5) var(--e5) var(--e6);
}
.contenido > * { width: 100%; max-width: var(--ancho-max); }
.rejilla { display: grid; gap: var(--e5); align-items: start; }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-ficha { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
@media (max-width: 1250px) { .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .rejilla-ficha { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; } }
.pila { display: flex; flex-direction: column; gap: var(--e3); }
.fila { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.fila-entre { justify-content: space-between; }
.a-la-derecha { margin-left: auto; }
.nota { font-size: var(--texto-pequeno); color: var(--suave); }
.centro { text-align: center !important; }

/* ---------------------------------------------------------------- tarjetas */
.tarjeta {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-grande);
  padding: var(--e5); display: flex; flex-direction: column; gap: var(--e4);
}
.contenido > .tarjeta-estrecha { max-width: var(--ancho-estrecho); }
.tarjeta > h2, .tarjeta-cabecera > h2, .seccion-titulo {
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--acento);
  border-bottom: 1px solid var(--linea); padding-bottom: var(--e2);
}
.tarjeta-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.tarjeta-programada > h2 { color: var(--ambar-texto); border-bottom-color: var(--ambar-borde); }

/* ---------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  border: 1px solid var(--acento); border-radius: var(--radio); background: var(--panel); color: var(--acento);
  padding: 6px 14px; min-height: 34px; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--cian); color: var(--acento); }
.btn-pri { background: var(--acento); color: #fff; }
.btn-pri:hover { background: var(--acento-oscuro); color: #fff; }
.btn-sec { }   /* el aspecto por defecto: contorno */
.btn-peligro { border-color: var(--alerta); color: var(--alerta); }
.btn-peligro:hover { background: var(--alerta-fondo); color: var(--alerta); }
.btn-min { padding: 2px 8px; min-height: 26px; font-size: var(--texto-pequeno); }
.btn:disabled { opacity: .5; }
.botones { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* ---------------------------------------------------------------- formularios */
.formulario { display: grid; gap: var(--e4); }
.formulario label, .campo { display: grid; gap: var(--e1); font-size: var(--texto-pequeno); color: var(--suave); }
.campo-etiqueta { font-size: var(--texto-mini); color: var(--suave); text-transform: uppercase; letter-spacing: .4px; }
.formulario input:not([type=checkbox]):not([type=radio]), .campo input:not([type=checkbox]):not([type=radio]),
.campo select, .campo textarea { font-size: var(--texto); color: var(--tinta); }
.permisos { display: grid; gap: var(--e2); }
.casilla { display: inline-flex !important; flex-direction: row; align-items: center; gap: var(--e2); color: var(--tinta) !important; font-size: var(--texto) !important; cursor: pointer; }
.casilla[hidden] { display: none !important; }
.campo-unidad { display: inline-flex; align-items: center; gap: var(--e1); }
.campo-unidad input { width: 80px; }

/* Grupo de opciones: botones que se marcan (un hallazgo, un grado, un ojo...) */
.grupo-opciones { display: flex; flex-wrap: wrap; gap: var(--e1); }
.grupo-opciones button, .opcion {
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); color: var(--tinta);
  padding: 4px 10px; min-height: 30px; font-size: 13px;
}
.grupo-opciones button:hover, .opcion:hover { background: var(--cian); }
.grupo-opciones button[aria-pressed=true], .opcion[aria-pressed=true] { background: var(--acento); border-color: var(--acento); color: #fff; }

/* Conmutador: opciones excluyentes pegadas (AO / OD / OI, completo / compacto...) */
.conmutador { display: inline-flex; border: 1px solid var(--acento); border-radius: var(--radio); overflow: hidden; }
.conmutador button { border: 0; background: var(--panel); color: var(--acento); padding: 4px 12px; min-height: 30px; }
.conmutador button + button { border-left: 1px solid var(--acento); }
.conmutador button[aria-pressed=true] { background: var(--acento); color: #fff; }

/* Hallazgo: casilla + opciones que aparecen al marcarla (grado, localización...) */
.hallazgo { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: var(--e2) var(--e3); align-items: center; padding: var(--e1) 0; }
.hallazgo-detalle { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; }
.hallazgo-detalle[hidden], .hallazgo[hidden] { display: none !important; }

/* ---------------------------------------------------------------- ficha de exploración (ficha.js) */
.ficha { display: flex; flex-direction: column; gap: var(--e4); }
.ficha-grupo { font-size: var(--texto-mini); text-transform: uppercase; letter-spacing: .5px; color: var(--suave); margin-top: var(--e2); }
.hallazgo-simple { grid-template-columns: 1fr; }
.hallazgo > .conmutador { justify-self: start; }
.hallazgo-sino-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }   /* sí/no con opciones (09-10-2026) */
.desde-fuera { background: var(--ambar); outline: 1px solid var(--ambar-borde); border-radius: var(--radio); padding-left: var(--e2); padding-right: var(--e2); }

/* ---------------------------------------------------------------- ojos */
.columnas-ojos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
@media (max-width: 860px) { .columnas-ojos { grid-template-columns: 1fr; } }
.ojo { border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: var(--e3) var(--e4); background: var(--cian); display: flex; flex-direction: column; gap: var(--e3); }
.ojo-oi { background: var(--turquesa); }
.ojo-ao { background: var(--lavanda); }
.ojo > header { display: flex; align-items: center; gap: var(--e2); }
.ojo > header b { font-size: 15px; letter-spacing: 1px; }
.insignia-ojo { display: inline-block; min-width: 30px; padding: 1px 6px; border-radius: 10px; color: #fff; font-size: var(--texto-mini); font-weight: 700; text-align: center; letter-spacing: .5px; }
.insignia-od { background: var(--od); }
.insignia-oi { background: var(--oi); }
.insignia-ao { background: var(--ao); }

/* ---------------------------------------------------------------- mensajes y avisos */
.mensaje { padding: var(--e2) var(--e3); border-radius: var(--radio); }
.mensaje-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.mensaje-error { background: var(--alerta-fondo); color: var(--alerta); }
.mensaje-info { background: var(--cian); color: var(--tinta); }
.aviso { background: var(--aviso); border: 1px solid var(--ambar-borde); border-radius: var(--radio); padding: var(--e2) var(--e3); font-size: 13px; }
.aviso-rojo { background: var(--alerta-fondo); border-color: var(--alerta-borde); }
.insignia { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--cian); color: var(--acento); font-size: var(--texto-mini); font-weight: 600; }
.insignia-pendiente { background: var(--ambar); color: var(--ambar-texto); border: 1px solid var(--ambar-borde); }
.cargando { color: var(--suave); font-style: italic; }
.cargando::after { content: " …"; }

/* ---------------------------------------------------------------- informe (texto para la historia clínica) */
.informe { display: flex; flex-direction: column; gap: var(--e2); }
.informe-cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.informe-cabecera span { font-size: var(--texto-pequeno); font-weight: 600; color: var(--suave); }
.informe textarea, .informe-texto {
  background: var(--beige); border: 1px solid var(--linea); border-radius: var(--radio);
  font-family: var(--fuente-mono); font-size: 13px; line-height: 1.5; padding: var(--e3); white-space: pre-wrap; min-height: 160px;
}

/* ---------------------------------------------------------------- tablas */
.tabla { width: 100%; font-size: var(--texto); }
.tabla th, .tabla td { border-bottom: 1px solid var(--linea); padding: var(--e2) var(--e3); text-align: left; vertical-align: middle; }
.tabla th { font-size: var(--texto-pequeno); color: var(--suave); font-weight: 600; }
.tabla tbody tr:hover { background: #f7fafc; }
.acciones-fila { white-space: nowrap; }
.acciones-fila form + form { margin-left: var(--e2); }

/* ---------------------------------------------------------------- pestañas */
.pestanas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.pestanas button { border: 0; border-bottom: 3px solid transparent; background: none; color: var(--suave); padding: var(--e2) var(--e3); margin-bottom: -1px; }
.pestanas button:hover { color: var(--acento); }
.pestanas button[aria-selected=true] { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

/* ---------------------------------------------------------------- portal: tarjetas de módulos */
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e4); }
.modulo { display: flex; flex-direction: column; gap: var(--e1); background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-grande); padding: var(--e4) var(--e5); text-decoration: none; color: var(--tinta); }
.modulo:hover { border-color: var(--acento); box-shadow: 0 2px 8px rgba(10, 106, 122, .15); color: var(--tinta); }
.modulo strong { color: var(--acento); font-size: var(--texto-grande); }
.modulo-pendiente { opacity: .55; pointer-events: none; }
.modulo .insignia { align-self: flex-start; }

/* ---------------------------------------------------------------- buscador y grupos de la biblioteca */
.buscador { flex: 0 1 440px; display: flex; }
.buscador input { width: 100%; }
.grupo-recursos { display: flex; flex-direction: column; gap: var(--e3); }
.grupo-recursos + .grupo-recursos { margin-top: var(--e3); }

/* ---------------------------------------------------------------- imagen: zona para soltar o pegar */
.zona-soltar { border: 2px dashed var(--linea); border-radius: var(--radio); padding: var(--e3) var(--e4); min-height: 56px; display: flex; align-items: center; gap: var(--e3); color: var(--suave); font-size: var(--texto-pequeno); cursor: pointer; }
.zona-soltar:hover, .zona-soltar.encima { border-color: var(--acento); background: var(--cian); }
.zona-soltar img { max-height: 90px; max-width: 220px; border-radius: var(--radio-pequeno); }

/* ---------------------------------------------------------------- chat con la IA */
.chat { display: flex; flex-direction: column; gap: var(--e3); max-height: 70vh; overflow-y: auto; padding-right: var(--e1); }
.burbuja { border-radius: var(--radio); padding: var(--e2) var(--e3); max-width: 90%; }
.burbuja-usuario { align-self: flex-end; background: var(--cian); white-space: pre-wrap; }
.burbuja-modelo { align-self: flex-start; background: #f7fafc; border: 1px solid #e3ebf2; }
.burbuja-error { align-self: flex-start; background: var(--alerta-fondo); color: var(--alerta); }
.chat-ia { display: flex; flex-direction: column; gap: var(--e3); }
.chat-ia .chat { min-height: 120px; }
.burbuja-modelo > :first-child { margin-top: 0; }
.burbuja-modelo > p, .burbuja-modelo > ul, .burbuja-modelo > ol { margin: 0 0 var(--e2); }
.burbuja-pie { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.chat-entrada { display: flex; gap: var(--e2); align-items: flex-end; }
.chat-entrada textarea { flex: 1; }

/* ---------------------------------------------------------------- sesión: aviso y ventana de renovación (sesion.js) */
.aviso-sesion { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: var(--e4); padding: var(--e2) var(--e4); background: var(--aviso); border-bottom: 1px solid var(--ambar-borde); }
.modal-fondo { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: var(--e4); background: rgba(18, 34, 51, .55); }
.modal { width: 100%; max-width: 440px; display: grid; gap: var(--e3); padding: var(--e5); background: var(--panel); border-radius: var(--radio-grande); box-shadow: var(--sombra-modal); }
.modal label { display: grid; gap: var(--e1); font-size: var(--texto-pequeno); color: var(--suave); }
.modal-botones { display: flex; justify-content: space-between; gap: var(--e3); }

/* ---------------------------------------------------------------- piezas concretas */
.clave-provisional { font-family: var(--fuente-mono); font-size: 18px; letter-spacing: 1px; background: var(--panel); padding: 2px 8px; border-radius: var(--radio-pequeno); border: 1px solid var(--linea); }

@media print {
  .barra, .aviso-sesion, .modal-fondo { display: none !important; }
  .tarjeta { border: 0; padding: 0; }
}

/* ---------------------------------------------------------------- elegir de una lista (elegir.js) */
.elegir-lista { max-width: 520px; }
.elegir-opcion { flex-direction: column; align-items: flex-start; white-space: normal; text-align: left; padding: var(--e2) var(--e3); }
.elegir-opcion .nota { font-weight: normal; }

/* ---------------------------------------------------------------- bloque de AV (av-vista.js), Consulta y Graduación */
.av-bloque { display: flex; flex-direction: column; gap: var(--e2); }
.av-bloque .tabla-av td { padding: var(--e1) var(--e2); }
.av-bloque .tabla-av select { min-width: 0; }
.av-bloque .tabla-av input.av { width: 100%; max-width: 100px; text-align: center; }
.av-acciones { gap: var(--e3); }
.av-atajos button { min-height: 28px; padding: 2px 10px; }
.elegir-dos { max-width: 760px; }
.elegir-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.elegir-columna { display: flex; flex-direction: column; gap: var(--e2); }
.elegir-columna .informe-texto { margin: 0; min-height: 120px; }

/* ---------------------------------------------------------------- ficha: presentación, horas y cristalino (Fase 5.6) */
.ficha-presentacion { gap: var(--e4); }
.campo-unidad.horas input { width: 60px; }
.hallazgo-cristalino { align-items: start; }
.cristalino-detalle { display: flex; flex-direction: column; gap: var(--e2); }
.cristalino-capsula { align-items: center; }
.cristalino-capsula input { width: 60px; margin-left: var(--e2); }
.cristalino-bcn { display: flex; gap: var(--e3); align-items: flex-start; flex-wrap: wrap; }
.cristalino-bcn[hidden], .cristalino-capsula[hidden], .bcn-imagen[hidden] { display: none !important; }
.bcn-reglas { display: flex; flex-direction: column; gap: var(--e1); min-width: 200px; }
.bcn-regla { display: grid; grid-template-columns: 64px 1fr 22px; align-items: center; gap: var(--e2); font-size: var(--texto-pequeno); }
.bcn-imagen { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.bcn-imagen img { width: 150px; height: auto; border-radius: var(--radio-pequeno); border: 1px solid var(--linea); }

/* ---------------------------------------------------------------- ficha: subhallazgos con clasificación (RD) */
.sub-detalle { flex-direction: column; align-items: flex-start; gap: var(--e1); padding: var(--e2) var(--e3); background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }
.sub-linea { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.sub-linea .grupo-opciones button { min-height: 26px; padding: 2px 8px; font-size: var(--texto-pequeno); }
.sub-clasificacion { font-weight: 700; color: var(--acento-oscuro); margin-top: var(--e1); }

/* Foto con el móvil (código QR) y visor de imagen en grande (lector-ia.js) */
.modal-qr { max-width: 420px; }
.modal-qr ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--e1); }
.qr-codigo { display: flex; justify-content: center; padding: var(--e2); background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.qr-estado { font-weight: 600; color: var(--acento); }
.lector-imagen img { cursor: zoom-in; }
.visor-imagen { position: fixed; top: 64px; right: var(--e3); bottom: var(--e3); z-index: 35; width: min(46vw, 960px);
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-grande); box-shadow: var(--sombra-modal); }
.visor-imagen[hidden] { display: none; }
.visor-imagen.visor-izquierda { right: auto; left: var(--e3); }
.visor-cabecera { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linea); }
.visor-cabecera strong { flex: 1; }
.visor-cuerpo { flex: 1; overflow: auto; background: #1b2530; }
.visor-cuerpo img { display: block; margin: 0 auto; max-width: 100%; height: auto; cursor: zoom-in; }   /* margin auto: con tamaño real se puede desplazar hasta el borde izquierdo */
.visor-real .visor-cuerpo img { max-width: none; cursor: zoom-out; }
@media (max-width: 860px) { .visor-imagen { left: var(--e3); width: auto; } }
@media print { .visor-imagen { display: none !important; } }
/* Observaciones de las secciones que leen con IA (07-10-2026) */
.observaciones-campo { display: flex; flex-direction: column; gap: var(--e1); margin-top: var(--e3); }
.observaciones-texto { width: 100%; resize: vertical; }

/* Pantalla en blanco con PIN (09-10-2026, nucleo/privacidad.js) */
.velo-privacidad { position: fixed; inset: 0; z-index: 10000; background: var(--fondo, #fff); display: flex; align-items: center; justify-content: center; }
.velo-privacidad[hidden] { display: none; }
body.con-velo > :not(.velo-privacidad) { visibility: hidden; }
.velo-caja { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-grande, 8px); padding: var(--e5, 24px); width: min(360px, 92vw); display: flex; flex-direction: column; gap: var(--e3); }
.velo-caja h2 { margin: 0; }
.velo-pin { font-size: 22px; letter-spacing: 6px; text-align: center; }
.velo-error { color: var(--alerta); font-weight: 600; margin: 0; min-height: 1.2em; }
.velo-olvido { align-self: flex-start; }

/* Datos del paciente (NHC, iniciales, edad, sexo): solo en la pantalla (09-10-2026, nucleo/paciente.js) */
.datos-paciente { align-items: flex-end; gap: var(--e4); }
.datos-paciente .corto { width: 140px; }
.datos-paciente .muy-corto { width: 80px; }

/* Existencias agrupadas (09-10-2026, nucleo/existencias.js) */
.existencias-lista h3, .existencias-lista h4, .existencias-lista h5 { margin: var(--e3) 0 2px; }
.existencias-presentacion { font-size: 15px; color: var(--acento); border-bottom: 1px solid var(--linea); padding-bottom: 2px; }
.existencias-grupo { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.existencias-subgrupo { font-size: 12px; color: var(--suave); font-weight: 600; margin-left: var(--e2); }
.existencias-lista h3:first-child { margin-top: 0; }

/* «Ver imágenes» del atlas junto a signos, hallazgos y protocolos (fase A2, 12-10-2026) */
.atlas-hueco:empty { display: none; }
.atlas-ver { min-height: 18px !important; height: 18px; line-height: 16px !important; padding: 0 6px !important; font-size: var(--texto-mini) !important; margin-left: 6px; vertical-align: middle; }
.atlas-visor-dialogo { border: none; border-radius: var(--radio); padding: var(--e3); width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.atlas-visor-dialogo::backdrop { background: rgba(0, 0, 0, .55); }
.atlas-visor-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); margin-bottom: var(--e2); }
.atlas-visor-cab h2 { margin: 0; font-size: 18px; }
.atlas-visor-cuerpo { display: grid; gap: var(--e3); }
.atlas-visor-cuerpo figure { margin: 0; }
.atlas-visor-cuerpo img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto 4px; background: #111; border-radius: var(--radio); }
.atlas-visor-enlace { display: inline-block; margin-top: var(--e2); font-size: var(--texto-pequeno); }