/* =====================================================================
   eleam.css — Sistema ELEAM
   Responsivo: menú hamburguesa < 820px
   ===================================================================== */

/* ── Variables ──────────────────────────────────────────────────────── */
:root {
    --color-primario:    #1a5276;
    --color-secundario:  #2e86c1;
    --color-acento:      #148f77;
    --color-bg:          #f4f6f9;
    --color-bg-card:     #ffffff;
    --color-texto:       #212529;
    --color-muted:       #6c757d;
    --color-borde:       #dee2e6;
    --color-danger:      #c0392b;
    --color-warning:     #d68910;
    --color-success:     #1e8449;
    --color-info:        #1a5276;
    --radio:             6px;
    --sombra:            0 2px 8px rgba(0,0,0,.10);
    --nav-ancho:         240px;
    --header-alto:       56px;
    --fuente:            'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Reset mínimo ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
    font-family: var(--fuente);
    background: var(--color-bg);
    color: var(--color-texto);
    min-height: 100vh;
}
a { color: var(--color-secundario); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--header-alto);
    background: var(--color-primario);
    color: #fff;
    z-index: 200;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1rem;
    gap: .75rem;
}
.header-brand { display: flex; align-items: center; gap: .6rem; }
.logo { color: #fff; font-size: 1.1rem; display: flex; align-items: center; gap: .4rem; }
.logo:hover { text-decoration: none; }
.inst-nombre {
    font-size: .75rem;
    background: rgba(255,255,255,.15);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.header-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
}
.user-nombre { white-space: nowrap; }
.btn-logout, .btn-cambiar-eleam {
    color: #fff;
    background: rgba(255,255,255,.18);
    border-radius: var(--radio);
    padding: 3px 8px;
    font-size: .9rem;
}
.btn-logout:hover, .btn-cambiar-eleam:hover {
    background: rgba(255,255,255,.3);
    text-decoration: none;
}

/* Badges de rol */
.rol-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}
.rol-su             { background: #7d3c98; }
.rol-dt             { background: #1a5276; }
.rol-clinico        { background: var(--color-acento); }
.rol-administrativo { background: #784212; }

/* Hamburguesa */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: .3s;
}

/* ── Navegación lateral ─────────────────────────────────────────────── */
.site-nav {
    position: fixed;
    top: var(--header-alto);
    left: 0;
    bottom: 0;
    width: var(--nav-ancho);
    background: var(--color-primario);
    padding: 1rem 0;
    overflow-y: auto;
    z-index: 150;
    transition: transform .3s ease;
}
.site-nav ul { list-style: none; }
.site-nav ul li a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1.2rem;
    color: rgba(255,255,255,.82);
    font-size: .9rem;
    transition: background .2s, color .2s;
    border-left: 3px solid transparent;
}
.site-nav ul li a:hover,
.site-nav ul li a.activo {
    background: rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
    border-left-color: #5dade2;
}

.site-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 140;
}

/* ── Contenido principal ────────────────────────────────────────────── */
.site-main {
    margin-left: var(--nav-ancho);
    margin-top: var(--header-alto);
    padding: 1.5rem;
    min-height: calc(100vh - var(--header-alto) - 40px);
}
.site-footer {
    margin-left: var(--nav-ancho);
    padding: .6rem 1.5rem;
    font-size: .75rem;
    color: var(--color-muted);
    border-top: 1px solid var(--color-borde);
    display: flex;
    justify-content: space-between;
}

/* ── Tarjetas y contenedores ────────────────────────────────────────── */
.card {
    background: var(--color-bg-card);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.card-titulo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--color-borde);
}
.page-titulo {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primario);
    margin-bottom: 1.25rem;
}

