/* =============================================================
   TapUp · Panel del cliente

   Es un CRM, no una página con datos: barra de secciones, una vista
   a la vez, tablas y tarjetas de cifra. Los tokens de marca, los
   botones y los campos vienen de styles.css — aquí sólo vive lo
   propio de /dashboard/.

   LAS TRES REGLAS QUE SOSTIENEN TODO ESTO
   · La jerarquía la da la sombra y el borde, nunca un degradado.
   · UN azul, el de la acción. Lo demás es tinta índigo y grises.
   · Radios con escala: 10 px controles, 16 px tarjetas, 24 px paneles.

   Y LA QUE NO SE NEGOCIA: esto se usa de pie, detrás de un mostrador,
   con una mano. En celular no hay barra lateral —una gaveta que hay
   que abrir para cambiar de sección es una gaveta que nadie abre— y
   cada renglón de tabla se convierte en tarjeta.
   ============================================================= */

.pan-body {
  background: var(--gray-50);
}

/* Dentro del panel manda la barra de secciones: el encabezado y el
   pie del sitio se van. Dos encabezados, uno encima del otro, es lo
   que hace que una aplicación se sienta una página. */
body.en-app #encabezado-sitio,
body.en-app #pie-sitio { display: none; }


/* =============================================================
   1 · ENCABEZADO Y PIE DEL SITIO (pantallas de entrar)
   ============================================================= */
.pan-header {
  background: var(--white);
  border-bottom: var(--border);
}
.pan-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
/* Caja de alto entero y object-fit: con `height: auto` el alto salía 38.27 px
   y, al cargar, el navegador redondeaba y mordía el borde de arriba del ícono
   (12 oct 2026). */
.pan-logo {
  display: block;
  width: 130px;
  height: 39px;
  object-fit: contain;
  object-position: left center;
}
.pan-header__help {
  font-size: .9rem;
  font-weight: 600;
  color: var(--blue);
}

.pan-footer {
  padding-block: 28px 40px;
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
}
.pan-footer a { color: var(--text-muted); }

.pan-cargando {
  padding: 80px 20px;
  color: var(--text-muted);
  text-align: center;
}


/* =============================================================
   2 · ENTRAR · CREAR · RECUPERAR

   Lienzo partido: la marca a la izquierda sobre índigo, el
   formulario a la derecha sobre blanco. En celular la mitad de la
   marca no se enseña: ocuparía la pantalla entera antes del primer
   campo.
   ============================================================= */
.acceso {
  display: grid;
  min-height: calc(100vh - 65px);
  grid-template-columns: 1fr;
}

.acceso__marca { display: none; }

.acceso__lado {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--gutter) 60px;
}

.acceso__caja {
  width: 100%;
  max-width: 420px;
}

.acceso__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.acceso__lead {
  margin: 10px 0 26px;
  color: var(--text-body);
}

/* El formulario no lleva tarjeta: sobre blanco, una tarjeta blanca
   con borde es un marco alrededor de nada. */
.acceso__caja form { margin: 0; }
.acceso__caja .field + .field { margin-top: 16px; }
.acceso__caja .btn--block { margin-top: 22px; }

@media (min-width: 900px) {
  .acceso {
    grid-template-columns: minmax(380px, 46%) 1fr;
    min-height: 100vh;
  }

  /* El lienzo partido ocupa la pantalla entera: el encabezado del
     sitio estorbaría a la mitad izquierda. */
  body:has(#zona-acceso:not([hidden])) #encabezado-sitio,
  body:has(#zona-acceso:not([hidden])) #pie-sitio { display: none; }

  .acceso__marca {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--indigo);
    color: var(--white);
    isolation: isolate;
  }

  /* El campo de puntos. Detrás de todo y sin interacción: es textura,
     no contenido. Si el <canvas> no se dibuja —JS apagado, movimiento
     reducido— queda el índigo plano y no falta nada. */
  .acceso__puntos {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  .acceso__marca-cuerpo {
    padding: 56px clamp(36px, 5vw, 64px);
    max-width: 460px;
  }

  /* El blanco se pone a mano y no con currentColor: el <a> que lo
     envuelve hereda el azul de los enlaces del sitio, y el logo salía
     azul sobre índigo. */
  .acceso__logo {
    display: block;
    width: 148px;
    height: 44px;
    background: var(--white);
    -webkit-mask: url(../assets/logo-horizontal.svg) left center / contain no-repeat;
            mask: url(../assets/logo-horizontal.svg) left center / contain no-repeat;
  }

  .acceso__titulo {
    margin: 44px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 2.6vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.025em;
  }

  .acceso__lista {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
  }
  .acceso__lista li {
    position: relative;
    padding-left: 30px;
    color: rgba(255, 255, 255, .82);
    line-height: 1.45;
  }
  .acceso__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  }
  .acceso__lista li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: .62em;
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(-45deg);
  }

  .acceso__pie {
    margin: 40px 0 0;
    font-size: .88rem;
    color: rgba(255, 255, 255, .6);
  }

  .acceso__lado { padding: 40px; }
}


/* =============================================================
   3 · EL ARMAZÓN DEL CRM
   ============================================================= */
.crm {
  display: block;
  min-height: 100vh;
}

.crm-rail { display: none; }

.crm-cuerpo {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* La barra de arriba se pega: el título dice en qué sección estás y
   el botón de registrar una placa tiene que estar siempre a un dedo
   de distancia. */
.crm-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--gutter);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: var(--border);
}
.crm-top__texto { min-width: 0; }
.crm-top__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.crm-top__sub {
  margin: 3px 0 0;
  font-size: .84rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
/* En un teléfono el subtítulo pelea con los botones y los deja en
   cuatro renglones. La tira de pestañas ya dice en qué sección estás,
   así que ahí sobra. */
@media (max-width: 760px) {
  .crm-top__sub { display: none; }
}

.crm-top__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* --- La tira de pestañas de celular --- */
.crm-tabs {
  position: sticky;
  top: 61px;
  z-index: 19;
  display: flex;
  gap: 6px;
  padding: 10px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--white);
  border-bottom: var(--border);
}
.crm-tabs::-webkit-scrollbar { display: none; }

.crm-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: var(--border);
  border-radius: 999px;
  background: var(--white);
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
}
.crm-tab.is-activo {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--white);
}
.crm-tab .crm-nav__icono { display: none; }
.crm-tab .crm-nav__pro,
.crm-tab .crm-nav__globo { margin-left: 0; }

.crm-lienzo {
  flex: 1;
  padding: 20px var(--gutter) 40px;
  max-width: 1180px;
  width: 100%;
}

.crm-vista { display: block; }

/* -------------------------------------------------------------
   EL TÍTULO DE UN BLOQUE DENTRO DE UNA VISTA  (18 sep 2026)

   Desde que «Mi negocio» apila cuatro secciones —resumen, reseñas,
   analítica y competencia—, el encabezado de la página ya no alcanza
   para decir qué se está viendo: dice «Mi negocio» y debajo van cuatro
   cosas distintas. Esto las separa.

   El primero no lleva margen arriba ni línea: viene pegado al
   encabezado de la página y una raya ahí se lee como un error.
   ------------------------------------------------------------- */
.crm-bloque__titulo {
  margin: 34px 0 14px;
  padding-top: 26px;
  border-top: var(--border);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text-strong);
}

/* El de arriba del todo. Se marca a mano y no con :first-child ni
   :first-of-type: el título ES el primer hijo de CADA sección, así que
   un selector posicional se los llevaría a todos y borraría justo las
   rayas que separan los bloques. */
.crm-bloque__titulo--primero {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.crm-bloque__titulo span {
  display: block;
  margin-top: 3px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-muted);
}

.crm-pie {
  padding: 24px var(--gutter) 32px;
  font-size: .82rem;
  color: var(--text-muted);
  border-top: var(--border);
}
.crm-pie a { color: var(--text-muted); }
.crm-pie p { margin: 0; }

