:root {
  --fondo: #f8fafc;
  --superficie: #ffffff;
  --texto: #1e293b;
  --texto-suave: #64748b;
  --borde: #e2e8f0;
  --primario: #2e8558;
  --primario-hover: #256d48;
  --oscuro: #0f1f2e;
  --cian: #1aabcd;
  --verde: #3d9b6a;
  --ok: #2e8558;
  --peligro: #c0392b;
  --radio: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Inter, system-ui, sans-serif; font-weight: 400; background: var(--fondo); color: var(--texto); font-size: 14px; }
[hidden] { display: none !important; }
h1, h2, h3, .marca, .kpi-num { font-family: Poppins, system-ui, sans-serif; }
h1, h2, h3 { font-weight: 700; margin: 0 0 .5rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; }
.sub { color: var(--texto-suave); margin: 0 0 1.25rem; font-weight: 300; }

input, select { font: inherit; padding: .5rem .7rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: var(--texto); min-width: 0; }
input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--primario) 35%, transparent); border-color: var(--primario); }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--texto-suave); }
label.check { flex-direction: row; align-items: center; color: var(--texto); }

.btn { font: inherit; font-weight: 600; border: 1px solid var(--borde); background: #fff; color: var(--texto); padding: .5rem 1rem; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--primario); color: var(--primario); }
.btn.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn.primario:hover { background: var(--primario-hover); color: #fff; }
.btn.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn.fantasma { background: transparent; }
.btn.chico { padding: .25rem .7rem; font-size: .8rem; }

.marca { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; }
.marca small { font-family: Inter, system-ui, sans-serif; font-weight: 400; color: var(--texto-suave); font-size: .85rem; }
.marca-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--verde), var(--cian)); color: #fff; font-size: .9rem; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 20% 70%, #1aabcd2e, transparent 45%), radial-gradient(circle at 80% 25%, #3d9b6a33, transparent 45%), var(--oscuro); }
.login-card { width: min(380px, 100%); background: var(--superficie); border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 20px 60px #0006; }
.login-card h1 { font-size: 1.3rem; margin-top: .5rem; }

/* App */
.topbar { display: flex; align-items: center; gap: 1.5rem; padding: .75rem 1.5rem; background: var(--superficie); border-bottom: 1px solid var(--borde); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.tabs { display: flex; gap: .25rem; flex: 1; overflow-x: auto; }
.tabs button { font: inherit; border: 0; background: transparent; padding: .5rem .9rem; border-radius: 8px; cursor: pointer; color: var(--texto-suave); }
.tabs button.activo { background: #3d9b6a1a; color: var(--primario); font-weight: 600; }
.usuario { display: flex; align-items: center; gap: .6rem; color: var(--texto-suave); }
.pill { background: #1aabcd1a; color: #13809a; border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 500; }
main { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-top: 3px solid var(--verde); border-radius: var(--radio); padding: 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.kpi-num { font-size: 2rem; font-weight: 700; color: var(--oscuro); font-variant-numeric: tabular-nums; }
.kpi-num.ok { color: var(--ok); font-size: 1.4rem; }
.kpi-lbl { color: var(--texto-suave); font-size: .85rem; }
.atajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.atajo { font: inherit; text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; color: var(--texto); }
.atajo:hover { border-color: var(--primario); }
.atajo span { color: var(--texto-suave); font-weight: 300; }

.cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filtros input[name=q] { flex: 1 1 220px; }
.filtros input[type=number] { width: 130px; }

.tabla-wrap { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { font-weight: 600; color: var(--texto-suave); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; background: #f1f5f9; }
td.num { font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #f8fafc; }
tbody tr:last-child td { border-bottom: 0; }
td.acc { text-align: right; }
td.vacio { text-align: center; color: var(--texto-suave); padding: 2rem; white-space: normal; }
.si { color: var(--ok); font-weight: 500; }
.legacy { color: var(--texto-suave); font-style: italic; }

.paginador { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; color: var(--texto-suave); gap: 1rem; flex-wrap: wrap; }
.paginador .botones { display: flex; gap: .4rem; }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

dialog { border: 0; border-radius: 16px; padding: 0; width: min(440px, calc(100% - 32px)); box-shadow: 0 20px 60px #0005; }
dialog::backdrop { background: #0f1f2e99; }
dialog form { padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fila label, .fila select, .fila input { min-width: 0; width: 100%; }
.acciones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.error { color: var(--peligro); margin: 0; font-size: .85rem; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--oscuro); color: #fff; padding: .7rem 1.2rem; border-radius: 8px; z-index: 20; }

@media (max-width: 640px) {
  .topbar { padding: .75rem 16px; gap: .75rem; }
  main { padding: 1rem 16px; }
  .filtros input[type=number] { width: calc(50% - .25rem); }
}