/*==================================================
QRESP DASHBOARD DEMO
Design System v2.0
Framework UI
==================================================*/


/*==================================================
01. RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
}


/*==================================================
02. VARIABLES
==================================================*/

:root{

    /* Layout */

    --header-height:80px;
    --sidebar-width:280px;
    --wrapper-max-width:1600px;

    /* Espaciados */

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:40px;
    --space-xl:60px;
    --space-xxl:80px;

}


/*==================================================
03. APP LAYOUT
/*==========================================
HEADER GLOBAL
==========================================*/

.app-header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    height:80px;

    display:grid;
    grid-template-columns:60px 120px 180px minmax(100px,1fr) 170px 240px 110px;
    align-items:center;

    gap:20px;

    padding:0 30px;

    background:#FFFFFF;

    border-bottom:1px solid #E5E7EB;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

    z-index:1000;

}

/*==========================================
BOTÓN MENÚ
==========================================*/

.menu-toggle{

    width:48px;
    height:48px;

    border:none;

    border-radius:14px;

    background:#F3F4F6;

    color:#334155;

    font-size:20px;

    cursor:pointer;

    transition:.30s;

}

.menu-toggle:hover{

    background:#E5E7EB;

}

/*==========================================
LOGO
==========================================*/

.header-logo{

    display:flex;

    align-items:center;

}

.header-logo img{

    width:110%;

    max-width:150px;

    display:block;

}

/*==========================================
SISTEMA
==========================================*/

.system-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:2px;

}

.system-title{

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:700;

    color:#1E293B;

    line-height:1.1;

}

.system-subtitle{

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:500;

    color:#64748B;

    line-height:1.1;

}

/*==========================================
BUSCADOR
==========================================*/

.header-search{

    width:100%;

    display:flex;

    align-items:center;

}

.search-form{

    width:100%;

    height:50px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 20px;

    background:#F3F4F6;

    border-radius:18px;

}

.search-form i{

    color:#64748B;

    font-size:18px;

}

.search-form input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    color:#334155;

}

/*==========================================
ACCIONES
==========================================*/

.header-actions{

    display:flex;

    justify-content:center;

    gap:15px;

}

.header-btn{

    position:relative;

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

    background:#F3F4F6;

    cursor:pointer;

    font-size:18px;

    color:#334155;

    transition:.30s;

}

.header-btn:hover{

    background:#E5E7EB;

}

