/* RifApp · tema "boleto de rifa". Cargar DESPUÉS de styles.css y kit.css.
   Usa las variables y los colores (skins) de kit.css y respeta el modo oscuro. Solo añade fuerza visual. */
:root{--navy:#14213d;--gold:#ffc72c}

/* Cabecera azul noche con las tres franjas de la bandera */
body>header{background:var(--navy);color:#fff;border-bottom:0;box-shadow:0 3px 0 #d62839,0 6px 0 #ffc72c,0 9px 0 #1b9e5a}
body>header b{color:#fff}body>header b i{color:var(--gold)}
body>header button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35)}
body>nav a.on{font-weight:800}

/* Filtros */
body .chip.on{background:var(--pri);color:var(--on);border-color:var(--pri)}

/* Bienvenida para visitantes sin cuenta */
.welcome{background:linear-gradient(135deg,var(--navy),#2b3a73);color:#fff;border-radius:20px;padding:22px 20px;margin:4px 0 18px}
.welcome h1{margin:0 0 6px;font-size:26px;font-weight:900;line-height:1.15}
.welcome p{margin:0 0 16px;color:#c9d2e8;max-width:46ch}
.welcome .wb{display:flex;gap:10px;flex-wrap:wrap}
.welcome .btn{width:auto;margin:0;background:var(--gold);color:var(--navy)}
.welcome .btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}

/* Tarjetas con forma de boleto: muescas laterales y línea de corte */
body .card{position:relative;border-radius:18px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(20,33,61,.12);transition:transform .15s,box-shadow .15s}
body .card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,33,61,.2)}
body .card::before,body .card::after{content:"";position:absolute;top:139px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--line);z-index:2}
body .card::before{left:-12px;clip-path:inset(0 0 0 50%)}
body .card::after{right:-12px;clip-path:inset(0 50% 0 0)}
body .card .img{position:relative;height:150px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:62px;background:linear-gradient(135deg,var(--navy),var(--pri))}
body .card .img[data-k=money]{background:linear-gradient(135deg,#1b9e5a,#0b5d36)}
body .card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body .card .tag{z-index:1;background:var(--gold);color:var(--navy);font-size:13px;font-weight:800;padding:4px 10px}
body .card .hot{position:absolute;top:8px;right:8px;z-index:1;background:var(--pri);color:var(--on);font:800 12px system-ui;padding:4px 10px;border-radius:99px}
body .card .hot.off{background:#394264;color:#fff}
body .card .body{border-top:2px dashed var(--line);padding:14px 16px 16px}
body .card h3{font-size:19px;font-weight:800;line-height:1.2}
body .bar i{background:linear-gradient(90deg,var(--pri),var(--gold));min-width:6px}
body .card .row{align-items:baseline;font-size:14px;color:var(--mut)}
body .card .row b{font-size:22px;font-weight:900;color:var(--ink)}
body .card .row b small{font-size:12px;font-weight:600;color:var(--mut)}

/* Botones y detalles */
body .btn{box-shadow:0 4px 0 rgba(0,0,0,.2);transition:transform .08s}
body .btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
body .btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
body .pill.pr{background:var(--gold);border-color:var(--gold);color:var(--navy)}
body .hero{border-radius:18px}
body .hero0{border-radius:18px;background:linear-gradient(135deg,var(--navy),var(--pri))}
body .sbar{background:var(--navy);color:#fff}
body .win{background:var(--navy);color:var(--gold)}

/* Números */
body .n.free{background:var(--card);border:2px solid var(--line);color:var(--ink)}
body .n.sel{background:var(--pri);border-color:var(--pri);color:var(--on)}
body .n.taken{background:var(--sold);border-color:var(--sold);color:var(--mut)}
body .n.mine{background:var(--ok);border-color:var(--ok);color:#fff}

/* Sorteo en vivo */
body .ov.dk{background:radial-gradient(circle at 50% 25%,#2b3a73,#0a1022)}
body .ov.dk .box{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2)}
body .ov.dk .mut{color:#c9d2e8}
body .ov.dk .big{color:var(--gold);font-weight:900}
body .ov.dk .chip{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
@media(prefers-reduced-motion:reduce){body .card,body .btn{transition:none}body .card:hover{transform:none}}

/* Títulos de sección de la portada */
body .sec{font-size:22px;font-weight:800;margin:22px 0 2px}
body .sec+.mut{margin:0 0 12px;font-size:15px}

/* Pestañas de acceso: Ya tengo cuenta / Crear cuenta */
.tabs{display:flex;gap:6px;margin:8px 0 14px}
.tabs a{flex:1;text-align:center;padding:10px;border-radius:99px;border:2px solid var(--line);background:var(--card);color:var(--mut);text-decoration:none;font-weight:700}
.tabs a.on{background:var(--navy);border-color:var(--navy);color:#fff}