/* ════════════════════════════════════════════════════════════════════════ design-system.css — Sistema visual Rava + LMM (manual de marca v1.3) Portado de admin.rava.com/manual-de-marca/DESIGN-SYSTEM.md SOLO se carga en /test (vía $page_css). Autosuficiente: NO depende de custom-rava.css ni materialize.css. PUENTE DARK MODE: producción togglea `html.dark` (localStorage 'dark' + cookie ravaTheme). El manual usa [data-brand=rava][data-theme=dark]. Acá los scopes dark se reescriben a `html.dark[data-brand=rava]` para que el toggle EXISTENTE active el dark del manual sin JS nuevo. ════════════════════════════════════════════════════════════════════════ */ /* ── Fuentes self-host (variables, subset latin → cubre español) ────────── */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/PlusJakartaSans-latin-var.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/Lora-latin-var.woff2') format('woff2'); } /* ════════════════════════ TOKENS ════════════════════════ */ :root { --bg-page: #FFFFFF; --bg-card: #FAFAFA; /* card sutil / feature block */ --bg-card-elevated: #F5F5F5; /* info-blocks, bloques importantes */ --text-body: #1D1D1B; /* se sobrescribe en scope LMM */ --text-secondary: #666666; --border-color: #e3e3e3; } /* RAVA · light (default). data-brand="rava" lo pone layout-test en . */ [data-brand="rava"] { --brand-primario: #005685; --brand-primario-osc: #003D5C; --brand-primario-glow: rgba(0, 86, 133, 0.40); --brand-primario-text: #FFFFFF; --brand-secundario: #1C2E4A; --brand-secundario-2: #0B2F55; --brand-acento: #84683F; --brand-acento-osc: #2E2212; --brand-acento-osc-deep:#241A0C; --brand-acento-claro: #DCEAF5; --brand-acento-text: #FFFFFF; --brand-acento-glow: rgba(132, 104, 63, 0.40); --topic-pill-text: #003D5C; --link-color: #003D5C; --link-color-hover: #001E2E; /* tabla — light */ --table-bg: #ffffff; --table-header-bg: #ebebeb; --table-header-text: #666666; --table-row-alt: #f3f3f3; --table-row-hover: #e7e7e7; --table-row-selected: #DCEAF5; --table-text: #1a1a1a; --table-border: #dcdcdc; --positivo: #15803d; --negativo: #b91c1c; } /* LMM · scope para el bloque "La mañana del mercado" (verde, sin azules) */ [data-brand="lmm"] { --brand-primario: #00BD8B; --brand-primario-text: #0A0A0A; --brand-primario-glow: rgba(0, 189, 139, 0.40); --brand-secundario: #007153; --brand-acento: #00BD8B; --brand-acento-osc: #005E45; --brand-acento-osc-deep:#003F2D; --brand-acento-claro: #A8E6D0; --brand-acento-text: #0A0A0A; --brand-acento-glow: rgba(0, 189, 139, 0.40); --topic-pill-text: #005E45; --link-color: #005E45; --link-color-hover: #004A37; --text-body: #3A3A3A; } /* RAVA · dark — PUENTE: producción usa html.dark, no [data-theme=dark]. Tokens del manual §9.1 reescritos al selector real. */ html.dark[data-brand="rava"] { --bg-page: #111111; --bg-card: #1a1a1a; --bg-card-elevated: #222222; --text-body: #e0e0e0; --text-secondary: #888888; --border-color: #2a2a2a; --brand-primario: #5B9DD0; --brand-primario-osc: #7AB8E0; --brand-primario-glow: rgba(91, 157, 208, 0.45); --brand-primario-text: #0A0A0A; --brand-secundario: #4A7DB0; --brand-acento: #B89B74; --brand-acento-osc: #84683F; --brand-acento-claro: #15293C; --brand-acento-text: #0A0A0A; --brand-acento-glow: rgba(184, 155, 116, 0.50); --topic-pill-text: #e0e0e0; --link-color: #7AB8E0; --link-color-hover: #A8D0EE; /* tabla — dark */ --table-bg: #1a1a1a; --table-header-bg: #222222; --table-header-text: #888888; --table-row-alt: rgba(255, 255, 255, 0.06); --table-row-hover: #2d2d2d; --table-row-selected: #15293C; --table-text: #e0e0e0; --table-border: #2a2a2a; --positivo: #22c55e; --negativo: #ef4444; } /* ════════════════════ TIPOGRAFÍA BASE (page-wide en /test) ════════════════════ */ body.brand-test { margin: 0; background: var(--bg-page); color: var(--text-body); font-family: 'Lora', Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.brand-test h1, body.brand-test h2, body.brand-test h3, body.brand-test h4 { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--brand-secundario); margin: 0 0 0.5em; line-height: 1.2; } body.brand-test h1 { font-size: 36px; font-weight: 800; } body.brand-test h2 { font-size: 24px; font-weight: 800; } body.brand-test h3 { font-size: 18px; font-weight: 700; } /* Links de contenido — solo .rich-text / .cta-tertiary (manual §4.3), NUNCA a{} global */ .rich-text a, .cta-tertiary { color: var(--link-color); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } .rich-text a:hover, .cta-tertiary:hover { color: var(--link-color-hover); text-decoration-thickness: 3px; } .rich-text a:focus-visible, .cta-tertiary:focus-visible { outline: 2px solid var(--brand-acento); outline-offset: 2px; } /* ════════════════════════ COMPONENTES ════════════════════════ */ /* ── CTA primario destacado · Bronce (manual §4.1) ── */ .cta-primary, a.cta-primary, a.cta-primary:link, a.cta-primary:visited, a.cta-primary:hover, a.cta-primary:active { display: inline-block; background: var(--brand-acento); color: var(--brand-acento-text) !important; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; text-decoration: none !important; padding: 18px 44px; border-radius: 50px; letter-spacing: 0.5px; margin: 8px 0; box-shadow: 0 6px 20px var(--brand-acento-glow); transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; border: none; } .cta-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--brand-acento-glow); } .cta-primary:focus-visible { outline: 3px solid var(--brand-primario); outline-offset: 3px; } .cta-primary:active { transform: translateY(1px); } .cta-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; } /* ── CTA primario default · Azul (manual §4.1) ── */ .cta-primary-blue, a.cta-primary-blue, a.cta-primary-blue:link, a.cta-primary-blue:visited, a.cta-primary-blue:hover, a.cta-primary-blue:active { display: inline-block; background: var(--brand-primario); color: var(--brand-primario-text) !important; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; text-decoration: none !important; padding: 18px 44px; border-radius: 50px; letter-spacing: 0.5px; margin: 8px 0; box-shadow: 0 6px 20px var(--brand-primario-glow); transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; border: none; } .cta-primary-blue:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--brand-primario-glow); } .cta-primary-blue:focus-visible { outline: 3px solid var(--brand-acento); outline-offset: 3px; } .cta-primary-blue:active { transform: translateY(1px); } /* ── CTA secundario · Pill estándar (manual §4.2) ── */ .cta-secondary { display: inline-block; background: var(--brand-acento); color: var(--brand-acento-text); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15px; text-decoration: none; padding: 15px 36px; border-radius: 50px; letter-spacing: 0.5px; margin: 8px 0; cursor: pointer; border: none; } .cta-secondary:hover { filter: brightness(0.96); } .cta-secondary:focus-visible { outline: 2px solid var(--brand-acento); outline-offset: 2px; } .cta-secondary:active { transform: translateY(1px); } /* ── Topic pills / chips (manual §5) ── */ .topic-pill { display: inline-block; background: var(--brand-acento-claro); color: var(--topic-pill-text); font-family: 'Lora', Georgia, serif; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 50px; margin: 4px; } html.dark .topic-pill { color: var(--text-primary, #e0e0e0); } .topic-pill:focus-visible { outline: 2px solid var(--brand-acento); outline-offset: 2px; } /* ── Feature blocks / cards (manual §6) ── */ .feature { background: var(--bg-card); border-left: 3px solid var(--brand-acento); padding: 16px 20px; margin: 14px 0; } .feature .title { color: var(--brand-secundario); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; margin: 0 0 6px; } .feature .desc { color: var(--text-body); font-family: 'Lora', Georgia, serif; font-size: 15px; line-height: 1.55; margin: 0; } /* ── Iconos Lucide (manual §12.1) ── */ .icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; } .icon--xs { width: 14px; height: 14px; } .icon--sm { width: 16px; height: 16px; } .icon--md { width: 20px; height: 20px; } .icon--lg { width: 24px; height: 24px; } .icon--xl { width: 32px; height: 32px; } /* ── Tabla de cotizaciones (manual §7) ── */ .tabla-cotizaciones { width: 100%; background: var(--table-bg); overflow-x: auto; } .tabla-cotizaciones table { margin: 0; width: 100%; font-size: 14px; font-family: 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; table-layout: fixed; border-collapse: collapse; } .tabla-cotizaciones thead th { background: var(--table-header-bg); color: var(--table-header-text); font-size: 12px; font-weight: 700; text-align: right; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 6px; border-bottom: 1px solid var(--table-border); } .tabla-cotizaciones th:first-of-type, .tabla-cotizaciones td:first-of-type { text-align: left; padding-left: 10px; } .tabla-cotizaciones th:last-of-type, .tabla-cotizaciones td:last-of-type { padding-right: 10px; } .tabla-cotizaciones tr { border-bottom: none; } /* manual §7: SIN borde entre filas (solo zebra). Reset explícito: Materialize (CSS global del sitio) pone tr{border-bottom:1px solid rgba(0,0,0,.12)} */ html.dark .tabla-cotizaciones tbody tr:nth-child(odd) { background: transparent; } /* dark: custom-rava (.dark table tr:nth-child(odd)) tinta las filas impares al 3% y lava el zebra — con este reset las impares quedan limpias y el zebra lo da solo --table-row-alt */ .tabla-cotizaciones tbody td { padding: 4px 6px; text-align: right; color: var(--table-text); border: none; } .tabla-cotizaciones tbody td:first-of-type { font-weight: 700; } .tabla-cotizaciones tbody td:first-of-type a { color: var(--link-color); text-decoration: none; } .tabla-cotizaciones tbody td:first-of-type a:hover { text-decoration: underline; } .tabla-cotizaciones tbody tr:nth-child(even) { background: var(--table-row-alt); } .tabla-cotizaciones tbody tr:hover { background: var(--table-row-hover); cursor: pointer; } .tabla-cotizaciones tbody tr:focus-within { outline: 2px solid var(--brand-primario); outline-offset: -2px; } /* Colores semánticos — doble selector para ganar especificidad (manual §7.2) */ .positivo, .tabla-cotizaciones td.positivo, .tabla-cotizaciones tbody td.positivo { color: var(--positivo); font-weight: 600; } .negativo, .tabla-cotizaciones td.negativo, .tabla-cotizaciones tbody td.negativo { color: var(--negativo); font-weight: 600; } @media (max-width: 767px) { .tabla-cotizaciones table { font-size: 12px; } .tabla-cotizaciones th.ocultar, .tabla-cotizaciones td.ocultar { display: none; } } @media (min-width: 1400px) { .tabla-cotizaciones table { font-size: 15px; } } /* ── Lockup co-brand LMM / RAVA (manual §11) ── */ .lockup--horizontal { display: inline-flex; align-items: center; gap: 14px; vertical-align: middle; } .lockup__primary { height: 32px; width: auto; } .lockup__divider { width: 1px; height: 28px; background: var(--border-color); } .lockup__secondary { display: flex; flex-direction: column; gap: 1px; } .lockup__prep { font: 400 9px/1 'Lora', serif; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-secondary); } .lockup__brand { font: 700 14px/1.1 'Plus Jakarta Sans', sans-serif; color: #005685; /* azul RAVA literal: dentro de scope LMM, --brand-primario sería verde (manual §11.4) */ } html.dark .lockup__brand { color: #5B9DD0; } /* ── Respeta prefers-reduced-motion (manual §4.1) ── */ @media (prefers-reduced-motion: reduce) { .cta-primary, .cta-primary-blue, .cta-secondary { transition: none; } .cta-primary:hover, .cta-primary-blue:hover, .cta-primary:active, .cta-primary-blue:active, .cta-secondary:active { transform: none; } }