/* ============================================================ OTIKA DESIGN SYSTEM — tema claro/oscuro premium Marca: OTIKA Óptica (Bucaramanga, CO) Acentos: cian #00f0ff · amarillo #ffe500 Tipografías: Syne (display) + Space Grotesk (texto) Uso: este archivo, pon class="otika" en o . Tema oscuro: Tema claro: (default) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap'); .otika { /* ---- Marca (constantes a ambos temas) ---- */ --otk-cyan: #00d8e8; /* cian de marca, ajustado para contraste en claro */ --otk-cyan-bright: #00f0ff; /* cian puro para glows/realces (no para texto en claro) */ --otk-cyan-deep: #0891a8; /* cian oscuro para texto/links sobre fondo claro */ --otk-yellow: #ffe500; --otk-yellow-deep: #b59a00; /* ---- Tipografía ---- */ --otk-font-display: 'Syne', system-ui, sans-serif; --otk-font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif; /* ---- Escala de espaciado (4px base) ---- */ --otk-sp-1: 4px; --otk-sp-2: 8px; --otk-sp-3: 12px; --otk-sp-4: 16px; --otk-sp-5: 24px; --otk-sp-6: 32px; --otk-sp-7: 48px; --otk-sp-8: 64px; /* ---- Radios ---- */ --otk-r-sm: 8px; --otk-r-md: 12px; --otk-r-lg: 16px; --otk-r-xl: 22px; --otk-r-pill: 999px; /* ---- Contenedor ---- */ --otk-maxw: 1200px; } /* ===================== TEMA CLARO (default, premium B2B) ===================== */ .otika, .otika[data-theme="light"] { --otk-bg: #f4f7fb; /* fondo de página */ --otk-bg-soft: #eef2f8; /* zonas hundidas */ --otk-surface: #ffffff; /* cards */ --otk-surface-2: #f8fafd; /* card secundaria / hover */ --otk-text: #0b1220; /* texto principal */ --otk-text-dim: #5a6b85; /* texto secundario */ --otk-text-soft: #8a99b3; /* hints */ --otk-border: rgba(13,36,71,.10); --otk-border-2: rgba(13,36,71,.18); --otk-accent: var(--otk-cyan-deep); --otk-accent-bg: rgba(0,184,212,.10); --otk-shadow: 0 1px 2px rgba(13,36,71,.04), 0 8px 24px rgba(13,36,71,.06); --otk-shadow-lg: 0 4px 12px rgba(13,36,71,.08), 0 24px 48px rgba(13,36,71,.10); --otk-glow: 0 0 0 4px rgba(0,184,212,.12); /* Estados de salud / semánticos (contraste sobre claro) */ --otk-ok: #16a34a; --otk-ok-bg: #e7f6ec; --otk-warn: #d97706; --otk-warn-bg: #fdf0dc; --otk-bad: #dc2626; --otk-bad-bg: #fbe9e9; --otk-info: var(--otk-cyan-deep); --otk-info-bg: rgba(0,184,212,.10); } /* ===================== TEMA OSCURO (futurista, coherente con cotizador) ===================== */ .otika[data-theme="dark"] { --otk-bg: #050810; --otk-bg-soft: #0a0e1a; --otk-surface: rgba(255,255,255,.045); --otk-surface-2: rgba(255,255,255,.07); --otk-text: #eaf2ff; --otk-text-dim: #8b9bb5; --otk-text-soft: #5f7090; --otk-border: rgba(120,200,255,.16); --otk-border-2: rgba(120,200,255,.28); --otk-accent: var(--otk-cyan-bright); --otk-accent-bg: rgba(0,240,255,.10); --otk-shadow: 0 8px 30px rgba(0,0,0,.45); --otk-shadow-lg: 0 20px 60px rgba(0,0,0,.55); --otk-glow: 0 0 22px rgba(0,240,255,.35); --otk-ok: #4ade80; --otk-ok-bg: rgba(74,222,128,.12); --otk-warn: #fbbf24; --otk-warn-bg: rgba(251,191,36,.12); --otk-bad: #ff6b81; --otk-bad-bg: rgba(255,107,129,.12); --otk-info: var(--otk-cyan-bright); --otk-info-bg: rgba(0,240,255,.12); } /* ===================== BASE ===================== */ .otika, .otika body { background: var(--otk-bg); color: var(--otk-text); font-family: var(--otk-font-body); -webkit-font-smoothing: antialiased; } .otika ::selection { background: var(--otk-cyan); color: #001018; } .otika h1,.otika h2,.otika h3,.otika .otk-display { font-family: var(--otk-font-display); font-weight: 700; letter-spacing: -.01em; color: var(--otk-text); margin: 0; } .otika h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; } .otika h2 { font-size: clamp(20px, 3vw, 26px); } .otika h3 { font-size: 18px; } .otika .otk-container { max-width: var(--otk-maxw); margin: 0 auto; padding: 0 var(--otk-sp-5); } /* ===================== CARD / GLASS ===================== */ .otika .otk-card { background: var(--otk-surface); border: 1px solid var(--otk-border); border-radius: var(--otk-r-lg); box-shadow: var(--otk-shadow); padding: var(--otk-sp-5); } .otika[data-theme="dark"] .otk-card { backdrop-filter: blur(14px); } .otika .otk-card--accent { border-top: 3px solid var(--otk-cyan); } /* ===================== KPI / MÉTRICA ===================== */ .otika .otk-kpi { background: var(--otk-surface); border: 1px solid var(--otk-border); border-radius: var(--otk-r-md); padding: var(--otk-sp-4) var(--otk-sp-5); } .otika .otk-kpi__label { font-size: 13px; color: var(--otk-text-dim); margin: 0 0 6px; } .otika .otk-kpi__value { font-family: var(--otk-font-display); font-size: 30px; font-weight: 700; line-height: 1; margin: 0; } .otika .otk-kpi__sub { font-size: 12px; color: var(--otk-text-soft); margin: 4px 0 0; } /* ===================== BADGES / ESTADOS DE SALUD ===================== */ .otika .otk-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: var(--otk-r-pill); line-height: 1.4; } .otika .otk-badge--ok { background: var(--otk-ok-bg); color: var(--otk-ok); } .otika .otk-badge--warn { background: var(--otk-warn-bg); color: var(--otk-warn); } .otika .otk-badge--bad { background: var(--otk-bad-bg); color: var(--otk-bad); } .otika .otk-badge--info { background: var(--otk-info-bg); color: var(--otk-info); } .otika .otk-badge--mute { background: var(--otk-bg-soft); color: var(--otk-text-dim); } /* ===================== BOTONES ===================== */ .otika .otk-btn { font-family: var(--otk-font-body); font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: var(--otk-r-sm); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .15s ease; } .otika .otk-btn--primary { background: var(--otk-cyan); color: #00181c; box-shadow: var(--otk-shadow); } .otika .otk-btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); } .otika .otk-btn--accent { background: var(--otk-yellow); color: #2a2400; font-weight: 700; } .otika .otk-btn--ghost { background: transparent; color: var(--otk-text); border-color: var(--otk-border-2); } .otika .otk-btn--ghost:hover { background: var(--otk-surface-2); } /* ===================== FORM / INPUT ===================== */ .otika .otk-field { display: block; margin-bottom: var(--otk-sp-4); } .otika .otk-label { display: block; font-size: 13px; font-weight: 500; color: var(--otk-text-dim); margin-bottom: 6px; } .otika .otk-input, .otika .otk-select { width: 100%; height: 44px; padding: 0 14px; font-family: var(--otk-font-body); font-size: 15px; color: var(--otk-text); background: var(--otk-surface); border: 1px solid var(--otk-border-2); border-radius: var(--otk-r-sm); transition: border-color .15s, box-shadow .15s; } .otika .otk-input:focus, .otika .otk-select:focus { outline: none; border-color: var(--otk-cyan); box-shadow: var(--otk-glow); } /* ===================== TABLA DE DATOS ===================== */ .otika .otk-table { width: 100%; border-collapse: collapse; font-size: 14px; } .otika .otk-table th { text-align: left; font-family: var(--otk-font-body); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--otk-text-dim); padding: 12px 14px; border-bottom: 1px solid var(--otk-border-2); } .otika .otk-table td { padding: 13px 14px; border-bottom: 1px solid var(--otk-border); color: var(--otk-text); } .otika .otk-table tbody tr:hover { background: var(--otk-surface-2); } .otika .otk-table .otk-num { text-align: right; font-variant-numeric: tabular-nums; } /* ===================== TOGGLE DE TEMA ===================== */ .otika .otk-theme-toggle { width: 40px; height: 40px; border-radius: var(--otk-r-pill); border: 1px solid var(--otk-border-2); background: var(--otk-surface); color: var(--otk-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* ===================== UTILIDADES ===================== */ .otika .otk-grid { display: grid; gap: var(--otk-sp-4); } .otika .otk-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .otika .otk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .otika .otk-dim { color: var(--otk-text-dim); } .otika .otk-hairline { height: 1px; background: var(--otk-border); border: 0; margin: var(--otk-sp-5) 0; }