/* ============================================================================
   SIDEBAR GLOBAL — Gestión Gama
   ----------------------------------------------------------------------------
   Barra de navegación lateral compartida por las 9 pantallas principales de
   gestión. Reutiliza el lenguaje visual del login: cuadro de icono a la
   izquierda, texto en mayúsculas con letter-spacing, barra de acento que crece
   al activarse y franja dorada superior.

   Igual que login.css, no declara ningún color literal: todo viene de las
   variables de temas.css, así la sidebar acompaña el cambio de tema.

   Estados: expandida (172px) y colapsada (52px, solo iconos).
   El despliegue se controla con el botón hamburguesa del encabezado.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   LAYOUT GENERAL

   El sistema usa un layout de dos columnas: la sidebar fija a la izquierda y
   el contenido ocupando el resto. Se resuelve con margin-left en el contenido
   en lugar de flex, para que la sidebar pueda ser position: fixed y quedarse
   quieta mientras el contenido hace scroll.
   --------------------------------------------------------------------------- */
.layout-contenido {
    margin-left: var(--sidebar-ancho);
    min-height: 100vh;
    padding: 1.5rem;
    transition: margin-left 0.25s ease;
    box-sizing: border-box;
}

/* Cuando la sidebar está colapsada, el contenido recupera ese espacio */
body.sidebar-colapsada .layout-contenido {
    margin-left: var(--sidebar-ancho-min);
}

/* ---------------------------------------------------------------------------
   CONTENEDOR DE LA SIDEBAR
   --------------------------------------------------------------------------- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-ancho);
    background: var(--card-bg);
    border-right: 1px solid var(--card-border);
    box-shadow: var(--card-sombra);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.25s ease;
    box-sizing: border-box;

    /* overflow-x: hidden evita que los textos asomen durante la transición de
       colapsado. overflow-y: auto permite scroll si la pantalla es baja y los
       9 items no entran. */
    overflow-x: hidden;
    overflow-y: auto;
}

body.sidebar-colapsada .sidebar {
    width: var(--sidebar-ancho-min);
}

/* Franja dorada superior, igual que la de la tarjeta de login */
.sidebar::before {
    content: "";
    display: block;
    height: 2px;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--acento-oscuro) 20%,
        var(--acento) 50%,
        var(--acento-oscuro) 80%,
        transparent 100%
    );
}

/* ---------------------------------------------------------------------------
   ENCABEZADO: LOGO + BOTÓN HAMBURGUESA

   El botón va a la derecha del encabezado. Al colapsar, el logo se oculta y el
   botón queda centrado, ocupando todo el ancho disponible.
   --------------------------------------------------------------------------- */
.sidebar-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 9px 8px;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--acento), transparent) 1;
    flex-shrink: 0;
}

.sidebar-marca {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.sidebar-marca .icono-titulo {
    width: 18px;
    height: 18px;
    color: var(--acento);
    flex-shrink: 0;
}

.sidebar-marca .titulo {
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--titulo-desde) 30%, var(--titulo-hasta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

/* Al colapsar se oculta la marca completa: no hay ancho para el texto y el
   icono duplicaría al del botón hamburguesa. */
body.sidebar-colapsada .sidebar-marca {
    opacity: 0;
    width: 0;
}

/* ---------------------------------------------------------------------------
   BOTÓN HAMBURGUESA

   Tres barras horizontales dibujadas con divs. Se usan elementos reales en vez
   de un SVG para poder animarlas: al colapsar, la barra del medio se acorta,
   dando una señal visual del estado sin cambiar de icono.
   --------------------------------------------------------------------------- */
.sidebar-hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 26px;
    height: 26px;
    padding: 5px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.sidebar-hamburguesa:hover {
    border-color: var(--acento);
}

.sidebar-hamburguesa span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--texto-secundario);
    transition: all 0.25s ease;
}

.sidebar-hamburguesa:hover span {
    background: var(--acento);
}

/* Barra del medio acortada en modo colapsado */
body.sidebar-colapsada .sidebar-hamburguesa span:nth-child(2) {
    width: 60%;
}

/* Centrado del botón cuando la marca desaparece */
body.sidebar-colapsada .sidebar-encabezado {
    justify-content: center;
    padding: 10px 0 8px;
}

/* ---------------------------------------------------------------------------
   NAVEGACIÓN
   --------------------------------------------------------------------------- */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 7px;
    flex: 1;
}

/* Etiqueta que agrupa secciones ("Operación", "Administración") */
.sidebar-grupo {
    font-size: 0.44rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--texto-secundario);
    padding: 7px 6px 3px;
    white-space: nowrap;
}

/* En modo colapsado las etiquetas de grupo no tienen sentido: no hay ancho
   para leerlas. Se reemplazan por una línea divisoria. */
body.sidebar-colapsada .sidebar-grupo {
    font-size: 0;
    padding: 6px 6px 3px;
    border-top: 1px solid var(--linea);
    margin-top: 3px;
}

