/* ============================================
   Estilos para el sistema de menú (PicoCSS + AlpineJS)
   ============================================ */

/* --- Visibilidad responsive --- */
.desktop-only { display: block; }
.mobile-only  { display: none; }

@media (max-width: 991px) {
    .desktop-only { display: none; }
    .mobile-only  { display: block; }
}

/* --- Sidebar AlpineJS --- */
.slide-in-left {
    animation: slideInLeft 0.25s ease-out;
}
.slide-out-left {
    animation: slideOutLeft 0.2s ease-in;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes slideOutLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* --- Ajustes PicoCSS para navbar con logo --- */
nav ul li strong a img.logo {
    height: 2.5rem;
    vertical-align: middle;
}

/* --- Dropdown en menú desktop --- */
nav ul li [x-data] {
    position: relative;
}

nav ul li [x-data] > ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--pico-background-color, #fff);
    border: 1px solid var(--pico-muted-border-color, #ddd);
    border-radius: var(--pico-border-radius, 6px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0.5rem 0;
    z-index: 1000;
    list-style: none;
}

nav ul li [x-data] > ul li {
    margin: 0;
    padding: 0;
}

nav ul li [x-data] > ul li a {
    display: block;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    color: var(--pico-color, inherit);
    text-decoration: none;
}

nav ul li [x-data] > ul li a:hover {
    background: var(--pico-primary-background, #eee);
    color: var(--pico-primary-inverse, #000);
}

/* --- Sidebar interno --- */
aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

aside ul li {
    margin: 0;
    padding: 0;
}

aside ul li a {
    display: block;
    padding: 0.6rem 0.8rem;
    text-decoration: none;
    color: var(--pico-color, inherit);
    border-radius: var(--pico-border-radius, 4px);
}

aside ul li a:hover {
    background: var(--pico-primary-background, #eee);
}

aside ul li hr {
    margin: 0.4rem 0;
}