/* --- styles/components/style-components.css --- */

#card-nivel-actual {
    flex: 0 0 auto; 
    
    padding: 1rem;

    border: var(--border-width-no-focus) dashed var(--color-border-placeholder);
    background: transparent; border-radius: var(--border-radius);

    display: none; 
    flex-direction: column; justify-content: center;
    box-sizing: border-box; overflow: hidden; 

    min-width: 0; min-height: 0;
    height: var(--card-height-calc, calc( (100% - (2 * var(--card-gap))) / 3 )); 
}
#card-nivel-actual.visible { display: flex; }
#card-nivel-actual h2 {
    margin: 0; 
    /* ⭐️ A11Y FIX */
    font-size: var(--card-nivel-actual-font-size);

    color: var(--color-text); opacity: 1;

    white-space: normal; 
    overflow: hidden; 
    display: -webkit-box; 

    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--card-nivel-actual-line-clamp); 
    line-clamp: var(--card-nivel-actual-line-clamp); 

    line-height: var(--line-height-base); 
    max-height: calc(var(--card-nivel-actual-font-size) 
                    * var(--line-height-base)
                    * var(--card-nivel-actual-line-clamp));
    text-overflow: ellipsis;
}

#card-volver-fija-elemento {
    flex: 0 0 auto; padding: 1rem;
    
    display: none; flex-direction: column; 
    justify-content: center; align-items: center; 
    margin-bottom: 0; overflow: hidden; 
    box-sizing: border-box; 
    transition: all var(--animation-speed) ease; 

    color: var(--color-text); background: var(--color-card-bg);
    border: var(--border-width-no-focus) solid var(--color-card-border); 
    border-radius: var(--border-radius);
    
    cursor: pointer;
    height: var(--card-height-calc, calc( (100% - (2 * var(--card-gap))) / 3 )); min-height: 0;
}
#card-volver-fija-elemento.visible { display: flex !important; }
#card-volver-fija-elemento h2 { 
    margin: 0; 
    /* ⭐️ A11Y FIX */
    font-size: var(--card-volver-fija-font-size);
    font-weight: bold; text-align: center; 
    display: block; 
}

#card-volver-fija-elemento.focus-visible,
#card-volver-fija-elemento:hover,
#card-volver-fija-elemento:focus-visible {
    outline: none; border-color: var(--color-primary); 

    transform: scale(calc(1 + var(--zoom-focus-minnor))); 

    box-shadow: 0 0 25px var(--color-shadow-primary); 
    color: var(--color-primary);
}

#btn-volver-navegacion { display: none !important; } 

#info-adicional {
    scroll-behavior: var(--scroll-behavior);
}
#info-adicional::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
}

#info-adicional details { margin-bottom: 1.2rem; }
#info-adicional summary { 
    /* ⭐️ A11Y FIX */
    font-size: var(--info-adicional-summary-font-size);
    font-weight: bold; 
    cursor: pointer; 
    list-style: none; 
    padding: 0.2rem; 
    color: var(--color-text); 
    opacity: calc(var(--opacity) * 3); 
    transition: color var(--animation-speed) ease; 
    outline: none;
}
#info-adicional summary:hover,
#info-adicional summary:focus { 
    opacity: 1; 
    color: var(--color-primary);
    transform: scale(calc(1 + var(--zoom-focus-minnor)));
}
#info-adicional summary::-webkit-details-marker { display: none; }

#info-adicional summary::before { 
    content: ''; /* Quitamos el texto */
    width: 1em; /* Ancho relativo a la fuente */
    height: 1em; /* Alto relativo a la fuente */
    margin-right: 8px; 
    display: inline-block; 
    vertical-align: middle; /* Alineación perfecta con el texto adyacente */
    transition: transform var(--animation-speed) ease; 
    
    /* 🟢 Inyección del SVG como máscara dinámica */
    background-color: currentColor; 
    -webkit-mask: var(--icon-arrow) no-repeat center / contain;
    mask: var(--icon-arrow) no-repeat center / contain;
}

#info-adicional details[open] > summary::before { transform: rotate(90deg); }
#info-adicional details > small { 
    display: block; 
    padding: 0; 
    color: var(--color-text); 
    opacity: 1; 
    /* ⭐️ A11Y FIX: Subido min size */
    font-size: var(--info-adicional-details-small-font-size); 
    line-height: var(var(--line-height-base));
}
#info-adicional details small li:not(:first-child) { 
    padding-top: var(--card-padding); 
}
#info-adicional-lista-ayuda { list-style-type: disc; padding-left: 15px; }

.toast {
    position: fixed; 
    top: 50%; left: 50%; transform: translate(-50%, -50%);

    background-color: var(--color-toast-bg); 
    color: var(--color-toast-text);

    padding: 1rem 2rem; 
    
    border-radius: var(--border-radius); 
    border: var(--border-width-no-focus) solid var(--color-card-border);
    box-shadow: 0 5px 25px var(--color-shadow-modal);
    z-index: 9999; text-align: center; max-width: 80%;

    opacity: 0; visibility: hidden; 
    transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
}
.toast.active { 
    opacity: 1; 
    visibility: visible; 
}

/* ========================================================= */
/* CLOAKING MEJORADO: Ocultación sin romper el render de SVG */
/* ========================================================= */
#a11y-modal-overlay:not(.active),
#main-menu-dropdown:not(.active) {
    display: none;
}

/* --- styles/components/style-components.css --- */