/* =============================================================
   Sistema de Turnos — estética institucional (misma línea que RRHH)
   Contraste: texto sobre color de fondo ≥ 10:1 (monitores mal calibrados)
   ============================================================= */
:root {
    --verde:         #2e7031;   /* bordes, acentos */
    --verde-oscuro:  #174a1b;   /* botones (blanco encima ≈ 10:1) */
    --verde-noche:   #0f2612;   /* cabeceras / hover (blanco encima ≈ 16:1) */
    --verde-claro:   #dcedc8;
    --rojo:          #7a121c;   /* blanco encima ≈ 10:1 */
    --amarillo:      #ffc107;   /* negro encima ≈ 13:1 */
    --borde:         #97a1ab;
    --texto:         #111;
    --texto-suave:   #333;
    --sombra-sm:     0 .125rem .25rem rgba(0,0,0,.075);
    --sombra-md:     0 .5rem 1rem rgba(0,0,0,.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Arial, sans-serif;
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, var(--verde-claro) 100%);
    background-attachment: fixed;
    color: var(--texto);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

a       { color: var(--verde-oscuro); font-weight: 600; }
a:hover { color: var(--verde-noche); }

/* ── Tarjeta de login / selección ───────────────────────────── */
.login-container {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 8px;
    box-shadow: var(--sombra-md);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}
.login-header {
    background: linear-gradient(135deg, #163d19 0%, var(--verde-noche) 100%);
    color: #fff;
    text-align: center;
    padding: 22px 20px 18px;
}
.login-header img   { height: 74px; width: auto; display: block; margin: 0 auto 10px; }
.login-header h1    { color: #fff; font-size: 21px; font-weight: 700; margin: 0; }
.login-header .sub  { color: #fff; font-size: 14px; margin-top: 4px; font-weight: 600; }
.login-body         { padding: 26px 30px 24px; }

h1 { color: var(--texto); margin-bottom: 10px; text-align: center; font-size: 24px; }
h2 { color: var(--verde-noche); font-size: 19px; margin: 24px 0 12px; }
h3 { color: var(--verde-noche); font-size: 16px; margin-bottom: 8px; }

.subtitle {
    color: var(--texto-suave);
    text-align: center;
    margin-bottom: 22px;
    font-weight: 600;
}

/* ── Formularios ────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

label {
    display: block;
    margin-bottom: 4px;
    color: var(--texto-suave);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

input, select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.75px solid var(--borde);
    border-radius: 4px;
    font-size: 15px;
    color: var(--texto);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(46,112,49,.18);
}

/* ── Botones ────────────────────────────────────────────────── */
.btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: var(--verde-oscuro);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.btn:hover { background: var(--verde-noche); transform: translateY(-1px); }

/* Botones del menú de inicio: mismo verde, ícono a la izquierda */
.modulos { display: grid; gap: 12px; margin-top: 8px; }
.modulos .btn { font-size: 17px; padding: 15px 16px; }

.volver { text-align: center; margin-top: 18px; }

/* ── Alertas ────────────────────────────────────────────────── */
.alert {
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 14px;
}
.alert-success { background: #d4edda; color: #0b2e13; border: 1px solid #9fd3ab; border-left: 5px solid var(--verde-oscuro); }
.alert-error   { background: #f8d7da; color: #491217; border: 1px solid #f1aeb5; border-left: 5px solid var(--rojo); }

/* =============================================================
   Páginas de administración (panel, usuarios, áreas)
   ============================================================= */
body.pagina {
    display: block;
    padding: 0;
    align-items: initial;
}

.topbar {
    background: linear-gradient(135deg, #163d19 0%, var(--verde-noche) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 72px 8px 20px;   /* a la derecha queda lugar para el botón "?" */
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 60px;
}
.topbar .marca {
    display: flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none; font-weight: 700; font-size: 16px;
}
.topbar .marca img { height: 40px; width: auto; }
.topbar .usuario   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar .usuario span { color: #fff; font-weight: 600; font-size: 14px; }

.btn-top, .btn-salir {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 700;
    text-decoration: none !important; white-space: nowrap; cursor: pointer;
    border: 1.5px solid #fff; color: #fff !important; background: transparent;
}
.btn-top:hover   { background: #fff; color: var(--verde-noche) !important; }
.btn-salir       { background: var(--rojo); border-color: var(--rojo); }
.btn-salir:hover { background: #4d0b11; border-color: #fff; }

.page-header {
    background: #fff;
    border-bottom: 1px solid var(--borde);
    padding: 10px 24px;
}
.page-header h1 { text-align: left; font-size: 18px; margin: 0; color: var(--texto); }
.page-header .sub { font-size: 13px; color: var(--texto-suave); font-weight: 600; }

.main-content { max-width: 1400px; margin: 0 auto; padding: 0 20px 30px; }

.panel {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: var(--sombra-sm);
    margin-top: 20px;
}
.panel > h2:first-child { margin-top: 0; }

/* Tablas: encabezado negro y filas alternadas, como en RRHH */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table thead th {
    background: #000; color: #fff; font-weight: 700;
    padding: 8px 10px; text-align: left; white-space: nowrap;
}
table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table tbody tr:nth-child(even) td { background: #d6dde4; }
table tbody tr:hover td { background: var(--verde-claro); }
.tabla-wrap { border: 1px solid var(--borde); border-radius: 6px; overflow: auto; }

/* Etiquetas de estado (texto sobre color ≥ 10:1) */
.estado-badge {
    display: inline-block; padding: 3px 10px; border-radius: 4px;
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.estado-espera   { background: #174a1b; color: #fff; }
.estado-llamado  { background: #ffc107; color: #000; }
.estado-atendido { background: #3b1f5c; color: #fff; }
.estado-derivado { background: #0b3a6b; color: #fff; }
.estado-finalizado { background: #333; color: #fff; }
.estado-ausente    { background: #7a121c; color: #fff; }

@media (max-width: 768px) {
    .main-content { padding: 0 12px 20px; }
    .panel        { padding: 14px; }
    .login-body   { padding: 20px; }
}