/* ── BITÁCORA ──
   [v2026.09.30-1] configuracion.css
   2026-09-30 | "Diseño de la página", grupo de galería (configuracion.html [v2026.09.30-1]):
     + .dp-m.d (los puntitos del carrusel en la miniatura) y .dp-gal-aviso (el estilo guardado
       que el plan ya no incluye).
   [v2026.09.29-3] configuracion.css
   2026-09-29 (3) | Disponibilidad y Tipos de reserva, cada dato en un solo lugar
     (configuracion.js [v2026.09.29-3]):
     + .ses-jor-horario (y .aviso): el horario del recurso arriba de las jornadas, con el
       botón .ses-jor-ir ("Cambiar en Disponibilidad").
     + .ses-jor-dia.cerr: el día en que el recurso no abre, apagado y sin poder marcarse.
     + .ses-jor-aviso / .ses-jor.fuera: la jornada que no calza en el horario lo dice en su fila.
     + .svc-fuera: "fuera de horario" en la lista de servicios.
     + .disp-modos-ro / .disp-modos-nota: los modos de atención del Paso 2, sin editar.
   [v2026.09.29-2] configuracion.css
   2026-09-29 (2) | LAS JORNADAS COMO EN EL PREVIEW APROBADO (configuracion.js [v2026.09.29-2]):
     cada jornada en una fila de columnas (nombre · desde · a · hasta · precio por vez · precio
     mensual · quitar) y los días debajo; + .ses-jor-cab, los títulos de las columnas una vez
     arriba, con las mismas columnas (--ses-jor-cols). El rótulo chico de cada precio se
     esconde en la fila (lo dice el título). Si el formulario queda angosto (menos de 640 px,
     container query sobre .ses-jornadas), la fila se parte como antes: nombre y
     quitar arriba, horario, los dos precios con su rótulo, y se esconden los títulos.
   [v2026.09.29-1] configuracion.css
   2026-09-29 | Una vez o mensual (configuracion.html y .js [v2026.09.29-1]):
     + .ses-jor-precios / .ses-jor-campo: en cada jornada, "Por vez" y "Mensual (opcional)"
       lado a lado y con su rótulo, debajo del horario (los dos son montos: sin rótulo no se
       sabía cuál era cuál). El mensual con borde punteado lila mientras está vacío.
   [v2026.09.27-1] configuracion.css
   2026-09-27 | Cowork, cierre (preview aprobado por Alberto el 27-09; configuracion.html y .js
     [v2026.09.27-1]):
     + .ses-jor-dias / .ses-jor-dia / .ses-jor-dias-txt: los días de la semana de cada
       jornada, en círculos chicos como los de Disponibilidad, con el resumen al lado.
     + .disp-hd-cab / .disp-hd-sw-wrap: el rótulo "Horario" con el interruptor "Distinto
       según el día"; .disp-hd-fila: una fila por día (nombre, interruptor, inicio y término;
       apagado, "Cerrado").
   [v2026.09.26-1] configuracion.css
   2026-09-26 | + MODALIDAD DE ARRIENDO del servicio (configuracion.html y .js [v2026.09.26-1]):
     .ses-tr-ops / .ses-tr-op (las cuatro tarjetas, la elegida en morado), .ses-jornadas /
     .ses-jor (cada jornada en una fila: nombre, inicio, término, precio y quitar), .ses-jor-add
     y .ses-tr-nota. Mismos colores del preview aprobado; los bordes en tono suave.
   [v2026.09.25-4] configuracion.css
   2026-09-25 (4) | .ep-vista-cargando tapa la vista previa desde debajo de su barra de título
     (configuracion.js le pone `top` con el alto de .preview-topbar), ahora que se cuelga de #preview-panel
     (configuracion.js [v2026.09.25-3]).
   [v2026.09.25-3] configuracion.css
   2026-09-25 (3) | + .ep-vista-cargando: "Cargando plantilla…" con su ruedita, sobre la vista
     previa, mientras se arma la plantilla elegida (configuracion.js [v2026.09.25-2]).
   [v2026.09.25-2] configuracion.css
   2026-09-25 (2) | El ✓ de "Diseño de la página" salía en las CUATRO plantillas, no solo en la
     elegida: la regla de Font Awesome (.fas{display:inline-block}) le ganaba a .dp-ok. Ahora
     el selector es más específico (.dp-pl .dp-ok) y el ✓ queda solo en la elegida.
   [v2026.09.25-1] configuracion.css
   2026-09-25 | + estilos del panel "Diseño de la página" (.dp-*): tarjetas de plantilla con su
     miniatura dibujada, las dos formas de agendar y la nota. El candado de las plantillas
     que el plan no incluye lo pone hvy-permisos (.hvy-bloqueado); aquí solo se atenúa la
     miniatura de esa tarjeta.
   [v2026.09.24-8] configuracion.css
   2026-09-24 (8) | Globos en vez de title= del navegador en el Paso 5:
     + .hvy-globo--arriba: variante del globo claro, ENCIMA del elemento y alineada a su
       derecha (el boton Publicar esta al pie y a la derecha).
     + #preview-toggle-btn:hover .hvy-globo: el boton lateral de la vista previa es
       position:fixed, asi que el globo va DENTRO del boton y se enciende con su hover (un
       .hvy-globo-wrap alrededor le quitaria el fixed).
   [v2026.09.24-7] configuracion.css
   2026-09-24 (7) | Globos de ayuda en la cabecera de WhatsApp:
     + .hvy-globo--abajo-izq: variante del globo claro, debajo y alineada a la IZQUIERDA del
       elemento (las opciones de la cabecera estan pegadas al borde izquierdo; la --abajo,
       alineada a la derecha, se saldria del panel).
     + .cab-ayuda: el titulo con su icono (i) que abre el globo.
     − .cab-link: el enlace "Usar los del perfil" paso a ser un boton (.btn-secondary).
   [v2026.09.24-6] configuracion.css
   2026-09-24 (6) | .cab-col de 340 a 420 px: la vista previa de la cabecera un poco mas grande
     (pedido de Alberto). Sigue con ancho fijo, pegada a la izquierda.
   [v2026.09.24-5] configuracion.css
   2026-09-24 (5) | + .cab-col: el contenido de la cabecera de WhatsApp en una columna de 340 px
     pegada a la izquierda (opciones, colores y vista previa alineados). .cab-vista pasa a
     ocupar el ancho de esa columna en vez de uno propio.
   [v2026.09.24-4] configuracion.css
   2026-09-24 (4) | + .cab-vista: el recuadro de la vista previa de la cabecera, de ancho fijo
     (320 px) y pegado a la izquierda. Ya no crece con el formulario cuando se cierra la
     vista previa del perfil (pedido de Alberto). En pantallas mas angostas se ajusta al
     ancho disponible. .cab-preview llena ese recuadro.
   [v2026.09.24-3] configuracion.css
   2026-09-24 (3) | Paso 5 en PANELES COLAPSABLES (opcion B) en vez de pestañas: .ep-pane.cerrado
     deja ver solo el titulo de la tarjeta, con su flecha (.ep-flecha). Se retiran las
     reglas de la barra de pestañas (.ep-tabs). La vista previa de la cabecera queda con un
     ancho maximo (CAB: se veia demasiado grande a lo ancho del formulario).
   [v2026.09.24-2] configuracion.css
   2026-09-24 (2) | LIMPIEZA: se retiran los estilos de un Paso 5 antiguo que tenia sus
     propias pestañas (fotos, videos, documentos) y cuyo HTML ya no existe: .media-section,
     .portada-badge, .add-thumb, .vid-card, .vid-thumb, .doc-row, .doc-ico, .doc-name y
     .doc-meta. Verificado antes en todo HeavensySite: nadie mas los usa (lo unico que
     aparecio fueron .ci-attach-doc-icon/-name del chat interno, que son otras clases).
     Se quedan .media-tabs/.media-tab (las pestañas nuevas) y los de la galeria
     (.media-grid, .media-thumb, .media-over, .mt-btn, .drop-zone).
   [v2026.09.24-1] configuracion.css
   2026-09-24 | Paso 5 en pestañas y la pestaña "Cabecera WhatsApp" (configuracion.html y
     configuracion.js [v2026.09.24-1]). Las pestañas reusan .media-tabs/.media-tab, que ya
     existian; lo nuevo es el panel (.ep-pane) y los controles de la cabecera (.cab-*).
     Las opciones son botones estilo Heavensy, no desplegables del sistema.
   [v2026.09.03-1] configuracion.css
   2026-09-03 | + .hvy-chip-esp: UN chip de especialidad para todo el panel, con dos
     variantes: .catalogo (morado relleno) y .propia (ámbar suave con borde). Lo usan el
     Resumen y el editor del paso 3 (config-rubro) y "Categorías" del paso 4. Había tres
     definiciones con ámbar parecidos pero distintos (lo vio Alberto) y una de ellas ni
     pintaba el borde. .svc-categoria-chip se retira.
     Va con config-rubro.css [v2026.09.03-6], config-rubro.js [v2026.09.03-6] y
     configuracion.js [v2026.09.03-2].
   [v2026.09.02-9] configuracion.css
   2026-09-02 (9) | + .cfg-rotulo: el rótulo con icono violeta que ya se repetía en
     línea en los pasos 2 y 4 ("Resumen", "¿De qué recurso?") pasa a ser una clase.
     · "Categorías" usa .summary-card, la tarjeta celeste del Resumen; .svc-categorias-h
       se retira (era un título propio que no se parecía a nada del wizard).
     Va con configuracion.html [v2026.09.02-8].
   [v2026.09.02-8] configuracion.css
   2026-09-02 (8) | Sombra suave en las tarjetas del paso 4 (.svc-list-section:
     "Disponibles para agendar" y las tres de programas), la misma que usan las
     tarjetas de resumen del paso 1, ahora que están sueltas en el paso.
   [v2026.09.02-7] configuracion.css
   2026-09-02 (7) | "Disponibles para agendar" fuera de la .card: separación del
     formulario abierto encima, como en programas. Va con configuracion.html [v2026.09.02-7].
   [v2026.09.02-6] configuracion.css
   2026-09-02 (6) | .prog-secciones ya no va dentro de una .card: aire propio y, con el
     formulario abierto encima, separación de él. Va con configuracion.html [v2026.09.02-6].
   [v2026.09.02-5] configuracion.css
   2026-09-02 (5) | PROGRAMAS en tres tarjetas hermanas (.prog-sec): aire entre ellas,
     subtítulo (.prog-sec-s), contador en la cabecera (.prog-sec-n) y texto de vacío
     por sección desde data-vacio. Va con configuracion.html [v2026.09.02-4].
   [v2026.09.02-4] configuracion.css
   2026-09-02 (4) | + .btn-grande: el llamado a la acción de un paso (paso 1 "Agrega
     miembro al equipo", paso 4 "Agregar servicio") va más grande que los .btn-primary
     de los formularios. Antes vivía como .cr-btn-agregar en config-rubro.css y el
     paso 4 necesitaba el mismo tamaño: UN sitio para los dos.
     · .svc-btn-bar: el botón se despega más de "Disponibles para agendar" (24px).
     Va con config-rubro.css [v2026.09.02-2], config-rubro.js [v2026.09.02-3] y
     configuracion.html [v2026.09.02-3].
   [v2026.09.02-3] configuracion.css
   2026-09-02 (3) | PASO 4 SIMPLIFICADO (maqueta de Alberto, preview aprobado).
     − Todo .svc-catalog / .svc-cat-*: el catálogo desplegable se eliminó.
     + .svc-categorias (título, subtítulo, chips morado/ámbar) y .svc-btn-bar (el
       botón sobre la tarjeta de agendables). Los colores de los chips son los mismos
       que tenían .svc-cat-chip.esp.on (catálogo) y .propia (ámbar), para que el
       usuario los reconozca.
     + .ses-catalogo-hint, texto de ayuda bajo el selector del catálogo.
     · .svc-list-section pierde el margin-top (ya no cuelga de un catálogo) y el
       vacío ya no invita a "adoptar del catálogo".
     Va con configuracion.html [v2026.09.02-2].
   [v2026.09.02-2] configuracion.css
   2026-09-02 (2) | + .hvy-globo: globo de ayuda claro (fondo blanco, texto gris,
     borde lila) con titulo en negrita y varias lineas, que se muestra al pasar el
     mouse por el ELEMENTO HERMANO dentro de .hvy-globo-wrap. Es un componente
     distinto del [data-tip] (navy, una linea, pseudo-elemento) por dos razones que
     ese no puede cubrir: un boton deshabilitado no recibe hover —el wrap si— y un
     ::after con attr() no puede llevar negrita. Posiciones: --abajo (alineado a la
     derecha del elemento, la unica en uso) e --izq. Lo usa el boton "Agrega miembro
     al equipo" del paso 1 (config-rubro.js [v2026.09.02-2]).
   [v2026.09.02-1] configuracion.css
   2026-09-02 (1) | − .cfg-form-grid, .cfg-form-roles y .cfg-form-btns: solo las usaba
     el modal "Editar cuenta de acceso", que se eliminó con la pestaña (paso 1
     simplificado). .cfg-form-modal y sus campos se quedan: son la base de cualquier
     modal con formulario. .badge, .avatar, .user-cell y .table-scroll-wrap también
     se quedan aunque el paso 1 ya no los use: este CSS se carga en TODO el panel y
     users.js, roles.js y calendario.js usan esos nombres.
     Va con configuracion.html [v2026.09.02-1].
   [v2026.09.01-5] configuracion.css
   2026-09-01 (5) | + `.form-group input:disabled` fuera del modal. La regla que ya
     existia estaba acotada a .cfg-form-modal, asi que el campo "Nombre de tu empresa"
     —ahora de solo lectura, en el paso 1— se veia igual que uno editable.
     Va con configuracion.html [v2026.09.01-3].
   [v2026.09.01-4] configuracion.css
   2026-09-01 (4) | .svc-recurso-chips pierde su relleno: los chips salieron de dentro
     de la tarjeta "Servicios agendables" —donde el padding compensaba el de la card—
     y ahora viven al mismo nivel que el breadcrumb, como en el paso 2.
     Va con configuracion.html [v2026.09.01-2].
   [v2026.09.01-3] configuracion.css
   2026-09-01 (3) | La sombra va con `>` DIRECTO y no descendiente: en el paso 1,
     config-rubro crea su propio .content (#cr-wrap) dentro del panel, asi que una
     regla descendiente habria pintado DOS tarjetas apiladas.
     + el encabezado del paso vive FUERA del contenedor —encabeza el paso completo, no
     la tarjeta— asi que lleva su propio margen para alinearse con lo de abajo.
   [v2026.09.01-2] configuracion.css
   2026-09-01 (2) | El contenido de cada paso va en una TARJETA con sombra, no suelto
     sobre el fondo: antes flotaba y no se distinguia donde empieza y termina el paso.
     Se aplica a los CINCO por igual —comparten .content— asi que el recorrido completo
     se ve consistente. Decision de Alberto: solo Configuracion; el resto del panel es
     otro tema.
     Por eso la regla va ACOTADA a `.step-panel > .content` y no a `.content` a secas:
     este archivo se carga en TODO el panel desde index.html, y una regla suelta le
     habria puesto sombra a cualquier modulo que use esa clase. .step-panel solo
     existe en los cinco pasos.
     Sombra doble y muy suave (5% y 4,5%): marca el plano sin ensuciar. Un solo blur
     grande se ve pesado sobre fondo claro.
   [v2026.09.01-1] configuracion.css
   2026-09-01 | + .paso-cab: el encabezado de los cinco pasos del wizard ("PASO N DE 5",
     título y una línea de qué se hace ahí). Hasta hoy no había nada y se entraba al
     wizard sin saber dónde se está ni para qué.
     El div nace vacío y lo llena configuracion.js [v2026.09.01-1]; con :empty no deja
     hueco si no se pudo resolver el título.
   ────────────────────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════
   CONFIGURACIÓN — HEAVENSY
   ── BITÁCORA ── (solo cambios recientes; histórico podado)
   [v2026.08.24-1] configuracion.css
   2026-08-24 | + el campo del telefono dentro del toggle-group de "Contacto telefonico":
     es un input en una fila de botones, y sin estilo propio quedaba mas alto y
     desalineado. Toma el mismo borde, radio y tipografia que los .toggle-btn de al lado.
     + .toggle-btn.sin-numero: el boton avisa cuando esta encendido pero el campo quedo
     vacio. El JS ya ponia la clase y nadie la pintaba — una marca invisible es una marca
     que no existe.
   [v2026.08.20-1] 2026-08-20 | LA VISTA PREVIA SE PUEDE PLEGAR EN ESCRITORIO. El
     botón existía y la función también, pero sus estilos vivían DENTRO del
     @media(max-width:768px): en escritorio #preview-toggle-btn era display:none y
     .preview-collapsed{width:0} ni siquiera aplicaba. O sea, el panel se quedaba con
     sus 48vw —casi media pantalla— sin forma de cerrarlo, y ese es justo el ancho que
     le faltaba al formulario. Ahora las dos reglas son base y el @media solo conserva
     lo PROPIO del celular (panel flotante, velo, ancho 85vw). El botón se pega al
     borde del panel y lo posiciona el JS con el ancho real, no con un número fijo.
   [v2026.08.12-1] 2026-08-12 | + .cfg-form-modal y compañía: los modales con
     FORMULARIO ya no reusan tal cual .cfg-confirm-modal, que tiene width:340px
     fijo por estar pensado para avisos de una línea. El de editar cuenta metía
     seis campos en dos columnas dentro de ese ancho y se veía angosto y apretado.
     Ahora 560px, alineado a la izquierda, con aire entre campos, foco visible y
     una sola columna bajo 640px. Los estilos salen del CSS y no de atributos
     style en el HTML.
   [v2026.07.22-1] 2026-07-22 | Variante 'confirm' del modal cfg-confirm:
   .cfg-confirm-icon.cfg-ok y .cfg-confirm-del.cfg-ok (violeta/check) — par de
   cfgConfirm(opts) en configuracion.js [v2026.07.22-1]. Default rojo/basurero intacto.
   [v2026.06.29-1] 2026-06-29 | Stepper: estados .step.available (acento morado, invita a
   click) y .step.disabled (atenuado + cursor not-allowed; tooltip por title nativo).
   [v2026.06.24-1] 2026-06-24 | Control de adopción: campos etiquetados (.svc-cat-field/-flabel/
   -finput/-price-wrap) "Duración"/"Precio". | 06.23-5: color por origen en tarjetas
   (.svc-row-ag.origin-*) y sub-bloque propias ámbar (.svc-cat-*propia). 06.23-4: hvy-tp;
   días/"Todos"; .hvy-form-select. Se mantienen .svc-cat-* y el input time/date Heavensy.
══════════════════════════════════════ */

