/* rbcobradores — estilos propios sobre Bootstrap 5.3 (base común con rb-fl5).
   Pensado para personas con baja visión: Atkinson Hyperlegible, letra base de 18px
   ajustable (A−/A+), contrastes AA o mejores en claro y oscuro y foco siempre visible. */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/atkinson-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap;
  src: url(/vendor/fonts/atkinson-700-italic.woff2) format("woff2"); }


/* --- Escala de letra (la elige el usuario, queda en localStorage) --- */
html[data-escala="0"] { font-size: 100%; }    /* 16px */
html[data-escala="1"] { font-size: 112.5%; }  /* 18px, por defecto */
html[data-escala="2"] { font-size: 125%; }    /* 20px */
html[data-escala="3"] { font-size: 137.5%; }  /* 22px */

:root {
  --bs-body-font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-line-height: 1.55;
  --foco: #0b57d0;
}
[data-bs-theme="light"] {
  --bs-body-color: #16181b;               /* casi negro: contraste ~17:1 */
  --bs-secondary-color: #4a5058;          /* texto secundario ≥ 7:1 (AAA) */
  --bs-link-color: #0a4fb8; --bs-link-color-rgb: 10, 79, 184;
  --bs-link-hover-color: #073a88; --bs-link-hover-color-rgb: 7, 58, 136;
  --ficha-encabezado: #eef2f7;
  --cuota-vencida: #a4161a;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #121417;
  --bs-body-color: #eceff3;
  --bs-secondary-color: #bcc3cc;          /* ≥ 9:1 sobre el fondo oscuro */
  --bs-tertiary-bg: #1b1f24;
  --bs-link-color: #8ab4ff; --bs-link-color-rgb: 138, 180, 255;
  --bs-link-hover-color: #b3ceff; --bs-link-hover-color-rgb: 179, 206, 255;
  --foco: #8ab4ff;
  --ficha-encabezado: #1f252c;
  --cuota-vencida: #ff8a8a;
}

/* Foco bien visible para quien navega con teclado */
:focus-visible { outline: 3px solid var(--foco) !important; outline-offset: 2px; box-shadow: none !important; }
.btn, .form-control, .form-select { --bs-border-width: 1.5px; }
.form-control::placeholder { color: var(--bs-secondary-color); opacity: .85; }
.d-contents { display: contents; }

/* El atributo hidden siempre oculta, aunque el elemento tenga d-flex u otra utilidad de display de Bootstrap. */
[hidden] { display: none !important; }

/* --- Nav --- */
.navbar .nav-link, .dropdown-item { font-size: 1rem; }
.navbar .nav-link.active, .navbar .dropdown-toggle.active { font-weight: 700; text-decoration: underline; text-underline-offset: .35em; }
.dropdown-menu { max-height: calc(100vh - 6rem); overflow-y: auto; }
[data-bs-theme="light"] .logo-oscuro, [data-bs-theme="dark"] .logo-claro { display: none; }
[data-bs-theme="light"] .tema-claro, [data-bs-theme="dark"] .tema-oscuro { display: none; }

/* --- Login --- */
.login-card { border-radius: 1rem; }

/* --- Chips (etiquetas grandes de la ficha; algunas son botones) --- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem; border-radius: .5rem; border: 0;
  font-size: 1rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
}

.table { --bs-table-bg: transparent; }
.table > thead th { background: var(--bs-secondary-bg); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* La confirmación puede abrirse sobre otro modal (ej. el cobro): va por encima. */
#confirmModal { z-index: 1070; }

