/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════
   FloMar — hoja de marca de las tres aplicaciones de celular (mayorista, preventistas, cadetes).

   ⭐ FUENTE ÚNICA. Este archivo vive en Flomar.Compartido/marca/ y cada aplicación se lo copia a su wwwroot en
   el build. Antes cada una tenía su propio :root y ya habían derivado: vendedor.css usaba un dorado (#dcc187) y
   un celeste (#1496ac) que NO son los de la marca, y ni coincidía con las otras dos. Con tres copias, la que se
   arregla es una sola.

   ── Qué NO es esto ──
   No es la hoja de la tienda. La tienda es una vidriera: se mira en una computadora, con aire y fotos grandes.
   Estas tres son HERRAMIENTAS DE TRABAJO: se usan con una mano, en la calle o en el mostrador, con el celular
   que cada uno tenga. Comparten la identidad —el pez, el navy, el dorado, Fraunces e Inter— y cambian la
   ergonomía: más contraste, botones altos, listas densas y números alineados.

   ── Decisiones que parecen detalles y no lo son ──
   · Las fuentes se sirven DESDE ACÁ, no del CDN de Google. Una aplicación offline que trae la fuente de
     internet la pierde justo cuando el cadete no tiene señal, y encima es una dependencia de un tercero
     dentro de producción. Son 120 KB las dos, en variable (un archivo cubre todos los pesos).
   · Los campos de texto van en 16px COMO MÍNIMO. Con menos, iOS hace zoom solo al enfocarlos y la pantalla
     salta de lugar; con 16 no. Es la diferencia entre "anda" y "no se puede usar" en un iPhone.
   · Todo lo que se toca mide 44px de alto. Es el mínimo que un dedo acierta sin errar.
   · Modo claro solamente, a propósito: son herramientas de exterior y de día, donde lo que hace falta es
     contraste. Un modo oscuro a medias sería peor que no tenerlo.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── Las fuentes de la marca, locales ─────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Fraunces';
    src: url('fuentes/fraunces-var-latin.woff2') format('woff2-variations');
    font-weight: 500 700;
    font-display: swap;                 /* el texto se ve enseguida con la de respaldo y después cambia */
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('fuentes/inter-var-latin.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
    font-style: normal;
}

/* ─── Los colores y las medidas de la marca ────────────────────────────────────────────────────────────── */
:root {
    /* Identidad, igual que la tienda: si acá se corre un tono, las cuatro webs dejan de parecer la misma. */
    --fm-navy: #0e2a47;
    --fm-navy-deep: #0a2038;
    --fm-brand: #4f76a8;                /* el azul con el que se interactúa */
    --fm-brand-deep: #3a5c88;
    --fm-brand-soft: #4f76a814;
    --fm-brand-tint: #eaf1f8;
    --fm-gold: #c39a4d;                 /* el acento que dice FloMar; se usa POCO y por eso se nota */
    --fm-gold-soft: #c39a4d1e;
    --fm-teal: #1496ac;                 /* el "mar" del logo; sólo para el wordmark */

    /* Fondos y texto */
    --fm-bg: #f4f6f8;
    --fm-panel: #ffffff;
    --fm-panel-soft: #f7f9fb;
    --fm-ink: #122234;
    --fm-muted: #5b6b7d;
    --fm-faint: #93a1b2;
    --fm-line: #e6ecf3;
    --fm-line2: #d5dfeb;

    /* Semánticos: son estado, no acento. Nunca se usan como color de marca. */
    --fm-green: #16a672;
    --fm-green-soft: #e8f7f1;
    --fm-red: #cf4d46;
    --fm-red-soft: #fdeceb;
    --fm-amber: #8a6d1e;
    --fm-amber-soft: #fff8e6;
    --fm-amber-line: #f0d99b;

    --fm-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --fm-ui: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --fm-r: 12px;                       /* radio de los controles */
    --fm-r-lg: 16px;                    /* radio de las tarjetas */
    --fm-toque: 44px;                   /* alto mínimo de lo que se toca */
    --fm-sh: 0 1px 2px rgba(14,42,71,.05), 0 3px 10px rgba(14,42,71,.05);
    --fm-sh-lg: 0 10px 30px rgba(14,42,71,.10);
    --fm-ancho: 640px;                  /* en tablet y computadora no se estira: se centra */

    /* El alto real del encabezado: 10px arriba + 44px de contenido + 10px abajo, más el notch.
       Hace falta como token porque la pantalla de entrar va DEBAJO del encabezado y pedía 100dvh: la página
       terminaba midiendo 100dvh + 64px y en TODAS las aplicaciones sobraba esa altura de scroll, con la
       tarjeta corrida hacia arriba. */
    /* 64 del encabezado + 2 del filete dorado del borde inferior. Si se cambia el filete hay que cambiar
       esto: con 64 la barra de filtros se pegaba 2 px MÁS ARRIBA y le tapaba el dorado al hacer scroll —
       justo el detalle de marca que el filete viene a poner. */
    --fm-top-alto: calc(66px + env(safe-area-inset-top));
}

/* ─── Base ─────────────────────────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ⭐ El atributo `hidden` tiene que ganar SIEMPRE.
   El navegador lo aplica con `[hidden] { display: none }`, que es un selector de atributo y por lo tanto pierde
   contra cualquier clase que declare `display`. Así, `.fm-top-btn { display: inline-flex }` dejaba el botón del
   carrito visible en la pantalla de entrar aunque el código lo escondiera. Es una trampa que vuelve cada vez
   que se le pone `display` a una clase, así que se corta de raíz acá. */
[hidden] { display: none !important; }

html {
    /* Que el rebote del scroll no dispare el "recargar tirando hacia abajo": en una PWA eso rehace la pantalla
       y se lleva puesto lo que la persona venía cargando. */
    overscroll-behavior-y: contain;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fm-bg);
    color: var(--fm-ink);
    font-family: var(--fm-ui);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;                 /* dvh y no vh: con la barra del navegador vh miente en el celular */
}

h1, h2, h3 {
    font-family: var(--fm-display);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--fm-navy);
    margin: 0 0 .5rem;
    text-wrap: balance;
}

