/* ==========================================================================
   Ekklesia — hoja de estilos del tema "tablero moderno".
   Los colores de MudBlazor salen de EkklesiaTheme.cs; aquí viven las variables
   para lo que no pasa por MudBlazor y los componentes propios (prefijo ekk-).
   ========================================================================== */

:root {
  --ekk-navy: #16283f;
  --ekk-navy-2: #1f3a5f;
  --ekk-gold: #c8a951;
  --ekk-gold-2: #e0c574;
  --ekk-danger: #c62828;
  --ekk-success: #2e7d32;
  --ekk-warning: #a85f00;
  --ekk-radius: 12px;
  --ekk-radius-lg: 16px;
  --ekk-border: var(--mud-palette-lines-default);
  --ekk-surface: var(--mud-palette-surface);
  --ekk-muted: var(--mud-palette-text-secondary);
  --ekk-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --ekk-shadow-md: 0 6px 16px rgba(16, 24, 40, .08);
  --ekk-bottom-nav-height: 68px;
  --ekk-ease: cubic-bezier(.2, .8, .2, 1);
}

html, body { font-family: 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { background: var(--mud-palette-background); }

/* Blazor enfoca el h1 al navegar (FocusOnNavigate); el anillo de foco negro alrededor del título aparecía en
   cada pantalla como si fuera un cuadro de texto. Se conserva para navegación con teclado real. */
h1:focus { outline: none; }

/* --------------------------------------------------------------------------
   Layout: barra superior blanca, riel lateral azul marino, contenido
   -------------------------------------------------------------------------- */
.mud-appbar.ekk-appbar { border-bottom: 1px solid var(--ekk-border); box-shadow: none; }
.ekk-appbar .mud-toolbar { gap: 4px; }
.ekk-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.ekk-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--ekk-gold), var(--ekk-gold-2)); display: inline-flex; align-items: center; justify-content: center; color: var(--ekk-navy); flex-shrink: 0; }
.ekk-brand-name { font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; }
.ekk-appbar-btn { border: 1px solid var(--ekk-border); border-radius: 10px; width: 38px; height: 38px; }
.ekk-appbar-btn .mud-icon-root { font-size: 1.25rem; }
.ekk-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--mud-palette-tertiary); color: var(--ekk-navy); font-weight: 700; font-size: .8125rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ekk-user-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; border: 1px solid var(--ekk-border); border-radius: 10px; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.ekk-user-btn .ekk-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .8125rem; }
.ekk-inline-form { display: inline; margin: 0; }
.ekk-link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; }

.ekk-drawer.mud-drawer { border-right: 0; }
.ekk-drawer .mud-drawer-content { display: flex; flex-direction: column; }
.ekk-nav { padding: 12px 12px 16px; display: flex; flex-direction: column; flex-grow: 1; }
.ekk-nav-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.ekk-nav-brand .ekk-nav-church { display: flex; flex-direction: column; min-width: 0; }
.ekk-nav-brand .ekk-nav-church-name { color: #fff; font-weight: 800; font-size: .9375rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ekk-nav-brand .ekk-nav-church-code { color: #8fa3bd; font-size: .6875rem; }
.ekk-nav-section { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6f86a3; padding: 14px 10px 4px; }
.ekk-nav .mud-nav-link { border-radius: 10px; margin: 1px 0; padding: 9px 10px; font-size: .84375rem; font-weight: 500; color: var(--mud-palette-drawer-text); min-height: 40px; }
.ekk-nav .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-drawer-icon); font-size: 1.25rem; margin-right: 10px; }
.mud-navmenu.ekk-nav .mud-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* MudBlazor pinta el activo con el color primario sobre un 10 % del mismo tono (0,5,0 de especificidad): sobre el
   riel azul marino el texto desaparecía. Se iguala la especificidad para que gane el dorado. */