.badge{

    position:absolute;

    top:6px;

    right:6px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#EF4444;

    color:#FFFFFF;

    font-size:11px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==========================================
USUARIO
==========================================*/

.header-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.user-avatar{

    width:56px;

    height:56px;

    border-radius:50%;

    overflow:hidden;

}

.user-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.user-info{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.user-name{

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:700;

    color:#1E293B;

}

.user-role{

    font-family:'Montserrat',sans-serif;

    font-size:14px;

    color:#64748B;

}

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

.logout-btn{

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    border-radius:14px;

    background:#1E63D5;

    color:#FFFFFF;

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    font-weight:600;

    transition:.30s;

}

.logout-btn:hover{

    background:#1856BC;

}

/*==========================================
LAYOUT PRINCIPAL
==========================================*/

.dashboard-layout{

    display:flex;

    margin-top:80px;

    min-height:calc(100vh - 80px);

}

.dashboard-main{

    flex:1;

    overflow-x:hidden;

    background:#EEF3F9;

    margin-left:95px;

    padding:20px;

}

/*==========================================
SIDEBAR
==========================================*/

.app-sidebar{

    position:fixed;

    top:80px;

    left:0;

    width:280px;

    min-width:280px;

    height:calc(100vh - 80px);

    background:#FFFFFF;

    border-right:1px solid #E5E7EB;

    overflow-y:auto;

    transition:.35s ease;

    z-index:900;

}

/*==========================================
NAVEGACIÓN
==========================================*/

.sidebar-nav{

    padding:35px 20px;

}

/*==========================================
TÍTULO
==========================================*/

.sidebar-title{

    margin-bottom:25px;

    padding:0 12px;

    font-family:'Montserrat',sans-serif;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#64748B;

}

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

.sidebar-menu{

    list-style:none;

}

/*==========================================
ITEMS
==========================================*/

.sidebar-menu li{

    margin-bottom:8px;

}

/*==========================================
LINK
==========================================*/

.sidebar-link{

    height:56px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:0 20px;

    border-radius:16px;

    text-decoration:none;

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    font-weight:500;

    color:#334155;

    transition:.30s;

}

.sidebar-link i{

    width:24px;

    min-width:24px;

    text-align:center;

    font-size:20px;

    flex-shrink:0;

}

/*==========================================
HOVER
==========================================*/

.sidebar-link:hover{

    background:#EEF4FF;

    color:#1E63D5;

}

/*==========================================
ACTIVO - EXPANDIDO
==========================================*/

.app-sidebar:not(.collapsed) .sidebar-link.active{

    height:56px;

    justify-content:flex-start;

    gap:18px;

    padding:0 20px;

    border-radius:16px;

    background:#1E63D5;

    color:#FFFFFF;

    box-shadow:0 10px 25px rgba(30,99,213,.20);

}

/*==========================================
SCROLL
==========================================*/

.app-sidebar::-webkit-scrollbar{

    width:8px;

}

.app-sidebar::-webkit-scrollbar-thumb{

    background:#D7DCE3;

    border-radius:20px;

}

.app-sidebar::-webkit-scrollbar-track{

    background:transparent;

}

/*==========================================
SIDEBAR COLAPSADO
==========================================*/

.app-sidebar.collapsed{

    width:90px;

    min-width:90px;

}

.app-sidebar.collapsed .sidebar-nav{

    padding:20px 0;

}

.app-sidebar.collapsed .sidebar-title{

    display:none;

}

.app-sidebar.collapsed .sidebar-link{

    width:64px;

    height:64px;

    margin:0 auto 10px;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:0;

    border-radius:20px;

}

.app-sidebar.collapsed .sidebar-link span{

    display:none;

}

.app-sidebar.collapsed .sidebar-link i{

    width:24px;

    min-width:24px;

    margin:0;

    font-size:22px;

    text-align:center;

}

/*==========================================
ACTIVO - COLAPSADO
==========================================*/

.app-sidebar.collapsed .sidebar-link.active{

    background:#1E63D5;

    color:#FFFFFF;

    box-shadow:0 10px 25px rgba(30,99,213,.20);

}

/*==========================================
HERO
==========================================*/

.hero-dashboard{

    padding:0px;
    
}

.hero-container{

    width:100%; 
   
    background:linear-gradient(135deg,#2D56D9 0%,#3B73F0 100%);

    border-radius:34px;

    overflow:hidden;

    position:relative;

    padding:80px 85px;

}

/*==========================================
HERO SUPERIOR
==========================================*/

.hero-content{

    display:grid;

    grid-template-columns:1fr 520px;

    align-items:center;

    gap:40px;

    margin-bottom:50px;

}

.hero-left{

    display:flex;

    flex-direction:column;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:12px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    color:#FFFFFF;

    font-size:15px;

    font-weight:600;

    font-family:'Montserrat',sans-serif;

}

.hero-title{

    margin:30px 0 25px;

    font-family:'Montserrat',sans-serif;

    font-size:64px;

    line-height:1.05;

    font-weight:800;

    color:#FFFFFF;

}

.hero-description{

    max-width:560px;

    font-family:'Montserrat',sans-serif;

    font-size:20px;

    line-height:1.7;

    color:rgba(255,255,255,.90);

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

}

.btn-primary,
.btn-secondary{

    height:58px;

    padding:0 32px;

    display:flex;

    align-items:center;

    gap:12px;

    border-radius:16px;

    text-decoration:none;

    font-family:'Montserrat',sans-serif;

    font-size:18px;

    font-weight:700;

    transition:.30s;

}

.btn-primary{

    background:#FFFFFF;

    color:#1E63D5;

}

.btn-secondary{

    color:#FFFFFF;

    border:2px solid rgba(255,255,255,.25);

}

/*==========================================
IMAGEN
==========================================*/

.hero-right{

    display:flex;

    justify-content:flex-end;

}

.hero-right img{

    width:100%;

    max-width:520px;

}

/*==========================================
CARDS
==========================================*/

.hero-cards{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

.hero-card{

    display:flex;

    align-items:center;

    gap:24px;

    padding:34px;

    border-radius:28px;

}

.hero-card-light{

    background:#FFFFFF;

}

.hero-card-dark{

    background:#2C3855;

}

.hero-card-icon{

    width:74px;

    height:74px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

    background:#2F67E7;

    color:#FFFFFF;

    font-size:34px;

}

.hero-card-content{

    flex:1;

}

.hero-card-content h3{

    margin-bottom:10px;

    font-family:'Montserrat',sans-serif;

    font-size:22px;

    font-weight:800;

}

.hero-card-light h3{

    color:#18233D;

}

.hero-card-dark h3{

    color:#FFFFFF;

}

.hero-card-content p{

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    line-height:1.6;

}

.hero-card-light p{

    color:#64748B;

}

.hero-card-dark p{

    color:rgba(255,255,255,.80);

}

.hero-card-arrow{

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    text-decoration:none;

    font-size:22px;

}

.hero-card-light .hero-card-arrow{

    background:#EDF4FF;

    color:#2F67E7;

}

.hero-card-dark .hero-card-arrow{

    background:rgba(255,255,255,.10);

    color:#FFFFFF;

}

/*==========================================
BOTONES HERO - HOVER
==========================================*/

.btn-primary,
.btn-secondary{

    transition:.30s ease;

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,0,0,.18);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.10);

    border-color:#FFFFFF;

    transform:translateY(-3px);

}

/*==========================================
INTERACCIÓN TARJETAS HERO
==========================================*/

.hero-card{

    cursor:pointer;

    transition:.35s ease;

}

.hero-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

/*==========================================
INTERACCIÓN USUARIO
==========================================*/

.header-user{

    cursor:pointer;

}

.user-avatar{

    transition:.30s ease;

}

.user-info{

    transition:.30s ease;

}

.header-user:hover .user-avatar{

    transform:scale(1.08) rotate(-3deg);

}

.header-user:hover .user-name{

    color:#1E63D5;

}

.header-user:hover .user-role{

    color:#334155;

}

/*==========================================
ENCABEZADO INDICADORES
==========================================*/

.kpi-header{

    max-width:1100px;

    margin:0 auto 50px;

    text-align:center;

}

.kpi-header h2{

    margin:25px 0 18px;

}

.kpi-header p{

    max-width:760px;

    margin:0 auto;

}

.kpi-grid{

    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

/*==========================================
INDICADORES EJECUTIVOS
==========================================*/

.kpi-section{

    padding:90px 0;

    background:#EEF3FA;

}

.kpi-container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 20px;

}

/*==========================================
ENCABEZADO
==========================================*/

.kpi-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    margin-bottom:60px;

}

.kpi-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:#DCE9FF;

    color:#2F66F3;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:700;

}

.kpi-badge i{

    font-size:16px;

}

.kpi-title{

    margin:28px 0 18px;

    font-family:'Montserrat',sans-serif;

    font-size:45px;

    font-weight:800;

    line-height:1.1;

    color:#0F172A;

}

.kpi-description{

    max-width:760px;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    line-height:1.7;

    color:#64748B;

}

/*==========================================
TARJETAS KPI
==========================================*/

.kpi-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.kpi-card{

    display:flex;

    align-items:center;

    gap:22px;

    padding:28px;

    background:#FFFFFF;

    border:1px solid #2F66F3;

    border-radius:26px;

    transition:.30s ease;

}

.kpi-card:hover{

    transform:translateY(-6px);

    border:2px solid #2F66F3;

    box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.kpi-icon{

    width:74px;

    height:74px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    border-radius:20px;

    background:#2F66F3;

    color:#FFFFFF;

    font-size:34px;

}

.kpi-content{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.kpi-name{

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    font-weight:700;

    color:#374151;

}

.kpi-value{

    font-family:'Montserrat',sans-serif;

    font-size:30px;

    font-weight:800;

    line-height:1;

    color:#0F172A;

}

.kpi-status{

    display:flex;

    align-items:center;

    gap:8px;

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    font-weight:500;

    color:#334155;

}

.kpi-status i{

    color:#0F172A;

}

/*==========================================
KPI HOVER
==========================================*/

.kpi-card{

    cursor:pointer;

    overflow:hidden;

}

.kpi-card,
.kpi-icon{

    transition:.20s ease;

}

.kpi-card:hover{

    transform:translateY(-8px);

    border-color:#1E63D5;

    box-shadow:0 20px 45px rgba(30,99,213,.18);

}

.kpi-card:hover .kpi-icon{

    transform:rotate(-8deg) scale(1.08);

}

.kpi-card:hover .kpi-value{

    color:#1E63D5;

}

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

.quick-access{

    padding:90px 45px;

    background:#F5F8FC;

}

/*==================================================
CONTENEDOR
==================================================*/

.quick-access-container{

    max-width:1600px;

    margin:0 auto;

}

/*==================================================
ENCABEZADO
==================================================*/

.quick-access-header{

    text-align:center;

    margin-bottom:70px;

}

.quick-access-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:999px;

    background:#DDE9FF;

    color:#2D63F1;

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    font-weight:700;

}

.quick-access-title{

    margin-top:25px;

    font-family:'Montserrat',sans-serif;

    font-size:58px;

    font-weight:800;

    color:#0F172A;

}

.quick-access-description{

    width:100%;

    max-width:760px;

    margin:22px auto 0;

    font-family:'Montserrat',sans-serif;

    font-size:20px;

    line-height:1.7;

    color:#64748B;

}

/*==================================================
GRID
==================================================*/

.access-grid{

    display:grid;

    grid-template-columns:repeat(3,320px);

    justify-content:center;

    gap:28px;

}

/*==================================================
TARJETA
==================================================*/

.access-card{

    min-height:340px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:340px;

    padding:56px;

    background:#FFFFFF;

     width:320px;

    height:250px;

    padding:22px;

    border:1.5px solid #2D63F1;

    border-radius:28px;

    transition:.20s ease;

}

/*==================================================
ICONO
==================================================*/

.access-icon{

    width:76px;

    height:76px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:22px;

    background:#2D63F1;

    color:#FFFFFF;

    font-size:30px;

}

/*==================================================
TEXTOS
==================================================*/

.access-card-title{

    margin-top:32px;

    font-family:'Montserrat',sans-serif;

    font-size:24px;

    font-weight:800;

    color:#0F172A;

}

.access-card-description{

    margin-top:18px;

    margin-bottom:0;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    line-height:1.8;

    color:#64748B;

}

/*==================================================
FOOTER
==================================================*/

.access-footer{

    margin-top:5px;

    padding-top:12px;

    border-top:1px solid #E5E7EB;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.access-link{

    text-decoration:none;

    font-family:'Montserrat',sans-serif;

    font-size:18px;

    font-weight:700;

    color:#2D63F1;

}

.access-arrow{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#EEF4FF;

    color:#2D63F1;

    font-size:20px;

    transition:.35s;

}

/*==================================================
HOVER
==================================================*/

.access-card:hover{

    transform:translateY(-8px);

    border:2.5px solid #2D63F1;

    box-shadow:0 25px 45px rgba(45,99,241,.18);

}

.access-card:hover .access-icon{

    transform:rotate(-8deg) scale(1.05);

}

.access-card:hover .access-arrow{

    transform:translateX(6px);

    background:#2D63F1;

    color:#FFFFFF;

}

.access-card:hover .access-link{

    color:#0F172A;

}

.access-icon,
.access-arrow,
.access-link{

    transition:.35s;

}

/*==================================================
ENCABEZADO
==================================================*/

.access-header{

    text-align:center;

    max-width:900px;

    margin:0 auto 55px;

}

.access-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 26px;

    background:#DCE8FF;

    border-radius:999px;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:700;

    color:#2D63F1;

}

