/* ========================================================================== Lightblue · Demo VWFS — base.css (reset + componentes compartidos) · v1.1 DUEÑA: sesión "Design System". Contrato: las clases de acá se pueden mejorar visualmente y se pueden sumar nuevas; no se renombran ni se borran. Las páginas ponen sus estilos propios en css/.css. Catálogo vivo de todo esto: styleguide.html. Índice 1. Reset y tipografía base 9. Tabla 2. Layout y utilidades 10. Stat / KPI 3. Botones 11. Alertas, progreso, spinner 4. Tarjetas 12. Skeleton y empty state 5. Chips 13. Avatar y tooltip 6. Formularios 14. Stepper (pasos) y contador 7. Controles: switch, check, 15. Modal y drawer radio, segmented, slider 16. CFT y tasas (regla BCRA) 8. Tabs 17. Toast, cinta, reveal, motion ========================================================================== */ /* ---------- 1. Reset y tipografía base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--lb-font-text); font-size: var(--lb-fs-body); line-height: var(--lb-lh-body); color: var(--lb-text); background: var(--lb-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--lb-font-display); color: var(--lb-ink); line-height: var(--lb-lh-tight); margin: 0 0 var(--lb-s4); letter-spacing: -.02em; font-weight: 800; } h1, h2 { font-stretch: var(--lb-stretch-display); text-wrap: balance; } h3, h4 { font-weight: 700; letter-spacing: -.01em; line-height: var(--lb-lh-snug); } p { text-wrap: pretty; } ::selection { background: var(--lb-sky-200); color: var(--lb-petrol-900); } :focus-visible { outline: none; box-shadow: var(--lb-focus); border-radius: var(--lb-r-sm); } /* ---------- 2. Layout y utilidades ---------- */ .lb-container { width: 100%; max-width: var(--lb-max); margin: 0 auto; padding: 0 var(--lb-gutter); } .lb-eyebrow { font: 600 var(--lb-fs-tiny)/1 var(--lb-font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--lb-petrol-600); } /* .lb-container--narrow: contenedor angosto (760px) para textos largos y formularios. */ .lb-container--narrow { max-width: calc(var(--lb-max-narrow) + 2 * var(--lb-gutter)); } /* .lb-section: bloque vertical con el aire del sistema. --dark = fondo petróleo con luz (banner de contraste), --sky = fondo cielo. */ .lb-section { padding: var(--lb-section) 0; position: relative; } .lb-section--dark { background: var(--lb-grad-dawn); color: var(--lb-petrol-100); } .lb-section--dark h1, .lb-section--dark h2, .lb-section--dark h3 { color: #fff; } .lb-section--dark .lb-eyebrow { color: var(--lb-sky-400); } .lb-section--sky { background: var(--lb-grad-sky); } /* .lb-display: titular protagonista, Archivo al ancho máximo. Usalo en heros y cifras grandes. */ .lb-display { font-family: var(--lb-font-display); font-weight: 900; font-stretch: var(--lb-stretch-wide); font-size: var(--lb-fs-hero); line-height: .98; letter-spacing: -.035em; color: var(--lb-ink); text-wrap: balance; } /* .lb-lead: bajada de un titular (más grande que el cuerpo). */ .lb-lead { font-size: var(--lb-fs-lead); line-height: 1.5; color: var(--lb-text); max-width: 60ch; } /* .lb-text-grad: texto con el gradiente firma (aqua → menta). En fondos claros usá .lb-text-grad--dark. */ .lb-text-grad { background: var(--lb-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .lb-text-grad--dark { background-image: var(--lb-grad-text-dark); } /* .lb-num: cifras tabulares (tasas, cuotas, montos en tablas). */ .lb-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* .lb-mono: ids de Salesforce, UTM, códigos. */ .lb-mono { font-family: var(--lb-font-mono); font-size: .9em; letter-spacing: -.01em; } /* .lb-link: link de texto con subrayado que crece desde la izquierda. */ .lb-link { color: var(--lb-link); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--lb-t) var(--lb-ease); } .lb-link:hover { background-size: 100% 1.5px; } /* .lb-divider: línea divisoria. --label: con texto al medio. */ .lb-divider { border: 0; height: 1px; background: var(--lb-line); margin: var(--lb-s5) 0; } .lb-divider--label { display: flex; align-items: center; gap: var(--lb-s3); height: auto; background: none; font-size: var(--lb-fs-tiny); color: var(--lb-muted); text-transform: uppercase; letter-spacing: var(--lb-ls-wide); font-weight: 600; } .lb-divider--label::before, .lb-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--lb-line); } /* .lb-pattern: trama Lightblue (rayos de luz diagonales). Ponela sobre un fondo; --strong para banners. Usa currentColor. */ .lb-pattern { position: relative; isolation: isolate; } .lb-pattern::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; background-image: repeating-linear-gradient(115deg, currentColor 0 1px, transparent 1px 22px); -webkit-mask-image: radial-gradient(90% 80% at 80% 10%, #000 0%, transparent 75%); mask-image: radial-gradient(90% 80% at 80% 10%, #000 0%, transparent 75%); } .lb-pattern--strong::before { opacity: .14; background-image: repeating-linear-gradient(115deg, currentColor 0 1px, transparent 1px 12px); } /* .lb-glass: superficie de vidrio para poner sobre fotos o gradientes. --dark sobre fondos oscuros. */ .lb-glass { background: var(--lb-glass); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--lb-hairline-light), var(--lb-shadow-2); } .lb-glass--dark { background: var(--lb-glass-dark); border-color: rgba(255, 255, 255, .14); color: #fff; } /* .lb-icon: tamaño de icono SVG (usa currentColor). --sm 16 · (md) 20 · --lg 24 · --xl 32. */ .lb-icon { width: var(--lb-icon-md); height: var(--lb-icon-md); flex: none; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .lb-icon--sm { width: var(--lb-icon-sm); height: var(--lb-icon-sm); } .lb-icon--lg { width: var(--lb-icon-lg); height: var(--lb-icon-lg); } .lb-icon--xl { width: var(--lb-icon-xl); height: var(--lb-icon-xl); stroke-width: 1.5; } /* .lb-live: punto "en vivo" que late (para "recién llegado", "publicada ahora"). */ .lb-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lb-mint-500); box-shadow: 0 0 0 0 rgba(5, 206, 159, .6); animation: lb-pulse 1.8s var(--lb-ease) infinite; flex: none; } @keyframes lb-pulse { 0% { box-shadow: 0 0 0 0 rgba(5, 206, 159, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(5, 206, 159, 0); } } /* ---------- 3. Botones: un solo primario por vista ---------- */ .lb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--lb-s2); min-height: 48px; padding: 0 var(--lb-s5); border-radius: var(--lb-r-pill); border: 1.5px solid transparent; font: 600 1rem/1 var(--lb-font-text); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--lb-t-fast) var(--lb-ease), box-shadow var(--lb-t) var(--lb-ease), background var(--lb-t) var(--lb-ease), color var(--lb-t) var(--lb-ease), border-color var(--lb-t) var(--lb-ease); } .lb-btn > svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--lb-t) var(--lb-ease-spring); } .lb-btn:hover > svg:last-child:not(:first-child) { transform: translateX(3px); } /* el icono de "ir" se desliza */ .lb-btn:active { transform: scale(.98); } .lb-btn--primary { background: var(--lb-accent) var(--lb-grad-button); color: var(--lb-on-accent); box-shadow: var(--lb-hairline-light), 0 2px 10px rgba(102, 228, 238, .25); } .lb-btn--primary:hover { box-shadow: var(--lb-hairline-light), var(--lb-shadow-glow); transform: translateY(-1px); } .lb-btn--primary:active { transform: translateY(0) scale(.98); } .lb-btn--dark { background: var(--lb-primary); color: var(--lb-on-primary); } .lb-btn--dark:hover { background: var(--lb-primary-hover); box-shadow: var(--lb-shadow-2); } .lb-btn--ghost { background: transparent; border-color: currentColor; } .lb-btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); } .lb-btn--sm { min-height: 36px; padding: 0 var(--lb-s4); font-size: var(--lb-fs-small); } .lb-btn[disabled], .lb-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .lb-btn:focus-visible { box-shadow: var(--lb-focus-strong); border-radius: var(--lb-r-pill); } /* .lb-btn--light: botón blanco para fondos oscuros (hero, banners petróleo). */ .lb-btn--light { background: #fff; color: var(--lb-petrol-800); box-shadow: var(--lb-shadow-1); } .lb-btn--light:hover { background: var(--lb-sky-50); box-shadow: var(--lb-shadow-2); } /* .lb-btn--soft: secundario suave (fondo cielo). Para acciones secundarias en el panel. */ .lb-btn--soft { background: var(--lb-sky-100); color: var(--lb-petrol-700); } .lb-btn--soft:hover { background: var(--lb-sky-200); } /* .lb-btn--danger: acción destructiva (pausar, borrar). Nunca es el primario. */ .lb-btn--danger { background: var(--lb-danger-100); color: var(--lb-danger-700); } .lb-btn--danger:hover { background: var(--lb-danger); color: #fff; } /* .lb-btn--text: botón sin caja (acciones terciarias). */ .lb-btn--text { background: none; padding: 0 var(--lb-s2); min-height: 40px; color: var(--lb-link); } .lb-btn--text:hover { background: var(--lb-sky-50); } /* .lb-btn--lg: CTA de hero (56px). --block: ancho completo (celular). --icon: solo icono, con aria-label. */ .lb-btn--lg { min-height: 56px; padding: 0 var(--lb-s6); font-size: 1.0625rem; } .lb-btn--block { display: flex; width: 100%; } .lb-btn--icon { width: 48px; padding: 0; } .lb-btn--icon.lb-btn--sm { width: 36px; } /* .is-loading: muestra un spinner y bloquea el clic. El texto queda para lectores de pantalla. */ .lb-btn.is-loading { color: transparent !important; pointer-events: none; } .lb-btn.is-loading > svg { opacity: 0; } .lb-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lb-petrol-800); border-right-color: transparent; animation: lb-spin .7s linear infinite; } .lb-btn--dark.is-loading::after { border-color: #fff; border-right-color: transparent; } /* .lb-btn-row: fila de botones que se apila en celular. */ .lb-btn-row { display: flex; flex-wrap: wrap; gap: var(--lb-s3); align-items: center; } /* ---------- 4. Tarjetas ---------- */ .lb-card { background: var(--lb-surface); border: 1px solid var(--lb-line); border-radius: var(--lb-r-lg); box-shadow: var(--lb-shadow-1); } /* .lb-card--pad: tarjeta con padding del sistema. */ .lb-card--pad { padding: var(--lb-s5); } @media (min-width: 768px) { .lb-card--pad { padding: var(--lb-s6); } } /* .lb-card--interactive: se eleva al hover y su imagen (.lb-card__media img) hace zoom suave. */ .lb-card--interactive { transition: transform var(--lb-t) var(--lb-ease), box-shadow var(--lb-t) var(--lb-ease), border-color var(--lb-t); cursor: pointer; } .lb-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--lb-shadow-2); border-color: var(--lb-sky-200); } /* .lb-card--raised: sin borde, más sombra (destacada). --flat: sin sombra. --dark: petróleo con luz. */ .lb-card--raised { border-color: transparent; box-shadow: var(--lb-shadow-2); } .lb-card--flat { box-shadow: none; background: var(--lb-surface-2); border-color: transparent; } .lb-card--dark { background: var(--lb-grad-dawn); border-color: transparent; color: var(--lb-petrol-100); } .lb-card--dark h2, .lb-card--dark h3, .lb-card--dark h4 { color: #fff; } /* .lb-card__media: zona de imagen 16:9 con esquinas del sistema. */ .lb-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--lb-r-lg) var(--lb-r-lg) 0 0; background: var(--lb-grad-sky); } .lb-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lb-t-slow) var(--lb-ease); } .lb-card--interactive:hover .lb-card__media img { transform: scale(1.04); } .lb-card__body { padding: var(--lb-s5); } /* .lb-showroom: escenario para las fotos oficiales de VWFS (auto recortado sobre blanco, chico, abajo a la derecha). El blanco se funde con un fondo cielo (multiply) y el auto se agranda y se centra.
…
Ajustes por foto: --lb-zoom (2.2), --lb-focus-x (109%), --lb-focus-y (39%). Combinable con .lb-card__media. */ .lb-showroom { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 10; border-radius: var(--lb-r-lg); background: radial-gradient(70% 55% at 55% 66%, #FFFFFF 0%, var(--lb-sky-50) 42%, var(--lb-sky-200) 100%); } .lb-showroom img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: scale(var(--lb-zoom, 2.2)); transform-origin: var(--lb-focus-x, 109%) var(--lb-focus-y, 39%); transition: transform var(--lb-t-slow) var(--lb-ease); } .lb-card--interactive:hover .lb-showroom img, .lb-showroom:hover img { transform: scale(calc(var(--lb-zoom, 2.2) * 1.04)); } .lb-card__media.lb-showroom { aspect-ratio: 16 / 9; border-radius: var(--lb-r-lg) var(--lb-r-lg) 0 0; } /* ---------- 5. Chips / badges de estado ---------- */ .lb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--lb-r-pill); font: 600 var(--lb-fs-tiny)/1.2 var(--lb-font-text); background: var(--lb-sky-100); color: var(--lb-petrol-700); white-space: nowrap; } .lb-chip--ok { background: var(--lb-mint-100); color: #04785D; } .lb-chip--warn { background: #FDF0DB; color: #8A5A0E; } .lb-chip--danger { background: #FCE4E3; color: #9C2B28; } .lb-chip--muted { background: var(--lb-surface-2); color: var(--lb-muted); } .lb-chip > svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* .lb-chip--dot: con punto de color delante (estado en tablas). */ .lb-chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* .lb-chip--solid: lleno, para destacar sobre fotos ("Tasa 0 %"). --dark: petróleo con texto aqua. */ .lb-chip--solid { background: var(--lb-mint-500); color: var(--lb-petrol-950); } .lb-chip--dark { background: var(--lb-petrol-900); color: var(--lb-sky-400); } /* .lb-chip--lg: chip de filtro tocable (≥36px). Con aria-pressed="true" queda seleccionado. */ .lb-chip--lg { padding: 9px 16px; font-size: var(--lb-fs-small); border: 1.5px solid var(--lb-line); background: var(--lb-surface); color: var(--lb-ink); cursor: pointer; transition: all var(--lb-t-fast) var(--lb-ease); } .lb-chip--lg:hover { border-color: var(--lb-petrol-300); } .lb-chip--lg[aria-pressed="true"] { background: var(--lb-petrol-800); border-color: var(--lb-petrol-800); color: #fff; } /* ---------- 6. Formularios ---------- */ .lb-field { display: grid; gap: 6px; margin-bottom: var(--lb-s4); } .lb-label { font: 600 var(--lb-fs-small)/1.2 var(--lb-font-text); color: var(--lb-ink); } .lb-input, .lb-select, .lb-textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--lb-line-strong); border-radius: var(--lb-r-md); font: 400 1rem/1.3 var(--lb-font-text); color: var(--lb-ink); background: var(--lb-surface); transition: border-color var(--lb-t-fast), box-shadow var(--lb-t-fast), background var(--lb-t-fast); } .lb-input::placeholder, .lb-textarea::placeholder { color: var(--lb-n-400); } .lb-input:hover, .lb-select:hover, .lb-textarea:hover { border-color: var(--lb-petrol-400); } .lb-input:focus, .lb-select:focus, .lb-textarea:focus { border-color: var(--lb-sky-500); box-shadow: var(--lb-focus); outline: none; } .lb-select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23004666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .lb-textarea { min-height: 112px; resize: vertical; line-height: 1.5; } .lb-input[disabled], .lb-select[disabled], .lb-textarea[disabled] { background-color: var(--lb-surface-2); color: var(--lb-muted); cursor: not-allowed; border-color: var(--lb-line); } /* Error: aria-invalid="true" en el input (o .is-error en el .lb-field) pinta el borde. */ .lb-input[aria-invalid="true"], .lb-select[aria-invalid="true"], .lb-textarea[aria-invalid="true"], .lb-field.is-error .lb-input, .lb-field.is-error .lb-select, .lb-field.is-error .lb-textarea { border-color: var(--lb-danger); background-color: #FFFBFB; } .lb-input[aria-invalid="true"]:focus, .lb-field.is-error .lb-input:focus { box-shadow: 0 0 0 3px rgba(226, 80, 76, .25); } /* Éxito: .is-ok en el .lb-field (ej. DNI válido). */ .lb-field.is-ok .lb-input { border-color: var(--lb-mint-500); } .lb-help { font-size: var(--lb-fs-tiny); color: var(--lb-muted); } .lb-error { font-size: var(--lb-fs-tiny); color: var(--lb-danger-700); font-weight: 600; } /* .lb-input-group: input con prefijo/sufijo (.lb-input-group__addon), ej. "$" o "meses". */ .lb-input-group { display: flex; align-items: stretch; border: 1.5px solid var(--lb-line-strong); border-radius: var(--lb-r-md); background: var(--lb-surface); transition: border-color var(--lb-t-fast), box-shadow var(--lb-t-fast); overflow: hidden; } .lb-input-group:focus-within { border-color: var(--lb-sky-500); box-shadow: var(--lb-focus); } .lb-input-group .lb-input { border: 0; box-shadow: none; border-radius: 0; min-width: 0; } .lb-input-group__addon { display: flex; align-items: center; padding: 0 14px; font-weight: 600; color: var(--lb-muted); background: var(--lb-surface-2); white-space: nowrap; } /* .lb-form-grid: grilla de campos, 1 columna en celular, 2 desde 640px. .lb-span-2 ocupa las dos. */ .lb-form-grid { display: grid; gap: 0 var(--lb-s4); grid-template-columns: 1fr; } @media (min-width: 640px) { .lb-form-grid { grid-template-columns: 1fr 1fr; } .lb-form-grid .lb-span-2 { grid-column: 1 / -1; } } /* ---------- 7. Controles ---------- */ /* .lb-switch: . Elástico. */ .lb-switch { display: inline-flex; align-items: center; gap: var(--lb-s3); cursor: pointer; font-weight: 500; color: var(--lb-ink); min-height: 44px; -webkit-tap-highlight-color: transparent; } .lb-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .lb-switch__track { position: relative; width: 48px; height: 28px; border-radius: var(--lb-r-pill); background: var(--lb-n-300); transition: background var(--lb-t) var(--lb-ease); flex: none; } .lb-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 42, 61, .25); transition: transform var(--lb-t) var(--lb-ease-spring), width var(--lb-t-fast) var(--lb-ease); } .lb-switch:active .lb-switch__track::after { width: 28px; } .lb-switch input:checked + .lb-switch__track { background: var(--lb-mint-500); } .lb-switch input:checked + .lb-switch__track::after { transform: translateX(20px); } .lb-switch:active input:checked + .lb-switch__track::after { transform: translateX(14px); } .lb-switch input:focus-visible + .lb-switch__track { box-shadow: var(--lb-focus-strong); } .lb-switch input:disabled + .lb-switch__track { opacity: .45; } /* .lb-check / .lb-radio: . Check animado. */ .lb-check, .lb-radio { display: inline-flex; align-items: flex-start; gap: var(--lb-s3); cursor: pointer; color: var(--lb-ink); line-height: 1.4; min-height: 44px; padding-top: 11px; } .lb-check input, .lb-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; } .lb-check__box, .lb-radio__dot { flex: none; width: 22px; height: 22px; margin-top: -1px; border: 1.5px solid var(--lb-line-strong); background: var(--lb-surface); display: grid; place-items: center; transition: background var(--lb-t-fast), border-color var(--lb-t-fast), box-shadow var(--lb-t-fast); } .lb-check__box { border-radius: 7px; } .lb-radio__dot { border-radius: 50%; } .lb-check__box::after { content: ""; width: 12px; height: 7px; border: solid var(--lb-petrol-950); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--lb-t) var(--lb-ease-spring); } .lb-radio__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lb-petrol-950); transform: scale(0); transition: transform var(--lb-t) var(--lb-ease-spring); } .lb-check input:checked + .lb-check__box, .lb-radio input:checked + .lb-radio__dot { background: var(--lb-sky-400); border-color: var(--lb-sky-500); } .lb-check input:checked + .lb-check__box::after { transform: translateY(-1px) rotate(-45deg) scale(1); } .lb-radio input:checked + .lb-radio__dot::after { transform: scale(1); } .lb-check input:focus-visible + .lb-check__box, .lb-radio input:focus-visible + .lb-radio__dot { box-shadow: var(--lb-focus-strong); } /* .lb-seg: control segmentado (plazo 12/18/24, marca). Con radios:
…
También acepta El subrayado del tab activo crece desde el centro. Scroll horizontal en celular, sin barra. */ .lb-tabs { display: flex; gap: var(--lb-s1); max-width: 100%; min-width: 0; border-bottom: 1px solid var(--lb-line); overflow-x: auto; scrollbar-width: none; } .lb-tabs::-webkit-scrollbar { display: none; } .lb-tab { position: relative; display: inline-flex; align-items: center; gap: var(--lb-s2); min-height: 48px; padding: 0 var(--lb-s4); border: 0; background: none; font: 600 var(--lb-fs-small)/1 var(--lb-font-text); color: var(--lb-muted); cursor: pointer; white-space: nowrap; text-decoration: none; transition: color var(--lb-t-fast); } .lb-tab > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .lb-tab::after { content: ""; position: absolute; left: var(--lb-s3); right: var(--lb-s3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--lb-grad-accent); transform: scaleX(0); transition: transform var(--lb-t) var(--lb-ease); } .lb-tab:hover { color: var(--lb-ink); } .lb-tab[aria-selected="true"], .lb-tab[aria-current="page"] { color: var(--lb-petrol-800); } .lb-tab[aria-selected="true"]::after, .lb-tab[aria-current="page"]::after { transform: scaleX(1); } /* .lb-tab__count: contador dentro del tab ("Leads 12"). */ .lb-tab__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--lb-r-pill); background: var(--lb-surface-3); color: var(--lb-text); font-size: 11px; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; } .lb-tab[aria-selected="true"] .lb-tab__count { background: var(--lb-sky-100); color: var(--lb-petrol-700); } /* ---------- 9. Tabla ---------- */ /* .lb-table-wrap evita el scroll horizontal de la página (scrollea solo la tabla). .lb-table: densa, cifras tabulares. Fila nueva: se ilumina en aqua y se apaga (lead "recién llegado"). Ordenable: . */ .lb-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--lb-line); border-radius: var(--lb-r-lg); background: var(--lb-surface); -webkit-overflow-scrolling: touch; } .lb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--lb-fs-small); font-variant-numeric: tabular-nums; } .lb-table th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 12px 16px; background: var(--lb-surface-2); color: var(--lb-muted); font: 600 var(--lb-fs-tiny)/1.2 var(--lb-font-text); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; border-bottom: 1px solid var(--lb-line); } .lb-table th[aria-sort] { color: var(--lb-petrol-700); } .lb-table th[aria-sort="ascending"]::after { content: " ↑"; } .lb-table th[aria-sort="descending"]::after { content: " ↓"; } .lb-table td { padding: 14px 16px; border-bottom: 1px solid var(--lb-line); color: var(--lb-ink); vertical-align: middle; } .lb-table tbody tr:last-child td { border-bottom: 0; } .lb-table tbody tr { transition: background var(--lb-t-fast); } .lb-table tbody tr:hover { background: var(--lb-sky-50); } .lb-table .is-num, .lb-table td.lb-num, .lb-table th.is-num { text-align: right; } .lb-table td small { display: block; color: var(--lb-muted); font-size: var(--lb-fs-tiny); margin-top: 2px; } .lb-table tr.is-selected { background: var(--lb-sky-100); } .lb-table tr.is-new { animation: lb-flash 2.4s var(--lb-ease) both; } .lb-table tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--lb-mint-500); } @keyframes lb-flash { 0% { background: var(--lb-sky-200); } 100% { background: var(--lb-mint-50); } } /* ---------- 10. Stat / KPI ---------- */ /* .lb-stat: tarjeta de cifra.
……+12 %
--dark: sobre petróleo. --hero: cifra gigante. .lb-stat__bar: barrita de progreso opcional (usa --lb-fill). */ .lb-stat { display: grid; gap: 6px; padding: var(--lb-s5); border-radius: var(--lb-r-lg); background: var(--lb-surface); border: 1px solid var(--lb-line); box-shadow: var(--lb-shadow-1); align-content: start; } .lb-stat__label { display: flex; align-items: center; gap: 6px; font: 600 var(--lb-fs-tiny)/1.3 var(--lb-font-text); text-transform: uppercase; letter-spacing: .08em; color: var(--lb-muted); } .lb-stat__value { font: 800 clamp(1.5rem, 1.1rem + .9vw, 2.1rem)/1 var(--lb-font-display); font-stretch: var(--lb-stretch-display); color: var(--lb-ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; } .lb-stat__delta { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font: 600 var(--lb-fs-tiny)/1 var(--lb-font-text); padding: 4px 8px; border-radius: var(--lb-r-pill); background: var(--lb-surface-2); color: var(--lb-muted); } .lb-stat__delta--up { background: var(--lb-mint-100); color: var(--lb-mint-700); } .lb-stat__delta--down { background: var(--lb-danger-100); color: var(--lb-danger-700); } .lb-stat__foot { font-size: var(--lb-fs-tiny); color: var(--lb-muted); } .lb-stat__bar { height: 6px; border-radius: var(--lb-r-pill); background: var(--lb-surface-3); overflow: hidden; margin-top: 6px; --lb-fill: 50%; } .lb-stat__bar::after { content: ""; display: block; height: 100%; width: var(--lb-fill); border-radius: inherit; background: var(--lb-grad-accent); transition: width var(--lb-t-slow) var(--lb-ease); } .lb-stat--dark { background: var(--lb-grad-dawn); border-color: transparent; } .lb-stat--dark .lb-stat__value { color: #fff; } .lb-stat--dark .lb-stat__label, .lb-stat--dark .lb-stat__foot { color: var(--lb-petrol-200); } .lb-stat--dark .lb-stat__bar { background: rgba(255, 255, 255, .12); } .lb-stat--hero .lb-stat__value { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); font-stretch: var(--lb-stretch-wide); } /* .lb-stat-grid: grilla de KPIs (2 columnas en celular, auto en desktop). */ .lb-stat-grid { display: grid; gap: var(--lb-s3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 960px) { .lb-stat-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--lb-s4); } } /* ---------- 11. Alertas, progreso, spinner ---------- */ /* .lb-alert: . --info/--ok/--warn/--danger. */ .lb-alert { display: flex; gap: var(--lb-s3); align-items: flex-start; padding: var(--lb-s4); border-radius: var(--lb-r-md); background: var(--lb-info-100); color: var(--lb-info-700); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: var(--lb-fs-small); line-height: 1.45; } .lb-alert > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lb-alert b { display: block; color: inherit; margin-bottom: 2px; } .lb-alert p { margin: 0; } .lb-alert--info { background: var(--lb-info-100); color: var(--lb-info-700); } .lb-alert--ok { background: var(--lb-mint-100); color: var(--lb-mint-800); } .lb-alert--warn { background: var(--lb-warn-100); color: var(--lb-warn-700); } .lb-alert--danger { background: var(--lb-danger-100); color: var(--lb-danger-700); } /* .lb-progress: barra de cupos / avance.
. --warn cuando quedan pocos. */ .lb-progress { height: 10px; border-radius: var(--lb-r-pill); background: var(--lb-surface-3); overflow: hidden; --lb-fill: 0%; } .lb-progress::after { content: ""; display: block; height: 100%; width: var(--lb-fill); border-radius: inherit; background: var(--lb-grad-accent); transition: width var(--lb-t-slow) var(--lb-ease); } .lb-progress--warn::after { background: linear-gradient(90deg, var(--lb-warn), var(--lb-danger)); } /* .lb-spinner: indicador de carga circular (20px; --lg 36px). */ .lb-spinner { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--lb-sky-200); border-top-color: var(--lb-petrol-700); animation: lb-spin .8s linear infinite; } .lb-spinner--lg { width: 36px; height: 36px; border-width: 3px; } @keyframes lb-spin { to { transform: rotate(360deg); } } /* ---------- 12. Skeleton y empty state ---------- */ /* .lb-skeleton: bloque de carga con brillo. --text (línea), --title, --circle (avatar), --media (16:9). */ .lb-skeleton { display: block; border-radius: var(--lb-r-sm); background: linear-gradient(90deg, var(--lb-surface-3) 0%, var(--lb-sky-50) 45%, var(--lb-surface-3) 90%) 0 0 / 220% 100%; animation: lb-shimmer 1.4s linear infinite; } .lb-skeleton--text { height: 12px; margin: 8px 0; } .lb-skeleton--title { height: 22px; width: 60%; margin: 4px 0 12px; } .lb-skeleton--circle { width: 44px; height: 44px; border-radius: 50%; } .lb-skeleton--media { aspect-ratio: 16 / 9; border-radius: var(--lb-r-lg); } @keyframes lb-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } @media (prefers-reduced-motion: reduce) { .lb-skeleton { animation: none; } } /* .lb-empty: estado vacío.

…

…

…
*/ .lb-empty { display: grid; justify-items: center; text-align: center; gap: var(--lb-s2); padding: var(--lb-s7) var(--lb-s5); border: 1.5px dashed var(--lb-line-strong); border-radius: var(--lb-r-lg); background: var(--lb-grad-sky); } .lb-empty__icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--lb-surface); color: var(--lb-petrol-600); box-shadow: var(--lb-shadow-2), inset 0 0 0 6px var(--lb-sky-100); margin-bottom: var(--lb-s2); } .lb-empty__icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .lb-empty h3 { margin: 0; font-size: var(--lb-fs-h3); } .lb-empty p { margin: 0 0 var(--lb-s3); max-width: 42ch; color: var(--lb-muted); } /* ---------- 13. Avatar y tooltip ---------- */ /* .lb-avatar: iniciales sobre el gradiente firma. --sm 28 · (md) 40 · --lg 56. --ok: anillo menta (asignado). .lb-avatar-group los superpone. */ .lb-avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--lb-sky-300), var(--lb-petrol-500)); color: #fff; font: 700 .875rem/1 var(--lb-font-display); letter-spacing: .02em; text-transform: uppercase; overflow: hidden; box-shadow: 0 0 0 2px var(--lb-surface); } .lb-avatar img { width: 100%; height: 100%; object-fit: cover; } .lb-avatar--sm { width: 28px; height: 28px; font-size: .6875rem; } .lb-avatar--lg { width: 56px; height: 56px; font-size: 1.125rem; } .lb-avatar--mint { background: linear-gradient(135deg, var(--lb-mint-300), var(--lb-mint-700)); } .lb-avatar--petrol { background: linear-gradient(135deg, var(--lb-petrol-600), var(--lb-petrol-900)); } .lb-avatar--ok { box-shadow: 0 0 0 2px var(--lb-surface), 0 0 0 4px var(--lb-mint-500); } .lb-avatar-group { display: inline-flex; } .lb-avatar-group .lb-avatar + .lb-avatar { margin-left: -10px; } /* Tooltip sin JS: . Aparece al hover y al foco. data-lb-tip-pos="bottom" lo pone abajo. */ [data-lb-tip] { position: relative; } [data-lb-tip]::after { content: attr(data-lb-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); width: max-content; max-width: 240px; padding: 8px 12px; border-radius: var(--lb-r-sm); background: var(--lb-petrol-950); color: #fff; font: 500 var(--lb-fs-tiny)/1.4 var(--lb-font-text); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; box-shadow: var(--lb-shadow-2); opacity: 0; pointer-events: none; transition: opacity var(--lb-t-fast) var(--lb-ease), transform var(--lb-t-fast) var(--lb-ease); z-index: 50; } [data-lb-tip]:hover::after, [data-lb-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } [data-lb-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 10px); transform: translate(-50%, -4px); } /* .lb-tip-icon: el (i) chiquito que lleva el tooltip al lado de TNA/TEA/CFT. */ .lb-tip-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; background: var(--lb-sky-100); color: var(--lb-petrol-700); font: 700 11px/1 var(--lb-font-text); cursor: help; vertical-align: middle; } /* ---------- 14. Stepper (pasos) y contador ---------- */ /* .lb-steps: pasos de un flujo (aprobación de ofertas: Borrador → En revisión → Publicada).
  1. …
  2. …
  3. …
