/*
   Identidad visual de Suerte Loca.

   Este archivo es el único lugar donde se escribe un color. El cliente ya avisó que el logotipo y
   la mascota pueden cambiar, así que cambiar la marca debe costar diez minutos: reemplazar las dos
   imágenes de wwwroot/img y editar las variables de aquí abajo. Si un color literal se cuela en
   una vista, ese cambio se convierte en buscar y reemplazar por todo el proyecto, y siempre se
   escapa uno.

   Los valores salen de la maqueta de referencia, no están aproximados.
*/

/* ── Tipografías, servidas desde este mismo sitio ──────────────────────────────────────────────
   No se cargan desde Google Fonts a propósito: el sitio es para teléfonos con datos móviles y una
   petición a un tercero agrega latencia justo en el peor momento, además de depender de que ese
   servicio sea alcanzable. Las dos familias son fuentes variables, así que un archivo por familia
   cubre todos los pesos.
   font-display: swap deja el texto legible con la fuente del sistema mientras la real llega.       */

@font-face {
    font-family: 'Nunito';
    src: url('/fonts/Nunito-variable.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Baloo 2';
    src: url('/fonts/Baloo2-variable.woff2') format('woff2-variations');
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Paleta ─────────────────────────────────────────────────────────────────────────────── */
    --sl-fondo: #0d1f12;
    --sl-verde-oscuro: #0A2010;
    --sl-verde: #1B7C2E;
    --sl-verde-brillante: #2DAA45;
    --sl-verde-claro: #9FD2AB;
    --sl-verde-claro-apagado: #7FB88C;
    --sl-dorado: #D4960A;
    --sl-dorado-claro: #FFD966;
    --sl-dorado-mas-claro: #FFE066;
    --sl-gris-verdoso: #5A6B5E;
    --sl-gris-verdoso-claro: #8A978C;
    --sl-verde-palido: #E3F1E7;
    --sl-gris-casi-blanco: #F8F9FA;
    --sl-blanco: #FFFFFF;

    /* ── Degradados ─────────────────────────────────────────────────────────────────────────
       El dorado es la acción principal, la que lleva a comprar. El verde es para acentos y
       confirmaciones. No se usan al revés.                                                      */
    --sl-degradado-boton: linear-gradient(180deg, var(--sl-dorado-mas-claro), var(--sl-dorado));
    --sl-degradado-verde: linear-gradient(180deg, var(--sl-verde-brillante), var(--sl-verde));
    --sl-degradado-superficie: linear-gradient(180deg, #123018, #0c2212);
    --sl-degradado-encabezado: linear-gradient(180deg, #0a2010, #0d2614);

    /* ── Papeles de cada color ──────────────────────────────────────────────────────────────
       Nombrados por lo que hacen y no por lo que son, para que cambiar la marca no obligue a
       releer cada regla.                                                                        */
    --sl-texto: var(--sl-verde-oscuro);
    --sl-texto-suave: var(--sl-gris-verdoso);
    --sl-texto-tenue: var(--sl-gris-verdoso-claro);
    --sl-texto-sobre-oscuro: var(--sl-blanco);
    --sl-texto-suave-sobre-oscuro: var(--sl-verde-claro);
    --sl-superficie: var(--sl-blanco);
    --sl-superficie-suave: var(--sl-gris-casi-blanco);
    --sl-borde: #E6EBE7;
    --sl-borde-oscuro: rgba(159, 210, 171, 0.18);

    /* El fondo que atenúa la página detrás de una ventana. Es el verde oscuro de la marca con
       transparencia, no un gris cualquiera: lo de atrás se sigue reconociendo. */
    --sl-fondo-atenuado: rgba(10, 32, 16, 0.72);

    /* ── Tipografía ─────────────────────────────────────────────────────────────────────────── */
    --sl-fuente-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sl-fuente-titulo: 'Baloo 2', var(--sl-fuente-texto);

    /* ── Medidas ────────────────────────────────────────────────────────────────────────────── */
    --sl-radio-tarjeta: 16px;
    --sl-radio-control: 12px;
    --sl-radio-pastilla: 999px;
    --sl-columna-max: 560px;
    --sl-espacio: 16px;
    --sl-sombra-tarjeta: 0 1px 2px rgba(10, 32, 16, 0.06), 0 8px 24px rgba(10, 32, 16, 0.06);
    --sl-sombra-elegido: 0 0 0 4px rgba(255, 217, 102, 0.35);
}

/* ── Estructura ────────────────────────────────────────────────────────────────────────────────
   Móvil primero: el diseño base es el del teléfono y el escritorio es la adaptación.
   El fondo oscuro es lo que hace que en escritorio se vea intencional: una columna angosta sobre
   blanco parece una página a medio hacer; sobre el verde de la marca parece una aplicación dentro
   de su marco.                                                                                   */

/* Solo el sitio público lleva el fondo de la marca. El admin conserva el suyo: entra por el mismo
   layout pero queda fuera de esta tarea. */
body.sl-publico {
    background-color: var(--sl-fondo);
    color: var(--sl-texto);
    font-family: var(--sl-fuente-texto);
    -webkit-text-size-adjust: 100%;
}

.sl-columna {
    width: 100%;
    max-width: var(--sl-columna-max);
    margin-inline: auto;
    background-color: var(--sl-superficie-suave);
    min-height: 100vh;
}

/* En pantallas muy grandes se permite algo más de aire, pero nunca más de 640px: el diseño está
   pensado para teléfono y estirarlo lo rompe. */
@media (min-width: 1200px) {
    :root {
        --sl-columna-max: 640px;
    }
}

.sl-contenido {
    padding: var(--sl-espacio);
}

.sl-publico h1,
.sl-publico h2,
.sl-publico h3,
.sl-titulo,
.sl-cifra {
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    color: var(--sl-texto);
    letter-spacing: -0.01em;
}

.sl-cifra {
    font-variant-numeric: tabular-nums;
}

.sl-publico a {
    color: var(--sl-verde);
}

/* Nada debe requerir desplazamiento horizontal en ningún ancho. */
.sl-publico {
    overflow-x: hidden;
}

/* ── Encabezado ────────────────────────────────────────────────────────────────────────────── */

.sl-encabezado {
    background: var(--sl-degradado-encabezado);
    color: var(--sl-texto-sobre-oscuro);
    padding: 10px var(--sl-espacio);
}

.sl-encabezado__titulo {
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 16px;
    color: var(--sl-texto-sobre-oscuro);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-encabezado__volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sl-radio-control);
    background-color: rgba(159, 210, 171, 0.12);
    border: 1px solid var(--sl-borde-oscuro);
    color: var(--sl-texto-suave-sobre-oscuro);
    text-decoration: none;
    flex: none;
}

.sl-encabezado__volver:hover {
    color: var(--sl-texto-sobre-oscuro);
}

.sl-logo {
    display: block;
    height: auto;
}

/* ── Barra de pasos ────────────────────────────────────────────────────────────────────────────
   Es un indicador visual, no navegación: son div, no enlaces, y no permiten saltar pasos.        */

.sl-pasos {
    display: flex;
    gap: 6px;
    padding: 0 var(--sl-espacio) 10px;
    background: var(--sl-degradado-encabezado);
    margin: 0;
    list-style: none;
}

.sl-pasos__tramo {
    flex: 1;
    height: 5px;
    border-radius: var(--sl-radio-pastilla);
    background-color: rgba(159, 210, 171, 0.16);
}

.sl-pasos__tramo--hecho {
    background: var(--sl-degradado-boton);
}

.sl-pasos__etiqueta {
    color: var(--sl-texto-suave-sobre-oscuro);
    font-size: 12px;
    padding: 0 var(--sl-espacio) 10px;
    background: var(--sl-degradado-encabezado);
    margin: 0;
}

/* ── Superficies ───────────────────────────────────────────────────────────────────────────── */

.sl-tarjeta {
    background-color: var(--sl-superficie);
    border: 1px solid var(--sl-borde);
    border-radius: var(--sl-radio-tarjeta);
    box-shadow: var(--sl-sombra-tarjeta);
}

.sl-panel-oscuro {
    background: var(--sl-degradado-superficie);
    border: 1px solid var(--sl-borde-oscuro);
    border-radius: var(--sl-radio-tarjeta);
    color: var(--sl-texto-sobre-oscuro);
    overflow: hidden;
    position: relative;
}

.sl-panel-oscuro h1,
.sl-panel-oscuro h2,
.sl-panel-oscuro .sl-titulo,
.sl-panel-oscuro .sl-cifra {
    color: var(--sl-texto-sobre-oscuro);
}

.sl-texto-suave {
    color: var(--sl-texto-suave);
}

.sl-texto-tenue {
    color: var(--sl-texto-tenue);
}

.sl-sobre-oscuro-suave {
    color: var(--sl-texto-suave-sobre-oscuro);
}

.sl-paddy {
    height: auto;
    display: block;
}

/* ── Avisos ────────────────────────────────────────────────────────────────────────────────── */

.sl-aviso {
    border-radius: var(--sl-radio-control);
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid var(--sl-borde);
    background-color: var(--sl-superficie);
    color: var(--sl-texto-suave);
}

.sl-aviso--verde {
    background-color: var(--sl-verde-palido);
    border-color: rgba(27, 124, 46, 0.18);
    color: var(--sl-verde-oscuro);
}

.sl-aviso--dorado {
    background-color: #FFF7E0;
    border-color: rgba(212, 150, 10, 0.28);
    color: #6B4A00;
}

.sl-aviso--error {
    background-color: #FDECEC;
    border-color: rgba(176, 42, 42, 0.25);
    color: #8A1F1F;
}

.sl-aviso strong {
    color: inherit;
}

/* ── Insignias y fichas ────────────────────────────────────────────────────────────────────── */

.sl-insignia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--sl-radio-pastilla);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.sl-insignia--dorada {
    background: var(--sl-degradado-boton);
    color: var(--sl-verde-oscuro);
}

.sl-insignia--verde {
    background-color: var(--sl-verde-palido);
    color: var(--sl-verde);
}

/* Las combinaciones ya elegidas, como en la referencia: círculos numerados. */
.sl-ficha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 14px;
    flex: none;
}