@media (min-width: 1000px) {
  .crm {
    display: grid;
    grid-template-columns: 256px 1fr;
    align-items: start;
  }

  .crm-tabs { display: none; }

  .crm-rail {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100vh;
    padding: 22px 16px;
    background: var(--white);
    border-right: var(--border);
  }

  .crm-rail__logo {
    display: block;
    padding: 0 8px;
    color: var(--indigo);
  }
  .crm-rail__logo img { display: block; width: 122px; height: 36px; object-fit: contain; object-position: left center; }

  .crm-cuenta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: var(--border);
    border-radius: var(--radius-card);
    background: var(--gray-50);
  }
  .crm-cuenta__datos {
    display: grid;
    min-width: 0;
  }
  .crm-cuenta__negocio {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .crm-cuenta__correo {
    font-size: .75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ⚠️ min-height: 0 NO ES ADORNO, es lo que hace que el menú quepa.

     Un hijo de flex arranca con min-height: auto, o sea que se niega a
     medir menos que su contenido. Con `flex: 1` a secas y once
     secciones, el menú no encogía: empujaba el pie —«¿Necesitas
     ayuda?» y «Salir»— fuera de la pantalla, y como la barra mide
     100vh no había manera de bajar a verlos. Se veía como que el menú
     estaba cortado, porque lo estaba.

     Comprobado el 18 sep 2026 en una ventana de 585 px de alto: el
     menú pedía 766 px y se quedaba con lo que había. */
  .crm-nav {
    display: grid;
    /* 4 px y no 2: con once secciones el menú se leía como un bloque
       macizo. Costaba 22 px de alto, que es exactamente lo que el
       scroll de aquí abajo hace que ya no importe. */
    gap: 4px;
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    overflow-y: auto;
    /* Que el scroll del menú no arrastre la página cuando se acaba. */
    overscroll-behavior: contain;
    /* La barra de scroll, delgada y sin robar ancho al texto. */
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }
  .crm-nav::-webkit-scrollbar { width: 6px; }
  .crm-nav::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
  }
  .crm-nav::-webkit-scrollbar-track { background: transparent; }

  .crm-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    position: relative;
    border-radius: var(--radius-btn);
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-body);
    text-decoration: none;
    transition: background .15s var(--ease-suave), color .15s var(--ease-suave);
  }
  .crm-nav__link:hover { background: var(--gray-100); color: var(--text-strong); }
  .crm-nav__link.is-activo {
    background: var(--blue-tint);
    color: var(--blue-dark);
  }
  .crm-nav__link.is-activo .crm-nav__icono { color: var(--blue); }

  /* Los tres grupos —lo de tu negocio, cómo vas, y para crecer— con una
     raya y nada más. Un encabezado por grupo cuesta veinte píxeles de
     alto cada uno, que es justo lo que falta aquí; una raya cuesta uno
     y hace el mismo trabajo de separar.

     La raya va en un ::before y no en el border-top del renglón para
     que no entre en su recuadro: si entrara, al seleccionar esa sección
     el fondo azul se pegaría a la línea y se vería un escalón. */
  .crm-nav__link--grupo { margin-top: 13px; }
  .crm-nav__link--grupo::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 10px;
    right: 10px;
    border-top: var(--border);
  }

  .crm-rail__pie {
    display: grid;
    gap: 10px;
    justify-items: start;
    padding-top: 14px;
    border-top: var(--border);
  }
  .crm-rail__ayuda {
    font-size: .84rem;
    font-weight: 600;
    color: var(--blue);
  }

  .crm-top { padding: 18px 28px; }
  .crm-top__titulo { font-size: 1.5rem; }
  .crm-lienzo { padding: 26px 28px 48px; }
  .crm-pie { padding: 24px 28px 32px; }
}

.crm-nav__icono {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gray-500);
}

/* LAS ETIQUETAS «PRO» SON PARA QUIEN NO LO TIENE.
   A quien ya paga, un «PRO» junto a Sucursales se lee como candado
   y le hace pensar que no la tiene. En cuanto la cuenta es Pro,
   panel.js pone la clase `es-pro` en el <body> y todas se van. El
   chip del plan en la barra lateral NO se toca: ése sí dice lo que
   tiene. */
body.es-pro .crm-nav__pro:not(.crm-nav__pro--max),
body.es-pro .crm-solo-gratis { display: none; }

.crm-nav__pro {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--indigo);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}

/* El globo de reseñas nuevas. Es el único punto rojo del panel, y por
   eso se ve: si todo avisa, nada avisa. */
.crm-nav__globo {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #DC2626;
  font-size: .7rem;
  font-weight: 800;
  color: var(--white);
  text-align: center;
}
.crm-nav__link.is-activo .crm-nav__globo,
.crm-tab.is-activo .crm-nav__globo { background: #DC2626; }
.crm-nav__pro + .crm-nav__globo,
.crm-nav__globo + .crm-nav__pro { margin-left: 6px; }


/* =============================================================
   4 · TARJETAS
   ============================================================= */
.crm-card {
  margin-bottom: 16px;
  padding: 18px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-sm);
}
.crm-card--tabla { padding: 6px 0 0; }

.crm-card__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.crm-card__titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-strong);
}
.crm-card__nota {
  font-size: .78rem;
  color: var(--text-muted);
  text-align: right;
}
.crm-card__link {
  flex-shrink: 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--blue);
}

.crm-ayuda {
  margin: 0 0 14px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-body);
}
.crm-ayuda--marco {
  padding: 12px 14px;
  border-radius: var(--radius-btn);
  background: var(--gray-50);
  border: var(--border);
  font-size: .84rem;
  color: var(--text-muted);
}
.crm-ok {
  margin: 12px 0 0;
  font-size: .86rem;
  font-weight: 600;
  color: #047857;
}
.crm-vacio {
  padding: 44px 20px;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-card);
  color: var(--text-muted);
  text-align: center;
}
.crm-eje {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  font-size: .72rem;
  color: var(--text-muted);
}

@media (min-width: 760px) {
  .crm-card { padding: 22px; }
  .crm-card--tabla { padding: 8px 0 0; }
}

/* Dos columnas en escritorio, una en celular. Nada de tres: con tres,
   una gráfica de treinta barras queda del ancho de un pulgar. */
.crm-dos {
  display: grid;
  gap: 16px;
}
@media (min-width: 1100px) {
  .crm-dos { grid-template-columns: 1.15fr 1fr; }
  .crm-dos > .crm-card { margin-bottom: 0; }
  .crm-dos { margin-bottom: 16px; }
}


/* =============================================================
   5 · LAS CIFRAS DE ARRIBA
   ============================================================= */
