/* Estilos propios de ROIVE (la identidad de marca sobre Bootstrap).
 *
 * Vivía embebido en un <style> dentro de base.html, y por ir dentro del HTML
 * el navegador no lo podía cachear: eran 40 KB que se volvían a descargar en
 * CADA navegación. Aquí lo sirve WhiteNoise con el nombre hasheado, así que se
 * descarga una vez y se reutiliza hasta que cambie.
 *
 * Si algún día necesita una URL de Django ({% static %} para una imagen de
 * fondo, por ejemplo), NO se vuelve a meter en la plantilla: se pasa el valor
 * por una custom property en el HTML y aquí se lee con var().
 */

/* Paleta e identidad de marca: cuando exista el logo/colores definitivos,
   solo hay que cambiar estas variables — el resto del sitio (botones,
   navbar, links, footer) las usa a través de las utilidades *-primary
   de Bootstrap y de estas clases. */
:root {
    /* Tokens compartidos con la landing (inicio.html): mismos valores,
       mismos nombres. Si cambian allá, cambian aquí. */
    --bs-primary: #0b7a4e;
    --bs-primary-rgb: 11, 122, 78;
    --verde: #0b7a4e;
    --verde-oscuro: #0b2e1f;
    --verde-claro: #89c488;
    --lima: #b5f362;
    --tinta: #0d1f16;
    --texto: #3c5148;
    --gris: #5d6f66;
    --superficie: #f6f8f6;
    --superficie-alt: #eef4ef;
    --borde: rgba(13, 31, 22, .08);
    --borde-fuerte: rgba(13, 31, 22, .14);
    --sombra-suave: 0 24px 60px -24px rgba(13, 31, 22, .16), 0 2px 10px rgba(13, 31, 22, .05);
    --sombra-boton: 0 10px 26px -8px rgba(11, 122, 78, .38);
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-spring: cubic-bezier(.32, .72, 0, 1);
    /* Radios: mismos valores que la landing (inicio.html). Bajaron de
       22/16 a 16/12 — las tarjetas topan en 20px; más redondeo lee como
       plantilla. La píldora sigue en botones y chips. */
    --r-lg: 16px;
    --r-md: 12px;
    --bs-body-font-family: 'Instrument Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--tinta);
    --bs-border-radius: 10px;
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #096943;
    --bs-link-color-rgb: 11, 122, 78;
    --bs-link-hover-color-rgb: 9, 105, 67;

    /* Retema los colores semánticos de Bootstrap (success/warning/danger)
       para que badges, alertas, bordes y texto contextual usen tonos
       que combinan con el verde/lima de ROIVE en vez de los genéricos
       de Bootstrap. Esto cubre .bg-*, .text-*, .border-* automáticamente
       porque esas utilidades leen los -rgb en tiempo de render. */
    --bs-success: #0b7a4e;
    --bs-success-rgb: 11, 122, 78;
    --bs-warning: #e2a63b;
    --bs-warning-rgb: 226, 166, 59;
    --bs-danger: #c8483f;
    --bs-danger-rgb: 200, 72, 63;
}
body {
    background: var(--superficie);
}
/* Tipografía de la landing: Archivo Expanded para títulos, Instrument
   Sans para todo lo demás. La marca es siempre el logo en PNG.
   Ojo: el "Expanded" viene horneado en el archivo (ver fonts.css), no
   se pide con font-stretch ni font-variation-settings. */
/* Incluye las clases .h1–.h6 de Bootstrap: su font-weight 500 tiene más
   especificidad que el selector de elemento y dejaba los títulos
   compactos (h1.h3) en Medium en vez de Bold. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Archivo', var(--bs-body-font-family);
    font-weight: 700;
    letter-spacing: -.01em;
    text-wrap: balance;
}
:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
/* Botones píldora, mismos que la landing */
.btn {
    border-radius: 999px;
    font-weight: 600;
    padding: .6rem 1.4rem;
    transition: transform 300ms var(--ease-spring), background 200ms ease, border-color 200ms ease, box-shadow 300ms var(--ease-spring), color 200ms ease;
}
.btn:active {
    transform: scale(.97);
}
@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:active { transform: none; }
}
/* Un botón pegado a un campo deja de ser píldora: Bootstrap solo anula
   los radios del lado que toca al input, así que el extremo libre se
   quedaba abombado en 999px contra un campo de 10px. También se le
   quita el padding ancho, pensado para botones de acción con texto. */
.input-group > .btn {
    border-radius: var(--bs-border-radius);
    padding-left: .85rem;
    padding-right: .85rem;
}
.input-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-primary {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: var(--sombra-boton);
}
.btn-primary:hover, .btn-primary:focus {
    background: #096943;
    border-color: #096943;
    box-shadow: 0 14px 32px -8px rgba(11, 122, 78, .46);
}
.btn-outline-primary {
    color: var(--tinta);
    background: #fff;
    border-color: var(--borde-fuerte);
}
.btn-outline-primary:hover {
    background: #fff;
    color: var(--tinta);
    border-color: var(--bs-primary);
}
/* Los botones .btn-success/.btn-warning/.btn-danger de Bootstrap traen su
   color de fondo fijo (no leen las variables de arriba) — se retiman aquí
   a mano para que combinen con el resto del sitio. */
.btn-success {
    background: var(--bs-success);
    border-color: var(--bs-success);
}
.btn-success:hover, .btn-success:focus {
    background: #096943;
    border-color: #096943;
}
.btn-warning {
    background: var(--bs-warning);
    border-color: var(--bs-warning);
    color: var(--tinta);
}
.btn-warning:hover, .btn-warning:focus {
    background: #cf9430;
    border-color: #cf9430;
    color: var(--tinta);
}
.btn-danger {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
}
.btn-danger:hover, .btn-danger:focus {
    background: #b03c34;
    border-color: #b03c34;
}
/* Encabezados de tabla: verde oscuro de marca en vez del negro por
   defecto de .table-dark, para que combine con el resto del sitio. */
