/* ============================================================
   INTELLI-ELDERLY · Estilos personalizados
   --------------------------------------------------------------
   Psicología de color elegida:
   - Azul medio/teal (#0d6efd y #14b8a6): confianza, salud, calma.
     Usado para acciones principales y branding.
   - Verde menta: bienestar, indicadores positivos.
   - Ámbar: precaución, sin alarmar (incidencias).
   - Fondos beige/gris muy claros: calidez, evita el blanco clínico frío.
   - Tipografía sans-serif del sistema: legibilidad alta para personal
     mayor / con poca exposición a tecnología.
   ============================================================ */

:root{
    --color-primary: #0d6efd;
    --color-primary-dark: #0a58ca;
    --color-secondary: #14b8a6;
    --color-bg: #f6f7fb;
    --color-card: #ffffff;
    --color-sidebar: #ffffff;
    --color-text: #1f2937;
    --color-muted: #6b7280;
    --radius: 14px;
    --shadow-soft: 0 4px 12px rgba(15,23,42,.06);
}

html, body { height: 100%; }
body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

/* ============ LOGIN ============ */
.auth-body{
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 10% -10%, #dbeafe 0%, transparent 60%),
        radial-gradient(1000px 500px at 110% 110%, #d1fae5 0%, transparent 60%),
        var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.auth-shell{ width: 100%; max-width: 420px; }
.auth-card{
    background: var(--color-card);
    border-radius: var(--radius);
    padding: 2rem;
}
.auth-brand{
    text-align: center;
    margin-bottom: 1.25rem;
}
.auth-brand i{ font-size: 2.5rem; color: var(--color-primary); }
.auth-brand h1{ font-size: 1.4rem; margin: .25rem 0 0; font-weight: 700; }
.auth-brand p{ color: var(--color-muted); margin: 0; font-size: .9rem; }
.auth-footer{
    text-align: center; margin-top: 1rem; color: var(--color-muted); font-size: .8rem;
}

/* ============ APP SHELL ============ */
.app-body{
    min-height: 100vh;
    padding-left: 0;
}

.app-topbar{
    background: var(--color-card);
    border-bottom: 1px solid #eef0f4;
    position: sticky; top: 0; z-index: 1030;
}
.app-topbar .btn-icon{
    border: none; background: transparent; font-size: 1.4rem;
}

.app-sidebar{
    background: var(--color-sidebar);
    border-right: 1px solid #eef0f4;
    width: 250px;
}

@media (min-width: 992px){
    .app-sidebar{
        position: fixed !important;
        top: 56px !important; bottom: 0 !important; left: 0 !important;
        width: 250px !important;
        transform: none !important;
        visibility: visible !important;
        overflow: hidden !important;
    }
    /* Bootstrap controla .offcanvas-body — usamos un div interior propio */
    .app-sidebar .sidebar-scroll-area{
        height: calc(100vh - 56px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 1rem;
    }
    .app-main{ margin-left: 250px; }
}

.app-sidebar .nav-link{
    color: var(--color-text);
    border-radius: 10px;
    padding: .55rem .85rem;
    display: flex; align-items: center; gap: .65rem;
}
.app-sidebar .nav-link i{ font-size: 1.05rem; color: var(--color-muted); width: 20px; text-align: center;}
.app-sidebar .nav-link:hover{ background: #f1f4f9; }
.app-sidebar .nav-link.active{
    background: #e7f0ff; color: var(--color-primary); font-weight: 600;
}
.app-sidebar .nav-link.active i{ color: var(--color-primary); }
.app-sidebar .nav-link.disabled{ opacity:.5; cursor: not-allowed; }

/* ============ AVATAR ============ */
.avatar-circle{
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
}

/* ============ STAT CARDS ============ */
.stat-card{ border-radius: var(--radius); transition: transform .15s ease, box-shadow .15s ease; }
.stat-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.stat-icon{
    width: 56px; height: 56px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}

/* ============ BUTTONS / FORMS ============ */
.btn-primary{
    background: var(--color-primary); border-color: var(--color-primary);
}
.btn-primary:hover{ background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.form-control, .form-select{ border-radius: 10px; }
.form-control:focus, .form-select:focus{
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

.card{ border-radius: var(--radius); }

/* ============ TABLA ============ */
.table > :not(caption) > * > * { padding-top: .9rem; padding-bottom: .9rem; }
.table thead th{ font-size:.8rem; text-transform: uppercase; letter-spacing:.3px; color: var(--color-muted); }

/* ============ PRINT ============ */
.print-header { display: none; }

@media print {
    /* — Ocultar navegación y controles — */
    .app-topbar,
    .app-sidebar,
    .no-print,
    .alert .btn-close,
    .dropdown-menu           { display: none !important; }

    /* — Quitar margen del sidebar — */
    .app-main                { margin-left: 0 !important; }
    body                     { background: #fff !important; }

    /* — Cabecera institucional solo al imprimir — */
    .print-header            { display: flex !important; }

    /* — Tarjetas sin sombra — */
    .card                    { box-shadow: none !important;
                               border: 1px solid #dee2e6 !important; }
    .stat-card:hover         { transform: none !important; }

    /* — Ocultar botones de acción — */
    .btn                     { display: none !important; }
    /* Excepciones: badges y pills sí se muestran */
    .badge                   { -webkit-print-color-adjust: exact;
                               print-color-adjust: exact; }

    /* — Tablas más compactas — */
    .table > :not(caption) > * > * { padding-top: .45rem !important;
                                      padding-bottom: .45rem !important; }
    .table                   { font-size: .82rem; }
    tr                       { page-break-inside: avoid; }

    /* — Evitar corte dentro de cards — */
    .card                    { page-break-inside: avoid; }

    /* — Colores reales en badges — */
    *                        { -webkit-print-color-adjust: exact;
                               print-color-adjust: exact; }
}