*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --fondo:#f4f7fb;
    --panel:rgba(255,255,255,0.7);
    --texto:#111827;
    --boton:#52e0d5;
    --sombra:#52e0d5;
}

@media (prefers-color-scheme: dark){
    :root{
        --fondo:#020617;
        --panel:rgba(10,15,30,0.65);
        --texto:#ffffff;
        --boton:#52e0d5;
        --sombra:#52e0d5;
    }
}

body{
    font-family:'Poppins',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    background:var(--fondo);
    color:var(--texto);
    position:relative;
}

/* En acceso se evita la seleccion y el menu de texto en pulsaciones largas. */
.pagina-acceso.talkback-activo,
.pagina-acceso.talkback-activo *{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}

/* ========================= */
/* FONDO */
/* ========================= */

.bg{
    position:absolute;
    width:100%;
    height:100%;
    background:
    radial-gradient(circle at top left,#52e0d5 0%,transparent 25%),
    radial-gradient(circle at top right,#ffb35c 0%,transparent 20%),
    radial-gradient(circle at bottom left,#ff8aa0 0%,transparent 20%),
    radial-gradient(circle at bottom right,#b58cff 0%,transparent 25%),
    var(--fondo);

    filter:blur(40px);
    z-index:-1;
}

/* ========================= */
/* TOPBAR */
/* ========================= */

.topbar{
    width:100%;
    height:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 30px;
    position:fixed;
    top:0;
    left:0;
    z-index:100;
}

.logo-mini{
    font-size:1.5rem;
    font-weight:700;
    color:var(--texto);
    text-shadow:0 0 15px var(--sombra);
}

/* ========================= */
/* MENÚ */
/* ========================= */

.menu-container{
    position:relative;
}

.menu-btn{
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:1.8rem;
    background:var(--panel);
    backdrop-filter:blur(15px);
    color:var(--texto);
    border:1px solid rgba(255,255,255,0.2);
    transition:0.3s;
}

.menu-btn:hover{
    transform:scale(1.08);
    box-shadow:0 0 20px var(--sombra);
}

.dropdown{
    position:absolute;
    top:65px;
    right:0;
    width:260px;
    background:var(--panel);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 0 25px rgba(0,0,0,0.5);
}

.dropdown a{
    display:block;
    padding:18px;
    text-decoration:none;
    color:var(--texto);
    transition:0.3s;
}

.dropdown a:hover{
    background:rgba(82,224,213,0.2);
}

.dropdown a[aria-disabled="true"]{
    opacity:0.55;
    cursor:not-allowed;
}

.acerca-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(2,6,23,0.72);
    backdrop-filter:blur(8px);
    z-index:1000;
}

.acerca-contenido{
    position:relative;
    width:min(100%, 460px);
    padding:36px 28px 28px;
    border:1px solid rgba(82,224,213,0.35);
    border-radius:26px;
    background:var(--panel);
    color:var(--texto);
    box-shadow:0 0 35px rgba(0,0,0,0.35);
}

.acerca-contenido h2{
    margin-bottom:16px;
    color:var(--boton);
}

.acerca-contenido p{
    margin-top:12px;
    line-height:1.6;
}

.acerca-cerrar{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,0.14);
    color:var(--texto);
    cursor:pointer;
    font-size:1rem;
}

.accesibilidad-control{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    border-top:1px solid rgba(255,255,255,0.12);
    color:var(--texto);
    cursor:pointer;
}

.interruptor{
    position:relative;
    width:48px;
    height:27px;
    flex-shrink:0;
}

.interruptor input{
    width:0;
    height:0;
    opacity:0;
}

.interruptor-deslizador{
    position:absolute;
    inset:0;
    border-radius:20px;
    background:rgba(255,255,255,0.28);
    transition:0.25s;
}

.interruptor-deslizador::before{
    content:"";
    position:absolute;
    width:21px;
    height:21px;
    left:3px;
    top:3px;
    border-radius:50%;
    background:white;
    transition:0.25s;
}

.interruptor input:checked + .interruptor-deslizador{
    background:var(--boton);
}

.interruptor input:checked + .interruptor-deslizador::before{
    transform:translateX(21px);
}

/* ========================= */
/* BOTÓN AYUDA */
/* ========================= */

.help-btn{
    position:fixed;
    right:25px;
    bottom:25px;
    width:70px;
    height:70px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:2rem;
    font-weight:bold;
    background:linear-gradient(135deg,#52e0d5,#b58cff);
    color:white;
    box-shadow:0 0 30px var(--sombra);
    z-index:100;
    transition:0.3s;
}

.help-btn:hover{
    transform:scale(1.1);
}

/* ========================= */
/* HELP BOX */
/* ========================= */

.help-box{
    position:fixed;
    right:25px;
    bottom:110px;
    width:320px;
    padding:25px;
    border-radius:25px;
    background:var(--panel);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.15);
    color:var(--texto);
    box-shadow:0 0 30px rgba(0,0,0,0.5);
    z-index:100;
}

.help-box h3{
    margin-bottom:15px;
    color:var(--boton);
}

.help-box p{
    margin-bottom:12px;
    line-height:1.5;
}

/* ========================= */
/* CONTENEDOR */
/* ========================= */

.container{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

/* ========================= */
/* GLASS CARD */
/* ========================= */

.glass-card{
    width:100%;
    max-width:520px;
    padding:45px;
    border-radius:35px;
    background:var(--panel);
    backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,0.15);
    box-shadow:0 0 40px rgba(82,224,213,0.3);
    text-align:center;
    animation:flotar 4s ease-in-out infinite;
}

@keyframes flotar{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }
}

.logo{
    width:180px;
    margin-bottom:20px;
}

.glass-card h1{
    font-size:2.5rem;
    margin-bottom:10px;
    color:var(--texto);
}

.subtitle{
    color:var(--boton);
    margin-bottom:35px;
}

.fast-login{
    margin:0 0 24px;
    padding:22px;
    border:1px solid rgba(82,224,213,0.3);
    border-radius:22px;
    background:rgba(82,224,213,0.1);
    text-align:center;
}

.fast-login h2{
    margin-bottom:8px;
    color:var(--texto);
}

.fast-login p{
    margin-bottom:18px;
    color:var(--texto);
    line-height:1.5;
}

.estado-sincronizacion{
    min-height:1.4em;
    margin:-8px 0 18px;
    padding:0 4px;
    color:var(--muted, rgba(255,255,255,0.72));
    font-size:0.82rem;
    line-height:1.4;
    text-align:center;
}

.estado-sincronizacion.sincronizado{
    color:#38e7a6;
}

.estado-sincronizacion.pendiente,
.estado-sincronizacion.eliminacion-pendiente{
    color:#ffc46b;
}

.estado-sincronizacion.eliminado{
    color:#7ee4ff;
}

.btn-sec{
    width:100%;
    margin-top:10px;
    padding:14px;
    border:1px solid rgba(82,224,213,0.45);
    border-radius:18px;
    background:transparent;
    color:var(--texto);
    cursor:pointer;
    font:inherit;
    font-weight:600;
}

.btn-sec.btn-peligro{
    border-color:rgba(255,112,128,0.65);
    color:#ffabb7;
}

.verificacion-edicion{
    margin-top:18px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--surface);
    text-align:left;
}

