/* ==========================================================
   Participar.css  (UNIFICADO)
   - globals.css + styleguide.css + style.css + parches WebForms
   ========================================================== */

/* ========== [1] globals.css (reset + fonts) ========== */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
/* Nota: en el original venía un selector "-" inválido; lo corregimos a "*" */
* {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
}

button:focus-visible {
    outline: 2px solid #4a90e2 !important;
    outline: -webkit-focus-ring-color auto 5px !important;
}

a {
    text-decoration: none;
            font-family: "Inter", Helvetica!important;
}

/* @FONTWARNING (original): Inter / Inter-Medium / Plus Jakarta Sans */
@font-face {
    font-family: "Inter";
    src: local("Inter");
}

@font-face {
    font-family: "Inter-Medium";
    src: local("Inter-Medium");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: local("Plus Jakarta Sans");
}

/* ========== [2] styleguide.css (variables design system) ========== */
:root {
    --base: rgba(0, 0, 0, 1);
    --surface: rgba(15, 15, 16, 1);
    --card: rgba(21, 21, 23, 1);
    --texto-primari: rgba(255, 255, 255, 1);
    --texto-secundario: rgba(179, 179, 179, 1);
    --texto-inabilitado: rgba(107, 114, 128, 1);
    --borders: rgba(38, 38, 38, 1);
    --resaltat: rgba(255, 199, 0, 1);
    --h1-font-family: "Inter", Helvetica;
    --h1-font-weight: 700;
    --h1-font-size: 30px;
    --h1-letter-spacing: 0.0900000036px;
    --h1-line-height: normal;
    --h1-font-style: normal;
    --h2-font-family: "Inter", Helvetica;
    --h2-font-weight: 700;
    --h2-font-size: 18px;
    --h2-letter-spacing: 0.0540000021px;
    --h2-line-height: 23px;
    --h2-font-style: normal;
    --h3-font-family: "Inter", Helvetica;
    --h3-font-weight: 700;
    --h3-font-size: 24px;
    --h3-letter-spacing: 0.0720000029px;
    --h3-line-height: normal;
    --h3-font-style: normal;
    --body-font-family: "Inter", Helvetica;
    --body-font-weight: 600;
    --body-font-size: 14px;
    --body-letter-spacing: 0.0420000017px;
    --body-line-height: normal;
    --body-font-style: normal;
    --small-font-family: "Inter", Helvetica;
    --small-font-weight: 300;
    --small-font-size: 13px;
    --small-letter-spacing: 0.0390000015px;
    --small-line-height: normal;
    --small-font-style: normal;
    --bot-n-font-family: "Inter", Helvetica;
    --bot-n-font-weight: 700;
    --bot-n-font-size: 16px;
    --bot-n-letter-spacing: 0.0480000019px;
    --bot-n-line-height: normal;
    --bot-n-font-style: normal;
    --copyright-font-family: "Inter", Helvetica;
    --copyright-font-weight: 300;
    --copyright-font-size: 11px;
    --copyright-letter-spacing: 0.0330000013px;
    --copyright-line-height: normal;
    --copyright-font-style: normal;
    --heading-h1-font-family: "Inter", Helvetica;
    --heading-h1-font-weight: 700;
    --heading-h1-font-size: 32px;
    --heading-h1-letter-spacing: -0.64px;
    --heading-h1-line-height: 130%;
    --heading-h1-font-style: normal;
    --body-small-medium-font-family: "Inter", Helvetica;
    --body-small-medium-font-weight: 500;
    --body-small-medium-font-size: 14px;
    --body-small-medium-letter-spacing: -0.14px;
    --body-small-medium-line-height: 140%;
    --body-small-medium-font-style: normal;
    --heading-h3-font-family: "Inter", Helvetica;
    --heading-h3-font-weight: 700;
    --heading-h3-font-size: 18px;
    --heading-h3-letter-spacing: -0.2px;
    --heading-h3-line-height: 26px;
    --heading-h3-font-style: normal;
    --body-small-font-family: "Inter", Helvetica;
    --body-small-font-weight: 400;
    --body-small-font-size: 14px;
    --body-small-letter-spacing: 0px;
    --body-small-line-height: 20px;
    --body-small-font-style: normal;
    --brand-neutral-nr11: rgba(11, 11, 11, 1);
    --brand-neutral-nr01: rgba(255, 255, 255, 1);
    --brand-neutral-nr10: rgba(35, 35, 35, 1);
    --alias-textcolor-default: var(--brand-neutral-nr11);
    --alias-bgcolor-light: var(--brand-neutral-nr01);
    --spacing-spacing-xxxs: 2px;
    --spacing-spacing-xs: 6px;
    --spacing-spacing-smd: 12px;
    --spacing-spacing-lg: 24px;
    --mode-stroke: rgba(237, 241, 243, 1);
    --mode-headline: rgba(255, 255, 255, 1);
    --brand-radi-xl: 16px;
    --radii-radi-mlg: 8px;
}

