/* Contenedores Genéricos */
.contenedor-principal,
.contenedor-vocabulario-lista,
.contenedor-tipos-palabra,
.contenedor-temas-vocabulario {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    margin-bottom: 0;
}

.contenedor-wide {
    margin: 40px auto;
    padding: 0 40px;
    margin-bottom: 0px;
    max-width: 1200px;
}


/* =========================================
    4. ENCABEZADO Y NAVEGACIÓN
   ========================================= */
#header {
    /* display: flex; */
    justify-content: space-between; /* Logo izq, Menú der */
    align-items: center;
    padding: 20px;
    background-color: var(--color-verde-clarito);
    font-family: var(--font-header);
    font-weight: 400;
    /* text-align: center; <-- Esto choca con flexbox, mejor lo quitamos */
}

#site-name {
    font-family: var(--font-titulos);
    text-align: left;
}

.logo a {
    font-size: 1.8rem; /* Un poco más grande para Meow Script */
    font-weight: bold;
    text-decoration: none;
    color: var(--color-texto);
}

.logo a:hover {
    color: var(--color-principal);
}

/* Menú */
.mi-menu {
    font-family: var(--font-menu);
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.mi-menu li a {
    text-decoration: none;
    color: var(--color-texto);
    font-weight: 500;
    text-transform: lowercase;
    font-size: 1.1rem;
}

.mi-menu li a:hover {
    color: var(--color-principal); /* Verde al pasar el mouse */
    text-decoration: underline;
}

.submenu ul {
    display: none;
}

/* 2. Mostramos el submenú al pasar el cursor (hover) sobre el elemento padre */
/* En tu caso, el elemento con ID menu-item-21 que dice "Diccionario" */
.navegacion-principal li:hover > .sub-menu {
    display: block;
}

/* 3. Estilos básicos para que los enlaces del submenú se vean bien */
.navegacion-principal .sub-menu li {
    margin: 0;
    padding: 5px 0;
}

.navegacion-principal .sub-menu li a {
    color: var(--color-texto);
    text-decoration: none;
    display: block;
    padding: 5px 10px;
    transition: background 0.4s ease;
}

.navegacion-principal .sub-menu li a:hover {
    background-color: var(--color-verde-clarito); /* Un verde muy clarito para el hover */
    border-radius: 5px;
}

/* Aseguramos que el elemento padre sea la referencia */
.navegacion-principal .mi-menu > li {
    position: relative;
}

/* Ajustamos el submenú para que se alinee a la derecha del padre */
.navegacion-principal .sub-menu {
    display: none;
    position: absolute;
    top: 100%;      /* Aparece justo debajo del texto */
    right: 0;       /* ¡ESTO ES LO IMPORTANTE! Se alinea al borde derecho */
    left: auto;     /* Anulamos cualquier alineación a la izquierda */
    background-color: #ffffff;
    border: 2px solid var(--color-principal);
    border-radius: 10px;
    padding: 10px;
    z-index: 100000;
    list-style: none;
    min-width: 200px;
    box-shadow: -2px 4px 10px rgba(0,0,0,0.1); /* Sombra hacia la izquierda */
    text-align: right; /* Opcional: para que el texto adentro también esté a la derecha */
}

/* El hover se mantiene igual */
.navegacion-principal li:hover > .sub-menu {
    display: block;
}

/* 1. Esto separa el Grupo (título+desc) del Menú */
#header {
    display: flex;
    justify-content: space-between; /* Grupo a la izq, Menú a la der */
    align-items: center; /* Alineados verticalmente al centro */
}

/* 2. Esto apila el Título sobre la Descripción */
.branding-group {
    display: flex;
    flex-direction: column; /* Columna: uno arriba del otro */
    text-align: left; /* Asegura que el texto empiece a la izquierda */
}

.branding-group .fa-cat-sit-front {
    color: var(--color-principal-hover);
}

/* 3. Opcional: Elimina márgenes extra si se ven muy separados */
#site-name {
    margin-bottom: 0; /* Quita espacio debajo del título */
    line-height: 1.2; /* Ajusta si se ven encimados */
}

.branding-group p {
    margin-top: -15px; /* Solo un poquito de espacio arriba de la descripción */
    margin-bottom: 0;
}

body {
    margin-bottom: 40px;
}

#footer-flotante-contenedor {
    position: fixed;
    bottom: 0px;
    z-index: 100;
    width: 100%;
    margin: 0 auto;
    align-content: center;

    .meta-diaria-contenedor {
        padding: 10px 30px 3px 30px;
        background-color:  var(--color-principal-clarito);
        border-radius: 80px 80px 0px 0px;
    }
}

.michi-dashboard-container {
    .meta-diaria-contenedor { /* looks different in profile than footer */
        border-radius: 25px;
        padding: 8px 16px;
        margin-bottom: 20px;
        box-shadow: 6px 6px 0px rgba(114, 133, 85, 0.05);
        border: 2px solid var(--color-principal-claro);
    }
}

