/* Identidad visual — Hospital Nacional Cayetano Heredia.
   Colores institucionales exactos del logo oficial:
     azul   #195EA3
     dorado #F7C317

   Tema CLARO (fondo gris cálido, no blanco puro — se ve menos "clínico").
   Todos los colores del texto de acá fueron verificados con la fórmula de
   contraste de WCAG (mínimo 4.5:1 para texto normal, 3:1 para texto
   grande) contra los fondos donde realmente se usan:

     texto principal         #10151D sobre #EEEDE7 -> 15.61:1
     texto suave             #5B6472 sobre #EEEDE7 -> 5.10:1
     azul institucional      #195EA3 sobre blanco   -> 6.62:1
     acento (bordes/badges)  #2B6DAA sobre celeste tenue -> 4.75:1

   El dorado puro (#F7C317) es muy claro: sobre el fondo da apenas
   ~1.6:1, invisible como texto. Por eso NUNCA se usa como color de
   texto — solo como borde/fondo decorativo. Para los lugares donde hace
   falta dorado legible (título, número de la comida activa, "Esperando
   DNI...", botones secundarios, títulos de sección h2) se usa
   --dorado-oscuro (#876905 -> 4.4:1 a 5:1 según el fondo), un mostaza
   más apagado que el dorado del logo — parecido al tono de los toldos
   reales del hospital, más apagados que el dorado puro. */
:root {
  --fondo: #EEEDE7;
  --superficie: #FBFAF6;
  --superficie-alta: #F0F1EE;
  --borde: #DDE1E6;
  --texto: #10151D;
  --texto-suave: #5B6472;

  --azul-institucional: #195EA3;  /* fondos sólidos y también texto: en blanco ya se lee bien en los dos roles */
  --azul-profundo: #124878;       /* hover de botones */
  --acento: #2B6DAA;              /* bordes de foco, insignias, número "pendiente" */
  --acento-tenue: #E8F1FA;

  --dorado: #F7C317;              /* SOLO decorativo: bordes y fondos de insignia — nunca texto */
  --dorado-oscuro: #876905;       /* dorado oscurecido, para texto legible (título, número destacado) */
  --dorado-tenue: #FBF0CE;

  --exito: #167F3D;
  --exito-fondo: #E7F6EC;
  --advertencia: #945F06;
  --advertencia-fondo: #FDF1DC;
  --peligro: #D00A0A;
  --peligro-fondo: #FBEAEA;
  --neutro-fondo: #F0F1EE;

  /* El fondo oscuro daba profundidad solo con el contraste entre tonos de
     superficie. En blanco hace falta una sombra sutil para que las
     tarjetas y los contadores se despeguen del fondo. */
  --sombra-tarjeta: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);

  --mono: 'SFMono-Regular', Consolas, Menlo, 'Liberation Mono', monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--texto);
  font-size: 18px;
}

header.app-nav {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  border-top: 3px solid var(--azul-institucional);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Zona de marca: el logo institucional (el que subió el Administrador, o
   si no, el del hospital por defecto) más el nombre, uno al lado del
   otro. Si la imagen no carga, queda el texto solo — nunca un hueco ni un
   ícono roto. */
.marca {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: auto;
  min-width: 0;
}

.marca-logo {
  height: 54px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.marca-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.marca-hospital {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acento);
  white-space: nowrap;
}

header.app-nav h1 {
  font-size: 19px;
  margin: 0;
  color: var(--dorado-oscuro);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

header.app-nav nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

header.app-nav a {
  text-decoration: none;
  color: var(--texto-suave);
  padding: 9px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.1s, color 0.1s;
}

header.app-nav a:hover {
  background: var(--superficie-alta);
  color: var(--texto);
}

header.app-nav a.activo {
  background: var(--azul-institucional);
  color: #ffffff;
}

header.app-nav a#cerrar-sesion {
  color: var(--texto-suave);
  margin-left: 8px;
  border-left: 1px solid var(--borde);
  padding-left: 20px;
  border-radius: 0;
}

/* --- Pantalla de login: identidad institucional al frente ---
   El fondo son tres capas, de atrás hacia adelante:
     1. el degradado de siempre (si la imagen no carga, queda esto solo)
     2. la imagen institucional (la sube el Administrador, o la de defecto)
     3. un velo claro encima, para que el formulario y sobre todo los
        mensajes de error se lean con total claridad
   El velo va en ::before y no como filtro sobre el body, así el contenido
   nunca se ve desvanecido — solo el fondo. */
body.pantalla-login {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse 900px 500px at 50% -10%, var(--acento-tenue) 0%, var(--fondo) 65%);
}

