/* Tema visual JASS (lote 28). Una sola paleta por tema: los tokens --jass-* alimentan las
   variables de Bootstrap 5.3.3, de modo que tarjetas, modales, menús, campos, tablas y paginación
   comparten fondos y bordes. Contrastes verificados (texto ≥ 4,5:1; bordes de campos ≥ 3:1). */

[data-bs-theme="dark"] {
  /* Agua de noche: azul profundo en vez de negro neutro. */
  --jass-bg: #0d1720;            /* fondo de la página */
  --jass-surface: #111d29;       /* barra superior y pie */
  --jass-card: #162433;          /* tarjetas */
  --jass-elevated: #1c2c3d;      /* modales y menús, por encima de las tarjetas */
  --jass-input: #0f1a25;         /* campos de formulario */
  --jass-border: #2a3e52;        /* separadores y bordes de tarjeta */
  --jass-border-input: #5b7690;  /* borde de campos: 3,3:1 sobre la tarjeta */
  --jass-text: #e6edf3;
  --jass-muted: #9fb2c5;
  --jass-accent: #7cc0f5;        /* enlaces y foco */
  --jass-primary: #2a6db0;
  --jass-primary-hover: #2460a0;
  --jass-primary-rgb: 42, 109, 176;
  --jass-success: #2e7d46;
  --jass-success-hover: #276b3c;
  --jass-hover: rgba(124, 192, 245, .08);
  --jass-focus-ring: rgba(124, 192, 245, .35);
  --jass-shadow: rgba(0, 0, 0, .45);
  --jass-login-bg: linear-gradient(180deg, #0f2233 0%, #0d1720 70%);
  --jass-kpi-azul: #6fb1ec;
  --jass-kpi-verde: #5cc488;
  --jass-kpi-rojo: #ef7b84;
  --jass-warning-card: #2a2416;
  --jass-placeholder: #8ea3b8;
  /* Versiones RGB que usan las utilidades bg-body-*, bg-body-secondary y bg-body-tertiary. */
  --bs-body-bg-rgb: 13, 23, 32;
  --bs-secondary-bg-rgb: 28, 44, 61;
  --bs-tertiary-bg-rgb: 17, 29, 41;
  --bs-body-color-rgb: 230, 237, 243;
  --bs-emphasis-color-rgb: 230, 237, 243;
}

[data-bs-theme="light"] {
  --jass-bg: #f2f5f9;
  --jass-surface: #e8eef5;
  --jass-card: #ffffff;
  --jass-elevated: #ffffff;
  --jass-input: #ffffff;
  --jass-border: #d5dde7;
  --jass-border-input: #7f8fa3;  /* 3,3:1 sobre blanco */
  --jass-text: #172536;
  --jass-muted: #536273;
  --jass-accent: #174f85;
  --jass-primary: #1f5f9e;
  --jass-primary-hover: #1a5288;
  --jass-primary-rgb: 31, 95, 158;
  --jass-success: #2b7a3d;
  --jass-success-hover: #226231;
  --jass-hover: rgba(31, 95, 158, .06);
  --jass-focus-ring: rgba(31, 95, 158, .3);
  --jass-shadow: rgba(31, 50, 75, .14);
  --jass-login-bg: linear-gradient(180deg, #e3eef9 0%, #f2f5f9 70%);
  --jass-kpi-azul: #1f6fb8;
  --jass-kpi-verde: #23824a;
  --jass-kpi-rojo: #c4323f;
  --jass-warning-card: #fff8e5;
  --jass-placeholder: #627082;
  --bs-body-bg-rgb: 242, 245, 249;
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg-rgb: 232, 238, 245;
  --bs-body-color-rgb: 23, 37, 54;
  --bs-emphasis-color-rgb: 23, 37, 54;
}

/* Puente hacia Bootstrap: sus componentes leen estas variables. */
[data-bs-theme] {
  --bs-body-bg: var(--jass-bg);
  --bs-body-color: var(--jass-text);
  --bs-emphasis-color: var(--jass-text);
  --bs-secondary-color: var(--jass-muted);
  --bs-tertiary-color: var(--jass-muted);
  --bs-secondary-bg: var(--jass-elevated);
  --bs-tertiary-bg: var(--jass-surface);
  --bs-border-color: var(--jass-border);
  --bs-border-color-translucent: var(--jass-border);
  --bs-link-color: var(--jass-accent);
  --bs-link-hover-color: var(--jass-accent);
  --bs-link-color-rgb: var(--jass-primary-rgb);
  --bs-primary: var(--jass-primary);
  --bs-primary-rgb: var(--jass-primary-rgb);
  --bs-focus-ring-color: var(--jass-focus-ring);
}
[data-bs-theme="dark"] { --bs-link-color-rgb: 124, 192, 245; }
[data-bs-theme="light"] { --bs-link-color-rgb: 23, 79, 133; }
/* Avisos y fondos «secondary» de Bootstrap con la paleta propia (en oscuro eran casi negros). */
[data-bs-theme] {
  --bs-secondary-text-emphasis: var(--jass-text);
  --bs-secondary-border-subtle: var(--jass-border);
}
[data-bs-theme="dark"] { --bs-secondary-bg-subtle: var(--jass-elevated); }
[data-bs-theme="light"] { --bs-secondary-bg-subtle: var(--jass-surface); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--jass-bg);
  color: var(--jass-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Superficies */
.card {
  --bs-card-bg: var(--jass-card);
  --bs-card-border-color: var(--jass-border);
  --bs-card-cap-bg: transparent;
  --bs-card-border-radius: 12px;
  --bs-card-inner-border-radius: 11px;
}
.modal { --bs-modal-bg: var(--jass-elevated); --bs-modal-border-color: var(--jass-border); --bs-modal-header-border-color: var(--jass-border); --bs-modal-footer-border-color: var(--jass-border); }
.dropdown-menu { --bs-dropdown-bg: var(--jass-elevated); --bs-dropdown-border-color: var(--jass-border); --bs-dropdown-link-hover-bg: var(--jass-hover); }
.offcanvas { --bs-offcanvas-bg: var(--jass-elevated); }
.list-group { --bs-list-group-bg: var(--jass-card); --bs-list-group-border-color: var(--jass-border); }
.warning-card { background: var(--jass-warning-card); }

/* Campos: fondo propio y borde visible; un único indicador de foco (borde + anillo). */
.form-control, .form-select {
  background-color: var(--jass-input);
  border-color: var(--jass-border-input);
  color: var(--jass-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--jass-input);
  border-color: var(--jass-accent);
  color: var(--jass-text);
  box-shadow: 0 0 0 .2rem var(--jass-focus-ring);
  outline: 0;
}
/* Lote 71: un campo deshabilitado se ve claro y sin relleno, para que no parezca un botón. */
.form-control:disabled, .form-select:disabled { background-color: var(--jass-input); border-color: var(--jass-border); color: var(--jass-muted); }
.form-control[readonly] { background-color: var(--jass-surface); }
.form-control::placeholder { color: var(--jass-placeholder); opacity: 1; }
.form-check-input { background-color: var(--jass-input); border-color: var(--jass-border-input); }
.form-check-input:checked { background-color: var(--jass-primary); border-color: var(--jass-primary); }
.form-check-input:focus { border-color: var(--jass-accent); box-shadow: 0 0 0 .2rem var(--jass-focus-ring); }
.input-group-text { background-color: var(--jass-surface); border-color: var(--jass-border-input); color: var(--jass-muted); }

/* Tablas */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--jass-text);
  --bs-table-border-color: var(--jass-border);
  --bs-table-hover-bg: var(--jass-hover);
  --bs-table-hover-color: var(--jass-text);
}
.table-theme { --bs-table-bg: var(--jass-surface); }

/* Botones con el azul de la JASS */
.btn-primary {
  --bs-btn-bg: var(--jass-primary); --bs-btn-border-color: var(--jass-primary);
  --bs-btn-hover-bg: var(--jass-primary-hover); --bs-btn-hover-border-color: var(--jass-primary-hover);
  --bs-btn-active-bg: var(--jass-primary-hover); --bs-btn-active-border-color: var(--jass-primary-hover);
  --bs-btn-disabled-bg: var(--jass-primary); --bs-btn-disabled-border-color: var(--jass-primary);
}
.btn-success {
  --bs-btn-bg: var(--jass-success); --bs-btn-border-color: var(--jass-success);
  --bs-btn-hover-bg: var(--jass-success-hover); --bs-btn-hover-border-color: var(--jass-success-hover);
  --bs-btn-active-bg: var(--jass-success-hover); --bs-btn-active-border-color: var(--jass-success-hover);
}
.pagination {
  --bs-pagination-bg: var(--jass-card); --bs-pagination-border-color: var(--jass-border);
  --bs-pagination-color: var(--jass-accent); --bs-pagination-hover-bg: var(--jass-hover);
  --bs-pagination-hover-color: var(--jass-accent); --bs-pagination-hover-border-color: var(--jass-border);
  --bs-pagination-active-bg: var(--jass-primary); --bs-pagination-active-border-color: var(--jass-primary);
  --bs-pagination-disabled-bg: var(--jass-card); --bs-pagination-disabled-border-color: var(--jass-border);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--jass-focus-ring);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--jass-primary); }
