/*==================================================
 Portal MasPensiones
 Identidad visual: verde oscuro + dorado
 (misma paleta que la landing pública)
 Versión: 1.1
==================================================*/

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

:root{

    --primary:#123c33;

    --primary-dark:#0b2b25;

    --primary-light:#1d5a4e;

    --accent:#c7a34b;

    --accent-dark:#a8863a;

    --secondary:#F4F7FA;

    --white:#FFFFFF;

    --success:#2AA876;

    --danger:#D9534F;

    --warning:#F0AD4E;

    --text:#2F3A45;

    --border:#D9E2EC;

    --shadow:0 15px 35px rgba(0,0,0,.08);

    --radius:14px;

    --transition:.25s;

    --font-heading:'Poppins','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

    --font:'Inter','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;

}

body{

    font-family:var(--font);

    background:var(--secondary);

    color:var(--text);

}

h1,h2,h3{font-family:var(--font-heading)}

/*================ LOGIN ================*/

.login-body{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    background:linear-gradient(135deg,var(--primary),var(--primary-light));

    padding:20px;

    position:relative;

}

.back-to-site{

    position:fixed;

    top:24px;

    left:24px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    padding:10px 16px;

    border-radius:8px;

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

    transition:background var(--transition);

    z-index:10;

}

.back-to-site:hover{

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

}

.back-to-site span{

    font-size:16px;

}

@media(max-width:480px){

    .back-to-site{

        top:14px;

        left:14px;

        padding:8px 12px;

        font-size:13px;

    }

}

.login-container{

    width:100%;

    max-width:430px;

    padding:20px;

}

.login-card{

    background:#fff;

    border-radius:var(--radius);

    padding:45px;

    box-shadow:var(--shadow);

}

.logo{

    text-align:center;

    margin-bottom:35px;

}

.logo h1{

    color:var(--primary);

    font-size:34px;

    font-weight:700;

}

.logo p{

    color:#7B8794;

    margin-top:8px;

}

/*================ FORMULARIOS ================*/

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.form-group input{

    width:100%;

    padding:14px;

    border:1px solid var(--border);

    border-radius:10px;

    outline:none;

    transition:var(--transition);

    font-size:15px;

    font-family:var(--font);

}

.form-group input:focus{

    border-color:var(--primary);

}

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

.btn-login{

    width:100%;

    padding:15px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:var(--primary);

    color:#fff;

    font-size:16px;

    font-weight:600;

    transition:var(--transition);

}

.btn-login:hover{

    background:var(--primary-dark);

}

/*================ ALERTAS ================*/

.alert-error{

    background:#FDECEC;

    color:#C62828;

    padding:14px;

    border-radius:10px;

    margin-bottom:20px;

    border-left:5px solid #C62828;

}

.alert-success{

    background:#E7F7EE;

    color:#15803D;

    padding:14px;

    border-radius:10px;

    margin-bottom:20px;

    border-left:5px solid #15803D;

}

/*================ PIE ================*/

.version{

    margin-top:30px;

    text-align:center;

    color:#94A3B8;

    font-size:13px;

}

/*================ RESPONSIVE (login) ================*/

@media(max-width:768px){

.login-card{

    padding:30px;

}

.logo h1{

    font-size:28px;

}

}
/*==================================================
DASHBOARD
==================================================*/

.wrapper{

    min-height:100vh;

}

.sidebar{

    width:260px;

    background:var(--primary);

    color:#fff;

}

.main-content{

    padding:40px;

}

.page-header{

    margin-bottom:35px;

}

.page-header h1{

    font-size:32px;

    margin-bottom:8px;

}

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.dashboard-card{

    background:#fff;

    border-radius:14px;

    padding:28px;

    text-decoration:none;

    color:#2F3A45;

    transition:.25s;

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

    display:block;

}

.dashboard-card:hover{

    transform:translateY(-4px);

}

.card-icon{

    font-size:42px;

    margin-bottom:20px;

}

.dashboard-card h3{

    margin-bottom:10px;

}

.dashboard-card p{

    color:#64748B;

}

.dashboard-card.disabled{

    opacity:.70;

    cursor:not-allowed;

}

.dashboard-card.disabled:hover{

    transform:none;

}

/*==================================================
TOPBAR
==================================================*/

