html, body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Defer rendering of large offscreen sections */
.content-defer{ content-visibility:auto; contain-intrinsic-size: 1px 600px; }

h1:focus {
 outline: none;
}

a, .btn-link {
 color: #0071c1;
}

.btn-primary {
 color: #fff;
 background-color: #1b6ec2;
 border-color: #1861ac;
}

/* Fix malformed box-shadow */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
 box-shadow:000 .25rem #258cfb;
}

.content {
 padding-top:1.1rem;
}

.valid.modified:not([type=checkbox]) {
 outline:1px solid #26b050;
}

.invalid {
 outline:1px solid red;
}

.validation-message {
 color: red;
}

#blazor-error-ui {
 color-scheme: light only;
 background: lightyellow;
 bottom:0;
 box-shadow:0 -1px2px rgba(0,0,0,0.2);
 box-sizing: border-box;
 display: none;
 left:0;
 padding:0.6rem1.25rem0.7rem1.25rem;
 position: fixed;
 width:100%;
 z-index:1000;
}

 #blazor-error-ui .dismiss {
 cursor: pointer;
 position: absolute;
 right:0.75rem;
 top:0.5rem;
 }

.blazor-error-boundary {
 background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0-idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI26My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg gNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat1rem/1.8rem, #b32121;
 padding:1rem1rem1rem3.7rem;
 color: white;
}

 .blazor-error-boundary::after {
 content: "An error has occurred.";
 }

/* Center the initial loading spinner */
.loading-progress {
 position: fixed;
 display: block;
 width:8rem;
 height:8rem;
 left:50%;
 top:50%;
 transform: translate(-50%, -50%);
 z-index:9999;
}

.loading-progress circle {
 fill: none;
 stroke: #e0e0e0;
 stroke-width:0.6rem;
 transform-origin:50%50%;
 transform: rotate(-90deg);
 }

 .loading-progress circle:last-child {
 stroke: #1b6ec2;
 stroke-dasharray: calc(3.141 * var(--blazor-load-percentage,0%) *0.8),500%;
 transition: stroke-dasharray0.05s ease-in-out;
 }

