/* ============================================================================
   estilos.css · Sistema de diseño compartido · POS-EMPRESA
   ----------------------------------------------------------------------------
   Fuente de verdad de la ESTRUCTURA compartida (fuentes, radios, componentes,
   layout). Los COLORES viven en temas.css (tokens por tema/acento/superficie):
   este archivo solo los USA con var(--...), nunca los define.
   Toda página interna enlaza AMBOS, en este orden, y luego temas.js:
       <link rel="stylesheet" href="assets/css/estilos.css">
       <link rel="stylesheet" href="assets/css/temas.css">
       <script src="assets/js/shared/temas.js"></script>
   No inventar colores ni fuentes sueltas: usar siempre las variables var(--...).
   ============================================================================ */

:root{
  /* Tokens NO cromáticos (los cromáticos están en temas.css) */
  --font:'Geist',system-ui,sans-serif;
  --font-display:'Geist',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{
  min-height:100dvh;padding:14px 13px 34px;position:relative;
  background:radial-gradient(ellipse 90% 55% at 50% -8%, rgba(var(--accent-rgb),.20) 0%, rgba(var(--accent-rgb),.07) 45%, transparent 72%), var(--bg);
}
/* Textura de ruido sutil del fondo */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--noise-opacity);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
button,input,select{font-family:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}

.app{width:min(100%,760px);margin:0 auto;position:relative;z-index:1}
.muted{color:var(--ink-mute)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hidden{display:none!important}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:10;margin:-14px -13px 18px;padding:14px 13px 12px;
  background:linear-gradient(180deg, var(--topbar-start) 0%, var(--topbar-mid) 68%, var(--topbar-end) 100%);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-left{display:flex;align-items:center;gap:12px;min-width:0}
.brand h1{font-family:var(--font-display);font-size:20px;line-height:1;margin:0;font-weight:800;letter-spacing:-.03em}
.brand p{font-family:var(--mono);font-size:9.5px;line-height:1.4;color:var(--ink-mute);margin:4px 0 0;text-transform:uppercase;letter-spacing:.10em}

.logo{
  width:44px;height:44px;border-radius:15px;flex:none;display:grid;place-items:center;
  font-size:19px;font-weight:800;color:var(--accent-contrast);position:relative;overflow:hidden;
  background:linear-gradient(148deg, var(--accent-2) 0%, var(--accent) 52%, var(--accent-pressed) 100%);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3), 0 4px 18px var(--accent-glow), var(--shadow-sm);
}
/* Residual permitido: brillo FÍSICO del logo (destello blanco sobre el gradiente
   de acento); no es color de marca y funciona igual en modo claro y oscuro. */
.logo::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(138deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.04) 45%, transparent 60%)}

.navbtn,.logout{
  border:1px solid var(--border);background:rgba(var(--surface-2-rgb),.55);color:var(--ink-soft);
  border-radius:999px;padding:7px 13px;font-size:11px;font-weight:600;font-family:var(--font);
  cursor:pointer;white-space:nowrap;letter-spacing:.02em;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
.navbtn:hover,.logout:hover{background:rgba(var(--border-rgb),.85);color:var(--ink)}

/* ── Card ──────────────────────────────────────────────────────────────── */
.card{
  background:var(--card-bg);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--shadow-md);
  animation:fadeUp .38s ease both;
}
.card + .card{margin-top:12px}
.card:nth-child(1){animation-delay:.04s}
.card:nth-child(2){animation-delay:.11s}
.card:nth-child(3){animation-delay:.18s}
.card:nth-child(4){animation-delay:.24s}
.card:nth-child(5){animation-delay:.30s}
.card:nth-child(6){animation-delay:.36s}
.card:nth-child(7){animation-delay:.42s}

