/* =====================================================================
   raspa.css - [raspa_y_gana] y [raspa_banner]
   ---------------------------------------------------------------------
   Copiado del plugin "Raspa y Gana" de WordPress. Los colores del banner
   salen de variables (--ryg-f1, --ryg-titulo...) que pone el HTML con lo
   elegido en el panel; en WordPress el CSS se escribia de nuevo con PHP
   en cada pagina.
   ===================================================================== */
#ryg-container, #ryg-container *{ box-sizing: border-box; font-family: 'Poppins', system-ui, sans-serif;
}
#ryg-container{ max-width: 440px; margin: 2rem auto; padding: 0 1rem;
}
.ryg-card-wrap{ border-radius: 24px; position: relative;
}
.ryg-card{ background: linear-gradient(247.51deg, rgb(0, 255, 255) 15.13%, rgb(170, 35, 255) 80.43%, rgb(170, 35, 255) 88.61%);  border-radius: 24px;  padding: 2.5rem 2rem; text-align: center; position: relative;
}
.ryg-badge{ display: inline-flex; align-items: center; gap: 6px; background: rgba(39,241,255,0.1); border: 1px solid rgba(39,241,255,0.35); border-radius: 999px; padding: 5px 14px; margin-bottom: 1.5rem;
}
.ryg-badge-dot{ width: 7px; height: 7px; border-radius: 50%; background: #27f1ff; flex-shrink:0; animation: ryg-pulse 1.5s ease-in-out infinite;
}
@keyframes ryg-pulse{ 0%,100%{opacity:1;} 50%{opacity:0.4;}
}
.ryg-badge-text{ color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
}
.ryg-icon-box{ width: 72px; height: 72px; background: rgba(255,255,255,0.08); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; border: 1px solid rgba(132,242,199,0.3); font-size: 36px;
}
.ryg-title{ font-family: 'Anton', sans-serif !important; color: #fff; font-size: 36px; font-weight: 400; margin: 0 0 6px; letter-spacing: 0.02em;
}
.ryg-title span{ font-family: 'Anton', sans-serif !important; color: #bffbb7;
}
.ryg-sub{ color: rgba(255,255,255,0.65); font-size: 14px; font-weight: 500; margin: 0 0 1.75rem; line-height: 1.5;
}
.ryg-input-wrap{ position: relative; margin-bottom: 12px;
}
.ryg-input-icon{ position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none;
}
#ryg-dni-input{ width: 100%; background: rgba(255,255,255,0.07); border: 1.5px solid rgba(132,242,199,0.3); border-radius: 14px; padding: 14px 16px 14px 46px; color: #fff; font-size: 16px; font-family: 'Poppins', sans-serif; font-weight: 500; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
#ryg-dni-input:focus{ border-width: 1px; border-color: var(--foco-borde); box-shadow: var(--foco-halo);
}
#ryg-dni-input::placeholder{ color: rgba(255,255,255,0.3);
}
#ryg-btn-entrar{ width: 100%; background: linear-gradient(228deg, #13e5d5 -51%, #84f2c7 8%, #defdbb 72%); color: #8b3fff; border: none; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 700; font-family: 'Poppins', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s, transform 0.1s;
}
#ryg-btn-entrar:hover{ opacity: 0.9; transform: translateY(-1px);
}
#ryg-btn-entrar:active{ transform: scale(0.98);
}
.ryg-divider{ display: flex; align-items: center; gap: 12px; margin: 1.25rem 0;
}
.ryg-divider-line{ flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}
.ryg-divider-text{ color: rgba(255,255,255,0.3); font-size: 11px; white-space: nowrap;
}
.ryg-pills{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.ryg-pill{ background: rgba(255,255,255,0.05); border: 1px solid rgba(132,242,199,0.2); border-radius: 999px; padding: 5px 12px; color: rgba(255,255,255,0.45); font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 5px;
}
#ryg-error-1{ color: #ff9eb5; font-size: 13px; margin-top: 1rem; display: none; background: rgba(255,107,247,0.08); border: 1px solid rgba(255,107,247,0.2); border-radius: 14px; padding: 16px; font-weight: 500; line-height: 1.6; text-align: center;
}
.ryg-hello{ color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 500; margin: 0 0 3px;
}
.ryg-username{ font-family: 'Anton', sans-serif !important; color: #bffbb7; font-size: 26px; font-weight: 400; margin: 0 0 4px;
}
.ryg-scratch-hint{ color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 500; margin: 0 0 1.5rem;
}
.ryg-canvas-wrap{ position: relative; border-radius: 18px; overflow: visible; margin-bottom: 1.25rem; touch-action: none; border: 2px solid rgba(132,242,199,0.25);
}
#ryg-prize-bg{ display: block; width: 100%; border-radius: 16px;
}
#ryg-scratch-canvas{ position: absolute; top: 0; left: 0; width: 100%; border-radius: 16px; cursor: crosshair; touch-action: none;
}
.ryg-scratch-tip{ color: rgba(255,255,255,0.3); font-size: 12px; margin: 0; font-weight: 500;
}
#ryg-gift-anim{ position:absolute; top:0; left:0; width:100%; height:100%; display:none; align-items:center; justify-content:center; border-radius:16px; overflow:visible; pointer-events:none; z-index:5; background:#6f1d9b;
}
#ryg-gift-anim svg{ width:110px; height:110px; overflow:visible;
}
.ryg-gpart{ position:absolute; border-radius:50%; pointer-events:none; opacity:0;
}
.ryg-win-card{ background: linear-gradient(181deg, rgb(37, 40, 206) -40.98%, rgb(184, 79, 255) 107.6%); border-radius: 24px; padding: 2.5rem 2rem; text-align: center;
}
.ryg-win-circle{ width: 80px; height: 80px; background: rgba(132,242,199,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; border: 2px solid rgba(132,242,199,0.4); font-size: 36px;
}
.ryg-win-eyebrow{ color: #84f2c7; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; margin: 0 0 4px; text-transform: uppercase;
}
.ryg-win-msg{ color: rgba(255,255,255,0.55); font-size: 14px; font-weight: 500; margin: 0 0 4px;
}
.ryg-win-amount-wrap{ margin: 0.5rem 0 1rem;
}
.ryg-win-currency{ font-family: 'Anton', sans-serif; color: rgba(191,251,183,0.6); font-size: 28px; font-weight: 400; vertical-align: super; margin-right: 4px;
}
.ryg-win-amount{ font-family: 'Anton', sans-serif; color: #bffbb7; font-size: 80px; font-weight: 400; line-height: 1; letter-spacing: -2px;
}
.ryg-win-amount-sub{ color: rgba(255,255,255,0.35); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; margin: 4px 0 0;
}
.ryg-win-reclamar{ color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 500; line-height: 1.6; margin: 0 0 1.25rem;
}
.ryg-btn-wa{ display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(228.83deg, #13e5d5 -51.56%, #84f2c7 8.91%, #defdbb 72.65%); color: #8b3fff; border: none; border-radius: 999px; padding: 12px 24px; font-size: 15px; font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; text-decoration: none; transition: transform .2s ease, background .35s ease;
}
.ryg-btn-wa:hover{ transform: translateY(-1px); background: linear-gradient(228.83deg, #defdbb -51.56%, #84f2c7 8.91%, #13e5d5 72.65%); color: #8b3fff; text-decoration: none;
}
.ryg-btn-wa:focus, .ryg-btn-wa:active{ color: #8b3fff; text-decoration: none;
}
.ryg-lose-card{ background: linear-gradient(181deg, rgb(37, 40, 206) -40.98%, rgb(184, 79, 255) 107.6%); border-radius: 24px; padding: 2.5rem 2rem; text-align: center;
}
.ryg-lose-circle{ width: 72px; height: 72px; background: rgba(255,107,247,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; border: 1px solid rgba(255,107,247,0.2); font-size: 34px;
}
.ryg-lose-title{ font-family: 'Anton', sans-serif !important; color: #fff; font-size: 24px; font-weight: 400; margin: 0 0 6px;
}
.ryg-lose-sub{ color: rgba(255,255,255,0.45); font-size: 14px; font-weight: 500; line-height: 1.6; margin: 0 0 1.25rem;
}
.ryg-btn-manana{ display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(132,242,199,0.35); border-radius: 12px; padding: 10px 20px; color: #84f2c7; font-size: 13px; font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.ryg-btn-manana:hover{ background: rgba(132,242,199,0.15); border-color: rgba(132,242,199,0.7); color: #84f2c7;
}
.ryg-loading-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 24px; background: rgba(30,5,60,0.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 10;
}
.ryg-loading-inner{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ryg-spinner{ width: 36px; height: 36px; border: 3px solid rgba(132,242,199,0.15); border-top-color: #84f2c7; border-radius: 50%; animation: ryg-spin 0.8s linear infinite;
}
.ryg-loading-overlay span{ color: rgba(255,255,255,0.7); font-size: 15px; font-weight: 500;
}
@keyframes ryg-spin{ to { transform: rotate(360deg); }
}

.ryg-banner-outer{
        position: relative;
        padding-top: 40px; 
        margin: 1.5rem 0 1rem;
        max-width: 100%;
}
.ryg-banner-wrap{
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(247.51deg, var(--ryg-f1) 15.13%, var(--ryg-f2) 80.43%, var(--ryg-f2) 88.61%);
        padding: 2.2rem 200px 2.2rem 2.5rem;
        box-sizing: border-box;
        min-height: 150px;
        display: flex;
        align-items: center;
}
/* Imagenes flotantes (como en WordPress): dibujos de linea que se mecen
   suave sobre el fondo, detras del texto. Cada una tiene su lugar; el
   orden es el de las casillas del panel (en WordPress: audifonos,
   dolares, gorra, tickets). */
.ryg-banner-flotantes{position:absolute;inset:0;z-index:1;pointer-events:none}
.ryg-banner-flotantes img{position:absolute;width:74px;height:72px;object-fit:contain;
        transform:translate(-50%,-50%);animation:ryg-flota 5.5s ease-in-out infinite alternate;will-change:transform}
.ryg-banner-flotantes img:nth-child(1){left:65%;top:22%;animation-duration:6s}
.ryg-banner-flotantes img:nth-child(2){left:38%;top:80%;animation-duration:5s;animation-delay:-2s}
.ryg-banner-flotantes img:nth-child(3){left:45%;top:26%;animation-duration:6.5s;animation-delay:-1s}
.ryg-banner-flotantes img:nth-child(4){left:55%;top:78%;animation-duration:5.5s;animation-delay:-3s}
.ryg-banner-flotantes img:nth-child(5){left:27%;top:20%;animation-duration:7s;animation-delay:-4s}
.ryg-banner-flotantes img:nth-child(6){left:76%;top:80%;animation-duration:6s;animation-delay:-2.5s}
@keyframes ryg-flota{
        from{transform:translate(-50%,-50%) translateY(-8px) rotate(-6deg)}
        to{transform:translate(-50%,-50%) translateY(8px) rotate(6deg)}
}
@media (prefers-reduced-motion:reduce){.ryg-banner-flotantes img{animation:none}}
.ryg-banner-content{
        flex: 1;
        z-index: 2;
        position: relative;
}
.ryg-banner-titulo{
        font-family: 'Anton', 'Impact', sans-serif;
        font-size: clamp(30px, 4.5vw, 50px);
        font-weight: 900;
        color: var(--ryg-titulo);
        margin: 0 0 1.2rem;
        line-height: 1;
        letter-spacing: 0.01em;
        text-transform: uppercase;
}
.ryg-banner-bottom-row{
        display: flex;
        align-items: center;
        gap: 1.5rem;
        flex-wrap: wrap;
}
.ryg-banner-texto{
        color: var(--ryg-texto);
        font-size: 24px;
        font-family: 'Poppins', system-ui, sans-serif;
        font-weight: 500;
        margin: 0;
        line-height: 1.5;
        flex: 1;
        min-width: 160px;
}
.ryg-banner-btn{
        display: inline-block;
        white-space: nowrap;
        background: var(--ryg-btn);
        color: var(--ryg-btn-txt) !important;
        font-family: 'Poppins', system-ui, sans-serif;
        font-size: 14px;
        font-weight: 700;
        padding: 10px 26px;
        border-radius: 999px;
        text-decoration: none !important;
        transition: transform 0.2s ease, opacity 0.2s;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 18px rgba(0,0,0,0.15);
        flex-shrink: 0;
}
.ryg-banner-btn:hover{
        transform: translateY(-2px);
        opacity: 0.9;
        color: var(--ryg-btn-txt) !important;
}
.ryg-banner-img{
        position: absolute;
        right: 10px;
        bottom: 0;          
        top: -40px;         
        height: calc(100% + 40px);
        max-height: 260px;
        width: auto;
        object-fit: contain;
        object-position: bottom center;
        z-index: 10;
        pointer-events: none;
}
@media (max-width: 640px){
.ryg-banner-outer{
            padding-top: 60px;
}
/* En el celular el texto ocupa casi todo: los dibujos quedan de fondo,
   mas chicos y tenues, en los huecos que dejan el titulo y el boton */
.ryg-banner-flotantes img{
            width: 40px;
            height: 38px;
            opacity: .35;
}
.ryg-banner-flotantes img:nth-child(1){left:88%;top:52%}
.ryg-banner-flotantes img:nth-child(2){left:10%;top:86%}
.ryg-banner-flotantes img:nth-child(3){left:62%;top:14%}
.ryg-banner-flotantes img:nth-child(4){left:34%;top:88%}
.ryg-banner-flotantes img:nth-child(5){left:8%;top:12%}
.ryg-banner-flotantes img:nth-child(6){left:50%;top:60%}
.ryg-banner-wrap{
            padding: 1.8rem 1.5rem 2rem 1.5rem;
            overflow: visible;
}
.ryg-banner-img{
            right: 0px;
            top: -60px;
            height: 180px;
            max-height: 180px;
}
.ryg-banner-bottom-row{
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
}
.ryg-banner-texto{
            font-size: 15px;
}
.ryg-banner-btn{
            align-self: flex-end;
}
.ryg-banner-titulo{
            font-size: 32px;
            
            max-width: 65%;
}
}
#ryg-error-1 a.ryg-participar{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(228deg,#13e5d5 -51%,#84f2c7 8%,#defdbb 72%);color:#8b3fff;border-radius:999px;padding:10px 22px;font-size:14px;font-weight:700;text-decoration:none;margin-top:10px}
#ryg-container [hidden]{display:none !important}
/* El codigo del ticket de regalo, igual que en el registro. */
.ryg-win-codigo{display:inline-block;margin:12px 0 0;padding:8px 16px;border:1.5px dashed rgba(191,251,183,.6);border-radius:10px;
  font:700 22px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:4px;color:#bffbb7;background:rgba(255,255,255,.06)}
#ryg-btn-consulta{margin-top:4px}
.ryg-win-circle{color:#bffbb7}
.ryg-win-circle svg{display:block}

/* Iconos SVG (sin emojis) */
.ryg-icon-box{color:#84f2c7}
.ryg-icon-box svg{width:36px;height:36px}
.ryg-lose-circle{color:#ff9cf9}
.ryg-lose-circle svg{width:34px;height:34px}

/* ---- Con la sesion abierta: sin casilla de DNI (includes/vistas/raspa.php) ---- */
.ryg-cuenta-msg{color:#ff9eb5;font-size:13px;font-weight:500;line-height:1.6;text-align:center;background:rgba(255,107,247,0.08);border:1px solid rgba(255,107,247,0.2);border-radius:14px;padding:16px}
.ryg-cuenta-msg p{margin:0}
.ryg-cuenta-msg a.ryg-participar{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(228deg,#13e5d5 -51%,#84f2c7 8%,#defdbb 72%);color:#8b3fff;border-radius:999px;padding:10px 22px;font-size:14px;font-weight:700;text-decoration:none;margin-top:10px}
.ryg-ingresar{margin:12px 0 0;text-align:center;color:rgba(255,255,255,0.5);font-size:12.5px}
.ryg-ingresar a{color:#84f2c7;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ryg-ingresar a:hover{color:#bffbb7}