/* =========================================================
   BITS Norte - Theme (Opción A: Rebranding + Contraste)
   ========================================================= */

:root{
  --bits-bg-0:#070b12;
  --bits-bg-1:#0b1626;
  --bits-bg-2:#0f1c2e;
  --bits-text:#EAF2FF;
  --bits-text-2:rgba(234,242,255,.75);
  --bits-border:rgba(255,255,255,.10);
  --bits-accent:#35B6FF;
  --bits-accent-2:rgba(53,182,255,.25);
}

html, body{
  height:100%;
}

body{
  color: var(--bits-text);
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(53,182,255,.14), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(53,182,255,.10), transparent 50%),
    linear-gradient(180deg, var(--bits-bg-0), var(--bits-bg-1) 45%, #05070c);
}

a{ color: var(--bits-accent); }
a:hover{ color:#9ad8ff; }

h1,h2,h3,h4,h5{ color:#fff; }

/* Navbar */
.navbar{
  background: linear-gradient(90deg, var(--bits-bg-1), #10243d) !important;
  border-bottom: 1px solid rgba(53,182,255,.15);
}

.navbar .navbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

.navbar .navbar-brand img{
  width:28px;
  height:28px;
  object-fit:contain;
}

.navbar-dark .navbar-nav .nav-link{
  color: rgba(234,242,255,.82);
}
.navbar-dark .navbar-nav .nav-link:hover{
  color:#fff;
}

/* Cards */
.card{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--bits-border);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  color: var(--bits-text);
}

.card .card-header{
  background: rgba(53,182,255,.14) !important;
  border-bottom: 1px solid rgba(53,182,255,.20);
  color:#fff !important;
}

/* Forms */
label, .form-label, .form-check-label{
  color: rgba(234,242,255,.85) !important;
  font-weight:600;
}

.form-control, .form-select{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  border-radius: 12px;
}

.form-control::placeholder{
  color: rgba(255,255,255,.55);
}

.form-control:focus, .form-select:focus{
  border-color: rgba(53,182,255,.55);
  box-shadow: 0 0 0 .2rem rgba(53,182,255,.18);
}

/* Buttons */
.btn-primary{
  background: linear-gradient(90deg, rgba(53,182,255,.55), rgba(53,182,255,.28));
  border-color: rgba(53,182,255,.55);
}
.btn-primary:hover{
  border-color: rgba(53,182,255,.75);
  filter: brightness(1.06);
}

.btn-outline-primary{
  border-color: rgba(53,182,255,.50);
  color: var(--bits-text);
}
.btn-outline-primary:hover{
  background: rgba(53,182,255,.15);
  border-color: rgba(53,182,255,.75);
  color:#fff;
}

/* Alerts */
.alert{
  border-radius: 14px;
}

/* Dropdown menus */
.dropdown-menu{
  background-color: var(--bits-bg-2);
  border: 1px solid rgba(53,182,255,.25);
  backdrop-filter: blur(10px);
  border-radius: 14px;
}

.dropdown-item{
  color: var(--bits-text);
}

.dropdown-item:hover,
.dropdown-item:focus{
  background-color: rgba(53,182,255,.15);
  color:#fff;
}

.dropdown-divider{
  border-color: rgba(255,255,255,.10);
}

/* Tables */
table, .table{
  color: var(--bits-text) !important;
}

.table thead th{
  color:#fff !important;
  border-color: rgba(255,255,255,.15);
}

.table tbody td{
  color: var(--bits-text) !important;
  border-color: rgba(255,255,255,.08);
}

.table-hover tbody tr:hover{
  background-color: rgba(53,182,255,.08);
}

/* DataTables controls */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label{
  color: rgba(234,242,255,.85) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background-color: rgba(255,255,255,.08);
  color:#fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color: rgba(234,242,255,.85) !important;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: rgba(53,182,255,.25) !important;
  border-color: rgba(53,182,255,.45) !important;
  color:#fff !important;
}

/* Helpers */
.text-muted{ color: rgba(234,242,255,.70) !important; }
.text-primary{ color: #9ad8ff !important; }

/* Demo hero card */
.bits-hero{
  border: 1px solid rgba(53,182,255,.18);
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(53,182,255,.18), transparent 60%),
    rgba(255,255,255,.05);
}
.bits-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(53,182,255,.25);
  background: rgba(53,182,255,.10);
  color: rgba(234,242,255,.90);
  font-size: 12px;
}
.bits-check{
  color:#66f2a7;
}

/* ===== FIX DEFINITIVO: DataTables texto invisible ===== */

/* 1) Forzar texto en celdas */
table.dataTable tbody td,
table.dataTable tbody th,
.dataTables_wrapper table tbody td,
.dataTables_wrapper table tbody th {
    color: #111827 !important; /* texto oscuro */
}

/* 2) Fondo de filas (para que haya contraste) */
table.dataTable tbody tr {
    background-color: #ffffff !important; /* fondo blanco */
}

    /* 3) Alternado */
    table.dataTable.stripe tbody tr.odd,
    table.dataTable.display tbody tr.odd,
    table.dataTable tbody tr:nth-of-type(odd) {
        background-color: #f3f4f6 !important;
    }

/* 4) Hover */
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: #e5f2ff !important;
}

/* 5) Header permanece oscuro */
table.dataTable thead th,
table.dataTable thead td {
    color: #ffffff !important;
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}