/* ========================= MUSIBOT — STYLES PRO (v6.3) UI estable · móvil first · ordenado · tocable Mejora tipográfica: ✅ Mensajes respirables (padding/line-height) ✅ Sangría y espaciado en párrafos/listas ✅ Mejor lectura en bloques largos ✅ FAQ acordeón (details/summary) bonito y legible Mejora UX/Accesibilidad: ✅ Focus ring consistente (keyboard) ✅ Sticky chips + composer cómodo en móvil ✅ Scrollbars discretas + overscroll control ✅ Mejor contraste y estados disabled Paleta Musicala (clara, sin UI oscura) ========================= */ /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #101016; overflow: hidden; height: var(--app-height, 100dvh); min-height: var(--app-height, 100dvh); display: grid; grid-template-rows: auto minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: radial-gradient(circle at 15% 12%, var(--glow-1, rgba(206, 0, 113, 0.20)) 0%, rgba(206,0,113,0) 55%), radial-gradient(circle at 85% 18%, var(--glow-2, rgba(12, 65, 196, 0.25)) 0%, rgba(12,65,196,0) 55%), radial-gradient(circle at 48% 95%, var(--glow-3, rgba(104, 13, 191, 0.22)) 0%, rgba(104,13,191,0) 60%); } /* ========================= SKINS POR TEMPORADA / FIESTAS Activados por (ver js/seasonSkin.js). Cada skin solo redefine acentos (--mozart/--beethoven/--brahms) y los resplandores de fondo (--glow-1/2/3). El resto de la UI no cambia. Para probar manualmente: agrega ?skin=halloween a la URL. ========================= */ /* San Valentín (7–14 feb): rojo/rosa romántico */ body[data-season="san_valentin"]{ --mozart:#E11D74; --beethoven:#C81D5A; --brahms:#FF6FA5; --glow-1: rgba(225, 29, 116, 0.22); --glow-2: rgba(255, 111, 165, 0.20); --glow-3: rgba(200, 29, 90, 0.18); } /* Día del Niño (Colombia, último sábado de abril): colores vivos y alegres */ body[data-season="dia_nino"]{ --mozart:#2D9CDB; --beethoven:#9B51E0; --brahms:#F2C94C; --glow-1: rgba(45, 156, 219, 0.20); --glow-2: rgba(155, 81, 224, 0.18); --glow-3: rgba(242, 201, 76, 0.20); } /* Semana Santa: tonos sobrios y cálidos (morado/vino/oro suave) */ body[data-season="semana_santa"]{ --mozart:#6B2E86; --beethoven:#8C2F39; --brahms:#B08D57; --glow-1: rgba(140, 47, 57, 0.16); --glow-2: rgba(107, 46, 134, 0.18); --glow-3: rgba(176, 141, 87, 0.16); } /* Día de la Madre (Colombia, 2º domingo de mayo): rosados suaves y cálidos */ body[data-season="dia_madre"]{ --mozart:#D6336C; --beethoven:#A61E4D; --brahms:#FFA8C5; --glow-1: rgba(214, 51, 108, 0.18); --glow-2: rgba(255, 168, 197, 0.20); --glow-3: rgba(166, 30, 77, 0.16); } /* Día del Padre (Colombia, 3er domingo de junio): azules serenos + dorado */ body[data-season="dia_padre"]{ --mozart:#1B6CA8; --beethoven:#13507D; --brahms:#C9A227; --glow-1: rgba(27, 108, 168, 0.20); --glow-2: rgba(19, 80, 125, 0.18); --glow-3: rgba(201, 162, 39, 0.16); } /* Amor y Amistad (Colombia, 3er sábado de sept): festivo, multicolor cálido */ body[data-season="amor_amistad"]{ --mozart:#0EA5A5; --beethoven:#E11D74; --brahms:#F59E0B; --glow-1: rgba(225, 29, 116, 0.18); --glow-2: rgba(14, 165, 165, 0.20); --glow-3: rgba(245, 158, 11, 0.18); } /* Halloween (24–31 oct): naranja calabaza + morado noche */ body[data-season="halloween"]{ --mozart:#6A1B9A; --beethoven:#E07B00; --brahms:#C2410C; --glow-1: rgba(224, 123, 0, 0.22); --glow-2: rgba(106, 27, 154, 0.22); --glow-3: rgba(194, 65, 12, 0.18); } /* Velitas (7–8 dic): cálido, dorado y ámbar (velas) */ body[data-season="velitas"]{ --mozart:#E08A1E; --beethoven:#C2410C; --brahms:#F2C94C; --glow-1: rgba(242, 201, 76, 0.24); --glow-2: rgba(224, 138, 30, 0.20); --glow-3: rgba(194, 65, 12, 0.16); } /* Año Nuevo (31 dic – 1 ene): dorado y azul noche festivo */ body[data-season="ano_nuevo"]{ --mozart:#1B2A6B; --beethoven:#3B3FA1; --brahms:#E8C547; --glow-1: rgba(232, 197, 71, 0.24); --glow-2: rgba(59, 63, 161, 0.20); --glow-3: rgba(27, 42, 107, 0.18); } /* Navidad / fin de año (1 dic – 6 ene): rojo, verde y dorado */ body[data-season="navidad"]{ --mozart:#0E7A3C; /* verde pino */ --beethoven:#B3122B; /* rojo navidad */ --brahms:#C9A227; /* dorado */ --glow-1: rgba(179, 18, 43, 0.20); --glow-2: rgba(14, 122, 60, 0.22); --glow-3: rgba(201, 162, 39, 0.20); } /* ===== VARIABLES ===== */ :root{ --app-height: 100dvh; --keyboard-offset: 0px; --mozart:#0C41C4; --beethoven:#680DBF; --brahms:#CE0071; --ink:#0F1222; --ink-2:rgba(15,18,34,.75); --ink-3:rgba(15,18,34,.55); --line:rgba(15,18,34,.12); --surface:rgba(255,255,255,.92); --surface-2:rgba(255,255,255,.78); --surface-3:rgba(255,255,255,.60); --shadow-1:0 10px 26px rgba(0,0,0,.12); --shadow-2:0 18px 60px rgba(0,0,0,.18); --shadow-soft:0 10px 30px rgba(0,0,0,.10); --r1:14px; --r2:18px; --focus: rgba(12, 65, 196, .28); /* Tipografía */ --fs-msg: 0.94rem; --lh-msg: 1.66; --pad-msg-y: 13px; --pad-msg-x: 16px; /* Targets / UX */ --tap: 44px; /* Layout */ --topbar-h: 56px; --shell-pad: 10px; } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ *{ scroll-behavior: auto !important; transition: none !important; animation: none !important; } .chip:active{ transform: none !important; } } /* ========================= TOPBAR ========================= */ .topbar{ height: var(--topbar-h); padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .brand{ display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; } .brand-logo{ width: 36px; height: 36px; object-fit: contain; } .brand-meta{ display: flex; flex-direction: column; min-width: 0; } .brand-title{ font-size: 1.08rem; font-weight: 800; color: var(--mozart); line-height: 1.1; letter-spacing: -.01em; } .brand-sub{ font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Topbar actions wrapper */ .topbar-actions{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .top-link-btn{ display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(15,18,34,.10); background: rgba(255,255,255,.62); color: var(--ink-2); text-decoration: none; font-size: 0.82rem; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; } .top-link-btn:hover{ background: rgba(255,255,255,.78); color: var(--ink); } .top-link-btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus), 0 8px 18px rgba(0,0,0,.06); } .top-link-ic{ font-size: .9rem; line-height: 1; } .top-link-tx{ line-height: 1; } /* Language switch (topbar) */ .lang-switch{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.55); box-shadow: 0 10px 22px rgba(0,0,0,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lang-label{ font-size: .78rem; color: var(--ink-3); font-weight: 800; } .lang-btn{ appearance: none; border: 1px solid var(--line); background: rgba(15,18,34,.06); color: var(--ink); font-weight: 900; font-size: .78rem; padding: 6px 9px; border-radius: 999px; cursor: pointer; min-height: 32px; line-height: 1; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } .lang-btn:hover{ background: rgba(15,18,34,.09); } .lang-btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus); } .lang-btn.active{ border-color: rgba(12,65,196,.25); background: rgba(12,65,196,.10); color: var(--mozart); } /* WhatsApp */ .wa-btn{ display: flex; align-items: center; gap: 6px; text-decoration: none; padding: 8px 12px; border-radius: 999px; /* Verde WhatsApp FIJO: se reconoce siempre, sin importar el skin de temporada. */ background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; font-size: 0.85rem; font-weight: 800; box-shadow: var(--shadow-1); border: 1px solid rgba(255,255,255,.18); white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; } /* Íconos SVG de los botones del topbar: se alinean y heredan el color del texto. */ .wa-ic, .top-link-ic{ display: inline-flex; align-items: center; justify-content: center; } .wa-ic svg{ display: block; } .top-link-ic svg{ display: block; } .wa-btn:hover{ opacity: .95; } .wa-btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus), var(--shadow-1); } .wa-btn.muted{ opacity: .55; filter: grayscale(.35); cursor: not-allowed; pointer-events: none; } /* ========================= LAYOUT ========================= */ .shell{ display: grid; grid-template-columns: 1fr; grid-template-areas: "chat" "side"; gap: 12px; padding: var(--shell-pad); min-height: 0; } .chat-panel{ grid-area: chat; } .side-panel{ grid-area: side; } @media (min-width: 900px){ .shell{ grid-template-columns: 1.2fr .8fr; grid-template-areas: "chat side"; } } @media (max-width: 560px){ .topbar{ padding: 0 10px; gap: 8px; } .topbar-actions{ gap: 6px; } .top-link-btn{ padding: 8px 9px; } .top-link-tx, .wa-tx{ display: none; } } /* ========================= PANELS ========================= */ .panel{ background: var(--surface); border-radius: var(--r2); box-shadow: var(--shadow-2); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .panel-head{ padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 8px; } .panel-title{ font-weight: 900; color: var(--ink); letter-spacing: -.01em; } .panel-actions{ display: flex; gap: 6px; flex-wrap: wrap; } /* ========================= BUTTONS ========================= */ .btn{ border: none; border-radius: 999px; padding: 7px 12px; font-size: 0.82rem; cursor: pointer; line-height: 1; -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 32px; user-select: none; transition: opacity .15s ease, transform .12s ease, background .15s ease, border-color .15s ease; } .btn.primary{ background: linear-gradient(135deg, var(--mozart), var(--beethoven)); color: #fff; font-weight: 900; } .btn.ghost{ background: transparent; color: var(--ink-2); border: 1px solid var(--line); font-weight: 900; } .btn:disabled, .btn[disabled]{ opacity: .6; cursor: not-allowed; pointer-events: none; } .btn:hover{ opacity: .95; } .btn:active{ transform: translateY(1px); } .btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus); } /* ========================= CHAT ========================= */ .chat{ flex: 1; min-height: 0; padding: 14px 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .row{ display: flex; flex-direction: column; max-width: 100%; } .row.user{ align-items: flex-end; } .row.bot{ align-items: flex-start; } .bubble{ max-width: 86%; padding: var(--pad-msg-y) var(--pad-msg-x); border-radius: 18px; font-size: var(--fs-msg); line-height: var(--lh-msg); word-wrap: break-word; white-space: pre-wrap; letter-spacing: 0.01em; box-shadow: 0 6px 18px rgba(15,18,34,.05); } .bubble.bot{ background: rgba(12,65,196,.08); color: var(--ink); border: 1px solid rgba(12,65,196,.10); } .bubble.user{ background: linear-gradient(135deg, var(--beethoven), var(--brahms)); color: #fff; border: 1px solid rgba(255,255,255,.12); } /* Tipografía dentro de bubbles */ .bubble p{ margin: 0.55em 0; text-indent: 0.85em; } .bubble p:first-child{ margin-top: 0; } .bubble p:last-child{ margin-bottom: 0; } .bubble.singleline p{ text-indent: 0; } /* Listas */ .bubble ul, .bubble ol{ margin: 0.55em 0; padding-left: 1.35em; } .bubble li{ margin: 0.35em 0; } /* Bloques tipo “nota” */ .bubble .block{ margin: 0.6em 0; padding-left: 0.9em; border-left: 3px solid rgba(15,18,34,.10); } /* Inline code look (si tu formatter lo mete) */ .bubble code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .92em; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.18); padding: 0 .35em; border-radius: 8px; } /* Links dentro de bubbles */ .bubble a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; } /* Meta (hora) */ .meta{ font-size: .65rem; color: var(--ink-3); margin-top: 4px; } /* Media */ .msgmedia{ margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .mediaitem img, .mediaitem video{ max-width: 100%; border-radius: 12px; border: 1px solid rgba(15,18,34,.10); background: rgba(255,255,255,.55); } .mediaitem audio{ width: 100%; border-radius: 12px; } .mediastatus{ margin-top: 6px; font-size: .82rem; color: var(--ink-2); } /* ========================= COMPOSER ========================= */ .composer{ padding: 12px 12px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.80)); } .ai-note{ margin: 7px 4px 0; color: var(--muted); font-size: 11px; line-height: 1.35; text-align: center; } .composer.is-ai-busy .ai-note::before{ content: "✦ "; } .composer.is-ai-busy .inputbar .btn.primary{ cursor: wait; opacity: .72; } .composer.is-ai-busy .inputbar .btn.primary::after{ content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: ai-spin .7s linear infinite; } @keyframes ai-spin{ to{ transform: rotate(360deg); } } .composer.is-typing .chips, .composer.is-typing .quick-picker{ display: none; } /* Sticky chips en móvil: quedan visibles mientras scrolleas */ @media (max-width: 899px){ .shell{ grid-template-rows: minmax(0, 1fr) auto; align-content: normal; overflow: hidden; overscroll-behavior: contain; padding-bottom: max(12px, env(safe-area-inset-bottom)); } .chat-panel{ min-height: 0; height: auto; } .side-panel{ align-self: start; max-height: min(36vh, 320px); min-height: auto; overflow: hidden; } .side-content{ flex: 0 0 auto; min-height: auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 10px 12px 12px; } .composer{ position: sticky; bottom: 0; z-index: 5; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); gap: 8px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.94) 20%, rgba(255,255,255,.98)); box-shadow: 0 -10px 24px rgba(15,18,34,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .is-input-active .shell{ grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); } .is-input-active .side-panel{ display: none; } .is-input-active .composer{ gap: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom) + var(--keyboard-offset)); } .is-input-active .chat{ padding-bottom: 12px; scroll-padding-bottom: calc(12px + var(--keyboard-offset)); } .composer .chips{ display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; margin: 0 -2px; scroll-snap-type: x proximity; } .composer .chips::-webkit-scrollbar{ display: none; } .composer .chip{ flex: 0 0 clamp(150px, 44vw, 220px); min-height: 52px; padding: 12px 14px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; box-shadow: 0 6px 16px rgba(0,0,0,.05); } .composer .inputbar{ align-items: stretch; gap: 10px; } .composer .input{ min-width: 0; } .composer[data-quick-ui="select"] .chips{ display: none; } .chat{ padding: 12px 12px 18px; scroll-padding-bottom: calc(18px + var(--keyboard-offset)); } } @media (max-width: 640px){ :root{ --shell-pad: 8px; } .topbar{ height: auto; padding: 8px 12px 6px; align-items: center; flex-wrap: nowrap; gap: 8px; } .brand{ flex: 1 1 auto; gap: 8px; } .brand-logo{ width: 30px; height: 30px; } .brand-title{ font-size: 1.1rem; line-height: 1.02; } .brand-sub{ display: none; } .topbar-actions{ width: auto; justify-content: flex-end; gap: 6px; } .lang-switch{ margin-right: 0; padding: 4px 6px; gap: 3px; } .lang-label{ font-size: 0.7rem; } .lang-btn{ min-height: 28px; padding: 5px 8px; font-size: 0.74rem; } .wa-btn{ gap: 5px; padding: 8px 10px; font-size: 0.8rem; } .chat-panel{ height: auto; } .panel-head{ padding: 12px; } .side-content{ padding: 8px 10px 10px; gap: 8px; } .help-collapsible > summary, details.faq-item > summary.faq-q{ min-height: 40px; padding: 10px 12px; } .chat{ padding: 10px 10px 16px; } .composer{ padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); } .composer .chip{ flex-basis: clamp(148px, 48vw, 210px); min-height: 50px; font-size: 0.88rem; } .composer .input{ padding: 10px 12px; font-size: 16px; } .composer .inputbar .btn.primary{ padding: 10px 14px; } } @media (max-width: 420px){ .brand-title{ font-size: 1.04rem; } .brand-logo{ width: 28px; height: 28px; } .topbar{ gap: 6px; } .topbar-actions{ gap: 5px; } .lang-label{ display: none; } .lang-switch{ padding: 4px; } .lang-btn{ min-width: 34px; padding: 5px 7px; } .wa-btn{ padding: 7px 9px; font-size: 0.76rem; } .chat-panel{ height: auto; } .composer .chip{ flex-basis: clamp(142px, 56vw, 188px); } } .quick-picker{ width: 100%; } .quick-picker[hidden]{ display: none !important; } .quick-select{ width: 100%; min-height: var(--tap); appearance: none; border: 1px solid var(--line); border-radius: 16px; padding: 11px 44px 11px 14px; font-size: 0.92rem; font-weight: 800; color: var(--ink); background: linear-gradient(45deg, transparent 50%, var(--mozart) 50%), linear-gradient(135deg, var(--mozart) 50%, transparent 50%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,247,255,.96)); background-position: calc(100% - 22px) calc(50% - 2px), calc(100% - 16px) calc(50% - 2px), 0 0; background-size: 6px 6px, 6px 6px, 100% 100%; background-repeat: no-repeat; box-shadow: 0 4px 12px rgba(15,18,34,.05); } .quick-select:focus{ outline: none; box-shadow: 0 0 0 4px var(--focus), 0 8px 18px rgba(0,0,0,.08); } .chips{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .chip{ appearance: none; border: 1px solid var(--line); background: rgba(15,18,34,.06); border-radius: 14px; padding: 11px 12px; min-height: var(--tap); font-size: 0.95rem; font-weight: 900; color: var(--ink); cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; box-shadow: 0 8px 18px rgba(0,0,0,.06); user-select: none; transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } /* Chip especial: WhatsApp (CTA final) */ .chip--wa{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.10); } .chip--wa:hover{ background: rgba(16,185,129,.14); } .chip:hover{ background: rgba(15,18,34,.09); } .chip:active{ transform: translateY(1px); } .chip:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus), 0 8px 18px rgba(0,0,0,.08); } /* Disabled chips (cuando UI los mutea) */ .chip[disabled], .chip.is-disabled{ opacity: .55; cursor: not-allowed; pointer-events: none; filter: grayscale(.2); } /* Input bar */ .inputbar{ display: flex; gap: 8px; } .input{ flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; font-size: .92rem; background: rgba(255,255,255,.85); min-height: var(--tap); } .input::placeholder{ color: rgba(15,18,34,.45); } .input:focus{ outline: none; box-shadow: 0 0 0 4px var(--focus); background: rgba(255,255,255,.95); } .input:disabled{ opacity: .65; cursor: not-allowed; } .inputbar .btn.primary{ padding: 10px 16px; font-weight: 900; min-height: var(--tap); } /* Tip eliminado */ .hint{ display: none; } /* ========================= SIDE PANEL (Ayuda / FAQ) ========================= */ .side-panel { overflow: hidden; } .side-content{ flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Cards */ .card{ padding: 12px; border-radius: var(--r1); background: rgba(15,18,34,.04); border: 1px solid rgba(15,18,34,.06); } .card-title{ font-weight: 900; margin-bottom: 6px; letter-spacing: -.01em; } .card-text{ font-size: .9rem; line-height: 1.55; color: var(--ink-2); } /* Acordeones genéricos (ayuda) */ .help-collapsible{ border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.6); overflow: hidden; flex: 0 0 auto; } .help-collapsible > summary{ cursor: pointer; list-style: none; padding: 12px 12px; font-weight: 900; color: var(--ink); display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); -webkit-tap-highlight-color: transparent; } .help-collapsible > summary::-webkit-details-marker{ display: none; } .help-collapsible[open] > summary{ border-bottom: 1px solid var(--line); background: rgba(12,65,196,.05); } .help-body{ padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; } /* ========================= FAQ (Acordeón v5.8 UI) Estructura:

