:root,
html[data-theme="Default"] {
  --app-bg: #f4f6f8;
  --app-surface: #ffffff;
  --app-surface-alt: #eef2f5;
  --app-navbar-bg: #243746;
  --app-footer-bg: #ffffff;
  --app-border: #d1d9e2;
  --app-ink: #1f2933;
  --app-muted: #667085;
  --app-primary: #1f6f8b;
  --app-primary-hover: #174f63;
  --app-link: #1f6f8b;
  --app-link-hover: #174f63;
  --app-accent: #4b8063;
  --app-focus-ring: rgba(31, 111, 139, 0.32);
  --app-shadow: 0 10px 28px rgba(31, 41, 51, 0.09);
  --app-shadow-hover: 0 15px 34px rgba(31, 41, 51, 0.15);
  --app-row-alt: #e8eef3;
  --app-row-hover: #e8f2f6;
  --app-row-selected: #d7eaf1;
  --app-danger: #b42318;
  --app-success: #287a4b;
  --app-warning: #8a5b00;
  --app-info: #176b87;
}

html[data-theme="Borgona"] {
  --app-bg: #f6f1eb;
  --app-surface: #fffaf5;
  --app-surface-alt: #efe4da;
  --app-navbar-bg: #5b1f2d;
  --app-footer-bg: #fffaf5;
  --app-border: #d9c9bd;
  --app-ink: #2b211d;
  --app-muted: #6d5d55;
  --app-primary: #7a263a;
  --app-primary-hover: #5d1c2c;
  --app-link: #7a263a;
  --app-link-hover: #5d1c2c;
  --app-accent: #9a5a2f;
  --app-focus-ring: rgba(122, 38, 58, 0.32);
  --app-shadow: 0 10px 28px rgba(67, 38, 30, 0.10);
  --app-shadow-hover: 0 15px 34px rgba(67, 38, 30, 0.17);
  --app-row-alt: #f8eee7;
  --app-row-hover: #f2ded3;
  --app-row-selected: #e9cfc4;
  --app-danger: #a72323;
  --app-success: #33724a;
  --app-warning: #865800;
  --app-info: #245f7a;
}

html[data-theme="Grafito"] {
  color-scheme: dark;
  --app-bg: #111827;
  --app-surface: #1f2937;
  --app-surface-alt: #273449;
  --app-navbar-bg: #0b1220;
  --app-footer-bg: #0b1220;
  --app-border: #465369;
  --app-ink: #f3f4f6;
  --app-muted: #b7c0cc;
  --app-primary: #2f7f9d;
  --app-primary-hover: #256b84;
  --app-link: #7dd3fc;
  --app-link-hover: #bae6fd;
  --app-accent: #7dd3fc;
  --app-focus-ring: rgba(125, 211, 252, 0.42);
  --app-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  --app-shadow-hover: 0 18px 38px rgba(0, 0, 0, 0.38);
  --app-row-alt: #334155;
  --app-row-hover: #40516a;
  --app-row-selected: #46647d;
  --app-danger: #ff8a80;
  --app-success: #74d69b;
  --app-warning: #ffd166;
  --app-info: #7dd3fc;
}

html {
  min-height: 100%;
  font-size: 14px;
}

body {
  --bs-body-color: var(--app-ink);
  --bs-body-bg: var(--app-bg);
  --bs-border-color: var(--app-border);
  --bs-secondary-color: var(--app-muted);
  --bs-secondary-bg: var(--app-surface-alt);
  --bs-tertiary-bg: var(--app-surface-alt);
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a,
.btn-link { color: var(--app-link); }
a:hover,
.btn-link:hover { color: var(--app-link-hover); }
.text-muted { color: var(--app-muted) !important; }
.border-top, .border-bottom { border-color: var(--app-border) !important; }

.app-navbar {
  background: var(--app-navbar-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--app-shadow);
}

.app-navbar .navbar-brand { white-space: nowrap; }
.app-navbar .nav-link { border-radius: 0.35rem; color: rgba(255, 255, 255, 0.76); }
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.11); }
.app-navbar .dropdown-menu { margin-top: 0.45rem; }

.app-shell { flex: 1 0 auto; padding-top: 2rem; padding-bottom: 2rem; }
.app-footer { flex-shrink: 0; background: var(--app-footer-bg); border-top: 1px solid var(--app-border); color: var(--app-muted); font-size: 0.9rem; line-height: 60px; }

