/* ============================================================================
 * imss.css — Tema institucional IMSS-Bienestar para el Sistema de Comedor
 *
 * Modo claro. Fondos blancos y grises muy claros, verde institucional en la
 * cabecera y los botones principales, guinda y dorado/arena como acentos, y
 * texto oscuro para que se lea rápido en el comedor.
 *
 * ── De dónde salen los colores ─────────────────────────────────────────────
 * El verde y el dorado NO están inventados: se muestrearon pixel por pixel del
 * logo oficial "IMSS BIENESTAR · Servicios Públicos de Salud". El guinda es el
 * institucional del Gobierno de México.
 *
 * ── Contraste (WCAG AA, medido) ────────────────────────────────────────────
 *   verde  #106858 sobre blanco → 6.68:1  ✓ AA   (texto y botones)
 *   guinda #9F2241 sobre blanco → 7.56:1  ✓ AA   (alertas, destructivo)
 *   tinta  #1A1A1A sobre blanco → 17.4:1  ✓ AAA  (texto principal)
 *   gris   #5A6360 sobre blanco → 6.20:1  ✓ AA   (texto secundario)
 *   dorado #C09870 sobre blanco → 2.64:1  ✗ INSUFICIENTE
 *
 * ⚠ Por eso el dorado se usa SOLO en bordes, franjas y fondos — nunca como
 *   color de texto. Cuando hace falta texto dorado existe --dorado-texto
 *   (#8A6A3E, 4.99:1), que es el mismo tono oscurecido hasta cumplir AA.
 * ========================================================================== */

