/* ============================================================ Skin Electolab — se carga DESPUÉS de styles.css y lo reescribe. La versión de NODO es un documento: papel de planilla contable, verde tinta, serif para los textos largos, navegación al costado como el índice de un expediente. Esta es lo otro: un tablero de análisis. Fondo azul de noche electoral, navegación horizontal por pestañas, cifras grandes y monoespaciadas, sin rayas de planilla. Mismo dato, otra postura. Dark-first, pero con los tres estados de tema resueltos. Paleta categórica validada contra ambas superficies (lightness, croma, separación CVD, contraste). ============================================================ */ /* las familias las carga el del micrositio */ /* ---------- tema claro (base): azul frío, no gris neutro ---------- */ :root { --paper: #EEF2F8; --surface: #F7F9FC; --surface-2: #FFFFFF; --bar: #F7F9FC; /* sin greenbar: la raya desaparece */ --rule: #C9D4E4; --rule-soft: #E1E8F2; --ink: #0B1420; --ink-2: #33445C; --ink-3: #5E7086; --ink-4: #8E9BB0; --accent: #1D5FD8; --accent-ink: #14459D; --accent-bg: #E2EAFB; --crit: #BF2E4E; --crit-bg: #FAE4E9; --warn: #9A6410; --warn-bg: #FAF0DE; --ok: #00876B; --ok-bg: #DFF1EC; --neg: #BF2E4E; --pos: #00876B; --c1: #1D5FD8; --c2: #9A6410; --c3: #00876B; --c4: #7C3FB5; --c5: #BF2E4E; --c6: #7A879B; --shadow: 0 1px 2px rgba(11, 20, 32, .07), 0 10px 26px -14px rgba(11, 20, 32, .22); --shadow-lg: 0 2px 6px rgba(11, 20, 32, .10), 0 28px 54px -18px rgba(11, 20, 32, .30); --sans: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif; --serif: 'IBM Plex Sans', system-ui, sans-serif; /* sin serif: otra voz que NODO */ --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; --nav-w: 0px; /* la navegación deja de ser una columna */ --top-h: 56px; } /* ---------- tema oscuro: el estado por defecto de Electolab ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0A101C; --surface: #131C2E; --surface-2: #19243A; --bar: #131C2E; --rule: #2A3A56; --rule-soft: #1F2C43; --ink: #E8EEF8; --ink-2: #AEBED6; --ink-3: #7C8DA8; --ink-4: #5C6C86; --accent: #3D8BFF; --accent-ink: #7FB2FF; --accent-bg: #16294A; --crit: #E05070; --crit-bg: #2B1520; --warn: #C4801E; --warn-bg: #2A2013; --ok: #189E80; --ok-bg: #0E2620; --neg: #E05070; --pos: #2FBE99; --c1: #3D8BFF; --c2: #C4801E; --c3: #189E80; --c4: #9B5BD6; --c5: #E05070; --c6: #6F7F97; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.7); --shadow-lg: 0 2px 6px rgba(0,0,0,.6), 0 28px 54px -18px rgba(0,0,0,.8); } } :root[data-theme="dark"] { --paper: #0A101C; --surface: #131C2E; --surface-2: #19243A; --bar: #131C2E; --rule: #2A3A56; --rule-soft: #1F2C43; --ink: #E8EEF8; --ink-2: #AEBED6; --ink-3: #7C8DA8; --ink-4: #5C6C86; --accent: #3D8BFF; --accent-ink: #7FB2FF; --accent-bg: #16294A; --crit: #E05070; --crit-bg: #2B1520; --warn: #C4801E; --warn-bg: #2A2013; --ok: #189E80; --ok-bg: #0E2620; --neg: #E05070; --pos: #2FBE99; --c1: #3D8BFF; --c2: #C4801E; --c3: #189E80; --c4: #9B5BD6; --c5: #E05070; --c6: #6F7F97; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.7); --shadow-lg: 0 2px 6px rgba(0,0,0,.6), 0 28px 54px -18px rgba(0,0,0,.8); } /* ============================================================ Layout: la navegación pasa de columna lateral a pestañas arriba. Es el cambio que más se siente: deja de leerse como un índice de expediente y pasa a leerse como un tablero. ============================================================ */ .shell { grid-template-columns: 1fr; } .topbar { height: auto; padding: 11px 22px; background: var(--surface); border-bottom: 1px solid var(--rule); flex-wrap: wrap; row-gap: 9px; } .brand { width: auto; align-items: center; gap: 11px; } .brand b { font-family: var(--sans); font-size: 16px; font-weight: 800; letter-spacing: -.035em; } .brand span { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 3px; padding: 2px 6px; } .search-wrap input { border-radius: 4px; font-family: var(--serif); } .icon-btn { border-radius: 4px; font-family: var(--sans); font-weight: 600; font-size: 11.5px; letter-spacing: .01em; } nav.side { position: sticky; top: 0; z-index: 39; grid-column: 1 / -1; height: auto; flex-direction: row; align-items: stretch; gap: 0; padding: 0 14px; border-right: 0; border-bottom: 1px solid var(--rule); background: var(--paper); overflow-x: auto; scrollbar-width: thin; } nav.side button { width: auto; flex: none; padding: 11px 15px 10px; border-radius: 0; border-bottom: 2px solid transparent; white-space: nowrap; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--ink-3); } nav.side button .n { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--ink-4); letter-spacing: .04em; } nav.side button:hover { background: transparent; color: var(--ink); } nav.side button[aria-current="true"] { background: transparent; color: var(--ink); border-bottom-color: var(--accent); } nav.side button[aria-current="true"] .n { color: var(--accent); } .side-foot { display: none; } main { padding: 26px 30px 90px; max-width: 1560px; } /* firma: esto es una herramienta de Electolab, y se dice */ .by-electolab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 22px; padding: 9px 14px; background: var(--accent-bg); border-left: 3px solid var(--accent); border-radius: 0 5px 5px 0; font-size: 12.5px; color: var(--ink-2); } .by-electolab b { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .by-electolab a { color: var(--accent-ink); font-weight: 600; text-decoration: none; } .by-electolab a:hover { text-decoration: underline; } .by-electolab .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } /* ============================================================ tipografía */ .view-head h1 { font-family: var(--sans); font-size: 27px; font-weight: 800; letter-spacing: -.04em; } .view-head p { font-family: var(--serif); font-size: 13.5px; } .eyebrow, .tile .k, table.g th { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .prose { font-family: var(--serif); font-size: 14px; line-height: 1.68; } .art-text { font-family: var(--serif); font-size: 14px; line-height: 1.7; } /* ============================================================ tiles: el tablero */ .tiles { gap: 10px; background: transparent; border: 0; border-radius: 0; margin-bottom: 24px; grid-template-columns: repeat(auto-fit, minmax(194px, 1fr)); } .tile { border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px 15px; background: var(--surface); position: relative; overflow: hidden; } .tile::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: .5; } .tile .k { font-size: 9.5px; color: var(--ink-3); } .tile .v { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -.045em; } .tile .s { font-family: var(--serif); font-size: 11.5px; } /* ============================================================ paneles */ .panel { border-radius: 6px; box-shadow: var(--shadow); } .panel > header { padding: 13px 16px; border-bottom: 1px solid var(--rule); } .panel > header h2 { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: -.022em; } .panel > header .hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; } /* ============================================================ tablas Sin greenbar: acá la lectura es por columna de cifras, no por renglón. Los números en mono, que es lo que hace que un tablero parezca un tablero. */ table.g tbody tr:nth-child(even) { background: transparent; } table.g tbody tr:hover { background: var(--accent-bg); } table.g th { font-size: 9.5px; color: var(--ink-3); border-bottom: 1px solid var(--rule); padding: 9px 12px; } table.g td { padding: 7px 12px; border-bottom: 1px solid var(--rule-soft); } table.g td.r { font-family: var(--mono); font-size: 12px; letter-spacing: -.02em; } table.g tbody tr.click:hover { background: var(--accent-bg); } .cellbar { border-radius: 2px; opacity: .85; height: 13px; } /* ============================================================ chips y barras */ .chip { border-radius: 3px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; } .sev { width: 3px; border-radius: 0; } .divrow { font-family: var(--serif); font-size: 12.5px; } .divrow .pc { font-family: var(--mono); font-size: 11.5px; font-weight: 700; } .divtrack { height: 15px; border-radius: 2px; background: var(--rule-soft); } .stack { height: 34px; gap: 2px; } .legend { font-family: var(--serif); font-size: 11.5px; } .legend i { border-radius: 2px; } /* ============================================================ filtros */ .filters input[type=text], .filters select { border-radius: 4px; font-family: var(--serif); font-size: 12.5px; } .seg { border-radius: 4px; } .seg button { font-family: var(--sans); font-size: 12px; font-weight: 600; } .count { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; } /* ============================================================ hallazgos y búsqueda */ .find { border-radius: 6px; } .find h3 { font-family: var(--sans); font-size: 14.5px; font-weight: 700; letter-spacing: -.024em; } .find .dt { font-family: var(--serif); } .hit { border-radius: 5px; } .hit .hd b { font-family: var(--sans); font-weight: 700; } .hit .sn { font-family: var(--serif); } .art-item .no { font-family: var(--mono); font-weight: 700; color: var(--accent); } .art-item .tx p { font-family: var(--serif); } .drawer > header h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.028em; } .drawer .content h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; } .note { font-family: var(--serif); } .mono { font-family: var(--mono); } @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } nav.side { padding: 0 8px; } main { padding: 18px 14px 70px; } .topbar { padding: 10px 14px; } }