.user-menu-toggle { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.55rem !important; }
html[data-theme="Default"] .user-menu-toggle {
  background: var(--app-accent);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
html[data-theme="Default"] .user-menu-toggle:hover,
html[data-theme="Default"] .user-menu-toggle:focus,
html[data-theme="Default"] .user-menu-toggle.active {
  background: #3d6b52;
  color: #fff;
}
html[data-theme="Default"] .user-menu-toggle .user-avatar {
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.user-avatar,
.profile-avatar { display: inline-grid; place-items: center; border-radius: 50%; background: var(--app-accent); color: #fff; font-weight: 750; letter-spacing: 0.02em; }
.user-avatar { width: 2rem; height: 2rem; font-size: 0.76rem; }
html[data-theme="Grafito"] .user-avatar,
html[data-theme="Grafito"] .profile-avatar { color: #102030; }
.user-menu-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown { min-width: 260px; }
.user-dropdown-header { display: flex; flex-direction: column; padding: 0.55rem 1rem; overflow-wrap: anywhere; }
.user-dropdown-header span { color: var(--app-muted); font-size: 0.85rem; }

.dropdown-menu,
.modal-content,
.card {
  --bs-dropdown-bg: var(--app-surface);
  --bs-dropdown-color: var(--app-ink);
  --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-link-color: var(--app-ink);
  --bs-dropdown-link-hover-color: var(--app-ink);
  --bs-dropdown-link-hover-bg: var(--app-surface-alt);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--app-primary);
  background-color: var(--app-surface);
  color: var(--app-ink);
  border-color: var(--app-border);
}
.dropdown-item {
  color: var(--app-ink);
  background-color: transparent;
}
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--app-ink);
  background-color: var(--app-surface-alt);
}
.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  background-color: var(--app-primary);
}
.dropdown-divider {
  border-top-color: var(--app-border);
}

.dropdown-menu.show { animation: menu-in 150ms ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

.btn,
.nav-link,
.dropdown-item,
.form-control,
.form-select,
.module-card,
.theme-option { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
}
.btn-outline-primary { --bs-btn-color: var(--app-link); --bs-btn-border-color: var(--app-link); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); }
.btn-outline-secondary { --bs-btn-color: var(--app-muted); --bs-btn-border-color: var(--app-border); --bs-btn-hover-color: var(--app-ink); --bs-btn-hover-bg: var(--app-surface-alt); --bs-btn-hover-border-color: var(--app-muted); }

.form-control,
.form-select,
.form-check-input {
  background-color: var(--app-surface);
  color: var(--app-ink);
  border-color: var(--app-border);
}
.form-control::placeholder { color: var(--app-muted); opacity: 0.85; }
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
a:focus-visible {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.22rem var(--app-focus-ring);
  outline: 0;
}
.form-control:disabled,
.form-select:disabled { background-color: var(--app-surface-alt); color: var(--app-muted); }
.validation-summary-valid { display: none; }
.text-danger { color: var(--app-danger) !important; }

.alert { border-color: currentColor; }
.alert-danger { --bs-alert-color: var(--app-danger); --bs-alert-bg: color-mix(in srgb, var(--app-danger) 10%, var(--app-surface)); }
.alert-success { --bs-alert-color: var(--app-success); --bs-alert-bg: color-mix(in srgb, var(--app-success) 10%, var(--app-surface)); }
.alert-warning { --bs-alert-color: var(--app-warning); --bs-alert-bg: color-mix(in srgb, var(--app-warning) 11%, var(--app-surface)); }
.alert-info { --bs-alert-color: var(--app-info); --bs-alert-bg: color-mix(in srgb, var(--app-info) 10%, var(--app-surface)); }

.table {
  --bs-table-color: var(--app-ink);
  --bs-table-bg: var(--app-surface);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-color: var(--app-ink);
  --bs-table-striped-bg: var(--app-row-alt);
  --bs-table-hover-color: var(--app-ink);
  --bs-table-hover-bg: var(--app-row-hover);
  --bs-table-active-color: var(--app-ink);
  --bs-table-active-bg: var(--app-row-selected);
  color: var(--app-ink);
  border-color: var(--app-border);
}
.table > thead > tr > * {
  color: var(--app-ink);
  background-color: var(--app-surface);
  box-shadow: none;
}
.table > tbody > tr > * {
  color: var(--app-ink);
  background-color: var(--app-surface);
  box-shadow: none;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--app-row-alt);
  color: var(--app-ink);
  background-color: var(--app-row-alt);
  box-shadow: none;
}
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--app-row-hover);
  color: var(--app-ink);
  background-color: var(--app-row-hover);
  box-shadow: none;
}
.table > tbody > tr.table-active > * {
  --bs-table-accent-bg: var(--app-row-selected);
  color: var(--app-ink);
  background-color: var(--app-row-selected);
  box-shadow: none;
}
.app-grid-frame {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
  box-shadow: var(--app-shadow);
}
.app-grid-frame .table {
  margin-bottom: 0;
}
.app-grid-frame .table > :first-child > tr:first-child > *:first-child {
  border-top-left-radius: 0.55rem;
}
.app-grid-frame .table > :first-child > tr:first-child > *:last-child {
  border-top-right-radius: 0.55rem;
}
.bank-count-field {
  width: 9.5rem;
}
.pagination { --bs-pagination-bg: var(--app-surface); --bs-pagination-border-color: var(--app-border); --bs-pagination-color: var(--app-primary); --bs-pagination-hover-bg: var(--app-surface-alt); }
.modal-header, .modal-footer { border-color: var(--app-border); }
html[data-theme="Grafito"] .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }

.login-page { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 2rem 0; }
.login-card,
.error-panel,
.profile-card,
.logs-filters { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 0.65rem; box-shadow: var(--app-shadow); }
.login-card { width: min(100%, 430px); padding: 2rem; }
.login-header { margin-bottom: 1.75rem; }
.login-header h1 { font-size: 1.65rem; margin-bottom: 0.5rem; }
.login-header p,
.error-panel p,
.page-header p,
.home-header p { color: var(--app-muted); }
.login-eyebrow { color: var(--app-accent) !important; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.4rem !important; }

.error-page { min-height: calc(100vh - 210px); display: grid; place-items: center; text-align: center; padding: 2rem 0; }
.error-panel { max-width: 560px; padding: 2rem; }
.error-code { color: var(--app-accent); font-weight: 700; margin-bottom: 0.4rem; }

.home-header { margin-bottom: 2rem; }
.home-header h1,
.page-header h1 { font-size: clamp(1.65rem, 3vw, 2.15rem); margin-bottom: 0.4rem; }
.home-header p,
.page-header p { margin-bottom: 0; }
.home-section { margin-top: 2rem; }
.home-section > h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.module-card { position: relative; display: flex; flex-direction: column; padding: 1.4rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 0.75rem; box-shadow: var(--app-shadow); }
.module-card:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-hover); border-color: var(--app-primary); }
.module-card-icon { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 0.6rem; background: var(--app-surface-alt); color: var(--app-link); }
.app-icon { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.module-card h3 { font-size: 1.05rem; margin-bottom: 0.55rem; }
.module-card p { color: var(--app-muted); margin-bottom: 1.15rem; }
.module-card-main-link { font-weight: 650; margin-top: auto; }
.module-card-links { display: flex; flex-wrap: wrap; width: 100%; gap: 0.35rem 1rem; margin-top: auto; }
.module-card-links .module-card-main-link { margin-top: 0; }
.module-card-link-end { margin-left: auto; text-align: right; }
.module-card-action { position: relative; z-index: 2; align-self: flex-start; font-weight: 650; margin-top: auto; }
.module-card-main-link + .module-card-action { margin-top: 0; }
.module-card-links + .module-card-action { margin-top: 0.35rem; }
.empty-state { margin-top: 2rem; padding: 3rem 1.5rem; text-align: center; background: var(--app-surface); border: 1px dashed var(--app-border); border-radius: 0.75rem; }
.empty-state h2 { font-size: 1.25rem; }
.empty-state p { color: var(--app-muted); margin-bottom: 0; }

.page-header { margin-bottom: 1.5rem; }
.profile-form { max-width: 980px; }
.profile-card { padding: 1.5rem; margin-bottom: 1.25rem; }
.account-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.profile-avatar { width: 4.25rem; height: 4.25rem; font-size: 1.25rem; }
.account-identity h2 { font-size: 1.2rem; margin: 0 0 0.25rem; }
.account-identity p { color: var(--app-muted); margin: 0 0 0.25rem; overflow-wrap: anywhere; }
.account-identity span { font-size: 0.9rem; }
.theme-selector legend { float: none; width: auto; font-size: 1.2rem; font-weight: 650; margin-bottom: 0.35rem; }
.theme-selector > p { color: var(--app-muted); margin-bottom: 0.5rem; }
.theme-option { display: flex; flex-direction: column; min-height: 150px; padding: 1rem; cursor: pointer; background: var(--app-surface); border: 2px solid var(--app-border); border-radius: 0.65rem; }
.theme-option:hover { border-color: var(--app-primary); transform: translateY(-1px); }
.theme-radio:focus-visible + .theme-option { box-shadow: 0 0 0 0.24rem var(--app-focus-ring); }
.theme-radio:checked + .theme-option { border-color: var(--app-primary); box-shadow: inset 0 0 0 1px var(--app-primary); }
.theme-option-header { display: flex; justify-content: space-between; align-items: center; }
.theme-check { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid var(--app-border); border-radius: 50%; color: transparent; }
.theme-radio:checked + .theme-option .theme-check { color: #fff; background: var(--app-primary); border-color: var(--app-primary); }
.theme-swatches { display: grid; grid-template-columns: repeat(4, 1fr); height: 34px; margin: 1rem 0; overflow: hidden; border: 1px solid var(--app-border); border-radius: 0.35rem; }
.theme-option[data-theme-option="Default"] .theme-swatches span:nth-child(1) { background: #f4f6f8; }
.theme-option[data-theme-option="Default"] .theme-swatches span:nth-child(2) { background: #243746; }
.theme-option[data-theme-option="Default"] .theme-swatches span:nth-child(3) { background: #1f6f8b; }
.theme-option[data-theme-option="Default"] .theme-swatches span:nth-child(4) { background: #4b8063; }
.theme-option[data-theme-option="Borgona"] .theme-swatches span:nth-child(1) { background: #f6f1eb; }
.theme-option[data-theme-option="Borgona"] .theme-swatches span:nth-child(2) { background: #5b1f2d; }
.theme-option[data-theme-option="Borgona"] .theme-swatches span:nth-child(3) { background: #7a263a; }
.theme-option[data-theme-option="Borgona"] .theme-swatches span:nth-child(4) { background: #9a5a2f; }
.theme-option[data-theme-option="Grafito"] .theme-swatches span:nth-child(1) { background: #111827; }
.theme-option[data-theme-option="Grafito"] .theme-swatches span:nth-child(2) { background: #1f2937; }
.theme-option[data-theme-option="Grafito"] .theme-swatches span:nth-child(3) { background: #2f7f9d; }
.theme-option[data-theme-option="Grafito"] .theme-swatches span:nth-child(4) { background: #7dd3fc; }
.theme-option-status { color: var(--app-muted); font-size: 0.83rem; }
.theme-radio:checked + .theme-option .theme-option-status { color: var(--app-link); font-size: 0; font-weight: 650; }
.theme-radio:checked + .theme-option .theme-option-status::after { content: "Seleccionado"; font-size: 0.83rem; }
.profile-actions { display: flex; justify-content: flex-end; gap: 0.75rem; }

.logs-page { height: calc(100vh - 190px); min-height: 560px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; overflow: hidden; }
.logs-page > * { min-width: 0; }
.logs-filters { padding: 0.85rem 1rem; }
.logs-date-field { position: relative; }
.logs-date-button { min-width: 46px; display: inline-flex; align-items: center; justify-content: center; }
.logs-date-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logs-date-picker { position: absolute; right: 0; bottom: 0; width: 46px; height: 100%; opacity: 0; pointer-events: none; }
.logs-section { min-height: 0; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--app-border); padding-top: 0.55rem; overflow: hidden; }
.logs-section-header { margin-bottom: 0.4rem; }
.logs-grid-wrap { min-height: 0; max-width: 100%; flex: 1 1 auto; overflow: auto; background: var(--app-surface); border: 1px solid var(--app-border); }
.logs-table { min-width: 1100px; margin-bottom: 0; user-select: text; }
.logs-table th, .logs-table td { white-space: nowrap; vertical-align: top; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 11px; }
.logs-table thead th { position: sticky; top: 0; z-index: 2; background: var(--app-surface); box-shadow: inset 0 -1px 0 var(--app-border); }
.logs-table th:first-child,
.logs-table td:first-child { position: sticky; left: 0; width: 58px; min-width: 58px; max-width: 58px; background: var(--app-surface); box-shadow: 4px 0 5px -5px var(--app-muted); }
.logs-table thead th:first-child { z-index: 4; }
.logs-table tbody tr:nth-of-type(odd) td:first-child { background: var(--app-row-alt); }
.logs-table tbody tr:hover td:first-child { background: var(--app-row-hover); }
.logs-table tbody tr.table-active td:first-child { background: var(--app-row-selected); }
.logs-table th:nth-child(2), .logs-table td:nth-child(2) { width: 185px; min-width: 185px; max-width: 185px; }
.logs-row-action { width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.logs-row-action-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logs-empty { padding: 0.75rem 0; }
.logs-detail-wrap { max-height: 70vh; overflow: auto; }
.logs-detail-table { min-width: 900px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 11px; }
.logs-detail-value { white-space: pre-wrap; overflow-wrap: anywhere; }
.logs-copy-status { min-height: 1.5rem; color: var(--app-success); font-size: 0.9rem; }

.cuenta-inactiva { opacity: 0.65; background-color: var(--app-surface-alt); }

@media (min-width: 768px) { html { font-size: 16px; } }
@media (max-width: 767.98px) {
  .account-summary { grid-template-columns: auto 1fr; }
}
@media (max-width: 575.98px) {
  .app-shell { padding-top: 1rem; }
  .login-card, .error-panel, .profile-card { padding: 1.2rem; }
  .navbar-brand { font-size: 1rem; }
  .user-menu-toggle { display: inline-flex; }
  .profile-avatar { width: 3.25rem; height: 3.25rem; }
}

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