/*
 * UiMetadata.Sidebar — chrome + mecánica del sidebar/app-shell
 *
 * Retokenizado (docs/css-theming-audit.md, Grupo B): cada var(--x) de color
 * tiene ahora fallback = el valor que EcoTrack ya tiene definido hoy para
 * ese token en theme-dark.css — el fallback nunca se activa mientras
 * EcoTrack siga definiendo estas variables (así que esto no cambia nada
 * visualmente en la app actual), pero un consumidor nuevo sin ningún tema
 * propio ahora obtiene un sidebar con estilo completo en vez de sin
 * fondo/sombra/bordes. --card-shadow-hover no tenía valor real definido en
 * ningún lado (bug preexistente, ver auditoría) — su fallback es "none",
 * el resultado que ya se estaba viendo hoy (var() indefinida = inválida =
 * la propiedad cae a su valor inicial).
 *
 * Segunda tanda (Grupo B): los valores de espaciado/radio/tamaño de ícono/
 * tipografía que se REPETÍAN literalmente en 2+ lugares del archivo ahora
 * son --sidebar-radius-sm/-md/-lg/-pill, --sidebar-icon-size,
 * --sidebar-btn-size, --sidebar-icon-svg-size, --sidebar-gap-xs/-md,
 * --sidebar-font-size-xs/-sm — cada fallback es el valor literal exacto que
 * ya tenían todas las ocurrencias, así que tampoco cambia nada visualmente.
 * Dos casos (gap: 1rem del topbar, gap: 0.4rem de .app-sidebar-actions)
 * reusan var(--grid-gap-md)/var(--grid-gap-xs) en vez de crear un token
 * nuevo — coinciden exacto con tokens que grid.css ya define.
 *
 * A propósito NO se tokenizaron los valores que aparecían una sola vez
 * (ej. 28px del glow, 2.75rem del brand-mark, paddings compuestos) — no hay
 * evidencia de que debieran reusarse en otro lado, forzarlo sería
 * especulativo. Ver docs/css-theming-audit.md.
 */

body.sidebar-open {
    overflow: hidden;
}

/* dvh: la altura "dinámica" del viewport en móvil (excluye la barra de direcciones cuando está visible).
   100vh va primero como respaldo para navegadores sin dvh, que ignoran la segunda línea. */
.app-shell {
    min-height: 100vh;
    min-height: 100dvh;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 292px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    /* env(safe-area-inset-*) vale 0 salvo que la página pida viewport-fit=cover y el dispositivo tenga
       muesca/barra de gestos: entonces el menú no queda bajo la muesca ni bajo el indicador de inicio. */
    padding: calc(1.35rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--sidebar-bg, linear-gradient(180deg, rgba(24,27,54,.96) 0%, rgba(13,16,34,.98) 100%));
    border-right: 1px solid var(--glass-border, rgba(255,255,255,.08));
    box-shadow: var(--sidebar-shadow, 28px 0 60px rgba(0,0,0,.34));
    backdrop-filter: blur(18px);
    transition: width 0.24s ease, padding 0.24s ease;
}

.app-sidebar::before {
    content: "";
    position: absolute;
    inset: 1rem 1rem auto;
    height: 140px;
    border-radius: 28px;
    background: var(--sidebar-glow, radial-gradient(circle, rgba(123,47,247,.2), transparent 70%));
    pointer-events: none;
}

.app-sidebar-top,
.app-sidebar-footer,
.app-nav {
    position: relative;
    z-index: 1;
}