.table-dark {
    --bs-table-bg: var(--verde-oscuro);
    --bs-table-border-color: #163828;
    --bs-table-color: #fff;
}
/* Bootstrap alinea las celdas arriba por defecto; se centra el
   contenido de todas las tablas del sitio (equivalente a .align-middle
   en cada <table>), para que filas con botones/badges de distinta
   altura no queden con el texto pegado arriba. */
.table > :not(caption) > * > * {
    vertical-align: middle;
}
/* .table-responsive tiene que estar posicionado. Si no, cualquier hijo
   con position:absolute — un <label class="visually-hidden">, por
   ejemplo — se ancla al viewport en la coordenada que tenga DENTRO de
   la tabla desplazada (x=809 en cuentas por cobrar) y estira el
   documento entero: la página completa se arrastraba a la derecha
   hacia un vacío blanco en celular. */
.table-responsive {
    position: relative;
}
/* Aviso de que la tabla sigue hacia la derecha. La envoltura y el
   degradado los pone el script del final del archivo, y solo en las
   tablas que de verdad se desbordan. */
.tabla-scroll {
    position: relative;
}
.tabla-scroll-borde {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    background: linear-gradient(to right, rgba(246, 248, 246, 0), rgba(13, 31, 22, .13));
    /* Sigue la esquina redondeada de la tabla (ver más abajo); recto se
       le salía por el vértice. */
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.tabla-scroll.hay-mas .tabla-scroll-borde {
    opacity: 1;
}

/* Tablas en escritorio ---------------------------------------------
   De 768px para abajo la fila se vuelve tarjeta (los dos bloques que
   siguen). De ahí para arriba la tabla sigue siendo tabla, y esto es
   su material.

   Lo que había era Bootstrap crudo: rejilla gris completa
   (.table-bordered), rayas cebra (.table-striped) y una banda negra
   —verde oscuro desde que se retemó .table-dark— de encabezado a
   1rem. Tres capas de tinta compitiendo con los datos, que es lo
   único que el operador viene a leer.

   Ahora la tabla es la misma tarjeta blanca que .card (borde de
   --borde-fuerte, esquinas de --r-md), la cabecera es un rótulo en
   versalitas grises —el mismo recurso que .campo-eyebrow y
   .nav-grupo-titulo— y de la rejilla queda solo un divisor por fila.
   El resalte al pasar el ratón sustituye a la cebra y además dice
   algo que las rayas fijas no pueden decir: cuál es la fila que estoy
   mirando.

   Todo se hace desde aquí: las plantillas siguen escribiendo
   .table-striped .table-bordered y <thead class="table-dark"> y no
   hay que tocar ninguna. Las reglas empatan en especificidad con las
   de Bootstrap y ganan por orden de aparición, igual que el resto de
   este archivo.

   El contorno de tarjeta va solo en las tablas con .bg-white, que en
   el marcado son justo las listas sueltas en la página. Las que viven
   dentro de un .card (el balance de contabilidad, los paquetes de la
   factura, los datos de las gráficas) no lo llevan: el card ya pone
   el suyo y dos contornos concéntricos a 12px se leen como un error
   de maquetación. */
@media (min-width: 768px) {
    .table {
        /* Con border-collapse:collapse el borde de la tabla y el de
           las celdas se funden en uno solo y el navegador ignora el
           border-radius: la tarjeta saldría con las esquinas en
           ángulo recto. */
        border-collapse: separate;
        border-spacing: 0;
        --bs-table-border-color: var(--borde);
        /* Adiós cebra. La variable la lee cada celda en su
           box-shadow, así que apagarla aquí las apaga todas. */
        --bs-table-striped-bg: transparent;
        --bs-table-striped-color: var(--bs-body-color);
        font-size: .925rem;
        /* Cifras de ancho fijo: los montos de una columna quedan
           alineados dígito con dígito aunque estén a la izquierda. */
        font-variant-numeric: tabular-nums;
    }
    /* .table-bordered reparte el marco en dos reglas: arriba/abajo en
       la fila y izquierda/derecha en la celda. Se desarman las dos y
       se deja un único divisor horizontal. */
    .table > :not(caption) > * {
        border-width: 0;
    }
    .table > :not(caption) > * > * {
        border: 0 solid var(--borde);
        border-bottom-width: 1px;
        padding: .75rem .9rem;
    }
    .table-sm > :not(caption) > * > * {
        padding: .45rem .6rem;
    }
    /* El último divisor se solaparía con el borde de la tarjeta. */
    .table > tbody > tr:last-child > * {
        border-bottom-width: 0;
    }
    /* Cabecera: rótulo, no banda. */
    .table > thead > tr > * {
        background: var(--superficie-alt);
        color: var(--gris);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        border-bottom-color: var(--borde-fuerte);
        /* Los encabezados largos ("Te facturó el proveedor") parten en
           dos líneas: alineados abajo, todas las columnas comparten la
           línea base de la última fila de texto. */
        vertical-align: bottom;
        /* .table-dark pinta el fondo con un inset de 9999px que
           taparía lo de arriba. */
        box-shadow: none;
    }
    /* La fila que estoy mirando. Las dos líneas de abajo son para el
       patrón de fila de continuación del panel del cliente: la fila de
       datos y su desplegable son una sola cosa, así que se resaltan
       juntos, se entre por la que se entre. */
    .table > tbody > tr:hover > *,
    .table > tbody > tr:hover + .mv-continuacion > *,
    .table > tbody > tr:has(+ .mv-continuacion:hover) > * {
        background-color: var(--superficie-alt);
    }
    /* Y por lo mismo, entre esas dos no va divisor. */
    .table > tbody > tr:has(+ .mv-continuacion) > * {
        border-bottom-color: transparent;
    }
    /* Enlaces: en una lista hay uno por fila y el subrayado de
       Bootstrap convierte la columna en un rayado. Se guarda para el
       hover, que es cuando hace falta saber que es un enlace. */
    .table a:not(.btn) {
        text-decoration: none;
    }
    .table a:not(.btn):hover {
        text-decoration: underline;
    }
    /* .btn-sm no era pequeño: el .btn de este archivo fija el padding
       en duro y le ganaba a las variables que usa Bootstrap para la
       talla, así que el botón de "Editar" de cada fila venía con el
       tamaño de un botón de acción principal y estiraba el renglón. */
    .table .btn-sm {
        padding: .35rem .85rem;
        font-size: .8rem;
    }

    /* El contorno de tarjeta, solo en las listas sueltas. Con
       border-collapse:separate el borde de la tabla envuelve las
       celdas por fuera, así que las cuatro esquinas del contenido se
       redondean una a una o los fondos blancos asoman en ángulo recto
       por debajo de la curva. El -1px es el grosor del propio borde:
       la curva de dentro va un píxel más cerrada que la de fuera. */
    .table.bg-white {
        border: 1px solid var(--borde-fuerte);
        border-radius: var(--r-md);
    }
    /* Se apunta al primer/último grupo de filas y no a thead/tbody
       para que también valga en las tablas sin encabezado. */
    .table.bg-white > :first-child > tr:first-child > *:first-child {
        border-top-left-radius: calc(var(--r-md) - 1px);
    }
    .table.bg-white > :first-child > tr:first-child > *:last-child {
        border-top-right-radius: calc(var(--r-md) - 1px);
    }
    .table.bg-white > :last-child > tr:last-child > *:first-child {
        border-bottom-left-radius: calc(var(--r-md) - 1px);
    }
    .table.bg-white > :last-child > tr:last-child > *:last-child {
        border-bottom-right-radius: calc(var(--r-md) - 1px);
    }
}
/* El estado de una factura es una cadena compuesta ("Emitida ·
   Pendiente de pago · Con nota de crédito"). En una sola línea mide
   309px — más que media pantalla de celular — y era lo que más
   ensanchaba lista_paquetes, cuentas por cobrar y el panel del
   cliente. Se le deja romper línea. */
.badge {
    white-space: normal;
    text-align: left;
}

/* Listas con jerarquía en celular ---------------------------------
   Para las listas que se recorren a diario (clientes, paquetes,
   facturas) el patrón rótulo/valor de .tabla-tarjetas gasta media
   pantalla por registro: seis filas del mismo peso visual y un hueco
   enorme entre el rótulo y su valor. Aquí la fila se vuelve una
   tarjeta con jerarquía real — identificador y acción arriba, el dato
   principal en grande, y el resto agrupado en una línea de apoyo.

   Vocabulario (clases en cada <td>; el <table> lleva .tabla-movil):
     .mv-id      identificador, arriba a la izquierda
     .mv-accion  badge o cifra, arriba a la derecha
     .mv-titulo  el dato principal, en su propia línea
     .mv-meta    dato de apoyo; varios seguidos comparten línea
     .mv-sep     antepone "·" (para el 2.º y siguientes de una línea)
     .mv-linea   el dato ocupa una línea entera para él
     .mv-oculto  la columna no se muestra en celular
     .mv-cifra   aspecto de cifra destacada (sin mover de sitio)
     .mv-monto   cifra destacada, al final de la tarjeta
     .mv-pie     a la derecha de su línea
     .mv-botones los botones de la fila, al pie de la tarjeta
   El orden lo fija la clase, no el orden de las columnas, así que la
   tarjeta se arma sin tocar cómo se ve la tabla en escritorio: de
   768px para arriba ninguna de estas clases hace nada. */
@media (max-width: 767.98px) {
    .tabla-movil,
    .tabla-movil > tbody {
        display: block;
    }
    .tabla-movil > thead {
        display: none;
    }
    .tabla-movil {
        border: 0;
        /* Las tablas llevan .bg-white en el marcado, que en escritorio
           es lo correcto (el cuerpo de la tabla es blanco). Pero .bg-white
           es una utilidad con !important, así que un `background:
           transparent` a secas no la vencía: quedaba una sábana blanca
           rectangular pintada detrás de las tarjetas, y en cada esquina
           redondeada asomaba el blanco en ángulo recto. El !important
           acá es para ganarle a la utilidad, no por especificidad. */
        background: transparent !important;
    }
    .tabla-movil > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .4rem;
        row-gap: .3rem;
        background: #fff;
        /* Mismo material que .card; ahí está el porqué de --borde-fuerte. */
        border: 1px solid var(--borde-fuerte);
        border-radius: var(--r-md);
        padding: .85rem .95rem;
        margin-bottom: .6rem;
    }
    .tabla-movil > tbody > tr > td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        /* .table-striped raya las filas con un inset gigante; sobre
           tarjetas blancas eso las ensuciaría. */
        box-shadow: none;
    }
    .tabla-movil .mv-id {
        order: -20;
        font-weight: 600;
    }
    /* Cuando la tarjeta tiene un dato principal, el identificador pasa
       a ser de apoyo: en clientes el casillero llevaba el mismo peso
       que el nombre y el ojo aterrizaba en el código, no en la persona.
       Donde el identificador ES el dato principal (facturas,
       promociones) la fila no lleva .mv-titulo y esto no aplica. */
    .tabla-movil > tbody > tr:has(.mv-titulo) .mv-id {
        font-size: .85rem;
        color: var(--gris);
    }
    .tabla-movil .mv-accion {
        order: -10;
        margin-left: auto;
        text-align: right;
    }
    /* Una acción secundaria repetida en cada tarjeta ("Editar") no
       necesita el peso de un botón: el rectángulo con borde es lo más
       alto de la primera línea — arrastra el row-gap y estira la
       tarjeta — y compite con el nombre. Se le quita el marco pero se
       le deja el padding, que es el área de toque; el margen negativo
       devuelve el texto al borde de la tarjeta. En escritorio sigue
       siendo botón. */
    .tabla-movil .mv-accion > .btn {
        border-color: transparent;
        box-shadow: none;
        margin-right: -.5rem;
    }
    .tabla-movil .mv-titulo {
        order: 0;
        flex: 1 0 100%;
        font-size: 1.02rem;
        font-weight: 600;
        line-height: 1.3;
    }
    .tabla-movil .mv-meta {
        order: 10;
        font-size: .85rem;
        color: var(--gris);
    }
    /* Los datos de apoyo van en su propia línea, debajo del título. Lo
       que forzaba el salto era el ancho completo de .mv-titulo, así que
       una tarjeta con el título vacío — un cliente sin nombre, un
       paquete sin asignar — se desarmaba: los .mv-meta se trepaban a la
       línea del identificador, a la derecha del botón. Mismo truco que
       el salto de .mv-monto: un elemento de ancho completo dentro del
       flex, aquí el ::after de la fila. */
    .tabla-movil > tbody > tr:has(.mv-meta)::after {
        content: "";
        order: 5;
        flex: 0 0 100%;
        height: 0;
    }
    /* Safari en iOS autodetecta los teléfonos del texto y los envuelve
       en un <a href="tel:"> que hereda el verde de marca y el
       subrayado: en la línea de apoyo el dato de menos peso terminaba
       siendo el único con color de toda la tarjeta. Se sigue pudiendo
       tocar para llamar, pero con el aspecto del texto que lo rodea. */
    .tabla-movil .mv-meta a[href^="tel:"],
    .tabla-movil .mv-meta a[href^="mailto:"] {
        color: inherit;
        text-decoration: none;
    }
    /* El salto de línea antes de la cifra final. Flexbox reparte el
       espacio sobrante DESPUÉS de armar las líneas, así que un
       flex-grow no obliga a saltar; lo que sí lo hace es un elemento
       de ancho completo, y el ::before de la fila cuenta como uno más
       dentro del flex. Solo aparece si hay cifra que bajar. */
    .tabla-movil > tbody > tr:has(.mv-monto)::before {
        content: "";
        order: 15;
        flex: 0 0 100%;
        height: 0;
    }
    /* .mv-cifra es solo el aspecto; .mv-monto además la coloca al
       final. Separadas porque en varias listas la cifra va arriba a
       la derecha (.mv-accion .mv-cifra) y ahí el orden lo manda
       .mv-accion. */
    .tabla-movil .mv-cifra,
    .tabla-movil .mv-monto {
        font-size: 1.02rem;
        font-weight: 700;
    }
    .tabla-movil .mv-monto {
        order: 20;
    }
    /* Varias cifras al pie de la misma tarjeta (costo/cobrado/ganancia en
       /manifiestos/, total/saldo en /facturas/). No llevan "·" entre ellas:
       cuando el grupo no cabe en un renglón el separador queda abriendo el
       siguiente y se lee como una viñeta suelta. Lo que las separa es el
       rótulo que cada una lleva pegado, más un poco de aire extra.
       El aire va a la derecha de la cifra y no a la izquierda de la
       siguiente: así, cuando el grupo salta de renglón, la que baja
       arranca alineada con la de arriba y no sangrada. */
    .tabla-movil .mv-monto:has(+ .mv-monto) {
        margin-right: .35rem;
    }
    /* Cuando la tarjeta ya tiene su cifra destacada arriba (la ganancia en
       /manifiestos/), las de abajo son de apoyo: dos tamaños de negrita
       compitiendo dejaban la tarjeta sin un punto donde aterrizar. El número
       conserva algo de peso, el rótulo sigue en gris. */
    .tabla-movil > tbody > tr:has(.mv-accion .mv-cifra) .mv-monto {
        font-size: .88rem;
        font-weight: 600;
    }
    .tabla-movil .mv-pie {
        order: 30;
        margin-left: auto;
        text-align: right;
    }
    .tabla-movil .mv-botones {
        order: 40;
        flex: 1 0 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem;
        margin-top: .15rem;
    }
    /* El formulario de cobro de /pendientes/ (método, fecha y botón) no
       cabía en un renglón y empujaba el botón fuera de la pantalla:
       método y fecha lo comparten, y el botón baja a todo el ancho. */
    .tabla-movil .mv-cobro {
        flex: 1 0 100%;
        flex-wrap: wrap;
    }
    .tabla-movil .mv-cobro > select,
    .tabla-movil .mv-cobro > input {
        flex: 1 1 0;
        min-width: 0;
    }
    .tabla-movil .mv-cobro > button {
        flex: 1 0 100%;
    }
    /* Modificadores */
    .tabla-movil .mv-linea {
        flex: 1 0 100%;
    }
    .tabla-movil .mv-sep::before {
        content: "·";
        margin-right: .4rem;
        opacity: .5;
    }
    /* Una columna que en celular no aporta (un manifiesto vacío, que
       en la tabla es un "—" pero aquí solo dejaría un guion suelto
       entre dos puntos medios). */
    .tabla-movil .mv-oculto,
    .tabla-movil > tbody > tr > td:empty {
        display: none;
    }
    /* Una celda de acciones sin botones (sin permiso, o la fila no
       admite la acción) no debe dejar un hueco al pie. */
    .tabla-movil .mv-botones:not(:has(*)) {
        display: none;
    }
    /* Fila de continuación: el <tr> que en escritorio va debajo con
       colspan (el "Ver detalle" del panel del cliente) se pega a la
       tarjeta de arriba en vez de ser una tarjeta suelta. */
    .tabla-movil > tbody > tr.mv-continuacion {
        margin-top: -.75rem;
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding-top: 0;
    }
    .table-responsive:has(> .tabla-movil) {
        overflow-x: visible;
    }
}

