/* ===========================================================================
   CRM BGU — lo que se le agrega a portal.css
   ---------------------------------------------------------------------------
   Este archivo NO redefine colores ni tipografía de portal.css: los hereda
   (--cyan, --ink, --tint y compañía, con su versión oscura) y encima pone la
   libreta de medidas oficiales del CRM. Lo único que cambia de portal.css es
   el ancho: el portal es para leer una solicitud (920px) y el CRM para
   comparar columnas de números.

   Reglas que se siguen en todo el archivo:
   - TODO cuelga de `body.crm`, así que el portal de clientes —que comparte
     portal.css— no se entera.
   - Una regla nueva usa los nombres de la libreta (--c-*, --letra-*, --r-*,
     --sombra-*), no valores a mano. Excepciones anotadas en LEEME-CRM.md.
   - El color significa algo: familia de módulo o estado. Nunca adorno.
   - Sobre verde o cian, letra oscura (--c-sobre-color), nunca blanca.
   - Lato aquí solo existe en 400 y 700: «lo más grueso» es 700.
   - Cada regla va en la sección de su pieza o de su módulo, con sus ajustes
     de pantalla angosta (@media) al final de esa misma sección. Nada de
     «parches» al final del archivo: si algo cambia, se cambia donde vive.

   Índice (cada sección empieza con un renglón de ====):
       Libreta de medidas oficiales (justo abajo)
      1. VARIABLES DEL CRM Y COLORES DE FAMILIA
      2. EL MARCO: ANCHO, CABECERA, MENÚ LATERAL Y CUENTA
      3. LA PUERTA DEL CRM (entrar.php)
      4. PIEZAS COMPARTIDAS · TÍTULOS, BLOQUES Y TARJETAS
      5. PIEZAS COMPARTIDAS · TARJETAS DE CIFRA
      6. PIEZAS COMPARTIDAS · BOTONES
      7. PIEZAS COMPARTIDAS · ETIQUETAS, PASTILLAS, TONOS Y AVATAR
      8. PIEZAS COMPARTIDAS · TABLAS
      9. PIEZAS COMPARTIDAS · GRÁFICAS, BARRAS Y LEYENDAS
     10. PIEZAS COMPARTIDAS · FILTROS Y PESTAÑAS INTERNAS
     11. PIEZAS COMPARTIDAS · CAMPOS Y FORMULARIOS
     12. PIEZAS COMPARTIDAS · AVISOS Y «QUÉ HAY QUE ARREGLAR»
     13. PIEZAS COMPARTIDAS · AYUDAS Y TEXTO SECUNDARIO
     14. PIEZAS COMPARTIDAS · OTRAS (vacío, nota al pie, el camino…)
     15. LAS FICHAS (cliente, prospecto, persona, factura…)
     16. PENDIENTES (pendientes.php, tarea.php, meta.php)
     17. TABLERO (index.php)
     18. CLIENTES
     19. PROSPECTOS
     20. COTIZACIONES
     21. FACTURACIÓN
     22. CIERRE
     23. FINANZAS (Resumen, Flujo, Cobranza, Por cliente, Movimientos, Socio)
     24. CONCILIACIÓN
     25. IMPUESTOS (y Parámetros fiscales)
     26. INVENTARIO Y COMPRAS
     27. PERSONAL (la plantilla y la ficha de una persona)
     28. NÓMINAS
     29. COSTO LABORAL
     30. GLOSARIO DE CATEGORÍAS (categorias.php)
     31. EL MARCO EN EL TELÉFONO
     32. EL INICIO EN EL TELÉFONO
   =========================================================================== */
:root{ --wrap-crm:1280px; }

/* ===========================================================================
   MEDIDAS OFICIALES DEL CRM (sistema de diseño, 06/10/2026)
   ---------------------------------------------------------------------------
   La libreta única: cada color, tamaño de letra, esquina, sombra y corte de
   pantalla tiene aquí su nombre. Las reglas de abajo deben apuntar a estos
   nombres y no escribir valores a mano. Para cambiar la paleta (por ejemplo,
   para otra empresa) se cambia AQUÍ y nada más.

   Avance: ya usan estos nombres Pendientes (.pend-*) y las piezas
   compartidas (.boton .chip .tarjeta .kpi .tabla .cifra .etiqueta .aviso
   .campo; 06/10/2026). El 07/10/2026 se pasó el resto del archivo: lo que
   todavía lleva hex a mano es a propósito (letra fija sobre fondo fijo,
   tarjetas negras, contornos sin nombre); lista en LEEME-CRM.md. Propuesta y tabla de
   conversión: informes/sistema-diseno-paso1.html.

   - Colores: 24 decididos, cada uno con versión clara y oscura (abajo, en
     html.oscuro). Los 4 tonos de cada familia (tinte, borde, medio, hondo) NO
     se deciden: se calculan del color de la familia con color-mix. Los valores
     fijos son el respaldo para navegadores que no saben mezclar.
   - Letra: 8 tamaños. Nada menor a .75rem (12 px).
   - Esquinas: chico, medio, grande + píldora (forma, no tamaño).
   - Sombras: 1 ligera, 2 tarjeta, 3 flotante.
   - Cortes de pantalla (no pueden ser variables: el navegador no las acepta
     dentro de @media). Usar solo estos tres números:
       teléfono  max-width:640px
       tableta   max-width:900px   (y min-width:901px)
       escritorio angosto max-width:1180px  (y min-width:1181px)
     Una sola excepción, a propósito: «(min-width:901px) and
     (max-width:1380px)» pone en 3 columnas las filas de 5 tarjetas con la
     oscura (Facturación, Finanzas…). Con el menú lateral de 232 px, en una
     laptop de 1280–1366 px seis lugares no caben; pasarla a 1180 cambiaría
     justo esas laptops (08/10/2026). También quedan (min-width:901px) and
     (max-height:760px) —es de alto, no de ancho—, print y reduced-motion.
   Copias anteriores del archivo en ~/bgu-portal-datos/respaldos-css/.
   =========================================================================== */
:root{
  --c-tinta:#17232B;         /* Texto principal */
  --c-tinta-suave:#5B6873;   /* Texto secundario, etiquetas */
  --c-tenue:#8A96A0;         /* Íconos apagados, rayas (no para texto) */
  --c-borde:#E3E8EC;         /* Líneas y divisiones */
  --c-borde-fuerte:#C9D4DC;  /* Contorno de campos y botones */
  --c-fondo:#EEF2F5;         /* Fondo de la página */
  --c-superficie:#FFFFFF;    /* Tarjetas y tablas */
  --c-superficie-2:#F2F6F9;  /* Renglón alterno, zona gris */
  --c-cian:#00B6DA;          /* Marca · familia Hoy */
  --c-verde:#7DC10E;         /* Marca · familia Dinero */
  --c-morado:#6F6CF0;        /* Familia Comercial */
  --c-naranja:#FF8A3D;       /* Familia Operación */
  --c-rosa:#C25AD0;          /* Familia Gente */
  --c-sobre-color:#0E1418;   /* Letra encima de cian o verde */
  --c-error-punto:#E5484D;   /* Punto rojo, botón peligroso */
  --c-aviso-punto:#F2B705;   /* Punto amarillo de atención */
  --c-ok-fondo:#EEF7DD;      /* Estado bien: fondo */
  --c-ok-texto:#4E7A06;      /* Estado bien: letra */
  --c-aviso-fondo:#FFF4CC;   /* Estado atención: fondo */
  --c-aviso-texto:#7A5A00;   /* Estado atención: letra */
  --c-error-fondo:#FDE4E4;   /* Estado crítico: fondo */
  --c-error-texto:#B42328;   /* Estado crítico: letra */
  --c-info-fondo:#E3F0FF;    /* Estado informativo: fondo */
  --c-info-texto:#1F5FAE;    /* Estado informativo: letra */
  --c-cian-tinte:#DBF5FA;
  --c-cian-borde:#91E0EF;
  --c-cian-medio:#007289;
  --c-cian-hondo:#003A47;
  --c-verde-tinte:#EDF6DD;
  --c-verde-borde:#C7E497;
  --c-verde-medio:#4D7905;
  --c-verde-hondo:#253E01;
  --c-morado-tinte:#EBEAFD;
  --c-morado-borde:#C1C0F9;
  --c-morado-medio:#434298;
  --c-morado-hondo:#201F50;
  --c-naranja-tinte:#FFEFE4;
  --c-naranja-borde:#FFCDAC;
  --c-naranja-medio:#A15523;
  --c-naranja-hondo:#552A0E;
  --c-rosa-tinte:#F6E8F8;
  --c-rosa-borde:#E5B8EB;
  --c-rosa-medio:#7A3683;
  --c-rosa-hondo:#3F1844;
  --letra-xs:0.75rem;    /* 12 px · Etiquetas, notas */
  --letra-sm:0.82rem;    /* 13.1 px · Tablas, datos */
  --letra-base:0.9rem;  /* 14.4 px · Texto normal del CRM */
  --letra-md:1rem;    /* 16 px · Texto destacado */
  --letra-lg:1.15rem;    /* 18.4 px · Subtítulos */
  --letra-xl:1.4rem;    /* 22.4 px · Títulos de sección */
  --letra-2xl:1.8rem;   /* 28.8 px · Título de pantalla */
  --letra-3xl:2.4rem;   /* 38.4 px · Cifra grande */
  --r-chico:6px;
  --r-medio:12px;
  --r-grande:20px;
  --r-pildora:999px;
  --sombra-1:0 1px 2px rgba(20,32,40,.06),0 4px 12px -6px rgba(20,32,40,.25);
  --sombra-2:0 1px 2px rgba(20,32,40,.05),0 14px 34px -22px rgba(20,32,40,.28);
  --sombra-3:0 2px 4px rgba(20,32,40,.06),0 24px 44px -22px rgba(20,32,40,.40);
}
html.oscuro{
  --c-tinta:#E8EDF1;
  --c-tinta-suave:#AEBAC4;
  --c-tenue:#6B7884;
  --c-borde:#2C363F;
  --c-borde-fuerte:#5C6E7F;
  --c-fondo:#0F161B;
  --c-superficie:#1B232A;
  --c-superficie-2:#232D36;
  --c-cian:#3FD0EE;
  --c-verde:#8FD117;
  --c-morado:#8F8CFF;
  --c-naranja:#FFA466;
  --c-rosa:#DB86E6;
  --c-error-punto:#F08A8D;
  --c-aviso-punto:#F2C35B;
  --c-ok-fondo:#1F2D14;
  --c-ok-texto:#A6DE5C;
  --c-aviso-fondo:#2E2614;
  --c-aviso-texto:#E5C978;
  --c-error-fondo:#331917;
  --c-error-texto:#F2A196;
  --c-info-fondo:#14243A;
  --c-info-texto:#8DB8F2;
  --c-cian-tinte:#0D3F4A;
  --c-cian-borde:#2B7182;
  --c-cian-medio:#3FD0EE;
  --c-cian-hondo:#CAF0FA;
  --c-verde-tinte:#294002;
  --c-verde-borde:#4F7121;
  --c-verde-medio:#8FD117;
  --c-verde-hondo:#DAF1C2;
  --c-morado-tinte:#292850;
  --c-morado-borde:#4F528A;
  --c-morado-medio:#8F8CFF;
  --c-morado-hondo:#D7DAFF;
  --c-naranja-tinte:#50301A;
  --c-naranja-borde:#825D45;
  --c-naranja-medio:#FFA466;
  --c-naranja-hondo:#FFE2CE;
  --c-rosa-tinte:#432647;
  --c-rosa-borde:#71507F;
  --c-rosa-medio:#DB86E6;
  --c-rosa-hondo:#F5D8F8;
  --sombra-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px -6px rgba(0,0,0,.6);
  --sombra-2:0 1px 2px rgba(0,0,0,.45),0 14px 34px -22px rgba(0,0,0,.75);
  --sombra-3:0 2px 4px rgba(0,0,0,.5),0 24px 44px -22px rgba(0,0,0,.85);
}

/* Alias de marca (08/10/2026): dentro del CRM, la paleta propia de portal.css
   (--cyan, --green…, que crm.css usa unas 50 veces y portal.css en .boton y
   en los enlaces) sale de esta libreta. Así una marca nueva se pone cambiando
   solo los cinco colores de arriba. Solo cuelga de body.crm: el portal de
   clientes sigue con portal.css tal cual. --green-600 y el --cyan-600 oscuro
   NO son el «-medio» de la libreta: se calculan para que hoy se vean igual
   (#699f0a → #68A00C; oscuro #5BD8F0 → #5CD7F1, y #A3E52B sale de --verde-vivo).
   PARA DESHACERLO: borrar estos dos bloques. */
body.crm{
  --cyan:var(--c-cian);
  --cyan-600:var(--c-cian-medio);
  --green:var(--c-verde);
  --green-600:color-mix(in srgb, var(--c-verde) 83%, #000);
  --grad-brand:linear-gradient(90deg,var(--c-verde) 0%,var(--c-cian) 100%);
}
html.oscuro body.crm{
  --cyan-600:color-mix(in srgb, var(--c-cian) 85%, #fff);
  --green-600:var(--verde-vivo);
  --morado-fuerte:color-mix(in oklab, var(--c-morado) 86%, #000); --rosa-fuerte:color-mix(in oklab, var(--c-rosa) 76%, #000);
}

/* «Vivo»: la versión brillante de cian y verde, la de las tarjetas negras y
   el medidor (van sobre negro en los dos temas). Hoy da #3FD0EE y #A3E52B.
   Sin «oklch(from …)» (navegadores de antes de 2024) cae a la marca tal cual. */
body.crm{ --verde-vivo:var(--c-verde); --cian-vivo:var(--c-cian) }

/* «Fuerte» y «sobre tinta» (08/10/2026): lo último que no seguía a la libreta.
   --morado-fuerte / --rosa-fuerte: el relleno con letra blanca de Comercial y
   Gente (globitos, círculo de la cuenta, botón de familia). Antes #5F5CE6 y
   #A944B8 fijos; ahora salen de --c-morado / --c-rosa con la claridad topada
   (min), así que con una marca clara el blanco sigue leyéndose (con la paleta
   de prueba, ≥4.5:1). Hoy dan #5955DE y #A640B5 en los dos temas (Δ8 y Δ4 de
   255: el tope se bajó un poco para que un verde o amarillo también pase).
   --cian-sobre-tinta: la letra del círculo tinta del teléfono (el de im-yo y el
   avatar con marco). Es el cian con un piso de claridad igual al de hoy: hoy
   da el mismo cian; con una marca oscura se aclara para seguir leyéndose.
   Sin «oklch(from …)»: mezcla hacia negro (≈ hoy, Δ8 de 255) y el cian tal cual. */
body.crm{
  --morado-fuerte:color-mix(in oklab, var(--c-morado) 95%, #000);
  --rosa-fuerte:color-mix(in oklab, var(--c-rosa) 89%, #000);
  --cian-sobre-tinta:var(--c-cian);
}
@supports (color:color-mix(in oklab, red 50%, blue)){
  /* Los tonos de familia, calculados. Recetas medidas contra los colores que
     ya había (diferencia casi invisible): ver informes/sistema-diseno-paso1.html. */
  :root{
    --c-cian-tinte:color-mix(in srgb, var(--c-cian) 14%, #fff);
    --c-cian-borde:color-mix(in srgb, var(--c-cian) 43%, #fff);
    --c-cian-medio:color-mix(in oklab, var(--c-cian) 71%, #000);
    --c-cian-hondo:color-mix(in oklab, var(--c-cian) 45%, #000);
    --c-verde-tinte:color-mix(in srgb, var(--c-verde) 14%, #fff);
    --c-verde-borde:color-mix(in srgb, var(--c-verde) 43%, #fff);
    --c-verde-medio:color-mix(in oklab, var(--c-verde) 71%, #000);
    --c-verde-hondo:color-mix(in oklab, var(--c-verde) 45%, #000);
    --c-morado-tinte:color-mix(in srgb, var(--c-morado) 14%, #fff);
    --c-morado-borde:color-mix(in srgb, var(--c-morado) 43%, #fff);
    --c-morado-medio:color-mix(in oklab, var(--c-morado) 71%, #000);
    --c-morado-hondo:color-mix(in oklab, var(--c-morado) 45%, #000);
    --c-naranja-tinte:color-mix(in srgb, var(--c-naranja) 14%, #fff);
    --c-naranja-borde:color-mix(in srgb, var(--c-naranja) 43%, #fff);
    --c-naranja-medio:color-mix(in oklab, var(--c-naranja) 71%, #000);
    --c-naranja-hondo:color-mix(in oklab, var(--c-naranja) 45%, #000);
    --c-rosa-tinte:color-mix(in srgb, var(--c-rosa) 14%, #fff);
    --c-rosa-borde:color-mix(in srgb, var(--c-rosa) 43%, #fff);
    --c-rosa-medio:color-mix(in oklab, var(--c-rosa) 71%, #000);
    --c-rosa-hondo:color-mix(in oklab, var(--c-rosa) 45%, #000);
  }
  html.oscuro{
    --c-cian-tinte:color-mix(in oklab, var(--c-cian) 43%, #000);
    --c-cian-borde:color-mix(in srgb, var(--c-cian) 45%, #1B232A);
    --c-cian-medio:var(--c-cian);
    --c-cian-hondo:color-mix(in oklab, var(--c-cian) 33%, #fff);
    --c-verde-tinte:color-mix(in oklab, var(--c-verde) 43%, #000);
    --c-verde-borde:color-mix(in srgb, var(--c-verde) 45%, #1B232A);
    --c-verde-medio:var(--c-verde);
    --c-verde-hondo:color-mix(in oklab, var(--c-verde) 33%, #fff);
    --c-morado-tinte:color-mix(in oklab, var(--c-morado) 43%, #000);
    --c-morado-borde:color-mix(in srgb, var(--c-morado) 45%, #1B232A);
    --c-morado-medio:var(--c-morado);
    --c-morado-hondo:color-mix(in oklab, var(--c-morado) 33%, #fff);
    --c-naranja-tinte:color-mix(in oklab, var(--c-naranja) 43%, #000);
    --c-naranja-borde:color-mix(in srgb, var(--c-naranja) 45%, #1B232A);
    --c-naranja-medio:var(--c-naranja);
    --c-naranja-hondo:color-mix(in oklab, var(--c-naranja) 33%, #fff);
    --c-rosa-tinte:color-mix(in oklab, var(--c-rosa) 43%, #000);
    --c-rosa-borde:color-mix(in srgb, var(--c-rosa) 45%, #1B232A);
    --c-rosa-medio:var(--c-rosa);
    --c-rosa-hondo:color-mix(in oklab, var(--c-rosa) 33%, #fff);
  }
}
@supports (color:oklch(from red l c h)){
  body.crm{
    --verde-vivo:oklch(from var(--c-verde) calc(l + .1095) calc(c + .0132) calc(h - 2.28));
    --cian-vivo:oklch(from var(--c-cian) calc(l + .0776) calc(c - .0042) calc(h - 3.83));
    --morado-fuerte:oklch(from var(--c-morado) min(l, .535) calc(c + .0101) calc(h - 1.44)); --rosa-fuerte:oklch(from var(--c-rosa) min(l, .5571) calc(c - .0028) calc(h - .47)); --cian-sobre-tinta:oklch(from var(--c-cian) max(l, .7171) c h);
  }
  html.oscuro body.crm{
    --verde-vivo:oklch(from var(--c-verde) calc(l + .06) calc(c + .0063) calc(h - .86));
    --cian-vivo:var(--c-cian);
    --morado-fuerte:oklch(from var(--c-morado) min(l, .535) calc(c + .0376) calc(h - 3.88)); --rosa-fuerte:oklch(from var(--c-rosa) min(l, .5571) calc(c + .0328) calc(h - .52)); --cian-sobre-tinta:oklch(from var(--c-cian) max(l, .7947) c h);
  }
}


/* ===========================================================================
   1. VARIABLES DEL CRM Y COLORES DE FAMILIA
   ---------------------------------------------------------------------------
   Los nombres viejos por módulo (--tinta, --fam-*, --ok-bg…) y el color de
   cada familia en claro y en oscuro. Todos apuntan a la libreta de arriba.
   =========================================================================== */

body.crm{
  --tinta:var(--c-tinta);
  --fondo-crm:var(--c-fondo);
  --r-tarjeta:20px;
  --sombra-tarjeta:0 1px 2px rgba(20,32,40,.05),0 14px 34px -22px rgba(20,32,40,.28);
  --sombra-tarjeta-alta:0 2px 4px rgba(20,32,40,.06),0 24px 44px -22px rgba(20,32,40,.40);
  --et-txt:var(--c-tinta-suave);

  /* Las cinco familias de módulos. Se usan en puntos, tiras y subrayados;
     nunca como fondo de un texto. */
  --fam-hoy:var(--c-cian);
  --fam-comercial:var(--c-morado);
  --fam-dinero:var(--c-verde);
  --fam-operacion:var(--c-naranja);
  --fam-gente:var(--c-rosa);

  /* Los cuatro estados. Significado fijo en todo el CRM. */
  --ok-bg:var(--c-ok-fondo);     --ok-txt:var(--c-ok-texto);
  --at-bg:var(--c-aviso-fondo);  --at-txt:var(--c-aviso-texto);
  --cr-bg:var(--c-error-fondo);  --cr-txt:var(--c-error-texto);
  --in-bg:var(--c-info-fondo);   --in-txt:var(--c-info-texto);
  /* gris propio (#3D4A54): no hay medida oficial entre tinta y tinta-suave */
  --ne-bg:var(--c-fondo);        --ne-txt:#3D4A54;

  background:var(--fondo-crm);
}

/* En oscuro el fondo baja un escalón más que el de portal.css: la tarjeta
   (#1B232A) tiene que despegarse del fondo, que es todo el punto de esto. */
html.oscuro body.crm{
  --sombra-tarjeta:0 1px 2px rgba(0,0,0,.45),0 14px 34px -22px rgba(0,0,0,.75);
  --sombra-tarjeta-alta:0 2px 4px rgba(0,0,0,.5),0 24px 44px -22px rgba(0,0,0,.85);
  --et-txt:var(--gray);
  --ok-bg:var(--verde-bg);  --ok-txt:var(--verde-txt);
  --at-bg:var(--ambar-bg);  --at-txt:var(--ambar-txt);
  --cr-bg:var(--rojo-bg);   --cr-txt:var(--rojo-txt);
  --ne-bg:var(--sup-2);     --ne-txt:var(--sup-2-txt);
}

/* --- Los colores de cada familia, en claro y en oscuro ---------------------- */
body.crm .menu-crm.fam-hoy      { --menu-fondo:var(--c-cian-borde); --menu-texto:var(--c-cian-hondo) }
body.crm .menu-crm.fam-comercial{ --menu-fondo:var(--c-morado-borde); --menu-texto:var(--c-morado-hondo) }
body.crm .menu-crm.fam-dinero   { --menu-fondo:var(--c-verde-borde); --menu-texto:var(--c-verde-hondo) }
body.crm .menu-crm.fam-operacion{ --menu-fondo:var(--c-naranja-borde); --menu-texto:var(--c-naranja-hondo) }
body.crm .menu-crm.fam-gente    { --menu-fondo:var(--c-rosa-borde); --menu-texto:var(--c-rosa-hondo) }

/* En oscuro un menú claro deslumbra: va el tono profundo de la familia, con
   letra clara. Aquí sí funciona porque todo lo demás también es oscuro. */
html.oscuro body.crm .menu-crm.fam-hoy      { --menu-fondo:var(--c-cian-tinte); --menu-texto:var(--c-cian-hondo) }
html.oscuro body.crm .menu-crm.fam-comercial{ --menu-fondo:var(--c-morado-tinte); --menu-texto:var(--c-morado-hondo) }
html.oscuro body.crm .menu-crm.fam-dinero   { --menu-fondo:var(--c-verde-tinte); --menu-texto:var(--c-verde-hondo) }
html.oscuro body.crm .menu-crm.fam-operacion{ --menu-fondo:var(--c-naranja-tinte); --menu-texto:var(--c-naranja-hondo) }
html.oscuro body.crm .menu-crm.fam-gente    { --menu-fondo:var(--c-rosa-tinte); --menu-texto:var(--c-rosa-hondo) }
body.crm .familia.f-hoy      { --punto:var(--fam-hoy) }
body.crm .familia.f-comercial{ --punto:var(--fam-comercial) }
body.crm .familia.f-dinero   { --punto:var(--fam-dinero) }
body.crm .familia.f-operacion{ --punto:var(--fam-operacion) }
body.crm .familia.f-gente    { --punto:var(--fam-gente) }

/* Los colores de la familia también en el marco (los mismos del menú). */
body.crm .menu-lateral.fam-hoy      { --menu-fondo:var(--c-cian-borde); --menu-texto:var(--c-cian-hondo) }
body.crm .menu-lateral.fam-comercial{ --menu-fondo:var(--c-morado-borde); --menu-texto:var(--c-morado-hondo) }
body.crm .menu-lateral.fam-dinero   { --menu-fondo:var(--c-verde-borde); --menu-texto:var(--c-verde-hondo) }
body.crm .menu-lateral.fam-operacion{ --menu-fondo:var(--c-naranja-borde); --menu-texto:var(--c-naranja-hondo) }
body.crm .menu-lateral.fam-gente    { --menu-fondo:var(--c-rosa-borde); --menu-texto:var(--c-rosa-hondo) }
html.oscuro body.crm .menu-lateral.fam-hoy      { --menu-fondo:var(--c-cian-tinte); --menu-texto:var(--c-cian-hondo) }
html.oscuro body.crm .menu-lateral.fam-comercial{ --menu-fondo:var(--c-morado-tinte); --menu-texto:var(--c-morado-hondo) }
html.oscuro body.crm .menu-lateral.fam-dinero   { --menu-fondo:var(--c-verde-tinte); --menu-texto:var(--c-verde-hondo) }
html.oscuro body.crm .menu-lateral.fam-operacion{ --menu-fondo:var(--c-naranja-tinte); --menu-texto:var(--c-naranja-hondo) }
html.oscuro body.crm .menu-lateral.fam-gente    { --menu-fondo:var(--c-rosa-tinte); --menu-texto:var(--c-rosa-hondo) }
body.crm.con-marco .crm-cuerpo{ padding-top:1rem }
body.crm.con-marco .crm-cuerpo > .envoltura{ padding-top:.4rem }


/* ===========================================================================
   2. EL MARCO: ANCHO, CABECERA, MENÚ LATERAL Y CUENTA
   ---------------------------------------------------------------------------
   Lo que rodea a todas las pantallas en la computadora: el ancho, la cabecera,
   el menú camaleón con sus familias y globitos, la cuenta, el título de cada
   pantalla, la franja de administración y lo que encontró el buscador.
   =========================================================================== */

.ancho{ max-width:var(--wrap-crm) !important; }
body.crm .envoltura{ padding-top:1.2rem; }
.marca-crm{
  font-weight:700; font-size:var(--letra-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-sobre-color); background:var(--grad-brand); /* letra oscura: el blanco daba 2.2:1 (06/10/2026) */
  padding:.2rem .55rem; border-radius:var(--r-pildora); align-self:center;
}
html.oscuro .marca-crm{ color:var(--c-sobre-color); }

/* Al imprimir no hay scroll, y una cabecera pegada se repetiría o taparía. */

/* En el teléfono se pega SOLO la barra de módulos, no el logotipo.

   Medido, no supuesto: en una pantalla de 375 × 812 el bloque completo mide
   206 px, o sea la CUARTA PARTE de la pantalla, ocupada para siempre. Y es
   peor de lo que suena, porque debajo de 620 px el nombre del usuario y sus
   ligas se pasan a un renglón propio de ancho completo — justo lo que menos
   falta a media captura. La barra de módulos sola mide 44 px y es lo único de
   ahí que se usa mientras se lee una tabla.

   `display:contents` y no `position:static`: hace que el envoltorio deje de
   existir como caja y sus dos hijos cuelguen directo del `body`. Es
   imprescindible, y costó una prueba descubrirlo — con `position:static` la
   barra se pega DENTRO del envoltorio, y como el envoltorio mide lo que miden
   sus dos hijos y se va con el scroll, la barra se va con él. Pegada al
   `body`, se pega a la pantalla, que es lo que se quería. */

/* Las ligas con `#` (por ejemplo «Revisarlos» → impuestos.php#parametros)
   dejarían su destino escondido detrás de la cabecera. Esto lo baja. */

/* Al pegarse arriba, el logotipo ocupa menos: es lo que más alto mide y lo
   que menos falta hace una vez que ya sabes dónde estás. */

/* Los dos hijos pierden su fondo sólido: el traslúcido lo pone el envoltorio.
   Si se quedaran con el suyo, el desenfoque no se vería — habría un muro
   blanco encima. */

/* --- La cabecera que se queda pegada arriba ---------------------------------
   Envuelve el logotipo y la barra de módulos, y NO la franja azul de
   «Administración interna». Esa franja se va con el scroll a propósito: dice
   en qué sistema estás, y eso solo hace falta al llegar. El menú, en cambio,
   hace falta todo el tiempo — sin esto, cambiar de Facturación a Clientes al
   final de una tabla de trescientos renglones obliga a subir hasta arriba.

   El fondo es traslúcido con desenfoque, igual que el menú del sitio público.
   Los dos números van juntos: si se sube la transparencia hay que subir el
   desenfoque, porque lo que mantiene el texto legible no es el blanco sino que
   lo de abajo pierda el detalle. Aquí es .82 y 18px — un poco más opaco que en
   el sitio público (.75) porque debajo pasan tablas de números, que estorban
   más que una foto.

   Si el navegador no sabe desenfocar, el @supports le devuelve el fondo casi
   sólido: vale más perder el efecto que el texto.

   z-index 60 lo deja por encima del contenido y por debajo de los recados. */

/* --- Barra de módulos ------------------------------------------------------
   Se desplaza en horizontal en el teléfono en vez de partirse en dos renglones:
   con siete módulos, dos renglones empujan el contenido media pantalla hacia
   abajo justo en el aparato donde menos pantalla hay. */
.nav-crm{ background:var(--white); border-bottom:1px solid var(--line); }
.nav-crm .interior{
  margin:0 auto; padding:0 1.2rem; display:flex; gap:.2rem;
  overflow-x:auto; scrollbar-width:none;
}
.nav-crm .interior::-webkit-scrollbar{ display:none }
.nav-crm a{
  padding:.85rem .9rem; font-size:var(--letra-base); font-weight:700; white-space:nowrap;
  color:var(--ink-soft); text-decoration:none; border-bottom:3px solid transparent;
}
.nav-crm a:hover{ color:var(--ink); background:var(--tint) }
.nav-crm a.aqui{ color:var(--cyan-600); border-bottom-color:var(--cyan) }

/* --- Encabezado de pantalla ----------------------------------------------- */
.encabezado-crm{
  display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem;
}
.encabezado-crm h1{ margin:0 }
.encabezado-crm .acciones{ margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap }
.encabezado-crm .boton{ padding:.55rem 1.1rem; font-size:var(--letra-base) }

/* Selector de periodo: flechas a los lados del mes.

   Las ligas son CUADROS FIJOS de 2rem, porque adentro va una sola flecha. Ese
   ancho fijo es justamente lo que hace que esta clase NO sirva para nada que
   lleve texto: «Borrador (1)» metido en 2 cm se sale de su recuadro y se
   encima con el de al lado. Para las pestañas de filtro de un listado está
   `.filtros`, aquí abajo. */
.periodo-nav{ display:flex; align-items:center; gap:.4rem; font-size:var(--letra-md) }
.periodo-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border:1px solid var(--line); border-radius:var(--r-medio);
  text-decoration:none; color:var(--ink-soft); background:var(--white);
}
.periodo-nav a:hover{ border-color:var(--cyan); color:var(--cyan-600) }
.periodo-nav strong{ min-width:11ch; text-align:center }

/* El mes va en un desplegable entre las dos flechas, para poder saltar a
   noviembre de 2023 sin dar treinta y cuatro clics. Hay que deshacerle dos
   cosas al estilo general de los `select` del portal, que está pensado para
   formularios de captura: el ancho del 100 % —aquí va en una fila, junto a
   las flechas— y el alto, que tiene que ser el mismo de los cuadros de 2rem
   o los tres dejan de verse como una sola pieza. */
.periodo-nav form{ margin:0 }
.periodo-nav select{
  width:auto; height:2rem; padding:0 .4rem; font-size:var(--letra-base);
  border-radius:var(--r-medio);
}

/* Módulo que todavía no existe. Se pinta apagado y sin liga: un 404 en la
   navegación principal hace dudar de todo lo demás que enseña la pantalla. */
.nav-crm .pendiente{
  padding:.85rem .9rem; font-size:var(--letra-base); font-weight:700; white-space:nowrap;
  color:var(--gray); opacity:.5; cursor:default; border-bottom:3px solid transparent;
}
.nav-crm .pendiente::after{ content:' ·'; }

/* Más ancho total: al contenido de 1280 se le suma el menú. */
body.crm{ --wrap-crm:1560px }

/* La cabecera ya no se pega, y las ligas con `#` ya no tienen que
   librar 9rem de cabecera. */
html{ scroll-padding-top:1.5rem }
body.crm .crm-cuerpo{
  max-width:var(--wrap-crm); margin:0 auto; padding:1.2rem 1.2rem 0;
  display:flex; gap:1.8rem; align-items:flex-start;
}
body.crm .crm-cuerpo > .envoltura{
  flex:1 1 auto; min-width:0; max-width:none !important; margin:0; padding:.6rem 0 3rem;
}

/* Con el menú al lado, el contenido mide ~1,150 px en una laptop y seis
   tarjetas de cifra de 190 px ya no cabían en un renglón: la sexta se caía
   sola al de abajo. A 160 px caben las seis. */
body.crm .crm-cuerpo .tarjetas:not(.pend-kpis){ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) }

/* La pantalla de la contraseña no lleva menú: se queda centrada y angosta. */
body.crm .crm-cuerpo.sin-menu > .envoltura{ max-width:920px !important; margin:0 auto }

/* --- El menú en pantalla grande -------------------------------------------- */
body.crm .menu-crm{
  flex:0 0 216px; box-sizing:border-box;
  position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow-y:auto;
  padding:1.2rem .7rem; border-radius:var(--r-grande);
  background:var(--menu-fondo,var(--c-cian-borde)); color:var(--menu-texto,var(--c-cian-hondo));
  box-shadow:var(--sombra-3);
  display:flex; flex-direction:column; gap:1.1rem; scrollbar-width:thin;
}
body.crm .menu-crm .familia{ display:flex; flex-direction:column; gap:1px }
body.crm .menu-crm .familia-nombre{
  display:flex; align-items:center; gap:.5rem; padding:0 .75rem .3rem;
  font-size:var(--letra-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  opacity:.8;
}

/* El punto de la familia. Con un aro claro, porque el cian sobre el menú cian
   desaparecería. */
body.crm .menu-crm .familia-nombre::before{
  content:""; width:.5rem; height:.5rem; border-radius:3px; flex:none;
  background:var(--punto); box-shadow:0 0 0 1.5px rgba(255,255,255,.7);
}
html.oscuro body.crm .menu-crm .familia-nombre::before{ box-shadow:0 0 0 1.5px rgba(255,255,255,.25) }
body.crm .menu-crm a,
body.crm .menu-crm .pendiente{
  display:flex; align-items:center; min-height:2.25rem; padding:.3rem .75rem;
  border-radius:var(--r-medio); font-size:var(--letra-base); font-weight:700; text-decoration:none;
  color:inherit;
}
body.crm .menu-crm a:hover{ background:rgba(255,255,255,.45) }
html.oscuro body.crm .menu-crm a:hover{ background:rgba(255,255,255,.08) }
body.crm .menu-crm a.aqui{
  background:var(--c-superficie); color:#17232B;
  box-shadow:inset 3px 0 0 var(--punto), var(--sombra-1);
}
html.oscuro body.crm .menu-crm a.aqui{ background:rgba(255,255,255,.92) }
body.crm .menu-crm a:focus-visible{ outline:3px solid var(--c-tinta); outline-offset:1px }
html.oscuro body.crm .menu-crm a:focus-visible{ outline-color:var(--c-tinta) }
body.crm .menu-crm .pendiente{ opacity:.5; cursor:default }
body.crm .solo-lector{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
body.crm .menu-marca .marca-crm{ font-size:var(--letra-xs); padding:.18rem .5rem }

/* El buscador. La lupa es un dibujo de fondo para no meter otro elemento. */
body.crm .menu-buscar{ margin:0; padding:0 .1rem }
body.crm .menu-buscar input::placeholder{ color:var(--c-tinta-suave) }
body.crm .menu-buscar input:focus{ outline:3px solid var(--c-tinta); outline-offset:1px; background-color:var(--c-superficie) }
html.oscuro body.crm .menu-buscar input{
  background-color:rgba(0,0,0,.28); border-color:rgba(255,255,255,.12); color:var(--c-tinta);
}
html.oscuro body.crm .menu-buscar input::placeholder{ color:rgba(242,246,249,.6) }
html.oscuro body.crm .menu-buscar input:focus{ outline-color:var(--c-tinta); background-color:rgba(0,0,0,.4) }

/* Los globitos: cuántas cosas esperan una acción en ese módulo. Van del
   color de SU familia (Pendientes cian, Cotizaciones índigo, Conciliación
   verde), como en la propuesta, no del color del menú donde estás. */
body.crm .familia.f-hoy      { --g-fondo:var(--c-cian); --g-texto:var(--c-sobre-color) }
body.crm .familia.f-comercial{ --g-fondo:var(--morado-fuerte); --g-texto:#fff }
body.crm .familia.f-dinero   { --g-fondo:var(--c-verde); --g-texto:var(--c-sobre-color) }
body.crm .familia.f-operacion{ --g-fondo:var(--c-naranja); --g-texto:var(--c-sobre-color) }
body.crm .familia.f-gente    { --g-fondo:var(--rosa-fuerte); --g-texto:#fff }
body.crm .menu-crm .globo{
  margin-left:auto; flex:none; min-width:1.95rem; height:1.3rem; padding:0 .5rem;
  box-sizing:border-box; border-radius:var(--r-pildora); display:inline-flex; align-items:center;
  justify-content:center; font-size:var(--letra-xs); font-weight:700; line-height:1;
  background:var(--g-fondo,var(--c-tinta)); color:var(--g-texto,var(--c-superficie));
}

/* Atrasado: el mismo color, con un aro rojo. Sigue siendo de su familia, y
   sigue diciendo que algo ya se pasó de fecha. */
body.crm .menu-crm .globo.urgente{ box-shadow:0 0 0 2px var(--c-superficie), 0 0 0 3.5px var(--c-error-punto) }
html.oscuro body.crm .menu-crm .globo.urgente{ box-shadow:0 0 0 2px var(--menu-fondo), 0 0 0 3.5px var(--c-error-punto) }

/* El acento de cada familia, para el círculo de la cuenta. */

/* Acento = círculo del avatar (relleno de color en los dos temas). Su letra es
   fija: --c-sobre-color sobre cian/verde/naranja; morado y rosa se quedan en su
   tono hondo con blanco porque --c-morado/--c-rosa con blanco no llegan a 4.5:1. */
body.crm .menu-lateral.fam-hoy      { --menu-acento:var(--c-cian); --menu-acento-texto:var(--c-sobre-color) }
body.crm .menu-lateral.fam-comercial{ --menu-acento:var(--morado-fuerte); --menu-acento-texto:#fff }
body.crm .menu-lateral.fam-dinero   { --menu-acento:var(--c-verde); --menu-acento-texto:var(--c-sobre-color) }
body.crm .menu-lateral.fam-operacion{ --menu-acento:var(--c-naranja); --menu-acento-texto:var(--c-sobre-color) }
body.crm .menu-lateral.fam-gente    { --menu-acento:var(--rosa-fuerte); --menu-acento-texto:#fff }

/* La tarjeta de la cuenta, al pie del marco: solo el nombre. Lo demás vive en
   un panel que se abre con un clic, encima de la tarjeta. */
body.crm .menu-yo{ position:relative; flex:none }
body.crm .menu-yo > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.65rem;
  padding:.7rem .75rem; border-radius:var(--r-medio); background:rgba(255,255,255,.55);
}
body.crm .menu-yo > summary::-webkit-details-marker{ display:none }
body.crm .menu-yo > summary:hover{ background:rgba(255,255,255,.75) }
body.crm .menu-yo[open] > summary{ background:var(--c-superficie); color:var(--c-tinta) }
body.crm .menu-yo > summary:focus-visible{ outline:3px solid var(--c-tinta); outline-offset:2px }
html.oscuro body.crm .menu-yo > summary{ background:rgba(255,255,255,.07) }
html.oscuro body.crm .menu-yo > summary:hover{ background:rgba(255,255,255,.12) }
html.oscuro body.crm .menu-yo[open] > summary{ background:rgba(255,255,255,.14); color:inherit }
html.oscuro body.crm .menu-yo > summary:focus-visible{ outline-color:var(--c-tinta) }
body.crm .yo-avatar{
  flex:none; width:2.35rem; height:2.35rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--menu-acento,var(--c-cian)); color:var(--menu-acento-texto,var(--c-sobre-color));
  font-size:var(--letra-sm); font-weight:700; letter-spacing:.02em;
}
body.crm .yo-nombre{ display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25 }
body.crm .yo-nombre strong{ font-size:var(--letra-base); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
body.crm .yo-nombre span{ font-size:var(--letra-xs); opacity:.75 }
body.crm .yo-flecha{
  flex:none; width:.5rem; height:.5rem; margin-right:.2rem; opacity:.6;
  border-right:2px solid currentColor; border-top:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .15s;
}
body.crm .menu-yo[open] .yo-flecha{ transform:rotate(135deg) translate(-2px,2px) }
body.crm .yo-panel{
  position:absolute; left:0; right:0; bottom:calc(100% + .5rem); z-index:70;
  display:flex; flex-direction:column; padding:.45rem;
  background:var(--c-superficie); color:var(--c-tinta); border-radius:var(--r-medio);
  box-shadow:var(--sombra-3);
}
html.oscuro body.crm .yo-panel{ background:var(--c-superficie-2); color:var(--c-tinta); box-shadow:var(--sombra-3) }
body.crm .yo-panel > a,
body.crm .yo-cerrar button{
  display:block; width:100%; box-sizing:border-box; text-align:left;
  padding:.55rem .7rem; border-radius:var(--r-medio); border:0; background:none;
  font:inherit; font-size:var(--letra-base); font-weight:700; color:inherit; text-decoration:none; cursor:pointer;
}
body.crm .yo-panel > a:hover,
body.crm .yo-cerrar button:hover{ background:var(--c-fondo) }
html.oscuro body.crm .yo-panel > a:hover,
html.oscuro body.crm .yo-cerrar button:hover{ background:rgba(255,255,255,.07) }
body.crm .yo-panel > a:focus-visible,
body.crm .yo-cerrar button:focus-visible{ outline:3px solid var(--c-tinta); outline-offset:-3px }
html.oscuro body.crm .yo-panel > a:focus-visible,
html.oscuro body.crm .yo-cerrar button:focus-visible{ outline-color:var(--c-tinta) }
body.crm .yo-cerrar{ margin:0 }

/* «Salir de todo» va al final y separado: es el que cierra TODO. */
body.crm .yo-panel .yo-salir{ color:var(--c-error-texto); border-top:1px solid var(--c-borde); border-radius:0 0 10px 10px; margin-top:.25rem; padding-top:.65rem }
html.oscuro body.crm .yo-panel .yo-salir{ color:var(--c-error-punto); border-top-color:rgba(255,255,255,.1) }
body.crm .yo-fila{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.35rem .4rem .55rem .7rem; margin-bottom:.25rem; border-bottom:1px solid var(--c-borde);
}
html.oscuro body.crm .yo-fila{ border-bottom-color:rgba(255,255,255,.1) }
body.crm .yo-rotulo{ font-size:var(--letra-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.6 }
body.crm .yo-panel .tema button{ color:inherit; opacity:.7 }
body.crm .yo-panel .tema button:hover{ opacity:1; background:var(--c-fondo); color:inherit }
body.crm .yo-panel .tema button[aria-pressed="true"]{ opacity:1; background:var(--c-tinta); color:var(--c-superficie) }
html.oscuro body.crm .yo-panel .tema button:hover{ background:rgba(255,255,255,.08) }
html.oscuro body.crm .yo-panel .tema button[aria-pressed="true"]{ background:var(--c-tinta); color:var(--c-superficie) }

/* --- El título de cada pantalla, con su familia encima ---------------------
   «● DINERO» sobre «Facturación mensual», como en la propuesta. Se escribe
   desde aquí (y no en cada pantalla) porque la familia la decide el menú: si
   un módulo cambia de familia, cambia en `familiasCrm()` y nada más.
   El «/ ""» es para que el lector de pantalla no lo lea como parte del
   título; el navegador que no lo entienda se queda con el renglón de antes. */
body.crm.con-marco h1{ font-size:2.6rem; letter-spacing:-.03em }
body.crm.con-marco[class*="pag-"] .crm-cuerpo h1::before{
  display:block; width:max-content; margin-bottom:.45rem; padding-left:.9rem;
  font-size:var(--letra-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.2;
  color:var(--fam-tono); background:linear-gradient(var(--fam-punto),var(--fam-punto)) no-repeat 0 50% / .5rem .5rem;
  border-radius:2px;
}
body.crm.pag-hoy       { --fam-punto:var(--c-cian);    --fam-tono:var(--c-cian-medio) }
body.crm.pag-comercial { --fam-punto:var(--c-morado);  --fam-tono:var(--c-morado-medio) }
body.crm.pag-dinero    { --fam-punto:var(--c-verde);   --fam-tono:var(--c-verde-medio) }
body.crm.pag-operacion { --fam-punto:var(--c-naranja); --fam-tono:var(--c-naranja-medio) }
body.crm.pag-gente     { --fam-punto:var(--c-rosa);    --fam-tono:var(--c-rosa-medio) }
html.oscuro body.crm.pag-hoy       { --fam-tono:var(--c-cian-hondo) }
html.oscuro body.crm.pag-comercial { --fam-tono:var(--c-morado-hondo) }
html.oscuro body.crm.pag-dinero    { --fam-tono:var(--c-verde-hondo) }
html.oscuro body.crm.pag-operacion { --fam-tono:var(--c-naranja-hondo) }
html.oscuro body.crm.pag-gente     { --fam-tono:var(--c-rosa-hondo) }
body.crm.pag-hoy       .crm-cuerpo h1::before{ content:"Hoy";       content:"Hoy" / "" }
body.crm.pag-comercial .crm-cuerpo h1::before{ content:"Comercial"; content:"Comercial" / "" }
body.crm.pag-dinero    .crm-cuerpo h1::before{ content:"Dinero";    content:"Dinero" / "" }
body.crm.pag-operacion .crm-cuerpo h1::before{ content:"Operación"; content:"Operación" / "" }
body.crm.pag-gente     .crm-cuerpo h1::before{ content:"Gente";     content:"Gente" / "" }

/* --- Lo que encontró el buscador (buscar.php) ------------------------------ */

/* En columnas de periódico y no en rejilla: los grupos miden distinto y la
   rejilla dejaba huecos debajo de los cortos. */
body.crm .resultados-busqueda{ columns:2 400px; column-gap:1.2rem }
body.crm .grupo-busqueda h2{ display:flex; align-items:center; gap:.5rem }
body.crm .grupo-busqueda h2::before{
  content:""; width:.55rem; height:.55rem; border-radius:3px; background:var(--g,var(--c-tinta-suave));
}
body.crm .grupo-busqueda.fam-hoy      { --g:var(--c-cian) }
body.crm .grupo-busqueda.fam-comercial{ --g:var(--c-morado) }
body.crm .grupo-busqueda.fam-dinero   { --g:var(--c-verde) }
body.crm .grupo-busqueda.fam-operacion{ --g:var(--c-naranja) }
body.crm .grupo-busqueda.fam-gente    { --g:var(--c-rosa) }
body.crm .grupo-busqueda ul{ list-style:none; margin:0; padding:0 0 .4rem }
body.crm .grupo-busqueda li a{
  display:flex; flex-direction:column; gap:.1rem; padding:.7rem 1.2rem;
  border-top:1px solid var(--line); text-decoration:none; color:inherit;
}
body.crm .grupo-busqueda li a:hover{ background:var(--tint) }
body.crm .grupo-busqueda li a strong{ color:var(--ink) }
body.crm .grupo-busqueda li a span{ font-size:var(--letra-sm); color:var(--gray) }

/* --- La marca: ventana + «BGU» + «CRM» ------------------------------------- */
body.crm .menu-marca{
  display:flex; align-items:center; gap:.5rem; padding:.1rem .6rem .2rem;
  color:var(--c-tinta); text-decoration:none; flex-wrap:nowrap;
}
body.crm .menu-marca img{ width:30px; height:30px; flex:none }
body.crm .menu-bgu{ font-size:var(--letra-xl); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--c-tinta) }
html.oscuro body.crm .menu-bgu{ color:var(--c-tinta) }
body.crm .menu-marca:focus-visible{ outline:3px solid var(--c-tinta); outline-offset:2px; border-radius:var(--r-medio) }
html.oscuro body.crm .menu-marca:focus-visible{ outline-color:var(--c-tinta) }

/* 3. «Instalar como app». */
body.crm .yo-instalar{
  display:flex; align-items:center; gap:.5rem; width:100%; box-sizing:border-box; text-align:left;
  padding:.55rem .7rem; border-radius:var(--r-medio); border:0; background:none;
  font:inherit; font-size:var(--letra-base); font-weight:700; color:inherit; cursor:pointer;
}
body.crm .yo-instalar[hidden]{ display:none }
body.crm .yo-instalar:hover{ background:var(--c-fondo) }
html.oscuro body.crm .yo-instalar:hover{ background:rgba(255,255,255,.08) }
@media (max-width:900px){
  /* --- El menú en el teléfono: la tira de siempre ----------------------------- */
  body.crm .crm-cuerpo{ display:block; padding:0 }
  body.crm .crm-cuerpo > .envoltura{ padding:1.4rem 1.2rem 3rem }
  body.crm .menu-crm{
    position:sticky; top:0; z-index:60; max-height:none;
    flex-direction:row; gap:.3rem; overflow-x:auto; overflow-y:hidden;
    padding:.5rem .8rem; border-radius:0; scrollbar-width:none;
  }
  body.crm .menu-crm::-webkit-scrollbar{ display:none }
  body.crm .menu-crm .familia{ display:contents }
  body.crm .menu-crm .familia-nombre{ display:none }
  body.crm .menu-crm a, body.crm .menu-crm .pendiente{
    flex:none; white-space:nowrap; min-height:2.5rem; padding:0 .85rem; gap:.45rem;
  }
  body.crm .menu-crm a::before, body.crm .menu-crm .pendiente::before{
    content:""; width:.45rem; height:.45rem; border-radius:2px; flex:none;
    background:var(--punto); box-shadow:0 0 0 1.5px rgba(255,255,255,.7);
  }

  /* La cabecera de arriba sigue siendo la de siempre en el teléfono. */
  html{ scroll-padding-top:4rem }
}
@media print{
  /* Al imprimir —que en una oficina pasa— se van la navegación y los botones. */
  .nav-crm, .cabecera .quien, .tema, .encabezado-crm .acciones, .pie{ display:none }
  body.crm .menu-crm{ display:none }
  body.crm .crm-cuerpo{ display:block; padding:0 }
}
@media (min-width:901px){
  /* --- El marco en pantalla grande ------------------------------------------- */
  body.crm .menu-lateral{
    flex:0 0 232px; box-sizing:border-box;
    position:sticky; top:1rem; height:calc(100vh - 2rem); min-height:30rem;
    display:flex; flex-direction:column;border-radius:var(--r-grande);
    background:var(--menu-fondo); color:var(--menu-texto);
    box-shadow:var(--sombra-3);
  }

  /* El nav de los módulos ya no es tarjeta: es el centro del marco, y es lo
     único que se desliza si la pantalla es baja. Logotipo, buscador y cuenta
     se quedan siempre a la vista. */
  body.crm .menu-lateral .menu-crm{
    position:static; flex:1 1 auto; min-height:0; max-height:none;
    padding:0 0 .3rem; border-radius:0; background:none; box-shadow:none;overflow-y:auto;
    /* Sin barra de desplazamiento: una barra gris o blanca rompe la tarjeta
       de color (Daniel, 03/10/2026). Se sigue pudiendo deslizar con la rueda
       o el dedo, y cuando hay más módulos abajo el último renglón se
       desvanece: eso es lo que avisa que hay más. */
    scrollbar-width:none;
    gap:.55rem; padding-bottom:0; -webkit-mask-image:none; mask-image:none;
  }
  body.crm .menu-lateral .menu-crm::-webkit-scrollbar{ display:none }

  /* --- El menú más compacto: los 16 módulos caben sin deslizar en una laptop.
     El desvanecido de abajo se veía como un renglón cortado; con todo a la
     vista ya no hace falta, y solo se pinta si de verdad no cabe. */
  body.crm .menu-lateral{ gap:.7rem; padding:1rem .65rem .65rem }
  body.crm .menu-lateral .menu-crm .familia-nombre{ padding-bottom:.15rem; font-size:var(--letra-xs) }
  body.crm .menu-lateral .menu-crm a,
  body.crm .menu-lateral .menu-crm .pendiente{ min-height:1.85rem; font-size:var(--letra-base) }
}
@media (min-width:901px) and (max-height:760px){
  body.crm .menu-lateral .menu-crm{
    padding-bottom:1.2rem;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 1.2rem),transparent);
            mask-image:linear-gradient(to bottom,#000 calc(100% - 1.2rem),transparent);
  }
}


/* ===========================================================================
   3. LA PUERTA DEL CRM (entrar.php)
   ---------------------------------------------------------------------------
   La pantalla de la contraseña: sin menú, centrada y angosta.
   =========================================================================== */


/* --- La puerta del CRM (entrar.php), 04/10/2026 ------------------------------
   El mismo dibujo que la entrada del portal: dos mitades, la oscura a la
   izquierda. La cabecera es blanca con la franja verde-azul y las tres salidas
   con su nombre. Antes era la franja negra «Administración interna» y la
   cabecera vieja: era la única pantalla del CRM que no tenía el diseño nuevo. */
body.crm .crm-puerta-cabeza{background:var(--white);border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--green),var(--cyan)) 1;border-bottom:1px solid var(--line)}
body.crm .crm-puerta-cabeza .interior{max-width:1200px;margin:0 auto;padding:.75rem 1.5rem;display:flex;align-items:center;gap:.8rem;}
body.crm .crm-puerta-cabeza .logo img{display:block;height:42px;width:auto}
body.crm .crm-puerta-cabeza .salidas{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap; gap:.6rem}
body.crm .crm-puerta-cabeza .nivel{font-size:var(--letra-xs);font-weight:700;padding:.25rem .7rem;border-radius:var(--r-pildora);
  background:var(--c-cian-tinte);color:var(--c-cian-medio);margin-right:.4rem}
html.oscuro body.crm .crm-puerta-cabeza .nivel{background:var(--cian-bg);color:var(--cian-txt)}
body.crm .crm-puerta-cabeza .salidas > a{
  display:inline-flex;align-items:center;min-height:38px;padding:0 .85rem;border-radius:var(--r-pildora);border:0;background:none;
  font:inherit;font-size:var(--letra-base);font-weight:700;color:var(--ink-soft);text-decoration:none;cursor:pointer}
body.crm .crm-puerta-cabeza .salidas > a:hover{background:var(--tint);color:var(--ink)}
body.crm .crm-puerta-cabeza .salidas > a.rojo{color:var(--rojo)}
body.crm .crm-puerta{max-width:1040px;margin:0 auto;padding:3rem 1.5rem 3.5rem}
body.crm .crm-puerta-caja{display:flex;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);border-radius:var(--r-grande);
  box-shadow:var(--sombra-2);overflow:hidden}
body.crm .crm-puerta-marca{flex:1 1 380px;background:#17232B;color:#C9D3DA;padding:3rem 2.8rem;display:flex;flex-direction:column;gap:1.4rem;position:relative;overflow:hidden}
html.oscuro body.crm .crm-puerta-marca{background:#0A1115}

/* El aro verde de la esquina, el mismo de las tarjetas oscuras del CRM. */
body.crm .crm-puerta-marca::before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;
  border:38px solid rgba(125,193,14,.12);pointer-events:none}
body.crm .crm-puerta-marca > *{position:relative}
body.crm .crm-puerta-marca .et{font-size:var(--letra-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#FFD866}
body.crm .crm-puerta-marca .lema{margin:0;font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1.18;font-weight:700;letter-spacing:-.02em;color:#fff}
body.crm .crm-puerta-marca ul{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:1rem}
body.crm .crm-puerta-marca li{display:flex;gap:.85rem;align-items:flex-start;font-size:var(--letra-md);line-height:1.5}
body.crm .crm-puerta-marca li svg{flex:none;width:38px;height:38px;padding:9px;border-radius:var(--r-medio);background:rgba(255,255,255,.08);color:#9FE3F2}
body.crm .crm-puerta-marca li strong{color:#fff}
body.crm .crm-puerta-form{flex:1 1 380px;padding:3rem 2.8rem}
body.crm .crm-puerta-form h1{margin:0;font-size:clamp(2rem,4vw,2.6rem);line-height:1.1;letter-spacing:-.025em}
body.crm .crm-puerta-form .entradilla{margin:.6rem 0 1.6rem;font-size:var(--letra-md);color:var(--ink-soft)}
body.crm .crm-puerta-form .campo input{min-height:50px;border-radius:var(--r-medio);background:var(--c-superficie-2)}
html.oscuro body.crm .crm-puerta-form .campo input{background:var(--tint)}
body.crm .crm-puerta-form .campo .ayuda{display:block;margin-top:.45rem;color:var(--gray);font-size:var(--letra-base)}
body.crm .crm-puerta-form .boton{min-height:50px;font-size:var(--letra-md);border-radius:var(--r-pildora)}
body.crm .crm-puerta-form .recado{border-radius:var(--r-medio)}
body.crm .crm-puerta-form .regresar{margin:1.4rem 0 0;font-size:var(--letra-base)}

/* 2. La puerta. */
body.crm .crm-puerta-cabeza .interior{ flex-wrap:nowrap }
body.crm .crm-puerta-cabeza .tema{ margin-left:0 }
@media (max-width:640px){
  body.crm .crm-puerta-cabeza .salidas{justify-content:flex-start; width:auto; margin-left:auto}
  body.crm .crm-puerta-caja{border-radius:var(--r-grande)}
  body.crm .crm-puerta-marca{gap:.8rem}
  body.crm .crm-puerta-marca ul{display:none}
  body.crm .crm-puerta-marca .lema{font-size:var(--letra-xl); display:none}
  body.crm .crm-puerta-cabeza .interior{ padding:.5rem 1rem; gap:.6rem }
  body.crm .crm-puerta-cabeza .logo img{ height:30px }
  body.crm .crm-puerta{ padding:0 0 2rem }

  /* La franja oscura se queda como un rótulo de una línea: el lema largo se
     esconde para que el saludo y la contraseña queden a la vista sin bajar. */
  body.crm .crm-puerta-marca{ padding:.9rem 1.3rem; flex-basis:100% }
  body.crm .crm-puerta-marca::before{ width:140px; height:140px; right:-60px; top:-70px }
  body.crm .crm-puerta-form{ padding:1.4rem 1.3rem 1.6rem }
  body.crm .crm-puerta-form h1{ font-size:var(--letra-2xl) }
  body.crm .crm-puerta-form .entradilla{ margin:.35rem 0 1.1rem; font-size:var(--letra-md) }
  body.crm .crm-puerta-form .recado{ padding:.7rem .9rem; font-size:var(--letra-base); margin-bottom:1rem }

  /* En el teléfono angosto el tema no cabe junto al logotipo; se cambia
     desde adentro del CRM, en la tarjeta de la cuenta. */
  body.crm .crm-puerta-cabeza .tema{ display:none }
}


/* ===========================================================================
   4. PIEZAS COMPARTIDAS · TÍTULOS, BLOQUES Y TARJETAS
   =========================================================================== */


/* --- Bloques -------------------------------------------------------------- */
.bloque{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-grande);
  box-shadow:var(--sombra-1); margin-bottom:1.6rem; overflow:hidden;
}
.bloque > h2{
  margin:0; padding:1rem 1.3rem; font-size:var(--letra-md); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:.6rem;
}
.bloque > h2 .apunte{ margin-left:auto; font-weight:400; font-size:var(--letra-sm); color:var(--gray) }
.bloque .cuerpo{ padding:1.3rem }
.bloque .cuerpo.sin-aire{ padding:0 }
.rejilla-2{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)) }

/* --- Títulos ---------------------------------------------------------------- */
body.crm h1{ font-size:var(--letra-3xl); font-weight:700; letter-spacing:-.025em; line-height:1.1 }
body.crm h2{ letter-spacing:-.01em }
body.crm .encabezado-crm{ margin-bottom:1.8rem }
body.crm .entradilla{ max-width:72ch }

/* En oscuro la sombra casi no se ve; el borde fino sigue haciendo el trabajo. */
html.oscuro body.crm .bloque,
html.oscuro body.crm .kpi,
html.oscuro body.crm .tarjeta{ border-color:var(--line) }
body.crm .bloque{ margin-bottom:1.8rem }
body.crm .grupo-busqueda{ margin:0 0 1.2rem; break-inside:avoid }
body.crm .bloque > h2{
  border-bottom:0; padding:1.25rem 1.5rem .55rem; font-size:var(--letra-lg); font-weight:700;
}
body.crm .bloque > h2 .apunte{ font-size:var(--letra-base) }
body.crm .bloque .cuerpo{ padding:1.1rem 1.5rem 1.5rem }
body.crm .bloque .cuerpo.sin-aire{ padding:0 }
body.crm .rejilla-2{ gap:1.8rem }

/* `.rejilla-2` pide columnas de 380 px como mínimo, y en un teléfono de 375 el
   contenido mide 335: los bloques se salían 24 px por la derecha y la página
   entera se deslizaba de lado. Venía de antes del rediseño; se notó al probar
   el menú en el teléfono. `min()` deja la columna en 380 cuando cabe y en el
   ancho disponible cuando no. */
body.crm .rejilla-2{ grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)) }
@media (max-width:900px){
  body.crm .bloque > h2 .apunte{ flex-basis:100%; margin-left:0; order:9 }
}


/* ===========================================================================
   5. PIEZAS COMPARTIDAS · TARJETAS DE CIFRA
   ---------------------------------------------------------------------------
   La .kpi normal, la protagonista, la oscura y la de ícono; «¿Cómo se calcula?».
   =========================================================================== */


/* --- Tarjetas de cifra ----------------------------------------------------- */
.tarjetas{
  display:grid; gap:.9rem; margin-bottom:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.kpi{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-grande);
  padding:1.1rem 1.2rem; box-shadow:var(--sombra-1);
  display:flex; flex-direction:column; gap:.15rem; text-decoration:none; color:inherit;
}
@media print{
  .bloque, .kpi{ box-shadow:none; break-inside:avoid }
}
a.kpi:hover{ border-color:var(--cyan); box-shadow:var(--sombra-3) }

/* --- Tarjetas: flotan en vez de dibujarse con borde ------------------------- */
body.crm .bloque,
body.crm .kpi,
body.crm .tarjeta{
  border-color:transparent; border-radius:var(--r-grande); box-shadow:var(--sombra-2);
}
.kpi .et{
  font-size:var(--letra-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray);
}
.kpi .cifra{
  font-size:var(--letra-2xl); font-weight:700; line-height:1.15; letter-spacing:-.02em;
  /* Las cifras se leen en columna, así que todos los dígitos deben ocupar lo
     mismo. Sin esto, un 1 angosto desalinea la coma de miles del renglón de
     abajo y comparar de un vistazo deja de funcionar. */
  font-variant-numeric:tabular-nums;
}
.kpi .cifra.chica{ font-size:var(--letra-xl) }
.kpi .cambio{ font-size:var(--letra-sm); font-weight:700 }
.kpi .cambio.bien{ color:var(--green-600) }
.kpi .cambio.mal{ color:var(--rojo) }
.kpi .cambio.neutro{ color:var(--gray) }
html.oscuro .kpi .cambio.bien{ color:var(--verde-txt) }
html.oscuro .kpi .cambio.mal{ color:var(--rojo-txt) }
.kpi .pie{ font-size:var(--letra-sm); color:var(--gray); line-height:1.4 }

/* Tarjeta que grita. Para el saldo en rojo y para el «no vas a llegar». */
.kpi.alerta{ border-color:var(--rojo); background:var(--c-error-fondo) }
.kpi.alerta .cifra{ color:var(--rojo) }
html.oscuro .kpi.alerta{ background:var(--rojo-bg); border-color:#6B3A32 }
html.oscuro .kpi.alerta .cifra{ color:var(--rojo-txt) }
.kpi.bien{ border-color:var(--green) }

/* --- Tarjetas de cifra ------------------------------------------------------ */
body.crm .tarjetas{ gap:1.1rem; margin-bottom:2rem }
body.crm .kpi{ padding:1.3rem 1.4rem 1.2rem; gap:.3rem; transition:box-shadow .18s ease, transform .18s ease }
body.crm a.kpi:hover{ border-color:transparent; box-shadow:var(--sombra-3); transform:translateY(-2px) }
html.oscuro body.crm a.kpi:hover{ border-color:var(--cyan) }
body.crm .kpi .et{ font-size:var(--letra-xs); letter-spacing:.09em; color:var(--et-txt) }
body.crm .kpi .cifra{ font-size:2.05rem; letter-spacing:-.03em; line-height:1.1; margin:.15rem 0 .1rem }
body.crm .kpi .cifra.chica{ font-size:var(--letra-xl) }
body.crm .kpi .pie{ font-size:var(--letra-sm) }

/* La tarjeta que grita: fondo de estado, sin borde rojo encima. */
body.crm .kpi.alerta{ background:var(--cr-bg); border-color:transparent; box-shadow:none }
body.crm .kpi.alerta .et, body.crm .kpi.alerta .pie{ color:var(--cr-txt) }
body.crm .kpi.alerta .cifra{ color:var(--cr-txt) }

/* La buena noticia: una tira verde arriba, no un borde completo. */
body.crm .kpi.bien{ border-color:transparent; box-shadow:inset 0 4px 0 var(--fam-dinero), var(--sombra-2) }

/* El renglón chico de una tarjeta de cifra se llama `.pie`, igual que el pie
   de página de portal.css, y heredaba de él el margen automático, el relleno
   y la raya de arriba: salía centrado y tachado por una línea. Venía de antes
   del rediseño; aquí se le quita lo que no es suyo. */
body.crm .kpi .pie{ max-width:none; margin:0; padding:0; border-top:0; line-height:1.4 }
body.crm .tarjetas.con-protagonista{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1.1rem;
}
body.crm .con-protagonista > .apoyo{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem;
}
body.crm .con-protagonista > .apoyo > :last-child:nth-child(odd){ grid-column:1 / -1 }
body.crm .kpi.protagonista{
  position:relative; overflow:hidden;
  background:var(--c-tinta); color:#fff; padding:1.6rem 1.7rem 1.4rem; gap:.55rem;
  box-shadow:var(--sombra-3);
}
html.oscuro body.crm .kpi.protagonista{ background:var(--c-sobre-color); border-color:rgba(63,208,238,.28) }

/* El aro verde de la esquina: el único adorno, y es el verde de la marca. */
body.crm .kpi.protagonista::before{
  content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px;
  border-radius:50%; border:34px solid rgba(125,193,14,.12); pointer-events:none;
}
body.crm .kpi.protagonista > *{ position:relative }
body.crm .kpi.protagonista .cabeza{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap }
body.crm .kpi.protagonista .et{ color:#9FB0BC }
body.crm .kpi.protagonista .cambio{
  margin-left:auto; font-size:var(--letra-sm); padding:.2rem .6rem; border-radius:var(--r-pildora);
  background:rgba(255,255,255,.08); color:#C9D4DC;
}
body.crm .kpi.protagonista .cambio.bien{ background:rgba(125,193,14,.18); color:#A3E52B }
body.crm .kpi.protagonista .cambio.mal { background:rgba(242,112,94,.18); color:#F7A79A }
body.crm .kpi.protagonista .cifra{ font-size:3.4rem; line-height:1; margin:.25rem 0 .35rem; color:#fff }
body.crm .kpi.protagonista .pie{ color:#C9D4DC; font-size:var(--letra-base) }
body.crm .pie-protagonista{
  display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-top:auto; padding-top:.5rem;
}
body.crm .kpi.protagonista .ir{
  margin-left:auto; color:#9FDCEA; font-weight:700; font-size:var(--letra-base); text-decoration:none;
}
body.crm .kpi.protagonista .ir:hover{ color:#fff; text-decoration:underline }

/* «¿Cómo se calcula?» — la explicación que antes vivía abierta en la pantalla.
   Plegada por omisión; el navegador se encarga de abrirla con teclado. */
body.crm details.como{ flex:1 1 16rem; font-size:var(--letra-base) }
body.crm details.como > summary{
  cursor:pointer; font-weight:700; color:#9FDCEA; list-style:none;
  display:inline-flex; align-items:center; gap:.4rem; min-height:1.75rem;
}
body.crm details.como > summary::-webkit-details-marker{ display:none }
body.crm details.como > summary::before{ content:"＋"; font-weight:700 }
body.crm details.como[open] > summary::before{ content:"－" }
body.crm details.como > summary:hover{ color:#fff }
body.crm details.como > summary:focus-visible{ outline:2px solid #3FD0EE; outline-offset:2px; border-radius:4px }
body.crm details.como p{ margin:.5rem 0 0; line-height:1.55; color:#C9D4DC; max-width:38rem }

/* Las tarjetas de cifra de todas las pantallas. */
body.crm .tarjetas .kpi{ padding:1.3rem 1.4rem 1.2rem; gap:.4rem; min-height:7.4rem }
body.crm .tarjetas .kpi .et{ font-size:var(--letra-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase }
body.crm .tarjetas .kpi.protagonista .cifra{ font-size:3.4rem }

/* La tarjeta oscura en fila. */
body.crm .kpi.oscura{
  position:relative; overflow:hidden; background:var(--c-tinta); color:#fff; border-color:transparent;
  box-shadow:var(--sombra-3);
}
html.oscuro body.crm .kpi.oscura{ background:var(--c-sobre-color); border-color:rgba(63,208,238,.28) }
body.crm .kpi.oscura::before{
  content:""; position:absolute; right:-46px; top:-46px; width:130px; height:130px;
  border-radius:50%; border:22px solid rgba(125,193,14,.12); pointer-events:none;
}
body.crm .kpi.oscura > *{ position:relative }
body.crm .kpi.oscura .cifra{ color:#fff }
body.crm .kpi.oscura .pie{ color:#C9D4DC }
body.crm .kpi.oscura.mal   .et{ color:#F7A79A }
body.crm .kpi.oscura.bien  .et{ color:#A3E52B }
body.crm .kpi.oscura.aviso .et{ color:#F5D77A }
body.crm .kpi.oscura.info  .et{ color:#9FDCEA }
body.crm a.kpi.oscura:hover{ box-shadow:var(--sombra-3) }
body.crm .barrita-oscura{ display:block; height:7px; border-radius:var(--r-pildora); background:rgba(255,255,255,.12); overflow:hidden; margin-top:.3rem }
body.crm .barrita-oscura > span{ display:block; height:100%; border-radius:var(--r-pildora); min-width:4px; background:#9FDCEA }
body.crm .kpi.oscura.mal   .barrita-oscura > span{ background:var(--c-error-punto) }
body.crm .kpi.oscura.bien  .barrita-oscura > span{ background:var(--c-verde) }
body.crm .kpi.oscura.aviso .barrita-oscura > span{ background:var(--c-aviso-punto) }

/* --- Una sola alarma por pantalla ------------------------------------------
   Si la pantalla ya tiene su tarjeta oscura, las demás alertas dejan el fondo
   rosa y se quedan solo con la cifra en rojo: siguen avisando, sin competir
   con la que manda. */
body.crm .tarjetas:has(.kpi.oscura, .kpi.protagonista) .kpi.alerta{
  background:var(--white); box-shadow:var(--sombra-2);
}
html.oscuro body.crm .tarjetas:has(.kpi.oscura, .kpi.protagonista) .kpi.alerta{ border-color:var(--line) }
body.crm .tarjetas:has(.kpi.oscura, .kpi.protagonista) .kpi.alerta .et{ color:var(--et-txt) }
body.crm .tarjetas:has(.kpi.oscura, .kpi.protagonista) .kpi.alerta .pie{ color:var(--ink-soft) }

/* --- Las de apoyo junto a la protagonista no se estiran huecas -------------- */
body.crm .con-protagonista > .apoyo{ align-content:stretch }
body.crm .con-protagonista > .apoyo > .kpi{ justify-content:center }
body.crm .apoyo .minigrafica{ height:38px }
body.crm .ico.naranja{ background:var(--c-naranja-tinte); color:var(--c-naranja-medio) }
html.oscuro body.crm .ico.naranja{ background:var(--c-naranja-tinte); color:var(--c-naranja-hondo) }

/* --- La tarjeta de cifra con ícono ---------------------------------------- */
body.crm .kpi.con-icono{ flex-direction:row; align-items:flex-start; gap:.95rem }
body.crm .kpi.con-icono .ico{
  width:42px; height:42px; border-radius:var(--r-medio); flex:none; display:flex; align-items:center;
  justify-content:center; background:var(--t-bg); color:var(--t-tx);
}
body.crm .kpi.con-icono .txt{ display:flex; flex-direction:column; gap:.25rem; min-width:0;}
body.crm .kpi.con-icono .cifra small{ font-size:.5em; font-weight:700; color:var(--gray); letter-spacing:0 }
body.crm .kpi.con-icono.cifra-roja .cifra{ color:var(--cr-txt) }
body.crm .barra-tono{ display:block; height:7px; border-radius:var(--r-pildora); background:var(--ne-bg); overflow:hidden; margin-top:.35rem }
body.crm .barra-tono > span{ display:block; height:100%; border-radius:var(--r-pildora); background:var(--t-fu) }

/* Las tarjetas rojas que las pantallas dibujan a mano (`<div class="kpi
   alerta">`, una docena) también llevan su ícono: un triángulo de aviso arriba,
   del mismo tamaño que el de `tarjetaIcono()`. Va con máscara para no tocar
   esas doce pantallas. */
body.crm .kpi.alerta:not(.con-icono)::before{
  content:""; width:42px; height:42px; border-radius:var(--r-medio); margin-bottom:.35rem; flex:none;
  background:var(--cr-txt) no-repeat center / 20px 20px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
body.crm .arreglo.info{ background:var(--c-info-fondo) }
html.oscuro body.crm .arreglo.info{ background:var(--cian-bg) }
body.crm .arreglo.info .boton{ color:var(--c-cian-medio); border-color:var(--c-cian-borde) }
html.oscuro body.crm .arreglo.info .boton{ color:var(--c-cian); border-color:var(--c-cian-borde) }
body.crm .arreglo .extra{ display:flex; gap:.35rem; flex-wrap:wrap }
@media (min-width:901px) and (max-width:1380px){
  /* Cinco tarjetas con la oscura (que ocupa dos lugares) son seis lugares. En
     una laptop de 1280 caben cinco por renglón y la última quedaba sola, con
     todo el ancho vacío al lado (Prospectos y Cotizaciones). Ahí se acomodan en
     dos renglones de tres: la oscura y una, y luego tres. */
  body.crm .crm-cuerpo .tarjetas:has(> .kpi.oscura):has(> :nth-child(5):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:1180px){
  body.crm .tarjetas.con-protagonista{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:900px){
  body.crm .crm-cuerpo .con-protagonista > .apoyo{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem }
  body.crm .tarjetas .kpi.protagonista .cifra{ font-size:2.6rem; overflow-wrap:anywhere }

  /* La tarjeta oscura va primero y a lo ancho aunque en el código venga en
     medio (Clientes la tenía segunda, a media pantalla). Si las de apoyo son
     nones, la última llena su renglón en vez de quedar sola con un hueco. */
  body.crm .crm-cuerpo .tarjetas > .kpi.oscura,
  body.crm .cli-cifras-fila > .cli-kpi.oscuro{ order:-1; grid-column:1 / -1 }
  body.crm .crm-cuerpo .tarjetas:has(> .kpi.oscura):has(> :nth-child(even):last-child) > .kpi:not(.oscura):last-child,
  body.crm .cli-cifras-fila:has(> .oscuro):has(> :nth-child(even):last-child) > .cli-kpi:not(.oscuro):last-child{ grid-column:1 / -1 }
}
@media (max-width:640px){
  /* En el teléfono las cifras se apilan de una en una; a 2rem cada tarjeta
     ocupa media pantalla. Se respeta el tamaño que ya traía este archivo. */
  body.crm .kpi .cifra{ font-size:1.6rem }
  body.crm h1{ font-size:var(--letra-2xl) }
  body.crm .con-protagonista > .apoyo{ grid-template-columns:minmax(0,1fr) }
  body.crm .kpi.protagonista .cifra{ font-size:2.6rem }
}
body.crm .tarjetas .kpi .cifra{ font-size:var(--letra-3xl); font-weight:700; letter-spacing:-.035em; line-height:1.05 }
@media (max-width:640px){
  body.crm .tarjetas .kpi{ min-height:0; padding:1rem 1.05rem }

  /* En el teléfono, las cifras de dos en dos y la oscura a todo lo ancho. */
  body.crm .crm-cuerpo .tarjetas:not(.con-protagonista){ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem }
}
@media (max-width:900px){
  /* La oscura con cifras de apoyo (Facturación, Finanzas, Impuestos, Nómina,
     Inventario, Personal…) salía a media pantalla junto a sus apoyos y cortaba
     la cifra («$222,5…»): la regla de las seis tarjetas de laptop
     (`.crm-cuerpo .tarjetas:not(.pend-kpis)`) le ganaba por peso a la del
     teléfono. Aquí: la oscura arriba a todo lo ancho, los apoyos de dos en dos. */
  body.crm .crm-cuerpo .tarjetas.con-protagonista{ grid-template-columns:minmax(0,1fr); gap:.75rem }
}
@media (max-width:640px){
  body.crm .tarjetas > .kpi.oscura{ grid-column:1 / -1 }
  body.crm .tarjetas .kpi .et{ font-size:var(--letra-xs) }
  body.crm .tarjetas .kpi .cifra{ font-size:1.55rem }
  body.crm .tarjetas .kpi.oscura .cifra{ font-size:2.1rem }
}
@media (prefers-reduced-motion:reduce){
  body.crm .kpi, body.crm a.kpi:hover{ transition:none; transform:none }
}
@media print{
  body.crm .kpi.protagonista{ background:none; color:inherit; border:1px solid var(--c-tenue) }
  body.crm .kpi.protagonista .cifra{ color:inherit }
  body.crm .kpi.protagonista::before{ display:none }
  body.crm .kpi.oscura{ background:none; color:inherit; border:1px solid var(--c-tenue) }
  body.crm .kpi.oscura .cifra, body.crm .kpi.oscura .pie{ color:inherit }
  body.crm .kpi.oscura::before{ display:none }
}
@media (min-width:901px){
  /* En computadora la oscura ocupa dos columnas: es la protagonista, y en las
     pantallas con seis o siete cifras quedaba de 160 px con el texto apretado.
     En el teléfono no: dos columnas en una rejilla de una se salen de la caja. */
  body.crm .tarjetas > .kpi.oscura{ grid-column:span 2 }
  body.crm .tarjetas > .kpi.oscura .cifra{ font-size:2.8rem }
}


/* ===========================================================================
   6. PIEZAS COMPARTIDAS · BOTONES
   =========================================================================== */


/* Un botón de fila: el normal ocupa media celda y empuja la tabla a lo ancho. */
.boton.chica{ padding:.28rem .7rem; font-size:var(--letra-sm) }

/* Al imprimir no aporta nada y gasta un renglón de la hoja. */

/* En el teléfono, el nivel se va: lo que no puede faltar es dónde estás y cómo
   salir. */

/* En oscuro, `--ink` es CLARO (es el color de la letra), así que usar la misma
   regla dejaría letra blanca sobre fondo blanco. Se ancla a un tono fijo, más
   oscuro que el fondo de la página, para que la franja siga siendo lo que más
   contrasta de la pantalla. */

/* El botón de cerrar va dentro de un <form> porque cerrar CAMBIA algo, y en
   este portal todo lo que cambia algo viaja por POST con su token. Se disfraza
   de liga para que no compita visualmente con los botones de verdad de la
   pantalla — pero es un botón, con su foco y su tecla Enter. */

/* ---------------------------------------------------------------------------
   La franja de administración
   ---------------------------------------------------------------------------
   Existe para que nunca haya duda de en cuál de los dos sistemas estás. El
   portal y el CRM comparten logotipo, colores y tipografía a propósito —son la
   misma casa— y ese parecido, que en la marca es una virtud, al navegar es un
   riesgo: en el portal se le contesta a un cliente, aquí se toca la nómina.

   Por eso la señal NO es un color de marca sino el contraste más fuerte que
   hay en la paleta, arriba de todo, antes que nada. Se lee antes de que el ojo
   llegue al logotipo.

   Aquí vive también «Cerrar la administración», y no junto a «Salir» del
   portal, precisamente para que no se confundan: son dos cosas distintas y
   ahora están en dos lugares distintos.
   ------------------------------------------------------------------------ */

/* --- El botón de una acción que no se deshace -------------------------------
   Rojo y hueco, no rojo y sólido. Un botón rojo sólido compite con el de
   guardar y se convierte en lo primero que ve el ojo en la pantalla; hueco se
   lee como advertencia y hay que ir a buscarlo. Es el único de todo el CRM
   que borra algo. */
.boton.peligro{
  background:transparent; color:var(--rojo); border:1px solid var(--rojo);
}
.boton.peligro:hover{ background:var(--rojo); color:#fff }
html.oscuro .boton.peligro{ color:var(--rojo) }
html.oscuro .boton.peligro:hover{ color:var(--c-fondo) }

/* --- Botones ---------------------------------------------------------------- */
body.crm .boton{ box-shadow:0 8px 18px -12px color-mix(in srgb, color-mix(in oklab, var(--c-verde) 71%, #000) 75%, transparent) }
html:not(.oscuro) body.crm .boton{ color:var(--c-sobre-color) }

/* En oscuro portal.css pone #0E1418 fijo (html.oscuro .boton, 0-2-1). Este empata
   esa fuerza y gana por ir después; no alcanza a .secundario, .peligro ni
   .barra-guardar .boton.guardar, que pesan más (08/10/2026). */
html.oscuro :where(body.crm) .boton{ color:var(--c-sobre-color) }
body.crm .boton.secundario{ box-shadow:none; background:var(--white) }
html:not(.oscuro) body.crm .boton.secundario{ color:var(--ink-soft); border-color:var(--c-borde-fuerte) }
body.crm .boton.peligro{ box-shadow:none }
html:not(.oscuro) body.crm .boton.peligro{ color:var(--rojo) }
html:not(.oscuro) body.crm .boton.peligro:hover{ color:#fff }

/* El botón principal toma el color de la familia de la pantalla (índigo en
   Comercial), como «+ Nuevo cliente» en la propuesta. */
body.crm .boton.familia{ background:var(--fam-punto,var(--c-cian)); border-color:transparent; color:var(--c-sobre-color) }
body.crm.pag-hoy .boton.familia,
body.crm.pag-dinero .boton.familia,
body.crm.pag-operacion .boton.familia{ color:var(--c-sobre-color) }

/* Comercial y Gente: letra blanca, así que un tono más oscuro que su punto (6/10/2026: daba 3.9:1). */
:root body.crm.pag-comercial .boton.familia{ background:var(--morado-fuerte); color:#fff }
:root body.crm.pag-gente .boton.familia{ background:var(--rosa-fuerte); color:#fff }
body.crm .boton.familia:hover{ filter:brightness(.93) }

/* --- «Cargar ▾»: el menú de las acciones que se usan poco ------------------- */
body.crm .menu-mas{ position:relative }
body.crm .menu-mas > summary{ list-style:none; cursor:pointer }
body.crm .menu-mas > summary::-webkit-details-marker{ display:none }
body.crm .menu-mas-panel{
  position:absolute; right:0; top:calc(100% + .4rem); z-index:70; min-width:16rem;
  display:flex; flex-direction:column; padding:.4rem; border-radius:var(--r-medio);
  background:var(--c-superficie); box-shadow:var(--sombra-3);
}
html.oscuro body.crm .menu-mas-panel{ background:var(--c-superficie-2); box-shadow:var(--sombra-3) }
body.crm .menu-mas-panel a{
  padding:.55rem .75rem; border-radius:var(--r-medio); font-weight:700; font-size:var(--letra-base);
  color:var(--c-tinta); text-decoration:none; white-space:nowrap;
}
html.oscuro body.crm .menu-mas-panel a{ color:var(--c-tinta) }
body.crm .menu-mas-panel a:hover{ background:var(--c-fondo) }
html.oscuro body.crm .menu-mas-panel a:hover{ background:rgba(255,255,255,.07) }
@media (max-width:900px){
  /* Que todo lo que se toca mida al menos 44 px (la guía de Apple): las
     flechas del mes, la lista de meses, los botones secundarios y los
     «¿Cómo se calcula?» medían 21–32 px. */
  body.crm .crm-cuerpo .periodo-nav{ display:flex; align-items:center; gap:.4rem; width:100% }
  body.crm .crm-cuerpo .periodo-nav > a{
    flex:none; display:inline-flex; align-items:center; justify-content:center;
    min-width:2.75rem; min-height:2.75rem;
  }
  body.crm .crm-cuerpo .periodo-nav > form{ flex:1; min-width:0 }
  body.crm .crm-cuerpo .periodo-nav select{ width:100%; min-height:2.75rem }
  body.crm details.como > summary{ min-height:2.75rem; display:flex; align-items:center; gap:.35rem }
}


/* ===========================================================================
   7. PIEZAS COMPARTIDAS · ETIQUETAS, PASTILLAS, TONOS Y AVATAR
   =========================================================================== */


/* --- Etiquetas propias del CRM -------------------------------------------- */
.etiqueta{
  display:inline-block; padding:.15rem .55rem; border-radius:var(--r-pildora);
  font-size:var(--letra-xs); font-weight:700; background:var(--c-fondo); color:var(--ink-soft);
}
.etiqueta.al-dia   { background:var(--c-ok-fondo); color:var(--c-ok-texto) }
.etiqueta.vence    { background:var(--c-aviso-fondo); color:var(--c-aviso-texto) }
.etiqueta.vencido  { background:var(--c-error-fondo); color:var(--c-error-texto) }
.etiqueta.estimado { background:var(--c-fondo); color:var(--gray); font-style:italic }
html.oscuro .etiqueta.al-dia  { background:var(--verde-bg); color:var(--verde-txt) }
html.oscuro .etiqueta.vence   { background:var(--ambar-bg); color:var(--ambar-txt) }
html.oscuro .etiqueta.vencido { background:var(--rojo-bg);  color:var(--rojo-txt) }

/* --- Etiquetas: los cuatro estados ------------------------------------------ */
body.crm .etiqueta{
  padding:.24rem .68rem; font-size:var(--letra-xs); letter-spacing:.01em;
  background:var(--ne-bg); color:var(--ne-txt);
}
body.crm .etiqueta.al-dia,
body.crm .etiqueta.concluida,
body.crm .etiqueta.preferido,
body.crm .etiqueta.doc-vigente{ background:var(--ok-bg); color:var(--ok-txt) }
body.crm .etiqueta.vence,
body.crm .etiqueta.pronto,
body.crm .etiqueta.cotizada,
body.crm .etiqueta.provisional,
body.crm .etiqueta.doc-porvencer{ background:var(--at-bg); color:var(--at-txt) }
body.crm .etiqueta.vencido,
body.crm .etiqueta.urgente,
body.crm .etiqueta.en_revision,
body.crm .etiqueta.cancelada,
body.crm .etiqueta.doc-vencido{ background:var(--cr-bg); color:var(--cr-txt) }
body.crm .etiqueta.recibida{ background:var(--in-bg); color:var(--in-txt) }
body.crm .etiqueta.estimado{ background:var(--ne-bg); color:var(--et-txt) }

/* Pastillas de color: estados y servicios. */
body.crm .chip{
  display:inline-flex; align-items:center; padding:.22rem .65rem; border-radius:var(--r-pildora);
  font-size:var(--letra-sm); font-weight:700; white-space:nowrap; line-height:1.3;
}
body.crm .chip.bien    { background:var(--c-ok-fondo); color:var(--c-ok-texto) }
body.crm .chip.mal     { background:var(--c-error-fondo); color:var(--c-error-texto) }
body.crm .chip.atencion{ background:var(--c-aviso-fondo); color:var(--c-aviso-texto) }
body.crm .chip.gris    { background:var(--c-fondo); color:var(--c-tinta-suave) }
body.crm .chip.verde   { background:var(--c-ok-fondo); color:var(--c-ok-texto) }
body.crm .chip.cian    { background:var(--c-cian-tinte); color:var(--c-cian-medio) }
body.crm .chip.naranja { background:var(--c-naranja-tinte); color:var(--c-naranja-medio) }
body.crm .chip.indigo  { background:var(--c-morado-tinte); color:var(--c-morado-medio) }
body.crm .chip.orquidea{ background:var(--c-rosa-tinte); color:var(--c-rosa-medio) }
html.oscuro body.crm .chip.bien, html.oscuro body.crm .chip.verde{ background:var(--c-verde-tinte); color:var(--c-ok-texto) }
html.oscuro body.crm .chip.mal     { background:var(--c-error-fondo); color:var(--c-error-texto) }
html.oscuro body.crm .chip.atencion{ background:var(--c-aviso-fondo); color:var(--c-aviso-texto) }
html.oscuro body.crm .chip.gris    { background:var(--c-superficie-2); color:var(--c-tinta-suave) }
html.oscuro body.crm .chip.cian    { background:var(--c-cian-tinte); color:var(--c-cian-hondo) }
html.oscuro body.crm .chip.naranja { background:var(--c-naranja-tinte); color:var(--c-naranja-hondo) }
html.oscuro body.crm .chip.indigo  { background:var(--c-morado-tinte); color:var(--c-morado-hondo) }
html.oscuro body.crm .chip.orquidea{ background:var(--c-rosa-tinte); color:var(--c-rosa-hondo) }
body.crm .tono-morado { --t-bg:var(--c-rosa-tinte); --t-tx:var(--c-rosa-medio); --t-fu:var(--c-rosa) }
body.crm .tono-cian   { --t-bg:var(--c-cian-tinte); --t-tx:var(--c-cian-medio); --t-fu:var(--c-cian) }
body.crm .tono-verde  { --t-bg:var(--c-ok-fondo); --t-tx:var(--c-ok-texto); --t-fu:var(--c-verde) }
body.crm .tono-naranja{ --t-bg:var(--c-naranja-tinte); --t-tx:var(--c-naranja-medio); --t-fu:var(--c-naranja) }
body.crm .tono-indigo { --t-bg:var(--c-morado-tinte); --t-tx:var(--c-morado-medio); --t-fu:var(--c-morado) }
body.crm .tono-azul   { --t-bg:var(--c-info-fondo); --t-tx:var(--c-info-texto); --t-fu:#3B82E0 }
body.crm .tono-gris   { --t-bg:var(--c-fondo); --t-tx:var(--c-tinta-suave); --t-fu:var(--c-tenue) }
body.crm .tono-rojo   { --t-bg:var(--c-error-fondo); --t-tx:var(--c-error-texto); --t-fu:var(--c-error-punto) }
body.crm .tono-ambar  { --t-bg:var(--c-aviso-fondo); --t-tx:var(--c-aviso-texto); --t-fu:var(--c-aviso-punto) }
html.oscuro body.crm .tono-morado { --t-bg:var(--c-rosa-tinte); --t-tx:var(--c-rosa-hondo); --t-fu:var(--c-rosa) }
html.oscuro body.crm .tono-cian   { --t-bg:var(--c-cian-tinte); --t-tx:var(--c-cian-hondo); --t-fu:var(--c-cian) }
html.oscuro body.crm .tono-verde  { --t-bg:var(--c-ok-fondo); --t-tx:var(--c-ok-texto); --t-fu:var(--c-verde) }
html.oscuro body.crm .tono-naranja{ --t-bg:var(--c-naranja-tinte); --t-tx:var(--c-naranja-hondo); --t-fu:var(--c-naranja) }
html.oscuro body.crm .tono-indigo { --t-bg:var(--c-morado-tinte); --t-tx:var(--c-morado-hondo); --t-fu:var(--c-morado) }
html.oscuro body.crm .tono-azul   { --t-bg:var(--c-info-fondo); --t-tx:var(--c-info-texto); --t-fu:#5C9EF0 }
html.oscuro body.crm .tono-gris   { --t-bg:var(--c-superficie-2); --t-tx:var(--c-tinta-suave); --t-fu:var(--c-tenue) }
html.oscuro body.crm .tono-rojo   { --t-bg:var(--c-error-fondo); --t-tx:var(--c-error-texto); --t-fu:var(--c-error-punto) }
html.oscuro body.crm .tono-ambar  { --t-bg:var(--c-aviso-fondo); --t-tx:var(--c-aviso-texto); --t-fu:var(--c-aviso-punto) }
body.crm .icono{ width:20px; height:20px; flex:none }

/* --- La pastilla ---------------------------------------------------------- */
body.crm .pastilla{
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  font-size:var(--letra-xs); font-weight:700; line-height:1.2; padding:.28rem .65rem; border-radius:var(--r-pildora);
  background:var(--t-bg); color:var(--t-tx);
}

/* --- El avatar ------------------------------------------------------------ */
body.crm .avatar-crm{
  width:46px; height:46px; border-radius:50%; flex:none; display:inline-flex; align-items:center;
  justify-content:center; font-weight:900; font-size:var(--letra-md); letter-spacing:.02em;
  background:var(--t-bg); color:var(--t-tx);
}
body.crm .avatar-crm.chico{ width:34px; height:34px; font-size:var(--letra-xs) }
body.crm .aviso-linea.verde{ background:var(--ok-bg); color:var(--ok-txt) }
body.crm .txt-ambar { color:var(--at-txt) }
body.crm .txt-morado{ color:var(--c-rosa-medio) }
html.oscuro body.crm .txt-morado{ color:var(--c-rosa-hondo) }
body.crm .leyenda-estatus span{
  display:inline-flex; align-items:center; min-height:30px; padding:0 .8rem; border-radius:var(--r-pildora);
  font-size:var(--letra-sm); font-weight:700; background:var(--t-bg); color:var(--t-tx);
}


/* ===========================================================================
   8. PIEZAS COMPARTIDAS · TABLAS
   =========================================================================== */


/* --- Tablas ---------------------------------------------------------------
   Las tablas anchas se desplazan DENTRO de su bloque. Si no, la página entera
   se desplaza en horizontal y en el teléfono se pierde la navegación. */
.tabla-marco{ overflow-x:auto }
table.tabla{ width:100%; border-collapse:collapse; font-size:var(--letra-base) }
table.tabla th, table.tabla td{
  padding:.6rem .85rem; text-align:left; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.tabla th{
  font-size:var(--letra-xs); text-transform:uppercase; letter-spacing:.05em;
  color:var(--gray); background:var(--tint); font-weight:700;
  position:sticky; top:0; z-index:1;
}
table.tabla td.num, table.tabla th.num{ text-align:right; font-variant-numeric:tabular-nums }
table.tabla td.ancho{ white-space:normal; min-width:16rem }
table.tabla tbody tr:hover{ background:var(--tint) }
table.tabla tr.total td{ font-weight:700; background:var(--tint); border-top:2px solid var(--line) }
table.tabla td.neg{ color:var(--rojo) }
html.oscuro table.tabla td.neg{ color:var(--rojo-txt) }
table.tabla td.pos{ color:var(--green-600) }
html.oscuro table.tabla td.pos{ color:var(--verde-txt) }
table.tabla .sec td{
  background:var(--tint); font-weight:700; font-size:var(--letra-sm);
  text-transform:uppercase; letter-spacing:.05em; color:var(--gray);
}

/* --- Celda que puede crecer sin límite ------------------------------------
   Un concepto de factura llega a los 60 caracteres y, con `white-space:nowrap`
   en toda la tabla, estira el ancho hasta que la tabla entera necesita scroll.
   Se le pone tope y se corta con puntos suspensivos; el texto completo se lee
   en el `title` y en la ficha del documento. */
table.tabla td.celda-larga{
  /* 19rem (04/10/2026): con 24 la tabla de ingresos de Movimientos medía
     70 px más que la pantalla y la columna «Estatus» quedaba cortada. */
  max-width:19rem; overflow:hidden; text-overflow:ellipsis;
}
table.tabla td.celda-larga .apunte{
  display:block; overflow:hidden; text-overflow:ellipsis;
}

/* --- Tablas: más aire, menos rayas ----------------------------------------- */
body.crm table.tabla th{
  background:var(--white); color:var(--et-txt);
  font-size:var(--letra-xs); letter-spacing:.08em; padding:.85rem 1rem;
}
body.crm table.tabla td{ padding:.8rem 1rem }
html:not(.oscuro) body.crm table.tabla td{ border-bottom-color:var(--c-borde) }
html:not(.oscuro) body.crm table.tabla tbody tr:hover{ background:var(--c-superficie-2) }
body.crm table.tabla tr.total td{ background:var(--fondo-crm); border-top-color:var(--line) }
body.crm table.tabla .sec td{ background:var(--fondo-crm); color:var(--et-txt) }
html:not(.oscuro) body.crm table.tabla td.neg{ color:var(--cr-txt) }
html:not(.oscuro) body.crm table.tabla td.pos{ color:var(--ok-txt) }
body.crm .nota-bloque{ background:var(--fondo-crm); border-top:0; padding:.95rem 1.5rem }
@media (max-width:900px){
  /* Las tablas que no caben a lo ancho se vuelven tarjetas (el script
     `tablasMovil` de `pieCrm()` les pone la clase y la etiqueta de cada dato
     sacada del encabezado). En Cuentas, por ejemplo, el saldo de hoy quedaba
     escondido a la derecha. Las tablas que sí caben no se tocan. */
  body.crm table.tabla.tabla-tarjetas,
  body.crm table.tabla.tabla-tarjetas > tbody,
  body.crm table.tabla.tabla-tarjetas > tfoot,
  body.crm table.tabla.tabla-tarjetas tr,
  body.crm table.tabla.tabla-tarjetas td{ display:block; width:auto; min-width:0; max-width:none }
  body.crm table.tabla.tabla-tarjetas > thead{ display:none }
  body.crm table.tabla.tabla-tarjetas tr{
    background:var(--white); border:1px solid var(--line); border-radius:var(--r-medio);
    padding:.55rem .95rem; margin:0 0 .6rem;
  }
  body.crm .tabla-marco:has(> table.tabla-tarjetas){ overflow:visible; padding:0 1rem }
  body.crm table.tabla.tabla-tarjetas td{
    display:flex; justify-content:space-between; align-items:baseline; gap:.4rem 1rem;
    padding:.32rem 0; border:0; white-space:normal; text-align:right;
  }
  body.crm table.tabla.tabla-tarjetas td::before{
    content:attr(data-et); flex:none; max-width:45%; text-align:left;
    font-size:var(--letra-xs); font-weight:600; color:var(--et-txt);
  }
  body.crm table.tabla.tabla-tarjetas td[data-et=""]::before{ content:none }
  body.crm table.tabla.tabla-tarjetas td[data-et=""]{ justify-content:flex-end }
  body.crm table.tabla.tabla-tarjetas td:empty{ display:none }
  body.crm table.tabla.tabla-tarjetas .td-valor{ min-width:0; overflow-wrap:anywhere }
  body.crm table.tabla.tabla-tarjetas td.td-vacia{ display:none }

  /* Un texto largo (un concepto, una descripción) a la derecha se leía en
     escalera: va abajo de su etiqueta, alineado a la izquierda. */
  body.crm table.tabla.tabla-tarjetas td.td-larga{ display:block; text-align:left }
  body.crm table.tabla.tabla-tarjetas td.td-larga::before{ display:block; max-width:none; margin-bottom:.15rem }

  /* El primer dato es el título de la tarjeta (salvo que sea una casilla). */
  body.crm table.tabla.tabla-tarjetas td:first-child:not(:has(> input:only-child)){
    display:block; text-align:left; font-size:var(--letra-md); padding:.2rem 0 .5rem;
    margin-bottom:.25rem; border-bottom:1px solid var(--line);
  }
  body.crm table.tabla.tabla-tarjetas td:first-child:not(:has(> input:only-child))::before{ content:none }
  body.crm table.tabla.tabla-tarjetas tr.total{ background:var(--fondo-crm) }
  body.crm table.tabla.tabla-tarjetas tr.total td{ background:none; border:0; font-size:var(--letra-md) }
  body.crm table.tabla.tabla-tarjetas td input[type=checkbox]{ width:1.4rem; height:1.4rem }
  body.crm table.tabla.tabla-tarjetas td a:only-child{ min-height:2.75rem; display:inline-flex; align-items:center }
}


/* ===========================================================================
   9. PIEZAS COMPARTIDAS · GRÁFICAS, BARRAS Y LEYENDAS
   =========================================================================== */


/* --- Barra dentro de una celda -------------------------------------------
   Una barra de proporción pegada al número. Vale más que una gráfica aparte:
   se lee en el mismo movimiento de ojos que el dato. */
.barrita{ display:block; height:4px; border-radius:2px; background:var(--cyan); margin-top:.3rem }
.barrita.verde{ background:var(--green) }
.barrita.roja{ background:var(--rojo) }
.barrita.gris{ background:var(--line) }

/* --- Gráficas SVG --------------------------------------------------------- */
.grafica{ display:block; width:100%; height:auto }
.grafica text{ font-family:var(--font); fill:var(--gray) }
.grafica .eje{ stroke:var(--line); stroke-width:1 }
.grafica .cero{ stroke:var(--gray); stroke-width:1; stroke-dasharray:3 3 }
.grafica .barra-ing{ fill:var(--cyan) }
.grafica .barra-egr{ fill:var(--gray); opacity:.55 }
.grafica .linea{ fill:none; stroke:var(--green); stroke-width:2.5;
                 stroke-linejoin:round; stroke-linecap:round }
.grafica .area{ fill:var(--cyan); opacity:.10 }
.grafica .punto{ fill:var(--green) }
.grafica .punto.malo{ fill:var(--rojo) }
.grafica .banda-mala{ fill:var(--rojo); opacity:.07 }

/* --- Leyenda -------------------------------------------------------------- */
.leyenda{ display:flex; gap:1.1rem; flex-wrap:wrap; font-size:var(--letra-sm); color:var(--gray);
          margin-top:.6rem }
.leyenda span{ display:inline-flex; align-items:center; gap:.35rem }
.leyenda i{ width:.75rem; height:.75rem; border-radius:3px; display:inline-block }

/* Barras dentro de las celdas: más gruesas y redondas, para que se vean. */
body.crm .barrita{ height:6px; border-radius:var(--r-pildora) }

/* Gráficas: el gasto en gris claro sólido, no gris transparente. */
html:not(.oscuro) body.crm .grafica .barra-egr{ fill:#C9D3DB; opacity:1 }

/* --- La barra de «en qué se va» ------------------------------------------- */
body.crm .reparto-barra{ display:flex; gap:3px; height:14px; border-radius:var(--r-pildora); overflow:hidden }
body.crm .reparto-barra > span{ background:var(--t-fu); min-width:4px }
body.crm .reparto-leyenda{ list-style:none; margin:0; padding:0 }
body.crm .reparto-leyenda i{ width:10px; height:10px; border-radius:3px; background:var(--t-fu); flex:none }

/* En la tarjeta oscura: la leyenda en columnas, la cifra grande abajo. */
body.crm .reparto.en-columnas{ margin-top:.6rem }
body.crm .reparto.en-columnas .reparto-leyenda{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr)); gap:.8rem; margin-top:.9rem;
}
body.crm .reparto.en-columnas li{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:.45rem; font-size:var(--letra-sm); color:#B9C4CC }
body.crm .reparto.en-columnas li i{ border-radius:50% }
body.crm .reparto.en-columnas li strong{ grid-column:1 / -1; color:#fff; font-size:var(--letra-lg); margin-top:.15rem }

/* En un bloque blanco: renglones con monto y porcentaje. */
body.crm .reparto.en-renglones .reparto-barra{ height:18px; margin:.3rem 0 1rem }
body.crm .reparto.en-renglones li{
  display:flex; align-items:center; gap:.7rem; padding:.55rem 0; border-top:1px solid var(--line); font-size:var(--letra-md);
}
body.crm .reparto.en-renglones li:first-child{ border-top:0 }
body.crm .reparto.en-renglones .nombre{ flex:1; min-width:0 }
body.crm .reparto.en-renglones .pct{ width:3.2rem; text-align:right; color:var(--gray); font-size:var(--letra-base) }

/* --- Barras por renglón (qué cliente se lleva cuánto) --------------------- */
body.crm .barras-renglon{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.95rem }
body.crm .barras-renglon .fila{ display:flex; justify-content:space-between; gap:.8rem; font-size:var(--letra-base) }
body.crm .barras-renglon .fila .apunte{ font-size:var(--letra-sm) }
body.crm .barras-renglon .barra-tono{ height:10px; margin-top:.4rem }
body.crm .titulo-seccion{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 1rem }
body.crm .titulo-seccion h2{ margin:0; font-size:var(--letra-xl) }

/* --- La barra con leyenda en una línea (encima de una tabla) -------------- */
body.crm .reparto.en-linea .reparto-barra{ height:12px }
body.crm .reparto.en-linea .reparto-leyenda{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.7rem }
body.crm .reparto.en-linea li{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--letra-sm); color:var(--ink-soft) }
body.crm .reparto.en-linea li i{ border-radius:50% }
body.crm .reparto.en-linea li strong{ color:var(--ink) }
@media (max-width:900px){
  /* Las gráficas de doce meses a 340 px tenían letras de 4 px. Ahora tienen un
     ancho mínimo legible y se deslizan de lado; arrancan del lado derecho, que
     es el mes más reciente (el truco de `direction`: sin JS). */
  body.crm .cuerpo:has(> svg.grafica),
  body.crm .bloque:has(> svg.grafica){ overflow-x:auto; direction:rtl; scrollbar-width:thin }
  body.crm .cuerpo:has(> svg.grafica) > *,
  body.crm .bloque:has(> svg.grafica) > *{ direction:ltr }
  body.crm svg.grafica{ min-width:34rem }
}
@media (max-width:640px){
  body.crm .kpi.con-icono .ico{ width:36px; height:36px; border-radius:var(--r-medio) }
}


/* ===========================================================================
   10. PIEZAS COMPARTIDAS · FILTROS Y PESTAÑAS INTERNAS
   =========================================================================== */


/* Pestañas de filtro de un listado: «Todas (12) · Borrador (3) · Enviada (7)».

   A diferencia de `.periodo-nav`, cada pestaña se ancha según lo que dice y se
   pasa al siguiente renglón cuando ya no cabe, que es lo que tiene que pasar
   cuando el listado tiene seis estatus y la pantalla es un teléfono. */
.filtros{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:var(--letra-base) }
.filtros a{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:.35rem .85rem; border:1px solid var(--line); border-radius:var(--r-pildora);
  text-decoration:none; color:var(--ink-soft); background:var(--white);
}
.filtros a:hover{ border-color:var(--cyan); color:var(--cyan-600) }
.filtros a.aqui{
  border-color:var(--cyan); color:var(--cyan-600); background:var(--tint); font-weight:700;
}

/* --- Filtros de un listado: el elegido, en tinta ---------------------------- */
body.crm .filtros a{font-weight:700; background:var(--white) }

/* Los filtros de todas las pantallas, con el mismo cuerpo que los de Clientes. */
body.crm .filtros a{ padding:.55rem 1.1rem; border-radius:var(--r-pildora); font-size:var(--letra-base) }
html:not(.oscuro) body.crm .filtros a{ border-color:var(--c-borde-fuerte) }
body.crm .filtros a.aqui{ background:var(--tinta); border-color:var(--tinta); color:var(--c-superficie) }
html.oscuro body.crm .filtros a.aqui{ background:var(--ink); border-color:var(--ink); color:var(--c-sobre-color) }

/* Las pestañas internas que reusan `.nav-crm` (Finanzas): pastillas, como los
   filtros de Clientes. El borde que trae escrito en la pantalla se anula. */
body.crm .envoltura .nav-crm{ border:0 !important; background:none; margin-bottom:1.4rem }
body.crm .envoltura .nav-crm .interior{ padding:0 !important; gap:.5rem; flex-wrap:wrap; overflow:visible }
body.crm .envoltura .nav-crm a{
  padding:.55rem 1.1rem; border-radius:var(--r-pildora); border:0; background:var(--white);
  box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink); font-size:var(--letra-base);
}
body.crm .envoltura .nav-crm a:hover{ background:var(--white); box-shadow:inset 0 0 0 1.5px var(--ink-soft) }
body.crm .envoltura .nav-crm a.aqui{ background:var(--c-tinta); color:var(--c-superficie); box-shadow:none }
html.oscuro body.crm .envoltura .nav-crm a.aqui{ background:var(--c-tinta); color:var(--c-superficie) }

/* --- Filtros en pastilla (la plantilla por área, etc.) -------------------- */
body.crm .filtros-pastilla{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
body.crm .filtros-pastilla a{
  display:inline-flex; align-items:center; min-height:36px; padding:0 .9rem; border-radius:var(--r-pildora);
  font-size:var(--letra-sm); font-weight:700; text-decoration:none; background:var(--t-bg); color:var(--t-tx);
}
body.crm .filtros-pastilla a.activo{ background:var(--tinta); color:var(--c-superficie) }
html.oscuro body.crm .filtros-pastilla a.activo{ background:var(--ink); color:var(--tint) }
@media (max-width:900px){
  /* Las pestañas internas (Finanzas: Resumen, Flujo, Cobranza…) ocupaban tres
     renglones de pastillas antes de la primera cifra. En el teléfono son una
     sola tira que se desliza, como las pestañas de la familia arriba. */
  body.crm .envoltura .nav-crm{ margin:0 -1rem 1.1rem }
  body.crm .envoltura .nav-crm .interior{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:0 1rem !important; gap:.4rem;
  }
  body.crm .envoltura .nav-crm .interior::-webkit-scrollbar{ display:none }
  body.crm .envoltura .nav-crm a{ flex:none; white-space:nowrap; min-height:2.75rem; display:flex; align-items:center }

  /* Los filtros dentro de un bloque «sin aire» (Compras) quedaban pegados a
     la orilla de la tarjeta. */
  body.crm .bloque .cuerpo.sin-aire > .filtros{ padding:0 1.1rem }
}


/* ===========================================================================
   11. PIEZAS COMPARTIDAS · CAMPOS Y FORMULARIOS
   =========================================================================== */


/* --- Casillas que se calculan, no se escriben ------------------------------
   Un campo de solo lectura que se ve igual que uno editable invita a escribir
   en él, y el clic que no hace nada se lee como que la pantalla está rota.
   Los <textarea readonly> de las pantallas de importar quedan fuera a
   propósito: ahí el fondo blanco ayuda a leer el bloque que se va a copiar. */
input[readonly]{
  background:var(--tint); color:var(--ink-soft); cursor:default;
  border-style:dashed;
}

/* --- Campos y avisos ------------------------------------------------------- */
body.crm input[type=text], body.crm input[type=email], body.crm input[type=password],
body.crm input[type=search], body.crm input[type=date], body.crm input[type=number],
body.crm input[type=tel], body.crm select, body.crm textarea{ border-radius:var(--r-medio) }
body.crm .menu-buscar input{
  width:100%; box-sizing:border-box; margin:0;
  padding:.55rem .75rem .55rem 2.1rem; border-radius:var(--r-medio);
  border:1px solid rgba(23,35,43,.10); background-color:rgba(255,255,255,.72);
  color:var(--c-tinta); font:inherit; font-size:var(--letra-base);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B76' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:.7rem 50%; background-size:1rem;
}
body.crm .periodo-nav a, body.crm .periodo-nav select{ border-radius:var(--r-medio) }
body.crm .recado{ border-radius:var(--r-medio) }

/* --- Formularios ------------------------------------------------------------ */

/* Los campos con un fondo apenas gris y el foco del color de la familia. La
   etiqueta sigue en letra normal: en un formulario se LEE, no se ojea. */
html:not(.oscuro) body.crm.con-marco input[type=text], html:not(.oscuro) body.crm.con-marco input[type=email],
html:not(.oscuro) body.crm.con-marco input[type=date], html:not(.oscuro) body.crm.con-marco input[type=number],
html:not(.oscuro) body.crm.con-marco input[type=tel], html:not(.oscuro) body.crm.con-marco select,
html:not(.oscuro) body.crm.con-marco textarea{ background-color:var(--c-superficie-2); border-color:var(--c-borde-fuerte) }
body.crm.con-marco .crm-cuerpo input:focus, body.crm.con-marco .crm-cuerpo select:focus,
body.crm.con-marco .crm-cuerpo textarea:focus{
  border-color:var(--fam-punto,var(--c-cian)); box-shadow:0 0 0 3px color-mix(in srgb, var(--fam-punto,var(--c-cian)) 22%, transparent);
}
html:not(.oscuro) body.crm.con-marco .crm-cuerpo input:focus,
html:not(.oscuro) body.crm.con-marco .crm-cuerpo select:focus,
html:not(.oscuro) body.crm.con-marco .crm-cuerpo textarea:focus{ background-color:var(--c-superficie) }
body.crm .bloque .cuerpo h3{ font-size:var(--letra-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--et-txt) }

/* La barra de guardar: pegada abajo mientras el formulario se ve. */
body.crm .barra-guardar{
  position:sticky; bottom:1rem; z-index:6; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin:0 0 2rem; padding:.7rem .8rem .7rem 1.3rem; border-radius:var(--r-pildora);
  background:var(--white); box-shadow:var(--sombra-3);
}
html.oscuro body.crm .barra-guardar{ box-shadow:inset 0 0 0 1px var(--line), var(--sombra-3) }
body.crm .barra-guardar .que{ flex:1 1 12rem; min-width:0; color:var(--ink-soft); font-size:var(--letra-base); line-height:1.35 }
body.crm .barra-guardar .que strong{ color:var(--ink) }
body.crm .barra-guardar .boton{ margin:0 }

/* Guardar va en tinta, como en el sistema de la propuesta; el verde queda
   para las acciones que crean algo («+ Nueva factura»). */
body.crm .barra-guardar .boton.guardar{ background:var(--c-tinta); border-color:var(--c-tinta); color:var(--c-superficie); box-shadow:none }
body.crm .barra-guardar .boton.guardar:hover{ background:#2A3A45 }
html.oscuro body.crm .barra-guardar .boton.guardar{ background:var(--c-tinta); border-color:var(--c-tinta); color:var(--c-superficie) }

/* Dentro de una tarjeta la barra de guardar no flota: ya está a la vista. */
body.crm .bloque .barra-guardar{ position:static; margin:0; padding:0; background:none; box-shadow:none; border-radius:0 }
@media (max-width:900px){
  /* Los campos de un formulario en rejilla tenían doble espacio entre sí: el
     hueco de la rejilla más el margen de cada campo. */
  body.crm :is(.form-dos, .campos-2, .campos-3, .apila-movil, div[style*="display:grid"]) > .campo{ margin-bottom:0 }
}


/* ===========================================================================
   12. PIEZAS COMPARTIDAS · AVISOS Y «QUÉ HAY QUE ARREGLAR»
   =========================================================================== */


/* --- Qué hay que arreglar ------------------------------------------------- */
body.crm .arreglos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem }
body.crm .arreglo{
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  border-radius:var(--r-medio); padding:1.05rem 1.1rem 1.1rem;
}
body.crm .arreglo.mal  { background:var(--c-error-fondo) }
body.crm .arreglo.aviso{ background:var(--c-aviso-fondo) }
html.oscuro body.crm .arreglo.mal  { background:var(--rojo-bg) }
html.oscuro body.crm .arreglo.aviso{ background:var(--ambar-bg) }
body.crm .arreglo .titulo{ font-size:var(--letra-md); line-height:1.3 }
body.crm .arreglo p{ margin:0; font-size:var(--letra-base); color:var(--ink-soft); line-height:1.5 }
body.crm .arreglo .boton{ margin-top:auto; min-height:40px; font-size:var(--letra-base); border-radius:var(--r-pildora); background:var(--white) }
@media (max-width:900px){
  body.crm .crm-cuerpo .boton{ min-height:2.75rem }
}
body.crm .arreglo.mal .boton  { color:var(--cr-txt); border-color:#F2B8B8 }
body.crm .arreglo.aviso .boton{ color:var(--at-txt); border-color:#EBD48A }
html.oscuro body.crm .arreglo .boton{ border-color:var(--line) }

/* --- El aviso de una línea ------------------------------------------------ */
body.crm .aviso-linea{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; border-radius:var(--r-medio);
  padding:.7rem 1rem; margin:0 0 1.2rem; font-size:var(--letra-base); line-height:1.45;
}
body.crm .aviso-linea > span{ flex:1 1 20rem }
body.crm .aviso-linea > a{ font-weight:700; color:inherit; white-space:nowrap }
body.crm .aviso-linea.ambar{ background:var(--at-bg); color:var(--at-txt) }
body.crm .aviso-linea.rojo { background:var(--cr-bg); color:var(--cr-txt) }
body.crm .aviso-linea.info { background:var(--in-bg); color:var(--in-txt) }

/* Dentro de un aviso claro (Finanzas › Socio) el cian claro de la tarjeta negra no se lee: toma la letra del aviso. 07/10/2026 */
body.crm .aviso-linea details.como > summary, body.crm .aviso-linea details.como p{ color:inherit }
body.crm .aviso-linea > details{ flex-basis:100% }
body.crm .aviso-linea > details summary{ cursor:pointer; font-weight:700 }

/* --- «Deshacer» y el cuadro de «¿seguro?» (08/10/2026) ---------------------
   El aviso de abajo sale después de una acción que se puede regresar; el
   cuadro reemplaza a la ventanita gris del navegador en las que no. Ver
   incluye/deshacer.php. En el teléfono el aviso sube para no tapar la barra. */
body.crm .aviso-deshacer{
  position:fixed; z-index:260; left:50%; bottom:1.5rem; transform:translateX(-50%);
  display:flex; align-items:center; gap:1rem; margin:0; max-width:calc(100vw - 2rem);
  padding:.7rem .8rem .7rem 1.1rem; border-radius:var(--r-medio);
  background:var(--c-tinta); color:var(--c-superficie); box-shadow:var(--sombra-3);
  font-size:var(--letra-base); line-height:1.4;
}
body.crm .aviso-deshacer[hidden]{ display:none }
body.crm .aviso-deshacer .boton{ flex:none }
body.crm .crm-confirmar{
  border:0; border-radius:var(--r-grande); padding:1.4rem; width:min(28rem, calc(100vw - 2rem));
  background:var(--c-superficie); color:var(--c-tinta); box-shadow:var(--sombra-3);
}
body.crm .crm-confirmar::backdrop{ background:rgba(15,22,27,.45) }
body.crm .crm-confirmar p{ margin:0 0 1.2rem; font-size:var(--letra-md); line-height:1.5 }
body.crm .crm-confirmar .acciones{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.5rem }
@media (max-width:900px){
  body.crm .aviso-deshacer{ bottom:calc(5.4rem + env(safe-area-inset-bottom)); width:calc(100vw - 1.5rem); justify-content:space-between }
}

/* --- Acciones en grupo (08/10/2026) ----------------------------------------
   Casilla en cada renglón y una barra que aparece al marcar el primero:
   «3 marcados», los botones y «Quitar marcas». Sin JavaScript la barra se
   queda quieta debajo de la lista (borde punteado) y sigue sirviendo; con
   JavaScript (.vivo) se esconde hasta que hay algo marcado (.abierta) y
   entonces flota abajo, como el aviso de «Deshacer». Ver barraGrupoCrm(). */
body.crm .grupo-casilla{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:1.75rem; height:1.75rem; margin:-.2rem 0; border-radius:var(--r-chico); cursor:pointer;
}
body.crm .grupo-casilla:hover{ background:var(--c-superficie-2) }
body.crm .grupo-casilla input{ width:1.1rem; height:1.1rem; margin:0; accent-color:var(--c-cian); cursor:pointer }
body.crm .marcado, body.crm tr.marcado > td{ background:var(--c-cian-tinte) }
body.crm .sin-marca{ opacity:.55 }
body.crm .tabla .grupo-col{ width:2.4rem; padding-right:0 }
body.crm .grupo-barra{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:1rem 0 0; padding:.7rem 1rem;
  border:1px dashed var(--c-borde-fuerte); border-radius:var(--r-medio); font-size:var(--letra-base);
}
body.crm .grupo-cuenta{ font-weight:700; white-space:nowrap }
body.crm .grupo-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem }
body.crm .grupo-barra .boton{ white-space:nowrap }
body.crm .grupo-campo{ display:inline-flex; align-items:center; gap:.35rem }
body.crm .grupo-campo input, body.crm .grupo-campo select{ min-height:2.25rem; max-width:11rem; font:inherit; font-size:var(--letra-sm) }
body.crm .grupo-marcas{ display:flex; gap:.5rem; margin-left:auto }
body.crm .grupo-barra.vivo{ display:none }
body.crm .grupo-barra.vivo.abierta{
  display:flex; position:fixed; z-index:250; left:50%; bottom:1.5rem; transform:translateX(-50%);
  width:max-content; max-width:calc(100vw - 2rem); margin:0; border:0;
  background:var(--c-tinta); color:var(--c-superficie); box-shadow:var(--sombra-3);
}
body.crm.con-grupo .crm-cuerpo{ padding-bottom:7rem }
@media (max-width:900px){
  /* Tamaño de dedo, y la barra arriba de la barra de familias. */
  body.crm .grupo-casilla{ width:2.75rem; height:2.75rem; margin:-.6rem -.4rem -.6rem -.6rem }
  body.crm .grupo-casilla input{ width:1.35rem; height:1.35rem }
  body.crm .grupo-barra.vivo.abierta{
    left:.75rem; right:.75rem; transform:none; width:auto; max-width:none;
    bottom:calc(5.4rem + env(safe-area-inset-bottom));
  }
  body.crm .grupo-barra.vivo.abierta .grupo-cuenta{ flex:1 1 auto }
  body.crm .grupo-barra.vivo.abierta .grupo-marcas{ order:-1; margin-left:0 }
  body.crm.con-grupo .crm-cuerpo{ padding-bottom:16rem }
}


/* ===========================================================================
   13. PIEZAS COMPARTIDAS · AYUDAS Y TEXTO SECUNDARIO
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Texto secundario
   ---------------------------------------------------------------------------
   `.apunte` y `.ayuda` ya se usaban en varias pantallas del CRM esperando que
   fueran gris chico, pero solo estaban definidas dentro de `.bloque > h2` y de
   `.campo`. En cualquier otro lado salían del mismo color y tamaño que el texto
   normal, así que la jerarquía que se leía en el código no se veía en pantalla.
   Estas dos reglas la hacen valer en todos lados sin tocar las que ya existen.
   --------------------------------------------------------------------------- */
.apunte{ color:var(--gray); font-weight:400 }
.ayuda { color:var(--gray); font-size:var(--letra-base) }
table.tabla tr.apunte td{ color:var(--gray) }

/* ===== LA AYUDA EN DOS TAMAÑOS (etapa «Ahora» 5 · 06/10/2026) --------------
   El «?» del título abre el Manual en otra pestaña; el «?» chico al final de
   una frase abre la explicación completa en un cuadro flotante (popover).
   Ver `ayudaManualCrm` y `masInfoCierra` en incluye/plantilla-crm.php. */
body.crm .ayuda-manual{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.45rem; height:1.45rem; margin-left:.55rem; vertical-align:.25em;
  border:1.5px solid currentColor; border-radius:50%;
  font-size:var(--letra-sm); font-weight:700; line-height:1; letter-spacing:0;
  color:var(--c-tinta-suave); text-decoration:none;
}
body.crm .ayuda-manual:hover,body.crm .ayuda-manual:focus-visible{ color:inherit }
body.crm .mas-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.15rem; height:1.15rem; margin-left:.3rem; padding:0; vertical-align:.08em;
  border:1.3px solid currentColor; border-radius:50%; background:none;
  font:inherit; font-size:var(--letra-xs); font-weight:700; line-height:1;
  color:var(--cyan-600); cursor:pointer;
}
body.crm .mas-info:hover{ background:var(--cyan-600); color:#fff }
body.crm .mas-info:focus-visible{ outline:2px solid var(--cyan-600); outline-offset:2px }
body.crm .cuadro-info{
  width:min(34rem, calc(100vw - 32px)); max-height:min(70vh, 34rem); overflow:auto;
  margin:auto; padding:0; border:1px solid var(--line); border-radius:var(--r-medio);
  background:var(--white); color:var(--ink); box-shadow:var(--sombra-3);
  font-size:var(--letra-base); font-weight:400; line-height:1.6; text-align:left;
}
body.crm .cuadro-info::backdrop{ background:rgba(15,22,27,.35) }
body.crm .cuadro-info-cab{
  display:flex; align-items:center; gap:.8rem; position:sticky; top:0;
  padding:.85rem 1.1rem .7rem; background:var(--white); border-bottom:1px solid var(--line);
}
body.crm .cuadro-info-cab strong{ flex:1; font-size:var(--letra-md) }
body.crm .cuadro-info-x{
  border:0; background:none; padding:0 .2rem; font-size:var(--letra-xl); line-height:1;
  color:var(--gray); cursor:pointer;
}
body.crm .cuadro-info-x:hover{ color:var(--ink) }
body.crm .cuadro-info-txt{ display:block; padding:.9rem 1.1rem 1.1rem; color:var(--ink-soft) }
body.crm .cuadro-info-txt strong{ color:var(--ink) }
body.crm .cuadro-info-txt .parrafo{ display:block; margin-top:.7rem }
body.crm .cuadro-info-txt .parrafo:first-child{ margin-top:0 }
@supports not selector(:popover-open){
  /* Un navegador sin popover enseña el texto en su lugar, sin el botón. */
  body.crm .mas-info,body.crm .cuadro-info-cab{ display:none }
  body.crm .cuadro-info{ all:unset }
  body.crm .cuadro-info-txt{ display:inline; padding:0 }
}
@media print{
  body.crm .ayuda-manual,body.crm .mas-info{ display:none }
}


/* ===========================================================================
   14. PIEZAS COMPARTIDAS · OTRAS (vacío, nota al pie, el camino…)
   =========================================================================== */


/* --- Vacío ---------------------------------------------------------------- */
.vacio{
  padding:2.4rem 1.5rem; text-align:center; color:var(--gray); font-size:var(--letra-md);
}
.vacio strong{ display:block; color:var(--ink); font-size:var(--letra-md); margin-bottom:.35rem }
.vacio .boton{ margin-top:1rem }

/* --- Nota al pie de un bloque --------------------------------------------- */
.nota-bloque{
  padding:.8rem 1.3rem; font-size:var(--letra-sm); color:var(--gray);
  background:var(--tint); border-top:1px solid var(--line); line-height:1.5;
}

/* --- Nóminas: el camino de una nómina ------------------------------------- */
body.crm .camino-pasos{
  list-style:none; margin:0 0 1.4rem; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem;
}
body.crm .camino-pasos li{
  display:flex; align-items:center; gap:.7rem; padding:.75rem .9rem; border-radius:var(--r-medio);
  background:var(--white); box-shadow:var(--sombra-2); color:var(--gray);
}
body.crm .camino-pasos .marca{
  width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:var(--letra-sm); background:var(--ne-bg); color:var(--gray);
}
body.crm .camino-pasos .marca .icono{ width:16px; height:16px }
body.crm .camino-pasos strong{ display:block; color:var(--ink); font-size:var(--letra-base) }
body.crm .camino-pasos small{ display:block; font-size:var(--letra-xs); line-height:1.3 }
body.crm .camino-pasos li.hecho .marca{ background:var(--ok-bg); color:var(--ok-txt) }
body.crm .camino-pasos li.aqui{ box-shadow:inset 0 0 0 2px var(--c-rosa), var(--sombra-2) }
body.crm .camino-pasos li.sigue .marca{ background:var(--c-rosa-tinte); color:var(--c-rosa-medio) }
html.oscuro body.crm .camino-pasos li.sigue .marca{ background:var(--c-rosa-tinte); color:var(--c-rosa-hondo) }

/* --- El camino, con tres pasos y con liga (Facturación) ------------------- */
body.crm .camino-pasos.tres{ grid-template-columns:repeat(3,minmax(0,1fr)) }
body.crm .camino-pasos li > a{ text-decoration:none; color:inherit; min-width:0 }
body.crm .camino-pasos li > a:hover strong{ text-decoration:underline }
body.crm .camino-pasos li.final-mal .marca{ background:var(--cr-bg); color:var(--cr-txt) }
body.crm .camino-pasos li.final-mal{ box-shadow:inset 0 0 0 2px #F2B8B8, var(--sombra-tarjeta) }
@media (max-width:640px){
  .kpi .cifra{ font-size:var(--letra-xl) }
  .encabezado-crm .acciones{ margin-left:0; width:100% }
  body.crm .camino-pasos{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  body.crm .camino-pasos.tres{ grid-template-columns:minmax(0,1fr) }
}


/* ===========================================================================
   15. LAS FICHAS (cliente, prospecto, persona, factura…)
   =========================================================================== */


/* El tinte de la familia, para la insignia y los acentos de la ficha. */

/* En oscuro cambia sola: la libreta ya trae el -tinte oscuro de cada familia. */
body.crm.pag-hoy       { --fam-tinte:var(--c-cian-tinte) }
body.crm.pag-comercial { --fam-tinte:var(--c-morado-tinte) }
body.crm.pag-dinero    { --fam-tinte:var(--c-verde-tinte) }
body.crm.pag-operacion { --fam-tinte:var(--c-naranja-tinte) }
body.crm.pag-gente     { --fam-tinte:var(--c-rosa-tinte) }

/* --- La cabeza ------------------------------------------------------------- */
body.crm .ficha-cabeza{ margin-bottom:1.6rem }
body.crm .ficha-volver{
  display:inline-flex; align-items:center; gap:.3rem; margin-bottom:1rem;
  padding:.35rem .85rem; border-radius:var(--r-pildora); background:var(--white);
  box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink-soft);
  font-size:var(--letra-base); font-weight:700; text-decoration:none;
}
body.crm .ficha-volver:hover{ color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink-soft) }
body.crm .ficha-volver:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px }
body.crm .ficha-id{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap }
body.crm .ficha-insignia{
  flex:none; min-width:4.4rem; height:4.4rem; padding:0 .7rem; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; border-radius:var(--r-grande);
  background:var(--fam-tinte,var(--c-cian-tinte)); color:var(--fam-tono,var(--c-cian-medio));
  font-weight:700; font-size:var(--letra-lg); letter-spacing:-.01em;
}
body.crm .ficha-titulo{ flex:1 1 22rem; min-width:0; display:flex; flex-direction:column; gap:.35rem }
body.crm.con-marco .ficha-titulo h1{ font-size:var(--letra-3xl); line-height:1.08; overflow-wrap:anywhere }
body.crm .ficha-sub{ margin:0; color:var(--ink-soft); font-size:var(--letra-md); line-height:1.45 }
body.crm .ficha-sub .falta{ color:var(--gray) }
body.crm .ficha-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem }
body.crm .ficha-id > .acciones{ margin-left:auto; display:flex; flex-wrap:wrap; gap:.55rem; align-items:center }
body.crm .ficha-id > .acciones .boton{ padding:.6rem 1.15rem; font-size:var(--letra-base) }
body.crm .ficha-id > .acciones form{ margin:0; display:inline-flex }

/* --- Las dos columnas ------------------------------------------------------- */
body.crm .ficha-rejilla{
  display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:1.4rem;
  align-items:start; margin-bottom:1.8rem;
}
body.crm .ficha-col{ display:flex; flex-direction:column; gap:1.4rem; min-width:0 }

/* Con pestañas (etapa «Ahora», punto 3) las dos columnas se vuelven una: cada
   pestaña enseña una sola cosa, a lo ancho. Sin JavaScript, las dos columnas. */
body.crm.con-pestanas .ficha-rejilla{ display:flex; flex-direction:column; align-items:stretch }
body.crm.con-pestanas .ficha-col{ display:contents }
body.crm .ficha-col > .bloque, body.crm .ficha-col > form.bloque{ margin-bottom:0 }
body.crm .ficha-col .rejilla-2{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)) }

/* --- Los datos en rejilla --------------------------------------------------- */
body.crm .ficha-datos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));
  gap:1.15rem 1.6rem; margin:0; padding:.6rem 1.5rem 1.5rem;
}
body.crm .ficha-datos > div{ min-width:0 }
body.crm .ficha-datos > div.ancho{ grid-column:1 / -1 }
body.crm .ficha-datos dt{
  font-size:var(--letra-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--et-txt); margin-bottom:.3rem;
}
body.crm .ficha-datos dd{ margin:0; color:var(--ink); line-height:1.45; overflow-wrap:anywhere }
body.crm .ficha-datos dd .falta, body.crm .ficha-datos dd .gris{ color:var(--gray) }
body.crm .ficha-datos dd small{ display:block; color:var(--ink-soft); font-size:var(--letra-sm); margin-top:.15rem }

/* --- El desglose del contrato: barras, no tabla ----------------------------- */

/* --- La historia: una línea de tiempo --------------------------------------- */
body.crm .ficha-linea{ list-style:none; margin:0; padding:.5rem 1.5rem 1.4rem }
body.crm .ficha-linea li{ position:relative; padding:0 0 1.15rem 1.6rem }
body.crm .ficha-linea li::before{
  content:""; position:absolute; left:.28rem; top:.45rem; width:.6rem; height:.6rem; border-radius:50%;
  background:var(--fam-punto,var(--c-cian)); box-shadow:0 0 0 3px var(--fam-tinte,var(--c-cian-tinte));
}
body.crm .ficha-linea li::after{
  content:""; position:absolute; left:.55rem; top:1.25rem; bottom:.1rem; width:2px; background:var(--line);
}
body.crm .ficha-linea li:last-child{ padding-bottom:0 }
body.crm .ficha-linea li:last-child::after{ display:none }
body.crm .ficha-linea .cuando{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:var(--letra-sm); color:var(--ink-soft); margin-bottom:.2rem }
body.crm .ficha-linea .cuando .chip{ font-size:var(--letra-xs); padding:.12rem .5rem }
body.crm .ficha-linea strong{ display:block; line-height:1.35 }
body.crm .ficha-linea p{ margin:.25rem 0 0; color:var(--ink-soft); font-size:var(--letra-base); line-height:1.45 }

/* --- Un formulario corto dentro de una tarjeta de la columna derecha ------- */
body.crm .ficha-anotar .dos{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
body.crm .ficha-anotar .campo{ margin-bottom:.9rem }
body.crm .ficha-anotar textarea{ min-height:5rem }
body.crm .ficha-anotar .boton{ width:100%; justify-content:center }
body.crm .bloque > h2 .chip{ font-size:var(--letra-xs) }

/* El «siguiente paso» de un prospecto: la tarjeta que dice qué sigue. */
body.crm .ficha-sigue{
  margin:0 1.5rem 1.2rem; padding:1rem 1.1rem; border-radius:var(--r-medio);
  background:var(--fam-tinte,var(--c-morado-tinte)); display:flex; flex-direction:column; gap:.35rem;
}
body.crm .ficha-sigue .et{ font-size:var(--letra-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fam-tono,var(--c-morado-medio)) }
body.crm .ficha-sigue strong{ font-size:var(--letra-lg); line-height:1.3 }
body.crm .ficha-sigue.falta{ background:var(--cr-bg) }
body.crm .ficha-sigue.falta .et, body.crm .ficha-sigue.falta strong{ color:var(--cr-txt) }

/* El pie de la ficha: lo que se hace una vez en la vida (dar de baja). */
body.crm .ficha-pie{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:0 0 2.2rem;
  padding-top:1.2rem; border-top:1px solid var(--line); color:var(--ink-soft); font-size:var(--letra-base);
}
body.crm .ficha-pie form{ margin:0 }

/* --- La tira de saltos de las fichas largas --------------------------------- */
body.crm .ficha-indice{
  position:sticky; top:.6rem; z-index:5; display:flex; gap:.4rem; overflow-x:auto;
  margin:0 0 1.6rem; padding:.45rem; border-radius:var(--r-pildora); background:var(--white);
  box-shadow:var(--sombra-2); scrollbar-width:none;
}
body.crm .ficha-indice::-webkit-scrollbar{ display:none }
html.oscuro body.crm .ficha-indice{ box-shadow:inset 0 0 0 1px var(--line) }
body.crm .ficha-indice a{
  flex:none; padding:.45rem .95rem; border-radius:var(--r-pildora); font-size:var(--letra-base); font-weight:700;
  color:var(--ink-soft); text-decoration:none; white-space:nowrap;
}
body.crm .ficha-indice a:hover{ background:var(--fam-tinte,var(--c-cian-tinte)); color:var(--fam-tono,var(--c-cian-medio)) }
body.crm .ficha-indice a:focus-visible{ outline:3px solid var(--cyan); outline-offset:-3px }

/* Pestañas (etapa «Ahora», punto 3): la misma tira, con la pestaña abierta
   rellena del color de la familia. Lo de las otras pestañas se esconde con
   `hidden`, que hay que forzar porque .rejilla-2 y .bloque traen su display. */
body.crm .ficha-pestanas a[aria-selected=true]{ background:var(--fam-tono,var(--c-cian-medio)); color:var(--c-superficie) }
html.oscuro body.crm .ficha-pestanas a[aria-selected=true]{ color:var(--c-superficie) }
body.crm.con-pestanas [data-panel][hidden]{ display:none !important }
body.crm [id]{ scroll-margin-top:5rem }
body.crm .crm-cuerpo .tarjetas.anchas{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
body.crm .bloque.con-franja{ border-left:5px solid var(--t-fu) }
body.crm .bloque > h2 .ico-h{
  width:30px; height:30px; border-radius:var(--r-chico); display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle; margin-right:.35rem; background:var(--t-bg); color:var(--t-tx);
}
body.crm .bloque > h2 .ico-h .icono{ width:17px; height:17px }
body.crm .crm-cuerpo .kpi.con-icono .cifra.chica{ font-size:var(--letra-lg); line-height:1.3; letter-spacing:0 }
body.crm .separa-opcional{ margin:2rem 0 1rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap }
body.crm .separa-opcional h2{ margin:0 }
@media (max-width:1180px){
  body.crm .ficha-rejilla{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px){
  /* --- En el teléfono ---------------------------------------------------------- */
  body.crm .ficha-insignia{ min-width:3.4rem; height:3.4rem; border-radius:var(--r-medio); font-size:var(--letra-md) }
  body.crm.con-marco .ficha-titulo h1{ font-size:var(--letra-2xl) }
  body.crm .ficha-id{ gap:.9rem }
  body.crm .ficha-titulo{ flex-basis:calc(100% - 5rem) }
  body.crm .ficha-id > .acciones{ margin-left:0; width:100% }
  body.crm .ficha-datos{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:.5rem 1.1rem 1.2rem; gap:1rem }
  body.crm .ficha-anotar .dos{ grid-template-columns:1fr }
  body.crm .barra-guardar{ border-radius:var(--r-grande); bottom:.5rem; padding:.7rem }
  body.crm .barra-guardar .que{ flex-basis:100% }
  body.crm .ficha-indice{ border-radius:var(--r-medio); top:3.6rem }
}


/* ===========================================================================
   16. PENDIENTES (pendientes.php, tarea.php, meta.php)
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Pendientes (migración 54) — pendientes.php, tarea.php, meta.php
   ---------------------------------------------------------------------------
   Los colores de área y de etiqueta vienen de la base y llegan como la
   variable `--c`. Nunca se usan de fondo ni de color de letra: van en un punto
   o en una tira. Así un color oscuro como el de «Dirección» se sigue leyendo
   en modo oscuro, y uno claro no se pierde en el blanco.
   ------------------------------------------------------------------------ */
.pend-filtros{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1.1rem }
.pend-filtros input[type=search], .pend-filtros select{ width:auto; max-width:15rem; padding:.45rem .6rem; font-size:var(--letra-base) }
.pend-filtros input[type=search]{ min-width:11rem }
.pend-limpiar{ font-size:var(--letra-base) }
.pend-chips-fila{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.2rem }
.pend-ayuda{ margin:-.4rem 0 .8rem; font-size:var(--letra-sm); color:var(--gray) }

/* --- Captura rápida -------------------------------------------------------- */
.pend-rapida .cuerpo{ padding:1rem 1.2rem }
.pend-rapida-fila{ display:flex; gap:.6rem; align-items:center }
.pend-rapida-fila + .pend-rapida-fila{ margin-top:.7rem }
.pend-rapida-titulo{ flex:1; font-size:var(--letra-md) }
.pend-rapida-fila.chica{ flex-wrap:wrap; font-size:var(--letra-sm); color:var(--gray); gap:.5rem .9rem }
.pend-rapida-fila.chica label{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700 }
.pend-rapida-fila.chica select, .pend-rapida-fila.chica input{ width:auto; max-width:13rem; padding:.3rem .5rem; font-size:var(--letra-sm) }
.pend-atajos{ display:inline-flex; gap:.25rem; flex-wrap:wrap }
.pend-atajos button{
  font:inherit; font-size:var(--letra-xs); padding:.2rem .55rem; border-radius:var(--r-pildora); cursor:pointer;
  border:1px solid var(--line); background:var(--white); color:var(--ink-soft);
}
.pend-atajos button:hover{ border-color:var(--cyan); color:var(--cyan-600) }

/* --- Renglón de pendiente ------------------------------------------------- */
.pend-lista{ list-style:none; margin:0; padding:0 }
.pend-renglon{
  display:flex; gap:.75rem; align-items:flex-start; padding:.7rem 1.2rem;
  border-bottom:1px solid var(--line);
}
.pend-renglon:last-child{ border-bottom:0 }
.pend-renglon:hover{ background:var(--tint) }
.pend-renglon.prio-urgente{ box-shadow:inset 3px 0 0 var(--rojo) }
.pend-renglon.prio-alta{ box-shadow:inset 3px 0 0 var(--ambar) }
.pend-check{ margin:0; flex:none }
.pend-casilla{
  width:1.35rem; height:1.35rem; border-radius:50%; border:2px solid var(--borde, var(--c-borde-fuerte));
  background:var(--white); cursor:pointer; padding:0; margin-top:.1rem;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--letra-sm); font-weight:700; color:var(--c-sobre-color); line-height:1;
}
.pend-casilla:hover{ border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-verde) 18%, transparent) }
.pend-casilla.marcada{ background:var(--green); border-color:var(--green) }
.pend-casilla[disabled]{ opacity:.4; cursor:default }
.pend-cuerpo{ flex:1; min-width:0 }
.pend-titulo{ color:var(--ink); text-decoration:none; font-weight:700; line-height:1.35; overflow-wrap:anywhere }
.pend-titulo:hover{ color:var(--cyan-600); text-decoration:underline }
.pend-renglon.hecha .pend-titulo, .pend-renglon.cancelada .pend-titulo{
  color:var(--gray); text-decoration:line-through; font-weight:400;
}
.pend-detalles{ display:flex; flex-wrap:wrap; gap:.3rem .45rem; margin-top:.3rem; align-items:center }
.pend-lado{ display:flex; align-items:center; gap:.5rem; flex:none; margin-left:auto }
.pend-chip, .pend-area{
  display:inline-flex; align-items:center; gap:.3rem; font-size:var(--letra-xs); font-weight:700;
  padding:.08rem .5rem; border-radius:var(--r-pildora); border:1px solid var(--line);
  background:var(--white); color:var(--ink-soft); white-space:nowrap;
}
.pend-chip::before, .pend-area::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--c, var(--gray));
}
.pend-area{ border-radius:var(--r-chico) }
.pend-area::before{ border-radius:var(--r-chico) }
.pend-dato{ font-size:var(--letra-xs); color:var(--gray); white-space:nowrap }
.pend-dato.listo{ color:var(--green-600) }
.pend-dato.espera{ color:var(--ambar); white-space:normal }
.pend-vence{ font-size:var(--letra-xs); font-weight:700; color:var(--gray); white-space:nowrap }
.pend-vence.pronto{ color:var(--ink-soft) }
.pend-vence.hoy{ color:var(--cyan-600) }
.pend-vence.malo{ color:var(--rojo) }
html.oscuro .pend-vence.malo{ color:var(--rojo-txt) }
.pend-prio{ font-weight:900; margin-right:.3rem; font-size:.85em }
.pend-prio.urgente{ color:var(--rojo) }
.pend-prio.alta{ color:var(--ambar) }
.pend-prio.baja{ color:var(--gray); font-weight:400 }
.pend-avatar{
  width:1.7rem; height:1.7rem; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cyan); color:var(--c-sobre-color); font-size:var(--letra-xs); font-weight:700; letter-spacing:.02em;
}
.pend-avatar.vacio{ background:var(--line); color:var(--gray); padding:0; font-size:var(--letra-xs) }

/* sin el padding del aviso «.vacio» (04/10/2026) */
.pend-cajon.atrasadas > h2{ color:var(--rojo) }
html.oscuro .pend-cajon.atrasadas > h2{ color:var(--rojo-txt) }

/* --- Tablero -------------------------------------------------------------- *
   Las columnas se desplazan en horizontal en pantallas angostas en vez de
   apilarse: apiladas, «Hecho» queda tres pantallas abajo y el tablero deja de
   leerse como tablero. */
.pend-tablero{
  display:grid; grid-template-columns:repeat(4, minmax(250px, 1fr)); gap:1rem;
  overflow-x:auto; padding-bottom:.5rem; align-items:start;
}
.pend-columna{
  background:var(--tint); border:1px solid var(--line); border-radius:var(--r-grande);
  padding:.8rem; min-height:12rem; transition:border-color .15s, background .15s;
}
.pend-columna.encima{ border-color:var(--cyan); background:var(--cian-bg, var(--c-superficie-2)) }
.pend-columna > h2{ font-size:var(--letra-base); margin:0 0 .7rem; display:flex; align-items:center; gap:.5rem }
.pend-zona{ display:flex; flex-direction:column; gap:.6rem; min-height:4rem }
.pend-tarjeta{
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-medio);
  padding:.7rem .75rem .6rem; box-shadow:var(--sombra-1); cursor:grab; overflow:hidden;
}
.pend-tarjeta:hover{ border-color:var(--cyan) }
.pend-tarjeta.arrastrando{ opacity:.45; cursor:grabbing }
.pend-tarjeta.prio-urgente{ border-left:3px solid var(--rojo) }
.pend-tarjeta.prio-alta{ border-left:3px solid var(--ambar) }
.pend-tira{ position:absolute; top:0; left:0; right:0; height:3px }
.pend-tarjeta .pend-titulo{ display:block; font-size:var(--letra-base) }
.pend-pie{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-top:.55rem }
.pend-pie .pend-avatar{ margin-left:auto }
.pend-mover{ margin:0; order:3; flex-basis:100% }
.pend-mover select{ width:100%; padding:.15rem .3rem; font-size:var(--letra-xs); border-radius:var(--r-chico) }
.pend-agregar{ display:block; margin-top:.7rem; font-size:var(--letra-base); text-decoration:none; color:var(--gray) }
.pend-agregar:hover{ color:var(--cyan-600) }
.pend-columna[data-estado=hecha] .pend-titulo{ color:var(--gray); text-decoration:line-through; font-weight:400 }

/* --- Calendario ----------------------------------------------------------- */
.pend-cal-cabeza{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem }
.pend-calendario{
  display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-grande); overflow:hidden;
}
.pend-cal-dia-nombre{
  background:var(--tint); padding:.45rem; font-size:var(--letra-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--gray); text-align:center;
}
.pend-cal-dia{ background:var(--white); min-height:6.5rem; padding:.35rem; display:flex; flex-direction:column; gap:.2rem; min-width:0 }
.pend-cal-dia.fuera{ background:var(--tint); opacity:.65 }
.pend-cal-dia.hoy .pend-cal-num span{
  background:var(--cyan); color:var(--c-sobre-color); border-radius:var(--r-pildora); padding:0 .45rem;
}
.pend-cal-num{ display:flex; justify-content:space-between; align-items:center; font-size:var(--letra-sm); font-weight:700; color:var(--ink-soft) }
.pend-cal-mas{ text-decoration:none; color:var(--gray); opacity:0; font-weight:700; padding:0 .3rem }
.pend-cal-dia:hover .pend-cal-mas{ opacity:1 }
.pend-cal-mas:focus{ opacity:1 }
.pend-cal-item{
  display:block; font-size:var(--letra-xs); line-height:1.3; padding:.12rem .35rem; border-radius:var(--r-chico);
  text-decoration:none; color:var(--ink); background:var(--tint);
  border-left:3px solid var(--c, var(--cyan));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pend-cal-item:hover{ background:var(--line) }
.pend-cal-item.atrasada{ border-left-color:var(--rojo); color:var(--rojo) }
html.oscuro .pend-cal-item.atrasada{ color:var(--rojo-txt) }
.pend-cal-item.hecha{ color:var(--gray); text-decoration:line-through; border-left-color:var(--line) }
.pend-cal-item.prio-urgente{ font-weight:700 }

/* --- Metas ---------------------------------------------------------------- */
.pend-metas{ display:flex; flex-direction:column }
.pend-meta{ display:block; padding:1rem 1.3rem; border-bottom:1px solid var(--line); text-decoration:none; color:inherit }
.pend-meta:last-child{ border-bottom:0 }
.pend-meta:hover{ background:var(--tint) }
.pend-meta-cabeza{ display:flex; gap:.7rem; align-items:center; justify-content:space-between; margin-bottom:.55rem }
.pend-meta-datos{ display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-size:var(--letra-sm); color:var(--gray); margin-top:.5rem; align-items:center }
.pend-meta-barra{ position:relative; height:.6rem; border-radius:var(--r-pildora); background:var(--line); overflow:visible }
.pend-meta-barra .lleno{ position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pildora); background:var(--cyan) }
.pend-meta-barra.bien .lleno{ background:var(--green) }
.pend-meta-barra.aviso .lleno{ background:var(--ambar) }
.pend-meta-barra.malo .lleno{ background:var(--rojo) }
.pend-meta-barra.neutro .lleno{ background:var(--gray) }
.pend-meta-barra .debe{ position:absolute; top:-.25rem; bottom:-.25rem; width:2px; background:var(--ink); margin-left:-1px }
.pend-malo{ color:var(--rojo); font-weight:700 }
.pend-bien{ color:var(--green-600) }
html.oscuro .pend-malo{ color:var(--rojo-txt) }
html.oscuro .pend-bien{ color:var(--verde-txt) }
.pend-indicador{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; margin-top:1rem }
.pend-indicador label{ font-weight:700; font-size:var(--letra-base); display:flex; flex-direction:column; gap:.3rem }
.pend-indicador input{ width:9rem }
.pend-medida{ border:1px solid var(--line); border-radius:var(--r-medio); padding:1rem 1.1rem; margin:0 0 1.3rem }
.pend-medida legend{ font-weight:700; padding:0 .3rem }
.pend-medida > label{ display:block; margin-bottom:.5rem }
.pend-medida .ayuda{ display:inline; margin-left:.3rem }
.pend-indicador-campos{ margin-top:.9rem }
.pend-proyeccion p{ margin:0 0 .8rem; line-height:1.55 }
.pend-proyeccion p:last-child{ margin-bottom:0 }

/* --- Gráfica de semanas --------------------------------------------------- */
.grafica .pend-barra-hecha{ fill:var(--green) }
.grafica .pend-linea-pila{ fill:none; stroke:var(--ink-soft); stroke-width:2; stroke-linejoin:round; stroke-dasharray:5 3 }

/* --- Ficha ---------------------------------------------------------------- */
.pend-ficha{ display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:1.6rem; align-items:start }
.pend-dos{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem }
.pend-tres{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 1rem }

/* Sin esto, el campo de fecha de Safari y Chrome se niega a encogerse y se
   sale de la columna angosta de «Detalles». */
.pend-dos > *, .pend-tres > *{ min-width:0 }
.pend-ficha input[type=date]{ min-width:0; width:100% }
.pend-et-label{ display:block; font-weight:700; margin-bottom:.45rem; font-size:var(--letra-base) }
.pend-etiquetas-elegir{ display:flex; flex-wrap:wrap; gap:.4rem }
.pend-chip-check{ cursor:pointer }
.pend-chip-check input{ position:absolute; opacity:0; pointer-events:none }
.pend-chip-check span{
  display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .7rem; border-radius:var(--r-pildora);
  border:1px solid var(--line); font-size:var(--letra-sm); color:var(--ink-soft); background:var(--white);
}
.pend-chip-check span::before{ content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--c) }
.pend-chip-check input:checked + span{ border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c); color:var(--ink); font-weight:700 }
.pend-chip-check input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:2px }
.pend-et-nueva{ display:flex; gap:.5rem; margin-top:.6rem }
.pend-et-nueva input{ flex:1 }
.pend-et-nueva select{ width:7.5rem }
.pend-check-linea{ display:flex !important; gap:.5rem; align-items:center; font-weight:400 !important }
.pend-check-linea input{ width:auto }
.pend-guardar{ display:flex; flex-wrap:wrap; gap:.5rem }
.pend-desplegable{ position:relative }
.pend-desplegable > summary{ list-style:none; cursor:pointer }
.pend-desplegable > summary::-webkit-details-marker{ display:none }
.pend-desplegable[open] > form{
  position:absolute; right:0; top:calc(100% + .4rem); z-index:5; width:19rem;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-medio);
  box-shadow:var(--sombra-2); padding:1rem; display:flex; flex-direction:column; gap:.7rem;
}
.pend-desplegable label{ display:flex; flex-direction:column; gap:.35rem; font-weight:700; font-size:var(--letra-base) }
.pend-pasos{ list-style:none; margin:.6rem 0 0; padding:0 }
.pend-pasos li{ display:flex; align-items:center; gap:.7rem; padding:.45rem 1.3rem }
.pend-pasos li:hover{ background:var(--tint) }
.pend-pasos form{ margin:0 }
.pend-pasos .texto{ flex:1; overflow-wrap:anywhere }
.pend-pasos li.hecho .texto{ color:var(--gray); text-decoration:line-through }
.pend-pasos .borrar button{
  border:0; background:none; color:var(--gray); cursor:pointer; font-size:var(--letra-lg); opacity:0; padding:0 .3rem;
}
.pend-pasos li:hover .borrar button, .pend-pasos .borrar button:focus{ opacity:1 }
.pend-paso-nuevo{ display:flex; gap:.6rem; align-items:flex-end }
.pend-paso-nuevo textarea{ min-height:2.6rem; flex:1 }
.pend-historia{ list-style:none; margin:0; padding:0 1.3rem 1rem }
.pend-historia li{ padding:.65rem 0; border-top:1px solid var(--line) }
.pend-historia .quien{ display:flex; align-items:center; gap:.5rem; font-size:var(--letra-sm) }
.pend-historia .quien span:last-child{ color:var(--gray) }
.pend-historia .quien .pend-avatar{ width:1.4rem; height:1.4rem; font-size:var(--letra-xs) }
.pend-historia .texto{ margin:.3rem 0 0 1.9rem; font-size:var(--letra-base); line-height:1.5; overflow-wrap:anywhere }
.pend-historia li.cambio .texto, .pend-historia li.creada .texto{ color:var(--gray); font-size:var(--letra-sm) }
.pend-historia li.comentario .texto{
  background:var(--tint); border:1px solid var(--line); border-radius:var(--r-medio); padding:.55rem .75rem;
}

/* En el teléfono, las cifras de Pendientes van de dos en dos: cuatro tarjetas
   una debajo de otra empujan la lista del día —que es lo que se viene a ver—
   a la tercera pantalla. */
.tarjetas.pend-kpis{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) }

/* --- Pendientes › Tablero ----------------------------------------
   Las columnas dejan de ser cajas con borde: son carriles de fondo tenue, con
   un punto del color de su estado. Las tarjetas flotan como las del resto del
   CRM. «Hecho» se ve apagado: ya no pide nada. */
body.crm .pend-tablero{ gap:1.1rem }
body.crm .pend-columna{
  border:0; border-radius:var(--r-grande); padding:1rem .85rem;
  background:color-mix(in srgb, var(--fondo-crm) 70%, var(--c-borde-fuerte)); /* 70 % con borde-fuerte = el tono de antes (55 % con #D5DEE5); con 55 % el título de la columna bajaba a 4.47:1 */
}
html.oscuro body.crm .pend-columna{ background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px var(--line) }
body.crm .pend-columna.encima{ background:var(--fam-tinte,var(--c-cian-tinte)); box-shadow:inset 0 0 0 2px var(--fam-punto,var(--c-cian)) }
body.crm .pend-columna > h2{ font-size:var(--letra-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--et-txt); padding:0 .25rem }
body.crm .pend-columna > h2 .etiqueta{ margin-left:auto; background:var(--white); color:var(--ink); letter-spacing:0 }
body.crm .pend-punto{ width:.55rem; height:.55rem; border-radius:50%; background:var(--c-tenue); flex:none }
body.crm .pend-columna[data-estado=en_curso] .pend-punto{ background:var(--c-cian) }
body.crm .pend-columna[data-estado=en_espera] .pend-punto{ background:var(--c-aviso-punto) }
body.crm .pend-columna[data-estado=hecha] .pend-punto{ background:var(--c-verde) }
body.crm .pend-tarjeta{
  border:0; border-radius:var(--r-medio); padding:.85rem .9rem .75rem;
  box-shadow:var(--sombra-2);
  transition:box-shadow .15s ease, transform .15s ease;
}
html.oscuro body.crm .pend-tarjeta{ box-shadow:inset 0 0 0 1px var(--line) }
body.crm .pend-tarjeta:hover{ border-color:transparent; transform:translateY(-1px); box-shadow:var(--sombra-3) }
body.crm .pend-tarjeta.prio-urgente{ border-left:0; box-shadow:inset 3px 0 0 var(--c-error-punto), var(--sombra-2) }
body.crm .pend-tarjeta.prio-alta{ border-left:0; box-shadow:inset 3px 0 0 var(--c-aviso-punto), var(--sombra-2) }
body.crm .pend-tarjeta .pend-titulo{ font-weight:700; line-height:1.3; color:var(--ink); text-decoration:none }
body.crm .pend-tarjeta .pend-titulo:hover{ text-decoration:underline }
body.crm .pend-columna[data-estado=hecha] .pend-tarjeta{ box-shadow:none; background:rgba(255,255,255,.6) }
html.oscuro body.crm .pend-columna[data-estado=hecha] .pend-tarjeta{ background:transparent }
body.crm .pend-agregar{ padding:.55rem .6rem; border-radius:var(--r-medio); font-weight:700 }
body.crm .pend-agregar:hover{ background:var(--white) }

/* «Más filtros»: un panel que se abre debajo. */
body.crm .pend-mas-filtros{ position:relative }
body.crm .pend-mas-filtros > summary{ list-style:none; cursor:pointer }
body.crm .pend-mas-filtros > summary::-webkit-details-marker{ display:none }
body.crm .pend-mas-filtros[open] > summary{ background:var(--fam-tinte,var(--c-cian-tinte)); color:var(--fam-tono,var(--c-cian-medio)) }
body.crm .pend-mas-panel{
  position:absolute; top:calc(100% + .4rem); left:0; z-index:8; display:flex; flex-direction:column; gap:.5rem;
  width:16rem; padding:.8rem; border-radius:var(--r-medio); background:var(--white); box-shadow:var(--sombra-3);
}
html.oscuro body.crm .pend-mas-panel{ box-shadow:inset 0 0 0 1px var(--line), var(--sombra-3) }
body.crm .pend-mas-panel select{ max-width:none; width:100% }
body.crm .pend-columna[data-estado=hecha] .pend-tarjeta .pend-titulo{ color:var(--gray); font-weight:400; text-decoration:line-through }

/* --- Revisión de «Hoy» (04/10/2026) ---------------------------------------
   La ficha de un pendiente en una sola rejilla: «Qué hay que hacer», Pasos y
   Conversación a la izquierda; Detalles a la derecha, a todo lo alto. El
   formulario y la rejilla de abajo no dibujan caja propia (display:contents)
   para que sus secciones sean piezas del marco. */
body.crm .pend-ficha-marco{
  display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:1.6rem; align-items:start;
}
body.crm .pend-ficha-marco > .pend-ficha,
body.crm .pend-ficha-marco > .rejilla-2{ display:contents }
body.crm .pend-ficha-marco > .pend-ficha > .bloque,
body.crm .pend-ficha-marco > .rejilla-2 > .bloque{ grid-column:1; margin:0 }
body.crm .pend-ficha-marco > .pend-ficha > #detalles{ grid-column:2; grid-row:1 / span 3 }
body.crm .busca-grande{ display:flex; gap:.6rem; margin:0 0 1.4rem; max-width:44rem }
body.crm .busca-grande input{ flex:1; min-width:0; font-size:var(--letra-md); padding:.7rem 1rem; border-radius:var(--r-pildora) }
body.crm .pend-cal-dsem{ display:none }
@media (max-width:900px){
  .pend-ficha{ grid-template-columns:1fr }
  body.crm .pend-ficha-marco{ grid-template-columns:minmax(0, 1fr) }
  body.crm .pend-ficha-marco > .pend-ficha > #detalles{ grid-column:1; grid-row:auto }

  /* Las vistas de Pendientes (Mi día, Tablero, Lista…) son pestañas: una tira
     que se desliza, no dos renglones. Los atajos de fecha, tocables. */
  body.crm .filtros.pend-vistas{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:-1rem; margin-right:-1rem; padding:0 1rem }
  body.crm .filtros.pend-vistas::-webkit-scrollbar{ display:none }
  body.crm .filtros.pend-vistas > *{ flex:none; white-space:nowrap }
  body.crm .pend-atajos button{ min-height:2.25rem; padding-left:.8rem; padding-right:.8rem }
}
@media (max-width:640px){
  /* En el teléfono una cuadrícula de 7 columnas no se lee: se vuelve agenda,
     solo con los días que tienen algo. */
  .pend-calendario{ grid-template-columns:1fr; background:none; border:0; gap:.4rem }
  .pend-cal-dia-nombre, .pend-cal-dia.sin, .pend-cal-dia.fuera{ display:none }
  .pend-cal-dia{ min-height:0; border:1px solid var(--line); border-radius:var(--r-medio) }
  .pend-cal-mas{ opacity:1 }
  .pend-cal-item{ white-space:normal; font-size:var(--letra-sm); padding:.3rem .5rem }
  .pend-renglon{ flex-wrap:wrap; padding:.7rem 1rem }
  .pend-lado{ width:100%; padding-left:2.1rem; justify-content:flex-start }
  .pend-renglon.con-grupo .pend-lado{ padding-left:4.5rem }   /* + la casilla de «Acciones en grupo» */
  .pend-rapida-fila:first-child{ flex-direction:column; align-items:stretch }
  .pend-dos, .pend-tres{ grid-template-columns:1fr }
  .pend-filtros input[type=search], .pend-filtros select{ max-width:none; flex:1 1 45% }
  .pend-desplegable[open] > form{ position:static; width:auto; margin-top:.4rem }
  body.crm .pend-mas-panel{ position:static; width:auto; margin-top:.5rem; box-shadow:none }
  body.crm .pend-cal-dsem{ display:inline; flex:1; margin-left:.45rem; font-style:normal; font-weight:500; color:var(--gray) }
}
@media (hover:hover) and (pointer:fine){
  /* Con ratón se arrastra, y el menú solo estorba: aparece al pasar por encima
     o al llegar con el teclado. En el teléfono se queda siempre. */
  .pend-mover{ display:none }
  .pend-tarjeta:hover .pend-mover, .pend-tarjeta:focus-within .pend-mover{ display:block }
}
@media (prefers-reduced-motion:reduce){
  body.crm .pend-tarjeta, body.crm .pend-tarjeta:hover{ transition:none; transform:none }
}
@media print{
  .pend-rapida, .pend-filtros, .pend-check, .pend-mover, .pend-agregar, .pend-paso-nuevo{ display:none }
}


/* ===========================================================================
   17. TABLERO (index.php)
   =========================================================================== */

body.crm .medidor{
  position:relative; height:12px; border-radius:var(--r-pildora); background:rgba(255,255,255,.1);
}
body.crm .medidor .banda{
  position:absolute; top:0; bottom:0; border-radius:var(--r-pildora); background:color-mix(in srgb, var(--cian-vivo) 32%, transparent);
}
body.crm .medidor .lleno{
  position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pildora);
  background:linear-gradient(90deg,var(--c-verde),var(--verde-vivo));
}
body.crm .medidor-texto{ font-size:var(--letra-sm); color:#C9D4DC }
body.crm .tab-fila{ display:grid; gap:1.2rem; margin-bottom:1.2rem; align-items:stretch }
body.crm .tab-uno{ grid-template-columns:minmax(0,1.85fr) minmax(0,1fr) minmax(0,1fr) }
body.crm .tab-dos{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) }
body.crm .tab-fila > .bloque{ margin-bottom:0 }
body.crm .tab-uno > .kpi.protagonista{ min-height:15rem }
body.crm .tab-columna{ display:flex; flex-direction:column; gap:1.2rem }

/* Las tarjetas de cifra del Tablero: más grandes que `.kpi`, con icono y
   minigráfica. Son ligas: toda la tarjeta lleva a su detalle. */
body.crm .tab-cifra{
  display:flex; flex-direction:column; gap:.45rem; padding:1.4rem 1.5rem 1.3rem;
  background:var(--white); border-radius:var(--r-grande); box-shadow:var(--sombra-2);
  color:inherit; text-decoration:none; transition:box-shadow .18s ease, transform .18s ease;
}
html.oscuro body.crm .tab-cifra{ border:1px solid var(--line) }
body.crm a.tab-cifra:hover{ box-shadow:var(--sombra-3); transform:translateY(-2px) }
body.crm a.tab-cifra:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px }
body.crm .tab-et{
  display:flex; align-items:center; gap:.65rem; font-size:var(--letra-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--et-txt);
}
body.crm .tab-et .ico{
  flex:none; width:2.1rem; height:2.1rem; border-radius:var(--r-medio); display:inline-flex;
  align-items:center; justify-content:center; font-style:normal; font-size:var(--letra-md); letter-spacing:0;
}
body.crm .ico.cian  { background:var(--c-cian-tinte); color:var(--c-cian-medio) }
body.crm .ico.verde { background:var(--c-ok-fondo); color:var(--c-ok-texto) }
body.crm .ico.indigo{ background:var(--c-morado-tinte); color:var(--c-morado-medio) }
html.oscuro body.crm .ico.cian  { background:var(--c-cian-tinte); color:var(--c-cian-hondo) }
html.oscuro body.crm .ico.verde { background:var(--c-verde-tinte); color:var(--c-ok-texto) }
html.oscuro body.crm .ico.indigo{ background:var(--c-morado-tinte); color:var(--c-morado-hondo) }
body.crm .tab-num{ font-size:var(--letra-3xl); font-weight:700; letter-spacing:-.035em; line-height:1.05; color:var(--ink) }
body.crm .tab-num small{ font-size:var(--letra-md); font-weight:400; letter-spacing:0; color:var(--ink-soft); margin-left:.4rem }
body.crm .tab-pie{ font-size:var(--letra-base); font-weight:700; color:var(--ink-soft); margin-top:auto }
body.crm .tab-pie.bien  { color:var(--c-ok-texto) }
body.crm .tab-pie.mal   { color:var(--c-error-texto) }
body.crm .tab-pie.indigo{ color:var(--c-morado-medio) }
html.oscuro body.crm .tab-pie.bien  { color:var(--c-ok-texto) }
html.oscuro body.crm .tab-pie.mal   { color:var(--c-error-punto) }
html.oscuro body.crm .tab-pie.indigo{ color:var(--c-morado-hondo) }
body.crm .minigrafica{ display:block; width:100%; height:44px; margin:.3rem 0 .1rem }
body.crm .tab-cuentas{
  flex-direction:row; align-items:center; gap:2rem; margin-bottom:1.2rem;
}
body.crm .tab-cuentas > div{ display:flex; flex-direction:column; gap:.45rem; flex:0 0 auto }
body.crm .tab-cuentas .minigrafica{ flex:1; height:70px; margin:0 }

/* La barra del margen con sus rótulos y la rayita del promedio real. */
body.crm .medidor-arriba{ display:flex; justify-content:space-between; gap:1rem; font-size:var(--letra-base); color:#C9D4DC }
body.crm .medidor-arriba strong{ color:#fff }
body.crm .medidor .marca{
  position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1.5px;
  background:#fff; border-radius:2px; box-shadow:0 0 0 2px #17232B;
}
body.crm .medidor-leyenda{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:var(--letra-sm); color:#9FB0BC }
body.crm .medidor-leyenda span{ display:inline-flex; align-items:center; gap:.4rem }
body.crm .medidor-leyenda i{ display:inline-block; width:.6rem; height:.6rem; border-radius:3px }
body.crm .medidor-leyenda .l-lleno{ background:var(--c-verde) }
body.crm .medidor-leyenda .l-marca{ width:3px; height:.8rem; background:#fff; border-radius:1px }
body.crm .medidor-leyenda .l-banda{ background:color-mix(in srgb, var(--cian-vivo) 55%, transparent) }

/* Hoy: cada cosa con su icono, su título, su detalle y su botón. */
body.crm .hoy-lista{ list-style:none; margin:0; padding:0 1.5rem 1rem }
body.crm .hoy-lista li{
  display:flex; align-items:center; gap:1rem; padding:.95rem 0; border-top:1px solid var(--line);
}
body.crm .hoy-ico{
  flex:none; width:2.6rem; height:2.6rem; border-radius:var(--r-medio); display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:var(--letra-lg);
}
body.crm .hoy-texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem }
body.crm .hoy-texto strong{ font-size:var(--letra-md); line-height:1.3 }
body.crm .hoy-texto span{ font-size:var(--letra-base); color:var(--ink-soft) }
body.crm .hoy-accion{
  flex:none; padding:.5rem 1rem; border-radius:var(--r-pildora); font-weight:700; font-size:var(--letra-base);
  text-decoration:none; white-space:nowrap;
}
body.crm .hoy-lista .urgente .hoy-ico,
body.crm .hoy-lista .urgente .hoy-accion{ background:var(--cr-bg); color:var(--cr-txt) }
body.crm .hoy-lista .aviso .hoy-ico,
body.crm .hoy-lista .aviso .hoy-accion{ background:var(--at-bg); color:var(--at-txt) }
body.crm .hoy-lista .nota .hoy-ico,
body.crm .hoy-lista .nota .hoy-accion{ background:var(--in-bg); color:var(--in-txt) }
body.crm .hoy-accion:hover{ filter:brightness(.95); text-decoration:underline }
body.crm .hoy-accion:focus-visible{ outline:3px solid currentColor; outline-offset:2px }

/* ¿A dónde se va cada peso? */
body.crm .peso-cuerpo{ display:flex; align-items:center; gap:1.3rem; padding:1.2rem 1.5rem 1.5rem; flex-wrap:wrap; justify-content:center }
body.crm .dona-caja{ position:relative; width:150px; height:150px; flex:none }
body.crm .dona{ width:100%; height:100% }
body.crm .dona-centro{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:var(--letra-xs); font-weight:700; color:var(--ink-soft); text-align:center; line-height:1.2;
}
body.crm .dona-centro strong{ font-size:var(--letra-2xl); color:var(--c-rosa-medio); letter-spacing:-.03em }
html.oscuro body.crm .dona-centro strong{ color:var(--c-rosa-hondo) }
body.crm .peso-leyenda{ list-style:none; margin:0; padding:0; flex:1 1 13.5rem; display:grid; gap:.5rem }
body.crm .peso-leyenda li{ display:flex; align-items:center; gap:.55rem; font-size:var(--letra-base); white-space:nowrap }
body.crm .peso-leyenda i{ flex:none; width:.75rem; height:.75rem; border-radius:3px }
body.crm .peso-leyenda b{ margin-left:auto }

/* Doce meses: el mes que se ve en cian fuerte, los demás deslavados. */
body.crm .grafica .barra-ing.tenue{ opacity:.42 }

/* Contratos: propios contra gestión de proveedores. */
body.crm .partida{ display:flex; gap:4px; height:12px; margin:.5rem 0 .2rem }
body.crm .partida span{ border-radius:var(--r-pildora); background:var(--c-cian) }
body.crm .partida span:last-child{ flex:1; background:var(--c-morado) }
body.crm .partida-pie{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:var(--letra-base); color:var(--ink-soft) }
body.crm .partida-pie b{ color:var(--ink) }
body.crm .partida-pie .indigo b{ color:var(--c-morado-medio) }
html.oscuro body.crm .partida-pie .indigo b{ color:var(--c-morado-hondo) }

/* Cobranza vencida: la tarjeta roja con su botón. */
body.crm .tab-cobranza{
  display:flex; align-items:center; gap:1rem; padding:1.4rem 1.5rem;
  border-radius:var(--r-grande); background:var(--cr-bg); color:var(--cr-txt);
}
body.crm .tab-cobranza > div{ flex:1; display:flex; flex-direction:column; gap:.35rem }
body.crm .tab-cobranza .tab-et, body.crm .tab-cobranza .tab-num, body.crm .tab-cobranza .tab-pie{ color:inherit }
body.crm .boton-cobrar{
  flex:none; padding:.65rem 1.3rem; border-radius:999px; background:#B42328; color:#fff;
  font-weight:700; text-decoration:none;
}
body.crm .boton-cobrar:hover{ background:#961C21 }
body.crm .boton-cobrar:focus-visible{ outline:3px solid #B42328; outline-offset:2px }

/* El aviso de la dona cuando faltan gastos (03/10/2026). */
body.crm .peso-aviso{
  margin:0 1.5rem 1.4rem; padding:.75rem .9rem; border-radius:var(--r-medio);
  background:var(--at-bg); color:var(--at-txt); font-size:var(--letra-base); line-height:1.45;
}
body.crm .peso-aviso a{ color:inherit; font-weight:700; margin-left:.25rem }
body.crm .apoyo > .tab-cifra{ padding:1.15rem 1.3rem 1.05rem }
body.crm .apoyo .tab-num{ font-size:var(--letra-2xl) }
body.crm .tab-ancha{ flex-direction:row; align-items:center; gap:1.5rem }
body.crm .tab-ancha > div{ display:flex; flex-direction:column; gap:.4rem; flex:none }
body.crm .tab-ancha .minigrafica{ flex:1; height:56px; margin:0 }
@media (max-width:1180px){
  body.crm .tab-uno{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  body.crm .tab-uno > .kpi.protagonista{ grid-column:1 / -1 }
  body.crm .tab-dos{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px){
  body.crm .tab-uno{ grid-template-columns:minmax(0,1fr) }
  body.crm .tab-cuentas{ flex-direction:column; align-items:stretch; gap:.6rem }
  body.crm .hoy-lista li{ flex-wrap:wrap }
  body.crm .hoy-accion{ margin-left:3.6rem }
  body.crm .tab-num{ font-size:var(--letra-2xl) }
  body.crm .tab-ancha{ flex-direction:column; align-items:stretch; gap:.6rem }
}


/* ===========================================================================
   18. CLIENTES
   =========================================================================== */


/* Las cuatro cifras de arriba. */
body.crm .cli-cifras-fila{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; margin-bottom:1.5rem;
}
body.crm .cli-kpi{
  display:flex; flex-direction:column; gap:.4rem; padding:1.3rem 1.4rem 1.25rem;
  background:var(--white); border-radius:var(--r-grande); box-shadow:var(--sombra-2);
  color:inherit; text-decoration:none; transition:box-shadow .18s ease, transform .18s ease;
}
html.oscuro body.crm .cli-kpi{ border:1px solid var(--line) }
body.crm .cli-kpi:hover{ box-shadow:var(--sombra-3); transform:translateY(-2px) }
body.crm .cli-kpi:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px }
body.crm .cli-kpi .et{ font-size:var(--letra-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--et-txt) }
body.crm .cli-kpi-num{ font-size:var(--letra-3xl); font-weight:700; letter-spacing:-.035em; line-height:1.05; color:var(--ink) }
body.crm .cli-kpi-num.bien    { color:var(--c-ok-texto) }
body.crm .cli-kpi-num.atencion{ color:var(--c-aviso-texto) }
body.crm .cli-kpi-num.indigo  { color:var(--c-morado-medio) }
html.oscuro body.crm .cli-kpi-num.bien    { color:var(--c-ok-texto) }
html.oscuro body.crm .cli-kpi-num.atencion{ color:var(--c-aviso-texto) }
html.oscuro body.crm .cli-kpi-num.indigo  { color:var(--c-morado-hondo) }
body.crm .cli-kpi-pie{ font-size:var(--letra-sm); color:var(--ink-soft) }
body.crm .cli-kpi-barra{ display:block; height:7px; border-radius:var(--r-pildora); background:var(--c-fondo); overflow:hidden; margin-top:auto }
html.oscuro body.crm .cli-kpi-barra{ background:rgba(255,255,255,.08) }
body.crm .cli-kpi-barra > span{ display:block; height:100%; border-radius:var(--r-pildora); min-width:4px }
body.crm .cli-kpi-barra .bien    { background:var(--c-verde) }
body.crm .cli-kpi-barra .atencion{ background:var(--c-aviso-punto) }
body.crm .cli-kpi-barra .mal     { background:var(--c-error-punto) }
body.crm .cli-kpi-barra .indigo  { background:var(--c-morado) }

/* La protagonista: la cartera vencida, en la única superficie oscura. */
body.crm .cli-kpi.oscuro{ background:#17232B; color:#fff }
html.oscuro body.crm .cli-kpi.oscuro{ background:#0A1115 }
body.crm .cli-kpi.oscuro .et{ color:#F7A79A }
body.crm .cli-kpi.oscuro .cli-kpi-num{ color:#fff }
body.crm .cli-kpi.oscuro .cli-kpi-pie{ color:#C9D4DC }
body.crm .cli-kpi.oscuro .cli-kpi-barra{ background:rgba(255,255,255,.12) }

/* Filtros y el cambio de vista. */
body.crm .cli-barra{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem }
body.crm .cli-filtros{ display:flex; gap:.6rem; flex-wrap:wrap }
body.crm .cli-filtros a{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.15rem; border-radius:var(--r-pildora);
  background:var(--white); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink);
  font-weight:700; font-size:var(--letra-md); text-decoration:none;
}
body.crm .cli-filtros a span{ opacity:.8 }
body.crm .cli-filtros a:hover{ box-shadow:inset 0 0 0 1.5px var(--ink-soft) }
body.crm .cli-filtros a.aqui{ background:var(--c-tinta); color:var(--c-superficie); box-shadow:none }
html.oscuro body.crm .cli-filtros a.aqui{ background:var(--c-tinta); color:var(--c-superficie) }
body.crm .cli-vista{
  margin-left:auto; display:inline-flex; padding:.3rem; border-radius:var(--r-pildora);
  background:var(--white); box-shadow:inset 0 0 0 1.5px var(--line);
}
body.crm .cli-vista a{ padding:.45rem 1.05rem; border-radius:var(--r-pildora); font-weight:700; font-size:var(--letra-base); color:var(--ink-soft); text-decoration:none }
body.crm .cli-vista a.aqui{ background:var(--c-morado-tinte); color:var(--c-morado-medio) }
html.oscuro body.crm .cli-vista a.aqui{ background:var(--c-morado-tinte); color:var(--c-morado-hondo) }
body.crm .cli-filtros a:focus-visible, body.crm .cli-vista a:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px }

/* Una tarjeta por cliente. */
body.crm .cli-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); gap:1.2rem; margin-bottom:2rem;
}
body.crm .cli-tarjeta{
  display:flex; flex-direction:column; gap:1rem; padding:1.35rem 1.4rem 1.1rem;
  background:var(--white); border-radius:var(--r-grande); box-shadow:var(--sombra-2);
}
html.oscuro body.crm .cli-tarjeta{ border:1px solid var(--line) }
body.crm .cli-tarjeta > header{ display:flex; align-items:flex-start; gap:.85rem }
body.crm .cli-codigo{
  flex:none; padding:.55rem .6rem; border-radius:var(--r-medio); background:var(--c-morado-tinte); color:var(--c-morado-medio);
  font-weight:700; font-size:var(--letra-md); letter-spacing:-.01em;
}
html.oscuro body.crm .cli-codigo{ background:var(--c-morado-tinte); color:var(--c-morado-hondo) }
body.crm .cli-quien{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem }
body.crm .cli-nombre{ font-weight:700; font-size:var(--letra-lg); line-height:1.2; color:var(--ink); text-decoration:none }
body.crm .cli-nombre:hover{ text-decoration:underline }
body.crm .cli-dir{ font-size:var(--letra-sm); color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
body.crm .cli-tarjeta > header .chip{ flex:none; margin-top:.15rem }
body.crm .cli-servicios{ display:flex; flex-wrap:wrap; gap:.4rem }
body.crm .cli-numeros{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.4rem; align-items:end }
body.crm .cli-numeros .et{ display:block; font-size:var(--letra-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--et-txt); margin-bottom:.15rem }
body.crm .cli-mensual{ font-size:var(--letra-2xl); font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--ink) }
body.crm .cli-mensual.chica{ font-size:var(--letra-lg); color:var(--ink-soft) }
body.crm .cli-margen{ display:flex; flex-direction:column; gap:.45rem; padding-bottom:.25rem }
body.crm .cli-margen-arriba{ display:flex; justify-content:space-between; font-size:var(--letra-base); color:var(--ink-soft) }
body.crm .cli-margen-arriba b.bien    { color:var(--c-ok-texto) }
body.crm .cli-margen-arriba b.atencion{ color:var(--c-aviso-texto) }
body.crm .cli-margen-arriba b.mal     { color:var(--c-error-texto) }
html.oscuro body.crm .cli-margen-arriba b.bien    { color:var(--c-ok-texto) }
html.oscuro body.crm .cli-margen-arriba b.atencion{ color:var(--c-aviso-texto) }
html.oscuro body.crm .cli-margen-arriba b.mal     { color:var(--c-error-texto) }
body.crm .cli-sin-dato{ font-size:var(--letra-sm); color:var(--gray); font-style:italic }
body.crm .cli-tarjeta > footer{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding-top:.85rem; border-top:1px solid var(--line); font-size:var(--letra-base); color:var(--ink-soft); margin-top:auto;
}
body.crm .cli-tarjeta > footer a{ font-weight:700; color:var(--c-morado-medio); text-decoration:none }
html.oscuro body.crm .cli-tarjeta > footer a{ color:var(--c-morado-hondo) }
body.crm .cli-tarjeta > footer a:hover{ text-decoration:underline }

/* Las cuatro cifras de Clientes con su ícono (revisión de Comercial, 04/10/2026). */
body.crm .cli-kpi-ico{
  width:42px; height:42px; border-radius:var(--r-medio); display:flex; align-items:center; justify-content:center;
  background:var(--t-bg); color:var(--t-tx); margin-bottom:.35rem;
}
body.crm .cli-peso{ display:block; width:5.5rem; margin:.35rem 0 0 auto }
body.crm td .pastilla + .pastilla, body.crm td span + span > .pastilla{ margin-left:.2rem }
body.crm .cli-var{ display:inline-block; white-space:normal; max-width:9rem; text-align:right; line-height:1.3 }
body.crm .cli-cifras-fila + .cli-barra ~ * .tabla td:first-child{ white-space:normal; min-width:11rem }
body.crm details.cols-carga{ margin-top:1rem }
body.crm details.cols-carga > summary{ cursor:pointer; font-weight:700; color:var(--ink); padding:.55rem .9rem; border:1px solid var(--line); border-radius:var(--r-pildora); display:inline-block }
body.crm details.cols-carga[open] > summary{ background:var(--tint) }

/* Los avisos de cada renglón de la carga se acomodan en varias líneas en vez
   de empujar la tabla fuera de la pantalla (04/10/2026). */
body.crm .tabla td.carga-cliente{ white-space:normal; min-width:16rem; max-width:26rem }
body.crm .tabla-carga td{ white-space:normal }
body.crm .tabla-carga td .etiqueta{ white-space:normal; display:inline-block; max-width:11rem; line-height:1.35 }
body.crm .tabla-carga td.num{ white-space:nowrap }
@media (max-width:1180px){
  body.crm .cli-cifras-fila{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  body.crm .cli-cifras-fila{ gap:.8rem }
  body.crm .cli-kpi{ padding:1rem 1.05rem }
  body.crm .cli-kpi-num{ font-size:var(--letra-2xl) }
  body.crm .cli-kpi .et{ font-size:var(--letra-xs) }
  body.crm .cli-vista{ margin-left:0 }
  body.crm .cli-numeros{ grid-template-columns:minmax(0,1fr) }

  /* En el teléfono, la etiqueta de estado baja a su propio renglón: con un nombre
     largo («Condominio de Prueba Uno») se encimaba con él (04/10/2026). */
  body.crm .cli-tarjeta > header{ flex-wrap:wrap }
  body.crm .cli-tarjeta > header > .cli-quien{ flex:1 1 calc(100% - 7rem) }
  body.crm .cli-tarjeta > header > .chip{ order:3; margin-left:0 }
}


/* ===========================================================================
   19. PROSPECTOS
   =========================================================================== */


/* Las etapas del prospecto en fila: la de hoy en tinta, las demás se pueden
   tocar. «Perdido» lleva su porqué al lado y va al final, en rojo. */
body.crm .etapas-ficha .cuerpo{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding-top:.6rem }
body.crm .etapas-ficha form{ margin:0; display:inline-flex; gap:.4rem; align-items:center }
body.crm .etapas-ficha .boton{ padding:.5rem 1rem; font-size:var(--letra-base) }
body.crm .etapa-aqui{
  display:inline-flex; align-items:center; padding:.5rem 1rem; border-radius:var(--r-pildora);
  background:var(--c-tinta); color:var(--c-superficie); font-weight:700; font-size:var(--letra-base);
}
html.oscuro body.crm .etapa-aqui{ background:var(--c-tinta); color:var(--c-superficie) }
body.crm .etapas-ficha .etapa-perdido{ margin-left:auto }
body.crm .etapas-ficha .etapa-perdido select{ width:auto; padding:.45rem .7rem; font-size:var(--letra-base) }
body.crm .tabla td.prosp-paso{ white-space:normal; min-width:11rem }

/* ---------------------------------------------------------------------------
   Prospectos (lienzo aprobado el 04/10/2026)
   El embudo en barras (clara = en la mesa, sólida = ponderado, misma escala),
   la lista de abiertos en renglones que se vuelven tarjeta en el teléfono, las
   tres tarjetas cortas de abajo y los servicios en botoncitos del formulario.
   --------------------------------------------------------------------------- */
body.crm .embudo-v{ display:grid; gap:.7rem }
body.crm .etapa-v{ display:grid; grid-template-columns:13rem minmax(0,1fr) 8.5rem; gap:1rem; align-items:center;
  --et:var(--c-morado) }

/* La escala de 5 morados sale de --c-morado (08/10/2026; antes hex fijos, que
   hoy da casi igual: Δ≤5 de 255; et-5 claro exacto con oklch). */
body.crm :is(.etapa-v,.prosp-columna).et-1{ --et:color-mix(in oklab, var(--c-morado) 51%, #fff) }
body.crm :is(.etapa-v,.prosp-columna).et-2{ --et:color-mix(in oklab, var(--c-morado) 67%, #fff) }
body.crm :is(.etapa-v,.prosp-columna).et-3{ --et:color-mix(in oklab, var(--c-morado) 84%, #fff) }
body.crm :is(.etapa-v,.prosp-columna).et-4{ --et:var(--c-morado) }
body.crm :is(.etapa-v,.prosp-columna).et-5{ --et:color-mix(in oklab, var(--c-morado) 84%, #000) }
html.oscuro body.crm :is(.etapa-v,.prosp-columna).et-1{ --et:color-mix(in oklab, var(--c-morado) 60%, #000) }
html.oscuro body.crm :is(.etapa-v,.prosp-columna).et-2{ --et:color-mix(in oklab, var(--c-morado) 70%, #000) }
html.oscuro body.crm :is(.etapa-v,.prosp-columna).et-3{ --et:color-mix(in oklab, var(--c-morado) 81%, #000) }
html.oscuro body.crm :is(.etapa-v,.prosp-columna).et-4{ --et:var(--c-morado) }
body.crm .etapa-v .nom{ display:grid; line-height:1.25; min-width:0 }
body.crm .etapa-v .nom b{ color:var(--ink) }
body.crm .etapa-v .nom span{ color:var(--gray); font-size:var(--letra-sm) }
body.crm .barra-v{ position:relative; height:2.1rem; border-radius:var(--r-medio); background:var(--fondo-crm); overflow:hidden }
body.crm .barra-v .mesa, body.crm .barra-v .pond{ position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-medio); background:var(--et) }
body.crm .barra-v .mesa{ opacity:.32 }
body.crm .barra-v .pond{ min-width:6px }
body.crm .barra-v .cuantos{ position:absolute; right:.7rem; top:50%; transform:translateY(-50%); font-size:var(--letra-sm); font-weight:700; color:var(--ink-soft) }
body.crm .etapa-v .der{ text-align:right; display:grid; line-height:1.2 }
body.crm .etapa-v .der b{ color:var(--ink); font-size:var(--letra-md) }
body.crm .etapa-v .der span{ color:var(--gray); font-size:var(--letra-xs) }
body.crm .etapa-v.vacia{ grid-template-columns:13rem minmax(0,1fr) }
body.crm .etapa-v.vacia .nom b{ color:var(--gray) }
body.crm .etapa-v.vacia .raya{ height:1px; background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px) }
body.crm .embudo-pie{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; margin-top:.9rem; font-size:var(--letra-sm); color:var(--gray) }
body.crm .leyenda-v i{ display:inline-block; width:1.3rem; height:.6rem; border-radius:4px; vertical-align:middle; margin-right:.4rem; background:var(--c-morado) }
body.crm .leyenda-v i.mesa{ opacity:.32 }
body.crm .leyenda-v i.ga{ background:var(--c-verde) }
body.crm .leyenda-v i.ab{ background:#8582F2 }
body.crm .leyenda-v i.pe{ background:var(--c-error-punto); opacity:.55 }
body.crm .embudo-pie .total-v{ margin-left:auto; color:var(--ink-soft) }
body.crm .embudo-pie .total-v strong{ color:var(--ink) }
body.crm .embudo-cerrados{ display:flex; flex-wrap:wrap; gap:.5rem .7rem; align-items:center; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:var(--letra-base); color:var(--gray) }
body.crm .nota-bloque details.como p{ margin:.5rem 0 0 }

/* Los abiertos */
body.crm .bloque > h2 .prosp-orden{ margin-left:auto; font-size:var(--letra-sm); font-weight:700 }
body.crm .bloque > h2:has(.prosp-orden){ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem }
body.crm .prosp-fila{ display:grid; grid-template-columns:minmax(0,1.5fr) 9rem 7.5rem minmax(0,1.3fr); gap:1.1rem; align-items:center;
  padding:1rem 1.5rem; border-top:1px solid var(--line) }
body.crm .prosp-fila.encabezado{ padding-block:.3rem .6rem; border-top:0; font-size:var(--letra-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--et-txt); font-weight:700 }
body.crm .prosp-fila.encabezado .num{ text-align:right }
body.crm .prosp-fila .quien{ display:grid; gap:.45rem; min-width:0 }
body.crm .prosp-fila .nombre{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem }
body.crm .prosp-fila .nombre a{ color:var(--ink); font-weight:700; font-size:var(--letra-md); text-decoration:none }
body.crm .prosp-fila .nombre a:hover{ color:var(--fam-comercial); text-decoration:underline }
body.crm .prosp-fila .servicios{ display:flex; flex-wrap:wrap; gap:.3rem; align-items:center }
body.crm .serv-p{ font-size:var(--letra-xs); font-weight:700; border-radius:var(--r-pildora); padding:.12rem .6rem }
body.crm .serv-p.propio{ background:var(--ok-bg); color:var(--ok-txt) }
body.crm .serv-p.gestion{ background:var(--ne-bg); color:var(--ne-txt) }
body.crm .prosp-fila .edad{ font-size:var(--letra-xs); color:var(--gray); margin-left:.2rem }
body.crm .prosp-fila .dinero{ display:grid; text-align:right; line-height:1.25 }
body.crm .prosp-fila .dinero b{ font-size:var(--letra-md); color:var(--ink) }
body.crm .prosp-fila .dinero span{ font-size:var(--letra-xs); color:var(--gray) }
body.crm .prosp-fila .prob{ display:grid; gap:.3rem }
body.crm .prosp-fila .prob .txt{ display:flex; justify-content:space-between; font-size:var(--letra-sm); color:var(--gray) }
body.crm .prosp-fila .prob .txt b{ color:var(--ink) }
body.crm .prosp-fila .prob .riel{ display:block; height:6px; border-radius:var(--r-pildora); background:var(--fondo-crm); overflow:hidden }
body.crm .prosp-fila .prob .riel > span{ display:block; height:100%; border-radius:var(--r-pildora); background:var(--fam-comercial) }
body.crm .prosp-fila .paso{ display:flex; align-items:center; gap:.6rem; min-width:0; background:var(--fondo-crm); border-radius:var(--r-medio); padding:.5rem .65rem }
body.crm .prosp-fila .paso.tarde{ background:var(--cr-bg) }
body.crm .prosp-fila .paso.sin{ background:var(--at-bg) }
body.crm .prosp-fila .paso .txt{ min-width:0; font-size:var(--letra-base); color:var(--ink); line-height:1.3 }
body.crm .prosp-fila .paso .txt small{ display:block; font-size:var(--letra-xs); color:var(--gray) }
body.crm .prosp-fila .paso.tarde .txt small{ color:var(--cr-txt) }
body.crm .prosp-fila .paso .pastilla{ flex:none }

/* Las tres de abajo */
body.crm .prosp-abajo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:1.4rem; align-items:start; margin-bottom:1.8rem }
body.crm .prosp-abajo > .bloque{ margin-bottom:0 }
body.crm .vacio-corto{ display:flex; gap:.7rem; align-items:flex-start; margin:0; color:var(--gray); font-size:var(--letra-base) }
body.crm .vacio-corto svg{ flex:none; width:1.3rem; height:1.3rem; margin-top:.1rem; opacity:.7 }
body.crm .origen-v{ display:grid; gap:.75rem }
body.crm .origen-v .r{ display:grid; grid-template-columns:7.5rem minmax(0,1fr) 3.6rem; gap:.7rem; align-items:center; font-size:var(--letra-base) }
body.crm .origen-v .r b{ color:var(--ink); min-width:0 }
body.crm .origen-v .riel{ display:flex; height:.75rem; border-radius:var(--r-chico); background:var(--fondo-crm); overflow:hidden }
body.crm .origen-v .riel .ga{ background:var(--c-verde) }
body.crm .origen-v .riel .ab{ background:#8582F2 }
body.crm .origen-v .riel .pe{ background:var(--c-error-punto); opacity:.55 }
body.crm .origen-v .c{ text-align:right; color:var(--ink-soft); line-height:1.1 }
body.crm .origen-v .c small{ display:block; font-size:var(--letra-xs); color:var(--gray) }

/* Los servicios del formulario como botoncitos que se pintan al elegirlos */
body.crm .chips-servicio{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem }
body.crm .chips-servicio label{ display:inline-flex; align-items:center; gap:.4rem; font-weight:400; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-pildora); padding:.4rem .8rem; color:var(--ink); background:var(--white); line-height:1.2 }
body.crm .chips-servicio input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
body.crm .chips-servicio label small{ font-size:var(--letra-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--gray); font-weight:700 }
body.crm .chips-servicio label::before{ content:"＋"; font-weight:700; color:var(--gray) }
body.crm .chips-servicio label:has(input:checked)::before{ content:"✓" }
body.crm .chips-servicio label.propio:has(input:checked){ background:var(--ok-bg); color:var(--ok-txt); border-color:transparent; font-weight:700 }
body.crm .chips-servicio label.gestion:has(input:checked){ background:var(--ne-bg); color:var(--ne-txt); border-color:transparent; font-weight:700 }
body.crm .chips-servicio label:has(input:checked)::before,
body.crm .chips-servicio label:has(input:checked) small{ color:inherit }
body.crm .chips-servicio label:has(input:focus-visible){ outline:2px solid var(--fam-comercial); outline-offset:2px }
body.crm .prob-auto{ font-size:var(--letra-xs); font-weight:700; color:var(--t-tx); background:var(--t-bg); border-radius:var(--r-pildora); padding:.1rem .5rem; margin-left:.3rem }

/* El tablero de Prospectos (?vista=tablero, 08/10/2026): una columna por etapa
   abierta, con el punto en el tono de su etapa del embudo; se arrastra como el
   de Pendientes (.arrastrando / .encima). Ganar y perder, franjas abajo que
   solo se encienden mientras se arrastra. */
body.crm .bloque > h2 .prosp-vista{ font-size:var(--letra-sm); font-weight:700 }
body.crm .prosp-ayuda{ margin:0 0 .8rem }
body.crm .prosp-tablero{ display:grid; grid-template-columns:repeat(5, minmax(210px, 1fr)); gap:.9rem; overflow-x:auto; padding-bottom:.4rem; align-items:start }
body.crm .prosp-columna{ border-radius:var(--r-grande); padding:.9rem .75rem; min-height:10rem;
  background:color-mix(in srgb, var(--c-fondo) 70%, var(--c-borde-fuerte)); transition:background .15s, box-shadow .15s }
html.oscuro body.crm .prosp-columna{ background:color-mix(in srgb, var(--c-superficie) 60%, var(--c-fondo)); box-shadow:inset 0 0 0 1px var(--c-borde) }
body.crm .prosp-columna.encima, body.crm .prosp-soltar.encima{ background:var(--c-morado-tinte); box-shadow:inset 0 0 0 2px var(--c-morado) }
body.crm .prosp-columna > h2{ display:flex; align-items:center; gap:.5rem; margin:0 0 .7rem; padding:0 .25rem;
  font-size:var(--letra-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-tinta-suave) }
body.crm .prosp-columna > h2 .etiqueta{ margin-left:auto; background:var(--c-superficie); color:var(--c-tinta); letter-spacing:0 }
body.crm .prosp-punto{ width:.6rem; height:.6rem; border-radius:var(--r-pildora); background:var(--et, var(--c-morado)); flex:none }
body.crm .prosp-zona{ display:flex; flex-direction:column; gap:.6rem; min-height:4rem }
body.crm .prosp-tarjeta{ display:grid; gap:.45rem; padding:.75rem .8rem; border-radius:var(--r-medio);
  background:var(--c-superficie); box-shadow:var(--sombra-2); transition:transform .15s, box-shadow .15s }
html.oscuro body.crm .prosp-tarjeta{ box-shadow:inset 0 0 0 1px var(--c-borde) }
body.crm .prosp-tarjeta[draggable=true]{ cursor:grab }
body.crm .prosp-tarjeta[draggable=true]:hover{ transform:translateY(-1px); box-shadow:var(--sombra-3) }
body.crm .prosp-tarjeta.arrastrando{ opacity:.45; cursor:grabbing }
body.crm .prosp-tarjeta .nom{ font-weight:700; line-height:1.3; color:var(--c-tinta); text-decoration:none; overflow-wrap:anywhere }
body.crm .prosp-tarjeta .nom:hover{ text-decoration:underline }
body.crm .prosp-tarjeta .cifras{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-size:var(--letra-sm) }
body.crm .prosp-tarjeta .cifras span{ color:var(--c-tinta-suave) }
body.crm .prosp-tarjeta .paso{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .4rem; font-size:var(--letra-xs); color:var(--c-tinta-suave) }
body.crm .prosp-tarjeta .paso .txt{ flex-basis:100%; line-height:1.3 }
body.crm .prosp-mover{ margin:0 }
body.crm .prosp-mover select{ width:100%; padding:.2rem .4rem; font-size:var(--letra-xs); border-radius:var(--r-chico) }
body.crm .prosp-cierre{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:.9rem }
body.crm .prosp-soltar{ display:grid; gap:.1rem; justify-items:center; text-align:center; padding:.9rem 1rem; border-radius:var(--r-grande);
  border:2px dashed var(--c-borde-fuerte); color:var(--c-tinta-suave); font-size:var(--letra-sm); opacity:.55; transition:opacity .15s, background .15s, box-shadow .15s }
body.crm .prosp-soltar b{ font-size:var(--letra-base) }
body.crm .prosp-soltar.gana b{ color:var(--c-ok-texto) }
body.crm .prosp-soltar.pierde b{ color:var(--c-error-texto) }
body.crm .prosp-cierre.activo .prosp-soltar{ opacity:1 }
body.crm .prosp-soltar.gana.encima{ background:var(--c-ok-fondo); box-shadow:inset 0 0 0 2px var(--c-ok-texto); border-color:transparent }
body.crm .prosp-soltar.pierde.encima{ background:var(--c-error-fondo); box-shadow:inset 0 0 0 2px var(--c-error-texto); border-color:transparent }
body.crm .prosp-motivo{ border:0; border-radius:var(--r-grande); padding:1.4rem; max-width:30rem; background:var(--c-superficie); color:var(--c-tinta); box-shadow:var(--sombra-3) }
body.crm .prosp-motivo::backdrop{ background:rgba(15,22,27,.45) }
body.crm .prosp-motivo h3{ margin:0 0 1rem; font-size:var(--letra-lg) }
body.crm .prosp-motivo .botones{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem }
/* El aviso «Deshacer» del tablero ya es la pieza compartida .aviso-deshacer (sección 12). */
@media (max-width:900px){
  body.crm .prosp-tablero{ grid-template-columns:repeat(5, minmax(78vw, 1fr)); scroll-snap-type:x mandatory }
  body.crm .prosp-columna{ scroll-snap-align:start }
  body.crm .prosp-cierre{ display:none }
  body.crm .prosp-fila{ grid-template-columns:minmax(0,1fr) auto; gap:.7rem 1rem }
  body.crm .prosp-fila.encabezado{ display:none }
  body.crm .prosp-fila .prob, body.crm .prosp-fila .paso{ grid-column:1 / -1 }
}
@media (max-width:640px){
  body.crm .etapas-ficha .etapa-perdido{ margin-left:0; flex-wrap:wrap }
  body.crm .etapa-v{ grid-template-columns:minmax(0,1fr) auto }
  body.crm .etapa-v .barra-v{ grid-column:1 / -1; grid-row:2 }
  body.crm .etapa-v.vacia{ grid-template-columns:1fr }
  body.crm .etapa-v.vacia .raya{ display:none }
  body.crm .prosp-fila{ padding-inline:1rem }
  body.crm .embudo-pie .total-v{ margin-left:0 }
}
@supports (color:oklch(from red l c h)){
  html:not(.oscuro) body.crm :is(.etapa-v,.prosp-columna).et-5{ --et:oklch(from var(--c-morado) calc(l - .1192) calc(c + .0022) calc(h - 2.34)) }
}
html.oscuro body.crm :is(.etapa-v,.prosp-columna).et-5{ --et:color-mix(in oklab, var(--c-morado) 62%, #fff) }


/* ===========================================================================
   20. COTIZACIONES
   =========================================================================== */


/* --- Cotizaciones (revisión 04/10/2026) ----------------------------------
   Las vencidas en tarjeta, con la respuesta del cliente en tres botones del
   mismo peso; el listado en renglones como los de Prospectos. */
body.crm .cot-sin .boton{ margin-top:.2rem }
body.crm .cot-respuesta{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; width:100%;
  margin-top:auto; padding-top:.6rem; border-top:1px dashed var(--line) }
body.crm .cot-respuesta .et{ font-size:var(--letra-xs); color:var(--gray); margin-right:.15rem }
body.crm .cot-respuesta button{ font:inherit; font-size:var(--letra-sm); font-weight:700; cursor:pointer;
  min-height:32px; padding:0 .75rem; border-radius:var(--r-pildora); border:1px solid var(--line);
  background:var(--white); color:var(--ink) }
body.crm .cot-respuesta button:hover{ border-color:var(--ink) }
body.crm .cot-respuesta button.si:hover{ background:var(--ok-bg); color:var(--ok-txt); border-color:transparent }
body.crm .cot-respuesta button:focus-visible{ outline:2px solid var(--fam-comercial); outline-offset:2px }
body.crm .cot-sin > .boton{ margin-top:0 }
body.crm .cot-fila{ display:grid; grid-template-columns:minmax(0,1.6fr) 11rem 7.5rem 9.5rem; gap:1.1rem; align-items:center;
  padding:1rem 1.5rem; border-top:1px solid var(--line) }
body.crm .cot-fila.encabezado{ padding-block:.3rem .6rem; border-top:0; font-size:var(--letra-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--et-txt); font-weight:700 }
body.crm .cot-fila.encabezado .num{ text-align:right }
body.crm .cot-fila .quien{ display:grid; gap:.35rem; min-width:0 }
body.crm .cot-fila .nombre{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem }
body.crm .cot-fila .nombre a{ color:var(--ink); font-weight:700; font-size:var(--letra-md); text-decoration:none }
body.crm .cot-fila .nombre a:hover{ color:var(--fam-comercial); text-decoration:underline }
body.crm .cot-fila .dato{ font-size:var(--letra-sm); color:var(--gray) }
body.crm .cot-fila .dato a{ color:var(--gray) }
body.crm .cot-fila .dato a:hover{ color:var(--fam-comercial) }
body.crm .cot-fila .dinero{ display:grid; text-align:right; line-height:1.25 }
body.crm .cot-fila .dinero b{ font-size:var(--letra-md); color:var(--ink) }
body.crm .cot-fila .dinero span{ font-size:var(--letra-xs); color:var(--gray) }
body.crm .cot-fila .margen{ display:grid; justify-items:end; gap:.2rem }
body.crm .cot-fila .margen small, body.crm .cot-fila .estado small{ font-size:var(--letra-xs); color:var(--gray) }
body.crm .cot-fila .estado{ display:grid; justify-items:start; gap:.25rem }
body.crm .cot-fila .estado small.tarde{ color:var(--cr-txt); font-weight:700 }
body.crm .cot-porque{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; width:100%;
  padding:.65rem; border-radius:var(--r-medio); background:var(--white) }
body.crm .cot-porque .et{ width:100%; font-size:var(--letra-xs); font-weight:700; color:var(--ink) }
body.crm .cot-porque button{ font:inherit; font-size:var(--letra-xs); font-weight:700; cursor:pointer; min-height:32px;
  padding:0 .7rem; border-radius:var(--r-pildora); border:1px solid var(--line); background:var(--fondo-crm); color:var(--ink) }
body.crm .cot-porque button:hover{ border-color:var(--ink) }
body.crm .cot-porque .otro{ display:flex; gap:.35rem; width:100%; margin-top:.15rem }
body.crm .cot-porque .otro input{ flex:1; min-width:0; min-height:32px; font:inherit; font-size:var(--letra-sm);
  padding:0 .6rem; border:1px solid var(--line); border-radius:var(--r-chico); background:var(--white); color:var(--ink) }
body.crm .cot-respuesta button.no[aria-expanded="true"]{ background:var(--cr-bg); color:var(--cr-txt); border-color:transparent }
@media (max-width:900px){
  body.crm .cot-fila{ grid-template-columns:minmax(0,1fr) auto; gap:.6rem 1rem }
  body.crm .cot-fila.encabezado{ display:none }
  body.crm .cot-fila .margen{ justify-items:start }
}
@media (max-width:640px){
  body.crm .cot-fila{ padding-inline:1rem }
}


/* ===========================================================================
   21. FACTURACIÓN
   =========================================================================== */


/* Facturación: el cliente con su código en un cuadrito, como las tarjetas de
   Clientes; el subtotal y el IVA en gris (se leen poco) y lo que depositan,
   que es lo que se va a ver en el banco, en grande. */
body.crm .fac-cliente{ display:flex; align-items:center; gap:.8rem; min-width:14rem }
body.crm .fac-codigo{
  flex:none; padding:.45rem .5rem; border-radius:var(--r-medio); background:var(--c-ok-fondo); color:var(--c-ok-texto);
  font-weight:700; font-size:var(--letra-sm); letter-spacing:-.01em;
}
html.oscuro body.crm .fac-codigo{ background:var(--c-verde-tinte); color:var(--c-verde-hondo) }
body.crm .fac-quien{ display:flex; flex-direction:column; gap:.1rem; min-width:0 }
body.crm .fac-quien > a{ font-weight:700; color:var(--ink); text-decoration:none }
body.crm .fac-quien > a:hover{ text-decoration:underline }
body.crm .fac-quien small{ color:var(--ink-soft); font-size:var(--letra-sm) }
body.crm .fac-quien .chip{ align-self:flex-start; margin-top:.2rem }
body.crm table.tabla td.gris{ color:var(--ink-soft) }
body.crm table.tabla td.fac-monto{ font-weight:700; font-size:var(--letra-md); color:var(--ink) }

/* --- Facturación ---------------------------------------------------------- */
body.crm .subir-xml{
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap; padding:1rem 1.1rem;
  border:2px dashed var(--line); border-radius:var(--r-medio); background:var(--tint);
}
body.crm .subir-xml > .ico{
  width:46px; height:46px; border-radius:var(--r-medio); flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--t-bg); color:var(--t-tx);
}
body.crm .subir-xml > div{ flex:1 1 18rem }
body.crm .lista-renglones .fac-codigo{ padding:.3rem .45rem; font-size:var(--letra-xs) }

/* El XML de cada factura en «Ya emitido»: un botón chico en vez del control
   nativo, que en la celda se leía «Seleccionar archivo Sin …ados» (04/10/2026). */
body.crm label.subir-xml{ position:relative;
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.3rem; padding:.25rem .7rem;
  border:1px dashed var(--line); border-radius:var(--r-pildora); font-size:var(--letra-xs); font-weight:700;
  color:var(--ink-soft); cursor:pointer; max-width:14rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
body.crm label.subir-xml:hover{ border-color:var(--cyan); color:var(--ink) }
body.crm label.subir-xml.listo{ border-style:solid; border-color:var(--verde,var(--c-verde)); color:var(--ink) }
body.crm label.subir-xml input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
body.crm label.subir-xml:focus-within{ outline:3px solid var(--cyan); outline-offset:2px }

/* ===== Lienzo de Facturación (04/10/2026) -------------------------------------
   Por generar en renglones y dos grupos, Revisar a todo lo ancho con la cuenta
   en piezas, la gráfica de una barra por mes y lo que no se factura en una línea. */
body.crm .fac-grupo{ display:flex; align-items:center; gap:.6rem; padding:.9rem 1.5rem .35rem;
  font-size:var(--letra-xs); letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--et-txt) }
body.crm .fac-grupo .punto{ width:9px; height:9px; border-radius:50%; background:var(--c-aviso-punto); flex:none }
body.crm .fac-grupo.viene .punto{ background:transparent; box-shadow:inset 0 0 0 2px var(--et-txt) }
body.crm .fac-grupo .suma{ margin-left:auto; letter-spacing:0; text-transform:none; font-size:var(--letra-base); color:var(--ink-soft); font-variant-numeric:tabular-nums }
body.crm .fac-fila{ display:grid; gap:1rem; align-items:center;
  padding:.75rem 1.5rem; border-top:1px solid var(--line);
  grid-template-columns:auto minmax(0,1fr) 10.5rem 12rem;
}
body.crm .fac-grupo + .fac-fila{ border-top:0 }
body.crm .fac-fila > input{ display:none }
#generar-todas .fac-fila{ grid-template-columns:auto auto minmax(0,1fr) 10.5rem 12rem }   /* + casilla (08/10/2026) */
body.crm .fac-cuando{ display:grid; gap:.1rem; justify-items:start }
body.crm .fac-cuando small{ font-size:var(--letra-xs); color:var(--gray) }
body.crm .fac-dinero{ display:grid; text-align:right; line-height:1.25; font-variant-numeric:tabular-nums }
body.crm .fac-dinero b{ font-size:var(--letra-lg); color:var(--ink) }
body.crm .fac-dinero small{ font-size:var(--letra-xs); color:var(--gray) }
body.crm .fac-aparte{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.65rem 1.5rem;
  background:var(--at-bg); color:var(--at-txt); font-size:var(--letra-base) }
body.crm .fac-aparte svg{ width:18px; height:18px; flex:none }
body.crm .fac-aparte a{ color:inherit; font-weight:700; margin-left:auto }
body.crm .fac-pie-generar{ display:flex; flex-wrap:wrap; gap:1rem 1.2rem; align-items:flex-end; padding:1rem 1.5rem 1.2rem;
  border-top:1px solid var(--line); background:var(--fondo-crm) }
body.crm .fac-pie-generar .total{ display:grid; line-height:1.2 }
body.crm .fac-pie-generar .total small{ font-size:var(--letra-xs); letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--et-txt) }
body.crm .fac-pie-generar .total b{ font-size:var(--letra-xl); color:var(--ink); font-variant-numeric:tabular-nums }
body.crm .fac-pie-generar .acciones{ margin-left:auto; display:flex; gap:.6rem; flex-wrap:wrap }
body.crm .fac-revisar{ display:grid; gap:1rem }
body.crm .fac-revisa{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:1.4rem;
  background:var(--c-aviso-fondo); border-radius:var(--r-grande); padding:1.1rem 1.25rem }
html.oscuro body.crm .fac-revisa{ background:var(--ambar-bg) }
body.crm .bloque .cuerpo .fac-revisa h3{ margin:.5rem 0 0; padding:0; font-size:var(--letra-lg); color:var(--ink); text-transform:none; letter-spacing:0; font-weight:700 }
body.crm .bloque .cuerpo .fac-revisa h3 small{ display:block; text-transform:none; letter-spacing:0; font-size:var(--letra-base); font-weight:400; color:var(--ink-soft) }
body.crm .fac-revisa .otro{ margin:.35rem 0 0; font-size:var(--letra-sm); color:var(--at-txt) }
body.crm .fac-revisa .cuenta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.9rem; font-variant-numeric:tabular-nums }
body.crm .fac-revisa .pz{ background:var(--white); border-radius:var(--r-medio); padding:.4rem .65rem; font-size:var(--letra-sm); line-height:1.2; color:var(--ink-soft) }
body.crm .fac-revisa .pz b{ display:block; font-size:var(--letra-md); color:var(--ink) }
body.crm .fac-revisa .pz.fijo{ outline:2px dashed var(--c-aviso-punto); outline-offset:-2px }
body.crm .fac-revisa .op{ color:var(--at-txt); font-weight:900 }
body.crm .fac-revisa .pregunta{ margin:.6rem 0 0; font-size:var(--letra-base); color:var(--at-txt) }
body.crm .fac-revisa .por-que{ margin:.6rem 0 0; padding-left:1.1rem; font-size:var(--letra-base); color:var(--ink-soft); line-height:1.5 }
body.crm .fac-revisa .forma{ display:grid; gap:.6rem; align-content:start; background:var(--white); border-radius:var(--r-medio); padding:1rem }
body.crm .fac-revisa .forma label{ margin:0 }
body.crm .fac-revisa .forma input[type=text]{ font-size:var(--letra-lg); font-variant-numeric:tabular-nums }
body.crm .fac-revisa .desglose{ display:grid; grid-template-columns:1fr auto; gap:.1rem .8rem; font-size:var(--letra-base); color:var(--ink-soft); font-variant-numeric:tabular-nums }
body.crm .fac-revisa .desglose span:nth-child(even){ text-align:right }
body.crm .fac-revisa .desglose .fin{ font-weight:900; color:var(--ink); font-size:var(--letra-md); border-top:1px solid var(--line); padding-top:.3rem; margin-top:.15rem }
body.crm .fac-fuera-linea{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--white);
  border-radius:var(--r-medio); padding:.75rem 1.2rem; margin-bottom:1.2rem; font-size:var(--letra-base); box-shadow:var(--sombra-2) }
body.crm .fac-fuera-linea a{ color:var(--ink); font-weight:700 }
body.crm .fac-fuera-linea .fac-codigo{ padding:.3rem .45rem; font-size:var(--letra-xs) }
body.crm .fac-fuera-linea .pastilla{ margin-left:auto }
body.crm .grafica-fac .barra-emi{ fill:#BDEBF5 }
html.oscuro body.crm .grafica-fac .barra-emi{ fill:#164A57 }
body.crm .grafica-fac .barra-cob{ fill:var(--cyan) }
body.crm .grafica-fac .barra-hueco{ fill:none; stroke:var(--cr-txt); stroke-dasharray:3 3 }
body.crm .grafica-fac .mes-actual{ fill:var(--fondo-crm) }
body.crm .grafica-fac text.lbl-hueco{ fill:var(--cr-txt); font-weight:700 }
body.crm .grafica-fac text.lbl-pct{ fill:var(--ink-soft); font-weight:700 }
body.crm .grafica-fac text.lbl-actual{ fill:var(--ink); font-weight:700 }
body.crm .leyenda i.fac-ley-emi{ background:#BDEBF5 }
html.oscuro body.crm .leyenda i.fac-ley-emi{ background:#164A57 }
body.crm .leyenda i.fac-ley-hueco{ background:transparent; border:1.5px dashed var(--cr-txt) }
body.crm a.mov-cli .fac-codigo{ padding:.35rem .45rem; font-size:var(--letra-sm) }
@media (max-width:640px){
  body.crm .fac-fila{ grid-template-columns:auto minmax(0,1fr); gap:.35rem .8rem }
  body.crm .fac-fila .fac-cuando, body.crm .fac-fila .fac-dinero{ grid-column:2; text-align:left }
  body.crm #generar-todas .fac-fila{ grid-template-columns:auto auto minmax(0,1fr) }
  body.crm #generar-todas .fac-fila .fac-cuando, body.crm #generar-todas .fac-fila .fac-dinero{ grid-column:3 }
  body.crm .fac-revisa{ grid-template-columns:minmax(0,1fr) }
  body.crm .fac-pie-generar .acciones{ margin-left:0 }
}


/* ===========================================================================
   22. CIERRE
   =========================================================================== */


/* --- La lista de pasos del cierre --------------------------------------- */

/* El borde de la izquierda es el semáforo. Va de color y no de icono porque
   se lee de un vistazo desde lejos, que es como se mira una lista de siete
   cosas buscando cuál falta. */
.tabla td.num.malo { color: var(--c-error-texto); font-weight: 700; }

/* --- Cierre: la línea de avance y el paso que sigue ------------------------- */
body.crm .cierre-linea{
  list-style:none; margin:0 0 1.4rem; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:0; counter-reset:none;
}
body.crm .cierre-linea li{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  text-align:center; font-size:var(--letra-xs); color:var(--ink-soft); padding:0 .25rem;
}

/* La raya que une los puntos. */
body.crm .cierre-linea li::before{
  content:""; position:absolute; top:1.05rem; left:-50%; right:50%; height:3px;
  background:var(--line); z-index:0;
}
body.crm .cierre-linea li:first-child::before{ display:none }
body.crm .cierre-linea li.listo::before{ background:var(--c-verde) }
body.crm .cierre-linea .punto{
  position:relative; z-index:1; width:2.1rem; height:2.1rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--letra-base);
  background:var(--white); box-shadow:inset 0 0 0 2px var(--line); color:var(--ink-soft);
}
body.crm .cierre-linea .listo .punto{ background:var(--c-verde); color:var(--c-sobre-color); box-shadow:none }
body.crm .cierre-linea .sigue .punto{ background:var(--c-tinta); color:var(--c-superficie); box-shadow:0 0 0 4px rgba(23,35,43,.12)}
body.crm .cierre-linea .sigue .nombre{ color:var(--ink); font-weight:700 }
html.oscuro body.crm .cierre-linea .sigue .punto{ background:var(--c-tinta); color:var(--c-superficie) }
body.crm .cierre-linea .nombre{ line-height:1.25; max-width:9rem }

/* ---------------------------------------------------------------------------
   CIERRE (05/10/2026) — el paso que sigue abierto, los demás en un renglón;
   la radiografía lado a lado y con estado vacío en vez de tablas en ceros.
   Para deshacer: borrar este bloque y regresar cierre.php
   (~/bgu-portal-datos/cierre.php.antes-rediseno-2026-10-05).
   --------------------------------------------------------------------------- */

/* En la línea de avance, lo que falta y todavía no toca va en gris: rojo
   en cinco círculos a la vez era alarma sin orden. */
body.crm .cierre-linea .falta .punto{ box-shadow:inset 0 0 0 2px var(--line); color:var(--et-txt) }
body.crm .cie-pasos{ list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem }
body.crm .cie-paso{ display:grid; grid-template-columns:2rem minmax(0,1fr) auto; gap:.2rem 1rem; align-items:center;
  padding:.8rem 1rem; border-radius:var(--r-medio); background:var(--white); border:1px solid var(--line) }
body.crm .cie-num{ width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:var(--letra-base); background:var(--ne-bg); color:var(--et-txt) }
body.crm .cie-tit{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
body.crm .cie-tit strong{ font-size:var(--letra-md); color:var(--ink) }
body.crm .cie-tit .pastilla{ font-size:var(--letra-xs) }
body.crm .cie-resumen{ margin:.15rem 0 0; font-size:var(--letra-base); color:var(--ink-soft) }
body.crm .cie-porque{ margin:.2rem 0 0; font-size:var(--letra-sm); color:var(--et-txt) }
body.crm .cie-porque summary{ cursor:pointer; width:max-content; color:var(--et-txt) }
body.crm .cie-porque p{ margin:.3rem 0 0; max-width:62rem }
body.crm .cie-paso > .boton{ white-space:nowrap }

/* El que sigue: tarjeta con sombra, número en tinta, porqué a la vista. */
body.crm .cie-paso.cie-sigue{ border-color:transparent; padding:1.15rem 1.2rem; align-items:start;
  box-shadow:inset 4px 0 0 var(--c-error-punto), var(--sombra-3) }
body.crm .cie-sigue .cie-num{ background:var(--c-tinta); color:var(--c-superficie); width:2.3rem; height:2.3rem; font-size:var(--letra-md) }
html.oscuro body.crm .cie-sigue .cie-num{ background:var(--c-tinta); color:var(--c-superficie) }
body.crm .cie-sigue .cie-tit strong{ font-size:var(--letra-lg) }
body.crm .cie-sigue .cie-resumen{ font-size:var(--letra-md); color:var(--ink); font-weight:600; margin-top:.3rem }
body.crm .cie-detalle{ margin:.35rem 0 0; font-size:var(--letra-base); color:var(--ink-soft); max-width:62rem }
body.crm .cie-sigue > .boton{ align-self:center }
body.crm .cie-sigue-et{ display:inline-block; font-size:var(--letra-xs); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; background:var(--c-tinta); color:var(--c-superficie); border-radius:var(--r-pildora); padding:.18rem .55rem }
html.oscuro body.crm .cie-sigue-et{ background:var(--c-tinta); color:var(--c-superficie) }

/* Lo hecho: verde y en segundo plano. */
body.crm .cie-paso.cie-listo{ background:transparent }
body.crm .cie-listo .cie-num{ background:var(--c-verde); color:var(--c-sobre-color) }
body.crm .cie-listo .cie-tit strong, body.crm .cie-listo .cie-resumen{ color:var(--et-txt) }
body.crm .cie-nota{ display:flex; gap:.6rem; align-items:flex-start; margin:1.1rem 0 0; padding:.75rem 1rem;
  border-radius:var(--r-medio); background:var(--in-bg); color:var(--in-txt); font-size:var(--letra-base); line-height:1.45 }
body.crm .cie-nota .icono{ width:1.1rem; height:1.1rem; flex:none; margin-top:.1rem }

/* La radiografía: dos tarjetas lado a lado. */
body.crm .cie-radio{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; align-items:start }
body.crm .cie-radio > .bloque{ margin:0 }
body.crm .cie-vacio{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; padding:1.2rem .5rem .6rem }
body.crm .cie-vacio strong{ font-size:var(--letra-md); color:var(--ink) }
body.crm .cie-vacio p{ margin:0 0 .5rem; max-width:26rem; font-size:var(--letra-base); color:var(--ink-soft) }
body.crm .cie-vacio-ico{ background:var(--t-bg); color:var(--t-tx); width:3rem; height:3rem; border-radius:var(--r-medio); display:grid; place-items:center; margin-bottom:.3rem }
body.crm .cie-vacio-ico .icono{ width:1.45rem; height:1.45rem }
body.crm .cie-compara + .cie-compara{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line) }
body.crm .cie-c-cab{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.55rem }
body.crm .cie-c-fila{ display:grid; grid-template-columns:3.5rem minmax(0,1fr) auto; gap:.8rem; align-items:center;
  font-size:var(--letra-base); color:var(--et-txt); margin-top:.3rem }
body.crm .cie-c-barra{ height:.6rem; border-radius:var(--r-pildora); background:var(--ne-bg); overflow:hidden }
body.crm .cie-c-barra i{ display:block; height:100%; border-radius:var(--r-pildora) }
body.crm .cie-c-barra i.ban{ background:var(--ink) }
body.crm .cie-c-barra i.crm{ background:var(--fam-dinero) }
body.crm .cie-c-monto{ font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; min-width:7.5rem; text-align:right }
body.crm .cie-incompleto{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; font-size:var(--letra-sm); color:var(--at-txt);
  background:var(--at-bg); border-radius:var(--r-medio); padding:.55rem .8rem; margin-bottom:.9rem }
body.crm .cie-incompleto span:last-child{ flex:1 1 14rem }
body.crm .cie-er-fila{ display:grid; grid-template-columns:minmax(8rem,1fr) minmax(3rem,7rem) 7.5rem 3.6rem; gap:.8rem;
  align-items:center; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:var(--letra-base); font-variant-numeric:tabular-nums }
body.crm .cie-er-fila > :nth-child(3), body.crm .cie-er-pct{ text-align:right }
body.crm .cie-er-pct{ color:var(--et-txt); font-size:var(--letra-sm) }
body.crm .cie-er-barra{ height:.45rem; border-radius:var(--r-pildora); background:var(--ne-bg); overflow:hidden }
body.crm .cie-er-barra i{ display:block; height:100%; background:var(--fam-operacion); border-radius:var(--r-pildora) }
body.crm .cie-cero{ color:var(--et-txt) }
body.crm .cie-cero .cie-er-barra{ visibility:hidden }
body.crm .cie-er-ing strong{ color:var(--ok-txt) }
body.crm .cie-er-total{ border-bottom:0; margin-top:.4rem; padding:.8rem .9rem; border-radius:var(--r-medio); background:var(--ok-bg); font-size:var(--letra-md) }
body.crm .cie-er-total strong, body.crm .cie-er-total > span:first-child{ font-weight:800; color:var(--ok-txt) }
body.crm .cie-er-total.negativa{ background:var(--cr-bg) }
body.crm .cie-er-total.negativa strong, body.crm .cie-er-total.negativa > span:first-child{ color:var(--cr-txt) }
@media (max-width:1180px){
  body.crm .cie-radio{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:900px){
  body.crm .cie-porque summary{ min-height:2.75rem; display:flex; align-items:center }
}
@media (max-width:640px){
  /* Solo el que sigue lleva el borde rojo fuerte; los demás que faltan, tenue. */
  body.crm .cierre-linea .nombre{ display:none }
  body.crm .cie-paso{ grid-template-columns:2rem minmax(0,1fr); align-items:start }
  body.crm .cie-paso > .boton{ grid-column:2; justify-self:start; margin-top:.4rem }
  body.crm .cie-er-fila{ grid-template-columns:minmax(0,1fr) 7rem 3.2rem }
  body.crm .cie-er-barra, body.crm .cie-er-fila > span:nth-child(2){ display:none }
}


/* ===========================================================================
   23. FINANZAS (Resumen, Flujo, Cobranza, Por cliente, Movimientos, Socio)
   =========================================================================== */


/* -------------------------------------------------------------------------
   Finanzas › Resumen (05/10/2026): margen por mes en la gráfica,
   estado de resultados en cascada y punto de equilibrio como regla.
   ------------------------------------------------------------------------- */
body.crm .ico.ambar{ background:var(--at-bg); color:var(--at-txt) }
html body.crm .grafica .barra-egr.naranja{ fill:var(--fam-operacion); opacity:1 }
html body.crm .grafica .barra-egr.naranja.tenue{ opacity:.42 }
html body.crm .grafica .barra-egr.rayada{ fill:url(#rayas-egr); stroke:var(--fam-operacion); stroke-width:1.2; opacity:1 }
body.crm .grafica .raya{ fill:var(--fam-operacion) }
body.crm .grafica text.falta{ fill:var(--at-txt) }
body.crm .grafica .margen.ok rect{ fill:var(--ok-bg) }
body.crm .grafica .margen.ok text{ fill:var(--ok-txt) }
body.crm .grafica .margen.at rect{ fill:var(--at-bg) }
body.crm .grafica .margen.at text{ fill:var(--at-txt) }
body.crm .grafica .margen.cr rect{ fill:var(--cr-bg) }
body.crm .grafica .margen.cr text{ fill:var(--cr-txt) }
body.crm .grafica .margen.ne rect{ fill:var(--ne-bg) }
body.crm .grafica .margen.ne text{ fill:var(--ne-txt) }
body.crm .leyenda i.rayas{ background:repeating-linear-gradient(45deg,var(--fam-operacion) 0 2px,transparent 2px 4px); border:1px solid var(--fam-operacion) }
body.crm .fin-resumen{ align-items:start }
body.crm .fin-aviso{ align-items:flex-start; margin-bottom:1rem; flex-wrap:nowrap }
body.crm .fin-aviso .ico{ width:26px; height:26px; border-radius:var(--r-chico); display:inline-grid; place-items:center; font-weight:700; flex:none }
body.crm .fin-cas-cab, body.crm .fin-cas-fila{
  display:grid; grid-template-columns:minmax(8rem,1.1fr) minmax(4rem,1.2fr) 7.6rem 7rem; gap:.8rem; align-items:center }
body.crm .fin-cas-cab{ font-size:var(--letra-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--et-txt);
  padding-bottom:.4rem; border-bottom:1px solid var(--line) }
body.crm .fin-cas-cab > :nth-child(3), body.crm .fin-cas-cab > :nth-child(4){ text-align:right }
body.crm .fin-cas-fila{ padding:.55rem 0; border-bottom:1px solid var(--line) }
body.crm .fin-cas-fila.resta .fin-cas-et{ padding-left:.9rem; color:var(--et-txt) }
body.crm .fin-cas-fila.resta .fin-cas-et::before{ content:"− " }
body.crm .fin-cas-fila.total{ border-top:1.5px solid var(--ink); margin-top:-1px }
body.crm .fin-cas-fila.total .fin-cas-et, body.crm .fin-cas-fila.total .fin-cas-monto{ font-weight:700 }
body.crm .fin-cas-pista{ position:relative; height:14px; border-radius:4px; background:var(--ne-bg) }
body.crm .fin-cas-pista b{ position:absolute; top:0; bottom:0; border-radius:4px }
body.crm .fin-cas-pista b.base { background:var(--fam-hoy) }
body.crm .fin-cas-pista b.resta{ background:var(--fam-operacion) }
body.crm .fin-cas-pista b.queda{ background:var(--fam-dinero) }
body.crm .fin-cas-pista b.neg  { background:var(--rojo) }
body.crm .fin-cas-monto{ text-align:right; font-variant-numeric:tabular-nums; font-size:var(--letra-md) }
body.crm .fin-cas-monto small{ display:block; color:var(--et-txt); font-size:var(--letra-xs); font-weight:400 }
body.crm .fin-chip{ justify-self:end; font-size:var(--letra-xs); font-weight:700; border-radius:var(--r-pildora); padding:.15rem .55rem; white-space:nowrap }
body.crm .fin-chip.ok{ background:var(--ok-bg); color:var(--ok-txt) }
body.crm .fin-chip.at{ background:var(--at-bg); color:var(--at-txt) }
body.crm .fin-chip.cr{ background:var(--cr-bg); color:var(--cr-txt) }
body.crm .fin-chip.ne{ background:var(--ne-bg); color:var(--ne-txt) }
body.crm .fin-ceros{ margin:.6rem 0 0; padding-left:.9rem; font-size:var(--letra-base); color:var(--et-txt) }
body.crm .fin-resumen details.como{ display:block; margin-top:1rem }
body.crm .fin-eq-titular{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap }
body.crm .fin-eq-grande{ font-size:var(--letra-3xl); font-weight:700; line-height:1; font-variant-numeric:tabular-nums }
body.crm .fin-eq-grande.ok{ color:var(--ok-txt) }
body.crm .fin-eq-grande.cr{ color:var(--cr-txt) }
body.crm .fin-regla{ margin-top:1.3rem }
body.crm .fin-regla-barra{ position:relative; height:22px; border-radius:var(--r-chico); background:var(--ne-bg); display:flex }
body.crm .fin-regla-barra i.pierde{ background:var(--cr-bg); border-radius:6px 0 0 6px }
body.crm .fin-regla-barra i.colchon{ background:var(--ok-bg); border-left:3px solid var(--ink) }
body.crm .fin-regla-pin{ position:absolute; top:-6px; bottom:-6px; width:3px; margin-left:-1px; border-radius:2px; background:var(--fam-hoy) }
body.crm .fin-regla-rot{ display:flex; justify-content:space-between; gap:1rem; margin-top:.5rem; font-size:var(--letra-xs); color:var(--et-txt) }
body.crm .fin-regla-rot span:last-child{ text-align:right }
body.crm .fin-regla-rot b{ display:block; color:var(--ink); font-size:var(--letra-base); font-variant-numeric:tabular-nums }
body.crm .fin-regla-rot b.cr{ color:var(--cr-txt) }
body.crm .fin-eq-mini{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:1.1rem }
body.crm .fin-eq-mini > div{ background:var(--fondo-crm); border-radius:var(--r-medio); padding:.65rem .8rem; display:flex; flex-direction:column; gap:.25rem; min-width:0 }
body.crm .fin-eq-mini span{ display:flex; align-items:center; gap:.45rem; font-size:var(--letra-xs); color:var(--et-txt) }
body.crm .fin-eq-mini .ico{ width:22px; height:22px; border-radius:var(--r-chico); display:inline-grid; place-items:center; font-size:var(--letra-xs); font-weight:700; flex:none }
body.crm .fin-eq-mini b{ font-size:var(--letra-md); font-variant-numeric:tabular-nums }
body.crm .fin-eq-mini small{ font-size:var(--letra-xs); color:var(--et-txt) }
body.crm .fin-fuera{ display:flex; flex-direction:column }
body.crm .fin-fuera > div{ display:flex; align-items:center; gap:.75rem; padding:.7rem 0; border-top:1px solid var(--line) }
body.crm .fin-fuera > div:first-child{ border-top:0; padding-top:0 }
body.crm .fin-fuera .ico{ width:30px; height:30px; border-radius:var(--r-chico); display:inline-grid; place-items:center; font-weight:700; flex:none }
body.crm .fin-fuera > div > span{ flex:1; min-width:0 }
body.crm .fin-fuera small{ display:block; color:var(--et-txt); font-size:var(--letra-sm) }
body.crm .fin-fuera b{ font-variant-numeric:tabular-nums; white-space:nowrap }
body.crm .fin-prop{ display:block; height:8px; border-radius:4px; background:var(--ne-bg); margin-top:.4rem; overflow:hidden }
body.crm .fin-prop i{ display:block; height:100%; background:var(--fam-comercial); border-radius:4px }
body.crm .fin-aviso > span{ flex:1 1 auto; min-width:0 }

/* -------------------------------------------------------------------------
   Finanzas › Flujo de efectivo (05/10/2026)
   ------------------------------------------------------------------------- */
body.crm .kpi .cambio.aviso{ color:var(--at-txt); font-weight:700 }
body.crm .fin-flu-oscura .cifra{ white-space:nowrap }
body.crm .fin-flu-rango{ display:block; height:10px; border-radius:var(--r-chico); background:linear-gradient(90deg,var(--c-aviso-punto),var(--c-verde)); margin-top:.5rem }
body.crm .fin-flu-rango-rot{ display:flex; justify-content:space-between; gap:1rem; font-size:var(--letra-xs); color:#B8C5CE }
body.crm .fin-flu-rango-rot span:last-child{ text-align:right }
body.crm .fin-flu-rango-rot b{ display:block; color:#fff; font-size:var(--letra-base); font-variant-numeric:tabular-nums }
body.crm .fin-flu-oscura details.como{ flex:none; margin-top:.4rem }
body.crm .grafica-flujo .flujo-cobro{ fill:var(--fam-dinero) }
body.crm .grafica-flujo .flujo-porf { fill:var(--fam-dinero); opacity:.4 }
body.crm .grafica-flujo .flujo-sale { fill:var(--fam-operacion) }
body.crm .grafica-flujo .flujo-saldo{ fill:none; stroke:var(--fam-hoy); stroke-width:3; stroke-linejoin:round }
body.crm .grafica-flujo .flujo-punto{ fill:var(--fam-hoy) }
body.crm .grafica-flujo .flujo-costumbre{ fill:none; stroke:var(--at-txt); stroke-width:2.5; stroke-dasharray:6 4 }
body.crm .grafica-flujo text.flujo-et-saldo{ fill:var(--fam-hoy) }
body.crm .grafica-flujo text.flujo-et-costumbre{ fill:var(--at-txt) }
body.crm .leyenda i.punteada{ width:16px; height:0; border-top:3px dashed var(--at-txt); border-radius:0; background:none }
body.crm .fin-semanas{ display:flex; flex-direction:column; padding-top:.4rem }
body.crm .fin-sem{ display:grid; grid-template-columns:5.2rem minmax(0,1fr) 7.5rem 9rem; gap:.9rem; align-items:center;
  padding:.65rem 0; border-top:1px solid var(--line) }
body.crm .fin-sem:first-child{ border-top:0 }
body.crm .fin-sem.vacia{ grid-template-columns:5.2rem minmax(0,1fr); color:var(--et-txt); font-size:var(--letra-base) }
body.crm .fin-sem-cuando{ font-weight:700 }
body.crm .fin-sem-cuando small{ display:block; font-weight:400; color:var(--et-txt); font-size:var(--letra-xs) }
body.crm .fin-piezas{ display:flex; flex-wrap:wrap; gap:.35rem }
body.crm .fin-pieza{ font-size:var(--letra-xs); border-radius:var(--r-pildora); padding:.1rem .6rem; white-space:nowrap; font-variant-numeric:tabular-nums }
body.crm .fin-pieza.entra{ background:var(--ok-bg); color:var(--ok-txt) }
body.crm .fin-pieza.porf { background:var(--ne-bg); color:var(--ne-txt); border:1px dashed var(--et-txt) }
body.crm .fin-pieza.sale { background:var(--c-naranja-tinte); color:var(--c-naranja-medio) }
html.oscuro body.crm .fin-pieza.sale{ background:var(--c-naranja-tinte); color:var(--c-naranja-hondo) }
body.crm .fin-sem-neto{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums }
body.crm .fin-sem-neto.pos{ color:var(--ok-txt) }
body.crm .fin-sem-neto.neg{ color:var(--cr-txt) }
body.crm .fin-sem-saldo{ text-align:right; font-variant-numeric:tabular-nums }
body.crm .fin-sem-saldo b{ display:block }
body.crm .fin-sem-saldo.neg b{ color:var(--cr-txt) }
body.crm .fin-barrita{ display:block; height:5px; border-radius:3px; background:var(--ne-bg); margin-top:.3rem; overflow:hidden }
body.crm .fin-barrita i{ display:block; height:100%; background:var(--fam-hoy); border-radius:3px }
body.crm .fin-arreglos{ margin-bottom:1.1rem }
body.crm .fin-cuentas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.9rem }
body.crm .fin-cuenta{ display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--line); border-radius:var(--r-medio);
  padding:.85rem 1rem; color:inherit; text-decoration:none; min-width:0 }
body.crm .fin-cuenta:hover{ border-color:var(--fam-dinero) }
body.crm .fin-cuenta.mal{ border-color:var(--cr-txt) }
body.crm .fin-cuenta-nom{ font-weight:700; font-size:var(--letra-base) }
body.crm .fin-cuenta-nom small{ font-weight:400; color:var(--et-txt) }
body.crm .fin-cuenta-saldo{ font-size:var(--letra-xl); font-weight:700; font-variant-numeric:tabular-nums }
body.crm .fin-cuenta-saldo.neg{ color:var(--cr-txt) }
body.crm .fin-cuenta-es{ font-size:var(--letra-xs); color:var(--et-txt) }
body.crm .fin-cuenta-chip{ align-self:flex-start; font-size:var(--letra-xs); font-weight:700; border-radius:var(--r-pildora); padding:.05rem .5rem; background:var(--at-bg); color:var(--at-txt) }
body.crm .fin-cuentas-total{ display:flex; justify-content:space-between; margin-top:1rem; padding-top:.75rem;
  border-top:1.5px solid var(--ink); font-weight:700; font-variant-numeric:tabular-nums }
body.crm .bloque .fin-semanas + *, body.crm .bloque .cuerpo > details.como{ display:block; margin-top:1rem }

/* ---------------------------------------------------------------------------
   Cobranza, Por cliente, Movimientos y Cuenta con el socio (06/10/2026,
   aplicado directo). Antigüedad en una barra por tramos, deudores agrupados por
   cliente, grupos de gasto en barras, clientes con barra partida y margen en
   chip, socio con años en barras.
   --------------------------------------------------------------------------- */

/* 31–60 y +90 sin medida oficial (naranja-rojo y vino de la escala): se quedan fijos. */
body.crm { --t-pv:var(--c-verde); --t-30:var(--c-aviso-punto); --t-60:#F08A24; --t-90:var(--c-error-punto); --t-mas:#A8262B }
body.crm .cob-t-por_vencer{ --t:var(--t-pv) }
body.crm .cob-t-d1_30{ --t:var(--t-30) }
body.crm .cob-t-d31_60{ --t:var(--t-60) }
body.crm .cob-t-d61_90{ --t:var(--t-90) }
body.crm .cob-t-d90_mas{ --t:var(--t-mas) }
body.crm .cob-barra{ display:flex; height:22px; border-radius:var(--r-chico); overflow:hidden; background:var(--ne-bg); gap:2px }
body.crm .cob-barra i{ display:block; height:100%; background:var(--t) }
body.crm .cob-tramos{ display:flex; flex-wrap:wrap; gap:.6rem 2.4rem; margin-top:1rem }
body.crm .cob-tramo{ display:flex; align-items:center; gap:.6rem }
body.crm .cob-tramo > i{ width:12px; height:12px; border-radius:4px; background:var(--t); flex:none }
body.crm .cob-tramo > span{ font-weight:700; font-size:var(--letra-base) }
body.crm .cob-tramo small{ display:block; font-weight:400; color:var(--et-txt); font-size:var(--letra-xs) }
body.crm .cob-tramo b{ font-variant-numeric:tabular-nums }
body.crm b.neg, body.crm .fcli-cifras b.neg{ color:var(--cr-txt) }
body.crm .cob-clientes{ display:flex; flex-direction:column; gap:.8rem }
body.crm .cob-cli{ border:1px solid var(--line); border-radius:var(--r-medio); padding:.85rem 1rem; box-shadow:inset 4px 0 0 var(--t) }
body.crm .cob-cli-cab{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap }
body.crm .cob-cli-nom{ flex:1 1 14rem; min-width:0; color:inherit; text-decoration:none }
body.crm a.cob-cli-nom:hover{ text-decoration:underline }
body.crm .cob-cli-saldo{ font-size:var(--letra-lg); font-variant-numeric:tabular-nums }
body.crm .cob-facs{ list-style:none; margin:.6rem 0 0; padding:0 }
body.crm .cob-facs li{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.55rem 0 0; margin-top:.55rem; border-top:1px dashed var(--line) }
body.crm .cob-fac-que{ flex:1 1 16rem; min-width:0; font-size:var(--letra-base) }
body.crm .cob-fac-que a{ color:inherit }
body.crm .cob-fac-que small{ display:block; color:var(--et-txt); font-size:var(--letra-xs) }
body.crm .cob-facs b{ font-variant-numeric:tabular-nums }
body.crm .cob-cobrar{ min-height:34px; font-size:var(--letra-sm); border-radius:var(--r-pildora) }
body.crm .cob-pagar li > a{ color:inherit; text-decoration:none }
body.crm .cob-pagar li > a small{ display:block; color:var(--et-txt); font-size:var(--letra-xs) }
body.crm .cob-pagar li > b{ font-variant-numeric:tabular-nums; min-width:7rem; text-align:right }
body.crm .mov-grupos-caja > .apunte{ margin:0 0 .7rem }
body.crm .mov-grupos{ display:grid; gap:.55rem }
body.crm .mov-grupo{ display:grid; grid-template-columns:11rem minmax(0,1fr) 7.5rem 2.8rem; gap:.8rem; align-items:center;
  color:inherit; text-decoration:none; font-size:var(--letra-base) }
body.crm .mov-grupo .fin-prop{ margin:0; height:10px }
body.crm .mov-grupo .fin-prop i{ background:var(--fam-operacion) }
body.crm .mov-grupo b{ text-align:right; font-variant-numeric:tabular-nums }
body.crm .mov-grupo small{ text-align:right; color:var(--et-txt) }
body.crm .mov-grupo:hover .mov-grupo-nom{ text-decoration:underline }
body.crm .nota-bloque details.como{ display:block; margin-top:.3rem }
body.crm .fcli-leyenda{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-size:var(--letra-sm); color:var(--et-txt); margin-bottom:.9rem }
body.crm .fcli-leyenda i{ display:inline-block; width:1.1rem; height:.6rem; border-radius:3px; vertical-align:middle; margin-right:.35rem }
body.crm .fcli-leyenda-nota{ margin-left:auto }
body.crm i.costo{ background:var(--fam-operacion) }
body.crm i.rep{ background:var(--fam-operacion); opacity:.45 }
body.crm i.queda{ background:var(--fam-dinero) }
body.crm i.facturado{ background:var(--fam-hoy); opacity:.55 }
body.crm .fcli-filas{ display:flex; flex-direction:column }
body.crm .fcli-fila{ display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr) 8.5rem 4.6rem; gap:.9rem; align-items:center;
  padding:.65rem 0; border-top:1px solid var(--line); color:inherit; text-decoration:none }
body.crm .fcli-filas .fcli-fila:first-child{ border-top:0 }
body.crm .fcli-fila:hover .fcli-nom b{ text-decoration:underline }
body.crm .fcli-fila.pierde{ box-shadow:inset 3px 0 0 var(--rojo); padding-left:.6rem }
body.crm .fcli-nom{ min-width:0 }
body.crm .fcli-nom small{ display:block; color:var(--et-txt); font-size:var(--letra-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
body.crm .fcli-barra{ display:flex; height:14px; border-radius:var(--r-chico); background:var(--ne-bg); overflow:hidden }
body.crm .fcli-barra i{ display:block; height:100% }
body.crm .fcli-cifras{ text-align:right; font-variant-numeric:tabular-nums }
body.crm .fcli-cifras small{ display:block; color:var(--et-txt); font-size:var(--letra-xs) }
body.crm .fcli-fila .fin-chip{ justify-self:end }
body.crm .fcli-sin{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line) }
body.crm .fcli-sin.solos{ margin-top:0; padding-top:0; border-top:0 }
body.crm .fcli-sin > p{ margin:0 0 .7rem; font-size:var(--letra-base); color:var(--ink-soft) }
body.crm .fcli-sin-lista{ display:flex; flex-wrap:wrap; gap:.4rem }
body.crm .fcli-sin-lista a{ text-decoration:none }
body.crm .fcli-cuadre{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.55rem 1.5rem; max-width:40rem; font-variant-numeric:tabular-nums }
body.crm .fcli-cuadre small{ color:var(--et-txt); font-size:var(--letra-sm) }
body.crm .fcli-cuadre .resta{ padding-left:.9rem; color:var(--ink-soft) }
body.crm .fcli-cuadre b{ text-align:right }
body.crm .fcli-cuadre .total{ font-weight:700; border-top:1.5px solid var(--ink); padding-top:.5rem }
body.crm .soc-anos{ display:flex; flex-direction:column }
body.crm .soc-ano{ display:grid; grid-template-columns:4rem minmax(0,1fr) 8.5rem; gap:1rem; align-items:center; padding:.7rem 0; border-top:1px solid var(--line) }
body.crm .soc-ano:first-child{ border-top:0 }
body.crm .soc-ano-cual{ font-weight:700; font-size:var(--letra-md) }
body.crm .soc-ano-barras{ display:flex; flex-direction:column; gap:.35rem; min-width:0 }
body.crm .soc-b{ display:grid; grid-template-columns:minmax(0,1fr) 10.5rem; align-items:center; gap:.8rem }
body.crm .soc-pista{ display:block; min-width:0 }
body.crm .soc-b i{ display:block; height:10px; border-radius:4px; min-width:3px }
body.crm .soc-b.mete i{ background:var(--fam-dinero) }
body.crm .soc-b.saca i{ background:var(--fam-operacion) }
body.crm .soc-b small{ font-size:var(--letra-xs); color:var(--et-txt); white-space:nowrap; font-variant-numeric:tabular-nums }
body.crm .soc-ano-neto{ text-align:right; font-variant-numeric:tabular-nums }
body.crm .soc-ano-neto small{ display:block; font-weight:400; color:var(--et-txt); font-size:var(--letra-xs) }

/* 12n (06/10/2026) — Movimientos y Cuenta con el socio.
   El cliente va en cuadrito con su nombre al lado (como en Facturación), el
   concepto en tinta sin subrayado —el renglón entero ya invita a abrirlo—, lo
   que se lee poco en gris, y la cuenta del socio agrupada por año. */
body.crm table.tabla tr.mov-fila.muerto td{ opacity:.5 }
body.crm a.mov-cli{ text-decoration:none; min-width:11rem; gap:.65rem }
body.crm .mov-nombre{ font-weight:600; color:var(--ink); white-space:nowrap }
body.crm a.mov-cli:hover .mov-nombre{ text-decoration:underline }
body.crm a.mov-concepto{ color:var(--ink); text-decoration:none; display:block;
  overflow:hidden; text-overflow:ellipsis }
body.crm a.mov-concepto.fuerte{ font-weight:600 }
body.crm a.mov-concepto:hover{ color:var(--ok-txt); text-decoration:underline }
body.crm table.tabla td.celda-larga .apunte{ font-size:var(--letra-sm); margin-top:.1rem }
body.crm .mov-sin{ font-style:italic }
body.crm .mov-nada{ color:var(--c-tinta-suave) }
body.crm a.mov-fecha{ color:var(--ink-soft); text-decoration:none; white-space:nowrap }
body.crm a.mov-fecha:hover{ color:var(--ink); text-decoration:underline }
body.crm table.soc-tabla tr.soc-sec td{ padding:.55rem 1rem; font-size:var(--letra-sm) }
body.crm table.soc-tabla tr.soc-sec b{ font-size:var(--letra-md); color:var(--ink); margin-right:.7rem }
body.crm table.soc-tabla tr.soc-sec span{ color:var(--et-txt) }
body.crm .soc-que{ display:flex; align-items:center; gap:.75rem; min-width:0 }
body.crm .soc-icono{ flex:none; width:2rem; height:2rem; border-radius:var(--r-medio); display:grid;
  place-items:center; font-weight:700; font-size:var(--letra-md); line-height:1 }
body.crm .soc-icono.mete{ background:var(--ok-bg); color:var(--ok-txt) }
body.crm .soc-icono.saca{ background:var(--ne-bg); color:var(--ink-soft) }
body.crm .soc-texto{ display:flex; flex-direction:column; min-width:0; gap:.1rem }
body.crm .soc-principal{ font-weight:600; color:var(--ink); white-space:normal; line-height:1.3 }
body.crm .soc-texto small{ color:var(--et-txt); font-size:var(--letra-sm); white-space:normal }
body.crm .soc-veces{ display:inline-block; margin-left:.35rem; padding:.05rem .45rem; border-radius:var(--r-pildora);
  background:var(--in-bg); color:var(--in-txt); font-size:var(--letra-xs); font-weight:700; vertical-align:1px }
body.crm table.soc-tabla td.pos{ font-weight:600 }
body.crm table.soc-tabla td.soc-saca{ color:var(--ink) }
body.crm table.soc-tabla td.soc-saldo{ color:var(--ink-soft) }
body.crm table.soc-tabla tfoot tr.total td{ font-weight:700 }

/* Con el cuadrito del cliente la tabla de ingresos medía 75 px de más y el
   estatus quedaba cortado: el concepto cede ese ancho (se lee entero en el
   `title` y en la ficha). */
body.crm table.tabla tr.mov-fila td.celda-larga{ max-width:15rem }
body.crm table.tabla tr.mov-fila td{ padding-left:.8rem; padding-right:.8rem }
body.crm tr.mov-fila a.mov-concepto{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-height:1.3; min-width:12rem }
@media (max-width:900px){
  body.crm .fin-eq-mini > :last-child:nth-child(odd){ grid-column:1 / -1 }
}
@media (max-width:640px){
  body.crm .fin-cas-cab, body.crm .fin-cas-fila{ grid-template-columns:minmax(0,1fr) auto; row-gap:.35rem }
  body.crm .fin-cas-cab > :nth-child(2), body.crm .fin-cas-cab > :nth-child(4){ display:none }
  body.crm .fin-cas-pista{ grid-column:1/-1; order:3 }
  body.crm .fin-chip{ grid-column:2 }
  body.crm .fin-eq-mini{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:900px){
  /* Fijos · Variables · Margen (Finanzas › Punto de equilibrio): de dos en dos
     en vez de uno por renglón; el tercero, a lo ancho. */
  body.crm .fin-eq-mini{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  body.crm .fin-sem{ grid-template-columns:minmax(0,1fr) auto }
  body.crm .fin-piezas{ grid-column:1/-1; order:3 }
  body.crm .fin-sem-neto{ display:none }
  body.crm .mov-grupo{ grid-template-columns:minmax(0,1fr) auto; row-gap:.3rem }
  body.crm .mov-grupo .fin-prop{ grid-column:1/-1; order:3 }
  body.crm .mov-grupo small{ display:none }
  body.crm .fcli-fila{ grid-template-columns:minmax(0,1fr) auto auto; row-gap:.4rem }
  body.crm .fcli-barra{ grid-column:1/-1; order:3 }
  body.crm .fcli-fila .fin-chip{ align-self:start }
  body.crm .fcli-leyenda-nota{ margin-left:0 }
  body.crm .soc-ano{ grid-template-columns:3rem minmax(0,1fr) }
  body.crm .soc-ano-neto{ grid-column:1/-1; text-align:left }
  body.crm .soc-b{ grid-template-columns:minmax(0,1fr) 8.5rem }
  body.crm .cob-pagar li > b{ min-width:0 }
}
@media (min-width:1181px){
  body.crm .fin-resumen{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) }
}


/* ===========================================================================
   24. CONCILIACIÓN
   =========================================================================== */


/* El «por qué aparece» de la conciliación. Son tres o cuatro razones seguidas
   —«mismo RFC · importe exacto · mismos días»— y con el `nowrap` de la tabla
   empujaban el botón «Es ésta» fuera de la pantalla: la única columna que hay
   que poder tocar era la que se salía. Aquí sí se parte el renglón. */
table.tabla td.motivo{ white-space:normal; max-width:15rem; min-width:9rem;
  line-height:1.3; }

/* --- Conciliación: el selector arriba y tres tarjetas ---------------------- */
body.crm .concilia-selector{ display:flex; gap:.5rem; flex-wrap:wrap; margin:0 }
body.crm .concilia-selector select{ width:auto; max-width:22rem; border-radius:var(--r-pildora); padding:.55rem 2.2rem .55rem 1rem }
body.crm .concilia-cifras .kpi.oscura .pie{ font-size:var(--letra-base) }
body.crm .concilia-mezcla{ gap:.7rem }
body.crm .mezcla-barra{ display:flex; gap:3px; height:14px; border-radius:var(--r-pildora); overflow:hidden; background:var(--c-fondo); margin-top:.3rem }
html.oscuro body.crm .mezcla-barra{ background:rgba(255,255,255,.08) }
body.crm .mezcla-barra > span{ display:block; height:100%; min-width:4px }
body.crm .mezcla-leyenda{ display:flex; flex-wrap:wrap; gap:.35rem 1rem; font-size:var(--letra-sm); color:var(--ink-soft) }
body.crm .mezcla-leyenda span{ display:inline-flex; align-items:center; gap:.4rem }
body.crm .mezcla-leyenda b{ color:var(--ink) }
body.crm .mezcla-leyenda i{ display:inline-block; width:.65rem; height:.65rem; border-radius:3px }
body.crm .mezcla-barra .bien, body.crm .mezcla-leyenda .bien  { background:var(--c-verde) }
body.crm .mezcla-barra .aviso, body.crm .mezcla-leyenda .aviso{ background:var(--c-aviso-punto) }
body.crm .mezcla-barra .gris, body.crm .mezcla-leyenda .gris  { background:#AEBAC4 }
body.crm .mezcla-barra .info, body.crm .mezcla-leyenda .info  { background:var(--c-cian) }
body.crm .mezcla-barra .mal, body.crm .mezcla-leyenda .mal    { background:var(--c-error-punto) }

/* --- Conciliación: cada movimiento ---------------------------------------- */
body.crm .mov-concilia{ border-left:5px solid var(--t-fu); overflow:hidden }
body.crm .mov-concilia > .cuerpo + .cuerpo{ border-top:1px solid var(--line) }

/* La tarjeta a la que llegó un enlace `conciliacion.php?mov=123` (04/10/2026).
   Sin esto, el ancla deja el renglón en pantalla pero entre otros cuarenta
   iguales, y quien llegó buscando «cuál es» sigue sin saberlo. El aro se
   queda: no es una animación que se pierde si uno parpadea. */
body.crm .mov-concilia:target{
  box-shadow:0 0 0 3px var(--t-fu);
  scroll-margin-top:1.5rem;
}
body.crm .bloque[id]{ scroll-margin-top:4.5rem }
body.crm .mov-cabeza{ display:flex; gap:1rem; align-items:flex-start }
body.crm .mov-cabeza > .ico{
  width:42px; height:42px; border-radius:var(--r-medio); flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--t-bg); color:var(--t-tx);
}
body.crm .mov-que{ flex:1; min-width:0 }
body.crm .mov-que .chips{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
body.crm .mov-desc{ margin:.4rem 0 0; font-size:var(--letra-base); overflow-wrap:anywhere }
body.crm .mov-monto{ text-align:right; flex:none }
body.crm .mov-monto strong{ display:block; font-size:var(--letra-xl); letter-spacing:-.01em; white-space:nowrap }
body.crm .mov-monto span{ font-size:var(--letra-xs); color:var(--gray) }
body.crm .mov-monto.entra strong{ color:var(--ok-txt) }
body.crm .mov-enlace{ display:flex; gap:.6rem; align-items:flex-start; background:var(--ok-bg); color:var(--ink); font-size:var(--letra-base) }
body.crm .mov-enlace > .icono{ color:var(--ok-txt); margin-top:.1rem }
body.crm .mov-enlace .pastilla{ margin-left:.3rem }
body.crm .mov-deshacer{ padding-top:.7rem; padding-bottom:.7rem }
body.crm .mov-paso h3{ display:flex; align-items:center; gap:.55rem; margin:0 0 .8rem; font-size:var(--letra-md) }
body.crm .num-paso{
  width:26px; height:26px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--letra-sm); font-weight:900; background:var(--c-rosa-tinte); color:var(--c-rosa-medio);
}
html.oscuro body.crm .num-paso{ background:var(--c-rosa-tinte); color:var(--c-rosa-hondo) }
body.crm .respuestas{ display:flex; flex-direction:column; gap:.55rem }
body.crm .respuesta{ border-radius:var(--r-medio); background:var(--t-bg); }
body.crm .respuesta > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; color:var(--t-tx);
}
body.crm .respuesta > summary::-webkit-details-marker{ display:none }
body.crm .respuesta > summary::after{ content:"▾"; margin-left:auto; font-size:var(--letra-base); transition:transform .15s ease }
body.crm .respuesta[open] > summary::after{ transform:rotate(180deg) }
body.crm .respuesta > summary .ico{
  width:34px; height:34px; border-radius:var(--r-medio); flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--t-tx);
}
body.crm .respuesta > summary .ico .icono{ width:18px; height:18px }
body.crm .respuesta > summary strong{ display:block; font-size:var(--letra-base) }
body.crm .respuesta > summary small{ display:block; font-size:var(--letra-sm) }
body.crm .respuesta > form, body.crm .respuesta > p{ margin:0; padding:.2rem 1rem 1rem }
body.crm .respuesta > form + p{ padding-top:0 }
body.crm .respuesta input[type=text], body.crm .respuesta select, body.crm .respuesta input[type=month],
body.crm .respuesta input[type=file]{ background:var(--white) }
body.crm .campos-fila{ display:flex; gap:.8rem; flex-wrap:wrap }
body.crm .campos-fila .campo{ margin:0 }
body.crm .glosario-respuestas > summary{ list-style:none; cursor:pointer }
body.crm .glosario-respuestas > summary::-webkit-details-marker{ display:none }
body.crm .glosario-respuestas > summary h2::after{ content:" ▾"; color:var(--gray); font-size:.9em }
body.crm .glosario{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.9rem }
body.crm .glosario > div{ background:var(--tint); border-radius:var(--r-medio); padding:.9rem 1rem }
body.crm .glosario p{ margin:.55rem 0 0; font-size:var(--letra-base); line-height:1.55; color:var(--ink-soft) }
body.crm .bloque .cuerpo.mov-paso h3{ text-transform:none; letter-spacing:0; color:var(--ink); font-size:var(--letra-md) }
@media (max-width:640px){
  body.crm .concilia-selector select{ max-width:100% }
  body.crm .mov-cabeza{ flex-wrap:wrap }
  body.crm .mov-monto{ text-align:left; flex-basis:100%; padding-left:58px }
}
@media (min-width:901px){
  body.crm .tarjetas > .concilia-mezcla{ grid-column:span 2 }
}


/* ===========================================================================
   25. IMPUESTOS (y Parámetros fiscales)
   =========================================================================== */


/* El aviso de los parámetros fiscales: debajo del título y en una tira
   delgada. Antes iba arriba de todo y con el tamaño de un recado: era lo
   primero que se leía en el Tablero, encima de «Buenas noches, Daniel». */
body.crm .recado.aviso-param{
  margin:-.6rem 0 1.5rem; padding:.6rem 1rem; font-size:var(--letra-base); line-height:1.45; border-radius:var(--r-medio);
}

/* --- Impuestos ------------------------------------------------------------ */
body.crm .obligaciones{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.9rem }
body.crm .obligacion{
  display:flex; flex-direction:column; gap:.8rem; padding:1rem 1.05rem; border-radius:var(--r-medio);
  background:var(--white); box-shadow:inset 0 0 0 1px var(--line); border-top:4px solid var(--t-fu);
}
body.crm .obligacion .cabeza{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
body.crm .obligacion .cabeza strong{ flex:1; min-width:8rem; font-size:var(--letra-md) }
body.crm .obligacion .ico{
  width:36px; height:36px; border-radius:var(--r-medio); flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--t-bg); color:var(--t-tx);
}
body.crm .obligacion .ico .icono{ width:18px; height:18px }
body.crm .obligacion dl{ margin:0; display:flex; flex-direction:column; gap:.3rem }
body.crm .obligacion dl > div{ display:flex; justify-content:space-between; gap:.6rem; font-size:var(--letra-base) }
body.crm .obligacion dt{ color:var(--gray) }
body.crm .obligacion dd{ margin:0; font-weight:700 }
body.crm .obligacion .pie-obl{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:auto }
body.crm .obligacion .capturar{ margin-left:auto; font-size:var(--letra-sm); font-weight:700 }
body.crm .form-dos{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
body.crm .confirmados .barra-tono{ height:10px }

/* 06/10/2026 · Impuestos › Parámetros fiscales: cinco grupos con su color
   (`--c` en cada tarjeta), el valor una sola vez y «Ya lo confirmó» en un clic. */
body.crm .par-cabeza{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap }
body.crm .par-avance{ flex:1 1 18rem; display:flex; flex-direction:column; gap:.6rem }
body.crm .par-cifra{ font-size:var(--letra-3xl); font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--ink) }
body.crm .par-cifra small{ font-size:var(--letra-md); font-weight:400; letter-spacing:0; color:var(--ink-soft); margin-left:.5rem }
body.crm details.par-porque{ margin-top:1rem; font-size:var(--letra-base) }
body.crm details.par-porque > summary{ cursor:pointer; font-weight:700; color:var(--ink-soft); list-style:none }
body.crm details.par-porque > summary::-webkit-details-marker{ display:none }
body.crm details.par-porque > summary::before{ content:"＋ " }
body.crm details.par-porque[open] > summary::before{ content:"－ " }
body.crm details.par-porque p{ margin:.5rem 0 0; line-height:1.55; color:var(--ink-soft); max-width:52rem }
body.crm .par-grupos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr)); gap:1.25rem; align-items:start }
body.crm .par-grupos > .bloque{ margin:0 }
body.crm .par-gcab{ display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line);
  border-top:4px solid var(--c); border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0 }
body.crm .par-gico{ flex:none; width:2.3rem; height:2.3rem; border-radius:var(--r-medio); display:grid; place-items:center;
  background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--c) }
html.oscuro body.crm .par-gico{ background:color-mix(in srgb, var(--c) 30%, transparent); color:var(--c-tinta) }
body.crm .par-gico svg{ width:1.2rem; height:1.2rem }
body.crm .par-gtit{ flex:1; display:flex; flex-direction:column; min-width:0 }
body.crm .par-gtit strong{ font-size:var(--letra-md); color:var(--ink); line-height:1.25 }
body.crm .par-gtit small{ font-size:var(--letra-sm); color:var(--et-txt) }
body.crm .par-fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"que valor" "que accion";
  column-gap:1.2rem; row-gap:.45rem; padding:1rem 1.3rem; border-bottom:1px solid var(--line) }
body.crm .par-fila:last-child{ border-bottom:0 }
body.crm .par-que{ grid-area:que; display:flex; flex-direction:column; gap:.2rem; min-width:0 }
body.crm .par-nombre{ font-weight:700; color:var(--ink); line-height:1.3 }
body.crm .par-desc{ font-size:var(--letra-base); color:var(--ink-soft) }
body.crm .par-fuente{ font-size:var(--letra-xs); color:var(--et-txt) }
body.crm .par-propia{ display:inline-block; margin-left:.3rem; padding:.08rem .5rem; border-radius:var(--r-pildora); vertical-align:1px;
  background:var(--at-bg); color:var(--at-txt); font-size:var(--letra-xs); font-weight:700; white-space:nowrap }
body.crm .par-valor{ grid-area:valor; justify-self:end; font-size:var(--letra-xl); font-weight:700; letter-spacing:-.02em;
  line-height:1.1; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums }
body.crm .par-valor small{ font-size:var(--letra-sm); font-weight:600; letter-spacing:0; color:var(--ink-soft); margin-left:.3rem }
body.crm .par-valor.neg{ color:var(--cr-txt) }
body.crm .par-accion{ grid-area:accion; justify-self:end; display:flex; align-items:flex-start; gap:.6rem; flex-wrap:wrap; justify-content:flex-end }
body.crm .par-accion > form{ margin:0 }
body.crm .boton.par-btn{ padding:.35rem .85rem; font-size:var(--letra-sm) }
body.crm details.par-corregir > summary{ cursor:pointer; list-style:none; font-size:var(--letra-sm); font-weight:700; color:var(--ink-soft);
  padding:.4rem .2rem; text-decoration:underline; text-underline-offset:3px }
body.crm details.par-corregir > summary::-webkit-details-marker{ display:none }
body.crm details.par-corregir[open]{ flex-basis:100% }
body.crm .par-form{ display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem; padding:.85rem; border-radius:var(--r-medio); background:var(--tint); font-size:var(--letra-base) }
body.crm .par-form label{ display:flex; flex-direction:column; gap:.25rem; color:var(--ink-soft) }
body.crm .par-form label input[type=text]{ width:8rem; padding:.4rem .55rem }
body.crm .par-form label.par-check{ flex-direction:row; align-items:center; gap:.4rem }
body.crm .par-form .boton{ align-self:flex-start }
body.crm .par-fila.ok .par-valor{ color:var(--ink-soft) }

/* Con «Corregir» abierto la acción baja a todo lo ancho y no aprieta el nombre. */
body.crm .par-fila:has(details.par-corregir[open]){ grid-template-areas:"que valor" "accion accion" }
body.crm .par-fila:has(details.par-corregir[open]) .par-accion{ justify-self:stretch; justify-content:flex-start }

/* 06/10/2026 · Impuestos, parte de arriba: la fecha límite en una línea y los
   impuestos sin capturar en botoncitos en vez de ocho tarjetas con «—». */
body.crm .imp-plazo{ display:block; line-height:1.45; margin:0 0 1.1rem;
  padding:.7rem 1rem; border-radius:var(--r-medio); font-size:var(--letra-md); background:var(--ne-bg); color:var(--ne-txt) }
body.crm .imp-plazo.tono-ambar{ background:var(--at-bg); color:var(--at-txt) }
body.crm .imp-plazo.tono-rojo{ background:var(--cr-bg); color:var(--cr-txt) }
body.crm .imp-plazo.tono-verde{ background:var(--ok-bg); color:var(--ok-txt) }
body.crm .imp-plazo .ico{ margin-right:.35rem }
body.crm .imp-plazo .ico svg{ width:1.1rem; height:1.1rem; vertical-align:-3px }
body.crm .imp-faltan{ display:flex; flex-direction:column; gap:.8rem; margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line) }
body.crm .imp-faltan.solo{ margin-top:0; padding:1.2rem; border:1.5px dashed var(--line); border-radius:var(--r-medio) }
body.crm .imp-faltan-txt{ display:flex; flex-direction:column; gap:.15rem }
body.crm .imp-faltan-txt strong{ color:var(--ink); font-size:var(--letra-md) }
body.crm .imp-faltan-txt span{ font-size:var(--letra-base); color:var(--et-txt) }
body.crm .imp-chips{ display:flex; flex-wrap:wrap; gap:.5rem }
body.crm a.imp-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .85rem .45rem .55rem;
  border-radius:var(--r-pildora); background:var(--white); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink);
  font-size:var(--letra-base); font-weight:600; text-decoration:none }
body.crm a.imp-chip:hover{ box-shadow:inset 0 0 0 1.5px var(--ink-soft) }
body.crm a.imp-chip .ico{ display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--ne-bg); color:var(--ink-soft) }
body.crm a.imp-chip .ico svg{ width:.95rem; height:.95rem }
body.crm a.imp-chip small{ font-weight:700; color:var(--at-txt); background:var(--at-bg); padding:.05rem .45rem; border-radius:var(--r-pildora); font-size:var(--letra-xs) }
@media (max-width:640px){
  body.crm .par-fila, body.crm .par-fila:has(details.par-corregir[open]){ grid-template-areas:"que valor" "accion accion" }
  body.crm .par-accion{ justify-self:stretch; justify-content:flex-start }
}


/* ===========================================================================
   26. INVENTARIO Y COMPRAS
   =========================================================================== */


/* --- Inventario: lo que hay que resurtir ---------------------------------- */
body.crm .resurtir{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.9rem }
body.crm .insumo-bajo{
  display:flex; flex-direction:column; gap:.55rem; padding:1rem 1.05rem; border-radius:var(--r-medio); background:var(--c-aviso-fondo);
}
body.crm .insumo-bajo.agotado{ background:var(--c-error-fondo) }
html.oscuro body.crm .insumo-bajo{ background:var(--ambar-bg) }
html.oscuro body.crm .insumo-bajo.agotado{ background:var(--rojo-bg) }
body.crm .insumo-bajo .cabeza{ display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem }
body.crm .insumo-bajo .cabeza strong{ font-size:var(--letra-md); line-height:1.3 }
body.crm .insumo-bajo .chips{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap }
body.crm .insumo-bajo .nivel{ position:relative; height:10px; border-radius:var(--r-pildora); background:var(--white); margin-top:.2rem }
body.crm .insumo-bajo .nivel .lleno{ position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pildora); background:var(--c-aviso-punto); min-width:3px }
body.crm .insumo-bajo.agotado .nivel .lleno{ background:var(--c-error-punto) }
body.crm .insumo-bajo .nivel .minimo{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); border-radius:2px }
body.crm .insumo-bajo .nivel-txt{ display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; font-size:var(--letra-sm); color:var(--ink-soft) }
body.crm .insumo-bajo .pedir{
  display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; padding-top:.55rem;
  border-top:1px solid rgba(0,0,0,.08); font-size:var(--letra-base);
}
html.oscuro body.crm .insumo-bajo .pedir{ border-top-color:var(--line) }
body.crm .insumo-bajo .pedir > strong{ font-size:var(--letra-lg) }
body.crm .pie-resurtir{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1.1rem }
body.crm .pie-resurtir .ayuda{ flex:1 1 18rem; margin:0 }

/* Los renglones de una orden de compra: cada casilla con un ancho mínimo, para
   que en pantalla angosta la tabla se desplace de lado en vez de apretar los
   campos hasta que «Hilo de desbrozadora» se leía «TMP Hilo de» (04/10/2026). */
body.crm .oc-renglones select{ min-width:12rem }
body.crm .oc-renglones input[name^="p_concepto"]{ min-width:13rem }
body.crm .oc-renglones input[name^="p_cantidad"]{ min-width:4.5rem }
body.crm .oc-renglones input[name^="p_unidad"]{ min-width:5.5rem }
body.crm .oc-renglones input[name^="p_precio"]{ min-width:6.5rem }
body.crm .oc-renglones td.p-importe{ white-space:nowrap }
body.crm .oc-recibir input[name^="llego"]{ min-width:5rem }


/* ===========================================================================
   27. PERSONAL (la plantilla y la ficha de una persona)
   =========================================================================== */


/* --- Tarjetas de persona -------------------------------------------------- */
body.crm .personas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem }
body.crm .persona{
  display:flex; flex-direction:column; gap:.85rem; padding:1.1rem 1.15rem; text-decoration:none; color:inherit;
  background:var(--white); border-radius:var(--r-grande); box-shadow:var(--sombra-2);
  transition:box-shadow .18s ease, transform .18s ease;
}
body.crm a.persona:hover{ box-shadow:var(--sombra-3); transform:translateY(-2px) }
body.crm .persona.con-falta{ box-shadow:inset 0 0 0 2px #F2B8B8, var(--sombra-tarjeta) }
html.oscuro body.crm .persona.con-falta{ box-shadow:inset 0 0 0 2px #6B3A32, var(--sombra-tarjeta) }
body.crm .persona .quien{ display:flex; gap:.75rem; align-items:center; min-width:0 }
body.crm .persona .quien strong{ display:block; font-size:var(--letra-md); line-height:1.25 }
body.crm .persona .quien span.sub{ display:block; font-size:var(--letra-sm); color:var(--gray) }
body.crm .persona .cuesta{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem }
body.crm .persona .cuesta b{ font-size:var(--letra-xl); letter-spacing:-.02em }
body.crm .persona .cuesta span{ font-size:var(--letra-xs); color:var(--gray) }
body.crm .persona .chips{ display:flex; gap:.35rem; flex-wrap:wrap }
body.crm .persona .exp-txt{ display:flex; justify-content:space-between; font-size:var(--letra-xs); color:var(--gray); margin-bottom:.3rem }
body.crm .persona .exp-txt .ok{ color:var(--ok-txt); font-weight:700 }
body.crm .persona-nueva{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; min-height:190px;
  border:2px dashed var(--line); border-radius:var(--r-grande); color:var(--gray); font-weight:700; text-decoration:none;
}
@media print{
  body.crm .arreglo .boton, body.crm .persona-nueva{ display:none }
}
body.crm .persona-nueva:hover{ border-color:var(--green); color:var(--ink) }
body.crm .persona-nueva .icono{ width:42px; height:42px; padding:10px; border-radius:50%; background:var(--white); color:var(--green-600) }

/* --- La ficha de una persona -------------------------------- */

/* El expediente como mosaico. */
body.crm .docs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.7rem }
body.crm .doc{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.4rem .8rem; align-items:start;
  padding:.85rem .95rem; border-radius:var(--r-medio); background:var(--tint); border:1px solid transparent;
}
body.crm .doc.tono-rojo{ background:#FDF1F1 }
body.crm .doc.tono-ambar{ background:#FFF9E5 }
html.oscuro body.crm .doc.tono-rojo{ background:var(--rojo-bg) }
html.oscuro body.crm .doc.tono-ambar{ background:var(--ambar-bg) }
body.crm .doc.opcional{ background:none; border-color:var(--line) }
body.crm .doc .ico{ width:34px; height:34px; border-radius:var(--r-medio); display:flex; align-items:center; justify-content:center; background:var(--t-bg); color:var(--t-tx) }
body.crm .doc.tono-rojo .ico, body.crm .doc.tono-ambar .ico{ background:var(--white) }
body.crm .doc .icono{ width:18px; height:18px }
body.crm .doc .que{ display:flex; flex-direction:column; gap:.15rem; min-width:0 }
body.crm .doc .que strong{ font-size:var(--letra-base); line-height:1.3 }
body.crm .doc .que .apunte{ font-size:var(--letra-xs); line-height:1.4 }
body.crm .doc .fin{ grid-column:2; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.2rem }
body.crm .doc .boton.chica{ min-height:32px; border-radius:var(--r-pildora) }

/* «Ver renglón por renglón»: la tabla de siempre, plegada bajo la barra. */
body.crm details.renglon-a-renglon > summary{
  cursor:pointer; font-weight:700; font-size:var(--letra-base); color:var(--cyan-600); padding:0 1.5rem 1.2rem; list-style:none;
}
body.crm details.renglon-a-renglon > summary::-webkit-details-marker{ display:none }
body.crm details.renglon-a-renglon > summary::before{ content:"＋ " }
body.crm details.renglon-a-renglon[open] > summary::before{ content:"－ " }
body.crm .bloque .cuerpo.sin-aire > p.ayuda{ margin:1rem 1.5rem 1.3rem }

/* «Lo que esta pantalla NO hace»: eran tres párrafos seguidos;
   ahora tres tarjetitas, cada una con su tache. Mismo texto. */
body.crm .bloque.no-hace .cuerpo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.9rem }
body.crm .bloque.no-hace .cuerpo > ul{ display:contents }
body.crm .bloque.no-hace .cuerpo > p, body.crm .bloque.no-hace .cuerpo > ul > li{
  margin:0 !important; list-style:none; position:relative; background:var(--tint); border-radius:var(--r-medio);
  padding:1rem 1rem 1rem 3.1rem; font-size:var(--letra-base); line-height:1.55; color:var(--ink-soft);
}
body.crm .bloque.no-hace .cuerpo > p strong, body.crm .bloque.no-hace .cuerpo > ul > li strong{ display:block; color:var(--ink); font-size:var(--letra-md); margin-bottom:.15rem }
body.crm .bloque.no-hace .cuerpo > p::before, body.crm .bloque.no-hace .cuerpo > ul > li::before{
  content:"✕"; position:absolute; left:1rem; top:1rem; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:var(--letra-xs); font-weight:900;
  background:var(--ne-bg); color:var(--gray);
}
@media (max-width:640px){
  body.crm .personas{ grid-template-columns:minmax(0,1fr) }

  /* La ficha de alta en el teléfono (revisión de Gente, 04/10/2026): los campos
     que van en pareja o de tres en fondo se apilan. A 375 px, «Número interno» y
     «Fecha de nacimiento» lado a lado dejaban cada caja de cuatro letras. */
  body.crm .apila-movil{ grid-template-columns:1fr !important }
}
@media (prefers-reduced-motion:reduce){
  body.crm .persona, body.crm a.persona:hover{ transition:none; transform:none }
}


/* ===========================================================================
   28. NÓMINAS
   =========================================================================== */


/* --- Nóminas: los periodos ------------------------------------------------ */
body.crm .anio-periodos-nom{ margin:1.2rem 0 .7rem; font-size:var(--letra-sm); letter-spacing:.08em; text-transform:uppercase; color:var(--gray) }
body.crm .anio-periodos-nom:first-child{ margin-top:0 }
body.crm .periodos-nom-anio{ display:flex; flex-direction:column; gap:.6rem }
body.crm .periodo-nom{
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr); gap:1.1rem; align-items:center;
  padding:.85rem 1.1rem; border-radius:var(--r-medio); background:var(--white); box-shadow:var(--sombra-2);
  text-decoration:none; color:inherit; border-left:5px solid var(--t-fu);
  transition:box-shadow .18s ease, transform .18s ease;
}
body.crm a.periodo-nom:hover{ box-shadow:var(--sombra-3); transform:translateY(-1px) }
body.crm .periodo-nom .fecha{
  width:64px; height:58px; border-radius:var(--r-medio); display:flex; flex-direction:column; align-items:center;
  justify-content:center; background:var(--t-bg); color:var(--t-tx); line-height:1.1;
}
body.crm .periodo-nom .fecha strong{ font-size:var(--letra-md) }
body.crm .periodo-nom .fecha span{ font-size:var(--letra-xs); font-weight:700; text-transform:uppercase }
body.crm .periodo-nom .que{ display:flex; flex-direction:column; gap:.4rem; min-width:0 }
body.crm .periodo-nom .que .chips{ display:flex; gap:.35rem; flex-wrap:wrap; align-items:center }
body.crm .periodo-nom .cuanto{
  display:grid; grid-template-columns:auto 1fr 1fr; gap:.3rem 1rem; align-items:baseline; font-size:var(--letra-base);
}
body.crm .periodo-nom .cuanto .apunte{ display:block; font-size:var(--letra-xs) }
body.crm .periodo-nom .cuanto .gente{ display:inline-flex; align-items:center; gap:.3rem; color:var(--gray); font-weight:700 }
body.crm .periodo-nom .cuanto .gente .icono{ width:16px; height:16px }
body.crm .periodo-nom .cuanto .reparto{ grid-column:1 / -1 }
body.crm .periodo-nom .cuanto .reparto-barra{ height:7px }
body.crm .form-periodo{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); align-items:end }
body.crm .form-periodo .campo{ margin:0 }

/* --- Nóminas: una nómina -------------------------------------------------- */
body.crm .fila-total{
  display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0 0; margin-top:.2rem;
  border-top:2px solid var(--ink); font-weight:700;
}
body.crm .fila-total strong{ font-size:var(--letra-lg) }
body.crm .retenciones{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:1.1rem; font-size:var(--letra-base) }
body.crm .comparar-dos{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-bottom:.8rem }
body.crm .comparar-dos > div{ border-radius:var(--r-medio); padding:.8rem .95rem; background:var(--t-bg); color:var(--t-tx) }
body.crm .comparar-dos span{ display:block; font-size:var(--letra-sm); font-weight:700 }
body.crm .comparar-dos strong{ display:block; font-size:var(--letra-xl); margin-top:.2rem; color:var(--ink) }
body.crm .cifra-grande-ambar{ font-size:var(--letra-2xl); color:var(--at-txt); letter-spacing:-.02em }
body.crm .lista-renglones{ list-style:none; margin:0; padding:0 }
body.crm .lista-renglones li{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.6rem 0; border-top:1px solid var(--line); font-size:var(--letra-base);
}
body.crm .lista-renglones li:first-child{ border-top:0 }
body.crm .lista-renglones li > a{ flex:1 1 10rem }
body.crm .tabla-nomina .quien{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit }
body.crm .tabla-nomina .quien small{ display:block; font-size:var(--letra-xs); color:var(--gray) }
body.crm .tabla-nomina td.num .pastilla{ margin-top:.25rem; font-size:var(--letra-xs); padding:.15rem .5rem }
@media (max-width:640px){
  body.crm .periodo-nom{ grid-template-columns:auto minmax(0,1fr); gap:.8rem }
  body.crm .periodo-nom .cuanto{ grid-column:1 / -1 }
  body.crm .comparar-dos{ grid-template-columns:1fr }
}


/* ===========================================================================
   29. COSTO LABORAL
   =========================================================================== */


/* Costo laboral › los dos escenarios: la cuenta que se ve (lo que parece −
   el ISR = lo real) y dos barras a la misma escala. Antes eran siete
   párrafos y una tabla. */
body.crm .esc-cuenta{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.15fr);
  align-items:stretch; gap:.8rem;
}
body.crm .esc-pieza{
  display:flex; flex-direction:column; gap:.3rem; padding:1.1rem 1.2rem; border-radius:var(--r-grande);
  background:var(--fondo-crm);
}
body.crm .esc-pieza .et{ font-size:var(--letra-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--et-txt) }
body.crm .esc-num{ font-size:var(--letra-2xl); font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--ink) }
body.crm .esc-num.tachado{ color:var(--gray); text-decoration:line-through; text-decoration-thickness:2px }
body.crm .esc-num.mal{ color:var(--cr-txt) }
body.crm .esc-pie{ font-size:var(--letra-sm); color:var(--ink-soft); line-height:1.4 }

/* En verde y no en tinta: la pantalla ya tiene su tarjeta oscura arriba
   («Cuesta hoy»), y la regla es una sola superficie oscura por pantalla. */
body.crm .esc-pieza.real{ background:var(--ok-bg); box-shadow:inset 0 0 0 2px var(--c-verde) }
body.crm .esc-pieza.real .et, body.crm .esc-pieza.real .esc-num{ color:var(--ok-txt) }
body.crm .esc-pieza.real .esc-num{ font-size:var(--letra-3xl) }
body.crm .esc-op{ align-self:center; font-size:var(--letra-2xl); font-weight:700; color:var(--gray) }
body.crm .esc-barras{ display:flex; flex-direction:column; gap:.9rem }
body.crm .esc-fila{ display:grid; grid-template-columns:8.5rem minmax(0,1fr) 12rem; gap:1rem; align-items:center }
body.crm .esc-nombre{ font-weight:700 }
body.crm .esc-riel{ display:flex; height:16px; border-radius:var(--r-pildora); background:var(--fondo-crm); overflow:hidden }
body.crm .esc-barra{ display:block; height:100% }
body.crm .esc-barra.bien{ background:var(--c-verde); border-radius:var(--r-pildora) }
body.crm .esc-barra.mal{ background:var(--c-error-punto) }
body.crm .esc-barra.mal:first-child{ border-radius:999px 0 0 999px }
body.crm .esc-barra.mal.claro{ background:repeating-linear-gradient(45deg,var(--c-rosa-borde) 0 6px,var(--c-naranja-borde) 6px 12px); border-radius:0 999px 999px 0 }
body.crm .esc-monto{ font-size:var(--letra-md); text-align:right; white-space:nowrap }
body.crm .esc-monto small{ font-weight:400; color:var(--ink-soft) }
body.crm .esc-veces{ margin:1.1rem 0 1.2rem; font-size:var(--letra-md) }
body.crm .esc-veces strong{ color:var(--cr-txt) }

/* --- Costo laboral ------------------------------------------- */
body.crm .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
body.crm .perfiles-costo{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:stretch; margin:0 0 1.2rem }
body.crm .perfiles-costo > .et{ align-self:center; font-size:var(--letra-xs); letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--et-txt); margin-right:.2rem }
body.crm .perfil-costo{
  display:flex; gap:.75rem; align-items:center; padding:.7rem 1rem; text-decoration:none; color:inherit;
  background:var(--white); border-radius:var(--r-medio); box-shadow:var(--sombra-2); min-height:44px;
}
body.crm .perfil-costo:hover{ box-shadow:var(--sombra-3) }
body.crm .perfil-costo.activo{ box-shadow:inset 0 0 0 2px var(--fam-gente), var(--sombra-2) }
body.crm .perfil-costo .ico{ width:36px; height:36px; border-radius:var(--r-medio); display:flex; align-items:center; justify-content:center; background:var(--t-bg); color:var(--t-tx); flex:none }
body.crm .perfil-costo strong{ display:block; font-size:var(--letra-base) }
body.crm .perfil-costo .sub{ display:block; font-size:var(--letra-xs); color:var(--gray) }
body.crm .perfil-costo .pastilla{ margin-top:.25rem }
body.crm .perfil-costo.nuevo{ background:none; box-shadow:none; border:2px dashed var(--line); color:var(--gray); font-weight:700; font-size:var(--letra-base) }
body.crm .perfil-costo.nuevo:hover{ border-color:var(--green); color:var(--ink) }
body.crm .costo-dos{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1.2rem; align-items:start; margin-bottom:1.2rem }
body.crm .costo-dos > .bloque{ margin:0 }
body.crm .costo-resultado{ display:flex; flex-direction:column; gap:1.2rem }
body.crm .costo-resultado > .bloque{ margin:0 }
body.crm .costo-preguntas .campos-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
body.crm .costo-preguntas .campos-3{ display:grid;gap:1rem }
body.crm .costo-preguntas .campo{ margin-bottom:.4rem }
body.crm .paso-titulo{ display:flex; align-items:center; gap:.7rem; margin:0 0 1rem }
body.crm .paso-titulo h2{ margin:0; font-size:var(--letra-lg); padding:0; border:0 }
body.crm .paso-num{
  width:28px; height:28px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--rosa-fuerte); color:#fff; font-weight:900; font-size:var(--letra-sm);
}
html.oscuro body.crm .paso-num{ background:var(--fam-gente); color:#1B232A }
body.crm .sueldo-libre{ background:var(--c-rosa-tinte); border-radius:var(--r-medio); padding:1rem; margin:.6rem 0 1.1rem; display:flex; flex-direction:column; gap:.7rem }
html.oscuro body.crm .sueldo-libre{ background:var(--c-rosa-tinte) }

/* Su apunte va sobre el tinte de la marca: con --gray (#93A0AA, de portal.css) una
   marca clara lo deja en 3.98:1. Con la letra secundaria de la libreta sí pasa (08/10/2026). */
html.oscuro body.crm .sueldo-libre .apunte{ color:var(--c-tinta-suave) }
body.crm .sueldo-libre > label{ font-weight:700; font-size:var(--letra-base) }
body.crm .sueldo-libre .monto{ display:flex; align-items:center; gap:.4rem; background:var(--white); border:1px solid var(--c-rosa-borde); border-radius:var(--r-medio); padding:0 .9rem }
html.oscuro body.crm .sueldo-libre .monto{ border-color:var(--c-rosa-borde) }
body.crm .sueldo-libre .monto > span{ font-size:var(--letra-xl); font-weight:900; color:var(--fam-tono, var(--c-rosa-medio)) }
body.crm .sueldo-libre .monto input{ border:0; background:none; box-shadow:none; font-size:var(--letra-2xl); font-weight:900; padding:.45rem 0; min-height:0; width:100% }
body.crm .sueldo-libre .monto input:focus{ outline:none }
body.crm .sueldo-libre .monto:focus-within{ outline:2px solid var(--fam-gente); outline-offset:1px }
body.crm .segmentos{ border:0; margin:0; padding:4px; display:flex; gap:4px; background:var(--white); border-radius:var(--r-medio) }
body.crm .segmentos label{ flex:1; position:relative; cursor:pointer }
body.crm .segmentos input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
body.crm .segmentos span{ display:flex; align-items:center; justify-content:center; min-height:40px; border-radius:var(--r-chico); font-size:var(--letra-sm); font-weight:700; color:var(--gray) }
body.crm .segmentos input:checked + span{ background:var(--rosa-fuerte); color:#fff }
html.oscuro body.crm .segmentos input:checked + span{ background:var(--fam-gente); color:#1B232A }
body.crm .segmentos input:focus-visible + span{ outline:2px solid var(--fam-gente); outline-offset:2px }
/* Cotización › «A quién va»: el segmento deja ver un solo campo. Sin :has()
   se ven los dos y el servidor se queda con el del segmento marcado. */
body.crm .cot-para{ margin-bottom:1rem }
body.crm .cuerpo:has(.cot-para input[value="cliente"]:checked) .cot-para-prospecto,
body.crm .cuerpo:has(.cot-para input[value="prospecto"]:checked) .cot-para-cliente{ display:none }
/* Cotización › «Lo que sale impreso»: cada apartado con su «Sale / No sale».
   Apagado, el cuadro se esconde (el texto se sigue mandando y se guarda). */
body.crm .cot-apartado-cabeza{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; margin-bottom:.4rem }
body.crm .cot-apartado-cabeza > label{ margin:0 }
body.crm .cot-apartado-cabeza .segmentos{ flex:0 0 auto; min-width:12rem }
body.crm .cot-apartado-cabeza .segmentos span{ min-height:36px; padding:0 .9rem }
body.crm .cot-apartado .cot-apagado{ display:none }
body.crm .cot-apartado:has(input[value="0"]:checked) textarea{ display:none }
body.crm .cot-apartado:has(input[value="0"]:checked) .cot-apagado{ display:block }
body.crm .cuerpo:has(input[name="con_resultados"][value="0"]:checked) .cot-acomodo{ display:none }
body.crm .paso-plegable{ border-top:1px solid var(--line); padding:.6rem 0 }
body.crm .paso-plegable > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.7rem; min-height:48px }
body.crm .paso-plegable > summary::-webkit-details-marker{ display:none }
body.crm .paso-plegable > summary .que{ flex:1; min-width:0 }
body.crm .paso-plegable > summary .que strong{ display:block; font-size:var(--letra-md) }
body.crm .paso-plegable > summary .que .apunte{ font-size:var(--letra-sm) }
body.crm .paso-plegable > summary > .icono{ color:var(--gray); transform:rotate(90deg); transition:transform .15s ease; width:18px; height:18px }
body.crm .paso-plegable[open] > summary > .icono{ transform:rotate(-90deg) }
body.crm .paso-plegable > .ayuda{ margin:.6rem 0 .9rem }
body.crm .paso-plegable .campos-3{ margin-top:.6rem }
body.crm .botones-costo{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem }
body.crm .guardar-costo{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line); padding-top:1.1rem; margin-top:1.1rem }

/* La tarjeta oscura de Costo laboral: la cifra, lo que cuesta por hora/día/
   jornada (lo que antes era el bloque «Para pasarlo a una cotización») y el
   multiplicador dibujado. */
body.crm .costo-oscura .cifra{ font-size:3.2rem }
body.crm .mini-oscuras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin-top:.6rem }
body.crm .mini-oscuras > div{ background:rgba(255,255,255,.07); border-radius:var(--r-medio); padding:.75rem .9rem; display:flex; flex-direction:column; gap:.1rem }
body.crm .mini-oscuras span{ font-size:var(--letra-xs); color:#B9C4CC }
body.crm .mini-oscuras strong{ font-size:var(--letra-xl); color:#fff; letter-spacing:-.01em }
body.crm .mini-oscuras small{ font-size:var(--letra-xs); color:#8E9DA8 }
body.crm .multiplicador{ margin-top:.8rem; display:flex; flex-direction:column; gap:.5rem }
body.crm .multiplicador .texto{ font-size:var(--letra-base); color:#C9D4DC }
body.crm .multiplicador .texto strong{ color:#fff; font-size:var(--letra-lg) }
body.crm .multiplicador .barras{ display:flex; flex-direction:column; gap:5px }
body.crm .multiplicador .uno{ display:block; height:10px; border-radius:var(--r-pildora); background:#E2A6EA }
body.crm .multiplicador .todo{ display:block; height:10px; border-radius:var(--r-pildora); background:#FFC24B; overflow:hidden }
body.crm .multiplicador .todo > span{ display:block; height:100%; background:#E2A6EA }

/* «¿A dónde se va cada peso?» */
body.crm .desglose-costo > h2{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap }
@media (max-width:900px){
  /* El título de cada sección y su apunte gris peleaban el renglón y el título
     se partía en dos («Estado de / resultados»). El apunte baja abajo. */
  body.crm .bloque > h2{ flex-wrap:wrap; row-gap:.2rem; padding:1.1rem 1.1rem .5rem }
}
body.crm .seg-periodo{ margin-left:auto; display:inline-flex; gap:3px; padding:3px; background:var(--ne-bg); border-radius:var(--r-medio) }
body.crm .seg-periodo button{ border:0; background:none; font:inherit; font-size:var(--letra-sm); font-weight:700; color:var(--gray); padding:.35rem .8rem; border-radius:var(--r-chico); cursor:pointer; min-height:32px }
body.crm .seg-periodo button.activo{ background:var(--white); color:var(--ink); box-shadow:var(--sombra-1) }
body.crm .desglose-costo .reparto-barra{ height:20px; margin:.2rem 0 .8rem }
body.crm .grupo-costo{ border-top:1px solid var(--line) }
body.crm .grupo-costo:first-of-type{ border-top:0 }
body.crm .grupo-costo > summary, body.crm .grupo-costo > .fila{
  display:flex; align-items:center; gap:.7rem; min-height:46px; font-size:var(--letra-md); list-style:none;
}
body.crm .confirmados .fila{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; font-size:var(--letra-md) }
body.crm .grupo-costo > summary{ cursor:pointer }
body.crm .grupo-costo > summary::-webkit-details-marker{ display:none }
body.crm .grupo-costo i{ width:12px; height:12px; border-radius:4px; background:var(--t-fu); flex:none }
body.crm .grupo-costo .nombre{ flex:1; min-width:0 }
body.crm .grupo-costo .pct{ width:3rem; text-align:right; color:var(--gray); font-size:var(--letra-base) }
body.crm .grupo-costo .icono, body.crm .grupo-costo .hueco{ width:16px; height:16px; color:var(--gray); transform:rotate(90deg); transition:transform .15s ease; flex:none }
body.crm .grupo-costo[open] > summary .icono{ transform:rotate(-90deg) }
body.crm .grupo-costo .sub{ background:var(--t-bg); border-radius:var(--r-medio); padding:.5rem .9rem .5rem 1.9rem; margin:0 0 .7rem }
body.crm .grupo-costo .sub > div{ display:flex; justify-content:space-between; gap:1rem; font-size:var(--letra-base); padding:.25rem 0; color:var(--ink-soft) }
body.crm .total-costo{ display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid var(--ink); padding-top:.7rem; margin-top:.3rem; font-weight:900; font-size:var(--letra-md) }
body.crm .total-costo strong{ font-size:var(--letra-xl) }

/* El recibo, como recibo. */
body.crm .recibo-costo .cuerpo{ display:grid;gap:1.4rem; align-items:center; grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
body.crm .ticket{ background:var(--tint); border:1px dashed var(--line); border-radius:var(--r-medio); padding:.9rem 1rem; font-size:var(--letra-base) }
body.crm .ticket > div{ display:flex; justify-content:space-between; gap:1rem; padding:.25rem 0 }
body.crm .ticket .menos{ color:var(--cr-txt) }
body.crm .ticket .mas{ color:var(--ok-txt) }
body.crm .ticket .queda{ border-top:1px solid var(--line); margin-top:.35rem; padding-top:.55rem; font-weight:900; font-size:var(--letra-md) }
body.crm .ticket .queda span:last-child{ color:var(--ok-txt) }
body.crm details.de-donde > summary{ list-style:none; cursor:pointer }
body.crm details.de-donde > summary::-webkit-details-marker{ display:none }
body.crm details.de-donde > summary h2::after{ content:"＋"; margin-left:auto; color:var(--gray) }
body.crm details.de-donde[open] > summary h2::after{ content:"－" }
body.crm details.de-donde > summary h2{ display:flex; margin:0; padding:1.25rem 1.5rem 1.25rem; font-size:var(--letra-lg); font-weight:700; align-items:center }
body.crm .chips-param{ display:flex; gap:.45rem; flex-wrap:wrap }
body.crm details.de-donde[open] > summary h2{ padding-bottom:.55rem }
body.crm .ticket > div > span:last-child{ white-space:nowrap }

/* «¿Cómo se calcula?» nació para la tarjeta oscura; dentro de un bloque blanco
   su cian claro casi no se leía. */
body.crm .bloque details.como > summary{ color:var(--cyan-600) }
body.crm .bloque details.como > summary:hover{ color:var(--ink) }
body.crm .bloque details.como p{ color:var(--ink-soft) }

/* En una tarjeta angosta (cinco en fila), el texto baja debajo del ícono en
   vez de partirse en una columna de dos palabras por renglón. */
body.crm .kpi.con-icono{ flex-wrap:wrap }
body.crm .kpi.con-icono .txt{ flex:1 1 8.5rem }
@media (max-width:1180px){
  body.crm .costo-dos{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:900px){
  body.crm .esc-cuenta{ grid-template-columns:minmax(0,1fr) }
  body.crm .esc-op{ justify-self:center; line-height:1 }
  body.crm .esc-fila{ grid-template-columns:minmax(0,1fr) auto }
  body.crm .esc-riel{ grid-column:1 / -1; order:3 }

  /* Costo laboral › «Empezar desde»: los perfiles eran tarjetas de 2/3 de
     ancho apiladas (300 px antes del formulario). Ahora una tira que se
     desliza, como las pestañas. */
  body.crm .perfiles-costo{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-left:-1rem; margin-right:-1rem; padding:.2rem 1rem .4rem;
    position:relative; padding-top:1.5rem;
  }
  body.crm .perfiles-costo::-webkit-scrollbar{ display:none }
  body.crm .perfiles-costo > *{ flex:none }
  body.crm .perfiles-costo > :not(.et){ width:15.5rem; max-width:80vw }
  body.crm .perfiles-costo > .et{ position:absolute; top:0; left:1rem }
}
@media (max-width:640px){
  body.crm .costo-preguntas .campos-2, body.crm .costo-preguntas .campos-3{ grid-template-columns:minmax(0,1fr) }
}
body.crm .costo-preguntas .campos-3{ grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)) }
@media (max-width:640px){
  body.crm .mini-oscuras{ grid-template-columns:minmax(0,1fr) }
  body.crm .costo-oscura .cifra{ font-size:var(--letra-3xl) }
}
@media print{
  body.crm .seg-periodo, body.crm .perfiles-costo .nuevo{ display:none }
}


/* ===========================================================================
   30. GLOSARIO DE CATEGORÍAS (categorias.php)
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Glosario de categorías (crm/categorias.php)
   ---------------------------------------------------------------------------
   Dos cosas nada más. La lista de marcas es un <dl> porque eso es: término y
   definición; usar párrafos habría dado el mismo dibujo sin decirle al lector
   —ni al navegador de voz— cuál es cuál.

   `.clave-cat` es la clave abreviada. Va en monoespaciada porque se lee como
   código y porque así `INS-JARD` y `INS-LIMP` se distinguen de un vistazo:
   con letra proporcional las dos son una mancha del mismo largo.
   --------------------------------------------------------------------------- */
.glosario-marcas{ margin:0; display:grid; gap:.9rem }
.glosario-marcas dt{ margin:0 }
.glosario-marcas dd{
  margin:.35rem 0 0; padding-left:.9rem;
  border-left:2px solid var(--line); color:var(--ink-soft); line-height:1.55;
}
.clave-cat{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--letra-sm); font-weight:700; letter-spacing:-.01em;
  background:var(--tint); border:1px solid var(--line); border-radius:var(--r-medio);
  padding:.1rem .4rem; white-space:nowrap;
}


/* ===========================================================================
   31. EL MARCO EN EL TELÉFONO
   ---------------------------------------------------------------------------
   Hasta 900 px el menú lateral se desarma: franja de arriba, hoja del menú
   y barra de abajo del color de la familia.
   =========================================================================== */

body.crm .movil-cabeza,
body.crm .barra-movil,
body.crm .hoja-cabeza{ display:none }
body.crm .movil-cabeza.fam-hoy      { --menu-fondo:var(--c-cian-borde); --menu-texto:var(--c-cian-hondo); --menu-acento:var(--c-cian); --menu-acento-texto:var(--c-sobre-color) }
body.crm .movil-cabeza.fam-comercial{ --menu-fondo:var(--c-morado-borde); --menu-texto:var(--c-morado-hondo); --menu-acento:var(--morado-fuerte); --menu-acento-texto:#fff }
body.crm .movil-cabeza.fam-dinero   { --menu-fondo:var(--c-verde-borde); --menu-texto:var(--c-verde-hondo); --menu-acento:var(--c-verde); --menu-acento-texto:var(--c-sobre-color) }
body.crm .movil-cabeza.fam-operacion{ --menu-fondo:var(--c-naranja-borde); --menu-texto:var(--c-naranja-hondo); --menu-acento:var(--c-naranja); --menu-acento-texto:var(--c-sobre-color) }
body.crm .movil-cabeza.fam-gente    { --menu-fondo:var(--c-rosa-borde); --menu-texto:var(--c-rosa-hondo); --menu-acento:var(--rosa-fuerte); --menu-acento-texto:#fff }
html.oscuro body.crm .movil-cabeza.fam-hoy      { --menu-fondo:var(--c-cian-tinte); --menu-texto:var(--c-cian-hondo) }
html.oscuro body.crm .movil-cabeza.fam-comercial{ --menu-fondo:var(--c-morado-tinte); --menu-texto:var(--c-morado-hondo) }
html.oscuro body.crm .movil-cabeza.fam-dinero   { --menu-fondo:var(--c-verde-tinte); --menu-texto:var(--c-verde-hondo) }
html.oscuro body.crm .movil-cabeza.fam-operacion{ --menu-fondo:var(--c-naranja-tinte); --menu-texto:var(--c-naranja-hondo) }
html.oscuro body.crm .movil-cabeza.fam-gente    { --menu-fondo:var(--c-rosa-tinte); --menu-texto:var(--c-rosa-hondo) }
body.crm .inicio-movil,
body.crm .movil-buscar,
body.crm .movil-sub{ display:none }
@media (max-width:900px){
  /* --- El marco en el teléfono: se desarma ------------------------------------
     El `aside` deja de ser caja (`display:contents`) y sus cuatro piezas se
     acomodan solas: logotipo y buscador arriba, la tira de módulos pegada al
     techo, el contenido, y la cuenta al final. Mismo truco
     que ya usaba la cabecera vieja, y por la misma razón: algo pegado DENTRO de
     una caja que se va con el scroll, se va con ella. */

  /* `stretch` y no el `flex-start` de la computadora: en columna, flex-start
     deja cada pieza del ancho de su contenido y la tabla más ancha empujaba
     la página entera de lado. */
  body.crm.con-marco .crm-cuerpo{ display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; position:relative }
  body.crm.con-marco .crm-cuerpo > .envoltura{ min-width:0; width:auto; box-sizing:border-box; order:4; padding-top:1.2rem }
  body.crm .menu-lateral .menu-crm{ flex:none; order:3 }
  body.crm .menu-lateral{ display:contents }
  body.crm .menu-marca{ order:1; background:var(--menu-fondo);}
  body.crm .menu-buscar{ order:2; background:var(--menu-fondo); padding:0 1.2rem .7rem }
  body.crm .menu-yo{ order:5; margin:0 1.2rem 1.4rem; background:var(--menu-fondo); color:var(--menu-texto) }
  body.crm.con-marco h1{ font-size:var(--letra-2xl) }
  body.crm .menu-crm .globo{ margin-left:.1rem }

  /* Lugar para la barra de abajo, también en los iPhone sin botón. */
  body.crm.con-marco .crm-cuerpo > .envoltura{
    padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right));
  }

  /* --- La franja de arriba ------------------------------------------------ */
  body.crm .movil-cabeza{
    order:0; display:flex; align-items:center; justify-content:space-between; gap:.8rem;
    padding:calc(.5rem + env(safe-area-inset-top)) 1rem .5rem;
    background:var(--menu-fondo); color:var(--menu-texto);
  }
  body.crm .movil-marca{ display:flex; align-items:center; gap:.45rem; color:inherit; text-decoration:none; min-height:2.75rem; margin-right:auto }
  body.crm .movil-marca img{ width:28px; height:28px; border-radius:var(--r-chico) }
  body.crm .movil-marca .menu-bgu{ font-weight:800; font-size:var(--letra-md); letter-spacing:.02em }
  body.crm .movil-marca .marca-crm{ font-size:var(--letra-xs); padding:.16rem .5rem }
  body.crm .movil-yo{ display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border-radius:50%; text-decoration:none }
  body.crm .movil-yo .yo-avatar{ width:2.2rem; height:2.2rem; font-size:var(--letra-xs); box-shadow:0 0 0 2px rgba(255,255,255,.7) }
  body.crm .movil-yo:focus-visible{ outline:3px solid currentColor; outline-offset:1px }

  /* --- La hoja del menú ---------------------------------------------------
     El `aside` deja de desarmarse (`display:contents`) y es
     una hoja fija que sube desde abajo. */
  body.crm.con-marco .menu-lateral{
    display:flex; flex-direction:column; gap:.9rem;
    position:fixed; inset:0; z-index:300; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
    padding:env(safe-area-inset-top) 0 calc(1.4rem + env(safe-area-inset-bottom));
    background:var(--menu-fondo); color:var(--menu-texto);
    transform:translateY(100%); visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
  }
  body.crm.con-marco.hoja-abierta .menu-lateral,
  body.crm.con-marco .menu-lateral:target{
    transform:none; visibility:visible;
    transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
  body.crm.hoja-abierta{ overflow:hidden }
  body.crm .hoja-cabeza{
    order:0; display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:5; padding:.6rem .6rem .4rem 1.2rem;
    background:var(--menu-fondo);
  }
  body.crm .hoja-cabeza strong{ font-size:var(--letra-xl); letter-spacing:-.02em }
  body.crm .hoja-cerrar{
    display:flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem;
    border-radius:50%; color:inherit; background:rgba(255,255,255,.55);
  }
  html.oscuro body.crm .hoja-cerrar{ background:rgba(255,255,255,.1) }
  body.crm .hoja-cerrar svg{ width:1.3rem; height:1.3rem }
  body.crm .hoja-cerrar:focus-visible{ outline:3px solid currentColor; outline-offset:2px }

  /* La marca ya está en la franja de arriba: en la hoja sobra. */
  body.crm.con-marco .menu-lateral .menu-marca{ display:none }
  body.crm.con-marco .menu-lateral .menu-buscar{ order:1; background:none; padding:0 1.2rem }
  body.crm .menu-buscar input{ font-size:var(--letra-md); min-height:3rem; border-radius:var(--r-medio) }

  /* Los módulos: tarjetas de dos en dos, con su familia encima. */
  body.crm.con-marco .menu-lateral .menu-crm{
    /* z-index en auto: el 60 de la tira vieja hacía que los módulos pasaran
       por encima del título «Menú» al deslizar la hoja. */
    order:2; position:static; z-index:auto; flex:none; flex-direction:column; gap:1.15rem;
    overflow:visible; max-height:none; padding:.2rem 1.2rem 0;
    background:none; box-shadow:none; border-radius:0; -webkit-mask-image:none; mask-image:none;
  }
  body.crm.con-marco .menu-lateral .menu-crm .familia{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem;
  }
  body.crm.con-marco .menu-lateral .menu-crm .familia-nombre{ display:flex; grid-column:1/-1; padding:0 .2rem .1rem }
  body.crm.con-marco .menu-lateral .menu-crm a,
  body.crm.con-marco .menu-lateral .menu-crm .pendiente{
    min-height:3.4rem; padding:.55rem .8rem; gap:.4rem; border-radius:var(--r-medio);
    white-space:normal; line-height:1.2; font-size:var(--letra-md);
    background:rgba(255,255,255,.5);
  }
  html.oscuro body.crm.con-marco .menu-lateral .menu-crm a{ background:rgba(255,255,255,.06) }
  body.crm.con-marco .menu-lateral .menu-crm a::before,
  body.crm.con-marco .menu-lateral .menu-crm .pendiente::before{ content:none }
  body.crm.con-marco .menu-lateral .menu-crm a.aqui{ background:var(--c-superficie); color:#17232B }
  html.oscuro body.crm.con-marco .menu-lateral .menu-crm a.aqui{ background:rgba(255,255,255,.92) }
  body.crm.con-marco .menu-lateral .menu-crm .globo{ margin-left:auto }

  /* La cuenta, al final de la hoja; su panel se abre hacia abajo. */
  body.crm.con-marco .menu-lateral .menu-yo{ order:3; margin:.4rem 1.2rem 0; background:none }
  body.crm.con-marco .menu-lateral .yo-panel{ position:static; margin-top:.45rem; box-shadow:none }
  body.crm .yo-panel > a, body.crm .yo-cerrar button{ min-height:2.9rem; display:flex; align-items:center }

  /* --- La barra de abajo -------------------------------------------------- */
  body.crm .barra-movil{
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
    position:fixed;z-index:250;border-top:1px solid var(--line);
    --fam-fondo:var(--c-cian-borde); --fam-tinta:var(--c-cian-hondo); left:max(.75rem, env(safe-area-inset-left)); right:max(.75rem, env(safe-area-inset-right)); bottom:calc(.6rem + env(safe-area-inset-bottom)); padding:.35rem; gap:.15rem; border:0; border-radius:var(--r-grande); background:var(--fam-fondo); box-shadow:var(--sombra-2);
  }
  body.crm .barra-movil a{
    display:flex; flex-direction:column; align-items:center; justify-content:center;text-decoration:none;letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;
    min-height:3.5rem; gap:.12rem; border-radius:var(--r-grande); color:var(--fam-tinta); font-size:var(--letra-xs); font-weight:700; opacity:.82; transition:background .15s, opacity .15s;
  }
  body.crm .barra-icono{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:3.4rem; height:1.95rem; border-radius:var(--r-pildora); transition:background .15s;
  }
  body.crm .barra-icono svg{ width:1.4rem; height:1.4rem }
  body.crm .barra-movil a.aqui,
  body.crm .barra-movil a[aria-expanded="true"]{ color:var(--ink) }
  body.crm .barra-movil a.aqui .barra-icono,
  body.crm .barra-movil a[aria-expanded="true"] .barra-icono{
    background:color-mix(in srgb, var(--fam-punto,var(--c-cian)) 26%, transparent);
  }
  body.crm .barra-movil a:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px }
  body.crm .barra-movil a:active .barra-icono{ background:color-mix(in srgb, var(--fam-punto,var(--c-cian)) 18%, transparent) }
  body.crm .barra-globo{
    position:absolute; top:-.2rem; right:.35rem; min-width:1.2rem; height:1.2rem; padding:0 .3rem;
    box-sizing:border-box; border-radius:var(--r-pildora); display:flex; align-items:center; justify-content:center;
    font-size:var(--letra-xs); font-weight:700; line-height:1; background:var(--c-cian); color:var(--c-sobre-color);
    box-shadow:0 0 0 2px var(--white);
  }

  /* Rojo más hondo para que el número blanco se lea (antes 3.9 a 1). 06/10/2026 */
  body.crm .barra-globo.urgente{ background:var(--c-error-texto); color:#fff }
  html.oscuro body.crm .barra-globo.urgente{ background:var(--c-error-punto); color:var(--c-sobre-color) }
  body.crm .barra-menu[data-aviso] .barra-icono::after{
    content:""; position:absolute; top:.05rem; right:.85rem; width:.6rem; height:.6rem; border-radius:50%;
    background:var(--c-cian); box-shadow:0 0 0 2px var(--white);
  }
  body.crm .barra-menu[data-aviso="urgente"] .barra-icono::after{ background:var(--c-error-punto) }
  body.crm .movil-yo.barra-menu .barra-icono::after{ content:none }

  /* Lo que se pega abajo (el botón de guardar) sube por encima de la barra. */

  /* Campos de 16 px: con menos, el iPhone se acerca solo al tocarlos y hay
     que alejar con los dedos cada vez. */
  body.crm.con-marco input:not([type=checkbox]):not([type=radio]),
  body.crm.con-marco select,
  body.crm.con-marco textarea{ font-size:var(--letra-md) }
  body.crm .solo-escritorio{ display:none !important }

  /* --- La barra de abajo: flotante, del color de la familia --------------- */
  body.crm.con-marco{ padding-bottom:calc(6rem + env(safe-area-inset-bottom)) }
  body.crm.pag-comercial .barra-movil{ --fam-fondo:var(--c-morado-borde); --fam-tinta:var(--c-morado-hondo) }
  body.crm.pag-dinero    .barra-movil{ --fam-fondo:var(--c-verde-borde); --fam-tinta:var(--c-verde-hondo) }
  body.crm.pag-operacion .barra-movil{ --fam-fondo:var(--c-naranja-borde); --fam-tinta:var(--c-naranja-hondo) }
  body.crm.pag-gente     .barra-movil{ --fam-fondo:var(--c-rosa-borde); --fam-tinta:var(--c-rosa-hondo) }
  html.oscuro body.crm .barra-movil{ --fam-fondo:var(--c-cian-tinte); --fam-tinta:var(--c-cian-hondo) }
  html.oscuro body.crm.pag-comercial .barra-movil{ --fam-fondo:var(--c-morado-tinte); --fam-tinta:var(--c-morado-hondo) }
  html.oscuro body.crm.pag-dinero    .barra-movil{ --fam-fondo:var(--c-verde-tinte); --fam-tinta:var(--c-verde-hondo) }
  html.oscuro body.crm.pag-operacion .barra-movil{ --fam-fondo:var(--c-naranja-tinte); --fam-tinta:var(--c-naranja-hondo) }
  html.oscuro body.crm.pag-gente     .barra-movil{ --fam-fondo:var(--c-rosa-tinte); --fam-tinta:var(--c-rosa-hondo) }
  body.crm .barra-movil .barra-icono{ width:auto; height:1.6rem; background:none !important }
  body.crm .barra-movil .barra-icono svg{ width:1.45rem; height:1.45rem }
  body.crm .barra-movil a.aqui{
    opacity:1; color:var(--c-tinta); background:var(--c-superficie);
    box-shadow:var(--sombra-1);
  }
  html.oscuro body.crm .barra-movil a.aqui{ background:rgba(255,255,255,.94); color:#17232B }
  body.crm .barra-movil a:active{ background:rgba(255,255,255,.45) }
  body.crm .barra-movil .barra-globo{ top:-.35rem; right:-.65rem; box-shadow:0 0 0 2px var(--fam-fondo) }
  body.crm .barra-punto{
    position:absolute; top:-.1rem; right:-.3rem; width:.55rem; height:.55rem; border-radius:50%;
    background:var(--c-cian); box-shadow:0 0 0 2px var(--fam-fondo);
  }
  body.crm .barra-punto.urgente{ background:var(--c-error-punto) }
  body.crm.con-marco .barra-guardar{ bottom:calc(5.6rem + env(safe-area-inset-bottom)) }

  /* --- La franja de arriba de los módulos: lupa y pestañas chicas -------- */
  body.crm .movil-cabeza{ flex-wrap:wrap; row-gap:.35rem; padding-bottom:.4rem }
  body.crm .movil-buscar{
    display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem;
    border-radius:50%; color:inherit;
  }
  body.crm .movil-buscar svg{ width:1.3rem; height:1.3rem }
  body.crm .movil-buscar:active{ background:rgba(255,255,255,.4) }
  body.crm .movil-sub{
    display:flex; gap:.35rem; flex-basis:100%; overflow-x:auto; scrollbar-width:none;
    margin:0 -1rem; padding:0 1rem .1rem;
  }
  body.crm .movil-sub::-webkit-scrollbar{ display:none }
  body.crm .movil-sub a{
    flex:none; display:flex; align-items:center; gap:.3rem; min-height:2.2rem; padding:0 .85rem;
    border-radius:var(--r-pildora); color:inherit; text-decoration:none; font-size:var(--letra-sm); font-weight:700;
    background:rgba(255,255,255,.4);
  }
  html.oscuro body.crm .movil-sub a{ background:rgba(255,255,255,.08) }
  body.crm .movil-sub a.aqui{ background:var(--c-superficie); color:var(--c-tinta) }
  body.crm .sub-globo{
    min-width:1.1rem; height:1.1rem; padding:0 .28rem; border-radius:var(--r-pildora); box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center; font-size:var(--letra-xs);
    background:var(--c-cian); color:var(--c-sobre-color);
  }
  body.crm .sub-globo.urgente{ background:var(--c-error-texto); color:#fff }
  html.oscuro body.crm .sub-globo.urgente{ background:var(--c-error-punto); color:var(--c-sobre-color) }
  body.crm.con-marco:not(.mod-tablero) .movil-cabeza{
    position:absolute; z-index:20; top:calc(1.2rem + env(safe-area-inset-top)); right:max(1rem, env(safe-area-inset-right));
    flex-wrap:nowrap; gap:.4rem; padding:0; background:none; color:var(--ink);
  }
  body.crm.con-marco .movil-cabeza .movil-marca{ display:none }
  body.crm.con-marco .movil-buscar{ color:var(--ink) }
  body.crm.con-marco .movil-buscar:active{ background:rgba(23,35,43,.06) }
  body.crm.con-marco .movil-yo{ width:3rem; height:3rem }
  body.crm.con-marco .movil-yo .yo-avatar{
    width:3rem; height:3rem; font-size:var(--letra-md); font-weight:800; box-shadow:none;
    background:var(--c-tinta); color:var(--cian-sobre-tinta);
  }
  html.oscuro body.crm.con-marco .movil-yo .yo-avatar{ background:var(--c-borde) }

  /* Sitio para la lupa y el círculo junto al título (y junto a un aviso que
     llegue antes que él). */
  body.crm.con-marco:not(.mod-tablero) .crm-cuerpo > .envoltura{ padding-top:calc(1.2rem + env(safe-area-inset-top)) }
  body.crm.con-marco:not(.mod-tablero) .envoltura h1,
  body.crm.con-marco:not(.mod-tablero) .envoltura > .recado:first-child{ margin-right:6.6rem }
  body.crm.con-marco:not(.mod-tablero) .envoltura > .recado:first-child ~ * h1{ margin-right:0 }

  /* Las pestañas de la familia, ya debajo del título: un control segmentado
     gris, para que no se confundan con los botones de acción. */
  body.crm .envoltura .movil-sub{
    display:flex; flex-wrap:nowrap; gap:.2rem; width:max-content; max-width:100%; box-sizing:border-box;
    overflow-x:auto; scrollbar-width:none; margin:.7rem 0 .55rem; padding:.22rem;
    border-radius:var(--r-pildora); background:rgba(23,35,43,.07);
    overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  }
  html.oscuro body.crm .envoltura .movil-sub{ background:rgba(255,255,255,.08) }
  body.crm .envoltura .movil-sub a{ background:none; color:var(--gray); min-height:2.5rem; padding:0 1rem; font-size:var(--letra-base); scroll-snap-align:center }
  html.oscuro body.crm .envoltura .movil-sub a{ background:none }
  body.crm .envoltura .movil-sub a.aqui{ background:var(--c-superficie); color:var(--c-tinta); box-shadow:var(--sombra-1) }
  html.oscuro body.crm .envoltura .movil-sub a.aqui{ background:var(--c-borde); color:var(--c-tinta); box-shadow:none }

  /* Que nada de lo que envuelve a la tira la deje crecer más que la pantalla. */
  body.crm .envoltura .encabezado-crm > *,
  body.crm .envoltura :has(> .movil-sub){ min-width:0; max-width:100% }
  body.crm .movil-sub.mas-der{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent) }
  body.crm .movil-sub.mas-izq{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.2rem); mask-image:linear-gradient(90deg,transparent,#000 2.2rem) }
  body.crm .movil-sub.mas-izq.mas-der{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.2rem,#000 calc(100% - 2.2rem),transparent); mask-image:linear-gradient(90deg,transparent,#000 2.2rem,#000 calc(100% - 2.2rem),transparent) }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  body.crm.con-marco .menu-lateral{ transition:none }
}
@media print{
  body.crm .menu-lateral{ display:none }
  body.crm.con-marco[class*="pag-"] .crm-cuerpo h1::before{ display:none }
  body.crm .movil-cabeza, body.crm .barra-movil{ display:none !important }
}


/* ===========================================================================
   32. EL INICIO EN EL TELÉFONO
   ---------------------------------------------------------------------------
   La tarjeta negra, Facturado y cobrado, Hoy y el botón redondo «+».
   =========================================================================== */

@media (max-width:900px){
  /* --- El Inicio ------------------------------------------------------------ */
  body.crm.mod-tablero .movil-cabeza{ display:none }
  body.crm .inicio-movil{
    display:flex; flex-direction:column; gap:.85rem;
    padding-top:calc(.9rem + env(safe-area-inset-top));
    font-variant-numeric:tabular-nums;
  }
  body.crm .inicio-movil a{ -webkit-tap-highlight-color:transparent }
  body.crm .im-cabeza{ display:flex; align-items:center; gap:.4rem; margin-bottom:.15rem }
  body.crm .im-cabeza > div{ flex:1; min-width:0 }
  body.crm .im-fecha{ display:block; color:var(--gray); font-size:var(--letra-base); font-weight:600 }
  body.crm .im-cabeza h1{ margin:0; font-size:var(--letra-2xl); line-height:1.15; letter-spacing:-.025em }
  body.crm.con-marco .crm-cuerpo .im-cabeza h1::before{ content:none; display:none }
  body.crm .im-boton{
    flex:none; display:flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem;
    border-radius:50%; color:var(--ink);
  }
  body.crm .im-boton svg{ width:1.35rem; height:1.35rem }
  body.crm .im-yo{
    flex:none; display:flex; align-items:center; justify-content:center; width:3rem; height:3rem;
    border-radius:50%; background:var(--c-tinta); color:var(--cian-sobre-tinta); font-weight:800; font-size:var(--letra-md);
    text-decoration:none;
  }
  html.oscuro body.crm .im-yo{ background:var(--c-borde) }

  /* La tarjeta oscura */
  body.crm .im-hero{
    display:flex; flex-direction:column; gap:.55rem;
    padding:1.15rem 1.2rem 1.2rem; border-radius:var(--r-grande); background:#17232B; color:#fff;
  }
  html.oscuro body.crm .im-hero{ background:#0B1116; box-shadow:inset 0 0 0 1px var(--c-borde) }
  body.crm .im-hero-cabeza{ display:flex; align-items:center; justify-content:space-between; gap:.6rem }
  body.crm .im-mes{ position:relative; margin:0 }
  body.crm .im-mes > span{
    display:inline-flex; align-items:center; gap:.3rem; min-height:2.2rem; padding:0 .2rem;
    color:#AEBAC4; font-size:var(--letra-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  }
  body.crm .im-mes b{ font-size:var(--letra-xs); color:#fff }
  body.crm .im-mes select{
    position:absolute; inset:0; width:100%; height:100%; opacity:0; font-size:var(--letra-md); cursor:pointer;
  }
  body.crm .im-cambio{
    flex:none; padding:.3rem .65rem; border-radius:var(--r-pildora); font-size:var(--letra-sm); font-weight:800;
    background:rgba(143,209,23,.16); color:#A3E52B;
  }
  body.crm .im-cambio.mal{ background:rgba(242,112,94,.16); color:#F2896F }
  body.crm .im-cifra{
    color:#fff; text-decoration:none; font-size:2.6rem; font-weight:800; line-height:1.05; letter-spacing:-.03em;
  }
  body.crm .im-barra{
    position:relative; height:.6rem; border-radius:var(--r-pildora); background:rgba(255,255,255,.1); margin-top:.15rem;
  }
  body.crm .im-lleno{ position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pildora); background:#8FD117 }
  body.crm .im-lleno.atencion{ background:#E0A82E }
  body.crm .im-lleno.mal{ background:#F2705E }
  body.crm .im-banda{
    position:absolute; top:-.12rem; bottom:-.12rem; border-radius:var(--r-pildora);
    background:rgba(63,208,238,.32); box-shadow:inset 0 0 0 1.5px rgba(63,208,238,.7);
  }
  body.crm .im-margen{ margin:0; color:#D5DDE3; font-size:var(--letra-md) }
  body.crm .im-margen b{ color:#fff }
  body.crm .im-nota{ margin:0; color:#AEBAC4; font-size:var(--letra-sm); line-height:1.35 }
  body.crm .im-prov{
    align-self:flex-start; display:inline-flex; align-items:center; gap:.3rem; min-height:2.2rem;
    padding:0 .75rem; border-radius:var(--r-pildora); text-decoration:none; font-size:var(--letra-sm); font-weight:700;
    background:rgba(224,168,46,.16); color:#F2C35B;
  }

  /* Facturado y cobrado */
  body.crm .im-dos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem }
  body.crm .im-tile, body.crm .im-cuentas{
    display:flex; flex-direction:column; gap:.2rem; padding:.95rem 1rem; border-radius:var(--r-grande);
    background:var(--white); color:var(--ink); text-decoration:none;
    box-shadow:var(--sombra-2);
  }
  body.crm .im-et{ font-size:var(--letra-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gray) }
  body.crm .im-num{ font-size:var(--letra-xl); font-weight:800; letter-spacing:-.025em; line-height:1.15 }
  body.crm .im-tile svg{ width:100%; height:30px; margin:.15rem 0 .05rem }
  body.crm .im-pie{ font-size:var(--letra-sm); font-weight:700; color:var(--gray) }
  body.crm .im-pie.bien{ color:var(--c-ok-texto) }
  body.crm .im-pie.atencion{ color:var(--c-aviso-texto) }
  body.crm .im-pie.mal{ color:var(--c-error-texto) }
  html.oscuro body.crm .im-pie.bien{ color:var(--c-ok-texto) }
  html.oscuro body.crm .im-pie.atencion{ color:var(--c-aviso-punto) }
  html.oscuro body.crm .im-pie.mal{ color:var(--c-error-punto) }

  /* Las cuentas, en una línea */
  body.crm .im-cuentas{ flex-direction:row; align-items:center; justify-content:space-between; gap:.8rem }
  body.crm .im-cuentas > span:first-child{ display:flex; flex-direction:column; gap:.15rem }
  body.crm .im-cuantas{ color:var(--gray); font-size:var(--letra-base); font-weight:600; white-space:nowrap }
  body.crm .im-cuantas b{ font-size:var(--letra-lg); margin-left:.2rem; vertical-align:-.05rem }

  /* Hoy */
  body.crm .im-hoy{
    padding:.95rem 1rem .4rem; border-radius:var(--r-grande); background:var(--white);
    box-shadow:var(--sombra-2);
  }
  body.crm .im-hoy h2{
    display:flex; align-items:baseline; gap:.5rem; margin:0; padding-bottom:.6rem;
    border-bottom:1px solid var(--line); font-size:var(--letra-xl); letter-spacing:-.02em;
  }
  body.crm .im-hoy h2 span{ font-size:var(--letra-base); font-weight:600; color:var(--gray); letter-spacing:0 }
  body.crm .im-hoy ul{ list-style:none; margin:0; padding:0 }
  body.crm .im-hoy li + li{ border-top:1px solid var(--line) }
  body.crm .im-fila{
    display:flex; align-items:center; gap:.8rem; min-height:3.6rem; padding:.7rem 0;
    color:var(--ink); text-decoration:none;
  }
  body.crm a.im-fila:active{ opacity:.6 }
  body.crm .im-ico{
    flex:none; display:flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem;
    border-radius:var(--r-medio); font-weight:800; font-size:var(--letra-md);
    background:var(--c-cian-tinte); color:var(--c-cian-medio);
  }
  body.crm .urgente .im-ico{ background:var(--c-error-fondo); color:var(--c-error-texto) }
  body.crm .aviso .im-ico{ background:var(--c-aviso-fondo); color:var(--c-aviso-texto) }
  html.oscuro body.crm .im-ico{ background:rgba(63,208,238,.14); color:var(--c-cian) }
  html.oscuro body.crm .urgente .im-ico{ background:rgba(242,112,94,.16); color:var(--c-error-punto) }
  html.oscuro body.crm .aviso .im-ico{ background:rgba(224,168,46,.16); color:var(--c-aviso-punto) }
  body.crm .im-texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem }
  body.crm .im-texto strong{ font-size:var(--letra-md); line-height:1.25 }
  body.crm .im-texto span{ font-size:var(--letra-base); color:var(--gray); line-height:1.3 }
  body.crm .im-flecha{ flex:none; color:var(--gray); font-size:var(--letra-xl); line-height:1 }
  body.crm .im-vacio{ margin:.4rem 0 .6rem; color:var(--gray); font-size:var(--letra-base) }

  /* El botón redondo «+»: Ingreso o Egreso */
  body.crm .im-fab{ position:fixed; z-index:240; right:max(1rem, env(safe-area-inset-right)); bottom:calc(5.9rem + env(safe-area-inset-bottom)) }
  body.crm .im-fab summary{
    list-style:none; display:flex; align-items:center; justify-content:center; width:3.5rem; height:3.5rem;
    border-radius:50%; background:var(--c-tinta); color:var(--c-superficie); font-size:var(--letra-2xl); font-weight:400; line-height:1;
    box-shadow:var(--sombra-2); cursor:pointer; transition:transform .2s;
  }
  body.crm .im-fab summary::-webkit-details-marker{ display:none }
  body.crm .im-fab[open] summary{ transform:rotate(45deg) }
  html.oscuro body.crm .im-fab summary{ background:var(--c-cian); color:var(--c-sobre-color) }
  body.crm .im-fab-menu{
    position:absolute; right:0; bottom:4.2rem; display:flex; flex-direction:column; gap:.25rem;
    min-width:10rem; padding:.4rem; border-radius:var(--r-grande); background:var(--white);
    box-shadow:var(--sombra-3);
  }
  html.oscuro body.crm .im-fab-menu{ box-shadow:inset 0 0 0 1px var(--c-borde), var(--sombra-3) }
  body.crm .im-fab-menu a{
    display:flex; align-items:center; gap:.6rem; min-height:2.9rem; padding:0 .8rem; border-radius:var(--r-medio);
    color:var(--ink); text-decoration:none; font-weight:700;
  }
  body.crm .im-fab-menu a:active{ background:var(--line) }
  body.crm .im-fab-menu i{
    display:flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem; border-radius:50%;
    font-style:normal; font-weight:800;
  }
  body.crm .im-fab-menu i.bien{ background:var(--c-ok-fondo); color:var(--c-ok-texto) }
  body.crm .im-fab-menu i.mal{ background:var(--c-error-fondo); color:var(--c-error-texto) }
  body.crm .im-mas{ margin:1.2rem 0 0; font-size:var(--letra-md); color:var(--gray); font-weight:700 }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  body.crm .im-fab summary{ transition:none }
}
@media print{
  body.crm .inicio-movil{ display:none !important }
}

/* ===========================================================================
   33. SESIÓN Y BORRADORES
   ---------------------------------------------------------------------------
   El aviso de «se cerró por inactividad» (assets/sigo-aqui.js) y el de «hay un
   borrador sin guardar» (assets/borrador.js). 16/10/2026.
   =========================================================================== */

body.crm .sesion-cerrada{
  position:fixed; z-index:60; left:50%; top:1rem; transform:translateX(-50%);
  width:min(36rem, calc(100% - 2rem)); margin:0;
  box-shadow:var(--sombra-2);
}
body.crm .sesion-cerrada .acciones,
body.crm .borrador-aviso .acciones{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem }
body.crm .borrador-aviso{ margin-bottom:1rem }