@import url('variables.css');

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

body {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--fuente-size);
    background: var(--blanco);
    color: var(--texto);
    padding-top: 60px;
    overflow-x: hidden;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================
   ACCESIBILIDAD
========================= */
body.fuente-legible {
    font-family: 'Open Dyslexic', Arial, sans-serif !important;
    line-height: 1.8;
    word-spacing: .15em;
}

body.high-contrast {
    background: var(--negro);
    color: var(--blanco);
}

body.high-contrast a {
    color: var(--cian);
}

/* =========================
   NAVBAR
========================= */
.navbar {
    background: var(--guinda);
    height: 60px;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: var(--z-nav);

    display: flex;
    align-items: center;

    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.nav-container {
    width: 100%;
    max-width: 1400px;

    margin: auto;
    padding: 0 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* =========================
   ACCESS BUTTON
========================= */
.acc-trigger {
    background: var(--blanco); /*Color del boton de accesibilidad*/

    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 50%;

    width: 40px;
    height: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    transition: .2s ease;
}

.acc-trigger:hover {
    background: var(--dorado); /*Contraste del boton de accesibilidad*/
    transform: scale(1.05);
}

/* =========================
   MENU
========================= */
.nav-menu {
    display: flex;
    gap: 18px;
    list-style: none;
}

.nav-link {
    color: var(--blanco);

    text-decoration: none;

    font-size: .85rem;
    font-weight: 500;

    position: relative;

    padding: 5px 0;

    transition: .2s ease;
}

.nav-link strong {
    font-weight: 700;
}

.nav-link::after {
    content: "";

    position: absolute;
    bottom: -4px;
    left: 0;

    width: 0%;
    height: 2px;

    background: var(--dorado);

    transition: .3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* =========================
   LSM
========================= */
.lsm-button img {
    max-width: 160px;
}

/* =========================
   SEPARADOR
========================= */
.color-separator {
    position: absolute;
    bottom: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(to right,
            #B30000 20%,
            #339933 20%,
            #339933 40%,
            #3399FF 40%,
            #3399FF 60%,
            #FFCC00 60%,
            #FFCC00 80%,
            #FF33CC 80%);
}

/* =========================
   OVERLAY
========================= */
.overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, .4);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition: .3s ease;

    z-index: var(--z-overlay);
}

.overlay.active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

/* =========================
   PANEL ACCESIBILIDAD
========================= */
.acc-panel {
    position: fixed;

    top: 0;
    left: -340px;

    width: 340px;
    height: 100vh;

    background: var(--blanco_fantasma);

    padding: 24px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    box-shadow: 6px 0 25px rgba(0, 0, 0, .2);

    transform: translateX(0);

    transition: .35s ease;

    z-index: var(--z-panel);
}

.acc-panel.active {
    transform: translateX(340px);
}

/* =========================
   BOTONES PANEL
========================= */
.acc-btn {
    width: 100%;

    padding: 12px;

    border: none;
    border-radius: 10px;

    cursor: pointer;

    font-size: .95rem;

    transition: .2s ease;
}

.acc-btn:hover {
    transform: translateY(-1px);
}

.btn-text-size {
    background: var(--gris_claro);
}

.btn-black {
    background: var(--gris_azulado);
    color: var(--blanco);
}

.btn-grey {
    background: var(--gris_ceniza_frío);
    color: var(--blanco);
}

.btn-read {
    background: var(--amarillo_ambar);
    font-weight: bold;
}

.acc-btn-reset {
    background: transparent;

    border: none;

    color: var(--rojo);

    cursor: pointer;
}

/* =========================
   STATUS PILL
========================= */
.status-pill {
    position: fixed;

    left: 50%;
    bottom: 22px;

    transform: translate(-50%, 120px);

    opacity: 0;

    background: var(--azul);
    color: var(--blanco);

    padding: 12px 18px;

    border-radius: 999px;

    display: flex;
    align-items: center;
    gap: 10px;

    z-index: var(--z-pill);

    transition: .4s ease;
}

.status-pill.visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

/* =========================
   SOUND
========================= */
.sound-wave {
    display: flex;
    gap: 2px;
}

.sound-wave span {
    width: 3px;
    height: 12px;

    background: var(--blanco);

    animation: wave 1s infinite ease-in-out;
}

@keyframes wave {

    0%,
    100% {
        transform: scaleY(.4);
    }

    50% {
        transform: scaleY(1);
    }
}

/* =========================
   STOP
========================= */
.btn-pill-stop {
    background: var(--rojo);

    border: none;
    border-radius: 999px;

    color: var(--blanco);

    padding: 6px 12px;

    cursor: pointer;
}

/* =========================
   HAMBURGUESA
========================= */
.nav-toggle {
    display: none;

    flex-direction: column;
    gap: 4px;

    background: none;
    border: none;

    cursor: pointer;
}

.nav-toggle span {
    width: 25px;
    height: 3px;

    background: var(--blanco);
}

/* =========================
   FOCUS
========================= */
button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--dorado);
    outline-offset: 3px;
}