/* Tablas que se vuelven tarjetas rótulo/valor en celular -----------
   El otro patrón, para tablas de datos donde todas las columnas pesan
   igual y el rótulo es imprescindible para entender el número
   (contabilidad, configuración). Una tabla de 10 columnas no cabe en
   390px por mucho scroll lateral que tenga: la columna de acciones
   queda fuera de pantalla y nadie descubre que está ahí.
   Convención: la clase va en el <table> y cada <td> lleva su rótulo en
   data-etiqueta. Un <td> sin data-etiqueta (acciones, desplegables)
   ocupa el ancho completo de la tarjeta. */
@media (max-width: 767.98px) {
    .tabla-tarjetas,
    .tabla-tarjetas > tbody,
    .tabla-tarjetas > tbody > tr,
    .tabla-tarjetas > tbody > tr > td {
        display: block;
        width: auto;
    }
    .tabla-tarjetas > thead {
        display: none;
    }
    .tabla-tarjetas {
        border: 0;
        /* Mismo caso que .tabla-movil: hay que ganarle al !important de
           la utilidad .bg-white o queda la sábana blanca detrás. */
        background: transparent !important;
    }
    .tabla-tarjetas > tbody > tr {
        background: #fff;
        border: 1px solid var(--borde-fuerte);
        border-radius: var(--r-md);
        padding: .2rem .9rem;
        margin-bottom: .7rem;
    }
    .tabla-tarjetas > tbody > tr > td {
        position: relative;
        padding: .5rem 0 .5rem 40%;
        /* El rótulo va posicionado, así que no aporta altura: sin este
           mínimo, una celda con el valor vacío (un cliente sin nombre)
           colapsa y su rótulo se monta sobre la fila siguiente. */
        min-height: 2.25rem;
        text-align: right;
        border: 0;
        border-bottom: 1px solid var(--borde);
        /* .table-striped raya las filas con un inset gigante; sobre
           tarjetas blancas eso las ensuciaría. */
        box-shadow: none;
    }
    .tabla-tarjetas > tbody > tr > td:last-child {
        border-bottom: 0;
    }
    .tabla-tarjetas > tbody > tr > td::before {
        content: attr(data-etiqueta);
        position: absolute;
        left: 0;
        top: .5rem;
        width: 36%;
        text-align: left;
        font-size: .78rem;
        font-weight: 600;
        color: var(--gris);
    }
    /* Celdas sin rótulo: acciones y desplegables, a lo ancho. */
    .tabla-tarjetas > tbody > tr > td:not([data-etiqueta]) {
        padding-left: 0;
        text-align: left;
    }
    /* Una celda con controles dentro (el select de rol con su botón,
       por ejemplo) no cabe en el 60% que le deja el rótulo al lado:
       ahí el rótulo se va arriba y el control usa la tarjeta entera. */
    .tabla-tarjetas > tbody > tr > td[data-etiqueta]:has(form, select, input, .btn) {
        padding: 1.7rem 0 .5rem;
        text-align: left;
    }
    .tabla-tarjetas > tbody > tr > td[data-etiqueta]:has(form, select, input, .btn)::before {
        width: auto;
        top: .4rem;
    }
    .tabla-tarjetas .celda-acciones {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem;
    }
    /* Una celda de acciones que no trae ningún botón (el usuario no
       tiene permiso, la fila no admite la acción) dejaría un hueco al
       pie de la tarjeta. No se puede usar :empty porque la plantilla
       deja saltos de línea dentro. */
    .tabla-tarjetas .celda-acciones:not(:has(*)) {
        display: none;
    }
    /* Ya no hay nada que desplazar de lado. */
    .table-responsive:has(> .tabla-tarjetas) {
        overflow-x: visible;
    }
}
/* Radios y checkboxes con el verde de marca, un poco más grandes para
   que sean más fáciles de marcar. */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--bs-primary);
    width: 1.05em;
    height: 1.05em;
}
/* Navbar clara, con borde inferior sutil, como en la landing */
.navbar {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--borde);
}
.marca-logo {
    height: 2.1rem;
    width: auto;
}
.navbar-brand {
    font-size: 1.3rem;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    color: var(--tinta);
}
.navbar-nav .nav-link {
    font-weight: 500;
    color: var(--texto);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.navbar-nav .nav-link:hover {
    color: var(--bs-primary);
}
.navbar-nav .nav-link.active {
    font-weight: 600;
    color: var(--bs-primary);
    text-decoration: none;
}
.nav-separador {
    border-top: 1px solid var(--borde);
    margin: 0.25rem 0;
}
@media (min-width: 992px) {
    .nav-separador {
        border-top: none;
        border-left: 1px solid var(--borde);
        height: 1.5rem;
        align-self: center;
        margin: 0 0.5rem;
    }
}
.navbar-nav .badge.text-bg-light {
    background: var(--lima) !important;
    color: var(--tinta) !important;
}
/* Desplegables de la navbar ("Más" y la cuenta). Bootstrap trae su propio
   look; aquí se alinea con los tokens del resto del sitio. */
.navbar-nav .dropdown-menu {
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-md);
    box-shadow: var(--sombra-suave);
    padding: 0.35rem;
    margin-top: 0.4rem;
    min-width: 13rem;
}
.navbar-nav .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    font-weight: 500;
    color: var(--texto);
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
    background: var(--superficie-alt);
    color: var(--bs-primary);
}
.navbar-nav .dropdown-item.active {
    background: var(--superficie-alt);
    color: var(--bs-primary);
    font-weight: 600;
}
/* Encabezado del grupo cuando el menú está colapsado en móvil y los
   desplegables se aplanan en secciones. */
