/*==========================================
CASA CHELY - LOGIN PROFESIONAL
============================================*/
:root {
    --color-principal: #16A34A;
    --color-principal-hover: #15803D;
    --color-principal-suave: rgba(22, 163, 74, 0.14);

    --color-blanco: #FFFFFF;
    --color-input: #FAFAFA;

    --color-texto: #1F2937;
    --color-gris: #6B7280;
    --color-borde: #D1D5DB;

    --color-error-fondo: #FEE2E2;
    --color-error-texto: #B91C1C;
}

/*==========================================
GENERALES
============================================*/

* {
    box-sizing: border-box;
}

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--color-blanco);
    color: var(--color-texto);
}

button,
input {
    font-family: inherit;
}

/*==========================================
PANTALLA PRINCIPAL
============================================*/

.pantalla-login {
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

/*==========================================
PANEL IZQUIERDO - FOTO 60%
============================================*/

.panel-izquierdo {
    flex: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding: 24px;
    background-image: 
    linear-gradient(
        rgba(0,0,0, 0.32),
        rgba(0,0,0, 0.32)
        ),
        url("/img/oficina.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-blanco);
    text-align: center;
}

.contenido-panel-izquierdo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 430px;
    transform: translateY(-28px);
}

.panel-izquierdo h2 {
    margin: 0 0 12px;
    font-size: clamp(34px, 3.6vw,48px);
    line-height: 1.05;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.46);
}

.panel-izquierdo > .contenido-panel-izquierdo > p {
    margin: 0;
    max-width: 390px;
    font-size: clamp(13px, 1.15vw, 15px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.97);
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.46);
}

/*==========================================
ACCESOS RÁPIDOS
============================================*/

.botones-acceso-rapido {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 350px;
    margin-top: 26px;
}

.texto-acceso {
    grid-column: 1 / -1;
    position: static;
    transform: none;
    margin: 0 0 2px;
    color: var(--color-blanco);
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.42);
}

.boton-opcion {
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(22, 163, 74, 0.95);
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.34);
    color: var(--color-blanco);
    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(3px);
    transition:
        background-color 0.22s,
        border-color 0.22s,
        transform 0.22s;
}

.boton-opcion:hover {
    background-color: var(--color-principal);
    border-color: var(--color-principal);
    transform: translateY(-1px);
}

/*==========================================
PANEL DERECHO  -LOGIN  40%
============================================*/

.panel-derecho {
    position: relative;
    flex: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding: 18px 30px;
    background-color: var(--color-blanco);
}

.panel-derecho::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8%;
    left: 0;
    width: 1px;
    background-color: rgba(107, 114, 128, 0.34);
}

/*==========================================
FORMULARIO
============================================*/

.contenedor-acceso {
    width: 100%;
    max-width: 315px;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    transform: translateY(-18px);
}

.formulario-sistema {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.formulario-sistema h2 {
    margin: 0 0 8px;
    color: var(--color-texto);
    font-size: 24px;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

/*==========================================
AVATAR
============================================*/

.avatar-login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 2px;
    border: 2px solid var(--color-principal);
    border-radius: 50%;
    background-color: var(--color-blanco);
    color: var(--color-principal);
    font-size: 21px;
}

/*==========================================
CAMPOS
============================================*/

.form_input {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form_input label {
    color: var(--color-texto);
    font-size: 11px;
    font-weight: 700;
}

.caja-input {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    background-color: var(--color-input);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        background-color 0.2s;
}

.caja-input:focus-within {
    background-color: var(--color-blanco);
    border-color: var(--color-principal);
    box-shadow: 0 0 0 2px var(--color-principal-suave);
}

.icono-input {
    flex-shrink: 0;
    padding-left: 10px;
    color: #2F3137;
    font-size: 12px;
}

.caja-input:focus-within .icono-input {
    color: var(--color-principal);
}

.input-sistema {
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--color-texto);
    font-size: 12px;
}

.input-sistema::placeholder {
    color: #9CA3AF;
}

/*==========================================
OJITO
============================================*/

.boton-mostrar-password {
    flex-shrink: 0;
    padding: 7px 9px;
    border: none;
    background-color: transparent;
    color: #2F3137;
    font-size: 12px;
    cursor: pointer;
}

.boton-mostrar-password:hover {
    color: var(--color-principal);
}

/*==========================================
BOTÓN PRINCIPAL
============================================*/

.boton-formulario {
    width: 100%;
    margin-top: 4px;
    padding: 9px 11px;
    border: none;
    border-radius: 6px;
    background-color: var(--color-principal);
    color: var(--color-blanco);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.22s,
        transform 0.22s;
}

.boton-formulario:hover {
    background-color: var(--color-principal-hover);
    transform: translateY(-1px);
}

/*==========================================
MENSAJE DE ERROR
============================================*/

.mensaje-error {
    padding: 7px 9px;
    border: 1px solid #FCA5A5;
    border-radius: 5px;
    background-color: var(--color-error-fondo);
    color: var(--color-error-texto);
    font-size: 11px;
    text-align: center;
}

/*==========================================
MODALES
============================================*/

.modal-acceso-rapido {
    position: fixed;
    inset: 0;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 16px;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.58);
}