/* Center the percentage text inside the spinner */
.loading-progress-text {
 position: fixed;
 left:50%;
 top:50%;
 transform: translate(-50%, -50%);
 text-align: center;
 font-weight:700;
 z-index:10000;
 color: var(--app-fg, #fff);
}
.loading-progress-text::after {
 content: var(--blazor-load-percentage-text, "0%");
}

/* Optional: center the loading text under the spinner */
.loading-progress-text {
 position: fixed;
 left:50%;
 top: calc(50% +3.25rem);
 transform: translateX(-50%);
 text-align: center;
 font-weight: bold;
 z-index:9999;
}

/* Ensure loading percentage text is visible under spinner */
.loading-progress-text::after {
 content: var(--blazor-load-percentage-text, "0%");
 color: var(--app-fg, #fff);
 font-weight:600;
}

code {
 color: #c02d76;
}

/* Wordmark debajo del logo: 50% m?s peque?o y fuente distinta */
.brand-wordmark{
 font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* fuente diferenciada */
 font-size: .5rem; /* 50% del tama?o peque?o base */
 letter-spacing:.05rem;
 text-transform:uppercase;
 line-height:1;
 opacity:.9;
}
:root[data-theme="light"] .brand-wordmark{ color:#0b0b0c; }
:root[data-theme="dark"] .brand-wordmark{ color:#f5f5f7; }

/* THEME VARIABLES */
:root{
 --app-bg:#0b0b0c;
 --app-fg:#f5f5f7;
 --app-muted:#a1a1a6;
 --app-accent:#0a84ff; /* macOS blue */
 --app-card:#1c1c1e;
 --app-border:rgba(255,255,255,.08);
 --app-shadow:010px30px rgba(0,0,0,.35);
 /* Bootstrap color variables bound to theme */
 --bs-body-bg: var(--app-bg);
 --bs-body-color: var(--app-fg);
 --bs-card-bg: var(--app-card);
 --bs-card-color: var(--app-fg);
 --bs-border-color: var(--app-border);
}

:root[data-theme="dark"]{
 --app-bg:#0b0b0c;
 --app-fg:#f5f5f7;
 --app-muted:#a1a1a6;
 --app-accent:#0a84ff;
 --app-card:#1c1c1e;
 --app-border:rgba(255,255,255,.08);
 --app-shadow:010px30px rgba(0,0,0,.35);
 /* Ensure Bootstrap variables match dark theme as well */
 --bs-body-bg: var(--app-bg);
 --bs-body-color: var(--app-fg);
 --bs-card-bg: var(--app-card);
 --bs-card-color: var(--app-fg);
 --bs-border-color: var(--app-border);
 /* Fix low-contrast helper text in dark theme */
 --bs-secondary-color: color-mix(in srgb, var(--app-fg) 70%, transparent);
 --bs-tertiary-color: color-mix(in srgb, var(--app-fg) 55%, transparent);
 --bs-emphasis-color: var(--app-fg);
}

/* Light theme variables */
:root[data-theme="light"]{
 --app-bg:#f5f5f7;
 --app-fg:#111111; /* texto negro en claro */
 --app-muted:#575757;
 --app-accent:#0a84ff;
 --app-card:#ffffff;
 --app-border:rgba(0,0,0,.08);
 --app-shadow:010px30px rgba(0,0,0,.10);
 /* Ensure Bootstrap variables match light theme */
 --bs-body-bg: var(--app-bg);
 --bs-body-color: var(--app-fg);
 --bs-card-bg: var(--app-card);
 --bs-card-color: var(--app-fg);
 --bs-border-color: var(--app-border);
 --bs-secondary-color: color-mix(in srgb, var(--app-fg) 65%, transparent);
 --bs-tertiary-color: color-mix(in srgb, var(--app-fg) 45%, transparent);
 --bs-emphasis-color: var(--app-fg);
}

html, body{
 height:100%;
 background:linear-gradient(180deg, var(--app-bg)0%, var(--app-bg)100%);
 color:var(--app-fg);
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}

/* Global UI constants */
:root{
  /* Navbar height used to offset fixed elements like toasts */
  --app-navbar-height: 56px;
}

/* Utility: force high-contrast text respecting theme */
.text-contrast{ color: var(--app-fg) !important; opacity:.95; }
.text-contrast-muted{ color: var(--app-muted) !important; opacity:.9; }

/* NAVBAR */
.app-navbar{
 backdrop-filter:saturate(180%) blur(16px);
 -webkit-backdrop-filter:saturate(180%) blur(16px);
 background:color-mix(in srgb, var(--app-bg)70%, transparent);
 border-bottom:1px solid var(--app-border);
 z-index:4000; /* ensure navbar is above overlays */
}
.app-navbar .navbar-brand{ color:var(--app-fg); }
.app-navbar .nav-link{ color:var(--app-muted); }
.app-navbar .nav-link:hover,.app-navbar .nav-link.active{ color:var(--app-fg); }

.navbar-toggler{ filter:contrast(.5); }

.app-main{ padding-top:1.25rem; }

/* CARDS Y TABLAS */
.card{ background:var(--app-card); border:1px solid var(--app-border); box-shadow:var(--app-shadow); border-radius:14px; color: var(--bs-card-color); }
.card-header{ background:transparent; border-bottom:1px solid var(--app-border); color:var(--app-fg); }
.card .card-body{ color: var(--bs-card-color); }
.card .text-muted{ color: var(--app-muted) !important; }
.table{ color:var(--app-fg); }
.table thead th{ color:var(--app-muted); border-bottom:1px solid var(--app-border); }
.table tbody tr{ border-color:var(--app-border); }
/* Dark mode table look & feel */
:root[data-theme="dark"] .table{
 /* Bootstrap table CSS variables overridden for dark theme */
 --bs-table-color: var(--app-fg);
 --bs-table-bg: transparent;
 --bs-table-border-color: var(--app-border);
 --bs-table-striped-bg: color-mix(in srgb, var(--app-fg)4%, transparent);
 --bs-table-striped-color: var(--app-fg);
 --bs-table-hover-bg: color-mix(in srgb, var(--app-fg)6%, transparent);
 --bs-table-hover-color: var(--app-fg);
}
:root[data-theme="dark"] .card .table thead th{
 background: color-mix(in srgb, var(--app-card)92%, #0008%);
}

/* Dark theme overrides for Bootstrap light variants to avoid bright rows */
:root[data-theme="dark"] .table-light{
 /* Use a subtle light-on-dark tint instead of bright light background */
 --bs-table-bg: color-mix(in srgb, var(--app-fg)6%, transparent);
 --bs-table-color: var(--app-fg);
 --bs-table-border-color: var(--app-border);
}

/* Also tame plain bg-light blocks in dark theme */
:root[data-theme="dark"] .bg-light{
 background-color: color-mix(in srgb, var(--app-fg)6%, transparent) !important;
 color: var(--app-fg) !important;
 border-color: var(--app-border) !important;
}

/* BOTONES */
.btn-primary{ background:var(--app-accent); border-color:var(--app-accent); }
.btn-outline-primary{ color:var(--app-accent); border-color:var(--app-accent); }
.btn-outline-primary:hover{ background:color-mix(in srgb, var(--app-accent)15%, transparent); }
.btn-danger{ background:#ff3b30; border-color:#ff3b30; }
.btn-secondary{ background:#e5e5ea; border-color:#e5e5ea; color:var(--app-fg); }
/* Dark mode secondary button: better contrast */
:root[data-theme="dark"] .btn-secondary{ background:#3a3a3c; border-color:#3a3a3c; color:#fff; }
:root[data-theme="dark"] .btn-secondary:hover, 
:root[data-theme="dark"] .btn-secondary:focus{ background:#4a4a4c; border-color:#4a4a4c; color:#fff; }
:root[data-theme="dark"] .btn-secondary:active, 
:root[data-theme="dark"] .btn-secondary.active{ background:#2c2c2e; border-color:#2c2c2e; color:#fff; }
/* Improve contrast for outline-dark (e.g. print button) in dark mode */
:root[data-theme="dark"] .btn-outline-dark{ color:#fff; border-color:#9a9aa0; }
:root[data-theme="dark"] .btn-outline-dark:hover,
:root[data-theme="dark"] .btn-outline-dark:focus{ color:#111; background:#f5f5f7; border-color:#f5f5f7; }
/* Optional helper for print button to ensure visibility regardless of theme */
.btn-print{ --btn-border:#6c757d; --btn-fg:#2b2b2e; }
:root[data-theme="dark"] .btn-print{ --btn-border:#d1d1d6; --btn-fg:#f5f5f7; }
.btn-print{ border-color:var(--btn-border) !important; color:var(--btn-fg) !important; }

/* FORMULARIOS */
.form-label{ color:var(--app-fg); }
.form-control,.form-select{
 background:color-mix(in srgb, var(--app-card)90%, var(--app-bg)10%); color:var(--app-fg); border:1px solid var(--app-border);
}
.form-control::placeholder{ color:var(--app-muted); opacity:1; }
.form-control:focus,.form-select:focus{ border-color:var(--app-accent); box-shadow:000 .2rem color-mix(in srgb, var(--app-accent)20%, transparent); }
.form-check-input{ background:var(--app-card); border-color:var(--app-border); }
/* Ensure the checkmark icon is visible */
.form-check-input:checked{ background-color:var(--app-accent); border-color:var(--app-accent); background-image: var(--bs-form-check-bg-image); }
/* Input group text themed for dark */
:root[data-theme="dark"] .input-group-text{ background:color-mix(in srgb, var(--app-card)90%, var(--app-bg)10%); color:var(--app-muted); border-color:var(--app-border); }

/* Improve checkbox visibility in dark theme */
:root[data-theme="dark"] .form-check-input{
 border-color: rgba(255,255,255,.45);
 border-width:2px;
 background-color: color-mix(in srgb, var(--app-card)85%, var(--app-bg)15%);
}
:root[data-theme="dark"] .form-check-input:hover{
 border-color: var(--app-accent);
}
:root[data-theme="dark"] .form-check-input:focus{
 border-color: var(--app-accent);
 box-shadow:000 .2rem color-mix(in srgb, var(--app-accent)25%, transparent);
}

/* Make the native check mark use the brand color */
.form-check-input{ accent-color: var(--app-accent); }

/* Customize checkmark color: black in light theme, white in dark theme */
:root[data-theme="light"]{ --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='002020'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M610l336-6'/%3e%3c/svg%3e"); }
:root[data-theme="dark"]{ --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='002020'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M610l336-6'/%3e%3c/svg%3e"); }

/* ALERTAS / BADGES */
.alert{ border-radius:12px; border-color:var(--app-border); }
.badge{ border-radius:8px; }
/* Badge for movement type with high contrast in dark mode */
.badge-mov{
  display:inline-block;
  background: color-mix(in srgb, var(--app-accent) 30%, #0a58ca);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--app-accent) 60%, transparent);
  padding: .25rem .5rem;
  border-radius: .35rem;
  font-weight: 600;
}
:root[data-theme="light"] .badge-mov{
  background: color-mix(in srgb, var(--app-accent) 12%, #e9f2ff);
  color: #0b1324;
  border-color: color-mix(in srgb, var(--app-accent) 40%, transparent);
}

/* LOADING */
.loading-progress circle:last-child{ stroke:var(--app-accent); }
/* Do not block clicks/typing when overlay is visible */
.loading-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); z-index:1050; pointer-events: none; }

/* App modal overlay to match theme */
.app-modal-overlay{ position:fixed; inset:0; background:color-mix(in srgb, var(--app-bg)60%, transparent); z-index:1055; }

/* Themed dropdown menu */
.dropdown-menu{ background:var(--app-card); border:1px solid var(--app-border); box-shadow:var(--app-shadow); }
.dropdown-item{ color:var(--app-fg); }
.dropdown-item:hover,.dropdown-item:focus{ background:color-mix(in srgb, var(--app-accent)15%, transparent); color:var(--app-fg); }
.dropdown-divider{ border-top-color:var(--app-border); }
.dropdown-menu .dropdown-item{ position:relative; z-index:1; } /* Ensure dropdown items are fully clickable and not overlapped */

/* Ensure dropdown sits above any neighbors in navbar and is fully clickable */
.app-navbar .dropdown-menu{ z-index:2000; }
.app-navbar .dropdown-menu .dropdown-item{ display:flex; align-items:center; gap:.5rem; width:100%; position:relative; z-index:1; }

/* Fix overlapping in navbar: ensure dropdown captures clicks and username text doesn't block */
.app-navbar .dropdown{ position:relative; z-index:5; }
.app-navbar .navbar-text{ pointer-events:none; }
.app-navbar .dropdown-menu{ z-index:3000; min-width:220px; }

/* Themed modal content */
.modal-content{ background:var(--app-card); color:var(--app-fg); border:1px solid var(--app-border); box-shadow:var(--app-shadow); }
.modal-header,.modal-footer{ border-color:var(--app-border); }
.modal-title{ color:var(--app-fg); }

/* Ensure close button icon is visible in dark theme (applies to all modals) */
:root[data-theme="dark"] .modal-header .btn-close{
	filter: invert(1) grayscale(100%);
	opacity: .9;
}

/* Close button with better contrast in dark theme (used in edit pago modal) */
:root[data-theme="dark"] .modal-header .btn-close-contrast{
	filter: invert(1) grayscale(100%);
	opacity: .9;
}

/* Center ALL edit modals horizontally and vertically */
.modal.fade.show.d-block{ display:flex !important; align-items:center; justify-content:center; padding:1rem; inset:0; }
.modal.fade.show.d-block .modal-dialog{ margin:0 auto !important; transform:none !important; }

/* Mejor centrado vertical/horizontal de modales simples */
.modal.d-block { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; z-index:4500; }
.modal.d-block .modal-dialog { margin:0 !important; max-height:90vh; display:flex; flex-direction:column; }
.modal.d-block .modal-content { flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; }
.modal.d-block .modal-body { flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:576px){
  .modal.d-block { align-items:stretch !important; justify-content:flex-start !important; padding:0; }
  .modal.d-block .modal-dialog { width:100% !important; max-width:100% !important; max-height:100dvh; }
  .modal.d-block .modal-content { border-radius:0; max-height:100dvh; }
  .modal.d-block .modal-body { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* --- Modal simple (sin .fade.show) soporte global --- */
.modal.d-block {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 4500; /* encima de navbar (4000) */
}
.modal.d-block .modal-dialog { margin: 0 !important; }
@media (max-width:576px){
  .modal.d-block { align-items: stretch; justify-content: flex-start; padding:0; }
  .modal.d-block .modal-dialog { width:100% !important; max-width:100% !important; margin:0 !important; }
  .modal.d-block .modal-content { border-radius:0; }
}

/* Avatar + account panel (Blazor-controlled) */
.avatar-btn{ width:32px; height:32px; border-radius:50%; border:1px solid var(--app-border); background:linear-gradient(180deg, color-mix(in srgb, var(--app-card)70%, transparent), color-mix(in srgb, var(--app-card)85%, transparent)); color:var(--app-fg); display:flex; align-items:center; justify-content:center; font-weight:600; box-shadow:var(--app-shadow); }
.avatar-btn:hover{ filter:brightness(1.08); }
.account-backdrop{ position:fixed; inset:0; z-index:1040; background:transparent; }
/* Prevent account backdrop from blocking page clicks */
.account-backdrop{ pointer-events:none; }
.account-panel{ position:fixed; top:64px; right:16px; width:260px; z-index:1041; background:var(--app-card); color:var(--app-fg); border:1px solid var(--app-border); box-shadow:var(--app-shadow); border-radius:14px; overflow:hidden; }
.account-panel .list-group-item{ background:transparent; color:var(--app-fg); border:0; text-align:left; }
.account-panel .list-group-item:hover{ background:color-mix(in srgb, var(--app-accent)15%, transparent); }

/* RESPONSIVE */
@media (max-width:576px){
 .navbar-nav{ gap:.25rem; }
 .card{ border-radius:12px; }
 /* On mobile, force modals to start at top-left with no padding or margins */
 .modal.fade.show.d-block{ align-items:stretch; justify-content:flex-start; padding:0; }
 .modal.fade.show.d-block .modal-dialog{ width:100% !important; max-width:100% !important; margin:0 !important; }
 .modal-content{ border-radius:0; }
}

/* Backdrop for custom account menu */
.app-menu-backdrop{ position:fixed; inset:0; z-index:1039; background:transparent; }
/* Account menu: ensure above backdrop */
.account-menu{ display:block; position:absolute; right:0; z-index:1040; }
/* Account popover panel */
.account-backdrop{ position:fixed; inset:0; z-index:1040; background:transparent; }
.account-panel{ position:fixed; top:64px; right:16px; width:260px; z-index:1041; background:var(--app-card); color:var(--app-fg); border:1px solid var(--app-border); box-shadow:var(--app-shadow); border-radius:14px; overflow:hidden; }
.account-panel .list-group-item{ background:transparent; color:var(--app-fg); border:0; }
.account-panel .list-group-item:hover{ background:color-mix(in srgb, var(--app-accent)15%, transparent); }
/* Navbar layout fixes */
.app-navbar .navbar-nav{ flex-wrap:nowrap; }
.app-navbar .navbar-nav .nav-link{ white-space:nowrap; }
.app-navbar .dropdown{ position:relative; z-index:5; }
.app-navbar .dropdown-menu{ z-index:3000; min-width:220px; }
.app-navbar .dropdown-menu .dropdown-item{ display:flex; align-items:center; gap:.5rem; width:100%; position:relative; z-index:1; }
/* Global: force checkbox/radio label text to black in light theme for better readability */
:root[data-theme="light"] .form-check-label{ color:#111 !important; }
/* Ensure checkbox/radio labels respect theme colors */
.form-check-label{ color:var(--app-fg); }

/* Modal behavior adaptations */
/* Desktop/tablet: center and constrain height, allow inner scroll */
@media (min-width:576.02px){
 .app-modal-dialog{ height:auto; display:block; margin:0; }
 .app-modal-content{ height:auto; max-height:90vh; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
 .app-modal-body{ flex:11 auto; overflow:auto; -webkit-overflow-scrolling:touch; min-height:0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); overscroll-behavior: contain; touch-action: pan-y; }
}

/* Mobile: keep fullscreen and scroll fix using dynamic viewport units */
@media (max-width:576px){
 .app-modal-dialog{ height:100dvh; margin:0; display:flex; align-items:stretch; }
 .app-modal-content{ height:100%; max-height:100dvh; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
 .app-modal-content > form{ display:flex; flex-direction:column; min-height:0; flex:11 auto; }
 .app-modal-body{ flex:11 auto; overflow:auto; -webkit-overflow-scrolling:touch; min-height:0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); overscroll-behavior: contain; touch-action: pan-y; }
 .app-modal-footer{ position:sticky; bottom:0; z-index:2; background:var(--app-card); border-top:1px solid var(--app-border); padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
}

/* Ensure backdrop covers full viewport when soft keyboard opens */
.modal-backdrop{ height:100dvh; }

/* Toasts: ensure visible below navbar and above content */
.toast,
.toast-container,
.blazored-toast,
.blazored-toast-container{
  z-index: 6000 !important; /* above navbar (4000) */
}
.toast-container,
.blazored-toast-container{
  position: fixed;
  top: calc(var(--app-navbar-height) + 8px);
  right: 8px;
  left: auto;
}

/* ConfirmModal overrides */
.confirm-modal { 
 z-index:5000; /* encima de modales de edición (4500) y navbar (4000) */
 display:flex; 
 align-items:center; 
 justify-content:center; 
 position:fixed; /* asegurar posicionamiento independiente */
 inset:0; 
 min-height:100vh; 
 padding:1rem; 
}
.confirm-modal .modal-dialog{ margin:0; }
.confirm-modal .modal-content { z-index:5001; display:flex; flex-direction:column; }
.confirm-modal .modal-body { overflow:auto; }
.confirm-backdrop { z-index:4990; position:fixed; inset:0; }
.confirm-dialog { max-width:520px; width: calc(100% - 2rem); }

/* Address builder modal (Clientes) */
.address-modal{ position:fixed; inset:0; z-index:5100; display:flex; align-items:center; justify-content:center; padding:1rem; }
.address-modal .modal-dialog{ margin:0; }
.address-modal .modal-content{ z-index:5101; display:flex; flex-direction:column; max-height:90vh; }
.address-modal .modal-body{ overflow:auto; }
.address-backdrop{ position:fixed; inset:0; z-index:5090; }