/* =============================================================
   TapUp · el dashboard como iOS (24 sep 2026)

   Va DESPUÉS de app.css y sólo lo carga /dashboard/. Alessandro: «me
   gustaría que todo el sitio se sintiera como el sistema operativo de
   iOS». Lo que aquí se toma de iOS son sus REGLAS, no sus pixeles:

   · La letra del sistema. En iPhone y Mac es San Francisco; en lo
     demás sigue Inter, que ya cargaba.
   · Listas agrupadas (Ajustes del iPhone): renglones de 44 px o más,
     un ícono de color en un cuadrito redondeado, el valor en gris a la
     derecha y una flecha «›».
   · Movimiento con resorte: las cosas llegan un poco rápido y se
     asientan, no se deslizan a velocidad constante. La curva es
     linear() (un resorte muestreado), con cubic-bezier de respaldo.
   · Todo lo que se toca se hunde tantito al tocarlo.
   · Hojas que suben desde abajo con su «asa», y controles
     segmentados en vez de listas desplegables.

   Nada de esto carga una librería: la CSP trae script-src 'self' (ver
   la memoria «Estética y animación»). Motion y anime.js inspiraron las
   curvas; aquí están escritas a mano.
   ============================================================= */

:root {
  --ios-resorte: cubic-bezier(.2, .9, .25, 1.15);
  --ios-suave: cubic-bezier(.32, .72, 0, 1);
  --ios-rojo: #FF3B30;
  --ios-verde: #34C759;
  --ios-gris: #8E8E93;
  --ios-separador: rgba(60, 60, 67, .12);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* Un resorte de verdad: sube a 1.04 y se asienta. */
    --ios-resorte: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.5%, 1.043 24.5%, 1.035 28.4%, 1.007 38.2%, .997 42.7%, 1);
  }
}

.pan-body {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
.pan-body .crm-top__titulo,
.pan-body .crm-bloque__titulo,
.pan-body .crm-card__titulo,
.pan-body .acceso__h1 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
}

/* ---------- Tocar se siente ---------- */
.pan-body .btn,
.ios-fila,
.ios-perfil,
.crm-tab,
.ios-roles__op,
.ios-integ,
.plan-app,
.crm-kpi {
  transition: transform .35s var(--ios-resorte), background-color .2s, box-shadow .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.pan-body .btn:active:not(:disabled) { transform: scale(.96); }
.crm-kpi:active { transform: scale(.97); }

/* ---------- La ruedita del botón ocupado ---------- */
.btn.is-cargando {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: .85;
  cursor: progress;
}
.btn.is-cargando::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ios-gira .7s linear infinite;
}
@keyframes ios-gira { to { transform: rotate(360deg); } }

