/* =========================================================================
   DON TODO — TEMA "CASA DE APUESTAS / PORTAL DEPORTIVO"
   -------------------------------------------------------------------------
   Este archivo se carga AL FINAL de cada página (después de Bootstrap y
   del resto de los CSS existentes) para sobrescribir la apariencia visual
   por cascada, sin modificar el HTML/PHP ni la lógica de negocio de cada
   página. Solo toca presentación: colores, tipografía, bordes, sombras.

   100% local: sin @import ni url() a servicios externos (Google Fonts,
   CDNs, etc.) — solo fuentes de sistema ya instaladas en cualquier equipo.
   ========================================================================= */

:root{
  --dt-bg:#0A1622;
  --dt-bg-elevated:#0E1B2A;
  --dt-surface:#101F30;
  --dt-surface-2:#152A3F;
  --dt-border:#26405A;
  --dt-text:#E9EEF5;
  --dt-text-soft:#93A6BB;
  --dt-text-faint:#5C7189;

  --dt-hot:#F03CEF;     /* Gama 2 institucional - "en vivo" / CTA */
  --dt-hot-dim:#7A1F7A;
  --dt-cyan:#22D3EE;
  --dt-gold:#FFC93C;
  --dt-green:#17E88F;
  --dt-red:#FF4D6D;

  /* Pilas de fuentes 100% locales (sin CDN): condensada para títulos,
     texto general legible, monoespaciada para cifras/horarios. */
  --dt-font-display: "Arial Narrow", "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;
  --dt-font-body: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dt-font-mono: "Consolas", "Courier New", monospace;
}

/* ---------- Base ---------- */
html, body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(240,60,239,.10), transparent 60%),
    radial-gradient(1000px 500px at 90% 0%, rgba(34,211,238,.08), transparent 55%),
    var(--dt-bg) !important;
  color:var(--dt-text) !important;
  font-family:var(--dt-font-body) !important;
}
a{color:var(--dt-cyan);}
a:hover{color:var(--dt-hot);}
p, span, li, td, th, label, div{color:inherit;}

h1,h2,h3,h4,h5,h6,
.brand, .navbar .brand, .about-title, .section-title, legend{
  font-family:var(--dt-font-display) !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--dt-text) !important;
}
h1 strong, h2 strong, .text-hot{color:var(--dt-hot) !important;}

hr{border-color:var(--dt-border);}

/* ---------- Contenedores / secciones genéricas ---------- */
.container, .content, .well, .panel, .box, .card,
section, .navbar, .footer, footer{
  background-color:transparent;
}

.well, .panel, .box, .card, .about-text, .contact,
table, .table-responsive, .carousel, .account-container{
  background:var(--dt-surface) !important;
  border:1px solid var(--dt-border) !important;
  border-radius:12px !important;
  color:var(--dt-text) !important;
}

/* ---------- Navbar ---------- */
.navbar, .navbar-inner, .navbar-fixed-top, nav.navbar{
  background:var(--dt-bg-elevated) !important;
  background-image:none !important;
  border-bottom:1px solid var(--dt-border) !important;
  box-shadow:none !important;
}
.navbar .brand, .navbar-brand{
  color:var(--dt-text) !important;
  font-size:1.2rem !important;
}
.navbar .nav > li > a, .navbar-nav > li > a, .nav-collapse a{
  color:var(--dt-text-soft) !important;
  font-weight:600;
  text-transform:uppercase;
  font-size:.82rem;
  letter-spacing:.02em;
}
.navbar .nav > li > a:hover, .navbar-nav > li > a:hover,
.navbar .nav > .active > a{
  color:var(--dt-hot) !important;
  background:transparent !important;
}
.tooltip-inner{background:var(--dt-bg-elevated) !important; color:var(--dt-text) !important;}

/* ---------- Botones ---------- */
.btn, button, input[type="submit"], input[type="button"], .submit{
  background:var(--dt-hot) !important;
  background-image:none !important;
  border:none !important;
  color:#fff !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.03em;
  border-radius:8px !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transition:transform .12s, box-shadow .12s;
}
.btn:hover, button:hover, input[type="submit"]:hover, .submit:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(240,60,239,.35) !important;
  color:#fff !important;
}
.btn-success, .btn-primary{background:var(--dt-hot) !important;}
.btn-danger{background:var(--dt-red) !important;}
.btn-default, .btn-secondary, .btn.btn-theme{
  background:transparent !important;
  border:1px solid var(--dt-border) !important;
  color:var(--dt-text) !important;
}