[data-bs-theme="dark"] .btn-outline-primary {--bs-btn-color:#8bb9fe;--bs-btn-border-color:#8bb9fe;--bs-btn-hover-bg:var(--jass-primary);--bs-btn-hover-border-color:var(--jass-primary)}
[data-bs-theme="dark"] .btn-outline-success {--bs-btn-color:#83dfab;--bs-btn-border-color:#83dfab}
[data-bs-theme="dark"] .btn-outline-danger {--bs-btn-color:#ff9aa5;--bs-btn-border-color:#ff9aa5}
[data-bs-theme="dark"] .btn-outline-secondary {--bs-btn-color:#b3c2d1;--bs-btn-border-color:#5b7690;--bs-btn-hover-bg:var(--jass-elevated);--bs-btn-hover-border-color:#7f97ae;--bs-btn-hover-color:var(--jass-text)}
[data-bs-theme="light"] .btn-outline-warning {--bs-btn-color:#805d00;--bs-btn-border-color:#805d00;--bs-btn-hover-color:#172536;--bs-btn-hover-bg:#ffd45b}
[data-bs-theme="light"] .btn-outline-info {--bs-btn-color:#096278;--bs-btn-border-color:#096278;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#096278}
[data-bs-theme="light"] .btn-outline-secondary {--bs-btn-color:#536170;--bs-btn-border-color:#7f8fa3}
/* Lote 70: hover suave de Inicio en todos los botones de contorno gris y azul (el de Bootstrap era muy fuerte). Va después
   de las reglas por tema para ganarles; los de contorno rojo conservan su relleno porque avisan una acción peligrosa. */
[data-bs-theme] .btn-outline-secondary, [data-bs-theme] .btn-outline-primary { --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-hover-bg: rgba(var(--jass-primary-rgb), .08); --bs-btn-hover-border-color: var(--jass-accent); }

/* Foco visible para enlaces y botones; los campos usan su propio anillo (arriba). */
:where(a, button, .btn, summary):focus-visible { outline: 3px solid var(--jass-accent); outline-offset: 3px; box-shadow: none; }

/* Barra superior */
.jass-navbar { background: var(--jass-surface); border-bottom: 1px solid var(--jass-border); }
.jass-navbar .navbar-collapse { min-width: 0; flex-wrap: wrap; column-gap: .75rem; row-gap: .5rem; }
.jass-navbar .navbar-nav, .jass-navbar .navbar-collapse > .d-flex { flex-wrap: wrap; }
.navbar-brand img { height: 38px; width: 38px; border-radius: 50%; object-fit: cover; }
.jass-brand-nombre { color: var(--jass-accent); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.jass-brand-sub { color: var(--jass-muted); font-size: .72rem; }
.jass-cuenta { border-top: 1px solid var(--jass-border); }
/* Menú de cuenta (lote 68): botón con la inicial y el usuario; el menú lleva rol, contraseña y cierre de sesión. */
.jass-cuenta-boton { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.5rem; padding: 0 .7rem 0 .35rem; border: 1px solid var(--jass-border); border-radius: 999px; background-color: var(--jass-input); color: var(--jass-text); font-weight: 600; }
.jass-cuenta-boton:hover { background-color: var(--jass-hover); }
.jass-cuenta-boton:focus-visible { outline: 2px solid var(--jass-accent); outline-offset: 2px; }
.jass-cuenta-inicial { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: rgba(var(--jass-primary-rgb), .14); color: var(--jass-accent); font-size: .8rem; font-weight: 700; }
.jass-cuenta-menu { min-width: 15rem; padding: .375rem; border-radius: 12px; }
.jass-cuenta-datos { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .5rem .75rem .75rem; margin-bottom: .25rem; border-bottom: 1px solid var(--jass-border); }
.jass-cuenta-menu .dropdown-item { border-radius: 8px; padding: .55rem .75rem; }
.jass-usuario { font-size: .9rem; }
.badge-role { font-size: .72rem; padding: .3em .6em; font-weight: 600; background-color: var(--jass-elevated); color: var(--jass-muted); border: 1px solid var(--jass-border); }
.nav-link { font-weight: 500; padding: .5rem .85rem !important; border-radius: 6px; transition: background-color .15s ease-in-out, color .15s ease-in-out; }
.nav-link:hover, .nav-link.active { background-color: var(--jass-hover); color: var(--jass-accent) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--jass-primary); color: #fff !important; }
@media (min-width: 992px) { .jass-cuenta { border-top: 0; } }
@media (max-width: 991.98px) {
  .navbar-collapse { background-color: var(--jass-surface); padding: 1rem; border-radius: 8px; margin-top: .5rem; border: 1px solid var(--jass-border); }
}

.footer { margin-top: auto; border-top: 1px solid var(--jass-border); background-color: var(--jass-surface); font-size: .85rem; color: var(--jass-muted); }

/* Indicadores del Inicio: superficie de tarjeta y una franja de color; el rojo sólo cuando hay algo
   que revisar (kpi-red), si no, neutro (kpi-neutral). */
.kpi-card { --kpi-color: var(--jass-muted); border-left: 4px solid var(--kpi-color); }
.kpi-blue { --kpi-color: var(--jass-kpi-azul); }
.kpi-green { --kpi-color: var(--jass-kpi-verde); }
.kpi-red { --kpi-color: var(--jass-kpi-rojo); }
.kpi-neutral { --kpi-color: var(--jass-border-input); }
.kpi-rotulo { color: var(--jass-muted); font-size: .875rem; font-weight: 600; }
.kpi-valor { color: var(--jass-text); font-size: 2.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-detalle { color: var(--jass-muted); }
.kpi-icon {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  color: var(--kpi-color); background: var(--jass-hover); /* respaldo para navegadores sin color-mix */
  background: color-mix(in srgb, var(--kpi-color) 14%, transparent);
}
.kpi-enlace { color: var(--jass-accent); font-size: .875rem; font-weight: 600; text-decoration: none; }
.kpi-enlace:hover { text-decoration: underline; }
.badge-suave { background-color: var(--jass-elevated); color: var(--jass-muted); border: 1px solid var(--jass-border); font-weight: 600; }

/* Etiquetas por significado, en su versión suave (texto con 7:1 aprox. sobre su fondo en ambos temas).
   Una misma situación (Activo, Corte por deuda…) se ve igual en todas las pantallas. */
.etiqueta-exito, .etiqueta-info, .etiqueta-aviso, .etiqueta-peligro, .etiqueta-primario { font-weight: 600; border: 1px solid; }
.etiqueta-exito { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); }
.etiqueta-info { background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); border-color: var(--bs-info-border-subtle); }
.etiqueta-aviso { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
.etiqueta-peligro { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle); }
.etiqueta-primario { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); }
.texto-mini { font-size: .75rem; }

/* Formularios: título de sección, panel interior y campos de sólo lectura (lote 28). */
.seccion-titulo {
  font-size: 1rem; font-weight: 700; color: var(--jass-text);
  margin: 0 0 .9rem; padding-bottom: .45rem; border-bottom: 1px solid var(--jass-border);
}
.seccion-titulo .bi { color: var(--jass-muted); margin-right: .35rem; }
.panel-suave { background-color: var(--jass-surface); border: 1px solid var(--jass-border); border-radius: 10px; }
/* Un dato que no se edita aquí no debe parecer un campo: sin fondo y con borde punteado. */
.form-control[readonly] {
  background-color: transparent; border-style: dashed; border-color: var(--jass-border-input); color: var(--jass-text); cursor: default;
}
.form-control[readonly]:focus { box-shadow: none; border-color: var(--jass-border-input); }

/* Accesos rápidos de Inicio (lote 69): título a la izquierda y accesos a la derecha; el icono indica el módulo y lo conserva al pasar el cursor. */
.accesos-rapidos-cuerpo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 1.1rem 1.5rem; }
.accesos-rapidos-titulo { margin: 0; font-size: .95rem; font-weight: 600; color: var(--jass-muted); }
.accesos-rapidos-lista { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.acceso-rapido { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.4rem; padding: 0 .9rem; border-radius: 8px; font-size: .9rem; font-weight: 500; }
/* Hover suave en ambos temas: el gris de Bootstrap en tema claro era muy fuerte y dejaba el texto ilegible. */
.btn-outline-secondary.acceso-rapido { --bs-btn-color: var(--jass-text); --bs-btn-hover-color: var(--jass-text); --bs-btn-hover-bg: rgba(var(--jass-primary-rgb), .08); --bs-btn-hover-border-color: var(--jass-accent); --bs-btn-active-color: var(--jass-text); --bs-btn-active-bg: rgba(var(--jass-primary-rgb), .14); --bs-btn-active-border-color: var(--jass-accent); }
.btn-outline-secondary .icono-padron, .btn-outline-secondary .icono-secretaria { color: var(--jass-accent); }
.btn-outline-secondary .icono-tesoreria { color: var(--jass-kpi-verde); }

/* Buscador en la fila del título de una tarjeta (lote 71): ocupa hasta 32rem y se ajusta al ancho. */
.busqueda-en-titulo { flex: 0 1 32rem; min-width: 0; }
.busqueda-en-titulo .form-control { min-width: 0; }

/* Arqueo sin cobros (lote 72): una línea con el título y el mensaje, separada como un título de sección. */
.seccion-vacia-arqueo { padding: .75rem 0; border-top: 1px solid var(--jass-border); border-bottom: 1px solid var(--jass-border); }

/* Pie de catálogos del egreso (lote 73): enlaces a proveedores y categorías bajo el formulario. */
.pie-catalogos { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .75rem 1.5rem;
  font-size: .875rem; color: var(--jass-muted); background-color: var(--jass-surface); border-top-color: var(--jass-border); }
.pie-catalogos > span { flex-basis: 100%; }
.pie-catalogos a { text-decoration: none; font-weight: 500; }
.pie-catalogos a:hover { text-decoration: underline; }

/* Desglose del Balance del mes (lote 75): fila de grupo destacada y categorías con sangría; total al pie. */
.tabla-desglose .fila-grupo > td { font-weight: 600; }
.tabla-desglose .fila-categoria > td, .tabla-desglose .fila-cero > td { color: var(--jass-muted); }
.tabla-desglose .fila-categoria > td:first-child { padding-left: 1.75rem; }
.tabla-desglose tfoot td { font-weight: 700; background-color: var(--jass-surface); border-bottom: 0; }

/* Categorías y grupos de egresos (lote 76): acciones en una línea, grupo como título del catálogo y pestañas. */
.acciones-fila { display: flex; gap: .375rem; justify-content: flex-end; flex-wrap: nowrap; }
.acciones-fila form { margin: 0; }
.tabla-catalogo .fila-grupo-catalogo th { background-color: var(--jass-surface); font-weight: 700; font-size: .875rem; }
.tabla-catalogo .fila-categoria-catalogo td:first-child { padding-left: 1.75rem; }
.pestanas-catalogo { --bs-nav-underline-link-active-color: var(--jass-accent); border-bottom: 1px solid var(--jass-border); }
.pestanas-catalogo .nav-link { color: var(--jass-muted); }

/* Lecturas (lote 78): aviso de la consulta en una línea y «Cuota fija» como texto discreto. */
.aviso-consulta { padding: .5rem 1rem; border-bottom: 1px solid var(--jass-border); background-color: var(--jass-surface); }
.texto-cuota-fija { font-size: .875rem; color: var(--jass-muted); }
.acciones-fila .btn { white-space: nowrap; }

/* Padrón (lote 80): buscador con filtros y tipo de documento antes del número. */
.buscador-padron { flex: 1 1 22rem; max-width: 30rem; }
.tipo-documento { font-size: .6875rem; font-weight: 700; letter-spacing: .03em; color: var(--jass-muted); margin-right: .3rem; }
/* Lote 81: condición de asistencia con tres botones; la marcada toma el color de su etiqueta. */
.condicion-asistencia .btn { white-space: nowrap; }
.btn-check:checked + .condicion-presente { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); font-weight: 600; }
.btn-check:checked + .condicion-ausente { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle); font-weight: 600; }
.btn-check:checked + .condicion-justificado { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); font-weight: 600; }
/* Lote 94: Copias de seguridad; el nombre técnico del archivo, discreto bajo la fecha. */
.archivo-copia { display: block; font-family: var(--bs-font-monospace); font-size: .72rem; color: var(--jass-muted); overflow-wrap: anywhere; }
/* Lote 93: Roles y permisos; rol elegido, cuántos permisos tiene y permisos del rol por área. */
.lista-roles .rol-elegido { background-color: var(--bs-primary-bg-subtle); }
.avance-rol { display: block; width: 100%; height: .4rem; margin-top: .35rem; border: 0; border-radius: 4px; background-color: var(--jass-border); accent-color: var(--bs-primary); }
.avance-rol::-webkit-progress-bar { background-color: var(--jass-border); border-radius: 4px; }
.avance-rol::-webkit-progress-value { background-color: var(--bs-primary); border-radius: 4px; }
.avance-rol::-moz-progress-bar { background-color: var(--bs-primary); border-radius: 4px; }
.area-rol { border: 1px solid var(--jass-border); border-radius: 8px; }
.area-rol-cabecera { background-color: var(--jass-surface); border-bottom: 1px solid var(--jass-border); border-radius: 8px 8px 0 0; padding: .45rem .75rem; }
.area-rol-titulo { margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: .02em; }
/* Lote 92: Personas y entidades; persona elegida resaltada y suministros de la ficha. */
.lista-personas .persona-elegida { background-color: var(--bs-primary-bg-subtle); }
.suministro-persona { background-color: var(--jass-surface); border: 1px solid var(--jass-border); border-radius: 8px; padding: .6rem .8rem; color: inherit; text-decoration: none; }
.suministro-persona:hover { border-color: var(--bs-primary-border-subtle); }
/* Lote 91: Usuarios; lista con el elegido resaltado y accesos de la ficha por área. */
.lista-usuarios .usuario-elegido { background-color: var(--bs-primary-bg-subtle); }
.area-accesos { background-color: var(--jass-surface); border: 1px solid var(--jass-border); border-radius: 8px; padding: .6rem .8rem; font-size: .875rem; }
.area-accesos-titulo { display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 .35rem; font-size: .875rem; font-weight: 700; }
.area-accesos ul { padding-left: 1.1rem; }
.permiso-adicional .campo-motivo { max-width: 16rem; }
/* Lote 90: Bitácora; los cambios de catálogo se leen «antes → después». */
.cambio-antes { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-radius: 4px; padding: 0 .3rem; text-decoration: line-through; }
.cambio-despues { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-radius: 4px; padding: 0 .3rem; font-weight: 600; }
.cambio-flecha { color: var(--jass-muted); margin: 0 .3rem; }
.cambios-bitacora summary { color: var(--bs-link-color); cursor: pointer; }
.cambios-bitacora .table { width: auto; min-width: 26rem; max-width: 44rem; }
.cambios-bitacora .table td:first-child { white-space: nowrap; }
.tabla-bitacora td:last-child { min-width: 22rem; }
/* Lote 88: Sistema y tarifas; ficha de importes del pliego en uso y lista de pliegos. */
.importes-pliego { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.importe-pliego { background-color: var(--jass-surface); border: 1px solid var(--jass-border); border-radius: 8px; padding: .5rem .7rem; }
.importe-pliego dt { font-size: .75rem; font-weight: 400; color: var(--jass-muted); }
.importe-pliego dd { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 700; }
.nota-importe { font-size: .7rem; font-weight: 400; color: var(--jass-muted); }
.lista-pliegos .enlace-pliego { color: inherit; text-decoration: none; }
.lista-pliegos .enlace-pliego:hover .fw-semibold { text-decoration: underline; }
.lista-pliegos .pliego-elegido { background-color: var(--bs-primary-bg-subtle); }
/* Lote 86: consolidado por periodos; un bloque de cantidad y monto por mes, y el total resaltado. */
.tabla-consolidado { font-variant-numeric: tabular-nums; }
.tabla-consolidado th, .tabla-consolidado td { white-space: nowrap; }
.tabla-consolidado .col-mes { border-left: 1px solid var(--jass-border); }
.tabla-consolidado .col-total { background-color: var(--jass-surface); }
.tabla-consolidado .fila-seccion td { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--jass-accent); background-color: var(--jass-surface); }
.tabla-consolidado .fila-subtotal td { font-weight: 700; border-top: 2px solid var(--jass-border); }
.tabla-consolidado .fila-saldo td { font-weight: 700; background-color: var(--bs-primary-bg-subtle); }
/* Lote 84: aportes comunales; cifras del acuerdo o del aporte y avance de la recaudación. */
.cifras-aporte { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.cifra-aporte { background-color: var(--jass-surface); border: 1px solid var(--jass-border); border-radius: 8px; padding: .55rem .75rem; }
.cifra-aporte dt { font-size: .75rem; font-weight: 400; color: var(--jass-muted); }
.cifra-aporte dd { margin: .2rem 0 0; font-size: 1.2rem; font-weight: 700; }
.avance-aportes { display: block; width: 10rem; height: .45rem; margin: .25rem 0; border: 0; border-radius: 4px; background-color: var(--jass-border); accent-color: var(--jass-success); }
.avance-aportes.w-100 { width: 100%; }
.avance-aportes::-webkit-progress-bar { background-color: var(--jass-border); border-radius: 4px; }
.avance-aportes::-webkit-progress-value { background-color: var(--jass-success); border-radius: 4px; }
.avance-aportes::-moz-progress-bar { background-color: var(--jass-success); border-radius: 4px; }
.buscador-aportes { flex: 0 1 36rem; min-width: min(100%, 18rem); }
/* Lote 82: filtro por condición junto al buscador; el elegido toma el color de su condición. */
.filtro-asistencia { flex: 1 1 16rem; max-width: 22rem; }
.filtro-condicion .btn { white-space: nowrap; }
.filtro-estado-aportes .btn { white-space: nowrap; }
.filtro-condicion .btn.active, .filtro-estado-aportes .btn.active { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); font-weight: 600; }
.filtro-condicion .btn.active.condicion-presente { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); }
.filtro-condicion .btn.active.condicion-ausente { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle); }
.filtro-condicion .btn.active.condicion-justificado { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }

/* Selector de tema */
.tema-selector { flex-wrap: wrap; max-width: 100%; }
#tema-estado:empty { display: none; }
/* Acceso (lote 67): «Oscuro / Claro» como botón segmentado. La opción elegida se distingue por fondo y peso, no sólo por color. */
.tema-opciones { display: inline-flex; padding: 2px; border: 1px solid var(--jass-border); border-radius: 999px; background-color: var(--jass-input); }
.tema-opcion { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .85rem; border-radius: 999px; color: var(--jass-muted); font-size: .8rem; font-weight: 500; cursor: pointer; user-select: none; }
.tema-opcion:hover { color: var(--jass-text); }
.btn-check:checked + .tema-opcion { background-color: rgba(var(--jass-primary-rgb), .22); color: var(--jass-text); font-weight: 600; }
.btn-check:focus-visible + .tema-opcion { outline: 2px solid var(--jass-accent); outline-offset: 1px; }
/* Historial de Tesorería (lote 126): el mismo botón segmentado con enlaces; la opción activa se distingue por fondo y peso. */
a.tema-opcion { text-decoration: none; }
.tema-opcion.activa { background-color: rgba(var(--jass-primary-rgb), .22); color: var(--jass-text); font-weight: 600; }
a.tema-opcion:focus-visible { outline: 2px solid var(--jass-accent); outline-offset: 1px; }

/* Acceso (login): la superficie del agua al pie de la página es el único adorno. */
.page-login {
  background: var(--jass-login-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 7rem;
  position: relative;
}
.page-login::after {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 160px;
  background: url("../img/login-agua.svg") repeat-x bottom center / 1440px 160px;
  pointer-events: none;
  z-index: 0;
}
.login-card {
  position: relative;
  z-index: 1;
  background-color: var(--jass-card);
  border: 1px solid var(--jass-border);
  border-radius: 16px;
  box-shadow: 0 12px 32px var(--jass-shadow);
  max-width: 400px;
  width: 100%;
}
.login-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--jass-card), 0 0 0 5px var(--jass-border);
}
.login-titulo { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 1rem 0 .25rem; }
.login-subtitulo { color: var(--jass-muted); font-size: .9rem; margin-bottom: 1.75rem; }
.login-card .form-label { font-size: .875rem; font-weight: 600; color: var(--jass-text); }
.login-card .form-control { padding: .7rem .9rem; }
.btn-ingresar { padding: .7rem; font-weight: 600; font-size: 1rem; border-radius: 8px; }
.login-ayuda { color: var(--jass-muted); font-size: .85rem; }
.login-pie { border-top: 1px solid var(--jass-border); margin-top: 1.5rem; padding-top: 1rem; color: var(--jass-muted); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) { .nav-link, .btn { transition: none; } }

