/* ── Variables SSCQROO ────────────────────────────────── */
:root {
    --rrhh-sidebar-w: 240px;
    --rrhh-topbar-h: 64px;
    --rrhh-primary: #6b1535;
    --rrhh-primary-dark: #4a0d25;
    --rrhh-accent: #c8a84b;
    --rrhh-sidebar-bg: #4a0d25;
    --rrhh-sidebar-text: #f2d9e0;
    --rrhh-sidebar-hover: rgba(200,168,75,.15);
    --rrhh-sidebar-active: rgba(200,168,75,.25);
}

/* ── Campos en MAYÚSCULAS (visual + real vía JS en site.js) ──────────────── */
/* Excluye: email, password, date, number, file, hidden, checkbox, radio      */
/* Excluye también: cualquier campo con el atributo data-no-upper              */
input[type="text"]:not([data-no-upper]),
input:not([type]):not([data-no-upper]),
input[type="search"]:not([data-no-upper]),
input[type="tel"]:not([data-no-upper]),
textarea:not([data-no-upper]) {
    text-transform: uppercase;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: url('../images/quintana_roo.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 15px; } }

/* ── Layout base ─────────────────────────────────────── */
body.rrhh-body {
    margin: 0;
    background-color: transparent;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.rrhh-topbar {
    background: rgba(107, 21, 53, 0.92);
    height: var(--rrhh-topbar-h);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1040;
    border-bottom: 2px solid var(--rrhh-accent);
    backdrop-filter: blur(4px);
}

.rrhh-topbar .navbar-brand img { height: 44px; width: auto; }

.rrhh-wrapper {
    margin-top: var(--rrhh-topbar-h);
    min-height: calc(100vh - var(--rrhh-topbar-h));
}

/* ── Sidebar ─────────────────────────────────────────── */
.rrhh-sidebar {
    width: var(--rrhh-sidebar-w);
    min-width: var(--rrhh-sidebar-w);
    background: rgba(74, 13, 37, 0.88);
    backdrop-filter: blur(4px);
    color: var(--rrhh-sidebar-text);
    min-height: calc(100vh - var(--rrhh-topbar-h));
    position: sticky;
    top: var(--rrhh-topbar-h);
    height: calc(100vh - var(--rrhh-topbar-h));
    overflow-y: auto;
    transition: width .25s ease;
    z-index: 1030;
}

.rrhh-sidebar-brand {
    font-size: 1.05rem;
    color: var(--rrhh-accent);
    letter-spacing: .05em;
}

.rrhh-nav-category {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b8299;
    padding: .25rem .75rem;
    user-select: none;
}

.rrhh-nav-link {
    color: var(--rrhh-sidebar-text) !important;
    border-radius: 6px;
    padding: .42rem .75rem !important;
    font-size: .875rem;
    display: flex;
    align-items: center;
    transition: background .15s;
}

.rrhh-nav-link:hover {
    background: var(--rrhh-sidebar-hover);
    color: #fff !important;
}

.rrhh-nav-link.active {
    background: var(--rrhh-sidebar-active);
    color: var(--rrhh-accent) !important;
    font-weight: 600;
}

.rrhh-sidebar-footer { background: rgba(0,0,0,.15); font-size: .75rem; }

/* ── Contenido principal ─────────────────────────────── */
.rrhh-content { background: rgba(244, 246, 249, 0.78); }

.rrhh-footer {
    background: rgba(255, 255, 255, 0.82);
    font-size: .75rem;
}

/* ── Dashboard cards ─────────────────────────────────── */
.stat-card {
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.stat-card .stat-icon {
    width: 48px; height: 48px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: .78rem; color: #6c757d; margin-top: .2rem; }

/* ── Tablas ──────────────────────────────────────────── */
.table-rrhh thead th {
    background: var(--rrhh-primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    border: none;
    white-space: nowrap;
}
.table-rrhh tbody tr:hover { background: #f0f4f8; }

/* ── Page header ─────────────────────────────────────── */
.page-header {
    border-bottom: 2px solid var(--rrhh-accent);
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
}
.page-header h4 { color: var(--rrhh-primary); font-weight: 700; margin: 0; }

/* ── Focus / form ───────────────────────────────────── */
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(107,21,53,.25);
}

/* ── Responsive sidebar ──────────────────────────────── */
@media (max-width: 767.98px) {
    .rrhh-sidebar { position: fixed; left: -var(--rrhh-sidebar-w); transition: left .25s; }
    .rrhh-sidebar.show { left: 0; }
}

/* ═══════════════════════════════════════════════════════
   MODERN UI ENHANCEMENTS
   ═══════════════════════════════════════════════════════ */

/* ── Branded card header ────────────────────────────── */
.card-header-rrhh {
    background: linear-gradient(135deg, var(--rrhh-primary) 0%, var(--rrhh-primary-dark) 100%);
    color: #fff;
    padding: .7rem 1.25rem;
    border-bottom: none;
    border-radius: calc(.375rem - 1px) calc(.375rem - 1px) 0 0;
    font-weight: 600;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header-rrhh > span, .card-header-rrhh > div { display: flex; align-items: center; }
.card-header-rrhh .btn { font-size: .78rem; }
.card-header-rrhh .btn-light { color: var(--rrhh-primary); font-weight: 600; }
.card-header-rrhh .btn-light:hover { background: rgba(255,255,255,.85); }
.card-header-rrhh .btn-outline-light {
    border-color: rgba(255,255,255,.5);
    color: rgba(255,255,255,.9);
}
.card-header-rrhh .btn-outline-light:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
    color: #fff;
}

/* ── Danger card header ─────────────────────────────── */
.card-header-danger {
    background: linear-gradient(135deg, #b03a2e 0%, #7b241c 100%);
    color: #fff;
    padding: .7rem 1.25rem;
    border-bottom: none;
    border-radius: calc(.375rem - 1px) calc(.375rem - 1px) 0 0;
    font-weight: 600;
    font-size: .9rem;
}

/* ── Form section title ─────────────────────────────── */
.form-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--rrhh-primary);
    border-left: 3px solid var(--rrhh-accent);
    padding-left: .6rem;
    margin-bottom: .6rem;
    margin-top: .25rem;
}

/* ── Compact table action buttons ───────────────────── */
.btn-tbl {
    padding: .18rem .42rem;
    font-size: .78rem;
    line-height: 1.4;
}

/* ── Detail field layout ────────────────────────────── */
.detail-item {
    padding: .5rem 0;
    border-bottom: 1px solid rgba(0,0,0,.055);
}
.detail-item:last-child { border-bottom: none; }
.detail-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rrhh-primary);
    margin-bottom: .15rem;
}
.detail-value { font-size: .9rem; color: #212529; }

/* ── Danger icon (delete confirmation) ──────────────── */
.danger-icon {
    width: 72px; height: 72px;
    background: rgba(220,53,69,.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    color: #dc3545;
    margin: 0 auto 1rem;
}

/* ── Empty state ────────────────────────────────────── */
.empty-state { padding: 2.5rem 1rem; text-align: center; color: #adb5bd; }
.empty-state i { font-size: 2.8rem; display: block; opacity: .4; margin-bottom: .65rem; }
.empty-state p { font-size: .85rem; margin: 0; }

/* ── Search section inside card ─────────────────────── */
.search-section {
    background: rgba(248,249,250,.92);
    border-bottom: 1px solid rgba(0,0,0,.07);
    padding: .75rem 1.25rem;
}

/* ── Table improvements ─────────────────────────────── */
.table-rrhh tbody tr:nth-child(even) { background-color: rgba(107,21,53,.018); }
.table-rrhh tbody tr:hover { background-color: rgba(107,21,53,.06) !important; }
.table-rrhh td { font-size: .855rem; vertical-align: middle; }

/* ── Improved card footer ───────────────────────────── */
.card-footer-rrhh {
    background: transparent;
    border-top: 1px solid rgba(0,0,0,.07);
    padding: .5rem 1.25rem;
    font-size: .8rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Form submit bar ────────────────────────────────── */
.form-submit-bar {
    padding-top: .85rem;
    margin-top: .85rem;
    border-top: 1px solid rgba(0,0,0,.08);
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* ── Page header refinement ─────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; }
.page-header h4 { margin: 0; }
.page-header-plain { border-bottom: 2px solid var(--rrhh-accent); padding-bottom: .5rem; margin-bottom: 1.5rem; }

/* ── Focus refinement ───────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: rgba(107,21,53,.4);
    box-shadow: 0 0 0 .2rem rgba(107,21,53,.12);
}

/* ── Categorías de catálogo ─────────────────────────── */
.cat-filter-btn { border-radius: 2rem !important; }

/* ── Glassmorphism / Transparencia ──────────────────── */
.rrhh-content {
    background: rgba(237, 240, 245, 0.52) !important;
}

.card {
    background: rgba(255, 255, 255, 0.80) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.search-section {
    background: rgba(248, 249, 250, 0.65) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.card-footer-rrhh {
    background: rgba(248, 249, 250, 0.50) !important;
}

.stat-card {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.table-rrhh tbody tr { background: transparent !important; }
.table-rrhh tbody tr:nth-child(even) { background: rgba(107,21,53,.025) !important; }
.table-rrhh tbody tr:hover { background: rgba(107,21,53,.07) !important; }

/* ── Acciones en tablas sin btn-group ───────────────── */
.action-btns .btn { margin-inline: 1px; }

/* ════════════════════════════════════════════════════════
   DASHBOARD MODERNO
   ════════════════════════════════════════════════════════ */

/* ── Banner de bienvenida ────────────────────────────── */
.dash-welcome {
    background: linear-gradient(135deg, var(--rrhh-primary) 0%, var(--rrhh-primary-dark) 60%, #2c0714 100%);
    border-radius: 14px;
    padding: 1.25rem 1.75rem;
    color: #fff;
    box-shadow: 0 4px 20px rgba(107,21,53,.35);
}
.dash-welcome h4 { color: #fff; }
.dash-welcome-sub { color: rgba(255,255,255,.65); font-size: .82rem; margin-top: .1rem; }
.dash-clock-time {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    color: var(--rrhh-accent);
    font-variant-numeric: tabular-nums;
}
.dash-clock-date { font-size: .75rem; color: rgba(255,255,255,.55); margin-top: .15rem; }

/* ── Tarjetas KPI ────────────────────────────────────── */
.dash-kpi-card {
    position: relative;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    color: #fff;
    box-shadow: 0 3px 14px rgba(0,0,0,.15);
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
    cursor: pointer;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
}
.dash-kpi-card::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    pointer-events: none;
}
.dash-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.dash-kpi-icon {
    font-size: 2rem;
    opacity: .25;
    position: absolute;
    right: 1rem; top: .9rem;
    line-height: 1;
}
.dash-kpi-value {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-kpi-label { font-size: .76rem; opacity: .82; margin-top: .25rem; }
.dash-kpi-pct   { font-size: .7rem; opacity: .7; }
.dash-kpi-link  { position: absolute; inset: 0; z-index: 1; }

.dash-kpi-blue   { background: linear-gradient(135deg, #1d6fa4 0%, #154e74 100%) !important; }
.dash-kpi-green  { background: linear-gradient(135deg, #1a8a4a 0%, #0f5c31 100%) !important; }
.dash-kpi-amber  { background: linear-gradient(135deg, #c17f1a 0%, #8a5a11 100%) !important; }
.dash-kpi-cyan   { background: linear-gradient(135deg, #0f7a8a 0%, #085a67 100%) !important; }
.dash-kpi-purple { background: linear-gradient(135deg, #6b1535 0%, #4a0d25 100%) !important; }
.dash-kpi-red    { background: linear-gradient(135deg, #c0392b 0%, #7b241c 100%) !important; }
.dash-kpi-indigo { background: linear-gradient(135deg, #3b4fc4 0%, #263087 100%) !important; }

/* ── Accesos rápidos (cuadrícula de botones) ────────── */
.dash-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .85rem .5rem;
    border-radius: 12px;
    background: rgba(107,21,53,.07);
    color: var(--rrhh-primary);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background .15s, transform .15s, box-shadow .15s;
    border: 1px solid rgba(107,21,53,.12);
}
.dash-quick-btn i { font-size: 1.5rem; }
.dash-quick-btn:hover {
    background: var(--rrhh-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107,21,53,.3);
    text-decoration: none;
}
.dash-quick-green  { background: rgba(26,138,74,.08);  color: #1a8a4a; border-color: rgba(26,138,74,.18); }
.dash-quick-green:hover  { background: #1a8a4a;  color: #fff; box-shadow: 0 4px 12px rgba(26,138,74,.3); }
.dash-quick-cyan   { background: rgba(15,122,138,.08); color: #0f7a8a; border-color: rgba(15,122,138,.18); }
.dash-quick-cyan:hover   { background: #0f7a8a;  color: #fff; box-shadow: 0 4px 12px rgba(15,122,138,.3); }
.dash-quick-gray   { background: rgba(90,100,115,.08); color: #5a6473; border-color: rgba(90,100,115,.18); }
.dash-quick-gray:hover   { background: #5a6473;  color: #fff; box-shadow: 0 4px 12px rgba(90,100,115,.3); }
.dash-quick-red    { background: rgba(192,57,43,.08);  color: #c0392b; border-color: rgba(192,57,43,.18); }
.dash-quick-red:hover    { background: #c0392b;  color: #fff; box-shadow: 0 4px 12px rgba(192,57,43,.3); }
.dash-quick-dark   { background: rgba(33,37,41,.08);   color: #343a40; border-color: rgba(33,37,41,.18); }
.dash-quick-dark:hover   { background: #343a40;  color: #fff; box-shadow: 0 4px 12px rgba(33,37,41,.3); }

/* ── Donut central ───────────────────────────────────── */
.dash-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.dash-donut-pct  { font-size: 1.7rem; font-weight: 800; color: var(--rrhh-primary); line-height: 1; }
.dash-donut-pct small { font-size: .85rem; font-weight: 600; }
.dash-donut-sub  { font-size: .65rem; color: #6c757d; text-transform: uppercase; letter-spacing: .06em; }

/* ── Leyenda donut ───────────────────────────────────── */
.dash-legend-dot { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: #555; }
.dash-legend-dot .dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--dot-color);
    flex-shrink: 0;
}

/* ── Timeline de movimientos ─────────────────────────── */
.dash-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dash-timeline-item {
    display: flex;
    gap: .85rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    position: relative;
}
.dash-timeline-item:last-child { border-bottom: none; }
.dash-tl-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--rrhh-primary);
    flex-shrink: 0;
    margin-top: .35rem;
    box-shadow: 0 0 0 3px rgba(107,21,53,.15);
}
.dash-tl-name { font-size: .85rem; font-weight: 600; color: #212529; line-height: 1.2; }
.dash-tl-date { font-size: .72rem; color: #6c757d; }
.dash-badge-tipo {
    background: rgba(107,21,53,.12);
    color: var(--rrhh-primary);
    font-size: .68rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: .3rem;
}

/* ????????????????????????????????????????????????????????
   DASHBOARD � HERO BANNER & ESTATUS CHIPS
   ???????????????????????????????????????????????????????? */

/* ?? Hero banner ??????????????????????????????????????? */
.dash-hero {
    position: relative;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(107,21,53,.4);
    background: linear-gradient(135deg, #6b1535 0%, #4a0d25 50%, #2c0714 100%);
}
.dash-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(200,168,75,.18) 0%, transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(255,255,255,.05) 0%, transparent 40%);
    pointer-events: none;
}
.dash-hero-shield {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: rgba(200,168,75,.2);
    border: 1px solid rgba(200,168,75,.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    color: var(--rrhh-accent);
    flex-shrink: 0;
}
.dash-hero-stat { text-align: center; }
.dash-hero-num {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-hero-sublabel {
    font-size: .7rem;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .07em;
}
.dash-hero-divider {
    width: 1px;
    background: rgba(255,255,255,.2);
    align-self: stretch;
}
.dash-hero .dash-clock-time {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--rrhh-accent);
    letter-spacing: .06em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-hero .dash-clock-date {
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    margin-top: .2rem;
}

/* ?? Chips de estatus dentro de la tarjeta Empleados ??? */
.dash-estatus-chip {
    border-radius: 10px;
    padding: .6rem .4rem;
    font-size: .85rem;
}
.dash-chip-activo { background: rgba(255,255,255,.12); color: #a8f5c8; }
.dash-chip-baja   { background: rgba(255,255,255,.08); color: #faa; }
.dash-chip-susp   { background: rgba(255,255,255,.08); color: #fde68a; }
.dash-chip-num {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.dash-chip-lbl {
    font-size: .68rem;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .05em;
}
/* --------------------------------------------------------
   MANUAL DE OPERACI�N CONTEXTUAL � HELP PANEL
   -------------------------------------------------------- */

/* -- Bot�n flotante de ayuda (FAB) --------------------- */
.help-fab {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rrhh-primary), var(--rrhh-primary-dark));
    color: #fff;
    border: none;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(107,21,53,.45);
    cursor: pointer;
    z-index: 1050;
    transition: transform .18s, box-shadow .18s;
}
.help-fab:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 24px rgba(107,21,53,.55);
    color: var(--rrhh-accent);
}
.help-fab:active { transform: scale(.95); }

/* Tooltip del FAB */
.help-fab::before {
    content: 'Ayuda';
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(33,37,41,.88);
    color: #fff;
    font-size: .72rem;
    padding: .25rem .6rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.help-fab:hover::before { opacity: 1; }

/* -- Offcanvas principal ------------------------------- */
.help-offcanvas {
    width: 380px !important;
    max-width: 95vw;
    border-left: 3px solid var(--rrhh-accent) !important;
    background: #f8f9fb !important;
    display: flex;
    flex-direction: column;
}

.help-offcanvas-header {
    background: linear-gradient(135deg, var(--rrhh-primary) 0%, var(--rrhh-primary-dark) 100%);
    color: #fff;
    padding: 1rem 1.25rem;
    flex-shrink: 0;
}
.help-header-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    color: var(--rrhh-accent);
    flex-shrink: 0;
}
.help-breadcrumb {
    color: rgba(255,255,255,.6);
    font-size: .72rem;
    display: block;
    margin-top: .05rem;
}

/* -- Cuerpo del offcanvas ------------------------------ */
.help-offcanvas-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

/* -- Secciones internas -------------------------------- */
.help-section {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.help-section:last-child { border-bottom: none; }

.help-section-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(107,21,53,.08);
    color: var(--rrhh-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .75rem;
}
.help-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--rrhh-primary);
    margin-bottom: .4rem;
}
.help-section-text {
    font-size: .825rem;
    color: #495057;
    line-height: 1.55;
    margin: 0;
}

/* -- Etiqueta de subsecci�n ---------------------------- */
.help-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rrhh-primary);
    border-left: 3px solid var(--rrhh-accent);
    padding-left: .5rem;
    margin-bottom: .6rem;
}

/* -- Lista de pasos ------------------------------------ */
.help-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: .825rem;
    color: #343a40;
    line-height: 1.6;
}
.help-steps li { margin-bottom: .35rem; }
.help-steps li:last-child { margin-bottom: 0; }

/* -- Lista de campos ----------------------------------- */
.help-fields {
    list-style: none;
    margin: 0; padding: 0;
    font-size: .8rem;
    color: #495057;
}
.help-fields li {
    padding: .35rem .5rem;
    border-radius: 6px;
    margin-bottom: .2rem;
    background: rgba(107,21,53,.04);
    border-left: 2px solid rgba(107,21,53,.25);
}
.help-fields li:last-child { margin-bottom: 0; }

/* -- Consejos ------------------------------------------ */
.help-tips { background: rgba(200,168,75,.07); }
.help-tips-list {
    list-style: none;
    margin: 0; padding: 0;
    font-size: .8rem;
    color: #5a4a00;
}
.help-tips-list li {
    padding: .3rem 0 .3rem 1.3rem;
    position: relative;
}
.help-tips-list li::before {
    content: '??';
    position: absolute;
    left: 0; top: .28rem;
    font-size: .85rem;
}

/* -- Advertencias -------------------------------------- */
.help-warnings { background: rgba(220,53,69,.05); }
.help-warn-list {
    list-style: none;
    margin: 0; padding: 0;
    font-size: .8rem;
    color: #7b1c1c;
}
.help-warn-list li {
    padding: .3rem 0 .3rem 1.4rem;
    position: relative;
}
.help-warn-list li::before {
    content: '??';
    position: absolute;
    left: 0; top: .28rem;
    font-size: .82rem;
}

/* -- Chips de "Ver tambi�n" ---------------------------- */
.help-related-chip {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: 2rem;
    background: rgba(107,21,53,.08);
    color: var(--rrhh-primary);
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(107,21,53,.18);
    transition: background .15s, color .15s;
}
.help-related-chip:hover {
    background: var(--rrhh-primary);
    color: #fff;
    text-decoration: none;
}

/* -- Pie del panel ------------------------------------- */
.help-offcanvas-footer {
    padding: .6rem 1.25rem;
    font-size: .7rem;
    color: #6c757d;
    background: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}

/* -- Animaci�n de entrada del FAB ---------------------- */
@keyframes fabPop {
    0%   { transform: scale(0) rotate(-90deg); opacity: 0; }
    70%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.help-fab { animation: fabPop .45s cubic-bezier(.34,1.56,.64,1) .5s both; }

/* -- Indicador global de carga ------------------------- */
.rrhh-page-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(248, 249, 250, .78);
    backdrop-filter: blur(2px);
}

.rrhh-page-loading.show {
    display: flex;
}

.rrhh-page-loading-panel {
    width: min(340px, calc(100% - 2rem));
    padding: 1.4rem;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .16);
}