:root{
  --blanco:#ffffff;
  --negro:#0b0b0f;

  --gris-900:#14141a;
  --gris-700:#2a2a33;
  --gris-500:#6b6b78;
  --gris-200:#e9e9ee;

  --rojo:#e50914;
  --rojo-oscuro:#b40710;

  --radio:16px;
  --sombra: 0 12px 28px rgba(0,0,0,.10);
}

html,body{ background: var(--blanco); color: var(--negro); }

.bg-app{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(229,9,20,.10), transparent 55%),
    radial-gradient(900px 500px at 110% 10%, rgba(0,0,0,.05), transparent 40%),
    var(--blanco);
}

.container-narrow{ max-width: 560px; }

.card-app{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.logo{
  width: 70px;
  height: 70px;
  border-radius: 18px;
  object-fit: contain;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.10);
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.form-control, .form-select{
  background: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: var(--negro) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(229,9,20,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(229,9,20,.15) !important;
}

.btn-primary{
  background: var(--rojo) !important;
  border-color: var(--rojo) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
.btn-primary:hover{
  background: var(--rojo-oscuro) !important;
  border-color: var(--rojo-oscuro) !important;
}

.btn-outline-dark{
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

.btn-outline-light{
  border-color: rgba(0,0,0,.18) !important;
  color: rgba(0,0,0,.75) !important;
}
.btn-outline-light:hover{
  background: rgba(0,0,0,.06) !important;
  color: var(--negro) !important;
}

.badge-app{
  background: rgba(229,9,20,.10);
  color: rgba(0,0,0,.75);
  border: 1px solid rgba(229,9,20,.25);
  border-radius: 999px;
  padding: 6px 10px;
}

.page-pad{ padding-bottom: 86px; }

.nav-bottom{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
}
.nav-bottom a{
  text-decoration:none;
  color: rgba(0,0,0,.55);
  font-size: 12px;
}
.nav-bottom a.active{ color: var(--negro); font-weight: 600; }
.nav-bottom .dot{
  display:block;
  width: 28px;
  height: 4px;
  background: transparent;
  border-radius: 99px;
  margin: 6px auto 0;
}
.nav-bottom a.active .dot{ background: var(--rojo); }

.table thead th{
  color: rgba(0,0,0,.65);
  border-color: rgba(0,0,0,.10);
}
.table tbody td{
  color: rgba(0,0,0,.85);
  border-color: rgba(0,0,0,.08);
}
.text-secondary{ color: rgba(0,0,0,.55) !important; }
.dataTables_wrapper .dt-buttons .btn { margin-right: 6px; }
.dataTables_wrapper .dataTables_filter input { width: 100%; }
@media (max-width: 576px){
  .dataTables_wrapper .dt-buttons{ display:flex; flex-wrap:wrap; gap:6px; }
}