/* ---------- Al cambiar de sección, la nueva entra ---------- */
.crm-vista:not([hidden]) { animation: ios-entra .45s var(--ios-suave) both; }
@keyframes ios-entra {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================
   LISTAS AGRUPADAS (Ajustes)
   ============================================================= */
.ajustes { max-width: 640px; margin: 0 auto; }
.ajustes__pagina[hidden] { display: none; }
/* Mientras entra, la página va 40 px a la derecha: sin recortar, el celular
   ensanchaba la pantalla y la barra de abajo se salía (8 oct 2026). */
.ajustes { overflow-x: clip; }
.ajustes__pagina.entra-der { animation: ios-empuja .42s var(--ios-suave) both; }
.ajustes__pagina.entra-izq { animation: ios-regresa .42s var(--ios-suave) both; }
@keyframes ios-empuja { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes ios-regresa { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }

.ios-grupo {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: 14px;
  background: var(--app-tarjeta, #fff);
}
.ios-grupo > li { position: relative; margin: 0; }
/* El hilo entre renglones empieza después del ícono, como en iOS. */
.ios-grupo > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 58px;
  right: 0;
  height: 1px;
  background: var(--ios-separador);
}
.ios-grupo > li[hidden] { display: none; }

.ios-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 50px;
  padding: 8px 14px 8px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--indigo, #14113A);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ios-fila:active { background: rgba(60, 60, 67, .08); }
.ios-fila__texto { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.ios-fila__valor {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ios-gris);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-fila__flecha {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: -6px;
  fill: none;
  stroke: #C4C4C9;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ios-fila--peligro { justify-content: center; }
.ios-fila--peligro .ios-fila__texto { flex: 0 1 auto; color: var(--ios-rojo); text-align: center; }
.ios-fila.is-elegida .ios-fila__texto { font-weight: 700; color: var(--blue); }
.ios-fila.is-elegida::after {
  content: "";
  width: 7px;
  height: 13px;
  margin: -4px 4px 0 0;
  border: solid var(--blue);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.ios-fila__foto {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  background: #F2F2F7;
}

/* El cuadrito de color con su ícono blanco. */
.ios-icono {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #fff;
}
.ios-icono svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ios-icono--verde { background: var(--ios-verde); }
.ios-icono--azul { background: #007AFF; }
.ios-icono--gris { background: var(--ios-gris); }
.ios-icono--morado { background: #AF52DE; }
.ios-icono--naranja { background: #FF9500; }
.ios-icono--tinta { background: #1C1C1E; }
/* «Ver como» (6 oct 2026): el select a la derecha de su fila, sin desbordarse. */
.ios-select { margin-left: auto; max-width: 58%; min-width: 0; border: 0; background: transparent; color: var(--ios-gris); font: inherit; text-align: right; text-overflow: ellipsis; }
.ios-icono--whats { background: #25D366; }

/* La tarjeta de la cuenta, arriba de todo. */
.ios-perfil {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 22px;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--app-tarjeta, #fff);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ios-perfil:active { background: #F7F7FA; }
.ios-perfil__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(160deg, #6E8BFF, var(--blue, #2563EB));
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ios-perfil__datos { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 2px; }
.ios-perfil__datos b { font-size: 1.15rem; letter-spacing: -.02em; color: var(--indigo); }
.ios-perfil__datos span { overflow: hidden; color: var(--ios-gris); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }

.ios-pie { margin: -12px 16px 22px; font-size: .8rem; line-height: 1.4; color: var(--ios-gris); }

.ios-volver {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 6px -8px;
  padding: 6px 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.02rem;
  color: #007AFF;
  cursor: pointer;
}
.ios-volver svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ios-volver:active { opacity: .45; }
/* El título ya lo dice el encabezado grande de arriba. */
.ios-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ios-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }

/* =============================================================
   INVITADOS
   ============================================================= */
.ios-cupos { display: flex; gap: 10px; margin: 0 0 12px; }
.ios-cupos:empty { display: none; }
.ios-cupo {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--app-tarjeta, #fff);
}
.ios-cupo svg { flex: 0 0 auto; width: 38px; height: 38px; transform: rotate(-90deg); }
.ios-cupo__pista { fill: none; stroke: #E9E9EF; stroke-width: 4; }
.ios-cupo__arco { fill: none; stroke: var(--ios-verde); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .8s var(--ios-suave); }
.ios-cupo > span { display: flex; flex-direction: column; min-width: 0; }
.ios-cupo b { font-size: 1.05rem; color: var(--indigo); letter-spacing: -.02em; }
.ios-cupo span span { font-size: .8rem; color: var(--ios-gris); }

#vista-cuenta .crm-accesos { margin: 4px 0 18px; padding: 0; overflow: hidden; border-radius: 14px; background: #F7F7FA; }
#vista-cuenta .crm-accesos li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 12px;
  border: 0;
}
#vista-cuenta .crm-accesos li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 62px;
  right: 0;
  height: 1px;
  background: var(--ios-separador);
}
#vista-cuenta .crm-accesos__datos { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
#vista-cuenta .crm-accesos__datos b { font-weight: 600; color: var(--indigo); }
#vista-cuenta .crm-accesos__datos span { flex-basis: 100%; font-size: .82rem; color: var(--ios-gris); }
.ios-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  background: var(--ios-gris);
}
.ios-avatar--dueno { background: linear-gradient(160deg, #6E8BFF, #2563EB); }
.ios-avatar--gerente { background: linear-gradient(160deg, #5EE08A, #28A745); }
.ios-avatar--empleado { background: linear-gradient(160deg, #FFC15E, #F59E0B); }
.ios-avatar--socio { background: linear-gradient(160deg, #C792F5, #AF52DE); }
.ios-rol {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .01em;
}
.ios-rol--gerente { background: #DCFCE7; color: #166534; }
.ios-rol--empleado { background: #FEF3C7; color: #92400E; }
.ios-rol--socio { background: #F3E8FF; color: #6B21A8; }
.ios-quitar {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: #FFE5E3;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ios-rojo);
  cursor: pointer;
}
.ios-quitar:active { transform: scale(.94); }

.ios-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ios-roles__op {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 72px;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: #F2F2F7;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ios-roles__op b { font-size: .92rem; color: var(--indigo); }
.ios-roles__op span { font-size: .74rem; line-height: 1.3; color: var(--ios-gris); }
.ios-roles__op[aria-checked="true"] { border-color: var(--blue); background: #EEF4FF; }
.ios-roles__op:active { transform: scale(.96); }
.ios-roles__op:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 380px) {
  .ios-roles { grid-template-columns: 1fr; }
  .ios-roles__op { min-height: 0; }
}

/* =============================================================
   INTEGRACIONES
   ============================================================= */
.ios-integraciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ios-integ {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 16px;
  background: var(--app-tarjeta, #fff);
  font: inherit;
  text-align: left;
  color: inherit;
}
button.ios-integ { cursor: pointer; }
button.ios-integ:active { transform: scale(.97); }
.ios-integ__logo {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
}
.ios-integ__logo svg { width: 22px; height: 22px; }
.ios-integ__texto { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.ios-integ__texto b { font-size: .95rem; color: var(--indigo); }
.ios-integ__texto span { font-size: .8rem; color: var(--ios-gris); }
.ios-integ__estado {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: #F2F2F7;
  font-size: .74rem;
  font-style: normal;
  font-weight: 700;
  color: #636366;
}
.ios-integ__estado--ok { background: #DCFCE7; color: #166534; }
.ios-integ__estado--pronto { background: #EEF4FF; color: #1D4ED8; }
.ios-integ__estado--plan { background: #14113A; color: #fff; }

/* =============================================================
   HOJAS Y CONTROLES SEGMENTADOS
   ============================================================= */
.ios-hoja {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 17, 58, 0);
  transition: background-color .25s;
}
.ios-hoja.esta-abierta { background: rgba(20, 17, 58, .32); }
.ios-hoja__panel {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--app-fondo, #F2F3F7);
  transform: translateY(100%);
  transition: transform .5s var(--ios-resorte);
}
.ios-hoja.esta-abierta .ios-hoja__panel { transform: none; }
@media (min-width: 1000px) {
  .ios-hoja { align-items: center; }
  .ios-hoja__panel { border-radius: 24px; transform: scale(.94); opacity: 0; transition: transform .45s var(--ios-resorte), opacity .2s; }
  .ios-hoja.esta-abierta .ios-hoja__panel { transform: none; opacity: 1; }
}
.ios-hoja__titulo { margin: 0 4px 12px; font-size: 1.2rem; letter-spacing: -.02em; }
.ios-hoja .crm-hoja__asa { width: 38px; height: 5px; margin: 4px auto 14px; border-radius: 99px; background: rgba(30, 27, 75, .18); }
.ios-hoja .crm-hoja__cerrar {
  display: block;
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--app-tarjeta, #fff);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
}
.ios-grupo--hoja { margin-bottom: 12px; }
.ios-grupo--hoja > li + li::before { left: 14px; }

.ios-segmento {
  display: flex;
  gap: 2px;
  margin: 0 0 14px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(118, 118, 128, .14);
}
.ios-segmento__op {
  flex: 1 1 0;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--indigo);
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}
.ios-segmento__op[aria-pressed="true"] { background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }

/* La pastilla que dice qué productos se cuentan. */
.crm-bloque__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.crm-bloque__fila .crm-bloque__titulo { margin-bottom: 12px; }
.ios-filtro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 60%;
  margin: 0 0 12px;
  padding: 7px 10px 7px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--app-tarjeta, #fff);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--indigo);
  cursor: pointer;
}
.ios-filtro span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-filtro svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ios-filtro.is-activo { background: var(--blue); color: #fff; }
.ios-filtro[hidden] { display: none; }
.ios-filtro:active { transform: scale(.95); }
#kpis, #grafica-toques, #resumen-placas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* El menú de Mi negocio: pastillas que cambian de parte (no hacen
   scroll). Las de paga llevan «Pro» arribita del nombre. */
.cabeza-negocio[hidden] { display: none; }
.ios-saltos {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 0 -16px 14px;
  padding: 10px 16px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ios-saltos::-webkit-scrollbar { display: none; }
.ios-saltos[hidden] { display: none; }
.ios-saltos__op {
  position: relative;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(118, 118, 128, .12);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--indigo);
  cursor: pointer;
  transition: background-color .25s, color .25s, transform .35s var(--ios-resorte);
}
.ios-saltos__op:active { transform: scale(.95); }
.ios-saltos__op.is-activo { background: var(--indigo, #14113A); color: #fff; }
.ios-saltos__op .crm-nav__pro {
  position: absolute;
  top: -9px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  padding: 1px 7px;
  font-size: .58rem;
  line-height: 1.4;
}
@media (min-width: 1000px) {
  .ios-saltos { margin: 0 0 14px; padding: 10px 0 2px; }
}
/* Con el menú arriba, el título grande de cada parte sobra. */
#vista-resenas > .crm-bloque__titulo:first-child,
#vista-analitica > .crm-bloque__titulo:first-child,
#vista-competencia > .crm-bloque__titulo:first-child { display: none; }

/* =============================================================
   GRÁFICAS
   ============================================================= */
.crm-lectura { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 44px; margin: 0 0 8px; }
.crm-lectura b { font-size: 1.6rem; font-weight: 700; letter-spacing: -.035em; color: var(--indigo); font-variant-numeric: tabular-nums; }
.crm-lectura span { font-size: .84rem; color: var(--ios-gris); }
#grafica-toques { position: relative; touch-action: pan-y; cursor: crosshair; }
#grafica-toques .crm-barra-dia::after {
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #5B8CFF, var(--blue, #2563EB));
  transform-origin: bottom;
  animation: ios-crece .7s var(--ios-resorte) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes ios-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
#grafica-toques.con-eleccion .crm-barra-dia::after { opacity: .35; }
#grafica-toques.con-eleccion .crm-barra-dia.is-elegida::after { opacity: 1; }
.crm-barra-dia__num {
  position: absolute;
  left: 50%;
  bottom: calc(var(--alto, 0%) + 3px);
  transform: translateX(-50%);
  font-size: .66rem;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}
.crm-chispa.es-tocable { cursor: pointer; }

/* Caritas en el reparto de estrellas. */
.crm-reparto__fila { grid-template-columns: 50px 1fr 28px; }
.crm-reparto__cara { display: inline-flex; align-items: center; gap: 4px; }
.crm-reparto__cara small { font-size: .7rem; font-weight: 600; color: var(--ios-gris); }
.crm-cara { flex: 0 0 auto; display: block; }
.crm-reparto__relleno { transition: width .8s var(--ios-suave); }
.crm-sent__leyenda li { align-items: center; }
.crm-sent__leyenda .crm-cara { margin-right: 2px; }

/* =============================================================
   LOS TRES PLANES EN EL DASHBOARD
   ============================================================= */
#vista-plan .periodo { margin: 4px auto 16px; }
.planes-app {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.planes-app[hidden], .planes-app__puntos[hidden] { display: none; }
.plan-app {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px 18px;
  border: 2px solid transparent;
  border-radius: 22px;
  background: var(--app-tarjeta, #fff);
}
.plan-app--pro { border-color: var(--blue); }
.plan-app--max { background: #14113A; color: #fff; }
.plan-app.es-mio { box-shadow: inset 0 0 0 2px var(--ios-verde); border-color: transparent; }
.plan-app__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-app h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.03em; }
.plan-app--max h3 { color: #fff; }
.plan-app__etiqueta { padding: 3px 10px; border-radius: 999px; background: #EEF4FF; color: #1D4ED8; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.plan-app--max .plan-app__etiqueta { background: rgba(255, 255, 255, .14); color: #fff; }
.plan-app.es-mio .plan-app__etiqueta { background: #DCFCE7; color: #166534; }
.plan-app__precio { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; }
.plan-app__precio s { font-size: 1rem; color: var(--ios-gris); }
.plan-app__cifra { font-size: 2.2rem; font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.plan-app__precio span { font-size: .9rem; color: var(--ios-gris); }
.plan-app--max .plan-app__precio span, .plan-app--max .plan-app__precio s { color: rgba(255, 255, 255, .6); }
.plan-app__extra { margin: 0; font-size: .82rem; color: var(--ios-gris); }
.plan-app--max .plan-app__extra { color: rgba(255, 255, 255, .7); }
.plan-app ul { display: grid; gap: 7px; margin: 6px 0 12px; padding: 0; list-style: none; font-size: .9rem; }
.plan-app li { display: flex; gap: 8px; }
.plan-app li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ios-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.plan-app .btn { margin-top: auto; }
.plan-app--max .btn--primary { background: #fff; color: #14113A; }
.plan-app--max .btn--ghost, .plan-app--max .btn--secondary { color: #fff; border-color: rgba(255, 255, 255, .3); background: transparent; }
.plan-app__cifra.cambia { animation: ios-cifra .45s var(--ios-resorte); }
@keyframes ios-cifra { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.planes-app__puntos { display: none; }

@media (max-width: 859.98px) {
  .planes-app {
    display: flex;
    gap: 12px;
    margin: 0 -16px 8px;
    padding: 4px 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .planes-app::-webkit-scrollbar { display: none; }
  .plan-app { flex: 0 0 84%; scroll-snap-align: center; }
  .planes-app__puntos { display: flex; justify-content: center; gap: 6px; margin: 4px 0 16px; }
  .planes-app__puntos i { width: 6px; height: 6px; border-radius: 3px; background: var(--indigo, #14113A); opacity: .2; transition: width .3s var(--ios-resorte), opacity .2s; }
  .planes-app__puntos i.is-activo { width: 18px; opacity: .8; }
}

/* =============================================================
   «MÁS» COMO CUADRÍCULA DE APPS
   Alessandro: «siento que algunas funciones se pierden picándole al
   más». La lista de texto pasa a ser una cuadrícula de íconos de
   color, como la pantalla de inicio: se ve TODO de un vistazo.
   ============================================================= */
@media (max-width: 999.98px) {
  .crm-hoja__lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 6px;
    padding: 16px 8px;
    border-radius: 20px;
  }
  .crm-hoja__fila {
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    min-height: 0;
    padding: 0;
    border: 0;
    font-size: .72rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
  }
  .crm-hoja__fila > span:not(.crm-nav__pro):not(.crm-nav__globo) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crm-hoja__fila .crm-nav__icono {
    box-sizing: content-box;
    width: 26px;
    height: 26px;
    padding: 14px;
    border-radius: 15px;
    color: #fff;
    background: var(--c, #007AFF);
    stroke: #fff;
    transition: transform .35s var(--ios-resorte);
  }
  .crm-hoja__fila:active .crm-nav__icono { transform: scale(.9); }
  .crm-hoja__fila[data-vista="negocio"] { --c: linear-gradient(160deg, #5B8CFF, #2563EB); }
  .crm-hoja__fila[data-vista="productos"] { --c: linear-gradient(160deg, #FFB547, #FF9500); }
  .crm-hoja__fila[data-vista="sucursales"] { --c: linear-gradient(160deg, #6EE7B7, #10B981); }
  .crm-hoja__fila[data-vista="conexiones"] { --c: linear-gradient(160deg, #7DD3FC, #0EA5E9); }
  .crm-hoja__fila[data-vista="fidelidad"] { --c: linear-gradient(160deg, #F9A8D4, #EC4899); }
  .crm-hoja__fila[data-vista="redes"] { --c: linear-gradient(160deg, #C4B5FD, #8B5CF6); }
  .crm-hoja__fila[data-vista="plan"] { --c: linear-gradient(160deg, #3B3780, #14113A); }
  .crm-hoja__fila[data-vista="cuenta"] { --c: linear-gradient(160deg, #B8B8C0, #8E8E93); }
  .crm-hoja__fila .crm-nav__pro {
    position: absolute;
    top: -4px;
    right: 50%;
    margin: 0 -34px 0 0;
    padding: 1px 6px;
    font-size: .58rem;
  }
  .crm-hoja__fila .crm-nav__globo { position: absolute; top: -4px; left: 50%; margin-left: 14px; }
  .crm-hoja__fila.is-activo .crm-nav__icono { box-shadow: 0 0 0 3px var(--app-fondo), 0 0 0 5px var(--blue); }
  .crm-hoja__panel { transition: transform .5s var(--ios-resorte); }

  /* La barra de pestañas: la activa lleva una pastilla detrás del ícono. */
  .crm-tab .crm-nav__icono { transition: transform .4s var(--ios-resorte); }
  .crm-tab.is-activo .crm-nav__icono { transform: translateY(-1px) scale(1.08); }
  .crm-tab.is-activo::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 52px;
    height: 30px;
    margin-left: -26px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .1);
    animation: ios-pastilla .45s var(--ios-resorte);
  }
  @keyframes ios-pastilla { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* =============================================================
   ENTRAR: medidor de contraseña y código en cajitas
   ============================================================= */
.ios-fuerza { display: flex; gap: 4px; margin: 8px 0 4px; }
.ios-fuerza i { flex: 1; height: 4px; border-radius: 2px; background: #E5E5EA; transition: background-color .3s; }
.ios-fuerza[data-nivel="1"] i:nth-child(-n+1) { background: var(--ios-rojo); }
.ios-fuerza[data-nivel="2"] i:nth-child(-n+2) { background: #FF9500; }
.ios-fuerza[data-nivel="3"] i:nth-child(-n+3) { background: #FFCC00; }
.ios-fuerza[data-nivel="4"] i { background: var(--ios-verde); }
.ios-fuerza__texto { min-height: 1.2em; margin: 0; font-size: .8rem; color: var(--ios-gris); }

.ios-otp { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 340px; }
.ios-otp__caja {
  display: grid;
  place-items: center;
  height: 54px;
  border: 1.5px solid rgba(30, 27, 75, .14);
  border-radius: 12px;
  background: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
  transition: border-color .2s, box-shadow .2s, transform .3s var(--ios-resorte);
}
.ios-otp__caja.is-llena { transform: scale(1.04); }
.ios-otp__caja.is-actual { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.ios-otp__caja.is-actual:empty::after { content: ""; width: 2px; height: 24px; background: var(--blue); animation: ios-cursor 1s steps(1) infinite; }
@keyframes ios-cursor { 50% { opacity: 0; } }
.ios-otp .pan-input--codigo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
}

/* =============================================================
   SUBIR ARCHIVOS: una zona grande para tocar o soltar
   ============================================================= */
.ios-subir {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed rgba(30, 27, 75, .2);
  border-radius: 14px;
  background: #FAFAFC;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.ios-subir.is-encima { border-color: var(--blue); background: #EEF4FF; }
.ios-subir input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ios-subir__icono { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #EEF4FF; color: var(--blue); }
.ios-subir__icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ios-subir__texto { display: flex; flex-direction: column; min-width: 0; }
.ios-subir__texto b { font-size: .92rem; color: var(--indigo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-subir__texto span { font-size: .78rem; color: var(--ios-gris); }
.ios-subir.tiene-archivo .ios-subir__icono { background: #DCFCE7; color: #16A34A; }

@media (prefers-reduced-motion: reduce) {
  .crm-vista:not([hidden]),
  .ajustes__pagina.entra-der,
  .ajustes__pagina.entra-izq,
  #grafica-toques .crm-barra-dia::after,
  .plan-app__cifra.cambia,
  .crm-tab.is-activo::before { animation: none; }
  .pan-body .btn, .ios-fila, .crm-tab, .crm-kpi, .plan-app { transition: none; }
}

/* El foco de la cuadrícula va en el ícono, no en un marco alrededor. */
@media (max-width: 999.98px) {
  .crm-hoja__fila:focus-visible { outline: none; }
  .crm-hoja__fila:focus-visible .crm-nav__icono { outline: 2px solid var(--blue); outline-offset: 3px; }
}
/* El número de la mejor barra no pisa el texto de arriba. */
#grafica-toques { margin-top: 14px; }
#vista-cuenta .crm-accesos__datos b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ios-invitar { margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--ios-separador); font-size: 1.05rem; letter-spacing: -.02em; }

/* El ojito de la contraseña. */
.ios-clave { position: relative; }
.ios-clave .field__input { width: 100%; padding-right: 52px; }
.ios-clave__ojo {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ios-gris);
  cursor: pointer;
}
.ios-clave__ojo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ios-clave__ojo:active { background: rgba(60, 60, 67, .08); }

/* Temas en el plan gratis: los chips se ven pero no se abren. */
.crm-temas--prueba .crm-chip { cursor: default; }
.crm-temas__gratis { padding: 3px 10px; border-radius: 999px; background: #EEF4FF; color: #1D4ED8; font-size: .72rem; font-weight: 700; }
.crm-temas--prueba { margin-bottom: 12px; }
.crm-temas--prueba .crm-temas__lados + .crm-ayuda { margin-top: 12px; }

/* Logos de las integraciones: los de fondo blanco llevan un hilo. */
.ios-integ__logo svg { width: 26px; height: 26px; }
.ios-integ__logo--claro { box-shadow: inset 0 0 0 1px rgba(60, 60, 67, .14); }
/* Que quepan las cuatro en un iPhone de 390 px. */
.ios-saltos__op { flex: 1 0 auto; padding: 0 12px; font-size: .84rem; }
@media (min-width: 700px) { .ios-saltos__op { flex: 0 0 auto; padding: 0 18px; } }

/* =============================================================
   TARJETA DE METAL (24 sep 2026) · la sección del dashboard
   La tarjeta se dibuja con css/metal.css y el teléfono de la vista
   previa usa las clases del perfil público (css/perfil.css).
   ============================================================= */
.crm-nav__pro--pronto { background: linear-gradient(135deg, #9EA3AD, #5F636B); }
body.es-pro .crm-nav__pro--pronto { display: inline-block; }
body.metal-abierta .crm-nav__pro--pronto { display: none; }
.crm-hoja__fila[data-vista="metal"] { --c: linear-gradient(160deg, #4A4A52, #0E0E11); }

.mt-icono--estrella { background: linear-gradient(160deg, #FFD60A, #FF9F0A); }
.mt-icono--rosa { background: linear-gradient(160deg, #F9A8D4, #EC4899); }

/* --- Próximamente --- */
.mt-pronto, .mt-vacio {
  max-width: 460px;
  margin: 0 auto;
  padding: 8px 0 24px;
  text-align: center;
}
.mt-pronto__escena {
  position: relative;
  height: 230px;
  margin: 6px auto 18px;
  max-width: 340px;
}
.mt-pronto__tarjeta {
  position: absolute;
  left: 50%;
  top: 38px;
  width: 280px;
  margin-left: -140px;
  animation: mt-flota 6s ease-in-out infinite;
}
.mt-pronto__tarjeta--atras {
  top: 0;
  transform: translateX(34px) rotate(8deg) scale(.92);
  animation: mt-flota-atras 6s ease-in-out infinite;
}
@keyframes mt-flota { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes mt-flota-atras { 0%, 100% { transform: translateX(34px) rotate(8deg) scale(.92); } 50% { transform: translateX(34px) translateY(6px) rotate(9deg) scale(.92); } }
.mt-insignia {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1D1D22, #4A4A52);
  color: #E8EAEE;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mt-pronto__titulo { margin: 12px 0 6px; font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; color: var(--indigo); }
.mt-pronto__texto { margin: 0 auto 20px; max-width: 34ch; color: var(--ios-gris); line-height: 1.5; }
.mt-pronto__lista { text-align: left; }
.mt-pronto__lista .ios-fila { cursor: default; }
.mt-pronto__lista .ios-fila:active { background: transparent; }

.mt-vacio__tarjeta { width: 260px; margin: 10px auto 8px; animation: mt-flota 6s ease-in-out infinite; }

/* --- Editor --- */
.mt-selector { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: none; }
.mt-selector::-webkit-scrollbar { display: none; }
.mt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 36px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--app-hilo);
  border-radius: 999px;
  background: var(--app-tarjeta);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--indigo);
  cursor: pointer;
}
.mt-chip.is-activo { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.mt-chip--nueva { padding-left: 14px; color: var(--blue); }
.mt-chip__color { width: 16px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mt-chip__color--negra { background: linear-gradient(135deg, #2b2b30, #0b0b0d); }
.mt-chip__color--gris { background: linear-gradient(135deg, #b9bcc3, #6f737b); }

.mt-rejilla { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .mt-rejilla { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; gap: 32px; }
  .mt-previa { position: sticky; top: calc(var(--alto-top, 96px) + 12px); }
}
.mt-previa { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mt-previa__tarjeta { width: 100%; max-width: 320px; cursor: pointer; }
.mt-previa__tarjeta .metal { margin: 0 auto; }
.mt-previa__caras { width: 100%; max-width: 220px; margin: 0; }

/* El teléfono: un marco negro y, adentro, el perfil de verdad. */
.mt-telefono {
  width: 100%;
  max-width: 300px;
  padding: 10px;
  border-radius: 40px;
  background: #111;
  box-shadow: 0 0 0 2px #2c2c30, 0 30px 60px -30px rgba(15, 12, 40, .6);
}
.mt-telefono__pantalla {
  height: 440px;
  overflow-y: auto;
  padding: 26px 14px 20px;
  border-radius: 31px;
  background: radial-gradient(120% 60% at 50% 0%, var(--pf-fondo-2), transparent 70%), var(--pf-fondo);
  color: var(--pf-texto);
  scrollbar-width: none;
}
.mt-telefono__pantalla::-webkit-scrollbar { display: none; }
.mt-telefono__pantalla .pf-avatar { width: 52px; height: 52px; font-size: 1.1rem; }
.mt-telefono__pantalla .pf-nombre { font-size: 1.25rem; }
.mt-telefono__pantalla .pf-puesto, .mt-telefono__pantalla .pf-bio { font-size: .84rem; }
.mt-telefono__pantalla .pf-boton { min-height: 44px; margin: 16px 0 10px; font-size: .92rem; border-radius: 13px; }
.mt-telefono__pantalla .pf-lista { gap: 8px; }
.mt-telefono__pantalla .pf-fila { min-height: 52px; padding: 8px 10px; gap: 10px; border-radius: 13px; }
.mt-telefono__pantalla .pf-fila__icono { width: 34px; height: 34px; border-radius: 9px; }
.mt-telefono__pantalla .pf-fila__texto strong { font-size: .9rem; }
.mt-telefono__pantalla .pf-fila__texto span { font-size: .76rem; }

.mt-grupo-titulo {
  margin: 22px 0 8px 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ios-gris);
}
.mt-forma > .mt-grupo-titulo:first-child { margin-top: 0; }

.mt-colores { display: flex; gap: 12px; margin-bottom: 16px; }
.mt-color {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: var(--app-tarjeta);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, transform .35s var(--ios-resorte);
}
.mt-color:active { transform: scale(.97); }
.mt-color input { position: absolute; opacity: 0; pointer-events: none; }
.mt-color:has(input:checked) { border-color: var(--blue); }
.mt-color:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.mt-color__muestra { width: 44px; height: 28px; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .2); }
.mt-color__muestra--negra { background: linear-gradient(135deg, #2b2b30, #121215 45%, #0b0b0d); }
.mt-color__muestra--gris { background: linear-gradient(135deg, #b9bcc3, #8a8e96 45%, #6f737b); }

/* Cada botón: su logo, el dato y subir / bajar / quitar. */
.mt-botones { margin-bottom: 10px; }
.mt-botones[hidden] { display: none; }
.mt-boton { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; }
.mt-botones > li + li::before { left: 60px; }
.mt-boton__logo, .mt-menu__logo { flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.mt-boton__logo svg, .mt-menu__logo svg { display: block; width: 100%; height: 100%; }
.mt-boton__campo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mt-boton__nombre { font-size: .74rem; font-weight: 600; color: var(--ios-gris); }
.mt-boton__input {
  width: 100%;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--indigo);
  outline: none;
}
.mt-boton__acciones { display: flex; gap: 2px; flex: none; }
.mt-boton__mover, .mt-boton__quitar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ios-gris);
  cursor: pointer;
}
.mt-boton__mover:disabled { opacity: .25; cursor: default; }
.mt-boton__quitar { color: var(--ios-rojo); }
.mt-boton__mover svg, .mt-boton__quitar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mt-boton__mover:not(:disabled):active, .mt-boton__quitar:active { background: rgba(60, 60, 67, .1); }
.mt-boton.recien { animation: mt-entra .5s var(--ios-resorte); }
.mt-boton.se-va { opacity: 0; transform: translateX(24px); transition: opacity .18s, transform .18s; }
@keyframes mt-entra { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

.mt-agregar { margin-bottom: 6px; }
.mt-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--app-tarjeta);
  animation: mt-entra .4s var(--ios-resorte);
}
.mt-menu[hidden] { display: none; }
.mt-menu__op {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  font-size: .74rem;
  font-weight: 500;
  color: var(--indigo);
  cursor: pointer;
  transition: transform .35s var(--ios-resorte);
}
.mt-menu__op .mt-menu__logo { width: 44px; height: 44px; border-radius: 12px; }
.mt-menu__op:active { transform: scale(.92); }
.mt-menu__op:disabled { opacity: .35; cursor: default; }

/* Interruptor tipo iOS. El checkbox real queda encima, transparente. */
.mt-interruptor { position: relative; cursor: pointer; }
.mt-interruptor input { position: absolute; right: 14px; width: 51px; height: 31px; margin: 0; opacity: 0; cursor: pointer; }
.mt-interruptor input:disabled { cursor: not-allowed; }
.mt-interruptor__pista {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: rgba(120, 120, 128, .2);
  transition: background .25s;
  pointer-events: none;
}
.mt-interruptor__pista::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
  transition: transform .35s var(--ios-resorte);
}
.mt-interruptor input:checked + .mt-interruptor__pista { background: var(--ios-verde); }
.mt-interruptor input:checked + .mt-interruptor__pista::after { transform: translateX(20px); }
.mt-interruptor input:disabled + .mt-interruptor__pista { opacity: .45; }
.mt-interruptor input:focus-visible + .mt-interruptor__pista { outline: 2px solid var(--blue); outline-offset: 2px; }
.mt-nota { font-weight: 500; color: var(--ios-gris); font-size: .86rem; }

.mt-select {
  max-width: 55%;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ios-gris);
  text-align: right;
  cursor: pointer;
}
.mt-liga { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--blue); text-decoration: none; }

.mt-acciones { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.mt-guardado { font-weight: 600; color: var(--ios-verde); opacity: 0; }
.mt-guardado.se-ve { animation: mt-guardado 2.6s ease forwards; }
@keyframes mt-guardado { 0% { opacity: 0; transform: translateY(4px); } 10%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mt-borrar { display: block; margin: 22px auto 0; color: var(--ios-rojo); }

@media (prefers-reduced-motion: reduce) {
  .mt-pronto__tarjeta, .mt-pronto__tarjeta--atras, .mt-vacio__tarjeta { animation: none; }
}

/* Los botones del perfil: arrastrar para ordenar y prender/apagar
   (24 sep 2026, segunda vuelta). */
.mt-ayuda { margin: -2px 0 10px 14px; font-size: .84rem; color: var(--ios-gris); }
.mt-botones { overflow: visible; }
.mt-boton {
  position: relative;
  gap: 10px;
  padding: 8px 8px 8px 4px;
  background: var(--app-tarjeta);
  border-radius: 14px;
  transition: opacity .2s;
}
.mt-botones > li + li::before { left: 90px; }
.mt-boton__manija {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #B8B8BE;
  cursor: grab;
  touch-action: none;
}
.mt-boton__manija svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mt-boton__manija:hover { color: var(--ios-gris); }
.mt-boton__manija:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.mt-boton.is-arrastrando {
  z-index: 5;
  cursor: grabbing;
  box-shadow: 0 18px 36px -12px rgba(15, 12, 40, .35), 0 0 0 1px rgba(37, 99, 235, .25);
  transition: box-shadow .2s;
}
.mt-boton.is-arrastrando .mt-boton__manija { cursor: grabbing; color: var(--blue); }
.en-arrastre > li::before { opacity: 0; }
.en-arrastre { -webkit-user-select: none; user-select: none; }

.mt-boton__select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 18px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px;
  cursor: pointer;
}
.mt-boton__nota { font-size: .92rem; color: var(--ios-gris); padding: 2px 0; }

.mt-boton__interruptor { position: relative; flex: none; display: flex; cursor: pointer; }
.mt-boton__interruptor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mt-boton__interruptor input:checked + .mt-interruptor__pista { background: var(--ios-verde); }
.mt-boton__interruptor input:checked + .mt-interruptor__pista::after { transform: translateX(20px); }
.mt-boton__interruptor input:focus-visible + .mt-interruptor__pista { outline: 2px solid var(--blue); outline-offset: 2px; }

.mt-boton.is-apagado .mt-boton__logo { filter: grayscale(1); opacity: .45; }
.mt-boton.is-apagado .mt-boton__nombre::after { content: " · Oculto"; }
.mt-boton.is-apagado .mt-boton__input { color: var(--ios-gris); }

@media (max-width: 520px) {
  .mt-boton { gap: 8px; }
  .mt-boton__logo { width: 30px; height: 30px; }
  .mt-botones > li + li::before { left: 80px; }
}

/* Tarjeta de metal · tercera vuelta (24 sep 2026): foto, lada,
   reseña con buscador, fidelidad marcada Pro y un arrastre más suave. */
.mt-foto { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.mt-foto__ver {
  display: grid;
  place-items: center;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(160deg, #3B3780, #14113A) center / cover no-repeat;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--app-fondo), 0 0 0 4px var(--app-hilo);
}
.mt-foto__ver.tiene-foto { background-color: #fff; }
.mt-foto__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mt-foto__subir { position: relative; overflow: hidden; cursor: pointer; }
.mt-foto__campo { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mt-foto__ayuda { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--ios-gris); }

.mt-tel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-tel .mt-boton__input { flex: 1; min-width: 0; }
.mt-tel__lada {
  flex: none;
  max-width: 96px;
  padding: 3px 6px;
  border: 1px solid var(--app-hilo);
  border-radius: 8px;
  background: rgba(118, 118, 128, .08);
  font: inherit;
  font-size: .86rem;
  color: var(--indigo);
}
.mt-boton__valor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; color: var(--indigo); }
.mt-boton__valor.is-vacio { color: var(--ios-gris); }
.mt-boton__cambiar { flex: none; font-size: .9rem; }
.mt-boton__ayuda { font-size: .76rem; }
.mt-boton__liga { color: var(--blue); text-decoration: none; font-size: .9rem; }
.mt-plan {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: 1px;
}

/* El panel de la reseña se abre DEBAJO del renglón. */
.mt-boton.con-panel { flex-wrap: wrap; }
.mt-resena {
  flex-basis: 100%;
  margin: 6px 0 4px 38px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(118, 118, 128, .08);
}
.mt-resena[hidden] { display: none; }
.mt-resena__titulo { margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ios-gris); }
.mt-resena__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mt-resena .pan-editor__bloque, .mt-resena .pan-buscar { margin: 0; }

.mt-menu__op { position: relative; }
.mt-menu__pro { position: absolute; top: 2px; right: 50%; margin-right: -30px; padding: 1px 6px; font-size: .56rem; }
body.es-pro .mt-menu__pro { display: none; }

/* El arrastre suave: la manija más grande para el dedo y sin
   transiciones peleando con el transform que pone el script. */
.mt-boton__manija { width: 40px; height: 44px; }
.mt-boton { will-change: transform; }
.en-arrastre .mt-boton:not(.is-arrastrando) { pointer-events: none; }
.mt-boton.is-arrastrando { transition: box-shadow .2s !important; }

/* Idioma (CONTEXTO §2V): la fila de Ajustes no abre página, lleva el
   selector ES / EN a la derecha. En la entrada va arriba a la derecha. */
.ios-fila--idioma { cursor: default; }
.ios-fila--idioma .idioma { margin-left: auto; }
.acceso__lado { position: relative; }
.acceso__idioma { position: absolute; top: 16px; right: var(--gutter, 16px); z-index: 2; }

/* Metal, 25 sep 2026: renglones de varios datos (menú, CLABE), los
   toques de cada botón y la galería (Pro). */
.mt-boton__input--doble + .mt-boton__input--doble { border-top: 1px solid var(--ios-separador, rgba(60, 60, 67, .12)); padding-top: 6px; margin-top: 4px; }
.mt-boton__clics { font-size: .72rem; color: var(--blue, #2563EB); font-weight: 600; }
.mt-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px; }
.mt-galeria__foto, .mt-galeria__mas {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #F2F2F7 center / cover no-repeat;
}
.mt-galeria__quitar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  cursor: pointer;
}
.mt-galeria__quitar svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.mt-galeria__mas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px dashed #C7C7CC;
  color: var(--ios-gris, #8E8E93);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.mt-galeria__mas > span:first-child { font-size: 1.6rem; line-height: 1; }
.mt-galeria__mas.is-subiendo { opacity: .5; pointer-events: none; }
.mt-galeria > .mt-boton__liga { grid-column: 1 / -1; }

/* Contactos de la tarjeta de metal (6 oct 2026, D-30). */
.mt-contactos { margin: 10px 0 18px; }
.mt-contactos__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 8px; }
.mt-contacto { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-width: 0; }
.mt-contacto__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mt-contacto__txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-contacto__txt span, .mt-contacto__txt small { color: var(--ios-gris); font-size: .84rem; overflow-wrap: anywhere; }
.mt-contacto__accion { flex: none; padding: 7px 12px; border-radius: 999px; background: #25D366; color: #fff; font-size: .82rem; font-weight: 650; text-decoration: none; }
.mt-contacto__quitar { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ios-gris); font-size: 1.2rem; cursor: pointer; }

/* LA GUÍA DE LA APP (6 oct 2026): unas pantallas al entrar, con «Saltar». */
.guia { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s; }
.guia.esta-abierta { opacity: 1; }
.guia__caja { position: relative; width: 100%; max-width: 420px; box-sizing: border-box; padding: 28px 22px 20px;
  border-radius: 26px; background: var(--app-tarjeta, #fff); color: #1C1C1E; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); transform: translateY(20px); transition: transform .25s;
  margin-bottom: env(safe-area-inset-bottom, 0); }
.guia.esta-abierta .guia__caja { transform: none; }
@media (min-width: 700px) { .guia { align-items: center; } }
.guia__saltar { position: absolute; top: 14px; right: 14px; border: 0; background: transparent; color: var(--ios-gris);
  font: inherit; font-size: .9rem; cursor: pointer; padding: 6px 8px; }
.guia__icono { width: 68px; height: 68px; margin: 6px auto 14px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(160deg, #3B82F6, #2563EB); color: #fff; }
.guia__icono--plus { background: linear-gradient(160deg, #FFB020, #FF7A00); }
.guia__icono svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guia__titulo { margin: 0 0 8px; font-size: 1.35rem; letter-spacing: -.01em; }
.guia__texto { margin: 0 auto; max-width: 32ch; color: var(--ios-gris); line-height: 1.5; min-height: 4.5em; }
.guia__puntos { display: flex; justify-content: center; gap: 6px; margin: 18px 0; }
.guia__puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--ios-separador, rgba(60, 60, 67, .2)); transition: width .2s; }
.guia__puntos i.es-actual { width: 20px; border-radius: 4px; background: #2563EB; }
.guia__acciones { display: flex; gap: 10px; }
.guia__acciones .btn { flex: 1; min-width: 0; }
.guia__atras[hidden] { display: none; }

/* PRODUCTOS COMO LISTA (6 oct 2026): renglones con una línea de ayuda y «‹ Productos». */
.ios-fila__sub { display: block; margin-top: 2px; color: var(--ios-gris); font-size: .82rem; font-weight: 400; line-height: 1.3; }
.prod-accesos .ios-fila__texto { min-width: 0; }
.prod-titulo { margin-top: 4px; }
.prod-atras { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 12px -4px; padding: 6px 8px 6px 2px;
  border: 0; background: transparent; color: #2563EB; font: inherit; font-weight: 600; cursor: pointer; }
.prod-atras svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.solo-metal .prod-atras { display: none; }

/* LOS RENGLONES DE LA TARJETA DE METAL EN CELULAR (6 oct 2026). Antes iban
   en una sola línea y el campo quedaba de 30–130 px («Ca… Cambiar»,
   «+52 MX 8112»). Ahora: arriba ícono, nombre, interruptor y ×; abajo el
   campo a todo lo ancho. .mt-boton__campo se vuelve «contents» para que
   sus hijos se acomoden en la rejilla del renglón. */
@media (max-width: 700px) {
  .mt-botones .mt-boton {
    display: grid;
    grid-template-columns: 28px 32px minmax(0, 1fr) auto auto;
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
  }
  .mt-botones .mt-boton__manija { grid-column: 1; grid-row: 1; width: 28px; }
  .mt-botones .mt-boton__logo { grid-column: 2; grid-row: 1; }
  .mt-botones .mt-boton__campo { display: contents; }
  .mt-botones .mt-boton__nombre { grid-column: 3; grid-row: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mt-botones .mt-boton__interruptor { grid-column: 4; grid-row: 1; }
  .mt-botones .mt-boton__quitar { grid-column: 5; grid-row: 1; }
  .mt-botones .mt-boton__campo > :not(.mt-boton__nombre) { grid-column: 2 / -1; min-width: 0; }
  .mt-botones .mt-boton__input, .mt-botones .mt-tel { width: 100%; box-sizing: border-box; }
  .mt-botones .mt-tel { display: flex; gap: 8px; }
  .mt-botones .mt-tel .mt-boton__input { flex: 1; min-width: 0; }
  .mt-botones > li + li::before { left: 14px; }
}

/* EL MINI CRM DE LA TARJETA (6 oct 2026): arriba de todo en «Mi tarjeta». */
.mt-crm { margin: 4px 0 22px; padding: 14px 16px 6px; border-radius: 18px; background: var(--app-tarjeta, #fff); }
.mt-crm[hidden] { display: none; }
.mt-crm__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-crm__titulo { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.mt-crm__switch { flex: none; margin: 0; }
.mt-crm .mt-contactos { margin: 8px 0 10px; }
.mt-crm .mt-contactos__lista { margin: 0; background: transparent; }
.mt-crm .mt-contacto { padding: 10px 0; border-top: 1px solid var(--ios-separador, rgba(60, 60, 67, .15)); }
.mt-crm .mt-ayuda { margin: 6px 0 0; padding: 0; }
.planes-app--membresia { margin: 8px 0 16px; text-align: left; max-width: 100%; min-width: 0; overflow-x: auto; }
#pantalla-bloqueada { min-width: 0; max-width: 100%; overflow-x: hidden; }
.acceso__lado { min-width: 0; max-width: 100%; }
/* Una columna sólo en celular: con el selector de ID esto pisaba las dos
   columnas de panel.css y en computadora la marca salía arriba y el
   formulario abajo (12 oct 2026). */
@media (max-width: 899.98px) { #zona-acceso { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { #zona-acceso { grid-template-columns: minmax(380px, 46%) minmax(0, 1fr); } }

/* LA DEMO (6 oct 2026): la franja de arriba. */
.demo-franja { position: fixed; z-index: 9500; left: 50%; transform: translateX(-50%); bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border-radius: 999px; background: rgba(20, 20, 24, .92); color: #fff; font-size: .82rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: calc(100% - 24px); white-space: nowrap; }
.demo-franja button { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.demo-franja span { overflow: hidden; text-overflow: ellipsis; }
.demo-franja a { flex: none; padding: 6px 12px; border-radius: 999px; background: #2563EB; color: #fff; font-weight: 650; text-decoration: none; }
body:has(#guia-app) .demo-franja { display: none; }

/* UN TIP POR SECCIÓN (6 oct 2026): arriba de la sección, la primera vez. */
.tip-seccion { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 14px 14px 16px; border-radius: 16px;
  background: var(--app-tarjeta, #fff); border-left: 4px solid #2563EB; box-shadow: 0 6px 18px rgba(15, 23, 42, .08); transition: opacity .2s, transform .2s; }
.tip-seccion.se-va { opacity: 0; transform: translateY(-6px); }
.tip-seccion p { flex: 1; min-width: 0; margin: 0; font-size: .92rem; line-height: 1.45; }
.tip-seccion__ok { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: #2563EB; color: #fff; font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer; }
@media (max-width: 420px) { .tip-seccion { flex-direction: column; align-items: stretch; } .tip-seccion__ok { align-self: flex-end; } }

/* El mini CRM se abre al picarle (6 oct 2026). */
details.mt-crm { padding: 0; }
.mt-crm > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.mt-crm > summary::-webkit-details-marker { display: none; }
.mt-crm__titulo { flex: 1; min-width: 0; font-weight: 650; }
.mt-crm__cuantos { min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: #2563EB; color: #fff; font-size: .8rem; font-weight: 700; display: inline-grid; place-items: center; }
.mt-crm__cuantos[hidden] { display: none; }
.mt-crm__flecha { width: 18px; height: 18px; fill: none; stroke: var(--ios-gris, #8e8e93); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.mt-crm[open] .mt-crm__flecha { transform: rotate(90deg); }
.mt-crm[open] > summary { border-bottom: 1px solid var(--ios-separador, rgba(60, 60, 67, .15)); }
details.mt-crm > .mt-crm__switch, details.mt-crm > .mt-contactos { margin-left: 16px; margin-right: 16px; }
details.mt-crm > .mt-crm__switch { margin-top: 12px; }

/* «Sellar» fijo junto a las pestañas de Fidelidad (6 oct 2026). */
.fid-barra { display: flex; align-items: center; gap: 8px; }
.fid-barra .fid-secciones { flex: 1; min-width: 0; }
.fid-escanear-fijo { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #2563EB; color: #fff; font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.fid-escanear-fijo[hidden] { display: none; }
.fid-escanear-fijo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 430px) { .fid-escanear-fijo { width: 40px; padding: 0; justify-content: center; } .fid-escanear-fijo span { display: none; } }
.fid-barra { position: sticky; top: 0; z-index: 5; margin-bottom: 14px; }
.fid-barra .fid-secciones { position: static; margin-bottom: 0; }

/* CLIENTES, EL CRM (6 oct 2026). */
.cli-barra { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.cli-buscar { flex: 1; min-width: 0; }
.cli-filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; scrollbar-width: none; }
.cli-filtros::-webkit-scrollbar { display: none; }
.cli-chip { flex: none; border: 0; border-radius: 999px; padding: 7px 12px; background: var(--app-tarjeta, #fff); color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.cli-chip.es-activo { background: #2563EB; color: #fff; }
.cli-lista { padding: 0; }
.cli-fila + .cli-fila { border-top: 1px solid var(--ios-separador, rgba(60, 60, 67, .15)); }
.cli-fila__cab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cli-fila__ini { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #3B82F6, #2563EB); color: #fff; font-weight: 700; font-size: .85rem; }
.cli-fila__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cli-fila__txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-fila__txt span { color: var(--ios-gris, #8e8e93); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-fila__hoy { flex: none; padding: 3px 9px; border-radius: 999px; background: #FF9500; color: #fff; font-size: .75rem; font-weight: 700; }
.cli-ficha { padding: 4px 14px 16px; display: grid; gap: 12px; }
.cli-ficha__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cli-accion { padding: 8px 14px; border-radius: 999px; background: var(--ios-fondo, rgba(120, 120, 128, .12)); color: inherit; text-decoration: none; font-size: .88rem; font-weight: 650; }
.cli-accion--wa { background: #25D366; color: #fff; }
.cli-ficha__datos { margin: 0; color: var(--ios-gris, #8e8e93); font-size: .88rem; overflow-wrap: anywhere; }
.cli-origenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cli-origenes li { display: flex; flex-direction: column; gap: 1px; font-size: .86rem; }
.cli-origenes span { color: var(--ios-gris, #8e8e93); overflow-wrap: anywhere; }
.cli-ficha__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cli-campo { display: grid; gap: 4px; min-width: 0; }
.cli-notas { resize: vertical; min-height: 70px; }
.mt-crm__ir { display: inline-block; margin: 0 2px 10px; font-size: .88rem; }

/* CLIENTES en el celular (6 oct 2026): la fecha se salía de la tarjeta. */
.cli-ficha input, .cli-ficha select, .cli-ficha textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.cli-ficha input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 44px; text-align: left; }
@media (max-width: 520px) { .cli-ficha__fila { grid-template-columns: minmax(0, 1fr); } }
.cli-ficha { overflow: hidden; }
.cli-fila__txt b, .cli-fila__txt span { max-width: 100%; }
.cli-con-plus { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--app-tarjeta, #fff); font-size: .86rem; }
.cli-con-plus[hidden] { display: none; }

/* Tarjeta de metal (7 oct 2026): Clientes viene incluido, sin etiqueta de Plus. */
body[data-linea="metal"] [data-vista="clientes"] .crm-nav__pro { display: none; }