/* Sistema visual compartido — plataforma gastronómica unificada EFES.
   Rediseño neutro (2026-09-28, pedido de Julio): sidebar grafito/negro a
   tono con el isotipo real ("efes [ MANAGEMENT GROUP ]", ver /img/logo-efes.png),
   fondo casi blanco, tarjetas blancas, acento bronce/dorado discreto en vez
   del lima anterior. Se conservan los NOMBRES de variable de siempre
   (--efes-lime, --efes-sidebar-bg, etc.) y solo cambian los valores, para no
   tener que tocar cada sitio que ya las usa -- mismo patrón que el rediseño
   de Etapa 3 anterior (ver HANDOFF_CODEX.md).
   Rojo/ámbar/verde reservados para estados operativos: no se tocan, son
   información funcional de cumplimiento HACCP, no decoración de marca. */

:root {
  --efes-sidebar-bg: #161616;
  --efes-sidebar-bg-active: rgba(255, 255, 255, 0.08);
  --efes-sidebar-text: #d4d4d6;
  --efes-sidebar-text-muted: #8c8c90;
  --efes-sidebar-text-active: #ffffff;

  --efes-page-bg: #f7f7f6;
  --efes-surface: #ffffff;
  --efes-surface-2: #f4f4f3;
  --efes-border: rgba(24, 24, 27, 0.08);
  --efes-border-strong: rgba(24, 24, 27, 0.16);

  --efes-text: #18181b;
  --efes-text-muted: #68686d;

  /* "lime" es el nombre histórico de la variable -- el valor real hoy es el
     acento bronce/dorado elegido para el rediseño neutro. */
  --efes-lime: #b58a4a;
  --efes-lime-ink: #211705;
  --efes-lime-wash: #f5ecd8;
  --efes-lime-deep: #8a6423;

  --efes-good: #1f8a4c;
  --efes-good-bg: #e4f3e6;
  --efes-warning: #c9930f;
  --efes-warning-bg: #faf0d6;
  --efes-critical: #c0392b;
  --efes-critical-bg: #f9e4e1;

  --efes-radius: 14px;
  --efes-radius-sm: 9px;
  --efes-shadow: 0 1px 2px rgba(24, 24, 27, 0.05), 0 10px 28px -18px rgba(24, 24, 27, 0.28);

  --efes-font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --efes-font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  font-family: var(--efes-font-sans);
}

* { box-sizing: border-box; }

body.efes-shell {
  margin: 0;
  background: var(--efes-page-bg);
  color: var(--efes-text);
  min-height: 100vh;
}

/* ---------- layout: sidebar + content ---------- */
.efes-app {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.efes-sidebar {
  width: 248px;
  flex: none;
  background: var(--efes-sidebar-bg);
  color: var(--efes-sidebar-text);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Modo colapsado: solo aplica en desktop (ver override que lo neutraliza
   bajo 900px -- el estado guardado en localStorage no debe "colapsar" el
   menú mobile, que usa su propio mecanismo de apertura/cierre). La barra
   queda de solo íconos -- ver efes-collapse-toggle. Estado recordado por
   local en localStorage, se pinta en cada renderNav (multi-página, sin
   router). */
@media (min-width: 901px) {
  .efes-sidebar.is-collapsed { width: 76px; padding-left: 14px; padding-right: 14px; }
  .efes-sidebar.is-collapsed .efes-brand-text,
  .efes-sidebar.is-collapsed .efes-tab-label,
  .efes-sidebar.is-collapsed .efes-session-badge,
  .efes-sidebar.is-collapsed .efes-logout-btn .efes-tab-label {
    display: none;
  }
  .efes-sidebar.is-collapsed a.efes-tab { justify-content: center; padding: 10px; }
  .efes-sidebar.is-collapsed .efes-sidebar-footer { align-items: center; }
  .efes-sidebar.is-collapsed .efes-logout-btn { padding: 8px; }
  .efes-sidebar.is-collapsed .efes-collapse-icon { transform: rotate(180deg); }
}

.efes-mobile-head { display: contents; }

.efes-nav-panel {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 22px;
}

.efes-nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-radius: var(--efes-radius-sm);
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.efes-nav-toggle-icon,
.efes-nav-toggle-icon::before,
.efes-nav-toggle-icon::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.efes-nav-toggle-icon { position: relative; }
.efes-nav-toggle-icon::before,
.efes-nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
.efes-nav-toggle-icon::before { top: -5px; }
.efes-nav-toggle-icon::after { top: 5px; }

.efes-nav-panel-close { display: none; }

/* Botón para colapsar/expandir el sidebar a solo íconos -- solo desktop, ver
   media query de abajo donde se oculta en mobile (el hamburguesa ya cubre
   ese caso). */
.efes-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--efes-sidebar-text-muted);
  border-radius: var(--efes-radius-sm);
  padding: 9px 7px;
  cursor: pointer;
  flex: none;
  margin-top: 14px;
}
.efes-collapse-toggle:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.efes-collapse-icon { width: 16px; height: 16px; display: block; transition: transform 0.2s ease; }
.efes-collapse-icon svg { width: 100%; height: 100%; }