.verificacion-edicion label{
    display:block;
    margin-bottom:9px;
    color:var(--texto);
    font-weight:600;
}

.verificacion-edicion input{
    width:100%;
    margin-bottom:10px;
    padding:13px 15px;
    border:1px solid var(--border);
    border-radius:14px;
    color:var(--texto);
    background:var(--control);
    font:inherit;
}

.verificacion-edicion p{
    min-height:1.3em;
    margin:10px 0 0;
    color:var(--muted);
    font-size:0.86rem;
}

/* ========================= */
/* INPUTS */
/* ========================= */

.input-group{
    text-align:left;
    margin-bottom:22px;
}

.input-group label{
    display:block;
    margin-bottom:10px;
    font-weight:500;
    color:var(--texto);
}

.capacidades-group{
    min-inline-size:0;
    padding:0;
    border:0;
}

.capacidades-group legend{
    width:100%;
    margin-bottom:10px;
    padding:0;
    font-weight:500;
    color:var(--texto);
}

.input-group input{
    width:100%;
    padding:16px;
    border:none;
    border-radius:18px;
    outline:none;
    font-size:1rem;
    color:var(--texto);

    background:rgba(255,255,255,0.15);

    border:2px solid rgba(82,224,213,0.45);

    backdrop-filter:blur(10px);

    box-shadow:
    0 0 10px rgba(82,224,213,0.25),
    inset 0 0 10px rgba(255,255,255,0.08);

    transition:0.3s;
}

.input-group input::placeholder{
    color:rgba(255,255,255,0.5);
}