h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

:focus-visible { outline: 2px solid var(--fm-brand); outline-offset: 2px; }

/* Los números que van en columna se alinean (precios, kilos, cantidades). */
.fm-num, input[type="number"] { font-variant-numeric: tabular-nums; }

/* ─── Encabezado con la marca ──────────────────────────────────────────────────────────────────────────── */
.fm-top {
    position: sticky;
    top: 0;
    z-index: 20;
    /* ⭐ El alto se FIJA, no se deja al contenido. `--fm-top-alto` vale 66 y de ahí cuelgan la barra de
       filtros (que se pega justo debajo) y el alto de la pantalla de entrar. Pero el encabezado sólo medía
       66 en el mayorista CON el carrito visible: en preventistas, en cadetes y en los tres logins medía 55,6,
       así que la barra quedaba 10 px más abajo y por ese hueco se veían pasar los renglones de la lista. */
    min-height: var(--fm-top-alto);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--fm-navy);
    color: #fff;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));   /* debajo del notch, no atrás */
    box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(10,32,56,.35);
}

.fm-top .fm-logo { height: 34px; width: auto; flex: 0 0 auto; display: block; }

/* El wordmark: texto de verdad en Fraunces, no una imagen. Así usa la fuente de la marca, se lee con el
   lector de pantalla y no se pixela en ninguna densidad. */
.fm-marca { display: flex; flex-direction: column; line-height: 1.02; min-width: 0; }

.fm-marca b {
    font-family: var(--fm-display);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -.01em;
    color: #fff;
    white-space: nowrap;
}

.fm-marca b i { color: #7fd4e4; font-style: normal; }   /* el "mar", como en el logo */

.fm-marca span {
    font-size: 8px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fm-gold);
    font-weight: 700;
    white-space: nowrap;
}

.fm-spacer { flex: 1; }

/* Lo que va a la derecha del encabezado (conexión, cola, carrito) */
.fm-top-btn {
    /* 44px también acá: es un botón que se toca, y el encabezado queda en 64px, que es normal. */
    min-height: var(--fm-toque);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    border-radius: 999px;
    padding: 0 12px;
    font-family: var(--fm-ui);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.fm-top-btn:active { background: rgba(255,255,255,.2); }

.fm-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fm-gold);
    color: #3d2e08;
}

.fm-net { font-size: 15px; line-height: 1; }
.fm-net.on { color: #6fe0a6; }
.fm-net.off { color: #ff9a9a; }

/* ─── Cuerpo ───────────────────────────────────────────────────────────────────────────────────────────── */
.fm-main {
    max-width: var(--fm-ancho);
    margin: 0 auto;
    padding: 14px 14px calc(28px + env(safe-area-inset-bottom));
}

.fm-card {
    background: var(--fm-panel);
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-r-lg);
    padding: 16px;
    box-shadow: var(--fm-sh);
    margin-bottom: 12px;
}

.fm-muted { color: var(--fm-muted); font-size: 13px; }
.fm-faint { color: var(--fm-faint); font-size: 12px; }

/* Un renglón de lista (producto, cliente, parada) */
.fm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--fm-line);
}

.fm-row:last-child { border-bottom: none; }
.fm-row .fm-nom { flex: 1; min-width: 0; }
.fm-row .fm-nom b { display: block; font-size: 14.5px; font-weight: 600; color: var(--fm-navy); }
.fm-row .fm-nom span { display: block; color: var(--fm-muted); font-size: 12px; margin-top: 1px; }

/* ─── Botones ──────────────────────────────────────────────────────────────────────────────────────────── */
.fm-btn {
    min-height: var(--fm-toque);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--fm-line2);
    border-radius: var(--fm-r);
    background: #fff;
    color: var(--fm-navy);
    font-family: var(--fm-ui);
    font-size: 15px;
    font-weight: 600;
    padding: 0 16px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

.fm-btn:active { background: var(--fm-panel-soft); }
.fm-btn:disabled { opacity: .5; cursor: default; }