.access-title{

    margin-top:28px;

    font-family:'Montserrat',sans-serif;

    font-size:45px;

    font-weight:800;

    line-height:1.15;

    color:#0F172A;

}

.access-description{

    margin-top:22px;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:400;

    line-height:1.7;

    color:#64748B;

}

/*==================================================
ACTIVIDAD RECIENTE
==================================================*/

.activity-section{

    margin-top:70px;
    margin-bottom:40px;

}

.activity-header{

    text-align:center;
    margin-bottom:50px;

}

.activity-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 28px;

    background:#dfeaff;

    color:#2563eb;

    border-radius:50px;

    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:700;

    letter-spacing:.3px;

    margin-bottom:24px;

    font-size:17px;

}

.activity-title{

    font-family:'Montserrat',sans-serif;
    font-size:34px;
    font-weight:700;

    color:#1b3556;

    margin-bottom:18px;

}

.activity-description{

    max-width:760px;

    margin:auto;

    font-family:'Montserrat',sans-serif;
    font-size:16px;
    font-weight:400;

    line-height:1.8;

    color:#6c757d;

}


/*==================================================
LISTA DE ACTIVIDADES
==================================================*/

.activity-container{

    max-width:980px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:16px;

}


/*==================================================
ITEM
==================================================*/

.activity-card{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:22px 26px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:22px;

    transition:.30s ease;

    cursor:pointer;

}

.activity-card:hover{

    transform:translateY(-6px);

    border:1px solid #2D63F1;

    box-shadow:0 18px 40px rgba(45,99,241,.12);

}


/*==================================================
ICONOS
==================================================*/

.activity-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    font-size:24px;

    transition:.35s;

}

.activity-card:hover .activity-icon{

    transform:scale(1.08);

}


/*==================================================
COLORES
==================================================*/

.success{

    background:#dff7ea;

    color:#0f9d58;

}

.primary{

    background:#e8f1ff;

    color:#1565c0;

}

.warning{

    background:#fff4d9;

    color:#f39c12;

}

.info{

    background:#e5f6fd;

    color:#00acc1;

}

.danger{

    background:#ffe5e5;

    color:#e53935;

}


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

.activity-content{

    flex:1;

}

.activity-content h3{

    font-family:'Montserrat',sans-serif;

    font-size:20px;

    font-weight:700;

    color:#1d3557;

    margin-bottom:10px;

}

.activity-content p{

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:400;

    color:#6b7280;

    line-height:1.8;

    margin-bottom:18px;

}


/*==================================================
HORA
==================================================*/

.activity-content span{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    background:#f3f6fa;

    border-radius:30px;

    font-family:'Montserrat',sans-serif;

    font-size:12px;

    font-weight:600;

    color:#7b8794;

}


/*==================================================
RESPONSIVE
==================================================*/

    @media(max-width:768px){

    .activity-card{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .activity-content{

        width:100%;

    }

    .activity-title{

        font-size:28px;

    }

    .activity-description{

        font-size:15px;

    }

}

/*==================================================
ALERTAS DEL SISTEMA
==================================================*/

.alerts-section{

    margin-top:70px;
    margin-bottom:40px;

}

/*==================================================
ENCABEZADO
==================================================*/

.alerts-header{

    text-align:center;
    margin-bottom:55px;

}

.alerts-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 28px;

    background:#DCE9FF;

    border-radius:999px;

    font-family:'Montserrat',sans-serif;
    font-size:17px;
    font-weight:700;

    color:#2D63F1;

}

.alerts-badge i{

    font-size:16px;

}

.alerts-title{

    margin-top:28px;

    font-family:'Montserrat',sans-serif;
    font-size:45px;
    font-weight:800;

    line-height:1.15;

    color:#0F172A;

}

.alerts-description{

    max-width:760px;

    margin:22px auto 0;

    font-family:'Montserrat',sans-serif;
    font-size:20px;

    line-height:1.7;

    color:#64748B;

}


/*==================================================
GRID
==================================================*/

.alerts-grid{

    max-width:1100px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}


/*==================================================
TARJETAS
==================================================*/

.alert-card{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:26px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:22px;

    transition:.30s ease;

    cursor:pointer;

}

.alert-card:hover{

    transform:translateY(-6px);

    border-color:#2D63F1;

    box-shadow:0 18px 40px rgba(45,99,241,.12);

}


/*==================================================
ICONO
==================================================*/

.alert-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    border-radius:20px;

    font-size:28px;

    transition:.30s ease;

}

.alert-card:hover .alert-icon{

    transform:scale(1.05);

}


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

.alert-content{

    flex:1;

}

.alert-content h3{

    margin-bottom:14px;

    font-family:'Montserrat',sans-serif;
    font-size:18px;
    font-weight:800;

    color:#0F172A;

}

.alert-content p{

    font-family:'Montserrat',sans-serif;
    font-size:17px;

    line-height:1.7;

    color:#64748B;

}


/*==================================================
TIPOS DE ALERTA
==================================================*/

/* Alta */

.high .alert-icon{

    background:#FDE2E2;

    color:#DC2626;

}

/* Media */

