/* =====================================================================
   Sistema de Administración Residencial Moscú — capa sobre Bootstrap 5
   Estilo de panel administrativo: menú lateral oscuro, barra superior clara,
   paneles blancos y acento verde turquesa. Tema claro u oscuro y tamaño de
   letra se eligen en Configuración → Estilo (atributos data-bs-theme y data-tam).
   ===================================================================== */
:root {
  --ink: #2a3f54;          /* azul pizarra: menú, rellenos oscuros */
  --ink-2: #34495e;
  --accent: #1abb9c;       /* verde turquesa: acento principal */
  --accent-2: #169f85;
  --accent-soft: #e1f5f1;
  --brass: var(--accent);
  --brass-soft: var(--accent-soft);
  --bg: #f7f7f7;
  --panel: #ffffff;
  --panel-alt: #f9fafb;
  --hover: #f4f6f8;
  --line: #e6e9ed;
  --line-2: #d9dee4;
  --text: #4b5a69;
  --heading: #2a3f54;
  --muted: #73879c;
  --ok: #1e8f6e;
  --ok-soft: #e1f5ec;
  --warn: #9a6700;
  --warn-soft: #fff3d6;
  --bad: #c0392b;
  --bad-soft: #fdecea;
  --sb-bg: #2a3f54;
  --sb-text: #e7e7e7;
  --sb-muted: #a9b8c7;
  --topbar: #ededed;

  --bs-primary: var(--accent);
  --bs-primary-rgb: 26, 187, 156;
  --bs-body-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--heading);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--panel-alt);
  --bs-border-color: var(--line);
  --bs-border-radius: .35rem;
  --bs-link-color: var(--accent-2);
  --bs-link-color-rgb: 22, 159, 133;
  --bs-link-hover-color: var(--ink);
}
html[data-bs-theme="dark"] {
  --ink-2: #9fb8d0;
  --accent-soft: rgba(26, 187, 156, .16);
  --bg: #151c24;
  --panel: #1e2732;
  --panel-alt: #232e3b;
  --hover: #26313e;
  --line: #2e3a48;
  --line-2: #3a4758;
  --text: #cdd6e0;
  --heading: #eef3f8;
  --muted: #94a4b6;
  --ok: #3ccb9a;
  --ok-soft: rgba(60, 203, 154, .15);
  --warn: #f0b44c;
  --warn-soft: rgba(240, 180, 76, .15);
  --bad: #f2726b;
  --bad-soft: rgba(242, 114, 107, .15);
  --sb-bg: #111820;
  --topbar: #1a222c;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--heading);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--panel-alt);
  --bs-border-color: var(--line);
  --bs-link-color: #5fd6bd;
  --bs-link-color-rgb: 95, 214, 189;
  --bs-link-hover-color: #a8eedf;
  color-scheme: dark;
}

/* Tamaño de letra general (Configuración → Estilo). Todo lo que usa rem crece con él. */
html { font-size: 17px; }
html[data-tam="normal"] { font-size: 15.5px; }
html[data-tam="grande"] { font-size: 17px; }
html[data-tam="muy-grande"] { font-size: 18.5px; }

body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--heading); }
.bg-app { background: var(--bg); min-height: 100vh; }
.num, .table td.num, .kpi-value, .tile-value { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; }
.hash-text { font-size: .74rem; line-height: 1.45; word-break: break-all; }
.small, small { font-size: .9em; }

/* Componentes de Bootstrap con los colores del tema */
.modal-content, .dropdown-menu, .toast { background-color: var(--panel); border-color: var(--line); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--line); }
.form-control, .form-select { background-color: var(--panel); border-color: var(--line-2); color: var(--text); }
.form-control::placeholder { color: var(--muted); opacity: .8; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--panel-alt); }
.input-group-text { background-color: var(--panel-alt); border-color: var(--line-2); color: var(--muted); }
.bg-white { background-color: var(--panel) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line) !important; }
.text-bg-light { background-color: var(--panel-alt) !important; color: var(--text) !important; }
.table-light { --bs-table-bg: var(--panel-alt); --bs-table-color: var(--heading); }
.table-active { --bs-table-bg-state: var(--accent-soft); }
.list-group { --bs-list-group-bg: var(--panel); --bs-list-group-border-color: var(--line); --bs-list-group-color: var(--text); --bs-list-group-action-hover-bg: var(--hover); }
.btn-close { filter: var(--btn-close-filtro, none); }
html[data-bs-theme="dark"] .btn-close { --btn-close-filtro: invert(1) grayscale(100%) brightness(200%); }
.vr { background-color: var(--line-2); }

