/* ============================================================================= SEHL — Sistema de identidad (color, tipografía, forma) Fuente única de verdad. Portable para TODAS las apps SEHL: marketing, dashboards, PMS, móvil, documentos web. Uso: ... (modo claro por defecto) Oscuro: ó automático por prefers-color-scheme. --------------------------------------------------------------------------- Arquitectura en 2 niveles: 1) PRIMITIVOS -> los hex crudos de la marca (no usar directo en componentes) 2) ROLES -> tokens semánticos (--bg, --text, --primary…) QUE SÍ se usan Cambiar de tema solo reescribe los ROLES; los componentes nunca se tocan. ============================================================================ */ /* ---- 1) PRIMITIVOS DE MARCA --------------------------------------------- */ :root{ /* Oro — firma de marca */ --sehl-gold-50:#f8f2e6; --sehl-gold-100:#f3ebdc; --sehl-gold-300:#d8b676; --sehl-gold-500:#b0894f; --sehl-gold-600:#a07d44; --sehl-gold-700:#97713a; /* Navy — autoridad */ --sehl-navy-50:#e7ebf1; --sehl-navy-300:#5a6b86; --sehl-navy-500:#30405c; --sehl-navy-700:#1f2a3c; --sehl-navy-900:#141c29; /* Marfil / neutros cálidos */ --sehl-ivory:#faf8f4; --sehl-sand-100:#f3efe8; --sehl-sand-200:#f0ece4; --sehl-sand-300:#e8e3da; /* Tinta / grises */ --sehl-ink-900:#1b1f2a; --sehl-ink-600:#555c6b; --sehl-ink-400:#8a909c; --sehl-white:#ffffff; /* Obsidiana (para modo oscuro) */ --sehl-obsidian-900:#0e1118; --sehl-obsidian-800:#171c28; --sehl-obsidian-700:#1c2230; --sehl-obsidian-600:#2a3142; /* Semántica (constantes de significado) */ --sehl-ok-500:#2f8f5b; --sehl-ok-bg:#e7f3ec; --sehl-warn-500:#c98a25; --sehl-warn-bg:#faf0db; --sehl-danger-500:#c0492f; --sehl-danger-bg:#f8e8e3; --sehl-info-500:#2f6f9f; --sehl-info-bg:#e6eef5; } /* ---- 2) ROLES — TEMA CLARO (por defecto) -------------------------------- */ :root{ /* superficies */ --bg:var(--sehl-ivory); --bg-2:var(--sehl-sand-100); --surface:var(--sehl-white); --surface-2:#fbfaf7; --elevated:var(--sehl-white); /* texto */ --text:var(--sehl-ink-900); --text-soft:var(--sehl-ink-600); --text-faint:var(--sehl-ink-400); --text-on-primary:#ffffff; --text-on-dark:#f4f1ec; /* líneas */ --line:var(--sehl-sand-300); --line-soft:var(--sehl-sand-200); --focus-ring:rgba(176,137,79,.45); /* marca / acento */ --primary:var(--sehl-gold-500); --primary-hover:var(--sehl-gold-700); --primary-soft:var(--sehl-gold-100); --primary-grad:linear-gradient(145deg,var(--sehl-gold-500),var(--sehl-gold-700)); /* contraste */ --contrast:var(--sehl-navy-700); --contrast-soft:var(--sehl-navy-50); /* semántica (rol) */ --ok:var(--sehl-ok-500); --ok-soft:var(--sehl-ok-bg); --warn:var(--sehl-warn-500); --warn-soft:var(--sehl-warn-bg); --danger:var(--sehl-danger-500); --danger-soft:var(--sehl-danger-bg); --info:var(--sehl-info-500); --info-soft:var(--sehl-info-bg); /* tipografía */ --font-display:'Fraunces',Georgia,'Times New Roman',serif; --font-ui:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif; --font-data:'JetBrains Mono','SFMono-Regular',Consolas,monospace; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; /* escala de texto */ --text-2xs:.7rem; --text-xs:.78rem; --text-sm:.86rem; --text-base:1rem; --text-lg:1.15rem; --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.7rem; /* forma */ --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --radius-full:999px; /* espaciado */ --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px; --space-xl:32px; --space-2xl:48px; /* sombras (cálidas, difusas — nunca duras) */ --shadow-sm:0 1px 2px rgba(27,31,42,.05); --shadow-md:0 6px 18px rgba(27,31,42,.08); --shadow-lg:0 14px 40px rgba(27,31,42,.12); /* movimiento */ --ease:cubic-bezier(.2,.7,.2,1); --t-fast:140ms var(--ease); --t-base:240ms var(--ease); } /* ---- ROLES — TEMA OSCURO (manual: data-theme="dark") -------------------- */ :root[data-theme="dark"]{ --bg:var(--sehl-obsidian-900); --bg-2:var(--sehl-obsidian-800); --surface:var(--sehl-obsidian-800); --surface-2:var(--sehl-obsidian-700); --elevated:#1f2533; --text:#f1ece3; --text-soft:#b6bcc8; --text-faint:#828a99; --text-on-primary:#1b1f2a; --text-on-dark:#f4f1ec; --line:var(--sehl-obsidian-600); --line-soft:#222a3a; --focus-ring:rgba(216,182,118,.5); --primary:var(--sehl-gold-300); /* oro aclarado para contraste */ --primary-hover:#e3c98c; --primary-soft:rgba(216,182,118,.14); --primary-grad:linear-gradient(145deg,var(--sehl-gold-300),var(--sehl-gold-500)); --contrast:#cdd6e4; --contrast-soft:#2a3850; --ok:#46b277; --ok-soft:rgba(70,178,119,.16); --warn:#e0a945; --warn-soft:rgba(224,169,69,.16); --danger:#e0654a; --danger-soft:rgba(224,101,74,.16); --info:#5a9bc9; --info-soft:rgba(90,155,201,.16); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.45); --shadow-lg:0 14px 40px rgba(0,0,0,.55); } /* ---- OSCURO AUTOMÁTICO (respeta el SO si no se fija data-theme) ---------- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:var(--sehl-obsidian-900); --bg-2:var(--sehl-obsidian-800); --surface:var(--sehl-obsidian-800); --surface-2:var(--sehl-obsidian-700); --elevated:#1f2533; --text:#f1ece3; --text-soft:#b6bcc8; --text-faint:#828a99; --text-on-primary:#1b1f2a; --line:var(--sehl-obsidian-600); --line-soft:#222a3a; --focus-ring:rgba(216,182,118,.5); --primary:var(--sehl-gold-300); --primary-hover:#e3c98c; --primary-soft:rgba(216,182,118,.14); --primary-grad:linear-gradient(145deg,var(--sehl-gold-300),var(--sehl-gold-500)); --contrast:#cdd6e4; --contrast-soft:#2a3850; --ok:#46b277; --ok-soft:rgba(70,178,119,.16); --warn:#e0a945; --warn-soft:rgba(224,169,69,.16); --danger:#e0654a; --danger-soft:rgba(224,101,74,.16); --info:#5a9bc9; --info-soft:rgba(90,155,201,.16); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.45); --shadow-lg:0 14px 40px rgba(0,0,0,.55); } } /* ============================================================================= BASE — tipografía y elementos comunes (opcional pero recomendado) ============================================================================ */ *{box-sizing:border-box} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);line-height:1.18;margin:.6em 0 .3em} h1{font-weight:var(--fw-medium);font-size:var(--text-3xl);letter-spacing:-.01em} h2{font-weight:var(--fw-semibold);font-size:var(--text-2xl)} h3{font-weight:var(--fw-semibold);font-size:var(--text-xl)} p{color:var(--text-soft);max-width:66ch} a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-hover);text-decoration:underline} code,kbd,samp{font-family:var(--font-data);font-size:.85em} .sehl-eyebrow{font-size:var(--text-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--primary-hover);font-weight:var(--fw-semibold)} .sehl-data{font-family:var(--font-data);font-variant-numeric:tabular-nums} /* ============================================================================= COMPONENTES BASE — consistencia inmediata en cualquier app SEHL ============================================================================ */ .sehl-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui); font-weight:var(--fw-semibold);font-size:var(--text-sm);padding:10px 18px;border-radius:var(--radius-sm); cursor:pointer;border:1px solid transparent;transition:filter var(--t-fast),background var(--t-fast),border-color var(--t-fast)} .sehl-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)} .sehl-btn--primary{background:var(--primary-grad);color:var(--text-on-primary);box-shadow:var(--shadow-sm)} .sehl-btn--primary:hover{filter:brightness(1.05)} .sehl-btn--secondary{background:var(--surface);color:var(--text);border-color:var(--line)} .sehl-btn--secondary:hover{border-color:var(--text-faint)} .sehl-btn--ghost{background:transparent;color:var(--text-soft)} .sehl-btn--ghost:hover{color:var(--text)} .sehl-btn--danger{background:var(--danger-soft);color:var(--danger);border-color:transparent} .sehl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:var(--space-lg);box-shadow:var(--shadow-sm)} .sehl-card--elevated{box-shadow:var(--shadow-md)} .sehl-input{width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--line); border-radius:var(--radius-sm);padding:10px 14px;font-family:var(--font-ui);font-size:var(--text-base); transition:border-color var(--t-fast),box-shadow var(--t-fast)} .sehl-input::placeholder{color:var(--text-faint)} .sehl-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)} .sehl-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--fw-semibold); padding:3px 11px;border-radius:var(--radius-full)} .sehl-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor} .sehl-badge--ok{background:var(--ok-soft);color:var(--ok)} .sehl-badge--warn{background:var(--warn-soft);color:var(--warn)} .sehl-badge--danger{background:var(--danger-soft);color:var(--danger)} .sehl-badge--info{background:var(--info-soft);color:var(--info)} .sehl-badge--brand{background:var(--primary-soft);color:var(--primary-hover)} .sehl-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-md);overflow:hidden;font-size:var(--text-sm)} .sehl-table th{text-align:left;padding:11px 14px;font-size:var(--text-xs);text-transform:uppercase; letter-spacing:.05em;color:var(--text-faint);font-weight:var(--fw-semibold);border-bottom:1px solid var(--line)} .sehl-table td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--text)} .sehl-table tr:last-child td{border-bottom:0} .sehl-table td.num{font-family:var(--font-data);font-variant-numeric:tabular-nums;text-align:right} /* marca / crest reutilizable */ .sehl-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md); background:var(--primary-grad);color:var(--text-on-primary);font-family:var(--font-display); font-weight:var(--fw-semibold);box-shadow:var(--shadow-sm)} /* accesibilidad */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ============================================================================= CAPA DE PRODUCTO (NO identidad) — define en cada app, no aquí. Ej. PMS housekeeping (estándar de industria): --hk-dirty:var(--danger); --hk-clean:var(--info); --hk-inspected:var(--ok); --hk-pickup:var(--warn); --hk-ooo:var(--text-faint); Regla: el oro (--primary) es marca/foco, NUNCA un estado. ============================================================================ */