:root{
  --negro:#0b0b0b;
  --amarillo:#FFD400;
  --oro:#c9a227;
  --blanco:#ffffff;
  --gris:#f5f4f0;
  --gris2:#e6e4de;
  --texto:#1b1b1b;
  --texto2:#6b6a66;
  --verde:#1e7d43;
  --rojo:#b3261e;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--gris);color:var(--texto);font-size:14px}

/* ===== HEADER ===== */
.topbar{display:flex;min-height:86px}
.topbar .marca{background:var(--negro);color:#fff;flex:1.2;display:flex;align-items:center;gap:14px;padding:14px 28px}
.logo{width:52px;height:52px;border:2px solid var(--oro);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);color:#fff;flex-shrink:0}
.logo b{font-size:22px;line-height:1}
.logo span{font-size:8px;color:var(--oro);letter-spacing:1px}
.marca h1{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:3px}
.marca small{display:block;color:var(--oro);letter-spacing:3px;font-size:9px;font-family:var(--sans);font-weight:500;margin-top:3px}
.topbar .titulo{background:var(--amarillo);flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px 28px}
.titulo h2{font-family:var(--serif);font-weight:800;font-size:26px;line-height:1.05;color:var(--negro)}
.titulo p{font-size:11px;font-weight:600;color:#5b4d00;margin-top:4px;letter-spacing:.5px}

/* ===== TABS ===== */
.tabs{display:flex;background:#fff;border-bottom:2px solid var(--negro);position:sticky;top:0;z-index:5}
.tab{padding:13px 22px;font-weight:600;font-size:13px;cursor:pointer;border:none;background:none;color:var(--texto2);border-bottom:3px solid transparent;margin-bottom:-2px}
.tab.activa{color:var(--negro);border-bottom-color:var(--amarillo);background:#fffbe8}
.tab:hover{color:var(--negro)}

.contenedor{max-width:1100px;margin:0 auto;padding:24px 20px 60px}
.panel{display:none}
.panel.activa{display:block}

/* ===== FORM ===== */
.tarjeta{background:#fff;border:1px solid var(--gris2);border-radius:10px;padding:24px;margin-bottom:18px}
.tarjeta h3{font-family:var(--serif);font-size:19px;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--negro);display:flex;align-items:center;gap:10px}
.tarjeta h3::before{content:'';width:10px;height:22px;background:var(--amarillo)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo.ancho{grid-column:1/-1}
label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--texto2)}
input,select,textarea{font-family:var(--sans);font-size:14px;padding:10px 12px;border:1px solid var(--gris2);border-radius:7px;background:#fff;color:var(--texto)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amarillo);outline-offset:-1px;border-color:var(--negro)}
textarea{resize:vertical;min-height:70px}

.btn{font-family:var(--sans);font-weight:600;font-size:13px;padding:11px 20px;border-radius:7px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn-negro{background:var(--negro);color:var(--amarillo)}
.btn-negro:hover{background:#222}
.btn-amarillo{background:var(--amarillo);color:var(--negro)}
.btn-amarillo:hover{background:#f0c800}
.btn-borde{background:#fff;border:1px solid var(--gris2);color:var(--texto)}
.btn-borde:hover{border-color:var(--negro)}
.btn-mini{padding:6px 10px;font-size:12px;border-radius:6px}
.btn-rojo{background:#fff;border:1px solid #f1c6c3;color:var(--rojo)}
.btn-rojo:hover{background:#fdf1f0}
.acciones{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

/* ===== TABLA ===== */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filtros .campo{min-width:130px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--gris2);border-radius:10px;overflow:hidden;font-size:13px}
th{background:var(--negro);color:#fff;text-align:left;padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;white-space:nowrap}
td{padding:10px 12px;border-top:1px solid var(--gris2);vertical-align:top}
tr:hover td{background:#fffdf2}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.folio{font-weight:700;white-space:nowrap}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.pill-pend{background:#fff3c4;color:#7a6200;border:1px solid #eedb8a}
.pill-ok{background:#e2f3e8;color:var(--verde);border:1px solid #bfe3cc}
.td-acc{white-space:nowrap}
.td-acc .btn{margin-right:4px}
.vacio{text-align:center;padding:40px;color:var(--texto2)}

/* ===== RESUMEN ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--gris2);border-radius:10px;padding:18px;border-top:4px solid var(--amarillo)}
.kpi .v{font-family:var(--serif);font-size:26px;font-weight:700}
.kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--texto2);margin-top:4px;font-weight:600}
.kpi.destacado{background:var(--negro);border-color:var(--negro)}
.kpi.destacado .v{color:var(--amarillo)}
.kpi.destacado .l{color:#bbb}

/* ===== MODAL ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.overlay.abierto{display:flex}
.modal{background:#fff;border-radius:12px;max-width:460px;width:100%;overflow:hidden}
.modal-head{background:var(--negro);color:var(--amarillo);padding:16px 22px;font-family:var(--serif);font-size:18px;font-weight:700}
.modal-body{padding:22px}
.calculo{background:var(--gris);border-radius:8px;padding:14px 16px;margin-top:14px}
.calc-fila{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}
.calc-fila.total{border-top:2px solid var(--negro);margin-top:6px;padding-top:10px;font-weight:700;font-size:17px;font-family:var(--serif)}
.modal-foot{padding:0 22px 22px;display:flex;gap:10px;justify-content:flex-end}

.nota-guardado{font-size:12px;color:var(--texto2);margin-top:10px}

/* ===== IMPRESIÓN ===== */
#hoja,#hojaFinal,#hojaReporte{display:none}
@media print{
  body *{visibility:hidden}
  body.print-solicitud #hoja,body.print-solicitud #hoja *{visibility:visible}
  body.print-final #hojaFinal,body.print-final #hojaFinal *{visibility:visible}
  body.print-reporte #hojaReporte,body.print-reporte #hojaReporte *{visibility:visible}
  body.print-solicitud #hoja,body.print-final #hojaFinal,body.print-reporte #hojaReporte{display:block;position:absolute;inset:0;background:#fff;padding:0;font-family:var(--sans);color:#111;font-size:12.5px}
  .r-tabla{width:100%;border-collapse:collapse;margin-top:12px;font-size:10.5px}
  .r-tabla th{background:#0b0b0b !important;color:#fff;padding:6px 8px;text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .r-tabla th.num,.r-tabla td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  .r-tabla td{padding:6px 8px;border-bottom:1px solid #d5d5d5;vertical-align:top}
  .r-tabla tr.r-tot td{border-top:2.5px solid #000;border-bottom:none;font-weight:700;background:#FFF4B8 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .r-sub{font-family:var(--serif);font-size:15px;font-weight:700;margin-top:18px;border-bottom:2px solid #000;padding-bottom:4px}
  .r-kpis{display:flex;gap:14px;margin-top:12px}
  .r-kpi{flex:1;border:1.5px solid #000;padding:10px 12px}
  .r-kpi.dest{background:#0b0b0b !important;color:#FFD400;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .r-kpi .et{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
  .r-kpi .val{font-family:var(--serif);font-size:17px;font-weight:700;margin-top:3px}
  @page{size:letter;margin:14mm}
  .p-top{display:flex;min-height:105px}
  .p-marca{background:#0b0b0b !important;color:#fff;flex:1.15;display:flex;align-items:center;gap:14px;padding:16px 26px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .p-logo{width:56px;height:56px;border:2px solid #c9a227;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif)}
  .p-logo b{font-size:24px;line-height:1;color:#fff}
  .p-logo span{font-size:8px;color:#c9a227;letter-spacing:1px}
  .p-marca h1{font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:3px}
  .p-marca small{display:block;color:#c9a227;letter-spacing:3px;font-size:9px;font-weight:500;margin-top:3px}
  .p-titulo{background:#FFD400 !important;flex:1;display:flex;flex-direction:column;justify-content:center;padding:16px 26px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .p-titulo h2{font-family:var(--serif);font-weight:800;font-size:30px;line-height:1.05;color:#0b0b0b}
  .p-folio{font-size:11px;font-weight:700;margin-top:5px;color:#3f3500;letter-spacing:.5px}
  .p-sec{border-top:2.5px solid #000;border-bottom:2.5px solid #000;margin-top:12px;padding:14px 6px}
  .p-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 20px}
  .p-grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:12px 20px}
  .p-item .et{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#666;font-weight:600}
  .p-item .val{font-size:13px;margin-top:2px;font-weight:500;min-height:16px}
  .p-consumo{margin-top:12px;border:2.5px solid #000;padding:14px 16px;display:flex;justify-content:flex-end;gap:36px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .p-consumo .p-item{text-align:right}
  .p-consumo .val{font-size:15px;font-weight:700}
  .p-consumo .tot .val{font-family:var(--serif);font-size:19px}
  .p-firmas{display:flex;gap:40px;margin-top:56px}
  .p-firma{flex:1;display:flex;gap:10px}
  .p-firma .barra{width:6px;background:#FFD400 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .p-firma .tx{padding-top:2px}
  .p-firma .linea{border-top:1.5px solid #000;margin-bottom:8px;height:0;margin-top:44px}
  .p-firma b{display:block;font-size:12.5px}
  .p-firma span{display:block;font-size:11.5px;color:#333}
}
@media(max-width:640px){
  .topbar{flex-direction:column}
  .tabs{overflow-x:auto}
  table{display:block;overflow-x:auto}
}