/* [Pulso-Supabase] 🔀 (31-oct, pul3) Cabecera común de módulos (public/modulos.js): el nombre como selector, el menú «Cambiar de módulo»,
   «Volver a Pulso» igual en Pulpo, Vitrina y Estudio, y la fila de módulos de los menús del celular. Solo colores de la app (var(--…)). */

/* el nombre del módulo es el selector (adentro van su logo y su título de siempre) */
.cf-mod-sw { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; margin: 0 0 0 -6px; padding: 2px 8px 2px 6px; border: 1px solid transparent; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cf-mod-sw:hover, .cf-mod-sw[aria-expanded="true"] { background: color-mix(in srgb, var(--t1) 6%, transparent); border-color: var(--border); }
.cf-mod-sw:focus-visible, .cf-mod-volver:focus-visible, .cf-mod-op:focus-visible, .cf-mod-t:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px; }
.cf-mod-chev { width: 18px; height: 18px; flex: none; margin-left: -4px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.cf-mod-sw[aria-expanded="true"] .cf-mod-chev { transform: rotate(180deg); }
.cf-mod-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* «Volver a Pulso»: el mismo en los tres módulos (en el celular, solo el logo) */
.cf-mod-volver { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--t1); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cf-mod-volver:hover { border-color: #a855f7; }
.cf-mod-volver img { width: 22px; height: 22px; border-radius: 7px; display: block; }
@media (pointer: coarse) { .cf-mod-volver { min-height: 44px; } }
@media (max-width: 700px) {
  .cf-mod-volver { width: 44px; min-height: 44px; padding: 0; } .cf-mod-volver span { display: none; }
  .es-top .cf-mod-sw { gap: 2px; margin: 0; padding: 2px 2px 2px 0; } .es-top .cf-mod-chev { width: 14px; margin-left: 0; }   /* 🎨 Estudio: en el celular solo el logo (su título ya se ocultaba) y deja lugar al producto */
}

/* el menú «Cambiar de módulo»: debajo del nombre (computador) u hoja abajo (celular) */
.cf-mod-velo { position: fixed; inset: 0; z-index: 9590; }
.cf-mod-velo-cel { background: rgba(6, 4, 12, .5); }
.cf-mod-menu { position: fixed; z-index: 9600; display: grid; gap: 2px; padding: 6px; border-radius: 16px; background: var(--surface); color: var(--t1); border: 1px solid var(--border); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .55); }
.cf-mod-hoja { left: 0; right: 0; bottom: 0; top: auto; padding: 6px 12px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; border-bottom: 0; }
.cf-mod-grip { width: 40px; height: 4px; margin: 4px auto 6px; border-radius: 99px; background: var(--border-2, var(--border)); }
.cf-mod-h { margin: 4px 10px 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--t2); }
.cf-mod-op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.cf-mod-hoja .cf-mod-op { min-height: 56px; }
.cf-mod-op:hover { background: color-mix(in srgb, var(--t1) 6%, transparent); }
.cf-mod-op.on { background: color-mix(in srgb, #a855f7 12%, transparent); cursor: default; }
.cf-mod-op-i { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; font-size: 22px; background: color-mix(in srgb, var(--t1) 6%, transparent); }
.cf-mod-op-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.cf-mod-op-t b { font-size: 15px; }
.cf-mod-op-t small { font-size: 13px; color: var(--t2); }
.cf-mod-op-ya { flex: none; font-size: 12px; font-weight: 700; color: var(--t2); }
.cf-mod-nada { margin: 4px 10px 8px; font-size: 13px; color: var(--t2); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.cf-quieto) .cf-mod-menu { animation: cf-mod-in .14s ease-out; }
  html:not(.cf-quieto) .cf-mod-hoja { animation: cf-mod-sube .2s ease-out; }
}
@keyframes cf-mod-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes cf-mod-sube { from { transform: translateY(24px); opacity: .6; } }

/* la fila de módulos de los menús del celular (Menú de Pulso y «Más» de Pulpo) */
.cf-mod-tira { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin: 2px 0 12px; }
.cf-mod-t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--t1); font: inherit; cursor: pointer; }
.cf-mod-t span { font-size: 22px; line-height: 1; }
.cf-mod-t b { font-size: 13px; }
.cf-mod-t.on { border-color: #a855f7; background: color-mix(in srgb, #a855f7 12%, var(--surface)); cursor: default; }
.cf-mmenu .cf-mod-tira { margin: 0 14px 10px; }

/* 🏷️ (pul3) «Calidad del número» (antes «Calidad», se confundía con Calidad y Salud): en el menú lateral de Pulpo va en dos renglones, sin cortarse */
@media (min-width: 761px) { #pp-tabs .pp-nav[data-pp-vista="calidad"] span { white-space: normal; line-height: 1.15; } }

/* 🎨 (1-nov, el dueño) los módulos con íconos de línea y el degradado de Pulso, como el resto del menú (Lucide: activity, message-circle, shopping-bag, palette) */
.cf-mod-svg { display: grid; place-items: center; height: 28px; }
.cf-mod-op-i.cf-mod-svg { height: 26px; }
.cf-mod-t:not(.on) .cf-mod-svg::before { opacity: .85; }
.cf-mod-svg[data-ico="mod-pulso"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2012h-4l-3%209L9%203l-3%209H2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2012h-4l-3%209L9%203l-3%209H2%22%2F%3E%3C%2Fsvg%3E"); }
.cf-mod-svg[data-ico="mod-pulpo"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.9%2020A9%209%200%201%200%204%2016.1L2%2022Z%22%2F%3E%3Cpath%20d%3D%22M8%2012h.01M12%2012h.01M16%2012h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.9%2020A9%209%200%201%200%204%2016.1L2%2022Z%22%2F%3E%3Cpath%20d%3D%22M8%2012h.01M12%2012h.01M16%2012h.01%22%2F%3E%3C%2Fsvg%3E"); }
.cf-mod-svg[data-ico="mod-vitrina"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z%22%2F%3E%3Cpath%20d%3D%22M3%206h18%22%2F%3E%3Cpath%20d%3D%22M16%2010a4%204%200%200%201-8%200%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z%22%2F%3E%3Cpath%20d%3D%22M3%206h18%22%2F%3E%3Cpath%20d%3D%22M16%2010a4%204%200%200%201-8%200%22%2F%3E%3C%2Fsvg%3E"); }
.cf-mod-svg[data-ico="mod-estudio"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010c.93%200%201.65-.75%201.65-1.69%200-.44-.18-.84-.44-1.13-.29-.29-.44-.65-.44-1.13a1.64%201.64%200%200%201%201.67-1.67h2c3.05%200%205.56-2.5%205.56-5.56C22%206.04%2017.5%202%2012%202Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010c.93%200%201.65-.75%201.65-1.69%200-.44-.18-.84-.44-1.13-.29-.29-.44-.65-.44-1.13a1.64%201.64%200%200%201%201.67-1.67h2c3.05%200%205.56-2.5%205.56-5.56C22%206.04%2017.5%202%2012%202Z%22%2F%3E%3C%2Fsvg%3E"); }