.crm-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 760px) {
  .crm-kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

.crm-kpi {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 14px 16px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-sm);
}
.crm-kpi__pie {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.crm-kpi__num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.crm-kpi__delta {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.crm-kpi__delta--sube { color: #047857; }
.crm-kpi__delta--baja { color: #B91C1C; }


/* =============================================================
   6 · TABLAS

   Un renglón es un grid en escritorio y una tarjeta en celular. El
   encabezado de columnas sólo existe arriba de 900 px: en un
   teléfono, cada dato lleva su etiqueta pegada con ::before.
   ============================================================= */
.crm-tabla__cab { display: none; }

.crm-fila {
  border-top: var(--border);
}
.crm-fila:first-child { border-top: 0; }

.crm-fila__datos {
  display: grid;
  gap: 6px 14px;
  padding: 14px 18px;
  align-items: center;
}

.crm-fila__nombre {
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  color: var(--text-strong);
}
.crm-fila__codigo {
  margin: 2px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.crm-fila__destino {
  margin: 4px 0 0;
  font-size: .84rem;
  color: var(--text-body);
  overflow-wrap: anywhere;
}
.crm-fila__ultimo {
  margin: 0;
  padding: 0 18px 14px;
  font-size: .76rem;
  color: var(--text-muted);
}
.crm-fila__num {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.crm-fila__num b {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.crm-fila__num i {
  font-style: normal;
  font-size: .76rem;
  color: var(--text-muted);
}

.crm-num { font-variant-numeric: tabular-nums; }

/* Por qué un número salió en guion, junto al guion. Va en bloque para
   que caiga debajo de la cifra y no le empuje la columna. */
.crm-num__razon {
  display: block;
  font-size: .72rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
  font-variant-numeric: normal;
}

@media (min-width: 900px) {
  .crm-tabla__cab {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) minmax(160px, 1.6fr) 96px 120px 84px;
    gap: 14px;
    padding: 6px 18px 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: var(--border);
  }
  .crm-tabla__cab--suc {
    grid-template-columns: minmax(130px, 2fr) repeat(6, minmax(62px, 1fr));
    gap: 10px;
    letter-spacing: .02em;
  }
  .crm-tabla__cab .crm-num { text-align: right; }

  .crm-fila__datos {
    grid-template-columns: minmax(150px, 1.2fr) minmax(160px, 1.6fr) 96px 120px 84px;
    padding: 12px 18px;
  }
  .crm-fila__datos--suc {
    grid-template-columns: minmax(130px, 2fr) repeat(6, minmax(62px, 1fr));
    gap: 10px;
  }
  .crm-fila__datos--suc .crm-num { text-align: right; }
  .crm-fila__num { justify-content: flex-end; }
  .crm-fila__destino { margin: 0; }
  .crm-fila__ultimo { padding-left: 18px; }
  .crm-fila:hover { background: #FCFDFF; }
}

/* En celular cada dato dice qué es. Sin esto, una columna de números
   sueltos no significa nada. */
@media (max-width: 899px) {
  .crm-fila__datos--suc .crm-num::before {
    content: attr(data-col) ": ";
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
  }
  .crm-fila__datos--suc { gap: 4px; }
  .crm-fila__datos { grid-template-columns: 1fr auto; }
  .crm-fila__pieza { grid-column: 1 / -1; }
  .crm-fila__destino { grid-column: 1 / -1; }
  .crm-fila__datos--suc .crm-num { grid-column: 1 / -1; }
}

/* La barra de proporción del comparativo de sucursales. */
.crm-barra {
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
}
.crm-barra__relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
}


/* =============================================================
   7 · GRÁFICAS

   Sin librería: la CSP del sitio trae script-src 'self' y ningún CDN
   entra. Las barras son divs con una variable CSS; la línea es un
   <svg> que dibuja panel.js con dos etiquetas <polyline>.
   ============================================================= */
.crm-grafica {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 132px;
  padding-top: 6px;
}
.crm-barra-dia {
  position: relative;
  flex: 1;
  height: 100%;
  border-radius: 3px;
}
.crm-barra-dia::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--alto, 0%);
  min-height: 3px;
  border-radius: 3px;
  background: var(--blue);
  transition: height .5s var(--ease-suave);
}
.crm-barra-dia--cero::after { background: var(--gray-200); }
.crm-barra-dia:hover::after { background: var(--blue-dark); }

/* La chispa del renglón de cada placa: la misma idea, más chica y sin
   tanto contraste, porque ahí es un adorno con datos, no la gráfica. */
.crm-chispa {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 30px;
  min-width: 90px;
}
.crm-chispa .crm-barra-dia { border-radius: 2px; }
.crm-chispa .crm-barra-dia::after { min-height: 2px; border-radius: 2px; background: #93B4FB; }
.crm-chispa .crm-barra-dia--cero::after { background: var(--gray-200); }

.crm-linea { display: block; width: 100%; height: auto; }
.crm-linea__area { fill: rgba(37, 99, 235, .10); stroke: none; }
.crm-linea__trazo {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crm-linea__punto { fill: var(--blue); }
.crm-linea__reja { stroke: var(--gray-200); stroke-width: 1; }
.crm-linea__marca {
  font-size: 10px;
  fill: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .crm-barra-dia::after { transition: none; }
}


/* =============================================================
   8 · RESEÑAS
   ============================================================= */
.crm-filtros {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.crm-filtros::-webkit-scrollbar { display: none; }
.crm-filtro {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: var(--border);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
}
.crm-filtro.is-activo {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--white);
}

.crm-negocio__cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.crm-negocio__nombre { font-size: 1.1rem; }
.crm-negocio__piezas {
  margin: 3px 0 0;
  font-size: .8rem;
  color: var(--text-muted);
}

/* El bloque de la calificación: el número grande, las estrellas, y
   cómo se movió en el mes. */
.crm-nota-caja {
  display: grid;
  gap: 14px;
  margin: 16px 0 18px;
  padding: 16px;
  border: var(--border);
  border-radius: var(--radius-card);
  background: var(--gray-50);
}
@media (min-width: 620px) {
  .crm-nota-caja { grid-template-columns: auto 1fr; align-items: center; gap: 26px; }
}

.crm-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.crm-nota__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.crm-nota__estrellas {
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--gold);
}
.crm-nota__total {
  width: 100%;
  font-size: .82rem;
  color: var(--text-muted);
}
.crm-nota__delta {
  padding: 3px 9px;
  border-radius: 999px;
  background: #ECFDF5;
  font-size: .78rem;
  font-weight: 700;
  color: #047857;
}
.crm-nota__delta--cero { background: var(--gray-100); color: var(--text-muted); }
.crm-nota__delta--baja { background: #FEF2F2; color: #B91C1C; }

/* El reparto de estrellas de lo que está a la vista. */
.crm-reparto { display: grid; gap: 5px; }
.crm-reparto__fila {
  display: grid;
  grid-template-columns: 34px 1fr 22px;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  color: var(--text-muted);
}
.crm-reparto__pista {
  height: 6px;
  border-radius: 999px;
  background: var(--gray-200);
  overflow: hidden;
}
.crm-reparto__relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
}

.crm-resena {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: var(--border);
}
.crm-resena:first-child { border-top: 0; padding-top: 0; }

.crm-resena__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-tint);
  background-size: cover;
  background-position: center;
  font-size: .9rem;
  font-weight: 700;
  color: var(--blue-dark);
}

.crm-resena__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .88rem;
}
.crm-resena__autor { color: var(--text-strong); }
.crm-resena__estrellas { color: var(--gold); letter-spacing: .06em; }
.crm-resena__cuando { font-size: .78rem; color: var(--text-muted); }

.crm-resena__texto {
  margin: 7px 0 0;
  color: var(--text-body);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.crm-resena__texto:empty { display: none; }

.crm-resena__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.crm-resena__enlace {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-muted);
}
.crm-resena__enlace:hover { color: var(--blue); }

.crm-etiqueta {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.crm-etiqueta--nueva { background: #FEF2F2; color: #B91C1C; }

/* El borrador de respuesta. Se edita antes de copiarlo: nadie manda
   tal cual lo que le escribió una máquina, y tampoco debería. */
.crm-borrador {
  margin-top: 14px;
  padding: 14px;
  border: var(--border);
  border-radius: var(--radius-card);
  background: var(--blue-tint);
}
.crm-borrador__etiqueta {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blue-dark);
}
.crm-borrador__texto {
  width: 100%;
  padding: 12px;
  border: 1px solid #D6E2FE;
  border-radius: var(--radius-btn);
  background: var(--white);
  font: inherit;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-strong);
  resize: vertical;
}
.crm-borrador__texto:focus-visible { outline: none; box-shadow: var(--ring); }
.crm-borrador__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.crm-borrador__ir {
  font-size: .84rem;
  font-weight: 600;
  color: var(--blue-dark);
}


/* =============================================================
   9 · CANDADOS, ESTADOS Y CONTROLES
   ============================================================= */
.crm-candado {
  padding: 28px 22px;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-card);
  background: var(--white);
  text-align: center;
}
.crm-candado__icono {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--blue-tint);
}
.crm-candado__icono svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crm-candado__titulo {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-strong);
}
.crm-candado__texto {
  margin: 0 auto 16px;
  max-width: 48ch;
  color: var(--text-body);
  line-height: 1.55;
}
/* La lista va centrada pero alineada por la izquierda, y en su propio
   renglón: en línea con el botón, los dos se pelean el centro. */
.crm-candado .crm-lista-check {
  display: grid;
  gap: 8px;
  width: fit-content;
  margin: 0 auto 22px;
  text-align: left;
}

.crm-lista-check {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.crm-lista-check li {
  position: relative;
  padding-left: 24px;
  font-size: .9rem;
  color: var(--text-body);
}
.crm-lista-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .45em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

.crm-estado {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.crm-estado--espera { background: #FFFBEB; color: #92400E; }
.crm-estado--vivo { background: #ECFDF5; color: #047857; }

/* El interruptor. Es una casilla de verdad debajo: así se maneja con
   el teclado y el lector de pantalla sin escribir una sola línea de
   accesibilidad a mano. */
.crm-switch {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 12px;
  margin-bottom: 20px;
  cursor: pointer;
}
.crm-switch input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}
.crm-switch__pista {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--gray-300);
  transition: background .2s var(--ease-suave);
}
.crm-switch__pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(30, 27, 75, .3);
  transition: transform .2s var(--ease-suave);
}
.crm-switch input:checked + .crm-switch__pista { background: var(--blue); }
.crm-switch input:checked + .crm-switch__pista::after { transform: translateX(18px); }
.crm-switch input:focus-visible + .crm-switch__pista { box-shadow: var(--ring); }
.crm-switch__texto {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-strong);
}
.crm-switch__ayuda {
  display: block;
  margin-top: 2px;
  font-size: .82rem;
  font-weight: 400;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .crm-switch__pista,
  .crm-switch__pista::after { transition: none; }
}

/* Los botones del plan y del candado. En celular se apilan y ocupan
   todo el ancho: un botón de pago a medio ancho se ve como un enlace
   más. */
.crm-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
@media (max-width: 520px) {
  .crm-acciones { display: grid; }
  .crm-acciones .btn { width: 100%; }
}

.crm-candado__pie {
  margin: 14px 0 0;
  font-size: .86rem;
}

.crm-an__cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (min-width: 700px) {
  /* Los botones del plan y del candado. En celular se apilan y ocupan
   todo el ancho: un botón de pago a medio ancho se ve como un enlace
   más. */
.crm-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
@media (max-width: 520px) {
  .crm-acciones { display: grid; }
  .crm-acciones .btn { width: 100%; }
}

.crm-candado__pie {
  margin: 14px 0 0;
  font-size: .86rem;
}

.crm-an__cifras { grid-template-columns: repeat(4, 1fr); }
}
.crm-an__cifra {
  padding: 12px 14px;
  border: var(--border);
  border-radius: var(--radius-btn);
  background: var(--gray-50);
}
.crm-an__cifra b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -.02em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.crm-an__cifra span {
  font-size: .76rem;
  color: var(--text-muted);
}


/* =============================================================
   10 · LO QUE VIENE DE ANTES

   Clases del panel viejo que siguen sirviendo tal cual: el editor de
   destino, los tres caminos para registrar una placa, los errores,
   los chips. No se renombraron porque funcionan y porque renombrar
   por gusto es como se rompe lo que ya andaba.
   ============================================================= */
.pan-ayuda {
  margin: 6px 0 0;
  font-size: .82rem;
  color: var(--text-muted);
}

.pan-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid #FCA5A5;
  border-radius: var(--radius-btn);
  background: #FEF2F2;
  font-size: .88rem;
  color: #991B1B;
}

.pan-nota {
  margin-top: 18px;
  font-size: .86rem;
  color: var(--text-muted);
  text-align: center;
}
.pan-nota--izq { text-align: left; margin-top: 14px; }

.pan-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pan-link:hover { color: var(--blue-dark); }

.pan-opcional { font-weight: 400; color: var(--text-muted); }

/* Monoespaciada: el código son cuatro caracteres sueltos y se teclean
   mirándolos uno por uno contra la placa. */
.pan-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em;
}
.pan-input--codigo {
  font-size: 1.5rem;
  letter-spacing: .35em;
  text-align: center;
}

.pan-aviso {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-btn);
  background: #FFFBEB;
  font-size: .88rem;
  color: #92400E;
}

.pan-agregar {
  border-color: #D6E2FE;
  background: var(--blue-tint);
}

/* Los tres pasos de registrar: Código → Negocio → Nombre. El que va
   en azul es el de ahora; los de antes se quedan con palomita. */