/* Grid de stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.stat-card {
    background: var(--color-bg-card);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem;
    text-align: center;
    border-top: 4px solid var(--color-secundario);
}
.stat-card .stat-num { font-size: 2rem; font-weight: 700; color: var(--color-primario); }
.stat-card .stat-label { font-size: .8rem; color: var(--color-muted); margin-top: .2rem; }

/* ── Tablas ─────────────────────────────────────────────────────────── */
.tabla-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
thead th {
    background: var(--color-primario);
    color: #fff;
    padding: .55rem .8rem;
    text-align: left;
    white-space: nowrap;
}
tbody tr:nth-child(even) { background: #f8f9fa; }
tbody td { padding: .5rem .8rem; border-bottom: 1px solid var(--color-borde); vertical-align: middle; }
tbody tr:hover { background: #eaf4fb; }

/* ── Formularios ────────────────────────────────────────────────────── */
.form-grupo { margin-bottom: 1rem; }
.form-grupo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.form-control {
    width: 100%;
    padding: .45rem .7rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-size: .9rem;
    font-family: inherit;
    transition: border-color .2s;
}
.form-control:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(46,134,193,.15);
}
.form-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.form-hint { font-size: .78rem; color: var(--color-muted); margin-top: .2rem; }

/* ── Botones ────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1rem;
    border: none;
    border-radius: var(--radio);
    font-size: .88rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: filter .2s, opacity .2s;
    white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn:active { filter: brightness(.95); }
.btn-primario  { background: var(--color-primario);   color: #fff; }
.btn-secundario{ background: var(--color-secundario); color: #fff; }
.btn-exito     { background: var(--color-success);    color: #fff; }
.btn-peligro   { background: var(--color-danger);     color: #fff; }
.btn-gris      { background: #6c757d;                 color: #fff; }
.btn-sm        { padding: .3rem .65rem; font-size: .8rem; }
.btn-xs        { padding: .2rem .45rem; font-size: .75rem; }

/* ── Alertas ────────────────────────────────────────────────────────── */
.alerta {
    padding: .75rem 1rem;
    border-radius: var(--radio);
    margin-bottom: 1rem;
    font-size: .88rem;
    border-left: 4px solid;
}
.alerta-error   { background: #fdecea; color: var(--color-danger);  border-color: var(--color-danger); }
.alerta-warning { background: #fef9e7; color: var(--color-warning); border-color: var(--color-warning); }
.alerta-exito   { background: #eafaf1; color: var(--color-success); border-color: var(--color-success); }
.alerta-info    { background: #eaf4fb; color: var(--color-info);    border-color: var(--color-info); }

/* ── Badges estado ──────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}
.badge-activo    { background: #d5f5e3; color: var(--color-success); }
.badge-egresado  { background: #fdecea; color: var(--color-danger); }
.badge-fallecido { background: #f2f3f4; color: #555; }
.badge-leve      { background: #d5f5e3; color: var(--color-success); }
.badge-moderada  { background: #fef9e7; color: var(--color-warning); }
.badge-severa    { background: #fdecea; color: var(--color-danger); }
.badge-grave     { background: #7d0000; color: #fff; }
.badge-bajo      { background: #d5f5e3; color: var(--color-success); }
.badge-medio     { background: #fef9e7; color: var(--color-warning); }
.badge-alto      { background: #fdecea; color: var(--color-danger); }

/* ── Dashboard anillos ──────────────────────────────────────────────── */
.riesgo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.riesgo-card {
    background: var(--color-bg-card);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem;
    text-align: center;
}
.riesgo-card svg { width: 90px; height: 90px; }
.riesgo-label { font-size: .8rem; color: var(--color-muted); margin-top: .4rem; }
.riesgo-pct { font-size: 1.3rem; font-weight: 700; }

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
    .site-header, .site-nav, .site-footer,
    .btn, .hamburger, .site-overlay { display: none !important; }
    .site-main { margin: 0; padding: 0; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    body { font-size: 11pt; }
    table { font-size: 10pt; }
    thead th { background: #eee !important; color: #000 !important; }

    /* Marca de confidencialidad Ley 19.628 */
    .site-main::after {
        content: 'DOCUMENTO CONFIDENCIAL — Ley 19.628 Protección de Datos Personales';
        display: block;
        text-align: center;
        font-size: 8pt;
        color: #888;
        margin-top: 2rem;
        border-top: 1px solid #ccc;
        padding-top: .5rem;
    }
}

/* ── Responsive < 820px ─────────────────────────────────────────────── */
@media (max-width: 820px) {
    .hamburger { display: flex; }

    .site-nav {
        transform: translateX(calc(-1 * var(--nav-ancho)));
    }
    .site-nav.abierto {
        transform: translateX(0);
        box-shadow: 4px 0 16px rgba(0,0,0,.3);
    }
    .site-overlay.activo { display: block; }

    .site-main  { margin-left: 0; padding: 1rem; }
    .site-footer{ margin-left: 0; }

    .inst-nombre { display: none; }
    .user-nombre { display: none; }
    .form-fila   { grid-template-columns: 1fr; }

    .stats-grid  { grid-template-columns: repeat(2, 1fr); }
}