/* Botones */
.btn { font-weight: 500; }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-2); --bs-btn-hover-border-color: var(--accent-2);
  --bs-btn-active-bg: #12866f; --bs-btn-active-border-color: #12866f;
  --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--heading); --bs-btn-bg: var(--panel); --bs-btn-border-color: var(--line-2);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accent-2); --bs-btn-active-border-color: var(--accent-2);
}
.btn-check:checked + .btn-outline-primary { --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); }
.btn-light { --bs-btn-bg: var(--panel-alt); --bs-btn-border-color: var(--line); --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--hover); --bs-btn-hover-border-color: var(--line-2); --bs-btn-hover-color: var(--heading); }
.btn-link { --bs-btn-color: var(--ink-2); }
.btn-brass { background: var(--ink); color: #fff; border: 0; font-weight: 500; }
.btn-brass:hover, .btn-brass:focus { background: #20303f; color: #fff; }
html[data-bs-theme="dark"] .btn-brass { background: #34495e; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(26, 187, 156, .18);
}
/* Casillas visibles: el borde de Bootstrap toma --bs-border-color, que aquí es muy claro */
.form-check-input { border: 1.5px solid #8892a3; background-color: var(--panel); }
.form-check-input:hover:not(:disabled) { border-color: var(--accent-2); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:indeterminate { background-color: var(--accent); border-color: var(--accent); }
.table .form-check-input[type="checkbox"] { width: 1.15em; height: 1.15em; cursor: pointer; }
.progress { --bs-progress-bg: var(--line); }
.bg-success { background-color: var(--accent) !important; }

/* Marca */
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 1.15rem;
  border: 2px solid rgba(26, 187, 156, .7);
}
.navbar-app { background: var(--sb-bg); }
.navbar-app .navbar-brand { color: #fff; font-weight: 500; font-size: 1.05rem; }
.navbar-app .navbar-brand small { color: var(--sb-muted); font-weight: 400; display: block; font-size: .76rem; }
.navbar-app .nav-user { color: var(--sb-text); font-size: .92rem; }

/* =====================================================================
   Estructura del panel: menú lateral + barra superior + contenido
   ===================================================================== */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; flex: 0 0 250px; background: var(--sb-bg); color: var(--sb-text);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; transition: width .2s ease, flex-basis .2s ease;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; z-index: 1040;
}
.sb-brand { display: flex; align-items: center; gap: .65rem; padding: .95rem 1.1rem; color: #fff; text-decoration: none; font-size: 1.2rem; font-weight: 400; white-space: nowrap; }
.sb-brand:hover { color: #fff; }
.sb-brand .brand-mark { width: 36px; height: 36px; flex: 0 0 36px; font-size: 1rem; }
.sb-profile { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.1rem 1.2rem; white-space: nowrap; }
.avatar {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); border: 3px solid rgba(255, 255, 255, .22); color: #fff; font-weight: 600; font-size: 1.05rem;
}
.sb-profile small { color: var(--sb-muted); display: block; font-size: .82rem; }
.sb-profile .sb-nombre { color: #fff; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.sb-section { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #fff; padding: 1.1rem 1.1rem .35rem; white-space: nowrap; opacity: .9; }
.sb-menu { display: flex; flex-direction: column; }
.sb-menu .nav-link, .sb-link {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .62rem 1.1rem; color: var(--sb-text);
  background: none; border: 0; border-right: 5px solid transparent; border-radius: 0; text-align: left; font-size: .95rem; white-space: nowrap;
}
.sb-menu .nav-link i, .sb-link i { font-size: 1.15rem; width: 1.4rem; flex: 0 0 1.4rem; text-align: center; opacity: .85; }
.sb-menu .nav-link:hover, .sb-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sb-menu .nav-link.active {
  color: #fff; border-right-color: var(--accent);
  background: linear-gradient(#334556, #2c4257); box-shadow: rgba(0, 0, 0, .25) 0 1px 0, inset rgba(255, 255, 255, .16) 0 1px 0;
}
html[data-bs-theme="dark"] .sb-menu .nav-link.active { background: rgba(255, 255, 255, .07); box-shadow: none; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  min-height: 60px; padding: .45rem 1.4rem; background: var(--topbar); border-bottom: 1px solid var(--line-2);
}
.topbar .sb-toggle { background: none; border: 0; color: var(--muted); font-size: 1.6rem; line-height: 1; padding: .1rem .2rem; }
.topbar .sb-toggle:hover { color: var(--heading); }
.topbar .page-title { font-size: 1.2rem; font-weight: 500; color: var(--heading); margin: 0; }
.topbar .page-title small { color: var(--muted); font-size: .8rem; font-weight: 400; margin-left: .35rem; }
.topbar .user-btn { display: flex; align-items: center; gap: .55rem; background: none; border: 0; color: var(--heading); font-weight: 500; padding: .2rem .4rem; border-radius: .35rem; }
.topbar .user-btn:hover { background: var(--hover); }
.topbar .user-btn .avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: .8rem; border-width: 2px; background: var(--ink); }
.app-content { padding: 1.4rem 1.6rem 2rem; flex: 1 1 auto; }
.app-footer { padding: .9rem 1.6rem; background: var(--panel); border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.sb-overlay { display: none; }

/* Menú compacto (solo íconos) en pantallas grandes */
@media (min-width: 992px) {
  html.sb-mini .sidebar { width: 72px; flex-basis: 72px; }
  html.sb-mini .sb-txt, html.sb-mini .sb-profile > div, html.sb-mini .sb-brand span:not(.brand-mark) { display: none; }
  html.sb-mini .sb-section { font-size: 0; padding: .6rem 0 .2rem; border-top: 1px solid rgba(255, 255, 255, .08); margin: 0 .9rem; }
  html.sb-mini .sb-menu .nav-link, html.sb-mini .sb-link { justify-content: center; padding: .7rem 0; }
  html.sb-mini .sb-profile { justify-content: center; padding: .4rem 0 .8rem; }
  html.sb-mini .sb-profile .avatar { width: 40px; height: 40px; flex-basis: 40px; }
  html.sb-mini .sb-brand { justify-content: center; padding: .95rem 0; }
}
/* En pantallas chicas el menú se abre encima del contenido */
@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: -270px; top: 0; bottom: 0; transition: left .22s ease; box-shadow: 0 0 30px rgba(0, 0, 0, .3); }
  body.sb-abierto .sidebar { left: 0; }
  body.sb-abierto .sb-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1035; }
  .app-content { padding: 1rem .9rem 2rem; }
  .topbar { padding: .45rem .9rem; }
}

/* Indicadores principales (fila de cifras con separadores) */
.tile-count { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: .35rem; padding: 1rem 0; }
.tile { padding: .15rem 1.3rem; border-left: 2px solid var(--line); min-width: 0; }
.tile:first-child { border-left: 0; }
.tile-label { display: block; font-size: .86rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-label i { margin-right: .3rem; }
.tile-value { font-size: clamp(1.45rem, 1.6vw + .55rem, 2.1rem); font-weight: 600; color: var(--heading); line-height: 1.3; white-space: nowrap; }
.tile-sub { display: block; font-size: .82rem; color: var(--muted); }
.tile.is-bad .tile-value { color: var(--bad); }
.tile.is-ok .tile-value { color: var(--accent); }
@media (max-width: 1199.98px) {
  .tile-count { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
  .tile:nth-child(3n + 1) { border-left: 0; }
}
@media (max-width: 575.98px) {
  .tile-count { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { border-left: 0 !important; padding: .15rem 1rem; }
}

/* Paneles */
.card-soft { border: 1px solid var(--line); border-radius: .35rem; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); background: var(--panel); }
.card-soft > .border-bottom:first-child { border-bottom-width: 2px !important; }
.card-soft h2.h6 { font-size: 1.08rem; }
.kpi { position: relative; overflow: hidden; }
.kpi .kpi-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding-right: 2.75rem; min-height: 2.25em; }
.kpi .kpi-value { font-size: clamp(1.25rem, 1.5vw + .45rem, 1.65rem); font-weight: 700; color: var(--heading); line-height: 1.2; margin-top: .25rem; white-space: nowrap; }
.kpi .kpi-sub { font-size: .84rem; color: var(--muted); }
.kpi .kpi-icon {
  position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2);
}
.kpi.kpi-bad .kpi-value { color: var(--bad); }
.kpi.kpi-ok .kpi-value { color: var(--ok); }

/* Pestañas horizontales (se conservan para otras vistas) */
.nav-tabs-app { gap: 0 .1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.nav-tabs-app .nav-link { color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .75rem .6rem; font-weight: 500; white-space: nowrap; }
.nav-tabs-app .nav-link.active { color: var(--heading); border-bottom-color: var(--accent); background: transparent; }

/* Tablas */
.table { --bs-table-color: var(--text); --bs-table-border-color: var(--line); }
.table-app { --bs-table-bg: transparent; margin-bottom: 0; font-size: .92rem; }
.table-app thead th {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 600; background: var(--panel-alt); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table-app td { vertical-align: middle; border-color: var(--line); }
.table-app tbody tr:hover { background: var(--hover); }

/* Estatus */
.badge-st { font-weight: 600; font-size: .76rem; padding: .35em .65em; border-radius: 999px; letter-spacing: .02em; }
.st-PAGADO, .st-AL_CORRIENTE, .st-ENVIADO, .st-NUEVO { background: var(--ok-soft); color: var(--ok); }
.st-PENDIENTE, .st-ADEUDO, .st-ACTUALIZAR { background: var(--warn-soft); color: var(--warn); }
.st-VENCIDO, .st-MOROSO, .st-ERROR { background: var(--bad-soft); color: var(--bad); }
.st-CANCELADO, .st-DUPLICADO { background: var(--hover); color: var(--muted); }

/* Barras de cumplimiento mensual */
.bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: .5rem; align-items: end; height: 170px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .3rem; }
.bar .bar-fill { width: 100%; max-width: 34px; background: #9cc9db; border-radius: 3px 3px 0 0; min-height: 3px; transition: height .5s ease; }
html[data-bs-theme="dark"] .bar .bar-fill { background: #4f7a90; }
.bar.is-current .bar-fill { background: var(--accent); }
.bar .bar-val { font-size: .76rem; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.bar .bar-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; }

/* Login */
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-side {
  background: radial-gradient(1200px 500px at -10% 110%, rgba(26, 187, 156, .2), transparent 60%), var(--sb-bg);
  color: #fff; padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between;
}
.login-side h1 { color: #fff; font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.login-side p { color: #b8c2d3; max-width: 30rem; }
.login-feature { display: flex; gap: .75rem; align-items: flex-start; color: #cfd8e6; font-size: .9rem; margin-top: 1rem; }
.login-feature i { color: var(--accent); font-size: 1.1rem; }
.login-main { display: grid; place-items: center; padding: 2rem 1rem; }
.login-card { width: 100%; max-width: 420px; }
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-side { padding: 2rem 1.25rem; }
  .login-side .login-features { display: none; }
}

/* OTP */
.otp-inputs { display: flex; gap: .5rem; justify-content: center; }
.otp-inputs input {
  width: 3rem; height: 3.5rem; text-align: center; font-size: 1.6rem; font-weight: 700; background: var(--panel);
  border: 1px solid var(--line-2); border-radius: .5rem; font-variant-numeric: tabular-nums; color: var(--heading);
}
.otp-inputs input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(26, 187, 156, .18); }
.otp-inputs.is-error input { border-color: var(--bad); animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--heading); }
.countdown.is-low { color: var(--bad); }
@media (max-width: 380px) { .otp-inputs input { width: 2.5rem; height: 3rem; font-size: 1.3rem; } }

/* Importación */
.dropzone {
  border: 2px dashed var(--line-2); border-radius: .9rem; padding: 2.5rem 1rem; text-align: center;
  background: var(--panel-alt); cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone i { font-size: 2.2rem; color: var(--accent-2); }
.dropzone.dz-factura { padding: 1.1rem .75rem; font-size: .85rem; }
.dropzone.dz-factura i { font-size: 1.7rem; margin-bottom: .25rem; }
.dropzone.dz-factura * { pointer-events: none; }
.dropzone.ok { border-color: var(--ok); border-style: solid; background: var(--ok-soft); color: var(--ok); }
.dropzone.ok i { color: var(--ok); }
.dropzone.has-error { border-color: var(--bad); background: var(--bad-soft); }
.cfdi-card { border: 1px solid var(--line); border-radius: .5rem; background: var(--panel-alt); padding: .85rem 1rem; font-size: .85rem; }
.cfdi-card dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cfdi-card dd { margin-bottom: .45rem; }

.clabe { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }

/* Estado financiero mensual (formato tipo hoja: meses en columnas) */
.tbl-estados-wrap { overflow: auto; max-height: calc(100vh - 260px); min-height: 260px; -webkit-overflow-scrolling: touch; }
.tbl-estados { border-collapse: collapse; font-size: .84rem; min-width: 1180px; width: 100%; }
.tbl-estados th, .tbl-estados td { padding: .38rem .55rem; border: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.tbl-estados .col-label { min-width: 230px; font-weight: 500; position: sticky; left: 0; z-index: 2; background: inherit; }
.tbl-estados thead th { background: #3b5068; color: #fff; text-align: center; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; position: sticky; top: 0; z-index: 3; }
.tbl-estados thead th.col-label { z-index: 4; text-align: left; background: #3b5068; }
.tbl-estados td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-estados td.num-neg { color: var(--bad); }
.tbl-estados .fila-dato td { background: var(--panel); }
.tbl-estados .fila-dato .col-label { padding-left: 1.4rem; }
.tbl-estados .fila-seccion td { background: #64748b; color: #fff; font-weight: 700; letter-spacing: .04em; }
.tbl-estados .fila-cat td { background: var(--bg); color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tbl-estados .fila-total td { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.tbl-estados .fila-total-egr td { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.tbl-estados .fila-resultado td { background: var(--ink); color: #fff; font-weight: 700; }
.tbl-estados .fila-resultado td.num-neg, .tbl-estados .fila-rent td.num-neg { color: #fca5a5; }
.tbl-estados .fila-rent td { background: #3b5068; color: #e2e8f0; font-weight: 700; }
.tbl-estados .fila-acum td { background: var(--bg); font-weight: 700; }
.tbl-estados .fila-cobrar td.num { color: var(--bad); }
.toast-container { z-index: 2000; }
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

/* =====================================================================
   Recibo oficial (pantalla e impresión carta)
   ===================================================================== */
.recibo-wrap { max-width: 816px; margin: 0 auto; }
.recibo { --ink: #14243d; --brass: #c9a55c; --heading: #14243d; --text: #1f2937; --muted: #5b6474; --line: #e3e7ee; color: var(--text); }
.recibo {
  background: #fff; border: 1px solid var(--line); border-radius: .9rem; padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .06); position: relative; overflow: hidden;
}
.recibo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--ink) 70%, var(--brass) 70%); }
.recibo-head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
.recibo-folio { text-align: right; }
.recibo-folio .folio { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.recibo-sello {
  display: inline-block; border: 2px solid var(--ok); color: var(--ok); font-weight: 700; padding: .2rem .6rem;
  border-radius: .4rem; transform: rotate(-4deg); letter-spacing: .1em; font-size: .8rem; margin-top: .4rem;
}
.recibo-meta dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.recibo-meta dd { font-weight: 500; margin-bottom: .75rem; }
.recibo-tabla th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: #f8f9fc; }
.recibo-total { background: var(--ink); color: #fff; border-radius: .6rem; padding: 1rem 1.25rem; }
.recibo-total .monto { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.recibo-sign { display: grid; grid-template-columns: 140px 1fr; gap: 1.25rem; align-items: start; border-top: 1px dashed #c9d1de; padding-top: 1.25rem; }
#qr img, #qr canvas { width: 132px !important; height: 132px !important; }
@media (max-width: 576px) {
  .recibo { padding: 1.25rem; }
  .recibo-head { flex-direction: column; }
  .recibo-folio { text-align: left; }
  .recibo-sign { grid-template-columns: 1fr; }
}

@media print {
  @page { size: letter; margin: 12mm; }
  body, .bg-app { background: #fff !important; }
  .no-print, .navbar, .toast-container { display: none !important; }
  .recibo-wrap { max-width: none; }
  .recibo { border: 0; box-shadow: none; padding: 0; }
  .recibo::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .recibo-total, .recibo-tabla th, .recibo-sello { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .container, .container-fluid { max-width: none !important; padding: 0 !important; }
  a[href]::after { content: none !important; }
}

/* Selector de estatus con color dentro de la tabla de inventario */
select.badge-st { padding: .25rem 1.6rem .25rem .6rem; font-size: .75rem; background-position: right .4rem center; cursor: pointer; }

/* Relación de pago por casa (cuadrícula casa × mes) */
.tbl-relacion th, .tbl-relacion td { text-align: center; vertical-align: middle; padding: .3rem .25rem; }
.tbl-relacion th:first-child, .tbl-relacion td:first-child { text-align: left; padding-left: .75rem; white-space: nowrap; }
.tbl-relacion th.mes-actual { color: var(--heading); background: var(--accent-soft); }
.tbl-relacion tbody tr { cursor: pointer; }
.tbl-relacion tfoot td { background: var(--bg); font-weight: 700; font-variant-numeric: tabular-nums; }
.rel-celda { display: inline-grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; font-size: .75rem; font-weight: 700; vertical-align: middle; }
.rel-PAGADO { background: var(--ok-soft); color: var(--ok); }
.rel-VENCIDO { background: var(--bad-soft); color: var(--bad); }
.rel-PENDIENTE { background: var(--warn-soft); color: var(--warn); }
.rel-NA { color: var(--line-2); }

/* Guía de uso: índice fijo a la izquierda y contenido con su propio desplazamiento */
.modal-dialog-scrollable .modal-body.guia { display: flex; overflow: hidden; }
@media (min-width: 992px) { #modal-guia .modal-content { height: calc(100vh - 3.5rem); } }
.guia-indice { position: relative; flex: 0 0 260px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel-alt); padding: .5rem .5rem 2rem; }
.guia-grupo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 1rem .75rem .35rem; }
.guia-indice a { display: block; padding: .38rem .75rem; border-radius: .45rem; color: var(--bs-body-color); text-decoration: none; font-size: .85rem; line-height: 1.3; }
.guia-indice a:hover { background: var(--hover); }
.guia-indice a.activo { background: var(--accent-soft); color: var(--heading); font-weight: 600; }
.guia-indice a[hidden], .guia-grupo[hidden] { display: none; }
.guia-contenido { position: relative; flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 1.5rem 2rem 5rem; outline: 0; }
@media (max-width: 575.98px) { .guia-contenido { padding: 1rem 1rem 4rem; } }
.guia-sec { max-width: 880px; }
.guia-sec + .guia-sec { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 2rem; }
.guia-sec h3 { font-size: 1.25rem; font-weight: 700; color: var(--heading); margin-bottom: .75rem; }
.guia-sec h4 { font-size: 1rem; font-weight: 700; color: var(--heading); margin: 1.4rem 0 .5rem; }
.guia-sec p, .guia-sec li, .guia-sec dd { font-size: .95rem; line-height: 1.6; }
.guia-sec ul, .guia-sec ol { padding-left: 1.3rem; }
.guia-sec li { margin-bottom: .3rem; }
.guia-pasos > li::marker { font-weight: 700; color: var(--accent-2); }
.guia-tabla { font-size: .88rem; margin: .75rem 0 1rem; }
.guia-tabla th { background: var(--panel-alt); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.guia-tabla td:first-child { min-width: 9rem; }
.g-btn { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .45rem; border: 1px solid var(--line-2); border-radius: .35rem; background: var(--panel); font-size: .82rem; font-weight: 600; color: var(--heading); white-space: nowrap; line-height: 1.6; }
.guia-nota, .guia-alerta { display: flex; gap: .65rem; padding: .75rem 1rem; border-radius: .6rem; font-size: .9rem; line-height: 1.55; margin: 1rem 0; }
.guia-nota { background: var(--accent-soft); color: var(--text); }
.guia-alerta { background: var(--warn-soft); color: var(--text); }
.guia-nota > i, .guia-alerta > i { font-size: 1.1rem; line-height: 1.4; }
.guia-faq dt { font-weight: 600; color: var(--heading); margin-top: .9rem; font-size: .92rem; }
.guia-faq dd { margin: .2rem 0 0; color: var(--text); }
.guia-sec kbd { background: var(--hover); color: var(--heading); border: 1px solid var(--line-2); font-size: .75rem; padding: .05rem .35rem; }
mark.guia-hl { background: #ffe58a; color: inherit; padding: 0 1px; border-radius: 2px; }
.guia-fig { margin: 1rem 0 1.4rem; }
.guia-fig a { display: inline-block; max-width: 100%; cursor: zoom-in; }
.guia-fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: 640px; border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 1px 2px rgba(20, 36, 61, .06), 0 8px 24px rgba(20, 36, 61, .07); background: var(--panel); }
.guia-fig figcaption { font-size: .84rem; color: var(--muted); margin-top: .5rem; }
.guia-aclaracion { font-size: .82rem; color: var(--muted); font-style: italic; }

@media print {
  body.imprimir-guia { overflow: visible !important; }
  body.imprimir-guia > *:not(#modal-guia) { display: none !important; }
  body.imprimir-guia #modal-guia { position: static !important; display: block !important; overflow: visible !important; }
  body.imprimir-guia #modal-guia .modal-dialog { max-width: none !important; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; }
  body.imprimir-guia #modal-guia .modal-content { height: auto !important; max-height: none !important; overflow: visible !important; border: 0; box-shadow: none; }
  body.imprimir-guia #modal-guia .modal-body { display: block !important; overflow: visible !important; }
  body.imprimir-guia .guia-indice, body.imprimir-guia .guia-herramientas, body.imprimir-guia #modal-guia .btn-close, body.imprimir-guia #guia-contexto { display: none !important; }
  body.imprimir-guia .guia-contenido { overflow: visible !important; padding: 0 !important; }
  body.imprimir-guia .guia-sec h3, body.imprimir-guia .guia-sec h4 { break-after: avoid; }
  body.imprimir-guia .guia-fig { break-inside: avoid; }
  body.imprimir-guia .guia-fig img { max-height: 520px; box-shadow: none; }
  body.imprimir-guia .guia-nota, body.imprimir-guia .guia-alerta, body.imprimir-guia .rel-celda, body.imprimir-guia .badge-st { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 991.98px) {
  .guia-herramientas { width: 100%; }
  #modal-guia .modal-header > div:first-child { flex: 1 1 0; min-width: 0; }
  .guia-herramientas #guia-ir { width: 100% !important; }
  .guia-herramientas .input-group { width: auto !important; flex: 1 1 0; }
}

/* Configuración → Estilo: opciones con muestra */
.estilo-op {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: 100%; min-height: 6.5rem;
  padding: .8rem; border: 2px solid var(--line); border-radius: .5rem; background: var(--panel); color: var(--heading); cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.estilo-op:hover { border-color: var(--line-2); background: var(--hover); }
.btn-check:checked + .estilo-op { border-color: var(--accent); background: var(--accent-soft); }
.btn-check:focus-visible + .estilo-op { box-shadow: 0 0 0 .2rem rgba(26, 187, 156, .3); }
.estilo-aa { font-weight: 700; line-height: 1; color: var(--heading); }
.estilo-muestra { display: flex; width: 96px; height: 54px; border-radius: .35rem; overflow: hidden; border: 1px solid var(--line-2); }
.estilo-muestra i { width: 26px; background: #2a3f54; }
.estilo-muestra b { flex: 1; background: linear-gradient(#ededed 0 12px, #f7f7f7 12px); }
.muestra-oscuro i { background: #111820; }
.muestra-oscuro b { background: linear-gradient(#1a222c 0 12px, #151c24 12px); }
.muestra-auto b { background: linear-gradient(90deg, #f7f7f7 50%, #151c24 50%); }

/* Resumen: egresos por concepto con barra de proporción */
.concepto-fila { margin-bottom: .8rem; }
.concepto-fila .progress { height: 9px; border-radius: 0; margin-top: .3rem; }
.concepto-fila .progress-bar { background: var(--accent); }
#res-filtro .btn-group .btn { white-space: nowrap; }

/* Ventana que se abre encima de otra (editar pago desde el estado de cuenta o el historial) */
#modal-recibo-editar { z-index: 1065; }
.modal-backdrop.encima { z-index: 1060; }

/* Notificaciones → Mensajes de correo: editor y vista previa */
.msj-tipos .nav-link { padding: .3rem .7rem; font-size: .85em; border: 1px solid var(--line); color: var(--text); background: var(--panel); }
.msj-tipos .nav-link.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.msj-tipos .nav-link .bi-dot { margin: 0 -.3rem 0 -.1rem; }
@media (min-width: 992px) { .border-end-lg { border-right: 1px solid var(--line); } }
.msj-bloque { padding: .5rem .7rem; border: 1px dashed var(--line-2); border-radius: .35rem; background: var(--panel-alt); color: var(--muted); font-size: .82em; }
.msj-var { padding: .15rem .5rem; border: 1px solid var(--line-2); border-radius: 1rem; background: var(--panel); color: var(--heading); font-size: .8em; font-family: Consolas, Menlo, monospace; }
.msj-var:hover, .msj-var:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.msj-vista-col { background: var(--panel-alt); }
.msj-sobre { border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; background: var(--panel); }
.msj-sobre-fila { display: flex; gap: .75rem; padding: .45rem .8rem; border-bottom: 1px solid var(--line); font-size: .85em; }
.msj-sobre-fila > span:first-child { flex: 0 0 4.2rem; color: var(--muted); }
.msj-sobre-fila strong { color: var(--heading); word-break: break-word; }
.msj-iframe { display: block; width: 100%; height: 620px; border: 0; background: #eef1f5; }
.msj-cargando { position: absolute; top: .6rem; right: .8rem; color: var(--muted); }

/* Mensaje con formato: vista en el panel y editor (el área imita el cuerpo del correo, siempre en blanco) */
.msj-rico {
  min-height: 4.5rem; max-height: 14rem; overflow: auto; padding: .6rem .75rem; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: .35rem; background: #fff; color: #1f2937; font-size: .9em; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.msj-rico:hover, .msj-rico:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(26, 187, 156, .2); outline: none; }
.msj-rico-cierre { min-height: 3rem; color: #5b6474; font-size: .85em; }
.msj-rico.vacio::before { content: 'Sin texto · clic para escribir'; color: #9aa4b2; font-style: italic; }
.msj-rico p, .me-area p { margin: 0 0 .6em; }
.msj-rico > :last-child, .me-area > :last-child { margin-bottom: 0; }
.msj-rico h2, .me-area h2 { margin: 0 0 .45em; font-size: 1.4em; color: #14243d; font-weight: 700; }
.msj-rico h3, .me-area h3 { margin: 0 0 .4em; font-size: 1.15em; color: #14243d; font-weight: 700; }
.msj-rico blockquote, .me-area blockquote { margin: 0 0 .6em; padding: .4em .9em; border-left: 3px solid #c9a55c; background: #f7f4ec; }
.msj-rico ul, .msj-rico ol, .me-area ul, .me-area ol { margin: 0 0 .6em; padding-left: 1.4em; }
.msj-rico a, .me-area a { color: #1a6fb5; }
.msj-rico hr, .me-area hr { border: 0; border-top: 1px solid #e3e7ee; margin: .8em 0; opacity: 1; }
.msj-var-txt { padding: 0 .25em; border-radius: .25em; background: #e8f6f2; color: #137a66; font-family: Consolas, Menlo, monospace; font-size: .92em; }

#modal-msj-editor { z-index: 1065; }
.me-editor { overflow: hidden; }
.me-barra { display: flex; flex-wrap: wrap; gap: .35rem .6rem; padding: .5rem; border-bottom: 1px solid var(--line); background: var(--panel-alt); position: sticky; top: 0; z-index: 2; }
.me-grupo { display: flex; align-items: center; gap: .15rem; }
.me-grupo + .me-grupo { padding-left: .6rem; border-left: 1px solid var(--line); }
.me-grupo .form-select { width: auto; max-width: 9.5rem; }
.me-barra .btn { position: relative; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; color: var(--heading); display: inline-flex; align-items: center; justify-content: center; }
.me-barra .btn:hover { background: var(--hover); border-color: var(--line); }
.me-barra .btn.activo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.me-tachar { position: absolute; font-size: .9em; }
.me-color { flex-direction: column; gap: 0; line-height: 1; }
.me-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.me-color-barra { display: block; width: 1rem; height: 3px; border-radius: 2px; margin-top: 1px; }
.me-area {
  min-height: 300px; max-height: 58vh; overflow: auto; padding: 1.1rem 1.25rem; background: #fff; color: #1f2937;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.55; outline: none;
}
.me-area:focus { box-shadow: inset 0 0 0 2px rgba(26, 187, 156, .35); }
.me-iframe { height: 560px; }
.me-cuerpo { background: var(--bg); }