:root{
  --bg:#0a0a0b;
  --panel:#15171b;
  --panel2:#1e2127;
  --text:#f6f7f9;
  --muted:#a2a7b0;
  --red:#ff343f;
  --red2:#da202d;
  --yellow:#ffd21a;
  --yellow2:#f0b900;
  --gray:#aeb2b8;
  --line:#2b2e34;
  --green:#2fb47c;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:radial-gradient(circle at top,#17191f 0,#0a0a0b 48%);color:var(--text)}
button,input,select,textarea{font:inherit}

.app{min-height:100vh;display:grid;grid-template-columns:250px 1fr}
.sidebar{background:#050506;border-right:1px solid var(--line);padding:20px 14px;box-shadow:10px 0 30px rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;border-bottom:1px solid #1d1f23;margin-bottom:18px}
.brand img{width:48px;height:48px;object-fit:cover;border-radius:12px;background:#000}
.brand div{display:flex;flex-direction:column;line-height:1}
.brand strong{font-size:18px;color:#fff}
.brand span{font-size:13px;color:var(--red);font-weight:800;margin-top:5px;letter-spacing:.4px}

.nav{display:block;width:100%;text-align:left;background:transparent;color:var(--muted);border:0;padding:12px 14px;border-radius:10px;margin:5px 0;cursor:pointer;font-weight:700}
.nav:hover,.nav.active{background:linear-gradient(90deg,rgba(255,52,63,.18),rgba(255,210,26,.05));color:#fff;border-left:3px solid var(--red)}

.main{padding:28px}
.view{display:none}.view.active{display:block}
.top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px}
.top h1{margin:0;font-size:30px}
.top p{margin:6px 0 0;color:var(--muted)}

.primary,.secondary{border:0;border-radius:10px;padding:11px 15px;font-weight:800;cursor:pointer}
.primary{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;box-shadow:0 6px 16px rgba(255,52,63,.18)}
.primary:hover{filter:brightness(1.08)}
.secondary{background:var(--panel2);color:#fff;border:1px solid var(--line)}

.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;margin-bottom:22px}
.card,.panel{background:linear-gradient(180deg,#191b20,#121419);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.card{padding:18px;position:relative;overflow:hidden}
.card:after{content:"";position:absolute;right:-35px;bottom:-50px;width:90px;height:90px;border-radius:50%;background:rgba(255,210,26,.06)}
.card small{display:block;color:var(--muted)}
.card strong{display:block;font-size:28px;margin-top:8px}
.panel{padding:20px;margin-bottom:20px}
.panel h2{margin-top:0}
.section-title{font-weight:900;margin-bottom:10px;color:var(--yellow)}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:13px}
.grid .full{grid-column:1/-1}
input,select,textarea{background:#0e1014;color:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,210,26,.08)}
textarea{min-height:90px;resize:vertical}
.actions{display:flex;gap:10px}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:#d5d8dd;font-size:12px;text-transform:uppercase}
tbody tr:hover{background:rgba(255,255,255,.02)}

.badge{display:inline-block;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:800}
.pendiente{background:#4a3211;color:#ffd66b}
.pagado{background:#11382c;color:#7ce0b9}
.linkbtn{background:none;border:0;color:var(--yellow);text-decoration:none;cursor:pointer;font-weight:700}

.search-panel{padding:14px 18px}
.search-grid{display:grid;grid-template-columns:2fr 1fr auto;gap:12px;align-items:end}
.search-grid label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:13px}
.search-actions{display:flex;align-items:end}

.guide-picker{display:grid;gap:8px}
.guide-option{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 12px;background:#0e1014;border:1px solid var(--line);border-radius:10px}
.guide-option input{width:auto}
.guide-option strong{color:#fff}
.guide-option span{color:var(--muted);font-size:13px}

#print-area{display:none}

@media(max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{display:flex;overflow:auto;gap:6px;padding:10px}
  .brand{display:none}
  .nav{width:auto;white-space:nowrap}
  .main{padding:16px}
  .grid{grid-template-columns:1fr}
  .grid .full{grid-column:auto}
  .search-grid{grid-template-columns:1fr}
}
@media print{
  body *{visibility:hidden}
  #print-area,#print-area *{visibility:visible}
  #print-area{display:block;position:absolute;left:0;top:0;width:100%;background:#fff;color:#111;padding:20px}
  .print-header{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #e32636;padding-bottom:12px;margin-bottom:16px}
  .print-logo{height:55px}
  .printbox{border:1px solid #bbb;padding:10px;margin-bottom:8px}
  .printgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .print-table{width:100%;border-collapse:collapse}
  .print-table th,.print-table td{border:1px solid #aaa;padding:7px;font-size:12px;color:#111}
  .print-table th{background:#eee}
}

.login-screen{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at top,#191b20,#050506 60%);
  padding:20px;
}
.login-screen.hidden{display:none}
.login-card{
  width:min(390px,100%);
  background:linear-gradient(180deg,#181a1f,#0e1014);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  text-align:center;
}
.login-card img{width:92px;height:92px;object-fit:cover;border-radius:20px;background:#000;margin-bottom:10px}
.login-card h1{margin:6px 0 4px;font-size:26px}
.login-card p{margin:0 0 20px;color:var(--muted)}
.login-card form{display:grid;gap:14px;text-align:left}
.login-card label{display:grid;gap:7px;color:var(--muted);font-size:13px}
.login-card button{width:100%;margin-top:4px}
.login-error{min-height:18px;color:#ff6b74;font-size:13px;text-align:center}
.top-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.user-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:30px;padding:0 10px;
  border-radius:999px;
  background:#0e1014;
  border:1px solid var(--line);
  color:var(--gray);
  font-weight:900;
  font-size:11px;
  letter-spacing:.5px
}
.tiny-user{
  display:block;
  margin-top:3px;
  color:#737a84;
  font-size:9px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
}


.cc-hidden{display:none}
.cc-client-row{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.cc-client-row label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:13px}
.cc-title-row{display:flex;justify-content:space-between;gap:14px;align-items:center}
.muted{color:var(--muted);margin-top:4px}
.cc-totales{display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap;padding-top:14px;font-weight:800}
.cc-totales span{background:#0e1014;border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.cc-danger{background:rgba(255,52,63,.10)!important}
.cc-danger input{border-color:var(--red)!important;background:rgba(255,52,63,.08)}
.cc-ok{background:rgba(47,180,124,.07)}
.cc-invoice-input{min-width:155px}
.cc-small{font-size:10px;color:#737a84;display:block;margin-top:3px}
.cc-check{width:auto}
@media(max-width:900px){
  .cc-client-row{grid-template-columns:1fr}
  .cc-title-row{align-items:flex-start;flex-direction:column}
}

.gasto-factura-vacia{color:#737a84;font-style:italic}

.finance-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:14px}
.finance-card{background:#0e1014;border:1px solid var(--line);border-radius:13px;padding:15px}
.finance-card small{display:block;color:var(--muted);font-size:12px}
.finance-card strong{display:block;margin-top:7px;font-size:21px}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.legend span{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.legend-red,.status-red{background:rgba(255,52,63,.14);color:#ff737b}
.legend-yellow,.status-yellow{background:rgba(255,210,26,.13);color:#ffd93d}
.legend-ok,.status-ok{background:rgba(47,180,124,.12);color:#76d9ad}
.status-pill{display:inline-block;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:900}
@media(max-width:1100px){.finance-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.finance-grid{grid-template-columns:1fr}}

.music-btn{
  min-width:96px;
  font-size:12px;
  opacity:.9;
}
.music-btn.is-playing{
  border-color:rgba(255,210,26,.55);
  color:var(--yellow);
}


/* ===== IMPRESIÓN SOBRE GUÍA PREIMPRESA 19 x 13 cm ===== */
#preprint-area{display:none}

@media print{
  body.preprint-mode *{visibility:hidden!important}
  body.preprint-mode #preprint-area,
  body.preprint-mode #preprint-area *{visibility:visible!important}
  body.preprint-mode #preprint-area{
    display:block!important;
    position:absolute;
    left:0;
    top:0;
    width:190mm;
    height:130mm;
    margin:0;
    padding:0;
    background:transparent!important;
    color:#000!important;
    font-family:Arial,sans-serif;
  }

  @page{
    size:190mm 130mm;
    margin:0;
  }

  .pp{
    position:absolute;
    color:#000!important;
    font-size:9pt;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
  }
  .pp.small{font-size:7.6pt}
  .pp.tiny{font-size:6.8pt}
  .pp.bold{font-weight:700}
  .pp.wrap{white-space:normal;line-height:1.08}

  /* Coordenadas iniciales. Se pueden calibrar luego en milímetros. */
  .pp-guia{left:151mm;top:9mm;width:32mm;text-align:center;font-weight:700;font-size:10pt}
  .pp-fecha{left:149mm;top:22mm;width:33mm;text-align:center}

  .pp-remitente{left:9mm;top:31mm;width:78mm}
  .pp-rem-dom{left:9mm;top:37mm;width:78mm}
  .pp-rem-loc{left:9mm;top:43mm;width:78mm}

  .pp-dest{left:99mm;top:31mm;width:79mm}
  .pp-dest-dom{left:99mm;top:37mm;width:79mm}
  .pp-dest-loc{left:99mm;top:43mm;width:79mm}

  .pp-bultos{left:8mm;top:53mm;width:16mm;text-align:center}
  .pp-cantidad{left:25mm;top:53mm;width:18mm;text-align:center}
  .pp-remito{left:44mm;top:53mm;width:24mm;text-align:center}
  .pp-descripcion{left:69mm;top:53mm;width:80mm;height:40mm}

  .pp-flete{left:151mm;top:55mm;width:31mm;text-align:right}
  .pp-retiro{left:151mm;top:65mm;width:31mm;text-align:right}
  .pp-seguro{left:151mm;top:75mm;width:31mm;text-align:right}
  .pp-iva{left:151mm;top:85mm;width:31mm;text-align:right}
  .pp-total{left:151mm;top:95mm;width:31mm;text-align:right;font-weight:700}

  .pp-origen{left:30mm;top:99mm;width:27mm;text-align:center}
  .pp-destino{left:70mm;top:99mm;width:27mm;text-align:center}
  .pp-cta{left:106mm;top:99mm;width:27mm;text-align:center}

  .pp-valor{left:128mm;top:110mm;width:24mm;text-align:center}
  .pp-kilos{left:128mm;top:119mm;width:24mm;text-align:center}

  .pp-condpago{left:73mm;top:118mm;width:49mm;text-align:center}
}

@media screen{
  body.preprint-mode #preprint-area{display:none}
}

.guia-ocasional-hidden{display:none!important}
.guia-note{
  grid-column:1/-1;
  font-size:12px;
  color:var(--muted);
  background:#0e1014;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
}


/* ===== V11 PREIMPRESO ROTADO Y TIPOGRAFÍA MÁS GRANDE ===== */
@media print{
  body.preprint-mode #preprint-area{
    width:130mm!important;
    height:190mm!important;
  }

  @page{
    size:130mm 190mm;
    margin:0;
  }

  body.preprint-mode #preprint-area .preprint-canvas{
    position:absolute;
    left:0;
    top:190mm;
    width:190mm;
    height:130mm;
    transform:rotate(-90deg);
    transform-origin:top left;
  }

  .pp{
    font-size:11pt!important;
    line-height:1.08!important;
  }
  .pp.small{font-size:9.2pt!important}
  .pp.tiny{font-size:8.4pt!important}

  /* recalibrado general manteniendo coordenadas sobre un canvas 19 x 13 */
  .pp-guia{left:150mm!important;top:8mm!important;width:34mm!important;text-align:center!important;font-weight:700!important;font-size:11pt!important}
  .pp-fecha{left:149mm!important;top:21mm!important;width:34mm!important;text-align:center!important;font-size:12pt!important}

  .pp-remitente{left:10mm!important;top:30mm!important;width:77mm!important}
  .pp-rem-dom{left:10mm!important;top:36.5mm!important;width:77mm!important}
  .pp-rem-loc{left:10mm!important;top:43mm!important;width:77mm!important}

  .pp-dest{left:102mm!important;top:30mm!important;width:73mm!important}
  .pp-dest-dom{left:102mm!important;top:36.5mm!important;width:73mm!important}
  .pp-dest-loc{left:102mm!important;top:43mm!important;width:73mm!important}

  .pp-bultos{left:9mm!important;top:53mm!important;width:15mm!important;text-align:center!important}
  .pp-cantidad{left:25.5mm!important;top:53mm!important;width:18mm!important;text-align:center!important}
  .pp-remito{left:45mm!important;top:53mm!important;width:22mm!important;text-align:center!important}
  .pp-descripcion{left:71mm!important;top:53mm!important;width:74mm!important;height:39mm!important}

  .pp-flete{left:151mm!important;top:54mm!important;width:29mm!important;text-align:right!important}
  .pp-retiro{left:151mm!important;top:64.5mm!important;width:29mm!important;text-align:right!important}
  .pp-seguro{left:151mm!important;top:75mm!important;width:29mm!important;text-align:right!important}
  .pp-iva{left:151mm!important;top:85.2mm!important;width:29mm!important;text-align:right!important}
  .pp-total{left:151mm!important;top:95.2mm!important;width:29mm!important;text-align:right!important;font-weight:700!important}

  .pp-origen{left:30mm!important;top:99.5mm!important;width:26mm!important;text-align:center!important}
  .pp-destino{left:69mm!important;top:99.5mm!important;width:27mm!important;text-align:center!important}
  .pp-cta{left:106mm!important;top:99.5mm!important;width:24mm!important;text-align:center!important}

  .pp-valor{left:126.5mm!important;top:109.5mm!important;width:26mm!important;text-align:center!important}
  .pp-kilos{left:126.5mm!important;top:119mm!important;width:26mm!important;text-align:center!important}
  .pp-condpago{left:73mm!important;top:118.5mm!important;width:48mm!important;text-align:center!important}
}


/* ===== V12: GUIA FLASH REAL 190 x 130 mm, SIN ROTACIÓN ===== */
@media print{
  body.preprint-mode #preprint-area{
    display:block!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:190mm!important;
    height:130mm!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  @page{
    size:190mm 130mm;
    margin:0;
  }

  body.preprint-mode #preprint-area .preprint-canvas{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:190mm!important;
    height:130mm!important;
    transform:none!important;
    transform-origin:top left!important;
  }

  .pp{
    font-size:12pt!important;
    line-height:1.08!important;
  }
  .pp.small{font-size:10pt!important}
  .pp.tiny{font-size:9pt!important}

  .pp-guia{left:149mm!important;top:7mm!important;width:35mm!important;text-align:center!important;font-size:12pt!important;font-weight:700!important}
  .pp-fecha{left:149mm!important;top:21mm!important;width:34mm!important;text-align:center!important;font-size:12pt!important}

  .pp-remitente{left:10mm!important;top:29mm!important;width:78mm!important}
  .pp-rem-dom{left:10mm!important;top:35.5mm!important;width:78mm!important}
  .pp-rem-loc{left:10mm!important;top:42mm!important;width:78mm!important}

  .pp-dest{left:101mm!important;top:29mm!important;width:75mm!important}
  .pp-dest-dom{left:101mm!important;top:35.5mm!important;width:75mm!important}
  .pp-dest-loc{left:101mm!important;top:42mm!important;width:75mm!important}

  .pp-bultos{left:8.5mm!important;top:52.5mm!important;width:15mm!important;text-align:center!important}
  .pp-cantidad{left:25mm!important;top:52.5mm!important;width:18mm!important;text-align:center!important}
  .pp-remito{left:45mm!important;top:52.5mm!important;width:22mm!important;text-align:center!important}
  .pp-descripcion{left:70mm!important;top:52.5mm!important;width:76mm!important;height:40mm!important}

  .pp-flete{left:151mm!important;top:54mm!important;width:29mm!important;text-align:right!important}
  .pp-retiro{left:151mm!important;top:64.5mm!important;width:29mm!important;text-align:right!important}
  .pp-seguro{left:151mm!important;top:75mm!important;width:29mm!important;text-align:right!important}
  .pp-iva{left:151mm!important;top:85.5mm!important;width:29mm!important;text-align:right!important}
  .pp-total{left:151mm!important;top:96mm!important;width:29mm!important;text-align:right!important;font-weight:700!important}

  .pp-origen{left:30mm!important;top:100mm!important;width:27mm!important;text-align:center!important}
  .pp-destino{left:69mm!important;top:100mm!important;width:28mm!important;text-align:center!important}
  .pp-cta{left:106mm!important;top:100mm!important;width:25mm!important;text-align:center!important}

  .pp-valor{left:126mm!important;top:110mm!important;width:27mm!important;text-align:center!important}
  .pp-kilos{left:126mm!important;top:119mm!important;width:27mm!important;text-align:center!important}
  .pp-condpago{left:72mm!important;top:118.5mm!important;width:50mm!important;text-align:center!important}
}


/* ===== V18: NOTAS DE CRÉDITO ===== */
.nc-form{
  margin-top:14px;
  margin-bottom:18px;
  padding:14px;
  border:1px solid #e4e7eb;
  border-radius:14px;
  background:#fafafa;
}
.cc-resumen-nc{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  font-size:13px;
}
.nc-negative{color:#b42318}
.nc-badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:#fff1f0;
  border:1px solid #f3c7c3;
  color:#9b1c12;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}


/* ===== V19: NC PARA TODOS LOS CLIENTES ===== */
.nc-global-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.nc-source-info{
  display:grid;
  grid-template-columns:repeat(3,minmax(160px,1fr));
  gap:10px;
  padding:12px;
  border:1px solid #d9dde3;
  border-radius:12px;
  background:#fff;
}
.nc-source-info div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.nc-source-info span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  opacity:.65;
}
.nc-error{
  min-height:18px;
  color:#b42318;
  font-weight:700;
}
@media (max-width:850px){
  .nc-source-info{grid-template-columns:1fr 1fr}
  .nc-global-head{flex-direction:column}
}

.nc-error.nc-success{color:#16794b;font-weight:800;}
.badge.nc{background:#fff1f0;color:#9b1c12;border-color:#f3c7c3}
.nc-source-info{color:#111827}
.nc-source-info strong{color:#111827}
.nc-source-placeholder{grid-column:1 / -1;color:#344054;font-weight:600}


.danger-link{color:#b42318!important}.danger-outline{border-color:#e4aaa4!important;color:#b42318!important}


/* ===== V21: FACTURAS ===== */
.facturas-tools{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(200px,320px);
  gap:14px;
  margin-bottom:14px;
}
@media(max-width:760px){
  .facturas-tools{grid-template-columns:1fr}
}

.cc-actions-top{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.cc-actions-top{justify-content:flex-start}}

#guia-aforo-info{display:block;margin-top:4px;font-size:11px}.cc-actions-top{display:flex;gap:8px;flex-wrap:wrap}


/* ===== V31: RESUMEN DE CUENTA ===== */
.resumen-cuenta-tools{
  display:grid;
  grid-template-columns:minmax(260px,2fr) minmax(170px,.8fr) minmax(155px,.7fr) minmax(155px,.7fr);
  gap:14px;
  align-items:end;
}
.resumen-cuenta-tools label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:13px}
.resumen-cuenta-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.resumen-cuenta-ayuda{margin:12px 0 0}
.resumen-cuenta-empty{color:var(--muted);font-weight:700;text-align:center;padding:34px}
.resumen-cuenta-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.resumen-cuenta-head h2{margin:0 0 5px}
.resumen-cuenta-periodo{text-align:right;color:var(--muted);font-size:13px}
.resumen-cuenta-periodo strong{color:#fff}
.resumen-cuenta-totales{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:flex-end;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
#rc-imprimir:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:900px){
  .resumen-cuenta-tools{grid-template-columns:1fr}
  .resumen-cuenta-actions{grid-column:auto}
  .resumen-cuenta-head{flex-direction:column}
  .resumen-cuenta-periodo{text-align:left}
}
@media print{
  .resumen-print-totales{text-align:right;margin-top:10px;font-size:14px}
}

#guia-iva-calculado,
#guia-total-calculado{
  display:block;
  margin-top:4px;
  font-size:11px;
}