.section-title{
  font-size:10px;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.18em;
  margin:0 0 12px;display:flex;align-items:center;gap:9px;
}
.section-title::before{content:'';width:5px;height:5px;background:var(--accent);border-radius:50%;flex:none;box-shadow:0 0 7px rgba(var(--accent-rgb),.55)}
/* span y .btn dentro de .section-title se empujan a la derecha */
.section-title > span{margin-left:auto;color:var(--ink-mute);font-weight:600;letter-spacing:0;text-transform:none;font-size:11.5px}
.section-title > .btn{margin-left:auto}

/* ── Formularios ───────────────────────────────────────────────────────── */
label{display:block;font-size:10px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin:0 0 6px}
input,select{
  width:100%;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--ink);
  border-radius:var(--r-sm);padding:12px;font-size:15px;outline:none;
  transition:border-color .15s,background .15s;
}
input:focus,select:focus{border-color:var(--accent-soft);background:var(--surface-3)}
input::placeholder{color:var(--ink-faint)}
input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--ink);
  border-radius:var(--r-sm);padding:11px 12px;font-size:15px;outline:none;font-family:inherit;
  resize:vertical;min-height:68px;line-height:1.45;
  transition:border-color .15s,background .15s;
}
textarea:focus{border-color:var(--accent-soft);background:var(--surface-3)}
textarea::placeholder{color:var(--ink-faint)}
select{
  appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;background-position:right 12px center;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn{
  border:0;border-radius:var(--r-sm);padding:11px 14px;
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  color:var(--accent-contrast);font-weight:800;font-family:var(--font);cursor:pointer;font-size:14px;letter-spacing:-.01em;
  transition:opacity .15s,box-shadow .15s,transform .12s;
}
.btn:hover:not(:disabled){opacity:.90;box-shadow:0 4px 14px rgba(var(--accent-rgb),.28)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.55}
.btn.full{width:100%}
.btn.sm{padding:7px 11px;font-size:12.5px}
.btn.secondary{background:var(--surface-2);color:var(--ink);border:1px solid var(--border)}
.btn.secondary:hover:not(:disabled){background:var(--surface-3)}
.btn.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--border)}
.btn.ghost:hover:not(:disabled){background:var(--surface-1)}
.btn.danger{background:transparent;border:1px solid var(--err);color:var(--err)}
.btn.danger:hover:not(:disabled){background:var(--err-tint)}
.icon-btn{width:38px;height:38px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-mute);font-size:16px;flex:none;border-radius:var(--r-sm)}
.row{display:flex;gap:8px;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Pills / badges / estados ──────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 9px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  border:1px solid var(--border);color:var(--ink-mute);
}
.badge.ok{color:var(--ok);background:var(--ok-tint);border-color:var(--ok-soft)}
.badge.accent{color:var(--accent-2);background:var(--accent-tint);border-color:var(--accent-soft)}
.status-pill{
  font-family:var(--mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.10em;
  border-radius:999px;padding:5px 9px;white-space:nowrap;flex:none;
  border:1px solid var(--ok-soft);background:var(--ok-tint);color:var(--ok);
}
.status-pill.err{border-color:var(--err);background:var(--err-tint);color:var(--err)}
.switch{border:1px solid var(--border);background:var(--surface-1);color:var(--ink-soft);border-radius:999px;padding:6px 11px;font-size:11.5px;font-weight:700;transition:background .15s,border-color .15s,color .15s}
.switch.on{background:var(--ok-tint);border-color:var(--ok-soft);color:var(--ok)}

/* ── Identity card (encabezado de empresa en el panel) ─────────────────── */
.identity{display:grid;gap:12px}
.identity-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.identity h2{font-family:var(--font-display);font-size:24px;line-height:1.05;margin:0;font-weight:800;letter-spacing:-.04em}
.identity .sub{font-size:12.5px;color:var(--ink-mute);line-height:1.5;margin-top:5px}

/* ── Stats ─────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px}
.stat{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:14px 12px 12px;min-height:76px;position:relative;overflow:hidden;transition:border-color .15s}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, rgba(var(--border-rgb),.8) 0%, rgba(var(--border-rgb),.4) 100%)}
.stat b{display:block;font-family:var(--mono);font-size:21px;line-height:1.1;letter-spacing:-.03em;margin-bottom:5px;font-weight:600;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:11px;color:var(--ink-mute);line-height:1.35;letter-spacing:.01em}
.stat.alert{background:var(--warn-tint);border-color:rgba(var(--warn-rgb),.28)}
.stat.alert::before{background:linear-gradient(90deg, var(--warn) 0%, rgba(var(--warn-rgb),.25) 100%)}
.stat.alert b{color:var(--warn)}
.stat.warn{background:var(--warn-tint);border-color:rgba(var(--warn-rgb),.35)}
.stat.warn::before{background:linear-gradient(90deg,var(--warn),rgba(var(--warn-rgb),.25))}
.stat.warn b{color:var(--warn)}
.stat.err{background:var(--err-tint);border-color:rgba(var(--err-rgb),.35)}
.stat.err::before{background:linear-gradient(90deg,var(--err),rgba(var(--err-rgb),.2))}
.stat.err b{color:var(--err)}
.stat.good{background:var(--ok-tint);border-color:rgba(var(--ok-rgb),.28)}
.stat.good::before{background:linear-gradient(90deg,var(--ok-soft),rgba(var(--ok-rgb),.2))}
.stat.good b{color:var(--ok)}

/* ── Action tiles (botones grandes del panel) ──────────────────────────── */
.actions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.action{
  position:relative;min-height:96px;text-decoration:none;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:var(--r-md);padding:14px 13px 13px;color:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px;overflow:hidden;
  transition:transform .14s cubic-bezier(.2,.8,.4,1),border-color .15s,background .15s,box-shadow .18s;
}
.action::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 10%, rgba(var(--accent-rgb),.07) 0%, transparent 65%);opacity:0;transition:opacity .22s;pointer-events:none}
.action:hover{background:var(--surface-3);border-color:var(--border);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.action:hover::after{opacity:1}
.action:active{transform:scale(.981) translateY(0)}
.action.primary{background:linear-gradient(148deg, var(--accent-2) 0%, var(--accent) 48%, var(--accent-pressed) 100%);color:var(--accent-contrast);border-color:transparent;box-shadow:0 4px 22px var(--accent-glow)}
.action.primary:hover{box-shadow:0 8px 32px rgba(var(--accent-rgb),.34);transform:translateY(-1px)}
.action.primary::after{display:none}
.action.primary .hint{color:var(--accent-contrast);opacity:.72}
.action.disabled{opacity:.36;pointer-events:none}
.action .name{font-size:14px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.action .hint{font-size:11px;color:var(--ink-mute);line-height:1.3}
.action .icon{display:block;font-size:19px;margin-bottom:8px;color:var(--accent);opacity:.85;line-height:1}
.action.primary .icon{color:var(--accent-contrast);opacity:1}

/* ── Tablas ────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--border-soft);background:var(--surface-1)}
th,td{padding:9px 10px;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:middle}
th{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-mute);font-weight:700;background:rgba(var(--surface-2-rgb),.55)}
tr:last-child td{border-bottom:0}
td{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
td strong{font-size:13px;color:var(--ink)}
td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}

/* ── Listas / items ────────────────────────────────────────────────────── */
.list{display:grid;gap:8px}
.item{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:11px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.item .t{font-weight:700;font-size:14px}
.item .s{font-size:11.5px;color:var(--ink-mute);font-family:var(--mono);margin-top:3px}
.item:hover{border-color:var(--border);background:var(--surface-3)}
.item .meta{min-width:0;flex:1}
.empty{text-align:center;color:var(--ink-mute);padding:24px 12px;font-size:13.5px}

/* ── Avisos (notice) y mensajes (msg) ──────────────────────────────────── */
.notice{border:1px solid rgba(var(--warn-rgb),.28);background:var(--warn-tint);color:var(--ink-soft);border-radius:var(--r-md);padding:14px;font-size:13px;line-height:1.55;margin-bottom:12px}
.notice b{color:var(--warn)}
.msg{display:none;margin-top:12px;padding:11px 12px;border-radius:var(--r-sm);font-size:13px;line-height:1.4}
.msg.show{display:block}
.msg.err{background:var(--err-tint);border:1px solid rgba(var(--err-rgb),.5);color:var(--err)}
.msg.ok{background:var(--ok-tint);border:1px solid var(--ok-soft);color:var(--ok)}

/* ── Toast (inyectado por ui.js) ───────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--surface-4);border:1px solid var(--border);color:var(--ink);box-shadow:var(--shadow-lg);padding:11px 18px;border-radius:12px;font-weight:700;font-size:13.5px;z-index:80;max-width:90vw;text-align:center;display:none}

/* ── Modal (overlay + caja) ────────────────────────────────────────────── */
.ov{position:fixed;inset:0;background:var(--overlay);z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{width:min(100%,440px);max-height:88dvh;overflow:auto;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-lg)}
.modal h3{font-family:var(--font-display);margin:0 0 12px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.modal p{margin:0 0 14px;font-size:12.5px;color:var(--ink-mute);line-height:1.5}
.modal .fld + .fld{margin-top:10px}
.modal .row{display:flex;gap:8px;margin-top:12px}
.modal .row button{flex:1}

.footer-note{text-align:center;font-size:10.5px;color:var(--ink-faint);line-height:1.65;margin-top:22px;letter-spacing:.01em}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media(min-width:640px){
  body{padding-top:20px}
  .topbar{margin-top:-20px;padding-top:20px}
  .actions-grid{grid-template-columns:repeat(3,1fr)}
  .stat b{font-size:23px}
}
@media(max-width:520px){ .grid2{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════════════════
   CAPA DESKTOP (2026-07-09)
   ----------------------------------------------------------------------------
   Todo lo de acá abajo actúa SOLO en pantallas ≥1024px: el móvil queda igual.
   Cada página "opta" agregando clases a su contenedor: `app-wide` (ancho
   normal de escritorio) o `app-xwide` (ancho extra), más una clase propia
   (app-dashboard, app-master, …) para sus reglas particulares.
   Breakpoints permitidos: 1024px (escritorio) y 1280px (escritorio ancho).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --desktop-max:1180px;
  --desktop-wide:1320px;
  --desktop-gap:16px;
  --desktop-side:260px;
  --desktop-rail:340px;
}
/* Tablas anchas: envolver en .table-wrap para que scrolleen solas (nunca la página) */
.table-wrap{overflow-x:auto;max-width:100%}

@media(min-width:1024px){
  /* Anchos de página */
  .app.app-wide{width:min(100%,var(--desktop-max))}
  .app.app-xwide{width:min(100%,var(--desktop-wide))}

  /* Utilidades de layout por zonas (para no repetir CSS en cada página) */
  .desktop-grid{display:grid;gap:var(--desktop-gap)}
  .desktop-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--desktop-gap);align-items:start}
  .desktop-sidebar{width:var(--desktop-side);min-width:0}
  .desktop-main{min-width:0}
  .desktop-rail{width:var(--desktop-rail);min-width:0}

  /* Modales: en PC van centrados y un poco más anchos (en móvil siguen abajo) */
  .ov{align-items:center}
  .modal{width:min(100%,560px)}

  /* Tiles del panel: 4 columnas cuando la página es ancha */
  .app-wide .actions-grid,.app-xwide .actions-grid{grid-template-columns:repeat(4,1fr)}

  /* Panel (index): identidad a la izquierda, stats a la derecha */
  .app-dashboard .identity{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
  .app-dashboard .identity .stats{margin-top:0}
}