@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Space+Grotesk:wght@400;500;700&family=Fredoka:wght@500;600;700&display=swap'); /* ===================================================================== Estilos globales base de Juyendo ===================================================================== */ /* Quicksand: solo para el texto de los mensajes de Juyi Mensaje — formal pero con letras más redondas, para que el chat se sienta un poco distinto del resto del panel (ver DirectChat.jsx / AnnouncementsPanel.jsx). */ * { box-sizing: border-box; } body { margin: 0; font-family: 'Poppins', system-ui, sans-serif; /* Corrección 29 jul (reportado por Dionisio: en modo oscuro el panel se veía "como una tarjeta plana encima de algo blanco"): antes acá había un color fijo (#F0F0F3, el fondo claro de siempre) que nunca cambiaba. En pantallas anchas, donde el contenido no llena todo el ancho de la ventana, ese fondo fijo quedaba a la vista alrededor del panel oscuro. Ahora usa la variable de tema (--bg), que las pantallas con modo oscuro sincronizan también en — ver useSyncBodyDarkMode en hooks/useThemePreference.js. */ background: var(--bg); /* Antes no había color acá: cualquier texto sin color explícito caía al negro por defecto del navegador. Se veía bien en los temas claros (casi coincide con --text-primary) pero quedaba negro-sobre-oscuro en Dark Pro / Modo noche — por eso aparecían títulos y textos "invisibles" en Horarios, Productos, Turnos, etc. Con esto, todo texto que no fija su propio color hereda el color del tema activo. */ color: var(--text-primary); } button { font-family: inherit; } /* ===================================================================== Pedido 22 jul (madrugada #3): que la PWA se sienta como app nativa, no como una página web — sin pellizco-zoom, sin rebote de pantalla (overscroll elástico) ni selección de texto por accidente al tocar y arrastrar. Los inputs/textarea son la excepción explícita (donde SÍ hace falta seleccionar texto) y llevan font-size 16px para que iOS no haga zoom automático al enfocarlos. Nota: esta regla es la red de seguridad global — cualquier input que ya fija su propio font-size en línea (style={{fontSize:'15px'}}, hay varios en la app) sigue ganando sobre esta regla porque un estilo en línea siempre le gana a una hoja de estilos externa; homogeneizar TODOS esos tamaños en línea a 16px es un trabajo aparte, más grande, que no se hizo esta noche. ===================================================================== */ /* Corrección 2 ago (reportado por Dionisio: "Dark Pro"/"Editorial" se ven como una tarjeta flotante que no se adapta al navegador — en realidad afectaba a CUALQUIER pantalla con contenido más alto que la ventana, no solo a esos dos temas). La causa: `height: 100%` (fijo, no `min-height`) clava y exactamente al alto de la ventana. Cuando el contenido de una página pública (reservar turno, tienda) es más alto que eso, ese exceso queda atrapado: no se puede llegar con la rueda del mouse, el teclado ni window.scrollTo — el botón "Reservar turno" puede quedar directamente inalcanzable en ventanas más bajas. `min-height` en cambio dice "al menos el alto de la ventana" — las pantallas cortas siguen llenando el fondo de punta a punta como antes, pero las pantallas con más contenido crecen y el navegador las scrollea de forma normal, como cualquier página web. El panel interno (dashboard) ya usa `minHeight: '100vh'` en sus propios contenedores (ver App.jsx), así que no dependía de este `height: 100%` para nada — este cambio no le afecta. */ html, body { touch-action: pan-x pan-y; width: 100%; min-height: 100%; -webkit-user-select: none; user-select: none; } input, textarea { -webkit-user-select: auto; user-select: auto; font-size: 16px; } /* ===================================================================== Pedido 22 jul (madrugada #6): que la campanita de "Silenciar este chat" (ChatSettingsScreen.jsx) se anime al prender o apagar, como si repicara, en vez de cambiar de ícono en seco. ===================================================================== */ @keyframes bell-ring { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-16deg); } 30% { transform: rotate(13deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } } .bell-ring-anim { display: inline-flex; transform-origin: 50% 0%; animation: bell-ring 0.5s ease-in-out; } /* ===================================================================== pageLoader.css — ver PageLoader.jsx ===================================================================== */ .page-loader { min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bg); font-family: var(--font-main); animation: page-loader-fade-in 0.25s ease-out; } @keyframes page-loader-fade-in { from { opacity: 0; } to { opacity: 1; } } .page-loader-mark { position: relative; width: 74px; height: 74px; display: grid; place-items: center; animation: page-loader-breathe 1.9s cubic-bezier(0.45, 0, 0.55, 1) infinite; filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--shadow-dark) 42%, transparent)); } .page-loader-light { position: absolute; inset: 6px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, white), transparent); -webkit-mask: url('/assets/logo-mark-D2GBSNBT.svg') center / contain no-repeat; mask: url('/assets/logo-mark-D2GBSNBT.svg') center / contain no-repeat; opacity: 0; transform: translateX(-48%); animation: page-loader-light-pass 1.9s cubic-bezier(0.16, 1, 0.3, 1) infinite; pointer-events: none; } @keyframes page-loader-light-pass { 0%, 20% { transform: translateX(-48%); opacity: 0; } 42% { opacity: .5; } 70%, 100% { transform: translateX(48%); opacity: 0; } } @keyframes page-loader-breathe { 0%, 100% { transform: scale(0.94); } 48% { transform: scale(1); } 58% { transform: scaleX(1.008) scaleY(0.996); } } .page-loader-wordmark { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-secondary); opacity: 0.42; } .page-loader-label { margin: 2px 0 0; font-size: 12.5px; color: var(--text-secondary); } @media (prefers-reduced-motion: reduce) { .page-loader-mark { animation: none; } .page-loader-light { animation: none; display: none; } } /* ===================================================================== JUYENDO — Tokens de diseño (neumorfismo blanco) ===================================================================== Qué es esto: las variables de color, sombra y tipografía que se repiten en toda la app. Si el día de mañana querés cambiar el color de acento (la marca), lo cambiás UNA VEZ acá y se actualiza en todos lados. No hace falta tocar cada pantalla. ===================================================================== */ :root { /* --- Fondo y superficies --- */ --bg: #F0F0F3; /* fondo general de la app */ --surface: #F0F0F3; /* superficie de cards/botones (mismo tono que el fondo, así "flotan") */ /* --- Sombras neumórficas (el efecto de relieve suave) --- */ --shadow-light: rgba(255, 255, 255, 0.95); /* luz superior/izquierda */ --shadow-dark: rgba(163, 177, 198, 0.85); /* profundidad inferior/derecha */ /* Segundo refuerzo (mismo día, con captura real a pantalla completa de Dionisio: "las píldoras en blanco se pierden no se separan del fondo" -- el primer refuerzo de este mismo bloque, más arriba en el historial de este comentario, subió shadow-dark de 0.58 a 0.68 y agrandó un poco offset/blur, pero probado a resolución real de escritorio (1920px, no el viewport chico de pruebas) seguía leyéndose casi plano: una sola sombra "difusa" grande, sin blur chico pegado al borde, se disuelve visualmente en superficies anchas -- el ojo necesita un límite nítido ADEMÁS de la extrusión suave, no solo la extrusión. Se reconstruye --shadow-raised/ --shadow-raised-compact como DOS sombras por lado (una "de contacto", chica y más opaca, pegada al borde; una "ambiente", grande y difusa, la extrusión) en vez de una sola -- exactamente el patrón de las referencias de neumorfismo real que mandó (buscador/timer/lock screen): tienen borde legible Y relieve suave, no uno u otro. */ --shadow-raised: 2px 2px 4px rgba(163, 177, 198, 0.5), 11px 13px 26px var(--shadow-dark), -2px -2px 4px rgba(255, 255, 255, 0.9), -11px -13px 26px var(--shadow-light), 0 20px 40px rgba(163, 177, 198, 0.24); --shadow-raised-compact: 2px 2px 3px rgba(163, 177, 198, 0.45), 7px 9px 18px var(--shadow-dark), -2px -2px 3px rgba(255, 255, 255, 0.88), -7px -9px 18px var(--shadow-light), 0 12px 24px rgba(163, 177, 198, 0.2); --shadow-inset-soft: inset 6px 7px 14px rgba(163, 177, 198, 0.62), inset -6px -6px 13px rgba(255, 255, 255, 0.88); /* Borde de contacto de 1px -- ver .neu-raised/.neu-raised-compact más abajo. Sin esto, en pantallas grandes el límite de la píldora sigue dependiendo 100% del blur (que a simple vista, sin acercarse, se lee borroso/perdido); un hairline sutil (mismo tono que la sombra oscura, muy baja opacidad) marca el borde exacto sin verse como un borde "duro" de UI genérica. */ --border-raised-hairline: color-mix(in srgb, var(--shadow-dark) 22%, transparent); /* Corrección (auditoría lenguaje visual UI, sept 2026): estas 4 sombras vivían repetidas como literales rgba(0,0,0,X) sueltos en varios archivos (paneles modales, badges, popovers, el lightbox de ServicePicker) -- mismo valor, escrito a mano cada vez. Se centralizan acá para que un cambio futuro de intensidad se haga en un solo lugar. Los valores NO cambian respecto de lo que ya estaba (cero diferencia visual), solo se les pone nombre. Deliberadamente NO se tocó LogoMark.jsx (su sombra floating sobre foto de portada es una excepción ya documentada ahí mismo, no es este mismo patrón) ni los archivos de tema (appThemes.css/bookingThemes.css/ plansTheme.css), que definen sus propios valores por diseño. */ --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.4); --shadow-lightbox: 0 24px 60px rgba(0, 0, 0, 0.5); --shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.25); --shadow-badge-hard: 2px 2px 5px rgba(0, 0, 0, 0.25); /* --- Color de marca / acento --- Actualizado para coincidir con el degradé verde del logo de Juyendo. */ --accent: #0CB876; --accent-hover: #0AA267; --accent-soft: #D6F5E6; /* versión suave del acento, para fondos de estados activos */ /* --- Color del sello de Juyendo (el rayo, LogoMark.jsx) --- Reportado por Dionisio (3 ago): en las páginas públicas de reserva (PublicBooking.jsx/StorePage.jsx) el rayo siempre se veía verde sin importar el tema elegido (Editorial/Dark Pro). La causa: esas páginas también pisan --accent con brandColorVars() (el color de marca que cada negocio elige/extrae de su propio logo), como estilo INLINE en el div contenedor — y un estilo inline le gana SIEMPRE a la regla de clase .theme-editorial/.theme-dark, así que --accent terminaba siendo el color del negocio, no el del tema. Se separa el sello de Juyendo de esa variable: usa su propia variable acá (verde por default, igual que siempre — así el panel interno Owner/EmployeeDashboard, que no tiene tema seleccionable, no cambia en nada), y cada tema de reserva pública la pisa con su propio acento (ver bookingThemes.css). */ --jy-mark-color: var(--accent); /* --- Burbujas de Juyi Mensaje (chat) --- Rediseño "material líquido" (Fase 2 — ver DirectChat.jsx): la especificación pide colores casi planos y MUY desaturados — "verde menta muy desaturado" para lo propio, "blanco porcelana" para lo del otro lado. Nada de verde de marca saturado acá adentro: ese verde vibrante ya quedó reservado para acentos puntuales (botón enviar, estados activos), no para el cuerpo de la burbuja. Se definen como variables (no colores fijos en el componente) para poder pisarlas en modo oscuro sin que quede un verde/blanco clarito ilegible sobre fondo negro. */ --bubble-mine-start: #E2F0E8; --bubble-mine-end: #D7E9DE; /* Antes #FFFFFF/#FBFAF7 — blanco puro real (no solo "sensación" de blanco), demasiado estridente contra el resto de la paleta gris cálida. "Porcelana" pide un blanco roto/marfil suave, no el blanco de un modal quirúrgico. */ --bubble-other-start: #F7F6F2; --bubble-other-end: #EFEDE6; /* --- Texto --- Art 3.4/4.1 de la Constitución Técnica: todo par texto/fondo tiene que cumplir un contraste mínimo de 4.5:1. El gris anterior de --text-secondary (#7A7A7E) daba ≈3.77:1 sobre --bg — insuficiente para subtítulos, hints y encabezados de tabla que lo usan en toda la app. Este valor da ≈5.8:1. */ --text-primary: #3A3A3C; /* gris oscuro, no negro puro */ --text-secondary: #5C5C63; --text-on-accent: #FFFFFF; /* --- Estados --- */ --success: #6FBF8B; --danger: #E56B6B; --warning: #E0B15C; /* --- Tipografía --- */ --font-main: 'Poppins', 'Nunito', system-ui, sans-serif; /* --- Radios y espaciado --- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Capas compartidas: evita que un menú, modal o asistente dependa del stacking context de una card/página. */ --jy-layer-popover: 300; --jy-layer-modal: 500; --jy-layer-tour: 900; } /* Fast-Booking, rediseño Slot-First (22 ago): en móvil sigue siendo una hoja táctil que sube desde abajo (así el teclado no deja un formulario recortado en el centro); desde tablet+ (>=768px, umbral pedido por Dionisio) pasa a Side Drawer anclado a la derecha, para no tapar la agenda de fondo mientras se carga el turno. */ @media (max-width: 767px) { .fast-booking-overlay { align-items: flex-end !important; padding: max(8px, env(safe-area-inset-top)) 0 0 !important; } .fast-booking-sheet { width: 100% !important; max-height: calc(100dvh - max(8px, env(safe-area-inset-top))) !important; height: calc(100dvh - max(8px, env(safe-area-inset-top))) !important; padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; animation: fast-booking-slide-up 250ms cubic-bezier(0, 0, 0.2, 1); } .fast-booking-sheet input, .fast-booking-sheet select { font-size: 16px !important; } } @media (min-width: 768px) { .fast-booking-overlay { justify-content: flex-end !important; padding: 0 !important; } /* Cierre visual (23 ago, spec §1 de Dionisio: "el panel debe tener ancho suficiente para que el contenido respire, no debe parecer una versión móvil comprimida") — 420px quedaba justo con los chips de servicio + el punto de color + "Servicios seleccionados" con EmployeePicker adentro; 460px da ese respiro sin volverse un panel gigante que compita con la agenda de fondo. */ .fast-booking-sheet { width: min(460px, 100%) !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important; animation: fast-booking-slide-in 250ms cubic-bezier(0, 0, 0.2, 1); } } /* Corrección 23 ago (Dionisio, tras ver capturas reales en el celular): "Cargar turno" debe quedar a la derecha también en mobile — la decisión anterior de dejarlo a la izquierda por alcance táctil se revierte por pedido explícito. Sin media query: una sola regla para todos los anchos en vez de repetir flex-end por breakpoint. */ .fast-booking-launcher-row { justify-content: flex-end !important; } @keyframes fast-booking-slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fast-booking-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fast-booking-sheet { animation: none !important; } } /* La tira de fechas conserva espacio para las sombras de cada cápsula y oculta solo su scrollbar propio. No hay recorte rectangular ni scroll horizontal global en el modal. */ .fast-date-strip::-webkit-scrollbar { display: none; } /* Corrección 24 ago (Dionisio: "esa barra que se interpone" en el formulario de Cargar turno, cerca del botón de calendario) — la barra de scroll nativa de 6px quedaba pegada justo ahí. Mismo criterio que .fast-date-strip arriba: se oculta la barra nativa (el scroll táctil sigue funcionando igual), nada de scrollbar visible sobre la interfaz neumórfica. */ .fast-booking-body::-webkit-scrollbar { display: none; } /* El cuerpo del modal es la única superficie que debe desplazarse. Sin este límite cada hijo flex podía encogerse al seleccionar servicios y terminar recortando las fechas u horarios en lugar de habilitar el scroll interno. */ .fast-booking-body > * { flex-shrink: 0; } /* ===================================================================== Clases utilitarias neumórficas reutilizables ===================================================================== */ /* Corrección 4 ago (Dionisio, con fotos: "sombras blancas duras" en botones de Cargar turno y otros lugares — mismo bug ya arreglado antes puntualmente en TimeSlotPicker.jsx, pero de forma local a ese componente). Causa raíz real: NINGUNA de estas 3 clases compartidas apagaba el "appearance" nativo del navegador. Cuando se usan sobre un