/* =========================
   SIDEBAR
========================= */
gov-sidebar-left {
    position: fixed;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: 10px;

    z-index: 1600;

    transition: .35s ease;
}

.gov-btn {
    width: 60px;
    height: 60px;

    border-radius: 50%;

    background: var(--blanco);

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    position: relative;

    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

.gov-text {
    position: absolute;

    left: 70px;

    background: var(--guinda);
    color: var(--blanco);

    padding: 8px 12px;

    border-radius: 10px;

    opacity: 0;
    visibility: hidden;

    white-space: nowrap;

    transition: .3s ease;
}

.gov-btn:hover .gov-text {
    opacity: 1;
    visibility: visible;
}

/* sidebar oculto cuando abre accesibilidad */
body.panel-open gov-sidebar-left {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;

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

/* =========================
   FLOATING
========================= */
.floating-section {
    position: fixed;

    right: 20px;
    bottom: 30px;

    z-index: 1700;
}

.btn-mas {
    width: 65px;
    height: 65px;
    border: none;
    border-radius: 50%;
    background: var(--guinda);
    color: var(--blanco);
    font-size: 2rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
}

.redes {
    position: absolute;

    right: 0;
    bottom: 80px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition: .3s ease;
}

.redes.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.redes a img {
    width: 55px;
    height: 55px;
}

/* =========================
   MODAL
========================= */
.modal {
    position: fixed;
    inset: 0;

    display: none;
    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, .85);

    z-index: 3000;
}

.modal.active {
    display: flex;
}

.modal-content {
    position: relative;
}

.modal-content img {
    max-width: 90vw;

    border-radius: 12px;
}

#closeModal {
    position: absolute;

    top: -20px;
    right: -20px;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    cursor: pointer;
}

/* CONTENEDOR PADRE */
.has-children {
    position: relative;
}

/* SUBMENU OCULTO */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--guinda);
    min-width: 180px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 999;
}

/* ITEMS DEL SUBMENU */
.submenu li {
    padding: 0;
}

.submenu a {
    display: block;
    padding: 10px 15px;
    color: var(--blanco);
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.2s;
}

.submenu a:hover {
    background: var(--amarillo_ambar);
    color: var(--negro);
}

/* MOSTRAR AL HOVER */
.has-children:hover .submenu {
    display: block;
}

/* pequeño indicador ▼ */
.has-children>a::after {
    content: " ▼";
    font-size: 0.7rem;
}

@media(max-width:768px) {
    .submenu {
        position: static;
        display: none;
        box-shadow: none;
    }

    .has-children.open .submenu {
        display: block;
    }
}

/* HEADER PANEL */

.acc-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

/* BOTÓN CERRAR */

.btn-close-panel {

    width: 35px;
    height: 35px;

    border: none;

    border-radius: 50%;

    background: var(--guinda);

    color: var(--blanco);

    font-size: 18px;

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .3s ease;

}

.btn-close-panel:hover {

    transform: scale(1.08);

    opacity: .9;

}

/* =========================
   OCULTAR SIDEBAR
   CUANDO MENU MÓVIL ABRE
========================= */

body.menu-open gov-sidebar-left {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

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

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s;

}

/* opcional:
   ocultar botón flotante también */

body.menu-open .floating-section {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

/* =========================
   MENU RESPONSIVE CORREGIDO
========================= */

@media(max-width:768px) {

    .nav-toggle {

        display: flex;

    }

    .nav-menu {

        position: absolute;

        top: 60px;
        left: 0;

        width: 100%;

        background: var(--guinda);

        padding: 20px;

        display: flex;

        flex-direction: column;

        gap: 15px;

        transform: translateX(-100%);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            transform .35s ease,
            opacity .35s ease;

        z-index: 9999;

    }

    .nav-menu.active {

        transform: translateX(0);

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }

    .submenu {

        position: static;

        display: none;

        background:
            rgba(255,
                255,
                255,
                .08);

        margin-top: 10px;

        border-radius: 8px;

        box-shadow: none;

    }

    .has-children.open .submenu {

        display: block;

    }

}

/* =========================
   SIDEBAR Y BOTONES
========================= */

body.panel-open gov-sidebar-left,
body.menu-open gov-sidebar-left {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

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

}

body.menu-open .floating-section {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}