.topbar{

    position:fixed;

    left:260px;

    right:0;

    top:0;

    height:75px;

    background:#FFFFFF;

    border-bottom:1px solid #E5E7EB;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    z-index:100;

    transition:left var(--transition);

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.topbar h2{

    font-size:24px;

    color:var(--primary);

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.user-name{

    font-weight:600;

}

.user-name-link{

    color:var(--text);

    text-decoration:none;

    padding:6px 10px;

    border-radius:8px;

    transition:.2s;

}

.user-name-link:hover{

    background:var(--secondary);

}

.logout-button{

    background:var(--danger);

    color:white;

    text-decoration:none;

    padding:10px 18px;

    border-radius:8px;

    transition:.25s;

}

.logout-button:hover{

    background:#B52B27;

}

.main-content{

    margin-left:260px;

    margin-top:75px;

    transition:margin-left var(--transition);

}

/* Botón hamburguesa: solo visible en móvil/tablet */

.sidebar-toggle{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    width:34px;

    height:34px;

    background:transparent;

    border:none;

    cursor:pointer;

    padding:0;

    flex-shrink:0;

}

.sidebar-toggle span{

    display:block;

    width:24px;

    height:2px;

    background:var(--primary);

    border-radius:2px;

    transition:transform var(--transition), opacity var(--transition);

}

.sidebar-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sidebar-toggle.active span:nth-child(2){opacity:0}
.sidebar-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Fondo oscuro detrás del sidebar cuando está abierto en móvil */

.sidebar-overlay{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(11,43,37,.55);

    z-index:150;

    opacity:0;

    pointer-events:none;

    transition:opacity var(--transition);

}

.sidebar-overlay.visible{

    opacity:1;

    pointer-events:auto;

}

/*---------- Colapsar el sidebar (escritorio / tablet) ----------*/

body.sidebar-collapsed .sidebar{

    transform:translateX(-100%);

}

body.sidebar-collapsed .topbar{

    left:0;

}

body.sidebar-collapsed .main-content,
body.sidebar-collapsed .content{

    margin-left:0;

}

@media(max-width:900px){

.topbar{

    left:0;

}

.main-content{

    margin-left:0;

}

.sidebar-toggle{

    display:flex;

}

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

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:260px;

    height:100vh;

    background:var(--primary);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    color:#FFFFFF;

    overflow:auto;

    z-index:200;

    transition:transform var(--transition) ease;

}

.sidebar-logo{

    padding:35px 25px;

    border-bottom:1px solid rgba(255,255,255,.10);

}

.sidebar-logo h2{

    font-size:28px;

    margin-bottom:6px;

}

.sidebar-logo span{

    opacity:.8;

    font-size:14px;

}

.sidebar-menu{

    display:flex;

    flex-direction:column;

    padding:20px 0;

}

.menu-item{

    display:flex;

    align-items:center;

    gap:14px;

    color:#FFFFFF;

    text-decoration:none;

    padding:16px 28px;

    transition:.25s;

}

.menu-item:hover{

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

}

.menu-item.active{

    background:var(--primary-dark);

    border-left:5px solid var(--accent);

}

.menu-item.disabled{

    opacity:.55;

    cursor:not-allowed;

}

.icon{

    width:28px;

    text-align:center;

    font-size:18px;

}

.sidebar-footer{

    padding:25px;

    border-top:1px solid rgba(255,255,255,.10);

    text-align:center;

    opacity:.75;

    font-size:13px;

}

.topbar small{

    display:block;

    color:#94A3B8;

    margin-top:3px;

    font-size:13px;

}

@media(max-width:900px){

.sidebar{

    transform:translateX(-100%);

}

.sidebar.open{

    transform:translateX(0);

    box-shadow:8px 0 30px rgba(0,0,0,.25);

}

}


/*====================================================
=            MÓDULO CORREOS EMPRESARIALES            =
====================================================*/

.content{

    padding:30px;

    margin-left:260px;

    margin-top:75px;

    transition:margin-left var(--transition);

}

@media(max-width:900px){

    .content{

        margin-left:0;

    }

}

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    gap:20px;

    flex-wrap:wrap;

}

.page-header h1{

    margin:0;

    font-size:28px;

    color:#1E293B;

}

.page-header p{

    margin-top:6px;

    color:#64748B;

    font-size:14px;

}

.card{

    background:#FFFFFF;

    border-radius:12px;

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

    overflow:hidden;

}

.card-header{

    padding:20px;

    border-bottom:1px solid #ECECEC;

}

.search-input{

    width:100%;

    padding:12px 15px;

    border:1px solid #D8DEE9;

    border-radius:8px;

    font-size:15px;

    outline:none;

    transition:.25s;

    font-family:var(--font);

}

.search-input:focus{

    border-color:var(--primary);

}

.table-responsive{

    overflow-x:auto;

}

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    text-align:left;

    background:#F8FAFC;

    color:#475569;

    padding:16px;

    font-size:14px;

}

