/* crm.css — CRM F1 (11-sep-2026, spec 2026-09-11-crm-f1-clientes.md)

   A diferencia de Gaviones (que se CALCA a propósito, con sus propios colores en gav-app.css),
   el CRM es una pantalla nueva de Cargas: usa el sistema de diseño de siempre, sin un solo color
   ni tamaño a mano — todo `var(--…)` de app.css (.claude/skills/diseno-cargas/SKILL.md). Por eso
   este fichero no define NINGÚN token propio.

   Todo bajo `.crmx` (las tres vistas nuevas y las hojas que abre crm.js, que viven fuera del DOM
   de esas vistas — dlg-hoja las cuelga de document.body — llevan también la clase `.crmx` para
   que estas reglas les alcancen, igual que `.gvx.overlay` en gav-app.css). `.b`/`.b-cta`/`.b-sec`/
   `.b-gh` (con `.b-sm`/`.b-xl`) son el sistema de botones que describe el skill: no existían
   todavía como clase compartida en app.css, así que nacen aquí, solo para este módulo.

   Móvil primero (390px): todo a una columna, la ficha en hoja a pantalla completa. A partir de
   1024px, «Clientes» pasa a maestro-detalle y «Hoy» a dos columnas. A 1440px se les da más aire. */

/* ── Botones (skill diseno-cargas §3): un CTA por pantalla, siempre en --c-estr-* ── */
.crmx .b{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--tap);
  padding:10px 18px;border-radius:var(--rd-sm);border:1px solid transparent;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:var(--fs-sm);font-weight:700;text-decoration:none;
  box-sizing:border-box;transition:filter .12s,background .12s}
.crmx .b:hover{filter:brightness(.97)}
.crmx .b-cta{background:var(--c-estr-btn);color:#fff}
.crmx .b-sec{background:var(--surface);border-color:var(--border2);color:var(--text)}
.crmx .b-gh{background:none;border-color:transparent;color:var(--text2)}
.crmx .b-sm{min-height:36px;padding:6px 12px;font-size:var(--fs-xs)}
.crmx .b-xl{min-height:var(--tap-planta);padding:14px 22px;font-size:var(--fs-lg)}

/* ── Genéricos ── */
.crmx .mono{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.crmx .crm-aviso{font-size:var(--fs-xs);color:var(--c-esp-fg);background:var(--c-esp-bg);
  border-radius:var(--rd-sm);padding:8px 12px;margin-bottom:10px}
/* error dentro de una hoja (alta de persona, spec 2026-10-13): el rojo de «problema», no el ámbar de aviso */
.crmx .crm-aviso-err{color:var(--c-prob-fg);background:var(--c-prob-bg)}
/* franja de «Escondido…» arriba de la ficha de un contacto (spec 2026-10-15-crm-esconder-contactos.md): el texto y, a su lado, el botón de volver a mostrar / ver la empresa */
.crmx .crm-aviso-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* «Nueva empresa» de Contactos (parte B de la spec 2026-10-13): fila propia encima del buscador, el botón a la derecha */
.crmx .crm-cont-acciones{display:flex;justify-content:flex-end;margin-bottom:8px}
.crmx .crm-link{display:inline-flex;align-items:center;gap:5px;color:var(--c-curso-fg);
  font-size:var(--fs-sm);text-decoration:none}
.crmx .crm-link:hover{text-decoration:underline}
.crmx .crm-chip{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--rd-pill);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.crmx .crm-chip-prob{background:var(--c-prob-bg);color:var(--c-prob-fg)}
.crmx .crm-chip-esp{background:var(--c-esp-bg);color:var(--c-esp-fg)}
.crmx .crm-chip-ok{background:var(--c-ok-bg);color:var(--c-ok-fg)}
.crmx .crm-chip-curso{background:var(--c-curso-bg);color:var(--c-curso-fg)}
.crmx .crm-chip-bc{background:var(--c-bc-bg);color:var(--c-bc-fg)}
.crmx .crm-chip-neu{background:var(--c-neu-bg);color:var(--text2)}
/* F27 (25-sep-2026, spec 2026-09-25-crm-f27-…): chip «Gerencia» de la ficha — la voz de quien
   dirige no es un estado (ok/curso/esp/prob/neu/bc), así que usa el acento de marca de siempre. */
.crmx .crm-chip-estr{background:var(--c-estr-bg);color:var(--c-estr-fg)}
.crmx .crm-cli-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
/* F22 (16-sep-2026, spec 2026-09-16-crm-f22-outlook-calendario.md): chip de un invitado ya elegido,
   con × para quitarlo — a diferencia de .crm-chip-f (que alterna on/off) este SIEMPRE está puesto:
   tocar la × lo borra del todo, no lo apaga. */
.crmx .crm-chip-x{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border2);
  background:var(--surface2);color:var(--text);border-radius:var(--rd-pill);padding:5px 6px 5px 12px;
  font-size:var(--fs-xs);font-weight:600}
.crmx .crm-chip-x button{display:inline-flex;align-items:center;justify-content:center;border:none;
  background:none;color:var(--text2);cursor:pointer;width:22px;height:22px;border-radius:50%;padding:0}
.crmx .crm-chip-x button:hover{background:var(--surface3);color:var(--text)}

/* campos de formulario (buscador, nota rápida, nueva acción, filtros del historial) */
.crmx input,.crmx select,.crmx textarea{width:100%;font-size:var(--fs-md);padding:9px 11px;
  border:1px solid var(--border2);border-radius:var(--rd-sm);background:var(--surface);color:var(--text);
  font-family:'DM Sans',sans-serif;box-sizing:border-box;outline:none}
.crmx input:focus,.crmx select:focus,.crmx textarea:focus{border-color:var(--c-estr-fg)}
.crmx textarea{resize:vertical;min-height:90px}
.crmx .crm-campo{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.crmx .crm-campo label{font-size:var(--fs-xs);color:var(--text2);font-weight:600}
/* F21 (16-sep-2026): «Cuándo» + «Hora» en la misma fila — envuelve en el móvil, cada campo con un
   ancho mínimo para no aplastarse en pantallas estrechas (skill diseno-cargas: nada a mano, solo
   flex/gap con los .crm-campo de siempre dentro) */
.crmx .crm-campo-fila{display:flex;gap:10px;flex-wrap:wrap}
.crmx .crm-campo-fila>.crm-campo{flex:1 1 140px}

/* ── «Hoy» ── */
.crmx .crm-hoy-hdr{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
.crmx .crm-tit-pantalla{font-size:var(--fs-xl);font-weight:800}
.crmx .crm-sub{font-size:var(--fs-sm);color:var(--text2);text-transform:capitalize}
/* F4: el subtítulo de Radar/Oportunidades/Informe es una frase, no la fecha de Hoy — sin capitalizar cada palabra */
.crmx .crm-sub-frase{text-transform:none}
.crmx .crm-seg{display:inline-flex;border:1px solid var(--border2);border-radius:var(--rd-pill);
  overflow:hidden;background:var(--surface);margin-bottom:14px}
.crmx .crm-seg button{border:0;background:transparent;color:var(--text2);font-size:var(--fs-xs);
  font-weight:700;padding:8px 16px;cursor:pointer;min-height:var(--tap);font-family:inherit}
/* el índigo de LETRA hacía de fondo con blanco encima: 3,81 en tema oscuro. El de BOTÓN llega a
   4,56 — es el mismo caso que ya obligó a separar los dos tokens en app.css (v504). */
.crmx .crm-seg button.on{background:var(--c-estr-btn);color:#fff}
.crmx .crm-hoy-grid{display:grid;grid-template-columns:1fr;gap:18px}
.crmx .crm-col{display:flex;flex-direction:column;gap:14px}
.crmx .crm-sec{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--border2);
  border-radius:var(--rd);padding:12px 14px}
.crmx .crm-sec-prob{border-left-color:var(--c-prob-fg)}
.crmx .crm-sec-esp{border-left-color:var(--c-esp-fg)}
.crmx .crm-sec-neu{border-left-color:var(--border2)}
.crmx .crm-sec-tit{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text2);margin-bottom:8px}
.crmx .crm-accion{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;
  border-top:1px solid var(--border)}
.crmx .crm-accion:first-of-type{border-top:none}
.crmx .crm-accion-txt{flex:1;min-width:160px}
.crmx .crm-accion-que{font-size:var(--fs-lg);font-weight:700;line-height:1.25}
.crmx .crm-accion-cli{font-size:var(--fs-sm);color:var(--text2);cursor:pointer}
.crmx .crm-accion-cli:hover{color:var(--c-curso-fg)}
.crmx .crm-accion-meta{font-size:var(--fs-xs);color:var(--text2)}
.crmx .crm-accion-fecha{font-size:var(--fs-sm);color:var(--text2)}
.crmx .crm-nota{padding:9px 0;border-top:1px solid var(--border)}
.crmx .crm-nota:first-of-type{border-top:none}
.crmx .crm-nota-txt{font-size:var(--fs-md);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.crmx .crm-nota-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:var(--fs-xs);color:var(--text2);margin-top:3px}
.crmx .crm-mas{background:none;border:1px solid var(--border);color:var(--text2);cursor:pointer;padding:0 10px;
  border-radius:var(--rd-sm);font-size:var(--fs-sm);font-weight:600;min-height:var(--tap);white-space:nowrap}
.crmx .crm-mas:hover{background:var(--surface2);color:var(--text)}

/* ── «Clientes»: maestro-detalle ── */
.crmx .crm-maestro{display:flex;flex-direction:column;gap:16px}
.crmx .crm-lista-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.crmx .crm-buscar{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--rd-sm);padding:0 12px}
.crmx .crm-buscar i{color:var(--text3)}
.crmx .crm-buscar input{border:none;padding:9px 0;background:none}
.crmx .crm-buscar input:focus{border:none}
.crmx .crm-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.crmx .crm-chip-f{border:1px solid var(--border2);background:var(--surface);color:var(--text2);
  border-radius:var(--rd-pill);padding:7px 13px;font-size:var(--fs-xs);font-weight:700;cursor:pointer;
  font-family:inherit;min-height:var(--tap)}
.crmx .crm-chip-f.on{background:var(--c-estr-bg);border-color:var(--c-estr-fg);color:var(--c-estr-fg)}
.crmx .crm-chips select{width:auto;min-width:140px;min-height:var(--tap);font-size:var(--fs-xs)}
.crmx .crm-lista{display:flex;flex-direction:column;gap:10px;max-height:none;overflow:visible}
.crmx .crm-cli{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);
  border-left:5px solid var(--border2);border-radius:var(--rd);box-shadow:var(--sh);padding:12px 14px;
  cursor:pointer;font-family:inherit}
.crmx .crm-cli:hover{box-shadow:var(--shadow)}
.crmx .crm-cli.st-prob{border-left-color:var(--c-prob-fg)}
.crmx .crm-cli.st-curso{border-left-color:var(--c-curso-fg)}
.crmx .crm-cli.st-neu{border-left-color:var(--border2)}
.crmx .crm-cli.crm-cli-activa{outline:2px solid var(--c-estr-fg);outline-offset:-1px}
.crmx .crm-cli-nombre{font-size:var(--fs-lg);font-weight:700}
.crmx .crm-cli-linea2{font-size:var(--fs-sm);color:var(--text2);margin-top:2px}
.crmx .crm-cli-cifras{font-size:var(--fs-sm);color:var(--text);margin-top:5px}

/* a partir de 1024px: lista fija de 380px + ficha a la derecha, dentro de la vista (no en hoja) */
@media(min-width:1024px){
  .crmx .crm-maestro{flex-direction:row;align-items:flex-start}
  .crmx .crm-lista{overflow-y:auto;max-height:calc(100vh - 220px);padding-right:4px}
  .crmx .crm-ficha-col{flex:1;min-width:0}
  .crmx .crm-hoy-grid{grid-template-columns:1fr 1fr}
  /* Clientes y Contactos (spec 2026-09-30-crm-lista-mas-sitio.md): la columna ENTERA se desliza
     como una sola pieza, con el buscador pegado arriba. Antes solo se deslizaba la caja de la
     lista y todo lo de encima (Recientes, Favoritos, filtros) se quedaba fijo: en un portátil de
     768 px de alto a la lista le quedaban ~200 px, tarjeta y media. Ahora, al bajar, lo de encima
     se va y la lista aprovecha todo el alto. Solo en .crm-lista-col: Radar, Cerca y Mapa usan
     .crm-lista con su caja propia de siempre (la regla de arriba).
     Alto y pegado según los menús: visibles (56 cabecera + 45 pestañas = 101 px) → justo debajo
     de ellos y hasta el borde de abajo (con 162 px de salida en reposo, 174 deja el último trozo
     a la vista, no por debajo del borde); recogidos al bajar → arriba del todo y más alta; con ⛶
     no hay menús pero la columna sale igual 61 px más abajo en reposo. Antes se pegaba a 14 px
     con los menús a la vista: el buscador quedaba tapado debajo de ellos. */
  .crmx .crm-lista-col{width:380px;flex:none;position:sticky;top:113px;max-height:calc(100vh - 174px);
    overflow-y:auto;padding-right:4px;transition:top .22s ease,max-height .22s ease}
  html[data-nav="oculta"] .crmx .crm-lista-col{top:12px;max-height:calc(100vh - 24px)}
  html[data-chrome="oculto"] .crmx .crm-lista-col{top:12px;max-height:calc(100vh - 74px)}
  .crmx .crm-lista-col > .crm-lista{overflow:visible;max-height:none;padding-right:0}
  /* la sombra del color del fondo tapa las tarjetas que pasan por debajo del buscador (y sus
     esquinas redondeadas): sin ella asomaban por los lados de la caja */
  .crmx .crm-lista-col > .crm-buscar{position:sticky;top:0;z-index:2;box-shadow:0 0 0 8px var(--bg)}
}
/* Portátil y más (spec 2026-09-30-crm-lista-mas-sitio.md, anexo «dos columnas»): Clientes y
   Contactos enseñan las tarjetas de DOS en dos — el dueño: «¿podemos en portátil tener dos filas a
   la izquierda?». Desde 1280 (su PC: 1280 de ancho útil) la ficha aún se queda en ~580 px, lo
   mismo que ya tenía a 1024 con una columna; por debajo no cabría y sigue la de una. 600 también
   en pantallas grandes: la vista no pasa de 1200 px de ancho, así que una lista más ancha solo
   le quitaría sitio a la ficha (a 720 se quedaba en 464 px). Lo que no es tarjeta (aviso «Se
   enseñan 300…», «Nada con estos filtros», el pie de ocultos de Contactos) ocupa las dos
   columnas. De paso, a 600 px los seis chips de filtro caben en una sola fila. */
@media(min-width:1280px){
  .crmx .crm-lista-col{width:600px}
  .crmx .crm-lista-col > .crm-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;align-content:start}
  .crmx .crm-lista-col > .crm-lista > :not(.crm-cli){grid-column:1 / -1}
}

