/* Sistema de préstamos
   Estilos del sistema. Antes vivían dentro de casa_base.html, repetidos en
   cada página (~13 KB sin comprimir en cada carga); como archivo en /static/
   se bajan una sola vez y quedan en el caché del navegador y, más adelante,
   en el del service worker del modo sin señal.

   El ?v= del <link> en casa_base.html hay que subirlo cada vez que se toca
   este archivo: el navegador cachea por URL exacta, así que sin eso a quien
   ya tenga la página abierta le queda pegada la hoja vieja. */

:root {
      /* Azul marino de la marca (logo/login): identidad y estructura — barra
         superior, lateral, títulos de sección, insignias informativas. El
         naranja de --accion, más abajo, es aparte a propósito: ese es el
         color de HACER algo (botones), no el de la marca en reposo. */
      --marca: #1a365d;
      --marca-oscura: #0a1930;
      --tinta: #111a2e;
      /* Los grises secundarios van más oscuros de lo que pedirían sobre blanco:
         el fondo baja hasta #b3b9c2 en su esquina, y con el gris anterior
         (#4d5769) el texto suelto se quedaba en 3,69:1, por debajo del 4,5:1
         exigible. Con este cumple hasta en la parte más oscura (4,89:1). */
      --apagado: #3d4553;
      --borde: #cbd3dd;
      /* El azul de escribir, aparte del de pintar: de noche hay que aclararlo
         para que se lea, y aclarado ya no sirve de fondo. Mismo tono que
         --marca-oscura de día: 17,6:1 contra blanco, de sobra. */
      --enlace: #0a1930;
      /* El azul de marca cuando va de LETRA o de borde de un control (cifras,
         botones de contorno, segmento activo): no es el de pintar. De día es el
         mismo --marca; de noche se aclara, porque el azul marino sobre el papel
         oscuro quedaba en 1,4:1. */
      --marca-texto: #1a365d;
      --alto-barra: 84px;
      --ancho-lateral: 256px;
    }
    /* ── El naranja: el color de HACER algo ──
       Del logo nuevo (#ff6b00) directo, un botón con letra blanca se queda en
       2,86:1 — no cumple ni como texto grande. --accion es ese mismo naranja
       oscurecido lo justo para llegar a 4,56:1 con letra blanca encima; --vivo
       es el original, para donde no lleva texto chico adentro (la franja del
       login, el resplandor del foco). Los botones de "Abonar" siguen en verde:
       ese verde es la plata, no la marca, y no lo toca esta paleta. */
    :root {
      --accion: #c85000;
      --accion-oscura: #a83f00;
      --accion-vivo: #ff6b00;
      --bs-primary: #1a365d;
      --bs-primary-rgb: 26, 54, 93;
      --bs-primary-bg-subtle: #e2e7f0;
      --bs-primary-border-subtle: #aebedd;
      --bs-primary-text-emphasis: #0a1930;
      /* Enlaces en la paleta: sin esto Bootstrap los pinta con su azul de fábrica. */
      --bs-link-color: #1a365d; --bs-link-color-rgb: 26, 54, 93;
      --bs-link-hover-color: #0a1930; --bs-link-hover-color-rgb: 10, 25, 48;
    }
    /* El color de fondo va en <html> para que la marca de agua pueda quedar
       detrás del contenido (z-index negativo) sin que el fondo del body la tape.
       Aquí va plano, de respaldo: el degradado lo pone body::after. */
    html { background: #dfe4ea; }
    body { background: transparent; color: var(--tinta); }

    /* ── Modo noche ──
       Las últimas casas se caminan con la linterna del teléfono y una pantalla
       blanca encandila. Es el mismo papel a la luz de una lámpara: marrones,
       que de noche se sienten menos duros que el gris azulado.
       Los colores se recalculan, no se invierten: el azul del texto y el verde
       del saldo desaparecerían sobre el fondo oscuro.
       El interruptor pone también data-bs-theme, y con eso Bootstrap 5.3
       recolorea solo sus tarjetas, tablas, menús y formularios. */
    html[data-tema="noche"] {
      --marca: #15304f;          /* azules de PINTAR: la barra, la lateral */
      --marca-oscura: #0d213e;
      /* Enlace de noche va en durazno, no en azul: es el mismo naranja de
         --accion aclarado para leerse sobre lo oscuro, así "esto se puede
         tocar" queda con un solo color en todo el sistema, de día o de noche. */
      --enlace: #ffb27a;
      --marca-texto: #9db8de;
      --bs-link-color-rgb: 255, 178, 122; --bs-link-hover-color-rgb: 255, 205, 170;
      --tinta: #ece2d0;
      --apagado: #b0a693;
      --borde: #3a3128;
      /* Insignias informativas (Vendedor, Prima, "hoy"): de noche el azul
         marino de día es casi invisible sobre fondo oscuro, así que
         --bs-primary-rgb se aclara aparte. El naranja de los botones NO
         cambia: --accion ya es su propio fondo, con su propio contraste. */
      --bs-primary-rgb: 157, 184, 222;
      --bs-primary-bg-subtle: #1c2c42;
      --bs-primary-border-subtle: #2c4870;
      --bs-primary-text-emphasis: #cddbef;
      background: #171310;
      /* Bootstrap trae su propio oscuro, un gris azulado, y con él pintaba
         tarjetas, tablas y campos por encima de nuestro marrón: la pantalla
         salía a retazos de dos noches distintas. Aquí se le dan los tonos de
         la casa y con eso todo su catálogo cae en su sitio de una vez. */
      --bs-body-bg: #171310; --bs-body-color: #ece2d0;
      --bs-emphasis-color: #fff8ec; --bs-secondary-color: #b0a693;
      --bs-border-color: #3a3128; --bs-secondary-bg: #221d17;
      --bs-tertiary-bg: #1e1a15; --bs-link-color: var(--enlace);
      --bs-link-hover-color: #c3d3ff; --bs-heading-color: #f2e9da;
    }
    /* Lo que fija claro a mano y por eso no se entera del tema: las utilidades
       de Bootstrap (son fijas por diseño) y nuestras propias superficies, que
       estaban escritas en tonos claros. */
    html[data-tema="noche"] .table-light {
      --bs-table-color: #ece2d0; --bs-table-bg: #2a241c;
      --bs-table-border-color: #3a3128;
    }
    html[data-tema="noche"] .bg-white,
    html[data-tema="noche"] .bg-light { background-color: #221d17 !important; }
    html[data-tema="noche"] .text-dark { color: #ece2d0 !important; }
    html[data-tema="noche"] .barra-inferior,
    html[data-tema="noche"] .hoja-mas { background: #1e1a15; }
    html[data-tema="noche"] .fila-mas { background: #241f19; }
    html[data-tema="noche"] .hoja-mas .agarre { background: #453a2c; }
    /* En la lateral, el destino activo era un recuadro blanco: de noche se
       vuelve el papel, con la letra oscura encima. */
    html[data-tema="noche"] .enlace-lateral.activo { background: #ece2d0; color: var(--marca-oscura); }
    /* Los grises secundarios llevan !important —se les gana a Bootstrap por
       contraste— y por eso de noche seguían oscuros sobre fondo oscuro: el
       teléfono, el DUI y la dirección del cliente quedaban ilegibles. Es lo
       primero que se vio mal en la calle. */
    html[data-tema="noche"] .text-muted,
    html[data-tema="noche"] .text-secondary { color: var(--apagado) !important; }
    html[data-tema="noche"] .fila-mas:active { background: #2f2820; }
    /* "Llamar" va en --accion, y ese naranja sobre el papel oscuro no llega a 4,5:1. */
    html[data-tema="noche"] .row-call { color: var(--enlace); }
    /* El acuse al tocar un icono de acción era una sombra negra: sobre lo
       oscuro no se ve nada, así que de noche aclara en vez de oscurecer. */
    html[data-tema="noche"] .accion-fila:active { background: rgba(255,255,255,.12); }

    /* ── Botones "primary" de Bootstrap → el naranja de --accion ──
       .btn-primary y .btn-outline-primary NO leen --bs-primary: Bootstrap les
       hornea el azul (#0d6efd) como variables propias (--bs-btn-bg y afines)
       en vez de heredarlo, así que hay que pisar esas mismas variables aquí.
       Un solo valor para día y noche: el botón trae su propio fondo, así que
       su contraste no depende del tema de la página. */
    .btn-primary {
      --bs-btn-color: #fff; --bs-btn-bg: var(--accion); --bs-btn-border-color: var(--accion);
      --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accion-oscura); --bs-btn-hover-border-color: var(--accion-oscura);
      --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accion-oscura); --bs-btn-active-border-color: var(--accion-oscura);
      --bs-btn-disabled-bg: var(--accion); --bs-btn-disabled-border-color: var(--accion);
      --bs-btn-focus-shadow-rgb: 200, 80, 0;
    }
    .btn-outline-primary {
      --bs-btn-color: var(--accion); --bs-btn-border-color: var(--accion);
      --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accion); --bs-btn-hover-border-color: var(--accion);
      --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accion); --bs-btn-active-border-color: var(--accion);
      --bs-btn-disabled-color: var(--accion); --bs-btn-disabled-border-color: var(--accion);
      --bs-btn-focus-shadow-rgb: 200, 80, 0;
    }
    /* .text-bg-primary ("hoy", "tú"): Bootstrap también lo hornea en fijo
       (#0d6efd con letra blanca), sin pasar por --bs-primary-rgb. Va en
       marca-oscura y no en --accion: es una etiqueta informativa, no un
       llamado a la acción, y 17,6:1 de contraste sobra de cualquier modo. */
    .text-bg-primary { color: #fff !important; background-color: var(--marca-oscura) !important; }
    /* El resplandor al enfocar un campo, igual que en /login: naranja y no el
       azul de Bootstrap, para que se sienta el mismo sistema en todas partes. */
    .form-control:focus, .form-select:focus {
      border-color: var(--accion);
      box-shadow: 0 0 0 .25rem rgba(200, 80, 0, .25);
    }
    .form-check-input:checked { background-color: var(--accion); border-color: var(--accion); }
    .form-check-input:focus { border-color: var(--accion); box-shadow: 0 0 0 .25rem rgba(200, 80, 0, .25); }

    /* ── La libreta ──
       El aspecto que estrenó "Mi ruta": color de papel en vez del blanco de una
       hoja de cálculo, y cada renglón como tarjeta con aire, para que dónde
       empieza y termina cada quien se vea sin interpretar una raya.
       Vive aquí y no copiado en cada pantalla: la primera versión se copiaba, y
       bastó que una copia no viajara para que un campo saliera estirado en
       producción. La usan Mi ruta, Clientes, Zonas y las libretas.
       .ficha-ruta acompaña a .ficha-papel para no renombrar lo que ya existe en
       Mi ruta, empezando por el buscador, que busca esa clase. */
    :root {
      --papel: #eaf0f9; --papel-borde: #b9cae6; --papel-libreta: #dfe8f5;
      --papel-toque: #e3ecf7; --papel-sello: #dfe9f6; --papel-sello-borde: #aec3e2;
      --papel-sombra: rgba(15,35,80,.14);
      /* Verde lo por cobrar, apagado lo pagado. El rojo se reserva para la
         única alarma de verdad: la marca que se pone a mano para no volver a
         venderle a alguien. Su texto no se escribe aquí tal cual a propósito:
         este comentario viaja en cada página, y hay una prueba que comprueba
         que esa etiqueta no aparezca en pantallas donde nadie la tiene. */
      --plata: #146c43; --plata-apagada: #8b93a1;
    }
    html[data-tema="noche"] {
      --papel: #221d17; --papel-borde: #362d23; --papel-libreta: #1c1813;
      --papel-toque: #2a241c; --papel-sello: #2c251c; --papel-sello-borde: #453a2c;
      --papel-sombra: rgba(0,0,0,.4);
      --plata: #6ed69a; --plata-apagada: #7d7466;
    }
    .libreta { background: var(--papel-libreta); border-radius: 16px; padding: 8px; }
    /* Con .list-group delante para ganarle a Bootstrap, que a sus renglones
       les pone fondo blanco y esquinas cuadradas. */
    .ficha-papel,
    .ficha-ruta,
    .libreta .list-group-item.ficha-papel {
      background: var(--papel); border: 1px solid var(--papel-borde);
      border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
      box-shadow: 0 2px 7px var(--papel-sombra);
      color: var(--tinta);
    }
    .ficha-papel:last-child,
    .ficha-ruta:last-child { margin-bottom: 0; }
    .ficha-papel:active,
    .ficha-ruta:active,
    .libreta .list-group-item.ficha-papel:active { background: var(--papel-toque); }
    /* Las cifras de dinero de las listas, con el mismo criterio en todas. */
    .saldo-papel, .saldo-ruta {
      font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
      color: var(--plata);
    }
    .saldo-papel.saldado, .saldo-ruta.saldado { color: var(--plata-apagada); font-weight: 700; }
    @media print {
      .libreta { background: #fff !important; padding: 0; }
      .ficha-papel, .ficha-ruta { box-shadow: none !important; background: #fff !important;
                                  margin-bottom: 0; break-inside: avoid; }
    }

    /* ── Legibilidad ──
       El sistema se lee en un celular al sol y en un portátil a distancia de
       brazo. Bootstrap trae 16 px de base y 14 px para .small, que es donde
       caen los datos del cliente: teléfono, dirección, referencia. Sube a 17 y
       15,7 px. Es un 9 % y un 12 %, suficiente para notarlo sin descolocar
       nada, porque casi todo el layout va en rem y crece con el texto. */
    :root {
      --bs-body-font-size: 1.0625rem;
      --bs-body-line-height: 1.55;
    }
    .small, small { font-size: .925em; }

    /* Degradado gris azulado, en una capa fija propia.
       Va así y no con background-attachment: fixed porque eso repinta el fondo
       en cada desplazamiento en el celular; una capa fija se compone una vez y
       el scroll no le cuesta nada. Queda detrás de la marca de agua (-1). */
    body::after {
      content: "";
      position: fixed; inset: 0; z-index: -2;
      background: linear-gradient(135deg, #eceef2 0%, #cfd5db 50%, #b3b9c2 100%);
      pointer-events: none;
    }

    /* Marca de agua: el logo completo (brand/logo-watermark.png), fijo, así se
       comporta como el sello de una hoja y no se arrastra al desplazar.
       En el celular ocupa casi todo el ancho; en PC el cuadro empieza donde acaba
       la barra lateral, así queda centrado en el área de contenido y no a medias
       bajo la lateral. Al 7 % el texto suelto (--apagado) sigue sobre 4,5:1 incluso
       encima del trazo más oscuro: medido 5,3:1 con el fondo que hay bajo el logo
       (#c0c6ce o más claro). pointer-events:none evita que estorbe a los toques.
       No se imprime ni va en la pantalla de acceso (esa no carga casa.css). */
    body::before {
      content: "";
      position: fixed; inset: 0; z-index: -1;
      background: url("/static/brand/logo-watermark.png?v=1") no-repeat center 42%;
      background-size: min(84vw, 420px) auto;
      opacity: .07;
      pointer-events: none;
    }
    /* De noche el logo azul marino casi no se ve sobre el fondo oscuro; solo los
       dorados levantan un poco. Más bajo que de día para no verse como un parche. */
    html[data-tema="noche"] body::before { opacity: .05; }
    @media (min-width: 992px) {
      body::before { left: var(--ancho-lateral); background-size: min(60%, 640px) auto; }
    }

    /* Para que la marca de agua se vea A TRAVÉS del contenido y no solo en los
       márgenes, las superficies dejan pasar un 7 %. No son blanco puro: sobre el
       fondo gris azulado el blanco saltaba. Verificado: el texto principal queda
       en 16,2:1, muy por encima del 4,5:1 exigible. */
    .card-casa,
    .list-group,
    .list-group-item { background-color: rgba(247, 248, 250, .93); }
    /* Estas tres son el fondo de casi todo el sistema y estaban en claro fijo:
       de noche dejaban la pantalla a retazos de blanco sobre oscuro. */
    html[data-tema="noche"] .card-casa,
    html[data-tema="noche"] .list-group,
    html[data-tema="noche"] .list-group-item { background-color: var(--papel); }
    /* Con .list-group delante, que si no gana la regla de arriba por ir
       después en el archivo con el mismo peso. */
    .list-group.libreta,
    html[data-tema="noche"] .list-group.libreta { background: var(--papel-libreta); }
    .table { --bs-table-bg: transparent; }
    /* Mismo motivo que --apagado: el gris de Bootstrap se queda muy corto
       (3,03:1) donde el degradado se oscurece. Con este cumple en toda la
       página (4,89:1) y en las tarjetas sobra (9,0:1). */
    .text-muted { color: #3d4553 !important; }
    /* Mismo motivo: el .text-secondary de Bootstrap se queda en 4,41:1 sobre la
       tarjeta, por debajo del mínimo para texto. Con este da 9,09:1. */
    .text-secondary { color: #3d4553 !important; }

    /* ── Iconos (sprite Solar en línea) ──
       Miden 1em, así que el tamaño se sigue controlando con font-size, igual que
       cuando eran una fuente de iconos, y las reglas de antes siguen sirviendo.
       El fill va en currentColor: cada icono toma el color del texto que lo
       rodea, y el segundo tono del duotone sale del fill-opacity del sprite. */
    .icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em;
            flex: 0 0 auto; }

    /* ── Los iconos de accion de una fila (recibo, corregir, eliminar) ──
       Median 1em dentro de una tabla: unos 14 px de area tocable, y pegados
       entre si. Con el dedo, de pie en la calle y con el telefono en una mano,
       eso es imposible de atinar — y uno de los tres borra un pago.

       Se les da los 44 px que recomiendan Android e iOS. El icono se ve solo un
       poco mas grande; lo que crece de verdad es el blanco de alrededor, que es
       lo que el dedo necesita. Van separados para que fallar el tiro no acabe
       dandole al de a la par. */
    .accion-fila { display: inline-flex; align-items: center; justify-content: center;
                   width: 44px; height: 44px; padding: 0; border-radius: 10px;
                   text-decoration: none; }
    .accion-fila + .accion-fila { margin-left: 6px; }
    .accion-fila .icon { font-size: 1.3rem; vertical-align: middle; }
    /* Sin :hover: en el celular no existe, y deja el boton "pegado" encendido
       despues de tocarlo. Lo que si hace falta es el acuse de que si registro. */
    .accion-fila:active { background: rgba(0,0,0,.09); }
    .accion-fila.text-danger:active { background: rgba(180,35,24,.14); }

    /* La variante para un icono que va metido dentro de una frase (el recibo de
       la prima, a la par de la palabra). Ahi un cuadro de 44 px partiria el
       renglon, asi que el area crece por relleno y se recupera con margen
       negativo: el dedo agarra ~38 px y la linea se ve igual que antes. */
    .accion-inline { display: inline-block; padding: 11px; margin: -11px -5px;
                     border-radius: 8px; text-decoration: none; }
    .accion-inline .icon { font-size: 1.15rem; }
    .accion-inline:active { background: rgba(0,0,0,.09); }

    /* ── Barra superior ── */
    .barra-superior { background: linear-gradient(135deg, var(--marca-oscura), var(--marca)); }
    .barra-superior .navbar-brand { color: #fff !important; }
    .brand-badge { width: 34px; height: 34px; object-fit: contain; background: #fff;
                   border-radius: 9px; padding: 3px; flex: 0 0 34px; }
    .barra-superior .navbar-brand { min-width: 0; white-space: nowrap; }

    /* ── La marca es también el atajo a Inicio ──
       Como rótulo suelto nadie la toca: nada dice que sea pulsable. Se dibuja
       como un recuadro con borde y un fondo apenas más claro, con el mismo
       vocabulario que el resto (radio de 12 px, blancos translúcidos), así se
       lee como un botón sin romper la estética de la barra. */
    .barra-superior .navbar-brand,
    .marca-lateral {
      border: 1px solid rgba(255,255,255,.34);
      border-radius: 12px;
      background: rgba(255,255,255,.10);
    }
    .barra-superior .navbar-brand { padding: .34rem .6rem; }
    /* Del tamaño del pulgar y con el mismo recuadro que la marca. */
    .boton-noche {
      width: 40px; height: 40px; margin-right: .5rem; padding: 0;
      display: grid; place-items: center; color: #fff;
      border: 1px solid rgba(255,255,255,.34); border-radius: 12px;
      background: rgba(255,255,255,.10); -webkit-tap-highlight-color: transparent;
    }
    .boton-noche:active { background: rgba(255,255,255,.22); }
    .barra-superior .navbar-brand:active,
    .marca-lateral:active { background: rgba(255,255,255,.22); }
    /* Solo donde hay puntero: en una pantalla táctil el :hover se queda pegado
       después del toque y el recuadro parecería activo sin serlo. */
    @media (hover: hover) {
      .barra-superior .navbar-brand:hover,
      .marca-lateral:hover { background: rgba(255,255,255,.19);
                             border-color: rgba(255,255,255,.52); }
    }
    /* El nombre completo se mantiene en el celular; se achica lo justo para
       que entre junto al logo y la cuenta en pantallas de 320 px. */
    @media (max-width: 575.98px) {
      .barra-superior .navbar-brand { font-size: 1.05rem; }
      .brand-badge { width: 30px; height: 30px; flex: 0 0 30px; }
    }

    /* ── Barra lateral: solo en PC ──
       En el celular el menú se reparte entre la barra inferior y la hoja "Más",
       porque el pulgar manda y la pantalla es corta. En
       PC sobra ancho: el árbol completo se queda abierto a la izquierda y no
       hay nada que abrir para llegar a un informe. */
    .barra-lateral { display: none; }
    /* Margen en vez de solo relleno: el recuadro tiene que despegarse de los
       bordes de la lateral para leerse como recuadro. */
    .marca-lateral { display: flex; align-items: center; gap: .55rem;
                     margin: 12px 10px 4px; padding: 10px 12px;
                     color: #fff; text-decoration: none; font-weight: 700;
                     font-size: 1.02rem; line-height: 1.15; }
    .marca-lateral .brand-badge { flex: 0 0 34px; }
    .marca-lateral span { min-width: 0; }
    .marca-lateral:hover { color: #fff; }
    .nav-lateral { padding: 0 8px 10px; }
    /* Los títulos de grupo se perdían: .68rem y blanco al 58 % sobre el azul casi no
       se distinguían de los enlaces. Ahora van en blanco pleno, un poco más grandes,
       con una franja naranja a la izquierda y un fondo suave: se ve dónde empieza
       cada sección sin competir con el enlace activo (que sigue siendo el blanco
       sólido). */
    .grupo-lateral { margin: 18px 6px 7px; padding: 5px 10px; font-size: .75rem;
                     font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
                     color: #fff; background: rgba(255,255,255,.10);
                     border-left: 3px solid #fb923c; border-radius: 0 7px 7px 0; }
    .enlace-lateral {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; margin-bottom: 2px; border-radius: 9px;
      color: rgba(255,255,255,.87); text-decoration: none;
      font-size: .92rem; font-weight: 600; line-height: 1.25;
    }
    .enlace-lateral .icon { font-size: 1.05rem; width: 20px; flex: 0 0 20px; text-align: center; }
    .enlace-lateral:hover { background: rgba(255,255,255,.13); color: #fff; }
    /* La fila actual se invierte a fondo blanco: se distingue por forma y no
       solo por tono, igual que la pestaña activa de la barra del celular. */
    .enlace-lateral.activo { background: #fff; color: var(--enlace); font-weight: 700; }
    .pie-lateral { margin-top: auto; padding: 10px 8px 14px;
                   border-top: 1px solid rgba(255,255,255,.16); }
    .pie-lateral .usuario { display: flex; align-items: center; gap: .5rem;
                            padding: 4px 10px 10px; color: #fff; min-width: 0; }
    .pie-lateral .usuario .nombre { font-weight: 700; font-size: .89rem; }
    .pie-lateral .usuario .rol { font-size: .74rem; color: rgba(255,255,255,.62);
                                 text-transform: capitalize; }
    .cuenta-boton { color: #fff; text-decoration: none; display: flex; align-items: center;
                    gap: .45rem; padding: .35rem .6rem; border-radius: 10px; }
    .cuenta-boton:hover { background: rgba(255,255,255,.14); color: #fff; }
    .cuenta-inicial { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
                      background: rgba(255,255,255,.22); border-radius: 50%;
                      font-weight: 700; font-size: .85rem; }

    /* ── Barra inferior: los destinos de todos los días, en la zona del pulgar ──
       Cuatro como máximo a propósito: al sobrar hueco, la etiqueta sube a 13 px
       y se lee al sol, que era el problema real. Todo lo demás vive en la
       pantalla de Inicio, que es la primera pestaña. */
    .barra-inferior {
      position: fixed; inset: auto 0 0 0; z-index: 1030;
      display: flex; background: #e2e7ed;
      border-top: 1px solid var(--borde);
      padding-bottom: env(safe-area-inset-bottom);
      box-shadow: 0 -2px 14px rgba(20, 40, 90, .07);
    }
    .barra-inferior a {
      position: relative; flex: 1 1 0; min-width: 0;
      min-height: var(--alto-barra);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; padding: 11px 3px 9px;
      color: var(--apagado); text-decoration: none;
      font-size: 13px; font-weight: 650; line-height: 1.15; text-align: center;
      -webkit-tap-highlight-color: transparent;
    }
    .barra-inferior a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Cada pestaña lleva el color de su sección: el tono llega desde el
       destino (campo 'co') como clase t-*, y de ahí lo toman el icono, la
       etiqueta activa, la pastilla y la barrita de arriba. */
    .barra-inferior a { --tono: var(--apagado); }
    .t-marca  { --tono: #1a365d; }
    .t-azul   { --tono: #3b6fe0; }
    .t-verde  { --tono: #16794f; }
    .t-morado { --tono: #6c40c4; }
    .t-ambar  { --tono: #a86211; }
    .t-coral  { --tono: #b8401f; }
    .t-gris   { --tono: #555f70; }
    /* Los inactivos van con su color pero apagados: si todos brillaran igual,
       saber en qué pestaña estás dependería solo de la barrita. */
    /* La envoltura existe para poder dibujar la pastilla: un <svg> no admite
       ::before ni ::after, así que el adorno no puede colgar del icono. */
    .barra-inferior a .envoltura { position: relative; display: grid;
                                   place-items: center; line-height: 1; }
    .barra-inferior a .icon { font-size: 1.6rem; position: relative; z-index: 1;
                              color: var(--tono); }
    .barra-inferior a.activo { color: var(--tono); }
    .barra-inferior a.activo span:not(.envoltura) { font-weight: 750; }
    /* Pastilla del mismo tono detrás del icono. Va con opacidad en vez de un
       color aparte, así basta con definir --tono una vez. */
    .barra-inferior a.activo .envoltura::after {
      content: ""; position: absolute; inset: -7px -15px; z-index: 0;
      border-radius: 999px; background: var(--tono); opacity: .15;
    }
    /* La pestaña actual se marca con una barra además del color: al sol
       distinguir dos tonos cuesta, una forma se ve siempre. */
    .barra-inferior a.activo::before {
      content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 38px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tono);
    }
    .barra-inferior a:active { background: rgba(20,40,90,.06); }

    body { padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom) + 12px); }
    @media (min-width: 992px) {
      .barra-inferior { display: none; }
      /* La barra superior desaparece: en PC la marca y la cuenta viven en la
         lateral, así no se repite el encabezado ni se pierde alto de pantalla. */
      .barra-superior { display: none; }
      .barra-lateral {
        display: flex; flex-direction: column;
        position: fixed; inset: 0 auto 0 0; width: var(--ancho-lateral); z-index: 1035;
        background: linear-gradient(180deg, var(--marca-oscura), #16295c);
        overflow-y: auto;
      }
      body { padding-left: var(--ancho-lateral); padding-top: 1.75rem; padding-bottom: 2rem; }
      /* El ancho máximo fijo de .container (960 px en lg, 1140 en xl) no sabe
         que la lateral se comió 256 px, y a 992 px de ventana desbordaría la
         página a lo ancho. Con min() el contenedor nunca pide más de lo que
         queda, y en pantallas grandes sigue centrado con un ancho de lectura. */
      .container { max-width: min(1180px, 100%);
                   padding-left: 1.25rem; padding-right: 1.25rem; }
    }

    /* ── Campo de fecha: se teclea o se elige en el calendario ──
       El calendario nativo obliga a retroceder mes a mes, y al cargar tarjetas
       de años atrás eso son decenas de toques. El campo de texto es el que se
       envía; el botón del calendario solo lo rellena. */
    .campo-fecha { position: relative; }
    .campo-fecha .boton-calendario {
      position: absolute; top: 0; right: 0; height: 100%; width: 40px;
      display: grid; place-items: center; cursor: pointer; margin: 0;
      color: var(--apagado); border-radius: 0 6px 6px 0;
    }
    .campo-fecha .boton-calendario:active { background: rgba(20,40,90,.07); }
    .campo-fecha input[data-fecha] { padding-right: 44px; }
    /* El input de fecha nativo queda invisible encima del icono: al tocarlo
       abre el calendario del sistema, que es lo único que se le pide. */
    .campo-fecha input[data-calendario] {
      position: absolute; inset: 0; width: 100%; height: 100%;
      opacity: 0; cursor: pointer;
    }

    /* ── Hoja "Más": para el cobrador y el vendedor ──
       Ellos tienen cuatro destinos, no catorce: una hoja de filas grandes se
       lee de un vistazo y no hace falta mandarlos a otra pantalla.
       Bootstrap fija el offcanvas-bottom en 30vh, y con cuatro filas o más la
       hoja salía cortada: la altura la da el contenido, con tope en dvh (vh de
       respaldo para los navegadores que no lo conocen), y lo que sobre se
       desplaza dentro del cuerpo, no de la página. */
    .hoja-mas { background: #e9edf3; border-radius: 20px 20px 0 0; }
    /* Con .offcanvas delante: Bootstrap fija la altura en ".offcanvas.offcanvas-bottom". */
    .offcanvas.hoja-mas { height: auto; max-height: 85vh; max-height: 85dvh; }
    .hoja-mas .agarre, .hoja-mas .offcanvas-header { flex: 0 0 auto; }
    .hoja-mas .offcanvas-body { padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
                                overflow-y: auto; overscroll-behavior: contain;
                                -webkit-overflow-scrolling: touch; }
    .hoja-mas .agarre { width: 40px; height: 4px; background: #c3cde0; border-radius: 3px;
                        margin: 10px auto 4px; }
    .fila-mas {
      display: flex; align-items: center; gap: 13px;
      min-height: 58px; padding: 0 15px; margin-bottom: 9px;
      background: #f7f8fa; border: 1px solid var(--borde); border-radius: 13px;
      color: var(--tinta); text-decoration: none;
      font-size: 17px; font-weight: 600;
      -webkit-tap-highlight-color: transparent;
    }
    .fila-mas .icon { font-size: 1.35rem; color: var(--apagado); width: 26px; text-align: center; }
    .fila-mas .flecha { margin-left: auto; font-size: 1rem; color: #a7b2c8; }
    .fila-mas:active { background: #dfe4ec; }
    .fila-mas.activo { background: var(--marca); border-color: var(--marca); color: #fff; }
    .fila-mas.activo .icon, .fila-mas.activo .flecha { color: #fff; }
    .fila-mas.salir, .fila-mas.salir .icon { color: #b42318; }
    .grupo-mas { margin: 16px 2px 7px; font-size: .72rem; font-weight: 700;
                 letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }

    /* ── Abonar: la acción que el cobrador repite todo el día ──
       Verde sólido y no hueco, y más alto que un botón normal: se toca sin
       apuntar y se distingue de los botones secundarios de la misma tarjeta.
       Va siempre en verde, también en un crédito saldado, para que el cobrador
       busque siempre el mismo color y no tenga que leer el estado primero. */
    .btn-abonar { min-height: 46px; padding-inline: 1.15rem; font-weight: 700; }
    /* En el celular ocupa el ancho de la tarjeta: no hay forma de errarle. */
    @media (max-width: 575.98px) { .btn-abonar { width: 100%; } }

    .card-casa { border: 0; border-radius: 16px; box-shadow: 0 10px 30px rgba(20,40,90,.08); }

    /* ── Ficha del cliente: iniciales en vez de foto ── */
    /* No hay fotos de clientes que guardar ni que bajar: la inicial en un
       círculo de marca da la misma referencia visual sin pedirle una foto a
       nadie ni sumarle peso a la pantalla. */
    .avatar-cliente {
      width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
      background: linear-gradient(145deg, var(--marca), var(--marca-oscura));
      color: #fff; display: grid; place-items: center;
      font-weight: 800; font-size: 1.25rem; text-transform: uppercase;
    }
    /* En una lista, una por cliente: más chica para no competir con el
       nombre y no engordar cada renglón. */
    .avatar-cliente-sm { width: 38px; height: 38px; font-size: .95rem; margin-top: 1px; }

    /* ── Variante "banda": el estado en una franja lateral, como una carpeta ──
       padding: 0 en la propia clase, no con el utilitario p-0 de Bootstrap:
       una prueba (test_iconos.py) busca "p-0" en enlaces con un icono adentro
       como señal de un botón de solo icono sin área de toque — y esta es una
       tarjeta grande con toda su superficie tocable, no ese caso. Reusada por
       Clientes, Mi ruta y Ver zonas: las tres son ".ficha-papel"/".ficha-ruta"
       con la misma banda de estado, no una copia por pantalla. */
    .tarjeta-banda { overflow: hidden; padding: 0 !important; }
    .banda-estado {
      flex: 0 0 30px; display: flex; align-items: center; justify-content: center;
      color: #fff; padding: 10px 0;
    }
    .banda-estado span {
      writing-mode: vertical-rl; transform: rotate(180deg);
      font-size: .64rem; font-weight: 700; letter-spacing: .04em;
      text-transform: uppercase; white-space: nowrap;
    }
    /* Degradado y no plano:
       el mismo verde/rojo de siempre, pero sin la superficie lisa que se
       sentía muy fuerte en una franja tan angosta. Vertical (no 145deg) para
       que se note el degradado en una tira delgada y no un diagonal plano. */
    .banda-estado.es-activo   { background: linear-gradient(180deg, #2a9d6f, #146c43); }
    .banda-estado.es-saldado  { background: linear-gradient(180deg, #9aa3b1, #6b7688); }
    .banda-estado.es-novender { background: linear-gradient(180deg, #d1574a, #b42318); }
    .cuerpo-banda { padding: 14px 14px 12px 12px; }
    .etiqueta-banda { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
                       color: var(--apagado); font-weight: 700; }
    .codigo-banda { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700;
                     color: var(--enlace); font-size: .92rem; }
    .pildoras-banda { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .pildora-dato {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--papel-sello); border: 1px solid var(--papel-sello-borde);
      border-radius: 999px; padding: 4px 10px; font-size: .75rem; color: var(--tinta);
    }
    .pildora-dato .icon { font-size: .85em; color: var(--apagado); }

    /* ── "Dónde vive": el recuadro de mapa genérico, no un mapa de verdad ──
       Ver el comentario en _ubicacion_casa.html: es un SVG dibujado a mano,
       cero peticiones, para no engordar el service worker ni la pantalla
       sin señal con un mapa real (llave de Google, cobro por consulta).
       Medida fija y con la misma proporción que su viewBox (170x96): así el
       navegador no recorta nada al llenarlo. En el celular se acuesta a todo
       lo ancho, que es donde cabe. */
    /* ── Variante "ficha de propiedades": filas de dato, sin tarjetas anidadas ── */
    .hoja-propiedades { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
    .fila-propiedad {
      display: flex; align-items: center; gap: 10px; padding: 13px 14px;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
      border-top: 1px solid var(--borde); margin-top: -1px;
    }
    .rotulo-propiedad { display: flex; align-items: center; gap: 8px; font-weight: 600;
                         color: var(--apagado); flex: 0 0 150px; }
    .valor-propiedad { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
    .flecha-propiedad { color: var(--apagado); font-size: .85rem; transition: transform .15s; }
    .fila-propiedad[aria-expanded="true"] .flecha-propiedad { transform: rotate(90deg); }
    .punto-listo, .punto-pendiente { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
    .punto-listo { background: #146c43; }
    .punto-pendiente { background: #c85000; }
    .detalle-propiedad { padding: 4px 14px 16px 14px; border-top: 1px solid var(--borde); }
    @media (max-width: 575.98px) { .rotulo-propiedad { flex-basis: 120px; font-size: .92rem; } }

    .fila-ubicacion { display: flex; gap: 14px; align-items: flex-start;
                      flex-wrap: wrap; margin-bottom: 12px; }
    .texto-ubicacion { flex: 1 1 220px; min-width: 0; }
    .mapa-generico { flex: 0 0 auto; width: 170px; height: 96px;
                      border-radius: 10px; overflow: hidden;
                      border: 1px solid var(--borde); background: #e9edf3; }
    .mapa-generico svg { width: 100%; height: 100%; display: block; }
    @media (max-width: 575.98px) { .mapa-generico { width: 100%; height: 88px; } }
    html[data-tema="noche"] .mapa-generico { filter: brightness(.72) saturate(.85); }

    /* ── Los datos del cliente, con el icono fuera del renglón ──
       Antes el icono iba dentro del texto y una dirección de dos renglones
       arrancaba pegada al margen; ahora el icono tiene su propia columna y
       todo lo que cuelga de él queda alineado debajo del primer renglón. */
    .datos-cliente li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 9px; }
    .datos-cliente li > svg { flex: 0 0 auto; margin-top: .18em; }
    .datos-cliente li > span { min-width: 0; }
    .rotulo-dato { display: block; font-weight: 700; color: var(--tinta); }
    html[data-tema="noche"] .rotulo-dato { color: var(--tinta); }

    /* ── Ventas a crédito: todas en una tarjeta, separadas por una raya ── */
    .venta-fila.con-raya { border-top: 1px solid var(--borde); margin-top: 16px; padding-top: 16px; }

    /* ── Migas de pan de la ficha del cliente ── */
    .migas { font-size: .86rem; margin-bottom: .75rem; }
    .migas a { color: var(--enlace); text-decoration: none; }
    .migas a:hover { text-decoration: underline; }
    .migas .separador { color: var(--apagado); margin: 0 .35rem; }

    .form-label { font-weight: 600; font-size: .9rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    @media (max-width: 575.98px) {
      .container { padding-left: .6rem; padding-right: .6rem; }
      .card-body { padding: .9rem; }
      /* Antes bajaba a .875rem (14px), más chico que el cuerpo normal (17px) y
         deshacía la subida de tamaño de arriba justo donde más se necesita: los
         datos de la venta en el celular. La tabla de historial, más ancha,
         sigue cabiendo por el scroll horizontal de .table-responsive. */
      .table { font-size: 1rem; }
      h3 { font-size: 1.35rem; }
      h4 { font-size: 1.2rem; }
      .display-6 { font-size: 1.9rem; }
      .btn { --bs-btn-padding-y: .5rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }


/* ── El interior de la tarjeta de la libreta ──
   Lo comparten Mi ruta y la pantalla sin señal, que arma la misma
   libreta con la semana guardada en el teléfono. Estaba solo dentro
   de casa_mi_ruta.html, y por eso sin señal se veía como otra
   aplicación distinta. */
  .num-libreta { font-family: ui-monospace, Menlo, Consolas, monospace; }
  .cabeza-ficha { display: flex; gap: 10px; align-items: flex-start; }
  /* El número como el sello de la tarjeta de papel: la zona chiquita encima
     del puesto. Ancho fijo para que todos los nombres arranquen parejos. */
  .sello-ruta {
    flex: 0 0 auto; min-width: 48px; text-align: center;
    font: 700 15px/1.15 ui-monospace, Menlo, Consolas, monospace;
    color: var(--enlace); background: var(--papel-sello);
    border: 1px solid var(--papel-sello-borde); border-radius: 8px; padding: 5px 6px;
  }
  .sello-ruta small { display: block; font-size: 8.5px; font-weight: 700;
                      letter-spacing: .06em; color: var(--apagado); }
  /* Sin correlativo el código es "N.° 00042" y no se parte en dos renglones. */
  .sello-ruta.sello-largo { font-size: 10.5px; padding: 8px 6px; }
  /* El sello ya no lleva su propio color de estado: desde que Mi ruta y Ver
     zonas usan la banda ancha de Clientes (.tarjeta-banda/.banda-estado más
     abajo), el color lo dice esa franja y el sello queda neutro — repetirlo
     en dos sitios de la misma ficha no sumaba nada. */

  /* ── La línea de mora: mismos días que el informe, no una cuenta aparte ──
     Sin franja de color de fondo —solo la letra y el símbolo, a pedido—.
     Va DENTRO de .cuerpo-banda (mismo padding que el resto de la ficha, sin
     indentación propia): así, al ser parte de esa columna, la banda de
     color de al lado se estira con ella por flexbox y llega hasta abajo. */
  .linea-mora { display: flex; align-items: center; gap: 6px;
                margin-top: 6px; font-size: .8rem; font-weight: 700; }
  .linea-mora.en-mora { color: #b42318; }
  .linea-mora.al-dia  { color: #146c43; }
  html[data-tema="noche"] .linea-mora.en-mora { color: #ff9c8a; }
  html[data-tema="noche"] .linea-mora.al-dia  { color: #6ed69a; }
  .cuerpo-ficha { min-width: 0; flex: 1; }
  .linea-fuerte { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  /* Los nombres se escriben como se puede en la calle, muchas veces todo en
     minúscula. Se acomodan al enseñarlos y no en la base: el dato se guarda
     como lo escribió quien registró al cliente. */
  /* Sigue azul y no negro aunque sea lo más pesado de la ficha: tocar el
     nombre es como se abre la ficha para cobrar, que es el camino de todos
     los días. En negro dejaría de verse tocable. Va en el azul oscuro, que
     aguanta mejor el sol de mediodía que el de la marca.
     overflow-wrap: un apellido larguisimo parte antes que desbordar. */
  .nombre-ruta { font-weight: 700; text-transform: capitalize; text-decoration: none;
                 color: var(--enlace); overflow-wrap: anywhere; }

  /* Dos renglones y corta. La dirección entera se lee en la ficha del cliente;
     aquí sirve para reconocer la casa, no para leerla completa. */
  .donde-ruta {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 12.5px; color: var(--apagado); margin-top: 2px;
  }
  /* Botones parejos y de 40px: se tocan con el pulgar, de pie en la calle.
     Envuelve en vez de apretar: en un teléfono angosto el campo del número
     baja solo a otro renglón, y así ninguna palabra se parte ni se corta. */
  .acciones-ruta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px;
                   align-items: stretch; }
  .acciones-ruta > .btn { flex: 1 1 96px; min-height: 40px; display: flex;
                          align-items: center; justify-content: center; gap: 5px;
                          white-space: nowrap; }
  .acciones-ruta .btn.tenue { color: var(--apagado); background: var(--papel-toque); }
  /* El campo para mover de puesto. Sin este ancho el número se estira a toda
     la fila y el botón cae debajo: eso es lo que pasó al traer el bloque de
     casa_ver_libreta.html, donde vive la otra copia de estos estilos. */
  .orden-ruta { display: flex; align-items: center; gap: 5px; margin: 0; flex: 0 0 auto; }
  .orden-ruta input { width: 3.2rem; min-height: 40px; text-align: center;
                      font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
  .orden-ruta .btn { min-height: 40px; }

/* Lo marcado `hidden` se queda oculto, aunque además lleve una utilidad de
   Bootstrap que diga cómo mostrarse. Las dos reglas son !important y tienen la
   misma especificidad, así que decide el ORDEN dentro de bootstrap.min.css: allí
   [hidden] va cerca del principio y .d-block casi al final, de modo que .d-block
   ganaba y el elemento se veía igual. Pasó con el aviso de la cola en
   casa_base.html, que es un enlace d-block y arranca hidden: se habría visto una
   banda amarilla vacía pegada arriba de TODAS las pantallas. Esta hoja se carga
   después de Bootstrap, así que aquí sí gana. */
[hidden] { display: none !important; }

/* ── El recibo: comparte pantalla y comprobante ──
   Vivía como <style> suelto dentro de casa_recibo.html. Sin señal, la pantalla
   de respaldo reconstruye el mismo recibo (mostrarRecibo en
   casa_sin_conexion.html) reusando estas mismas clases — pero esa pantalla
   solo carga casa.css, no el <style> de casa_recibo.html, así que el recibo
   offline salía SIN NINGUNO de estos estilos: texto plano, sin el papel, sin
   el folio en monoespaciada, sin el monto destacado. Se mueve aquí, a lo
   compartido, para que las dos pantallas —la oficial y la reconstruida— sean
   de verdad el mismo comprobante y no dos que se parecen de lejos. Sube el
   ?v= de casa.css en los cuatro lugares por el mismo motivo de siempre: quien
   ya tenía el service worker instalado se queda con la hoja vieja si no.

   El recibo imita el papel: fondo blanco, borde dentado arriba y abajo, y
   tipografía de máquina en las cifras. Se reconoce como comprobante sin
   necesidad de explicarlo. */
.recibo {
  /* Los colores de día, repuestos para todo lo que va dentro del recibo. */
  --tinta: #111a2e; --apagado: #3d4553; --borde: #cbd3dd; --enlace: #1f3b8a;
  color: #111a2e;
  max-width: 420px; margin: 0 auto; background: #fff;
  border-radius: 14px; padding: 26px 24px 22px;
  box-shadow: 0 10px 30px rgba(20,40,90,.10);
  position: relative;
}
.recibo::before, .recibo::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background: radial-gradient(circle at 6px 0, transparent 6px, #fff 6px);
  background-size: 12px 8px;
}
.recibo::before { top: -7px; transform: rotate(180deg); }
.recibo::after { bottom: -7px; }
.recibo .logo-negocio { width: 84px; height: auto; margin-bottom: 9px; }
/* El distintivo de siempre: círculo verde con el auricular en blanco. Suelto y
   en verde sobre el papel se leía como un adorno; así se reconoce de un
   vistazo, que es lo que hace que el cliente sepa que a ese número sí puede
   escribirle. */
.recibo .icono-wa {
  background: #25d366; color: #fff; fill: #fff; border-radius: 50%;
  width: 1.3em; height: 1.3em; padding: .2em; box-sizing: border-box;
  vertical-align: -.33em; margin-right: 3px;
}
.recibo .negocio { font-size: 1.02rem; font-weight: 800; letter-spacing: .06em;
                   line-height: 1.25; }
.recibo .lema { font-size: .78rem; color: var(--apagado); margin-top: 3px; }
/* Un renglón por teléfono, juntos entre sí y separados del lema: se leen como
   un bloque y no como cuatro datos sueltos. */
.recibo .contacto { font-size: .82rem; font-weight: 600; line-height: 1.4;
                    margin-top: 7px; }
.recibo .contacto div { font-weight: 600; }
.recibo .lugar { font-size: .78rem; color: var(--apagado); margin-top: 4px; }
.recibo .folio { font-family: ui-monospace, Menlo, Consolas, monospace;
                 font-size: .86rem; color: var(--apagado); margin-top: 8px; }
/* La letra chica del talonario. Va al pie y en gris: tiene que estar, pero no
   compite con el monto, que es a lo que el cliente abre el recibo. */
.recibo .nota { font-size: .74rem; color: var(--apagado); line-height: 1.45; }
.recibo .nota .rotulo { font-weight: 700; letter-spacing: .05em; display: block;
                        margin-bottom: 4px; }
.recibo .nota ul { margin: 0; padding-left: 1.05rem; }
.recibo .nota li { margin-bottom: 3px; }
.recibo hr { border-top: 1px dashed #c3cde0; opacity: 1; margin: 15px 0; }
.recibo dl { margin: 0; }
.recibo dt { font-size: .78rem; font-weight: 600; color: var(--apagado);
             text-transform: uppercase; letter-spacing: .05em; }
.recibo dd { margin: 1px 0 11px; font-size: 1.02rem; font-weight: 600; }
.cifra { font-family: ui-monospace, Menlo, Consolas, monospace; }
.destacado { background: #eef2f9; border-radius: 11px; padding: 13px 15px; margin: 4px 0 12px; }
.destacado .rotulo { font-size: .78rem; font-weight: 700; color: var(--apagado);
                     text-transform: uppercase; letter-spacing: .05em; }
.destacado .monto { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.btn-wa { background: #25d366; border-color: #25d366; color: #fff; }
.btn-wa:hover, .btn-wa:focus { background: #1eb457; border-color: #1eb457; color: #fff; }
@media print {
  .barra-superior, .barra-lateral, .barra-inferior, .sin-imprimir { display: none !important; }
  body { padding: 0 !important; background: #fff !important; }
  body::before, body::after { display: none !important; }
  .recibo { box-shadow: none; border: 1px solid #999; max-width: 100%; }
}

/* Icon sprite (templates/_iconos.html): hidden by a class because the CSP blocks style="". */
.icon-sprite { display: none; }

/* Client location map (Leaflet needs a height) */
.client-map { height: 320px; border-radius: 8px; z-index: 0; }

/* Collateral photos: the thumbnail is the same picture at a smaller size */
.photo-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.photo-grid img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; display: block; }
.photo-grid form { margin-top: 4px; }

/* Collateral: easy to find (client page, loan form) and the photo button */
.collateral-box { border: 1px solid var(--borde); border-radius: 12px; padding: 12px; }
.collateral-title, .collateral-card .section-head h2 { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--tinta); }
.choice { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.photo-count { color: var(--apagado); margin: 0 0 8px; }
.photo-pick { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; cursor: pointer; }
.photo-pick .icon { font-size: 1.4rem; }
/* ---------- Screen head: back button on top, client pill under the title ---------- */
.back-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .25rem .75rem .25rem .5rem; border: 1px solid var(--borde); border-radius: 999px; color: var(--marca-texto); font-weight: 600; font-size: .9rem; text-decoration: none; background: transparent; }
.back-link:hover { background: var(--papel-libreta, rgba(0, 0, 0, .05)); }
.back-link:focus-visible, .client-pill:focus-visible { outline: 3px solid var(--bs-primary, #0d6efd); outline-offset: 2px; }
.back-link .icon { font-size: 1.1rem; }
.back-link + .page-head, .back-link + .card { margin-top: .6rem; }
.client-pill { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .2rem .8rem .2rem .55rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--papel-libreta, rgba(0, 0, 0, .04)); color: var(--tinta); text-decoration: none; }
.client-pill:hover { border-color: var(--marca-texto); }
.client-pill .icon { color: var(--apagado); flex: 0 0 auto; }
.client-pill-label { font-size: .75rem; color: var(--apagado); text-transform: uppercase; letter-spacing: .04em; }
.client-pill strong { min-width: 0; overflow-wrap: anywhere; }
.visually-hidden:focus + .photo-pick { outline: 3px solid var(--bs-primary, #0d6efd); outline-offset: 2px; }
/* The VIN hint makes its cell taller: the other inputs stay at their natural height, aligned on top */
.collateral-fields { align-items: start; }
.collateral-fields .hint { display: block; }

/* Photo picker: preview of the chosen photos and the upload bar (photo_picker.js) */
.photo-preview { display: grid; gap: 8px; }
.photo-preview[hidden], .photo-selected[hidden], .photo-warning[hidden], .upload-progress[hidden] { display: none; }
.photo-selected { margin: 0; color: var(--apagado); font-weight: 600; }
.photo-warning { margin: 0; padding: 8px 12px; border-radius: 8px; background: #fff3cd; color: #664d03; }
html[data-tema="noche"] .photo-warning { background: #3a2f12; color: #f3dc9a; }
.photo-preview-grid { margin: 0; }
.photo-preview-item { position: relative; }
.photo-preview-item img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
.photo-size { display: block; font-size: .8rem; color: var(--apagado); margin-top: 2px; }
.photo-remove { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(10,25,48,.82); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.photo-remove:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
.upload-progress { display: grid; gap: 4px; }
.upload-bar { width: 100%; height: 14px; accent-color: var(--marca-texto); }
.upload-text { margin: 0; font-weight: 600; color: var(--tinta); }
html[data-tema="noche"] .upload-text { color: inherit; }

/* Terms of use and the footer (ORDER 41) */
.terms-card { max-width: 720px; }
.terms-summary { margin: 0; font-weight: 600; }
.terms-section h2 { font-size: 1rem; margin: .4rem 0 .3rem; }
.terms-section p { margin: 0 0 .5rem; }
.terms-accept { max-width: 720px; margin-top: 1rem; }
.terms-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.terms-check a { color: var(--enlace); text-decoration: underline; }
.terms-section { scroll-margin-top: 80px; }
.terms-check input { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.terms-decline { max-width: 720px; margin-top: .6rem; color: var(--apagado); background: transparent; border: 0; }
.legal-footer { margin: 2rem 0 1rem; text-align: center; font-size: .8rem; color: var(--apagado); }
.legal-footer p { margin: 0; }
.legal-footer a { color: inherit; text-decoration: underline; }
/* The phone has the bar of destinations fixed at the bottom: the footer must not end up under it. */
@media (max-width: 991.98px) { .legal-footer { margin-bottom: 5.5rem; } }