.sl-ficha--dorada {
    background: var(--sl-degradado-boton);
    color: var(--sl-verde-oscuro);
}

.sl-ficha--verde {
    background: var(--sl-degradado-verde);
    color: var(--sl-blanco);
}

.sl-combinacion {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Botones ───────────────────────────────────────────────────────────────────────────────── */

.sl-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--sl-radio-control);
    padding: 14px 20px;
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    /* 44px es el mínimo cómodo para un dedo. */
    min-height: 48px;
}

.sl-boton--principal {
    background: var(--sl-degradado-boton);
    color: var(--sl-verde-oscuro);
    box-shadow: 0 6px 16px rgba(212, 150, 10, 0.28);
}

.sl-boton--principal:hover,
.sl-boton--principal:focus {
    color: var(--sl-verde-oscuro);
    filter: brightness(1.04);
}

.sl-boton--contorno {
    background-color: transparent;
    border: 1px solid var(--sl-borde);
    color: var(--sl-verde);
    width: auto;
    padding: 10px 16px;
    font-size: 15px;
    min-height: 44px;
}

.sl-boton--contorno:hover {
    background-color: var(--sl-verde-palido);
    color: var(--sl-verde);
}

.sl-boton:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ── Formularios ───────────────────────────────────────────────────────────────────────────── */