Pregunta

Respuesta

========================= */ .faq-body{ padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; overflow: visible; max-height: none; font-size: .9rem; line-height: 1.55; color: var(--ink-2); } /* details base */ details.faq-item{ border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.58); overflow: hidden; box-shadow: 0 10px 22px rgba(0,0,0,.05); } /* summary clickable */ details.faq-item > summary.faq-q{ cursor: pointer; list-style: none; padding: 12px 12px; min-height: var(--tap); font-weight: 900; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 10px; -webkit-tap-highlight-color: transparent; user-select: none; } details.faq-item > summary.faq-q::-webkit-details-marker{ display: none; } /* Chevron */ details.faq-item > summary.faq-q::after{ content: "▾"; font-size: 1rem; line-height: 1; color: var(--ink-3); transition: transform .18s ease; flex: 0 0 auto; } details.faq-item[open] > summary.faq-q::after{ transform: rotate(180deg); color: rgba(12,65,196,.75); } /* open state */ details.faq-item[open] > summary.faq-q{ background: rgba(12,65,196,.06); border-bottom: 1px solid var(--line); } /* answer */ details.faq-item > .faq-a{ padding: 10px 12px 12px; color: var(--ink-2); background: rgba(255,255,255,.45); font-size: .9rem; line-height: 1.6; } /* inline formatting from UI formatter */ details.faq-item > .faq-a strong{ color: var(--ink); } details.faq-item > .faq-a em{ color: rgba(15,18,34,.68); } /* focus ring (keyboard) */ details.faq-item > summary.faq-q:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus); } /* Hover */ @media (hover:hover){ details.faq-item > summary.faq-q:hover{ background: rgba(15,18,34,.03); } details.faq-item[open] > summary.faq-q:hover{ background: rgba(12,65,196,.07); } } /* ========================= SCROLLBARS ========================= */ .chat::-webkit-scrollbar, .side-content::-webkit-scrollbar{ width: 7px; } .chat::-webkit-scrollbar-thumb, .side-content::-webkit-scrollbar-thumb{ background: rgba(15,18,34,.18); border-radius: 10px; } .chat::-webkit-scrollbar-thumb:hover, .side-content::-webkit-scrollbar-thumb:hover{ background: rgba(15,18,34,.26); } /* ========================= INTRO / VIDEO + LANGUAGE GATE ========================= */ .intro-overlay{ position: fixed; inset: 0; background: rgba(15,18,34,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; } .intro-box{ position: relative; width: min(92%, 440px); background: rgba(255,255,255,0.92); border-radius: 18px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); text-align: center; border: 1px solid rgba(255,255,255,.55); } .intro-video{ width: 100%; border-radius: 14px; display: block; } .intro-text{ margin-top: 14px; } .intro-text h2{ margin: 6px 0 8px; color: var(--mozart); letter-spacing: -.01em; } .intro-text p{ margin: 0 0 10px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; } /* Language gate block */ .lang-gate{ padding: 10px 6px 2px; } .lang-gate-title{ margin: 6px 0 2px; font-size: 1.15rem; font-weight: 900; color: var(--ink); letter-spacing: -.01em; } .lang-gate-sub{ margin: 0 0 12px; color: var(--ink-3); font-size: .9rem; line-height: 1.45; } .lang-gate-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 8px; } .lang-gate-btn{ appearance: none; border: 1px solid var(--line); background: rgba(15,18,34,.05); border-radius: 14px; padding: 12px 10px; min-height: 46px; font-weight: 900; font-size: .95rem; color: var(--ink); cursor: pointer; box-shadow: 0 10px 22px rgba(0,0,0,.06); -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; transition: transform .12s ease, background .15s ease; } .lang-gate-btn:hover{ background: rgba(15,18,34,.08); } .lang-gate-btn:active{ transform: translateY(1px); } .lang-gate-btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus), 0 10px 22px rgba(0,0,0,.10); } .lang-gate-note{ margin: 10px 0 0; font-size: .82rem; color: var(--ink-3); line-height: 1.35; } /* Welcome (after language selection) */ .intro-welcome{ margin-top: 6px; } /* Start button */ .intro-btn{ margin-top: 8px; padding: 10px 18px; border: none; border-radius: 14px; background: linear-gradient(135deg, var(--mozart), var(--beethoven)); color: #fff; font-weight: 900; cursor: pointer; min-height: var(--tap); user-select: none; transition: opacity .15s ease, transform .12s ease; } .intro-btn:hover{ opacity: .95; } .intro-btn:active{ transform: translateY(1px); } .intro-btn:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--focus); } /* ========================= UTIL ========================= */ .hidden{ display: none !important; } .is-hidden{ display: none !important; } /* For hiding topbar language switch until chosen */ .lang-switch.is-hidden{ display: none !important; } .faq-img{ width: 100%; max-width: 520px; max-height: 360px; object-fit: contain; display: block; margin: 10px auto 0; border-radius: 14px; border: 1px solid rgba(15,18,34,.10); background: rgba(255,255,255,.65); } /* ========================= FAQ LINKS (clickeables) ========================= */ details.faq-item > .faq-a a{ color: var(--mozart); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 700; } details.faq-item > .faq-a a:hover{ color: var(--beethoven); text-decoration-thickness: 2px; } details.faq-item > .faq-a a:visited{ color: rgba(104, 13, 191, 0.85); } details.faq-item > .faq-a a:active{ color: var(--brahms); } .faq-a a{ text-decoration: underline; text-underline-offset: 2px; } /* ========================= MÓVIL: layout más respirado (v6.4) - Quita el "doble marco" (títulos/bordes redundantes). - La Ayuda pesa menos y deja más alto para la conversación. ========================= */ @media (max-width: 899px){ /* (2) Quitar doble marco: el título "Chat" es redundante. Lo ocultamos visualmente pero lo dejamos accesible para lectores de pantalla. */ .chat-panel > .panel-head{ padding: 6px 10px 6px 14px; border-bottom: none; min-height: 0; } .chat-panel > .panel-head .panel-title{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .chat-panel > .panel-head .panel-actions{ margin-left: auto; } /* Tarjetas más suaves: menos sombra dura para que no se sientan cajas pesadas. */ .panel{ box-shadow: 0 8px 24px rgba(15,18,34,.10); border-radius: 20px; } /* (1) Ayuda colapsada y ligera: - Sin header propio "Ayuda" (las pestañas ya dicen qué son). - La superficie del panel se funde con el fondo (no segundo marco). */ .side-panel{ background: transparent; box-shadow: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; max-height: min(30vh, 280px); } .side-panel > .panel-head{ display: none; } .side-content{ padding: 4px 2px 2px; gap: 8px; } /* Pestañas de ayuda/FAQ: un poco más de aire y look "pill". */ .help-collapsible{ border-radius: 16px; background: rgba(255,255,255,.72); } /* Más separación entre burbujas en pantallas chicas. */ .chat{ gap: 14px; } .bubble{ max-width: 90%; } }