/* ---------- Formularios ---------- */
input, select, textarea{
  background:var(--dt-bg-elevated) !important;
  border:1px solid var(--dt-border) !important;
  color:var(--dt-text) !important;
  border-radius:8px !important;
  box-shadow:none !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--dt-hot) !important;
  outline:none !important;
  box-shadow:0 0 0 2px rgba(240,60,239,.25) !important;
}
input::placeholder{color:var(--dt-text-faint) !important;}
label{color:var(--dt-text-soft) !important; font-weight:600; text-transform:uppercase; font-size:.75rem; letter-spacing:.03em;}

/* Formulario de login (index.php / login.php) */
.login-fields, .login-actions, .field{background:transparent !important; border:none !important;}
.account-container{
  max-width:440px; margin:30px auto; padding:30px !important; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5) !important;
}
.account-container img{max-width:120px; border-radius:8px; margin-bottom:6px;}
.login-extra{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  max-width:900px; margin:20px auto; padding:0 16px;
}
.login-extra img{
  height:56px; width:56px; object-fit:contain; background:#fff; border-radius:10px;
  padding:6px; border:1px solid var(--dt-border);
}

/* ---------- Tablas ---------- */
table{width:100%; border-collapse:collapse !important;}
table th{
  background:var(--dt-surface-2) !important;
  color:var(--dt-text-soft) !important;
  text-transform:uppercase; font-size:.72rem; letter-spacing:.04em;
  padding:10px 12px !important; border-color:var(--dt-border) !important;
}
table td{
  padding:10px 12px !important;
  border-color:var(--dt-border) !important;
  color:var(--dt-text) !important;
}
table tr:hover td{background:rgba(240,60,239,.06) !important;}
.table-striped > tbody > tr:nth-of-type(odd){background:rgba(255,255,255,.02) !important;}

/* ---------- Badges / etiquetas de estatus ---------- */
.label, .badge{
  border-radius:20px !important; font-weight:700 !important; text-transform:uppercase;
  font-size:.68rem !important; letter-spacing:.03em; padding:3px 10px !important;
}
.label-success, .badge-success{background:rgba(23,232,143,.15) !important; color:var(--dt-green) !important; border:1px solid var(--dt-green);}
.label-warning, .badge-warning{background:rgba(255,201,60,.15) !important; color:var(--dt-gold) !important; border:1px solid var(--dt-gold);}
.label-danger, .badge-danger, .label-important{background:rgba(255,77,109,.15) !important; color:var(--dt-red) !important; border:1px solid var(--dt-red);}
.label-info, .badge-info{background:rgba(34,211,238,.15) !important; color:var(--dt-cyan) !important; border:1px solid var(--dt-cyan);}

/* ---------- Carousel (logos / anuncios) ---------- */
.carousel-control{background:none !important; text-shadow:none !important; color:var(--dt-hot) !important;}
.carousel-indicators li{border-color:var(--dt-hot) !important;}
.carousel-indicators .active{background:var(--dt-hot) !important;}
.carousel-caption{background:rgba(10,22,34,.75) !important; border-radius:8px; padding:10px !important;}

/* ---------- Footer ---------- */
footer, .footer, .copyright{
  background:var(--dt-bg-elevated) !important;
  color:var(--dt-text-faint) !important;
  border-top:1px solid var(--dt-border) !important;
  font-family:var(--dt-font-mono) !important;
  font-size:.75rem !important;
}
footer a, .footer a{color:var(--dt-text-soft) !important;}

/* ---------- Alertas ---------- */
.alert{border-radius:10px !important; border:1px solid var(--dt-border) !important;}
.alert-success{background:rgba(23,232,143,.1) !important; color:var(--dt-green) !important; border-color:var(--dt-green) !important;}
.alert-danger, .alert-error{background:rgba(255,77,109,.1) !important; color:var(--dt-red) !important; border-color:var(--dt-red) !important;}
.alert-warning{background:rgba(255,201,60,.1) !important; color:var(--dt-gold) !important; border-color:var(--dt-gold) !important;}
.alert-info{background:rgba(34,211,238,.1) !important; color:var(--dt-cyan) !important; border-color:var(--dt-cyan) !important;}

/* ---------- Scrollbar (estético, opcional) ---------- */
::-webkit-scrollbar{height:8px; width:8px;}
::-webkit-scrollbar-track{background:var(--dt-bg);}
::-webkit-scrollbar-thumb{background:var(--dt-border); border-radius:8px;}

/* ---------- Utilidades num\u00e9ricas (fechas, puntos, folios) ---------- */
.mono, .fecha, td.fecha, .folio{font-family:var(--dt-font-mono) !important;}