.sl-etiqueta {
    display: block;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--sl-texto);
}

.sl-campo {
    width: 100%;
    border: 1px solid var(--sl-borde);
    border-radius: var(--sl-radio-control);
    padding: 12px 14px;
    /* 16px o más: por debajo de eso iOS hace zoom al enfocar el campo. */
    font-size: 16px;
    font-family: inherit;
    color: var(--sl-texto);
    background-color: var(--sl-superficie);
    min-height: 48px;
}

.sl-campo:focus {
    outline: none;
    border-color: var(--sl-verde-brillante);
    box-shadow: 0 0 0 3px rgba(45, 170, 69, 0.18);
}

.sl-ayuda {
    font-size: 13px;
    color: var(--sl-texto-tenue);
    margin-top: 6px;
}

.sl-error {
    font-size: 13px;
    color: #8A1F1F;
    margin-top: 6px;
}

.sl-casilla {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.sl-casilla input {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    accent-color: var(--sl-verde);
    flex: none;
}

/* ── Cuadrícula de números ─────────────────────────────────────────────────────────────────── */

.sl-tablas {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* El desplazamiento entre tablas es horizontal a propósito y vive dentro de su contenedor;
       la página en sí nunca se desplaza de lado. */
    scrollbar-width: none;
    padding-bottom: 4px;
}

.sl-tablas::-webkit-scrollbar {
    display: none;
}

.sl-tabla {
    flex: 0 0 100%;
    scroll-snap-align: center;
    background-color: var(--sl-superficie);
    border: 1px solid var(--sl-borde);
    border-radius: var(--sl-radio-tarjeta);
    padding: 12px;
}

.sl-tabla__encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.sl-tabla__nombre {
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 15px;
    flex: none;
}

.sl-tabla__acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

.sl-tabla__acciones .sl-insignia {
    padding-inline: 8px;
    flex: none;
}

.sl-tabla__acciones .sl-boton--contorno {
    padding-inline: 8px;
    font-size: 13px;
    white-space: nowrap;
    flex: none;
}

.sl-numeros {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.sl-numero {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 0;
    background-color: #EDF1EE;
    color: var(--sl-texto-suave);
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    /* El diámetro lo decide la rejilla de seis columnas con aspect-ratio, no la letra: subir la
       fuente agranda el número dentro del mismo círculo. A 320px el círculo mide unos 39px y dos
       dígitos a 15px caben sin tocar el borde. */
    font-size: clamp(15px, 4.4vw, 19px);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-numero:hover:not(:disabled) {
    background-color: #E1E8E3;
}

.sl-numero--elegido {
    background: var(--sl-degradado-boton);
    color: var(--sl-verde-oscuro);
    box-shadow: var(--sl-sombra-elegido);
}

.sl-numero:disabled:not(.sl-numero--elegido) {
    opacity: 0.4;
    cursor: default;
}

.sl-numero--hueco {
    visibility: hidden;
}

/* El rebote al elegir un número. La clase la pone el guion sobre el botón que se acaba de tocar
   y se la quita al terminar: uno a la vez y solo al elegir, nunca al quitar ni al repintar. Una
   cuadrícula que se abre con sus seis números puestos no anima ninguno, que si no parece un
   error. Es un botón que se toca cuarenta veces seguidas en un paquete grande, así que discreto. */
.sl-numero--recien {
    animation: sl-elegir 170ms ease-out;
}

@keyframes sl-elegir {
    0% { transform: scale(1); }
    45% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

/* Quien pide menos movimiento no ve ninguno. El guion además ni siquiera pone la clase. */
@media (prefers-reduced-motion: reduce) {
    .sl-numero--recien {
        animation: none;
    }
}

.sl-puntos {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.sl-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #D3DCD6;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.sl-punto--activo {
    width: 20px;
    border-radius: var(--sl-radio-pastilla);
    background: var(--sl-degradado-boton);
}

/* ── Listas ────────────────────────────────────────────────────────────────────────────────── */

.sl-renglon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--sl-borde);
}

.sl-renglon:last-child {
    border-bottom: 0;
}

.sl-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--sl-verde-palido);
    border-radius: var(--sl-radio-control);
    padding: 12px 14px;
    margin-top: 8px;
}