.mud-navmenu.mud-navmenu-default.ekk-nav .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu.mud-navmenu-default.ekk-nav .mud-nav-link.active:not(.mud-nav-link-disabled):hover { background: var(--ekk-gold); color: var(--ekk-navy); font-weight: 700; }
.mud-navmenu.mud-navmenu-default.ekk-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-navmenu.mud-navmenu-default.ekk-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text { color: var(--ekk-navy); }
.ekk-nav .mud-nav-link.mud-nav-link-disabled { opacity: .45; }
.ekk-nav .mud-nav-link .mud-chip { height: 18px; font-size: .625rem; background: rgba(255, 255, 255, .1); color: #c6d2e2; }
.ekk-nav-footer { margin-top: auto; padding: 12px 8px 0; font-size: .6875rem; color: #6f86a3; }

.ekk-main { padding-bottom: calc(var(--ekk-bottom-nav-height) + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { .ekk-main { padding-bottom: 0; } }
.ekk-container { max-width: 1400px; }

/* --------------------------------------------------------------------------
   Superficies: tarjetas con borde fino en lugar de sombra
   -------------------------------------------------------------------------- */
.mud-paper.ekk-card, .mud-card.ekk-card, .ekk-card { border: 1px solid var(--ekk-border); border-radius: var(--ekk-radius-lg); box-shadow: none; background: var(--ekk-surface); }
.mud-paper.mud-elevation-1, .mud-card.mud-elevation-1, .mud-table.mud-elevation-1, .mud-tabs.mud-elevation-1 { box-shadow: none; border: 1px solid var(--ekk-border); }
.mud-paper.mud-elevation-2, .mud-expand-panel.mud-elevation-1 { box-shadow: var(--ekk-shadow-sm); border: 1px solid var(--ekk-border); }
.mud-table { border-radius: var(--ekk-radius-lg); }
.mud-table .mud-table-container { border-radius: inherit; }
.mud-table-head .mud-table-cell { font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--ekk-muted); text-transform: none; }
.mud-table-cell { font-variant-numeric: tabular-nums; }
.mud-table-hover .mud-table-row:hover { background: var(--mud-palette-background); }
.mud-dialog { border-radius: var(--ekk-radius-lg); }
.mud-dialog .mud-dialog-title { font-weight: 800; letter-spacing: -.01em; }
.mud-chip { font-weight: 600; }
.mud-chip.mud-chip-text { border-radius: 8px; }
.mud-alert { border-radius: var(--ekk-radius); }
.mud-button-root.mud-button { border-radius: 10px; }
.mud-button-filled { box-shadow: none; }
.mud-button-filled:hover { box-shadow: var(--ekk-shadow-sm); }
.mud-input-control .mud-input { border-radius: 10px; }
.mud-tabs .mud-tabs-toolbar { border-bottom: 1px solid var(--ekk-border); }
.mud-tab { text-transform: none; font-weight: 600; min-width: 96px; }
.mud-table-pagination .mud-table-pagination-caption { font-size: .8125rem; }

/* --------------------------------------------------------------------------
   Componentes compartidos
   -------------------------------------------------------------------------- */
/* Cabecera de página */
.ekk-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; }
.ekk-page-header h1 { margin: 0; }
.ekk-page-header .ekk-page-eyebrow { display: block; font-size: .75rem; font-weight: 600; color: var(--ekk-muted); margin-bottom: 2px; }
.ekk-page-header .ekk-page-back { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 600; color: var(--mud-palette-primary); text-decoration: none; margin-bottom: 6px; min-height: 32px; }
.ekk-page-header .ekk-page-back:hover { text-decoration: underline; }

/* Las pestañas de las fichas son una tarjeta: sin este relleno el contenido quedaba pegado al borde. */
.mud-tabs.ekk-card { overflow: hidden; }
.mud-tabs.ekk-card .mud-tabs-panels { padding: 20px; }
.mud-tabs.ekk-card .mud-tabs-panels .mud-table, .mud-tabs.ekk-card .mud-tabs-panels .mud-paper { border-radius: var(--ekk-radius); }
@media (max-width: 599.98px) { .mud-tabs.ekk-card .mud-tabs-panels { padding: 14px; } }
.mud-card.ekk-card .mud-card-content { padding: 16px 20px; }
.ekk-page-header .ekk-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 599.98px) {
  .ekk-page-header .ekk-page-actions { width: 100%; }
  .ekk-page-header .ekk-page-actions > * { flex: 1 1 auto; }
  .ekk-page-header .ekk-page-actions .mud-button-root { width: 100%; }
}

/* Tarjeta KPI */
.ekk-kpi { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-width: 0; }
.ekk-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ekk-kpi-label { font-size: .8125rem; font-weight: 600; color: var(--ekk-muted); }
.ekk-kpi-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ekk-kpi-icon .mud-icon-root { font-size: 1.05rem; }
.ekk-kpi-value { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ekk-kpi-hint { font-size: .75rem; font-weight: 600; color: var(--ekk-muted); }
.mud-paper.ekk-card.ekk-kpi-primary { background: var(--ekk-navy); color: #fff; border-color: var(--ekk-navy); }
.ekk-kpi-primary .ekk-kpi-value { color: #fff; }
.ekk-kpi-primary .ekk-kpi-label, .ekk-kpi-primary .ekk-kpi-hint { color: #a9bad2; }
.ekk-kpi-icon-default { background: var(--mud-palette-background-gray); color: var(--mud-palette-primary); }
.ekk-kpi-icon-success { background: rgba(46, 125, 50, .12); color: var(--mud-palette-success); }
.ekk-kpi-icon-error { background: rgba(198, 40, 40, .1); color: var(--mud-palette-error); }
.ekk-kpi-icon-warning { background: rgba(168, 95, 0, .12); color: var(--mud-palette-warning); }
.ekk-kpi-icon-info { background: rgba(15, 98, 176, .1); color: var(--mud-palette-info); }
.ekk-kpi-primary .ekk-kpi-icon { background: rgba(200, 169, 81, .22); color: var(--ekk-gold-2); }
@media (max-width: 599.98px) { .ekk-kpi { padding: 14px; } }

/* Barra de filtros */
.ekk-filters { padding: 12px 16px 8px; margin-bottom: 16px; }
.ekk-filters .mud-input-control { margin-top: 0; }
@media (max-width: 599.98px) { .ekk-filters { padding: 8px 12px 4px; } }

/* Tarjeta de sección (título + contenido) */
.ekk-section { display: flex; flex-direction: column; margin-bottom: 16px; overflow: hidden; }
.ekk-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 20px; border-bottom: 1px solid var(--ekk-border); }
.ekk-section-title { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.ekk-section-body { padding: 16px 20px; }
.ekk-section-body.ekk-section-flush { padding: 0; }
.ekk-section-body.ekk-section-flush .mud-table, .ekk-section-body.ekk-section-flush .mud-paper { border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 599.98px) { .ekk-section-head { padding: 12px 14px; } .ekk-section-body { padding: 12px 14px; } }

/* Estado vacío */
.ekk-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 36px 20px; color: var(--ekk-muted); }
.ekk-empty-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--mud-palette-background-gray); display: inline-flex; align-items: center; justify-content: center; color: var(--mud-palette-primary); margin-bottom: 4px; }
.ekk-empty-icon .mud-icon-root { font-size: 1.6rem; }
.ekk-empty-title { font-weight: 700; color: var(--mud-palette-text-primary); }
.ekk-empty-text { font-size: .875rem; max-width: 420px; }

/* Lista de acciones pendientes / enlaces destacados */
.ekk-action-list { display: flex; flex-direction: column; gap: 8px; }
.ekk-action-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: var(--ekk-radius); background: var(--mud-palette-background); border: 1px solid transparent; color: inherit; text-decoration: none; transition: border-color .15s var(--ekk-ease), background .15s var(--ekk-ease); }
a.ekk-action-item:hover { border-color: var(--ekk-border); background: var(--ekk-surface); }
.ekk-action-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--mud-palette-background-gray); color: var(--mud-palette-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ekk-action-body { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.ekk-action-title { font-size: .875rem; font-weight: 700; }
.ekk-action-meta { font-size: .75rem; color: var(--ekk-muted); font-variant-numeric: tabular-nums; }
.ekk-action-item.ekk-action-danger { background: rgba(198, 40, 40, .06); border-color: rgba(198, 40, 40, .25); }
.ekk-action-item.ekk-action-danger .ekk-action-title { color: var(--mud-palette-error); font-weight: 600; }
.ekk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ekk-dot-danger { background: var(--mud-palette-error); }
.ekk-dot-success { background: var(--mud-palette-success); }
.ekk-dot-warning { background: var(--mud-palette-warning); }
.ekk-dot-info { background: var(--mud-palette-info); }
.ekk-dot-default { background: var(--mud-palette-text-secondary); }
.ekk-label-danger { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-error); margin: 8px 0 4px; }
.ekk-label-muted { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ekk-muted); margin: 8px 0 4px; }

