:root{--fondo:#f4f5f7;--tarjeta:#fff;--texto:#1f2937;--suave:#6b7280;--borde:#e5e7eb;--acento:#d97706;--acento2:#b45309;--ok:#059669;--mal:#dc2626;--aviso:#ca8a04}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:var(--texto);font-size:15px}
header{background:#111827;color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
header h1{font-size:18px;margin:0;letter-spacing:.3px}
header h1 span{color:var(--acento)}
header form button{background:transparent;color:#d1d5db;border:1px solid #374151;padding:6px 12px;border-radius:6px;cursor:pointer}
main{max-width:1000px;margin:24px auto;padding:0 16px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:10px;padding:20px;margin-bottom:20px}
.tarjeta h2{margin:0 0 6px;font-size:17px}
.tarjeta p.sub{margin:0 0 16px;color:var(--suave);font-size:14px}
.drop{border:2px dashed var(--borde);border-radius:10px;padding:28px;text-align:center;cursor:pointer;transition:.15s}
.drop.activo,.drop:hover{border-color:var(--acento);background:#fffbeb}
.drop input{display:none}
button.prim{background:var(--acento);color:#fff;border:0;padding:10px 18px;border-radius:8px;font-weight:600;cursor:pointer}
button.prim:hover{background:var(--acento2)}
button.prim:disabled{opacity:.5;cursor:default}
.fila-acciones{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}
a{color:#2563eb}
.avisos{margin-top:12px;font-size:13px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:10px 12px}
.avisos ul{margin:4px 0 0;padding-left:18px}
.error{color:var(--mal);margin-top:10px;font-size:14px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--borde);vertical-align:middle}
th{color:var(--suave);font-weight:600;font-size:12px;text-transform:uppercase}
.barra{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;min-width:120px}
.barra div{height:100%;background:var(--acento)}
.estado{font-size:12px;font-weight:600;padding:3px 8px;border-radius:12px;white-space:nowrap}
.e-en_cola{background:#e5e7eb;color:#374151}.e-procesando{background:#fef3c7;color:#92400e}
.e-terminado{background:#d1fae5;color:#065f46}.e-cancelado{background:#f3f4f6;color:#6b7280}.e-error{background:#fee2e2;color:#991b1b}
.acciones button,.acciones a{font-size:13px;margin-right:6px;background:none;border:1px solid var(--borde);padding:4px 8px;border-radius:6px;cursor:pointer;color:var(--texto);text-decoration:none;display:inline-block}
.acciones a.desc{border-color:var(--ok);color:var(--ok);font-weight:600}
.peq{font-size:12px;color:var(--suave)}
.login{max-width:360px;margin:12vh auto}
.login label{display:block;font-size:13px;margin:12px 0 4px;color:var(--suave)}
.login input{width:100%;padding:10px;border:1px solid var(--borde);border-radius:8px;font-size:15px}
.login button{width:100%;margin-top:18px}
@media (max-width:700px){.ocultar-movil{display:none}th,td{padding:8px 4px}}

.gasto .gasto-fila{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px;flex-wrap:wrap}
.gasto .barra{height:10px}
.gasto .barra div.alto{background:var(--mal)}
.gasto .peq{margin-top:6px}
.confirmar{margin-top:12px;border:1px solid var(--borde);border-radius:8px;padding:14px;background:#f9fafb}
.confirmar .cifra{font-size:22px;font-weight:700;margin:4px 0}
.confirmar .fila-acciones{margin-top:10px}
button.sec{background:#fff;border:1px solid var(--borde);padding:10px 18px;border-radius:8px;cursor:pointer}
.e-por_confirmar{background:#dbeafe;color:#1e40af}