:root {
  /* Institucionales */
  --verde:        #106858;
  --verde-osc:    #0B4A3E;
  --verde-hover:  #15806C;
  --verde-tenue:  #E6F1EE;
  --verde-borde:  #BEDBD4;

  --guinda:       #9F2241;
  --guinda-osc:   #7D1A33;
  --guinda-tenue: #FBEAEE;

  --dorado:       #C09870;   /* solo bordes y fondos */
  --dorado-texto: #8A6A3E;   /* versión legible para texto */
  --arena:        #F5EFE4;

  /* Neutros */
  --tinta:        #1A1A1A;
  --gris-texto:   #5A6360;
  --gris-suave:   #8A928F;
  --linea:        #DFE5E3;
  --linea-fuerte: #C4CECB;
  --fondo:        #F5F7F6;
  --blanco:       #FFFFFF;

  /* Estados */
  --exito:        #1B7A45;
  --exito-tenue:  #E7F4EC;
  --aviso:        #9A6600;
  --aviso-tenue:  #FDF4E3;
  --error:        #9F2241;
  --error-tenue:  #FBEAEE;

  --sombra:       0 1px 2px rgba(16,104,88,.06), 0 2px 8px rgba(16,104,88,.05);
  --sombra-alta:  0 8px 28px rgba(16,40,35,.14);
  --radio:        10px;

  /* Altura de la barra superior = 10 (arriba) + 64 (logo) + 10 (abajo) + 3 (borde).
     Va en una variable porque el menú se pega justo debajo: si se cambia el
     tamaño del logo y esto no, el menú tapa la cabecera o deja un hueco. */
  --alto-cabecera: 87px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════════════
 * CABECERA INSTITUCIONAL
 * Los logos van arriba a la izquierda, sobre banda blanca: los manuales de
 * identidad piden fondo claro, y además así se leen mejor que sobre el verde.
 * ══════════════════════════════════════════════════════════════════════════ */
.barra-institucional {
  background: var(--blanco);
  border-bottom: 3px solid var(--verde);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky; top: 0; z-index: 30;
}

/* El PNG está recortado al arte (172×108). El original venía en un lienzo de
   256×256 donde el logotipo ocupaba apenas el 25%: por eso antes se veía chico
   por más que se subiera la altura de la caja. Con el recorte, la altura que se
   pone aquí es la que realmente se ve. */
.logos { display: flex; align-items: center; flex-shrink: 0; }
.logos img { display: block; width: auto; }
.logos .logo-hospital { height: 64px; }

/* El título se deja encoger y recortar antes que desaparecer: en una laptop
   angosta sigue siendo útil saber en qué sistema se está parado. */
.barra-institucional .titulo { min-width: 0; overflow: hidden; }
.barra-institucional .titulo h1 {
  font-size: 16px; font-weight: 700; color: var(--verde-osc);
  letter-spacing: -.01em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-institucional .titulo p {
  font-size: 12px; color: var(--gris-texto); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-institucional .empuje { flex: 1; }

.sesion { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sesion .datos { text-align: right; line-height: 1.25; }
.sesion .datos .nombre { font-size: 13px; font-weight: 600; }
.sesion .datos .rol { font-size: 11px; color: var(--gris-texto); }
.sesion .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--verde); color: var(--blanco);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}

/* Franja dorada delgada: detalle institucional bajo la cabecera. */
.franja-dorada { height: 3px; background: linear-gradient(90deg, var(--dorado), var(--arena)); }

/* ══════════════════════════════════════════════════════════════════════════
 * NAVEGACIÓN
 * ══════════════════════════════════════════════════════════════════════════ */
.menu {
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  padding: 0 24px;
  display: flex; gap: 2px;
  position: sticky; top: var(--alto-cabecera); z-index: 29;
  overflow-x: auto;
}
.menu::-webkit-scrollbar { height: 0; }
.menu button {
  background: none; border: 0;
  border-bottom: 3px solid transparent;
  padding: 12px 16px;
  font: 500 14px/1 inherit;
  color: var(--gris-texto);
  cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.menu button:hover { color: var(--verde); }
.menu button[aria-selected="true"] {
  color: var(--verde); border-bottom-color: var(--verde); font-weight: 700;
}

.contenido { max-width: 1280px; margin: 0 auto; padding: 22px 24px 64px; }
section[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
 * TARJETAS
 * ══════════════════════════════════════════════════════════════════════════ */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--sombra);
}
.tarjeta > h2 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--verde);
  display: flex; align-items: center; gap: 8px;
}
.tarjeta > h2::before {
  content: ''; width: 3px; height: 14px;
  background: var(--dorado); border-radius: 2px;
}
.tarjeta > h2 + p { color: var(--gris-texto); font-size: 13px; margin: 6px 0 16px; }
.tarjeta > h2:only-child, .tarjeta > h2:last-child { margin-bottom: 0; }
.tarjeta > h2 + * { margin-top: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
 * KPIs
 * ══════════════════════════════════════════════════════════════════════════ */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.kpi {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
}
.kpi.guinda { border-left-color: var(--guinda); }
.kpi.dorada { border-left-color: var(--dorado); }
.kpi .etiqueta {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gris-texto); font-weight: 600;
}
.kpi .valor {
  font-size: 32px; font-weight: 700; line-height: 1.1; margin-top: 6px;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.kpi .pie { font-size: 12px; color: var(--gris-texto); margin-top: 4px; }
.kpi .delta { font-weight: 700; }
.kpi .delta.sube { color: var(--exito); }
.kpi .delta.baja { color: var(--guinda); }

/* ══════════════════════════════════════════════════════════════════════════
 * BOTONES
 * ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--verde); color: var(--blanco);
  border: 1px solid transparent; border-radius: 7px;
  padding: 9px 16px;
  font: 600 14px/1.2 inherit;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  text-decoration: none;
}
.btn:hover { background: var(--verde-hover); }
.btn:focus-visible { outline: 3px solid var(--verde-borde); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.secundario {
  background: var(--blanco); color: var(--verde-osc);
  border-color: var(--linea-fuerte); font-weight: 500;
}
.btn.secundario:hover { background: var(--verde-tenue); border-color: var(--verde-borde); }

.btn.guinda { background: var(--guinda); }
.btn.guinda:hover { background: var(--guinda-osc); }

.btn.arena {
  background: var(--arena); color: var(--dorado-texto);
  border-color: var(--dorado); font-weight: 600;
}
.btn.arena:hover { filter: brightness(.97); }

.btn.chico { padding: 5px 11px; font-size: 12.5px; border-radius: 6px; }
.btn.ancho { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
 * FORMULARIOS
 * ══════════════════════════════════════════════════════════════════════════ */
.fila { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.fila .empuje { flex: 1; }
.campo { display: flex; flex-direction: column; min-width: 0; }
label { font-size: 12px; font-weight: 600; color: var(--gris-texto); margin-bottom: 5px; }

input, select, textarea {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 7px;
  background: var(--blanco); color: var(--tinta);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-tenue);
}
input[type=number] { width: 120px; }
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--verde); cursor: pointer; }
input:disabled, select:disabled { background: var(--fondo); color: var(--gris-suave); }

