:root{
  --azul:#1d3f99; --azul-osc:#142d6e; --fondo:#eef2f6; --texto:#1a2340; --suave:#5a6684;
  --borde:#d5dcea; --blanco:#fff; --ok:#1f7a4d; --alerta:#b3261e; --naranja:#c25e00;
  --radio:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--texto);background:var(--fondo)}
[hidden]{display:none!important}
button,input,select{font:inherit}

/* Logo */
.logo-puntos{position:relative;width:64px;height:64px}
.logo-puntos span{position:absolute;border-radius:50%;background:#fff}
.logo-puntos span:nth-child(1){width:22px;height:22px;left:6px;top:10px}
.logo-puntos span:nth-child(2){width:18px;height:18px;left:28px;top:4px;opacity:.8}
.logo-puntos span:nth-child(3){width:24px;height:24px;left:32px;top:24px;opacity:.9}
.logo-puntos span:nth-child(4){width:18px;height:18px;left:12px;top:38px;opacity:.7}
.logo-puntos.peq{width:32px;height:32px;transform:scale(.5);transform-origin:left top;margin-right:-30px;margin-bottom:-32px}

/* Login */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-marca{background:linear-gradient(160deg,var(--azul),var(--azul-osc));color:#fff;display:flex;flex-direction:column;justify-content:center;padding:48px}
.login-marca h1{font-size:56px;margin:16px 0 8px;letter-spacing:.04em}
.login-marca p{margin:0;font-size:18px;opacity:.95}
.login-marca .sub{font-size:14px;opacity:.75;margin-top:6px}
.login-caja{align-self:center;justify-self:center;width:min(380px,90%);background:var(--blanco);padding:32px;border-radius:var(--radio);box-shadow:0 8px 30px rgba(20,45,110,.12);display:flex;flex-direction:column;gap:8px}
.login-caja h2{margin:0;font-size:24px}
.ayuda{margin:0 0 8px;color:var(--suave)}
label{font-size:13px;font-weight:600;color:var(--suave)}
input,select{padding:12px;border:1px solid var(--borde);border-radius:8px;background:#fff;min-height:44px}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid #8fb0ff;outline-offset:1px}
.error{color:var(--alerta);margin:4px 0 0}
@media (max-width:760px){.login{grid-template-columns:1fr}.login-marca{padding:32px 24px}.login-marca h1{font-size:40px}.login-caja{margin:24px auto}}

/* Botones */
.btn{border:0;border-radius:8px;padding:12px 18px;min-height:44px;cursor:pointer;font-weight:600}
.btn.primario{background:var(--azul);color:#fff}.btn.primario:hover{background:var(--azul-osc)}
.btn.texto{background:transparent;color:var(--azul)}

/* Barra */
.barra{background:var(--blanco);border-bottom:1px solid var(--borde);display:flex;align-items:center;gap:24px;padding:8px 24px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.barra .logo-puntos span{background:var(--azul)}
.marca-mini{display:flex;align-items:center;gap:8px;color:var(--azul);font-size:18px}
.menu{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.menu a{padding:10px 14px;border-radius:8px;color:var(--texto);text-decoration:none;font-weight:600}
.menu a.activo{background:var(--fondo);color:var(--azul)}
.usuario{display:flex;align-items:center;gap:8px;color:var(--suave);font-size:14px}

/* Contenido */
.contenido{max-width:1280px;margin:0 auto;padding:24px;outline:none}
.titulo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.titulo h1{margin:0;font-size:26px}
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.filtros label{display:flex;flex-direction:column;gap:4px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--blanco);border-radius:var(--radio);padding:16px;border:1px solid var(--borde)}
.kpi .k{font-size:13px;color:var(--suave);font-weight:600}
.kpi .v{font-size:26px;font-weight:800;margin-top:4px}
.kpi .n{font-size:12px;color:var(--suave);margin-top:4px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}
.tarjeta{background:var(--blanco);border-radius:var(--radio);padding:16px;border:1px solid var(--borde);min-width:0}
.tarjeta.aviso{margin:0 0 16px;border-color:#f3c98b;background:#fff8ec}
.barra-fila .etq{overflow-wrap:anywhere}
.check{flex-direction:row!important;align-items:center;gap:6px;padding-bottom:12px}.check input{min-height:auto}
.paginas{display:flex;align-items:center;gap:4px}
.btn:disabled{opacity:.4;cursor:default}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kpi .v{overflow-wrap:anywhere}
.tarjeta h2{font-size:16px;margin:0 0 12px}
.barras{display:flex;flex-direction:column;gap:8px}
.barra-fila{display:grid;grid-template-columns:150px 1fr 110px;gap:8px;align-items:center;font-size:14px}
.barra-fila .pista{background:var(--fondo);border-radius:6px;height:14px;overflow:hidden}
.barra-fila .relleno{background:var(--azul);height:100%}
.barra-fila .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-caja{overflow-x:auto;background:var(--blanco);border-radius:var(--radio);border:1px solid var(--borde)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--fondo);text-align:left;white-space:nowrap}
th{font-size:12px;color:var(--suave);background:#f7f9fc;position:sticky;top:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--fondo);color:var(--suave)}
.chip.credito{background:#fdecea;color:var(--alerta)}
.chip.contado{background:#e6f4ec;color:var(--ok)}
.chip.anulada{background:#eee;color:#555;text-decoration:line-through}
.vacio{padding:24px;color:var(--suave);text-align:center}
.pie-tabla{display:flex;justify-content:space-between;padding:12px;color:var(--suave);font-size:13px;flex-wrap:wrap;gap:8px}
.cargando{position:fixed;inset:auto 16px 16px auto;background:var(--azul);color:#fff;padding:8px 14px;border-radius:999px;font-size:13px}
@media (max-width:760px){.contenido{padding:16px}.barra{padding:8px 12px;gap:8px}.barra-fila{grid-template-columns:1fr auto}.barra-fila .pista{grid-column:1 / -1;grid-row:2}.kpi .v{font-size:22px}}