.meta-diaria-contenedor {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    #cat {
        color: var(--color-principal);
        font-size: 1.4em;
        --fa-secondary-color: var(--color-principal-clarito);
    }

    .michi-fill-animado {
        /* background-color: var(--color-teal); */
        background-image: linear-gradient(to right, var(--color-teal) 0%, var(--color-principal-claro) 20%, var(--color-amarillo) 50%, var(--color-miel) 60%, var(--color-frambuesa) 100%);
        background-size: 600px 100%;
        background-repeat: no-repeat;
        border-radius: 10px 0px 0px 10px;
        height: 100%;
        transition: width 0.5s;
        width: var(--progreso, 0%);

        /* Flexbox para alinear el texto ADENTRO a la derecha */
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Lo empuja a la derecha */
    }

    /* EL TEXTO (HUELLITAS) */
    #porcentageTexto {
        white-space: nowrap;
        font-size: 0.8em;
        font-weight: bold;
        transition: all 0.3s;
        color: var(--color-texto);
        margin-right: 6px;
    }

    .fa-paw {
        color: var(--color-texto) !important;
    }

    /* --- ESTADO ESPECIAL: CUANDO LA BARRA ES MUY CHICA --- */
    /* JS agregará la clase 'texto-afuera' al contenedor si % < 20 */
    .michi-fill-animado.texto-afuera #porcentageTexto {
        position: absolute;
        left: calc(var(--progreso) + 6px); /* Lo mandamos afuera del verde */
        margin-left: 8px; /* Espacio para que no se pegue */
        color: #555; /* Cambiamos a GRIS OSCURO */
    }

    /* .trophy:hover {
        transform: scale(1.1);
    } */

    .fa-trophy {
        font-size: 1.4rem;
        transition: 0.3s;
    }

    .fa-trophy.fa-solid {
        color: var(--color-frambuesa);
    }
    .fa-trophy.fa-regular {
        color: var(--color-principal);
    }

    #barra-fondo {
        position: absolute; width: 100%;
        text-align: center;
        top: 0; line-height: 20px;
        font-size: 0.75rem;
        font-weight: bold; color: #555;
    }

    #barra-contenedor {
        flex-grow: 1; width: 100%;
        background-color: #eee; height: 20px;
        border-radius: 10px;
        position: relative; overflow: hidden;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    }

    .michi-paw {
        left: var(--progreso);
    }
}

/* footer */

#footer {
    padding-top: 30px;
    padding: 30px 20px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 1em;

    p {
        text-align: right;
    }

    .fa-glasses {
        --fa-primary-color: var(--color-principal);
        --fa-secondary-color: var(--color-principal-clarito);
        --fa-secondary-opacity: 0.8;
    }

    /* --- FOOTER ALINEADO --- */
    .contenedor-switch {
        display: flex;           /* Activa el modo flexible */
        align-items: center;     /* APROBADO: Alineación vertical perfecta al centro */
        justify-content: center; /* Centrado horizontalmente en la página */
        gap: 10px;               /* Espacio aireado entre elementos */
        flex-wrap: wrap;         /* Si la pantalla es muy chica, permite que bajen */
    }

    .etiqueta-fuente {
        font-weight: bold;
        color: #555;
        font-size: 1em !important;
        vertical-align: middle;
    }

    .footer-copy a {
        text-decoration: none;
        /* font-weight: bold; */
        color: #A4B687; /* Tu verde Miacat */
    }

    .footer-separator {
        color: var(--color-texto-suave);
        font-size: 1.2rem;
        font-weight: 300;
    }
}

/* RESPONSIVE: Ajuste para celulares */
@media (max-width: 600px) {
    .contenedor-switch {
        flex-direction: column; /* Apilar elementos uno sobre otro */
        gap: 10px;
    }
    .footer-separator {
        display: none; /* Ocultamos la barrita "|" en celular */
    }
}


/* =========================================
    MENÚ HAMBURGUESA (MÓVIL)
   ========================================= */

/* 1. Estilo del Botón (Oculto en escritorio) */
.menu-toggle {
    display: none; /* Por defecto no se ve */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 2000; /* Siempre encima de todo */
}