/* ══════════════════════════════════════════════════════════════════════════
 * TABLAS
 * ══════════════════════════════════════════════════════════════════════════ */
.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--verde-osc); background: var(--verde-tenue);
  position: sticky; top: 0;
}
tbody tr:hover { background: var(--fondo); }
tbody tr:last-child td { border-bottom: 0; }
td.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: .02em; }
.vacio { color: var(--gris-suave); font-style: italic; padding: 22px 12px; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
 * ETIQUETAS Y AVISOS
 * ══════════════════════════════════════════════════════════════════════════ */
.etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  background: var(--fondo); color: var(--gris-texto);
  border: 1px solid var(--linea);
}
.etiqueta.verde  { background: var(--exito-tenue);  color: var(--exito);        border-color: #BFE3CC; }
.etiqueta.guinda { background: var(--guinda-tenue); color: var(--guinda);       border-color: #F0C9D2; }
.etiqueta.dorada { background: var(--arena);        color: var(--dorado-texto); border-color: var(--dorado); }

.aviso {
  border-left: 4px solid var(--verde);
  background: var(--verde-tenue);
  padding: 13px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  margin-bottom: 16px;
}
.aviso.exito  { border-color: var(--exito);  background: var(--exito-tenue); }
.aviso.alerta { border-color: var(--dorado); background: var(--aviso-tenue); }
.aviso.error  { border-color: var(--guinda); background: var(--guinda-tenue); }
.aviso strong { font-weight: 700; }

/* Notificación flotante */
.notificacion {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  max-width: 430px; padding: 14px 18px;
  background: var(--blanco);
  border-left: 4px solid var(--verde);
  border-radius: 8px;
  box-shadow: var(--sombra-alta);
  font-size: 14px;
  animation: entra .22s ease-out;
}
.notificacion.exito  { border-left-color: var(--exito); }
.notificacion.alerta { border-left-color: var(--dorado); }
.notificacion.error  { border-left-color: var(--guinda); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

/* ══════════════════════════════════════════════════════════════════════════
 * BARRAS DE DATOS (para reportes sin librerías de gráficas)
 * ══════════════════════════════════════════════════════════════════════════ */
.barra {
  background: var(--fondo); border-radius: 5px; height: 22px;
  position: relative; min-width: 60px; overflow: hidden;
}
.barra > i { display: block; height: 100%; background: var(--verde); border-radius: 5px; }
.barra > i.guinda { background: var(--guinda); }
.barra > i.dorada { background: var(--dorado); }
.barra > span {
  position: absolute; right: 8px; top: 0; line-height: 22px;
  font-size: 12px; font-weight: 600; color: var(--tinta);
}

/* Mini gráfica de tendencia con columnas */
.tendencia { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.tendencia .col {
  flex: 1; background: var(--verde-borde); border-radius: 3px 3px 0 0;
  min-height: 2px; position: relative; transition: background .15s;
}
.tendencia .col:hover { background: var(--verde); }
.tendencia .col.hoy { background: var(--verde); }

/* ══════════════════════════════════════════════════════════════════════════
 * DIÁLOGOS
 * ══════════════════════════════════════════════════════════════════════════ */
dialog {
  border: 0; border-radius: 12px; padding: 0;
  max-width: 680px; width: 94%;
  box-shadow: var(--sombra-alta);
  color: var(--tinta);
}
dialog::backdrop { background: rgba(11,74,62,.45); }
dialog .cabecera {
  padding: 16px 22px; border-bottom: 1px solid var(--linea);
  font-weight: 700; color: var(--verde-osc);
  border-top: 4px solid var(--verde); border-radius: 12px 12px 0 0;
}
dialog .cuerpo { padding: 22px; max-height: 68vh; overflow-y: auto; }
dialog .pie {
  padding: 14px 22px; border-top: 1px solid var(--linea);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--fondo); border-radius: 0 0 12px 12px;
}
.rejilla2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.rejilla2 .ancho { grid-column: 1 / -1; }

/* ══════════════════════════════════════════════════════════════════════════
 * PANTALLA DE ACCESO
 * ══════════════════════════════════════════════════════════════════════════ */
.acceso {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(150deg, var(--verde-tenue), var(--fondo) 55%, var(--arena));
}
.acceso .caja {
  background: var(--blanco);
  border-radius: 14px;
  box-shadow: var(--sombra-alta);
  width: 100%; max-width: 420px;
  overflow: hidden;
}
.acceso .encabezado {
  padding: 26px 30px 20px;
  border-bottom: 1px solid var(--linea);
  text-align: center;
}
.acceso .encabezado .logos { justify-content: center; margin-bottom: 16px; }
.acceso .encabezado h1 { font-size: 19px; color: var(--verde-osc); }
.acceso .encabezado p { font-size: 13px; color: var(--gris-texto); margin-top: 4px; }
.acceso .formulario { padding: 24px 30px 28px; }
.acceso label { display: block; margin-bottom: 5px; }
.acceso input { width: 100%; margin-bottom: 16px; }
.acceso .btn { margin-top: 6px; }
.acceso .mensaje { min-height: 22px; font-size: 13.5px; margin-top: 14px; text-align: center; }
.acceso .mensaje.error { color: var(--guinda); font-weight: 600; }
.acceso .pie-legal {
  background: var(--fondo); padding: 12px 30px;
  font-size: 11.5px; color: var(--gris-suave); text-align: center;
  border-top: 1px solid var(--linea);
}

/* ══════════════════════════════════════════════════════════════════════════
 * CRÉDITO
 * Discreto a propósito: informa quién lo hizo sin competir con el contenido.
 * ══════════════════════════════════════════════════════════════════════════ */
.credito {
  text-align: center;
  font-size: 11.5px;
  color: var(--gris-suave);
  padding: 22px 16px 8px;
  letter-spacing: .02em;
}
.credito strong { font-weight: 600; color: var(--gris-texto); }

.oculto { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
 * RESPONSIVO
 * ══════════════════════════════════════════════════════════════════════════ */
/* Primero se sacrifican los datos de la sesión y el subtítulo; el título del
   sistema y los logos aguantan hasta pantallas realmente chicas. */
@media (max-width: 900px) {
  .sesion .datos { display: none; }
  .barra-institucional .titulo p { display: none; }
}

@media (max-width: 620px) {
  /* 8 + 46 + 8 + 3 = 65 */
  :root { --alto-cabecera: 65px; }
  .barra-institucional { padding: 8px 14px; gap: 12px; }
  .barra-institucional .titulo { display: none; }
  .logos .logo-hospital { height: 46px; }
  .menu { padding: 0 14px; }
  .contenido { padding: 16px 14px 48px; }
  .rejilla2 { grid-template-columns: 1fr; }
}

@media print {
  .barra-institucional, .menu, .no-imprimir, .franja-dorada { display: none !important; }
  body { background: #fff; }
  .tarjeta { border: 0; box-shadow: none; padding: 0; margin-bottom: 12px; }
  .contenido { max-width: none; padding: 0; }
  @page { margin: 12mm; }
}