.modal-contenido {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 22px;
    background-color: var(--color-blanco);
    border-radius: 10px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26);
}

.cerrar-modal {
    position: absolute;
    top: 6px;
    right: 9px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-gris);
    font-size: 25px;
    cursor: pointer;
}

/* ===============================================
PANTALLAS DE POCA ALTURA
============================================ */

@media (max-height: 550px) and (min-width: 761px) {
    .panel-izquierdo {
        padding: 12px;
    }

    .contenido-panel-izquierdo,
    .contenedor-acceso {
        transform: none;
    }

    .panel-izquierdo h2 {
        font-size: 27px;
    }

    .panel-izquierdo > .contenido-panel-izquierdo > p {
        font-size: 11px;
    }

    .botones-acceso-rapido {
        max-width: 310px;
        margin-top: 17px;
        gap: 7px;
    }

    .texto-acceso {
        font-size: 11px;
    }

    .boton-opcion {
        padding: 6px 8px;
        font-size: 10px;
    }

    .panel-derecho {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .avatar-login {
        width: 43px;
        height: 43px;
        font-size: 18px;
    }

    .formulario-sistema {
        gap: 5px;
    }

    .formulario-sistema h2 {
        margin-bottom: 3px;
        font-size: 21px;
    }

    .caja-input {
        min-height: 30px;
    }

    .input-sistema {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .boton-formulario {
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

/* ===============================================
CELULAR===================================== */

@media (max-width: 760px) {
    html,
    body {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .pantalla-login {
        flex-direction: column;

        height: auto;
        min-height: 100vh;

        overflow: visible;
    }

    .panel-izquierdo {
        min-height: 380px;
        padding: 30px 18px;
    }

    .panel-derecho {
        min-height: 480px;
        padding: 36px 18px;
    }

    .panel-derecho::before {
        top: 0;
        right: 10%;
        bottom: auto;
        left: 10%;

        width: auto;
        height: 1px;
    }

    .contenido-panel-izquierdo,
    .contenedor-acceso {
        transform: none;
    }
}

@media (max-width: 430px) {
    .botones-acceso-rapido {
        grid-template-columns: 1fr;
        max-width: 250px;
    }
}

/* =========================================================
   CASA CHELY - PANEL PRINCIPAL
   ESTILO DASHBOARD MODERNO
========================================================= */

:root {
    --dash-sidebar: #072743;
    --dash-sidebar-2: #0a3457;
    --dash-cyan: #18b9d5;
    --dash-azul: #1677c8;
    --dash-fondo: #f5f7fb;
    --dash-blanco: #ffffff;
    --dash-texto: #122033;
    --dash-gris: #6e7c91;
    --dash-borde: #dfe6ee;
    --dash-sombra: 0 5px 18px rgba(18, 32, 51, .07);
}

html,
body.body-grupo-b {
    width: 100%;
    min-height: 100%;
    height: auto;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

body.body-grupo-b {
    padding: 0;
    background: var(--dash-fondo);
    color: var(--dash-texto);
    font-family: Arial, Helvetica, sans-serif;
}

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

/* SIDEBAR */
.body-grupo-b .menu-principal {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1100;
    display: flex !important;
    flex-direction: column;
    width: 255px;
    padding: 24px 15px 18px;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--dash-sidebar), #06345c);
    color: #fff;
    box-shadow: 5px 0 22px rgba(4, 31, 56, .13);
}

.body-grupo-b .marca-sistema {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 54px;
    padding: 0 14px 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    font-size: 21px;
    font-weight: 800;
}

.body-grupo-b .marca-sistema img {
    width: 37px;
    height: 37px;
    object-fit: contain;
}

.body-grupo-b .menu-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.body-grupo-b .item-menu,
.body-grupo-b .titulo-grupo {
    display: flex;
    align-items: center;
    min-height: 43px;
    border-radius: 9px;
    color: rgba(255,255,255,.94);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.body-grupo-b .item-menu {
    gap: 10px;
    padding: 0 12px;
}

.body-grupo-b .item-menu.activo {
    position: relative;
    background: rgba(25, 138, 214, .19);
}

.body-grupo-b .item-menu.activo::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--dash-cyan);
}

.body-grupo-b .item-icono {
    color: var(--dash-cyan);
    font-size: 18px;
}

.body-grupo-b .grupo-menu {
    padding: 3px 0 6px;
}

.body-grupo-b .titulo-grupo {
    position: relative;
    padding: 0 12px 0 38px;
}

.body-grupo-b .titulo-grupo::before {
    content: "◈";
    position: absolute;
    left: 12px;
    color: rgba(255,255,255,.90);
    font-size: 14px;
}

.body-grupo-b .item-submenu {
    display: block;
    width: 100%;
    min-height: 29px;
    padding: 5px 10px 5px 38px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,.73);
    font: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s, color .18s, padding-left .18s;
}

.body-grupo-b .item-submenu:hover {
    padding-left: 42px;
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* ÁREA PRINCIPAL */
.body-grupo-b .area-principal {
    min-height: 100vh;
    margin-left: 255px;
}

.body-grupo-b .barra-superior {
    position: fixed;
    top: 0;
    right: 0;
    left: 255px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid var(--dash-borde);
    background: rgba(255,255,255,.98);
    box-shadow: 0 2px 10px rgba(18,32,51,.04);
}

.body-grupo-b .buscador-sistema {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(470px, 48vw);
    height: 39px;
    padding: 0 13px;
    border: 1px solid #d9e1eb;
    border-radius: 9px;
    background: #fff;
    color: #58708d;
}

.body-grupo-b .buscador-sistema input {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--dash-texto);
    font-size: 12px;
}

.body-grupo-b .acciones-superiores {
    display: flex;
    align-items: center;
    gap: 12px;
}

.body-grupo-b .perfil-sistema {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 150px;
}

.body-grupo-b .avatar-sistema {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f88c7, #19b7c9);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.body-grupo-b .perfil-sistema strong,
.body-grupo-b .perfil-sistema span {
    display: block;
}

.body-grupo-b .perfil-sistema strong {
    font-size: 12px;
}

.body-grupo-b .perfil-sistema span {
    margin-top: 2px;
    color: var(--dash-gris);
    font-size: 10px;
}

.body-grupo-b .boton-salir {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    padding: 0;
    border: 1px solid var(--dash-borde);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.body-grupo-b .icono-salir {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

/* NOTIFICACIONES */
.body-grupo-b #admin-notificaciones-wrap {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 1200 !important;
}

.body-grupo-b #btn-notificaciones-admin {
    position: relative;
    width: 39px !important;
    height: 39px !important;
    padding: 0 !important;
    border: 1px solid var(--dash-borde) !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 17px !important;
}

.body-grupo-b #contador-notificaciones-admin {
    position: absolute;
    top: -6px !important;
    right: -6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border: 2px solid #fff;
    border-radius: 10px;
    background: #168bd3 !important;
    color: #fff;
    font-size: 9px !important;
    font-weight: 800;
}

.body-grupo-b #panel-notificaciones-admin {
    position: absolute !important;
    top: 48px !important;
    right: 0 !important;
    width: min(370px, calc(100vw - 30px)) !important;
    max-height: 460px !important;
    padding: 14px !important;
    overflow-y: auto;
    border: 1px solid var(--dash-borde);
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--dash-texto);
    box-shadow: 0 18px 45px rgba(18,32,51,.17) !important;
}

.body-grupo-b #panel-notificaciones-admin h3 {
    margin: 0 0 10px;
    font-size: 14px;
}

