/* ── BITÁCORA ──
   [v2026.10.29-1] app-modo.css
   2026-10-29 | + la pantalla «Tus avisos» (.av-pantalla, app-avisos.js [v2026.10.29-1]; preview aprobado por Alberto).
   [v2026.10.28-9] app-modo.css
   2026-10-28 (9) | CONVERSACIONES EN EL CELULAR (preview aprobado por Alberto el 28-10): el buscador de contactos siempre a la
     vista bajo el título (#app-conv-buscar), y los mensajes más anchos como en WhatsApp (hasta 85%, la hora abajo a la
     derecha, sin las caritas: quién escribió lo dice el color).
   [v2026.10.28-8] app-modo.css
   2026-10-28 (8) | Conversaciones: #convWrapper sin el margen de -8px del sitio (en la app corría la lista fuera de la
     pantalla y cortaba el borde derecho de las tarjetas).
   [v2026.10.28-7] app-modo.css
   2026-10-28 (7) | PAGOS EN EL CELULAR (preview aprobado por Alberto el 28-10, con las tarjetas compactas que pidió): aire a
     los lados, el estado bajo el título, las vistas en tira, los números de a dos y más bajos, el botón bajo su texto, y el
     historial y las boletas como tarjetas de dos líneas (las demás tablas, «columna: valor»).
   [v2026.10.28-6] app-modo.css
   2026-10-28 (6) | CONFIGURACIÓN EN EL CELULAR (Alberto: «también se ve mal»; preview aprobado el 28-10): los cinco pasos en
     tira de pastillas, sin la vista previa lateral ni la fila «Volver › …», los números del paso 1 en fila deslizable,
     «Mi equipo» en tarjetas, las pestañas del paso 4 en tira y sus listas con menos marco y el asa angosta.
   [v2026.10.28-5] app-modo.css
   2026-10-28 (5) | EMPRESAS EN EL CELULAR (Alberto: «revisa empresas, todo se ve mal»; preview aprobado el 28-10): las pestañas
     de arriba, las vistas (Atención, Consumo…) y los pasos de las fichas en tiras que se deslizan, como en Seguimiento; los
     números en una fila deslizable; los filtros de a dos; las tablas como tarjetas (data-label, de app-modo.js); la
     tarjeta del usuario compacta (nombre y activo arriba, email, y en una línea cargo, recurso, empresa y botones);
     Sectores y Prompts de a dos. Dentro de una ficha no van las pestañas de arriba.
   [v2026.10.28-4] app-modo.css
   2026-10-28 (4) | SEGUIMIENTO EN EL CELULAR (Alberto: «las vistas se ven mal, acomoda para que se puedan usar»): la ficha con un
     solo scroll (.seg-body ya no scrollea aparte), el «‹» dentro de la cabecera, las pestañas de arriba (Línea de tiempo,
     Evolución, Derivaciones, Historial) en una tira que se desliza, y las ventanas (agendar la próxima sesión…) casi a
     pantalla completa con el riel de pasos deslizable.
   [v2026.10.28-2] app-modo.css
   2026-10-28 (2) | Sin .hva-wrap (la capa de la secretaria tapaba el botón «Más») y la hoja «Cambiar de empresa» encima de la
     barra de los módulos.
   [v2026.10.28-1] app-modo.css
   2026-10-28 | ARCHIVO NUEVO. HEAVENSY EN EL CELULAR: el modo app (app-modo.js [v2026.10.28-1]). Todo va bajo html.hvy-app:
     fuera del modo app no cambia nada. Sin la barra de arriba ni el menú lateral del sitio, sin la secretaria; la barra
     de los módulos abajo; el panel ocupa el alto que queda. Lo de cada módulo, más abajo, por body[data-app-modulo].
*/
html.hvy-app { --app-tab-alto: 58px; --app-abajo: env(safe-area-inset-bottom); --app-arriba: env(safe-area-inset-top); }

/* ── Lo del sitio que no va en la app ── */
html.hvy-app #navbar,
html.hvy-app #sidebar,
html.hvy-app #sidebarOverlay,
html.hvy-app .hva-bubble,
html.hvy-app .hva-wrap,
html.hvy-app .hva-panel { display: none !important; }

/* ── El panel: todo el alto menos la barra de abajo ── */
html.hvy-app body > .flex.overflow-hidden { height: calc(100dvh - var(--app-tab-alto) - var(--app-abajo)) !important; padding-top: var(--app-arriba); }
html.hvy-app #app { height: 100% !important; padding: 0 !important; }

/* ── La barra de abajo ── */
.app-tabbar { display: none; }
html.hvy-app .app-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #fff;
  border-top: 1px solid #ece9f6; padding: 4px 2px var(--app-abajo); height: calc(var(--app-tab-alto) + var(--app-abajo));
  box-shadow: 0 -4px 16px rgba(30, 42, 94, .06); font-family: 'DM Sans', sans-serif; }
