/* ====== DARK THEME (default) ====== */
:root{
  /* Brand */
  --brand-primary:#4F67FF;      /* azul brillante para oscuro */
  --brand-accent:#FF4A2D;       /* rojo acento */
  --brand-secondary:#8B95FF;

  /* Surfaces */
  --bg:#0B1020;                 /* fondo principal */
  --bg-2:#0F1730;               /* fondo secundario */
  --card:#101A33;               /* tarjetas */
  --card-2:#0D1530;             /* tarjetas hover/alt */

  /* Text */
  --ink:#E7ECFF;                /* texto principal */
  --muted:#A9B3D1;              /* texto secundario */

  /* Borders & shadow */
  --border:rgba(255,255,255,.10);
  --shadow:0 14px 40px rgba(0,0,0,.45);

  /* Focus ring */
  --ring:0 0 0 .25rem rgba(79,103,255,.25);
}

html, body{
  background: var(--bg);
  color: var(--ink);
}

/* Brand bar */
.brand-bar{
  background: linear-gradient(90deg,
    rgba(79,103,255,.14),
    rgba(255,74,45,.10)
  );
  border-bottom: 1px solid var(--border);
}

/* Cards */
.shadow-soft{ box-shadow: var(--shadow); }

.app-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* Bootstrap card compatibility */
.card{
  background-color: var(--card);
  color: var(--ink);
  border-color: var(--border);
}
.card-header, .card-footer{
  background-color: transparent;
  border-color: var(--border);
}

/* Inputs */
.form-control, .form-select{
  background-color: rgba(255,255,255,.03);
  color: var(--ink);
  border-color: var(--border);
}
.form-control::placeholder{ color: rgba(169,179,209,.75); }
.form-control:focus, .form-select:focus{
  border-color: rgba(79,103,255,.7);
  box-shadow: var(--ring);
  background-color: rgba(255,255,255,.05);
  color: var(--ink);
}

/* Buttons */
.btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  background-color: rgba(79,103,255,.92);
  border-color: rgba(79,103,255,.95);
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline-primary{
  color: var(--ink);
  border-color: rgba(79,103,255,.65);
}
.btn-outline-primary:hover{
  background-color: rgba(79,103,255,.18);
  border-color: rgba(79,103,255,.85);
  color: var(--ink);
}
.btn-outline-secondary{
  color: var(--ink);
  border-color: rgba(255,255,255,.18);
}
.btn-outline-secondary:hover{
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
  color: var(--ink);
}

/* Badges */
.badge.text-bg-primary{
  background-color: rgba(79,103,255,.92) !important;
}
.badge.text-bg-success{ background-color: rgba(25,135,84,.90) !important; }
.badge.text-bg-warning{ background-color: rgba(255,193,7,.90) !important; color:#121212 !important; }
.badge.text-bg-danger{ background-color: rgba(220,53,69,.90) !important; }

/* Alerts */
.alert{
  border: 1px solid var(--border);
  background-color: rgba(255,255,255,.03);
  color: var(--ink);
}
.alert-info{ background-color: rgba(79,103,255,.10); }
.alert-warning{ background-color: rgba(255,193,7,.10); }
.alert-success{ background-color: rgba(25,135,84,.10); }
.alert-danger{ background-color: rgba(220,53,69,.10); }

/* Links */
a{ color: rgba(79,103,255,.95); }
a:hover{ color: rgba(79,103,255,1); }

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

/* ==========================
   Bootstrap Modal (Dark)
   ========================== */
.modal-content{
  background-color: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.modal-header,
.modal-footer{
  border-color: var(--border) !important;
  background-color: transparent !important;
}

.modal-title{
  color: var(--ink) !important;
}

.modal-body{
  color: var(--ink) !important;
}

/* Texto auxiliar dentro de modales */
.modal .text-secondary,
.modal .form-text{
  color: var(--muted) !important;
}

/* Input group en modal */
.modal .input-group .form-control{
  background-color: rgba(255,255,255,.03) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Botón cerrar (X) visible en oscuro */
.btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .85;
}
.btn-close:hover{ opacity: 1; }

/* Backdrop un poco más oscuro */
.modal-backdrop.show{
  opacity: .75;
}