/* ✨ Pulido visual (28-oct, novedad 328): retoques pequeños de pantalla en Pulso y Pulpo, sin cambiar cómo funciona nada.
   Va de último (después de estudio.css) para ganarle a las reglas de siempre sin tocar los archivos grandes. Solo CSS: si algo
   se viera raro, quitar el <link> de index.html deja todo como antes. Respeta 🎨 Animaciones (html.cf-quieto) y prefers-reduced-motion:
   aquí no hay animaciones nuevas. */

/* 1 · ✂️ Ingreso en el celular: con 2 columnas de ~164 px los nombres se partían a mitad de palabra («Jhonata / n»). Avatar, espacios
   y flecha un poco más compactos para que un nombre de 8–9 letras quepa entero; los de dos palabras siguen en dos renglones */
@media (max-width: 420px) {
  html.cf-3d .cf-login-btn { gap: 8px; padding: 10px; }
  html.cf-3d .cf-login-btn .cf-avatar { width: 36px; height: 36px; }
  html.cf-3d .cf-login-flecha { font-size: 18px; }
  html.cf-3d .cf-login-nom { overflow-wrap: break-word; }
}

/* 2 · 🔌 Conexiones en el celular: la etiqueta «🟢 En vivo · 1 cuenta» iba al lado de la descripción y la aplastaba a 4–5 renglones
   de 2 palabras. Ahora baja a su propia línea, alineada con el texto (46 px del logo + 12 de espacio) */
@media (max-width: 560px) {
  .cf-ig-card > header { flex-wrap: wrap; row-gap: 8px; }
  .cf-ig-card > header > div { flex: 1 1 calc(100% - 58px); }
  .cf-ig-card > header > .cf-bt-pill { margin-left: 58px; }
}

/* 3 · 👁️ Tema claro con las cifras ocultas: el botón «Mostrar cifras» quedaba con letra lila casi blanca sobre lila claro (1,4:1, no se
   leía). La regla de bandeja.css buscaba .cf-privado DENTRO de :root, pero la clase está en el mismo <html>: nunca aplicaba */
/*   (el tema claro es data-theme="light" o, en «automático», sin data-theme con el celular en claro: por eso cada regla va dos veces) */
:root[data-theme="light"].cf-privado .cf-ojo, :root[data-theme="light"].cf-privado-v .cf-ojo-v { color: #6b21a8; }
@media (prefers-color-scheme: light) { :root:not([data-theme]).cf-privado .cf-ojo, :root:not([data-theme]).cf-privado-v .cf-ojo-v { color: #6b21a8; } }

/* 4 · 👆 Más fáciles de tocar con el dedo (solo pantallas táctiles: en el computador todo queda igual). Medido en el celular de 390 px:
   la flecha ← para volver a los chats medía 26 px, el «?» de ayuda 26, el ⌄ de cada mensaje 22, «Mover a» del CRM 22, los filtros de
   Pulpo 28–30, los de período y país del Tablero 20–30, y Apagado/Sugerir/Automático 26. La meta es ~40 px de zona de toque.
   En los botones que van pegados a otras cosas (?, ⌄) se agranda solo la zona invisible (::after), sin mover nada en la pantalla */
@media (pointer: coarse) {
  #cf-pulpo .pp-atras { min-width: 40px; min-height: 40px; margin-left: -6px; }
  .cf-ayu-btn { position: relative; }
  .cf-ayu-btn::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
  #cf-pulpo .pp-m-mn::after { content: ''; position: absolute; inset: -9px -8px; }
  #cf-pulpo .pp-filtros .pp-chip, #cf-pulpo .pp-fbot { min-height: 36px; }
  #cf-pulpo .pp-crm-mv select { min-height: 34px; }
  #cf-pulpo .pp-seg button { min-height: 36px; }
  #cf-pulpo .pp-tb-filtros .cf-hr-chip, .cf-fr:not(.cf-fr-hero) .cf-hr-chip { min-height: 36px; }   /* las del inicio (tarjeta de ventas) quedan igual: no crecen la tarjeta */
  #cf-pulpo .pp-peds-tg, #cf-pulpo .pp-ped-acc { min-height: 34px; }
}

/* 5 · 🧩 Vendedor en el celular: «A este bot le falta 1 cosa · 7 de 8» se cortaba en «A este bot le falta 1 cosa …» y no se veía
   cuánto faltaba. En pantallas angostas el texto puede bajar a un segundo renglón y la barrita es más corta */
@media (max-width: 520px) {
  #cf-pulpo .pp-bt-top .pp-listo > summary { border-radius: 16px; }
  #cf-pulpo .pp-bt-top .pp-listo-t { white-space: normal; line-height: 1.3; }
  #cf-pulpo .pp-bt-top .pp-listo-bar { flex-basis: 56px; width: 56px; }
}

/* 6 · ☀️ Pulpo en tema claro: letras de color que casi no se leían sobre blanco (medido con las animaciones quietas): la hora y el bot
   de los chats sin leer (fucsia claro, 2,5:1 y 2,2:1), el ✓✓ de leído (celeste, 2,1:1), las etapas y etiquetas de color («Interesado»,
   «Nueva venta», 1,9–2,1:1), el contador de cada columna del CRM (1,9:1) y «✨ Resumen del chat» (2,3:1). En claro se oscurece el MISMO
   color (mezclado con negro) para que pase de 4,5:1: se conserva el tono de cada etapa y lo que elijas en 🎨 Apariencia. En oscuro, igual */
html[data-theme="light"] #cf-pulpo .pp-nuevo .pp-it-d small { color: color-mix(in srgb, var(--pp-c) 55%, #000) !important; }
html[data-theme="light"] #cf-pulpo .pp-tk-leido { color: #0369a1; }
html[data-theme="light"] #cf-pulpo :is(.pp-etq-c, .pp-crm-col header em) { color: color-mix(in srgb, var(--c) 58%, #000); }
html[data-theme="light"] #cf-pulpo .pp-res-gen { color: color-mix(in srgb, var(--pp-d) 55%, #000); }
@media (prefers-color-scheme: light) {   /* lo mismo en tema «automático» con el celular en claro */
  html:not([data-theme]) #cf-pulpo .pp-nuevo .pp-it-d small { color: color-mix(in srgb, var(--pp-c) 55%, #000) !important; }
  html:not([data-theme]) #cf-pulpo .pp-tk-leido { color: #0369a1; }
  html:not([data-theme]) #cf-pulpo :is(.pp-etq-c, .pp-crm-col header em) { color: color-mix(in srgb, var(--c) 58%, #000); }
  html:not([data-theme]) #cf-pulpo .pp-res-gen { color: color-mix(in srgb, var(--pp-d) 55%, #000); }
}

/* 7 · 🫆 Huella del cliente (detalle del pedido): la letra de la nota (A, B, C…) y «Confiable / Buena» iban en blanco sobre verde, lima o
   ámbar brillante (2,0–2,3:1, costaba leerlas, sobre todo al sol). Ahora la letra es del mismo color pero muy oscuro (≥ 6:1); la pastilla
   y el anillo conservan su color */
.cf-huc-sub, .cf-huc-anillo i { color: color-mix(in srgb, var(--hu) 22%, #000); }