.efes-sidebar .efes-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
}
.efes-sidebar .efes-brand-mark {
  /* El isotipo real ("efes") es un círculo negro sobre fondo transparente --
     se le da un respaldo blanco propio para que siga leyéndose sobre el
     sidebar grafito oscuro (negro sobre #161616 casi no se distingue). */
  width: 38px; height: 38px; border-radius: 50%;
  background: #ffffff;
  display: block; flex: none;
  object-fit: contain;
  padding: 1px;
}
.efes-sidebar .efes-brand-text h1 {
  margin: 0; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em;
}
.efes-sidebar .efes-brand-text .sub {
  font-size: 11.5px; color: var(--efes-sidebar-text-muted); margin-top: 1px;
}

.efes-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.efes-sidebar a.efes-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--efes-radius-sm);
  text-decoration: none;
  color: var(--efes-sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.efes-sidebar a.efes-tab:hover { background: rgba(255, 255, 255, 0.05); }
.efes-sidebar a.efes-tab.active {
  background: var(--efes-sidebar-bg-active);
  color: var(--efes-sidebar-text-active);
  font-weight: 700;
}
.efes-sidebar a.efes-tab[hidden] { display: none; }

.efes-tab-icon { width: 18px; height: 18px; flex: none; display: block; }
.efes-tab-icon svg { width: 100%; height: 100%; }
.efes-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.efes-sidebar .efes-sidebar-footer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.efes-session-badge {
  font-size: 12.5px;
  color: var(--efes-sidebar-text);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.efes-session-badge.admin {
  background: var(--efes-lime-wash);
  color: var(--efes-lime-ink);
  border-color: transparent;
  font-weight: 700;
}

.efes-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--efes-sidebar-text);
  border-radius: var(--efes-radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.efes-logout-btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.efes-logout-btn .efes-tab-icon { width: 15px; height: 15px; }

/* Scrim detrás del panel mobile deslizable -- ver efes-nav-scrim en nav.js.
   Oculto por completo en desktop; el media query de abajo lo activa. */
.efes-nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(24, 24, 27, 0.45);
  z-index: 39;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Barra superior legacy: se mantiene disponible por compatibilidad, oculta por defecto una vez migrado a sidebar. */
.efes-topnav { display: none; }

/*
 * Los módulos heredados conservan su badge de sesión y botón "Salir" para
 * funcionar fuera del shell unificado. Dentro de EFES Control, el sidebar ya
 * ofrece ambos controles; ocultamos la copia para evitar dos salidas visibles.
 */
.efes-content-flex .session-badge { display: none !important; }

main.efes-main {
  flex: 1;
  min-width: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 32px 60px;
}

/* Contenedor flexible sin padding propio, para módulos que ya centran su propio contenido (.wrap) */
.efes-content-flex {
  flex: 1;
  min-width: 0;
}

.efes-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--efes-good);
}

