/* Generated from design-system/presentation/source. Do not edit. */ /* source: colors_and_type.css */ /* * Alarmas Design System — Colors & Type * --------------------------------------------------------------- * Base tokens + semantic tokens for the Alarmas home-security / * domotics app. Values are lifted 1:1 from the production repo * (alexZ2M/macro_repo → src/static/css/themes/variables.css). * * Use semantic tokens in components (e.g. var(--color-primary), * var(--fg-1)). Change themes by toggling [data-theme="..."] on a * parent; the default is light. * --------------------------------------------------------------- */ /* ============================================================ * FONT STACK * ============================================================ * The product uses the system sans-serif (no web font download), * which keeps renders fast on PWA + native Capacitor shells and * follows each OS's native Latin metrics. */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---- Type scale (rem) ---- */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 1.875rem; /* 30 */ --text-3xl: 2.25rem; /* 36 */ /* ---- Weights ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Line heights ---- */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; } /* ============================================================ * SPACING, RADII, SHADOW, MOTION (base tokens) * ============================================================ */ :root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --radius-sm: 0.375rem; /* 6 */ --radius-md: 0.5rem; /* 8 */ --radius-lg: 0.75rem; /* 12 */ --radius-xl: 1rem; /* 16 */ --radius-2xl: 1.5rem; /* 24 */ --radius-full: 9999px; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1); --glass-blur: blur(10px); /* @kind other */ --transition-fast: 150ms ease; /* @kind other */ --transition-base: 200ms ease; /* @kind other */ --transition-slow: 300ms ease; /* @kind other */ /* Motion de despliegue/aparición (kit): UN solo lugar para cambiar la animación * de modales (dialog-pop), disclosures (runtime toggleDisclosurePanel, que LEE * estos tokens) y overlays. @kind other */ /* Márgenes verticales SIMÉTRICOS de todo overlay a pantalla completa y altura * máxima derivada — un solo lugar para el respiro de los modales. @kind other */ /* SAFE AREA centralizada: insets del dispositivo (notch/isla/home bar) + un * margen de seguridad extra. NORMA: ningún contenido se posiciona con * env() a pelo; siempre vía estos tokens. @kind other */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-gap: 8px; --modal-pad-top: max(24px, calc(var(--safe-top) + var(--safe-gap))); --modal-pad-bottom: max(24px, calc(var(--safe-bottom) + var(--safe-gap))); --modal-max-h: calc(100dvh - 48px); --motion-pop-duration: 240ms; /* entrada de modales */ --motion-expand-duration: 220ms; /* despliegue de cards y crecimiento por swap */ --motion-fade-duration: 200ms; /* fundido de overlays */ --motion-ease-out: cubic-bezier(.16, 1, .3, 1); --z-dropdown: 100; /* @kind other */ --z-sticky: 200; /* @kind other */ --z-modal: 300; /* @kind other */ --z-toast: 400; /* @kind other */ --z-tooltip: 500; /* @kind other */ } /* ============================================================ * UNIVERSAL SEMANTIC STATE COLORS * Green = OK / safe / alarm armed & happy * Amber = warning / scheduled / low battery * Red = alarm triggered / error / disconnected * Blue = info / primary * ============================================================ */ :root { --color-success: #22c55e; --color-success-light: #dcfce7; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-error: #ef4444; --color-error-light: #fee2e2; --color-info: #3b82f6; --color-info-light: #dbeafe; /* Compañeros de alto contraste (texto/icono sobre los *-light). Claro = tinte oscuro. */ --color-error-700: #991b1b; --color-warning-700: #92400e; --color-success-700: #166534; --color-info-700: #1e40af; } /* ============================================================ * THEME: LIGHT (default) * ============================================================ */ [data-theme="light"], :root { /* Esquema de color nativo — hace que time/date pickers y otros controles * del sistema se rendericen en su variante clara. */ color-scheme: light; /* Primary — sky / ocean blue */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-light: #dbeafe; /* tinte claro para soft (.icon-tile.is-soft.tone-primary) */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; /* Surfaces */ --color-bg: #e2e8f0; /* slate-200, canvas behind floating cards */ --color-bg-alt: #f1f5f9; /* slate-100 */ --color-surface: rgba(255, 255, 255, 0.9); /* default card fill */ /* Foreground — deep navy ink, per brand */ --color-text: #1e293b; /* slate-800 */ --color-text-secondary: #64748b; /* slate-500 */ --color-text-muted: #94a3b8; /* slate-400 */ /* Borders */ --color-border: #e2e8f0; --color-border-light: #f1f5f9; /* Glass card */ --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(148, 163, 184, 0.3); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08); /* Component-level accents */ --color-condition-text: #2563eb; /* blue conditions inside trigger cards */ --color-action-text: #15803d; /* green actions inside trigger cards */ --color-toggle-active: #22c55e; --color-toggle-inactive: #cbd5e1; --color-schedule-bg: rgba(245, 158, 11, 0.2); --color-schedule-border: rgba(180, 83, 9, 0.5); --color-schedule-text: #b45309; --color-schedule-value: #92400e; --color-input-bg: #ffffff; --color-input-dropdown-bg: #ffffff; /* Nested card surface — anidado dentro de un glass card. Patrón A * (canónico, modo claro): el interior es blanco puro sobre el outer * glass translúcido, leyéndose como una superficie limpia y plana * dentro del contenedor. */ --color-card-nested-bg: #ffffff; /* white — más brillante que el outer 0.85: en claro el inner se lee como ELEVADO sobre su parent (asimétrico al patrón dark donde inner es más oscuro que outer, por elección estética del usuario) */ --color-card-nested-border: var(--color-border); --color-sensor-bg: #ffffff; /* alias de --color-card-nested-bg, mantenido por retrocompat */ --color-card-inactive-bg: #cbd5e1; /* slate-300: un punto más oscuro para despegarse del fondo de sección */ --color-divider-inner: #b6c2d0; /* divisor interno de cards expandidas (kit SensorCard/CameraCard) */ /* ── Jerarquía de superficies (3 niveles) ──────────────── * Resuelve que card / input / botón-secundario caigan en el mismo * tono dentro de un modal. Aditivo: NO cambia el render actual de * la app (se cablea a presets ahora, a la app en Fase 4). * · Nivel 1 Card → --color-surface / --glass-bg * · Nivel 2 Sunken → input/well, MÁS oscuro que el card * · Nivel 3 Tonal → secundario/chip, distinto de card y de input */ --color-surface-sunken: #f8fafc; /* slate-50 — recessed well */ --color-surface-tonal: #f1f5f9; /* slate-100 — superficie tonal */ --color-surface-tonal-hover: #e2e8f0; /* slate-200 */ --color-surface-tonal-border: var(--color-border); --color-trigger-active-bg: rgba(34, 197, 94, 0.12); --color-trigger-inactive-bg: #cbd5e1; } /* ============================================================ * THEME: DARK — night-watch navy with soft sky-blue accents * ============================================================ */ [data-theme="dark"] { color-scheme: dark; --color-primary: #60a5fa; --color-primary-hover: #3b82f6; --color-primary-light: #1e40af; /* tinte profundo (par oscuro de --color-primary-light) */ --color-primary-50: #1e3a5f; --color-primary-100: #1e3a8a; --color-primary-200: #1e40af; --color-primary-300: #1d4ed8; --color-primary-400: #2563eb; --color-primary-500: #3b82f6; --color-primary-600: #60a5fa; --color-primary-700: #93c5fd; --color-primary-800: #bfdbfe; --color-primary-900: #dbeafe; --color-bg: #0f172a; /* slate-900 — deep night */ --color-bg-alt: #1e293b; /* slate-800 */ --color-surface: rgba(30, 41, 59, 0.9); /* slate-800 @ 90 */ --color-text: #f1f5f9; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-border: #334155; --color-border-light: #1e293b; --glass-bg: rgba(30, 41, 59, 0.85); --glass-border: rgba(71, 85, 105, 0.5); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4); --color-success: #22c55e; --color-success-light: #166534; --color-warning: #fbbf24; --color-warning-light: #854d0e; --color-error: #f87171; --color-error-light: #991b1b; --color-info: #60a5fa; --color-info-light: #1e40af; /* Compañeros de alto contraste (texto/icono sobre los *-light). Oscuro = tinte claro. */ --color-error-700: #fecaca; --color-warning-700: #fde68a; --color-success-700: #bbf7d0; --color-info-700: #bfdbfe; --color-condition-text: #93c5fd; --color-action-text: #86efac; --color-toggle-active: #4ade80; --color-toggle-inactive: #475569; --color-schedule-bg: rgba(245, 158, 11, 0.15); --color-schedule-border: rgba(245, 158, 11, 0.4); --color-schedule-text: #fbbf24; --color-schedule-value: #fde047; --color-input-bg: var(--color-bg-alt); --color-input-dropdown-bg: #374151; /* Nested card — patrón A: interior más oscuro que el outer glass. * En oscuro coincide con el page bg, así el inner card se ve como * un hueco/well dentro del contenedor. */ --color-card-nested-bg: #0f172a; /* slate-900 — igual al page bg */ --color-card-nested-border: rgba(71, 85, 105, 0.35); --color-sensor-bg: #0f172a; /* alias de --color-card-nested-bg */ --color-card-inactive-bg: #0c1222; --color-divider-inner: #475569; /* divisor interno de cards expandidas (kit) */ /* Jerarquía de superficies — par oscuro. Tonal = slate-700 (MÁS * claro que el card slate-800 = se lee elevado); sunken = slate-900 * (MÁS oscuro que el card = se hunde). Ambos con borde slate-600/700. */ --color-surface-sunken: #0f172a; /* slate-900 — well */ --color-surface-tonal: #334155; /* slate-700 — elevado */ --color-surface-tonal-hover: #475569; /* slate-600 */ --color-surface-tonal-border: #475569; /* slate-600 — contorno visible */ --color-trigger-active-bg: rgba(74, 222, 128, 0.15); --color-trigger-inactive-bg: #0f172a; } /* ============================================================ * SEMANTIC TYPOGRAPHY * These class hooks map onto what templates actually use. * ============================================================ */ html { font-family: var(--font-sans); font-size: 16px; line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--color-text); background: var(--color-bg); } h1, .h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text); } h2, .h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--color-text); } h3, .h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text); } h4, .h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text); } h5, .h5 { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text); } h6, .h6 { font-size: var(--text-base);font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text); } p, .body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-secondary); } .meta, small { font-size: var(--text-sm); color: var(--color-text-muted); } .label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); } /* Eyebrow / tracker label that recurs across sensor, trigger and modal * section headers. Lifted from the real app kit (location-modals.jsx * SectionHeader, "Condiciones"/"Acciones", "Sensor", etc.): always * UPPERCASE, bold, wide tracking, slate by default. Consumers override * the color contextually (primary-700 for "Condiciones", success-700 * for "Acciones"). */ .label-tracker { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--weight-bold); color: var(--color-text-secondary); } code, .code { font-family: var(--font-mono); font-size: 0.875em; background-color: var(--color-bg-alt); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); } /* source: html_export/_shared/css/_activation-code.css */ /* ────────────────────────────────────────────────────────────── * Alarmas · ACTIVATION-CODE preset — FUENTE ÚNICA * ────────────────────────────────────────────────────────────── * Extraído 1:1 del kit (location-modals.jsx · CreateLocationModal * paso 2 «Configurar HomeHub»). NO confundir con `_code-block.css` * (ese es el código de 8 char de COMPARTIR/CANJEAR, 2 grupos de 4). * * Aquí: el código de ACTIVACIÓN del HomeHub (formato XXX-XXX) que * el usuario introduce en el portal AP del hub. Dos consumidores: * · partials/location_create.html (paso 2 del alta de ubicación) * · partials/homehub_wizard.html (reanudar provisioning, initialStep=2) * * Estructura: * .activation-code → tarjeta (nested-bg + borde) * .activation-code__row → código grande centrado + botón copiar (abs. dcha) * .activation-code__meta → «Expira en 10:00» (clock) · rojo si is-expired * .activation-code__bar → barra de progreso de caducidad * .activation-code__regen → enlace «Regenerar código» * .activation-steps → tarjeta de instrucciones (tinte primary) * .activation-steps__num → círculo numerado (blanco-sobre-marca) * * Estado caducado: añadir `is-expired` a .activation-code. */ .activation-code { padding: 20px; border-radius: 14px; text-align: center; background: var(--color-card-nested-bg); border: 1px solid var(--color-border); } .activation-code__row { position: relative; display: flex; align-items: center; justify-content: center; } .activation-code__code { font-size: 34px; font-weight: 800; letter-spacing: 0.14em; text-indent: 0.14em; /* compensa el tracking final → centrado óptico */ font-family: var(--font-mono, monospace); color: var(--color-text); text-transform: uppercase; } .activation-code.is-expired .activation-code__code { color: var(--color-text-muted); opacity: 0.55; } /* Botón copiar — cuadrado a la derecha del código. */ .activation-code__copy { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; border: 1px solid var(--color-border); background: var(--color-surface-tonal); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .activation-code__copy svg { width: 17px; height: 17px; color: var(--color-text-secondary); } /* Estado «Copiado» → verde. */ .activation-code__copy.is-copied { border-color: var(--color-success); background: var(--color-success-light); } .activation-code__copy.is-copied svg { color: var(--color-success-700); } /* Meta: cuenta atrás de caducidad. */ .activation-code__meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); } .activation-code__meta svg { width: 14px; height: 14px; color: var(--color-text-muted); } .activation-code__meta .num { font-variant-numeric: tabular-nums; } .activation-code.is-expired .activation-code__meta { color: var(--color-error); } .activation-code.is-expired .activation-code__meta svg { color: var(--color-error); } /* Barra de progreso de caducidad. */ .activation-code__bar { margin-top: 12px; height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; } .activation-code__bar-fill { height: 100%; border-radius: 3px; background: var(--color-primary); transition: width 1s linear; } .activation-code.is-expired .activation-code__bar-fill { background: var(--color-error); } /* Enlace «Regenerar código». */ .activation-code__regen { margin-top: 14px; background: none; border: none; cursor: pointer; color: var(--color-primary); font-family: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 0; } .activation-code__regen svg { width: 14px; height: 14px; color: var(--color-primary); } /* ── Tarjeta de instrucciones (tinte primary) ── */ .activation-steps { margin-top: 18px; padding: 16px; border-radius: 14px; /* Tinte primary theme-adaptativo (una regla, ambos temas): en claro * ≈ primary-50 sobre blanco, en oscuro ≈ velo azul sutil sobre slate. */ background: color-mix(in srgb, var(--color-primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent); } .activation-steps__title { font-size: 14px; font-weight: 700; color: var(--color-primary); margin: 0 0 14px; } .activation-steps__list { display: grid; gap: 13px; } .activation-steps__item { display: flex; gap: 12px; align-items: flex-start; } .activation-steps__num { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: var(--color-primary); color: #fff; /* blanco-sobre-marca (misma excepción que .btn--primary) */ display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .activation-steps__text { font-size: 13.5px; color: var(--color-text); line-height: 1.45; padding-top: 2px; } .activation-steps__text strong { color: var(--color-text); font-weight: 700; } .activation-steps__text .mono { font-family: var(--font-mono, monospace); } /* source: html_export/_shared/css/_button.css */ /* ────────────────────────────────────────────────────────────── * Alarmas · BUTTON preset — FUENTE ÚNICA (CSS recipe) * ────────────────────────────────────────────────────────────── * Botón canónico + variantes. La app tiene el componente Button * (primary/secondary/danger/success/glass); el portal lo re-implementa * en .btn-*-themed. Esta receta da paridad app + portal + specimens. * ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 11px 16px; border: 1px solid transparent; border-radius: var(--radius-lg); /* 12px */ cursor: pointer; user-select: none; text-decoration: none; /* paridad kit: sin subrayado UA */ transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .btn:active { transform: translateY(0) !important; } /* Primary — OVERRIDE saturado: brand blue puro en ambos temas. En oscuro, * var(--color-primary)=#60a5fa es la versión pastel y se lee "blanquecino"; * un CTA pide saturación constante. Mismo patrón que .btn--success y toggles. * Sombra compuesta (bevel + sharp + spread) para coherencia con --secondary. */ .btn--primary { /* Bevel como gradient sobre el bg (empieza en y=0, sin la franja de 1px del bg * puro que dejaba `inset 0 1px 0 white` con offset). El contorno + sombras se mantienen. */ background: linear-gradient(180deg, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 45%), #3b82f6; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.22), 0 2px 3px rgba(15,23,42,0.28); } .btn--primary:hover { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 45%), #2563eb; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.24), 0 3px 5px rgba(15,23,42,0.32); } /* Secundario — superficie TONAL (nivel 3): distinta del card y del input * para no fundirse dentro de un modal. Claro = slate-100, oscuro = slate-700 * (más claro que el card slate-800 → se lee elevado). Texto a contraste pleno. * Mejora deliberada sobre el Button de la app — se aplicará al kit en Fase 4. * * Bevel via linear-gradient sobre el bg (coherente con primary/danger/success). * Empieza en y=0 sin gap — evita la franja del bg puro arriba que dejarían * los inset shadows con offset. Contorno + sombra externa como antes. */ .btn--secondary { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), var(--color-surface-tonal); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 18%, transparent); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.22), 0 2px 3px rgba(15,23,42,0.28); } .btn--secondary:hover { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), var(--color-surface-tonal-hover); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 28%, transparent); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.24), 0 3px 5px rgba(15,23,42,0.32); transform: translateY(-1px); } /* En oscuro el bevel blanco al 50% se ve fantasmal sobre slate-700 — bajamos. */ [data-theme="dark"] .btn--secondary { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0) 45%), var(--color-surface-tonal); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.50), 0 2px 3px rgba(0,0,0,0.45); } [data-theme="dark"] .btn--secondary:hover { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0) 45%), var(--color-surface-tonal-hover); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.52), 0 3px 5px rgba(0,0,0,0.48); } /* Danger — OVERRIDE saturado por la misma razón (var(--color-error)=#f87171 en dark). */ .btn--danger { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 45%), #ef4444; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.22), 0 2px 3px rgba(15,23,42,0.28); } .btn--danger:hover { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 45%), #dc2626; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.24), 0 3px 5px rgba(15,23,42,0.32); } /* Success — OVERRIDE: usa un verde más profundo (green-600) para que el texto * blanco supere AA-large (3:1). var(--color-success)=#22c55e da ~2.4:1, falla. * Mismo patrón que el override del toggle: el preset toma su propia decisión. */ .btn--success { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 45%), #16a34a; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.22), 0 2px 3px rgba(15,23,42,0.28); } .btn--success:hover { background: linear-gradient(180deg, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 45%), #15803d; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.24), 0 3px 5px rgba(15,23,42,0.32); } /* En oscuro, sombra neutra más profunda (paralela a la del secondary). */ [data-theme="dark"] .btn--primary, [data-theme="dark"] .btn--danger, [data-theme="dark"] .btn--success { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.50), 0 2px 3px rgba(0,0,0,0.45); } [data-theme="dark"] .btn--primary:hover, [data-theme="dark"] .btn--danger:hover, [data-theme="dark"] .btn--success:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.52), 0 3px 5px rgba(0,0,0,0.48); } .btn--glass { background: var(--glass-bg); color: var(--color-text); -webkit-backdrop-filter: var(--glass-blur, blur(10px)); backdrop-filter: var(--glass-blur, blur(10px)); border-color: var(--glass-border); } /* White — botón blanco sólido para superficies cargadas (login dark, pantallas * de emergencia con fondo de color). Misma receta 3D (bevel + sombra compuesta) * que --primary/--danger/--success, pero el bg es blanco puro y el color del * texto se hereda (a menudo se sobrescribe por contexto: cfg.ack en alarmas). * SIEMPRE blanco — incluso en oscuro: la usan superficies cargadas donde el * contexto provee el contraste, no el tema del DS. */ .btn--white { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), #ffffff; color: #1e293b; /* texto SIEMPRE oscuro: el botón es blanco en ambos temas */ border-color: color-mix(in srgb, #1e293b 18%, transparent); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.22), 0 2px 3px rgba(15,23,42,0.28); } .btn--white:hover { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), #f8fafc; border-color: color-mix(in srgb, #1e293b 28%, transparent); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.24), 0 3px 5px rgba(15,23,42,0.32); transform: translateY(-1px); } /* Surface — botón "blanco puro" que SÍ se adapta al tema (claro = #fff, * oscuro = slate-800). Difiere de --secondary (tonal slate-100/slate-700) en * que aquí el bg coincide con el card-surface base, no con el nivel tonal-elevado. * Útil cuando quieres un dismiss neutro que se funda con la superficie de fondo * pero conserve el bevel 3D del sistema (ej. "Hecho" en modales de listado). */ .btn--surface { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), var(--color-surface); color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 18%, transparent); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.22), 0 2px 3px rgba(15,23,42,0.28); } .btn--surface:hover { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), var(--color-bg-alt); border-color: color-mix(in srgb, var(--color-text) 28%, transparent); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.24), 0 3px 5px rgba(15,23,42,0.32); transform: translateY(-1px); } /* En oscuro el bevel blanco al 50% se ve fantasmal sobre slate-800 — bajamos * (mismo patrón que --secondary). */ [data-theme="dark"] .btn--surface { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0) 45%), var(--color-surface); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.50), 0 2px 3px rgba(0,0,0,0.45); } [data-theme="dark"] .btn--surface:hover { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0) 45%), var(--color-bg-alt); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.52), 0 3px 5px rgba(0,0,0,0.48); } /* Danger-outline — descarte / acción destructiva en forma OUTLINE: superficie * del tema (blanca en claro, slate-800 en oscuro) con BORDE y TEXTO rojos y el * MISMO bevel 3D del sistema (gradient + sombra compuesta, como --surface). * Menos peso visual que --danger sólido; para "Cancelar", "Revocar acceso", * "Desvincular" en tarjetas y secciones de compartir. */ .btn--danger-outline { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), var(--color-surface); color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 45%, transparent); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.22), 0 2px 3px rgba(15,23,42,0.28); } .btn--danger-outline:hover { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), color-mix(in srgb, var(--color-error) 9%, var(--color-surface)); color: var(--color-error); border-color: var(--color-error); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.24), 0 3px 5px rgba(15,23,42,0.32); } /* En oscuro: bevel blanco más tenue sobre slate-800 (igual que --surface). */ [data-theme="dark"] .btn--danger-outline { background: linear-gradient(180deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0) 45%), var(--color-surface); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.50), 0 2px 3px rgba(0,0,0,0.45); } [data-theme="dark"] .btn--danger-outline:hover { background: linear-gradient(180deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0) 45%), color-mix(in srgb, var(--color-error) 16%, var(--color-surface)); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.52), 0 3px 5px rgba(0,0,0,0.48); } /* Primary-outline — gemelo azul del danger-outline: superficie del tema * (blanca en claro, slate-800 en oscuro) con BORDE y TEXTO primarios y el * MISMO bevel 3D del sistema. Acción secundaria de acento sin el peso del * --primary sólido; para "Copiar código", "Pegar código" y similares. */ .btn--primary-outline { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), var(--color-surface); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.22), 0 2px 3px rgba(15,23,42,0.28); } .btn--primary-outline:hover { background: linear-gradient(180deg, rgba(255,255,255,0.50) 0, rgba(255,255,255,0) 45%), color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)); color: var(--color-primary); border-color: var(--color-primary); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(15,23,42,0.10), 0 1px 1px rgba(15,23,42,0.24), 0 3px 5px rgba(15,23,42,0.32); } /* En oscuro: bevel blanco más tenue sobre slate-800 (igual que --surface). */ [data-theme="dark"] .btn--primary-outline { background: linear-gradient(180deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0) 45%), var(--color-surface); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.50), 0 2px 3px rgba(0,0,0,0.45); } [data-theme="dark"] .btn--primary-outline:hover { background: linear-gradient(180deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0) 45%), color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.52), 0 3px 5px rgba(0,0,0,0.48); } /* ────────────────────────────────────────────────────────────── * SOFT tintados — acción suave dentro de formularios/cards: fondo al * 15% del tono + borde al 30% + texto/icono en el tono `700`. La clave * de contraste: `--color--700` INVIERTE por tema (oscuro en claro, * claro en oscuro), así el texto pasa AA en ambos modos sobre el tinte. * Planos (sin bevel) — son acciones secundarias tonales, no CTAs. * Reemplazan los pares "Guardar/Eliminar" suaves del editor de triggers. */ .btn--soft-success { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success-700); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); box-shadow: none; font-weight: 500; } .btn--soft-success:hover { background: color-mix(in srgb, var(--color-success) 24%, transparent); border-color: color-mix(in srgb, var(--color-success) 45%, transparent); } .btn--soft-danger { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error-700); border-color: color-mix(in srgb, var(--color-error) 30%, transparent); box-shadow: none; font-weight: 500; } .btn--soft-danger:hover { background: color-mix(in srgb, var(--color-error) 24%, transparent); border-color: color-mix(in srgb, var(--color-error) 45%, transparent); } .btn--soft-primary { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary-700); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); box-shadow: none; font-weight: 500; } .btn--soft-primary:hover { background: color-mix(in srgb, var(--color-primary) 24%, transparent); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); } /* Neutro — pareja "no seleccionada" de un grupo soft (p.ej. el botón * inactivo en un On/Off semántico). Superficie lisa + texto secundario. */ .btn--soft-neutral { background: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-border); box-shadow: none; font-weight: 500; } .btn--soft-neutral:hover { background: var(--color-surface-tonal); border-color: color-mix(in srgb, var(--color-text) 22%, transparent); } /* Ghost — sin fondo, texto secundario, sin sombra. Para acciones de baja * prioridad dentro de cards o secciones expandidas. No tiene bevel ni borde: * se distingue por su tipografía y posición, no por superficie. */ .btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: transparent; box-shadow: none; } .btn--ghost:hover { background: var(--color-surface-tonal); color: var(--color-text); box-shadow: none; transform: none; } .btn--full { width: 100%; } .btn--sm { padding: 8px 12px; font-size: 13px; border-radius: var(--radius-md); } /* Variante LG — CTA grande de pantalla completa (onboarding del portal): * radio 16 (--radius-xl) + padding mayor. Reconcilia los CTAs `rounded-xl` * del portal sin forzar el radio 12 estándar a los botones compactos de la app. */ .btn--lg { padding: 14px 20px; font-size: 15px; border-radius: var(--radius-xl); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } /* ────────────────────────────────────────────────────────────── * Botón-icono ghost (.btn-icon) — standalone, NO extiende .btn. * Acción compacta solo-icono en barras de tarjeta (sensor, cámara, * ubicación, trigger). El color del glifo lo fija el ; aquí solo * geometría + hover tonal. Centraliza los consts btnIcon/iconBtn. * .btn-icon 30×30 · .btn-icon--lg 36×36 * ────────────────────────────────────────────────────────────── */ .btn-icon { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background 150ms ease; } .btn-icon:hover { background: var(--color-surface-tonal); } .btn-icon--lg { width: 36px; height: 36px; } .btn-icon:disabled { opacity: .5; cursor: not-allowed; } /* ────────────────────────────────────────────────────────────── * Botón de AYUDA (.btn-help) — el "?" estándar de "más información". * Círculo 3D con el bevel del sistema (gradient + borde + sombra * compuesta, nivel TONAL para destacar sobre cards). Glifo neutro que * vira a primario al hover. Pensado para cabeceras de secciones que * puedan confundir al usuario. Standalone, NO extiende .btn. * .btn-help 24×24 · .btn-help--lg 28×28 * ────────────────────────────────────────────────────────────── */ .btn-help { width: 24px; height: 24px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); background: linear-gradient(180deg, rgba(255,255,255,0.55) 0, rgba(255,255,255,0) 45%), var(--color-surface-tonal); color: var(--color-text-secondary); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 1px 1px rgba(15,23,42,0.18), 0 2px 3px rgba(15,23,42,0.22); transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .btn-help:hover { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); transform: translateY(-1px); box-shadow: 0 1px 1px rgba(15,23,42,0.20), 0 3px 5px rgba(15,23,42,0.26); } .btn-help:active { transform: translateY(0); } .btn-help--lg { width: 28px; height: 28px; font-size: 14px; } /* En oscuro: bevel blanco más tenue sobre slate-700 tonal, borde visible. * El glifo sube de contraste (entre secondary y text) para leerse mejor. */ [data-theme="dark"] .btn-help { background: linear-gradient(180deg, rgba(255,255,255,0.07) 0, rgba(255,255,255,0) 45%), var(--color-surface-tonal); border-color: var(--color-surface-tonal-border); color: color-mix(in srgb, var(--color-text) 70%, var(--color-text-secondary)); box-shadow: 0 1px 1px rgba(0,0,0,0.50), 0 2px 3px rgba(0,0,0,0.45); } [data-theme="dark"] .btn-help:hover { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); } /* source: html_export/_shared/css/_callout.css */ /* ────────────────────────────────────────────────────────────── * Alarmas · CALLOUT (caja de estado) preset — FUENTE ÚNICA · app + portal * ────────────────────────────────────────────────────────────── * La "caja de estado" tonal: un fondo `*-light` con texto/icono de alto * contraste `*-700`, por tono semántico (error · warning · success · info) * y theme-aware. Unifica: * · Portal → cuadro "Error de validación", placa con la ✕, bloque * "Reconfigurar WiFi", avisos del asistente. * · App → filas de alerta de SensorCard, .dialog-alert / cascade, etc. * * Dos superficies, MISMO par de color: * .callout → caja con texto (+ icono opcional a la izquierda). * .callout-tile → placa cuadrada con un icono centrado (la ✕ grande). * El tono se aplica con un modificador en CUALQUIERA de las dos: *
…
*
✕
* El icono/texto heredan el color del tono vía `currentColor`. * ────────────────────────────────────────────────────────────── */ /* Caja con texto */ .callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--radius-lg); /* 12px */ font-size: 13px; line-height: 1.5; } .callout > svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; } /* Los

/ internos heredan el color del tono — gana al reset base * `p { color: var(--color-text-secondary) }` de colors_and_type.css. */ .callout p, .callout small { color: inherit; } .callout--center { justify-content: center; text-align: center; } .callout-strong { font-weight: 600; } /* línea destacada dentro de la caja */ /* Placa de icono (cuadrado con icono centrado) — mismo par de color */ .callout-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border: 1px solid transparent; border-radius: var(--radius-2xl); /* 24px */ } .callout-tile > svg { width: 50%; height: 50%; } .callout-tile--sm { width: 40px; height: 40px; border-radius: var(--radius-lg); } /* Compacta — filas de alerta densas (SensorCard, cámara, avisos en línea). */ .callout--sm { padding: 6px 10px; gap: 6px; font-size: 12px; border-radius: var(--radius-md); } .callout--sm > svg { width: 14px; height: 14px; margin-top: 0; } /* ── Tonos — fondo `*-light` + texto/icono `*-700` (alto contraste, theme-aware). * El borde es el tono saturado a baja opacidad. Sirven igual a .callout y a .callout-tile. */ .callout--error { background: var(--color-error-light); color: var(--color-error-700); border-color: color-mix(in srgb, var(--color-error) 22%, transparent); } .callout--warning { background: var(--color-warning-light); color: var(--color-warning-700); border-color: color-mix(in srgb, var(--color-warning) 22%, transparent); } .callout--success { background: var(--color-success-light); color: var(--color-success-700); border-color: color-mix(in srgb, var(--color-success) 22%, transparent); } .callout--info { background: var(--color-info-light); color: var(--color-info-700); border-color: color-mix(in srgb, var(--color-info) 22%, transparent); } /* source: html_export/_shared/css/_chip.css */ /* ────────────────────────────────────────────────────────────── * Alarmas · CHIP preset — FUENTE ÚNICA (CSS recipe) * ────────────────────────────────────────────────────────────── * Geometría única para los tres patrones "pill/chip" que hoy se * repiten inline (~10 veces) en el App Kit: * · status-pill → el átomo (dot + texto). El COLOR sigue * siendo dinámico vía statusTone(tone, tk) — eso es * inline justificado; aquí solo va la forma. * · type-chip → el chip de tipo de sensor (sensor.kind): MAYÚSCULAS, * gris, radio pequeño. Color estático = 100% en CSS. * · count-badge → el badge numérico de notificaciones. * * Filosofía idéntica al resto de presets: cambiar la forma del pill * en TODO el producto = editar solo este archivo. * ────────────────────────────────────────────────────────────── */ /* Base — status-pill: forma del Badge. El consumidor aporta background/ * color (statusTone) y el color del punto; aquí solo la geometría. */ .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.4; padding: 3px 10px; border-radius: 9999px; border: 1px solid transparent; } .chip > .chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* TYPE — chip de tipo de sensor: MAYÚSCULAS, gris tonal, radio 6. * Color 100% por token (estático), no necesita inline. */ .chip--type { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); background: rgba(148, 163, 184, .12); border-radius: 6px; padding: 3px 7px; } /* COUNT — badge numérico (notificaciones). Por defecto primary; el * consumidor puede sobrescribir el fondo inline (badgeTone) cuando aplique. * Texto SIEMPRE blanco: el fondo puede ser primary o un tono de alerta * (rojo/ámbar) según badgeTone, y el blanco mantiene contraste en todos. */ .chip--count { min-width: 18px; height: 18px; padding: 0 5px; justify-content: center; font-size: 10px; font-weight: 700; border-radius: 9999px; color: #fff; background: var(--color-primary); } /* source: html_export/_shared/css/_code-block.css */ /* ────────────────────────────────────────────────────────────── * Alarmas · CODE-BLOCK preset — FUENTE ÚNICA del bloque de código * ────────────────────────────────────────────────────────────── * Un solo recipe para los DOS usos del código de 8 caracteres: * * · GENERACIÓN — el propietario emite un código para compartir: * contenedor + código en 2 grupos de 4 + cuenta atrás de * caducidad + botón "Copiar código". * · CANJE — el invitado introduce el código que le han pasado: * MISMO contenedor + MISMOS 2 grupos de 4 (editables) + SIN * cuenta atrás + botón "Pegar código". * * Comparten contenedor, tipografía, cajas y acento. La diferencia * (cuenta atrás / copiar-vs-pegar / cajas read-only vs editables) * la decide el modo. Cambiar aquí el estilo cambia ambos a la vez. */ .code-block { background: var(--color-primary-50); border: 1px dashed color-mix(in srgb, var(--color-primary) 40%, transparent); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; } [data-theme="dark"] .code-block { background: color-mix(in srgb, var(--color-primary) 10%, transparent); } /* Caducado / inválido — el borde pasa a rojo punteado. */ .code-block.is-expired { border-color: color-mix(in srgb, var(--color-error) 40%, transparent); } /* Fila del código: 2 grupos de 4 con separador central. */ .code-block__code { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); } .code-block.is-expired .code-block__code { opacity: 0.5; } .code-block__group { font-size: 26px; font-weight: 700; color: var(--color-primary-700); letter-spacing: 0.18em; text-indent: 0.18em; /* compensa el tracking final → centrado óptico */ padding: 6px 12px; min-width: 4ch; text-align: center; background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent); border-radius: 10px; text-transform: uppercase; } [data-theme="dark"] .code-block__group { background: color-mix(in srgb, var(--color-bg) 60%, transparent); } /* Grupo editable (modo canje): input que se ve idéntico a la caja. */ input.code-block__group { width: 5ch; box-sizing: content-box; /* el padding 12px va aparte del ancho de texto */ letter-spacing: 0.14em; text-indent: 0.14em; font-family: var(--font-mono); outline: none; caret-color: var(--color-primary); } input.code-block__group::placeholder { color: var(--color-text-muted); opacity: 0.55; } input.code-block__group:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } .code-block__sep { color: var(--color-primary); font-size: 22px; font-weight: 700; line-height: 1; } /* ── Campo ÚNICO (modo canje) ── * Un solo input con el código completo. El "·" central es SOLO visual * (se inserta al formatear el value para mostrarlo agrupado 4+4), pero * el estado guarda el código CRUDO y los handlers copy/cut escriben el * código sin formato en el portapapeles. Así pegar un código completo * llena todo el campo y copiar devuelve el número limpio. */ .code-block__single { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--color-primary-700); letter-spacing: 0.12em; text-align: center; text-transform: uppercase; padding: 6px 18px; width: 14ch; box-sizing: content-box; background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent); border-radius: 10px; outline: none; caret-color: var(--color-primary); } [data-theme="dark"] .code-block__single { background: color-mix(in srgb, var(--color-bg) 60%, transparent); } .code-block__single::placeholder { color: var(--color-text-muted); opacity: 0.5; } .code-block__single:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } /* Fila inferior: meta (cuenta atrás) + acción (copiar / pegar). */ .code-block__meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--color-text-secondary); } .code-block__time { display: inline-flex; align-items: center; gap: 5px; } .code-block__time strong { font-family: var(--font-mono); font-weight: 600; color: var(--color-text); } .code-block.is-expired .code-block__time { color: var(--color-error); font-weight: 600; } /* Las acciones Copiar / Pegar usan el preset de botón 3D * `.btn--primary-outline .btn--sm` (definido en _button.css): superficie * del tema + borde y texto azules + bevel. El estado "Copiado" cambia a * `.btn--success`. Aquí solo se ajusta el tamaño del icono dentro de la * fila meta para que case con la tipografía. */ .code-block__meta .btn svg { width: 13px; height: 13px; } /* source: html_export/_shared/css/_conn-pulse.css */ /* ────────────────────────────────────────────────────────────── * Alarmas · CONN-PULSE preset — FUENTE ÚNICA (CSS recipe) * Extraído 1:1 del kit (screens.jsx ·