/* ============================================================================
   Moderniva — app: splash, login, tabs, pila de páginas, chats, chat, cámara,
   clientes, calendario, tareas, ajustes. Animaciones GPU (transform/opacity).
   ========================================================================== */

/* --------------------------------------------------------------- splash ---- */
.splash {
  position: fixed; inset: 0; z-index: 100;
  background: var(--fondo);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity .4s, transform .4s;
}
.splash.salir { opacity: 0; transform: scale(1.04); pointer-events: none; }
.splash__logo {
  width: 96px; height: 96px; border-radius: 22px; display: block;
  animation: splash-latido 1.6s ease-in-out infinite;
}
/* Oscuro: el logo es negro sobre blanco → invert lo vuelve blanco sobre negro,
   que se funde con el fondo negro del splash. */
[data-tema="oscuro"] .splash__logo { filter: invert(1); }
@keyframes splash-latido { 50% { transform: scale(.94); opacity: .82; } }
/* Aviso de arranque lento: aparece bajo el logo si la carga se demora */
.splash__aviso { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 32px; }
.splash__aviso-texto { font-size: 14px; line-height: 1.5; text-align: center; color: var(--tinta-media); }
.splash__marca, .login__marca {
  font-size: 34px; font-weight: 800; letter-spacing: -.02em;
  color: var(--tinta);
}

/* ---------------------------------------------------------------- login ----
   Un paso por pantalla, a sangre: bienvenida → correo → contraseña → código.
   Cada paso ocupa todo el alto y se cruza con el siguiente (transform/opacity).
   Sin adornos de fondo: el usuario mira una sola cosa a la vez. */
/* Gris de apoyo del login: --tinta-suave da 3.55:1 sobre el fondo, por debajo
   del 4.5 exigido para texto. Este llega a 5.4:1 (claro) y 6.6:1 (oscuro).
   Vive en :root porque la sheet de recuperación se pinta fuera de .login. */
:root { --login-tenue: #6B6963; }
[data-tema="oscuro"] { --login-tenue: #9A9A9A; }

.login, .pronto {
  position: fixed; inset: 0; z-index: 60;
  background: var(--fondo);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px calc(24px + env(safe-area-inset-right, 0px)) calc(28px + var(--safe-abajo)) calc(24px + env(safe-area-inset-left, 0px));
  opacity: 0; transform: translateY(10px);
  transition: opacity .32s, transform .32s;
}
.login { padding: 0; overflow: hidden; }
.login.visible, .pronto.visible { opacity: 1; transform: none; }
.pronto__caja { width: 100%; max-width: 360px; text-align: center; }
.login__marca { font-size: 26px; letter-spacing: -.025em; }

/* Flecha de volver: flota sobre los pasos, en la zona segura de arriba. */
.login__atras {
  position: absolute; z-index: 2;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc(8px + env(safe-area-inset-left, 0px));
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--tinta);
  transition: opacity .2s, transform .12s ease;
}
.login__atras:active { transform: scale(.88); }
.login__atras[hidden] { display: none; }
.login__atras svg { width: 24px; height: 24px; }

/* ---- Los pasos. Todos apilados; solo .paso--activo se ve y recibe toques.
   --dx = de qué lado entra (o hacia dónde sale) cada paso. Lo fija login.js
   según la dirección: hacia adelante entra por la derecha, atrás por la izq.
   ↓ EDITA AQUÍ: el recorrido del cruce y su duración. */
.login__pasos { position: absolute; inset: 0; }
.paso {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  /* ↓ EDITA AQUÍ: el margen lateral. Lo comparten líneas, textos y botón:
     que coincidan es lo que da la sensación de pantalla aprovechada. */
  --margen: 24px;
  padding: calc(58px + env(safe-area-inset-top, 0px))
           calc(var(--margen) + env(safe-area-inset-right, 0px))
           calc(26px + var(--safe-abajo))
           calc(var(--margen) + env(safe-area-inset-left, 0px));
  opacity: 0; transform: translateX(var(--dx, 0px));
  pointer-events: none;
  transition: opacity .26s ease, transform .3s cubic-bezier(.22, .8, .28, 1);
}
.paso--activo { opacity: 1; transform: none; pointer-events: auto; }
.paso[hidden] { display: none; }

/* Bienvenida: el bloque de marca centrado, el botón anclado al pie.
   Los pasos con formulario suben el contenido para dejarle sitio al teclado. */
.paso__centro {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
}
.paso--forma .paso__centro { justify-content: flex-start; padding-top: clamp(4px, 5vh, 44px); }
.paso__centro > * { flex: none; width: 100%; max-width: 420px; }
.paso__pie { flex: none; width: 100%; max-width: 420px; margin: 24px auto 0; }

.paso__logo { width: 132px; height: 132px; border-radius: 30px; margin: 0 auto 34px; display: block; }
[data-tema="oscuro"] .paso__logo { filter: invert(1); }  /* logo negro sobre blanco → blanco sobre negro */
.paso__marca { font-size: 38px; font-weight: 800; letter-spacing: -.03em; }
.paso__titulo { font-size: 32px; font-weight: 800; letter-spacing: -.025em; }
/* Subtítulo en tinta plena, no gris: es instrucción, no letra chica. */
.paso__sub {
  color: var(--tinta); font-size: 17px; line-height: 1.4;
  margin-top: 14px; text-wrap: balance;
}
.paso__sub strong { font-weight: 700; overflow-wrap: anywhere; }  /* un correo largo se parte sin desbordar */

/* Ícono grande y sin cápsula: es la ilustración del paso, no una viñeta. El
   trazo se afina porque a 96px un stroke normal se vuelve una mancha. */
.paso__icono { display: block; margin: 0 auto 26px; color: var(--tinta); }
.paso__icono svg { width: 96px; height: 96px; stroke-width: 1.15; }

.paso .btn--grande { padding: 18px 20px; font-size: 17px; }
.paso .btn--bloque { margin-top: 32px; }

/* Entrada escalonada de la bienvenida: nada llamativo, solo un respiro. */
.paso[data-paso="bienvenida"].paso--activo .paso__logo,
.paso[data-paso="bienvenida"].paso--activo .paso__marca,
.paso[data-paso="bienvenida"].paso--activo .paso__sub,
.paso[data-paso="bienvenida"].paso--activo .paso__pie {
  animation: paso-asomar .55s cubic-bezier(.22, .8, .28, 1) both;
}
.paso[data-paso="bienvenida"].paso--activo .paso__marca { animation-delay: .07s; }
.paso[data-paso="bienvenida"].paso--activo .paso__sub   { animation-delay: .13s; }
.paso[data-paso="bienvenida"].paso--activo .paso__pie   { animation-delay: .2s; }
@keyframes paso-asomar {
  from { opacity: 0; transform: translateY(14px); }
}

.paso.sacudir { animation: sacudir .4s; }
@keyframes sacudir {
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(4px); }
}
.login__error { color: var(--rojo); font-size: 13.5px; font-weight: 600; margin-top: 14px; text-align: center; }

/* Botón y enlaces del login: café de Moderniva, NO el acento del tenant —
   antes de entrar aún no sabemos de qué cuenta es el usuario. La sheet de
   recuperación cuelga fuera de .login, pero se abre encima: hereda. */
.login .btn--primario,
#pantalla-login:not([hidden]) ~ #capa-sheets .btn--primario {
  background: #332E27; color: #F7F6F3;
}
[data-tema="oscuro"] .login .btn--primario,
[data-tema="oscuro"] #pantalla-login:not([hidden]) ~ #capa-sheets .btn--primario {
  background: #EDEDED; color: #000;
}
/* Destello del botón de bienvenida: una franja de luz que barre el botón, rápida
   y espaciada. En claro es luz sobre el café; en oscuro, un velo sobre el botón
   claro (una luz blanca sobre blanco no se vería). */
#login-empezar { position: relative; overflow: hidden; --brillo: rgba(255, 255, 255, .38); }
[data-tema="oscuro"] #login-empezar { --brillo: rgba(0, 0, 0, .13); }
#login-empezar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, var(--brillo) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: brillo-barrido 3.6s ease-in-out infinite;  /* cada cuánto destella — edita aquí */
}
@keyframes brillo-barrido {
  0%   { transform: translateX(-100%); }
  17%  { transform: translateX(100%); }  /* 17% de 3.6s ≈ 0.6s de barrido: súbelo para hacerlo más lento */
  100% { transform: translateX(100%); }
}

/* Deshabilitado: gris plano, como el "Continue" apagado de Telegram. */
.login .btn--primario:disabled,
[data-tema="oscuro"] .login .btn--primario:disabled {
  background: var(--superficie-2); color: var(--login-tenue); opacity: 1;
}
.login__enlace {
  display: block; margin: 18px auto 0; padding: 8px 10px;
  background: none; border: none; cursor: pointer;
  color: var(--login-tenue); font-size: 13.5px; font-weight: 700;
}

/* Campo de una sola línea: rótulo tenue arriba, subrayado que se enciende. */
.campo-linea {
  display: block; position: relative;
  padding-bottom: 8px; margin-bottom: 22px;
  border-bottom: 1.5px solid var(--linea-fuerte);
  transition: border-color .2s;
}
/* Variante sin rótulo (el título del paso ya dice qué se pide): el dato solo,
   entre dos líneas que cruzan la pantalla de margen a margen. */
/* Gris de verdad, no tinta al 10%: una tinta translúcida sigue leyéndose
   oscura sobre el crema. ↓ EDITA AQUÍ para subir o bajar el gris. */
.campo-linea--suelto {
  --linea-campo: #D6D3CD;
  margin: 34px 0 0; padding: 17px 0; text-align: left;
  border-top: 1px solid var(--linea-campo);
  border-bottom: 1px solid var(--linea-campo);
}
[data-tema="oscuro"] .campo-linea--suelto { --linea-campo: #2A2A2A; }
/* Doble clase: gana al .campo-linea:focus-within de abajo, que enciende el
   subrayado en tinta. Aquí la línea no se enciende: se queda gris. */
.campo-linea.campo-linea--suelto:focus-within { border-color: var(--linea-campo); }
.campo-linea--suelto .campo-linea__input { font-size: 20px; font-weight: 600; }
.campo-linea--suelto .campo-linea__ojo { right: -6px; bottom: 50%; transform: translateY(50%); }
.campo-linea--suelto .campo-linea__ojo:active { transform: translateY(50%) scale(.86); }
.campo-linea--suelto .campo-linea__input--codigo { font-size: 26px; text-align: center; }
.campo-linea:focus-within { border-color: var(--tinta); }
.campo-linea__rotulo {
  display: block; font-size: 11.5px; font-weight: 700;
  color: var(--login-tenue); letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 5px;
}
.campo-linea__input {
  width: 100%; border: 0; background: none; padding: 0;
  font-size: 16px; font-weight: 600;   /* 16px: evita el zoom automático al enfocar */
  color: var(--tinta); user-select: text;
}
.campo-linea__input:focus { outline: none; }
.campo-linea__input::placeholder { color: var(--tinta-terciaria); font-weight: 500; }
.campo-linea__input--clave { padding-right: 42px; letter-spacing: .02em; }
.campo-linea__ojo {
  position: absolute; right: -8px; bottom: -4px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-terciaria);
  transition: color .2s, transform .12s ease;
}
.campo-linea__ojo:active { transform: scale(.86); }
.campo-linea__ojo[aria-pressed="true"] { color: var(--tinta); }
.campo-linea__ojo svg { width: 21px; height: 21px; }