/* Píldora de estado */
.ekk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.ekk-pill-warning { background: #fff7e0; color: #7a5200; border-color: #f3dfa3; }
.ekk-pill-success { background: #e8f5ec; color: #1b5e20; border-color: #c5e3ca; }
.ekk-pill-info { background: #e6f0fb; color: #0b4a86; border-color: #bcd6f2; }
.ekk-pill-error { background: #fdecea; color: #8e1c1c; border-color: #f5c2c0; }
.ekk-pill-default { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); border-color: var(--ekk-border); }

/* Accesos rápidos de la portada */
.ekk-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ekk-quick-link { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border-radius: var(--ekk-radius); background: var(--ekk-surface); border: 1px solid var(--ekk-border); color: inherit; text-decoration: none; font-size: .8125rem; font-weight: 600; transition: border-color .15s var(--ekk-ease), transform .15s var(--ekk-ease); }
.ekk-quick-link:hover { border-color: var(--mud-palette-primary); transform: translateY(-1px); }
.ekk-quick-link .ekk-action-icon { width: 32px; height: 32px; }
.ekk-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: var(--ekk-radius-lg); background: var(--ekk-navy); color: #fff; margin-bottom: 20px; }
.ekk-hero h1 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.ekk-hero-sub { color: #a9bad2; font-size: .875rem; margin-top: 4px; }
.ekk-hero-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.ekk-hero-roles .mud-chip { background: rgba(255, 255, 255, .1); color: #e6edf6; border: 0; }

/* Portada de catálogos: tarjetas grandes con descripción (la rejilla compacta de la portada las apretaba) */
.ekk-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ekk-catalog-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; min-height: 96px; border-radius: var(--ekk-radius-lg); background: var(--ekk-surface); border: 1px solid var(--ekk-border); color: inherit; text-decoration: none; transition: border-color .15s var(--ekk-ease), transform .15s var(--ekk-ease); }
.ekk-catalog-card:hover { border-color: var(--mud-palette-primary); transform: translateY(-1px); }
.ekk-catalog-card .ekk-action-icon { width: 44px; height: 44px; border-radius: 12px; }
.ekk-catalog-card .ekk-action-icon .mud-icon-root { font-size: 1.4rem; }
.ekk-catalog-title { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.ekk-catalog-text { font-size: .8125rem; color: var(--ekk-muted); line-height: 1.4; margin-top: 2px; }
.ekk-catalog-chevron { flex-shrink: 0; }
@media (max-width: 599.98px) { .ekk-catalog-grid { grid-template-columns: 1fr; gap: 10px; } .ekk-catalog-card { padding: 14px 16px; min-height: 0; } }
/* Tablas de catálogo: pocas filas, así que respiran más que los listados densos */
.ekk-catalog-table .mud-table-cell { padding: 12px 16px; }
@media (max-width: 599.98px) { .ekk-catalog-table .mud-table-cell { padding: 8px 12px; } }

/* Hoja de conteo de efectivo (RF-FIN-05): billetes | monedas | otras monedas */
.ekk-cash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 960px) { .ekk-cash-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1.2fr); } }
.ekk-cash-col { border: 1px solid var(--ekk-border); border-radius: var(--ekk-radius); padding: 12px 14px; background: var(--mud-palette-background); min-width: 0; }
.ekk-cash-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--ekk-border); }
.ekk-cash-col-sub { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ekk-cash-rows { display: flex; flex-direction: column; gap: 4px; }
.ekk-cash-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.2fr); align-items: center; gap: 8px; }
.ekk-cash-denom { font-size: .875rem; font-weight: 700; }
.ekk-cash-sub { font-size: .875rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--ekk-muted); }
.ekk-cash-qty.mud-input-control { margin: 0; }
.ekk-cash-foreign { border: 1px solid var(--ekk-border); border-radius: var(--ekk-radius); padding: 10px 12px 6px; margin-bottom: 10px; background: var(--ekk-surface); }
.ekk-cash-foreign-total { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 100%; }
.ekk-cash-totals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
@media (min-width: 600px) { .ekk-cash-totals { grid-template-columns: 1fr 1fr; } }
.ekk-cash-total { padding: 14px 16px; border-radius: var(--ekk-radius); border: 1px solid var(--ekk-border); background: var(--ekk-surface); }
.ekk-cash-total-diff { background: var(--mud-palette-background); }