/* 2. MEDIA QUERY: Solo afecta a celulares (menos de 768px) */
@media (max-width: 768px) {

    /* Mostrar el botón en móvil */
    .menu-toggle {
        display: block;
        position: absolute;
        right: 30px;
        top: 40px;
        z-index: 9999 !important;
        font-size:1.4em;
    }

    /* 2. Lógica de mostrar/ocultar los iconos */
    #menu-bars {
        display: block;
        color: var(--color-principal);
    }

    #menu-bars:hover {
        color: var(--color-principal-hover);
        transform: scale(1.05);
    }

    #menu-X {
        display: none;
    }

    /* 3. CUANDO ESTÁ ABIERTO (body.menu-activo) */

    /* Escondemos las barras */
    body.menu-activo #menu-bars {
        display: none;
    }

    /* Mostramos la X */
    body.menu-activo #menu-X {
        display: block;
        color: var(--color-principal-clarito); /* <--- IMPORTANTE: Que sea blanca para verse sobre el verde */
    }

    body.menu-activo #menu-X:hover {
        transform: scale(1.1);
        color: var(--color-verde-sutil);
    }

    /* Opcional: Si el menú es 'fixed', el botón también debería serlo para no perderse */
    body.menu-activo .menu-toggle {
        position: fixed;
        top: 40px; /* Mantenemos la misma posición */
        right: 30px;
        font-size: 1.4em;
    }

    /* Transformar el menú en pantalla completa (Overlay) */
    .navegacion-principal {
        position: fixed; /* Fijo, no se mueve al scrollear */
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 120px);
        background-color: var(--color-principal); /* Tu Verde Miacat */

        /* Flexbox para centrar todo */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Empieza desde arriba */
        align-items: center;

                /* Permitir scroll */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iPhone */

        /* Espaciado vital */
        padding-top: 100px;    /* Espacio arriba para no tapar la X */
        padding-bottom: 100px; /* Espacio abajo para que no se corte el final */


        /* Efecto de transición (deslizar) */
        transform: translateX(100%); /* Empieza escondido a la derecha */
        transition: transform 0.4s ease-in-out;
        z-index: 1000;
    }

    /* ESTADO ABIERTO (Cuando JS agrega esta clase) */
    .navegacion-principal.menu-abierto {
        transform: translateX(0); /* Se desliza a la vista */
    }

    /* Estilo de los enlaces en el menú móvil */
    .mi-menu {
        flex-direction: column; /* Lista vertical */
        /* gap: 30px; Espacio entre palabras */
        text-align: center;
        width: 100%; /* Asegura que ocupe el ancho */
        margin: 0;
        padding: 0;
    }

    .mi-menu li a {
        font-family: var(--font-titulos); /* Meow Script o Indie Flower */
        font-size: 2rem; /* Letra grandota */
        color: #ffffff !important; /* Texto blanco para contraste con fondo verde */
        display: block;
    }

    .mi-menu li a:hover {
        color: var(--color-verde-clarito) !important;
        text-decoration: none;
    }

    /* Animación del icono a una "X" cuando está abierto */
    body.menu-activo .menu-toggle span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
        background-color: var(--color-principal); /* O blanco si el fondo del header es oscuro */
    }
    body.menu-activo .menu-toggle span:nth-child(2) {
        opacity: 0;
    }
    body.menu-activo .menu-toggle span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
        background-color: var(--color-principal);
    }

    /* Pequeño ajuste si el header es blanco, la X debe ser visible */
    /* Como el menú cubre todo, el botón debe estar ENCIMA (z-index alto) */
    /* Y cambiar de color a blanco para verse sobre el verde */
    body.menu-activo .menu-toggle span {
        background-color: #ffffff;
    }

    /* --- ARREGLO DE SUBMENÚS EN MÓVIL --- */

    /* 1. Resetear el contenedor del submenú */
    .navegacion-principal .sub-menu {
        position: static;      /* Ya no flota, ahora obedece el flujo */
        display: block;        /* Siempre visible (o puedes ocultarlo si prefieres) */
        width: auto;           /* Ancho natural */
        min-width: 0;          /* Reset del ancho mínimo de escritorio */

        background-color: transparent; /* ¡Adiós cuadro blanco! */
        border: none;          /* Adiós borde verde */
        box-shadow: none;      /* Adiós sombra */

        padding: 0;
        margin-top: 10px;      /* Espacio entre "Juegos" y la lista */
        text-align: center;    /* Centrado igual que los demás */

        /* Opcional: una línea sutil a la izquierda para indicar jerarquía */
        /* border-left: 2px solid rgba(255,255,255,0.3); */
        /* display: flex; flex-direction: column; align-items: center; */
    }

    /* 3. Estilo de los enlaces (letra un poco más chica) */
    .navegacion-principal .sub-menu li a {
        font-size: 1rem;     /* Un poco más pequeño que el menú principal (2rem) */
        color: var(--color-principal-clarito) !important; /* Un tono más suave para distinguir */
        font-family: var(--font-cuerpo); /* Usar la fuente de cuerpo para variar, o mantén titulos */
        font-weight: bold;
    }

    /* Hover en móvil */
    .navegacion-principal .sub-menu li a:hover {
        /* color: var(--color-principal-clarito) !important; */
        background-color: transparent; /* Quitar fondo verde del hover de escritorio */
        text-decoration: underline;
    }

    /* 4. IMPORTANTE: Permitir scroll si el menú es muy alto */
    .navegacion-principal {
        overflow-y: auto; /* Si la lista es larga, permite deslizar el dedo */
        justify-content: flex-start; /* Empieza arriba, no centrado forzosamente si es muy alto */
        padding-top: 80px; /* Espacio para que no choque con el botón de cerrar */
    }
}

/* Posición SOLO PARA ADMIN (Cuando tú estás logueada) */
body.admin-bar .menu-toggle {
    top: 72px; /* 40px originales + 32px que mide la barra de WP */
}

/* Ajuste fino para móviles (a veces la barra mide 46px en móvil) */
@media screen and (max-width: 782px) {
    body.admin-bar .menu-toggle {
        top: 86px; /* 40px + 46px */
    }
}