/* ============================================================ Vértice — tokens de identidad visual Pegar en el o en el CSS principal de la app. Cada color tiene UN rol. No se intercambian. ============================================================ */ :root { /* Fondos */ --v-bg: #081228; /* fondo de página, siempre navy */ --v-surface: #0C1D3D; /* tarjetas y contenedores */ --v-surface-raised: #12294F; /* modales, elementos sobre tarjetas */ /* La firma: dorado = lo dicho, teal = lo hecho. NUNCA al revés. */ --v-dicho: #C9A227; --v-dicho-soft: rgba(201, 162, 39, 0.12); --v-dicho-border: rgba(201, 162, 39, 0.3); --v-hecho: #5FBCB2; --v-hecho-soft: rgba(95, 188, 178, 0.14); --v-hecho-border: rgba(95, 188, 178, 0.3); /* Texto */ --v-text: #ffffff; /* títulos y números clave */ --v-text-body: #D3E0F5; /* cuerpo */ --v-text-secondary: #AFC0DD; --v-text-muted: #8598BC; /* etiquetas, metadatos */ /* Alerta — SOLO para errores de formulario. Nunca para "malos" resultados del usuario: un score bajo no es un error, es un dato. */ --v-alert: #e0847d; /* Tipografía */ --v-font-display: 'Fraunces', Georgia, serif; --v-font-ui: 'Inter', system-ui, -apple-system, sans-serif; /* Forma */ --v-radius-card: 4px; --v-radius-control: 3px; --v-border: 0.5px solid var(--v-dicho-border); } /* Reglas de uso ---------------------------------------------------------- 1. Fraunces itálica SOLO para: nombres de arquetipo (itálica), titulares de pantalla, y los dos números de una brecha. Nunca para cuerpo de texto ni para datos en tablas. 2. Los datos del usuario (porcentajes, conteos) van SIEMPRE en la fuente sans — el dato es sobrio, el arquetipo es la voz. 3. Etiquetas de sección: 11px, mayúsculas, letter-spacing 0.05em, color --v-text-muted. Es el único uso de mayúsculas permitido. 4. Un solo botón dorado (primario) por pantalla. El resto, transparente con borde --v-dicho-border. 5. Componente "brecha": número dorado a la izquierda, línea con degradado dorado→teal, número teal a la derecha. Es el único degradado permitido en toda la interfaz. ---------------------------------------------------------- */ .v-label { font-family: var(--v-font-ui); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--v-text-muted); } .v-archetype { font-family: var(--v-font-display); font-style: italic; font-weight: 600; color: var(--v-dicho); } .v-card { background: var(--v-surface); border: var(--v-border); border-radius: var(--v-radius-card); padding: 1rem 1.1rem; } .v-btn-primary { background: var(--v-dicho); color: var(--v-bg); border: none; font-weight: 600; padding: 11px; border-radius: var(--v-radius-control); width: 100%; } .v-btn-secondary { background: transparent; color: var(--v-text-body); border: 0.5px solid rgba(201, 162, 39, 0.35); padding: 11px; border-radius: var(--v-radius-control); width: 100%; } .v-gap { display: flex; align-items: center; gap: 8px; } .v-gap .dicho { font-family: var(--v-font-display); font-size: 18px; color: var(--v-dicho); } .v-gap .line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--v-dicho), var(--v-hecho)); } .v-gap .hecho { font-family: var(--v-font-display); font-size: 18px; color: var(--v-hecho); }