:root{
  /* Base */
  --bg:#f6f8ff;
  --card:#ffffff;
  --card2:#fbfcff;
  --text:#0b1220;
  --muted:#5b6b85;
  --line:#e6eaf2;

  /* ✅ Color por BD (si no viene, usa azul) */
  --accent:#3b82f6;

  --radius:18px;
  --shadow:0 18px 46px rgba(2,6,23,.10);
  --shadow2:0 10px 22px rgba(2,6,23,.07);
  --max:1100px;
}

/* =========================
   ✅ Lotería: selector horizontal de fechas (tabs)
========================= */
.date-tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:8px 2px 2px;
  margin-top:12px;
  -webkit-overflow-scrolling:touch;
}
.date-tab{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  color:var(--text);
  font-weight:900;
  font-size:13px;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.date-tab:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.08);}
.date-tab.active{
  border-color:rgba(59,130,246,.55);
  box-shadow:0 10px 22px rgba(59,130,246,.12);
}
.lot-day-top{display:flex; align-items:flex-end; justify-content:space-between; gap:12px;}

@media (max-width: 980px){
  .lot-day-top{align-items:flex-start;}
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:
    radial-gradient(1000px 560px at 10% -10%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 520px at 60% 110%, rgba(34,197,94,.08), transparent 60%),
    var(--bg);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
img{max-width:100%}

.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:18px 16px 44px;
}

/* =========================
   HEADER (verde + botón Menú)
   - replica el look del screenshot
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#0b0f14; /* ✅ negro (header) */
  box-shadow:0 10px 30px rgba(2,6,23,.22);
}
.site-header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
}
.brand-mark{
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
  overflow:hidden;
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:7px;
}
.brand-text{display:flex; flex-direction:column; line-height:1.05;}
.brand-title{font-weight:900; letter-spacing:.2px; font-size:18px;}
.brand-subtitle{font-size:12px; opacity:.88; margin-top:3px;}

.menu-btn{
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.menu-btn:hover{background:rgba(255,255,255,.22);}

/* Desktop nav (visible) */
.site-nav-desktop{
  display:none;
  gap:10px;
  align-items:center;
}
.site-nav-desktop a{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
  white-space:nowrap;
}
.site-nav-desktop a:hover{background:rgba(255,255,255,.14);}
.site-nav-desktop a.active{background:rgba(255,255,255,.18);}


/* =========================
   DROPDOWN (Loterías) + HAMBURGER
========================= */

/* Botón sandwich (solo mobile) */
.menu-btn{
  width:46px;
  height:42px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.menu-btn .burger{
  width:20px;
  height:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.menu-btn .burger span{
  display:block;
  height:2px;
  width:100%;
  background:rgba(255,255,255,.92);
  border-radius:99px;
}

/* Dropdown desktop */
.nav-dropdown{position:relative; display:inline-flex; align-items:center;}
.nav-dropbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.nav-dropdown.active .nav-dropbtn{background:rgba(255,255,255,.18);}
.nav-dropbtn:hover{background:rgba(255,255,255,.14);}
.nav-chev{font-size:12px; opacity:.9;}

.nav-dropmenu{
  position:absolute;
  top:100%;
  left:0;
  min-width:260px;
  padding:10px;
  border-radius:16px;
  background:#0b0f14;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:none;
  z-index:200;
}
.nav-dropdown.open .nav-dropmenu{display:block;}

/* Fix: dropdown items full-width (evita que Loteka y Leidsa se peguen) */
.site-nav-desktop .nav-dropmenu .nav-dropitem{
  display:flex;
  width:100%;
  box-sizing:border-box;
}

.nav-dropitem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:12px;
  color:#fff;
  font-weight:900;
  background:transparent;
}
.nav-dropitem:hover{background:rgba(255,255,255,.08);}
.nav-dropitem .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.07);
  flex:0 0 auto;
}

/* Dropdown mobile (dentro del drawer) */
.drawer-drop{
  margin-top:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
}
.drawer-sum{
  list-style:none;
  cursor:pointer;
  padding:12px 12px;
  color:#fff;
  font-weight:900;
}
.drawer-sum::-webkit-details-marker{display:none;}
.drawer-list{padding:0 10px 10px;}
.drawer-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 10px;
  border-radius:12px;
  color:#fff;
  font-weight:900;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  margin:10px 0 0;
}
.drawer-item:hover{background:rgba(255,255,255,.12);}
.drawer-item .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.07);
}


/* Drawer */
.site-drawer{
  max-width:var(--max);
  margin:0 auto;
  padding:10px 16px 14px;
  display:none; /* se abre con JS */
}
.site-drawer a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  margin-top:10px;
  font-weight:800;
}
.site-drawer a:hover{background:rgba(255,255,255,.16);}
.site-drawer a.active{background:rgba(255,255,255,.20);}

/* ✅ Desktop: menú siempre visible, sin botón */
@media (min-width: 900px){
  .menu-btn{display:none;}
  .site-nav-desktop{display:flex;}
  .site-drawer{display:none !important;}
}

/* ✅ Desktop: menú siempre visible y sin botón Menú */
@media (min-width: 900px){
  .menu-btn{display:none;}
  .site-nav-desktop{display:flex;}
  .site-drawer{display:none !important;}
}

/* =========================
   BREADCRUMBS
========================= */
.breadcrumbs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
  margin:14px 0 8px;
}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--text)}
.breadcrumbs .sep{opacity:.5}

/* =========================
   HERO
========================= */
.hero{
  background:
    radial-gradient(480px 170px at 18% 15%, rgba(59,130,246,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  border:1px solid rgba(230,234,242,.95);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.hero h2{
  margin:0;
  font-size:24px;
  line-height:1.1;
  letter-spacing:.2px;
}
.hero p{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.55;
}

/* =========================
   CARDS + TYPO
========================= */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,252,255,.92));
  border:1px solid rgba(230,234,242,.95);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 70px rgba(2,6,23,.12);
  border-color:rgba(209,213,219,.95);
}
.pad{padding:14px}

.h3{font-weight:1000; font-size:28px; margin:0}
.small{font-size:13px; color:var(--muted); line-height:1.45}
.muted{color:var(--muted)}
.sep{height:14px}

.card-accent{position:relative}
.card-accent::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:6px;
  background:linear-gradient(90deg, var(--accent), #11182700);
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  pointer-events:none;
  z-index:2;
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(230,234,242,.95);
  background:rgba(255,255,255,.90);
  color:var(--text);
  font-weight:950;
  font-size:13px;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  background-image:none !important;
}
.btn:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(2,6,23,.08);
}
.btn.primary{
  background:var(--accent) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 22px 52px color-mix(in srgb, var(--accent) 26%, rgba(2,6,23,.14)) !important;
}
.btn.primary::before{
  content:"▶";
  font-weight:1000;
  margin-right:8px;
  opacity:.95;
}
.btn.ghost{
  background:rgba(255,255,255,.78);
  border-color:rgba(230,234,242,.95);
}

/* =========================
   KPI ROW
========================= */
.kpi{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

/* =========================
   GRID
========================= */
.grid{display:grid;gap:12px}
.cards{margin-top:12px}
@media(min-width:860px){
  .grid.cards{grid-template-columns:repeat(12,1fr)}
  .col-6{grid-column:span 6}
  .col-4{grid-column:span 4}
  .col-3{grid-column:span 3}
}
@media(max-width:859px){
  .grid.cards{grid-template-columns:1fr}
  .col-6,.col-4,.col-3{grid-column:span 12}
}

/* =========================
   FORMS
========================= */
.input, select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(230,234,242,.95);
  background:rgba(255,255,255,.92);
  color:var(--text);
  outline:none;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
}
.input:focus, select:focus{
  border-color:rgba(59,130,246,.35);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

/* =========================
   RESULT CARD (HOY / AYER)  ✅
   (estructura del home.php nuevo)
========================= */

/* ✅ Este selector sí coincide con: <div class="pad result-card"> */
.pad.result-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Header */
.result-card .rc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* Título (Lotería • Sorteo) */
.result-card .rc-title{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
}

.result-card .rc-lottery{
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.92;
}

.result-card .rc-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
  flex:0 0 auto;
  transform: translateY(-2px);
}

.result-card .rc-draw-inline{
  font-size:14px;
  font-weight:750;
  color: black;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(0,0,0,.04);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* Mejora legibilidad en colores claros (amarillo/fucsia) sin saturar */
  padding:6px 18px;
  border-radius:999px;
  background: rgba(0,0,0,.045);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 0 2px rgba(0,0,0,.18);
}

/* Estado (HOY/AYER) */
.result-card .rc-state{
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  opacity:.75;
}

/* Línea principal: sorteo + bolas */
.result-card .rc-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.result-card .rc-draw{
  font-size:20px;
  font-weight:950;
  line-height:1.1;
  margin:0;
}

/* Bolas */
.result-card .balls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}


.result-card .ball{
  width:56px;
    height:56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    font-size:32px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18), inset 0 0 0 2px rgba(255, 255, 255, .30);
    background: rgba(0, 0, 0, .02);
    border-top-style: ridge;
}

/* Meta */
.result-card .rc-meta{
  font-size:12px;
  opacity:.75;
}

/* Acciones */
.result-card .rc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}
.result-card .rc-actions .btn.primary{
  order:-1; /* principal primero */
}

/* =========================
   LOTTERY CHIP (home.php usa class + estilos inline)
   (Dejamos mínima para hover bonito)
========================= */
.lottery-chip{
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.lottery-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(2,6,23,.08);
  background:#fff;
}

/* =========================
   TABLES / CHIPS / DETAILS / FOOTER / HR
   (se dejan por si las usas en otras páginas)
========================= */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid rgba(230,234,242,.95);
  border-radius:var(--radius);
  background:rgba(255,255,255,.92);
  box-shadow:0 24px 70px rgba(2,6,23,.10);
}
.table th,.table td{
  padding:12px;
  border-bottom:1px solid rgba(230,234,242,.95);
  text-align:left;
  font-size:13px;
}
.table th{
  font-weight:1000;
  background:rgba(248,250,252,.92);
  position:sticky;
  top:0;
  z-index:2;
}
.table tr:nth-child(even) td{background:rgba(248,250,252,.58)}
.table tr:hover td{background:rgba(248,250,252,.96)}
.table tr:last-child td{border-bottom:none}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.chip{
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(230,234,242,.95);
  font-weight:950;
  font-size:13px;
  box-shadow:0 10px 22px rgba(2,6,23,.05);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.chip:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(2,6,23,.07);
}
.chip.active{
  background:color-mix(in srgb, var(--accent) 16%, #fff 84%);
  border-color:color-mix(in srgb, var(--accent) 32%, rgba(230,234,242,.95));
  color:var(--text);
}

details.card summary{list-style:none}
details.card summary::-webkit-details-marker{display:none}

.footer{
  margin-top:26px;
  padding:16px 12px;
  border-radius:18px;
  text-align:center;
  font-size:13px;
  color:var(--muted);
  background:rgba(255,255,255,.78);
  border:1px solid rgba(230,234,242,.95);
  box-shadow:var(--shadow2);
}

/* =========================
   SITE FOOTER (verde)
========================= */
.site-footer{
  margin-top: 26px;
  border-radius: 18px;
  overflow: hidden;
  background:#0b0f14; /* ✅ negro (footer) */
  color:#fff;
  box-shadow:0 18px 46px rgba(2,6,23,.22);
}
.site-footer-inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
  padding: 18px 16px;
}
.footer-title{
  font-weight: 950;
  margin-bottom: 8px;
}
.site-footer p{margin:0; opacity:.92; line-height:1.45;}

.footer-quick{display:flex; gap:10px; margin-top:12px;}
.footer-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  color:#0b1220;
  font-weight:900;
  text-decoration:none;
}
.footer-chip:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,6,23,.18);}

.footer-link{
  display:block;
  padding:9px 0;
  text-decoration:none;
  opacity:.95;
}
.footer-link:hover{text-decoration:underline;}

.site-footer-bottom{
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  font-size: 13px;
  opacity: .95;
}

@media (max-width: 820px){
  .site-footer-inner{grid-template-columns: 1fr;}
}

/* =========================
   TO TOP BUTTON
========================= */
.to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: radial-gradient(120% 120% at 30% 25%, rgb(97 97 97 / 95%), rgb(0 0 0 / 95%));
  color:#fff;
  font-size: 28px;
  font-weight: 1000;
  cursor:pointer;
  box-shadow:0 18px 46px rgba(2,6,23,.20);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  animation: toTopPulse 1.8s ease-in-out infinite;
}
.to-top:hover{transform:translateY(-2px) scale(1.02);}

@keyframes toTopPulse{
  0%, 100%{ box-shadow:0 18px 46px rgba(2,6,23,.20), 0 0 0 0 rgba(56,189,248,.26); }
  50%{ box-shadow:0 18px 46px rgba(2,6,23,.22), 0 0 0 10px rgba(56,189,248,0); }
}

hr.soft{
  border:none;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,234,242,.95), transparent);
  margin:14px 0;
}

/* =========================
   MOBILE NAV SCROLL
========================= */
@media (max-width: 640px){

  .topbar .inner{
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .brand{width:100%}
  .nav{
    width:100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar{display:none;}
  .nav a{
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: fit-content;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(230,234,242,.95);
    box-shadow:0 8px 16px rgba(2,6,23,.06);
  }
  .nav a.active{
    background:color-mix(in srgb, var(--accent) 18%, white);
    border-color:color-mix(in srgb, var(--accent) 25%, rgba(230,234,242,.95));
    font-weight:950;
  }

  .hero h2{font-size:20px}
  .hero p{font-size:13px}
  .pad{padding:12px}
}




/* =========================
   MOBILE NAV FIX + LOOK (FINAL)
   - evita corte de "Nosotros"
   - tabs más compactas + scroll suave + snap + fade
========================= */
@media (max-width: 720px){

  .topbar{
    background: rgba(255,255,255,.82);
  }

  .topbar .inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px;
  }

  .brand{
    width:100%;
    font-size: 15px;
  }

  .nav{
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding: 2px 4px 8px;
    scrollbar-width:none;
    scroll-snap-type: x mandatory;
  }
  .nav::-webkit-scrollbar{display:none}

  .nav a{
    flex: 0 0 auto;
    white-space: nowrap;

    padding: 9px 11px;
    border-radius: 12px;
    font-size: 12.5px;

    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 16px rgba(2,6,23,.06);
    scroll-snap-align: start;
  }

  .nav a.active{
    background: color-mix(in srgb, var(--accent) 18%, #fff);
    border-color: color-mix(in srgb, var(--accent) 28%, rgba(230,234,242,.95));
  }

  /* fade sutil para sugerir scroll */
  .nav{
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
}



/* =========================
   TABLE NUMBERS (CSS-only)
   - da un “panel” sutil detrás del texto
   - tipografía más pro (tabular-nums)
   - no separa los números, solo mejora el look
========================= */
.table td:nth-child(4){
  position: relative;
  font-variant-numeric: tabular-nums;
  letter-spacing: .6px;
  font-weight: 900;
}

/* panel sutil detrás */
.table td:nth-child(4)::before{
  content:"";
  position:absolute;
  left:10px; right:10px;
  top:8px; bottom:8px;
  border-radius: 12px;
  background:
    radial-gradient(140px 60px at 15% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.78));
  border: 1px solid rgba(230,234,242,.95);
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
  z-index: 0;
  pointer-events:none;
}

/* asegura que el texto quede encima */
.table td:nth-child(4){
  z-index: 1;
}
.table td:nth-child(4) *{
  position: relative;
  z-index: 1;
}

/* en móvil: un poco más compacto */
@media (max-width: 720px){
  .table td:nth-child(4){
    letter-spacing: .4px;
    font-size: 13px;
  }
  .table td:nth-child(4)::before{
    left:8px; right:8px;
    top:6px; bottom:6px;
    border-radius: 10px;
  }
}


/* =========================
   LOTERÍAS – MEJORA SOLO DEL CONTENIDO
   (sin tocar la caja)
========================= */

/* Contenedor interno más aireado */
.lottery-chip,
.card .pad{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* TÍTULO DE LOTERÍA */
.card .pad > strong,
.card .pad h3,
.card .pad h4{
  font-size:18px;
  font-weight:1000;
  line-height:1.15;
  margin:0;
}

/* “Explorar” → lo convertimos en etiqueta sutil */
.card .pad small,
.card .pad .explorar{
  align-self:flex-start;
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(0,0,0,.04);
  padding:4px 8px;
  border-radius:999px;
}

/* Descripción: más corta visualmente */
.card .pad p{
  font-size:13px;
  line-height:1.55;
  color:black;
  margin:0;
}

/* Línea “Ver resultados al instante” */
.card .pad .hint,
.card .pad em{
  font-size:12px;
  font-weight:800;
  color:var(--text);
  opacity:.85;
}

/* CTA: se sienten protagonistas */
.card .pad .kpi,
.card .pad .actions{
  margin-top:6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Botón principal primero */
.card .pad .btn.primary{
  order:-1;
}

/* Mobile: aún más limpio */
@media (max-width:640px){
  .card .pad{
    gap:8px;
  }

  .card .pad p{
    font-size:12.5px;
  }
}


/* =========================
   NUMEROS (TEXTO PLANO) – LOOK LOTERÍA SUTIL
   Ideal para: "33 32 07" sin separar en spans
========================= */

/* si está dentro de una card, dale jerarquía */
.card .numbers-plain,
.card .result-nums,
.card .nums-plain{
  margin-top:10px;
}

/* TABLAS: columna "Números" (4ta) */
.table td:nth-child(4){
  font-variant-numeric: tabular-nums;
  font-weight: 1000;
  letter-spacing: 1px;
  font-size: 18px;
  line-height: 1.1;
  color: var(--text);
  position: relative;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* panel sutil tipo “marco” */
.table td:nth-child(4)::before{
  content:"";
  position:absolute;
  left:10px; right:10px;
  top:8px; bottom:8px;
  border-radius:14px;

  background:
    radial-gradient(180px 70px at 18% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.82));
  border:1px solid rgba(230,234,242,.95);
  box-shadow:0 12px 22px rgba(2,6,23,.08);
  pointer-events:none;
  z-index:0;
}

/* texto encima */
.table td:nth-child(4){
  z-index:1;
}
.table td:nth-child(4) *{
  position:relative;
  z-index:1;
}

/* “Efecto chip” sutil SIN separar: fondo interno solo al texto */
.table td:nth-child(4){
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

/* Mobile: grande pero no exagerado */
@media (max-width: 720px){
  .table td:nth-child(4){
    font-size: 17px;
    letter-spacing: .8px;
  }
  .table td:nth-child(4)::before{
    left:8px; right:8px;
    top:6px; bottom:6px;
    border-radius:12px;
  }
}


/* =========================
   BALLS – ESTILO LOTERÍA (sutil y profesional)
   Usado en sorteo.php
========================= */

.balls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* bolas normales (resultado principal) */
.balls-soft .ball{
  width:78px;
  height:78px;
  border-radius:999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:32px;
  font-weight:1000;
  font-variant-numeric: tabular-nums;
  letter-spacing:.4px;

  background:
    radial-gradient(24px 20px at 30% 28%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.88));

  border:1px solid color-mix(in srgb, var(--accent) 25%, rgba(230,234,242,.95));
  box-shadow:
    0 16px 30px rgba(2,6,23,.14),
    inset 0 0 0 2px rgba(255,255,255,.35);

  color:var(--text);
}

/* bolas pequeñas (historial) */
.balls-xs .ball{
  width:44px;
  height:44px;
  font-size:16px;
}

/* =========================
   AJUSTES MOBILE
========================= */
@media (max-width: 720px){
  .balls-soft .ball{
   width: 78px;
        height: 78px;
        font-size:32px;
    

  }

  .balls-xs .ball{
    width: 78px;
        height: 78px;
        font-size:32px;
  }
}


/* =========================
   TABLA – LINKS DE ACCIÓN (UX)
========================= */

.link-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:6px 10px;
  border-radius:999px;

  font-size:13px;
  font-weight:900;
  text-decoration:none;

  background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.06);
  color:var(--text);

  transition:background .15s ease, transform .12s ease, box-shadow .12s ease;
}

.link-chip:hover{
  background:rgba(0,0,0,.06);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(2,6,23,.12);
}

/* Iconos semánticos (sin usar SVGs) */
.link-chip.lottery::before{
  content:"🎟️";
  font-size:14px;
}

.link-chip.draw::before{
  content:"🎯";
  font-size:14px;
}

/* Mobile: aún más claro */
@media (max-width:720px){
  .link-chip{
    font-size:12.5px;
    padding:6px 9px;
  }
}


/* =========================
   LOTERÍAS — “Dale vida”
========================= */

/* Hero especial para loterías */
.hero-lots{
  position:relative;
  overflow:hidden;
}
.hero-lots::after{
  content:"";
  position:absolute;
  inset:-80px -140px auto auto;
  width:360px;
  height:360px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.22), transparent 60%);
  filter: blur(2px);
  pointer-events:none;
  opacity:.9;
}
.hero-lots .hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

/* Stats del hero */
.lot-hero-stats{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.lot-hero-stats .stat{
  border:1px solid rgba(230,234,242,.95);
  background:rgba(255,255,255,.78);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}
.lot-hero-stats .stat-k{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.2px;
}
.lot-hero-stats .stat-v{
  margin-top:2px;
  font-size:20px;
  font-weight:1000;
}

/* Toolbar */
.lot-toolbar{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.lot-toolbar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Grid mejora */
.lot-grid{
  position:relative;
}

/* Card “premium” */
.lot-card{
  position:relative;
  overflow:hidden;
}
.lot-card:hover{
  transform:translateY(-3px);
}

/* Clickable overlay (card completa clicable sin romper botones) */
.lot-click{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:var(--radius);
}

/* Pero los botones encima */
.lot-card .lot-actions,
.lot-card .lot-head,
.lot-card .lot-desc,
.lot-card .lot-preview2,
.lot-card .lot-sub{
  position:relative;
  z-index:2;
}

/* Cabecera más “pro” */
.lot-name{
  font-size:18px;
  font-weight:1000;
  line-height:1.1;
}
.lot-count{
  font-size:12px;
  font-weight:950;
  letter-spacing:.25px;
  opacity:.85;
  padding:6px 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--accent) 10%, rgba(0,0,0,.03));
  border:1px solid color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.06));
  white-space:nowrap;
}

/* Subline chips */
.lot-sub{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.lot-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.75);
  font-size:12px;
  font-weight:900;
  color:var(--text);
}
.lot-tag.muted{color:var(--muted); font-weight:800;}
.lot-tag.lot-dot{
  border-color:color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.06));
}

/* Preview “vivo” */
.lot-preview2{
  margin-top:12px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(220px 110px at 18% 28%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    rgba(0,0,0,.03);
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pv-label{
  font-size:12px;
  color:var(--muted);
  font-weight:850;
}
.pv-title{
  margin-top:2px;
  font-weight:1000;
  letter-spacing:.2px;
}
.pv-right{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
}
.pv-ball{
  width:38px;
  height:38px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:14px;
  background:
    radial-gradient(18px 16px at 30% 28%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, #fff 88%), #fff);
  border:1px solid color-mix(in srgb, var(--accent) 22%, rgba(0,0,0,.06));
  box-shadow:0 10px 18px rgba(2,6,23,.12);
}

/* Dot live ya existe, pero lo hacemos más “fino” aquí */
.dot-live{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 6px rgba(34,197,94,.15);
  animation:lotPulse 1.8s infinite;
}

/* Mobile */
@media (max-width: 640px){
  .lot-hero-stats{grid-template-columns:1fr; }
  .lot-toolbar-actions .btn{flex:1; justify-content:center;}
  .pv-right{gap:6px}
  .pv-ball{width:34px;height:34px;font-size:13px}
}

/* =========================
   RESULTADOS ANTERIORES – AJUSTES FINOS
========================= */

/* --- LINKS (Lotería / Sorteo) --- */
.link-chip{
  padding:4px 9px;          /* menos padding */
  gap:5px;
  font-size:13px;
  font-weight:900;
  border-radius:999px;
}

/* Quitar emojis / iconos */
.link-chip::before{
  content:none !important;
}

/* Compactar aún más en desktop */
@media (min-width: 768px){
  .link-chip{
    padding:4px 8px;
    font-size:12.5px;
  }
}

/* --- CONTENEDOR DE NÚMEROS --- */
.balls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;                  /* bolas más juntas */
  max-width:100%;
  flex-wrap:wrap;
}


/* Bolas un poco más compactas */
.ball{
  width:38px;
  height:38px;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-weight:800;
  border-radius:999px;
}


/* --- Tabla: columna números más controlada --- */
.table td:last-child{
  max-width:420px;
}

/* =========================
   MÓVIL – NO MÁS “CHORIZOS”
========================= */
@media (max-width: 640px){

  /* Que no se estire la fila */
  .table td:last-child{
    max-width:100%;
  }

  /* Números centrados y compactos */
  .balls{
    justify-content:flex-start;
    gap:6px;
  }

  .ball{
  width:34px;
  height:34px;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-weight:800;
  border-radius:999px;
}


  /* Links más pequeños en móvil */
  .link-chip{
    padding:3px 8px;
    font-size:12px;
  }
}


/* =========================
   LOTERÍAS – LIMPIEZA Y MEJORA VISUAL
========================= */

/* 1️⃣ OCULTAR “Explorar” (chip superior) */
.lottery-card .lot-count,
.lottery-card .lot-count + *,
.lottery-card .lot-head .lot-count{
  display:none !important;
}

/* 2️⃣ TEXTO “Ver resultados al instante”
      → centrado + estilo subtítulo */
.lottery-card .lot-preview{
  justify-content:center !important;
  text-align:center;
  background:none !important;
  border:none !important;
  padding:6px 0 2px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.2px;
  opacity:.9;
}

/* Quitar el punto / live dot */
.lottery-card .dot-live{
  display:none !important;
}

/* 3️⃣ ELIMINAR MANCHA / HIGHLIGHT DESPUÉS DE “instante” */
.lottery-card .lot-preview::after,
.lottery-card .lot-preview::before{
  content:none !important;
}

/* 4️⃣ BOTONES un poco más separados del subtítulo */
.lottery-card .lot-actions{
  margin-top:10px;
}

/* =========================
   MÓVIL – AJUSTE FINO
========================= */
@media (max-width:640px){

  .lottery-card .lot-preview{
    font-size:14px;
    padding:4px 0;
  }

}
/* =========================================================
   LOTERÍAS – VERSION FINAL (LIMPIO + CON VIDA)
   Pegar AL FINAL del CSS
========================================================= */

/* ===== 1) QUITAR "Explorar" (chip/etiqueta) ===== */
.lottery-card .lot-count,
.lottery-card .lot-head .lot-count{
  display:none !important;
}

/* ===== 2) SUBTÍTULO: "Ver resultados al instante" centrado y destacado ===== */
.lottery-card .lot-preview{
  justify-content:center !important;
  text-align:center !important;

  /* lo volvemos “subtítulo” */
  background: none !important;
  border: 0 !important;

  padding: 8px 0 4px !important;
  margin: 6px 0 2px !important;

  font-size: 15px !important;
  font-weight: 1000 !important;
  letter-spacing: .2px !important;
  opacity: .92 !important;

  /* glow sutil con el accent */
  color: color-mix(in srgb, var(--text) 86%, var(--accent) 14%);
  text-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Quitar el “live dot” */
.lottery-card .dot-live{
  display:none !important;
}

/* ===== 3) ELIMINAR MANCHA/RECTÁNGULO raro (pseudo-elementos) ===== */
.lottery-card .lot-preview::before,
.lottery-card .lot-preview::after{
  content:none !important;
  display:none !important;
}

/* ===== 4) DAR VIDA A LA CARD (hover suave) ===== */
.card.lottery-card,
.card .lottery-card{
  position: relative;
}

.card.card-accent:hover{
  transform: translateY(-3px);
  box-shadow: 0 30px 80px rgba(2,6,23,.14);
}

/* Línea sutil interna para que no se vea plana */
.lottery-card{
  position: relative;
}
.lottery-card::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:12px;
  height:1px;
  border-radius:999px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 20%, rgba(230,234,242,.95)),
    transparent
  );
  opacity:.55;
  pointer-events:none;
}

/* ===== 5) BOTÓN PRINCIPAL con micro-pulso (muy sutil) ===== */
.lottery-card .btn.primary{
  position:relative;
  overflow:hidden;
}
.lottery-card .btn.primary::after{
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,.35),
    rgba(255,255,255,0) 55%
  );
  transform: translateX(-25%);
  opacity:.55;
  animation: lotBtnShine 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes lotBtnShine{
  0%   { transform: translateX(-25%); opacity:.35; }
  50%  { transform: translateX(15%);  opacity:.65; }
  100% { transform: translateX(-25%); opacity:.35; }
}

/* ===== 6) BOTONES: más “pro” y alineados ===== */
.lottery-card .lot-actions{
  margin-top: 10px !important;
  gap: 10px !important;
}
.lottery-card .lot-actions .btn{
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

/* =========================================================
   MÓVIL – Compacto, sin estirarse ni verse “vacío”
========================================================= */
@media (max-width:640px){

  /* Subtítulo un poquito más pequeño */
  .lottery-card .lot-preview{
    font-size:14px !important;
    padding: 6px 0 2px !important;
  }

  /* Botones a 2 columnas iguales */
  .lottery-card .lot-actions{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    gap:10px !important;
  }
  .lottery-card .lot-actions .btn{
    width:100% !important;
    justify-content:center !important;
  }

  /* Menos aire dentro de la card */
  .lottery-card{
    gap:10px !important;
  }
}



/* =========================
   /loterias – Acordeón de sorteos + micro-animaciones
   (no afecta otras páginas)
========================= */

/* Hover suave de la card */
.card .lottery-card{transition: transform .15s ease, box-shadow .15s ease;}
.card:hover .lottery-card{transform: translateY(-2px);}

/* Acciones */
.lot-actions{display:flex;gap:10px;align-items:center;}
.lot-actions .btn{white-space:nowrap;}
.lot-meta{opacity:.7;font-weight:800;}

/* Panel acordeón */
.lot-acc{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(0,0,0,.10);}
.lot-acc-inner{display:grid;gap:8px;}

/* Links de sorteos */
.lot-draw-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.85);
  transition: transform .12s ease, box-shadow .12s ease;
}
.lot-draw-link:hover{transform: translateX(2px);}
.lot-draw-name{font-weight:800;}
.lot-draw-link .go{opacity:.6;font-weight:900;}
.lot-draw-link .dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(0,0,0,.03);
  flex:0 0 auto;
}

/* Botón abierto */
.lot-acc-toggle.is-open{filter:saturate(1.1);}

/* Móvil: botones full */
@media (max-width:640px){
  .lot-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .lot-actions .btn{width:100%;justify-content:center;}
}


/* =========================
   /loterias - Acordeón PRO (anti-estilos-rotos)
========================= */

/* Panel acordeón */
.lot-acc{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.12);
}

/* Fuerza layout en bloque aunque otros estilos lo dañen */
.lot-acc-inner{
  display: grid !important;
  gap: 10px !important;
}

/* Cada sorteo como "pill/card" */
.lot-acc-inner a,
a.lot-draw-link{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  padding: 12px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;

  background: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
  color: inherit !important;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}

.lot-acc-inner a:hover,
a.lot-draw-link:hover{
  transform: translateX(2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.16) !important;
}

/* Dot + nombre + flecha */
.lot-acc-inner a .dot,
a.lot-draw-link .dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.04) !important;
  flex: 0 0 auto !important;
}

.lot-acc-inner a .lot-draw-name,
a.lot-draw-link .lot-draw-name{
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  flex: 1 1 auto !important;
}

/* Flecha */
.lot-acc-inner a .go,
a.lot-draw-link .go{
  font-weight: 900 !important;
  opacity: .55 !important;
  flex: 0 0 auto !important;
}

/* Mobile: más compacto */
@media (max-width: 640px){
  .lot-acc-inner a,
  a.lot-draw-link{
    padding: 11px 11px !important;
  }
}

/* =========================
   FIX Mobile: Resultados anteriores como "cards"
   - Oculta header de tabla
   - Cada fila = card
   - Números abajo (no a la derecha)
========================= */
@media (max-width: 640px){

  /* 1) Ocultar encabezado tipo tabla */
  table thead,
  .table-head,
  .results-head,
  .results-header{
    display:none !important;
  }

  /* 2) Hacer que la tabla se comporte como lista de cards */
  table,
  tbody,
  tr,
  td{
    display:block !important;
    width:100% !important;
  }

  /* 3) Cada fila = card */
  tbody tr{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 18px !important;
    padding: 12px !important;
    margin: 12px 0 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.06) !important;
    overflow:hidden !important;
  }

  /* 4) Reducir espacio muerto */
  tbody tr td{
    padding: 6px 0 !important;
    border: 0 !important;
  }

  /* 5) Fecha pequeña (arriba) */
  tbody tr td:first-child{
    font-weight: 800 !important;
    opacity: .75 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  /* 6) Lotería + sorteo (más legible) */
  tbody tr td:nth-child(2),
  tbody tr td:nth-child(3){
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  /* 7) El contenedor de números: lo mandamos abajo y alineado a la izquierda */
  tbody tr td:last-child{
    margin-top: 10px !important;
    padding-top: 12px !important;
    border-top: 1px dashed rgba(0,0,0,.12) !important;

    display:flex !important;
    flex-wrap: wrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap: 10px !important;

    /* mata el “panel vertical” raro si existe */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* 8) Bolas/números: si ya son circles, solo ajustamos tamaño */
  tbody tr td:last-child .ball,
  tbody tr td:last-child .num,
  tbody tr td:last-child .badge,
  tbody tr td:last-child span{
    /* no forzamos display si ya está ok, solo lo mejoramos */
    font-weight: 900 !important;
  }

  /* Si tus números están dentro de un bloque vertical, lo “aplanamos” */
  tbody tr td:last-child > div,
  tbody tr td:last-child .nums,
  tbody tr td:last-child .numbers,
  tbody tr td:last-child .balls{
    display:flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width:100% !important;
    justify-content:flex-start !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow:none !important;
  }

  /* 9) Ajustes para “chips” de lotería/sorteo (si son pastillas) */
  .chip, .pill, .tag{
    max-width: 100% !important;
    white-space: normal !important;
  }
}


/* =========================
   Mobile FIX: Fecha + Lotería + Sorteo en UNA línea
========================= */
@media (max-width: 640px){

  /* Contenedor de los 3 primeros datos */
  tbody tr{
    position: relative;
  }

  /* Agrupamos Fecha, Lotería y Sorteo */
  tbody tr td:nth-child(1),
  tbody tr td:nth-child(2),
  tbody tr td:nth-child(3){
    display: inline-block !important;
    width: auto !important;
    padding: 0 !important;
    margin-right: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  /* Fecha un poco más suave */
  tbody tr td:nth-child(1){
    opacity: .7 !important;
    font-weight: 700 !important;
  }

  /* Lotería resaltada */
  tbody tr td:nth-child(2){
    background: rgba(0,0,0,.05) !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
  }

  /* Sorteo como etiqueta */
  tbody tr td:nth-child(3){
    background: rgba(0,0,0,.08) !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
  }

  /* Separación clara antes de los números */
  tbody tr td:nth-child(4),
  tbody tr td:last-child{
    margin-top: 10px !important;
    display: block !important;
  }
}

/* =========================
   Línea superior moderna en cards de resultados
   (mobile + desktop)
========================= */

/* Card base (cada resultado) */
tbody tr{
  position: relative;
  overflow: hidden; /* evita que la línea se salga */
}

/* Línea superior decorativa */
tbody tr::before{
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 4px;

  /* Degradado moderno y limpio */
  background: linear-gradient(
    90deg,
    rgba(59,130,246,.85),
    rgba(99,102,241,.85),
    rgba(168,85,247,.85)
  );

  border-radius: 999px;
  opacity: .85;
}




/* =========================
   Página de cada lotería (/loteria/{slug})
   - ficha premium con metadata (about/games/schedule)
========================= */
.lot-hero .lot-title{font-size:28px;margin:0;}
.lot-hero .lot-sub{margin:6px 0 0;opacity:.85;}
.lot-hero-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;}
.lot-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.lot-chips{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}

.lot-info-grid{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.mini-list{margin-top:10px;display:grid;gap:10px;}
.mini{padding:10px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(255,255,255,.75);}
.mini-k{font-size:12px;font-weight:900;opacity:.7;letter-spacing:.3px;}
.mini-v{margin-top:4px;font-weight:800;}

.lot-steps{margin:8px 0 0;padding-left:18px;}
.lot-seo{margin-top:12px;}

.lot-sorteos-top{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.draw-search{min-width:240px;flex:1;padding:12px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.12);}

.draw-card{transition:transform .15s ease, box-shadow .15s ease;}
.draw-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:6px;
  background:linear-gradient(90deg,var(--topbar),rgba(255,255,255,0));
  opacity:.9;
}
.draw-card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.08);}
.draw-kicker{font-size:12px;font-weight:900;opacity:.65;letter-spacing:.3px;}
.draw-name{font-size:18px;font-weight:1000;margin-top:4px;}
.draw-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}

.lot-faq .faq{border-top:1px dashed rgba(0,0,0,.12);padding:10px 0;}
.lot-faq .faq:first-of-type{border-top:0;}
.lot-faq summary{cursor:pointer;font-weight:900;}
.lot-faq summary::-webkit-details-marker{display:none;}

@media (max-width: 900px){
  .lot-info-grid{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .lot-hero-top{flex-direction:column;}
  .draw-actions .btn{width:100%;justify-content:center;}
}


.site-logo{
  height:42px;
  width:auto;
  display:block;
}

@media (max-width: 640px){
  .site-logo{
    height:34px;
  }
}


/* ==========================
   BOTON SUBIR ARRIBA (PREMIUM)
========================== */
.to-top{
  position: fixed;
  right: 22px;
  bottom: 140px;           /* 🔥 sube más para NO tapar resultados */
  width: 74px;             /* más grande */
  height: 74px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  /* estilo más pro */
  background: radial-gradient(circle at 30% 30%, #3a3a3a 0%, #0b0b0b 45%, #000 100%);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  /* anillo + sombra */
  box-shadow:
    0 18px 40px rgba(0,0,0,.60),
    0 0 0 8px rgba(255,255,255,.08),
    0 0 22px rgba(255,255,255,.10);

  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease, filter .2s ease;
  opacity: .92;
  z-index: 99999;
}

.to-top:hover{
  transform: translateY(-6px) scale(1.06);
  filter: brightness(1.08);
  box-shadow:
    0 24px 55px rgba(0,0,0,.70),
    0 0 0 10px rgba(255,255,255,.10),
    0 0 28px rgba(255,255,255,.14);
}

/* Mobile */
@media (max-width: 768px){
  .to-top{
    right: 14px;
    bottom: 120px;
    width:56px;
    height:56px;
    font-size: 28px;
  }
}

/* =========================
   RESULTADOS ANTERIORES (UI PREMIUM)
========================= */
.archive-simple{padding:18px 0 26px;}
.archive-simple-inner{max-width:var(--max); margin:0 auto; padding:0 16px;}
.archive-simple-head h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px;}
.archive-simple-head p{margin:0; line-height:1.55;}

.archive-simple-search{margin-top:14px;}
.archive-simple-form{display:flex; gap:10px; align-items:end; background:rgba(255,255,255,.85); backdrop-filter: blur(10px); border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow:var(--shadow2);}
.as-field{flex:1; min-width:220px;}
.as-label{display:block; font-size:12px; font-weight:900; color:var(--muted); margin:0 0 6px;}
.as-input-wrap{position:relative;}
.as-ico{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); opacity:.9; pointer-events:none;}
.as-input-wrap .as-input{padding-left:40px;}
.as-input{width:100%;}
.as-btn{white-space:nowrap;}

.archive-simple-results{margin-top:14px;}
.archive-live-box{background:rgba(255,255,255,.70); border:1px solid var(--line); border-radius:18px; padding:12px; box-shadow:var(--shadow2);}

.archive-chips-mini{margin-top:10px; gap:8px;}
.archive-chips-mini .chip{cursor:pointer; padding:9px 11px; font-size:13px;}

.archive-extra{margin-top:14px;}
.archive-footlinks{display:flex; gap:10px; align-items:center; justify-content:center; padding:10px 12px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.60); box-shadow:var(--shadow2);}
.footer-quick{font-weight:1000;}
.dot-sep{color:var(--muted);}

.archive-seo{margin-top:12px; padding:14px 14px 12px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.70); box-shadow:var(--shadow2);}
.archive-seo h2{margin:0 0 6px; font-size:16px; letter-spacing:.2px;}
.archive-seo p{margin:0; line-height:1.55;}

@media (max-width: 640px){
  .archive-simple-form{flex-direction:column; align-items:stretch;}
  .as-btn{width:100%;}
}

.archive-hero{padding:18px 0 10px;}
.archive-hero-inner{max-width:var(--max); margin:0 auto; padding:0 16px; display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:start;}
.archive-hero-text h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px;}
.archive-hero-text p{margin:0; color:var(--muted); line-height:1.55;}
.archive-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.chip{display:inline-flex; align-items:center; padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.75); font-weight:900; box-shadow:var(--shadow2);}
.chip:hover{transform:translateY(-1px);}
.chip-primary{background:#0b0f14; border-color:rgba(255,255,255,.14); color:#fff;}

.archive-hero-meta .meta-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow2);}
.meta-title{font-weight:900; color:var(--muted); font-size:12px; letter-spacing:.5px; text-transform:uppercase;}
.meta-value{margin-top:6px; font-weight:1000; font-size:18px;}
.meta-sub{margin-top:6px; color:var(--muted); font-size:13px;}

.archive-sticky{position:sticky; top:74px; z-index:20; margin:10px 0 16px;}
.archive-sticky-inner{max-width:var(--max); margin:0 auto; padding:0 16px;}
.archive-filters{display:grid; grid-template-columns: 1.3fr .9fr .8fr 1.2fr auto; gap:10px; align-items:end; background:rgba(255,255,255,.85); backdrop-filter: blur(10px); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:var(--shadow2);}
.archive-filters .field label{display:block; font-size:12px; font-weight:900; color:var(--muted); margin:0 0 6px;}
.archive-filters .field-actions{display:flex; gap:8px; align-items:end;}

.archive-summary{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.pill{display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(11,15,20,.08); border:1px solid rgba(11,15,20,.12); font-weight:900; font-size:12px;}

.archive-grid{max-width:var(--max); margin:0 auto; padding:0 16px 24px; display:grid; grid-template-columns: 380px 1fr; gap:16px;}
.archive-left .sec-title{font-weight:1000; margin-bottom:10px;}

/* Calendario */
.cal-header{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;}
.cal-title{font-weight:1000;}
.cal-sub{color:var(--muted); font-size:13px; margin-top:2px;}
.cal-nav{display:flex; gap:8px;}
.btn.tiny{padding:8px 10px; border-radius:12px; font-weight:1000;}

.cal-grid{display:grid; grid-template-columns: repeat(7, 1fr); gap:8px;}
.cal-week{font-size:12px; font-weight:900; color:var(--muted); text-align:center; padding:6px 0;}
.cal-empty{height:40px;}
.cal-day{height:40px; display:flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.75); font-weight:1000; box-shadow:inset 0 0 0 1px rgba(2,6,23,.03);}
.cal-day:hover{transform:translateY(-1px);}
.cal-day.has{border-color:rgba(59,130,246,.35); box-shadow: 0 0 0 3px rgba(59,130,246,.12);}
.cal-day.sel{background:#0b0f14; color:#fff; border-color:rgba(255,255,255,.18); box-shadow:none;}

.cal-legend{margin-top:12px; display:flex; gap:14px; align-items:center; color:var(--muted); font-size:13px;}
.dot{width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px;}
.dot.on{background:rgba(59,130,246,.7);}
.dot.sel{background:#0b0f14;}

/* Listas/Chips */
.mini-list{display:flex; flex-direction:column; gap:8px;}
.mini-item{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.75);}
.mini-date{font-weight:1000;}
.mini-go{color:var(--muted); font-weight:900;}

.lot-chips{display:flex; flex-wrap:wrap; gap:10px;}
.lot-chip{--c: var(--accent); display:inline-flex; align-items:center; padding:10px 12px; border-radius:999px; border:1px solid rgba(2,6,23,.10); background:rgba(255,255,255,.82); font-weight:1000; box-shadow:var(--shadow2);}
.lot-chip::before{content:""; width:10px; height:10px; border-radius:999px; background:var(--c); margin-right:8px; box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent);}

/* Columna derecha */
.right-title{margin:0 0 8px; font-size:20px; font-weight:1000;}
.results-count{margin:12px 0 8px; color:var(--muted); font-weight:900;}
.global-cards{display:flex; flex-direction:column; gap:12px; margin-top:12px;}
.gcard{border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.85); box-shadow:var(--shadow2); padding:12px;}
.gcard-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.gdate{font-weight:1000;}
.gnums{margin-top:10px;}
.gactions{margin-top:10px; display:flex; justify-content:flex-end;}

.day-groups{display:flex; flex-direction:column; gap:12px; margin-top:12px;}
.acc{border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.85); box-shadow:var(--shadow2); overflow:hidden;}
.acc > summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; padding:12px 14px; font-weight:1000;}
.acc > summary::-webkit-details-marker{display:none;}
.acc-title{display:flex; align-items:center; gap:10px;}
.acc-dot{--c: var(--accent); width:10px; height:10px; border-radius:999px; background:var(--c); box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 20%, transparent);} 
.acc-count{color:var(--muted); font-size:13px; font-weight:900;}
.acc-body{border-top:1px solid var(--line); padding:10px 12px;}
.drow{display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px dashed rgba(2,6,23,.10);} 
.drow:last-child{border-bottom:0;}
.draw-title{font-weight:1000;}
.mini-link{color:var(--muted); font-weight:900; font-size:13px;}

.empty{padding:14px; border-radius:16px; border:1px dashed rgba(2,6,23,.18); background:rgba(255,255,255,.7); color:var(--muted); font-weight:700;}

.faq details{border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.85); padding:10px 12px; margin-top:10px;}
.faq summary{cursor:pointer; font-weight:1000;}
.faq-body{margin-top:8px; color:var(--muted); line-height:1.55;}

@media (max-width: 980px){
  .archive-hero-inner{grid-template-columns:1fr;}
  .archive-grid{grid-template-columns: 1fr;}
  .archive-sticky{top:64px;}
  .archive-filters{grid-template-columns:1fr 1fr;}
  .archive-filters .field-actions{grid-column:1 / -1; justify-content:flex-end;}
  .drow{grid-template-columns:1fr;}
  .gactions{justify-content:flex-start;}
}

.archive-right{order:1;}
.archive-left{order:2;}

 

}


/* RESULT CARD TYPO (mobile) */
@media (max-width: 640px){
  .result-card .rc-lottery{ font-size:16px; }
  .result-card .rc-draw-inline{ font-size:13px; }
  .result-card .rc-dot{ width:9px; height:9px; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
  .result-card .ball{ width:44px; height:44px; font-size:24px; }
}

/* Calendar icon button + hidden date input */
.as-ico-btn{pointer-events:auto;background:transparent;border:0;padding:0;cursor:pointer;}
.as-ico-btn:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:2px;border-radius:10px;}
.as-date-picker{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;}



/* =========================
   ✅ REDISEÑO "BLOCKS + CARDS" (Home / Lotería / Sorteo)
   Inspirado en tu mockup: barra de color + tarjetas con logo + bolas protagonistas
========================= */

.home-hero{
  padding:18px 0 6px;
}
.home-title{
  margin:0;
  font-size:28px;
  letter-spacing:.2px;
}
.home-sub{
  margin-top:6px;
  color:rgb(255 255 255 / 65%);
  font-size:14px;
}

.lot-block{
  margin:18px 0 22px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:#f5f6f7;
}
.lot-block-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:var(--accent, #3b82f6);
  color:#0b0b0b;
}
.lot-head-left{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#0b0b0b;
}
.lot-logo{
  width:44px;height:44px;
  border-radius:12px;
  background:rgba(255,255,255,.88);
  object-fit:contain;
  padding:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.lot-logo.ph{
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:20px;
}
.lot-logo.big{ width:58px;height:58px; border-radius:16px; }
.lot-name{
  font-size:34px;
  font-weight:900;
  letter-spacing:.3px;
  line-height:1;
}
.lot-head-right{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}
.pill{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.15);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.lot-date{
  font-size:28px;
  font-weight:900;
  letter-spacing:.6px;
}

/* grid */
.draw-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  padding:14px;
}
.draw-grid-1{ grid-template-columns:1fr; }

@media (max-width: 980px){
  .draw-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .lot-name{ font-size:26px; }
  .lot-date{ font-size:20px; }
}
@media (max-width: 620px){
  .draw-grid{ grid-template-columns:1fr; }
  .lot-name{ font-size:22px; }
  .lot-date{ font-size:18px; }
}

/* card */
.draw-card{
  --topbar: var(--accent, #3b82f6);
  background:#ffffff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:150px;
}
.draw-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:6px;
  background:linear-gradient(90deg,var(--topbar),rgba(255,255,255,0));
  opacity:.9;
}
.draw-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 8px;
}
.draw-name{
  font-weight:900;
  text-decoration:none;
  color:#111;
  line-height:1.1;
}
.draw-name:hover{ text-decoration:underline; }
.draw-stamp{
  font-weight:900;
  font-size:22px;
  color:black;
  white-space:nowrap;
}

.draw-mid{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px 12px;
}
.draw-logo{
  width:64px;
  height:52px;
  border-radius:14px;
  background:#f2f4f7;
  border:1px solid rgba(0,0,0,.08);
  object-fit:contain;
  padding:6px;
}
.draw-logo.ph{
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:22px;
  color:rgba(0,0,0,.6);
}

.num-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.num-ball{
  width:44px;height:44px;
  border-radius:999px;
  background:#d9d9d9;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:18px;
  color:#111;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
}
.num-empty{
  font-weight:900;
  color:rgba(0,0,0,.45);
  font-size:18px;
}

.draw-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid rgba(0,0,0,.07);
  background:linear-gradient(90deg, rgba(0,0,0,.03), transparent);
}
.badge{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-weight:900;
  font-size:16px;
  border:1px solid rgba(0,0,0,.12);
  color: black;
  
}
.badge.ok{
  background:rgba(34,197,94,.18);

}
.badge.wait{
  background:#e6e5e5;
}
.mini-link{
  text-decoration:none;
  font-weight:900;
  color:#111;
  opacity:.85;
}
.mini-link:hover{ opacity:1; text-decoration:underline; }
.mini-date{ font-weight:900; color:rgba(0,0,0,.65); }

/* pending animation */
.draw-card.is-pending .badge.wait{
  animation:pulseWarn 1.15s ease-in-out infinite;
}
@keyframes pulseWarn{
  0%,100%{ transform:scale(1); filter:saturate(1); }
  50%{ transform:scale(1.04); filter:saturate(1.2); }
}

/* Lotería page header */
.lot-page-head, .draw-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, var(--accent, #3b82f6), rgba(0,0,0,.06));
  color:#fff;
  border:1px solid rgba(0,0,0,.10);
  margin:16px 0;
}
.lot-page-left, .draw-head-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.lot-page-title, .draw-page-title{
  margin:0;
  font-size:28px;
  font-weight:1000;
}
.lot-page-sub, .draw-page-sub{
  margin-top:4px;
  font-weight:700;
  color:white;
}
.lot-page-right, .draw-head-right{
  text-align:right;
}
.pending-mini{
  margin-top:6px;
  font-weight:900;
  color: white;
}
.alert-wait{
  margin:12px 0 16px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.12);
  background:rgb(102 101 101 / 14%);
}
.alert-title{ font-weight:1000; }
.alert-sub{ margin-top:4px; color:rgba(0,0,0,.7); }

.draw-breadcrumb{
  font-weight:900;
  color:rgba(0,0,0,.75);
}
.draw-breadcrumb a{ color:inherit; text-decoration:none; }
.draw-breadcrumb a:hover{ text-decoration:underline; }
.draw-head-logo{
  width:62px;height:62px;
  border-radius:18px;
  background:rgba(255,255,255,.85);
  object-fit:contain;
  padding:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.draw-head-logo.ph{
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:1000;
}

.empty-block{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
}
.empty-title{ font-weight:1000; font-size:18px; }
.empty-sub{ margin-top:4px; color:rgba(0,0,0,.7); }

/* SEO helper text (no “carnalazo”: limpio y discreto) */
.home-seo,
.page-seo{
  margin:10px 0 0;
  max-width:980px;
  line-height:1.55;
  color:rgb(255 255 255 / 74%)
  font-weight:650;
}
.page-seo{
  margin:8px 0 14px;
}

/* Footer refinado */
.site-footer-bottom{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:14px;
}
.foot-seo{
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.86);
}
.foot-copy{
  font-size:13px;
  color:rgba(255,255,255,.72);
}

.footer-hours{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.fh-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.fh-dot{
  width:10px;height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  box-shadow:0 0 0 6px rgba(255,255,255,.08);
}

/* micro-interacciones (sutil) */
.mini-card,
.draw-card{
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease;
}
.draw-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:6px;
  background:linear-gradient(90deg,var(--topbar),rgba(255,255,255,0));
  opacity:.9;
}
.mini-card:hover,
.draw-card:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.14);
}

@media (prefers-reduced-motion: reduce){
  .mini-card,
  .draw-card{ transition:none; }
.draw-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:6px;
  background:linear-gradient(90deg,var(--topbar),rgba(255,255,255,0));
  opacity:.9;
}
  .mini-card:hover,
  .draw-card:hover{ transform:none; }
}


/* =========================
   APP POLISH (V5)
   - look moderno tipo app (sin carnavalesco)
========================= */
body{
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(79,70,229,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(900px 500px at 50% 110%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 25%, #0a1020 100%);
}

/* micro-textura (muy sutil) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 7px);
  mix-blend-mode:overlay;
}

.site-header{
  backdrop-filter: blur(16px);
}

/* cards: más "app" */
.card, .draw-card{
  backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.06) inset;
}

.draw-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.07) inset;
}

/* borde superior con brillo suave */
.draw-card::before{
  filter: saturate(1.15);
}

/* número/bolas: más premium */
.balls .ball{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.balls .ball::after{
  content:"";
  position:absolute;
  top:8%;
  left:10%;
  width:52%;
  height:38%;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 65%);
  opacity:.75;
  pointer-events:none;
}

/* logos un poco más protagonistas */
.draw-card .draw-logo{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* chips/badges más elegantes */
.badge, .pill{
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

/* footer: look limpio */
.site-footer{
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.10);
}


/* =========================================================
   🔥 CASINO EN VIVO (AGRESIVO) + LATIDO + GLOW PULSANTE
   (INTEGRADO AL CSS COMPLETO)
   - Este bloque va al FINAL para sobreescribir estilos previos.
========================================================= */

/* ---------- Fondo casino vivo (luces + neón) ---------- */
body{
  background:
    radial-gradient(1100px 700px at 15% 10%, rgba(255, 215, 0, .18), transparent 58%),
    radial-gradient(1000px 640px at 85% 12%, rgba(255, 0, 90, .18), transparent 55%),
    radial-gradient(1100px 700px at 55% 95%, rgba(0, 229, 255, .14), transparent 60%),
    radial-gradient(900px 560px at 50% 50%, rgba(168, 85, 247, .10), transparent 65%),
    linear-gradient(180deg, #05060a 0%, #070b14 40%, #05060a 100%);
  color:#eaf0ff;
}

/* Glow ambiental “vivo” */
body::before{
  content:"";
  position:fixed;
  inset:-40vh -30vw;
  pointer-events:none;
  background:
    conic-gradient(from 180deg,
      rgba(255,215,0,.10),
      rgba(0,229,255,.10),
      rgba(255,0,90,.10),
      rgba(168,85,247,.10),
      rgba(255,215,0,.10)
    );
  filter: blur(40px);
  opacity:.55;
  animation: casinoAmbient 9s linear infinite;
  z-index:-1;
}
@keyframes casinoAmbient{
  0%{ transform: rotate(0deg) scale(1.05); }
  50%{ transform: rotate(180deg) scale(1.12); }
  100%{ transform: rotate(360deg) scale(1.05); }
}

/* ---------- Cards: vidrio oscuro + borde neón ---------- */
.card{
  background:
    linear-gradient(180deg, rgba(16,24,40,.86), rgba(7,11,20,.84));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(10px);
}

/* línea superior tipo “neón” en cards (si tienes card-accent) */
.card-accent::before{
  height:7px !important;
  background:
    linear-gradient(90deg,
      rgba(255,215,0,.95),
      rgba(0,229,255,.95),
      rgba(255,0,90,.95),
      rgba(168,85,247,.95)
    ) !important;
  opacity:.95;
}

/* ---------- Header/Footer: casino night pero legible ---------- */
.site-header,
.site-footer{
  background:#05060a !important;
  box-shadow: 0 16px 60px rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-footer{ border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- Botones: brillo tipo “jackpot” ---------- */
.btn.primary{
  border:0 !important;
  color:#black !important;
  background:
   black;
  box-shadow:
    0 18px 55px rgba(0,229,255,.18),
    0 18px 55px rgba(255,0,90,.14),
    0 18px 55px rgba(255,215,0,.14);
  position:relative;
  overflow:hidden;
}
.btn.primary::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
  transform: translateX(-25%);
  opacity:.55;
  animation: btnShine 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes btnShine{
  0%{ transform: translateX(-28%) rotate(8deg); opacity:.35; }
  50%{ transform: translateX(20%) rotate(8deg); opacity:.70; }
  100%{ transform: translateX(-28%) rotate(8deg); opacity:.35; }
}

/* =========================================================
   🎱 BOLAS GIGANTES + LATIDO + BRILLO
========================================================= */

/* Centrado y respiración */
.result-card .balls,
.balls,
.balls-soft{
  justify-content:center !important;
  gap:14px !important;
}

/* Bola base (aplica a varias páginas) */
.result-card .ball,
.balls-soft .ball,
.ball{
  width: 128px !important;
  height: 128px !important;
  border-radius: 999px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-weight: 1000 !important;
  font-size: 52px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;

  /* material casino (perlado + neón) */
  background:
    white;

  border: 1px solid rgba(255,255,255,.22) !important;

  /* Glow + profundidad */
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    0 0 0 3px rgba(255,255,255,.10) inset,
    0 0 26px rgba(0,229,255,.35),
    0 0 26px rgba(255,0,90,.25),
    0 0 26px rgba(255,215,0,.20);

  color:#061018 !important;

  position:relative;
  isolation:isolate;

  /* Latido base */
  animation: ballBeat 1.25s ease-in-out infinite;
}

/* Halo animado exterior */
.result-card .ball::before,
.balls-soft .ball::before,
.ball::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:GRAY;
  filter: blur(10px);
  opacity:.55;
  z-index:-1;
  animation: haloSpin 2.8s linear infinite;
}
@keyframes haloSpin{
  to{ transform: rotate(360deg); }
}

/* Latido (escala + brillo) */
@keyframes ballBeat{
  0%, 100%{
    transform: translateY(0) scale(1);
    filter: brightness(1.00) saturate(1.05);
  }
  45%{
    transform: translateY(-2px) scale(1.06);
    filter: brightness(1.08) saturate(1.25);
  }
  60%{
    transform: translateY(0) scale(1.02);
    filter: brightness(1.03) saturate(1.12);
  }
}

/* =========================================================
   ✨ GLOW PULSANTE EN NÚMEROS
   (texto dentro de bolas y números en tabla)
========================================================= */

/* Glow pulsante del número dentro de la bola */
.result-card .ball,
.balls-soft .ball,
.ball{
  text-shadow:
    0 0 0 rgba(0,229,255,0),
    0 0 0 rgba(255,0,90,0);
}
.result-card .ball,
.balls-soft .ball,
.ball{
  animation:
    ballBeat 1.25s ease-in-out infinite,
    numberGlow 1.35s ease-in-out infinite;
}
@keyframes numberGlow{
  0%, 100%{
    text-shadow:
     black;
  }
  50%{
    text-shadow:
      black;
  }
}

/* Si tienes números en tabla (columna 4) también late sutil */
.table td:nth-child(4){
  color:#eaf0ff !important;
  text-shadow: 0 0 10px rgba(0,229,255,.18);
}
.table td:nth-child(4) *{
  animation: tableNumsGlow 1.7s ease-in-out infinite;
}
@keyframes tableNumsGlow{
  0%,100%{ text-shadow: 0 0 8px rgba(0,229,255,.18); }
  50%{ text-shadow: 0 0 16px rgba(255,0,90,.18), 0 0 10px rgba(255,215,0,.16); }
}

/* =========================================================
   📱 Mobile: mantiene el impacto sin romper layout
========================================================= */
@media (max-width: 720px){
  .result-card .ball,
  .balls-soft .ball,
  .ball{
    width: 100px !important;
    height: 100px !important;
    font-size: 40px !important;
  }
  .result-card .balls,
  .balls,
  .balls-soft{
    gap:12px !important;
  }
}

/* Accesibilidad: si el user tiene “reduce motion”, paramos animaciones */
@media (prefers-reduced-motion: reduce){
  body::before,
  .result-card .ball,
  .balls-soft .ball,
  .ball,
  .table td:nth-child(4) *{
    animation: none !important;
  }
}



/* =========================================================
   ✅ SKIN 4: ANGUILLA VIBES (Azul/Turquesa/Mar)
   - Fondo inspirado en “mar + brillos”
   - Puedes poner logo gigante como fondo con .brand-bg
   - Bolas grandes con brillo acuático
========================================================= */

:root{
  --accent:#00bcd4; /* puedes dejarlo por BD o poner el de Anguilla */

  --bg1:#03121c;
  --bg2:#041b2a;

  --text:000;
  --muted:rgba(234,252,255,.72);

  --surface:rgba(255,255,255,.06);
  --surface2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.12);

  --radius:22px;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --shadow2:0 12px 30px rgba(0,0,0,.33);

  --aqua:rgba(0,188,212,.22);
  --aqua2:rgba(0,229,255,.16);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 12%, var(--aqua), transparent 62%),
    radial-gradient(900px 520px at 82% 22%, var(--aqua2), transparent 62%),
    radial-gradient(900px 520px at 50% 92%, rgba(59,130,246,.16), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* (Opcional) si en tu HTML puedes agregar un div con clase brand-bg y un background-image */
.brand-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-repeat:no-repeat;
  background-position:center;
  background-size:70vmin;
  filter:saturate(1.05) contrast(1.05);
}

.container, .wrap, #app{
  max-width:1100px;
  margin:0 auto;
  padding:18px 14px 40px;
}

/* Header */
.header, .topbar, .main-header{
  border-radius:calc(var(--radius) + 6px);
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
  box-shadow:var(--shadow);
  backdrop-filter: blur(12px);
  padding:14px 16px;
  position:relative;
  overflow:hidden;
}
.header::before, .topbar::before, .main-header::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,.28), transparent);
  transform:translateX(-60%);
  animation:wave 6.2s linear infinite;
}
@keyframes wave{
  0%{ transform:translateX(-60%); }
  100%{ transform:translateX(60%); }
}

.title, .header-title{ font-weight:950; text-shadow:0 2px 16px rgba(0,0,0,.32); }
.subtitle, .header-subtitle{ margin-top:4px; color:var(--muted); font-weight:700; }

/* Cards */
.card, .panel, .box, .lot-card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow:var(--shadow2);
  backdrop-filter: blur(12px);
  overflow:hidden;
  position:relative;
}
.card .card-header, .panel .panel-header, .box .box-header, .lot-card .lot-header{
  padding:12px 14px;
  font-weight:950;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), rgba(255,255,255,.04));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.card .card-body, .panel .panel-body, .box .box-body, .lot-card .lot-body{
  padding:14px;
}

.grid{ display:grid; gap:12px; }
.grid.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width: 860px){
  .grid.cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .grid.cols-3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{ grid-template-columns:1fr; }
}

/* Hora centrada */
.time, .hora, .lot-time{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-weight:950;
  letter-spacing:.7px;
}

/* Bolas grandes (acuáticas) */
.balls, .nums, .numbers{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  padding:10px 0 2px;
}
.ball, .num-ball, .number-ball{
  width:70px;
  height:70px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:42px;
  color:#03121c;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.35) 38%, rgba(255,255,255,.10) 60%, rgba(0,0,0,.06) 100%),
    linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--accent) 22%, #ffffff));
  box-shadow:
    0 18px 48px rgba(0,0,0,.38),
    0 0 0 2px rgba(0,229,255,.22),
    0 0 34px rgba(0,229,255,.18);
  position:relative;
  animation:bubble 2.1s ease-in-out infinite;
}
@keyframes bubble{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-2px) scale(1.04); }
}
.ball::after, .num-ball::after, .number-ball::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow: inset 0 0 22px rgba(255,255,255,.18);
}

/* 1er/2do/3ro */
.place, .pos, .rank{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:6px;
  color:var(--muted);
  font-weight:950;
  font-size:12px;
  letter-spacing:.35px;
  text-transform:uppercase;
}
.place span, .pos span, .rank span{
  width:110px;
  text-align:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

/* Marquee */
.marquee, .ticker{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.marquee .track, .ticker .track{
  display:inline-block;
  white-space:nowrap;
  padding:10px 14px;
  animation:marq 28s linear infinite;
  font-weight:950;
}
@keyframes marq{
  0%{ transform:translateX(100%); }
  100%{ transform:translateX(-100%); }
}


body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);

  /* ✅ Fondo claro premium (sin negro) */
  background:
    radial-gradient(1000px 600px at 18% 12%, rgba(0,188,212,.18), transparent 62%),
    radial-gradient(1000px 600px at 82% 18%, rgba(0,229,255,.14), transparent 62%),
    radial-gradient(1000px 600px at 50% 92%, rgba(59,130,246,.12), transparent 62%),
    linear-gradient(180deg, #f6fbff, #ffffff);
}



/* =========================================
   PARCHE: texto superior oscuro (para fondo claro)
   (Solo afecta la parte superior / hero / header)
========================================= */

.header, .topbar, .main-header,
.hero, .hero-section, .page-hero, .intro, .page-intro{
  color:#0b1220 !important;
}

.header a, .topbar a, .main-header a,
.hero a, .hero-section a, .page-hero a,
.intro a, .page-intro a{
  color:#0b1220 !important;
}

.header .subtitle, .topbar .subtitle, .main-header .subtitle,
.hero p, .hero-section p, .page-hero p,
.intro p, .page-intro p{
  color: rgba(11,18,32,.78) !important;
  text-shadow:none !important;
}

/* Si tienes textos "forzados" a blanco por clases globales */
.header *, .topbar *, .main-header *,
.hero *, .hero-section *, .page-hero *,
.intro *, .page-intro *{
  text-shadow:none !important;
}



/* =========================================================
   ✅ FORZAR TEXTO SUPERIOR EN NEGRO
   (solo afecta la parte alta de cada página)
========================================================= */

.hero,
.home-hero,
.header,
.topbar,
.main-header,
.lot-page-head,
.draw-page-head,
.page-hero,
.page-intro,
.home-title,
.home-sub,
.breadcrumbs{
  color:#000000 !important;
}

/* Forzar todo lo que esté dentro */
.hero *,
.home-hero *,
.header *,
.topbar *,
.main-header *,
.lot-page-head *,
.draw-page-head *,
.page-hero *,
.page-intro *,
.home-title *,
.home-sub *,
.breadcrumbs *{
  color:#000000 !important;
  text-shadow:none !important;
}

/* =========================================================
   PARCHE QUIRÚRGICO
   ✅ Quitar TODOS los gradients del:
   1) Fondo total (body)
   2) Cabeceras de páginas: /loteria/{slug} y /draw/{slug}
   (NO toca el resto de gradients internos del sitio)
========================================================= */

/* 1) FONDO TOTAL: sin radial-gradient / linear-gradient */
html, body{
  background: var(--bg) !important;
}

body{
  background: var(--bg) !important;
  background-image: none !important;
}

/* Apaga overlays/ambient/texture si existen */
body::before,
body::after{
  content: none !important;
  display: none !important;
}

/* 2) CABECERAS LOTERÍA / SORTEO: sin gradient */
.lot-page-head,
.draw-page-head{
  background: var(--accent, #3b82f6) !important; /* sólido */
  background-image: none !important;
}

/* Si alguna cabecera trae pseudo efectos con gradiente */
.lot-page-head::before,
.lot-page-head::after,
.draw-page-head::before,
.draw-page-head::after{
  content: none !important;
  display: none !important;
  
  
  /* =========================================================
   PARCHE: borde de bolas NEUTRO (sin fucsia)
   - Fuerza borde negro/gris
   - Mata el halo fucsia del ::before
========================================================= */

.result-card .ball,
.balls-soft .ball,
.ball{
  border: 2px solid rgba(0,0,0,.35) !important;   /* <-- borde neutro */
  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    inset 0 0 0 2px rgba(255,255,255,.30) !important; /* <-- sin glow fucsia */
}

/* Quita el halo conic-gradient (donde nace el fucsia) */
.result-card .ball::before,
.balls-soft .ball::before,
.ball::before{
  content:none !important;
  display:none !important;
}
}