.medium .alert-icon{

    background:#FEF3C7;

    color:#D97706;

}

/* Baja */

.low .alert-icon{

    background:#DCFCE7;

    color:#059669;

}

/* Informativa */

.info .alert-icon{

    background:#DBEAFE;

    color:#2563EB;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

    .alerts-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .alert-card{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .alert-content{

        width:100%;

    }

    .alerts-title{

        font-size:34px;

    }

    .alerts-description{

        font-size:17px;

    }

}

/*==================================================
DASHBOARD GRID
CALENDARIO + ESTADÍSTICAS
==================================================*/

.dashboard-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:32px;

    margin-top:70px;

    margin-bottom:50px;

    align-items:start;

}


/*==================================================
CALENDARIO OPERATIVO
==================================================*/

.calendar-section{

    width:100%;

}


/*==================================================
ENCABEZADO
==================================================*/

.calendar-header{

    text-align:center;

    margin-bottom:40px;

}

.calendar-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    background:#DCE9FF;

    border-radius:999px;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:700;

    color:#2D63F1;

}

.calendar-badge i{

    font-size:16px;

}

.calendar-title{

    margin-top:28px;

    font-family:'Montserrat',sans-serif;

    font-size:34px;

    font-weight:800;

    color:#0F172A;

}

.calendar-description{

    max-width:520px;

    margin:18px auto 0;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    line-height:1.7;

    color:#64748B;

}


/*==================================================
TARJETA
==================================================*/

.calendar-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:22px;

    padding:40px;

    transition:.30s ease;

    min-height:430px;

}

.calendar-card:hover{

    transform:translateY(-6px);

    border-color:#2D63F1;

    box-shadow:0 18px 40px rgba(45,99,241,.12);

}


/*==================================================
PLACEHOLDER
==================================================*/

.calendar-placeholder{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.calendar-placeholder i{

    font-size:70px;

    color:#2D63F1;

    margin-bottom:30px;

}

.calendar-placeholder h3{

    font-family:'Montserrat',sans-serif;

    font-size:26px;

    font-weight:800;

    color:#0F172A;

    margin-bottom:16px;

}

.calendar-placeholder p{

    max-width:330px;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    line-height:1.8;

    color:#64748B;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1100px){

.dashboard-grid{

    grid-template-columns:1fr;

}

}

/*==================================================
CALENDARIO OPERATIVO
==================================================*/

/* Barra superior */

.calendar-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.calendar-month{

    font-family:'Montserrat',sans-serif;

    font-size:24px;

    font-weight:800;

    color:#0F172A;

}

.calendar-btn{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#EEF4FF;

    color:#2D63F1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.30s ease;

}

.calendar-btn:hover{

    background:#2D63F1;

    color:#FFFFFF;

}


/*==================================================
DÍAS DE LA SEMANA
==================================================*/

.calendar-weekdays{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:10px;

    margin-bottom:18px;

}

.calendar-weekdays span{

    text-align:center;

    font-family:'Montserrat',sans-serif;

    font-size:14px;

    font-weight:700;

    color:#64748B;

    text-transform:uppercase;

}


/*==================================================
CUADRÍCULA DEL CALENDARIO
==================================================*/

.calendar-days{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:10px;

}

.empty{

    visibility:hidden;

}


/*==================================================
DÍAS
==================================================*/

.day{

    width:100%;

    aspect-ratio:1/1;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    border-radius:14px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:600;

    color:#334155;

    cursor:pointer;

    transition:.30s ease;

}

.day:hover{

    transform:translateY(-3px);

    border-color:#2D63F1;

    background:#EEF4FF;

}

/*==================================================
DÍA ACTUAL
==================================================*/

.today{

    background:#2D63F1;

    color:#FFFFFF;

    font-weight:700;

    box-shadow:0 12px 24px rgba(45,99,241,.25);

}

/*==================================================
EVENTOS
==================================================*/

.day.event::after,

.day.inspection::after,

.day.meeting::after,

.day.operation::after,

.day.priority::after{

    content:"";

    position:absolute;

    bottom:8px;

    width:8px;

    height:8px;

    border-radius:50%;

}

/* Inspección */

.inspection::after{

    background:#2563EB;

}


/* Reunión */

.meeting::after{

    background:#D97706;

}

/* Operativo */

.operation::after{

    background:#059669;

}

/* Prioridad */

.priority::after{

    background:#DC2626;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

    .calendar-month{

        font-size:20px;

    }

    .calendar-btn{

        width:40px;

        height:40px;

    }

    .calendar-weekdays span{

        font-size:12px;

    }

    .day{

        font-size:13px;

    }

}

/*==================================================
RESUMEN ESTADÍSTICO
==================================================*/

.stats-section{

    width:100%;

    margin:0;

    padding:0;

}

/*==================================================
ENCABEZADO
==================================================*/

.stats-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:48px;

}

.stats-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:999px;

    background:#DCE9FF;

    color:#2D63F1;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:700;

    letter-spacing:.2px;

}

.stats-badge i{

    font-size:16px;

}

.stats-title{

    margin-top:28px;

    font-family:'Montserrat',sans-serif;

    font-size:42px;

    font-weight:800;

    line-height:1.15;

    color:#0F172A;

}

.stats-description{

    width:100%;

    max-width:760px;

    margin:22px auto 0;

    font-family:'Montserrat',sans-serif;

    font-size:19px;

    line-height:1.8;

    color:#64748B;

}

