/* ══════════════════════════════════════════════════════════════════════════
   LIBERTYFIN · HOJA ÚNICA DE ESTILOS
   Reemplaza main.css, style.css y crm-theme.css.

   ──────────────────────────────────────────────────────────────────────────
   CÓMO SE INSTALA
   ──────────────────────────────────────────────────────────────────────────
   1. Sube este archivo como  css/libertyfin.css
   2. En CADA página, deja el <head> así:

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <link rel="stylesheet" href="css/libertyfin.css">

      y BORRA los <link> de main.css, style.css y crm-theme.css.
      Este archivo TIENE que ir después de Bootstrap: lo pisa a propósito.

   3. Añade las fuentes antes de ese link:

        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet">

   No hace falta tocar el HTML: reescribe las variables --bs-* de Bootstrap,
   así que botones, tarjetas, tablas, formularios, alertas, badges, modales y
   paginación cambian solos.

   ──────────────────────────────────────────────────────────────────────────
   COLOR DE LA EMPRESA
   ──────────────────────────────────────────────────────────────────────────
   Si una empresa usa otro color, basta con esto en su <head>:

        <style>:root{ --lf-brand:#1d6fa5; }</style>

   Todos los tonos derivados (hover, fondos tenues, anillos de foco) se
   calculan solos con color-mix().

   ──────────────────────────────────────────────────────────────────────────
   MODO OSCURO
   ──────────────────────────────────────────────────────────────────────────
   CLARO POR DEFECTO, siempre. El oscuro NUNCA se activa solo por la
   preferencia del sistema: solo si se pone <html data-theme="dark">.

   ────────────────────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════
   1 · TOKENS
   ══════════════════════════════════════════════════════ */
:root{
  /* Marca */
  --lf-brand:#4baa5c;
  --lf-brand-2:color-mix(in srgb, var(--lf-brand) 82%, #000);
  /* Versión oscura del color, solo para FONDOS con texto blanco encima. */
  --lf-brand-d:color-mix(in srgb, var(--lf-brand) 82%, #000);
  --lf-brand-3:color-mix(in srgb, var(--lf-brand) 65%, #fff);
  --lf-brand-soft:color-mix(in srgb, var(--lf-brand) 11%, #fff);
  --lf-brand-glow:color-mix(in srgb, var(--lf-brand) 10%, transparent);
  --lf-brand-ring:color-mix(in srgb, var(--lf-brand) 22%, transparent);

  /* Semánticos */
  --lf-lima:#7fc241;      --lf-lima-soft:#eff7e6;
  --lf-pizarra:#2c3e50;   --lf-pizarra-soft:#eceff2;
  --lf-amb:#c58a14;       --lf-amb-soft:#fbf3e0;
  --lf-rojo:#cf4436;      --lf-rojo-soft:#fceeec;
  --lf-info:#1d7fa5;      --lf-info-soft:#e6f2f7;

  /* Superficies */
  --lf-lienzo:#f1f4f2;
  --lf-panel:#ffffff;
  --lf-sup:#ffffff;
  --lf-sup-2:#f7f9f8;
  --lf-vidrio:#f3f6f4;

  /* Tinta */
  --lf-tinta:#1b2420;
  --lf-tinta-2:#43504a;
  /* 4.48 se quedaba a dos centésimas del mínimo. Un par de tonos más
     oscuro no cambia la jerarquía y sí la legibilidad. */
  --lf-tinta-3:#68756f;
  /* Subido de #98a5a0 a #6c7771.
     El anterior daba 2.55 de contraste sobre blanco: menos de la mitad
     del mínimo legible. Y no es un detalle menor, porque este gris está
     en 222 lugares de las vistas —fechas, notas, pies de tabla, los
     textos que explican cada sección—.
     Este es el tono MÁS CLARO de la misma familia que llega a 4.5, así
     que sigue leyéndose como secundario sin desaparecer a plena luz. */
  --lf-tinta-4:#6c7771;

  --lf-linea:#e6ebe8;
  --lf-linea-f:#d4dcd8;

  /* Sombras: muy bajas a propósito, la separación la da el color */
  --lf-s1:0 1px 2px rgba(27,36,32,.035), 0 2px 8px rgba(27,36,32,.04);
  --lf-s2:0 4px 14px rgba(27,36,32,.07), 0 2px 5px rgba(27,36,32,.04);
  --lf-s3:0 18px 44px rgba(27,36,32,.13);

  /* Radios: la jerarquía se nota por el tamaño, no por la sombra */
  --lf-r-xs:7px; --lf-r-sm:9px; --lf-r:12px; --lf-r-lg:18px;
  --lf-r-panel:26px; --lf-r-pill:999px;

  --lf-font:'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lf-mono:'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --lf-side-w:240px;

  /* ── Alias hacia atrás ──
     El sistema ya usa estos nombres en 94 archivos PHP y en los CSS viejos.
     Apuntarlos aquí evita tener que buscar y reemplazar en todo el proyecto. */
  --primary-color:var(--lf-brand);
  --secondary-color:var(--lf-brand-3);
  --green:var(--lf-brand); --green-d:var(--lf-brand-2);
  --green-mid:var(--lf-brand); --green-light:var(--lf-brand-3);
  --dark-green:var(--lf-brand-2);
  --danger-color:var(--lf-rojo);
  --ink:var(--lf-tinta); --ink2:var(--lf-tinta-2);
  --ink3:var(--lf-tinta-3); --ink4:var(--lf-tinta-4);
  --bg:var(--lf-lienzo); --border:var(--lf-linea); --border2:var(--lf-linea-f);
  --card-shadow:var(--lf-s1);

  --lf-bg:var(--lf-lienzo);
  --lf-surface:var(--lf-sup); --lf-surface-2:var(--lf-sup-2); --lf-surface-3:var(--lf-vidrio);
  --lf-ink:var(--lf-tinta); --lf-ink-2:var(--lf-tinta-2);
  --lf-muted:var(--lf-tinta-3); --lf-muted-2:var(--lf-tinta-4);
  --lf-border:var(--lf-linea); --lf-border-2:var(--lf-linea-f);
  --lf-primary-050:var(--lf-brand-soft);
  --lf-primary-100:color-mix(in srgb, var(--lf-brand) 16%, #fff);
  --lf-primary-150:color-mix(in srgb, var(--lf-brand) 24%, #fff);
  --lf-primary-200:color-mix(in srgb, var(--lf-brand) 32%, #fff);
  --lf-primary-hover:var(--lf-brand-2);
  --lf-primary-ink:var(--lf-brand-2);
  --lf-on-brand:#fff;
  --lf-success:var(--lf-brand); --lf-success-bg:var(--lf-brand-soft);
  --lf-danger:var(--lf-rojo);   --lf-danger-bg:var(--lf-rojo-soft);
  --lf-warning:var(--lf-amb);   --lf-warning-bg:var(--lf-amb-soft);
  --lf-info:var(--lf-info);     --lf-info-bg:var(--lf-info-soft);
  --lf-navbar-bg:var(--lf-sup); --lf-sidebar-bg:transparent;
  --lf-ring:var(--lf-brand-ring); --lf-scrollbar:var(--lf-linea-f);
  --lf-shadow-xs:var(--lf-s1); --lf-shadow-sm:var(--lf-s1);
  --lf-shadow:var(--lf-s1); --lf-shadow-lg:var(--lf-s2);
  --lf-r-xl:var(--lf-r-panel);
}

/* ── Modo oscuro: SOLO manual ── */
:root[data-theme="dark"]{
  --lf-lienzo:#0c110f; --lf-panel:#141b18; --lf-sup:#1a2320; --lf-sup-2:#202b27;
  --lf-vidrio:rgba(255,255,255,.05);
  --lf-tinta:#e9efec; --lf-tinta-2:#c0cbc6; --lf-tinta-3:#9aa8a2;--lf-tinta-4:#86948e;
  --lf-linea:rgba(255,255,255,.09); --lf-linea-f:rgba(255,255,255,.16);
  --lf-brand-soft:color-mix(in srgb, var(--lf-brand) 18%, #0c110f);
  /* Texto de color de marca: más claro que en el tema claro, para que se lea sobre fondo oscuro con cualquier color elegido. */
  --lf-brand-2:color-mix(in srgb, var(--lf-brand) 58%, #fff);
  --lf-lima-soft:rgba(127,194,65,.14); --lf-pizarra-soft:rgba(255,255,255,.06);
  --lf-amb-soft:rgba(197,138,20,.16); --lf-rojo-soft:rgba(207,68,54,.16);
  --lf-info-soft:rgba(29,127,165,.16);
  --lf-s1:0 1px 2px rgba(0,0,0,.34); --lf-s2:0 8px 22px rgba(0,0,0,.45);
  --lf-s3:0 22px 52px rgba(0,0,0,.6);
  color-scheme:dark;
}


/* ══════════════════════════════════════════════════════
   2 · BOOTSTRAP
   Reescribir --bs-* es lo que hace que el resto del sistema
   cambie sin tocar una sola línea de HTML.
   ══════════════════════════════════════════════════════ */
:root{
  --bs-primary:var(--lf-brand);
  --bs-primary-rgb:39,174,96;
  --bs-secondary:var(--lf-pizarra);      --bs-secondary-rgb:44,62,80;
  --bs-success:var(--lf-brand);          --bs-success-rgb:39,174,96;
  --bs-info:var(--lf-info);              --bs-info-rgb:29,127,165;
  --bs-warning:var(--lf-amb);            --bs-warning-rgb:197,138,20;
  --bs-danger:var(--lf-rojo);            --bs-danger-rgb:207,68,54;
  --bs-light:var(--lf-vidrio);           --bs-light-rgb:243,246,244;
  --bs-dark:var(--lf-tinta);             --bs-dark-rgb:27,36,32;

  --bs-body-bg:var(--lf-lienzo);
  --bs-body-color:var(--lf-tinta);
  --bs-body-color-rgb:27,36,32;
  --bs-body-font-family:var(--lf-font);
  --bs-body-font-size:14px;
  --bs-body-line-height:1.55;
  --bs-emphasis-color:var(--lf-tinta);
  --bs-secondary-color:var(--lf-tinta-3);
  --bs-tertiary-color:var(--lf-tinta-4);
  --bs-secondary-bg:var(--lf-vidrio);
  --bs-tertiary-bg:var(--lf-sup-2);
  --bs-border-color:var(--lf-linea);
  --bs-border-color-translucent:var(--lf-linea);
  --bs-border-radius:var(--lf-r);
  --bs-border-radius-sm:var(--lf-r-sm);
  --bs-border-radius-lg:var(--lf-r-lg);
  --bs-border-radius-xl:var(--lf-r-panel);
  --bs-border-radius-pill:var(--lf-r-pill);
  --bs-link-color:var(--lf-brand-2);
  --bs-link-hover-color:var(--lf-brand);
  --bs-link-color-rgb:39,174,96;
  --bs-heading-color:var(--lf-tinta);
  --bs-box-shadow:var(--lf-s1);
  --bs-box-shadow-sm:var(--lf-s1);
  --bs-box-shadow-lg:var(--lf-s2);
  --bs-font-monospace:var(--lf-mono);
}


/* ══════════════════════════════════════════════════════
   3 · BASE
   ══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  font-family:var(--lf-font);
  background:var(--lf-lienzo);
  color:var(--lf-tinta);
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.3px;color:var(--lf-tinta)}
h1{font-size:23px} h2{font-size:19px} h3{font-size:16px}
h4{font-size:15px} h5{font-size:14px} h6{font-size:13px}
a{color:var(--lf-brand-2);text-decoration:none}
a:hover{color:var(--lf-brand)}
hr{border-color:var(--lf-linea);opacity:1}
small,.small{font-size:12px}
.text-muted{color:var(--lf-tinta-3)!important}
.text-primary{color:var(--lf-brand-2)!important}
.text-success{color:var(--lf-brand-2)!important}
.text-danger{color:var(--lf-rojo)!important}
.text-warning{color:var(--lf-amb)!important}
.text-info{color:var(--lf-info)!important}
.text-dark{color:var(--lf-tinta)!important}
.text-secondary{color:var(--lf-tinta-3)!important}
:root[data-theme="dark"] .text-primary,
:root[data-theme="dark"] .text-success{color:color-mix(in srgb,var(--lf-brand) 72%,#fff)!important}

/* Toda cifra se lee mejor con cifras tabulares */
.lf-num,.text-end,td.text-end,th.text-end,.stat-value,.monto,.precio,.total{
  font-variant-numeric:tabular-nums}
.lf-mono{font-family:var(--lf-mono);font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--lf-brand);outline-offset:2px;border-radius:6px}
::selection{background:var(--lf-brand-ring)}

*{scrollbar-width:thin;scrollbar-color:var(--lf-linea-f) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--lf-linea-f);border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--lf-tinta-4)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* ══════════════════════════════════════════════════════
   4 · BOTONES · todo en píldora
   ══════════════════════════════════════════════════════ */
.btn{
  --bs-btn-border-radius:var(--lf-r-pill);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:var(--lf-r-pill);
  font-size:13px;font-weight:600;line-height:1;
  border:1px solid transparent;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:0 0 0 3px var(--lf-brand-ring)}
.btn-sm{padding:6px 13px;font-size:12px}
.btn-lg{padding:13px 24px;font-size:15px}

.btn-primary,.btn-success{background:var(--lf-brand);border-color:var(--lf-brand);color:#fff}
.btn-primary:hover,.btn-success:hover{background:var(--lf-brand-d);border-color:var(--lf-brand-d);color:#fff}
.btn-secondary{background:var(--lf-sup);border-color:var(--lf-linea);color:var(--lf-tinta-2);box-shadow:0 1px 2px rgba(27,36,32,.04)}
.btn-secondary:hover{background:var(--lf-vidrio);border-color:var(--lf-linea-f);color:var(--lf-tinta)}
.btn-danger{background:var(--lf-rojo-soft);border-color:color-mix(in srgb,var(--lf-rojo) 24%,transparent);color:var(--lf-rojo)}
.btn-danger:hover{background:color-mix(in srgb,var(--lf-rojo) 18%,var(--lf-sup));color:var(--lf-rojo)}
.btn-warning{background:var(--lf-amb-soft);border-color:color-mix(in srgb,var(--lf-amb) 26%,transparent);color:var(--lf-amb)}
.btn-warning:hover{background:color-mix(in srgb,var(--lf-amb) 20%,var(--lf-sup));color:var(--lf-amb)}
.btn-info{background:var(--lf-info-soft);border-color:color-mix(in srgb,var(--lf-info) 24%,transparent);color:var(--lf-info)}
.btn-light{background:var(--lf-vidrio);border-color:var(--lf-linea);color:var(--lf-tinta-2)}
.btn-dark{background:var(--lf-tinta);border-color:var(--lf-tinta);color:#fff}

.btn-outline-primary,.btn-outline-success{background:transparent;border-color:color-mix(in srgb,var(--lf-brand) 34%,transparent);color:var(--lf-brand-2)}
.btn-outline-primary:hover,.btn-outline-success:hover{background:var(--lf-brand);border-color:var(--lf-brand);color:#fff}
.btn-outline-secondary{background:transparent;border-color:var(--lf-linea);color:var(--lf-tinta-2)}
.btn-outline-secondary:hover{background:var(--lf-vidrio);border-color:var(--lf-linea-f);color:var(--lf-tinta)}
.btn-outline-danger{background:transparent;border-color:color-mix(in srgb,var(--lf-rojo) 32%,transparent);color:var(--lf-rojo)}
.btn-outline-danger:hover{background:var(--lf-rojo);border-color:var(--lf-rojo);color:#fff}
.btn-outline-warning{background:transparent;border-color:color-mix(in srgb,var(--lf-amb) 34%,transparent);color:var(--lf-amb)}
.btn-outline-warning:hover{background:var(--lf-amb);border-color:var(--lf-amb);color:#fff}
.btn-outline-info{background:transparent;border-color:color-mix(in srgb,var(--lf-info) 32%,transparent);color:var(--lf-info)}
.btn-outline-info:hover{background:var(--lf-info);border-color:var(--lf-info);color:#fff}
.btn-link{color:var(--lf-brand-2);padding:6px 4px;border:none}
.btn:disabled,.btn.disabled{opacity:.48;box-shadow:none;transform:none}
.btn-close{border-radius:var(--lf-r-pill);opacity:.45;padding:9px}
.btn-close:hover{opacity:.9;background-color:var(--lf-vidrio)}
:root[data-theme="dark"] .btn-close{filter:invert(1) grayscale(1)}

/* Botón fantasma, para barras de herramientas */
.lf-btn-ghost{background:transparent;border:none;color:var(--lf-tinta-3);
  padding:9px;border-radius:var(--lf-r-sm);display:inline-flex;align-items:center}
.lf-btn-ghost:hover{background:var(--lf-vidrio);color:var(--lf-tinta)}


/* ══════════════════════════════════════════════════════
   5 · TARJETAS
   ══════════════════════════════════════════════════════ */
.card{
  background:var(--lf-sup);
  border:1px solid var(--lf-linea);
  border-radius:var(--lf-r-lg);
  box-shadow:var(--lf-s1);
}
.card-header{
  background:transparent;border-bottom:1px solid var(--lf-linea);
  padding:16px 20px 13px;font-weight:700;font-size:15px;letter-spacing:-.2px;
  border-radius:var(--lf-r-lg) var(--lf-r-lg) 0 0;
}
.card-body{padding:18px 20px}
.card-footer{background:var(--lf-vidrio);border-top:1px solid var(--lf-linea);
  padding:13px 20px;font-size:12.5px;color:var(--lf-tinta-3);
  border-radius:0 0 var(--lf-r-lg) var(--lf-r-lg)}
.card-title{font-size:15px;font-weight:700;letter-spacing:-.2px;margin-bottom:4px}
.card-subtitle,.card-text.text-muted{font-size:12.5px;color:var(--lf-tinta-3)}

/* Tarjeta de cifra: icono arriba, número grande, etiqueta debajo */
.stat-card{
  background:var(--lf-sup);border:1px solid var(--lf-linea);
  border-radius:var(--lf-r-lg);padding:20px 22px;position:relative;
  box-shadow:var(--lf-s1);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--lf-s2);border-color:var(--lf-linea-f)}
.stat-value{
  font-family:var(--lf-mono);font-variant-numeric:tabular-nums;
  font-size:29px;font-weight:700;letter-spacing:-1.1px;line-height:1.12;
  color:var(--lf-tinta);overflow-wrap:anywhere;
}
.stat-label{font-size:12.5px;color:var(--lf-tinta-3);font-weight:500;
  text-transform:none;letter-spacing:0;margin-top:4px}
.stat-meta{font-size:12px;color:var(--lf-tinta-3);margin-top:5px}
.stat-meta.up{color:var(--lf-brand-2);font-weight:600}
.stat-meta.down{color:var(--lf-rojo);font-weight:600}

/* Azulejo de icono */
.lf-tile{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:19px;margin-bottom:11px;
  background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-tile.g{background:var(--lf-pizarra-soft);color:var(--lf-tinta-2)}
.lf-tile.a{background:var(--lf-amb-soft);color:var(--lf-amb)}
.lf-tile.l{background:var(--lf-lima-soft);color:#5d9330}
.lf-tile.r{background:var(--lf-rojo-soft);color:var(--lf-rojo)}
:root[data-theme="dark"] .lf-tile{color:color-mix(in srgb,var(--lf-brand) 22%,#fff)}

/* Tarjeta destacada con degradado */
.stat-card.lf-hero,.card.lf-hero{
  background:linear-gradient(135deg, var(--lf-brand) 0%, var(--lf-brand-d) 100%);
  border:none;color:#fff}
.lf-hero .stat-value,.lf-hero h1,.lf-hero h2,.lf-hero h3,.lf-hero .card-title{color:#fff}
.lf-hero .stat-label,.lf-hero .stat-meta,.lf-hero .text-muted{color:rgba(255,255,255,.85)!important}
.lf-hero .lf-tile{background:rgba(255,255,255,.2);color:#fff}
.lf-hero:hover{border-color:transparent}

/* Variación arriba a la derecha */
.lf-delta{position:absolute;top:20px;right:22px;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:4px}
.lf-delta.up{color:var(--lf-brand-2)} .lf-delta.down{color:var(--lf-rojo)}
.lf-delta.up::before{content:'▲';font-size:8px}
.lf-delta.down::before{content:'▼';font-size:8px}
.lf-hero .lf-delta{color:#fff}


/* ══════════════════════════════════════════════════════
   6 · TABLAS · cabecera flotante, sin borde inferior
   ══════════════════════════════════════════════════════ */
.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--lf-tinta-2);
  --bs-table-border-color:var(--lf-linea);
  --bs-table-hover-bg:var(--lf-brand-glow);
  --bs-table-hover-color:var(--lf-tinta);
  --bs-table-striped-bg:var(--lf-sup-2);
  border-collapse:separate;border-spacing:0;margin-bottom:0;
}
.table > thead > tr > th,.table-light > tr > th,thead.table-light th{
  padding:11px 14px;text-align:left;
  font-size:11.5px;font-weight:600;letter-spacing:.2px;
  color:var(--lf-tinta-3);background:var(--lf-vidrio);
  border-bottom:none;white-space:nowrap;vertical-align:middle;
}
.table > thead > tr > th:first-child{border-radius:var(--lf-r-sm) 0 0 var(--lf-r-sm)}
.table > thead > tr > th:last-child{border-radius:0 var(--lf-r-sm) var(--lf-r-sm) 0}
.table > tbody > tr > td{
  padding:13px 14px;font-size:13px;color:var(--lf-tinta-2);
  border-bottom:1px solid var(--lf-linea);vertical-align:middle;
  transition:background-color .12s;
}
.table > tbody > tr:last-child > td{border-bottom:none}
.table-hover > tbody > tr:hover > td{background:var(--lf-brand-glow);color:var(--lf-tinta)}
.table-sm > :not(caption) > * > *{padding:8px 11px}
/* SIN `overflow-x` LA TABLA NO SE DESPLAZA: SE CORTA.
   Con quince columnas, las últimas quedaban fuera de la pantalla y no
   había forma de llegar a ellas. El borde a la derecha avisa de que
   sigue habiendo contenido. */
.table-responsive{-webkit-overflow-scrolling:touch;border-radius:var(--lf-r);
  overflow-x:auto;overflow-y:hidden;max-width:100%}
.table-responsive > .table{min-width:max-content}
/* En móvil las tablas se convierten en tarjetas y no hay que desplazar */
@media(max-width:760px){
  .table-responsive.lf-cards{overflow-x:visible}
  .table-responsive.lf-cards > .table{min-width:0}
}
.table td .fw-bold,.table td strong{color:var(--lf-tinta)}


/* ══════════════════════════════════════════════════════
   7 · BADGES
   ══════════════════════════════════════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 11px;border-radius:var(--lf-r-pill);
  font-size:10.5px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;line-height:1.35;
}
.badge.bg-primary,.badge.bg-success,.badge.text-bg-primary,.badge.text-bg-success{
  background:var(--lf-brand-soft)!important;color:var(--lf-brand-2)!important;
  border:1px solid color-mix(in srgb,var(--lf-brand) 22%,transparent)}
.badge.bg-secondary,.badge.text-bg-secondary{
  background:var(--lf-vidrio)!important;color:var(--lf-tinta-3)!important;
  border:1px solid var(--lf-linea)}
.badge.bg-warning,.badge.text-bg-warning{
  background:var(--lf-amb-soft)!important;color:var(--lf-amb)!important;
  border:1px solid color-mix(in srgb,var(--lf-amb) 24%,transparent)}
.badge.bg-danger,.badge.text-bg-danger{
  background:var(--lf-rojo-soft)!important;color:var(--lf-rojo)!important;
  border:1px solid color-mix(in srgb,var(--lf-rojo) 22%,transparent)}
.badge.bg-info,.badge.text-bg-info{
  background:var(--lf-info-soft)!important;color:var(--lf-info)!important;
  border:1px solid color-mix(in srgb,var(--lf-info) 22%,transparent)}
.badge.bg-light{background:var(--lf-vidrio)!important;color:var(--lf-tinta-3)!important}
.badge.bg-dark{background:var(--lf-tinta)!important;color:#fff!important}
:root[data-theme="dark"] .badge.bg-primary,
:root[data-theme="dark"] .badge.bg-success{color:color-mix(in srgb,var(--lf-brand) 74%,#fff)!important}

/* Estados propios del sistema */
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;
  border-radius:var(--lf-r-pill);font-size:10.5px;font-weight:700;text-transform:uppercase}
.status-active,.badge-activo{background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.status-inactive,.badge-inactivo{background:var(--lf-vidrio);color:var(--lf-tinta-3)}


/* ══════════════════════════════════════════════════════
   8 · FORMULARIOS
   ══════════════════════════════════════════════════════ */
.form-label{display:block;font-size:12px;font-weight:600;color:var(--lf-tinta-2);margin-bottom:6px}
.form-control,.form-select,.input-group-text{
  padding:10px 13px;background:var(--lf-sup);
  border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  color:var(--lf-tinta);font-size:13.5px;font-family:var(--lf-font);
  transition:border-color .15s,box-shadow .15s;
}
.form-control:focus,.form-select:focus{
  background:var(--lf-sup);color:var(--lf-tinta);
  border-color:var(--lf-brand);box-shadow:0 0 0 3px var(--lf-brand-ring)}
.form-control::placeholder{color:var(--lf-tinta-4)}
.form-control-sm,.form-select-sm{padding:7px 11px;font-size:12.5px;border-radius:var(--lf-r-sm)}
.form-control-lg{padding:13px 16px;font-size:15px}
.input-group-text{background:var(--lf-vidrio);color:var(--lf-tinta-3)}
.form-check-input{border-color:var(--lf-linea-f);border-radius:5px}
.form-check-input:checked{background-color:var(--lf-brand);border-color:var(--lf-brand)}
.form-check-input:focus{border-color:var(--lf-brand);box-shadow:0 0 0 3px var(--lf-brand-ring)}
.form-switch .form-check-input{border-radius:var(--lf-r-pill)}
.form-range::-webkit-slider-thumb{background:var(--lf-brand)}
.form-range::-moz-range-thumb{background:var(--lf-brand)}
.form-text{font-size:11.5px;color:var(--lf-tinta-4)}
.was-validated .form-control:invalid,.form-control.is-invalid{border-color:var(--lf-rojo)}
.invalid-feedback{color:var(--lf-rojo);font-size:11.5px}
/* Los campos de dinero se leen mejor en monoespaciada */
input[type="number"],.form-control.lf-num{font-family:var(--lf-mono);font-variant-numeric:tabular-nums}


/* ══════════════════════════════════════════════════════
   9 · ALERTAS
   ══════════════════════════════════════════════════════ */
.alert{
  border-radius:var(--lf-r-lg);padding:15px 18px;
  border:1px solid transparent;font-size:13px;
  display:flex;gap:11px;align-items:flex-start;
}
.alert-primary,.alert-success{background:var(--lf-brand-soft);
  border-color:color-mix(in srgb,var(--lf-brand) 22%,transparent);color:var(--lf-brand-2)}
.alert-warning{background:var(--lf-amb-soft);
  border-color:color-mix(in srgb,var(--lf-amb) 22%,transparent);color:var(--lf-amb)}
.alert-danger{background:var(--lf-rojo-soft);
  border-color:color-mix(in srgb,var(--lf-rojo) 22%,transparent);color:var(--lf-rojo)}
.alert-info{background:var(--lf-info-soft);
  border-color:color-mix(in srgb,var(--lf-info) 22%,transparent);color:var(--lf-info)}
.alert-secondary,.alert-light{background:var(--lf-vidrio);border-color:var(--lf-linea);color:var(--lf-tinta-2)}
.alert-dismissible{padding-right:44px}
.alert .btn-close{padding:13px}
:root[data-theme="dark"] .alert{color:var(--lf-tinta)}


/* ══════════════════════════════════════════════════════
   10 · NAVEGACIÓN
   ══════════════════════════════════════════════════════ */
.navbar{background:var(--lf-sup)!important;border-bottom:1px solid var(--lf-linea);
  padding:12px 22px;box-shadow:none}
.navbar-dark,.navbar.bg-dark,.navbar.bg-primary{background:var(--lf-sup)!important}
.navbar-brand{font-weight:700;font-size:16.5px;letter-spacing:-.3px;
  color:var(--lf-tinta)!important;display:flex;align-items:center;gap:10px}
.navbar-brand img{border-radius:10px;max-height:34px;width:auto}
.navbar-dark .navbar-nav .nav-link,.navbar .navbar-nav .nav-link{
  color:var(--lf-tinta-2)!important;font-size:13.5px;font-weight:500;
  padding:9px 13px;border-radius:var(--lf-r);transition:background .15s,color .15s}
.navbar .navbar-nav .nav-link:hover{background:var(--lf-brand-glow);color:var(--lf-tinta)!important}
.navbar .navbar-nav .nav-link.active{background:var(--lf-brand-soft);
  color:var(--lf-brand-2)!important;font-weight:600}
.navbar-toggler{border:1px solid var(--lf-linea);border-radius:var(--lf-r-sm);padding:7px 10px}
.navbar-toggler:focus{box-shadow:0 0 0 3px var(--lf-brand-ring)}

/* Lateral: transparente sobre el lienzo, el contenido va en hoja blanca */
.sidebar{background:transparent;border-right:none;width:var(--lf-side-w)}
.sidebar .nav-link,.sidebar a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:var(--lf-r);color:var(--lf-tinta-2);
  font-size:13.5px;font-weight:500;position:relative;transition:background .15s,color .15s}
.sidebar .nav-link:hover,.sidebar a:hover{background:var(--lf-brand-glow);color:var(--lf-tinta)}
.sidebar .nav-link.active,.sidebar a.active{
  background:var(--lf-brand-soft);color:var(--lf-brand-2);font-weight:600}
.sidebar .nav-link.active::after{content:'';position:absolute;right:-12px;top:50%;
  transform:translateY(-50%);width:3px;height:22px;border-radius:3px 0 0 3px;background:var(--lf-brand)}
.sidebar-backdrop{background:rgba(16,22,19,.5);backdrop-filter:blur(2px)}

/* Hoja blanca del contenido */
.lf-panel{background:var(--lf-panel);border-radius:var(--lf-r-panel) 0 0 0;
  border-left:1px solid var(--lf-linea);border-top:1px solid var(--lf-linea);margin-top:14px}
@media(max-width:940px){
  .lf-panel{border-radius:var(--lf-r-panel) var(--lf-r-panel) 0 0;
    border-right:1px solid var(--lf-linea);margin-top:6px}
}

.nav-tabs{border-bottom:1px solid var(--lf-linea);gap:4px}
.nav-tabs .nav-link{border:none;border-radius:var(--lf-r-sm) var(--lf-r-sm) 0 0;
  color:var(--lf-tinta-3);font-size:13.5px;font-weight:600;padding:10px 16px}
.nav-tabs .nav-link:hover{background:var(--lf-vidrio);color:var(--lf-tinta);border-color:transparent}
.nav-tabs .nav-link.active{background:transparent;color:var(--lf-brand-2);
  border-bottom:2px solid var(--lf-brand)}
.nav-pills .nav-link{border-radius:var(--lf-r-pill);color:var(--lf-tinta-3);
  font-size:12.5px;font-weight:600;padding:8px 16px}
.nav-pills .nav-link.active{background:var(--lf-brand);color:#fff}

.pagination{gap:4px}
.page-link{border:1px solid var(--lf-linea);border-radius:var(--lf-r-sm)!important;
  color:var(--lf-tinta-2);background:var(--lf-sup);font-size:12.5px;font-weight:600;
  padding:7px 12px;min-width:34px;text-align:center;transition:all .12s}
.page-link:hover{border-color:var(--lf-brand);color:var(--lf-brand-2);background:var(--lf-brand-glow)}
.page-item.active .page-link{background:var(--lf-brand);border-color:var(--lf-brand);color:#fff}
.page-item.disabled .page-link{opacity:.42;background:var(--lf-sup)}

.breadcrumb{font-size:12.5px;background:transparent;padding:0;margin-bottom:14px}
.breadcrumb-item{color:var(--lf-tinta-3)}
.breadcrumb-item.active{color:var(--lf-tinta-2);font-weight:600}
.breadcrumb-item + .breadcrumb-item::before{color:var(--lf-tinta-4)}


/* ══════════════════════════════════════════════════════
   11 · MODALES, DESPLEGABLES Y AVISOS
   ══════════════════════════════════════════════════════ */
.modal-content{background:var(--lf-sup);border:1px solid var(--lf-linea);
  border-radius:var(--lf-r-panel);box-shadow:var(--lf-s3)}
.modal-header{border-bottom:1px solid var(--lf-linea);padding:18px 22px}
.modal-title{font-size:16px;font-weight:700;letter-spacing:-.2px}
.modal-body{padding:20px 22px}
.modal-footer{border-top:1px solid var(--lf-linea);padding:16px 22px;
  background:var(--lf-sup-2);gap:10px;
  border-radius:0 0 var(--lf-r-panel) var(--lf-r-panel)}
.modal-backdrop.show{background:rgba(16,22,19,.45);opacity:1;backdrop-filter:blur(4px)}

.dropdown-menu{background:var(--lf-sup);border:1px solid var(--lf-linea);
  border-radius:var(--lf-r);box-shadow:var(--lf-s2);padding:6px;font-size:13px}
.dropdown-item{border-radius:var(--lf-r-sm);padding:9px 11px;color:var(--lf-tinta-2)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--lf-brand-glow);color:var(--lf-brand-2)}
.dropdown-item.active{background:var(--lf-brand);color:#fff}
.dropdown-divider{border-color:var(--lf-linea);margin:5px 2px}

.list-group-item{background:var(--lf-sup);border-color:var(--lf-linea);
  color:var(--lf-tinta-2);padding:12px 16px;font-size:13.5px}
.list-group-item:first-child{border-radius:var(--lf-r) var(--lf-r) 0 0}
.list-group-item:last-child{border-radius:0 0 var(--lf-r) var(--lf-r)}
.list-group-item-action:hover{background:var(--lf-vidrio)}
.list-group-item.active{background:var(--lf-brand-soft);border-color:var(--lf-linea);color:var(--lf-brand-2)}

.toast{background:var(--lf-sup);border:1px solid var(--lf-linea);
  border-radius:var(--lf-r);box-shadow:var(--lf-s2)}
.toast-header{background:transparent;border-bottom:1px solid var(--lf-linea);color:var(--lf-tinta)}
.tooltip-inner{background:var(--lf-tinta);border-radius:var(--lf-r-sm);
  font-size:12px;padding:6px 10px}
.popover{border-color:var(--lf-linea);border-radius:var(--lf-r);box-shadow:var(--lf-s2)}
.offcanvas{background:var(--lf-sup);border-color:var(--lf-linea)}
.accordion-item{background:var(--lf-sup);border-color:var(--lf-linea)}
.accordion-button{background:var(--lf-sup);color:var(--lf-tinta);font-weight:600;font-size:13.5px}
.accordion-button:not(.collapsed){background:var(--lf-brand-soft);color:var(--lf-brand-2);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 3px var(--lf-brand-ring)}

.progress{height:8px;background:var(--lf-vidrio);border-radius:var(--lf-r-pill)}
.progress-bar{background:var(--lf-brand);border-radius:var(--lf-r-pill)}
.spinner-border,.spinner-grow{color:var(--lf-brand)}

.bg-light{background:var(--lf-vidrio)!important}
.bg-white{background:var(--lf-sup)!important}
.bg-primary,.bg-success{background:var(--lf-brand)!important}
.bg-warning{background:var(--lf-amb)!important}
.bg-danger{background:var(--lf-rojo)!important}
.bg-secondary{background:var(--lf-pizarra)!important}
.bg-dark{background:var(--lf-tinta)!important}
.bg-gradient-primary,.bg-brand{
  background:linear-gradient(135deg,var(--lf-brand) 0%,var(--lf-brand-d) 100%)!important;color:#fff}
.border{border-color:var(--lf-linea)!important}
.shadow-sm{box-shadow:var(--lf-s1)!important}
.shadow{box-shadow:var(--lf-s1)!important}
.shadow-lg{box-shadow:var(--lf-s2)!important}
.rounded{border-radius:var(--lf-r)!important}
.rounded-3{border-radius:var(--lf-r)!important}
.rounded-4{border-radius:var(--lf-r-lg)!important}
.rounded-pill{border-radius:var(--lf-r-pill)!important}


/* ══════════════════════════════════════════════════════
   12 · WIDGETS
   Clases nuevas. Opcionales: se activan poniéndolas en la vista.
   ══════════════════════════════════════════════════════ */

/* Píldoras de filtro */
.lf-pills{display:inline-flex;gap:8px;flex-wrap:wrap}
/* `--lf-tinta-3` era demasiado claro para texto de 12.5px: sobre fondo
   blanco se leía como gris apagado y a plena luz desaparecía. El texto
   que sirve para navegar tiene que leerse sin esfuerzo. */
.lf-pill{padding:8px 16px;border-radius:var(--lf-r-pill);font-size:12.5px;font-weight:600;
  border:1px solid var(--lf-linea);background:var(--lf-sup);color:var(--lf-tinta-2);
  line-height:1;transition:all .15s;cursor:pointer}
.lf-pill:hover{color:var(--lf-tinta);border-color:var(--lf-brand);
  background:var(--lf-brand-glow)}
.lf-pill.active{background:var(--lf-brand);border-color:var(--lf-brand);color:#fff}

/* Barra de avance */
.lf-prog{height:6px;background:var(--lf-vidrio);border-radius:var(--lf-r-pill);
  overflow:hidden;margin-top:10px}
.lf-prog > i{display:block;height:100%;border-radius:var(--lf-r-pill);
  background:var(--lf-brand);width:var(--w,0);
  animation:lf-gro .9s cubic-bezier(.22,.8,.3,1) .15s backwards}
.lf-prog.amb > i{background:var(--lf-amb)}
.lf-hero .lf-prog{background:rgba(255,255,255,.22)}
.lf-hero .lf-prog > i{background:#fff}
@keyframes lf-gro{from{width:0}}

/* ESTE FALTABA.
   `lf-giro` se usa en cinco sitios —el boton de entrar, los botones que
   estan trabajando, los indicadores de carga— y no estaba definido en
   ninguna parte. El resultado: ningun circulo de la aplicacion giraba.
   Un indicador de carga quieto no dice "esperando": dice "colgado". */
@keyframes lf-giro{to{transform:rotate(360deg)}}

/* Avance dentro de una celda de tabla */
.lf-mini{display:flex;align-items:center;gap:9px;min-width:112px}
.lf-mini .lf-prog{flex:1;margin:0;height:5px}
.lf-mini > b{font-family:var(--lf-mono);font-size:11px;font-weight:600;
  color:var(--lf-tinta-3);min-width:32px;text-align:right}

/* Sparkline */
.lf-spark{width:100%;height:30px;margin-top:10px;overflow:visible;display:block}
.lf-spark .ln{fill:none;stroke:var(--lf-brand);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lf-spark .ar{fill:url(#lfGrad);stroke:none}
.lf-hero .lf-spark .ln{stroke:#fff}

/* Anillo */
.lf-ring{position:relative;display:inline-block}
.lf-ring svg{transform:rotate(-90deg);display:block}
.lf-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.lf-ring .bg{stroke:var(--lf-vidrio)}
.lf-ring .fg{stroke:var(--lf-brand);
  animation:lf-ring 1.1s cubic-bezier(.22,.8,.3,1) .2s backwards}
@keyframes lf-ring{from{stroke-dasharray:0 9999}}
.lf-ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.lf-ring .mid b{font-family:var(--lf-mono);font-size:19px;font-weight:700;letter-spacing:-.6px}
.lf-ring .mid small{font-size:10px;color:var(--lf-tinta-4)}

/* Dona */
.lf-donut{position:relative;flex-shrink:0}
.lf-donut svg{transform:rotate(-90deg);display:block}
.lf-donut circle{fill:none;stroke-width:17;transition:stroke-width .18s}
.lf-donut circle:hover{stroke-width:21}
.lf-donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.lf-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:170px}
.lf-legend > div{display:flex;align-items:center;gap:9px;font-size:12.5px}
.lf-legend .nb{flex:1;color:var(--lf-tinta-2)}
.lf-legend .vb{font-family:var(--lf-mono);font-weight:700;font-size:12.5px}
.lf-legend .pb{font-family:var(--lf-mono);font-size:11px;color:var(--lf-tinta-4);
  min-width:38px;text-align:right}
.lf-dot{width:10px;height:10px;border-radius:4px;flex-shrink:0;display:block}

/* Barras horizontales */
.lf-bars{display:flex;flex-direction:column;gap:13px}
.lf-bars .r{display:grid;grid-template-columns:92px 1fr auto;gap:12px;
  align-items:center;font-size:12.5px}
.lf-bars .r > span:first-child{color:var(--lf-tinta-2);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-bars .tr{height:9px;border-radius:var(--lf-r-pill);background:var(--lf-vidrio);overflow:hidden}
.lf-bars .tr > i{display:block;height:100%;border-radius:var(--lf-r-pill);
  background:var(--lf-brand);width:var(--w,0);
  animation:lf-gro 1s cubic-bezier(.22,.8,.3,1) .2s backwards}
.lf-bars .r > b{font-family:var(--lf-mono);font-size:12px;font-weight:700;
  min-width:60px;text-align:right}
@media(max-width:560px){.lf-bars .r{grid-template-columns:74px 1fr auto}}

/* Mapa de calor */
.lf-heat{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px}
.lf-heat .wk{display:flex;flex-direction:column;gap:4px}
.lf-heat i{width:14px;height:14px;border-radius:4px;background:var(--lf-vidrio);
  display:block;transition:transform .12s}
.lf-heat i:hover{transform:scale(1.28)}
.lf-heat i.l1{background:color-mix(in srgb,var(--lf-brand) 22%,#fff)}
.lf-heat i.l2{background:color-mix(in srgb,var(--lf-brand) 48%,#fff)}
.lf-heat i.l3{background:color-mix(in srgb,var(--lf-brand) 74%,#fff)}
.lf-heat i.l4{background:var(--lf-brand)}

/* Línea de tiempo */
.lf-time{position:relative;padding:2px 0 2px 26px}
.lf-time::before{content:'';position:absolute;left:8px;top:12px;bottom:12px;
  width:2px;background:var(--lf-linea);border-radius:2px}
.lf-time .ev{position:relative;padding:9px 0;display:flex;gap:12px;align-items:flex-start}
.lf-time .ev::before{content:'';position:absolute;left:-22px;top:15px;width:10px;height:10px;
  border-radius:50%;background:var(--lf-brand);border:2px solid var(--lf-sup);
  box-shadow:0 0 0 2px var(--lf-brand-soft)}
.lf-time .ev.amb::before{background:var(--lf-amb);box-shadow:0 0 0 2px var(--lf-amb-soft)}
.lf-time .ev.gris::before{background:var(--lf-tinta-4);box-shadow:0 0 0 2px var(--lf-vidrio)}

/* Avatares */
.lf-av{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-family:var(--lf-mono);font-size:12px;font-weight:700;
  flex-shrink:0;background:var(--lf-brand);color:#fff}
.lf-av.gris{background:var(--lf-pizarra-soft);color:var(--lf-tinta-2)}
.lf-stack{display:flex;align-items:center}
.lf-stack .lf-av{width:30px;height:30px;border-radius:50%;font-size:10.5px;
  border:2.5px solid var(--lf-sup);margin-left:-9px}
.lf-stack .lf-av:first-child{margin-left:0}

/* Buscador redondo */
.lf-search input{background:var(--lf-sup);
  border:1px solid var(--lf-linea);border-radius:var(--lf-r-sm);
  color:var(--lf-tinta);font-size:13px;outline:none;
  transition:border-color .15s,box-shadow .15s}
.lf-search input:focus{border-color:var(--lf-brand);box-shadow:0 0 0 3px var(--lf-brand-ring)}

/* Entrada de sección */
.lf-fade{animation:lf-ent .26s cubic-bezier(.22,.61,.36,1) backwards}
@keyframes lf-ent{from{opacity:0;transform:translateY(12px)}}


/* ══════════════════════════════════════════════════════
   13 · RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media(max-width:992px){
  .card-body{padding:16px}
  .stat-card{padding:16px 17px}
  .stat-value{font-size:24px;letter-spacing:-.7px}
}
@media(max-width:576px){
  body{font-size:13.5px}
  .card-body{padding:14px}
  .card-header{padding:14px 16px 11px}
  .stat-card{padding:14px}
  .stat-value{font-size:21px;letter-spacing:-.5px}
  .lf-tile{width:36px;height:36px;border-radius:11px;font-size:16px;margin-bottom:7px}
  .lf-delta{top:14px;right:14px;font-size:11px}
  .btn{padding:9px 15px}
  .modal-content{border-radius:var(--lf-r-lg)}
  .modal-footer{border-radius:0 0 var(--lf-r-lg) var(--lf-r-lg)}
  /* Tabla → tarjetas. Requiere data-label="Columna" en cada <td>.
     Donde no esté, la tabla sigue con scroll horizontal y no se rompe. */
  .table-responsive.lf-cards > table,
  .table-responsive.lf-cards thead,
  .table-responsive.lf-cards tbody,
  .table-responsive.lf-cards th,
  .table-responsive.lf-cards td,
  .table-responsive.lf-cards tr{display:block;width:100%}
  .table-responsive.lf-cards thead{display:none}
  .table-responsive.lf-cards tbody tr{
    border:1px solid var(--lf-linea);border-radius:var(--lf-r);
    margin-bottom:10px;padding:10px 12px;background:var(--lf-sup)}
  .table-responsive.lf-cards td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    text-align:right;padding:8px 0!important;border:none;
    border-bottom:1px solid var(--lf-vidrio);white-space:normal!important}
  .table-responsive.lf-cards tr td:last-child{border-bottom:none}
  .table-responsive.lf-cards td[data-label]::before{
    content:attr(data-label);font-size:10.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.4px;color:var(--lf-tinta-3);
    text-align:left;flex-shrink:0}
}


/* ══════════════════════════════════════════════════════
   14 · IMPRESIÓN
   ══════════════════════════════════════════════════════ */
@media print{
  body{background:#fff;color:#000}
  .sidebar,.navbar,.btn,.lf-pills,.no-print{display:none!important}
  .card,.stat-card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .lf-panel{border:none;margin:0;border-radius:0}
}


/* ══════════════════════════════════════════════════════
   15 · ARMAZÓN DE LA APP NUEVA
   Panel blanco flotando sobre el lienzo, barra lateral
   transparente. Solo aplica a las vistas reconstruidas.
   ══════════════════════════════════════════════════════ */
.lf-app{display:flex;min-height:100vh;min-height:100dvh}
.lf-side{width:var(--lf-side-w);flex-shrink:0;display:flex;flex-direction:column;background:transparent}
.lf-main{flex:1;min-width:0;background:var(--lf-panel);
  border-radius:var(--lf-r-panel) 0 0 0;
  border-left:1px solid var(--lf-linea);border-top:1px solid var(--lf-linea);margin-top:14px}
@media(max-width:940px){
  .lf-app{display:block}
  .lf-side{width:auto;flex-direction:row;align-items:center;gap:8px;overflow-x:auto;padding:8px 12px}
  .lf-main{border-radius:var(--lf-r-panel) var(--lf-r-panel) 0 0;
    border-right:1px solid var(--lf-linea);margin-top:6px}
}
.lf-marca{display:flex;align-items:center;gap:11px;padding:20px 22px 16px}
@media(max-width:940px){.lf-marca{padding:4px 6px 4px 2px}}
.lf-marca .g{width:38px;height:38px;border-radius:50%;background:var(--lf-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(39,174,96,.28)}
.lf-marca b{font-size:16.5px;font-weight:700;letter-spacing:-.3px;display:block;line-height:1.1}
.lf-marca small{font-size:10px;color:var(--lf-tinta-4);font-weight:600;letter-spacing:.7px;text-transform:uppercase}
@media(max-width:940px){.lf-marca small{display:none}}
/* Las entradas necesitan separarse: pegadas, al pasar el ratón sobre
   una parece que se ilumina media lista. */
.lf-nav{flex:1;padding:10px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
@media(max-width:940px){.lf-nav{display:flex;gap:4px;padding:0}}
.lf-nav .sec{font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--lf-tinta-4);padding:16px 12px 7px}
@media(max-width:940px){.lf-nav .sec{display:none}}
.lf-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--lf-r);
  color:var(--lf-tinta-2);font-size:13.5px;font-weight:500;position:relative;white-space:nowrap;
  text-decoration:none;transition:background .15s,color .15s}
.lf-nav a:hover{background:var(--lf-brand-glow);color:var(--lf-tinta)}
.lf-nav a.on{background:var(--lf-brand-soft);color:var(--lf-brand-2);font-weight:600}
.lf-nav a.on::after{content:'';position:absolute;right:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:3px 0 0 3px;background:var(--lf-brand)}
@media(max-width:940px){.lf-nav a.on::after{display:none}}
.lf-pie{border-top:1px solid var(--lf-linea);padding:12px;margin:0 12px 10px}
@media(max-width:940px){.lf-pie{display:none}}
.lf-ucard{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--lf-r);
  color:var(--lf-tinta)}
.lf-ucard b{font-size:13px;font-weight:600;display:block;color:var(--lf-tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-ucard small{font-size:11px;color:var(--lf-tinta-4);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-ucard:hover{background:var(--lf-vidrio)}
/* El botón de salir: visible siempre, no solo al pasar el ratón. En una
   pantalla táctil no hay "pasar el ratón", y salir es justo lo que
   alguien busca cuando presta su computadora. */
.lf-ucard .lf-btn-ghost{color:var(--lf-tinta-3);width:30px;height:30px}
.lf-ucard .lf-btn-ghost:hover{color:var(--lf-rojo);background:var(--lf-rojo-soft)}

.lf-top{min-height:var(--lf-head-h,64px);display:flex;align-items:center;padding:14px 30px;gap:14px;flex-wrap:wrap}
@media(max-width:600px){.lf-top{padding:12px 16px}}
.lf-top h1{font-size:17px;display:flex;align-items:center;gap:9px;min-width:0}
.lf-top h1 svg{color:var(--lf-brand);flex-shrink:0}
.lf-top p{font-size:12.5px;color:var(--lf-tinta-4);margin-top:2px}
.lf-acc{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.lf-cont{padding:6px 30px 46px}
@media(max-width:600px){.lf-cont{padding:4px 16px 34px}}

.lf-filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.lf-filtros .lf-search{flex:1;min-width:210px;max-width:340px}

.lf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:16px;margin-bottom:20px}
@media(max-width:560px){.lf-stats{grid-template-columns:repeat(2,1fr);gap:12px}}

.lf-split{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
@media(max-width:940px){.lf-split{grid-template-columns:1fr}}
.lf-split > *{min-width:0}

.lf-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--lf-r);
  text-decoration:none;color:inherit;transition:background .12s}
.lf-row:hover{background:var(--lf-vidrio);color:inherit}


/* ══════════════════════════════════════════════════════
   16 · PANEL
   ══════════════════════════════════════════════════════ */
.lf-sintesis{display:grid;grid-template-columns:1fr 300px;gap:18px;margin-bottom:20px}
@media(max-width:940px){.lf-sintesis{grid-template-columns:1fr}}

.lf-frase{background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r-lg);
  box-shadow:var(--lf-s1);padding:24px 26px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.lf-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:var(--lf-r-pill);
  background:var(--lf-vidrio);border:1px solid var(--lf-linea);font-size:10.5px;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;color:var(--lf-tinta-3);margin-bottom:13px}
.lf-tag i{width:6px;height:6px;border-radius:50%;background:var(--lf-brand);
  animation:lf-lat 1.8s ease-in-out infinite}
@keyframes lf-lat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
.lf-frase h2{font-size:25px;letter-spacing:-.9px;line-height:1.22;font-weight:700}
.lf-frase h2 em{font-style:normal;color:var(--lf-brand-2)}
.lf-frase p{font-size:13px;color:var(--lf-tinta-3);margin-top:10px;max-width:56ch;line-height:1.55}

.lf-oscura{background:#1b2a23;border-radius:var(--lf-r-lg);padding:22px 24px;color:#e7f2ec;
  position:relative;overflow:hidden;display:flex;flex-direction:column}
:root[data-theme="dark"] .lf-oscura{background:#10201a;border:1px solid var(--lf-linea)}
.lf-oscura .wm{position:absolute;right:-26px;bottom:-40px;width:190px;height:190px;
  color:rgba(255,255,255,.055);pointer-events:none}
.lf-oscura .wm svg{width:100%;height:100%;fill:currentColor;stroke:none}
.lf-oscura .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:auto;position:relative}
.lf-oscura .lv{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;
  border-radius:var(--lf-r-pill);background:rgba(255,255,255,.1);font-size:10px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase}
.lf-oscura .lv i{width:6px;height:6px;border-radius:50%;background:#5cc987;
  animation:lf-lat 1.8s ease-in-out infinite}
.lf-oscura .st{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.18);
  padding:4px 10px;border-radius:var(--lf-r-pill)}
.lf-oscura .big{font-family:var(--lf-mono);font-size:38px;font-weight:700;letter-spacing:-1.8px;
  line-height:1;margin:26px 0 4px;position:relative;overflow-wrap:anywhere}
.lf-oscura .sm{font-size:12.5px;color:rgba(255,255,255,.62);position:relative}
.lf-oscura .ft{display:flex;gap:26px;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);position:relative}
.lf-oscura .ft small{display:block;font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:3px}
.lf-oscura .ft b{font-family:var(--lf-mono);font-size:15px;font-weight:700;letter-spacing:-.4px}
.lf-oscura .ft b i{font-style:normal;font-size:11px;margin-left:3px}
.lf-oscura .ft b i.up{color:#8fd7ae} .lf-oscura .ft b i.down{color:#e8a89f}

.lf-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
@media(max-width:700px){.lf-trio{grid-template-columns:1fr}}
.lf-tp{background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r-pill);
  padding:12px 20px 12px 12px;display:flex;align-items:center;gap:13px;box-shadow:var(--lf-s1);
  text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.lf-tp:hover{border-color:var(--lf-linea-f);transform:translateY(-2px);color:inherit}
.lf-tp .ci{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-tp .ci.g{background:var(--lf-pizarra-soft);color:var(--lf-tinta-2)}
.lf-tp .ci.a{background:var(--lf-amb-soft);color:var(--lf-amb)}
.lf-tp small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--lf-tinta-4);margin-bottom:2px}
.lf-tp b{font-family:var(--lf-mono);font-size:19px;font-weight:700;letter-spacing:-.7px;line-height:1}
.lf-tp b em{font-style:normal;font-family:var(--lf-font);font-size:11.5px;font-weight:500;
  color:var(--lf-tinta-4);margin-left:5px;letter-spacing:0}

.lf-curva{width:100%;height:auto;display:block;overflow:visible}
.lf-curva .gl{stroke:var(--lf-linea);stroke-width:1;stroke-dasharray:3 5}
.lf-curva .l1{fill:none;stroke:var(--lf-brand);stroke-width:2.6;stroke-linecap:round}
.lf-curva .l2{fill:none;stroke:var(--lf-pizarra);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:5 5}
:root[data-theme="dark"] .lf-curva .l2{stroke:#8fa39a}
.lf-curva .ar{fill:var(--lf-brand-glow);stroke:none}
.lf-curva circle{fill:var(--lf-sup);stroke-width:2.4;transition:r .15s}
.lf-curva circle.p1{stroke:var(--lf-brand)} .lf-curva circle.p2{stroke:var(--lf-pizarra)}
.lf-curva circle:hover{r:6.5}

.lf-leyenda{display:flex;flex-wrap:wrap;gap:16px;padding-top:14px;font-size:12px;color:var(--lf-tinta-3)}
.lf-leyenda span{display:flex;align-items:center;gap:6px}

.lf-time .ev{position:relative;padding:9px 0;display:flex;gap:12px;align-items:flex-start;
  text-decoration:none;color:inherit}
.lf-time .ev:hover b{color:var(--lf-brand-2)}
.lf-time .ev b{display:block;font-size:13px;font-weight:600}
.lf-time .ev small{font-size:11.5px;color:var(--lf-tinta-4)}
.lf-time .ev .mn{font-family:var(--lf-mono);font-size:13px;font-weight:700;white-space:nowrap}


/* ══════════════════════════════════════════════════════
   17 · CAJA · punto de venta
   ══════════════════════════════════════════════════════ */
.lf-pos{display:grid;grid-template-columns:1fr 352px;gap:18px;align-items:start}
@media(max-width:940px){.lf-pos{grid-template-columns:1fr}}
.lf-pos > *{min-width:0}

.lf-grid-serv{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px;padding:0 20px 20px}
.lf-serv{background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  padding:15px 13px;text-align:center;transition:all .15s;cursor:pointer;color:inherit}
.lf-serv:hover{border-color:var(--lf-brand);transform:translateY(-3px);box-shadow:var(--lf-s2)}
.lf-serv:active{transform:translateY(0)}
.lf-serv .e{width:38px;height:38px;border-radius:12px;margin:0 auto 9px;display:flex;
  align-items:center;justify-content:center;background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-serv b{display:block;font-size:12.5px;font-weight:600;line-height:1.3;margin-bottom:3px}
.lf-serv small{display:block;font-size:10.5px;color:var(--lf-tinta-4);margin-bottom:6px}
.lf-serv .p{font-family:var(--lf-mono);font-size:13.5px;font-weight:700;color:var(--lf-brand-2)}

.lf-linea{display:flex;align-items:center;gap:11px;padding:11px 20px;border-bottom:1px solid var(--lf-linea)}
.lf-linea b{display:block;font-size:13px;font-weight:600}
.lf-linea small{font-size:11px;color:var(--lf-tinta-4)}
.lf-quitar{width:24px;height:24px;border-radius:50%;background:var(--lf-vidrio);
  color:var(--lf-tinta-4);font-size:15px;line-height:1;flex-shrink:0;cursor:pointer;border:none}
.lf-quitar:hover{background:var(--lf-rojo-soft);color:var(--lf-rojo)}

.lf-sumas{padding:14px 20px;border-top:1px solid var(--lf-linea)}
.lf-sumas > div{display:flex;justify-content:space-between;font-size:13px;
  color:var(--lf-tinta-3);padding:4px 0;gap:10px}
.lf-sumas .tt{border-top:1px solid var(--lf-linea);margin-top:9px;padding-top:11px;
  font-size:19px;font-weight:800;color:var(--lf-tinta);font-family:var(--lf-mono);letter-spacing:-.6px}
.lf-sumas .tt span:first-child{font-family:var(--lf-font);font-size:14px;font-weight:600;align-self:center}

.lf-anticipo{margin:14px 20px;background:var(--lf-vidrio);border:1px solid var(--lf-linea);
  border-radius:var(--lf-r);padding:14px}
.lf-anticipo label{display:block;font-size:12px;font-weight:600;color:var(--lf-tinta-2);margin-bottom:7px}
.lf-anticipo input{width:100%;padding:11px 14px;background:var(--lf-sup);
  border:1px solid var(--lf-linea);border-radius:var(--lf-r);color:var(--lf-tinta);
  font-size:17px;font-weight:700;outline:none;transition:border-color .15s,box-shadow .15s}
.lf-anticipo input:focus{border-color:var(--lf-brand);box-shadow:0 0 0 3px var(--lf-brand-ring)}
.lf-anticipo p{font-size:11.5px;color:var(--lf-tinta-3);margin-top:9px;line-height:1.5}

.lf-sugerencias{margin-top:6px;border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  background:var(--lf-sup);box-shadow:var(--lf-s2);overflow:hidden;max-height:230px;overflow-y:auto}
.lf-sugerencias button{display:block;width:100%;text-align:left;padding:10px 13px;
  border:none;background:none;cursor:pointer;color:inherit}
.lf-sugerencias button:hover{background:var(--lf-brand-glow)}
.lf-sugerencias b{display:block;font-size:13px;font-weight:600}
.lf-sugerencias small{font-size:11px;color:var(--lf-tinta-4)}


/* ══════════════════════════════════════════════════════
   18 · DONA Y LEYENDA
   ══════════════════════════════════════════════════════ */
.lf-dona-fila{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.lf-donut{position:relative;flex-shrink:0}
.lf-donut svg{transform:rotate(-90deg);display:block}
.lf-donut circle{fill:none;transition:stroke-width .18s}
.lf-donut circle:hover{stroke-width:21}
.lf-donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none}
.lf-donut .mid b{font-family:var(--lf-mono);font-size:19px;font-weight:700;letter-spacing:-.6px;line-height:1}
.lf-donut .mid small{font-size:10.5px;color:var(--lf-tinta-4);margin-top:3px}
.lf-legend{flex:1;min-width:170px;display:flex;flex-direction:column;gap:9px}
.lf-legend > div{display:flex;align-items:center;gap:9px;font-size:12.5px}
.lf-legend .nb{flex:1;color:var(--lf-tinta-2)}
.lf-legend .vb{font-family:var(--lf-mono);font-weight:700;font-size:12.5px}
.lf-legend .pb{font-family:var(--lf-mono);font-size:11px;color:var(--lf-tinta-4);min-width:38px;text-align:right}


/* ══════════════════════════════════════════════════════
   19 · BARRA SEGMENTADA
   ══════════════════════════════════════════════════════ */
.lf-seg{display:flex;gap:2px;border-radius:var(--lf-r-pill);overflow:hidden}
.lf-seg > span{display:block;transition:flex .3s}
.lf-seg > span:first-child{border-radius:var(--lf-r-pill) 0 0 var(--lf-r-pill)}
.lf-seg > span:last-child{border-radius:0 var(--lf-r-pill) var(--lf-r-pill) 0}




/* ══════════════════════════════════════════════════════
   21 · INTERRUPTOR DE TEMA
   Se muestra el icono de lo que vas a OBTENER, no el del
   estado actual: en claro se ve la luna.
   ══════════════════════════════════════════════════════ */
.lf-tema{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--lf-linea);
  background:var(--lf-sup);color:var(--lf-tinta-3);cursor:pointer;transition:all .15s}
.lf-tema:hover{border-color:var(--lf-brand);color:var(--lf-brand-2);background:var(--lf-brand-glow)}
.lf-tema .oscuro{display:none}
:root[data-theme="dark"] .lf-tema .claro{display:none}
:root[data-theme="dark"] .lf-tema .oscuro{display:inline-flex}

/* La transición al cambiar de tema, solo en lo que cambia de color.
   Poner `transition:all` aquí haría que cada hover del sistema arrastre
   un retardo de 220 ms. */
@media (prefers-reduced-motion: no-preference){
  body,.card,.stat-card,.lf-main,.lf-side,.table,.btn,.form-control,.lf-oscura{
    transition:background-color .22s ease,border-color .22s ease,color .22s ease}
}

/* Retoques del oscuro que no salen solos de los tokens */
:root[data-theme="dark"] .lf-serv:hover{background:var(--lf-brand-soft)}
:root[data-theme="dark"] .lf-sugerencias{box-shadow:0 8px 22px rgba(0,0,0,.5)}
:root[data-theme="dark"] .lf-acceso{box-shadow:0 22px 52px rgba(0,0,0,.6)}
:root[data-theme="dark"] .lf-frase h2 em{color:#5fd48f}
:root[data-theme="dark"] .lf-tp .ci{color:#5fd48f}
:root[data-theme="dark"] .lf-curva .ar{fill:rgba(39,174,96,.16)}
:root[data-theme="dark"] .lf-seg > span{opacity:.88}


/* ══════════════════════════════════════════════════════
   22 · PANEL DE ALTA · <details> sin JavaScript
   ══════════════════════════════════════════════════════ */
.lf-alta{background:var(--lf-sup);border:1px solid var(--lf-linea);
  border-radius:var(--lf-r-lg);box-shadow:var(--lf-s1);margin-bottom:18px;overflow:hidden}
.lf-alta > summary{display:flex;align-items:center;gap:9px;padding:15px 20px;
  cursor:pointer;font-weight:600;font-size:14px;list-style:none;user-select:none}
.lf-alta > summary::-webkit-details-marker{display:none}
.lf-alta > summary:hover{background:var(--lf-vidrio)}
.lf-alta > summary svg{color:var(--lf-brand)}
.lf-alta[open] > summary{border-bottom:1px solid var(--lf-linea)}
.lf-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:18px 20px}

/* Azulejo en rojo, para lo que de verdad urge */
.lf-tile.r{background:var(--lf-rojo-soft);color:var(--lf-rojo)}
a.stat-card{text-decoration:none;color:inherit;display:block}
a.stat-card:hover{color:inherit}


/* ══════════════════════════════════════════════════════
   23 · CORRECCIONES DE BASE
   La app nueva NO carga Bootstrap: este archivo se escribió
   como capa encima de él y aquí tiene que sostenerse solo.
   Todo lo de abajo es lo que Bootstrap aportaba y faltaba.
   ══════════════════════════════════════════════════════ */

/* Listas sin viñetas dentro de componentes */
.pagination,.lf-pills,.nav,.list-group{list-style:none;margin:0;padding:0}

/* Paginación · flecha izquierda, número al centro, flecha derecha */
.pagination{display:flex;align-items:center;gap:6px}
.page-item{display:block;margin:0}
.page-item .page-link{display:flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 11px;line-height:1}
.page-item.disabled .page-link{pointer-events:none}
.page-item.disabled span.page-link{border-color:transparent;background:transparent;
  color:var(--lf-tinta-3);font-variant-numeric:tabular-nums}

/* La lupa DENTRO del campo. El icono es un <svg>, no un <i>. */
.lf-search{position:relative;display:flex;align-items:center}
.lf-search > svg,.lf-search > i,.lf-search > .fas{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--lf-tinta-4);pointer-events:none;z-index:1}
.lf-search input{width:100%;padding:9px 14px 9px 39px}

/* Botón: nada de display:block por fuera. El contenido va centrado
   siempre, con o sin icono. */
.btn{display:inline-flex!important;align-items:center;justify-content:center;
  gap:8px;text-align:center;line-height:1.15}
.btn > svg{flex-shrink:0}
.btn-block,.btn.w-100{width:100%}

/* Separación entre tarjetas y entre columnas */
.card,.stat-card{margin-bottom:18px}
.lf-split > * > .card:last-child,.lf-split > .card:last-child{margin-bottom:0}
.lf-split{gap:20px}
.lf-stats .stat-card{margin-bottom:0}

/* Columnas de igual altura: la tarjeta crece hasta llenar su columna */
.lf-split{align-items:stretch}
.lf-split > .card{display:flex;flex-direction:column;height:100%}
.lf-split > .card > .table-responsive,.lf-split > .card > .card-body{flex:1}
.lf-split > div{display:flex;flex-direction:column;gap:20px}
.lf-split > div > .card{margin-bottom:0}
.lf-split > div > .card:last-child{flex:1;display:flex;flex-direction:column}
.lf-split > div > .card:last-child > .card-body{flex:1}
@media(max-width:940px){
  .lf-split > .card,.lf-split > div > .card:last-child{height:auto;display:block}
}

/* Formularios: que nada se pegue ni se encime */
.lf-form{gap:16px 14px;align-items:flex-end}
.lf-form > div{display:flex;flex-direction:column}
.lf-form .btn{align-self:flex-end;margin-bottom:0}
.lf-filtros{gap:12px;row-gap:10px;align-items:center}
.lf-filtros .form-control,.lf-filtros .form-select{height:36px}
.lf-filtros .btn{height:36px}

/* Píldoras: aire arriba para que no choquen con el borde */
.lf-pills{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}

/* Dona: aire entre el círculo y la leyenda */
.lf-dona-fila{gap:28px;padding:4px 0}
.lf-donut .mid b{font-size:16px;letter-spacing:-.4px;padding:0 6px;
  overflow-wrap:anywhere;max-width:86%}
.lf-donut .mid small{font-size:10px}

/* Barra lateral fija: el menú y el perfil se quedan en pantalla */
@media(min-width:941px){
  .lf-side{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
  .lf-nav{overflow-y:auto;min-height:0}
  .lf-pie{margin-top:auto}
}

/* Rejilla de servicios en Caja */
.lf-grid-serv{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.lf-serv{padding:13px 11px}
.lf-serv b{min-height:2.6em;display:flex;align-items:center;justify-content:center}

/* Campo de descripción de la venta */
.lf-desc{width:100%;min-height:74px;resize:vertical;font-family:var(--lf-font);
  padding:11px 13px;line-height:1.5}

/* Precio editable dentro del ticket */
.lf-precio{width:94px;padding:6px 9px;text-align:right;font-weight:700;font-size:13px;
  background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r-sm);
  color:var(--lf-tinta);outline:none;flex-shrink:0}
.lf-precio:focus{border-color:var(--lf-brand);box-shadow:0 0 0 3px var(--lf-brand-ring)}
/* Los que no traen precio se marcan: hay que ponérselo */
.lf-serv.sin-precio .p{color:var(--lf-amb);font-family:var(--lf-font);
  font-size:11px;font-weight:600}
.lf-serv.sin-precio .e{background:var(--lf-amb-soft);color:var(--lf-amb)}

/* Paginación de la rejilla de servicios */
.lf-pag-serv{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:4px 20px 18px;font-size:12.5px;color:var(--lf-tinta-3)}
.lf-pag-serv button{width:32px;height:32px;border-radius:50%;border:1px solid var(--lf-linea);
  background:var(--lf-sup);color:var(--lf-tinta-2);cursor:pointer;font-size:15px;line-height:1}
.lf-pag-serv button:hover:not(:disabled){border-color:var(--lf-brand);color:var(--lf-brand-2)}
.lf-pag-serv button:disabled{opacity:.35;cursor:default}
.lf-pag-serv b{font-family:var(--lf-mono);font-weight:600}

/* El rótulo del marcador puede ser de dos palabras */
.lf-ring .mid small{font-size:9px;letter-spacing:.2px;line-height:1.15;
  max-width:70px;text-align:center}


/* ══════════════════════════════════════════════════════
   24 · AJUSTES FINOS DE MAQUETA
   ══════════════════════════════════════════════════════ */

/* Encabezado de tarjeta con subtítulo: que el texto no empuje el badge */
.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-header > div{min-width:0}
.card-header p{font-weight:400}

/* Las barras horizontales necesitan aire cuando son la única tarjeta */
.lf-bars{gap:15px}
.lf-bars .r > span:first-child{font-size:12px}

/* Tablas: la última columna de acciones no se estira */
.table td:last-child:empty{width:0;padding:0}
.table th:last-child:empty{width:0;padding:0}

/* Tarjetas de cifra: que el número no se pegue al borde */
.stat-card{padding:20px 22px 18px}
.stat-value{overflow-wrap:anywhere;padding-right:4px}

/* El pie de tarjeta con paginación se alinea sin saltos */
.card-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-footer > span:only-child{flex:1}

/* Píldoras de pestaña: separadas del contenido de abajo */
.lf-pills + .alert,.lf-pills + .lf-alta,.lf-pills + .card,
.lf-pills + .lf-stats,.lf-pills + form{margin-top:2px}

/* En pantallas chicas las columnas parejas estorban */
@media(max-width:940px){
  .lf-split > div{gap:18px}
  .card,.stat-card{margin-bottom:16px}
}


/* ══════════════════════════════════════════════════════
   25 · CORRECCIONES DE MAQUETA · SEGUNDA PASADA
   ══════════════════════════════════════════════════════ */

/* La barra lateral no se movía porque el flex la estiraba al alto del
   contenido: sticky no tiene contra qué pegarse si el elemento ya es
   tan alto como su contenedor. align-self la vuelve a su alto real. */
@media(min-width:941px){
  .lf-app{align-items:flex-start}
  .lf-side{align-self:flex-start;position:sticky;top:0;
    height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  .lf-nav{flex:1;overflow-y:auto;min-height:0}
  .lf-pie{margin-top:0;flex-shrink:0}
  /* El panel blanco necesita su propio alto mínimo para que el lienzo
     no se vea cortado cuando hay poco contenido. */
  .lf-main{min-height:100vh;min-height:100dvh}
}

/* Separación entre tarjetas sueltas y entre bloques del panel */
.lf-split,.lf-stats{margin-bottom:20px}
.lf-sintesis,.lf-trio{margin-bottom:22px}
section.card + section.card{margin-top:0}
.lf-cont > .card,.lf-cont > section.card{margin-bottom:20px}
.lf-cont > .card:last-child{margin-bottom:0}

/* Caja · las píldoras de categoría no chocan con el borde */
.lf-pos .card > div:first-of-type .lf-pill{margin-top:2px}
.lf-pos .card header + div{padding-top:4px}

/* Caja · el paginador de servicios sube al encabezado */
.lf-pag-serv{padding:0;gap:8px}
.lf-pag-serv button{width:28px;height:28px;font-size:14px}
.lf-pag-serv span{font-size:11.5px;white-space:nowrap}
.card-header .lf-pag-serv{margin-left:auto;flex-shrink:0}

/* Formularios · que dos campos contiguos nunca se toquen */
.lf-form,.card-body form{column-gap:16px;row-gap:16px}
.lf-form > div + div,.card-body form > div + div{margin-left:0}

/* Tabla de comisiones · sin el vacío gigante cuando hay pocos */
.lf-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:1100px){.lf-tres{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.lf-tres{grid-template-columns:1fr}}
.lf-tres > .card{margin-bottom:0}

/* Botón de tema, ahora sí visible */
.lf-tema{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--lf-linea);
  background:var(--lf-sup);color:var(--lf-tinta-3);cursor:pointer;
  transition:all .15s;flex-shrink:0;padding:0}
.lf-tema:hover{border-color:var(--lf-brand);color:var(--lf-brand-2);background:var(--lf-brand-glow)}
.lf-tema .claro,.lf-tema .oscuro{display:inline-flex}
.lf-tema .oscuro{display:none}
:root[data-theme="dark"] .lf-tema .claro{display:none}
:root[data-theme="dark"] .lf-tema .oscuro{display:inline-flex}

/* Encabezado: el título no empuja las acciones */
.lf-top-tit{min-width:0;flex:1}
.lf-acc{flex-shrink:0}

/* Rejilla de colaboradores: aprovecha el ancho en vez de dejarlo en blanco */
.lf-equipo{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:12px;padding:4px 20px 18px}
.lf-pers{display:flex;align-items:center;gap:12px;padding:13px 15px;
  background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r)}
.lf-pers.sin{opacity:.78;border-style:dashed}
.lf-pers b{display:block;font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-pers small{display:block;font-size:11px;color:var(--lf-tinta-4);margin-bottom:2px}
.lf-pers .lf-prog{margin-top:6px;height:4px}
.lf-pers .mn{font-family:var(--lf-mono);font-size:13.5px;font-weight:700;
  white-space:nowrap;text-align:right;flex-shrink:0}
.lf-pers .mn i{display:block;font-style:normal;font-family:var(--lf-font);
  font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--lf-amb);margin-top:2px}


/* ══════════════════════════════════════════════════════
   26 · BARRA LATERAL FIJA DE VERDAD
   `sticky` dependía de demasiadas condiciones del flujo: basta
   con que un ancestro tenga overflow, o con que el propio
   elemento ya sea tan alto como su contenedor, para que no se
   pegue. `fixed` sale del flujo y no puede moverse.
   ══════════════════════════════════════════════════════ */
@media(min-width:941px){
  .lf-app{display:block}                     /* ya no hace falta el flex */
  .lf-side{
    position:fixed; left:0; top:0; bottom:0;
    width:var(--lf-side-w);
    display:flex; flex-direction:column;
    z-index:30;
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--lf-lienzo);             /* tapa lo que pase por debajo */
  }
  /* El menú es lo único que hace scroll. El perfil y la marca no. */
  .lf-marca{flex-shrink:0}
  .lf-nav{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain}
  .lf-pie{flex-shrink:0; margin-top:0}
  /* El contenido se corre para dejarle su lugar. */
  .lf-main{margin-left:var(--lf-side-w); min-height:100vh; min-height:100dvh}
}

/* Caja · las píldoras de categoría necesitaban aire arriba y abajo */
.lf-pos .card > div:has(> .lf-pill){padding:12px 20px 16px}
.lf-cat-fila{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px 16px;
  border-bottom:1px solid var(--lf-linea);margin-bottom:14px}


/* ══════════════════════════════════════════════════════
   28 · MÓVIL
   El lateral entra deslizándose desde la izquierda sobre un
   velo con desenfoque, y las cuatro secciones más usadas
   viven en una barra de abajo, al alcance del pulgar.
   ══════════════════════════════════════════════════════ */
.lf-velo{display:none}
.lf-dedo{display:none}
.lf-cerrar-menu{display:none}

@media(max-width:940px){
  .lf-app{display:block}

  /* El lateral, fuera de pantalla hasta que se pide */
  .lf-side{
    position:fixed; top:0; bottom:0; left:0;
    width:min(282px, 84vw);
    flex-direction:column; gap:0;
    background:var(--lf-panel);
    border-right:1px solid var(--lf-linea);
    box-shadow:var(--lf-s3);
    padding:0 0 env(safe-area-inset-bottom,0px);
    overflow:hidden;
    z-index:60;
    transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.32,.72,.3,1);
  }
  body.lf-menu-abierto .lf-side{transform:translateX(0)}

  .lf-side .lf-marca{padding:18px 20px 14px;flex-shrink:0}
  .lf-side .lf-marca small{display:block}
  .lf-nav{display:block;flex:1;min-height:0;overflow-y:auto;padding:6px 12px}
  .lf-nav .sec{display:block}
  .lf-pie{display:block;flex-shrink:0;border-top:1px solid var(--lf-linea);
    padding:12px;margin:0 12px 10px}

  .lf-cerrar-menu{display:flex;align-items:center;justify-content:center;
    position:absolute;top:14px;right:12px;width:32px;height:32px;
    border-radius:50%;border:1px solid var(--lf-linea);background:var(--lf-sup);
    color:var(--lf-tinta-3);font-size:19px;line-height:1;cursor:pointer;z-index:2}

  /* El velo: desenfoque en vez de un negro plano, para que se siga
     viendo dónde estabas.

     `display:block` aquí le ganaba al atributo `hidden`, así que el
     velo se quedaba puesto SIEMPRE en móvil: la pantalla salía
     desenfocada y no dejaba tocar nada. Un atributo `hidden` no vence a
     una regla de display, hay que decirlo explícito. */
  .lf-velo[hidden]{display:none !important}
  .lf-velo{display:block;position:fixed;inset:0;z-index:50;
    background:rgba(16,22,19,.34);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    animation:lf-velo .22s ease}
  @keyframes lf-velo{from{opacity:0}}
  body.lf-menu-abierto{overflow:hidden}

  /* El contenido deja lugar a la barra de abajo */
  .lf-main{margin-left:0;border-radius:var(--lf-r-panel) var(--lf-r-panel) 0 0;
    border-right:1px solid var(--lf-linea);margin-top:0;
    padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}

  /* La barra del pulgar */
  .lf-dedo{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--lf-sup);border-top:1px solid var(--lf-linea);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 14px rgba(27,36,32,.06)}
  .lf-dedo a,.lf-dedo button{flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;padding:6px 2px;
    border:none;background:none;cursor:pointer;text-decoration:none;
    color:var(--lf-tinta-4);border-radius:var(--lf-r-sm);min-width:0}
  .lf-dedo span{font-size:10px;font-weight:600;letter-spacing:-.1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .lf-dedo a.on{color:var(--lf-brand-2)}
  .lf-dedo a:active,.lf-dedo button:active{background:var(--lf-vidrio)}
  .lf-dedo svg{flex-shrink:0}
}

@media(max-width:940px) and (prefers-reduced-motion:reduce){
  .lf-side{transition:none}
}

/* Rejilla de documentos de la cuenta */
.lf-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.lf-doc{margin-bottom:0;display:flex;flex-direction:column}
.lf-doc .card-body{display:flex;flex-direction:column;flex:1}
.lf-doc form{margin-top:auto}
.lf-doc input[type=file]::file-selector-button{
  padding:6px 12px;margin-right:9px;border-radius:var(--lf-r-pill);
  border:1px solid var(--lf-linea);background:var(--lf-sup);color:var(--lf-tinta-2);
  font-family:var(--lf-font);font-size:11.5px;font-weight:600;cursor:pointer}


/* ══════════════════════════════════════════════════════
   29 · GUÍA DE PRIMER USO
   ══════════════════════════════════════════════════════ */
.lf-guia{position:fixed;inset:0;z-index:9000}

/* El velo es CLARO a propósito: con uno oscuro el menú de atrás deja de
   leerse y la guía pierde la mitad de su sentido. Se trata de ver el
   menú real iluminado, no una caja de texto flotando en negro. */
.lf-guia-velo{position:absolute;inset:0;background:rgba(14,20,17,.42);cursor:default}

.lf-guia-foco{position:fixed;border-radius:11px;pointer-events:none;z-index:9001;
  box-shadow:0 0 0 9999px rgba(14,20,17,.42), 0 0 0 2px var(--lf-brand);
  transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease}

.lf-guia-card{position:fixed;width:330px;max-width:calc(100vw - 28px);
  background:var(--lf-sup);border:1px solid var(--lf-linea);
  border-radius:var(--lf-r-lg);box-shadow:0 18px 48px rgba(0,0,0,.3);
  overflow:hidden;z-index:9002}
.lf-guia-card.centro{top:50%;left:50%;transform:translate(-50%,-50%)}
.lf-guia-card .ilu{padding:16px 18px 12px;background:var(--lf-brand-glow);
  border-bottom:1px solid var(--lf-linea)}
.lf-guia-card .txt{padding:14px 18px 16px}
.lf-guia-card .num{font-size:10.5px;font-weight:700;letter-spacing:.5px;
  color:var(--lf-tinta-4);text-transform:uppercase}
.lf-guia-card h3{font-size:16px;font-weight:700;letter-spacing:-.3px;margin:4px 0 6px}
.lf-guia-card p{font-size:12.5px;line-height:1.55;color:var(--lf-tinta-2);margin:0}
.lf-guia-card .acc{display:flex;align-items:center;gap:7px;margin-top:16px}

@media(max-width:940px){
  .lf-guia-card{top:auto!important;bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;
    left:14px!important;right:14px;width:auto;transform:none!important}
  .lf-guia-card.centro{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
}
@media (prefers-reduced-motion:reduce){ .lf-guia-foco{transition:none} }

/* ══════════════════════════════════════════════════════
   30 · TICKETS
   ══════════════════════════════════════════════════════ */
.lf-msj{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--lf-linea)}
.lf-msj:last-child{border-bottom:none;padding-bottom:0}
.lf-msj .lf-av{flex-shrink:0}
.lf-msj .cuerpo{flex:1;min-width:0}
.lf-msj .cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.lf-msj .cab b{font-size:13px;font-weight:600}
.lf-msj .cab .fecha{font-size:11px;color:var(--lf-tinta-4);font-family:var(--lf-mono);margin-left:auto}
.lf-msj p{font-size:13px;line-height:1.6;color:var(--lf-tinta-2);margin:0;overflow-wrap:anywhere}
.lf-msj .adj{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;
  font-weight:600;padding:5px 11px;border-radius:var(--lf-r-pill);background:var(--lf-vidrio)}

/* Una nota interna se distingue de un vistazo: el error más caro de un
   sistema de tickets es mandarle al cliente algo escrito para el equipo. */
.lf-msj.interno{background:var(--lf-amb-soft);border-radius:var(--lf-r);
  padding:14px;margin:6px 0;border-bottom:none;
  border-left:3px solid var(--lf-amb)}
.lf-msj.interno p{color:var(--lf-tinta-2)}

/* ══════════════════════════════════════════════════════
   31 · BITÁCORA
   ══════════════════════════════════════════════════════ */
.lf-audit{display:flex;gap:12px;padding:12px 14px;border-radius:var(--lf-r);
  border-bottom:1px solid var(--lf-linea)}
.lf-audit:last-child{border-bottom:none}
.lf-audit .lf-av{flex-shrink:0;width:30px;height:30px;font-size:11px}
.lf-audit .cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lf-audit .cab b{font-size:13px;font-weight:600}
.lf-audit .acc{font-size:12.5px;color:var(--lf-tinta-3)}
.lf-audit .cab .fecha{margin-left:auto;font-size:11px;color:var(--lf-tinta-4);
  font-family:var(--lf-mono);white-space:nowrap}
.lf-audit .sobre{font-size:12.5px;font-weight:600;margin-top:3px;overflow-wrap:anywhere}
.lf-audit .cambio{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;
  font-size:11.5px;font-family:var(--lf-mono)}
.lf-audit .antes{padding:3px 8px;border-radius:var(--lf-r-sm);
  background:var(--lf-rojo-soft);color:var(--lf-rojo);text-decoration:line-through;
  text-decoration-thickness:1px;overflow-wrap:anywhere}
.lf-audit .desp{padding:3px 8px;border-radius:var(--lf-r-sm);
  background:var(--lf-brand-soft);color:var(--lf-brand-2);overflow-wrap:anywhere}
.lf-audit .fl{color:var(--lf-tinta-4)}
.lf-audit .ip{font-size:10.5px;color:var(--lf-tinta-4);margin-top:5px;font-family:var(--lf-mono)}

/* Lo que mueve dinero se ve distinto: es lo que se revisa primero */
.lf-audit.peso{background:var(--lf-vidrio);border-left:3px solid var(--lf-amb)}

/* Plantillas de respuesta dentro del ticket */
.lf-plant{border:1px dashed var(--lf-linea);background:var(--lf-sup);cursor:pointer;
  font-family:var(--lf-font)}
.lf-plant:hover{border-style:solid;border-color:var(--lf-brand);color:var(--lf-brand-2)}


/* ══════════════════════════════════════════════════════
   32 · REGISTRO
   A donde lleva la landing. Dos columnas: la marca (verde
   oscuro, fija en cualquier tema) y el formulario. En el
   teléfono el formulario va primero.
   ══════════════════════════════════════════════════════ */
body.lf-rg-cuerpo{margin:0;min-height:100vh;min-height:100dvh;background:var(--lf-sup)}
.lf-rg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);min-height:100vh;min-height:100dvh}
/* La marca */
.lf-rg-lado{position:relative;overflow:hidden;color:#fff;
  background:#14291c;
  background-image:radial-gradient(900px 560px at 0% 0%, color-mix(in srgb, var(--lf-brand) 34%, transparent) 0%, transparent 60%),
                   radial-gradient(700px 500px at 100% 100%, color-mix(in srgb, var(--lf-brand) 16%, transparent) 0%, transparent 65%)}
.lf-rg-lado-in{position:sticky;top:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  justify-content:flex-start;padding:clamp(36px,7vh,72px) clamp(28px,6vw,84px) 48px;max-width:680px}
.lf-rg-logo{display:inline-block;margin-bottom:34px;color:#fff;text-decoration:none;
  font-size:24px;font-weight:800;letter-spacing:-.8px}
.lf-rg-logo img{display:block;max-width:170px;height:auto}
.lf-rg-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--lf-brand) 55%, transparent);
  background:color-mix(in srgb, var(--lf-brand) 14%, transparent);
  color:color-mix(in srgb, var(--lf-brand) 55%, #fff);font-size:12.5px;font-weight:700}
.lf-rg-chip i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb, var(--lf-brand) 70%, #fff)}
.lf-rg-lado h1{margin:22px 0 0;font-size:clamp(34px,4.2vw,50px);line-height:1.05;font-weight:800;letter-spacing:-1.6px;color:#fff}
.lf-rg-lado h1 em{font-style:italic;color:color-mix(in srgb, var(--lf-brand) 72%, #9ef09e)}
.lf-rg-intro{margin:18px 0 0;max-width:470px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.lf-rg-beneficios{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.lf-rg-beneficios li{display:flex;align-items:flex-start;gap:14px}
.lf-rg-beneficios .ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:color-mix(in srgb, var(--lf-brand) 60%, #fff)}
.lf-rg-beneficios b{display:block;font-size:15px;font-weight:700;color:#fff}
.lf-rg-beneficios small{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.6)}
.lf-rg-checks{list-style:none;margin:34px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.lf-rg-checks li{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.72)}
.lf-rg-checks svg{flex:none;width:16px;height:16px;color:color-mix(in srgb, var(--lf-brand) 70%, #9ef09e)}
/* El formulario */
.lf-rg-form-lado{display:flex;justify-content:center;align-items:flex-start;padding:clamp(36px,7vh,72px) clamp(22px,5vw,72px) 56px}
.lf-rg-caja{width:100%;max-width:560px}
.lf-rg-logo-movil{display:none}
.lf-rg-caja h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.8px;color:var(--lf-tinta)}
.lf-rg-sub{margin:8px 0 0;font-size:14.5px;color:var(--lf-tinta-3)}
.lf-rg-plan{margin:14px 0 0;padding:10px 14px;border-radius:var(--lf-r);background:var(--lf-brand-soft);
  font-size:13px;color:var(--lf-tinta-2)}
.lf-rg-caja .lf-aviso{margin:18px 0 0}
.lf-rg-form{margin-top:26px;display:flex;flex-direction:column;gap:18px}
.lf-rg-form .dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lf-rg-form .campo{display:flex;flex-direction:column;gap:7px;margin:0;min-width:0;border:0;padding:0}
.lf-rg-form .campo[hidden]{display:none}
.lf-rg-form label,.lf-rg-form legend{font-size:13px;font-weight:600;color:var(--lf-tinta-2);padding:0}
.lf-rg-form legend{margin-bottom:7px}
.lf-rg-form label i,.lf-rg-form legend i{font-style:normal;color:var(--lf-rojo)}
.lf-rg-form .form-control,.lf-rg-form .form-select{width:100%;height:46px;padding:0 14px;font-size:14.5px;
  background:var(--lf-sup-2);border-color:var(--lf-linea)}
.lf-rg-form .form-control:focus,.lf-rg-form .form-select:focus{background:var(--lf-sup)}
.lf-rg-form .form-control:user-invalid{border-color:var(--lf-rojo)}
.lf-rg-form small{font-size:12px;color:var(--lf-tinta-4)}
/* ¿Cuántas personas? Botones, no un menú: es un toque. */
.lf-rg-opciones{display:flex;flex-wrap:wrap;gap:8px}
.lf-rg-opciones label{position:relative;margin:0;cursor:pointer}
.lf-rg-opciones input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lf-rg-opciones span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;
  border:1px solid var(--lf-linea);background:var(--lf-sup-2);font-size:13.5px;font-weight:600;color:var(--lf-tinta-2);
  transition:all .15s}
.lf-rg-opciones label:hover span{border-color:var(--lf-brand)}
.lf-rg-opciones input:checked + span{background:var(--lf-brand-soft);border-color:var(--lf-brand);color:var(--lf-brand-2)}
.lf-rg-opciones input:focus-visible + span{box-shadow:0 0 0 3px var(--lf-brand-ring)}
.lf-rg-dist{margin:0;font-size:13px;color:var(--lf-tinta-3)}
.lf-rg-dist-abre summary{cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--lf-brand-2);
  text-decoration:underline;text-underline-offset:2px}
.lf-rg-dist-abre summary::-webkit-details-marker{display:none}
.lf-rg-dist-abre[open] summary{margin-bottom:12px}
/* La trampa para robots: fuera de la vista, no `display:none` (algunos lo saltan). */
.lf-rg-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* El botón */
.lf-rg-boton{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:4px;
  border:0;border-radius:var(--lf-r);background:var(--lf-brand);color:#fff;text-decoration:none;
  font-family:var(--lf-font);font-size:16px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 24px color-mix(in srgb, var(--lf-brand) 35%, transparent);transition:filter .15s, transform .08s}
.lf-rg-boton:hover{filter:brightness(1.06);color:#fff}
.lf-rg-boton:active{transform:translateY(1px)}
.lf-rg-boton .fl{width:18px;height:18px}
.lf-rg-boton .giro{display:none;width:17px;height:17px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:lf-giro .7s linear infinite}
.lf-rg-boton.cargando .fl{display:none}
.lf-rg-boton.cargando .giro{display:inline-block}
.lf-rg-boton:disabled{cursor:wait;opacity:.85}
.lf-rg-nota{margin:0;text-align:center;font-size:12.5px;line-height:1.6;color:var(--lf-tinta-4)}
.lf-rg-nota a,.lf-rg-entrar a{color:var(--lf-brand-2);font-weight:600}
.lf-rg-entrar{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--lf-linea);text-align:center;
  font-size:14px;color:var(--lf-tinta-3)}
.lf-rg-entrar a::after{content:' →'}
/* Enviada */
.lf-rg-listo{text-align:center}
.lf-rg-listo .ok{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;
  background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-rg-listo .ok svg{width:30px;height:30px}
.lf-rg-listo h2{margin-top:18px}
.lf-rg-listo > p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--lf-tinta-3)}
.lf-rg-listo > p b{color:var(--lf-tinta)}
.lf-rg-pasos{list-style:none;margin:28px 0;padding:0;text-align:left;border:1px solid var(--lf-linea);border-radius:var(--lf-r)}
.lf-rg-pasos li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px}
.lf-rg-pasos li + li{border-top:1px solid var(--lf-linea)}
.lf-rg-pasos .n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--lf-brand-soft);color:var(--lf-brand-2);font-size:12px;font-weight:800}
.lf-rg-pasos b{display:block;font-size:14px;font-weight:700;color:var(--lf-tinta)}
.lf-rg-pasos small{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--lf-tinta-4)}
.lf-rg-volver{display:inline-block;margin-top:16px;font-size:13.5px;color:var(--lf-tinta-3)}
/* Teléfono y tableta: el formulario primero, la marca después. */
@media(max-width:900px){
  .lf-rg{grid-template-columns:1fr}
  .lf-rg-form-lado{order:1;padding:28px 18px 36px;align-items:flex-start}
  .lf-rg-lado{order:2}
  .lf-rg-lado-in{position:static;min-height:0;padding:40px 22px 46px}
  .lf-rg-lado .lf-rg-logo{display:none}
  .lf-rg-logo-movil{display:inline-block;margin-bottom:22px;font-size:22px;font-weight:800;letter-spacing:-.7px;
    color:var(--lf-brand-2);text-decoration:none}
  .lf-rg-caja h2{font-size:24px}
}
@media(max-width:520px){
  .lf-rg-form .dos{grid-template-columns:1fr}
  .lf-rg-checks{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════
   33 · LA PANTALLA DE ENTRAR
   Verde de pared a pared, el logotipo encima y una tarjeta
   verde oscuro. Es la única pantalla que ve alguien que
   todavía no es nadie, así que no reusa los estilos del
   sistema: ahí dentro se ve como un formulario suelto.
   ══════════════════════════════════════════════════════ */
body.lf-centro{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; min-height:100dvh; padding:32px 20px;
  background:var(--lf-brand);
  /* Un degradado apenas perceptible: con el verde plano la pantalla
     se ve impresa, no iluminada. */
  background-image:radial-gradient(1100px 680px at 50% 38%,
    color-mix(in srgb, #fff 9%, transparent) 0%, transparent 62%);
}
/* Esta pantalla no sigue el tema oscuro: la marca manda. */
:root[data-theme="dark"] body.lf-centro{background:var(--lf-brand)}

.lf-entrada{width:100%;max-width:368px;display:flex;flex-direction:column;align-items:center}

.lf-logo{margin-bottom:28px;text-align:center}
.lf-logo img{max-width:260px;width:100%;height:auto;display:block}
.lf-logo-texto{font-size:36px;font-weight:800;letter-spacing:-1.4px;color:#fff;
  font-family:var(--lf-font)}

/* La tarjeta */
.lf-tarjeta {
    width: 110%;
    background: #26512e;
    border-radius: 16px;
    padding: 36px 36px 52px;
    box-shadow: 0 7px 44px rgb(0 0 0 / 50%);
    border: 1px solid #bebebe;
}

.lf-tarjeta h1{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.2px;
  margin-bottom:2px;line-height:1.25}
/* Pegado al título: un subtítulo separado se lee como otra cosa, no
   como la explicación de lo de arriba. */
.lf-sub{font-size:12px;color:color-mix(in srgb,#fff 62%,transparent);
  margin-bottom:22px;line-height:1.35}

.lf-tarjeta label{display:block;font-size:12px;font-weight:500;margin-bottom:7px;
  color:color-mix(in srgb,#fff 80%,transparent)}

/* Los campos, blancos sobre el verde oscuro */
.lf-campo{position:relative;margin-bottom:16px}
.lf-campo svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:#6d7a74;pointer-events:none}
.lf-campo input{
  width:100%;height:44px;padding:0 14px 0 41px;
  background:#fff;border:1.5px solid transparent;border-radius:9px;
  color:#1b2420;font-size:14px;font-family:var(--lf-font);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.lf-campo input::placeholder{color:#9aa8a2}
.lf-campo input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.lf-campo input:disabled{opacity:.6;cursor:not-allowed}
.lf-campo:has(> .lf-ojo) input{padding-right:44px}

.lf-ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;cursor:pointer;border-radius:7px;padding:0;color:#8a9691}
.lf-ojo svg{position:static;transform:none;width:18px;height:18px;color:inherit}
.lf-ojo:hover{background:#f1f4f2;color:#43504a}
.lf-ojo.on{color:var(--lf-brand)}

.lf-olvide{display:block;text-align:right;font-size:11.5px;margin:-6px 0 4px;
  color:color-mix(in srgb,#fff 66%,transparent);text-decoration:underline}
.lf-olvide:hover{color:#fff}

/* La casilla y su texto, centrados entre sí. Con `align-items:center` y
   line-height distinto quedaban desfasados: la casilla arriba y el texto
   un par de píxeles abajo. */
.lf-recordar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    cursor: pointer;
    margin: 4px 0 26px;
    font-size: 12.5px;
    color: color-mix(in srgb, #fff 78%, transparent);
}

.lf-recordar input {
    display: inline-block !important;
    position: static !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 16px !important;
    accent-color: var(--lf-brand);
    cursor: pointer;
}

.lf-recordar span {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 16px;
    white-space: nowrap;
}

/* El botón, verde claro sobre el oscuro */
.lf-boton{
  width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:9px;
  border:none;border-radius:9px;cursor:pointer;
  background:color-mix(in srgb, var(--lf-brand) 78%, #6ee36e);
  color:#fff;font-family:var(--lf-font);font-size:14.5px;font-weight:700;
  transition:filter .15s, transform .08s;
}
.lf-boton:hover:not(:disabled){filter:brightness(1.08)}
.lf-boton:active:not(:disabled){transform:translateY(1px)}
.lf-boton:disabled{opacity:.5;cursor:not-allowed}
.lf-boton .fl{width:17px;height:17px;flex-shrink:0}
/* «Regístralo gratis»: la puerta para quien todavía no tiene cuenta. */
.lf-registrate{padding-top:18px;border-top:1px solid rgba(255,255,255,.14);text-align:center;
  font-size:12.5px;color:color-mix(in srgb,#fff 70%,transparent)}
.lf-registrate a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.lf-boton .giro{display:none;width:16px;height:16px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:lf-giro .7s linear infinite}
.lf-boton.cargando .fl{display:none}
.lf-boton.cargando .giro{display:block}
.lf-boton.cargando{cursor:progress}

/* Avisos dentro de la tarjeta */
.lf-msg{padding:11px 13px;border-radius:9px;font-size:12.5px;line-height:1.5;
  margin-bottom:16px}
.lf-msg.err{background:rgba(207,68,54,.22);color:#ffd9d4}
.lf-msg.amb{background:rgba(197,138,20,.22);color:#ffe9bd}

/* `lf-pie-entrada` y no `lf-pie`: esa ya era el pie de la barra lateral,
   donde van la foto, el nombre y el botón de salir. Al definirla aquí
   —después, y con color blanco— los pintaba invisibles sobre el fondo
   claro del menú. Un nombre repetido en una hoja de estilos no da error:
   simplemente gana el último, y el síntoma aparece en otra pantalla. */
/* De regreso a la landing */
.lf-logo a{display:inline-block}
.lf-volver{margin-top:20px;font-size:12.5px;font-weight:600;text-decoration:none;
  color:color-mix(in srgb,#fff 78%,transparent)}
.lf-volver:hover,.lf-volver:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:2px}

.lf-pie-entrada{margin-top:22px;font-size:11px;text-align:center;
  color:color-mix(in srgb,#fff 52%,transparent)}
.lf-pie-entrada a{color:inherit;text-decoration:underline}

@media(max-width:400px){
  .lf-tarjeta{padding:22px 20px 24px}
  .lf-logo img{max-width:210px}
  .lf-logo-texto{font-size:30px}
}
@media (prefers-reduced-motion:reduce){ .lf-boton .giro{animation-duration:1.6s} }


/* ══════════════════════════════════════════════════════
   34 · CATÁLOGO DE RECARGAS Y SERVICIOS
   ══════════════════════════════════════════════════════ */
.lf-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:10px;padding:4px 20px 16px}
.lf-prod{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 13px;text-align:left;cursor:pointer;
  background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  transition:border-color .12s, background .12s}
.lf-prod:hover{border-color:var(--lf-brand);background:var(--lf-brand-glow)}
.lf-prod.on{border-color:var(--lf-brand);background:var(--lf-brand-soft);
  box-shadow:0 0 0 2px var(--lf-brand-ring)}
.lf-prod b{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--lf-tinta);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lf-prod small{font-size:10.5px;color:var(--lf-tinta-4)}
.lf-prod .m{margin-top:5px;font-family:var(--lf-mono);font-size:13.5px;font-weight:700;
  color:var(--lf-brand-2)}
.lf-prod.var .m{font-family:var(--lf-font);font-size:11.5px;color:var(--lf-amb);font-weight:600}
.lf-prod .c{font-size:10px;color:var(--lf-tinta-4);font-family:var(--lf-mono)}

/* ══════════════════════════════════════════════════════
   35 · LIGAS DE PAGO
   ══════════════════════════════════════════════════════ */
.lf-formas{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.lf-formas .f{padding:15px 16px;border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  background:var(--lf-sup-2)}
.lf-formas b{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  margin-bottom:6px;color:var(--lf-tinta)}
.lf-formas p{font-size:11.5px;color:var(--lf-tinta-4);line-height:1.5;margin-bottom:11px}
.lf-formas .copiar{display:flex;gap:7px}
.lf-formas .copiar input{flex:1;min-width:0;padding:8px 11px;font-size:12px;
  background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r-sm);
  color:var(--lf-tinta);outline:none;text-overflow:ellipsis}
.lf-formas .abrir{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:600}

/* Elegir entre cobrar ahora o mandar una liga */
.lf-cobro-modo{padding:0 20px 14px;display:flex;flex-direction:column;gap:8px}
.lf-cobro-modo .m{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;cursor:pointer;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r);background:var(--lf-sup);
  transition:border-color .12s, background .12s}
.lf-cobro-modo .m.on{border-color:var(--lf-brand);background:var(--lf-brand-glow)}
.lf-cobro-modo .m input{margin-top:2px;accent-color:var(--lf-brand);flex-shrink:0}
.lf-cobro-modo b{display:block;font-size:12.5px;font-weight:600}
.lf-cobro-modo small{display:block;font-size:10.5px;color:var(--lf-tinta-4);line-height:1.4}


/* ══════════════════════════════════════════════════════
   36 · IMÁGENES Y COLOR DE LA MARCA
   Estas reglas se perdieron al rehacer la pantalla de
   entrar: estaban dentro del bloque que se reemplazó.
   Por eso dejaron de verse la foto del perfil, el logo de
   la empresa y el selector de color, sin que nada fallara.
   ══════════════════════════════════════════════════════ */

/* Logo de la empresa, arriba del menú */
.lf-marca img.g{object-fit:cover;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.14)}
.lf-marca b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}

/* Foto de perfil en el avatar */
.lf-av.con-foto{background-size:cover;background-position:center;color:transparent;
  border:2px solid var(--lf-sup);box-shadow:0 0 0 1px var(--lf-linea)}

/* Elegir una imagen, con vista previa */
.lf-foto{display:flex;align-items:center;gap:14px}
.lf-foto .prev{width:64px;height:64px;border-radius:50%;flex-shrink:0;
  background:var(--lf-vidrio);background-size:cover;background-position:center;
  border:1px solid var(--lf-linea);display:flex;align-items:center;justify-content:center;
  color:var(--lf-tinta-4);font-size:22px;font-weight:700;font-family:var(--lf-mono)}
.lf-foto .prev.cuadro{border-radius:var(--lf-r)}
.lf-foto input[type=file]{font-size:12px;color:var(--lf-tinta-3)}
.lf-foto input[type=file]::file-selector-button{
  padding:8px 15px;margin-right:11px;border-radius:var(--lf-r-pill);
  border:1px solid var(--lf-linea);background:var(--lf-sup);color:var(--lf-tinta-2);
  font-family:var(--lf-font);font-size:12.5px;font-weight:600;cursor:pointer}
.lf-foto input[type=file]::file-selector-button:hover{
  border-color:var(--lf-brand);color:var(--lf-brand-2)}

/* Color de la marca */
.lf-colores{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lf-color{width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:2px solid var(--lf-sup);box-shadow:0 0 0 1px var(--lf-linea);transition:transform .12s}
.lf-color:hover{transform:scale(1.12)}
.lf-color.on{box-shadow:0 0 0 2px var(--lf-tinta)}
.lf-color-libre{width:34px;height:34px;padding:0;border:none;background:none;
  cursor:pointer;border-radius:50%;overflow:hidden}
.lf-color-libre::-webkit-color-swatch-wrapper{padding:0}
.lf-color-libre::-webkit-color-swatch{border:2px solid var(--lf-sup);border-radius:50%}

/* Miniatura del servicio en las tablas */
.lf-mini-img{width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:var(--lf-vidrio);background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;color:var(--lf-tinta-4)}

/* El registro usa estas dos, que vivían en el bloque de acceso viejo.
   Sin ellas su botón de enviar salía como texto suelto. */
.lf-aviso{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border-radius:var(--lf-r);font-size:12.5px;line-height:1.5;margin-bottom:18px}
.lf-aviso svg{flex-shrink:0;margin-top:1px}
.lf-aviso.err{background:var(--lf-rojo-soft);color:var(--lf-rojo)}
.lf-aviso.amb{background:var(--lf-amb-soft);color:var(--lf-amb)}



/* ══════════════════════════════════════════════════════
   37 · ALTURAS PAREJAS EN LAS FILAS DE TRES
   Tres tarjetas lado a lado con contenido de distinto
   tamaño se ven rotas. No basta con estirar el contenedor:
   el contenido tiene que repartirse dentro.
   ══════════════════════════════════════════════════════ */
.lf-tres{align-items:stretch}
.lf-tres > .card{display:flex;flex-direction:column;height:100%}
.lf-tres > .card > .card-body,
.lf-tres > .card > div:not(.card-header):not(.card-footer){flex:1;display:flex;
  flex-direction:column}
.lf-tres > .card > .card-footer{margin-top:auto}

/* La dona se centra en el espacio que le toque, en vez de quedar arriba */
.lf-tres .lf-dona-fila{flex:1;align-items:center}

/* Las barras de "cuánto se ha liberado" se reparten el alto disponible */
.lf-tres .card-body > div[style*="margin-bottom"]{flex-shrink:0}

/* Y la lista de "comisión atada" empuja su pie hacia abajo */
.lf-tres .lf-row:last-of-type{margin-bottom:auto}

@media(max-width:1100px){
  .lf-tres > .card{height:auto}
}

/* Lo mismo para las dos columnas: que el contenido llene, no que la
   tarjeta se estire con un hueco abajo. */
.lf-split > .card > .card-body{display:flex;flex-direction:column}
.lf-split > .card > .card-body > :last-child{margin-bottom:0}


/* ══════════════════════════════════════════════════════
   38 · PANEL DE PAGO
   Las tres formas, una al lado de la otra. Se usa igual
   dentro de Caja, en Ligas y en la hoja imprimible.
   ══════════════════════════════════════════════════════ */
.lf-pagar{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.lf-pagar .via{display:flex;flex-direction:column;padding:16px;border-radius:var(--lf-r);
  border:1px solid var(--lf-linea);background:var(--lf-sup-2)}
.lf-pagar .cab{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--lf-tinta)}
.lf-pagar .cab b{font-size:13px;font-weight:600}
.lf-pagar .ind{font-size:11.5px;color:var(--lf-tinta-4);line-height:1.5;margin:8px 0 0}
.lf-pagar .qr{display:flex;justify-content:center;padding:6px 0}
.lf-pagar .qr svg{border-radius:8px;max-width:100%;height:auto}
.lf-pagar .barras{padding:8px 0}
.lf-pagar .barras svg{width:100%;height:auto;border-radius:6px}
.lf-pagar .dato{font-size:16px;font-weight:700;letter-spacing:1px;text-align:center;
  padding:11px;background:var(--lf-sup);border-radius:var(--lf-r-sm);margin:4px 0;
  overflow-wrap:anywhere}
.lf-pagar .copiar{display:flex;gap:7px;margin-top:10px}
.lf-pagar .copiar input{flex:1;min-width:0;padding:8px 11px;font-size:11.5px;
  background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r-sm);
  color:var(--lf-tinta);outline:none;text-overflow:ellipsis}
.lf-pagar .abrir{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:11.5px;font-weight:600}
.lf-pagar-nota{font-size:11.5px;color:var(--lf-tinta-4);line-height:1.6;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--lf-linea)}

/* Dentro de Caja va más apretado: comparte pantalla con el ticket */
.lf-pagar.compacto{grid-template-columns:1fr;gap:10px}
.lf-pagar.compacto .via{padding:13px}
.lf-pagar.compacto .dato{font-size:14px;padding:9px}

/* Contador dentro de la pestaña: dice cuánto hay sin tener que entrar */
.lf-pill .n{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;
  background:var(--lf-vidrio);font-size:10.5px;font-weight:700;font-family:var(--lf-mono);
  color:var(--lf-tinta-3);vertical-align:1px}
.lf-pill.active .n{background:rgba(255,255,255,.22);color:#fff}
/* Sin transición al cambiar de panel: un desvanecido en una tabla de
   cincuenta renglones se ve como un parpadeo, no como suavidad. */
[data-panel][hidden]{display:none !important}

/* Mientras llega el contenido nuevo: se atenúa en vez de parpadear en
   blanco. Un bloque vacío durante 200 ms se lee como un error. */
.lf-cont.cargando{opacity:.45;pointer-events:none;transition:opacity .12s}
.lf-cont{transition:opacity .12s}
@media (prefers-reduced-motion:reduce){ .lf-cont{transition:none} }


/* ══════════════════════════════════════════════════════
   39 · ELEGIR QUÉ IMPRIMIR
   ══════════════════════════════════════════════════════ */
.lf-elegir{margin:0 20px 18px;padding:14px 16px;border-radius:var(--lf-r);
  border:1px solid var(--lf-linea);background:var(--lf-sup-2)}
.lf-elegir .cab{display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-bottom:11px}
.lf-elegir .cab b{display:flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:600;color:var(--lf-tinta)}
.lf-elegir .todas{display:flex;gap:6px}
.lf-elegir .todas button{padding:4px 11px;border-radius:var(--lf-r-pill);
  border:1px solid var(--lf-linea);background:var(--lf-sup);cursor:pointer;
  font-family:var(--lf-font);font-size:11px;font-weight:600;color:var(--lf-tinta-3)}
.lf-elegir .todas button:hover{border-color:var(--lf-brand);color:var(--lf-brand-2)}

.lf-elegir .ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:5px 14px;margin-bottom:13px}
.lf-elegir label{display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:5px 7px;border-radius:var(--lf-r-sm);font-size:12.5px;color:var(--lf-tinta-2)}
.lf-elegir label:hover{background:var(--lf-vidrio)}
.lf-elegir input{width:15px;height:15px;margin:0;accent-color:var(--lf-brand);
  cursor:pointer;flex-shrink:0}
.lf-elegir label span{flex:1;min-width:0;display:flex;align-items:baseline;gap:7px}
.lf-elegir label small{font-family:var(--lf-mono);font-size:10.5px;
  color:var(--lf-tinta-4);flex-shrink:0}

.lf-elegir .ir{text-decoration:none;display:inline-flex;align-items:center}
.lf-elegir .ir.apagado{opacity:.45;pointer-events:none;cursor:not-allowed}
.lf-elegir .nota{font-size:11px;color:var(--lf-tinta-4);line-height:1.5;margin:10px 0 0}

/* Elegir entre dos formas de trabajar */
.lf-modos{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.lf-modos .m{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;cursor:pointer;
  width:100%;border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  background:var(--lf-sup);transition:border-color .12s,background .12s}
.lf-modos .m.on{border-color:var(--lf-brand);background:var(--lf-brand-glow)}
.lf-modos .m input{margin-top:2px;accent-color:var(--lf-brand);flex-shrink:0}
.lf-modos b{display:block;font-size:13px;font-weight:600}
.lf-modos small{display:block;font-size:11.5px;color:var(--lf-tinta-4);line-height:1.5;margin-top:2px}


/* ══════════════════════════════════════════════════════
   40 · EL ATRIBUTO `hidden` SIEMPRE GANA
   Una regla con `display` le gana a `hidden`, y entonces
   un elemento marcado como oculto se queda a la vista.
   Pasó con el velo del menú en móvil: la pantalla salía
   desenfocada y no dejaba tocar nada.
   Esto lo cierra de una vez para todo el sistema, en vez
   de ir protegiendo clase por clase cada que ocurre.
   ══════════════════════════════════════════════════════ */
[hidden]{display:none !important}


/* ══════════════════════════════════════════════════════
   41 · BOTONES DE MÉTODO Y MODAL DE COBRO
   Un método, un botón, un modal. El cajero tiene al
   cliente enfrente: recargar la pantalla le borra el
   contexto y lo obliga a empezar de nuevo.
   ══════════════════════════════════════════════════════ */
.lf-metodos{padding:0 20px 14px}
.lf-metodos .ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:7px}
.lf-metodos .m{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 8px;cursor:pointer;border:1px solid var(--lf-linea);
  border-radius:var(--lf-r);background:var(--lf-sup);color:var(--lf-tinta-3);
  font-family:var(--lf-font);font-size:11.5px;font-weight:600;
  transition:border-color .12s,background .12s,color .12s;text-align:center;line-height:1.25}
.lf-metodos .m:hover{border-color:var(--lf-brand);color:var(--lf-tinta)}
.lf-metodos .m.on{border-color:var(--lf-brand);background:var(--lf-brand-soft);
  color:var(--lf-brand-2);box-shadow:0 0 0 2px var(--lf-brand-ring)}
.lf-metodos .m svg{flex-shrink:0}

.lf-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(16,22,19,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:lf-velo .18s ease}
body.lf-modal-abierto{overflow:hidden}
.lf-modal .caja{width:100%;max-width:430px;max-height:90vh;overflow-y:auto;
  background:var(--lf-sup);border-radius:var(--lf-r-panel);box-shadow:var(--lf-s3);
  animation:lf-sube .22s ease}
@keyframes lf-sube{from{opacity:0;transform:translateY(14px)}}

.lf-modal header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:20px 22px 14px;border-bottom:1px solid var(--lf-linea)}
.lf-modal h2{font-size:17px;font-weight:700;letter-spacing:-.3px;margin:0}
.lf-modal header p{font-size:12px;color:var(--lf-tinta-4);margin:3px 0 0}
.lf-modal .cerrar{width:30px;height:30px;border:none;background:none;cursor:pointer;
  border-radius:50%;font-size:22px;line-height:1;color:var(--lf-tinta-4);flex-shrink:0}
.lf-modal .cerrar:hover{background:var(--lf-vidrio);color:var(--lf-tinta)}

.lf-modal .cuerpo{padding:20px 22px}
.lf-modal .msg{font-size:13px;color:var(--lf-tinta-2);line-height:1.6;margin:0 0 16px}
.lf-modal .aviso{font-size:11.5px;color:var(--lf-tinta-4);line-height:1.55;margin:10px 0 0}
.lf-modal .ok-grande{font-size:34px;font-weight:800;color:var(--lf-brand-2);
  text-align:center;letter-spacing:-1px;margin:6px 0 10px;font-family:var(--lf-mono)}
.lf-modal .qr{display:flex;justify-content:center;min-height:190px;align-items:center;
  margin-bottom:14px}
.lf-modal .qr svg{border-radius:10px;max-width:100%;height:auto}
.lf-modal .dato{font-family:var(--lf-mono);font-size:15px;font-weight:700;letter-spacing:1px;
  text-align:center;padding:13px;background:var(--lf-sup-2);border-radius:var(--lf-r);
  overflow-wrap:anywhere;margin-bottom:9px}
.lf-modal .dato.grande{font-size:20px;letter-spacing:2.5px}
.lf-modal .copiar{display:flex;gap:7px}
.lf-modal .copiar input{flex:1;min-width:0;padding:8px 11px;font-size:11.5px;
  background:var(--lf-sup-2);border:1px solid var(--lf-linea);border-radius:var(--lf-r-sm);
  color:var(--lf-tinta);outline:none;text-overflow:ellipsis;font-family:var(--lf-mono)}

.lf-modal .espera{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;
  border-radius:var(--lf-r);background:var(--lf-amb-soft);color:var(--lf-amb);
  font-size:12px;line-height:1.5}
.lf-modal .espera.ok{background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-modal .espera .giro{width:14px;height:14px;flex-shrink:0;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;animation:lf-giro .8s linear infinite}
.lf-modal .espera.ok .giro{display:none}
.lf-modal .qr .giro{width:26px;height:26px;border:3px solid var(--lf-linea);
  border-top-color:var(--lf-brand);border-radius:50%;animation:lf-giro .8s linear infinite}

.lf-modal footer{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;
  padding:14px 22px 20px;border-top:1px solid var(--lf-linea)}
.lf-modal footer .btn{text-decoration:none;display:inline-flex;align-items:center}
@media(max-width:440px){
  .lf-modal{padding:0;align-items:flex-end}
  .lf-modal .caja{max-width:none;max-height:92vh;border-radius:var(--lf-r-panel) var(--lf-r-panel) 0 0}
  .lf-modal footer .btn{flex:1;justify-content:center}
}

/* ══════════════════════════════════════════════════════
   42 · DE DÓNDE SALE CADA COMISIÓN
   Una por colaborador, cerradas. Abrir las doce de golpe
   sería una pared de mil renglones; quien revisa viene a
   mirar a una persona.
   ══════════════════════════════════════════════════════ */
.lf-colab{margin:0 12px 7px;border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  background:var(--lf-sup);overflow:hidden}
.lf-colab[open]{border-color:var(--lf-brand)}
.lf-colab summary{display:flex;align-items:center;gap:12px;padding:12px 15px;cursor:pointer;
  list-style:none;font-size:13px}
.lf-colab summary::-webkit-details-marker{display:none}
.lf-colab summary::before{content:'';width:0;height:0;flex-shrink:0;
  border-left:5px solid var(--lf-tinta-4);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .15s}
.lf-colab[open] summary::before{transform:rotate(90deg)}
.lf-colab summary:hover{background:var(--lf-vidrio)}
.lf-colab .n{flex:1;min-width:0;font-weight:600;color:var(--lf-tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-colab .p{font-size:11.5px;color:var(--lf-tinta-4);flex-shrink:0}
.lf-colab summary b{font-size:13.5px;color:var(--lf-brand-2);flex-shrink:0}
.lf-colab .table-responsive{padding:0 4px 6px;border-top:1px solid var(--lf-linea)}

/* ══════════════════════════════════════════════════════
   43 · EL CAMBIO
   La cuenta que el cajero hace de cabeza en cada venta y
   donde más se equivoca con prisa.
   ══════════════════════════════════════════════════════ */
.lf-pagacon{padding:0 20px 14px}
.lf-pagacon label{display:block;font-size:12px;font-weight:600;color:var(--lf-tinta-2);
  margin-bottom:6px}
.lf-pagacon input{width:100%;padding:11px 14px;font-size:16px;font-weight:700;
  background:var(--lf-sup-2);border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  color:var(--lf-tinta);outline:none;text-align:right}
.lf-pagacon input:focus{background:var(--lf-sup);border-color:var(--lf-brand);
  box-shadow:0 0 0 3px var(--lf-brand-ring)}
.lf-pagacon .cambio{font-size:14px;font-weight:700;margin:8px 0 0;text-align:right;
  font-family:var(--lf-mono);min-height:19px}
.lf-pagacon .cambio.ok{color:var(--lf-brand-2)}
.lf-pagacon .cambio.falta{color:var(--lf-rojo)}

.lf-modal .etiqueta{font-size:11px;text-transform:uppercase;letter-spacing:1px;
  color:var(--lf-tinta-4);text-align:center;margin:0 0 2px;font-weight:600}
.lf-modal .msg.centro{text-align:center;margin-bottom:0}


/* ══════════════════════════════════════════════════════
   44 · (reservado)
   Aquí vivían unas ventanas flotantes que escribí cuando
   creí haber perdido las tuyas. Tu versión usa `.lf-det`
   y sus propios estilos, así que las mías sobraban —y
   además pisaban `.lf-pers`, que es tu tarjeta—.
   ══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   29 · EL EJE DE MESES DE LAS GRÁFICAS
   Era un flex con los importes completos dentro. `$181,098`
   no cabe en un séptimo de tarjeta —en un teléfono son unos
   45px— y se encimaba con el mes de al lado, en móvil y en
   computadora.

   Rejilla de partes iguales que NO pueden crecer: `1fr` en
   `grid` ya implica `minmax(0,1fr)` solo cuando se declara
   así explícitamente, porque el mínimo por omisión es `auto`
   —el ancho del contenido— y eso es justo lo que desbordaba.
   ══════════════════════════════════════════════════════ */
.lf-ejex{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));
  gap:6px;padding-top:8px}
.lf-ejex > div{min-width:0;text-align:center;overflow:hidden}
.lf-ejex b{display:block;font-size:12px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* El importe se encoge con el ancho disponible en vez de salirse.
   El exacto sigue a un palmo: está en el `title` de la columna. */
.lf-ejex span{display:block;font-size:clamp(9px,2.2vw,11px);color:var(--lf-tinta-4);
  line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-ejex span.q{font-size:clamp(8.5px,2vw,10.5px)}
@media(max-width:420px){
  .lf-ejex{gap:3px}
  .lf-ejex b{font-size:10.5px}
}


/* ══════════════════════════════════════════════════════
   30 · ARCHIVO: UN CONTROL QUE NO SE DESBORDA
   El `<input type=file>` nativo mide lo que mida el nombre
   del archivo. No se le puede poner puntos suspensivos ni
   obligarlo a encogerse: con un nombre largo se sale de su
   tarjeta y empuja el resto de la columna.

   Aquí el input real queda oculto —accesible, no
   `display:none`— y se dibuja un botón y una etiqueta que
   sí obedecen. El nombre lo escribe el JS del layout.
   ══════════════════════════════════════════════════════ */
.lf-file{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;
  flex-wrap:wrap}
.lf-file > input[type=file]{position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lf-file .bt{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:8px 13px;border-radius:var(--lf-r);cursor:pointer;
  border:1px solid var(--lf-linea);background:var(--lf-sup);
  font:inherit;font-size:12.5px;font-weight:600;color:var(--lf-tinta-2);
  transition:border-color .15s,background .15s,color .15s}
.lf-file .bt:hover{border-color:var(--lf-brand);color:var(--lf-brand-2);
  background:var(--lf-brand-glow)}
/* El foco se ve en el botón aunque el que lo tiene sea el input oculto:
   si no, quien navega con teclado no sabe dónde está parado. */
.lf-file > input[type=file]:focus-visible + .bt{border-color:var(--lf-brand);
  box-shadow:0 0 0 3px var(--lf-brand-glow)}
.lf-file .n{flex:1 1 120px;min-width:0;font-size:12px;color:var(--lf-tinta-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-file .n.hay{color:var(--lf-tinta-2);font-weight:500}
/* Red de seguridad para los que sigan siendo nativos */
input[type=file]{max-width:100%}


/* ══════════════════════════════════════════════════════
   31 · EL LATERAL, MÁS AJUSTADO
   240px con etiquetas de siete letras dejaba una franja
   muerta de más de cien píxeles entre el texto y el panel.
   Se recorta el ancho y se reparte el margen interior, que
   estaba cargado a la izquierda.
   ══════════════════════════════════════════════════════ */
@media(min-width:941px){
  :root{--lf-side-w:208px}
  .lf-marca{padding:18px 14px 14px}
  .lf-nav{padding:8px 10px}
  .lf-nav .sec{padding:14px 10px 6px}
  .lf-nav a{padding:9px 10px;gap:10px}
  /* La pestaña de la sección activa vivía fuera del lateral, a -12px del
     borde del enlace. Con menos margen se salía del propio lateral y la
     tapaba el panel. Ahora se pega al borde derecho del lateral. */
  .lf-nav a.on::after{right:-10px;height:20px}
  .lf-pie{padding:10px;margin:0 10px 10px}
}
/* Pantallas anchas: el lateral puede crecer un poco sin dejar hueco,
   porque el panel también crece. */
@media(min-width:1500px){
  :root{--lf-side-w:224px}
}

/* El aviso de "guardado" que aparece junto al formulario */
.lf-guardado{font-size:12px;font-weight:600;margin-top:10px;padding:8px 11px;
  border-radius:var(--lf-r);animation:lf-guardado .18s ease}
.lf-guardado.bien{color:var(--lf-brand-2);background:var(--lf-brand-glow)}
.lf-guardado.mal{color:var(--lf-rojo);background:var(--lf-rojo-soft)}
@keyframes lf-guardado{from{opacity:0;transform:translateY(-3px)}}
.lf-guardado[hidden]{display:none}
/* Mientras guarda, la tarjeta elegida no debe parpadear */
form[data-guardar] .m{transition:border-color .15s,background .15s}


/* ══════════════════════════════════════════════════════
   32 · ENTRAR: EL BOTÓN SE CIERRA SOBRE SÍ MISMO
   El ingreso espera 350 ms a propósito, para que un usuario
   que no existe tarde lo mismo que uno que sí. Ese silencio
   se sentía como que el clic no había funcionado.

   Las letras se juntan en el centro del botón, el botón se
   encoge hasta volverse un círculo y el círculo gira. Al
   entrar, ese mismo círculo se va al centro de la pantalla
   y se abre hasta taparla: lo que hay debajo ya es el
   sistema, así que no se ve ningún salto en blanco.
   ══════════════════════════════════════════════════════ */
.lf-boton{position:relative;overflow:hidden;
  /* EL ANCHO SE MUEVE DESPUÉS, NO A LA VEZ.
     Antes las letras se juntaban mientras el botón se encogía, y como
     las letras siguen siendo elementos de un flex, el propio encogido
     las iba apretando: se veían estirarse y saltar antes de
     desaparecer. Con el retraso, para cuando el botón empieza a
     cerrarse las letras ya son invisibles y lo que se aprieta no se ve.
     `gap` lleva el mismo retraso: cambiarlo de golpe corre el texto
     nueve píxeles en el primer cuadro. */
  transition:filter .15s, transform .08s,
             width .38s cubic-bezier(.66,0,.34,1) .3s,
             border-radius .38s cubic-bezier(.66,0,.34,1) .3s,
             gap .3s ease .3s,
             background-color .25s ease;
  will-change:width}
.lf-boton .txt i{display:inline-block;font-style:normal;white-space:pre;
  transition:transform .34s cubic-bezier(.5,-.2,.35,1.3), opacity .24s ease}

/* Encogido. El radio va a 23px —la mitad del alto— y no a 50%.
   Un 50% sobre un botón ancho es una ELIPSE: por el camino salían unas
   esquinas ovaladas que no eran ni el botón ni el círculo. En píxeles,
   el recorrido entero es una pastilla que acaba siendo circular. */
.lf-boton.lf-cerrando{
  width:46px;min-width:46px;border-radius:23px;gap:0;
  margin-left:auto;margin-right:auto;pointer-events:none;cursor:progress}
.lf-boton.lf-cerrando .txt i{
  transform:translate(var(--dx,0),var(--dy,0)) scale(.35);opacity:0}
.lf-boton.lf-cerrando .fl{opacity:0;transform:scale(.3);transition:opacity .18s,transform .26s}

/* El anillo que gira.
   MEDÍA LO QUE MIDIERA EL BOTÓN: con `inset:9px` sobre un botón de
   trescientos píxeles de ancho, un `border-radius:50%` dibuja una
   elipse larguísima. Aparecía antes de que el botón terminara de
   cerrarse, así que lo que se veía era un óvalo plano girando. Ahora
   mide 26px fijos y está clavado en el centro: es un círculo desde el
   primer cuadro, mida lo que mida el botón. */
.lf-anillo{position:absolute;left:50%;top:50%;width:26px;height:26px;
  margin:-13px 0 0 -13px;border-radius:50%;opacity:0;
  border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;
  transition:opacity .2s ease .3s}
.lf-boton.lf-cerrando .lf-anillo{opacity:1;animation:lf-giro .72s linear infinite}

/* La mancha que se abre al entrar. Blanca en claro, oscura en oscuro:
   si fuera blanca siempre, entrar de noche daría un fogonazo. */
.lf-mancha{position:fixed;border-radius:50%;z-index:9999;pointer-events:none;
  background:#fff;transform:translate(-50%,-50%) scale(0);
  transition:transform .6s cubic-bezier(.72,0,.3,1),
             left .6s cubic-bezier(.72,0,.3,1),
             top .6s cubic-bezier(.72,0,.3,1)}
[data-theme=dark] .lf-mancha{background:#0f1512}

/* Quien pidió menos movimiento recibe el mismo aviso, sin el viaje:
   la animación informa, y quitarla no puede dejarlo sin información. */
@media (prefers-reduced-motion:reduce){
  .lf-boton,.lf-boton .txt i,.lf-mancha{transition:none}
  .lf-boton.lf-cerrando .lf-anillo{animation-duration:1.6s}
  .lf-mancha{transform:translate(-50%,-50%) scale(1)}
}


/* ══════════════════════════════════════════════════════
   33 · AGREGAR A UNA VENTA QUE YA EXISTE
   Cerrado por omisión: abrirlo es la excepción, no el camino
   de todos los días, y un selector siempre abierto invita a
   agregarle cosas a la venta de otro por equivocación.
   ══════════════════════════════════════════════════════ */
.lf-ampliar{margin:0 20px 12px;border:1px dashed var(--lf-linea);border-radius:var(--lf-r);
  overflow:hidden}
.lf-ampliar > summary{display:flex;align-items:center;gap:9px;padding:10px 13px;
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--lf-tinta-3);
  list-style:none;transition:background .15s,color .15s}
.lf-ampliar > summary::-webkit-details-marker{display:none}
.lf-ampliar > summary:hover{background:var(--lf-vidrio);color:var(--lf-tinta-2)}
.lf-ampliar[open] > summary{border-bottom:1px solid var(--lf-linea);color:var(--lf-tinta)}
.lf-ampliar .cuerpo{padding:12px 13px 13px}
.lf-ampliar .pista{font-size:11px;color:var(--lf-tinta-4);margin:7px 2px 9px}
.lf-ampliar .lista{display:flex;flex-direction:column;gap:6px;
  max-height:260px;overflow-y:auto}
.lf-ampliar .nada{font-size:12px;color:var(--lf-tinta-4);text-align:center;padding:14px 0}
.lf-ampliar .v{display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  width:100%;text-align:left;padding:9px 11px;cursor:pointer;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  background:var(--lf-sup);font:inherit;transition:border-color .15s,background .15s}
.lf-ampliar .v:hover{border-color:var(--lf-brand);background:var(--lf-brand-glow)}
.lf-ampliar .v .f{font-size:11.5px;font-weight:600;color:var(--lf-tinta-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-ampliar .v .c{grid-column:1;font-size:12.5px;font-weight:600;color:var(--lf-tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-ampliar .v .d{grid-column:1;font-size:10.5px;color:var(--lf-tinta-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-ampliar .v .s{grid-column:2;grid-row:1/4;align-self:center;
  font-size:11px;font-weight:700;color:var(--lf-tinta-4);white-space:nowrap}
.lf-ampliar .v.debe .s{color:var(--lf-amb)}

/* La barra que recuerda a qué venta se está agregando. Tiene que ser
   imposible de pasar por alto: agregarle servicios a la venta
   equivocada se descubre cuando el cliente reclama. */
.lf-ampliando{display:flex;align-items:center;gap:10px;margin:0 20px 12px;
  padding:10px 12px;border-radius:var(--lf-r);
  background:var(--lf-brand-soft);border:1px solid var(--lf-brand)}
.lf-ampliando[hidden]{display:none}
.lf-ampliando > div{flex:1;min-width:0}
.lf-ampliando b{display:block;font-size:12.5px;color:var(--lf-brand-2)}
.lf-ampliando small{display:block;font-size:11px;color:var(--lf-tinta-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-ampliando .lf-btn-ghost{flex-shrink:0;width:28px;height:28px;font-size:18px;
  line-height:1;color:var(--lf-tinta-3)}
.lf-ampliando .lf-btn-ghost:hover{color:var(--lf-rojo);background:var(--lf-rojo-soft)}
.btn.lf-agregando{background:var(--lf-brand-d)}
@media(max-width:940px){
  .lf-ampliar,.lf-ampliando{margin-left:14px;margin-right:14px}
}


/* ══════════════════════════════════════════════════════
   34 · VER SIN PERDER EL SITIO
   Un panel encima en vez de cambiar de página. Al cerrar
   sigues en tu lista, con tu filtro y tu scroll.
   ══════════════════════════════════════════════════════ */
.lf-vistazo[hidden]{display:none}
.lf-vistazo{position:fixed;inset:0;z-index:70;display:flex;
  align-items:flex-end;justify-content:center}
@media(min-width:721px){.lf-vistazo{align-items:center}}
.lf-vistazo .velo{position:absolute;inset:0;background:rgba(16,22,19,.42);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:lf-velo .2s ease}
.lf-vistazo .hoja{position:relative;display:flex;flex-direction:column;
  width:min(860px,100%);max-height:92vh;max-height:92dvh;
  background:var(--lf-panel);border:1px solid var(--lf-linea);
  border-radius:var(--lf-r-panel) var(--lf-r-panel) 0 0;
  box-shadow:var(--lf-s3);overflow:hidden;
  animation:lf-vistazo-sube .26s cubic-bezier(.32,.72,.3,1)}
@media(min-width:721px){
  .lf-vistazo .hoja{border-radius:var(--lf-r-panel);max-height:86vh;
    animation:lf-asoma .2s ease}
}
@keyframes lf-vistazo-sube{from{transform:translateY(22px);opacity:.6}}
@keyframes lf-asoma{from{transform:scale(.975);opacity:0}}
.lf-vistazo header{display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:13px 14px;border-bottom:1px solid var(--lf-linea);background:var(--lf-sup)}
.lf-vistazo header .tit{flex:1;min-width:0;font-size:14px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-vistazo header .abrir{font-size:11.5px;font-weight:600;color:var(--lf-tinta-4);
  text-decoration:none;white-space:nowrap;flex-shrink:0}
.lf-vistazo header .abrir:hover{color:var(--lf-brand-2)}
.lf-vistazo header button{flex-shrink:0;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--lf-linea);background:var(--lf-panel);cursor:pointer;
  color:var(--lf-tinta-3);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.lf-vistazo header button:hover{color:var(--lf-tinta);border-color:var(--lf-tinta-4)}
.lf-vistazo header .atras[hidden]{display:none}
.lf-vistazo .cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px}
.lf-vistazo .cargando{padding:40px 0;text-align:center;font-size:13px;
  color:var(--lf-tinta-4)}
/* Dentro del panel no hace falta el margen de la página ni una segunda
   tarjeta flotando dentro de otra. */
.lf-vistazo .cuerpo > .lf-rejilla,
.lf-vistazo .cuerpo > div{margin:0}
/* ...pero ENTRE bloques sí, el mismo que en la página: sin esto las
   cifras de arriba quedaban pegadas a Cobranza y Concepto. */
.lf-vistazo .cuerpo > :not(:first-child){margin-top:20px}
.lf-vistazo .cuerpo .card{box-shadow:none}
body.lf-vistazo-abierto{overflow:hidden}
/* La fila que se puede mirar sin salir de la lista */
tr[data-modal],a[data-modal]{cursor:pointer}


/* ══════════════════════════════════════════════════════
   35 · VENTANAS FLOTANTES
   Vienen de Comisiones, donde ya se usaban para mirar las
   ventas de un colaborador sin salir de la lista. Estaban
   dentro de esa vista, así que ninguna otra sección podía
   abrir una. Aquí sirven para todas.

   Viven en <body>, fuera de la rejilla: no mueven nada de
   lo que hay debajo. z-index 200-290: encima del menú y de
   los velos (<=60), debajo de la guía (9000).
   ══════════════════════════════════════════════════════ */
.lf-win{position:fixed;display:flex;flex-direction:column;box-sizing:border-box;
  min-width:300px;min-height:0;max-width:calc(100vw - 8px);max-height:calc(100vh - 8px);
  background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  box-shadow:var(--lf-shadow-lg);overflow:hidden;animation:lf-win-in .16s ease-out}
.lf-win.activa{border-color:var(--lf-brand)}
@keyframes lf-win-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lf-win-bar{display:flex;align-items:center;gap:10px;padding:9px 8px 9px 14px;
  background:var(--lf-vidrio);border-bottom:1px solid var(--lf-linea);
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;flex-shrink:0}
.lf-win.moviendo .lf-win-bar{cursor:grabbing}
.lf-win.moviendo,.lf-win.redim{user-select:none;-webkit-user-select:none}
.lf-win-tit{flex:1;min-width:0}
.lf-win-tit b{display:block;font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-win-tit small{display:block;font-size:11px;color:var(--lf-tinta-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-win-btns{display:flex;gap:4px;flex-shrink:0}
.lf-win-btns button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--lf-r-sm);background:transparent;color:var(--lf-tinta-3);cursor:pointer;padding:0}
.lf-win-btns button:hover{background:var(--lf-sup-2);color:var(--lf-tinta)}
.lf-win-btns button.cerrar:hover{background:var(--lf-rojo-soft);color:var(--lf-rojo)}
.lf-win-btns button:focus-visible{outline:2px solid var(--lf-brand);outline-offset:1px}
.lf-win-btns svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}
.lf-win-busca{padding:8px 12px;border-bottom:1px solid var(--lf-linea);flex-shrink:0}
.lf-win-busca .lf-search input{padding-top:7px;padding-bottom:7px;font-size:12.5px}
.lf-win.mini .lf-win-busca{display:none}
.lf-win-cuerpo{flex:1;min-height:0;overflow:auto;position:relative}
.lf-win-cuerpo .table-responsive{padding:2px 8px 0}
.lf-win.cargando .lf-win-cuerpo{opacity:.55;pointer-events:none}
.lf-win.mini .lf-win-cuerpo,.lf-win.mini .lf-win-grip{display:none}
.lf-win.mini{height:auto!important;min-width:0}
.lf-win.mini .lf-win-bar{border-bottom:0}
.lf-win-msj,.lf-det-vacio{padding:22px;text-align:center;color:var(--lf-tinta-4);font-size:13px;margin:0}
.lf-det-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--lf-linea);
  font-size:12px;color:var(--lf-tinta-4);position:sticky;bottom:0;background:var(--lf-sup)}
/* Esquinas inferiores para cambiar el tamaño */
.lf-win-grip{position:absolute;bottom:0;width:18px;height:18px;z-index:2;touch-action:none}
.lf-win-grip.se{right:0;cursor:nwse-resize}
.lf-win-grip.sw{left:0;cursor:nesw-resize}
.lf-win-grip::after{content:"";position:absolute;bottom:4px;width:8px;height:8px;
  border-bottom:2px solid var(--lf-tinta-4);opacity:.55}
.lf-win-grip.se::after{right:4px;border-right:2px solid var(--lf-tinta-4)}
.lf-win-grip.sw::after{left:4px;border-left:2px solid var(--lf-tinta-4)}
.lf-win-grip:hover::after{opacity:1;border-color:var(--lf-brand)}
@media (prefers-reduced-motion:reduce){.lf-win{animation:none}}

/* El botón que saca el panel a una ventana que se mueve */
.lf-vistazo header .libre{width:auto!important;height:28px;padding:0 11px;
  border-radius:999px;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--lf-tinta-3);white-space:nowrap}
.lf-vistazo header .libre:hover{color:var(--lf-brand-2);border-color:var(--lf-brand);
  background:var(--lf-brand-glow)}
@media(max-width:620px){
  /* En un teléfono no hay dónde mover una ventana: la hoja ya ocupa
     todo. Ofrecerlo sería prometer algo que no cabe. */
  .lf-vistazo header .libre{display:none}
  .lf-win-libre{inset:0!important;width:auto!important;height:auto!important;
    border-radius:0}
  .lf-win-libre .lf-win-grip{display:none}
}

/* Lo que la ventana libre añade sobre la de Comisiones */
.lf-win-bar .atras{width:28px;height:28px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;border:0;background:none;cursor:pointer;
  border-radius:7px;color:var(--lf-tinta-3);padding:0}
.lf-win-bar .atras:hover{background:var(--lf-sup-2);color:var(--lf-tinta)}
.lf-win-bar .atras[hidden]{display:none}
.lf-win-bar .atras svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lf-win-bar .abrir{flex-shrink:0;font-size:11px;font-weight:600;
  color:var(--lf-tinta-4);text-decoration:none;padding:0 6px}
.lf-win-bar .abrir:hover{color:var(--lf-brand-2)}
.lf-win-btns button.maxi:hover{background:var(--lf-brand-glow);color:var(--lf-brand-2)}
/* Agrandada: ocupa la pantalla sin perder la barra, así se puede
   devolver a su tamaño sin adivinar dónde estaba. */
.lf-win.grande{left:8px!important;top:8px!important;
  width:calc(100vw - 16px)!important;height:calc(100vh - 16px)!important}
.lf-win.grande .lf-win-grip{display:none}
.lf-win.grande .lf-win-bar{cursor:default}
/* El cuerpo de una ventana libre trae una página entera: necesita aire
   que el fragmento de Comisiones no necesitaba. */
.lf-win-libre .lf-win-cuerpo{padding:12px}
.lf-win-libre .lf-win-cuerpo .card{box-shadow:none}
.lf-win-libre .lf-win-cuerpo > div{margin:0}
.lf-win-busca[hidden]{display:none}

.lf-elegir .cols-cab{margin-top:14px}
.lf-elegir .ops.cols{margin-bottom:12px}

/* Columnas por tabla dentro de "Qué imprimir" */
.lf-elegir .ops > .it{min-width:0}
.lf-elegir .cols-it{margin:0 0 4px 24px}
.lf-elegir .cols-it summary{cursor:pointer;font-size:11px;color:var(--lf-tinta-4);list-style:none;padding:1px 0}
.lf-elegir .cols-it summary::-webkit-details-marker{display:none}
.lf-elegir .cols-it summary:hover{color:var(--lf-brand-2)}
.lf-elegir .cols-it summary::before{content:'▸ '}
.lf-elegir .cols-it[open] summary::before{content:'▾ '}
.lf-elegir .cols-it .cn{font-family:var(--lf-mono);font-size:10px}
.lf-elegir .cols-l{display:grid;grid-template-columns:1fr;gap:0;margin-top:2px}
.lf-elegir .cols-l label{padding:3px 6px;font-size:12px}

/* Formulario en rejilla: columnas iguales que nunca se encimen. Los campos
   marcados .ancho ocupan dos; en pantallas angostas todo va a una columna. */
.lf-form-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px 18px}
.lf-form-g > div{min-width:0}
.lf-form-g > .ancho{grid-column:span 2}
.lf-form-g .form-control,.lf-form-g .form-select{width:100%}
@media(max-width:560px){.lf-form-g{grid-template-columns:1fr}.lf-form-g > .ancho{grid-column:auto}}
.lf-form-g > .todo{grid-column:1/-1}

/* Lateral en móvil: sin margen muerto a la izquierda. Se fijan los
   márgenes de cada bloque por separado y con más especificidad, para que
   ninguna regla anterior los sume. */
@media(max-width:940px){
  .lf-side{padding-left:0;padding-right:0;margin:0}
  .lf-side .lf-marca{padding:16px 52px 12px 14px;margin:0}
  .lf-side .lf-nav{padding:4px 10px;margin:0}
  .lf-side .lf-nav .sec{padding:14px 8px 6px}
  .lf-side .lf-nav a{padding:10px 10px;margin:0}
  .lf-side .lf-pie{margin:0 10px 10px;padding:10px}
}

/* CAUSA DEL ESPACIO A LA IZQUIERDA EN EL LATERAL MÓVIL: la regla base de
   móvil lo declara como fila con `align-items:center`. Al pasar a columna
   ese centrado se queda, y el logo y el menú se encogían al ancho de su
   contenido y quedaban centrados, con un hueco enorme a la izquierda. */
@media(max-width:940px){
  .lf-side{align-items:stretch;overflow-x:hidden}
  .lf-side .lf-marca,.lf-side .lf-nav,.lf-side .lf-pie{width:auto;align-self:stretch}
  .lf-side .lf-marca{padding:16px 52px 12px 16px}
}

/* Columnas y "con detalle" comparten renglón: así ninguna fila de la
   rejilla de "Qué imprimir" crece más que las demás. */
.lf-elegir .sub{display:flex;align-items:flex-start;gap:4px 14px;flex-wrap:wrap;margin-left:24px}
.lf-elegir .sub .cols-it{margin:0}
.lf-elegir .sub .det{display:inline-flex;align-items:center;gap:6px;padding:1px 0;
  font-size:11px;color:var(--lf-tinta-4);background:none}
.lf-elegir .sub .det:hover{background:none;color:var(--lf-brand-2)}
.lf-elegir .sub .det input{width:13px;height:13px}
.lf-elegir .sub .det span{display:inline}

/* Filas de colaborador: el nombre cede y se corta; el importe nunca se parte. */
.lf-row > span[style*="flex:1"] b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-row > span[style*="flex:1"] small{display:block;line-height:1.35}
@media(max-width:560px){
  .lf-row{gap:10px;padding:10px 8px;align-items:flex-start}
  .lf-row > .lf-av{margin-top:2px}
}

/* Caja: un servicio con imagen la muestra grande, de borde a borde de la
   tarjeta. Sin imagen se queda el ícono de siempre. */
.lf-serv{overflow:hidden}
.lf-serv .e[style*="background-image"]{width:calc(100% + 22px);height:92px;margin:-13px -11px 10px;
  border-radius:0;background-position:center;background-repeat:no-repeat}
@media(max-width:560px){
  .lf-serv .e[style*="background-image"]{height:76px}
}

/* ══════════════════════════════════════════════════════
   CAJA · TARJETAS DE PRODUCTO PAREJAS
   Todas miden lo mismo: la zona de imagen o ícono tiene la misma
   altura, el nombre ocupa siempre tres renglones como máximo (con
   puntos suspensivos) y el código y el precio quedan abajo. Así un
   producto con nombre largo o con foto no descuadra a los demás.
   ══════════════════════════════════════════════════════ */
.lf-grid-serv{grid-auto-rows:minmax(0,auto)}
.lf-serv{display:flex;flex-direction:column;align-items:stretch;
  height:224px;padding:0 11px 12px;overflow:hidden}
.lf-serv .e,
.lf-serv .e[style*="background-image"]{
  flex:0 0 96px;width:calc(100% + 22px);height:96px;margin:0 -11px 10px;
  border-radius:0;background-position:center;background-repeat:no-repeat;background-size:cover}
.lf-serv .e svg{width:26px;height:26px}
.lf-serv b{display:block;flex:0 0 auto;min-height:0;height:calc(1.3em * 3);
  margin-bottom:4px;overflow:hidden;text-align:center;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
.lf-serv small{flex:0 0 auto;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-serv .p{margin-top:auto;padding-top:6px}
@media(max-width:560px){
  .lf-serv{height:204px}
  .lf-serv .e,.lf-serv .e[style*="background-image"]{flex-basis:80px;height:80px}
}

/* CAJA · LA IMAGEN ESCALA CON LA TARJETA
   Con una altura fija en píxeles, en móvil la tarjeta es ancha y la foto
   quedaba como una tira recortada. Ahora la zona de imagen mantiene una
   proporción 4:3 y crece con el ancho de la tarjeta, en cualquier
   pantalla. Todas las tarjetas siguen midiendo igual porque comparten
   ancho, proporción y tres renglones de nombre. */
.lf-serv{height:auto}
.lf-serv .e,
.lf-serv .e[style*="background-image"]{
  flex:0 0 auto;height:auto;aspect-ratio:4 / 3;
  background-size:cover;background-position:center}
.lf-grid-serv{grid-auto-rows:1fr}
@media(max-width:560px){
  .lf-grid-serv{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 14px 16px}
  .lf-serv{height:auto}
  .lf-serv .e,.lf-serv .e[style*="background-image"]{flex-basis:auto;height:auto}
}

/* Aviso de suscripción por vencer, arriba de cada pantalla */
.lf-aviso-plan{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;
  text-decoration:none;color:inherit;line-height:1.45}
.lf-aviso-plan svg{flex-shrink:0;margin-top:1px}
.lf-aviso-plan u{text-underline-offset:2px;font-weight:600;white-space:nowrap}
.lf-aviso-plan:hover{color:inherit;filter:brightness(1.04)}

/* ══════════════════════════════════════════════════════
   PLANES · Mi cuenta → Plan
   Tarjetas parejas con selector Mensual / Anual. Todo con las
   variables del sistema: sigue el tema claro/oscuro y el color de
   marca elegido.
   ══════════════════════════════════════════════════════ */
.lf-planes{margin-bottom:22px}
.lf-planes .cab{text-align:center;margin:6px 0 24px}
.lf-planes .cab h2{font-size:23px;letter-spacing:-.5px;margin:0 0 6px}
.lf-planes .cab p{color:var(--lf-tinta-3);font-size:13.5px;margin:0 0 16px}

.lf-periodo{display:inline-flex;gap:4px;padding:4px;border-radius:var(--lf-r-pill);
  background:var(--lf-vidrio);border:1px solid var(--lf-linea)}
.lf-periodo button{border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--lf-tinta-3);padding:7px 16px;border-radius:var(--lf-r-pill);
  display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s}
.lf-periodo button.on{background:var(--lf-brand);color:#fff;box-shadow:var(--lf-s1)}
.lf-periodo .ahorro{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:99px;
  background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-periodo button.on .ahorro{background:rgba(255,255,255,.22);color:#fff}

.lf-planes .rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:16px;align-items:stretch;padding-top:14px}

.lf-plan{position:relative;display:flex;flex-direction:column;padding:22px 20px 20px;
  background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r-lg);
  box-shadow:var(--lf-s1);transition:transform .15s,box-shadow .15s,border-color .15s}
.lf-plan:hover{transform:translateY(-3px);box-shadow:var(--lf-s2);border-color:var(--lf-linea-f)}
.lf-plan.popular{border:2px solid var(--lf-brand);box-shadow:var(--lf-s2)}
.lf-plan.actual{background:color-mix(in srgb,var(--lf-brand) 5%,var(--lf-sup))}
.lf-plan .cinta{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--lf-brand);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;padding:4px 14px;border-radius:99px;white-space:nowrap}

.lf-plan h3{font-size:16px;font-weight:700;text-align:center;margin:0 0 12px;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.lf-plan .precio{text-align:center}
.lf-plan .precio b{display:block;font-size:34px;font-weight:700;letter-spacing:-1.2px;line-height:1.1}
.lf-plan .precio span{font-size:12px;color:var(--lf-tinta-3)}
.lf-plan .cobro{text-align:center;font-size:11.5px;color:var(--lf-tinta-4);margin:6px 0 16px;
  min-height:2.9em;line-height:1.4}

.lf-plan .caract{flex:1;border-top:1px dashed var(--lf-linea-f);padding-top:12px;margin-bottom:18px}
.lf-plan .caract h4{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--lf-tinta-4);margin:12px 0 6px}
.lf-plan .caract h4:first-child{margin-top:0}
.lf-plan .caract ul{list-style:none;margin:0 0 4px;padding:0}
.lf-plan .caract li{display:flex;align-items:flex-start;gap:9px;font-size:13px;
  color:var(--lf-tinta-2);padding:4px 0;line-height:1.4}
.lf-plan .caract li svg{flex-shrink:0;margin-top:2px;color:var(--lf-brand-2)}

.lf-plan form{margin-top:auto}
.lf-plan form .btn{width:100%;padding:11px;border-radius:var(--lf-r-pill);font-weight:600}
@media(max-width:560px){
  .lf-planes .rejilla{grid-template-columns:1fr}
  .lf-plan .cobro{min-height:0}
}
@media(prefers-reduced-motion:reduce){.lf-plan,.lf-periodo button{transition:none}}

/* Búsqueda sin acotar al periodo */
.lf-filtros .lf-solo{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--lf-tinta-3);cursor:pointer;white-space:nowrap;margin:0}
.lf-filtros .lf-solo input{margin:0;accent-color:var(--lf-brand)}
.lf-nota-busqueda{margin:-6px 0 16px;padding:9px 13px;font-size:12.5px;line-height:1.5;
  color:var(--lf-brand-2);background:var(--lf-brand-soft);border-radius:var(--lf-r)}

/* Caja · "Ya me pagaron": no generar liga y cobrar como pagado */
.lf-sinliga{margin:0 20px 14px;padding:11px 13px;border-radius:var(--lf-r);
  background:var(--lf-vidrio);border:1px solid var(--lf-linea)}
.lf-sinliga > label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:0;
  font-size:13px;line-height:1.4;color:var(--lf-tinta-2)}
.lf-sinliga > label input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--lf-brand)}
.lf-sinliga small{display:block;font-size:11.5px;color:var(--lf-tinta-4);margin-top:2px}
.lf-sinliga .ref{margin-top:11px;padding-top:11px;border-top:1px dashed var(--lf-linea-f)}
.lf-sinliga .ref label{display:block;font-size:12px;font-weight:600;color:var(--lf-tinta-2);margin-bottom:6px}
.lf-sinliga .ref label small{display:inline;font-weight:400}
.lf-sinliga[hidden],.lf-sinliga .ref[hidden]{display:none}

/* ══════════════════════════════════════════════════════
   LOGIN · CUANDO NO ENTRA
   La animación de entrada termina en un círculo que gira, y de ahí
   solo sabía irse a la pantalla. Si la contraseña era mala, el botón
   saltaba de vuelta a medias y las letras reaparecían mientras todavía
   se encogía. Ahora el círculo se pone ROJO con una X blanca, se queda
   un momento, y el botón vuelve a su tamaño normal.
   ══════════════════════════════════════════════════════ */
.lf-equis{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  opacity:0;transform:scale(.3);pointer-events:none;
  transition:opacity .15s ease,transform .32s cubic-bezier(.3,1.7,.5,1)}
.lf-equis svg{display:block;width:100%;height:100%}
.lf-boton.lf-error{background:var(--lf-rojo)}
.lf-boton.lf-error:disabled{opacity:1}          /* disabled lo apagaba a la mitad */
.lf-boton.lf-error .lf-anillo{opacity:0;animation:none;transition:opacity .1s ease}
.lf-boton.lf-error .lf-equis{opacity:1;transform:scale(1)}

/* Al volver, sin el retraso de la ida: el botón ya estaba cerrado y
   esperar un tercio de segundo antes de abrirse se siente trabado. */
.lf-boton.lf-vuelve{
  transition:filter .15s, transform .08s,
             width .36s cubic-bezier(.66,0,.34,1),
             border-radius .36s cubic-bezier(.66,0,.34,1),
             gap .3s ease,
             background-color .3s ease}
@media (prefers-reduced-motion:reduce){ .lf-equis{transition:none} }

/* El botón se centra con márgenes automáticos SIEMPRE, no solo cerrado.
   Antes `margin: auto` existía solo en `.lf-cerrando`: al volver a su
   tamaño los márgenes pasaban a 0 de golpe (los márgenes no se animan),
   el círculo saltaba a la izquierda y desde ahí crecía. Con el botón al
   100% de ancho los márgenes automáticos no cambian nada; durante la
   transición mantienen el centro fijo, así que se cierra y se abre
   desde el mismo punto. */
.lf-boton{margin-left:auto;margin-right:auto}

/* LAS LETRAS VUELVEN CUANDO EL BOTÓN YA CASI ESTÁ ABIERTO.
   Al regresar, las letras empezaban a aparecer a la vez que el botón
   se ensanchaba: con el botón todavía más angosto que el texto, el
   texto se apretaba y las letras se veían deformadas. Es el mismo
   problema que ya se resolvió al cerrar (las letras se van antes de que
   el botón se encoja), pero a la inversa: ahora esperan a que el ancho
   esté casi completo y entonces vuelan a su sitio. */
.lf-boton .txt{flex-shrink:0;white-space:nowrap}   /* nunca se encoge, solo se recorta */
.lf-boton.lf-vuelve .txt i{
  transition:transform .34s cubic-bezier(.3,.9,.4,1.15) .26s,
             opacity .22s ease .26s}
.lf-boton.lf-vuelve .fl{transition:opacity .2s ease .3s,transform .28s ease .3s}

/* Al aparecer la X, el círculo rojo VIBRA: oscilaciones muy rápidas y
   pequeñas, como un teléfono, no un vaivén lento. Muchos cambios de
   dirección en poco tiempo es lo que hace que se sienta vibración y no
   movimiento; el recorrido se mantiene corto para que no sea brusco. */
@keyframes lf-vibra{
  0%,100%{transform:translateX(0)}
  8%{transform:translateX(-1.5px)}
  16%{transform:translateX(1.5px)}
  24%{transform:translateX(-1.5px)}
  32%{transform:translateX(1.5px)}
  40%{transform:translateX(-1.2px)}
  48%{transform:translateX(1.2px)}
  56%{transform:translateX(-1px)}
  64%{transform:translateX(.8px)}
  72%{transform:translateX(-.6px)}
  82%{transform:translateX(.5px)}
  92%{transform:translateX(-.3px)}
}
.lf-boton.lf-error{animation:lf-vibra .34s linear both}
@media (prefers-reduced-motion:reduce){ .lf-boton.lf-error{animation:none} }

/* Caja · resumen de confirmación antes de registrar */
.lf-conf-av{margin-bottom:14px;padding:11px 14px;border-radius:var(--lf-r);
  background:var(--lf-amb-soft);color:var(--lf-amb)}
.lf-conf-av p{margin:0;font-size:12.5px;line-height:1.5}
.lf-conf-av p + p{margin-top:5px}
.lf-conf-items{list-style:none;margin:0 0 4px;padding:0;font-size:13px}
.lf-conf-items li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--lf-linea)}
.lf-conf-items li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-conf-items li.mas{color:var(--lf-tinta-4);justify-content:flex-start;border-bottom:0}
.lf-conf-total{display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 0 10px;font-size:13px;color:var(--lf-tinta-3)}
.lf-conf-total b{font-size:24px;letter-spacing:-.6px;color:var(--lf-tinta)}
.lf-conf-datos{margin:0;padding:12px 14px;border-radius:var(--lf-r);background:var(--lf-vidrio);font-size:12.5px}
.lf-conf-datos div{display:flex;justify-content:space-between;gap:14px;padding:4px 0}
.lf-conf-datos dt{font-weight:400;color:var(--lf-tinta-3)}
.lf-conf-datos dd{margin:0;text-align:right;font-weight:600;color:var(--lf-tinta)}
.lf-conf-datos i{font-style:normal;font-weight:400;color:var(--lf-tinta-4)}

/* ══════════════════════════════════════════════════════
   REPORTES · COBROS DE VENTAS DE OTROS MESES
   El folio abre la venta en el panel de al lado; los cobros
   de ventas de otro periodo se marcan; y donde una tabla va
   por fecha de venta se avisa de lo que no enseña.
   ══════════════════════════════════════════════════════ */
.lf-folio{font-weight:600;color:var(--lf-brand-2);text-decoration:none;
  border-bottom:1px dashed color-mix(in srgb,var(--lf-brand) 45%,transparent)}
.lf-folio:hover{color:var(--lf-brand);border-bottom-style:solid}
.lf-origen{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:99px;
  font-family:var(--lf-font);font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.2px;vertical-align:1px;background:var(--lf-amb-soft);color:var(--lf-amb)}
tr.lf-fila-otro > td{background:color-mix(in srgb,var(--lf-amb) 6%,transparent)}
.lf-otros{margin:10px 0 0;padding:10px 13px;border-radius:var(--lf-r);font-size:12.5px;
  line-height:1.55;color:var(--lf-tinta-2);background:var(--lf-amb-soft);
  border-left:3px solid var(--lf-amb)}
.lf-otros.en-tabla{margin:0 20px 14px}
.lf-otros a{font-weight:600;white-space:nowrap}
.lf-partes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;
  padding:0 20px 14px}
.lf-partes > div{padding:11px 14px;border-radius:var(--lf-r);background:var(--lf-vidrio);
  border:1px solid var(--lf-linea)}
.lf-partes > div.otro{background:color-mix(in srgb,var(--lf-amb) 7%,var(--lf-sup));
  border-color:color-mix(in srgb,var(--lf-amb) 30%,transparent)}
.lf-partes small{display:block;font-size:11px;color:var(--lf-tinta-4);margin-bottom:3px}
.lf-partes b{display:block;font-size:18px;letter-spacing:-.4px;color:var(--lf-tinta)}
.lf-partes span{display:block;font-size:11px;color:var(--lf-tinta-3);margin-top:2px}

/* Reportes · columna "De ventas anteriores" de la tarjeta por área:
   separada de la utilidad con una línea, porque no suma a ella. */
th.lf-col-ant, td.lf-col-ant{border-left:1px dashed var(--lf-linea-f)}
td.lf-col-ant b{display:block;font-weight:700;color:var(--lf-amb)}
td.lf-col-ant small{display:block;font-size:10.5px;color:var(--lf-tinta-4);font-family:var(--lf-font)}
@media(max-width:760px){ th.lf-col-ant, td.lf-col-ant{border-left:0} }
.lf-ant-val{display:inline-block;text-align:right}

/* ══════════════════════════════════════════════════════
   COMISIONES EN LOTE
   ══════════════════════════════════════════════════════ */
.lf-lote-atras{display:inline-block;margin:0 0 14px;font-size:12.5px;font-weight:600;
  color:var(--lf-tinta-3);text-decoration:none}
.lf-lote-atras:hover{color:var(--lf-brand)}
.lf-lote-paso{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  margin-right:9px;border-radius:50%;font-size:11.5px;font-weight:700;
  background:var(--lf-brand-soft);color:var(--lf-brand-2);vertical-align:1px}
.lf-lote-filtros,.lf-lote-quien{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:4px 20px 18px}
.lf-lote-filtros label,.lf-lote-quien label{display:flex;flex-direction:column;gap:5px;
  font-size:11.5px;font-weight:600;color:var(--lf-tinta-3);min-width:150px}
.lf-lote-filtros .form-control,.lf-lote-filtros .form-select{height:36px;min-width:150px}
.lf-lote-filtros .lf-lote-chk{flex-direction:row;align-items:center;gap:7px;height:36px;
  font-weight:500;color:var(--lf-tinta-2);font-size:12.5px;min-width:0}
.lf-lote-quien label.quien,.lf-lote-quien label.en{flex:1 1 220px;max-width:340px}
.lf-lote-quien label.pct{flex:0 0 130px;min-width:0}
.lf-lote-pct{position:relative;display:block}
.lf-lote-pct input{padding-right:30px}
.lf-lote-pct i{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-style:normal;font-weight:600;color:var(--lf-tinta-4);pointer-events:none}
.lf-lote-sub{display:block;color:var(--lf-tinta-4);font-size:11.5px;font-weight:400}
.lf-lote-tabla input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--lf-brand)}
.lf-lote-tabla input[type=checkbox]:disabled{cursor:not-allowed}
.lf-lote-tabla tr.no td{color:var(--lf-tinta-4)}
.lf-lote-tabla tr.no td a{color:var(--lf-tinta-3)!important}
.lf-lote-motivo{font-size:12px;font-weight:600;color:var(--lf-brand-2);white-space:nowrap}
.lf-lote-tabla tr.no .lf-lote-motivo{color:var(--lf-amb);font-weight:500;white-space:normal}
.lf-lote-pie{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--lf-linea)}
.lf-lote-pie p{margin:0;font-size:12.5px;color:var(--lf-tinta-3)}
.lf-lote-tope,.lf-lote-vacio{margin:0 20px 14px;padding:10px 14px;border-radius:var(--lf-r);
  font-size:12.5px;background:var(--lf-vidrio);color:var(--lf-tinta-3)}
.lf-lote-vacio{text-align:center;padding:28px 14px}
.lf-lote-res .card-header p{font-size:12.5px;color:var(--lf-tinta-3);margin:3px 0 0;font-weight:400}
.lf-lote-omit{list-style:none;margin:0;padding:4px 20px 14px;font-size:12.5px;max-height:260px;overflow-y:auto}
.lf-lote-omit li{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--lf-vidrio)}
.lf-lote-omit li:last-child{border-bottom:0}
.lf-lote-omit li b{flex:0 0 auto;min-width:96px;font-size:12px}
.lf-lote-omit li span{color:var(--lf-tinta-3)}
.lf-lote-omit li.mas{color:var(--lf-tinta-4)}
@media(max-width:760px){
  .lf-lote-filtros,.lf-lote-quien{padding:4px 14px 16px}
  .lf-lote-filtros label,.lf-lote-quien label,.lf-lote-quien label:last-child{flex:1 1 100%;max-width:none;min-width:0}
  .lf-lote-filtros .btn{width:100%}
  .lf-lote-pie{padding:14px}
  .lf-lote-pie .btn{width:100%}
  .lf-lote-motivo{white-space:normal}
}
/* Ventas con varios productos: cada uno con su área y sus comisiones. */
.lf-lote-prods{list-style:none;margin:6px 0 0;padding:0 0 0 10px;border-left:2px solid var(--lf-linea)}
.lf-lote-prods li{padding:2px 0;font-size:12px;line-height:1.35}
.lf-lote-prods li span{display:block;font-weight:500;color:var(--lf-tinta-2)}
.lf-lote-prods li small{display:block;font-size:10.5px;color:var(--lf-tinta-4)}
.lf-lote-prods li.fuera{opacity:.55}
@media(max-width:760px){
  .lf-lote-tabla td[data-label="Venta"]{flex-wrap:wrap}
  .lf-lote-prods{flex:1 1 100%;text-align:left}
}
/* Varias personas: una fila por cada una, con su porcentaje y en qué. */
.lf-lote-quienes{padding:4px 20px 4px;display:flex;flex-direction:column;gap:10px}
.lf-lote-quienes .lf-lote-quien{display:block;padding:12px 14px 10px;border:1px solid var(--lf-linea);border-radius:var(--lf-r);background:var(--lf-sup);cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.lf-lote-quien .form-control,.lf-lote-quien .form-select{height:38px}
.lf-lote-quien .campos{display:flex;flex-wrap:nowrap;gap:12px 22px;align-items:flex-end}
.lf-lote-quitar{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  background:none;color:var(--lf-tinta-4);font-size:18px;line-height:1;cursor:pointer}
.lf-lote-quitar:hover{color:var(--lf-rojo);border-color:currentColor}
.lf-lote-mas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 20px 18px}
.lf-lote-mas span{font-size:12.5px;color:var(--lf-tinta-3)}
.lf-lote-mas span.mal{color:var(--lf-amb);font-weight:600}
/* Casillas por producto dentro de la venta. */
.lf-lote-prods label{display:flex;gap:7px;align-items:flex-start;margin:0;cursor:pointer}
.lf-lote-prods label input{margin-top:2px;flex-shrink:0}
@media(max-width:760px){
  .lf-lote-quienes{padding:4px 14px 2px}
  .lf-lote-quien .campos{flex-wrap:wrap}
  .lf-lote-quien label.quien,.lf-lote-quien label.en{flex:1 1 100%;max-width:none}
  .lf-lote-quien label.pct{flex:1 1 auto}
  .lf-lote-mas{padding:0 14px 16px}
}
/* Quiénes van en cada venta: solo se lee; se cambia desde la tarjeta de la persona. */
.lf-lote-estado{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.lf-lote-para{font-size:11px;color:var(--lf-tinta-4);line-height:1.4}
.lf-lote-para span + span::before{content:" · "}
.lf-lote-para span.yo{color:var(--lf-brand-2);font-weight:700}
@media(max-width:760px){ .lf-lote-estado{align-items:flex-end} .lf-lote-para{text-align:right} }
/* La tarjeta de cada persona: tocarla la selecciona para elegir sus ventas. */
.lf-lote-quienes .lf-lote-quien:hover{border-color:color-mix(in srgb,var(--lf-brand) 45%,var(--lf-linea))}
.lf-lote-quienes .lf-lote-quien.activa{border-color:var(--lf-brand);background:var(--lf-brand-soft);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lf-brand) 18%,transparent)}
.lf-lote-quien .pie{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding-top:9px;border-top:1px dashed var(--lf-linea);font-size:12px;color:var(--lf-tinta-3)}
.lf-lote-quien.activa .pie{border-top-color:color-mix(in srgb,var(--lf-brand) 35%,transparent);color:var(--lf-brand-2);font-weight:600}
.lf-lote-elegir{border:1px solid var(--lf-linea);background:var(--lf-sup);color:var(--lf-tinta-2);
  border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer}
.lf-lote-elegir:hover:not(:disabled){border-color:var(--lf-brand);color:var(--lf-brand-2)}
.lf-lote-elegir:disabled{opacity:.5;cursor:not-allowed}
.lf-lote-quien.activa .lf-lote-elegir{background:var(--lf-brand);border-color:var(--lf-brand);color:#fff}
/* Mientras se eligen las ventas de alguien: aviso fijo arriba de la lista. */
.lf-lote-modo{position:sticky;top:8px;z-index:5;display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin:0 20px 12px;padding:10px 14px;border-radius:var(--lf-r);
  background:var(--lf-brand-soft);border:1px solid var(--lf-brand);color:var(--lf-brand-2);font-size:12.5px;
  box-shadow:var(--lf-s2)}
.lf-lote-modo b{font-weight:700}
.lf-lote-tabla.modo-persona thead th:first-child,
.lf-lote-tabla.modo-persona tbody td:first-child{background:color-mix(in srgb,var(--lf-brand) 7%,transparent)}
.lf-lote-tabla.modo-persona tr.mia td{background:color-mix(in srgb,var(--lf-brand) 5%,transparent)}
.lf-lote-tabla.modo-persona tr.ajena{opacity:.45}

@media(max-width:760px){ .lf-lote-modo{margin:0 14px 12px;top:4px} }

/* Bitácora: lo que tocó una operación en lote, desplegable. */
.lf-audit-det{margin-top:8px;font-size:12px}
.lf-audit-det summary{cursor:pointer;display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:4px 10px;border:1px solid var(--lf-linea);border-radius:999px;background:var(--lf-sup);
  font-weight:600;color:var(--lf-brand-2);list-style:none;user-select:none}
.lf-audit-det summary::-webkit-details-marker{display:none}
.lf-audit-det summary::before{content:"▸";font-size:10px;transition:transform .15s}
.lf-audit-det[open] summary::before{transform:rotate(90deg)}
.lf-audit-det summary .om{color:var(--lf-amb)}
.lf-audit-det .ventas{list-style:none;margin:8px 0 0;padding:0;max-height:360px;overflow-y:auto;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r);background:var(--lf-sup)}
.lf-audit-det .ventas > li{padding:8px 12px;border-bottom:1px solid var(--lf-vidrio)}
.lf-audit-det .ventas > li:last-child{border-bottom:0}
.lf-audit-det .v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lf-audit-det .v a{font-weight:700;color:var(--lf-tinta);text-decoration:none}
.lf-audit-det .v a:hover{color:var(--lf-brand)}
.lf-audit-det .v .cli{flex:1;min-width:0;color:var(--lf-tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-audit-det .v b{font-weight:700}
.lf-audit-det .c{display:flex;justify-content:space-between;gap:10px;padding:3px 0 0 12px;color:var(--lf-tinta-2)}
.lf-audit-det .c small{display:block;font-size:10.5px;color:var(--lf-tinta-4)}
.lf-audit-det .om-t{margin:10px 0 4px;font-weight:700;color:var(--lf-amb);font-size:11.5px}
.lf-audit-det .omit{list-style:none;margin:0;padding:0}
.lf-audit-det .omit li{display:flex;gap:10px;padding:3px 0;border-bottom:1px solid var(--lf-vidrio)}
.lf-audit-det .omit li b{flex:0 0 auto;font-size:11.5px}
.lf-audit-det .omit li span{color:var(--lf-tinta-3)}
/* Venta de un mes anterior con cobros en el periodo. */
.lf-lote-ant{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:11px;
  background:color-mix(in srgb,var(--lf-amb) 13%,transparent);color:var(--lf-tinta-2)}
.lf-lote-ant b{font-weight:700;color:var(--lf-amb)}
/* Bitácora: ventas de meses anteriores (abonos y liquidaciones) dentro de un lote. */
.lf-audit-det summary .ant{color:var(--lf-amb)}
.lf-audit-det .nota{margin:8px 0 0;font-size:11.5px;color:var(--lf-tinta-3);line-height:1.5}
.lf-audit-det .ant-v{display:inline-block;margin:3px 0 2px;padding:1px 8px;border-radius:999px;font-size:10.5px;
  background:color-mix(in srgb,var(--lf-amb) 13%,transparent);color:var(--lf-tinta-2)}
.lf-audit-det .ant-v b{color:var(--lf-amb);font-weight:700}
/* Quién va en cada producto de una venta con varios. */
.lf-lote-prods li .quien{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--lf-brand-2)}
.lf-lote-prods li.fuera .quien{color:var(--lf-tinta-4);font-weight:500}
.lf-lote-tabla.modo-persona .lf-lote-prods{border-left-color:var(--lf-brand)}
/* Mi cuenta (soporte): si el cliente ve mi foto en los tickets. */
.lf-foto-pub{margin-top:16px;padding-top:14px;border-top:1px solid var(--lf-linea)}
.lf-foto-pub-chk{display:flex;gap:10px;align-items:flex-start;margin:0;cursor:pointer}
.lf-foto-pub-chk input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--lf-brand)}
.lf-foto-pub-chk b{display:block;font-size:13px;font-weight:600;color:var(--lf-tinta)}
.lf-foto-pub-chk small{display:block;font-size:11.5px;color:var(--lf-tinta-4);margin-top:2px;line-height:1.45}

/* ══════════════════════════════════════════════════════
   CHAT DE SOPORTE · en vivo, avisos y chat flotante
   ══════════════════════════════════════════════════════ */
/* El pie de una respuesta: nota interna, evidencia y enviar en una fila. */
.lf-resp-pie{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.lf-resp-pie .lf-file{flex:1 1 220px}
.lf-resp-pie .btn{margin-left:auto}
.lf-resp-interno{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;cursor:pointer;white-space:nowrap}
.lf-resp-interno input{accent-color:var(--lf-amb)}
.lf-chat-error{margin:8px 0 0;font-size:12px;color:var(--lf-rojo)}
.lf-chat-cerrado,.lf-chat-vacio{margin:10px 0 0;text-align:center;font-size:12px;color:var(--lf-tinta-4)}

/* Lo que llega mientras se mira entra con un leve destello. */
.lf-msj.nuevo{animation:lf-msj-llega .9s ease}
@keyframes lf-msj-llega{
  from{background:var(--lf-brand-glow);transform:translateY(6px);opacity:.4}
  to{background:transparent;transform:none;opacity:1}}

/* La cuenta de respuestas sin leer en el menú "Ayuda". */

/* El aviso dentro de la plataforma: arriba a la derecha, sin tapar el chat. */
.lf-toast-chat{position:fixed;top:74px;right:16px;z-index:420;display:flex;align-items:center;gap:12px;
  width:min(380px,calc(100vw - 32px));padding:12px 12px 12px 14px;border-radius:14px;
  background:var(--lf-sup);border:1px solid var(--lf-linea);border-left:4px solid var(--lf-brand);
  box-shadow:var(--lf-s3, 0 12px 32px rgba(0,0,0,.16));animation:lf-toast-entra .25s ease}
.lf-toast-chat .txt{flex:1;min-width:0}
.lf-toast-chat b{display:block;font-size:13px;font-weight:700;color:var(--lf-tinta)}
.lf-toast-chat small{display:block;margin-top:2px;font-size:11.5px;color:var(--lf-tinta-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-toast-chat .x{border:0;background:none;font-size:18px;line-height:1;color:var(--lf-tinta-4);cursor:pointer;padding:2px 4px}
.lf-toast-chat.va{opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .5s}
@keyframes lf-toast-entra{from{opacity:0;transform:translateY(-10px)}}

/* El chat flotante del cliente. */
.lf-chatf{position:fixed;right:16px;bottom:16px;z-index:410;display:flex;flex-direction:column;
  width:min(370px,calc(100vw - 32px));height:min(520px,calc(100vh - 110px));
  background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:16px;
  box-shadow:var(--lf-s3, 0 16px 40px rgba(0,0,0,.2));overflow:hidden;animation:lf-chat-sube .25s ease}
@keyframes lf-chat-sube{from{opacity:0;transform:translateY(16px)}}
.lf-chatf header{display:flex;align-items:center;gap:6px;padding:11px 10px 11px 14px;
  background:var(--lf-brand);color:#fff;cursor:default}
.lf-chatf header .tit{flex:1;min-width:0}
.lf-chatf header b{display:block;font-size:13.5px;font-weight:700}
.lf-chatf header small{display:block;font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-chatf header .bt{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:0;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font-size:16px;line-height:1;
  cursor:pointer;text-decoration:none}
.lf-chatf header .bt:hover{background:rgba(255,255,255,.28)}
.lf-chatf .lista{flex:1;min-height:0;overflow-y:auto;padding:4px 14px 10px;background:var(--lf-fondo, var(--lf-sup))}
.lf-chatf .lf-msj{padding:10px 0;gap:9px}
.lf-chatf .lf-msj .lf-av{width:28px;height:28px;font-size:11px}
.lf-chatf .lf-msj p{font-size:12.5px}
.lf-chatf .lf-msj .cab .fecha{font-size:10px}
.lf-chatf form{padding:10px 12px 12px;border-top:1px solid var(--lf-linea);background:var(--lf-sup)}
.lf-chatf textarea{width:100%;resize:none;border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  padding:8px 10px;font:inherit;font-size:13px;color:var(--lf-tinta);background:var(--lf-sup);min-height:44px}
.lf-chatf textarea:focus{outline:none;border-color:var(--lf-brand);box-shadow:0 0 0 3px var(--lf-brand-glow)}
.lf-chatf .pie{display:flex;align-items:center;gap:8px;margin-top:8px}
.lf-chatf .pie .lf-file{flex:1;min-width:0;gap:6px}
.lf-chatf .pie .lf-file .bt{padding:6px 10px;font-size:12px}
.lf-chatf .pie .lf-file .n{flex:1 1 60px;font-size:11px}
/* Minimizado: solo la barra, para seguir trabajando sin perderlo. */
.lf-chatf.min{height:auto}
.lf-chatf.min .lista,.lf-chatf.min form{display:none}
.lf-chatf.min header{cursor:pointer}
@media(max-width:560px){
  .lf-chatf{right:8px;left:8px;bottom:8px;width:auto;height:min(70vh,520px)}
  .lf-toast-chat{right:8px;left:8px;width:auto;top:64px}
}

/* La cuenta de respuestas sin leer. Centrada con la altura de línea igual
   a la del círculo y con la fuente del sistema: con la de la marca los
   números quedaban corridos hacia arriba. */
.lf-noti-num{margin-left:auto;box-sizing:border-box;flex-shrink:0;display:inline-block;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  text-align:center;line-height:18px;font-size:10.5px;font-weight:700;letter-spacing:0;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-variant-numeric:tabular-nums;
  background:var(--lf-rojo);color:#fff;box-shadow:0 0 0 2px var(--lf-sup)}
.lf-noti-num[hidden]{display:none}
/* En la barra de abajo del celular cada enlace es una columna (ícono y
   texto): la cuenta va encima del ícono, no debajo del texto. */
.lf-dedo a{position:relative}
.lf-dedo .lf-noti-num{position:absolute;top:1px;left:50%;margin-left:3px;
  min-width:16px;height:16px;line-height:16px;padding:0 4px;font-size:9.5px;
  max-width:none;overflow:visible;white-space:nowrap}

/* "Está escribiendo…": los tres puntos de las apps de mensajería. */
.lf-escribe{display:flex;align-items:center;gap:9px;padding:10px 0 4px;color:var(--lf-tinta-4)}
.lf-escribe .puntos{display:inline-flex;align-items:center;gap:4px;padding:10px 12px;
  border-radius:14px 14px 14px 4px;background:var(--lf-vidrio)}
.lf-escribe .puntos i{width:6px;height:6px;border-radius:50%;background:var(--lf-tinta-3);
  animation:lf-punto 1.2s infinite ease-in-out}
.lf-escribe .puntos i:nth-child(2){animation-delay:.15s}
.lf-escribe .puntos i:nth-child(3){animation-delay:.3s}
.lf-escribe small{font-size:11.5px;font-style:italic}
@keyframes lf-punto{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){ .lf-escribe .puntos i{animation:none;opacity:.7} }


/* ══════════════════════════════════════════════════════
   CHAT · MOVIMIENTO
   Todo se mueve con transform y opacity (lo que el navegador anima sin
   recalcular la página) y con dos curvas: una que frena suave al llegar
   y otra con un rebote corto para lo que "salta" a la vista.
   ══════════════════════════════════════════════════════ */
:root{--lf-suave:cubic-bezier(.22,1,.36,1);--lf-rebote:cubic-bezier(.34,1.45,.64,1)}

/* Un mensaje que llega: sube y aparece, sin destello. */
.lf-msj.nuevo{animation:lf-msj-entra .42s var(--lf-suave) both}
@keyframes lf-msj-entra{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* El chat flotante: crece desde su esquina y se va hacia ella. */
.lf-chatf{transform-origin:100% 100%;animation:lf-chat-abre .38s var(--lf-suave) both;
  transition:height .36s var(--lf-suave)}
.lf-chatf.sale{animation:lf-chat-cierra .24s cubic-bezier(.4,0,1,1) both;pointer-events:none}
@keyframes lf-chat-abre{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes lf-chat-cierra{to{opacity:0;transform:translateY(14px) scale(.95)}}
/* Minimizar: la altura es fija, así que se anima; el contenido se desvanece. */
.lf-chatf .lista,.lf-chatf form{transition:opacity .22s ease}
.lf-chatf.min{height:58px}
.lf-chatf.min .lista,.lf-chatf.min form{display:block;opacity:0;pointer-events:none}

/* El aviso: entra desde la derecha con un rebote corto y se va igual. */
.lf-toast-chat{animation:lf-toast-entra .46s var(--lf-rebote) both;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--lf-linea) 85%,transparent);border-left-width:1px;
  background:color-mix(in srgb,var(--lf-sup) 90%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.lf-toast-chat .ico{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-toast-chat .ico svg{width:21px;height:21px}
.lf-toast-chat.sale{animation:lf-toast-sale .3s var(--lf-suave) both}
@keyframes lf-toast-entra{from{opacity:0;transform:translateX(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lf-toast-sale{to{opacity:0;transform:translateX(28px) scale(.97)}}

/* "Está escribiendo…": aparece y se va suave; los puntos ondulan. */
.lf-escribe{animation:lf-msj-entra .3s var(--lf-suave) both}
.lf-escribe.sale{animation:lf-desvanece .2s ease both}
@keyframes lf-desvanece{to{opacity:0;transform:translateY(4px)}}
.lf-escribe .puntos i{animation:lf-onda 1.3s infinite cubic-bezier(.45,0,.55,1)}
@keyframes lf-onda{0%,70%,100%{transform:translateY(0) scale(.85);opacity:.35}35%{transform:translateY(-3px) scale(1);opacity:1}}

/* ── La burbuja ──
   Un círculo del color de la marca, liso, con sombra teñida de su color y
   un brillo arriba. Al pasar el cursor se abre en una pastilla que dice
   "Soporte". Con respuestas sin leer, un halo que respira. */
.lf-chat-burbuja{position:fixed;right:20px;bottom:20px;z-index:405;
  display:inline-flex;align-items:center;height:56px;min-width:56px;padding:0 16px;
  border:0;border-radius:999px;cursor:pointer;color:#fff;font:inherit;
  background:var(--lf-brand);
  /* box-shadow:0 12px 28px -8px color-mix(in srgb,var(--lf-brand) 70%,transparent),
             0 2px 6px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.3); */
  transform-origin:100% 100%;
  transition:transform .45s var(--lf-rebote),opacity .3s var(--lf-suave),box-shadow .3s ease}
.lf-chat-burbuja .ico{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;
  transition:transform .45s var(--lf-rebote)}
.lf-chat-burbuja .ico svg{width:24px;height:24px}
.lf-chat-burbuja .lbl{max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-size:13.5px;font-weight:600;letter-spacing:-.1px;
  transition:max-width .42s var(--lf-suave),margin .42s var(--lf-suave),opacity .25s ease}
.lf-chat-burbuja:hover,.lf-chat-burbuja:focus-visible{transform:translateY(0px) 
  color-mix(in srgb,var(--lf-brand) 75%,transparent),
             0 3px 8px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.3)}
.lf-chat-burbuja:hover .lbl,.lf-chat-burbuja:focus-visible .lbl{max-width:90px;margin-left:9px;opacity:1}
.lf-chat-burbuja:hover .ico{transform:rotate(-8deg) scale(1.05)}
.lf-chat-burbuja:active{transform:scale(.95);transition-duration:.12s}
.lf-chat-burbuja:focus-visible{outline:3px solid color-mix(in srgb,var(--lf-brand) 40%,transparent);outline-offset:3px}
.lf-chat-burbuja.oculta{opacity:0;transform:translateY(12px) scale(.4);pointer-events:none}
.lf-chat-burbuja.con-nuevos::before{content:'';position:absolute;inset:0;border-radius:inherit;
  animation:lf-halo 2.4s var(--lf-suave) infinite;pointer-events:none}
@keyframes lf-halo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lf-brand) 55%,transparent)}
                   70%,100%{box-shadow:0 0 0 16px color-mix(in srgb,var(--lf-brand) 0%,transparent)}}
.lf-chat-burbuja .lf-noti-num{position:absolute;top:-4px;right:-4px;margin:0}
.lf-noti-num.pop{animation:lf-pop .5s var(--lf-rebote)}
@keyframes lf-pop{from{transform:scale(.3)}to{transform:scale(1)}}

@media(max-width:940px){
  /* Encima de la barra de abajo del celular, no tapándola. */
  .lf-chat-burbuja{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:14px;height:52px;min-width:52px;padding:0 14px}
  .lf-chatf{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:560px){
  .lf-chatf{height:min(64vh,520px)}
  .lf-chatf.min{height:58px}
}

/* Quien pidió menos movimiento al sistema, lo tiene aquí también. */
@media (prefers-reduced-motion:reduce){
  .lf-msj.nuevo,.lf-chatf,.lf-chatf.sale,.lf-toast-chat,.lf-toast-chat.sale,.lf-escribe,.lf-escribe.sale,
  .lf-chat-burbuja.con-nuevos::before,.lf-noti-num.pop,.lf-escribe .puntos i{animation:none!important}
  .lf-chatf,.lf-chat-burbuja,.lf-chat-burbuja .ico,.lf-chat-burbuja .lbl{transition:none!important}
}


/* ══════════════════════════════════════════════════════
   CHAT · ENVÍO AL MOMENTO, EMOJIS, CAPTURAS Y PESTAÑAS
   ══════════════════════════════════════════════════════ */

/* Una imagen adjunta se ve en miniatura; al dar clic se abre completa. */
.lf-msj .adj-img{display:block;width:max-content;max-width:min(260px,100%);margin-top:9px;line-height:0;
  border-radius:12px;overflow:hidden;border:1px solid var(--lf-linea);background:var(--lf-vidrio)}
.lf-msj .adj-img img{display:block;max-width:100%;max-height:200px;object-fit:cover;
  transition:transform .3s var(--lf-suave)}
.lf-msj .adj-img:hover img{transform:scale(1.03)}
.lf-chatf .lf-msj .adj-img{max-width:min(220px,100%)}
.lf-chatf .lf-msj .adj-img img{max-height:160px}

/* Lo que se está enviando ya está en la lista, un poco más tenue; si
   falla, se dice y se puede reintentar. */
.lf-msj.enviando{opacity:.6;transition:opacity .25s ease}
.lf-msj.enviando .fecha{font-style:italic}
.lf-msj.fallo .fecha{color:var(--lf-rojo);font-weight:600}
.lf-msj.fallo p{color:var(--lf-tinta-3)}
.lf-msj.sale{opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease}
.lf-reintento{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.lf-reintento small{flex:1 1 100%;font-size:11.5px;color:var(--lf-rojo)}
.lf-reintento button{padding:3px 11px;border:1px solid var(--lf-linea);border-radius:999px;background:var(--lf-sup);
  font:inherit;font-size:11.5px;font-weight:600;color:var(--lf-tinta-2);cursor:pointer}
.lf-reintento button:first-of-type{border-color:var(--lf-brand);color:var(--lf-brand-2)}

/* Emojis: un botón junto a "Adjuntar" y la tabla encima. */
.lf-emoji{position:relative;display:inline-flex;flex:0 0 auto}
.lf-emoji-bt{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;
  border:1px solid var(--lf-linea);border-radius:10px;background:var(--lf-sup);
  font-size:17px;line-height:1;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,transform .3s var(--lf-rebote)}
.lf-emoji-bt:hover{border-color:var(--lf-brand);transform:scale(1.06)}
.lf-emoji.abierto .lf-emoji-bt{border-color:var(--lf-brand);box-shadow:0 0 0 3px var(--lf-brand-glow)}
/* Cerrada NO ocupa lugar (display:none). Escondida con opacity o
   visibility seguía contando para el ancho de la página: en el celular,
   con el botón a media fila, se salía por la derecha y la página entera
   quedaba más ancha que la pantalla (la barra de abajo se desbordaba).
   Al abrir entra con una animación, y el chat la recorre si no cabe. */
.lf-emoji-pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;
  display:none;grid-template-columns:repeat(8,32px);gap:2px;padding:8px;
  border-radius:14px;border:1px solid var(--lf-linea);background:var(--lf-sup);
  box-shadow:var(--lf-s3, 0 12px 32px rgba(0,0,0,.16));transform-origin:0 100%}
.lf-emoji.abierto .lf-emoji-pop{display:grid;animation:lf-emoji-abre .24s var(--lf-suave) both}
@keyframes lf-emoji-abre{from{opacity:0;transform:translateY(6px) scale(.97)}}
.lf-emoji-pop button{width:32px;height:32px;padding:0;border:0;border-radius:8px;background:none;
  font-size:19px;line-height:1;cursor:pointer;transition:background .15s ease,transform .2s var(--lf-rebote)}
.lf-emoji-pop button:hover,.lf-emoji-pop button:focus-visible{background:var(--lf-vidrio);transform:scale(1.18);outline:none}
.lf-chatf .lf-emoji-bt{width:30px;height:30px;font-size:15px}
.lf-chatf .lf-emoji-pop{grid-template-columns:repeat(7,32px)}
@media(max-width:420px){ .lf-emoji-pop{grid-template-columns:repeat(7,32px)} }

/* Lo que se va a adjuntar (elegido, pegado o arrastrado), antes de enviar. */
.lf-adj-vista{display:flex;align-items:center;gap:10px;margin-top:8px;padding:6px 6px 6px 6px;
  border:1px solid var(--lf-linea);border-radius:12px;background:var(--lf-vidrio);
  animation:lf-msj-entra .3s var(--lf-suave) both}
.lf-adj-vista[hidden]{display:none}
.lf-adj-vista img{flex:0 0 auto;width:44px;height:44px;object-fit:cover;border-radius:8px;background:var(--lf-sup)}
.lf-adj-vista .doc{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;
  background:var(--lf-rojo-soft);color:var(--lf-rojo);font-size:11px;font-weight:800;letter-spacing:.3px}
.lf-adj-vista .txt{flex:1;min-width:0}
.lf-adj-vista .txt b{display:block;font-size:12px;font-weight:600;color:var(--lf-tinta-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-adj-vista .txt small{font-size:11px;color:var(--lf-tinta-4)}
.lf-adj-vista .x{flex:0 0 auto;padding:4px 8px;border:0;border-radius:8px;background:none;
  font-size:18px;line-height:1;color:var(--lf-tinta-4);cursor:pointer}
.lf-adj-vista .x:hover{background:var(--lf-sup);color:var(--lf-rojo)}

/* Soltar un archivo encima del chat. */
.lf-soltar{outline:2px dashed var(--lf-brand);outline-offset:-6px;background:var(--lf-brand-soft)}

/* Las pestañas del chat flotante: los reportes sin resolver del cliente. */
.lf-chatf-tickets{flex:0 0 auto;display:flex;gap:6px;padding:10px 10px 8px;overflow-x:auto;
  scrollbar-width:none;border-bottom:1px solid var(--lf-linea);background:var(--lf-sup)}
.lf-chatf-tickets[hidden]{display:none}
.lf-chatf-tickets::-webkit-scrollbar{display:none}
.lf-chatf-tickets .pes{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;
  max-width:150px;padding:5px 10px;border:1px solid var(--lf-linea);border-radius:10px;
  background:var(--lf-sup);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.lf-chatf-tickets .pes b{font-size:11px;font-weight:700;font-family:var(--lf-mono);color:var(--lf-tinta-2)}
.lf-chatf-tickets .pes .as{max-width:100%;font-size:11px;color:var(--lf-tinta-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-chatf-tickets .pes:hover{border-color:var(--lf-brand)}
.lf-chatf-tickets .pes.on{border-color:var(--lf-brand);background:var(--lf-brand-soft)}
.lf-chatf-tickets .pes.on b{color:var(--lf-brand-2)}
.lf-chatf-tickets .pes .lf-noti-num{position:absolute;top:-6px;right:-6px;margin:0}
/* Al cambiar de reporte, la conversación nueva aparece suave. */
.lf-chatf > .lista{animation:lf-aparece .25s ease backwards}
@keyframes lf-aparece{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .lf-adj-vista,.lf-chatf > .lista,.lf-emoji.abierto .lf-emoji-pop{animation:none!important}
  .lf-emoji-pop,.lf-emoji-bt,.lf-emoji-pop button,.lf-msj .adj-img img{transition:none!important}
}

/* ── Subiendo un archivo ──
   Sobre la miniatura: fondo oscuro y un anillo que se llena con el
   porcentaje real de la subida. Ya subido, gira mientras el servidor lo
   guarda. Junto a un PDF va en chico, sin fondo. */
.lf-msj .adj-img{position:relative}
.lf-msj.enviando.con-carga{opacity:1}
.lf-msj.enviando.con-carga .cab,.lf-msj.enviando.con-carga p{opacity:.65}
.lf-carga{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,14,12,.55);color:#fff;pointer-events:none;line-height:1;
  animation:lf-aparece .2s ease backwards}
.lf-carga > *{grid-area:1/1}
.lf-carga svg{width:46px;height:46px;transform:rotate(-90deg);overflow:visible;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.lf-carga circle{fill:none;stroke-width:3.2;stroke-linecap:round}
.lf-carga .pista{stroke:currentColor;opacity:.25}
.lf-carga .avance{stroke:currentColor;stroke-dasharray:97.39;stroke-dashoffset:97.39;
  transition:stroke-dashoffset .3s var(--lf-suave)}
.lf-carga small{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
/* Sin avance que mostrar (al empezar y al terminar): el arco gira. */
.lf-carga.gira .avance{stroke-dashoffset:68;transition:none}
.lf-carga.gira svg{animation:lf-gira .9s linear infinite}
@keyframes lf-gira{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.lf-chatf .lf-carga svg{width:40px;height:40px}
/* Junto a un PDF. */
.lf-carga.chica{position:static;display:inline-flex;align-items:center;gap:5px;margin-left:4px;
  background:none;color:inherit;animation:none}
.lf-carga.chica > *{grid-area:auto}
.lf-carga.chica svg{width:15px;height:15px;filter:none}
.lf-carga.chica small{font-size:11px;text-shadow:none}
@media (prefers-reduced-motion:reduce){
  .lf-carga{animation:none}
  .lf-carga.gira svg{animation-duration:2.4s}
}

/* Lo que se adjuntó sube en cuanto se elige: el anillo va sobre la
   miniatura de la vista previa, y al terminar se marca como lista. */
.lf-adj-vista .mini{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:8px;overflow:hidden}
.lf-adj-vista .mini img,.lf-adj-vista .mini .doc{width:100%;height:100%}
.lf-adj-vista .lf-carga svg{width:26px;height:26px}
.lf-adj-vista .lf-carga small{display:none}
.lf-adj-vista.lista{border-color:color-mix(in srgb,var(--lf-brand) 45%,var(--lf-linea))}
.lf-adj-vista.lista .txt small{color:var(--lf-brand-2)}

/* ══════════════════════════════════════════════════════
   LA CAMPANA DE SOPORTE
   Arriba a la derecha, junto al tema. El número: cuántos tickets
   esperan respuesta. El punto que late: hay algo que no se ha visto.
   ══════════════════════════════════════════════════════ */
.lf-campana{position:relative;flex-shrink:0}
.lf-campana-bt{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--lf-linea);
  background:var(--lf-sup);color:var(--lf-tinta-3);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.lf-campana-bt:hover,.lf-campana.abierta .lf-campana-bt{border-color:var(--lf-brand);color:var(--lf-brand-2);background:var(--lf-brand-glow)}
.lf-campana-bt .lf-noti-num{position:absolute;top:-5px;right:-6px;margin:0}
.lf-campana.con-nuevos .lf-campana-bt svg{animation:lf-campaneo 2.6s var(--lf-suave) infinite;transform-origin:50% 12%}
@keyframes lf-campaneo{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(14deg)}72%{transform:rotate(-12deg)}
  78%{transform:rotate(8deg)}84%{transform:rotate(-5deg)}90%{transform:rotate(2deg)}}

.lf-campana-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:430;width:min(380px,calc(100vw - 24px));
  display:flex;flex-direction:column;max-height:min(520px,calc(100vh - 90px));
  border-radius:16px;border:1px solid var(--lf-linea);background:var(--lf-sup);
  box-shadow:var(--lf-s3, 0 16px 40px rgba(0,0,0,.18));overflow:hidden;
  transform-origin:100% 0;animation:lf-campana-abre .26s var(--lf-suave) both}
.lf-campana-pop[hidden]{display:none}
@keyframes lf-campana-abre{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.lf-campana-pop header{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--lf-linea)}
.lf-campana-pop header b{font-size:13.5px;font-weight:700}
.lf-campana-pop header .cuantos{min-width:20px;padding:1px 7px;border-radius:999px;text-align:center;
  font-size:11px;font-weight:700;background:var(--lf-rojo-soft);color:var(--lf-rojo)}
.lf-campana-pop .lista{flex:1;min-height:0;overflow-y:auto;padding:6px}
.lf-campana-pop .it{position:relative;display:flex;align-items:flex-start;gap:10px;padding:10px 10px 10px 12px;
  border-radius:12px;color:inherit;text-decoration:none;transition:background .15s ease}
.lf-campana-pop .it:hover,.lf-campana-pop .it:focus-visible{background:var(--lf-vidrio);outline:none}
.lf-campana-pop .it.sin-ver{background:color-mix(in srgb,var(--lf-brand) 7%,transparent)}
.lf-campana-pop .it.sin-ver:hover{background:color-mix(in srgb,var(--lf-brand) 12%,transparent)}
.lf-campana-pop .pri{flex:0 0 auto;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--lf-tinta-4)}
.lf-campana-pop .pri-critica{background:var(--lf-rojo);box-shadow:0 0 0 3px var(--lf-rojo-soft)}
.lf-campana-pop .pri-alta{background:var(--lf-amb);box-shadow:0 0 0 3px var(--lf-amb-soft)}
.lf-campana-pop .pri-normal{background:var(--lf-brand)}
.lf-campana-pop .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lf-campana-pop .l1{display:flex;align-items:baseline;gap:7px;min-width:0}
.lf-campana-pop .l1 b{font-size:11.5px;font-family:var(--lf-mono);font-weight:700;color:var(--lf-tinta-2);flex-shrink:0}
.lf-campana-pop .l1 .emp{font-size:11.5px;color:var(--lf-tinta-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-campana-pop .as{font-size:13px;font-weight:600;color:var(--lf-tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-campana-pop .tx small{font-size:12px;color:var(--lf-tinta-3);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.lf-campana-pop .meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.lf-campana-pop .meta small{font-size:10.5px;color:var(--lf-tinta-4);white-space:nowrap}
.lf-campana-pop .tag{padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;
  background:var(--lf-amb-soft);color:var(--lf-amb);white-space:nowrap}
.lf-campana-pop .tag.nuevo{background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-campana-pop .nada{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 16px;text-align:center}
.lf-campana-pop .nada .ico{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:50%;
  background:var(--lf-brand-soft);color:var(--lf-brand-2);font-size:18px;font-weight:700}
.lf-campana-pop .nada b{font-size:13.5px}
.lf-campana-pop .nada small{font-size:12px;color:var(--lf-tinta-4)}
.lf-campana-pop footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--lf-linea);background:var(--lf-vidrio)}
.lf-campana-pop .todos{font-size:12.5px;font-weight:600;color:var(--lf-brand-2);text-decoration:none}
.lf-campana-pop .todos:hover{text-decoration:underline}
.lf-campana-pop .ops{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lf-campana-pop .op{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:12px;color:var(--lf-tinta-3);cursor:pointer}
.lf-campana-pop .op input{accent-color:var(--lf-brand)}
.lf-campana-pop .permiso{padding:4px 10px;border:1px solid var(--lf-brand);border-radius:999px;background:var(--lf-sup);
  font:inherit;font-size:11.5px;font-weight:600;color:var(--lf-brand-2);cursor:pointer}
.lf-campana-pop .bloq{font-size:11px;color:var(--lf-tinta-4)}
@media(max-width:600px){
  .lf-campana-pop{position:fixed;top:64px;right:12px;left:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .lf-campana.con-nuevos .lf-campana-bt svg,.lf-campana-pop{animation:none!important}
}
/* El ticket que se está viendo ahora, en la lista de la campana. */
.lf-campana-pop .it.aqui{box-shadow:inset 3px 0 0 var(--lf-brand)}

/* La barra de abajo del celular se esconde al bajar y vuelve al subir
   (ver parciales/sidebar.php). La burbuja del chat la acompaña. */
@media(max-width:940px){
  .lf-dedo{transition:transform .32s var(--lf-suave),box-shadow .32s ease}
  .lf-dedo-oculta .lf-dedo{transform:translateY(calc(100% + 4px));box-shadow:none}
  .lf-dedo-oculta .lf-dedo:focus-within{transform:none}
  .lf-chat-burbuja{transition:transform .45s var(--lf-rebote),opacity .3s var(--lf-suave),
    box-shadow .3s ease,bottom .32s var(--lf-suave)}
  .lf-dedo-oculta .lf-chat-burbuja{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:940px) and (prefers-reduced-motion:reduce){
  .lf-dedo,.lf-chat-burbuja{transition:none!important}
}

/* ══════════════════════════════════════════════════════
   ENTRAR · LA CUENTA YA ESTÁ ABIERTA EN OTRO DISPOSITIVO
   Sobre el verde de la tarjeta de entrar: dónde está abierta, desde
   cuándo, y qué pasa si se continúa (ver Servicio\SesionUnica).
   ══════════════════════════════════════════════════════ */
.lf-sesion-abierta{animation:lf-aparece .3s ease backwards}
.lf-sesion-abierta .lf-disp{display:flex;align-items:center;gap:12px;margin:4px 0 16px;padding:12px 14px;
  border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.lf-sesion-abierta .lf-disp .ico{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;
  border-radius:10px;background:rgba(255,255,255,.14);color:#fff}
.lf-sesion-abierta .lf-disp .ico svg{width:21px;height:21px}
.lf-sesion-abierta .lf-disp .txt{min-width:0}
.lf-sesion-abierta .lf-disp b{display:block;font-size:14px;font-weight:700;color:#fff}
.lf-sesion-abierta .lf-disp small{display:block;margin-top:2px;font-size:12px;
  color:color-mix(in srgb,#fff 70%,transparent)}
.lf-sesion-abierta .lf-nota{margin:0 0 18px;font-size:12.5px;line-height:1.5;
  color:color-mix(in srgb,#fff 80%,transparent)}
.lf-sesion-abierta .lf-cancelar{text-align:center;margin:14px 0 0}

/* "Avisarme cuando respondan" (avisos aunque LibertyFin esté cerrado):
   escondido hasta que el navegador confirma que se puede. Los botones
   tienen su propio `display`, que le ganaba al atributo `hidden`. */
[data-lf-push][hidden]{display:none!important}
.lf-chatf header .bt svg{width:16px;height:16px}
/* Por qué no se activaron los avisos del escritorio. */
.lf-campana-pop .bloq.err{flex:1 1 100%;color:var(--lf-rojo);line-height:1.45}

/* ══════════════════════════════════════════════════════
   LA CONVERSACIÓN COMO VENTANA DE CHAT
   (el ticket de soporte y el reporte del cliente)
   Alto fijo: la lista de mensajes se desplaza por DENTRO y la caja de
   escribir queda pegada abajo, a la mano aunque se suba a leer lo
   anterior. Se abre en el último mensaje (lf-chat.js).
   ══════════════════════════════════════════════════════ */
.lf-chat-ventana{position:relative;display:flex;flex-direction:column;overflow:hidden;
  height:calc(100vh - 170px);min-height:440px}
@supports (height:100dvh){ .lf-chat-ventana{height:calc(100dvh - 170px)} }
.lf-chat-ventana > .card-header{flex:0 0 auto}
.lf-chat-ventana > .lf-chat-lista{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-top:6px;padding-bottom:10px}
.lf-chat-nota{flex:0 0 auto;padding:9px 18px;border-top:1px solid var(--lf-linea)}
.lf-chat-nota p{margin:0;font-size:12px;line-height:1.5}
.lf-chat-pie{flex:0 0 auto;padding:12px 16px 14px;border-top:1px solid var(--lf-linea);background:var(--lf-sup)}
.lf-chat-pie textarea{min-height:46px;max-height:180px;resize:none;overflow-y:auto}
.lf-chat-pie .lf-resp-pie{margin-top:8px}
/* Escribiendo una nota interna, la caja se pinta de ámbar: que no se
   confunda con algo que va a leer el cliente. */
.lf-chat-pie form:has(input[name=interno]:checked) textarea{background:var(--lf-amb-soft);border-color:var(--lf-amb)}
/* Las plantillas de soporte, en una sola fila que se desliza. */
.lf-plantillas{display:flex;align-items:center;gap:7px;margin-bottom:8px;padding-bottom:2px;
  overflow-x:auto;scrollbar-width:thin}
.lf-plantillas > span{flex:0 0 auto;font-size:11.5px;color:var(--lf-tinta-4)}
.lf-plantillas .lf-pill{flex:0 0 auto;white-space:nowrap}
@media(max-width:940px){
  /* Arriba la barra y los botones; abajo la barra del pulgar. */
  .lf-chat-ventana{height:calc(100vh - 230px);min-height:380px}
  @supports (height:100dvh){ .lf-chat-ventana{height:calc(100dvh - 230px)} }
  .lf-chat-pie{padding:10px 12px 12px}
}

/* "↓ Mensajes nuevos": llegó algo mientras se leía más arriba. */
.lf-ir-abajo{position:absolute;left:50%;z-index:6;padding:7px 15px;border:0;border-radius:999px;
  background:var(--lf-brand);color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--lf-brand) 70%,transparent);
  opacity:0;pointer-events:none;transform:translate(-50%,8px);
  transition:opacity .2s ease,transform .3s var(--lf-suave)}
.lf-ir-abajo.ver{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){ .lf-ir-abajo{transition:none} }
/* El alto exacto lo pone lf-chat.js (lo que queda de pantalla). Que la
   lista no "arrastre" a la página al llegar a su principio o a su fin. */
.lf-chat-ventana{overscroll-behavior:contain}
/* Con la ventana de chat, el panel no necesita su alto mínimo de pantalla
   completa (la ventana ya la llena): ese mínimo, más el margen de arriba,
   dejaba siempre unos píxeles de página que desplazar. */
.lf-main:has(.lf-chat-ventana){min-height:0}
/* Y menos aire debajo de la ventana: que llegue casi al borde, como una app. */
.lf-cont:has(.lf-chat-ventana){padding-bottom:16px}
.lf-chat-ventana{margin-bottom:0}

/* La columna de al lado del chat de soporte: del mismo alto que la
   ventana (lo pone lf-chat.js), con su propio desplazamiento, y la última
   tarjeta estirada hasta abajo para que las dos columnas queden parejas. */
.lf-lado-chat{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin}
.lf-lado-chat > .card{flex:0 0 auto}
.lf-lado-chat > .card:last-child{flex:1 0 auto;margin-bottom:0}

/* ── La ventana de chat le gana a "columnas de igual altura" ──
   `.lf-split > div > .card:last-child{flex:1}` hacía que la tarjeta del
   chat ignorara su alto y creciera con todos los mensajes: la página
   entera se desplazaba. Y en el celular otra regla le quitaba el modo de
   columna. Aquí manda la ventana: su alto lo pone lf-chat.js. */
.lf-split > div > .card.lf-chat-ventana,
.lf-split > div > .card.lf-chat-ventana:last-child{flex:0 0 auto;display:flex;flex-direction:column}
.lf-split-chat{margin-bottom:0;align-items:start}
.lf-chat-ventana > .card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Con una ventana de chat, la página NO se desplaza: solo la lista de
   mensajes (y, al lado, la columna de detalles por su cuenta). */
html.lf-fijo,html.lf-fijo body{overflow:hidden;overscroll-behavior:none}

/* "Detalles": en el celular la columna de la derecha es un panel. */
.lf-ver-detalles,.lf-cerrar-detalles{display:none}
@media(max-width:940px){
  .lf-split-chat > div:last-child{position:fixed;top:0;right:0;bottom:0;z-index:460;
    width:min(92vw,400px);height:auto;overflow-y:auto;overscroll-behavior:contain;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px));background:var(--lf-panel);
    border-left:1px solid var(--lf-linea);box-shadow:-18px 0 40px rgba(0,0,0,.25);
    transform:translateX(105%);transition:transform .32s var(--lf-suave)}
  .lf-split-chat.ver-detalles > div:last-child{transform:none}
  .lf-split-chat.ver-detalles::after{content:'';position:fixed;inset:0;z-index:455;background:rgba(10,14,12,.45)}
  .lf-split-chat > div:last-child > .card{height:auto}
  .lf-ver-detalles{display:inline-flex;flex-shrink:0}
  .lf-cerrar-detalles{display:grid;place-items:center;align-self:flex-end;width:34px;height:34px;flex-shrink:0;
    border:1px solid var(--lf-linea);border-radius:50%;background:var(--lf-sup);color:var(--lf-tinta-2);
    font-size:20px;line-height:1;cursor:pointer}
}
@media(max-width:940px) and (prefers-reduced-motion:reduce){
  .lf-split-chat > div:last-child{transition:none}
}

/* Avisos informativos (sin "Ver"): el texto completo, no una línea cortada. */
.lf-toast-chat.largo{align-items:flex-start}
.lf-toast-chat.largo small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45;margin-top:3px}
[data-lf-push-probar][hidden]{display:none!important}

/* La tabla de emojis, abierta, vive en <body> y fija a la pantalla (la
   coloca lf-chat.js junto al botón): dentro del chat la recortaba su
   contenedor y en pantallas chicas se perdía. Se adapta al ancho y, si la
   pantalla es muy baja, se desplaza por dentro. */
.lf-emoji-pop{position:fixed;left:8px;top:8px;bottom:auto;z-index:470;
  width:min(292px,calc(100vw - 16px));max-height:min(300px,calc(100vh - 16px));overflow-y:auto;
  grid-template-columns:repeat(auto-fill,minmax(34px,1fr));justify-items:center;transform-origin:50% 100%}
.lf-chatf .lf-emoji-pop{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))}
.lf-emoji-pop.abierto{display:grid;animation:lf-emoji-abre .24s var(--lf-suave) both}
@media (prefers-reduced-motion:reduce){ .lf-emoji-pop.abierto{animation:none} }

/* ══════════════════════════════════════════════════════
   CHAT FLOTANTE · LA LISTA DE REPORTES
   La burbuja abre la lista de reportes abiertos (como una app de
   mensajes); cada uno abre su chat, y "←" regresa a la lista.
   ══════════════════════════════════════════════════════ */
.lf-chatf header .atras{font-size:17px}
.lf-chatf.en-lista header .atras,.lf-chatf.en-lista header .ir{display:none}
.lf-chatf-reportes{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:6px;background:var(--lf-fondo, var(--lf-sup));animation:lf-aparece .25s ease backwards}
.lf-chatf-reportes .rep{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px;
  border:0;border-radius:12px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:background .15s ease}
.lf-chatf-reportes .rep:hover,.lf-chatf-reportes .rep:focus-visible{background:var(--lf-vidrio);outline:none}
.lf-chatf-reportes .rep + .rep{margin-top:2px}
.lf-chatf-reportes .ico{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-chatf-reportes .ico svg{width:19px;height:19px}
.lf-chatf-reportes .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lf-chatf-reportes .tx b{font-size:13px;font-weight:700;color:var(--lf-tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-chatf-reportes .tx small{font-size:11px;color:var(--lf-tinta-4)}
.lf-chatf-reportes .ult{font-size:12px;color:var(--lf-tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-chatf-reportes .rep.sin-leer .ult{color:var(--lf-tinta);font-weight:600}
.lf-chatf-reportes .meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.lf-chatf-reportes .meta small{font-size:10.5px;color:var(--lf-tinta-4);white-space:nowrap}
.lf-chatf-reportes .meta .lf-noti-num{margin:0}
.lf-chatf-reportes .nada{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:40px 18px;text-align:center}
.lf-chatf-reportes .nada .ico{width:46px;height:46px;border-radius:50%;margin-bottom:6px}
.lf-chatf-reportes .nada b{font-size:13.5px;color:var(--lf-tinta)}
.lf-chatf-reportes .nada small{font-size:12px;color:var(--lf-tinta-4)}
.lf-chatf-pie-lista{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px 12px;border-top:1px solid var(--lf-linea);background:var(--lf-sup)}
.lf-chatf-pie-lista .todos{font-size:12px;font-weight:600;color:var(--lf-brand-2);text-decoration:none}
.lf-chatf-pie-lista .todos:hover{text-decoration:underline}
.lf-chatf.min .lf-chatf-reportes,.lf-chatf.min .lf-chatf-pie-lista{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .lf-chatf-reportes{animation:none} }

/* ══════════════════════════════════════════════════════
   EL CHAT EN EL CELULAR: QUE RESPIRE
   Antes los mensajes se quedaban con una franja: arriba la barra, tres
   filas de botones y la cabecera; abajo una caja alta y la barra del
   pulgar. Y al tocar la caja el iPhone acercaba la página (letra de
   menos de 16 px). Aquí, como en una app de mensajes: burbujas, una caja
   compacta, sin la barra de abajo dentro del chat y el chat flotante a
   pantalla completa.
   ══════════════════════════════════════════════════════ */
@media(max-width:940px){
  /* Dentro de un chat no va la barra de abajo: para salir están "Volver"
     y el botón de atrás, como en cualquier app de mensajes. */
  html.lf-fijo .lf-dedo{display:none}
  html.lf-fijo .lf-main{padding-bottom:0}

  /* Burbujas: lo de mi lado a la derecha, lo del otro a la izquierda. */
  .lf-chat-ventana > .lf-chat-lista{background:var(--lf-fondo, var(--lf-panel))}
  .lf-chat-lista .lf-msj,.lf-chatf .lf-msj{align-items:flex-end;gap:7px;padding:2px 0;border-bottom:0}
  .lf-chat-lista .lf-msj + .lf-msj,.lf-chatf .lf-msj + .lf-msj{margin-top:8px}
  .lf-chat-lista .lf-msj .cuerpo,.lf-chatf .lf-msj .cuerpo{flex:0 1 auto;max-width:82%;padding:8px 11px 7px;
    border-radius:16px 16px 16px 5px;background:var(--lf-sup);border:1px solid var(--lf-linea)}
  .lf-chat-lista .lf-msj.propio,.lf-chatf .lf-msj.propio{flex-direction:row-reverse}
  .lf-chat-lista .lf-msj.propio .cuerpo,.lf-chatf .lf-msj.propio .cuerpo{
    border-radius:16px 16px 5px 16px;background:var(--lf-brand-soft);border-color:transparent}
  .lf-chat-lista .lf-msj.propio .lf-av,.lf-chatf .lf-msj.propio .lf-av{display:none}
  .lf-chat-lista .lf-msj .lf-av,.lf-chatf .lf-msj .lf-av{width:26px;height:26px;font-size:10px;border-radius:50%}
  .lf-chat-lista .lf-msj .cab,.lf-chatf .lf-msj .cab{gap:6px;margin-bottom:2px}
  .lf-chat-lista .lf-msj .cab b,.lf-chatf .lf-msj .cab b{font-size:11.5px}
  .lf-chat-lista .lf-msj .cab .fecha,.lf-chatf .lf-msj .cab .fecha{font-size:9.5px}
  .lf-chat-lista .lf-msj p,.lf-chatf .lf-msj p{font-size:14px;line-height:1.45}
  /* La nota interna es una burbuja ámbar, no una tarjeta aparte. */
  .lf-chat-lista .lf-msj.interno{background:none;padding:2px 0;margin:0;border-left:0}
  .lf-chat-lista .lf-msj.interno .cuerpo{background:var(--lf-amb-soft);
    border-color:color-mix(in srgb,var(--lf-amb) 35%,transparent)}
}

@media(max-width:600px){
  /* Menos marco alrededor: el chat ocupa casi todo. */
  html.lf-fijo .lf-cont{padding:4px 8px 8px}
  html.lf-fijo .lf-top{padding:8px 12px;min-height:0}
  html.lf-fijo .lf-top h1{font-size:15px}
  html.lf-fijo .lf-top p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Los botones de arriba, en UNA fila que se desliza (no en tres). */
  .lf-acciones-chat{flex-wrap:nowrap!important;overflow-x:auto;margin-bottom:8px!important;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lf-acciones-chat::-webkit-scrollbar{display:none}
  .lf-acciones-chat > *{flex:0 0 auto;white-space:nowrap}
  .lf-chat-ventana > .card-header{padding:10px 12px}
  .lf-chat-ventana > .card-header p{display:none}
  .lf-chat-ventana > .lf-chat-lista{padding:8px 10px}
  .lf-chat-nota{padding:7px 12px}

  /* La caja de escribir: redonda, compacta y con letra de 16 px (con
     menos, el iPhone acerca la página al tocarla). */
  .lf-chat-pie{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .lf-chat-pie textarea,.lf-chatf textarea{font-size:16px}
  .lf-chat-pie textarea{min-height:42px;padding:10px 14px;border-radius:12px}
  .lf-chat-pie .lf-plantillas{margin-bottom:6px}
  .lf-chat-pie .lf-resp-pie{margin-top:6px;gap:6px;flex-wrap:nowrap}
  .lf-chat-pie .lf-resp-interno{font-size:12px;gap:5px}
  .lf-chat-pie .lf-resp-pie .btn{margin-left:auto;padding:8px 16px;border-radius:999px}
  /* "Adjuntar evidencia" + el texto de ayuda → un clip. Si ya hay
     archivo, se ve su nombre. */
  .lf-chat-pie .lf-file,.lf-chatf .pie .lf-file{flex:0 1 auto;min-width:0;gap:6px}
  .lf-chat-pie .lf-file .n:not(.hay),.lf-chatf .pie .lf-file .n:not(.hay){display:none}
  .lf-chat-pie .lf-file .n.hay,.lf-chatf .pie .lf-file .n.hay{font-size:11px;max-width:28vw}
  .lf-chat-pie .lf-file .bt,.lf-chatf .pie .lf-file .bt{width:34px;height:34px;padding:0;justify-content:center;
    font-size:0;border-radius:10px}
  .lf-chat-pie .lf-file .bt::before,.lf-chatf .pie .lf-file .bt::before{content:'📎';font-size:16px;line-height:1}

  /* El chat flotante del cliente: a pantalla completa, como una app. */
  .lf-chatf{top:0;right:0;bottom:0;left:0;width:auto;height:100vh;height:100dvh;
    border:0;border-radius:0;transform-origin:50% 100%}
  .lf-chatf.min{top:auto;height:58px;border-radius:16px 16px 0 0}
  .lf-chatf header{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .lf-chatf .lista{padding:8px 10px}
  .lf-chatf form{padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .lf-chatf textarea{border-radius:12px;padding:10px 14px}
  .lf-chatf .pie .btn{margin-left:auto;border-radius:999px;padding:7px 16px}
}

/* Enviar con el avión de papel (lo pone lf-chat.js). En la computadora,
   ícono y palabra; en el celular, solo el ícono, en un cuadro de esquinas
   suaves (no una píldora). */
.lf-enviar-ico{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.lf-enviar-ico svg{width:16px;height:16px;flex:0 0 auto}
@media(max-width:600px){
  .lf-chat-pie .lf-resp-pie .btn.lf-enviar-ico,.lf-chatf .pie .btn.lf-enviar-ico{
    width:42px;height:42px;padding:0;border-radius:12px;flex:0 0 auto}
  .lf-enviar-ico .txt{display:none}
  .lf-enviar-ico svg{width:19px;height:19px;margin:0 1px 0 -1px}

  /* El chat flotante entra DESDE ABAJO, como una hoja, y se va igual
     (antes crecía desde la esquina, y a pantalla completa se veía como si
     empezara arriba). */
  .lf-chatf{animation:lf-hoja-sube .34s var(--lf-suave) both}
  .lf-chatf.sale{animation:lf-hoja-baja .26s cubic-bezier(.4,0,1,1) both}
}
@keyframes lf-hoja-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes lf-hoja-baja{to{transform:translateY(100%)}}
@media(max-width:600px) and (prefers-reduced-motion:reduce){
  .lf-chatf,.lf-chatf.sale{animation:none}
}

/* Enviar: SOLO el avión de papel, en todas las pantallas; un cuadro de
   esquinas suaves junto a la caja de escribir. */
.lf-enviar-ico .txt{display:none}
.lf-chat-pie .lf-resp-pie .btn.lf-enviar-ico,.lf-chatf .pie .btn.lf-enviar-ico{
  width:40px;height:40px;padding:0;border-radius:12px;flex:0 0 auto;margin-left:auto}
.lf-enviar-ico svg{width:18px;height:18px;margin:0 1px 0 -1px}
@media(max-width:600px){
  .lf-chat-pie .lf-resp-pie .btn.lf-enviar-ico,.lf-chatf .pie .btn.lf-enviar-ico{width:42px;height:42px}
  .lf-enviar-ico svg{width:19px;height:19px}
}
/* Los íconos de los botones del chat no reciben el clic: lo recibe el
   botón. Así, aunque el ícono se cambie al tocarlo, el clic sigue siendo
   "en el botón". */
.lf-chatf header .bt svg,.lf-enviar-ico svg{pointer-events:none}
/* La vista previa de la captura pegada en "Reportar un problema". */
.lf-form .lf-adj-vista{max-width:440px}

/* Usuarios · cuántos lugares del plan se usan. */
.lf-alta-cupo{margin-left:auto;font-size:12px;font-weight:500;color:var(--lf-tinta-3);
  background:var(--lf-vidrio);border:1px solid var(--lf-linea);border-radius:var(--lf-r-pill);
  padding:3px 10px;white-space:nowrap}
.lf-alta-cupo.lleno{color:var(--lf-amb);background:var(--lf-amb-soft);border-color:transparent}
.card-header .lf-alta-cupo{align-self:center}
.lf-alta-lleno{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px}
.lf-alta-lleno-txt{display:flex;align-items:flex-start;gap:9px;flex:1;min-width:220px;
  font-size:14px;line-height:1.45}
.lf-alta-lleno-txt svg{color:var(--lf-amb);flex:none;margin-top:2px}

/* Ticket (soporte) · "Guardando…" / "Guardado" junto a "Estado". */
.lf-tk-guardado{margin-left:auto;align-self:center;font-size:12px;font-weight:500;
  color:var(--lf-tinta-4);opacity:0;transition:opacity .25s}
.lf-tk-guardado.guardando,.lf-tk-guardado.listo{opacity:1}
.lf-tk-guardado.listo{color:var(--lf-brand-2)}
.lf-tk-guardado.listo::before{content:'✓ '}
.lf-chat-pie[hidden],.lf-chat-cerrado[hidden]{display:none !important}
.lf-chat-cerrado{flex:0 0 auto;margin:0;padding:12px 16px;border-top:1px solid var(--lf-linea);
  font-size:13px;color:var(--lf-tinta-3);background:var(--lf-sup)}
form[data-lf-ticket-cambio] select:disabled{opacity:.7}

/* Mi cuenta · Mi perfil: cada tarjeta mide lo que su contenido. Las
   columnas de igual altura estiraban la de la contraseña hasta el fondo
   de la otra columna: un cuadro enorme casi vacío. */
.lf-split.lf-perfil{align-items:start}
.lf-split.lf-perfil > div > .card:last-child{flex:none}

/* Apariencia (soporte): dos renglones, tema y color. Los radios no se
   ven (la etiqueta es el botón), pero se eligen con el teclado. */
.lf-apariencia{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.lf-apariencia .fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lf-apariencia .et{font-size:12.5px;font-weight:600;color:var(--lf-tinta-3);min-width:42px}
.lf-apariencia .nota{flex-basis:100%;margin:0;font-size:11px;line-height:1.45;color:var(--lf-tinta-4)}
.lf-apariencia [data-aviso]{flex-basis:100%;margin:0}
.lf-segmento{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--lf-linea);
  border-radius:var(--lf-r-pill);background:var(--lf-vidrio)}
.lf-segmento label{position:relative;display:inline-flex;align-items:center;gap:6px;margin:0;
  padding:6px 13px;border-radius:var(--lf-r-pill);font-size:12.5px;font-weight:600;
  color:var(--lf-tinta-3);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.lf-segmento label:hover{color:var(--lf-tinta)}
.lf-segmento label.on{background:var(--lf-sup);color:var(--lf-tinta);box-shadow:var(--lf-s1)}
.lf-segmento label.on svg{color:var(--lf-brand)}
.lf-segmento input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.lf-segmento label:focus-within{box-shadow:0 0 0 2px var(--lf-brand-ring)}
.lf-apariencia .lf-colores{gap:8px}
.lf-apariencia .lf-color{width:26px;height:26px}
.lf-colores label.lf-color{position:relative;margin:0}
.lf-colores label.lf-color input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.lf-colores label.lf-color:focus-within{box-shadow:0 0 0 2px var(--lf-sup),0 0 0 4px var(--lf-brand-ring)}
.lf-colores label.lf-color.on:focus-within{box-shadow:0 0 0 2px var(--lf-tinta)}
@media(max-width:420px){
  .lf-segmento label{padding:6px 10px}
  .lf-apariencia .et{min-width:0;flex-basis:100%}
}

/* La fila entera abre su detalle (ver layout.php, `data-lf-fila`). */
tr:has(a[data-lf-fila]){cursor:pointer}
.table > tbody > tr:has(a[data-lf-fila]):hover > td{background:var(--lf-brand-glow)}

/* Formularios en renglón (`lf-campos`): cada campo va en su <div>, y el
   <div> decide el ancho. Aquí no se carga Bootstrap, así que .form-control
   no trae width:100%: el campo se quedaba con su ancho natural (~190 px)
   y, en una caja más angosta, se metía debajo del campo o del botón de
   al lado (Banco/Referencia/Registrar, "Le tocarían"/Asignar). */
.lf-campos > div > .form-control,.lf-campos > div > .form-select{width:100%;min-width:0}
.lf-campos > .btn{flex:none}

/* Cifras (`lf-stats`) SIN HUECOS. Con columnas fijas, cuatro tarjetas en
   un espacio para tres dejaban la cuarta sola abajo y un hueco a su lado
   (el detalle de una venta abierto encima). Ahora cada renglón se llena,
   y con exactamente cuatro van las cuatro en un renglón o dos y dos,
   nunca tres y una. */
.lf-stats{display:flex;flex-wrap:wrap}
.lf-stats > *{flex:1 1 214px;min-width:0}
.lf-stats:has(> :nth-child(4):last-child) > *{
  flex-basis:calc((904px - 100%) * 999);max-width:calc(50% - 8px)}
@media(max-width:560px){
  .lf-stats > *{flex-basis:calc(50% - 6px)}
}

/* El botón del aviso ("Abrir chat") no se parte en dos renglones. */
.lf-toast-chat .btn{flex:none;white-space:nowrap}

/* ══════════════════════════════════════════════════════
   EL CHAT DE SOPORTE EN EL CELULAR
   Arriba, la barra, una fila de botones y la cabecera; abajo,
   plantillas, una caja de dos renglones y otra fila de botones: a
   los mensajes les quedaba la mitad de la pantalla. Ahora:
     · la cabecera es la de una app de mensajes: ← con quién · Detalles
       (la ficha y el correo pasan al panel de Detalles);
     · la caja: [Nota interna | plantillas] y abajo
       [😊][📎][ escribir…         ][➤], de un renglón que crece;
     · en las burbujas, sin la etiqueta "Cliente" (va a la izquierda)
       y, si es de hoy, solo la hora.
   ══════════════════════════════════════════════════════ */
/* "Nota interna" junto a las plantillas, en todas las pantallas: las dos
   cosas deciden CÓMO se va a escribir. Marcada, se pinta de ámbar. */
.lf-chat-herr{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-width:0}
.lf-chat-herr .lf-plantillas{flex:1 1 auto;min-width:0;margin-bottom:0}
.lf-chat-herr .lf-resp-interno{flex:0 0 auto;padding:5px 11px;border:1px solid var(--lf-linea);
  border-radius:var(--lf-r-pill);background:var(--lf-sup);transition:background .15s,border-color .15s,color .15s}
.lf-chat-herr .lf-resp-interno:has(input:checked){background:var(--lf-amb-soft);
  border-color:var(--lf-amb);color:var(--lf-amb);font-weight:600}
.lf-chat-atras,.lf-chat-quien,.lf-solo-movil{display:none}

@media(max-width:600px){
  .lf-acciones-soporte{display:none!important}
  .lf-solo-movil{display:block}

  /* Cabecera: ← · con quién · Detalles */
  .lf-chat-ventana > .card-header{gap:8px;padding:8px 10px}
  .lf-chat-atras{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;margin-left:-2px;
    border-radius:50%;color:var(--lf-tinta-2);text-decoration:none;font-size:21px;line-height:1}
  .lf-chat-atras:active{background:var(--lf-vidrio)}
  .lf-chat-tit{flex:1 1 auto;min-width:0}
  .lf-chat-tit > span:first-child{display:none}
  .lf-chat-quien{display:block;min-width:0}
  .lf-chat-quien b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lf-chat-quien small{display:block;margin-top:1px;font-size:11.5px;font-weight:400;color:var(--lf-tinta-4);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Burbujas más limpias */
  .lf-chat-lista .lf-tag-cliente{display:none}
  .lf-chat-lista .lf-msj .fecha .dia.hoy,.lf-chatf .lf-msj .fecha .dia.hoy{display:none}

  /* La caja de escribir, en rejilla:
       [Nota interna | plantillas…]      (solo soporte)
       [vista previa del adjunto]
       [😊][📎][ escribir…   ][➤]                                  */
  .lf-chat-pie form{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
    column-gap:6px;row-gap:8px;align-items:end}
  .lf-chat-pie .lf-resp-pie{display:contents}
  .lf-chat-pie .lf-chat-herr{order:1;grid-column:1/-1;margin:0;gap:6px}
  .lf-chat-pie .lf-plantillas > span{display:none}
  .lf-chat-pie .lf-resp-interno{padding:6px 10px}
  .lf-chat-pie .lf-adj-vista{order:2;grid-column:1/-1;margin:0}
  .lf-chat-pie .lf-emoji{order:3;grid-column:1}
  .lf-chat-pie .lf-file{order:4;grid-column:2}
  .lf-chat-pie textarea{order:5;grid-column:3;height:42px;min-height:42px}
  .lf-chat-pie .lf-resp-pie .btn{order:6;grid-column:4;margin:0}
  .lf-chat-pie .lf-chat-error{order:7;grid-column:1/-1;margin:0}
  .lf-chat-pie .lf-emoji-bt,.lf-chat-pie .lf-file .bt{width:36px;height:42px;border-radius:12px}
}
/* Estado, prioridad y categoría del ticket: del ancho de su columna (sin
   Bootstrap, cada uno se quedaba del largo de su texto). */
form[data-lf-ticket-cambio] .form-select{width:100%}
@media(max-width:600px){
  /* Con el teclado abierto queda poca pantalla: la caja crece hasta ~5
     renglones y de ahí se desplaza por dentro. */
  .lf-chat-pie textarea{max-height:128px}
}
/* "Detalles" es solo del celular. Es un .btn, y .btn trae display con
   !important: sin esto, en la computadora salía un botón que no hacía
   nada (la columna de detalles ya está a la vista). */
@media(min-width:941px){ .lf-ver-detalles{display:none!important} }

/* Reportes · Por área: el detalle chico bajo cada monto (de dónde salió) y
   la fila Total, que es la misma cifra del resultado de arriba. */
.lf-tabla-areas .lf-ant-val b{display:block;font-weight:700}
.lf-tabla-areas .lf-ant-val small{display:block;margin-top:1px;font-size:10.5px;font-weight:400;
  line-height:1.4;color:var(--lf-tinta-4);font-family:var(--lf-font)}
.lf-tabla-areas .lf-ant-val small.ant{color:var(--lf-amb)}
.lf-tabla-areas tfoot td{border-top:2px solid var(--lf-linea);background:var(--lf-vidrio);font-weight:600}
@media(max-width:576px){
  .table-responsive.lf-cards tfoot{display:block}
  .lf-tabla-areas tfoot tr{border:1px solid var(--lf-linea);border-radius:var(--lf-r);
    padding:10px 12px;background:var(--lf-vidrio)}
  .lf-tabla-areas tfoot td{background:none;border-top:0}
}

/* ══════════════════════════════════════════════════════
   TABLAS: LO QUE BOOTSTRAP DABA Y AQUÍ NO ESTABA
   Las vistas usan clases de Bootstrap (.table, .text-end), pero
   Bootstrap no se carga: la tabla medía lo que su contenido y dejaba
   un hueco a la derecha de la tarjeta, y .text-end no alineaba nada a
   la derecha (solo ponía cifras tabulares). Los montos quedaban
   pegados a la izquierda, debajo de un encabezado también a la
   izquierda, y en Reportes · Por área cada cifra terminaba donde le
   tocaba según lo largo de su línea chica.
   ══════════════════════════════════════════════════════ */
.table{width:100%}
.text-end,td.text-end,th.text-end,
.table > thead > tr > th.text-end{text-align:right}
/* El renglón de totales, con el mismo aire que los demás (sin esto el
   "Total" y sus cifras quedaban corridos respecto a las columnas). */
.table > tfoot > tr > td,.table > tfoot > tr > th{padding:13px 14px;font-size:13px;vertical-align:middle}

/* Reportes · De dónde a dónde, en dos columnas: el desglose a la izquierda,
   angosto para que cada cifra quede cerca de su nombre (a todo lo ancho
   dejaba un hueco enorme en medio), y a la derecha las notas que antes iban
   abajo. Se mide la tarjeta, no la pantalla: con el menú abierto la
   tarjeta es más angosta. Con poco ancho, una debajo de otra. */
.card-body:has(> .lf-dd-dos){container-type:inline-size}
.lf-dd-dos{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);
  gap:0 32px;align-items:start}
.lf-dd-notas{border-left:1px solid var(--lf-linea);padding:4px 0 4px 28px;
  font-size:12.5px;color:var(--lf-tinta-3);line-height:1.6}
.lf-dd-notas > p{margin:0}
.lf-dd-notas > p + p{margin-top:10px}
.lf-dd-notas .lf-otros{margin-top:14px}
/* Línea gruesa antes de "Queda" (en el <tr> no se pinta: la tabla usa
   border-collapse:separate). */
.lf-dd tr:has(+ tr.lf-dd-total) > td{border-bottom:0}
.lf-dd tr.lf-dd-total > td{border-top:2px solid var(--lf-linea)}
@container (max-width:760px){
  .lf-dd-dos{grid-template-columns:minmax(0,1fr)}
  .lf-dd-notas{border-left:0;border-top:1px solid var(--lf-linea);
    margin-top:16px;padding:14px 0 0;font-size:12px}
}


/* ══════════════════════════════════════════════════════
   36 · CORREGIR UN RENGLÓN AL IMPORTAR
   El archivo casi nunca viene perfecto: un folio con un
   dedazo, una comisión sin llenar. La corrección se hace
   aquí, no volviendo a Excel.
   ══════════════════════════════════════════════════════ */
.lf-ajustar{width:28px;height:28px;border-radius:7px;border:1px solid transparent;
  background:none;cursor:pointer;color:var(--lf-tinta-4);font-size:14px;line-height:1;
  transition:color .15s,background .15s,border-color .15s}
.lf-ajustar:hover{color:var(--lf-brand-2);background:var(--lf-brand-glow);
  border-color:var(--lf-brand)}
.lf-ajustar.on{color:var(--lf-brand-2);background:var(--lf-brand-glow);
  border-color:var(--lf-brand)}

.lf-edicion[hidden]{display:none}
.lf-edicion > td{padding:0!important;background:var(--lf-vidrio)}
.lf-edit-caja{padding:14px 16px;border-left:3px solid var(--lf-brand);
  animation:lf-ent .16s ease}
.lf-edit-rejilla{display:grid;gap:10px 14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.lf-edit-caja label{display:flex;flex-direction:column;gap:4px;min-width:0;
  font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--lf-tinta-4)}
.lf-edit-caja input[type=text],
.lf-edit-caja input[type=date]{width:100%;max-width:100%;box-sizing:border-box;
  padding:7px 9px;border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  background:var(--lf-panel);color:var(--lf-tinta);font:inherit;font-size:13px;
  font-weight:400;text-transform:none;letter-spacing:0}
.lf-edit-caja input:focus{outline:none;border-color:var(--lf-brand);
  box-shadow:0 0 0 3px var(--lf-brand-glow)}
.lf-edit-caja input:disabled{opacity:.5;cursor:not-allowed}

/* Las comisiones aparte: son el campo que más se corrige y conviene
   verlas juntas con su base al lado. */
.lf-edit-com{margin-top:12px;padding-top:12px;border-top:1px dashed var(--lf-linea);
  display:grid;gap:10px 14px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.lf-edit-com .rot{grid-column:1/-1;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--lf-tinta-3)}

.lf-edit-pie{margin-top:12px;padding-top:10px;border-top:1px dashed var(--lf-linea);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lf-edit-pie .fuente{margin-left:auto;font-size:11px;color:var(--lf-tinta-4)}
.lf-check{display:flex;flex-direction:row!important;align-items:center;gap:7px;
  cursor:pointer;text-transform:none!important;letter-spacing:0!important;
  font-size:12.5px!important;font-weight:500!important;color:var(--lf-tinta-2)!important}
.lf-check input{width:auto!important}

/* La barra solo sale cuando hay algo que guardar: una barra fija que no
   hace nada es ruido permanente. */
.lf-barra-ajustes{position:sticky;bottom:0;z-index:20;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:12px 16px;border-radius:var(--lf-r-panel);
  background:var(--lf-panel);border:1px solid var(--lf-brand);
  box-shadow:var(--lf-s3);animation:lf-ent .18s ease}
.lf-barra-ajustes[hidden]{display:none}
.lf-barra-ajustes > span{flex:1;min-width:140px;font-size:13px;font-weight:600;
  color:var(--lf-brand-2)}
@media(max-width:600px){
  .lf-edit-caja{padding:12px}
  .lf-barra-ajustes > span{flex-basis:100%}
}

/* ══════════════════════════════════════════════════════
   PROMOCIONES (Productos · Promociones y Caja)
   ══════════════════════════════════════════════════════ */
/* El segmento marca la opción elegida aunque no haya JavaScript que ponga
   la clase .on (lo usan Apariencia y "Aplica a"). */
.lf-segmento label:has(input:checked){background:var(--lf-sup);color:var(--lf-tinta);box-shadow:var(--lf-s1)}
.lf-promo-bloque{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.lf-promo-ayuda{font-size:11.5px;color:var(--lf-tinta-4);margin:0;line-height:1.5}
.lf-promo-chips{display:flex;flex-wrap:wrap;gap:6px}
.lf-promo-chips label{position:relative;display:inline-flex;align-items:center;margin:0;padding:6px 12px;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r-pill);font-size:12.5px;font-weight:600;
  color:var(--lf-tinta-3);background:var(--lf-sup);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.lf-promo-chips label:hover{color:var(--lf-tinta)}
.lf-promo-chips label:has(input:checked){background:var(--lf-brand-soft);border-color:var(--lf-brand);color:var(--lf-tinta)}
.lf-promo-chips label:focus-within{box-shadow:0 0 0 2px var(--lf-brand-ring)}
.lf-promo-chips input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.lf-promo-chips.dias label{min-width:46px;justify-content:center;padding:6px 8px}
/* La lista para elegir productos: con buscador, y los elegidos resaltados. */
.lf-promo-elige{width:100%;max-width:760px}
.lf-promo-elige .lf-search{margin-bottom:8px}
.lf-promo-elige .lista{max-height:280px;overflow-y:auto;border:1px solid var(--lf-linea);
  border-radius:var(--lf-r);background:var(--lf-sup)}
.lf-promo-elige .fila{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;
  border-bottom:1px solid var(--lf-linea);cursor:pointer}
.lf-promo-elige .fila:last-child{border-bottom:0}
.lf-promo-elige .fila:hover{background:var(--lf-vidrio)}
.lf-promo-elige .fila.on{background:var(--lf-brand-soft)}
.lf-promo-elige .fila input[type="checkbox"]{width:16px;height:16px;flex:none;accent-color:var(--lf-brand)}
.lf-promo-elige .n{flex:1;min-width:0}
.lf-promo-elige .n b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-promo-elige .n small{font-size:11px;color:var(--lf-tinta-4)}
.lf-promo-elige .p{font-size:12px;color:var(--lf-tinta-3);white-space:nowrap}
.lf-promo-elige .cant{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--lf-tinta-3)}
.lf-promo-elige .cant input{width:52px;padding:3px 6px;border:1px solid var(--lf-linea);border-radius:8px;
  background:var(--lf-panel);color:var(--lf-tinta);font-family:var(--lf-mono);font-size:12px}
/* En un paquete, la cantidad solo cuenta en los elegidos. */
.lf-promo-elige .fila:not(.on) .cant{opacity:.35}
@media(max-width:600px){
  .lf-promo-elige .p{display:none}
  .lf-promo-form > div{width:100%!important;min-width:0!important}
}
/* Caja: la promoción de cada renglón, con su "quitar". */
.lf-promo-l:empty{display:none}
.lf-promo-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px}
/* El monto va primero: con un nombre largo, lo que importa se ve igual. */
.lf-promo-tag{display:inline-block;max-width:100%;padding:2px 9px;border-radius:10px;
  font-size:11px;font-weight:600;line-height:1.5;color:var(--lf-brand-2);background:var(--lf-brand-soft)}
.lf-promo-tag b,.lf-linea .lf-promo-tag b{display:inline;font-size:inherit;font-family:var(--lf-mono);font-weight:700;white-space:nowrap}
.lf-promo-tag.off{color:var(--lf-tinta-4);background:var(--lf-vidrio);text-decoration:line-through}
.lf-promo-x{border:0;background:none;padding:0;font-size:11px;font-weight:600;color:var(--lf-tinta-4);
  text-decoration:underline;cursor:pointer}
.lf-promo-x:hover{color:var(--lf-tinta)}
.lf-sumas > .lf-promo-cupon{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-bottom:10px}
.lf-promo-cupon input{text-transform:uppercase}
.lf-promo-cupon small{font-size:11.5px;line-height:1.4}
.lf-promo-cupon small:empty{display:none}
.lf-promo-cupon small.ok{color:var(--lf-brand-2)}
.lf-promo-cupon small.mal{color:var(--lf-amb)}
.lf-sumas > .lf-promo-total span:last-child{color:var(--lf-brand-2);font-weight:600}
.lf-conf-promo{display:block;font-size:11px;color:var(--lf-brand-2);margin-top:1px}
.lf-conf-items li span:has(.lf-conf-promo){white-space:normal}
.lf-conf-desc{display:flex;justify-content:space-between;padding:8px 0 0;font-size:13px;color:var(--lf-brand-2)}

/* Auditoría · Contra un Excel */
.lf-aud-grupo{display:flex;align-items:flex-start;gap:10px;margin-top:6px}
.lf-aud-grupo > small{flex:none;width:128px;padding-top:7px;font-size:11.5px;font-weight:600;color:var(--lf-tinta-4)}
.lf-aud-archivo{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:12px 16px;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r);background:var(--lf-sup)}
.lf-aud-archivo .ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;
  background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-aud-archivo b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-aud-archivo small{display:block;font-size:11.5px;color:var(--lf-tinta-4)}
.lf-aud-filtros{margin-bottom:18px}
.lf-aud-filtros .form-control,.lf-aud-filtros .form-select{width:auto}
.stat-card.lf-aud-mal .stat-value{color:var(--lf-amb)}
@media(max-width:600px){
  .lf-aud-grupo{flex-direction:column;gap:4px}
  .lf-aud-grupo > small{width:auto;padding-top:0}
  .lf-aud-archivo{flex-wrap:wrap}
}
/* La lista de promociones cabe en el ancho: los textos largos se parten en
   vez de mandar las acciones (editar, pausar) fuera de la vista. */
.table-responsive > .table.lf-promo-tabla{min-width:0}
.lf-promo-tabla td{vertical-align:top}
.lf-promo-tabla td:last-child,.lf-promo-tabla td.text-end,.lf-promo-tabla .badge{white-space:nowrap}
.lf-promo-cond{display:block;font-size:11.5px;color:var(--lf-tinta-4);margin-top:2px}
.lf-promo-cond b{color:var(--lf-tinta-2);font-weight:600}
.lf-aud-tabla td[data-label="Detalle"]{min-width:200px}

/* Importar: el aviso de la hoja de ejemplo, arriba del botón de subir. */
.lf-imp-ejemplo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding:12px 14px;
  border:1px dashed var(--lf-linea-f);border-radius:var(--lf-r);background:var(--lf-vidrio)}
.lf-imp-ejemplo .ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;
  background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-imp-ejemplo b{display:block;font-size:13px;color:var(--lf-tinta)}
.lf-imp-ejemplo small{display:block;font-size:12px;line-height:1.5;color:var(--lf-tinta-3);margin-top:2px}

/* Ajustes · Caja: dos tarjetas lado a lado en pantalla ancha. */
.lf-ajustes-caja{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:0 18px;align-items:start}
.lf-ajustes-nota{font-size:11.5px;color:var(--lf-tinta-4);line-height:1.6;margin:14px 0 0;
  padding-top:13px;border-top:1px solid var(--lf-linea)}
.lf-ajustes-sub{font-size:12px;font-weight:700;color:var(--lf-tinta-3);margin:16px 0 8px;
  text-transform:uppercase;letter-spacing:.4px}

/* ══════════════════════════════════════════════════════
   CAJA · EL TICKET REACOMODADO
   Orden del cajero: a quién, qué lleva, cuánto y cómo paga. El total y
   el botón de cobrar quedan fijos al pie mientras el ticket se ve; en el
   celular, una barra lleva al ticket mientras se eligen productos.
   ══════════════════════════════════════════════════════ */
.lf-ticket-quien{padding:0 20px 12px;display:flex;flex-direction:column;gap:8px}
.lf-ticket-esp{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:600;color:var(--lf-tinta-3)}
.lf-ticket-esp span{flex:none;width:76px}
.lf-ticket-esp select{flex:1;min-width:0}
.lf-ticket-vacio{padding:22px 20px;text-align:center;color:var(--lf-tinta-4);font-size:13px;margin:0;
  border-top:1px solid var(--lf-linea)}
.lf-ticket-vacio small{display:block;font-size:11px;margin-top:6px}
.lf-ticket-vacio kbd,.lf-cant kbd{font-family:var(--lf-mono);font-size:10.5px;padding:1px 5px;border-radius:5px;
  border:1px solid var(--lf-linea-f);background:var(--lf-vidrio);color:var(--lf-tinta-3)}
#lista .lf-linea:first-child{border-top:1px solid var(--lf-linea)}
/* Cantidad con − y + */
.lf-cant{display:inline-flex;align-items:center;gap:2px;margin-top:5px;padding:2px;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r-pill);background:var(--lf-vidrio)}
.lf-cant button{width:24px;height:24px;border:0;border-radius:50%;background:none;cursor:pointer;
  font-size:15px;line-height:1;color:var(--lf-tinta-2);display:grid;place-items:center}
.lf-cant button:hover:not(:disabled){background:var(--lf-sup);color:var(--lf-brand-2)}
.lf-cant button:disabled{opacity:.3;cursor:default}
.lf-cant .n{min-width:22px;text-align:center;font-family:var(--lf-mono);font-size:12.5px;font-weight:700;color:var(--lf-tinta)}
/* Más datos: plegable, como "Agregar a una venta" */
.lf-mas-datos{margin:14px 20px 16px;border:1px solid var(--lf-linea);border-radius:var(--lf-r);overflow:hidden}
.lf-mas-datos > summary{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:10px 13px;cursor:pointer;
  list-style:none;font-size:12.5px;font-weight:600;color:var(--lf-tinta-2)}
.lf-mas-datos > summary::-webkit-details-marker{display:none}
.lf-mas-datos > summary::before{content:'+';font-family:var(--lf-mono);color:var(--lf-brand-2);width:10px}
.lf-mas-datos[open] > summary::before{content:'−'}
.lf-mas-datos > summary small{font-weight:400;color:var(--lf-tinta-4);font-size:11.5px}
.lf-mas-datos > summary:hover{background:var(--lf-vidrio)}
.lf-mas-datos[open] > summary{border-bottom:1px solid var(--lf-linea)}
.lf-mas-datos .cuerpo{padding:12px 13px 13px}
.lf-mas-datos .form-label small{font-weight:400;color:var(--lf-tinta-4)}
.lf-mas-datos .pista{font-size:11px;color:var(--lf-tinta-4);line-height:1.5;margin:6px 2px 0}
/* IVA: interruptor */
.lf-sumas > .lf-iva-fila{align-items:center}
.lf-sw{display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;font-size:13px;color:var(--lf-tinta-2)}
.lf-sw input{position:absolute;opacity:0;width:1px;height:1px}
.lf-sw i{position:relative;flex:none;width:34px;height:20px;border-radius:var(--lf-r-pill);
  background:var(--lf-linea-f);transition:background .15s}
.lf-sw i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.lf-sw input:checked + i{background:var(--lf-brand)}
.lf-sw input:checked + i::after{transform:translateX(14px)}
.lf-sw input:focus-visible + i{box-shadow:0 0 0 3px var(--lf-brand-ring)}
.lf-sw input:not(:checked) ~ span{color:var(--lf-tinta-4)}
/* Anticipo con atajos */
.lf-anticipo .cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.lf-anticipo .cab label{margin:0}
.lf-anticipo .atajos{display:flex;gap:5px}
.lf-anticipo .atajos button{padding:4px 11px;border:1px solid var(--lf-linea);border-radius:var(--lf-r-pill);
  background:var(--lf-sup);font-size:11.5px;font-weight:600;color:var(--lf-tinta-3);cursor:pointer}
.lf-anticipo .atajos button:hover{border-color:var(--lf-brand);color:var(--lf-brand-2)}
.lf-anticipo .atajos button.on{background:var(--lf-brand-soft);border-color:var(--lf-brand);color:var(--lf-brand-2)}
.lf-pagacon label small{font-weight:400;color:var(--lf-tinta-4)}
/* El pie fijo: total y cobrar, siempre a la vista mientras se ve el ticket */
.lf-ticket .lf-cobrar-pie{position:sticky;bottom:0;z-index:5;margin-top:6px;padding:12px 20px 16px;
  background:var(--lf-sup);border-top:1px solid var(--lf-linea);
  border-radius:0 0 var(--lf-r-lg) var(--lf-r-lg);box-shadow:0 -8px 16px -12px rgba(0,0,0,.18)}
.lf-cobrar-pie .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.lf-cobrar-pie .tot span{font-size:14px;font-weight:600;color:var(--lf-tinta-2)}
.lf-cobrar-pie .tot b{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--lf-tinta)}
.lf-cobrar-pie .btn{width:100%;padding:14px;justify-content:center}
/* Barra del celular, encima de la barra del pulgar (que se esconde al bajar) */
.lf-caja-barra{display:none}
@media(max-width:940px){
  .lf-caja-barra:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:fixed;left:12px;right:12px;z-index:39;padding:10px 12px 10px 16px;
    bottom:calc(74px + env(safe-area-inset-bottom,0px));transition:bottom .2s;
    background:var(--lf-sup);border:1px solid var(--lf-linea);border-radius:var(--lf-r-lg);box-shadow:var(--lf-s3)}
  body.lf-dedo-oculta .lf-caja-barra{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .lf-caja-barra b{display:block;font-size:17px;font-weight:800;color:var(--lf-tinta)}
  .lf-caja-barra small{display:block;font-size:11px;color:var(--lf-tinta-4)}
  /* El pie fijo del ticket no se esconde detrás de la barra del pulgar */
  .lf-ticket .lf-cobrar-pie{bottom:calc(66px + env(safe-area-inset-bottom,0px));transition:bottom .2s}
  body.lf-dedo-oculta .lf-ticket .lf-cobrar-pie{bottom:env(safe-area-inset-bottom,0px)}
}
/* Lo que solo hace falta sin JavaScript (ver layout: html.lf-js). */
.lf-js .lf-sin-js{display:none!important}
/* Caja · cobro completo (sin campo) o solo una parte (con campo) */
.lf-cobro-completo{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 10px}
.lf-cobro-completo span{font-size:12.5px;font-weight:600;color:var(--lf-tinta-2)}
.lf-cobro-completo b{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--lf-tinta)}
.lf-cobro-completo .lf-link{grid-column:1 / -1;justify-self:end}
.lf-link{border:0;background:none;padding:0;font-size:12px;font-weight:600;color:var(--lf-brand-2);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lf-link:hover{color:var(--lf-tinta)}
/* Billetes rápidos para el cambio */
.lf-pagacon .billetes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.lf-pagacon .billetes:empty{display:none}
.lf-pagacon .billetes button{flex:1;min-width:64px;padding:7px 8px;border:1px solid var(--lf-linea);
  border-radius:var(--lf-r);background:var(--lf-sup);font-family:var(--lf-mono);font-size:12.5px;
  font-weight:700;color:var(--lf-tinta-2);cursor:pointer}
.lf-pagacon .billetes button:first-child{font-family:var(--lf-font)}
.lf-pagacon .billetes button:hover{border-color:var(--lf-brand);color:var(--lf-brand-2)}
/* "Agregar a una venta que ya existe" no va pegado al encabezado del ticket. */
.lf-ticket .lf-ampliar{margin-top:14px}
/* Confirmación de Caja: precio por pieza, IVA y cambio */
.lf-conf-pu{display:block;font-size:11px;color:var(--lf-tinta-4);margin-top:1px}
.lf-conf-items li span:has(.lf-conf-pu){white-space:normal}
.lf-conf-iva{display:flex;justify-content:space-between;padding:8px 0 0;font-size:12.5px;color:var(--lf-tinta-3)}
.lf-conf-cambio{color:var(--lf-brand-2)}
/* ══════════════════════════════════════════════════════
   CAJA · AVISO DE PROMOCIÓN
   La insignia de la tarjeta, la franja de las de toda la compra, el
   aviso al agregar y la pista de lo que le falta al ticket.
   ══════════════════════════════════════════════════════ */
.lf-serv{position:relative}
.lf-serv-promo{position:absolute;top:7px;left:7px;z-index:1;max-width:calc(100% - 14px);padding:2px 8px;
  border-radius:999px;background:var(--lf-brand-d);color:#fff;font-family:var(--lf-mono);font-size:11px;
  font-weight:800;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 2px 6px rgba(0,0,0,.18);pointer-events:none}
.lf-serv.con-promo{border-color:var(--lf-brand-ring)}
.lf-promo-hoy{display:flex;align-items:flex-start;gap:8px;margin:0 20px 12px;padding:9px 12px;
  border-radius:var(--lf-r);background:var(--lf-brand-soft);color:var(--lf-tinta-2);font-size:12.5px;line-height:1.45}
.lf-promo-hoy svg{flex:none;margin-top:1px;color:var(--lf-brand-2)}
.lf-promo-hoy b{color:var(--lf-tinta)}
@media(max-width:560px){ .lf-promo-hoy{margin:0 14px 12px} }
.lf-promo-tag.nueva{animation:lf-promo-sale .5s var(--lf-rebote, ease) both}
@keyframes lf-promo-sale{from{transform:scale(.7);opacity:0}}
.lf-linea.lf-promo-flash{animation:lf-promo-flash 1.4s ease}
@keyframes lf-promo-flash{0%,30%{background:var(--lf-brand-soft)}}
/* Las de toda la compra con mínimo: abajo de la lista. */
.lf-promo-pistas{margin:8px 20px 0;display:flex;flex-direction:column;gap:6px}
.lf-promo-pistas p{display:flex;align-items:flex-start;gap:7px;margin:0;padding:8px 11px;border-radius:var(--lf-r);
  background:var(--lf-amb-soft);color:var(--lf-tinta-2);font-size:12px;line-height:1.45}
.lf-promo-pistas svg{flex:none;margin-top:2px;color:var(--lf-amb)}
.lf-promo-pistas b{color:var(--lf-tinta)}
/* El aviso al agregar. */
.lf-promo-aviso{position:fixed;top:74px;right:16px;z-index:430;display:flex;align-items:flex-start;gap:11px;
  width:340px;max-width:calc(100vw - 32px);padding:12px 12px 12px 14px;border:1px solid var(--lf-linea);
  border-radius:16px;background:var(--lf-panel);color:var(--lf-tinta);box-shadow:var(--lf-s3);
  animation:lf-promo-entra .4s var(--lf-rebote, ease) both}
.lf-promo-aviso .ico{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-promo-aviso .ico svg{width:19px;height:19px}
.lf-promo-aviso .txt{flex:1;min-width:0}
.lf-promo-aviso b{display:block;font-size:13px;font-weight:700;line-height:1.35}
.lf-promo-aviso small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--lf-tinta-3)}
.lf-promo-aviso small strong{color:var(--lf-tinta-2);font-weight:600}
.lf-promo-aviso small.ok{color:var(--lf-brand-2);font-weight:600}
.lf-promo-aviso small.falta{color:var(--lf-amb);font-weight:600}
.lf-promo-aviso .x{flex:none;border:0;background:none;font-size:18px;line-height:1;color:var(--lf-tinta-4);cursor:pointer;padding:2px 4px}
.lf-promo-aviso.va{opacity:0;transform:translateX(24px);transition:opacity .3s,transform .3s}
@keyframes lf-promo-entra{from{opacity:0;transform:translateX(28px) scale(.96)}}
@media(max-width:940px){ .lf-promo-aviso{top:64px;right:8px;left:8px;width:auto;max-width:none} }
@media(prefers-reduced-motion:reduce){
  .lf-promo-aviso,.lf-promo-tag.nueva,.lf-linea.lf-promo-flash{animation:none}
}
/* Promociones: qué hace el código de cupón. */
.lf-promo-cod::placeholder{text-transform:none;font-family:var(--lf-font)}
/* Caja · promoción disponible en el renglón: el nombre arriba y lo que le
   falta abajo, con el ícono al lado. Antes era una etiqueta en línea y,
   con el ticket angosto, todo quedaba revuelto. */
.lf-promo-l:has(.lf-promo-disp){display:block}
.lf-promo-disp{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:1px;
  align-items:start;margin-top:2px;padding:7px 10px;border-radius:10px;
  background:var(--lf-amb-soft);border:1px solid color-mix(in srgb, var(--lf-amb) 22%, transparent);line-height:1.35}
.lf-promo-disp .i{grid-row:span 2;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:color-mix(in srgb, var(--lf-amb) 16%, transparent);color:var(--lf-amb)}
.lf-promo-disp .i svg{width:13px;height:13px}
.lf-promo-disp .n{font-size:12px;font-weight:700;color:var(--lf-tinta);overflow-wrap:anywhere}
.lf-promo-disp .d{font-size:11.5px;color:var(--lf-tinta-3);overflow-wrap:anywhere}
.lf-promo-disp .e{font-family:var(--lf-mono);font-weight:700;color:var(--lf-amb)}
/* El precio del renglón: cabe un 10000.00 y sin las flechitas del navegador. */
.lf-precio{width:104px;-moz-appearance:textfield;appearance:textfield}
.lf-precio::-webkit-inner-spin-button,.lf-precio::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* La promoción del renglón, en su propia fila debajo del producto, a todo
   lo ancho del ticket (antes iba en la columna del nombre, junto al precio). */
.lf-ticket .lf-linea{flex-wrap:wrap;row-gap:8px}
.lf-ticket .lf-linea > .lf-promo-l{flex:0 0 100%;margin-top:0}
/* ══════════════════════════════════════════════════════
   PRODUCTOS · ALTA Y EDICIÓN
   Precio, costo y utilidad en un renglón, con lo que queda por venta al
   lado; la descripción plegada. Lo de tienda (marca, caducidad, stock)
   no va aquí.
   ══════════════════════════════════════════════════════ */
.lf-form > .lf-salto{flex:0 0 100%;height:0;padding:0;margin:-8px 0 0}
.lf-sufijo{position:relative}
.lf-sufijo .form-control{width:100%;padding-right:28px}
.lf-sufijo span{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:12.5px;
  color:var(--lf-tinta-4);pointer-events:none}
.lf-sufijo .form-control:disabled{background:var(--lf-vidrio);cursor:not-allowed}
.lf-margen{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  min-height:38px;padding:8px 13px;border-radius:var(--lf-r);background:var(--lf-brand-soft)}
.lf-margen .t{font-size:12px;font-weight:600;color:var(--lf-tinta-2)}
.lf-margen b{font-size:15px;font-weight:800;color:var(--lf-brand-2)}
.lf-margen.neutro{background:var(--lf-vidrio)}
.lf-margen.neutro b{font-family:var(--lf-font);font-size:12px;font-weight:500;color:var(--lf-tinta-3)}
.lf-margen.mal{background:var(--lf-rojo-soft)}
.lf-margen.mal .t,.lf-margen.mal b{color:var(--lf-rojo)}
.lf-form > .lf-prod-mas{flex:0 0 100%;margin:0}
.lf-prod-mas textarea{width:100%;resize:vertical}
/* ══════════════════════════════════════════════════════
   INVENTARIO
   Existencias (lo que hay, lo que falta primero) y Movimientos (por qué
   cambió). Más el rastro en Caja y en el formulario de producto.
   ══════════════════════════════════════════════════════ */
.lf-inv-apagado .card-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 24px;max-width:620px}
.lf-inv-apagado h3{margin:4px 0 0;font-size:17px;font-weight:700;color:var(--lf-tinta)}
.lf-inv-apagado p{margin:0;font-size:13.5px;line-height:1.55;color:var(--lf-tinta-3)}
.lf-inv-apagado .lf-tile{width:44px;height:44px;border-radius:13px;margin:0}
.lf-inv-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.lf-inv-cab .lf-pills{margin:0}
.lf-inv-suc{display:inline-flex;align-items:center;padding:6px 13px;border-radius:calc(var(--lf-r) - 3px);
  font-size:12.5px;font-weight:600;color:var(--lf-tinta-3);text-decoration:none}
.lf-inv-suc:hover{color:var(--lf-tinta)}
.lf-inv-suc.on{background:var(--lf-sup);color:var(--lf-tinta);box-shadow:var(--lf-s1)}
.lf-inv-tipos{flex:0 0 100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lf-inv-tipos .pista{margin:0;font-size:12px;color:var(--lf-tinta-4)}
.lf-inv-queda{font-size:12.5px;font-weight:600;color:var(--lf-tinta-3)}
.lf-inv-queda.mal{color:var(--lf-rojo)}
.lf-inv-check{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:13px;color:var(--lf-tinta-2);cursor:pointer}
.lf-inv-tabla{min-width:0}
.lf-inv-nom{display:block;font-weight:600}
.lf-inv-cod{color:var(--lf-tinta-4);font-size:11.5px}
.lf-inv-hay{font-weight:700;font-size:14px}
.lf-inv-hay.mal{color:var(--lf-rojo)}
.lf-inv-acc{text-align:right;white-space:nowrap}
.lf-inv-acc .btn + .btn{margin-left:6px}
.lf-inv-vacio{text-align:center;color:var(--lf-tinta-4);padding:34px!important;line-height:1.6}
.lf-inv-fecha{white-space:nowrap}
.lf-inv-fecha small{display:block;color:var(--lf-tinta-4);font-size:11.5px}
.lf-inv-tipo{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:var(--lf-vidrio);color:var(--lf-tinta-2)}
.lf-inv-tipo.t-entrada,.lf-inv-tipo.t-inicial,.lf-inv-tipo.t-devolucion{background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-inv-tipo.t-salida{background:var(--lf-rojo-soft);color:var(--lf-rojo)}
.lf-inv-tipo.t-conteo{background:var(--lf-amb-soft);color:var(--lf-amb)}
.lf-inv-cant{font-weight:700}
.lf-inv-cant.mas{color:var(--lf-brand-2)}
.lf-inv-cant.menos{color:var(--lf-rojo)}
.lf-inv-det{font-size:12.5px;color:var(--lf-tinta-3)}
.lf-inv-det > * + *::before{content:' · '}
/* Caja: cuántas quedan, arriba a la derecha de la tarjeta. */
.lf-serv-hay{position:absolute;top:7px;right:7px;z-index:1;max-width:calc(100% - 14px);padding:2px 8px;
  border-radius:999px;background:var(--lf-panel);color:var(--lf-tinta-2);font-family:var(--lf-mono);font-size:11px;
  font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 1px 4px rgba(0,0,0,.14);pointer-events:none}
.lf-serv-hay.bajo{background:var(--lf-amb);color:#fff}
.lf-serv-hay.agotado{background:var(--lf-rojo);color:#fff;font-family:var(--lf-font)}
.lf-linea-hay,.lf-linea .lf-linea-hay{display:block;margin-top:4px;font-size:11.5px;font-weight:600;color:var(--lf-rojo)}
.lf-promo-aviso.mal .ico{background:var(--lf-rojo-soft);color:var(--lf-rojo)}
/* Producto: «Lleva existencias». */
.lf-form > .lf-prod-inv{flex:0 0 100%;padding:12px 14px;border:1px solid var(--lf-linea);border-radius:var(--lf-r)}
.lf-prod-inv .lf-sw span b{color:var(--lf-tinta);font-weight:600}
.lf-prod-inv .lf-sw span small{color:var(--lf-tinta-4);font-size:12px}
.lf-prod-inv .cuerpo{margin-top:12px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-start}
.lf-prod-inv-uni{display:flex;flex-direction:column;width:160px}
.lf-prod-inv-tabla{border-collapse:separate;border-spacing:0 6px;margin-top:-6px}
.lf-prod-inv-tabla th{font-size:12px;font-weight:600;color:var(--lf-tinta-2);padding:0 12px 0 0;text-align:left}
.lf-prod-inv-tabla td{padding:0 12px 0 0;vertical-align:middle}
.lf-prod-inv-tabla td.suc{font-size:13px;color:var(--lf-tinta-2);white-space:nowrap}
.lf-prod-inv-tabla .form-control{width:130px}
.lf-prod-inv-tabla b{font-size:14px;margin-right:8px}
.lf-prod-inv-tabla b.mal{color:var(--lf-rojo)}
.lf-prod-inv .pista{flex:0 0 100%;margin:0;font-size:11.5px;color:var(--lf-tinta-4)}
.lf-serv:has(.lf-serv-hay) .lf-serv-promo,.lf-serv:has(.lf-serv-promo) .lf-serv-hay{max-width:calc(50% - 10px)}
/* Caja: por kilo, litro o metro la cantidad se escribe («0.5 kg»). */
.lf-cant.frac{gap:4px;padding:2px 9px 2px 2px}
.lf-cant-in{width:72px;height:24px;padding:0 8px;border:0;border-radius:999px;background:var(--lf-sup);
  color:var(--lf-tinta);font-size:12.5px;font-weight:700;text-align:right;outline:none;
  -moz-appearance:textfield;appearance:textfield}
.lf-cant-in::-webkit-inner-spin-button,.lf-cant-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.lf-cant-in:focus{box-shadow:0 0 0 2px var(--lf-brand-ring)}
.lf-cant.frac .u{font-size:12px;font-weight:600;color:var(--lf-tinta-3)}
.lf-serv .p .por{display:inline;font-family:var(--lf-font);font-size:11px;font-weight:600;color:var(--lf-tinta-3);margin-left:1px}
/* Usuarios: para quién es el rol elegido, a todo lo ancho bajo la fila. */
.lf-usr-rol{flex:0 0 100%;margin:-4px 0 0;font-size:12.5px;line-height:1.45;color:var(--lf-tinta-3)}
.lf-usr-rol:empty{display:none}
.lf-usr-rol b{color:var(--lf-tinta-2);font-weight:600}
.lf-serv .p:has(.por){white-space:nowrap}
/* ══════════════════════════════════════════════════════
   BIENVENIDA · LA CONFIGURACIÓN INICIAL
   Una pregunta por pantalla, tarjetas ilustradas y, al lado,
   la vista previa del menú que se arma con las respuestas.
   ══════════════════════════════════════════════════════ */
body.lf-bv-cuerpo{margin:0;min-height:100vh;min-height:100dvh;background:var(--lf-lienzo)}
.lf-bv{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:radial-gradient(1200px 600px at 100% 0%, color-mix(in srgb, var(--lf-brand) 10%, transparent), transparent 60%)}
.lf-bv-cab{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;padding:16px clamp(18px,4vw,48px);
  background:color-mix(in srgb, var(--lf-lienzo) 86%, transparent);backdrop-filter:blur(8px)}
.lf-bv-marca{font-size:19px;font-weight:800;letter-spacing:-.6px;color:var(--lf-brand-2)}
.lf-bv-avance{flex:1;max-width:520px;height:6px;margin:0 auto;border-radius:999px;background:var(--lf-linea);overflow:hidden}
.lf-bv-avance i{display:block;height:100%;width:12%;border-radius:inherit;background:var(--lf-brand);transition:width .35s var(--lf-suave, ease)}
.lf-bv-num{font-size:12.5px;font-weight:600;color:var(--lf-tinta-3);white-space:nowrap}
.lf-bv-saltar{border:0;background:none;padding:6px 4px;font-size:13px;font-weight:600;color:var(--lf-tinta-3);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lf-bv-saltar:hover{color:var(--lf-tinta)}
.lf-bv-form{flex:1;display:flex;flex-direction:column}
.lf-bv-grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,4vw,64px);
  width:100%;max-width:1180px;margin:0 auto;padding:clamp(18px,4vh,44px) clamp(18px,4vw,48px)}
/* Los pasos */
.lf-bv.js .paso{display:none}
.lf-bv.js .paso.on{display:block;animation:lf-bv-entra .35s var(--lf-suave, ease)}
@keyframes lf-bv-entra{from{opacity:0;transform:translateY(10px)}}
.lf-bv:not(.js) .paso{margin-bottom:48px}
.paso.falta .lf-bv-tarjetas{animation:lf-bv-sacude .4s}
@keyframes lf-bv-sacude{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.lf-bv .eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--lf-brand-2)}
.lf-bv h1{margin:8px 0 0;font-size:clamp(26px,3.2vw,36px);line-height:1.12;font-weight:800;letter-spacing:-1px;color:var(--lf-tinta)}
.lf-bv .sub{margin:10px 0 0;max-width:620px;font-size:15px;line-height:1.55;color:var(--lf-tinta-3)}
.lf-bv .lf-aviso{margin-bottom:18px}
/* Las tarjetas */
.lf-bv-tarjetas{display:grid;gap:14px;margin-top:28px}
.lf-bv-tarjetas.c3{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.lf-bv-tarjetas.c2{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.lf-bv-tarjetas .tj{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;
  padding:18px 18px 16px;border:1.5px solid var(--lf-linea);border-radius:18px;background:var(--lf-sup);cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s}
.lf-bv-tarjetas .tj:hover{border-color:color-mix(in srgb, var(--lf-brand) 55%, var(--lf-linea));transform:translateY(-2px);box-shadow:var(--lf-s2)}
.lf-bv-tarjetas .tj input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lf-bv-tarjetas .ilu{display:grid;place-items:center;width:58px;height:58px;margin-bottom:10px;border-radius:16px;
  background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-bv-tarjetas .ilu svg{width:32px;height:32px}
.lf-bv-tarjetas .ilu.txt b{font-size:19px;font-weight:800;letter-spacing:-.5px;color:var(--lf-brand-2)}
.lf-bv-tarjetas .tj > b{font-size:15.5px;font-weight:700;color:var(--lf-tinta)}
.lf-bv-tarjetas .tj > small{font-size:13px;line-height:1.45;color:var(--lf-tinta-3)}
.lf-bv-tarjetas .ok{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--lf-linea-f);transition:all .15s}
.lf-bv-tarjetas .tj:has(input:checked){border-color:var(--lf-brand);
  box-shadow:0 0 0 4px var(--lf-brand-ring), var(--lf-s2)}
.lf-bv-tarjetas .tj:has(input:checked) .ok{border-color:var(--lf-brand);background:var(--lf-brand)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.lf-bv-tarjetas .tj:has(input:checked) .ilu{background:var(--lf-brand);color:#fff}
.lf-bv-tarjetas .tj:has(input:checked) .ilu.txt b{color:#fff}
.lf-bv-tarjetas .tj:has(input:focus-visible){box-shadow:0 0 0 4px var(--lf-brand-ring)}
/* Próximamente: se ve que viene, no se puede elegir. */
.lf-bv-tarjetas .tj.prox{cursor:default;border-style:dashed;background:transparent}
.lf-bv-tarjetas .tj.prox:hover{transform:none;box-shadow:none;border-color:var(--lf-linea)}
.lf-bv-tarjetas .tj.prox .ilu{background:var(--lf-vidrio);color:var(--lf-tinta-4)}
.lf-bv-tarjetas .tj.prox > b{color:var(--lf-tinta-3)}
.lf-bv-tarjetas .tj.prox em{position:absolute;top:14px;right:14px;padding:3px 9px;border-radius:999px;font-style:normal;
  font-size:11px;font-weight:700;background:var(--lf-amb-soft);color:var(--lf-amb)}
/* Áreas */
.lf-bv-areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.lf-bv-areas .chip{position:relative;margin:0;cursor:pointer}
.lf-bv-areas .chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lf-bv-areas .chip span{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;
  border:1.5px solid var(--lf-linea);background:var(--lf-sup);font-size:14px;font-weight:600;color:var(--lf-tinta-3);
  text-decoration:line-through;transition:all .15s}
.lf-bv-areas .chip input:checked + span{border-color:var(--lf-brand);background:var(--lf-brand-soft);color:var(--lf-brand-2);text-decoration:none}
.lf-bv-areas .chip input:checked + span::before{content:'✓';font-weight:800}
.lf-bv-areas .vacio{margin:0;font-size:14px;color:var(--lf-tinta-3)}
.lf-bv-otra{display:flex;gap:10px;max-width:480px;margin-top:18px}
.lf-bv-otra .form-control{flex:1;height:44px}
.lf-bv .ya{margin:14px 0 0;font-size:13px;color:var(--lf-tinta-4)}
/* La marca */
.lf-bv-marca-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;margin-top:28px;align-items:start}
.lf-bv-logo{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:0;
  padding:24px 18px;border:1.5px dashed var(--lf-linea-f);border-radius:18px;background:var(--lf-sup);cursor:pointer}
.lf-bv-logo:hover{border-color:var(--lf-brand)}
.lf-bv-logo input{position:absolute;opacity:0;inset:0;cursor:pointer}
.lf-bv-logo .vista{display:grid;place-items:center;width:96px;height:96px;margin-bottom:8px;border-radius:22px;
  background:var(--lf-brand-soft);color:var(--lf-brand-2);overflow:hidden}
.lf-bv-logo .vista img{max-width:84px;max-height:84px;object-fit:contain}
.lf-bv-logo b{font-size:15px;font-weight:700;color:var(--lf-tinta)}
.lf-bv-logo small{font-size:12.5px;line-height:1.45;color:var(--lf-tinta-3);overflow-wrap:anywhere}
.lf-bv-colores{margin:0;padding:18px;border:1.5px solid var(--lf-linea);border-radius:18px;background:var(--lf-sup)}
.lf-bv-colores legend{float:left;width:100%;margin-bottom:14px;font-size:15px;font-weight:700;color:var(--lf-tinta)}
.lf-bv-colores .sw{clear:both;display:flex;flex-wrap:wrap;gap:12px}
.lf-bv-colores label{position:relative;margin:0;cursor:pointer}
.lf-bv-colores input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lf-bv-colores span{display:block;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);transition:transform .15s}
.lf-bv-colores label:hover span{transform:scale(1.08)}
.lf-bv-colores input:checked + span{box-shadow:0 0 0 3px var(--lf-sup), 0 0 0 5px currentColor;color:var(--lf-tinta-2);transform:scale(1.06)}
/* Resumen */
.lf-bv-resumen{list-style:none;margin:26px 0 0;padding:0;max-width:640px;border:1.5px solid var(--lf-linea);border-radius:18px;background:var(--lf-sup)}
.lf-bv-resumen li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:14px 18px}
.lf-bv-resumen li + li{border-top:1px solid var(--lf-linea)}
.lf-bv-resumen span{font-size:13px;font-weight:600;color:var(--lf-tinta-3)}
.lf-bv-resumen b{font-size:14px;font-weight:600;color:var(--lf-tinta)}
/* La vista previa */
.lf-bv-vista{position:sticky;top:90px;align-self:start}
.lf-bv-vista .mini{display:grid;grid-template-columns:130px 1fr;height:380px;border:1px solid var(--lf-linea);border-radius:18px;
  overflow:hidden;background:var(--lf-sup);box-shadow:var(--lf-s3)}
.lf-bv-vista .mini-side{padding:14px 10px;background:var(--lf-panel);border-right:1px solid var(--lf-linea)}
.lf-bv-vista .mini-marca{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.lf-bv-vista .mini-marca .g{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;overflow:hidden;
  background:var(--lf-brand);color:#fff;font-size:12px;font-weight:800;transition:background .3s}
.lf-bv-vista .mini-marca .g img{width:100%;height:100%;object-fit:contain;background:#fff}
.lf-bv-vista .mini-marca b{font-size:11px;font-weight:700;line-height:1.2;color:var(--lf-tinta);overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.lf-bv-vista ul{list-style:none;margin:0;padding:0}
.lf-bv-vista li{display:flex;align-items:center;gap:6px;max-height:26px;padding:5px 7px;border-radius:7px;font-size:11px;
  font-weight:600;color:var(--lf-tinta-3);overflow:hidden;transition:max-height .3s, opacity .3s, padding .3s, margin .3s}
.lf-bv-vista li:first-child{background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-bv-vista li.fuera{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.lf-bv-vista .mini-main{padding:16px}
.lf-bv-vista .mini-main .b{display:block;height:9px;margin-bottom:9px;border-radius:5px;background:var(--lf-linea)}
.lf-bv-vista .mini-main .b.t{height:7px;opacity:.7;margin-bottom:16px}
.lf-bv-vista .w35{width:35%}.lf-bv-vista .w60{width:60%}.lf-bv-vista .w75{width:75%}.lf-bv-vista .w80{width:80%}.lf-bv-vista .w90{width:90%}
.lf-bv-vista .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:16px}
.lf-bv-vista .cards i{height:48px;border-radius:9px;background:var(--lf-vidrio)}
.lf-bv-vista .cards i:first-child{background:var(--lf-brand);transition:background .3s}
.lf-bv-vista > p{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--lf-tinta-4)}
/* El pie */
.lf-bv-pie{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(18px,4vw,48px);border-top:1px solid var(--lf-linea);
  background:color-mix(in srgb, var(--lf-sup) 92%, transparent);backdrop-filter:blur(8px)}
.lf-bv-pie .lf-rg-boton{width:auto;min-width:220px;padding:0 28px;margin:0}
.lf-bv-atras{border:1.5px solid var(--lf-linea);background:var(--lf-sup);height:48px;padding:0 22px;border-radius:var(--lf-r);
  font-family:var(--lf-font);font-size:14.5px;font-weight:600;color:var(--lf-tinta-2);cursor:pointer}
.lf-bv-atras:hover{border-color:var(--lf-tinta-4)}
@media(max-width:940px){
  .lf-bv-grid{grid-template-columns:1fr}
  .lf-bv-vista{display:none}
}
@media(max-width:560px){
  .lf-bv-cab{gap:12px}
  .lf-bv-marca{display:none}
  .lf-bv-tarjetas.c3,.lf-bv-tarjetas.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lf-bv-tarjetas .tj{padding:14px 12px}
  .lf-bv-tarjetas .ilu{width:46px;height:46px}
  .lf-bv-tarjetas .ilu svg{width:26px;height:26px}
  .lf-bv-tarjetas .tj > small{font-size:12px}
  .lf-bv-marca-grid{grid-template-columns:1fr}
  .lf-bv-resumen li{grid-template-columns:1fr;gap:3px}
  .lf-bv-pie .lf-rg-boton{flex:1;min-width:0}
}

/* ══════════════════════════════════════════════════════
   LA ENTRADA AL SISTEMA (después de la bienvenida)
   La marca a pantalla completa; luego el menú entra pieza
   por pieza y el contenido sube. Termina y arranca la guía.
   ══════════════════════════════════════════════════════ */
.lf-estreno-velo{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;color:#fff;
  background:var(--lf-brand);
  background-image:radial-gradient(900px 600px at 50% 40%, color-mix(in srgb, #fff 14%, transparent), transparent 65%);
  animation:lf-estreno-entra .45s ease both}
.lf-estreno-velo .c{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:24px;
  animation:lf-estreno-marca .7s var(--lf-rebote, ease) .1s both}
.lf-estreno-velo .g{display:grid;place-items:center;width:92px;height:92px;margin-bottom:6px;border-radius:26px;
  background:rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(0,0,0,.18);font-size:42px;font-weight:800;overflow:hidden}
.lf-estreno-velo .g img{max-width:74px;max-height:74px;object-fit:contain}
.lf-estreno-velo b{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.8px}
.lf-estreno-velo small{font-size:15px;opacity:.88}
.lf-estreno-velo small.ojo{font-size:12.5px;opacity:.8}
.lf-estreno-velo.va{animation:lf-estreno-sale .6s ease forwards}
@keyframes lf-estreno-entra{from{opacity:0}}
@keyframes lf-estreno-marca{from{opacity:0;transform:scale(.86) translateY(10px)}}
@keyframes lf-estreno-sale{to{opacity:0;transform:scale(1.04);visibility:hidden}}
html.lf-estreno .lf-nav > *,html.lf-estreno .lf-main{opacity:0}
html.lf-estreno.lf-estreno-menu .lf-nav > *{animation:lf-estreno-item .45s var(--lf-suave, ease) both;
  animation-delay:calc(var(--i, 0) * 45ms + .1s)}
html.lf-estreno.lf-estreno-menu .lf-main{animation:lf-estreno-sube .6s var(--lf-suave, ease) .35s both}
@keyframes lf-estreno-item{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes lf-estreno-sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .lf-estreno-velo,.lf-estreno-velo .c,html.lf-estreno.lf-estreno-menu .lf-nav > *,html.lf-estreno.lf-estreno-menu .lf-main{animation-duration:.01s;animation-delay:0s}
  .lf-bv.js .paso.on{animation:none}
}
/* Ajustes → Empresa: repetir la configuración inicial. */
.lf-ajustes-inicio{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r);background:var(--lf-vidrio)}
.lf-ajustes-inicio b{display:block;font-size:13px;font-weight:600;color:var(--lf-tinta)}
.lf-ajustes-inicio small{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--lf-tinta-4)}
.lf-ajustes-inicio .btn{flex:none}
.lf-bv-tarjetas.c4{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
@media(max-width:560px){ .lf-bv-tarjetas.c4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }

/* ══════════════════════════════════════════════════════
   MÓDULOS (Ajustes → Módulos y las pantallas de cada uno)
   ══════════════════════════════════════════════════════ */
.lf-mod-intro{margin:0 0 18px;max-width:760px;font-size:13.5px;line-height:1.55;color:var(--lf-tinta-3)}
.lf-mod-grupo{margin:22px 0 10px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--lf-tinta-4)}
.lf-mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.lf-mod{position:relative;display:flex;align-items:flex-start;gap:13px;margin:0;padding:16px 16px 15px;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r-lg);background:var(--lf-sup);box-shadow:var(--lf-s1);
  transition:border-color .15s, box-shadow .15s}
.lf-mod.on{border-color:color-mix(in srgb, var(--lf-brand) 45%, var(--lf-linea));box-shadow:0 0 0 3px var(--lf-brand-glow), var(--lf-s1)}
.lf-mod .ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--lf-vidrio);color:var(--lf-tinta-3);transition:background .15s, color .15s}
.lf-mod.on .ico{background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-mod .txt{flex:1;min-width:0}
.lf-mod .txt b{display:block;font-size:14px;font-weight:700;color:var(--lf-tinta)}
.lf-mod .txt small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--lf-tinta-3)}
.lf-mod .txt small.plan{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px;font-weight:600;color:var(--lf-amb)}
.lf-mod .txt small.req{margin-top:7px;font-size:11.5px;color:var(--lf-tinta-4)}
.lf-mod .lf-sw{flex:none;margin-top:2px}
.lf-mod [data-aviso]{position:absolute;right:14px;bottom:8px;margin:0;font-size:11px;color:var(--lf-tinta-4)}
.lf-mod.candado{background:var(--lf-vidrio);box-shadow:none}
.lf-mod.candado .ico{opacity:.7}
.lf-mod.candado .txt b{color:var(--lf-tinta-2)}

/* Botón de lo que no se deshace (cancelar una venta). */
.lf-btn-peligro{color:var(--lf-rojo)!important;border-color:color-mix(in srgb, var(--lf-rojo) 35%, var(--lf-linea))!important}
.lf-btn-peligro:hover{background:var(--lf-rojo-soft)!important;border-color:var(--lf-rojo)!important}
.lf-venta-cancelada b{font-weight:700}

/* Seguimiento del trabajo dentro de una venta. */
.lf-trab-venta .lf-form{padding:14px 18px;align-items:flex-end}
.lf-trab-venta .tit{flex:0 0 100%;display:flex;align-items:center;gap:8px;flex-direction:row!important;color:var(--lf-tinta)}
.lf-trab-venta .tit svg{color:var(--lf-brand)}
.lf-trab-venta .tit b{font-size:14px}
.lf-trab-venta .tit small{margin-left:auto;font-size:11.5px;color:var(--lf-tinta-4)}

/* Caja: usar una sesión del paquete del cliente. */
.lf-paq{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 10px;border-radius:999px;cursor:pointer;
  border:1px dashed color-mix(in srgb, var(--lf-brand) 60%, var(--lf-linea));background:transparent;
  font-size:11.5px;font-weight:600;color:var(--lf-brand-2);font-family:inherit;line-height:1.5}
.lf-paq:hover{background:var(--lf-brand-glow)}
.lf-paq.on{border-style:solid;background:var(--lf-brand-soft)}
.lf-linea .lf-precio[readonly]{background:var(--lf-vidrio);color:var(--lf-tinta-3)}

/* Inventario: traspasos y conteo general. */
.lf-inv-tipo.t-traspaso{background:var(--lf-info-soft, var(--lf-vidrio));color:var(--lf-info, var(--lf-tinta-2))}
.lf-inv-sub{display:block;margin-top:2px;font-size:12px;font-weight:400;line-height:1.45;color:var(--lf-tinta-4)}
.lf-conteo .lf-conteo-in{width:110px;margin-left:auto;text-align:right}
.lf-conteo-dif{font-weight:700;color:var(--lf-tinta-4)}
.lf-conteo-dif.ok{color:var(--lf-brand-2)}
.lf-conteo-dif.mas{color:var(--lf-brand-2)}
.lf-conteo-dif.menos{color:var(--lf-rojo)}
.lf-conteo-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lf-conteo-pie .pista{flex:1;margin:0;font-size:12.5px;color:var(--lf-tinta-3)}

/* Elegir cliente (Cotizaciones, Agenda, Igualas). */
.lf-elige-cli{position:relative;display:flex;flex-direction:column}
.lf-elige-cli .lf-search{width:100%}
.lf-elige-cli .lf-search input{width:100%}
.lf-elige-cli .lf-sugerencias{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:4px}
.lf-elige-cli-pista{min-height:16px;margin-top:4px;font-size:11.5px;color:var(--lf-tinta-4)}

/* Renglones de cotización y de compra. */
.lf-cot-renglones{flex:0 0 100%;display:flex;flex-direction:column;gap:10px}
.lf-cot-renglones .form-label{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lf-cot-renglones .pista{margin:0;font-size:12.5px;color:var(--lf-tinta-4)}
.lf-cot-agregar{display:flex;gap:10px;flex-wrap:wrap}
.lf-cot-agregar .form-select{flex:1;min-width:220px;max-width:460px}
.lf-cot-tabla{width:100%;border-collapse:separate;border-spacing:0}
.lf-cot-tabla th{padding:6px 8px;font-size:11.5px;font-weight:600;color:var(--lf-tinta-3);border-bottom:1px solid var(--lf-linea);text-align:left}
.lf-cot-tabla td{padding:6px 8px;vertical-align:middle;border-bottom:1px solid var(--lf-linea)}
.lf-cot-tabla td .form-control-sm[type="number"]{width:105px;margin-left:auto;text-align:right}
.lf-cot-tabla tfoot td{border:none;padding-top:10px;font-size:14px;font-weight:700;color:var(--lf-tinta)}
.lf-co-sug{font-size:12px;font-weight:600}
@media(max-width:640px){
  .lf-cot-tabla thead{display:none}
  .lf-cot-tabla tbody tr{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:6px;padding:8px 0;border-bottom:1px solid var(--lf-linea)}
  .lf-cot-tabla tbody td{border:none;padding:0}
  .lf-cot-tabla tbody td:first-child{grid-column:1 / -1}
  .lf-cot-tabla td .form-control-sm[type="number"]{width:100%}
}

/* Un documento (cotización, compra). */
.lf-doc-acciones{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.lf-doc-acciones .esp{flex:1}
.lf-doc-acciones form{margin:0}
.lf-doc-cab{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 22px 14px;border-bottom:1px solid var(--lf-linea)}
.lf-doc-folio{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--lf-vidrio);font-size:12px;font-weight:700;color:var(--lf-tinta-2)}
.lf-doc-cab h3{margin:8px 0 2px;font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--lf-tinta)}
.lf-doc-sub{font-size:12.5px;color:var(--lf-tinta-4)}
.lf-doc-meta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.lf-doc-meta dl{display:grid;grid-template-columns:auto auto;gap:3px 14px;margin:0;font-size:12.5px}
.lf-doc-meta dt{font-weight:500;color:var(--lf-tinta-4);text-align:right}
.lf-doc-meta dd{margin:0;font-weight:600;color:var(--lf-tinta)}
.lf-doc-total{font-size:17px;font-weight:800;color:var(--lf-tinta)}
.lf-doc-notas{margin:4px 22px 18px;padding:12px 14px;border-left:3px solid var(--lf-brand);border-radius:0 var(--lf-r) var(--lf-r) 0;background:var(--lf-vidrio)}
.lf-doc-notas b{font-size:12px;color:var(--lf-tinta-3)}
.lf-doc-notas p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--lf-tinta)}
.lf-co-recibir{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 22px 20px;padding:16px 18px;
  border:1px solid color-mix(in srgb, var(--lf-brand) 40%, var(--lf-linea));border-radius:var(--lf-r-lg);background:var(--lf-brand-glow)}
.lf-co-recibir > b{font-size:14px;color:var(--lf-tinta)}
@media(max-width:640px){ .lf-doc-meta{align-items:flex-start} .lf-doc-meta dt{text-align:left} }

/* ── Agenda ── */
.lf-ag-semana{display:flex;align-items:stretch;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.lf-ag-flecha{display:grid;place-items:center;width:34px;border-radius:var(--lf-r);border:1px solid var(--lf-linea);
  background:var(--lf-sup);font-size:20px;color:var(--lf-tinta-3);text-decoration:none}
.lf-ag-flecha:hover{color:var(--lf-tinta);border-color:var(--lf-linea-f)}
.lf-ag-dia{flex:1 1 0;min-width:58px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r);background:var(--lf-sup);text-decoration:none;color:var(--lf-tinta-2)}
.lf-ag-dia small{font-size:11px;font-weight:600;color:var(--lf-tinta-4);text-transform:uppercase;letter-spacing:.4px}
.lf-ag-dia b{font-size:18px;font-weight:800;color:var(--lf-tinta)}
.lf-ag-dia span{font-size:10.5px;color:var(--lf-tinta-4);white-space:nowrap}
.lf-ag-dia:hover{border-color:var(--lf-linea-f);color:var(--lf-tinta)}
.lf-ag-dia.hoy b{color:var(--lf-brand-2)}
.lf-ag-dia.on{border-color:var(--lf-brand);background:var(--lf-brand-soft);box-shadow:0 0 0 3px var(--lf-brand-glow)}
.lf-ag-dia.on span{color:var(--lf-brand-2);font-weight:600}
.lf-ag-ir{display:flex;align-items:center;gap:6px;margin:0 0 0 6px}
.lf-ag-ir .form-control{width:auto}
.lf-ag-scroll{max-height:620px;overflow:auto;border-top:1px solid var(--lf-linea)}
.lf-ag-grid{display:grid;grid-template-columns:56px repeat(var(--cols), minmax(150px, 1fr));min-width:min-content}
.lf-ag-colcab{position:sticky;top:0;z-index:3;height:38px;display:flex;align-items:center;justify-content:center;padding:0 8px;
  background:var(--lf-sup);border-bottom:1px solid var(--lf-linea);font-size:12.5px;font-weight:700;color:var(--lf-tinta-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-ag-horas{position:sticky;left:0;z-index:4;background:var(--lf-sup)}
.lf-ag-cuerpo{position:relative;height:var(--alto)}
.lf-ag-horas .lf-ag-cuerpo span{position:absolute;right:8px;transform:translateY(-50%);font-family:var(--lf-mono);font-size:10.5px;color:var(--lf-tinta-4)}
.lf-ag-horas .lf-ag-cuerpo span:first-child{transform:none}
.lf-ag-col{border-left:1px solid var(--lf-linea)}
.lf-ag-hueco{position:absolute;left:0;right:0;border-bottom:1px dashed var(--lf-linea)}
.lf-ag-hueco:hover{background:var(--lf-brand-glow)}
.lf-ag-hueco:hover::after{content:'+ Agendar';position:absolute;left:8px;top:3px;font-size:11px;font-weight:600;color:var(--lf-brand-2)}
.lf-ag-cita{position:absolute;left:4px;right:4px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;overflow:hidden;
  padding:4px 8px;border:none;border-left:3px solid var(--lf-brand);border-radius:8px;background:var(--lf-brand-soft);
  color:var(--lf-tinta);text-align:left;cursor:pointer;font-family:inherit;box-shadow:var(--lf-s1)}
.lf-ag-cita b{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lf-ag-cita small{font-size:11px;color:var(--lf-tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lf-ag-cita:hover{box-shadow:var(--lf-s2);z-index:2}
.lf-ag-cita.e-co{border-left-color:var(--lf-brand-2);background:color-mix(in srgb, var(--lf-brand) 26%, var(--lf-sup))}
.lf-ag-cita.e-at{border-left-color:var(--lf-tinta-4);background:var(--lf-vidrio);opacity:.85}
.lf-ag-cita.e-nv{border-left-color:var(--lf-amb);background:var(--lf-amb-soft);opacity:.75}
.lf-ag-cita.e-ca{border-left-color:var(--lf-rojo);background:var(--lf-rojo-soft);opacity:.6}
.lf-ag-cita.e-ca b{text-decoration:line-through}
.lf-ag-item{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--lf-linea)}
.lf-ag-item.foco{animation:lf-ag-foco 1.6s ease}
@keyframes lf-ag-foco{0%,40%{background:var(--lf-brand-glow)}100%{background:transparent}}
.lf-ag-item .h{flex:none;width:52px;font-size:14px;font-weight:700;color:var(--lf-tinta)}
.lf-ag-item .h small{display:block;font-size:11px;font-weight:500;color:var(--lf-tinta-4)}
.lf-ag-item .q{flex:1;min-width:0}
.lf-ag-item .q b{display:block;font-size:14px;font-weight:600}
.lf-ag-item .q small{display:block;font-size:12px;color:var(--lf-tinta-3)}
.lf-ag-item .acc{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lf-ag-estado{flex:none;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--lf-brand-soft);color:var(--lf-brand-2)}
.lf-ag-estado.e-co{background:var(--lf-brand);color:#fff}
.lf-ag-estado.e-at{background:var(--lf-vidrio);color:var(--lf-tinta-3)}
.lf-ag-estado.e-nv{background:var(--lf-amb-soft);color:var(--lf-amb)}
.lf-ag-estado.e-ca{background:var(--lf-rojo-soft);color:var(--lf-rojo)}
.lf-ag-wa svg{color:#25a35a}
.lf-ag-mas{position:relative}
.lf-ag-mas > summary{list-style:none}
.lf-ag-mas > summary::-webkit-details-marker{display:none}
.lf-ag-mas > div{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:170px;padding:5px;border:1px solid var(--lf-linea);
  border-radius:var(--lf-r);background:var(--lf-sup);box-shadow:var(--lf-s2)}
.lf-ag-mas form{margin:0}
.lf-ag-mas button,.lf-ag-mas a{display:block;width:100%;padding:8px 10px;border:none;border-radius:7px;background:none;text-align:left;
  font-size:13px;color:var(--lf-tinta-2);text-decoration:none;cursor:pointer;font-family:inherit}
.lf-ag-mas button:hover,.lf-ag-mas a:hover{background:var(--lf-vidrio);color:var(--lf-tinta)}
.lf-ag-horario{margin-top:4px}
@media(max-width:720px){
  .lf-ag-card .lf-ag-scroll{max-height:460px}
  .lf-ag-item{flex-wrap:wrap}
  .lf-ag-item .acc{flex:0 0 100%;justify-content:flex-start;padding-left:66px}
  .lf-ag-ir{margin:6px 0 0;flex:0 0 100%}
  .lf-ag-dia{min-width:40px}
  .lf-ag-dia span{display:none}
}

/* Renglones apagados (igualas en pausa, ventas canceladas en la ficha). */
tr.lf-apagado td{opacity:.6}

/* ── Seguimiento de trabajos: el tablero ── */
.lf-tab-tablero{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px;align-items:start}
.lf-tab-col{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px;border-radius:var(--lf-r-lg);background:var(--lf-vidrio)}
.lf-tab-col header{display:flex;align-items:center;justify-content:space-between;padding:2px 4px}
.lf-tab-col header b{font-size:13px;font-weight:700;color:var(--lf-tinta)}
.lf-tab-col header b::before{content:'';display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--lf-tinta-4);vertical-align:1px}
.lf-tab-col.t-proceso header b::before{background:var(--lf-amb)}
.lf-tab-col.t-listo header b::before{background:var(--lf-brand)}
.lf-tab-col.t-entregado header b::before{background:var(--lf-brand-2)}
.lf-tab-col header span{min-width:24px;padding:1px 8px;border-radius:999px;background:var(--lf-sup);font-size:12px;font-weight:700;text-align:center;color:var(--lf-tinta-3)}
.lf-tab-vacio{margin:4px;font-size:12.5px;color:var(--lf-tinta-4)}
.lf-tab-tarjeta{display:flex;flex-direction:column;gap:4px;padding:12px 13px;border:1px solid var(--lf-linea);border-radius:var(--lf-r);
  background:var(--lf-sup);box-shadow:var(--lf-s1)}
.lf-tab-tarjeta.atrasado{border-color:color-mix(in srgb, var(--lf-rojo) 45%, var(--lf-linea))}
.lf-tab-tarjeta .cab{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.lf-tab-tarjeta .entrega{padding:1px 8px;border-radius:999px;background:var(--lf-vidrio);font-size:11px;font-weight:600;color:var(--lf-tinta-3)}
.lf-tab-tarjeta .entrega.mal{background:var(--lf-rojo-soft);color:var(--lf-rojo)}
.lf-tab-tarjeta .cli{font-size:14px;font-weight:700;color:var(--lf-tinta)}
.lf-tab-tarjeta .cli a{color:inherit}
.lf-tab-tarjeta .que{font-size:12.5px;line-height:1.4;color:var(--lf-tinta-3)}
.lf-tab-tarjeta .nota{font-size:12px;font-style:italic;color:var(--lf-tinta-3)}
.lf-tab-tarjeta .pie{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12px;color:var(--lf-tinta-3)}
.lf-tab-tarjeta .pie em{font-style:normal;font-weight:600;color:var(--lf-amb)}
.lf-tab-mover{display:flex;flex-direction:column;gap:6px;margin:6px 0 0;padding-top:8px;border-top:1px solid var(--lf-linea)}
.lf-tab-mover details summary{font-size:12px;font-weight:600;color:var(--lf-tinta-3);cursor:pointer}
.lf-tab-mover details[open]{display:flex;flex-direction:column;gap:6px}
.lf-tab-mover label{display:flex;flex-direction:column;gap:3px;margin:0;font-size:11.5px;font-weight:600;color:var(--lf-tinta-3)}
.lf-tab-mover .btn{align-self:flex-start}
@media(max-width:1100px){ .lf-tab-tablero{grid-template-columns:repeat(4,260px)} }

/* ── La ficha del cliente ── */
.lf-cli-nombre{color:inherit}
.lf-cli-nombre:hover b{color:var(--lf-brand-2);text-decoration:underline}
.lf-cf-cab .card-body{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px}
.lf-cf-cab .lf-av{width:52px;height:52px;border-radius:15px;font-size:18px}
.lf-cf-cab .quien{flex:1;min-width:200px}
.lf-cf-cab h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--lf-tinta)}
.lf-cf-cab .quien span{font-size:13px;color:var(--lf-tinta-3)}
.lf-cf-cab .acc{display:flex;gap:8px;flex-wrap:wrap}
.lf-cf-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media(max-width:980px){ .lf-cf-cols{grid-template-columns:1fr} }
.lf-cf-ficha,.lf-cf-nota{display:flex;flex-direction:column;gap:10px;padding:0 20px 18px}
.lf-cf-ficha > div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lf-cf-ficha small{font-size:11.5px;color:var(--lf-tinta-4)}
.lf-cf-nota .btn{align-self:flex-end}
.lf-cf-notas{list-style:none;margin:0;padding:0 20px 10px}
.lf-cf-notas li{padding:12px 0;border-top:1px solid var(--lf-linea)}
.lf-cf-notas p{margin:0;font-size:13.5px;line-height:1.55;color:var(--lf-tinta)}
.lf-cf-notas small{display:block;margin-top:4px;font-size:11.5px;color:var(--lf-tinta-4)}
.lf-cf-borrar{margin-left:6px;padding:0;border:none;background:none;font-size:11.5px;color:var(--lf-rojo);cursor:pointer;font-family:inherit}
.lf-cf-borrar:hover{text-decoration:underline}
.lf-cf-lista{list-style:none;margin:0;padding:0 18px 12px}
.lf-cf-lista li{padding:9px 0;border-top:1px solid var(--lf-linea)}
.lf-cf-lista li:first-child{border-top:none}
.lf-cf-lista b{display:block;font-size:13.5px;font-weight:600;color:var(--lf-tinta)}
.lf-cf-lista small{display:block;margin-top:2px;font-size:12px;color:var(--lf-tinta-3)}
.lf-cf-lista li.futura b{color:var(--lf-brand-2)}
.lf-cf-sesiones{display:block;height:6px;margin:6px 0 4px;border-radius:99px;background:var(--lf-vidrio);overflow:hidden}
.lf-cf-sesiones i{display:block;height:100%;border-radius:99px;background:var(--lf-brand)}
.lf-cf-subir{display:flex;gap:8px;padding:0 18px 12px}
.lf-cf-subir .form-control{flex:1;min-width:0}

/* Productos: lo de los módulos (duración, paquete). */
.lf-form > .lf-prod-mods{flex:0 0 100%;display:flex;flex-direction:row;flex-wrap:wrap;gap:14px 22px;padding:12px 14px;border:1px solid var(--lf-linea);border-radius:var(--lf-r)}
.lf-prod-mod{display:flex;flex-direction:column}
.lf-prod-mod .pista{margin:5px 0 0;font-size:11.5px;color:var(--lf-tinta-4)}
.lf-prod-dur{display:flex;align-items:center;gap:7px}
.lf-prod-dur .form-control{width:100px}
.lf-prod-dur span{font-size:13px;color:var(--lf-tinta-3)}
.lf-prod-paq{flex:1;min-width:280px}
.lf-prod-paq .lf-sw span b{color:var(--lf-tinta);font-weight:600}
.lf-prod-paq .lf-sw span small{color:var(--lf-tinta-4);font-size:12px}
.lf-prod-paq .cuerpo{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:12px}
.lf-prod-paq .cuerpo > div{display:flex;flex-direction:column}
.lf-prod-paq .cuerpo .pista{flex:0 0 100%;margin:0}

/* Bienvenida: el paso «Herramientas». */
.lf-bv-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:26px}
.lf-bv-mod{position:relative;display:flex;align-items:flex-start;gap:12px;margin:0;padding:15px 44px 14px 15px;
  border:1.5px solid var(--lf-linea);border-radius:16px;background:var(--lf-sup);cursor:pointer;transition:border-color .15s, box-shadow .15s}
.lf-bv-mod:hover{border-color:color-mix(in srgb, var(--lf-brand) 55%, var(--lf-linea))}
.lf-bv-mod input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lf-bv-mod .ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--lf-vidrio);color:var(--lf-tinta-3)}
.lf-bv-mod .txt b{display:block;font-size:14.5px;font-weight:700;color:var(--lf-tinta)}
.lf-bv-mod .txt small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--lf-tinta-3)}
.lf-bv-mod .txt em{display:inline-block;margin-top:7px;padding:2px 9px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700;
  background:var(--lf-amb-soft);color:var(--lf-amb)}
.lf-bv-mod .ok{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--lf-linea-f);transition:all .15s}
.lf-bv-mod:has(input:checked){border-color:var(--lf-brand);box-shadow:0 0 0 4px var(--lf-brand-ring)}
.lf-bv-mod:has(input:checked) .ico{background:var(--lf-brand);color:#fff}
.lf-bv-mod:has(input:checked) .ok{border-color:var(--lf-brand);background:var(--lf-brand)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.lf-bv-mod:has(input:focus-visible){box-shadow:0 0 0 4px var(--lf-brand-ring)}
.lf-bv-mod.candado,.lf-bv-mod.apagado{cursor:default;border-style:dashed;background:transparent}
.lf-bv-mod.candado .ico,.lf-bv-mod.apagado .ico{opacity:.6}
.lf-bv-mod.candado .ok,.lf-bv-mod.apagado .ok{display:none}
.lf-bv-mod.candado input,.lf-bv-mod.apagado input{cursor:default}
.lf-bv-vista .mini{height:auto;min-height:380px}
/* Ajustes tras revisar las capturas. */
.lf-cot-tabla th.text-end{text-align:right}
.lf-cot-tabla td:first-child{width:46%}
.lf-cot-tabla td:first-child .form-control,.lf-cot-tabla td:first-child .form-select{width:100%}
.lf-elige-cli-pista{position:absolute;top:100%;left:2px;margin-top:3px;white-space:nowrap}
.lf-elige-cli .lf-sugerencias{top:auto}
.lf-form > p.pista,.lf-form > .pista{font-size:12px;line-height:1.5;color:var(--lf-tinta-4)}
.lf-cf-lista small b{display:inline;font-size:inherit}
.lf-cf-subir{flex-wrap:wrap}
.lf-conteo-pie .form-control{flex:0 1 340px;min-width:180px}
.lf-co-recibir input[type="checkbox"],.lf-inv-check input{accent-color:var(--lf-brand)}
.lf-mod .txt small.plan{display:block;line-height:1.5}
.lf-mod .txt small.plan svg{display:inline-block!important;vertical-align:-2px;margin-right:2px}
.lf-elige-cli-pista{top:0;right:2px;left:auto;margin-top:1px;max-width:60%;overflow:hidden;text-overflow:ellipsis;text-align:right}
/* En un formulario, el buscador de cliente mide lo mismo que los demás campos. */
.lf-form .lf-elige-cli .lf-search input{min-height:42px;padding-top:10px;padding-bottom:10px;border-radius:var(--lf-r)}
/* El menú cambia sin recargar: lo que llega se ilumina un momento. */
.lf-nav a.lf-nav-nuevo{animation:lf-nav-nuevo 2s ease}
@keyframes lf-nav-nuevo{0%,35%{background:var(--lf-brand-soft);color:var(--lf-brand-2)}100%{}}
/* Aviso flotante (lfAvisar). */
.lf-toast{position:fixed;top:74px;right:16px;z-index:430;display:flex;align-items:center;gap:10px;
  width:min(380px,calc(100vw - 32px));padding:12px 10px 12px 14px;border-radius:14px;font-size:13px;font-weight:600;
  background:var(--lf-sup);color:var(--lf-tinta);border:1px solid var(--lf-linea);border-left:4px solid var(--lf-brand);
  box-shadow:var(--lf-s3, 0 12px 32px rgba(0,0,0,.16));animation:lf-toast-entra .25s ease}
.lf-toast span{flex:1;min-width:0;line-height:1.45}
.lf-toast.mal{border-left-color:var(--lf-rojo)}
.lf-toast .x{border:0;background:none;font-size:18px;line-height:1;color:var(--lf-tinta-4);cursor:pointer;padding:2px 4px}
.lf-toast.va{opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s}
/* Los filtros por estado (Cotizaciones, Compras): aire antes de lo que sigue. */
.lf-pills.lf-pills-filtro{margin-bottom:18px}
.lf-pills.lf-pills-filtro + .lf-filtros{margin-top:0}
/* Agenda sin recargar: el aviso del formulario y la cita recién guardada. */
.lf-form > [data-aviso]{flex:0 0 100%;margin:0}
.lf-ag-cita.nueva{animation:lf-ag-nueva 1.8s ease}
@keyframes lf-ag-nueva{0%,30%{box-shadow:0 0 0 4px var(--lf-brand-ring), var(--lf-s2)}100%{box-shadow:var(--lf-s1)}}
/* Recargas: la tarjeta de Caja con el logo del proveedor (entero, sin recortar). */
.lf-serv .e.foto{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:calc(100% + 22px);
  height:auto;aspect-ratio:4 / 3;margin:0 -11px 10px;padding:12px 16px;border-radius:0;background:#fff;
  border-bottom:1px solid var(--lf-linea)}
.lf-serv .e.foto img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.lf-serv.on{border-color:var(--lf-brand);background:var(--lf-brand-glow);box-shadow:0 0 0 3px var(--lf-brand-ring)}
button.lf-pill{font-family:inherit;cursor:pointer}
.lf-rc-catalogo .lf-grid-serv{padding-top:4px}
/* Tarjetas parejas también con logos: la imagen flota dentro de su zona y
   no puede empujarla. Un logo alto o enorme ya no agranda su tarjeta (y,
   con ella, toda la fila); la zona mide lo mismo que la del ícono. */
.lf-serv .e.foto{position:relative;padding:0;overflow:hidden}
.lf-serv .e.foto img{position:absolute;top:12px;left:14px;width:calc(100% - 28px);height:calc(100% - 24px);
  max-width:none;max-height:none;object-fit:contain}
.lf-serv small{line-height:1.4;min-height:1.4em}
/* Módulos: el aviso de guardado ya no va dentro de la tarjeta (se encimaba
   con la descripción); sale arriba con lfAvisar. Sin JavaScript no aplica:
   ahí la página se recarga y el aviso sale arriba de la pestaña. */
.lf-mod [data-aviso]{display:none!important}


/* ══════════════════════════════════════════════════════
   37 · ARREGLOS DE VISTA (capturas de móvil)
   ══════════════════════════════════════════════════════ */

/* ── El «no hay nada» que se partía en columnas ──
   En móvil la tabla se vuelve tarjetas y cada `td` pasa a ser un flex
   de dos columnas: rótulo a la izquierda, valor a la derecha. Con un
   `td colspan` de texto corrido, CADA trozo suelto —el texto, el
   enlace, el <b>— se volvía una columna, y salía aquello de
   «Ningún producto lleva | Productos | , edita uno y | «Lleva
   existencias»». El mensaje decía lo correcto; se leía imposible. */
@media(max-width:768px){
  .table-responsive.lf-cards td[colspan]{
    display:block!important;text-align:center;padding:16px 4px!important;
    line-height:1.55}
  .table-responsive.lf-cards td[colspan]::before{content:none}
  .table-responsive.lf-cards tfoot td[colspan]{text-align:right}
}

/* ── El interruptor con descripción larga ──
   `.lf-sw` es un flex y su texto no tenía `min-width:0`, así que
   empujaba hacia fuera en vez de encogerse: «Es un producto físico:
   Caja descuenta las piezas al venderlo» se salía de la tarjeta. Y el
   rótulo y la explicación iban pegados —«Es un paquete de sesionesEj.
   «10 masajes»»— porque <b> y <small> son los dos en línea. */
.lf-sw > span{min-width:0;flex:1}
.lf-sw > span b{display:block}
.lf-sw > span small{display:block;margin-top:2px;line-height:1.45;
  color:var(--lf-tinta-4);font-size:11.5px}
.lf-sw:has(> span small){align-items:flex-start}
.lf-sw:has(> span small) i{margin-top:2px}

/* ── La cotización en un teléfono ──
   Cuatro columnas de importes en 360px no caben: los campos quedaban
   de dos caracteres y el total salía cortado en «$1». Pasa a tarjetas,
   como las demás tablas de la aplicación. */
@media(max-width:700px){
  .lf-cot-tabla thead{display:none}
  .lf-cot-tabla,.lf-cot-tabla tbody,.lf-cot-tabla tfoot,
  .lf-cot-tabla tr,.lf-cot-tabla td{display:block;width:100%}
  .lf-cot-tabla tbody tr{border:1px solid var(--lf-linea);border-radius:var(--lf-r);
    padding:11px 12px;margin-bottom:9px;background:var(--lf-sup);position:relative}
  .lf-cot-tabla tbody td{padding:5px 0!important;border:none;text-align:left!important}
  .lf-cot-tabla tbody td::before{content:attr(data-label);display:block;
    font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
    color:var(--lf-tinta-3);margin-bottom:3px}
  .lf-cot-tabla tbody td:first-child::before{content:none}
  .lf-cot-tabla input,.lf-cot-tabla select,.lf-cot-tabla .form-control{
    width:100%!important;max-width:100%;box-sizing:border-box}
  /* La equis de quitar, a la esquina: en su propio renglón ocupaba
     una tarjeta entera para un botón de doce píxeles. */
  .lf-cot-tabla tbody td:last-child{position:absolute;top:8px;right:8px;width:auto}
  .lf-cot-tabla tbody td:last-child::before{content:none}
  .lf-cot-tabla tfoot tr{display:flex;justify-content:space-between;
    padding:10px 12px;font-weight:700;border-top:2px solid var(--lf-linea)}
  .lf-cot-tabla tfoot td{width:auto;padding:0!important}
  .lf-cot-tabla tfoot td:empty{display:none}
}

/* ── Los tabulares que se salen ──
   «Llegó mercancía · Salió sin venderse · Lo contamos» no cabe, y
   cortado a «Lo co…» esconde justo la opción menos obvia. Se deja
   deslizar en vez de recortarse. */
.lf-segmentado,.lf-tabs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.lf-segmentado::-webkit-scrollbar,.lf-tabs-scroll::-webkit-scrollbar{display:none}
.lf-segmentado > *{flex:none;white-space:nowrap}


/* ══════════════════════════════════════════════════════
   38 · CUÁNTAS LLEVAS DE CADA COSA
   Al tocar un servicio varias veces no había forma de saber cuántas
   iban sin bajar a leer el ticket. El número va en la esquina de su
   propia tarjeta, que es donde está mirando el dedo.
   ══════════════════════════════════════════════════════ */
.lf-serv{position:relative}
/* DENTRO DE LA TARJETA, NO ASOMADO POR FUERA.
   Estaba en -7px para que sobresaliera, pero la cuadrícula recorta lo
   que se sale —es un carrusel con páginas— y del sello solo se veía
   un cuarto de círculo pegado al borde. Un contador cortado no cuenta
   nada. Se mete dentro, donde nada lo puede recortar. */
.lf-serv .lf-cuantas{position:absolute;top:7px;right:7px;z-index:2;
  min-width:23px;height:23px;padding:0 6px;border-radius:999px;
  display:none;align-items:center;justify-content:center;
  background:var(--lf-brand);color:#fff;font-size:11.5px;font-weight:700;
  line-height:1;
  /* Un aro del color de la tarjeta lo despega de la imagen de fondo:
     sin él, sobre un cuadro claro el número se pierde. */
  box-shadow:0 0 0 2px var(--lf-sup), 0 2px 5px rgba(0,0,0,.2);
  animation:lf-cuantas .2s cubic-bezier(.3,1.4,.5,1)}
.lf-serv.lleva .lf-cuantas{display:flex}
/* La tarjeta también se marca: el número solo no se ve de reojo. */
.lf-serv.lleva{border-color:var(--lf-brand);
  box-shadow:0 0 0 2px var(--lf-brand-glow)}
@keyframes lf-cuantas{from{transform:scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.lf-serv .lf-cuantas{animation:none}}


/* ══════════════════════════════════════════════════════
   39 · EL TICKET, CON LOS COLORES DE LA CASA
   La cabecera usa el color que se eligió en Ajustes, y cada renglón
   hereda el color que ya tenía su tarjeta: azul el que trae precio,
   ámbar el que se captura a mano. Así la referencia visual sobrevive
   al salto de la cuadrícula al ticket, que es donde se revisa antes
   de cobrar.
   ══════════════════════════════════════════════════════ */
/* LA CABECERA ENTERA, no una rayita debajo. El ticket es lo que se
   revisa antes de cobrar: que se distinga del catálogo de al lado
   ahorra el segundo de «¿dónde estoy mirando?». */
.lf-tk-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--lf-brand);color:#fff;border-bottom:none}
.lf-tk-cab #tituloTicket{color:#fff;font-weight:700}
.lf-tk-cab .badge{background:rgba(255,255,255,.22)!important;color:#fff!important;
  border-color:transparent!important}

/* Cada renglón con el color que ya tenía su tarjeta: azul el que trae
   precio, ámbar el que hay que capturar a mano. Sin esto había que
   leer renglón por renglón para cazar el que se quedó en cero. */
.lf-linea{border-left:3px solid transparent}
.lf-linea.con-precio{border-left-color:var(--lf-azul,#3b82f6);
  background:color-mix(in srgb, var(--lf-azul,#3b82f6) 7%, transparent)}
.lf-linea.sin-precio{border-left-color:var(--lf-amb);
  background:color-mix(in srgb, var(--lf-amb) 7%, transparent)}
/* Donde no hay color-mix —navegadores de hace tres años— al menos se
   queda la barra lateral, que es la que carga la información. */
@supports not (background: color-mix(in srgb, red 7%, transparent)){
  .lf-linea.con-precio{background:rgba(59,130,246,.07)}
  .lf-linea.sin-precio{background:rgba(245,158,11,.07)}
}


/* ══════════════════════════════════════════════════════
   40 · UN MÓDULO SE ENCIENDE TOCÁNDOLO
   En el teléfono había que atinarle al interruptor de veinte píxeles.
   La tarjeta entera es el blanco; el interruptor sigue ahí para quien
   use teclado.
   ══════════════════════════════════════════════════════ */
.lf-mod{cursor:pointer;-webkit-tap-highlight-color:transparent}
.lf-mod.candado{cursor:not-allowed}
.lf-mod:active:not(.candado){transform:scale(.993)}
@media(max-width:768px){
  .lf-mod{padding:15px 14px}
  .lf-mod::after{content:'';position:absolute;inset:0;border-radius:inherit}
}

/* El renglón del catálogo se puede tocar para editarlo */
.lf-fila-editar{cursor:pointer}
.lf-fila-editar:hover{background:var(--lf-brand-glow)}
.lf-fila-editar:focus-visible{outline:2px solid var(--lf-brand);outline-offset:-2px}

/* El aviso de que la configuración inicial se puede saltar */
.lf-bv-opcional{display:flex;align-items:flex-start;gap:10px;
  margin:0 0 22px;padding:12px 14px;border-radius:var(--lf-r);
  background:var(--lf-brand-glow);border:1px solid var(--lf-brand);
  font-size:13px;line-height:1.55;color:var(--lf-tinta-2)}
.lf-bv-opcional svg{flex:none;margin-top:2px;color:var(--lf-brand-2)}
.lf-bv-opcional b{color:var(--lf-tinta)}

/* ══════════════════════════════════════════════════════
   41 · LA AGENDA EN UN TELÉFONO
   Una columna por especialista a 150px, más 56 de las horas: en 360px
   no caben dos. Había que arrastrar de lado, y nada decía que hubiera
   alguien más a la derecha.
   Se elige a quién ves y su columna ocupa el ancho entero. En pantalla
   grande el selector no aparece: ahí caben todas, y verlas juntas es
   justo para lo que sirve una agenda.
   ══════════════════════════════════════════════════════ */
.lf-ag-quien{display:flex;gap:7px;padding:11px 14px 2px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lf-ag-quien::-webkit-scrollbar{display:none}
.lf-ag-quien .lf-pill{flex:none}
.lf-ag-oculta{display:none!important}
@media(min-width:761px){
  /* En grande se ven todas y el selector sobra. */
  .lf-ag-quien{display:none}
  .lf-ag-oculta{display:block!important}
}
@media(max-width:760px){
  /* Sin mínimo por columna: la que queda se estira a lo que haya. */
  .lf-ag-grid{grid-template-columns:48px repeat(var(--cols),minmax(0,1fr));
    min-width:0}
  .lf-ag-scroll{overflow-x:hidden}
  .lf-ag-colcab{font-size:11.5px;padding-left:4px;padding-right:4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* El aviso de que el área se crea sola al escribirla */
.lf-pista-area{display:block;margin-top:4px;font-size:11px;color:var(--lf-tinta-4);
  line-height:1.4}

/* El "+" y la "×" de los botones, en rojo. El "+" del ícono se pinta en
   Widget::icono(). !important porque varios botones de cerrar ya fijan su
   color (.lf-toast .x, .lf-toast-chat .x…) con más especificidad.
   pointer-events:none en el <span>: el clic sobre el signo cuenta como
   clic en su botón, que es lo que leen los manejadores con e.target. */
.lf-signo{color:var(--lf-rojo)!important}
span.lf-signo{pointer-events:none}

/* Rótulos de la gráfica de cobranza por mes (Ventas). Una columna por
   barra, todas del mismo ancho que la suya: con flex, cada rótulo medía
   lo que su texto, la fila se salía de la tarjeta en el celular y la
   página entera quedaba más ancha que la pantalla. */
.lf-meses-rot{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;
  padding-top:10px;text-align:center}
.lf-meses-rot > div{min-width:0}
.lf-meses-rot b{display:block;font-size:12px}
.lf-meses-rot span{display:block;font-size:11px;color:var(--lf-tinta-4);white-space:nowrap;overflow:hidden}
@media(max-width:560px){.lf-meses-rot span{font-size:10px;letter-spacing:-.2px}}

/* En el celular nada puede hacer la página más ancha que la pantalla.
   Cuando algo se salía (los rótulos de arriba, p. ej.) se podía arrastrar
   la página de lado, y en esos arrastres la barra de abajo se escondía y
   no volvía. clip, no hidden: hidden convierte .lf-main en contenedor de
   desplazamiento y los encabezados pegajosos (sticky) dejan de pegarse. */
@media(max-width:940px){.lf-main{overflow-x:clip}}

/* TABLAS QUE SE DESPLAZAN: QUE SE NOTE.
   Una sombra en el borde donde todavía hay columnas, que desaparece al
   llegar al final. Sin JavaScript: el fondo "local" se mueve con el
   contenido y tapa la sombra cuando ya no hay más. */
.table-responsive{
  background:
    linear-gradient(to right,var(--lf-sup) 30%,transparent) left center/40px 100% no-repeat local,
    linear-gradient(to left,var(--lf-sup) 30%,transparent) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(27,36,32,.22),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(27,36,32,.22),transparent) right center/14px 100% no-repeat scroll}

/* TABLA SI CABE, TARJETAS SI NO.
   Una tabla con modo tarjeta (.lf-cards) se queda como tabla solo si cabe
   a su ancho natural, sin partir renglones. Si no cabe, cada renglón pasa
   a ser una tarjeta con sus datos en columnas: ni hay que deslizar ni se
   aprieta. Lo decide lf-tablas.js por el ancho de SU caja, no de la
   pantalla: la misma tabla cabe a página completa y no en la columna
   angosta del detalle de una venta.
   En el teléfono (576 px o menos) siguen las tarjetas de siempre. */
.table-responsive.lf-cards.lf-midiendo{overflow-x:hidden}
.table-responsive.lf-cards.lf-midiendo > .table{min-width:max-content!important;width:auto!important}
.lf-txt-card{display:none}
/* Fuera de una media query a propósito: lf-tablas.js decide cuándo se pone.
   En el teléfono solo la reciben las tablas marcadas con `lf-rejilla`; las
   demás siguen con las tarjetas de siempre (rótulo a la izquierda). */
.table-responsive.lf-apilada{overflow-x:visible;background:none}
.table-responsive.lf-apilada > .table,
.table-responsive.lf-apilada > .table > thead,
.table-responsive.lf-apilada > .table > tbody,
.table-responsive.lf-apilada > .table > tfoot{display:block;width:100%;min-width:0}
.table-responsive.lf-apilada > .table > thead{display:none}
.table-responsive.lf-apilada > .table > tbody > tr,
.table-responsive.lf-apilada > .table > tfoot > tr{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px 16px;align-items:start;
  margin-bottom:10px;padding:13px 15px;border:1px solid var(--lf-linea);
  border-radius:var(--lf-r);background:var(--lf-sup)}
.table-responsive.lf-apilada > .table > tfoot > tr{background:var(--lf-vidrio)}
.table-responsive.lf-apilada > .table > tbody > tr:last-child{margin-bottom:4px}
.table-responsive.lf-apilada td{display:block;min-width:0;padding:0!important;border:0!important;
  text-align:left!important;white-space:normal!important;background:none!important}
.table-responsive.lf-apilada td[data-label]::before{content:attr(data-label);display:block;font-family:var(--lf-font);
  margin-bottom:3px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--lf-tinta-3)}
/* Lo que no tiene rótulo (las acciones) va en la última columna libre, a la
   derecha; si está vacío, no ocupa lugar. */
.table-responsive.lf-apilada td:not([data-label]){grid-column-end:-1;justify-self:end;align-self:end;text-align:right!important}
.table-responsive.lf-apilada td:not([data-label]):empty{display:none}
.table-responsive.lf-apilada td[colspan]{grid-column:1/-1;text-align:center!important}
.table-responsive.lf-apilada .lf-txt-card{display:inline}
@media(max-width:576px){
  .table-responsive.lf-cards .lf-txt-card{display:inline}
}
/* En tarjeta, la x sola no se entiende: el botón dice lo que hace. */
.lf-txt-card{font-size:12.5px;font-weight:600;margin-left:6px;color:var(--lf-tinta-2)}
.table-responsive.lf-apilada .lf-btn-ghost:has(.lf-txt-card){height:32px;padding:0 12px;
  border:1px solid var(--lf-linea);border-radius:var(--lf-r-pill)}
@media(max-width:576px){
  .table-responsive.lf-cards .lf-btn-ghost:has(.lf-txt-card){height:32px;padding:0 12px;
    border:1px solid var(--lf-linea);border-radius:var(--lf-r-pill)}
}