/* Opcional: modos (si usas data-attributes) */
[data-alias-mode="dark"] {
    --alias-textcolor-default: var(--brand-neutral-nr01);
    --alias-bgcolor-light: var(--brand-neutral-nr10);
}

[data-mode-mode="dark"] {
    --mode-headline: rgba(255, 255, 255, 1);
    --mode-stroke: rgba(26, 28, 30, 1);
}

/* ========== [3] style.css (solo el bloque de PARTICIPAR) ========== */
.pantalla-participar {
    width: 100%;
    max-width: 1200px; /* mobile-first */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    color: #111111;
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: auto; /* A) Si tu master ya centra contenido, quitamos tamaños/posiciones rígidas */
    font-weight: 600;
}


    .pantalla-participar .group {
        position: fixed;
        width: 322px;
        z-index: 3;
    }

    .pantalla-participar .arrow-narrow-left {
        z-index: 2;
        margin-left: 28px;
        width: 22px;
        height: 23px;
        margin-top: 87px;
        display: flex;
    }

    .pantalla-participar .vector {
        flex: 1;
        width: 12.83px;
    }

    /* Neutralizamos layout fijo del diseño original */
    .pantalla-participar .div,
    .pantalla-participar .input {
        position: relative;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        margin: 0;
        background-color: #ffffff;
        color: #111111;
        border-radius: 16px;
        overflow: hidden; /* importante para que no sobresalga nada */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    }

    .pantalla-participar .ellipse {
        display: none;
    }


    .pantalla-participar .text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* 🔥 NO centrar vertical */
        gap: 16px;
        height: auto; /* 🔥 quitar altura fija */
        margin-bottom: 32px; /* separación con el formulario */
    }


    .pantalla-participar .text-wrapper-7 {
        position: relative;
        display: flex;
        align-items: center;
        width: fit-content;
        font-family: "Inter", Helvetica;
        font-weight: var(--heading-h1-font-weight);
        color: var(--mode-headline);
        font-size: var(--heading-h1-font-size);
        letter-spacing: var(--heading-h1-letter-spacing);
        line-height: var(--heading-h1-line-height);
        white-space: nowrap;
        font-style: var(--heading-h1-font-style);
        color: #111111;
        margin-top: 24px;
    }


    .pantalla-participar .text-wrapper-8 {
        display: block;
        text-align: center;
        font-family: "Inter-Medium", Helvetica;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.6;
        letter-spacing: -0.12px;
        color: #374151;
        margin: 0; /* 🔑 el espaciado lo controla .text */
    }

        .pantalla-participar .text-wrapper-8 br {
            display: block;
            margin-bottom: 4px;
        }

    .pantalla-participar .field {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        position: relative;
        align-self: stretch;
        width: 100%;
        padding-bottom: 24px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .pantalla-participar .input-field {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .input-field-2 {
        display: flex;
        flex-direction: column;
        height: 55px;
        align-items: flex-start;
        gap: 2px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .input-area {
        height: 46px;
        align-items: center;
        gap: 10px;
        padding: 27px 14px;
        border-radius: 10px;
        overflow: hidden;
        border-color: var(--mode-stroke);
        box-shadow: 0px 1px 2px #e4e5e73d;
        display: flex;
        position: relative;
        align-self: stretch;
        width: 100%;
        background-color: #ffffff;
        border: 1px solid #000;
    }
    a.legal-link {color:#000}
    .text-2{ font-family: "Inter", Helvetica; text-align: center;  line-height: 15px; font-weight: 400}

    .pantalla-participar .frame-7 {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        flex: 1;
        flex-grow: 1;
        margin-top: -14.5px;
        margin-bottom: -14.5px;
    }

    .pantalla-participar .yourname-gmail-com {
        position: relative;
        width: 207px;
        height: 21px;
        margin-top: -1px;
        font-family: "Inter", Helvetica;
        font-weight: var(--body-small-medium-font-weight);
        color: var(--texto-secundario);
        font-size: var(--body-small-medium-font-size);
        letter-spacing: var(--body-small-medium-letter-spacing);
        line-height: var(--body-small-medium-line-height);
        white-space: nowrap;
        color: #111111;
    }
    /* En el original, input-native estaba pensado como “invisible overlay”.
   Lo ajustaremos en los parches. */
    .pantalla-participar .input-native {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        border: none;
        background: transparent;
        background-color: rgba(0, 0, 0, 0.04); /* sombreado suave */
        padding: 6px 8px;
        border-radius: 6px;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .pantalla-participar .link {
        display: flex;
        height: 20px;
        align-items: center;
        justify-content: space-around;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .remember {
        display: flex;
        align-items: center;
        gap: 5px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-participar .player-stop {
        width: 19px;
        height: 19px;
    }

    .pantalla-participar .text-wrapper-9 {
        font-family: "Inter", Helvetica;
        font-weight: var(--small-font-weight);
        color: var(--texto-primari);
        font-size: var(--small-font-size);
    }

    .pantalla-participar .remember-wrapper {
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-around;
        gap: 16px;
        position: relative;
        align-self: stretch;
        width: 100%;
    }

    .pantalla-participar .remember-2 {
        displaLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia nisi eget neque tincidunt dapibus. Nam eget posuere ipsum, in efficitur neque. Aenean nec porttitor purus. Nunc varius, dui at feugiat porttitor, dolor sapien rhoncus tortor, sit amet elementum justo sem elementum augue. Vestibulum pulvinar lacus vitae massa hendrerit posuere. Proin et leo ipsum. Proin tempor elit in placerat rhoncus.

Fusce ac molestie nulla. Aenean imperdiet, nunc id suscipit fringilla, nisl odio lacinia ipsum, at consequat neque lorem sed neque. Nam et felis sit amet libero pharetra ullamcorper nec in sapien. Etiam luctus dolor vel quam feugiat, in pulvinar eros ultrices. In sapien nulla, fermentum in imperdiet et, laoreet vel nulla. Sed in tincidunt ligula. Nam convallis purus ut sagittis convallis. Praesent in risus commodo, consectetur mauris nec, euismod nisi. Mauris sit amet lacus vel augue cursus tempus non ac metus. Donec feugiat, diam ut eleifend mattis, turpis elit auctor libero, varius fringilla enim est et nisi. Vestibulum ultrices non arcu quis imperdiet. Proin faucibus, quam et feugiat lacinia, metus eros interdum massa, quis finibus arcu tortor in est. Nullam suscipit volutpat fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Sed sodales, tortor in viverra aliquet, ligula lectus facilisis purus, vitae fringilla arcu purus sit amet massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras aliquet et mi at vestibulum. Aenean a efficitur lorem, posuere mattis turpis. In scelerisque sit amet turpis accumsan convallis. Ut non diam eu tortor commodo semper. Fusce rhoncus leo vel urna laoreet condimentum. Cras dignissim enim vel tellus dictum sodales. Phasellus ac facilisis orci, feugiat ultricies arcu. Sed fermentum nisl nec metus venenatis malesuada.

Nam nisl ex, pellentesque sed vehicula in, luctus non nibh. Ut ornare dapibus feugiat. Donec ut rhoncus magna, vitae volutpat elit. Nunc congue porta velit at blandit. Aenean vel diam nulla. Morbi ornare volutpat elit ac iaculis. Aliquam ac augue imperdiet leo convallis vulputate varius et eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales placerat erat, quis pulvinar dui congue ac. Vivamus tristique risus libero, ut condimentum mauris maximus sed. Ut faucibus neque non dictum molestie. Curabitur fringilla finibus finibus. Pellentesque sit amet erat ornare, consectetur lacus eget, pretium mi. Morbi finibus blandit quam, eu bibendum lectus pretium quis. Quisque fringilla, odio vel dictum condimentum, lacus tellus suscipit velit, eget vestibulum urna odio quis lorem.y: flex;
        align-items: flex-start;
        gap: 5px;
        position: relative;
        flex: 1;
        flex-grow: 1;
    }

    .pantalla-participar .text-wrapper-10 {
        width: 241px;
        font-family: "Inter", Helvetica;
        font-weight: var(--small-font-weight);
        color: var(--texto-primari);
        font-size: var(--small-font-size);
    }

    .pantalla-participar .tiquet {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: auto;
        align-items: flex-start;
        gap: 16px;
        padding: 21px 21px 11px 25px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        border-radius: var(--brand-radi-xl);
    }

    .pantalla-participar .h-captcha {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    .pantalla-participar #fileSelected {
        margin-left: auto;
        margin-right: auto;
    }

    .pantalla-participar .title-section {
        font-family: "Inter", Helvetica;
        font-weight: var(--heading-h3-font-weight);
        color: #111111;
        font-size: var(--heading-h3-font-size);
    }

    .pantalla-participar .title-section-2 {
        font-family: "Inter", Helvetica;
        font-weight: var(--copyright-font-weight);
        color:  #111111;
        font-size: var(--copyright-font-size);
    }

    .pantalla-participar .upload-drag-upload {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: var(--spacing-spacing-lg);
        position: relative;
        align-self: stretch;
        width: 100%;
        background-color: #f9fafb;
        border: 1px dashed #d1d5db;
        border-radius: var(--radii-radi-mlg);
    }

    .pantalla-participar .drag-your-file-s-or,
    .pantalla-participar .jpg-png-or-svg {
        color: #111111;
    }


    .pantalla-participar .file-input-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    .pantalla-participar .button {
        all: unset;
        box-sizing: border-box;
        display: flex;
        height: 48px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 24px;
        position: relative;
        align-self: stretch;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        border: none;
        box-shadow: 0px 0px 0px 1px #585858, 0px 1px 2px #575757;
        background-color: #ffc700;
        color: #111111;
        margin-top: 12px;
        max-width: 320px; /* tamaño cómodo */        
        margin: 16px auto 0; /* centrado horizontal */
    }

    .pantalla-participar .label-text {
        font-family: "Inter", Helvetica;
        font-weight: var(--bot-n-font-weight);
        color: var(--base);
        font-size: var(--bot-n-font-size);
    }

    /* .div (en el diseño venía width:390px + height fija).   Lo hacemos responsive y centrado. */
        .pantalla-participar .div {
            width: 100%;
            max-width: 520px;
            height: auto;
            margin: 24px auto 0;
            position: relative;
            margin-left: auto;
        }
        /* .input (en el diseño venía position:absolute).
   En WebForms mejor normal flow. */
        .pantalla-participar .input {
                padding: 30px;
            position: relative;
            top: auto;
            left: auto;
            width: 100%;
            height: auto;
        }
        /* B) Mostrar inputs reales (en el original estaban opacity:0) */
        .pantalla-participar .input-area {
            padding: 12px 14px;
            height: auto;
            background-color: #ffffff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
            transition: box-shadow 0.2s ease, background-color 0.2s ease;
            color: #111111; /* negro legible */
        }
            /* Hover: indica que es interactivo */
            .pantalla-participar .input-area:hover {
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.14);
            }

            /* Focus: campo activo (muy importante) */
            .pantalla-participar .input-area:focus-within {
                border-color: #ffc700;
                box-shadow: 0 0 0 2px rgba(255, 199, 0, 0.35);
                inset: 0 0 0 1px rgba(255, 199, 0, 0.9);
                font-weight: 600;
                color: #000000;
            }
                
            /* Texto del label */
            .pantalla-participar .input-area .yourname-gmail-com {
                color: #111111; /* negro legible */
            }

        .pantalla-participar .frame-7 {
            margin: 0;
            align-items: center;
        }
        /* En WebForms queremos el TextBox visible */
    .pantalla-participar .input-native {
        position: static;
        inset: auto;
        opacity: 1;
        height: 22px;
        width: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: #6b7280; /* gris medio */
        font-family: "Inter", Helvetica;
        font-size: 14px;
    }
            /* Hover: indica claramente que se puede escribir */
            .pantalla-participar .input-native:hover {
                background-color: rgba(0, 0, 0, 0.06);
            }

            /* Focus: el usuario está escribiendo AQUÍ */
            .pantalla-participar .input-native:focus {
                background-color: #ffffff;
                box-shadow: 0 0 0 2px rgba(255, 199, 0, 0.45); /* amarillo Celsius */
            }
        /* Ajuste de label para que no “coma” demasiado ancho */
        .pantalla-participar .yourname-gmail-com {
            width: 120px;
            min-width: 120px;
            cursor: default;
        }
        /* C) asp:Button renderiza como <input>, y "all:unset" puede romperlo.
      Damos estilo específico a input.button */
        .pantalla-participar input.button {
            all: unset;
            box-sizing: border-box;
            display: flex;
            height: 48px;
            align-items: center;
            justify-content: center;
            padding: 10px 24px;
            width: 100%;
            background-color: var(--resaltat);
            border-radius: 10px;
            cursor: pointer;
            text-align: center;
            font-family:"Inter", Helvetica;
            font-weight: var(--bot-n-font-weight);
            font-size: var(--bot-n-font-size);
            color: var(--base);
        }
        /* D) Mensajes de validación coherentes */
        .pantalla-participar .val-error {
            color: #b00020;
            font-size: 12px;
            margin-top: 4px;
            display: block;
        }

        .pantalla-participar .vs-summary {
            background-color: #fef2f2;
            border: 1px solid #fecaca;
            color: #7f1d1d;
            padding: 10px 12px;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        /* E) Mejoras de accesibilidad visual */
        .pantalla-participar .input-area:focus-within {
            border-color: rgba(255,199,0,.85);
            box-shadow: 0 0 0 2px rgba(255,199,0,.18);
        }
    /* ==========================================================
   INTEGRACIÓN CON EL MASTER
   page-wrapper es el contenedor real de la página
   ========================================================== */

    .page-wrapper {
        width: 100%;
        min-height: 100vh;
        display: flex;
        justify-content: center; /* centra horizontal */
        padding: 16px; /* margen lateral en móvil */
        box-sizing: border-box;
        background-color: var(--base);
    }

/* ==========================================================
   TÍTULO PRINCIPAL (PARTICIPAR)
   ========================================================== */

.pantalla-participar .text-wrapper-7 {
    color: #111111; /* negro legible sobre fondo claro */
}
/* ==========================================================
   MEDIA QUERIES – RESPONSIVE
   ========================================================== */



/* 📱 Tablet */
@media (min-width: 768px) {

    .page-wrapper {
        padding: 32px;
    }

    .pantalla-participar {
        max-width: 520px;
    }
}

/* 🖥️ Desktop */
@media (min-width: 1024px) {

    .page-wrapper {
        padding: 48px 0;
    }

    .pantalla-participar {
        max-width: 600px;
    }

        .pantalla-participar .input-area {
            padding: 14px 16px;
        }
}


/* -------------------------
   FEEDBACK ARCHIVO
   ------------------------- */
.pantalla-participar .file-selected {
    background-color: rgba(0, 160, 80, 0.12);
    border: 1px solid rgba(0, 160, 80, 0.35);
}

.pantalla-participar .file-name {
    color: #111111;
}

/* ==========================================================
   MENSAJES GENERALES (lblMessage)
   ========================================================== */

.pantalla-participar .form-message {
    display: block;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

    /* Estados */
    .pantalla-participar .form-message.success {
        background-color: rgba(0, 160, 80, 0.12);
        border: 1px solid rgba(0, 160, 80, 0.4);
        color: #00a050;
    }

    .pantalla-participar .form-message.error {
        background-color: rgba(176, 0, 32, 0.10);
        border: 1px solid rgba(176, 0, 32, 0.35);
        color: #b00020;
    }

    .pantalla-participar .form-message.info {
        background-color: rgba(255, 199, 0, 0.12);
        border: 1px solid rgba(255, 199, 0, 0.45);
        color: #3a2c00;
    }

/* ==========================================================
   CHECKBOXES CLICABLES (WebForms)
   ========================================================== */
/* ==========================================================
   FIX CHECKBOX WEBFORMS (clicable + estilo custom)
   Pegar AL FINAL de Participar.css
   ========================================================== */

.pantalla-participar .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 6px 0;
    font-size: 14px;
}

/* Oculto visual pero accesible (NO display:none) */
.pantalla-participar .player-stop-checkbox input,
.pantalla-participar input.player-stop-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Asegura que el label sea clicable */
.pantalla-participar .remember,
.pantalla-participar .remember-2 {
    cursor: pointer;
}

/* Cambia el icono cuando está marcado */
.pantalla-participar input[type="checkbox"]:checked + label img.player-stop {
    content: url("../img/checkbox-on.svg");
}

.pantalla-participar input[type="checkbox"] + label img.player-stop {
    content: url("../img/checkbox-off.svg");
}




/* En WebForms, el CssClass del CheckBox suele ir al <span> contenedor */
.pantalla-participar .wf-check {
    display: inline-flex;
    align-items: flex-start;
}

    /* Ocultamos el input nativo, pero sigue accesible */
    .pantalla-participar .wf-check input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    /* Estilizamos el label que WebForms genera junto al input */
    .pantalla-participar .wf-check label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
        color: #111111;
        font-family: "Inter", Helvetica;
        font-weight: var(--small-font-weight);
        font-size: var(--small-font-size);
        line-height: 1.25;
        user-select: none;
    }

        /* Caja */
        .pantalla-participar .wf-check label::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 18px;
            height: 18px;
            border-radius: 4px;
            background-color: #ffffff;
            border: 1px solid #9ca3af;
        }

    /* Estado marcado */
    .pantalla-participar .wf-check input[type="checkbox"]:checked + label::before {
        background-color: #ffc700;
        border-color: #ffc700;
    }

    /* “tick” dibujado */
    .pantalla-participar .wf-check input[type="checkbox"]:checked + label::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 5px;
        width: 6px;
        height: 10px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    /* Focus accesible */
    .pantalla-participar .wf-check input[type="checkbox"]:focus + label::before {
        box-shadow: 0 0 0 3px rgba(255,199,0,.25);
    }

.pantalla-participar .wf-legal .legal-sep {
    font-weight: 400; /* normal */
}

/* Legal: permitir que los enlaces salten de línea */
/*.pantalla-participar .wf-legal
.pantalla-participar .wf-legal label
.pantalla-participar .legal-link {
    font-weight: 400;
}*/

/* Enlaces: subrayados pero NO en negrita */
.pantalla-participar .wf-legal .legal-link {
    font-weight: 400; /* 🔥 quita la negrita */
    color: #111111; /* mismo color que el texto */
    text-decoration: underline;
}


/* Texto intermedio "y la" */
.pantalla-participar .wf-legal .legal-sep {
    font-weight: 400;
    color: #111111;
}



/* ✅ Legal en una sola línea (y que en móvil pueda partirse bien) */
.pantalla-participar .checkbox-row.wf-legal {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap; /* si no cabe, baja de forma natural */
    width: 100%;
}

    /* El “texto” del CheckBox (WebForms lo suele renderizar como span dentro de label) */
    .pantalla-participar .checkbox-row.wf-legal label {
        display: inline;
        margin: 0;
    }

/* Separador “y la” como inline */
.pantalla-participar .legal-sep {
    display: inline;
    white-space: normal;
    color: #111;
}

/* Links legales */
.pantalla-participar .legal-link {
    display: inline;
    color: #111; /* o var(--resaltat) si los quieres amarillos */
    text-decoration: underline;
}