/* GENERADO POR tools/build_css.py — NO EDITAR A MANO. Cambia el archivo original y vuelve a construir. */ /* ── css/reset.css ── */ /* ================================================================ CSS Reset — Based on Josh Comeau's Modern CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ Adaptaciones para Rocket Academy: - Smooth scroll con prefers-reduced-motion completo - Listas NO reseteadas globalmente (accesibilidad Safari/iOS) - Form elements heredan font para consistencia con Inter - text-rendering optimizeLegibility para tipografia premium ================================================================ */ /* 1. Box sizing */ *, *::before, *::after { box-sizing: border-box; } /* 2. Remove default margins */ * { margin: 0; } /* 3. Body defaults */ body { line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 4. Smooth scroll + reduced motion */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 5. Media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* 6. Form elements inherit font */ input, button, textarea, select { font: inherit; color: inherit; } /* 7. Text wrapping */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* 8. Anchor reset */ a { color: inherit; text-decoration: none; } /* 9. Button reset */ button { background: none; border: none; padding: 0; cursor: pointer; } /* 10. Table reset */ table { border-collapse: collapse; border-spacing: 0; } /* ── css/tokens.css ── */ /* ================================================================ ROCKET ACADEMY — Design Tokens Dark theme. Semantic names for future light mode compatibility. ================================================================ */ :root { /* ── SURFACES ──────────────────────────────────────────────── */ --bg-canvas: #07070B; /* page background */ --bg-surface: #0C0C12; /* cards */ --bg-surface-raised: #111118; /* cards on cards, modals */ --bg-surface-sunken: #050508; /* inputs, recessed areas */ --bg-overlay: rgba(0, 0, 0, 0.6); /* modal backdrop */ --bg-hover: rgba(255, 255, 255, 0.04); --bg-active: rgba(255, 255, 255, 0.06); /* ── TEXT ──────────────────────────────────────────────────── */ --text-primary: #EEEEF2; /* titles, main body */ --text-secondary: rgba(238, 238, 242, 0.65); /* secondary body */ --text-tertiary: rgba(238, 238, 242, 0.52); /* metadata, timestamps */ --text-placeholder: rgba(238, 238, 242, 0.25); /* input placeholders */ --text-disabled: rgba(238, 238, 242, 0.15); --text-inverse: #07070B; /* text on accent backgrounds */ /* ── BORDERS ───────────────────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.05); /* dividers */ --border-default: rgba(255, 255, 255, 0.08); /* card borders */ --border-strong: rgba(255, 255, 255, 0.14); /* active inputs */ --border-focus: rgba(138, 107, 255, 0.4); /* focus ring border (primary) */ /* ── BRAND + PRIMARY (dual orange system) ─────────────────── */ /* Brand: logo, hero, decorative — warmer, higher chroma */ --color-brand: #8A6BFF; /* Primary: buttons, links, focus rings, UI accents — darker for WCAG AA */ --color-primary: #6D4AFF; /* violeta-azul marca, legible sobre dark */ --color-primary-hover: #7E5FFF; --color-primary-active: #5B38F0; --color-primary-soft: rgba(138, 107, 255, 0.10); /* soft backgrounds, badges, card hovers — dark mode */ --color-primary-foreground: #FFFFFF; /* ── BRAND 2026 (rebrand: azul eléctrico + lima + magenta) ── */ --color-lime: #E9FD3D; --color-lime-logo: #E0FC09; --color-lime-fg: #14132E; /* texto sobre lima */ --color-magenta: #E063D5; --color-violet: #7C3AED; --color-navy: #14132E; --logo-accent: var(--color-lime-logo); /* R del logo: lima en dark, azul en light */ --kicker-color: var(--color-lime); /* eyebrows/kickers: lima en dark, violeta en light */ /* ── ACCENT (mapped from primary for backward compat) ───── */ --accent-primary: var(--color-primary); --accent-primary-hover: var(--color-primary-hover); --accent-primary-active: var(--color-primary-active); --accent-primary-fg: var(--color-primary-foreground); --accent-muted: rgba(138, 107, 255, 0.10); /* tinted backgrounds */ --accent-muted-hover: rgba(138, 107, 255, 0.16); --accent-subtle: rgba(138, 107, 255, 0.06); /* very subtle tint */ /* ── ACCENT ALPHA (primitives) ────────────────────────────── */ --accent-alpha-4: color-mix(in srgb, var(--accent-primary) 4%, transparent); --accent-alpha-8: color-mix(in srgb, var(--accent-primary) 8%, transparent); --accent-alpha-10: color-mix(in srgb, var(--accent-primary) 10%, transparent); --accent-alpha-15: color-mix(in srgb, var(--accent-primary) 15%, transparent); --accent-alpha-20: color-mix(in srgb, var(--accent-primary) 20%, transparent); --accent-alpha-25: color-mix(in srgb, var(--accent-primary) 25%, transparent); --accent-alpha-30: color-mix(in srgb, var(--accent-primary) 30%, transparent); --accent-alpha-35: color-mix(in srgb, var(--accent-primary) 35%, transparent); --accent-alpha-40: color-mix(in srgb, var(--accent-primary) 40%, transparent); --accent-alpha-50: color-mix(in srgb, var(--accent-primary) 50%, transparent); --accent-alpha-60: color-mix(in srgb, var(--accent-primary) 60%, transparent); /* Semantic accent (public API — components use THESE, not primitives) */ --accent-glow-soft: var(--accent-alpha-4); /* gradients muy sutiles */ --accent-glow-medium: var(--accent-alpha-15); /* hover backgrounds, borders suaves */ --accent-glow-strong: var(--accent-alpha-30); /* selection, borders activos */ --accent-glow-intense: var(--accent-alpha-40); /* glows de elementos activos */ --accent-border-soft: var(--accent-alpha-10); /* bordes interiores, insets decorativos */ --accent-shadow-sm: 0 2px 8px var(--accent-alpha-25); --accent-shadow-md: 0 4px 16px var(--accent-alpha-35); --accent-shadow-lg: 0 6px 20px var(--accent-alpha-40); --accent-shadow-glow: 0 0 8px var(--accent-alpha-40); --accent-focus-ring: 0 0 0 3px var(--accent-alpha-15); /* Surface overlays — fondos blur con alpha fijo (no derivado de --bg-canvas) */ --bg-topbar-blur: rgba(7, 7, 11, 0.88); /* topbar desktop con backdrop-filter */ /* Un punto por encima del lienzo (#07070B): la barra iba exactamente del mismo color que la página, así que no leía como barra sino como contenido suelto. */ --bg-topbar-mobile: rgba(20, 20, 28, 0.95); /* topbar mobile con backdrop-filter */ --topbar-edge: rgba(255, 255, 255, 0.10); /* filete que cierra la barra */ --ava-ring: rgba(255, 255, 255, 0.22); /* aro del avatar: neutro, no el acento */ --notif-badge-bg: var(--color-lime-logo); /* globo de avisos: lima sobre oscuro */ --notif-badge-fg: var(--color-navy); --bg-bottomnav: rgba(7, 7, 11, 0.92); /* bottom nav mobile */ --bg-slide-menu: rgba(10, 10, 15, 0.98); /* slide menu mobile */ /* ── STATES ────────────────────────────────────────────────── */ --success: #22C55E; --success-hover: #16A34A; --success-active: #15803D; --success-fg: #FFFFFF; --success-muted: rgba(34, 197, 94, 0.10); --success-border: rgba(34, 197, 94, 0.20); --warning: #FBBF24; --warning-fg: #07070B; --warning-muted: rgba(251, 191, 36, 0.10); --warning-border: rgba(251, 191, 36, 0.20); --danger: #E05753; /* was #EF4444 — WCAG AA pass (ratio ~4.6) */ --danger-hover: #B91C1C; --danger-active: #991B1B; --danger-fg: #FFFFFF; --danger-muted: rgba(220, 38, 38, 0.10); --danger-border: rgba(239, 68, 68, 0.20); --info: #3B82F6; --info-fg: #FFFFFF; --info-muted: rgba(59, 130, 246, 0.10); --info-border: rgba(59, 130, 246, 0.20); /* ── TYPOGRAPHY ────────────────────────────────────────────── */ --font-body: 'Archivo', 'Archivo FB', system-ui, -apple-system, sans-serif; --font-primary: var(--font-body); /* alias for backward compat */ --font-mono: 'IBM Plex Mono', 'IBM Plex Mono FB', ui-monospace, monospace; --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px — app body */ --text-md: 0.9375rem; /* 15px */ --text-lg: 1.0625rem; /* 17px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.75rem; /* 44px */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relax: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.06em; --tracking-widest: 0.12em; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --font-display: 'Archivo', 'Archivo FB', system-ui, sans-serif; --tracking-logo: -0.01em; /* ── SPACING (4px scale) ───────────────────────────────────── */ --space-0: 0; --space-px: 1px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Semantic spacing */ --space-card-padding-sm: var(--space-3); --space-card-padding: var(--space-5); --space-card-padding-lg: var(--space-6); --space-section-gap: var(--space-12); --space-stack-tight: var(--space-2); --space-stack: var(--space-4); --space-stack-loose: var(--space-6); --space-inline-tight: var(--space-2); --space-inline: var(--space-3); --space-inline-loose: var(--space-4); --space-page-gutter: var(--space-5); /* mobile page padding */ --space-page-gutter-lg: var(--space-8); /* desktop page padding */ /* ── RADII ─────────────────────────────────────────────────── */ --radius-xs: 4px; /* badges, pills pequeñas */ --radius-sm: 6px; /* botones inline, chips */ --radius-md: 8px; /* botones, inputs */ --radius-lg: 12px; /* cards estándar */ --radius-xl: 16px; /* cards grandes, hero blocks */ --radius-full: 9999px; /* avatars, pills */ /* ── SHADOWS (dark mode — deeper, more dramatic) ──────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.12); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.16); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.20); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.28); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.36); --shadow-glow-accent: 0 0 0 3px rgba(138, 107, 255, 0.15); --shadow-glow-danger: 0 0 0 3px rgba(239, 68, 68, 0.15); /* Semantic shadow levels (3-tier: rest, hover, modal) */ --shadow-card-rest: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.045); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.50); /* ── MOTION ────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* standard decelerate */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot bounce */ --ease-standard: var(--ease-out); /* alias — default for UI */ --dur-instant: 80ms; --dur-fast: 150ms; /* was 160 — tighter */ --dur-base: 250ms; /* was 240 — rounder */ --dur-slow: 400ms; /* springs, page transitions */ /* ── Z-INDEX ───────────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-overlay: 1040; --z-modal: 1050; --z-popover: 1060; --z-toast: 1080; --z-tooltip: 1090; /* ── LAYOUT ────────────────────────────────────────────────── */ --topbar-height: 64px; --bottomnav-height: 56px; --sidebar-width: 260px; --sidebar-collapsed:72px; --content-max-width:1200px; /* ── COMPONENT: BUTTON ────────────────────────────────────── */ --btn-height-sm: 32px; --btn-height-md: 40px; --btn-height-lg: 48px; --btn-padding-x-sm: var(--space-3); /* 12px */ --btn-padding-x-md: var(--space-4); /* 16px */ --btn-padding-x-lg: var(--space-5); /* 20px */ --btn-text-sm: var(--text-sm); /* 13px */ --btn-text-md: var(--text-base); /* 14px */ --btn-text-lg: var(--text-md); /* 15px */ --btn-radius: var(--radius-md); /* 10px */ --btn-icon-gap: var(--space-2); /* 8px */ --btn-transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); /* ── COMPONENT: INPUT ─────────────────────────────────────── */ --input-height-sm: 32px; --input-height-md: 40px; --input-height-lg: 48px; --input-padding-x-sm: var(--space-3); /* 12px */ --input-padding-x-md: var(--space-3); /* 12px */ --input-padding-x-lg: var(--space-4); /* 16px */ --input-text-sm: var(--text-sm); /* 13px */ --input-text-md: var(--text-base); /* 14px */ --input-text-lg: var(--text-md); /* 15px */ --input-radius: var(--radius-md); /* 10px */ --input-icon-padding: 36px; /* padding-left/right when icon present */ --input-transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); /* ── COMPONENT: CARD ──────────────────────────────────────── */ --card-padding-sm: var(--space-4); /* 16px */ --card-padding-md: var(--space-6); /* 24px */ --card-padding-lg: var(--space-8); /* 32px */ --card-radius: var(--radius-lg); /* 12px */ --card-bg: var(--bg-surface); --card-border: var(--border-subtle); --card-border-hover: var(--border-default); --card-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2); --card-transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); /* ── COMPONENT: AVATAR ────────────────────────────────────── */ --avatar-size-xs: 24px; --avatar-size-sm: 32px; --avatar-size-md: 40px; --avatar-size-lg: 48px; --avatar-size-xl: 64px; --avatar-size-2xl: 96px; --avatar-radius: 50%; --avatar-radius-square: var(--radius-md); --avatar-border: 2px solid var(--bg-canvas); --avatar-bg-fallback: var(--bg-surface); --avatar-status-size-sm: 8px; --avatar-status-size-md: 10px; --avatar-status-size-lg: 12px; --avatar-status-online: var(--success); --avatar-status-away: #FBB03B; --avatar-status-busy: var(--danger); --avatar-status-offline: var(--text-tertiary); --avatar-overlap: -8px; /* ── COMPONENT: BADGE ─────────────────────────────────────── */ --badge-height-sm: 18px; --badge-height-md: 22px; --badge-height-lg: 26px; --badge-padding-x-sm: 6px; --badge-padding-x-md: 8px; --badge-padding-x-lg: 10px; --badge-text-sm: 11px; --badge-text-md: 12px; --badge-text-lg: 13px; --badge-radius: var(--radius-sm); --badge-radius-pill: 999px; /* ── COMPONENT: DROPDOWN ──────────────────────────────────── */ --dropdown-bg: var(--bg-surface-raised); --dropdown-border: var(--border-subtle); --dropdown-radius: var(--radius-md); --dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --dropdown-min-width: 200px; --dropdown-item-height: 36px; --dropdown-item-padding-x: var(--space-3); --dropdown-divider-color: var(--border-subtle); /* ── COMPONENT: MODAL ─────────────────────────────────────── */ --modal-overlay-bg: rgba(7, 7, 11, 0.7); --modal-overlay-blur: 8px; --modal-bg: var(--bg-surface); --modal-radius: var(--radius-lg); --modal-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6); --modal-max-width-sm: 400px; --modal-max-width-md: 560px; --modal-max-width-lg: 720px; --modal-max-width-xl: 960px; --modal-padding: var(--space-6); /* ── COMPONENT: TOAST ─────────────────────────────────────── */ --toast-bg: var(--bg-surface-raised); --toast-border: var(--border-default); --toast-radius: var(--radius-md); --toast-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); --toast-padding: var(--space-4); --toast-gap: var(--space-3); --toast-min-width: 320px; --toast-max-width: 420px; } /* ================================================================ THEME: LIGHT MODE Overrides theme-dependent tokens when [data-theme="light"] is set. Non-theme tokens (typography, spacing, radii, motion, z-index, layout, component sizing) stay in :root and are shared. ================================================================ */ :root[data-theme="light"] { /* ── SURFACES ── */ --bg-canvas: #EAE9E3; --bg-surface: #FFFFFF; --bg-surface-raised: #FFFFFF; --bg-surface-sunken: #EFEEEA; --bg-overlay: rgba(0, 0, 0, 0.4); --bg-hover: rgba(20, 20, 26, 0.04); --bg-active: rgba(20, 20, 26, 0.06); /* ── TEXT ── */ --text-primary: #14151A; --text-secondary: #5A5B66; --text-tertiary: #6F707D; /* AA ~4.8:1 sobre blanco (antes #9B9CA8, 2.7:1) */ --text-placeholder: #B8B9C2; --text-disabled: #E5E7EB; --text-inverse: #FFFFFF; /* ── BORDERS ── */ --border-subtle: #ECEBE7; --border-default: #E6E6E2; --border-strong: #D8D8D2; --border-focus: rgba(72, 0, 255, 0.35); /* ── PRIMARY (light: azul eléctrico pleno) ── */ --color-brand: #4800FF; --color-primary: #4800FF; --color-primary-hover: #3402B1; --color-primary-active: #2A0193; --logo-accent: #4800FF; --kicker-color: #7A00C4; /* ── ACCENT (light adjustments) ── */ --accent-muted: rgba(72, 0, 255, 0.09); --accent-muted-hover: rgba(72, 0, 255, 0.13); --accent-subtle: rgba(72, 0, 255, 0.05); /* ── PRIMARY SOFT (light mode) ── */ --color-primary-soft: #ECE8FC; /* ── STATES ── */ --success: #0FA05F; --success-hover: #15803D; --success-active: #166534; --success-fg: #FFFFFF; --success-muted: rgba(22, 163, 74, 0.08); --success-border: rgba(22, 163, 74, 0.20); --warning: #DE781E; --warning-fg: #FFFFFF; --warning-muted: rgba(217, 119, 6, 0.08); --warning-border: rgba(217, 119, 6, 0.20); --danger: #E05753; --danger-hover: #B91C1C; --danger-active: #991B1B; --danger-fg: #FFFFFF; --danger-muted: rgba(220, 38, 38, 0.08); --danger-border: rgba(220, 38, 38, 0.20); --info: #3E9BFF; --info-fg: #FFFFFF; --info-muted: rgba(37, 99, 235, 0.08); --info-border: rgba(37, 99, 235, 0.20); /* ── SHADOWS (lighter for light mode) ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.14); --shadow-glow-accent: 0 0 0 3px rgba(72, 0, 255, 0.12); --shadow-glow-danger: 0 0 0 3px rgba(220, 38, 38, 0.12); /* Semantic shadow levels (lighter for light mode) */ --shadow-card-rest: 0 1px 2px rgba(20, 20, 26, 0.05), 0 5px 14px -6px rgba(20, 20, 26, 0.08); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.12); /* ── SURFACE OVERLAYS (light) ── */ --bg-topbar-blur: rgba(234, 233, 227, 0.85); --bg-topbar-mobile: rgba(255, 255, 255, 0.92); --topbar-edge: #DEDDD7; --ava-ring: rgba(20, 21, 26, 0.16); --notif-badge-bg: var(--color-primary); /* el lima sobre beige daba 1,05:1 */ --notif-badge-fg: #FFFFFF; --bg-bottomnav: rgba(255, 255, 255, 0.92); --bg-slide-menu: rgba(255, 255, 255, 0.98); /* ── COMPONENT OVERRIDES ── */ --card-bg: var(--bg-surface); --card-border: var(--border-subtle); --card-border-hover: var(--border-default); --card-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --dropdown-bg: var(--bg-surface); --dropdown-border: var(--border-default); --dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); --modal-overlay-bg: rgba(0, 0, 0, 0.4); --modal-bg: var(--bg-surface); --modal-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.16); --toast-bg: var(--bg-surface); --toast-border: var(--border-default); --toast-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); } /* ── AUTO MODE: resolve via OS preference ─────────────────────── */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { /* ── SURFACES ── */ --bg-canvas: #EAE9E3; --bg-surface: #FFFFFF; --bg-surface-raised: #FFFFFF; --bg-surface-sunken: #EFEEEA; --bg-overlay: rgba(0, 0, 0, 0.4); --bg-hover: rgba(20, 20, 26, 0.04); --bg-active: rgba(20, 20, 26, 0.06); /* ── TEXT ── */ --text-primary: #14151A; --text-secondary: #5A5B66; --text-tertiary: #6F707D; /* AA ~4.8:1 sobre blanco (antes #9B9CA8, 2.7:1) */ --text-placeholder: #B8B9C2; --text-disabled: #E5E7EB; --text-inverse: #FFFFFF; /* ── BORDERS ── */ --border-subtle: #ECEBE7; --border-default: #E6E6E2; --border-strong: #D8D8D2; --border-focus: rgba(72, 0, 255, 0.35); /* ── PRIMARY (auto light: azul eléctrico pleno) ── */ --color-brand: #4800FF; --color-primary: #4800FF; --color-primary-hover: #3402B1; --color-primary-active: #2A0193; --logo-accent: #4800FF; --kicker-color: #7A00C4; /* ── ACCENT ── */ --accent-muted: rgba(72, 0, 255, 0.09); --accent-muted-hover: rgba(72, 0, 255, 0.13); --accent-subtle: rgba(72, 0, 255, 0.05); /* ── PRIMARY SOFT (auto light) ── */ --color-primary-soft: #ECE8FC; /* ── STATES ── */ --success: #0FA05F; --success-hover: #15803D; --success-active: #166534; --success-fg: #FFFFFF; --success-muted: rgba(22, 163, 74, 0.08); --success-border: rgba(22, 163, 74, 0.20); --warning: #DE781E; --warning-fg: #FFFFFF; --warning-muted: rgba(217, 119, 6, 0.08); --warning-border: rgba(217, 119, 6, 0.20); --danger: #E05753; --danger-hover: #B91C1C; --danger-active: #991B1B; --danger-fg: #FFFFFF; --danger-muted: rgba(220, 38, 38, 0.08); --danger-border: rgba(220, 38, 38, 0.20); --info: #3E9BFF; --info-fg: #FFFFFF; --info-muted: rgba(37, 99, 235, 0.08); --info-border: rgba(37, 99, 235, 0.20); /* ── SHADOWS ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.14); --shadow-glow-accent: 0 0 0 3px rgba(72, 0, 255, 0.12); --shadow-glow-danger: 0 0 0 3px rgba(220, 38, 38, 0.12); /* Semantic shadow levels */ --shadow-card-rest: 0 1px 2px rgba(20, 20, 26, 0.05), 0 5px 14px -6px rgba(20, 20, 26, 0.08); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.12); /* ── SURFACE OVERLAYS ── */ --bg-topbar-blur: rgba(234, 233, 227, 0.85); --bg-topbar-mobile: rgba(255, 255, 255, 0.92); --topbar-edge: #DEDDD7; --ava-ring: rgba(20, 21, 26, 0.16); --notif-badge-bg: var(--color-primary); /* el lima sobre beige daba 1,05:1 */ --notif-badge-fg: #FFFFFF; --bg-bottomnav: rgba(255, 255, 255, 0.92); --bg-slide-menu: rgba(255, 255, 255, 0.98); /* ── COMPONENT OVERRIDES ── */ --card-bg: var(--bg-surface); --card-border: var(--border-subtle); --card-border-hover: var(--border-default); --card-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --dropdown-bg: var(--bg-surface); --dropdown-border: var(--border-default); --dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); --modal-overlay-bg: rgba(0, 0, 0, 0.4); --modal-bg: var(--bg-surface); --modal-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.16); --toast-bg: var(--bg-surface); --toast-border: var(--border-default); --toast-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); } } /* ── REDUCED MOTION ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* ================================================================ SHELL 2026 — tokens del chrome (sidebar/topbar/móvil) y de la home. Independientes del tema: el sidebar es navy en claro y oscuro. ================================================================ */ :root { --sb-bg: linear-gradient(180deg, #1D2043 0%, #14132E 100%); --sb-bg-wash: radial-gradient(120% 40% at 20% -10%, rgba(72, 0, 255, 0.20) 0%, transparent 60%); --sb-fg: rgba(255, 255, 255, 0.72); --sb-fg-strong: #FFFFFF; --sb-muted: rgba(255, 255, 255, 0.5); --sb-hover: rgba(255, 255, 255, 0.07); --sb-line: rgba(255, 255, 255, 0.08); --sb-active-bg: linear-gradient(135deg, #4800FF 0%, #3B00D6 100%); --sb-active-fg: var(--color-lime-logo); --sb-badge-bg: var(--color-lime-logo); --sb-badge-fg: var(--color-navy); --sb-item-h: 40px; --sb-sub-h: 34px; --sb-radius: 10px; --navy-2: #1D2043; /* Dependientes del tema — valores DARK (base) */ --nav-active: var(--color-lime); --fill-accent: var(--color-lime); --dot-color: rgba(255, 255, 255, 0.06); --heat-0: rgba(255, 255, 255, 0.06); --heat-1: rgba(233, 253, 61, 0.22); --heat-2: rgba(233, 253, 61, 0.42); --heat-3: rgba(233, 253, 61, 0.68); --heat-4: #E9FD3D; --label-muted: rgba(238, 238, 242, 0.58); --hard-shadow: 0 0 0 0 transparent; --note-bg: #1A1A24; --note-tape: rgba(233, 253, 61, 0.55); --accent-cell-label: var(--color-lime); --topbar-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.55); --ticket-shadow: 0 24px 60px -24px rgba(72, 0, 255, 0.45); --ticket-border: rgba(255, 255, 255, 0.08); } :root[data-theme="light"], html.light { --nav-active: #4800FF; --fill-accent: #4800FF; --dot-color: rgba(20, 19, 46, 0.07); --heat-0: #EFEEEA; --heat-1: rgba(72, 0, 255, 0.16); --heat-2: rgba(72, 0, 255, 0.34); --heat-3: rgba(72, 0, 255, 0.60); --heat-4: #4800FF; --label-muted: var(--text-secondary); --hard-shadow: 3px 3px 0 #14132E; --note-bg: #F4F1E6; --note-tape: rgba(72, 0, 255, 0.18); --accent-cell-label: rgba(255, 255, 255, 0.85); --topbar-shadow: 0 10px 30px -18px rgba(20, 21, 26, 0.16); --ticket-shadow: 0 20px 40px -20px rgba(20, 19, 46, 0.35); --ticket-border: rgba(20, 19, 46, 0.15); } @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --nav-active: #4800FF; --fill-accent: #4800FF; --dot-color: rgba(20, 19, 46, 0.07); --heat-0: #EFEEEA; --heat-1: rgba(72, 0, 255, 0.16); --heat-2: rgba(72, 0, 255, 0.34); --heat-3: rgba(72, 0, 255, 0.60); --heat-4: #4800FF; --label-muted: var(--text-secondary); --hard-shadow: 3px 3px 0 #14132E; --note-bg: #F4F1E6; --note-tape: rgba(72, 0, 255, 0.18); --accent-cell-label: rgba(255, 255, 255, 0.85); --topbar-shadow: 0 10px 30px -18px rgba(20, 21, 26, 0.16); --ticket-shadow: 0 20px 40px -20px rgba(20, 19, 46, 0.35); --ticket-border: rgba(20, 19, 46, 0.15); } } /* ── css/tailwind-output.css ── */ /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-orange-400:oklch(75% .183 55.934);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-600:oklch(64.6% .222 41.116);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-900:oklch(42.1% .095 57.708);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-teal-500:oklch(70.4% .14 182.503);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-900:oklch(38.1% .176 304.987);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-800:oklch(27.8% .033 256.848);--color-zinc-500:oklch(55.2% .016 285.938);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-lg:16px;--blur-xl:24px;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-rocket-bg:#07070b;--color-rocket-card:#0f0f17;--color-rocket-border:#1a1a2e;--color-rocket-orange:var(--color-primary);--color-rocket-orange-light:var(--color-primary-hover);--color-rocket-purple:#8b5cf6;--color-rocket-green:#22c55e;--color-rocket-gold:#fbbf24;--color-rocket-text:#e4e4e7;--color-rocket-muted:#71717a;--font-display:"Archivo", system-ui, sans-serif;--font-body:"Archivo", system-ui, sans-serif;--animate-fade-up:fade-up .5s ease-out both}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.right-0{right:calc(var(--spacing) * 0)}.bottom-0{bottom:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mr-2{margin-right:calc(var(--spacing) * 2)}.-mb-4{margin-bottom:calc(var(--spacing) * -4)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.mb-12{margin-bottom:calc(var(--spacing) * 12)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-3{margin-left:calc(var(--spacing) * 3)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-24{height:calc(var(--spacing) * 24)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-2{width:calc(var(--spacing) * 2)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-48{width:calc(var(--spacing) * 48)}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-\[900px\]{max-width:900px}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.translate-x-0{--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-8{--tw-translate-x:calc(var(--spacing) * 8);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-fade-up{animation:var(--animate-fade-up)}.animate-pulse{animation:var(--animate-pulse)}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.-space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-white\/\[0\.04\]>:not(:last-child)){border-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){:where(.divide-white\/\[0\.04\]>:not(:last-child)){border-color:color-mix(in oklab, var(--color-white) 4%, transparent)}}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-xl{border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blue-500\/20{border-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.border-blue-500\/20{border-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.border-green-500\/20{border-color:#00c75833}@supports (color:color-mix(in lab, red, red)){.border-green-500\/20{border-color:color-mix(in oklab, var(--color-green-500) 20%, transparent)}}.border-purple-500\/20{border-color:#ac4bff33}@supports (color:color-mix(in lab, red, red)){.border-purple-500\/20{border-color:color-mix(in oklab, var(--color-purple-500) 20%, transparent)}}.border-red-500\/20{border-color:#fb2c3633}@supports (color:color-mix(in lab, red, red)){.border-red-500\/20{border-color:color-mix(in oklab, var(--color-red-500) 20%, transparent)}}.border-rocket-orange\/20{border-color:var(--color-rocket-orange)}@supports (color:color-mix(in lab, red, red)){.border-rocket-orange\/20{border-color:color-mix(in oklab, var(--color-rocket-orange) 20%, transparent)}}.border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/5{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.border-white\/6{border-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.border-white\/6{border-color:color-mix(in oklab, var(--color-white) 6%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\/20{border-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.border-white\/\[0\.05\]{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.05\]{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.border-white\/\[0\.08\]{border-color:#ffffff14}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.08\]{border-color:color-mix(in oklab, var(--color-white) 8%, transparent)}}.border-yellow-500\/20{border-color:#edb20033}@supports (color:color-mix(in lab, red, red)){.border-yellow-500\/20{border-color:color-mix(in oklab, var(--color-yellow-500) 20%, transparent)}}.border-yellow-500\/40{border-color:#edb20066}@supports (color:color-mix(in lab, red, red)){.border-yellow-500\/40{border-color:color-mix(in oklab, var(--color-yellow-500) 40%, transparent)}}.bg-black\/85{background-color:#000000d9}@supports (color:color-mix(in lab, red, red)){.bg-black\/85{background-color:color-mix(in oklab, var(--color-black) 85%, transparent)}}.bg-blue-500\/10{background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/10{background-color:color-mix(in oklab, var(--color-blue-500) 10%, transparent)}}.bg-green-400{background-color:var(--color-green-400)}.bg-green-500{background-color:var(--color-green-500)}.bg-green-500\/10{background-color:#00c7581a}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/10{background-color:color-mix(in oklab, var(--color-green-500) 10%, transparent)}}.bg-purple-500{background-color:var(--color-purple-500)}.bg-purple-500\/10{background-color:#ac4bff1a}@supports (color:color-mix(in lab, red, red)){.bg-purple-500\/10{background-color:color-mix(in oklab, var(--color-purple-500) 10%, transparent)}}.bg-red-500{background-color:var(--color-red-500)}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/10{background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.bg-rocket-bg{background-color:var(--color-rocket-bg)}.bg-rocket-orange{background-color:var(--color-rocket-orange)}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-white\/\[0\.02\]{background-color:#ffffff05}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.02\]{background-color:color-mix(in oklab, var(--color-white) 2%, transparent)}}.bg-white\/\[0\.03\]{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.03\]{background-color:color-mix(in oklab, var(--color-white) 3%, transparent)}}.bg-yellow-500\/5{background-color:#edb2000d}@supports (color:color-mix(in lab, red, red)){.bg-yellow-500\/5{background-color:color-mix(in oklab, var(--color-yellow-500) 5%, transparent)}}.bg-yellow-500\/10{background-color:#edb2001a}@supports (color:color-mix(in lab, red, red)){.bg-yellow-500\/10{background-color:color-mix(in oklab, var(--color-yellow-500) 10%, transparent)}}.bg-yellow-500\/20{background-color:#edb20033}@supports (color:color-mix(in lab, red, red)){.bg-yellow-500\/20{background-color:color-mix(in oklab, var(--color-yellow-500) 20%, transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-rocket-orange\/20{--tw-gradient-from:var(--color-rocket-orange)}@supports (color:color-mix(in lab, red, red)){.from-rocket-orange\/20{--tw-gradient-from:color-mix(in oklab, var(--color-rocket-orange) 20%, transparent)}}.from-rocket-orange\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-purple-500\/10{--tw-gradient-to:#ac4bff1a}@supports (color:color-mix(in lab, red, red)){.to-purple-500\/10{--tw-gradient-to:color-mix(in oklab, var(--color-purple-500) 10%, transparent)}}.to-purple-500\/10{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-rocket-orange\/5{--tw-gradient-to:var(--color-rocket-orange)}@supports (color:color-mix(in lab, red, red)){.to-rocket-orange\/5{--tw-gradient-to:color-mix(in oklab, var(--color-rocket-orange) 5%, transparent)}}.to-rocket-orange\/5{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-10{padding:calc(var(--spacing) * 10)}.p-12{padding:calc(var(--spacing) * 12)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[15px\]{font-size:15px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-wrap{text-wrap:wrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[var\(--color-lime\)\]{color:var(--color-lime)}.text-blue-400{color:var(--color-blue-400)}.text-green-400{color:var(--color-green-400)}.text-purple-400{color:var(--color-purple-400)}.text-purple-400\/50{color:#c07eff80}@supports (color:color-mix(in lab, red, red)){.text-purple-400\/50{color:color-mix(in oklab, var(--color-purple-400) 50%, transparent)}}.text-red-400{color:var(--color-red-400)}.text-rocket-gold{color:var(--color-rocket-gold)}.text-rocket-green{color:var(--color-rocket-green)}.text-rocket-muted{color:var(--color-rocket-muted)}.text-rocket-orange{color:var(--color-rocket-orange)}.text-rocket-text{color:var(--color-rocket-text)}.text-white{color:var(--color-white)}.text-white\/20{color:#fff3}@supports (color:color-mix(in lab, red, red)){.text-white\/20{color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.text-white\/40{color:#fff6}@supports (color:color-mix(in lab, red, red)){.text-white\/40{color:color-mix(in oklab, var(--color-white) 40%, transparent)}}.text-white\/50{color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.text-white\/50{color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.text-white\/60{color:#fff9}@supports (color:color-mix(in lab, red, red)){.text-white\/60{color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab, red, red)){.text-white\/80{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.text-yellow-300{color:var(--color-yellow-300)}.text-yellow-400{color:var(--color-yellow-400)}.text-yellow-500{color:var(--color-yellow-500)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-white\/30::placeholder{color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.placeholder-white\/30::placeholder{color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-rocket-orange\/30{--tw-shadow-color:var(--color-rocket-orange)}@supports (color:color-mix(in lab, red, red)){.shadow-rocket-orange\/30{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-rocket-orange) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-lg{--tw-backdrop-blur:blur(var(--blur-lg));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.delay-1{transition-delay:1ms}.delay-2{transition-delay:2ms}.delay-3{transition-delay:3ms}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.peer-checked\:border-rocket-orange:is(:where(.peer):checked~*){border-color:var(--color-rocket-orange)}@media (hover:hover){.hover\:border-white\/10:hover{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/10:hover{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:bg-orange-600:hover{background-color:var(--color-orange-600)}.hover\:bg-purple-600:hover{background-color:var(--color-purple-600)}.hover\:bg-red-500\/20:hover{background-color:#fb2c3633}@supports (color:color-mix(in lab, red, red)){.hover\:bg-red-500\/20:hover{background-color:color-mix(in oklab, var(--color-red-500) 20%, transparent)}}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:bg-white\/15:hover{background-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/15:hover{background-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.hover\:bg-yellow-500\/30:hover{background-color:#edb2004d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-yellow-500\/30:hover{background-color:color-mix(in oklab, var(--color-yellow-500) 30%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:text-white\/80:hover{color:#fffc}@supports (color:color-mix(in lab, red, red)){.hover\:text-white\/80:hover{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.hover\:underline:hover{text-decoration-line:underline}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}@media (min-width:40rem){.sm\:h-18{height:calc(var(--spacing) * 18)}.sm\:h-22{height:calc(var(--spacing) * 22)}.sm\:w-18{width:calc(var(--spacing) * 18)}.sm\:w-22{width:calc(var(--spacing) * 22)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:p-8{padding:calc(var(--spacing) * 8)}.sm\:p-14{padding:calc(var(--spacing) * 14)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}@media (min-width:48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:64rem){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* ── css/academy.css ── */ /* ============================== ROCKET ACADEMY — Premium Dark Theme Design System v2.0 ============================== */ /* ---- Base Components ---- */ .input-field { @apply w-full bg-rocket-surface border border-rocket-border rounded-xl px-4 py-3 text-rocket-text placeholder-rocket-muted/50 focus:outline-none focus:ring-2 focus:ring-rocket-orange/50 focus:border-rocket-orange/50 transition-all duration-200; } .btn-primary { @apply inline-flex items-center justify-center gap-2 bg-gradient-to-r from-rocket-orange to-rocket-orange-light text-white font-semibold rounded-xl px-6 py-3 hover:shadow-lg hover:shadow-rocket-orange/30 active:scale-[0.98] transition-all duration-200; } .btn-secondary { @apply inline-flex items-center justify-center gap-2 bg-rocket-surface border border-rocket-border text-rocket-text font-medium rounded-xl px-6 py-3 hover:bg-rocket-card hover:border-rocket-orange/30 transition-all duration-200; } /* ---- Navigation ---- */ .nav-link { @apply flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-rocket-muted hover:text-white hover:bg-rocket-surface transition-all duration-200; } .nav-link.active { @apply text-white bg-rocket-surface; } .mobile-nav-link { @apply flex flex-col items-center gap-1 text-rocket-muted transition-colors duration-200; } .mobile-nav-link.active { @apply text-rocket-orange; } /* ---- Flash Messages ---- */ .flash-message { @apply flex items-center gap-3 px-5 py-3 rounded-xl bg-rocket-card/95 backdrop-blur-xl border border-rocket-border shadow-2xl min-w-[250px]; } .flash-success { @apply border-rocket-green/30; } .flash-error { @apply border-red-500/30; } .flash-warning { @apply border-yellow-500/30; } .flash-xp { @apply border-rocket-orange/40 bg-rocket-orange/10; } .flash-achievement { @apply border-rocket-gold/40 bg-rocket-gold/10; } /* ---- Animations ---- */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .animate-float { animation: float 3s ease-in-out infinite; } @keyframes flame { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .streak-flame { animation: flame 1.5s ease-in-out infinite; display: inline-block; } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 5px color-mix(in srgb, var(--color-primary) 20%, transparent); } 50% { box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 40%, transparent); } } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } /* Progress bar fill */ .progress-bar-animated { animation: progress-fill 1.5s ease-out; } @keyframes progress-fill { from { width: 0%; } } /* Badge glow */ .badge-earned { animation: badge-glow 3s ease-in-out infinite alternate; } @keyframes badge-glow { 0% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); } 100% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.12); } } /* XP popup */ @keyframes xp-fly { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-60px) scale(1.3); } } .xp-fly { animation: xp-fly 1.5s ease-out forwards; } /* Lesson content typography is defined inline in lesson.html (premium version) */ /* ---- Utility Classes ---- */ .grayscale { filter: grayscale(100%); } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Confetti Canvas ---- */ #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-canvas); } ::-webkit-scrollbar-thumb { background: var(--bg-surface-raised); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong, rgba(255,255,255,0.14)); } /* ---- Responsive ---- */ @media (max-width: 640px) { .font-display { letter-spacing: 0.05em; } } /* ================================================================ LEGAL PAGES ================================================================ */ .legal-page { display: flex; justify-content: center; padding: 3rem 1.5rem 4rem; min-height: 100vh; background: var(--bg-canvas); color: var(--text-primary); } .legal-container { max-width: 800px; width: 100%; font-size: 15px; line-height: 1.7; } .legal-title { font-family: var(--font-display, 'Archivo', sans-serif); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.25rem; } .legal-updated { color: var(--text-tertiary); font-size: 13px; margin-bottom: 2.5rem; } .legal-section { margin-bottom: 2.25rem; } .legal-section h2 { font-family: var(--font-display, 'Archivo', sans-serif); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-primary); } .legal-section p { margin-bottom: 0.75rem; color: var(--text-secondary); } .legal-section ul { margin: 0.5rem 0 1rem 1.5rem; list-style: disc; color: var(--text-secondary); } .legal-section ul li { margin-bottom: 0.35rem; } .legal-section a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .legal-section a:hover { color: var(--color-primary-hover); } .legal-section strong { color: var(--text-primary); font-weight: 600; } .legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 14px; } .legal-table th, .legal-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border-subtle); } .legal-table th { color: var(--text-primary); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; } .legal-table td { color: var(--text-secondary); } .legal-footer-nav { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); } .legal-footer-nav a { color: var(--color-primary); text-decoration: none; font-weight: 500; font-size: 14px; } .legal-footer-nav a:hover { text-decoration: underline; } @media (max-width: 640px) { .legal-page { padding: 2rem 1rem 3rem; } .legal-title { font-size: 1.5rem; } .legal-container { font-size: 14px; } .legal-table { font-size: 13px; } .legal-table th, .legal-table td { padding: 0.5rem; } } /* ── css/base.css ── */ /* ================================================================ Base Styles — Rocket Academy Applies tokens globally. Loaded AFTER tokens.css and tailwind. Contains: - Typography defaults (Archivo body + display, scale, weights) - Body canvas color + text color - Custom scrollbar (dark, subtle) - :focus-visible global ring - ::selection color - Heading defaults (size + weight, no Tailwind override) NOTE: focus-visible uses accent token for ring color. ================================================================ */ /* ── Typography ────────────────────────────────────────────────── */ html { font-family: var(--font-primary); font-size: 16px; /* rem base */ } body { font-family: var(--font-primary); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); color: var(--text-primary); background-color: var(--bg-canvas); /* Rebrand 2026 — atmósfera de marca en todo el app (mesh azul + whisper magenta) */ background-image: radial-gradient(ellipse 55% 38% at 88% -8%, color-mix(in srgb, var(--color-primary) 9%, transparent) 0%, transparent 62%), radial-gradient(ellipse 45% 32% at -8% 108%, color-mix(in srgb, var(--color-magenta) 6%, transparent) 0%, transparent 60%); background-attachment: fixed; background-repeat: no-repeat; font-variant-numeric: tabular-nums; } /* En claro el canvas es crema LIMPIO (como el panel beta) — el mesh solo vive en dark */ html[data-theme="light"] body, html.light body { background-image: none; } @media (prefers-color-scheme: light) { html[data-theme="auto"] body { background-image: none; } } /* Heading defaults — only apply when no Tailwind class overrides */ h1 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } h3 { font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: var(--leading-snug); } h4 { font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-snug); } h5 { font-size: var(--text-md); font-weight: var(--weight-medium); line-height: var(--leading-normal); } h6 { font-size: var(--text-base);font-weight: var(--weight-medium); line-height: var(--leading-normal); } /* Small / metadata text */ small { font-size: var(--text-xs); color: var(--text-tertiary); } /* Code / mono */ code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--text-sm); } /* ── Focus Visible ─────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: inherit; } /* Remove default focus for mouse users */ :focus:not(:focus-visible) { outline: none; } /* Primary buttons: white outline on colored bg for contrast */ .btn--primary:focus-visible, .cta-epic:focus-visible, .empty-state__cta:focus-visible, .home-continue-cta:focus-visible { outline-color: white; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent); } /* ── Link hover defaults ──────────────────────────────────────── */ a { color: inherit; transition: color var(--dur-fast) var(--ease-standard); } /* ── Selection ─────────────────────────────────────────────────── */ ::selection { background: var(--accent-muted-hover); color: var(--text-primary); } /* ── Scrollbar (webkit — dark, subtle) ─────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; } /* ── Links default ─────────────────────────────────────────────── */ a { transition: color var(--dur-fast) var(--ease-out); } /* NOTE: transition + focus glow for inputs/buttons are NOT global. They go in component-level CSS (Input, Button) in Phase 1. Reason: conflicts with existing Tailwind transition-* and focus:ring-* classes. */ /* ── Turbo progress bar ────────────────────────────────────────── */ .turbo-progress-bar { height: 2px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-primary-hover)); position: fixed; top: 0; left: 0; z-index: var(--z-toast); } /* ── Screen reader only ──────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ════════════════════════════════════════════════════════════════ REBRAND 2026 — Neutralizar clases naranjas stock de Tailwind (usadas en templates legacy; mapean a la marca azul/violeta) ════════════════════════════════════════════════════════════════ */ .hover\:bg-orange-600:hover { background-color: var(--color-primary-hover) !important; } .hover\:bg-orange-500:hover { background-color: var(--color-primary-hover) !important; } .text-orange-400 { color: var(--color-brand) !important; } .bg-orange-500\/10 { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important; } .border-orange-500\/20 { border-color: color-mix(in srgb, var(--color-primary) 20%, transparent) !important; } .to-orange-600, .to-orange-500 { --tw-gradient-to: var(--color-violet) !important; } .hover\:to-orange-500:hover { --tw-gradient-to: var(--color-violet) !important; } .to-orange-500\/10 { --tw-gradient-to: color-mix(in srgb, var(--color-violet) 10%, transparent) !important; } /* ═══ REBRAND 2026 — polish global ═══════════════════════════════ */ ::selection { background: var(--color-lime); color: var(--color-navy); } /* Scrollbar de marca (webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-primary) 35%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-primary) 55%, transparent); background-clip: content-box; } /* Hover del botón Aplicar (wallet) — handler inline bloqueado por CSP */ .hv-bg-brand { transition: background 0.2s; } .hv-bg-brand:hover { background: color-mix(in srgb, var(--color-brand) 25%, transparent) !important; } /* ═══ HEADER PREMIUM 2026 ═════════════════════════════════════════ */ .topbar-desktop { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: var(--bg-topbar-blur) !important; border-bottom: 1px solid var(--border-subtle); } .topbar-desktop::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-primary) 45%, transparent) 30%, color-mix(in srgb, var(--color-lime) 40%, transparent) 62%, transparent 100%); opacity: 0.55; pointer-events: none; } /* Buscador del header — pill de precisión */ /* ═══ FIX cascade layers: los estilos unlayered de componentes moviles pisaban las utilidades responsive de Tailwind v4 (que viven en @layer y pierden). El topbar movil tapaba el header desktop desde la migracion a v4. ═══ */ @media (min-width: 768px) { .md\:hidden { display: none !important; } } @media (min-width: 1024px) { .lg\:hidden { display: none !important; } } /* Cinturón móvil: los nodos móviles nuevos llevan .mobile-only además de md:hidden (md:hidden vive en @layer y pierde contra CSS propio). */ @media (min-width: 768px) { .mobile-only { display: none !important; } } /* Contenedores navy fijos (sidebar, pase, franja, póster, cabecera del slide menu): red de seguridad contra el hack global html.light .text-white → tinta. */ html[data-theme="light"] .rk-dark .text-white, html.light .rk-dark .text-white, html[data-theme="light"] .rk-dark .font-display, html.light .rk-dark .font-display { color: #fff !important; } html[data-theme="light"] .rk-dark .text-rocket-muted, html.light .rk-dark .text-rocket-muted { color: rgba(255,255,255,0.55) !important; } @media (prefers-color-scheme: light) { html[data-theme="auto"] .rk-dark .text-white, html[data-theme="auto"] .rk-dark .font-display { color: #fff !important; } html[data-theme="auto"] .rk-dark .text-rocket-muted { color: rgba(255,255,255,0.55) !important; } } /* ── css/components/button.css ── */ /* ================================================================ BUTTON COMPONENT 4 variants × 7 states × 3 sizes Budget: < 4KB minified ================================================================ */ /* ── BASE ─────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-icon-gap); border-radius: var(--btn-radius); font-family: var(--font-primary); font-weight: var(--weight-semibold); white-space: nowrap; text-decoration: none; cursor: pointer; position: relative; border: 1px solid transparent; transition: var(--btn-transition); -webkit-user-select: none; user-select: none; } /* ── SIZES ────────────────────────────────────────────────────── */ .btn--sm { height: var(--btn-height-sm); padding: 0 var(--btn-padding-x-sm); font-size: var(--btn-text-sm); } .btn--md { height: var(--btn-height-md); padding: 0 var(--btn-padding-x-md); font-size: var(--btn-text-md); } .btn--lg { height: var(--btn-height-lg); padding: 0 var(--btn-padding-x-lg); font-size: var(--btn-text-lg); } /* ── INNER STRUCTURE ──────────────────────────────────────────── */ .btn__content { display: inline-flex; align-items: center; gap: var(--btn-icon-gap); } .btn__icon { display: inline-flex; flex-shrink: 0; } .btn__icon svg { width: 1em; height: 1em; } .btn__spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; } .btn--sm .btn__spinner svg { width: 14px; height: 14px; } .btn--md .btn__spinner svg { width: 16px; height: 16px; } .btn--lg .btn__spinner svg { width: 18px; height: 18px; } @keyframes spin { to { transform: rotate(360deg); } } .btn__spinner svg { animation: spin 800ms linear infinite; } /* ── LOADING STATE ────────────────────────────────────────────── */ .btn[data-loading="true"] { cursor: wait; pointer-events: none; } .btn[data-loading="true"] .btn__content { visibility: hidden; } .btn[data-loading="true"] .btn__spinner { opacity: 1; } /* ── DISABLED STATE (shared) ──────────────────────────────────── */ .btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; } /* ── PRIMARY ──────────────────────────────────────────────────── */ .btn--primary { background: var(--accent-primary); color: var(--accent-primary-fg); } .btn--primary:hover { background: var(--accent-primary-hover); box-shadow: var(--accent-shadow-sm); transform: translateY(-1px); } .btn--primary:active { background: var(--accent-primary-active); box-shadow: none; transform: translateY(0); } .btn--primary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .btn--primary:disabled, .btn--primary[aria-disabled="true"] { background: var(--accent-alpha-30); color: var(--text-disabled); } .btn--primary[data-success="true"] { background: var(--success); color: var(--success-fg); } /* ── SECONDARY ────────────────────────────────────────────────── */ .btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-default); } .btn--secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); transform: translateY(-1px); } .btn--secondary:active { background: var(--bg-active); border-color: var(--border-strong); transform: translateY(0); } .btn--secondary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .btn--secondary:disabled, .btn--secondary[aria-disabled="true"] { color: var(--text-disabled); border-color: var(--border-subtle); } .btn--secondary[data-success="true"] { background: var(--success-muted); color: var(--success); border-color: var(--success-border); } /* ── GHOST ─────────────────────────────────────────────────────── */ .btn--ghost { background: transparent; color: var(--text-secondary); } .btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); transform: translateY(-1px); } .btn--ghost:active { background: var(--bg-active); color: var(--text-primary); transform: translateY(0); } .btn--ghost:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .btn--ghost:disabled, .btn--ghost[aria-disabled="true"] { color: var(--text-disabled); } .btn--ghost[data-success="true"] { color: var(--success); } /* ── DANGER ────────────────────────────────────────────────────── */ .btn--danger { background: var(--danger); color: var(--danger-fg); } .btn--danger:hover { background: var(--danger-hover); box-shadow: 0 2px 8px var(--danger-muted); transform: translateY(-1px); } .btn--danger:active { background: var(--danger-active); box-shadow: none; transform: translateY(0); } .btn--danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; } .btn--danger:disabled, .btn--danger[aria-disabled="true"] { background: var(--danger-muted); color: var(--text-disabled); } .btn--danger[data-success="true"] { background: var(--success); color: var(--success-fg); } /* ═══ PREMIUM PASS 2026 — botones con presencia ═══════════════════ */ .btn--primary { background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 65%, var(--color-violet))) !important; box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--color-primary) 50%, transparent), inset 0 1px 0 rgba(255,255,255,0.14); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast); } .btn--primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--color-primary) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.16); } .btn--primary:active { transform: translateY(0); } .btn--secondary:hover, .btn--ghost:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); } /* ── css/components/input.css ── */ /* ================================================================ INPUT / FIELD COMPONENT 7 states × 3 sizes + password toggle + icons Budget: < 4KB minified ================================================================ */ /* ── FIELD WRAPPER ───────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: var(--space-1); } /* ── LABEL ───────────────────────────────────────────────────── */ .field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); line-height: 1.4; } /* ── INPUT WRAPPER (contains input + icons + toggle) ─────────── */ .field__wrapper { position: relative; } /* ── INPUT BASE ──────────────────────────────────────────────── */ .field__input { appearance: none; -webkit-appearance: none; width: 100%; font-family: var(--font-primary); color: var(--text-primary); background: var(--bg-surface-sunken); border: 1px solid var(--border-default); border-radius: var(--input-radius); transition: var(--input-transition); outline: none; } .field__input::placeholder { color: var(--text-placeholder); } /* ── SIZES ───────────────────────────────────────────────────── */ .field--sm .field__input { height: var(--input-height-sm); padding: 0 var(--input-padding-x-sm); font-size: var(--input-text-sm); } .field--md .field__input { height: var(--input-height-md); padding: 0 var(--input-padding-x-md); font-size: var(--input-text-md); } .field--lg .field__input { height: var(--input-height-lg); padding: 0 var(--input-padding-x-lg); font-size: var(--input-text-lg); } /* ── HOVER STATE ─────────────────────────────────────────────── */ .field__input:hover:not(:focus):not(:disabled):not(:read-only) { border-color: var(--border-strong); } /* ── FOCUS STATE ─────────────────────────────────────────────── */ .field__input:focus { border-color: var(--accent-primary); box-shadow: var(--accent-focus-ring); } /* ── ERROR STATE ─────────────────────────────────────────────── */ .field--error .field__input { border-color: var(--danger); } .field--error .field__input:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-muted); } /* ── DISABLED STATE ──────────────────────────────────────────── */ .field--disabled .field__input { background: color-mix(in srgb, var(--bg-surface-sunken) 60%, transparent); color: var(--text-disabled); cursor: not-allowed; border-color: var(--border-subtle); } .field--disabled .field__label { color: var(--text-disabled); } /* ── READONLY STATE ──────────────────────────────────────────── */ .field__input:read-only:not(:disabled) { background: transparent; border-color: transparent; cursor: default; } .field__input:read-only:not(:disabled):hover { border-color: transparent; } .field__input:read-only:not(:disabled):focus { border-color: transparent; box-shadow: none; } /* ── ICONS ───────────────────────────────────────────────────── */ .field__icon { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-tertiary); pointer-events: none; } .field__icon svg { width: 1em; height: 1em; font-size: var(--text-md); } .field__icon--left { left: var(--space-3); } .field__icon--right { right: var(--space-3); } /* Adjust input padding when icons are present */ .field--has-icon-left .field__input { padding-left: var(--input-icon-padding); } .field--has-icon-right .field__input { padding-right: var(--input-icon-padding); } /* ── HELPER TEXT ─────────────────────────────────────────────── */ .field__helper { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.4; } /* ── ERROR TEXT ───────────────────────────────────────────────── */ .field__error { font-size: var(--text-xs); color: var(--danger); line-height: 1.4; } /* ── PASSWORD TOGGLE ─────────────────────────────────────────── */ .field__toggle { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .field__toggle:hover { color: var(--text-primary); background: var(--bg-hover); } .field__toggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; } .field__toggle:disabled { cursor: not-allowed; color: var(--text-disabled); pointer-events: none; } .field__toggle svg { width: 16px; height: 16px; } /* Password field with toggle needs extra right padding */ .field--password .field__input { padding-right: var(--input-icon-padding); } /* ── TEXTAREA ────────────────────────────────────────────────── */ textarea.field__input { min-height: 80px; resize: vertical; line-height: 1.5; } .field--sm textarea.field__input { padding: var(--input-padding-x-sm); } .field--md textarea.field__input { padding: var(--input-padding-x-md); } .field--lg textarea.field__input { padding: var(--input-padding-x-lg); } /* ── css/components/card.css ── */ /* ================================================================ CARD COMPONENT 4 variants × 3 sizes + sub-elements Budget: < 3KB minified ================================================================ */ /* ── BASE ────────────────────────────────────────────────────── */ .card { display: flex; flex-direction: column; border-radius: var(--card-radius); overflow: hidden; text-decoration: none; color: inherit; } /* ── SIZES ───────────────────────────────────────────────────── */ .card--sm { padding: var(--card-padding-sm); } .card--md { padding: var(--card-padding-md); } .card--lg { padding: var(--card-padding-lg); } /* ── VARIANT: DEFAULT ────────────────────────────────────────── */ .card--default { background: var(--card-bg); border: 1px solid var(--card-border); } /* ── VARIANT: INTERACTIVE ────────────────────────────────────── */ .card--interactive { background: var(--card-bg); border: 1px solid var(--card-border); cursor: pointer; transition: var(--card-transition); } .card--interactive:hover { border-color: var(--card-border-hover); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .card--interactive:active { transform: translateY(0); box-shadow: none; } .card--interactive:focus-within { border-color: var(--accent-primary); box-shadow: var(--accent-focus-ring); } /* ── VARIANT: ELEVATED ───────────────────────────────────────── */ .card--elevated { background: var(--card-bg); border: 1px solid transparent; box-shadow: var(--card-shadow-md); } /* ── VARIANT: FLAT ───────────────────────────────────────────── */ .card--flat { background: transparent; border: 1px solid transparent; } /* ── SUB-ELEMENTS ────────────────────────────────────────────── */ .card__header { padding-bottom: var(--space-3); border-bottom: 1px solid var(--card-border); margin-bottom: var(--space-3); font-weight: var(--weight-semibold); color: var(--text-primary); } .card__body { flex: 1; } .card__footer { padding-top: var(--space-3); border-top: 1px solid var(--card-border); margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); } .card__media { margin: calc(-1 * var(--card-padding-md)); margin-bottom: var(--space-4); overflow: hidden; } .card--sm .card__media { margin: calc(-1 * var(--card-padding-sm)); margin-bottom: var(--space-3); } .card--lg .card__media { margin: calc(-1 * var(--card-padding-lg)); margin-bottom: var(--space-5); } .card__media img, .card__media video { width: 100%; height: auto; display: block; object-fit: cover; } .card__actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-3); } /* ── css/components/avatar.css ── */ /* ================================================================ AVATAR COMPONENT 3 variants × 6 sizes + status + group Budget: < 3KB minified ================================================================ */ /* ── BASE ────────────────────────────────────────────────────── */ .avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--avatar-radius); overflow: hidden; flex-shrink: 0; vertical-align: middle; font-weight: var(--weight-semibold); color: #fff; text-transform: uppercase; -webkit-user-select: none; user-select: none; } /* ── SIZES ───────────────────────────────────────────────────── */ .avatar--xs { width: var(--avatar-size-xs); height: var(--avatar-size-xs); font-size: 10px; } .avatar--sm { width: var(--avatar-size-sm); height: var(--avatar-size-sm); font-size: 12px; } .avatar--md { width: var(--avatar-size-md); height: var(--avatar-size-md); font-size: 14px; } .avatar--lg { width: var(--avatar-size-lg); height: var(--avatar-size-lg); font-size: 16px; } .avatar--xl { width: var(--avatar-size-xl); height: var(--avatar-size-xl); font-size: 22px; } .avatar--2xl { width: var(--avatar-size-2xl); height: var(--avatar-size-2xl); font-size: 32px; } /* ── IMAGE VARIANT ───────────────────────────────────────────── */ .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── INITIALS VARIANT ────────────────────────────────────────── */ .avatar--initials { background: var(--accent-primary); } .avatar--initials[data-color="1"] { background: #4F46E5; } .avatar--initials[data-color="2"] { background: #DB2777; } .avatar--initials[data-color="3"] { background: #059669; } .avatar--initials[data-color="4"] { background: #D97706; } .avatar--initials[data-color="5"] { background: #7C3AED; } /* ── ICON VARIANT ────────────────────────────────────────────── */ .avatar--icon { background: var(--avatar-bg-fallback); color: var(--text-tertiary); } .avatar--icon svg { width: 50%; height: 50%; } /* ── MODIFIERS ───────────────────────────────────────────────── */ .avatar--interactive { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); text-decoration: none; } .avatar--interactive:hover { transform: scale(1.08); } .avatar--interactive:active { transform: scale(1); } .avatar--interactive:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .avatar--bordered { box-shadow: 0 0 0 2px var(--bg-canvas); } .avatar--square { border-radius: var(--avatar-radius-square); } .avatar--square .avatar__status { border-radius: var(--radius-sm); } /* ── STATUS INDICATOR ────────────────────────────────────────── */ .avatar__status { position: absolute; bottom: 0; right: 0; border-radius: 50%; border: 2px solid var(--bg-canvas); } /* Status sizes scale with avatar size */ .avatar--xs .avatar__status, .avatar--sm .avatar__status { width: var(--avatar-status-size-sm); height: var(--avatar-status-size-sm); } .avatar--md .avatar__status, .avatar--lg .avatar__status { width: var(--avatar-status-size-md); height: var(--avatar-status-size-md); } .avatar--xl .avatar__status, .avatar--2xl .avatar__status { width: var(--avatar-status-size-lg); height: var(--avatar-status-size-lg); } .avatar__status--online { background: var(--avatar-status-online); } .avatar__status--away { background: var(--avatar-status-away); } .avatar__status--busy { background: var(--avatar-status-busy); } .avatar__status--offline { background: var(--avatar-status-offline); } /* ── AVATAR GROUP ────────────────────────────────────────────── */ .avatar-group { display: inline-flex; align-items: center; } .avatar-group .avatar + .avatar { margin-left: var(--avatar-overlap); } /* ── css/components/badge.css ── */ /* ================================================================ BADGE COMPONENT 6 variants × 3 styles × 3 sizes + dot/removable/pill Budget: < 2KB minified ================================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--weight-semibold); white-space: nowrap; vertical-align: middle; border: 1px solid transparent; line-height: 1; } /* ── SIZES ───────────────────────────────────────────────────── */ .badge--sm { height: var(--badge-height-sm); padding: 0 var(--badge-padding-x-sm); font-size: var(--badge-text-sm); border-radius: var(--badge-radius); } .badge--md { height: var(--badge-height-md); padding: 0 var(--badge-padding-x-md); font-size: var(--badge-text-md); border-radius: var(--badge-radius); } .badge--lg { height: var(--badge-height-lg); padding: 0 var(--badge-padding-x-lg); font-size: var(--badge-text-lg); border-radius: var(--badge-radius); } .badge--pill { border-radius: var(--badge-radius-pill); } /* ── SOLID VARIANTS ──────────────────────────────────────────── */ .badge--default.badge--solid { background: var(--bg-hover); color: var(--text-secondary); } .badge--accent.badge--solid { background: var(--accent-primary); color: var(--accent-primary-fg); } .badge--success.badge--solid { background: var(--success); color: #fff; } .badge--warning.badge--solid { background: #D97706; color: #fff; } .badge--danger.badge--solid { background: var(--danger); color: #fff; } .badge--info.badge--solid { background: #3B82F6; color: #fff; } /* ── SUBTLE VARIANTS ─────────────────────────────────────────── */ .badge--default.badge--subtle { background: color-mix(in srgb, var(--text-secondary) 12%, transparent); color: var(--text-secondary); } .badge--accent.badge--subtle { background: var(--accent-alpha-15); color: var(--accent-primary); } .badge--success.badge--subtle { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); } .badge--warning.badge--subtle { background: color-mix(in srgb, #D97706 15%, transparent); color: #FBB03B; } .badge--danger.badge--subtle { background: var(--danger-muted); color: var(--danger); } .badge--info.badge--subtle { background: color-mix(in srgb, #3B82F6 15%, transparent); color: #60A5FA; } /* ── OUTLINE VARIANTS ────────────────────────────────────────── */ .badge--default.badge--outline { border-color: var(--border-default); color: var(--text-secondary); } .badge--accent.badge--outline { border-color: var(--accent-primary); color: var(--accent-primary); } .badge--success.badge--outline { border-color: var(--success); color: var(--success); } .badge--warning.badge--outline { border-color: #D97706; color: #FBB03B; } .badge--danger.badge--outline { border-color: var(--danger); color: var(--danger); } .badge--info.badge--outline { border-color: #3B82F6; color: #60A5FA; } /* ── DOT ─────────────────────────────────────────────────────── */ .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ── ICON ────────────────────────────────────────────────────── */ .badge__icon { display: inline-flex; flex-shrink: 0; } .badge__icon svg { width: 1em; height: 1em; } /* ── REMOVABLE ───────────────────────────────────────────────── */ .badge__remove { display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; margin-right: -2px; padding: 0; border: none; background: none; color: currentColor; opacity: 0.5; cursor: pointer; border-radius: 50%; width: 14px; height: 14px; transition: opacity var(--dur-fast) var(--ease-out); } .badge__remove:hover { opacity: 1; } .badge__remove svg { width: 10px; height: 10px; } /* ── css/components/modal.css ── */ /* ================================================================ MODAL COMPONENT 3 variants × 4 sizes + overlay + focus trap Budget: < 3KB minified ================================================================ */ /* ── OVERLAY ─────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--modal-overlay-bg); backdrop-filter: blur(var(--modal-overlay-blur)); -webkit-backdrop-filter: blur(var(--modal-overlay-blur)); } /* ── CONTAINER ───────────────────────────────────────────────── */ .modal { position: relative; display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - var(--space-8)); background: var(--modal-bg); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); border: 1px solid var(--border-subtle); } /* ── SIZES ───────────────────────────────────────────────────── */ .modal--sm { max-width: var(--modal-max-width-sm); } .modal--md { max-width: var(--modal-max-width-md); } .modal--lg { max-width: var(--modal-max-width-lg); } .modal--xl { max-width: var(--modal-max-width-xl); } /* ── FULLSCREEN ──────────────────────────────────────────────── */ .modal--fullscreen { max-width: none; max-height: none; width: 100%; height: 100%; border-radius: 0; } /* ── HEADER ──────────────────────────────────────────────────── */ .modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--modal-padding); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .modal__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); margin: 0; } .modal__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .modal__close:hover { color: var(--text-primary); background: var(--bg-hover); } .modal__close:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; } .modal__close svg { width: 18px; height: 18px; } /* ── BODY ────────────────────────────────────────────────────── */ .modal__body { padding: var(--modal-padding); overflow-y: auto; flex: 1; color: var(--text-secondary); } /* ── FOOTER ──────────────────────────────────────────────────── */ .modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--modal-padding); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); flex-shrink: 0; } /* ── ANIMATION ───────────────────────────────────────────────── */ .modal-overlay[x-transition\:enter] { transition: opacity 150ms ease-out; } .modal-overlay[x-transition\:enter-start] { opacity: 0; } .modal-overlay[x-transition\:enter-end] { opacity: 1; } .modal-overlay[x-transition\:leave] { transition: opacity 100ms ease-in; } .modal-overlay[x-transition\:leave-start] { opacity: 1; } .modal-overlay[x-transition\:leave-end] { opacity: 0; } .modal[x-transition\:enter] { transition: transform 150ms ease-out, opacity 150ms ease-out; } .modal[x-transition\:enter-start] { opacity: 0; transform: scale(0.95) translateY(8px); } .modal[x-transition\:enter-end] { opacity: 1; transform: scale(1) translateY(0); } .modal[x-transition\:leave] { transition: transform 100ms ease-in, opacity 100ms ease-in; } .modal[x-transition\:leave-start] { opacity: 1; transform: scale(1); } .modal[x-transition\:leave-end] { opacity: 0; transform: scale(0.95); } /* ── css/components/dropdown.css ── */ /* ================================================================ DROPDOWN COMPONENT 4 placements + items + dividers + headers Budget: < 2.5KB minified ================================================================ */ /* ── WRAPPER ─────────────────────────────────────────────────── */ .dropdown { position: relative; display: inline-flex; } /* ── MENU ────────────────────────────────────────────────────── */ .dropdown__menu { position: absolute; z-index: var(--z-dropdown); min-width: var(--dropdown-min-width); background: var(--dropdown-bg); border: 1px solid var(--dropdown-border); border-radius: var(--dropdown-radius); box-shadow: var(--dropdown-shadow); padding: var(--space-1) 0; list-style: none; margin: 0; } /* ── PLACEMENTS ──────────────────────────────────────────────── */ .dropdown--bottom-start .dropdown__menu { top: 100%; left: 0; margin-top: var(--space-1); } .dropdown--bottom-end .dropdown__menu { top: 100%; right: 0; margin-top: var(--space-1); } .dropdown--top-start .dropdown__menu { bottom: 100%; left: 0; margin-bottom: var(--space-1); } .dropdown--top-end .dropdown__menu { bottom: 100%; right: 0; margin-bottom: var(--space-1); } /* ── ITEMS ───────────────────────────────────────────────────── */ .dropdown__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--dropdown-item-height); padding: 0 var(--dropdown-item-padding-x); font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; border: none; background: transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); white-space: nowrap; text-align: left; } .dropdown__item:hover { background: var(--bg-hover); color: var(--text-primary); } .dropdown__item:focus-visible { background: var(--bg-hover); color: var(--text-primary); outline: none; } .dropdown__item--danger { color: var(--danger); } .dropdown__item--danger:hover { background: var(--danger-muted); color: var(--danger); } .dropdown__item__icon { display: inline-flex; flex-shrink: 0; color: var(--text-tertiary); } .dropdown__item__icon svg { width: 16px; height: 16px; } .dropdown__item:hover .dropdown__item__icon { color: inherit; } /* ── DIVIDER ─────────────────────────────────────────────────── */ .dropdown__divider { height: 1px; background: var(--dropdown-divider-color); margin: var(--space-1) 0; border: none; } /* ── HEADER ──────────────────────────────────────────────────── */ .dropdown__header { padding: var(--space-2) var(--dropdown-item-padding-x); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wider); } /* ── ANIMATION ───────────────────────────────────────────────── */ .dropdown__menu[x-transition\:enter] { transition: opacity 100ms ease-out, transform 100ms ease-out; } .dropdown__menu[x-transition\:enter-start] { opacity: 0; transform: scale(0.95) translateY(-4px); } .dropdown__menu[x-transition\:enter-end] { opacity: 1; transform: scale(1) translateY(0); } .dropdown__menu[x-transition\:leave] { transition: opacity 75ms ease-in; } .dropdown__menu[x-transition\:leave-start] { opacity: 1; } .dropdown__menu[x-transition\:leave-end] { opacity: 0; } /* ── css/components/toast.css ── */ /* ================================================================ TOAST COMPONENT 4 variants + auto-dismiss + stack Budget: < 2KB minified ================================================================ */ /* ── CONTAINER ───────────────────────────────────────────────── */ .toast-container { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: var(--toast-gap); padding: var(--space-4); pointer-events: none; max-height: 100vh; overflow: hidden; } .toast-container--top-right { top: 0; right: 0; } .toast-container--top-center { top: 0; left: 50%; transform: translateX(-50%); } .toast-container--bottom-right { bottom: 0; right: 0; } /* ── TOAST ───────────────────────────────────────────────────── */ .toast { display: flex; align-items: flex-start; gap: var(--space-3); min-width: var(--toast-min-width); max-width: var(--toast-max-width); padding: var(--toast-padding); background: var(--toast-bg); border: 1px solid var(--toast-border); border-radius: var(--toast-radius); box-shadow: var(--toast-shadow); pointer-events: auto; opacity: 0; transform: translateX(100%); transition: opacity 200ms ease-out, transform 200ms ease-out; } .toast--visible { opacity: 1; transform: translateX(0); } /* Spring entrance for success toasts */ .toast--success.toast--visible { animation: toast-spring 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes toast-spring { 0% { opacity: 0; transform: translateX(40px) scale(0.92); } 100% { opacity: 1; transform: translateX(0) scale(1); } } .toast--leaving { opacity: 0; transform: translateX(100%); transition: opacity 150ms ease-in, transform 150ms ease-in; } /* ── ICON ────────────────────────────────────────────────────── */ .toast__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; } .toast__icon svg { width: 100%; height: 100%; } /* ── CONTENT ─────────────────────────────────────────────────── */ .toast__content { flex: 1; min-width: 0; } .toast__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: 2px; } .toast__message { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.4; } /* ── CLOSE ───────────────────────────────────────────────────── */ .toast__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 18px; line-height: 1; transition: color var(--dur-fast) var(--ease-out); } .toast__close:hover { color: var(--text-primary); } /* ── VARIANTS (icon + left border accent) ────────────────────── */ .toast--info { border-left: 3px solid #3B82F6; } .toast--success { border-left: 3px solid var(--success); } .toast--warning { border-left: 3px solid #D97706; } .toast--error { border-left: 3px solid var(--danger); } .toast--info .toast__icon { color: #3B82F6; } .toast--success .toast__icon { color: var(--success); } .toast--warning .toast__icon { color: #D97706; } .toast--error .toast__icon { color: var(--danger); } /* ── MOBILE ──────────────────────────────────────────────────── */ @media (max-width: 480px) { .toast { min-width: auto; max-width: none; } .toast-container { left: 0; right: 0; padding: var(--space-2); } } /* ── css/components/empty-state.css ── */ /* ================================================================ EMPTY STATE COMPONENT (v2) Icon + title + description + optional CTA Size variants: compact, default, hero ================================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-12) var(--space-6); min-height: 200px; } /* ── Size variants ── */ .empty-state--compact { padding: var(--space-6) var(--space-4); min-height: 120px; } .empty-state--hero { padding: var(--space-20) var(--space-8); min-height: 400px; } /* ── Icon ── */ .empty-state__icon { display: flex; align-items: center; justify-content: center; color: var(--color-primary); opacity: 0.5; margin-bottom: var(--space-4); } .empty-state__icon svg { width: 48px; height: 48px; } .empty-state--compact .empty-state__icon svg { width: 32px; height: 32px; } .empty-state--compact .empty-state__icon { margin-bottom: var(--space-3); } .empty-state--hero .empty-state__icon svg { width: 64px; height: 64px; } /* ── Title ── */ .empty-state__title { font-family: var(--font-display); font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 500; line-height: 1.2; color: var(--text-primary); margin: 0 0 var(--space-2); } .empty-state--compact .empty-state__title { font-family: var(--font-body); font-size: var(--text-md); font-weight: 500; } .empty-state--hero .empty-state__title { font-size: clamp(1.5rem, 3vw, 1.75rem); } /* ── Description ── */ .empty-state__description { font-size: var(--text-base); color: var(--text-secondary); max-width: 360px; line-height: 1.55; margin: 0 0 var(--space-5); } .empty-state--compact .empty-state__description { font-size: var(--text-sm); margin-bottom: var(--space-3); } .empty-state__description:last-child { margin-bottom: 0; } /* ── CTA ── */ .empty-state__cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); } .empty-state__cta:hover { background: var(--color-primary-hover); } /* ── css/components/skeleton.css ── */ /* ================================================================ SKELETON COMPONENT — loading placeholder with shimmer Budget: < 500 bytes minified ================================================================ */ .skeleton { background: linear-gradient(90deg, var(--bg-surface) 0%, var(--bg-surface-sunken) 50%, var(--bg-surface) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md); display: block; } .skeleton--text { height: 1em; border-radius: var(--radius-sm); } .skeleton--circle { border-radius: 50%; } .skeleton--card { height: 120px; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.5; } } /* ── css/components/progress.css ── */ /* ================================================================ PROGRESS BAR COMPONENT — linear progress indicator Budget: < 800 bytes minified ================================================================ */ .progress { width: 100%; background: var(--bg-surface-sunken); border-radius: 999px; overflow: hidden; position: relative; } .progress--sm { height: 4px; } .progress--md { height: 6px; } .progress--lg { height: 8px; } .progress__bar { height: 100%; border-radius: inherit; transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); } .progress--accent .progress__bar { background: var(--accent-primary); } .progress--success .progress__bar { background: var(--success); } .progress--danger .progress__bar { background: var(--danger); } /* ── css/typography.css ── */ /* ================================================================ TYPOGRAPHY SYSTEM — Rocket Academy Semantic classes for consistent typographic hierarchy. Based on Archivo (display + body) + IBM Plex Mono. Usage:

MÓDULO 01

Título grande

Texto principal

Note: these classes use tokens from tokens.css. ================================================================ */ /* ── DISPLAY HEADINGS (Archivo) ───────────────────────────────────── */ .heading-display-xl { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3rem); /* 36-48px responsive */ font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); font-optical-sizing: auto; } .heading-display-lg { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); /* 28-36px */ font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; color: var(--text-primary); font-optical-sizing: auto; } .heading-display-md { font-family: var(--font-display); font-size: clamp(1.375rem, 2.5vw, 1.75rem); /* 22-28px */ font-weight: 500; line-height: 1.2; letter-spacing: 0; color: var(--text-primary); font-optical-sizing: auto; } .heading-section { font-family: var(--font-display); font-size: 1.375rem; /* 22px */ font-weight: 500; line-height: 1.25; letter-spacing: 0.01em; color: var(--text-primary); } /* ── BODY TEXT (Inter) ────────────────────────────────────────── */ .body-lg { font-family: var(--font-body); font-size: 1rem; /* 16px */ line-height: 1.6; color: var(--text-primary); } .body-md { font-family: var(--font-body); font-size: 0.875rem; /* 14px */ line-height: 1.55; color: var(--text-primary); } .body-sm { font-family: var(--font-body); font-size: 0.8125rem; /* 13px */ line-height: 1.5; color: var(--text-secondary); } /* ── CAPTION & METADATA ──────────────────────────────────────── */ .caption { font-family: var(--font-body); font-size: 0.75rem; /* 12px */ line-height: 1.5; color: var(--text-secondary); } /* ── EYEBROW (Stripe pattern — precedes display headings) ────── */ .eyebrow { font-family: var(--font-body); font-size: 0.6875rem; /* 11px */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); line-height: 1; } /* Variant: muted eyebrow (for secondary sections) */ .eyebrow-muted { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); line-height: 1; } /* ── LABEL (form labels, small headings) ─────────────────────── */ .label { font-family: var(--font-body); font-size: 0.8125rem; /* 13px */ font-weight: 500; color: var(--text-secondary); line-height: 1; } .label-sm { font-family: var(--font-body); font-size: 0.6875rem; /* 11px */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); line-height: 1; } /* ── TABS (reusable pattern — course detail, profile, etc.) ── */ .course-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .course-tab { position: relative; padding: 12px 20px; font-size: 15px; font-weight: 500; color: var(--text-tertiary); background: none; border: none; cursor: pointer; white-space: nowrap; transition: color var(--dur-base) var(--ease-standard); } .course-tab::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transition: transform var(--dur-base) var(--ease-standard); } .course-tab:hover { color: var(--text-secondary); } .course-tab.active { color: var(--text-primary); } .course-tab.active::after { transform: scaleX(1); } /* ── TIER BADGE (prestige indicator) ─────────────────────────── */ .tier-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; cursor: default; } .tier-badge--mini { width: 12px; height: 12px; } .tier-badge--small { width: 16px; height: 16px; } .tier-badge--medium { width: 24px; height: 24px; } .tier-badge--large { width: 48px; height: 48px; } /* Positioning helper: overlap bottom-right of avatar */ .tier-badge-overlap { position: absolute; bottom: -2px; right: -2px; } /* ── css/components/system.css ── */ /* ================================================================ SISTEMA 2026 — piezas compartidas por toda la Academy Cabecera de sección · cabecera de bloque · kicker · píldoras de cifras · chips · botones. Una sola receta; las páginas NO redefinen. Documentado en docs/SISTEMA_VISUAL.md ================================================================ */ :root { --sec-title-size: clamp(22px, 2.2vw, 28px); --btn-h: 44px; --btn-h-sm: 36px; --btn-h-lg: 50px; --btn-r: 12px; --btn-r-sm: 10px; --btn-r-lg: 13px; --tot-bg: rgba(255,255,255,0.08); --tot-line: rgba(255,255,255,0.14); } /* ── 1. Cabecera de sección (nivel 1) ──────────────────────────
01

Lo que vas a dominar.

6 módulos
El número se puede dejar vacío: lo pone el contador de la página (counter-reset: sec en el contenedor). */ main, .pv-main, .pm-main { counter-reset: sec; } .sec-head { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; counter-increment: sec; } .sec-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--text-primary) 22%, transparent); font: 700 11px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--text-primary); } .sec-num:empty::before { content: counter(sec, decimal-leading-zero); } .sec-num svg { width: 11px; height: 11px; } .sec-num--go { background: var(--color-lime); border-color: var(--color-lime); color: var(--color-navy); } .sec-title { margin: 0; min-width: 0; font: 850 var(--sec-title-size)/1 var(--font-display); font-stretch: 86%; letter-spacing: -0.025em; text-transform: uppercase; color: var(--text-primary); white-space: nowrap; } .sec-title em, .sec-em { font-style: normal; display: inline-block; background: var(--color-lime); color: var(--color-navy); padding: 0.03em 0.14em 0.06em; border-radius: 6px; transform: rotate(-1.4deg); } .sec-lead { flex: 1; min-width: 24px; height: 0; border-bottom: 2px dotted color-mix(in srgb, var(--text-primary) 18%, transparent); transform: translateY(2px); } .sec-note, .sec-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; } .sec-note { color: var(--text-tertiary); } .sec-note svg { width: 11px; height: 11px; color: var(--kicker-color); } .sec-link { color: var(--text-primary); text-decoration: none; position: relative; } /* Área de toque de 44px sin mover el texto: el enlace mide ~10px de alto, muy por debajo del mínimo táctil. El pseudo-elemento extiende la zona clicable hacia arriba y abajo sin afectar el layout de la cabecera. (Auditoría 4.3) */ .sec-link::after { content: ""; position: absolute; inset: -17px -8px; } .sec-link svg { width: 12px; height: 12px; transition: transform 0.15s; } .sec-link:hover { text-decoration: underline; text-underline-offset: 3px; } .sec-link:hover svg { transform: translateX(2px); } .sec-title--sm { --sec-title-size: 19px; } /* Sobre superficie marina (panel del creador, covers, tarjetas oscuras) */ .rk-dark .sec-num { color: #fff; border-color: rgba(255,255,255,0.16); } .pm-app .sec-num { color: var(--pm-text); border-color: rgba(var(--pm-ink),0.16); } .rk-dark .sec-num--go, .pm-app .sec-num--go { color: var(--color-navy); border-color: var(--color-lime); } .rk-dark .sec-title { color: #fff; } .pm-app .sec-title { color: var(--pm-text); } .rk-dark .sec-lead { border-color: rgba(255,255,255,0.14); } .pm-app .sec-lead { border-color: rgba(var(--pm-ink),0.14); } .rk-dark .sec-note { color: rgba(255,255,255,0.5); } .pm-app .sec-note { color: var(--pm-text-muted); } .rk-dark .sec-note svg, .rk-dark .sec-link { color: var(--color-lime-logo); } .pm-app .sec-note svg { color: var(--kicker-color); } .pm-app .sec-link { color: var(--pm-accent); } /* ── 2. Cabecera de bloque (nivel 2: tarjetas, paneles, listas) ──

Credenciales

4
*/ .blk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; } .blk-title { margin: 0; font: 800 16px/1.1 var(--font-display); font-stretch: 90%; letter-spacing: -0.015em; text-transform: uppercase; color: var(--text-primary); } .blk-title--lg { font-size: 20px; } .blk-sub { font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; } .rk-dark .blk-title { color: #fff; } .pm-app .blk-title { color: var(--pm-text); } .rk-dark .blk-sub { color: rgba(255,255,255,0.5); } .pm-app .blk-sub { color: var(--pm-text-muted); } /* ── 3. Kicker (etiqueta mono sobre un título) ── Catálogo · Rocket Academy · .k--muted secundario · .k--sm en tarjetas */ .k { display: inline-flex; align-items: center; gap: 9px; font: 600 10px/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--kicker-color); } .k svg { width: 13px; height: 13px; flex-shrink: 0; } .k--muted { color: var(--label-muted, var(--text-tertiary)); } .k--sm { font-size: 9.5px; letter-spacing: 0.18em; } .k--block { display: flex; margin-bottom: 14px; } .rk-dark .k { color: var(--color-lime-logo); } .pm-app .k { color: var(--kicker-color); } .rk-dark .k--muted { color: rgba(255,255,255,0.5); } .pm-app .k--muted { color: var(--pm-text-muted); } /* ── 4. Píldoras de cifras ──
12cursos
· .tot--surface fuera de un cover */ .tot { display: flex; flex-wrap: wrap; gap: 10px; } .tot > span { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; background: var(--tot-bg); border: 1px solid var(--tot-line); } .tot b { display: inline-flex; align-items: center; gap: 4px; font: 800 17px/1 var(--font-display); color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; } .tot b svg { width: 13px; height: 13px; color: var(--color-lime); } .tot small { font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); white-space: nowrap; } .tot--sm > span { height: 34px; padding: 0 12px; } .tot--sm b { font-size: 15px; } .tot--surface > span { background: var(--bg-surface); border-color: var(--border-default); } .tot--surface b { color: var(--text-primary); } .tot--surface b svg { color: var(--kicker-color); } .tot--surface small { color: var(--text-tertiary); } html[data-theme="light"] .tot--surface > span, html.light .tot--surface > span { background: #fff; border-color: #E6E6E2; } /* ── 5. Chips (categoría, nivel, acceso, estado) ── */ .chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--border-strong); font: 700 9.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; } .chip--acc { border-color: transparent; background: var(--color-lime); color: var(--color-navy); } .chip--soft { border-color: transparent; background: var(--bg-surface-sunken); color: var(--text-primary); } .rk-dark .chip { border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.78); } .rk-dark .chip--soft { border-color: transparent; background: rgba(255,255,255,0.1); color: #fff; } .rk-dark .chip--acc { border-color: transparent; color: var(--color-navy); } /* ── 6. Botones ── .btn-lime (principal, uno por vista) · .btn-line (secundario) · .btn-navy · modificadores --sm --lg --block */ .btn-lime, .btn-line, .btn-navy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); padding: 0 18px; border-radius: var(--btn-r); border: 1px solid transparent; font: 700 14px/1 var(--font-display); letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s; } .btn-lime svg, .btn-line svg, .btn-navy svg { width: 15px; height: 15px; flex-shrink: 0; } .btn-lime { background: var(--color-lime); color: var(--color-navy); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--color-lime) 60%, transparent); } .btn-lime:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--color-lime) 80%, transparent); } .btn-lime:active { transform: translate(0); } .btn-line { background: transparent; border-color: var(--border-strong); color: var(--text-primary); } .btn-line:hover { border-color: var(--text-primary); background: var(--bg-hover); } .btn-navy { background: var(--color-navy); color: #fff; } .btn-navy:hover { background: #1D2043; transform: translateY(-1px); } /* En tema oscuro el azul marino cae sobre un fondo casi negro y el botón desaparece: se le da un borde para que se lea como botón. */ html[data-theme="dark"] .btn-navy, html.dark .btn-navy { border-color: rgba(255,255,255,0.22); } html[data-theme="dark"] .btn-navy:hover, html.dark .btn-navy:hover { border-color: rgba(255,255,255,0.4); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] .btn-navy { border-color: rgba(255,255,255,0.22); } html[data-theme="auto"] .btn-navy:hover { border-color: rgba(255,255,255,0.4); } } .rk-dark .btn-line { border-color: rgba(255,255,255,0.24); color: #fff; } .pm-app .btn-line { border-color: var(--border-strong); color: var(--pm-text); } .rk-dark .btn-line:hover { border-color: var(--color-lime); color: var(--color-lime); background: color-mix(in srgb, var(--color-lime) 6%, transparent); } .pm-app .btn-line:hover { border-color: var(--pm-accent); color: var(--pm-accent); background: color-mix(in srgb, var(--pm-accent) 8%, transparent); } .btn-lime:disabled, .btn-line:disabled, .btn-navy:disabled, .btn-lime[aria-disabled="true"] { opacity: 0.4; cursor: default; transform: none; box-shadow: none; } .btn-lime:focus-visible, .btn-line:focus-visible, .btn-navy:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; } .rk-dark :is(.btn-lime, .btn-line, .btn-navy):focus-visible { outline-color: var(--color-lime); } html[data-theme="dark"] :is(.btn-lime, .btn-line, .btn-navy):focus-visible, html.dark :is(.btn-lime, .btn-line, .btn-navy):focus-visible { outline-color: var(--color-lime); } .btn-lime.--sm, .btn-line.--sm, .btn-navy.--sm { height: var(--btn-h-sm); padding: 0 14px; border-radius: var(--btn-r-sm); font-size: 13px; } .btn-lime.--lg, .btn-line.--lg, .btn-navy.--lg { height: var(--btn-h-lg); padding: 0 22px; border-radius: var(--btn-r-lg); font-size: 15px; font-weight: 800; } .btn-lime.--block, .btn-line.--block, .btn-navy.--block { width: 100%; } .btn-line.--danger { color: var(--danger); } .btn-line.--danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); } /* ── Móvil ── */ @media (max-width: 767px) { .sec-head { flex-wrap: wrap; gap: 8px 10px; margin-bottom: 16px; } .sec-title { white-space: normal; text-wrap: balance; font-size: 21px; } .sec-lead { display: none; } .sec-note, .sec-link { margin-left: auto; } /* Antes era una tira deslizable sin ninguna pista visual: la última cifra aparecía cortada contra el borde y parecía un fallo de maquetación (pasaba en Mentores, donde «pedidos reales» es larga). Ahora bajan de línea. */ .tot { flex-wrap: wrap; gap: 8px; } /* Algo más ajustadas para que las tres cifras quepan en una sola fila en todas las cabeceras: así Cursos y Mentores se ven exactamente igual. */ .tot > span { height: 34px; padding: 0 11px; gap: 6px; } .tot small { letter-spacing: 0.1em; } } /* Avatar con inicial sin foto */ .rk-ava { background: var(--color-navy); color: #fff; } html[data-theme="dark"] .rk-ava, html.dark .rk-ava { background: #fff; color: var(--color-navy); } /* Acento en páginas con utilidades: texto, tinte y borde */ .rk-accent { color: var(--kicker-color); } .rk-accent-bg { background: color-mix(in srgb, var(--kicker-color) 10%, transparent); } .rk-accent-border { border-color: color-mix(in srgb, var(--kicker-color) 25%, transparent); } .rk-dark .rk-accent { color: var(--color-lime-logo); } /* ── 7. Pestaña activa (segmentados de portada, orden, perfil, ajustes): una sola receta ── Identidad de marca: el único sitio donde el violeta va como fondo. */ .bcov-tab.is-on, .mbr-sort-btn.is-on, .mbr-view-btn.is-on, .pf-tab.is-active, .st-rail a.is-on { background: linear-gradient(135deg, #4800FF, #3B00D6); color: var(--color-lime-logo); box-shadow: 0 10px 24px -12px rgba(72,0,255,0.6); } @media (max-width: 767px) { .bcov-tabs { overflow-x: auto; scrollbar-width: none; } .bcov-tab { white-space: nowrap; } } /* ── Confirmación en página ── Sustituye a window.confirm(): el navegador lo bloquea dentro de un iframe de otro dominio (la pestaña Academy del panel). Un solo diálogo en base.html; el texto, el detalle y el botón los pone el formulario con data-confirm, data-confirm-detail, data-confirm-ok y data-confirm-danger. */ .rk-confirm { position: fixed; inset: 0; margin: auto; border: 0; padding: 0; background: transparent; width: min(92vw, 420px); max-width: none; max-height: calc(100vh - 32px); overflow: visible; } .rk-confirm::backdrop { background: rgba(10, 9, 30, 0.55); backdrop-filter: blur(4px); } .rk-confirm-box { margin: 0; padding: 26px 26px 22px; border-radius: 18px; background: var(--bg-surface); border: 1px solid var(--border-default); box-shadow: 0 40px 80px -30px rgba(10, 9, 30, 0.6); animation: rk-confirm-in 0.18s var(--ease-out); } html[data-theme="light"] .rk-confirm-box, html.light .rk-confirm-box { background: #fff; border-color: #E6E6E2; } .rk-confirm-title { margin: 0; font: 800 18px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); text-wrap: balance; } .rk-confirm-detail { margin: 8px 0 0; font: 400 14px/1.5 var(--font-display); color: var(--text-secondary); } .rk-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .rk-confirm-ok.is-danger { background: var(--danger, #E5484D); color: #fff; box-shadow: none; } .rk-confirm-ok.is-danger:hover { filter: brightness(1.06); } @keyframes rk-confirm-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } } @media (max-width: 480px) { .rk-confirm-actions { flex-direction: column-reverse; } .rk-confirm-actions .btn-lime, .rk-confirm-actions .btn-line { width: 100%; } } @media (prefers-color-scheme: light) { html[data-theme="auto"] .rk-confirm-box { background: #fff; border-color: #E6E6E2; } } @media (prefers-reduced-motion: reduce) { .rk-confirm-box { animation: none; } } /* ── css/components/rangos.css ── */ /* ─── Rangos del Ejército Rocket ───────────────────────────────────────── Piezas que salen en muchas pantallas: chapita junto al nombre, barra de avance, el camino de nueve paradas y la celebración de ascenso (que puede abrirse en cualquier página). Macros en templates/_macros/rango.html. La página «Mi rango» tiene lo suyo en pages/rangos.css. ──────────────────────────────────────────────────────────────────────── */ /* ── Chapita suelta ───────────────────────────── */ .rg-insignia { display: block; max-width: 100%; height: auto; } img.rg-insignia, .rg-insignia img { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45)); } picture.rg-insignia img { display: block; width: 100%; height: auto; } html[data-theme="light"] img.rg-insignia, html[data-theme="light"] .rg-insignia img { filter: drop-shadow(0 10px 14px rgba(20, 19, 46, 0.26)); } .rg-insignia.is-bloqueada { filter: grayscale(1) brightness(0.55) contrast(0.95) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35)); opacity: 0.78; } html[data-theme="light"] .rg-insignia.is-bloqueada { filter: grayscale(1) brightness(1.05) contrast(0.7) drop-shadow(0 8px 12px rgba(20, 19, 46, 0.18)); opacity: 0.55; } @media (prefers-color-scheme: light) { html[data-theme="auto"] .rg-insignia.is-bloqueada { filter: grayscale(1) brightness(1.05) contrast(0.7); opacity: 0.55; } } /* ── Chip junto al nombre (sin cifras) ────────── */ .rg-mini { display: block; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); } .rg-chip { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; font-weight: 750; font-size: 12.5px; font-stretch: 92%; line-height: 1.2; white-space: nowrap; color: var(--text-secondary); } .rg-chip--mando { color: var(--text-primary); } .rg-chip--alto_mando { color: var(--logo-accent); } .rg-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ── Barra de avance (solo la ve su dueño) ────── */ .rg-barra { position: relative; height: 10px; border-radius: 99px; background: var(--bg-active); overflow: hidden; } .rk-dark .rg-barra, .rg-barra--oscura { background: rgba(255, 255, 255, 0.1); } .rg-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--color-primary), var(--color-lime)); box-shadow: 0 0 14px rgba(233, 253, 61, 0.45); transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); } html[data-theme="light"] .rg-barra:not(.rg-barra--oscura) i { background: linear-gradient(90deg, #4800FF, #8A6BFF); box-shadow: none; } .rk-dark .rg-barra i { background: linear-gradient(90deg, #6D4AFF, #E9FD3D) !important; box-shadow: 0 0 14px rgba(233, 253, 61, 0.45) !important; } /* ── El camino de nueve paradas ───────────────── */ .rg-viaje { position: relative; list-style: none; margin: 0; padding: 50px 0 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; --rg-lleno: 0%; } .rg-viaje::before, .rg-viaje::after { content: ""; position: absolute; left: 5.5%; right: 5.5%; top: 102px; height: 6px; border-radius: 99px; } .rg-viaje::before { background: var(--bg-active); } .rg-viaje::after { right: auto; width: var(--rg-lleno); background: linear-gradient(90deg, #6D4AFF, #E9FD3D); box-shadow: 0 0 18px rgba(233, 253, 61, 0.45); } html[data-theme="light"] .rg-viaje::after { background: linear-gradient(90deg, #4800FF, #8A6BFF); box-shadow: 0 0 14px rgba(72, 0, 255, 0.3); } .rg-parada { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .rg-parada-medalla { position: relative; width: 104px; height: 104px; display: grid; place-items: center; } .rg-parada-medalla .rg-insignia { width: 96px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .rg-parada:hover .rg-parada-medalla .rg-insignia { transform: translateY(-5px) scale(1.06); } .rg-parada.is-actual .rg-parada-medalla { width: 132px; height: 132px; margin-top: -14px; } .rg-parada.is-actual .rg-parada-medalla .rg-insignia { width: 124px; } .rg-parada.is-actual .rg-parada-medalla::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 253, 61, 0.38), rgba(109, 74, 255, 0.18) 50%, transparent 70%); animation: rgRespira 3.6s ease-in-out infinite; } .rg-candado { position: absolute; right: 4px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface-raised); border: 1.5px solid var(--border-strong); color: var(--text-secondary); } .rg-candado svg { width: 14px; height: 14px; } .rg-aqui { position: absolute; top: -30px; left: 50%; z-index: 2; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; font-weight: 900; font-stretch: 85%; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-navy); background: var(--color-lime); padding: 4px 10px; border-radius: 6px; box-shadow: 0 8px 20px -6px rgba(233, 253, 61, 0.6); } .rg-aqui::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; } html[data-theme="light"] .rg-aqui { background: #4800FF; color: #fff; box-shadow: 0 8px 20px -6px rgba(72, 0, 255, 0.45); } .rg-parada-txt { display: flex; flex-direction: column; align-items: center; gap: 2px; } .rg-parada-nom { font-weight: 850; font-size: 16px; letter-spacing: -0.01em; color: var(--text-primary); } .rg-parada.is-bloqueada .rg-parada-nom { color: var(--text-secondary); } .rg-parada-umbral { font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace); font-size: 11px; font-weight: 600; color: var(--text-secondary); } .rg-parada.is-hecha .rg-parada-umbral, .rg-parada.is-actual .rg-parada-umbral { color: var(--kicker-color); } .rg-parada-frase { display: none; } .rg-familia, .rg-aqui--txt { display: none; } @media (max-width: 900px) { .rg-viaje { grid-template-columns: 1fr; gap: 0; padding: 0; } .rg-viaje::before, .rg-viaje::after { left: 51px; right: auto; top: 30px; bottom: 30px; width: 6px; height: auto; } .rg-viaje::after { bottom: auto; height: var(--rg-lleno); } .rg-parada { flex-direction: row; text-align: left; gap: 16px; padding: 10px 0; } .rg-parada-medalla { width: 108px; height: 108px; flex: none; } .rg-parada-medalla .rg-insignia { width: 84px; } .rg-parada.is-actual .rg-parada-medalla { width: 108px; height: 108px; margin-top: 0; } .rg-parada.is-actual .rg-parada-medalla .rg-insignia { width: 100px; } .rg-parada.is-actual { background: linear-gradient(90deg, color-mix(in srgb, var(--kicker-color) 10%, transparent), transparent 80%); border-radius: 18px; margin: 6px -8px; padding: 12px 8px; } .rg-parada-txt { align-items: flex-start; } .rg-parada-medalla .rg-aqui { display: none; } .rg-aqui--txt { display: inline-block; position: static; transform: rotate(-2deg); margin-bottom: 6px; } .rg-aqui--txt::after { display: none; } .rg-parada-frase { display: block; color: var(--text-secondary); font-size: 13.5px; margin-top: 3px; } .rg-parada.is-bloqueada .rg-parada-frase { opacity: 0.8; } .rg-familia { display: block; position: relative; z-index: 1; padding: 14px 0 4px 118px; font-weight: 850; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); } } @keyframes rgRespira { 0%, 100% { transform: scale(0.92); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } } @keyframes rgFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes rgGira { to { rotate: 360deg; } } /* ── Celebración de ascenso y presentación «Tu rango» ─────────────────── Pantalla completa. La abre js/rangos.js; sin JS no se ve (hidden). */ /* Por encima de todo: menú del móvil (1050), avisos (9999) y ayudas (1090) */ .rg-asc { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; overflow: hidden; color: #fff; } .rg-asc[hidden] { display: none; } .rg-asc-fondo { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; background: radial-gradient(60% 55% at 50% 42%, rgba(109, 74, 255, 0.55), transparent 70%), radial-gradient(120% 100% at 50% 40%, #1A1452 0%, #0B0A1F 55%, #040409 100%); } .rg-asc-fondo::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent); } .rg-asc.is-abierto .rg-asc-fondo { opacity: 1; } .rg-asc-escena { position: relative; width: min(560px, 92vw); max-height: 100%; overflow-y: auto; padding: 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .rg-asc-podio { position: relative; width: 260px; height: 260px; display: grid; place-items: center; margin-bottom: 6px; flex: none; } .rg-asc-rayos { position: absolute; left: 50%; top: 50%; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; opacity: 0; transform: scale(0.4); pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(233, 253, 61, 0.22) 0deg 4deg, transparent 4deg 18deg); mask-image: radial-gradient(circle, #000 8%, transparent 62%); } .rg-asc-halo { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 253, 61, 0.55), rgba(109, 74, 255, 0.25) 45%, transparent 70%); opacity: 0; transform: scale(0.3); } .rg-asc-onda { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 3px solid var(--color-lime); opacity: 0; } .rg-asc-medalla { position: absolute; inset: 0; display: grid; place-items: center; } .rg-asc-medalla .rg-insignia { width: 230px; } .rg-asc-vieja { opacity: 0; } .rg-asc-nueva { opacity: 0; transform: scale(0.25) rotate(-14deg); } .rg-asc-chispas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .rg-chispa { position: absolute; left: 0; top: 0; width: var(--t); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2); border-radius: 50%; background: var(--c); opacity: 0; box-shadow: 0 0 10px var(--c); } .rg-asc-texto > * { opacity: 0; transform: translateY(16px); } .rg-asc-k { font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace); font-weight: 600; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-lime); margin: 0; } .rg-asc-pre { font-size: 18px; color: rgba(255, 255, 255, 0.72); margin: 10px 0 0; } .rg-asc-nombre { font-weight: 900; font-stretch: 80%; font-size: clamp(54px, 11vw, 104px); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; margin: 4px 0 0; color: #fff; opacity: 1 !important; transform: none !important; } .rg-asc-nombre .l { display: inline-block; opacity: 0; transform: translateY(0.45em) scale(0.9); } .rg-asc-nombre .l.is-lima { color: var(--color-lime); } .rg-asc-frase { font-size: 18px; color: rgba(255, 255, 255, 0.85); margin: 10px 0 0; font-weight: 600; } .rg-asc-dato { margin: 18px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.72); max-width: 44ch; line-height: 1.5; } .rg-asc-dato b { color: #fff; font-weight: 850; } .rg-asc-sig { display: flex; align-items: center; gap: 14px; width: min(420px, 86vw); margin: 18px auto 0; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); text-align: left; } .rg-asc-sig-img { width: 46px; flex: none; } .rg-asc-sig--cima { justify-content: center; border-color: rgba(233, 253, 61, 0.35); background: rgba(233, 253, 61, 0.08); } .rg-asc-sig--cima .rg-asc-sig-txt { margin: 0; text-align: center; color: var(--color-lime); font-weight: 750; font-size: 14px; } .rg-asc-sig .rg-insignia.is-bloqueada { filter: grayscale(1) brightness(0.8) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); opacity: 0.9; } .rg-asc-sig-cuerpo { flex: 1; min-width: 0; } .rg-asc-sig-txt { color: rgba(255, 255, 255, 0.75); font-size: 13px; line-height: 1.4; margin-bottom: 8px; } .rg-asc-sig-txt b { color: #fff; } .rg-asc-sig .rg-barra i { width: 0 !important; } .rg-asc.is-fase3 .rg-asc-sig .rg-barra i { width: var(--rg-pct) !important; transition-delay: 0.8s; } .rg-asc-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; } .rg-asc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 13px; font-weight: 800; font-size: 15px; border: 0; cursor: pointer; text-decoration: none; } .rg-asc-btn--lima { background: var(--color-lime); color: var(--color-navy); box-shadow: 0 10px 30px -8px rgba(233, 253, 61, 0.55); } .rg-asc-btn--linea { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.28); } .rg-asc-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; } .rg-asc-btn--lima:hover { box-shadow: 0 14px 36px -8px rgba(233, 253, 61, 0.75); transform: translateY(-1px); } .rg-asc-btn--linea:hover { border-color: rgba(255, 255, 255, 0.55); } .rg-asc-btn { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .rg-asc-cerrar { position: absolute; top: 22px; right: 24px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity 0.4s; cursor: pointer; } .rg-asc.is-abierto .rg-asc-cerrar { opacity: 1; } .rg-asc.is-fase1 .rg-asc-vieja { animation: rgViejaEntra 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .rg-asc.is-fase2 .rg-asc-vieja { animation: rgViejaSale 0.55s cubic-bezier(0.55, 0, 0.8, 0.3) forwards; } .rg-asc.is-fase2 .rg-asc-halo { animation: rgHalo 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .rg-asc.is-fase2 .rg-asc-onda { animation: rgOnda 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards; } .rg-asc.is-fase2 .rg-asc-nueva { animation: rgNueva 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s forwards; } .rg-asc.is-fase2 .rg-asc-nueva .rg-insignia { animation: rgLatido 2.8s ease-in-out 1.3s infinite; } .rg-asc.is-fase2 .rg-asc-rayos { animation: rgRayos 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards, rgGira 26s linear infinite; } .rg-asc.is-fase2 .rg-chispa { animation: rgChispa 1.25s cubic-bezier(0.16, 1, 0.3, 1) calc(0.14s + var(--r)) forwards; } .rg-asc.is-fase3 .rg-asc-texto > * { animation: rgSube 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .rg-asc.is-fase3 .rg-asc-texto > :nth-child(2) { animation-delay: 0.06s; } .rg-asc.is-fase3 .rg-asc-texto > :nth-child(4) { animation-delay: 0.5s; } .rg-asc.is-fase3 .rg-asc-texto > :nth-child(5) { animation-delay: 0.62s; } .rg-asc.is-fase3 .rg-asc-texto > :nth-child(6) { animation-delay: 0.72s; } .rg-asc.is-fase3 .rg-asc-texto > :nth-child(7) { animation-delay: 0.86s; } .rg-asc.is-fase3 .rg-asc-nombre .l { animation: rgLetra 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* Presentación: una sola chapita, sin la vieja que se va */ .rg-asc--intro.is-fase1 .rg-asc-nueva { animation: rgNueva 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards; } .rg-asc--intro.is-fase1 .rg-asc-nueva .rg-insignia { animation: rgLatido 2.8s ease-in-out 1.2s infinite; } .rg-asc--intro.is-fase1 .rg-asc-halo { animation: rgHalo 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .rg-asc--intro.is-fase1 .rg-asc-onda { animation: rgOnda 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; } .rg-asc--intro.is-fase1 .rg-asc-rayos { animation: rgRayos 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards, rgGira 26s linear infinite; } .rg-asc--intro.is-fase1 .rg-chispa { animation: rgChispa 1.25s cubic-bezier(0.16, 1, 0.3, 1) calc(0.25s + var(--r)) forwards; } @keyframes rgViejaEntra { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes rgViejaSale { 0% { opacity: 1; transform: scale(1); } 30% { transform: scale(1.04) rotate(-3deg); } 60% { transform: scale(0.96) rotate(3deg); } 100% { opacity: 0; transform: scale(0.4) rotate(8deg); filter: blur(6px) brightness(2.4); } } @keyframes rgHalo { 0% { opacity: 0; transform: scale(0.3); } 35% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0.75; transform: scale(1); } } @keyframes rgOnda { 0% { opacity: 0.95; transform: scale(0.5); } 100% { opacity: 0; transform: scale(3.2); border-width: 1px; } } @keyframes rgNueva { 0% { opacity: 0; transform: scale(0.25) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } @keyframes rgRayos { to { opacity: 1; transform: scale(1); } } @keyframes rgChispa { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.3); } } @keyframes rgSube { to { opacity: 1; transform: translateY(0); } } @keyframes rgLetra { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes rgLatido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } @media (max-width: 640px) { .rg-asc-podio { width: 210px; height: 210px; } .rg-asc-medalla .rg-insignia { width: 186px; } .rg-asc-frase, .rg-asc-pre { font-size: 16px; } .rg-asc-cerrar { top: 14px; right: 14px; } } @media (max-height: 700px) { .rg-asc-nombre { font-size: clamp(44px, 9vw, 80px); } .rg-asc-dato { margin-top: 12px; } .rg-asc-podio { width: 190px; height: 190px; } .rg-asc-medalla .rg-insignia { width: 168px; } } @media (prefers-reduced-motion: reduce) { .rg-asc *, .rg-asc { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; } .rg-asc-rayos, .rg-chispa, .rg-asc-onda { display: none; } .rg-parada.is-actual .rg-parada-medalla::before { animation: none; } .rg-parada-medalla .rg-insignia { transition: none; } } /* Chapita en los resultados del buscador y en las listas de gente */ .tb-res-rango { display: inline-flex; align-items: center; gap: 5px; } .tb-res-rango img { width: 14px; height: auto; } .pl-rango { margin-left: auto; flex: none; } .cf-rango, .ls-com-rango { margin-left: 2px; } .cf-cname .rg-chip { font-size: 11.5px; } /* ── css/pages/brand-cover.css ── */ /* ================================================================ CABECERA DE MARCA — compartida por Cursos y Mentores Misma receta que la portada de Miembros (members.css: .mbr-cover, .mbr-hero, .mbr-totals, .mbr-tools). Si se ajusta allí, ajustar aquí. ================================================================ */ /* Cover marino full-bleed con la R como marca de agua */ .bcov { position: relative; height: 440px; margin: 0; overflow: hidden; background: radial-gradient(70% 90% at 85% 0%, rgba(72,0,255,0.55), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(224,99,213,0.16), transparent 60%), radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(160deg, #1F2148 0%, #14132E 60%, #0F0E24 100%); } .bcov-mark { position: absolute; right: 4%; top: -40px; height: 520px; opacity: 0.08; } .bcov-mark svg { height: 100%; width: auto; color: #fff; } /* Contenedor del texto: mismo ancho que Miembros */ .bcov-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; } /* Héroe montado sobre el cover (390 de 440: las píldoras quedan siempre dentro del marino) */ .bcov-hero { position: relative; margin-top: -390px; padding: 56px 0 34px; min-height: 390px; box-sizing: border-box; color: #fff; } .bcov-title { margin: 0; font: 850 clamp(40px, 6vw, 68px)/0.92 var(--font-display); font-stretch: 86%; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; } .bcov-title em { font-style: normal; display: inline-block; margin-top: 0.08em; background: var(--color-lime); color: var(--color-navy); padding: 0.02em 0.16em 0.06em; border-radius: 6px; transform: rotate(-1.4deg); box-shadow: 0 12px 40px -12px color-mix(in srgb, var(--color-lime) 55%, transparent); } .bcov-sub { margin: 18px 0 0; max-width: 560px; font: 400 15px/1.55 var(--font-display); color: rgba(255,255,255,0.78); } /* Barra de herramientas apoyada sobre el borde del cover */ .bcov-tools { display: flex; align-items: center; gap: 12px; margin: 34px 0 26px; padding: 8px; border-radius: 16px; background: var(--bg-surface); border: 1px solid var(--border-default); box-shadow: 0 24px 50px -30px rgba(20,19,46,0.5), var(--shadow-card-rest); position: relative; z-index: 2; } html[data-theme="light"] .bcov-tools, html.light .bcov-tools { background: #fff; border-color: #E6E6E2; } @media (prefers-color-scheme: light) { html[data-theme="auto"] .bcov-tools { background: #fff; border-color: #E6E6E2; } } /* Pestañas Cursos | Mentores dentro de la barra (mismo aspecto que el orden de Miembros) */ .bcov-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-surface-sunken); flex-shrink: 0; } .bcov-tab { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 9px; font: 600 13px var(--font-display); color: var(--text-secondary); text-decoration: none; transition: color 0.15s, background 0.15s; } .bcov-tab:hover { color: var(--text-primary); } /* Buscador dentro de la barra */ .bcov-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 11px; background: var(--bg-surface-sunken); border: 1px solid transparent; color: var(--text-tertiary); min-width: 0; } .bcov-search:focus-within { border-color: var(--border-focus); box-shadow: var(--accent-focus-ring); background: var(--bg-surface); } .bcov-search svg { width: 16px; height: 16px; flex-shrink: 0; } .bcov-search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: 400 14px var(--font-display); color: var(--text-primary); } .bcov-search input::placeholder { color: var(--text-placeholder); } @media (max-width: 767px) { /* Variante compacta: kicker + título + píldoras (el subtítulo se omite) */ .bcov { height: 268px; } .bcov-mark { height: 330px; top: -22px; right: -6%; } .bcov-wrap { padding: 0 20px; } .bcov-hero { margin-top: -248px; min-height: 248px; padding: 28px 0 20px; } .bcov-title { font-size: clamp(30px, 9.2vw, 38px); } .bcov-sub { display: none; } .bcov-hero .tot::-webkit-scrollbar { display: none; } .bcov-tools { flex-wrap: wrap; margin-top: 22px; } .bcov-tabs { width: 100%; } .bcov-tab { flex: 1; justify-content: center; } .bcov-search { width: 100%; flex-basis: 100%; } } .bcov-hero .tot { margin-top: 18px; }