/* DASHBOARD */
.body-grupo-b .dashboard-principal {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 92px 26px 26px;
}

.body-grupo-b .cabecera-dashboard {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 17px;
}

.body-grupo-b .cabecera-dashboard h1 {
    margin: 0;
    color: #111d2e;
    font-size: 29px;
    line-height: 1.05;
}

.body-grupo-b .cabecera-dashboard p {
    margin: 7px 0 0;
    color: #49617e;
    font-size: 13px;
}

.body-grupo-b .resumen-dashboard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.body-grupo-b .tarjeta-resumen {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 14px 16px;
    border: 1px solid var(--dash-borde);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--dash-sombra);
}

/* =========================================================
   NÚMEROS DE RESUMEN DEL DASHBOARD
========================================================= */

.body-grupo-b .contenido-resumen {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.body-grupo-b .contenido-resumen span {
    font-size: 13px;
    font-weight: 700;
    color: var(--dash-gris);
    margin-bottom: 2px;
}

.body-grupo-b .contenido-resumen strong {
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    color: var(--dash-texto);
    margin: 3px 0;
}

.body-grupo-b .contenido-resumen small {
    font-size: 11px;
    color: var(--dash-gris);
}

.body-grupo-b .circulo-resumen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #267be8, #35a9e9);
}