/* ── Ficha ── */
.crmx .crm-ficha-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-bottom:14px;position:sticky;top:0;background:var(--bg);padding:4px 0;z-index:1}
.crmx .crm-ficha-nombre{font-size:var(--fs-xl);font-weight:800}
.crmx .crm-ficha-num{font-size:var(--fs-sm);color:var(--text2)}
.crmx .crm-ficha-body{display:flex;flex-direction:column;gap:14px}
.crmx .crm-bloque{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);
  padding:14px 16px;box-shadow:var(--sh)}
.crmx .crm-bloque-tit{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text2);margin-bottom:10px}
.crmx .crm-bloque-meta{font-size:var(--fs-sm);color:var(--text2)}
.crmx .crm-acciones-rapidas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Dinero */
.crmx .crm-dinero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.crmx .crm-cifra-lbl{font-size:var(--fs-xs);color:var(--text2)}
.crmx .crm-cifra-v{font-size:var(--fs-2xl);font-weight:600;margin-top:2px}
.crmx .crm-cifra-v.crm-neg{color:var(--c-prob-fg)}
.crmx .crm-tramos{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border)}
.crmx .crm-tramo{display:flex;justify-content:space-between;font-size:var(--fs-sm)}
.crmx .crm-meta-linea{font-size:var(--fs-sm);color:var(--text2);margin-top:8px}
.crmx .crm-pie{font-size:var(--fs-xs);color:var(--text3);margin-top:8px}
@media(max-width:480px){.crmx .crm-dinero-grid{grid-template-columns:1fr 1fr}}

/* Qué compra */
.crmx .crm-compras-resumen{font-size:var(--fs-xl);font-weight:700}
.crmx .crm-compras-sub{font-size:var(--fs-sm);color:var(--text2);margin:2px 0 10px}
.crmx .crm-arts{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.crmx .crm-art-fila{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);
  padding:5px 0;border-top:1px solid var(--border)}
.crmx .crm-art-fila:first-child{border-top:none}
.crmx .crm-art-cifras{color:var(--text2);white-space:nowrap}
/* El gráfico de meses: barras + un eje con los mismos anchos para que cada etiqueta caiga bajo
   su barra. La línea de abajo es el suelo del gráfico — sin ella las barras cortas flotaban. */
.crmx .crm-graf{margin:10px 0}
.crmx .crm-graf-cab{font-size:var(--fs-xs);color:var(--text2);margin-bottom:6px}
.crmx .crm-graf-cab b{color:var(--text);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.crmx .crm-barras{display:flex;align-items:flex-end;gap:2px;height:80px;margin:0;
  border-bottom:1px solid var(--border2)}
.crmx .crm-barra{flex:1;min-width:2px;background:var(--c-curso-fg);border-radius:2px 2px 0 0;
  min-height:2px}
.crmx .crm-barra-max{background:var(--c-estr-fg)}
.crmx .crm-graf-eje{display:flex;gap:2px;margin-top:3px}
.crmx .crm-graf-eje-c{flex:1;min-width:2px;font-size:var(--fs-xs);color:var(--text2);
  white-space:nowrap;overflow:visible}
/* La casilla mide lo que su barra: la etiqueta se desborda a propósito. La última escrita tiene
   que desbordar hacia DENTRO o se saldría del gráfico — y para eso no vale text-align (cuando el
   texto no cabe, el navegador lo deja igualmente pegado a la izquierda): hace falta un flex. */
.crmx .crm-graf-eje-fin{display:flex;justify-content:flex-end}

/* Pedidos */
.crmx .crm-ped-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;
  border-top:1px solid var(--border);cursor:pointer;font-size:var(--fs-sm)}
.crmx .crm-ped-fila:first-child{border-top:none}
.crmx .crm-ped-fila:hover{background:var(--surface2)}

/* Notas y acciones */
.crmx .crm-notas-acciones-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}

/* Personas */
.crmx .crm-persona{padding:8px 0;border-top:1px solid var(--border)}
.crmx .crm-persona:first-child{border-top:none}
.crmx .crm-persona-nombre{font-size:var(--fs-md);font-weight:700}
.crmx .crm-persona-cargo{font-weight:500;color:var(--text2)}
.crmx .crm-persona-cont{display:flex;gap:14px;flex-wrap:wrap;margin-top:3px}
/* esconder a una persona (spec 2026-10-15-crm-esconder-contactos.md): botón solo-icono a la derecha del nombre, con el área de toque
   de --tap como la estrella o la X de la ficha; los márgenes negativos dejan que el área grande invada el relleno de la fila sin estirarla */
.crmx .crm-persona-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.crmx .crm-persona-esconder{background:none;border:none;color:var(--text2);cursor:pointer;flex-shrink:0;
  min-width:var(--tap);min-height:var(--tap);margin:-8px -8px -8px 0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-lg);border-radius:var(--rd-sm)}
.crmx .crm-persona-esconder:hover{background:var(--surface2);color:var(--text)}
.crmx .crm-persona-esconder:disabled{opacity:.5;cursor:default}

/* Direcciones */
.crmx .crm-direccion{padding:8px 0;border-top:1px solid var(--border)}
.crmx .crm-direccion:first-child{border-top:none}
.crmx .crm-direccion-nombre{font-size:var(--fs-md);font-weight:700}
.crmx .crm-direccion-meta{font-size:var(--fs-xs);color:var(--text2);margin-top:2px}

/* Precios */
.crmx .crm-precio-fila{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-top:1px solid var(--border);font-size:var(--fs-sm)}
.crmx .crm-precio-fila:first-child{border-top:none}
.crmx .crm-precio-art{flex:1;min-width:0}
.crmx .crm-precio-cuenta{white-space:nowrap}

/* Hoja «Precios» (spec 2026-09-13-crm-precios-tarifa.md): el artículo a la izquierda y PVP · Dto ·
   Total en tres columnas fijas que cuadran de fila a fila. En PC una sola cabecera; en móvil las
   cifras bajan debajo del artículo y cada una lleva su etiqueta. */
.crmx .crm-pvp-sub-tit{font-size:var(--fs-xs);color:var(--text2);margin:2px 0 6px}
.crmx .crm-pvp-cab,.crmx .crm-pvp-fila{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,112px);gap:4px 12px}
.crmx .crm-pvp-cab{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text2);padding:6px 0;border-bottom:1px solid var(--border2)}
.crmx .crm-pvp-cab span{text-align:right}
.crmx .crm-pvp-fila{padding:10px 0;border-bottom:1px solid var(--border);align-items:start}
.crmx .crm-pvp-cifras{display:contents}
.crmx .crm-pvp-desc{font-size:var(--fs-md);font-weight:600}
.crmx .crm-pvp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:3px;
  font-size:var(--fs-xs);color:var(--text2)}
.crmx .crm-pvp-c{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.crmx .crm-pvp-c .mono{font-size:var(--fs-md);white-space:nowrap}
.crmx .crm-pvp-total .mono{font-weight:700}
.crmx .crm-pvp-lbl{display:none}
.crmx .crm-pvp-sub{font-size:var(--fs-xs);color:var(--text2)}
.crmx .crm-pvp-c .crm-pvp-sub.mono{font-size:var(--fs-xs);white-space:nowrap}
@media(max-width:640px){
  .crmx .crm-pvp-cab{display:none}
  .crmx .crm-pvp-fila{grid-template-columns:repeat(3,minmax(0,1fr))}
  .crmx .crm-pvp-art{grid-column:1 / -1}
  .crmx .crm-pvp-c{align-items:flex-start;text-align:left}
  .crmx .crm-pvp-lbl{display:block;font-size:var(--fs-xs);color:var(--text2);text-transform:uppercase;letter-spacing:.04em}
}

/* Comentarios BC */
.crmx .crm-comentario{font-size:var(--fs-sm);padding:6px 0;border-top:1px solid var(--border)}
.crmx .crm-comentario:first-child{border-top:none}

/* ── Hojas (dlg-hoja + .crmx-hoja): nota rápida, nueva acción, ficha en móvil, historial ── */
.crmx-hoja{background:var(--bg);width:100%;max-height:92vh;overflow-y:auto;
  border-radius:16px 16px 0 0;padding:16px;display:flex;flex-direction:column;box-shadow:var(--sh-float)}
.crmx-hoja.chica{max-width:480px;margin:0 auto}
.crmx-hoja.ancha{max-width:920px;margin:0 auto}
.crmx .crm-hoja-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.crmx .crm-hoja-hdr b{font-size:var(--fs-lg)}
.crmx .crm-cerrar{background:none;border:none;color:var(--text2);font-size:var(--fs-xl);cursor:pointer;
  padding:6px;min-width:var(--tap);min-height:var(--tap);display:flex;align-items:center;justify-content:center}
.crmx .crm-atajos{display:flex;gap:8px;margin:-4px 0 12px}
.crmx .crm-buscar-fila{padding:10px 12px;border-radius:var(--rd-sm);cursor:pointer;font-size:var(--fs-sm);
  min-height:var(--tap);display:flex;align-items:center}
.crmx .crm-buscar-fila:hover{background:var(--surface2)}

/* en móvil, la ficha ocupa toda la pantalla (spec 5.0) */
@media(max-width:1023px){
  .crmx-hoja.completa{max-height:100vh;height:100vh;border-radius:0;max-width:none}
}
@media(min-width:1024px){
  .crmx-hoja.completa{max-width:640px;margin:0 auto;max-height:92vh;border-radius:16px 16px 0 0}
}

/* ── Historial de compras ── */
.crmx .crm-hist-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.crmx .crm-hist-filtros select{width:auto;min-width:130px}
.crmx .crm-hist-filtros input{flex:1;min-width:180px}
.crmx .crm-hist-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:12px}
.crmx .crm-hist-body{flex:1;overflow-y:auto}
.crmx .crm-hist-mes{margin-bottom:14px}
.crmx .crm-hist-mes-cab{font-size:var(--fs-sm);font-weight:700;color:var(--text2);
  padding:6px 0;border-bottom:1px solid var(--border2)}
.crmx .crm-factura{border-bottom:1px solid var(--border)}
.crmx .crm-factura-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;
  cursor:pointer;font-size:var(--fs-sm)}
.crmx .crm-factura-cab:hover{background:var(--surface2)}
.crmx .crm-factura-lineas{padding:0 0 10px 14px;display:flex;flex-direction:column;gap:5px}
/* el atributo hidden (_crmToggle) necesita este empate explícito: una regla de autor con
   display:flex pisa siempre al [hidden] de la hoja del navegador, tengan o no la misma
   especificidad — sin esto las líneas de la factura saldrían SIEMPRE desplegadas. */
.crmx .crm-factura-lineas[hidden]{display:none}
.crmx .crm-linea{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:8px;font-size:var(--fs-xs);
  color:var(--text2)}
.crmx .crm-tabla{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.crmx .crm-tabla th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--text2);padding:8px 10px;border-bottom:1px solid var(--border2);white-space:nowrap}
.crmx .crm-tabla td{padding:8px 10px;border-bottom:1px solid var(--border)}
/* un importe nunca se parte en dos líneas («13,00» arriba y «€» abajo en el móvil): la tabla ya
   desplaza en horizontal dentro de .crm-tabla-scroll (revisión F8, 13-sep-2026) */
.crmx .crm-tabla td.mono{white-space:nowrap}
@media(max-width:640px){
  .crmx .crm-linea{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F2 «Visitas por voz» (11-sep-2026, spec 2026-09-11-crm-f2-voz.md) — mismas reglas: todo
   var(--…) de app.css, nada a mano, un solo .b-cta por pantalla.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* «Hoy»: hueco del chip «N por enviar» junto al botón principal */
.crmx .crm-hoy-hdr-acciones{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crmx .crm-chip-pend{border:1px solid var(--c-esp-fg);background:var(--c-esp-bg);color:var(--c-esp-fg);
  border-radius:var(--rd-pill);padding:7px 13px;font-size:var(--fs-xs);font-weight:700;cursor:pointer;
  font-family:inherit;min-height:var(--tap)}

/* bloque «Visitas por confirmar» (barra ámbar, roja si alguna está en error) */
.crmx .crm-visitas-pend{margin-bottom:14px}
.crmx .crm-visita-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;
  border-top:1px solid var(--border);cursor:pointer}
.crmx .crm-visita-fila:first-of-type{border-top:none}
.crmx .crm-visita-fila:hover{background:var(--surface2)}
.crmx .crm-visita-txt{flex:1;min-width:160px;font-size:var(--fs-sm)}

/* línea de tiempo de la ficha: nota/visita/llamada pendiente (toque en vez de Más ▾) */
.crmx .crm-nota-pendiente{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.crmx .crm-nota-pendiente:hover{background:var(--surface2)}

/* cabecera de la ficha: hueco del chip + «Más ▾» (Registrar llamada) + cerrar (hoja móvil) */
.crmx .crm-ficha-cab-btns{display:flex;align-items:center;gap:8px}

/* reproductor flotante de «Escuchar» desde la línea de tiempo */
.crmx .crm-audio-flotante{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:11030;max-width:92vw}

/* «Ver transcripción» / «Ver lo que has dicho» */
.crmx .crm-transcripcion{font-size:var(--fs-sm);line-height:1.5;white-space:pre-wrap;color:var(--text2)}
.crmx details summary{cursor:pointer;font-weight:700;font-size:var(--fs-sm);color:var(--text2);
  padding:8px 0;min-height:var(--tap);display:flex;align-items:center}

/* ── Grabar (5.2): hoja a pantalla completa, un estado a la vez ── */
.crmx .crm-grabar-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;flex:1;padding:24px 16px;text-align:center;min-height:60vh}
.crmx .crm-grabar-cli{font-size:var(--fs-lg);font-weight:700}
.crmx .crm-grabar-disco{width:140px;height:140px;border-radius:50%;background:var(--c-curso-bg);
  border:4px solid var(--c-curso-fg);color:var(--c-curso-fg);display:flex;align-items:center;
  justify-content:center;font-size:var(--fs-3xl);animation:crmGrabarPulso 1.4s ease-in-out infinite}
.crmx .crm-grabar-disco.pausado{animation:none;opacity:.55}
@keyframes crmGrabarPulso{0%,100%{opacity:1}50%{opacity:.55}}
.crmx .crm-grabar-estado{font-size:var(--fs-sm);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-curso-fg)}
.crmx .crm-grabar-tiempo{font-size:var(--fs-3xl);font-weight:700}
.crmx .crm-grabar-botones{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px}
.crmx .crm-grabar-aviso{font-size:var(--fs-xs);color:var(--c-esp-fg);background:var(--c-esp-bg);
  border-radius:var(--rd-sm);padding:8px 12px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F28 Parte C «Repaso de la IA» (25-sep-2026, spec 2026-09-25-crm-f28-…) — bloque «Puede que
   te hayas dejado esto», arriba del todo de la hoja de confirmar. Acento --c-esp-* (spec Front),
   mismo criterio que .crm-inf-rev-gerencia un poco más abajo (bloque destacado = fondo suave +
   borde de acento a la izquierda, no un simple .crm-bloque más).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-repaso{background:var(--c-esp-bg);border:none;border-left:4px solid var(--c-esp-fg);
  border-radius:0 var(--rd-sm) var(--rd-sm) 0}
.crmx .crm-repaso .crm-bloque-tit{color:var(--c-esp-fg)}
.crmx .crm-repaso-fila{padding:8px 0;border-top:1px solid var(--border)}
.crmx .crm-repaso-fila:first-of-type{border-top:none}
.crmx .crm-repaso-txt{font-size:var(--fs-md);line-height:1.4}
.crmx .crm-repaso-cita{font-size:var(--fs-sm);color:var(--text2);font-style:italic;margin-top:2px}
.crmx .crm-repaso-btns{display:flex;gap:8px;margin-top:6px}

/* ── Confirmar (5.3): filas de lista editable (acuerdos/incidencias/pedidos) ── */
.crmx .crm-conf-fila{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.crmx .crm-conf-fila input{flex:1}
.crmx .crm-conf-ped-fila{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:8px;
  align-items:center;margin-bottom:8px}
.crmx .crm-conf-vacio{font-size:var(--fs-sm);color:var(--text3);padding:6px 0}
.crmx .crm-conf-audio{width:100%;margin-top:10px}
@media(max-width:640px){
  .crmx .crm-conf-ped-fila{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
}
/* F26 (24-sep-2026, spec 2026-09-24-crm-f26-…, anexo 2): «Próxima acción» pasa a lista — cada fila
   es un bloque de campos completo (qué, prioridad, Para, cuándo, hora), no una línea suelta como
   acuerdos/incidencias — una línea fina arriba la separa de la anterior, sin ella en la primera
   (mismo patrón que .crm-vis-fila de «Quién ve a quién»). */
.crmx .crm-conf-fila-accion{padding-top:12px;margin-top:12px;border-top:1px solid var(--border)}
.crmx .crm-conf-fila-accion:first-child{padding-top:0;margin-top:0;border-top:none}

/* ── Ajustes CRM (5.5) ── */
.crmx .crm-ajustes-detalle{font-size:var(--fs-xs);color:var(--text2);margin-top:3px}
/* ver-otros (14-sep-2026): una fila por usuario en «Quién ve a quién», mismo patrón que .crm-nota
   (borde arriba, sin el primero) — el segmentado y las casillas de personas van debajo del nombre */
.crmx .crm-vis-fila{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--border)}
.crmx .crm-vis-fila:first-child{border-top:none}

/* ── Cola sin cobertura (5.4): lista de pendientes ── */
.crmx .crm-pend-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--border)}
.crmx .crm-pend-fila:first-child{border-top:none}
.crmx .crm-pend-txt{flex:1;min-width:160px;font-size:var(--fs-sm)}
.crmx .crm-pend-error{font-size:var(--fs-xs);color:var(--c-prob-fg);margin-top:2px}
.crmx .crm-pend-btns{display:flex;gap:8px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F3 «Fotos de los clientes en SharePoint» (11-sep-2026, spec 2026-09-11-crm-f3-fotos.md) —
   mismas reglas de siempre: todo var(--…), nada a mano. Ninguna de estas pantallas tiene un
   .b-cta propio: son galería/visor, como el historial de compras — se mira y se toca, no hay
   «la» acción que tocar ahora.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* rejilla de miniaturas (spec 2026-09-22-crm-galeria-fotos.md §2): auto-fill en vez de columnas
   fijas — antes 3/6 encogían la foto según el ancho; ahora cabe la que quepa, mínimo 150px, y en
   una pantalla ancha se ven más grandes en vez de más apretadas. */
.crmx .crm-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
/* min-width:0 es el fix de siempre para esto: sin él, un hijo con white-space:nowrap (el pie de
   foto) marca el ancho MÍNIMO de la celda con el de su texto entero, y la rejilla deja de ser
   pareja (una miniatura de pie corto sale enana, una de pie largo se come media fila). */
.crmx .crm-foto-mini{display:flex;flex-direction:column;gap:4px;background:none;border:none;
  padding:0;cursor:pointer;font-family:inherit;text-align:left;min-width:0}
.crmx .crm-foto-mini img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--rd-sm);
  background:var(--surface2);display:block}
