* {
    box-sizing: border-box;
}

html,
body {
    width                       : 100%;
    height                      : 100%;
    margin                      : 0;
    padding                     : 0;
}

body {
    background                  : var(--fondo-principal-admin);
    color                       : var(--texto-principal-admin);
    font-family                 : var(--fuente-principal-admin);
    overflow                    : hidden;
}

/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */
.admin {
    width                       : 100%;
    height                      : 100vh;
    display                     : flex;
    flex-direction              : column;
    overflow                    : hidden;
}

/* =========================================================
   BARRA SUPERIOR
   ========================================================= */
.barra-superior {
    width                       : 100%;
    height                      : 64px;
    display                     : flex;
    align-items                 : center;
    justify-content             : space-between;
    padding                     : 0 20px;
    background                  : var(--fondo-panel-admin);
    border-bottom               : var(--borde-fino-admin);
    box-shadow                  : var(--sombra-suave-admin);
    flex-shrink                 : 0;
    z-index                     : 20;
}

/* =========================================================
   PARTE IZQUIERDA
   ========================================================= */
.barra-izquierda {
    display                     : flex;
    align-items                 : center;
    min-width                   : 0;
}

/* =========================================================
   BOTÓN MENÚ
   ========================================================= */
.boton-menu {
    width                       : 38px;
    height                      : 38px;
    display                     : flex;
    flex-direction              : column;
    align-items                 : center;
    justify-content             : center;
    gap                         : 5px;
    margin-right                : 14px;
    padding                     : 0;
    background                  : transparent;
    border                      : var(--borde-fino-admin);
    border-radius               : var(--radio-pequeno-admin);
    cursor                      : pointer;
    transition                  : var(--transicion-rapida-admin);
}

.boton-menu span {
    width                       : 18px;
    height                      : 2px;
    display                     : block;
    background                  : var(--color-vivo-admin);
    border-radius               : 2px;
}

.boton-menu:hover {
    border-color                : var(--color-vivo-admin);
    background                  : var(--admin-dorado-hover);
}

/* =========================================================
   MARCA
   ========================================================= */
.marca-admin {
    display                     : flex;
    align-items                 : center;
    gap                         : 9px;
    white-space                 : nowrap;
    overflow                    : hidden;
}

.marca-nombre {
    color                       : var(--color-vivo-admin);
    font-size                   : 15px;
    font-weight                 : 700;
    letter-spacing              : 0.3px;
}

.marca-separador {
    color                       : var(--borde-admin);
}

.marca-area {
    color                       : var(--texto-secundario-admin);
    font-size                   : 13px;
}

/* =========================================================
   PARTE DERECHA
   ========================================================= */
.barra-derecha {
    display                     : flex;
    align-items                 : center;
    gap                         : 18px;
}

/* =========================================================
   USUARIO
   ========================================================= */
.usuario-admin {
    display                     : flex;
    flex-direction              : column;
    align-items                 : flex-end;
    gap: 2px;
}

.usuario-nombre {
    color                       : var(--texto-principal-admin);
    font-size                   : 13px;
    font-weight                 : 600;
}

.usuario-rol {
    color                       : var(--texto-secundario-admin);
    font-size                   : 10px;
}

/* =========================================================
   BOTÓN CERRAR SESIÓN
   ========================================================= */
.boton-salir {
    min-height                  : 36px;
    display                     : flex;
    align-items                 : center;
    justify-content             : center;
    padding                     : 0 14px;
    background                  : transparent;
    border                      : var(--borde-fino-admin);
    border-radius               : var(--radio-pequeno-admin);
    color                       : var(--texto-secundario-admin);
    text-decoration             : none;
    font-size                   : 12px;
    transition                  : var(--transicion-rapida-admin);
}

.boton-salir:hover {
    color                       : var(--color-vivo-admin);
    border-color                : var(--color-vivo-admin);
    background                  : var(--admin-dorado-hover);
}

/* =========================================================
   CUERPO DEL ADMINISTRADOR
   ========================================================= */
.admin-cuerpo {
    width                       : 100%;
    min-width                   : 0;
    min-height                  : 0;
    flex                        : 1;
    display                     : flex;
    overflow                    : hidden;
}

/* =========================================================
   MENÚ LATERAL
   ========================================================= */