/* Lista de actividades del mes bajo el calendario */
.ekk-action-item.ekk-cal-past { opacity: .6; }
.ekk-action-item.ekk-action-check { cursor: pointer; }
.ekk-role-list { display: flex; flex-direction: column; gap: 6px; }
.ekk-role-item { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 4px; border-radius: var(--ekk-radius); cursor: pointer; }
.ekk-role-item:hover { background: var(--mud-palette-background); }
.ekk-credentials { padding: 16px 20px; border-color: var(--ekk-gold); }

/* Galería de fotos (evidencia de la reunión de célula) */
.ekk-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 8px 0; }
.ekk-gallery-item { position: relative; border-radius: var(--ekk-radius); overflow: hidden; border: 1px solid var(--ekk-border); background: var(--mud-palette-background-gray); aspect-ratio: 1; display: block; }
.ekk-gallery-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ekk-gallery-remove.mud-icon-button { position: absolute; top: 4px; right: 4px; background: rgba(255, 255, 255, .85); }
.ekk-gallery-compact { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); margin: 4px 0 8px 52px; }
.ekk-report-row { display: flex; flex-direction: column; }
@media (max-width: 599.98px) { .ekk-gallery-compact { margin-left: 0; } }

/* Texto escrito con saltos de línea (funciones, pasos de un procedimiento) */
.ekk-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Píldora de "próximamente" y otros */
.ekk-support-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--mud-palette-background-gray); padding: 2px 6px; border-radius: 6px; }
.ekk-unread { font-weight: 700; }
.ekk-table { border-radius: var(--ekk-radius-lg); }