.body-grupo-b .tarjeta-resumen:nth-child(2) .circulo-resumen {
    background: linear-gradient(135deg, #6a4de5, #8c4fe5);
}

.body-grupo-b .tarjeta-resumen:nth-child(3) .circulo-resumen {
    background: linear-gradient(135deg, #14a4b6, #19c1c4);
}

.body-grupo-b .tarjeta-resumen:nth-child(4) .circulo-resumen {
    background: linear-gradient(135deg, #2375d8, #359be9);
}

.body-grupo-b .circulo-resumen img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.body-grupo-b .tarjeta-resumen span,
.body-grupo-b .tarjeta-resumen strong {
    display: block;
}

.body-grupo-b .tarjeta-resumen span {
    margin-bottom: 5px;
    color: #34445a;
    font-size: 11px;
    font-weight: 700;
}

.body-grupo-b .tarjeta-resumen strong {
    color: #111d2e;
    font-size: 14px;
}

/* ACCESOS RÁPIDOS */
.body-grupo-b .panel-accesos {
    padding: 17px;
    border: 1px solid var(--dash-borde);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(18,32,51,.045);
}

.body-grupo-b .panel-accesos h2 {
    margin: 0 0 14px;
    font-size: 14px;
    color: #162235;
}

.body-grupo-b .botones-sistema {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    width: 100%;
    margin: 0;
}

.body-grupo-b .acceso-dashboard {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 83px;
    padding: 12px 14px;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    background: #fff;
    color: var(--dash-texto);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(18,32,51,.045);
    transition: transform .18s, box-shadow .18s, border-color .18s, background-color .18s;
}

.body-grupo-b .acceso-dashboard:hover {
    transform: translateY(-2px);
    border-color: #bfd3e7;
    background: #fbfdff;
    box-shadow: 0 7px 16px rgba(18,32,51,.08);
}

.body-grupo-b .acceso-dashboard > img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.body-grupo-b .acceso-dashboard span {
    min-width: 0;
}

.body-grupo-b .acceso-dashboard strong,
.body-grupo-b .acceso-dashboard small {
    display: block;
}

.body-grupo-b .acceso-dashboard strong {
    color: #132137;
    font-size: 12px;
    line-height: 1.25;
}

.body-grupo-b .acceso-dashboard small {
    margin-top: 4px;
    color: #748299;
    font-size: 10px;
    line-height: 1.25;
}

/* FORMULARIOS Y MODALES EXISTENTES */
.body-grupo-b .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 13px;
}

.body-grupo-b label {
    color: #374151;
    font-size: 12px;
    font-weight: 700;
}

.body-grupo-b input,
.body-grupo-b select,
.body-grupo-b textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dash-borde);
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: var(--dash-texto);
    font: inherit;
    font-size: 13px;
}

.body-grupo-b input:focus,
.body-grupo-b select:focus,
.body-grupo-b textarea:focus {
    border-color: #3f8fc8;
    box-shadow: 0 0 0 3px rgba(63,143,200,.11);
}

