/* ════════════════════════════════════════════════════════════════════════════════════════════ native-materials.css — sistema COMPARTIDO de "sensación nativa" para elementos flotantes móviles (Aluna Workspace, ronda de rediseño de toolbars móviles, arrancada por Correo — decisión del usuario: esto NO es un arreglo local de Correo, es la base que Agenda y luego Contactos/Tareas/ Notas van a reusar tal cual en pasadas futuras, así que las clases van namespaced genéricas `.native-*` sin "mail-"/"agenda-"/etc. Cero dependencias/librerías externas — mismo criterio de "componentes propios" que el resto del proyecto. Referencia visual real (captura del propio usuario de Mail/Recordatorios de iOS): elementos de acción flotan SEPARADOS del borde de pantalla (no barras pegadas de borde a borde), con material traslúcido de verdad — el contenido que hace scroll DEBAJO se ve difuminado A TRAVÉS del elemento, no solo un tinte plano. Android/Material 3 usa el lenguaje contrario a propósito: superficie sólida con tinte de marca + elevación real (sombra), SIN blur — son sistemas de diseño distintos, no el mismo efecto con otro nombre. Ambos ramifican por el atributo `data-os` que `js/api-fetch.js:210` ya escribe en `` por User-Agent al arrancar la app. Piezas de este archivo: 1) .native-fab — botón circular de acción primaria flotante (compose, "+", etc.) 2) .native-float-pill — barra/píldora flotante redondeada (búsqueda, filtros rápidos) 3) .native-bottom-toolbar — barra de acciones inferior de ancho completo (+ .native-bottom-toolbar-btn) 4) .native-bottom-sheet — hoja deslizante desde abajo con lista de filas (menú "Más"/overflow) Todas viven por encima de #bottom-nav (56px + safe-area, css/app.css) Y por encima de la zona que ya ocupa `.larry-fab` (css/app.css, botón GLOBAL de Larry — visible en TODAS las pantallas <768px, no solo dentro de un módulo, así que SIEMPRE compite por el mismo rincón inferior- derecho que un FAB de módulo). BUG REAL encontrado y cerrado (2026-07-14, "¿y dónde queda Larry?" — el primer consumidor, Correo, puso su FAB de "Redactar" en la MISMA posición exacta que `.larry-fab` con z-index MÁS ALTO, tapándolo por completo en Correo móvil): `--native-fab-y` (variable de abajo) empuja TODA la fila flotante (FAB + píldora + barra inferior) por encima de la zona de Larry en vez de compartirla. Cualquier módulo nuevo que use `.native-fab`/ `.native-float-pill`/`.native-bottom-toolbar` hereda esto gratis — NO reposicionar Larry, NO bajar el z-index de estas clases para "esconderse detrás" de él (Larry debe seguir encima visualmente Y accesible, es el asistente global, no algo que un módulo pueda tapar). Contrato de consumo (ver css/mail.css para el primer caso real): el módulo consumidor SOLO añade lo que es específico de su dominio (qué botones, qué iconos, qué colores de acción destructiva) encima de estas clases — NUNCA vuelve a declarar blur/tinte/sombra/forma/posición base aquí documentados, así el próximo módulo (Agenda) hereda el mismo tratamiento sin reinventarlo. Registrado en index.html DESPUÉS de todas las hojas de estilo estáticas de módulo (mail.css, mail-composer.css, tasks.css…) a propósito: los módulos declaran su look base sin @media, y este archivo solo activa el tratamiento flotante <880px — al cargar último, sus reglas móviles ganan los empates de especificidad contra la regla base (misma especificidad, últimas en cascada ganan) sin depender de !important. Los módulos cargados de forma perezosa más tarde (agenda.css vía loadStyleOnce) igual pueden sobreescribir puntualmente lo suyo — su se inyecta en en tiempo de ejecución, después de este archivo, así que conservan la última palabra si la necesitan. ════════════════════════════════════════════════════════════════════════════════════ */ /* Umbral compartido: el mismo <880px "o retrato angosto de teléfono en horizontal" que ya usa mail.css (.mail-tree-sheet/.mail-body) — ver ese archivo para el porqué de la segunda condición OR (landscape de iPhone grande, altura corta + puntero grueso). Los módulos futuros que adopten este archivo con OTRO breakpoint pueden simplemente reabrir estas clases en su propio @media más específico; no hay nada aquí atado al layout de 3 paneles de Correo. */ /* Offsets compartidos verticales: - `.larry-fab` (css/app.css) ocupa bottom:calc(56px + safe-area + 14px) con 56px de alto — su "techo" real queda en 56px + safe-area + 70px. `--native-float-y` es ESE techo + 12px de aire, el punto de partida para los elementos flotantes de ANCHO COMPLETO o de la columna derecha (FAB de módulo, barra de acciones) — así ningún consumidor puede tapar a Larry por accidente como pasó la primera vez. - `--native-pill-y` (misma banda que Larry, bottom + 14px): SOLO para la píldora flotante, que NO llega a la columna derecha (deja 72px reservados, ver .native-float-pill) y por eso puede convivir al lado de Larry sin tocarlo. Antes la píldora usaba --native-float-y y quedaba a 138px del borde con una franja de ~82px de fondo vacío debajo (Larry solo ocupa la esquina derecha de esa banda) — "no llena el tamaño de la pantalla", bug real reportado con capturas de iPhone y Mac Safari. */ :root { --native-float-y: calc(56px + env(safe-area-inset-bottom,0px) + 82px); --native-pill-y: calc(56px + env(safe-area-inset-bottom,0px) + 14px); /* IOS-1 (auditoría cierre F8.3/F8.5/F9, MEDIUM confirmado): footprint HORIZONTAL de .larry-fab (css/app.css — 56px de ancho + 16px de right + aire) en su propia variable, 3ª vez que un consumidor DOCKED (no flotante — ver --native-float-y arriba, que es para flotantes) necesita despejarlo a mano con el mismo calc() repetido (primer caso real: css/chat.css .chat-composer, hallazgo del usuario 2026-07-17). Todo consumidor nuevo usa esta variable en vez de repetir "56px + 16px + Npx". */ --larry-fab-reserve-x: calc(56px + 16px + 12px); } /* ── 1 · FAB — botón de acción primaria circular flotante ("Redactar", "+", etc.) ────────────── Sólido (NO traslúcido) a propósito: es el elemento de MÁS peso visual de la pantalla, un botón de acción, no una superficie que deje ver contenido detrás — mismo criterio que .yt-fab/.larry-fab (css/app.css) ya usan. iOS/Android comparten la misma forma; solo cambia la sombra (iOS: difusa/ grande = "elevación suave"; Android/M3: sombra de contacto nítida + difusión, "elevación nivel 3" de un FAB real). */ .native-fab { display:none; } @media (max-width:879px), (max-height:500px) and (pointer:coarse) and (max-width:960px) { .native-fab { display:flex; align-items:center; justify-content:center; /* IOS-4: max() con safe-area-inset-right — esta media query también activa en landscape angosto de iPhone (rama max-height:500px), donde el notch/Dynamic Island desplaza el área segura al lateral; .native-bottom-toolbar ya lo hacía bien, esto lo iguala aquí. */ position:fixed; right:max(16px, env(safe-area-inset-right,0px)); z-index:calc(var(--z-sidebar,10) + 22); bottom:var(--native-float-y); width:56px; height:56px; border-radius:50%; border:none; background:var(--yt-orange, var(--brand-primary,#C7F000)); color:#111; font-size:20px; line-height:1; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.16); } .native-fab:active { transform:scale(.94); } /* PC-1(b): desktop (p.ej. Surface/2-en-1 con touchscreen) NO es iOS — sin esta regla explícita caía en la base de arriba (documentada como tratamiento Liquid Glass de iOS) por no tener rama propia. Mismo patrón sólido+sombra sin blur que ya usa [data-os="android"] (el criterio "sin blur" es "cualquier plataforma que no sea iOS 18+", no exclusivo de Android); el fallback :not([data-os="ios"]):not([data-os="android"]) cubre el caso de que el atributo llegue vacío u otro valor no contemplado (js/api-fetch.js:210 solo escribe ios|android|desktop). */ :root[data-os="android"] .native-fab, :root[data-os="desktop"] .native-fab, :root:not([data-os="ios"]):not([data-os="android"]) .native-fab { /* M3 FAB elevation nivel 3: sombra de contacto nítida (offset chico, blur chico) + difusión amplia por debajo — más "cortada" que la versión iOS, sin cambiar forma/color/posición. */ box-shadow:0 1px 3px rgba(0,0,0,.35), 0 8px 20px -4px rgba(0,0,0,.3); } /* AND-3: feedback táctil M3 = state-layer de fondo, no el scale+atenuado de iOS — el botón NO se encoge, solo gana un tinte oscuro ~12% sobre su propio color de superficie. */ :root[data-os="android"] .native-fab:active { transform:none; background:color-mix(in srgb, #000 12%, var(--yt-orange, var(--brand-primary,#C7F000))); } } /* ── 2 · Píldora flotante (búsqueda, filtros rápidos) ──────────────────────────────────────────── Cápsula redondeada (radius:999px) que flota CON separación real del borde de pantalla (no pegada de lado a lado) — Liquid Glass real en iOS: blur+saturate lo bastante fuerte para que el contenido que scrollea DEBAJO se note difuminado a través, no solo un tinte plano casi imperceptible (queja real repetida del usuario sobre el intento anterior). Android/M3: superficie tintada + sombra, sin blur — mismo criterio que el resto de este archivo. Deja hueco a la derecha para un .native-fab hermano (56px + 16px de aire + 16px de margen del borde ≈ 88px) — si un consumidor no tiene FAB al lado, puede sobreescribir `right` puntualmente. */ .native-float-pill { display:none; } @media (max-width:879px), (max-height:500px) and (pointer:coarse) and (max-width:960px) { .native-float-pill { display:flex; align-items:center; /* IOS-4: max()+env() en ambos lados — mismo motivo que .native-fab arriba (landscape angosto de iPhone con notch/Dynamic Island lateral). `right` conserva el hueco para el FAB hermano (56px de ancho + 16px de aire = 72px) sumado al borde seguro real del FAB (max(16px,env-right)). */ position:fixed; left:max(16px, env(safe-area-inset-left,0px)); right:calc(max(16px, env(safe-area-inset-right,0px)) + 72px); z-index:calc(var(--z-sidebar,10) + 21); bottom:var(--native-pill-y); /* banda de Larry, no la fila alta — ver :root arriba */ height:48px; border-radius:999px; padding:0 14px; background:color-mix(in srgb, var(--surface-1,var(--bg-surface)) 68%, transparent); -webkit-backdrop-filter:blur(26px) saturate(1.9); backdrop-filter:blur(26px) saturate(1.9); border:0.5px solid color-mix(in srgb, var(--divider,var(--bg-border)) 90%, transparent); box-shadow:0 8px 24px rgba(0,0,0,.22); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .native-float-pill { background:var(--surface-1,var(--bg-surface)); } } /* AND-2: 14% (antes 7%) — alinea con el precedente ya establecido del proyecto (--row-selected en css/tokens-productivity.css: 14%/18% claro-oscuro) en vez de un tinte perceptiblemente más sutil. PC-1(b): mismo fallback desktop/no-ios-no-android que .native-fab arriba. */ :root[data-os="android"] .native-float-pill, :root[data-os="desktop"] .native-float-pill, :root:not([data-os="ios"]):not([data-os="android"]) .native-float-pill { background:color-mix(in srgb, var(--brand-primary,#C7F000) 14%, var(--surface-1,var(--bg-surface))); -webkit-backdrop-filter:none; backdrop-filter:none; border-color:transparent; box-shadow:0 1px 2px rgba(0,0,0,.25), 0 4px 10px -2px rgba(0,0,0,.18); } } /* ── 3 · Barra de acciones inferior de ancho completo (equivalente a "modo edición" de Mail/ bottom app bar de Material 3) — pocas acciones GRANDES con acento de marca, fija justo encima de #bottom-nav. El módulo consumidor decide CUÁNDO mostrarla (p.ej. viendo un hilo, o con selección múltiple activa) alternando con sus propios .native-fab/.native-float-pill — esa lógica de estado es específica de cada módulo y vive en su propio CSS/JS, no aquí. */ .native-bottom-toolbar { display:none; } @media (max-width:879px), (max-height:500px) and (pointer:coarse) and (max-width:960px) { .native-bottom-toolbar { display:flex; align-items:stretch; justify-content:space-around; position:fixed; left:0; right:0; z-index:calc(var(--z-sidebar,10) + 21); bottom:var(--native-float-y); height:56px; padding-left:max(4px, env(safe-area-inset-left,0px)); padding-right:max(4px, env(safe-area-inset-right,0px)); border-top:1px solid color-mix(in srgb, var(--divider,var(--bg-border)) 70%, transparent); background:color-mix(in srgb, var(--surface-1,var(--bg-surface)) 74%, transparent); -webkit-backdrop-filter:blur(24px) saturate(1.8); backdrop-filter:blur(24px) saturate(1.8); box-shadow:0 -8px 24px -4px rgba(0,0,0,.16); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .native-bottom-toolbar { background:var(--surface-1,var(--bg-surface)); } } /* AND-2 (14%, antes 6%) + PC-1(b) (fallback desktop/no-ios-no-android) — mismo motivo que arriba. */ :root[data-os="android"] .native-bottom-toolbar, :root[data-os="desktop"] .native-bottom-toolbar, :root:not([data-os="ios"]):not([data-os="android"]) .native-bottom-toolbar { background:color-mix(in srgb, var(--brand-primary,#C7F000) 14%, var(--surface-1,var(--bg-surface))); -webkit-backdrop-filter:none; backdrop-filter:none; border-top-color:transparent; box-shadow:0 -1px 2px rgba(0,0,0,.25), 0 -3px 10px -2px rgba(0,0,0,.18); } .native-bottom-toolbar-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:1 1 0; min-width:0; padding:6px 2px; background:none; border:none; cursor:pointer; font-family:inherit; color:var(--yt-orange, var(--brand-primary,#C7F000)); font-size:10.5px; font-weight:600; white-space:nowrap; transition:opacity .1s, transform .1s; } .native-bottom-toolbar-btn svg { width:23px; height:23px; stroke-width:1.85; } .native-bottom-toolbar-btn:active { opacity:.5; transform:scale(.94); } .native-bottom-toolbar-btn[disabled] { opacity:.35; pointer-events:none; } /* Modificador genérico para acciones destructivas (Eliminar) — rojo en vez del acento de marca, mismo criterio "system red" de iOS/Android para papelera/borrar. Reusable por cualquier módulo. */ .native-bottom-toolbar-btn.native-danger { color:var(--err,#dc2626); } /* AND-3: state-layer M3 en vez de scale+atenuado de iOS — el botón conserva su tamaño/opacidad completa, solo gana un tinte redondeado de fondo detrás del icono/etiqueta. border-radius local (no toca el layout del botón, que sigue siendo flex column de ancho flexible). */ :root[data-os="android"] .native-bottom-toolbar-btn:active { opacity:1; transform:none; background:color-mix(in srgb, currentColor 12%, transparent); border-radius:10px; } } /* ── 4 · Hoja inferior genérica ("Más"/overflow) — mismo lenguaje visual que .bottom-sheet-panel de css/app.css (handle, esquinas superiores redondeadas, backdrop, slide-up, safe-area), pero namespaced `.native-*` para que cualquier módulo con su propio conjunto de acciones secundarias la reuse sin reinventar el blur/tinte. (`.bottom-sheet-panel` global sigue siendo el mecanismo correcto para menús atados a la navegación inferior de toda la app — bn-global/bn-event, ver js/shell.js; esta pieza es para overflow DENTRO de un módulo con su propio estado, como el "Más" de Correo.) */ .native-bottom-sheet { display:none; } @media (max-width:879px), (max-height:500px) and (pointer:coarse) and (max-width:960px) { .native-bottom-sheet { display:block; position:fixed; inset:0; z-index:calc(var(--z-sidebar,10) + 30); pointer-events:none; opacity:0; transition:opacity .2s ease; } .native-bottom-sheet.open { pointer-events:auto; opacity:1; } .native-bottom-sheet-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); } .native-bottom-sheet-panel { position:absolute; bottom:0; left:0; right:0; max-height:78vh; overflow-y:auto; background:color-mix(in srgb, var(--surface-0,var(--bg-surface)) 88%, transparent); -webkit-backdrop-filter:blur(24px) saturate(1.7); backdrop-filter:blur(24px) saturate(1.7); border-radius:20px 20px 0 0; padding:0 0 env(safe-area-inset-bottom, 0px); transform:translateY(100%); transition:transform .25s cubic-bezier(.32,0,.67,0); box-shadow:0 -4px 32px rgba(0,0,0,.18); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .native-bottom-sheet-panel { background:var(--surface-0,var(--bg-surface)); } } /* AND-2 (14%, antes 6%) + PC-1(b) (fallback desktop/no-ios-no-android) — mismo motivo que arriba. */ :root[data-os="android"] .native-bottom-sheet-panel, :root[data-os="desktop"] .native-bottom-sheet-panel, :root:not([data-os="ios"]):not([data-os="android"]) .native-bottom-sheet-panel { background:color-mix(in srgb, var(--brand-primary,#C7F000) 14%, var(--surface-0,var(--bg-surface))); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 -1px 3px rgba(0,0,0,.3), 0 -8px 16px -4px rgba(0,0,0,.22); } .native-bottom-sheet.open .native-bottom-sheet-panel { transform:translateY(0); } .native-bottom-sheet-handle { width:36px; height:4px; border-radius:2px; background:var(--divider,var(--bg-border)); margin:12px auto 8px; } .native-bottom-sheet-title { padding:0 20px 12px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); border-bottom:1px solid var(--divider,var(--bg-border)); } .native-bottom-sheet-list { padding:6px 0; } /* §7.6 PLAN_MAIL_NATIVE_RESPONSIVE.md (Fase 3, "reagrupar menús sin eliminar acciones"): rótulo de sub-grupo DENTRO de una hoja de opciones — mismo criterio tipográfico que .native-bottom-sheet-title (12px bold mayúsculas, --text-muted) pero sin el borde inferior (ese es del título PRINCIPAL del panel, uno solo) y con menos aire, para que lea como encabezado de sección repetible, no como un segundo título. Compartido — cualquier módulo con una hoja "Más" larga puede agrupar sus filas igual (primer consumidor: Correo). */ .native-bottom-sheet-group-label { padding:14px 20px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); } .native-bottom-sheet-list .native-bottom-sheet-group-label:first-child { padding-top:6px; } .native-bottom-sheet-row { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:0 20px; border:none; background:none; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:500; color:var(--text); text-align:left; } .native-bottom-sheet-row:active { background:var(--surface-2,var(--bg-raised)); } .native-bottom-sheet-row svg { width:19px; height:19px; flex-shrink:0; color:var(--yt-orange, var(--brand-primary,#C7F000)); stroke-width:1.85; } .native-bottom-sheet-row-label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }