/*
HOME - CSS ESPECÍFICO DE index.html
Fase 39: extraído desde styles.css.
Reglas:
- Este archivo solo debe cargarse en public/index.html.
- No agregar estilos de páginas internas acá.
- Tokens/colores base viven en tokens.css.
- Reset/base vive en base.css.
*/
.fecha-selector {justify-content:center;
align-items:stretch;
gap:8px;
max-width:440px;
margin:16px auto 0;
padding:0 16px;
display:flex}
.fecha-nav {width:44px;
height:44px;
color:var(--color-blanco,var(--theme-white));
cursor:pointer;
background:#ffffff14;
border:1px solid #ffffff26;
border-radius:10px;
flex:none;
justify-content:center;
align-items:center;
transition:background .15s,transform .1s;
display:inline-flex}
.fecha-nav:hover:not(:disabled) {background:#ffffff2e}
.fecha-nav:active:not(:disabled) {transform:scale(.95)}
.fecha-nav:disabled {opacity:.35;
cursor:not-allowed}
.fecha-actual {height:44px;
color:var(--color-blanco,var(--theme-white));
text-transform:capitalize;
cursor:pointer;
white-space:nowrap;
text-overflow:ellipsis;
background:#ffffff1f;
border:1px solid #ffffff38;
border-radius:10px;
flex:auto;
justify-content:center;
align-items:center;
gap:8px;
padding:0 18px;
font-size:.95rem;
font-weight:700;
transition:background .15s;
display:inline-flex;
overflow:hidden}
.fecha-actual:hover {background:#ffffff38}
.fecha-actual .fecha-icono {opacity:.85;
flex-shrink:0}
.fecha-input-hidden {opacity:0;
pointer-events:none;
position:absolute;
left:-9999px}
.fecha-selector.historico .fecha-actual {background:#62C9CF33;
border-color:#62C9CF80}
.fecha-selector.historico .fecha-actual:after {content:"HISTÓRICO";
background:var(--color-rojo,var(--theme-accent));
color:var(--theme-white);
letter-spacing:.5px;
border-radius:4px;
padding:2px 6px;
font-size:var(--font-min, .6875rem);
font-weight:900;
position:absolute;
top:-6px;
right:-6px}
.fecha-selector.historico .fecha-actual {position:relative}
.flatpickr-calendar {box-shadow:none;
background:var(--theme-navy);
border:1px solid #ffffff26;}
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-weekday {color:var(--theme-white)}
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year {color:var(--theme-white);
font-weight:700}
.flatpickr-day {color:#ffffffd9;
border-radius:6px}
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {background:#62C9CF40;
border-color:#0000}
.flatpickr-day.selected, .flatpickr-day.selected:hover {background:var(--color-rojo,var(--theme-accent));
border-color:var(--color-rojo,var(--theme-accent));
color:var(--theme-white)}
.flatpickr-day.today {border-color:var(--color-rojo,var(--theme-accent))}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {color:#fff3;
background:0 0}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {color:#ffffff59}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {fill:var(--theme-white);
color:var(--theme-white)}
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {fill:var(--color-rojo,var(--theme-accent))}
.sorteo-banner-num {color:var(--theme-white);
font-variant-numeric:tabular-nums;
text-shadow:0 2px 8px #0000004d;
background:#ffffff1a;
border:1px solid #ffffff26;
border-radius:12px;
min-width:86px;
padding:14px 18px;
font-size:3.2rem;
font-weight:800;
line-height:1}
.sorteo-banner-sep {color:#fff6;
padding-bottom:24px;
font-size:2.8rem;
font-weight:800;
line-height:1}
.sorteo-banner-hint {color:#fff6;
border-top:1px solid #ffffff1a;
margin-top:4px;
padding-top:14px;
font-size:.75rem}
.sorteo-banner {-webkit-backdrop-filter:blur(16px);
text-align:center;
max-width:340px;
box-shadow:none;
background:#ffffff12;
border:1px solid #ffffff26;
border-radius:16px;
margin:16px auto 0;
padding:14px 20px 12px}
.sorteo-banner-titulo {letter-spacing:.12em;
text-transform:uppercase;
color:#fff9;
margin-bottom:10px;
font-size:.65rem;
font-weight:700}
.sorteo-banner-reloj {justify-content:center;
align-items:center;
gap:6px;
margin-bottom:10px;
display:flex}
.sorteo-banner-bloque {flex-direction:column;
align-items:center;
gap:3px;
display:flex}
.sorteo-banner-num {color:var(--theme-white);
font-variant-numeric:tabular-nums;
background:#ffffff1a;
border:1px solid #ffffff26;
border-radius:8px;
min-width:48px;
padding:6px 10px;
font-size:1.6rem;
font-weight:800;
line-height:1}
.sorteo-banner-sep {color:#ffffff59;
padding-bottom:14px;
font-size:1.4rem;
font-weight:800}
.sorteo-banner-etiq {letter-spacing:.08em;
text-transform:uppercase;
color:#fff6;
font-size:var(--font-min, .6875rem);
font-weight:700}
.sorteo-banner-hint {color:#ffffff59;
border-top:1px solid #ffffff14;
padding-top:8px;
font-size:.65rem}
.grid-container {max-width:1400px;
padding:0 var(--esp-lg) var(--esp-xl);
margin:0 auto}
.modal-overlay {backdrop-filter:blur(4px);
z-index:1000;
padding:var(--esp-md);
opacity:0;
pointer-events:none;
background-color:var(--color-marino)b3;
justify-content:center;
align-items:center;
transition:opacity .25s;
display:flex;
position:fixed;
inset:0}
.modal-overlay.abierto {opacity:1;
pointer-events:auto}
.modal-overlay.abierto .modal {transform:scale(1)}
.modal-header {background-color:var(--color-marino);
color:var(--color-blanco);
padding:var(--esp-md) var(--esp-lg);
border-radius:var(--radio-lg) var(--radio-lg) 0 0;
justify-content:space-between;
align-items:center;
display:flex}
.modal-titulo {text-transform:uppercase;
letter-spacing:.02em;
font-size:1.1rem;
font-weight:700}
.modal-subtitulo {opacity:.8;
text-transform:uppercase;
letter-spacing:.1em;
margin-top:2px;
font-size:.75rem;
font-weight:500}
.modal-cerrar {width:36px;
height:36px;
color:var(--color-blanco);
transition:var(--transicion);
background-color:#ffffff1a;
border-radius:50%;
justify-content:center;
align-items:center;
font-size:1.2rem;
display:flex}
.modal-cerrar:hover {background-color:var(--color-rojo);
transform:rotate(90deg)}
.modal-body {padding:var(--esp-lg)}
.instalar-section {background:linear-gradient(135deg, var(--color-marino) 0%, #0d2145 100%);
color:var(--color-blanco);
padding:var(--esp-xl) var(--esp-lg)}
.instalar-container {max-width:860px;
margin:0 auto}
.instalar-section h2 {color:var(--color-blanco);
margin-bottom:10px;
font-size:1.4rem;
font-weight:800}
.instalar-section>.instalar-container>p {opacity:.85;
margin-bottom:var(--esp-md);
font-size:.95rem}
.instalar-pasos {gap:var(--esp-md);
margin-bottom:var(--esp-md);
grid-template-columns:1fr 1fr;
display:grid}
.instalar-bloque {border-radius:var(--radio-md);
padding:var(--esp-md);
background:#ffffff14;
border:1px solid #ffffff26}
.instalar-bloque h3 {color:var(--color-blanco);
margin-bottom:10px;
font-size:.95rem;
font-weight:700}
.instalar-bloque ol {flex-direction:column;
gap:6px;
padding-left:18px;
display:flex}
.instalar-bloque li {opacity:.9;
font-size:.88rem;
line-height:1.4}
.instalar-nota {opacity:.65;
font-size:.82rem;
font-style:italic}
@media (max-width: 600px) {
.instalar-pasos {grid-template-columns:1fr}
}
.fecha-selector.historico .fecha-actual, .fecha-selector.historico .fecha-actual:hover {background:#ffffff29;
border-color:#ffffff38}
.fecha-selector.historico .fecha-actual:after {content:none;
display:none}
.sorteo-banner, .fecha-actual, .fecha-nav {box-shadow:var(--sombra-md)}
@media (max-width: 768px) {
.fecha-selector {gap:8px;
margin-top:12px}
.fecha-actual {min-width:0;
padding:10px 12px;
font-size:.82rem}
.fecha-nav {width:40px;
height:40px}
.sorteo-banner {border-radius:14px;
margin:14px auto 0;
padding:14px 12px}
.sorteo-banner-titulo {font-size:.82rem;
line-height:1.35}
.sorteo-banner-reloj {gap:6px}
.sorteo-banner-num {font-size:1.1rem}
.grid-container {padding:0 12px 24px}
.modal-overlay {align-items:flex-end;
padding:0}
.modal-header {border-radius:18px 18px 0 0;
padding:14px 16px}
.modal-body {padding:14px}
}
@media (max-width: 420px) {
.fecha-actual span, #fechaHoy {text-overflow:ellipsis;
white-space:nowrap;
max-width:150px;
overflow:hidden}
}
html.pwa-standalone .modal-overlay.abierto {min-height:100dvh}
@media (max-width: 600px) {
.fecha-selector {margin-top:var(--esp-sm)}
}
.quick-province-strip.compact {
border-radius: 18px;
justify-content: space-between;
align-items: center;
gap: 14px;
width: min(1180px,100% - 28px);
margin: 8px auto 28px;
padding: 14px 16px;
display: flex;
}
.quick-province-intro {flex-direction:column;
gap:2px;
min-width:210px;
display:flex}
.quick-province-intro strong {color:#111827;
font-size:.96rem;
line-height:1.2}
.quick-province-intro span {color:#64748b;
font-size:.82rem}
.quick-province-links {flex-wrap:wrap;
justify-content:flex-end;
gap:8px;
display:flex}
.quick-province-links a {color:var(--brand-accent-ink, #62C9CF);
letter-spacing:.01em;
background:rgba(var(--brand-accent-rgb), .12);
border:1px solid var(--brand-accent-ink, #62C9CF)1f;
border-radius:999px;
justify-content:center;
align-items:center;
min-height:34px;
padding:7px 12px;
font-size:.84rem;
font-weight:800;
text-decoration:none;
display:inline-flex}
.quick-province-links a:hover {color:var(--brand-accent-dark, #62C9CF);
background:rgba(var(--brand-accent-rgb), .18);
transform:translateY(-1px)}
@media (max-width: 768px) {
.quick-province-strip.compact {flex-direction:column;
align-items:flex-start;
width:min(100% - 20px,1180px);
margin:6px auto 22px;
padding:13px}
.quick-province-links {-webkit-overflow-scrolling:touch;
flex-wrap:nowrap;
justify-content:flex-start;
width:100%;
padding-bottom:3px;
overflow-x:auto}
.quick-province-links a {white-space:nowrap;
flex:none}
}
.sorteobanner--simple {text-align:center;
-webkit-backdrop-filter:none;
max-width:420px;
box-shadow:none;
background:0 0;
border:0;
border-radius:0;
margin:12px auto 0;
padding:0}
.sorteobanner--simple .sorteo-banner-titulo {letter-spacing:.02em;
text-transform:none;
color:#ffffffd1;
margin:0;
font-size:.86rem;
font-weight:700}
.sorteobanner--simple .sorteo-banner-reloj, .sorteobanner--simple .sorteo-banner-hint, .sorteobanner--simple .sorteo-banner-etiq, .sorteobanner--simple .sorteo-banner-sep, .sorteobanner--simple .sorteo-banner-bloque, .sorteobanner--simple .sorteo-banner-num {display:none}
@media (width>=1024px) {
.fecha-selector {gap:10px;
max-width:620px;
margin-top:10px}
.fecha-nav {border-radius:16px;
width:54px;
height:54px}
.fecha-actual {border-radius:16px;
height:54px;
padding:0 18px;
font-size:.98rem}
}
@media (max-width: 767px) {
.sorteobanner--simple {max-width:320px;
margin-top:10px}
.sorteobanner--simple .sorteo-banner-titulo {font-size:.8rem;
line-height:1.35}
}
.sorteobanner--simple .sorteo-banner-titulo {color:#5A45A3c2}
.fecha-selector {z-index:2;
position:relative}
.fecha-nav, .fecha-actual, .sorteobanner--simple, .sorteo-banner {color:var(--color-carbon);
background:#f7f8fb8f;
border:1px solid #5A45A324;
box-shadow:0 10px 24px #5A45A30f}
.sorteobanner--simple {box-shadow:none;
background:0 0;
border:0}
.fecha-nav:hover:not(:disabled), .fecha-actual:hover {background:#f7f8fbe6;
border-color:#62C9CF59}
.fecha-actual .fecha-icono, .flatpickr-day.selected, .flatpickr-day.selected:hover {color:var(--color-coral);
stroke:var(--color-coral)}
.grid-container {background:0 0}
.modal-header {color:var(--theme-surface);
background:var(--theme-ink)}
.stats-quick-strip {
z-index: 5;
position: relative;
}
.stats-quick-link {
text-decoration: none;
transition: color .18s,background .18s,transform .18s;
}
.stats-quick-link svg {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .92;
}
.stats-quick-link:hover {
transform: translateY(-1px);
}
.quick-province-strip.compact {
border: 1px solid #5A45A31a;
box-shadow: 0 10px 24px #5A45A30f;
}
.quick-province-intro strong {color:var(--theme-ink)}
.quick-province-intro span {color:#5A45A39e}
.instalar-section {color:var(--theme-surface);
background:var(--theme-ink)}
.instalar-section h2, .instalar-bloque h3 {color:var(--theme-surface)}
.instalar-section>.instalar-container>p, .instalar-nota, .instalar-bloque li {color:#f7f8fbbd;
opacity:1}
.instalar-bloque {background:#f7f8fb14;
border:1px solid #f7f8fb29}
.instalar-bloque strong, .instalar-icono {color:var(--theme-surface)}
@media (max-width: 520px) {
.quick-province-strip.compact {margin-left:12px;
margin-right:12px}
}
.fecha-selector {grid-area:fecha;
align-self:start;
grid-template-columns:48px minmax(0,1fr) 48px;
gap:10px;
width:100%;
max-width:none;
margin:8px 0 0;
padding:0;
display:grid}
.fecha-selector:before {content:"Cambiá la fecha";
color:var(--theme-muted);
text-transform:uppercase;
letter-spacing:.08em;
grid-column:1/-1;
font-size:.82rem;
font-weight:800}
.fecha-actual:hover, .fecha-nav:hover:not(:disabled) {background:var(--theme-white)}
.fecha-nav:disabled {opacity:.45}
.sorteobanner--simple, .sorteo-banner {grid-area:banner;
text-align:center;
width:100%;
max-width:100%;
box-shadow:none;
background:rgba(255,255,255,.92);
border:1px solid #5A45A32e;
border-radius:16px;
margin:12px 0 0;
padding:14px 18px}
.sorteo-banner-titulo {color:var(--nev-charcoal);
letter-spacing:.02em;
text-transform:none;
font-size:1rem;
font-weight:800}
.quick-province-strip.compact {background:rgba(255,255,255,.92);
border-color:#5A45A31f}
.quick-province-links a {color:var(--nev-charcoal);
background:0 0;
border:1px solid #5A45A329}
.quick-province-links a:hover {background:var(--nev-coral);
border-color:var(--nev-coral);
color:var(--theme-white)}
@media (max-width: 1100px) {
.fecha-selector {max-width:620px;
margin:10px auto 0}
}
@media (max-width: 760px) {
.fecha-selector {grid-template-columns:44px minmax(0,1fr) 44px;
gap:7px}
.fecha-nav, .fecha-actual {height:48px}
.fecha-nav {width:44px}
.fecha-actual {font-size:.86rem}
.grid-container {padding:0 10px 28px}
}
.fecha-selector {grid-area:fecha;
grid-template-columns:48px minmax(0,1fr) 48px;
align-self:start;
gap:10px;
width:100%;
max-width:none;
margin:10px 0 0;
padding:0;
display:grid}
.fecha-selector:before {content:"Cambiá la fecha";
color:#5A45A39e;
letter-spacing:.1em;
text-transform:uppercase;
grid-column:1/-1;
font-size:.78rem;
font-weight:900}
.fecha-nav, .fecha-actual {height:54px;
color:var(--nev-ink);
background:#f7f8fbd1;
border:1px solid #5A45A329;
border-radius:16px;
box-shadow:0 8px 20px #5A45A314}
.fecha-nav {width:48px}
.fecha-actual {text-transform:none;
font-size:.98rem;
font-weight:900}
.sorteobanner--simple, .sorteo-banner {background:#f7f8fbb8;
border:1px solid #5A45A324;
border-radius:999px;
grid-area:banner;
width:fit-content;
min-width:330px;
max-width:100%;
margin:6px 0 0;
padding:12px 18px;
box-shadow:0 8px 24px #5A45A312}
.sorteo-banner-titulo {color:var(--nev-ink);
letter-spacing:.01em;
text-transform:none;
font-size:.98rem;
font-weight:800}
.stats-quick-strip {
background: #f7f8fbc7;
border: 1px solid #5A45A324;
border-radius: 22px;
box-shadow: 0 12px 30px #5A45A312;
}
.stats-quick-link {
color: var(--nev-ink);
border-right: 1px solid #5A45A329;
font-weight: 800;
}
.stats-quick-link:last-child {border-right:0}
.stats-quick-link svg {color:var(--nev-charcoal);
stroke-width:2.15px}
.stats-quick-link:hover {color:var(--nev-coral);
background:#62C9CF14;
border-radius:14px}
.grid-container {max-width:1500px;
padding:0 32px 46px}
@media (max-width: 1100px) {
.fecha-selector {max-width:660px;
margin:8px auto 0}
.sorteobanner--simple, .sorteo-banner {margin-left:auto;
margin-right:auto}
}
@media (max-width: 760px) {
.fecha-selector {grid-template-columns:44px minmax(0,1fr) 44px;
gap:7px}
.fecha-nav, .fecha-actual {border-radius:14px;
height:48px}
.fecha-nav {width:44px}
.fecha-actual {font-size:.84rem}
}
.fecha-selector.historico .fecha-actual, .fecha-selector.historico .fecha-actual:hover, .fecha-selector.historico .fecha-nav, .fecha-selector.historico .fecha-nav:hover:not(:disabled) {color:var(--nev-ink);
background:#f7f8fbe0;
border-color:#62C9CF52}
.fecha-selector.historico .fecha-actual:after {background:var(--nev-coral);
color:var(--theme-white)}
.sorteobanner--simple, .sorteo-banner {color:var(--nev-ink);
background:#f7f8fbdb;
border-color:#5A45A324}
.sorteo-banner-titulo {color:var(--nev-ink)}
a:not(.nav-link):not(.nav-dropdown-item):not(.stats-quick-link) {text-decoration-color:#62C9CF73}
@media (max-width: 760px) {
.sorteobanner--simple, .sorteo-banner {width:100%;
min-width:0}
}
.fecha-selector {order:1;
justify-content:center;
gap:8px;
width:min(650px,100% - 28px);
max-width:650px;
margin:0 auto}
.fecha-selector:before {text-align:center;
color:#5A45A39e;
width:100%}
.fecha-actual {border-radius:14px;
height:42px;
min-height:44px;
padding:0 16px;
font-size:.86rem}
.fecha-nav {border-radius:14px;
width:42px;
min-width:42px;
height:42px}
.sorteo-banner, .sorteobanner--simple {text-align:center;
border-radius:999px;
order:2;
width:fit-content;
min-width:0;
max-width:calc(100% - 28px);
margin:4px auto 0;
padding:9px 20px}
.stats-quick-strip {
text-align: center;
}
@media (max-width: 760px) {
.fecha-selector {gap:6px;
width:calc(100% - 16px)}
.fecha-actual {height:40px;
min-height:40px;
padding:0 9px;
font-size:.78rem}
.fecha-nav {width:40px;
min-width:40px;
height:40px}
.sorteo-banner, .sorteobanner--simple {padding:8px 14px;
font-size:.8rem}
}
.stats-quick-strip {
scroll-padding-left: 14px;
scroll-padding-right: 14px;
}
.stats-quick-strip {
flex-wrap: nowrap;
}
.stats-quick-link {
box-sizing: border-box;
background: rgba(255,255,255,.88);
border: 1px solid #5A45A324;
width: auto;
max-width: none;
font-size: clamp(.78rem,1.55vw,.94rem);
}
.stats-quick-link span {
white-space: nowrap;
min-width: 0;
display: block;
}
.stats-quick-link svg {
flex: none;
}
@media (max-width: 520px) {
.stats-quick-strip {
border-left: 0;
border-right: 0;
}
}
.stats-quick-strip {width:min(100% - 32px,1500px);
max-width:1500px;
padding:8px var(--nev-v91-pad);
justify-content:center;
align-items:center;
gap:var(--nev-v91-pad);
box-sizing:border-box;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
margin:10px auto 22px;
display:flex;
overflow:auto hidden}
.stats-quick-strip::-webkit-scrollbar {display:none}
.stats-quick-link {min-width:max-content;
min-height:40px;
padding:var(--nev-v91-pad) 14px;
white-space:nowrap;
border-radius:999px;
flex:none;
justify-content:center;
align-items:center;
gap:7px;
line-height:1;
display:inline-flex}
.stats-quick-link span {text-overflow:clip;
overflow:visible}
.stats-quick-link svg {width:17px;
height:17px}
.modal-titulo, #modalTitulo {display: flex;
align-items: center;
justify-content: center;
min-height: 35px;
color: var(--brand-primary, #5A45A3);
font-size: clamp(.9rem, 1.7vw, 1rem);
font-weight: 620;
letter-spacing: .04em;
line-height: 1.15;
text-decoration: none;
text-transform: uppercase;}
@media (max-width: 900px) {
.stats-quick-strip {justify-content:flex-start;
width:calc(100% - 18px);
margin-top:8px;
margin-bottom:18px}
.stats-quick-link {padding:var(--nev-v91-pad) 12px;
min-height:38px;
font-size:.82rem}
}
@media (max-width: 520px) {
.stats-quick-link {padding:7px 10px;
font-size:.78rem}
.stats-quick-link svg {width:16px;
height:16px}
}
.modal-titulo, #modalTitulo {color:var(--nev-ink,#071213);
text-transform:uppercase;
letter-spacing:.075em;
font-weight: 620;
line-height:1.02}
.resumen-ayer-card[hidden] {display:none}
.resumen-ayer-card {max-width:1480px;
color:var(--nev-ink,var(--theme-ink));
margin:0 auto 22px;
padding:0 28px}
.resumen-ayer-card:before {content:"";
display:block}
.resumen-ayer-card>* {box-sizing:border-box}
.resumen-ayer-head {border:1px solid var(--nev-line,#5A45A329);
background:radial-gradient(circle at 6% 0,#62C9CF33 0 62px,#0000 64px),#f7f8fbd6;
border-bottom:0;
border-radius:26px 26px 0 0;
justify-content:space-between;
align-items:flex-end;
gap:18px;
padding:22px 24px;
display:flex;
box-shadow:0 12px 30px #5A45A314}
.resumen-ayer-kicker {width:fit-content;
color:var(--nev-coral,var(--theme-accent));
text-transform:uppercase;
letter-spacing:.09em;
background:#62C9CF1f;
border:1px solid #62C9CF38;
border-radius:999px;
align-items:center;
margin-bottom:8px;
padding:7px 12px;
font-size:.74rem;
font-weight:900;
display:inline-flex}
.resumen-ayer-head h2 {color:var(--nev-ink,var(--theme-ink));
letter-spacing:-.04em;
margin:0;
font-size:clamp(1.55rem,2.4vw,2.35rem);
font-weight:950;
line-height:1}
.resumen-ayer-head p {color:var(--nev-muted,var(--theme-muted));
margin:8px 0 0;
font-size:1rem;
font-weight:650}
.resumen-ayer-head p strong {color:var(--nev-ink,var(--theme-ink));
font-weight:900}
.resumen-ayer-btn {background:linear-gradient(180deg, var(--nev-coral-2,#62C9CF), var(--nev-coral,var(--theme-accent)));
color:var(--theme-white);
letter-spacing:.02em;
border:0;
border-radius:999px;
flex:none;
min-height:46px;
padding:0 18px;
font-size:.92rem;
font-weight:900;
box-shadow:0 10px 22px #62C9CF38}
.resumen-ayer-btn:hover {filter:brightness(1.05);
transform:translateY(-1px)}
.resumen-ayer-body {border:1px solid var(--nev-line,#5A45A329);
background:#f7f8fbb3;
border-top:0;
border-radius:0 0 26px 26px;
padding:18px;
box-shadow:0 14px 30px #5A45A314}
.resumen-ayer-loading {text-align:center;
color:var(--nev-muted,var(--theme-muted));
padding:22px;
font-weight:800}
.resumen-ayer-grid {grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px 14px;
display:grid}
.resumen-ayer-prov {background:rgba(255,255,255,.92);
border:1px solid #5A45A31f;
border-radius:18px;
grid-template-columns:minmax(180px,.58fr) minmax(360px,1.42fr);
align-items:stretch;
gap:10px;
padding:8px;
display:grid;
min-width:0}
.resumen-ayer-prov h3 {text-align:center;
background:var(--nev-charcoal,var(--theme-ink-3));
min-height:50px;
color:var(--nev-paper,var(--theme-surface));
letter-spacing:.04em;
border-radius:13px;
justify-content:center;
align-items:center;
margin:0;
padding:7px 12px;
font-size:.86rem;
font-weight:950;
line-height:1.05;
display:flex;
word-break:normal;
overflow-wrap:break-word}
.resumen-ayer-turnos {grid-template-columns:repeat(5,minmax(58px,1fr));
gap:7px;
display:grid;
min-width:0}
.resumen-ayer-chip {background:#5A45A314;
border:1px solid #5A45A31a;
border-radius:13px;
flex-direction:column;
justify-content:center;
align-items:center;
gap:2px;
min-height:50px;
min-width:0;
display:flex}
.resumen-ayer-chip span {color:var(--nev-coral,var(--theme-accent));
letter-spacing:.06em;
font-size:var(--font-min, .6875rem);
font-weight:950;
line-height:1}
.resumen-ayer-chip strong {color:var(--nev-ink,var(--theme-ink));
letter-spacing:-.04em;
font-size:clamp(1rem,1.05vw,1.18rem);
font-weight:900;
line-height:1}
.resumen-ayer-chip.vacio {opacity:.46}
@media (max-width: 1080px) {
.resumen-ayer-grid {grid-template-columns:1fr}
.resumen-ayer-prov {grid-template-columns:minmax(170px,.55fr) minmax(340px,1.45fr)}
}
@media (max-width: 900px) {
.resumen-ayer-card {margin-bottom:18px;
padding:0 14px}
.resumen-ayer-head {border-radius:22px 22px 0 0;
flex-direction:column;
align-items:flex-start;
padding:20px 18px}
.resumen-ayer-btn {width:100%}
.resumen-ayer-body {border-radius:0 0 22px 22px;
padding:12px}
.resumen-ayer-grid {grid-template-columns:1fr}
}
@media (max-width: 560px) {
.resumen-ayer-prov {grid-template-columns:1fr;
gap:7px}
.resumen-ayer-prov h3 {text-align:left;
justify-content:flex-start;
min-height:40px;
padding-left:12px}
.resumen-ayer-turnos {grid-template-columns:repeat(5,minmax(48px,1fr))}
.resumen-ayer-chip {border-radius:12px;
min-height:44px}
.resumen-ayer-chip span {letter-spacing:.03em;
font-size:var(--font-min, .6875rem)}
.resumen-ayer-chip strong {font-size:clamp(.9rem,4.6vw,1.12rem)}
}
.nev-trust-card {color:#263238;
background:#5A45A30f;
border:1px solid #5A45A31f;
border-radius:14px;
flex-wrap:wrap;
align-items:center;
gap:8px;
margin:14px 0 18px;
padding:14px 16px;
display:flex}
.nev-trust-card strong {color:#101820;
font-weight:800}
.nev-trust-card span {opacity:.86;
font-size:.92rem;
line-height:1.45}
.nev-tools-hub {max-width:1180px;
margin:22px auto;
padding:0 18px}
.nev-tools-head {background:var(--theme-white);
border:1px solid var(--color-marino)14;
border-radius:18px 18px 0 0;
padding:22px 22px 12px;
box-shadow:0 10px 24px var(--color-marino)0d}
.nev-kicker {text-transform:uppercase;
letter-spacing:.12em;
color:var(--theme-accent);
margin-bottom:6px;
font-size:.75rem;
font-weight:900;
display:block}
.nev-tools-head h2 {color:var(--theme-navy);
margin:0 0 6px;
font-size:1.5rem}
.nev-tools-head p {color:#52616f;
margin:0;
line-height:1.5}
.nev-tools-grid {background:var(--theme-white);
border:1px solid var(--color-marino)14;
border-top:0;
border-radius:0 0 18px 18px;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
padding:0 22px 22px;
display:grid;
box-shadow:0 14px 28px var(--color-marino)0f}
.nev-tools-grid a {background:#f7f9fc;
border:1px solid var(--color-marino)12;
border-radius:14px;
padding:16px;
text-decoration:none;
transition:all .18s;
display:block}
.nev-tools-grid a:hover {background:var(--theme-white);
border-color:#62C9CF40;
transform:translateY(-2px);
box-shadow:0 10px 20px var(--color-marino)14}
.nev-tools-grid strong {color:var(--theme-navy);
margin-bottom:4px;
font-size:1rem;
display:block}
.nev-tools-grid span {color:#52616f;
font-size:.9rem;
line-height:1.4;
display:block}
.nev-trust-card {background:#f4f8f5;
border-color:#267d462e;
max-width:1144px;
margin:18px auto 24px;
padding:16px 18px}
@media (max-width: 780px) {
.nev-tools-grid {grid-template-columns:1fr}
.nev-tools-head, .nev-tools-grid {padding-left:16px;
padding-right:16px}
.nev-trust-card {display:block}
.nev-trust-card strong {margin-bottom:4px;
display:block}
}
.home-geo-answer {background:linear-gradient(135deg,#ffffffdb,#f7f8fbc7);
border:1px solid #62C9CF2e;
border-radius:24px;
grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
gap:18px;
margin:18px 0 24px;
padding:20px;
display:grid;
box-shadow:0 14px 32px #5A45A30f}
.home-geo-answer {max-width:1180px;
margin:28px auto;
padding:26px}
.home-geo-main h2 {color:var(--theme-ink);
letter-spacing:-.035em;
margin:0 0 10px;
font-size:clamp(1.45rem,2.5vw,2.3rem);
font-weight:950;
line-height:1.08}
.home-geo-main p {color:#5A45A3c2;
margin:0;
font-size:1rem;
line-height:1.7}
.home-geo-main a {color:var(--theme-accent);
font-weight:900}
.home-geo-grid article {background:#ffffffd1;
border:1px solid #5A45A314;
border-radius:16px;
margin:0;
padding:13px 14px}
.home-geo-grid strong {color:var(--theme-accent);
letter-spacing:.08em;
text-transform:uppercase;
margin:0 0 4px;
font-size:.72rem;
font-weight:950;
display:block}
.home-geo-grid span {color:var(--theme-ink);
margin:0;
font-size:.94rem;
font-weight:850;
line-height:1.35;
display:block}
.home-geo-grid {grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
display:grid}
@media (max-width: 800px) {
.home-geo-answer, .home-geo-grid {grid-template-columns:1fr}
.home-geo-answer {border-radius:24px;
margin:22px 12px;
padding:20px}
}
.games-quick-strip--same .stats-quick-link {width:auto;
min-width:auto;
min-height:auto;
box-shadow:none;
color:var(--nev-ink);
letter-spacing:0;
background:0 0;
border:0;
border-right:1px solid #5A45A329;
border-radius:0;
flex-direction:row;
justify-content:center;
align-items:center;
gap:10px;
padding:8px 28px;
font-size:.94rem;
font-weight:800;
text-decoration:none;
transition:color .18s,background .18s;
display:flex}
.games-quick-strip--same .stats-quick-link:last-child {border-right:0}
.home-games-strip {-webkit-overflow-scrolling:touch;
scrollbar-width:none;
justify-content:center;
gap:14px;
width:fit-content;
max-width:min(100% - 32px,1120px);
margin:10px auto 14px;
padding:8px 14px;
overflow:auto hidden}
.home-games-strip::-webkit-scrollbar {display:none}
.home-games-strip .stats-quick-link {flex:none;
min-height:44px;
padding:9px 18px}
@media (max-width: 900px) {
.home-games-strip {justify-content:flex-start;
gap:10px;
width:min(100% - 24px,100%);
padding:8px 10px}
.home-games-strip .stats-quick-link {padding:8px 16px}
}
body .fecha-selector {max-width:650px;
margin-top:10px;
padding:0}
body .fecha-actual, body .fecha-nav {background:rgba(255,255,255,.94);
color:var(--theme-ink);
border-color:rgba(255,255,255,.72);
box-shadow:0 10px 22px rgba(0,0,0,.12)}
body .sorteobanner--simple {background:rgba(255,255,255,.92);
color:var(--theme-ink);
border:1px solid rgba(228,232,240,.72);
box-shadow:0 12px 24px rgba(0,0,0,.10)}
body .stats-quick-strip {background:rgba(255,255,255,.9);
border:1px solid rgba(32,35,33,.10);
border-radius:18px;
box-shadow:0 12px 28px rgba(32,35,33,.08)}
body .stats-quick-link {background:var(--theme-white);
border:1px solid rgba(32,35,33,.10);
border-radius:12px;
box-shadow:none;
color:var(--theme-ink)}
body .stats-quick-link:hover {border-color:rgba(239,81,72,.45);
color:var(--theme-accent);
transform:translateY(-1px)}
body .nev-tools-head, body .nev-tools-grid, body .home-geo-answer {box-shadow:none;
border-color:rgba(32,35,33,.10)}
@media (max-width:760px) {
body .fecha-selector {gap:6px}
body .fecha-actual {min-width:0;
font-size:.86rem;
padding:0 10px}
}
body .estado-update #estadoTexto {white-space:normal}
body .fecha-selector:before, body .fecha-selector::before {color:rgba(255,255,255,.72);
text-shadow:0 1px 4px rgba(0,0,0,.25)}
@media (max-width:480px) {
body .fecha-selector {width:min(100%,360px);
max-width:360px}
body .fecha-nav {width:40px;
height:44px}
body .fecha-actual {height:44px;
gap:6px;
padding:0 8px;
font-size:.78rem}
body .fecha-actual #fechaHoy {min-width:0;
max-width:100%;
white-space:nowrap;
text-overflow:clip;
text-align:center}
body .fecha-actual .fecha-icono {width:14px;
height:14px}
}
@media (max-width:360px) {
body .fecha-selector {max-width:328px;
gap:5px}
body .fecha-nav {width:38px}
body .fecha-actual {font-size:.72rem;
padding:0 6px}
body .fecha-actual .fecha-icono {display:none}
}
.flatpickr-calendar, .flatpickr-calendar.open, .flatpickr-calendar.inline {background:var(--nev-cream);
color:var(--nev-charcoal);
border:1px solid #5A45A31f;
border-radius:14px;
overflow:hidden;
box-shadow:0 22px 60px #5A45A338}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after, .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {border-bottom-color:var(--nev-graphite);
border-top-color:var(--nev-graphite)}
.flatpickr-months, .flatpickr-months .flatpickr-month, .flatpickr-current-month {background:var(--nev-graphite);
color:var(--nev-cream);
fill:var(--nev-cream)}
.flatpickr-months {padding:8px 6px 0}
.flatpickr-current-month {padding-top:7px;
font-size:1rem;
font-weight:900}
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year, .flatpickr-current-month .numInputWrapper span.arrowUp:after, .flatpickr-current-month .numInputWrapper span.arrowDown:after {color:var(--nev-cream);
border-color:var(--nev-cream);
background:0 0;
font-weight:900}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .flatpickr-current-month input.cur-year:hover {background:#f7f8fb1a}
.flatpickr-prev-month, .flatpickr-next-month, .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {color:var(--nev-cream);
fill:var(--nev-cream);
top:14px}
.flatpickr-prev-month svg, .flatpickr-next-month svg, .flatpickr-prev-month svg path, .flatpickr-next-month svg path {fill:var(--nev-cream);
stroke:var(--nev-cream)}
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg, .flatpickr-prev-month:hover svg path, .flatpickr-next-month:hover svg path {fill:var(--nev-coral);
stroke:var(--nev-coral)}
.flatpickr-weekdays, .flatpickr-weekdaycontainer, span.flatpickr-weekday {background:var(--nev-graphite)}
span.flatpickr-weekday {color:var(--nev-cream);
letter-spacing:.04em;
font-size:.82rem;
font-weight:900}
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days {background:var(--nev-cream);
border:0}
.flatpickr-day, .flatpickr-day.inRange, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.today, .flatpickr-day.today:hover {color:var(--nev-charcoal);
background:0 0;
border:1px solid #0000;
border-radius:12px;
font-weight:800}
.flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover {background:var(--nev-coral-soft);
color:var(--nev-charcoal);
border-color:#62C9CF73}
.flatpickr-day.today {border-color:var(--nev-coral);
color:var(--nev-charcoal);
font-weight:950}
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {background:var(--nev-coral);
border-color:var(--nev-coral);
color:var(--nev-cream);
box-shadow:none}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {color:#5A45A357}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed:hover {color:#5A45A338;
cursor:not-allowed;
background:0 0;
border-color:#0000}
.flatpickr-time, .flatpickr-time input, .flatpickr-time .flatpickr-am-pm {background:var(--nev-cream);
color:var(--nev-charcoal)}
.flatpickr-time {border-top:1px solid #5A45A31f}
@media (max-width: 560px) {
.flatpickr-calendar {width:calc(100vw - 24px);
max-width:360px}
.flatpickr-days {width:100%;
min-width:0;
max-width:none}
.flatpickr-day {max-width:calc(14.2857vw - 10.5714px);
height:40px;
line-height:40px}
}
.nev-inline-6b99de8b69 {display:none;}
.hero .estado-update #estadoTexto {color: var(--theme-ink);}
body.qplus-page .hero .estado-update #estadoTexto, body.quinielaplus-page .hero .estado-update #estadoTexto {color: var(--brand-primary);}
/* ==========================================================================
HOME COMPACT RESPONSIVE — v7806
Misma estructura de la referencia: provincia + premios arriba, 5 turnos abajo.
Más compacto en escritorio, tablet y mobile para evitar tarjetas gigantes.
========================================================================== */
body .grid-container {
width: min(980px, calc(100% - clamp(24px, 5vw, 72px)));
max-width: 980px;
padding-right: 0;
padding-left: 0;
}
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
width: 100%;
max-width: 980px;
margin-right: auto;
margin-left: auto;
}
body .tabla-clasica-head {
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 16px;
}
body .tabla-clasica-head h2,
body .tabla-clasica-head p {
margin-right: auto;
margin-left: auto;
}
body .tabla-clasica-head h2 {
font-size: clamp(1.42rem, 2.15vw, 1.86rem);
font-weight: 760;
letter-spacing: -.035em;
}
body .tabla-clasica-head p {
font-size: clamp(.88rem, 1.25vw, 1rem);
}
body .tabla-clasica-live {
margin-top: 14px;
padding: .62rem .98rem;
font-size: .72rem;
}
body .tabla-prov-head {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 6px;
min-width: 0;
padding: 0;
}
@media (width >= 1180px) {
body .grid-container,
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
max-width: 960px;
}
body .grid-container {
width: min(960px, calc(100% - 96px));
}
}
@media (max-width: 900px) {
body .grid-container {
width: min(100%, calc(100% - 28px));
max-width: 980px;
}
body .tabla-clasica-list {
max-width: 980px;
}
}
@media (max-width: 760px) {
body .grid-container {
width: 100%;
max-width: none;
padding-right: 0;
padding-left: 0;
}
body .tabla-clasica-head {
padding: 0 16px;
margin-bottom: 13px;
}
body .tabla-clasica-list {
width: 100%;
max-width: none;
gap: 10px;
padding-right: 12px;
padding-left: 12px;
}
body .tabla-prov-head {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 7px;
}
}
@media (max-width: 390px) {
body .tabla-clasica-list {
padding-right: 9px;
padding-left: 9px;
}
}
/* ==========================================================================
HOTFIX HOME NO-CROP — v7807
Corrige el hero y las tiras superiores que quedaban con max-width heredado.
========================================================================== */
body #hero.hero {
box-sizing: border-box;
width: 100%;
max-width: none;
min-height: 0;
margin: 0;
padding: 22px max(18px, env(safe-area-inset-left)) 24px max(18px, env(safe-area-inset-right));
overflow: visible;
border-radius: 0;
border-bottom: 1px solid rgba(32, 35, 33, .1);
background: linear-gradient(180deg, var(--theme-surface, #f7f8fb) 0%, #f7f8fb 100%);
color: var(--theme-ink, #5A45A3);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
body #hero.hero::before,
body #hero.hero::after {
content: none;
display: none;
}
body #hero.hero > * {
position: relative;
z-index: 1;
}
body #hero .hero-h1,
body #hero .hero-subtitulo {
display: none;
}
body #hero .fecha-selector {
width: min(100%, 620px);
max-width: 620px;
margin: 0 auto;
padding: 0;
}
body #hero .fecha-selector::before {
color: rgba(32, 33, 31, .66);
text-shadow: none;
}
body #hero .fecha-actual,
body #hero .fecha-nav,
body #hero .sorteobanner--simple,
body #hero .estado-update {
color: var(--theme-ink, #5A45A3);
background: rgba(255, 250, 241, .94);
border-color: rgba(32, 33, 31, .12);
box-shadow: 0 10px 24px rgba(32, 33, 31, .08);
}
body #hero .estado-update {
margin: 0 auto;
}
body .stats-quick-strip {
box-sizing: border-box;
width: min(calc(100% - clamp(22px, 4vw, 64px)), 1480px);
max-width: 1480px;
overflow-x: auto;
overflow-y: visible;
}
body .home-games-strip {
width: fit-content;
max-width: min(calc(100% - clamp(22px, 4vw, 64px)), 1120px);
}
@media (width >= 1180px) {
body #hero.hero {
padding-top: 24px;
padding-bottom: 26px;
}
}
@media (max-width: 760px) {
body #hero.hero {
padding: 16px 12px 18px;
gap: 10px;
}
body #hero .fecha-selector {
width: min(100%, 430px);
}
body .stats-quick-strip {
width: calc(100% - 24px);
}
}
@media (max-width: 520px) {
body #hero.hero {
padding-top: 14px;
padding-bottom: 16px;
}
body #hero .fecha-selector {
width: min(100%, 360px);
}
}
/* ==========================================================================
HOTFIX HOME BALANCE — v7808
Recupera protagonismo de números y etiquetas en escritorio/tablet.
En móvil baja altura, mejora proporción y redondea las tarjetas.
========================================================================== */
body .grid-container {
width: min(1180px, calc(100% - clamp(32px, 6vw, 108px)));
}
body .tabla-clasica-head {
margin-bottom: 18px;
}
body .tabla-clasica-head h2 {
font-size: clamp(1.72rem, 2.25vw, 2.16rem);
font-weight: 850;
letter-spacing: -.045em;
}
body .tabla-clasica-head p {
font-size: clamp(.98rem, 1.25vw, 1.08rem);
}
body .tabla-clasica-live {
margin-top: 15px;
}
body .tabla-prov-head {
gap: 8px;
}
@media (max-width: 1180px) {
body .grid-container,
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
max-width: 1080px;
}
body .grid-container {
width: min(1080px, calc(100% - 32px));
}
}
@media (max-width: 760px) {
body #hero.hero {
padding-top: 12px;
padding-bottom: 12px;
gap: 8px;
}
body #hero .fecha-selector {
width: min(100%, 390px);
}
body .home-games-strip,
body .stats-quick-strip {
border-radius: 20px;
}
body .stats-quick-strip {
margin-bottom: 14px;
padding: 10px 12px;
}
body .grid-container {
width: 100%;
max-width: none;
padding-right: 0;
padding-left: 0;
}
body .tabla-clasica-head {
padding: 0 14px;
margin-bottom: 12px;
}
body .tabla-clasica-head h2 {
font-size: clamp(1.48rem, 7vw, 2rem);
}
body .tabla-clasica-head p {
font-size: .98rem;
line-height: 1.25;
}
body .tabla-clasica-live {
margin-top: 12px;
padding: .58rem .9rem;
}
body .tabla-prov-head {
gap: 6px;
}
}
@media (max-width: 390px) {
}
/* ==========================================================================
HOTFIX HOME FINE TUNE — v7809
Ajuste fino post-capturas: más parecido a la referencia.
========================================================================== */
@media (min-width: 761px) {
body .grid-container,
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
max-width: 1110px;
}
body .grid-container {
width: min(1110px, calc(100% - clamp(34px, 7vw, 132px)));
}
body .tabla-prov-head {
gap: 7px;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
height: 44px;
min-height: 44px;
border-radius: 17px;
font-size: clamp(.9rem, 1.05vw, 1.02rem);
}
body .tabla-turnos-grid {
gap: 7px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo {
height: 78px;
min-height: 78px;
gap: 4px;
padding: 9px 5px 8px;
border-radius: 17px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.56rem, .68vw, .64rem);
letter-spacing: .05em;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(2rem, 2.45vw, 2.48rem);
line-height: .98;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(1.42rem, 2vw, 1.86rem);
}
}
@media (min-width: 761px) and (max-width: 1180px) {
body .grid-container,
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
max-width: 980px;
}
body .grid-container {
width: min(980px, calc(100% - 28px));
}
}
@media (max-width: 760px) {
body .tabla-clasica-wrap {
scroll-margin-top: 78px;
}
body .tabla-clasica-head {
margin-bottom: 10px;
}
body .tabla-clasica-live {
margin-top: 10px;
}
body .tabla-prov-head {
gap: 3px;
}
}
@media (max-width: 390px) {
}
/* ==========================================================================
RESET HOME REFERENCIA — v7811
Diseño base: igual a la referencia enviada.
- No cambia HTML ni JavaScript.
- Solo reordena/tamaño visual de la tabla de cabezas.
========================================================================== */
body .grid-container {
box-sizing: border-box;
width: 100%;
max-width: none;
margin-inline: auto;
padding-inline: clamp(14px, 4.8vw, 54px);
}
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
box-sizing: border-box;
width: 100%;
margin-inline: auto;
}
body .tabla-clasica-head {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
margin: 0 auto 20px;
text-align: center;
}
body .tabla-clasica-head h2 {
margin: 0;
color: var(--theme-ink, #5A45A3);
font-size: clamp(1.9rem, 2.5vw, 2.28rem);
font-weight: 850;
letter-spacing: -0.05em;
line-height: 1.02;
}
body .tabla-clasica-head p {
margin: 6px 0 0;
color: rgba(32, 33, 31, .66);
font-size: clamp(1rem, 1.15vw, 1.12rem);
font-weight: 430;
line-height: 1.25;
}
body .tabla-clasica-live {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: max-content;
margin: 18px auto 0;
padding: .72rem 1.05rem;
border-radius: 999px;
color: #f7f8fb;
background: #5A45A3;
box-shadow: 0 10px 24px rgba(32, 33, 31, .12);
font-size: .78rem;
font-weight: 820;
letter-spacing: .035em;
line-height: 1;
text-transform: uppercase;
}
body .tabla-clasica-live span {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--brand-accent-2, #62C9CF);
}
body .tabla-clasica-list {
display: flex;
flex-direction: column;
padding: 0;
}
body .tabla-prov-row {
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr;
width: 100%;
max-width: 100%;
overflow: visible;
border: 0;
background: rgba(255, 250, 241, .94);
box-shadow: 0 10px 26px rgba(32, 33, 31, .075),
inset 0 0 0 1px rgba(32, 33, 31, .075);
}
body .tabla-prov-head {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
gap: 8px;
min-width: 0;
padding: 0;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
width: 100%;
height: 48px;
min-height: 48px;
padding: 0 14px;
border: 1px solid rgba(32, 33, 31, .12);
border-radius: 18px;
color: #5A45A3;
background: rgba(255, 250, 241, .78);
box-shadow: none;
font-size: clamp(.94rem, 1.06vw, 1.05rem);
font-weight: 820;
letter-spacing: .065em;
line-height: 1;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
body .tabla-pizarra-btn:disabled {
opacity: .45;
color: rgba(32, 33, 31, .55);
cursor: not-allowed;
}
body .tabla-turnos-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
min-width: 0;
padding: 0;
background: transparent;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
width: 100%;
overflow: hidden;
border: 0;
outline: 0;
color: #f7f8fb;
background: linear-gradient(180deg, #414343 0%, #5A45A3 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
0 2px 0 rgba(32, 33, 31, .08);
cursor: pointer;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo {
background: linear-gradient(180deg, var(--brand-accent, #62C9CF) 0%, var(--brand-accent-2, #62C9CF) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .16),
0 2px 0 rgba(32, 33, 31, .08);
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno:disabled {
cursor: not-allowed;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
overflow: hidden;
color: rgba(255, 250, 241, .72);
font-weight: 780;
line-height: 1;
text-align: center;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
overflow: visible;
color: #f7f8fb;
font-weight: 760;
font-variant-numeric: tabular-nums;
letter-spacing: -0.045em;
text-align: center;
text-overflow: clip;
white-space: nowrap;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
color: rgba(255, 250, 241, .82);
font-weight: 780;
letter-spacing: .09em;
}
/* Tablet: ocupa como la referencia, sin verse gigante. */
@media (max-width: 1180px) and (min-width: 761px) {
body .grid-container {
padding-inline: clamp(20px, 4.3vw, 44px);
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
height: 47px;
min-height: 47px;
border-radius: 18px;
font-size: clamp(.9rem, 1.65vw, 1.02rem);
}
}
/* Celular: más bajo, redondeado, sin tarjetas cuadradas. */
@media (max-width: 760px) {
body .grid-container {
width: 100%;
max-width: none;
padding-inline: 10px;
}
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
width: 100%;
max-width: none;
}
body .tabla-clasica-head {
margin-bottom: 12px;
padding-inline: 8px;
}
body .tabla-clasica-head h2 {
font-size: clamp(1.72rem, 7vw, 2.08rem);
letter-spacing: -0.055em;
}
body .tabla-clasica-head p {
margin-top: 5px;
font-size: .98rem;
}
body .tabla-clasica-live {
margin-top: 13px;
padding: .62rem .95rem;
font-size: .72rem;
}
body .tabla-prov-head {
grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr);
gap: 6px;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
height: 38px;
min-height: 38px;
padding-inline: 8px;
border-radius: 17px;
font-size: clamp(.72rem, 3.05vw, .84rem);
font-weight: 820;
letter-spacing: .047em;
}
body .tabla-turnos-grid {
gap: 3px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-weight: 780;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-weight: 760;
line-height: 1;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
letter-spacing: .07em;
}
}
@media (max-width: 390px) {
body .grid-container {
padding-inline: 7px;
}
body .tabla-prov-head,
body .tabla-turnos-grid {
gap: 3px;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
height: 36px;
min-height: 36px;
border-radius: 16px;
font-size: .66rem;
letter-spacing: .036em;
}
}
/* ==========================================================================
AJUSTE CAJAS MÁS CHICAS — v7811
Reduce ancho, alto y separación del bloque de resultados sin tocar JavaScript.
========================================================================== */
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
max-width: 900px;
}
body .tabla-clasica-list {
gap: 9px;
}
body .tabla-prov-head {
gap: 6px;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
height: 40px;
min-height: 40px;
border-radius: 16px;
font-size: clamp(.82rem, .95vw, .94rem);
letter-spacing: .06em;
}
body .tabla-turnos-grid {
gap: 6px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
height: 66px;
min-height: 66px;
gap: 4px;
padding: 7px 4px 8px;
border-radius: 15px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.52rem, .58vw, .6rem);
letter-spacing: .045em;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1.82rem, 2.15vw, 2.22rem);
line-height: .96;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(1.28rem, 1.75vw, 1.62rem);
}
@media (max-width: 1180px) and (min-width: 761px) {
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
max-width: 860px;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
height: 39px;
min-height: 39px;
border-radius: 15px;
font-size: clamp(.78rem, 1.35vw, .9rem);
}
body .tabla-turnos-grid {
gap: 6px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
height: 62px;
min-height: 62px;
border-radius: 15px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.48rem, .9vw, .56rem);
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1.62rem, 3.15vw, 2rem);
}
}
@media (max-width: 760px) {
body .grid-container {
padding-inline: 8px;
}
body .tabla-clasica-list {
gap: 6px;
}
body .tabla-prov-head {
gap: 3px;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
height: 32px;
min-height: 32px;
border-radius: 14px;
font-size: clamp(.62rem, 2.7vw, .74rem);
letter-spacing: .04em;
}
body .tabla-turnos-grid {
gap: 3px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
height: 46px;
min-height: 46px;
gap: 1px;
padding: 4px 2px 5px;
border-radius: 14px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.3rem, 1.45vw, .36rem);
letter-spacing: .005em;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(.9rem, 4.55vw, 1.14rem);
letter-spacing: -0.035em;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(.76rem, 3.95vw, .98rem);
}
}
@media (max-width: 390px) {
body .grid-container {
padding-inline: 5px;
}
body .tabla-clasica-list {
gap: 3px;
}
body .tabla-prov-head,
body .tabla-turnos-grid {
gap: 3px;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
height: 30px;
min-height: 30px;
border-radius: 13px;
font-size: var(--font-min, .6875rem);
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
height: 43px;
min-height: 43px;
border-radius: 13px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: var(--font-min, .6875rem);
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(.82rem, 4.75vw, 1.04rem);
}
}
/* ==========================================================================
HOME HORIZONTAL COMPACTO — v7813
Desktop/tablet aprovecha el ancho: provincia + premios + turnos en una sola fila.
Mobile conserva filas compactas para no romper la lectura.
========================================================================== */
@media (min-width: 641px) {
body .grid-container {
width: 100%;
max-width: none;
padding-inline: clamp(12px, 3vw, 34px);
}
body .quiniela-clasica,
body .tabla-clasica-wrap,
body .tabla-clasica-list {
width: min(100%, 1480px);
max-width: 1480px;
margin-inline: auto;
}
body .tabla-prov-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
gap: 6px;
min-width: 0;
height: 100%;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
height: 52px;
min-height: 52px;
padding-inline: 10px;
border-radius: 8px;
font-size: clamp(.74rem, .82vw, .9rem);
font-weight: 850;
letter-spacing: .015em;
text-transform: none;
}
body .tabla-turnos-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 6px;
min-width: 0;
height: 100%;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
height: 52px;
min-height: 52px;
gap: 1px;
padding: 5px 4px 6px;
border-radius: 8px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.42rem, .48vw, .56rem);
font-weight: 850;
letter-spacing: .015em;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1.38rem, 1.65vw, 1.78rem);
font-weight: 820;
letter-spacing: -.025em;
line-height: .98;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(1.05rem, 1.32vw, 1.38rem);
letter-spacing: .075em;
}
}
@media (min-width: 1180px) {
body .tabla-prov-nombre,
body .tabla-pizarra-btn,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
height: 50px;
min-height: 50px;
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1.42rem, 1.45vw, 1.72rem);
}
}
@media (min-width: 641px) and (max-width: 900px) {
body .grid-container {
padding-inline: 10px;
}
body .tabla-prov-head,
body .tabla-turnos-grid {
gap: 3px;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
height: 48px;
min-height: 48px;
border-radius: 8px;
}
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
font-size: clamp(.68rem, 1.3vw, .8rem);
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.34rem, .8vw, .46rem);
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1.08rem, 2.65vw, 1.46rem);
}
body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(.86rem, 2.18vw, 1.16rem);
}
}
@media (max-width: 640px) {
body .tabla-prov-nombre,
body .tabla-pizarra-btn {
text-transform: none;
}
}
/* Home: rotulación de pizarra en mayúsculas */
html body .tabla-clasica-list .tabla-prov-head .tabla-prov-nombre,
html body .tabla-clasica-list .tabla-prov-head .tabla-pizarra-btn {
text-transform: uppercase;
letter-spacing: .065em;
}
/* ==========================================================================
V8004 — Disciplina tipográfica oficial + botones de premios
Tipografía centralizada en tokens.css. Hover oscuro sin rojo.
========================================================================== */
html body {
letter-spacing: .015em;
}
html body h1,
html body h2,
html body h3,
html body .hero-h1,
html body .resumen-ayer-card h2,
html body .tabla-clasica-head h2,
html body .info-seo h2,
html body .faq-section h2,
html body .nev-h1-after-results h1 {
font-weight: 400;
letter-spacing: .005em;
text-transform: uppercase;
}
html body button,
html body input,
html body select,
html body textarea,
html body .nav-link,
html body .stats-quick-link,
html body .filtro-btn,
html body .tabla-prov-nombre,
html body .tabla-pizarra-btn,
html body .ver-20-btn,
html body .jornada-ver-btn {
letter-spacing: .055em;
}
html body .tabla-turno-num,
html body .jornada-cabeza,
html body .numero-valor,
html body .provincia-cabeza-numero,
html body .resumen-ayer-chip strong {
font-weight: 700;
letter-spacing: .005em;
}
html body .quiniela-clasica .tabla-prov-row .tabla-prov-head .tabla-prov-nombre,
html body .quiniela-clasica .tabla-prov-row .tabla-prov-head .tabla-pizarra-btn,
html body .provincia-card-actions .ver-20-btn,
html body .jornada-ver-btn {
text-transform: uppercase;
}
html body .quiniela-clasica .tabla-prov-row .tabla-prov-head .tabla-pizarra-btn:not(:disabled):hover,
html body .quiniela-clasica .tabla-prov-row .tabla-prov-head .tabla-pizarra-btn:not(:disabled):focus-visible,
html body .provincia-card-actions .ver-20-btn:not(:disabled):hover,
html body .provincia-card-actions .ver-20-btn:not(:disabled):focus-visible,
html body .jornada-ver-btn:not(:disabled):hover,
html body .jornada-ver-btn:not(:disabled):focus-visible {
background: var(--brand-button-hover, var(--brand-primary));
border-color: var(--brand-button-hover, var(--brand-primary));
color: var(--brand-button-hover-text, var(--brand-surface));
box-shadow: none;
transform: translateY(-1px);
}
html body #modal .modal-grid .numero-item .numero-posicion {
font-weight: 800;
}
html body #modal .modal-grid .numero-item .numero-valor {
font-weight: 700;
letter-spacing: .01em;
}
html body .quiniela-clasica .tabla-prov-row .tabla-prov-head .tabla-pizarra-btn:disabled,
html body .provincia-card-actions .ver-20-btn:disabled {
cursor: not-allowed;
opacity: .45;
}
html body .modal-header {
background: var(--brand-primary);
color: var(--brand-surface);
}
html body .modal-cerrar:hover,
html body .modal-cerrar:focus-visible {
background: var(--brand-primary-2);
color: var(--brand-surface);
}
/* ==========================================================================
V8011 — Pizarra: números destacados pero con más aire respecto al turno
Se mantiene el mismo alto de caja: baja un poco el tamaño y sube la etiqueta.
========================================================================== */
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
justify-content: center;
gap: 2px;
overflow: hidden;
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
line-height: .96;
margin-bottom: 2px;
transform: translateY(-2px);
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(2.1rem, 2.62vw, 2.7rem);
line-height: .9;
letter-spacing: -.035em;
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(1.58rem, 2.1vw, 2rem);
line-height: .92;
}
@media (min-width: 1180px) {
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
padding-top: 6px;
padding-bottom: 5px;
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.42rem, .48vw, .52rem);
transform: translateY(-2px);
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1.5rem, 1.52vw, 1.78rem);
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(1.12rem, 1.2vw, 1.34rem);
}
}
@media (min-width: 901px) and (max-width: 1179px) {
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.48rem, .76vw, .58rem);
transform: translateY(-2px);
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1.88rem, 2.95vw, 2.38rem);
}
}
@media (min-width: 641px) and (max-width: 900px) {
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.34rem, .72vw, .42rem);
transform: translateY(-2px);
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1.12rem, 2.72vw, 1.48rem);
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(.88rem, 2.18vw, 1.12rem);
}
}
@media (max-width: 640px) {
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
padding-top: 5px;
padding-bottom: 5px;
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.4rem, 1.45vw, .5rem);
margin-bottom: 2px;
transform: translateY(-2px);
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1.32rem, 4.55vw, 1.68rem);
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(1rem, 3.42vw, 1.28rem);
}
}
/* v8012: no mostrar fuentes técnicas/fallback al usuario final en Quini 6 */
.quini6-page .quini6-fuente,
.quini6-fuente {
display: none;
}
.quini6-premios--pendiente {
opacity: .82;
}
.quini6-premio-pendiente {
padding: .78rem 0 .35rem;
text-align: center;
color: var(--text-muted, #6b6258);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
font-size: .78rem;
}
/* Ajuste selector de fecha v8027: el input nativo se ancla cerca del botón para que el calendario no abra pegado al borde. */
.native-date-hidden {
border: 0;
background: transparent;
color: transparent;
caret-color: transparent;
}
/* v8028 — calendario propio anclado al selector de fecha */
.nev-date-popover {
position: absolute;
z-index: 9999;
display: none;
padding: 14px;
border: 1px solid rgba(47, 47, 47, .18);
border-radius: 20px;
background: var(--nev-surface, #f7f8fb);
color: var(--nev-text, #2f2f2f);
box-shadow: 0 18px 48px rgba(47, 47, 47, .18);
}
.nev-date-popover.is-open {display: block;}
.nev-date-popover__header {
display: grid;
grid-template-columns: 36px 1fr 36px;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.nev-date-popover__month {
text-align: center;
font-weight: 800;
text-transform: capitalize;
letter-spacing: .02em;
}
.nev-date-popover__nav,
.nev-date-popover__action,
.nev-date-popover__day {
border: 0;
font: inherit;
color: inherit;
cursor: pointer;
}
.nev-date-popover__nav {
height: 36px;
border-radius: 999px;
background: rgba(47, 47, 47, .08);
font-size: 24px;
line-height: 1;
}
.nev-date-popover__weekdays,
.nev-date-popover__days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.nev-date-popover__weekdays {
margin-bottom: 8px;
color: rgba(47, 47, 47, .58);
font-size: 12px;
font-weight: 800;
text-align: center;
}
.nev-date-popover__day {
min-width: 0;
height: 34px;
border-radius: 12px;
background: transparent;
font-size: 13px;
font-weight: 700;
}
.nev-date-popover__day:hover:not(:disabled),
.nev-date-popover__day:focus-visible:not(:disabled) {
outline: none;
background: rgba(var(--brand-accent-rgb), .16);
}
.nev-date-popover__day.is-selected {
background: var(--nev-coral, #62C9CF);
color: #f7f8fb;
}
.nev-date-popover__day.is-today:not(.is-selected) {
box-shadow: inset 0 0 0 1px var(--nev-coral, #62C9CF);
}
.nev-date-popover__day.is-muted,
.nev-date-popover__day:disabled {
color: rgba(47, 47, 47, .32);
}
.nev-date-popover__day:disabled {
cursor: not-allowed;
}
.nev-date-popover__footer {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.nev-date-popover__action {
padding: 8px 10px;
border-radius: 999px;
background: transparent;
color: var(--nev-coral, #62C9CF);
font-size: 13px;
font-weight: 800;
}
.nev-date-popover__action:hover,
.nev-date-popover__action:focus-visible {
outline: none;
background: rgba(var(--brand-accent-rgb), .12);
}
@media (max-width: 520px) {
.nev-date-popover {
border-radius: 18px;
}
}
/* ======================================================================
Home — pizarra primero, estado compacto y bloques inferiores
====================================================================== */
body {
--home-max-width: 1120px;
--home-page-gap: 28px;
--home-card-bg: rgba(255, 250, 244, .84);
--home-card-border: rgba(32, 33, 31, .12);
--home-card-ink: var(--theme-ink, #5A45A3);
--home-accent: var(--theme-accent, #62C9CF);
}
html body #hero.hero.home-statusbar {
box-sizing: border-box;
display: block;
width: 100%;
max-width: none;
min-height: 0;
margin: 0;
padding: 9px 0;
border: 0;
border-bottom: 1px solid rgba(32, 33, 31, .08);
border-radius: 0;
background: var(--theme-surface, #f8f5f2);
color: var(--home-card-ink);
box-shadow: none;
overflow: visible;
text-align: initial;
}
html body #hero.hero.home-statusbar::before,
html body #hero.hero.home-statusbar::after,
html body #hero.hero.home-statusbar .sorteo-banner::before,
html body #hero.hero.home-statusbar .sorteo-banner::after,
html body #hero.hero.home-statusbar .estado-update::before,
html body #hero.hero.home-statusbar .estado-update::after,
html body #hero.hero.home-statusbar .fecha-selector::before,
html body #hero.hero.home-statusbar .fecha-selector::after {
content: none;
display: none;
}
html body #hero.hero.home-statusbar .home-statusbar__inner,
html body .grid-container,
html body .tabla-clasica-wrap,
html body .tabla-clasica-list {
box-sizing: border-box;
width: min(calc(100% - var(--home-page-gap)), var(--home-max-width));
max-width: var(--home-max-width);
margin-inline: auto;
}
html body #hero.hero.home-statusbar .home-statusbar__inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-areas: "next date live";
align-items: center;
justify-content: center;
gap: 12px;
}
html body #hero.hero.home-statusbar .home-statusbar__next { grid-area: next; }
html body #hero.hero.home-statusbar .home-statusbar__date { grid-area: date; }
html body #hero.hero.home-statusbar .home-statusbar__live { grid-area: live; }
html body #hero.hero.home-statusbar .home-statusbar__pill,
html body #hero.hero.home-statusbar .sorteobanner--simple,
html body #hero.hero.home-statusbar .sorteo-banner,
html body #hero.hero.home-statusbar .fecha-selector,
html body #hero.hero.home-statusbar .estado-update {
box-sizing: border-box;
width: 100%;
max-width: none;
min-width: 0;
height: 38px;
min-height: 38px;
margin: 0;
padding: 0 14px;
border: 1px solid var(--home-card-border);
border-radius: 999px;
background: var(--home-card-bg);
color: var(--home-card-ink);
box-shadow: none;
overflow: hidden;
}
html body #hero.hero.home-statusbar .sorteobanner--simple,
html body #hero.hero.home-statusbar .sorteo-banner,
html body #hero.hero.home-statusbar .estado-update {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
html body #hero.hero.home-statusbar .sorteo-banner-titulo,
html body #hero.hero.home-statusbar #fechaHoy,
html body #hero.hero.home-statusbar .home-statusbar__live-label,
html body #hero.hero.home-statusbar #estadoTexto {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
max-width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: inherit;
font-size: clamp(.72rem, .84vw, .84rem);
font-weight: 800;
line-height: 1;
letter-spacing: .01em;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
html body #hero.hero.home-statusbar .home-statusbar__live-label {
flex: 0 0 auto;
font-weight: 850;
}
html body #hero.hero.home-statusbar .home-statusbar__sep {
flex: 0 0 auto;
color: rgba(32, 33, 31, .38);
font-weight: 800;
}
html body #hero.hero.home-statusbar .estado-punto {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--brand-accent-2, #62C9CF);
}
html body #hero.hero.home-statusbar .fecha-selector {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 34px;
align-items: center;
gap: 4px;
padding: 0 5px;
}
html body #hero.hero.home-statusbar .fecha-nav,
html body #hero.hero.home-statusbar .fecha-actual {
box-sizing: border-box;
min-height: 30px;
height: 30px;
margin: 0;
border: 0;
background: transparent;
color: var(--home-card-ink);
box-shadow: none;
}
html body #hero.hero.home-statusbar .fecha-nav {
width: 34px;
min-width: 34px;
padding: 0;
border-radius: 999px;
}
html body #hero.hero.home-statusbar .fecha-actual {
min-width: 0;
width: 100%;
padding: 0 5px;
justify-content: center;
gap: 6px;
border-radius: 999px;
}
html body .grid-container {
margin-top: 8px;
padding: 0 0 24px;
background: transparent;
}
html body .tabla-clasica-wrap,
html body .tabla-clasica-list {
padding: 0;
}
html body .tabla-clasica-list {
display: grid;
gap: 6px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(136px, 15%) minmax(0, 1fr);
align-items: stretch;
gap: 6px;
min-width: 0;
margin: 0;
padding: 5px;
border-radius: 16px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-prov-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-width: 0;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-prov-nombre {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
width: 100%;
height: 46px;
min-height: 46px;
padding: 0 10px;
overflow: hidden;
color: var(--home-card-ink);
font-size: clamp(.72rem, .82vw, .86rem);
font-weight: 900;
letter-spacing: .045em;
line-height: 1.05;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 6px;
min-width: 0;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.activo,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.con-dato,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.sin-dato {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
width: 100%;
height: 46px;
min-height: 46px;
margin: 0;
padding: 3px 4px;
border: 0;
border-radius: 8px;
gap: 1px;
overflow: hidden;
text-align: center;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno:not(:disabled) {
cursor: pointer;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno:disabled {
cursor: default;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno .tabla-turno-label {
display: block;
max-width: 100%;
margin: 0;
overflow: hidden;
font-size: clamp(.46rem, .64vw, .56rem);
font-weight: 900;
letter-spacing: .045em;
line-height: 1;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
display: block;
max-width: 100%;
margin: 0;
overflow: hidden;
font-size: clamp(1.25rem, 2vw, 1.72rem);
font-weight: 900;
letter-spacing: -.035em;
line-height: .92;
text-overflow: clip;
white-space: nowrap;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(1rem, 1.55vw, 1.35rem);
letter-spacing: .08em;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno .tabla-turno-num::after,
html body #gridProvincias .tabla-turno .tabla-turno-num::after {
content: none;
display: none;
}
html body .home-after-results {
box-sizing: border-box;
width: min(calc(100% - var(--home-page-gap)), 980px);
margin: 18px auto 10px;
padding: 0 6px;
color: var(--home-card-ink);
text-align: center;
}
html body .home-after-results h1 {
margin: 4px 0 0;
color: var(--home-card-ink);
font-size: clamp(1.42rem, 2.15vw, 2rem);
font-weight: 400;
letter-spacing: .005em;
line-height: 1.05;
text-transform: uppercase;
}
html body .home-after-results p {
max-width: 760px;
margin: 7px auto 0;
color: rgba(32, 33, 31, .68);
font-size: clamp(.9rem, 1vw, 1rem);
font-weight: 500;
line-height: 1.45;
}
html body .home-after-results + .filtros-container {
margin-top: 10px;
margin-bottom: 14px;
}
.home-growth-panel,
.home-featured-provinces {
box-sizing: border-box;
width: min(calc(100% - clamp(24px, 5vw, 72px)), 1180px);
margin: clamp(18px, 4vw, 34px) auto;
padding: clamp(18px, 3vw, 30px);
border: 1px solid rgba(32, 33, 31, .10);
border-radius: clamp(22px, 3vw, 34px);
background: rgba(255,255,255,.88);
box-shadow: 0 18px 44px rgba(32, 33, 31, .08);
backdrop-filter: blur(10px);
}
.home-growth-head,
.home-featured-provinces__head {
max-width: 760px;
margin: 0 0 clamp(16px, 3vw, 24px);
}
.home-growth-head .nev-kicker,
.home-featured-provinces__head .nev-kicker {
display: inline-flex;
align-items: center;
width: fit-content;
margin: 0 0 8px;
color: var(--home-accent);
font-size: .74rem;
font-weight: 900;
letter-spacing: .13em;
line-height: 1.2;
text-transform: uppercase;
}
.home-growth-head h2,
.home-featured-provinces__head h2 {
margin: 0;
color: var(--home-card-ink);
font-size: clamp(1.55rem, 3vw, 2.45rem);
font-weight: 900;
line-height: 1.03;
letter-spacing: -.035em;
text-wrap: balance;
}
.home-growth-head p,
.home-featured-provinces__head p {
max-width: 720px;
margin: 10px 0 0;
color: rgba(32, 33, 31, .72);
font-size: clamp(.98rem, 1.2vw, 1.08rem);
line-height: 1.55;
}
.home-growth-grid {
display: grid;
grid-template-columns: minmax(260px, .85fr) repeat(2, minmax(0, 1fr));
gap: clamp(12px, 2vw, 18px);
align-items: stretch;
}
.home-number-search,
.home-hot-links,
.home-featured-provinces__grid a {
box-sizing: border-box;
min-width: 0;
border: 1px solid rgba(32, 33, 31, .10);
border-radius: 22px;
background: rgba(255, 250, 244, .78);
box-shadow: 0 8px 24px rgba(32, 33, 31, .05);
}
.home-number-search,
.home-hot-links {
padding: clamp(14px, 2vw, 20px);
}
.home-number-search label,
.home-hot-links strong {
display: block;
margin: 0 0 12px;
color: var(--home-card-ink);
font-size: .9rem;
font-weight: 900;
letter-spacing: .03em;
line-height: 1.25;
}
.home-number-search__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.home-number-search input {
box-sizing: border-box;
width: 100%;
min-height: 46px;
padding: 0 14px;
border: 1px solid rgba(32, 33, 31, .14);
border-radius: 999px;
background: rgba(255, 255, 255, .82);
color: var(--home-card-ink);
font-weight: 800;
font-size: 1rem;
line-height: 1;
outline: none;
}
.home-number-search input:focus {
border-color: rgba(var(--brand-accent-rgb), .55);
box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), .12);
}
.home-number-search button {
min-height: 46px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--home-card-ink);
color: var(--theme-white, #f7f8fb);
font-weight: 900;
font-size: .92rem;
line-height: 1;
cursor: pointer;
transition: transform .18s ease, background-color .18s ease;
}
.home-number-search button:hover,
.home-number-search button:focus-visible {
background: var(--home-accent);
transform: translateY(-1px);
}
.home-number-search p {
margin: 12px 0 0;
color: rgba(32, 33, 31, .66);
font-size: .92rem;
line-height: 1.45;
}
.home-hot-links__grid,
.home-featured-provinces__grid {
display: grid;
gap: 10px;
}
.home-hot-links__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-hot-links__grid a {
display: flex;
align-items: center;
min-height: 40px;
padding: 9px 12px;
border: 1px solid rgba(32, 33, 31, .10);
border-radius: 999px;
background: rgba(255, 255, 255, .58);
color: var(--home-card-ink);
font-size: .92rem;
font-weight: 800;
line-height: 1.2;
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.home-hot-links__grid a:hover,
.home-hot-links__grid a:focus-visible {
border-color: rgba(var(--brand-accent-rgb), .38);
background: var(--home-card-ink);
color: var(--theme-white, #f7f8fb);
transform: translateY(-1px);
}
.home-featured-provinces__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-featured-provinces__grid a {
display: flex;
flex-direction: column;
gap: 7px;
min-height: 132px;
padding: 18px;
color: var(--home-card-ink);
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.home-featured-provinces__grid a:hover,
.home-featured-provinces__grid a:focus-visible {
border-color: rgba(var(--brand-accent-rgb), .34);
background: rgba(255, 255, 255, .86);
transform: translateY(-2px);
}
.home-featured-provinces__grid strong {
color: var(--home-card-ink);
font-size: 1.02rem;
font-weight: 950;
line-height: 1.2;
}
.home-featured-provinces__grid span {
color: rgba(32, 33, 31, .68);
font-size: .94rem;
line-height: 1.45;
}
@media (max-width: 1020px) and (min-width: 761px) {
html body #hero.hero.home-statusbar .home-statusbar__inner {
gap: 8px;
}
html body #hero.hero.home-statusbar .sorteo-banner-titulo,
html body #hero.hero.home-statusbar #fechaHoy,
html body #hero.hero.home-statusbar .home-statusbar__live-label,
html body #hero.hero.home-statusbar #estadoTexto {
font-size: clamp(.62rem, .95vw, .76rem);
}
}
@media (max-width: 1080px) {
.home-growth-grid {
grid-template-columns: 1fr;
}
.home-featured-provinces__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
body {
--home-page-gap: 16px;
}
html body #hero.hero.home-statusbar {
padding: 7px 0 8px;
}
html body #hero.hero.home-statusbar .home-statusbar__inner {
width: calc(100% - var(--home-page-gap));
max-width: none;
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
grid-template-areas:
"next next"
"date live";
gap: 6px;
padding: 7px;
border: 1px solid rgba(32, 33, 31, .09);
border-radius: 20px;
background: rgba(255, 250, 244, .56);
}
html body #hero.hero.home-statusbar .home-statusbar__pill,
html body #hero.hero.home-statusbar .sorteobanner--simple,
html body #hero.hero.home-statusbar .sorteo-banner,
html body #hero.hero.home-statusbar .fecha-selector,
html body #hero.hero.home-statusbar .estado-update {
height: 30px;
min-height: 30px;
padding: 0 8px;
border-radius: 999px;
}
html body #hero.hero.home-statusbar .sorteo-banner-titulo,
html body #hero.hero.home-statusbar #fechaHoy,
html body #hero.hero.home-statusbar .home-statusbar__live-label,
html body #hero.hero.home-statusbar #estadoTexto {
font-size: clamp(.58rem, 2.45vw, .70rem);
letter-spacing: 0;
}
html body #hero.hero.home-statusbar .fecha-selector {
grid-template-columns: 24px minmax(0, 1fr) 24px;
gap: 2px;
padding: 0 3px;
}
html body #hero.hero.home-statusbar .fecha-nav,
html body #hero.hero.home-statusbar .fecha-actual {
height: 24px;
min-height: 24px;
}
html body #hero.hero.home-statusbar .fecha-nav {
width: 24px;
min-width: 24px;
}
html body #hero.hero.home-statusbar .fecha-nav svg {
width: 14px;
height: 14px;
}
html body #hero.hero.home-statusbar .fecha-icono {
width: 12px;
height: 12px;
}
html body #hero.hero.home-statusbar .home-statusbar__live {
gap: 3px;
}
html body #hero.hero.home-statusbar .estado-punto {
width: 7px;
height: 7px;
}
html body .grid-container,
html body .tabla-clasica-wrap,
html body .tabla-clasica-list {
width: 100%;
max-width: none;
}
html body .grid-container {
margin-top: 7px;
padding: 0 6px 16px;
}
html body .tabla-clasica-list {
gap: 3px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios {
width: 100%;
max-width: none;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
padding: 4px;
border-radius: 16px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-prov-nombre {
height: 28px;
min-height: 28px;
padding: 0 7px;
border-radius: 12px;
font-size: clamp(.72rem, 3vw, .86rem);
line-height: 1;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid {
width: 100%;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 3px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.activo,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.con-dato,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.sin-dato {
height: 38px;
min-height: 38px;
padding: 2px 2px;
border-radius: 9px;
gap: 0;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno .tabla-turno-label {
font-size: clamp(.36rem, 1.58vw, .46rem);
line-height: 1;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(1rem, 5.35vw, 1.46rem);
line-height: .88;
letter-spacing: -.045em;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
font-size: clamp(.76rem, 3.9vw, 1rem);
letter-spacing: .05em;
}
html body .home-after-results {
width: calc(100% - 18px);
margin-top: 14px;
}
html body .home-after-results h1 {
font-size: clamp(1.20rem, 5.2vw, 1.54rem);
}
html body .home-after-results p {
font-size: .86rem;
line-height: 1.36;
}
.home-growth-panel,
.home-featured-provinces {
width: calc(100% - 24px);
margin-block: 18px;
padding: 16px;
border-radius: 22px;
}
.home-growth-head,
.home-featured-provinces__head {
margin-bottom: 14px;
}
.home-growth-head h2,
.home-featured-provinces__head h2 {
font-size: clamp(1.38rem, 8vw, 1.9rem);
}
.home-hot-links__grid,
.home-featured-provinces__grid {
grid-template-columns: 1fr;
}
.home-number-search,
.home-hot-links,
.home-featured-provinces__grid a {
border-radius: 18px;
}
.home-number-search__row {
grid-template-columns: 1fr;
}
.home-number-search button {
width: 100%;
}
}
@media (max-width: 390px) {
html body #hero.hero.home-statusbar .home-statusbar__inner {
width: calc(100% - 12px);
gap: 5px;
padding: 6px;
}
html body #hero.hero.home-statusbar .sorteo-banner-titulo,
html body #hero.hero.home-statusbar #fechaHoy,
html body #hero.hero.home-statusbar .home-statusbar__live-label,
html body #hero.hero.home-statusbar #estadoTexto {
font-size: var(--font-min, .6875rem);
}
html body .grid-container {
padding-inline: 5px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios {
padding: 4px;
gap: 3px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid {
gap: 3px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.activo,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.con-dato,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.sin-dato {
height: 34px;
min-height: 34px;
border-radius: 8px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.activo .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.con-dato .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo .tabla-turno-num {
font-size: clamp(.82rem, 5vw, 1.10rem);
}
}
/* ============================================================
B2.5 — Responsive defensivo home/pizarra
------------------------------------------------------------
Evita que la pizarra o sus celdas fuercen ancho horizontal
en teléfonos chicos. No cambia colores ni jerarquía visual.
============================================================ */
html body .quiniela-clasica,
html body .tabla-clasica-wrap,
html body .tabla-clasica-list,
html body .tabla-prov-row,
html body .tabla-prov-head,
html body .tabla-turnos-grid,
html body .tabla-turno,
html body .tabla-prov-nombre,
html body .tabla-pizarra-btn {
box-sizing: border-box;
max-width: 100%;
min-width: 0;
}
html body .tabla-clasica-wrap {
overflow-x: clip;
}
html body .tabla-turnos-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
width: 100%;
}
html body .tabla-turno-label,
html body .tabla-turno-num,
html body .tabla-prov-nombre,
html body .tabla-pizarra-btn {
min-width: 0;
overflow-wrap: anywhere;
}
@media (max-width: 390px) {
html body .tabla-prov-row {
padding-inline: 6px;
}
html body .tabla-turnos-grid {
gap: 5px;
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato {
padding-inline: 2px;
}
}
/* ==========================================================================
B2.5.9 — Home y pizarra alineadas a paleta oficial
El rojo coral queda reservado para vivo/acción/resultado activo.
========================================================================== */
html body {
--home-card-bg: var(--brand-bg-alpha, rgba(250, 246, 240, .84));
--home-card-border: var(--brand-line-soft, rgba(31, 31, 31, .10));
--home-card-ink: var(--brand-text, #5A45A3);
--home-accent: var(--brand-accent, #62C9CF);
}
html body #hero.hero.home-statusbar,
html body #hero.hero {
background: var(--brand-surface, #FFFFFF);
color: var(--brand-text, #5A45A3);
border-bottom-color: var(--brand-border, #E4E8F0);
box-shadow: none;
}
html body #hero.hero.home-statusbar .home-statusbar__inner,
html body #hero.hero.home-statusbar .home-statusbar__pill,
html body #hero.hero.home-statusbar .sorteobanner--simple,
html body #hero.hero.home-statusbar .sorteo-banner,
html body #hero.hero.home-statusbar .fecha-selector,
html body #hero.hero.home-statusbar .estado-update,
html body #hero .fecha-actual,
html body #hero .fecha-nav {
background: var(--brand-bg-alpha, rgba(250, 246, 240, .84));
color: var(--brand-text, #5A45A3);
border-color: var(--brand-line-soft, rgba(31, 31, 31, .10));
box-shadow: none;
}
html body #hero.hero.home-statusbar .estado-punto,
html body .tabla-clasica-live span {
background: var(--brand-accent, #62C9CF);
}
html body .tabla-clasica-head h2,
html body .home-after-results h1 {
color: var(--brand-text, #5A45A3);
}
html body .tabla-clasica-head p,
html body .home-after-results p {
color: var(--brand-ink-soft, rgba(31, 31, 31, .68));
}
html body .tabla-clasica-live {
background: var(--brand-primary, #5A45A3);
color: var(--brand-text-on-dark, #FFFFFF);
box-shadow: none;
}
html body .tabla-prov-row,
html body .tabla-prov-row.tabla-prov-row--sin-premios,
html body .home-growth-panel,
html body .home-featured-provinces {
background: var(--brand-surface-alpha, rgba(255, 255, 255, .88));
border-color: var(--brand-border, #E4E8F0);
box-shadow: none;
}
html body .tabla-prov-row,
html body .tabla-prov-row.tabla-prov-row--sin-premios {
border: 1px solid var(--brand-border, #E4E8F0);
}
html body .tabla-prov-nombre,
html body .tabla-pizarra-btn,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-prov-nombre {
background: rgba(var(--brand-bg-rgb), .82);
color: var(--brand-text, #5A45A3);
border-color: var(--brand-border, #E4E8F0);
box-shadow: none;
}
html body .tabla-pizarra-btn:not(:disabled):hover,
html body .tabla-pizarra-btn:not(:disabled):focus-visible {
background: var(--brand-primary, #5A45A3);
border-color: var(--brand-primary, #5A45A3);
color: var(--brand-text-on-dark, #FFFFFF);
box-shadow: none;
transform: none;
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.con-dato,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.en-vivo,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.con-dato,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.sin-dato {
background: var(--brand-primary, #5A45A3);
color: var(--brand-text-on-dark, #FFFFFF);
box-shadow: none;
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.activo,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.activo {
background: var(--brand-accent, #62C9CF);
color: var(--brand-text-on-accent, #111111);
box-shadow: none;
}
html body .tabla-turno-label,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-label,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno .tabla-turno-label {
color: rgba(var(--brand-surface-rgb), .78);
}
html body .tabla-turno-num,
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno .tabla-turno-num {
color: var(--brand-text-on-dark, #FFFFFF);
}
html body .tabla-clasica-list .tabla-prov-row .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num,
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.sin-dato .tabla-turno-num {
color: rgba(var(--brand-surface-rgb), .72);
}
html body .home-number-search input {
background: rgba(var(--brand-bg-rgb), .82);
border-color: var(--brand-line-soft, rgba(31, 31, 31, .10));
color: var(--brand-text, #5A45A3);
}
html body .home-number-search input:focus {
border-color: rgba(var(--brand-accent-rgb), .55);
box-shadow: 0 0 0 4px var(--brand-focus-ring, rgba(98, 201, 207, .20));
}
html body .home-number-search button {
background: var(--brand-primary, #5A45A3);
color: var(--brand-text-on-dark, #FFFFFF);
}
html body .home-number-search button:hover,
html body .home-number-search button:focus-visible {
background: var(--brand-accent, #62C9CF);
color: var(--brand-text-on-accent, #111111);
}
html body .home-hot-links__grid a,
html body .home-featured-provinces__grid a,
html body .quick-province-links a {
background: rgba(var(--brand-bg-rgb), .62);
color: var(--brand-text, #5A45A3);
border-color: var(--brand-line-soft, rgba(31, 31, 31, .10));
}
html body .home-hot-links__grid a:hover,
html body .home-hot-links__grid a:focus-visible,
html body .quick-province-links a:hover,
html body .quick-province-links a:focus-visible {
background: var(--brand-primary, #5A45A3);
color: var(--brand-text-on-dark, #FFFFFF);
border-color: var(--brand-primary, #5A45A3);
transform: none;
}
html body .home-featured-provinces__grid a:hover,
html body .home-featured-provinces__grid a:focus-visible {
border-color: rgba(var(--brand-accent-rgb), .34);
background: rgba(var(--brand-bg-rgb), .86);
transform: none;
}
/* ==========================================================================
B2.5.11 — Pizarra: estado en sorteo legible
--------------------------------------------------------------------------
Evita la mezcla visual "turno + EN SORTEO + ----" heredada de styles.css.
Cuando un turno está en ventana activa sin cabeza válida, se muestra un
único estado compacto y no una falsa numeración pendiente.
========================================================================== */
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo:not(.con-dato),
html body #gridProvincias .tabla-turno.en-vivo:not(.con-dato) {
gap: 4px;
padding-inline: 6px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-label,
html body #gridProvincias .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-label {
color: rgba(var(--brand-surface-rgb), .76);
font-size: clamp(.42rem, .56vw, .52rem);
font-weight: 850;
letter-spacing: .055em;
line-height: 1;
transform: none;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-label::after,
html body #gridProvincias .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-label::after {
content: none;
display: none;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-num,
html body #gridProvincias .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: 100%;
min-height: 18px;
padding: 3px 8px 2px;
border: 1px solid rgba(var(--brand-surface-rgb), .28);
border-radius: 999px;
color: var(--brand-text-on-dark, #FFFFFF);
background: rgba(var(--brand-surface-rgb), .10);
font-family: var(--theme-font-body, inherit);
font-size: clamp(.52rem, .72vw, .66rem);
font-weight: 900;
letter-spacing: .085em;
line-height: 1;
text-transform: uppercase;
}
@media (max-width: 760px) {
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo:not(.con-dato),
html body #gridProvincias .tabla-turno.en-vivo:not(.con-dato) {
gap: 3px;
padding-inline: 3px;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-label,
html body #gridProvincias .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-label {
font-size: clamp(.34rem, 1.15vw, .44rem);
letter-spacing: .04em;
}
html body .tabla-prov-row.tabla-prov-row--sin-premios .tabla-turnos-grid .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-num,
html body #gridProvincias .tabla-turno.en-vivo:not(.con-dato) .tabla-turno-num {
min-height: 16px;
padding: 3px 5px 2px;
font-size: clamp(.42rem, 1.32vw, .54rem);
letter-spacing: .055em;
}
}
/* B2.6.0 — Respuesta directa Home */
.home-answer-direct {
margin-top: clamp(14px, 2vw, 22px);
margin-bottom: clamp(12px, 2vw, 18px);
}
/* B2.6.1 — Home GEO + long-tail embebida */
.home-answer-direct--b261 {
background: var(--brand-surface, #FFFFFF);
border-color: rgba(90, 69, 163, .16);
}
.home-answer-direct--b261 .home-geo-main p strong {
color: var(--brand-primary, #5A45A3);
font-weight: 900;
}
.home-intent-panel,
.home-citable-block,
.home-data-intent {
width: min(1180px, calc(100% - 32px));
margin: clamp(18px, 2.8vw, 34px) auto;
}
.home-intent-panel,
.home-citable-block {
background: var(--brand-surface, #FFFFFF);
border: 1px solid rgba(90, 69, 163, .14);
border-radius: 24px;
padding: clamp(20px, 3vw, 30px);
box-shadow: none;
}
.home-intent-head {
max-width: 820px;
margin-bottom: 18px;
}
.home-intent-head h2,
.home-citable-block h2,
.home-data-card h2 {
color: var(--brand-primary, #5A45A3);
letter-spacing: -.035em;
margin: 0 0 10px;
font-size: clamp(1.35rem, 2.4vw, 2.2rem);
line-height: 1.08;
}
.home-intent-head p,
.home-citable-block p,
.home-data-card p {
color: rgba(90, 69, 163, .78);
margin: 0;
font-size: 1rem;
line-height: 1.7;
}
.home-intent-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.home-intent-card,
.home-data-card {
color: var(--brand-primary, #5A45A3);
text-decoration: none;
background: rgba(255,255,255,.34);
border: 1px solid rgba(90, 69, 163, .12);
border-radius: 18px;
padding: 16px;
box-shadow: none;
}
.home-intent-card strong {
display: block;
color: var(--brand-primary, #5A45A3);
font-size: 1rem;
line-height: 1.2;
margin-bottom: 7px;
font-weight: 950;
}
.home-intent-card span {
display: block;
color: rgba(90, 69, 163, .70);
font-size: .92rem;
line-height: 1.45;
}
.home-intent-card:hover,
.home-intent-card:focus-visible,
.home-data-card a:hover,
.home-data-card a:focus-visible {
border-color: rgba(98, 201, 207, .42);
outline: none;
}
.home-citable-block {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
gap: clamp(16px, 2.4vw, 28px);
align-items: start;
}
.home-citable-block ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
.home-citable-block li {
background: rgba(255,255,255,.34);
border: 1px solid rgba(90, 69, 163, .12);
border-radius: 16px;
color: rgba(90, 69, 163, .76);
padding: 13px 14px;
line-height: 1.45;
}
.home-citable-block li strong {
color: var(--brand-accent, #62C9CF);
}
.home-data-intent {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.home-data-card {
display: flex;
flex-direction: column;
min-height: 100%;
}
.home-data-card a {
align-self: flex-start;
margin-top: auto;
color: var(--brand-primary, #5A45A3);
border: 1px solid rgba(73,73,73,.20);
border-radius: 999px;
padding: 10px 14px;
text-decoration: none;
font-weight: 900;
}
.home-data-card--habit {
background: var(--brand-primary, #5A45A3);
color: var(--brand-surface, #FFFFFF);
}
.home-data-card--habit h2,
.home-data-card--habit p,
.home-data-card--habit .prov-geo-label {
color: var(--brand-surface, #FFFFFF);
}
.home-data-card--habit a {
color: var(--brand-surface, #FFFFFF);
border-color: rgba(244,233,220,.34);
}
@media (max-width: 940px) {
.home-intent-grid,
.home-data-intent,
.home-citable-block {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.home-intent-panel,
.home-citable-block,
.home-data-intent {
width: min(100% - 20px, 1180px);
}
.home-intent-panel,
.home-citable-block,
.home-data-card {
border-radius: 18px;
padding: 16px;
}
}
/* B2.6.2 — H1 debajo de la pizarra: UX primero, SEO visible sin tapar resultados */
.home-after-results h1 {
margin: 0 0 12px;
color: var(--brand-primary, #5A45A3);
font-family: var(--font-heading, inherit);
font-size: clamp(1.65rem, 3vw, 2.55rem);
line-height: 1.04;
letter-spacing: -0.03em;
}
.home-after-results + .home-answer-direct--b261 {
margin-top: 14px;
}
@media (max-width: 640px) {
.home-after-results h1 {
font-size: clamp(1.45rem, 8vw, 2rem);
text-align: center;
}
}