/* ── BITÁCORA ── [v2026.09.30-1] 2026-09-30 | Bloques masivos con sesiones de varios días (Tanda D; calendario.js [v2026.09.30-1]): + .bm-fc-cont, los días que ocupa cada sesión después del primero (morado pálido, con el borde suave del morado; se pueden ver pero no marcar), su punto de leyenda .bm-fc-leg-cont, y .bm-dias-nota, el recuadro del paso 4 que explica que la sesión dura días completos (en el tono suave de .bm-slots-preview). [v2026.09.29-1] 2026-09-29 | Arriendo mensual por confirmar (calendario-arriendos.js [v2026.09.29-1], calendario.js [v2026.09.29-2]): + .arr-st-pc, la etiqueta "Por confirmar" de la tarjeta del panel (morado pálido), y .appt-fijo-tag.pc, la marca de sus días apartados en el calendario (en cursiva: todavía no son del cliente). [v2026.09.27-2] 2026-09-27 (2) | + .resv-* (buscador de contactos de "Nueva hora" / "Nueva reserva" y de "Quién arrienda", calendario-reservar.js) y .arr-lock (el cliente fijo del arriendo cuando se abre desde una conversación). Mismos tonos suaves del panel. [v2026.09.27-1] 2026-09-27 | ARRIENDOS FIJOS (cowork, etapa 3b): + bloque .arr-* al final — el panel lateral (mismo molde que el de bloqueos), sus tarjetas, el formulario "Nuevo arriendo fijo" y el recuadro que dice qué días quedan libres y cuáles chocan— y .appt-fijo-tag, la marca "Fijo" en la tarjeta de un día de arriendo. Colores suaves, en el tono de la casa (morado claro, verde y ámbar pálidos), como pidió Alberto el 26-09. [v2026.09.26-2] 2026-09-26 (2) | Las líneas de llegada (.cal-stay-pint.llega) y de salida (.sale) pasan del tono OSCURO de la unidad (--st-tx) al tono SUAVE de su borde (--st-bd), y de 2.5 a 2 px. Pedido de Alberto al revisar el preview del cowork: bordes y marcas en el tono suave del espacio, nunca en el oscuro, para que no resalten sobre la tarjeta. Regla para todo el calendario. [v2026.09.26-1] 2026-09-26 | ESTADÍAS (cabañas, sitios) en Semana y Día, preview aprobado por Alberto el 26-09. Va con calendario.js [v2026.09.26-1]: + .cal-stay-capas: la tira "Estadías · Barras · Días pintados" bajo los nombres de los días, con .cal-stay-tg (el botón encendido en morado). + .cal-stay-fila / .cal-stay-pista / .cal-stay-barra: la fila de barras de punta a punta, con la llegada y la salida en dos chips blancos (.cal-stay-io). Cortada por el borde de la semana, la punta queda recta (.corte-ini / .corte-fin). + .cal-stay-pint: el día pintado en la grilla, rayado suave en el color de la unidad; línea llena arriba el día que llega (.llega) y punteada abajo el que sale (.sale). Queda detrás de las citas y los bloqueos (z-index 1). El color de cada unidad llega desde el JS en --st-bg / --st-bd / --st-tx. + VISTA AGENDA (calendario-agenda.js [v2026.09.26-1]): .agenda-bloqueo (el bloqueo en rojo, como .appt.bloqueado de la grilla, sin cursor de mano: no abre nada), .agenda-todo-dia (el rótulo en la columna de la hora) y .agenda-ico (el icono de cama o de prohibido delante del título). [v2026.09.17-1] 2026-09-17 | ETAPA 1 DE LA AUDITORIA DE AGENDA, lo que se ve: + .appt-slot-btn.no-disponible: la hora que NO esta libre ya no se esconde, se muestra TACHADA (preview aprobado por Alberto, 17-09). Se puede elegir igual: al guardar se pide el motivo y queda como excepcion. + #appt-slot-aviso: la linea ambar que explica por que esa hora no esta. + .appt.cal-excepcion: la cita agendada como excepcion, con borde ambar punteado y su marca; el motivo se lee en el globo de la cita. Mismo patron que .cal-fija. [v2026.09.10-1] 2026-09-10 | + .cal-fija (la cita que no se puede arrastrar: candadito al pasar el mouse) y .cal-aviso (el motivo, UNA vez arriba de la grilla). Va con calendario.js [v2026.09.10-1]. El candado de los botones y su globo son comunes y viven en hvy-permisos.css. [v2026.08.21-11] 2026-08-21 (11) | TIPOGRAFIA DE LOS TOOLTIPS: el de la lupa se veia grande y suelto, y el estilo es compartido, asi que se ajusta en la base y mejoran los tres (lupa, $ y modalidad) mas el nuevo del modal de programa. Texto de 12 a 11.5, titulo de 10 a 9.5, interlineado mas justo y el ancho de 192 a 186: un tooltip es una nota al margen, no un parrafo — si pide leerlo como texto largo, ya perdio contra la accion que estaba por hacerse. + .cal-pay-tip-txt y .cal-pay-tip-sub: las dos partes del cuerpo, que hasta ahora se escribian con estilos en linea desde el JS. Un estilo escrito en dos lugares termina divergiendo. [v2026.08.21-10] 2026-08-21 (10) | + .cal-tip-texto: la variante de una linea del tooltip del panel, para los botones y rotulos del modal de programa. Hereda todo de .cal-pay-tip (fondo, sombra, tipografia) y solo cambia lo que un texto corto necesita: ancho maximo y centrado. El `title` del navegador quedaba feo y tardaba un segundo en aparecer — justo cuando alguien duda entre "Link" y "+ Abono". [v2026.08.21-9] 2026-08-21 (9) | El pago del alumno pasa a DOS PARES rotulo+monto ("Abonos $190.000" · "Saldo $310.000"): el rotulo en el chip y el monto afuera, en negrita. El chip nombra, el numero pesa — antes el monto iba pelado al lado de "Abonado" y se leia como lo abonado cuando era el saldo. Cada par tiene su color: lo abonado en ambar, el saldo en rojo, lo pagado en verde. En pantalla angosta los pares BAJAN a su propia linea: con dos, el nombre quedaba sin espacio. [v2026.08.21-8] 2026-08-21 (8) | Estilos del MODAL DE PROGRAMA pensado para 20 inscritos en un telefono (calendario.js [v2026.08.21-6]): fila del alumno en dos lineas, historial de abonos desplegable con altura fija y scroll, buscador, y la LISTA con scroll propio mientras cabecera, resumen y pie quedan fijos. Lo ultimo es lo que mas cambia: antes el modal entero crecia y la lista se apretaba en lo que sobrara — con 20 alumnos se veian tres, y el valor del programa desaparecia al bajar. [v2026.08.21-7] 2026-08-21 (7) | El encabezado de cada dia de la AGENDA se tine con un violeta muy tenue y hace de barra separadora: en blanco sobre blanco no se veia donde terminaba un dia y empezaba el otro, y con la semana vacia era una sabana. El tono es apenas perceptible A PROPOSITO: con citas, los bloques de color ya separan, y un fondo que compita con ellos ensucia. Los bloques quedan sobre blanco para conservar su contraste. El dia de HOY lleva el tono un punto mas marcado: al abrir, el ojo debe caer ahi. [v2026.08.21-6] 2026-08-21 (6) | El indicador de filtros deja de ser un numero y pasa a decir QUE se filtra ("Dr Marcos Mujica · Ortodoncia"). Su estilo cambia con eso: de pastilla redonda de un digito a etiqueta que puede ser larga, con corte en "..." y sin empujar al chevron — la linea no crece. [v2026.08.21-5] 2026-08-21 (5) | El "Hoy" comprimido quedaba achatado: al ponerle padding:0 para hacerlo cuadrado perdio el alto que le daba su padding vertical, y al lado de las flechas (26 px) se veia una pastilla baja. Ahora se le da alto EXPLICITO —los mismos 26 px de .cal-nav-btn, sus vecinas— en vez de esperarlo del contenido: si el alto es una decision, se escribe. [v2026.08.21-4] 2026-08-21 (4) | El boton de agenda se integra al GRUPO de vistas (comparte borde y separadores en vez de ir suelto: ~12 px menos, que en un telefono eran los que lo mandaban a una segunda fila), y "Hoy" se comprime a un icono cuadrado bajo 768 px. Con eso la barra entra en una linea. [v2026.08.21-3] 2026-08-21 (3) | La fila de la agenda se pinta con el color de su servicio o programa (lo aplica calendario-agenda.js [v2026.08.21-2]); aca se ajusta lo que cambia con eso: la barra suelta desaparece —el borde izquierdo del bloque la reemplaza—, los chips pasan a blanco translucido para leerse sobre cualquier tono, y el ojo toma el color del texto del bloque. + La barra de vistas ENVUELVE en pantalla angosta en vez de encoger los botones hasta que no se lean. Con el rango ya sin el prefijo "Semana" normalmente cabe en una linea; esto es la red por si el rango es largo ("29 Diciembre - 4 Enero 2027"). [v2026.08.21-2] 2026-08-21 (2) | ALTO MINIMO de la tarjeta y estilos de la VISTA AGENDA (calendario-agenda.js). · El bloque de 45 min mide 54 px y sus tres lineas necesitan ~62: se cortaban la segunda y la tercera. El minimo actua SOLO donde falta —los bloques cortos— en vez de ampliar todas las horas, que obligaria a mas scroll para ver el dia. La tarjeta crece unos px sobre su bloque, como hace Google Calendar con reuniones de 15 min; la hora de inicio, que es lo que importa, sigue siendo la de arriba. · La agenda: lista cronologica para leer, grilla para operar (arrastrar y ver huecos solo funciona alla). Se retira el min-width:0 de la [v2026.08.21-1] para la semana: con la agenda disponible, quien elija la grilla en el telefono la quiere completa y con scroll horizontal, no aplastada. [v2026.08.21-1] 2026-08-21 | La tarjeta se cortaba por la derecha en el telefono (se perdian el "45 min" y el ojo): .week-view traia min-width:700px, pensado para que las SIETE columnas no se aplastaran. En una pantalla de 380 px eso desborda la vista entera. Con la semana de 3 dias (calendario.js [v2026.08.21-1]) ese minimo deja de tener sentido en angosto: se retira bajo 768 px y las columnas se reparten el ancho real. En escritorio se conserva — ahi si hay siete y el minimo protege. [v2026.08.20-4] 2026-08-20 (4) | Los plegables salen del @media: ocultar filtros y leyenda ya no es cosa del celular. En un portatil de 13 pulgadas con el panel lateral abierto, esos ~250 px pesan igual. Nacen ABIERTOS en todas las vistas —el estado por defecto no cambia para nadie— y cada quien los cierra si quiere. El boton gana peso: con los filtros plegados, su contador es la unica senal de que algo esta filtrando. Fondo violeta suave, borde y numero en negrita cuando hay filtros puestos; neutro cuando no hay ninguno. [v2026.08.20-3] 2026-08-20 (3) | El cupo quedaba al MEDIO en la vista dia: el chip reusa la clase .appt-dur-label para heredar su forma, y esa clase trae margin-left:auto. Con dos elementos empujando a la derecha, el primero se queda flotando en el centro. Se le devuelve margin-left:0 dentro de .appt-prog: la forma se hereda, el empuje no. [v2026.08.20-2] 2026-08-20 (2) | FIX del bloque movil de la -1: · Los filtros NO se plegaban: la regla decia .cal-filtros-wrap.plegado y el elemento que se pliega es #cal-prof-bar — esa clase no existe en el marcado, asi que el boton alternaba una clase que nadie escuchaba. La leyenda si funcionaba porque su selector coincide. · Y quedaban desordenados: al dejar que los chips envolvieran, el buscador se estiraba y los chips flotaban a la derecha. En movil la fila pasa a COLUMNA — rotulo y buscador arriba, chips abajo alineados a la izquierda— que es como se leen cuando son quince. [v2026.08.20-1] 2026-08-20 | Tres cosas, todas de la vista movil y de la sesion de programa: · .appt-prog — la tarjeta de una sesion, en tres lineas como la cita. Estaba inyectada desde calendario.js con !important porque yo suponia que algo aca la centraba; con el archivo a la vista se ve que .appt NO centra nada (ni display flex, ni text-align), asi que las reglas quedan limpias y en su lugar. · Movil (<=768px): los filtros y la leyenda se pliegan. Con dos filas de filtros y quince colores al pie, al calendario le quedaban ~2 horas visibles de 10. · .cal-pay-tip gana .abierto: en tactil no hay mouseleave, asi que el tooltip se cerraba nunca. Ahora el JS alterna esa clase. [v2026.08.19-2] calendario.css 2026-08-19 (2) | .appt-actions pasa de gap 3px a 5px. Con dos iconos eran suficientes, pero desde que la tarjeta lleva TRES —modalidad, pago y ojo— se veian pegados y costaba distinguir donde termina uno y empieza el otro (reportado por Alberto). 5px y no mas: la tarjeta de una cita de 30 min es angosta y el bloque no puede comerle espacio al nombre del cliente. [v2026.08.19-1] calendario.css 2026-08-19 | + .appt-mod-slot: el icono de modalidad, mismo tamano y forma que el $ del pago pero con fondo apenas tenido y el color en el icono. Los tres colores (azul, magenta, cafe) los pone el JS; aqui solo la forma. NO lleva rojo, amarillo ni verde: esos son del semaforo del pago y son los unicos que exigen accion. Si el de modalidad compitiera en saturacion, el $ dejaria de destacar — y es el unico que hay que resolver. [v2026.08.15-2] calendario.css 2026-08-15 (2) | .btn-cancel se alinea con los otros dos "Cancelar" del sistema (.bm-btn-cancel y .cal-confirm-cancel): borde 1.5px, radio 10 y hover morado. Estaba en 1px, radio 8 y SIN hover, asi que en el mismo panel convivian dos botones que hacen lo mismo y se veian distintos — y el del detalle de cita ni siquiera respondia al mouse. [v2026.08.15-1] calendario.css 2026-08-15 | + .appt-pay-slot: el icono $ de la tarjeta. Es el UNICO elemento con color semantico ahi, por eso .eye-btn pasa a un gris neutro — dos iconos peleando por la atencion se anulan entre si. + .appt-actions .del-btn solo aparece al pasar el mouse por la tarjeta, asi el rojo de borrar y el rojo de "sin pagar" no conviven en reposo. El $ y el ojo quedan siempre visibles porque informan; el basurero actua, y actuar puede esperar al gesto deliberado de acercarse. + .cal-pay-tip: el tooltip con el detalle. Fondo claro y paleta del panel, no la caja oscura de sistema. position:fixed porque cuelga del body — dentro de la tarjeta lo recortaria el overflow de la columna. + .cal-pay-btn: los botones del bloque de pagos, todos iguales. Cobrar el saldo no es mas correcto que registrar un pago que ya entro por transferencia: eso lo dice la cartola, no la pantalla. [v2026.08.14-4] calendario.css 2026-08-14 (4) | .bm-field-hint pasa de ser un trozo del rótulo a una nota bajo el campo, y .bm-time-row alinea sus columnas arriba: la hora de término quedaba más abajo que la de inicio porque su rótulo ocupaba dos líneas. [v2026.08.14-3] calendario.css 2026-08-14 (3) | + .bm-dp-past y .bm-fc-past: días anteriores a hoy en los pasos 2 y 3. Se apagan y pierden el cursor, pero NO se ocultan: en un taller ya configurado las sesiones dictadas caen ahí y tienen que seguir viéndose. Si además está marcada, la sesión conserva su color y solo baja de intensidad — ocurrió, y eso se lee. + .bm-input-calc y .bm-field-hint: la hora de término es un valor calculado, no un campo deshabilitado. Se distingue del de inicio sin parecer un error. [v2026.08.14-2] calendario.css 2026-08-14 (2) | Bloques masivos como PANEL de talleres. + .bm-chip-badge y .bm-chip-done: el programa que ya tiene sesiones con este recurso se distingue del que está disponible. Se marca con un borde izquierdo y el conteo, no con un color distinto: la paleta del chip ya identifica al programa y pisarla rompería la correspondencia con la tarjeta del calendario. + .bm-chip-del: el basurero. Aparece atenuado y toma color al pasar por encima — borrar no debe ser lo primero que salta a la vista en una tarjeta que sobre todo sirve para entrar a configurar. + .bm-step con cursor de mano, y .bm-step-label queda en 'Programa' (antes 'Servicio': un programa no es un servicio agendable, y esa confusión costó el 400 del 13-ago). [v2026.08.14-1] calendario.css 2026-08-14 | + .bm-fc-blocked: día con bloqueo del profesional en el paso 3. Se usa el mismo rojo que el bloqueo del calendario grande (#fde8e8 / #f5b5b5) porque es el mismo concepto y ya tiene significado aprendido. Convive con .bm-fc-off, que es otra cosa: aquella es la regla semanal (no atiende los domingos), esta es una excepción con fecha y motivo. Un día puede tener las dos: manda el bloqueo, que es el dato concreto, y se conserva el rayado de fondo. Si además está elegido manda la selección —el usuario ya decidió— y el borde rojo queda de advertencia. + .cal-confirm-msg respeta los saltos de línea (white-space:pre-line) para poder enumerar los choques en el diálogo. Los mensajes de una línea no cambian. [v2026.08.13-1] calendario.css 2026-08-13 | + .bm-fc-off: dia que el profesional NO atiende, en el paso 3 de Bloques masivos. Se RAYA en vez de apagarse, porque apagado se lee como "no disponible" y aca si lo esta: es solo referencia y se puede agendar igual. Si ademas esta elegido, manda la seleccion. [v2026.07.31-1] 2026-07-31 | Variante AVISO del diálogo de confirmación (.cal-confirm-icon.aviso y .cal-confirm-ok.aviso): el diálogo solo sabía verse de borrado — ícono y botón rojos — así que al reusarlo para avisar que una cita queda fuera del horario salía un basurero rojo sobre un texto que preguntaba si agendar igual. Rojo significa "esto destruye"; ámbar, "esto es inusual pero se puede". Primera entrada de bitácora de este archivo. */ /* ── CALENDAR PAGE WRAPPER ── */ .cal-page { display:flex; flex-direction:column; height:100%; overflow:hidden; background:#f5f5f7; } /* ── BARRA DE PROFESIONALES ── */ .cal-prof-bar { background:#fff; border-bottom:1px solid #e4e9f5; padding:4px 18px; display:flex; flex-direction:column; gap:0; flex-shrink:0; } .cal-filter-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:0.5px solid #f0f0f5; } .cal-filter-row:last-child { border-bottom:none; } .cal-filter-row-label { font-size:9px; font-weight:700; color:#9BA3C0; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; min-width:72px; } .cal-filter-search-wrap { display:flex; align-items:center; gap:5px; border:1px solid #e4e9f5; border-radius:20px; padding:4px 10px; flex-shrink:0; min-width:150px; background:#fff; } .cal-filter-search-wrap:focus-within { border-color:#9961FF; } .cal-filter-search-icon { font-size:11px; color:#9BA3C0; flex-shrink:0; } .cal-filter-search-input { border:none; outline:none; font-size:11px; font-family:'DM Sans',sans-serif; color:#374151; width:110px; background:transparent; } .cal-filter-chips { display:flex; gap:6px; flex:1; overflow-x:auto; scrollbar-width:none; align-items:center; } .cal-filter-chips::-webkit-scrollbar { display:none; } .cal-prof-chips { display:flex; flex-wrap:wrap; gap:6px; flex:1; } .prof-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:20px; border:1.5px solid #e4e9f5; background:#fff; font-size:12px; font-weight:500; color:#6b7194; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .15s; white-space:nowrap; } .prof-chip:hover { border-color:#9961FF; color:#9961FF; } .prof-chip-sel { background:#f5f0ff; border-color:#9961FF; color:#9961FF; font-weight:700; } .prof-chip-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } /* ── TOOLBAR ── */ .cal-toolbar { background:#fff; border-bottom:1px solid #e4e9f5; padding:9px 22px; display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; } .cal-nav-btn { width:26px; height:26px; border-radius:6px; border:1px solid #e4e9f5; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#6b7194; font-size:10px; transition:all .15s; } .cal-nav-btn:hover { background:#f5f3ff; border-color:#9961FF; color:#9961FF; } .cal-today-btn { padding:5px 13px; border-radius:7px; background:#9961FF; border:none; font-size:12px; font-weight:600; color:#fff; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .15s; } .cal-today-btn:hover { background:#7c3aed; } .cal-range { font-size:13px; font-weight:600; color:#383838; min-width:150px; } .cal-view-toggle { display:flex; border:1px solid #e4e9f5; border-radius:7px; overflow:hidden; } .cal-view-btn { padding:5px 15px; font-size:12px; font-weight:500; border:none; background:#fff; color:#6b7194; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .15s; border-right:1px solid #e4e9f5; } .cal-view-btn:last-child { border-right:none; } .cal-view-btn.active { background:#9961FF; color:#fff; font-weight:600; } .cal-actions { margin-left:auto; display:flex; gap:8px; } .cal-btn { padding:6px 13px; border-radius:8px; border:none; font-size:12px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:5px; transition:all .15s; } .cal-btn-primary { background:#9961FF; color:#fff; } .cal-btn-primary:hover { background:#7c3aed; } .cal-btn-secondary { background:#eef2ff; color:#4B5EA3; border:1px solid #C9D9FF; } .cal-btn-secondary:hover { background:#e0e7ff; } /* ── CALENDAR BODY ── */ .cal-body { flex:1; overflow:auto; position:relative; } /* ── WEEK VIEW ── */ .week-view { display:none; min-width:700px; } .week-view.active { display:block; } .week-header { display:grid; grid-template-columns:58px repeat(7,1fr); position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #e4e9f5; } .week-day-hd { padding:5px 4px; text-align:center; border-right:1px solid #f0f0f2; } .week-day-hd .wd-name { font-size:10px; font-weight:600; color:#9BA3C0; text-transform:uppercase; letter-spacing:.04em; } .week-day-hd .wd-num { font-size:15px; font-weight:700; color:#383838; display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin:2px auto 0; border-radius:50%; } .week-day-hd.today .wd-num { background:#9961FF; color:#fff; font-size:14px; } .week-gmt { display:flex; align-items:center; justify-content:center; padding:6px 4px; } .cal-zoom-btn { width:32px; height:32px; border-radius:7px; border:1px solid #e4e9f5; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#9961FF; font-size:15px; transition:all .15s; flex-shrink:0; } .cal-zoom-btn:hover { background:#f5f3ff; border-color:#9961FF; } .cal-zoom-btn.zoomed { background:#9961FF; color:#fff; border-color:#9961FF; } .week-grid { display:grid; grid-template-columns:58px repeat(7,1fr); } .time-label { font-size:10px; color:#9BA3C0; text-align:right; padding:0 7px 0 0; border-right:1px solid #f0f0f2; background:#f5f5f7; height:auto; line-height:1; transform:translateY(-50%); } .time-label-sub { font-size:8.5px; color:#C4C8D8; text-align:right; padding:0 7px 0 0; background:#f5f5f7; height:auto; line-height:1; transform:translateY(-50%); } .cal-zoom-btn.active { background:#E1DEFF; color:#9961FF; } .day-col { border-right:1px solid #f0f0f2; border-bottom:1px solid #f8f9fd; height:var(--hour-h,72px); position:relative; background:#f8f8fa; } .day-col.today-col { background:#eeeef2; } .day-col.weekend-col { background:#f3f3f5; } /* ── APPOINTMENT CARDS ── */ .appt { position:absolute; left:4px; right:4px; border-radius:10px; padding:6px 8px; cursor:pointer; overflow:hidden; z-index:2; border:1px solid rgba(150,175,255,0.3); box-shadow:0 4px 12px rgba(15,25,80,0.12),0 1px 4px rgba(15,25,80,0.08),inset 0 1px 0 rgba(180,205,255,0.1); transition:box-shadow .15s ease; } .appt:hover { box-shadow:0 8px 18px rgba(15,25,80,0.16),0 2px 6px rgba(15,25,80,0.1),inset 0 1px 0 rgba(180,205,255,0.12); z-index:5; } .appt.selected { box-shadow:0 0 0 2.5px #9961FF,0 4px 14px rgba(153,97,255,0.25); z-index:6; } /* [21-08-2026 (2)] Alto minimo: tres lineas + margenes necesitan ~62 px, y un bloque de 45 min solo da 54. Sin esto se cortan la segunda y la tercera linea. Vale para citas y para sesiones — una hora de 15 min tiene el mismo problema. */ .appt { min-height: 62px; } /* Los bloques de una hora o mas ya tienen alto de sobra: el minimo no les hace nada. */ /* ── SESION DE PROGRAMA [20-08-2026] ────────────────────────────────────── Tres lineas, como la cita: tipo + acciones · nombre · grupal y duracion. */ .appt-prog { display:flex; flex-direction:column; } .appt-prog .prog-l1 { display:flex; align-items:center; gap:6px; width:100%; } .appt-prog .prog-tipo { font-weight:700; font-size:12px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .appt-prog .prog-acc { display:flex; align-items:center; gap:4px; flex-shrink:0; } /* El ojo va EN la linea, no absoluto como en la cita: aqui comparte renglon con el $. */ .appt-prog .prog-acc .appt-action-btn { position:static; width:17px; height:17px; padding:0; border-radius:5px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.5); border:none; cursor:pointer; font-size:9px; opacity:.75; color:inherit; } .appt-prog .prog-acc .appt-action-btn:hover { opacity:1; background:rgba(255,255,255,0.85); } /* El nombre corta con "..." — un curso puede tener un titulo largo. */ .appt-prog .prog-nombre { font-size:11px; font-weight:500; opacity:.78; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; } .appt-prog .prog-l3 { display:flex; align-items:center; gap:5px; margin-top:4px; width:100%; } .appt-prog .prog-grupal { font-size:9.5px; font-weight:600; opacity:.85; } /* La duracion al extremo derecho, igual que en la cita. */ .appt-prog .prog-dur { margin-left:auto; flex-shrink:0; } /* El cupo hereda la FORMA de .appt-dur-label pero no su margin-left:auto: si no, dos elementos empujan a la derecha y el cupo queda flotando al medio. */ .appt-prog .appt-cupo-chip { margin-left:0; } .appt-check { position:absolute; top:4px; left:5px; z-index:14; width:16px; height:16px; border-radius:50%; background:#9961FF; color:#fff; font-size:7px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(153,97,255,0.5); } .appt-eye-btn { position:absolute; top:4px; right:5px; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.28); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:9px; opacity:0.55; z-index:13; transition:opacity .15s,background .15s; padding:0; } .appt:hover .appt-eye-btn { opacity:1; } .appt-eye-btn:hover { background:rgba(255,255,255,0.5); } .appt-del-btn { position:absolute; bottom:4px; right:5px; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.28); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:9px; opacity:0; z-index:13; transition:opacity .15s,background .15s; padding:0; color:inherit; } .appt:hover .appt-del-btn { opacity:0.7; } .appt-del-btn:hover { background:rgba(220,38,38,0.7); opacity:1; } .appt-name { font-size:11px; font-weight:700; color:#fff; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:'Poppins',sans-serif; position:relative; z-index:11; } .appt-service { font-size:10px; font-weight:500; color:rgba(255,255,255,0.78); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; position:relative; z-index:11; } .appt-meta { display:flex; align-items:center; gap:4px; margin-top:3px; font-size:9.5px; color:rgba(255,255,255,0.7); position:relative; z-index:11; flex-wrap:nowrap; overflow:hidden; } .appt-dur-label { margin-left:auto; font-size:9px; font-weight:700; background:rgba(255,255,255,0.18); border-radius:10px; padding:1px 6px; color:rgba(255,255,255,0.9); flex-shrink:0; white-space:nowrap; } .appt.presencial { background:#B8CEF0; border-color:rgba(120,160,230,0.4); } .appt.presencial .appt-name { color:#383838; } .appt.presencial .appt-service { color:#2a4a8a; } .appt.presencial .appt-meta { color:#2a4a8a; } .appt.presencial .appt-dur-label { background:rgba(26,47,94,0.1); color:#383838; } .appt.online { background:#C9C2F9; border-color:rgba(160,140,240,0.4); } .appt.online .appt-name { color:#383838; } .appt.online .appt-service { color:#4a2d9a; } .appt.online .appt-meta { color:#4a2d9a; } .appt.online .appt-dur-label { background:rgba(45,26,110,0.1); color:#383838; } .appt.disponible { background:#f8f8fa; border:1.5px solid #CEEBDA; box-shadow:0 4px 12px rgba(15,25,80,0.1),0 1px 4px rgba(15,25,80,0.07); } .appt.disponible .appt-name { color:#9BA3C0; } .appt.disponible .appt-meta { color:#b0b8cc; } .appt.disponible .appt-dur-label { background:rgba(155,163,192,0.12); color:#9BA3C0; } .appt.bloqueado { background:#F5BCBC; border-color:rgba(220,100,100,0.4); } .appt.bloqueado .appt-name { color:#383838; } .appt.bloqueado .appt-service { color:#8a2a2a; } .appt.bloqueado .appt-meta { color:#8a2a2a; } .appt.domicilio { background:#A1CED6; border-color:rgba(100,180,195,0.4); } .appt.domicilio .appt-name { color:#383838; } .appt.domicilio .appt-service { color:#1a5560; } .appt.domicilio .appt-meta { color:#1a5560; } .appt.domicilio .appt-dur-label { background:rgba(26,85,96,0.1); color:#1a5560; } /* ── BARRA DE SELECCIÓN ── */ .cal-select-bar { display:none; position:fixed; bottom:0; left:176px; right:0; z-index:150; background:#fff; border-top:2px solid #9961FF; padding:10px 22px; align-items:center; justify-content:space-between; box-shadow:0 -4px 24px rgba(153,97,255,0.15); gap:14px; } .cal-select-bar.visible { display:flex; } .cal-select-info { display:flex; align-items:baseline; gap:10px; min-width:0; } .cal-select-count { font-size:13px; font-weight:700; color:#9961FF; white-space:nowrap; font-family:'Poppins',sans-serif; } .cal-select-names { font-size:12px; color:#6b7194; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-select-actions { display:flex; gap:10px; flex-shrink:0; } .cal-select-clear { padding:7px 16px; border-radius:8px; border:1.5px solid #e4e9f5; background:#fff; font-size:12px; font-weight:500; cursor:pointer; color:#6b7194; font-family:'DM Sans',sans-serif; transition:all .15s; } .cal-select-clear:hover { border-color:#ef4444; color:#ef4444; } .cal-select-send { padding:7px 18px; border-radius:8px; border:none; background:linear-gradient(90deg,#9961FF,#5b8dee); color:#fff; font-size:12px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:7px; transition:opacity .15s; } .cal-select-send:hover { opacity:.88; } /* ── DAY VIEW ── */ .day-view { display:none; min-width:400px; } .day-view.active { display:block; } .day-header-single { display:grid; grid-template-columns:58px 1fr; position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #e4e9f5; } .day-hd-cell { padding:5px 10px; text-align:center; } .day-hd-cell .wd-name { font-size:10px; font-weight:600; color:#9BA3C0; text-transform:uppercase; letter-spacing:.04em; } .day-hd-cell .wd-num { font-size:15px; font-weight:700; color:#383838; margin-top:2px; } .day-hd-cell.today .wd-num { color:#9961FF; } .day-grid { display:grid; grid-template-columns:58px 1fr; } /* ── MONTH VIEW ── */ .month-view { display:none; } .month-view.active { display:block; } .month-day-hd { padding:8px; text-align:center; font-size:11px; font-weight:600; color:#9BA3C0; text-transform:uppercase; border-right:1px solid #f0f0f2; border-bottom:1px solid #e4e9f5; background:#fff; } .month-grid { display:grid; grid-template-columns:repeat(7,1fr); } .month-cell { min-height:110px; border-right:1px solid #f0f0f2; border-bottom:1px solid #f0f0f2; padding:5px 5px 4px; background:#fff; } .month-cell.other-month { background:#f7f7f8; } .month-cell.today-month { background:#f9f9fa; } .month-num { font-size:12px; font-weight:600; color:#6b7194; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; margin-bottom:3px; } .month-num.today { background:#9961FF; color:#fff; } .month-num.other { color:#d1d5db; } .month-dot { font-size:10px; padding:1px 5px; border-radius:4px; margin-bottom:1px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; } .month-dot.presencial { background:#eef4ff; color:#4B5EA3; } .month-dot.online { background:#f3f0ff; color:#7c3aed; } .month-dot.disponible { background:#f0fdf4; color:#16a34a; } .month-dot.more { background:#f5f5f5; color:#6b7194; } /* ── LEGEND ── */ .cal-legend { background:#fff; border-top:1px solid #e4e9f5; padding:7px 22px; display:flex; align-items:center; gap:18px; font-size:11px; color:#6b7194; flex-shrink:0; flex-wrap:wrap; } .legend-item { display:flex; align-items:center; gap:5px; } .legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } /* ── NOW LINE ── */ .now-line { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,#9961FF,#ef4444); z-index:10; pointer-events:none; box-shadow:0 0 6px rgba(239,68,68,.4); } .now-line::before { content:''; position:absolute; left:-4px; top:-4px; width:10px; height:10px; border-radius:50%; background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.6); } /* ── MODAL NUEVA CITA ── */ .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:200; align-items:center; justify-content:center; } .modal-overlay.open { display:flex; } .modal { background:#fff; border-radius:14px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; margin:16px; box-shadow:0 20px 60px rgba(0,0,0,.15); } .modal-header { padding:16px 20px; border-bottom:1px solid #f0f0f2; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:#fff; border-radius:14px 14px 0 0; } .modal-title { font-size:14px; font-weight:700; color:#383838; } .modal-close { background:none; border:none; cursor:pointer; color:#9BA3C0; font-size:16px; } .modal-body { padding:20px; } .form-group { margin-bottom:14px; } .form-group label { display:block; font-size:11px; font-weight:700; color:#6b7194; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; } .form-group input, .form-group select, .form-group textarea { width:100%; border:1px solid #e4e9f5; border-radius:8px; padding:8px 12px; font-size:13px; font-family:'DM Sans',sans-serif; color:#383838; outline:none; transition:border-color .2s; } .form-group input:focus, .form-group select:focus { border-color:#9961FF; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .modal-footer { padding:14px 20px; border-top:1px solid #f0f0f2; display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:0; background:#fff; border-radius:0 0 14px 14px; } .btn-cancel { padding:9px 20px; border-radius:10px; border:1.5px solid #e4e9f5; background:#fff; font-size:13px; font-weight:500; cursor:pointer; color:#6b7194; font-family:'DM Sans',sans-serif; transition:all .15s; } .btn-cancel:hover { border-color:#9961FF; color:#9961FF; } .btn-save { padding:8px 20px; border-radius:8px; border:none; background:#9961FF; color:#fff; font-size:13px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; } .btn-save:hover { background:#7c3aed; } /* ── EXCEPTION PANEL ── */ .exc-panel { display:none; position:fixed; right:0; top:40px; height:calc(100vh - 40px); width:340px; background:#fff; border-left:1px solid #e4e9f5; z-index:150; box-shadow:-6px 0 24px rgba(0,0,0,.1); flex-direction:column; } .exc-panel.open { display:flex; } .exc-panel-header { padding:16px 20px; border-bottom:1px solid #f0f0f2; display:flex; justify-content:space-between; align-items:center; } .exc-panel-title { font-size:14px; font-weight:700; color:#383838; } .exc-panel-body { flex:1; overflow-y:auto; padding:16px 20px; } .exc-filter-zone { padding:10px 20px; border-bottom:1px solid #f0f0f2; background:#f8f9ff; } .exc-filter-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#9BA3C0; margin-bottom:7px; } .exc-chips-row { display:flex; flex-wrap:wrap; gap:5px; } .exc-filter-chip { font-size:11px; font-weight:500; padding:3px 10px; border-radius:20px; border:1px solid #e4e9f5; color:#9BA3C0; background:#fff; cursor:pointer; line-height:1.6; transition:all .15s; } .exc-filter-chip.on { background:#ef4444; border-color:#ef4444; color:#fff; } .exc-item { background:#fef2f2; border:1px solid #fecaca; border-radius:10px; padding:12px; margin-bottom:10px; position:relative; } .exc-item-date { font-size:12px; font-weight:700; color:#dc2626; margin-bottom:2px; } .exc-item-reason { font-size:11px; color:#7D84C1; } .exc-item-type { font-size:10px; font-weight:600; background:#fecaca; color:#dc2626; padding:2px 7px; border-radius:10px; display:inline-block; margin-top:4px; } .exc-del { position:absolute; top:10px; right:10px; background:none; border:none; color:#ef4444; cursor:pointer; font-size:12px; } .exc-add-form { background:#f8f9ff; border:1px solid #e4e9f5; border-radius:10px; padding:14px; margin-top:8px; } .exc-add-title { font-size:12px; font-weight:700; color:#383838; margin-bottom:10px; } /* ── MODAL ENVIAR MENSAJE ── */ .msg-overlay { display:none; position:fixed; inset:0; background:rgba(30,25,80,0.5); z-index:400; align-items:center; justify-content:center; } .msg-overlay.open { display:flex; } .msg-modal { background:#fff; border-radius:18px; width:100%; max-width:520px; margin:16px; box-shadow:0 24px 64px rgba(10,0,60,0.22); overflow:hidden; position:relative; } .msg-header { background:linear-gradient(135deg,#9961FF,#5b8dee); padding:18px 24px; display:flex; align-items:center; justify-content:space-between; } .msg-header-title { font-size:16px; font-weight:700; color:#fff; font-family:'Poppins',sans-serif; } .msg-header-sub { font-size:11px; color:rgba(255,255,255,.75); margin-top:2px; } .msg-close { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.2); border:none; color:#fff; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .msg-close:hover { background:rgba(255,255,255,.35); } .msg-recipients { display:flex; flex-wrap:wrap; gap:6px; padding:14px 24px 0; } .msg-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; background:#f5f3ff; border:1px solid #e0d6ff; font-size:11px; font-weight:600; color:#7c3aed; } .msg-channels { display:flex; gap:8px; padding:14px 24px; border-bottom:1px solid #f0f0f2; } .msg-channel-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 8px; border-radius:12px; border:1.5px solid #e4e9f5; background:#fff; cursor:pointer; font-size:11px; font-weight:600; color:#6b7194; font-family:'DM Sans',sans-serif; transition:all .15s; } .msg-channel-btn i { font-size:18px; } .msg-channel-btn:hover { border-color:#9961FF; color:#9961FF; } .msg-channel-btn.active { border-color:#9961FF; background:#f5f3ff; color:#9961FF; } .msg-channel-btn#ch-whatsapp.active { border-color:#25D366; background:#f0fdf4; color:#16a34a; } .msg-channel-btn#ch-whatsapp.active i { color:#25D366; } .msg-channel-btn#ch-email.active { border-color:#5b8dee; background:#eef4ff; color:#3a5cbf; } .msg-channel-btn#ch-email.active i { color:#5b8dee; } .msg-body { padding:16px 24px; } .msg-label { font-size:11px; font-weight:700; color:#6b7194; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:5px; } .msg-textarea { width:100%; border:1.5px solid #e4e9f5; border-radius:10px; padding:9px 12px; font-size:13px; font-family:'DM Sans',sans-serif; color:#383838; outline:none; resize:vertical; transition:border-color .2s; } .msg-textarea:focus { border-color:#9961FF; } .msg-footer { padding:14px 24px; border-top:1px solid #f0f0f2; display:flex; justify-content:flex-end; gap:10px; } .msg-btn-cancel { padding:8px 18px; border-radius:9px; border:1.5px solid #e4e9f5; background:#fff; font-size:13px; font-weight:500; cursor:pointer; color:#6b7194; font-family:'DM Sans',sans-serif; } .msg-btn-send { padding:8px 20px; border-radius:9px; border:none; background:linear-gradient(90deg,#9961FF,#5b8dee); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:8px; transition:opacity .15s; } .msg-btn-send:hover { opacity:.88; } .msg-success { display:none; position:absolute; inset:0; background:#fff; border-radius:18px; flex-direction:column; align-items:center; justify-content:center; gap:10px; } .msg-success.visible { display:flex; } .msg-success-icon { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#9961FF,#5b8dee); display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; box-shadow:0 8px 24px rgba(153,97,255,0.35); } .msg-success-title { font-size:18px; font-weight:700; color:#383838; font-family:'Poppins',sans-serif; } .msg-success-sub { font-size:12px; color:#9BA3C0; text-align:center; padding:0 24px; } /* ── BLOQUES MASIVOS ── */ .bm-overlay { display:none; position:fixed; inset:0; background:rgba(30,25,80,0.55); z-index:300; align-items:center; justify-content:center; } .bm-overlay.open { display:flex; } .bm-modal { background:#fff; border-radius:18px; width:100%; max-width:900px; max-height:92vh; overflow-y:auto; margin:16px; box-shadow:0 24px 64px rgba(10,0,60,0.22); } .bm-header { background:linear-gradient(135deg,#9961FF 0%,#5b8dee 100%); border-radius:18px 18px 0 0; padding:20px 28px 18px; position:relative; } .bm-header-title { font-size:18px; font-weight:700; color:#fff; font-family:'Poppins',sans-serif; } .bm-header-sub { font-size:12px; color:rgba(255,255,255,.75); margin-top:3px; } .bm-close { position:absolute; top:16px; right:20px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.2); border:none; color:#fff; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .bm-close:hover { background:rgba(255,255,255,.35); } .bm-steps { display:flex; align-items:center; padding:20px 28px 0; gap:0; position:relative; } .bm-step { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; cursor:pointer; } .bm-step:not(:last-child)::after { content:''; position:absolute; top:14px; left:50%; right:-50%; height:2px; background:#e4e9f5; z-index:0; } .bm-step.done:not(:last-child)::after { background:#9961FF; } .bm-step-circle { width:28px; height:28px; border-radius:50%; background:#e4e9f5; color:#9BA3C0; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:1; position:relative; font-family:'Poppins',sans-serif; transition:all .2s; } .bm-step.done .bm-step-circle { background:#9961FF; color:#fff; } .bm-step.active .bm-step-circle { background:#9961FF; color:#fff; box-shadow:0 0 0 4px rgba(153,97,255,.2); } .bm-step-label { font-size:10px; font-weight:600; color:#9BA3C0; margin-top:5px; text-align:center; font-family:'Poppins',sans-serif; } .bm-step.active .bm-step-label,.bm-step.done .bm-step-label { color:#9961FF; } .bm-body { padding:24px 28px; min-height:360px; } .bm-section-title { font-size:15px; font-weight:700; color:#383838; margin-bottom:4px; font-family:'Poppins',sans-serif; } .bm-section-sub { font-size:11.5px; color:#9BA3C0; margin-bottom:16px; } .bm-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .bm-chip { padding:7px 16px; border-radius:20px; border:1.5px solid #e4e9f5; background:#fff; font-size:12.5px; font-weight:500; color:#6b7194; cursor:pointer; transition:all .15s; font-family:'DM Sans',sans-serif; display:flex; flex-direction:column; align-items:flex-start; gap:2px; box-shadow:0 4px 12px rgba(15,25,80,0.12),0 1px 4px rgba(15,25,80,0.08),inset 0 1px 0 rgba(180,205,255,0.1); } .bm-chip:hover { border-color:#9961FF; color:#9961FF; box-shadow:0 8px 18px rgba(15,25,80,0.16),0 2px 6px rgba(15,25,80,0.1); } .bm-chip-name { font-size:12.5px; font-weight:600; color:#383838; display:block; } .bm-chip-dur { font-size:10px; color:#383838; display:block; font-weight:400; opacity:0.7; } .bm-chip-weeks { font-size:9.5px; color:#383838; display:block; font-weight:500; margin-top:1px; letter-spacing:.02em; } .bm-date-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:8px; } .bm-field label { font-size:11px; font-weight:700; color:#6b7194; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:6px; } .bm-field input { width:100%; border:1.5px solid #e4e9f5; border-radius:10px; padding:10px 14px; font-size:13px; font-family:'DM Sans',sans-serif; color:#383838; outline:none; transition:border-color .2s; } .bm-field input:focus { border-color:#9961FF; } .bm-time-row { display:grid; grid-template-columns:160px 160px 1fr; gap:16px; align-items:start; } .bm-slots-preview { background:#f5f3ff; border-radius:10px; padding:12px 14px; } .bm-slots-preview-label { font-size:10px; font-weight:700; color:#7D84C1; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; } .bm-slots { display:flex; flex-wrap:wrap; gap:6px; } .bm-slot { font-size:11px; font-weight:600; color:#9961FF; background:rgba(153,97,255,.1); border-radius:20px; padding:3px 10px; } .bm-summary { background:#f8f8fa; border-radius:12px; padding:18px 20px; } .bm-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; } .bm-summary-item label { font-size:11px; font-weight:700; color:#9961FF; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:2px; } .bm-summary-item span { font-size:13px; font-weight:600; color:#383838; } .bm-footer { padding:16px 28px; border-top:1px solid #f0f0f2; display:flex; justify-content:space-between; align-items:center; position:sticky; bottom:0; background:#fff; border-radius:0 0 18px 18px; } .bm-btn-cancel { padding:9px 20px; border-radius:10px; border:1.5px solid #e4e9f5; background:#fff; font-size:13px; font-weight:500; cursor:pointer; color:#6b7194; font-family:'DM Sans',sans-serif; } .bm-btn-next { padding:9px 22px; border-radius:10px; border:none; background:linear-gradient(90deg,#9961FF,#5b8dee); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:7px; transition:opacity .15s; } .bm-btn-next:hover { opacity:.9; } .bm-btn-back { padding:9px 18px; border-radius:10px; border:1.5px solid #e4e9f5; background:#fff; font-size:13px; font-weight:500; cursor:pointer; color:#6b7194; font-family:'DM Sans',sans-serif; display:inline-flex; align-items:center; } /* ── BM MINI CALENDAR (step 3) ── */ .bm-fc-wrap { background:#f8f8fa; border-radius:10px; padding:10px 12px; margin-top:10px; max-width:320px; } .bm-fc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .bm-fc-month { font-size:11px; font-weight:700; color:#383838; font-family:'Poppins',sans-serif; } .bm-fc-nav { background:none; border:1px solid #e4e9f5; border-radius:5px; width:20px; height:20px; cursor:pointer; font-size:12px; color:#6b7194; display:flex; align-items:center; justify-content:center; transition:all .15s; } .bm-fc-nav:hover { background:#f0ebff; border-color:#9961FF; color:#9961FF; } .bm-fc-grid-hd { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; } .bm-fc-grid-hd span { text-align:center; font-size:8px; font-weight:700; color:#9BA3C0; text-transform:uppercase; padding:2px 0; } .bm-fc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .bm-fc-day { width:34px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:10px; font-weight:500; cursor:pointer; color:#383838; background:#fff; border:1.5px solid transparent; transition:all .15s; } .bm-fc-day:hover { border-color:#9961FF; color:#9961FF; } .bm-fc-day.bm-fc-scheduled { background:#9961FF; color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(153,97,255,.35); border-color:transparent; } .bm-fc-day.bm-fc-scheduled:hover { background:#7c3aed; } .bm-fc-day.bm-fc-today { border-color:#9961FF; color:#9961FF; font-weight:700; } .bm-fc-day.bm-fc-empty { background:transparent; cursor:default; border-color:transparent; } .bm-fc-legend { display:flex; gap:12px; margin-top:8px; } .bm-fc-leg-item { display:flex; align-items:center; gap:4px; font-size:10px; color:#6b7194; } .bm-fc-leg-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; } /* [30-09-2026] Sesiones de varios días: el resto de los días de cada una, y la nota del paso 4. */ .bm-fc-day.bm-fc-cont { background:#efe7ff; color:#7c3aed; border-color:#ddd0ff; font-weight:600; } .bm-fc-day.bm-fc-cont:hover { border-color:#c9b6ff; color:#7c3aed; } .bm-fc-leg-dot.bm-fc-leg-cont { background:#efe7ff; border:1px solid #c9b6ff; } .bm-dias-nota { background:#f5f3ff; border-radius:10px; padding:12px 14px; font-size:12px; line-height:1.55; color:#6b7194; } .bm-dias-nota b { color:#5b21b6; font-weight:700; } /* ── CUSTOM DATEPICKER ── */ .bm-dp-wrap { position:relative; } .bm-dp-input { display:flex; align-items:center; gap:10px; border:1.5px solid #e4e9f5; border-radius:10px; padding:10px 14px; cursor:pointer; background:#fff; font-size:13px; font-family:'DM Sans',sans-serif; transition:border-color .2s; } .bm-dp-input:hover { border-color:#9961FF; } .bm-dp-input.bm-dp-active { border-color:#9961FF; box-shadow:0 0 0 3px rgba(153,97,255,.1); } .bm-dp-disabled { cursor:default; background:#f5f5f7; } .bm-dp-disabled:hover { border-color:#e4e9f5; } .bm-dp-dropdown { position:absolute; top:calc(100% + 8px); left:0; background:#fff; border-radius:14px; border:1px solid #e4e9f5; box-shadow:0 8px 32px rgba(15,25,80,0.14); padding:14px; z-index:500; min-width:280px; } .bm-dp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .bm-dp-month-label { font-size:13px; font-weight:700; color:#383838; font-family:'Poppins',sans-serif; } .bm-dp-nav { width:28px; height:28px; border-radius:8px; border:1px solid #e4e9f5; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; color:#6b7194; transition:all .15s; line-height:1; } .bm-dp-nav:hover { background:#f5f3ff; border-color:#9961FF; color:#9961FF; } .bm-dp-weekdays { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; } .bm-dp-weekdays span { text-align:center; font-size:10px; font-weight:700; color:#9BA3C0; text-transform:uppercase; padding:3px 0; } .bm-dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .bm-dp-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:12px; font-weight:500; cursor:pointer; color:#383838; transition:all .15s; border:1.5px solid transparent; } .bm-dp-day:hover { background:#f5f3ff; color:#9961FF; border-color:#e0d6ff; } .bm-dp-day.bm-dp-today { border-color:#9961FF; color:#9961FF; font-weight:700; } .bm-dp-day.bm-dp-selected { background:#9961FF; color:#fff; font-weight:700; border-color:#9961FF; box-shadow:0 2px 8px rgba(153,97,255,.4); } .bm-dp-day.bm-dp-empty { cursor:default; } /* ── MINI CALENDARIO — MODAL NUEVA HORA ── */ .appt-modal-cal { background:#f8f8fa; border:1.5px solid #e4e9f5; border-radius:12px; padding:12px; } .appt-modal-cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .appt-modal-cal-header span { font-size:12px; font-weight:700; color:#383838; font-family:'Poppins',sans-serif; } .appt-cal-nav { background:none; border:1px solid #e4e9f5; border-radius:6px; width:24px; height:24px; cursor:pointer; font-size:16px; color:#6b7194; display:flex; align-items:center; justify-content:center; transition:all .15s; line-height:1; } .appt-cal-nav:hover { background:#f0ebff; border-color:#9961FF; color:#9961FF; } .appt-modal-cal-wdays { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; } .appt-modal-cal-wdays span { text-align:center; font-size:9px; font-weight:700; color:#9BA3C0; text-transform:uppercase; padding:2px 0; } .appt-modal-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .appt-cal-day { height:30px; display:flex; align-items:center; justify-content:center; border-radius:7px; font-size:11.5px; font-weight:500; cursor:pointer; color:#383838; transition:all .15s; border:1.5px solid transparent; } .appt-cal-day:hover { background:#f0ebff; color:#9961FF; border-color:#e0d6ff; } .appt-cal-day.appt-cal-today { border-color:#9961FF; color:#9961FF; font-weight:700; } .appt-cal-day.appt-cal-selected { background:#9961FF; color:#fff; font-weight:700; border-color:#9961FF; box-shadow:0 2px 8px rgba(153,97,255,.4); } .appt-cal-day.appt-cal-past { color:#d1d5db; cursor:default; } .appt-cal-day.appt-cal-past:hover { background:transparent; border-color:transparent; color:#d1d5db; } .appt-cal-day.appt-cal-empty { cursor:default; } /* ── CHIPS DE SERVICIO ── */ .svc-chips-wrap { display:flex; flex-wrap:wrap; gap:9px; margin-top:4px; } .svc-chip { display:flex; flex-direction:column; gap:3px; padding:10px 16px; border-radius:12px; border:1.5px solid #ddd8fc; cursor:pointer; transition:transform .1s, box-shadow .1s; min-width:110px; } .svc-chip:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.10); } .svc-chip-sel { box-shadow:0 2px 8px rgba(0,0,0,.12); } .svc-chip-name { font-size:12px; font-weight:700; color:#374151; font-family:'Poppins',sans-serif; } .svc-chip-dur { font-size:11px; color:#6b7194; font-family:'DM Sans',sans-serif; } /* ── SLOTS DE HORA ── */ .appt-slots-wrap { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; } .appt-slot-btn { padding:6px 14px; border-radius:20px; border:1.5px solid #e4e9f5; background:#fff; font-size:12px; font-weight:600; color:#6b7194; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .15s; } .appt-slot-btn:hover { border-color:#9961FF; color:#9961FF; background:#f5f3ff; } .appt-slot-btn.active { background:#9961FF; color:#fff; border-color:#9961FF; box-shadow:0 2px 8px rgba(153,97,255,.35); } /* [17-09-2026] La hora que no está disponible: se muestra, tachada, y se puede elegir igual (entonces se pide el motivo y queda como excepción). Esconderla dejaba a quien agenda sin saber si estaba ocupada, bloqueada o fuera de horario. */ .appt-slot-btn.no-disponible { color:#9BA3C0; background:#f6f7fb; border-color:#eef0f6; text-decoration:line-through; } .appt-slot-btn.no-disponible:hover { border-color:#C98A16; color:#854F0B; background:#FAEEDA; text-decoration:none; } .appt-slot-btn.no-disponible.active { background:#FAEEDA; border-color:#C98A16; color:#854F0B; text-decoration:none; box-shadow:0 2px 8px rgba(201,138,22,.3); } /* El motivo por el que esa hora no está, bajo la lista de horas. */ #appt-slot-aviso { display:none; margin-top:8px; background:#FAEEDA; color:#854F0B; border-radius:8px; padding:8px 11px; font-size:12px; font-weight:600; line-height:1.35; } /* ── MODAL CONFIRMAR ELIMINAR ── */ .cal-confirm-overlay { display:none; position:fixed; inset:0; background:rgba(15,20,60,.45); backdrop-filter:blur(4px); z-index:9999; align-items:center; justify-content:center; } .cal-confirm-overlay.open { display:flex; } .cal-confirm-box { background:#fff; border-radius:18px; padding:32px 28px 24px; width:320px; box-shadow:0 20px 60px rgba(10,20,80,.22); text-align:center; animation:calConfirmIn .2s ease; } @keyframes calConfirmIn { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} } .cal-confirm-icon { width:52px; height:52px; border-radius:50%; background:#fef2f2; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:20px; color:#ef4444; } .cal-confirm-title { font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#1a1a2e; margin-bottom:8px; } .cal-confirm-msg { font-size:13px; color:#6b7194; line-height:1.5; margin-bottom:22px; white-space:pre-line; } .cal-confirm-btns { display:flex; gap:10px; justify-content:center; } .cal-confirm-cancel { flex:1; padding:10px; border-radius:10px; border:1.5px solid #e4e9f5; background:#fff; font-size:13px; font-weight:600; color:#6b7194; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .15s; } .cal-confirm-cancel:hover { border-color:#9961FF; color:#9961FF; } .cal-confirm-ok { flex:1; padding:10px; border-radius:10px; border:none; background:#ef4444; font-size:13px; font-weight:600; color:#fff; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .15s; } .cal-confirm-ok:hover { background:#dc2626; } /* [31-07] Variante AVISO: el mismo diálogo cuando no se está destruyendo nada, sino pidiendo confirmar algo inusual (una cita fuera del horario del recurso). Rojo significa "esto borra"; ámbar significa "esto es raro pero se puede". */ .cal-confirm-icon.aviso { background:#fef7e7; color:#d99a1f; } .cal-confirm-ok.aviso { background:#e8a317; } .cal-confirm-ok.aviso:hover { background:#c98a12; } @media(max-width:768px) { .cal-actions { display:none; } } /* ═══════════════════════════════════════════ MEJORAS — TARJETA + EXC PANEL + STATUS ═══════════════════════════════════════════ */ /* ── BARRA DE ACCIONES (fix superposición) ── */ .appt-actions { position: absolute; top: 5px; right: 5px; /* [19-08-2026 (2)] 5px: con tres iconos, 3px los dejaba pegados. */ display: flex; align-items: center; gap: 5px; z-index: 13; } .appt-action-btn { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.28); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9px; opacity: 0; transition: opacity .15s, background .15s; padding: 0; color: inherit; } .appt:hover .appt-action-btn { opacity: 1; } .appt-action-btn:hover { background: rgba(255,255,255,0.55); } .appt-action-btn.del-btn:hover { background: rgba(220,38,38,0.75); } .appt-action-btn.eye-btn { opacity: 0.6; } .appt:hover .appt-action-btn.eye-btn { opacity: 1; } /* ── CITA PASADA ── */ .appt.appt-past { opacity: 0.58; cursor: default !important; } .appt.appt-past .appt-actions .del-btn { display: none; } /* ── STATUS CHIP DROPDOWN ── */ .cal-status-chip { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,0.07); border-radius: 10px; padding: 1px 6px; font-size: 9.5px; font-weight: 600; cursor: pointer; user-select: none; border: none; font-family: 'DM Sans', sans-serif; transition: background .12s; min-width: 0; flex-shrink: 1; overflow: hidden; } .cal-status-chip:hover { background: rgba(0,0,0,0.14); } .cal-status-chip.open svg { transform: rotate(180deg); } .cal-status-chip svg { flex-shrink: 0; transition: transform .15s; } .cal-status-dropdown { display: none; flex-direction: column; position: fixed; min-width: 145px; z-index: 9999; background: #fff; border: 0.5px solid rgba(153,97,255,0.25); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.16); overflow: hidden; } .cal-status-dropdown.open { display: flex; } .cal-status-option { font-size: 11px; font-weight: 500; padding: 7px 12px; cursor: pointer; color: #374151; transition: background .12s; white-space: nowrap; display: flex; align-items: center; gap: 7px; } .cal-status-option:hover { background: #f5f0ff; color: #9961FF; } .cal-status-option.active { color: #9961FF; font-weight: 600; background: #f0ebff; } .cal-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* ── EXC PANEL — CUSTOM SELECT ── */ .exc-custom-select-wrap { position: relative; } .exc-custom-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #e4e9f5; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; color: #383838; cursor: pointer; background: #fff; transition: border-color .15s; user-select: none; } .exc-custom-select-trigger:hover { border-color: #9961FF; } .exc-custom-select-trigger.open { border-color: #9961FF; box-shadow: 0 0 0 3px rgba(153,97,255,.1); } .exc-custom-select-trigger.open svg { transform: rotate(180deg); } .exc-custom-select-trigger svg { flex-shrink: 0; transition: transform .15s; } .exc-custom-dropdown { display: none; flex-direction: column; position: fixed; z-index: 9999; background: #fff; border: 0.5px solid rgba(153,97,255,0.25); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.15); overflow: hidden; } .exc-custom-dropdown.open { display: flex; } .exc-custom-option { font-size: 12px; font-weight: 500; padding: 8px 14px; cursor: pointer; color: #374151; transition: background .12s; white-space: nowrap; } .exc-custom-option:hover { background: #f5f0ff; color: #9961FF; } .exc-custom-option.active { color: #9961FF; font-weight: 600; background: #f0ebff; } /* ── EXC PANEL — DATEPICKER ── */ .exc-dp-wrap { position: relative; } .exc-dp-trigger { display: flex; align-items: center; gap: 8px; border: 1px solid #e4e9f5; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; color: #383838; cursor: pointer; background: #fff; transition: border-color .15s; user-select: none; } .exc-dp-trigger:hover { border-color: #9961FF; } .exc-dp-trigger.open { border-color: #9961FF; box-shadow: 0 0 0 3px rgba(153,97,255,.1); } .exc-dp-trigger-ico { color: #9961FF; font-size: 13px; flex-shrink: 0; } .exc-dp-label { flex: 1; white-space: nowrap; } .exc-dp-chevron { color: #9BA3C0; font-size: 10px; flex-shrink: 0; transition: transform .15s; } .exc-dp-trigger.open .exc-dp-chevron { transform: rotate(180deg); } .exc-dp-dropdown { display: none; position: fixed; z-index: 9999; background: #fff; border-radius: 14px; border: 1px solid #e4e9f5; box-shadow: 0 8px 32px rgba(15,25,80,0.14); padding: 14px; min-width: 255px; } .exc-dp-dropdown.open { display: block; } .exc-dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .exc-dp-month-label { font-size: 13px; font-weight: 700; color: #383838; font-family: 'Poppins', sans-serif; } .exc-dp-nav { width: 26px; height: 26px; border-radius: 7px; border: 1px solid #e4e9f5; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: #6b7194; transition: all .15s; line-height: 1; } .exc-dp-nav:hover { background: #f5f3ff; border-color: #9961FF; color: #9961FF; } .exc-dp-weekdays { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 4px; } .exc-dp-weekdays span { text-align: center; font-size: 9px; font-weight: 700; color: #9BA3C0; text-transform: uppercase; padding: 2px 0; } .exc-dp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; } .exc-dp-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 11.5px; font-weight: 500; cursor: pointer; color: #383838; transition: all .15s; border: 1.5px solid transparent; } .exc-dp-day:hover { background: #f0ebff; color: #9961FF; border-color: #e0d6ff; } .exc-dp-today { border-color: #9961FF; color: #9961FF; font-weight: 700; } .exc-dp-selected { background: #9961FF !important; color: #fff !important; font-weight: 700; border-color: #9961FF !important; box-shadow: 0 2px 8px rgba(153,97,255,.4); } .exc-dp-empty { cursor: default; } /* ── EXC PANEL — TIMEPICKER ── */ .exc-tp-wrap { position: relative; } .exc-tp-trigger { display: flex; align-items: center; gap: 8px; border: 1px solid #e4e9f5; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: 'DM Sans', sans-serif; color: #383838; cursor: pointer; background: #fff; transition: border-color .15s; user-select: none; } .exc-tp-trigger:hover { border-color: #9961FF; } .exc-tp-trigger.open { border-color: #9961FF; box-shadow: 0 0 0 3px rgba(153,97,255,.1); } .exc-tp-ico { color: #9961FF; font-size: 13px; flex-shrink: 0; } .exc-tp-dropdown { display: none; position: fixed; z-index: 9999; background: #fff; border-radius: 12px; border: 1px solid #e4e9f5; box-shadow: 0 8px 32px rgba(15,25,80,0.14); padding: 10px; width: fit-content; } .exc-tp-dropdown.open { display: flex; gap: 6px; } .exc-tp-col { width: 42px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; } .exc-tp-col-label { text-align: center; width: 100%; font-size: 9px; font-weight: 700; color: #9BA3C0; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .exc-tp-scroll { max-height: 160px; overflow-y: auto; scrollbar-width: none; width: 100%; } .exc-tp-scroll::-webkit-scrollbar { display: none; } .exc-tp-item { display: flex; justify-content: center; align-items: center; width: 100%; font-size: 12px; font-weight: 500; color: #374151; padding: 5px 4px; border-radius: 7px; cursor: pointer; transition: all .12s; } .exc-tp-item:hover { background: #f5f0ff; color: #9961FF; } .exc-tp-item.active { background: #9961FF; color: #fff; font-weight: 700; } .cal-status-chip-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:72px; } /* Día que el profesional NO atiende, en el paso 3 de Bloques masivos. [13-08-2026] Es solo REFERENCIA: el día se puede marcar igual, porque un programa puede dictarse fuera del horario habitual. Por eso se raya en vez de apagarse: apagado se lee como "no disponible" y acá sí lo está. */ .bm-fc-day.bm-fc-off{ color:#b9bfd0; background:repeating-linear-gradient(45deg,transparent,transparent 3px,#f1f3f9 3px,#f1f3f9 6px) } /* Si además está elegido, manda la selección: el usuario ya decidió. */ .bm-fc-day.bm-fc-off.bm-fc-scheduled{color:#fff;background:#9961FF} /* Día con BLOQUEO del profesional en el paso 3 de Bloques masivos. [14-08-2026] Distinto de .bm-fc-off: aquel sale de la regla semanal del horario, este de una excepción concreta (agenda_exceptions) con fecha y motivo. Tampoco impide agendar — se avisa y se decide — pero pesa más, así que el color manda sobre el rayado cuando coinciden. Mismo rojo que el bloqueo del calendario grande. */ .bm-fc-day.bm-fc-blocked{ color:#c0392b; background:#fde8e8; border-color:#f5b5b5 } .bm-fc-day.bm-fc-blocked:hover{color:#c0392b;border-color:#e08585} /* Bloqueado Y sin atención: el color del bloqueo sobre el rayado, que se conserva. */ .bm-fc-day.bm-fc-off.bm-fc-blocked{ color:#c0392b; background:repeating-linear-gradient(45deg,#fde8e8,#fde8e8 3px,#f7d5d5 3px,#f7d5d5 6px); border-color:#f5b5b5 } /* Si además está elegido manda la selección, igual que con .bm-fc-off: el usuario ya decidió. El borde rojo queda como advertencia. */ .bm-fc-day.bm-fc-scheduled.bm-fc-blocked, .bm-fc-day.bm-fc-off.bm-fc-scheduled.bm-fc-blocked{ color:#fff; background:#9961FF; border-color:#c0392b } /* ── PANEL DE TALLERES: estado de cada programa [14-08-2026] ───────────────── Un programa está configurado para este recurso si ya tiene sesiones en la agenda. Se marca con un borde y el conteo, sin tocar el color de fondo: ese color identifica al programa y es el mismo de su tarjeta en el calendario. */ .bm-chip { position:relative; } .bm-chip.bm-chip-done { border-left-width:4px; border-left-color:#1d9e75; } .bm-chip-badge { display:inline-flex; align-items:center; gap:4px; margin-top:4px; background:rgba(29,158,117,.14); color:#0f6e56; border-radius:20px; padding:2px 9px; font-size:10px; font-weight:700; white-space:nowrap; } /* El basurero: presente pero discreto. La tarjeta sirve sobre todo para entrar a configurar, así que borrar no puede ser lo que más pesa visualmente. */ .bm-chip-del { position:absolute; top:8px; right:8px; width:24px; height:24px; padding:0; display:flex; align-items:center; justify-content:center; border:none; border-radius:6px; cursor:pointer; background:transparent; color:#9BA3C0; font-size:11px; opacity:.55; transition:all .15s; } .bm-chip-del:hover { opacity:1; color:#e2445c; background:rgba(226,68,92,.10); } /* Los pasos del encabezado son navegables. */ .bm-step { cursor:pointer; } /* ── FECHAS PASADAS EN EL ASISTENTE [14-08-2026] ───────────────────────────── No se pueden elegir, pero se siguen viendo: las sesiones ya dictadas de un taller configurado caen aquí y son parte de la serie. */ .bm-dp-day.bm-dp-past, .bm-fc-day.bm-fc-past { color:#c9cfe0; cursor:default; background:transparent; border-color:transparent; } .bm-dp-day.bm-dp-past:hover, .bm-fc-day.bm-fc-past:hover { color:#c9cfe0; border-color:transparent; } /* Sesión ya dictada: mantiene su color, atenuado. Ocurrió, y eso se lee. */ .bm-fc-day.bm-fc-past.bm-fc-scheduled { background:#9961FF; color:#fff; opacity:.42; box-shadow:none; } .bm-fc-day.bm-fc-past.bm-fc-scheduled:hover { background:#9961FF; } /* ── HORA DE TÉRMINO: valor calculado, no campo editable ───────────────────── */ /* Nota bajo el campo calculado. No va dentro del