/* Smart-Pay — diseño común de las herramientas Smart (referencia: Smart-Quote 1.8.0) */
:root{
  --navy:#16396b; --navy2:#10284e; --marca:#f5b44c;
  --gold:#f5b44c; --hl2:#7cc8ff;
  --fondo:#f4f5f7; --panel:#ffffff; --texto:#1d2433; --suave:#5b6474; --borde:#dde1e8; --borde2:#eceef2;
  --ok:#17663a; --ok-f:#dcf2e4; --mal:#9b1c1c; --mal-f:#fbe2e0; --alerta:#7a4b00; --alerta-f:#fff1d1; --info:#1d4c8f; --info-f:#e2ecfb;
  --radio:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --fondo:#0f1724; --panel:#172234; --texto:#e8ecf3; --suave:#9aa6b8; --borde:#2a3850; --borde2:#223047;
    --ok:#7ee0a3; --ok-f:#173a27; --mal:#ffaaa3; --mal-f:#46201d; --alerta:#ffd58a; --alerta-f:#3d2f12; --info:#a9c8ff; --info-f:#1b2c49; }
}
:root[data-theme="dark"]{ --fondo:#0f1724; --panel:#172234; --texto:#e8ecf3; --suave:#9aa6b8; --borde:#2a3850; --borde2:#223047;
  --ok:#7ee0a3; --ok-f:#173a27; --mal:#ffaaa3; --mal-f:#46201d; --alerta:#ffd58a; --alerta-f:#3d2f12; --info:#a9c8ff; --info-f:#1b2c49; }
:root[data-theme="light"]{ color-scheme:light } :root[data-theme="dark"]{ color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{font-family:Calibri,Carlito,"Segoe UI",sans-serif;font-size:15px;background:var(--fondo);color:var(--texto);line-height:1.45}
a{color:var(--navy)} :root[data-theme="dark"] a{color:var(--hl2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.r{text-align:right}

/* ---- Estructura ---- */
.app{display:flex;min-height:100vh}
.lateral{width:258px;flex:none;background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.contenido{flex:1;min-width:0;padding:22px 28px 48px}
.barra{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.barra h1{margin:0;font-size:24px}
.rol{font-size:13px;color:var(--suave)}

.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;padding:18px 18px 12px}
.marca-circulo{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;box-shadow:inset 0 0 0 3px var(--marca)}
.marca-img{width:42px;height:42px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.marca-img img{width:34px;height:34px}
.marca-doc{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:700;color:#16396b}.marca-doc b{color:#f5b44c}
.marca-nombre{font-size:21px;font-weight:700;letter-spacing:.2px}
.marca-nombre b{color:var(--marca)}
.marca.grande{justify-content:center;color:var(--navy);padding:0}
.marca.grande .marca-circulo{background:var(--navy);color:#fff;width:46px;height:46px;font-size:24px}
.marca.grande .marca-nombre{font-size:28px}
:root[data-theme="dark"] .marca.grande{color:#fff}

.cia-sel{padding:0 14px 10px} .cia-sel select{width:100%;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
.cia-sel option{color:#111}
.cia-una{padding:0 18px 10px;font-size:13px;color:#cdd6e6}

.menu{flex:1;padding:4px 10px}
.grupo{margin:6px 0}
.grupo summary{list-style:none;cursor:pointer;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:6px 10px;border-left:3px solid var(--gold);background:rgba(255,255,255,.06);border-radius:4px;color:#dfe6f2}
.grupo summary::-webkit-details-marker{display:none}
.grupo.actual summary{background:rgba(255,255,255,.14);color:#fff}
.grupo a,.pie-menu a,.pie-menu .enlace{display:flex;align-items:center;gap:9px;padding:7px 10px 7px 12px;margin:2px 0 2px 12px;border-radius:6px;color:#e6ecf5;text-decoration:none;font-size:.9rem;border-left:3px solid transparent}
.grupo a .ico,.pie-menu .ico{opacity:.85;flex:none}
.grupo a:hover,.pie-menu a:hover,.pie-menu .enlace:hover{background:rgba(255,255,255,.08)}
.grupo a:hover .ico{opacity:1}
.grupo a.activo,.pie-menu a.activo{background:rgba(255,255,255,.12);border-left-color:var(--hl2);box-shadow:0 2px 8px rgba(0,0,0,.18);color:#fff}
.grupo a.activo .ico{color:var(--hl2);opacity:1}
.burbuja{margin-left:auto;background:var(--gold);color:#10284e;font-style:normal;font-weight:700;font-size:12px;border-radius:999px;padding:0 7px}
.pie-menu{border-top:1px solid rgba(255,255,255,.15);padding:8px 10px 14px}
.pie-menu form{margin:0}
.pie-menu .enlace{background:none;border:0;width:calc(100% - 12px);font:inherit;cursor:pointer;text-align:left}
.version{font-size:12px;color:#aeb9cc;padding:8px 12px 0}

/* ---- Componentes ---- */
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:18px 20px;margin-bottom:18px}
.panel h2{margin:0 0 12px;font-size:18px} .panel h3{margin:14px 0 8px;font-size:16px}
.ayuda{color:var(--suave);font-size:14px;margin:0 0 12px}
.fila{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 14px;align-items:end}
.campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.campo label,.etq{font-size:13px;color:var(--suave)}
input,select,textarea{font:inherit;color:var(--texto);background:var(--panel);border:1px solid var(--borde);border-radius:7px;padding:8px 10px;min-height:40px;width:100%}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}
input.num{text-align:right}
.boton,button.boton{display:inline-flex;align-items:center;gap:7px;justify-content:center;font:inherit;font-weight:700;border-radius:7px;padding:9px 16px;min-height:40px;cursor:pointer;border:1px solid var(--navy);background:var(--navy);color:#fff;text-decoration:none}
.boton:hover{filter:brightness(1.1)}
.boton.sec{background:var(--panel);color:var(--texto);border-color:var(--borde)}
.boton.peligro{background:var(--mal);border-color:var(--mal);color:#fff}
.boton.dorado{background:var(--gold);border-color:var(--gold);color:#10284e}
.boton.chico{padding:5px 10px;min-height:32px;font-size:13px;font-weight:600}
button:disabled,.boton[aria-disabled=true]{opacity:.5;cursor:not-allowed}

.aviso{border-radius:8px;padding:10px 14px;margin:0 0 12px;font-weight:600}
.aviso-ok{background:var(--ok-f);color:var(--ok)} .aviso-error{background:var(--mal-f);color:var(--mal)}
.aviso-info{background:var(--info-f);color:var(--info)} .aviso-alerta{background:var(--alerta-f);color:var(--alerta)}

.tabla-caja{overflow-x:auto;border:1px solid var(--borde2);border-radius:8px}
table{border-collapse:collapse;width:100%}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);text-align:left;padding:8px 10px;border-bottom:1px solid var(--borde);white-space:nowrap;background:var(--panel)}
td{padding:8px 10px;border-bottom:1px solid var(--borde2);vertical-align:top}
tr.anulado td{color:var(--suave);text-decoration:line-through} tr.anulado td.motivo{text-decoration:none}
tfoot td{font-weight:700;background:var(--fondo)}
.sub{display:block;font-size:12px;color:var(--suave)}
.chip{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;white-space:nowrap}
.p-ok{background:var(--ok-f);color:var(--ok)} .p-mal{background:var(--mal-f);color:var(--mal)} .p-alerta{background:var(--alerta-f);color:var(--alerta)}
.p-info{background:var(--info-f);color:var(--info)} .p-gris{background:var(--borde2);color:var(--suave)}
.pos{color:var(--ok)} .neg{color:var(--mal)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:14px 16px;border-top:3px solid var(--gold)}
.kpi .etq{display:block} .kpi .val{font-size:24px;font-weight:700;display:block;margin:2px 0} .kpi .det{font-size:13px;color:var(--suave)}

.barras{display:flex;flex-direction:column;gap:8px}
.barra-fila{display:grid;grid-template-columns:150px 1fr 140px;gap:10px;align-items:center;font-size:14px}
.barra-fondo{background:var(--borde2);border-radius:4px;height:14px;overflow:hidden}
.barra-valor{display:block;height:100%;background:var(--navy);border-radius:4px} :root[data-theme="dark"] .barra-valor{background:var(--hl2)}

.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filtros .campo{width:auto;min-width:130px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vacio{padding:22px;text-align:center;color:var(--suave)}
details.mas summary{cursor:pointer;color:var(--suave);font-size:14px}

/* ---- Entrada (mismo diseño que Smart-Process) ---- */
body.entrada{background:#EEF2F7;color:#1B2433}
.ent-main{min-height:100vh;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;padding:24px 16px;box-sizing:border-box}
.ent-card{width:100%;max-width:420px;display:flex;flex-direction:column;gap:16px;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(20,33,61,.14);padding:20px;border-top:5px solid #f5b44c}
.ent-marca{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ent-marca img{width:84px;height:84px}
.ent-nombre{margin:2px 0 0;font-size:24px;font-weight:700;color:#16396b;letter-spacing:-.01em}
.ent-nombre b{color:#f5b44c;font-weight:700}
.ent-kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4F6F9A}
.ent-card form{display:flex;flex-direction:column;gap:12px}
.ent-card .campo{gap:0}
.ent-card .campo label,.ent-card label.etq{font-size:13px;font-weight:700;color:#3C4C66;letter-spacing:.03em;text-transform:uppercase;display:block;margin-bottom:6px}
.ent-card input,.ent-card select{font-size:15.5px;color:#1B2433;background:#fff;border:1px solid #B9C6D8;border-radius:8px;padding:10px 12px;min-height:44px}
.ent-card input:focus{outline:2px solid #f5b44c;outline-offset:1px;border-color:#16396b}
.ent-card .boton{width:100%;min-height:44px;font-size:15.5px;border-radius:8px;background:#16396b;border-color:#16396b;color:#fff}
.ent-card .boton:hover{background:#10284e;filter:none}
.ent-card .ayuda{font-size:14.5px;color:#4A5A72;line-height:1.5;margin:0}
.ent-card .enlace-sec{text-align:center;font-size:14.5px;color:#16396b}
.ent-msg{padding:10px 12px;border-radius:8px;font-size:14.5px;font-weight:700}
.ent-ok{background:#F1F8F3;color:#1F6B3A} .ent-err{background:#FDECEA;color:#8A1C12}
.ent-firma{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 16px 28px;font-size:13px;font-weight:700;color:#4A5A72;letter-spacing:.04em;text-transform:uppercase}
.ent-firma img{height:72px;width:auto}
:root[data-theme="dark"] body.entrada{background:#0e1621;color:#dfe7f1}
:root[data-theme="dark"] .ent-card{background:#162130;box-shadow:0 1px 3px rgba(0,0,0,.4)}
:root[data-theme="dark"] .ent-nombre{color:#bcd4f2} :root[data-theme="dark"] .ent-kicker{color:#8fa8c8}
:root[data-theme="dark"] .ent-card .campo label{color:#b3c2d6} :root[data-theme="dark"] .ent-card input{background:#0f1a28;color:#dfe7f1;border-color:#3a4e69}
:root[data-theme="dark"] .ent-card .boton{background:#2b5b9c;border-color:#2b5b9c} :root[data-theme="dark"] .ent-firma,:root[data-theme="dark"] .ent-card .ayuda{color:#a3b3c8}
:root[data-theme="dark"] .ent-err{background:#3a1d1b;color:#f2a49b} :root[data-theme="dark"] .ent-ok{background:#16301f;color:#8fd6a5}

/* ---- Comprobante imprimible ---- */
.comprobante{background:#fff;color:#1d2433;max-width:1000px;padding:28px;border:1px solid var(--borde);border-radius:8px}
.comprobante .enc{display:flex;justify-content:space-between;gap:16px;border-bottom:3px solid var(--marca);padding-bottom:12px;margin-bottom:14px}
.comprobante th{background:#fff;color:#5b6474} .comprobante td{border-color:#e5e7eb}
.firmas{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:56px}
.firmas div{border-top:1px solid #1d2433;padding-top:6px;font-size:13px}
@media print{
  .lateral,.barra,.aviso,.no-imprimir{display:none !important}
  body{background:#fff} .contenido{padding:0} .comprobante{border:0;max-width:none;padding:0}
  @page{margin:14mm}
}

/* ---- Celular: barra horizontal arriba, con íconos y sin títulos de grupo ---- */
@media (max-width: 820px){
  .app{flex-direction:column}
  .lateral{position:sticky;top:0;z-index:20;width:100%;height:auto;flex-direction:row;flex-wrap:nowrap;align-items:center;overflow-x:auto;overflow-y:hidden}
  .marca{padding:8px 10px} .marca-nombre,.cia-sel,.cia-una,.version{display:none}
  .menu{display:flex;flex-wrap:nowrap;flex:none;padding:0}
  .grupo{display:inline-block;white-space:nowrap;margin:0;flex:none} .grupo summary{display:none}
  .grupo a{display:inline-flex}
  .grupo a,.pie-menu a,.pie-menu .enlace{margin:4px 2px;padding:9px;border-left:0;border-bottom:3px solid transparent}
  .grupo a span,.pie-menu span{display:none}
  .grupo a.activo{border-bottom-color:var(--hl2)}
  .pie-menu{display:flex;border:0;padding:0}
  .contenido{padding:16px}
  .barra-fila{grid-template-columns:100px 1fr 110px}
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .barra-valor{background:var(--hl2)} :root:not([data-theme="light"]) a{color:var(--hl2)} :root:not([data-theme="light"]) .marca.grande{color:#fff} }