.crmx .crm-foto-mini.crm-foto-mini-error img{opacity:.4}
.crmx .crm-foto-mini-pie{font-size:var(--fs-xs);color:var(--text2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* grupo de un día en la rejilla de la ficha (spec §2 «se lee la historia del cliente de arriba
   abajo»): cabecera con el día y cuántas trae, enlace a la visita si todas son de la misma. */
.crmx .crm-foto-dia{margin-bottom:14px}
.crmx .crm-foto-dia-cab{font-size:var(--fs-sm);font-weight:700;color:var(--text2);
  padding:6px 0;border-bottom:1px solid var(--border2);margin-bottom:8px}
.crmx .crm-foto-dia-cab button{background:none;border:none;padding:0;font:inherit;
  font-weight:700;color:var(--c-curso-fg);cursor:pointer}

/* chip clicable de la línea de tiempo («N fotos», spec §4) — mismos colores de siempre, solo
   necesita decir que se puede tocar */
.crmx .crm-chip-clic{cursor:pointer}

/* ── «Ver foto»: visor a pantalla completa (spec 2026-09-22-crm-galeria-fotos.md) ──────────────
   Fondo SIEMPRE oscuro, da igual el tema de la app — un visor de fotos manda la imagen, no la
   interfaz de alrededor (mismo espíritu que un carrusel de cualquier galería). Por eso aquí NO
   se usan --surface/--text (que cambian de claro a oscuro con el tema): es la MISMA excepción de
   siempre para el fondo de una capa que tapa TODO (.dlg-hoja/.overlay ya usan un rgba(0,0,0,…)
   escrito a mano en vez de un token) y para el «color:#fff» de un icono sobre ese fondo (mismo
   3 dígitos que .b-cta, ver arriba del fichero). El único trozo que SÍ vuelve al tema normal es
   la tarjeta del comentario, abajo del todo: esa es una tarjeta clara flotando sobre el fondo
   oscuro, no parte del fondo. */
/* SIN el prefijo ".crmx " de siempre a propósito: .crmx y .crm-fotover-ov van en el MISMO
   elemento (el overlay nace ya con las dos clases puestas, no hay un .crmx por fuera que lo
   envuelva como en .dlg-hoja/.crmx-hoja) — un combinador descendiente aquí no casaría nunca.
   ".crm-fotover-ov" es lo bastante específico como para no necesitar el paraguas de .crmx. */
/* fondo OPACO, no un 97 % (medido en el navegador el 22-sep: con alfa se leía la ficha del CRM
   por detrás de la foto — justo el ruido que un visor tiene que quitar de en medio). */
.crm-fotover-ov{position:fixed;inset:0;z-index:11023;background:rgb(8,10,14);
  display:flex;flex-direction:column;color:#fff}
/* #crm-fotover-chrome es el trozo que se REPINTA entero en cada foto (cabecera+escenario+info,
   ver _crmFotoVerPintarChrome en crm.js) — necesita ser columna flex TAMBIÉN, si no
   .crm-fotover-stage (dentro) no tiene de qué «flex:1» tirar y la imagen crece a su tamaño
   real en vez de encajar en el alto disponible. */
.crmx #crm-fotover-chrome{display:flex;flex-direction:column;flex:1;min-height:0}
.crmx .crm-fotover-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;flex-shrink:0}
.crmx .crm-fotover-cab-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.crmx .crm-fotover-cab-info b{font-size:var(--fs-md)}
.crmx .crm-fotover-autor{font-size:var(--fs-xs);color:rgba(255,255,255,.65);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.crm-fotover-ov .crm-mas{border-color:rgba(255,255,255,.3);color:#fff}
.crm-fotover-ov .crm-cerrar{color:#fff}
.crm-fotover-ov .crm-mas:hover,.crm-fotover-ov .crm-cerrar:hover{background:rgba(255,255,255,.12)}

.crmx .crm-fotover-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;
  justify-content:center;overflow:hidden;padding:0 8px}
.crmx .crm-fotover-imgwrap{position:relative;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.crmx .crm-fotover-img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;
  touch-action:none;user-select:none;border-radius:var(--rd-sm)}
.crmx .crm-fotover-img.ampliada{max-width:none;max-height:none;width:auto;height:auto;cursor:grab}
.crmx .crm-fotover-cargando{position:absolute;color:rgba(255,255,255,.7);font-size:var(--fs-2xl)}
.crmx .crm-fotover-cargando[hidden]{display:none}
.crmx .crm-fotover-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  width:var(--tap);height:var(--tap);border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xl)}
.crmx .crm-fotover-flecha:hover{background:rgba(255,255,255,.22)}
.crmx .crm-fotover-izq{left:10px}
.crmx .crm-fotover-der{right:10px}

/* tira de miniaturas: reutiliza .crm-foto-mini (mismo botón) pero en fila y más chica, no en
   rejilla — la activa se marca con el borde blanco, las demás se atenúan (spec «la actual
   marcada») */
.crmx .crm-fotover-tiras{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;flex-shrink:0}
.crmx .crm-fotover-tira-mini{flex:0 0 56px;width:56px}
.crmx .crm-fotover-tira-mini img{width:56px;height:56px;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--rd-sm);opacity:.55;border:2px solid transparent;box-sizing:border-box}
.crmx .crm-fotover-tira-activa img{opacity:1;border-color:#fff}

/* comentario y acciones: tarjeta clara flotando sobre el fondo oscuro del visor. En reposo es una
   BARRA FINA (el comentario leído + un botón), y solo crece cuando se toca «Editar» — medido el
   22-sep: con el textarea siempre abierto se llevaba 214 px de los 950 de la pantalla del dueño,
   y lo que él pidió fue ver las fotos MÁS GRANDES. */
.crmx .crm-fotover-info{background:var(--surface);color:var(--text);
  border-radius:var(--rd) var(--rd) 0 0;padding:10px 14px;flex-shrink:0;max-height:38vh;overflow-y:auto}
.crmx .crm-fotover-info-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crmx .crm-fotover-info .crm-campo{margin-bottom:8px}
/* el comentario leído: ocupa el sitio que sobra en la barra, pero no empuja a los botones fuera */
.crmx .crm-fotover-com{flex:1;min-width:140px;font-size:var(--fs-sm);color:var(--text)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F4 «Seguimiento y radar» (12-sep-2026, spec 2026-09-11-crm-f4-radar.md) — mismas reglas de
   siempre: todo var(--…) de app.css, nada a mano, un solo .b-cta por pantalla.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── «Hoy»: objetivo del mes, Recordatorios por Telegram (F13: «Clientes que tocan» ya no está en Hoy) ── */
.crmx .crm-objetivo-mes{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);
  padding:12px 14px;margin-bottom:14px}
.crmx .crm-objetivo-txt{font-size:var(--fs-sm);font-weight:700;margin-bottom:6px}
.crmx .crm-objetivo-barra{height:8px;border-radius:4px;background:var(--surface2);overflow:hidden}
.crmx .crm-objetivo-barra-fill{height:100%;background:var(--c-curso-fg);border-radius:4px}
.crmx .crm-bloque-cab-fila{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.crmx .crm-bloque-cab-fila .crm-bloque-tit{margin-bottom:0}
.crmx .crm-vincular-codigo{font-size:var(--fs-3xl);font-weight:800;letter-spacing:.08em;text-align:center;
  font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums;margin:14px 0}

/* ── «Radar»: cuatro tarjetas grandes con recuento + lista debajo ── */
.crmx .crm-radar-filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.crmx .crm-radar-filtros select{width:auto;min-width:170px}
.crmx .crm-radar-tarjetas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.crmx .crm-radar-tarjeta{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--border2);
  border-radius:var(--rd);padding:14px 16px;text-align:left;cursor:pointer;font-family:inherit;box-shadow:var(--sh)}
.crmx .crm-radar-tarjeta:hover{box-shadow:var(--shadow)}
.crmx .crm-radar-tarjeta.activa{outline:2px solid var(--c-estr-fg);outline-offset:-1px}
.crmx .crm-radar-prob{border-left-color:var(--c-prob-fg)}
.crmx .crm-radar-esp{border-left-color:var(--c-esp-fg)}
.crmx .crm-radar-neu{border-left-color:var(--border2)}
.crmx .crm-radar-n{font-size:var(--fs-2xl);font-weight:700;font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.crmx .crm-radar-tit{font-size:var(--fs-sm);color:var(--text2);margin-top:2px}
@media(min-width:640px){ .crmx .crm-radar-tarjetas{grid-template-columns:repeat(4,1fr)} }

/* ── «Oportunidades»: tablón — apiladas y plegables en móvil, en fila desde 1024px ── */
.crmx .crm-oport-tablon{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.crmx .crm-oport-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd)}
.crmx .crm-oport-col-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:12px 14px;cursor:pointer;font-weight:700;font-size:var(--fs-sm);min-height:var(--tap)}
.crmx .crm-oport-col-body{display:flex;flex-direction:column;gap:10px;padding:0 14px 14px}
.crmx .crm-oport-col.plegada .crm-oport-col-body{display:none}
.crmx .crm-oport-tarjeta{background:var(--surface2);border:1px solid var(--border);border-radius:var(--rd-sm);
  padding:10px 12px}
.crmx .crm-oport-tit{font-size:var(--fs-md);font-weight:700}
.crmx .crm-oport-quien{font-size:var(--fs-sm);color:var(--text2);margin-top:2px}
.crmx .crm-oport-importe{font-size:var(--fs-md);font-weight:700;margin-top:4px;font-family:'DM Mono',monospace;
  font-variant-numeric:tabular-nums}
.crmx .crm-oport-resp{font-size:var(--fs-xs);color:var(--text2);margin-top:2px}
.crmx .crm-oport-nota{font-size:var(--fs-xs);color:var(--text2);margin-top:4px;white-space:pre-wrap}
.crmx .crm-oport-btns{display:flex;gap:8px;align-items:center;margin-top:8px}
@media(min-width:1024px){
  .crmx .crm-oport-tablon{flex-direction:row;align-items:flex-start}
  .crmx .crm-oport-col{flex:1;min-width:0}
  .crmx .crm-oport-col-cab{cursor:default}
  /* en PC las columnas no se pliegan nunca, aunque la persona haya tocado la cabecera en móvil
     antes de girar la pantalla o cambiar a una ventana ancha */
  .crmx .crm-oport-col.plegada .crm-oport-col-body{display:flex}
}

/* ── «Informe»: selector de semana + tabla + objetivos editables ── */
.crmx .crm-semana-selector{display:flex;align-items:center;gap:10px;margin-bottom:14px}
/* F30 (28-sep-2026, spec 2026-09-28-crm-f30-…, decisión 1): el <select> de las últimas 12 semanas
   sustituye al <div> de título fijo — mismo tamaño/peso que el título de siempre, sin caja de
   campo de formulario (sin borde ni fondo propios; la flecha nativa del navegador ya dice que es
   un desplegable, así que no hace falta appearance:none ni una flecha a mano). */
.crmx .crm-semana-selector .crm-semana-select{font-size:var(--fs-md);font-weight:700;min-width:170px;
  max-width:100%;text-align:center;text-align-last:center;background:none;border:none;color:var(--text);
  cursor:pointer;font-family:inherit;padding:4px 6px;border-radius:var(--rd-sm)}
.crmx .crm-semana-selector .crm-semana-select:hover{background:var(--surface2)}
.crmx .crm-semana-selector .crm-semana-select:focus-visible{outline:2px solid var(--c-estr-fg);outline-offset:2px}
.crmx .crm-semana-nav{background:var(--surface);border:1px solid var(--border2);border-radius:var(--rd-sm);
  min-width:var(--tap);min-height:var(--tap);cursor:pointer;color:var(--text);display:flex;align-items:center;
  justify-content:center;font-family:inherit}
.crmx .crm-tabla-scroll{overflow-x:auto;margin-bottom:12px}
/* Los objetivos iban en una tabla de doce meses: 2.300 px de ancho, o sea teclear noviembre a
   ciegas tras arrastrar media pantalla. Ahora cada comercial es su bloque y los meses se
   reparten en una rejilla que se pliega sola, con el mes escrito en cada casilla (antes vivía
   solo en la cabecera de la tabla y se perdía al desplazarse). */
.crmx .crm-obj-lista{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.crmx .crm-obj-com{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);padding:12px 14px}
.crmx .crm-obj-com-tit{font-size:var(--fs-md);font-weight:700;margin-bottom:10px}
.crmx .crm-obj-meses{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.crmx .crm-obj-cell{background:var(--surface2);border:1px solid var(--border);border-radius:var(--rd-sm);padding:7px 8px}
.crmx .crm-obj-mes{font-size:var(--fs-xs);font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.crmx .crm-obj-cell input{width:100%;display:block;margin:0 0 4px;padding:6px 7px;font-size:var(--fs-sm)}
.crmx .crm-obj-cell input:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F5a «Mapa y contactos» (12-sep-2026, spec 2026-09-12-crm-f5-mapa-contactos.md) — mismas
   reglas de siempre: todo var(--…) de app.css, nada a mano. «Contactos» reutiliza tal cual las
   clases de «Clientes» (crm-maestro/crm-lista-col/crm-cli/…), de ahí que este bloque solo añada
   lo que hace falta para el nombre clicable de una persona y para el «Mapa».
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Ficha del cliente › Personas (F5a): el nombre abre su ficha de contacto cuando trae system_id */
.crmx .crm-link-nombre{background:none;border:none;padding:0;margin:0;font:inherit;font-weight:700;
  color:var(--c-curso-fg);cursor:pointer}
.crmx .crm-link-nombre:hover{text-decoration:underline}

/* ── «Mapa»: barra de filtros arriba, lienzo de Leaflet + lista lateral en PC ── */
.crmx .crm-mapa-pantalla{display:flex;flex-direction:column;gap:10px;height:100%}
.crmx .crm-mapa-barra{display:flex;flex-direction:column;gap:10px}
.crmx .crm-mapa-filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crmx .crm-mapa-check{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);
  color:var(--text2);cursor:pointer;min-height:var(--tap)}
.crmx .crm-mapa-check input{width:18px;height:18px;flex:none}
/* F10 «filtros del mapa» (13-sep-2026): segunda fila con selects y chips (los .crm-chip-f de
   Clientes), contador a la derecha, «Ver quiénes» como enlace-botón y la lista de sin ubicar */
.crmx .crm-mapa-filtros select{width:auto;min-width:150px;min-height:var(--tap);font-size:var(--fs-xs)}
.crmx .crm-mapa-cuenta{font-size:var(--fs-xs);color:var(--text2);margin-left:auto;white-space:nowrap}
.crmx button.crm-link{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-weight:700}
.crmx #crm-mapa-sinubicar{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.crmx #crm-mapa-sinubicar[hidden]{display:none}
.crmx .crm-mapa-cuerpo{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
/* F28 Parte B: el envoltorio del lienzo — position:relative para que el panel de la ruta pueda
   flotar ENCIMA de él en el móvil (position:absolute, ver más abajo), sin salirse de su hueco. */
.crmx .crm-mapa-lienzo-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
/* el lienzo nace con el fondo de una superficie normal (--surface2): así, mientras Leaflet
   todavía no ha pintado nada (o si falla la carga y se sustituye por el empty-state), nunca se ve
   un hueco gris ajeno al sistema de diseño */
.crmx .crm-mapa-lienzo{min-height:60vh;flex:1;border-radius:var(--rd);border:1px solid var(--border);
  background:var(--surface2)}
.crmx .crm-mapa-lienzo .empty-state{height:100%}
.crmx .crm-mapa-lista-col{display:none}
.crmx .crm-mapa-lista-tit{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text2);margin-bottom:8px}
/* F28 Parte B «Ruta del día»: en el móvil, un panel que ocupa la mitad de abajo del lienzo (el
   mapa de arriba sigue viéndose y moviéndose, spec), con una «asa» que lo pliega a una franja de
   una línea. Oculto (con [hidden]) fuera del modo ruta: NO se destruye entrar y salir, se vacía.
   z-index alto A PROPÓSITO (probado en el navegador, 25-sep-2026): Leaflet mete sus propios panes
   (marcadores, popups, controles) hasta z-index 1000 dentro del lienzo, y al ser hermano directo
   del panel en el mismo contexto de apilamiento, un z-index bajo aquí lo dejaba TAPADO por el mapa. */
.crmx .crm-mapa-ruta-panel{display:none}
.crmx .crm-mapa-ruta-panel:not([hidden]){display:flex;flex-direction:column;position:absolute;
  left:0;right:0;bottom:0;height:50%;background:var(--surface);border-top:1px solid var(--border);
  border-radius:var(--rd) var(--rd) 0 0;box-shadow:var(--sh-float);z-index:1001;overflow:hidden}
.crmx .crm-mapa-ruta-panel.plegado{height:auto}
.crmx .crm-mapa-ruta-panel.plegado .crm-mapa-ruta-cuerpo{display:none}
.crmx .crm-mapa-ruta-asa{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-height:var(--tap);padding:0 14px;background:none;border:none;
  border-bottom:1px solid var(--border);font-size:var(--fs-sm);font-weight:700;color:var(--text);
  cursor:pointer;flex:none;text-align:left}
.crmx .crm-mapa-ruta-panel.plegado .crm-mapa-ruta-asa{border-bottom:none}
.crmx .crm-mapa-ruta-cuerpo{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;
  display:flex;flex-direction:column;gap:10px}
.crmx .crm-mapa-ruta-controles{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crmx .crm-mapa-ruta-controles input[type=date]{min-height:var(--tap);border:1px solid var(--border2);
  border-radius:var(--rd-sm);background:var(--surface);color:var(--text);font-family:inherit;
  font-size:var(--fs-xs);padding:0 8px}
.crmx .crm-mapa-ruta-controles select{min-height:var(--tap);font-size:var(--fs-xs)}
.crmx .crm-mapa-ruta-lista{display:flex;flex-direction:column;gap:8px}
.crmx .crm-mapa-ruta-parada{display:flex;gap:10px;align-items:flex-start;padding:10px;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--rd-sm)}
.crmx .crm-mapa-ruta-parada.hecha{opacity:.6}
.crmx .crm-mapa-ruta-parada.hecha .crm-mapa-ruta-nombre{text-decoration:line-through}
.crmx .crm-mapa-ruta-num{flex:none;width:28px;height:28px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--c-estr-bg);color:var(--c-estr-fg);
  font-weight:800;font-size:var(--fs-sm)}
.crmx .crm-mapa-ruta-parada.hecha .crm-mapa-ruta-num{background:var(--surface3);color:var(--text2)}
.crmx .crm-mapa-ruta-datos{flex:1;min-width:0}
.crmx .crm-mapa-ruta-nombre{font-size:var(--fs-md);font-weight:700}
.crmx .crm-mapa-ruta-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:var(--fs-xs);color:var(--text2);margin-top:2px}
.crmx .crm-mapa-ruta-btns{display:flex;flex-direction:column;gap:6px;flex:none}
.crmx .crm-mapa-ruta-sinubicar{display:flex;flex-direction:column;gap:8px}
.crmx .crm-mapa-ruta-tramos{display:flex;flex-direction:column;gap:6px}
.crmx .crm-mapa-popup-ruta{margin-top:4px}
/* marcadores numerados del modo ruta — L.divIcon, colores SOLO por token (spec): el índigo de
   estructura para las pendientes, gris apagado para las hechas, verde «en curso» para la salida.
   color:#fff es la MISMA excepción que .b-cta (texto claro sobre un fondo de acento, ver arriba). */