/* ---- Verificación en dos pasos (2FA / TOTP) — login y ajustes ---- */
.campo__input--codigo,
.campo-linea__input--codigo {
  text-align: center; font-size: 24px; font-weight: 700;
  letter-spacing: .45em; padding-left: .45em; /* recentra el tracking */
  font-variant-numeric: tabular-nums;
}
.mfa-estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14.5px; margin-bottom: 6px;
}
.mfa-estado--on { color: var(--ok); }
.mfa-estado svg { width: 18px; height: 18px; }
.mfa-qr {
  display: grid; place-items: center; min-height: 208px;
  background: #fff; border-radius: 16px; padding: 16px; margin: 8px 0 14px;
}
.mfa-qr__img { width: 200px; height: 200px; display: block; image-rendering: pixelated; }
.mfa-qr__cargando { color: var(--tinta-suave); font-size: 13.5px; }
.mfa-alt { display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: center; margin: 8px 0 2px; }
/* Área táctil de 44px: son botones reales, no letra chica al pie. */
.mfa-alt__link {
  background: none; border: none; cursor: pointer;
  color: var(--acento-ui); font-size: 15px; font-weight: 700;
  padding: 12px 10px; min-height: 44px;
}
.mfa-alt__link:active { opacity: .6; }
/* Confirmación de salida que cubre el sheet de activación 2FA (sin cerrarlo) */
.mfa-salir {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(0, 0, 0, .42);
  border-radius: inherit;
}
.mfa-salir__caja {
  width: 100%; max-width: 320px;
  background: var(--superficie); border-radius: 16px; padding: 20px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
#mfa-abrir svg { width: 17px; height: 17px; }
.mfa-secreto { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: center; }
.mfa-secreto__rotulo { color: var(--tinta-suave); font-size: 12.5px; }
.mfa-secreto code {
  font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 700;
  letter-spacing: .1em; word-break: break-all;
  background: var(--superficie-2); border-radius: 10px; padding: 9px 10px;
}
.pronto__caja h2 { font-size: 20px; font-weight: 800; margin: 14px 0 8px; }
.pronto__caja p { color: var(--tinta-suave); margin-bottom: 26px; }

/* ------------------------------------------------------------------ app ---- */
#app { position: fixed; inset: 0; opacity: 0; transition: opacity .3s; }
#app.visible { opacity: 1; }

.tabs {
  position: absolute; inset: 0;
  bottom: calc(64px + var(--safe-abajo));
  transition: transform .34s cubic-bezier(.25,.9,.3,1);
  will-change: transform;
  background: var(--fondo);
}
.tabs.empujada { transform: translateX(-28%); }

.tab {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--fondo);
}
.tab--entrando { animation: tab-entra .22s ease-out; }
@keyframes tab-entra {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* pila de páginas (por encima del tabbar: una página abierta ocupa TODO) */
.pila { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.pagina {
  position: absolute; inset: 0;
  background: var(--fondo);
  box-shadow: var(--sombra-pagina);
  transform: translateX(103%);
  transition: transform .36s cubic-bezier(.22, 1, .3, 1);
  will-change: transform;
  pointer-events: auto;
  display: flex; flex-direction: column;
}
.pagina--visible { transform: translateX(0); }
.pagina.empujada { transform: translateX(-28%); }

/* tabbar */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(64px + var(--safe-abajo));
  padding: 4px 4px var(--safe-abajo);
  display: flex;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--linea);
  z-index: 30;
}
[data-tema="oscuro"] .tabbar { background: #0A0A0A; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tabbar__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--tinta-suave);
  position: relative;
  transition: color .2s, transform .12s;
}
.tabbar__item:active { transform: scale(.92); }
.tabbar__item.activo { color: var(--acento-ui); }
.tabbar__icono { width: 25px; height: 25px; }
.tabbar__icono svg { width: 25px; height: 25px; stroke-width: 2.3; }
.tabbar__rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.tabbar__badge {
  position: absolute; top: 4px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--acento-ui); color: var(--fondo);
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  animation: badge-pop .3s cubic-bezier(.34,1.56,.64,1);
}
[data-tema="oscuro"] .tabbar__badge { color: #000; }
@keyframes badge-pop { from { transform: scale(0); } }

/* ---------------------------------------------------------- cabeceras ------ */
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + var(--safe-arriba)) 18px 10px;
  flex: none;
}
.cabecera__titulo { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.cabecera__acciones { display: flex; align-items: center; gap: 6px; }

.buscador {
  margin: 2px 16px 8px;
  display: flex; align-items: center; gap: 9px;
  background: var(--superficie-2);
  border-radius: 12px;
  padding: 9px 13px;
  flex: none;
}
.buscador__icono { width: 18px; height: 18px; color: var(--tinta-terciaria); flex: none; }
.buscador__icono svg { width: 18px; height: 18px; }
.buscador__input {
  flex: 1; border: 0; background: none; outline: none;
  font-size: 15px; user-select: text;
}
.buscador__input::placeholder { color: var(--tinta-terciaria); }

.lista-scroll {
  flex: 1; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: none;
}
.lista-scroll::-webkit-scrollbar, .chat-hilo::-webkit-scrollbar,
.kanban::-webkit-scrollbar, .kanban__tarjetas::-webkit-scrollbar,
.sheet__cuerpo::-webkit-scrollbar { display: none; }
.chat-hilo, .kanban, .kanban__tarjetas, .sheet__cuerpo { scrollbar-width: none; }

/* ----------------------------------------------- Chats: cabecera estilo ----
   Título centrado, difuminación de acento arriba, pestañas segmentadas y el
   icono de fuego que filtra a los leads calientes. */
.cabecera--centro { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px; }
.cabecera--centro > #chats-archivadas { justify-self: start; grid-column: 1; }
.cabecera--centro .cabecera__titulo { grid-column: 2; text-align: center; }
.cabecera--centro .cabecera__acciones { grid-column: 3; justify-self: end; }


/* Pestañas segmentadas: activa = píldora con el acento, resto texto plano.
   Con 6 pestañas (Todos/No leídos/Fijados + las 3 de temperatura) no caben
   todas en una fila fija, así que la barra desliza horizontal. */
.chats-tabs--scroll {
  overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
}
.chats-tabs--scroll::-webkit-scrollbar { display: none; }
.chats-tabs--scroll .chats-tab { flex: none; white-space: nowrap; }
.chats-tabs { flex: none; display: flex; gap: 6px; padding: 2px 16px 10px; }
.chats-tab {
  font-size: 13.5px; font-weight: 700; color: var(--tinta-suave);
  padding: 7px 15px; border-radius: 999px; background: transparent;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
.chats-tab.activo { background: var(--acento-ui); color: var(--fondo); }
[data-tema="oscuro"] .chats-tab.activo { color: #000; }
.chats-tab:active { transform: scale(.96); }

/* Las 3 pestañas de temperatura llevan el mismo color que su etiqueta en la
   ficha del lead (§ficha__estado), no el acento del tenant: así se reconoce
   frío/tibio/caliente de un vistazo, igual en toda la app. */
.chats-tab--frio.activo { background: color-mix(in srgb, var(--cal-cita) 16%, transparent); color: var(--tinta); }
.chats-tab--tibio.activo { background: color-mix(in srgb, var(--ambar) 16%, transparent); color: var(--tinta); }
.chats-tab--caliente.activo { background: color-mix(in srgb, var(--rojo) 16%, transparent); color: var(--tinta); }
[data-tema="oscuro"] .chats-tab--frio.activo,
[data-tema="oscuro"] .chats-tab--tibio.activo,
[data-tema="oscuro"] .chats-tab--caliente.activo { color: var(--tinta); }

/* Barra de búsqueda plegable (la abre la lupa de la cabecera) */
#chats-buscador {
  overflow: hidden; max-height: 48px;
  transition: max-height .28s ease, opacity .22s ease, margin .28s ease, padding .28s ease;
}
#chats-buscador.buscador--oculto {
  max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;
  padding-top: 0; padding-bottom: 0; pointer-events: none;
}

/* ------------------------------------------------------------- Tu día ------ */
.tu-dia {
  flex: none; overflow: hidden;
  transition: max-height .34s cubic-bezier(.25,.9,.3,1), opacity .26s;
  max-height: 190px;
}
.tu-dia--colapsada { max-height: 0; opacity: 0; }
.tu-dia__interior {
  margin: 0 16px 10px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 13px 15px;
}
[data-tema="oscuro"] .tu-dia__interior { background: var(--superficie); }
.tu-dia__saludo { font-weight: 800; font-size: 15.5px; margin-bottom: 9px; }
.tu-dia__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip-dia {
  font-size: 12.5px; font-weight: 600;
  background: var(--superficie-2);
  color: var(--tinta-suave);
  border-radius: 999px; padding: 4.5px 11px;
}
.chip-dia strong { color: var(--tinta); font-weight: 800; }
.chip-dia--alerta { background: var(--acento-suave); color: var(--tinta); }
.chip-dia--alerta strong { color: var(--acento-ui); }
.chip-dia--ambar { background: color-mix(in srgb, var(--ambar) 14%, transparent); }
.chip-dia--ambar strong { color: var(--ambar); }
.tu-dia__espera {
  display: flex; align-items: center; gap: 9px;
  width: 100%; margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--linea);
  font-size: 13.5px; color: var(--tinta-suave);
  text-align: left;
}
.tu-dia__espera strong { color: var(--tinta); }
.tu-dia__espera-punto {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--ambar);
  animation: latido 1.6s infinite;
}
@keyframes latido { 50% { transform: scale(1.35); opacity: .6; } }
.tu-dia__espera-texto { flex: 1; }
.tu-dia__espera-ir { width: 17px; height: 17px; color: var(--tinta-terciaria); flex: none; }
.tu-dia__espera-ir svg { width: 17px; height: 17px; }

