/* ============================================================================= PORTAL DE PIA · BASE — EL SUELO QUE EXTIENDEN TODAS LAS PANTALLAS ============================================================================= Todo lo que se pinta en el portal pasa por aquí. Si estás escribiendo una pantalla (pantalla-*.js) no necesitas ni una regla propia de color, radio o tamaño: están todas abajo, con el nombre que les dio el sistema. ORDEN DEL ARCHIVO, y el orden importa: 1 · @font-face las fuentes, servidas por nosotros desde /fuentes/ 2 · :root COPIA AUTORIZADA de element/brand/pia-tokens.css 3 · componentes copia de element/brand/pia-componentes.css 4 · portal lo que sólo es de aquí, y las reglas de móvil POR QUÉ ES UNA COPIA Y NO UN . El portal mira a internet y sirve una lista blanca de ficheros; element/brand/ vive fuera de esa lista y además está reservado al sub-orquestador. Así que los valores se COPIAN, igual que hizo installer/web/index.html, y quien vigila que la copia no derive del canon es `node scripts/verificar-tokens.mjs`. Una copia que contradice al original es el fallo que ese verificador existe para cazar: no la "mejores" aquí. NI UN LITERAL DE COLOR fuera del bloque 2. Si te falta un color, no lo inventes: se decide una vez, en pia-tokens.css, y baja hasta aquí. ========================================================================== */ /* --- 1 · LAS FUENTES, SERVIDAS POR NOSOTROS --------------------------------- Copiado de installer/web/index.html, y por sus mismas razones, que aquí pesan más todavía porque esta pantalla SÍ mira a internet: 1. PIA existe para tener una mensajería privada. Pedirle la letra al CDN de Google le manda la IP del usuario a Google en cada carga — justo en la pantalla donde alguien está decidiendo si se fía de nosotros. 2. Sin salida a internet, con el CDN los titulares caen a la fuente del sistema EN SILENCIO. No hay error: sólo un portal que deja de parecerse a Element. Que el fallo sea invisible es lo que lo hace caro. El font-weight declara un RANGO, no un número, y no es cosmético: cada fichero es un font VARIABLE. Con un peso fijo, los pesos que no coincidieran saldrían SINTETIZADOS — negrita falsa, trazo deformado — en vez de usar el trazo real de la fuente. Los ficheros los sirve el portal leyendo installer/web/fuentes/ por lista blanca. NO SE COPIAN: duplicar los .woff2 es lo que hace que un día el wizard y el portal titulen con letras distintas. */ @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/fuentes/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/fuentes/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fuentes/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fuentes/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } /* --- 2 · COPIA AUTORIZADA DEL :root DE pia-tokens.css ----------------------- Copiado literalmente. La regla que más caro sale olvidar y que se repite aquí porque aquí es donde alguien la va a romper: EL AZUL DE PIA ES DECORATIVO. No pinta texto ni botones. Nunca. El color de ACCIÓN es la tinta negra. 18.42:1 contra 3.26:1. Y la otra: UN RELLENO Y LO QUE VA ENCIMA SON DOS TOKENS Y SE CAMBIAN JUNTOS. Ya mordió de verdad en este repo — un botón con fondo de tinta y el texto heredado dio 1.05:1, invisible, y sólo en un tema, así que las pruebas del otro no podían verlo. */ :root { /* Cimientos. NO los uses en un componente: usa los roles de abajo. */ --pia-blanco: #FFFFFF; --pia-nieve: #FAFAFA; --pia-hueso: #F6F6F6; --pia-humo: #EFEFEF; --pia-gris-100: #E7E7E7; --pia-gris-200: #D9D9D9; --pia-gris-300: #CFCFCF; --pia-gris-400: #9B9B9B; --pia-gris-500: #717171; --pia-gris-600: #6E6E6E; --pia-gris-800: #5B5B5B; --pia-tinta: #141414; --pia-azul-claro: #AAC6E6; --pia-azul: #7091BA; --pia-ambar: #8A6D2E; --pia-ambar-fondo: #FBF7EE; --pia-ambar-borde: #EBDCBB; --pia-rojo: #8E403C; --pia-rojo-fondo: #FAEFEE; --pia-rojo-borde: #E9CFCD; --pia-rojo-solido: #B4534E; /* Superficies */ --pia-fondo: var(--pia-blanco); --pia-superficie: var(--pia-hueso); --pia-superficie-alta: var(--pia-blanco); --pia-superficie-sutil: var(--pia-nieve); /* Líneas */ --pia-borde: var(--pia-gris-100); --pia-borde-fuerte: var(--pia-gris-200); --pia-borde-maximo: var(--pia-gris-300); /* Texto — dos niveles reales, no tres. Ver pia-tokens.css. */ --pia-texto: var(--pia-tinta); /* 18.42:1 · AA y AAA */ --pia-texto-segundo: var(--pia-gris-600); /* 5.10:1 · AA */ --pia-texto-tercero: var(--pia-gris-500); /* 4.88:1 · AA */ --pia-apagado: var(--pia-texto-tercero); /* Acción: TINTA, no azul. El relleno y su texto, juntos. */ --pia-accion: var(--pia-tinta); --pia-accion-hover: #000000; --pia-accion-texto: var(--pia-blanco); --pia-accion-apagada: var(--pia-tinta); /* Decoración: el azul, y sólo bordes y rellenos sin letra. */ --pia-decor-desde: var(--pia-azul-claro); /* 1.76:1 — sólo relleno */ --pia-decor-hasta: var(--pia-azul); /* 3.26:1 — no es texto */ --pia-decor-degradado: linear-gradient(135deg, var(--pia-decor-desde), var(--pia-decor-hasta)); /* Estados. El ámbar es ADVERTENCIA y nada más. */ --pia-aviso: var(--pia-ambar); --pia-aviso-fondo: var(--pia-ambar-fondo); --pia-aviso-borde: var(--pia-ambar-borde); --pia-error: var(--pia-rojo); --pia-error-fondo: var(--pia-rojo-fondo); --pia-error-borde: var(--pia-rojo-borde); --pia-error-solido: var(--pia-rojo-solido); --pia-error-solido-texto: var(--pia-blanco); /* Iconos. Un icono que comunica algo necesita >=3:1 (WCAG 1.4.11). */ --pia-icono: var(--pia-texto); --pia-icono-segundo: var(--pia-texto-segundo); /* Tipografía */ --pia-fuente-titular: 'Space Grotesk',-apple-system,sans-serif; --pia-fuente-cuerpo: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --pia-txt-sello: 10.5px; --pia-txt-menudo: 11.5px; --pia-txt-nota: 12.5px; --pia-txt-control: 13px; --pia-txt-cuerpo: 14.5px; --pia-txt-campo: 16px; /* NO LO BAJES: Safari iOS hace zoom por debajo */ --pia-txt-titulo: 19px; --pia-txt-display: 24px; --pia-peso-normal: 400; --pia-peso-medio: 500; --pia-peso-fuerte: 600; --pia-alto-cuerpo: 1.55; --pia-alto-titular: 1.15; --pia-track-display: -.5px; --pia-track-titulo: -.3px; --pia-track-suelto: .2px; /* Espacio y forma */ --pia-esp-1: 5px; --pia-esp-2: 9px; --pia-esp-3: 11px; --pia-esp-4: 14px; --pia-esp-5: 18px; --pia-esp-6: 22px; --pia-esp-7: 30px; --pia-radio-campo: 10px; --pia-radio-boton: 11px; --pia-radio-fila: 12px; --pia-radio-tarjeta: 20px; --pia-radio-marca: 7px; --pia-radio-redondo: 50%; --pia-ancho-app: 520px; --pia-transicion: .15s; /* El aire del lienzo. Estaba aquí abajo como --portal-margen / --portal-aire-tarjeta y ahora son del canon (nodo fe7d6f41): los MISMOS valores con el nombre del sistema, porque home.html los necesitaba y ya habían derivado —el portal ponía 32px de margen y home 30px— antes de que existiera una tercera pantalla. ESTÁN EN ESTE BLOQUE Y NO EN EL DE ABAJO A PROPÓSITO. `rootDe`, en scripts/verificar-tokens.mjs, sólo lee el PRIMER :root de cada consumidor: declararlos en el :root del portal habría sido ponerles el nombre del canon sin que nadie los compare nunca con él — una promoción cosmética, verde y sin cubrir nada. Aquí sí se verifican. */ --pia-margen-lienzo: 32px; /* margen del lienzo · 16px a ≤480px */ --pia-aire-tarjeta: 30px; /* aire de la tarjeta · 20px a ≤480px */ } /* La otra mitad de esos dos tokens, copiada del canon igual que el bloque de arriba. Va junta a propósito: son cuatro valores y una sola decisión, y el par de móvil no se deduce del de escritorio —16 y 20 no están en la escala --pia-esp-*, se midieron a 390px reales (LEEME-DISENO §10 M2)—. */ @media (max-width: 480px) { :root { --pia-margen-lienzo: 16px; --pia-aire-tarjeta: 20px; } } /* Alias cortos del canon. Se copian para que la copia sea fiel de verdad; el código nuevo del portal usa los nombres --pia-*. */ :root { --bg: var(--pia-fondo); --card: var(--pia-superficie); --row: var(--pia-superficie-alta); --line: var(--pia-borde); --line2: var(--pia-borde-fuerte); --line3: var(--pia-borde-maximo); --ink: var(--pia-texto); --muted: var(--pia-texto-segundo); --faint: var(--pia-apagado); --blue1: var(--pia-decor-desde); --blue2: var(--pia-decor-hasta); --warn: var(--pia-aviso); --warn-bg: var(--pia-aviso-fondo); --warn-line: var(--pia-aviso-borde); --err: var(--pia-error); --err-bg: var(--pia-error-fondo); --err-line: var(--pia-error-borde); --disp: var(--pia-fuente-titular); --sans: var(--pia-fuente-cuerpo); } /* --- 3 · COMPONENTES · copia de pia-componentes.css ------------------------- Tarjeta, botón, campo, fila, aviso, píldora, icono. Escritos enteramente sobre los tokens de arriba: si encuentras un literal aquí, es un fallo. */ *, *::before, *::after { box-sizing: border-box; } .pia-lienzo { margin: 0; font-family: var(--pia-fuente-cuerpo); background: var(--pia-fondo); color: var(--pia-texto); font-size: var(--pia-txt-cuerpo); line-height: var(--pia-alto-cuerpo); -webkit-font-smoothing: antialiased; } .pia-app { width: 100%; max-width: var(--pia-ancho-app); margin: 0 auto; } /* Marca */ .pia-marca { display: flex; align-items: center; gap: var(--pia-esp-3); } .pia-marca__sello { width: 26px; height: 26px; display: block; flex: none; } .pia-marca__nombre { font-family: var(--pia-fuente-titular); font-weight: var(--pia-peso-fuerte); font-size: var(--pia-txt-titulo); letter-spacing: var(--pia-track-titulo); } /* Tarjeta. El aire sale de --pia-aire-tarjeta, que lleva su media query dentro, y no de --pia-esp-7, que vale lo mismo en escritorio pero no encoge. Esta línea decía --pia-esp-7 igual que el canon hasta el nodo 5a9aeaa2, y el portal no lo notaba porque .portal-tarjeta se lo pisaba más abajo: el fallo estaba, tapado. Al arreglarse el canon esa línea de abajo se quedó sin nada que pisar y se fue. */ .pia-tarjeta { background: var(--pia-superficie); border-radius: var(--pia-radio-tarjeta); padding: var(--pia-aire-tarjeta); } .pia-tarjeta__kicker { font-size: var(--pia-txt-nota); color: var(--pia-texto-tercero); letter-spacing: var(--pia-track-suelto); margin-bottom: var(--pia-esp-2); } .pia-tarjeta__titulo { font-family: var(--pia-fuente-titular); font-size: var(--pia-txt-display); font-weight: var(--pia-peso-medio); letter-spacing: var(--pia-track-display); line-height: var(--pia-alto-titular); margin: 0 0 var(--pia-esp-1); } /* EL TITULAR RECIBE EL FOCO EN CADA CAMBIO DE PANTALLA, a propósito: el router se lo lleva (tabindex="-1") para que un lector de pantalla anuncie dónde ha aterrizado el usuario en vez de dejarlo callado al fondo del documento. Lo que faltaba era vestir ese foco. Sin esta regla, Chrome pinta SU anillo por defecto (#005FCC, pegado al texto), que no es un color de PIA y no se parece a ningún otro foco del producto — todos los demás son `2px solid var(--pia-decor-hasta)` con 2px de aire. Se veía en LAS CUATRO pantallas, en cada navegación, y ningún autor podía notarlo: cada uno lo veía sólo en la suya y ahí parecía intencionado. Lo encontró la segunda mirada del 17-ago-2026, que es exactamente para lo que existe. Y `verificar-tokens.mjs` NO puede cazarlo, porque no hay ningún literal que denunciar: el defecto es una AUSENCIA de regla, y el color equivocado lo pone el navegador. Es un recordatorio de que ese verificador mira lo que se escribe, no lo que se ve. */ .pia-tarjeta__titulo:focus-visible { outline: 2px solid var(--pia-decor-hasta); outline-offset: 2px; border-radius: var(--pia-radio-campo); /* que el anillo no muerda la letra */ } .pia-tarjeta__entrada { color: var(--pia-texto-segundo); margin: 0 0 var(--pia-esp-6); } .pia-separador { height: 1px; background: var(--pia-borde); border: 0; margin: var(--pia-esp-5) 0; } /* Botones. El primario es TINTA. Radio 11px: ni 8 ni 12. */ .pia-boton { appearance: none; border: 0; border-radius: var(--pia-radio-boton); padding: var(--pia-esp-4) var(--pia-esp-5); font-family: inherit; font-size: var(--pia-txt-cuerpo); font-weight: var(--pia-peso-medio); letter-spacing: .1px; cursor: pointer; width: 100%; background: var(--pia-accion); color: var(--pia-accion-texto); /* la pareja del relleno, siempre */ transition: var(--pia-transicion); } .pia-boton:hover { background: var(--pia-accion-hover); } .pia-boton:disabled { opacity: .32; cursor: default; background: var(--pia-accion-apagada); /* opacidad, no otro gris */ } .pia-boton:focus-visible { outline: 2px solid var(--pia-decor-hasta); /* 3.26:1 · pasa 1.4.11 */ outline-offset: 2px; } .pia-boton--segundo { background: var(--pia-superficie-alta); border: 1px solid var(--pia-borde-fuerte); color: var(--pia-texto); } .pia-boton--segundo:hover { border-color: var(--pia-texto); background: var(--pia-superficie-alta); } .pia-boton--fantasma { background: transparent; color: var(--pia-texto-segundo); border: 0; padding: var(--pia-esp-3); } .pia-boton--fantasma:hover { color: var(--pia-texto); background: transparent; } /* Campos */ .pia-campo { width: 100%; border: 1px solid var(--pia-borde-fuerte); border-radius: var(--pia-radio-campo); padding: var(--pia-esp-3) var(--pia-esp-4); font-family: inherit; font-size: var(--pia-txt-campo); /* 16px. No es estética: ver tokens. */ color: var(--pia-texto); background: var(--pia-superficie-alta); transition: var(--pia-transicion); } .pia-campo::placeholder { color: var(--pia-texto-tercero); } .pia-campo:focus { outline: none; border-color: var(--pia-texto); } .pia-campo:focus-visible { outline: 2px solid var(--pia-decor-hasta); outline-offset: 1px; } .pia-campo__etiqueta { display: block; font-size: var(--pia-txt-nota); font-weight: var(--pia-peso-fuerte); margin-bottom: var(--pia-esp-1); } .pia-campo__ayuda { font-size: var(--pia-txt-menudo); color: var(--pia-texto-tercero); /* texto: 4.88:1, no --pia-apagado a ciegas */ line-height: 1.45; margin-top: var(--pia-esp-1); } /* Filas */ .pia-fila { display: flex; align-items: center; gap: var(--pia-esp-4); padding: var(--pia-esp-4); border: 1px solid var(--pia-borde); border-radius: var(--pia-radio-fila); background: var(--pia-superficie-alta); margin-bottom: var(--pia-esp-2); } /* La mitad que siempre se olvida: sin min-width:0 un texto largo NO encoge, reclama el ancho de su contenido y empuja a sus vecinos fuera de la caja. */ .pia-fila__cuerpo { flex: 1; min-width: 0; } .pia-fila__titulo { font-weight: var(--pia-peso-fuerte); font-size: var(--pia-txt-cuerpo); } .pia-fila__nota { color: var(--pia-texto-segundo); font-size: var(--pia-txt-nota); margin-top: 1px; } /* Avisos. Ninguno es azul: el azul no significa nada, sólo decora. */ .pia-aviso { border-radius: var(--pia-radio-boton); padding: var(--pia-esp-3) var(--pia-esp-4); font-size: var(--pia-txt-nota); line-height: 1.5; background: var(--pia-aviso-fondo); border: 1px solid var(--pia-aviso-borde); color: var(--pia-aviso); } .pia-aviso--error { background: var(--pia-error-fondo); border-color: var(--pia-error-borde); color: var(--pia-error); } .pia-aviso--nota { background: var(--pia-superficie-sutil); border: 1px solid var(--pia-borde); border-left: 3px solid var(--pia-decor-hasta); /* aquí sí, y sólo de filete */ color: var(--pia-texto-segundo); } /* Píldora de estado. Regla de pigmento: el color marca si hace falta ACTUAR. */ .pia-pildora { display: inline-flex; align-items: center; gap: var(--pia-esp-1); font-size: var(--pia-txt-nota); font-weight: var(--pia-peso-fuerte); padding: 7px var(--pia-esp-3); border-radius: 8px; border: 1px solid var(--pia-borde-fuerte); color: var(--pia-texto-segundo); } .pia-pildora--activa { background: var(--pia-humo); color: var(--pia-texto); border-color: transparent; } .pia-pildora--activa::before { content: ""; width: 6px; height: 6px; border-radius: var(--pia-radio-redondo); background: var(--pia-accion); } .pia-pildora--error { background: var(--pia-error-fondo); border-color: var(--pia-error-borde); color: var(--pia-error); } /* Iconos: SVG inline, cero emojis. currentColor a propósito, para que el icono herede el color de su etiqueta y no haya que pintarlo aparte. */ .pia-icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pia-icono--segundo { color: var(--pia-icono-segundo); } /* ============================================================================= 4 · LO QUE ES SÓLO DEL PORTAL ============================================================================= Aquí abajo viven las reglas S1-S6 del plan (adjunto del nodo 95147ad2). Se escribieron después de MEDIR una pantalla real de 390px, no antes. */ /* --- El lienzo del portal --------------------------------------------------- */ .portal-lienzo { min-height: 100vh; min-height: 100dvh; /* dvh: en un móvil la barra del navegador se mueve y 100vh deja un hueco que aparece y desaparece */ display: flex; align-items: center; justify-content: center; padding: var(--pia-margen-lienzo); } /* S2 · EL AIRE ES LO QUE SE ADAPTA, NUNCA LA LETRA. A 390px el ancho útil pasa de 266px a 318px (+19,5%) sin bajar ni una fuente. Estas dos ya NO se declaran aquí: son --pia-margen-lienzo y --pia-aire-tarjeta, viven en el canon y su copia autorizada está arriba, con el resto del :root. Se subieron cuando home.html necesitó las mismas y las volvió a escribir a mano (nodo fe7d6f41). Si hay que cambiarlas, se cambian en element/brand/pia-tokens.css y bajan aquí, no al revés. */ /* S1 · UN SOLO PUNTO DE CORTE. Un segundo breakpoint sería inventar un caso que nadie ha medido. Los valores de móvil de los dos tokens están arriba, en el @media que acompaña a la copia del :root; aquí sólo queda lo que es del portal y de nadie más. */ @media (max-width: 480px) { /* El lienzo deja de centrar en vertical: con el teclado abierto, centrar empuja el campo debajo del teclado. Arriba y quieto. */ .portal-lienzo { align-items: flex-start; padding-top: var(--pia-esp-6); } } /* Aquí estaba `.portal-tarjeta { padding: var(--pia-aire-tarjeta) }`. Era un override de la capa del portal cuyo único trabajo era tapar que la copia de §3 seguía en --pia-esp-7; arreglada la copia (nodo 5a9aeaa2), pisaba un valor con el mismo valor. Medido al quitarlo: el portal sigue dando 20px de aire y 318px de ancho útil a 390px, que son los de LEEME-DISENO §10 M2. Si vuelve a hacer falta una línea así, mira antes si lo que falla es la copia de §3. */ /* --- S6 · DATO AJENO -------------------------------------------------------- MEDIDO, no supuesto: un dominio SIN GUIONES no tiene dónde romper, porque el navegador rompe después de un guion pero NO en los puntos. `centromediconuestrasenoradelcarmen.pia.example` pide 389px dentro de una caja de 266px y se sale sin barra de scroll, sin recorte visible y sin ningún error: no parece roto, simplemente faltan letras. Se aplica a todo lo que venga de fuera: dominio, correo, código, token. Y las DOS mitades — sin min-width:0 en el padre flex, la primera no hace nada. */ .portal-dato { overflow-wrap: anywhere; min-width: 0; } /* El dominio, cuando es el protagonista de la pantalla. */ .portal-dominio { overflow-wrap: anywhere; min-width: 0; font-weight: var(--pia-peso-fuerte); color: var(--pia-texto); } /* --- S5 · SUELO DE TOQUE ---------------------------------------------------- 44px de alto mínimo. No es un cambio: .pia-boton y .pia-campo ya lo cumplen (medidos 0 controles por debajo de 44px). Es un suelo declarado para que un botón "compacto" de mañana no lo rompa en silencio. */ .pia-boton, .pia-campo, .portal-toque { min-height: 44px; } /* --- Piezas del portal ------------------------------------------------------ */ .portal-pila { display: flex; flex-direction: column; gap: var(--pia-esp-2); } .portal-encabezado { margin-bottom: var(--pia-esp-6); } .portal-lema { color: var(--pia-texto-segundo); font-size: var(--pia-txt-nota); margin: var(--pia-esp-1) 0 0 37px; /* alineado bajo el nombre, no bajo el sello */ } /* Una fila que además es botón: los dos caminos de la portada. Hereda de .pia-fila y sólo añade lo de ser pulsable. */ .portal-camino { display: flex; align-items: center; gap: var(--pia-esp-4); width: 100%; text-align: left; padding: var(--pia-esp-4); border: 1px solid var(--pia-borde-fuerte); border-radius: var(--pia-radio-fila); background: var(--pia-superficie-alta); font-family: inherit; font-size: var(--pia-txt-cuerpo); color: var(--pia-texto); cursor: pointer; transition: var(--pia-transicion); } .portal-camino:hover { border-color: var(--pia-texto); } .portal-camino:focus-visible { outline: 2px solid var(--pia-decor-hasta); outline-offset: 2px; } .portal-camino__cuerpo { flex: 1; min-width: 0; } /* display:block EN LOS DOS, y no es un detalle de estilo: son , así que por defecto van EN LÍNEA y el resultado se lee «Ya tengo un enlace de PIALa dirección que te dimos». Sin desborde, sin recorte y sin que ninguna medición lo note — la sonda daba BIEN sobre esto. Lo cazó mirar la captura. */ .portal-camino__titulo { display: block; font-weight: var(--pia-peso-fuerte); } .portal-camino__nota { display: block; color: var(--pia-texto-segundo); font-size: var(--pia-txt-nota); margin-top: 2px; overflow-wrap: anywhere; } /* El camino principal se distingue por PESO y por el orden, no por color: el color está reservado a lo que reclama una acción (regla de pigmento). */ .portal-camino--principal { background: var(--pia-accion); color: var(--pia-accion-texto); /* la pareja del relleno, nombrada aquí */ border-color: transparent; } .portal-camino--principal:hover { background: var(--pia-accion-hover); border-color: transparent; } .portal-camino--principal .portal-camino__nota { color: var(--pia-accion-texto); opacity: .72; } /* --- La cabecera del plan Free: el nombre y su píldora ---------------------- `flex-wrap` a propósito: a 320px «Free» + «Próximamente» piden más que los 266px útiles de la tarjeta, y envolver dos líneas es preferible a un `overflow-wrap` en la palabra «Próximamente», que no tiene dónde partirse. */ .portal-plan__cabecera { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pia-esp-2); } /* --- La antesala del dominio guardado --------------------------------------- */ .portal-cuenta { font-size: var(--pia-txt-nota); color: var(--pia-texto-tercero); text-align: center; margin-top: var(--pia-esp-4); /* Reserva su sitio: sin esto, al cancelar la cuenta el texto desaparece y todo lo de arriba pega un salto. */ min-height: 1.5em; } /* --- Notas y pies ----------------------------------------------------------- */ .portal-pie { font-size: var(--pia-txt-menudo); color: var(--pia-texto-tercero); text-align: center; margin-top: var(--pia-esp-5); } .portal-nota-suelta { font-size: var(--pia-txt-nota); color: var(--pia-texto-segundo); line-height: 1.5; } /* --- Movimiento ------------------------------------------------------------ Un punto que late en GRIS. La regla de pigmento dice que el color marca si hace falta actuar, así que "esto está vivo" —que se resuelve solo si esperas— se dice con MOVIMIENTO y no gastando un color. */ .portal-latido { width: 8px; height: 8px; flex: none; border-radius: var(--pia-radio-redondo); background: var(--pia-texto-tercero); animation: portal-latir 1.6s ease-in-out infinite; } @keyframes portal-latir { 0%, 100% { opacity: .28; } 50% { opacity: 1; } } /* Quien pide menos movimiento no recibe ninguno, y entonces lo vivo se distingue por PESO de texto — que es lo que hace .portal-vivo. */ @media (prefers-reduced-motion: reduce) { .portal-latido { animation: none; opacity: 1; } * { transition-duration: .01ms !important; } } .portal-vivo { font-weight: var(--pia-peso-fuerte); color: var(--pia-texto); } /* --- Campo ------------------------------------------------------------------ El error va DEBAJO del campo y nunca arriba del formulario: en un móvil el teclado ocupa media pantalla y un error a 400px de scroll no lo ve nadie. */ .portal-campo { display: block; } .portal-campo .pia-aviso { margin-top: var(--pia-esp-2); } /* S6 SOBRE LA LÍNEA DE AYUDA, y va AQUÍ y no arriba a propósito: el bloque 3 es una copia de pia-componentes.css y una copia que "mejora" lo que dice copiar deja de ser una copia. Esto es una decisión del portal, así que vive en la capa del portal, después de lo que pisa — un override colocado antes de su objetivo no falla, simplemente no hace nada. Lo levantó quien escribe pantalla-alta.js: su línea de ayuda imprime el dominio derivado ., con el cliente escrito por un desconocido y la zona puesta por el operador. Es el caso de los 389px dentro de 266. Candidato a subir al sistema: toda línea de ayuda es sitio donde una pantalla acaba imprimiendo algo ajeno. */ .pia-campo__ayuda { overflow-wrap: anywhere; min-width: 0; } /* --- Pliegue ---------------------------------------------------------------- Lo que está pero no se enseña. Cerrado por defecto: una traza abierta convierte un problema en un susto. */ .portal-pliegue { border: 1px solid var(--pia-borde); border-radius: var(--pia-radio-fila); background: var(--pia-superficie-alta); } .portal-pliegue__resumen { display: flex; align-items: center; padding: var(--pia-esp-3) var(--pia-esp-4); font-size: var(--pia-txt-nota); font-weight: var(--pia-peso-fuerte); color: var(--pia-texto-segundo); cursor: pointer; list-style: none; } .portal-pliegue__resumen::-webkit-details-marker { display: none; } .portal-pliegue__resumen:hover { color: var(--pia-texto); } .portal-pliegue__resumen:focus-visible { outline: 2px solid var(--pia-decor-hasta); outline-offset: -2px; } /* La ÚNICA superficie del portal que scrollea, y puede porque no vive dentro de ningún lienzo con zoom. El detalle técnico de un error puede ser largo y no debe empujar los botones fuera de la pantalla. */ .portal-pliegue__cuerpo { margin: 0; padding: 0 var(--pia-esp-4) var(--pia-esp-4); max-height: 40vh; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--pia-txt-menudo); line-height: 1.5; color: var(--pia-texto-segundo); white-space: pre-wrap; /* pre a secas no envuelve y desborda a lo ancho */ } /* --- Utilidades ------------------------------------------------------------- */ /* Para lectores de pantalla y nada más. */ .portal-solo-lectura-de-pantalla { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .portal-oculto { display: none; }