body.pantalla-login::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(238, 237, 231, 0.82), rgba(238, 237, 231, 0.92)),
    var(--imagen-fondo-login, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* Centrado vertical real: la tarjeta queda siempre a la vista, y si la
   ventana es muy baja, el propio contenedor permite desplazarse sin que
   nada quede cortado fuera de la pantalla. */
.login-centro {
  min-height: 100vh;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}

.login-tarjeta {
  width: 100%;
  max-width: 420px;
  margin: 0;
}

.login-tarjeta label {
  display: block;
  margin-bottom: 6px;
}
.login-tarjeta input {
  margin-bottom: 16px;
}
.login-tarjeta button.grande {
  margin-top: 4px;
}
/* El mensaje de error vive pegado al botón, sin margen extra que lo
   empuje fuera de la pantalla en ventanas bajas. */
#mensaje .aviso {
  margin-top: 14px;
}

.marca-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
}

.marca-login .marca-logo {
  height: 104px;
  max-width: 320px;
  margin-bottom: 6px;
}

.marca-login .marca-hospital {
  font-size: 14px;
}

.marca-login h1 {
  font-size: 20px;
  margin: 0;
  color: var(--dorado-oscuro);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Ventanas bajas (por ejemplo una notebook con la barra de tareas y la
   del navegador): se achica el logo y se ajustan los espacios para que el
   mensaje de error entre en pantalla sin tener que desplazarse. */
@media (max-height: 720px) {
  .marca-login .marca-logo { height: 68px; margin-bottom: 2px; }
  .marca-login { margin-bottom: 14px; }
  .login-tarjeta { padding: 18px; }
  .login-tarjeta input { margin-bottom: 12px; }
  .login-tarjeta button.grande { padding: 14px; font-size: 18px; }
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

main.ancho-completo {
  max-width: 1300px;
}

h2 {
  margin-top: 0;
  font-weight: 700;
  color: var(--dorado-oscuro);
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--acento);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--sombra-tarjeta);
}

label {
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 600;
}

input[type="text"], input[type="search"], input[type="month"], input[type="date"],
input[type="file"], input[type="password"], select {
  font-family: var(--sans);
  font-size: 18px;
  padding: 12px 14px;
  border: 2px solid var(--borde);
  border-radius: 10px;
  width: 100%;
  background: var(--fondo);
  color: var(--texto);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--acento);
}

input::placeholder {
  color: var(--texto-suave);
}

button {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  padding: 13px 22px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: var(--azul-institucional);
  color: #ffffff;
  transition: background 0.1s;
}

button:hover {
  background: var(--azul-profundo);
}

button:disabled {
  background: var(--superficie-alta);
  color: var(--texto-suave);
  cursor: not-allowed;
}

/* Botones secundarios (Exportar, atajos de fecha, Cancelar, etc.): borde y
   texto en dorado oscuro para diferenciarlos de un vistazo de los botones
   azules primarios, sin competir con ellos (no llevan fondo sólido). */
button.secundario {
  background: var(--superficie-alta);
  color: var(--dorado-oscuro);
  border: 1px solid var(--dorado-oscuro);
}

button.secundario:hover {
  background: var(--dorado-tenue);
}

/* Botón nativo de "Seleccionar archivo" (input type=file) — incluye el
   prefijo -webkit- para navegadores que todavía no soportan el estándar
   ::file-selector-button. */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  padding: 8px 14px;
  margin-right: 10px;
  border-radius: 8px;
  border: 1px solid var(--dorado-oscuro);
  background: var(--superficie);
  color: var(--dorado-oscuro);
  cursor: pointer;
}

button.grande {
  width: 100%;
  padding: 18px;
  font-size: 20px;
}

.texto-suave {
  color: var(--texto-suave);
  font-size: 15px;
}

.mono {
  font-family: var(--mono);
}

/* --- Campo de DNI: la entrada principal de todo el sistema --- */
.campo-dni {
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 22px;
  background: var(--fondo);
  border: 3px solid var(--borde);
  border-radius: 16px;
  color: var(--texto);
  width: 100%;
}