.efes-title-editorial {
  font-family: var(--efes-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  margin: 4px 0 0;
  padding-bottom: 15px;
  color: var(--efes-text);
  letter-spacing: -0.01em;
  position: relative;
}
.efes-title-editorial::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: var(--efes-lime);
}
.efes-title-editorial + .efes-subtitle { margin-top: 8px; }

.efes-subtitle {
  color: var(--efes-text-muted);
  font-size: 14.5px;
  margin: 0 0 4px;
  max-width: 640px;
}

/* ---------- login ---------- */
.efes-login-box {
  max-width: 380px;
  margin: 10vh auto;
  background: var(--efes-surface);
  border: 1px solid var(--efes-border);
  border-radius: var(--efes-radius);
  box-shadow: var(--efes-shadow);
  padding: 28px;
}
.efes-login-box h1 {
  font-family: var(--efes-font-serif);
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 6px;
}
.efes-login-box p.lede { color: var(--efes-text-muted); font-size: 14px; margin: 0 0 20px; }
.efes-field { margin-bottom: 14px; }
.efes-field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--efes-text-muted); }
.efes-field select,
.efes-field input {
  width: 100%;
  /* 16px explícito (no 14px) evita el zoom automático de Safari iOS al
     enfocar el campo -- mismo motivo que ya se aplica en carga-directa.css.
     min-height 44px: blanco táctil mínimo recomendado para dedo. */
  min-height: 44px;
  padding: 12px;
  border-radius: var(--efes-radius-sm);
  border: 1px solid var(--efes-border-strong);
  background: var(--efes-surface-2);
  color: var(--efes-text);
  font-size: 16px;
  font-family: var(--efes-font-sans);
  box-sizing: border-box;
}
.efes-field-icon-wrap { position: relative; }
.efes-field-icon-wrap .efes-field-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--efes-text-muted); pointer-events: none;
}
.efes-field-icon-wrap input { padding-left: 36px; }
.efes-login-hint { font-size: 12px; color: var(--efes-text-muted); margin-top: 14px; line-height: 1.5; }
.efes-error { color: var(--efes-critical); font-size: 13px; margin: 8px 0 0; display: none; }
.efes-error.show { display: block; }

.efes-btn-primary {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border-radius: var(--efes-radius-sm);
  border: none;
  background: var(--efes-lime);
  color: var(--efes-lime-ink);
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  box-sizing: border-box;
}
.efes-btn-primary:hover { filter: brightness(0.96); }

/* ---------- filter bar ---------- */
.efes-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  background: var(--efes-surface);
  border: 1px solid var(--efes-border);
  border-radius: var(--efes-radius);
  box-shadow: var(--efes-shadow);
  padding: 16px 20px;
  margin-top: 22px;
}
.efes-filterbar .efes-filter-item { display: flex; flex-direction: column; gap: 5px; }
.efes-filterbar label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--efes-text-muted); font-weight: 700;
}
.efes-filterbar .efes-filter-value {
  font-size: 14px; font-weight: 600; color: var(--efes-text);
}
.efes-filterbar .efes-filter-highlight {
  margin-left: auto; text-align: right; padding-left: 18px; border-left: 1px solid var(--efes-border);
}
.efes-filterbar .efes-filter-highlight b { font-family: var(--efes-font-serif); font-size: 24px; font-weight: 400; display:block; }
.efes-filterbar .efes-filter-highlight span { font-size: 11.5px; color: var(--efes-text-muted); }

/* ---------- stat cards / module grid ---------- */
.efes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.efes-card {
  background: var(--efes-surface);
  border: 1px solid var(--efes-border);
  border-radius: var(--efes-radius);
  box-shadow: var(--efes-shadow);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--efes-text);
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.efes-card:hover { border-color: var(--efes-lime-deep); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(24, 24, 27, 0.28), var(--efes-shadow); }
.efes-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.efes-card p { margin: 0 0 14px; font-size: 13px; color: var(--efes-text-muted); }
.efes-card .efes-stat-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--efes-text-muted); font-weight: 700; margin-bottom: 2px;
}
.efes-card .efes-stat-number {
  font-family: var(--efes-font-serif);
  font-size: 30px; font-weight: 400; color: var(--efes-text); line-height: 1.15;
}
.efes-card .efes-stat-sub { font-size: 12px; color: var(--efes-text-muted); margin-top: 2px; }

