/* public/assets/css/components/nav-secciones.css
   Componente: panel de accesos rapidos por secciones (estilo "hub" tomado
   de CONSULTORIA: APP/assets/css/modulos/nav_completo.css /
   .contenedor_nav_completo + .nav_completo). Se usa en el dashboard como
   punto de entrada a los distintos modulos de la app (Mi perfil y los que
   se vayan anadiendo). Cada tarjeta es un <li><a>; anade
   la clase .app-nav-seccion-proximamente para modulos aun no implementados
   (no navegables, con etiqueta "Proximamente").

   .app-section-full hace que el degradado ocupe TODO el espacio disponible
   entre cabecera y footer, a sangre (sin el margen del contenedor central
   .app-main ni el gris de fondo alrededor), igual que .contenedor_nav_completo
   en CONSULTORIA (ancho completo, sin tarjeta flotando sobre el fondo). */

/* Las pantallas tipo "hub" (dashboard y cualquier otra que reutilice este
   panel, p. ej. el portal Mis aplicaciones con bodyClass app-hub-page)
   necesitan que .app-main sea un contenedor flex en columna y sin relleno
   vertical, para que el degradado llegue de verdad hasta la cabecera y el
   footer sin dejar franjas del fondo gris de la pagina. */
body.app-dashboard-page .app-main,
body.app-hub-page .app-main {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
    max-width: 100%;
}

.app-section-full {
    /* Contrarresta el padding lateral de .app-main para llegar a los
       bordes reales del viewport (a sangre). */
    margin: 0 calc(-1 * clamp(var(--app-space-lg), 2vw, var(--app-space-xl)));
    width: calc(100% + clamp(18px, 2vw, 32px) * 2);
    flex: 1;
    display: flex;
}

.app-nav-secciones {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    background: var(--app-gradient);
    /* Ancla el degradado al viewport, igual que la cabecera y el footer,
       para que las tres cajas (de alturas muy distintas) sigan leyendo
       exactamente el mismo punto de color y no se note ningun corte. */
    background-attachment: fixed;
}
.app-nav-secciones::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(90px, 14vw, 320px);
    height: 100%;
    background: var(--app-primary-dark);
    opacity: .18;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    pointer-events: none;
}

.app-nav-secciones-inner {
    position: relative;
    width: 100%;
    max-width: var(--app-container-max);
    margin: 0 auto;
    padding: var(--app-space-lg) var(--app-space-md);
}
@media (min-width: 871px) {
    .app-nav-secciones-inner { padding: clamp(var(--app-space-xl), 5vw, var(--app-space-xxl)) clamp(var(--app-space-lg), 4vw, var(--app-space-xl)); }
}

.app-saludo {
    margin-bottom: var(--app-space-lg);
}

.app-saludo-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--app-space-sm);
    padding: .25rem .7rem;
    border-radius: 999px;
    background: rgba(var(--app-on-primary-rgb), 0.16);
    border: 1px solid rgba(var(--app-on-primary-rgb), 0.28);
    color: rgba(var(--app-on-primary-rgb), 0.92);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.app-saludo-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--app-on-primary);
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.app-saludo-nombre {
    position: relative;
    background: linear-gradient(120deg, var(--app-on-primary) 0%, var(--app-tono-75) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.app-saludo-nombre::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.1em;
    height: .08em;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--app-tono-75), transparent);
    opacity: .8;
}

.app-saludo-sub {
    margin: var(--app-space-xs) 0 0;
    color: rgba(var(--app-on-primary-rgb), 0.78);
    font-size: .85rem;
}

/* Barra de acciones en la parte superior del panel, en lugar del saludo
   (p. ej. "Configurar mis accesos" en el portal Mis aplicaciones). Boton con
   el mismo lenguaje "cristal" que las tarjetas: a ancho completo en movil y
   alineado a la derecha desde 481px. */
.app-nav-secciones-acciones {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--app-space-lg);
}
.app-nav-secciones-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-sm);
    width: 100%;
    padding: var(--app-space-sm) var(--app-space-lg);
    border-radius: 999px;
    background: rgba(var(--app-on-primary-rgb), 0.16);
    border: 1px solid rgba(var(--app-on-primary-rgb), 0.32);
    backdrop-filter: blur(8px);
    color: var(--app-on-primary);
    font-size: clamp(.8rem, 1.2vw, .9rem);
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.app-nav-secciones-accion svg { display: block; flex-shrink: 0; }
.app-nav-secciones-accion:hover {
    background: rgba(var(--app-on-primary-rgb), 0.26);
    border-color: rgba(var(--app-on-primary-rgb), 0.46);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
.app-nav-secciones-accion:focus-visible { outline: 2px solid var(--app-on-primary); outline-offset: 2px; }
@media (min-width: 481px) {
    .app-nav-secciones-accion { width: auto; }
}

.app-nav-secciones-lista {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--app-space-md);
    list-style: none;
}
@media (min-width: 871px) {
    .app-nav-secciones-lista { gap: var(--app-space-lg); }
}