.sl-total__cifra {
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 24px;
    color: var(--sl-verde);
}

/* ── Pie ───────────────────────────────────────────────────────────────────────────────────── */

.sl-pie {
    background: var(--sl-degradado-encabezado);
    color: var(--sl-texto-suave-sobre-oscuro);
    padding: 20px var(--sl-espacio);
    font-size: 13px;
}

.sl-pie a {
    color: var(--sl-verde-claro);
}

/* ── Pantalla de selección de combinaciones ─────────────────────────────────────────────────
   Los tres pasos del checkout. Todo va en píxeles y no en rem a propósito: site.css baja el
   tamaño base de html a 14px por debajo de 768px, y en rem cada control encogería justo en el
   teléfono, que es donde se compra. site.css no se toca porque también sirve al admin.         */

/* Con el guion activo desaparece el andamiaje del formulario sin guion: el carrusel de tablas
   deja de ser carrusel y se edita una combinación a la vez. */
.sl-flujo--activo .sl-tabla {
    flex: none;
    width: 100%;
}

/* ── Paso 1 — Cómo eliges ───────────────────────────────────────────────────────────────────
   Las dos opciones son del mismo tamaño y ninguna viene marcada: es una elección, no un
   predeterminado con una alternativa.                                                          */

.sl-caminos {
    display: grid;
    gap: 12px;
}

