/* Spacing, radios, border-width, y clases muy generales (shell de la app:
   sidebar, boton-como-link). Colores y tipografia van en tokens.css. */

:root {
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    --radius: 4px;
    --border-width: 1px;

    /* Area de toque minima recomendada para controles tactiles (stepper de
       Recuento, niveles de botella abierta, etc.) -- mismo valor que ya
       usaba --hamburger-size antes de esta variable, compuesto a partir de
       los mismos tokens de spacing en vez de un px suelto. */
    --touch-target: calc(var(--space-xl) + var(--space-xs));

    /* Dimensiones estructurales del shell de la app */
    --sidebar-width: 240px;
    --hamburger-size: var(--touch-target);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
    min-height: 100vh;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   App shell: sidebar de navegacion + area de contenido.
   Mobile-first: la sidebar vive fuera de pantalla (a la derecha) y se
   despliega como panel deslizante. A partir de 768px queda fija a la
   izquierda y el contenido se corre.
   ------------------------------------------------------------------- */

.app-shell {
    min-height: 100vh;
}

.app-content-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-content {
    padding: var(--space-md);
    min-height: 100vh;
}

/* Header mobile: titulo de la pagina + boton hamburguesa, misma fila.
   Vive en flujo normal del documento (no fixed), asi que el contenido
   de abajo no necesita padding de compensacion. */
.mobile-header {
    position: relative;
    z-index: 45;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
}

.mobile-header__title {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    font-weight: 600;
}

.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--sidebar-width), 80vw);
    display: flex;
    flex-direction: column;
    padding: var(--space-lg) var(--space-md);
    background: var(--color-surface);
    border-left: var(--border-width) solid var(--color-border);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    z-index: 50;
}

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

.sidebar__scrim {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 40;
}

.sidebar__logo {
    width: calc(var(--space-xl) * 3);
    height: auto;
    margin-bottom: var(--space-md);
    align-self: center;
}

.sidebar__brand {
    margin: 0 0 var(--space-lg);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.sidebar__nav-link {
    display: block;
    padding: var(--space-md);
    border-radius: var(--radius);
    border-left: calc(var(--border-width) * 3) solid transparent;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-base);
}

.sidebar__nav-link:hover {
    background: var(--color-primary-dark);
}

.sidebar__nav-link--active {
    border-left-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

.sidebar__footer {
    margin-top: auto;
    padding-top: var(--space-lg);
    border-top: var(--border-width) solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sidebar__user {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.sidebar__logout-form {
    margin: 0;
}

/* Boton hamburguesa (solo mobile). Vive dentro de .mobile-header, ya no
   flota fuera del flujo del documento. */
.sidebar__hamburger {
    width: var(--hamburger-size);
    height: var(--hamburger-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.sidebar__hamburger span {
    display: block;
    width: calc(var(--space-lg) - var(--space-xs));
    height: calc(var(--border-width) * 2);
    background: var(--color-text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.sidebar__hamburger--active span:nth-child(1) {
    transform: translateY(var(--space-sm)) rotate(45deg);
}

.sidebar__hamburger--active span:nth-child(2) {
    opacity: 0;
}

.sidebar__hamburger--active span:nth-child(3) {
    transform: translateY(calc(var(--space-sm) * -1)) rotate(-45deg);
}

@media (min-width: 768px) {
    .app-shell {
        display: flex;
    }

    .sidebar__hamburger,
    .sidebar__scrim,
    .mobile-header {
        display: none;
    }

    .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        right: auto;
        width: var(--sidebar-width);
        height: 100vh;
        flex-shrink: 0;
        transform: none;
        border-left: none;
        border-right: var(--border-width) solid var(--color-border);
    }

    .app-content-wrap {
        flex: 1;
        min-width: 0;
    }

    .app-content {
        padding: var(--space-lg);
    }

    .has-sidebar .app-content {
        padding-top: var(--space-lg);
    }
}