*/ .lb-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; counter-reset: lb-step; } .lb-steps li { flex: 1; position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font: 600 var(--lb-fs-tiny)/1.3 var(--lb-font-text); color: var(--lb-muted); counter-increment: lb-step; } .lb-steps li::before { content: counter(lb-step); position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lb-surface); border: 2px solid var(--lb-line-strong); color: var(--lb-muted); font: 700 .8125rem/1 var(--lb-font-display); transition: all var(--lb-t) var(--lb-ease); } .lb-steps li + li::after { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--lb-line); z-index: 0; } .lb-steps li.is-done::before { content: "✓"; background: var(--lb-mint-500); border-color: var(--lb-mint-500); color: var(--lb-petrol-950); } .lb-steps li.is-done + li::after, .lb-steps li.is-done + li.is-done::after { background: var(--lb-mint-500); } .lb-steps li.is-current { color: var(--lb-ink); } .lb-steps li.is-current::before { border-color: var(--lb-sky-500); background: var(--lb-sky-400); color: var(--lb-petrol-950); box-shadow: 0 0 0 6px rgba(102, 228, 238, .25); } /* .lb-stepper: contador − número + (cupos, cantidad de turnos).
*/ .lb-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--lb-line-strong); border-radius: var(--lb-r-pill); background: var(--lb-surface); overflow: hidden; } .lb-stepper button { width: 44px; height: 44px; border: 0; background: none; font: 600 1.25rem/1 var(--lb-font-text); color: var(--lb-petrol-700); cursor: pointer; transition: background var(--lb-t-fast); } .lb-stepper button:hover { background: var(--lb-sky-50); } .lb-stepper button:disabled { color: var(--lb-n-300); cursor: not-allowed; background: none; } .lb-stepper input { width: 56px; height: 44px; border: 0; text-align: center; font: 700 1rem/1 var(--lb-font-text); color: var(--lb-ink); background: none; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .lb-stepper input::-webkit-outer-spin-button, .lb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lb-stepper input:focus { outline: none; box-shadow: none; } .lb-stepper:focus-within { border-color: var(--lb-sky-500); box-shadow: var(--lb-focus); } /* ---------- 15. Modal y drawer ---------- */ /* .lb-modal: usar con y dialog.showModal(). Partes: .lb-modal__head / __body / __foot, .lb-modal__close. En celular sube como hoja desde abajo; en desktop es una ventana centrada. */ .lb-modal { width: min(560px, calc(100vw - 2 * var(--lb-gutter))); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: var(--lb-r-xl); background: var(--lb-surface); color: var(--lb-text); box-shadow: var(--lb-shadow-3); overflow: hidden; } .lb-modal[open] { display: flex; flex-direction: column; animation: lb-pop var(--lb-t) var(--lb-ease-spring); } .lb-modal::backdrop { background: var(--lb-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: lb-fade var(--lb-t) var(--lb-ease); } .lb-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lb-s4); padding: var(--lb-s5) var(--lb-s5) var(--lb-s3); } .lb-modal__head h2, .lb-modal__head h3 { margin: 0; font-size: var(--lb-fs-h3); font-stretch: 100%; } .lb-modal__body { padding: 0 var(--lb-s5) var(--lb-s5); overflow-y: auto; } .lb-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--lb-s3); padding: var(--lb-s4) var(--lb-s5); border-top: 1px solid var(--lb-line); background: var(--lb-surface-2); } .lb-modal__close { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--lb-surface-2); color: var(--lb-ink); display: grid; place-items: center; cursor: pointer; font-size: 1.25rem; line-height: 1; transition: background var(--lb-t-fast), transform var(--lb-t) var(--lb-ease-spring); } .lb-modal__close:hover { background: var(--lb-surface-3); transform: rotate(90deg); } @media (max-width: 599px) { .lb-modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--lb-r-xl) var(--lb-r-xl) 0 0; max-height: 92vh; } .lb-modal[open] { animation: lb-sheet var(--lb-t) var(--lb-ease); } .lb-modal__foot .lb-btn { flex: 1; } } /* .lb-drawer: panel lateral (detalle de un lead, editor). . Entra desde la derecha; en celular ocupa todo el ancho. */ .lb-drawer { position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); max-width: 100vw; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--lb-surface); box-shadow: var(--lb-shadow-3); overflow: hidden; color: var(--lb-text); } .lb-drawer[open] { display: flex; flex-direction: column; animation: lb-slide-in var(--lb-t) var(--lb-ease); } .lb-drawer::backdrop { background: var(--lb-overlay); animation: lb-fade var(--lb-t) var(--lb-ease); } .lb-drawer .lb-modal__body { flex: 1; } @keyframes lb-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes lb-sheet { from { transform: translateY(100%); } to { transform: none; } } @keyframes lb-slide-in { from { transform: translateX(100%); } to { transform: none; } } @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } } /* ---------- 16. Legales financieros: CFT siempre visible y destacado (regla BCRA de la demo) ---------- */ /* Uso: CFT7,73 % El CFT nunca va más chico que la TNA: es el número que se ve primero después de la cuota. */ .lb-cft { position: relative; display: inline-flex; flex-direction: column; gap: 4px; padding: var(--lb-s2) var(--lb-s3); border-radius: var(--lb-r-md); background: var(--lb-petrol-900); color: #fff; box-shadow: inset 0 0 0 1px rgba(102, 228, 238, .35), 0 6px 20px rgba(0, 42, 61, .18); } .lb-cft b { font: 800 1.5rem/1 var(--lb-font-display); font-stretch: var(--lb-stretch-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .lb-cft small { font-size: var(--lb-fs-tiny); opacity: .8; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lb-sky-300); } .lb-legal { font-size: var(--lb-fs-tiny); color: var(--lb-muted); line-height: 1.45; } /* .lb-cft--lg: protagonista (detalle de oferta, simulador). --light: versión clara sobre fondos claros cuando hay muchos. --inline: en una línea ("CFT 7,73 %"). */ .lb-cft--lg { padding: var(--lb-s3) var(--lb-s4); border-radius: var(--lb-r-lg); } .lb-cft--lg b { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); } .lb-cft--light { background: var(--lb-sky-100); color: var(--lb-petrol-900); box-shadow: inset 0 0 0 1.5px var(--lb-sky-400); } .lb-cft--light small { color: var(--lb-petrol-600); opacity: 1; } .lb-cft--inline { flex-direction: row; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: var(--lb-r-pill); white-space: nowrap; } .lb-cft--inline b { font-size: 1rem; } /* .lb-cft.is-updated: destello cuando el valor cambia en vivo (sumá y sacá la clase desde JS). */ .lb-cft.is-updated { animation: lb-cft-flash 900ms var(--lb-ease); } @keyframes lb-cft-flash { 0% { box-shadow: inset 0 0 0 1px rgba(102, 228, 238, .35), 0 0 0 0 rgba(102, 228, 238, .7); } 40% { box-shadow: inset 0 0 0 2px var(--lb-sky-400), 0 0 0 10px rgba(102, 228, 238, 0); } 100% { box-shadow: inset 0 0 0 1px rgba(102, 228, 238, .35), 0 6px 20px rgba(0, 42, 61, .18); } } /* .lb-rates: la tríada TNA · TEA · CFT junta, con el CFT destacado al final.
TNA0 %
TEA0 %
…
*/ .lb-rates { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--lb-s2); } .lb-rate { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--lb-s2) var(--lb-s3); border-radius: var(--lb-r-md); background: var(--lb-surface-2); color: var(--lb-ink); } .lb-rate small { font: 600 var(--lb-fs-tiny)/1 var(--lb-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lb-muted); } .lb-rate b { font: 700 1.125rem/1 var(--lb-font-display); font-variant-numeric: tabular-nums; } /* .lb-price: la cuota o el monto protagonista.

Cuota desde$ 245.000/mes

*/ .lb-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--lb-ink); } .lb-price small { flex-basis: 100%; font: 600 var(--lb-fs-tiny)/1 var(--lb-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lb-muted); } .lb-price b { font: 900 clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem)/1 var(--lb-font-display); font-stretch: var(--lb-stretch-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; } .lb-price span { font-weight: 600; color: var(--lb-muted); } /* ---------- 17. Toast ---------- */ .lb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px) scale(.96); opacity: 0; background: var(--lb-petrol-900); color: #fff; padding: 14px 20px; border-radius: var(--lb-r-md); box-shadow: var(--lb-shadow-3), inset 0 0 0 1px rgba(102, 228, 238, .25); font-weight: 600; transition: opacity var(--lb-t) var(--lb-ease), transform var(--lb-t) var(--lb-ease-spring); z-index: var(--lb-z-toast); pointer-events: none; max-width: calc(100vw - 32px); width: max-content; display: flex; align-items: center; gap: 10px; } .lb-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lb-mint-500); flex: none; box-shadow: 0 0 0 4px rgba(5, 206, 159, .2); } .lb-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } /* Cinta de demo (va en todas las páginas, la pone site-shell / panel-shell) */ .lb-demo-ribbon { position: fixed; right: 12px; bottom: 12px; z-index: 900; font: 600 11px/1 var(--lb-font-text); background: rgba(14, 27, 34, .82); color: #fff; padding: 8px 10px; border-radius: var(--lb-r-pill); backdrop-filter: blur(6px); } /* Utilidades */ .lb-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lb-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--lb-t-slow) var(--lb-ease), transform var(--lb-t-slow) var(--lb-ease); } .lb-reveal.is-in { opacity: 1; transform: none; } /* .lb-stagger: poné esta clase junto a .lb-reveal y sus hijos entran uno tras otro (hasta 8). */ .lb-reveal.lb-stagger { opacity: 1; transform: none; } .lb-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity var(--lb-t-slow) var(--lb-ease), transform var(--lb-t-slow) var(--lb-ease); } .lb-stagger.is-in > * { opacity: 1; transform: none; } .lb-stagger.is-in > :nth-child(2) { transition-delay: calc(var(--lb-stagger) * 1); } .lb-stagger.is-in > :nth-child(3) { transition-delay: calc(var(--lb-stagger) * 2); } .lb-stagger.is-in > :nth-child(4) { transition-delay: calc(var(--lb-stagger) * 3); } .lb-stagger.is-in > :nth-child(5) { transition-delay: calc(var(--lb-stagger) * 4); } .lb-stagger.is-in > :nth-child(6) { transition-delay: calc(var(--lb-stagger) * 5); } .lb-stagger.is-in > :nth-child(7) { transition-delay: calc(var(--lb-stagger) * 6); } .lb-stagger.is-in > :nth-child(n+8) { transition-delay: calc(var(--lb-stagger) * 7); } /* .lb-float: flotación suave infinita (autos, piezas del hero). */ .lb-float { animation: lb-float 6s var(--lb-ease-in-out) infinite; } @keyframes lb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .lb-reveal, .lb-stagger > * { transform: none !important; } .lb-float, .lb-live, .lb-table tr.is-new, .lb-cft.is-updated { animation: none; } }