/* =========================================================
   ESTILO GLOBAL — Facturación DDigital21
   Verde menta #1FE090 · Carbón #262D3D
   ========================================================= */
:root{
  --verde:#1FE090;
  --verde-osc:#12b673;
  --carbon:#262D3D;
  --carbon-claro:#3a4255;
  --gris:#6b7280;
  --gris-claro:#f4f6f8;
  --borde:#e2e6ea;
  --rojo:#e5484d;
  --naranja:#f5a623;
  --azul:#3b82f6;
  --blanco:#ffffff;
  --sombra:0 2px 12px rgba(38,45,61,.08);
  --radio:12px;
  --fuente:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fuente);background:var(--gris-claro);color:var(--carbon);line-height:1.5;font-size:15px}
a{color:var(--verde-osc);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--carbon) 0%,#1a1f2b 100%);padding:20px}
.login-card{background:#fff;border-radius:16px;padding:42px 38px;width:100%;max-width:400px;
  box-shadow:0 12px 40px rgba(0,0,0,.3)}
.login-card .logo{text-align:center;margin-bottom:8px;font-size:26px;font-weight:800;letter-spacing:-.5px}
.login-card .logo span{color:var(--verde)}
.login-card .sub{text-align:center;color:var(--gris);margin-bottom:28px;font-size:14px}

/* ---------- FORM ---------- */
label{display:block;font-weight:600;font-size:13px;margin-bottom:6px;color:var(--carbon)}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--borde);border-radius:9px;
  font-family:inherit;font-size:14px;background:#fff;color:var(--carbon);transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(31,224,144,.15)}
.campo{margin-bottom:16px}
.fila{display:flex;gap:14px;flex-wrap:wrap}
.fila>.campo{flex:1;min-width:140px}

/* ---------- BOTONES ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;justify-content:center;
  padding:11px 20px;border:none;border-radius:9px;font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:.15s;text-decoration:none}
.btn-primary{background:var(--verde);color:var(--carbon)}
.btn-primary:hover{background:var(--verde-osc);color:#fff;text-decoration:none}
.btn-dark{background:var(--carbon);color:#fff}
.btn-dark:hover{background:var(--carbon-claro);color:#fff;text-decoration:none}
.btn-light{background:#fff;color:var(--carbon);border:1px solid var(--borde)}
.btn-light:hover{background:var(--gris-claro);text-decoration:none}
.btn-danger{background:var(--rojo);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:7px 13px;font-size:13px}

/* ---------- LAYOUT APP ---------- */
.topbar{background:var(--carbon);color:#fff;padding:0 24px;height:60px;display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;z-index:50}
.topbar .marca{font-size:19px;font-weight:800;letter-spacing:-.5px}
.topbar .marca span{color:var(--verde)}
.topbar nav{display:flex;gap:4px;align-items:center}
.topbar nav a{color:#cbd2dc;padding:8px 14px;border-radius:8px;font-weight:500;font-size:14px}
.topbar nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.topbar nav a.activo{background:var(--verde);color:var(--carbon);font-weight:600}
.contenido{max-width:1200px;margin:0 auto;padding:28px 24px}

/* ---------- TARJETAS ---------- */
.card{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:24px;margin-bottom:22px}
.card h2{font-size:18px;margin-bottom:18px}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.page-head h1{font-size:24px;font-weight:800}

/* ---------- TABLAS ---------- */
table.tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
table.tabla th{background:#fafbfc;text-align:left;padding:13px 16px;font-size:12px;text-transform:uppercase;
  letter-spacing:.3px;color:var(--gris);border-bottom:1px solid var(--borde)}
table.tabla td{padding:13px 16px;border-bottom:1px solid var(--borde);font-size:14px}
table.tabla tr:last-child td{border-bottom:none}
table.tabla tr:hover td{background:#fafbfc}
.text-right{text-align:right}
.text-center{text-align:center}

/* ---------- BADGES ESTADO ---------- */
.badge{display:inline-block;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600}
.badge-borrador{background:#eef0f3;color:#6b7280}
.badge-pendiente{background:#fff3e0;color:#e58900}
.badge-enviada{background:#e3f0ff;color:#2563eb}
.badge-pagada{background:#e3f9ed;color:#12a05a}
.badge-vencida{background:#fdeaea;color:#e5484d}
.badge-aceptado{background:#e3f9ed;color:#12a05a}
.badge-rechazado{background:#fdeaea;color:#e5484d}

/* ---------- ALERTAS ---------- */
.alerta{padding:13px 16px;border-radius:9px;margin-bottom:18px;font-size:14px}
.alerta-error{background:#fdeaea;color:#c0392b;border:1px solid #f5c6c6}
.alerta-ok{background:#e3f9ed;color:#12834a;border:1px solid #b8e6cc}

/* ---------- DASHBOARD KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-bottom:26px}
.kpi{background:#fff;border-radius:var(--radio);padding:22px;box-shadow:var(--sombra);border-left:4px solid var(--verde)}
.kpi .label{font-size:13px;color:var(--gris);font-weight:500;margin-bottom:6px}
.kpi .valor{font-size:28px;font-weight:800;color:var(--carbon)}
.kpi.naranja{border-left-color:var(--naranja)}
.kpi.rojo{border-left-color:var(--rojo)}
.kpi.azul{border-left-color:var(--azul)}

.muted{color:var(--gris);font-size:13px}
.mt{margin-top:18px}
hr{border:none;border-top:1px solid var(--borde);margin:18px 0}