/* ══════════════════════════════════════════════════════════════════════ MANTO · Tokens de marca (brand board) Debe enlazarse ANTES que el resto de estilos. Todo usa var(--*). Convención de tema de la app: OSCURO por defecto (:root) y CLARO con la clase .light en (la pone/quita el toggle de Configuración). Se exponen dos familias de nombres: · --color-* (nomenclatura del brand board, para componentes nuevos) · --bg/--panel/--text/--accent/… (nombres que ya usa la app: se remapean a los valores de marca para rebrandear sin tocar el HTML) ══════════════════════════════════════════════════════════════════════ */ :root { /* Marca */ --manto-blue:#3B6FFF; --manto-ink:#0A0F1E; --manto-signal:#20D6A6; --manto-amber:#FFB020; --manto-gradient:linear-gradient(135deg,#6C8CFF 0%,#20D6A6 100%); /* Escala azul (primario) */ --blue-50:#EDF2FF; --blue-100:#D8E2FF; --blue-200:#B3C6FF; --blue-300:#8AA5FF; --blue-400:#5C84FF; --blue-500:#3B6FFF; --blue-600:#2C57E6; --blue-700:#1F41B4; --blue-800:#17318C; --blue-900:#122668; /* Verde "signal" (operativo) */ --signal-50:#E6FBF4; --signal-100:#C2F5E6; --signal-200:#8DEBD1; --signal-300:#52DEB9; --signal-400:#2ED8AB; --signal-500:#20D6A6; --signal-600:#0E9E7A; --signal-700:#0B7D61; /* Ámbar (aviso / preventivo) */ --amber-50:#FFF6E5; --amber-100:#FFE9BF; --amber-200:#FFD68A; --amber-300:#FFC24D; --amber-400:#FFBE33; --amber-500:#FFB020; --amber-600:#E6960A; --amber-700:#B26B00; /* Rojo (avería / correctivo) */ --danger-50:#FFECEC; --danger-100:#FFD3D3; --danger-200:#FFB3B3; --danger-300:#FF9B9B; --danger-400:#FF7A7A; --danger-500:#FF5D5D; --danger-600:#E23B3B; --danger-700:#B42626; /* Neutros (slate) */ --slate-50:#F4F6FB; --slate-100:#E9EDF6; --slate-200:#C3CBDD; --slate-300:#9AA6BF; --slate-400:#6B7A9E; --slate-500:#4A597F; --slate-600:#2A3861; --slate-700:#1E294A; --slate-800:#141D34; --slate-900:#0F1629; --slate-950:#0A0F1E; /* ===== Semánticos — OSCURO (tema por defecto de la app) ===== */ --color-bg:#0A0F1E; --color-surface:#0F1629; --color-surface-2:#141D34; --color-border:rgba(255,255,255,.09); --color-text:#E9EDF6; --color-text-muted:#9AA6BF; --color-primary:#3B6FFF; --color-primary-hover:#5C84FF; --color-on-primary:#FFFFFF; --color-success:#20D6A6; --color-success-bg:rgba(32,214,166,.12); --color-warning:#FFB020; --color-warning-bg:rgba(255,176,32,.12); --color-danger:#FF6B6B; --color-danger-bg:rgba(255,107,107,.12); --color-info:#6C8CFF; --color-info-bg:rgba(59,111,255,.12); /* Violeta de marca "obra menor / presupuesto" (único: CSS y JS lo comparten). */ --color-om:#B794FF; --color-om-bg:rgba(139,92,246,.13); --color-focus:#6C8CFF; --status-operativo:#20D6A6; --status-preventivo:#FFB020; --status-correctivo:#FF6B6B; --status-parado:#9AA6BF; /* ===== Alias a los nombres que ya usa la app (OSCURO) ===== */ --bg:#0A0F1E; --panel:#0F1629; --border:rgba(255,255,255,.09); --text:#E9EDF6; --text2:#C3CBDD; --muted:#9AA6BF; --muted2:#6B7A9E; --input-bg:#141D34; --input-border:#1E294A; --accent:#3B6FFF; --accent2:#6C8CFF; --tab-text:#9AA6BF; --tab-on-bg:rgba(59,111,255,.20); --tab-on-text:#D8E2FF; --ico-bg:rgba(59,111,255,.14); --ico-border:rgba(59,111,255,.32); --chip-bg:#141D34; --chip-border:#1E294A; --chip-text:#9AA6BF; --shadow:rgba(0,0,0,.45); /* Pill de importe (dinero) en las cards: verde con contraste, distinto del nº. */ --imp-fg:#34E3B0; --imp-bg:rgba(32,214,166,.14); --imp-bd:rgba(32,214,166,.42); } /* ===== Semánticos + alias — CLARO (.light en ) ===== */ html.light { --color-bg:#F4F6FB; --color-surface:#FFFFFF; --color-surface-2:#EDF1F8; --color-border:#DCE3EF; --color-text:#0A0F1E; --color-text-muted:#5B678A; --color-primary:#3B6FFF; --color-primary-hover:#2C57E6; --color-on-primary:#FFFFFF; --color-success:#0E9E7A; --color-success-bg:#E6FBF4; --color-warning:#B26B00; --color-warning-bg:#FFF6E5; --color-danger:#E23B3B; --color-danger-bg:#FFECEC; --color-info:#2C57E6; --color-info-bg:#EDF2FF; --color-om:#6D28D9; --color-om-bg:#F1EBFF; --color-focus:#3B6FFF; --status-operativo:#0E9E7A; --status-preventivo:#B26B00; --status-correctivo:#E23B3B; --status-parado:#6B7A9E; --bg:#F4F6FB; --panel:#FFFFFF; --border:#DCE3EF; --text:#0A0F1E; --text2:#1E294A; --muted:#5B678A; /* #9AA6BF daba 2.45:1 sobre blanco (placeholders y hints casi invisibles); #6B7A9E llega a 4.2:1 manteniendo el papel de "texto terciario". */ --muted2:#6B7A9E; --input-bg:#FFFFFF; --input-border:#C3CBDD; --accent:#3B6FFF; --accent2:#2C57E6; --tab-text:#5B678A; --tab-on-bg:#EDF2FF; --tab-on-text:#1F41B4; --ico-bg:#EDF2FF; --ico-border:#D8E2FF; --chip-bg:#EDF1F8; --chip-border:#DCE3EF; --chip-text:#4A597F; --shadow:rgba(15,23,42,.14); /* Pill de importe (dinero) — CLARO: verde oscuro legible sobre fondo claro. */ --imp-fg:#0B8E6C; --imp-bg:#E6FBF4; --imp-bd:rgba(14,158,122,.38); }