.menu-lateral {
    width                       : 245px;
    height                      : 100%;
    display                     : flex;
    flex-direction              : column;
    padding                     : 20px 14px;
    background                  : var(--fondo-panel-admin);
    border-right                : var(--borde-fino-admin);
    overflow-x                  : hidden;
    overflow-y                  : auto;
    flex-shrink                 : 0;
    transition                  :width var(--transicion-normal-admin), padding var(--transicion-normal-admin);
}

/* =========================================================
   SECCIONES DEL MENÚ
   ========================================================= */
.menu-seccion {
    margin-bottom               : 22px;
}

.menu-titulo {
    display                     : block;
    margin                      : 0 10px 8px;
    color                       : var(--texto-secundario-admin);
    font-size                   : 10px;
    font-weight                 : 700;
    letter-spacing: 1px;
}

/* =========================================================
   ELEMENTOS DEL MENÚ
   ========================================================= */
.menu-item {
    width                       : 100%;
    min-height                  : 42px;
    display                     : flex;
    align-items                 : center;
    gap                         : 12px;
    margin-bottom               : 4px;
    padding                     : 0 12px;
    background                  : transparent;
    border                      : 1px solid transparent;
    border-radius               : var(--radio-pequeno-admin);
    color                       : var(--texto-secundario-admin);
    text-decoration             : none;
    font-size                   : 13px;
    transition                  : var(--transicion-rapida-admin);
}

.menu-item:hover {
    color                       : var(--texto-principal-admin);
    background                  : rgba(242, 201, 76, 0.06);
    border-color                : rgba(242, 201, 76, 0.15);
}

.menu-item.activo {
    color                       : var(--color-vivo-admin);
    background                  : rgb(242 201 76 / 0.10);
    border-color                : rgba(242, 201, 76, 0.25);
}

/* =========================================================
   ICONOS DEL MENÚ
   ========================================================= */
.menu-icono {
    width                       : 24px;
    display                     : flex;
    align-items                 : center;
    justify-content             : center;
    flex-shrink                 : 0;
    color                       : var(--color-vivo-admin);
    font-size                   : 16px;
}

.menu-texto {
    white-space                 : nowrap;
}

/* =========================================================
   VERSIÓN
   ========================================================= */
.menu-version {
    margin-top                  : auto;
    padding                     : 14px 10px 0;
    border-top                  : var(--borde-fino-admin);
    color                       : var(--texto-secundario-admin);
    font-size                   : 10px;
    line-height                 : 1.6;
}

.menu-version span {
    display                     : block;
    color                       : var(--color-dorado-admin);
}

/* =========================================================
   MENÚ COLAPSADO
   ========================================================= */
.menu-lateral.colapsado {
    width                       : 72px;
    padding-left                : 10px;
    padding-right               : 10px;
}

.menu-lateral.colapsado .menu-titulo,
.menu-lateral.colapsado .menu-texto,
.menu-lateral.colapsado .menu-version {
    display                     : none;
}

.menu-lateral.colapsado .menu-item {
    justify-content             : center;
    padding-left                : 0;
    padding-right               : 0;
}

.menu-lateral.colapsado .menu-icono {
    width                       : 100%;
}

/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */
.contenido {
    min-width                   : 0;
    min-height                  : 0;
    flex                        : 1;
    padding                     : 34px;
    overflow-x                  : hidden;
    overflow-y                  : auto;
}

/* =========================================================
   CABECERA DEL CONTENIDO
   ========================================================= */
.contenido-cabecera {
    margin-bottom               : 28px;
}

.contenido-miga {
    display                     : block;
    margin-bottom               : 8px;
    color                       : var(--color-dorado-admin);
    font-size                   : 10px;
    font-weight                 : 700;
    letter-spacing              : 1.2px;
}

.contenido-cabecera h1 {
    margin                      : 0;
    color                       : var(--texto-principal-admin);
    font-size                   : 28px;
    font-weight                 : 600;
}

.contenido-cabecera p {
    margin                      : 8px 0 0;
    color                       : var(--texto-secundario-admin);
    font-size                   : 13px;
}

/* =========================================================
   TARJETAS
   ========================================================= */
.tarjetas {
    display                     : grid;
    grid-template-columns       : repeat(3, minmax(0, 1fr));
    gap                         : 18px;
    margin-bottom               : 24px;
}

.tarjeta {
    min-height                  : 150px;
    display                     : flex;
    align-items                 : flex-start;
    gap                         : 16px;
    padding                     : 22px;
    background                  : var(--fondo-panel-admin);
    border                      : var(--borde-fino-admin);
    border-radius               : var(--radio-medio-admin);
    transition                  : var(--transicion-normal-admin);
}

