/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
/* ===========================
   HEADER / NAVBAR - REFRESH
   (no toca funcionalidad)
   =========================== */

/* 1) Tipografía UI moderna (opcional).
   Si quieres mantener McLaren en todo, elimina este bloque.
*/
body, .navbar, .nav, .dropdown-menu {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Mantén McLaren solo para el logo/brand si quieres */
.brand-logo {
  /* si tu logo es imagen no afecta, pero lo dejo por si hay texto */
  font-family: "McLaren", ui-sans-serif, system-ui, sans-serif !important;
}

/* 2) Barra superior (blanca) más compacta */
.header-navbar.navbar-light.navbar-brand-center {
  min-height: 56px !important; /* antes 5rem */
  box-shadow: 0 6px 24px rgba(0,0,0,.08) !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Reduce padding interno */
.header-navbar .navbar-container.content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) Ajuste del logo para que no "baje" tanto y sea responsive */
.header-navbar .navbar-header .brand-logo {
  height: 42px !important;
  width: auto !important;
  padding-right: 18px !important; /* antes 40px inline */
}

/* Si el inline width/height te está ganando, forza más duro */
.header-navbar .navbar-header img.brand-logo[width][height]{
  height: 50px !important;
  width: auto !important;
}

/* 4) “Pills” para reloj y saldo */
.header-navbar .nav.navbar-nav.mr-auto .nav-link.dropdown-user-link {
  padding: 8px 10px !important;
}

.header-navbar #clock,
.header-navbar #spSaldo {
  font-weight: 700 !important;
  letter-spacing: .02em;
}

/* contenedor visual tipo pill */
.header-navbar .nav.navbar-nav.mr-auto .dropdown-user > a {
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 8px 12px !important;
  margin-right: 10px;
}

/* íconos del clock/saldo */
.header-navbar .nav.navbar-nav.mr-auto .dropdown-user > a i {
  opacity: .75;
  margin-right: 6px;
}

/* 5) Usuario a la derecha: más limpio */
.header-navbar .dropdown-user .dropdown-toggle {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 6px 10px !important;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
}

.header-navbar .avatar img {
  border-radius: 999px !important;
}

/* Menú dropdown del usuario */
.dropdown-menu.dropdown-menu-right {
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.18) !important;
  overflow: hidden;
}

.dropdown-menu .dropdown-item {
  padding: 10px 14px !important;
}

/* ===========================
   MENÚ HORIZONTAL (barra azul)
   =========================== */

.header-navbar.navbar-dark.navbar-horizontal {
  min-height: 54px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.18) !important;
}

/* Ajusta el padding de items para que quepan mejor */
#main-menu-navigation > li > a {
  padding: 12px 12px !important;
  border-radius: 12px;
  margin: 6px 4px;
  transition: background .15s ease, transform .08s ease;
}

/* Hover moderno */
#main-menu-navigation > li > a:hover {
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}

/* Active (si tu template marca active con open/active) */
#main-menu-navigation > li.open > a,
#main-menu-navigation > li.active > a {
  background: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Dropdown menu: más “premium” */
#main-menu-navigation .dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.25) !important;
  padding: 8px !important;
}

#main-menu-navigation .dropdown-menu .dropdown-item {
  border-radius: 10px;
  padding: 10px 12px !important;
}

#main-menu-navigation .dropdown-menu .dropdown-item:hover {
  background: rgba(18,27,88,.10) !important; /* usa tu azul */
}

/* 6) Responsive: en pantallas pequeñas reduce aún más */
@media (max-width: 768px){
  .header-navbar.navbar-light.navbar-brand-center { min-height: 52px !important; }
  .header-navbar .navbar-header img.brand-logo[width][height]{ height: 60px !important; }
  #main-menu-navigation > li > a { padding: 10px 10px !important; }
}
/* ===========================
   QUICK PANEL - Modern Tiles
   =========================== */

/* Clickable area sin subrayado raro */
.content-body .row.mt-2 > [class*="col-"] > a{
  text-decoration: none !important;
  display:block;
}

/* La card como tile */
.content-body .row.mt-2 .card{
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow: hidden;
  background: rgba(255,255,255,.92);
}

/* Altura uniforme y centrado real */
.content-body .row.mt-2 .card .card-body{
  padding: 18px 16px !important;
  min-height: 82px;            /* ajusta si quieres más alto */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Tu <center> estorba un poco pero lo acomodamos */
.content-body .row.mt-2 .card center{ width:100%; }
.content-body .row.mt-2 .card center .row{
  width:100%;
  margin:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap: nowrap;
}

/* Icono: badge redondo moderno */
.content-body .row.mt-2 .card i.la{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* usa tu paleta (warning como dorado suave) */
  background: rgba(255, 193, 7, .16);
  border: 1px solid rgba(255, 193, 7, .22);

  font-size: 20px !important; /* ignora tu inline 25px */
  line-height: 1;
}

/* Texto: más “SaaS”, menos grito */
.content-body .row.mt-2 .card span{
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  white-space: nowrap;
}

/* Hover/Focus: levanta y se siente clickeable */
.content-body .row.mt-2 > [class*="col-"] > a:hover .card,
.content-body .row.mt-2 > [class*="col-"] > a:focus .card{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.12) !important;
  border-color: rgba(18,27,88,.16) !important;
  background: rgba(255,255,255,.98);
}

