. */ .ic-boot__markwrap { position: relative; width: 96px; height: 96px; margin: 0 auto 1.625rem; } .ic-boot__markwrap::before { content: ""; position: absolute; inset: -14px; border-radius: 32px; border: 1px solid var(--ic-brand-ring); animation: ic-boot-pulse 2.6s ease-in-out infinite; } .ic-boot__mark { display: block; width: 96px; height: 96px; border-radius: 24px; object-fit: contain; box-shadow: 0 18px 44px rgba(85, 99, 224, 0.32); animation: ic-boot-float 4s ease-in-out infinite; } .ic-boot__title { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--ic-text); } .ic-boot__tagline { margin: 0.5rem 0 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ic-text-tertiary); } /* Barra indeterminada: sustituye al anillo giratorio. Un spinner dice "esperando"; una barra que avanza dice "cargando", que es lo cierto durante el boot de WASM. */ .ic-boot__bar { width: 180px; height: 3px; margin: 2.375rem auto 0; border-radius: 99px; background: var(--ic-border); overflow: hidden; } .ic-boot__bar span { display: block; width: 34%; height: 100%; border-radius: 99px; background: var(--ic-brand-gradient); animation: ic-boot-bar 1.5s cubic-bezier(.65, .05, .36, 1) infinite; } .ic-boot__hint { margin: 1rem 0 0; min-height: 1.2em; font-size: 0.8125rem; font-weight: 500; line-height: 1.45; color: var(--ic-text-tertiary); } /* Build desplegado. index.html lo rellena desde y lo deja oculto en local (donde el meta sigue siendo el placeholder __IC_BUILD__). */ .ic-boot__version { position: absolute; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); text-align: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ic-text-tertiary); opacity: 0.6; } @keyframes ic-boot-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } } @keyframes ic-boot-pulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.14); opacity: 0.12; } } @keyframes ic-boot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { /* El logo deja de flotar y el halo de latir; la barra sigue avanzando (más lenta), porque es la única señal de que el arranque no se murió. */ .ic-boot__mark, .ic-boot__markwrap::before { animation: none; } .ic-boot__bar span { animation-duration: 3s; } /* Drawer: sin scroll suave ni fades si el usuario pide menos movimiento. */ .mud-drawer.ic-drawer .ic-nav-body { scroll-behavior: auto !important; } .mud-drawer.ic-drawer * { transition-duration: 0.01ms !important; } } /* ── Estado "atorado" (a los 30 s en la PWA, 20 s en MAUI) ── El script añade .ic-boot--stuck: el logo encoge, se paran las animaciones y desaparece la barra, porque a esas alturas ya no está "avanzando" nada. */ .ic-boot--stuck .ic-boot__markwrap, .ic-boot--stuck .ic-boot__mark { width: 72px; height: 72px; animation: none; } .ic-boot--stuck .ic-boot__markwrap::before { display: none; } .ic-boot--stuck .ic-boot__mark { border-radius: 18px; opacity: 0.85; } .ic-boot--stuck .ic-boot__bar, .ic-boot--stuck .ic-boot__tagline { display: none; } .ic-boot--stuck .ic-boot__markwrap { margin-bottom: 1.25rem; } /* En el estado atorado el problema manda: "Esto está tardando" toma el sitio y el peso del título, y la marca se retira. Dejar "Vinali" grande y el aviso pequeño invierte la jerarquía justo cuando el usuario necesita leer qué hacer. */ .ic-boot--stuck .ic-boot__title { display: none; } .ic-boot--stuck .ic-boot__hint { margin-top: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; color: var(--ic-text); } .ic-boot__stuck { margin-top: 0.625rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.625rem; } .ic-boot__stuck-text { margin: 0 auto 1.75rem; max-width: 280px; font-size: 0.9375rem; line-height: 1.5; color: var(--ic-text-tertiary); text-wrap: pretty; } .ic-boot__retry-btn { appearance: none; height: var(--ic-touch-min); border: 0; border-radius: 12px; font-family: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; background: var(--ic-primary); color: #fff; box-shadow: 0 6px 18px var(--ic-brand-ring); } .ic-boot__retry-btn:active { opacity: 0.92; transform: scale(0.98); } .ic-boot__retry-btn--secondary { background: transparent; color: var(--ic-muted); border: 1px solid var(--ic-border); box-shadow: none; } /* Tema claro: el degradado de fondo, el punteado y el halo están calibrados para fondo oscuro; sobre el gris agrupado claro desaparecen. Se suben los alphas, no los tonos. */ html[data-theme="light"] .ic-boot { background: radial-gradient(ellipse 120% 70% at 50% -10%, rgba(85, 99, 224, 0.14), transparent 60%), var(--ic-bg); } html[data-theme="light"] .ic-boot__pattern { background-image: radial-gradient(rgba(71, 85, 105, 0.20) 1px, transparent 1px); } html[data-theme="light"] .ic-boot__markwrap::before { border-color: rgba(85, 99, 224, 0.55); } html[data-theme="light"] .ic-boot__mark { box-shadow: 0 18px 44px rgba(85, 99, 224, 0.22); } /* ── Variables del sistema de diseño (dark) ── */ :root { /* Familia base de TODA la app. Va en este :root y no en uno propio: los tests de paleta leen "el primer bloque :root" como el tema oscuro, así que un :root adelantado les deja la paleta vacía. Antes el mismo "stack de Inter" vivía escrito de CINCO formas distintas (aquí con Helvetica Neue, en auth-shared/crm como 'Inter',sans-serif, en _substrate-mock con system-ui, en mapa.css con otro, y en dos `font:` con -apple-system DELANTE de Inter, o sea que esos dos ni siquiera eran Inter). Cinco respaldos = cinco resultados distintos mientras carga la fuente. No lleva variante clara: la tipografía no cambia con el tema. OJO: la familia de los componentes de MudBlazor NO sale de aquí, sale del tema en C# (MainLayout.razor y SimplePublicLayout.razor). Si cambias una, cambia la otra: hay un test que falla si se separan. */ --ic-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --ic-bg: #000000; --ic-surface: #1C1C1E; --ic-surface-2: #2C2C2E; /* Componentes RGB (sin alpha) de los fondos, para superficies TRANSLÚCIDAS que usan alpha variable: rgba(var(--ic-surface-rgb), 0.92). En oscuro = valores originales (cero regresión); el tema claro los voltea en html[data-theme="light"]. */ --ic-surface-rgb: 28, 28, 30; --ic-surface-2-rgb: 44, 44, 46; --ic-bg-rgb: 0, 0, 0; --ic-border: rgba(84, 84, 88, 0.65); --ic-primary: #5563E0; /* Texto sobre el relleno de marca. Existía disperso como #fff literal en varias hojas; aquí es un token para que las hojas blindadas contra hex puedan usarlo. OJO al medir: blanco sobre --ic-primary da 4.94:1 en LOS DOS TEMAS, porque desde 2026-09-23 el relleno es el mismo hex en ambos: #5563E0, el --primary literal de la landing y del logo v7. Eso cumple AA en texto normal, que es nuevo: el azul de iOS daba 4.7/3.65 y el índigo aclarado de antes 4.9/3.49, y en oscuro ninguno pasaba de texto grande. No volver a aclararlo en oscuro «para que resalte»: eso es justo lo que costaba el punto de contraste. */ --ic-on-primary: #FFFFFF; --ic-primary-dim: rgba(85, 99, 224, 0.15); --ic-text: #FFFFFF; /* Texto secundario/terciario: una sola fuente de verdad = la paleta MudBlazor (PaletteDark en MainLayout.razor). El fallback hex protege antes de que Mud hidrate. Subir el contraste se hace en C# y cae en cascada a estos tokens, a --rq-* y a todo el CSS que ya usa var(--ic-*). Estos valores (alto contraste) son el default oscuro; el tema claro los redefine en html[data-theme="light"]. */ --ic-muted: var(--mud-palette-text-secondary, #AEAEB2); --ic-text-tertiary: var(--mud-palette-action-default, #98989D); --ic-icon-muted: var(--mud-palette-action-default, #98989D); --ic-radius-sm: 8px; --ic-radius-md: 12px; --ic-radius-lg: 16px; --ic-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --ic-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3); /* Hacia ARRIBA: la usan las barras pegajosas al pie de los diálogos de producto. No es --ic-shadow con el signo cambiado: una barra que flota sobre contenido que se desliza por debajo necesita menos desenfoque y menos alfa, o el borde superior se lee como una segunda línea por encima del border-top que ya lleva. */ --ic-shadow-up: 0 -2px 12px rgba(0, 0, 0, 0.18); /* ── Escala de espaciado ──────────────────────────────────────────────── Base 4px para coincidir con las utilidades de MudBlazor (mb-3 = 12px, mb-4 = 16px) y no pelearse con ellas. Regla de proximidad: el espacio DENTRO de un grupo debe ser <= al espacio ALREDEDOR (p. ej. padding de tarjeta space-3 con gutter space-4). */ --ic-space-1: 4px; --ic-space-2: 8px; --ic-space-3: 12px; --ic-space-4: 16px; --ic-space-5: 20px; --ic-space-6: 24px; --ic-space-8: 32px; /* ── Escala tipográfica ───────────────────────────────────────────────── El rem base es el del navegador (16px): no se declara font-size en html/body. Usar estos tokens en vez de literales nuevos. */ --ic-text-xs: 0.75rem; /* 12px — badges/metadatos (piso absoluto) */ --ic-text-sm: 0.875rem; /* 14px — secundario en tarjetas */ --ic-text-md: 0.9375rem; /* 15px — cuerpo legible (piso senior-friendly) */ --ic-text-base: 1rem; /* 16px */ --ic-text-lg: 1.0625rem; /* 17px — títulos de tarjeta/barra */ --ic-text-xl: 1.25rem; /* 20px — título de página */ --ic-text-2xl: 1.5rem; /* 24px — números destacados */ /* ── Mínimo táctil ────────────────────────────────────────────────────── 48px, no 44: la app se usa con guantes de carga y a pleno sol. El contrato de mocks (wwwroot/css/_substrate-mock.css) ya declaraba este token, así que un mock dibujado con él calzaba en el banco y no en la app, donde sólo existía el alias --dr-touch-min. Ahora el nombre del contrato es el que manda y --dr-touch-min hereda de él. */ --ic-touch-min: 48px; /* ── Grosor del hairline ───────────────────────────────────────────────── El separador del calendario y del menú inferior. 1px en pantallas 1x; en 2x y 3x baja a medio píxel físico entero (al final de esta hoja), que es exactamente lo que hace iOS con 1/scale. Un 0.5px fijo desaparecería en un Android de densidad 1 y en escritorio. */ --ic-hairline-w: 1px; /* ── Radio de la tarjeta del calendario ───────────────────────────────── 14px y no --ic-radius-md (12): iOS redondea más lo que va suelto sobre un fondo agrupado. Lo lee calendario-dia.css y el override de más abajo. */ --cal-card-radius: 14px; /* ── Lienzo de firma ──────────────────────────────────────────────────── Blanco en los DOS temas, a propósito: la firma se captura como trazo oscuro sobre blanco, así que sobre el fondo del tema oscuro sería un rectángulo negro. No es un color de marca, es el papel. */ --ic-canvas-firma: #FFFFFF; /* ── Superficies y señales de las pantallas de producto ───────────────── Nacieron en el listado (wwwroot/css/productos-lista.css) y viven aquí desde que la ficha (wwwroot/css/detalle-producto.css) consume las mismas: un token que sirve a dos pantallas no es local a ninguna, y dejarlo en la hoja de una hacía que la otra dependiera de que ésa se hubiera cargado. Conservan el prefijo --pl- de su origen. */ /* Superficie de control (buscador, chips inactivos, pie de tarjeta, hoja). El mock la dibujaba #16242A: un escalón ENTRE --ic-bg y --ic-surface que el sistema no tiene, porque --ic-surface-2 va en el sentido contrario (más claro que la tarjeta). En oscuro se reconstruye mezclando; en claro el escalón correcto sí existe y es --ic-surface-2. */ --pl-control: color-mix(in srgb, var(--ic-surface) 62%, var(--ic-bg)); --pl-control-hover: color-mix(in srgb, var(--ic-surface) 34%, var(--ic-bg)); /* Hover del relleno de acento (#A7B0FF en el mock). Mezclar contra el TEXTO y no contra blanco hace que aclare en oscuro y oscurezca en claro solo. */ --pl-accent-hover: color-mix(in srgb, var(--lc-accent) 85%, var(--ic-text)); /* Fondo del hueco de foto y color de su icono. */ --pl-photo-bg: color-mix(in srgb, var(--ic-text) 7%, transparent); --pl-photo-ico: color-mix(in srgb, var(--ic-text-tertiary) 55%, transparent); /* Velo de la pastilla de unidades. IGUAL EN LOS DOS TEMAS a propósito: va encima de la foto del producto, no de la superficie de la app, así que voltearlo con el tema la dejaría ilegible sobre fotos claras. Mismo criterio que ya llevaban los chips de ProductoCard. */ --pl-photo-scrim: rgba(2, 6, 23, 0.78); --pl-photo-scrim-line: color-mix(in srgb, var(--ic-muted) 22%, transparent); /* Línea suave (separadores dentro de la hoja). */ --pl-hairline: color-mix(in srgb, var(--ic-border) 60%, transparent); /* Tinta oscura de las etiquetas sobre la foto. Fija en los dos temas, como su relleno: si volteara con el tema, en claro quedaría texto claro sobre un relleno claro. */ --pl-on-tag: rgb(0, 0, 0); --pl-on-scrim: rgb(242, 247, 251); /* El acento de la etiqueta «Paquete» NO usa --lc-accent-rgb porque ése SÍ se voltea en tema claro (es el único --lc-*-rgb que lo hace), y el índigo oscuro de claro con tinta oscura encima se quedaba en 4.28:1. Los demás -rgb no voltean, así que fijarlo aquí además los deja a todos coherentes: una etiqueta sobre una foto no debe cambiar con el tema de la app. */ --pl-tag-accent-rgb: 85, 99, 224; /* ── Canalón de las pantallas de detalle ──────────────────────────────── El margen lateral del contenido en /rentas/{id}, /registrar-entrega, /productos/{id} y /asignar-renta. Va en :root y no en cada hoja porque el encabezado a sangre lo LEE para desbordarlo (PageHeader.razor.css): si las dos mitades no salen del mismo número, el encabezado acaba corrido respecto a las tarjetas, que es como se descubrió. No lo consume ningún MudContainer por su cuenta: hace falta .ic-page-gutter. */ --ic-page-gutter: var(--ic-space-3); /* ── Contrato de página: canalón y ancho del contenido ────────────────── ÚNICO sitio donde se decide cuánto respira el contenido de una página contra los filos y hasta dónde se estira en una pantalla ancha. Lo consume .ic-content-wrap (más abajo en esta misma hoja), que es el MudContainer del layout, y .ic-viewport-page para las inmersivas. Van en app.css y no en MainLayout.razor.css porque ese archivo es CSS scoped y el MudContainer no lleva su atributo [b-…]: allí no aplicarían. Ninguna página declara max-width ni padding lateral por su cuenta: el ancho se elige por MODO (normal / --angosto / --denso), no por medida. Antes esto no existía y el canalón salía de tres sitios que no se hablaban: el gutter por omisión de MudBlazor (16/24px), un !important de móvil en el layout (8px) y lo que cada página se pusiera encima —incluidos 13 MudContainer anidados que lo sumaban dos veces—. REVERTIR LA PASADA ENTERA = 16px/24px aquí y 1920px en --ic-content-max. No hay que tocar ninguna página. OJO: NO es --ic-page-gutter, que es el canalón INTERIOR de las pantallas de detalle y de las barras del catálogo (catalogo-global.css lo lee en once sitios, PageHeader.razor.css lo desborda). Coinciden en móvil y difieren en escritorio a propósito. */ --ic-page-pad-x: var(--ic-space-3); /* 12px — teléfono */ --ic-content-max: 1600px; /* normal: listados, tableros */ --ic-content-max-angosto: 1100px; /* lectura y formularios */ /* ── PageHeader (sistema estandarizado de barras superiores de página) ── Consumidas por Components/PageHeader.razor.css. Cambiar aquí afecta a TODAS las páginas migradas; los valores cubren la variante List (estilo Calendario/Rentas) y Detail (estilo DetalleRenta). */ --ic-page-header-row-h: 56px; --ic-page-header-padding-x: 12px; --ic-page-header-padding-y: 8px; --ic-page-header-bg: rgba(28, 28, 30, 0.92); --ic-page-header-border: var(--ic-border); --ic-page-header-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04); --ic-page-header-blur: saturate(1.08) blur(12px); --ic-page-header-z: 30; /* List sticky: bajo todo lo flotante */ --ic-page-header-z-detail: 1240; /* < AppBar 1300, < Popover 1250, > BottomNav 1200 */ --ic-page-header-touch-min: 44px; /* móvil */ --ic-page-header-touch-min-desktop: 48px; --ic-page-header-title-size: 1.0625rem; --ic-page-header-title-weight: 600; --ic-page-header-subtitle-size: 0.75rem; /* Detail no reserva hueco: es sticky y ocupa su sitio en el flujo, así que el ritmo lo da su propio margin-bottom. Hubo tokens de reserva mientras fue fixed y no había forma de que cuadraran en todas las páginas, porque el espacio por encima del ancla cambia con el margen de cada contenedor. */ /* Altura real del AppBar (incluye padding/bordes). 64px = estándar moderno (M3 small top app bar); la zona-logo del drawer usa la misma var para la línea continua. */ --ic-appbar-height: 64px; /* Mismos valores que MudDrawer en MainLayout (MiniWidth / Width). */ --ic-drawer-mini-width: 72px; --ic-drawer-width: 280px; /* El hueco que el CONTENIDO reserva para el rail. En modo app no hay rail —el menú es un overlay temporal y el contenido llega al borde—, así que este token vale 0 allí. Los offsets de barras fijas leen ESTE, no --ic-drawer-mini-width, que describe el parámetro MiniWidth del MudDrawer y vale 72 en los dos modos. Lo redeclara html[data-chrome="app"] más abajo. ── Por qué el escritorio se escribe html:not([data-chrome="app"]) y no html[data-chrome="escritorio"] ── Porque así el escritorio es lo que sale cuando NO hay atributo, que es la misma caída segura que ic-chrome.js y ChromeModoService eligen si el interop falla. Importa para el banco: sus 28 páginas cargan esta hoja sin arrancar Blazor, y con un selector positivo se quedarían en un tercer estado —ni rail ni barra inferior— que no existe en producción y que haría mentir a la comparación. */ --ic-chrome-rail-w: var(--ic-drawer-mini-width); /* ── Área segura inferior ── El inset crudo, tokenizado, y la mordida deliberada. En un iPhone el inset vale 34pt. Respetarlo entero dejaba la barra a 34pt del borde y el conjunto en 106pt, más alto que un tab bar nativo de iOS (83pt). Se le muerden 10pt y quedan 24, que es lo que necesita el gesto de inicio del sistema (~20pt) para no robarse los arrastres que empiezan sobre un tab. La esquina redondeada NO es la restricción: con radio ~55pt, a 30pt del borde se come 6pt de ancho y los iconos van centrados en tabs de ~80px, así que nunca los alcanza. El suelo NO es 24px: un dispositivo sin indicador de inicio (iPhone con botón, iPad, Android donde el WebView ya excluye la barra del sistema) reporta inset 0 y reservaría 24px de nada. El 24 es el RESULTADO en iPhone (34 − 10). El suelo son 8px, y está para que en esos dispositivos la etiqueta no acabe a 4px del bisel. env(safe-area-inset-bottom) entra al sistema en UN SOLO SITIO, la declaración de --ic-bottom-nav-height (más abajo, en el bloque ≤1024px). El padding de la barra NO repite la fórmula: se deriva por RESTA de los dos tokens. Así no pueden divergir por construcción, y el banco puede falsificar la geometría del iPhone sobreescribiendo --ic-bottom-nav-height (una var() dentro de una custom property se sustituye donde se DECLARA, así que un override de --ic-safe-bottom en un descendiente no llegaría). */ --ic-safe-bottom: env(safe-area-inset-bottom, 0px); --ic-nav-safe-bite: 10px; --ic-safe-pad-floor: 8px; /* ── BottomNav (móvil) ── Single source of truth para que cualquier página/FAB/spacer calcule offsets respecto al nav sin hardcodear la altura ni el área segura. En desktop = 0 (el BottomNav está oculto). En mobile se redefine más abajo con la altura real + el área segura mordida. 60px y no 72: el tab más alto mide 59px = 8 de padding + 32 de cápsula + 2 de gap + 13 de etiqueta (11px con line-height:1 + 2 de padding) + 4 de padding. Los 13px que sobraban caían DEBAJO de las etiquetas, porque la barra alinea a flex-start para que el botón central pueda sobresalir; eso era la mitad de lo que se veía como «barra alta» en el iPhone. El +1 hasta 60 es el filete de arriba: la barra es border-box, así que el border-top cabalga dentro de la altura y el token debe cubrirlo (mejor pasarse medio píxel que quedarse corto, que es lo que taparía contenido). El tramo tablet vuelve a 73 más abajo, donde el tab sí mide 72. */ --ic-bottom-nav-height: 0px; --ic-bottom-nav-content-height: 60px; /* Separación estándar de un FAB respecto al nav (o al bottom de la viewport en desktop). */ --ic-fab-bottom-offset: 16px; --ic-z-drawer-overlay: 6000; --ic-z-dialog: 6100; --ic-z-snackbar: 6200; --ic-z-tooltip: 6300; /* Calendario: paneles full-bleed con relieve suave (sin márgenes laterales) */ --ic-cal-panel-bg: #1C1C1E; --ic-cal-panel-shine: rgba(255, 255, 255, 0.045); --ic-cal-empty-glow: rgba(85, 99, 224, 0.14); /* Banda translúcida de los headers/strip del calendario (consumida por calendario-nuevo.css) */ --calendar-header-bg: rgba(var(--ic-surface-rgb), 0.92); /* ── Chrome unificado (drawer + appbar) ── UNA superficie idéntica para el rail y la barra superior: mismo fondo translúcido y mismo blur (el del calendario/PageHeader). La línea continua a y=64px es UN SOLO borde de 1px con --ic-chrome-border en cada mitad (border-bottom de la zona-logo + border-bottom del appbar), dentro de una banda de --ic-appbar-height en ambas. Nada de sombras encima: una segunda línea en solo una mitad rompe la continuidad. */ --ic-chrome-bg-rgb: 0, 0, 0; /* #000000: negro puro, como iOS */ --ic-chrome-bg: rgba(var(--ic-chrome-bg-rgb), 0.90); --ic-chrome-blur: saturate(1.08) blur(12px); --ic-chrome-border: rgba(255, 255, 255, 0.10); /* Fondo de la barra inferior. En oscuro, el MISMO negro del lienzo: una franja gris #1C1C1E de lado a lado era la única caja de la pantalla (el encabezado de arriba va directo sobre el negro). En claro sigue siendo el mismo blanco que el lienzo (ver el bloque claro). También recorta el aro del FAB central, que tiene que casar con la barra para que el círculo parezca salir de ella. */ --ic-bottom-nav-bg: rgb(var(--ic-chrome-bg-rgb)); /* ÚNICO lugar con hex de marca: avatar, mark del drawer y FAB lo referencian. En claro los DOS extremos son hex literales de la landing (--primary-h → --primary); en oscuro va del primario a su tono claro histórico, porque #4453D4 sobre negro apaga el FAB. */ --ic-brand-gradient: linear-gradient(135deg, #5563E0 0%, #8B97FF 100%); --ic-brand-ring: rgba(85, 99, 224, 0.35); /* Navegación lateral */ --ic-drawer-bg: var(--ic-chrome-bg); --ic-drawer-surface: rgba(255, 255, 255, 0.04); --ic-drawer-border: rgba(255, 255, 255, 0.18); --ic-nav-accent: #A6B2FF; --ic-nav-accent-dim: rgba(85, 99, 224, 0.22); --ic-nav-accent-glow: rgba(85, 99, 224, 0.45); --ic-nav-active-bg: rgba(85, 99, 224, 0.14); --ic-nav-active-border: rgba(166, 178, 255, 0.22); /* ── Tokens semánticos de superficie (default oscuro) ── Floten entre claro/oscuro; el tema claro los redefine en html[data-theme="light"]. Reemplazan hex/glass oscuros antes hardcodeados (AppBar, "glass" del drawer, scrollbar). */ --ic-appbar-bg: var(--ic-chrome-bg); --ic-appbar-border: var(--ic-chrome-border); /* Banda superior del drawer (marca + negocio): el chrome corre continuo detrás; la separación la da solo el border-bottom de 1px. */ --ic-drawer-toolbar-bg: transparent; --ic-glass-surface: rgba(255, 255, 255, 0.04); --ic-glass-surface-hover: rgba(255, 255, 255, 0.07); --ic-glass-border: rgba(255, 255, 255, 0.09); --ic-glass-border-soft: rgba(255, 255, 255, 0.06); --ic-scrollbar-track: rgba(0, 0, 0, 0.95); --ic-scrollbar-thumb: rgba(85, 99, 224, 0.28); --ic-scrollbar-thumb-hover: rgba(166, 178, 255, 0.45); /* ── Tokens theme-aware de elevación e interacción (pase de pulido UI) ── Los valores dark = las constantes hardcodeadas que reemplazan en sus reglas, así el modo oscuro queda intacto; el tema claro las corrige en html[data-theme="light"]. */ --ic-chrome-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --ic-chrome-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.55); --ic-interactive-hover: rgba(255, 255, 255, 0.07); --ic-interactive-active: rgba(255, 255, 255, 0.13); --ic-fab-border: rgba(255, 255, 255, 0.14); --ic-border-strong: var(--ic-border); /* Visual circular del empty-state del calendario */ --ic-cal-empty-bg: linear-gradient(145deg, rgba(139, 151, 255, 0.18), rgba(85, 99, 224, 0.08)); --ic-cal-empty-border: rgba(166, 178, 255, 0.28); --ic-cal-empty-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.06); --ic-cal-empty-icon: #A6B2FF; /* Colores semanticos de estado — NO modificar, tienen significado operativo */ --estado-agendada: #9E9E9E; --estado-asignado: #2196F3; --estado-en-curso-entrega:#FF9800; --estado-en-curso-recogida:#795548; --estado-entregada: #4CAF50; --estado-recogida: #7B1FA2; --estado-cancelada: #F44336; /* Paleta de eventos del calendario (chips/dots/filtros/tarjetas). Los estados "parciales" no llevan token propio: usan el token del estado pleno con tratamiento suave. Criterio (rediseño 2026-08): color de sistema POR TEMA, no el mismo hex en los dos. En oscuro son claros; en claro, profundos. Eso es lo que hace que el texto en color pleno sobre 22% de su propio tinte —el chip de la vista mes— dé ≥4,5:1 en AMBOS temas. Los once están declarados en los dos temas: antes cinco heredaban del oscuro y salían sucios sobre blanco. Desde 2026-09-22 los tonos salen de la paleta de sistema de iOS (cyan, indigo, orange, brown, green, purple, pink, blue…) movidos en luminosidad hasta pasar el 4,5:1 sobre su tinte al 22%: en oscuro sobre #1C1C1E, en claro sobre blanco. El ROJO está reservado a --cal-now y --cal-hoy-fill. Ningún estado es rojo: "cancelada" es rosa carmín y se apoya en doble señal (atenuada + tachada). El 2026-09-23, al volver la marca al índigo de la landing (#5563E0), «asignada para recolectar» se movió de #9B9AEF/#4E4CD4 a #B495FE/#672ABC: estaba a 4,7° de matiz del acento en claro y a 6,7° en oscuro, o sea era el mismo color que el chrome de la app. Ahora está a 19-24°. Se movió el ESTADO y no la marca porque la marca es el hex literal de la landing y del logo. El destino no es arbitrario: estos once tonos forman una rampa de matiz que sigue el flujo de la renta (entrega 212° → 251° → recolección 296° → 314° → 331°), así que el estado se desplazó DENTRO de su rampa, no fuera. */ --cal-ev-agendada: #A3A3A7; --cal-ev-asig-entrega: #40C8E0; --cal-ev-asig-recoleccion: #B495FE; --cal-ev-encurso-entrega: #FF9F0A; --cal-ev-encurso-recogida: #B99F7F; --cal-ev-entregada: #30D158; --cal-ev-recogida: #CF82F5; --cal-ev-cancelada: #FF728E; --cal-ev-default: #C9B896; --cal-ev-emp-asig-entrega: #4CA5FF; --cal-ev-emp-asig-recogida: #EB74DF; /* Tinte de fin de semana en la vista de mes: SUBE hacia la superficie, no baja a gris */ --cal-weekend-bg: rgba(255, 255, 255, 0.05); /* El rojo del tiempo. Un solo rojo, dos usos, dos valores por contraste: --cal-now = línea y punto de "ahora" (elemento fino: pide luminancia) --cal-hoy-fill = relleno del círculo de "hoy" (lleva texto encima: pide ser más profundo; 4,76:1 contra blanco — el #E0342B anterior daba 4,47 y se quedaba por debajo del piso) Unifica los tres rojos que había sueltos (#F44336 día, #ea4335 3 días y agenda, #FF453A mes). */ --cal-now: #FF453A; --cal-hoy-fill: #DC2B21; --cal-on-now: #FFFFFF; /* Material de separación del calendario: la línea fina sustituye a la caja. Más tinta que antes (8/6%) porque el separador de iOS pesa más y, a medio píxel en pantallas 2x, una línea al 8% desaparecía. */ --cal-hairline: color-mix(in srgb, var(--ic-text) 12%, transparent); --cal-hairline-soft: color-mix(in srgb, var(--ic-text) 8%, transparent); /* Base sobre la que se mezcla el tinte --ev de las tarjetas de renta. En oscuro es la superficie gris; en claro es BLANCO y no la superficie (que ahí es gris): el tinte sobre gris salía apagado, sobre blanco queda limpio. */ --cal-card-base: var(--ic-surface); /* Relleno de los controles del calendario («‹ mes», acciones del encabezado, «Hoy» + lente, buscar/checklist/+). Token propio para poder aclararlos SIN tocar tarjetas ni listados, que siguen en --ic-surface. En oscuro coincide con la superficie. */ --cal-control-bg: var(--ic-surface); /* Material «vidrio» de los controles flotantes del calendario (2026-09-23, como la barra de Calendario en iOS 26): «‹ mes», acciones, «Hoy» + lente, buscar/ruta/+. Fondo translúcido con desenfoque, anillo de medio píxel, brillo en el canto superior y una sombra suave. Es la ÚNICA excepción al «sin blur ni sombra» del rediseño 2026-08: vale para estos controles, nunca para las tarjetas. En oscuro parte de la superficie, no del negro: un negro translúcido sobre #000 no se distingue. Medido en _bench/mock-botones-ios-dia.html. */ --cal-glass-bg: color-mix(in srgb, var(--ic-surface) 72%, transparent); --cal-glass-edge: color-mix(in srgb, var(--ic-text) 14%, transparent); --cal-glass-ring: color-mix(in srgb, var(--ic-text) 12%, transparent); --cal-glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3); --cal-glass-blur: blur(20px) saturate(180%); --cal-glass-press: color-mix(in srgb, var(--ic-text) 10%, transparent); --cal-glass-on: color-mix(in srgb, var(--ic-text) 16%, transparent); /* pulgar de la lente */ /* Modo selección de ruta y avisos. Salen de tokens: antes eran índigo/ámbar crudos (#6366f1, #4338ca, #c7d2fe, #F59E0B, #D97706) que no volteaban con el tema. */ --cal-ruta-sel: var(--lc-accent); --cal-ruta-paso: var(--lc-accent); /* paso YA guardado */ --cal-ruta-pick: var(--lc-warn); /* posición que se está eligiendo */ --cal-urgente: var(--lc-warn); /* anillo de renta urgente: ÁMBAR, el rojo es del reloj */ /* El pin del mapa. Dos tokens y no dos hex, pero con dueños distintos: --map-pin-stroke es el aro que separa la gota del SUELO, y el suelo no voltea: la base de teselas es clara en los dos temas (ver --map-teselas-bg abajo). Siguió a --ic-surface hasta el 2026-09-22 y eso hacía que el MISMO pin tuviera contorno de 13,7:1 contra las teselas en oscuro y de 1,24:1 en claro — pesado en un tema, inexistente en el otro. Fijo en blanco, con el drop-shadow separándolo, que es lo que hacen Apple Maps y Google Maps. --map-pin-ink es la tinta que va DENTRO de un disco de color, y ésa sí voltea, porque el disco voltea con ella: los --cal-ev-* son claros en oscuro (tinta negra encima) y profundos en claro (tinta casi blanca). */ --map-pin-stroke: #FFFFFF; --map-pin-ink: var(--ic-bg); /* El papel BAJO las teselas: lo que se ve por los huecos mientras cargan y al arrastrar. Fijo y declarado UNA vez —no se redeclara en html[data-theme="light"]— porque la base del mapa es clara en los dos temas (leaflet-map.js, _BASE_OSCURA_ACTIVA). Con un token que volteara, en tema oscuro cada arrastre dejaba bandas negras entre teselas, en el teléfono y con datos móviles. El tono es el gris papel de la base ArcGIS, para que el hueco no se note. Si se reactiva la base oscura, esto tiene que volver a voltear. */ --map-teselas-bg: #EAE6E1; /* Tinta que va ENCIMA de las teselas: el chip del trayecto, el botón de encuadre y el velo de «toca para mover» del selector de dirección. Fijos y sin espejo en claro por el mismo motivo que el papel: el mapa es claro en los dos temas, así que un fondo que siguiera al tema desaparecería sobre las teselas en uno de los dos. No confundir con --map-pin-ink, que sí voltea porque el disco que lo contiene voltea con él. El valor era rgba(15,23,42,…) —el azul-pizarra de la paleta vieja— y se quedó ahí al pasar a los grises de sistema: el mecanismo era correcto, el tono no. En negro neutro el blanco encima sube de 13,2:1 a 17,1:1 y el chip contra las teselas de 10,6 a 13,8. */ --map-chip-bg: rgba(0, 0, 0, 0.88); --map-chip-ink: #FFFFFF; --map-chip-border: rgba(255, 255, 255, 0.16); --map-chip-link: #A6B2FF; --map-chip-shadow: rgba(0, 0, 0, 0.28); --map-scrim: rgba(0, 0, 0, 0.28); } /* Escalón de escritorio del canalón de página. 24px es EXACTAMENTE lo que MudBlazor ya daba desde 600px, así que las páginas que no se metían con su contenedor no se mueven ni un píxel: lo que este bloque hace es dejar de depender de una hoja de terceros para un número del sistema. El corte es 600px, el mismo de MudBlazor, para que la migración no introduzca un tercer punto de quiebre. */ @media (min-width: 600px) { :root { --ic-page-pad-x: var(--ic-space-6); } /* 24px */ } /* ═══ TEMA CLARO ═══ Activado por el atributo data-theme="light" en (lo pone ic-theme.js antes de pintar y el toggle icSetTheme). Redefine TODOS los tokens --ic-* a valores claros y ESPEJA las --mud-palette-* con los MISMOS hex que PaletteLight (C#) para que no haya parpadeo entre el pintado por CSS y la hidratación de MudBlazor. html[data-theme="light"] (0,0,1,1) gana a :root (0,0,1,0), mismo elemento. Los --estado-* NO se redefinen (significado operativo invariante). Las sombras y los velos de este bloque iban en rgba(15,23,42,…) —negro con tinte azul-pizarra de la paleta vieja— y se quedaron ahí al pasar a los grises de sistema. Desde 2026-09-22 son negro neutro: sobre el gris agrupado #F2F2F7 el tinte frío se notaba, y ahora el chrome del mapa consume estos mismos tokens. */ html[data-theme="light"] { /* Desde 2026-09-23, espejo del oscuro: allá el lienzo es negro y las tarjetas, píldoras y grupos flotantes van en gris (#1C1C1E / #2C2C2E); aquí el lienzo es BLANCO —el mismo de la barra inferior— y esas superficies van en el gris agrupado de iOS (#F2F2F7), con el escalón anidado sigue en #ECECF1. Antes era al revés: lienzo gris y tarjetas blancas. El escalón NO baja a systemGray5 (#E5E5EA), que era el espejo exacto de #2C2C2E: ahí los chips --lc-* al 18% caen a 4.27:1 y lista-cards.css los calibró contra la superficie más oscura del tema. Con #ECECF1 siguen en 4.52; la pista se distingue por su borde de 1px. Medido en _bench/mock-claro-blanco.html: la tarjeta contra el lienzo da el mismo 1.12:1 que antes (la marca el borde de 1px, 1.7:1) y --ic-muted sobre la tarjeta da 8.1:1. */ --ic-bg: #FFFFFF; --ic-surface: #F2F2F7; --ic-surface-2: #ECECF1; /* Ver «Superficies y señales de las pantallas de producto» en :root. */ --pl-control: var(--ic-surface-2); --pl-control-hover: color-mix(in srgb, var(--ic-surface-2) 70%, var(--ic-text)); --ic-surface-rgb: 242, 242, 247; --ic-surface-2-rgb: 236, 236, 241; --ic-bg-rgb: 255, 255, 255; --calendar-header-bg: rgba(255, 255, 255, 0.92); --ic-border: rgba(60, 60, 67, 0.29); --ic-primary: #5563E0; --ic-on-primary: #FFFFFF; --ic-primary-dim: rgba(85, 99, 224, 0.10); --ic-text: #000000; --ic-muted: #48484E; --ic-text-tertiary: #6A6A70; --ic-icon-muted: #6A6A70; --ic-shadow: 0 4px 24px rgba(0, 0, 0, 0.10); --ic-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --ic-shadow-up: 0 -2px 12px rgba(0, 0, 0, 0.08); --ic-page-header-bg: rgba(255, 255, 255, 0.92); --ic-page-header-shadow: 0 1px 0 0 rgba(60, 60, 67, 0.08); --ic-cal-panel-bg: #FFFFFF; --ic-cal-panel-shine: rgba(60, 60, 67, 0.03); --ic-cal-empty-glow: rgba(85, 99, 224, 0.10); /* Chrome unificado en claro: blanco, como el lienzo. Dentro del calendario el lienzo sale de --ic-chrome-bg-rgb, así que la vista día queda blanca con las píldoras y los grupos flotantes en gris encima: el mismo reparto que el negro con gris del oscuro. */ --ic-chrome-bg-rgb: 255, 255, 255; --ic-chrome-bg: rgba(255, 255, 255, 0.92); --ic-chrome-border: rgba(60, 60, 67, 0.29); /* Blanco fijo y no var(--ic-surface), que ahora es gris: barra y lienzo son el mismo blanco. */ --ic-bottom-nav-bg: #FFFFFF; --ic-brand-gradient: linear-gradient(135deg, #4453D4 0%, #5563E0 100%); --ic-brand-ring: rgba(85, 99, 224, 0.28); --ic-drawer-bg: var(--ic-chrome-bg); --ic-drawer-surface: rgba(60, 60, 67, 0.04); --ic-drawer-border: rgba(60, 60, 67, 0.12); --ic-nav-accent: #4453D4; --ic-nav-accent-dim: rgba(85, 99, 224, 0.16); --ic-nav-accent-glow: rgba(85, 99, 224, 0.30); --ic-nav-active-bg: rgba(85, 99, 224, 0.12); --ic-nav-active-border: rgba(85, 99, 224, 0.28); /* Tokens semánticos de superficie (ver Fase 3) en su variante clara */ --ic-appbar-bg: var(--ic-chrome-bg); --ic-appbar-border: var(--ic-chrome-border); /* Banda superior del drawer: el chrome corre continuo (separación = borde de 1px). */ --ic-drawer-toolbar-bg: transparent; --ic-glass-surface: rgba(0, 0, 0, 0.04); --ic-glass-surface-hover: rgba(0, 0, 0, 0.06); --ic-glass-border: rgba(0, 0, 0, 0.10); --ic-glass-border-soft: rgba(0, 0, 0, 0.07); --ic-scrollbar-track: rgba(60, 60, 67, 0.06); --ic-scrollbar-thumb: rgba(85, 99, 224, 0.35); --ic-scrollbar-thumb-hover: rgba(85, 99, 224, 0.55); /* Elevación e interacción en claro: sombras suaves (no negro duro), washes oscuros sutiles para hover/press visibles sobre blanco, y empty-state del calendario legible. */ --ic-chrome-shadow: 0 2px 10px rgba(0, 0, 0, 0.10); --ic-chrome-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.14); --ic-interactive-hover: rgba(0, 0, 0, 0.05); --ic-interactive-active: rgba(0, 0, 0, 0.09); --ic-fab-border: var(--ic-border); --ic-border-strong: rgba(60, 60, 67, 0.36); --ic-cal-empty-bg: linear-gradient(145deg, rgba(68, 83, 212, 0.12), rgba(85, 99, 224, 0.05)); --ic-cal-empty-border: rgba(85, 99, 224, 0.22); --ic-cal-empty-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), inset 0 1px 0 0 rgba(255, 255, 255, 0.6); --ic-cal-empty-icon: #4453D4; /* Paleta de eventos del calendario en claro. LOS ONCE, no solo algunos: antes cinco heredaban el valor oscuro y salían lavados sobre blanco cuando se usan como tinte. */ --cal-ev-agendada: #606065; --cal-ev-asig-entrega: #1D6977; --cal-ev-asig-recoleccion: #672ABC; --cal-ev-encurso-entrega: #8C5200; --cal-ev-encurso-recogida: #725D42; --cal-ev-entregada: #1D6E31; --cal-ev-recogida: #8E25C3; --cal-ev-cancelada: #B70023; --cal-ev-default: #6C5E42; --cal-ev-emp-asig-entrega: #005BBF; --cal-ev-emp-asig-recogida: #A12295; /* Velo del fin de semana en claro. Era un velo BLANCO al 60%, que sólo se veía porque el lienzo era gris (#F4F6FB); con el calendario en blanco desaparecía y sábado y domingo dejaban de distinguirse en la vista Mes. Ahora es un velo oscuro casi imperceptible. */ --cal-weekend-bg: rgba(0, 0, 0, 0.03); /* El rojo del tiempo en claro: la línea lleva el rojo de sistema de iOS (elemento fino); el relleno de «hoy» es más profundo porque lleva texto encima (4,76:1). */ --cal-now: #FF3B30; --cal-hoy-fill: #DC2B21; /* La línea fina pesa más sobre blanco que sobre el fondo oscuro; con el texto en negro puro, el 24% equivale al separador de iOS (rgba(60,60,67,.29)). */ --cal-hairline: color-mix(in srgb, var(--ic-text) 24%, transparent); --cal-hairline-soft: color-mix(in srgb, var(--ic-text) 16%, transparent); --cal-card-base: #FFFFFF; /* Un escalón más claro que --ic-surface (#F2F2F7): sobre el lienzo blanco el botón lo marca su hairline (1.67:1), y el riel del conmutador de lente gana contraste contra su marco (1.06 → 1.10). Medido en _bench/mock-botones-calendario.html. */ --cal-control-bg: #F7F7F9; /* Vidrio en claro: parte del blanco y el brillo del canto es blanco casi opaco. */ --cal-glass-bg: color-mix(in srgb, #FFFFFF 72%, transparent); --cal-glass-edge: color-mix(in srgb, #FFFFFF 85%, transparent); --cal-glass-ring: color-mix(in srgb, var(--ic-text) 10%, transparent); --cal-glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06); --cal-glass-press: color-mix(in srgb, var(--ic-text) 8%, transparent); --cal-glass-on: color-mix(in srgb, var(--ic-text) 10%, transparent); /* Espejo de PaletteLight (mismos hex) → evita el flash pre-hidratación de MudBlazor */ --mud-palette-text-primary: #000000; --mud-palette-text-secondary: #48484E; --mud-palette-action-default: #6A6A70; --mud-palette-drawer-text: #1C1C1E; --mud-palette-drawer-icon: #6A6A70; --mud-palette-lines-default: rgba(60, 60, 67, 0.29); --mud-palette-lines-inputs: rgba(60, 60, 67, 0.40); --mud-palette-divider: rgba(60, 60, 67, 0.22); --mud-palette-background: #FFFFFF; --mud-palette-background-gray: #ECECF1; --mud-palette-appbar-background: #FFFFFF; --mud-palette-drawer-background: #FFFFFF; --mud-palette-surface: #FFFFFF; } /* Chip café para el estado "En curso — recolección". MudChip no expone un Color "café", así que aplicamos esta clase para forzar la paleta. */ .mud-chip.estado-encurso-recogida-chip.mud-chip-filled { background-color: var(--estado-en-curso-recogida) !important; color: #ffffff !important; border-color: var(--estado-en-curso-recogida) !important; } .mud-chip.estado-encurso-recogida-chip.mud-chip-outlined { background-color: transparent !important; color: var(--estado-en-curso-recogida) !important; border-color: var(--estado-en-curso-recogida) !important; } /* Cuando el chip outlined está seleccionado (filtro activo), se rellena en café */ .mud-chip.estado-encurso-recogida-chip.mud-chip-outlined.mud-clickable.mud-chip-selected, .mud-chip.estado-encurso-recogida-chip.mud-chip-outlined[aria-pressed="true"] { background-color: var(--estado-en-curso-recogida) !important; color: #ffffff !important; border-color: var(--estado-en-curso-recogida) !important; } /* ═══ Legibilidad: púrpura como texto ═══ MudText Color="Secondary" emite .mud-secondary-text → color púrpura (--mud-palette-secondary) con !important. Como TEXTO sobre fondo oscuro tiene contraste pobre y se pierde bajo el sol. Esta regla reasigna SOLO la tipografía (.mud-typography) al gris secundario legible; gana por especificidad (2 clases) + !important. NO afecta botones, chips ni iconos (que NO llevan .mud-typography), así que el púrpura sigue disponible como acento donde tiene sentido. */ .mud-typography.mud-secondary-text { color: var(--ic-muted) !important; } /* ═══ Drawer lateral (estilos globales) ═══ MudDrawer concatena Class="ic-drawer" en el MISMO elemento que tiene .mud-drawer. Un selector descendiente .ic-drawer .mud-drawer nunca coincide → el glass no se veía en producción. */ .mud-drawer.ic-drawer { background: var(--ic-chrome-bg) !important; backdrop-filter: var(--ic-chrome-blur) !important; -webkit-backdrop-filter: var(--ic-chrome-blur) !important; border-right: 1px solid var(--ic-chrome-border) !important; box-shadow: none !important; } /* Táctil: blur del drawer + recomposición del Chrome Android suelen causar parpadeos al scroll */ @media (hover: none) and (pointer: coarse) { .mud-drawer.ic-drawer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(var(--ic-chrome-bg-rgb), 0.99) !important; } } /* ── Desktop con cursor: fluidez del expand-on-hover del rail mini ── Acotado a (hover:hover)+(pointer:fine): NO aplica en MAUI/táctil (sin expand-on-hover). Promueve el panel a su propia capa de composición para que, al animar MudBlazor el `width`, el repintado quede aislado y no fuerce repintar el contenido de la página por debajo (overlay). will-change:width NO crea containing block (a diferencia de transform), así que no rompe position:fixed de los hijos. NOTA: aquí NO se apaga el blur durante la transición (lo hacía la clase ic-drawer--animating): sustituir el glass por un fondo sólido provocaba un parpadeo —el fondo se aclaraba y volvía— al abrir el menú. Tampoco se hace fade del texto colapsado: mantenerlo en flujo con ancho 0 descentraba el icono (el gap/margen seguía ocupando), por eso el colapsado usa display:none. */ @media (hover: hover) and (pointer: fine) { .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer-fixed { will-change: width; } } /* ── Modo app: el drawer es temporal y MudBlazor pinta un scrim ── Bug: con Variant="Mini" el panel se queda en z-index var(--mud-zindex-drawer) (1100), pero el scrim `.mud-overlay-drawer` va a calc(var(--mud-zindex-appbar) + 1) (1301). El scrim queda ENCIMA del panel y captura todos los toques → "se abre el menú y no se puede tocar nada". (Los drawers Responsive sí suben el panel a appbar+2; los Mini no.) Lo replicamos aquí para que el panel quede sobre su propio scrim. Solo en modo app: en escritorio es rail sin scrim. */ html[data-chrome="app"] .mud-drawer.ic-drawer { z-index: calc(var(--mud-zindex-appbar) + 2) !important; /* 1302 > scrim 1301 */ } /* ── El scrim del menú en modo app ── MudBlazor sólo enciende su overlay (`display:block`) para variantes con un breakpoint con NOMBRE —`-xs`, `-sm`, `-md`…— o para `temporary`. Con Breakpoint.None emite `mud-drawer-overlay-none`, para el que no escribe ninguna regla, así que el scrim nace en el DOM con `display:none` de la regla base: el menú se abría y no había forma de cerrarlo tocando fuera. Medido en el navegador el 2026-09-22 a 1180px. Se enciende el overlay de MudBlazor en vez de pintar uno propio porque ESE ya trae el @onclick que cierra el drawer; un div nuestro tendría que repetir ese cableado. El z-index no se toca: 1301 del scrim contra 6000 del panel (regla de más abajo), que es justo el orden que el drawer necesita para quedar sobre su propio scrim. */ html[data-chrome="app"] .mud-overlay.mud-drawer-overlay.mud-drawer-overlay--open.mud-drawer-overlay-none { display: block; } /* Escritorio: rail a altura completa (ClipMode.Never) */ html:not([data-chrome="app"]) .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer-fixed { top: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; } /* * Modo superposición (sin pin): mismo hueco horizontal que el contenido (solo rail 72px). * La barra superior NO cambia de tamaño al expandir el menú; el drawer se dibuja encima (z-index). * Stack desktop: AppBar/contenido/popovers de pagina < drawer. * .mud-main-content crea su propio stacking context para que ningún fixed/sticky de página escape sobre el menú. */ html:not([data-chrome="app"]) .mud-layout.ic-layout--sidebar-overlay .mud-appbar.ic-appbar { margin-left: var(--ic-drawer-mini-width) !important; width: calc(100% - var(--ic-drawer-mini-width)) !important; max-width: calc(100% - var(--ic-drawer-mini-width)) !important; left: 0 !important; right: auto !important; box-sizing: border-box !important; z-index: 1230 !important; } html:not([data-chrome="app"]) .mud-layout.ic-layout--sidebar-overlay .mud-drawer.ic-drawer.mud-drawer-mini { z-index: var(--ic-z-drawer-overlay) !important; } /* Chrome flotante: en reposo el rail no lleva sombra (el borde hairline define); al expandirse SOBRE el contenido (overlay) gana la elevación del chrome del calendario. */ html:not([data-chrome="app"]) .mud-layout.ic-layout--sidebar-overlay .mud-drawer.ic-drawer.mud-drawer-mini:not(.mud-drawer--closed) { box-shadow: var(--ic-chrome-shadow) !important; } html:not([data-chrome="app"]) .mud-layout.ic-layout--sidebar-overlay .mud-main-content { margin-left: var(--ic-drawer-mini-width) !important; width: calc(100% - var(--ic-drawer-mini-width)) !important; max-width: calc(100% - var(--ic-drawer-mini-width)) !important; position: relative !important; z-index: 0 !important; isolation: isolate; } html:not([data-chrome="app"]) .mud-layout.ic-layout--sidebar-overlay .mud-appbar.ic-appbar, html:not([data-chrome="app"]) .mud-layout.ic-layout--sidebar-overlay .mud-main-content.ic-main { transition: margin-left 0s linear, width 0s linear, max-width 0s linear !important; } /* * Diálogos (portal): por encima del rail (6000) y centrados en el área de contenido, * no en el viewport completo. Fullscreen sigue a pantalla entera. */ html:not([data-chrome="app"]) .mud-overlay.mud-overlay-dialog { z-index: var(--ic-z-dialog) !important; } html:not([data-chrome="app"]) .mud-dialog-container { z-index: calc(var(--ic-z-dialog) + 1) !important; left: var(--ic-drawer-mini-width) !important; width: calc(100% - var(--ic-drawer-mini-width)) !important; max-width: calc(100% - var(--ic-drawer-mini-width)) !important; box-sizing: border-box !important; } html:not([data-chrome="app"]) .mud-dialog-container:has(.mud-dialog-fullscreen) { left: 0 !important; width: 100% !important; max-width: 100% !important; } /* ── Escritorio (única banda con barra superior): toolbar estable junto al drawer ── */ html:not([data-chrome="app"]) .mud-layout .mud-appbar.ic-appbar .mud-toolbar { max-width: 100%; min-width: 0; gap: 6px; } html:not([data-chrome="app"]) .mud-layout .mud-appbar.ic-appbar .ic-appbar__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* AppBar alineado al contenido: NO forzar left/width aquí. MudBlazor ya aplica margin-left + width al .mud-appbar vía .mud-drawer-open-mini-*-left.mud-drawer-left-clipped-never (ClipMode.Never). Añadir left/width propios duplicaba el desplazamiento (doble hueco a la izquierda). */ /* Barra superior del drawer: marca + negocio (único control para cambiar de negocio). Visible en todo ancho; el drawer la oculta off-canvas cuando está cerrado en móvil. */ .ic-drawer-toolbar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; /* Altura EXACTA del AppBar para que ambos border-bottom queden a la misma y (alineados). */ height: var(--ic-appbar-height); min-height: var(--ic-appbar-height); padding: 0 12px; /* Mismo color que el border-bottom del appbar → línea horizontal continua a y=64px. */ border-bottom: 1px solid var(--ic-chrome-border); box-sizing: border-box; overflow: hidden; background: var(--ic-drawer-toolbar-bg); } /* ════════════ Modo app: drawer = columna fija de pantalla completa ════════════ La barra superior está oculta y el drawer es un overlay. Lo clavamos al viewport y dejamos que SOLO .ic-nav-body scrollee, para que el menú se detenga en el último ítem ("Instalar App") justo encima del pie. Encabezado y pie con la misma altura que las barras de página (--ic-page-header-row-h, 56px) y el BottomNav (--ic-bottom-nav-height, 72px). */ /* (#3) Drawer y contenedores clavados al viewport; el drawer NO scrollea. Usar !important sobre .ic-drawer (clase nuestra, SIEMPRE presente) gana a la regla "temporary" de MudBlazor (height:100%; overflow-y:auto, sin !important) sin depender de .mud-drawer-mini —que MudBlazor puede quitar bajo el breakpoint. Antes la regla dependía de esa clase y el drawer quedaba como segundo scroller: se podía pasar de largo el último ítem. */ html[data-chrome="app"] .mud-drawer.ic-drawer { /* position:fixed FORZADO: MudBlazor solo pone position:fixed si la clase .mud-drawer-fixed está presente; bajo el breakpoint (overlay temporary) la quita y cae a `.mud-drawer:not(.mud-drawer-fixed){position:absolute}`. Un drawer ABSOLUTO scrollea junto con la página (cuyo contenido detrás puede ser alto), arrastrando el menú y el pie fuera de vista —ESE era el "se puede scrolear de más". Fijándolo al viewport, el drawer queda quieto y solo .ic-nav-body scrollea. */ position: fixed !important; top: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; overflow: hidden !important; } html[data-chrome="app"] .mud-drawer.ic-drawer .mud-drawer-content { height: 100% !important; max-height: 100% !important; overflow: hidden !important; } /* El contenedor interno llena el drawer y fija el pie abajo (en escritorio se deja al contenido para no dejar hueco en el rail). Prefijo .mud-layout para ganar a la base. */ html[data-chrome="app"] .mud-layout .mud-drawer.ic-drawer .ic-drawer__inner { flex: 1 1 auto !important; height: 100% !important; max-height: 100% !important; overflow: hidden !important; } /* El cuerpo del menú es el ÚNICO scroller: llena el espacio entre encabezado y pie y scrollea internamente; overscroll-behavior contiene el rebote. */ html[data-chrome="app"] .mud-layout .mud-drawer.ic-drawer .ic-nav-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; } /* (#1) Encabezado de negocio: banda de 56px (igual que las barras de página) + safe-area arriba para despejar el notch. Fondo y borde TRANSPARENTES: detrás de la tarjeta redondeada no debe verse una banda rectangular —la tarjeta es el único elemento visual. */ html[data-chrome="app"] .ic-drawer-toolbar { height: calc(var(--ic-page-header-row-h) + env(safe-area-inset-top, 0px)); min-height: calc(var(--ic-page-header-row-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-bottom: 0; overflow: visible; background: transparent !important; border-bottom: none !important; /* override del border-bottom inline del .razor */ } /* (#1) La tarjeta de marca cabe exacta en la banda de 56px (logo 36 + 2×6 + gap holgado). */ html[data-chrome="app"] .mud-drawer.ic-drawer .ic-drawer-toolbar .ic-brand { padding-top: 6px !important; padding-bottom: 6px !important; } /* (#2) Pie de usuario: banda de 72px (igual que el BottomNav) + safe-area abajo; tarjeta centrada. Prefijo .mud-layout para ganar a la base del pie (declarada después). */ html[data-chrome="app"] .mud-layout .mud-drawer.ic-drawer .ic-drawer__foot { height: auto !important; min-height: var(--ic-bottom-nav-height) !important; /* Espeja la barra con la MISMA resta, no con un env() propio: con dos expresiones, en un dispositivo sin indicador de inicio el pie medía la banda con 0 de padding y la barra con el suelo de 8, y la tarjeta de usuario se centraba contra otra altura. */ padding: 0 12px calc(var(--ic-bottom-nav-height) - var(--ic-bottom-nav-content-height)) !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; border-top: 1px solid var(--ic-glass-border-soft) !important; } /* Botón de tema: aquí SÍ, porque es justo donde la barra superior no existe. */ html[data-chrome="app"] .mud-drawer.ic-drawer .ic-theme { display: flex !important; } /* Mínimo táctil de la casa: 48px, no los 44 del escritorio. */ html[data-chrome="app"] .mud-drawer.ic-drawer .ic-nav__item { min-height: var(--ic-touch-min) !important; } /* Ancho del overlay: 300px como techo (el rango habitual de un menú lateral en teléfono es 280-320) y, en pantallas angostas, siempre deja al menos 72px de página visible —el ancho del rail— para que el toque fuera del menú lo cierre sin apuntar. 360: 288 · 390+: 300. Antes era min(360px, 86vw): en un teléfono de 440 se comía 360px y la página detrás casi desaparecía. El nombre del negocio cabe: .ic-brand__name recorta a 2 renglones. */ html[data-chrome="app"] .mud-drawer.ic-drawer.mud-drawer-mini { width: min(300px, calc(100vw - 72px)) !important; } /* ── Cabecera de marca del drawer (.ic-brand): negocio + logo/iniciales ── Tarjeta transparente que solo gana relieve si es clicable (multi-negocio). */ .mud-drawer.ic-drawer .ic-brand { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: default; color: inherit; text-decoration: none; box-sizing: border-box; } .mud-drawer.ic-drawer .ic-brand--clickable { cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .mud-drawer.ic-drawer .ic-brand--clickable:hover { background: var(--ic-interactive-hover); border-color: var(--ic-glass-border-soft); } .mud-drawer.ic-drawer .ic-brand--clickable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ic-nav-accent-glow); } /* Sin marco: el logo se muestra completo, a su proporción natural. El alto queda fijo en 36px (presupuesto de la banda del toolbar: 64px escritorio / 56px móvil) y el ancho crece con el logo hasta max-width, en vez de encajarlo en un cuadro de 36px. min-width sostiene el tile de iniciales (.ic-brand__mark), que sí es cuadrado. max-width 96px: medido en el panel de 280px deja 101px a .ic-brand__name, por encima de los 81px que mide "Brincolinas" (la palabra más ancha) — con 120px el nombre se partía a media palabra. */ .mud-drawer.ic-drawer .ic-brand__logo { height: 36px; width: auto; min-width: 36px; max-width: 96px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .mud-drawer.ic-drawer .ic-brand__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; } .mud-drawer.ic-drawer .ic-brand__mark { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: var(--ic-brand-gradient); border-radius: 10px; box-shadow: 0 0 0 2px var(--ic-brand-ring); } .mud-drawer.ic-drawer .ic-brand__name { flex: 1 1 0; min-width: 0; font-size: var(--ic-text-md); font-weight: 600; letter-spacing: -0.01em; color: var(--ic-text); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mud-drawer.ic-drawer .ic-brand__switch { flex-shrink: 0; color: var(--ic-icon-muted); } .mud-drawer.ic-drawer .ic-brand--clickable:hover .ic-brand__switch { color: var(--ic-text); } /* Rail colapsado: solo el logo, centrado */ .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-drawer-toolbar { justify-content: center; padding-left: 6px; padding-right: 6px; } .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-brand { justify-content: center; padding: 8px 0; } .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-brand__name, .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-brand__switch { display: none; } /* El rail mide 72px (MiniWidth) y el toolbar deja 6px/lado: el logo, ya sin ancho fijo, se acota aquí para que un logo apaisado no desborde la columna. */ .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-brand__logo { max-width: 48px; } /* Contenedor del drawer: columna para que el pie quede abajo y no se rompa el flex */ .mud-drawer.ic-drawer .mud-drawer-content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } .mud-drawer.ic-drawer .ic-drawer__inner { display: flex !important; flex-direction: column !important; /* No crecer a todo el alto del drawer: evita hueco + scroll vacío entre menú y pie */ flex: 0 1 auto !important; align-self: stretch !important; height: auto !important; max-height: 100% !important; min-height: 0 !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; overflow: hidden !important; box-sizing: border-box !important; } .mud-drawer.ic-drawer .ic-nav-body { flex: 0 1 auto !important; min-height: 0 !important; min-width: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 10px 12px 12px !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; /* ── Fluidez del scroll (ambas plataformas) ── overscroll-behavior: antes solo en @media ≤1024px; global evita arrastrar el panel/scroll-chain. contain layout paint: aísla los repintados al box del scroller (NO usar size/strict: romperían el cálculo de alto flex que sostiene este menú). transform translateZ(0): capa de composición propia → al desplazar, el scroll no obliga a re-evaluar el backdrop-filter del panel de detrás (causa raíz del jank de scroll sobre glass en desktop). En el scroller, no en el drawer, para no crear containing block que rompa position:fixed. scrollbar-gutter: sin salto al aparecer la barra. */ overscroll-behavior: contain !important; scrollbar-gutter: stable; contain: layout paint; transform: translateZ(0); scroll-behavior: smooth; } /* Modo app: sin rail fijo; el menú solo aparece al abrir desde "Más" (overlay) */ html[data-chrome="app"] .mud-drawer.ic-drawer.mud-drawer-mini { /* Debe quedar por encima del AppBar en móvil al abrirse como overlay */ z-index: var(--ic-z-drawer-overlay) !important; } html[data-chrome="app"] .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed { transform: translateX(-100%) !important; } /* Evita desplazamientos laterales del AppBar por clases automáticas del drawer */ html[data-chrome="app"] .mud-layout .mud-appbar.ic-appbar { margin-left: 0 !important; margin-right: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; } html[data-chrome="app"] .mud-layout .mud-main-content { margin-left: 0 !important; margin-right: 0 !important; } /* Modo app a partir de 600px (tablet, y el teléfono en horizontal): áreas táctiles del menú. Absorbió el bloque «iPad landscape» que vivía suelto con (min-width:960px) and (hover:none): ese rango ES modo app desde ic-chrome.js, y estos 48px se comen aquellos 46. */ @media (min-width: 600px) { html[data-chrome="app"] .mud-drawer.ic-drawer .ic-nav__item { min-height: 48px !important; font-size: 0.9rem !important; } html[data-chrome="app"] .mud-drawer.ic-drawer .ic-nav__glabel { font-size: 0.675rem; } /* AppBar con botones táctiles más cómodos */ html[data-chrome="app"] .mud-appbar.ic-appbar .mud-icon-button { min-width: 42px !important; width: 42px !important; height: 42px !important; } } /* ════════════════════════ Menú lateral: las filas ════════════════════════ Las filas dejaron de ser MudNavLink y son anclas propias (.ic-nav__item). Por eso aquí ya no hace falta ni un !important: no hay chrome de MudBlazor que neutralizar. La fila activa la decide ChromeNav en C#, no el componente. La píldora completa ES la señal de activo: nada de barra lateral ::before. */ .mud-drawer.ic-drawer .ic-nav__group { margin-bottom: 6px; } .mud-drawer.ic-drawer .ic-nav__glabel { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-text-tertiary); padding: 18px 12px 6px; box-sizing: border-box; } .mud-drawer.ic-drawer .ic-nav__group:first-child .ic-nav__glabel { padding-top: 12px; } .mud-drawer.ic-drawer .ic-nav__item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 2px 0; padding: 0 12px; border-radius: var(--ic-radius-md); text-decoration: none; font-size: var(--ic-text-md); font-weight: 500; color: var(--ic-muted); transition: background .2s ease, color .2s ease; } .mud-drawer.ic-drawer .ic-nav__item .mud-icon-root { flex: 0 0 auto; width: 22px; height: 22px; font-size: 22px; color: var(--ic-icon-muted); transition: color .2s ease; } .mud-drawer.ic-drawer .ic-nav__tx { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mud-drawer.ic-drawer .ic-nav__item:hover { background: var(--ic-interactive-hover); color: var(--ic-text); } .mud-drawer.ic-drawer .ic-nav__item:hover .mud-icon-root { color: var(--ic-text); } .mud-drawer.ic-drawer .ic-nav__item:active { background: var(--ic-interactive-active); } .mud-drawer.ic-drawer .ic-nav__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ic-nav-accent-glow); } .mud-drawer.ic-drawer .ic-nav__item--activo, .mud-drawer.ic-drawer .ic-nav__item--activo:hover { background: var(--ic-nav-active-bg); color: var(--ic-nav-accent); font-weight: 600; } .mud-drawer.ic-drawer .ic-nav__item--activo .mud-icon-root { color: var(--ic-nav-accent); } /* ── Contador de la fila (hoy solo Lavado): dos niveles, los dos se conservan ── */ .mud-drawer.ic-drawer .ic-nav__count { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0; line-height: 1; background: var(--ic-glass-surface); color: var(--ic-muted); } .mud-drawer.ic-drawer .ic-nav__count--urg { background: color-mix(in srgb, var(--lc-err, var(--mud-palette-error)) 22%, transparent); color: var(--lc-err, var(--mud-palette-error)); } /* En el rail el número no cabe: queda un punto del mismo color. Se enciende con el colapsado. */ .mud-drawer.ic-drawer .ic-nav__dot { display: none; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ic-muted); box-shadow: 0 0 0 2px rgba(var(--ic-chrome-bg-rgb), 0.9); } .mud-drawer.ic-drawer .ic-nav__dot--urg { background: var(--lc-err, var(--mud-palette-error)); } /* ── Bloqueado por plan ── Conserva el icono de su módulo y su texto: sigue siendo reconocible. Lo que pierde es el color, un escalón por debajo del resto, así que se lee "todavía no" y no "roto". Antes el icono se cambiaba por un candado y la entrada era indistinguible de una fila cualquiera. */ .mud-drawer.ic-drawer .ic-nav__item--plan, .mud-drawer.ic-drawer .ic-nav__item--plan .mud-icon-root { color: var(--ic-text-tertiary); } .mud-drawer.ic-drawer .ic-nav__lock { flex: 0 0 auto; display: inline-flex; } .mud-drawer.ic-drawer .ic-nav__lock .mud-icon-root { width: 16px; height: 16px; font-size: 16px; } /* La oferta aparece cuando la buscas y no grita cuando no. */ .mud-drawer.ic-drawer .ic-nav__upsell { display: none; flex: 0 0 auto; height: 20px; padding: 0 8px; border-radius: 999px; align-items: center; background: var(--ic-nav-accent-dim); color: var(--ic-nav-accent); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .mud-drawer.ic-drawer .ic-nav__item--plan:hover { background: color-mix(in srgb, var(--ic-nav-accent) 10%, transparent); color: var(--ic-text); } .mud-drawer.ic-drawer .ic-nav__item--plan:hover .mud-icon-root { color: var(--ic-nav-accent); } .mud-drawer.ic-drawer .ic-nav__item--plan:hover .ic-nav__lock { display: none; } .mud-drawer.ic-drawer .ic-nav__item--plan:hover .ic-nav__upsell { display: inline-flex; } /* ════════════════════════ Rail colapsado (72px) ════════════════════════ 72 − 24 de canalón (.ic-nav-body) − 4 de margen = 44 de celda. */ .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-nav__tx, .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-nav__count, .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-nav__lock, .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-nav__upsell, .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-nav__glabel, .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-legal, .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-user__bd, .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-user__chev { display: none; } /* El texto sale del flujo con display:none y NO con ancho 0: en un flex, un hijo invisible que sigue en flujo deja su gap y descentra el icono. Ya pasó una vez. */ .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-nav__item { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; margin-left: auto; margin-right: auto; justify-content: center; } .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-nav__dot { display: block; } /* Sin etiqueta de grupo el rail necesita otra separación: una línea entre grupos. */ .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-nav__group + .ic-nav__group { border-top: 1px solid var(--ic-glass-border-soft); margin-top: 8px; padding-top: 8px; } .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-user { flex-direction: column; gap: 2px; } .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-user__card, .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-user__salir { flex: 0 0 auto; width: 44px; min-height: 44px; height: 44px; padding: 0; justify-content: center; } .mud-drawer.ic-drawer.mud-drawer-mini.mud-drawer--closed .ic-drawer__foot { padding-left: 6px; padding-right: 6px; } /* ════════════════════════ Pie del menú ════════════════════════ Antes apilaba tres cosas heterogéneas sin jerarquía (tema, legales, usuario). Ahora es una fila de usuario —tarjeta + salir— con los legales encima y el tema, que sigue siendo solo de móvil, arriba de todo. El botón de salir existe porque hasta este pase el panel NO tenía ningún "Cerrar sesión" alcanzable en ningún ancho. */ .mud-drawer.ic-drawer .ic-drawer__foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px max(10px, env(safe-area-inset-bottom, 10px)); border-top: 1px solid var(--ic-glass-border-soft); box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; overflow: visible; } /* Tema: en escritorio se cambia desde la barra superior; aquí solo cuando esa barra no existe. */ .mud-drawer.ic-drawer .ic-theme { display: none; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; box-sizing: border-box; border-radius: var(--ic-radius-md); border: 1px solid var(--ic-glass-border-soft); background: var(--ic-glass-surface); color: var(--ic-muted); font-family: inherit; font-size: 0.8125rem; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .2s ease; } .mud-drawer.ic-drawer .ic-theme .mud-icon-root { width: 20px; height: 20px; font-size: 20px; color: var(--ic-icon-muted); } .mud-drawer.ic-drawer .ic-theme:active { background: var(--ic-glass-surface-hover); } .mud-drawer.ic-drawer .ic-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0 8px; } .mud-drawer.ic-drawer .ic-legal a { font-size: 0.6875rem; color: var(--ic-text-tertiary); text-decoration: none; } .mud-drawer.ic-drawer .ic-legal a:hover { color: var(--ic-muted); text-decoration: underline; } .mud-drawer.ic-drawer .ic-user { display: flex; align-items: center; gap: 4px; min-width: 0; } .mud-drawer.ic-drawer .ic-user__card { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: var(--ic-touch-min); padding: 0 8px; box-sizing: border-box; border-radius: var(--ic-radius-md); text-decoration: none; } .mud-drawer.ic-drawer .ic-user__card:hover { background: var(--ic-interactive-hover); } .mud-drawer.ic-drawer .ic-user__card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ic-nav-accent-glow); } .mud-drawer.ic-drawer .ic-user__bd { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .mud-drawer.ic-drawer .ic-user__nm { display: block; font-size: var(--ic-text-md); font-weight: 600; color: var(--ic-text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mud-drawer.ic-drawer .ic-user__rl { display: block; font-size: var(--ic-text-xs); color: var(--ic-text-tertiary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mud-drawer.ic-drawer .ic-user__chev { flex: 0 0 auto; color: var(--ic-icon-muted); } .mud-drawer.ic-drawer .ic-user__salir { flex: 0 0 auto; width: var(--ic-touch-min); height: var(--ic-touch-min); display: grid; place-items: center; border: 0; border-radius: var(--ic-radius-md); background: transparent; color: var(--ic-icon-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s ease, color .2s ease; } .mud-drawer.ic-drawer .ic-user__salir:hover { background: color-mix(in srgb, var(--lc-err, var(--mud-palette-error)) 12%, transparent); color: var(--lc-err, var(--mud-palette-error)); } /* ── El avatar, compartido por el pie del menú y la barra superior ── Un solo sitio: es la misma persona y tiene que verse igual en las dos superficies. */ .ic-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--ic-brand-gradient); /* Blanco deliberado: va sobre el relleno de marca, que no cambia con el tema. */ color: #FFFFFF; font-size: var(--ic-text-xs); font-weight: 700; letter-spacing: 0; line-height: 1; } .ic-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ic-avatar--36 { width: 36px; height: 36px; font-size: 0.8125rem; } /* ════════════════════════ Barra inferior (≤1024px) ════════════════════════ Vivía en un