/* =============================================================
   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;
    --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;
}

.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);
}

.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);
}

/* Sección de Administración */
.sidebar .nav-section-header {
    padding: var(--space-2) var(--space-3) var(--space-1);
}

.sidebar .nav-section-header small {
    color: rgba(255, 255, 255, 0.58);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* 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);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    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: block;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-1);
}

.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);
}

/* =============================================================
   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);
}

.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">
   ============================================================= */

.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);
}

@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-100);  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;
    }
}

/* =============================================================
   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);
}

/* 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;
}

/* 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;
}

/* =============================================================
   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;
}

.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-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);
}

.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);
}

.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-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;
}

.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-actions {
    gap: var(--space-2);
}

.catalog-actions .btn-action {
    min-width: 34px;
    height: 34px;
    padding: 0 var(--space-2);
}

.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: var(--color-border);
    background: linear-gradient(180deg, var(--color-neutral-50) 0%, var(--color-neutral-100) 100%);
}

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

/* =============================================================
   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;
    }
}

/* =============================================================
   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-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-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);
}

.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%;
    }
}

/* =============================================================
   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);
}

.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-text-primary);
}

.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);
}

/* 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);
}

/* 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;
    }
}

/* =============================================================
   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);
    }
}

@media (max-width: 767.98px) {
    .app-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .topbar-meta {
        font-size: var(--font-size-xs);
    }

    .topbar-title span {
        font-size: var(--font-size-xs);
    }

    .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.
   ========================================================================== */

/* 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%);
}

.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);
}

/* 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);
}

/* 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);
}

/* 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 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 */
    #tabla-directorio table {
        font-size: 8pt;
        width: 100%;
    }

    /* 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;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* 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;
    }
}

/* =============================================================
   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);
}

.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);
    }
}