.campo-dni:focus {
  outline: none;
  border-color: var(--acento);
}

/* --- Panel de resultado: debe leerse a un metro de distancia --- */
.panel-resultado {
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  margin-top: 20px;
  border: 2px solid var(--borde);
  transition: background 0.15s, border-color 0.15s;
}

.panel-resultado .estado {
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 10px;
  line-height: 1.1;
}

.panel-resultado .nombre {
  font-size: 28px;
  font-weight: 700;
  margin: 6px 0;
}

.panel-resultado .detalle {
  font-size: 18px;
  color: var(--texto-suave);
  margin-top: 8px;
}

.panel-resultado.vacio {
  color: var(--texto-suave);
}
.panel-resultado.vacio .estado {
  color: var(--dorado-oscuro);
}

/* Foto del trabajador: cuando hay ficha con nombre, la foto queda a la
   izquierda y el texto de siempre pasa a alinearse a la izquierda también
   — el tamaño de letra no cambia, sigue leyéndose igual de fuerte a
   distancia, solo cambia dónde arranca el texto. */
.panel-resultado.con-foto {
  display: flex;
  align-items: center;
  gap: 26px;
  text-align: left;
}
.panel-resultado.con-foto .panel-resultado-texto {
  flex: 1;
  min-width: 0;
}

/* object-fit: contain (no "cover"): la foto se ve COMPLETA, respetando su
   proporción real, sin recortar la cara. El marco tiene alto fijo y ancho
   flexible, así una foto vertical y una horizontal ocupan lo que les
   corresponde sin deformarse (especificación v4, sección 2.3). */
.foto-trabajador {
  height: 190px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 14px;
  border: 2px solid var(--azul-institucional);
  background: var(--superficie-alta);
  padding: 6px;
  box-shadow: var(--sombra-tarjeta);
}

@media (max-width: 640px) {
  .panel-resultado.con-foto { flex-direction: column; text-align: center; }
  .foto-trabajador { height: 140px; max-width: 160px; }
}

/* Miniatura de la foto en Configuración → Fotos de trabajadores: mismo
   marco que en Registro, más chica. */
.foto-config {
  height: 120px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  border-radius: 12px;
  border: 2px solid var(--azul-institucional);
  background: var(--superficie-alta);
  padding: 5px;
  flex-shrink: 0;
}

.panel-resultado.autorizado {
  background: var(--exito-fondo);
  border-color: var(--exito);
}
.panel-resultado.autorizado .estado { color: var(--exito); }

.panel-resultado.pendiente {
  background: var(--acento-tenue);
  border-color: var(--acento);
}
.panel-resultado.pendiente .estado { color: var(--acento); }

.panel-resultado.ya-atendido {
  background: var(--advertencia-fondo);
  border-color: var(--advertencia);
}
.panel-resultado.ya-atendido .estado { color: var(--advertencia); }

.panel-resultado.sin-derecho,
.panel-resultado.no-existe {
  background: var(--peligro-fondo);
  border-color: var(--peligro);
}
.panel-resultado.sin-derecho .estado,
.panel-resultado.no-existe .estado { color: var(--peligro); }

.panel-resultado.fuera-de-horario {
  background: var(--neutro-fondo);
  border-color: var(--borde);
}
.panel-resultado.fuera-de-horario .estado { color: var(--texto-suave); }

/* --- Contadores en vivo --- */
.contadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.contador-comida {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  box-shadow: var(--sombra-tarjeta);
}

/* El contador de la comida que se está sirviendo ahora se resalta en
   dorado: es el dato que la encargada mira de reojo todo el tiempo. El
   borde/sombra usan el dorado puro (no es texto, no necesita el mínimo
   de contraste); el número SÍ es texto, por eso usa la versión oscura. */
.contador-comida.activa {
  border-color: var(--dorado);
  box-shadow: 0 0 0 1px var(--dorado) inset;
}
.contador-comida.activa .numero { color: var(--dorado-oscuro); }

/* Para números "totales" destacados fuera de Registro (por ejemplo el
   total combinado en Reportes) — no se usa en los estados de Registro
   (autorizado/rechazado/etc.), esos se quedan en verde/ámbar/rojo. */
.contador-comida.destacado .numero { color: var(--dorado-oscuro); }

/* Cuántas raciones quedan del límite del día (v5, sección 2.5). Cambia de
   color al acercarse a cero y al pasar a negativo. */