.nav-grupo-titulo {
    margin: 0.75rem 0 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gris);
}
/* El disparador del menú de cuenta: la inicial del usuario en un círculo. */
.nav-cuenta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    /* Menos que los .nav-link de texto: si no, el círculo estira la navbar. */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.cuenta-inicial {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--superficie-alt);
    border: 1px solid var(--borde-fuerte);
    color: var(--tinta);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
}
.nav-cuenta:hover .cuenta-inicial,
.nav-cuenta[aria-expanded="true"] .cuenta-inicial {
    background: var(--lima);
    border-color: var(--lima);
}
/* Mensajes Django, mismo tono que la landing */
.alert-info {
    background: #eaf6e6;
    border: 1px solid rgba(11, 122, 78, .25);
    color: var(--tinta);
    border-radius: 14px;
}
/* Avisos neutros y estados vacíos: el gris frío por defecto de Bootstrap
   desentona con la superficie verdosa — se lleva a la paleta. */
.alert-secondary {
    background: var(--superficie-alt);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: 14px;
}
/* Footer claro, igual que la landing */
footer.bg-dark {
    background: var(--superficie) !important;
    border-top: 1px solid var(--borde);
    color: var(--texto) !important;
}
footer.bg-dark .text-white,
footer.bg-dark h6 {
    color: var(--tinta) !important;
}
footer.bg-dark .text-white-50,
footer.bg-dark p,
footer.bg-dark .small {
    color: var(--gris) !important;
}
footer a.link-pie {
    color: var(--texto);
    text-decoration: none;
}
footer a.link-pie:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}
footer hr.border-secondary {
    border-color: var(--borde) !important;
}

