/* ═══ Nexo · sistema de diseño v2 — "tal cual los shots" + liquid glass ═══ CLARO = blanco + tinta negra: marco de vidrio blanco sobre fondo violeta/azul vivo, tarjetas blancas, botones NEGROS, pastilla de navegación negra, verde (sumar/mic/en vivo), rojo (colgar/alerta), azul solo para detalles. OSCURO = vidrio negro sobre brasas rojo/violeta/azul, acento violeta (burbuja propia, badges, botones). LIQUID GLASS (estilo iOS 26): piezas flotantes translúcidas con desenfoque + saturación, borde especular, brillo interior y sombra suave → clase .liquid */ :root { --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --r-xl: 30px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-pill: 999px; --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --t-fast: 160ms; --t: 280ms; --t-slow: 480ms; --ok: #2fb350; --ok-soft: rgba(47, 179, 80, .14); --warn: #f59e0b; --warn-soft: rgba(245, 158, 11, .16); --danger: #ff4b4b; --danger-soft: rgba(255, 75, 75, .13); --fb: #1877f2; --ig: #e1306c; --tt: #111; --yt: #ff0033; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); /* Variables de plataforma (las publica el cascarón; usalas con respaldo: var(--kb, 0px)): --kb px de abajo tapados por el teclado en pantalla (core.js la actualiza; 0 si está cerrado). html.kb-open mientras está abierto. --nav-h alto que ocupa la nav inferior flotante (0 en escritorio, en horizontal, con una hoja abierta y en pantallas inmersivas). --dock-h alto del dock de llamada: lo PUBLICA calldock.js (SALAS) en cuando el dock está visible; acá solo el valor por defecto. --app-top / --app-h DÓNDE EMPIEZA Y CUÁNTO MIDE LA PANTALLA ÚTIL para una pieza `position: fixed` a pantalla completa (conversación de chat, visor, llamada). Sirven igual adentro del marco (.shell, que por su backdrop-filter es el bloque contenedor de los fixed que viven adentro → ahí --app-top vale 0) y afuera (overlays en ). Receta única: top: var(--app-top); height: var(--app-h); —nunca 100dvh a pelo, que en la app instalada se pasa por abajo justo el alto del notch. --app-h ya le descuenta el teclado (--kb). */ --kb: 0px; --nav-h: 0px; --dock-h: 0px; --app-top: var(--safe-t); --app-h: calc(100vh - var(--safe-t) - var(--kb, 0px)); } @supports (height: 100dvh) { :root { --app-h: calc(100dvh - var(--safe-t) - var(--kb, 0px)); } } :root, :root[data-theme='light'] { color-scheme: light; /* Paleta de mangystexports.com (pedido 2026-09-29): verdes y blanco. Claro = blanco con lavados verdes; oscuro = negro con brasas verdes. */ --backdrop: radial-gradient(55% 45% at 88% 6%, #cdf2a0 0%, transparent 62%), radial-gradient(50% 60% at 8% 18%, #a3cb70 0%, transparent 65%), radial-gradient(70% 60% at 92% 100%, #245501 0%, transparent 60%), radial-gradient(60% 50% at 0% 100%, #538d22 0%, transparent 62%), linear-gradient(135deg, #8cc152, #538d22 45%, #2f6a12); --frame: rgba(247, 250, 243, .92); --card: rgba(255, 255, 255, .94); --card-2: rgba(20, 54, 1, .05); --card-3: rgba(20, 54, 1, .09); --line: rgba(20, 54, 1, .09); --solid: #ffffff; /* superficie opaca (menús, modales sobre contenido) */ --text: #0f1a08; --text-2: #34432a; --muted: #7d8a72; --on-primary: #fff; --primary: #143601; --primary-2: #245501; --primary-soft: rgba(20, 54, 1, .08); --primary-glow: rgba(20, 54, 1, .28); --accent: #538d22; --accent-soft: rgba(83, 141, 34, .14); --blue: #3f7d1f; --bubble-own: #143601; --bubble-own-text: #fff; --bubble: #ffffff; --shadow: 0 8px 26px rgba(20, 54, 1, .07), 0 1px 3px rgba(20, 54, 1, .05); --shadow-lg: 0 28px 70px rgba(20, 54, 1, .22); --nav-pill: rgba(20, 54, 1, .86); --nav-pill-text: #b7d59a; --nav-pill-active: #fff; --stage: #0b1a04; --rail-active-bg: #143601; --rail-active-fg: #fff; --lg-bg: rgba(255, 255, 255, .5); --lg-border: rgba(255, 255, 255, .75); --lg-blur: blur(22px) saturate(190%) brightness(1.05); --lg-hi: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3), inset 1px 0 0 rgba(255, 255, 255, .4), inset -1px 0 0 rgba(255, 255, 255, .4); --lg-shadow: 0 12px 40px rgba(20, 54, 1, .16), 0 2px 8px rgba(20, 54, 1, .08); --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .28) 100%); } :root[data-theme='dark'] { color-scheme: dark; --backdrop: radial-gradient(55% 60% at 0% 0%, #1a4301 0%, transparent 60%), radial-gradient(48% 55% at 100% 42%, #538d22 0%, transparent 60%), radial-gradient(70% 60% at 62% 112%, #245501 0%, transparent 60%), radial-gradient(42% 42% at 0% 100%, #0f2a00 0%, transparent 62%), #050a04; --frame: rgba(8, 14, 6, .7); --card: rgba(255, 255, 255, .05); --card-2: rgba(255, 255, 255, .07); --card-3: rgba(255, 255, 255, .12); --line: rgba(255, 255, 255, .08); --solid: #0f160c; --text: #f2f6ee; --text-2: #c8d2c0; --muted: #8a9682; --on-primary: #fff; --primary: #538d22; --primary-2: #6aa82e; --primary-soft: rgba(83, 141, 34, .24); --primary-glow: rgba(83, 141, 34, .45); --accent: #a3cb70; --accent-soft: rgba(163, 203, 112, .2); --blue: #8fc25a; --bubble-own: #3f7a16; --bubble-own-text: #fff; --bubble: rgba(255, 255, 255, .07); --shadow: 0 8px 26px rgba(0, 0, 0, .3); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .6); --nav-pill: rgba(14, 24, 10, .62); --nav-pill-text: #8a9682; --nav-pill-active: #fff; --stage: #040704; --rail-active-bg: rgba(255, 255, 255, .1); --rail-active-fg: #fff; --lg-bg: rgba(28, 44, 20, .46); --lg-border: rgba(255, 255, 255, .14); --lg-blur: blur(24px) saturate(180%); --lg-hi: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 1px 0 0 rgba(255, 255, 255, .07), inset -1px 0 0 rgba(255, 255, 255, .07); --lg-shadow: 0 14px 44px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3); --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, .06) 100%); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overscroll-behavior: none; } /* sin rebote ni "tirar para recargar": la app es de alto fijo */ button, a, [role='button'], .chip, .tab, .switch, .list-row { touch-action: manipulation; } /* sin demora ni zoom por doble toque */ body { font: 500 14px/1.45 var(--font); color: var(--text); background: var(--backdrop); background-attachment: fixed; overflow: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; } h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; } h4 { font-size: 14px; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; padding: 0; } img, video { display: block; max-width: 100%; } ::selection { background: var(--accent); color: #fff; } .scroll, .col-list, .col-main, .col-side { scrollbar-width: thin; scrollbar-color: var(--card-3) transparent; } .muted { color: var(--muted); } .small { font-size: 12px; } .tiny { font-size: 11px; } .bold { font-weight: 700; } .row { display: flex; align-items: center; gap: 10px; } .col { display: flex; flex-direction: column; gap: 10px; } .grow { flex: 1; min-width: 0; } .wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .center { justify-content: center; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hidden { display: none !important; } .icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ── LIQUID GLASS ── pieza flotante translúcida. Necesita estar sobre algo con color (fondo, video, tarjetas). */ .liquid, .glass { position: relative; isolation: isolate; background: var(--lg-bg); border: 1px solid var(--lg-border); box-shadow: var(--lg-hi), var(--lg-shadow); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); } .liquid::before, .glass::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--lg-sheen); pointer-events: none; } /* Vidrio sobre video/foto (subtítulos, etiquetas de tiles): siempre claro-translúcido con texto blanco. */ .glass { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff; backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .18); } .glass::before { background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%); } /* ── marco de la app ── */ #app { height: 100vh; height: 100dvh; height: var(--vph, 100dvh); padding: 14px; display: flex; } /* --vph = alto medido de verdad (app.js); en iPhone instalado 100dvh dejaba franja negra */ /* APP AGREGADA AL INICIO (standalone) — MEDIDO EN UN iPHONE REAL con iOS 26.6.1 (sonda.js, 2026-09-21), pantalla de 896: innerHeight, visualViewport, 100dvh, 100svh y 100% → 848 (le restan el notch) · 100vh y 100lvh → 896 (la pantalla de verdad) Y iOS muestra tanta pantalla como MIDA EL DOCUMENTO: con el marco en 848 quedaba una franja plana abajo; al crecer el marco, crecía lo visible. Por eso el marco instalado se cuelga de 100lvh y NO de lo que mide JavaScript (--vph perseguía su propia cola: medía el alto que él mismo ponía). */ html.standalone #app { height: 100vh; height: 100lvh; } @supports (height: 100lvh) { html.standalone { --app-h: calc(100lvh - var(--safe-t) - var(--kb, 0px)); } } /* las piezas fijas a pantalla completa, igual que el marco */ /* EL MARCO YA NO LLEVA backdrop-filter — MEDIDO 2026-09-21 (el dueño: "consume muchos recursos, el celular se calienta"): detrás del marco solo hay el degradado del fondo, que ya es liso, así que desenfocarlo no cambia NADA a la vista… pero costaba carísimo: cada vez que ALGO se animaba en la pantalla (hasta el puntito verde que late) el navegador recalculaba un desenfoque de 40 px sobre la pantalla ENTERA, 60 veces por segundo. En reposo la pantalla de Salas se comía ~80 % de la GPU; sin esto y con las animaciones baratas de abajo, menos de la mitad (casi todo es el piso del simulador). OJO: el desenfoque además convertía al marco en el BLOQUE CONTENEDOR de todo `position: fixed` que vive adentro (ver CONTRACT.md). Eso ahora lo sostienen `transform: translateZ(0)` + `will-change: transform`. NO sacarlos y NO volver a poner un backdrop-filter a pantalla completa. */ .shell { flex: 1; display: flex; min-width: 0; background: var(--frame); transform: translateZ(0); will-change: transform; border-radius: var(--r-xl); box-shadow: var(--lg-hi), var(--shadow-lg); border: 1px solid var(--lg-border); overflow: hidden; animation: shell-in var(--t-slow) var(--ease) both; } .rail { position: relative; z-index: 30; width: 76px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 16px; border-right: 1px solid var(--line); } .rail .logo { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text); font-weight: 800; font-size: 24px; letter-spacing: -.04em; margin-bottom: 10px; } .rail .logo::after { content: '.'; color: var(--accent); } .rail-btn { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: all var(--t) var(--ease); } .rail-btn:hover { background: var(--card-2); color: var(--text); transform: translateY(-1px); } .rail-btn.active { background: var(--rail-active-bg); color: var(--rail-active-fg); box-shadow: 0 8px 20px var(--primary-glow); } :root[data-theme='dark'] .rail-btn.active { box-shadow: var(--lg-hi); } .rail-btn .badge { position: absolute; top: 2px; right: 2px; } .rail-btn::after { content: attr(data-tip); position: absolute; left: 60px; padding: 7px 12px; border-radius: 12px; background: var(--solid); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid var(--lg-border); box-shadow: var(--lg-hi), var(--lg-shadow); opacity: 0; pointer-events: none; transform: translateX(-6px); transition: all var(--t-fast) var(--ease); z-index: 50; } .rail-btn:hover::after { opacity: 1; transform: none; } .rail .spacer { flex: 1; } .main { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; } #view { flex: 1; min-height: 0; display: flex; flex-direction: column; } .view { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: view-in 420ms var(--ease) both; } .view-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 12px; flex: none; } .view-head h1 { font-size: 22px; } .view-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 22px 22px; } .view-cols { flex: 1; min-height: 0; display: flex; } .col-list { width: 300px; flex: none; overflow: auto; border-right: 1px solid var(--line); padding: 14px; } .col-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .col-side { width: 320px; flex: none; overflow: auto; border-left: 1px solid var(--line); padding: 14px; } /* ── navegación inferior (móvil): pastilla oscura de liquid glass ── */ .bottom-nav { display: none; position: fixed; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); z-index: 40; padding: 7px; gap: 2px; border-radius: var(--r-pill); isolation: isolate; background: var(--nav-pill); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 18px 44px rgba(8, 8, 30, .4); } .bottom-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%); } .bottom-nav button { position: relative; min-width: 60px; height: 52px; border-radius: var(--r-pill); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--nav-pill-text); font-size: 10px; font-weight: 600; transition: all var(--t) var(--ease); } .bottom-nav button.active { color: var(--nav-pill-active); background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } .bottom-nav button:active { transform: scale(.92); } .bottom-nav .badge { position: absolute; top: 4px; right: 10px; } /* ── componentes ── */ .card { background: var(--card); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); } .card.flat { box-shadow: none; } .card.soft { background: var(--card-2); border-color: transparent; box-shadow: none; } .card.hover { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); cursor: pointer; } .card.hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--r-pill); font-weight: 700; font-size: 13.5px; white-space: nowrap; background: var(--card-2); color: var(--text); transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease), opacity var(--t); } .btn:hover { background: var(--card-3); } .btn:active { transform: scale(.96); } .btn:disabled { opacity: .5; pointer-events: none; } .btn.primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .18); } .btn.primary:hover { background: var(--primary-2); transform: translateY(-1px); } .btn.ok { background: var(--ok); color: #fff; box-shadow: 0 8px 18px rgba(47, 179, 80, .3), inset 0 1px 0 rgba(255, 255, 255, .25); } .btn.danger { background: var(--danger); color: #fff; box-shadow: 0 8px 18px rgba(255, 75, 75, .3), inset 0 1px 0 rgba(255, 255, 255, .25); } .btn.ghost { background: transparent; border: 1px solid var(--line); } .btn.ghost:hover { background: var(--card-2); } .btn.sm { height: 34px; padding: 0 13px; font-size: 12.5px; } .btn.lg { height: 50px; padding: 0 24px; font-size: 15px; } .btn.icon { width: 42px; padding: 0; } .btn.icon.sm { width: 34px; } .btn.icon.lg { width: 52px; height: 52px; } .btn.round { background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); } .btn.glass { background: rgba(255, 255, 255, .16); color: #fff; } .btn.glass:hover { background: rgba(255, 255, 255, .26); } .btn.on { background: var(--primary-soft); color: var(--text); } .btn.off { background: var(--danger-soft); color: var(--danger); } .input, .select, .textarea { width: 100%; height: 44px; padding: 0 16px; border-radius: var(--r-md); border: 1.5px solid transparent; background: var(--card-2); outline: none; transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); } .select option { background: var(--solid); color: var(--text); } .textarea { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; line-height: 1.5; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px var(--accent-soft); } .input::placeholder, .textarea::placeholder { color: var(--muted); text-overflow: ellipsis; } .input { text-overflow: ellipsis; } .field { display: flex; flex-direction: column; gap: 6px; } .field > label, .label { font-size: 12px; font-weight: 700; color: var(--text-2); } .search { position: relative; } .search .icon { position: absolute; left: 14px; top: 12px; color: var(--muted); } .search .input { padding-left: 42px; border-radius: var(--r-pill); } .pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; background: var(--card-2); color: var(--text-2); white-space: nowrap; } .pill.ok { background: var(--ok-soft); color: #1d8a3c; } .pill.warn { background: var(--warn-soft); color: #b56f00; } .pill.danger { background: var(--danger-soft); color: var(--danger); } .pill.info { background: var(--accent); color: #fff; } :root[data-theme='dark'] .pill.ok { color: #5fd97d; } :root[data-theme='dark'] .pill.warn { color: #fbbf24; } .pill .dot, .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .dot.live { background: var(--ok); position: relative; } /* El latido va en un pseudo-elemento que solo cambia transform y opacity: lo mueve la GPU sin repintar. Antes animaba box-shadow (repintado en el hilo principal en cada cuadro). */ .dot.live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse-ring 1.8s ease-out infinite; will-change: transform, opacity; pointer-events: none; } @keyframes pulse-ring { from { transform: scale(1); opacity: .55; } 70%, to { transform: scale(3.2); opacity: 0; } } .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800; display: inline-grid; place-items: center; animation: pop var(--t) var(--spring) both; } .badge.blue { background: var(--accent); } .badge.green { background: var(--ok); } .chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--card-2); font-weight: 600; font-size: 12.5px; transition: all var(--t) var(--ease); cursor: pointer; border: 1.5px solid transparent; } .chip:hover { background: var(--card-3); } .chip.active { background: var(--primary); color: var(--on-primary); } .avatar { --s: 40px; position: relative; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: calc(var(--s) * .38); background: var(--primary); user-select: none; } .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .avatar.xs { --s: 24px; } .avatar.sm { --s: 32px; } .avatar.lg { --s: 52px; } .avatar.xl { --s: 88px; } .avatar.online::after, .avatar.offline::after { content: ''; position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 9px; min-height: 9px; border-radius: 50%; border: 2.5px solid var(--solid); background: var(--ok); } .avatar.offline::after { background: var(--muted); } .avatar.speaking { box-shadow: 0 0 0 3px var(--ok); transition: box-shadow var(--t-fast); } .avatar-stack { display: flex; } .avatar-stack .avatar { margin-left: -10px; border: 2.5px solid var(--solid); } .avatar-stack .avatar:first-child { margin-left: 0; } .tabs { display: inline-flex; padding: 5px; gap: 4px; border-radius: var(--r-pill); background: var(--card-2); } .tab { height: 36px; padding: 0 18px; border-radius: var(--r-pill); font-weight: 700; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; transition: all var(--t) var(--ease); } .tab.active { background: var(--solid); color: var(--text); box-shadow: var(--shadow); } :root[data-theme='dark'] .tab.active { background: rgba(255, 255, 255, .12); box-shadow: var(--lg-hi); } .list-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); cursor: pointer; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .list-row:hover { background: var(--card-2); } .list-row.active { background: var(--card-3); } .list-row:active { transform: scale(.985); } .section-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 6px; display: flex; align-items: center; justify-content: space-between; } .switch { position: relative; width: 46px; height: 28px; border-radius: 14px; background: var(--card-3); transition: background var(--t) var(--ease); flex: none; cursor: pointer; } .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform var(--t) var(--spring); } .switch.on { background: var(--ok); } .switch.on::after { transform: translateX(18px); } .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 40px 20px; color: var(--muted); } .empty .orb { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: var(--text); position: relative; isolation: isolate; background: var(--lg-bg); border: 1px solid var(--lg-border); box-shadow: var(--lg-hi), var(--lg-shadow); } .empty .orb::before { content: ''; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, #538d22, #245501, #cdf2a0, #fde68a, #538d22); filter: blur(18px); opacity: .55; animation: spin 9s linear infinite; } .skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--card-2) 25%, var(--card-3) 50%, var(--card-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; } .stagger > * { animation: rise 460ms var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); } .platform { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; color: #fff; flex: none; font-size: 11px; font-weight: 800; } .platform.facebook { background: var(--fb); } .platform.instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); } .platform.tiktok { background: #111; box-shadow: -1.5px 0 #25f4ee, 1.5px 0 #fe2c55; } .platform.youtube { background: var(--yt); } /* ── modal / hoja / toast: liquid glass denso (legible sobre cualquier cosa) ── */ .modal-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(8, 8, 24, .38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade var(--t) var(--ease) both; } .modal { position: relative; isolation: isolate; width: min(520px, 100%); max-height: 88vh; max-height: 88dvh; overflow: auto; border-radius: var(--r-xl); padding: 22px; animation: modal-in 420ms var(--spring) both; background: var(--solid); background: color-mix(in srgb, var(--solid) 86%, transparent); border: 1px solid var(--lg-border); box-shadow: var(--lg-hi), var(--shadow-lg); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); } .modal.wide { width: min(920px, 100%); } .modal h2 { margin-bottom: 4px; } .modal-back.closing { animation: fade var(--t-fast) var(--ease) reverse both; } .modal-back.closing .modal { animation: modal-in var(--t-fast) var(--ease) reverse both; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .modal-grab { display: none; } .modal-body { margin-top: 14px; } .modal-head > .grow { min-width: 0; } #toasts { position: fixed; z-index: 200; left: 50%; top: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; } .toast { pointer-events: auto; position: relative; isolation: isolate; min-width: 260px; max-width: 380px; display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 20px; cursor: pointer; background: var(--solid); background: color-mix(in srgb, var(--solid) 72%, transparent); border: 1px solid var(--lg-border); box-shadow: var(--lg-hi), var(--lg-shadow); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); animation: toast-in 420ms var(--spring) both; } .toast.out { animation: toast-in var(--t) var(--ease) reverse both; } .toast .t-text { overflow-wrap: anywhere; } .toast .t-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--text); } .toast.ok .t-icon { background: var(--ok-soft); color: var(--ok); } .toast.error .t-icon, .toast.alert .t-icon { background: var(--danger-soft); color: var(--danger); } .toast.warn .t-icon { background: var(--warn-soft); color: var(--warn); } /* ── aviso de conexión: píldora discreta arriba (se cayó el tiempo real / volvió) ── */ #net-pill { position: fixed; z-index: 190; left: 50%; top: calc(12px + var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--text); pointer-events: none; background: var(--solid); background: color-mix(in srgb, var(--solid) 80%, transparent); border: 1px solid var(--lg-border); box-shadow: var(--lg-hi), var(--lg-shadow); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); animation: net-in 420ms var(--spring) both; } #net-pill.out { animation: net-in var(--t) var(--ease) reverse both; } @keyframes net-in { from { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(.94); } } #net-pill .np-dot { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--card-3); border-top-color: var(--warn); animation: spin .8s linear infinite; flex: none; } #net-pill.off .np-dot, #net-pill.ok .np-dot { animation: none; border: 0; width: 9px; height: 9px; margin: 0 3px; background: var(--danger); } #net-pill.ok .np-dot { background: var(--ok); } html.net-pill-on #toasts { top: calc(60px + var(--safe-t)); } /* ── login ── */ .auth-wrap { flex: 1; display: grid; place-items: center; padding: 20px; overflow: auto; } .auth-card { position: relative; isolation: isolate; width: min(420px, 100%); padding: 32px; border-radius: 34px; background: var(--lg-bg); border: 1px solid var(--lg-border); box-shadow: var(--lg-hi), var(--shadow-lg); backdrop-filter: blur(34px) saturate(190%); -webkit-backdrop-filter: blur(34px) saturate(190%); animation: modal-in 600ms var(--spring) both; } .auth-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--lg-sheen); pointer-events: none; } .auth-card .logo-xl { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; color: #fff; font-size: 30px; font-weight: 800; margin-bottom: 18px; background: #143601; box-shadow: 0 14px 30px rgba(10, 30, 2, .35), inset 0 1px 0 rgba(255, 255, 255, .25); } :root[data-theme='dark'] .auth-card .logo-xl { background: var(--primary); box-shadow: 0 14px 34px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .3); } .auth-card .input { background: var(--solid); background: color-mix(in srgb, var(--solid) 55%, transparent); } :root[data-theme='dark'] .auth-card .input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); } /* ── arranque: logo latiendo mientras carga la app (index.html lo trae ya dibujado; el primer mount lo reemplaza) ── */ .boot { flex: 1; display: grid; place-items: center; } .boot-logo { width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; color: #fff; font-size: 36px; font-weight: 800; background: #143601; box-shadow: 0 18px 40px rgba(10, 30, 2, .35), inset 0 1px 0 rgba(255, 255, 255, .25); animation: boot-beat 1.5s var(--ease) infinite; } :root[data-theme='dark'] .boot-logo { background: var(--primary); box-shadow: 0 18px 44px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .3); } @keyframes boot-beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.93); opacity: .82; } } /* ── animaciones ── */ @keyframes shell-in { from { opacity: 0; transform: scale(.985) translateY(10px); } } @keyframes view-in { from { opacity: 0; transform: translateY(10px); } } @keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } } @keyframes fade { from { opacity: 0; } } @keyframes modal-in { from { opacity: 0; transform: translateY(26px) scale(.96); } } @keyframes toast-in { from { opacity: 0; transform: translateY(-26px) scale(.94); } } @keyframes pop { from { transform: scale(0); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 179, 80, .55); } 70% { box-shadow: 0 0 0 9px rgba(47, 179, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 179, 80, 0); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { to { background-position: -200% 0; } } @keyframes wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } } .wave { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; } .wave i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; animation: wave 900ms var(--ease) infinite; } .wave i:nth-child(2) { animation-delay: -.25s; } .wave i:nth-child(3) { animation-delay: -.5s; } .wave i:nth-child(4) { animation-delay: -.15s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } } /* ── móvil ── */ @media (max-width: 860px) { html { background: var(--backdrop); background-attachment: fixed; } /* nunca negro detrás de la app */ #app { padding: 0; } .shell { border-radius: 0; border: 0; box-shadow: none; } .rail { display: none; } .bottom-nav { display: flex; } :root, :root[data-theme='light'] { --frame: rgba(247, 250, 243, .92); } :root[data-theme='dark'] { --frame: rgba(8, 14, 6, .8); } .view-head { padding: calc(14px + var(--safe-t)) 16px 10px; } .view-body { padding: 4px 16px calc(96px + var(--safe-b)); } .col-list { width: 100%; border: 0; padding-bottom: calc(96px + var(--safe-b)); } .col-side { display: none; } .view-cols > .col-main { display: none; } .view-cols.show-main > .col-main { display: flex; } .view-cols.show-main > .col-list { display: none; } /* Esconder la nav: 140% de su propio alto alcanzaba en el navegador, pero en la app instalada la pastilla está 34px más arriba (barra de gestos) y asomaba un dedo de pastilla abajo de la conversación / de la llamada. Se corre por debajo del borde real. */ /* Al entrar a una conversación el menú tardaba 480 ms en irse y, como va POR ENCIMA de la conversación, en ese rato tapaba la caja de escribir y se comía el toque. Ahora se apaga al instante (no recibe toques y se desvanece en 120 ms) mientras termina de deslizarse. */ body.immersive .bottom-nav { transform: translateX(-50%) translateY(calc(100% + 12px + var(--safe-b) + 24px)); opacity: 0; pointer-events: none; } .bottom-nav { transition: transform var(--t-slow) var(--ease), opacity 120ms linear; } #toasts { left: 12px; right: 12px; top: calc(10px + var(--safe-t)); transform: none; align-items: stretch; } .toast { min-width: 0; max-width: none; } .modal-back { align-items: end; padding: 0; } .modal, .modal.wide { width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(22px + var(--safe-b)); max-height: 92vh; max-height: 92dvh; } @keyframes modal-in { from { transform: translateY(100%); } } } @media (min-width: 861px) { .only-mobile { display: none !important; } } @media (max-width: 860px) { .only-desktop { display: none !important; } } /* ═══ CELULAR · reglas globales de usabilidad (no negociables) ═══ */ @media (max-width: 860px) { /* Con letra <16px iOS hace ZOOM al enfocar un campo y descuadra toda la app. */ input, select, textarea, .input, .select, .textarea { font-size: 16px !important; } /* Objetivos táctiles: mínimo 40–44px. */ .btn { height: 46px; } .btn.sm { height: 40px; padding: 0 14px; } .btn.lg { height: 52px; } .btn.icon { width: 46px; } .btn.icon.sm { width: 40px; } .chip { height: 40px; } .tab { height: 40px; padding: 0 16px; } .input, .select { height: 48px; } .list-row { min-height: 52px; } .switch::before { content: ''; position: absolute; inset: -9px -4px; } /* agranda la zona de toque sin cambiar el dibujo */ .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: none; } .view-head h1 { font-size: 24px; } .bottom-nav { -webkit-user-select: none; user-select: none; } } /* ═══ CELULAR · cascarón (plataforma): app instalada, notch, hojas, teclado, horizontal ═══ */ @media (max-width: 860px) { :root { --nav-h: calc(78px + var(--safe-b)); } body.immersive, html.has-modal { --nav-h: 0px; } /* Con el teclado arriba no hay barra de inicio que esquivar: el hueco de abajo sobra y deja las cajas de escribir flotando. */ :root.kb-open { --safe-b: 0px; } /* Agregada a la pantalla de inicio (standalone): la app ocupa TODA la pantalla, de borde a borde, sin marco ni franjas. Antes el marco arrancaba debajo del notch con `padding` en #app; si la medida del navegador no coincidía con la pantalla real quedaba una franja negra abajo (se veía "de app pirata"). Ahora el marco cubre todo y son las CABECERAS las que dejan el aire del notch (usan var(--safe-t)); abajo cada pantalla ya respeta var(--safe-b). OJO: .shell lleva backdrop-filter → es el BLOQUE CONTENEDOR de todo `position: fixed` que viva adentro; como ahora arranca en 0, --app-top vale 0 y el alto útil es --app-h. */ #app { padding: 0; } .shell { border-radius: 0; border: 0; } .shell > * { --app-top: 0px; } body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--safe-t); z-index: 250; pointer-events: none; } /* La tinta tiene que MORIR en transparente: cortándola en .34 quedaba una raya dura al pie del notch (se veía como una barra gris sobre las hojas blancas y sobre el fondo del login). Arriba sigue bien opaca, que es donde iOS dibuja hora, señal y batería. */ :root[data-theme='light'] body::before { background: linear-gradient(to bottom, rgba(10, 11, 20, .8) 0%, rgba(10, 11, 20, .5) 45%, rgba(10, 11, 20, .16) 78%, rgba(10, 11, 20, 0) 100%); } button, .chip, .tab, .bottom-nav, .avatar, .pill, .badge { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .bottom-nav button { min-width: clamp(54px, 16.5vw, 68px); } html.has-modal .bottom-nav { transform: translateX(-50%) translateY(calc(100% + 12px + var(--safe-b) + 24px)); } /* avisos compactos: en el teléfono no pueden tapar media pantalla ni transparentar el texto de atrás */ #toasts { gap: 8px; } .toast { padding: 10px 14px 10px 10px; border-radius: 18px; gap: 10px; align-items: center; background: var(--solid); background: color-mix(in srgb, var(--solid) 90%, transparent); } .toast .t-text > div:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── modal → HOJA inferior: agarradera, cabecera fija, cuerpo con scroll propio, acciones siempre visibles; se achica con el teclado ── */ .modal-back { padding: 0; padding-top: calc(8px + var(--safe-t)); padding-bottom: var(--kb, 0px); align-items: end; } /* En el teléfono la hoja tapa casi toda la pantalla: con 86% de opacidad el fondo desenfocado la ensuciaba (en claro se veía gris). */ .modal, .modal.wide { display: flex; flex-direction: column; overflow: hidden; padding: 0; max-height: calc(100vh - 8px - var(--safe-t) - var(--kb, 0px)); max-height: calc(100dvh - 8px - var(--safe-t) - var(--kb, 0px)); will-change: transform; background: var(--solid); background: color-mix(in srgb, var(--solid) 95%, transparent); } .modal-grab { display: block; flex: none; width: 100%; height: 22px; position: relative; touch-action: none; cursor: grab; } .modal-grab::after { content: ''; position: absolute; left: 50%; top: 9px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--card-3); } .modal-head { flex: none; align-items: flex-start; padding: 2px 16px 12px 20px; touch-action: none; } .modal-head h2 { font-size: 21px; overflow-wrap: anywhere; } .modal-head p { margin-top: 2px; } .modal-head .btn.icon.sm { width: 40px; height: 40px; flex: none; } .modal-body { flex: 1 1 auto; min-height: 0; margin-top: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 2px 20px calc(22px + var(--safe-b)); } .modal-actions { flex: none; margin: 0; padding: 12px 20px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--card-2); } .modal-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; height: 50px; font-size: 15px; } .modal-body:not(:last-child) { padding-bottom: 16px; } html.kb-open .modal-body { padding-bottom: 16px; } html.kb-open .modal-actions { padding-bottom: 12px; } /* con teclado no hay barra de inicio que esquivar */ .modal-back.closing .modal.dragged { animation: none; } /* ── hoja "Más": perfil + lista agrupada estilo app nativa ── */ .sheet-me { width: 100%; display: flex; align-items: center; gap: 14px; padding: 2px 2px 16px; text-align: left; } .sheet-me .sm-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; } .sheet-me > .icon { color: var(--muted); } .sheet-group { border-radius: var(--r-lg); background: var(--card-2); overflow: hidden; } .sheet-group + .sheet-group { margin-top: 12px; } .sheet-row { position: relative; width: 100%; min-height: 56px; display: flex; align-items: center; gap: 14px; padding: 8px 14px; text-align: left; font-size: 15px; font-weight: 600; color: var(--text); transition: background var(--t-fast) var(--ease); } button.sheet-row:active { background: var(--card-3); } .sheet-row + .sheet-row::before { content: ''; position: absolute; left: 62px; right: 0; top: 0; height: 1px; background: var(--line); } .sheet-row .sr-ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--solid); color: var(--text); box-shadow: var(--shadow); } :root[data-theme='dark'] .sheet-row .sr-ic { background: var(--card-3); box-shadow: none; } .sheet-row .sr-chev { color: var(--muted); width: 18px; height: 18px; } .sheet-row .badge { animation: none; } .sheet-row.danger { color: var(--danger); } .sheet-row.danger .sr-ic { background: var(--danger-soft); color: var(--danger); box-shadow: none; } .sr-switch { position: relative; width: 50px; height: 30px; border-radius: 15px; background: var(--card-3); transition: background var(--t) var(--ease); flex: none; } .sr-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform var(--t) var(--spring); } .sr-switch.on { background: var(--ok); } .sr-switch.on::after { transform: translateX(20px); } .sheet-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--card-3); flex: none; } .sheet-seg button { height: 40px; min-width: 46px; padding: 0 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); } .sheet-seg button.active { background: var(--solid); color: var(--text); box-shadow: var(--shadow); } :root[data-theme='dark'] .sheet-seg button.active { background: rgba(255, 255, 255, .16); box-shadow: var(--lg-hi); } .sheet-steps { display: flex; flex-direction: column; gap: 12px; counter-reset: paso; margin: 0; padding: 0; } .sheet-steps li { list-style: none; display: flex; gap: 12px; align-items: center; font-size: 15px; } .sheet-steps li::before { counter-increment: paso; content: counter(paso); width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--primary); color: var(--on-primary); } /* ── login / primer arranque ── */ /* #app ya aparta el notch y los costados (arriba): acá solo falta el hueco de abajo. Sumarlo de nuevo dejaba la tarjeta 84px corrida hacia abajo. */ .auth-wrap { padding: 20px 16px calc(20px + var(--safe-b)); } .auth-card { padding: 28px 22px 24px; border-radius: 30px; background: var(--lg-bg); background: color-mix(in srgb, var(--solid) 72%, transparent); } .auth-card h1 { font-size: 27px; } .auth-card > p.muted { color: var(--text-2); font-size: 15px; } .auth-card .btn { width: 100%; height: 52px; font-size: 15px; } /* en oscuro los campos del login eran negro sobre negro (no se veía dónde tocar): mismo relleno que los campos de las hojas + borde fino */ :root[data-theme='dark'] .auth-card .input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); } :root[data-theme='dark'] .auth-card .input:focus { background: rgba(255, 255, 255, .1); border-color: var(--accent); } html.kb-open .auth-wrap { place-items: start center; padding-bottom: calc(16px + var(--kb, 0px)); } } /* ── teléfono en HORIZONTAL (poco alto): la nav pasa a ser una pastilla vertical a la izquierda y las hojas no ocupan todo el ancho ── */ @media (max-width: 860px) and (orientation: landscape) and (max-height: 520px) { :root { --nav-h: 0px; } /* 84 = 9 (borde) + 66 (pastilla) + 9 de aire: con 74 la pastilla flotante quedaba pegada (y 1px encima) del marco. */ #app { padding-left: calc(84px + var(--safe-l)); } body.immersive #app { padding-left: var(--safe-l); } .shell { border-radius: 24px min(var(--safe-r), 24px) min(var(--safe-r), 24px) 24px; } .bottom-nav { left: calc(9px + var(--safe-l)); top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; padding: 6px; } .bottom-nav button { min-width: 0; width: 54px; height: clamp(44px, 16vh, 52px); font-size: 9.5px; } body.immersive .bottom-nav, html.has-modal .bottom-nav { transform: translateY(-50%) translateX(-170%); } .modal, .modal.wide { width: min(600px, 100%); margin: 0 auto; } .modal-back { padding-top: 6px; } .modal-head h2 { font-size: 18px; } .modal-actions .btn { height: 46px; } #toasts { left: auto; right: calc(12px + var(--safe-r)); width: min(380px, 60vw); } .auth-wrap { place-items: start center; padding-top: 12px; padding-bottom: 12px; } .auth-card { padding: 18px 22px; } .auth-card .logo-xl { display: none; } .auth-card h1 { font-size: 22px; } .auth-card > p.muted { margin: 2px 0 10px !important; font-size: 13.5px; } .auth-card form { gap: 8px !important; } .auth-card .input { height: 44px; } .auth-card .btn { height: 46px; } } /* Teléfonos grandes en horizontal caen en el layout de escritorio (>860px de ancho): el riel tiene que entrar en ~400px de alto. */ @media (min-width: 861px) and (max-height: 560px) { #app { padding: 6px max(6px, var(--safe-r)) 6px max(6px, var(--safe-l)); } .rail { padding: 8px 0; gap: 2px; overflow-y: auto; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail .logo { display: none; } .rail-btn { width: 42px; height: 42px; flex: none; } .rail .spacer { min-height: 4px; } } /* ═══ Soundboard de sala ═══ */ .sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } .sb-key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 86px; padding: 10px 6px; border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--line); transition: transform var(--t-fast) var(--spring), background var(--t) var(--ease), opacity var(--t) var(--ease); } .sb-key:hover { background: var(--card-3); transform: translateY(-2px); } .sb-key:active { transform: scale(.92); } .sb-key:disabled { opacity: .45; pointer-events: none; } .sb-key-emoji { font-size: 30px; line-height: 1; } .sb-key-label { font-size: 12px; font-weight: 700; color: var(--text-2); text-align: center; } .sb-layer { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; } .sb-burst { position: absolute; bottom: calc(110px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 6px; animation: sb-rise 2.5s var(--ease) both; } .sb-burst-emoji { font-size: 54px; line-height: 1; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); animation: sb-wobble .5s var(--spring) both; } .sb-burst-who { padding: 4px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; background: rgba(12, 12, 24, .62); } @keyframes sb-rise { 0% { opacity: 0; transform: translateY(30px) scale(.6); } 12% { opacity: 1; transform: translateY(0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46vh) scale(1.05); } } @keyframes sb-wobble { 0% { transform: rotate(-18deg) scale(.4); } 60% { transform: rotate(10deg) scale(1.15); } 100% { transform: none; } } @media (max-width: 860px) { .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sb-key { min-height: 92px; } } .sb-slot { position: relative; display: flex; } .sb-slot .sb-key { width: 100%; } .sb-del { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--danger); color: #fff; opacity: 0; transform: scale(.7); transition: all var(--t) var(--spring); } .sb-del .icon { width: 15px; height: 15px; } .sb-slot:hover .sb-del, .sb-del:focus-visible { opacity: 1; transform: none; } @media (hover: none) { .sb-del { opacity: 1; transform: none; } } .sb-key.sb-add { border-style: dashed; color: var(--muted); } .sb-key.sb-add .sb-key-emoji { font-size: 26px; } .sb-emojis { display: flex; flex-wrap: wrap; gap: 6px; } .sb-emoji { width: 44px; height: 44px; border-radius: var(--r-md); font-size: 20px; background: var(--card-2); transition: all var(--t) var(--ease); } .sb-emoji:hover { background: var(--card-3); } .sb-emoji.on { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); } /* Marca "Central Mangy's" (2026-09-30): el ícono y el logotipo son imágenes (public/icons), ya no la letra N */ img.boot-logo, img.ck-logo, .rail img.logo { background: none !important; box-shadow: none !important; object-fit: contain; display: block; padding: 0; border-radius: 0; filter: drop-shadow(0 8px 16px rgba(10, 30, 2, .28)); } .rail img.logo { width: 46px; height: 46px; margin-bottom: 10px; filter: none; } .auth-marca { margin-bottom: 20px; } .auth-marca img { height: 62px; width: auto; max-width: 100%; display: block; } :root[data-theme='dark'] .solo-claro { display: none !important; } :root:not([data-theme='dark']) .solo-oscuro { display: none !important; } @media (max-width: 860px) { .auth-marca { margin-bottom: 14px; } .auth-marca img { height: 50px; } .rail img.logo { display: none; } } .auth-marca { display: flex; justify-content: center; } /* logo centrado en la tarjeta del login (pedido 2026-09-30) */