/*==================================================
CONTENEDOR PRINCIPAL
==================================================*/

.stats-card{

    width:100%;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:28px;

    padding:42px;

    overflow:hidden;

    transition:.30s ease;

}

.stats-card:hover{

    transform:translateY(-6px);

    border-color:#2D63F1;

    box-shadow:0 18px 42px rgba(45,99,241,.12);

}

/*==================================================
SEPARACIÓN INTERNA
==================================================*/

.stats-card .analytics-kpis{

    margin-bottom:42px;

}

.stats-card .analytics-charts{

    margin-top:0;

}

/*==================================================
KPIs EJECUTIVOS
==================================================*/

.analytics-kpis{

    display:grid;

    grid-template-columns:repeat(4,minmax(150px,1fr));

    gap:20px;

}

.analytics-item{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:170px;

    padding:28px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:24px;

    overflow:hidden;

    cursor:pointer;

    transition:.30s ease;

}

.analytics-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#2D63F1;

    transform:scaleX(0);

    transform-origin:left;

    transition:.30s ease;

}

.analytics-item:hover{

    transform:translateY(-8px);

    border-color:#2D63F1;

    box-shadow:0 22px 45px rgba(45,99,241,.14);

}

.analytics-item h4{

    margin-bottom:18px;

    font-family:'Montserrat',sans-serif;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    color:#64748B;

    text-transform:uppercase;

}

.analytics-item span{

    display:block;

    margin-bottom:12px;

    font-family:'Montserrat',sans-serif;

    font-size:30px;

    font-weight:800;

    line-height:1;

    color:#0F172A;

    transition:.30s ease;

}

.analytics-item:hover span{

    color:#2D63F1;

}

.analytics-item small{

    display:flex;

    align-items:center;

    gap:8px;

    font-family:'Montserrat',sans-serif;

    font-size:14px;

    font-weight:600;

    color:#64748B;

}

.analytics-item small i{

    color:#16A34A;

    font-size:13px;

    transition:.30s ease;

}

.analytics-item:hover small i{

    transform:scale(1.15);

}

.analytics-item:nth-child(2) small i{

    color:#2563EB;

}

.analytics-item:nth-child(3) small i{

    color:#F59E0B;

}

.analytics-item:nth-child(4) small i{

    color:#DC2626;

}

/*==================================================
GRÁFICAS ANALÍTICAS
==================================================*/

.analytics-charts{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:28px;

    align-items:stretch;

}


/*==================================================
TARJETA DE GRÁFICA
==================================================*/

.chart-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:24px;

    padding:24px;

    min-height:270px;

    overflow:hidden;

    transition:.30s ease;

}

.chart-card:hover{

    transform:translateY(-8px);

    border-color:#2D63F1;

    box-shadow:0 22px 45px rgba(45,99,241,.14);

}

/*==================================================
ENCABEZADO DE GRÁFICA
==================================================*/

.chart-card h3{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:26px;

    font-family:'Montserrat',sans-serif;

    font-size:20px;

    font-weight:800;

    color:#0F172A;

    line-height:1.3;

}

.chart-card h3 i{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    background:#EEF4FF;

    color:#2D63F1;

    font-size:18px;

    transition:.30s ease;

}

.chart-card:hover h3 i{

    transform:rotate(-8deg) scale(1.08);

}


/*==================================================
ÁREA DEL CANVAS
==================================================*/

.chart-card canvas{

    flex:1;

    width:100% !important;

    height:150px !important;

    margin-top:auto;

}

/*==================================================
ESPACIADO ENTRE TARJETAS
==================================================*/

.chart-card + .chart-card{

    margin-top:0;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

    .analytics-kpis{

        grid-template-columns:repeat(2,1fr);

        gap:22px;

    }

    .analytics-charts{

        grid-template-columns:1fr;

        gap:24px;

    }

}

@media(max-width:992px){

    .stats-card{

        padding:34px;

    }

    .stats-title{

        font-size:36px;

    }

    .stats-description{

        font-size:17px;

    }

    .analytics-item{

        min-height:160px;

        padding:24px;

    }

    .analytics-item span{

        font-size:38px;

    }

    .chart-card{

        min-height:360px;

        padding:26px;

    }

    .chart-card canvas{

        height:180px !important;

    }

}

@media(max-width:768px){

    .stats-header{

        margin-bottom:34px;

    }

    .stats-badge{

        font-size:15px;

        padding:12px 22px;

    }

    .stats-title{

        font-size:30px;

    }

    .stats-description{

        font-size:16px;

        line-height:1.7;

    }

    .stats-card{

        padding:24px;

        border-radius:22px;

    }

    .analytics-kpis{

        grid-template-columns:1fr;

        gap:18px;

        margin-bottom:28px;

    }

    .analytics-item{

        min-height:145px;

        padding:22px;

    }

    .analytics-item h4{

        font-size:14px;

    }

    .analytics-item span{

        font-size:34px;

    }

    .chart-card{

        min-height:250px;

        padding:20px;

        border-radius:20px;

    }

    .chart-card h3{

        font-size:18px;

        margin-bottom:20px;

    }

    .chart-card h3 i{

        width:38px;

        height:38px;

        font-size:16px;

    }

    .chart-card canvas{

        height:220px !important;

    }

}

