:root{
  --app-bg:#0b0d10;
  --app-panel:#11151a;
  --app-panel-2:#0f1216;
  --app-border:rgba(255,255,255,.08);
  --app-text:rgba(255,255,255,.88);
  --app-muted:rgba(255,255,255,.55);
  --app-red:#e1122b;
  --app-red-2:#ff2d45;
  --app-shadow:0 8px 24px rgba(0,0,0,.45);
}
html,body{height:100%;}
body{
  font-family:"Oswald",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1000px 500px at 30% 0%, rgba(225,18,43,.18), transparent 60%),
             radial-gradient(800px 500px at 80% 20%, rgba(255,45,69,.12), transparent 60%),
             var(--app-bg);
  color:var(--app-text);
  letter-spacing:.2px;
}
.app-navbar{
  background:linear-gradient(180deg, rgba(17,21,26,.98), rgba(15,18,22,.92));
  border-bottom:1px solid var(--app-border);
  box-shadow:var(--app-shadow);
}
.brand-mark{width:12px;height:12px;border-radius:4px;background:var(--app-red);box-shadow:0 0 0 4px rgba(225,18,43,.14);}
.brand-text{font-weight:600;letter-spacing:.6px;text-transform:uppercase;}
.app-card{
  background:linear-gradient(180deg, rgba(17,21,26,.96), rgba(12,15,19,.96));
  border:1px solid var(--app-border);
  border-radius:18px;
  box-shadow:var(--app-shadow);
}
.table.table-dark{
  --bs-table-bg:transparent;
  --bs-table-striped-bg:rgba(255,255,255,.03);
  --bs-table-hover-bg:rgba(255,255,255,.04);
  --bs-table-border-color:var(--app-border);
}
.table thead th{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:rgba(255,255,255,.7);
}
.table td,.table th{border-color:var(--app-border);}
.app-input{
  background:rgba(255,255,255,.03);
  border:1px solid var(--app-border);
  color:var(--app-text);
}
.app-input:focus{
  background:rgba(255,255,255,.04);
  border-color:rgba(225,18,43,.55);
  box-shadow:0 0 0 .2rem rgba(225,18,43,.18);
  color:var(--app-text);
}
.form-text{color:var(--app-muted)!important;}
.btn-danger{
  background:linear-gradient(180deg, var(--app-red), #b90c21);
  border:1px solid rgba(225,18,43,.55);
}
.btn-danger:hover{
  background:linear-gradient(180deg, var(--app-red-2), var(--app-red));
  border-color:rgba(255,45,69,.65);
}
.btn-outline-light{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.86);}
.btn-outline-light:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff;}
.kpi-label{color:var(--app-muted);text-transform:uppercase;letter-spacing:.6px;font-size:.82rem;}
.kpi-value{font-size:1.55rem;font-weight:600;}
.alert{border-radius:14px;border:1px solid var(--app-border);box-shadow:var(--app-shadow);}
.pagination .page-link{background:rgba(255,255,255,.03);border-color:var(--app-border);color:rgba(255,255,255,.8);}
.pagination .page-item.active .page-link{background:rgba(225,18,43,.25);border-color:rgba(225,18,43,.55);color:#fff;}
.pagination .page-link:hover{background:rgba(255,255,255,.05);}
hr.border-secondary{opacity:.35;}
.text-muted{color:var(--app-muted)!important;}


/* Bootstrap + selects en tema oscuro */
.app-bg{
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  color-scheme: dark;
}
.form-label{ color: rgba(255,255,255,.78); }
.form-control::placeholder{ color: rgba(255,255,255,.35); }
.form-control, .form-select{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--app-border) !important;
  color: var(--app-text) !important;
}
/*
  Nota:
  En algunos navegadores el desplegable nativo ignora el background de option,
  pero SI respeta el color del texto. Para evitar "fondo blanco + texto blanco",
  forzamos options a negro sobre blanco (legible siempre).
*/
.form-select option{
  background-color: #ffffff !important;
  color: #111111 !important;
}