/* Tarjetas de formulario (login, registro, editar perfil, recuperar
   contraseña): mismo lenguaje visual — card redondeada, secciones con
   eyebrow, toggle segmentado natural/jurídico y campos redondeados.
   Se activan con las clases de abajo, no son estilos globales de
   Bootstrap, así que solo afectan a las páginas que las usan. */
.tarjeta-form {
    max-width: 460px;
    margin: 1.75rem auto;
    padding: 2.25rem 2rem;
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-suave);
}
.tarjeta-form.tarjeta-ancha {
    max-width: 640px;
}
.tarjeta-form .marca-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.35rem;
}
.marca-mini img {
    height: 2.3rem;
    width: auto;
}
.campos-redondeados .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: .35rem;
}
.campos-redondeados .form-control,
.campos-redondeados .form-select {
    border-radius: 10px;
    border-color: var(--borde-fuerte);
    padding: .6rem .85rem;
    font-size: .925rem;
}
.campos-redondeados .form-control:focus,
.campos-redondeados .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(11, 122, 78, .15);
}
/* Los forms de auth de Django (reset de contraseña) no traen clases en
   sus widgets — se les da el mismo material que .form-control por
   elemento, solo dentro de .campos-redondeados. */
.campos-redondeados input:not([type="checkbox"]):not([type="radio"]):not([class]),
.campos-redondeados textarea:not([class]),
.campos-redondeados select:not([class]) {
    display: block;
    width: 100%;
    border: 1px solid var(--borde-fuerte);
    border-radius: 10px;
    padding: .6rem .85rem;
    font-size: .925rem;
    font-family: inherit;
    color: var(--tinta);
    background: #fff;
}
.campos-redondeados input:not([type="checkbox"]):not([type="radio"]):not([class]):focus,
.campos-redondeados textarea:not([class]):focus,
.campos-redondeados select:not([class]):focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(11, 122, 78, .15);
}
/* Help text bajo los campos (incluye el <ul> de reglas de contraseña) */
.campos-redondeados .form-text {
    font-size: .8rem;
    color: var(--texto);
}
.campos-redondeados .form-text ul {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
}
/* Checkboxes sin clase (ej. permisos de rol) alineados como form-check */
.campos-redondeados .form-check input[type="checkbox"]:not([class]) {
    float: left;
    margin-left: -1.5em;
    margin-top: .35em;
}
.campo-eyebrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.5rem 0 .9rem;
}
.campo-eyebrow:first-of-type {
    margin-top: 0;
}
.campo-eyebrow span {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gris);
}
.campo-eyebrow i {
    color: var(--bs-primary);
    font-size: .8rem;
}
.campo-eyebrow .linea {
    flex: 1;
    height: 1px;
    background: var(--borde);
}
.seg-tipo {
    display: flex;
    background: var(--superficie-alt);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}