/* --------------------------------------------------------- fila de chat ---- */
.ptr {
  position: absolute; top: -46px; left: 0; right: 0;
  display: flex; justify-content: center;
  transition: transform .3s cubic-bezier(.25,.9,.3,1);
  z-index: 5;
}
.ptr__aro {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--linea-fuerte);
  border-top-color: var(--acento-ui);
  background: var(--superficie);
  transition: transform .2s;
}
.ptr.listo .ptr__aro { transform: rotate(200deg); }
.ptr.girando .ptr__aro { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Un solo bloque angosto (margen izq/der) agrupa TODAS las filas juntas, sin
   separación entre ellas — así el difuminado de arriba no se corta contra un
   borde recto, pero los chats quedan pegados unos a otros como una lista. */
.chats-grupo {
  margin: 0 20px; border-radius: 16px; overflow: hidden;
}
.fila-swipe { position: relative; overflow: hidden; }
.fila-swipe:not(:last-child) .fila-chat { border-bottom: 1px solid var(--linea); }
.fila-swipe__fondo {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px;
}
.fila-swipe__accion { width: 26px; height: 26px; opacity: 0; transition: opacity .15s, transform .2s; }
.fila-swipe__accion svg { width: 26px; height: 26px; }
.fila-swipe__accion--leido { color: var(--acento-ui); }
.fila-swipe__accion--archivar { color: var(--ambar); }
.fila-swipe.rev-derecha .fila-swipe__accion--leido { opacity: 1; transform: scale(1.12); }
.fila-swipe.rev-izquierda .fila-swipe__accion--archivar { opacity: 1; transform: scale(1.12); }

.fila-chat {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 19px 14px;
  background: var(--fondo);
  text-align: left;
  transition: background-color .18s, transform .25s cubic-bezier(.25,.9,.3,1);
  position: relative;
}
/* Avatar de la bandeja más chico y refinado (base .avatar = 48px), a tono con
   la referencia de diseño; la ficha/otros sitios conservan su tamaño propio. */
.fila-chat .avatar { width: 44px; height: 44px; font-size: 15.5px; }
.fila-chat:active { background: var(--superficie-2); }
.fila-chat__centro {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2.5px;
}
.fila-chat__arriba, .fila-chat__abajo { display: flex; align-items: center; gap: 7px; }
.fila-chat__nombre {
  flex: 0 1 auto; min-width: 0;
  font-weight: 550; font-size: 16.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Empuja pin/hora al borde derecho — así el nombre y su etiqueta de estado
   quedan pegados entre sí en vez de estirarse hasta la hora. */
.fila-chat__espaciador { flex: 1 1 0; min-width: 0; }
.fila-chat__pin { width: 14px; height: 14px; color: var(--tinta-terciaria); flex: none; }
.fila-chat__pin svg { width: 14px; height: 14px; }
.fila-chat__hora { font-size: 11px; color: var(--tinta-terciaria); flex: none; font-weight: 600; }
.fila-chat__hora.con-acento { color: var(--acento-ui); }
.fila-chat__ultimo {
  flex: 1; min-width: 0;
  color: var(--tinta-suave); font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fila-chat__ultimo.sin-leer { color: var(--tinta); font-weight: 600; }
.fila-chat__badge {
  min-width: 20px; height: 20px; padding: 0 6px; flex: none;
  border-radius: 999px;
  background: var(--acento-ui); color: var(--fondo);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  animation: badge-pop .3s cubic-bezier(.34,1.56,.64,1);
}
[data-tema="oscuro"] .fila-chat__badge { color: #000; }
.chip-ventana {
  flex: none; font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 2.5px 8px;
}
.chip-ventana--ambar { background: color-mix(in srgb, var(--ambar) 15%, transparent); color: var(--ambar); }

/* ------------------------------------------- leads nuevos por reclamar ----- */
.reclamos { padding: 6px 12px 10px; }
.reclamos__titulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--acento-ui);
  text-transform: uppercase; letter-spacing: .04em;
  margin: 4px 4px 8px;
}
.reclamos__titulo svg { width: 15px; height: 15px; }
.reclamo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--acento) 7%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 28%, transparent);
  border-radius: var(--radio);
  animation: reclamo-entra .34s cubic-bezier(.34,1.4,.64,1);
}
@keyframes reclamo-entra { from { opacity: 0; transform: translateY(8px); } }
.reclamo__centro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reclamo__fila-nombre { display: flex; align-items: center; gap: 6px; }
.reclamo__nombre { font-weight: 800; font-size: 15.5px; }
.reclamo__ultimo {
  color: var(--tinta-suave); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reclamo__boton { flex: none; }

/* --------------------------------------------------------------- chat ------ */
.pagina--chat { background: var(--chat-fondo); }
.chat-cab {
  display: flex; align-items: center; gap: 2px;
  padding: calc(6px + var(--safe-arriba)) 8px 6px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  flex: none; z-index: 3;
}
[data-tema="oscuro"] .chat-cab { background: #0A0A0A; }
.chat-cab__quien {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 11px;
  text-align: left; padding: 4px 6px; border-radius: 12px;
  transition: background-color .18s;
}
.chat-cab__quien:active { background: var(--superficie-2); }
.chat-cab__quien .avatar { width: 40px; height: 40px; font-size: 15px; }
.chat-cab__textos { min-width: 0; display: flex; flex-direction: column; }
.chat-cab__fila-nombre { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-cab__nombre {
  font-weight: 800; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-cab__sub {
  font-size: 12px; font-weight: 600; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-cab__acciones { display: flex; }

.chat-avisos { flex: none; }
.aviso-demo {
  margin: 8px 14px 0;
  background: color-mix(in srgb, var(--ambar) 13%, var(--superficie));
  color: var(--tinta);
  border: 1px solid color-mix(in srgb, var(--ambar) 30%, transparent);
  border-radius: 10px;
  font-size: 12.5px; font-weight: 600;
  padding: 8px 12px;
}

.chat-hilo {
  flex: 1; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.chat-hilo__interior {
  display: flex; flex-direction: column;
  padding: 12px 12px 8px;
  min-height: 100%;
  justify-content: flex-end;
}

.chat-dia { display: flex; justify-content: center; margin: 14px 0 8px; }
.chat-dia span {
  background: var(--superficie);
  color: var(--tinta-suave);
  font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 4px 12px;
  border: 1px solid var(--linea);
}
.chat-sistema {
  align-self: center;
  background: var(--superficie);
  color: var(--tinta-suave);
  font-size: 12.5px;
  border-radius: 10px; padding: 6px 12px; margin: 6px 0;
}

.burbuja-fila {
  display: flex; margin-top: 8px;
  will-change: transform;
}
.burbuja-fila.agrupada { margin-top: 2px; }
.burbuja-fila.mia { justify-content: flex-end; }
.burbuja-fila.con-reacciones { margin-bottom: 14px; }

.burbuja {
  position: relative;
  max-width: 78%;
  background: var(--burbuja-suya);
  border-radius: var(--radio-burbuja);
  padding: 7px 10px 5px;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
  transition: transform .2s cubic-bezier(.25,.9,.3,1);
}
[data-tema="oscuro"] .burbuja { box-shadow: none; }
.mia .burbuja { background: var(--burbuja-mia); }

/* cola de la burbuja (solo la primera del grupo) */
.burbuja-fila:not(.agrupada) .burbuja::before {
  content: '';
  position: absolute; top: 0; width: 12px; height: 14px;
  background: inherit;
}
.burbuja-fila.suya:not(.agrupada) .burbuja::before {
  left: -6px;
  clip-path: path('M12 0 L12 14 C9 8 4 3 0 0 Z');
}
.burbuja-fila.mia:not(.agrupada) .burbuja::before {
  right: -6px;
  clip-path: path('M0 0 L0 14 C3 8 8 3 12 0 Z');
}
.burbuja-fila.suya:not(.agrupada) .burbuja { border-top-left-radius: 5px; }
.burbuja-fila.mia:not(.agrupada) .burbuja { border-top-right-radius: 5px; }

.burbuja--nueva { animation: burbuja-entra .32s cubic-bezier(.3,1.25,.45,1); }
@keyframes burbuja-entra {
  from { opacity: 0; transform: translateY(12px) scale(.94); }
  to { opacity: 1; transform: none; }
}

.burbuja__texto { font-size: 14.8px; white-space: pre-wrap; user-select: text; }
.burbuja__pie {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  font-size: 11px; color: var(--tinta-terciaria);
  margin-top: 2px; line-height: 1;
  float: right; margin-left: 10px; transform: translateY(2px);
}
.burbuja__tick { display: inline-flex; }
.burbuja__tick .tick { width: 16px; height: 16px; stroke-width: 2; color: var(--tinta-terciaria); }
.burbuja__tick .tick--leido { color: var(--tick-leido); }
.burbuja__tick .tick--fallido { color: var(--rojo); }

.burbuja__cita {
  display: flex; flex-direction: column;
  border-left: 3px solid var(--acento-ui);
  background: color-mix(in srgb, var(--tinta) 5%, transparent);
  border-radius: 8px;
  padding: 5px 9px; margin-bottom: 5px;
}
.burbuja__cita-quien { font-size: 12px; font-weight: 800; color: var(--acento-ui); }
.burbuja__cita-texto {
  font-size: 12.5px; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px;
}

.burbuja__media {
  margin: -3px -6px 4px;
  border-radius: 12px; overflow: hidden;
  display: block; min-width: 190px; min-height: 110px;
  background: var(--superficie-2);
  position: relative;
}
.burbuja__media img, .burbuja__media video { width: 100%; max-height: 320px; object-fit: cover; }
.burbuja__media.sin-media::after {
  content: 'Vista no disponible';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-terciaria); font-size: 13px;
}

.burbuja__doc, .burbuja__ubicacion, .burbuja__contacto {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; min-width: 200px;
  text-align: left;
}
.burbuja__doc-icono, .burbuja__ubi-icono {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: var(--acento-suave); color: var(--acento-ui);
  display: flex; align-items: center; justify-content: center;
}
.burbuja__doc-icono svg, .burbuja__ubi-icono svg { width: 22px; height: 22px; }
.burbuja__doc-info, .burbuja__ubicacion span:last-child, .burbuja__contacto span:last-child {
  display: flex; flex-direction: column; min-width: 0;
}
.burbuja__doc-info strong, .burbuja__ubicacion strong, .burbuja__contacto strong {
  font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.burbuja__doc-info small, .burbuja__ubicacion small, .burbuja__contacto small {
  color: var(--tinta-suave); font-size: 12px;
}

.burbuja__audio { display: flex; align-items: center; gap: 9px; min-width: 210px; padding: 5px 2px; }
.burbuja__audio-play {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--acento-ui); color: var(--fondo);
  display: flex; align-items: center; justify-content: center;
  transition: transform .14s;
}
[data-tema="oscuro"] .burbuja__audio-play { color: #000; }
.burbuja__audio-play:active { transform: scale(.9); }
.burbuja__audio-play svg { width: 18px; height: 18px; }
.burbuja__audio-onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; }
.burbuja__audio-onda i {
  flex: 1; background: var(--tinta-terciaria); border-radius: 2px;
  height: 100%;
  transform: scaleY(.35);
  transition: background-color .12s;
}
.burbuja__audio-onda i:nth-child(3n) { transform: scaleY(.7); }
.burbuja__audio-onda i:nth-child(4n) { transform: scaleY(.5); }
.burbuja__audio-onda i:nth-child(5n) { transform: scaleY(.9); }
/* Progreso de reproducción: se pintan de izquierda a derecha según avanza el audio */
.burbuja__audio-onda i.tocada { background: var(--acento-ui); }
.burbuja__audio-dur { font-size: 12px; color: var(--tinta-suave); flex: none; }

.burbuja__plantilla-rotulo {
  display: block; font-size: 11px; font-weight: 800;
  color: var(--tinta-terciaria); text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 3px;
}
.burbuja__reacciones {
  position: absolute; bottom: -13px; left: 8px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 12.5px; padding: 1.5px 7px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  animation: badge-pop .3s cubic-bezier(.34,1.7,.64,1);
}
.mia .burbuja__reacciones { left: auto; right: 8px; }
.burbuja__error {
  display: block; width: 100%;
  color: var(--rojo); font-size: 12px; font-weight: 700;
  text-align: right; padding: 3px 2px 1px;
}
.chat-error { text-align: center; color: var(--tinta-suave); padding: 30px; }

.lista-para-citar .burbuja { transform: translateX(46px) !important; }

/* citando */
.chat-citando {
  display: flex; align-items: center; gap: 10px;
  margin: 0 10px; padding: 8px 10px;
  background: var(--superficie);
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--linea); border-bottom: 0;
  flex: none;
  animation: tab-entra .2s ease-out;
}
.chat-citando__barra { width: 3.5px; align-self: stretch; border-radius: 4px; background: var(--acento-ui); }
.chat-citando__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-citando__quien { font-size: 12.5px; font-weight: 800; color: var(--acento-ui); }
.chat-citando__texto {
  font-size: 13px; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* compositor */
.compositor {
  display: flex; align-items: flex-end; gap: 7px;
  padding: 8px 10px calc(10px + var(--safe-abajo));
  flex: none;
}
.compositor.oculto-por-grabacion { display: none; }
.compositor__caja {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-end;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 24px;
  padding: 5px 4px 5px 16px;
}
[data-tema="oscuro"] .compositor__caja { background: #141414; }
.compositor__input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-size: 15.5px; line-height: 1.4;
  max-height: 120px; padding: 6px 0;
  user-select: text; resize: none;
}
.compositor__rayo, .compositor__camara { width: 38px; height: 38px; }
.compositor__mas { flex: none; width: 44px; height: 44px; }
.compositor__enviar {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: var(--acento-ui); color: var(--fondo);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform .16s cubic-bezier(.34,1.4,.64,1);
}
[data-tema="oscuro"] .compositor__enviar { color: #000; }
.compositor__enviar:active { transform: scale(.88); }
.compositor__enviar svg { width: 21px; height: 21px; }
.compositor__enviar-mic, .compositor__enviar-avion {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .18s, transform .22s cubic-bezier(.34,1.4,.64,1);
}
.compositor__enviar-avion { opacity: 0; transform: scale(.5) rotate(-30deg); }
.compositor__enviar.activo .compositor__enviar-mic { opacity: 0; transform: scale(.5); }
.compositor__enviar.activo .compositor__enviar-avion { opacity: 1; transform: none; }

.compositor-cerrado {
  flex: none;
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  padding: 12px 16px calc(14px + var(--safe-abajo));
}
.compositor-cerrado__texto { font-size: 13px; color: var(--tinta-suave); margin-bottom: 10px; text-align: center; }

/* sugerencias de respuestas rápidas */
.sugerencia-rapida {
  margin: 0 10px; padding: 4px;
  background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 12px 12px 0 0; border-bottom: 0;
  flex: none;
}
.sugerencia-rapida__item {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px;
}
.sugerencia-rapida__item:active { background: var(--superficie-2); }
.sugerencia-rapida__item strong { color: var(--acento-ui); font-size: 13.5px; flex: none; }
.sugerencia-rapida__item span {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* grabación de audio */
.grabando {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(12px + var(--safe-abajo));
  flex: none;
}
.grabando__punto {
  width: 11px; height: 11px; border-radius: 50%; background: var(--rojo);
  animation: latido 1.1s infinite; flex: none;
}
.grabando__tiempo { font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.grabando__onda { flex: 1; display: flex; align-items: center; gap: 2.5px; height: 30px; }
.grabando__onda i {
  flex: 1; height: 100%; border-radius: 2px;
  background: var(--acento-ui);
  transform: scaleY(.2);
  transition: transform .1s linear;
}
.grabando__cancelar { color: var(--tinta-suave); font-weight: 700; flex: none; padding: 8px; }

/* hojas de adjuntos / plantillas / rápidas */
.rejilla-adjuntos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 8px 2px 4px;
}
.rejilla-adjuntos__item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 6px 12px;
  background: var(--superficie-2);
  border-radius: 16px;
  font-size: 13px; font-weight: 700; color: var(--tinta-suave);
  transition: transform .14s cubic-bezier(.34,1.4,.64,1), background-color .2s;
}
.rejilla-adjuntos__item:active { transform: scale(.93); }
.rejilla-adjuntos__icono {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--acento-suave); color: var(--acento-ui);
  display: flex; align-items: center; justify-content: center;
}
.rejilla-adjuntos__icono svg { width: 23px; height: 23px; }

.lista-plantillas, .lista-rapidas { display: flex; flex-direction: column; gap: 8px; }
.lista-plantillas__item, .lista-rapidas__item {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; padding: 12px 14px;
  background: var(--superficie-2); border-radius: 14px;
  transition: transform .13s;
}
.lista-plantillas__item:active, .lista-rapidas__item:active { transform: scale(.98); }
.lista-plantillas__item strong, .lista-rapidas__item strong { font-size: 14.5px; }
.lista-plantillas__item span, .lista-rapidas__item span {
  font-size: 13px; color: var(--tinta-suave);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lista-plantillas__item em {
  font-style: normal; font-size: 11px; font-weight: 800;
  color: var(--tinta-terciaria); text-transform: uppercase; letter-spacing: .05em;
}
.plantilla-preview {
  background: var(--superficie-2); border-radius: 12px;
  padding: 12px 14px; font-size: 14px; margin-bottom: 14px;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------- visor ---- */
#capa-visor { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
#capa-visor > * { pointer-events: auto; }
.visor {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s;
}
.visor.visible { background: rgba(0,0,0,.94); }
.visor__img { max-width: 100%; max-height: 100%; will-change: transform; }
.visor__cerrar {
  position: absolute; top: calc(10px + var(--safe-arriba)); left: 10px; z-index: 2;
  color: #fff; opacity: 0; transition: opacity .3s .1s;
}
.visor.visible .visor__cerrar { opacity: 1; }

/* --------------------------------------------------------------- cámara ---- */
#capa-camara { position: fixed; inset: 0; z-index: 88; pointer-events: none; }
#capa-camara > * { pointer-events: auto; }
.camara {
  position: absolute; inset: 0; background: #000;
  opacity: 0; transform: scale(1.05);
  transition: opacity .26s, transform .26s;
  display: flex; flex-direction: column;
  overflow: hidden;              /* el video ampliado por el pellizco no desborda */
  touch-action: none;            /* el pellizco lo maneja la cámara, no la página */
}
.camara.visible { opacity: 1; transform: none; }
/* `contain`, no `cover`: cover recortaba el encuadre para llenar la pantalla y
   se veía "con zoom" — y además la foto salía con más campo del que se veía,
   porque la captura usa el fotograma completo. Con contain, lo que ves es lo
   que se manda. El pellizco escala por --zoom (solo si no hay zoom de sensor). */
.camara__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transform: scale(var(--zoom, 1));
  transform-origin: center;
}
.camara__video.espejo { transform: scaleX(-1) scale(var(--zoom, 1)); }
.camara__arriba {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  /* separado del borde superior: en navegador (safe-area=0) la franja de arriba
     se la come la barra del navegador, así que dejamos un mínimo cómodo */
  padding: calc(var(--safe-arriba) + 26px) 16px 0;
}
.camara__boton {
  color: #fff; background: rgba(0,0,0,.42);
  width: 46px; height: 46px;
}
.camara__boton:active { background: rgba(0,0,0,.6); transform: scale(.9); }
.camara__boton svg { width: 24px; height: 24px; }
.camara__boton.activo { color: #FFD54F; }
.camara__tiempo {
  color: #fff; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(200,40,40,.85); border-radius: 999px; padding: 4px 12px;
}
.camara__abajo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 10px 26px calc(26px + var(--safe-abajo));
  display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.camara__modos { display: flex; justify-content: center; gap: 22px; }
.camara__modo {
  color: rgba(255,255,255,.65); font-weight: 800; font-size: 13.5px;
  text-transform: uppercase; letter-spacing: .06em;
  transition: color .2s, transform .2s;
}
.camara__modo.activo { color: #FFD54F; transform: scale(1.06); }
.camara__controles { display: flex; align-items: center; justify-content: space-between; }
.camara__galeria, .camara__voltear {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255,255,255,.14); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s;
}
.camara__voltear { border-radius: 50%; }
.camara__voltear.girando { animation: voltear .42s cubic-bezier(.34,1.3,.64,1); }
@keyframes voltear { to { transform: rotate(360deg); } }
.camara__galeria svg, .camara__voltear svg { width: 24px; height: 24px; }
.camara__captura {
  width: 76px; height: 76px; border-radius: 50%;
  border: 4.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.camara__captura:active { transform: scale(.92); }
.camara__captura-nucleo {
  width: 58px; height: 58px; border-radius: 50%;
  background: #fff;
  transition: transform .2s, background-color .2s, border-radius .2s;
}
.camara__captura.modo-video .camara__captura-nucleo { background: #E53935; transform: scale(.55); }
.camara__captura.grabando .camara__captura-nucleo { background: #E53935; transform: scale(.4); border-radius: 8px; }
.camara__flashazo {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #fff; opacity: 0;
}
.camara__flashazo.activo { animation: flashazo .18s ease-out; }
@keyframes flashazo { from { opacity: .9; } to { opacity: 0; } }

/* Previsualizador de adjuntos: por encima de la cámara (88) — cuando se toma una
   foto se abre sobre ella, y "atrás" cierra el preview dejando ver la cámara. */
#capa-preview { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
#capa-preview > * { pointer-events: auto; }

.cam-preview {
  position: absolute; inset: 0; z-index: 4;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .24s, transform .26s cubic-bezier(.25,.9,.3,1);
}
.cam-preview.visible { opacity: 1; transform: none; }
.cam-preview__media { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Documento o audio: no hay nada que mirar, se muestra la ficha del archivo. */
.cam-preview__doc {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 28px; text-align: center; color: #fff;
}
.cam-preview__doc-icono { display: block; width: 56px; height: 56px; opacity: .85; }
.cam-preview__doc-icono svg { width: 100%; height: 100%; }
.cam-preview__doc-nombre { font-size: 16px; font-weight: 600; word-break: break-word; }
.cam-preview__doc-peso { font-size: 13px; color: rgba(255,255,255,.6); }
.cam-preview__cerrar {
  position: absolute; top: calc(12px + var(--safe-arriba)); left: 12px;
  color: #fff; background: rgba(0,0,0,.4);
}
.cam-preview__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px calc(18px + var(--safe-abajo));
  background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.cam-preview__caption {
  flex: 1;
  background: rgba(28,28,28,.92); color: #fff;
  border: 0; outline: none;
  border-radius: 22px; padding: 13px 17px;
  font-size: 15px; user-select: text;
}
.cam-preview__caption::placeholder { color: rgba(255,255,255,.55); }

/* ------------------------------------------------------------- clientes ---- */
.chips-etapas {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 2px 16px 10px; flex: none;
  scrollbar-width: none;
}
.chips-etapas::-webkit-scrollbar { display: none; }
.chip-etapa {
  flex: none;
  font-size: 13px; font-weight: 700;
  color: var(--tinta-suave);
  background: var(--superficie-2);
  border: 1.5px solid transparent;
  border-radius: 999px; padding: 6.5px 13px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: transform .13s, border-color .2s, color .2s, background-color .2s;
}
.chip-etapa::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--etapa-color, var(--tinta-terciaria));
}
.chip-etapa:active { transform: scale(.95); }
.chip-etapa.activa {
  border-color: var(--etapa-color, var(--acento-ui));
  color: var(--tinta);
  background: color-mix(in srgb, var(--etapa-color, var(--acento-ui)) 10%, transparent);
}
.chips-etapas .chip-etapa:first-child::before { background: var(--acento-ui); }

.fila-cliente {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 11px 16px;
  text-align: left;
  transition: background-color .18s;
}
.fila-cliente:active { background: var(--superficie-2); }
.fila-cliente .avatar { width: 46px; height: 46px; font-size: 16px; }
.fila-cliente__centro {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 11px; margin-bottom: -11px;
}
.fila-cliente__fila-nombre { display: flex; align-items: center; gap: 6px; }
.fila-cliente__nombre { font-weight: 800; font-size: 15.5px; }
.fila-cliente__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--tinta-suave);
}
.fila-cliente__hace { color: var(--tinta-terciaria); }
.fila-cliente__derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.fila-cliente__valor { font-size: 12.5px; font-weight: 800; color: var(--tinta-suave); }
.fila-cliente__proys { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }

/* Mini-chip de proyecto (lista y kanban) */
.proy-mini {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--tinta-suave);
  background: var(--superficie-2);
  border-radius: 999px; padding: 2.5px 9px 2.5px 7px;
  max-width: 150px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proy-mini__punto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.proy-mini--mas { color: var(--tinta-terciaria); padding: 2.5px 9px; }
.kanban__tarjeta .fila-cliente__proys { margin-top: 0; }

/* pipeline — acordeón vertical (una etapa por sección, tocar-para-mover) */
.pl { padding: 2px 0 24px; }
.pl-etapa { border-bottom: 1px solid var(--linea); }
.pl-etapa__cab {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 15px 16px; text-align: left;
  transition: background-color .18s;
}
.pl-etapa__cab:active { background: var(--superficie-2); }
.pl-etapa__punto { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.pl-etapa__nombre {
  font-weight: 800; font-size: 15.5px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-etapa__n {
  font-size: 12.5px; font-weight: 800; color: var(--tinta-suave);
  background: var(--superficie-2); border-radius: 999px; padding: 2px 10px; flex: none;
}
.pl-etapa__chev {
  width: 20px; height: 20px; color: var(--tinta-terciaria); flex: none;
  display: grid; place-items: center;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.pl-etapa__chev svg { width: 20px; height: 20px; }
.pl-etapa--abierta .pl-etapa__chev { transform: rotate(90deg); }
/* Cuerpo: grid 0fr→1fr anima el alto sin medir; el interior recorta con overflow. */
.pl-etapa__env {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1);
}
.pl-etapa--abierta .pl-etapa__env { grid-template-rows: 1fr; }
.pl-etapa__filas { overflow: hidden; opacity: 0; transition: opacity .24s ease; }
.pl-etapa--abierta .pl-etapa__filas { opacity: 1; }
.pl-vacia { padding: 6px 16px 16px 30px; font-size: 13px; color: var(--tinta-terciaria); }

.pl-fila { display: flex; align-items: stretch; }
.pl-fila--sale { opacity: 0; transform: translateX(30px); transition: opacity .2s ease, transform .2s ease; }
.pl-fila__ppal {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 9px 2px 9px 30px; text-align: left;
  transition: background-color .18s;
}
.pl-fila__ppal:active { background: var(--superficie-2); }
.pl-fila .avatar { width: 40px; height: 40px; font-size: 14px; flex: none; }
.pl-fila__centro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-fila__nom-fila { display: flex; align-items: center; gap: 6px; }
.pl-fila__nombre {
  font-weight: 700; font-size: 14.5px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-fila__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-suave); }
.pl-fila__hace { color: var(--tinta-terciaria); }
.pl-fila__valor { font-weight: 800; color: var(--tinta-suave); }
.pl-fila__mover {
  flex: none; width: 52px; display: grid; place-items: center;
  color: var(--tinta-terciaria);
  transition: transform .13s, color .2s;
}
.pl-fila__mover svg { width: 21px; height: 21px; }
.pl-fila__mover:active { transform: scale(.86); color: var(--acento-ui); }

.pl-vermas {
  display: block; width: calc(100% - 46px); margin: 4px 16px 12px 30px;
  padding: 9px; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: var(--acento-ui);
  background: var(--superficie-2);
  transition: transform .13s;
}
.pl-vermas:active { transform: scale(.97); }

/* hoja "Mover a…" */
.pl-mov { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.pl-mov__op {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px; text-align: left;
  background: var(--superficie-2); border-radius: 12px;
  font-size: 15px; font-weight: 700; color: var(--tinta);
  transition: transform .13s, background-color .2s;
}
.pl-mov__op:active { transform: scale(.98); }
.pl-mov__op--actual { opacity: .5; }
.pl-mov__punto { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.pl-mov__nom { flex: 1; min-width: 0; }
.pl-mov__check { width: 20px; height: 20px; color: var(--acento-ui); flex: none; }
.pl-mov__check svg { width: 20px; height: 20px; }

/* administrar etapas (solo admin) */
.ae-nota { padding: 4px 16px 10px; font-size: 12.5px; color: var(--tinta-terciaria); line-height: 1.5; }
.ae-lista { padding: 2px 12px 24px; display: flex; flex-direction: column; gap: 8px; }
.ae-item {
  display: flex; align-items: stretch; gap: 2px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px;
  transition: box-shadow .2s, transform .15s, opacity .2s;
}
[data-tema="oscuro"] .ae-item { background: #0D0D0D; }
.ae-item.sortable-ghost { opacity: .35; }
.ae-item.sortable-chosen { box-shadow: 0 8px 22px rgba(0, 0, 0, .16); }
.ae-item__grip {
  flex: none; width: 42px; display: grid; place-items: center;
  color: var(--tinta-terciaria); cursor: grab; touch-action: none;
}
.ae-item__grip svg { width: 22px; height: 22px; }
.ae-item__ppal {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 15px 14px 15px 2px; text-align: left;
  transition: background-color .18s; border-radius: 0 12px 12px 0;
}
.ae-item__ppal:active { background: var(--superficie-2); }
.ae-item__punto { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.ae-item__nombre {
  font-weight: 800; font-size: 15px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ae-item__final {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--tinta-suave); background: var(--superficie-2);
  border-radius: 999px; padding: 2px 8px; flex: none;
}
.ae-item__n { font-size: 12.5px; font-weight: 800; color: var(--tinta-terciaria); flex: none; }
.ae-color { height: 46px; padding: 4px; cursor: pointer; }
.ae-borrar-nota { font-size: 12.5px; color: var(--tinta-terciaria); text-align: center; margin: 10px 4px 0; line-height: 1.5; }

/* ---------------------------------------------------------------- ficha ---- */
.ficha { padding: 6px 16px 32px; }
.ficha__perfil {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 10px 0 24px;
}
.ficha__perfil .avatar { width: 86px; height: 86px; font-size: 30px; }
.ficha__perfil-nombre { display: inline-flex; align-items: center; gap: 6px; font-size: 21px; font-weight: 800; }
/* El texto lleva SIEMPRE el borde inferior (transparente) y el padding, para
   que al entrar a edición solo transicione el color/fondo, sin salto de layout. */
.ficha__perfil-nombre-texto {
  border-bottom: 2px solid transparent; border-radius: 5px; padding: 0 3px;
  transition: border-color .2s ease, background-color .2s ease;
}
.ficha__perfil-nombre-texto.editando {
  outline: none; border-bottom-color: var(--acento-ui);
  min-width: 44px; caret-color: var(--acento-ui);
  background: color-mix(in oklab, var(--acento-ui) 9%, transparent);
}
.ficha__nombre-acciones { display: inline-flex; align-items: center; gap: 3px; }
.ficha__nombre-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex: none; color: var(--tinta-suave);
  overflow: hidden;
  transition: background-color .15s, color .15s, transform .12s ease,
              opacity .18s ease, width .22s cubic-bezier(.4, 0, .2, 1), margin .22s cubic-bezier(.4, 0, .2, 1);
}
.ficha__nombre-btn svg { width: 18px; height: 18px; }
/* Oculto = colapsa a 0 ancho y se desvanece (absorbe su gap con el margen). */
.ficha__nombre-btn.is-oculto { width: 0; opacity: 0; transform: scale(.6); margin-left: -3px; pointer-events: none; }
.ficha__nombre-btn:active { transform: scale(.9); background: var(--superficie-2); }
.ficha__nombre-btn--ok { color: var(--acento-ui); }
.ficha__perfil-tel { color: var(--tinta-suave); font-size: 14px; }
.ficha__desde { font-size: 12px; color: var(--tinta-terciaria); margin-top: -2px; }
.ficha__origen {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--acento-suave);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 22px;
}
.ficha__origen-icono { width: 20px; height: 20px; color: var(--acento-ui); flex: none; margin-top: 2px; }
.ficha__origen-icono svg { width: 20px; height: 20px; }
.ficha__origen strong { font-size: 13.5px; }
.ficha__origen-texto { font-size: 13px; color: var(--tinta-suave); }
.ficha__seccion { margin-bottom: 24px; }
.ficha__rotulo {
  font-size: 12px; font-weight: 800; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}
.ficha__etapas { display: flex; flex-wrap: wrap; gap: 8px; }

/* Estado (temperatura): 3 cuadros tipo tile de "Tus herramientas" */
.ficha__estados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ficha__estado {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 4px 12px;
  background: var(--superficie-2);
  border: 2px solid transparent;
  border-radius: 16px;
  font-size: 12.5px; font-weight: 700; color: var(--tinta-suave);
  transition: transform .13s, border-color .2s, background-color .2s, color .2s;
}
.ficha__estado:active { transform: scale(.95); }
.ficha__estado-icono {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.ficha__estado-icono svg { width: 19px; height: 19px; }
.ficha__estado-icono .temp-img { width: 30px; height: 30px; object-fit: contain; }
.ficha__estado--frio .ficha__estado-icono { background: transparent; }
.ficha__estado--tibio .ficha__estado-icono { background: transparent; }
.ficha__estado--caliente .ficha__estado-icono { background: transparent; }
.ficha__estado--frio.activo { border-color: var(--cal-cita); color: var(--tinta); background: color-mix(in srgb, var(--cal-cita) 10%, transparent); }
.ficha__estado--tibio.activo { border-color: var(--ambar); color: var(--tinta); background: color-mix(in srgb, var(--ambar) 10%, transparent); }
.ficha__estado--caliente.activo { border-color: var(--rojo); color: var(--tinta); background: color-mix(in srgb, var(--rojo) 10%, transparent); }

/* Etiqueta animada de temperatura — icono circular que nunca deja de moverse
   un poco, pegado al nombre del lead en cualquier vista (ficha, lista, kanban). */
.etiqueta-estado {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: none; color: #fff;
}
.etiqueta-estado svg { width: 12px; height: 12px; }
.etiqueta-estado .temp-img { width: 20px; height: 20px; object-fit: contain; border-radius: 3px; }
.etiqueta-estado--frio { background: transparent; }
.etiqueta-estado--tibio { background: transparent; }
.etiqueta-estado--caliente { background: transparent; }
/* El icono "tibio" en la lista de Chats, un poco más chico que sus vecinos */
.fila-chat__arriba .etiqueta-estado--tibio .temp-img { width: 18px; height: 18px; }

/* Proyectos del cliente (puede tener varios) */
.ficha__rotulo--accion { display: flex; align-items: center; justify-content: space-between; }
.ficha__mini-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 800; color: var(--acento-ui);
  text-transform: none; letter-spacing: 0;
  padding: 3px 4px; border-radius: 8px;
  transition: background-color .18s, transform .12s;
}
.ficha__mini-btn:active { transform: scale(.92); background: var(--acento-suave); }
.ficha__mini-btn svg { width: 15px; height: 15px; }
.ficha__proyectos { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-proy {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 6px 8px 12px;
  background: var(--superficie-2);
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  transition: border-color .2s, background-color .2s, transform .12s;
}
.chip-proy:active { transform: scale(.97); }
.chip-proy--principal {
  border-color: color-mix(in srgb, var(--proy-color) 55%, transparent);
  background: color-mix(in srgb, var(--proy-color) 10%, transparent);
}
.chip-proy__punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--proy-color); }
.chip-proy__nombre { min-width: 0; }
.chip-proy__estrella { width: 16px; height: 16px; color: var(--proy-color); flex: none; }
.chip-proy__estrella svg { width: 16px; height: 16px; }
.chip-proy__x {
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--tinta-terciaria);
  transition: background-color .18s, color .18s;
}
.chip-proy__x:active { background: var(--superficie); color: var(--rojo); }
.chip-proy__x svg { width: 15px; height: 15px; }

.lista-proy-elegir { display: flex; flex-direction: column; gap: 8px; }
.lista-proy-elegir__item {
  display: flex; align-items: center; gap: 11px;
  text-align: left; padding: 13px 14px;
  background: var(--superficie-2); border-radius: 13px;
  font-size: 14.5px; font-weight: 700;
  transition: transform .13s;
}
.lista-proy-elegir__item:active { transform: scale(.98); }
.lista-proy-elegir__item .chip-proy__punto { width: 12px; height: 12px; }
.ficha__datos p {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 7px 0;
  border-bottom: 1px solid var(--linea);
}
.ficha__datos span { color: var(--tinta-suave); }
.ficha__datos a { color: inherit; text-decoration: none; }
.ficha__sin-lead { color: var(--tinta-suave); font-size: 13.5px; margin-bottom: 14px; }
.ficha__acciones {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.ficha__accion {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 2px 11px;
  background: var(--superficie-2); border-radius: 14px;
  font-size: 11.5px; font-weight: 700; color: var(--tinta-suave);
  transition: transform .13s, background-color .2s, color .2s;
}
.ficha__accion:active { transform: scale(.93); }
/* Bloquear es una acción de advertencia, no una selección — tono rojo, no el
   acento del cliente (que ya significa "primario/activo" en todo el resto). */
.ficha__accion--bloqueada { background: color-mix(in srgb, var(--rojo) 12%, transparent); color: var(--rojo); }
/* Solo el PRIMER span es el icono; el de "Bloquear/Desbloq." es texto y no
   debe tomar el tamaño del icono (lo partía en "Blo que ar"). */
.ficha__accion > span:first-child { width: 23px; height: 23px; }
.ficha__accion > span:first-child svg { width: 23px; height: 23px; }
.ficha__accion [data-rotulo-bloq] { white-space: nowrap; }
.ficha__citas { display: flex; flex-direction: column; }
.ficha__cita {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  padding: 9px 0; border-bottom: 1px solid var(--linea);
}
.ficha__cita:last-child { border-bottom: none; }
.ficha__cita-icono { width: 18px; height: 18px; flex: none; color: var(--acento-ui); }
.ficha__cita-icono svg { width: 18px; height: 18px; }
.ficha__vacio { color: var(--tinta-terciaria); font-size: 13px; }
.ficha__nueva-nota { display: flex; gap: 8px; }
.ficha__nueva-nota .campo__input { flex: 1; }
/* últimas notas del lead, debajo del campo de captura */
.ficha__notas:not(:empty) { margin-top: 12px; }
.ficha__nota {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 0; border-bottom: 1px solid var(--linea);
}
.ficha__nota:last-child { border-bottom: none; padding-bottom: 0; }
.ficha__nota span { font-size: 11.5px; color: var(--tinta-terciaria); }
.ficha__nota strong { font-size: 13.5px; font-weight: 500; color: var(--tinta); overflow-wrap: anywhere; }

/* picker de hora 12 h */
.picker-hora { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.picker-hora__sel {
  flex: 1; text-align: center;
  padding: 12px 8px; border-radius: 12px;
  border: 1.5px solid var(--linea-fuerte);
  background: var(--superficie);
  font-weight: 800; font-size: 16px;
  appearance: none;
}
.picker-hora__sep { font-weight: 800; font-size: 18px; color: var(--tinta-suave); }
.picker-hora__ampm { display: flex; gap: 4px; background: var(--superficie-2); border-radius: 12px; padding: 4px; }
.picker-hora__ap {
  padding: 8px 12px; border-radius: 9px;
  font-weight: 800; font-size: 13.5px; color: var(--tinta-suave);
  transition: background-color .18s, color .18s;
}
.picker-hora__ap.activo { background: var(--acento-ui); color: var(--fondo); }
[data-tema="oscuro"] .picker-hora__ap.activo { color: #000; }

/* ------------------------------------------------------------ calendario ---- */
.cal { flex: none; padding: 0 16px; }
.cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal__mes { font-size: 17px; font-weight: 800; }
.cal__sig svg { transform: none; }
.cal__dias-sem {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center; font-size: 11.5px; font-weight: 800;
  color: var(--tinta-terciaria);
  margin-bottom: 4px;
}
.cal__rejilla-marco { overflow: hidden; }
.cal__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__rejilla.desliza-izq { animation: cal-izq .28s ease-out; }
.cal__rejilla.desliza-der { animation: cal-der .28s ease-out; }
@keyframes cal-izq { from { transform: translateX(26px); opacity: .4; } }
@keyframes cal-der { from { transform: translateX(-26px); opacity: .4; } }
.cal__dia {
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 12px;
  font-weight: 700; font-size: 14px;
  position: relative;
  transition: background-color .18s, color .18s, transform .12s;
}
.cal__dia:active { transform: scale(.9); }
.cal__dia.hoy { color: var(--acento-ui); font-weight: 800; }
/* Días con agenda: tinte pastel (celeste=cita · verde=llamada), sin pisar el día activo */
.cal__dia.con-cita:not(.activo) { background: var(--cal-cita-suave); }
.cal__dia.con-llamada:not(.con-cita):not(.activo) { background: var(--cal-llamada-suave); }
.cal__dia.activo { background: var(--acento-ui); color: var(--fondo); }
[data-tema="oscuro"] .cal__dia.activo { color: #000; }
.cal__puntos { display: flex; gap: 2.5px; height: 4px; }
.cal__puntos i { width: 4px; height: 4px; border-radius: 50%; background: var(--cal-cita); }
.cal__puntos i.es-llamada { background: var(--cal-llamada); }
.cal__dia.activo .cal__puntos i { background: var(--fondo); }
[data-tema="oscuro"] .cal__dia.activo .cal__puntos i { background: #000; }

.cal__dia-panel {
  flex: 1; overflow-y: auto;
  margin-top: 12px;
  border-top: 1px solid var(--linea);
  padding: 14px 16px calc(16px + var(--safe-abajo));
}
.cal__dia-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cal__dia-cab h3 { font-size: 15.5px; font-weight: 800; }
.cal__dia-acciones { display: flex; align-items: center; gap: 7px; flex: none; }
.cal__vacio { color: var(--tinta-suave); font-size: 13.5px; text-align: center; padding: 22px 10px; }
.cal__evento {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--linea);
  animation: tab-entra .22s ease-out;
}
.cal__evento-icono {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: var(--superficie-2); color: var(--acento-ui);
  display: flex; align-items: center; justify-content: center;
}
.cal__evento-icono--cita { background: var(--cal-cita-suave); color: var(--cal-cita); }
.cal__evento-icono--llamada { background: var(--cal-llamada-suave); color: var(--cal-llamada); }
.cal__evento-icono svg { width: 20px; height: 20px; }
.cal__evento-centro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cal__evento-centro strong { font-size: 14.5px; }
.cal__evento-centro small { color: var(--tinta-suave); font-size: 12.5px; }
.cal__evento-borrar { color: var(--tinta-terciaria); }

/* --------------------------------------------------------------- agenda ---- */
.ag-volver-mes { margin: 4px 16px 0; color: var(--acento-ui); }
.ag-nav-dia { padding: 0 12px; margin-top: 4px; }
#ag-cuerpo .cal__evento { padding-left: 16px; padding-right: 16px; }
.cal__dia.con-tarea:not(.con-cita):not(.con-llamada):not(.activo) { background: color-mix(in oklab, var(--ambar) 14%, transparent); }
.cal__puntos i.es-tarea { background: var(--ambar); }
.ag-menu { display: flex; flex-direction: column; gap: 2px; }
.ag-menu__op {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 10px; border-radius: 14px;
  background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.ag-menu__op:active { background: var(--superficie-2); transform: scale(.98); }
.ag-menu__op svg { width: 22px; height: 22px; color: var(--acento-ui); flex: none; }
.ag-menu__op span { font-size: 15.5px; font-weight: 600; }

/* --------------------------------------------------------------- inicio ---- */
.inicio { padding-bottom: calc(24px + var(--safe-abajo)); }
.inicio__cab { padding: calc(24px + var(--safe-arriba)) 16px 2px; }
.inicio__saludo { font-size: 27px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.inicio__sub { color: var(--tinta-suave); font-size: 14px; margin-top: 5px; }
.inicio__seccion {
  font-size: 23px; font-weight: 550; letter-spacing: .01em; color: #000;
  padding: 22px 26px 8px; background: none;
}
[data-tema="oscuro"] .inicio__seccion { color: #fff; }
.inicio__seccion--fila { display: flex; align-items: baseline; justify-content: space-between; }

/* Bloque-tarjeta que mete el título DENTRO del box (Tus herramientas, Calendario).
   Vidrio en claro (glass.css), negro sólido en oscuro — patrón de .an-card. */
.in-bloque {
  margin: 20px 16px 0; border-radius: 18px; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.05);
}
[data-tema="oscuro"] .in-bloque { background: #1C1C1E; border-color: transparent; box-shadow: none; }
/* Título y contenido usan el padding del bloque, no el propio de suelto */
.in-bloque .inicio__seccion { padding: 14px 18px 8px; }
.in-bloque .th-grid { padding: 4px 10px 16px; }
.in-bloque .iw-strip { margin: 0; padding: 2px 8px 14px; }
.inicio__accion {
  display: flex; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #000;
}
[data-tema="oscuro"] .inicio__accion { color: #fff; }
.inicio__accion svg { width: 14px; height: 14px; }

/* Barra superior: perfil · buscar · tema (fija al hacer scroll, flotante) */
.in-top {
  position: sticky; top: calc(10px + var(--safe-arriba)); z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  width: 92%; margin: calc(14px + var(--safe-arriba)) auto 6px;
  padding: 12px 18px; border-radius: 28px;
  background: var(--superficie);
  box-shadow: 0 3px 6px rgba(0,0,0,.10), 0 12px 26px rgba(0,0,0,.08);
}
[data-tema="oscuro"] .in-top { background: #1C1C1E; box-shadow: none; }
.in-top__perfil { display: flex; align-items: center; gap: 11px; background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.in-top__perfil .avatar { width: 46px; height: 46px; font-size: 16px; }
.in-top__id { display: flex; flex-direction: column; gap: 1px; }
.in-top__fecha { font-size: 11.5px; font-weight: 550; color: var(--tinta-suave); }
.in-top__nombre { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.in-top__acciones { display: flex; gap: 8px; }
.in-top__ico {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .12s ease;
}
[data-tema="oscuro"] .in-top__ico { background: #1C1C1E; border-color: transparent; box-shadow: none; }
.in-top__ico:active { transform: scale(.92); }
.in-top__ico svg { width: 20px; height: 20px; }
@keyframes in-tema-cambio { from { opacity: 0; transform: rotate(-45deg) scale(.6); } to { opacity: 1; transform: rotate(0) scale(1); } }
.in-top__ico--cambio svg { animation: in-tema-cambio .32s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 50% 50%; }

/* Hero: chats pendientes / felicitación */
.in-hero-wrap { padding: 4px 16px 6px; }
.in-hero {
  width: 100%; display: flex; align-items: center;
  text-align: left; cursor: pointer;
  /* El TAMAÑO (alto, padding, gap, radio) vive en glass.css → .in-hero. Edita ahí. */
  background: color-mix(in oklab, var(--c) 85%, var(--superficie));   /* fuerza del color — edita aquí */
  box-shadow: 0 3px 6px rgba(0,0,0,.10), 0 12px 26px -6px color-mix(in oklab, var(--c) 55%, transparent);
  transition: transform .12s ease, background-color .4s ease, box-shadow .4s ease;
}
/* Crossfade del contenido cuando cambia el estado (todo al día ↔ pendientes) */
.in-hero__ico, .in-hero__txt { transition: opacity .18s ease, transform .18s ease; }
.in-hero--cambia .in-hero__ico,
.in-hero--cambia .in-hero__txt { opacity: 0; transform: translateY(6px); }
[data-tema="oscuro"] .in-hero { background: color-mix(in oklab, var(--c) 50%, #101010); box-shadow: none; }
.in-hero:active { transform: scale(.98); }
.in-hero__ico {
  flex: none;   /* tamaño (width/height/radio) en glass.css */
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--c);
  animation: in-hero-ico-aparece .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes in-hero-ico-aparece { from { opacity: 0; transform: scale(.5) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.in-hero__ico svg { stroke-width: 1.2; }   /* tamaño del glifo en glass.css */
.in-hero__txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.in-hero__tit { font-weight: 650; color: color-mix(in oklab, var(--c) 52%, #000); line-height: 1.1; transition: color .4s ease; }   /* tamaño en glass.css */
.in-hero__sub { color: color-mix(in oklab, var(--c) 38%, #000); transition: color .4s ease; }   /* tamaño en glass.css */

/* Calendario de la semana (hoy al centro) — reusa el color de .cal__dia */
.iw-strip { display: flex; gap: 6px; padding: 0 16px 4px; }
.iw-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; }
.iw-dow { font-size: 11px; font-weight: 600; color: var(--tinta-suave); }
.iw-dia { width: 42px; border-radius: 50%; font-size: 15px; }

.tn-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 40px; margin-bottom: -30px;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tn-scroll::-webkit-scrollbar { display: none; }
/* Tarjeta LIMPIA sobre superficie: icono en círculo de línea, cifra grande y
   rótulo + dato secundario como texto plano debajo. El glass NO la toca (se
   saca de sus grupos en glass.css). */
.tn-card {
  scroll-snap-align: start; flex: 0 0 auto; min-width: 158px; max-width: 200px;
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 14px; border-radius: 18px;
  background: var(--superficie); border: none; color: var(--tinta);
  box-shadow: 0 1px 2px rgba(38, 37, 31, .05), 0 10px 26px -12px rgba(38, 37, 31, .22);
}
/* En oscuro no hay sombra difusa (§11): la separa una línea sutil. */
[data-tema="oscuro"] .tn-card { box-shadow: none; border: 1px solid var(--linea); }
.tn-card--tap { cursor: pointer; transition: transform .12s ease; }
.tn-card--tap:active { transform: scale(.97); }
.tn-card__glifo {
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  /* Círculo relleno color marca — edita aquí */
  background: #800E13; border: none; color: #fff;
}
.tn-card__glifo svg { width: 15px; height: 15px; stroke-width: 1.9; }
.tn-card__num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-bottom: 2px; color: var(--tinta); }
.tn-card--money .tn-card__num { font-size: 20px; }
/* --tinta-media, no --tinta-suave: van sobre blanco y necesitan 4.5:1. */
.tn-card__label { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--tinta-media); }
.tn-card__sub { font-size: 12px; color: var(--tinta-media); margin-top: 2px; }

/* Tus herramientas — carrusel de tarjetas pastel: icono arriba, rótulo abajo */
/* Accesos rápidos como iconos: círculo con glifo + etiqueta debajo. */
/* 3 iconos por fila, centrados: los 2 de la última fila quedan al centro. */
.th-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px 8px; padding: 4px 16px 0;
}
.th-tile {
  flex: 0 0 calc(33.333% - 8px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; cursor: pointer;
  transition: transform .12s ease;
}
.th-tile:active { transform: scale(.94); }
.th-tile--pronto { opacity: .55; }
.th-tile__glifo {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Invertido respecto a .tn-card__glifo: círculo gris claro, glifo color marca. */
  background: #E8E6E2; border: none; color: #800E13;
}
.th-tile__glifo svg { width: 28px; height: 28px; stroke-width: 1.9; }
.th-tile__label {
  font-size: 12px; font-weight: 500; color: var(--tinta-suave);
  line-height: 1.2; text-align: center;
}
[data-tema="claro"] .th-tile__label { color: #000000; }
/* Oscuro: título y subtítulo en blanco puro */
[data-tema="oscuro"] .in-hero__tit { color: #fff; }
[data-tema="oscuro"] .in-hero__sub { color: #fff; }
/* Botón "volver" inyectado en páginas apiladas (Clientes / Planos) */
.pagina .cabecera { padding-left: 8px; }
.pagina .cabecera__titulo { font-size: 20px; }
.cabecera__volver { flex: none; }
/* El descentrado de siempre en secciones apiladas: .cabecera reparte con
   space-between, y cuando la página solo trae volver + título (sin sub ni
   acciones), el título se pegaba a la derecha. Este espaciador fantasma del
   ancho del botón volver (42px) equilibra la fila y el título queda centrado
   de verdad. Solo actúa en ese caso; con un tercer hijo no hace falta. En un
   WebView sin :has() la regla se ignora y queda el layout de antes (no rompe). */
.pagina .cabecera:has(> .cabecera__volver:first-child + .cabecera__titulo:last-child)::after {
  /* 42px del botón volver menos los 10px de asimetría del padding de la
     cabecera en páginas apiladas (8px izq vs 18px der): centro exacto */
  content: ''; width: 32px; flex: none;
}
.pagina .cabecera > .cabecera__volver:first-child + .cabecera__titulo:last-child {
  text-align: center; min-width: 0;
}

/* Mira tus analíticas */
.an-lista { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
.an-card {
  padding: 14px 16px 12px; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.05);
}
[data-tema="oscuro"] .an-card { background: #1C1C1E; border-color: transparent; box-shadow: none; }
.an-card__cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.an-card__tit { font-size: 14.5px; font-weight: 550; }
.an-card__meta { font-size: 12px; color: var(--tinta-suave); }
.g-vacio { color: var(--tinta-suave); font-size: 12.5px; padding: 10px 0 4px; }

.g-area-svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-linea {
  fill: none; stroke: var(--gc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px color-mix(in oklab, var(--gc) 38%, transparent));
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: g-draw 1.1s cubic-bezier(.35, 0, .2, 1) forwards;
}
@keyframes g-draw { to { stroke-dashoffset: 0; } }
.g-fill { opacity: 0; animation: g-fade .8s ease .45s forwards; }
.g-dot { fill: var(--gc); opacity: 0; animation: g-fade .4s ease 1.05s forwards; }
.g-dot-halo { fill: var(--gc); opacity: 0; animation: g-halo .5s ease 1.05s forwards; }
@keyframes g-fade { to { opacity: 1; } }
@keyframes g-halo { to { opacity: .18; } }

.g-barras { display: flex; flex-direction: column; gap: 9px; padding: 2px 0 4px; }
.g-barra { display: grid; grid-template-columns: 92px 1fr 26px; align-items: center; gap: 10px; }
.g-barra__lbl { font-size: 12px; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-barra__track { height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.g-barra__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--bc); animation: g-grow .9s cubic-bezier(.35, 0, .2, 1) forwards; }
@keyframes g-grow { to { width: var(--w); } }
.g-barra__val { font-size: 12.5px; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------- tareas ---- */
.crear-rapido { padding: 0 16px 10px; flex: none; }
.tareas-seccion {
  font-size: 12px; font-weight: 800; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 16px 18px 6px;
}
.tareas-seccion--rojo { color: var(--rojo); }
.tareas-seccion--apagado { color: var(--tinta-terciaria); }
.fila-tarea {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  transition: opacity .3s;
}
.fila-tarea.hecha { opacity: .5; }
.fila-tarea__centro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fila-tarea__titulo { font-weight: 700; font-size: 15px; transition: color .2s; }
.fila-tarea.hecha .fila-tarea__titulo { text-decoration: line-through; color: var(--tinta-suave); }
.fila-tarea__meta { font-size: 12.5px; color: var(--tinta-suave); }
.prioridad-alta .fila-tarea__meta { color: var(--ambar); }
.fila-tarea.hecha .fila-tarea__meta { color: var(--tinta-terciaria); }
.fila-tarea__borrar { color: var(--tinta-terciaria); width: 38px; height: 38px; }
.check {
  width: 27px; height: 27px; flex: none;
  border-radius: 50%;
  border: 2px solid var(--linea-fuerte);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background-color .25s, transform .16s cubic-bezier(.34,1.5,.64,1);
}
.check:active { transform: scale(.85); }
.check svg { width: 17px; height: 17px; stroke: var(--fondo); }
.check__marca { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .28s ease .05s; }
.fila-tarea.hecha .check { background: var(--acento-ui); border-color: var(--acento-ui); }
[data-tema="oscuro"] .fila-tarea.hecha .check svg { stroke: #000; }
.fila-tarea.hecha .check__marca { stroke-dashoffset: 0; }

/* -------------------------------------------------------------- ajustes ---- */
.ajustes { padding: 0 16px calc(20px + var(--safe-abajo)); }
/* Tarjetas: en claro flotan con una sombra muy suave y sin borde; en oscuro la
   sombra no se ve sobre negro, así que ahí la silueta la da la línea.
   ↓ EDITA AQUÍ: el redondeo y la profundidad de la sombra. */
.ajustes {
  --tarjeta-radio: 20px;
  --tarjeta-sombra: 0 1px 2px rgba(55, 53, 47, .04), 0 6px 16px rgba(55, 53, 47, .06);
  --tarjeta-borde: transparent;
}
[data-tema="oscuro"] .ajustes {
  --tarjeta-sombra: none;
  --tarjeta-borde: var(--linea);
}
/* Perfil "hero": avatar grande centrado + nombre + empresa, sobre el fondo
   (sin tarjeta), con un botón para editar debajo. */
.perfil-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 8px 0 14px; margin-bottom: 6px;
}
.perfil-hero__avatar { margin-bottom: 10px; }
.perfil-hero__avatar .avatar {
  width: 104px; height: 104px; font-size: 38px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.perfil-hero__nombre { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.perfil-hero__empresa {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--tinta-suave); font-size: 13.5px; font-weight: 600;
}
.perfil-hero__empresa svg { width: 15px; height: 15px; flex: none; }
.perfil-hero__editar { margin-top: 14px; min-width: 160px; }

/* Box blanco de progreso de meta (debajo de "Editar perfil"). */
.perfil-panel {
  background: #fff;
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--tarjeta-radio);
  padding: 14px 10px;
  margin-bottom: 14px;
}
[data-tema="oscuro"] .perfil-panel { background: var(--superficie); }
.perfil-panel__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 0 4px 12px;
}
.perfil-panel__cab strong { font-size: 15px; font-weight: 800; }
.perfil-panel__cab small { color: var(--tinta-suave); font-size: 12px; }
.perfil-panel__rangos { margin: 0 0 16px; }

/* Barras verticales con meta (motor grafico.js → barrasV). */
.g-bv { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; }
.g-bv__eje {
  height: var(--alto);
  display: flex; flex-direction: column; justify-content: space-between;
}
.g-bv__tick { font-size: 11px; color: var(--tinta-suave); line-height: 1; }
.g-bv__main { min-width: 0; }
.g-bv__plot { position: relative; height: var(--alto); }
.g-bv__meta {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed var(--linea-fuerte); z-index: 2; pointer-events: none;
}
.g-bv__cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px; }
.g-bv__col {
  flex: 1 1 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.g-bv__col.es-hot { position: relative; z-index: 3; }
.g-bv__barra {
  width: 70%; max-width: 26px; border-radius: 7px 7px 0 0;
  background: color-mix(in oklab, var(--acento) 24%, var(--superficie-2));
  transition: height .5s cubic-bezier(.22, 1, .36, 1);
}
.g-bv__col.es-hot .g-bv__barra { background: var(--acento-ui); }
.g-bv__globo {
  margin-bottom: 6px;
  background: var(--acento-ui); color: var(--fondo);
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .16);
  animation: g-bv-pop .4s .3s both;
}
@keyframes g-bv-pop {
  from { opacity: 0; transform: translateY(4px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-bv__barra { transition: none; }
  .g-bv__globo { animation: none; }
}
.g-bv__x { display: flex; gap: 8px; margin-top: 8px; }
.g-bv__xlbl { flex: 1 1 0; text-align: center; font-size: 11px; color: var(--tinta-suave); white-space: nowrap; }
.ajustes__ir { width: 18px; height: 18px; color: var(--tinta-terciaria); flex: none; }
.ajustes__ir svg { width: 18px; height: 18px; }
.ajustes__seccion {
  font-size: 12px; font-weight: 800; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 18px 4px 8px;
}
.ajustes__grupo {
  background: var(--superficie);
  border: 1px solid var(--tarjeta-borde);
  border-radius: var(--tarjeta-radio);
  box-shadow: var(--tarjeta-sombra);
  overflow: hidden;
  margin-bottom: 14px;
}
/* El divisor arranca donde arranca el texto, no en el filo de la tarjeta: por
   eso es un ::after y no un border-bottom. --sangria = ícono + su separación. */
.ajustes__fila {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  --sangria: 54px;
  padding: 15px 16px;
  transition: background-color .18s;
}
.ajustes__fila:not(:last-child)::after {
  content: ""; position: absolute; left: var(--sangria); right: 16px; bottom: 0;
  border-bottom: 1px solid var(--linea);
}
.ajustes__fila:not(.sin-accion):active { background: var(--superficie-2); }
/* Ícono suelto, sin cápsula: la fila respira y el trazo es el protagonista. */
.ajustes__icono {
  width: 24px; height: 24px; flex: none;
  color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
}
.ajustes__icono svg { width: 21px; height: 21px; }
.ajustes__fila-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ajustes__fila-textos strong { font-size: 14.5px; font-weight: 700; }
.ajustes__fila-textos small {
  color: var(--tinta-suave); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ajustes__fila--tema { flex-direction: column; align-items: stretch; gap: 12px; }
.ajustes__fila--tema .ajustes__fila-cab { display: flex; align-items: center; gap: 13px; }
.ajustes__vacio { padding: 14px; color: var(--tinta-suave); font-size: 13.5px; }
.ajustes__version {
  text-align: center; color: var(--tinta-terciaria);
  font-size: 12px; padding: 18px 0 8px;
}
/* Enlace legal al pie de Ajustes (Play exige la política dentro de la app).
   Va en --tinta y no en las grises: es interactivo y debe pasar 4.5:1 en claro
   y oscuro (medido: las tintas suave/terciaria no llegan sobre el fondo claro). */
.ajustes__legal { padding: 0 0 14px; }
.ajustes__legal a { color: var(--tinta); text-decoration: underline; }
.perfil-foto { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.perfil-foto .avatar { width: 72px; height: 72px; font-size: 26px; }

/* ------------------------------------------- gestor de proyectos (app) ---- */
/* Cabecera de subpágina: botón atrás + título (misma altura segura arriba). */
.gp-cab {
  display: flex; align-items: center; gap: 6px;
  padding: calc(10px + var(--safe-arriba)) 10px 8px 8px;
  flex: none; border-bottom: 1px solid var(--linea);
}
.gp-cab__titulo { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
/* Punto de color del proyecto (NUNCA uña lateral, §12). */
.gp-punto {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  background: var(--proy-color, var(--tinta-terciaria));
}
.gp-nuevo { margin: 14px 0 6px; }
.gp-nuevo svg { width: 18px; height: 18px; }
.gp-estado {
  flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 999px;
}
.gp-estado--activo { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.gp-estado--borrador { background: var(--superficie-2); color: var(--tinta-suave); }

/* ------------------------------------------------- respuestas rápidas ---- */
.ajustes__seccion-cab { display: flex; align-items: baseline; justify-content: space-between; }
.ajustes__editar {
  font-size: 13.5px; font-weight: 800; color: var(--acento-ui);
  padding: 18px 4px 8px;
}
.ajustes__editar:active { opacity: .6; }

.rr-gestor-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.rr-gestor-cab .sheet__titulo { margin: 0; }
.rr-gestor-cab .btn svg { width: 15px; height: 15px; }

/* Cuadritos */
.rr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 10px;
}
/* Respuestas rápidas como página completa (abierta desde Inicio) */
.rr-page__sub { padding: 0 16px 10px; font-size: 13.5px; color: var(--tinta-suave); }
.rr-page { padding: 2px 16px 24px; }
.rr-editor { padding: 14px 16px 32px; }
.rr-editor-cab { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px; }
.rr-editor-cab .cabecera__volver { grid-column: 1; justify-self: start; }
.rr-editor-cab .cabecera__titulo { grid-column: 2; text-align: center; }
.rr-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px; text-align: left;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 14px;
  transition: transform .12s, background-color .18s;
}
.rr-card:active { transform: scale(.97); background: var(--superficie-2); }
.rr-card__titulo { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.rr-card__badges { display: flex; gap: 10px; flex-wrap: wrap; }
/* Vista previa: el texto de la respuesta (… si no cabe). Las respuestas solo
   media muestran miniaturas (.rr-thumb) con esqueleto shimmer mientras cargan. */
.rr-card__texto {
  font-size: 12.5px; line-height: 1.4; color: var(--tinta-suave);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; overflow-wrap: anywhere; margin: 0;
}
.rr-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--tinta-suave); }
.rr-badge svg { width: 13px; height: 13px; }
.rr-badge--vacio { color: var(--tinta-terciaria); font-weight: 600; }
.rr-card__thumbs { display: flex; gap: 5px; }
.rr-thumb {
  position: relative; width: 40px; height: 40px; flex: none;
  border-radius: 8px; overflow: hidden; background: var(--superficie-2);
}
.rr-thumb img, .rr-thumb video { width: 100%; height: 100%; object-fit: cover; }
.rr-thumb__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,.28);
}
.rr-thumb__play svg { width: 16px; height: 16px; }

/* Editor: lista reordenable de items */
.rr-items { margin-bottom: 4px; }
.rr-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px; margin-bottom: 8px;
  background: var(--superficie-2); border-radius: 12px;
}
.rr-item--fantasma { opacity: .4; }
.rr-item--elegida { background: var(--superficie); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.rr-item__handle {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 10px 5px; flex: none; cursor: grab; touch-action: none;
}
.rr-item__handle i { width: 15px; height: 2px; border-radius: 2px; background: var(--tinta-terciaria); }
.rr-item__cuerpo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.rr-item__texto { width: 100%; padding: 9px 11px; }
.rr-item__mini {
  position: relative; width: 46px; height: 46px; flex: none;
  border-radius: 9px; overflow: hidden; background: var(--superficie);
}
.rr-item__mini img, .rr-item__mini video { width: 100%; height: 100%; object-fit: cover; }
.rr-item__rotulo { font-size: 13.5px; font-weight: 700; color: var(--tinta-suave); }
.rr-item__borrar { color: var(--tinta-terciaria); flex: none; }
.rr-add { display: flex; gap: 8px; margin: 6px 0 16px; }
.rr-add .btn { flex: 1; }
.rr-add .btn svg { width: 15px; height: 15px; }

/* ══════════════ PLANOS (vista del asesor, solo lectura) ══════════════ */
.cabecera__sub {
  font-size: 12.5px; font-weight: 600; color: var(--tinta-suave);
  align-self: center; max-width: 52%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.planos-app__cargando {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 60px 20px; color: var(--tinta-suave);
}
.planos-app__cargando svg { width: 34px; height: 34px; opacity: .5; }

.planos-app__cuerpo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 4px 0 20px;
}
.planos-app__cuerpo::-webkit-scrollbar { display: none; }

/* Selector de plano (varios planos) */
.planos-app__sel {
  display: flex; gap: 8px; padding: 4px 18px 10px; overflow-x: auto;
  scrollbar-width: none; flex: none;
}
.planos-app__sel::-webkit-scrollbar { display: none; }
.planos-app__seltab {
  flex: none; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--linea-fuerte); background: var(--superficie);
  color: var(--tinta-suave); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.planos-app__seltab.activo { border-color: var(--acento-ui); color: var(--acento-ui); }

/* Resumen: donut + leyenda */
.planos-app__resumen {
  display: flex; align-items: center; gap: 16px;
  margin: 4px 16px 14px; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px;
}
.planos-app__donut { flex: none; width: 78px; height: 78px; }
.planos-app__donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.planos-app__donut-n { font-size: 9px; font-weight: 800; fill: var(--tinta); transform: rotate(90deg); transform-origin: 21px 21px; }
.planos-app__donut-l { font-size: 4px; fill: var(--tinta-suave); transform: rotate(90deg); transform-origin: 21px 21px; }
.planos-app__ley { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.planos-app__leyit { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-suave); }
.planos-app__leyit i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.planos-app__leyit b { margin-left: auto; color: var(--tinta); font-variant-numeric: tabular-nums; }
.planos-app__oferta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--linea);
  font-size: 12px; color: var(--tinta-suave);
}
.planos-app__oferta b { color: var(--acento-ui); font-size: 14px; font-weight: 800; }

/* Filtros */
.planos-app__chips {
  display: flex; gap: 8px; padding: 2px 18px 12px; overflow-x: auto;
  scrollbar-width: none; flex: none;
}
.planos-app__chips::-webkit-scrollbar { display: none; }

/* Entrada: estadística extra + botón al visor */
.planos-app__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px 14px; }
.planos-app__ver {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: calc(100% - 32px); margin: 0 16px; padding: 15px 18px;
  font-size: 15px;
}
.planos-app__ver svg { width: 20px; height: 20px; flex: none; }

/* Lienzo del visor (página apilada a pantalla completa, estilo Canva) */
.planos-visor__lienzo {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background: var(--superficie-2);
}
.planos-app__scroll {
  position: absolute; inset: 0; overflow: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* pan con un dedo = scroll nativo; el pinch NO lo toma el navegador (zoom de
     página) sino el gesto propio de la vista (planos.js) anclado al punto */
  touch-action: pan-x pan-y;
  /* el zoom fija el scroll por código: sin esto, el scroll anchoring del
     navegador "re-ancla" tras el cambio de tamaño y pisa el valor calculado */
  overflow-anchor: none;
}
.planos-app__scroll::-webkit-scrollbar { display: none; }
/* El marco es el "escritorio" alrededor del plano (el padding en px lo pone el
   JS según el tamaño del visor): permite arrastrar el plano fuera de sus bordes. */
.planos-visor__marco { width: max-content; }
/* #31 (igual que el panel): sin transición de width — anima layout de un SVG
   con N polígonos y provoca reflow en cada frame. */
.planos-app__zoom { width: 100%; }
.planos-app__svg { display: block; width: 100%; height: auto; }
.planos-app__lote { cursor: pointer; }
.planos-app__lote text {
  font-size: 13px; font-weight: 700; fill: var(--tinta);
  paint-order: stroke; stroke: var(--superficie); stroke-width: 3px;
  pointer-events: none;
}
[data-tema="oscuro"] .planos-app__lote text { stroke: #000; fill: #fff; }
.planos-app__lote--off { opacity: .18; pointer-events: none; }  /* un lote filtrado no se abre por accidente */
.planos-app__lote:active polygon { fill-opacity: .65; }
/* Botones de zoom arriba a la derecha: abajo vive la mini barra del lote */
.planos-app__zbtns {
  position: absolute; right: 12px; top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.planos-app__zbtn {
  width: 38px; height: 38px; border-radius: 11px;
  background: color-mix(in srgb, var(--superficie) 90%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--linea-fuerte); color: var(--tinta);
  font-size: 17px; font-weight: 700; box-shadow: var(--sombra, 0 2px 8px rgba(0,0,0,.12));
}
.planos-app__zbtn:active { transform: scale(.9); }
#pl-zfit { font-size: 11px; font-weight: 800; }

/* Mini barra FIJA del lote elegido (código + precio + Ver más). No se arrastra:
   entra y sale solo con transform/opacity (§12), anclada al pie del visor. */
.planos-visor__mini {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(12px + var(--safe-abajo));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--linea-fuerte);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  transform: translateY(calc(100% + 26px)); opacity: 0;
  transition: transform .32s cubic-bezier(.22, 1, .3, 1), opacity .25s ease;
  pointer-events: none;
}
.planos-visor__mini--visible { transform: none; opacity: 1; pointer-events: auto; }
.planos-visor__mini-info { min-width: 0; }
.planos-visor__mini-cod { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.planos-visor__mini-precio { display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta-suave); margin-top: 2px; }
.planos-visor__mini-mas { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.planos-visor__mini-mas svg { width: 16px; height: 16px; }

/* Badge de estado (ficha del lote) */
.planos-app__badge {
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent);
  white-space: nowrap;
}

/* Ficha del lote en hoja (sheet) */
.planos-app__ficha-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.planos-app__ficha-cod { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.planos-app__ficha-sub { font-size: 13px; color: var(--tinta-suave); margin-top: 3px; }
.planos-app__badge--gd { font-size: 13px; padding: 6px 13px; }
.planos-app__ficha-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.planos-app__dato {
  padding: 12px 14px; border-radius: 13px;
  background: var(--superficie-2); border: 1px solid var(--linea);
}
.planos-app__dato span { display: block; font-size: 12px; color: var(--tinta-suave); margin-bottom: 3px; }
.planos-app__dato b { font-size: 17px; font-weight: 800; color: var(--tinta); }

/* Cotizador en la hoja */
.planos-app__cot { border-top: 1px solid var(--linea); padding-top: 16px; }
.planos-app__cot-tit { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.planos-app__cot-modos { display: flex; gap: 8px; margin-bottom: 14px; }
.planos-app__cot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.planos-app__cot-out { margin-top: 6px; display: flex; flex-direction: column; gap: 7px; }
.planos-app__cot-linea { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--tinta-suave); }
.planos-app__cot-linea b { color: var(--tinta); font-weight: 700; }
.planos-app__cot-linea--tot { font-size: 15px; }
.planos-app__cot-linea--tot b { color: var(--acento-ui); font-weight: 800; }
.planos-app__cot-nota { font-size: 12px; color: var(--tinta-terciaria); margin-top: 12px; line-height: 1.5; }

/* Planos — esqueleto shimmer al cambiar de plano + fundido de entrada */
.planos-app__esq { padding: 4px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.planos-app__esq-resumen { height: 116px; border-radius: 16px; }
.planos-app__esq-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.planos-app__esq-dato { height: 64px; border-radius: 13px; }
.planos-app__esq-btn { height: 52px; border-radius: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .planos-app__cuerpo--entra { animation: planos-entra .34s cubic-bezier(.22,.61,.36,1); }
  @keyframes planos-entra { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
}

/* ============================================================================
   AGENTE IA — el copiloto (página apilada desde Inicio). Calca el módulo del
   aura sutil de fondo (solo claro), saludo centrado con glifo, composer en
   píldora (botón "+" con las capacidades y "Limpiar" en una hoja aparte).
   Claro = papel cálido; oscuro = negro sólido. Botón enviar y glifo del saludo
   usan el acento del tenant.
   ========================================================================== */
/* Aura: dos manchas radiales del acento del cliente que derivan despacio (solo
   claro; en oscuro manda el negro). El contenido va encima. */
.pagina:has(.ag-lienzo) { overflow: hidden; }
.pagina:has(.ag-lienzo) .cabecera { position: relative; z-index: 1; justify-content: center; }
.pagina:has(.ag-lienzo) .cabecera__volver { position: absolute; left: 8px; }
.ag-aura {
  position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none;
  opacity: .3;
  background:
    radial-gradient(60% 42% at 78% 22%, color-mix(in srgb, var(--acento) 45%, transparent), transparent 64%),
    radial-gradient(52% 40% at 18% 60%, color-mix(in srgb, var(--acento) 28%, transparent), transparent 66%),
    /* Difuminado FUERTE del acento pegado al fondo, detrás del composer — el
       más intenso de los tres, deliberadamente. La máscara de abajo NO se
       desvanece (se queda opaca hasta el borde) para no recortarlo. */
    radial-gradient(95% 70% at 50% 100%, color-mix(in srgb, var(--acento) 95%, transparent), transparent 82%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, #000 100%);
  animation: ag-deriva 26s ease-in-out infinite alternate;
  will-change: transform;
}
[data-tema="oscuro"] .ag-aura { display: none; }
@keyframes ag-deriva { from { transform: translate3d(-1.5%,-1%,0) scale(1.02); } to { transform: translate3d(1.5%,1%,0) scale(1.06); } }

/* Columna centrada tipo Claude: chat, caja y chips en una columna angosta */
.ag-lienzo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  padding: 0 12px calc(34px + var(--safe-abajo));   /* separa el composer del borde — edita aquí */
}
.ag-lienzo > * { width: 100%; max-width: 620px; margin-inline: auto; }

/* Chat: se difumina arriba SOLO cuando los mensajes desbordan (como el panel) */
.ag-chat {
  flex: 1; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 12px 2px 10px; display: flex; flex-direction: column; gap: 9px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ag-fundido, 0px));
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ag-fundido, 0px));
}
.ag-chat::-webkit-scrollbar { display: none; }
.ag-chat--desborda { --ag-fundido: 44px; }

.ag-msg {
  flex-shrink: 0; max-width: 84%; padding: 9px 13px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.5; overflow-wrap: break-word; user-select: text;
}
.ag-msg--yo {
  align-self: flex-end; background: var(--burbuja-mia); color: var(--tinta);
  border-bottom-right-radius: 5px;
}
.ag-msg--bot {
  align-self: flex-start; background: var(--superficie);
  border: 1px solid var(--linea); color: var(--tinta); border-bottom-left-radius: 5px;
}
.ag-msg strong { font-weight: 800; }
.ag-msg--bot code { font-size: .86em; background: var(--superficie-2); padding: 1px 5px; border-radius: 5px; }
/* Solo el último mensaje entra animado (los previos ya están puestos) */
.ag-chat > .ag-msg:last-child { animation: ag-entra .3s cubic-bezier(.22,1,.3,1) both; }
@keyframes ag-entra { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* "pensando": tres puntos que laten (solo opacity → GPU) */
.ag-pensando { display: flex; gap: 5px; padding: 13px 15px; }
.ag-pensando span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tinta-terciaria); animation: ag-latido 1.2s infinite;
}
.ag-pensando span:nth-child(2) { animation-delay: .2s; }
.ag-pensando span:nth-child(3) { animation-delay: .4s; }
@keyframes ag-latido { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* Cursor del tipeo en vivo: barrita que parpadea al final mientras escribe */
.ag-msg--escribiendo::after {
  content: ''; display: inline-block; width: 2px; height: .95em;
  background: currentColor; margin-left: 2px; vertical-align: -.12em;
  animation: ag-caret 1s steps(2, start) infinite;
}
@keyframes ag-caret { 50% { opacity: 0; } }

/* Saludo del estado vacío: glifo centrado + "Hola, X" tenue + pregunta en tinta
   fuerte. El glifo entra al toque; el texto entra 0.8s después (efecto "se
   revela solo", como el saludo de arranque de Gemini). */
.ag-saludo {
  margin: auto; text-align: center; padding: 18px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* El icono es el logo del app (mismo que el splash: 22px de radio, invertido en
   oscuro), pero SIN el latido del splash — aquí solo entra con el fundido. */
.ag-saludo__logo {
  width: 56px; height: 56px; border-radius: 14px; display: block;
  animation: ag-entra .45s ease both;
}
[data-tema="oscuro"] .ag-saludo__logo { filter: invert(1); }
.ag-saludo h2 {
  max-width: 22ch; margin: 0 auto; text-wrap: balance;
  font-size: 24px; font-weight: 800; line-height: 1.32; letter-spacing: -.02em; color: var(--tinta);
  animation: ag-entra .5s cubic-bezier(.22,1,.3,1) .3s both;
}
.ag-saludo__hola { color: var(--tinta-suave); }

/* Composer en píldora: "+" (abre la hoja de capacidades) · campo · enviar.
   Width al 90% (10% más angosto por los lados) y buena altura: objetivo de
   toque cómodo con el dedo. */
.ag-composer {
  flex: none; width: 90%; display: flex; align-items: flex-end; gap: 6px;
  background: var(--superficie); padding: 11px 11px 11px 13px;
  border: 1.5px solid var(--linea-fuerte); border-radius: 30px;
  /* Sombra con el color del tenant (además de la gris de siempre), a juego con
     el difuminado que se acumula justo detrás del composer (.ag-aura). */
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.06),
              0 14px 34px -10px color-mix(in oklab, var(--acento) 55%, transparent);
  animation: ag-entra .4s ease both;
}
[data-tema="oscuro"] .ag-composer {
  background: #141414;
  box-shadow: 0 14px 34px -8px color-mix(in oklab, var(--acento) 65%, transparent);
}
.ag-composer textarea {
  flex: 1; resize: none; border: 0; background: none; color: var(--tinta);
  font: inherit; font-size: 15px; line-height: 1.45; outline: none;
  min-height: 34px; max-height: 120px; padding: 10px 2px; user-select: text;
}
.ag-composer textarea::placeholder { color: var(--tinta-terciaria); }
.ag-mas, .ag-enviar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; transition: transform .12s ease, opacity .2s;
}
.ag-mas { background: var(--superficie-2); color: var(--tinta-suave); }
.ag-mas:active { transform: scale(.9); }
.ag-mas svg { width: 19px; height: 19px; }
/* Sin nada que enviar: gris quieto, flecha ABAJO. Con texto/foto
   (.ag-enviar--listo): flecha ARRIBA con el acento del tenant — mismo icono,
   rotado 180° por CSS (transición suave en vez de saltar de un glifo a otro). */
.ag-enviar {
  background: var(--superficie-2); color: var(--tinta-terciaria);
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.ag-enviar svg { transition: transform .28s cubic-bezier(.34, 1.4, .64, 1); transform: rotate(180deg); }
.ag-enviar--listo { background: var(--acento-ui); color: var(--fondo); }
.ag-enviar--listo svg { transform: rotate(0deg); }
[data-tema="oscuro"] .ag-enviar--listo { color: #000; }
.ag-enviar:active { transform: scale(.9); }
.ag-enviar:disabled { opacity: .45; }
.ag-enviar svg { width: 19px; height: 19px; stroke-width: 2.6; }

/* Hoja del "+": capacidades + Limpiar (reusa .ag-menu de Agenda, pero con
   subtítulo bajo cada título → icono más grande que abarca ambas líneas). */
.ag-menu--agente .ag-menu__op { align-items: center; gap: 14px; }
.ag-menu--agente .ag-menu__op svg { width: 26px; height: 26px; align-self: center; }
.ag-menu--agente .ag-menu__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-menu--agente .ag-menu__tit { font-size: 15.5px; font-weight: 600; color: var(--tinta); }
.ag-menu--agente .ag-menu__sub { font-size: 13px; font-weight: 500; color: var(--tinta-suave); line-height: 1.3; }
.ag-menu--agente .ag-menu__op--peligro .ag-menu__tit { color: var(--rojo); }
.ag-menu--agente .ag-menu__op--peligro svg { color: var(--rojo); }
.ag-menu--agente .ag-menu__op--peligro .ag-menu__sub { color: color-mix(in srgb, var(--rojo) 62%, var(--tinta-suave)); }

/* Fila de arriba del "+": tarjetas grandes Fotos / Cámara (como la referencia) */
.ag-menu__fila { display: flex; gap: 10px; margin-bottom: 12px; }
.ag-menu__card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 10px; border-radius: 20px; border: none; cursor: pointer;
  background: var(--superficie-2); color: var(--tinta); font: inherit;
  transition: transform .12s ease;
}
.ag-menu__card:active { transform: scale(.96); }
.ag-menu__card svg { width: 25px; height: 25px; stroke-width: 1.8; }
.ag-menu__card span { font-size: 14.5px; font-weight: 600; }

/* Foto elegida, pendiente de enviar: miniatura sobre el composer con su "×" */
.ag-adjunto { width: 90%; margin: 0 auto 8px; display: flex; }
.ag-adjunto[hidden] { display: none; }
.ag-adjunto img {
  width: 76px; height: 76px; object-fit: cover; border-radius: 14px;
  border: 1.5px solid var(--linea-fuerte);
}
.ag-adjunto__x {
  align-self: flex-start; margin: -6px 0 0 -12px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--fondo);
}
.ag-adjunto__x svg { width: 13px; height: 13px; }

/* Miniatura dentro de la burbuja del usuario */
.ag-msg__img { display: block; max-width: 190px; border-radius: 12px; margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .ag-aura, .ag-saludo__logo, .ag-saludo h2, .ag-composer, .ag-chat > .ag-msg:last-child { animation: none; }
}

/* ══════════════ MENSAJES AUTOMÁTICOS (pantalla del admin) ══════════════ */
.ms-sub {
  padding: 0 16px 10px; margin-top: -6px;
  font-size: 13.5px; font-weight: 600; color: var(--tinta-suave);
}
.ms-lista { padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 10px; }

/* Nota de estado del motor: solo aparece si algo impide enviar */
.ms-nota {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 14px; margin-bottom: 2px;
  background: color-mix(in srgb, var(--ambar) 12%, transparent);
}
.ms-nota svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ambar); }
.ms-nota p { margin: 0; font-size: 13.5px; color: var(--tinta-suave); }

/* Tarjeta de un mensaje automático (mismos tokens que .tn-card) */
.ms-flujo {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 14px 15px; border-radius: 16px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 22px rgba(0,0,0,.06);
  transition: transform .12s ease;
}
.ms-flujo:active { transform: scale(.98); }
[data-tema="oscuro"] .ms-flujo { background: #1C1C1E; border-color: transparent; box-shadow: none; }
.ms-flujo__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ms-flujo__nombre {
  font-size: 16px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-flujo__cab .switch { flex: none; }
.ms-flujo__cuando { margin: 0; font-size: 13.5px; color: var(--tinta-suave); }
.ms-flujo__pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 3px;
}
.ms-flujo__datos {
  font-size: 12px; color: var(--tinta-terciaria); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-mal { color: var(--rojo); }
.ms-chip {
  flex: none; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.ms-chip--borrador { background: var(--superficie-2); color: var(--tinta-suave); }
.ms-chip--pendiente { background: color-mix(in srgb, var(--ambar) 15%, transparent); color: var(--ambar); }

/* ── Editor rápido de un mensaje (hoja alta) ── */
.ms-seccion {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 18px 0 8px;
}
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ms-chips:empty { display: none; }
.ms-palabra {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 7px 5px 11px; border-radius: 999px;
  background: var(--acento-suave); color: var(--tinta);
  font-size: 13px; font-weight: 600;
}
.ms-palabra__x {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tinta-suave);
}
.ms-palabra__x svg { width: 12px; height: 12px; }

.ms-pasos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ms-paso {
  border: 1px solid var(--linea); border-radius: 14px; padding: 10px 12px 12px;
  background: var(--superficie);
}
[data-tema="oscuro"] .ms-paso { background: var(--superficie-2); border-color: transparent; }
.ms-paso__cab { display: flex; align-items: center; gap: 8px; }
.ms-paso__titulo { flex: 1; font-size: 14px; min-width: 0; }
.ms-paso__quitar { width: 34px; height: 34px; color: var(--tinta-terciaria); flex: none; }
.ms-paso__quitar svg { width: 16px; height: 16px; }
.ms-paso__cuerpo { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.ms-paso__cuerpo .campo__nota { margin: 0; }
.ms-paso__texto { resize: none; }
.ms-paso__resumen { margin: 0; font-size: 13.5px; color: var(--tinta-suave); }
.ms-botones { display: flex; flex-direction: column; gap: 8px; }
.ms-boton-fila { display: flex; align-items: center; gap: 6px; }
.ms-boton-fila .campo__input { flex: 1; }
.ms-espera { display: flex; align-items: center; gap: 8px; }
.ms-espera .campo__input { max-width: 110px; }
.ms-espera__rotulo { font-size: 13.5px; color: var(--tinta-suave); }

.ms-errores {
  margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--rojo) 10%, transparent);
  font-size: 13.5px;
}
.ms-errores b { color: var(--rojo); }
.ms-errores ul { margin: 6px 0 0; padding-left: 18px; color: var(--tinta-suave); display: flex; flex-direction: column; gap: 4px; }
.ms-eliminar {
  display: block; margin: 14px auto 4px; padding: 8px 12px;
  color: var(--rojo); font-size: 13.5px; font-weight: 700;
}

/* Velo de confirmación DENTRO de la hoja (mismo molde que la salida del MFA) */
.ms-velo {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(0, 0, 0, .42);
  border-radius: inherit;
}
.ms-velo__caja {
  width: 100%; max-width: 320px;
  background: var(--superficie); border-radius: 16px; padding: 20px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.ms-agente { width: 100%; margin-top: 4px; gap: 8px; }
.ms-agente svg { width: 16px; height: 16px; }

/* ═══════════ Cuotas de Clientes — cobranza del admin (vistas/cuotas.js) ═══════════ */
.cu-sub { padding: 0 16px 10px; font-size: 13.5px; color: var(--tinta-suave); }
.cu-buscar { padding: 0 16px 10px; }
.cu-lista { padding: 2px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.cu-titulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Franja resumen: cuánto está en la calle y qué urge */
.cu-resumen { padding: 2px 2px 8px; }
.cu-resumen__monto { font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
.cu-resumen__rotulo { margin-left: 6px; font-size: 13.5px; color: var(--tinta-suave); }
.cu-resumen__chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }

/* Chips de estado (vencida/por vencer/al día); contraste con el token de cada modo */
.cu-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.cu-chip svg { width: 13px; height: 13px; }
.cu-chip--rojo   { background: color-mix(in srgb, var(--rojo) 14%, transparent);  color: var(--rojo); }
.cu-chip--ambar  { background: color-mix(in srgb, var(--ambar) 14%, transparent); color: var(--ambar); }
.cu-chip--ok     { background: color-mix(in srgb, var(--ok) 14%, transparent);    color: var(--ok); }
.cu-chip--neutro { background: var(--superficie-2); color: var(--tinta-suave); }

/* Tarjeta de una operación (una venta con su cronograma) */
.cu-card {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  padding: 13px 14px; border-radius: 16px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linea);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .12s ease;
}
.cu-card:active { transform: scale(.98); }
.cu-card__cab { display: flex; align-items: center; gap: 10px; }
.cu-card__cab .avatar { width: 40px; height: 40px; font-size: 15px; }
.cu-card__quien { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cu-card__quien b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-card__quien span { font-size: 12.5px; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-card__pie { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--tinta-suave); }

/* Barra de avance pagado/total */
.cu-avance { height: 5px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.cu-avance i { display: block; height: 100%; border-radius: 999px; background: var(--acento-ui); }
.cu-avance--grande { height: 8px; }

/* ── Detalle de la operación ── */
.cu-detalle { padding: 4px 16px 28px; display: flex; flex-direction: column; gap: 12px; }
/* Al desglosar la venta, sus bloques entran escalonados (fade + slide-up),
   solo transform/opacity (§12). El stagger da sensación de armado. */
.cu-detalle > * { animation: cu-aparecer .34s cubic-bezier(.22, 1, .3, 1) both; }
.cu-detalle > :nth-child(1) { animation-delay: .02s; }
.cu-detalle > :nth-child(2) { animation-delay: .06s; }
.cu-detalle > :nth-child(3) { animation-delay: .10s; }
.cu-detalle > :nth-child(4) { animation-delay: .14s; }
.cu-detalle > :nth-child(5) { animation-delay: .18s; }
.cu-detalle > :nth-child(n+6) { animation-delay: .22s; }
.cu-seccion { margin: 6px 2px -4px; font-size: 13px; font-weight: 650; color: var(--tinta-suave); }
.cu-nota { margin: 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--tinta-suave); }

.cu-ficha, .cu-tot, .cu-crono {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 16px; padding: 4px 14px;
}
.cu-ficha__fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px;
}
.cu-ficha__fila:last-child { border-bottom: none; }
.cu-ficha__fila span { color: var(--tinta-suave); flex: none; }
.cu-ficha__fila b { font-weight: 600; text-align: right; min-width: 0; }

.cu-tot { padding: 14px; }
.cu-tot__linea { margin-bottom: 10px; font-size: 13.5px; color: var(--tinta-suave); }
.cu-tot__linea b { font-size: 20px; font-weight: 650; color: var(--tinta); letter-spacing: -.01em; }
.cu-tot__pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--tinta-suave); }
.cu-tot__pie b { font-weight: 650; color: var(--tinta); }

/* Próximo pago: la tarjeta de acción (recordar · llamar · anotar acuerdo) */
.cu-prox {
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  background: color-mix(in srgb, var(--acento) 6%, var(--superficie));
  border-radius: 16px; padding: 14px;
}
.cu-prox--vencida {
  border-color: color-mix(in srgb, var(--rojo) 40%, transparent);
  background: color-mix(in srgb, var(--rojo) 6%, var(--superficie));
}
.cu-prox__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cu-prox__rotulo { font-size: 12px; font-weight: 650; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; }
.cu-prox__monto { font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.cu-prox__cuando { margin: 4px 0 12px; font-size: 13.5px; color: var(--tinta-suave); }
.cu-prox__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cu-prox__acciones .btn { gap: 6px; }
.cu-prox__acciones svg { width: 15px; height: 15px; }

/* Cronograma: una fila por cuota; las pagadas guardan su evidencia (fecha,
   medio, nº de operación) */
.cu-cuota {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.cu-cuota:last-child { border-bottom: none; }
.cu-cuota__nro {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-2); color: var(--tinta-suave);
  font-size: 12.5px; font-weight: 650;
}
.cu-cuota--pagada .cu-cuota__nro { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.cu-cuota--vencida .cu-cuota__nro { background: color-mix(in srgb, var(--rojo) 14%, transparent); color: var(--rojo); }
.cu-cuota__nro svg { width: 15px; height: 15px; }
.cu-cuota__que { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cu-cuota__que b { font-size: 13.5px; font-weight: 600; }
.cu-cuota__que span { font-size: 12px; color: var(--tinta-suave); }
.cu-cuota--vencida .cu-cuota__que span { color: var(--rojo); }
.cu-cuota__monto { font-size: 13.5px; font-weight: 650; flex: none; }
.cu-cuota--pagada .cu-cuota__monto { color: var(--tinta-suave); font-weight: 500; }

/* Apoyos al cliente */
.cu-apoyos { display: flex; flex-direction: column; gap: 8px; }
.cu-apoyos__vacio { margin: 0 2px; font-size: 13px; color: var(--tinta-terciaria); }
.cu-apoyo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 14px; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--linea);
  transition: transform .12s ease;
}
.cu-apoyo:active { transform: scale(.98); }
.cu-apoyo__que { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cu-apoyo__que b { font-size: 14px; font-weight: 650; }
.cu-apoyo__que span { font-size: 12.5px; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-apoyo-add { width: 100%; gap: 8px; }
.cu-apoyo-add svg { width: 16px; height: 16px; }

/* Cobro desde la app (CRM autónomo): botón por cuota pendiente + aviso */
.cu-cuota__cobrar { flex: none; padding: 5px 12px; font-size: 12.5px; }
.cu-nota--alerta { color: var(--ambar); font-weight: 600; }

/* Formularios de Cuotas a PANTALLA COMPLETA (push con slide iOS, nada de
   sheets): contenido que scrollea + botón de acción al final. */
/* Cabecera de página de formulario: botón volver a la izquierda, título
   CENTRADO (la 3ª columna 1fr vacía balancea el ancho del botón). */
.cu-form-cab { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px; }
.cu-form-cab [data-volver] { grid-column: 1; justify-self: start; }
.cu-form-cab .cabecera__titulo { grid-column: 2; text-align: center; }
.cu-form { padding: 6px 16px 32px; }
.cu-form .cu-nota { margin-bottom: 14px; }
.cu-form__accion { width: 100%; margin-top: 10px; padding: 13px 16px; font-size: 15px; }
.cu-form .ms-eliminar { width: 100%; }
/* Campos condicionales (modalidad): entran con fade + deslizamiento suave
   (solo transform/opacity, §12); ocultarse es instantáneo a propósito. */
.cu-reveal { animation: cu-aparecer .28s cubic-bezier(.22, 1, .3, 1); }
@keyframes cu-aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------- Búsqueda global ----
   La lupa del Inicio (buscar.js): página apilada con caja de búsqueda arriba
   y resultados agrupados por secciones (Funciones, Chats, Clientes, Agenda…).
   Solo variables del tema: funciona igual en claro y oscuro. */
.bsq { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bsq-top {
  display: flex; align-items: center; gap: 2px;
  padding: calc(12px + var(--safe-arriba)) 16px 8px;
  flex: none;
}
.bsq-top .buscador { flex: 1; margin: 0; }
.bsq-cancelar {
  border: 0; background: none;
  color: var(--acento-ui); font-weight: 700; font-size: 15px;
  padding: 9px 2px 9px 12px; flex: none;
  transition: opacity .15s, transform .12s ease;
}
.bsq-cancelar:active { opacity: .55; transform: scale(.93); }
.bsq-cuerpo { padding-bottom: calc(24px + var(--safe-abajo)); }

/* La animación de entrada corre SOLO al abrir la búsqueda, no en cada tecleo:
   el filtrado en vivo recrea todos los nodos con cada pulsación, y re-animarlos
   cada vez hacía parpadear la lista. La clase --entra la pone buscar.js únicamente
   en la pintura de apertura (JS la quita antes de repintar por tecleo). */
@keyframes bsq-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.bsq-cuerpo--entra .bsq-seccion,
.bsq-cuerpo--entra .bsq-chip { animation: bsq-entra .22s cubic-bezier(.22, 1, .3, 1) both; }
.bsq-cuerpo--entra .bsq-fila,
.bsq-cuerpo--entra .bsq-vacio { animation: bsq-entra .24s cubic-bezier(.22, 1, .3, 1) both; }
.bsq-seccion {
  padding: 16px 18px 6px;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-terciaria);
}
.bsq-fila {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 16px;
  background: none; border: 0; text-align: left;
  color: var(--tinta);
  transition: background-color .18s, transform .12s ease;
}
.bsq-fila:active { background: var(--superficie-2); transform: scale(.98); }
.bsq-fila .avatar { width: 40px; height: 40px; font-size: 14px; flex: none; }
.bsq-fila__icono {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
}
.bsq-fila__icono svg { width: 20px; height: 20px; }
.bsq-fila__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bsq-fila__titulo {
  font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bsq-fila__sub {
  font-size: 12.5px; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bsq-fila__chevron {
  width: 16px; height: 16px; color: var(--tinta-terciaria); flex: none;
  transition: transform .12s ease;
}
.bsq-fila__chevron svg { width: 16px; height: 16px; }
.bsq-fila:active .bsq-fila__chevron { transform: translateX(2px); }
.bsq-fila--chats { margin-top: 10px; }
.bsq-fila--chats .bsq-fila__titulo { color: var(--acento-ui); }

.bsq-mas {
  border: 0; background: none;
  color: var(--acento-ui); font-weight: 700; font-size: 13.5px;
  padding: 6px 16px 4px 68px; text-align: left; width: 100%;
  transition: opacity .15s, transform .12s ease;
}
.bsq-mas:active { opacity: .6; transform: scale(.98); }
.bsq-vacio {
  text-align: center; color: var(--tinta-suave); font-size: 14px; padding: 40px 32px 8px;
}

.bsq-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px; }
.bsq-chip {
  border: 0; background: var(--superficie-2);
  color: var(--tinta); font-size: 13.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 99px;
  transition: background-color .18s, transform .12s ease;
}
.bsq-chip:active { background: var(--acento-suave); transform: scale(.94); }

/* ------------------------------------------- Búsqueda en mensajes (Chats) ----
   La lupa de Chats busca también dentro del contenido de los mensajes. Los
   resultados van en su propia sección "Mensajes" (contenedor #chats-mensajes),
   bajo la lista de conversaciones. Reusa .chats-grupo (bloque angosto redondeado). */
.chats-seccion {
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-terciaria);
  padding: 15px 24px 7px;
}
.chats-buscando { padding: 14px 24px; color: var(--tinta-suave); font-size: 13.5px; }
#chats-mensajes { padding-bottom: 8px; }

.msg-res {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px;
  background: var(--fondo); text-align: left;
  transition: background-color .18s;
}
.msg-res:not(:last-child) { border-bottom: 1px solid var(--linea); }
.msg-res:active { background: var(--superficie-2); }
.msg-res .avatar { width: 44px; height: 44px; font-size: 15.5px; flex: none; }
.msg-res__centro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2.5px; }
.msg-res__arriba { display: flex; align-items: baseline; gap: 8px; }
.msg-res__nombre {
  flex: 1; min-width: 0; font-weight: 600; font-size: 15.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-res__hora { font-size: 11px; color: var(--tinta-terciaria); flex: none; font-weight: 600; }
.msg-res__snippet {
  font-size: 13.5px; color: var(--tinta-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-res__yo { color: var(--tinta-media); font-weight: 600; }
.msg-res__mark {
  background: color-mix(in srgb, var(--acento) 26%, transparent);
  color: var(--tinta); font-weight: 700;
  border-radius: 3px; padding: 0 1px;
}

/* Resalte de la burbuja al saltar desde un resultado de búsqueda: un anillo del
   acento que entra rápido y se desvanece. Outline, no box-shadow, para no pelear
   con la sombra base de la burbuja ni ocupar layout. */
.burbuja--resaltada {
  outline: 2px solid transparent; outline-offset: 3px;
  animation: burbuja-resalte 2.2s ease-in-out;
}
@keyframes burbuja-resalte {
  12%, 62% { outline-color: var(--acento-ui); }
}

/* Cabecera con el botón "volver" a un lado y el título centrado (mismo patrón
   de rr-editor-cab / cu-form-cab): grid 1fr auto 1fr. */
.cz-cab { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px; }
.cz-cab .cabecera__volver { grid-column: 1; justify-self: start; }
.cz-cab .cabecera__titulo { grid-column: 2; text-align: center; }

/* ------------------------------------------------------------- Cotizador ----
   Calculadora local del asesor: formulario arriba, resultado grande en vivo y
   cronograma debajo. Reusa .campo/.conmutador/.cu-nota; lo propio es .cz-*. */
.cz { padding: 6px 16px 32px; }
.cz > .cu-nota { margin-bottom: 14px; }
.cz-modo-desc { margin: 8px 2px 16px; font-size: 12.5px; line-height: 1.45; color: var(--tinta-media); }
.cz-card {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 16px; padding: 16px 16px 12px; margin-bottom: 14px;
}
[data-tema="oscuro"] .cz-card { background: #141414; border-color: transparent; }
.cz-card .campo:last-of-type { margin-bottom: 4px; }
.cz-precio { font-size: 20px; font-weight: 650; }
.cz-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 2px 0 14px; }
.cz-chip {
  padding: 9px 14px; border-radius: 999px;
  border: 1.5px solid var(--linea-fuerte); background: var(--superficie);
  font-size: 14px; font-weight: 600; color: var(--tinta-suave);
  transition: transform .12s ease;
}
.cz-chip:active { transform: scale(.94); }
/* Seleccionado = mismo patrón que .chip-etapa.activa: texto tinta sobre acento
   al 10% — pasa 4.5:1 con CUALQUIER acento de tenant (blanco sobre acento no). */
.cz-chip.activo {
  border-color: var(--acento-ui); color: var(--tinta);
  background: color-mix(in srgb, var(--acento-ui) 10%, transparent);
}
[data-tema="oscuro"] .cz-chip { background: #1A1A1A; }
.cz-chips__libre { width: 74px; text-align: center; padding: 9px 10px; }
.cz-res { padding-bottom: 16px; }
.cz-res__monto { font-size: 36px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; font-variant-numeric: tabular-nums; }
.cz-res__sub { font-size: 13.5px; line-height: 1.45; color: var(--tinta-media); }
.cz-res__chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.cz-dato {
  padding: 5px 11px; border-radius: 999px; background: var(--superficie-2);
  font-size: 12.5px; font-weight: 600; color: var(--tinta-media);
}
[data-tema="oscuro"] .cz-dato { background: #222; }
.cz-crono__tit { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.cz-fila { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; }
.cz-fila + .cz-fila { border-top: 1px solid var(--linea); }
.cz-fila__n { font-size: 14px; font-weight: 600; }
.cz-fila__fecha { margin-left: auto; font-size: 13px; color: var(--tinta-media); }
.cz-fila__monto { min-width: 92px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.cz-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* ── Aprobar con la huella: Mis solicitudes (asesor) ── */
.ap-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ap-item { display: flex; align-items: center; gap: 12px; background: var(--superficie); border: 1px solid var(--tarjeta-borde, var(--linea));
  border-radius: var(--tarjeta-radio, var(--radio)); padding: 12px 13px; cursor: pointer; }
.ap-item:active { background: var(--superficie-2); }
.ap-item__ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento-ui); }
.ap-item__ic svg { width: 20px; height: 20px; }
.ap-item__c { flex: 1 1 auto; min-width: 0; }
.ap-item__t { display: block; font-size: .96rem; font-weight: 650; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-item__sub { margin: 2px 0 0; font-size: .82rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-item__meta { margin: 3px 0 0; font-size: .76rem; color: var(--tinta-terciaria, var(--tinta-suave)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-item__estado { flex: 0 0 auto; font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--ambar) 16%, transparent); color: var(--ambar); }
.ap-item__estado--ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.ap-item__estado--mal { background: color-mix(in srgb, var(--rojo) 14%, transparent); color: var(--rojo); }
.ap-item__estado--neutro { background: color-mix(in srgb, var(--tinta-suave) 14%, transparent); color: var(--tinta-suave); }
.ap-sheet__estado { display: inline-block; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin: 2px 0 8px;
  background: color-mix(in srgb, var(--ambar) 16%, transparent); color: var(--ambar); }
.ap-sheet__det { font-size: 1.2rem; font-weight: 700; color: var(--tinta); margin: 0 0 6px; }
.ap-sheet__motivo { font-size: .92rem; color: var(--tinta-media, var(--tinta-suave)); margin: 0 0 8px; line-height: 1.45; }