/* ========================================================= CARMON — TEMA DE MARCA (Providence / Jarvis SaaS) Fuente de verdad: DESIGN.md (raíz) · gemelo de carmon-rrhh. Claro por defecto · oscuro vía :root[data-theme="dark"]. Oscuro es el default de primera visita (lo fija el script anti-FOUC del ). El dorado es constante en ambos temas; el texto sobre dorado SIEMPRE es --ink (#101010): blanco sobre dorado FALLA AA (A1). Esta hoja se carga LA PRIMERA en cada página; define los tokens canónicos que el resto del CSS consume vía el puente de cada :root. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;500;600;700;800;900&display=swap'); /* Iconografía de marca: Phosphor Icons (line "regular" + "fill" para estados activos) — mismo set que carmon-rrhh */ @import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css'); @import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css'); :root { /* ---- Marca (independiente del tema) ---- */ --gold: #E1B551; --gold-strong: #C9982F; --gold-light: #F7DE69; --gold-tint: rgba(225, 181, 81, 0.18); --gold-tint-2: rgba(225, 181, 81, 0.32); --ink: #101010; /* texto sobre dorado */ --coral: #E85F54; /* ---- Tipografía (Kumbh Sans en todo — DESIGN.md §3.2/§9.3) ---- */ --sans: "Kumbh Sans", Arial, Helvetica, sans-serif; --serif: "Kumbh Sans", Georgia, serif; /* no hay serif de marca: Kumbh en todo */ --font: var(--sans); --font-serif: var(--serif); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---- Semánticos · CLARO (por defecto) ---- */ --app-bg: #F4F1EA; /* lienzo crema cálido */ --surface: #FFFFFF; /* tarjetas */ --surface-muted: #F7F5F0; /* secciones alternas */ --surface-sunken:#EDE9E0; /* tracks / fondos hundidos */ --surface-hover: #F1EEE6; --text-primary: #37465A; /* cuerpo (slate) */ --text-heading: #3A4150; /* titulares */ --text-strong: #1A2030; /* énfasis máximo (no negro puro) */ /* #6B7688 solo pasaba AA sobre el blanco puro (4.59:1); sobre el resto de superficies claras (--surface-hover, --app-bg, --surface-sunken) caía a 3.8–4.2:1. Este tono es el mismo slate un 10% más oscuro y pasa AA en las CINCO superficies claras (peor caso 4.51:1 sobre --surface-sunken). */ --text-muted: #606A7A; /* --text-dim es DECORATIVO (2.6:1 sobre blanco): no usar para texto pequeño. */ --text-dim: #97A0AE; --text-inverse: #FFFFFF; --text-on-accent:#101010; /* SIEMPRE ink sobre dorado */ --border: #E7E3D9; /* divisor sutil cálido */ --border-strong: #D6D1C5; /* hover / énfasis */ --border-cool: #C2C9D2; /* inputs */ --outline: #4D4D4D; /* outline botón secundario */ --focus-ring: rgba(55, 70, 90, 0.55); --hover-overlay: rgba(16, 16, 16, 0.045); --press-overlay: rgba(16, 16, 16, 0.08); /* Lavado translúcido SOBRE una superficie de ACENTO (cabecera dorada, chip activo, avatar de color). Es blanco A PROPÓSITO y es igual en los dos temas, porque el fondo sobre el que se apoya tampoco cambia con el tema. ⚠️ NO sustituir por --surface-hover ni por ningún token de superficie: eso pinta un parche oscuro sobre el dorado (y deja invisible el icono blanco). */ --on-accent-wash: rgba(255, 255, 255, 0.18); --on-accent-wash-strong: rgba(255, 255, 255, 0.32); /* Variante OSCURA del mismo concepto: una sombra sobre el acento claro (dorado). Igual en ambos temas por el mismo motivo. */ --on-accent-shade: rgba(16, 16, 16, 0.12); --on-accent-shade-strong: rgba(16, 16, 16, 0.22); /* ---- Estados (armonizados, desaturados) ---- */ --success: #1E9E6A; --success-tint: rgba(30, 158, 106, 0.14); --danger: #CB4338; --danger-tint: rgba(203, 67, 56, 0.13); --warning: #C9982F; --warning-tint: rgba(201, 152, 47, 0.16); --info: #37465A; --info-tint: rgba(55, 70, 90, 0.10); --neutral: #6B7688; --neutral-tint: rgba(55, 70, 90, 0.08); /* Texto sobre el tinte del propio estado (chips/badges). El color base (--success…) sobre su tinte solo da ~3:1 en claro: FALLA AA para texto pequeño. Estos tonos están calculados para superar 4.5:1 en ambos temas. */ --success-ink: #0F6B47; --success-line: rgba(30, 158, 106, 0.38); --danger-ink: #A32B22; --danger-line: rgba(203, 67, 56, 0.38); /* #8A6410 se quedaba en 3.95:1 sobre las superficies que ya llevan un tinte dorado encima. Este pasa AA (4.55:1) en TODAS las combinaciones. */ --warning-ink: #7E5B0F; --warning-line: rgba(201, 152, 47, 0.45); --info-ink: #37465A; --info-line: rgba(55, 70, 90, 0.30); --neutral-ink: #5A6373; --neutral-line: rgba(55, 70, 90, 0.22); /* Familias de estado extra que el producto ya usaba con hex sueltos: teal (certificación/factura/firmado), rosa (firmado por proveedor) y azul (pasos de firma). Se conserva el TONO; solo se corrige la tinta, que sobre su propio tinte daba 1.2–2.2:1. Ratios verificados ≥ 5.1:1 en ambos temas. */ --teal: #0D9488; --teal-tint: rgba(13, 148, 136, 0.14); --teal-ink: #0B6157; --teal-line: rgba(13, 148, 136, 0.38); --pink: #DB2777; --pink-tint: rgba(219, 39, 119, 0.12); --pink-ink: #A21858; --pink-line: rgba(219, 39, 119, 0.35); --blue: #2563EB; --blue-tint: rgba(37, 99, 235, 0.10); --blue-ink: #1D4ED8; --blue-line: rgba(37, 99, 235, 0.32); /* ---- Sidebar (claro) ---- */ --sidebar-bg: #FFFFFF; --sidebar-text: #4A5568; --sidebar-text-dim: #8A93A3; --sidebar-active-bg: var(--gold-tint); --sidebar-active-tx: #3A4150; --sidebar-border: #ECE8DE; /* ---- Glass (claro) ---- */ --glass: rgba(255, 255, 255, 0.65); --glass-border: rgba(16, 16, 16, 0.06); /* ---- Sombras difusas suaves (carácter de marca) ---- */ --shadow-soft: 0 4px 16px rgba(93, 93, 93, 0.12); --shadow-card: 0 8px 25px rgba(93, 93, 93, 0.14); --shadow-pop: 0 16px 40px rgba(40, 40, 40, 0.16); /* ---- Forma / movimiento (DESIGN.md §3.3–3.4) ---- */ --radius: 18px; --radius-sm: 9px; --radius-lg: 28px; --radius-pill: 9999px; --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); color-scheme: light; } /* ---- Semánticos · OSCURO (toggle / default de primera visita) ---- */ :root[data-theme="dark"] { --app-bg: #121212; --surface: #1C1C1C; --surface-muted: #181818; --surface-sunken:#0F0F0F; --surface-hover: #262626; --text-primary: #E6E7EA; --text-heading: #F4F4F5; --text-strong: #FFFFFF; --text-muted: #A6ACB6; --text-dim: #767C86; --text-inverse: #101010; --text-on-accent:#101010; --border: #2C2C2C; --border-strong: #3A3A3A; --border-cool: #3C4654; --outline: #5A5A5A; --focus-ring: rgba(225, 181, 81, 0.65); --hover-overlay: rgba(255, 255, 255, 0.055); --press-overlay: rgba(255, 255, 255, 0.10); --success: #34D399; --success-tint: rgba(52, 211, 153, 0.14); --danger: #F2756B; --danger-tint: rgba(242, 117, 107, 0.15); --warning: #E1B551; --warning-tint: rgba(225, 181, 81, 0.16); --info: #9FB2C8; --info-tint: rgba(159, 178, 200, 0.12); --neutral: #A6ACB6; --neutral-tint: rgba(255, 255, 255, 0.07); /* Sobre fondo oscuro el color base ya contrasta: la tinta es el propio color. */ --success-ink: #34D399; --success-line: rgba(52, 211, 153, 0.42); --danger-ink: #F2756B; --danger-line: rgba(242, 117, 107, 0.42); --warning-ink: #E1B551; --warning-line: rgba(225, 181, 81, 0.42); --info-ink: #9FB2C8; --info-line: rgba(159, 178, 200, 0.35); --neutral-ink: #A6ACB6; --neutral-line: rgba(255, 255, 255, 0.16); --teal: #2DD4BF; --teal-tint: rgba(45, 212, 191, 0.14); --teal-ink: #2DD4BF; --teal-line: rgba(45, 212, 191, 0.40); --pink: #F472B6; --pink-tint: rgba(244, 114, 182, 0.14); --pink-ink: #F472B6; --pink-line: rgba(244, 114, 182, 0.40); --blue: #93C5FD; --blue-tint: rgba(147, 197, 253, 0.12); --blue-ink: #93C5FD; --blue-line: rgba(147, 197, 253, 0.35); --sidebar-bg: #161616; --sidebar-text: #C9CDD4; --sidebar-text-dim: #7C828C; --sidebar-active-bg: var(--gold-tint); --sidebar-active-tx: #F7DE69; --sidebar-border: #262626; --glass: rgba(28, 28, 28, 0.6); --glass-border: rgba(255, 255, 255, 0.08); --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.45); --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* ========================================================= INTERRUPTOR CLARO / OSCURO (idéntico a carmon-rrhh) ========================================================= */ .theme-switch { position: relative; display: inline-flex; align-items: center; width: 64px; height: 36px; flex-shrink: 0; padding: 0 4px; border: 1px solid var(--border); border-radius: 9999px; background: var(--surface-muted); cursor: pointer; transition: var(--transition-fast); } .theme-switch:hover { border-color: var(--gold); } .theme-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .theme-switch .ts-track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; pointer-events: none; } .theme-switch .ts-sun { color: var(--gold-strong); } .theme-switch .ts-moon { color: var(--text-dim); } :root[data-theme="dark"] .theme-switch .ts-sun { color: var(--text-dim); } :root[data-theme="dark"] .theme-switch .ts-moon { color: var(--gold); } .theme-switch .ts-knob { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; transform: translateX(0); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); } :root[data-theme="dark"] .theme-switch .ts-knob { transform: translateX(28px); } .theme-switch .ts-knob .ks-sun { display: block; } .theme-switch .ts-knob .ks-moon { display: none; } :root[data-theme="dark"] .theme-switch .ts-knob .ks-sun { display: none; } :root[data-theme="dark"] .theme-switch .ts-knob .ks-moon { display: block; } /* Respeto a prefers-reduced-motion (DESIGN.md §5.4) */ @media (prefers-reduced-motion: reduce) { .theme-switch, .theme-switch .ts-knob { transition: none; } } /* ========================================================= TIPOGRAFÍA HEREDADA EN CONTROLES DE FORMULARIO Los elementos reemplazados (button, input, select, textarea) NO heredan font-family: el navegador les impone su fuente de UI del sistema (Segoe UI en Windows). Sin esta regla, cualquier botón que olvide `font-family:inherit` —p.ej. "Leer todo" del panel de notificaciones, .btn-modal-cancel/.btn-modal-save, los botones de equipo.css y proyecto-pipeline.css, o .proj-filter-select— se renderiza con una fuente ajena a la marca. ========================================================= */ button, input, select, textarea, optgroup, option { font-family: inherit; } /* ========================================================= ESTADOS GLOBALES (DESIGN.md §4/§5.2) Foco visible por teclado, feedback de pulsado, disabled coherente. Aplica a las 6 superficies (esta hoja se carga en todas). ========================================================= */ /* Foco visible SOLO por teclado (:focus-visible no dispara al hacer click con ratón). !important garantiza que gana sobre los 'outline:none' heredados del código antiguo. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .nav-item:focus-visible, .theme-switch:focus-visible, .filter-chip:focus-visible, .tab:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px !important; border-radius: var(--radius-sm); } /* Feedback físico de pulsado en botones/CTAs */ button:not(:disabled):active, .btn:not(:disabled):active, [role="button"]:not([aria-disabled="true"]):active { transform: translateY(0.5px) scale(0.985); } /* Disabled coherente (los estilos por componente, de mayor especificidad, siguen mandando) */ button:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { button:active, .btn:active, [role="button"]:active { transform: none !important; } } /* ========================================================= SELECTS — chevron uniforme (oculta la flecha nativa del navegador) Un único estilo minimalista para todos los