.table td{

    padding:16px;

    border-top:1px solid #F1F5F9;

    font-size:14px;

}

.table tbody tr{

    transition:.20s;

}

.table tbody tr:hover{

    background:#F8FAFC;

}

/*==================================
=            BADGES                =
==================================*/

.badge{

    display:inline-block;

    padding:5px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

.badge.success{

    background:#DCFCE7;

    color:#15803D;

}

.badge.warning{

    background:#FEF3C7;

    color:#92400E;

}

.badge.danger{

    background:#FEE2E2;

    color:#B91C1C;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:8px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.20s;

    cursor:pointer;

    border:none;

    font-family:var(--font);

}

.btn:hover{

    transform:translateY(-1px);

}

.btn-primary{

    background:var(--accent);

    color:var(--primary-dark);

}

.btn-primary:hover{

    background:var(--accent-dark);

    color:#fff;

}

.btn-sm{

    padding:8px 12px;

    font-size:13px;

    margin-right:6px;

}

.warning{

    background:var(--warning);

    color:#FFFFFF;

}

.warning:hover{

    background:#D97706;

}

.danger{

    background:var(--danger);

    color:#FFFFFF;

}

.danger:hover{

    background:#B52B27;

}

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

@media(max-width:900px){

    .page-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .table th,
    .table td{

        white-space:nowrap;

    }

    .main-content{

        padding:25px;

    }

    .content{

        padding:20px;

    }

}

@media(max-width:480px){

    .login-card{

        padding:26px;

    }

    .topbar{

        padding:0 18px;

    }

    .topbar h2{

        font-size:19px;

    }

    .topbar-right .user-name{

        display:none;

    }

}

/*====================================================
=              MÓDULO AGENDA / CITAS                 =
====================================================*/

/*---------- Estado vacío ----------*/

.empty-state{

    background:#FFFFFF;

    border-radius:14px;

    padding:60px 30px;

    text-align:center;

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

}

.empty-state-icon{

    font-size:52px;

    margin-bottom:18px;

}

.empty-state h3{

    color:var(--primary);

    margin-bottom:10px;

    font-size:20px;

}

.empty-state p{

    color:#64748B;

    max-width:420px;

    margin:0 auto 24px;

    line-height:1.6;

}

/*---------- Secciones de la agenda ----------*/

.appt-section{

    margin-bottom:36px;

}

.appt-section h2{

    font-size:18px;

    color:var(--primary);

    margin-bottom:6px;

}

.appt-section-sub{

    color:#64748B;

    font-size:13px;

    margin-bottom:16px;

}

.appt-section-empty{

    color:#94A3B8;

    font-size:14px;

    padding:18px 0;

}

.appt-section-alert h2{

    color:#B45309;

}

/*---------- Tarjeta de cita ----------*/

.appt-card{

    display:flex;

    align-items:center;

    gap:22px;

    background:#FFFFFF;

    border-radius:14px;

    padding:20px 24px;

    margin-bottom:14px;

    box-shadow:0 8px 22px rgba(0,0,0,.05);

    border-left:5px solid var(--border);

    flex-wrap:wrap;

}

.appt-vencida{ border-left-color:var(--danger); }
.appt-pendiente{ border-left-color:var(--warning); }
.appt-confirmada{ border-left-color:#2563EB; }
.appt-atendida{ border-left-color:var(--success); }
.appt-cancelada{ border-left-color:#94A3B8; opacity:.75; }

.appt-date{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:60px;

    height:60px;

    flex-shrink:0;

    background:var(--secondary);

    border-radius:10px;

}

.appt-day{

    font-size:22px;

    font-weight:700;

    color:var(--primary);

    line-height:1.1;

}

.appt-month{

    font-size:12px;

    font-weight:600;

    color:var(--accent-dark);

    letter-spacing:.5px;

}

.appt-info{

    flex:1;

    min-width:180px;

}

.appt-info h3{

    font-size:16px;

    color:#1E293B;

    margin-bottom:4px;

}

.appt-time{

    color:#475569;

    font-size:13.5px;

    margin-bottom:4px;

}

.appt-motivo{

    color:#64748B;

    font-size:13.5px;

    margin-bottom:4px;

}

.appt-contacto{

    color:#94A3B8;

    font-size:13px;

}

.appt-status{

    flex-shrink:0;

}

.appt-actions{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

    flex-shrink:0;

}

.badge.info{

    background:#DBEAFE;

    color:#1D4ED8;

}

/*---------- Historial (colapsable) ----------*/

.appt-history{

    background:#FFFFFF;

    border-radius:14px;

    padding:20px 24px;

    box-shadow:0 8px 22px rgba(0,0,0,.05);

}

.appt-history summary{

    cursor:pointer;

    font-weight:600;

    color:var(--primary);

    padding:6px 0;

}

.appt-history .appt-card{

    margin-top:14px;

    box-shadow:none;

    border:1px solid #F1F5F9;

}

/*---------- Formularios (Nueva / Editar cita) ----------*/

.form-card{

    padding:30px;

    max-width:720px;

}

.form-row{

    margin-bottom:20px;

}

.form-row-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.form-row-2 .form-group{

    margin-bottom:0;

}

.form-card label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    font-size:14px;

    color:#334155;

}

.form-card input[type="text"],
.form-card input[type="tel"],
.form-card input[type="email"],
.form-card input[type="date"],
.form-card input[type="time"],
.form-card select,
.form-card textarea{

    width:100%;

    padding:13px 14px;

    border:1px solid var(--border);

    border-radius:10px;

    outline:none;

    font-size:15px;

    font-family:var(--font);

    color:var(--text);

    background:#fff;

    transition:.2s;

}

.form-card textarea{

    resize:vertical;

}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{

    border-color:var(--primary);

}

.btn-block{

    width:100%;

    padding:15px;

    font-size:15px;

    background:var(--primary);

    color:#fff;

    border:none;

}

.btn-block:hover{

    background:var(--primary-dark);

}

/*---------- Responsive: Agenda ----------*/

@media(max-width:700px){

    .appt-card{

        padding:16px 18px;

        gap:14px;

    }

    .appt-actions{

        width:100%;

        justify-content:flex-start;

    }

    .form-row-2{

        grid-template-columns:1fr;

    }

    .form-card{

        padding:22px 18px;

    }

}

/*====================================================
=       RECORDATORIOS MÚLTIPLES (tipo Google Cal)    =
====================================================*/

.field-hint{

    color:#94A3B8;

    font-size:12.5px;

    margin:-2px 0 12px;

}

.reminders-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:12px;

}

.reminder-row{

    display:flex;

    align-items:center;

    gap:10px;

}

.reminder-row select{

    flex:1;

    width:auto;

}

.reminder-remove{

    flex-shrink:0;

    width:38px;

    height:38px;

    border-radius:8px;

    border:1px solid var(--border);

    background:#fff;

    color:#94A3B8;

    font-size:14px;

    cursor:pointer;

    transition:.2s;

}

.reminder-remove:hover{

    background:#FEE2E2;

    color:var(--danger);

    border-color:#FCA5A5;

}

@media(max-width:480px){

    .reminder-row select{

        font-size:14px;

    }

}

/*====================================================
=          MÓDULO CORREOS: formularios reales        =
====================================================*/

.input-with-suffix{

    display:flex;

    align-items:center;

    border:1px solid var(--border);

    border-radius:10px;

    overflow:hidden;

    background:#fff;

}

.input-with-suffix input{

    border:none !important;

    flex:1;

    border-radius:0 !important;

}

.input-with-suffix input:focus{

    outline:none;

}

.input-with-suffix span{

    padding:0 14px;

    color:#64748B;

    font-size:14px;

    white-space:nowrap;

    background:var(--secondary);

    align-self:stretch;

    display:flex;

    align-items:center;

}

.confirm-text{

    font-size:15px;

    line-height:1.7;

    color:#334155;

    margin-bottom:26px;

}

.confirm-actions{

    display:flex;

    gap:10px;

    justify-content:flex-end;

}

/*====================================================
=   CORREOS: credenciales, generador y confirmación   =
====================================================*/

.credentials-card{

    padding:30px;

    max-width:560px;

}

.credentials-row{

    margin-bottom:20px;

}

.credentials-row label{

    display:block;

    font-size:13px;

    font-weight:600;

    color:#64748B;

    margin-bottom:6px;

    text-transform:uppercase;

    letter-spacing:.4px;

}

.credentials-value{

    background:var(--secondary);

    border:1px solid var(--border);

    border-radius:10px;

    padding:14px 16px;

    font-size:16px;

    color:#1E293B;

    word-break:break-all;

}

.credentials-password{

    font-family:'Courier New', monospace;

    font-weight:700;

    color:var(--primary);

    letter-spacing:.5px;

}

.password-generator{

    display:flex;

    gap:10px;

}

.password-generator input{

    flex:1;

}

.password-generator button{

    flex-shrink:0;

    white-space:nowrap;

}

.confirm-typed{

    margin:22px 0;

}

.confirm-typed input{

    width:100%;

    padding:13px 14px;

    border:1px solid var(--border);

    border-radius:10px;

    font-size:15px;

    outline:none;

}

.confirm-typed input:focus{

    border-color:var(--danger);

}

.confirm-buttons{

    display:flex;

    gap:10px;

    justify-content:flex-end;

}

.btn.danger:disabled{

    opacity:.4;

    cursor:not-allowed;

}

/*====================================================
=       CORREOS: columna de contraseña + copiar       =
====================================================*/

.password-cell{

    display:flex;

    align-items:center;

    gap:8px;

}

.password-cell-text{

    background:var(--secondary);

    border:1px solid var(--border);

    border-radius:6px;

    padding:5px 9px;

    font-size:13px;

    color:#334155;

    white-space:nowrap;

}

.btn-copy{

    flex-shrink:0;

    border:1px solid var(--border);

    background:#fff;

    color:var(--primary);

    font-size:12px;

    font-weight:600;

    padding:5px 10px;

    border-radius:6px;

    cursor:pointer;

    transition:.2s;

    white-space:nowrap;

}

.btn-copy:hover{

    background:var(--secondary);

}

.password-cell-sin-registro{

    color:#94A3B8;

    font-size:13px;

}

.password-cell-sin-registro a{

    color:var(--primary);

    font-weight:600;

}

/*====================================================
=              MÓDULO USUARIOS                        =
====================================================*/

.switch-label{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:500;

    font-size:14px;

    color:#334155;

    padding:13px 14px;

    border:1px solid var(--border);

    border-radius:10px;

    cursor:pointer;

}

.switch-label input{

    width:18px;

    height:18px;

}

/*====================================================
=       DASHBOARD: accesos rápidos + estadísticas     =
====================================================*/

.quick-access{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:36px;

}

.quick-access-item{

    display:flex;

    align-items:center;

    gap:8px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

    padding:10px 16px;

    text-decoration:none;

    color:#334155;

    font-size:14px;

    font-weight:600;

    box-shadow:0 4px 12px rgba(0,0,0,.04);

    transition:.2s;

}

.quick-access-item:hover{

    border-color:var(--accent);

    transform:translateY(-2px);

}

.quick-access-icon{

    font-size:17px;

}

.dashboard-section-title{

    font-size:16px;

    color:var(--primary);

    margin:0 0 14px;

    font-weight:700;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:18px;

    margin-bottom:34px;

}

.stat-card{

    background:#fff;

    border-radius:14px;

    padding:24px;

    box-shadow:0 8px 22px rgba(0,0,0,.05);

    border-left:5px solid var(--accent);

}

.stat-card-alerta{

    border-left-color:var(--danger);

}

.stat-value{

    font-size:32px;

    font-weight:800;

    color:var(--primary);

    line-height:1;

    margin-bottom:8px;

}

.stat-card-alerta .stat-value{

    color:var(--danger);

}

.stat-label{

    color:#64748B;

    font-size:13.5px;

    font-weight:600;

}

.stat-error{

    margin-top:8px;

    font-size:12px;

    color:#94A3B8;

}

@media(max-width:600px){

    .stat-value{

        font-size:26px;

    }

}