/* ============================================================================ CONNECTRA · Design Tokens & Base UI Fuente de verdad: Manual de Marca (Operaciones/Diseño/MANUAL DE MARCA) Uso: incluir en TODAS las apps Connectra (vps-manager, connectra-cloud, noc-connectra, wg-manager, dr-manager, starlink-manager, ASOC, etc.) ========================================================================== */ /* ---- Tipografía web oficial: Hanken Grotesk ---- Servir los .ttf desde /static/fonts/ (incluidos en el kit, licencia OFL). */ @font-face{ font-family:"Hanken Grotesk"; src:url("/static/fonts/HankenGrotesk-Variable.ttf") format("truetype-variations"); font-weight:100 900; font-style:normal; font-display:swap; } :root{ /* === PALETA PRINCIPAL (digital / web) ============================ */ --cx-blue: #1B56FD; /* #1 Azul Connectra · color de marca */ --cx-blue-80: #4978FD; /* #4 azul secundario (#1 al 80%) */ --cx-blue-soft: #D1DDFF; /* #2 azul claro (#1 al 20%) */ --cx-blue-tint: #DDE6FF; /* fondo lavanda (paneles claros) */ --cx-ink: #0F172A; /* #5 navy oscuro · fondos/tipografía */ --cx-black: #000000; /* #3 negro */ --cx-gray: #333333; /* #5 impresión · gris texto */ --cx-white: #FFFFFF; /* === COLORES ADICIONALES (acentos, estados) ===================== */ --cx-teal: #0ABAB5; /* A · éxito / activo */ --cx-yellow: #FFD66B; /* B · advertencia */ --cx-coral: #FF6363; /* C · error / crítico */ /* === Equivalentes impresión (sólo referencia) ================== */ --cx-blue-print: #345CA6; /* PANTONE 286 C 78% */ /* === Escala de grises de UI (derivada del navy) ================ */ --cx-bg: #F5F7FC; /* fondo app claro */ --cx-surface: #FFFFFF; /* tarjetas / superficies */ --cx-border: #E2E8F4; /* bordes sutiles */ --cx-text: #0F172A; /* texto principal */ --cx-text-muted: #5B6473; /* texto secundario */ /* === Semánticos ================================================ */ --cx-primary: var(--cx-blue); --cx-success: var(--cx-teal); --cx-warning: var(--cx-yellow); --cx-danger: var(--cx-coral); --cx-info: var(--cx-blue-80); /* === Tipografía ================================================ */ --cx-font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --cx-font-display:"Hanken Grotesk", "Metropolis", system-ui, sans-serif; /* títulos */ /* === Forma / elevación ======================================== */ --cx-radius: 10px; --cx-radius-lg: 16px; --cx-radius-pill: 999px; --cx-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.08); --cx-shadow-lg: 0 8px 40px rgba(15,23,42,.16); --cx-ring: 0 0 0 3px rgba(27,86,253,.30); /* focus */ } /* ---- Tema oscuro (fondos navy/azul) ----------------------------- Aplicar con o .cx-dark en un contenedor. */ [data-cx-theme="dark"], .cx-dark{ --cx-bg: #0F172A; --cx-surface: #16213B; --cx-border: #25304B; --cx-text: #FFFFFF; --cx-text-muted: #9AA6BF; } /* ============================================================================ BASE ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; } body{ margin:0; font-family:var(--cx-font); background:var(--cx-bg); color:var(--cx-text); -webkit-font-smoothing:antialiased; line-height:1.5; } h1,h2,h3,h4,h5{ font-family:var(--cx-font-display); font-weight:800; color:var(--cx-text); letter-spacing:-.01em; margin:.2em 0 .5em; } a{ color:var(--cx-blue); text-decoration:none; } a:hover{ text-decoration:underline; } /* ============================================================================ COMPONENTES ========================================================================== */ /* --- Botones --- */ .cx-btn{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-family:var(--cx-font); font-weight:600; font-size:.95rem; line-height:1; padding:.7rem 1.2rem; border-radius:var(--cx-radius); border:1px solid transparent; transition:filter .15s, box-shadow .15s, background .15s; text-decoration:none; } .cx-btn:focus-visible{ outline:none; box-shadow:var(--cx-ring); } .cx-btn-primary{ background:var(--cx-blue); color:#fff; } .cx-btn-primary:hover{ filter:brightness(1.07); text-decoration:none; } .cx-btn-ghost{ background:transparent; color:var(--cx-blue); border-color:var(--cx-border); } .cx-btn-ghost:hover{ background:var(--cx-blue-tint); text-decoration:none; } .cx-btn-danger{ background:var(--cx-coral); color:#fff; } /* --- Tarjetas / paneles --- */ .cx-card{ background:var(--cx-surface); border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); box-shadow:var(--cx-shadow); padding:1.25rem 1.5rem; } /* --- Badges de estado --- */ .cx-badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600; padding:.25rem .6rem; border-radius:var(--cx-radius-pill); } .cx-badge-ok{ background:rgba(10,186,181,.14); color:#0a8f8b; } .cx-badge-warn{ background:rgba(255,214,107,.22); color:#9a7400; } .cx-badge-err{ background:rgba(255,99,99,.16); color:#d93b3b; } .cx-badge-info{ background:var(--cx-blue-soft); color:var(--cx-blue); } /* --- Inputs --- */ .cx-input{ width:100%; font-family:var(--cx-font); font-size:.95rem; color:var(--cx-text); background:var(--cx-surface); border:1px solid var(--cx-border); border-radius:var(--cx-radius); padding:.6rem .8rem; } .cx-input:focus{ outline:none; border-color:var(--cx-blue); box-shadow:var(--cx-ring); } /* --- Topbar de marca --- */ .cx-topbar{ display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; background:var(--cx-surface); border-bottom:1px solid var(--cx-border); } .cx-topbar .cx-logo-iso{ height:30px; width:auto; } /* ============================================================================ TRAMA (elemento gráfico distintivo) · barras descendentes Usar como banda decorativa en headers/footers/hero. No deformar. Reglas: sólo rotación 90°/180° o reflejo. Mantener anclada a un borde. ========================================================================== */ .cx-trama{ height:160px; background-repeat:repeat-x; background-position:bottom center; background-size:auto 100%; background-image:url("/static/assets/trama-light.svg"); /* sobre fondo claro */ } .cx-dark .cx-trama,[data-cx-theme="dark"] .cx-trama{ background-image:url("/static/assets/trama-dark.svg"); /* sobre navy/azul */ } .cx-hero{ background:var(--cx-ink); color:#fff; position:relative; overflow:hidden; } .cx-hero .cx-trama{ position:absolute; left:0; right:0; bottom:0; }