/* =============================================================
   Sistema de Diáconos IBCV
   Diseño Profesional Limpio (2025)
   ============================================================= */

/* =============================================================
   DESIGN SYSTEM v2 — Tokens (V55, 2026-05-27)
   Plan: docs/plans/2026-05-27-design-system.md
   Direccion: Modern Corporate con calidez (slate blue + warm amber).
   Cualquier valor visual nuevo DEBE consumir tokens; no hardcodear hex.
   ============================================================= */

:root {
    /* ===========================
       PRIMARY — Slate Blue
       =========================== */
    --color-primary-50:  #eff4ff;
    --color-primary-100: #dbe6fe;
    --color-primary-200: #bfd2fd;
    --color-primary-300: #93b4fa;
    --color-primary-400: #5e8df5;
    --color-primary-500: #3b6fe8;
    --color-primary-600: #1e40af;  /* Interactivo principal — AAA con blanco (9.05:1) */
    --color-primary-700: #1e3a8a;
    --color-primary-800: #1e3577;
    --color-primary-850: #152b6f;  /* Sidebar background — unificado con el fondo del logo */
    --color-primary-900: #172554;

    /* ===========================
       ACCENT — Warm Amber
       =========================== */
    --color-accent-50:  #fffbeb;
    --color-accent-100: #fef3c7;
    --color-accent-200: #fde68a;
    --color-accent-300: #fcd34d;
    --color-accent-400: #fbbf24;
    --color-accent-500: #f59e0b;
    --color-accent-600: #d97706;
    --color-accent-700: #b45309;
    --color-accent-800: #92400e;   /* Texto sobre accent-100/200 — AAA (8.30:1) */
    --color-accent-900: #78350f;

    /* ===========================
       NEUTRAL — Cool Slate
       =========================== */
    --color-neutral-0:   #ffffff;
    --color-neutral-50:  #f8fafc;  /* bg-page default */
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;  /* border default */
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;  /* text muted */
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;  /* text body */
    --color-neutral-900: #0f172a;  /* text headings */

    /* ===========================
       SEMANTIC — Success/Warning/Danger/Info
       =========================== */
    --color-success-50:  #ecfdf5;
    --color-success-100: #d1fae5;
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-success-700: #047857;
    --color-success-800: #065f46;

    --color-warning-50:  #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-500: #f59e0b;
    --color-warning-700: #b45309;
    --color-warning-800: #92400e;

    --color-danger-50:  #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-800: #991b1b;

    --color-info-50:  #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1d4ed8;

    --color-purple-100: #ede9fe;
    --color-purple-600: #7c3aed;
    --color-purple-700: #6d28d9;
    --color-purple-800: #5b21b6;

    /* ===========================
       ROLES SEMÁNTICOS (lo que el código USA por intencion)
       =========================== */
    --bg-page: var(--color-neutral-50);
    --bg-surface: var(--color-neutral-0);
    --bg-surface-alt: var(--color-neutral-100);
    --bg-sidebar: var(--color-primary-850);
    --bg-topbar: var(--color-neutral-0);

    --color-text-primary: var(--color-neutral-800);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-muted: var(--color-neutral-500);
    --color-text-disabled: var(--color-neutral-400);
    --color-text-inverse: var(--color-neutral-0);
    --color-text-on-primary: var(--color-neutral-0);
    --color-text-link: var(--color-primary-600);
    --color-text-link-hover: var(--color-primary-700);

    --color-border: var(--color-neutral-200);
    --color-border-strong: var(--color-neutral-300);
    --color-border-focus: var(--color-primary-500);

    --color-primary-interactive: var(--color-primary-600);
    --color-primary-interactive-hover: var(--color-primary-700);
    --color-primary-interactive-active: var(--color-primary-800);

    /* ===========================
       TIPOGRAFÍA
       =========================== */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-heading: 'Manrope', var(--font-family-base);
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;
    --font-size-5xl:  3rem;

    --line-height-tight:   1.25;
    --line-height-snug:    1.375;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.625;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* ===========================
       SPACING (4px base)
       =========================== */
    --space-0:  0;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ===========================
       BORDER RADIUS
       =========================== */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;     /* radio principal del sistema */
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-full: 9999px;

    /* ===========================
       SHADOWS (escala progresiva)
       =========================== */
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
    --shadow-focus: 0 0 0 3px rgba(30, 64, 175, 0.20);

    /* ===========================
       TRANSITIONS
       =========================== */
    --transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ===========================
       LAYOUT
       =========================== */
    --sidebar-width: 264px;
    --sidebar-width-collapsed: 72px;
    --topbar-height: 64px;
    --content-max-width: 1440px;

    /* ===========================
       Z-INDEX scale
       =========================== */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-sidebar:  1020;
    --z-topbar:   1030;
    --z-modal-backdrop: 1040;
    --z-modal:    1050;
    --z-toast:    1080;

    /* ===========================
       LEGACY ALIASES (compatibilidad con CSS existente — quitar gradualmente en sub-fases B-F)
       Los nombres antiguos siguen funcionando pero ahora apuntan a tokens v2.
       =========================== */
    --color-primary: var(--color-primary-interactive);
    --color-secondary: var(--color-neutral-700);
    --color-accent: var(--color-accent-600);
    --color-danger: var(--color-danger-600);
    --color-success: var(--color-success-600);
    --color-info: var(--color-info-600);
    --color-warning: var(--color-warning-500);
    --color-text-dark: var(--color-text-primary);
    --color-text-light: var(--color-text-inverse);
    --bg-card: var(--bg-surface);
    --border-color: var(--color-border);
    --border-radius: var(--radius-md);
    --shadow: var(--shadow-sm);

    /* Referencias previamente rotas — ahora resueltas con tokens v2 */
    --color-accent-pink: var(--color-primary-700);   /* link hover (antes string vacio) */
    --color-accent-light: var(--color-accent-300);   /* logo border en sidebar (antes string vacio) */

    /* ===========================
       OVERRIDE DE VARIABLES BOOTSTRAP 5.3
       Bootstrap usa sus propias --bs-* (con !important en utilidades como
       .bg-primary). Redefinirlas aqui hace que TODAS las utilidades de
       Bootstrap (.bg-*, .text-*, .btn-*, .border-*, .table-*, badges,
       links) usen la paleta v2 automaticamente, sin pelear con !important.
       =========================== */
    --bs-primary: var(--color-primary-600);
    --bs-primary-rgb: 30, 64, 175;
    --bs-secondary: var(--color-neutral-600);
    --bs-secondary-rgb: 71, 85, 105;
    --bs-success: var(--color-success-600);
    --bs-success-rgb: 5, 150, 105;
    --bs-info: var(--color-info-600);
    --bs-info-rgb: 37, 99, 235;
    --bs-warning: var(--color-warning-500);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: var(--color-danger-600);
    --bs-danger-rgb: 220, 38, 38;
    --bs-light: var(--color-neutral-100);
    --bs-light-rgb: 241, 245, 249;
    --bs-dark: var(--color-neutral-800);
    --bs-dark-rgb: 30, 41, 59;

    --bs-link-color: var(--color-primary-600);
    --bs-link-color-rgb: 30, 64, 175;
    --bs-link-hover-color: var(--color-primary-700);
    --bs-link-hover-color-rgb: 30, 58, 138;

    --bs-body-color: var(--color-text-primary);
    --bs-body-color-rgb: 30, 41, 59;
    --bs-body-bg: var(--bg-page);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-md);

    --bs-primary-text-emphasis: var(--color-primary-800);
    --bs-success-text-emphasis: var(--color-success-800);
    --bs-danger-text-emphasis: var(--color-danger-800);
    --bs-warning-text-emphasis: var(--color-warning-800);
    --bs-info-text-emphasis: var(--color-info-700);
    --bs-primary-bg-subtle: var(--color-primary-50);
    --bs-success-bg-subtle: var(--color-success-50);
    --bs-danger-bg-subtle: var(--color-danger-50);
    --bs-warning-bg-subtle: var(--color-warning-50);
    --bs-info-bg-subtle: var(--color-info-50);
}

/* =============================================================
   DARK MODE (opcional, toggleable via data-theme="dark" en <html>)
   ============================================================= */

[data-theme="dark"] {
    --bg-page: var(--color-neutral-900);
    --bg-surface: var(--color-neutral-800);
    --bg-surface-alt: var(--color-neutral-700);
    --bg-sidebar: var(--color-neutral-900);
    --bg-topbar: var(--color-neutral-800);

    --color-text-primary: var(--color-neutral-100);
    --color-text-secondary: var(--color-neutral-300);
    --color-text-muted: var(--color-neutral-400);
    --color-text-link: #60a5fa;       /* primary-400 — mas brillante en dark */
    --color-text-link-hover: #93b4fa;

    --color-border: var(--color-neutral-700);
    --color-border-strong: var(--color-neutral-600);

    --color-primary-interactive: #60a5fa;       /* primary-400 */
    --color-primary-interactive-hover: #93b4fa;
    --color-primary-interactive-active: #bfd2fd;

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px 0 rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -1px rgba(0, 0, 0, 0.20);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.40), 0 4px 6px -2px rgba(0, 0, 0, 0.20);
    --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.40);

    /* legacy aliases recalculados para dark */
    --color-primary: var(--color-primary-interactive);
    --color-secondary: var(--color-neutral-300);
    --color-text-dark: var(--color-text-primary);
    --color-text-light: var(--color-text-primary);
    --bg-card: var(--bg-surface);
    --border-color: var(--color-border);
}

/* =============================================================
   ACCESIBILIDAD: respeto de prefers-reduced-motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--font-family-base);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-dark);
    background: var(--bg-page);
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--color-text-link-hover);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

p {
    margin: 0 0 var(--space-3);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

/* Focus ring universal (Sub-fase B) — todo elemento interactivo */
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* Skip-to-content link — visualmente oculto hasta recibir foco (a11y) */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: calc(var(--z-topbar) + 1);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary-interactive);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: top var(--transition-base);
}
.skip-link:focus-visible {
    top: var(--space-4);
    color: var(--color-text-on-primary);
}

/* =============================================================
   Layout Principal
   ============================================================= */

.main-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    color: var(--color-text-inverse);
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    z-index: var(--z-sidebar);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    /* overflow-x: hidden evita la barra de scroll horizontal mientras el riel
       anima su ancho (72px ↔ 264px). */
    overflow-x: hidden;
    transition: width var(--transition-base), transform var(--transition-slow);
}

.sidebar .sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: var(--space-2);
    background: transparent;
    transition: opacity var(--transition-fast);
}

.sidebar .sidebar-logo:hover {
    opacity: 0.88;
}

.sidebar .sidebar-logo-img {
    width: 100%;
    max-width: 220px;
    height: auto;
    max-height: 132px;
    object-fit: contain;
}

.sidebar .sidebar-logo-fallback {
    color: var(--color-text-inverse);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
}

.sidebar .logo-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--color-accent-300);
    border: 2px solid var(--color-accent-300);
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
}

.sidebar .logo-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.sidebar .logo-subtitle {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: var(--space-2) 0;
}

.sidebar .nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sidebar .sidebar-menu-group {
    margin-bottom: var(--space-1);
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.82);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-3);
    min-height: 44px;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar .nav-link i {
    font-size: var(--font-size-lg);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar .nav-link:hover {
    color: var(--color-text-inverse);
    background: rgba(255, 255, 255, 0.08);
}

.sidebar .nav-link.active {
    color: var(--color-text-inverse);
    background: rgba(255, 255, 255, 0.16);
    font-weight: var(--font-weight-bold);
}

.sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    background: var(--color-accent-400);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Sección de perfil de usuario */
.sidebar .user-profile-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-top: auto;
}

.sidebar .user-info-display {
    margin-bottom: var(--space-3);
}

.sidebar .avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

.sidebar .avatar.has-image {
    background: rgba(255, 255, 255, 0.16);
}

.sidebar .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar .user-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    word-wrap: break-word;
    color: var(--color-text-inverse);
    line-height: var(--line-height-snug);
}

.sidebar .user-role {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    word-wrap: break-word;
    color: var(--color-accent-300);
    line-height: var(--line-height-tight);
}

/* Botón Cerrar Sesión */
.sidebar .btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-3);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}

.sidebar .btn-logout:hover {
    background: var(--color-danger-600);
    color: var(--color-text-inverse);
    border-color: var(--color-danger-600);
}

.sidebar .btn-logout i {
    font-size: var(--font-size-base);
}

/* Etiquetas de sección del sidebar */
.sidebar .nav-section-header {
    padding: var(--space-3) var(--space-3) var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sidebar .nav-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(252, 211, 77, 0.30), transparent);
}

.sidebar .nav-section-header small {
    color: var(--color-accent-300);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Sidebar mobile backdrop */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: calc(var(--z-sidebar) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

.sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.main-content {
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-base);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* min-width:0 evita el overflow clásico de flex items: sin esto, el
       contenido ancho (tablas, cards nowrap) infla la página en celular. */
    min-width: 0;
    background: var(--bg-page);
}

.content-wrapper {
    flex: 1;
    width: 100%;
    padding: var(--space-6) var(--space-8);
}

/* =============================================================
   Topbar (header global de la app — distinto de page-header por vista)
   ============================================================= */

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--bg-topbar);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-5);
    margin: var(--space-4) var(--space-8) 0;
    box-shadow: var(--shadow-sm);
}

.topbar-pane {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.topbar-title {
    min-width: 0;
}

.topbar-title span {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary-200);
    background: var(--color-primary-50);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-800);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-2);
}

.topbar-title h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-neutral-900);
    line-height: var(--line-height-tight);
    margin: 0;
}

.topbar-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.topbar-meta i {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

.topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-xs);
}

/* =============================================================
   Page Header (header por vista — para usar en módulos)
   Markup canonico documentado en docs/plans/2026-05-27-design-system.md
   ============================================================= */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) 0 var(--space-5);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.page-header-content {
    min-width: 0;
    flex: 1;
}

.breadcrumb-nav {
    margin-bottom: var(--space-2);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: var(--space-2);
    color: var(--color-neutral-300);
}

.breadcrumb a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--color-text-link);
}

.breadcrumb [aria-current="page"] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.page-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
    line-height: var(--line-height-tight);
}

.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--line-height-normal);
}

.page-header-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* =============================================================
   Cards (surfaces base)
   Cada vista usa .card como contenedor estandar. .card-kpi para
   indicadores de dashboard, .dashboard-card legacy.
   ============================================================= */

.card,
.dashboard-card {
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.card-header {
    background: var(--bg-surface);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-primary);
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .card-title,
.card-header i {
    color: inherit;
}

.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-info,
.card-header.bg-danger,
.card-header.bg-dark {
    color: var(--color-text-on-primary);
}

.card-header.bg-warning,
.card-header.bg-light {
    color: var(--color-text-primary);
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.modal-header .modal-title,
.modal-header i {
    color: inherit;
}

.modal-header.bg-primary,
.modal-header.bg-secondary,
.modal-header.bg-info,
.modal-header.bg-danger,
.modal-header.bg-dark {
    color: var(--color-text-on-primary);
}

.modal-header.bg-warning,
.modal-header.bg-light {
    color: var(--color-text-primary);
}

/* Guardián de sesión — cuenta regresiva del modal de aviso de cierre */
.session-guard-countdown {
    margin: var(--space-4) 0 0;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.session-guard-countdown #session-guard-timer {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.card-action {
    font-size: var(--font-size-sm);
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.card-action:hover {
    color: var(--color-text-link-hover);
}

.card-body {
    padding: var(--space-5);
}

.card-footer {
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface-alt);
    border-top: 1px solid var(--color-border);
}

/* Dashboard card legacy: padding + texto centrado */
.dashboard-card {
    padding: var(--space-6);
    text-align: center;
}

.dashboard-card .icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    font-size: var(--font-size-2xl);
    margin: 0 auto var(--space-4);
}

.dashboard-card .number {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
}

.dashboard-card .label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    font-weight: var(--font-weight-semibold);
}

/* KPI card moderna (orientacion horizontal, recomendada para vistas nuevas) */
.card-kpi {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}

.kpi-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    font-size: var(--font-size-2xl);
}

.kpi-icon--primary { background: var(--color-primary-100); color: var(--color-primary-700); }
.kpi-icon--accent  { background: var(--color-accent-100);  color: var(--color-accent-800); }
.kpi-icon--success { background: var(--color-success-100); color: var(--color-success-800); }
.kpi-icon--danger  { background: var(--color-danger-100);  color: var(--color-danger-800); }
.kpi-icon--info    { background: var(--color-info-100);    color: var(--color-info-700); }
.kpi-icon--neutral { background: var(--color-neutral-100); color: var(--color-neutral-700); }

.kpi-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.kpi-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
}

.kpi-trend {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.kpi-trend--positive { color: var(--color-success-700); }
.kpi-trend--negative { color: var(--color-danger-700); }
.kpi-trend--neutral  { color: var(--color-text-muted); }

/* Cifras monetarias en resúmenes multi-columna (ej. presupuesto de
   benevolencia). El tamaño escala con el ancho REAL de su columna, no del
   viewport: el viewport no es buen proxy porque la columna es col-md-2
   anidada en col-lg-8 y descuenta el sidebar. .figure-cell declara el
   contexto de contenedor y .figure-amount se dimensiona en cqi (% del
   ancho de la columna), así "$10,000.00" siempre cabe en una línea sin
   solaparse ni partirse. clamp acotado por tokens. */
.figure-cell {
    container-type: inline-size;
}

.figure-amount {
    font-size: clamp(var(--font-size-base), 17cqi, var(--font-size-3xl));
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

/* =============================================================
   KPI Hero Cards — gradient (relleno fuerte) y tinted (tinte glass)
   Migrados desde el <style> inline del dashboard (V60). Tokenizados.
   Usar con .dashboard-card como base: <div class="dashboard-card gradient-card gradient-card--primary">
   ============================================================= */

/* Grid de las KPI hero del dashboard. Reemplaza al row-cols-* de Bootstrap,
   que forzaba un número FIJO de columnas (4, luego 5) y, restando el ancho
   del sidebar, dejaba cada gradient-card demasiado angosta: el número y las
   etiquetas se partían en varias líneas y la tarjeta crecía a lo alto. Con
   auto-fit + minmax cabe cuantas tarjetas quepan cómodas por fila (las 5 en
   una sola fila en pantallas anchas) y reflujan solas al achicar la ventana,
   sin apretarse nunca por debajo del mínimo cómodo. */
.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
}

/* Los hijos siguen siendo .col (de Bootstrap) para no tocar el markup; dentro
   de un grid su flex-basis no aplica, pero se neutraliza por claridad. Cada
   .col se declara contenedor de consulta para que la cifra grande de su
   gradient-card pueda escalar al ANCHO REAL de la tarjeta (no al viewport):
   así un valor largo como "$1,665.44" se achica lo justo para no partirse en
   dos líneas en tarjetas angostas, y se mantiene grande en las anchas. */
.dashboard-kpi-grid > .col {
    width: auto;
    container-type: inline-size;
}

/* Cifra de la KPI hero escalada al ancho de su tarjeta (cqi = 1% del ancho del
   contenedor). El tope es el tamaño de diseño (4xl); el piso evita que se
   vuelva ilegible. Solo aplica dentro del grid del dashboard. */
.dashboard-kpi-grid .gradient-card .number {
    font-size: clamp(1.35rem, 8.5cqi, var(--font-size-4xl));
}

/* En tarjetas angostas (cuando caben 4+ por fila y cada una queda chica) el
   icono lateral de 72px roba demasiado ancho y una cifra larga como
   "$1,665.44" se parte en dos líneas. A partir de ese umbral se apila el icono
   ARRIBA del contenido —igual que ya hace el layout móvil— y la cifra recupera
   el ancho completo de la tarjeta, quedando en una sola línea. En tarjetas
   anchas (5 en fila en pantallas grandes) se mantiene el icono al costado, que
   es el aspecto aprobado del dashboard. */
@container (max-width: 289px) {
    .dashboard-kpi-grid .gradient-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
}

.gradient-card {
    border: 0;
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-6);
    color: #ffffff;
    text-align: left;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: 166px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.gradient-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-xl);
}

.gradient-card .icon {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    margin: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: var(--radius-xl);
    color: #ffffff;
    font-size: var(--font-size-4xl);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 14px 30px -18px rgba(15, 23, 42, 0.55);
    transition: transform var(--transition-base);
}

.gradient-card:hover .icon {
    transform: scale(1.06);
}

.gradient-card .dashboard-card-content {
    min-width: 0;
}

.gradient-card .number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: #ffffff;
    overflow-wrap: anywhere;
}

.gradient-card .label,
.gradient-card .description,
.gradient-card small {
    color: rgba(255, 255, 255, 0.85);
}

.gradient-card .label {
    margin-top: var(--space-1);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    letter-spacing: 0;
    text-transform: none;
}

.gradient-card .description {
    margin-top: var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

/* Lista de cifras dentro de una gradient-card (p. ej. "Asistentes último domingo":
   Total del culto / Miembros). Cada fila apila una etiqueta superior tenue en
   mayúsculas y un valor grande en negrita debajo; un separador fino divide las
   filas. Distribuye dos cifras con la misma presencia que el número único de las
   demás tarjetas del dashboard. */
.gradient-card-stats {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.gradient-card-stats li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.gradient-card-stats li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.gradient-card-stats .stat-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.gradient-card-stats .stat-value {
    flex: 0 0 auto;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.01em;
    color: #ffffff;
}

@media (max-width: 767.98px) {
    .gradient-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        min-height: 140px;
        padding: var(--space-5);
    }

    .gradient-card .icon {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
        font-size: var(--font-size-3xl);
    }

    .gradient-card .number {
        font-size: var(--font-size-3xl);
    }
}

@media (max-width: 575.98px) {
    .gradient-card {
        min-height: 132px;
    }
}

.gradient-card--primary   { background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%); }
.gradient-card--success   { background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-700) 100%); }
.gradient-card--warning   { background: linear-gradient(135deg, var(--color-accent-400) 0%, var(--color-accent-600) 100%); }
.gradient-card--info      { background: linear-gradient(135deg, var(--color-info-500) 0%, var(--color-info-700) 100%); }
.gradient-card--danger    { background: linear-gradient(135deg, var(--color-danger-500) 0%, var(--color-danger-700) 100%); }
.gradient-card--secondary { background: linear-gradient(135deg, var(--color-neutral-500) 0%, var(--color-neutral-700) 100%); }
.gradient-card--dark      { background: linear-gradient(135deg, var(--color-neutral-700) 0%, var(--color-neutral-900) 100%); }

/* Stat cards — indicadores compactos del dashboard.
   Superficie blanca limpia; el color vive en un icono solido saturado
   (degradado + glow tenue del mismo color) y el numero es de alto
   contraste. Sin fondos pastel lavados ni circulos decorativos.
   Conserva los nombres .tinted-card / .tinted-card--* (interfaz publica). */
.tinted-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: left;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    background: var(--bg-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.tinted-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-border-strong);
}

.tinted-card .icon {
    width: 44px;
    height: 44px;
    margin: 0 0 var(--space-4);
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base);
}

.tinted-card:hover .icon {
    transform: scale(1.06);
}

.tinted-card .number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.tinted-card .label {
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.tinted-card .description,
.tinted-card small {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: var(--line-height-snug);
}

/* Variantes: color saturado en el icono + glow tenue del mismo tono */
.tinted-card--primary .icon   { background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600)); box-shadow: 0 6px 14px -5px rgba(30, 64, 175, 0.5); }
.tinted-card--success .icon   { background: linear-gradient(135deg, var(--color-success-600), var(--color-success-700)); box-shadow: 0 6px 14px -5px rgba(5, 150, 105, 0.5); }
.tinted-card--info .icon      { background: linear-gradient(135deg, var(--color-info-500), var(--color-info-600));       box-shadow: 0 6px 14px -5px rgba(37, 99, 235, 0.5); }
.tinted-card--warning .icon   { background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-700));   box-shadow: 0 6px 14px -5px rgba(217, 119, 6, 0.5); }
.tinted-card--danger .icon    { background: linear-gradient(135deg, var(--color-danger-500), var(--color-danger-600));   box-shadow: 0 6px 14px -5px rgba(220, 38, 38, 0.5); }
.tinted-card--secondary .icon { background: linear-gradient(135deg, var(--color-neutral-500), var(--color-neutral-600)); box-shadow: 0 6px 14px -5px rgba(71, 85, 105, 0.5); }
.tinted-card--dark .icon      { background: linear-gradient(135deg, var(--color-neutral-700), var(--color-neutral-900)); box-shadow: 0 6px 14px -5px rgba(15, 23, 42, 0.5); }

/* Dashboard panels: grouped metrics and charts. */
.dashboard-panel,
.module-card {
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    overflow: hidden;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.dashboard-panel--hover:hover,
.module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-border-strong);
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.panel-heading h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
}

.panel-heading p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.panel-stat {
    flex-shrink: 0;
    text-align: right;
}

.panel-stat strong {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--font-size-2xl);
    line-height: 1;
}