/* Modo oscuro: botones outline más claros para mantener contraste AA */
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #75d4a1; --bs-btn-border-color: #75d4a1; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #f19ca4; --bs-btn-border-color: #f19ca4; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8ab4ff; --bs-btn-border-color: #8ab4ff; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #ced4da; --bs-btn-border-color: #8c959f; }
[data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: #6edff6; --bs-btn-border-color: #6edff6; }
/* Los textos para lectores de pantalla (position:absolute) no deben escapar del scroll de la tabla */
.table-responsive { position: relative; }

/* ===================================================================================================
   Filas resaltadas y seleccionadas (para baja visión).
   Los colores suaves de Bootstrap (#d1e7dd, #fff3cd...) casi no se distinguen del blanco. Cada estado lleva:
   - un fondo más saturado (en oscuro, tonos oscuros propios en vez de los claros fijos de Bootstrap) y
   - una barra gruesa a la izquierda de la fila (--fila-marca), que no depende sólo de distinguir el color.
   La barra se suma al box-shadow que Bootstrap usa para pintar el estado de la celda, así no se pierde el fondo.
   =================================================================================================== */
.table > tbody > tr > :first-child,
.table > tfoot > tr > :first-child {
  box-shadow: inset 6px 0 0 var(--fila-marca, transparent),
              inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
[data-bs-theme="light"] .table { --bs-table-hover-bg: rgba(11, 87, 208, .11); --bs-table-hover-color: var(--bs-body-color); }
[data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(138, 180, 255, .16); --bs-table-hover-color: var(--bs-body-color); }

[data-bs-theme="light"] .table-success { --bs-table-bg: #bfe5cd; --bs-table-color: #0b2e1b; --bs-table-hover-bg: #a9dabb; --fila-marca: #146c43; }
[data-bs-theme="light"] .table-warning { --bs-table-bg: #ffe39b; --bs-table-color: #3b2a00; --bs-table-hover-bg: #ffd970; --fila-marca: #b45309; }
[data-bs-theme="light"] .table-danger  { --bs-table-bg: #f6c1c6; --bs-table-color: #4a0b12; --bs-table-hover-bg: #f1a9b0; --fila-marca: #b02a37; }
[data-bs-theme="light"] .table-primary { --bs-table-bg: #c4d9ff; --bs-table-color: #0a2a5e; --bs-table-hover-bg: #b0ccff; --fila-marca: #0b57d0; }
[data-bs-theme="light"] .table-active  { --bs-table-active-bg: #b3cdf7; --bs-table-active-color: #0a2a5e; --fila-marca: #0b57d0; }

[data-bs-theme="dark"] .table-success { --bs-table-bg: #1d4a33; --bs-table-color: #e3f6ea; --bs-table-hover-bg: #25593e; --bs-table-border-color: #2f6b4b; --fila-marca: #4cc38a; }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: #4d3b0b; --bs-table-color: #fff3d1; --bs-table-hover-bg: #5c4710; --bs-table-border-color: #6b5417; --fila-marca: #f0b429; }
[data-bs-theme="dark"] .table-danger  { --bs-table-bg: #5a1f25; --bs-table-color: #ffe0e3; --bs-table-hover-bg: #6a262d; --bs-table-border-color: #7a3038; --fila-marca: #ff6b78; }
[data-bs-theme="dark"] .table-primary { --bs-table-bg: #1b3a6b; --bs-table-color: #e6efff; --bs-table-hover-bg: #22467f; --bs-table-border-color: #2c5290; --fila-marca: #8ab4ff; }
[data-bs-theme="dark"] .table-active  { --bs-table-active-bg: #2a4a80; --bs-table-active-color: #fff; --fila-marca: #8ab4ff; }

/* Distintivos claros: sobre fondo blanco necesitan borde para verse. */
[data-bs-theme="light"] .badge.text-bg-light, [data-bs-theme="light"] .chip.text-bg-light { border: 1.5px solid #8a929b !important; color: #16181b !important; }

/* ===================================================================================================
   rbcobradores: pantallas del cobrador (se usan en el celular, en la calle: botones y textos grandes).
   =================================================================================================== */
/* Secciones de la app debajo de la marca: una fila de pestañas que no se esconde en el celular. */
.nav-secciones .nav-link { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .25rem;
  font-size: .95rem; color: var(--bs-body-color); border-radius: .5rem; }
.nav-secciones .nav-link .bi { font-size: 1.35rem; line-height: 1; }
.nav-secciones .nav-link.active { background: var(--bs-primary); color: #fff; font-weight: 700; }

/* Zonas del cobrador: botones grandes que bajan de renglón. */
.zonas .btn { min-width: 4.5rem; font-weight: 700; }

/* Fichas del recorrido y resultados del buscador: tarjetas táctiles con barra de estado a la izquierda. */
.ficha-item { display: block; padding: .75rem 1rem; border: 1.5px solid var(--bs-border-color); border-radius: .6rem;
  color: var(--bs-body-color); text-decoration: none; background: var(--bs-body-bg);
  box-shadow: inset 6px 0 0 var(--fila-marca, transparent); }
.ficha-item:hover, .ficha-item:focus-visible { border-color: var(--bs-primary); background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.ficha-item .nombre { font-weight: 700; font-size: 1.1rem; }
.ficha-item.estado-hoy { --fila-marca: #b45309; }
.ficha-item.estado-cobrada { --fila-marca: #146c43; }
[data-bs-theme="light"] .ficha-item.estado-cobrada { background: #e3f4ea; }
[data-bs-theme="dark"] .ficha-item.estado-hoy { --fila-marca: #f0b429; }
[data-bs-theme="dark"] .ficha-item.estado-cobrada { --fila-marca: #4cc38a; background: #16301f; }

/* Ficha */
.ficha-encabezado { background: var(--ficha-encabezado); border-radius: .75rem; }
.acciones-ficha .btn { flex: 1 1 8rem; font-weight: 700; padding-top: .7rem; padding-bottom: .7rem; }
.cuota-vencida td { color: var(--cuota-vencida); font-weight: 700; }

/* Tipo de recibo del cobro: dos botones grandes. */
.tipo-recibo .btn { font-weight: 700; padding: .75rem; }

/* Avance: el porcentaje va escrito al lado del título (adentro de la barra no se leía con 0 %); la barra lleva borde
   para verse aunque esté vacía. */
.avance .progress { height: 1.1rem; border: 1.5px solid var(--bs-border-color); }