/* Paleta y tipografia portadas de QUIMO (fuente real: QUIMO/dashboard/src/index.css + DESIGN.md), adaptadas a CSS plano sin build step. Estructura OKLCH. Tema resuelto por theme.js via [data-theme] en (auto/claro/oscuro con toggle, igual que QUIMO/dashboard/src/theme.ts) — no por prefers-color-scheme puro, mismo trio tipografico. */ :root[data-theme="light"] { --bg: oklch(0.975 0.006 60); --surface: oklch(0.955 0.007 60); --surface-raised: oklch(0.99 0.004 60); --ink: oklch(0.24 0.014 50); --ink-secondary: oklch(0.45 0.012 50); --ink-tertiary: oklch(0.6 0.01 55); --line: oklch(0.9 0.008 60); --accent: oklch(0.55 0.125 45); --accent-hover: oklch(0.5 0.125 45); --accent-soft: oklch(0.55 0.125 45 / 0.09); --accent-ink: oklch(0.99 0.004 60); --ok: oklch(0.52 0.1 155); --ok-soft: oklch(0.52 0.1 155 / 0.1); --warn: oklch(0.6 0.11 80); --warn-soft: oklch(0.6 0.11 80 / 0.12); --danger: oklch(0.53 0.13 25); --danger-soft: oklch(0.53 0.13 25 / 0.09); } :root[data-theme="dark"] { --bg: oklch(0.185 0.008 50); --surface: oklch(0.215 0.009 50); --surface-raised: oklch(0.25 0.01 50); --ink: oklch(0.92 0.008 60); --ink-secondary: oklch(0.72 0.01 55); --ink-tertiary: oklch(0.56 0.01 55); --line: oklch(0.29 0.01 50); --accent: oklch(0.72 0.115 50); --accent-hover: oklch(0.78 0.115 50); --accent-soft: oklch(0.72 0.115 50 / 0.13); --accent-ink: oklch(0.17 0.008 50); --ok: oklch(0.72 0.11 155); --ok-soft: oklch(0.72 0.11 155 / 0.14); --warn: oklch(0.78 0.11 85); --warn-soft: oklch(0.78 0.11 85 / 0.15); --danger: oklch(0.7 0.13 25); --danger-soft: oklch(0.7 0.13 25 / 0.13); } :root { --font-ui: "Instrument Sans", system-ui, sans-serif; --font-read: "Literata", Georgia, serif; --font-data: "IBM Plex Mono", ui-monospace, monospace; --radius: 6px; --radius-pill: 999px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.55; transition: background 180ms ease-out, color 180ms ease-out; } /* Aplicada 220ms por theme.js al cambiar de modo (igual que QUIMO) — transicion suave de color/fondo/borde en vez de un cambio brusco. */ .theme-transition, .theme-transition * { transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out !important; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 550; letter-spacing: -0.01em; margin: 0; } h2 { font-size: 24px; margin-bottom: 0.25rem; } h3 { font-size: 19px; } h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-tertiary); font-weight: 550; } .topbar { display: flex; align-items: center; flex-wrap: wrap; row-gap: 0.6rem; column-gap: 1.5rem; padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--surface); } .brand { display: flex; align-items: baseline; gap: 0.6rem; flex-shrink: 0; white-space: nowrap; } .topbar h1 { font-size: 15px; letter-spacing: 0.14em; } .tagline { font-size: 12px; color: var(--ink-tertiary); } nav { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1 1 auto; min-width: 0; } .theme-toggle { display: flex; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; gap: 1px; } .theme-toggle button { background: transparent; color: var(--ink-tertiary); border: none; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 12px; font-weight: 500; } .theme-toggle button[aria-checked="true"] { background: var(--surface-raised); color: var(--ink); } .theme-toggle button:hover:not([aria-checked="true"]) { background: transparent; color: var(--ink-secondary); } .nav-btn { background: transparent; border: 1px solid transparent; color: var(--ink-secondary); padding: 0.45rem 0.9rem; border-radius: var(--radius); font: inherit; font-size: 13.5px; cursor: pointer; transition: background 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out; } .nav-btn:hover { background: var(--accent-soft); color: var(--ink); } .nav-btn.active { color: var(--ink); border-color: var(--line); background: var(--surface-raised); font-weight: 550; } main { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .view { display: none; } .view.active { display: block; animation: fade-in 180ms ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .hidden { display: none; } .hint { color: var(--ink-tertiary); font-size: 13.5px; margin: 0.4rem 0 1.25rem; } label { font-size: 13.5px; color: var(--ink-secondary); } input[type="url"], textarea, input[type="number"], input[type="date"], select { width: 100%; background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); padding: 0.6rem 0.7rem; border-radius: var(--radius); font: inherit; font-size: 14px; margin: 0.5rem 0; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; } button { background: var(--accent); color: var(--accent-ink); border: none; padding: 0.55rem 1.1rem; border-radius: var(--radius); font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; transition: background 140ms ease-out, transform 140ms ease-out; } button:hover:not(:disabled) { background: var(--accent-hover); } button:active:not(:disabled) { transform: scale(0.98); } button:disabled { opacity: 0.5; cursor: not-allowed; } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button.secondary { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); } button.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid transparent; } button.danger:hover:not(:disabled) { background: var(--danger); color: var(--accent-ink); } .error { color: var(--danger); font-size: 13.5px; margin: 0.5rem 0; min-height: 1.2em; } .source-toggle { display: inline-flex; gap: 0.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.2rem; margin-bottom: 0.75rem; } .source-toggle label { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 4px; cursor: pointer; color: var(--ink-secondary); } .source-toggle label:has(input:checked) { background: var(--surface-raised); color: var(--ink); font-weight: 550; } #analysis-result { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } #elements-list { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } #elements-list li { font-size: 13.5px; color: var(--ink-secondary); padding: 0.5rem 0.7rem; background: var(--surface); border-radius: var(--radius); } #elements-list li strong { color: var(--ink); font-family: var(--font-data); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.4rem; } .range-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; background: var(--surface); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 13.5px; } .range-row label { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-secondary); } .range-row #target-count { width: 4.5rem; margin: 0; text-align: center; } .post-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem; } .post-card .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; font-family: var(--font-data); font-size: 12px; color: var(--ink-tertiary); } .post-card .text { font-family: var(--font-read); font-size: 16px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; max-width: 62ch; margin: 0 0 0.9rem; } .post-card .hashtags { color: var(--accent); font-family: var(--font-data); font-size: 12.5px; margin-bottom: 0.9rem; } .post-card .anti-slop { font-size: 13px; color: var(--ink-secondary); background: var(--surface-raised); border-radius: var(--radius); padding: 0.7rem 0.85rem; margin-bottom: 1rem; } .post-card .anti-slop strong { color: var(--ink); display: block; font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; } .post-card .actions { display: flex; gap: 0.5rem; } .status-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 11px; font-weight: 550; text-transform: uppercase; letter-spacing: 0.04em; } .status-generated { background: var(--warn-soft); color: var(--warn); } .status-approved { background: var(--ok-soft); color: var(--ok); } .status-rejected { background: var(--danger-soft); color: var(--danger); } .status-published { background: var(--accent-soft); color: var(--accent); } .status-failed { background: var(--danger-soft); color: var(--danger); } table { width: 100%; border-collapse: collapse; margin-top: 1rem; } th, td { text-align: left; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--line); font-size: 13.5px; } th { color: var(--ink-tertiary); font-weight: 550; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } td:nth-child(3), td:nth-child(4), td:nth-child(5) { font-family: var(--font-data); color: var(--ink-secondary); } .filters { display: flex; gap: 1.5rem; margin-bottom: 0.5rem; } .filters label { display: block; }