/* SEACE Monitor - portada publica (Tarea 7 de la Fase B). Los tokens de :root/@media/[data-theme] de aqui abajo son una copia literal de static/styles.css -- mismo patron que static-admin/styles.css (su propio comentario lo dice: "copia literal de static/styles.css"). Es la paleta que el cliente ya conoce del login y de la barra del panel; copiarla en vez de enlazar el fichero evita atar esta pagina, que vive en su propio Mount, al de la aplicacion del cliente ("/app"). */ :root{ /* LA PALETA DE VALITECH (rama valitech, 2026-10-02): el azul de la marca sobre los fondos frios de siempre. Los NOMBRES vienen de la rama de origen (--oro-suave, --oro-texto...) y los VALORES son azules: asi un merge desde ella solo choca en estas lineas. --accent (#0b6b9a) ya se lee como letra: 5,86:1 sobre blanco y 5,21:1 sobre --bg, con texto blanco encima de sus rellenos. --oro-texto es el mismo azul. --accent-2/-3 son el azul vivo de adorno, no de letra. --foco: el anillo de teclado, 5,21:1 sobre el fondo. */ --bg:#eef2f6; --surface:#ffffff; --surface-2:#f6f8fb; --border:#d8e0e9; --ink:#0f1b2d; --ink-2:#4a5b70; --ink-3:#5f6f85; --accent:#0b6b9a; --accent-2:#12a3d6; --accent-3:#12a3d6; --accent-ink:#ffffff; --oro-suave:#e3f2fa; --oro-borde:#b5dcef; --oro-texto:#0b6b9a; --navy:#0e1b33; --navy-2:#17263f; --navy-ink:#e8eef7; --foco:var(--accent); --good:#15803d; --good-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7; --crit:#b91c1c; --crit-bg:#fee2e2; --neutral:#475569; --neutral-bg:#e2e8f0; --info:#1d4ed8; --info-bg:#dbeafe; --shadow:0 1px 2px rgba(15,27,45,.06),0 8px 24px rgba(15,27,45,.08); --radius:12px; --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } /* AQUI NO HAY NINGUNA CONSULTA POR EL TEMA DEL SISTEMA. La habia, copiada igual que el resto de los tokens, y hacia que la portada se abriera oscura para quien tiene el sistema en oscuro. (No se cita tal cual porque test_portada.py vigila que esa consulta no vuelva a este fichero.) El :root de arriba es el tema CLARO y es el que vale de fabrica: esta es la primera pantalla de un desconocido y se le enseña tal y como esta pensada. El oscuro se pide -- con el boton de la barra, que guarda `seaceTema` y lo escribe en [data-theme] (ver el script del de index.html). Las dos aplicaciones (/app y /admin) siguen respetando el sistema: ahi ya hay una sesion y un habito. */ :root[data-theme="light"]{ --bg:#eef2f6; --surface:#ffffff; --surface-2:#f6f8fb; --border:#d8e0e9; --ink:#0f1b2d; --ink-2:#4a5b70; --ink-3:#5f6f85; --accent:#0b6b9a; --accent-2:#12a3d6; --accent-3:#12a3d6; --accent-ink:#ffffff; --oro-suave:#e3f2fa; --oro-borde:#b5dcef; --oro-texto:#0b6b9a; --navy:#0e1b33; --navy-2:#17263f; --navy-ink:#e8eef7; --foco:var(--accent); } :root[data-theme="dark"]{ --bg:#0b111b; --surface:#141d2b; --surface-2:#0f1826; --border:#243244; --ink:#e7eef7; --ink-2:#a7b6c9; --ink-3:#75869a; --accent:#2aa5d8; --accent-2:#4cc4ef; --accent-3:#4cc4ef; --accent-ink:#04121c; --oro-suave:#0b2433; --oro-borde:#16435c; --oro-texto:var(--accent); --navy:#0f1826; --navy-2:#1a2740; --navy-ink:#e8eef7; --foco:var(--accent-2); --good:#4ade80; --good-bg:#0e2a1a; --warn:#fbbf24; --warn-bg:#2a1f07; --crit:#f87171; --crit-bg:#2a1212; --neutral:#94a3b8; --neutral-bg:#1e293b; --info:#60a5fa; --info-bg:#0f1e3a; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35); } /* ---- la transicion entre paginas ---------------------------------------- El salto de "/" a "/plataforma" era una navegacion completa: el navegador tira el DOM y lo reconstruye, asi que habia destello blanco, el scroll saltaba al tope y la barra se repintaba desde cero -- aunque acabara identica. No era lentitud de descarga: la hoja y el script salen de la cache. Esta regla le dice al navegador que ANIME la navegacion en vez de cortarla. Las dos de mas abajo (en la barra y en el pie) le dicen ademas que esas piezas son LA MISMA en las dos paginas: con nombre propio no las funde, las mantiene quietas y anima solo lo que hay alrededor. Lo que cuesta: nada. Sin JavaScript, sin paso de compilacion y sin tocar una sola prueba. Donde el navegador no lo soporte, la navegacion se comporta exactamente como antes -- que era la alternativa. EL NOMBRE TIENE QUE SER UNICO EN EL DOCUMENTO. Si algun dia hay dos elementos con el mismo, el navegador se planta y no hace ninguna transicion, sin decir nada en ningun sitio. */ @view-transition{navigation:auto} *{box-sizing:border-box} /* EL ATRIBUTO `hidden` GANA A CUALQUIER `display` DE AUTOR, y aqui faltaba. Es la regla que ya tienen static/styles.css y static-admin/styles.css, y esta hoja era la unica de las tres sin ella. Lo que rompia, en orden de gravedad: - `#heroAlta` es un con `hidden`, y `.btn` declara display:inline-flex. O sea que el boton "Crear mi cuenta" del heroe SE VEIA SIEMPRE, tambien cuando no hay planes publicados y el alta esta cerrada -- justo lo que test_sin_planes_la_portada_no_ofrece_ crear_la_cuenta cree estar impidiendo. Esa prueba mira el atributo en el HTML, y el atributo estaba: lo que no estaba era el efecto. - el aviso flotante de "revisa tu correo" (display:flex), que nacia visible y no se cerraba al Aceptar. Un `hidden` que no esconde es peor que no tenerlo: se escribe, se prueba la cadena, y nadie mira la pantalla. */ [hidden]{display:none !important} /* Barras de desplazamiento con el estilo de la marca: la misma pastilla dorada sobre riel suave que la barra del tablero de Mis procesos. */ html{scroll-behavior:smooth;scrollbar-color:var(--accent) var(--oro-suave)} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:var(--oro-suave)} ::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px; border:3px solid var(--oro-suave)} ::-webkit-scrollbar-thumb:hover{background:var(--accent-3)} /* NADA se sale por los lados. `clip` y no `hidden` a proposito: `hidden` convertiria el documento en contenedor de desplazamiento y rompe el `position:sticky` de la barra superior. */ html,body{overflow-x:clip;max-width:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} h1,h2,h3{margin:0;font-weight:680;letter-spacing:-.02em;text-wrap:balance} p{margin:0} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%} .tnum{font-variant-numeric:tabular-nums} :focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:8px} /* ---- movimiento -------------------------------------------------------- Dos piezas: la entrada del heroe (al cargar, escalonada) y el fundido de cada seccion al llegar a ella. Los numeros salen de la base del skill: 350ms y 12px de desplazamiento, "para que se lea como un fundido y no como un deslizamiento". Todo cuelga de `html.js`, que pone el propio documento en su primera linea. Sin JavaScript no hay clase, y sin clase estas reglas no existen: la pagina se ve entera y quieta. Una portada que se queda en blanco porque fallo un script no es una portada. */ .js .anim{opacity:0;transform:translateY(14px); animation:entra .5s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--d,0ms)} @keyframes entra{to{opacity:1;transform:none}} .js .reveal{opacity:0;transform:translateY(12px); transition:opacity .35s ease-out,transform .35s ease-out} .js .reveal.dentro{opacity:1;transform:none} /* ---- barra superior ---- */ :root{--top-h:76px} /* Al bajar, la barra se aprieta y se despega con una sombra: dice "ya no estas arriba" sin ocupar sitio para decirlo. */ .topbar.abajo{height:62px;box-shadow:0 6px 20px rgba(2,8,20,.10); background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(10px)} .topbar.abajo .brand img{width:34px;height:34px} .topbar.abajo .brand img.logo{height:34px;width:auto} /* SIN FONDO Y SIN LINEA (peticion del socio humano, 2026-09-24). En la maqueta la barra no es una franja: los controles flotan sobre la pagina y el heroe pasa por debajo sin que nada lo corte. Un fondo translucido con desenfoque y una linea inferior la convertian en un elemento mas, y partian en dos la cuna dorada que baja desde la esquina. Sigue siendo `sticky`: al bajar se despega con sombra Y AHI SI se pone fondo, porque sin el las letras de la barra se cruzarian con el texto que pasa por debajo. Arriba no hay nada debajo con lo que chocar; abajo si. */ .topbar{view-transition-name:barra; position:sticky;top:0;z-index:20;height:var(--top-h); transition:height .2s var(--ease,ease),box-shadow .2s ease,background .2s ease; display:flex;align-items:center; justify-content:space-between;gap:28px;padding:14px 40px; background:transparent;border-bottom:0} /* Mas grande (peticion del socio humano, 2026-09-24). En la maqueta la marca mide ~70 px sobre una barra de ~85: ocupa casi todo el alto, que es lo que la convierte en el ancla de la pagina en vez de en un icono mas. */ .brand{display:flex;align-items:center;gap:12px;letter-spacing:-.03em; font-size:33px;font-weight:800;color:var(--ink);line-height:1} .brand img{border-radius:8px;object-fit:contain;transition:width .2s ease,height .2s ease} /* "Pro" EN ORO, medido en la maqueta: su pixel mas saturado es #eeaa00, o sea el mismo oro de acento del resto de la pagina. "Tender" va en tinta (#02081f medido), que es la misma --ink. Es el reparto del propio logotipo -- T azul, P dorada -- repetido en la palabra. */ .brand .pro{color:var(--accent-3)} /* El logotipo oficial (2026-09-30): tinta azul en claro, blanca en oscuro. Se alternan con [data-theme], el mismo interruptor que los tokens. */ img.logo{display:block;width:auto;border-radius:0;object-fit:contain} img.logo-oscuro{display:none} :root[data-theme="dark"] img.logo-claro{display:none} :root[data-theme="dark"] img.logo-oscuro{display:block} .brand img.logo{height:44px;width:auto} .topbar nav:not(.navlinks){display:flex;align-items:center;gap:18px} /* ---- LOS ENLACES DE SECCION (.navlinks) --------------------------------- Todo lo suyo vive AQUI: la forma ancha y, dentro del @media de abajo, la del panel de la hamburguesa. Estuvo repartido en cuatro sitios del fichero, y no por descuido sino por una pelea que nadie habia visto: `.topbar nav` se escribio para los botones de la derecha, pero la lista de enlaces TAMBIEN es un