/* Backoffice de caja. CSS propio, sin frameworks ni CDN.
   Paleta y piezas tomadas de la demo aprobada. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(../fonts/jetbrains-latin.woff2) format('woff2')}
@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:400;font-display:block;
  src:url(../fonts/material-symbols.woff2) format('woff2')}

.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
  font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;vertical-align:middle}
.fill-1{font-variation-settings:'FILL' 1,'wght' 600}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:#16264D;
  background:#F7F4EF;font-size:13px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul{padding:0;list-style:none}
.mono{font-family:'JetBrains Mono','SFMono-Regular',Menlo,monospace}

/* ---------- estructura ---------- */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:222px;background:linear-gradient(185deg,#16264D,#101B3A);color:#fff;flex-shrink:0;display:flex;flex-direction:column}
.sidebar .marca{padding:13px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}
.sidebar .marca strong{font-size:14px;font-weight:900;line-height:1;display:block}
.sidebar .marca span{font-size:7.5px;text-transform:uppercase;letter-spacing:.18em;color:#7FD8D8;font-weight:700;margin-top:4px;display:block}
.sidebar nav{flex:1;padding:4px 0;overflow-y:auto}
.nav{display:flex;align-items:center;gap:10px;padding:9px 14px;margin:1px 9px;border-radius:9px;
  font-size:12px;font-weight:500;color:rgba(255,255,255,.66);transition:background .15s,color .15s}
.nav:hover{background:rgba(255,255,255,.08);color:#fff}
.nav.active{background:rgba(27,184,184,.22);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #1BB8B8}
.nav.active .material-symbols-outlined{font-variation-settings:'FILL' 1;color:#7FD8D8}
.nav-sep{font-size:8px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.34);padding:11px 16px 3px;font-weight:800}
.sidebar .pie{padding:11px 13px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:9px}
.avatar{width:32px;height:32px;border-radius:50%;background:#1BB8B8;color:#101B3A;display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0}
.sidebar .pie p{font-size:10px;font-weight:700;line-height:1.3}
.sidebar .pie small{font-size:8px;color:rgba(255,255,255,.5)}
.sidebar .pie button{background:none;border:none;color:rgba(255,255,255,.45);cursor:pointer;padding:0;margin-left:auto}
.sidebar .pie button:hover{color:#fff}

.content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{min-height:56px;background:#fff;border-bottom:1px solid #e8e2da;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:9px 18px;flex-shrink:0;flex-wrap:wrap}
.topbar h2{font-size:15px;font-weight:800}
.topbar .sub{font-size:10px;color:#4A5C8C}
.strip{background:linear-gradient(90deg,#0E8C8C,#12A5A5 60%,#0E8C8C);color:#fff;padding:5px 16px;
  font-size:10px;font-weight:600;display:flex;align-items:center;gap:8px;border-bottom:2px solid #FFC94D;flex-shrink:0}
.strip .der{margin-left:auto;opacity:.9}
.area{flex:1;overflow-y:auto;padding:16px}

/* ---------- piezas ---------- */
.card{background:#fff;border-radius:14px;border:1px solid #ece5dc}
.card > header{padding:10px 15px;border-bottom:1px solid #f0eae2;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card > header h3{font-size:13px;font-weight:800}
.card .cuerpo{padding:14px}
.stat{background:#fff;border-radius:14px;border:1px solid #ece5dc;padding:13px;position:relative;overflow:hidden}
.stat h4{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#8a8580;font-weight:800}
.stat .val{font-size:22px;font-weight:800;color:#16264D;line-height:1.15;margin:4px 0 2px;
  font-family:'JetBrains Mono',monospace;word-break:break-all}
.stat .pie{font-size:9px;color:#9AA6C4}
.e-teal{border-left:4px solid #12A5A5}.e-violeta{border-left:4px solid #9B6BC7}
.e-mango{border-left:4px solid #F5A03C}.e-coral{border-left:4px solid #F0533A}
.e-navy{border-left:4px solid #16264D}.e-sol{border-left:4px solid #FFC94D}

.tabla-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px}
.tbl thead th{background:#D6F2F2;padding:8px 11px;text-align:left;font-weight:800;color:#0E8C8C;
  font-size:9px;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #A9E3E3;
  position:sticky;top:0;z-index:2;white-space:nowrap}
.tbl tbody td{padding:8px 11px;border-bottom:1px solid #f3ede6;color:#2c3550;vertical-align:middle}
.tbl tbody tr:hover{background:#FFFDF9}
.tbl tbody tr.anulado td{opacity:.5;text-decoration:line-through}
.tbl .num{text-align:right;font-family:'JetBrains Mono',monospace;font-weight:700;white-space:nowrap}
.vacio{padding:26px;text-align:center;color:#9AA6C4;font-size:12px}

.bdg{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;
  font-size:9px;font-weight:800;white-space:nowrap;line-height:1.7}
.b-ok{background:#DCFCE7;color:#15803D}
.b-gray{background:#eef0f0;color:#5a6b72}
.b-navy{background:#16264D;color:#fff}
.b-vend{background:#16264D;color:#7FD8D8}
.b-alerta{background:#FDE2DD;color:#C13A24}
.b-sol{background:#FFF6DC;color:#9A7413}

.btn{font-weight:700;border-radius:10px;padding:8px 15px;font-size:11.5px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background .16s,transform .16s;white-space:nowrap;
  font-family:inherit;line-height:1.4}
.btn .material-symbols-outlined{font-size:15px}
.btn-p{background:linear-gradient(135deg,#12A5A5,#0E8C8C);color:#fff;box-shadow:0 2px 8px rgba(14,140,140,.3)}
.btn-p:hover{transform:translateY(-1px)}
.btn-n{background:#16264D;color:#fff}.btn-n:hover{background:#101B3A}
.btn-c{background:#F0533A;color:#fff}.btn-c:hover{background:#d64429}
.btn-o{background:#fff;color:#0E8C8C;border:1.5px solid #A9E3E3}.btn-o:hover{background:#EFFAFA}
.btn-g{background:transparent;color:#6c6862;border:1px solid #e8e2da}.btn-g:hover{background:#FFFDF9}
.btn-mini{padding:4px 8px;font-size:10px;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

input,select,textarea{font-size:12.5px;border:1.5px solid #e2dad0;border-radius:9px;padding:8px 11px;
  outline:none;background:#fff;width:100%;color:#16264D;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:#12A5A5;box-shadow:0 0 0 3px rgba(18,165,165,.14)}
input[type=color]{padding:2px;height:34px;width:46px;min-width:46px;cursor:pointer}
input[type=checkbox]{width:auto;accent-color:#12A5A5;transform:scale(1.15)}
.lbl{font-size:10px;font-weight:800;color:#0E8C8C;text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:4px;display:block}
.campo{min-width:0}
.auto{width:auto}
fieldset{border:none;padding:0;margin:0}

/* ---------- grilla y utilidades ---------- */
.g{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
/* la botonera es configurable: las tarjetas se acomodan a cuantas haya */
.g-auto{grid-template-columns:repeat(auto-fit,minmax(142px,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
.col2{grid-column:span 2}
.fila{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fila-fin{margin-left:auto}
.entre{display:flex;align-items:center;justify-content:space-between;gap:9px}
.mt{margin-top:12px}.mt2{margin-top:20px}.mb{margin-bottom:12px}
.chico{font-size:10px;color:#4A5C8C}
.tenue{color:#9AA6C4}
.fuerte{font-weight:800}
.der{text-align:right}
.coral{color:#C13A24}.teal{color:#0E8C8C}.navy{color:#16264D}.sol{color:#9A7413}
.oculto{display:none}

/* barras de los gráficos */
.barra{height:10px;background:#F1EBE3;border-radius:9999px;overflow:hidden}
.barra > span{display:block;height:100%;border-radius:9999px}
/* las columnas necesitan altura definida en el padre para que el % de la barra resuelva */
.cols{display:flex;align-items:stretch;gap:8px;height:180px}
.cols > div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.cols .col{width:100%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#1BB8B8,#0E8C8C);min-height:2px}
.cols .cifra{font-size:9px;font-weight:700;color:#4A5C8C;font-family:'JetBrains Mono',monospace}
.cols .pie{font-size:9px;font-weight:700;color:#9AA6C4;text-align:center;line-height:1.2;word-break:break-word}

.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#FFC94D;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
tr.nuevo{animation:destacar 2.4s ease-out}
@keyframes destacar{0%{background:#D6F2F2}100%{background:transparent}}

.aviso{background:#EFFAFA;border:1px solid #A9E3E3;color:#0E8C8C;border-radius:12px;padding:10px 14px;
  font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.aviso.error{background:#FDE2DD;border-color:#F5B7AB;color:#C13A24}
.nota{background:#FFFDF9;border:1px solid #ece5dc;border-radius:12px;padding:11px 14px;font-size:10.5px;
  color:#4A5C8C;line-height:1.5;display:flex;gap:9px;align-items:flex-start}

.paginacion{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:11px}
.paginacion a,.paginacion span{padding:5px 10px;border-radius:8px;border:1px solid #e8e2da;background:#fff;font-weight:700}
.paginacion .actual{background:#16264D;color:#fff;border-color:#16264D}
.paginacion .off{opacity:.4}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(150deg,#0B6E6E 0%,#12A5A5 55%,#0E8C8C 100%)}
.login .caja{background:#fff;border-radius:22px;padding:30px;width:100%;max-width:370px;
  box-shadow:0 30px 70px rgba(0,0,0,.3)}
.login h1{font-size:21px;font-weight:900;line-height:1.1;margin-bottom:3px}
.login .campo{margin-bottom:13px}

/* solo desktop: el alcance dice backoffice para PC */
.solo-desktop{display:none;background:#FFF6DC;color:#9A7413;padding:9px 14px;font-size:11px;font-weight:700}
@media (max-width:900px){
  .solo-desktop{display:block}
  .g3,.g4,.g5,.g6,.g-2-1{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col2{grid-column:span 2}
  .sidebar{width:60px}
  .sidebar .marca span,.sidebar .marca strong,.nav span:not(.material-symbols-outlined),.nav-sep,.sidebar .pie div{display:none}
  .nav{justify-content:center;padding:11px 0}
}
@media print{
  .sidebar,.topbar,.strip,.btn,.paginacion{display:none!important}
  .area{overflow:visible;padding:0}
  body{background:#fff}
}