.app-tabbar button { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; color: #9BA3C0; font-size: 10.5px; font-weight: 600; cursor: pointer; padding: 0; min-width: 0; }
.app-tabbar button i { font-size: 19px; }
.app-tabbar button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-tabbar button.on { color: #7c3aed; }
.app-tabbar button.on i { transform: translateY(-1px); }
.app-tab-n { display: none; position: absolute; top: 2px; left: calc(50% + 6px); background: #ef4444; color: #fff; border-radius: 9px;
  font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; min-width: 17px; line-height: 14px; }

/* ── «Más» (usa la hoja de app-instalar.css) ── */
.app-mas { padding-top: 10px; }
.app-mas-quien { padding: 6px 4px 12px; border-bottom: 1px solid #f1f0f5; margin-bottom: 4px; }
.app-mas-quien b { display: block; font-size: 16px; } .app-mas-quien small { color: #6b7194; font-size: 13px; }
.app-mas > button { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: none; padding: 14px 4px; font: 500 15px 'DM Sans', sans-serif;
  color: #2f3142; border-bottom: 1px solid #f4f3f8; cursor: pointer; text-align: left; }
.app-mas > button > i:first-child { width: 22px; color: #7c3aed; font-size: 17px; text-align: center; }
.app-mas > button span { flex: 1; } .app-mas > button > i:last-child { color: #c3c8da; font-size: 13px; }
.app-mas > button.app-mas-salir { color: #dc2626; border-bottom: 0; } .app-mas > button.app-mas-salir i { color: #dc2626; }

/* ── El demo (demo.heavensy.cl): su barra tapaba la de escribir; en la app no va (se sale por «Más») ── */
html.hvy-app .hvdemo-barra, html.hvy-app .hvdemo-mini { display: none !important; }

/* ══ CONVERSACIONES: una pantalla a la vez ══
   Sin chat abierto: la lista a todo el ancho. Con chat (la lista lleva .panel-hidden, lo pone el sitio al abrir uno):
   el chat a todo el ancho, con la barra de escribir real. La flecha de la cabecera (#btnToggleLeft) vuelve a la lista.
   La ficha del cliente (#contactPanel) se abre encima, a pantalla completa. */
html.hvy-app body[data-app-modulo="conversaciones"] #convLeftPanel:not(.panel-hidden) { width: 100% !important; max-width: none !important; flex: 1 1 auto; border-right: 0; }
html.hvy-app body[data-app-modulo="conversaciones"] #convLeftPanel:not(.panel-hidden) ~ #convCenterPanel,
html.hvy-app body[data-app-modulo="conversaciones"] #convLeftPanel:not(.panel-hidden) ~ #contactPanel { display: none !important; }
html.hvy-app body[data-app-modulo="conversaciones"] #convCenterPanel { width: 100%; min-width: 0; }
html.hvy-app body[data-app-modulo="conversaciones"] #contactPanel:not(.hidden):not(.panel-hidden) {
  position: absolute; inset: 0; width: 100% !important; max-width: none; z-index: 60; border: 0; background: #f6f5fb; }
html.hvy-app body[data-app-modulo="conversaciones"] #btnToggleLeft { font-size: 22px !important; padding: 4px 10px 4px 2px !important; color: #7c3aed !important; }
html.hvy-app body[data-app-modulo="conversaciones"] #btnToggleLeft i::before { content: "\f053"; }   /* siempre «‹»: vuelve a la lista */
html.hvy-app body[data-app-modulo="conversaciones"] #chatHeader { height: auto; min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
/* El sitio le pone -8px de margen a #convWrapper para comerse el px-2 de #app; en la app #app va sin relleno y ese margen
   corría la lista 8px fuera de la pantalla (se cortaba el borde derecho de las tarjetas). */
html.hvy-app #convWrapper { margin: 0 !important; width: 100% !important; }
/* El buscador, siempre a la vista bajo el título (app-modo.js lo saca de los filtros) */
#app-conv-buscar { padding: 2px 6px 6px; }
#app-conv-buscar input { font-size: 16px !important; }   /* 16px: el iPhone no agranda la pantalla al tocarlo */
/* Los mensajes, más anchos (como WhatsApp): sin las caritas a los lados, hasta 85% del ancho y la hora abajo a la
   derecha del texto, en vez de comerse una columna al lado */
html.hvy-app body[data-app-modulo="conversaciones"] #chatMessages > .space-y-4 { padding: 12px 10px !important; }
html.hvy-app body[data-app-modulo="conversaciones"] #chatMessages .w-8.h-8.rounded-full { display: none !important; }
html.hvy-app body[data-app-modulo="conversaciones"] #chatMessages .rounded-3xl.max-w-md { max-width: 85%; }
html.hvy-app body[data-app-modulo="conversaciones"] #chatMessages .rounded-3xl.max-w-md > .flex.justify-between { flex-wrap: wrap; row-gap: 0; column-gap: 8px; }
html.hvy-app body[data-app-modulo="conversaciones"] #chatMessages .rounded-3xl.max-w-md > .flex.justify-between > .flex-1 { flex: 1 1 auto; }
html.hvy-app body[data-app-modulo="conversaciones"] #chatMessages .rounded-3xl.max-w-md > .flex.justify-between > span { margin-left: auto; align-self: flex-end; }
/* Dentro de un chat no va la barra de los módulos (más espacio, como WhatsApp): «‹» o atrás vuelven a la lista. */
html.hvy-app body.app-en-chat .app-tabbar { display: none; }
html.hvy-app body.app-en-chat > .flex.overflow-hidden { height: calc(100dvh - var(--app-abajo)) !important; }

/* ══ SEGUIMIENTO: la lista a pantalla completa; con un cliente elegido (body.app-seg-ficha), su ficha ══ */
html.hvy-app body[data-app-modulo="seguimiento"] .seg-left-panel { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important;
  width: 100% !important; max-width: none !important; box-shadow: none !important; z-index: auto; }
html.hvy-app body[data-app-modulo="seguimiento"]:not(.app-seg-ficha) .seg-main-area { display: none !important; }
html.hvy-app body[data-app-modulo="seguimiento"].app-seg-ficha .seg-left-panel { display: none !important; }
html.hvy-app body[data-app-modulo="seguimiento"] #seg-btn-expand-left,
html.hvy-app body[data-app-modulo="seguimiento"] #seg-btn-collapse-left { display: none !important; }
.app-volver { display: none; }
html.hvy-app body[data-app-modulo="seguimiento"].app-seg-ficha .app-volver { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: -8px; flex-shrink: 0; border: 0; border-radius: 50%; background: none; color: #7c3aed; font-size: 20px; cursor: pointer; }
html.hvy-app body[data-app-modulo="seguimiento"].app-seg-ficha .app-volver:active { background: #f3edff; }

/* La ficha: UN solo scroll (el de .seg-scroll-area; el cuerpo de las notas ya no scrollea aparte) */
html.hvy-app body[data-app-modulo="seguimiento"] .seg-body { overflow: visible !important; height: auto !important; max-height: none !important; flex: none !important; }
html.hvy-app body[data-app-modulo="seguimiento"] .seg-hero { padding: 0 12px; gap: 8px; }
html.hvy-app body[data-app-modulo="seguimiento"] .seg-hero-col-left { min-width: 0; flex: 1; }
/* Las pestañas de arriba (Línea de tiempo, Evolución, Derivaciones, Historial): una tira que se desliza de lado */
html.hvy-app body[data-app-modulo="seguimiento"] .seg-arch-bar { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; padding: 6px 8px 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.hvy-app body[data-app-modulo="seguimiento"] .seg-arch-bar::-webkit-scrollbar { display: none; }
html.hvy-app body[data-app-modulo="seguimiento"] .seg-arch-tab { flex: 0 0 auto; padding: 7px 12px 8px; }
html.hvy-app body[data-app-modulo="seguimiento"] .seg-arch-tab .seg-ayuda-mini { display: none; }
html.hvy-app body[data-app-modulo="seguimiento"] .seg-arch-tab-title { font-size: 11px; }
html.hvy-app body[data-app-modulo="seguimiento"] #seg-arch-collapse-btn { flex-shrink: 0; position: sticky; right: 0; background: #f3f4f6; padding: 0 6px; }

/* La hoja «Cambiar de empresa» del sitio (sidebar.css), encima de la barra de los módulos */
html.hvy-app .empresa-hoja-bg { z-index: 2147483000; }
html.hvy-app .empresa-hoja { padding-bottom: calc(14px + var(--app-abajo)); }
.app-mas-quien small i { color: #9BA3C0; margin-right: 3px; }
.app-mas-sep { height: 8px; border-bottom: 1px solid #f1f0f5; margin-bottom: 4px; }
.app-mas { max-height: 85dvh; overflow-y: auto; }

/* Las ventanas de Seguimiento (agendar la próxima sesión, plantillas…): casi a pantalla completa, y el riel de pasos
   del agendamiento se desliza de lado en vez de cortar los nombres */
html.hvy-app .seg-modal-overlay { padding: 8px; align-items: center; }
html.hvy-app .seg-modal { max-width: none; width: 100%; padding: 16px 14px 14px; max-height: calc(100dvh - 16px); overflow-y: auto; }
html.hvy-app .seg-agenda-modal-box { width: 100%; max-height: calc(100dvh - 16px); }
html.hvy-app .seg-agenda-riel { overflow-x: auto; scrollbar-width: none; }
html.hvy-app .seg-agenda-riel::-webkit-scrollbar { display: none; }
html.hvy-app .seg-agenda-paso-r { flex: 0 0 auto; min-width: 74px; }

/* ══ EMPRESAS (companies): todo lo que se salía del ancho, acomodado al celular ══
   Las pestañas (las de arriba, las vistas Atención/Consumo/… y los pasos de las fichas) son tiras que se deslizan con el
   dedo, como las de Seguimiento; las tablas se leen como tarjetas (app-modo.js les pone a las celdas el nombre de su
   columna, data-label); los números de arriba, en una fila que también se desliza. */
html.hvy-app body[data-app-modulo="companies"] { --app-cp-borde: #ece9f6; }
/* Tiras deslizables (sin barra de scroll a la vista) */
html.hvy-app body[data-app-modulo="companies"] :is(.cp-main-tabs, .cp-vistas, .wizard-steps, .u-wizard-steps, #st-plans-bar, .u-stats) {
  overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.hvy-app body[data-app-modulo="companies"] :is(.cp-main-tabs, .cp-vistas, .wizard-steps, .u-wizard-steps, #st-plans-bar, .u-stats)::-webkit-scrollbar { display: none; }
html.hvy-app body[data-app-modulo="companies"] .cp-main-tabs { padding: 0 6px; flex-shrink: 0; }
html.hvy-app body[data-app-modulo="companies"] .cp-main-tab { flex: 0 0 auto; padding: 12px 12px 11px; font-size: 13px; }
/* Dentro de una ficha (editar empresa o usuario) las pestañas de arriba no van: «‹ Volver» sale de la ficha */
html.hvy-app body[data-app-modulo="companies"] #companiesRoot:has(#view-wizard.active, #u-view-wizard.active) .cp-main-tabs { display: none; }

/* La cabecera: título en una línea y el botón «+» compacto */
html.hvy-app body[data-app-modulo="companies"] :is(.list-content, .u-list-content) { padding: 14px 12px 20px; }
html.hvy-app body[data-app-modulo="companies"] :is(.companies-header, .u-list-header) { gap: 10px; align-items: flex-start; margin-bottom: 12px; }
html.hvy-app body[data-app-modulo="companies"] :is(.companies-header, .u-list-header) > div:first-child { min-width: 0; flex: 1; }
html.hvy-app body[data-app-modulo="companies"] :is(.companies-title, .u-list-title) { font-size: 16px; line-height: 1.25; }
html.hvy-app body[data-app-modulo="companies"] :is(.companies-subtitle, .u-list-subtitle) { font-size: 12px; }
html.hvy-app body[data-app-modulo="companies"] :is(#btn-nueva-empresa, #u-btn-nuevo) { flex-shrink: 0; white-space: nowrap; padding: 8px 12px; font-size: 13px; }

/* Los números de arriba: chicos y en fila */
html.hvy-app body[data-app-modulo="companies"] #st-plans-bar { display: flex !important; gap: 8px; margin: 0 -12px 12px; padding: 0 12px; }
html.hvy-app body[data-app-modulo="companies"] #st-plans-bar .stat,
html.hvy-app body[data-app-modulo="companies"] .u-stats .u-stat { flex: 0 0 auto; min-width: 96px; padding: 7px 12px !important; border-radius: 12px; }
html.hvy-app body[data-app-modulo="companies"] #st-plans-bar .stat-val { font-size: 18px; margin-top: 0; }
html.hvy-app body[data-app-modulo="companies"] .u-stats { gap: 8px; margin: 0 -12px 12px; padding: 0 12px; }
html.hvy-app body[data-app-modulo="companies"] .u-stat-label { font-size: 10px; white-space: nowrap; }
html.hvy-app body[data-app-modulo="companies"] .u-stat-val { font-size: 20px; }

/* Las vistas (Atención, Consumo, Canales, Pagos…): la tira; el orden, debajo */
html.hvy-app body[data-app-modulo="companies"] .cp-vistas-bar { flex-wrap: wrap; margin-top: 8px; }
html.hvy-app body[data-app-modulo="companies"] .cp-vistas { flex: 1 1 100%; min-width: 0; }
html.hvy-app body[data-app-modulo="companies"] .cp-vistas button { flex: 0 0 auto; padding: 9px 13px; }
html.hvy-app body[data-app-modulo="companies"] .cp-vistas button.on { padding-bottom: 11px; }
html.hvy-app body[data-app-modulo="companies"] .cp-vistas-bar .cp-sp { display: none; }
/* El período: «‹ octubre de 2026 ›» en una línea y los meses debajo */
html.hvy-app body[data-app-modulo="companies"] .cp-periodo { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
html.hvy-app body[data-app-modulo="companies"] .cp-periodo .cp-per-sp { flex-basis: 100%; height: 0; }

/* Los filtros de Usuarios: el buscador a todo el ancho, los selectores de a dos */
html.hvy-app body[data-app-modulo="companies"] .u-filters-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.hvy-app body[data-app-modulo="companies"] .u-filters-bar > * { width: 100% !important; min-width: 0; margin: 0; }
html.hvy-app body[data-app-modulo="companies"] .u-filters-bar .u-filter-input { grid-column: 1 / -1; }

/* La búsqueda de empresas (equipo Heavensy): igual, el buscador arriba y lo demás de a dos */
html.hvy-app body[data-app-modulo="companies"] .filters-bar { flex-direction: row !important; flex-wrap: wrap; align-items: stretch; gap: 8px; }
html.hvy-app body[data-app-modulo="companies"] .filters-bar::before { flex: 1 1 100%; margin-bottom: 0; }
html.hvy-app body[data-app-modulo="companies"] .filters-bar > * { flex: 1 1 calc(50% - 4px); width: auto !important; min-width: 0 !important; margin: 0 !important; }
html.hvy-app body[data-app-modulo="companies"] .filters-bar > .filter-input { flex-basis: 100%; }
html.hvy-app body[data-app-modulo="companies"] .filters-bar .hvy-select-wrap > * { width: 100%; }
html.hvy-app body[data-app-modulo="companies"] .filters-bar .btn-secondary { justify-content: center; }
html.hvy-app body[data-app-modulo="companies"] .cp-mas.ver { flex-direction: column; align-items: stretch; }
/* Las tarjetas de Sectores y Prompts, de a dos */
html.hvy-app body[data-app-modulo="companies"] .prompts-grid { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; }
html.hvy-app body[data-app-modulo="companies"] .prompts-head { padding: 14px 12px 0; }

/* Las tablas como tarjetas: la primera celda es el título; las demás, «columna: valor»; los botones, al pie */
html.hvy-app body[data-app-modulo="companies"] :is(.table-wrap, .u-table-wrap) { background: none; border: 0; overflow: visible; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) { display: block; width: 100%; min-width: 0 !important; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) thead { display: none; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) :is(tbody, tfoot) { display: flex; flex-direction: column; gap: 10px; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) tfoot { margin-top: 10px; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) tr { display: block; background: #fff; border: 1px solid var(--app-cp-borde);
  border-radius: 14px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(30, 42, 94, .04); }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) td { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0 !important; border: 0 !important; text-align: right; min-height: 0; width: auto !important; max-width: none !important; position: static !important; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) td[data-label]::before { content: attr(data-label); flex-shrink: 0; text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9BA3C0; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) td:first-child { justify-content: flex-start; text-align: left; font-size: 14px;
  padding-bottom: 8px !important; border-bottom: 1px solid #f3f1f9 !important; margin-bottom: 2px; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) td:first-child::before { display: none; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) td:empty { display: none; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) td.app-td-acc { justify-content: flex-end; border-top: 1px solid #f3f1f9 !important;
  margin-top: 4px; padding-top: 10px !important; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) td.app-td-acc::before { display: none; }
html.hvy-app body[data-app-modulo="companies"] :is(table.cp-tabla, table.u-table) tr:has(td[colspan]) td { justify-content: center; text-align: center; }

/* Las fichas (editar empresa / usuario): «‹ Volver» compacto y los pasos como una tira de pastillas */
html.hvy-app body[data-app-modulo="companies"] :is(.wizard-topbar, .u-wizard-topbar) { padding: 10px 12px; gap: 10px; }
html.hvy-app body[data-app-modulo="companies"] :is(.wizard-steps, .u-wizard-steps) { padding: 8px 10px; gap: 6px; flex-shrink: 0; }
html.hvy-app body[data-app-modulo="companies"] :is(.wizard-steps .step, .u-wizard-steps .u-step) { flex: 0 0 auto; flex-direction: row !important; gap: 6px;
  padding: 5px 11px 5px 5px; border-radius: 999px; background: #f4f3f9; }
html.hvy-app body[data-app-modulo="companies"] :is(.wizard-steps .step.active, .u-wizard-steps .u-step.active) { background: #efe6ff; }
html.hvy-app body[data-app-modulo="companies"] :is(.step-label, .u-step-label) { display: block !important; position: static !important; font-size: 12px; margin: 0 !important;
  transform: none !important; white-space: nowrap; overflow: visible; }
html.hvy-app body[data-app-modulo="companies"] :is(.step-line, .u-step-line) { display: none; }

/* La tarjeta del usuario, compacta (Alberto, 28-10: «lo único que no me gusta es la ficha del usuario»): en vez de una fila por
   dato, arriba el nombre con el interruptor de activo; debajo el email; y en una línea el cargo, si es recurso, la empresa
   y los botones. Las celdas son las de users.js: usuario, email, rol, recurso, empresa, activo, acciones. */
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 6px; row-gap: 6px; padding: 12px 10px 10px 14px; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr > td:nth-child(n) { padding: 0 !important; margin: 0 !important; border: 0 !important; justify-content: flex-start; text-align: left; min-width: 0; font-size: 13px; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr > td:nth-child(n)::before { display: none; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr > td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr > td:nth-child(6) { grid-column: 3 / 5; grid-row: 1; justify-content: flex-end; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: #6b7194;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; padding-left: 38px !important; margin-top: -4px !important; font-size: 12.5px; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody td:nth-child(3) { grid-column: 1; grid-row: 3; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody td:nth-child(4) { grid-column: 2; grid-row: 3; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr > td:nth-child(5) { grid-column: 3; grid-row: 3; font-size: 12px; color: #6b7194; white-space: nowrap; overflow: hidden; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr > td:nth-child(7) { grid-column: 4; grid-row: 3; justify-content: flex-end; gap: 0; }
/* La línea de abajo, con aire; el email alineado con el nombre (no bajo el avatar) */
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr > td:nth-child(n+3):not(:nth-child(6)) { margin-top: 4px !important; display: flex; align-items: center; }
/* «Recurso» dicho con palabras (solo «Sí» no se entendía) y la empresa con su edificio */
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody td:nth-child(4) .u-badge::before { content: "Recurso: "; font-weight: 500; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody tr > td:nth-child(5)::before { display: inline-block; flex-shrink: 0; content: "\f1ad"; font: 900 11px "Font Awesome 6 Free";
  color: #b4b9d0; margin: 0 4px 0 2px; }
html.hvy-app body[data-app-modulo="companies"] table.u-table tbody td:nth-child(7) .u-btn-icon { width: 32px; height: 32px; padding: 0; }
/* Los selectores de los filtros, del ancho de su columna */
html.hvy-app body[data-app-modulo="companies"] .u-filters-bar .hvy-select-wrap > * { width: 100%; }

/* ══ CONFIGURACIÓN: los cinco pasos en el celular ══
   Los pasos de arriba como tira de pastillas que se desliza (como las fichas de Empresas; el paso elegido se centra, lo
   hace app-modo.js); sin la vista previa lateral (no cabe junto al formulario: la página pública se ve en su enlace); sin
   la fila «Volver › …» (los pasos de arriba ya llevan a cualquier paso); los números del paso 1 en fila deslizable; «Mi
   equipo» en tarjetas; y las pestañas del paso 4 (Servicios, Prestaciones, Programas) en tira. */
html.hvy-app body[data-app-modulo="configuracion"] :is(#preview-toggle-btn, #preview-panel) { display: none !important; }
html.hvy-app body[data-app-modulo="configuracion"] #left-pane { width: 100% !important; max-width: none !important; }
html.hvy-app body[data-app-modulo="configuracion"] .steps-bar { padding: 8px 0; }
html.hvy-app body[data-app-modulo="configuracion"] .steps { max-width: none; gap: 6px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.hvy-app body[data-app-modulo="configuracion"] .steps::-webkit-scrollbar { display: none; }
html.hvy-app body[data-app-modulo="configuracion"] .steps .step { flex: 0 0 auto; flex-direction: row !important; padding: 4px 12px 4px 4px; border-radius: 999px; background: #f4f3f9; }
html.hvy-app body[data-app-modulo="configuracion"] .steps .step.active { background: #efe6ff; }
html.hvy-app body[data-app-modulo="configuracion"] .steps .step-circle { width: 26px; height: 26px; font-size: 12px; box-shadow: none !important; }
html.hvy-app body[data-app-modulo="configuracion"] .steps .step-label { display: inline !important; font-size: 12.5px; margin: 0 0 0 7px !important; position: static !important; }
html.hvy-app body[data-app-modulo="configuracion"] .steps .step-line { display: none; }
html.hvy-app body[data-app-modulo="configuracion"] .step-panel { padding: 0; }
html.hvy-app body[data-app-modulo="configuracion"] .step-panel > .content { margin: 8px 8px 14px; padding: 14px 12px; }
html.hvy-app body[data-app-modulo="configuracion"] .step-panel .breadcrumb { display: none; }
html.hvy-app body[data-app-modulo="configuracion"] .cfg-p4-tabs { scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
html.hvy-app body[data-app-modulo="configuracion"] .cfg-p4-tabs::-webkit-scrollbar { display: none; }
/* Los números del paso 1 */
html.hvy-app body[data-app-modulo="configuracion"] .cr-stats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 22px; padding: 0 12px; }
html.hvy-app body[data-app-modulo="configuracion"] .cr-stats::-webkit-scrollbar { display: none; }
html.hvy-app body[data-app-modulo="configuracion"] .cr-stats > * { flex: 0 0 auto; min-width: 130px; padding: 10px 12px; }
/* «Mi equipo»: cada especialista en una tarjeta. Celdas (config-rubro.js): especialista, categoría, email, usuario, activo,
   acciones. Arriba el nombre con el interruptor; debajo el email y el usuario; abajo la categoría y los botones. */
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table { display: block; width: 100%; min-width: 0 !important; border: 0; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table thead { display: none; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody { display: flex; flex-direction: column; gap: 10px; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 4px;
  background: #fff; border: 1px solid #ece9f6; border-radius: 14px; padding: 12px 10px 10px 14px; box-shadow: 0 1px 3px rgba(30, 42, 94, .04); }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td:nth-child(n) { display: flex; align-items: center; padding: 0 !important; border: 0 !important;
  min-width: 0; font-size: 12.5px; color: #6b7194; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 14px; color: #1e2a5e; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td:nth-child(5) { grid-column: 2; grid-row: 1; justify-content: flex-end; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; display: block; padding-left: 34px !important; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; display: block; padding-left: 34px !important; font-size: 12px; color: #9BA3C0; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td:nth-child(4)::before { content: "Usuario: "; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td:nth-child(2) { grid-column: 1; grid-row: 4; margin-top: 6px; white-space: normal; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td:nth-child(6) { grid-column: 2; grid-row: 4; margin-top: 6px; justify-content: flex-end; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td:nth-child(6) .btn-icon { width: 32px; height: 32px; }
html.hvy-app body[data-app-modulo="configuracion"] table.cr-table tbody tr > td[colspan] { grid-column: 1 / -1; justify-content: center; white-space: normal; }
/* Las listas del paso 4 (servicios, prestaciones): menos marco y el asa de arrastrar angosta, para que el nombre respire */
html.hvy-app body[data-app-modulo="configuracion"] .svc-list-section { padding: 8px 6px; margin-left: -4px; margin-right: -4px; }
html.hvy-app body[data-app-modulo="configuracion"] .svc-row { padding: 10px 8px 10px 4px; gap: 6px; }
html.hvy-app body[data-app-modulo="configuracion"] .svc-foto.svc-foto-grip { flex: 0 0 16px !important; width: 16px !important; height: auto; }

/* ══ PAGOS en el celular ══
   Con aire a los lados (el panel no lo trae en la app); el estado del cobro bajo el título; las tres vistas en tira
   que se desliza; los números de a dos (el plan, a lo ancho); el botón de cada bloque bajo su texto; y las tablas
   (historial, boletas, comisiones) como tarjetas con el nombre de cada columna (data-label, de app-modo.js). */
html.hvy-app body[data-app-modulo="pagos"] #view-pagos { padding: 12px 12px 20px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-cab { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-vistas-bar { margin: 4px -12px 14px; padding: 0 12px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-vistas { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
html.hvy-app body[data-app-modulo="pagos"] .mp-vistas::-webkit-scrollbar { display: none; }
html.hvy-app body[data-app-modulo="pagos"] .mp-vistas button { flex: 0 0 auto; white-space: nowrap; padding: 9px 13px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-kpis,
html.hvy-app body[data-app-modulo="pagos"] .mp-kpis.mp-kpis-2,
html.hvy-app body[data-app-modulo="pagos"] .mp-kpis.mp-kpis-3 { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-kpi { padding: 10px 12px; min-width: 0; }
html.hvy-app body[data-app-modulo="pagos"] .mp-kpi.plan { grid-column: 1 / -1; }
html.hvy-app body[data-app-modulo="pagos"] .mp-kpi b { font-size: 18px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-kpi small { font-size: 11px; margin-bottom: 3px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-kpi span { font-size: 11.5px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-dos { gap: 0; }
html.hvy-app body[data-app-modulo="pagos"] .mp-bloque { padding: 14px; margin-bottom: 10px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-fila { flex-direction: column; align-items: stretch; gap: 10px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-fila > :is(button, .mp-acc, .mp-lock, a) { align-self: flex-start; }
/* Las tablas como tarjetas */
html.hvy-app body[data-app-modulo="pagos"] :is(.dte-tabla-wrap) { overflow: visible; border: 0; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla { display: block; width: 100%; min-width: 0 !important; border: 0; overflow: visible; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla thead { display: none; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla :is(tbody, tfoot) { display: flex; flex-direction: column; gap: 8px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla tr { display: block; background: #fff; border: 1px solid #ece9f6; border-radius: 12px; padding: 8px 12px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla tr > td:nth-child(n) { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 0 !important; border: 0 !important; text-align: right; background: none; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla td[data-label]::before { content: attr(data-label); flex-shrink: 0; text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9BA3C0; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla td:empty { display: none !important; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla td.app-td-acc { justify-content: flex-end; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla td[colspan] { justify-content: center; text-align: center; }
html.hvy-app body[data-app-modulo="pagos"] .mp-kpi.plan ~ .mp-kpi:last-child:nth-child(even) { grid-column: 1 / -1; }
/* Las tarjetas, compactas (Alberto, 28-10: «ocupan mucho espacio»): en vez de una fila por dato, dos líneas.
   Sin dato («—», .app-td-vacio) la celda no ocupa lugar. */
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla tr > td.app-td-vacio { display: none !important; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla tr { padding: 10px 12px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla tr > td:nth-child(n) { padding: 2px 0 !important; font-size: 12.5px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|concepto"] tbody tr,
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|documento"] tbody tr:not(:has(td[colspan])) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 2px; align-items: center; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla:is([data-app-cols^="fecha|concepto"], [data-app-cols^="fecha|documento"]) tbody td::before { display: none !important; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla:is([data-app-cols^="fecha|concepto"], [data-app-cols^="fecha|documento"]) tbody tr > td:nth-child(n) {
  justify-content: flex-start; text-align: left; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Historial: «Mensualidad octubre ……… $39.990» / «2026-10-03 · Transferencia ……… Pagado» / el documento, si hay */
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|concepto"] tbody tr > td:nth-child(2) { grid-area: 1 / 1 / 2 / 4; font-weight: 700; font-size: 13.5px; color: #1f2433; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|concepto"] tbody tr > td:nth-child(3) { grid-area: 1 / 4; justify-content: flex-end; font-weight: 700; font-size: 13.5px; color: #1f2433; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|concepto"] tbody tr > td:nth-child(1) { grid-area: 2 / 1; color: #8b90a8; font-size: 12px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|concepto"] tbody tr > td:nth-child(4) { grid-area: 2 / 2 / 3 / 4; color: #8b90a8; font-size: 12px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|concepto"] tbody tr > td:nth-child(4)::before { display: inline !important; content: "· "; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; margin-right: 3px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|concepto"] tbody tr > td:nth-child(5) { grid-area: 2 / 4; justify-content: flex-end; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|concepto"] tbody tr > td:nth-child(6) { grid-area: 3 / 1 / 4 / 5; justify-content: flex-end; }
/* Boletas: «N° 1023  María Lagos ……… $32.000» / «5 oct · Sesión de terapia ……… aceptado  Ver» */
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|documento"] tbody tr > td:nth-child(2) { grid-area: 1 / 1; font-weight: 700; font-size: 13.5px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|documento"] tbody tr > td:nth-child(3) { grid-area: 1 / 2 / 2 / 4; font-size: 13px; color: #1f2433; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|documento"] tbody tr > td:nth-child(3) * { display: inline; white-space: nowrap; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|documento"] tbody tr > td:nth-child(5) { grid-area: 1 / 4; justify-content: flex-end; font-weight: 700; font-size: 13.5px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|documento"] tbody tr > td:nth-child(1) { grid-area: 2 / 1; color: #8b90a8; font-size: 12px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|documento"] tbody tr > td:nth-child(4) { grid-area: 2 / 2; color: #8b90a8; font-size: 12px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|documento"] tbody tr > td:nth-child(6) { grid-area: 2 / 3; justify-content: flex-end; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|documento"] tbody tr > td:nth-child(7) { grid-area: 2 / 4; justify-content: flex-end; }
/* Los números de arriba, más bajos */
html.hvy-app body[data-app-modulo="pagos"] .mp-kpi { padding: 8px 12px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-kpi b { font-size: 17px; }
html.hvy-app body[data-app-modulo="pagos"] .mp-kpi span { margin-top: 0; }
html.hvy-app body[data-app-modulo="pagos"] .dte-kpis { gap: 8px; }
html.hvy-app body[data-app-modulo="pagos"] .dte-kpi { padding: 8px 12px; }
html.hvy-app body[data-app-modulo="pagos"] .dte-kpi b { font-size: 17px; }
html.hvy-app body[data-app-modulo="pagos"] table.mp-tabla[data-app-cols^="fecha|concepto"] tbody tr > td:nth-child(4)::before { margin-right: 0; }

/* ══ «TUS AVISOS» (app-avisos.js, etapa 3): pantalla completa que entra desde la derecha ══ */
.av-pantalla { position: fixed; inset: 0; z-index: 2147483000; background: #f6f5fb; display: flex; flex-direction: column; font-family: 'DM Sans', sans-serif;
  color: #2f3142; transform: translateX(100%); transition: transform .25s ease-out; padding-top: env(safe-area-inset-top); }
.av-pantalla.abierta { transform: none; }
.av-cab { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #ece9f6; flex-shrink: 0; }
.av-cab b { font-size: 17px; }
.av-volver { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #7c3aed; font-size: 19px; cursor: pointer; }
.av-volver:active { background: #f3edff; }
.av-cuerpo { flex: 1; overflow-y: auto; padding: 14px 14px calc(24px + env(safe-area-inset-bottom)); }
.av-cargando { text-align: center; color: #9BA3C0; padding: 40px 0; }
.av-cuerpo h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9BA3C0; margin: 20px 4px 8px; }
.av-estado { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #ece9f6; }
.av-estado > i { font-size: 22px; flex-shrink: 0; width: 26px; text-align: center; }
.av-estado > div { flex: 1; min-width: 0; }
.av-estado b { display: block; font-size: 15px; }
.av-estado small { display: block; color: #6b7194; font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.av-estado.av-verde { background: #ecfdf3; border-color: #c6f0d6; } .av-estado.av-verde > i { color: #16a34a; }
.av-estado.av-ambar { background: #fff8eb; border-color: #fde7b8; } .av-estado.av-ambar > i { color: #d97706; }
.av-estado.av-rojo  { background: #fef2f2; border-color: #fbd5d5; } .av-estado.av-rojo  > i { color: #dc2626; }
.av-estado.av-gris > i { color: #9BA3C0; }
.av-activar { flex-shrink: 0; border: 0; border-radius: 10px; background: #7c3aed; color: #fff; font: 700 14px 'DM Sans', sans-serif; padding: 9px 14px; cursor: pointer; }
.av-grupo { background: #fff; border: 1px solid #ece9f6; border-radius: 14px; overflow: hidden; }
.av-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.av-fila + .av-fila { border-top: 1px solid #f3f1f9; }
.av-fila > div { flex: 1; min-width: 0; }
.av-fila b { display: block; font-size: 14.5px; font-weight: 600; }
.av-fila small { display: block; color: #8b90a8; font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
/* El interruptor */
.av-sw { position: relative; flex-shrink: 0; width: 46px; height: 28px; }
.av-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.av-sw span { position: absolute; inset: 0; border-radius: 999px; background: #d9dbe7; transition: background .15s; }
.av-sw span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.av-sw input:checked + span { background: #7c3aed; }
.av-sw input:checked + span::after { transform: translateX(18px); }
.av-sw input:disabled + span { opacity: .45; }
.av-horas { display: flex; gap: 10px; padding: 0 14px 14px; }
.av-horas label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #8b90a8; }
.av-horas input { border: 1px solid #e3e0f0; border-radius: 10px; padding: 9px 10px; font: 600 16px 'DM Sans', sans-serif; color: #2f3142; background: #fff; }
.av-horas.apagado { opacity: .5; }
.av-probar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 22px; border: 1.5px solid #d9ccff; background: #fff;
  color: #7c3aed; border-radius: 12px; padding: 13px; font: 700 14.5px 'DM Sans', sans-serif; cursor: pointer; }
.av-probar:disabled { opacity: .5; cursor: default; }
.av-nota { text-align: center; color: #9BA3C0; font-size: 12px; margin: 8px 0 0; }