/* --------------------------------------------------------------------------
   Barra inferior móvil con acción central
   -------------------------------------------------------------------------- */
.ekk-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
  height: calc(var(--ekk-bottom-nav-height) + env(safe-area-inset-bottom));
  padding: 0 4px env(safe-area-inset-bottom);
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--mud-palette-surface); border-top: 1px solid var(--ekk-border);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
}
.ekk-bottom-nav-item {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 48px; min-height: 44px; font-size: .6875rem; font-weight: 600; text-decoration: none; color: var(--mud-palette-text-secondary);
  background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0 2px;
}
.ekk-bottom-nav-item .mud-icon-root { font-size: 1.4rem; }
.ekk-bottom-nav-item.active { color: var(--mud-palette-primary); font-weight: 700; }
.ekk-bottom-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ekk-bottom-nav-fab { color: var(--mud-palette-text-primary); }
.ekk-bottom-nav-fab .ekk-fab { width: 50px; height: 50px; margin-top: -24px; border-radius: 50%; background: var(--ekk-gold); color: var(--ekk-navy); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(200, 169, 81, .45); }
.ekk-bottom-nav-fab .ekk-fab .mud-icon-root { font-size: 1.6rem; }

/* --------------------------------------------------------------------------
   Páginas de cuenta (formularios SSR estáticos)
   -------------------------------------------------------------------------- */