.crmx .crm-ruta-marker-wrap{background:transparent;border:none}
.crmx .crm-ruta-marker{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:'DM Mono',monospace;font-weight:800;font-size:var(--fs-sm);
  color:#fff;background:var(--c-estr-fg);border:2px solid var(--surface);box-shadow:var(--sh-float)}
.crmx .crm-ruta-marker.hecha{background:var(--text3)}
.crmx .crm-ruta-marker-salida{width:30px;height:30px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:#fff;background:var(--c-curso-fg);
  border:2px solid var(--surface);box-shadow:var(--sh-float);font-size:var(--fs-md)}
@media(min-width:1024px){
  /* flex:none (no solo flex-direction/height): el flex:1 de más arriba deja flex-basis:0% puesto
     — sin resetearlo aquí, un height explícito no pinta nada (flex-basis manda sobre height) y el
     cuerpo se queda con la altura mínima de su contenido en vez de llenar la pantalla */
  .crmx .crm-mapa-cuerpo{flex-direction:row;flex:none;height:calc(100vh - 230px)}
  .crmx .crm-mapa-lienzo-wrap{flex-direction:row;gap:10px}
  .crmx .crm-mapa-lienzo{height:100%;min-height:0;flex:1}
  .crmx .crm-mapa-lista-col{display:block;width:320px;flex:none;overflow-y:auto;height:100%;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);padding:12px}
  /* en PC el panel de la ruta ocupa la columna de la derecha (spec: «donde hoy está la lista de lo
     visible») — sustituye a esa lista mientras el modo ruta está abierto, en vez de flotar. */
  .crmx .crm-mapa-ruta-panel:not([hidden]){position:static;width:320px;flex:none;height:100%;
    box-shadow:none;border-radius:var(--rd);border:1px solid var(--border)}
  .crmx .crm-mapa-cuerpo.crm-modo-ruta .crm-mapa-lista-col{display:none}
}

/* mini-ficha del popup de Leaflet — Leaflet ya trae su propio marco
   (.leaflet-popup-content-wrapper, de su CSS cargado bajo demanda); aquí solo se maqueta lo que
   hay DENTRO, con los mismos tokens de siempre */