.contador-comida .disponibles {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
}
.contador-comida .disponibles.por-agotarse { color: var(--advertencia); }
.contador-comida .disponibles.superado { color: var(--peligro); }

/* Barra de "deshacer": aparece unos segundos después de cada registro */
.barra-deshacer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 18px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
  font-size: 16px;
}

.contadores-total {
  opacity: 0.7;
}
.contadores-total .contador-comida {
  padding: 12px;
}
.contadores-total .numero {
  font-size: 24px;
}

select.selector-local {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  padding: 8px 12px;
  border: 2px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--acento);
}

.contador-comida .etiqueta {
  color: var(--texto-suave);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.contador-comida .numero {
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 800;
  margin-top: 4px;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.badge-acento { background: var(--acento-tenue); color: var(--acento); }
.badge-dorado { background: var(--dorado-tenue); color: var(--dorado-oscuro); }

.aviso {
  padding: 16px;
  border-radius: 10px;
  font-weight: 600;
  margin-top: 16px;
}
.aviso-exito { background: var(--exito-fondo); color: var(--exito); border: 1px solid var(--exito); }
.aviso-advertencia { background: var(--advertencia-fondo); color: var(--advertencia); border: 1px solid var(--advertencia); }
.aviso-error { background: var(--peligro-fondo); color: var(--peligro); border: 1px solid var(--peligro); }

.resultado-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}
.resultado-item:hover { border-color: var(--acento); }
.resultado-item .nombre-item { font-weight: 700; }
.resultado-item .dni-item { color: var(--texto-suave); font-size: 14px; font-family: var(--mono); }

table.tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 15px;
}
table.tabla th, table.tabla td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
}
table.tabla th {
  color: var(--texto-suave);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
table.tabla td.mono { font-family: var(--mono); }

.fila-form {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fila-form > * { flex: 1; min-width: 140px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* --- Módulo Actividad: identidad visual propia (v4, sección 1.5) ---
   Un encargado nunca debe dudar de en qué sistema está trabajando. El
   comedor usa azul institucional; la actividad usa el dorado/mostaza
   institucional como color de acento, más una banda fija arriba con el
   nombre del evento y el local. Es el mismo par de colores del hospital,
   con los roles invertidos: se distingue de un vistazo sin salirse de la
   identidad. */
.banda-actividad {
  background: var(--dorado-oscuro);
  color: #ffffff;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 16px;
  position: sticky;
  top: 0;
  z-index: 9;
}

.banda-actividad .banda-etiqueta {
  background: rgba(255, 255, 255, 0.22);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.banda-actividad .banda-local {
  margin-left: auto;
  font-weight: 600;
  font-size: 15px;
  opacity: 0.95;
}

/* En modo actividad, la pestaña activa del menú y el foco de los campos
   también toman el dorado, para que el cambio de sistema sea evidente. */
body.modo-actividad header.app-nav {
  border-top-color: var(--dorado-oscuro);
}
body.modo-actividad header.app-nav a.activo {
  background: var(--dorado-oscuro);
}
body.modo-actividad .tarjeta {
  border-top-color: var(--dorado-oscuro);
}
body.modo-actividad .campo-dni:focus,
body.modo-actividad input:focus,
body.modo-actividad select:focus {
  border-color: var(--dorado-oscuro);
}
body.modo-actividad button {
  background: var(--dorado-oscuro);
}
body.modo-actividad button:hover {
  background: #6b5404;
}
body.modo-actividad button.secundario {
  background: var(--superficie-alta);
  color: var(--dorado-oscuro);
  border-color: var(--dorado-oscuro);
}

/* Cuando no hay actividad, la banda se apaga: nada que registrar. */
body.sin-actividad .banda-actividad {
  background: var(--texto-suave);
}

/* --- Configuración: menú lateral (Bloque 6) --- */
.config-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.config-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 230px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
}

.config-menu-item {
  text-align: left;
  background: none;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.config-menu-item:hover {
  background: var(--superficie-alta);
  color: var(--texto);
}

.config-menu-item.activo {
  background: var(--azul-institucional);
  color: #ffffff;
}

.config-contenido {
  flex: 1;
  min-width: 0;
}

@media (max-width: 800px) {
  .config-layout { flex-direction: column; }
  .config-menu {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .panel-resultado .estado { font-size: 32px; }
  .campo-dni { font-size: 30px; }
}