.app-nav-seccion {
    flex: 1 1 100%;
    min-height: 110px;
    border-radius: var(--app-radius-lg);
    background: rgba(var(--app-on-primary-rgb), 0.14);
    border: 1px solid rgba(var(--app-on-primary-rgb), 0.26);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Una tarjeta puede ser un enlace o un <button> dentro de un <form> (acciones
   que van por POST, p. ej. abrir una aplicacion enlazada con CSRF): el boton
   se resetea para verse identico al enlace. */
.app-nav-seccion form { height: 100%; }
.app-nav-seccion button {
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}
.app-nav-seccion a,
.app-nav-seccion button {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-md);
    padding: var(--app-space-lg) var(--app-space-md);
    box-sizing: border-box;
    color: var(--app-on-primary);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
@media (min-width: 871px) {
    .app-nav-seccion a,
    .app-nav-seccion button { font-size: 1rem; padding: var(--app-space-lg) var(--app-space-lg); }
}
.app-nav-seccion button:focus-visible,
.app-nav-seccion a:focus-visible { outline: 2px solid var(--app-on-primary); outline-offset: -4px; border-radius: var(--app-radius-lg); }
.app-nav-seccion:hover {
    transform: translateY(-6px);
    background: rgba(var(--app-on-primary-rgb), 0.24);
    border-color: rgba(var(--app-on-primary-rgb), 0.42);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}
.app-nav-seccion-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--app-on-primary-rgb), 0.22);
    font-size: var(--app-text-lg);
}
@media (min-width: 871px) {
    .app-nav-seccion-icono { width: 52px; height: 52px; font-size: var(--app-text-xl); }
}
/* Iconos SVG en linea (mismo lenguaje minimalista que el resto de la app):
   heredan el color del texto blanco de la tarjeta via currentColor. */
.app-nav-seccion-icono svg { display: block; }
/* Imagen de la tarjeta (logo personalizado o favicon de una aplicacion
   enlazada): mismo criterio que el logo de la cabecera (header.css,
   .app-brand-logo/.app-brand-logo-box), nunca recortada en circulo: alto
   fijo, ancho segun su proporcion (hasta el ancho de la tarjeta) y el logo
   entero con object-fit: contain. Sin fondo flota sobre el cristal de la
   tarjeta; con fondo claro (favicons y logos oscuros) va en una caja blanca
   redondeada, igual que el logo de la cabecera. */
.app-nav-seccion-icono-imagen {
    width: auto;
    height: 52px;
    max-width: 100%;
    border-radius: 0;
    background: none;
}
.app-nav-seccion-icono-imagen img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.app-nav-seccion-icono-claro {
    padding: var(--app-space-xs) var(--app-space-sm);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface);
    box-sizing: border-box;
}
@media (min-width: 871px) {
    .app-nav-seccion-icono-imagen { width: auto; height: 60px; }
}

/* Modulo aun no implementado: se muestra en la misma cuadricula (para
   previsualizar la estructura final del hub) pero sin enlace navegable. */
.app-nav-seccion-proximamente { opacity: .75; cursor: default; }
.app-nav-seccion-proximamente:hover { transform: none; background: rgba(var(--app-on-primary-rgb), 0.14); border-color: rgba(var(--app-on-primary-rgb), 0.26); box-shadow: none; }
.app-nav-seccion-proximamente a { cursor: default; }
.app-nav-seccion-etiqueta {
    display: inline-flex;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(var(--app-on-primary-rgb), 0.28);
    color: var(--app-on-primary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Mobile-first: la base ya es la tarjeta a ancho completo (movil); a partir
   de 481px pasa a "tarjeta de tamaño fijo en fila" (tablet), y a partir de
   871px al resto de ajustes de escritorio (ver arriba, junto a cada
   propiedad). */
@media (min-width: 481px) {
    .app-nav-seccion { flex: 0 1 160px; min-height: 150px; }
}
@media (min-width: 871px) {
    .app-nav-seccion { flex: 0 1 210px; min-height: 180px; }
}