.crmx .crm-mapa-popup{display:flex;flex-direction:column;gap:6px;min-width:180px}
.crmx .crm-mapa-popup-nombre{font-size:var(--fs-md);font-weight:700}
.crmx .crm-mapa-popup-pob{font-size:var(--fs-sm);color:var(--text2)}
.crmx .crm-mapa-popup-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F6 «Correo» (12-sep-2026, spec 2026-09-12-crm-f6-correo.md) — mismas reglas de siempre:
   todo var(--…) de app.css, nada a mano. La ficha y la hoja «Ver todos» comparten la misma fila
   (.crm-correo-fila): se mira y se toca para leerlo (F19, ver más abajo), no hay «la» acción de
   la pantalla — todas las filas se comportan igual, ya no hay «sin enlace».
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-correo-fila{padding:9px 0;border-top:1px solid var(--border);cursor:pointer}
.crmx .crm-correo-fila:first-of-type{border-top:none}
.crmx .crm-correo-fila:hover{background:var(--surface2)}
.crmx .crm-correo-cab{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text2)}
.crmx .crm-correo-de{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crmx .crm-correo-asunto{font-size:var(--fs-sm);font-weight:700;margin-top:2px}
.crmx .crm-correo-prev{font-size:var(--fs-xs);color:var(--text2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin-top:1px}

/* «Sin correos cruzados» + enlace gris a Ajustes CRM (solo admin, spec Front simplificado):
   mismo tono que .crm-pie, pero clicable — de ahí que nazca como <button>, sin el aspecto de botón */
.crmx .crm-pie-link{display:block;background:none;border:none;padding:0;margin-top:8px;
  color:var(--text3);font-size:var(--fs-xs);font-family:inherit;cursor:pointer;text-decoration:underline}
.crmx .crm-pie-link:hover{color:var(--text2)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F7 «Ventas» (13-sep-2026, spec 2026-09-13-crm-f7-ventas.md) — mismas reglas de siempre:
   todo var(--…) de app.css, nada a mano.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* verde si sube, ámbar si baja (spec Front): la ÚNICA cifra de todo el CRM con color según
   tendencia — el resto de _crmPctCambio() se queda en texto plano, la flecha ya lo dice */
.crmx .crm-tendencia-sube{color:var(--c-ok-fg)}
.crmx .crm-tendencia-baja{color:var(--c-esp-fg)}

/* barras de 36 meses (hoja «Ventas del cliente»): los 12 más antiguos en gris — son contexto
   extra, el tramo de 24 meses de siempre ya se ve en el bloque «Ventas» de la ficha */
.crmx .crm-barra-ant{background:var(--border2)}

/* cuatro tarjetas de totales (vista «Ventas»): 2 columnas en móvil, 4 desde 640px — cada tarjeta
   es un .crm-bloque normal, aquí solo se maqueta la rejilla */
.crmx .crm-ventas-totales{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
@media(min-width:640px){ .crmx .crm-ventas-totales{grid-template-columns:repeat(4,1fr)} }

/* Suben/Bajan y Nuevos/Perdidos: dos columnas desde 768px, una en móvil */
.crmx .crm-ventas-cols{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
@media(min-width:768px){ .crmx .crm-ventas-cols{grid-template-columns:1fr 1fr} }

/* cabecera de columna ordenable (tabla «Artículos» de la hoja «Ventas del cliente») */
.crmx .crm-th-ord{cursor:pointer;user-select:none}

/* «última vez hace N días» + chip ámbar (bloque «Ventas» de la ficha): más largo que el kg/precio
   de siempre (.crm-art-cifras, que es white-space:nowrap a propósito para esa cifra corta) — con
   nowrap este texto se salía de pantalla en móvil (caso real: «Cemento blanco … hace 5 meses») */
.crmx .crm-art-cifras-larga{color:var(--text2);text-align:right;white-space:normal}

/* fila de la tabla Ranking: se toca para abrir la ficha, como el resto de tarjetas de cliente */
.crmx tr.crm-fila-clic{cursor:pointer}
.crmx tr.crm-fila-clic:hover{background:var(--surface2)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F8 «Pedidos, albaranes, precios y descuentos» (13-sep-2026, spec
   2026-09-13-crm-f8-pedidos-precios.md) — mismas reglas de siempre: todo var(--…) de app.css,
   nada a mano. Las cabeceras plegables (pedidos abiertos/albaranes) reutilizan tal cual
   .crm-factura/.crm-factura-cab/.crm-factura-lineas del historial (F1): misma idea exacta (fila
   con mono + chips, tocar para desplegar sus líneas) — solo hacía falta una fila de línea con
   menos columnas que una factura (sin precio/importe).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-pedalb-linea{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;
  font-size:var(--fs-xs);color:var(--text2);padding:2px 0}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F9 «Rápido y fácil» (13-sep-2026, spec 2026-09-13-crm-f9-rapido-facil.md) — mismas reglas
   de siempre: todo var(--…) de app.css, nada a mano.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Atajos (Recientes/Favoritos): etiqueta pequeña + fila de chips clicables (.crm-chip-clic de
   siempre, F3) — cada fila con su propio margen inferior para que funcione igual suelta (Hoy,
   solo Favoritos) que dentro del bloque de Clientes (las dos filas). */
.crmx .crm-atajos-bloque{display:flex;flex-direction:column}
.crmx .crm-atajos-fila{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.crmx .crm-atajos-lbl{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text2);margin-right:2px}
/* En Clientes, UNA línea por fila que se desliza de lado (spec 2026-09-30-crm-lista-mas-sitio.md):
   partidas en varias líneas se comían la columna y la lista se quedaba en nada. La etiqueta no se
   desliza (siempre se sabe qué fila es) y lleva ancho fijo para que las dos filas arranquen
   igual; el nombre largo se corta con «…» (entero en el title del chip). En Hoy (solo Favoritos,
   sin .crm-atajos-bloque) todo sigue como estaba. Vacío (sin recientes ni favoritos) no ocupa
   ni el hueco entre piezas de la columna; hidden (buscando) igual. */
.crmx #crm-atajos-bloque:empty{display:none}
.crmx .crm-atajos-bloque .crm-atajos-fila{flex-wrap:nowrap;margin-bottom:6px}
.crmx .crm-atajos-bloque .crm-atajos-fila:last-child{margin-bottom:0}
.crmx .crm-atajos-bloque .crm-atajos-lbl{flex:none;min-width:84px}
.crmx .crm-atajos-chips{display:flex;gap:7px;overflow-x:auto;flex:1;min-width:0;
  scrollbar-width:thin;padding-bottom:4px}
.crmx .crm-atajos-chips .crm-chip{display:block;flex:none;max-width:220px;overflow:hidden;
  text-overflow:ellipsis}

/* estrella de favorito en la cabecera de la ficha: mismo tamaño de toque que crm-mas/crm-cerrar;
   el ámbar de «on» es el mismo de siempre para algo marcado/destacado (outline de un punto
   seleccionado en el Mapa, aviso de «warn») — no el índigo de --c-estr-*, que aquí significaría
   «el botón principal de la pantalla» y la estrella no lo es. */
.crmx .crm-estrella{background:none;border:none;color:var(--text2);cursor:pointer;padding:0 8px;
  min-width:var(--tap);min-height:var(--tap);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-lg)}
.crmx .crm-estrella:hover{background:var(--surface2);border-radius:var(--rd-sm)}
.crmx .crm-estrella.on{color:var(--amber)}

/* bloque «Resumen» de Claude: un .crm-bloque normal, solo se alinea el icono con el título */
.crmx .crm-resumen-ia .crm-bloque-tit{display:flex;align-items:center;gap:6px}

/* botón flotante «Nota» (móvil, <768px, spec): fijo abajo a la derecha en cualquier vista crm* —
   el "qué vista" lo decide _crmFabActualizar (atributo hidden), el "qué tamaño de pantalla" esta
   media query; hace falta el empate [hidden] de abajo por el MISMO motivo que .crm-factura-lineas
   más arriba en este fichero: una regla de autor con display gana siempre al hidden del navegador.
   z-index 9000, igual que el chip #chrome-exit de app.css: por encima de todo lo normal, por
   debajo de cualquier diálogo/hoja de verdad (esos viven en 11000+). */
.crmx.crm-fab{position:fixed;right:16px;bottom:16px;z-index:9000;display:none;align-items:center;
  gap:7px;min-height:var(--tap);padding:12px 18px;border-radius:var(--rd-pill);border:none;
  background:var(--c-estr-fg);color:#fff;font-family:'DM Sans',sans-serif;font-size:var(--fs-sm);
  font-weight:700;cursor:pointer;box-shadow:var(--sh-float)}
.crmx.crm-fab[hidden]{display:none}
@media(max-width:767px){
  .crmx.crm-fab:not([hidden]){display:flex}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F11 «Agenda: elegir el día en Hoy» (13-sep-2026, spec 2026-09-13-crm-f11-agenda.md) —
   mismas reglas de siempre: todo var(--…) de app.css, nada a mano.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* barra de día: ‹ fecha › + Hoy + Mes, en una fila que envuelve en pantallas estrechas */
.crmx .crm-agenda-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.crmx .crm-agenda-fecha{width:auto;flex:none;min-height:var(--tap)}

/* tira de la semana: 7 casillas — en móvil se desplaza en horizontal si no caben (spec), nunca
   desborda la pantalla (flex-shrink:0 en .crm-agenda-dia: si no caben las 7, se ve la barra de
   scroll en vez de encogerlas por debajo del tamaño de toque) */
.crmx .crm-agenda-semana{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.crmx .crm-agenda-dia{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--rd-sm);padding:8px 4px;cursor:pointer;font-family:inherit;
  min-width:44px;flex:1 0 auto;min-height:var(--tap)}
.crmx .crm-agenda-dia.hoy{border-color:var(--c-curso-fg)}
.crmx .crm-agenda-dia.on{background:var(--c-estr-bg);border-color:var(--c-estr-fg)}
.crmx .crm-agenda-dia-nom{font-size:var(--fs-xs);font-weight:700;color:var(--text2);text-transform:capitalize}
.crmx .crm-agenda-dia.on .crm-agenda-dia-nom{color:var(--c-estr-fg)}
/* fuera del mes (calendario): atenuado con opacidad, no con un color a mano — se lee bien en los
   dos temas sin definir un tercer tono solo para esto */
.crmx .crm-agenda-dia.fuera{opacity:.45}

/* puntos de recuento: pendientes/hechas/visitas, un punto (círculo + número) solo si el recuento
   es mayor que 0 — currentColor pinta el círculo Y el número con la misma regla de color */
.crmx .crm-agenda-puntos{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;min-height:14px}
.crmx .crm-agenda-punto{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-xs);font-weight:700;
  font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums}
.crmx .crm-agenda-punto::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.crmx .crm-agenda-punto.pend{color:var(--c-curso-fg)}
.crmx .crm-agenda-punto.hecha{color:var(--text3)}
.crmx .crm-agenda-punto.visita{color:var(--c-ok-fg)}

/* calendario del mes: rejilla 7×6 con cabecera L M X J V S D (mismo botón .crm-semana-nav que ya
   usa «Informe» para ‹ semana ›, F4) — en PC se acota a un ancho parecido al de la columna
   izquierda de la rejilla de Hoy (spec «en la columna de la izquierda»): sin mover el calendario
   de sitio en el DOM (sigue encima de la rejilla, como en móvil), pero sin estirarse a lo ancho de
   las DOS columnas de escritorio. */
.crmx .crm-agenda-mes-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
.crmx .crm-agenda-mes{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.crmx .crm-agenda-mes-cab{font-size:var(--fs-xs);font-weight:800;color:var(--text2);text-align:center;
  text-transform:uppercase}
@media(min-width:1024px){
  .crmx .crm-agenda-mes-nav,.crmx .crm-agenda-mes{max-width:400px}
}

/* «Planificado»: fila ya hecha, atenuada con quién y cuándo (el resto de .crm-accion no cambia) */
.crmx .crm-agenda-hecha .crm-accion-que,.crmx .crm-agenda-hecha .crm-accion-cli{color:var(--text3)}
/* segundo título dentro del mismo bloque «Agenda» (Planificado + Visitas y llamadas): el primero
   ya trae su margen de .crm-sec-tit, este solo necesita aire POR ENCIMA */
.crmx .crm-agenda-subtit{margin-top:14px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F13 «tareas» (14-sep-2026, spec 2026-09-14-crm-f13-tareas.md) — el bloque de tareas de Hoy:
   título grande, filas con un botón redondo de «hecha» del tamaño de un dedo, el texto de la tarea
   en grande y, debajo, el cliente, quién la manda o a quién va, y cuándo. Todo var(--…) de app.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-tareas-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.crmx .crm-tareas-tit{font-size:var(--fs-xl);font-weight:800}
/* ver-otros (14-sep-2026, spec 2026-09-14-crm-ver-tareas-de-otros.md): el título y el selector
   «Tareas de» van juntos a la izquierda, «Nueva tarea» se queda a la derecha (mismo reparto de
   siempre en .crm-tareas-hdr, solo que ahora el hueco de la izquierda lleva dos cosas). */
.crmx .crm-tareas-tit-grp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crmx .crm-tareas-de-lbl{font-size:var(--fs-xs);color:var(--text2)}
.crmx .crm-tareas-tit-grp select{width:auto;min-width:150px;min-height:var(--tap)}
/* hueco del mismo tamaño que .crm-tarea-check cuando no se puede tocar la tarea (ver es SOLO ver):
   sin él, esas filas se desalinean respecto a las que sí llevan el botón redondo de hecha */
.crmx .crm-tarea-check-hueco{flex:none;width:var(--tap);height:var(--tap)}
.crmx .crm-tareas-grupo{margin-top:4px}
.crmx .crm-tareas-grupo-tit{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text2);padding:8px 0 4px;border-bottom:1px solid var(--border)}
.crmx .crm-tareas-prob .crm-tareas-grupo-tit{color:var(--c-prob-fg)}
.crmx .crm-tareas-curso .crm-tareas-grupo-tit{color:var(--c-curso-fg)}
.crmx .crm-tarea{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.crmx .crm-tarea:last-child{border-bottom:none}
.crmx .crm-tarea-check{flex:none;width:var(--tap);height:var(--tap);border-radius:var(--rd-pill);
  border:2px solid var(--border2);background:var(--surface);color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);padding:0}
.crmx .crm-tarea-check:hover{border-color:var(--c-ok-fg);color:var(--c-ok-fg);background:var(--c-ok-bg)}
.crmx .crm-tarea-txt{flex:1;min-width:0}
.crmx .crm-tarea-que{font-size:var(--fs-lg);font-weight:700;line-height:1.25;word-break:break-word}
.crmx .crm-tarea-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;font-size:var(--fs-sm);color:var(--text2)}
.crmx .crm-tarea-cli{cursor:pointer}
.crmx .crm-tarea-cli:hover{color:var(--c-curso-fg);text-decoration:underline}
.crmx .crm-tarea-fecha{flex:none;font-size:var(--fs-sm);font-weight:700;color:var(--text2);white-space:nowrap}
.crmx .crm-tarea-fecha.crm-neg{color:var(--c-prob-fg)}
.crmx .crm-tarea-estado{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.crmx .crm-tarea-hecha .crm-tarea-que{color:var(--text3);text-decoration:line-through}
/* el «Para» de «Nueva tarea» nace oculto hasta saber si hay alguien más a quien mandarla: una regla
   de autor con display gana siempre al hidden del navegador, de ahí el empate explícito */
.crmx .crm-campo[hidden]{display:none}

/* F13b (14-sep-2026): tocar una tarea abre su hoja — toda la fila es clicable (con flecha, para que
   en el móvil se vea que se puede entrar); en la ficha y la agenda, solo el texto de la tarea */
.crmx .crm-tarea-abre{cursor:pointer}
.crmx .crm-tarea-abre:hover .crm-tarea-que,.crmx .crm-clic-tarea:hover{color:var(--c-curso-fg)}
.crmx .crm-clic-tarea{cursor:pointer}
.crmx .crm-tarea-flecha{flex:none;color:var(--text3);font-size:var(--fs-lg)}
.crmx .crm-tarea-hoja-cli{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-md);font-weight:700;
  cursor:pointer;margin-bottom:4px}
.crmx .crm-tarea-hoja-cli:hover{color:var(--c-curso-fg)}
/* F23 (16-sep-2026, spec 2026-09-16-crm-f23-tareas-internas.md): la línea «Tarea interna» no abre
   ninguna ficha (no la hay) — mismo aspecto que .crm-tarea-hoja-cli, sin el cursor ni el hover de
   «esto se toca» (el botón «Cambiar» de dentro sí es tocable, con su propio estilo de .crm-link). */
.crmx .crm-tarea-hoja-cli-fija{cursor:default}
.crmx .crm-tarea-hoja-cli-fija:hover{color:inherit}
.crmx .crm-tarea-hoja-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* F18 «Seguimientos» (14-sep-2026, spec 2026-09-14-crm-f18-seguimientos.md): texto pequeño de
   «Sobre: …» entre los chips de una tarea, y la casilla «Hacer seguimiento» de «Registrar envío»
   (mismo patrón que .crm-mapa-check, aquí con nombre genérico porque no es solo del mapa). */
.crmx .crm-tarea-sobre{font-size:var(--fs-xs);color:var(--text2)}
.crmx .crm-check{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);
  color:var(--text2);cursor:pointer;min-height:var(--tap);margin-bottom:12px}
.crmx .crm-check input{width:18px;height:18px;flex:none}

/* «Provincias en BC», paso 1 (v467, 14-sep-2026): la provincia vacía se distingue de un guion, y
   los botones de cada fila no se parten en dos líneas (la tabla ya desplaza en horizontal) */
.crmx .crm-provrev-vacio{color:var(--text3);font-style:italic}
.crmx .crm-provrev-btns{white-space:nowrap}
.crmx .crm-provrev-btns .b{margin-left:4px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F15 «Calendario» por usuario (14-sep-2026, spec 2026-09-14-crm-f15-calendario.md) — semana en
   siete columnas (una debajo de otra en el móvil) y mes en cuadrícula; tarea en azul, hecha tachada
   en gris, sin hacer y pasada en rojo, visita y llamada en verde. Todo var(--…) de app.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-cal-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.crmx .crm-cal-barra select{width:auto;min-width:180px;min-height:var(--tap)}
.crmx .crm-cal-barra .crm-seg{margin-bottom:0}
.crmx .crm-cal-nav{display:flex;gap:6px;margin-left:auto}
.crmx .crm-cal-leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text2);margin-bottom:8px}
.crmx .crm-cal-leyenda span{display:inline-flex;align-items:center;gap:4px}
.crmx .crm-cal-c-tarea{color:var(--c-curso-fg)}
.crmx .crm-cal-c-hecha{color:var(--text3)}
.crmx .crm-cal-c-vencida{color:var(--c-prob-fg)}
.crmx .crm-cal-c-visita{color:var(--c-ok-fg)}

.crmx .crm-cal-semana{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.crmx .crm-cal-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);padding:8px;min-width:0}
.crmx .crm-cal-col.hoy{border-color:var(--c-curso-fg);box-shadow:inset 0 3px 0 var(--c-curso-fg)}
.crmx .crm-cal-col-hdr{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:var(--fs-sm);
  color:var(--text2);margin-bottom:6px;text-transform:capitalize}
.crmx .crm-cal-col.hoy .crm-cal-col-hdr{color:var(--c-curso-fg)}
.crmx .crm-cal-nada{font-size:var(--fs-xs);color:var(--text3);padding:2px 0}
.crmx .crm-cal-mas{background:none;border:1px solid var(--border);border-radius:var(--rd-sm);color:var(--text2);cursor:pointer;
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none}
.crmx .crm-cal-mas:hover{color:var(--c-curso-fg);border-color:var(--c-curso-fg)}

.crmx .crm-cal-item{display:flex;align-items:flex-start;gap:6px;padding:5px 6px;margin-bottom:4px;border-radius:var(--rd-sm);
  background:var(--c-curso-bg);cursor:pointer;min-width:0;font-size:var(--fs-xs)}
.crmx .crm-cal-item i{flex:none;font-size:var(--fs-sm);margin-top:1px;color:var(--c-curso-fg)}
.crmx .crm-cal-item-txt{flex:1;min-width:0}
.crmx .crm-cal-que{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.crmx .crm-cal-cli{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crmx .crm-cal-item:hover{filter:brightness(.97)}
.crmx .crm-cal-tarea.hecha{background:var(--c-neu-bg)}
.crmx .crm-cal-tarea.hecha i{color:var(--text3)}
.crmx .crm-cal-tarea.hecha .crm-cal-que{color:var(--text3);text-decoration:line-through}
.crmx .crm-cal-tarea.vencida{background:var(--c-prob-bg)}
.crmx .crm-cal-tarea.vencida i{color:var(--c-prob-fg)}
.crmx .crm-cal-visita{background:var(--c-ok-bg)}
.crmx .crm-cal-visita i{color:var(--c-ok-fg)}
.crmx .crm-cal-visita.pendiente{background:var(--c-esp-bg)}
.crmx .crm-cal-visita.pendiente i{color:var(--c-esp-fg)}
.crmx .crm-cal-quien{flex:none;font-size:var(--fs-xs);font-weight:700;color:var(--text2);background:var(--surface);
  border-radius:var(--rd-pill);padding:1px 6px;white-space:nowrap}

/* mes: cabecera de días + cuadrícula 7×6; en el móvil cada casilla enseña solo los recuentos */
.crmx .crm-cal-mes-cab,.crmx .crm-cal-mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.crmx .crm-cal-mes-cab{margin-top:8px;margin-bottom:4px;font-size:var(--fs-xs);font-weight:700;color:var(--text2);text-align:center}
.crmx .crm-cal-celda{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd-sm);padding:4px;min-height:96px;min-width:0;
  display:flex;flex-direction:column}
.crmx .crm-cal-celda.fuera{opacity:.45}
.crmx .crm-cal-celda.hoy{border-color:var(--c-curso-fg)}
.crmx .crm-cal-celda-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.crmx .crm-cal-num{background:none;border:none;cursor:pointer;font-weight:800;font-size:var(--fs-sm);color:var(--text);padding:2px 4px;font-family:inherit}
.crmx .crm-cal-celda.hoy .crm-cal-num{color:var(--c-curso-fg)}
.crmx .crm-cal-celda .crm-cal-mas{width:22px;height:22px}
.crmx .crm-cal-celda .crm-cal-item{padding:3px 4px;margin-bottom:3px}
.crmx .crm-cal-celda .crm-cal-cli{display:none}
.crmx .crm-cal-celda .crm-cal-que{-webkit-line-clamp:1}
.crmx .crm-cal-masn{font-size:var(--fs-xs)}
.crmx .crm-cal-cuenta{display:none;background:none;border:none;cursor:pointer;gap:4px;font-size:var(--fs-xs);font-weight:800;padding:0;font-family:inherit}
@media(max-width:767px){
  .crmx .crm-cal-nav{margin-left:0}
  .crmx .crm-cal-celda{min-height:52px}
  .crmx .crm-cal-celda-items{display:none}
  .crmx .crm-cal-celda .crm-cal-mas{display:none}
  .crmx .crm-cal-cuenta{display:flex}
  .crmx .crm-cal-col.vacio .crm-cal-nada{display:none}
}
@media(min-width:1024px){
  .crmx .crm-cal-semana{grid-template-columns:repeat(7,minmax(0,1fr))}
  .crmx .crm-cal-col{min-height:180px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F19 «Leer el correo en la app» (14-sep-2026, spec 2026-09-14-crm-f19-leer-correo.md) —
   el texto se pinta SIEMPRE escapado con _e (nunca el HTML del correo): por eso basta con
   white-space:pre-wrap para que se vean los saltos de línea sin interpretar nada ajeno.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-correo-cuerpo{white-space:pre-wrap;word-break:break-word;font-size:var(--fs-sm);
  line-height:1.5;max-height:60vh;overflow:auto;padding:10px;border-radius:8px;background:var(--surface2)}

/* Informe semanal en FICHAS (20-sep-2026). Antes era una tabla de doce columnas que medía 917 px
   en una ventana de 758: los euros, las alertas y el objetivo quedaban fuera y había que
   arrastrar de lado. Cada comercial pasa a ser una ficha con sus números agrupados por lo que
   significan; cabe en cualquier pantalla y se lee sin desplazarse. */
.crmx .crm-inf-fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.crmx .crm-inf-ficha{display:flex;flex-direction:column;gap:10px}
.crmx .crm-inf-grupo-tit{font-size:var(--fs-xs);color:var(--text2);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:4px}
.crmx .crm-inf-datos{display:flex;flex-wrap:wrap;gap:14px}
.crmx .crm-inf-dato{min-width:58px}
.crmx .crm-inf-num{font-size:var(--fs-lg);font-weight:700;margin-top:1px}
/* el número que pide atención (tareas vencidas) se pinta en ámbar: es lo que hay que mirar */
.crmx .crm-inf-ojo{color:var(--c-esp-fg)}
.crmx .crm-inf-alertas{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px;
  border-top:1px solid var(--border)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F25 «Revisar la semana de un comercial» (23-sep-2026, spec 2026-09-23-crm-f25-revisar-
   semana-comercial.md) — la revisión con pestañas (Visitas y llamadas/Tareas/Clientes) que se
   abre desde una ficha del Informe. Reutiliza .crm-bloque/.crm-nota/.crm-seg/.crm-tarea de
   siempre; aquí solo lo que le falta: las cifras clicables, la tira de cifras pequeñas de la
   cabecera y el cuerpo de cada visita.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* una cifra de la ficha, cuando abre la revisión: mismo aspecto + foco de teclado visible (spec
   Front: «cursor, role=button, tabindex=0, Enter») */
.crmx .crm-inf-dato-clic{cursor:pointer;border-radius:var(--rd-sm)}
.crmx .crm-inf-dato-clic:hover{background:var(--surface2)}
.crmx .crm-inf-dato-clic:focus-visible{outline:2px solid var(--c-estr-fg);outline-offset:2px}
.crmx .crm-chip-clic:focus-visible{outline:2px solid var(--c-estr-fg);outline-offset:2px}
/* la tira de cifras de la cabecera de la revisión: las mismas de la ficha, más pequeñas, sin
   agrupar (aquí ya no hace falta: la pestaña activa dice de qué grupo se habla) */
.crmx .crm-inf-rev-cifras{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 14px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--rd)}
.crmx .crm-inf-rev-seg{margin-top:2px}
/* una visita/llamada de la revisión: el resumen ENTERO (no recortado) + las tarjetas del
   resumen_ia, mismo criterio de color que el resto de la app (prob=incidencia, esp=próxima) */
.crmx .crm-inf-rev-visita .crm-nota-txt{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* cabecera de una visita en la revisión: cliente arriba (botón plano, se abre su ficha) y la línea
   de hora/tipo/población/estado debajo (revisión de quien firma, 23-sep-2026) */
.crmx .crm-inf-rev-vis-cab{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.crmx .crm-inf-rev-vis-cli{background:none;border:none;padding:0;text-align:left;cursor:pointer;
  font-family:inherit;font-size:var(--fs-lg);font-weight:800;color:var(--text)}
.crmx .crm-inf-rev-vis-cli:hover{color:var(--c-estr-fg);text-decoration:underline}
.crmx .crm-inf-rev-vis-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:var(--fs-sm);color:var(--text2)}
.crmx .crm-inf-rev-resumen{font-size:var(--fs-sm);line-height:1.5;white-space:pre-wrap;
  word-break:break-word;margin-top:6px}
.crmx .crm-inf-rev-lista{font-size:var(--fs-sm);margin-top:6px}
.crmx .crm-inf-rev-lista b{display:block;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em;color:var(--text2);margin-bottom:2px}
.crmx .crm-inf-rev-lista ul{margin:0;padding-left:18px}
.crmx .crm-inf-rev-lista.crm-inf-rev-prob{color:var(--c-prob-fg)}
.crmx .crm-inf-rev-lista.crm-inf-rev-prob b{color:var(--c-prob-fg)}
.crmx .crm-inf-rev-proxima{font-size:var(--fs-sm);color:var(--c-esp-fg);margin-top:6px}
.crmx .crm-inf-rev-proxima b{margin-right:4px}
.crmx .crm-inf-rev-visita .b-sm{margin-top:8px}
.crmx .crm-inf-rev-cliente .b-sm{margin-top:8px}
/* F26 (24-sep-2026, spec 2026-09-24-crm-f26-…, decisión 1): «Seguimiento» de una visita — cada
   tarea reutiliza el aspecto de .crm-tarea (pestaña «Tareas» de este mismo informe, mismo tap) con
   un icono de estado delante, en los tres colores de siempre (hecho/problema/espera: nunca un color
   a mano). El nombre NO es .crm-inf-rev-seg: esa clase ya la usa el segmentado de pestañas de más
   arriba (crm-seg), para otra cosa. */
.crmx .crm-inf-rev-seguimiento{margin-top:8px}
.crmx .crm-seg-estado{flex:none;font-size:var(--fs-lg)}
.crmx .crm-seg-estado.ok{color:var(--c-ok-fg)}
.crmx .crm-seg-estado.prob{color:var(--c-prob-fg)}
.crmx .crm-seg-estado.esp{color:var(--c-esp-fg)}
.crmx .crm-seg-estado.neu{color:var(--text3)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   F27 «Comentarios de gerencia» (25-sep-2026, spec 2026-09-25-crm-f27-presentacion-tareas-y-
   gerencia.md, decisión 3) — la MISMA fila (.crm-com-ger-fila) se reutiliza en la hoja de
   escribirlos y en el bloque «Gerencia» de la revisión; la ficha pinta su propia variante de solo
   lectura (.crm-com-ger-fila-ro), con el chip «Gerencia» porque ahí no hay un título de bloque
   que ya lo diga.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-com-ger-fila{padding:8px 0;border-top:1px solid var(--border)}
.crmx .crm-com-ger-fila:first-of-type,.crmx .crm-bloque-tit+.crm-com-ger-fila{border-top:none}
.crmx .crm-com-ger-txt{font-size:var(--fs-md);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.crmx .crm-com-ger-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text2);margin-top:3px}
.crmx .crm-com-ger-btns{display:flex;gap:6px}
.crmx .crm-com-ger-fila-ro{font-size:var(--fs-sm);line-height:1.5;padding:4px 0 0}
.crmx .crm-com-ger-meta-ro{color:var(--text2);font-size:var(--fs-xs)}
/* bloque de la revisión: acento de marca (es la voz de gerencia, no un estado de la visita) */
.crmx .crm-inf-rev-gerencia{margin-top:8px;padding:10px 12px;background:var(--c-estr-bg);
  border-left:4px solid var(--c-estr-fg);border-radius:0 var(--rd-sm) var(--rd-sm) 0}
.crmx .crm-inf-rev-gerencia .crm-bloque-tit{color:var(--c-estr-fg)}
/* F30 (28-sep-2026, spec 2026-09-28-crm-f30-…, decisión 3): bloque «Notas» de la revisión — mismo
   patrón que «Gerencia», de arriba, pero NEUTRO (--border2/--surface2, sin el acento de marca): es
   cualquiera anotando algo a posteriori, no la voz de quien dirige la reunión. */
.crmx .crm-inf-rev-notas{margin-top:8px;padding:10px 12px;background:var(--surface2);
  border-left:4px solid var(--border2);border-radius:0 var(--rd-sm) var(--rd-sm) 0}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F28 Parte A «Revisión: visitas plegadas y juntas por cliente» (25-sep-2026, spec
   2026-09-25-crm-f28-…) — una tarjeta por cliente, plegada por defecto; dentro, las visitas de
   siempre. La spec pedía radio --rd-md para la tarjeta, que no existe en el sistema de diseño
   (solo --rd/--rd-sm/--rd-pill, ver skill diseno-cargas) — se usa --rd, el mismo que .crm-bloque
   un poco más arriba: es la misma idea de «tarjeta» de toda la app.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-inf-cli-acciones{display:flex;justify-content:flex-end;margin-bottom:10px}
.crmx .crm-inf-cli{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);
  margin-bottom:12px;overflow:hidden}
.crmx .crm-inf-cli-cabfila{display:flex;align-items:stretch}
.crmx .crm-inf-cli-cab{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:none;border:none;padding:12px 14px;text-align:left;cursor:pointer;font-family:inherit;
  min-height:var(--tap)}
.crmx .crm-inf-cli-cab:hover{background:var(--surface2)}
.crmx .crm-inf-cli-chevron{flex:none;color:var(--text3);transition:transform .15s}
.crmx .crm-inf-cli-cab[aria-expanded="true"] .crm-inf-cli-chevron{transform:rotate(90deg)}
.crmx .crm-inf-cli-nom{flex:1 1 auto;min-width:0}
.crmx .crm-inf-cli-nombre{font-size:var(--fs-lg);font-weight:800;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crmx .crm-inf-cli-ciudad{font-size:var(--fs-sm);color:var(--text2)}
.crmx .crm-inf-cli-chips{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;justify-content:flex-end}
.crmx .crm-inf-cli-ficha{flex:none;align-self:center;margin:0 12px}
.crmx .crm-inf-cli-body{padding:0 14px 12px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F29 «Ventas en la revisión de la semana» (25-sep-2026, spec 2026-09-25-crm-f29-…) — panel
   ARRIBA del cuerpo de la tarjeta: dos baldosas (año pasado neutra, este año con el acento de
   marca — spec Front), la comparación con flecha y color por token, y una barra fina. Es un
   <button> entero (accesible, spec: «todo el panel es un botón») — por eso el reset de tipografía
   y alineación (los <button> no heredan font-family ni text-align por su cuenta).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-vtas-panel{display:block;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--rd);padding:14px 16px;margin-bottom:14px;
  cursor:pointer;font-family:inherit;box-shadow:var(--sh)}
.crmx .crm-vtas-panel:hover{background:var(--surface2)}
.crmx .crm-vtas-panel:focus-visible{outline:2px solid var(--c-estr-fg);outline-offset:2px}
.crmx .crm-vtas-vacio{display:flex;align-items:center;gap:8px;color:var(--text2);font-size:var(--fs-sm)}
.crmx .crm-vtas-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.crmx .crm-vtas-tile{background:var(--surface2);border-radius:var(--rd-sm);padding:10px 12px;min-width:0}
.crmx .crm-vtas-tile-actual{background:var(--c-estr-bg);border:1px solid var(--c-estr-fg)}
.crmx .crm-vtas-tile-anio{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text2)}
.crmx .crm-vtas-tile-actual .crm-vtas-tile-anio{color:var(--c-estr-fg)}
.crmx .crm-vtas-tile-imp{font-size:var(--fs-2xl);font-weight:800;line-height:1.15;margin-top:2px;color:var(--text)}
.crmx .crm-vtas-tile-actual .crm-vtas-tile-imp{color:var(--c-estr-fg)}
.crmx .crm-vtas-tile-ped{font-size:var(--fs-sm);color:var(--text2);margin-top:2px}
.crmx .crm-vtas-comp{font-size:var(--fs-sm);font-weight:700;margin-top:12px}
.crmx .crm-vtas-comp-sube{color:var(--c-ok-fg)}
.crmx .crm-vtas-comp-baja{color:var(--c-prob-fg)}
.crmx .crm-vtas-comp-sin{color:var(--text2);font-weight:400}
.crmx .crm-vtas-barra{height:6px;background:var(--surface3);border-radius:4px;overflow:hidden;margin-top:8px}
.crmx .crm-vtas-barra i{display:block;height:100%;background:var(--c-estr-fg);border-radius:4px}
.crmx .crm-vtas-barra-txt{font-size:var(--fs-xs);color:var(--text2);margin-top:4px}
.crmx .crm-vtas-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.crmx .crm-vtas-iva{font-size:var(--fs-xs);color:var(--text3)}
@media (max-width:640px){ .crmx .crm-vtas-tiles{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM F25 · Anexo «Presentar en la tele» (23-sep-2026, el dueño con la obra ya en marcha: «ponlo
   en la TV en la reunión semanal») — mazo de diapositivas a pantalla completa, pensado para verse
   desde la mesa (~4 m, tele 1920×1080). Por eso el TAMAÑO DE LETRA aquí no sale de la escala de
   siempre (--fs-*, pensada para 40-60 cm de distancia) sino de clamp() sobre vw/vh — la MISMA
   excepción que ya usa .iv-doc (el papel) para su propio formato de salida; los COLORES siguen
   siendo, sin excepción, los tokens de siempre (claro/oscuro).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crm-tv{position:fixed;inset:0;z-index:11024;background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;overflow:hidden}
.crm-tv .crm-tv-progreso{height:4px;background:var(--surface2);flex-shrink:0}
.crm-tv .crm-tv-progreso-fill{height:100%;background:var(--c-estr-fg);transition:width .25s ease}
.crm-tv .crm-tv-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 20px;flex-shrink:0;transition:opacity .3s ease}
.crm-tv .crm-tv-cab-txt{font-size:var(--fs-sm);color:var(--text2);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.crm-tv .crm-tv-cab-btns{display:flex;gap:8px;align-items:center}
.crm-tv.crm-tv-ocultos .crm-tv-cab,.crm-tv.crm-tv-ocultos .crm-tv-flecha{opacity:0;pointer-events:none}
/* column (revisión de quien firma, 23-sep-2026): las diapositivas de lista son DOS hermanos
   —título y lista— y en fila salían uno al lado del otro; en columna, el título va encima. */
.crm-tv .crm-tv-stage{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:2vh 4vw}
.crm-tv .crm-tv-flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  width:56px;height:56px;border-radius:50%;border:1px solid var(--border2);cursor:pointer;
  background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xl);transition:opacity .3s ease}
.crm-tv .crm-tv-flecha:hover{background:var(--surface2)}
.crm-tv .crm-tv-izq{left:16px}
.crm-tv .crm-tv-der{right:16px}
.crm-tv .crm-tv-flecha[hidden]{visibility:hidden}
/* F27 (25-sep-2026, spec 2026-09-25-crm-f27-…, decisión 1): acciones de la diapositiva de una
   visita, dentro de la cabecera (revisión de quien firma: abajo tapaban las fotos) — se esconden
   con ella, sin regla propia. */
.crm-tv .crm-tv-acciones{display:flex;gap:8px;align-items:center}
@media(prefers-reduced-motion:reduce){
  .crm-tv .crm-tv-progreso-fill,.crm-tv .crm-tv-cab,.crm-tv .crm-tv-flecha{transition:none}
}
@media(max-width:640px){
  .crm-tv .crm-tv-visita-cuerpo{flex-direction:column}
  .crm-tv .crm-tv-flecha{width:44px;height:44px;font-size:var(--fs-lg)}
}

/* ── portada (de un comercial y del mazo entero) ── */
.crm-tv .crm-tv-portada{width:100%;max-width:1400px;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:2vh}
.crm-tv .crm-tv-portada-nombre{font-size:clamp(28px,4.5vh,64px);font-weight:800}
.crm-tv .crm-tv-portada-semana{font-size:clamp(16px,2.6vh,28px);color:var(--text2)}
.crm-tv .crm-tv-cifras{display:flex;flex-wrap:wrap;justify-content:center;gap:4vw;margin-top:1vh}
.crm-tv .crm-tv-cifra-v{font-size:clamp(28px,9vh,120px);font-weight:800;line-height:1}
.crm-tv .crm-tv-cifra-ojo .crm-tv-cifra-v{color:var(--c-esp-fg)}
.crm-tv .crm-tv-cifra-lbl{font-size:clamp(13px,2vh,20px);color:var(--text2);text-transform:uppercase;
  letter-spacing:.05em;margin-top:.4vh}
.crm-tv .crm-tv-objetivo{width:min(60vw,640px);margin-top:1vh}
.crm-tv .crm-tv-objetivo-barra{height:16px;border-radius:8px;background:var(--surface2);overflow:hidden}
.crm-tv .crm-tv-objetivo-fill{height:100%;background:var(--c-curso-fg);border-radius:8px}
.crm-tv .crm-tv-objetivo-txt{font-size:clamp(14px,2.2vh,22px);color:var(--text2);margin-top:.5vh}
.crm-tv .crm-tv-atencion{font-size:clamp(14px,2.4vh,24px);color:var(--c-esp-fg);font-weight:700}
.crm-tv .crm-tv-mazo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;width:100%;max-width:1400px}
.crm-tv .crm-tv-mazo-tarjeta{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rd);padding:16px}
.crm-tv .crm-tv-mazo-nombre{font-size:clamp(16px,2.6vh,26px);font-weight:800;margin-bottom:8px}
.crm-tv .crm-tv-mazo-cifras{display:flex;flex-wrap:wrap;gap:14px}
.crm-tv .crm-tv-mazo-cifras .crm-tv-cifra-v{font-size:clamp(18px,3.4vh,40px)}
.crm-tv .crm-tv-mazo-total{font-size:clamp(16px,2.6vh,26px);font-weight:800;margin-top:1vh}

/* ── una visita o llamada ── */
.crm-tv .crm-tv-visita{width:100%;max-width:1500px;height:100%;display:flex;flex-direction:column;
  gap:1.4vh;min-height:0}
.crm-tv .crm-tv-visita-cli{font-size:clamp(24px,4.5vh,56px);font-weight:800}
.crm-tv .crm-tv-visita-ciudad{color:var(--text2);font-weight:400}
.crm-tv .crm-tv-visita-meta{font-size:clamp(14px,2.2vh,22px);color:var(--text2)}
.crm-tv .crm-tv-visita-cuerpo{display:flex;gap:2.4vw;flex:1;min-height:0}
/* recorte a 8 líneas con «…» (revisión de quien firma): el resumen de la IA suele ser UN párrafo
   largo, así que partirlo por saltos de línea no recortaba nada y el overflow lo cortaba a media
   frase; el texto entero sigue en la lista de la revisión. */
.crm-tv .crm-tv-visita-resumen{flex:1.3;font-size:clamp(15px,2.6vh,26px);line-height:1.45;
  white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;
  align-self:flex-start}
.crm-tv .crm-tv-visita-tarjetas{flex:1;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.crm-tv .crm-tv-mini{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd-sm);
  padding:10px 14px;font-size:clamp(13px,2vh,19px)}
.crm-tv .crm-tv-mini b{display:block;font-size:clamp(11px,1.6vh,15px);text-transform:uppercase;
  letter-spacing:.05em;color:var(--text2);margin-bottom:4px}
.crm-tv .crm-tv-mini ul{margin:0;padding-left:18px}
/* F27 (25-sep-2026, spec 2026-09-25-crm-f27-…, decisión 3): tarjeta «Gerencia» — acento de marca
   (no es un estado de la visita, es la voz de quien dirige) y el texto un punto más grande que
   las demás tarjetas. */
.crm-tv .crm-tv-mini-gerencia{border-left:4px solid var(--c-estr-fg);font-size:clamp(14px,2.2vh,21px)}
.crm-tv .crm-tv-mini-gerencia b{color:var(--c-estr-fg)}
.crm-tv .crm-tv-mini-gerencia li{white-space:pre-line}
.crm-tv .crm-tv-mini-gerencia-autor{color:var(--text2);font-weight:400;font-size:clamp(11px,1.7vh,15px)}
.crm-tv .crm-tv-mini-prob{border-left:4px solid var(--c-prob-fg)}
.crm-tv .crm-tv-mini-prob b{color:var(--c-prob-fg)}
.crm-tv .crm-tv-mini-esp{border-left:4px solid var(--c-esp-fg)}
.crm-tv .crm-tv-mini-esp b{color:var(--c-esp-fg)}
/* F29 (25-sep-2026, spec 2026-09-25-crm-f29-…, decisión 1): tarjeta «Ventas» — es un <button>
   (tocable, abre la hoja grande en €), así que hereda .crm-tv-mini y solo repone lo que un botón
   no trae de serie (alineación, ancho, tipografía). */
.crm-tv .crm-tv-mini-ventas{cursor:pointer;text-align:left;width:100%;font-family:inherit}
.crm-tv .crm-tv-mini-ventas:hover{background:var(--surface2)}
.crm-tv .crm-tv-ventas-comp{margin-top:2px;font-weight:700}
.crm-tv .crm-tv-ventas-sube{color:var(--c-ok-fg)}
.crm-tv .crm-tv-ventas-baja{color:var(--c-prob-fg)}
.crm-tv .crm-tv-ventas-sin{color:var(--text2);font-weight:400}
.crm-tv .crm-tv-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;
  flex-shrink:0}
.crm-tv .crm-tv-fotos-una{grid-template-columns:minmax(0,62vh);justify-content:center}
/* alto FIJO de cada foto (revisión de quien firma, 23-sep-2026): con alto automático, la tira
   crecía al llegar las imágenes y volvía a apretar el texto de la visita después de haberla
   ajustado para que cupiera — así la diapositiva no se mueve cuando cargan. */
.crm-tv .crm-tv-foto{position:relative;border:none;padding:0;border-radius:var(--rd-sm);overflow:hidden;
  cursor:pointer;background:var(--surface2);height:24vh}
.crm-tv .crm-tv-fotos-una .crm-tv-foto{height:40vh}
.crm-tv .crm-tv-foto img{width:100%;height:100%;object-fit:cover;display:block}
.crm-tv .crm-tv-foto-mas{position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:clamp(18px,3vh,32px);font-weight:800}

/* ── listas (tareas hechas/próximas, notas y envíos) ── */
.crm-tv .crm-tv-lista-tit{font-size:clamp(20px,3.6vh,44px);font-weight:800;margin-bottom:1.4vh;
  width:100%;text-align:center}
.crm-tv .crm-tv-lista{display:flex;flex-direction:column;gap:10px;width:100%;max-width:1300px}
.crm-tv .crm-tv-lista-fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--border)}
.crm-tv .crm-tv-lista-que{font-size:clamp(16px,2.8vh,28px);font-weight:700;flex:1;min-width:0}
.crm-tv .crm-tv-lista-meta{font-size:clamp(13px,2vh,19px);color:var(--text2);text-align:right;max-width:45%}
.crm-tv .crm-tv-mas{font-size:clamp(14px,2.2vh,22px);color:var(--text2);text-align:center;margin-top:1vh}