.body-grupo-b .modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    justify-content: center;
    align-items: center;
    padding: 18px;
    overflow-y: auto;
    background: rgba(7, 20, 34, .62);
}

.body-grupo-b .modal-dialog {
    width: 100%;
    max-width: 560px;
    margin: auto;
}

.body-grupo-b .modal-content {
    overflow: hidden;
    border: 1px solid var(--dash-borde);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 24px 55px rgba(15,23,42,.25);
}

.body-grupo-b .modal-header,
.body-grupo-b .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    background: #f7f9fc;
}

.body-grupo-b .modal-header { border-bottom: 1px solid var(--dash-borde); }
.body-grupo-b .modal-footer { justify-content: flex-end; border-top: 1px solid var(--dash-borde); }
.body-grupo-b .modal-body { padding: 18px; }
.body-grupo-b .modal-title { margin: 0; font-size: 17px; }

.body-grupo-b .btn-primary {
    padding: 10px 15px;
    border: 1px solid var(--dash-azul);
    border-radius: 8px;
    background: var(--dash-azul);
    color: #fff;
    cursor: pointer;
}

.body-grupo-b .close,
.body-grupo-b .close-button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #edf1f5;
    color: #6b7280;
    font-size: 21px;
    cursor: pointer;
}

/* ALERTAS */
.body-grupo-b .custom-alert {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 380px;
    padding: 12px 15px;
    border: 1px solid var(--dash-borde);
    border-radius: 10px;
    background: #fff;
    color: var(--dash-texto);
    box-shadow: 0 14px 32px rgba(15,23,42,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .25s, visibility .25s, transform .25s;
}

.body-grupo-b .custom-alert--active { opacity: 1; visibility: visible; transform: translateY(0); }
.body-grupo-b .custom-alert.success { border-left: 5px solid #16a34a; }
.body-grupo-b .custom-alert.error { border-left: 5px solid #dc2626; }
.body-grupo-b .custom-alert.warning { border-left: 5px solid #f59e0b; }
.body-grupo-b .custom-alert.info { border-left: 5px solid #2563eb; }

/* LOADER */
.body-grupo-b .loader-container {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,.98);
    opacity: 1;
    visibility: visible;
    transition: opacity .35s, visibility .35s;
}

.body-grupo-b .loader-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.body-grupo-b .logo-loader-svg-wrapper { width: 120px; height: 85px; overflow: hidden; }
.body-grupo-b .logo-loader-svg-wrapper svg { width: 100%; height: 100%; }

/* RESPONSIVE */
@media (max-width: 1180px) {

    .body-grupo-b .resumen-dashboard {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .body-grupo-b .botones-sistema {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }
}

@media (max-width: 920px) {
    .body-grupo-b .menu-principal { width: 210px; }
    .body-grupo-b .area-principal { margin-left: 210px; }
    .body-grupo-b .barra-superior { left: 210px; }
    .body-grupo-b .perfil-sistema { display: none; }

    .body-grupo-b .botones-sistema {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
}

@media (max-width: 700px) {
    .body-grupo-b .menu-principal { display: none !important; }
    .body-grupo-b .area-principal { margin-left: 0; }
    .body-grupo-b .barra-superior { left: 0; padding: 0 12px; }
    .body-grupo-b .buscador-sistema { width: min(330px, 55vw); }
    .body-grupo-b .dashboard-principal { padding: 84px 12px 20px; }
    .body-grupo-b .cabecera-dashboard h1 { font-size: 24px; }
    .body-grupo-b .resumen-dashboard { grid-template-columns: 1fr 1fr; gap: 9px; }
    .body-grupo-b .tarjeta-resumen { min-height: 78px; padding: 10px; }
    .body-grupo-b .circulo-resumen { width: 44px; height: 44px; flex-basis: 44px; }
    .body-grupo-b .circulo-resumen img { width: 23px; height: 23px; }
    .body-grupo-b .panel-accesos { padding: 12px; }
    .body-grupo-b .botones-sistema { grid-template-columns: 1fr; gap: 8px; }
    .body-grupo-b .acceso-dashboard { min-height: 68px; }
    .body-grupo-b .custom-alert { right: 10px; left: 10px; bottom: 10px; max-width: none; }
}

@media (max-width: 430px) {
    .body-grupo-b .buscador-sistema { display: none; }
    .body-grupo-b .barra-superior { justify-content: flex-end; }
    .body-grupo-b .resumen-dashboard { grid-template-columns: 1fr; }
}

/* =========================================================
   CASA CHELY - MODO LAPTOP SIN SCROLL
========================================================= */

@media (min-width: 601px) and (max-height: 480px) {

    html,
    body.body-grupo-b {
        height: 100vh;
        min-height: 100vh;

        overflow: hidden !important;
    }


    /* =========================
       MENÚ LATERAL
    ========================= */

    .body-grupo-b .menu-principal {
        width: 190px;

        padding:
            10px
            8px;

        overflow-y: auto;
    }


    .body-grupo-b .marca-menu {
        min-height: 42px;

        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .body-grupo-b .marca-menu h2 {
        margin: 0;

        font-size: 13px;
    }

    .body-grupo-b .marca-menu p {
        margin-top: 2px;

        font-size: 8px;
    }


    /* OPCIONES DEL MENÚ */

    .body-grupo-b .item-menu {
        min-height: 30px;

        padding:
            0
            8px;

        font-size: 9px;

        border-radius: 6px;
    }

    .body-grupo-b .item-submenu {
        padding:
            3px
            6px
            3px
            27px;

        font-size: 8px;
    }


    /* =========================
       ÁREA PRINCIPAL
    ========================= */

    .body-grupo-b .area-principal {
        margin-left: 190px;

        height: 100vh;

        overflow: hidden;
    }


    /* =========================
       BARRA SUPERIOR
    ========================= */

    .body-grupo-b .barra-superior {
        left: 190px;

        height: 48px;

        padding:
            0
            14px;
    }


    /* BUSCADOR */

    .body-grupo-b .buscador-sistema {
        width: 230px;
        height: 30px;
    }

    .body-grupo-b .buscador-sistema input {
        font-size: 9px;
    }


    /* PERFIL */

    .body-grupo-b .perfil-sistema {
        gap: 5px;
    }

    .body-grupo-b .perfil-sistema strong {
        font-size: 9px;
    }

    .body-grupo-b .perfil-sistema small {
        font-size: 7px;
    }


    /* =========================
       CONTENIDO PRINCIPAL
    ========================= */

    .body-grupo-b .dashboard-principal {
        height: 100vh;

        padding:
            58px
            14px
            10px;

        overflow: hidden !important;
    }


    /* =========================
       CABECERA
    ========================= */

    .body-grupo-b .cabecera-dashboard {
        margin-bottom: 7px;
    }

    .body-grupo-b .cabecera-dashboard h1 {
        margin:
            0
            0
            2px;

        font-size: 18px;
    }

    .body-grupo-b .cabecera-dashboard p {
        margin: 0;

        font-size: 9px;
    }


    /* =========================
       TARJETAS DE RESUMEN
    ========================= */

    .body-grupo-b .resumen-dashboard {
        gap: 7px;

        margin-bottom: 8px;
    }

    .body-grupo-b .tarjeta-resumen {
        min-height: 54px;

        padding:
            6px
            8px;

        gap: 7px;

        border-radius: 8px;
    }


    .body-grupo-b .circulo-resumen {
        width: 33px;
        height: 33px;

        flex-basis: 33px;
    }

    .body-grupo-b .circulo-resumen img {
        width: 17px;
        height: 17px;
    }


    .body-grupo-b .tarjeta-resumen span {
        margin-bottom: 1px;

        font-size: 7px;
    }

    .body-grupo-b .tarjeta-resumen strong {
        font-size: 10px;
    }


    /* =========================
       PANEL ACCESOS
    ========================= */

    .body-grupo-b .panel-accesos {
        padding:
            8px
            9px;

        border-radius: 8px;
    }

    .body-grupo-b .panel-accesos h2 {
        margin:
            0
            0
            6px;

        font-size: 10px;
    }


    /* =========================
       BOTONES
    ========================= */

    .body-grupo-b .botones-sistema {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 6px;
    }


    .body-grupo-b .acceso-dashboard {
        grid-template-columns:
            29px
            minmax(0, 1fr);

        gap: 6px;

        min-height: 48px;
        height: 48px;

        padding:
            5px
            7px;

        border-radius: 7px;
    }


    /* ICONOS */

    .body-grupo-b .acceso-dashboard > img {
        width: 27px;
        height: 27px;
    }


    /* TEXTO */

    .body-grupo-b .acceso-dashboard strong {
        font-size: 8px;
        line-height: 1.05;
    }

    .body-grupo-b .acceso-dashboard small {
        display: none;
    }


    /* =========================
       USUARIOS APP
    ========================= */

    .body-grupo-b .tarjeta-opcion {
        margin-top: 7px;
        margin-bottom: 0;

        min-height: 42px;

        border-radius: 7px;
    }

    .body-grupo-b .tarjeta-opcion a {
        min-height: 42px;

        padding:
            5px
            10px;
    }

    .body-grupo-b .tarjeta-opcion h3 {
        margin:
            0
            0
            1px;

        font-size: 9px;
    }

    .body-grupo-b .tarjeta-opcion p {
        margin: 0;

        font-size: 7px;
    }


    /* =========================
       NOTIFICACIONES / SALIR
    ========================= */

    .body-grupo-b #btn-notificaciones-admin,
    .body-grupo-b .boton-salir {
        width: 32px !important;
        height: 32px !important;
    }

    .body-grupo-b #admin-notificaciones-wrap {
        top: 8px !important;
    }
}

/* FORZAR 4 BOTONES POR FILA EN LAPTOP */
@media (min-width: 701px) {

    .body-grupo-b .botones-sistema {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .body-grupo-b .acceso-dashboard {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   CASA CHELY - TAMAÑO GRANDE PARA COMPUTADORA
========================================================= */
@media (min-width: 701px) {

    /* MENÚ LATERAL */
    .body-grupo-b .menu-principal {
        width: 290px !important;
        padding: 22px 16px !important;
    }

    .body-grupo-b .area-principal {
        margin-left: 290px !important;
    }

    .body-grupo-b .barra-superior {
        left: 290px !important;
        height: 72px !important;
    }

    /* LOGO / NOMBRE */
    .body-grupo-b .marca-sistema {
        font-size: 25px !important;
        min-height: 65px !important;
    }

    .body-grupo-b .marca-sistema img {
        width: 48px !important;
        height: 48px !important;
    }

    /* MENÚ */
    .body-grupo-b .item-menu,
    .body-grupo-b .titulo-grupo {
        min-height: 48px !important;
        font-size: 15px !important;
    }

    .body-grupo-b .item-submenu {
        min-height: 34px !important;
        font-size: 12px !important;
    }

    /* CONTENIDO */
    .body-grupo-b .dashboard-principal {
        max-width: none !important;
        padding: 96px 28px 30px !important;
    }

    .body-grupo-b .cabecera-dashboard h1 {
        font-size: 34px !important;
    }

    .body-grupo-b .cabecera-dashboard p {
        font-size: 15px !important;
    }

    /* 4 TARJETAS DE ARRIBA */
    .body-grupo-b .tarjeta-resumen {
        min-height: 108px !important;
        padding: 17px 18px !important;
        gap: 15px !important;
    }

    .body-grupo-b .circulo-resumen {
        width: 62px !important;
        height: 62px !important;
        flex-basis: 62px !important;
    }

    .body-grupo-b .circulo-resumen img {
        width: 33px !important;
        height: 33px !important;
    }

    .body-grupo-b .contenido-resumen span {
        font-size: 13px !important;
    }

    .body-grupo-b .contenido-resumen strong {
        font-size: 28px !important;
    }

    .body-grupo-b .contenido-resumen small {
        font-size: 12px !important;
    }

    /* ACCESOS RÁPIDOS */
    .body-grupo-b .panel-accesos h2 {
        font-size: 17px !important;
    }

    .body-grupo-b .acceso-dashboard {
        min-height: 96px !important;
        grid-template-columns: 55px minmax(0, 1fr) !important;
        padding: 14px 16px !important;
    }

    .body-grupo-b .acceso-dashboard > img {
        width: 48px !important;
        height: 48px !important;
    }

    .body-grupo-b .acceso-dashboard strong {
        font-size: 14px !important;
    }

    .body-grupo-b .acceso-dashboard small {
        display: block !important;
        font-size: 11px !important;
    }
}