/* =========================================================
   GS507 — Tema Dark Neo (azul → morado profundo)
   ========================================================= */

/* radios globales */
:root { --radius: 14px; }

/* paleta y tokens */
:root{
  --grad-1: #0b1a36;
  --grad-2: #1a1646;
  --grad-3: #3a1572;

  --glass-bg: rgba(8,10,20,.55);
  --glass-br: rgba(255,255,255,.08);

  --text-1: #eef2ff;
  --text-2: #c7cbe6;

  /* acentos */
  --primary:  #5b4bf4;
  --primary-2:#8a3de5;
  --indigo:   #2d6df6;
  --accent:   #22d3ee;

  /* estados */
  --success:#10b981;
  --warning:#f59e0b;
  --danger: #ef4444;
  --info:   #38bdf8;

  /* bordes */
  --border: rgba(255,255,255,.12);
}

/* ===== Base ===== */
html, body { background:#0a1224; color:var(--text-1); }
a, .card-glass a{ color:#9bb6ff; text-decoration:none; }
a:hover, .card-glass a:hover{ color:#d3dcff; text-decoration:underline; }

.text-white-50,
.card-glass .text-white-50{ color:var(--text-2)!important; }

.text-gradient{
  background:linear-gradient(90deg,#f3f6ff,#e6ebff);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ===== Fondo degradado con brillos ===== */
.gradient-bg{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(255,255,255,.06) 0%, transparent 60%),
    radial-gradient(900px 450px at 110% 20%, rgba(255,255,255,.05) 0%, transparent 60%),
    linear-gradient(135deg, #0a1224 0%, var(--grad-1) 35%, var(--grad-2) 68%, var(--grad-3) 100%);
  color:var(--text-1);
}

/* ===== Navbar / tarjetas glass ===== */
.navbar-glass{
  background:rgba(6,8,16,.65);
  border-bottom:1px solid var(--glass-br);
  backdrop-filter:blur(12px);
}

.card, .card-glass{ border-radius:var(--radius); }
.card-glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-br);
  color:var(--text-1);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
}

/* ===== Botones ===== */
.btn{ border-radius:12px; }

.btn-gradient{
  background-image:linear-gradient(135deg, var(--indigo) 0%, var(--primary) 45%, var(--primary-2) 100%);
  color:#fff; border:0;
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-gradient:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 12px 26px rgba(45,109,246,.25); }

.btn-outline-light{ border-color:rgba(255,255,255,.35)!important; color:#fff!important; }
.btn-outline-light:hover{ border-color:#fff!important; background:rgba(255,255,255,.08)!important; }

.btn-ghost{ background:transparent; border:1px solid transparent; color:#fff; }
.btn-ghost:hover{ border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06); }

.bg-gradient{ background:linear-gradient(135deg, var(--indigo), var(--primary-2)); border:none; }

/* pills de filtros (wallet) */
.badge-pill{ border-radius:999px; padding:.45rem .85rem; }
.btn-outline-light.badge-pill{ background:transparent; border:1px solid var(--border); }
.btn-outline-light.badge-pill:hover{ background:rgba(255,255,255,.06); }

/* botón evidencia */
.btn-evidence{
  background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25);
  color:#e6fbff; border-radius:10px; padding:.3rem .65rem;
}
.btn-evidence:hover{ background:rgba(34,211,238,.14); }

/* ===== Inputs / selects ===== */
.form-control, .form-select{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#fff!important;border-radius:12px!important;
}
.form-control::placeholder{ color:rgba(255,255,255,.55); }
.form-control:focus, .form-select:focus{
  border-color:rgba(124,58,237,.45)!important;
  box-shadow:0 0 0 .2rem rgba(124,58,237,.15)!important;
}

/* *** FIX legibilidad del desplegable en modo oscuro ***
   Fuerza fondo y color de las opciones del select para que
   el texto no se pierda en el popup del sistema (WebKit/Gecko). */
.form-select option,
.form-select optgroup{
  background-color:#0b1222 !important; /* fondo del menú desplegable */
  color:#eef2ff !important;            /* texto claro */
}

/* Firefox requiere empujón extra para pintar el popup oscuro */
@-moz-document url-prefix() {
  .form-select option,
  .form-select optgroup{
    background-color:#0b1222 !important;
    color:#eef2ff !important;
  }
}

/* Alto contraste (Windows) */
@media (prefers-contrast: more) {
  .form-select option,
  .form-select optgroup{ color:#ffffff !important; }
}

/* ===== Tablas ===== */
.table{ color:var(--text-1); }
.table thead th{
  border-bottom:1px solid var(--border)!important;
  color:#cbd5e1; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.table tbody tr{
  border-bottom:1px dashed var(--border);
  transition:background .18s ease, transform .06s ease;
}
.table tbody tr:hover{ background:rgba(255,255,255,.04); }
.table td,.table th{ vertical-align:middle!important; }
.table .fw-semibold{ font-weight:700; }

/* ===== Chips / Tags de estado ===== */
.tag{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.28rem .6rem; border-radius:999px; font-weight:700; font-size:.75rem;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
}
.tag i{ font-size:.9rem; opacity:.9; }
.tag-success{ color:#032d22; background:rgba(16,185,129,.18); border-color:rgba(16,185,129,.3); }
.tag-warning{ color:#3b2902; background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.3); }
.tag-danger{  color:#3b0b0b; background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.3); }
.tag-info{    color:#062030; background:rgba(56,189,248,.18); border-color:rgba(56,189,248,.3); }
.tag-muted{   color:var(--text-2); }

.dot{ width:.48rem; height:.48rem; border-radius:50%; display:inline-block; }
.dot-success{ background:var(--success); }
.dot-warning{ background:var(--warning); }
.dot-danger{  background:var(--danger); }
.dot-info{    background:var(--info); }

/* ===== Modales dark ===== */
.modal-content{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); color:#fff; border:1px solid var(--border); }
.btn-close.btn-close-white{ filter:invert(1) grayscale(100%); }

/* ===== Stats / catálogos ===== */
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.stat-item{ display:flex; align-items:center; gap:12px; border-radius:16px; }

.catalog-grid .card{ transition:transform .08s ease, box-shadow .2s ease; }
.catalog-grid .card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.35); }

/* ===== Auth ===== */
.auth-wrap{ min-height:calc(100vh - 0px); }

.brand-circle{
  width:64px; height:64px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
  border:1px solid var(--glass-br); color:#fff; font-size:1.4rem;
  box-shadow:inset 0 0 40px rgba(255,255,255,.05), 0 8px 30px rgba(0,0,0,.35);
}

/* campos “glass” */
.glass-field .input-group-text{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--text-1); border-right:0;
}
.glass-field .form-control{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--text-1);
}
.glass-field .form-control::placeholder{ color:rgba(255,255,255,.55); }
.toggle-pw{ border:1px solid rgba(255,255,255,.12); border-left:0; background:rgba(255,255,255,.04); }

/* alert glass */
.alert-glass{
  background:rgba(255,148,148,.12); border:1px solid rgba(255,255,255,.12);
  color:#ffd7d7; border-radius:14px; padding:.75rem 1rem;
}

/* ===== Utilidades ===== */
.border-faint{ border:1px solid var(--border); border-radius:12px; }
.rounded-12{ border-radius:12px; }
.shadow-soft{ box-shadow:0 8px 30px rgba(0,0,0,.35); }

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .display-6{ font-size:2rem; }
  .table-responsive{ border-radius:12px; border:1px solid var(--border); }
}