.seg-tipo label {
    position: relative;
    flex: 1;
    text-align: center;
    padding: .5rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--gris);
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.seg-tipo label:has(input:checked) {
    background: #fff;
    color: var(--bs-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.seg-tipo input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
/* El .seg-tipo normal se estira a lo ancho de su columna, que es lo que
   quieren los formularios de registro/perfil. Cuando el control va
   inline junto a otros campos (factura_detalle.html) tiene que medir lo
   que miden sus opciones y no más. */
.seg-tipo.seg-auto {
    display: inline-flex;
}
.seg-tipo.seg-auto label {
    flex: 0 0 auto;
}
/* Los radios de .seg-tipo son invisibles, así que el foco de teclado se
   pinta sobre la etiqueta o el control queda innavegable a ciegas. */
.seg-tipo label:has(input:focus-visible) {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
.toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--gris);
    padding: 4px 6px;
}
.turnstile-box {
    border: 1px dashed rgba(13, 31, 22, .2);
    border-radius: 10px;
    padding: .85rem;
    text-align: center;
    color: var(--gris);
    font-size: .85rem;
}
@media (max-width: 576px) {
    .tarjeta-form {
        margin: 1rem auto;
        padding: 1.5rem 1.25rem;
        border-radius: 12px;
    }
}

/* Material base de tarjetas en toda la app: blanco sobre la superficie
   verdosa de la landing, borde sutil, esquinas de --r-md.
   El contorno usa --borde-fuerte y no --borde: al 8% el borde queda en
   236 contra una página de 246 — 4% de contraste, el límite de lo
   visible. Los tramos rectos se desvanecían y la curva de la esquina,
   cruzada en diagonal y repartida por el antialiasing entre más
   píxeles, era lo único que registraba el ojo: la tarjeta se leía como
   cuatro esquinitas sueltas en vez de un contorno. Los divisores (una
   línea recta, sin esquina) siguen bien al 8%. */
.card {
    background: #fff;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-md);
}
/* Iconografía propia (sprite en _iconos_sprite.html, tag "icono").
   Los iconos miden 1em y toman el color del texto, así que heredan el
   font-size y el color de su contenedor exactamente igual que hacía la
   fuente de iconos: por eso .stat-icono y .seccion-icono siguen
   dimensionándolos con font-size sin cambio alguno.
   El grosor de trazo se declara aquí una sola vez para todo el set. */
.sprite-iconos {
    display: none;
}
.ico {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Baja el icono hasta la línea base óptica del texto: sin esto
       flota alto cuando va inline junto a una palabra. */
    vertical-align: -.125em;
    flex: none;
}
/* A tamaños grandes el trazo de 1.75 se ve pesado, y a tamaños muy
   pequeños se ve endeble. Se compensa por tramos. */
.ico-grande {
    stroke-width: 1.5;
}
.ico-pequeno {
    stroke-width: 2;
}

/* Tarjetas de estadística e íconos de sección de cabecera, reusadas
   en dashboard_facturador.html y facturacion.html. */
.tarjeta-stat {
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-md);
}
.tarjeta-stat.alerta {
    border-color: rgba(200, 72, 63, .3);
    background: #fdf3f2;
}
.stat-icono {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--superficie-alt);
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 0 auto 10px;
}
.tarjeta-stat.alerta .stat-icono {
    background: rgba(200, 72, 63, .12);
    color: var(--bs-danger);
}
.seccion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: .75rem;
}
/* En celular el .h3 de Bootstrap (1.3rem + .6vw) en Archivo Expanded
   deja títulos largos como "Configuración del sistema" pegados al
   borde derecho. Se baja un punto solo en pantallas chicas. */
