/* ============================================================
   SARJOS · Rediseño (capa superior, cargada al final)
   - Riel de navegación verde + appbar
   - Tipografías Space Grotesk / Inter / Space Mono
   - Eleva tarjetas, KPIs, barras y tablas SIN renombrar clases
   ============================================================ */

:root{
  --rail:#163D26;
  --rail-2:#0F2A1A;
  --rail-w:264px;
  --appbar-h:64px;
  --lima:#71A136;
  --oro:#F3C814;
  --tinta:#2A1B0B;
  --linea-soft:#EFE7D3;
  --display:"Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body-font:"Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, "Cascadia Mono", monospace;
  --shadow:0 1px 2px rgba(22,61,38,.06), 0 10px 26px -14px rgba(22,61,38,.20);
}

/* ---------- Base tipográfica ---------- */
body{
  font-family:var(--body-font);
  color:var(--tinta);
  background:
    radial-gradient(1100px 560px at 80% -12%, #FBF8EF 0%, transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%, var(--crema-light) 100%) fixed;
}
h1,h2,h3,h4,.title,.seccion-tit,.tit{ font-family:var(--display); }
.num,.kpi .n,.bar-val,.barra-total .info b,.cli-compra{ font-family:var(--mono); font-feature-settings:"tnum" 1; letter-spacing:-.02em; }

/* Cifras de dinero/stock en mono también dentro de tablas y productos */
.prod .precio, .modal-precio{ font-family:var(--mono); letter-spacing:-.02em; }

/* ---------- Ocultar navegación vieja (topbar por pantalla + botón flotante) ---------- */
.content .topbar, body.shell-on .topbar{ display:none !important; }
#btnHome{ display:none !important; }

/* ============================================================
   RIEL DE NAVEGACIÓN
   ============================================================ */
.rail{ display:none; }
.appbar{ display:none; }

body.shell-on .rail{
  display:flex; flex-direction:column; gap:5px;
  position:fixed; left:0; top:0; bottom:0; width:var(--rail-w); z-index:40;
  background:linear-gradient(180deg,var(--rail) 0%, var(--rail-2) 100%);
  color:#D9E6DC; overflow-y:auto;
  /* El padding respeta la zona segura: la cabecera (marca + ✕) baja bajo la barra de
     estado y el pie no choca con la barra de gestos; el izquierdo cubre el notch en horizontal. */
  padding:calc(20px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
.rail .brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 16px; }
.rail .brand .mark{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:conic-gradient(from 220deg,var(--lima),var(--verde) 42%, var(--oro));
  display:grid;place-items:center;color:#0F2A1A;font-family:var(--display);font-weight:700;font-size:19px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);
}
.rail .brand b{ font-family:var(--display); font-weight:700; font-size:20px; color:#fff; letter-spacing:.06em; line-height:1; }
.rail .brand small{ display:block; color:#8FB69A; font-size:10px; letter-spacing:.22em; font-weight:600; margin-top:3px; }
.rail .brand .rail-close{ display:none; margin-left:auto; background:rgba(255,255,255,.08); border:none; color:#CBDDD0;
  width:34px; height:34px; border-radius:9px; font-size:18px; cursor:pointer; line-height:1; }
.rail .brand .rail-close:hover{ background:rgba(255,255,255,.16); color:#fff; }

/* Fondo oscuro tras el riel (solo cuando está abierto en móvil) */
#railBackdrop{ display:none; position:fixed; inset:0; z-index:35; background:rgba(15,42,26,.5); }

.nav-group{ font-family:var(--display); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#6E9279; font-weight:700; padding:15px 12px 6px; }
.nav-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px;
  color:#CBDDD0; cursor:pointer; font-size:14px; font-weight:500; font-family:var(--body-font);
  border:none; background:none; width:100%; text-align:left; position:relative;
  transition:background .15s, color .15s;
}
.nav-item svg{ width:20px; height:20px; flex:none; opacity:.92; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:rgba(255,255,255,.10); color:#fff; }
.nav-item.active::before{
  content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:4px;
  border-radius:0 4px 4px 0; background:var(--oro);
}
.rail .nav-spacer{ flex:1; min-height:14px; }
.rail .user-chip{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px;
  background:rgba(0,0,0,.22); margin-top:6px; }
.rail .user-chip .av{ width:34px;height:34px;border-radius:50%;flex:none;background:var(--lima);
  display:grid;place-items:center;color:#0F2A1A;font-weight:700;font-family:var(--display); }
.rail .user-chip .nm{ font-size:13px;color:#fff;font-weight:600;line-height:1.15; }
.rail .user-chip .rl{ font-size:11px;color:#8FB69A; }
.rail .logout{ margin-top:6px;color:#E6A8A0;background:none;border:none;font-size:12.5px;cursor:pointer;
  padding:9px 12px;text-align:left;border-radius:9px;font-weight:600;font-family:var(--body-font); }
.rail .logout:hover{ background:rgba(192,57,43,.16); color:#FFC9C2; }

/* ============================================================
   APPBAR (barra superior)
   ============================================================ */
body.shell-on .appbar{
  display:flex; align-items:center; gap:16px;
  position:fixed; top:0; left:var(--rail-w); right:0; z-index:30;
  /* La altura y el padding superior crecen con la zona segura (notch/barra de estado de
     Android), así el contenido de la appbar nunca queda debajo de la barra superior. */
  height:calc(var(--appbar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) calc(30px + env(safe-area-inset-right)) 0 30px;
  background:rgba(245,240,226,.82); backdrop-filter:saturate(1.2) blur(7px);
  border-bottom:1px solid var(--border);
}
.appbar .hamb{ display:none; width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:#fff;cursor:pointer;color:var(--marron);place-items:center; }
.appbar .eyebrow{ font-family:var(--display); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--lima); font-weight:700; }
.appbar h1{ font-family:var(--display); font-weight:600; font-size:19px; margin:1px 0 0; color:var(--marron); }

/* ============================================================
   DESPLAZAMIENTO DEL CONTENIDO (hueco para riel + appbar)
   Las pantallas son hijas directas de <body>; solo se recorre.
   ============================================================ */
body.shell-on > div[id^="screen-"]:not(#screen-login){
  margin-left:var(--rail-w);
  padding-top:calc(var(--appbar-h) + env(safe-area-inset-top));
  min-height:100vh;
  min-height:100dvh;   /* viewport dinámico: evita huecos/recortes con la barra del navegador móvil */
}

/* ============================================================
   HUB "INICIO"
   ============================================================ */
.hub{ max-width:1120px; margin:0 auto; padding:26px 30px 60px; }
.hub .hello h2{ font-size:30px; margin:0; color:var(--marron); letter-spacing:-.01em; }
.hub .hello p{ margin:6px 0 0; color:var(--marron); font-size:15px; opacity:.85; }
.section-label{ font-family:var(--display); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--verde); font-weight:700; margin:28px 2px 14px; display:flex; align-items:center; gap:12px; }
.section-label::after{ content:""; flex:1; height:1px; background:var(--border); }
.hub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:15px; }
.tile{
  display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%;
  background:#fff; border:1px solid var(--linea-soft); border-radius:16px; padding:18px;
  cursor:pointer; box-shadow:var(--shadow); font-family:var(--body-font);
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.tile:hover{ transform:translateY(-3px); box-shadow:0 14px 32px -16px rgba(22,61,38,.34); border-color:var(--border); }
.tile .ic{ width:48px;height:48px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--crema-light); color:var(--verde); border:1px solid var(--border); font-size:22px; }
.tile.admin .ic{ background:#FBF1C9; color:#8A6D1B; border-color:#EBD89A; }
.tile .texts{ flex:1; }
.tile .tit{ font-family:var(--display); font-weight:600; font-size:16.5px; margin:2px 0 4px; color:var(--marron-osc); }
.tile .des{ margin:0; color:var(--marron); font-size:13px; line-height:1.45; }
.tile .go{ margin-left:auto; color:var(--hint); font-size:20px; align-self:center; }

/* ============================================================
   ELEVACIÓN DE COMPONENTES EXISTENTES
   ============================================================ */
/* KPIs */
.kpi{ border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--linea-soft); }
.kpi .n{ font-size:25px; }
.kpi .l{ font-family:var(--display); letter-spacing:.04em; }
/* Tarjetas de insights / listas */
.card-ins{ border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--linea-soft); }
.card-ins h4{ font-family:var(--display); }
/* Barras */
.bar-fill{ background:linear-gradient(90deg,var(--verde2),var(--verde)); }
.bar-track{ border-radius:7px; }
/* Tablas */
table{ border-radius:12px; box-shadow:var(--shadow); }
th{ font-family:var(--display); letter-spacing:.03em; font-weight:600; }
/* Botones */
.btn-primary{ font-family:var(--display); letter-spacing:.01em; box-shadow:0 6px 16px -8px rgba(35,89,53,.6); }
.btn-outline,.btn-mini,.chart-btn{ font-family:var(--display); }
/* Inputs / campos */
.campo, .buscador, .input{ border-radius:12px; }
.campo:focus-within, .input:focus-within{ border-color:var(--verde2); box-shadow:0 0 0 3px rgba(113,161,54,.15); }
/* Login */
#screen-login h1{ font-family:var(--display); font-size:30px; }
.login-card{ border-radius:20px; box-shadow:0 18px 44px -22px rgba(22,61,38,.4); }

/* ============================================================
   CATÁLOGO · grilla compacta (caben más productos) + zoom con flechas
   ============================================================ */
/* Grilla responsive: 2–3 columnas según el ancho, en vez de una sola fila. */
.prod-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:10px; }
.prod-list > p{ grid-column:1 / -1; }     /* el aviso "Mostrando 300 de N" ocupa toda la fila */
/* Tarjetas un poco más pequeñas */
.prod{ padding:8px 10px; gap:10px; }
.prod .th{ width:44px; height:44px; }
.prod > div{ min-width:0; }                /* permite que el texto se recorte y no desborde */
.prod .nom{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod .meta{ font-size:11px; }
.prod .precio{ font-size:13px; }
.prod .stepper button{ width:28px; height:28px; }
.prod .stepper input{ width:42px; }

/* Flechas para navegar entre productos dentro del zoom */
.modal{ position:relative; }
.modal-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:rgba(22,61,38,.55); color:#fff; font-size:30px; line-height:1;
  display:grid; place-items:center; transition:background .15s; }
.modal-nav:hover{ background:var(--verde); }
.modal-nav.prev{ left:10px; }
.modal-nav.next{ right:10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  body.shell-on > div[id^="screen-"]:not(#screen-login){ margin-left:0; }
  body.shell-on .appbar{ left:0; }
  body.shell-on .appbar .hamb{ display:grid; }
  body.shell-on .rail{ transform:translateX(-100%); transition:transform .2s; box-shadow:0 0 40px rgba(0,0,0,.4); }
  body.shell-on .rail.open{ transform:none; }
  body.shell-on .rail .brand .rail-close{ display:grid; place-items:center; }  /* botón ✕ visible en móvil */
  body.rail-open #railBackdrop{ display:block; }                               /* fondo oscuro al abrir */
}

/* ============================================================
   LOGIN · split (panel de marca + formulario)
   ============================================================ */
#screen-login{ max-width:none; margin:0; padding:0; min-height:100vh; min-height:100dvh; text-align:left; }
.login-split{ width:100%; min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr; }

.login-brand{
  position:relative; overflow:hidden; color:#D9E6DC;
  background:linear-gradient(158deg,var(--rail) 0%, var(--rail-2) 100%);
  /* El fondo verde llega al borde (bajo la barra de estado), pero su contenido baja con la zona segura. */
  padding:calc(50px + env(safe-area-inset-top)) 54px 50px; display:flex; flex-direction:column; justify-content:space-between;
}
.login-brand::after{
  content:""; position:absolute; right:-130px; top:-130px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(113,161,54,.28), transparent 70%); pointer-events:none;
}
.login-brand::before{
  content:""; position:absolute; left:-90px; bottom:-90px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(243,200,20,.10), transparent 70%); pointer-events:none;
}
.lb-top{ display:flex; align-items:center; gap:13px; position:relative; z-index:1; }
.lb-mark{
  width:46px;height:46px;border-radius:13px;flex:none; display:grid;place-items:center;
  background:conic-gradient(from 220deg,var(--lima),var(--verde) 42%, var(--oro));
  color:#0F2A1A; font-family:var(--display); font-weight:700; font-size:22px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);
}
.lb-word{ font-family:var(--display); font-weight:700; font-size:22px; color:#fff; letter-spacing:.08em; line-height:1; }
.lb-word small{ display:block; font-size:10px; letter-spacing:.24em; color:#8FB69A; margin-top:5px; font-weight:600; }
.lb-mid{ position:relative; z-index:1; }
.lb-mid h2{ font-family:var(--display); font-weight:600; font-size:38px; line-height:1.1; color:#fff; margin:0 0 18px; letter-spacing:-.01em; }
.lb-mid p{ font-size:15.5px; line-height:1.6; color:#B9CFBF; max-width:34ch; margin:0 0 28px; }
.lb-flow{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; font-family:var(--mono); font-size:13px; color:#CBDDD0; }
.lb-flow span{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); padding:8px 13px; border-radius:10px; white-space:nowrap; }
.lb-flow i{ color:var(--oro); font-style:normal; font-weight:700; }
.lb-foot{ position:relative; z-index:1; font-size:12.5px; color:#7FA589; letter-spacing:.02em; }

.login-form{ display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:40px 30px calc(40px + env(safe-area-inset-bottom)); width:100%; max-width:470px; margin:0 auto; text-align:center; }
.login-form .logo-container{ padding:0 0 6px; }
/* Crédito "Creado por Nextier" bajo el logo SARJOS */
.credito{ display:flex; align-items:center; justify-content:center; gap:9px;
  margin:2px 0 20px; color:var(--marron); opacity:.85; font-size:13px; font-family:var(--body-font); }
.credito-logo{ height:30px; width:auto; object-fit:contain; vertical-align:middle; }
.login-form h1{ margin:0 0 4px; }
.login-form .login-card{ width:100%; }
.login-note{ color:var(--marron); opacity:.82; font-size:13px; text-align:center; margin:18px 0 0; max-width:34ch; }

@media (max-width:880px){
  .login-split{ grid-template-columns:1fr; min-height:auto; }
  .login-brand{ padding:calc(30px + env(safe-area-inset-top)) 26px 30px; flex-direction:row; align-items:center; gap:16px; min-height:auto; }
  .login-brand .lb-mid, .login-brand .lb-foot{ display:none; }
  .login-form{ min-height:70vh; justify-content:center; }
}

:focus-visible{ outline:2.5px solid var(--lima); outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* ============================================================
   RESPONSIVE MÓVIL · navegar y ver cómodamente en el celular
   ============================================================ */
/* Tablas anchas (pedidos, clientes, permisos, acceso): se deslizan en horizontal
   DENTRO de su caja, sin empujar el ancho de toda la página. La tabla sigue siendo
   display:table, así las columnas quedan alineadas. Inofensivo en escritorio (no hay
   desborde, así que no aparece scroll). */
#pedidosBody, #clientesBody, #permisosBody, #accesoBody{
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
}

@media (max-width:760px){
  /* Aprovechar el ancho del teléfono: menos relleno */
  .hub{ padding:18px 14px 48px; }
  .hub .hello h2{ font-size:23px; line-height:1.15; }
  .hub .hello p{ font-size:14px; }
  main{ padding:16px 12px 64px; }
  .section-label{ margin:20px 2px 12px; }
  /* Appbar más compacta */
  .appbar h1{ font-size:16px; }
  .appbar .eyebrow{ font-size:9.5px; }
  body.shell-on .appbar{ gap:10px; padding-left:14px; padding-right:calc(14px + env(safe-area-inset-right)); }
  /* Tablas: tipografía y celdas un poco más compactas */
  table{ font-size:13px; }
  th, td{ padding:9px 11px; }
  /* Modales casi a pantalla completa */
  .modal-bg{ padding:10px; }
  .modal .principal{ height:240px; }
}

@media (max-width:480px){
  .hub-grid{ grid-template-columns:1fr; }
  .prod-list{ grid-template-columns:1fr; }
  .tile{ padding:14px; }
  .tile .ic{ width:42px; height:42px; font-size:20px; }
  .hub .hello h2{ font-size:20px; }
  .confirm-card{ padding:22px 18px; }
}