.ekk-account-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ekk-navy); }
.ekk-account-side { display: none; position: relative; overflow: hidden; color: #fff; padding: 48px; flex-direction: column; justify-content: space-between; background: radial-gradient(1200px 600px at -10% -10%, #2c5282 0%, transparent 60%), radial-gradient(800px 500px at 110% 110%, rgba(200, 169, 81, .35) 0%, transparent 60%), var(--ekk-navy); }
.ekk-account-side-brand { display: flex; align-items: center; gap: 12px; }
.ekk-account-side-brand .ekk-brand-name { font-size: 1.25rem; color: #fff; }
.ekk-account-side-title { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; max-width: 420px; }
.ekk-account-side-text { color: #a9bad2; font-size: .9375rem; max-width: 420px; margin-top: 12px; }
.ekk-account-side-foot { color: #6f86a3; font-size: .75rem; }
.ekk-account-main { display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--mud-palette-background); }
@media (min-width: 960px) {
  .ekk-account-page { grid-template-columns: 5fr 7fr; }
  .ekk-account-side { display: flex; }
  .ekk-account-main { padding: 48px; }
}
.ekk-account-card { width: 100%; max-width: 440px; border-radius: var(--ekk-radius-lg); border: 1px solid var(--ekk-border); box-shadow: var(--ekk-shadow-md); }
.ekk-account-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 20px; }
.ekk-account-head .ekk-brand-mark { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 6px; }
.ekk-account-head .ekk-brand-mark .mud-icon-root { font-size: 1.5rem; }
.ekk-account-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.ekk-form { display: flex; flex-direction: column; gap: 14px; }
.ekk-field { display: flex; flex-direction: column; gap: 6px; }
.ekk-field label { font-size: .8125rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.ekk-input { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 10px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); min-height: 46px; transition: border-color .15s var(--ekk-ease), box-shadow .15s var(--ekk-ease); }
.ekk-input:focus { outline: none; border-color: var(--ekk-navy-2); box-shadow: 0 0 0 3px rgba(31, 58, 95, .18); }
.ekk-input:disabled { opacity: .7; }
.ekk-input-code { letter-spacing: .3em; font-size: 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
.ekk-checkbox label { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 500; color: var(--mud-palette-text-primary); }
.ekk-checkbox input { width: 18px; height: 18px; accent-color: var(--ekk-navy-2); }
.ekk-validation { color: var(--ekk-danger); font-size: .8rem; }
.validation-message { color: var(--ekk-danger); font-size: .8rem; }
.ekk-btn { font: inherit; font-weight: 700; padding: 12px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; font-size: .9375rem; transition: filter .15s var(--ekk-ease), box-shadow .15s var(--ekk-ease); }
.ekk-btn-primary { background: var(--ekk-navy-2); color: #fff; }
.ekk-btn-primary:hover { filter: brightness(1.1); box-shadow: var(--ekk-shadow-sm); }
.ekk-btn-outline { background: transparent; color: var(--ekk-navy-2); border-color: var(--mud-palette-lines-inputs); }
.ekk-btn-outline:hover { background: var(--mud-palette-background); }
.ekk-btn-danger { background: var(--ekk-danger); color: #fff; }
.ekk-steps { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 12px; }
.ekk-qr { width: 200px; height: 200px; image-rendering: pixelated; border: 8px solid #fff; border-radius: 12px; box-shadow: var(--ekk-shadow-sm); }
.ekk-shared-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 6px 10px; background: var(--mud-palette-background-gray); border-radius: 8px; word-break: break-all; }
.ekk-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ekk-recovery-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px; background: var(--mud-palette-background-gray); border-radius: 8px; text-align: center; letter-spacing: .1em; }
.ekk-error-list { margin: 0; padding-left: 1.2rem; }

/* Área del operador de la plataforma (estática, sin menú de iglesia) */
.ekk-platform { min-height: 100vh; background: var(--mud-palette-background); }
.ekk-platform-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--ekk-surface); border-bottom: 1px solid var(--ekk-border); }
.ekk-platform-main { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
.ekk-platform-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ekk-platform-head h1 { margin: 0; }
.ekk-platform-card { background: var(--ekk-surface); border: 1px solid var(--ekk-border); border-radius: var(--ekk-radius-lg); padding: 24px; max-width: 640px; }
.ekk-platform-table { max-width: none; padding: 0; overflow-x: auto; }
.ekk-platform-table table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ekk-platform-table th, .ekk-platform-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--ekk-border); vertical-align: middle; }
.ekk-platform-table th { font-size: .75rem; font-weight: 700; color: var(--ekk-muted); }
.ekk-platform-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 16px 0 24px; }
.ekk-platform-dl dt { font-weight: 600; color: var(--ekk-muted); }
.ekk-platform-dl dd { margin: 0; overflow-wrap: anywhere; }

/* Blazor error UI (static) */
#blazor-error-ui { display: none; }

/* Audit log JSON */
.ekk-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; white-space: pre-wrap; word-break: break-word; margin: 0; max-height: 240px; overflow: auto; }

/* --------------------------------------------------------------------------
   Modo oscuro: ajustes que MudBlazor no cubre con la paleta
   -------------------------------------------------------------------------- */
html.ekk-dark .ekk-pill-warning { background: rgba(224, 165, 58, .16); color: #f2cd7c; border-color: rgba(224, 165, 58, .35); }
html.ekk-dark .ekk-pill-success { background: rgba(95, 180, 102, .16); color: #9fdca4; border-color: rgba(95, 180, 102, .35); }
html.ekk-dark .ekk-pill-info { background: rgba(109, 179, 242, .16); color: #b3d8f8; border-color: rgba(109, 179, 242, .35); }
html.ekk-dark .ekk-pill-error { background: rgba(239, 107, 107, .16); color: #f5b3b3; border-color: rgba(239, 107, 107, .35); }
html.ekk-dark .mud-paper.ekk-card.ekk-kpi-primary { background: #1f3a5f; border-color: #1f3a5f; }
html.ekk-dark .ekk-hero { background: #1f3a5f; }
html.ekk-dark .mud-navmenu.mud-navmenu-default.ekk-nav .mud-nav-link.active:not(.mud-nav-link-disabled) { background: var(--ekk-gold-2); color: #0d1a2b; }
html.ekk-dark .ekk-bottom-nav { box-shadow: 0 -4px 16px rgba(0, 0, 0, .35); }
html.ekk-dark .ekk-account-main { background: #0f1a2a; }
html.ekk-dark .ekk-qr { border-color: #e6edf6; }