.tarjeta:hover {
    border-color                : rgba(242, 201, 76, 0.35);
    transform                   : translateY(-2px);
    box-shadow                  : var(--sombra-suave-admin);
}

.tarjeta-icono {
    width                       : 42px;
    height                      : 42px;
    display                     : flex;
    align-items                 : center;
    justify-content             : center;
    flex-shrink                 : 0;
    background                  : rgb(242 201 76 / 0.10);
    border-radius               : var(--radio-pequeno-admin);
    color                       : var(--color-vivo-admin);
    font-size                   : 20px;
}

.tarjeta-contenido {
    min-width                   : 0;
}

.tarjeta-contenido span {
    display                     : block;
    margin-bottom               : 5px;
    color                       : var(--texto-secundario-admin);
    font-size                   : 9px;
    font-weight                 : 700;
    letter-spacing              : 1px;
}

.tarjeta-contenido strong {
    display                     : block;
    color                       : var(--texto-principal-admin);
    font-size                   : 16px;
    font-weight                 : 600;
}

.tarjeta-contenido p {
    margin                      : 8px 0 0;
    color                       : var(--texto-secundario-admin);
    font-size                   : 12px;
    line-height                 : 1.5;
}

/* =========================================================
   PANEL DE BIENVENIDA
   ========================================================= */
.panel-bienvenida {
    display                     : flex;
    align-items                 : center;
    gap                         : 22px;
    padding                     : 28px;
    background                  : linear-gradient(135deg, rgb(242 201 76 / 0.10), var(--fondo-panel-admin));
    border                      : 1px solid rgba(242, 201, 76, 0.20);
    border-radius               : var(--radio-medio-admin);
}

.bienvenida-icono {
    width                       : 58px;
    height                      : 58px;
    display                     : flex;
    align-items                 : center;
    justify-content             : center;
    flex-shrink                 : 0;
    border                      : 1px solid rgba(242, 201, 76, 0.40);
    border-radius               : 50%;
    color                       : var(--color-vivo-admin);
    font-size                   : 26px;
    font-weight                 : 700;
}

.panel-bienvenida span {
    color                       : var(--color-dorado-admin);
    font-size                   : 10px;
    font-weight                 : 700;
    letter-spacing              : 1px;
}

.panel-bienvenida h2 {
    margin                      : 6px 0 8px;
    color                       : var(--texto-principal-admin);
    font-size                   : 18px;
    font-weight                 : 600;
}

.panel-bienvenida p {
    max-width                   : 720px;
    margin                      : 0;
    color                       : var(--texto-secundario-admin);
    font-size                   : 13px;
    line-height                 : 1.6;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */
.menu-lateral::-webkit-scrollbar,
.contenido::-webkit-scrollbar {
    width                       : 7px;
}

.menu-lateral::-webkit-scrollbar-track,
.contenido::-webkit-scrollbar-track {
    background                  : transparent;
}

.menu-lateral::-webkit-scrollbar-thumb,
.contenido::-webkit-scrollbar-thumb {
    background                  : rgba(242, 201, 76, 0.20);
    border-radius               : 10px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
    .tarjetas {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .marca-separador,
    .marca-area,
    .usuario-admin {
        display: none;
    }

    .barra-superior {
        padding: 0 14px;
    }

    .menu-lateral {
        width: 72px;

        padding-left: 10px;
        padding-right: 10px;
    }

    .menu-titulo,
    .menu-texto,
    .menu-version {
        display: none;
    }

    .menu-item {
        justify-content: center;

        padding-left: 0;
        padding-right: 0;
    }

    .menu-icono {
        width: 100%;
    }

    .contenido {
        padding: 24px;
    }
}

@media (max-width: 600px) {

    .barra-superior {
        height: 58px;
    }

    .boton-salir {
        padding: 0 10px;

        font-size: 11px;
    }

    .tarjetas {
        grid-template-columns: 1fr;
    }

    .contenido {
        padding: 18px;
    }

    .contenido-cabecera h1 {
        font-size: 24px;
    }

    .panel-bienvenida {
        align-items: flex-start;
        padding: 20px;
    }

    .bienvenida-icono {
        width: 46px;
        height: 46px;
        font-size: 21px;
    }
}