/* ═══════════════════════════════════════════════════════════════════════════ HIOX · portal.css — el chrome del portal para las páginas que construye build.py. Los tokens de acento NO están acá: los genera build.py desde `contenido/temas.json` y los agrega al final de `dist/portal.css`. ── Ojo con quién usa esto y quién no ────────────────────────────────────── Las apps de /hiox-apps/ **no cargan este archivo**. Su barra y su pie los inyecta `scripts/marco.py` al desplegar, con CSS `hx-` de valores literales: se meten dentro de sitios con Tailwind, con Astro y con CSS a mano, y no pueden depender de una hoja externa ni de heredar nada. Ese mecanismo es anterior y es el bueno — sirve HTML, que Google ve sin ejecutar JavaScript. Las dos piezas leen la MISMA paleta (`contenido/temas.json`), que es lo que evita que en tres meses la barra de CEA dentro de la app y la barra de CEA en hiox sean de distinto amarillo. ── Por qué hay temas ────────────────────────────────────────────────────── Un portal se reconoce por el chrome, no por el color: la barra, la tipografía y el pie son los mismos en todas las secciones, y eso es lo que hace que /importar/ y /radar/ se lean como el mismo sitio. Lo que cambia es el acento, porque cada sección le habla a alguien que ya tiene un código de color aprendido. El detalle y la advertencia sobre marcas ajenas, en temas.json. ═══════════════════════════════════════════════════════════════════════════ */ /* ── tokens base (tema HIOX) ─────────────────────────────────────────────── */ :root{ --ground:#FFFFFF; --surface:#F5F7F9; --surface-2:#EBEFF3; --ink:#0F171D; --ink-2:#33434F; --muted:#5C6E7C; --hair:#DCE3E9; --hair-fuerte:#C3CFD8; --warn:#A03A18; --warn-soft:#FBEAE3; --ok:#1C6B4A; /* La marca: dos colores que sólo usa el chrome. En los temas de sección cambian junto con el acento, y son lo que hace que la barra de /radar/ se sienta de Fórmula 1 sin repintar el contenido. */ --max:1120px; --prosa:68ch; --radio:10px; --radio-chico:7px; --sombra:0 1px 2px rgba(15,23,29,.04),0 8px 24px -12px rgba(15,23,29,.12); --tipo:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --tipo-num:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } /* El modo oscuro se define UNA vez para los neutros. Cada tema redefine después sólo su acento, tanto en claro como en oscuro. Nunca al revés: un color cuya única definición viva dentro de un @media deja la página sin ese color en el otro modo. */ @media (prefers-color-scheme:dark){ :root:not([data-modo="claro"]){ --ground:#0D1418; --surface:#151F25; --surface-2:#1D2A32; --ink:#E8EFF4; --ink-2:#BCCBD5; --muted:#8FA3B1; --hair:#26343D; --hair-fuerte:#3A4B56; --warn:#E4926C; --warn-soft:#332016; --ok:#5FBF92; --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6); } } :root[data-modo="oscuro"]{ --ground:#0D1418;--surface:#151F25;--surface-2:#1D2A32; --ink:#E8EFF4;--ink-2:#BCCBD5;--muted:#8FA3B1; --hair:#26343D;--hair-fuerte:#3A4B56; --warn:#E4926C;--warn-soft:#332016;--ok:#5FBF92; --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6); } /* ═══ TEMAS DE SECCIÓN ═══════════════════════════════════════════════════════ Cada bloque redefine cinco tokens y nada más. `--marca-top` es el fondo de la barra de arriba: cuando un tema la pinta, la sección se reconoce antes de leer el título. */ /* ── base, SÓLO para las páginas de build.py ───────────────────────────────── Estas reglas van con `.hiox-base` en el y no sueltas, porque este archivo lo cargan también siete aplicaciones que ya traen su propia tipografía, su propio reset y su propio fondo. Un `body{font:…}` acá les pisaría el diseño a todas — que es exactamente lo contrario de lo que se busca: las apps tienen que heredar el chrome del portal, no perder el suyo. El chrome (barra y pie) se estila más abajo sin depender de nada de esto: se pone su propia tipografía y su propio color, así se ve igual dentro de una app con Tailwind que dentro de una página de hiox. */ body.hiox-base{ margin:0;background:var(--ground);color:var(--ink); font:16.5px/1.65 var(--tipo); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .hiox-base *{box-sizing:border-box;} .hiox-base img{max-width:100%;height:auto;} .hiox-base a{color:var(--accent);text-underline-offset:2px;} .hiox-base a:hover{color:var(--accent-vivo);} :where(.hiox-base a,.hiox-base button,.hiox-base input,.hiox-base select, .hiox-base textarea,.hiox-base summary):focus-visible{ outline:2px solid var(--accent-vivo);outline-offset:2px;border-radius:3px; } /* ── barra de arriba ─────────────────────────────────────────────────────── */ .sitio-top,.sitio-top *,.pie,.pie *,.portal-franja,.portal-franja *{box-sizing:border-box;} .sitio-top{ font:500 16px/1.5 var(--tipo); background:var(--marca-top);color:var(--marca-top-ink); border-bottom:1px solid var(--hair); position:sticky;top:0;z-index:60; } .sitio-top .fila{ max-width:var(--max);margin:0 auto;padding:11px 20px; display:flex;align-items:center;gap:20px;flex-wrap:wrap; } .marca{ font-weight:800;font-size:22px;letter-spacing:-.03em; color:var(--marca-top-ink);text-decoration:none;line-height:1; display:inline-flex;align-items:center;gap:2px;flex:none; } .marca span{color:var(--marca);} /* El nombre de la sección al lado de la marca: en una app de /hiox-apps/ es lo único que dice dónde está parado el que llegó por un enlace directo. */ .marca-sec{ font-size:13px;font-weight:600;letter-spacing:.02em; color:var(--marca-top-ink);opacity:.72; padding-left:11px;margin-left:1px; border-left:1px solid currentColor; } .nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;align-items:center;} .nav a{ color:var(--marca-top-ink);text-decoration:none; font-size:14px;font-weight:500;opacity:.72; padding:6px 10px;border-radius:var(--radio-chico); transition:opacity .15s,background-color .15s; } .nav a:hover{opacity:1;background:color-mix(in srgb,var(--marca-top-ink) 10%,transparent);} .nav a[aria-current="page"]{ opacity:1;font-weight:650; background:color-mix(in srgb,var(--marca) 16%,transparent); box-shadow:inset 0 -2px 0 var(--marca); } /* color-mix es de 2023 y lo entienden todos los navegadores que nos importan, pero si falla el fondo queda transparente y el enlace ilegible. El respaldo es sólo el subrayado, que no depende de él. */ @supports not (color:color-mix(in srgb,red 50%,blue)){ .nav a:hover,.nav a[aria-current="page"]{opacity:1;box-shadow:inset 0 -2px 0 var(--marca);} } /* ── pie ─────────────────────────────────────────────────────────────────── */ .pie{ font:400 16px/1.65 var(--tipo);box-sizing:border-box; border-top:1px solid var(--hair);background:var(--surface); margin-top:64px;color:var(--ink); } .pie .fila{ max-width:var(--max);margin:0 auto;padding:38px 20px 30px; display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:28px 32px; } .pie h4{ font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin:0 0 11px;font-weight:700; } .pie h4 a{color:inherit;text-decoration:none;} .pie h4 a:hover{color:var(--accent);} .pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} .pie a{color:var(--ink-2);text-decoration:none;font-size:14px;line-height:1.4;} .pie a:hover{color:var(--accent);text-decoration:underline;} .pie .legal{ grid-column:1/-1;border-top:1px solid var(--hair); padding-top:20px;margin-top:4px; font-size:12.8px;color:var(--muted);line-height:1.6; text-align:justify;hyphens:auto; } .pie .legal p{margin:0 0 8px;} .pie .legal p:last-child{margin:0;} .pie .legal a{font-size:inherit;color:var(--muted);text-decoration:underline;} /* ── franja de portal: el enlace de vuelta desde una app ─────────────────── */ /* Una app de /hiox-apps/ tiene su propia portada, y quien entra por Google cae ahí sin pasar nunca por hiox.com.ar. Esta franja es lo que convierte a las ocho aplicaciones en un portal: dice de qué sitio son parte y ofrece la vuelta. Va debajo de la barra y no dentro, para no pelear con la navegación propia de cada app. */ .portal-franja{ font:400 16px/1.5 var(--tipo); background:var(--accent-soft);border-bottom:1px solid var(--hair); font-size:13px;color:var(--ink-2); } .portal-franja .fila{ max-width:var(--max);margin:0 auto;padding:7px 20px; display:flex;gap:12px;align-items:center;flex-wrap:wrap; } .portal-franja a{color:var(--accent);font-weight:600;text-decoration:none;} .portal-franja a:hover{text-decoration:underline;} .portal-franja .sep{opacity:.45;} @media (max-width:680px){ .sitio-top .fila{padding:10px 16px;gap:10px;} .nav{margin-left:0;width:100%;gap:2px;overflow-x:auto;flex-wrap:nowrap; scrollbar-width:none;-webkit-overflow-scrolling:touch;} .nav::-webkit-scrollbar{display:none;} .nav a{white-space:nowrap;padding:6px 9px;} .pie .fila{padding:30px 16px 24px;gap:22px;} body{font-size:16px;} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;} } /* ═══ TEMAS · generado desde contenido/temas.json ═══════════════════════ No editar acá: se pisa en cada build. La paleta y el porqué de cada color están en ese JSON. ═══════════════════════════════════════════ */ /* HIOX */ :root{--accent:#0A5E7D;--accent-ink:#FFFFFF;--accent-soft:#E2EFF5;--accent-vivo:#0E7EA6;--marca:#0A5E7D;--marca-top:#FFFFFF;--marca-top-ink:#0F171D;} @media (prefers-color-scheme:dark){:root:not([data-modo="claro"]){--accent:#5CBEDF;--accent-ink:#0D1418;--accent-soft:#15313E;--accent-vivo:#7FD2EC;--marca:#5CBEDF;--marca-top:#0D1418;--marca-top-ink:#E8EFF4;}} :root[data-modo="oscuro"]{--accent:#5CBEDF;--accent-ink:#0D1418;--accent-soft:#15313E;--accent-vivo:#7FD2EC;--marca:#5CBEDF;--marca-top:#0D1418;--marca-top-ink:#E8EFF4;} /* CEUSA · vender en Amazon USA */ [data-tema="ceusa"]{--accent:#B45309;--accent-ink:#FFFFFF;--accent-soft:#FDF0DF;--accent-vivo:#D97706;--marca:#F59E0B;--marca-top:#131A22;--marca-top-ink:#FFFFFF;} @media (prefers-color-scheme:dark){:root:not([data-modo="claro"])[data-tema="ceusa"]{--accent:#F0A93B;--accent-ink:#131A22;--accent-soft:#3A2A11;--accent-vivo:#FFC363;--marca:#F0A93B;--marca-top:#0B1016;--marca-top-ink:#FFFFFF;}} :root[data-modo="oscuro"][data-tema="ceusa"]{--accent:#F0A93B;--accent-ink:#131A22;--accent-soft:#3A2A11;--accent-vivo:#FFC363;--marca:#F0A93B;--marca-top:#0B1016;--marca-top-ink:#FFFFFF;} /* CEA · vender en la Argentina */ [data-tema="cea"]{--accent:#2968C8;--accent-ink:#FFFFFF;--accent-soft:#E4EDFB;--accent-vivo:#3483FA;--marca:#2968C8;--marca-top:#FFE600;--marca-top-ink:#1A1A1A;} @media (prefers-color-scheme:dark){:root:not([data-modo="claro"])[data-tema="cea"]{--accent:#79ACFF;--accent-ink:#0B1524;--accent-soft:#132340;--accent-vivo:#9CC4FF;--marca:#FFE600;--marca-top:#141414;--marca-top-ink:#FFE600;}} :root[data-modo="oscuro"][data-tema="cea"]{--accent:#79ACFF;--accent-ink:#0B1524;--accent-soft:#132340;--accent-vivo:#9CC4FF;--marca:#FFE600;--marca-top:#141414;--marca-top-ink:#FFE600;} /* Fórmula 1 */ [data-tema="f1"]{--accent:#C40500;--accent-ink:#FFFFFF;--accent-soft:#FCE7E6;--accent-vivo:#E10600;--marca:#E10600;--marca-top:#15151E;--marca-top-ink:#FFFFFF;} @media (prefers-color-scheme:dark){:root:not([data-modo="claro"])[data-tema="f1"]{--accent:#FF6B63;--accent-ink:#15151E;--accent-soft:#3B1512;--accent-vivo:#FF8A83;--marca:#FF3B33;--marca-top:#0B0B10;--marca-top-ink:#FFFFFF;}} :root[data-modo="oscuro"][data-tema="f1"]{--accent:#FF6B63;--accent-ink:#15151E;--accent-soft:#3B1512;--accent-vivo:#FF8A83;--marca:#FF3B33;--marca-top:#0B0B10;--marca-top-ink:#FFFFFF;} /* Keto */ [data-tema="keto"]{--accent:#1C6B4A;--accent-ink:#FFFFFF;--accent-soft:#E1F2EA;--accent-vivo:#238C60;--marca:#1C6B4A;--marca-top:#F2F8F5;--marca-top-ink:#12281E;} @media (prefers-color-scheme:dark){:root:not([data-modo="claro"])[data-tema="keto"]{--accent:#5FC79A;--accent-ink:#0C1B14;--accent-soft:#123024;--accent-vivo:#7FD9B2;--marca:#5FC79A;--marca-top:#0C1B14;--marca-top-ink:#E8F5EE;}} :root[data-modo="oscuro"][data-tema="keto"]{--accent:#5FC79A;--accent-ink:#0C1B14;--accent-soft:#123024;--accent-vivo:#7FD9B2;--marca:#5FC79A;--marca-top:#0C1B14;--marca-top-ink:#E8F5EE;} /* Radar BORA */ [data-tema="bora"]{--accent:#1D4F91;--accent-ink:#FFFFFF;--accent-soft:#E4ECF7;--accent-vivo:#2563AF;--marca:#1D4F91;--marca-top:#F3F6FB;--marca-top-ink:#0F2445;} @media (prefers-color-scheme:dark){:root:not([data-modo="claro"])[data-tema="bora"]{--accent:#7FAEE8;--accent-ink:#0C1728;--accent-soft:#132741;--accent-vivo:#9FC5F2;--marca:#7FAEE8;--marca-top:#0C1728;--marca-top-ink:#E7EFFA;}} :root[data-modo="oscuro"][data-tema="bora"]{--accent:#7FAEE8;--accent-ink:#0C1728;--accent-soft:#132741;--accent-vivo:#9FC5F2;--marca:#7FAEE8;--marca-top:#0C1728;--marca-top-ink:#E7EFFA;} /* VAE y PRE */ [data-tema="civico"]{--accent:#1C6E93;--accent-ink:#FFFFFF;--accent-soft:#E2F0F7;--accent-vivo:#2A8CB8;--marca:#1C6E93;--marca-top:#EFF6FA;--marca-top-ink:#0E2E3E;} @media (prefers-color-scheme:dark){:root:not([data-modo="claro"])[data-tema="civico"]{--accent:#74C4E6;--accent-ink:#0A1E28;--accent-soft:#0F2E3C;--accent-vivo:#96D6F2;--marca:#74C4E6;--marca-top:#0A1E28;--marca-top-ink:#E5F3F9;}} :root[data-modo="oscuro"][data-tema="civico"]{--accent:#74C4E6;--accent-ink:#0A1E28;--accent-soft:#0F2E3C;--accent-vivo:#96D6F2;--marca:#74C4E6;--marca-top:#0A1E28;--marca-top-ink:#E5F3F9;} /* Truco */ [data-tema="truco"]{--accent:#0E5C3F;--accent-ink:#FFFFFF;--accent-soft:#E0F0E8;--accent-vivo:#137A53;--marca:#C1121F;--marca-top:#0E5C3F;--marca-top-ink:#FFFFFF;} @media (prefers-color-scheme:dark){:root:not([data-modo="claro"])[data-tema="truco"]{--accent:#55C295;--accent-ink:#082117;--accent-soft:#0D2E21;--accent-vivo:#76D5AF;--marca:#FF6B6B;--marca-top:#082117;--marca-top-ink:#E6F5EE;}} :root[data-modo="oscuro"][data-tema="truco"]{--accent:#55C295;--accent-ink:#082117;--accent-soft:#0D2E21;--accent-vivo:#76D5AF;--marca:#FF6B6B;--marca-top:#082117;--marca-top-ink:#E6F5EE;} /* PosMed */ [data-tema="posmed"]{--accent:#0B6E6E;--accent-ink:#FFFFFF;--accent-soft:#DFF1F1;--accent-vivo:#0F8C8C;--marca:#0B6E6E;--marca-top:#F0F8F8;--marca-top-ink:#0A2C2C;} @media (prefers-color-scheme:dark){:root:not([data-modo="claro"])[data-tema="posmed"]{--accent:#5CC9C9;--accent-ink:#07201F;--accent-soft:#0C2E2E;--accent-vivo:#7FDCDC;--marca:#5CC9C9;--marca-top:#07201F;--marca-top-ink:#E4F5F5;}} :root[data-modo="oscuro"][data-tema="posmed"]{--accent:#5CC9C9;--accent-ink:#07201F;--accent-soft:#0C2E2E;--accent-vivo:#7FDCDC;--marca:#5CC9C9;--marca-top:#07201F;--marca-top-ink:#E4F5F5;}