/* ============================================================ OPERANT — Apariencia "Mineral" Especificación exacta: docs/16-sistema-visual-mineral.md Propuesta aprobada: docs/assets/propuesta-mineral-final.html TODO está bajo html[data-op-visual="mineral"]: con la apariencia clásica este archivo no cambia nada (AparienciaMineralTest). Las paletas de Filament y --op-primary/--op-gradient/fuentes salen de config/brand.php (brand-styles.blade.php). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap'); @property --op-a { syntax: ''; inherits: false; initial-value: 0deg; } /* =================== 1. TOKENS (doc 16 §4) =================== */ html[data-op-visual="mineral"].dark { --op-bg: #071D1E; --op-luz-1: rgba(217, 119, 75, .62); --op-luz-2: rgba(40, 120, 128, .70); --op-luz-3: rgba(159, 211, 207, .34); --op-luz-4: rgba(242, 178, 140, .32); --op-luz-cursor: rgba(159, 211, 207, .28); --op-glass: rgba(200, 235, 230, .055); --op-glass-2: rgba(200, 235, 230, .10); --op-glass-deep: rgba(6, 24, 26, .50); --op-sheen: rgba(255, 255, 255, .085); --op-spec: rgba(255, 255, 255, .20); --op-inner: rgba(0, 0, 0, .35); --op-rim-hi: rgba(255, 255, 255, .45); --op-rim-mid: rgba(255, 255, 255, .14); --op-rim-lo: rgba(255, 255, 255, .05); --op-edge: rgba(230, 250, 245, .12); --op-edge-hi: rgba(230, 250, 245, .28); --op-col: rgba(0, 0, 0, .14); --op-solid: #10323A; --op-solid-2: #153D45; --op-column: #0C2A2D; --op-border-g: #23464B; --op-solid-edge: #23464B; --op-text: #F3EEE6; --op-ink: #F3EEE6; --op-ink-2: rgba(243, 238, 230, .74); --op-ink-3: rgba(243, 238, 230, .52); --op-act: #E2814F; --op-on-act: #1D0E05; --op-data: #9FD3CF; --op-on-data: #0D2B30; --op-ok: #6CC7A5; --op-warn: #F0BD5A; --op-bad: #F2806F; --op-human: #F2B28C; --op-opal: #F6C9B4, #C6EAD9, #CDD6F6, #F4E2A3, #F6C9B4; --op-opal-ink: #C6EAD9; --op-opal-glow: rgba(198, 234, 217, .55); --op-dato-1: #9FD3CF; --op-dato-2: #5FA9AE; --op-dato-3: #F2B28C; --op-dato-4: #7D9A9A; --op-dato-5: #6CC7A5; --op-dato-6: #8FA7CF; --op-shadow: 0 30px 70px -30px rgba(0, 0, 0, .75), 0 2px 6px -2px rgba(0, 0, 0, .30); --op-shadow-sm: 0 10px 20px -14px rgba(0, 0, 0, .5); } html[data-op-visual="mineral"]:not(.dark) { --op-bg: #DCE5E3; --op-luz-1: rgba(217, 119, 75, .58); --op-luz-2: rgba(63, 143, 149, .50); --op-luz-3: rgba(159, 211, 207, .85); --op-luz-4: rgba(242, 178, 140, .70); --op-luz-cursor: rgba(242, 178, 140, .50); --op-glass: rgba(255, 255, 255, .36); --op-glass-2: rgba(255, 255, 255, .58); --op-glass-deep: rgba(255, 255, 255, .66); --op-sheen: rgba(255, 255, 255, .55); --op-spec: rgba(255, 255, 255, .95); --op-inner: rgba(13, 43, 48, .06); --op-rim-hi: rgba(255, 255, 255, 1); --op-rim-mid: rgba(255, 255, 255, .65); --op-rim-lo: rgba(255, 255, 255, .30); --op-edge: rgba(13, 43, 48, .10); --op-edge-hi: rgba(13, 43, 48, .20); --op-col: rgba(255, 255, 255, .28); --op-solid: #F8F7F4; --op-solid-2: #EEF2F0; --op-column: #E9EFED; --op-border-g: #D3DEDC; --op-solid-edge: #D3DEDC; --op-text: #0F2D33; --op-ink: #0F2D33; --op-ink-2: rgba(15, 45, 51, .76); --op-ink-3: rgba(15, 45, 51, .60); --op-act: #B5532A; --op-on-act: #FFF8F3; --op-data: #2A7680; --op-on-data: #FFFFFF; --op-ok: #1B7A59; --op-warn: #9A6410; --op-bad: #B9412F; --op-human: #C98A62; --op-opal: #EAA184, #6FC0A3, #93A6E8, #DCB84E, #EAA184; --op-opal-ink: #2F7563; --op-opal-glow: rgba(111, 192, 163, .45); --op-dato-1: #2A7680; --op-dato-2: #4F9AA0; --op-dato-3: #C98A62; --op-dato-4: #5B7B7C; --op-dato-5: #1B7A59; --op-dato-6: #4D6F9E; --op-shadow: 0 26px 50px -28px rgba(13, 43, 48, .40), 0 0 0 1px rgba(13, 43, 48, .05); --op-shadow-sm: 0 10px 20px -14px rgba(13, 43, 48, .35); } html[data-op-visual="mineral"] { --op-ease: cubic-bezier(.2, .8, .2, 1); --op-font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif; --op-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; --op-relleno-1: #2A7680; --op-relleno-2: #46658F; --op-relleno-3: #A8653F; --op-relleno-4: #5B7B7C; --op-relleno-5: #2E7D62; /* Tokens con respaldo usados por las vistas: var(--op-x, ) (doc 16 §2) */ --op-card-solido: radial-gradient(140% 90% at 0% 0%, var(--op-sheen), transparent 55%), var(--op-glass); --op-toast-bg: var(--op-glass-deep); --op-toast-text: var(--op-ink); --op-toast-edge: var(--op-edge-hi); --op-toast-blur: blur(36px) saturate(185%); --op-toast-radius: 14px; --op-toast-shadow: inset 0 1px 0 var(--op-spec), var(--op-shadow); --op-tip-radius: 8px; --op-tip-bg: var(--op-solid); --op-tip-fg: var(--op-ink); --op-punto-fondo: var(--op-bg); --op-kb-1: var(--op-dato-4); --op-kb-2: var(--op-dato-1); --op-kb-3: var(--op-warn); --op-kb-4: var(--op-ok); --op-slide-1: linear-gradient(160deg, #2A7680, #0D2B30); --op-slide-2: linear-gradient(160deg, #D9774B, #7A3A1E); --op-slide-3: linear-gradient(160deg, #46658F, #142C2F); --op-galeria-1: linear-gradient(135deg, #2A7680, #0D2B30); --op-galeria-2: linear-gradient(135deg, #46658F, #142C2F); --op-galeria-3: linear-gradient(135deg, #A8653F, #3A2414); --op-galeria-4: linear-gradient(135deg, #9FD3CF, #2A7680); --op-galeria-5: linear-gradient(135deg, #5B7B7C, #142C2F); --op-galeria-6: linear-gradient(135deg, #2E7D62, #0D2B30); --op-galeria-7: linear-gradient(135deg, #F2B28C, #A8653F); --op-galeria-8: linear-gradient(135deg, #D9774B, #142C2F); } html[data-op-visual="mineral"] .op-ds { --op-border: var(--op-edge); --op-surface: var(--op-glass); --op-surface-2: var(--op-glass-2); --op-radius: 20px; color: var(--op-ink); } /* =================== 2. FONDO, LUZ Y GRANO (doc 16 §5, §12) =================== */ html[data-op-visual="mineral"] .fi-body { background: var(--op-bg); } html[data-op-visual="mineral"] .fi-body::before { content: ""; position: fixed; inset: -12vmax; z-index: -2; pointer-events: none; background: radial-gradient(circle at 14% 10%, var(--op-luz-1) 0, transparent 30%), radial-gradient(circle at 92% 28%, var(--op-luz-2) 0, transparent 36%), radial-gradient(circle at 46% 104%, var(--op-luz-3) 0, transparent 30%), radial-gradient(circle at 80% 96%, var(--op-luz-4) 0, transparent 22%); will-change: transform; animation: op-m-drift 34s ease-in-out infinite alternate; } html[data-op-visual="mineral"] .fi-body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes op-m-drift { to { transform: translate3d(4vw, 3vh, 0) scale(1.08); } } /* Luz que sigue al cursor (el elemento lo crea brand-styles; oculto en Clásico) */ .op-visual-luz { display: none; } html[data-op-visual="mineral"] .op-visual-luz { display: block; position: fixed; left: 0; top: 0; width: 360px; height: 360px; border-radius: 50%; z-index: -1; background: var(--op-luz-cursor); filter: blur(60px); pointer-events: none; will-change: transform; transform: translate3d(-999px, -999px, 0); } /* Barras de Filament en vidrio */ html[data-op-visual="mineral"] .fi-sidebar { background: var(--op-glass-deep); -webkit-backdrop-filter: blur(30px) saturate(185%); backdrop-filter: blur(30px) saturate(185%); border-right: 1px solid var(--op-edge); box-shadow: none; } @media (min-width: 1024px) { html[data-op-visual="mineral"] .fi-sidebar { background: var(--op-glass); } } html[data-op-visual="mineral"] .fi-sidebar-header { background: transparent; box-shadow: none; border-bottom: 1px solid var(--op-edge); } html[data-op-visual="mineral"] .fi-topbar nav { background: var(--op-glass); -webkit-backdrop-filter: blur(30px) saturate(185%); backdrop-filter: blur(30px) saturate(185%); box-shadow: inset 0 -1px 0 var(--op-edge); } html[data-op-visual="mineral"] .fi-sidebar-item-active .fi-sidebar-item-button { background: var(--op-glass-2); box-shadow: inset 0 1px 0 var(--op-spec), 0 0 0 1px var(--op-edge); } html[data-op-visual="mineral"] .fi-header-heading { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -.025em; color: var(--op-ink); } html[data-op-visual="mineral"] .fi-btn.fi-color-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); } /* =================== 3. TIPOGRAFÍA (doc 16 §7) =================== */ html[data-op-visual="mineral"] .op-ds { font-family: var(--op-font-ui); font-size: 14px; line-height: 1.5; } html[data-op-visual="mineral"] .op-section-title { font-size: 1.75rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 .4rem; text-wrap: balance; } html[data-op-visual="mineral"] .op-section-sub { opacity: 1; color: var(--op-ink-2); font-size: 14px; margin: 0 0 1.5rem; } html[data-op-visual="mineral"] .op-label { font: 500 11px/1 var(--op-font-mono); letter-spacing: .14em; text-transform: uppercase; opacity: 1; color: var(--op-ink-3); margin-bottom: .7rem; } html[data-op-visual="mineral"] .op-muted { opacity: 1; color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-heading { font-weight: 600; letter-spacing: -.025em; } html[data-op-visual="mineral"] .op-voice { font-family: var(--op-font-voice); font-style: italic; font-weight: 400; letter-spacing: 0; } html[data-op-visual="mineral"] .op-mono { font-family: var(--op-font-mono); font-variant-numeric: tabular-nums; } html[data-op-visual="mineral"] .op-ds :focus-visible { outline: 2px solid var(--op-act); outline-offset: 2px; } /* =================== 4. VIDRIO (doc 16 §5) =================== */ html[data-op-visual="mineral"] .op-card, html[data-op-visual="mineral"] .op-stat, html[data-op-visual="mineral"] .op-kpi, html[data-op-visual="mineral"] .op-media-card, html[data-op-visual="mineral"] .op-profile-card, html[data-op-visual="mineral"] .op-table-wrap, html[data-op-visual="mineral"] .op-hero { position: relative; isolation: isolate; border: 0; border-radius: 20px; background: radial-gradient(140% 90% at 0% 0%, var(--op-sheen), transparent 55%), var(--op-glass); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); box-shadow: inset 0 1px 0 var(--op-spec), inset 0 -18px 36px -28px var(--op-inner), var(--op-shadow); } /* Filo de luz en degradé (brillante arriba-izquierda, se apaga abajo) */ html[data-op-visual="mineral"] .op-card::before, html[data-op-visual="mineral"] .op-stat::before, html[data-op-visual="mineral"] .op-kpi::before, html[data-op-visual="mineral"] .op-media-card::before, html[data-op-visual="mineral"] .op-profile-card::before, html[data-op-visual="mineral"] .op-table-wrap::before, html[data-op-visual="mineral"] .op-hero::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; background: linear-gradient(150deg, var(--op-rim-hi), var(--op-rim-lo) 38%, var(--op-rim-lo) 62%, var(--op-rim-mid)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* Reflejo que sigue al cursor (--mx/--my los pone brand-styles) */ html[data-op-visual="mineral"] .op-card::after, html[data-op-visual="mineral"] .op-stat::after, html[data-op-visual="mineral"] .op-kpi::after, html[data-op-visual="mineral"] .op-media-card::after, html[data-op-visual="mineral"] .op-profile-card::after, html[data-op-visual="mineral"] .op-hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .14), transparent 45%); } html[data-op-visual="mineral"] .op-card:hover::after, html[data-op-visual="mineral"] .op-stat:hover::after, html[data-op-visual="mineral"] .op-kpi:hover::after, html[data-op-visual="mineral"] .op-media-card:hover::after, html[data-op-visual="mineral"] .op-profile-card:hover::after, html[data-op-visual="mineral"] .op-hero:hover::after { opacity: 1; } html[data-op-visual="mineral"] .op-card { padding: 18px 20px; } html[data-op-visual="mineral"] .op-hoverable { transition: transform .18s var(--op-ease), box-shadow .18s; } html[data-op-visual="mineral"] .op-hoverable:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--op-spec), inset 0 -18px 36px -28px var(--op-inner), 0 14px 30px -14px rgba(0, 0, 0, .35); } /* Vidrio profundo: lo que flota (doc 16 §5) */ html[data-op-visual="mineral"] .op-modal, html[data-op-visual="mineral"] .op-drawer, html[data-op-visual="mineral"] .op-popover, html[data-op-visual="mineral"] .op-chart-tip { background: radial-gradient(140% 90% at 0% 0%, var(--op-sheen), transparent 55%), var(--op-glass-deep); -webkit-backdrop-filter: blur(36px) saturate(185%); backdrop-filter: blur(36px) saturate(185%); color: var(--op-ink); border: 1px solid var(--op-edge-hi); box-shadow: inset 0 1px 0 var(--op-spec), var(--op-shadow); } html[data-op-visual="mineral"] .op-modal { border-radius: 20px; } html[data-op-visual="mineral"] .op-drawer { border-radius: 20px 0 0 20px; border-right: 0; } html[data-op-visual="mineral"] .op-popover { border-radius: 12px; } html[data-op-visual="mineral"] .op-chart-tip { border-radius: 12px; padding: 8px 11px; font: 500 12px var(--op-font-ui); } html[data-op-visual="mineral"] .op-chart-tip b { color: var(--op-data); font-family: 'Sora', sans-serif; font-weight: 600; } html[data-op-visual="mineral"] .op-modal-backdrop { background: rgba(4, 16, 17, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } html[data-op-visual="mineral"] .op-modal-head { background: var(--op-glass-2); color: var(--op-ink); border-bottom: 1px solid var(--op-edge); } html[data-op-visual="mineral"] .op-modal-close { background: var(--op-glass-2); color: var(--op-ink); box-shadow: inset 0 1px 0 var(--op-spec); } html[data-op-visual="mineral"] .op-modal-close:hover { background: var(--op-glass); } /* =================== 5. CABECERA Y NAVEGACIÓN DE SECCIONES =================== */ /* Cabecera de la Guía Visual: receta del dato héroe (cobre en vidrio) */ html[data-op-visual="mineral"] .op-hero { background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .28), transparent 55%), linear-gradient(160deg, rgba(226, 129, 79, .82), rgba(150, 66, 34, .70)); color: #FFF8F2; } html[data-op-visual="mineral"] .op-hero > div > div:first-child { font-family: 'Sora', sans-serif; font-weight: 600; letter-spacing: -.035em; } html[data-op-visual="mineral"] .op-nav { gap: 2px; padding: 4px; border-radius: 14px; margin-bottom: 1.75rem; background: var(--op-glass); border: 1px solid var(--op-edge); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); box-shadow: inset 0 1px 0 var(--op-spec); } html[data-op-visual="mineral"] .op-nav button { font: 500 12.5px var(--op-font-ui); padding: 6px 13px; border-radius: 10px; opacity: 1; color: var(--op-ink-2); transition: background .2s, color .2s; } html[data-op-visual="mineral"] .op-nav button:hover { background: var(--op-glass-2); color: var(--op-ink); } html[data-op-visual="mineral"] .op-nav button.op-active { background: var(--op-ink); color: var(--op-bg); box-shadow: none; } /* =================== 6. BOTONES (doc 16 §11) =================== */ html[data-op-visual="mineral"] .op-btn { height: 36px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--op-edge); background: var(--op-glass); color: var(--op-ink); font: 500 13px var(--op-font-ui); box-shadow: inset 0 1px 0 var(--op-spec); transition: background .15s, transform .12s, box-shadow .2s, color .15s; } html[data-op-visual="mineral"] .op-btn:hover { transform: none; background: var(--op-glass-2); } html[data-op-visual="mineral"] .op-btn:active { transform: scale(.97); } html[data-op-visual="mineral"] .op-btn:disabled { opacity: .45; transform: none; } html[data-op-visual="mineral"] .op-btn-primary, html[data-op-visual="mineral"] .op-fab { background: linear-gradient(180deg, color-mix(in srgb, var(--op-act) 88%, #fff), var(--op-act)); border-color: transparent; color: var(--op-on-act); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 24px -12px var(--op-act); } html[data-op-visual="mineral"] .op-btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--op-act) 88%, #fff), var(--op-act)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -12px var(--op-act); } html[data-op-visual="mineral"] .op-btn-primary::after { display: none; } html[data-op-visual="mineral"] .op-btn-solid { background: var(--op-act); border-color: transparent; color: var(--op-on-act); } html[data-op-visual="mineral"] .op-btn-info { background: rgb(var(--info-600)); border-color: transparent; color: #fff; } html[data-op-visual="mineral"] .op-btn-success { background: rgb(var(--success-600)); border-color: transparent; color: #fff; } html[data-op-visual="mineral"] .op-btn-warning { background: rgb(var(--warning-400)); border-color: transparent; color: #2A1A04; } html[data-op-visual="mineral"] .op-btn-danger { background: rgb(var(--danger-600)); border-color: transparent; color: #fff; } html[data-op-visual="mineral"] .op-btn-info:hover { background: rgb(var(--info-700)); } html[data-op-visual="mineral"] .op-btn-success:hover { background: rgb(var(--success-700)); } html[data-op-visual="mineral"] .op-btn-warning:hover { background: rgb(var(--warning-500)); } html[data-op-visual="mineral"] .op-btn-danger:hover { background: rgb(var(--danger-700)); } html[data-op-visual="mineral"] .op-btn-outline { background: transparent; border-color: var(--op-act); color: var(--op-act); box-shadow: none; } html[data-op-visual="mineral"] .op-btn-outline:hover { background: color-mix(in srgb, var(--op-act) 10%, transparent); } html[data-op-visual="mineral"] .op-btn-soft { background: var(--op-glass); border: 1px solid var(--op-edge); color: var(--op-ink); } html[data-op-visual="mineral"] .op-btn-soft:hover { background: var(--op-glass-2); } html[data-op-visual="mineral"] .op-btn-ghost { background: none; border-color: transparent; box-shadow: none; color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-btn-ghost:hover { background: var(--op-glass); color: var(--op-ink); } html[data-op-visual="mineral"] .op-btn-sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: 9px; } html[data-op-visual="mineral"] .op-btn-lg { height: 42px; padding: 0 18px; font-size: 15px; border-radius: 12px; } html[data-op-visual="mineral"] .op-btn-icon { width: 36px; padding: 0; justify-content: center; } html[data-op-visual="mineral"] .op-btn-icon.op-btn-sm { width: 30px; } html[data-op-visual="mineral"] .op-fab { width: 56px; height: 56px; border: 0; } html[data-op-visual="mineral"] .op-fab:hover { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -12px var(--op-act); } /* Grupos y segmentados: contenedor de vidrio, activo en tinta */ html[data-op-visual="mineral"] .op-btn-group, html[data-op-visual="mineral"] .op-segment { gap: 2px; padding: 3px; border-radius: 11px; border: 1px solid var(--op-edge); background: var(--op-glass); overflow: visible; } html[data-op-visual="mineral"] .op-btn-group .op-btn, html[data-op-visual="mineral"] .op-segment button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; box-shadow: none; font: 500 12.5px var(--op-font-ui); color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-btn-group .op-btn:hover, html[data-op-visual="mineral"] .op-segment button:hover { background: var(--op-glass-2); color: var(--op-ink); } html[data-op-visual="mineral"] .op-btn-group .op-btn.op-active, html[data-op-visual="mineral"] .op-segment button.op-active { background: var(--op-ink); color: var(--op-bg); } /* =================== 7. FORMULARIOS =================== */ html[data-op-visual="mineral"] .op-field { gap: .4rem; font-size: 13px; } html[data-op-visual="mineral"] .op-field > span { font-weight: 500; color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-input, html[data-op-visual="mineral"] .op-select, html[data-op-visual="mineral"] .op-textarea { min-height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--op-edge); background-color: var(--op-glass); color: var(--op-ink); font: 400 14px var(--op-font-ui); box-shadow: inset 0 1px 0 var(--op-spec); transition: border-color .15s, box-shadow .15s; } html[data-op-visual="mineral"] .op-textarea { padding: 10px 12px; line-height: 1.5; } html[data-op-visual="mineral"] .op-select { padding-right: 2.2rem; } html[data-op-visual="mineral"] .op-input::placeholder, html[data-op-visual="mineral"] .op-textarea::placeholder { color: var(--op-ink-3); } html[data-op-visual="mineral"] .op-input:focus, html[data-op-visual="mineral"] .op-select:focus, html[data-op-visual="mineral"] .op-textarea:focus { border-color: var(--op-act); box-shadow: inset 0 1px 0 var(--op-spec), 0 0 0 3px color-mix(in srgb, var(--op-act) 22%, transparent); } html[data-op-visual="mineral"] .op-input-icon svg { opacity: .55; color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-input-icon .op-input { padding-left: 2.3rem; } html[data-op-visual="mineral"] .op-switch { width: 40px; height: 24px; } html[data-op-visual="mineral"] .op-switch .op-slider { background: var(--op-glass-2); border: 1px solid var(--op-edge); } html[data-op-visual="mineral"] .op-switch .op-slider::before { width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); } html[data-op-visual="mineral"] .op-switch input:checked + .op-slider { background: linear-gradient(180deg, color-mix(in srgb, var(--op-act) 88%, #fff), var(--op-act)); border-color: transparent; } html[data-op-visual="mineral"] .op-switch input:checked + .op-slider::before { transform: translateX(16px); } html[data-op-visual="mineral"] .op-switch input:focus-visible + .op-slider { outline: 2px solid var(--op-act); outline-offset: 2px; } html[data-op-visual="mineral"] .op-check { font-size: 14px; } html[data-op-visual="mineral"] .op-check input, html[data-op-visual="mineral"] .op-ds input[type="checkbox"], html[data-op-visual="mineral"] .op-ds input[type="radio"] { accent-color: var(--op-act); color: var(--op-act); --tw-ring-color: color-mix(in srgb, var(--op-act) 35%, transparent); background-color: var(--op-glass); border: 1px solid var(--op-edge-hi); } html[data-op-visual="mineral"] .op-ds input[type="checkbox"] { border-radius: 5px; } html[data-op-visual="mineral"] .op-ds input[type="checkbox"]:checked, html[data-op-visual="mineral"] .op-ds input[type="radio"]:checked { background-color: var(--op-act); border-color: transparent; } html[data-op-visual="mineral"] .op-range { height: 6px; } html[data-op-visual="mineral"] .op-range::-webkit-slider-thumb { background: linear-gradient(180deg, color-mix(in srgb, var(--op-act) 88%, #fff), var(--op-act)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-act) 22%, transparent), 0 2px 6px rgba(0, 0, 0, .35); } html[data-op-visual="mineral"] .op-file { border: 1.5px dashed var(--op-edge-hi); border-radius: 16px; background: var(--op-glass); } html[data-op-visual="mineral"] .op-file:hover { border-color: var(--op-act); background: color-mix(in srgb, var(--op-act) 6%, var(--op-glass)); } html[data-op-visual="mineral"] .op-tags { border-radius: 11px; border: 1px solid var(--op-edge); background: var(--op-glass); box-shadow: inset 0 1px 0 var(--op-spec); } html[data-op-visual="mineral"] .op-tag { height: 22px; padding: 0 8px; border-radius: 6px; font: 500 11.5px var(--op-font-ui); background: var(--op-glass-2); color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-tags .op-input { box-shadow: none; min-height: 22px; } html[data-op-visual="mineral"] .op-rating { color: var(--op-warn); } /* =================== 8. INSIGNIAS Y ALERTAS =================== */ html[data-op-visual="mineral"] .op-badge { height: 20px; padding: 0 7px; border-radius: 6px; font: 500 11px var(--op-font-ui); gap: 5px; } html[data-op-visual="mineral"] .op-badge-primary { background: color-mix(in srgb, var(--op-act) 15%, transparent); color: var(--op-act); } html[data-op-visual="mineral"] .op-badge-info { background: color-mix(in srgb, var(--op-data) 15%, transparent); color: var(--op-data); } html[data-op-visual="mineral"] .op-badge-success { background: color-mix(in srgb, var(--op-ok) 15%, transparent); color: var(--op-ok); } html[data-op-visual="mineral"] .op-badge-warning { background: color-mix(in srgb, var(--op-warn) 16%, transparent); color: var(--op-warn); } html[data-op-visual="mineral"] .op-badge-danger { background: color-mix(in srgb, var(--op-bad) 15%, transparent); color: var(--op-bad); } html[data-op-visual="mineral"] .op-badge-gray { background: var(--op-glass-2); color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-badge-dot::before { width: 6px; height: 6px; } html[data-op-visual="mineral"] .op-alert { --op-estado: var(--op-data); position: relative; gap: .75rem; padding: 12px 16px 12px 36px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--op-estado) 35%, transparent); background: color-mix(in srgb, var(--op-estado) 12%, var(--op-glass)); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); color: var(--op-estado); box-shadow: inset 0 1px 0 var(--op-spec); } html[data-op-visual="mineral"] .op-alert::before { content: ""; position: absolute; left: 16px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--op-estado); } html[data-op-visual="mineral"] .op-alert-info { --op-estado: var(--op-data); } html[data-op-visual="mineral"] .op-alert-success { --op-estado: var(--op-ok); } html[data-op-visual="mineral"] .op-alert-warning { --op-estado: var(--op-warn); } html[data-op-visual="mineral"] .op-alert-danger { --op-estado: var(--op-bad); } html[data-op-visual="mineral"] .op-alert strong { font-weight: 600; font-size: 13.5px; } html[data-op-visual="mineral"] .op-alert-body p { opacity: 1; color: var(--op-ink-2); font-size: 13px; } /* =================== 9. PROGRESO, CARGA Y PASOS =================== */ html[data-op-visual="mineral"] .op-progress { height: 6px; background: var(--op-glass-2); box-shadow: inset 0 0 0 1px var(--op-edge); } html[data-op-visual="mineral"] .op-progress-bar { background: var(--op-data); } html[data-op-visual="mineral"] .op-progress-circle { background: conic-gradient(var(--op-data) calc(var(--v) * 1%), var(--op-glass-2) 0); } html[data-op-visual="mineral"] .op-progress-circle > div { background: var(--op-solid); font-family: 'Sora', sans-serif; font-weight: 600; color: var(--op-ink); } html[data-op-visual="mineral"] .op-spinner { border-color: var(--op-glass-2); border-top-color: var(--op-act); } html[data-op-visual="mineral"] .op-spinner-grad { background: conic-gradient(var(--op-act), var(--op-data), transparent); } html[data-op-visual="mineral"] .op-dots span { background: var(--op-act); } html[data-op-visual="mineral"] .op-skeleton { background: linear-gradient(90deg, var(--op-glass) 25%, var(--op-glass-2) 37%, var(--op-glass) 63%); background-size: 800px 100%; } html[data-op-visual="mineral"] .op-step-dot { background: var(--op-glass-2); box-shadow: inset 0 0 0 1px var(--op-edge); font-family: 'Sora', sans-serif; font-weight: 600; color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-step.op-done .op-step-dot, html[data-op-visual="mineral"] .op-step.op-current .op-step-dot { background: linear-gradient(180deg, color-mix(in srgb, var(--op-act) 88%, #fff), var(--op-act)); color: var(--op-on-act); box-shadow: none; } html[data-op-visual="mineral"] .op-step-line { background: var(--op-edge); } html[data-op-visual="mineral"] .op-step.op-done .op-step-line { background: var(--op-act); } /* =================== 10. TARJETAS DE DATOS, AVATARES Y TABLAS =================== */ html[data-op-visual="mineral"] .op-stat { padding: 16px 18px; overflow: hidden; } html[data-op-visual="mineral"] .op-stat-label { opacity: 1; color: var(--op-ink-2); font-size: 12.5px; } html[data-op-visual="mineral"] .op-stat-value, html[data-op-visual="mineral"] .op-kpi-val, html[data-op-visual="mineral"] .op-gauge-val { font-family: 'Sora', sans-serif; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } html[data-op-visual="mineral"] .op-stat-value { font-size: clamp(26px, 2.6vw, 34px); line-height: 1; margin: .45rem 0 .55rem; } html[data-op-visual="mineral"] .op-media-card .op-media-img { background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(160deg, #2A7680, #0D2B30); } html[data-op-visual="mineral"] .op-profile-card { padding: 22px; } html[data-op-visual="mineral"] .op-avatar { background: #2A7680; color: #fff; font: 600 12px var(--op-font-ui); } html[data-op-visual="mineral"] .op-avatar-sm { font-size: 9.5px; } html[data-op-visual="mineral"] .op-avatar-lg { font-size: 18px; } html[data-op-visual="mineral"] .op-avatar-status::after { background: var(--op-ok); border-color: var(--op-bg); } html[data-op-visual="mineral"] .op-avatar-group .op-avatar { border-color: var(--op-bg); } html[data-op-visual="mineral"] .op-table { font-size: 13px; } html[data-op-visual="mineral"] .op-table th { font: 500 11px var(--op-font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: 1; color: var(--op-ink-3); padding: 12px 16px; border-bottom: 1px solid var(--op-edge); } html[data-op-visual="mineral"] .op-table td { padding: 11px 16px; border-bottom: 1px solid var(--op-edge); font-variant-numeric: tabular-nums; } html[data-op-visual="mineral"] .op-table tbody tr:last-child td { border-bottom: 0; } html[data-op-visual="mineral"] .op-table tbody tr:hover { background: var(--op-glass); } html[data-op-visual="mineral"] .op-table-wrap { overflow: hidden; } html[data-op-visual="mineral"] .op-etable tbody tr.op-row-sel { background: color-mix(in srgb, var(--op-act) 12%, transparent); } html[data-op-visual="mineral"] .op-pagesize { opacity: 1; color: var(--op-ink-2); font-size: 12.5px; } html[data-op-visual="mineral"] .op-pagesize select { min-height: 30px; } /* =================== 11. NAVEGACIÓN =================== */ html[data-op-visual="mineral"] .op-tabs { border-bottom: 1px solid var(--op-edge); gap: 2px; } html[data-op-visual="mineral"] .op-tabs button { font: 500 13px var(--op-font-ui); opacity: 1; color: var(--op-ink-2); padding: 9px 12px; } html[data-op-visual="mineral"] .op-tabs button:hover { color: var(--op-ink); } html[data-op-visual="mineral"] .op-tabs button.op-active { color: var(--op-ink); border-bottom-color: var(--op-act); } html[data-op-visual="mineral"] .op-accordion-item { border: 1px solid var(--op-edge); border-radius: 14px; background: var(--op-glass); box-shadow: inset 0 1px 0 var(--op-spec); margin-bottom: 8px; } html[data-op-visual="mineral"] .op-accordion-head { padding: 13px 16px; font-weight: 600; } html[data-op-visual="mineral"] .op-accordion-head:hover { background: var(--op-glass-2); } html[data-op-visual="mineral"] .op-accordion-body { opacity: 1; color: var(--op-ink-2); padding: 0 16px 14px; font-size: 13.5px; } html[data-op-visual="mineral"] .op-breadcrumb { opacity: 1; color: var(--op-ink-2); font-size: 13px; } html[data-op-visual="mineral"] .op-breadcrumb a { color: var(--op-act); } html[data-op-visual="mineral"] .op-breadcrumb .op-sep { opacity: 1; color: var(--op-ink-3); } html[data-op-visual="mineral"] .op-pagination { gap: 4px; } html[data-op-visual="mineral"] .op-pagination button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--op-edge); background: var(--op-glass); color: var(--op-ink); font: 500 12.5px var(--op-font-ui); box-shadow: inset 0 1px 0 var(--op-spec); } html[data-op-visual="mineral"] .op-pagination button:hover { border-color: var(--op-edge-hi); background: var(--op-glass-2); } html[data-op-visual="mineral"] .op-pagination button:disabled { opacity: .4; cursor: not-allowed; } html[data-op-visual="mineral"] .op-pagination button.op-active { background: linear-gradient(180deg, color-mix(in srgb, var(--op-act) 88%, #fff), var(--op-act)); color: var(--op-on-act); border-color: transparent; } html[data-op-visual="mineral"] .op-timeline::before { background: var(--op-edge); width: 1px; left: 6.5px; } html[data-op-visual="mineral"] .op-timeline-item::before { width: 14px; height: 14px; background: var(--op-data); box-shadow: 0 0 0 4px color-mix(in srgb, var(--op-data) 20%, transparent); } /* =================== 12. CARRUSEL Y GALERÍA =================== */ html[data-op-visual="mineral"] .op-carousel { border-radius: 20px; box-shadow: var(--op-shadow); } html[data-op-visual="mineral"] .op-carousel-slide { font-family: 'Sora', sans-serif; font-weight: 600; letter-spacing: -.025em; } html[data-op-visual="mineral"] .op-carousel-nav { background: var(--op-glass-deep); color: var(--op-ink); border: 1px solid var(--op-edge-hi); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 var(--op-spec); } html[data-op-visual="mineral"] .op-gallery-item { border-radius: 12px; } /* =================== 13. GRÁFICOS (doc 16 §11) =================== */ html[data-op-visual="mineral"] .op-chart-bar { border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--op-dato-1), color-mix(in srgb, var(--op-dato-1) 45%, transparent)); } html[data-op-visual="mineral"] .op-chart-legend { font-size: 12px; color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-chart-legend i { border-radius: 2px; width: 12px; height: 3px; } html[data-op-visual="mineral"] .op-donut { background: conic-gradient(var(--op-dato-1) calc(var(--v) * 1%), var(--op-dato-2) calc(var(--v) * 1%) 85%, var(--op-glass-2) 0); } html[data-op-visual="mineral"] .op-donut-hole { background: var(--op-solid); font-weight: 600; color: var(--op-ink); } html[data-op-visual="mineral"] .op-spark path { stroke: var(--op-dato-1); stroke-width: 2; } html[data-op-visual="mineral"] .op-line-chart path.op-stroke { stroke: var(--op-dato-1); stroke-width: 2.2; } html[data-op-visual="mineral"] .op-line-chart path.op-area { opacity: .3; } html[data-op-visual="mineral"] .op-stack-col { border-radius: 6px 6px 0 0; } html[data-op-visual="mineral"] .op-wf-bar { border-radius: 6px; } html[data-op-visual="mineral"] .op-tm-cell { border-radius: 12px; font: 600 12.5px var(--op-font-ui); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } html[data-op-visual="mineral"] .op-scatter { background: var(--op-glass); border-radius: 12px; } html[data-op-visual="mineral"] .op-kpi { padding: 16px 18px; border-radius: 20px; overflow: hidden; } html[data-op-visual="mineral"] .op-kpi-icon { border-radius: 10px; background: color-mix(in srgb, var(--op-data) 15%, transparent); color: var(--op-data); } html[data-op-visual="mineral"] .op-kpi-val { font-size: clamp(26px, 2.6vw, 34px); line-height: 1; margin: .6rem 0 .3rem; } html[data-op-visual="mineral"] .op-kpi-trend { font: 500 12px var(--op-font-mono); } html[data-op-visual="mineral"] .op-kpi-up { color: var(--op-ok); } html[data-op-visual="mineral"] .op-kpi-down { color: var(--op-bad); } html[data-op-visual="mineral"] .op-kpi-spark { opacity: .7; } html[data-op-visual="mineral"] .op-gauge-val { font-size: 1.6rem; } /* =================== 14. KANBAN =================== */ html[data-op-visual="mineral"] .op-kanban { gap: 10px; } html[data-op-visual="mineral"] .op-kb-col { background: var(--op-col); border: 0; border-radius: 14px; padding: 8px; } html[data-op-visual="mineral"] .op-kb-col.op-dragover { background: color-mix(in srgb, var(--op-act) 10%, var(--op-col)); box-shadow: inset 0 0 0 1.5px var(--op-act); } html[data-op-visual="mineral"] .op-kb-colhead { padding: 2px 4px; margin-bottom: 8px; } html[data-op-visual="mineral"] .op-kb-colhead .op-kb-title { font-size: 12.5px; font-weight: 600; } /* Punto de estado de la columna (el :style de Alpine reemplaza el tamaño en línea) */ html[data-op-visual="mineral"] .op-kb-colhead .op-kb-title > span:first-child { width: 9px; height: 9px; border-radius: 50%; flex: none; } html[data-op-visual="mineral"] .op-kb-count { background: none; font: 500 11px var(--op-font-mono); color: var(--op-ink-3); padding: 0; min-width: 0; } html[data-op-visual="mineral"] .op-kb-cards { gap: 8px; } html[data-op-visual="mineral"] .op-kb-card { background: var(--op-glass-2); border: 1px solid var(--op-edge); border-left-color: var(--op-edge) !important; border-left-width: 1px; border-radius: 12px; padding: 10px 12px; box-shadow: inset 0 1px 0 var(--op-spec); transition: transform .18s var(--op-ease), box-shadow .18s, opacity .18s; } html[data-op-visual="mineral"] .op-kb-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--op-spec), var(--op-shadow-sm); } html[data-op-visual="mineral"] .op-kb-card.op-dragging { opacity: .45; transform: none; } html[data-op-visual="mineral"] .op-kb-card .op-kb-cardtitle { font-weight: 500; font-size: 13px; line-height: 1.35; } html[data-op-visual="mineral"] .op-kb-add { border: 1px dashed var(--op-edge-hi); border-radius: 10px; opacity: 1; color: var(--op-ink-3); font: 500 12px var(--op-font-ui); } html[data-op-visual="mineral"] .op-kb-add:hover { border-color: var(--op-act); color: var(--op-act); } html[data-op-visual="mineral"] .op-kb-del:hover { color: var(--op-bad); } /* =================== 15. ORGANIGRAMA =================== */ html[data-op-visual="mineral"] .op-org-tree li::before, html[data-op-visual="mineral"] .op-org-tree li::after, html[data-op-visual="mineral"] .op-org-tree li:last-child::before, html[data-op-visual="mineral"] .op-org-tree ul ul::before { border-color: var(--op-edge-hi); } html[data-op-visual="mineral"] .op-org-node { background: var(--op-glass-2); border: 1px solid var(--op-edge); border-radius: 12px; box-shadow: inset 0 1px 0 var(--op-spec); -webkit-backdrop-filter: blur(16px) saturate(185%); backdrop-filter: blur(16px) saturate(185%); } html[data-op-visual="mineral"] .op-org-node:hover { border-color: var(--op-edge-hi); box-shadow: inset 0 1px 0 var(--op-spec), var(--op-shadow-sm); } html[data-op-visual="mineral"] .op-org-node.op-org-root { background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .28), transparent 55%), linear-gradient(160deg, rgba(226, 129, 79, .82), rgba(150, 66, 34, .70)); color: #FFF8F2; border: 0; } html[data-op-visual="mineral"] .op-org-node .op-org-name { font-weight: 600; } html[data-op-visual="mineral"] .op-org-avatar { background: #2A7680; } html[data-op-visual="mineral"] .op-org-toggle { background: var(--op-glass-2); } html[data-op-visual="mineral"] .op-org-toggle:hover { background: var(--op-glass); } html[data-op-visual="mineral"] .op-org-toggle-root { background: rgba(255, 255, 255, .14); } html[data-op-visual="mineral"] .op-org-count:hover { color: var(--op-act); } /* =================== 16. FLUJO DE OPERACIONES =================== */ html[data-op-visual="mineral"] .op-funnel { gap: 5px; } html[data-op-visual="mineral"] .op-funnel-step { font: 600 12.5px var(--op-font-ui); } html[data-op-visual="mineral"] .op-pipe-step { background: var(--op-glass-2); border: 0; } html[data-op-visual="mineral"] .op-pipe-step.op-pipe-active { background: linear-gradient(180deg, color-mix(in srgb, var(--op-act) 88%, #fff), var(--op-act)); color: var(--op-on-act); } html[data-op-visual="mineral"] .op-pipe-step .op-pipe-n { font: 500 10.5px var(--op-font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; } html[data-op-visual="mineral"] .op-flow-box { background: var(--op-glass-2); border: 1px solid var(--op-edge); border-radius: 12px; font: 500 12.5px var(--op-font-ui); box-shadow: inset 0 1px 0 var(--op-spec); } html[data-op-visual="mineral"] .op-flow-box.op-flow-start { border-color: var(--op-act); color: var(--op-act); } html[data-op-visual="mineral"] .op-flow-box.op-flow-end { background: linear-gradient(180deg, color-mix(in srgb, var(--op-act) 88%, #fff), var(--op-act)); color: var(--op-on-act); border: 0; } html[data-op-visual="mineral"] .op-flow-box.op-flow-decision { background: color-mix(in srgb, var(--op-warn) 18%, var(--op-solid)); color: var(--op-warn); border: 0; box-shadow: none; } html[data-op-visual="mineral"] .op-flow-arrow { color: var(--op-ink-3); opacity: 1; } html[data-op-visual="mineral"] .op-gantt-head { opacity: 1; color: var(--op-ink-3); font: 500 10.5px var(--op-font-mono); letter-spacing: .1em; text-transform: uppercase; } html[data-op-visual="mineral"] .op-gantt-label { opacity: 1; color: var(--op-ink-2); font-size: 13px; } html[data-op-visual="mineral"] .op-gantt-track { background: var(--op-glass); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--op-edge); } html[data-op-visual="mineral"] .op-gantt-bar { background: var(--op-data); color: var(--op-on-data); font: 600 11px var(--op-font-mono); } html[data-op-visual="mineral"] .op-gantt-bar.op-gantt-done { background: var(--op-ok); color: var(--op-on-data); } /* =================== 17. FUNDAMENTOS: contenido propio de cada apariencia =================== */ .op-visual-mineral { display: none; } html[data-op-visual="mineral"] .op-visual-mineral { display: block; } html[data-op-visual="mineral"] .op-visual-clasico { display: none; } html[data-op-visual="mineral"] { --op-hero-radius: 20px; } html[data-op-visual="mineral"] .op-m-pal { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } html[data-op-visual="mineral"] .op-m-chip { overflow: hidden; display: grid; grid-template-rows: 120px auto; padding: 0; } html[data-op-visual="mineral"] .op-m-chip .op-m-c { position: relative; border-radius: 19px 19px 0 0; } html[data-op-visual="mineral"] .op-m-chip .op-m-c span { position: absolute; left: 12px; bottom: 10px; font: 500 11px var(--op-font-mono); color: rgba(255, 255, 255, .88); } html[data-op-visual="mineral"] .op-m-chip > div:last-child { padding: 12px 14px; display: grid; gap: 3px; } html[data-op-visual="mineral"] .op-m-chip b { font: 600 15px 'Sora', sans-serif; } html[data-op-visual="mineral"] .op-m-chip small { font-size: 12.5px; color: var(--op-ink-2); } html[data-op-visual="mineral"] .op-m-ratio { display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin-top: 16px; border: 1px solid var(--op-edge); } html[data-op-visual="mineral"] .op-m-ratio i { display: block; } html[data-op-visual="mineral"] .op-m-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 14px; } html[data-op-visual="mineral"] .op-m-stack { position: relative; height: 240px; border-radius: 16px; overflow: hidden; background: var(--op-bg); } html[data-op-visual="mineral"] .op-m-stack .op-m-blob { position: absolute; border-radius: 50%; filter: blur(30px); animation: op-m-drift 14s ease-in-out infinite alternate; } html[data-op-visual="mineral"] .op-m-stack .op-card { position: absolute; padding: 12px 14px; font-size: 12px; color: var(--op-ink-2); border-radius: 16px; } html[data-op-visual="mineral"] .op-m-big { font: 600 clamp(34px, 4.6vw, 58px)/1 'Sora', sans-serif; letter-spacing: -.045em; } html[data-op-visual="mineral"] .op-m-ramp { display: grid; gap: 8px; } html[data-op-visual="mineral"] .op-m-ramp div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--op-edge); padding-bottom: 8px; } html[data-op-visual="mineral"] .op-m-ramp small { font: 400 11px var(--op-font-mono); color: var(--op-ink-3); white-space: nowrap; } html[data-op-visual="mineral"] .op-m-shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } html[data-op-visual="mineral"] .op-m-shapes .op-card { display: grid; gap: 10px; font-size: 12.5px; color: var(--op-ink-2); align-content: start; } html[data-op-visual="mineral"] .op-m-shapes .op-m-s { height: 54px; border: 1px solid var(--op-edge-hi); background: var(--op-glass-2); } html[data-op-visual="mineral"] .op-m-shapes b { color: var(--op-ink); font-weight: 600; } /* =================== 18. ÓPALO: solo el asistente (doc 16 §6) =================== */ html[data-op-visual="mineral"] .op-opal-bg { background: conic-gradient(from var(--op-a), var(--op-opal)); animation: op-m-spin 8s linear infinite; } html[data-op-visual="mineral"] .op-orb { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 14px var(--op-opal-glow); } html[data-op-visual="mineral"] .op-orb.op-orb-sm { width: 9px; height: 9px; box-shadow: none; } html[data-op-visual="mineral"] .op-opal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2; background: conic-gradient(from var(--op-a), var(--op-opal)); animation: op-m-spin 8s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } @keyframes op-m-spin { to { --op-a: 360deg; } } /* =================== 19. SÓLIDO: reducir transparencia o sin soporte (doc 16 §5) =================== */ @media (prefers-reduced-transparency: reduce) { html[data-op-visual="mineral"] .op-card, html[data-op-visual="mineral"] .op-stat, html[data-op-visual="mineral"] .op-kpi, html[data-op-visual="mineral"] .op-media-card, html[data-op-visual="mineral"] .op-profile-card, html[data-op-visual="mineral"] .op-table-wrap, html[data-op-visual="mineral"] .op-modal, html[data-op-visual="mineral"] .op-drawer, html[data-op-visual="mineral"] .op-popover, html[data-op-visual="mineral"] .op-chart-tip, html[data-op-visual="mineral"] .op-nav, html[data-op-visual="mineral"] .op-alert, html[data-op-visual="mineral"] .fi-sidebar, html[data-op-visual="mineral"] .fi-topbar nav { background: var(--op-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-op-visual="mineral"] { --op-card-solido: var(--op-solid); --op-toast-bg: var(--op-solid); --op-toast-blur: none; } html[data-op-visual="mineral"] .fi-body::before, html[data-op-visual="mineral"] .op-visual-luz { opacity: .3; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-op-visual="mineral"] .op-card, html[data-op-visual="mineral"] .op-stat, html[data-op-visual="mineral"] .op-kpi, html[data-op-visual="mineral"] .op-media-card, html[data-op-visual="mineral"] .op-profile-card, html[data-op-visual="mineral"] .op-table-wrap, html[data-op-visual="mineral"] .op-modal, html[data-op-visual="mineral"] .op-drawer, html[data-op-visual="mineral"] .op-popover, html[data-op-visual="mineral"] .op-chart-tip, html[data-op-visual="mineral"] .fi-sidebar, html[data-op-visual="mineral"] .fi-topbar nav { background: var(--op-solid); } html[data-op-visual="mineral"] { --op-card-solido: var(--op-solid); --op-toast-bg: var(--op-solid); } } /* =================== 20. MOVIMIENTO REDUCIDO =================== */ @media (prefers-reduced-motion: reduce) { html[data-op-visual="mineral"] .fi-body::before, html[data-op-visual="mineral"] .op-opal-bg, html[data-op-visual="mineral"] .op-opal::before, html[data-op-visual="mineral"] .op-m-stack .op-m-blob { animation: none; } html[data-op-visual="mineral"] .op-visual-luz { display: none; } } /* ============================================================ Interruptor de apariencia (barra superior). Visible en ambas apariencias: cada persona previsualiza sin afectar a nadie. ============================================================ */ .op-visual-toggle button { display: inline-flex; align-items: center; gap: .45rem; height: 2.25rem; padding: 0 .75rem; border-radius: .65rem; border: 1px solid rgba(var(--gray-400), .3); background: transparent; font-family: inherit; font-size: .8rem; font-weight: 500; line-height: 1; color: rgb(var(--gray-600)); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .dark .op-visual-toggle button { color: rgb(var(--gray-300)) } .op-visual-toggle button:hover { background: rgba(var(--gray-400), .12) } .op-visual-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--op-gradient); flex: none } @media (max-width: 640px) { .op-visual-toggle .op-visual-label { display: none } }