.app-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sidebar-gap-md, 0.8rem);
    margin-bottom: 1.25rem;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.app-brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 0.95rem;
    background: linear-gradient(135deg, var(--color-primary-light, #9b8ff7), var(--color-primary-strong, #7b41ff));
    color: var(--text-on-accent, #ffffff);
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: var(--sidebar-brand-shadow, 0 18px 40px rgba(123,65,255,.24));
    flex-shrink: 0;
}

.app-brand-copy {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-gap-xs, 0.15rem);
    min-width: 0;
    transition: opacity 0.18s ease, visibility 0.18s ease, width 0.18s ease;
}

.app-brand-title {
    color: var(--text-main-strong, #e2e0ff);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-brand-subtitle {
    color: var(--text-muted, #9090b0);
    font-size: 0.8rem;
}

.app-sidebar-close,
.app-sidebar-toggle,
.app-sidebar-collapse {
    border: 1px solid var(--glass-border, rgba(255,255,255,.08));
    background: var(--glass-bg, rgba(255,255,255,.04));
    color: var(--text-main, #ffffff);
    border-radius: var(--sidebar-radius-md, 0.9rem);
    cursor: pointer;
}

.app-sidebar-collapse {
    width: var(--sidebar-btn-size, 2.5rem);
    height: var(--sidebar-btn-size, 2.5rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.app-sidebar-collapse:hover {
    background: var(--glass-bg-stronger, rgba(255,255,255,.08));
    border-color: var(--glass-border-strong, rgba(255,255,255,.14));
}

.app-sidebar-collapse svg {
    width: 1rem;
    height: 1rem;
    stroke: var(--text-main-strong, #e2e0ff);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.app-sidebar-close {
    width: var(--sidebar-btn-size, 2.5rem);
    height: var(--sidebar-btn-size, 2.5rem);
    display: none;
    position: relative;
}

.app-sidebar-close span {
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    top: 1.2rem;
    height: 2px;
    background: var(--text-main-strong, #e2e0ff);
}

.app-sidebar-close span:first-child {
    transform: rotate(45deg);
}

.app-sidebar-close span:last-child {
    transform: rotate(-45deg);
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: var(--sidebar-gap-md, 0.8rem);
    padding: 0.72rem 0.78rem;
    border-radius: var(--sidebar-radius-lg, 1.05rem);
    border: 1px solid var(--transparent, transparent);
    color: var(--text-soft, #c0c0e0);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.app-nav-link:hover {
    transform: translateX(3px);
    background: var(--glass-bg-soft, rgba(255,255,255,.03));
    border-color: var(--glass-border-subtle, rgba(255,255,255,.04));
    color: var(--text-main, #ffffff);
}

.app-nav-link.is-active {
    background: var(--glass-bg-strong, rgba(255,255,255,.05));
    border-color: var(--interactive-accent-border, rgba(155,143,247,.18));
    color: var(--text-main, #ffffff);
    box-shadow: var(--sidebar-active-shadow, inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.16));
}

.app-nav-link-icon {
    min-width: var(--sidebar-icon-size, 2.2rem);
    height: var(--sidebar-icon-size, 2.2rem);
    display: grid;
    place-items: center;
    border-radius: var(--sidebar-radius-sm, 0.8rem);
    background: var(--glass-bg-strong, rgba(255,255,255,.05));
    color: var(--text-main-strong, #e2e0ff);
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.app-nav-link:hover .app-nav-link-icon,
.app-nav-link.is-active .app-nav-link-icon {
    background: var(--interactive-accent-soft, rgba(155,143,247,.14));
}

.app-nav-link-icon svg {
    width: var(--sidebar-icon-svg-size, 1.05rem);
    height: var(--sidebar-icon-svg-size, 1.05rem);
    stroke: currentColor;
    stroke-width: 1.85;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-nav-link-copy {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    min-width: 0;
    transition: opacity 0.18s ease, visibility 0.18s ease, width 0.18s ease;
}

.app-nav-link-title {
    font-size: var(--sidebar-font-size-sm, 0.9rem);
    font-weight: 500;
}

.app-nav-link-subtitle {
    color: var(--text-muted, #9090b0);
    font-size: 0.73rem;
}

.app-sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    transition: opacity 0.18s ease, visibility 0.18s ease, width 0.18s ease;
}

.app-sidebar-actions {
    display: grid;
    gap: var(--grid-gap-xs, 0.4rem);
    margin-bottom: 0.6rem;
}

.app-sidebar-logout-form {
    margin: 0;
}

.app-sidebar-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sidebar-gap-md, 0.8rem);
    padding: 0.55rem 0.78rem;
    border-radius: var(--sidebar-radius-lg, 1.05rem);
    border: 1px solid var(--glass-border-soft, rgba(255,255,255,.06));
    background: var(--glass-bg-soft, rgba(255,255,255,.03));
    color: var(--text-main, #ffffff);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.app-sidebar-action:hover {
    transform: translateY(-1px);
    border-color: var(--interactive-accent-border, rgba(155,143,247,.18));
    background: var(--glass-bg-strong, rgba(255,255,255,.05));
    box-shadow: var(--card-shadow-hover, none);
    color: var(--text-main, #ffffff);
}

.app-sidebar-action.is-active {
    border-color: var(--interactive-accent-border, rgba(155,143,247,.18));
    background: var(--glass-bg-strong, rgba(255,255,255,.05));
    box-shadow: var(--sidebar-active-shadow, inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.16));
}

.app-sidebar-action-logout {
    cursor: pointer;
}

.app-sidebar-action-icon {
    min-width: var(--sidebar-icon-size, 2.2rem);
    height: var(--sidebar-icon-size, 2.2rem);
    display: grid;
    place-items: center;
    border-radius: var(--sidebar-radius-sm, 0.8rem);
    background: var(--glass-bg-strong, rgba(255,255,255,.05));
    color: var(--text-main-strong, #e2e0ff);
    flex-shrink: 0;
}

.app-sidebar-action-icon svg {
    width: var(--sidebar-icon-svg-size, 1.05rem);
    height: var(--sidebar-icon-svg-size, 1.05rem);
    stroke: currentColor;
    stroke-width: 1.85;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-sidebar-action-copy {
    font-size: var(--sidebar-font-size-sm, 0.9rem);
    font-weight: 500;
}

.app-sidebar-note {
    padding: 0.65rem 0.85rem;
    border-radius: var(--sidebar-radius-md, 0.9rem);
    background: var(--glass-bg, rgba(255,255,255,.04));
    border: 1px solid var(--glass-border-soft, rgba(255,255,255,.06));
}

.app-sidebar-note-label {
    display: block;
    color: var(--text-muted, #9090b0);
    font-size: var(--sidebar-font-size-xs, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.app-sidebar-note-value {
    color: var(--text-main-strong, #e2e0ff);
    font-size: 0.98rem;
    font-weight: 600;
}

.app-main-shell {
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: 292px;
    transition: margin-left 0.24s ease;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: var(--grid-gap-md, 1rem);
    padding: 0.75rem 1.4rem 0.4rem;
    background: var(--topbar-bg, linear-gradient(180deg, rgba(11,13,29,.88) 0%, rgba(11,13,29,.35) 100%));
    backdrop-filter: blur(10px);
}

.app-sidebar-toggle {
    display: none;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    position: relative;
}

.app-sidebar-toggle span {
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    height: 2px;
    background: var(--text-main-strong, #e2e0ff);
    border-radius: var(--sidebar-radius-pill, 999px);
}

.app-sidebar-toggle span:nth-child(1) { top: 0.9rem; }
.app-sidebar-toggle span:nth-child(2) { top: 1.35rem; }
.app-sidebar-toggle span:nth-child(3) { top: 1.8rem; }

.app-topbar-copy {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-gap-xs, 0.15rem);
}

.app-topbar-eyebrow {
    color: var(--text-muted, #9090b0);
    font-size: var(--sidebar-font-size-xs, 0.72rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-topbar-title {
    color: var(--text-main, #ffffff);
    font-size: 1.15rem;
    font-weight: 700;
}

.app-main-content {
    padding: 0 1.4rem 1.4rem;
}

.app-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay-soft, rgba(5,7,18,.45));
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
    z-index: 20;
}

body.sidebar-collapsed .app-sidebar {
    width: 92px;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

body.sidebar-collapsed .app-main-shell {
    margin-left: 92px;
}

body.sidebar-collapsed .app-brand-copy,
body.sidebar-collapsed .app-nav-link-copy,
body.sidebar-collapsed .app-sidebar-note,
body.sidebar-collapsed .app-sidebar-action-copy {
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    display: none;
}

body.sidebar-collapsed .app-sidebar-note,
body.sidebar-collapsed .app-sidebar-action-copy {
    width: 0;
}

body.sidebar-collapsed .app-sidebar-top {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    padding-top: 0;
}

body.sidebar-collapsed .app-brand {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

body.sidebar-collapsed .app-brand-mark {
    margin-inline: auto;
}

body.sidebar-collapsed .app-sidebar-collapse {
    position: static;
    width: 2rem;
    height: 2rem;
    border-radius: var(--sidebar-radius-pill, 999px);
    background: var(--glass-bg, rgba(255,255,255,.04));
    border-color: var(--glass-border, rgba(255,255,255,.08));
    box-shadow: none;
    order: -1;
    margin: 0 auto;
}

body.sidebar-collapsed .app-sidebar-collapse svg {
    transform: rotate(180deg);
}

body.sidebar-collapsed .app-nav-link {
    display: block;
    text-align: center;
    padding: 0.45rem 0;
    background: none;
    border-color: var(--transparent, transparent);
    box-shadow: none;
}

body.sidebar-collapsed .app-nav-link:hover,
body.sidebar-collapsed .app-nav-link.is-active {
    transform: none;
    background: none;
    border-color: var(--transparent, transparent);
    box-shadow: none;
    text-align: center;
}

body.sidebar-collapsed .app-nav-link-icon {
    display: inline-grid;
    place-items: center;
    background: var(--glass-bg-strong, rgba(255,255,255,.05));
}

body.sidebar-collapsed .app-nav-link:hover .app-nav-link-icon {
    background: var(--glass-bg-stronger, rgba(255,255,255,.08));
}

body.sidebar-collapsed .app-nav-link.is-active .app-nav-link-icon {
    background: var(--interactive-accent-glow, linear-gradient(135deg, rgba(123,47,247,.34), rgba(111,124,255,.22)));
    box-shadow: var(--sidebar-icon-active-shadow, 0 10px 22px rgba(40,26,97,.28));
}

body.sidebar-collapsed .app-sidebar-actions {
    justify-items: center;
}

body.sidebar-collapsed .app-sidebar-action {
    justify-content: center;
    gap: 0;
    width: auto;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

/* Breakpoint alineado a la tablet/desktop acordada en la auditoría
   responsive (Fase 2) — antes era 991.98px, un literal Bootstrap-style sin
   relación con ningún token; ahora 1023px, el techo del rango "tablet"
   (600-1023px) que también usa common.css. Desktop-first a propósito (ver
   decisión de Fase 2): la base arriba asume desktop, esto solo la
   sobreescribe hacia abajo. */
@media (max-width: 1023px) {
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        /* Cajón que sale del borde izquierdo: en horizontal con muesca ese borde es el de la muesca. */
        padding-left: calc(1rem + env(safe-area-inset-left, 0px));
    }

    body.sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .app-overlay {
        opacity: 1;
        visibility: visible;
    }

    .app-main-shell {
        margin-left: 0;
    }

    .app-sidebar-close,
    .app-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Zona táctil ≥44px real, en px fijo — no en rem: el disparador del
           menú móvil no puede depender del override de html{font-size:14px}
           de common.css (con eso, 2.9rem quedaban en ~40.6px, por debajo del
           mínimo). Ver responsive-audit-report.md, hallazgo I2. */
        min-width: 44px;
        min-height: 44px;
    }

    .app-sidebar-collapse {
        display: none;
    }

    .app-topbar,
    .app-main-content {
        padding-left: calc(1rem + env(safe-area-inset-left, 0px));
        padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    }
}