/* ── una tarea vencida, sola (spec: «es lo que se discute») ── */
.crm-tv .crm-tv-tarea-vencida{width:100%;max-width:1200px;text-align:center;display:flex;
  flex-direction:column;gap:1.6vh}
.crm-tv .crm-tv-tarea-que{font-size:clamp(26px,5vh,62px);font-weight:800}
.crm-tv .crm-tv-tarea-cli{font-size:clamp(16px,2.8vh,28px);color:var(--text2)}
.crm-tv .crm-tv-tarea-desde{font-size:clamp(16px,2.8vh,28px);color:var(--c-prob-fg);font-weight:700}
.crm-tv .crm-tv-tarea-aplaz{font-size:clamp(14px,2.2vh,22px);color:var(--text2)}
.crm-tv .crm-tv-tarea-hist{font-size:clamp(15px,2.4vh,24px);margin-top:1vh;padding:12px 18px;
  border-left:4px solid var(--border2);background:var(--surface);border-radius:0 var(--rd-sm) var(--rd-sm) 0}

/* ── clientes: de la semana (rejilla) y piden atención (lista) ── */
.crm-tv .crm-tv-clientes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;width:100%;max-width:1400px}
.crm-tv .crm-tv-cliente{background:var(--surface);border:1px solid var(--border);border-radius:var(--rd);
  padding:14px 16px}