.pan-pasos {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.pan-pasos__paso {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-top: 8px;
  border-top: 3px solid var(--gray-200);
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-500);
}
.pan-pasos__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gray-200);
  font-size: .75rem;
  color: var(--gray-700, #374151);
}
.pan-pasos__paso.is-actual { border-top-color: var(--blue); color: var(--blue-dark); }
.pan-pasos__paso.is-actual .pan-pasos__num { background: var(--blue); color: #fff; }
.pan-pasos__paso.is-hecho { border-top-color: var(--blue); }
.pan-pasos__paso.is-hecho .pan-pasos__num { background: var(--blue-dark); color: #fff; }
.pan-pasos__paso.is-hecho .pan-pasos__num::before { content: "✓"; }
.pan-pasos__paso.is-hecho .pan-pasos__num { font-size: 0; }
.pan-pasos__paso.is-hecho .pan-pasos__num::before { font-size: .75rem; }

.pan-form-linea {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto;
  align-items: end;
}
.pan-form-linea .field { margin: 0; }
@media (max-width: 520px) {
  .pan-form-linea { grid-template-columns: 1fr; }
  .pan-form-linea > .btn { width: 100%; }
}

.pan-google { margin-bottom: 4px; }

/* El esqueleto del botón de Google. Ocupa su lugar mientras el
   script de Google baja y dibuja: un hueco vacío durante dos
   segundos se lee como que la opción no existe. */
.pan-google--esperando > div:first-child {
  height: 44px;
  border-radius: var(--radius-btn);
  background: var(--gray-100);
  animation: pan-latido 1.4s ease-in-out infinite;
}
@keyframes pan-latido {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .pan-google--esperando > div:first-child { animation: none; }
}
.pan-google > div { display: flex; justify-content: center; }
/* El iframe de Google hereda el modo oscuro y se pinta con un recuadro
   blanco alrededor del botón; en claro su fondo queda transparente. */
.pan-google iframe { color-scheme: light; }
/* Dentro de Instagram o Facebook: en lugar del botón, dónde sí se puede. */
.pan-google__nota {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--gray-500);
}
.pan-separador {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: .8rem;
  color: var(--text-muted);
}
.pan-separador::before,
.pan-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.pan-nfc { margin-top: 18px; }
.pan-nfc__estado {
  margin: 10px 0 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--blue-dark);
  text-align: center;
}
.pan-nfc__instruccion {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed #C7D7FE;
  border-radius: var(--radius-btn);
  background: var(--white);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-body);
}
.pan-nfc__instruccion strong { color: var(--indigo); }

.pan-alterna { margin-top: 16px; }
.pan-alterna__resumen {
  font-size: .88rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
}
.pan-alterna__resumen:hover { color: var(--blue-dark); }
.pan-alterna .field { margin-top: 14px; }

.pan-estado {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
}
.pan-estado--fria { background: #EFF6FF; color: #1D4ED8; }
.pan-estado--nueva { background: #FFFBEB; color: #92400E; }

.pan-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gray-100);
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-body);
}
.pan-chip--pro {
  background: var(--indigo);
  color: var(--white);
}

/* --- El editor de una placa --- */
.pan-editor__caja {
  margin: 0 18px 18px;
  padding: 18px;
  border: var(--border);
  border-radius: var(--radius-card);
  background: var(--gray-50);
}
.pan-editor__titulo {
  margin: 0 0 12px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-strong);
}
.pan-editor__bloque + .pan-editor__bloque {
  margin-top: 22px;
  padding-top: 22px;
  border-top: var(--border);
}
.pan-editor__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pan-editor__pie { margin-top: 16px; }

.pan-resultados {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border: var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  overflow: hidden;
}
.pan-resultados li + li { border-top: var(--border); }
.pan-resultado {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pan-resultado:hover,
.pan-resultado:focus-visible { background: var(--blue-tint); }
.pan-resultado__nombre {
  display: block;
  font-weight: 600;
  color: var(--text-strong);
}
.pan-resultado__dir {
  display: block;
  font-size: .8rem;
  color: var(--text-muted);
}

/* --- La lista del plan --- */
.pan-plan__lista {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.pan-plan__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--text-body);
}
.pan-plan__item--fuera { color: var(--text-muted); }
.pan-plan__marca {
  flex-shrink: 0;
  width: 18px;
  font-weight: 800;
  color: var(--blue);
}
.pan-plan__item--fuera .pan-plan__marca { color: var(--gray-300); }
.pan-plan__eta {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray-100);
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.pan-plan__eta--pro { background: var(--indigo); color: var(--white); }

@media (min-width: 1000px) {
  .pan-solo-movil { display: none; }
}


/* =============================================================
   11 · APARECER

   Lo mismo que hace js/movimiento.js en la landing, en CSS y sin
   observador: aquí el contenido lo pinta el JavaScript, así que
   basta con que cada tarjeta entre al insertarse.
   ============================================================= */
@keyframes crm-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.crm-card,
.crm-kpi {
  animation: crm-entra .4s var(--ease-suave) both;
}
.crm-kpi:nth-child(2) { animation-delay: .04s; }
.crm-kpi:nth-child(3) { animation-delay: .08s; }
.crm-kpi:nth-child(4) { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .crm-card,
  .crm-kpi { animation: none; }
}


/* -------------------------------------------------------------
   EL BALANCE DE SENTIMIENTO

   Tres colores y no más. Verde, ámbar y rojo es el semáforo que
   cualquiera lee sin leyenda — pero la leyenda va igual, con el
   número y el porcentaje, porque el color solo no es accesible y
   porque el dueño quiere el número, no la sensación.
   ------------------------------------------------------------- */

.crm-sent__barra {
  display: flex;
  height: 14px;
  margin: 4px 0 16px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gray-100);
}