/* Presionado */
.content-body .row.mt-2 > [class*="col-"] > a:active .card{
  transform: translateY(0px);
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
}

/* Danger tile: que se sienta warning real */
.content-body .row.mt-2 .card span.text-danger + *{ } /* noop */
.content-body .row.mt-2 .card center .row span.text-danger{
  color: #e23b3b !important;
}

/* Si quieres que el icono también cambie cuando es text-danger:
   (se detecta por el icono la-times-circle que usas en BLOQUEAR #) */
.content-body .row.mt-2 .card i.la-times-circle{
  background: rgba(226, 59, 59, .12);
  border-color: rgba(226, 59, 59, .22);
  color: #e23b3b !important;
}

/* Responsive: en móvil deja que el texto baje de línea */
@media (max-width: 480px){
  .content-body .row.mt-2 .card center .row{
    flex-wrap: wrap;
    gap:8px;
  }
  .content-body .row.mt-2 .card span{
    white-space: normal;
    text-align:center;
    line-height: 1.1;
  }
}
/* ===========================
   ÚLTIMOS GANADORES (CARD PRO)
   =========================== */
.winner-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.winner-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 12px 12px;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

.winner-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
  border-color: rgba(18,27,88,.14);
}

.winner-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom: 10px;
}

.winner-name{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.winner-time{
  font-size: 12px;
  opacity:.65;
  white-space: nowrap;
}

.winner-balls{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-start;  /* o center si lo prefieres */
  flex-wrap: nowrap;           /* <-- clave: siempre en línea */
}

.lottery-ball{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;

  font-weight: 900;
  font-size: 16px;
  color: #111;

  background: radial-gradient(circle at 30% 30%, #fff2b0, #ffb300);
  box-shadow:
    0 10px 18px rgba(0,0,0,.18),
    inset -6px -8px 12px rgba(0,0,0,.18),
    inset 4px 4px 10px rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.08);

  flex: 0 0 auto;
}

/* Responsive */
@media (max-width: 1200px){
  .winner-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .winner-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .winner-balls{ flex-wrap: wrap; } /* en móvil sí puede bajar bonito */
}
/* ===========================
   PRÓXIMOS CIERRES
   =========================== */
.close-panel{
  margin: 10px 0 18px;
}

.close-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:10px;
}

.close-title{
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .85;
}

.close-sub{
  margin-top:4px;
  font-size: 12px;
  opacity: .65;
}

.close-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.close-item{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 12px 12px;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

.close-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
  border-color: rgba(18,27,88,.14);
}

.close-name{
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.close-time{
  font-size: 12px;
  opacity: .7;
}

.close-countdown{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(18,27,88,.08);
  border: 1px solid rgba(18,27,88,.10);
}

/* estados */
.close-item.is-urgent .close-countdown{
  background: rgba(255, 193, 7, .16);
  border-color: rgba(255, 193, 7, .22);
}

.close-item.is-closed .close-countdown{
  background: rgba(226, 59, 59, .12);
  border-color: rgba(226, 59, 59, .18);
}

/* Responsive */
@media (max-width: 1200px){
  .close-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .close-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ===========================
   BACKGROUND MODERNO
   =========================== */

html, body{
  background:
    radial-gradient(900px 540px at 15% 15%, rgba(70,120,255,.18) 0%, transparent 60%),
    radial-gradient(900px 540px at 85% 30%, rgba(255,90,210,.14) 0%, transparent 60%),
    radial-gradient(700px 400px at 50% 90%, rgba(0,255,170,.10) 0%, transparent 60%),
    #0b1220 !important;

  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height:100vh;
}
.btn-primary{
  background: #0f2a3d !important;
  border-color: #0f2a3d !important;
  color:#fff !important;
}

.btn-primary:hover{
  background:#163b56 !important;
}
.btn{
  border-radius:8px !important;
  font-weight:600;
  padding:8px 16px;
}
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{
  background-color:#162033 !important;
  border-color:#162033 !important;
  box-shadow:0 0 0 0.2rem rgba(30,42,68,.25) !important;
}
/* ===========================
   PAGINACIÓN (BOOTSTRAP / DATATABLES)
   =========================== */

.page-item .page-link{
  color:#1e2a44 !important;
  border-color: rgba(30,42,68,.18) !important;
  background-color: #fff !important;
  border-radius: 8px !important;
  margin: 0 3px;
  font-weight: 600;
}

.page-item .page-link:hover{
  color:#fff !important;
  background-color:#26355a !important;
  border-color:#26355a !important;
}

.page-item.active .page-link{
  z-index: 2;
  color:#fff !important;
  background-color:#1e2a44 !important;
  border-color:#1e2a44 !important;
  box-shadow: 0 8px 18px rgba(30,42,68,.22) !important;
}

.page-item.disabled .page-link{
  opacity:.55;
  cursor:not-allowed;
}

/* opcional: que el foco no sea azul feo */
.page-link:focus{
  box-shadow: 0 0 0 0.2rem rgba(30,42,68,.20) !important;
}
/* OUTLINE PRIMARY */

.btn-outline-primary{
  color:#1e2a44 !important;
  border-color:#1e2a44 !important;
  background-color:transparent !important;
}

.btn-outline-primary:hover{
  color:#fff !important;
  background-color:#1e2a44 !important;
  border-color:#1e2a44 !important;
}
/* PRIMARY BACKGROUND */

.bg-primary{
  background-color:#1e2a44 !important;
}