.crm-tv .crm-tv-cliente-nombre{font-size:clamp(16px,2.6vh,26px);font-weight:800}
.crm-tv .crm-tv-cliente-cifras{font-size:clamp(13px,2vh,19px);color:var(--text2);margin-top:4px}
.crm-tv .crm-tv-cliente-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   «Ventas del cliente» convertida en informe INTERACTIVO (20-sep-2026, el dueño: «crea uno
   interactivo dentro de la app»). Es PANTALLA, así que aquí sí manda el kit: todo con tokens y
   con los dos temas. Lo que aporta frente a la lista de antes: las cuatro cifras del papel, un
   gráfico que se TOCA (en la tablet no hay ratón, así que el title no lo lee nadie), el tramo de
   meses a elegir, y las familias como filtro de los artículos.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.crmx .crm-vc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px}
.crmx .crm-vc-per{font-size:var(--fs-lg);font-weight:800;line-height:1.2}
.crmx .crm-vc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.crmx .crm-vc-acc{display:flex;flex-wrap:wrap;gap:8px}

/* las cuatro cifras: la misma rejilla que se pliega sola del informe semanal */
.crmx .crm-vc-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-bottom:6px}
.crmx .crm-vc-cifra{background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--c-estr-fg);border-radius:var(--rd);padding:10px 12px;min-width:0}
.crmx .crm-vc-k{font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text2)}
.crmx .crm-vc-v{font-size:var(--fs-xl);font-weight:800;line-height:1.15;margin-top:2px}
.crmx .crm-vc-s{font-size:var(--fs-xs);color:var(--text2);margin-top:2px}
.crmx .crm-vc-s2{color:var(--text2);font-weight:400}

.crmx .crm-vc-mandos{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:4px}
.crmx .crm-vc-ayuda{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:var(--fs-xs);color:var(--text2);margin:-4px 0 7px}

/* ── el gráfico tocable ──
   cada barra es un BOTÓN a toda la altura de la caja (no solo la barra pintada): si el objetivo
   fuera la barra, un mes flojo mediría 3 px de alto y no habría quien lo acertara con el dedo. */