.crm-sent__tramo { display: block; height: 100%; }
.crm-sent__tramo--bien  { background: #15803D; }
.crm-sent__tramo--tibio { background: #D97706; }
.crm-sent__tramo--mal   { background: #DC2626; }

.crm-sent__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.crm-sent__leyenda li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: .9rem;
}

.crm-sent__leyenda b { font-size: 1.05rem; color: var(--text-strong); }
.crm-sent__leyenda em { font-style: normal; color: var(--text-muted); font-size: .82rem; }

.crm-sent__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
}

.crm-sent__punto--bien  { background: #15803D; }
.crm-sent__punto--tibio { background: #D97706; }
.crm-sent__punto--mal   { background: #DC2626; }

/* -------------------------------------------------------------
   LAS BARRAS POR MES

   Contestan «¿voy mejorando?», que no es lo mismo que «¿cómo estoy?».
   Un negocio con 4.2 puede llevar tres meses recibiendo puros cincos
   sin que la calificación se mueva, porque el promedio arrastra todo
   el pasado. Aquí sí se ve.

   Se desplazan en horizontal dentro de su caja: doce meses no caben
   en un teléfono, y encogerlos hasta que quepan los vuelve ilegibles.
   ------------------------------------------------------------- */

.crm-sent__meses {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 130px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.crm-mes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1 0 34px;
  height: 100%;
}

.crm-mes__pila {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: var(--gray-100);
}

.crm-mes__parte { display: block; width: 100%; }

/* Del verde de cinco estrellas al rojo de una. Los intermedios no son
   un degradado bonito: el 3 tiene que leerse como «ni fu ni fa» y para
   eso es ámbar, no verde claro. */
.crm-mes__parte--e5 { background: #15803D; }
.crm-mes__parte--e4 { background: #4D9F6A; }
.crm-mes__parte--e3 { background: #D97706; }
.crm-mes__parte--e2 { background: #E4572E; }
.crm-mes__parte--e1 { background: #DC2626; }

.crm-mes__etiqueta {
  font-size: .72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   LOS TEMAS

   Cada chip es un BOTÓN, no una etiqueta, y eso tiene que verse: al
   tocarlo se va a la lista de reseñas filtrada por ese tema. Un
   número que no se puede abrir es un número en el que hay que creer
   a ciegas.
   ------------------------------------------------------------- */

.crm-temas__resumen {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--blue-tint);
  color: var(--text-strong);
  font-size: .95rem;
  line-height: 1.6;
}

.crm-temas__lados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.crm-temas__titulo {
  margin: 0 0 10px;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.crm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.crm-chip b {
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  opacity: .75;
}

.crm-chip--bien { background: #ECFDF5; border-color: #C4E9D6; color: #15803D; }
.crm-chip--mal  { background: #FEF2F2; border-color: #F6CFCF; color: #B91C1C; }

.crm-chip--bien:hover,
.crm-chip--mal:hover { transform: translateY(-1px); box-shadow: var(--sombra-sm, 0 2px 6px rgba(0,0,0,.08)); }

.crm-chip--bien:focus-visible,
.crm-chip--mal:focus-visible { outline: none; box-shadow: var(--ring); }

/* El de «nada que se repita» no es un botón y no debe parecerlo. */
.crm-chip--vacio {
  background: var(--gray-100);
  color: var(--text-muted);
  cursor: default;
}

.crm-temas__rehacer { font-size: .85rem; }

/* El aviso de que la lista de reseñas está filtrada por un tema. */
.crm-filtrotema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding: 11px 15px;
  border-radius: var(--radius);
  background: var(--blue-tint);
  font-size: .9rem;
  color: var(--text-strong);
}

/* -------------------------------------------------------------
   LA COMPETENCIA
   ------------------------------------------------------------- */

.crm-comps {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.crm-comp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}

.crm-comp__datos { flex: 1 1 200px; min-width: 0; }

.crm-comp__nombre {
  margin: 0;
  font-weight: 600;
  color: var(--text-strong);
}

.crm-comp__detalle {
  margin: 2px 0 0;
  font-size: .82rem;
  color: var(--text-muted);
  /* Las direcciones de Google son largas; una de tres renglones
     empuja las cifras fuera de la vista. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-comp__cifras {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.crm-comp__calif { font-weight: 600; color: var(--text-strong); }
.crm-comp__total { font-size: .85rem; color: var(--text-muted); }

.crm-comp__quitar {
  padding: 6px 11px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-btn);
  background: var(--white);
  font: inherit;
  font-size: .82rem;
  color: var(--text-muted);
  cursor: pointer;
}

.crm-comp__quitar:hover { border-color: #F6CFCF; color: #B91C1C; }
.crm-comp__quitar:focus-visible { outline: none; box-shadow: var(--ring); }

/* El renglón propio, en la tabla comparativa. Sin esto, en una lista
   de siete negocios nadie encuentra el suyo. */
.crm-fila--mio { background: var(--blue-tint); }

.crm-tuyo {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: .68rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* Las columnas de la tabla comparativa de competencia. Cuatro, no seis
   como la de sucursales: aquí sólo se comparan calificación, reseñas y
   movimiento, que es lo único que Google publica de un negocio ajeno. */
@media (min-width: 900px) {
  .crm-tabla__cab--comp,
  .crm-fila__datos--comp {
    grid-template-columns: minmax(200px, 2.4fr) 120px 110px 104px;
  }
  .crm-fila__datos--comp .crm-num { text-align: right; }
}

@media (max-width: 899px) {
  .crm-fila__datos--comp .crm-num::before {
    content: attr(data-col) ": ";
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
  }
  .crm-fila__datos--comp { gap: 4px; }
  .crm-fila__datos--comp .crm-num { grid-column: 1 / -1; }
}

/* =============================================================
   17 · LOS TRES PRODUCTOS  (15 sep 2026)

   Elegir qué es cada pieza al registrarla, y la etiqueta que lo dice
   en cada renglón. Las fotos son las mismas de la tienda: el cliente
   reconoce la pieza que tiene en la mano, no un ícono que haya que
   interpretar.

   SIN :has(). El marco de la opción elegida es un <span> hermano del
   radio y se enciende con «:checked ~». Hace lo mismo y funciona en
   el Chrome viejo de un teléfono de mostrador.
   ============================================================= */
.pan-tipos {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.pan-tipos legend { padding: 0; margin-bottom: 8px; }

.pan-tipos__opciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 480px;
}
.pan-editor__bloque .pan-tipos__opciones { margin-top: 10px; }

.pan-tipo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-btn);
  background: var(--white);
  text-align: center;
  cursor: pointer;
}
.pan-tipo:hover { border-color: var(--gray-300); }

/* El radio de verdad sigue ahí, encima de toda la tarjeta y
   transparente: el teclado y el lector de pantalla lo recorren como
   cualquier radio, y tocar en cualquier parte lo marca. */
.pan-tipo__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pan-tipo__marco {
  position: absolute;
  inset: -1px;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pan-tipo__radio:checked ~ .pan-tipo__marco {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.pan-tipo__radio:focus-visible ~ .pan-tipo__marco {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.pan-tipo__foto {
  width: 56px;
  height: 56px;
  object-fit: contain;
  pointer-events: none;
}
.pan-tipo__nombre {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-strong);
  pointer-events: none;
}
.pan-tipo__radio:checked ~ .pan-tipo__nombre { color: var(--blue-dark); }

@media (prefers-reduced-motion: reduce) {
  .pan-tipo__marco { transition: none; }
}

/* La etiqueta de cada renglón. Un punto de color por tipo, para que
   una lista de veinte se lea de un vistazo sin leer cada palabra. */
.crm-tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-body);
}
.crm-tipo::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gray-300);
}
.crm-tipo--placa::before { background: var(--blue); }
.crm-tipo--sobremesa::before { background: var(--indigo); }
.crm-tipo--tarjeta::before { background: #93B4FB; }
.crm-tipo--sin { color: #92400E; }
.crm-tipo--sin::before { background: #F59E0B; }

/* =============================================================
   18 · DESDE CUÁNDO SE COMPARA, Y LAS RESEÑAS DE LA COMPETENCIA
   (15 sep 2026)
   ============================================================= */
.crm-rango {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-bottom: 16px;
  padding: 14px 18px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-sm);
}
.crm-rango__campo {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.crm-rango__etiqueta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.crm-rango__sel,
.crm-rango__fecha {
  min-width: 190px;
  margin: 0;
}
.crm-rango__nota {
  flex: 1 1 260px;
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--text-body);
}
@media (max-width: 520px) {
  .crm-rango__campo { flex: 1 1 100%; }
  .crm-rango__sel,
  .crm-rango__fecha { min-width: 0; width: 100%; }
}

.crm-comp__ver {
  margin-top: 4px;
  font-size: .82rem;
}
.crm-comp__resenas {
  flex: 1 1 100%;
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: var(--border);
}
.crm-comp__resenas .crm-ayuda { margin: 6px 0 0; }

/* =============================================================
   MI CUENTA  (17 sep 2026)
   ============================================================= */

/* La ruedita de ajustes de arriba. Un blanco de 40 px aunque el ícono
   mida 20: se toca con el pulgar. */
.crm-engrane {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text-muted);
  transition: color .15s ease, border-color .15s ease, transform .3s ease;
}
.crm-engrane .crm-nav__icono { width: 20px; height: 20px; }
.crm-engrane:hover { color: var(--blue); border-color: var(--blue); }
.crm-engrane:hover .crm-nav__icono { transform: rotate(45deg); }
.crm-engrane .crm-nav__icono { transition: transform .3s ease; }
.crm-engrane.is-activo { color: var(--blue); border-color: var(--blue); }
.crm-engrane:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .crm-engrane .crm-nav__icono { transition: none; }
}

#form-perfil .field__input[readonly] {
  background: var(--gray-50);
  color: var(--text-muted);
}
#form-perfil, #form-contrasena { max-width: 460px; }

/* Plan y pagos: renglones de «dato · valor». */
.crm-datos { margin: 0 0 16px; }
.crm-datos > div {
  display: grid;
  grid-template-columns: minmax(110px, 34%) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: var(--border);
}
.crm-datos > div:first-child { border-top: 0; padding-top: 0; }
.crm-datos dt { font-size: .86rem; color: var(--text-muted); }
.crm-datos dd { margin: 0; font-size: .92rem; font-weight: 600; color: var(--text-strong); }

.crm-subtitulo {
  margin: 22px 0 8px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.crm-facturas { margin: 0; padding: 0; list-style: none; }
.crm-facturas li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: var(--border);
  font-size: .9rem;
}
.crm-facturas b { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-facturas__estado { font-size: .78rem; color: #92400E; }
.crm-facturas__estado.is-pagado { color: #047857; }
@media (max-width: 520px) {
  .crm-facturas li { grid-template-columns: 1fr auto; gap: 4px 12px; }
}

/* En celular la ruedita reemplaza al «Salir» de arriba (ver el
   comentario en dashboard/index.html). */
#btn-salir-movil { display: none; }
.crm-top__titulo { overflow-wrap: anywhere; }

/* Quién puede entrar a la cuenta (17 sep 2026) */
.crm-accesos { margin: 4px 0 18px; padding: 0; list-style: none; }
.crm-accesos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: var(--border);
}
.crm-accesos li:first-child { border-top: 0; }
.crm-accesos__datos { display: grid; gap: 2px; min-width: 0; }
.crm-accesos__datos b { font-size: .92rem; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.crm-accesos__datos span { font-size: .8rem; color: var(--text-muted); }
.crm-accesos .btn { flex: 0 0 auto; }


/* =============================================================
   LA TARJETA DE FIDELIDAD  (17 sep 2026)

   El taller: a la izquierda lo que se está haciendo, a la derecha
   los controles. En celular se apila, y la VISTA PREVIA VA ARRIBA:
   quien está eligiendo un color tiene que verlo sin bajar la
   pantalla, o elige a ciegas.
   ============================================================= */
.fid-taller {
  display: grid;
  gap: 22px;
}

@media (min-width: 900px) {
  .fid-taller {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }
  /* En escritorio la previa se queda pegada mientras se baja por el
     formulario: lo que se está cambiando no se puede ir de la vista. */
  .fid-previa { position: sticky; top: 12px; }
}

.fid-previa__pie { text-align: center; margin-top: 10px; }

/* --- La tarjeta de la vista previa -----------------------------
   Ya no tiene estilos propios: usa las clases tar-* de
   css/tarjeta.css, las mismas de la tarjeta que ve el cliente, que el
   dashboard carga a propósito. Hasta el 21 sep 2026 aquí había una
   copia (.fid-tarjeta, .fid-sello) y ya se había separado de la de
   verdad: la previa no enseñaba ni el QR ni la franja. */
.fid-previa .tar-tarjeta { transition: background .25s var(--ease-out); }

/* --- El formulario -------------------------------------------- */
.fid-forma { display: grid; gap: 4px; }

.fid-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fid-logo__campo { font-size: .86rem; max-width: 100%; }

/* La paleta. Cerrada a propósito (ver panel.js): un selector libre
   acaba en amarillo con letras blancas. */
.fid-colores { display: flex; flex-wrap: wrap; gap: 9px; }

.fid-color {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid var(--gray-200);
  cursor: pointer;
  padding: 0;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}

.fid-color:hover { transform: translateY(-1px); }
.fid-color:focus-visible { outline: none; box-shadow: var(--ring); }
.fid-color.is-elegido {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}

/* --- El color libre ---

   La rueda es el <input type="color"> del sistema. Viene con un
   recuadro y un borde propios de cada navegador, así que se le quitan y
   se le pone el nuestro: si no, al lado de los quince atajos parece de
   otro programa. */
.fid-color-libre {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.fid-color-libre__rueda {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-body);
  padding: 7px 12px 7px 7px;
  border: var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  transition: border-color .15s var(--ease-suave);
}
.fid-color-libre__rueda:hover { border-color: var(--gray-300); }
.fid-color-libre__rueda:focus-within { outline: none; box-shadow: var(--ring); }

.fid-color-libre__rueda input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.fid-color-libre__rueda input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.fid-color-libre__rueda input[type="color"]::-webkit-color-swatch {
  border: 2px solid var(--gray-200);
  border-radius: 10px;
}
.fid-color-libre__rueda input[type="color"]::-moz-color-swatch {
  border: 2px solid var(--gray-200);
  border-radius: 10px;
}

.fid-color-libre__hex { display: grid; gap: 4px; }
.fid-color-libre__hex .field__input {
  width: 9.5ch;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  text-transform: uppercase;
}

/* El aviso de que la fecha elegida es anterior a lo que medimos.
   Ámbar y no rojo: no es un error, es que no hay con qué comparar. */
.crm-ayuda--ojo { color: #B45309; }

/* Subir de 9 a 10 en un teléfono no debería costar abrir el teclado. */
.fid-cuenta { display: flex; align-items: center; gap: 8px; }

.fid-cuenta__btn {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--white);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-strong);
  cursor: pointer;
}

.fid-cuenta__btn:hover { background: var(--gray-50); }
.fid-cuenta__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.fid-cuenta__campo { max-width: 100px; text-align: center; }

/* --- Sellar ---------------------------------------------------- */
.fid-sellar { display: flex; gap: 10px; flex-wrap: wrap; }

.fid-sellar__campo {
  flex: 1 1 160px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  font-size: 1.05rem;
}

.fid-resultado {
  margin-top: 14px;
  border-radius: var(--radius);
  border: var(--border);
  background: var(--gray-50);
  padding: 12px 14px;
  display: grid;
  gap: 2px;
}

.fid-resultado strong { font-size: 1rem; color: var(--text-strong); }
.fid-resultado span { font-size: .88rem; color: var(--text-body); }

.fid-resultado--premio {
  background: #ECFDF5;
  border-color: #A7F3D0;
}
.fid-resultado--premio strong { color: #065F46; }
.fid-resultado--premio span { color: #047857; }

/* --- La liga pública ------------------------------------------- */
.fid-liga { display: flex; gap: 10px; flex-wrap: wrap; }
.fid-liga .field__input { flex: 1 1 220px; font-size: .86rem; }
.fid-liga .btn { flex: 0 0 auto; }

/* --- El QR de la tarjeta ---

   El marco es blanco SIEMPRE, no un gris del tema: el QR trae su zona
   blanca dentro del SVG y si la tarjeta de atrás fuera gris se
   confundiría con el símbolo. Un QR sobre gris claro escanea, sobre
   gris medio ya no, y aquí no hay forma de saber en qué tema lo está
   viendo. Blanco y se acabó. */
.fid-qr {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.fid-qr__marco {
  flex: 0 0 auto;
  width: 188px;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  line-height: 0;
}
.fid-qr__marco svg { width: 100%; height: auto; display: block; }
.fid-qr__lado { flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px; }
.fid-qr__lado .btn { align-self: flex-start; }

.fid-mas { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.fid-mas__abre {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-body);
  list-style: none;
}
.fid-mas__abre::-webkit-details-marker { display: none; }
/* La flechita se dibuja aquí para que apunte distinto abierta y
   cerrada: sin ella un <summary> parece un renglón muerto. */
.fid-mas__abre::before { content: "▸ "; color: var(--blue); }
.fid-mas[open] .fid-mas__abre::before { content: '▾ '; }
.fid-mas__abre:hover { color: var(--text-strong); }
.fid-mas > .pan-ayuda { margin: 10px 0 12px; }

@media (max-width: 420px) {
  .fid-qr__marco { width: 100%; }
}

/* =============================================================
   EL PLAN MAX

   `es-pro` la tienen también las cuentas Max —es «ya paga»—, así que
   la etiqueta de Max NO se puede esconder con esa clase: a un Pro
   hay que seguirle diciendo qué secciones son del Max. Por eso cada
   etiqueta se apaga con la suya.
   ============================================================= */
body.es-pro .crm-nav__pro--max { display: inline-block; }
body.es-max .crm-nav__pro--max { display: none; }

.crm-nav__pro--max,
.pan-chip--max,
.pan-plan__eta--max {
  background: linear-gradient(135deg, #7C3AED, #2563EB);
  color: var(--white);
}


/* =============================================================
   EL GESTOR DE REDES  (Max · 17 sep 2026)
   ============================================================= */

/* --- Las conexiones ------------------------------------------- */
.red-cuentas { list-style: none; margin: 14px 0 0; padding: 0; }

.red-cuenta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: var(--border);
}
.red-cuenta:first-child { border-top: 0; }

.red-cuenta__quien { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.red-cuenta__quien b { font-size: .95rem; font-weight: 600; color: var(--text-strong); }

.red-cuenta__pie {
  font-size: .8rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.red-cuenta__pie--espera { color: #92400E; }
.red-cuenta__pie--aviso { color: #B4232A; }

.red-cuenta .btn { flex: 0 0 auto; }

/* --- Subir el video -------------------------------------------- */
.red-archivo { font-size: .86rem; max-width: 100%; }

.red-subida { margin-top: 10px; display: grid; gap: 6px; }

.red-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
}

.red-barra__hilo {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--blue);
  transition: width .25s var(--ease-out);
}

.red-subida__texto { font-size: .8rem; color: var(--text-muted); }

/* --- Dónde y cuándo -------------------------------------------- */
.red-elegir { display: flex; flex-wrap: wrap; gap: 10px; }

.red-marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: var(--border);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
  background: var(--white);
}

.red-marca:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-tint);
  color: var(--blue-dark);
}

/* Una red sin conectar se enseña, pero no se puede marcar: esconderla
   dejaría al cliente preguntándose dónde está TikTok. */
.red-marca--fuera { opacity: .5; cursor: not-allowed; }

.red-cuando { display: grid; gap: 8px; }

.red-opcion {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .92rem;
  color: var(--text-strong);
  cursor: pointer;
}

/* --- Programar: el calendario (21 sep 2026) ---------------------
   El mes a la izquierda, las horas del día elegido a la derecha: la
   forma de Calendly, con el azul de TapUp. Los días que se pueden
   elegir llevan fondo azul claro y los que no, nada — así se ve de un
   vistazo qué está disponible, sin leer. */
.red-agenda {
  margin-top: 12px;
  max-width: 560px;
  display: grid;
  gap: 18px;
  padding: 16px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
.red-agenda[hidden] { display: none; }

@media (min-width: 640px) {
  .red-agenda { grid-template-columns: minmax(0, 1fr) 148px; }
}

.red-cal__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.red-cal__mes {
  font-size: .95rem;
  color: var(--text-strong);
}
.red-cal__mes::first-letter { text-transform: uppercase; }

.red-cal__flecha {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue-dark);
  cursor: pointer;
}
.red-cal__flecha svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.red-cal__flecha:disabled { background: transparent; color: var(--gray-300); cursor: default; }

.red-cal__semana,
.red-cal__dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
.red-cal__semana span {
  padding: 4px 0;
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
}

.red-cal__dia {
  position: relative;
  aspect-ratio: 1;
  max-width: 44px;
  width: 100%;
  justify-self: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue-dark);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s var(--ease-suave), color .15s var(--ease-suave);
}
.red-cal__dia:hover { background: #DBE6FE; }
.red-cal__dia:disabled {
  background: transparent;
  color: var(--gray-300);
  font-weight: 500;
  cursor: default;
}
.red-cal__dia[aria-pressed="true"] { background: var(--blue); color: var(--white); }
/* Hoy lleva un punto abajo, elegido o no. */
.red-cal__dia--hoy::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}
.red-cal__dia:focus-visible,
.red-cal__flecha:focus-visible,
.red-hora:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.red-horas { display: grid; gap: 8px; align-content: start; }
.red-horas__titulo {
  font-size: .85rem;
  color: var(--text-strong);
}
.red-horas__titulo::first-letter { text-transform: uppercase; }

/* 48 medias horas no caben: la lista se desplaza sola y abre ya
   parada en la hora elegida. */
.red-horas__lista {
  display: grid;
  gap: 6px;
  max-height: 272px;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
  scrollbar-width: thin;
}

.red-hora {
  padding: 9px 10px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-btn);
  background: var(--white);
  color: var(--blue);
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s var(--ease-suave), color .15s var(--ease-suave);
}
.red-hora:hover { background: var(--blue-tint); }
.red-hora[aria-pressed="true"] { background: var(--blue); color: var(--white); }

.red-horas__nada { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--text-muted); }

.red-cuando-resumen {
  margin: 10px 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--blue-dark);
}

/* --- La cola y el historial ------------------------------------ */
.red-pubs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }

.red-pub {
  border: var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  display: grid;
  gap: 7px;
  background: var(--white);
}

/* Lo que no salió se marca en el borde, no con un fondo rojo: en una
   lista de diez, diez fondos rojos no dicen nada. */
.red-pub--fallo { border-color: rgba(180, 35, 42, .4); }
.red-pub--parcial,
.red-pub--interrumpida { border-color: rgba(146, 64, 14, .4); }

.red-pub__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.red-pub__cab b { font-size: .9rem; color: var(--text-strong); }

.red-pub__estado {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--text-muted);
  white-space: nowrap;
}
.red-pub__estado--publicada { background: #ECFDF5; color: #047857; }
.red-pub__estado--publicando { background: var(--blue-tint); color: var(--blue-dark); }
.red-pub__estado--fallo { background: #FEF2F2; color: #B4232A; }
.red-pub__estado--parcial,
.red-pub__estado--interrumpida { background: #FFFBEB; color: #92400E; }

.red-pub__texto {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-body);
  /* Tres renglones y a lo que sigue: la cola es para ver qué viene,
     no para releer lo que uno escribió. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.red-pub__redes { display: flex; gap: 6px; flex-wrap: wrap; }

.red-pub__red {
  padding: 2px 9px;
  border-radius: 999px;
  border: var(--border);
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.red-pub__red--ok { border-color: #A7F3D0; background: #ECFDF5; color: #047857; }
.red-pub__red--mal { border-color: #FECACA; background: #FEF2F2; color: #B4232A; }

.red-pub__motivo {
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: #92400E;
  overflow-wrap: anywhere;
}

.red-pub__quitar { justify-self: start; font-size: .82rem; }

/* --- La vista previa (21 sep 2026) ------------------------------
   Un teléfono con el video y el texto encima, como lo pinta TikTok o
   un Reel. En el celular va apilada justo debajo del video; en la
   compu se pasa a una columna a la derecha y se queda a la vista
   mientras el dueño escribe.

   El formulario es la rejilla y los .field traen su propio margen, por
   eso row-gap 0. La última fila es 1fr para que el teléfono —más alto
   que los campos— estire ESA fila y no las separaciones entre campos. */
.red-compositor { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
/* En una rejilla todo se estira a lo ancho; el botón no debe. */
.red-compositor > .btn { justify-self: start; }

.red-previa {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin: 2px 0 20px;
}

@media (min-width: 1100px) {
  .red-compositor--previa {
    grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-rows: repeat(7, auto) 1fr;
    column-gap: 28px;
  }
  .red-compositor--previa > * { grid-column: 1; }
  .red-compositor--previa > .red-previa {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: 16px;
    margin: 0;
  }
}

.red-previa__cab {
  width: 100%;
  max-width: 250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.red-previa__titulo { font-size: .82rem; font-weight: 700; color: var(--text-strong); }

.red-previa__redes { display: flex; gap: 4px; }
.red-previa__red {
  padding: 3px 9px;
  border: var(--border);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.red-previa__red[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue-tint);
  color: var(--blue-dark);
}

.red-previa__tel {
  position: relative;
  width: 100%;
  max-width: 250px;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 6px #0F172A, 0 22px 44px -22px rgba(15, 23, 42, .55);
}

/* `contain` y no `cover`: si el video es horizontal, el dueño TIENE
   que ver las franjas negras, que es justo como va a salir. */
.red-previa__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

.red-previa__sonido {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  cursor: pointer;
}
.red-previa__sonido svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.red-previa__sonido svg path:first-child { fill: currentColor; }
.red-previa__sonido[aria-pressed="false"] .red-previa__onda,
.red-previa__sonido[aria-pressed="true"] .red-previa__mudo { display: none; }
.red-previa__sonido:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.red-previa__pausa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.red-previa__pausa[hidden] { display: none; }
.red-previa__pausa svg { width: 54px; height: 54px; fill: rgba(255, 255, 255, .85); }

/* El texto va encima del video, abajo, sobre un degradado: así lo ven
   en TikTok y en Reels. Dos renglones y «…», que es lo que alcanza a
   leer quien no toca «más». */
.red-previa__capa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 48px 56px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
  color: #fff;
  pointer-events: none;
  text-align: left;
}
.red-previa__quien { font-size: .82rem; font-weight: 700; }
.red-previa__texto {
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.red-previa__texto--vacio { opacity: .6; font-style: italic; }

.red-previa__corte,
.red-previa__datos {
  margin: 0;
  max-width: 250px;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}
.red-previa__datos { font-weight: 600; }

.red-previa__avisos {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 250px;
  display: grid;
  gap: 6px;
}
.red-previa__avisos li {
  padding: 8px 10px;
  border-radius: var(--radius-btn);
  background: #FFFBEB;
  color: #92400E;
  font-size: .76rem;
  line-height: 1.45;
}

/* =============================================================
   LA FRESCURA · «Revisado hace un momento» + «Buscar ahora»

   Va debajo del título de Tus reseñas y pesa poco a propósito: es un
   dato de servicio, no un titular. Cuando entra una reseña mientras el
   dueño mira la pantalla, el mismo renglón se pone azul y lo dice.
   ============================================================= */
.crm-frescura {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: -6px 0 14px;
  font-size: .82rem;
  color: var(--text-muted);
}

.crm-frescura__texto { font-variant-numeric: tabular-nums; }

/* Azul de marca, no verde: el verde en esta interfaz no significa nada
   todavía y estrenar un color para un aviso de 45 segundos es empezar
   un idioma que después hay que sostener. */
.crm-frescura.is-nueva {
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--blue-tint);
  color: var(--blue-dark);
  font-weight: 600;
}

.crm-frescura .pan-link { font-size: .82rem; }

/* =============================================================
   FIDELIDAD, LO DEL 21 SEP 2026: franja, escáner, clientes y
   promociones
   ============================================================= */

/* El encuadre de la franja: sólo sale con una foto recién escogida. */
.fid-encuadre { margin-top: 10px; display: grid; gap: 4px; max-width: 320px; }
.fid-encuadre[hidden] { display: none; }
.fid-encuadre input[type="range"] { width: 100%; accent-color: var(--blue); }

/* --- El escáner ------------------------------------------------ */
.fid-escanear {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.fid-escanear[hidden] { display: none; }

.fid-escanear__icono {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* La vista de la cámara. Cuadrada y no más ancha que un teléfono: el
   QR se apunta al centro, y un video de 16:9 a lo ancho de la pantalla
   de una computadora obliga a buscar dónde está. */
.fid-camara {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: #0B1220;
  margin-bottom: 14px;
}
.fid-camara[hidden] { display: none; }

/* El aviso grande después de escanear (28 sep 2026). Encima de todo y
   con la marca enorme: en la caja se lee de reojo, con el cliente
   enfrente. Verde = quedó, ámbar = ya tenía, rojo = no se pudo. */
.fid-exito {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(11, 18, 32, .55);
  animation: fid-exito-entra .18s ease-out;
}
.fid-exito[hidden] { display: none; }
.fid-exito__caja {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 24px;
  padding: 28px 22px 20px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(11, 18, 32, .35);
}
.fid-exito__marca {
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #16A34A;
  animation: fid-exito-marca .32s cubic-bezier(.34, 1.56, .64, 1);
}
.fid-exito__marca::before { content: '✓'; }
.fid-exito--repetido .fid-exito__marca { background: #D97706; }
.fid-exito--repetido .fid-exito__marca::before { content: '!'; }
.fid-exito--mal .fid-exito__marca { background: #DC2626; }
.fid-exito--mal .fid-exito__marca::before { content: '×'; }
.fid-exito--premio .fid-exito__marca::before { content: '★'; }
.fid-exito__titulo { font-size: 1.35rem; font-weight: 700; color: #0B1220; margin: 0 0 6px; }
.fid-exito__texto { font-size: 1rem; color: #475569; margin: 0 0 20px; }
.fid-exito__botones { display: grid; gap: 10px; }
@keyframes fid-exito-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes fid-exito-marca { from { transform: scale(.4); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .fid-exito, .fid-exito__marca { animation: none; }
}
.fid-limite-horas { margin-top: 10px; }
.fid-limite-horas[hidden] { display: none; }

.fid-camara__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La mira: cuatro esquinas, como las de la cámara del teléfono, para
   que se entienda sin texto dónde va el QR. */
.fid-camara__mira {
  position: absolute;
  inset: 18%;
  border-radius: 14px;
  box-shadow: 0 0 0 999px rgba(11, 18, 32, .35);
  background:
    linear-gradient(#fff, #fff) top left / 28px 4px no-repeat,
    linear-gradient(#fff, #fff) top left / 4px 28px no-repeat,
    linear-gradient(#fff, #fff) top right / 28px 4px no-repeat,
    linear-gradient(#fff, #fff) top right / 4px 28px no-repeat,
    linear-gradient(#fff, #fff) bottom left / 28px 4px no-repeat,
    linear-gradient(#fff, #fff) bottom left / 4px 28px no-repeat,
    linear-gradient(#fff, #fff) bottom right / 28px 4px no-repeat,
    linear-gradient(#fff, #fff) bottom right / 4px 28px no-repeat;
  pointer-events: none;
}

.fid-camara__cerrar {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

/* --- Clientes --------------------------------------------------- */
.fid-buscar { margin-bottom: 12px; }

.fid-clientes {
  display: grid;
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 520px;
  overflow-y: auto;
}

.fid-clientes__vacio {
  margin: 0;
  padding: 18px 16px;
  font-size: .9rem;
  color: var(--text-muted);
  text-align: center;
}

.fid-cliente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-color, var(--gray-200));
}
.fid-cliente:first-child { border-top: 0; }

.fid-cliente__quien { min-width: 0; display: grid; gap: 2px; }
.fid-cliente__quien strong { font-size: .95rem; color: var(--text-strong); }
.fid-cliente__quien > span:not(.fid-cliente__marcas) {
  font-size: .82rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fid-cliente__marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.fid-cliente__marcas > * { white-space: nowrap; }

.fid-marca {
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gray-100, #F1F5F9);
  color: var(--text-body);
}

.fid-cliente__cuenta { text-align: right; display: grid; gap: 2px; }
.fid-cliente__cuenta strong { font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.fid-cliente__cuenta span { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

.fid-cliente__acciones { display: flex; align-items: center; gap: 10px; }
.fid-cliente__borrar { color: #B91C1C; font-size: .82rem; }

/* En celular, los números y los botones bajan a una segunda línea: en
   una columna de 340 px no caben tres cosas lado a lado. */
@media (max-width: 520px) {
  .fid-cliente { grid-template-columns: minmax(0, 1fr) auto; }
  .fid-cliente__acciones { grid-column: 1 / -1; justify-content: flex-end; }
}

/* --- Promociones ------------------------------------------------ */
.crm-estado--max { background: #EEF2FF; color: #3730A3; }
#form-promo[hidden] { display: none; }

/* --- Los premios de la tarjeta (22 sep 2026) --------------------
   Un renglón por premio: en qué visita cae, qué se lleva, y quitarlo.
   En celular el texto baja a su propia línea: con el contador al lado
   quedaban dos campos de 120 px que no se pueden escribir. */
.fid-premios { display: grid; gap: 10px; margin-bottom: 10px; }

.fid-premio {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fid-premio__texto { flex: 1 1 200px; min-width: 0; }
.fid-premio__quitar { color: #B91C1C; font-size: .82rem; flex: none; }

#fid-mas-premio[hidden] { display: none; }

.fid-marca--premio { background: #FEF3C7; color: #92400E; }
.fid-marca--sin { background: #F1F5F9; color: #64748B; }

.fid-resultado__canjear { margin-top: 10px; justify-self: start; }

/* El puntaje del ranking de sucursales (25 sep 2026). */
.crm-num--puntaje { font-weight: 800; color: var(--blue-dark, #1D4ED8); }
.crm-rank {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; margin-right: 8px;
  border-radius: 50%;
  background: var(--blue-tint, #EFF4FF); color: var(--blue-dark, #1D4ED8);
  font-size: .75rem; font-weight: 800; vertical-align: 2px;
}
.crm-rank--1 { background: #FEF3C7; color: #92400E; }

/* =============================================================
   ENCUESTAS y EQUIPO (25 sep 2026, CONTEXTO §2W)
   ============================================================= */
.enc-filtro { max-width: 220px; }
.enc-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.enc-chips li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; background: #F0FDF4; font-weight: 600; }
.enc-chips--mal li { background: #FEF2F2; }
.enc-chips li b { font-variant-numeric: tabular-nums; }
.enc-chips li.enc-chips__vacio { background: transparent; color: var(--text-muted); font-weight: 500; padding-left: 0; }

.enc-lista { list-style: none; margin: 0; padding: 0; }
.enc-resp { padding: 14px 0; border-top: var(--border); }
.enc-resp:first-child { border-top: 0; }
.enc-resp__cab { display: flex; align-items: center; gap: 10px; }
.enc-resp__carita { font-size: 22px; line-height: 1; }
.enc-resp__donde { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enc-resp__cuando { color: var(--text-muted); font-size: .85rem; }
.enc-resp__chips { margin: 6px 0 0; color: var(--text-muted); font-size: .9rem; }
.enc-resp__texto { margin: 6px 0 0; color: var(--text-strong); }
.enc-resp__contacto { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #FEF3C7; font-size: .9rem; }
.enc-resp__google { margin: 6px 0 0; font-size: .8rem; font-weight: 700; color: #15803D; }
.enc-resp--mal .enc-resp__donde { color: #B91C1C; }

.enc-placas { list-style: none; margin: 8px 0 16px; padding: 0; }
.enc-placa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: var(--border); }
.enc-placa:first-child { border-top: 0; }
.enc-placa .crm-switch { flex: 1 1 220px; margin: 0; }
.enc-placa__acciones { display: flex; gap: 8px; }

.crm-tabla__cab--equipo, .crm-fila__datos--equipo { grid-template-columns: minmax(170px, 2fr) 96px 104px 116px 104px; }
.crm-fila__datos--equipo .crm-num { text-align: right; }
.crm-fila--equipo .crm-ayuda { margin: 4px 0 0; font-size: .8rem; }
.crm-equipo__cita { margin: 0 18px 10px; padding: 8px 12px; border-left: 3px solid var(--blue-tint, #EFF4FF); color: var(--text-muted); font-size: .88rem; }
@media (max-width: 899px) {
  .crm-fila__datos--equipo { grid-template-columns: 1fr; gap: 4px; }
  .crm-fila__datos--equipo .crm-num { text-align: left; }
  .crm-fila__datos--equipo .crm-num::before { content: attr(data-col) ": "; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
  .crm-equipo__cita { margin: 0 0 10px; }
}

/* Nombre + «¿Quién la usa?» en el editor de productos (25 sep 2026). */
.pan-nombre.pan-form-linea { grid-template-columns: 1fr 1fr auto; }
@media (max-width: 620px) {
  .pan-nombre.pan-form-linea { grid-template-columns: 1fr; }
  .pan-nombre.pan-form-linea > .btn { width: 100%; }
}
.crm-excel { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

/* Los locales del aviso al pasar cerca (28 sep 2026). */
.fid-lugares { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.fid-lugares li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: #F8FAFC; }
.fid-lugares small { color: #64748B; }
.fid-lugares:empty { display: none; }

/* Fidelidad por secciones (28 sep 2026): sólo se ve la caja de la
   sección elegida. `hidden` sigue mandando aparte (plan y permisos). */
.fid-secciones { position: sticky; top: 0; z-index: 5; background: #E6E6EB; }
.fid-secciones[hidden] { display: none; }
#vista-fidelidad[data-seccion="sellar"] [data-fid-seccion]:not([data-fid-seccion="sellar"]),
#vista-fidelidad[data-seccion="clientes"] [data-fid-seccion]:not([data-fid-seccion="clientes"]),
#vista-fidelidad[data-seccion="promos"] [data-fid-seccion]:not([data-fid-seccion="promos"]),
#vista-fidelidad[data-seccion="tarjeta"] [data-fid-seccion]:not([data-fid-seccion="tarjeta"]) { display: none; }

/* Cashback (5 oct 2026): «Usar saldo» con su campo, en el resultado de sellar. */
.fid-usar { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.fid-usar .field__input { max-width: 140px; font-size: 16px; }
.fid-monto { margin-bottom: 12px; }
#fid-monto { font-size: 16px; }

/* Acabados metálicos en la fila de colores de la tarjeta (5 oct 2026). */
.fid-color--metal-negro { background: linear-gradient(135deg, #3A3A40, #121214 50%, #44444B) !important; }
.fid-color--metal-plata { background: linear-gradient(135deg, #E6E8EC, #9EA3AB 50%, #EEF0F3) !important; }
.fid-color--metal-oro { background: linear-gradient(135deg, #EED894, #A97F2F 50%, #F2E0A6) !important; }
.fid-color--metal-oro-rosa { background: linear-gradient(135deg, #F1D2C8, #B07D70 50%, #F5DCD3) !important; }

/* Te extrañamos, referidos, niveles y regalo (5 oct 2026). */
.fid-niveles { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.fid-niveles .field__input { max-width: 120px; }
#fid-extr-caja .field__input, #fid-ref-caja .field__input, #fid-niv-caja .field__input { margin-bottom: 8px; font-size: 16px; }
.fid-regalo__acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#regalo-liga { margin-top: 12px; }
.fid-nivel { font-weight: 600; }
.fid-nivel--plata { color: #6B7280; }
.fid-nivel--oro { color: #B08A3E; }
.fid-cargar { display: block; margin-top: 6px; }
.fid-usar[hidden] { display: none; }

/* El ticket del cashback dentro del aviso del sello (7 oct 2026) */
.fid-cb { display: grid; gap: 8px; margin: -6px 0 16px; padding: 14px; border-radius: 16px; background: #F0FDF4; text-align: left; }
.fid-cb[hidden] { display: none; }
.fid-cb__saldo { margin: 0; font-size: .9rem; color: #475569; }
.fid-cb__campo { display: grid; gap: 4px; font-weight: 600; color: #0B1220; }
.fid-cb__campo input { font: inherit; font-size: 1.4rem; font-weight: 700; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 12px; background: #fff; color: #0B1220; width: 100%; box-sizing: border-box; }
.fid-cb__gana { margin: 0; font-weight: 700; color: #15803D; }

/* La foto de fondo, igual en el menú y en la página de ligas (7 oct 2026) */
.cat-img--fondo { margin: 4px 0 16px; }
.cat-img--fondo .cat-img__ver { aspect-ratio: 3 / 4; max-width: 96px; }