.sl-camino {
    display: block;
    width: 100%;
    text-align: left;
    background-color: var(--sl-superficie);
    border: 2px solid var(--sl-borde);
    border-radius: var(--sl-radio-tarjeta);
    padding: 16px;
    cursor: pointer;
    font-family: inherit;
    color: var(--sl-texto);
    box-shadow: var(--sl-sombra-tarjeta);
}

.sl-camino:hover,
.sl-camino:focus-visible {
    border-color: var(--sl-verde-brillante);
    outline: none;
}

.sl-camino__titulo {
    display: block;
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
}

.sl-camino__texto {
    display: block;
    font-size: 14px;
    color: var(--sl-texto-suave);
}

/* ── La animación ───────────────────────────────────────────────────────────────────────────
   Deliberadamente básica: el dueño del proyecto está preparando las suyas y estas se
   sustituyen. Una sola animación general, no una por combinación: con un paquete de cien,
   cien filas animándose es inservible.                                                         */

.sl-sorteando {
    background: var(--sl-degradado-superficie);
    border-radius: var(--sl-radio-tarjeta);
    padding: 28px 16px;
    text-align: center;
}

.sl-sorteando__titulo {
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 17px;
    color: var(--sl-texto-sobre-oscuro);
    margin-bottom: 16px;
}

.sl-sorteando__bolas {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.sl-sorteando__bola {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sl-degradado-boton);
    color: var(--sl-verde-oscuro);
    font-family: var(--sl-fuente-titulo);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sl-latido 0.6s ease-in-out infinite alternate;
}

.sl-sorteando__bola:nth-child(2) { animation-delay: 0.08s; }
.sl-sorteando__bola:nth-child(3) { animation-delay: 0.16s; }
.sl-sorteando__bola:nth-child(4) { animation-delay: 0.24s; }
.sl-sorteando__bola:nth-child(5) { animation-delay: 0.32s; }
.sl-sorteando__bola:nth-child(6) { animation-delay: 0.40s; }

@keyframes sl-latido {
    from { transform: translateY(0); }
    to { transform: translateY(-6px); }
}