.crmx .crm-vc-graf{margin-top:6px}
.crmx .crm-vc-barras{height:104px;align-items:stretch}
.crmx .crm-vc-col{flex:1;min-width:6px;display:flex;align-items:flex-end;background:none;border:0;
  padding:0;cursor:pointer;font-family:inherit;border-radius:3px 3px 0 0}
.crmx .crm-vc-col:hover,.crmx .crm-vc-col.on{background:var(--surface2)}
.crmx .crm-vc-col .crm-barra{width:100%;flex:none}
.crmx .crm-barra-sel{background:var(--c-estr-btn);outline:2px solid var(--c-estr-fg);
  outline-offset:1px}
.crmx .crm-vc-graf .crm-graf-cab{min-height:1.4em}

/* ── familias como filtro ── */
.crmx .crm-vc-fam{cursor:pointer}
.crmx .crm-vc-fam:hover td{background:var(--surface2)}
.crmx .crm-vc-fam.on td{background:var(--c-estr-bg)}
.crmx .crm-vc-fam.on td:first-child{font-weight:700;color:var(--c-estr-fg)}
.crmx .crm-vc-fam:focus-visible{outline:2px solid var(--c-estr-fg);outline-offset:-2px}
.crmx .crm-vc-peso{white-space:nowrap}
.crmx .crm-vc-barra{display:inline-block;width:70px;height:7px;background:var(--surface3);
  border-radius:4px;overflow:hidden;margin-right:7px;vertical-align:0}
.crmx .crm-vc-barra i{display:block;height:100%;background:var(--c-estr-fg);border-radius:4px}

@media (max-width:640px){
  .crmx .crm-vc-barra{width:38px}
  .crmx .crm-vc-acc{width:100%}
  .crmx .crm-vc-acc .b{flex:1}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CRM Tanda 1 · C7 «el móvil» (1-oct-2026, spec 2026-10-01-crm-tanda1-fallos.md) — revisión con las
   normas de interfaz de Vercel. Los comerciales usan el CRM con el móvil, por la calle (Android y
   algún iPhone con la app instalada). Todo lo de «solo táctil» va con (pointer:coarse): en el portátil
   no cambia nada. Sin colores ni tamaños a mano salvo el 16px de los campos, que NO es un tamaño de
   diseño sino el umbral del iPhone (ver abajo).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@media (pointer:coarse){
  /* un campo de menos de 16px hace que el iPhone acerque la pantalla al tocarlo y ya no la suelte:
     max() con la escala de siempre, para que nunca quede MÁS pequeño que --fs-md */
  .crmx input,.crmx select,.crmx textarea,
  .crmx .crm-chips select,.crmx .crm-mapa-filtros select,.crmx .crm-mapa-ruta-controles select,
  .crmx .crm-obj-cell input,.crmx .crm-semana-selector .crm-semana-select{font-size:max(var(--fs-md),16px)}
  /* objetivos de toque a 44px (--tap) en lo que se usa de pie: llamar / WhatsApp / correo / cómo llegar
     (ficha de cliente y de contacto), la burbuja del mapa y sus botones, las paradas de la ruta, las
     flechas del calendario y el «+» de cada día */
  .crmx .crm-acciones-rapidas .b-sm,.crmx .crm-mapa-popup-btns .b-sm,.crmx .crm-mapa-ruta-btns .b,
  .crmx .crm-mapa-ruta-btns .b-sm,.crmx .crm-cal-nav .b-sm{min-height:var(--tap)}
  .crmx .crm-cal-nav .b-sm{min-width:var(--tap)}
  .crmx .crm-mapa-ruta-asa{min-height:var(--tap)}
  .crmx .leaflet-container a.leaflet-popup-close-button{width:var(--tap);height:var(--tap);
    font-size:var(--fs-xl);line-height:var(--tap);padding:0}
  .crmx .crm-cal-mas,.crmx .crm-cal-celda .crm-cal-mas{width:var(--tap);height:var(--tap)}
  /* la × de un invitado: el chip crece con ella (como los demás chips tocables, que ya miden --tap) */
  .crmx .crm-chip-x{padding-top:0;padding-bottom:0}
  .crmx .crm-chip-x button{width:var(--tap);height:var(--tap)}
}
/* hojas de abajo: el dedo que sigue arrastrando al llegar al final no mueve la pantalla de atrás, y
   el contenido no queda bajo la barra de gestos del móvil (env() vale 0 donde no hay barra) */
.crmx-hoja{overscroll-behavior:contain;padding-bottom:max(16px,env(safe-area-inset-bottom))}
/* botón flotante «Nota» y reproductor flotante: por encima de esa misma barra */
.crmx.crm-fab{bottom:calc(16px + env(safe-area-inset-bottom))}
.crmx .crm-audio-flotante{bottom:calc(16px + env(safe-area-inset-bottom))}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Informe de ventas PARA EL CLIENTE (20-sep-2026) — crm.js:crmInformeVentas
   Es PAPEL, y va dentro de #print-content, que vive FUERA de .crmx: por eso estas reglas no
   llevan el prefijo del CRM (igual que .ip- de la hoja de carga vive suelta en app.css).
   Colores FIJOS a propósito, iguales en los dos temas: con los tokens, el tema oscuro pintaría
   letra clara sobre la hoja blanca de la vista previa. print-color-adjust:exact para que la
   cabecera, la rejilla del gráfico y las barras salgan aunque el diálogo de imprimir tenga
   apagados los «gráficos de fondo». Lo lee un cliente, así que el tono es el de un informe
   financiero: tipografía sobria, cifras a la derecha, una sola tinta de marca.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.iv-doc{--iv-marca:#2d2b8f;--iv-tinta:#15233b;--iv-tinta2:#55637a;--iv-linea:#d3d9e2;
  --iv-suave:#f4f6fa;--iv-sube:#1d6b4f;--iv-baja:#9c3226;
  font-family:'DM Sans',system-ui,sans-serif;color:var(--iv-tinta);background:#fff;
  font-size:10.5pt;line-height:1.38;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.iv-doc *{box-sizing:border-box}
.iv-mono{font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.iv-num{text-align:right;font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.iv-k{font-size:8pt;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--iv-tinta2)}

/* ── membrete ── */
.iv-cab{display:flex;align-items:flex-start;gap:14px;padding-bottom:10px;
  border-bottom:2.5px solid var(--iv-marca)}
.iv-logo{height:42px;width:auto;flex:0 0 auto}
.iv-emp{flex:1;font-size:8.5pt;color:var(--iv-tinta2);line-height:1.45;padding-top:3px}
.iv-emp b{color:var(--iv-tinta)}
.iv-tit{text-align:right;flex:0 0 auto}
.iv-tit-1{font-size:17pt;font-weight:800;letter-spacing:-.01em;color:var(--iv-marca);line-height:1.1}
.iv-tit-2{font-size:9.5pt;font-weight:600;margin-top:2px}
.iv-tit-3{font-size:8.5pt;color:var(--iv-tinta2)}

/* ── cliente y comercial ── */
.iv-cli{display:flex;gap:16px;margin:12px 0 4px;background:var(--iv-suave);
  border:1px solid var(--iv-linea);border-radius:6px;padding:12px 14px}
.iv-cli-izq{flex:1;min-width:0}
.iv-cli-der{flex:0 0 33%;border-left:1px solid var(--iv-linea);padding-left:14px}
.iv-cli-nom{font-size:15pt;font-weight:800;line-height:1.15;margin:1px 0 3px;word-break:break-word}
.iv-com{font-size:11.5pt;font-weight:700;margin:1px 0 3px}
.iv-cli-dat{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:9pt;color:var(--iv-tinta2)}
.iv-cli-dat b{color:var(--iv-tinta)}
.iv-cli-dir{font-size:9pt;color:var(--iv-tinta2);margin-top:3px}

/* ── títulos de sección: la raya fina y el número son lo que da el aire de informe. El número lo
      pone el CSS (contador), no el HTML: así una sección que no se pinta no deja un hueco en la
      numeración. Copiado del informe de Finanzas, que ya lo hacía así. ── */
.iv-doc{counter-reset:ivsec}
.iv-sec{font-size:11pt;font-weight:800;color:var(--iv-marca);margin:18px 0 7px;
  padding-bottom:3px;border-bottom:1px solid var(--iv-linea);counter-increment:ivsec}
.iv-sec::before{content:counter(ivsec) ". "}
/* la frase de arriba: dice en una línea lo que las tablas cuentan en una página */
.iv-resumen{font-size:10.5pt;line-height:1.5;margin:11px 0 2px;padding:10px 13px;
  border-left:3px solid var(--iv-marca);background:var(--iv-suave);border-radius:0 5px 5px 0}
.iv-resumen b{font-weight:800}
.iv-nota{font-size:9pt;color:var(--iv-tinta2);margin:-3px 0 7px}
.iv-pieletra{font-size:8.5pt;color:var(--iv-tinta2);margin-top:6px}

/* ── las cuatro cifras del resumen ── */
.iv-cifras{display:flex;gap:10px}
.iv-cifra{flex:1;border:1px solid var(--iv-linea);border-top:3px solid var(--iv-marca);
  border-radius:5px;padding:9px 11px;min-width:0;position:relative}
/* el minigráfico va detrás, en una esquina y apagado: está para la FORMA, no para leer cifras */
.iv-spark{position:absolute;right:9px;bottom:8px;width:74px;height:20px;opacity:.28}
.iv-spark polyline{fill:none;stroke:var(--iv-marca);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.iv-cifra .iv-v{font-size:16pt;font-weight:800;line-height:1.1;margin-top:3px;
  font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.iv-cifra .iv-s{font-size:8.5pt;color:var(--iv-tinta2);margin-top:2px}
.iv-cifra .iv-s2{color:var(--iv-tinta2);font-weight:400}
.iv-sube{color:var(--iv-sube);font-weight:700}
.iv-baja{color:var(--iv-baja);font-weight:700}
.iv-igual{color:var(--iv-tinta2);font-weight:700}

/* ── gráfico ── */
.iv-graf{width:100%;height:auto;display:block}
.iv-g-rej{stroke:var(--iv-linea);stroke-width:.8}
.iv-g-bar{fill:var(--iv-marca)}
.iv-g-bar-ant{fill:#c3cad8}
.iv-g-media{stroke:var(--iv-tinta2);stroke-width:1.1;stroke-dasharray:4 3}
/* la etiqueta de la media cae encima de las barras: un reborde blanco la despega sin tapar
   nada (paint-order pinta primero el trazo y luego la letra) */
.iv-g-media-t{font-size:8.5px;fill:var(--iv-tinta2);font-family:'DM Sans',sans-serif;
  stroke:#fff;stroke-width:3;paint-order:stroke;stroke-linejoin:round}
.iv-g-ejey{font-size:9px;fill:var(--iv-tinta2);text-anchor:end;font-family:'DM Mono',monospace}
.iv-g-ejex{font-size:9px;fill:var(--iv-tinta2);text-anchor:middle;font-family:'DM Sans',sans-serif}
.iv-graf-leyenda{display:flex;gap:16px;font-size:8.5pt;color:var(--iv-tinta2);margin-top:2px}
.iv-graf-leyenda i{display:inline-block;width:11px;height:9px;border-radius:1.5px;margin-right:5px;
  vertical-align:-1px}
.iv-l-per{background:var(--iv-marca)}
.iv-l-ant{background:#c3cad8}
.iv-l-med{height:0;border-top:2px dashed var(--iv-tinta2);border-radius:0;vertical-align:2px}

/* ── tablas ── */
.iv-tabla{width:100%;border-collapse:collapse;font-size:9.5pt}
.iv-tabla th{background:var(--iv-marca);color:#fff;font-weight:700;font-size:8.5pt;
  letter-spacing:.03em;text-align:left;padding:6px 8px;border:none}
.iv-tabla th.iv-num{text-align:right}
.iv-tabla td{padding:5px 8px;border-bottom:1px solid var(--iv-linea);vertical-align:top}
.iv-tabla tbody tr:nth-child(even) td{background:var(--iv-suave)}
.iv-tabla tfoot td{font-weight:800;border-top:2px solid var(--iv-marca);border-bottom:none;
  background:#fff;padding-top:7px}
.iv-tabla .iv-fam{color:var(--iv-tinta2);font-size:9pt}
.iv-cod{color:var(--iv-tinta2);font-family:'DM Mono',ui-monospace,monospace;font-size:8pt}
/* la cabecera de cada familia dentro del detalle, y su subtotal: el bloque-subtotal-total de
   cualquier informe. La cabecera NO lleva cebra (la cebra cuenta filas, no bloques). */
.iv-tabla tr.iv-grupo td{background:#e7eaf3;font-weight:800;font-size:8.5pt;letter-spacing:.05em;
  text-transform:uppercase;color:var(--iv-marca);padding:5px 8px;border-bottom:none}
.iv-tabla tr.iv-sub td{font-weight:700;background:#fff;border-bottom:1.5px solid var(--iv-linea)}
.iv-tabla-art{font-size:9pt}
.iv-tabla-art td{padding:4px 8px}
/* el peso de cada familia: la barrita dice de un vistazo lo que el número dice exacto */
.iv-peso{white-space:nowrap}
.iv-peso .iv-barra{display:inline-block;width:78px;height:7px;background:var(--iv-linea);
  border-radius:4px;overflow:hidden;margin-right:7px;vertical-align:0}
.iv-peso .iv-barra i{display:block;height:100%;background:var(--iv-marca);border-radius:4px}
.iv-peso b{font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ── pie ── */
.iv-pie{display:flex;justify-content:space-between;gap:14px;margin-top:20px;padding-top:7px;
  border-top:1px solid var(--iv-linea);font-size:8pt;color:var(--iv-tinta2)}

@media print{
  /* ni un título huérfano al final de una página, ni una fila partida por la mitad */
  .iv-sec{break-after:avoid;page-break-after:avoid}
  .iv-tabla thead{display:table-header-group}
  .iv-tabla tr,.iv-cifra,.iv-cli,.iv-cab{break-inside:avoid;page-break-inside:avoid}
  .iv-graf,.iv-graf-leyenda{break-inside:avoid;page-break-inside:avoid}
  .iv-pie{position:static}
}
/* en una pantalla estrecha el impreso se lee en vertical en vez de salirse de ancho — solo dentro
   de .print-content, que es donde vive la vista previa. En el PAPEL la caja no hace nada: ahí
   caben las seis columnas y overflow:visible deja que la tabla se parta entre páginas. */
.iv-caja{overflow:visible}
@media print{ .iv-caja{overflow:visible!important} }
@media (max-width:760px){
  .print-content .iv-caja{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .print-content .iv-cab,.print-content .iv-cli,.print-content .iv-cifras{flex-wrap:wrap}
  .print-content .iv-tit{text-align:left;width:100%}
  .print-content .iv-cli-der{flex-basis:100%;border-left:none;padding-left:0;
    border-top:1px solid var(--iv-linea);padding-top:8px}
  .print-content .iv-cifra{flex-basis:calc(50% - 5px)}
  .print-content .iv-peso .iv-barra{width:44px}
  .print-content .iv-pie{flex-wrap:wrap}
}