.fm-btn-primary { background: var(--fm-navy); border-color: var(--fm-navy); color: #fff; }
.fm-btn-primary:active { background: var(--fm-navy-deep); }
.fm-btn-primary:disabled { background: var(--fm-navy); }

.fm-btn-ok { background: var(--fm-green); border-color: var(--fm-green); color: #fff; }
.fm-btn-mal { background: #fff; border-color: var(--fm-red); color: var(--fm-red); }
.fm-btn-block { width: 100%; }
.fm-btn-sm { min-height: 36px; font-size: 13.5px; padding: 0 12px; }

/* ─── Campos ───────────────────────────────────────────────────────────────────────────────────────────── */
.fm-field { margin-bottom: 12px; }

.fm-field label,
.fm-label {
    display: block;
    font-size: 11px;
    color: var(--fm-muted);
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fm-input, .fm-field input, .fm-field select, .fm-field textarea {
    width: 100%;
    min-height: var(--fm-toque);
    border: 1px solid var(--fm-line2);
    border-radius: var(--fm-r);
    padding: 10px 13px;
    /* ⚠️ 16px: con menos, iOS hace zoom al enfocar y la pantalla se corre de lugar. No bajarlo. */
    font-size: 16px;
    font-family: var(--fm-ui);
    color: var(--fm-ink);
    background: #fff;
}

.fm-input:focus, .fm-field input:focus, .fm-field select:focus, .fm-field textarea:focus {
    outline: none;
    border-color: var(--fm-brand);
    box-shadow: 0 0 0 3px var(--fm-brand-soft);
}

/* El buscador de las listas */
.fm-buscar {
    width: 100%;
    min-height: var(--fm-toque);
    border: 1px solid var(--fm-line2);
    border-radius: 999px;
    padding: 10px 16px 10px 40px;
    font-size: 16px;
    font-family: var(--fm-ui);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7d' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4.2-4.2'/></svg>") no-repeat 14px center;
    margin-bottom: 10px;
}

.fm-buscar:focus { outline: none; border-color: var(--fm-brand); box-shadow: 0 0 0 3px var(--fm-brand-soft); }

/* Cantidad: − [ 2 ] + */
.fm-cant { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.fm-cant button {
    width: var(--fm-toque);
    height: var(--fm-toque);
    border: 1px solid var(--fm-line2);
    background: #fff;
    color: var(--fm-navy);
    border-radius: 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.fm-cant button:active { background: var(--fm-brand-tint); border-color: var(--fm-brand); }

.fm-cant input {
    width: 62px;
    height: var(--fm-toque);
    text-align: center;
    border: 1px solid var(--fm-line2);
    border-radius: 10px;
    font-size: 16px;
    font-family: var(--fm-ui);
    font-variant-numeric: tabular-nums;
    background: #fff;
    color: var(--fm-ink);
}

/* ─── Avisos ───────────────────────────────────────────────────────────────────────────────────────────── */
.fm-aviso {
    border-radius: var(--fm-r);
    padding: 10px 13px;
    font-size: 13.5px;
    margin-bottom: 12px;
    border: 1px solid;
}

.fm-aviso.info { background: var(--fm-brand-tint); border-color: #bcd8f5; color: var(--fm-navy); }
.fm-aviso.ok { background: var(--fm-green-soft); border-color: #b6e6d3; color: #0d6b4a; }
.fm-aviso.mal { background: var(--fm-red-soft); border-color: #f3c3c0; color: #93312c; }
.fm-aviso.ojo { background: var(--fm-amber-soft); border-color: var(--fm-amber-line); color: var(--fm-amber); }

/* ─── Entrar (la primera pantalla, y la que más se ve) ─────────────────────────────────────────────────── */
.fm-login {
    /* Descontando el encabezado: ver --fm-top-alto. */
    min-height: calc(100dvh - var(--fm-top-alto));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
    /* Un degradado sutil desde el navy: da profundidad sin tapar el formulario. */
    background:
        radial-gradient(1200px 420px at 50% -140px, #16385c 0%, rgba(22,56,92,0) 70%),
        var(--fm-bg);
}

.fm-login-marca { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.fm-login-marca img { height: 62px; width: auto; }

.fm-login-marca b {
    font-family: var(--fm-display);
    font-weight: 600;
    font-size: 34px;
    letter-spacing: -.02em;
    color: var(--fm-navy);
    line-height: 1;
}

.fm-login-marca b i { color: var(--fm-teal); font-style: normal; }

.fm-login-marca span {
    font-size: 9.5px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--fm-gold);
    font-weight: 700;
}

/* Qué aplicación es: el único lugar donde las tres se distinguen de un vistazo. */
.fm-login-que {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fm-brand-deep);
    background: var(--fm-brand-soft);
    border: 1px solid var(--fm-line2);
    border-radius: 999px;
    padding: 5px 14px;
    margin-top: 2px;
}

.fm-login-card {
    width: 100%;
    max-width: 380px;
    background: var(--fm-panel);
    border: 1px solid var(--fm-line);
    border-radius: 20px;
    padding: 22px;
    box-shadow: var(--fm-sh-lg);
}

.fm-login-card h2 { font-size: 1.2rem; margin-bottom: 4px; }
.fm-login-card .fm-muted { margin: 0 0 16px; }
.fm-login-pie { margin-top: 16px; text-align: center; font-size: 12px; color: var(--fm-faint); }

/* ─── Barra fija de abajo (el total, el botón de guardar) ───────────────────────────────────────────────── */
.fm-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(1.4) blur(8px);
    border-top: 1px solid var(--fm-line2);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(14,42,71,.08);
}

.fm-barra .fm-tot { flex: 1; min-width: 0; line-height: 1.15; }
.fm-barra .fm-tot b { display: block; font-size: 19px; color: var(--fm-navy); font-variant-numeric: tabular-nums; }
.fm-barra .fm-tot span { font-size: 12px; color: var(--fm-muted); }

/* Con barra fija abajo, el contenido necesita lugar para no quedar tapado. */
.fm-con-barra { padding-bottom: 92px; }

/* ─── Vacío y cargando ─────────────────────────────────────────────────────────────────────────────────── */
.fm-vacio { text-align: center; color: var(--fm-muted); padding: 44px 18px; }
.fm-vacio .fm-icono { font-size: 40px; display: block; margin-bottom: 8px; opacity: .75; }

.fm-cargando { text-align: center; color: var(--fm-muted); padding: 52px 18px; font-size: 14px; }

.fm-cargando::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 12px;
    border: 3px solid var(--fm-line2);
    border-top-color: var(--fm-brand);
    border-radius: 50%;
    animation: fm-girar .8s linear infinite;
}

@keyframes fm-girar { to { transform: rotate(360deg); } }

/* Quien pidió menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .fm-cargando::before { animation-duration: 2.4s; }
    * { transition-duration: .01ms !important; }
}

/* ─── En pantalla ancha no se estira: se centra y respira ───────────────────────────────────────────────── */
@media (min-width: 700px) {
    .fm-top { padding-left: max(14px, calc((100vw - var(--fm-ancho)) / 2)); padding-right: max(14px, calc((100vw - var(--fm-ancho)) / 2)); }
    .fm-barra { padding-left: max(14px, calc((100vw - var(--fm-ancho)) / 2)); padding-right: max(14px, calc((100vw - var(--fm-ancho)) / 2)); }
}

/* ── Ojito para ver la clave ─────────────────────────────────────────────────────────────────────────
   Edge dibuja uno propio y Chrome no, así que en la computadora parecía resuelto y en el celular —donde
   trabajan el cadete y el preventista— no había ninguno. Se oculta el nativo para que no queden DOS. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

.fm-ojito-caja { position: relative; display: block; }
.fm-ojito-caja > input { width: 100%; padding-right: 46px; }

.fm-ojito {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;          /* 44 px: se toca con el pulgar, es la medida del resto de la app */
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--fm-muted, #6b7a86); border-radius: 8px;
}
.fm-ojito:hover { color: var(--fm-navy, #12314b); }
.fm-ojito:focus-visible { outline: 2px solid var(--fm-teal, #1aa3bd); outline-offset: -2px; }

/* ══════════════════════════════════════════════════════════════════════════
   VISTAS: barra de filtros, lista / cuadrícula / detalle, imágenes y mapa

   Va en la hoja compartida y no en cada app porque las tres muestran lo mismo:
   una lista de cosas que hay que encontrar y elegir. Con el CSS repetido en
   cada una, a la tercera semana cada app tiene su propia tarjeta.

   Pensado para el DEDO primero: lo que se toca mide 44 px, los campos van en
   16 px (con menos, iOS hace zoom solo al enfocarlos y la pantalla salta), y
   la cuadrícula arranca en 2 columnas en un celular de 360 px.
   ══════════════════════════════════════════════════════════════════════════ */

/* El contenido no se estira en pantallas grandes… salvo la cuadrícula, que es
   justamente donde el ancho SIRVE: en una computadora entran 6 productos por
   fila en vez de 2. */
.fm-main--ancho { max-width: 1180px; }

/* ── Barra de herramientas: buscar + filtrar + cambiar de vista ───────────── */
.fm-tools {
    position: sticky;
    /* 🔴 Debajo del encabezado, no encima. Los dos son sticky y .fm-top también está en top:0 con
       z-index 20: con el mismo valor gana el que va después en el documento, o sea ésta, y al bajar
       la pantalla tapaba el logo y el carrito. Medido: 64 px de solapamiento, y un toque en el
       carrito caía en un botón de cambiar vista. */
    top: var(--fm-top-alto);
    z-index: 15;
    background: var(--fm-bg);
    padding: .55rem 0 .5rem;
    margin-bottom: .2rem;
}
.fm-tools-fila { display: flex; gap: .5rem; align-items: center; }

.fm-buscar {
    flex: 1; min-width: 0;
    height: var(--fm-toque);
    /* Sin esto hereda el `margin-bottom:10px` de los campos de las apps: la fila medía 54 px en vez de 44 y
       el buscador quedaba 4 px más arriba que los botones de vista. */
    margin: 0;
    font-size: 16px;                    /* 16 o iOS hace zoom al enfocar */
    font-family: var(--fm-ui);
    color: var(--fm-ink);
    background: var(--fm-panel);
    border: 1px solid var(--fm-line2); border-radius: var(--fm-r);
    padding: 0 .7rem;
}
.fm-buscar:focus { outline: none; border-color: var(--fm-brand); box-shadow: 0 0 0 3px var(--fm-brand-soft); }
.fm-buscar::placeholder { color: var(--fm-faint); }

/* Cambiar de vista. Iconos y no texto: se usa de reojo y el texto ocuparía
   un tercio de la barra en un celular. */
.fm-vistas { display: flex; flex: 0 0 auto; background: var(--fm-panel); border: 1px solid var(--fm-line2); border-radius: var(--fm-r); overflow: hidden; }
.fm-vistas button {
    width: 46px; height: var(--fm-toque);
    display: grid; place-items: center;
    background: transparent; border: 0; cursor: pointer;
    color: var(--fm-muted); font-size: 17px; line-height: 1;
}
.fm-vistas button + button { border-left: 1px solid var(--fm-line); }
.fm-vistas button.on { background: var(--fm-brand); color: #fff; }

/* Chips de filtro. Se desplazan de costado en el celular en vez de apilarse
   en cuatro renglones y comerse la pantalla donde se elige. */
.fm-chips {
    display: flex; gap: .4rem; overflow-x: auto; padding: .5rem .1rem .1rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fm-chips::-webkit-scrollbar { display: none; }
.fm-chip {
    /* 44 y no 36: en la app del cadete estos chips son la navegación de la vuelta y se tocan caminando. */
    flex: 0 0 auto; height: var(--fm-toque); padding: 0 .95rem;
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--fm-panel); color: var(--fm-muted);
    border: 1px solid var(--fm-line2); border-radius: 99px;
    font: 600 13px/1 var(--fm-ui); white-space: nowrap; cursor: pointer;
}
.fm-chip.on { background: var(--fm-brand); border-color: var(--fm-brand); color: #fff; }
/* Sin opacidad: con .75 el contador quedaba en 3.3:1 sobre blanco, y estas apps se usan al sol.
   El contraste se baja con un color propio, que se puede elegir, y no atenuando el texto. */
.fm-chip b { font-weight: 700; font-size: 12px; color: var(--fm-muted); }
.fm-chip.on b { color: #fff; }

/* ── Imagen, con su reemplazo cuando no hay ──────────────────────────────── */
.fm-img {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    background: var(--fm-brand-tint);
    display: grid; place-items: center; overflow: hidden;
}
.fm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto no se deja un hueco gris: va el pez de la marca, apagado. El
   catálogo de un local recién conectado no tiene una sola imagen cargada. */
.fm-img--vacia::after { content: '🐟'; font-size: 2rem; opacity: .35; line-height: 1; }
.fm-img-tag {
    position: absolute; left: .4rem; top: .4rem;
    background: rgba(255,255,255,.94); color: var(--fm-ink);
    border-radius: 99px; padding: .15rem .5rem;
    font: 700 11px/1.4 var(--fm-ui);
}
.fm-img-tag--rojo { background: var(--fm-red); color: #fff; }
.fm-img-tag--ambar { background: var(--fm-amber-soft); color: var(--fm-amber); border: 1px solid var(--fm-amber-line); }

/* ── Cuadrícula ──────────────────────────────────────────────────────────── */
.fm-grid {
    display: grid; gap: .6rem;
    /* 140 y no 150: con 150 el celular de 320 px —el más chico que se sigue usando— quedaba en UNA columna,
       con tarjetas de 400 px de alto y una sola visible por pantalla. Con 140 entran dos: 2x140 + 9.6 de
       separación = 289.6, y quedan 292 útiles. A 375 px sigue dando dos, que es lo que se quería. */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (min-width: 700px)  { .fm-grid { gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
@media (min-width: 1000px) { .fm-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

.fm-tile {
    background: var(--fm-panel); border: 1px solid var(--fm-line);
    border-radius: var(--fm-r-lg); overflow: hidden;
    box-shadow: var(--fm-sh);
    display: flex; flex-direction: column;
}
.fm-tile-cuerpo { padding: .5rem .6rem .6rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.fm-tile-nom { font: 600 14px/1.25 var(--fm-ui); color: var(--fm-ink); }
.fm-tile-sub { font: 500 12px/1.3 var(--fm-ui); color: var(--fm-muted); }
.fm-tile-pre { font: 700 15px/1.2 var(--fm-ui); color: var(--fm-brand-deep); font-variant-numeric: tabular-nums; }
.fm-tile-pie { margin-top: auto; padding-top: .45rem; }
.fm-tile.apagada { opacity: .55; }
.fm-tile.apagada .fm-img img { filter: grayscale(1); }

/* ── Detalle: se desliza desde abajo en el celular, ventana en la computadora ── */
.fm-sheet-fondo {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(10,32,56,.45);
    display: flex; align-items: flex-end; justify-content: center;
}
.fm-sheet {
    background: var(--fm-panel); width: 100%; max-width: 560px;
    border-radius: var(--fm-r-lg) var(--fm-r-lg) 0 0;
    max-height: 88dvh; overflow-y: auto;
    box-shadow: var(--fm-sh-lg);
    padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 700px) {
    .fm-sheet-fondo { align-items: center; }
    .fm-sheet { border-radius: var(--fm-r-lg); max-height: 86dvh; }
}
.fm-sheet-top {
    position: sticky; top: 0; background: var(--fm-panel); z-index: 2;
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .9rem; border-bottom: 1px solid var(--fm-line);
}
.fm-sheet-top h3 { margin: 0; font: 700 16px/1.25 var(--fm-ui); color: var(--fm-ink); flex: 1; }
.fm-sheet-cerrar {
    width: var(--fm-toque); height: var(--fm-toque); flex: 0 0 auto;
    display: grid; place-items: center; font-size: 20px;
    background: transparent; border: 0; color: var(--fm-muted); cursor: pointer;
}
.fm-sheet-cuerpo { padding: .9rem; display: flex; flex-direction: column; gap: .7rem; }
.fm-sheet-foto { margin: -.9rem -.9rem 0; }
/* ⚠️ CUADRADA, no 16/9. La ilustración tiene viewBox 0 0 200 200 y lleva el NOMBRE del producto en una
   franja abajo de todo. En 16/9 el `cover` recortaba 22% arriba y 22% abajo: se comía el marco circular y
   la franja del nombre ENTERA. La miniatura de la tarjeta se veía bien porque usa la base 1/1 — esa era la
   pista de que el problema era la proporción del modal y no el `cover`.
   No se toca `object-fit`: a 1/1 da igual, y dejarlo en cover mantiene el comportamiento correcto para
   cuando las fotos reales del ERP reemplacen a las ilustraciones. */
.fm-sheet-foto .fm-img { aspect-ratio: 1 / 1; }

/* En pantalla grande la foto no se estira a 560px: se centra a un tamaño razonable. */
@media (min-width: 700px) {
    .fm-sheet-foto .fm-img {
        max-width: 320px;
        margin: 0 auto;
        border-radius: var(--fm-r);
    }
}

/* El 0 gris del cuadro de cantidad. `opacity: 1` es necesario: Firefox le pone opacidad propia al
   placeholder y queda casi invisible. */
.cant input::placeholder { color: var(--fm-faint); opacity: 1; }

/* Renglón de dato: etiqueta a la izquierda, valor a la derecha. */
.fm-dato { display: flex; justify-content: space-between; gap: 1rem; font: 500 14px/1.4 var(--fm-ui); }
.fm-dato > span { color: var(--fm-muted); flex: 0 0 auto; }
.fm-dato > b { color: var(--fm-ink); text-align: right; min-width: 0; }

/* ── Mapa ────────────────────────────────────────────────────────────────
   Se sacaron las reglas del mapa embebido: NINGUNA app lo usa. El cadete abre la aplicación de mapas del
   celular con un enlace, porque de los clientes tenemos la dirección en TEXTO y no coordenadas, y un mapa
   incrustado necesita lat/long. Si algún día hay coordenadas, se vuelven a poner. */

/* ── Estado vacío ────────────────────────────────────────────────────────── */
.fm-vacio { text-align: center; padding: 2.2rem 1rem; color: var(--fm-muted); }
.fm-vacio .ic { font-size: 2.6rem; line-height: 1; opacity: .5; display: block; margin-bottom: .5rem; }
.fm-vacio b { display: block; color: var(--fm-ink); font: 700 15px/1.4 var(--fm-ui); margin-bottom: .2rem; }
.fm-vacio span { font-size: 13px; }

/* Los controles de cantidad DENTRO de una tarjeta de la cuadrícula.
   ⚠️ La tarjeta mide 141 px en un celular de 320: con el input a 50 px, los botones se encogían a 38
   (medido a 360 px, el Android más común) y a 41.8 a 375. Es la regresión que ya se había corregido una
   vez, cuando estaban en 34. Acá el input cede y los botones no: el que se toca es el botón. */
.fm-tile .cant { display: flex; gap: 4px; width: 100%; }
.fm-tile .cant button {
    flex: 0 0 var(--fm-toque);
    width: var(--fm-toque); height: var(--fm-toque);
}
.fm-tile .cant input {
    /* ⚠️ 44 de mínimo. Al poner los botones en 44 fijos nadie midió lo que sobraba: a 320 px al campo le
       quedaban 21 px útiles y el mayorista no podía leer «12,5» después de escribirlo. Si no entra, la fila
       baja de renglón (`flex-wrap` abajo) en vez de aplastar el campo. */
    flex: 1 1 44px; min-width: 44px; width: auto;
    height: var(--fm-toque);
    font-size: 16px;                    /* 16 o iOS hace zoom solo al enfocar */
    text-align: center;
}
.fm-tile .cant { flex-wrap: wrap; row-gap: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   PASE DE ESTÉTICA (2026-08-02)

   Las tres apps ya tenían la marca puesta y funcionaban. Lo que les faltaba era
   CARÁCTER: todo pesaba lo mismo, la tipografía de la marca aparecía sólo en el
   logo, y nada respondía al toque.

   Cuatro cosas, en orden de cuánto se notan:
     1. los importes en Fraunces — la letra de la marca, donde más se mira
     2. profundidad y respuesta al tocar
     3. el dorado usado con intención (poco, y por eso se nota)
     4. ritmo: menos ruido de bordes, más aire
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. La plata, en la letra de la marca ────────────────────────────────────
   Fraunces estaba sólo en el wordmark. Los importes son lo que más se mira en
   las tres apps —el precio, lo que hay que cobrar, el total— y estaban en la
   misma Inter que todo lo demás, así que no se distinguían de un dato más.

   ⚠️ Sólo donde el número está SOLO. En listas y tablas sigue Inter con
   `tabular-nums`, porque ahí lo que importa es que las cifras se alineen en
   columna, y Fraunces no tiene esa variante. */
.fm-plata, .fm-tile-pre {
    font-family: var(--fm-display);
    font-weight: 600;
    letter-spacing: -.015em;
    font-feature-settings: "tnum" 0;
}

.fm-tile-pre { font-size: 17px; color: var(--fm-navy); }
.fm-tile-pre .fm-tile-sub {
    font-family: var(--fm-ui);
    font-weight: 500;
    letter-spacing: 0;
}

/* El importe del detalle: el dato por el que se abrió la ficha.
   ⚠️ Se marca con una clase en vez de adivinar la posición con :first-child — arriba del primer dato va la
   foto, así que el selector por posición no aplicaba nunca y el precio quedaba igual que el resto. */
.fm-sheet .fm-dato b { font-size: 15px; }
/* Con el selector de una sola clase, la regla de arriba (.fm-sheet .fm-dato b) le ganaba en especificidad
   y el importe se quedaba en 15px aunque la letra sí cambiara. */
.fm-sheet .fm-dato b.fm-plata-gde { font-size: 21px; color: var(--fm-navy); line-height: 1.1; }

/* ── 2. Profundidad y respuesta ──────────────────────────────────────────────
   Nada se movía al tocarlo. En un celular, sin sombra de cursor, esa respuesta
   es la única confirmación de que el toque entró. */
.fm-tile {
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.fm-tile:active { transform: scale(.985); }

/* En la computadora hay puntero: la tarjeta se levanta al pasar por encima.
   `hover: hover` evita que en el celular quede el estado pegado después de tocar. */
@media (hover: hover) {
    .fm-tile:hover {
        box-shadow: var(--fm-sh-lg);
        border-color: var(--fm-line2);
        transform: translateY(-2px);
    }
}

.fm-chip { transition: background .15s ease, border-color .15s ease, color .15s ease; }
.fm-chip:active { transform: scale(.96); }
.fm-vistas button { transition: background .15s ease, color .15s ease; }

/* ── 3. El dorado, con intención ─────────────────────────────────────────────
   Es el color que dice FloMar. Se usa POCO y por eso se nota: un filete abajo
   del encabezado y el borde del panel de detalle. Nada más. */
.fm-top { border-bottom: 2px solid var(--fm-gold); }

/* El navy plano se ve barato en pantalla grande; un degradado apenas perceptible
   le da cuerpo sin llamar la atención. */
.fm-top {
    background: linear-gradient(180deg, #14355a 0%, var(--fm-navy) 100%);
}

.fm-sheet { border-top: 3px solid var(--fm-gold); }
@media (min-width: 700px) {
    /* En ventana la ficha flota: el filete va arriba igual, pero con las esquinas redondeadas. */
    .fm-sheet { border-top-left-radius: var(--fm-r-lg); border-top-right-radius: var(--fm-r-lg); }
}

/* El asa de la hoja deslizante. Es el gesto que todo el mundo ya conoce del
   celular, y su ausencia es de las cosas que hacen que una pantalla "se sienta"
   a medio hacer sin que uno sepa por qué. */
@media (max-width: 699px) {
    .fm-sheet::before {
        content: '';
        display: block;
        width: 38px; height: 4px;
        margin: 8px auto 0;
        border-radius: 99px;
        background: var(--fm-line2);
    }
    .fm-sheet-top { padding-top: .5rem; }
}

/* ── 4. Ritmo: menos ruido, más aire ─────────────────────────────────────────
   La foto llegaba al borde de la tarjeta y el nombre arrancaba pegado. Una línea
   suave la separa del texto sin sumar un borde más. */
.fm-tile .fm-img { border-bottom: 1px solid var(--fm-line); }
.fm-tile-cuerpo { padding: .55rem .65rem .65rem; gap: .2rem; }
.fm-tile-nom {
    /* Dos renglones como máximo: con nombres largos del sistema del cliente, la
       tarjeta crecía distinto en cada columna y la cuadrícula quedaba despareja. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    /* Los nombres los pone el ERP del cliente y muchos vienen sin espacios: sin esto, una sola palabra larga
       se cortaba al medio y sin puntos suspensivos (medido: 290 px de texto en 119 de caja a 320 px). */
    overflow-wrap: anywhere;
}

/* La etiqueta sobre la foto: legible sobre cualquier imagen. */
.fm-img-tag {
    box-shadow: 0 1px 3px rgba(10,32,56,.18);
    backdrop-filter: blur(2px);
}

/* El buscador con la lupa adentro: se reconoce sin leer el texto de ayuda. */
.fm-buscar {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a1b2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20.5 20.5l-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left .7rem center;
    background-size: 18px 18px;
    padding-left: 2.35rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* El estado vacío deja de ser un cartel gris: el ícono en el celeste de la marca. */
/* El ícono es un emoji, así que `color` no lo pinta: alcanza con no atenuarlo. */
.fm-vacio .ic { opacity: 1; }

/* ── La pantalla de entrar: es lo primero que se ve ─────────────────────────── */
.fm-login-marca img {
    /* Una sombra suave debajo del pez: lo despega del fondo sin recuadrarlo. */
    filter: drop-shadow(0 6px 14px rgba(14,42,71,.16));
}

/* La tarjeta del formulario, un poco más presente que el resto. */
.login .card, .v-login .v-card, .fm-login .fm-card {
    box-shadow: var(--fm-sh-lg);
    border-color: var(--fm-line2);
}

/* ─── Diálogos de la marca ──────────────────────────────────────────────────────────────────────────────
   Un <dialog> nativo, y no un div con position:fixed, por tres cosas que el navegador hace solo y que a mano
   salen mal: lo pone en la CAPA SUPERIOR (no depende de ningún z-index), ATRAPA EL FOCO adentro —el que
   navega con teclado o lector de pantalla no se va sin querer al fondo— y cierra con Escape.

   Reemplaza además a los confirm() del navegador, que muestran el dominio crudo («flomar.mayorista…dice»)
   y no se pueden vestir. */
.fm-dlg {
    border: none;
    padding: 0;
    background: var(--fm-panel);
    color: var(--fm-ink);
    font-family: var(--fm-ui);
    border-radius: var(--fm-r-lg);
    box-shadow: var(--fm-sh-lg);
    width: min(92vw, 460px);
    max-height: 88dvh;
    overflow: hidden;
    /* El filete dorado de la marca, arriba. Es el mismo detalle del encabezado. */
    border-top: 3px solid var(--fm-gold);
}

/* En el celular sube desde abajo y ocupa el ancho: es donde llega el pulgar. */
@media (max-width: 560px) {
    .fm-dlg {
        width: 100vw;
        max-width: 100vw;
        margin: 0 0 0 0;
        position: fixed;
        inset: auto 0 0 0;
        border-radius: var(--fm-r-lg) var(--fm-r-lg) 0 0;
        max-height: 92dvh;
    }
}

.fm-dlg::backdrop {
    background: rgba(14, 42, 71, .48);
    backdrop-filter: blur(2px);
}

/* ── El efecto de entrada y salida ──
   @starting-style dice desde dónde arranca al aparecer; allow-discrete deja que `display` participe de la
   transición, que es lo que permite que la SALIDA se vea (sin eso, el diálogo desaparece de golpe).
   `overlay` mantiene el diálogo en la capa superior mientras se va: sin él, en los navegadores que no lo
   soportan la salida se corta, que es una degradación aceptable. */
.fm-dlg {
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity .18s ease, transform .18s cubic-bezier(.2, .9, .3, 1),
                display .18s allow-discrete, overlay .18s allow-discrete;
}

.fm-dlg[open] {
    opacity: 1;
    transform: none;

    @starting-style {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
}

@media (max-width: 560px) {
    /* Desde abajo, como una hoja: es el gesto que la gente espera en el celular. */
    .fm-dlg { transform: translateY(14px); }
    .fm-dlg[open] {
        transform: none;
        @starting-style { transform: translateY(14px); }
    }
}

.fm-dlg::backdrop {
    opacity: 0;
    transition: opacity .18s ease, display .18s allow-discrete, overlay .18s allow-discrete;
}

.fm-dlg[open]::backdrop {
    opacity: 1;
    @starting-style { opacity: 0; }
}

/* ⚠️ Obligatorio: quien pidió menos movimiento no recibe movimiento. Se deja el desvanecido, que es
   información (algo apareció) y no decoración. */
@media (prefers-reduced-motion: reduce) {
    .fm-dlg, .fm-dlg[open] {
        transform: none;
        transition-duration: .01s;
    }
    .fm-dlg[open] { @starting-style { transform: none; } }
}

/* ── Las partes del diálogo ── */
.fm-dlg-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--fm-navy);
    color: #fff;
}

.fm-dlg-top b {
    flex: 1;
    min-width: 0;
    font-family: var(--fm-display);
    font-size: 1.06rem;
    font-weight: 600;
}

.fm-dlg-x {
    background: none;
    border: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    width: var(--fm-toque);
    height: var(--fm-toque);
    flex: 0 0 auto;
    cursor: pointer;
    opacity: .85;
}

.fm-dlg-x:active { opacity: 1; }

.fm-dlg-cuerpo {
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 14.5px;
    line-height: 1.5;
}

.fm-dlg-cuerpo p { margin: 0 0 10px; }
.fm-dlg-cuerpo p:last-child { margin-bottom: 0; }

.fm-dlg-pie {
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--fm-line);
    background: var(--fm-panel-soft);
}

.fm-dlg-pie .btn { flex: 1; margin-bottom: 0; }

/* El diálogo del visor ocupa casi toda la pantalla: adentro va un documento, no un cartel. */
.fm-dlg--ancho { width: min(96vw, 900px); }
.fm-dlg--ancho .fm-dlg-cuerpo { padding: 0; }
/* Un pie vacío no deja una franja gris colgando: se esconde solo si adentro no quedó nada visible. */
.fm-dlg-pie:not(:has(> :not([hidden]))) { display: none; }

/* El botón de la acción que destruye algo (salir con un pedido a medias, descartar). Rojo suave y no rojo
   pleno: tiene que distinguirse del otro, no gritar. */
.fm-btn-peligro {
    background: var(--fm-red);
    border-color: var(--fm-red);
    color: #fff;
}

.fm-btn-peligro:active { background: #b3403a; }

/* Un campo adentro de un diálogo. */
.fm-campo { margin: 4px 0 0; }

.fm-campo label {
    display: block;
    font-size: 11px;
    color: var(--fm-muted);
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.fm-campo input {
    width: 100%;
    min-height: var(--fm-toque);
    border: 1px solid var(--fm-line2);
    border-radius: var(--fm-r);
    padding: 10px 13px;
    /* ⚠️ 16px: con menos, iOS hace zoom al enfocar y la pantalla salta. */
    font-size: 16px;
    font-family: var(--fm-ui);
    background: #fff;
    color: var(--fm-ink);
}

.fm-campo input:focus {
    outline: none;
    border-color: var(--fm-brand);
    box-shadow: 0 0 0 3px var(--fm-brand-soft);
}

/* Falta el dato. Se marca el borde y NO se redibuja el campo: rehacerlo mientras alguien escribe le cierra
   el teclado en el celular. */
.fm-campo-mal {
    border-color: var(--fm-red) !important;
    box-shadow: 0 0 0 3px var(--fm-red-soft) !important;
}

/* Mientras hay un diálogo abierto, el fondo no se desplaza. Vive acá porque lo usan las tres aplicaciones. */
body.fm-sin-scroll { overflow: hidden; }

/* ─── El visor de comprobantes ──────────────────────────────────────────────────────────────────────────
   Vive en la hoja de marca porque lo usan la tienda mayorista («Mis pedidos») y la app del cadete («Lo que
   entregué»): el mismo papel, con la misma cara, se mire desde donde se mire. Estaba escrito en la hoja del
   mayorista y al sumarlo al cadete iba a quedar copiado, que es de donde salen las derivas de estilo.

   El disparador es chiquito a propósito —es un dato de más, no la acción principal del renglón— pero el área
   que se toca sigue siendo de 44px: en el celular, un botón de 20px se falla más de lo que se acierta. */
.ped-comp { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }

.fm-ver-comp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: var(--fm-toque);
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--fm-line2);
    border-radius: 999px;
    color: var(--fm-brand-deep);
    font-family: var(--fm-ui);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.fm-ver-comp:active { background: var(--fm-brand-tint); }

.fm-comp { padding: 14px 16px; }
.fm-comp-cargando { padding: 26px 16px; text-align: center; color: var(--fm-muted); font-size: 14px; }

/* La cabecera: número, pedido y fecha. En tres columnas que se apilan solas si no entran. */
.fm-comp-cab {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--fm-line);
}

.fm-comp-cab span { display: block; font-size: 11px; color: var(--fm-muted); text-transform: uppercase; letter-spacing: .05em; }
.fm-comp-cab b { font-size: 14.5px; color: var(--fm-ink); font-variant-numeric: tabular-nums; }

.fm-comp-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fm-comp-tabla th { text-align: left; font-size: 11px; color: var(--fm-muted); text-transform: uppercase; letter-spacing: .05em; padding: 8px 4px; }
.fm-comp-tabla td { padding: 8px 4px; border-top: 1px solid var(--fm-line); vertical-align: top; }
/* Los importes en columna: tabular-nums alinea las cifras aunque cambien de ancho. */
.fm-comp-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fm-comp-obs { display: block; font-size: 11.5px; color: var(--fm-muted); margin-top: 2px; }

.fm-comp-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px solid var(--fm-navy);
}

.fm-comp-total span { font-size: 12px; color: var(--fm-muted); text-transform: uppercase; letter-spacing: .06em; }
/* El total en la letra de la marca: es el número que la persona busca. */
.fm-comp-total b { font-family: var(--fm-display); font-size: 1.3rem; color: var(--fm-navy); font-variant-numeric: tabular-nums; }

/* ─── Imprimir / guardar en PDF ─────────────────────────────────────────────────────────────────────────
   El contenido a imprimir se clona a #fmImprimible y en el papel se esconde todo lo demás. En pantalla ese
   contenedor no existe (lo crea y lo borra el JS), así que no molesta. */
#fmImprimible { display: none; }

@media print {
    /* Sólo el comprobante. `visibility` y no `display` en el html/body para no romper el layout del clon. */
    html.fm-imprimiendo body > * { display: none !important; }
    html.fm-imprimiendo #fmImprimible { display: block !important; }

    /* El diálogo vive en la capa superior, que no se imprime de forma confiable: se esconde a mano. */
    html.fm-imprimiendo dialog { display: none !important; }

    #fmImprimible {
        font-family: var(--fm-ui);
        color: #000;
        padding: 0;
    }

    .fm-imp-membrete {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding-bottom: 10px;
        margin-bottom: 14px;
        border-bottom: 2px solid var(--fm-navy);
    }

    .fm-imp-marca b { font-family: var(--fm-display); font-size: 22px; color: var(--fm-navy); font-weight: 600; }
    .fm-imp-marca b i { font-style: normal; color: var(--fm-teal); }
    .fm-imp-marca span { display: block; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--fm-gold); }
    .fm-imp-que { font-size: 13px; font-weight: 700; color: var(--fm-navy); }

    /* Que no se corte un renglón entre dos hojas. */
    #fmImprimible tr, #fmImprimible .fm-comp-total { break-inside: avoid; }

    /* Los fondos de color no se imprimen por defecto y la tabla quedaría sin sus líneas. */
    #fmImprimible * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    @page { margin: 14mm; }
}

/* ── Firmar con el dedo ────────────────────────────────────────────────────────────────────────
   El recuadro donde el cliente firma. Va en la hoja de marca porque lo usan DOS aplicaciones: el
   cadete al entregar y el preventista al tomar el pedido. La mecanica esta en marca/firma.js.
   (Cadetes tiene ademas su propia version en cadete.css, que se carga despues y sigue mandando ahi:
   se unifica cuando se toque esa pantalla, para no cambiarle el aspecto a algo ya probado.) */
.firma-caja {
    background: #fff;
    border: 2px dashed var(--fm-line2, #cfd8e3);
    border-radius: var(--fm-r-lg, 14px);
    height: 190px;
    overflow: hidden;
    position: relative;
}

/* touch-action:none es lo que evita que el dedo haga scroll de la pagina en vez de dibujar. */
.firma-caja canvas { cursor: crosshair; display: block; touch-action: none; }

.firma-pista {
    align-items: center;
    color: var(--fm-muted, #5d6b7c);
    display: flex;
    font-size: .95rem;
    inset: 0;
    justify-content: center;
    pointer-events: none;
    position: absolute;
}

/* El texto del boton de la barra: se ve en pantalla ancha y desaparece en el celular, donde el icono
   solo alcanza y el ancho es oro. "Sincronizar" con la palabra al lado es mucho mas claro que un ↻ suelto:
   el cadete tiene que saber que ese boton sube lo que marco. */
.fm-top-txt { font-size: 13px; font-weight: 600; margin-left: 4px; }
@media (max-width: 560px) { .fm-top-txt { display: none; } }