/* ---------------------------------------------------------------------------
   ITEM DE NAVEGACIÓN

   Estructura idéntica a la de los campos del login: cuadro de icono + texto,
   con una barra de acento vertical que crece desde arriba al activarse.
   --------------------------------------------------------------------------- */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border: 1px solid transparent;
    background: transparent;
    text-decoration: none;
    position: relative;
    transition: all 0.25s ease;
    box-sizing: border-box;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    text-align: left;
}

/* Barra vertical de acento, misma mecánica que .login-campo::before */
.sidebar-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, var(--acento), var(--icono-color));
    transition: height 0.25s ease;
}

.sidebar-item:hover {
    background: var(--input-bg);
    border-color: var(--input-border-hover);
}

.sidebar-item:hover::before {
    height: 100%;
}

/* Estado activo: la pantalla en la que el usuario está parado */
.sidebar-item.activo {
    background: var(--input-bg);
    border-color: var(--acento);
}

.sidebar-item.activo::before {
    height: 100%;
}

/* ---- Cuadro del icono ---- */
.sidebar-item .icono-caja {
    width: 24px;
    height: 24px;
    background: var(--icono-bg);
    border: 1px solid var(--icono-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.sidebar-item:hover .icono-caja,
.sidebar-item.activo .icono-caja {
    background: var(--icono-bg-activo);
    border-color: var(--acento);
}

.sidebar-item .icono-caja svg {
    width: 12px;
    height: 12px;
    color: var(--icono-color);
    transition: all 0.25s ease;
}

.sidebar-item:hover .icono-caja svg,
.sidebar-item.activo .icono-caja svg {
    color: var(--acento);
}

/* ---- Texto del item ---- */
.sidebar-item .etiqueta {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--texto-secundario);
    white-space: nowrap;
    transition: color 0.25s ease, opacity 0.15s ease;
}

.sidebar-item:hover .etiqueta,
.sidebar-item.activo .etiqueta {
    color: var(--acento);
}

/* En modo colapsado el texto se oculta pero el elemento permanece en el DOM,
   para que los lectores de pantalla lo sigan anunciando. */
body.sidebar-colapsada .sidebar-item .etiqueta {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Centrado de los iconos en modo colapsado */
body.sidebar-colapsada .sidebar-item {
    justify-content: center;
    padding: 5px 0;
    gap: 0;
}

body.sidebar-colapsada .sidebar-nav {
    padding-left: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------------------
   PIE: USUARIO, TEMA Y CIERRE DE SESIÓN
   --------------------------------------------------------------------------- */
.sidebar-pie {
    padding: 8px 7px;
    border-top: 1px solid var(--linea);
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.sidebar-usuario {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    margin-bottom: 2px;
    /* Es el botón de Mi cuenta: sin el aspecto propio de un botón, para que
       se vea igual que el resto del pie. */
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s ease;
}

.sidebar-usuario:hover {
    border-color: var(--acento);
}

/* Círculo con la inicial del usuario */
.sidebar-usuario .avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--btn-bg);
    color: var(--btn-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 500;
    flex-shrink: 0;
}

.sidebar-usuario .datos {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.sidebar-usuario .nombre {
    display: block;
    font-size: 0.57rem;
    color: var(--input-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.sidebar-usuario .rol {
    display: block;
    font-size: 0.45rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--acento);
    white-space: nowrap;
    margin: 0;
}

body.sidebar-colapsada .sidebar-usuario {
    justify-content: center;
    padding: 4px 0;
    gap: 0;
}

body.sidebar-colapsada .sidebar-usuario .datos {
    opacity: 0;
    width: 0;
}

/* ---- Botones del pie ---- */
.sidebar-accion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--texto-secundario);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.sidebar-accion:hover {
    border-color: var(--acento);
    color: var(--acento);
}

.sidebar-accion svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-left: 6px;
}

.sidebar-accion .etiqueta {
    font-size: 0.53rem;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

/* El cierre de sesión es un formulario POST, no un enlace. El form no debe
   introducir espaciado propio: el botón interior ya trae el suyo. */
.sidebar-form {
    margin: 0;
    padding: 0;
    width: 100%;
}

body.sidebar-colapsada .sidebar-accion {
    justify-content: center;
    padding: 5px 0;
    gap: 0;
}

body.sidebar-colapsada .sidebar-accion svg {
    margin-left: 0;
}

body.sidebar-colapsada .sidebar-accion .etiqueta {
    opacity: 0;
    width: 0;
    overflow: hidden;
}



/* ---------------------------------------------------------------------------
   RESPONSIVE

   Por debajo de 768px la sidebar arranca colapsada, para no comerse la
   pantalla en dispositivos móviles (RNF-08).
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sidebar {
        width: var(--sidebar-ancho-min);
    }

    .layout-contenido {
        margin-left: var(--sidebar-ancho-min);
        padding: 1rem;
    }
}

/* ---------------------------------------------------------------------------
   ACCESIBILIDAD
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .layout-contenido,
    .sidebar-item,
    .sidebar-hamburguesa,
    .sidebar-hamburguesa span {
        transition: none;
    }
}