.panel-stat span {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-grid {
    display: grid;
    gap: var(--space-3);
}

.metric-grid--directory {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-grid--benevolencia,
.metric-grid--summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-metric {
    --compact-metric-accent: var(--color-primary-500);
    --compact-metric-surface-hover: var(--color-primary-50);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(160deg, var(--bg-surface) 0%, var(--color-neutral-50) 100%);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base),
                background var(--transition-base);
}

.compact-metric::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, var(--color-neutral-0) 46%, transparent 100%);
    opacity: 0.38;
    transform: translateX(-120%);
    transition: transform var(--transition-slow);
    pointer-events: none;
}

.compact-metric::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    top: -68px;
    right: -68px;
    background: radial-gradient(circle, var(--compact-metric-accent) 0%, transparent 72%);
    opacity: 0;
    transform: scale(0.65);
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}

.compact-metric > * {
    position: relative;
    z-index: 1;
}

.compact-metric:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--shadow-lg);
    border-color: var(--compact-metric-accent);
    background: linear-gradient(160deg, var(--bg-surface) 0%, var(--compact-metric-surface-hover) 100%);
}

.compact-metric:hover::before {
    transform: translateX(120%);
}

.compact-metric:hover::after {
    opacity: 0.14;
    transform: scale(1);
}

.compact-metric-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    color: #ffffff;
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.compact-metric:hover .compact-metric-icon {
    transform: translateY(-2px) scale(1.08) rotate(-3deg);
    box-shadow: var(--shadow-md);
}

.compact-metric-value {
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    transition: color var(--transition-base), transform var(--transition-base);
}

.compact-metric:hover .compact-metric-value {
    color: var(--compact-metric-accent);
    transform: translateX(2px);
}

.compact-metric-label {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color var(--transition-base);
}

.compact-metric:hover .compact-metric-label {
    color: var(--color-text-secondary);
}

.compact-metric-help {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
    transition: color var(--transition-base);
}

.compact-metric:hover .compact-metric-help {
    color: var(--color-text-primary);
}

.compact-metric--primary { --compact-metric-accent: var(--color-primary-500); --compact-metric-surface-hover: var(--color-primary-50); }
.compact-metric--success { --compact-metric-accent: var(--color-success-600); --compact-metric-surface-hover: var(--color-success-50); }
.compact-metric--info { --compact-metric-accent: var(--color-info-600); --compact-metric-surface-hover: var(--color-info-50); }
.compact-metric--warning { --compact-metric-accent: var(--color-accent-600); --compact-metric-surface-hover: var(--color-accent-50); }
.compact-metric--danger { --compact-metric-accent: var(--color-danger-600); --compact-metric-surface-hover: var(--color-danger-50); }
.compact-metric--secondary { --compact-metric-accent: var(--color-neutral-600); --compact-metric-surface-hover: var(--color-neutral-100); }
.compact-metric--dark { --compact-metric-accent: var(--color-neutral-800); --compact-metric-surface-hover: var(--color-neutral-100); }

.compact-metric--primary .compact-metric-icon   { background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600)); }
.compact-metric--success .compact-metric-icon   { background: linear-gradient(135deg, var(--color-success-600), var(--color-success-700)); }
.compact-metric--info .compact-metric-icon      { background: linear-gradient(135deg, var(--color-info-500), var(--color-info-600)); }
.compact-metric--warning .compact-metric-icon   { background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-700)); }
.compact-metric--danger .compact-metric-icon    { background: linear-gradient(135deg, var(--color-danger-500), var(--color-danger-600)); }
.compact-metric--secondary .compact-metric-icon { background: linear-gradient(135deg, var(--color-neutral-500), var(--color-neutral-600)); }
.compact-metric--dark .compact-metric-icon      { background: linear-gradient(135deg, var(--color-neutral-700), var(--color-neutral-900)); }

@media (prefers-reduced-motion: reduce) {
    .compact-metric,
    .compact-metric::before,
    .compact-metric::after,
    .compact-metric-icon,
    .compact-metric-value,
    .compact-metric-label,
    .compact-metric-help {
        transition: none;
    }

    .compact-metric:hover {
        transform: none;
    }

    .compact-metric:hover .compact-metric-icon,
    .compact-metric:hover .compact-metric-value {
        transform: none;
    }
}

.chart-shell {
    position: relative;
    width: 100%;
    min-height: 260px;
}

.chart-shell--donut {
    min-height: 280px;
}

.chart-shell--line {
    min-height: 300px;
}

.chart-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.chart-summary strong {
    color: var(--color-text-primary);
}

.empty-panel {
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: var(--space-6);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    background: var(--color-neutral-50);
    text-align: center;
    font-size: var(--font-size-sm);
}

.module-card {
    padding: 0;
    box-shadow: var(--shadow-sm) !important;
}

/* =============================================================
   Quick action tiles — dashboard "Accesos rapidos"
   Tiles grandes tipo CTA: fondo con tinte suave (presencia clara,
   no lavado), icono + texto de color legible, relleno solido al hover.
   ============================================================= */

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 100%;
    min-height: 108px;
    padding: var(--space-5) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--color-text-secondary);
    text-align: center;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-snug);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.quick-action i {
    font-size: 1.75rem;
    line-height: 1;
    transition: color var(--transition-fast);
}

.quick-action:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    color: #fff;
}

.quick-action:hover i {
    color: #fff;
}

.quick-action:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Variantes de color */
.quick-action--primary   { background: var(--color-primary-50);   border-color: var(--color-primary-200);   color: var(--color-primary-700); }
.quick-action--primary i  { color: var(--color-primary-600); }
.quick-action--primary:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }

.quick-action--warning   { background: var(--color-warning-50);   border-color: var(--color-warning-100);   color: var(--color-warning-800); }
.quick-action--warning i  { color: var(--color-warning-700); }
.quick-action--warning:hover { background: var(--color-warning-700); border-color: var(--color-warning-700); color: #fff; }

.quick-action--success   { background: var(--color-success-50);   border-color: var(--color-success-100);   color: var(--color-success-800); }
.quick-action--success i  { color: var(--color-success-600); }
.quick-action--success:hover { background: var(--color-success-600); border-color: var(--color-success-600); color: #fff; }

.quick-action--info      { background: var(--color-info-50);      border-color: var(--color-info-100);      color: var(--color-info-700); }
.quick-action--info i     { color: var(--color-info-600); }
.quick-action--info:hover { background: var(--color-info-600); border-color: var(--color-info-600); color: #fff; }

.quick-action--secondary { background: var(--color-neutral-100);  border-color: var(--color-neutral-200);   color: var(--color-neutral-700); }
.quick-action--secondary i { color: var(--color-neutral-600); }
.quick-action--secondary:hover { background: var(--color-neutral-700); border-color: var(--color-neutral-700); color: #fff; }

.quick-action--dark      { background: var(--color-neutral-200);  border-color: var(--color-neutral-300);   color: var(--color-neutral-800); }
.quick-action--dark i     { color: var(--color-neutral-700); }
.quick-action--dark:hover { background: var(--color-neutral-800); border-color: var(--color-neutral-800); color: #fff; }

/* =============================================================
   Budget summary card — resumen de presupuesto (benevolencia dashboard)
   Metricas con icono en chip, divisores verticales, valores con
   jerarquia y color semantico + barra de progreso.
   ============================================================= */

.budget-card {
    box-shadow: var(--shadow-md);
}

.budget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.budget-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    position: relative;
}

.budget-metric + .budget-metric::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8%;
    height: 84%;
    width: 1px;
    background: var(--color-border);
}

.budget-metric-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.budget-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: #ffffff;
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
}

.budget-icon--neutral { background: linear-gradient(135deg, var(--color-neutral-500), var(--color-neutral-600)); }
.budget-icon--success { background: linear-gradient(135deg, var(--color-success-600), var(--color-success-700)); }
.budget-icon--warning { background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-700)); }
.budget-icon--info    { background: linear-gradient(135deg, var(--color-info-500), var(--color-info-600)); }

.budget-metric-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.budget-metric-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.1;
}

.budget-metric-value--success { color: var(--color-success-700); }
.budget-metric-value--warning { color: var(--color-warning-700); }
.budget-metric-value--info    { color: var(--color-info-700); }

.budget-progress {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.budget-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

/* Progress bar (Bootstrap .progress) tokenizado */
.progress {
    background: var(--color-neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar {
    border-radius: var(--radius-full);
}

@media (max-width: 991.98px) {
    .metric-grid--directory,
    .metric-grid--benevolencia,
    .metric-grid--summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5) var(--space-3);
    }
    .budget-metric {
        padding: var(--space-2) var(--space-3);
    }
    .budget-metric + .budget-metric::before {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .panel-heading {
        flex-direction: column;
    }

    .panel-stat {
        text-align: left;
    }

    .metric-grid--directory,
    .metric-grid--benevolencia,
    .metric-grid--summary {
        grid-template-columns: 1fr;
    }

    .compact-metric {
        padding: var(--space-3);
    }

    .chart-shell--donut,
    .chart-shell--line {
        min-height: 240px;
    }

    .budget-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   Mi cuenta — foto de perfil
   ============================================================= */

.account-profile-card {
    overflow: hidden;
}

.account-profile-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.account-profile-avatar {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary-200);
    background: linear-gradient(135deg, var(--color-primary-50), var(--color-info-50));
    color: var(--color-primary-700);
    font-size: var(--font-size-4xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.account-profile-avatar.has-image {
    background: var(--bg-surface-alt);
}

.account-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 575.98px) {
    .account-profile-head {
        align-items: flex-start;
    }

    .account-profile-avatar {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
        font-size: var(--font-size-3xl);
    }
}

/* =============================================================
   Botones
   Patron Bootstrap-compatible: .btn + variante (.btn-primary, etc.)
   Solid: relleno + texto inverso. Outline: borde + texto del color.
   Icon-only: usar .btn-icon + aria-label OBLIGATORIO.
   ============================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Solid variants */
.btn-primary {
    background: var(--color-primary-interactive);
    border-color: var(--color-primary-interactive);
    color: var(--color-text-on-primary);
}

.btn-primary:hover {
    background: var(--color-primary-interactive-hover);
    border-color: var(--color-primary-interactive-hover);
    color: var(--color-text-on-primary);
}

.btn-primary:active {
    background: var(--color-primary-interactive-active);
    border-color: var(--color-primary-interactive-active);
}

.btn-secondary {
    background: var(--color-neutral-700);
    border-color: var(--color-neutral-700);
    color: var(--color-text-on-primary);
}

.btn-secondary:hover {
    background: var(--color-neutral-800);
    border-color: var(--color-neutral-800);
    color: var(--color-text-on-primary);
}

.btn-success {
    background: var(--color-success-600);
    border-color: var(--color-success-600);
    color: var(--color-text-on-primary);
}

.btn-success:hover {
    background: var(--color-success-700);
    border-color: var(--color-success-700);
    color: var(--color-text-on-primary);
}

.btn-danger {
    background: var(--color-danger-600);
    border-color: var(--color-danger-600);
    color: var(--color-text-on-primary);
}

.btn-danger:hover {
    background: var(--color-danger-700);
    border-color: var(--color-danger-700);
    color: var(--color-text-on-primary);
}

.btn-warning {
    background: var(--color-warning-500);
    border-color: var(--color-warning-500);
    color: var(--color-warning-800);
}

.btn-warning:hover {
    background: var(--color-warning-700);
    border-color: var(--color-warning-700);
    color: var(--color-text-on-primary);
}

.btn-info {
    background: var(--color-info-600);
    border-color: var(--color-info-600);
    color: var(--color-text-on-primary);
}

.btn-info:hover {
    background: var(--color-info-700);
    border-color: var(--color-info-700);
    color: var(--color-text-on-primary);
}

/* Outline variants (texto + borde del color, fondo transparente) */
.btn-outline-primary {
    background: transparent;
    border-color: var(--color-primary-interactive);
    color: var(--color-primary-interactive);
}

.btn-outline-primary:hover {
    background: var(--color-primary-interactive);
    color: var(--color-text-on-primary);
}

.btn-outline-secondary {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}

.btn-outline-secondary:hover {
    background: var(--bg-surface-alt);
    color: var(--color-text-primary);
}

.btn-outline-success {
    background: transparent;
    border-color: var(--color-success-600);
    color: var(--color-success-700);
}

.btn-outline-success:hover {
    background: var(--color-success-600);
    color: var(--color-text-on-primary);
}

.btn-outline-danger {
    background: transparent;
    border-color: var(--color-danger-600);
    color: var(--color-danger-700);
}

.btn-outline-danger:hover {
    background: var(--color-danger-600);
    color: var(--color-text-on-primary);
}

.btn-outline-warning {
    background: transparent;
    border-color: var(--color-warning-700);
    color: var(--color-warning-800);
}

.btn-outline-warning:hover {
    background: var(--color-warning-100);
    color: var(--color-warning-800);
}

.btn-outline-info {
    background: transparent;
    border-color: var(--color-info-600);
    color: var(--color-info-700);
}

.btn-outline-info:hover {
    background: var(--color-info-600);
    color: var(--color-text-on-primary);
}

/* Segmented control de opciones (radios btn-check) — siempre sólido, nunca
   transparente. Sin elegir: superficie sólida con texto semántico; elegido:
   relleno saturado. Usado en el selector de voto y de recepción de ayuda. */
.vote-toggle-group .vote-toggle {
    background: var(--bg-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.vote-toggle-group .vote-toggle--approve { color: var(--color-success-700); }
.vote-toggle-group .vote-toggle--reject { color: var(--color-danger-700); }
.vote-toggle-group .vote-toggle--abstain { color: var(--color-neutral-700); }

.vote-toggle-group .vote-toggle:hover {
    background: var(--color-neutral-200);
    color: var(--color-text-primary);
}

.vote-toggle-group .btn-check:checked + .vote-toggle--approve {
    background: var(--color-success-600);
    border-color: var(--color-success-600);
    color: var(--color-text-on-primary);
}

.vote-toggle-group .btn-check:checked + .vote-toggle--reject {
    background: var(--color-danger-600);
    border-color: var(--color-danger-600);
    color: var(--color-text-on-primary);
}

.vote-toggle-group .btn-check:checked + .vote-toggle--abstain {
    background: var(--color-neutral-600);
    border-color: var(--color-neutral-600);
    color: var(--color-text-on-primary);
}

.vote-toggle-group .btn-check:focus-visible + .vote-toggle {
    box-shadow: var(--shadow-focus);
    z-index: 1;
}

/* Icon-only button (debe llevar aria-label) */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
}

.btn-icon:hover {
    background: var(--bg-surface-alt);
    color: var(--color-text-primary);
}

.btn-icon i {
    font-size: var(--font-size-base);
}

/* Variante grande para icon-only en contextos con jerarquía alta
   (topbar, hero headers). 44px = min-height de los nav-link del sidebar
   y touch target mínimo de Apple HIG. */
.btn-icon-lg {
    width: 44px;
    height: 44px;
    flex-shrink: 0;       /* no encogerse de ancho como flex item del topbar (quedaba rectangular en móvil) */
    aspect-ratio: 1 / 1;  /* respaldo: mantiene el cuadrado aunque el contexto lo presione */
    padding: 0;
    border-radius: var(--radius-md);
}

.btn-icon-lg i {
    font-size: 1.25rem;
}

/* Tamano sm / lg */
.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
}

/* =============================================================
   Tablas
   .table-modern es la nueva — pintar tablas nuevas con esa clase.
   .table sigue como legacy con look mejorado vs Bootstrap default.
   ============================================================= */

.table-wrapper {
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table,
.table-modern {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    background: var(--bg-surface);
}

.table thead th,
.table-modern thead th {
    background: var(--color-neutral-50);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

/* Encabezados de columna ordenables (antes se aplicaba cursor inline vía JS). */
th.sortable {
    cursor: pointer;
}

.table tbody td,
.table-modern tbody td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.table tbody tr,
.table-modern tbody tr {
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover,
.table-modern tbody tr:hover {
    background: var(--bg-surface-alt);
}

.table tbody tr:last-child td,
.table-modern tbody tr:last-child td {
    border-bottom: none;
}

.td-actions,
.th-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.td-actions {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
}

/* =============================================================
   DataTables overrides (theming integrado)
   ============================================================= */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    background: var(--bg-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 240px;
    margin-left: var(--space-2);
}

.dataTables_wrapper .dataTables_info {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding-top: var(--space-3);
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: var(--space-3);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--color-border) !important;
    background: var(--bg-surface) !important;
    color: var(--color-text-secondary) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-1) var(--space-3) !important;
    margin-left: var(--space-1) !important;
    font-size: var(--font-size-sm) !important;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-surface-alt) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-strong) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--color-primary-interactive) !important;
    color: var(--color-text-on-primary) !important;
    border-color: var(--color-primary-interactive) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--color-text-muted) !important;
}

/* =============================================================
   Formularios
   ============================================================= */

.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.form-required {
    color: var(--color-danger-600);
    margin-left: var(--space-1);
    font-weight: var(--font-weight-semibold);
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control::placeholder {
    color: var(--color-neutral-400);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-border-focus);
    outline: none;
    box-shadow: var(--shadow-focus);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background: var(--color-neutral-100);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

/* Campo de fecha localizado: muestra "30-mayo-2026" en un input de texto y
   superpone el date input nativo (transparente) para conservar el calendario
   y el valor real AAAA-MM-DD. */
.date-localized {
    position: relative;
}

.date-localized .date-localized-display[readonly] {
    background: var(--bg-surface);
    color: var(--color-text-primary);
    cursor: pointer;
}

.date-localized-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.date-localized:focus-within .date-localized-display {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-danger-600);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20);
}

.form-help,
.form-text {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.invalid-feedback {
    display: none;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-danger-700);
}

.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback {
    display: block;
}

/* Calendario flatpickr (reemplaza input[type="date"] vía date-select.js).
   El campo visible es un .form-control normal; aquí solo se tematiza el popup
   para que use los tokens del design system en vez del tema por defecto. */
.flatpickr-calendar {
    font-family: var(--font-family-base);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

.flatpickr-day {
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--color-primary-50);
    border-color: var(--color-primary-50);
}

.flatpickr-day.today {
    border-color: var(--color-primary-500);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-primary-interactive);
    border-color: var(--color-primary-interactive);
    color: var(--color-neutral-0);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--color-text-muted);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekday {
    color: var(--color-text-primary);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: var(--color-text-secondary);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-primary-interactive);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-yearDropdown {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: var(--color-neutral-0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    margin: 0 var(--space-1);
    cursor: pointer;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-yearDropdown:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--color-border-focus);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-yearDropdown:hover {
    border-color: var(--color-primary-300);
}

/* Campo de fecha mejorado: input + icono calendario + borrar (opcional). */
.date-field-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}

.date-field-input-wrap .date-field-input {
    flex: 1 1 auto;
    width: 100%;
    padding-right: calc(var(--space-10) + var(--space-2));
    min-width: 0;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.date-field-input-wrap .date-field-input:not(:required) {
    padding-right: calc(var(--space-16) + var(--space-2));
}

.date-field-trigger,
.date-field-clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.date-field-trigger {
    right: var(--space-1);
}

.date-field-clear {
    right: calc(var(--space-8) + var(--space-1));
}

.date-field-trigger:hover,
.date-field-clear:hover {
    color: var(--color-primary-interactive);
    background: var(--color-primary-50);
}

.date-field-trigger:focus-visible,
.date-field-clear:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.date-field-input-wrap .date-field-input:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

/* Form check (checkbox + radio) */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: 0;
}

.form-check .form-check-input {
    float: none;
    margin-left: 0;
}

.form-check-input {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary-interactive);
    cursor: pointer;
}

.form-check-input:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

.form-check-input:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--color-primary-interactive);
    border-color: var(--color-primary-interactive);
}

.form-check-label {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    cursor: pointer;
}

/* Checkboxes dibujados explícitamente para la zona de administración:
   el .form-check-input global se apoya en accent-color, que no rinde bajo
   el appearance:none de Bootstrap (quedaba invisible en la tabla de
   limpieza por persona). Aquí se redibuja borde + checkmark con tokens. */
.danger-zone-view .form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--color-neutral-400);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.danger-zone-view .form-check-input[type="checkbox"]::before {
    content: "";
    width: 11px;
    height: 7px;
    border-left: 2px solid var(--color-text-on-primary);
    border-bottom: 2px solid var(--color-text-on-primary);
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform var(--transition-fast);
}

.danger-zone-view .form-check-input[type="checkbox"]:checked {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
}

.danger-zone-view .form-check-input[type="checkbox"]:checked::before {
    transform: rotate(-45deg) scale(1);
}

.danger-zone-view .form-check-input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.danger-zone-view .form-check-input[type="checkbox"]:disabled {
    cursor: not-allowed;
    border-color: var(--color-neutral-300);
    background: var(--color-neutral-100);
}

/* =============================================================
   Badges (chips de estado)
   ============================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    line-height: 1.5;
    white-space: nowrap;
}

/* NOTA: las clases .bg-* (utilidades Bootstrap) NO se redefinen aqui — usan
   la paleta v2 via --bs-* override. Estas .badge-* son pills suaves
   alternativas para markup nuevo (background tinte + texto oscuro). */
.badge-success {
    background: var(--color-success-100);
    color: var(--color-success-800);
}

.badge-warning {
    background: var(--color-warning-100);
    color: var(--color-warning-800);
}

.badge-danger {
    background: var(--color-danger-100);
    color: var(--color-danger-800);
}

.badge-info {
    background: var(--color-info-100);
    color: var(--color-info-700);
}

.badge-neutral {
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

.badge-accent {
    background: var(--color-accent-100);
    color: var(--color-accent-800);
}

.badge-purple {
    background: var(--color-purple-100);
    color: var(--color-purple-700);
}

.badge-primary {
    background: var(--color-primary-100);
    color: var(--color-primary-800);
}

/* Badge "Expulsado": boton solido rojo (maxima presencia) que abre el modal
   #expulsionHistorialModal con el historial del retiro de membresia. */
.badge-expulsado {
    border: none;
    cursor: pointer;
    background: var(--color-danger-600);
    color: var(--color-neutral-0);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.badge-expulsado:hover {
    background: var(--color-danger-700);
}

.badge-expulsado:focus-visible {
    outline: none;
    background: var(--color-danger-700);
    box-shadow: var(--shadow-focus);
}

/* Lista descriptiva del modal de historial de expulsion. */
.expulsion-historial-list dt {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.expulsion-historial-list dd {
    margin-bottom: var(--space-3);
    color: var(--color-text-primary);
    white-space: pre-line;
}

.expulsion-historial-list dd:last-child {
    margin-bottom: 0;
}

/* =============================================================
   Módulo "Registro de expulsión" (modules/registro_expulsion)
   Bitácora de membresía: estado actual, línea de tiempo e historial.
   ============================================================= */

/* Estado vacío reutilizable dentro de las tarjetas del módulo. */
.registro-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-3);
    color: var(--color-text-muted);
}

.registro-empty i {
    font-size: var(--font-size-4xl);
    color: var(--color-neutral-300);
}

/* Lista "Actualmente sin membresía" */
.registro-current-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.registro-current-item {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-danger-600);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
}

.registro-current-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.registro-current-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.registro-current-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-1);
}

.registro-current-motivo {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

/* Línea "Miembro principal: …" que identifica la familia de un familiar.
   Se usa en las tres vistas del módulo (estado actual, timeline, tabla). */
.registro-familia {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* Línea de tiempo de eventos */
.registro-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.registro-timeline-item {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
}

/* Línea conectora vertical entre marcadores. */
.registro-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.registro-timeline-marker {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    font-size: var(--font-size-lg);
    z-index: 1;
}

.registro-evento-expulsion .registro-timeline-marker {
    background: var(--color-danger-100);
    color: var(--color-danger-700);
}

.registro-evento-restitucion .registro-timeline-marker {
    background: var(--color-success-100);
    color: var(--color-success-700);
}

.registro-timeline-body {
    flex: 1;
    min-width: 0;
    padding-top: var(--space-1);
}

.registro-timeline-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.registro-timeline-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.registro-timeline-name {
    margin: 0 0 var(--space-1);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.registro-timeline-motivo {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.registro-timeline-meta {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Cabecera del historial completo (título + filtros + búsqueda) */
.registro-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.registro-history-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.registro-filter-group {
    display: inline-flex;
    gap: var(--space-2);
}

/* El botón de filtro activo se resalta con un anillo de foco permanente. */
.registro-filter.active {
    box-shadow: var(--shadow-focus);
}

.registro-search {
    min-width: 220px;
}

/* En celular el buscador toma todo el ancho en vez de competir con los
   botones de filtro en la misma fila. */
@media (max-width: 575.98px) {
    .registro-search {
        min-width: 100%;
    }
}

.registro-no-results {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-5) var(--space-3);
    margin: 0;
}

/* =============================================================
   Alertas (semantic feedback inline)
   Bug critico previo: alert-danger tenia texto blanco sobre fondo
   claro = invisible. Ahora todos los alerts cumplen WCAG AAA en
   el par background-50 / text-800.
   ============================================================= */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.alert .alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-title {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1);
}

.alert-message,
.alert p {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: inherit;
}

.alert-close,
.alert .btn-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: var(--space-1);
    /* margin-left: auto empuja el boton a la derecha incluso cuando el alert
       usa el markup viejo (icono + texto sueltos, sin wrapper .alert-content). */
    margin: -4px -4px 0 auto;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.alert-close:hover,
.alert .btn-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.alert-success {
    background: var(--color-success-50);
    border-color: var(--color-success-100);
    color: var(--color-success-800);
}

.alert-warning {
    background: var(--color-warning-50);
    border-color: var(--color-warning-100);
    color: var(--color-warning-800);
}

.alert-danger {
    background: var(--color-danger-50);
    border-color: var(--color-danger-100);
    color: var(--color-danger-800);
}

.alert-info {
    background: var(--color-info-50);
    border-color: var(--color-info-100);
    color: var(--color-info-700);
}

/* =============================================================
   Directorio — Edicion de Miembro (rediseño UX)
   ============================================================= */

.directory-edit {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-bottom: var(--space-8);
}

.directory-edit-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-primary-200);
    background: linear-gradient(140deg, var(--color-primary-50) 0%, var(--color-neutral-0) 48%, var(--color-accent-50) 100%);
    box-shadow: var(--shadow-sm);
}

.directory-edit-kicker {
    margin: 0;
    color: var(--color-primary-700);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-bold);
}

.directory-edit-title {
    margin: var(--space-2) 0 var(--space-2);
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: clamp(var(--font-size-xl), 2.2vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.directory-edit-subtitle {
    margin: 0;
    max-width: 60ch;
    color: var(--color-neutral-700);
    font-size: var(--font-size-sm);
}

.directory-edit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.directory-edit-main-card,
.directory-edit-family-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.directory-edit-card-header {
    background: linear-gradient(180deg, var(--color-neutral-50) 0%, var(--bg-surface) 100%);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-5) var(--space-6);
}

.directory-edit-card-header h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.directory-edit .card-body {
    padding: var(--space-6);
}

.directory-edit .form-section-divider {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.directory-edit .form-section-divider i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-primary-700);
    background: var(--color-primary-100);
    font-size: var(--font-size-base);
}

.directory-edit .form-label {
    color: var(--color-neutral-700);
}

/* Controles de selección coherentes con el lenguaje visual de la pantalla */
.directory-edit .form-check-input[type="radio"],
.directory-edit .form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--color-neutral-400);
    background: var(--bg-surface);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
    flex-shrink: 0;
}

.directory-edit .form-check-input[type="radio"] {
    border-radius: var(--radius-full);
}

.directory-edit .form-check-input[type="checkbox"] {
    border-radius: var(--radius-sm);
}

.directory-edit .form-check-input[type="radio"]::before,
.directory-edit .form-check-input[type="checkbox"]::before {
    content: "";
    transform: scale(0);
    transition: transform var(--transition-fast);
}

.directory-edit .form-check-input[type="radio"]::before {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-primary-600);
}

.directory-edit .form-check-input[type="checkbox"]::before {
    width: 11px;
    height: 7px;
    border-left: 2px solid var(--color-text-on-primary);
    border-bottom: 2px solid var(--color-text-on-primary);
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
}

.directory-edit .form-check-input[type="radio"]:checked {
    border-color: var(--color-primary-600);
}

.directory-edit .form-check-input[type="radio"]:checked::before {
    transform: scale(1);
}

.directory-edit .form-check-input[type="checkbox"]:checked {
    border-color: var(--color-primary-600);
    background: var(--color-primary-600);
}

.directory-edit .form-check-input[type="checkbox"]:checked::before {
    transform: rotate(-45deg) scale(1);
}

.directory-edit .form-check-input:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.directory-edit .form-check-input:disabled {
    cursor: not-allowed;
    border-color: var(--color-neutral-300);
    background: var(--color-neutral-100);
}

.directory-edit .form-check-input:disabled::before {
    opacity: 0.6;
}

.directory-edit .form-control,
.directory-edit .form-select {
    background: var(--color-neutral-50);
    border-color: var(--color-neutral-300);
    min-height: 44px;
}

.directory-edit textarea.form-control {
    min-height: 96px;
}

.directory-edit .form-control:focus,
.directory-edit .form-select:focus {
    background: var(--bg-surface);
    border-color: var(--color-primary-500);
}

.directory-edit .status-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.directory-edit .status-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--color-neutral-50) 100%);
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
}

.directory-edit .status-panel-header {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.directory-edit-subpanel {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
}

.directory-edit-subheading {
    margin: 0 0 var(--space-3);
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.family-form-intro {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.family-form-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-4);
}

.family-form-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--bg-surface-alt);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.family-form-step strong {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-primary-600);
    color: var(--color-text-on-primary);
    font-size: 11px;
}

.directory-edit-separator {
    border: 0;
    border-top: 1px dashed var(--color-border);
    margin: var(--space-4) 0;
}

.family-members-list {
    display: grid;
    gap: var(--space-3);
}

.family-members-list .family-member-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
}

.family-members-list .family-member-item strong {
    display: inline-block;
    margin-bottom: 2px;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
}

.family-form-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.family-form-block-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-neutral-100);
    padding: var(--space-3) var(--space-4);
}

.family-form-block-header h6 {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.family-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.family-status-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.family-choice-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.family-choice {
    margin: 0 !important;
    align-items: stretch;
    padding: 0;
    position: relative;
    display: block;
}

.family-choice .form-check-input {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    z-index: 1;
}

.family-choice-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
    background: var(--bg-surface);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 44px;
}

.family-choice .form-check-input:checked + .family-choice-label {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
    box-shadow: inset 0 0 0 1px rgba(30, 64, 175, 0.15);
}

.family-choice-label--active {
    color: var(--color-success-700);
}

.family-choice-label--inactive {
    color: var(--color-danger-700);
}

.family-membership-help {
    margin-top: calc(var(--space-2) * -1);
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-medium);
}

.family-membership-help.is-valid {
    color: var(--color-success-700);
}

.family-membership-help.is-warning {
    color: var(--color-warning-800);
}

.directory-edit-actions {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    gap: var(--space-2);
}

.directory-edit-message {
    margin-bottom: 0;
}

.directory-edit .modal-content {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.directory-edit .modal-header {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
    color: var(--color-text-on-primary);
    border-bottom: none;
}

.directory-edit .modal-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.directory-edit .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.directory-edit .modal-body {
    background: var(--color-neutral-50);
}

.directory-edit .modal-footer {
    border-top: 1px solid var(--color-border);
    background: var(--bg-surface);
}

@media (max-width: 991.98px) {
    .directory-edit .status-panel-grid {
        grid-template-columns: 1fr;
    }

    .family-choice-group {
        grid-template-columns: 1fr;
    }

    .directory-edit-card-header,
    .directory-edit .card-body,
    .directory-edit-hero {
        padding: var(--space-5);
    }
}

@media (max-width: 575.98px) {
    .directory-edit-title {
        font-size: var(--font-size-2xl);
    }

    .directory-edit .form-section-divider {
        font-size: var(--font-size-lg);
    }

    .directory-edit-actions {
        justify-content: stretch !important;
    }

    .directory-edit-actions .btn {
        flex: 1 1 100%;
    }
}

/* =============================================================
   Directorio — Vista de Miembro (rediseño UX)
   ============================================================= */

.directory-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-bottom: var(--space-8);
}

.directory-view-message {
    margin-bottom: 0;
}

.directory-view-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-xl);
    background: linear-gradient(138deg, var(--color-primary-50) 0%, var(--bg-surface) 52%, var(--color-accent-50) 100%);
    box-shadow: var(--shadow-sm);
}

.directory-view-kicker {
    margin: 0;
    color: var(--color-primary-700);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-bold);
}

.directory-view-title {
    margin: var(--space-2) 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: clamp(var(--font-size-xl), 2.1vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.directory-view-subtitle {
    margin: 0;
    max-width: 64ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.directory-view-meta {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.directory-view-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.directory-view-inline-form {
    display: inline-flex;
}

.directory-view .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.directory-view-main-card,
.directory-view-family-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.directory-view-main-card .card-body,
.directory-view-family-card .card-body {
    padding: var(--space-6);
}

/* Secciones con tablas a ancho completo (asistencia, benevolencia): más aire
   horizontal para que la tabla no quede pegada a los bordes del card. */
.directory-view-data-card .card-body,
.directory-view-data-card .directory-view-card-header {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

.directory-view-data-card .card-body {
    padding-bottom: var(--space-8);
}

/* Las tablas de datos del perfil (asistencia/benevolencia) usan th de fila en el
   primer campo; igualamos padding y bordes con td para mejorar legibilidad. */
.directory-view-data-card .table-modern tbody th,
.directory-view-data-card .table-modern tbody td {
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.directory-view-data-card .table-modern tbody tr:last-child th,
.directory-view-data-card .table-modern tbody tr:last-child td {
    border-bottom: none;
}

.directory-view-photo-card,
.directory-view-info-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
}

.directory-view-info-stack {
    display: grid;
    gap: var(--space-3);
}

.directory-view-section-title {
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.directory-view-section-title i {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: var(--color-primary-700);
    background: var(--color-primary-100);
    font-size: var(--font-size-sm);
}

.directory-view-photo-frame {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-alt);
    overflow: hidden;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
}

.directory-view-photo-frame.has-image {
    max-height: 520px;
}

.directory-view-photo-frame.is-empty {
    height: clamp(240px, 45vw, 520px);
}

.directory-view-photo-image,
.directory-view-photo-placeholder {
    width: 100%;
}

.directory-view-photo-image {
    height: auto;
    max-height: 520px;
    object-fit: contain;
    object-position: center;
    background: var(--bg-surface);
    display: block;
}

.directory-view-photo-placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--color-neutral-400);
}

.directory-view-photo-placeholder i {
    font-size: clamp(var(--font-size-4xl), 7vw, 5.5rem);
}

.directory-view-rotate-form {
    margin: var(--space-3) 0;
    display: flex;
    justify-content: center;
}

.directory-view-upload-form {
    display: grid;
    gap: var(--space-2);
}

.directory-view-upload-form .form-label {
    margin-bottom: 0;
    color: var(--color-neutral-700);
}

.directory-view-upload-form .form-control {
    min-height: 42px;
    background: var(--color-neutral-50);
}

.directory-view-photo-help {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.directory-view-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.directory-view-data-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.directory-view-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.directory-view-value {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.directory-view-note {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Notas libres de la familia: respeta los saltos de línea capturados en el textarea. */
.directory-view-notas-text {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    white-space: pre-line;
    word-break: break-word;
}

.directory-view-inline-alert,
.directory-view-family-alert {
    margin: 0;
}

.directory-view-card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-neutral-50) 0%, var(--bg-surface) 100%);
}

.directory-view-card-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.directory-view-card-header h3 i {
    color: var(--color-primary-700);
}

.directory-view-family-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.directory-view-family-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-4);
    box-shadow: var(--shadow-xs);
    display: grid;
    gap: var(--space-3);
}

/* La pareja (esposa/esposo/concubino) recibe un fondo cálido distintivo. */
.directory-view-family-item.is-pareja {
    background:
        radial-gradient(120% 140% at 0% 0%, var(--color-accent-50) 0%, transparent 55%),
        linear-gradient(135deg, var(--color-accent-50) 0%, var(--bg-surface) 70%);
    border-color: var(--color-accent-200);
    box-shadow: var(--shadow-sm);
}

.directory-view-family-item.is-pareja .directory-view-family-avatar.is-pareja {
    background: var(--bg-surface);
    color: var(--color-accent-600);
    border-color: var(--color-accent-200);
    box-shadow: var(--shadow-xs);
}

.directory-view-family-item.is-pareja .directory-view-data-item {
    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
}

.directory-view-family-item-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    align-items: flex-start;
}

.directory-view-family-item-header h4 {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.directory-view-family-item-header p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.directory-view-family-identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.directory-view-family-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-lg);
    background: var(--color-neutral-100);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.directory-view-family-avatar.is-pareja {
    background: var(--color-accent-50);
    color: var(--color-accent-700);
    border-color: var(--color-accent-200);
}

.directory-view-family-avatar.is-hijo {
    background: var(--color-info-50);
    color: var(--color-info-700);
    border-color: var(--color-info-100);
}

.directory-view-family-avatar.is-padre {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border-color: var(--color-primary-200);
}

.directory-view-family-avatar.is-hermano {
    background: var(--color-success-50);
    color: var(--color-success-700);
    border-color: var(--color-success-100);
}

.directory-view-family-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.directory-view-family-data {
    display: grid;
    gap: var(--space-2);
}

@media (max-width: 991.98px) {
    .directory-view-main-card .card-body,
    .directory-view-family-card .card-body,
    .directory-view-card-header,
    .directory-view-hero {
        padding: var(--space-5);
    }

    .directory-view-family-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .directory-view-data-grid {
        grid-template-columns: 1fr;
    }

    .directory-view-photo-frame.is-empty {
        height: clamp(220px, 72vw, 420px);
    }

    .directory-view-photo-frame.has-image,
    .directory-view-photo-image {
        max-height: 420px;
    }

    .directory-view-hero-actions {
        width: 100%;
    }

    .directory-view-hero-actions .btn,
    .directory-view-inline-form {
        flex: 1 1 100%;
    }

    .directory-view-inline-form .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================
   Directorio - Crear Miembro (patron visual de vista)
   ============================================================= */

.directory-create .directory-create-section-title {
    margin-top: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.directory-create .directory-create-subsection {
    margin-top: var(--space-4);
}

.directory-create .directory-create-subsection-title {
    margin-bottom: var(--space-2);
}

.directory-create .directory-create-subsection-intro {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.directory-create .directory-create-inline-message {
    margin-top: var(--space-2);
}

.directory-create .form-label {
    color: var(--color-neutral-700);
}

.directory-create .form-control,
.directory-create .form-select {
    background: var(--color-neutral-50);
    border-color: var(--color-neutral-300);
    min-height: 44px;
}

.directory-create textarea.form-control {
    min-height: 96px;
}

.directory-create .form-control:focus,
.directory-create .form-select:focus {
    background: var(--bg-surface);
    border-color: var(--color-primary-500);
}

.directory-create .directory-create-actions {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    gap: var(--space-2);
}

@media (max-width: 767.98px) {
    .directory-create .directory-create-actions {
        justify-content: stretch !important;
    }

    .directory-create .directory-create-actions .btn {
        flex: 1 1 100%;
    }
}

/* =============================================================
   Administrador — Panel de limpieza de módulos
   ============================================================= */

.danger-zone-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
}

.danger-zone-hero {
    border-color: var(--color-danger-200);
    background: linear-gradient(138deg, var(--color-danger-50) 0%, var(--bg-surface) 52%, var(--color-warning-50) 100%);
}

.danger-zone-hero .directory-view-kicker {
    color: var(--color-danger-700);
}

.danger-zone-meta .badge {
    padding-inline: var(--space-3);
}

.danger-zone-alert {
    margin-bottom: 0;
}

/* Tarjeta de configuración (correos en copia del formulario de benevolencia) */
.admin-config-card {
    margin-bottom: 0;
    border-color: var(--color-border);
}

.admin-config-card .card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
}

.admin-config-card form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.admin-config-card .form-text {
    margin-bottom: var(--space-2);
}

.danger-zone-card {
    margin-bottom: 0;
    border-color: var(--color-border);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.danger-zone-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-danger-200);
    box-shadow: var(--shadow-md);
}

.danger-zone-card .card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
}

.danger-zone-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.danger-zone-card-header .kpi-icon {
    width: 42px;
    height: 42px;
    font-size: var(--font-size-xl);
}

.danger-zone-card-title {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.danger-zone-card-subtitle {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.stat-list-compact {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    overflow: hidden;
}

.stat-list-compact li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.stat-list-compact li:last-child {
    border-bottom: none;
}

.stat-list-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stat-list-value {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.danger-zone-action {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.danger-zone-action i {
    font-size: var(--font-size-sm);
}

.danger-zone-modal .modal-content {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.danger-zone-modal .modal-header {
    border-bottom: none;
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(138deg, var(--color-danger-700) 0%, var(--color-danger-600) 100%);
    color: var(--color-text-on-primary);
}

.danger-zone-modal .modal-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.danger-zone-modal .modal-title i {
    font-size: var(--font-size-base);
}

.danger-zone-modal .modal-header .btn-close {
    opacity: 0.85;
}

.danger-zone-modal .modal-header .btn-close:hover {
    opacity: 1;
}

.danger-zone-modal .modal-body {
    padding: var(--space-5);
    background: var(--bg-surface-alt);
}

.danger-zone-modal-alert {
    margin-bottom: var(--space-4);
}

.danger-zone-modal .form-text {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
}

.danger-zone-modal .modal-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface);
}

@media (max-width: 767.98px) {
    .danger-zone-hero,
    .danger-zone-card .card-body,
    .danger-zone-modal .modal-body,
    .danger-zone-modal .modal-header,
    .danger-zone-modal .modal-footer {
        padding: var(--space-4);
    }

    .danger-zone-action {
        width: 100%;
    }
}

/* =============================================================
   Inventario — Catálogo de activos (index)
   ============================================================= */

.catalog-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
}

.catalog-hero {
    border-color: var(--color-info-200);
    background: linear-gradient(138deg, var(--color-info-50) 0%, var(--bg-surface) 52%, var(--color-primary-50) 100%);
}

.catalog-hero .directory-view-kicker {
    color: var(--color-info-700);
}

.catalog-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.metrics-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.metric-card-compact {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-alt);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
}

.metric-card-compact .kpi-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: var(--font-size-xl);
}

.metric-card-label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric-card-value {
    margin: var(--space-1) 0 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.catalog-alert {
    margin-bottom: 0;
}

.catalog-empty-card .card-body {
    padding: var(--space-8) var(--space-6);
}

.catalog-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    background: var(--color-neutral-100);
    color: var(--color-neutral-500);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-3);
}

.catalog-empty-card .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.catalog-table-card {
    margin-bottom: 0;
}

.catalog-table-card .card-body {
    padding: var(--space-5);
}

.catalog-table-card .table-wrapper {
    box-shadow: none;
}

.catalog-description {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.catalog-search-bar {
    margin-bottom: var(--space-4);
    max-width: 480px;
}

.catalog-search-bar .form-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.catalog-row--danado > td {
    background-color: var(--color-danger-50);
    color: var(--color-danger-800);
}

.catalog-row--danado > td strong {
    color: var(--color-danger-800);
}

.catalog-row--danado .catalog-description {
    color: var(--color-danger-700);
}

.catalog-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.catalog-actions form {
    display: inline-flex;
    margin: 0;
}

.catalog-actions .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
}

.form-shell-card {
    margin-bottom: 0;
}

.form-shell-card .card-body {
    padding: var(--space-6);
}

.form-field-block .form-label {
    margin-bottom: var(--space-2);
    color: var(--color-neutral-700);
    font-weight: var(--font-weight-semibold);
}

.form-required-legend {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.form-field-toned {
    background: var(--color-neutral-50);
    border-color: var(--color-neutral-300);
}

.form-field-toned:focus {
    background: var(--bg-surface);
}

.form-field-help {
    margin-top: var(--space-1);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
}

.form-field-help i {
    color: var(--color-text-secondary);
}

.form-error-list {
    margin: 0;
    padding-left: var(--space-4);
}

.form-error-list li + li {
    margin-top: var(--space-1);
}

.form-actions-row .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.media-upload-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.form-shell-card .card-body > .row.g-4.mb-4 {
    align-items: flex-start;
}

.media-panel-caption {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.asset-photo-panel .directory-view-photo-frame.has-image,
.asset-photo-panel .directory-view-photo-image {
    max-height: 420px;
}

.media-upload-alert {
    margin-bottom: var(--space-1);
}

.media-upload-controls {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    padding: var(--space-3);
}

.media-upload-controls .form-control {
    background: var(--bg-surface);
}

.media-upload-button {
    width: auto;
    min-width: 170px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.media-delete-form {
    margin-top: 0;
}

.media-delete-button {
    width: auto;
    min-width: 170px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.invoice-upload-card {
    margin-top: 0;
}

.invoice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.invoice-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: var(--space-2) var(--space-3);
}

.invoice-list-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: var(--font-size-xl);
}

.invoice-list-icon.is-pdf {
    background: var(--color-danger-100);
    color: var(--color-danger-700);
}

.invoice-list-icon.is-image {
    background: var(--color-info-100);
    color: var(--color-info-700);
}

.invoice-list-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.invoice-list-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.invoice-list-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.invoice-list-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.invoice-list-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.invoice-delete-form {
    margin: 0;
}

.invoice-modal-image {
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-md);
}

.invoice-empty-state {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    padding: var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
}

.invoice-empty-state i {
    font-size: var(--font-size-2xl);
    color: var(--color-neutral-500);
    display: block;
    margin-bottom: var(--space-2);
}

.invoice-empty-state p {
    margin: 0;
}

@media (max-width: 991.98px) {
    .metrics-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .catalog-hero,
    .catalog-table-card .card-body,
    .catalog-empty-card .card-body,
    .form-shell-card .card-body {
        padding: var(--space-4);
    }

    .metrics-grid-compact {
        grid-template-columns: 1fr;
    }

    .catalog-hero-actions,
    .catalog-hero-actions .btn {
        width: 100%;
    }

    .form-actions-row {
        justify-content: stretch !important;
    }

    .form-actions-row .btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .media-upload-button,
    .media-delete-button {
        width: 100%;
        min-width: 0;
    }

    .invoice-list-item {
        flex-wrap: wrap;
    }

    .invoice-list-actions {
        width: 100%;
    }

    .invoice-list-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* =============================================================
   Asistencia — Registro dominical
   ============================================================= */

.asistencia-dominical .card {
    border-color: color-mix(in srgb, var(--color-neutral-400) 35%, transparent);
    background: linear-gradient(135deg, var(--color-info-50) 0%, var(--bg-surface) 45%, var(--color-info-100) 100%);
    box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--color-neutral-900) 35%, transparent), var(--shadow-sm);
}

.asistencia-dominical .card-header {
    background: transparent;
    border-bottom-color: var(--color-border);
}

/* Movido desde el <style> inline de modules/asistencia/index.php (V141) */

.asistencia-dominical .icon-circle,
.asistencia-reporte .icon-circle {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.domingo-selector .domingo-btn {
    border-width: 2px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xl);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.domingo-selector .domingo-btn.festivo {
    border-color: var(--color-warning-500);
    color: var(--color-warning-700);
}

.domingo-selector .domingo-btn.active {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
    color: var(--color-neutral-0);
    box-shadow: var(--shadow-md);
}

.domingo-selector .domingo-btn:not(.disabled):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.domingo-selector .domingo-btn.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.festivo-extra {
    transition: all var(--transition-base);
}

.principal-row {
    background-color: var(--color-primary-50);
    border-top: 2px solid var(--color-primary-100);
}

.principal-row td {
    border-top: 0;
}

.principal-row:hover td {
    background-color: var(--color-primary-100);
}

.familiar-row td {
    border-top: 0;
}

.familiar-row:hover td {
    background-color: var(--bg-surface-alt);
}

.familiar-solo .indicador {
    background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-700) 100%);
    color: var(--color-neutral-0);
}

.indicador {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.tipo-principal {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
    color: var(--color-neutral-0);
}

.tipo-familiar {
    background: var(--color-primary-100);
    color: var(--color-primary-800);
}

.btnHistorial.btn-sm {
    border-radius: var(--radius-full);
}

.badge.text-bronze {
    color: var(--color-accent-700);
}

/* Filtros (año/mes/rango + botones) apilados a ancho completo en celular */
@media (max-width: 575.98px) {
    .asistencia-filtros .form-select,
    .asistencia-filtros .btn {
        width: 100%;
    }

    .asistencia-filtros > .pt-4 {
        padding-top: 0 !important;
    }

    .domingo-selector .domingo-btn {
        flex: 1 1 auto;
        padding: var(--space-1) var(--space-2);
    }
}

/* -------------------------------------------------------------
   Asistencia en celular: tabla → tarjetas apiladas (V141)
   Mismo patrón que el Directorio (#tabla-directorio): CSS puro,
   el DOM no cambia, así el buscador (que alterna style.display
   por fila) y los switches de asistencia siguen funcionando.
   Layout de tarjeta: nombre + switch grande en la primera línea,
   Mes e Histórico etiquetados debajo, botón de historial al pie.
   ------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
    .asistencia-dominical .table-responsive {
        overflow: visible;
    }

    #tablaMiembros,
    #tablaMiembros tbody {
        display: block;
        width: 100%;
    }

    #tablaMiembros thead {
        display: none;
    }

    #tablaMiembros tbody tr {
        display: grid;
        grid-template-columns: 1fr auto auto;
        column-gap: var(--space-3);
        row-gap: var(--space-1);
        align-items: center;
        margin-bottom: var(--space-2);
        padding: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
        box-shadow: var(--shadow-xs);
    }

    /* Principal: conserva el tinte primario como fondo de la tarjeta
       completa + acento al borde; el familiar va indentado. */
    #tablaMiembros tbody tr.principal-row {
        border: 1px solid var(--color-border);
        border-left: 3px solid var(--color-primary-500);
        background-color: var(--color-primary-50);
    }

    #tablaMiembros tbody tr.familiar-row {
        margin-left: var(--space-4);
        border-left: 3px solid var(--color-primary-200);
    }

    #tablaMiembros tbody td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent !important;
        box-shadow: none;
    }

    /* El nombre abarca col 1–2 para no competir con el ancho del histórico
       (col 2 de la 2ª línea); el switch queda en col 3. */
    #tablaMiembros td.td-persona {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    /* La indentación interna del familiar sobra: la da la tarjeta */
    #tablaMiembros td.td-persona .ms-4 {
        margin-left: 0 !important;
    }

    /* El badge "Activo" está hardcodeado (siempre dice lo mismo para todos):
       en la vista compacta sobra y solo roba ancho al nombre. Se oculta para
       que el nombre use todo el ancho y caiga en ~2 líneas. */
    #tablaMiembros td.td-persona .badge {
        display: none;
    }

    /* Switch de asistencia junto al nombre, agrandado para el pulgar */
    #tablaMiembros td.td-asistio {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        text-align: right !important; /* gana a la utilidad .text-center */
    }

    #tablaMiembros td.td-asistio .form-check-input {
        width: 2.75em;
        height: 1.5em;
    }

    #tablaMiembros td.td-mes {
        grid-column: 1;
        grid-row: 2;
        text-align: left !important; /* gana a la utilidad .text-center */
    }

    #tablaMiembros td.td-mes .d-flex {
        justify-content: flex-start !important;
        gap: var(--space-1) !important;
        flex-wrap: wrap;
    }

    #tablaMiembros td.td-historico {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        text-align: right !important; /* gana a la utilidad .text-center */
    }

    #tablaMiembros td.td-historico .d-flex {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-end;
        gap: var(--space-1);
    }

    /* Vista compacta: sin etiquetas verbosas (los chips R/F y el % ya se
       explican solos; el switch va claramente a la derecha de cada nombre). */
    #tablaMiembros td[data-label]::before {
        content: none;
    }

    /* Botón de historial compacto: solo icono, a la derecha de la 2ª línea */
    #tablaMiembros td.td-historial {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    #tablaMiembros td.td-historial .btnHistorial {
        width: 40px;
        height: 40px;
        min-height: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-lg);
    }

    /* El texto del botón queda accesible para lectores de pantalla pero oculto */
    #tablaMiembros td.td-historial .btnHistorial-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Cuando la persona está AUSENTE (razón visible) o marcada en un domingo de
       Santa Cena (tardanza visible), su control terciario necesita el ancho
       completo de la tarjeta. Sin esto, el input "Razón de la ausencia" se
       desbordaba fuera de la tarjeta en la columna estrecha del switch. La celda
       de asistencia baja a su propia fila full-width y el resto se corre abajo.
       El :has() reacciona en vivo porque el JS togglea .d-none al marcar. */
    #tablaMiembros tbody tr:has(.asistencia-razon-wrap:not(.d-none)) td.td-asistio,
    #tablaMiembros tbody tr:has(.asistencia-tardanza-wrap:not(.d-none)) td.td-asistio {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        text-align: left !important;
    }

    #tablaMiembros tbody tr:has(.asistencia-razon-wrap:not(.d-none)) td.td-mes,
    #tablaMiembros tbody tr:has(.asistencia-tardanza-wrap:not(.d-none)) td.td-mes {
        grid-row: 3;
    }

    #tablaMiembros tbody tr:has(.asistencia-razon-wrap:not(.d-none)) td.td-historico,
    #tablaMiembros tbody tr:has(.asistencia-tardanza-wrap:not(.d-none)) td.td-historico {
        grid-row: 3;
    }

    #tablaMiembros tbody tr:has(.asistencia-razon-wrap:not(.d-none)) td.td-historial,
    #tablaMiembros tbody tr:has(.asistencia-tardanza-wrap:not(.d-none)) td.td-historial {
        grid-row: 3;
    }

    /* El switch pasa a la izquierda y la razón/tardanza llena el resto del ancho */
    #tablaMiembros tbody tr:has(.asistencia-razon-wrap:not(.d-none)) .asistencia-estado,
    #tablaMiembros tbody tr:has(.asistencia-tardanza-wrap:not(.d-none)) .asistencia-estado {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-3);
        width: 100%;
    }

    #tablaMiembros td.td-asistio .asistencia-razon-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    #tablaMiembros td.td-asistio .input-razon-ausencia {
        max-width: none;
        width: 100%;
    }

    #tablaMiembros td.td-asistio .asistencia-tardanza-wrap {
        flex: 1 1 auto;
    }
}

/* Impresión del reporte de asistencia (movido desde <style> inline) */
@media print {
    .asistencia-reporte form button,
    .asistencia-reporte form select,
    #btnImprimir {
        display: none !important;
    }

    .asistencia-reporte {
        margin-top: 0;
    }
}

/* =============================================================
   Asistencia — PWA móvil
   ============================================================= */

.asistencia-pwa-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 28%),
        linear-gradient(180deg, var(--color-primary-50) 0%, var(--bg-page) 30%, var(--bg-page) 100%);
}

.asistencia-pwa-shell {
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.asistencia-pwa-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-xl);
    background: linear-gradient(140deg, var(--color-primary-800) 0%, var(--color-primary-700) 54%, var(--color-primary-900) 100%);
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-lg);
}

.asistencia-pwa-hero-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.asistencia-pwa-kicker {
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.asistencia-pwa-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: var(--line-height-tight);
    color: var(--color-text-on-primary);
}

.asistencia-pwa-subtitle {
    max-width: 64ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
}

.asistencia-pwa-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.asistencia-pwa-hero .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.asistencia-pwa-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 220px;
}

.asistencia-pwa-hero-actions .btn {
    justify-content: center;
}

.asistencia-pwa-message {
    margin-bottom: 0;
}

.asistencia-pwa-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.asistencia-pwa-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.asistencia-pwa-stat-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.asistencia-pwa-stat-card--manual {
    background: linear-gradient(155deg, var(--color-accent-50) 0%, var(--bg-surface) 100%);
    border-color: var(--color-accent-200);
}

.asistencia-pwa-stat-card--presentes {
    background: linear-gradient(155deg, var(--color-success-50) 0%, var(--bg-surface) 100%);
    border-color: var(--color-success-200);
}

.asistencia-pwa-stat-card--ausentes {
    background: linear-gradient(155deg, var(--color-danger-50) 0%, var(--bg-surface) 100%);
    border-color: var(--color-danger-200);
}

.asistencia-pwa-stat-label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.asistencia-pwa-stat-value {
    font-family: var(--font-family-heading);
    font-size: clamp(2.4rem, 7vw, 3.7rem);
    line-height: 1;
    color: var(--color-text-primary);
}

.asistencia-pwa-input-label {
    margin-bottom: 0;
}

.asistencia-pwa-manual-input {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.asistencia-pwa-stat-help {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.asistencia-pwa-table-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
}

.asistencia-pwa-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-neutral-50) 0%, var(--bg-surface) 100%);
}

.asistencia-pwa-section-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-2xl);
}

.asistencia-pwa-section-copy {
    margin: 0;
    color: var(--color-text-secondary);
}

.asistencia-pwa-toolbar-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 220px;
}

.asistencia-pwa-toolbar-actions .btn {
    justify-content: center;
}

.asistencia-pwa-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--bg-surface-alt);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.asistencia-pwa-status.is-pending {
    border-color: var(--color-warning-300);
    background: var(--color-warning-50);
    color: var(--color-warning-800);
}

.asistencia-pwa-status.is-saving {
    border-color: var(--color-info-300);
    background: var(--color-info-50);
    color: var(--color-info-800);
}

.asistencia-pwa-status.is-saved {
    border-color: var(--color-success-300);
    background: var(--color-success-50);
    color: var(--color-success-800);
}

.asistencia-pwa-status.is-error {
    border-color: var(--color-danger-300);
    background: var(--color-danger-50);
    color: var(--color-danger-800);
}

.asistencia-pwa-table-wrapper {
    border-top: 0;
}

.asistencia-pwa-table thead th {
    vertical-align: middle;
}

.asistencia-pwa-row--principal th,
.asistencia-pwa-row--principal td {
    background: rgba(30, 53, 119, 0.04);
}

.asistencia-pwa-person {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.asistencia-pwa-person-name {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.asistencia-pwa-person-meta {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.asistencia-pwa-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    border: 1px solid var(--color-border);
}

.asistencia-pwa-choice-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

.asistencia-pwa-choice {
    min-width: 112px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.asistencia-pwa-choice-input:focus-visible + .asistencia-pwa-choice {
    box-shadow: var(--shadow-focus);
}

.asistencia-pwa-choice-input:checked + .asistencia-pwa-choice--present {
    background: var(--color-success-700);
    color: var(--color-text-on-primary);
}

.asistencia-pwa-choice-input:checked + .asistencia-pwa-choice--absent {
    background: var(--color-danger-700);
    color: var(--color-text-on-primary);
}

@media (max-width: 991.98px) {
    .asistencia-pwa-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .asistencia-pwa-shell {
        padding: var(--space-4) var(--space-3) var(--space-6);
    }

    .asistencia-pwa-hero,
    .asistencia-pwa-table-toolbar {
        flex-direction: column;
    }

    .asistencia-pwa-hero-actions,
    .asistencia-pwa-toolbar-actions {
        width: 100%;
        min-width: 0;
    }

    .asistencia-pwa-stats {
        grid-template-columns: 1fr;
    }

    .asistencia-pwa-table thead {
        display: none;
    }

    .asistencia-pwa-table,
    .asistencia-pwa-table tbody,
    .asistencia-pwa-table tr,
    .asistencia-pwa-table th,
    .asistencia-pwa-table td {
        display: block;
        width: 100%;
    }

    .asistencia-pwa-table tr {
        border-bottom: 1px solid var(--color-border);
    }

    .asistencia-pwa-table tbody tr:last-child {
        border-bottom: 0;
    }

    .asistencia-pwa-table th,
    .asistencia-pwa-table td {
        border-bottom: 0;
        padding: var(--space-3) var(--space-4);
    }

    .asistencia-pwa-table td {
        padding-top: 0;
    }

    .asistencia-pwa-toggle {
        display: flex;
        width: 100%;
    }

    .asistencia-pwa-choice {
        flex: 1 1 50%;
        min-width: 0;
    }
}

/* -------------------------------------------------------------
   PWA Asistencia — barra A-Z, pestañas y sangría de familiares
   ------------------------------------------------------------- */

.asistencia-pwa-list-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.asistencia-pwa-list-layout .asistencia-pwa-table-card {
    flex: 1 1 auto;
    min-width: 0;
}

/* Barra vertical de iniciales (salta al primer principal de la letra) */
.asistencia-pwa-alpha {
    position: sticky;
    top: var(--space-3);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-2) var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    max-height: calc(100vh - var(--space-6));
    overflow-y: auto;
    /* Deslizar el dedo por la barra (scrub) salta de letra en letra sin que la
       página haga scroll a la vez. user-select evita seleccionar las letras. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Letra activa mientras se arrastra el dedo por la barra */
.asistencia-pwa-alpha-letter.is-scrubbing {
    background: var(--color-primary-600);
    color: var(--color-text-on-primary);
}

.asistencia-pwa-alpha-letter {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-primary-interactive);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.asistencia-pwa-alpha-letter:hover {
    background: var(--color-primary-50);
}

.asistencia-pwa-alpha-letter:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.asistencia-pwa-alpha-letter.is-empty,
.asistencia-pwa-alpha-letter:disabled {
    color: var(--color-text-muted);
    opacity: 0.4;
    cursor: default;
}

/* Pestañas: Toda la lista / Presentes / Ausentes */
.asistencia-pwa-tabs {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) 0;
}

.asistencia-pwa-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-100);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.asistencia-pwa-tab:hover {
    background: var(--color-neutral-200);
}

.asistencia-pwa-tab:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.asistencia-pwa-tab.is-active {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-sm);
}

.asistencia-pwa-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-neutral-200);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.asistencia-pwa-tab.is-active .asistencia-pwa-tab-count {
    background: var(--color-primary-700);
    color: var(--color-text-on-primary);
}

/* Sangría de familiares: se ven colgando de su miembro principal */
.asistencia-pwa-row--familiar th[scope="row"] {
    padding-left: var(--space-8);
}

.asistencia-pwa-row--familiar .asistencia-pwa-person-name::before {
    content: "\21B3"; /* ↳ */
    margin-right: var(--space-2);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
}

/* No quedar oculto bajo nada al saltar con la barra A-Z */
.asistencia-pwa-row {
    scroll-margin-top: var(--space-4);
}

.asistencia-pwa-empty {
    margin: 0;
    padding: var(--space-6) var(--space-5);
    text-align: center;
    color: var(--color-text-secondary);
}

@media (max-width: 767.98px) {
    .asistencia-pwa-list-layout {
        gap: var(--space-2);
    }

    .asistencia-pwa-tabs {
        padding: var(--space-3) var(--space-3) 0;
        gap: var(--space-1);
    }

    .asistencia-pwa-tab {
        flex-direction: column;
        gap: var(--space-1);
        padding: var(--space-2);
        font-size: var(--font-size-sm);
    }

    .asistencia-pwa-row--familiar th[scope="row"] {
        padding-left: var(--space-6);
    }
}

/* =============================================================
   Finanzas — Dashboard de gestión (rediseño UX)
   ============================================================= */

.finance-view {
    gap: var(--space-4);
}

.finance-view-hero {
    border-color: var(--color-success-200);
    background: linear-gradient(138deg, var(--color-success-50) 0%, var(--bg-surface) 52%, var(--color-primary-50) 100%);
}

.finance-view-message {
    margin-bottom: 0;
}

.finance-view-filter-card .card-body {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.finance-view-filter-note {
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.finance-view-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.finance-view-kpi {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-alt);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-2);
}

.finance-view-kpi-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.finance-view-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: inline-grid;
    place-items: center;
    color: var(--color-text-on-primary);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-xs);
}

.finance-view-kpi-icon--success { background: linear-gradient(135deg, var(--color-success-600), var(--color-success-700)); }
.finance-view-kpi-icon--info { background: linear-gradient(135deg, var(--color-info-500), var(--color-info-600)); }
.finance-view-kpi-icon--warning { background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-700)); }
.finance-view-kpi-icon--danger { background: linear-gradient(135deg, var(--color-danger-500), var(--color-danger-700)); }
.finance-view-kpi-icon--primary { background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700)); }
.finance-view-kpi-icon--neutral { background: linear-gradient(135deg, var(--color-neutral-500), var(--color-neutral-700)); }

.finance-view-kpi-label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.finance-view-kpi-value {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: clamp(var(--font-size-lg), 2.2vw, var(--font-size-2xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.finance-view-kpi-sublabel {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}

.finance-view-kpi-value--success {
    color: var(--color-success-700);
}

.finance-view-kpi-value--danger {
    color: var(--color-danger-700);
}

.finance-view-kpi--clickable {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                border-color var(--transition-fast);
}

.finance-view-kpi--clickable:hover {
    border-color: var(--color-primary-400);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.finance-view-kpi--clickable:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
    .finance-view-kpi--clickable:hover {
        transform: none;
    }
}

.finance-view-monthly-summary {
    margin-top: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.finance-view-monthly-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.finance-view-monthly-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.finance-view-monthly-table th,
.finance-view-monthly-table td {
    white-space: nowrap;
}

.finance-view-money-group .input-group-text {
    color: var(--color-text-secondary);
    background: var(--color-neutral-100);
    border-color: var(--color-border);
    font-weight: var(--font-weight-semibold);
}

.finance-view-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* ── Gráficos de finanzas ──────────────────────────────────────────────── */

.finance-charts-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.finance-chart-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

.asistencia-dominical .finance-chart-card {
    border-color: var(--color-border);
    background: var(--bg-surface);
}

.finance-chart-card:hover {
    box-shadow: var(--shadow-md);
}

.finance-chart-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--bg-surface);
    flex-wrap: wrap;
}

.finance-chart-card-header-text {
    flex: 1;
    min-width: 0;
}

.finance-chart-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.finance-chart-card-icon--primary {
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.finance-chart-card-icon--accent {
    background: var(--color-accent-100);
    color: var(--color-accent-700);
}

.finance-chart-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
}

.finance-chart-card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
}

.finance-chart-card-body {
    position: relative;
    height: 340px;
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--bg-surface);
}

.finance-chart-card-body canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Toggle por domingo / promedio mensual */
.finance-chart-toggle {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.finance-chart-toggle-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--bg-page);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.finance-chart-toggle-btn:hover {
    background: var(--color-neutral-100);
    border-color: var(--color-primary-300);
    color: var(--color-text-primary);
}

.finance-chart-toggle-btn.active {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: #fff;
}

.finance-chart-toggle-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
    .finance-chart-card,
    .finance-chart-toggle-btn {
        transition: none;
    }
}

.finance-view-form-note {
    margin-top: var(--space-3);
    margin-bottom: 0;
}

.finance-view-table td {
    vertical-align: top;
}

.finance-view-docs-card .card-body {
    padding-top: var(--space-5);
}

.finance-view-subcard {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4);
}

.finance-view-subcard--table {
    padding: 0;
    overflow: hidden;
}

.finance-view-subtitle {
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.finance-view-subtitle i {
    color: var(--color-primary-700);
}

.finance-view-subtitle--with-padding {
    padding: var(--space-4) var(--space-4) var(--space-3);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border);
}

@media (max-width: 991.98px) {
    .finance-view-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .finance-view-kpi-grid {
        grid-template-columns: 1fr;
    }

    .finance-view-actions {
        justify-content: stretch;
    }

    .finance-view-actions .btn {
        width: 100%;
    }

    .finance-view-monthly-header {
        align-items: stretch;
        flex-direction: column;
    }

    .finance-chart-card-body {
        height: 300px;
        padding: var(--space-3);
    }

    /* El toggle no encoge (flex-shrink:0); en móvil baja a su propia línea
       para que el título no se comprima a ancho 0 y se rompa letra por letra. */
    .finance-chart-card-header {
        align-items: center;
    }

    .finance-chart-toggle {
        flex-basis: 100%;
    }
}

/* =============================================================
   Benevolencia — Dashboard de gestión (rediseño UX)
   ============================================================= */

.benevolencia-view {
    gap: var(--space-4);
}

.benevolencia-view-hero {
    border-color: var(--color-accent-200);
    background: linear-gradient(138deg, var(--color-accent-50) 0%, var(--bg-surface) 56%, var(--color-info-50) 100%);
}

/* Selector de periodo anual en la cabecera del dashboard de benevolencia */
.benevolencia-view-period {
    align-items: center;
}

.benevolencia-period-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--color-accent-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.benevolencia-period-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.benevolencia-period-select {
    width: auto;
    min-width: 5.5rem;
    font-weight: var(--font-weight-bold);
}

.benevolencia-view-message {
    margin-bottom: 0;
}

.benevolencia-view-top-row .card {
    margin-bottom: 0;
}

.benevolencia-view-budget-card {
    border: 2px solid var(--color-primary-300);
}

.benevolencia-view-budget-card .card-body {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.benevolencia-view-budget-grid {
    --bs-gutter-x: var(--space-3);
    --bs-gutter-y: var(--space-3);
}

.benevolencia-view-budget-grid > [class*='col-'] {
    display: flex;
}

.benevolencia-view-budget-card .figure-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    gap: var(--space-1);
    min-height: 118px;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
}

.benevolencia-view-budget-card .figure-cell small {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.benevolencia-view-progress {
    height: 14px;
}

/* Fila "= Disponible" en el modal de cómo se calcula el disponible: se separa con un
   borde superior marcado para distinguir el resultado de los términos del cálculo. */
.benevolencia-view-calc-total td {
    border-top: 2px solid var(--color-border);
}

.benevolencia-view-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 42px;
}

.benevolencia-view-actions .btn i {
    margin-right: 0 !important;
}

.benevolencia-view-kpi-grid .dashboard-card {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-alt);
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.benevolencia-view-kpi-grid .dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

/* Números Aprob./Rech. de diáconos: badges-botón que abren el modal de votos. */
.diacono-votos-btn {
    cursor: pointer;
    line-height: 1;
}

.diacono-votos-btn:disabled {
    cursor: default;
    opacity: 0.55;
}

.diacono-votos-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Tarjetas KPI accionables: abren un modal de detalle al hacer clic. */
.benevolencia-view-kpi-grid .dashboard-card[data-kpi] {
    cursor: pointer;
}

.benevolencia-view-kpi-grid .dashboard-card[data-kpi]:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--color-primary-interactive);
}

.benevolencia-view-kpi-grid .dashboard-card .icon {
    margin: 0 0 var(--space-3);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
    color: var(--color-primary-700);
}

.benevolencia-view-kpi-grid .dashboard-card .number {
    font-size: clamp(var(--font-size-xl), 2vw, var(--font-size-2xl));
    line-height: var(--line-height-tight);
}

/* En celular las KPI van de a dos por fila (col-6): compactar para que
   número + etiqueta quepan sin desbordar la tarjeta. */
@media (max-width: 575.98px) {
    .benevolencia-view-kpi-grid .dashboard-card {
        padding: var(--space-3);
    }

    .benevolencia-view-kpi-grid .dashboard-card .number {
        font-size: var(--font-size-lg);
    }
}

.benevolencia-view-kpi-grid .dashboard-card .label {
    margin-top: var(--space-2);
}

.benevolencia-view-kpi-grid .dashboard-card .description {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-snug);
}

.benevolencia-view-filter-card {
    margin-bottom: var(--space-4);
}

.benevolencia-view-filter-card .card-body {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.benevolencia-view-filter-card .btn {
    min-height: 42px;
}

.benevolencia-view-table-card .card-body,
.benevolencia-view-diaconos-card .card-body {
    padding-top: var(--space-4);
}

.benevolencia-view .table-wrapper {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: auto;
}

.benevolencia-view .table {
    margin-bottom: 0;
}

.benevolencia-view .table thead th {
    background: var(--color-neutral-100);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.benevolencia-view .table tbody td {
    vertical-align: top;
}

.benevolencia-view .table tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.07);
}

.benevolencia-view .table .btn-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.benevolencia-view-chart-body {
    min-height: 330px;
}

.benevolencia-view-diaconos-card .btn-group-diaconos .btn {
    min-width: 34px;
}

.benevolencia-view .badge {
    border-radius: var(--radius-full);
}

@media (max-width: 1199.98px) {
    .benevolencia-view-budget-card .figure-cell {
        min-height: 108px;
    }

    .benevolencia-view-budget-grid > [class*='col-'] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 991.98px) {
    .benevolencia-view-top-row .card {
        margin-bottom: var(--space-3);
    }

    .benevolencia-view-kpi-grid > [class*='col-'] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767.98px) {
    .benevolencia-view-budget-grid > [class*='col-'] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .benevolencia-view-kpi-grid > [class*='col-'] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .benevolencia-view-actions .btn {
        width: 100%;
    }

    .benevolencia-view-chart-body {
        min-height: 260px;
    }
}

/* =============================================================
   Benevolencia — Informe del uso de las ofrendas (reportes.php)
   ============================================================= */

.benevolencia-report .text-accent {
    color: var(--color-accent-700);
}

.benevolencia-report .text-neutral {
    color: var(--color-neutral-500);
}

.benevolencia-report-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
}

.benevolencia-report-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.benevolencia-report-generated {
    font-weight: var(--font-weight-regular);
}

/* Cifras secundarias del resumen: misma técnica de container query que
   .figure-amount pero un escalón menor (usadas en la fila de sub-cifras). */
.figure-amount-sm {
    font-size: clamp(var(--font-size-lg), 12cqi, var(--font-size-2xl));
    line-height: var(--line-height-tight);
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
}

.benevolencia-report-subfigures .figure-cell {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}

.benevolencia-report-subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

/* Contenedor de gráfico con ALTURA FIJA + position:relative: requisito de
   Chart.js con maintainAspectRatio:false. Sin una altura definida (solo
   min-height) el canvas se realimenta del tamaño del contenedor y crece al
   infinito en cada repintado. */
.benevolencia-report-chart-box {
    position: relative;
    width: 100%;
    height: 320px;
}

.benevolencia-report-footnote {
    font-size: var(--font-size-xs);
    margin-top: var(--space-6);
}

@media (max-width: 575.98px) {
    .benevolencia-report-actions {
        align-items: stretch;
    }
    .benevolencia-report-buttons .btn {
        flex: 1 1 auto;
    }
}

/* Impresión: la regla global de @media print oculta todo salvo
   #tabla-directorio; aquí re-habilitamos el informe y ocultamos el chrome
   (sidebar/topbar/footer quedan ocultos por la regla global body *). */
@media print {
    .benevolencia-report,
    .benevolencia-report * {
        visibility: visible;
    }

    .benevolencia-report {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .benevolencia-report .no-print,
    .benevolencia-report .no-print * {
        display: none !important;
    }
}

/* =============================================================
   Benevolencia — Crear caso (rediseño UX)
   ============================================================= */

.benevolencia-create-view {
    gap: var(--space-4);
}

.benevolencia-create-view-hero {
    border-color: var(--color-success-200);
    background: linear-gradient(138deg, var(--color-success-50) 0%, var(--bg-surface) 56%, var(--color-info-50) 100%);
}

.benevolencia-create-view-card {
    margin-bottom: 0;
}

.benevolencia-create-view-card .card-body {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.benevolencia-create-view-member-info {
    margin-top: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.benevolencia-create-view-member-info:empty {
    display: none;
}

/* Historial de benevolencia de la persona seleccionada (crear caso) */
.benevolencia-historial:empty {
    display: none;
}

.benevolencia-historial {
    margin-top: var(--space-3);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
}

.benevolencia-historial--limpio {
    background: var(--color-success-50);
    border-color: var(--color-success-500);
    color: var(--color-success-800);
}

.benevolencia-historial--alerta {
    background: var(--color-warning-50);
    border-color: var(--color-warning-500);
    color: var(--color-warning-800);
}

.benevolencia-historial-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.benevolencia-historial-head i {
    flex-shrink: 0;
    font-size: var(--font-size-lg);
}

.benevolencia-historial--alerta .benevolencia-historial-head i {
    color: var(--color-warning-700);
}

.benevolencia-historial--limpio .benevolencia-historial-head i {
    color: var(--color-success-700);
}

.benevolencia-historial-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.benevolencia-historial-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.benevolencia-historial-caso {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-interactive);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: color var(--transition-fast);
}
.benevolencia-historial-caso:hover,
.benevolencia-historial-caso:focus-visible {
    color: var(--color-primary-700);
    text-decoration: underline;
}

.benevolencia-historial-fecha {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
}

.benevolencia-historial-tipo {
    color: var(--color-text-primary);
}

.benevolencia-historial-monto {
    margin-left: auto;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.benevolencia-create-view-section {
    margin: var(--space-6) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.benevolencia-create-view-section:first-of-type {
    margin-top: 0;
}

.benevolencia-create-view-section i {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: var(--color-success-100);
    color: var(--color-success-700);
    font-size: var(--font-size-sm);
}

.benevolencia-create-view-note {
    margin-bottom: 0;
}

.benevolencia-create-view-urgent-check {
    align-items: flex-start;
    gap: var(--space-2);
    border: 1px solid var(--color-danger-100);
    border-radius: var(--radius-md);
    background: var(--color-danger-50);
    padding: var(--space-2) var(--space-3);
}

.benevolencia-create-view-urgent-check .form-check-input {
    margin-top: 2px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-danger-600);
    border-radius: var(--radius-sm);
    background-color: var(--color-danger-50);
    box-shadow: none;
}

.benevolencia-create-view-urgent-check .form-check-input:focus,
.benevolencia-create-view-urgent-check .form-check-input:focus-visible {
    border-color: var(--color-danger-500);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.benevolencia-create-view-urgent-check .form-check-input:checked {
    background-color: var(--color-danger-600);
    border-color: var(--color-danger-600);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m5.5 10 3 3 6-6'/%3e%3c/svg%3e");
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.benevolencia-create-view-urgent-label {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-danger-700);
    line-height: var(--line-height-tight);
}

.benevolencia-create-view-urgent-check .form-check-label i {
    margin-right: var(--space-1);
}

.benevolencia-create-view-urgent-check small {
    margin-left: calc(18px + var(--space-2));
}

.benevolencia-create-view-actions .btn {
    min-width: 172px;
    justify-content: center;
}

/* =============================================================
   Benevolencia - Editar caso
   ============================================================= */

.benevolencia-edit-view {
    gap: var(--space-4);
}

.benevolencia-edit-view-hero {
    border-color: var(--color-primary-200);
    background: linear-gradient(138deg, var(--color-primary-50) 0%, var(--bg-surface) 56%, var(--color-info-50) 100%);
}

.benevolencia-edit-view-card,
.benevolencia-edit-view-side-card {
    margin-bottom: 0;
}

.benevolencia-edit-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.benevolencia-edit-view-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.benevolencia-edit-view-solicitante {
    margin-bottom: var(--space-4);
}

.benevolencia-edit-view-status {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.benevolencia-edit-view-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.benevolencia-edit-view-status-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.benevolencia-edit-view-timeline {
    position: relative;
    padding-left: calc(var(--space-3) + 4px);
    max-height: 400px;
    overflow-y: auto;
}

.benevolencia-edit-view-timeline .timeline-item {
    position: relative;
    border-left: 2px solid var(--color-border);
    padding-bottom: var(--space-3);
}

.benevolencia-edit-view-timeline .timeline-item:last-child {
    border-left: none;
    padding-bottom: 0;
}

.benevolencia-edit-view-timeline-marker {
    position: absolute;
    left: -7px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-primary-interactive);
}

.benevolencia-edit-view-timeline .timeline-content {
    padding-left: var(--space-3);
}

/* =============================================================
   Benevolencia - Ver caso
   ============================================================= */

.benevolencia-detail-view {
    gap: var(--space-4);
}

.benevolencia-detail-view-hero {
    position: relative;
    border-color: var(--color-accent-200);
    background: linear-gradient(138deg, var(--color-accent-50) 0%, var(--bg-surface) 54%, var(--color-info-50) 100%);
}

/* Hero teñido según el resultado del caso, con glow pulsante.
   Rojo = urgente sin decidir (reservado para urgencia); verde = aprobado;
   amarillo = rechazado. */
.benevolencia-detail-view-hero--aprobado {
    border-color: var(--color-success-600);
    background: linear-gradient(138deg, var(--color-success-50) 0%, var(--bg-surface) 56%, var(--color-success-100) 100%);
    animation: benevolencia-hero-pulse-aprobado 3s ease-in-out infinite;
}

.benevolencia-detail-view-hero--rechazado {
    border-color: var(--color-warning-500);
    background: linear-gradient(138deg, var(--color-warning-50) 0%, var(--bg-surface) 56%, var(--color-warning-100) 100%);
    animation: benevolencia-hero-pulse-rechazado 3s ease-in-out infinite;
}

.benevolencia-detail-view-hero--urgente {
    border-color: var(--color-danger-800);
    background: linear-gradient(138deg, var(--color-danger-700) 0%, var(--color-danger-600) 52%, var(--color-danger-700) 100%);
    animation: benevolencia-hero-pulse-urgente 2.2s ease-in-out infinite;
}

/* En el hero urgente (fondo rojo sólido) el texto va en blanco */
.benevolencia-detail-view-hero--urgente .directory-view-title {
    color: var(--color-text-on-primary);
}

.benevolencia-detail-view-hero--urgente .directory-view-kicker,
.benevolencia-detail-view-hero--urgente .directory-view-subtitle {
    color: rgba(255, 255, 255, 0.88);
}

/* Emblema grande "Caso urgente" en el hero — blanco para resaltar sobre el rojo */
.benevolencia-detail-view-urgent-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-1) 0 var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--color-danger-700);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: var(--shadow-md);
    animation: benevolencia-urgent-flag-pulse 1.6s ease-in-out infinite;
}

.benevolencia-detail-view-urgent-flag i {
    font-size: var(--font-size-3xl);
    line-height: 1;
    color: var(--color-danger-600);
}

/* Sello tipo "stamp" — rojo, rotado, sobre el hero cuando la entrega fue rechazada
   por el beneficiario. El rojo se usa aquí por pedido explícito: es un emblema de
   estado final (no la urgencia que tiñe el hero). */
.benevolencia-detail-view-stamp {
    position: absolute;
    right: var(--space-6);
    bottom: var(--space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 3px solid var(--color-danger-600);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
    color: var(--color-danger-700);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    transform: rotate(-9deg);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-danger-600) 30%, transparent),
                var(--shadow-sm);
    pointer-events: none;
}

.benevolencia-detail-view-stamp i {
    font-size: var(--font-size-2xl);
    line-height: 1;
    color: var(--color-danger-600);
}

/* Variante "Pendiente de entrega": morado, consistente con la insignia
   .badge-purple de "Entrega de la ayuda → Pendiente". */
.benevolencia-detail-view-stamp--pendiente {
    border-color: var(--color-purple-600);
    color: var(--color-purple-700);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-purple-600) 30%, transparent),
                var(--shadow-sm);
}

.benevolencia-detail-view-stamp--pendiente i {
    color: var(--color-purple-600);
}

/* En pantallas angostas el hero se apila: el sello pasa a flujo normal para no
   solaparse con el contenido ni con el botón "Volver". */
@media (max-width: 768px) {
    .benevolencia-detail-view-stamp {
        position: static;
        margin: var(--space-2) 0 0;
        transform: rotate(-4deg);
        transform-origin: left center;
    }
}

@keyframes benevolencia-urgent-flag-pulse {
    0%, 100% { transform: scale(1); box-shadow: var(--shadow-md), 0 0 0 0 rgba(255, 255, 255, 0.6); }
    50%      { transform: scale(1.03); box-shadow: var(--shadow-md), 0 0 20px 4px rgba(255, 255, 255, 0.45); }
}

@keyframes benevolencia-hero-pulse-aprobado {
    0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(5, 150, 105, 0); }
    50%      { box-shadow: var(--shadow-sm), 0 0 26px 1px rgba(5, 150, 105, 0.32); }
}

@keyframes benevolencia-hero-pulse-rechazado {
    0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(245, 158, 11, 0); }
    50%      { box-shadow: var(--shadow-sm), 0 0 26px 1px rgba(245, 158, 11, 0.34); }
}

@keyframes benevolencia-hero-pulse-urgente {
    0%, 100% { box-shadow: var(--shadow-sm), 0 0 22px 4px rgba(220, 38, 38, 0.38); }
    50%      { box-shadow: var(--shadow-sm), 0 0 60px 16px rgba(220, 38, 38, 0.70); }
}

@media (prefers-reduced-motion: reduce) {
    .benevolencia-detail-view-hero--aprobado,
    .benevolencia-detail-view-hero--rechazado,
    .benevolencia-detail-view-hero--urgente,
    .benevolencia-detail-view-urgent-flag {
        animation: none;
    }
    .benevolencia-detail-view-hero--aprobado {
        box-shadow: var(--shadow-sm), 0 0 22px 0 rgba(5, 150, 105, 0.22);
    }
    .benevolencia-detail-view-hero--rechazado {
        box-shadow: var(--shadow-sm), 0 0 22px 0 rgba(245, 158, 11, 0.24);
    }
    .benevolencia-detail-view-hero--urgente {
        box-shadow: var(--shadow-sm), 0 0 44px 8px rgba(220, 38, 38, 0.52);
    }
}

.benevolencia-detail-view-card,
.benevolencia-detail-view-side-card {
    margin-bottom: 0;
}

.benevolencia-detail-view-main-header {
    gap: var(--space-3);
}

.benevolencia-detail-view-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.benevolencia-detail-view-vote-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.benevolencia-detail-view-vote-progress-title {
    min-width: 0;
    font-weight: var(--font-weight-semibold);
}

.benevolencia-detail-view-progress-bar {
    width: 100%;
    height: 14px;
}

.benevolencia-detail-view-progress-bar .progress-bar {
    background: var(--color-warning-500);
    min-width: 0.5rem;
}

.benevolencia-detail-view-progress-pct {
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--color-warning-700);
}

.benevolencia-detail-view-vote-progress-note {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Banner de resultado de votación (aprobado/rechazado) — centrado y con el
   detalle más prominente que el <small> anterior. */
.benevolencia-detail-view-vote-result {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
}

.benevolencia-detail-view-vote-result-icon {
    font-size: var(--font-size-2xl);
    flex-shrink: 0;
}

.benevolencia-detail-view-vote-result-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.benevolencia-detail-view-vote-result-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.benevolencia-detail-view-vote-result-detail {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.benevolencia-detail-view-scrollable {
    max-height: 500px;
    overflow-y: auto;
}

.benevolencia-detail-view-timeline {
    position: relative;
    padding-left: calc(var(--space-3) + 4px);
}

.benevolencia-detail-view-timeline-item {
    position: relative;
    border-left: 2px solid var(--color-border);
    padding-bottom: var(--space-3);
}

.benevolencia-detail-view-timeline-item:last-child {
    border-left: none;
    padding-bottom: 0;
}

.benevolencia-detail-view-timeline-marker {
    position: absolute;
    left: -7px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-primary-interactive);
}

.benevolencia-detail-view-timeline-content {
    padding-left: var(--space-3);
}

.benevolencia-detail-view .vote-progress {
    animation: benevolencia-detail-pulse 2s infinite;
}

.benevolencia-detail-view .vote-progress.complete {
    animation: none;
    box-shadow: 0 0 10px rgba(5, 150, 105, 0.28);
}

@keyframes benevolencia-detail-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

.benevolencia-detail-view .btn-disabled-info {
    position: relative;
    cursor: not-allowed;
}

.benevolencia-detail-view .btn-disabled-info:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    color: var(--color-text-on-primary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    z-index: 1000;
}

#modalRegistrarEntrega .form-control:disabled,
#modalRegistrarEntrega .form-select:disabled {
    background-color: var(--color-neutral-100);
    color: var(--color-text-muted);
    border-color: var(--color-border);
    opacity: 0.72;
}

#modalRegistrarEntrega .form-control:disabled::placeholder {
    color: var(--color-neutral-400);
}

#alerta_rechazo {
    animation: benevolencia-detail-slide-in 0.3s ease-out;
}

@keyframes benevolencia-detail-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.benevolencia-detail-view .cursor-pointer {
    cursor: pointer;
}

.benevolencia-detail-view .cursor-pointer:hover {
    opacity: 0.84;
    transform: scale(1.03);
    transition: all var(--transition-fast);
}

.benevolencia-detail-view-foto-thumb {
    max-height: 150px;
    object-fit: cover;
}

.benevolencia-detail-view-foto-pdf-icon {
    font-size: 3rem;
}

#modalVerImagen .modal-lg {
    max-width: 90%;
}

#modalVerImagen .modal-body img {
    max-height: 80vh;
    object-fit: contain;
}

.benevolencia-detail-view-foto-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    transition: all var(--transition-fast);
}

.file-preview {
    background-color: var(--bg-surface-alt);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
    margin: var(--space-2) 0;
    transition: all var(--transition-base);
}

.file-preview:hover {
    border-color: var(--color-success-600);
    background-color: var(--color-success-100);
}

.file-preview.dragover {
    border-color: var(--color-primary-600);
    background-color: var(--color-primary-100);
}

.btn-ver-caso {
    font-size: var(--font-size-xs);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-ver-caso:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------
   Benevolencia · Detalle del caso — componentes de presentacion
   (rediseno UI/UX, solo tokens; sin hex ni colores Bootstrap crudos)
   ------------------------------------------------------------- */

/* Acciones apiladas (panel lateral) */
.benevolencia-detail-view-action-stack {
    display: grid;
    gap: var(--space-2);
}

.benevolencia-detail-view-action-stack .btn {
    width: 100%;
    justify-content: center;
}

.benevolencia-detail-view-action-hint {
    display: block;
    margin-top: var(--space-1);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Bloque de prosa (detalle / motivo / observaciones) */
.benevolencia-detail-view-prose {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary-300);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.benevolencia-detail-view-money {
    color: var(--color-success-700);
    font-weight: var(--font-weight-bold);
}

.benevolencia-detail-view-span-2 {
    grid-column: 1 / -1;
}

/* Panel financiero — "amount hero" con presencia solida */
.benevolencia-detail-view-finance-body {
    display: grid;
    gap: var(--space-4);
}

.benevolencia-detail-view-amount-hero {
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-600) 55%, var(--color-primary-800) 100%);
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-md);
    display: grid;
    gap: var(--space-1);
    text-align: center;
}

.benevolencia-detail-view-amount-hero-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.92;
}

.benevolencia-detail-view-amount-hero-value {
    font-family: var(--font-family-heading);
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.benevolencia-detail-view-finance-rows {
    display: grid;
    gap: var(--space-2);
}

.benevolencia-detail-view-finance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
}

.benevolencia-detail-view-finance-row--total {
    background: var(--color-primary-50);
    border-color: var(--color-primary-200);
}

.benevolencia-detail-view-finance-row-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.benevolencia-detail-view-finance-row-value {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.benevolencia-detail-view-finance-row--total .benevolencia-detail-view-finance-row-value {
    color: var(--color-primary-700);
}

.benevolencia-detail-view-amount-hero-note {
    font-size: var(--font-size-xs);
    opacity: 0.85;
}

/* Ayuda no economica: modalidad en especie y compras de alimentos */
.benevolencia-detail-view-modalidad-badge {
    align-self: flex-start;
}

.benevolencia-detail-view-reembolso-fields {
    padding: var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    margin-bottom: var(--space-3);
}

.benevolencia-detail-view-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.benevolencia-detail-view-factura-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.benevolencia-detail-view-factura-thumb-btn {
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    line-height: 0;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.benevolencia-detail-view-factura-thumb-btn:hover {
    border-color: var(--color-primary-interactive);
    box-shadow: var(--shadow-sm);
}

.benevolencia-detail-view-factura-thumb-btn:focus-visible {
    border-color: var(--color-primary-interactive);
    box-shadow: var(--shadow-focus);
}

.benevolencia-detail-view-factura-thumb-btn img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    display: block;
}

/* Tarjetas de estadistica (resumen de votos) */
.benevolencia-detail-view-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.benevolencia-detail-view-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
}

.benevolencia-detail-view-stat--success { border-top-color: var(--color-success-600); }
.benevolencia-detail-view-stat--danger  { border-top-color: var(--color-danger-600); }
.benevolencia-detail-view-stat--neutral { border-top-color: var(--color-neutral-400); }

.benevolencia-detail-view-stat-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: var(--font-size-xl);
}

.benevolencia-detail-view-stat--success .benevolencia-detail-view-stat-icon { background: var(--color-success-100); color: var(--color-success-700); }
.benevolencia-detail-view-stat--danger  .benevolencia-detail-view-stat-icon { background: var(--color-danger-100);  color: var(--color-danger-700); }
.benevolencia-detail-view-stat--neutral .benevolencia-detail-view-stat-icon { background: var(--color-neutral-100); color: var(--color-neutral-700); }

.benevolencia-detail-view-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.benevolencia-detail-view-stat-num {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.benevolencia-detail-view-stat-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

/* Panel de metricas de mayoria */
.benevolencia-detail-view-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
}

.benevolencia-detail-view-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.benevolencia-detail-view-meta-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    font-size: var(--font-size-xl);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.benevolencia-detail-view-meta-icon--primary { color: var(--color-primary-700); }
.benevolencia-detail-view-meta-icon--success { color: var(--color-success-700); }
.benevolencia-detail-view-meta-icon--info    { color: var(--color-info-700); }

.benevolencia-detail-view-meta-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.benevolencia-detail-view-meta-num {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

.benevolencia-detail-view-meta-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-tight);
}

/* Stepper de progreso del caso */
.benevolencia-detail-view-steps {
    display: grid;
    gap: 0;
}

.benevolencia-detail-view-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
}

.benevolencia-detail-view-step-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.benevolencia-detail-view-step-marker {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    font-size: var(--font-size-base);
    border: 2px solid var(--color-border-strong);
    background: var(--bg-surface);
    color: var(--color-text-muted);
    z-index: var(--z-base);
}

.benevolencia-detail-view-step-line {
    flex: 1 1 auto;
    width: 2px;
    min-height: var(--space-4);
    margin: var(--space-1) 0;
    background: var(--color-border);
}

.benevolencia-detail-view-step:last-child .benevolencia-detail-view-step-line {
    display: none;
}

.benevolencia-detail-view-step-body {
    padding-bottom: var(--space-5);
}

.benevolencia-detail-view-step:last-child .benevolencia-detail-view-step-body {
    padding-bottom: 0;
}

.benevolencia-detail-view-step-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.benevolencia-detail-view-step-meta {
    margin: 2px 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.benevolencia-detail-view-step--done .benevolencia-detail-view-step-marker {
    background: var(--color-success-600);
    border-color: var(--color-success-600);
    color: var(--color-text-on-primary);
}

.benevolencia-detail-view-step--current .benevolencia-detail-view-step-marker {
    background: var(--color-accent-100);
    border-color: var(--color-accent-500);
    color: var(--color-accent-800);
}

.benevolencia-detail-view-step--danger .benevolencia-detail-view-step-marker {
    background: var(--color-danger-600);
    border-color: var(--color-danger-600);
    color: var(--color-text-on-primary);
}

.benevolencia-detail-view-step--done .benevolencia-detail-view-step-line {
    background: var(--color-success-500);
}

/* Fila total en tablas (tfoot) */
.benevolencia-detail-view-total-row td,
.benevolencia-detail-view-total-row th {
    background: var(--color-primary-50);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    border-top: 2px solid var(--color-primary-200);
}

/* Estado vacio */
.benevolencia-detail-view-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-alt);
    text-align: center;
    color: var(--color-text-muted);
}

.benevolencia-detail-view-empty i {
    font-size: var(--font-size-4xl);
    color: var(--color-neutral-400);
}

.benevolencia-detail-view-empty strong {
    color: var(--color-text-secondary);
}

/* Galeria de sustentos */
.benevolencia-detail-view-foto-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Bloque de seccion dentro de modal (estado de recepcion) */
.benevolencia-detail-view-modal-section {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
}

.benevolencia-detail-view-modal-section-title {
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

@media (max-width: 767.98px) {
    .benevolencia-detail-view-stats,
    .benevolencia-detail-view-meta {
        grid-template-columns: 1fr;
    }
}

.btn-ver-caso i {
    font-size: var(--font-size-xs);
}

#historial-casos-table th:last-child,
#historial-casos-table td:last-child {
    text-align: center;
    padding: var(--space-2) var(--space-1);
}

#historial-casos-table .btn-sm {
    font-size: var(--font-size-xs);
    padding: 3px 6px;
}

.modal-confirmacion-crear .modal-dialog {
    max-width: 500px;
}

.modal-confirmacion-crear .modal-content {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal-confirmacion-crear .modal-header {
    background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-500) 100%);
    color: var(--color-text-on-primary);
    border-bottom: none;
    padding: 0;
    position: relative;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal-confirmacion-crear .modal-header .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    opacity: 0.8;
    transition: all var(--transition-base);
}

.modal-confirmacion-crear .modal-header .btn-close:hover {
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transform: rotate(90deg);
}

.modal-confirmacion-crear .modal-header .icon-container {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.modal-confirmacion-crear .modal-header .icon-container i {
    font-size: var(--font-size-3xl);
    color: var(--color-text-on-primary);
}

.modal-confirmacion-crear .modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.modal-confirmacion-crear .modal-body {
    padding: var(--space-8) var(--space-6);
    background: var(--bg-surface-alt);
}

.modal-confirmacion-crear .mensaje-principal {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    text-align: center;
}

.modal-confirmacion-crear .mensaje-secundario {
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
    text-align: center;
    line-height: var(--line-height-normal);
}

.modal-confirmacion-crear .info-adicional {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border-left: 4px solid var(--color-info-600);
}

.modal-confirmacion-crear .info-titulo {
    font-weight: var(--font-weight-semibold);
    color: var(--color-info-700);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.modal-confirmacion-crear .info-adicional ul {
    margin: 0;
    padding-left: var(--space-5);
}

.modal-confirmacion-crear .info-adicional li {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
    line-height: var(--line-height-snug);
}

.modal-confirmacion-crear .modal-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) var(--space-6);
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.modal-confirmacion-crear .btn-cancelar {
    background: var(--color-neutral-600);
    border: 1px solid var(--color-neutral-600);
    color: var(--color-text-on-primary);
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    justify-content: center;
}

.modal-confirmacion-crear .btn-cancelar:hover {
    background: var(--color-neutral-700);
    border-color: var(--color-neutral-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.modal-confirmacion-crear .btn-confirmar {
    background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-500) 100%);
    border: none;
    color: var(--color-text-on-primary);
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.modal-confirmacion-crear .btn-confirmar:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.modal-confirmacion-crear .btn-confirmar:active {
    transform: translateY(0);
}

.modal-confirmacion-crear .btn-confirmar.loading {
    pointer-events: none;
    opacity: 0.8;
}

.modal-confirmacion-crear .btn-confirmar.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: benevolencia-create-loading-shine 1.5s infinite;
}

@keyframes benevolencia-create-loading-shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.modal-confirmacion-crear.fade .modal-dialog {
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}

.modal-confirmacion-crear.show .modal-dialog {
    transform: scale(1);
}

@media (max-width: 767.98px) {
    .benevolencia-create-view-actions {
        justify-content: stretch !important;
    }

    .benevolencia-create-view-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .benevolencia-edit-view-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .benevolencia-edit-view-header-actions,
    .benevolencia-edit-view-status-actions {
        width: 100%;
    }

    .benevolencia-edit-view-header-actions .btn,
    .benevolencia-edit-view-status-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .benevolencia-detail-view-main-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .benevolencia-detail-view-header-actions {
        width: 100%;
    }

    .benevolencia-detail-view-header-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .modal-confirmacion-crear .modal-dialog {
        margin: var(--space-2);
        max-width: calc(100% - 16px);
    }

    .modal-confirmacion-crear .modal-body {
        padding: var(--space-5) var(--space-4);
    }

    .modal-confirmacion-crear .modal-footer {
        padding: var(--space-4);
        flex-direction: column;
    }

    .modal-confirmacion-crear .modal-footer .btn-cancelar,
    .modal-confirmacion-crear .modal-footer .btn-confirmar {
        flex: none;
        width: 100%;
    }

    .modal-confirmacion-crear .info-adicional {
        padding: var(--space-3);
    }
}

/* =============================================================
   Ministerios — Dashboard de gestión (rediseño UX)
   ============================================================= */

.ministerios-view {
    gap: var(--space-4);
}

.ministerios-view-message {
    margin-bottom: 0;
}

.ministerios-view-hero {
    border-color: var(--color-info-200);
    background: linear-gradient(138deg, var(--color-info-50) 0%, var(--bg-surface) 58%, var(--color-primary-50) 100%);
}

.ministerios-view-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.ministerios-view-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.ministerios-view-summary-card .card-body {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.ministerios-view-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.ministerios-view-summary-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    padding: var(--space-3) var(--space-4);
    display: grid;
    gap: var(--space-1);
}

.ministerios-view-summary-label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ministerios-view-summary-value {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-size: clamp(var(--font-size-xl), 2vw, var(--font-size-2xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.ministerios-view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.ministerios-view-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.ministerios-view-card .card-body {
    display: grid;
    gap: var(--space-3);
}

.ministerios-view-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.ministerios-view-card-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.ministerios-view-card-title a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.ministerios-view-card-title a:hover,
.ministerios-view-card-title a:focus-visible {
    color: var(--color-primary-700);
}

.ministerios-view-card-description {
    margin: 0;
    min-height: 3.1rem;
}

.ministerios-view-card-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.ministerios-view-metric {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    padding: var(--space-3);
}

.ministerios-view-metric-label {
    margin: 0 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ministerios-view-metric-value {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.ministerios-view-card-footer {
    background: transparent;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ministerios-view-card-footer .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.ministerios-view-empty-state .card-body {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

@media (max-width: 991.98px) {
    .ministerios-view-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ministerios-view-grid {
        grid-template-columns: 1fr;
    }

    .ministerios-view-hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .ministerios-view-summary-grid {
        grid-template-columns: 1fr;
    }

    .ministerios-view-card-metrics {
        grid-template-columns: 1fr;
    }

    .ministerios-view-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ministerios-view-card-header .btn {
        width: 100%;
        justify-content: center;
    }

    .ministerios-view-card-footer {
        justify-content: stretch;
    }

    .ministerios-view-card-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================
   Ministerios — vista de detalle (ver.php)
   Hero + tarjetas de equipo, agenda y formularios.
   ============================================================= */

.ministerios-detail-hero {
    border-color: var(--color-primary-200);
    background: linear-gradient(138deg, var(--color-primary-50) 0%, var(--bg-surface) 56%, var(--color-accent-50) 100%);
}

.ministerios-detail-view .card {
    margin-bottom: 0;
}

/* Encabezado de tarjeta con icono cuadrado pequeño + título */
.ministerios-detail-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.ministerios-detail-card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: var(--font-size-lg);
}

/* Switch alineado con texto claro */
.ministerios-detail-switch {
    padding: var(--space-2) 0;
}

/* Celda de miembro: avatar de iniciales + datos */
.ministerios-detail-member {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.ministerios-detail-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.ministerios-detail-avatar--coord {
    background: var(--color-accent-100);
    color: var(--color-accent-800);
}

.ministerios-detail-member-body {
    min-width: 0;
}

.ministerios-detail-member-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ministerios-detail-member-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* En móvil la tabla de miembros scrollea horizontalmente (ver .table-wrapper
   responsive); estos anchos mínimos mantienen usables las columnas que
   contienen inputs y textareas mientras se desplaza. */
@media (max-width: 991.98px) {
    .ministerios-detail-col-miembro { min-width: 220px; }
    .ministerios-detail-col-rol { min-width: 140px; }
    .ministerios-detail-col-ingreso { min-width: 130px; }
    .ministerios-detail-col-notas { min-width: 180px; }
}

/* Agenda (próximos servicios e historial) */
.ministerios-detail-agenda {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ministerios-detail-agenda-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ministerios-detail-agenda-item:hover {
    border-color: var(--color-primary-200);
    box-shadow: var(--shadow-xs);
}

.ministerios-detail-agenda-date {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ministerios-detail-agenda-resp {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.ministerios-detail-agenda-note {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Estado vacío compacto dentro de tarjetas */
.ministerios-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-secondary);
}

.ministerios-detail-empty i {
    font-size: var(--font-size-4xl);
    color: var(--color-neutral-300);
}

/* =============================================================
   Bitácora — Actas y tareas (rediseño UX)
   ============================================================= */

.bitacora-view {
    display: grid;
    gap: var(--space-4);
}

.bitacora-view-message {
    margin-bottom: 0;
}

.bitacora-view-hero {
    border-color: var(--color-primary-200);
    background: linear-gradient(142deg, var(--color-primary-50) 0%, var(--bg-surface) 55%, var(--color-info-50) 100%);
}

.bitacora-view-create-card {
    margin-bottom: 0;
}

.bitacora-view-create-card .card-body {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.bitacora-view-empty-state {
    border-style: dashed;
    border-color: var(--color-border-strong);
}

.bitacora-view-empty-state .card-body {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.bitacora-view-accordion {
    display: grid;
    gap: var(--space-3);
}

.bitacora-view-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.bitacora-view-item:hover {
    border-color: var(--color-primary-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.bitacora-view-item-toggle {
    padding: var(--space-5) var(--space-6);
    font-size: var(--font-size-base);
}

.bitacora-view-item-toggle:not(.collapsed) {
    background: linear-gradient(180deg, var(--color-primary-50), var(--bg-surface));
    border-bottom: 1px solid var(--color-primary-200);
    box-shadow: none;
}

.bitacora-view-item-toggle:focus {
    box-shadow: var(--shadow-focus);
    z-index: var(--z-base);
}

.bitacora-view-item-body {
    padding: var(--space-5);
}

.bitacora-view-actions {
    border-color: var(--color-border) !important;
}

.bitacora-view-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.bitacora-view-task-table thead th {
    white-space: nowrap;
}

.bitacora-view-col-tarea {
    min-width: 180px;
}

.bitacora-view-col-acciones {
    min-width: 220px;
}

.bitacora-view-col-comentario {
    min-width: 200px;
}

.bitacora-view-task-table td {
    vertical-align: top;
}

@media (max-width: 991.98px) {
    .bitacora-view-item-toggle {
        padding: var(--space-4) var(--space-5);
    }

    .bitacora-view-item-body {
        padding: var(--space-4);
    }
}

@media (max-width: 767.98px) {
    .bitacora-view-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* -------------------------------------------------------------
   Bitácora — Gestionar tareas (editar.php)
   Movido desde el <style> inline del archivo y tokenizado (V141).
   Scoped a #accordionTareas y a los selects de responsables para
   no alterar acordeones/badges de otras vistas.
   ------------------------------------------------------------- */

.bitacora-select-responsables {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.bitacora-select-responsables:focus {
    border-color: var(--color-primary-interactive);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.bitacora-select-responsables option {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin: 2px 0;
    cursor: pointer;
}

.bitacora-select-responsables option:hover {
    background-color: var(--color-primary-50);
    color: var(--color-primary-interactive);
}

.bitacora-select-responsables option:checked {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
    color: var(--color-neutral-0);
    font-weight: var(--font-weight-medium);
}

.modal-select-multiple {
    min-height: 200px;
}

/* En celular el modal scrollea (modal-dialog-scrollable): limitar la lista
   para que los botones del modal queden alcanzables sin scroll excesivo. */
@media (max-width: 575.98px) {
    .modal-select-multiple {
        min-height: 0;
        max-height: 40vh;
    }
}

#accordionTareas .accordion-item {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

#accordionTareas .accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
}

#accordionTareas .accordion-button {
    font-size: var(--font-size-base);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
}

#accordionTareas .accordion-button:not(.collapsed) {
    box-shadow: none;
}

#accordionTareas .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

#accordionTareas .border-start {
    border-left-width: 5px !important;
}

#accordionTareas .badge {
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.3px;
}

/* =============================================================
   Footer
   ============================================================= */

footer {
    margin: 0 2rem 1.5rem;
    padding: 1rem 0 0.5rem;
    color: var(--color-text-muted);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* =============================================================
   Responsive Design
   ============================================================= */

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .app-topbar {
        margin: var(--space-4);
    }

    .content-wrapper {
        padding: var(--space-5) var(--space-4);
    }

    /* En pantallas angostas el wrapper de tabla pasa a ser contenedor de
       scroll horizontal: sin esto, overflow:hidden recorta las tablas anchas
       y las vuelve inutilizables en celular. En desktop se mantiene hidden
       para conservar el recorte de las esquinas redondeadas. */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767.98px) {
    .app-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    /* El bloque de título crece a 3 líneas (badge de 2 + heading); alinear el
       botón al inicio lo deja a la altura del badge en vez de flotando al medio. */
    .topbar-pane {
        align-items: flex-start;
    }

    .topbar-meta {
        font-size: var(--font-size-xs);
    }

    .topbar-title span {
        font-size: var(--font-size-sm);
        letter-spacing: 0.06em;
    }

    .topbar-title h1 {
        font-size: var(--font-size-xl);
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .page-header-actions {
        flex-wrap: wrap;
    }

    .page-title {
        font-size: var(--font-size-2xl);
    }

    footer {
        margin: 0 var(--space-4) var(--space-4);
    }
}

/* ==========================================================================
   MÓDULO DIRECTORIO (movido desde <style> inline en index.php — V91)
   Flashcards, filas agrupadas, anchos de columna y botones de acción.
   ========================================================================== */

/* Header colapsable de filtros (directorio) */
.collapsible-header-toggle {
    width: 100%;
    border: 0;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-info-600);
    color: var(--color-neutral-0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
}

.collapsible-header-toggle:hover,
.collapsible-header-toggle.is-expanded {
    background-color: var(--color-info-700);
    color: var(--color-neutral-0);
}

.collapsible-header-toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-neutral-0), var(--shadow-focus);
}

.collapsible-header-toggle-title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.collapsible-header-toggle-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

/* Flashcards (directorio) */

.flashcard {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 2px solid transparent;
    height: 100%;
    min-height: 140px;
}

.flashcard.clickeable {
    cursor: pointer;
}

.flashcard.clickeable:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.flashcard.active {
    border-color: var(--color-primary-500);
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%);
}

/* ── Galería de fotos del Directorio (Blossom Carousel + dots) ─────── */
/* Tokens de los dots de Blossom (heredan desde la tarjeta contenedora). */
.directorio-galeria {
    --blossom-dot-color: var(--color-primary-500);
    --blossom-dot-size: 0.75rem;
    --blossom-dots-gap: var(--space-2);
    --blossom-dot-opacity: 0.3;
    --blossom-dot-hover-opacity: 0.6;
    --blossom-dot-active-opacity: 1;
}

/* El propio <blossom-carousel> maneja el scroll/snap nativo; aquí solo
   damos tamaño y separación a cada diapositiva. */
.directorio-slide {
    inline-size: clamp(150px, 45vw, 200px);
    margin-inline-end: var(--space-4);
    scroll-snap-align: center;
    white-space: normal;
}

.directorio-slide-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text-primary);
}

.directorio-slide-img {
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--color-neutral-100);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.directorio-slide-link:hover .directorio-slide-img,
.directorio-slide-link:focus-visible .directorio-slide-img {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.directorio-slide-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    line-height: var(--line-height-tight);
}

.directorio-carousel-dots {
    margin-top: var(--space-4);
    color: var(--color-primary-500);
}

@media (prefers-reduced-motion: reduce) {
    .directorio-slide-img {
        transition: none;
    }
    .directorio-slide-link:hover .directorio-slide-img,
    .directorio-slide-link:focus-visible .directorio-slide-img {
        transform: none;
    }
}

.flashcard-icon {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
}

.flashcard-number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin: 0.25rem 0;
}

.flashcard-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
    color: var(--color-text-secondary);
}

.flashcard-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.2;
}

.flashcard-primary .flashcard-icon,
.flashcard-primary .flashcard-number { color: var(--color-primary-600); }

.flashcard-success .flashcard-icon,
.flashcard-success .flashcard-number { color: var(--color-success-600); }

.flashcard-info .flashcard-icon,
.flashcard-info .flashcard-number { color: var(--color-info-600); }

.flashcard-warning .flashcard-icon,
.flashcard-warning .flashcard-number { color: var(--color-warning-700); }

.flashcard-danger .flashcard-icon,
.flashcard-danger .flashcard-number { color: var(--color-danger-600); }

.flashcard-secondary .flashcard-icon,
.flashcard-secondary .flashcard-number { color: var(--color-neutral-500); }

/* Filas de tabla (directorio) */
.miembro-row {
    background-color: var(--bg-surface);
}

/* Miembro principal: toda la fila en azul tenue para distinguirla de familiares */
.miembro-row.fila-principal > td {
    background-color: var(--color-primary-50) !important;
}

.miembro-row.fila-principal > td:first-child {
    border-left: 3px solid var(--color-primary-500);
}

.miembro-row.fila-principal:hover > td {
    background-color: var(--color-primary-100) !important;
}

/* Nombre del miembro principal en azul negrita (sin estilo de badge) */
.miembro-row.fila-principal td:nth-child(2) > strong {
    color: var(--color-primary-800);
    font-weight: var(--font-weight-bold);
}

.miembro-row.fila-principal:hover td:nth-child(2) > strong {
    color: var(--color-primary-900);
}

.btn-family-toggle {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary-300);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
}

.btn-family-toggle:hover {
    background: var(--color-primary-200);
    border-color: var(--color-primary-400);
    color: var(--color-primary-800);
    transform: translateY(-1px);
}

.btn-family-toggle:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.btn-family-toggle.is-collapsed {
    background: var(--color-neutral-100);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.btn-family-toggle-all {
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-primary-300);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
}

.btn-family-toggle-all:hover {
    background: var(--color-primary-100);
    border-color: var(--color-primary-400);
    color: var(--color-primary-800);
    transform: translateY(-1px);
}

.btn-family-toggle-all:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.btn-family-toggle-all.is-collapsed {
    background: var(--color-neutral-100);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* Encabezados ordenables: control clickeable con presencia (asc/desc) */
.th-sortable { white-space: nowrap; }

.th-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.th-sort-btn:hover {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-300);
    color: var(--color-text-primary);
}

.th-sort-btn:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.th-sort-btn.is-active {
    background: var(--color-primary-50);
    border-color: var(--color-primary-300);
    color: var(--color-primary-700);
}

.th-sort-icon {
    font-size: var(--font-size-sm);
    opacity: 0.55;
}

.th-sort-btn.is-active .th-sort-icon {
    opacity: 1;
}

/* Familiares del mismo grupo: fondo neutro con acento sutil para agrupar */
.grupo-familiar {
    background-color: var(--bg-surface);
    border-left: 3px solid var(--color-primary-200);
}

.grupo-familiar:hover {
    background-color: var(--bg-surface-alt);
}

.miembro-row:hover {
    background-color: var(--bg-surface-alt);
}

/* Filas marcadas "Por verificar": sombreado rojo con franja de acento a la
   izquierda. Usa !important porque la fila principal pinta su fondo azul con
   !important; al ir después en la hoja, el rojo gana sobre azul y blanco. */
.miembro-row.fila-por-verificar > td {
    background-color: var(--color-danger-50) !important;
}

.miembro-row.fila-por-verificar:hover > td {
    background-color: var(--color-danger-100) !important;
}

.miembro-row.fila-por-verificar > td:first-child {
    border-left-color: var(--color-danger-500) !important;
    box-shadow: inset 4px 0 0 var(--color-danger-500);
}

/* Familiar marcado: su franja izquierda (border del tr) también en rojo */
.miembro-row.fila-por-verificar {
    border-left-color: var(--color-danger-500) !important;
}

/* Switch "Verificar datos" en la columna de acciones */
.chk-verificar-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-height: auto;
    padding-left: 0;
}

.chk-verificar-wrap .form-check-input {
    float: none;
    margin: 0;
    cursor: pointer;
}

.chk-verificar-wrap .form-check-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.miembro-row.fila-por-verificar .chk-verificar-wrap .form-check-label {
    color: var(--color-danger-600);
    font-weight: var(--font-weight-semibold);
}

/* Anchos de columna y truncados (sustituyen estilos inline) */
.th-tipo { min-width: 50px; }
.th-nombre { min-width: 240px; }
.th-estado { min-width: 120px; }
.th-edad { min-width: 90px; }
.th-contacto { min-width: 150px; }
.th-direccion { min-width: 190px; }
.th-acciones { min-width: 110px; }
.cell-truncate { max-width: 200px; }
.cell-truncate-email { max-width: 180px; }
.empty-state-icon { font-size: 3rem; }

/* Badge neutro para bautismo "no bautizado" */
.badge.bg-neutral {
    background-color: var(--color-neutral-500) !important;
    color: var(--color-text-on-primary);
}

/* Botones de acciones (directorio) — solidos tokenizados */
.btn-action {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
}

.btn-action i {
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Boton Ver - slate blue */
.btn-action-view {
    background: var(--color-primary-interactive);
    color: var(--color-text-on-primary);
}

.btn-action-view:hover {
    background: var(--color-primary-interactive-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-text-on-primary);
}

/* Boton Editar - amber */
.btn-action-edit {
    background: var(--color-warning-500);
    color: var(--color-warning-800);
}

.btn-action-edit:hover {
    background: var(--color-warning-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-text-on-primary);
}

/* Boton Familia - verde */
.btn-action-family {
    background: var(--color-success-600);
    color: var(--color-text-on-primary);
}

.btn-action-family:hover {
    background: var(--color-success-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-text-on-primary);
}

/* Boton Eliminar - rojo */
.btn-action-delete {
    background: var(--color-danger-600);
    color: var(--color-text-on-primary);
}

.btn-action-delete:hover {
    background: var(--color-danger-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-text-on-primary);
}

/* -------------------------------------------------------------
   Vista compacta del Directorio: oculta columnas secundarias
   (.col-extra: Asistencia, Bautismo, Edad, Miembro desde, Dirección)
   y comprime el padding de las celdas para mayor densidad.
   El toggle lo controla JS añadiendo .vista-compacta a #tabla-directorio.
   ------------------------------------------------------------- */
#tabla-directorio.vista-compacta .col-extra {
    display: none;
}

#tabla-directorio.vista-compacta tbody td,
#tabla-directorio.vista-compacta thead th {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* Nombre clicable: lleva al detalle del miembro (ver.php). Hereda
   el color del texto para no parecer un link "azul" en la tabla,
   y solo se subraya/colorea al hover o foco. */
#tabla-directorio td.td-nombre .nombre-link {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

#tabla-directorio td.td-nombre .nombre-link:hover {
    color: var(--color-primary-interactive);
    text-decoration: underline;
}

#tabla-directorio td.td-nombre .nombre-link:focus-visible {
    outline: none;
    color: var(--color-primary-interactive);
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------
   Directorio en celular: tabla → tarjetas apiladas (V141)
   Las 11 columnas con scroll horizontal eran inusables en 375px.
   En <768px cada <tr> se vuelve una tarjeta en grilla de 2 columnas:
   nombre como título, estados como chips etiquetados, datos con
   etiqueta via data-label, acciones como botones táctiles anchos.
   CSS-only: el DOM no cambia, así filtros y toggles de familia
   (que usan .d-none por fila) siguen funcionando intactos.
   ------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
    #tabla-directorio .table-responsive {
        overflow: visible;
    }

    #tabla-directorio table,
    #tabla-directorio tbody {
        display: block;
        width: 100%;
    }

    #tabla-directorio thead {
        display: none;
    }

    #tabla-directorio tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
        margin: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
        box-shadow: var(--shadow-xs);
    }

    /* Miembros principales: acento primario en la tarjeta completa (el tinte
       por celda de .fila-principal > td es para la vista de tabla en desktop) */
    #tabla-directorio tbody tr.fila-principal {
        border-left: 3px solid var(--color-primary-500);
    }

    #tabla-directorio tbody tr.miembro-row > td {
        background-color: transparent !important;
    }

    /* Familiares: tarjeta indentada con acento, conserva la jerarquía visual */
    #tabla-directorio tbody tr[data-parent-id] {
        margin-left: var(--space-6);
        border-left: 3px solid var(--color-primary-300);
        background: var(--bg-surface-alt);
    }

    #tabla-directorio tbody td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none; /* anula el inset del hover de .table-hover */
    }

    /* El badge de tipo es redundante: la tarjeta de familiar ya se
       distingue por indentación, acento y el texto "X de Y". */
    #tabla-directorio td.td-tipo {
        display: none;
    }

    /* Celdas a todo el ancho de la tarjeta */
    #tabla-directorio td.td-nombre,
    #tabla-directorio td.td-contacto,
    #tabla-directorio td.td-direccion,
    #tabla-directorio td.td-acciones {
        grid-column: 1 / -1;
    }

    #tabla-directorio td.td-nombre {
        font-size: var(--font-size-lg);
        line-height: var(--line-height-tight);
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--color-border);
    }

    /* Dentro de la tarjeta de familiar la indentación interna sobra */
    #tabla-directorio td.td-nombre .ms-3 {
        margin-left: 0 !important;
    }

    #tabla-directorio td.td-nombre .ms-4 {
        margin-left: var(--space-5) !important;
    }

    /* Etiqueta de campo (Estado, Asistencia, Edad, …) sobre el valor */
    #tabla-directorio td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--space-1);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
    }

    /* Sin truncados en tarjeta: el dato completo es el objetivo */
    #tabla-directorio .cell-truncate,
    #tabla-directorio .cell-truncate-email {
        max-width: none;
        white-space: normal !important;
        overflow: visible;
        text-overflow: clip;
    }

    /* Acciones: botones táctiles anchos (≥44px) al pie de la tarjeta */
    #tabla-directorio td.td-acciones {
        padding-top: var(--space-2);
        border-top: 1px solid var(--color-border);
    }

    #tabla-directorio td.td-acciones .d-flex {
        gap: var(--space-3) !important;
    }

    #tabla-directorio td.td-acciones .btn-action {
        flex: 1 1 auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ---- Lista compacta + expandir detalles por miembro (móvil) ----------
       Cada tarjeta arranca colapsada mostrando solo el nombre; el botón
       .btn-card-toggle revela el resto de los campos (estado, asistencia,
       contacto, acciones, …). El DOM no cambia: filtros y toggles de familia
       siguen operando por fila. -------------------------------------------- */
    #tabla-directorio tbody tr:not(.card-expandida) td:not(.td-nombre) {
        display: none;
    }

    /* Reservar el hueco del botón para que el nombre no quede debajo de él */
    #tabla-directorio td.td-nombre {
        position: relative;
        padding-right: 48px;
    }

    /* Colapsada: el nombre es la tarjeta entera, sin separador inferior */
    #tabla-directorio tbody tr:not(.card-expandida) td.td-nombre {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .btn-card-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-primary-200);
        border-radius: var(--radius-md);
        background: var(--color-primary-50);
        color: var(--color-primary-700);
        font-size: var(--font-size-lg);
        cursor: pointer;
        transition: background var(--transition-fast);
    }

    .btn-card-toggle:hover {
        background: var(--color-primary-100);
    }

    .btn-card-toggle:focus-visible {
        outline: none;
        box-shadow: var(--shadow-focus);
    }

    .btn-card-toggle i {
        transition: transform var(--transition-base);
    }

    #tabla-directorio tr.card-expandida .btn-card-toggle i {
        transform: rotate(180deg);
    }

    /* Título del encabezado en una sola línea en móvil */
    #tabla-directorio .card-header h5 {
        font-size: var(--font-size-sm);
        white-space: nowrap;
    }
}

/* Encabezado del documento — oculto en pantalla, visible al imprimir */
.print-header {
    display: none;
}

/* Vista de impresión / Guardar como PDF del directorio (V91) */
@media print {
    /* Aislar la card de la tabla: ocultar todo lo demás de la página */
    body * {
        visibility: hidden;
    }

    #tabla-directorio,
    #tabla-directorio * {
        visibility: visible;
    }

    #tabla-directorio {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        box-shadow: none;
        border: none;
        /* Conservar colores de badges y fila principal en el PDF */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* La barra azul del card-header no aporta en papel */
    #tabla-directorio .card-header {
        display: none;
    }

    /* Encabezado institucional del PDF */
    .print-header {
        display: block;
        text-align: center;
        margin-bottom: var(--space-4);
        color: var(--color-text-primary);
    }

    .print-header h2 {
        font-size: 16pt;
        margin: 0 0 var(--space-1);
    }

    .print-header p {
        font-size: 11pt;
        margin: 0;
    }

    .print-header .print-meta {
        font-size: 9pt;
        color: var(--color-text-secondary);
    }

    /* Quitar la columna de acciones (botones no sirven en papel) */
    #tabla-directorio .th-acciones,
    #tabla-directorio .td-acciones {
        display: none;
    }

    /* En PDF salen todas las columnas aunque esté activa la vista compacta */
    #tabla-directorio.vista-compacta .col-extra {
        display: table-cell !important;
    }

    /* En PDF deben salir todos los familiares aunque en pantalla estén colapsados */
    #tabla-directorio tr[data-parent-id] {
        display: table-row !important;
    }

    #tabla-directorio .btn-family-toggle {
        display: none !important;
    }

    #tabla-directorio .btn-family-toggle-all {
        display: none !important;
    }

    /* Tipografía compacta y ancho completo para que la tabla quepa en la hoja.
       table-layout: fixed + anchos por columna reparten el espacio de forma
       predecible (sin esto las 11 columnas se desbordan o se descuadran). */
    #tabla-directorio table {
        font-size: 7.5pt;
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    /* Anular los min-width de pantalla: en papel las columnas se reparten el
       ancho de la página y el texto largo hace wrap en vez de desbordarse. */
    #tabla-directorio th,
    #tabla-directorio td {
        min-width: 0;
        white-space: normal;
        word-break: break-word;
        vertical-align: top;
        padding: 3px 4px;
        border: 0.5pt solid var(--color-neutral-300);
    }

    /* Repetir el encabezado de la tabla en cada hoja y no cortar filas a la mitad */
    #tabla-directorio thead {
        display: table-header-group;
    }

    #tabla-directorio tbody tr {
        page-break-inside: avoid;
    }

    /* Badges como texto compacto: conservan color pero sin el "globo" que
       desperdicia ancho en papel */
    #tabla-directorio .badge {
        padding: 0 2px;
        font-size: 7pt;
        font-weight: var(--font-weight-semibold);
        white-space: nowrap;
    }

    /* Anchos por columna (suman ~96%; "Acciones" va oculta). Nombre y Dirección
       reciben el mayor reparto por ser los campos más largos. */
    #tabla-directorio thead th:nth-child(1)  { width: 4%; }   /* Tipo */
    #tabla-directorio thead th:nth-child(2)  { width: 18%; }  /* Nombre completo */
    #tabla-directorio thead th:nth-child(3)  { width: 7%; }   /* Estado */
    #tabla-directorio thead th:nth-child(4)  { width: 6%; }   /* Asistencia */
    #tabla-directorio thead th:nth-child(5)  { width: 7%; }   /* Membresía */
    #tabla-directorio thead th:nth-child(6)  { width: 7%; }   /* Bautismo */
    #tabla-directorio thead th:nth-child(7)  { width: 6%; }   /* Edad */
    #tabla-directorio thead th:nth-child(8)  { width: 10%; }  /* Miembro desde */
    #tabla-directorio thead th:nth-child(9)  { width: 9%; }   /* Fecha de registro */
    #tabla-directorio thead th:nth-child(10) { width: 9%; }   /* Contacto */
    #tabla-directorio thead th:nth-child(11) { width: 13%; }  /* Dirección */

    /* Mostrar dirección y email completos (sin truncar) en impresión */
    #tabla-directorio .cell-truncate,
    #tabla-directorio .cell-truncate-email {
        max-width: none;
        white-space: normal;
        overflow: visible;
    }

    .table-responsive {
        overflow: visible;
    }

    @page {
        size: landscape;
        margin: 1cm;
    }
}

/* =============================================================
   Directorio — Índice alfabético (filtro por inicial del nombre)
   Barra segmentada bajo el encabezado de la tabla. Filtra grupos
   (principal + familiares) en cliente vía .fila-fuera-letra.
   ============================================================= */

.directorio-az-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.directorio-az-btn {
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
}

.directorio-az-btn:hover:not(:disabled):not(.is-active) {
    background: var(--color-primary-50);
    border-color: var(--color-primary-300);
    color: var(--color-primary-700);
    transform: translateY(-1px);
}

.directorio-az-btn:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.directorio-az-btn.is-active {
    background: var(--color-primary-interactive);
    border-color: var(--color-primary-interactive);
    color: var(--color-text-inverse);
}

.directorio-az-btn:disabled {
    background: var(--bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Filas fuera de la inicial seleccionada. Clase propia para no chocar con el
   .d-none del colapso de familiares ni con los filtros del servidor. */
#tabla-directorio tr.fila-fuera-letra {
    display: none;
}

@media print {
    /* La barra no se imprime; lo oculto por inicial tampoco aparece (aun con la
       regla que fuerza visibles a los familiares en papel). */
    .directorio-az-bar {
        display: none !important;
    }

    #tabla-directorio tr.fila-fuera-letra {
        display: none !important;
    }
}

/* =============================================================
   LOGIN — Pantalla de acceso (V107, 2026-05-31)
   Layout split: panel de marca (slate blue) + panel de formulario.
   Página standalone (no usa header/sidebar). 100% tokenizado.
   ============================================================= */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    background:
        radial-gradient(900px circle at 12% 10%, rgba(30, 64, 175, 0.10), transparent 45%),
        radial-gradient(720px circle at 92% 92%, rgba(245, 158, 11, 0.10), transparent 45%),
        linear-gradient(140deg, var(--color-primary-50) 0%, var(--color-neutral-100) 55%, var(--color-accent-50) 100%);
}

.login-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: 100%;
    max-width: 960px;
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* ----- Panel de marca (izquierda) ----- */
.login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-10);
    color: var(--color-text-inverse);
    /* La mitad superior queda en --color-primary-850 PLANO: es el mismo color
       que el sidebar y que el fondo horneado del PNG del logo, así el logo funde
       sin recuadro. El degradado a primary-900 y el glow ámbar viven en la mitad
       inferior, lejos del logo, para no aclarar su zona. */
    background:
        radial-gradient(650px circle at 78% 118%, rgba(245, 158, 11, 0.16), transparent 58%),
        linear-gradient(180deg, var(--color-primary-850) 0%, var(--color-primary-850) 52%, var(--color-primary-900) 100%);
    overflow: hidden;
}

/* Aro decorativo amber, esquina inferior izquierda */
.login-brand::after {
    content: "";
    position: absolute;
    left: calc(var(--space-10) * -1);
    bottom: calc(var(--space-12) * -1);
    width: 220px;
    height: 220px;
    border: 2px solid var(--color-accent-400);
    border-radius: var(--radius-full);
    opacity: 0.18;
    pointer-events: none;
}

.login-brand-top {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.login-brand-logo {
    width: 184px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.login-brand-logo-fallback {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    color: var(--color-text-inverse);
}

.login-brand-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: rgba(252, 211, 77, 0.16);
    color: var(--color-accent-200);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.login-brand-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-inverse);
}

.login-brand-subtitle {
    margin: var(--space-3) 0 0;
    color: var(--color-primary-100);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    max-width: 38ch;
}

/* ----- Panel de formulario (derecha) ----- */
.login-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-10);
}

.login-form-header {
    margin-bottom: var(--space-6);
}

.login-form-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
}

.login-form-subtitle {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.login-form .form-group {
    margin-bottom: var(--space-5);
}

/* Campo con icono guía a la izquierda */
.login-field {
    position: relative;
}

.login-field-icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    pointer-events: none;
}

.login-field .form-control {
    padding-left: var(--space-10);
}

/* Campo de contraseña: deja sitio al toggle a la derecha */
.login-field--password .form-control {
    padding-right: var(--space-10);
}

.login-toggle-password {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.login-toggle-password:hover {
    color: var(--color-text-primary);
    background: var(--color-neutral-100);
}

.login-toggle-password:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* reCAPTCHA centrado */
.login-recaptcha {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}

/* El widget de reCAPTCHA v2 mide ~304px fijos: en pantallas de 375px con el
   padding de la card queda sin margen o desborda. Se escala levemente. */
@media (max-width: 480px) {
    .login-recaptcha > div,
    .public-form-recaptcha > div {
        transform: scale(0.88);
        transform-origin: center top;
    }
}

.login-submit {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
}

.login-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* ----- Entrada animada (respeta reduced-motion globalmente) ----- */
.login-shell {
    animation: login-rise var(--transition-slow) ease-out both;
}

@keyframes login-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ----- Responsive: una sola columna ----- */
@media (max-width: 860px) {
    .login-shell {
        grid-template-columns: 1fr;
        max-width: 460px;
    }

    /* Banda superior: columna centrada (logo, badge y título al centro) */
    .login-brand {
        align-items: center;
        text-align: center;
        gap: var(--space-3);
        padding: var(--space-8) var(--space-6);
    }

    .login-brand::after {
        display: none;
    }

    /* Ancho completo + centrado: el logo queda al CENTRO en móvil (no a la
       izquierda como en escritorio). */
    .login-brand-top {
        width: 100%;
        align-items: center;
        text-align: center;
        gap: var(--space-3);
    }

    .login-brand-logo {
        width: 150px;
        align-self: center;
        margin-inline: auto;
    }

    .login-brand-kicker {
        align-self: center;
    }

    .login-brand-subtitle {
        display: none;
    }

    .login-form-panel {
        padding: var(--space-8) var(--space-6);
    }
}

/* =====================================================================
   FORMULARIO PÚBLICO DE BENEVOLENCIA (formularios/formulario.php)
   Página pública sin login, shell propio (misma convención que .login-*).
   ===================================================================== */

.public-form-page {
    min-height: 100vh;
    padding: var(--space-8) var(--space-4);
    background:
        radial-gradient(900px circle at 12% 8%, rgba(30, 64, 175, 0.08), transparent 45%),
        radial-gradient(720px circle at 92% 96%, rgba(245, 158, 11, 0.08), transparent 45%),
        linear-gradient(140deg, var(--color-primary-50) 0%, var(--color-neutral-100) 55%, var(--color-accent-50) 100%);
}

.public-form-shell {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ----- Encabezado de marca ----- */
.public-form-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.public-form-logo {
    width: 132px;
    max-width: 60%;
    height: auto;
    object-fit: contain;
    margin-bottom: var(--space-2);
}

.public-form-logo-fallback {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-700);
}

.public-form-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-interactive);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.public-form-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.public-form-subtitle {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

/* ----- Tarjetas ----- */
.public-form-card {
    margin: 0;
}

/* Más aire dentro de cada tarjeta para que el contenido no se sienta apiñado. */
.public-form-card .card-body {
    padding: var(--space-8);
}

.public-form-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.public-form-section-title i {
    color: var(--color-primary-interactive);
}

/* Separación generosa entre campos del formulario. */
.public-form-card form .mb-3 {
    margin-bottom: var(--space-6);
}

.public-form-card .form-label {
    margin-bottom: var(--space-2);
}

.public-form-card .form-text {
    margin-top: var(--space-2);
}

/* ----- Directrices ----- */
.public-form-guidelines-list {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.public-form-guidelines-list li {
    padding-left: var(--space-2);
}

/* ----- Marca de campo obligatorio ----- */
.public-form-req {
    color: var(--color-danger-600);
    font-weight: var(--font-weight-bold);
}

/* ----- Honeypot anti-bot: oculto a humanos y lectores de pantalla ----- */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----- reCAPTCHA + envío ----- */
.public-form-recaptcha {
    display: flex;
    justify-content: center;
    margin: var(--space-5) 0;
}

.public-form-submit {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
}

/* ----- Lista de errores en alerta ----- */
.public-form-error-list {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-5);
}

/* ----- Pantalla de éxito ----- */
.public-form-success .card-body {
    text-align: center;
    padding: var(--space-10) var(--space-6);
}

.public-form-success-icon {
    font-size: var(--font-size-5xl);
    color: var(--color-success-600);
    line-height: 1;
}

.public-form-success-title {
    margin: var(--space-4) 0 var(--space-2);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.public-form-success-text {
    margin: 0 auto var(--space-6);
    max-width: 46ch;
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* ----- Pie ----- */
.public-form-footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.public-form-footer p {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

@media (max-width: 600px) {
    .public-form-title {
        font-size: var(--font-size-2xl);
    }

    /* En móvil, padding interno más contenido para no desperdiciar ancho. */
    .public-form-card .card-body {
        padding: var(--space-5);
    }
}

/* =====================================================================
   FICHA DE REGISTRO DEL DIRECTORIO (formularios/ficha_directorio.php)
   Reutiliza el shell .public-form-* pero necesita más ancho (familiares)
   y bloques propios: familiares dinámicos, consentimiento y foto.
   ===================================================================== */

/* La ficha tiene muchos más campos que benevolencia: shell más ancho. */
.public-form-shell-wide {
    max-width: 880px;
}

/* Texto de ayuda dentro de una sección (no pegado a un input). */
.ficha-help-text {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* ----- Familiar (cada bloque repetible) ----- */
.ficha-familiar {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    background: var(--color-neutral-50);
}

.ficha-familiar-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    float: none;
    margin-bottom: var(--space-4);
    padding: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ficha-familiar-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-primary-interactive);
    color: var(--color-neutral-0);
    font-size: var(--font-size-sm);
}

.ficha-familiar-add {
    width: 100%;
}

/* ----- Foto familiar: vista previa antes de enviar ----- */
.ficha-foto-preview {
    margin-top: var(--space-3);
}

.ficha-foto-preview img {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* ----- Texto del consentimiento (Ley 81) ----- */
.ficha-consent-text {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    border-left: 3px solid var(--color-primary-interactive);
    background: var(--color-primary-50);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* =====================================================================
   BANDEJA DE FICHAS RECIBIDAS (modules/directorio/solicitudes.php)
   ===================================================================== */

.fichas-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.fichas-tab {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.fichas-tab:hover {
    background: var(--color-neutral-200);
    color: var(--color-text-primary);
}

.fichas-tab.is-active {
    background: var(--color-primary-interactive);
    color: var(--color-neutral-0);
}

.fichas-card {
    margin-bottom: var(--space-5);
}

.fichas-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.fichas-card-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.fichas-card-meta {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.fichas-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: var(--space-5);
    align-items: start;
}

.fichas-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
    margin: 0;
}

.fichas-dl dt {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.fichas-dl dd {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    word-break: break-word;
}

.fichas-foto img {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.fichas-subtitulo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.fichas-consent {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.fichas-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .fichas-grid {
        grid-template-columns: 1fr;
    }

    .fichas-dl {
        grid-template-columns: 1fr;
    }

    .fichas-foto {
        max-width: 260px;
    }
}

/* ----- Wizard de conversión ficha → miembro ----- */

/* El wizard envuelve header/body/footer dentro de un <form>. Para que
   modal-dialog-scrollable mantenga el footer (botón Finalizar) fijo y visible
   —y el cuerpo scrollee internamente en pasos altos como Familiares—, el <form>
   debe ser la columna flex que normalmente es .modal-content. Sin esto, en el
   paso 2 el form crece y empuja el footer fuera de la pantalla. */
#wizardModal #wizard-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

#wizardModal #wizard-form .modal-body {
    min-height: 0;
}

/* Espejo del Directorio: diff por campo cuando el miembro ya existe (modo actualización).
   Verde = igual; amarillo = distinto (se sobrescribe); rojo = estaba vacío (dato nuevo). */
.wiz-diff-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}

.wiz-diff-leyenda-titulo {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.wiz-diff-sep {
    color: var(--color-text-muted);
}

.form-control.wiz-diff-igual,
.form-select.wiz-diff-igual {
    border-color: var(--color-success-500);
    background-color: var(--color-success-50);
}

.form-control.wiz-diff-distinto,
.form-select.wiz-diff-distinto {
    border-color: var(--color-warning-500);
    background-color: var(--color-warning-50);
}

.form-control.wiz-diff-nuevo,
.form-select.wiz-diff-nuevo {
    border-color: var(--color-danger-500);
    background-color: var(--color-danger-50);
}

.wizard-familiar-nuevo {
    border-left: 3px solid var(--color-danger-500);
}

.wizard-familiar-nuevo .wizard-familiar-legend::after {
    content: "Nuevo familiar";
    margin-left: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--color-danger-100);
    color: var(--color-danger-700);
}

.wizard-steps {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-neutral-100);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.wizard-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: var(--radius-full);
    background: var(--color-neutral-300);
    color: var(--color-neutral-0);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.wizard-step.is-active {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.wizard-step.is-active span {
    background: var(--color-primary-interactive);
}

.wizard-subtitulo {
    display: flex;
    align-items: center;
    margin: var(--space-4) 0 var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.wizard-familiar {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    background: var(--color-neutral-50);
}

.wizard-familiar-legend {
    width: 100%;
    float: none;
    margin-bottom: var(--space-3);
    padding: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* =====================================================================
   REGISTRO DE SEGUIMIENTO (modules/seguimiento/)
   Listado de inactivos en seguimiento + bitácora de contactos por persona.
   ===================================================================== */

/* Variante de KPI faltante en la paleta base. */
.kpi-icon--warning { background: var(--color-warning-100); color: var(--color-warning-800); }

.seguimiento-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-3);
    color: var(--color-text-muted);
}

.seguimiento-empty i {
    font-size: var(--font-size-4xl);
    color: var(--color-neutral-300);
}

/* Celda "Persona" del listado */
.seguimiento-persona-nombre {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-right: var(--space-2);
}

.seguimiento-familia {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* -------------------------------------------------------------
   Seguimiento en celular: tablas → tarjetas apiladas.
   Mismo patrón CSS-only que Directorio y Asistencia (el DOM no
   cambia). Cada <tr> es una tarjeta: Persona como título, el resto
   etiquetado con data-label, acciones como botones táctiles al pie.
   Resuelve el desborde horizontal (la columna Motivo se cortaba).
   ------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
    .tabla-seguimiento,
    .tabla-seguimiento tbody {
        display: block;
        width: 100%;
    }

    .tabla-seguimiento thead {
        display: none;
    }

    .tabla-seguimiento tbody tr {
        display: block;
        margin-bottom: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
        box-shadow: var(--shadow-xs);
    }

    .tabla-seguimiento tbody td {
        display: block;
        padding: var(--space-2) 0 0;
        border: 0;
        text-align: left !important; /* anula .text-center / .text-end de la tabla */
    }

    /* Persona = título de la tarjeta */
    .tabla-seguimiento td.td-seg-persona {
        padding-top: 0;
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-1);
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-lg);
    }

    /* Etiqueta del campo (Inactivo desde, Motivo, Estado, …) sobre el valor */
    .tabla-seguimiento td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--space-1);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
    }

    /* Acciones: botones táctiles a todo el ancho al pie de la tarjeta */
    .tabla-seguimiento td.td-seg-accion {
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border);
    }

    .tabla-seguimiento td.td-seg-accion .d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: var(--space-2);
    }

    .tabla-seguimiento td.td-seg-accion form {
        width: 100%;
        margin: 0;
    }

    .tabla-seguimiento td.td-seg-accion .btn {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* -------------------------------------------------------------
   Registro de expulsión en celular: tabla → tarjetas apiladas.
   Mismo patrón CSS-only; el buscador oculta filas con .d-none
   (display:none !important) que gana sobre el display:flex, así
   que filtro y búsqueda siguen funcionando. Persona se sube como
   título de la tarjeta (order:-1) por encima de Fecha.
   ------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
    .tabla-registro,
    .tabla-registro tbody {
        display: block;
        width: 100%;
    }

    .tabla-registro thead {
        display: none;
    }

    .tabla-registro tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
        box-shadow: var(--shadow-xs);
    }

    .tabla-registro tbody td {
        display: block;
        padding: var(--space-2) 0 0;
        border: 0;
    }

    /* Persona = título de la tarjeta (order la sube sobre Fecha) */
    .tabla-registro td.td-reg-persona {
        order: -1;
        padding-top: 0;
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-1);
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
    }

    /* Etiqueta del campo (Fecha, Tipo, Evento, Motivo, …) sobre el valor */
    .tabla-registro td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--space-1);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
    }
}

/* -------------------------------------------------------------
   Conteo del culto en celular: tabla del listado → tarjetas.
   Mismo patrón CSS-only. El Domingo (th scope="row") es el título
   y el botón "Ver desglose" baja a pie de tarjeta a todo el ancho.
   ------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
    .tabla-conteo,
    .tabla-conteo tbody {
        display: block;
        width: 100%;
    }

    .tabla-conteo thead {
        display: none;
    }

    .tabla-conteo tbody tr {
        display: block;
        margin-bottom: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
        box-shadow: var(--shadow-xs);
    }

    .tabla-conteo tbody td,
    .tabla-conteo tbody th {
        display: block;
        padding: var(--space-2) 0 0;
        border: 0;
        text-align: left !important; /* anula .text-center de la tabla */
    }

    /* Domingo = título de la tarjeta */
    .tabla-conteo tbody th[scope="row"] {
        padding-top: 0;
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-1);
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
    }

    /* Etiqueta del campo (Total contado, Estado) sobre el valor */
    .tabla-conteo td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--space-1);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
    }

    /* Botón "Ver desglose": táctil a todo el ancho al pie de la tarjeta */
    .tabla-conteo td.td-conteo-accion {
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border);
    }

    .tabla-conteo td.td-conteo-accion .btn {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* -------------------------------------------------------------
   Benevolencia "Todos los Casos": tabla → tarjetas.
   Mismo patrón CSS-only que Directorio/Asistencia/Seguimiento. Las
   8 columnas (Caso, Solicitante, Tipo, Montos, Estado, Tiempo,
   Entrega, Acciones) se desbordaban. Cada <tr> se vuelve tarjeta: el
   Solicitante sube como título, el resto se etiqueta con data-label y
   las acciones bajan a pie a todo el ancho. El id #tablaTodosCasos y
   el orden por JS siguen intactos (el DOM no cambia).

   Se activa en ventanas angostas (≤991px) Y en dispositivos TÁCTILES
   (pointer: coarse) hasta 1400px: una tablet Android/iPad renderiza el
   layout ancho (≥992px) pero igual necesita las tarjetas porque la
   tabla de 8 columnas no le cabe. En una laptop (puntero fino) se
   mantiene la tabla. Mismo criterio táctil que el riel del sidebar.
   ------------------------------------------------------------- */
@media screen and (max-width: 991.98px),
       screen and (pointer: coarse) and (max-width: 1400px) {
    .tabla-benevolencia-casos,
    .tabla-benevolencia-casos tbody {
        display: block;
        width: 100%;
    }

    .tabla-benevolencia-casos thead {
        display: none;
    }

    .tabla-benevolencia-casos tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--bg-surface);
        box-shadow: var(--shadow-xs);
    }

    .tabla-benevolencia-casos tbody td {
        display: block;
        padding: var(--space-2) 0 0;
        border: 0;
        text-align: left !important; /* anula .text-center / .text-end de la tabla */
    }

    /* Solicitante = título de la tarjeta (sube por encima del nº de caso) */
    .tabla-benevolencia-casos td.td-caso-solicitante {
        order: -1;
        padding-top: 0;
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-1);
        border-bottom: 1px solid var(--color-border);
        font-size: var(--font-size-lg);
    }

    /* Etiqueta del campo (Caso, Tipo, Montos, Estado, …) sobre el valor */
    .tabla-benevolencia-casos td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--space-1);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
    }

    /* Acciones: botones táctiles a todo el ancho al pie de la tarjeta */
    .tabla-benevolencia-casos td.td-caso-accion {
        margin-top: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border);
    }

    .tabla-benevolencia-casos td.td-caso-accion .btn-group {
        display: flex;
        width: 100%;
        gap: var(--space-2);
    }

    .tabla-benevolencia-casos td.td-caso-accion .btn-group .btn {
        flex: 1;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md) !important;
    }
}

/* Línea de tiempo de contactos (ver.php) */
.seguimiento-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.seguimiento-timeline-item {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
}

/* Geometría fija derivada del marcador de 36px: left = (36 - 2) / 2 = 17px,
   top = alto del marcador (36px). No corresponde a la escala --space-*. */
.seguimiento-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.seguimiento-timeline-marker {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    font-size: var(--font-size-lg);
    z-index: 1;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
}

.seguimiento-timeline-body {
    flex: 1;
    min-width: 0;
    padding-top: var(--space-1);
}

.seguimiento-timeline-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.seguimiento-timeline-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.seguimiento-timeline-by {
    margin: 0 0 var(--space-1);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.seguimiento-timeline-detalle {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.seguimiento-timeline-meta {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Pestañas del listado (en seguimiento / reactivados) */
.seguimiento-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Agrupación del historial por periodo (corte) de inactividad en ver.php */
.seguimiento-periodo {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bg-surface);
}

.seguimiento-periodo:last-child {
    margin-bottom: 0;
}

.seguimiento-periodo-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.seguimiento-periodo-rango {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.seguimiento-periodo-motivo {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
}

.seguimiento-periodo-vacio {
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Panel de seguimiento embebido en la ficha del Directorio (editar.php) */
.seguimiento-inline-list {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 320px;
    overflow-y: auto;
}

.seguimiento-inline-item {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary-500);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
}

.seguimiento-inline-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.seguimiento-inline-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.seguimiento-inline-by {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.seguimiento-inline-detalle {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   PWA de conteo general del culto ("Sistema de conteo de puestos IBCV")
   ========================================================================== */
.conteo-pwa-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 28%),
        linear-gradient(180deg, var(--color-primary-50) 0%, var(--bg-page) 30%, var(--bg-page) 100%);
}

.conteo-pwa-shell {
    width: min(100%, 880px);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.conteo-pwa-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-xl);
    background: linear-gradient(140deg, var(--color-primary-800) 0%, var(--color-primary-700) 54%, var(--color-primary-900) 100%);
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-lg);
}

.conteo-pwa-hero-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.conteo-pwa-kicker {
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.conteo-pwa-title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: var(--line-height-tight);
    color: var(--color-text-on-primary);
}

.conteo-pwa-subtitle {
    max-width: 64ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
}

.conteo-pwa-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.conteo-pwa-hero .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.conteo-pwa-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 220px;
}