/* BASE */
.cfg-page *{box-sizing:border-box}

/* TOPBAR (standalone — no aplica en SPA) */
.topbar{background:#EFF6FF;border-bottom:1px solid #C9D9FF;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;height:48px}
.topbar-brand{display:flex;align-items:center;gap:10px}
.topbar-icon{width:32px;height:32px;background:#9961FF;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
.topbar-title{font-size:15px;font-weight:700;color:#3b4a6b}

/* BUTTONS */
.btn-primary{background:#9961FF;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.btn-primary:hover{background:#8450ef}
.btn-secondary{background:#fff;color:#7D84C1;border:1px solid #C9D9FF;border-radius:8px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-secondary:hover{background:#EFF6FF;border-color:#9961FF;color:#9961FF}
.btn-sm{padding:5px 11px;font-size:11px}
.btn-icon{background:none;border:none;cursor:pointer;padding:5px 7px;border-radius:6px;color:#7D84C1;font-size:12px;transition:all .15s}
.btn-icon:hover{background:#EFF6FF;color:#9961FF}

/* STEPS */
.steps-bar{background:#fff;border-bottom:1px solid #C9D9FF;padding:10px 16px;position:sticky;top:0;z-index:99}
.steps{display:flex;align-items:center;max-width:680px;margin:0 auto}
.step{display:flex;align-items:center;flex:1;cursor:pointer;user-select:none}
.step-circle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;transition:all .25s;border:2px solid #C9D9FF;background:#fff;color:#7D84C1}
.step.active .step-circle{background:#9961FF;border-color:#9961FF;color:#fff;box-shadow:0 0 0 4px #9961FF20}
.step.done .step-circle{background:#10b981;border-color:#10b981;color:#fff}
.step-label{font-size:11px;color:#9ca3af;margin-left:8px;white-space:nowrap;font-weight:500}
.step.active .step-label{color:#9961FF;font-weight:700}
.step.done .step-label{color:#10b981;font-weight:600}
.step-line{flex:1;height:2px;background:#e5e7eb;margin:0 8px;min-width:24px;transition:background .3s}
.step-line.done{background:#10b981}
/* ── Estados nuevos del stepper [v2026.06.29-1] ── */
/* Habilitado pero no completado: acento morado que invita a click */
.step.available .step-circle{border-color:#9961FF;color:#9961FF;box-shadow:0 0 0 3px #9961FF18}
.step.available .step-label{color:#9961FF;font-weight:600}
/* Deshabilitado: atenuado (gris) + cursor not-allowed. El tooltip usa el title nativo. */
.step.disabled{cursor:not-allowed;position:relative}
.step.disabled .step-circle{background:#f3f4f6;border-color:#e5e7eb;color:#cbd5e1}
.step.disabled .step-label{color:#cbd5e1}

/* PANELS */
.step-panel{display:none;animation:cfgFadeIn .2s ease}
.step-panel.active{display:block}
@keyframes cfgFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* [01-09-2026] El contenido de cada paso va en una TARJETA con sombra, no suelto
   sobre el fondo. Antes flotaba y no se distinguia donde empieza y termina el paso,
   que es justo lo que confunde a quien configura por primera vez.
   Se aplica a los CINCO pasos por igual —comparten .content— asi que el recorrido
   completo se ve consistente. Fuera de Configuracion no cambia nada: es una clase de
   este modulo. */
.content{padding:12px 16px}

/* ACOTADO A .step-panel: configuracion.css se carga en TODO el panel (index.html),
   asi que una regla suelta sobre .content le habria puesto sombra a cualquier modulo
   que use esa clase. .step-panel solo existe en los cinco pasos de Configuracion.

   [01-09 (3)] Y con `>` directo, no descendiente: en el paso 1, config-rubro crea SU
   PROPIO .content (#cr-wrap) dentro del panel, asi que una regla descendiente pintaria
   DOS tarjetas apiladas. El encabezado del paso vive fuera de las dos, arriba. */
.step-panel > .content{
  padding:20px 22px;
  background:#fff;
  border:.5px solid #e8ecfb;
  border-radius:14px;
  box-shadow:0 1px 3px rgba(30,42,94,.05), 0 6px 20px rgba(30,42,94,.045);
  margin-bottom:14px;
}
@media(max-width:720px){ .step-panel > .content{padding:14px 14px;border-radius:12px} }

/* FILTERS */
.filters-bar{background:#fff;border:0.5px solid #C9D9FF;border-radius:12px;padding:8px 12px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.filter-group{display:flex;flex-direction:column;gap:5px;min-width:130px}
.filter-group.wide{min-width:200px}
.filter-label{font-size:10px;font-weight:700;color:#7D84C1;text-transform:uppercase;letter-spacing:.05em}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.stat{background:#fff;border:0.5px solid #C9D9FF;border-radius:10px;padding:14px 16px}
.stat-label{font-size:11px;color:#7D84C1;margin-bottom:4px;font-weight:500}
.stat-val{font-size:24px;font-weight:700;color:#3b4a6b}
.stat-val.green{color:#10b981}
.stat-val.red{color:#ef4444}

/* TABLE */
.card{background:#fff;border:0.5px solid #C9D9FF;border-radius:12px;overflow:hidden;margin-bottom:10px}
.table-scroll-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.table-scroll-wrap table{display:table;white-space:nowrap;min-width:600px;width:100%}
.card-header{padding:9px 14px;border-bottom:0.5px solid #C9D9FF;display:flex;align-items:center;justify-content:space-between;background:#fafbff}
.card-title{font-size:13px;font-weight:700;color:#3b4a6b}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:10px 14px;font-size:10px;font-weight:700;color:#7D84C1;text-transform:uppercase;letter-spacing:.06em;background:#f9fafb;border-bottom:0.5px solid #C9D9FF}
td{padding:11px 14px;border-bottom:0.5px solid #f3f4f6;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbff}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700}
.b-active{background:#d1fae5;color:#065f46}
.b-inactive{background:#fee2e2;color:#991b1b}
.b-resource{background:#EFF6FF;color:#7D84C1;border:0.5px solid #C9D9FF}
.b-admin{background:#f0fdf4;color:#166534}
.b-sec{background:#fef9c3;color:#854d0e}
.avatar{width:28px;height:28px;border-radius:50%;background:#9961FF14;border:1.5px solid #9961FF4D;color:#9961FF;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.user-cell{display:flex;align-items:center;gap:9px}

/* TOGGLE SWITCH */
.switch{position:relative;display:inline-block;width:36px;height:20px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#d1d5db;border-radius:20px;transition:.2s}
.slider:before{content:"";position:absolute;width:14px;height:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
input:checked+.slider{background:#10b981}
input:checked+.slider:before{transform:translateX(16px)}

/* INLINE EDIT */
.inline-edit-row{display:none !important}

/* MODAL EDICIÓN USUARIO */
.user-edit-overlay{display:none;position:fixed;inset:0;background:rgba(30,25,80,0.45);z-index:500;align-items:center;justify-content:flex-start;padding-left:28px}
.user-edit-overlay.open{display:flex}
.user-edit-modal{background:#fff;width:660px;max-width:calc(100vw - 56px);max-height:88vh;overflow-y:auto;border-radius:18px;box-shadow:0 24px 64px rgba(10,0,60,0.22)}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:10px;font-weight:700;color:#7D84C1;text-transform:uppercase;letter-spacing:.04em}

/* Relojes / fechas estilo Heavensy [16-06] */
input[type="time"],input[type="date"]{
  font-size:13px;padding:7px 10px;border:1px solid #E3E0F0;border-radius:8px;
  color:#1e2a5e;background:#fff;font-family:inherit;transition:border-color .15s,box-shadow .15s;
}
input[type="time"]:hover,input[type="date"]:hover{border-color:#9961FF}
input[type="time"]:focus,input[type="date"]:focus{outline:none;border-color:#9961FF;box-shadow:0 0 0 3px #9961FF20}
input[type="time"]:disabled,input[type="date"]:disabled{background:#f3f4f6;color:#9ca3af;border-color:#e5e7eb}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(38%) sepia(82%) saturate(2619%) hue-rotate(248deg) brightness(101%) contrast(101%);
  cursor:pointer;opacity:.7;transition:opacity .15s;
}
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Bloque almuerzo en línea: toggle + inputs juntos [16-06] */
.alm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;background:#f7f8fc;border-radius:8px;margin-top:4px}
.alm-row .alm-label{font-size:12.5px;color:#7D84C1;font-weight:600}
.alm-row .alm-campos{display:flex;align-items:center;gap:8px}
.alm-row .alm-campos.off{display:none}
.alm-row .alm-campos label{font-size:10px;font-weight:700;color:#7D84C1;text-transform:uppercase}

/* SUMMARY CARD */
.summary-card{background:#EFF6FF;border:0.5px solid #C9D9FF;border-radius:12px;padding:16px 18px;margin-bottom:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:1}
/* [02-09-2026] Rótulo de sección con icono violeta (Resumen, ¿De qué recurso?,
   Categorías). Estaba repetido en línea en cada sitio que lo usaba. */
.cfg-rotulo{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11px;
  font-weight:700;color:#7D84C1;text-transform:uppercase;letter-spacing:.06em}
.cfg-rotulo i{color:#9961FF;font-size:12px}
.summary-section-title{font-size:10px;font-weight:700;color:#7D84C1;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.chip-on{background:#9961FF;color:#fff}
.chip-off{background:#f3f4f6;color:#9ca3af;border:0.5px solid #e5e7eb}

/* EDIT PANEL */
.edit-panel{border:1px solid #C9D9FF;border-radius:10px;overflow:hidden;margin-top:14px;display:none}
.edit-panel.open{display:block}
.edit-header{background:#9961FF;padding:11px 16px;display:flex;align-items:center;justify-content:space-between}
.edit-header-title{color:#fff;font-size:13px;font-weight:600}
.edit-close{color:#fff;cursor:pointer;font-size:12px;opacity:.85;background:none;border:none}
.edit-body{padding:18px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-full{grid-column:1/-1}
.toggle-group{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px}
.dias-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.dias-row > .toggle-group{margin-top:0}
#disp-dias .toggle-btn{width:34px;height:34px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.toggle-todos{border:1px solid #9961FF;color:#9961FF;background:#F5F3FF}
.toggle-todos.on{background:#9961FF;color:#fff;border-color:#9961FF}

/* ── Timepicker Heavensy (hvy-tp): reemplaza input[type=time] nativos ── */
.hvy-tp-field{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:auto;min-width:90px;border:1px solid #C9D9FF;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;color:#9961FF;background:#fff;cursor:pointer;transition:border-color .15s}
.form-group > .hvy-tp-field{width:100%}
.hvy-tp-field:hover{border-color:#9961FF}
.hvy-tp-field .far,.hvy-tp-field .fas{color:#9961FF;font-size:12px}
.hvy-tp-panel{position:absolute;z-index:3000;background:#fff;border:.5px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.12);padding:8px 4px;width:120px}
.hvy-tp-hidden{display:none!important}
.hvy-tp-title{font-size:13px;font-weight:600;color:#374151;text-align:center;margin-bottom:6px}
.hvy-tp-cols{display:flex;align-items:flex-start;gap:4px}
.hvy-tp-col{display:flex;flex-direction:column;gap:2px;max-height:160px;overflow-y:scroll;width:100%;flex:1;scrollbar-width:none;-ms-overflow-style:none}
.hvy-tp-col::-webkit-scrollbar{display:none}
.hvy-tp-item{font-size:11px;text-align:center;padding:5px 0;border-radius:6px;cursor:pointer;color:#374151;transition:all .15s;border:1px solid transparent}
.hvy-tp-item:hover{background:#EFF6FF;color:#9961FF}
.hvy-tp-item.active{background:#f5f3ff;color:#9961FF;border-color:#9961FF;font-weight:700}
.toggle-btn{padding:6px 14px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;border:0.5px solid #C9D9FF;background:#fff;color:#7D84C1;transition:all .15s}
.toggle-btn.on{background:#9961FF;color:#fff;border-color:#9961FF}
.toggle-btn:hover:not(.on){background:#EFF6FF;border-color:#9961FF;color:#9961FF}

/* TESTIMONIOS FORM */
.test-row{background:#f8f9ff;border:0.5px solid #C9D9FF;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.test-row-top{display:flex;align-items:center;gap:10px}
.test-avatar-wrap{position:relative;width:44px;height:44px;flex-shrink:0}
.test-avatar-circle{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#9497F4,#89B9F8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;overflow:hidden;cursor:pointer;border:2px solid #e0e7ff}
.test-avatar-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.test-avatar-edit{position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:#9961FF;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.test-fields{flex:1;display:flex;flex-direction:column;gap:6px}
.test-stars{display:flex;gap:3px}
.test-star{font-size:16px;cursor:pointer;color:#e5e7eb;transition:color .1s}
.test-star.on{color:#f59e0b}
.test-comment{width:100%;border:0.5px solid #C9D9FF;border-radius:7px;padding:7px 10px 20px;font-size:11.5px;color:#374151;font-family:inherit;resize:none;outline:none;min-height:56px}
.test-comment:focus{border-color:#9961FF}
.test-comment-wrap{position:relative}
.test-comment-counter{position:absolute;bottom:5px;right:8px;font-size:10px;color:#9ca3af}

/* GALERÍA */
.galeria-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.galeria-thumb{position:relative;width:80px;height:80px;border-radius:10px;overflow:hidden;flex-shrink:0}
.galeria-thumb img{width:100%;height:100%;object-fit:cover}
.galeria-thumb-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.galeria-add-btn{display:inline-flex;align-items:center;gap:7px;background:#9961FF;border:none;border-radius:10px;padding:9px 16px;cursor:pointer;font-size:12px;font-weight:600;color:#fff!important;transition:all .15s;box-shadow:0 2px 8px rgba(153,97,255,0.3)}.galeria-add-btn *{color:#fff!important}
.galeria-add-btn:hover{background:#7c3aed;box-shadow:0 4px 12px rgba(153,97,255,0.4)}
.galeria-add-btn.hidden{display:none}

/* INCLUYE CHIPS */
.includes-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.tipo-chips{display:flex;flex-wrap:wrap;gap:7px}
.tipo-chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:20px;border:1.5px solid #C9D9FF;background:#fff;color:#7D84C1;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;user-select:none}
.tipo-chip:hover{border-color:#9961FF;color:#9961FF;background:#EFF6FF}
.tipo-chip.on{background:linear-gradient(90deg,#9961FF,#7c3aed);color:#fff;border-color:#9961FF;box-shadow:0 2px 8px rgba(153,97,255,0.3)}
.include-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:0.5px solid #C9D9FF;background:#fff;color:#7D84C1;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;user-select:none}
.include-chip:hover{border-color:#9961FF;color:#9961FF;background:#EFF6FF}
.include-chip.on{background:#9961FF;color:#fff;border-color:#9961FF}
.include-chip i{font-size:12px}
.include-custom-row{display:flex;align-items:center;gap:6px}
.include-custom-input{flex:1;border:0.5px solid #C9D9FF;border-radius:8px;padding:7px 10px;font-size:12px;color:#374151;font-family:inherit;outline:none}
.include-custom-input:focus{border-color:#9961FF}

/* MÓDULOS */
.modulo-row{background:#f8f9ff;border:0.5px solid #C9D9FF;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.modulo-header{display:flex;align-items:center;gap:8px}
.modulo-num{width:22px;height:22px;border-radius:50%;background:#9961FF;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modulo-titulo{flex:1;border:0.5px solid #C9D9FF;border-radius:7px;padding:7px 10px;font-size:12px;color:#374151;font-family:inherit;outline:none}
.modulo-titulo:focus{border-color:#9961FF}
.modulo-desc-wrap{position:relative}
.modulo-desc{width:100%;border:0.5px solid #C9D9FF;border-radius:7px;padding:7px 10px 20px;font-size:11.5px;color:#374151;font-family:inherit;resize:none;outline:none;min-height:52px}
.modulo-desc:focus{border-color:#9961FF}
.modulo-counter{position:absolute;bottom:5px;right:8px;font-size:10px;color:#9ca3af}
.modulo-del{background:none;border:none;color:#9ca3af;cursor:pointer;font-size:13px;padding:2px 4px;flex-shrink:0;transition:color .15s}
.modulo-del:hover{color:#ef4444}

/* CUPOS TOGGLE */
.cupos-toggle-btn{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;border:0.5px solid #C9D9FF;background:#fff;color:#7D84C1;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;width:100%;margin-top:5px;text-align:left}
.cupos-toggle-btn:hover{border-color:#9961FF;color:#9961FF;background:#EFF6FF}
.cupos-toggle-btn.on{background:#9961FF;color:#fff;border-color:#9961FF}
.cupos-toggle-dot{width:14px;height:14px;border-radius:50%;background:rgba(125,132,193,0.35);border:1.5px solid rgba(125,132,193,0.5);flex-shrink:0;transition:all .2s}
.cupos-toggle-btn.on .cupos-toggle-dot{background:#fff;border-color:rgba(255,255,255,0.6);box-shadow:0 0 0 3px rgba(255,255,255,0.25)}

/* SPEC TAGS */
.spec-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;background:#9961FF14;color:#9961FF;border:0.5px solid #9961FF4D;margin:2px;cursor:default}
.spec-x{cursor:pointer;opacity:.6;font-size:10px;transition:opacity .15s}
.spec-x:hover{opacity:1}

/* SERVICIOS */
.svc-row{display:flex;align-items:center;padding:12px 16px;border-bottom:0.5px solid #f3f4f6;gap:10px;transition:background .12s}
.svc-row:last-child{border-bottom:none}
.svc-row:hover{filter:brightness(0.96)}
.svc-dot{display:none}
.svc-name{font-size:12px;font-weight:700;color:#383838}
.svc-meta{font-size:11px;color:#383838;opacity:.65}
.svc-price{font-size:13px;font-weight:700;color:#fff;min-width:100px;text-align:right}

/* BREADCRUMB */
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:12px;color:#7D84C1}
.breadcrumb strong{color:#3b4a6b}

/* ── Encabezado del paso [31-08-2026] ──────────────────────────────────────
   "PASO N DE 5" + título + una línea de qué se hace ahí. Hasta hoy no había nada:
   se entraba al wizard sin saber dónde se está ni para qué.
   Lo llena configuracion.js en cada goStep; el div nace vacío, y con :empty no deja
   hueco si por algo no se pudo resolver el título. */
/* [01-09 (3)] El encabezado va FUERA del contenedor con sombra —encabeza el paso
   completo, no la tarjeta— asi que lleva su propio margen a los lados para alinearse
   con el contenido de abajo. */
.paso-cab{margin:0 2px 16px}
.step-panel > .paso-cab{margin:2px 2px 14px}
.paso-cab:empty{display:none}
.paso-cab-n{
  font-size:10px;font-weight:700;color:#9961FF;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:3px
}
.paso-cab-t{
  font-size:19px;font-weight:700;color:#1e2a5e;
  margin:0 0 4px;line-height:1.25
}
.paso-cab-d{
  font-size:12.5px;color:#7D84C1;line-height:1.55;
  margin:0;max-width:720px
}

/* USER EDIT TABS */
.ue-tabs{display:flex;border-bottom:1px solid #C9D9FF;background:#fafbff;flex-wrap:wrap}
.ue-tab{padding:9px 13px;font-size:12px;font-weight:500;color:#7D84C1;cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s}
.ue-tab.active{color:#9961FF;border-bottom-color:#9961FF;font-weight:700}
.ue-tab:hover:not(.active){color:#9961FF}
.ue-panel{display:none;padding:16px 18px}
.ue-panel.active{display:block}

/* PREVIEW PANEL */
#preview-panel{width:48vw;flex-shrink:0;height:100%;background:#f3f4f6;border-left:2px solid #C9D9FF;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,0.1);overflow:hidden}
.preview-topbar{background:#fff;border-bottom:1px solid #C9D9FF;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.preview-topbar span{font-weight:700;font-size:12px;color:#3b4a6b;display:flex;align-items:center;gap:7px}
.preview-topbar span i{color:#9961FF}
.preview-scale-wrap{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;background:#e5e7eb}
#perfil-iframe{border:none;width:1200px;transform-origin:top left;display:block;flex-shrink:0}
#main-layout{display:flex;height:100%;overflow:hidden}
/* [20-08-2026] El plegado tiene que existir en escritorio, no solo en el @media. Con
   width:0 el panel devuelve su ancho al formulario; el borde y la sombra se retiran o
   queda una línea flotando en el borde. */
#preview-panel{transition:width .3s ease}
#preview-panel.preview-collapsed{width:0;border-left:none;box-shadow:none}
#left-pane{flex:1;overflow-y:auto;min-width:0}

/* EDICIÓN PERFIL */
.edit-section{padding:14px 18px;border-bottom:1px solid #f0f2f8}
.edit-section:last-child{border-bottom:none}
.edit-section-title{font-size:11px;font-weight:700;color:#9961FF;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.edit-section-title i{font-size:12px}
.edit-row{margin-bottom:10px}
.edit-row label{display:block;font-size:11px;font-weight:600;color:#555;margin-bottom:4px}
.edit-row input[type=text],.edit-row textarea{width:100%;border:0.5px solid #C9D9FF;border-radius:8px;padding:7px 10px;font-size:12px;color:#374151;font-family:inherit;resize:vertical}
.edit-row input[type=text]:focus,.edit-row textarea:focus{outline:none;border-color:#9961FF;box-shadow:0 0 0 3px #9961FF15}
.edit-row textarea{min-height:60px}
.edit-file-label{display:flex;align-items:center;gap:.5rem;background:#f5f3ff;border:1.5px dashed #c4b5fd;border-radius:10px;padding:.4rem .8rem;cursor:pointer;font-size:.72rem;color:#6d28d9;transition:all .15s}
.edit-file-label:hover{background:#ede9fe;border-color:#9961FF}
.edit-file-label i{font-size:13px;color:#9961FF}
.edit-colors-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.edit-color-row{display:flex;flex-direction:column;gap:4px}
.edit-color-row label{font-size:11px;font-weight:600;color:#555}
.edit-color-row .color-pick{display:flex;align-items:center;gap:6px}
.edit-color-row input[type=color]{width:34px;height:26px;border:none;border-radius:6px;cursor:pointer;padding:1px}
.edit-color-row span{font-size:.68rem;color:#888}

/* MEDIA */
.media-tabs{display:flex;border-bottom:1px solid #C9D9FF;padding:0 18px}
.media-tab{padding:9px 14px;font-size:12px;font-weight:500;color:#7D84C1;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s}
.media-tab.active{color:#9961FF;border-bottom-color:#9961FF;font-weight:700}
.media-tab:hover:not(.active){color:#9961FF}
.drop-zone{border:1.5px dashed #C9D9FF;border-radius:10px;padding:24px;text-align:center;cursor:pointer;background:#fafbff;transition:all .2s;margin-bottom:14px}
.drop-zone:hover{border-color:#9961FF;background:#EFF6FF}
.drop-zone i{font-size:24px;color:#C9D9FF;display:block;margin-bottom:6px}
.drop-zone p{font-size:12px;color:#7D84C1;margin:0 0 3px}
.drop-zone small{font-size:10px;color:#b0bbc8}
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.media-thumb{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:1;background:#f3f4f6;border:0.5px solid #C9D9FF}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.media-over{position:absolute;inset:0;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;gap:5px;opacity:0;transition:opacity .2s}
.media-thumb:hover .media-over{opacity:1}
.mt-btn{background:rgba(255,255,255,.9);border:none;border-radius:5px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px}

/* PREVIEW TOGGLE BTN */
/* [20-08-2026] Visible SIEMPRE, no solo en celular: en escritorio no había forma de
   plegar la vista previa y ocupaba 48vw. El `right` lo pone el JS con el ancho real
   del panel — un valor fijo se desalinea apenas cambia el zoom o el ancho. */
#preview-toggle-btn{
  display:flex;align-items:center;justify-content:center;
  position:fixed;top:50%;right:0;transform:translateY(-50%);
  width:20px;height:52px;background:#9961FF;color:#fff;border:none;
  border-radius:8px 0 0 8px;box-shadow:-3px 0 12px rgba(153,97,255,.45);
  font-size:11px;z-index:102;cursor:pointer;padding:0;
  transition:right .3s ease, background .15s;
}
#preview-toggle-btn:hover{background:#8450f0}

/* CONFIRM DELETE MODAL */
.cfg-confirm-overlay{display:none;position:fixed;inset:0;background:rgba(30,25,80,0.52);z-index:600;align-items:center;justify-content:center}
.cfg-confirm-overlay.open{display:flex}
.cfg-confirm-modal{background:#fff;border-radius:20px;padding:32px 28px 28px;width:340px;max-width:calc(100vw - 40px);box-shadow:0 24px 64px rgba(10,0,60,0.22);text-align:center;animation:cfgFadeIn .2s ease}
.cfg-confirm-icon{width:58px;height:58px;border-radius:50%;background:#fee2e2;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:22px;color:#ef4444}
.cfg-confirm-title{font-size:16px;font-weight:700;color:#3b4a6b;margin-bottom:8px}
.cfg-confirm-msg{font-size:13px;color:#7D84C1;margin-bottom:24px;line-height:1.5}
.cfg-confirm-btns{display:flex;gap:10px;justify-content:center}
.cfg-confirm-del{background:linear-gradient(90deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:10px;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s}
.cfg-confirm-del:hover{opacity:0.88}
/* [2026-07-22] variante 'confirm' del modal cfg-confirm (violeta/check) — par de cfgConfirm(opts) */
.cfg-confirm-icon.cfg-ok{background:#f5f3ff;color:#9961FF}
.cfg-confirm-del.cfg-ok{background:linear-gradient(90deg,#9961FF,#7c3aed)}

/* ── RESPONSIVE ────────────────────────────────── */
@media(max-width:768px){
  /* Preview: overlay lateral */
  #preview-panel{position:fixed !important;right:0;top:0;height:100%;width:85vw !important;max-width:360px;z-index:100;box-shadow:-6px 0 24px rgba(0,0,0,.18);transition:width .3s ease !important}
  #preview-panel.preview-collapsed{width:0 !important}   /* el !important gana al 85vw de arriba */
  /* [20-08-2026] El botón ya es base (visible en escritorio y celular). Acá queda solo
     lo PROPIO del celular: el `right` lo pone el JS con el ancho real, así que la regla
     que lo forzaba a 0 con !important sobraba y peleaba con él. */
  #preview-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99}
  #preview-backdrop.open{display:block}
  /* Left pane ocupa todo el ancho cuando preview es overlay */
  #left-pane{width:100%;flex:unset}
  /* Steps: scroll horizontal */
  .steps{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0;padding-bottom:4px;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{flex-shrink:0;flex-direction:column;align-items:center;gap:3px}
  .step-label{font-size:9px;margin-left:0;text-align:center;white-space:nowrap}
  .step-line{min-width:16px;flex:0 0 16px}
  /* Grids */
  .form-grid-3{grid-template-columns:1fr 1fr}
  .form-grid-2{grid-template-columns:1fr}
  .summary-card{flex-direction:column;align-items:flex-start;gap:10px}
  .summary-grid{grid-template-columns:1fr 1fr !important}
  /* Tabla — el scroll lo maneja .table-scroll-wrap */
  .table-scroll-wrap{border-radius:0}
  /* Filtros */
  .filters-bar{flex-direction:column}
  .filter-group{min-width:unset;width:100%}
  /* Tabs */
  .ue-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .ue-tab{white-space:nowrap;flex-shrink:0}
  /* Stats */
  .stats{grid-template-columns:repeat(3,1fr)}
  /* Padding */
  .content{padding:10px 12px}
  .edit-body{padding:12px}
  .ue-panel{padding:12px 14px}
  .card-header{flex-wrap:wrap;gap:6px}
  /* Servicios/programas row */
  .svc-row{flex-wrap:wrap;gap:6px;padding:10px 12px}
  .svc-price{min-width:unset;font-size:12px}
  /* Galería */
  .media-grid{grid-template-columns:repeat(3,1fr)}
  /* Misc */
  .breadcrumb{flex-wrap:wrap;gap:6px}
  .edit-section{padding:12px 14px}
}

@media(max-width:480px){
  .steps-bar{padding:8px 10px}
  .step-circle{width:28px;height:28px;font-size:11px}
  .step-label{font-size:9px}
  .step-line{min-width:8px;flex:0 0 8px}
  /* Todos los grids a 1 columna */
  .form-grid-3{grid-template-columns:1fr}
  .form-grid-2{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:1fr !important}
  .stats{grid-template-columns:1fr 1fr}
  .media-grid{grid-template-columns:repeat(2,1fr)}
  /* Política de cancelación: 2 cols → 1 col */
  #ses-cancel-wrap,#jm-ses-cancel-wrap,
  #prog-cancel-wrap,#jm-prog-cancel-wrap{grid-template-columns:1fr !important}
  /* Misc */
  .content{padding:8px 10px}
  .edit-body{padding:10px}
  .edit-colors-grid{grid-template-columns:1fr}
  .toggle-group{flex-wrap:wrap}
  .galeria-thumb{width:64px;height:64px}
  .edit-section{padding:10px 12px}
  .card-header .btn-primary{font-size:11px;padding:5px 10px}
  .svc-row{padding:8px 10px;gap:5px}
  /* Inputs más grandes para touch */
  .form-group input,.form-group select,.form-group textarea{font-size:14px}
  .edit-row input[type=text],.edit-row textarea{font-size:14px}
  /* Botones del formulario */
  .btn-sm{padding:5px 10px;font-size:11px}
}
/* ── C3: adopción de servicios del catálogo (Paso 4) [v2026.06.22-3] ── */
/* [01-09-2026 (4)] Sin el relleno de antes: los chips salieron de dentro de la tarjeta
   "Servicios agendables" —donde necesitaban compensar el padding de la card— y ahora
   viven al mismo nivel que el breadcrumb, como en el paso 2. */
.svc-recurso-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0}
.svc-tipo{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;opacity:.5;margin-right:6px}
.svc-row-ag{background:#fff}
.svc-row-ag:hover{filter:none;background:#fafbff}
.svc-row-ag .svc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}
.svc-row-ag .svc-name{color:#2b3556}
.svc-row-ag .svc-price{color:#374151}

/* ── [02-09-2026] Categorías del paso 4 + barra del botón ── */
.svc-categorias{margin:22px 0 0}
/* La tarjeta del Resumen reparte en tres columnas y deja el botón a la derecha; aquí
   es un solo bloque de chips. */
.svc-categorias-card{display:block;margin-bottom:0}
.svc-categorias-s{font-size:11px;color:#7D84C1;margin:0 0 10px;max-width:520px}
.svc-categorias-chips{display:flex;gap:8px;flex-wrap:wrap}
/* ── [03-09-2026] Chip de especialidad compartido (pasos 3 y 4). El borde va en las
   dos variantes con el mismo grosor, para que midan igual y no "salten" al lado. ── */
.hvy-chip-esp{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  padding:4px 12px;border-radius:20px;white-space:nowrap;border:1px solid transparent;line-height:1.2}
.hvy-chip-esp.catalogo{background:linear-gradient(135deg,#9961FF,#7d5bff);border-color:#7d5bff;color:#fff}
.hvy-chip-esp.propia{background:#e9962a1f;border-color:#e9962a66;color:#b9791c}
.svc-categorias-vacio{font-size:12px;color:#a8aed1}
.svc-btn-bar{display:flex;justify-content:flex-end;margin:24px 0 24px}

/* [02-09-2026] Botón grande: el único llamado a la acción de un paso. */
.btn-primary.btn-grande{font-size:13px;padding:11px 20px;border-radius:10px;
  display:inline-flex;align-items:center;gap:9px}
.btn-primary.btn-grande .fa-plus{font-size:15px;margin-right:0}
.ses-catalogo-hint{font-size:11px;color:#9096b0;margin-top:5px;line-height:1.4}

/* ── [02-09-2026] Programas: tres tarjetas hermanas ── */
.prog-secciones{margin-bottom:10px}
.edit-panel.open+.prog-secciones,.edit-panel.open+.svc-list-section{margin-top:16px}
.prog-sec{margin-bottom:16px}
.prog-sec:last-child{margin-bottom:0}
.prog-sec-n{margin-left:auto;font-size:11px;font-weight:600;color:#a8aed1}
.prog-sec-s{font-size:11px;color:#7D84C1;margin:-4px 0 10px}
.prog-sec-body .svc-row-ag{margin-bottom:5px}
.prog-sec-body .svc-row-ag:last-child{margin-bottom:0}
.prog-sec-body:empty::after{content:attr(data-vacio);display:block;font-size:11px;color:#a8aed1;padding:4px 2px}

/* ── C3 R2: contenedor de agendables + tooltip Heavensy [v2026.06.22-8] ── */
.svc-list-section{border:0.5px solid #d9c7ff;border-radius:12px;background:#faf9ff;padding:10px 12px;
  box-shadow:0 1px 4px rgba(30,20,80,.05)}
.svc-list-head{font-size:12px;font-weight:700;color:#6b3fc4;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.svc-list-head i{color:#9961FF}
.svc-list-section .svc-row-ag{border:0.5px solid #ece5ff;border-radius:9px;margin-bottom:5px}
.svc-list-section .svc-row-ag:last-child{margin-bottom:0}

/* Origen del servicio en "Disponibles para agendar": título chico + color suave */
.svc-row-ag.origin-catalog{background:#f4f6fb}
.svc-row-ag.origin-catalog:hover{background:#eef1f9}
.svc-row-ag.origin-creado{background:#f6f2ff}
.svc-row-ag.origin-creado:hover{background:#f0eaff}
.svc-row-ag.origin-propio{background:#fdf7ec}
.svc-row-ag.origin-propio:hover{background:#fbf1de}
.svc-row-ag.origin-catalog .svc-tipo{color:#5f6b85;opacity:1}
.svc-row-ag.origin-creado .svc-tipo{color:#7a5fd0;opacity:1}
.svc-row-ag.origin-propio .svc-tipo{color:#b07d1e;opacity:1}
.svc-list-section .svc-row-ag.origin-catalog{border-color:#e0e6f2}
.svc-list-section .svc-row-ag.origin-creado{border-color:#e4dcf7}
.svc-list-section .svc-row-ag.origin-propio{border-color:#f0e4cf}
.svc-list-section #svc-list:empty::after{content:'Aún no hay servicios. Usa “Agregar servicio” para crear el primero.';display:block;font-size:11px;color:#a8aed1;padding:4px 2px}
/* ── Globo de ayuda claro [02-09-2026] ── ver bitácora (2) ── */
.hvy-globo-wrap{position:relative;display:inline-block}
.hvy-globo{position:absolute;background:#fff;color:#6b7280;font-size:11.5px;font-weight:500;line-height:1.45;
  border:1px solid #ddd6fe;padding:9px 12px;border-radius:8px;box-shadow:0 6px 18px rgba(43,53,86,.14);
  width:250px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:60;text-align:left;text-transform:none;letter-spacing:0}
.hvy-globo b{display:block;font-weight:700;color:#3b4a6b;margin-bottom:2px}
.hvy-globo::before,.hvy-globo::after{content:"";position:absolute;border:6px solid transparent}
.hvy-globo-wrap:hover .hvy-globo{opacity:1}
.hvy-globo--abajo{top:calc(100% + 10px);right:0}
.hvy-globo--abajo::before{bottom:100%;right:22px;border-bottom-color:#ddd6fe}
.hvy-globo--abajo::after{bottom:calc(100% - 1px);right:22px;border-bottom-color:#fff}
.hvy-globo--izq{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}
/* [24-09-2026 (8)] Encima y alineado a la derecha del elemento. */
.hvy-globo--arriba{bottom:calc(100% + 10px);right:0}
.hvy-globo--arriba::before{top:100%;right:22px;border-top-color:#ddd6fe}
.hvy-globo--arriba::after{top:calc(100% - 1px);right:22px;border-top-color:#fff}
/* [24-09-2026 (8)] El globo del botón lateral de la vista previa (position:fixed). */
#preview-toggle-btn:hover .hvy-globo{opacity:1}
/* [24-09-2026] Debajo y alineado a la izquierda del elemento. */
.hvy-globo--abajo-izq{top:calc(100% + 10px);left:0}
.hvy-globo--abajo-izq::before{bottom:100%;left:18px;border-bottom-color:#ddd6fe}
.hvy-globo--abajo-izq::after{bottom:calc(100% - 1px);left:18px;border-bottom-color:#fff}
.hvy-globo--izq::before{left:100%;top:50%;transform:translateY(-50%);border-left-color:#ddd6fe}
.hvy-globo--izq::after{left:calc(100% - 1px);top:50%;transform:translateY(-50%);border-left-color:#fff}

[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%);background:#2b3556;color:#fff;font-size:11px;font-weight:500;white-space:nowrap;padding:5px 9px;border-radius:7px;box-shadow:0 4px 14px rgba(43,53,86,.25);z-index:60;pointer-events:none}
[data-tip]:hover::before{content:'';position:absolute;right:calc(100% + 4px);top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:#2b3556;z-index:60;pointer-events:none}

/* ── C3 R2: form comprimido + espectro multi-select [v2026.06.22-9] ── */
.ses-row3{display:flex;flex-wrap:wrap;gap:10px}
.ses-row3 > div{flex:1 1 110px;min-width:0}
.ses-row3 > .ses-col-esp{flex:1.6 1 150px}
.ses-row3 > div > label{display:block;margin-bottom:4px}
@media(max-width:640px){.ses-row3 > div{flex:1 1 100%}}
.esp-multi-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.esp-multi-chip{display:inline-flex;align-items:center;gap:6px;background:#EEEDFE;color:#3C3489;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.esp-multi-chip i{cursor:pointer;font-size:11px;opacity:.55}
.esp-multi-chip i:hover{opacity:1;color:#ef4444}
.esp-multi{position:relative}
.esp-multi-btn{width:100%;display:flex;align-items:center;gap:8px;justify-content:space-between;background:#fff;border:1px solid #C9D9FF;border-radius:8px;padding:8px 12px;font-size:13px;color:#7D84C1;cursor:pointer}
.esp-multi-btn:hover{border-color:#9961FF}
.esp-multi-btn i{font-size:10px;color:#9BA3C0}
.esp-multi-panel{display:none;margin-top:6px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 14px rgba(31,41,55,.10);padding:6px;max-height:240px;overflow-y:auto}
.esp-multi.open .esp-multi-panel{display:block}
.esp-multi-grp{font-size:10px;font-weight:700;color:#a8aed1;text-transform:uppercase;letter-spacing:.04em;padding:7px 10px 3px}
.esp-multi-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:none;background:#fff;cursor:pointer;text-align:left;font-size:13px;color:#374151;padding:8px 10px;border-radius:8px}
.esp-multi-opt:hover{background:#f5f3ff}
.esp-multi-opt.on{background:#f5f3ff;color:#7a52d4;font-weight:600}
.esp-multi-opt i{font-size:11px;color:#9961FF}

/* Botón del hvy-select dentro del form de servicio (calza con .esp-multi-btn) [v2026.06.22-9] */
.hvy-form-select.hvy-select-btn{width:100%;border:1px solid #C9D9FF;border-radius:8px;padding:8px 12px;font-size:13px;color:#2b3556;background:#fff}
.hvy-form-select.hvy-select-btn:hover{border-color:#9961FF}


/* ═══ MODAL DE FORMULARIO [12-08-2026] ═══
   .cfg-confirm-modal está pensado para avisos de una línea: width:340px y texto
   centrado. Un formulario de seis campos ahí queda angosto y apretado, así que
   los modales con campos usan además esta clase. */
.cfg-form-modal{width:560px;text-align:left;padding:26px 28px 22px}
.cfg-form-modal .cfg-confirm-title{margin-bottom:18px;font-size:17px}

@media (max-width:640px){
  .cfg-form-modal{width:auto}
}

.cfg-form-modal .form-group input,
.cfg-form-modal .form-group select{
  height:38px;padding:0 12px;font-size:13px;
  border:1px solid #ddd6fe;border-radius:9px;background:#fff;color:#3b4a6b;
  transition:border-color .15s,box-shadow .15s
}
.cfg-form-modal .form-group input:focus{
  outline:none;border-color:#9961FF;box-shadow:0 0 0 3px rgba(153,97,255,.12)
}
.cfg-form-modal .form-group input:disabled{background:#f4f6fb;color:#8a93b2;cursor:not-allowed}

/* [01-09-2026 (5)] El campo de solo lectura FUERA del modal. La regla de arriba esta
   acotada a .cfg-form-modal, asi que "Nombre de tu empresa" —que vive en el paso 1—
   no la recibia y un input deshabilitado se veia igual que uno editable. */
.form-group input:disabled{background:#f4f6fb;color:#8a93b2;cursor:not-allowed;border-color:#e8ecfb}
.cfg-form-hint{font-size:10.5px;color:#8a93b2;margin-top:4px;line-height:1.4}

/* ── Contacto telefónico  [24-08-2026] ────────────────────────────────────────
   El campo del número vive DENTRO del toggle-group, en la misma fila que su botón: así
   el dato queda junto a lo que lo activa. Sin estos estilos era un input de formulario
   en medio de una fila de botones — más alto y desalineado.
   ────────────────────────────────────────────────────────────────────────── */
#disp-tel-grupo { align-items: center; }
#disp-telefono {
  padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600;
  border: 0.5px solid #C9D9FF; background: #fff; color: #383838;
  outline: none; transition: all .15s;
}
#disp-telefono:focus { border-color: #9961FF; }
#disp-telefono::placeholder { color: #B9C0DC; font-weight: 500; }

/* Encendido pero sin número: no se va a guardar así, y conviene que se vea antes de
   apretar Guardar y no después. */
.toggle-btn.sin-numero {
  background: #FDF6E3; border-color: #E8B84B; color: #854F0B;
}

/* ── [24-09-2026 (3)] Paso 5 en paneles colapsables ─────────────────── */
.ep-pane{margin-bottom:10px}
.ep-pane .card{margin-bottom:0}
.ep-toggle{cursor:pointer;user-select:none}
.ep-flecha{color:#9aa0c0;font-size:11px;transition:transform .2s}
.ep-pane.cerrado .ep-flecha{transform:rotate(-90deg)}
.ep-pane.cerrado .card > :not(.card-header){display:none}
.ep-pane.cerrado .card-header{border-bottom:none}

/* ── [24-09-2026] Cabecera de WhatsApp ─────────────────────────────── */
.cab-opc{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.cab-opc button{font:inherit;font-size:11px;padding:5px 10px;border-radius:999px;border:1px solid #d8d2fb;background:#fff;color:#6d28d9;cursor:pointer}
.cab-opc button.on{background:#9961FF;border-color:#9961FF;color:#fff;font-weight:600}
.cab-hint{display:block;font-size:.68rem;color:#9aa0c0;margin:-2px 0 4px;line-height:1.3}
.cab-ayuda{cursor:help}
.cab-ayuda > i{font-size:10px;color:#b0b8cc;margin-left:2px}
.cab-ayuda:hover > i{color:#9961FF}
.cab-col{width:420px;max-width:100%}
.cab-vista{width:100%;box-sizing:border-box;padding:10px;border:0.5px solid #C9D9FF;border-radius:12px;background:#fafbff}
.cab-preview{width:100%;height:auto;border-radius:8px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.12);background:#eef0f7}
.cab-tipos{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 0}
.cab-tipos button{font:inherit;font-size:10px;padding:3px 8px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#6b7280;cursor:pointer}
.cab-tipos button.on{background:#f5f3ff;border-color:#c4b5fd;color:#6d28d9;font-weight:600}

/* ── [25-09-2026] Diseño de la página ─────────────────────────────── */
.dp-plantillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.dp-pl{position:relative;border:1.5px solid #e7e3fb;border-radius:12px;padding:8px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}
.dp-pl:hover{border-color:#c4b5fd}
.dp-pl.on{border-color:#9961FF;box-shadow:0 0 0 3px rgba(153,97,255,.15)}
.dp-pl b{font-size:12.5px;color:#3b4a6b;display:flex;justify-content:space-between;align-items:center}
.dp-pl small{display:block;font-size:10.5px;color:#7D84C1;line-height:1.35;margin-top:2px}
.dp-pl .dp-ok{color:#9961FF;font-size:13px;display:none}
.dp-pl.on .dp-ok{display:inline-block}
.dp-pl.hvy-bloqueado{cursor:not-allowed}
.dp-pl.hvy-bloqueado .dp-mini{filter:grayscale(.7);opacity:.55}
.dp-mini{height:84px;border-radius:8px;background:#f4f2ff;overflow:hidden;position:relative;margin-bottom:7px}
.dp-m{position:absolute;background:#d9d3fb;border-radius:3px}
.dp-m.o{background:#9b8cf0}.dp-m.o2{background:#9b8cf0}.dp-m.b{background:#fff}
.dp-m.f{border-radius:50%;background:#c4b5fd}
.dp-m-marco{box-shadow:0 0 0 1.5px #9b8cf0}
.dp-m.d{width:4px;height:4px;border-radius:50%;background:#fff}   /* [30-09-2026] */
.dp-gal-aviso{font-size:11px;line-height:1.45;margin-top:8px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:7px 10px}
.dp-agendas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.dp-ag{border:1.5px solid #e7e3fb;border-radius:12px;padding:10px;cursor:pointer;background:#fff}
.dp-ag.on{border-color:#9961FF;box-shadow:0 0 0 3px rgba(153,97,255,.15)}
.dp-ag b{font-size:12.5px;color:#3b4a6b}
.dp-ag small{display:block;font-size:10.5px;color:#7D84C1;line-height:1.4;margin-top:3px}
.dp-demo{margin-top:7px;display:flex;gap:4px;flex-wrap:wrap}
.dp-demo span{font-size:9.5px;font-weight:600;padding:2px 6px;border-radius:7px;border:1px solid #d6d0fa;color:#6052cb;background:#fff}
.dp-nota{font-size:11px;color:#7D84C1;line-height:1.45;margin-top:12px;background:#f8f7ff;border-radius:8px;padding:8px 10px}

/* [25-09-2026 (3)] "Cargando plantilla…" sobre la vista previa */
.ep-vista-cargando{position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.78);backdrop-filter:blur(3px)}
.ep-vista-cargando>div{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#4b5bb0}
.ep-vista-cargando i{font-size:26px;color:#9961FF}

/* ── [26-09-2026] Modalidad de arriendo del servicio ── */
.ses-tr-ops{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ses-tr-op{border:1.5px solid #e5e7eb;border-radius:11px;padding:10px 11px;background:#fff;text-align:left;font:inherit;color:#4b5563;cursor:pointer;transition:border-color .12s,background .12s}
.ses-tr-op:hover{border-color:#c4b5fd}
.ses-tr-op.on{border-color:#9961FF;background:#f7f2ff}
.ses-tr-op b{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#1e2d5a}
.ses-tr-op b i{color:#9961FF;width:14px;font-size:12px}
.ses-tr-op small{display:block;font-size:11px;line-height:1.4;margin-top:4px;color:#6b7194}
.ses-tr-wrap-error .ses-tr-ops{outline:2px solid #ef4444;outline-offset:3px;border-radius:12px}
/* [29-09-2026 (2)] Una fila por jornada, con los títulos arriba en las mismas columnas. */
.ses-jornadas{display:flex;flex-direction:column;gap:7px;container-type:inline-size;
  --ses-jor-cols:minmax(0,1fr) 104px 12px 104px 118px 118px 30px}
.ses-jor-cab{display:grid;grid-template-columns:var(--ses-jor-cols);gap:7px;padding:0 9px;margin-bottom:-2px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9aa0c0}
.ses-jor{display:grid;grid-template-columns:var(--ses-jor-cols);gap:7px;align-items:center;padding:8px;border:1px solid #eef0f6;border-radius:10px;background:#fcfcfe}
.ses-jor .ses-jor-sep{text-align:center}
.ses-jor .ses-jor-campo small{display:none}
/* Formulario angosto: la fila se parte (nombre y quitar arriba; horario; los dos precios con
   su rótulo; días) y los títulos de arriba sobran. */
@container (max-width:640px){
  .ses-jor-cab{display:none}
  .ses-jor{grid-template-columns:1fr 12px 1fr 30px}
  .ses-jor .ses-jor-nom{grid-column:1/4;grid-row:1}
  .ses-jor .ses-jor-del{grid-column:4;grid-row:1}
  .ses-jor .ses-jor-campo{grid-column:span 2}
  .ses-jor .ses-jor-campo-men{grid-column:3/5}
  .ses-jor .ses-jor-campo small{display:block}
}
.ses-jor input[type=text]{width:100%;min-width:0;box-sizing:border-box}
.ses-jor .hvy-tp-field{width:100%;min-width:0}
.ses-jor .ses-jor-sep{font-size:12px;color:#9096b0}
.ses-jor.error input{border-color:#ef4444}
.ses-jor-del{border:1px solid #eceef5;background:#fff;color:#9096b0;border-radius:8px;width:30px;height:30px;cursor:pointer}
.ses-jor-del:hover{color:#ef4444;border-color:#f3c3c3}
.ses-jor-add{margin-top:8px;display:inline-flex;align-items:center;gap:6px;border:1.5px dashed #d9ccff;background:#fcfaff;color:#9961FF;border-radius:9px;padding:6px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.ses-jor-add:disabled{opacity:.45;cursor:default}
.ses-tr-nota{font-size:11px;color:#9096b0;margin-top:6px;line-height:1.4}
@media(max-width:420px){ .ses-tr-ops{grid-template-columns:1fr} }
/* [27-09-2026] Jornadas solo algunos días */
.ses-jor-dias{grid-column:1/-1;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ses-jor-dias small{font-size:11px;color:#9096b0;margin-right:2px}
.ses-jor-dia{width:26px;height:26px;border-radius:50%;border:0.5px solid #C9D9FF;background:#fff;color:#7D84C1;font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.ses-jor-dia.on{background:#9961FF;border-color:#9961FF;color:#fff}
.ses-jor-dia:hover:not(.on){background:#EFF6FF;border-color:#9961FF;color:#9961FF}
.ses-jor-dias-txt{font-size:11px;color:#9961FF;margin-left:4px}
.ses-jor.error .ses-jor-dias-txt{color:#ef4444}
/* [29-09-2026] Precio por vez y mensual de la jornada (cada uno en su columna de la fila) */
.ses-jor-campo{min-width:0;display:flex;flex-direction:column;gap:3px;margin:0}
.ses-jor-campo small{font-size:10.5px;font-weight:600;color:#9096b0;text-transform:uppercase;letter-spacing:.3px}
.ses-jor-campo-men input:placeholder-shown{border-style:dashed;border-color:#d9ccff}
/* [29-09-2026 (3)] Las jornadas dentro del horario del recurso */
.ses-jor-horario{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.5;color:#3730a3;background:#eef2ff;border:1px solid #c7d2fe;border-radius:9px;padding:8px 11px;margin:2px 0 10px}
.ses-jor-horario:empty{display:none}
.ses-jor-horario i{margin-top:3px;font-size:11.5px}
.ses-jor-horario.aviso{color:#7c4a03;background:#fff7ed;border-color:#fed7aa}
.ses-jor-ir{border:0;background:none;padding:0;font:inherit;font-weight:600;color:#4f46e5;text-decoration:underline;cursor:pointer}
.ses-jor-horario.aviso .ses-jor-ir{color:#b45309}
.ses-jor-dia.cerr{background:#f1f2f7;border-color:#eceef5;color:#c3c7da;cursor:not-allowed}
.ses-jor-dia.cerr:hover{background:#f1f2f7;border-color:#eceef5;color:#c3c7da}
.ses-jor-aviso{grid-column:1/-1;display:flex;gap:7px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:6px 9px}
.ses-jor-aviso i{margin-top:2px}
.ses-jor.fuera{border-color:#fecaca;background:#fffafa}
.svc-fuera{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-size:10px;font-weight:700;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:0 7px;opacity:1}
.svc-fuera i{font-size:9px}
.disp-modos-ro .toggle-btn{cursor:default;pointer-events:none}
.disp-modos-nota{font-size:11px;color:#9BA3C0;line-height:1.5;margin-top:7px}
/* [27-09-2026] Horario del espacio por día */
.disp-hd-cab{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.disp-hd-sw-wrap{display:inline-flex;align-items:center;gap:8px}
.disp-hd-sw-wrap .alm-label{font-size:12.5px;color:#7D84C1;font-weight:600}
.disp-hd-fila{display:grid;grid-template-columns:44px 40px 1fr auto 1fr;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #f3f4f8}
.disp-hd-fila:last-child{border-bottom:0}
.disp-hd-fila b{font-size:12.5px;font-weight:600;color:#1e2a5e}
.disp-hd-fila .disp-hd-sep{font-size:12px;color:#9096b0;text-align:center}
.disp-hd-fila .disp-hd-cerrado{grid-column:3/-1;font-size:11.5px;color:#9BA3C0}
.disp-hd-fila.error .hvy-tp-field{border-color:#ef4444}
.disp-hd-fila .hvy-tp-field{width:100%;min-width:0}