/*
============================================================
 ARCHIVO: assets/theme.css
 ------------------------------------------------------------
 Identidad visual v2 de TuRed.CO. Tipografías: Plus Jakarta
 Sans (títulos/menú) + DM Sans (texto). Fondo azul muy claro
 en vez de blanco puro, para que las tarjetas blancas resalten.
============================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

body {
    font-family: 'DM Sans', sans-serif;
    background-color: #F0F4FF;
}

/* Degradado del menú lateral — Tailwind CDN no genera clases de
   degradado personalizado, así que se aplica como estilo inline
   en cada página: style="background:linear-gradient(180deg,#0D2051 0%,#0A1840 100%)" */

/* ------------------------------------------------------------
   NAV-PILL: enlaces de navegación con forma de botón solo al
   pasar el cursor.
------------------------------------------------------------ */
.nav-pill {
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none !important;
}
.nav-pill:hover {
    background-color: rgba(26, 78, 216, 0.08);
}

/* Ítem del menú lateral, activo e inactivo */
.side-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #93C5FD;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.side-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
}
.side-link--activo {
    background-color: rgba(234, 106, 46, 0.18);
    color: #ffffff;
}
.side-link--salir {
    color: #60A5FA;
}

/* ------------------------------------------------------------
   Accesibilidad
------------------------------------------------------------ */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid #1A4ED8;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------------------------
   MENÚ LATERAL RESPONSIVO
   En pantallas angostas (celular/tablet), el menú lateral se
   oculta por defecto y se desliza como panel superpuesto al
   presionar el botón de hamburguesa — en vez de comprimirse
   ilegible dentro de la pantalla, como pasaba antes.
------------------------------------------------------------ */
@media (max-width: 1023px) {
    .app-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .app-sidebar.is-open {
        transform: translateX(0);
    }
    .app-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(8, 16, 40, 0.5);
        z-index: 30;
    }
    .app-sidebar-backdrop.is-open {
        display: block;
    }
}