:root{
  --bg0:#070a12;
  --bg1:#0b1020;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.70);

  /* marca */
  --brand:#1b6cff;      /* azul */
  --brand2:#35c6ff;     /* celeste */
  --brand-dark:#1357d6;
}

body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(27,108,255,.25), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(53,198,255,.18), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

a{ color: var(--brand2); }
a:hover{ color: var(--brand); }

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

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom: 18px;
}
.brand img{ height: 46px; width:auto; }
.brand .tagline{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.form-label{ color: var(--muted); font-size: 13px; }

.form-control, .form-select{
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}
.form-control::placeholder{ color: rgba(234,240,255,.45); }
.form-control:focus, .form-select:focus{
  border-color: rgba(53,198,255,.60) !important;
  box-shadow: 0 0 0 .25rem rgba(53,198,255,.15) !important;
}

.btn-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(27,108,255,.20);
}
.btn-primary:hover{
  filter: brightness(1.05);
}

.btn-outline-secondary{
  border-color: rgba(255,255,255,.18) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.08) !important;
}

.text-muted{ color: var(--muted) !important; }

.list-group-item{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  margin-bottom: 10px;
}
.list-group-item:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(53,198,255,.35) !important;
}

.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.page-title{
  display:flex;
  align-items:center;
  gap: 10px;
}
.page-title img{ height: 28px; width:auto; }

@media (max-width: 520px){
  .page-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .page-header .btn{
    width: 100%;
  }
}

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

.table{
  color: var(--text);
}
.table thead th{
  color: var(--muted);
  font-weight: 600;
  border-color: rgba(255,255,255,.10) !important;
}
.table td{
  border-color: rgba(255,255,255,.08) !important;
}

.btn-group .btn{
  border-color: rgba(255,255,255,.14) !important;
}
.btn-outline-primary{
  color: var(--text) !important;
  border-color: rgba(53,198,255,.22) !important;
}
.btn-outline-primary:hover{
  background: rgba(53,198,255,.12) !important;
}

.badge.text-bg-primary{
  background: rgba(53,198,255,.18) !important;
  color: var(--text) !important;
  border: 1px solid rgba(53,198,255,.35);
}

.alert{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
}
.alert-success{ border-color: rgba(53,198,255,.35); }
.alert-danger{ border-color: rgba(255,80,110,.35); }

.modal-content{
  background: rgba(10,14,25,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
}
.modal-header, .modal-footer{
  border-color: rgba(255,255,255,.10) !important;
}
.btn-close{
  filter: invert(1) grayscale(100%);
  opacity: .85;
}

.list-group.list-group-flush .list-group-item{
  margin: 0;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.list-group.list-group-flush .list-group-item:first-child{
  border-top: 0 !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
}
.list-group.list-group-flush .list-group-item:last-child{
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

.badge.text-bg-success{ background: rgba(53,198,255,.18) !important; color: var(--text) !important; border: 1px solid rgba(53,198,255,.35); }
.badge.text-bg-danger{ background: rgba(255,80,110,.16) !important; color: var(--text) !important; border: 1px solid rgba(255,80,110,.35); }
.badge.text-bg-secondary{ background: rgba(255,255,255,.10) !important; color: var(--text) !important; border: 1px solid rgba(255,255,255,.14); }

/* Mejor contraste general en dark */
hr { border-color: rgba(255,255,255,.10); }

.table { --bs-table-bg: transparent; }
.table-hover>tbody>tr:hover>*{
  background-color: rgba(255,255,255,.05) !important;
}

.text-danger { color: rgba(255,120,140,.95) !important; }
.text-success { color: rgba(120,255,200,.95) !important; }

.btn-outline-danger{
  border-color: rgba(255,80,110,.35) !important;
  color: var(--text) !important;
}
.btn-outline-danger:hover{
  background: rgba(255,80,110,.14) !important;
}

/* Control height fijo y alineación real (inputs + botones) */
.ctrl-eq,
.btn-eq {
  height: 46px !important;        /* un poco más que 42 para date inputs */
  border-radius: 14px !important;
  padding: 0.6rem 0.9rem !important;
  line-height: 1.1 !important;
}

/* Aplica a inputs date para que no “bajen/suban” */
input[type="date"].ctrl-eq {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

/* Asegura que el texto del botón quede centrado igual */
button.btn-eq {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== Fix select en modal dark ===== */
.modal-dark select.form-select.dark-select {
  background-color: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px !important;
}

/* Cuando abrís el dropdown, muchas veces las opciones se dibujan “blancas” */
.modal-dark select.form-select.dark-select option {
  background: #0b1220;  /* fondo oscuro real */
  color: rgba(255,255,255,.92);
}

/* En algunos browsers el "selected" queda ilegible, esto ayuda */
.modal-dark select.form-select.dark-select option:checked {
  background: #1d4ed8;
  color: #fff;
}

/* Focus */
.modal-dark select.form-select.dark-select:focus {
  border-color: rgba(59,130,246,.60) !important;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.18) !important;
}

/* Icono flecha del select en dark (Bootstrap usa un SVG claro, lo invertimos un poco) */
.modal-dark .form-select {
  filter: none;
}
.modal-dark .form-select.dark-select {
  background-image:
          linear-gradient(45deg, transparent 50%, rgba(255,255,255,.8) 50%),
          linear-gradient(135deg, rgba(255,255,255,.8) 50%, transparent 50%),
          linear-gradient(to right, transparent, transparent);
  background-position:
          calc(100% - 18px) calc(1em + 2px),
          calc(100% - 13px) calc(1em + 2px),
          calc(100% - 2.2em) 0.5em;
  background-size:
          5px 5px,
          5px 5px,
          1px 1.5em;
  background-repeat: no-repeat;
}

.section-title {
  color: rgba(255,255,255,.92) !important;
  font-weight: 700;
  letter-spacing: .2px;
}

.section-subtitle {
  color: rgba(255,255,255,.68) !important;
}

.section-title {
  color: rgba(255,255,255,.92) !important;
  font-weight: 800;
  letter-spacing: .2px;
  position: relative;
  padding-left: 10px;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: rgba(59,130,246,.9);
}

/* Fix: form-text en tema dark */
.form-text {
  color: var(--muted) !important;
}

html, body {
  height: 100%;
}

html {
  background: radial-gradient(1200px 600px at 20% 0%, rgba(27,108,255,.25), transparent 60%),
  radial-gradient(900px 500px at 80% 20%, rgba(53,198,255,.18), transparent 55%),
  linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
}

body {
  min-height: 100vh;
  margin: 0;
  background: transparent; /* importante: el fondo lo maneja html */
}