@media(max-width:480px){

    .stats-card{

        padding:18px;

    }

    .stats-title{

        font-size:26px;

    }

    .stats-description{

        font-size:15px;

    }

    .analytics-item{

        min-height:130px;

    }

    .analytics-item span{

        font-size:30px;

    }

    .chart-card{

        min-height:290px;

        padding:18px;

    }

    .chart-card canvas{

        height:200px !important;

    }

}

/*==================================================
ENCABEZADO
==================================================*/

.stats-header{

    text-align:center;

    margin-bottom:40px;

}

.stats-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    background:#DCE9FF;

    border-radius:999px;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:700;

    color:#2D63F1;

}

.stats-badge i{

    font-size:16px;

}

.stats-title{

    margin-top:28px;

    font-family:'Montserrat',sans-serif;

    font-size:34px;

    font-weight:800;

    color:#0F172A;

}

.stats-description{

    max-width:520px;

    margin:18px auto 0;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    line-height:1.7;

    color:#64748B;

}


/*==================================================
TARJETA
==================================================*/

.stats-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:22px;

    padding:40px;

    min-height:430px;

    transition:.30s ease;

}

.stats-card:hover{

    transform:translateY(-6px);

    border-color:#2D63F1;

    box-shadow:0 18px 40px rgba(45,99,241,.12);

}


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

.stats-placeholder{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

.stats-placeholder i{

    font-size:70px;

    color:#2D63F1;

    margin-bottom:30px;

}

.stats-placeholder h3{

    font-family:'Montserrat',sans-serif;

    font-size:26px;

    font-weight:800;

    color:#0F172A;

    margin-bottom:18px;

}

.stats-placeholder p{

    max-width:340px;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    line-height:1.8;

    color:#64748B;

}

/*==================================================
PANEL DE NOTIFICACIONES
==================================================*/

.notifications-section{

    margin-top:70px;

    margin-bottom:50px;

}


/*==================================================
ENCABEZADO
==================================================*/

.notifications-header{

    text-align:center;

    margin-bottom:50px;

}

.notifications-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    background:#DCE9FF;

    border-radius:999px;

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    font-weight:700;

    color:#2D63F1;

}

.notifications-badge i{

    font-size:16px;

}

.notifications-title{

    margin-top:28px;

    font-family:'Montserrat',sans-serif;

    font-size:42px;

    font-weight:800;

    color:#0F172A;

}

.notifications-description{

    max-width:760px;

    margin:22px auto 0;

    font-family:'Montserrat',sans-serif;

    font-size:20px;

    line-height:1.7;

    color:#64748B;

}


/*==================================================
LISTA
==================================================*/

.notifications-list{

    max-width:1100px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:22px;

}


/*==================================================
TARJETA
==================================================*/

.notification-card{

    display:flex;

    align-items:flex-start;

    gap:24px;

    padding:26px 30px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:22px;

    transition:.30s ease;

    cursor:pointer;

}

.notification-card:hover{

    transform:translateY(-6px);

    border-color:#2D63F1;

    box-shadow:0 18px 40px rgba(45,99,241,.12);

}


/*==================================================
ICONO
==================================================*/

.notification-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:20px;

    font-size:28px;

    transition:.30s ease;

}

.notification-card:hover .notification-icon{

    transform:scale(1.05);

}


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

.notification-content{

    flex:1;

}

.notification-content h3{

    margin-bottom:12px;

    font-family:'Montserrat',sans-serif;

    font-size:20px;

    font-weight:800;

    color:#0F172A;

}

.notification-content p{

    font-family:'Montserrat',sans-serif;

    font-size:17px;

    line-height:1.7;

    color:#64748B;

    margin-bottom:14px;

}

.notification-content span{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    background:#F3F6FA;

    border-radius:30px;

    font-family:'Montserrat',sans-serif;

    font-size:13px;

    font-weight:600;

    color:#64748B;

}


/*==================================================
TIPOS
==================================================*/

/* Peligro */

.danger .notification-icon{

    background:#FDE2E2;

    color:#DC2626;

}


/* Advertencia */

.warning .notification-icon{

    background:#FEF3C7;

    color:#D97706;

}


/* Información */

.info .notification-icon{

    background:#DBEAFE;

    color:#2563EB;

}


/* Correcto */

.success .notification-icon{

    background:#DCFCE7;

    color:#059669;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

    .notification-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .notification-content span{

        justify-content:center;

    }

}

/*==================================================
FOOTER DASHBOARD
==================================================*/

.dashboard-footer{

    margin-top:60px;
    padding:35px 40px 20px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:24px;

}

.dashboard-footer-content{

    display:grid;

    grid-template-columns:
    1fr
    1fr
    1fr;

    gap:40px;

    align-items:flex-start;

}

.footer-left h3{

    font-size:30px;

    font-weight:800;

    color:#2D63F1;

    letter-spacing:.5px;

    margin-bottom:12px;

}

.footer-left p{

    font-size:13px;

    font-weight:500;

    line-height:1.8;

    color:#6B7280;

}