/* Campo numérico corto (orden de ruta, montos) que no debe estirarse a todo el ancho. */
.campo-corto { max-width: 12.5rem; }

/* Tesorería (lote 28): KPI más compactos cuando van de a cuatro, sugerencias del buscador y cobros anulados. */
.kpi-compacto .kpi-valor { font-size: 1.6rem; }
.sugerencias-socio { max-height: 380px; z-index: 1050; top: 72px; left: 0; }
.sugerencias-aportante { top: 100%; }
.fila-anulada > td { color: var(--jass-muted); }
.fila-anulada .monto { text-decoration: line-through; }
.col-casilla { width: 2.5rem; }
/* Anchos de columna de las tablas de padrón, lecturas y aportantes (sin style= en las plantillas). */
.col-ruta { width: 4rem; }
.col-corta { width: 7rem; }
/* Lote 79: el código del suministro tiene su ancho y no se parte (la celda lleva text-nowrap). */
.col-codigo { width: 8.5rem; }
.col-media { width: 8.75rem; }
.col-amplia { width: 13.75rem; }

/* Avisos (lote 28): una sola forma para todos los .alert de la app.
   Estructura: <div class="alert alert-{tipo} aviso"> ícono + .aviso-cuerpo (.aviso-titulo opcional) + .aviso-accion opcional.
   El color sale de Bootstrap (--bs-alert-*); el acento izquierdo usa el mismo color del texto del aviso. */