.efes-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.efes-pill.good { background: var(--efes-good-bg); color: var(--efes-good); }
.efes-pill.warning { background: var(--efes-warning-bg); color: var(--efes-warning); }
.efes-pill.critical { background: var(--efes-critical-bg); color: var(--efes-critical); }
.efes-pill.sin-datos { background: var(--efes-surface-2); color: var(--efes-text-muted); }

.efes-section-card {
  background: var(--efes-surface);
  border: 1px solid var(--efes-border);
  border-radius: var(--efes-radius);
  box-shadow: var(--efes-shadow);
  padding: 20px 22px;
  margin-top: 20px;
}
.efes-section-card h3 {
  margin: 0 0 2px; font-size: 15px; font-weight: 700;
  position: relative; padding-left: 15px;
}
.efes-section-card h3::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--efes-lime);
}
.efes-section-card .efes-section-desc {
  font-size: 12.5px; color: var(--efes-text-muted); margin: 0 0 14px;
}

.efes-list-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--efes-border);
  font-size: 13.5px;
}
.efes-list-row:last-child { border-bottom: none; }
.efes-list-row .efes-bar-track {
  flex: 1; height: 8px; border-radius: 999px; background: var(--efes-surface-2); overflow: hidden;
}
.efes-list-row .efes-bar-fill { height: 100%; border-radius: 999px; }

@media (max-width: 900px) {
  .efes-app { flex-direction: column; width: 100%; max-width: 100%; min-width: 0; }
  .efes-sidebar {
    width: 100%; max-width: 100%; height: auto; position: relative; flex-direction: column;
    flex-wrap: nowrap; align-items: stretch; padding: 12px 14px; gap: 10px; overflow: visible;
  }
  .efes-mobile-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0;
  }
  .efes-sidebar .efes-brand { min-width: 0; padding: 0; }
  .efes-sidebar .efes-brand-text { min-width: 0; }
  .efes-nav-toggle { display: inline-flex; flex: none; }
  .efes-collapse-toggle { display: none; }

  /* El panel de navegación se convierte en un sheet que se desliza desde la
     izquierda (mismo lenguaje que la referencia "Animated Sidebar" elegida),
     con scrim detrás -- en vez del acordeón en grilla que había antes. */
  .efes-nav-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(82vw, 300px);
    background: var(--efes-sidebar-bg);
    padding: 18px 16px 16px;
    gap: 14px;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    z-index: 40;
    overflow-y: auto;
    box-shadow: 10px 0 32px rgba(0, 0, 0, 0.25);
  }
  .efes-sidebar.is-open .efes-nav-panel { transform: translateX(0); }
  .efes-nav-panel-close {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
    background: transparent; color: #fff; cursor: pointer; flex: none;
  }
  .efes-nav-panel-close svg { width: 15px; height: 15px; }
  .efes-nav-scrim { display: block; pointer-events: none; }
  .efes-nav-scrim.is-visible { opacity: 1; pointer-events: auto; }
  .efes-sidebar nav {
    display: flex; flex-direction: column; width: 100%; gap: 2px;
  }
  .efes-sidebar a.efes-tab {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 10px 12px; font-size: 13.5px;
  }
  .efes-sidebar .efes-sidebar-footer {
    margin-top: auto; flex-direction: column; align-items: stretch; border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
  }
  .efes-sidebar .efes-session-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .efes-sidebar .efes-logout-btn { flex: none; }
  main.efes-main {
    flex: none; width: 100%; max-width: 100%; min-width: 0;
    padding: 20px 16px 40px; overflow-x: hidden;
  }
  .efes-section-card { min-width: 0; max-width: 100%; }
  .efes-title-editorial { font-size: 30px; }
  .efes-login-box { margin: 6vh 16px; padding: 22px; }
  .efes-filterbar .efes-filter-highlight { margin-left: 0; padding-left: 0; border-left: none; text-align: left; }
}

@media (max-width: 520px) {
  .efes-sidebar .efes-brand-text .sub { display: none; }
}