/* ==========================================================================
   PLANTILLA "Claro" — modo día, fondo claro con acentos azules. Es la que más
   overrides puntuales necesita porque varios valores del sitio están escritos
   a fuego pensando en fondo oscuro (blancos sólidos, gradientes de header,
   modal, etc.) y no se corrigen solo con las variables compartidas.
   ========================================================================== */
body[data-plantilla="claro"] {
    --bg: #f4f7fc;
    --bg-2: #e9eff9;
    --text: #10203f;
    --muted: #5b6b8c;
    --blue: #0c57d3;
    --blue-bright: #1f6fef;
    --sky: #0c2c7a;
    --white: #ffffff;
    --blue-rgb: 12, 87, 211;
    --blue-bright-rgb: 31, 111, 239;
    --sky-rgb: 12, 44, 122;
    --glass: rgba(12, 87, 211, .06);
    --border: rgba(12, 44, 122, .16);
    --grad: linear-gradient(120deg, var(--blue-bright), var(--sky));
    --grad-loop: linear-gradient(120deg, var(--blue-bright), var(--sky), #0c57d3, var(--sky), var(--blue-bright));
    --grad-btn: linear-gradient(120deg, #0c57d3, #1f6fef, #0c57d3);
    --grad-white: linear-gradient(120deg, #10203f, #0c2c7a, var(--blue-bright));
    --radius: 20px;
    --font-num: "Poppins", system-ui, sans-serif;
    --hero-glow: #dbe6fa;
    --grid-line-1: rgba(12, 87, 211, .1);
    --grid-line-2: rgba(12, 44, 122, .08);
}

/* Header: el fondo semitransparente oscuro se vuelve blanco semitransparente */
body[data-plantilla="claro"] .site-header {
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(12, 44, 122, .04);
}
body[data-plantilla="claro"] .brand__logo { filter: drop-shadow(0 0 6px rgba(12, 87, 211, .25)); }
body[data-plantilla="claro"] .main-nav a { color: var(--muted); }
body[data-plantilla="claro"] .main-nav a[aria-current="page"] { color: var(--sky); background: var(--glass); }
body[data-plantilla="claro"] .main-nav a:hover,
body[data-plantilla="claro"] .main-nav a:focus-visible {
    color: var(--sky);
    background: var(--glass);
    box-shadow: 0 0 0 1px var(--border), 0 0 14px rgba(12, 87, 211, .12);
}
body[data-plantilla="claro"] .header-admin { color: var(--muted); background: var(--glass); border-color: var(--border); }
body[data-plantilla="claro"] .header-admin:hover,
body[data-plantilla="claro"] .header-admin:focus-visible {
    color: var(--sky);
    background: rgba(12, 87, 211, .12);
    box-shadow: 0 0 0 1px var(--border), 0 0 12px rgba(12, 87, 211, .18);
}
body[data-plantilla="claro"] .nav-toggle { background: var(--glass); border-color: var(--border); }
body[data-plantilla="claro"] .nav-toggle span { background: var(--sky); }
body[data-plantilla="claro"] .main-nav { background: rgba(255, 255, 255, .98); }

/* Footer */
body[data-plantilla="claro"] .site-footer { background: var(--bg-2); border-top-color: var(--border); }

/* Modal: el degradado azul-oscuro fijo se cambia por tarjeta blanca */
body[data-plantilla="claro"] .modal__backdrop { background: rgba(16, 32, 63, .35); }
body[data-plantilla="claro"] .modal__dialog {
    background: linear-gradient(170deg, #ffffff, #eef3fc);
    box-shadow: 0 0 0 1px rgba(12, 44, 122, .04), 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent), 0 30px 70px rgba(12, 44, 122, .18);
}
body[data-plantilla="claro"] .modal__code-text { color: var(--sky); text-shadow: none; }
body[data-plantilla="claro"] .modal__copy { color: var(--sky); }

/* Hero / tag / slider / countdown: superficies traslúcidas blancas en vez de negras */
body[data-plantilla="claro"] .tag { color: var(--sky); background: rgba(12, 87, 211, .08); border-color: rgba(12, 44, 122, .25); box-shadow: none; }
body[data-plantilla="claro"] .slide__desc { color: var(--muted); }
body[data-plantilla="claro"] .prize-orb {
    background: radial-gradient(circle at 30% 25%, rgba(12, 87, 211, .12), rgba(255, 255, 255, .4) 60%);
    box-shadow: 0 0 50px rgba(var(--blue-rgb), .18), inset 0 0 30px rgba(var(--blue-bright-rgb), .08);
}
body[data-plantilla="claro"] .prize-orb::after { border-color: rgba(12, 44, 122, .18); }
body[data-plantilla="claro"] .prize-orb__num { color: #ffffff; }
body[data-plantilla="claro"] .slider__btn { background: rgba(255, 255, 255, .9); border-color: var(--border); }
body[data-plantilla="claro"] .slider__btn:hover { background: #ffffff; box-shadow: 0 0 14px rgba(var(--blue-rgb), .18); }
body[data-plantilla="claro"] .dot { background: rgba(12, 44, 122, .18); }
body[data-plantilla="claro"] .slider__progress { background: rgba(12, 44, 122, .1); }
body[data-plantilla="claro"] .draw-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55));
    box-shadow: 0 16px 40px rgba(12, 44, 122, .08), 0 0 0 1px rgba(var(--blue-rgb), .06);
}
body[data-plantilla="claro"] .unit { background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 16px rgba(var(--blue-rgb), .06); }
body[data-plantilla="claro"] .unit b { color: var(--sky); text-shadow: none; }
body[data-plantilla="claro"] .bar,
body[data-plantilla="claro"] .slider__progress { background: rgba(12, 44, 122, .1); }
body[data-plantilla="claro"] .step { background: rgba(255, 255, 255, .7); }
body[data-plantilla="claro"] .step:hover { box-shadow: 0 14px 34px rgba(var(--blue-rgb), .12); }
body[data-plantilla="claro"] .orb { opacity: .12; }

/* view/tickets.php y view/mis-tickets.php: las mismas superficies "vidrio
   oscuro" (rgba(3,11,36,...)) y bordes blancos translúcidos no funcionan
   sobre fondo claro, así que se ajustan aparte. */
body[data-plantilla="claro"] .tk-tag { color: var(--sky); background: rgba(12, 87, 211, .08); border-color: rgba(12, 44, 122, .25); }
body[data-plantilla="claro"] .tk-step,
body[data-plantilla="claro"] .tk-summary,
body[data-plantilla="claro"] .mt-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .65));
    box-shadow: 0 16px 40px rgba(12, 44, 122, .08);
}
body[data-plantilla="claro"] .choice__body { background: rgba(255, 255, 255, .8); }
body[data-plantilla="claro"] .choice input:checked + .choice__body {
    background: linear-gradient(160deg, rgba(12, 87, 211, .14), rgba(12, 87, 211, .06));
}
body[data-plantilla="claro"] .choice__check { border-color: rgba(12, 44, 122, .3); }
body[data-plantilla="claro"] .choice__check::after { border-color: var(--sky); }
body[data-plantilla="claro"] .pay__icon,
body[data-plantilla="claro"] .input-group__addon { background: rgba(12, 87, 211, .06); }
body[data-plantilla="claro"] .input,
body[data-plantilla="claro"] .segmented { background: rgba(255, 255, 255, .85); color: var(--text); }
body[data-plantilla="claro"] .input:focus { background: #ffffff; }
body[data-plantilla="claro"] .input::placeholder { color: rgba(91, 107, 140, .55); }
body[data-plantilla="claro"] .segmented span { color: var(--muted); }
/* Estas sí van sobre una píldora azul sólida (--grad-btn): el texto blanco
   se queda. El total y el código de ticket, en cambio, van sobre superficies
   claras -no queden como texto blanco invisible-, así que usan el color oscuro. */
body[data-plantilla="claro"] .segmented input:checked + span { color: #ffffff; }
body[data-plantilla="claro"] .tk-total,
body[data-plantilla="claro"] .mt-card__code span { color: var(--sky); text-shadow: none; }
body[data-plantilla="claro"] .tk-swap a:hover { color: var(--blue-bright); }
body[data-plantilla="claro"] .sorteo__price,
body[data-plantilla="claro"] .tk-summary__name { color: var(--text); }

/* Cantidad, promociones y desglose de view/tickets.php sobre fondo claro */
body[data-plantilla="claro"] .tk-promo,
body[data-plantilla="claro"] .tk-breakdown { background: rgba(255, 255, 255, .8); border-color: rgba(12, 44, 122, .2); }
body[data-plantilla="claro"] .tk-promo.is-aplicada { background: linear-gradient(160deg, rgba(12, 87, 211, .14), rgba(12, 87, 211, .06)); border-color: var(--blue-bright); }
body[data-plantilla="claro"] .tk-promo__save,
body[data-plantilla="claro"] .tk-breakdown__save { color: #13875a; }

/* Mis tickets: encabezado de resultados y tarjetas con forma de ticket sobre fondo claro */
body[data-plantilla="claro"] .mt-found__head,
body[data-plantilla="claro"] .mt-ticket { background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7)); box-shadow: 0 14px 34px rgba(12, 44, 122, .08); }
body[data-plantilla="claro"] .mt-found__who strong,
body[data-plantilla="claro"] .mt-ticket__code { color: var(--sky); text-shadow: none; }
/* Insignias de estado legibles sobre fondo claro (el amarillo/verde/rosa claro se perdía) */
body[data-plantilla="claro"] .mt-badge--pendiente { color: #8a5a00; background: rgba(255, 190, 60, .2); }
body[data-plantilla="claro"] .mt-badge--pagado    { color: #0f7a45; background: rgba(58, 222, 140, .18); }
body[data-plantilla="claro"] .mt-badge--anulado   { color: #b3203e; background: rgba(255, 77, 109, .14); }
/* Datos del método de pago elegido (tickets.php) sobre fondo claro */
body[data-plantilla="claro"] .mp-detalle { background: rgba(255, 255, 255, .85); border-color: rgba(12, 87, 211, .3); }
body[data-plantilla="claro"] .mp-copiar { color: var(--text); background: rgba(12, 87, 211, .08); }