.alert {
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: .75rem;
  --bs-alert-border-radius: 10px;
  font-size: .875rem;
  border-left: 4px solid var(--bs-alert-color);
}
.aviso { display: flex; align-items: flex-start; gap: .75rem; }
.aviso > .bi:first-child { font-size: 1.05rem; line-height: 1.35; flex-shrink: 0; }
.aviso-cuerpo { flex: 1 1 auto; min-width: 0; }
.aviso-cuerpo > :last-child { margin-bottom: 0; }
.aviso-titulo { font-weight: 700; margin-bottom: .15rem; }
.aviso-accion { flex-shrink: 0; align-self: center; }
@media (max-width: 575.98px) {
  .aviso { flex-wrap: wrap; }
  .aviso-accion { width: 100%; }
}
.alert-dismissible.aviso { padding-right: 3rem; }
/* Lote 40: espera de una operación larga y lista de muchos avisos del sistema. */
.aviso-espera > .bi:first-child { animation: aviso-espera-giro 1.6s linear infinite; }
@keyframes aviso-espera-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aviso-espera > .bi:first-child { animation: none; } }
.mensajes-desplazables { max-height: 40vh; overflow-y: auto; }

/* Tabla larga con encabezado fijo (asistencia de Secretaría). */
.tabla-desplazable { max-height: 520px; overflow-y: auto; }