/* Quien pide menos movimiento no ve ninguno. El guion además se salta la espera entera. */
@media (prefers-reduced-motion: reduce) {
    .sl-sorteando__bola {
        animation: none;
    }
}

.sl-enlace {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--sl-verde-claro);
    text-decoration: underline;
    cursor: pointer;
}

/* Sobre fondo claro el enlace necesita el verde oscuro para contrastar. */
.sl-caja__acciones .sl-enlace,
[data-caja-envoltura] .sl-enlace,
[data-acciones-manual] .sl-enlace {
    color: var(--sl-verde);
}

.sl-acciones {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

/* ── La ventana ─────────────────────────────────────────────────────────────────────────────
   Solo para lo que bloquea. Es la superficie oscura de la marca, la misma del panel del sorteo,
   para que se lea como parte de la aplicación y no como una alerta del navegador.              */

.sl-ventana {
    width: min(92vw, 380px);
    padding: 20px;
    border: 1px solid var(--sl-borde-oscuro);
    border-radius: var(--sl-radio-tarjeta);
    background: var(--sl-degradado-superficie);
    color: var(--sl-texto-sobre-oscuro);
    box-shadow: var(--sl-sombra-tarjeta);
}

.sl-ventana::backdrop {
    background-color: var(--sl-fondo-atenuado);
}

/* Con la clase sola no basta: .sl-publico h2 pinta los títulos del color oscuro del texto, que
   sobre esta superficie no se lee. */
.sl-ventana .sl-ventana__titulo {
    font-family: var(--sl-fuente-titulo);
    font-weight: 800;
    font-size: 19px;
    color: var(--sl-texto-sobre-oscuro);
    margin: 0 0 12px;
}

/* Las mismas fichas doradas de la pantalla: que vea de cuál se habla sin buscarla detrás. */
.sl-ventana__numeros {
    justify-content: center;
    margin-bottom: 12px;
}

.sl-ventana__motivo {
    font-size: 14px;
    color: var(--sl-texto-suave-sobre-oscuro);
    margin: 0 0 16px;
}

.sl-ventana__acciones {
    display: grid;
    gap: 10px;
}

/* Sobre el fondo oscuro, el botón de contorno necesita su propio borde y su propio texto. */
.sl-ventana__acciones .sl-boton--contorno {
    border-color: var(--sl-borde-oscuro);
    background: transparent;
    color: var(--sl-texto-suave-sobre-oscuro);
}

.sl-ventana__acciones .sl-boton--contorno:hover {
    background-color: var(--sl-verde-oscuro);
    color: var(--sl-texto-sobre-oscuro);
}

.sl-ventana[open] {
    animation: sl-ventana-entra 140ms ease-out;
}

@keyframes sl-ventana-entra {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Quien pide menos movimiento la ve aparecer y ya. */
@media (prefers-reduced-motion: reduce) {
    .sl-ventana[open] {
        animation: none;
    }
}

/* ── La caja de seleccionadas ───────────────────────────────────────────────────────────── */

.sl-caja {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.sl-caja__renglon {
    background-color: var(--sl-superficie);
    border: 1px solid var(--sl-borde);
    border-radius: var(--sl-radio-tarjeta);
    padding: 12px;
}

.sl-caja__renglon--conflicto {
    border-color: #8A1F1F;
}

.sl-caja__renglon--pendiente {
    border-style: dashed;
}

.sl-caja__cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sl-caja__indice {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--sl-superficie-suave);
    color: var(--sl-texto-suave);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.sl-caja__origen {
    font-size: 13px;
    color: var(--sl-texto-tenue);
}

.sl-caja__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.sl-caja__conflicto {
    font-size: 13px;
    color: #8A1F1F;
    margin: 8px 0 0;
}

.sl-caja__pendiente {
    font-size: 14px;
    color: var(--sl-texto-suave);
    margin: 0;
}

.sl-boton--chico {
    padding: 8px 14px;
    font-size: 14px;
    min-height: 40px;
    width: auto;
}