:root{
  --negro:#121212; --oro:#C8A035; --oro-claro:#e2c260; --oro-oscuro:#7a6a2f;
  --gris:#f4f4f2; --gris2:#e8e8e4; --gris-tx:#555; --linea:#dcdcd6;
  --verde:#2e7d32; --verde-bg:#e6f2e6; --rojo:#b23b3b; --rojo-bg:#f6e4e4;
  --azul:#2f5d8a; --azul-bg:#e4edf6;
  --radio:8px; --sombra:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--negro);background:var(--gris);font-size:14px;line-height:1.5}
a{color:var(--oro-oscuro);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:.2em 0 .5em}
h1{font-size:22px}h2{font-size:18px}h3{font-size:15px}

/* ---------- layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--negro);color:#eee;flex-shrink:0;display:flex;flex-direction:column}
.brand{padding:18px 20px;font-size:22px;font-weight:800;letter-spacing:.5px;border-bottom:1px solid #2a2a2a}
.brand-oro{color:var(--oro)}.brand-cash{color:#fff}
.brand-sub{font-size:11px;font-weight:500;color:#9a9a9a;letter-spacing:2px;margin-top:2px;text-transform:uppercase}
.menu{padding:8px 0;overflow-y:auto;flex:1}
.menu-sep{padding:14px 20px 4px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#7a7a7a}
.menu-item{display:block;padding:9px 20px;color:#d8d8d8;font-size:13.5px;border-left:3px solid transparent}
.menu-item:hover{background:#1e1e1e;text-decoration:none;color:#fff}
.menu-item.activo{background:#1e1e1e;border-left-color:var(--oro);color:var(--oro-claro);font-weight:600}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:56px;background:#fff;border-bottom:1px solid var(--linea);display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.topbar-title{font-size:16px;font-weight:700}
.topbar-user{display:flex;align-items:center;gap:10px;font-size:13px}
.user-nombre{font-weight:600}
.user-rol{background:var(--gris2);color:var(--gris-tx);padding:2px 8px;border-radius:20px;font-size:11px}
.btn-logout{margin-left:6px;background:var(--negro);color:#fff;padding:5px 12px;border-radius:6px;font-size:12px}
.btn-logout:hover{background:#000;text-decoration:none}
.content{padding:22px;flex:1}
.pie{padding:12px 22px;color:var(--gris-tx);font-size:11.5px;border-top:1px solid var(--linea);background:#fff}

/* ---------- botones ---------- */
.btn{display:inline-block;padding:8px 14px;border-radius:6px;border:1px solid var(--linea);background:#fff;color:var(--negro);font-size:13px;cursor:pointer;font-weight:600}
.btn:hover{text-decoration:none;background:var(--gris)}
.btn-primary{background:var(--oro);border-color:var(--oro);color:var(--negro)}
.btn-primary:hover{background:var(--oro-claro)}
.btn-dark{background:var(--negro);color:#fff;border-color:var(--negro)}
.btn-dark:hover{background:#000}
.btn-sm{padding:4px 9px;font-size:12px}
.btn-danger{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn-danger:hover{background:#9a2f2f}
.btn-block{width:100%}
.btn-ghost{background:transparent;border-color:transparent;color:var(--oro-oscuro)}

/* ---------- tarjetas y tablas ---------- */
.card{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:18px;margin-bottom:18px}
.card-title{font-size:15px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--oro)}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.page-head h1{margin:0}

table.grid{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
table.grid th{background:var(--oro);color:var(--negro);text-align:left;padding:9px 10px;font-size:12px;font-weight:700}
table.grid td{padding:8px 10px;border-bottom:1px solid var(--linea)}
table.grid tr:nth-child(even) td{background:#faf9f5}
table.grid tr:hover td{background:#f3eede}
.grid-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio)}
.text-right{text-align:right}.text-center{text-align:center}
.muted{color:var(--gris-tx)}
.nowrap{white-space:nowrap}

/* ---------- badges ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700}
.badge-gris{background:var(--gris2);color:#444}
.badge-verde{background:var(--verde-bg);color:var(--verde)}
.badge-rojo{background:var(--rojo-bg);color:var(--rojo)}
.badge-azul{background:var(--azul-bg);color:var(--azul)}

/* ---------- formularios ---------- */
form .row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:4px}
form .col{flex:1;min-width:200px}
label{display:block;font-size:12.5px;font-weight:600;margin-bottom:12px;color:#333}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--linea);border-radius:6px;font-size:13.5px;font-family:inherit;margin-top:4px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--oro);box-shadow:0 0 0 2px rgba(200,160,53,.2)}
textarea{resize:vertical;min-height:70px}
.form-actions{margin-top:14px;display:flex;gap:10px}
.req{color:var(--rojo)}
fieldset{border:1px solid var(--linea);border-radius:var(--radio);padding:14px;margin-bottom:16px}
legend{font-weight:700;font-size:13px;padding:0 6px;color:var(--oro-oscuro)}

/* ---------- flash ---------- */
.flash{padding:11px 14px;border-radius:6px;margin-bottom:14px;font-size:13.5px;border-left:4px solid}
.flash-exito{background:var(--verde-bg);border-color:var(--verde);color:var(--verde)}
.flash-error{background:var(--rojo-bg);border-color:var(--rojo);color:var(--rojo)}
.flash-info,.flash-aviso{background:var(--azul-bg);border-color:var(--azul);color:var(--azul)}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:16px;box-shadow:var(--sombra);border-top:3px solid var(--oro)}
.kpi-num{font-size:28px;font-weight:800;color:var(--negro)}
.kpi-lbl{font-size:12px;color:var(--gris-tx);margin-top:2px}

/* ---------- barras simples ---------- */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12.5px}
.bar-lbl{width:130px;flex-shrink:0;color:#444}
.bar-track{flex:1;background:var(--gris2);border-radius:20px;height:16px;overflow:hidden}
.bar-fill{height:100%;background:var(--oro);border-radius:20px}
.bar-val{width:32px;text-align:right;font-weight:700}

/* ---------- login ---------- */
.login-body{background:linear-gradient(135deg,#121212,#2a2a2a);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:34px 30px;width:100%;max-width:380px}
.login-brand{font-size:30px;font-weight:800;text-align:center}
.login-sub{text-align:center;color:var(--gris-tx);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:22px}
.login-form label{margin-bottom:14px}
.login-pie{text-align:center;color:#999;font-size:11px;margin-top:18px}
.err-code{font-size:60px;font-weight:800;color:var(--oro)}
.err-msg{color:var(--gris-tx);margin-bottom:18px}

/* ---------- utilidades ---------- */
.flex{display:flex;gap:12px;align-items:center}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.tag-tipo{font-size:11px;padding:2px 7px;border-radius:4px;background:var(--gris2);color:#444;font-weight:600}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filtros label{margin:0}
.filtros .col{min-width:150px}
.total-line{display:flex;justify-content:flex-end;gap:30px;padding:6px 10px;font-size:14px}
.total-line strong{min-width:120px;text-align:right}
.empty{padding:40px;text-align:center;color:var(--gris-tx)}