@media (max-width: 575.98px) {
    .seccion-header .h3,
    .seccion-header h1 {
        font-size: 1.3rem;
    }
}
.seccion-icono {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    background: var(--superficie-alt);
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 16px, no 14: la caja mide 30px y a 14 los iconos compuestos
       (persona + modificador, rejillas) perdían detalle sin que
       sobrara nada de aire. */
    font-size: 16px;
}

/* Insignia de éxito con un pequeño estallido de confeti al cargar
   (registro_exito.html, reset_password_completo.html). */
.badge-exito {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.1rem;
}
.badge-exito .circulo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--superficie-alt);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
}
.badge-exito .confeti {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 10px;
    border-radius: 1px;
    opacity: 0;
    animation: confeti-disparo .8s ease-out forwards;
}
.badge-exito .confeti:nth-child(2) { --x: -42px; --y: -34px; background: var(--lima); animation-delay: .05s; }
.badge-exito .confeti:nth-child(3) { --x: 10px;  --y: -50px; background: var(--bs-primary); animation-delay: .12s; }
.badge-exito .confeti:nth-child(4) { --x: 44px;  --y: -30px; background: var(--lima); animation-delay: .02s; }
.badge-exito .confeti:nth-child(5) { --x: 48px;  --y: 14px;  background: var(--verde-oscuro); animation-delay: .16s; }
.badge-exito .confeti:nth-child(6) { --x: 26px;  --y: 46px;  background: var(--bs-primary); animation-delay: .08s; }
.badge-exito .confeti:nth-child(7) { --x: -24px; --y: 48px;  background: var(--lima); animation-delay: .14s; }
.badge-exito .confeti:nth-child(8) { --x: -48px; --y: 12px;  background: var(--verde-oscuro); animation-delay: .04s; }
.badge-exito .confeti:nth-child(9) { --x: -6px;  --y: -52px; background: var(--lima); animation-delay: .1s; }
@keyframes confeti-disparo {
    0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.4) rotate(260deg); opacity: 0; }
}


/* ---------------------------------------------------------------------------
   Contabilidad
   ---------------------------------------------------------------------------
   La sección se navega por su barra lateral, no volviendo al menú de arriba, y
   sus tablas se leen como un libro: columnas de números alineadas, sin rayado
   que compita con las filas de subtotal.
*/

/* La lateral acompaña al informe mientras se hace scroll: en un balance largo,
   perder la navegación al bajar obliga a subir de nuevo para cambiar de módulo. */
.contabilidad-menu {
    position: sticky;
    top: 1rem;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}
.contabilidad-menu .list-group-item {
    border: 0;
    padding: .55rem .75rem;
    font-size: .925rem;
}
.contabilidad-menu .list-group-item.active {
    font-weight: 600;
}