.footer-center{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-status,
.footer-sync{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:13px;

    font-weight:500;

    color:#374151;

}

.footer-status i{

    color:#16A34A;

}

.footer-sync i{

    color:#2D63F1;

}

.footer-right{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-right a{

    text-decoration:none;

    color:#374151;

    font-size:13px;

    font-weight:600;

    transition:.30s;

}

.footer-right a:hover{

    color:#2D63F1;

}

.footer-right a:hover{

    color:#2D63F1;

}

.dashboard-copyright{

    margin-top:35px;

    padding-top:22px;

    border-top:1px solid #E5E7EB;

    text-align:center;

    font-size:13px;

    font-weight:500;

    color:#9CA3AF;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.dashboard-footer-content{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-status,
.footer-sync{

    justify-content:center;

}

.footer-right{

    align-items:center;

}

}

.dashboard-footer,
.dashboard-footer *{

    font-family:'Montserrat',sans-serif !important;

}

/*==========================================================
    RESPONSIVE BREAKPOINTS UNIFICADOS (DASHBOARD QRESP)
==========================================================*/

/* 1. DESKTOP LARGE (1440px) */
@media (max-width: 1440px) {
    .hero-container {
        padding: 50px 40px;
    }

    .hero-title {
        font-size: 48px;
    }
}

/* 2. TABLET HORIZONTAL / DESKTOP SMALL (980px) */
@media (max-width: 980px) {

    /* Encabezado limpio y alineado */
    .app-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
    }

    .system-info,
    .header-search {
        display: none !important;
    }

    /* Ocultar sidebar fuera de la pantalla en móvil */
    aside.app-sidebar,
    aside.app-sidebar.collapsed {
        position: fixed !important;
        top: 80px !important;
        left: -300px !important;
        width: 270px !important;
        min-width: 270px !important;
        height: calc(100vh - 80px) !important;
        background: #FFFFFF !important;
        box-shadow: 10px 0 25px rgba(0, 0, 0, 0.15) !important;
        transition: transform 0.3s ease, left 0.3s ease !important;
        z-index: 99999 !important;
    }

    /* Mostrar el texto y los íconos dentro del menú desplegado */
    aside.app-sidebar.sidebar-open .sidebar-title,
    aside.app-sidebar.sidebar-open .sidebar-link span {
        display: block !important;
    }

    aside.app-sidebar.sidebar-open .sidebar-link {
        width: 100% !important;
        height: 50px !important;
        justify-content: flex-start !important;
        padding: 0 18px !important;
        gap: 15px !important;
    }

    /* Desplegar sidebar sobre el contenido */
    aside.app-sidebar.sidebar-open {
        left: 0 !important;
    }

    /* Prevenir que el contenido principal se desplace */
    .dashboard-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px !important;
    }
}

/* 3. TABLET PORTRAIT (760px) */
@media (max-width: 760px) {
    .hero-container {
        padding: 30px 20px !important;
        border-radius: 20px !important;
    }

    .hero-title {
        font-size: 32px !important;
    }

    .hero-description {
        font-size: 15px !important;
    }

    .kpi-title,
    .access-title,
    .activity-title,
    .alerts-title,
    .calendar-title,
    .stats-title {
        font-size: 26px !important;
    }

    .analytics-kpis {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .analytics-charts {
        grid-template-columns: 1fr !important;
    }
}

/* 4. PHABLET / MOBILE LARGE (570px) */
@media (max-width: 570px) {
    .header-actions .message-btn,
    .header-actions .settings-btn {
        display: none !important; /* Mantiene solo notificaciones */
    }

    .user-info {
        display: none !important; /* Deja solo la imagen del avatar */
    }

    .hero-card {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .hero-card-arrow {
        display: none !important;
    }

    .analytics-kpis {
        grid-template-columns: 1fr !important;
    }
}

/* 5. MOBILE MEDIUM (480px) */
@media (max-width: 480px) {
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    html, body {
        overflow-x: hidden !important;
    }

    .dashboard-main {
        padding: 10px !important;
    }

    .kpi-card,
    .activity-card,
    .alert-card,
    .notification-card,
    .calendar-card,
    .stats-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    /* Ajuste fino del calendario en celular */
    .calendar-weekdays span {
        font-size: 11px !important;
    }

    .day {
        font-size: 12px !important;
        border-radius: 8px !important;
    }
}

/* 6. MOBILE SMALL (320px) */
@media (max-width: 320px) {
    .hero-title {
        font-size: 24px !important;
    }

    .logout-btn span {
        display: none !important; /* Mantiene solo el ícono de salir */
    }

    .logout-btn {
        width: 44px !important;
        padding: 0 !important;
    }
}

/*==========================================================
    AJUSTES FINOS DE UX Y ESTILO FUNCIONAL EN MÓVIL
==========================================================*/

/* 1. CABECERA (BOTÓN SALIR) */
@media (max-width: 570px) {
    .app-header {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    .logout-btn {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .logout-btn span {
        display: none !important; /* Muestra únicamente el ícono de salir */
    }
}

/* 2. INDICADORES EJECUTIVOS (KPIS) EN 1 O 2 COLUMNAS FLEXIBLES */
@media (max-width: 980px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 570px) {
    .kpi-grid {
        grid-template-columns: 1fr !important; /* 1 tarjeta por fila en celular */
        gap: 12px !important;
    }

    .kpi-card {
        padding: 16px 18px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .kpi-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
    }

    .kpi-value {
        font-size: 24px !important;
    }
}

/* 3. ACCESOS RÁPIDOS ADAPTABLES AL 100% */
@media (max-width: 980px) {
    .access-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .access-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
    }
}