.conteo-pwa-hero-actions .btn {
    justify-content: center;
}

.conteo-pwa-message {
    margin-bottom: 0;
}

.conteo-pwa-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.conteo-pwa-total-card {
    position: sticky;
    top: var(--space-2);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-accent-200);
    border-radius: var(--radius-xl);
    background: linear-gradient(155deg, var(--color-accent-50) 0%, var(--bg-surface) 100%);
    box-shadow: var(--shadow-md);
}

.conteo-pwa-total-label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.conteo-pwa-total-value {
    font-family: var(--font-family-heading);
    font-size: clamp(2.8rem, 12vw, 4.5rem);
    line-height: 1;
    color: var(--color-text-primary);
}

.conteo-pwa-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--bg-surface-alt);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.conteo-pwa-status.is-pending {
    border-color: var(--color-warning-300);
    background: var(--color-warning-50);
    color: var(--color-warning-800);
}

.conteo-pwa-status.is-saving {
    border-color: var(--color-info-300);
    background: var(--color-info-50);
    color: var(--color-info-800);
}

.conteo-pwa-status.is-saved {
    border-color: var(--color-success-300);
    background: var(--color-success-50);
    color: var(--color-success-800);
}

.conteo-pwa-status.is-error {
    border-color: var(--color-danger-300);
    background: var(--color-danger-50);
    color: var(--color-danger-800);
}

.conteo-pwa-status.is-offline {
    border-color: var(--color-neutral-400);
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

/* -------------------------------------------------------------
   Barra de "tomar control" de los PWAs (conteo y asistencia).
   El PWA abre en solo lectura; quien va a registrar pulsa "Tomar
   control", confirma, y recién entonces se habilita la edición.
   Tres estados mutuamente excluyentes (readonly / confirm / editing),
   el JS alterna .d-none en cada sub-bloque y data-state en el contenedor.
   ------------------------------------------------------------- */
.pwa-takeover {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
}

.pwa-takeover-readonly,
.pwa-takeover-confirm,
.pwa-takeover-editing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.pwa-takeover-msg {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.pwa-takeover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Aviso "Fulano está registrando ahora" cuando otro diácono tiene el candado.
   Ocupa todo el ancho del panel de solo lectura para que no pase desapercibido. */
.pwa-takeover-lockinfo {
    flex-basis: 100%;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-warning-50);
    border: 1px solid var(--color-warning-500);
    color: var(--color-warning-800);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.pwa-takeover[data-state="confirm"] {
    border-color: var(--color-warning-500);
    background: var(--color-warning-50);
}

.pwa-takeover[data-state="editing"] {
    border-color: var(--color-success-500);
    background: var(--color-success-50);
}

.conteo-pwa-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 26 filas fijas (A-Z) repartidas en 13 filas x 2 columnas, llenado por
       columna: izquierda A-M, derecha N-Z. Así la enumeración baja vertical
       en cada columna en vez de ir en zigzag (A,B / C,D). */
    grid-template-rows: repeat(13, auto);
    grid-auto-flow: column;
    gap: var(--space-3);
}

.conteo-pwa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
}

.conteo-pwa-row-label {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.conteo-pwa-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.conteo-pwa-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-neutral-700);
    color: var(--color-text-on-primary);
    font-size: var(--font-size-lg);
}

.conteo-pwa-step--plus {
    background: var(--color-primary-interactive);
}

.conteo-pwa-step:active {
    transform: scale(0.96);
}

.conteo-pwa-input {
    width: 84px;
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 767.98px) {
    .conteo-pwa-shell {
        padding: var(--space-4) var(--space-3) var(--space-6);
    }

    .conteo-pwa-hero {
        flex-direction: column;
    }

    .conteo-pwa-hero-actions {
        width: 100%;
        min-width: 0;
    }

    .conteo-pwa-rows {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-flow: row;
    }
}

/* =============================================================
   Sidebar colapsable (riel + drawer)
   - Escritorio (>=992px): body.sidebar-collapsed encoge el sidebar a un riel
     solo-iconos (72px) y el contenido refluye. En hover/focus-within el sidebar
     hace "peek": se expande como overlay sin mover el contenido.
   - Móvil (<992px): el modo riel no aplica; el sidebar es un drawer off-canvas.
   Estado persistido por cookie y renderizado server-side en templates/header.php.
   ============================================================= */

/* Monograma compacto del logo: oculto salvo en modo riel */
.sidebar-logo-mark {
    display: none;
    color: var(--color-text-inverse);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
}

@media (min-width: 992px) {
    /* --- Estado colapsado (riel) --- */
    .app-body.sidebar-collapsed .sidebar {
        width: var(--sidebar-width-collapsed);
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .app-body.sidebar-collapsed .main-content {
        margin-left: var(--sidebar-width-collapsed);
    }

    /* Iconos centrados, sin etiqueta visible */
    .app-body.sidebar-collapsed .sidebar .nav-link,
    .app-body.sidebar-collapsed .sidebar .btn-logout {
        justify-content: center;
        gap: 0;
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    /* Las etiquetas se ocultan visualmente PERO permanecen en el árbol de
       accesibilidad (técnica visually-hidden), así cada enlace conserva su
       nombre accesible aunque solo se vea el icono. */
    .app-body.sidebar-collapsed .sidebar .nav-link span,
    .app-body.sidebar-collapsed .sidebar .btn-logout span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Cabeceras de sección, texto de usuario y logo grande: fuera en riel */
    .app-body.sidebar-collapsed .sidebar .nav-section-header,
    .app-body.sidebar-collapsed .sidebar .user-info,
    .app-body.sidebar-collapsed .sidebar .sidebar-logo-img {
        display: none;
    }

    .app-body.sidebar-collapsed .sidebar .sidebar-logo-mark {
        display: block;
    }

    .app-body.sidebar-collapsed .sidebar .user-info-display .d-flex {
        justify-content: center;
    }
}

/* --- Peek: hover o foco expande el riel como overlay ---
   SOLO en dispositivos con puntero fino y hover REAL (mouse/trackpad). En pantallas
   táctiles (tablet Android/iPad) el hover está EMULADO: el primer toque sobre un
   icono del riel disparaba el peek en vez de navegar, así el menú se expandía y se
   volvía a esconder sin entrar al módulo (usuario atrapado). Al gatear el peek con
   hover:hover, en táctil el riel NO hace peek: tocar un icono navega directo y la
   única forma de expandir es el botón hamburguesa. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .app-body.sidebar-collapsed .sidebar:hover,
    .app-body.sidebar-collapsed .sidebar:focus-within {
        width: var(--sidebar-width);
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        box-shadow: var(--shadow-xl);
    }

    .app-body.sidebar-collapsed .sidebar:hover .nav-link,
    .app-body.sidebar-collapsed .sidebar:hover .btn-logout,
    .app-body.sidebar-collapsed .sidebar:focus-within .nav-link,
    .app-body.sidebar-collapsed .sidebar:focus-within .btn-logout {
        justify-content: flex-start;
        gap: var(--space-3);
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .app-body.sidebar-collapsed .sidebar:hover .nav-link span,
    .app-body.sidebar-collapsed .sidebar:hover .btn-logout span,
    .app-body.sidebar-collapsed .sidebar:focus-within .nav-link span,
    .app-body.sidebar-collapsed .sidebar:focus-within .btn-logout span {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .app-body.sidebar-collapsed .sidebar:hover .nav-section-header,
    .app-body.sidebar-collapsed .sidebar:hover .user-info,
    .app-body.sidebar-collapsed .sidebar:hover .sidebar-logo-img,
    .app-body.sidebar-collapsed .sidebar:focus-within .nav-section-header,
    .app-body.sidebar-collapsed .sidebar:focus-within .user-info,
    .app-body.sidebar-collapsed .sidebar:focus-within .sidebar-logo-img {
        display: block;
    }

    .app-body.sidebar-collapsed .sidebar:hover .user-info,
    .app-body.sidebar-collapsed .sidebar:focus-within .user-info {
        display: block;
    }

    .app-body.sidebar-collapsed .sidebar:hover .sidebar-logo-mark,
    .app-body.sidebar-collapsed .sidebar:focus-within .sidebar-logo-mark {
        display: none;
    }

    .app-body.sidebar-collapsed .sidebar:hover .user-info-display .d-flex,
    .app-body.sidebar-collapsed .sidebar:focus-within .user-info-display .d-flex {
        justify-content: flex-start;
    }
}

/* En móvil/tablet el modo riel no aplica; al abrir el drawer se bloquea el
   scroll del fondo para que el gesto quede contenido en el menú. */
@media (max-width: 991.98px) {
    body.drawer-open {
        overflow: hidden;
    }
}

/* =============================================================
   Efecto "slot machine" en los botones .btn-slot (dashboard)
   El rótulo se descompone en JS (initializeSlotButtons) en rodillos
   verticales por letra. En hover/foco cada rodillo baja hasta su
   carácter, pasando por aleatorios → giro tipo tragamonedas que
   aterriza en la letra. Tokenizado; prefers-reduced-motion lo
   neutraliza vía la regla global de transición (líneas ~320).
   ============================================================= */
.slot-text {
    --slot-cell-h: 1.4em;
    /* Duración PURA (no --transition-slow, que ya incluye easing y rompería el
       shorthand de transition al concatenar dos timing-functions). */
    --slot-duration: 0.5s;
    display: inline-flex;
    align-items: stretch;
    vertical-align: bottom;
    white-space: nowrap;
}

.slot-gap {
    white-space: pre;
}

/* Span temporal para medir el ancho real de cada carácter (lo crea/borra el JS).
   Fuera del flujo para no afectar el layout. */
.slot-measure {
    position: absolute;
    visibility: hidden;
    white-space: pre;
    pointer-events: none;
}

.slot-char {
    display: inline-block;
    height: var(--slot-cell-h);
    line-height: var(--slot-cell-h);
    overflow: hidden;
}

.slot-reel {
    display: flex;
    flex-direction: column;
    /* El rodillo se ciñe al ancho de la celda (= ancho del carácter real, fijado
       en JS). Sin esto, el flex-column estiraría las celdas al carácter más ancho
       del rodillo y separaría las letras. Los aleatorios anchos se recortan al
       centro durante el giro. */
    width: 100%;
    transform: translateY(0);
    transition: transform var(--slot-duration) cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.slot-cell {
    height: var(--slot-cell-h);
    line-height: var(--slot-cell-h);
    text-align: center;
}

/* Hover/foco: el rodillo baja hasta la última celda (de nuevo el target). */
.btn-slot:hover .slot-reel,
.btn-slot:focus-visible .slot-reel {
    transform: translateY(calc(var(--slot-cell-h) * (var(--slot-count, 1) - 1) * -1));
}

/* ============================================================================
   MÓDULO CUMPLEAÑOS (modules/cumpleanos/index.php)
   Vista de solo lectura: hero del día, KPIs, próximos 30 días y calendario
   anual de 12 meses. Solo tokens; prefijo .cumple- como los demás módulos
   (mismo criterio que .registro-* de registro_renuncias).
   ========================================================================== */

/* Tokens del confeti del hero (única fuente de verdad para estos colores).
   Tonos joya que resaltan sobre el campo ámbar cálido del hero. */
:root {
    --color-confetti-rose:   #ef476f;
    --color-confetti-teal:   #0d9488;
    --color-confetti-sky:    #0369a1;
    --color-confetti-white:  var(--color-neutral-0);
    --color-confetti-violet: #6d28d9;
}

.cumple-modulo {
    padding-bottom: var(--space-8);
}

/* --- Hero: cumpleañeros de hoy ---
   Teoría del color: campo CÁLIDO (ámbar, el color de acento del sistema) con
   TINTA azul marino de marca. Dos hues análogos-cálidos en el degradado evitan
   el "barro" del complementario azul↔naranja, y el texto marino sobre ámbar
   da contraste alto y se siente parte del fondo (no "pegado encima"). El foco
   lo da un medallón sólido marino — color saturado con presencia, no wash. */
.cumple-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-image: linear-gradient(118deg,
        var(--color-accent-300) 0%,
        var(--color-accent-400) 48%,
        var(--color-accent-500) 100%);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-lg);
}

.cumple-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Medallón sólido de marca: foco de color con presencia + ata el ámbar al azul. */
.cumple-hero-medal {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: linear-gradient(140deg, var(--color-primary-600), var(--color-primary-800));
    color: var(--color-neutral-0);
    font-size: var(--font-size-3xl);
    line-height: 1;
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(255, 255, 255, 0.35);
}

.cumple-hero-kicker {
    margin: 0 0 var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-700);
}

.cumple-hero-title {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary-900);
}

.cumple-hero-title small {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-700);
}

.cumple-hero-sub {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-800);
}

/* Confetti decorativo del hero. */
.cumple-hero-confetti {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cumple-confetti {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.85;
    animation: cumple-fall 4.5s linear infinite;
}

.cumple-confetti-0 { left: 6%;  background: var(--color-confetti-violet); animation-delay: 0s;    }
.cumple-confetti-1 { left: 18%; background: var(--color-confetti-rose);   animation-delay: 0.6s;  }
.cumple-confetti-2 { left: 30%; background: var(--color-confetti-teal);   animation-delay: 1.2s;  }
.cumple-confetti-3 { left: 45%; background: var(--color-confetti-white);  animation-delay: 0.3s;  }
.cumple-confetti-4 { left: 60%; background: var(--color-confetti-sky);    animation-delay: 1.8s;  }
.cumple-confetti-5 { left: 74%; background: var(--color-confetti-violet); animation-delay: 0.9s;  }
.cumple-confetti-6 { left: 88%; background: var(--color-confetti-rose);   animation-delay: 1.5s;  }
.cumple-confetti:nth-child(n+8) { top: -24px; opacity: 0.6; }

@keyframes cumple-fall {
    0%   { transform: translateY(-20px) rotate(0deg);   opacity: 0; }
    10%  { opacity: 0.85; }
    100% { transform: translateY(220px) rotate(320deg); opacity: 0; }
}

/* --- Próximos cumpleaños --- */
.cumple-proximos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cumple-proximo-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base);
}

.cumple-proximo-item:hover {
    background: var(--color-primary-50);
}

.cumple-fecha-chip {
    flex-shrink: 0;
    width: 44px;
    text-align: center;
    background: var(--color-accent-50);
    border: 1px solid var(--color-accent-200);
    border-radius: var(--radius-md);
    padding: var(--space-1) 0;
    line-height: 1.1;
}

.cumple-fecha-dia {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-700);
}

.cumple-fecha-mes {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent-600);
    font-weight: var(--font-weight-semibold);
}

.cumple-proximo-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cumple-proximo-nombre {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.cumple-proximo-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.cumple-cuando {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.cumple-cuando--pronto { color: var(--color-accent-700); }
.cumple-cuando--hoy {
    background: var(--color-success-500);
    color: var(--color-neutral-0);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
}

/* --- Cabecera del calendario anual + buscador --- */
.cumple-anual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.cumple-anual-tools {
    min-width: 180px;
    flex: 0 1 240px;
}

/* --- Navegación rápida por mes (pills) --- */
.cumple-mes-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.cumple-mes-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all var(--transition-base);
}

.cumple-mes-pill:hover {
    border-color: var(--color-primary-400);
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.cumple-mes-pill--actual {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--color-neutral-0);
}

.cumple-mes-pill--vacio {
    opacity: 0.55;
}

.cumple-mes-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.08);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.cumple-mes-pill--actual .cumple-mes-pill-count {
    background: rgba(255, 255, 255, 0.25);
}

/* --- Rejilla anual de meses --- */
.cumple-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-3);
}

.cumple-mes {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base);
}

.cumple-mes:hover { box-shadow: var(--shadow-sm); }

.cumple-mes--actual {
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 1px var(--color-primary-400);
}

.cumple-mes--filtrado-fuera { display: none; }

.cumple-mes-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary-50);
    border-bottom: 1px solid var(--color-border);
}

.cumple-mes--actual .cumple-mes-head {
    background: var(--color-primary-600);
}

.cumple-mes-titulo {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-700);
}

.cumple-mes--actual .cumple-mes-titulo { color: var(--color-neutral-0); }

.cumple-mes-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary-600);
    color: var(--color-neutral-0);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.cumple-mes--actual .cumple-mes-badge {
    background: var(--color-neutral-0);
    color: var(--color-primary-700);
}

.cumple-mes-vacio {
    margin: 0;
    padding: var(--space-4) var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.cumple-mes-lista {
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cumple-persona {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base);
}

.cumple-persona:hover { background: var(--color-primary-50); }

.cumple-persona--hoy {
    background: var(--color-accent-50);
    box-shadow: inset 0 0 0 1px var(--color-accent-400);
}

.cumple-dia {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-primary-600);
    color: var(--color-neutral-0);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.cumple-persona--hoy .cumple-dia {
    background: var(--color-accent-600);
}

.cumple-persona-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cumple-persona-nombre {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.cumple-hoy-icon { color: var(--color-accent-600); margin-left: 2px; }

.cumple-persona-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
}

.cumple-edad {
    flex-shrink: 0;
    width: 30px;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent-600);
    font-variant-numeric: tabular-nums;
}

/* Línea "familia" (a qué miembro principal pertenece un familiar). */
.cumple-familia {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* --- Estados vacíos y notas --- */
.cumple-empty {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-muted);
}

.cumple-empty i {
    font-size: var(--font-size-3xl);
    display: block;
    margin-bottom: var(--space-2);
    opacity: 0.6;
}

.cumple-nota-faltantes {
    margin: var(--space-4) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Encabezado institucional que SOLO aparece en la impresión. */
.cumple-print-header { display: none; }

/* --- Movimiento reducido: sin confetti animado --- */
@media (prefers-reduced-motion: reduce) {
    .cumple-confetti { animation: none; display: none; }
}

/* ============================================================================
   IMPRESIÓN — Hoja maquetada del calendario anual
   El objetivo es una hoja en limpio (encabezado institucional + 12 meses
   compactos que cuajan en la página), NO un volcado de la pantalla.

   Nota crítica: hay una regla GLOBAL `@media print { body * { visibility:hidden } }`
   (definida para el Directorio) que oculta TODO en cualquier página. Aquí se
   revierte para el módulo con mayor especificidad y se recoloca el contenido al
   tope de la hoja.
   ========================================================================== */
@media print {
    @page { size: A4 portrait; margin: 12mm 10mm; }

    /* Sacar el chrome del flujo para que el calendario arranque arriba. */
    .sidebar,
    .app-topbar,
    .sidebar-backdrop,
    .skip-link { display: none !important; }

    .main-content { margin: 0 !important; }
    .content-wrapper { padding: 0 !important; }

    /* Revertir el ocultado global body*{visibility:hidden} solo para el módulo. */
    .cumple-modulo,
    .cumple-modulo * { visibility: visible !important; }

    /* Conservar los colores de fondo de cabeceras y badges en el papel/PDF. */
    .cumple-modulo {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Quitar de la hoja todo lo que no es el calendario. */
    .page-header,
    .cumple-hero,
    .cumple-kpis,
    .cumple-proximos-col,
    .cumple-anual-header,
    .cumple-mes-nav,
    .cumple-sin-resultados,
    .cumple-nota-faltantes,
    .btn { display: none !important; }

    /* Encabezado institucional (sustituye al de pantalla). */
    .cumple-print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 6mm;
        color: var(--color-text-primary);
    }
    .cumple-print-header h1 { font-size: 15pt; margin: 0 0 1mm; }
    .cumple-print-sub  { font-size: 11pt; font-weight: var(--font-weight-semibold); margin: 0; }
    .cumple-print-meta { font-size: 8.5pt; color: var(--color-text-secondary); margin: 1mm 0 0; }

    /* Las columnas Bootstrap ocupan el ancho completo de la hoja. */
    .cumple-modulo .row,
    .cumple-modulo [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
    }

    /* La tarjeta del calendario pierde su "caja" para no gastar márgenes. */
    .cumple-calendario,
    .cumple-calendario .card-body {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Rejilla tipo periódico: 3 columnas que fluyen y paginan sin cortar meses.
       Se usa column-fill: balance (el valor por defecto): la última página queda
       con algo de espacio al pie, pero es la única opción fiable. column-fill:
       auto llena ese hueco pero dispara un bug de Chrome que añade páginas en
       blanco al final del PDF, así que no se usa. */
    .cumple-grid {
        display: block;
        column-count: 3;
        column-gap: 6mm;
    }

    /* Los meses NO usan break-inside: avoid — un mes largo (ej. Junio con
       50+ personas) es más alto que una columna/página y, si se le prohíbe
       partir, Chrome lo desborda y recorta todo lo que sigue. Se deja fluir
       entre columnas y páginas; quien no se debe partir es cada persona. */
    .cumple-mes {
        break-inside: auto;
        border: 1px solid var(--color-neutral-300);
        border-radius: 4px;
        margin: 0 0 4mm;
        box-shadow: none !important;
        overflow: visible;
    }

    /* La cabecera del mes no se queda huérfana al final de una columna. */
    .cumple-mes-head {
        break-after: avoid;
        break-inside: avoid;
    }

    .cumple-mes--actual { box-shadow: none !important; }

    .cumple-mes-head { padding: 1.5mm 2mm; }
    .cumple-mes-titulo { font-size: 8.5pt; }
    .cumple-mes-badge {
        min-width: 0;
        height: auto;
        padding: 0 1.5mm;
        font-size: 7pt;
    }

    .cumple-mes-lista { padding: 1.5mm 2mm; gap: 0; }
    .cumple-mes-vacio { padding: 1.5mm 2mm; font-size: 7.5pt; }

    /* Cada persona: día + nombre + edad. El meta (badges/familia) se omite para
       compactar — la hoja es un listado de cumpleaños, no la ficha. */
    .cumple-persona {
        padding: 0.6mm 0;
        gap: 1.5mm;
        page-break-inside: avoid;
    }
    .cumple-persona--hoy { box-shadow: none !important; background: transparent !important; }
    .cumple-persona-meta { display: none !important; }

    .cumple-dia {
        width: 5mm;
        height: 5mm;
        font-size: 6.5pt;
    }
    .cumple-persona-nombre { font-size: 8pt; font-weight: var(--font-weight-regular); }
    .cumple-edad { width: 6mm; font-size: 8.5pt; }
    .cumple-hoy-icon { display: none !important; }
}

/* ==========================================================================
   Santa Cena (tardanza) + ausencia justificada
   Controles TERCIARIOS que aparecen bajo demanda, sin competir con los botones
   principales Presente/Ausente. Migración 2026-07-05.
   ========================================================================== */

/* --- Escritorio (modules/asistencia/index.php) --- */
.asistencia-estado {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.asistencia-tardanza-wrap {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-accent-50);
    border: 1px solid var(--color-accent-200);
}

.asistencia-tardanza-wrap .form-check-label {
    color: var(--color-accent-800);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

/* Estado ACTIVO (marcado): fondo sólido para que se distinga del no marcado. */
.asistencia-tardanza-wrap:has(.checkbox-tardanza:checked) {
    background: var(--color-accent-700);
    border-color: var(--color-accent-800);
}

.asistencia-tardanza-wrap:has(.checkbox-tardanza:checked) .form-check-label {
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
}

.asistencia-razon-wrap {
    width: 100%;
    min-width: 180px;
}

.input-razon-ausencia {
    max-width: 260px;
}

/* --- PWA (modules/asistencia/pwa.php) --- */
.asistencia-pwa-santacena {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-accent-50);
    border: 1px solid var(--color-accent-200);
}

.asistencia-pwa-santacena-switch .form-check-label {
    color: var(--color-accent-800);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.asistencia-pwa-santacena-help {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Tardanza: chip terciario, claramente por debajo del par Presente/Ausente. */
.asistencia-pwa-tardanza {
    margin-top: var(--space-2);
    text-align: center;
}

.asistencia-pwa-tardanza-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-accent-100);
    border: 1px solid var(--color-accent-300);
    color: var(--color-accent-800);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.asistencia-pwa-tardanza-input {
    accent-color: var(--color-accent-600);
    cursor: pointer;
}

/* Estado ACTIVO (marcado): chip sólido acentuado, claramente distinto del no
   marcado (antes solo cambiaba el check nativo y no se notaba). */
.asistencia-pwa-tardanza-chip:has(.asistencia-pwa-tardanza-input:checked) {
    background: var(--color-accent-700);
    border-color: var(--color-accent-800);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
}

.asistencia-pwa-tardanza-chip:has(.asistencia-pwa-tardanza-input:checked) .asistencia-pwa-tardanza-input {
    accent-color: var(--color-text-on-primary);
}

.asistencia-pwa-razon {
    margin-top: var(--space-2);
}

.asistencia-pwa-razon-input {
    max-width: 320px;
    margin-inline: auto;
}