/* BITS Norte Theme (Option A: rebranding + portada)
   Mantiene Bootstrap, pero aplica identidad visual BITS (azules, oscuro, moderno)
*/

:root{
  --bits-primary:#35B6FF;
  --bits-primary-2:#3A6BFF;
  --bits-ink:#070B12;
  --bits-panel: rgba(255,255,255,.06);
  --bits-line: rgba(255,255,255,.10);
  --bits-text:#EAF2FF;
  --bits-muted: rgba(234,242,255,.72);
}

/* Navbar */
.bits-navbar{
  background: radial-gradient(900px 380px at 15% 0%, rgba(53,182,255,.22), transparent 60%),
              radial-gradient(760px 360px at 85% 10%, rgba(58,107,255,.18), transparent 60%),
              linear-gradient(180deg, rgba(7,11,18,.96), rgba(7,11,18,.90));
  border-bottom: 1px solid var(--bits-line);
  backdrop-filter: blur(10px);
}

.bits-brand-logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 8px;
}

.bits-brand-sub{
  font-weight: 700;
  color: rgba(255,255,255,.72);
  margin-left: .25rem;
}

/* Page base */
body{
  background: radial-gradient(900px 420px at 20% 0%, rgba(53,182,255,.12), transparent 60%),
              radial-gradient(720px 420px at 80% 10%, rgba(58,107,255,.10), transparent 60%),
              #0b1020;
}

/* Hero (portada) */
.bc-hero{
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(53,182,255,.22), transparent 60%),
    radial-gradient(1000px 520px at 80% 10%, rgba(58,107,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(7,11,18,.92), rgba(7,11,18,.78));
  color: var(--bits-text);
  border-bottom: 1px solid var(--bits-line);
}

.bc-badge{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--bits-text);
}

/* Buttons */
.btn-primary{
  background: linear-gradient(90deg, rgba(53,182,255,.35), rgba(58,107,255,.35));
  border-color: rgba(53,182,255,.40);
}
.btn-primary:hover{
  background: linear-gradient(90deg, rgba(53,182,255,.45), rgba(58,107,255,.45));
  border-color: rgba(53,182,255,.55);
}
.btn-outline-secondary{
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.82);
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

/* Cards */
.card{
  border-radius: 16px !important;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04);
}
.card.shadow-sm{
  box-shadow: 0 18px 60px rgba(0,0,0,.25) !important;
}

/* Text */
.text-secondary{
  color: var(--bits-muted) !important;
}

/* Footer */
footer{
  background: rgba(0,0,0,.14);
}

/* ===== FIX CONTRASTE LOGIN ===== */

body {
    color: #EAF2FF;
}

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

label {
    color: #CFE8FF;
    font-weight: 600;
}

.form-control {
    color: #FFFFFF;
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
}

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

.form-check-label {
    color: #CFE8FF;
}

.text-muted {
    color: #9ECFFF !important;
}

/* ===== FIX DROPDOWN MENUS ===== */

.dropdown-menu {
    background-color: #0f1c2e; /* azul oscuro */
    border: 1px solid rgba(53,182,255,.25);
    backdrop-filter: blur(10px);
    border-radius: 14px;
}

.dropdown-item {
    color: #EAF2FF;
}

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

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

/* Texto de navbar */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(234,242,255,.85);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #FFFFFF;
}

.navbar {
    background: linear-gradient(90deg, #0b1626, #10243d);
    border-bottom: 1px solid rgba(53,182,255,.15);
}

/* ===== KPI CARDS (solo dashboard) ===== */
.kpi-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(53,182,255,.18);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

    .kpi-card * {
        color: #EAF2FF !important;
    }

    .kpi-card .kpi-label {
        font-size: 12px;
        opacity: .85;
    }

    .kpi-card .kpi-value {
        font-size: 20px;
        font-weight: 900;
        color: #35B6FF !important;
    }