/* El grupo plegado de la lateral. El summary se ve igual que los títulos de los
   otros grupos —es un título más, no un botón—, y solo una flecha pequeña
   avisa de que esconde algo. Se quita el triángulo nativo porque cada navegador
   lo pinta distinto y no se alinea con el texto en versalitas. */
.contabilidad-menu-grupo > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.contabilidad-menu-grupo > summary::-webkit-details-marker {
    display: none;
}
.contabilidad-menu-grupo > summary::after {
    content: "";
    width: .4rem;
    height: .4rem;
    margin-right: .25rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.contabilidad-menu-grupo[open] > summary::after {
    transform: rotate(45deg);
}
.contabilidad-menu-grupo > summary:hover {
    color: var(--bs-body-color) !important;
}

/* Cifras que se comparan de un vistazo: los dígitos tienen que caer en la misma
   columna aunque cambie el número, y por eso van en cifras tabulares. */
.libro-tabla {
    font-variant-numeric: tabular-nums;
}
.libro-tabla td,
.libro-tabla th {
    padding: .35rem .5rem;
}

/* La columna "Pasó por caja" del diario y el aviso que la explica, que solo
   hacen falta en el asiento que mezcla dinero con lo que no lo es. La marca va
   en el bloque que los envuelve y no celda por celda: así el JavaScript los
   destapa quitando UNA clase, y no tiene que recorrer las filas cada vez que se
   agrega una línea. */
.sin-efectivo .col-efectivo {
    display: none;
}

/* Imprimir un estado financiero es media razón por la que existe la sección, y
   con esto "Guardar como PDF" del navegador basta: no hace falta generar el PDF
   por código. Se va todo lo que no es el informe. */
@media print {
    .no-imprimir,
    .navbar,
    footer,
    .contabilidad-menu,
    .pagination {
        display: none !important;
    }
    .container {
        max-width: none;
        width: 100%;
    }
    /* Bootstrap deja las tablas transparentes al imprimir y los encabezados de
       sección salían en blanco sobre blanco. */
    .table-light,
    .card-header {
        background-color: #f1f3f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .card {
        border: 1px solid #dee2e6 !important;
        break-inside: avoid;
    }
    a {
        text-decoration: none;
        color: inherit;
    }
}

/* Ficha rápida del cliente: panel lateral de base.html (#ficha-cliente). */
#ficha-cliente {
    --bs-offcanvas-width: 380px;
    max-width: 100%;
}
.ficha-bloque {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--borde);
}
/* El pie de la ficha ya trae su propia línea arriba. */
.ficha-bloque:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
}
.ficha-etiqueta {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: .4rem;
}
.ficha-valor {
    font-size: 1.05rem;
    color: var(--tinta);
    margin-bottom: .6rem;
}
.enlace-ficha {
    color: inherit;
    text-decoration: underline dotted var(--borde-fuerte);
    text-underline-offset: 3px;
}
.enlace-ficha:hover {
    color: var(--bs-primary);
    text-decoration-color: currentColor;
}
[data-copiar].copiado {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ---- Delivery (Pendientes) -------------------------------------------- */
.mapa-ruta {
    height: 320px;
    border-radius: var(--r-lg);
    border: 1px solid var(--borde);
    overflow: hidden;
    /* Debajo del navbar fijo y de los menús de Bootstrap. */
    z-index: 0;
    position: relative;
    display: block;
    width: 100%;
}
@media (min-width: 992px) {
    .mapa-ruta { height: 420px; }
}
.marcador-ruta span,
.parada-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.marcador-ruta span {
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(13, 31, 22, .35);
}
.marcador-ruta.oficina span {
    background: var(--verde-oscuro);
}
.parada {
    scroll-margin-top: 90px;
}
.mover-parada .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    border-radius: 50%;
}
.parada-factura {
    border-top: 1px solid var(--borde);
}
.min-w-0 {
    min-width: 0;
}
/* En celular el cobro de cada factura ocupa su propio renglón, igual que en
   la tabla de Por entregar (.tabla-movil .mv-cobro). */
@media (max-width: 767.98px) {
    .parada-acciones {
        flex: 1 0 100%;
    }
    .parada .mv-cobro {
        flex: 1 0 100%;
        flex-wrap: wrap;
    }
    .parada .mv-cobro > select,
    .parada .mv-cobro > input {
        flex: 1 1 0;
        min-width: 0;
    }
    .parada .mv-cobro > button {
        flex: 1 0 100%;
    }
}

/* Acciones de Por entregar: en escritorio pasan a un segundo renglón dentro
   de su celda en vez de ensanchar la tabla más allá de la pantalla; en
   celular la envoltura ocupa todo el pie de la tarjeta. */
.acciones-fila .mv-cobro {
    flex-wrap: wrap;
}
/* En tableta la tabla no cabe con todo: la fecha de emisión sobra al lado de
   los días esperando. En celular sí se ve, dentro de la tarjeta. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .solo-pantalla-ancha { display: none; }
}
@media (max-width: 767.98px) {
    .tabla-movil .acciones-fila {
        flex: 1 0 100%;
    }
}
/* Interruptor de delivery junto al nombre del cliente en Por entregar: ahí no
   le quita ancho a la columna de cobro. */
.toggle-delivery {
    font-size: .72rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    line-height: 1.3;
}
/* Con la pestaña Delivery ya son cuatro: en celular van en una sola línea, más
   juntas, y si aun así no caben se deslizan en vez de saltar de renglón. */
@media (max-width: 575.98px) {
    .pendientes-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .pendientes-tabs::-webkit-scrollbar { display: none; }
    .pendientes-tabs .nav-link {
        padding: .5rem .4rem;
        font-size: .85rem;
        white-space: nowrap;
    }
}