/* 🎨 Esencia Pulso (31-oct, pulido etapa 2): un solo sistema de diseño para Pulso, Pulpo, Vitrina y Estudio.
   · Los tokens (colores, radios, espacios, letra, capas) están en estilos.css (:root). Aquí van los COMPONENTES comunes, hechos con las
     clases que ya funcionan: .cf-btn, .pp-sec (alias .cf-sec), .cf-sw, .cf-p-head, el aviso #cf-toast y los estados vacío / cargando / error.
   · Va de ÚLTIMO en index.html. Las reglas de aspecto van bajo :where(html:not(.cf-clasico)): «Diseño clásico» (Mi perfil) deja todo como antes.
     El :where() no suma especificidad: una regla de una pantalla concreta (p. ej. «.gf-acc .cf-btn-primary») sigue ganando; Esencia solo
     reemplaza las reglas generales del mismo peso.
   · Lo que es accesibilidad (campos de 16 px en el celular para poder quitar maximum-scale, los botones del aviso) aplica también en clásico.
   · Solo la app del equipo: las landings públicas de Vitrina no cargan este archivo. */

/* ── 1 · Botones: un solo primario por pantalla, con el degradado FUERTE (letra blanca ≥ 4,5:1; el decorativo daba 3,67) ── */
:where(html:not(.cf-clasico)) .cf-btn-primary:not(.cf-lg-subir) { background: var(--marca-fuerte); color: var(--on-marca); border-color: transparent; }
:where(html:not(.cf-clasico)) .cf-btn-primary:not(.cf-lg-subir):disabled { color: var(--on-marca); }
:where(html:not(.cf-clasico)) .cf-btn-danger:not(:disabled):hover { background: var(--red-bg); }
/* 📱 botón «Menú» del celular (degradado con letra blanca de 15 px) */
:where(html:not(.cf-clasico)) .cf-mbar-menu { background: var(--marca-fuerte); }
/* 🐙 Pulpo (sus colores salen de 🎨 Apariencia: --pp-a / --pp-b): el MISMO tono, oscurecido, detrás de letra blanca */
html:not(.cf-clasico) :is(.pp-enviar, .pp-seg button.on, .pp-modo.on, .cf-neg-fun-b[data-neg-fun="pulpo"].on, .pp-chip.on, .pp-bx-ok) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a, #f43f5e) 82%, #000), color-mix(in srgb, var(--pp-b, #a855f7) 82%, #000)) !important; }
html:not(.cf-clasico) #cf-pulpo .pp-subtab-probar.on { background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a, #f43f5e) 82%, #000), color-mix(in srgb, var(--pp-b, #a855f7) 82%, #000)) !important; }
/* 🛍️ Vitrina: pestaña elegida del editor */
html:not(.cf-clasico) .vo-tab.on { background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a, #f43f5e) 82%, #000), color-mix(in srgb, var(--pp-b, #a855f7) 82%, #000)); }
/* 🎨 Estudio: «Generar» y «Crear GIF» */
html:not(.cf-clasico) .es .cf-btn-primary.es-gen:not(:disabled) { background: var(--marca-fuerte); }
html:not(.cf-clasico) .gf-crear { background: var(--marca-fuerte) !important; }

/* 🌓 Contraste (WCAG AA, ≥ 4,5:1): fondos de marca con letra blanca que daban 3,67 (degradado claro) o 2,72 (violeta claro del oscuro) */
:where(html:not(.cf-clasico)) :is(.cf-chip-on, .cf-btn-take, .cf-ojo, .cf-ojo-v, .cf-deshacer-b, .cf-conex-tabs button.on, .cf-ad2-tabs button.on, .cf-mbar-dot-v,
  .cf-nov-pub .cf-nov-pub-b, .cf-ap-vc, .cf-cfg-tab.cf-cfg-on em, .cf-ptr.cf-ptr-listo, .cf-ptr.cf-ptr-carga, .cf-iac-m.yo) { background: var(--marca-fuerte); }
html:not(.cf-clasico).cf-hx-listo #cf-app .cf-header-actions #cf-btn-registrar { background: var(--marca-fuerte); }
:where(html:not(.cf-clasico)) :is(.vt-seg button.on, .vt-tab.on, .cf-tab-on, .vc-pasos li.on i, .cf-avatar, .cf-mbar-yo:not(.cf-av-foto)) { background: var(--accent-fuerte); border-color: var(--accent-fuerte); }
:where(html:not(.cf-clasico)) .cf-btn-wa { background: var(--wa-fuerte); border-color: var(--wa-fuerte); }
html:not(.cf-clasico) .cf-panel .cf-btn-wa { background: var(--wa-fuerte); }
html:not(.cf-clasico) .pp-ia-b { background: linear-gradient(135deg, #7c3aed, #db2777) !important; }                          /* 🪄 Armar con IA (Pulpo) */
html:not(.cf-clasico) .vt-brillo { background: linear-gradient(135deg, #15803d, #047857 55%, #0369a1) !important; }           /* ✨ Landing en 1 clic (Vitrina) */
/* ámbar y verde como letra (sobre blanco o sobre su fondo teñido) daban 3,9–4,4: en claro, el mismo tono más oscuro (5,5–6,3:1) */
:root[data-theme="light"]:not(.cf-clasico) { --amber: var(--amber-t); --green: var(--green-t); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not(.cf-clasico) { --amber: var(--amber-t); --green: var(--green-t); } }

/* 👆 toques de 44 px en pantallas táctiles: los botones principales crecen; los demás botones y el ? / ✕ chicos ganan zona invisible */
@media (pointer: coarse) {
  :where(html:not(.cf-clasico)) .cf-btn-primary { min-height: var(--h-toque); }
  :where(html:not(.cf-clasico)) .cf-btn:not(.cf-btn-mini, .cf-btn-sm) { min-height: var(--h-toque); }   /* los mini y sm (filas apretadas) quedan como estaban */
  :where(html:not(.cf-clasico)) .cf-p-head [data-acc="cerrar"] { min-width: var(--h-toque); min-height: var(--h-toque); }
}

/* ⌨️ foco visible con teclado en todo lo que se toca (con el mouse o el dedo no sale) */
:where(html:not(.cf-clasico)) :is(button, a[href], summary, [role="button"], [tabindex]:not([tabindex="-1"]), select, .cf-sw):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
:where(html:not(.cf-clasico)) .cf-btn-primary:focus-visible { outline-color: var(--t1); }

/* 📝 campos: en el celular, letra de 16 px (si no, el iPhone acerca la pantalla al escribir; por eso se pudo quitar maximum-scale=1 y
   ahora se puede hacer zoom). Aplica también en clásico: es lo que permite el zoom. En el computador, igual que antes.
   El de .cf-input va en estilos.css, justo después de .cf-input (así los campos que ya eran más grandes, como el valor del registro,
   siguen igual). Aquí, con peso 0, los campos sin clase de los 4 módulos: cualquier regla propia de una pantalla gana */
@media (pointer: coarse) {
  :where(#cf-root, #cf-pulpo, #vt-adm, #vt-capa, #cf-estudio, .cf-panel) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) { font-size: 16px; }
}
:where(html:not(.cf-clasico)) .cf-input::placeholder { color: var(--t3); opacity: 1; }

/* 💲 campos de pesos: cifras alineadas */
.cf-dinero { font-variant-numeric: tabular-nums; }

/* ── 2 · Tarjeta / sección: la de Pulpo (.pp-sec) con su nombre común .cf-sec, para Pulso, Vitrina y Estudio ── */
.cf-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s4); display: flex; flex-direction: column; gap: 10px; }
.cf-sec > h3, .cf-sec-h h3 { margin: 0; font-size: 15px; }
.cf-sec-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.cf-sec-2 { background: var(--surface-2); border-radius: var(--r); padding: var(--s3); }
/* etiqueta de alcance de un interruptor: «🏷️ Solo este bot» · «Todo el negocio» */
.cf-alcance { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-bg); color: var(--accent); font-size: var(--f-xs); font-weight: 700; white-space: nowrap; }
/* caja «⚙️ Más opciones» */
.cf-mas { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.cf-mas > summary { display: flex; align-items: center; gap: 8px; min-height: var(--h); padding: 0 var(--s3); cursor: pointer; font-weight: 700; color: var(--t2); list-style: none; }
.cf-mas > summary::-webkit-details-marker { display: none; }
.cf-mas > summary::after { content: '⌄'; margin-left: auto; transition: transform var(--dur-1); }
.cf-mas[open] > summary::after { transform: rotate(180deg); }
.cf-mas > :not(summary) { padding: 0 var(--s3) var(--s3); }

/* ── 3 · Interruptor: .cf-sw (celebraciones.css) es el único; encendido con el degradado de marca y foco visible ── */
:where(html:not(.cf-clasico)) .cf-sw:checked { background: var(--marca); }

/* ── 4 · Encabezado de pantalla (.cf-p-head): título con la letra común y acciones alineadas ── */
:where(html:not(.cf-clasico)) .cf-p-nombre { font-size: 19px; letter-spacing: -.01em; }
:where(html:not(.cf-clasico)) .cf-p-head > [data-acc="cerrar"] { border-radius: var(--rs); }

/* ── 5 · Estados: cargando y error con «Reintentar» (el vacío es .cf-vacio / window.pulsoVacio) ── */
.cf-cargando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 12px; color: var(--t2); font-size: var(--f-md); }
.cf-cargando-p { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: cf-es-giro .8s linear infinite; flex: 0 0 auto; }
@keyframes cf-es-giro { to { transform: rotate(360deg); } }
html.cf-quieto .cf-cargando-p { animation: none; }
@media (prefers-reduced-motion: reduce) { .cf-cargando-p { animation: none; } }
.cf-fallo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: var(--s3) var(--s4); border-radius: var(--r); border: 1px solid var(--amber-bd); background: var(--amber-bg); color: var(--t1); font-size: var(--f-md); line-height: 1.4; }
.cf-fallo-ico { font-size: 18px; flex: 0 0 auto; }
.cf-fallo-t { flex: 1 1 200px; min-width: 0; }
.cf-fallo-t .cf-err-det { margin-top: 4px; }
.cf-fallo-btn { flex: 0 0 auto; font-weight: 700; }

/* ── 6 · Aviso de abajo (#cf-toast, esencia.js → window.pulsoToast) ── */
/* botones del aviso (Reintentar / ✕): en clásico también, si no, no se podrían usar */
.cf-toast .cf-toast-bts { display: inline-flex; gap: 4px; flex: 0 0 auto; margin-left: 8px; vertical-align: middle; }
.cf-toast :is(.cf-toast-acc, .cf-toast-x) { pointer-events: auto; min-height: 36px; padding: 0 12px; border-radius: var(--rs); border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.cf-toast .cf-toast-x { padding: 0; width: 36px; border-color: transparent; font-size: 16px; }
.cf-toast .cf-toast-acc:focus-visible, .cf-toast .cf-toast-x:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
@media (pointer: coarse) { .cf-toast :is(.cf-toast-acc, .cf-toast-x) { min-height: 40px; } .cf-toast .cf-toast-x { width: 40px; } }
/* forma: rectángulo de esquinas suaves (no píldora: los textos largos se volvían una mancha), máx. 420 px, a la izquierda si es largo.
   width: max-content: con left: 50% el navegador solo le daba media pantalla y el texto quedaba en una columna angosta */
:where(html:not(.cf-clasico)) .cf-toast { width: max-content; border-radius: var(--r); max-width: min(420px, calc(100vw - 32px)); padding: 11px 16px; line-height: 1.38; box-shadow: var(--shadow); }
:where(html:not(.cf-clasico)) .cf-toast.cf-toast-largo { text-align: left; }
:where(html:not(.cf-clasico)) .cf-toast.cf-toast-con { display: flex; align-items: center; gap: 4px; text-align: left; padding: 8px 8px 8px 16px; }
:where(html:not(.cf-clasico)) .cf-toast.cf-toast-con .cf-toast-msg { flex: 1 1 auto; min-width: 0; }
/* error: rojo que da ≥ 4,5:1 con letra blanca también en oscuro (el --red del oscuro es claro: 2,4:1) */
:where(html:not(.cf-clasico)) .cf-toast.cf-toast-error { background: #c92a2a; color: #fff; }

/* ── 7 · 👍 Lo común primero (31-oct, pul4a): la asesora confirma con el pulgar ── */
/* los 4 resultados (✅ ⚠️ ⏳ ❌) quedan fijos abajo del pedido hasta que se llega a ellos (sticky: los mismos botones, sin copias) */
:where(html:not(.cf-clasico)) .cf-estados-fijos { position: sticky; bottom: 0; z-index: 3; padding: 8px 0 6px; background: var(--surface);
  box-shadow: 0 -12px 14px -14px rgba(0, 0, 0, .45); }
/* el panel (.cf-panel) deja un relleno abajo (28 px; 24 en el celular) y sticky se pega antes de él: sin esto, el contenido pasa por debajo */
:where(html:not(.cf-clasico)) .cf-panel .cf-estados-fijos { bottom: -28px; }
@media (max-width: 700px) { :where(html:not(.cf-clasico)) .cf-panel .cf-estados-fijos { bottom: -24px; } }
/* ⚙️ Más opciones del pedido: Editar, Lista negra, Es una prueba, Abono, Pago adelantado, Despacho y la Ficha del cliente */
:where(html:not(.cf-clasico)) .cf-pmas { margin: 14px 0 12px; }
:where(html:not(.cf-clasico)) .cf-pmas > summary { padding: 8px var(--s3); }
:where(html:not(.cf-clasico)) .cf-pmas-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--t1); }
:where(html:not(.cf-clasico)) .cf-pmas-t small { flex: 1 0 100%; color: var(--t2); font-size: var(--f-xs); font-weight: 600; line-height: 1.35; }
:where(html:not(.cf-clasico)) .cf-pmas-t .cf-badge { margin: 0; }
:where(html:not(.cf-clasico)) .cf-pmas-in > .cf-pmini { margin-top: 2px; }
:where(html:not(.cf-clasico)) .cf-pmas-in > .cf-hist { margin-bottom: 0; }
@media (pointer: coarse) { :where(html:not(.cf-clasico)) .cf-pmas > summary { min-height: var(--h-toque); } :where(html:not(.cf-clasico)) .cf-pmas .cf-pmini button { min-height: var(--h-toque); } }
/* 🚀 «Deja tu Pulso listo» plegado a una línea (la lista, el pedido de ejemplo y «Ocultar» adentro) */
:where(html:not(.cf-clasico)) .cf-pasos-d > summary { list-style: none; cursor: pointer; align-items: center; min-height: var(--h-toque); }
:where(html:not(.cf-clasico)) .cf-pasos-d > summary::-webkit-details-marker { display: none; }
:where(html:not(.cf-clasico)) .cf-pasos-d > summary > div { flex: 1 1 auto; min-width: 0; }
:where(html:not(.cf-clasico)) .cf-pasos-d > summary::after { content: '⌄'; flex: 0 0 auto; color: var(--t2); font-weight: 800; transition: transform var(--dur-1); }
:where(html:not(.cf-clasico)) .cf-pasos-d[open] > summary::after { transform: rotate(180deg); }
:where(html:not(.cf-clasico)) .cf-pasos-mini { flex: 0 0 56px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--t2) 18%, transparent); overflow: hidden; }
:where(html:not(.cf-clasico)) .cf-pasos-mini i { display: block; height: 100%; border-radius: inherit; background: var(--marca); }
:where(html:not(.cf-clasico)) .cf-pasos-d .cf-pasos-seguir { flex: 0 0 auto; min-height: 36px; }
@media (pointer: coarse) { :where(html:not(.cf-clasico)) .cf-pasos-d .cf-pasos-seguir { min-height: var(--h-toque); } }
:where(html:not(.cf-clasico)) .cf-pasos-d:not([open]) { padding-top: 8px; padding-bottom: 8px; }
:where(html:not(.cf-clasico)) .cf-pasos-d[open] :is(.cf-pasos-seguir, .cf-pasos-mini) { display: none; }   /* abierto: ya están «Empezar» y la barra grande */
:where(html:not(.cf-clasico)) .cf-pasos-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
:where(html:not(.cf-clasico)) .cf-pasos-tit small { color: var(--t2); font-size: 12.5px; }
@media (max-width: 380px) { :where(html:not(.cf-clasico)) .cf-pasos-mini { display: none; } }
html.cf-quieto:not(.cf-clasico) :is(.cf-pmas, .cf-pasos-d) > summary::after { transition: none; }
@media (prefers-reduced-motion: reduce) { :where(html:not(.cf-clasico)) :is(.cf-mas, .cf-pasos-d) > summary::after { transition: none; } }
/* 💬 el «Sí, confirmar» de las ventanas de Pulso (dialogos.js) con el degradado fuerte: letra blanca ≥ 4,5:1 (el claro daba 3,67) */
html:not(.cf-clasico) .pd-velo .pd-b-si { background: var(--marca-fuerte); }