/* ═══════════════════════════════════════════════════════════════════════════
   EventPass · Sistema de diseño 2.0 (septiembre 2026)
   Capa que se carga DESPUÉS de site.css y redefine los tokens --ep-* y los
   componentes del shell. Tema claro profesional: sidebar navy, superficies
   blancas, acento azul eléctrico y un color por módulo:
     Eventos = azul · Visitas = teal · Guardias = ámbar · Socios = violeta
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --ep-primary: #2563EB;
    --ep-primary-hover: #1D4ED8;
    --ep-primary-soft: rgba(37, 99, 235, .10);
    --ep-accent: #0EA5E9;
    --ep-accent-soft: rgba(14, 165, 233, .10);

    --ep-sidebar-bg: #0B1220;
    --ep-sidebar-bg-end: #111A2E;
    --ep-sidebar-accent: #2563EB;
    --ep-sidebar-text: #94A3B8;
    --ep-sidebar-text-active: #FFFFFF;
    --ep-sidebar-hover: rgba(255,255,255,.06);

    --ep-bg: #F3F5F9;
    --ep-surface: #FFFFFF;
    --ep-surface-alt: #F8FAFC;
    --ep-border: #E5E9F0;
    --ep-border-strong: #CBD5E1;

    --ep-text: #0F172A;
    --ep-text-soft: #475569;
    --ep-muted: #64748B;

    --ep-success: #059669;
    --ep-warning: #D97706;
    --ep-danger:  #DC2626;
    --ep-info:    #0284C7;

    --ep-mod-eventos: #2563EB;
    --ep-mod-visitas: #0D9488;
    --ep-mod-guardias: #D97706;
    --ep-mod-socios: #7C3AED;
    --ep-mod-admin: #64748B;

    --ep-sidebar-width: 264px;
    --ep-topbar-height: 60px;
    --ep-radius-sm: 8px;
    --ep-radius: 12px;
    --ep-radius-lg: 16px;
    --ep-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --ep-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --ep-shadow-md: 0 6px 16px rgba(15,23,42,.08);
    --ep-shadow-lg: 0 16px 32px rgba(15,23,42,.10);
    --ep-shadow-xl: 0 24px 48px rgba(15,23,42,.14);
}

html, body { background: var(--ep-bg); color: var(--ep-text); font-size: 14px; }
body.ep-editorial .ep-page-title, .ep-editorial h1.ep-page-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; }
.ep-editorial .ep-page-subtitle { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--ep-muted); }
h1, h2, h3, h4, h5, h6 { color: var(--ep-text); }

/* ── Bootstrap re-tematizado (claro) ─────────────────────────────────────── */
.card { background: var(--ep-surface) !important; border: 1px solid var(--ep-border) !important; border-radius: var(--ep-radius); box-shadow: var(--ep-shadow-xs); color: var(--ep-text); }
.card-header { background: var(--ep-surface) !important; border-bottom: 1px solid var(--ep-border) !important; font-weight: 600; }
.card-footer { background: var(--ep-surface-alt) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ep-text); --bs-table-border-color: var(--ep-border); --bs-table-striped-bg: #F8FAFC; --bs-table-hover-bg: #F1F5F9; --bs-table-hover-color: var(--ep-text); color: var(--ep-text); }
.table thead th { background: var(--ep-surface-alt); color: var(--ep-muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--ep-border); }
.table tbody td { border-color: var(--ep-border); }
.form-control, .form-select { background: #fff; border: 1px solid var(--ep-border-strong); color: var(--ep-text); border-radius: var(--ep-radius-sm); }
.form-control:focus, .form-select:focus { background: #fff; border-color: var(--ep-primary); box-shadow: 0 0 0 3px var(--ep-primary-soft); color: var(--ep-text); }
.form-control::placeholder { color: #94A3B8; }
.form-control:disabled, .form-select:disabled { background: var(--ep-surface-alt); color: var(--ep-muted); }
.form-label, label { color: var(--ep-text-soft); font-weight: 600; font-size: .85rem; }
.form-check-input { background-color: #fff; border-color: var(--ep-border-strong); }
.form-check-input:checked { background-color: var(--ep-primary); border-color: var(--ep-primary); }
.input-group-text { background: var(--ep-surface-alt); border-color: var(--ep-border-strong); color: var(--ep-muted); }
.modal-content { background: var(--ep-surface); border-color: var(--ep-border); color: var(--ep-text); border-radius: var(--ep-radius-lg); }
.dropdown-menu { background: var(--ep-surface); border: 1px solid var(--ep-border); box-shadow: var(--ep-shadow-lg); border-radius: var(--ep-radius); }
.dropdown-item { color: var(--ep-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ep-surface-alt); color: var(--ep-primary); }
.list-group-item { background: var(--ep-surface); border-color: var(--ep-border); color: var(--ep-text); }
.btn { border-radius: var(--ep-radius-sm); font-weight: 600; }
.btn-primary { background: var(--ep-primary) !important; border-color: var(--ep-primary) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(37,99,235,.25); }
.btn-primary:hover, .btn-primary:focus { background: var(--ep-primary-hover) !important; border-color: var(--ep-primary-hover) !important; color: #fff !important; }
.btn-outline-primary { color: var(--ep-primary); border-color: #BFDBFE; background: #fff; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--ep-primary) !important; border-color: var(--ep-primary) !important; color: #fff !important; }
.btn-outline-secondary { color: var(--ep-text-soft); border-color: var(--ep-border-strong); background: #fff; }
.btn-outline-secondary:hover { background: var(--ep-surface-alt); color: var(--ep-text); border-color: var(--ep-border-strong); }
.btn-secondary { background: var(--ep-surface-alt); border-color: var(--ep-border-strong); color: var(--ep-text); }
.btn-secondary:hover { background: var(--ep-border); color: var(--ep-text); }
.btn-light { background: #fff; border-color: var(--ep-border); color: var(--ep-text-soft); }
.btn-link { color: var(--ep-primary); }
.bg-light, .bg-white { background: var(--ep-surface-alt) !important; color: var(--ep-text) !important; }
.text-dark { color: var(--ep-text) !important; }
.text-muted { color: var(--ep-muted) !important; }
.text-secondary { color: var(--ep-text-soft) !important; }
.text-info { color: var(--ep-info) !important; }
.text-primary { color: var(--ep-primary) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--ep-border) !important; }
.alert { border-radius: var(--ep-radius); }
.alert-success { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.alert-danger  { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.alert-warning { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.alert-info    { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; padding: .35em .6em; }
.badge.bg-light { background: var(--ep-surface-alt) !important; color: var(--ep-text-soft) !important; border: 1px solid var(--ep-border); }
.badge.bg-success { background: #ECFDF5 !important; color: #047857 !important; border: 1px solid #A7F3D0; }
.badge.bg-danger { background: #FEF2F2 !important; color: #B91C1C !important; border: 1px solid #FECACA; }
.badge.bg-warning { background: #FFFBEB !important; color: #B45309 !important; border: 1px solid #FDE68A; }
.badge.bg-info { background: #EFF6FF !important; color: #1D4ED8 !important; border: 1px solid #BFDBFE; }
.badge.bg-secondary { background: #F1F5F9 !important; color: #475569 !important; border: 1px solid var(--ep-border); }
.badge.bg-primary { background: var(--ep-primary-soft) !important; color: var(--ep-primary) !important; border: 1px solid #BFDBFE; }
.badge.bg-dark { background: #0F172A !important; color: #fff !important; }
.nav-tabs { border-bottom-color: var(--ep-border); }
.nav-tabs .nav-link { color: var(--ep-muted); }
.nav-tabs .nav-link.active { background: transparent; color: var(--ep-primary); border-color: transparent transparent var(--ep-primary); border-bottom-width: 2px; }
.page-link { background: #fff; border-color: var(--ep-border); color: var(--ep-text); }
.page-link:hover { background: var(--ep-surface-alt); color: var(--ep-primary); }
.page-item.active .page-link { background: var(--ep-primary); border-color: var(--ep-primary); color: #fff; }
code, pre { background: var(--ep-surface-alt); color: #7C3AED; border: 1px solid var(--ep-border); }
hr { border-color: var(--ep-border); opacity: 1; }
a { color: var(--ep-primary); }
::selection { background: rgba(37,99,235,.18); color: var(--ep-text); }

/* ── Shell: sidebar ──────────────────────────────────────────────────────── */
.ep-sidebar {
    background: linear-gradient(180deg, var(--ep-sidebar-bg) 0%, var(--ep-sidebar-bg-end) 100%);
    border-right: 1px solid rgba(255,255,255,.06);
    width: var(--ep-sidebar-width);
    display: flex; flex-direction: column;
}
.ep-sidebar-brand { padding: 18px 20px 14px; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.ep-sidebar-brand i, .ep-sidebar-brand .ep-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #2563EB, #0EA5E9); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; box-shadow: 0 6px 16px rgba(37,99,235,.35); }
.ep-sidebar-brand small { display: block; font-weight: 500; font-size: .68rem; color: rgba(255,255,255,.45); letter-spacing: .08em; text-transform: uppercase; margin-top: 1px; }
.ep-org-chip { margin: 12px 14px 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #E2E8F0; font-size: .8rem; display: flex; align-items: center; gap: 10px; }
.ep-org-chip .ep-org-ini { width: 30px; height: 30px; border-radius: 8px; background: rgba(124,58,237,.35); color: #DDD6FE; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ep-org-chip .ep-org-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-org-chip .ep-org-sub { color: rgba(255,255,255,.45); font-size: .7rem; }
.ep-org-chip select { background: transparent; border: 0; color: #fff; font-size: .8rem; font-weight: 600; width: 100%; outline: none; }
.ep-org-chip select option { color: #0F172A; }
.ep-sidebar-nav { list-style: none; margin: 0; padding: 8px 12px 16px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.ep-sidebar-section { color: rgba(255,255,255,.38); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; padding: 16px 12px 6px; display: flex; align-items: center; gap: 8px; }
.ep-sidebar-section::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mod, rgba(255,255,255,.3)); }
.ep-sidebar-nav > li > a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 1px 0; border-radius: 9px; color: var(--ep-sidebar-text); font-size: .875rem; font-weight: 500; transition: background .15s, color .15s; }
.ep-sidebar-nav > li > a i { width: 18px; text-align: center; font-size: .9rem; opacity: .85; }
.ep-sidebar-nav > li > a:hover { background: var(--ep-sidebar-hover); color: #fff; }
.ep-sidebar-nav > li > a.active { background: rgba(255,255,255,.09); color: #fff; box-shadow: inset 3px 0 0 var(--mod, var(--ep-primary)); }
.ep-sidebar-nav > li > a .ep-nav-badge { margin-left: auto; background: rgba(255,255,255,.12); color: #fff; font-size: .68rem; padding: 2px 7px; border-radius: 999px; font-weight: 700; }
.ep-sidebar-footer { padding: 12px 20px; font-size: .72rem; color: rgba(255,255,255,.35); border-top: 1px solid rgba(255,255,255,.06); }
.ep-mod-eventos { --mod: var(--ep-mod-eventos); }
.ep-mod-visitas { --mod: var(--ep-mod-visitas); }
.ep-mod-guardias { --mod: var(--ep-mod-guardias); }
.ep-mod-socios { --mod: var(--ep-mod-socios); }
.ep-mod-admin { --mod: var(--ep-mod-admin); }

/* ── Shell: topbar ───────────────────────────────────────────────────────── */
.ep-topbar { background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ep-border); height: var(--ep-topbar-height); position: sticky; top: 0; z-index: 20; }
.ep-topbar-title { font-weight: 700; color: var(--ep-text); font-size: 1rem; letter-spacing: -.01em; }
.ep-topbar-crumb { font-size: .78rem; color: var(--ep-muted); }
.ep-topbar-toggle { color: var(--ep-text-soft); border: 1px solid var(--ep-border); background: #fff; }
.ep-search { display: flex; align-items: center; gap: 8px; background: var(--ep-surface-alt); border: 1px solid var(--ep-border); border-radius: 999px; padding: 6px 12px; color: var(--ep-muted); min-width: 240px; }
.ep-search input { border: 0; background: transparent; outline: none; font-size: .85rem; width: 100%; color: var(--ep-text); }
.ep-bell { color: var(--ep-text-soft); background: #fff; border: 1px solid var(--ep-border); }
.ep-bell:hover { color: var(--ep-primary); border-color: #BFDBFE; }
.ep-bell-badge { background: var(--ep-danger); }
.ep-user { color: var(--ep-text); background: #fff; border: 1px solid var(--ep-border); border-radius: 999px; padding: 4px 10px 4px 4px; }
.ep-avatar { background: linear-gradient(135deg, #2563EB, #7C3AED); color: #fff; }
.ep-content { padding: 26px 28px 40px; }

/* ── Page header ─────────────────────────────────────────────────────────── */
.ep-page-header { margin-bottom: 22px; }
.ep-page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--ep-text); }
.ep-page-title i { color: var(--mod, var(--ep-primary)); }
.ep-page-subtitle { color: var(--ep-muted); font-size: .9rem; margin-top: 4px; }
.ep-breadcrumb { font-size: .78rem; color: var(--ep-muted); margin-bottom: 4px; }
.ep-breadcrumb a { color: var(--ep-muted); }
.ep-breadcrumb a:hover { color: var(--ep-primary); }

/* ── Stat cards ──────────────────────────────────────────────────────────── */
.ep-stat-card { background: var(--ep-surface); border: 1px solid var(--ep-border); border-radius: var(--ep-radius); padding: 20px 22px; box-shadow: var(--ep-shadow-xs); }
.ep-stat-card:hover { transform: none; box-shadow: var(--ep-shadow-md); }
.ep-stat-card::before { display: none; }
.ep-stat-label { color: var(--ep-muted); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ep-stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--ep-text); }
.ep-stat-footer { color: var(--ep-muted); font-size: .8rem; }
.ep-stat-icon { border-radius: 10px; }
.ep-stat-icon.primary { background: var(--ep-primary-soft); color: var(--ep-primary); }
.ep-stat-icon.success { background: #ECFDF5; color: var(--ep-success); }
.ep-stat-icon.info { background: #EFF6FF; color: var(--ep-info); }
.ep-stat-icon.warning { background: #FFFBEB; color: var(--ep-warning); }
.ep-stat-icon.danger { background: #FEF2F2; color: var(--ep-danger); }
.ep-stat-icon.violet { background: #F5F3FF; color: #7C3AED; }
.ep-stat-icon.teal { background: #F0FDFA; color: #0D9488; }

/* ── Tarjetas de módulo (tablero de inicio) ──────────────────────────────── */
.ep-module-card { background: #fff; border: 1px solid var(--ep-border); border-radius: var(--ep-radius-lg); padding: 22px; box-shadow: var(--ep-shadow-xs); display: flex; flex-direction: column; gap: 14px; height: 100%; position: relative; overflow: hidden; }
.ep-module-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mod, var(--ep-primary)); }
.ep-module-head { display: flex; align-items: center; gap: 12px; }
.ep-module-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--mod, var(--ep-primary)); background: color-mix(in srgb, var(--mod, var(--ep-primary)) 12%, #fff); }
.ep-module-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.ep-module-head small { display: block; color: var(--ep-muted); font-size: .78rem; font-weight: 500; }
.ep-module-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ep-module-kpi { background: var(--ep-surface-alt); border: 1px solid var(--ep-border); border-radius: 10px; padding: 10px 12px; }
.ep-module-kpi b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.ep-module-kpi span { font-size: .72rem; color: var(--ep-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ep-module-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ep-module-actions .btn { font-size: .82rem; }

/* ── Estados de resultado (accesos) ──────────────────────────────────────── */
.ep-result { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .78rem; }
.ep-result.ok { background: #ECFDF5; color: #047857; }
.ep-result.bad { background: #FEF2F2; color: #B91C1C; }
.ep-result.cache { background: #FFFBEB; color: #B45309; }
.ep-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ep-dot.on { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.ep-dot.off { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.ep-dot.warn { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.ep-avatar-sm { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ep-border); background: var(--ep-surface-alt); }
.ep-avatar-lg { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; border: 1px solid var(--ep-border); background: var(--ep-surface-alt); }
.ep-ini { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ep-text-soft); background: var(--ep-surface-alt); border: 1px solid var(--ep-border); }
.ep-empty { text-align: center; padding: 40px 20px; color: var(--ep-muted); }
.ep-empty i { font-size: 2rem; opacity: .35; margin-bottom: 10px; display: block; }
.ep-kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: .9rem; }
.ep-kv dt { color: var(--ep-muted); font-weight: 600; }
.ep-kv dd { margin: 0; }
.ep-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ep-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ep-border); background: #fff; color: var(--ep-text-soft); font-size: .78rem; font-weight: 600; }
.ep-chip.active { background: var(--ep-primary); border-color: var(--ep-primary); color: #fff; }
.ep-live { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--ep-success); text-transform: uppercase; letter-spacing: .06em; }
.ep-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ep-success); animation: ep-pulse 1.6s infinite; }
@keyframes ep-pulse { 0% { box-shadow: 0 0 0 0 rgba(5,150,105,.5);} 70% { box-shadow: 0 0 0 8px rgba(5,150,105,0);} 100% { box-shadow: 0 0 0 0 rgba(5,150,105,0);} }
.ep-timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ep-border); }
.ep-timeline li:last-child { border-bottom: 0; }
.ep-hero-card { background: linear-gradient(135deg, #0B1220 0%, #1E293B 100%); color: #fff; border-radius: var(--ep-radius-lg); padding: 24px 26px; position: relative; overflow: hidden; }
.ep-hero-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.45), transparent 70%); }
.ep-hero-card h2 { color: #fff; font-weight: 800; letter-spacing: -.02em; font-size: 1.35rem; margin: 0 0 4px; }
.ep-hero-card p { color: rgba(255,255,255,.7); margin: 0; }
.ep-hero-card .btn-light { background: #fff; color: #0F172A; border: 0; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.ep-login-hero { background: radial-gradient(circle at 20% 20%, rgba(37,99,235,.35) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(124,58,237,.35) 0%, transparent 50%), linear-gradient(135deg, #0B1220 0%, #111A2E 100%); }
.ep-login-hero h2 .accent { background: linear-gradient(135deg, #60A5FA, #A78BFA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ep-feature-list .ep-feature-ic { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #93C5FD; }
.ep-login-logo .ep-logo-mark { background: linear-gradient(135deg, #2563EB, #0EA5E9); box-shadow: 0 6px 16px rgba(37,99,235,.35); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .ep-content { padding: 18px 16px 32px; }
    .ep-module-kpis { grid-template-columns: repeat(3, 1fr); }
    .ep-search { display: none; }
    .ep-kv { grid-template-columns: 1fr; }
}
@media print { .ep-sidebar, .ep-topbar, .no-print { display: none !important; } .ep-main { margin: 0 !important; } .ep-content { padding: 0; } }

/* ---- Central de novedades (Guardias) ---- */
.ep-nov { border-left: 4px solid var(--ep-border); }
.ep-nov-incidente { border-left-color: #EF4444; }
.ep-nov-nueva { animation: epNovIn .6s ease-out; }
@keyframes epNovIn { from { background: #FEF3C7; transform: translateY(-6px); } to { background: #fff; transform: none; } }
.ep-trans { background: #F8FAFC; border: 1px dashed var(--ep-border); border-radius: 8px; padding: 8px 12px; font-style: italic; color: var(--ep-text); }