.input-group small{
    display:block;
    margin-top:7px;
    color:rgba(255,255,255,0.68);
    font-size:0.78rem;
    line-height:1.35;
}

.input-group input:focus{
    border:2px solid #52e0d5;

    background:rgba(255,255,255,0.2);

    box-shadow:
    0 0 8px #52e0d5,
    0 0 20px rgba(82,224,213,0.7),
    0 0 40px rgba(82,224,213,0.5);

    transform:scale(1.01);
}

/* ========================= */
/* BOTÓN */
/* ========================= */

.btn-main{
    width:100%;
    padding:18px;
    border:none;
    border-radius:20px;
    cursor:pointer;
    font-size:1rem;
    font-weight:600;
    color:white;
    background:linear-gradient(135deg,#52e0d5,#b58cff);
    transition:0.3s;
    margin-top:15px;
    box-shadow:0 0 20px rgba(82,224,213,0.5);
}

.btn-main:hover{
    transform:translateY(-3px);
    box-shadow:0 0 30px rgba(181,140,255,0.7);
}

/* ========================= */
/* HIDDEN */
/* ========================= */

.hidden{
    display:none;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:600px){

    .glass-card{
        padding:35px 25px;
    }

    .glass-card h1{
        font-size:2rem;
    }

    .logo{
        width:140px;
    }

    .help-box{
        width:90%;
        right:5%;
    }
}
/* ===================================== */
/* ALERTA PERSONALIZADA */
/* ===================================== */

.alerta{

    position:fixed;

    top:30px;

    left:50%;

    transform:translateX(-50%) translateY(-18px);

    min-width:320px;

    max-width:420px;

    padding:18px 22px;

    border-radius:22px;

    background:rgba(10,15,30,0.9);

    backdrop-filter:blur(20px);

    border:1px solid rgba(82,224,213,0.25);

    display:flex;

    align-items:center;

    gap:18px;

    z-index:9999;

    box-shadow:
    0 0 30px rgba(82,224,213,0.25);

    opacity:0;

    pointer-events:none;

    transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.alerta.visible{

    opacity:1;

    transform:translateX(-50%) translateY(0);
}

.alerta-icono{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

    background:linear-gradient(
        135deg,
        #52e0d5,
        #b58cff
    );

    color:white;

    box-shadow:
    0 0 20px rgba(82,224,213,0.4);
}

.alerta-texto h3{

    color:white;

    font-size:1.1rem;

    margin-bottom:4px;
}

.alerta-texto p{

    color:rgba(255,255,255,0.75);

    font-size:0.95rem;
}

.hidden{

    display:none;
}

@keyframes mostrarAlerta{

    from{

        opacity:0;

        transform:
        translateX(-50%)
        translateY(-20px);
    }

    to{

        opacity:1;

        transform:
        translateX(-50%)
        translateY(0);
    }
}

/* ===================================== */
/* CAPACIDADES */
/* ===================================== */

.capacidades-dropdown{

    border-radius:18px;

    background:rgba(255,255,255,0.15);

    border:2px solid rgba(82,224,213,0.45);

    backdrop-filter:blur(10px);

    overflow:hidden;

    transition:0.3s;
}

.capacidades-dropdown[open]{

    border-color:#52e0d5;

    box-shadow:
    0 0 8px #52e0d5,
    0 0 20px rgba(82,224,213,0.4);
}

.capacidades-dropdown summary{

    list-style:none;

    cursor:pointer;

    padding:16px;

    font-size:1rem;

    color:var(--texto);

    display:flex;

    justify-content:space-between;

    align-items:center;

    user-select:none;
}

.capacidades-dropdown summary::-webkit-details-marker{

    display:none;
}

.capacidades-dropdown summary::after{

    content:"▾";

    color:var(--boton);

    font-size:0.9rem;

    margin-left:10px;

    transition:transform 0.25s;

    flex-shrink:0;
}

.capacidades-dropdown[open] summary::after{

    transform:rotate(180deg);
}

.capacidades-panel{

    padding:0 16px 16px 16px;

    /* Evita que la lista abierta rebase la pantalla en móviles. */
    max-height:min(50svh, 360px);

    overflow-y:auto;

    overscroll-behavior:contain;

    -webkit-overflow-scrolling:touch;

    touch-action:pan-y;
}

.capacidades-nota{

    font-size:0.82rem;

    color:rgba(255,255,255,0.6);

    margin-bottom:14px;

    line-height:1.4;
}

.capacidades-base{

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.capacidades-combos-dropdown{

    margin-top:14px;
}

.capacidades-combos-dropdown summary{

    list-style:none;

    cursor:pointer;

    font-size:0.85rem;

    font-weight:600;

    color:var(--boton);

    padding:4px 0;

    user-select:none;
}

.capacidades-combos-dropdown summary::-webkit-details-marker{

    display:none;
}

.capacidades-combos-dropdown summary::before{

    content:"▸ ";
}

.capacidades-combos-dropdown[open] summary::before{

    content:"▾ ";
}

.capacidades-combos{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:12px;
}

.capacidad-check{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 16px;

    border-radius:16px;

    background:rgba(255,255,255,0.12);

    border:2px solid rgba(82,224,213,0.35);

    cursor:pointer;

    font-size:0.9rem;

    font-weight:500;

    transition:0.25s;
}

.capacidad-check:hover{

    border-color:#52e0d5;

    box-shadow:0 0 12px rgba(82,224,213,0.35);
}

.capacidad-check input[type="checkbox"]{

    width:18px;

    height:18px;

    accent-color:#52e0d5;

    cursor:pointer;
}

.capacidad-check.opaco{

    opacity:0.4;

    cursor:not-allowed;

    background:rgba(255,255,255,0.05);

    border-color:rgba(255,255,255,0.12);
}

.capacidad-check.opaco:hover{

    box-shadow:none;

    border-color:rgba(255,255,255,0.12);
}

.capacidad-check.opaco input[type="checkbox"]{

    cursor:not-allowed;

    accent-color:rgba(255,255,255,0.3);
}

/* ===================================== */
/* GLASS REFINADO Y AREAS SEGURAS */
/* ===================================== */

.pagina-acceso{
    isolation:isolate;
    min-height:100svh;
    background:var(--fondo);
}

.pagina-acceso .bg{
    position:fixed;
    inset:-18vmax;
    width:auto;
    height:auto;
    background:
        radial-gradient(circle at 12% 12%,rgba(82,224,213,0.52),transparent 22%),
        radial-gradient(circle at 88% 16%,rgba(181,140,255,0.42),transparent 23%),
        radial-gradient(circle at 16% 88%,rgba(255,138,160,0.30),transparent 20%),
        radial-gradient(circle at 88% 82%,rgba(255,179,92,0.34),transparent 21%);
    filter:blur(54px) saturate(125%);
    opacity:0.88;
    pointer-events:none;
}

.topbar{
    position:sticky;
    top:0;
    min-height:calc(72px + env(safe-area-inset-top));
    height:auto;
    padding:
        calc(10px + env(safe-area-inset-top))
        max(20px,env(safe-area-inset-right))
        10px
        max(20px,env(safe-area-inset-left));
    background:linear-gradient(120deg,rgba(255,255,255,0.64),rgba(255,255,255,0.30));
    border-bottom:1px solid rgba(255,255,255,0.62);
    box-shadow:0 12px 30px rgba(20,47,77,0.10),inset 0 1px 0 rgba(255,255,255,0.74);
    backdrop-filter:blur(28px) saturate(160%);
    -webkit-backdrop-filter:blur(28px) saturate(160%);
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.topbar .help-btn,
.topbar .menu-btn{
    position:static;
    width:48px;
    height:48px;
    flex:0 0 48px;
    margin:0;
    border:1px solid rgba(255,255,255,0.60);
    background:rgba(255,255,255,0.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.60),0 8px 18px rgba(25,55,90,0.12);
    backdrop-filter:blur(16px) saturate(150%);
    -webkit-backdrop-filter:blur(16px) saturate(150%);
}

.topbar .help-btn{
    font-size:1.45rem;
    color:var(--texto);
}

.topbar .help-btn:hover,
.topbar .menu-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(82,224,213,0.28),inset 0 1px 0 rgba(255,255,255,0.7);
}

.help-box{
    top:calc(88px + env(safe-area-inset-top));
    right:max(16px,env(safe-area-inset-right));
    bottom:auto;
    max-height:calc(100svh - 112px - env(safe-area-inset-top));
    overflow-y:auto;
    background:linear-gradient(135deg,rgba(255,255,255,0.78),rgba(255,255,255,0.42));
    border-color:rgba(255,255,255,0.68);
    box-shadow:0 22px 48px rgba(21,48,80,0.20),inset 0 1px 0 rgba(255,255,255,0.80);
    backdrop-filter:blur(28px) saturate(155%);
    -webkit-backdrop-filter:blur(28px) saturate(155%);
}

.container{
    min-height:calc(100svh - 72px - env(safe-area-inset-top));
    padding:
        28px
        max(20px,env(safe-area-inset-right))
        max(36px,env(safe-area-inset-bottom))
        max(20px,env(safe-area-inset-left));
}

.glass-card{
    background:linear-gradient(135deg,rgba(255,255,255,0.76),rgba(255,255,255,0.38));
    border-color:rgba(255,255,255,0.70);
    box-shadow:
        0 28px 65px rgba(22,52,86,0.19),
        0 0 38px rgba(82,224,213,0.16),
        inset 0 1px 0 rgba(255,255,255,0.86);
    backdrop-filter:blur(30px) saturate(155%);
    -webkit-backdrop-filter:blur(30px) saturate(155%);
}

.input-group input,
.capacidades-dropdown{
    background:rgba(255,255,255,0.30);
    border-color:rgba(82,224,213,0.42);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.72),0 10px 22px rgba(25,64,100,0.08);
    backdrop-filter:blur(16px) saturate(145%);
    -webkit-backdrop-filter:blur(16px) saturate(145%);
}

.input-group input::placeholder{
    color:rgba(16,32,51,0.56);
}

@media (prefers-color-scheme:dark){
    .pagina-acceso .bg{
        opacity:0.72;
    }

    .topbar{
        background:linear-gradient(120deg,rgba(9,18,37,0.84),rgba(16,29,54,0.48));
        border-bottom-color:rgba(151,229,255,0.18);
        box-shadow:0 12px 30px rgba(0,0,0,0.30),inset 0 1px 0 rgba(255,255,255,0.10);
    }

    .topbar .help-btn,
    .topbar .menu-btn{
        border-color:rgba(153,236,255,0.22);
        background:rgba(255,255,255,0.08);
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 8px 18px rgba(0,0,0,0.26);
    }

    .help-box,
    .glass-card{
        background:linear-gradient(135deg,rgba(11,22,45,0.82),rgba(24,34,65,0.48));
        border-color:rgba(164,239,255,0.20);
        box-shadow:0 28px 65px rgba(0,0,0,0.34),0 0 38px rgba(82,224,213,0.13),inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .input-group input,
    .capacidades-dropdown{
        background:rgba(255,255,255,0.09);
        border-color:rgba(82,224,213,0.36);
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 10px 22px rgba(0,0,0,0.18);
    }

    .input-group input::placeholder{
        color:rgba(248,250,252,0.58);
    }
}

@media (max-width:600px){
    .topbar{
        min-height:calc(66px + env(safe-area-inset-top));
    }

    .topbar .help-btn,
    .topbar .menu-btn{
        width:44px;
        height:44px;
        flex-basis:44px;
    }

    .logo-mini{
        font-size:1.32rem;
    }

    .container{
        align-items:flex-start;
        min-height:calc(100svh - 66px - env(safe-area-inset-top));
        padding-top:22px;
    }

    .glass-card{
        padding:30px 20px;
        border-radius:28px;
        animation:none;
    }

    .help-box{
        top:calc(78px + env(safe-area-inset-top));
        right:16px;
        width:calc(100% - 32px);
        max-height:calc(100svh - 94px - env(safe-area-inset-top));
    }
}

@media (prefers-reduced-motion:reduce){
    .glass-card{
        animation:none;
    }
}

/* Se restaura la composicion original; el glass se concentra en capacidades. */
.pagina-acceso{
    min-height:100vh;
    isolation:auto;
}

.pagina-acceso .bg{
    position:absolute;
    inset:auto;
    width:100%;
    height:100%;
    background:
        radial-gradient(circle at top left,#52e0d5 0%,transparent 25%),
        radial-gradient(circle at top right,#ffb35c 0%,transparent 20%),
        radial-gradient(circle at bottom left,#ff8aa0 0%,transparent 20%),
        radial-gradient(circle at bottom right,#b58cff 0%,transparent 25%),
        var(--fondo);
    filter:blur(40px);
    opacity:1;
    pointer-events:auto;
}

.topbar{
    width:100%;
    min-height:0;
    height:70px;
    padding:0 30px;
    position:fixed;
    top:0;
    left:0;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.help-box{
    top:auto;
    right:25px;
    bottom:110px;
    width:320px;
    max-height:none;
    overflow:visible;
    background:var(--panel);
    border-color:rgba(255,255,255,0.15);
    box-shadow:0 0 30px rgba(0,0,0,0.5);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.container{
    min-height:100vh;
    padding:20px;
}

.glass-card{
    padding:45px;
    border-radius:35px;
    background:var(--panel);
    border-color:rgba(255,255,255,0.15);
    box-shadow:0 0 40px rgba(82,224,213,0.3);
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
    animation:flotar 4s ease-in-out infinite;
}

.input-group input{
    background:rgba(255,255,255,0.15);
    border-color:rgba(82,224,213,0.45);
    box-shadow:0 0 10px rgba(82,224,213,0.25),inset 0 0 10px rgba(255,255,255,0.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.input-group input::placeholder{
    color:rgba(255,255,255,0.5);
}

/* El acabado glass se usa solo en la encuesta de capacidades. */
.capacidades-dropdown{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,rgba(82,224,213,0.23),rgba(181,140,255,0.16) 56%,rgba(255,255,255,0.18));
    border:1px solid rgba(144,241,235,0.64);
    box-shadow:0 16px 32px rgba(15,77,112,0.14),inset 0 1px 0 rgba(255,255,255,0.60);
    backdrop-filter:blur(20px) saturate(155%);
    -webkit-backdrop-filter:blur(20px) saturate(155%);
}

.capacidades-dropdown summary{
    min-height:72px;
    padding:19px 18px;
    text-shadow:0 1px 0 rgba(255,255,255,0.35);
}

.capacidades-dropdown[open]{
    border-color:#52e0d5;
    box-shadow:0 0 0 1px rgba(82,224,213,0.36),0 20px 38px rgba(45,117,156,0.18),inset 0 1px 0 rgba(255,255,255,0.65);
}

.capacidades-panel{
    margin:0 10px 10px;
    padding:14px;
    border:1px solid rgba(255,255,255,0.36);
    border-radius:16px;
    background:rgba(255,255,255,0.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.36);
}

.capacidad-check{
    background:rgba(255,255,255,0.17);
    border-color:rgba(255,255,255,0.48);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.50),0 8px 18px rgba(30,89,119,0.10);
    backdrop-filter:blur(14px) saturate(145%);
    -webkit-backdrop-filter:blur(14px) saturate(145%);
}

.capacidad-check:focus-within,
.capacidad-check:has(input:checked){
    border-color:#52e0d5;
    background:linear-gradient(135deg,rgba(82,224,213,0.34),rgba(181,140,255,0.25));
    box-shadow:0 0 0 2px rgba(82,224,213,0.22),0 12px 22px rgba(82,224,213,0.20),inset 0 1px 0 rgba(255,255,255,0.58);
}

@media (prefers-color-scheme:dark){
    .help-box{
        background:var(--panel);
        border-color:rgba(255,255,255,0.15);
        box-shadow:0 0 30px rgba(0,0,0,0.5);
    }

    .glass-card{
        background:var(--panel);
        border-color:rgba(255,255,255,0.15);
        box-shadow:0 0 40px rgba(82,224,213,0.3);
    }

    .capacidades-dropdown{
        background:linear-gradient(135deg,rgba(82,224,213,0.20),rgba(181,140,255,0.16) 56%,rgba(255,255,255,0.08));
        border-color:rgba(120,238,232,0.44);
        box-shadow:0 18px 36px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.16);
    }

    .capacidades-panel,
    .capacidad-check{
        background:rgba(255,255,255,0.08);
        border-color:rgba(174,241,255,0.20);
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 8px 18px rgba(0,0,0,0.18);
    }
}

@media (max-width:600px){
    .topbar{
        min-height:0;
        height:70px;
        padding:0 30px;
    }

    .container{
        align-items:center;
        min-height:100vh;
        padding:20px;
    }

    .glass-card{
        padding:35px 25px;
        border-radius:35px;
        animation:flotar 4s ease-in-out infinite;
    }

    .help-box{
        top:auto;
        right:5%;
        bottom:110px;
        width:90%;
        max-height:none;
    }

    .pagina-acceso.accion-principal-visible .help-btn{
        width:58px;
        height:58px;
        right:16px;
        bottom:104px;
        font-size:1.6rem;
        box-shadow:0 0 24px rgba(82,224,213,0.58);
    }
}

@media (prefers-reduced-motion:reduce){
    .glass-card{
        animation:none;
    }
}