/* estilo.css — mundo Brasa: pieza de museo en penumbra calida. Sin un solo hex aqui: el color vive en tokens.css (test_web_ui_estructura lo vigila). */ * { box-sizing: border-box; } html { min-width: 0; background: var(--fondo); scroll-padding-top: calc(var(--alto-barra) + 18px); } body { min-width: 0; min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--fondo); color: var(--hueso); font-family: var(--prosa); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, textarea { font: inherit; } /* Superficies del navegador desde la paleta: el cursor de texto tambien es brasa. */ input, textarea { caret-color: var(--catodo); } ::selection { background: color-mix(in srgb, var(--catodo) 32%, transparent); color: var(--hueso); } :focus-visible { outline: 2px solid var(--catodo); outline-offset: 3px; } * { scrollbar-color: var(--bronce) var(--fondo); scrollbar-width: thin; } /* La misma scrollbar fina en bronce para WebKit, que no lee scrollbar-color. */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--bronce); border-radius: 4px; } ::-webkit-scrollbar-track { background: var(--fondo); } /* Un solo aire bajo el subrayado en toda la web. */ a { text-underline-offset: 3px; } .saltar { position: absolute; z-index: 40; top: 8px; left: 8px; padding: 8px 12px; transform: translateY(-160%); background: var(--panel); color: var(--hueso); font: 700 .75rem/1 var(--datos); } /* Al enfocarse es un boton de verdad y se toca con el dedo: 44px de alto y letra de 16px, el minimo que un telefono acierta (spec movil §5). El tamaño solo manda cuando aparece. */ .saltar:focus { transform: none; min-height: 44px; font-size: 1rem; } .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ——— barra superior fija: wordmark a la izquierda, cuatro secciones a la derecha ——— */ #barra { position: fixed; z-index: 30; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--alto-barra); padding: 0 24px; background: transparent; transition: background-color var(--t-seccion) ease; } body.leida #barra { background: color-mix(in srgb, var(--fondo) 86%, transparent); } .casa { margin: 0; color: var(--hueso); font: 500 .8125rem/1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; } /* El rotulo de la barra es un enlace a la portada. Sin esto sale en el azul del navegador y subrayado: el unico enlace de la casa que parece un enlace de otra pagina. */ .casa-enlace { color: inherit; text-decoration: none; } #secciones { display: flex; gap: 28px; padding: 0; margin: 0; list-style: none; } #secciones li { display: flex; } #secciones button { min-height: 44px; border: 0; border-bottom: 1px solid transparent; padding: 4px 0 0; background: none; color: var(--hueso-3); font: 500 .75rem/1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; cursor: pointer; transition: color var(--t-seccion) ease; } #secciones button:hover, #secciones button:focus-visible { color: var(--hueso); } /* Comunidad es un , no una pestana: la misma apariencia que los botones, sin el azul del navegador. */ #secciones > li > a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0 0; color: var(--hueso-3); font: 500 .75rem/1 var(--condensada); letter-spacing: var(--tracking-texto); text-decoration: none; transition: color var(--t-seccion) ease; } #secciones > li > a:hover, #secciones > li > a:focus-visible { color: var(--hueso); } #secciones button[aria-selected="true"] { color: var(--hueso); border-bottom-color: var(--filete-tecnologico); } .herramientas-item { position: relative; } .herramientas-menu { position: absolute; z-index: var(--capa-menu-herramientas); top: calc(100% + var(--desplazamiento-menu-herramientas)); right: 0; width: var(--ancho-menu-herramientas); min-width: 100%; padding: var(--padding-menu-herramientas); border: var(--grosor-menu-herramientas) solid var(--borde-menu-herramientas); border-radius: var(--radio-menu-herramientas); background: var(--fondo-menu-herramientas); box-shadow: var(--sombra-menu-herramientas); } .herramientas-menu[hidden] { display: none; } /* P9: puente sobre el hueco entre el boton y el menu. Sin el, al bajar el cursor se cruzan 8px que no son de `.herramientas-item`, salta `pointerleave` y el menu se cierra antes de llegar. */ .herramientas-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--desplazamiento-menu-herramientas) + var(--grosor-menu-herramientas)); } .herramientas-menu a { display: flex; align-items: center; min-height: var(--alto-menu-herramientas); padding: 0 var(--herramientas-enlace-padding-inline); border-left: var(--grosor-borde-menu-herramientas) solid transparent; color: var(--hueso-2); font: 500 var(--texto-menu-herramientas)/var(--linea-menu-herramientas) var(--condensada); text-decoration: none; } .herramientas-menu a:hover, .herramientas-menu a:focus-visible { border-left-color: var(--catodo); color: var(--hueso); } .herramientas-menu a[aria-current="page"] { border-left-color: var(--filete-tecnologico); color: var(--hueso); } .herramientas-menu a:focus-visible { outline: var(--grosor-foco-subnavegacion) solid var(--catodo); outline-offset: var(--desplazamiento-foco-subnavegacion); } /* El rotulo corto de una pestaña («Elisa» por «Chat con Elisa») vive solo en la barra inferior del telefono: aqui no ocupa sitio ni se lee. Sin esta regla los dos rotulos conviven en la barra de arriba —«Chat con ElisaElisa», 126px de mas— y el escritorio cambia sin que nadie lo pida. */ .rotulo-corto { display: none; } /* El indicador de actividad del chat vacio reservaba 26px entre «Chat con Elisa» y «Newsletter»: hueco irregular en la barra. Oculto, el hueco se iguala al resto. */ #chat-actividad[aria-hidden="true"] { display: none; } /* ——— contenido ——— */ #contenido { min-width: 0; min-height: 100vh; padding: calc(var(--alto-barra) + 24px) 42px 40px; } #contenido section[hidden] { display: none; } #contenido .respuesta, #contenido .prosa-panel, #contenido #vacio, #biblioteca-indice { max-width: 68ch; } /* ——— hero: titular / cerebro / nota, a un viewport ——— */ /* La pieza es el foco: su columna es ~44% del ancho util (regla del spec brasa plena: 42-48%) y esta lo bastante ancha para no recortarla: el TAMAÑO de la pieza lo pone su alto, que sale de lo que de verdad queda en el primer viewport (viewport menos barra, caja de pregunta y el resto de piezas menudas), y la columna solo tiene que darle sitio. Desde el 2026-09-22 la constelacion no existe: los 140px que su fila de orbes le quitaban al primer viewport se los queda la pieza (medido a 1440x900: de 450 a 590px de lado, 43% del ancho util frente al 33% de antes). */ #hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, 44vw) minmax(0, .8fr); gap: 18px; align-items: center; min-height: calc(100svh - var(--alto-barra) - var(--alto-entrada) - 40px); } .hero-tag { margin: 0 0 18px; color: var(--catodo); font: 500 .75rem/1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; } .hero-claim { position: relative; z-index: 2; } /* El velo: el dibujo desborda por detras del titular, asi que el texto necesita suelo propio. Un degradado de fondo, no un filtro, para no repintar la pieza en cada fotograma. */ .hero-claim::before { content: ""; position: absolute; z-index: -1; inset: -6% -14% -6% -50%; background: radial-gradient(ellipse at 35% 50%, color-mix(in srgb, var(--fondo) 92%, transparent) 0%, color-mix(in srgb, var(--fondo) 70%, transparent) 55%, transparent 78%); pointer-events: none; } /* El titular sube a display (techo 6rem, interletrado dentro de -0.04em) y se compone CON la pieza: la linea mas larga puede pisar el borde de la columna del cerebro, siempre por encima y con el velo detras para no bajar de AA. P13-I: el selector es una CLASE, no el tipo `h1`. El titular del heroe dejo de ser un

(el unico de la pagina es `#inicio-titulo`) y ahora es un

, que no trae ni el `font-size: 2em` del encabezado ni su `margin: 0` de navegador. Por eso TODO lo que lo hacia ver bien va aqui dentro, escrito a mano: es esta regla, y no la herencia de la etiqueta, la que le da el cuerpo, el margen cero y las mayusculas. */ .hero-claim-titulo { margin: 0; color: var(--hueso); font: 500 clamp(2.6rem, 4.2vw, 6rem)/0.95 var(--condensada); letter-spacing: var(--tracking-display); white-space: nowrap; text-transform: uppercase; } .hero-nota { grid-column: 3; grid-row: 1; position: relative; z-index: 2; max-width: 30ch; margin: 0; color: var(--hueso); font: 400 clamp(1.15rem, 1.55vw, 1.8125rem)/1.26 var(--prosa); } #cerebro-marco { position: relative; margin: 0; text-align: center; } /* El pozo de luz: una luz calida radial muy suave detras de la pieza, sobre --fondo. Estatica (nada de halo de color ni de latido) y sin capturar clics. El derrame horizontal es CERO a proposito: con -16% el pseudo-elemento sobresalia de la columna del heroe y ensanchaba el documento 39px a 390 (y 99px a 768) — scroll horizontal, que el spec prohibe. Medido con tests/web/elisa-orb.check.py, que vigila documentElement.scrollWidth. */ #cerebro-marco::before { content: ""; position: absolute; z-index: 0; inset: -10% 0; background: radial-gradient(ellipse at 50% 44%, var(--pozo), transparent 68%); pointer-events: none; } /* #cerebro ya NO es la pieza: es solo el HUECO que reserva en la rejilla del hero (en height, no en max-width). La pieza en si se DIBUJA centrada sobre ese hueco y desborda (regla de abajo), asi que crece por los dos lados sin mover el flujo ni solapar la firma con el formulario. Como el desbordamiento es simetrico y la pieza va en z-index: 1 por debajo del texto, lo que se sale por la izquierda cae detras del titular. El hueco reserva el ALTO de la masa dibujada. La pieza es CUADRADA (cerebro-bronce.png, 1254x1254) y `object-fit: contain` la dibuja al alto del hueco, asi que aqui el alto ES el lado de la pieza. Un vh suelto no vale — a 900px de viewport no cabe lo mismo que a 1080 — asi que sale de lo que de verdad queda en el primer viewport: viewport menos barra, caja de pregunta y firma. Los 150px sueltos son las piezas menudas: el padding de arriba de #contenido (24), la firma (28), los 53 que la caja de pregunta mide de mas sobre su token (149 reales frente a 96; eran 123 y 27 hasta que la Fase 3 le sumo la linea de ayuda de «/» y Ctrl+Enter, 26px mas) y la banda de la vista previa (30), que en el sitio publicado no existe — alli la pieza queda algo mayor — mas 15 de holgura. La constelacion ya no entra en la resta (2026-09-22): sus 140px son de la pieza. */ #cerebro { display: block; position: relative; z-index: 1; width: 100%; max-width: none; height: min(700px, calc(100svh - var(--alto-barra) - var(--alto-entrada) - 150px)); margin: 0 auto; transform: perspective(900px) rotateX(var(--giro-x, 0deg)) rotateY(var(--giro-y, 0deg)) scale(var(--escala, 1)); transition: transform 220ms ease-out, filter 400ms ease; filter: none; } #cerebro svg, #cerebro img, #cerebro canvas { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } /* Con una respuesta en pantalla el heroe deja de mandar: se recoge y la lectura ocupa su sitio. Antes la respuesta nacia debajo del pliegue y contestabas sin ver la contestacion. */ body.con-respuesta #hero { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(200px, 22vw); align-items: end; gap: 24px; padding-bottom: 8px; } body.con-respuesta .hero-claim-titulo { font-size: clamp(1.5rem, 2.4vw, 2.2rem); } body.con-respuesta .hero-nota { display: none; } body.con-respuesta #cerebro { height: min(220px, 26vh); } body.con-respuesta #cerebro svg, body.con-respuesta #cerebro img, body.con-respuesta #cerebro canvas { width: min(320px, 30vh); } #cerebro-firma { margin-top: 10px; color: var(--hueso-3); font: 500 .6875rem/1.5 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; } #cerebro-marco.encendido #cerebro-firma { color: var(--catodo); } /* 2026-09-22 — la constelacion de las cinco mentes y el orbe de la cabecera de cada respuesta se retiraron (spec del ajuste de efectos): los orbes bajo la pieza le quitaban sitio al cerebro y solo se queria el orbe que aparece mientras Elisa piensa. Aquel estado sigue vivo donde importa —el orbe crema de la espera y el indicador de la barra—, y la brasa de la vista es el boton de preguntar. La referencia, en git. */ /* ——— respuestas del chat ——— */ #respuestas { margin-top: 24px; } .respuesta { padding: 28px 0; margin-bottom: 8px; border-top: 1px solid var(--bronce); } .respuesta.golpea { animation: golpe var(--t-golpe) steps(2) both; } /* La llegada de una respuesta —el unico momento de movimiento de la web—: se revela de arriba abajo con un clip-path y un desenfoque que se resuelve, sobre un estado YA visible (si la animacion no corre, se lee igual). Sin `both` a proposito: no deja un `filter` ni un `clip-path` pegados a cada respuesta de la pagina. Con prefers-reduced-motion no corre (regla global, abajo). */ @keyframes llegada { from { clip-path: inset(0 0 100% 0); filter: blur(4px); } to { clip-path: inset(0); filter: blur(0); } } .respuesta.golpea.respuesta-nueva { animation: golpe var(--t-golpe) steps(2) both, llegada var(--t-llegada) var(--curva-llegada); } .respuesta-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid color-mix(in srgb, var(--bronce) 50%, transparent); color: var(--catodo); font: 500 1.05rem/1.1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; } .respuesta-cab time { color: var(--hueso-3); font: 400 .7rem/1 var(--datos); letter-spacing: var(--tracking-texto); } .respuesta-cab small { display: block; margin-top: 6px; color: var(--hueso-2); font: .7rem/1.3 var(--datos); letter-spacing: var(--tracking-texto); text-transform: none; } /* La cabecera firma: nombre y especialidad —y la hora, en el extremo opuesto—. Llevaba al lado el orbe de la mente que responde; se retiro el 2026-09-22 (una sola brasa por vista). */ .respuesta-quien { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; row-gap: 2px; } .respuesta-nombre { grid-column: 1; } .respuesta-texto { color: var(--hueso); font-size: 1.08rem; line-height: 1.7; } .respuesta-texto p { margin: 0; } .respuesta-texto p + p { margin-top: 18px; } /* ——— el acta: la respuesta como documento firmado ——— Cuatro lineas etiquetadas en rejilla —etiqueta a la izquierda en --hueso-3, valor a la derecha en --hueso-2, cifras tabulares—, separadas del cuerpo por aire y un filete discontinuo de --bronce, sin caja. Sustituye al viejo pie `respuesta-meta`: los mismos datos, leidos como lo que son, la certificacion de la respuesta. Lo que no hay se dice con palabras o con `n/d`, nunca con un cero. */ .respuesta-acta { margin-top: 30px; } .acta-pregunta { margin: 0 0 16px; color: var(--hueso-3); font: .72rem/1.5 var(--datos); } .acta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 26px; margin: 0; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--bronce) 60%, transparent); } .acta dt { color: var(--hueso-3); font: 500 .72rem/1.5 var(--datos); letter-spacing: var(--tracking-texto); } .acta dd { margin: 0; color: var(--hueso-2); font: .72rem/1.5 var(--datos); font-variant-numeric: tabular-nums; } .acta dd p { margin: 0; overflow-wrap: anywhere; } .acta dd p + p { margin-top: 5px; } .acta dd strong { color: var(--hueso-3); font-weight: 500; } /* Tarea C2, Paso 6: la traza tecnica vive plegada en el acta. Se marca con el rombo de

en lugar de la linea de siempre para que se vea de un golpe que ahi dentro hay algo que se abre; el :hover solo cambia el tono, no mueve nada. */ .acta-traza summary { color: var(--hueso-3); cursor: pointer; text-decoration: underline; text-decoration-color: var(--bronce); text-underline-offset: 3px; } .acta-traza summary:hover, .acta-traza summary:focus-visible { color: var(--catodo); } .acta-traza[open] summary { margin-bottom: 5px; } .acta-traza p { color: var(--hueso-3); } /* La ficha de transparencia comparte el Plegado con la traza —mismo rombo, mismo tono, mismo hover que no mueve nada—: para el lector es el mismo tipo de objeto, «hay mas aqui dentro», y un segundo lenguaje visual para lo mismo seria ruido en la parte que mas importa del acta. */ .acta-sello summary { color: var(--hueso-3); cursor: pointer; text-decoration: underline; text-decoration-color: var(--bronce); text-underline-offset: 3px; } .acta-sello summary:hover, .acta-sello summary:focus-visible { color: var(--catodo); } .acta-sello[open] summary { margin-bottom: 8px; } /* La ficha lleva sus PROPIAS etiquetas, en vez de heredar la retícula de `.acta`: sus pares etiqueta/valor van apilados y mas juntos, porque son datos tabular —un JSON— y no la lectura seguida de un veredicto. */ .sello-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--bronce) 35%, transparent); } .sello-datos dt { color: var(--hueso-3); font: 500 .68rem/1.5 var(--datos); } .sello-datos dd { margin: 0; color: var(--hueso-2); font: .68rem/1.55 var(--datos); } /* El JSON crudo es lo que se archiva, asi que se lee como se lee un volcado: monoespaciada, con su propio fondo y con scroll en vez de reventar la anchura del acta. */ .sello-json { margin: 12px 0 10px; padding: 12px 14px; max-height: 320px; overflow: auto; background: color-mix(in srgb, var(--fondo) 55%, transparent); border: 1px solid color-mix(in srgb, var(--bronce) 30%, transparent); border-radius: 3px; color: var(--hueso-2); font: .66rem/1.6 var(--datos); white-space: pre; overflow-wrap: normal; } .sello-descarga { font-size: .7rem; letter-spacing: var(--tracking-texto); } @media (max-width: 599px) { .sello-datos { grid-template-columns: minmax(0, 1fr); gap: 1px 0; } .sello-datos dd { margin-bottom: 8px; } } .acta a { color: var(--hueso-2); text-decoration-color: var(--bronce); text-decoration-thickness: 1px; } .acta a:hover, .acta a:focus-visible { color: var(--catodo); } .acta-acciones { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 18px 0 0; } .acta-acciones .accion.secundaria { font-size: .75rem; letter-spacing: var(--tracking-texto); } /* ——— F2 (spec §5): los seguimientos propuestos ——— Debajo de la respuesta y fuera de `.respuesta-texto`: es una invitacion a seguir, no parte del analisis, y el aviso de cierre tiene que seguir siendo la ultima linea de la prosa. Cada boton lleva el texto del modelo tal cual (textContent), asi que puede ser largo: se alinea a la izquierda y no se parte por la mitad sin sentido (`text-wrap: balance` en la linea de titulo). */ .seguimientos { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; } .seguimientos-titulo { flex-basis: 100%; margin: 0; color: var(--bronce); font-size: .72rem; letter-spacing: var(--tracking-rotulo); text-transform: uppercase; } .seguimientos .accion.secundaria { font-size: .78rem; letter-spacing: var(--tracking-texto); text-align: left; } /* El fallo al copiar se dice en el propio boton, en el color de fallo: no se traga. */ .acta-copiar[data-copiado="fallo"] { color: var(--aviso); border-bottom-color: var(--aviso); } /* En un movil estrecho la rejilla etiqueta/valor se apila: dos columnas dejan el valor en un hilo. */ @media (max-width: 599px) { .acta { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .acta dd { margin-bottom: 12px; } } .respuesta.recuerdo { opacity: .62; } .respuesta.error .respuesta-texto { color: var(--aviso); } /* El pie de la ultima respuesta se ve SIEMPRE: el rail del chat ya no repite firma, fuentes ni coste — enseña solo lo que la columna central no tiene— asi que esconderlo dejaba el dato sin ningun sitio donde vivir. */ /* ——— estado vacio: sugeridas e historial ——— */ #vacio { padding: 24px 0 8px; } .sugeridas { display: grid; gap: 10px; } .sugerida { min-height: 44px; border: 0; border-bottom: 1px solid var(--bronce); padding: 10px 0; background: none; color: var(--hueso-2); font: 500 .8125rem/1.4 var(--condensada); letter-spacing: var(--tracking-texto); text-align: left; text-transform: none; cursor: pointer; transition: color var(--t-seccion) ease; } .sugerida:hover, .sugerida:focus-visible { color: var(--hueso); } #historial { margin-top: 42px; color: var(--hueso-2); font: .75rem/1.5 var(--datos); } #historial summary { cursor: pointer; } #historial-lista { padding-left: 20px; } #historial-lista li { margin: 12px 0; cursor: pointer; } /* ——— entrada: subrayado y un solo boton brasa ——— */ #entrada { position: sticky; bottom: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; max-width: 68ch; padding: 20px 0 18px; background: linear-gradient(to top, var(--fondo) 78%, transparent); } #pregunta { min-width: 0; resize: vertical; border: 0; border-bottom: 1px solid var(--hueso); border-radius: 0; padding: 8px 2px; background: transparent; color: var(--hueso); caret-color: var(--catodo); } #pregunta::placeholder { color: var(--hueso-3); } /* La ayuda de la caja: como se llega a ella sin raton y como se envia. Discreta, en --hueso-3, bajo la caja (ocupa la fila que le deja la rejilla de #entrada, en movil y en escritorio). */ .entrada-ayuda { grid-column: 1 / -1; margin: 0; color: var(--hueso-3); font: 400 .75rem/1.5 var(--prosa); } .entrada-ayuda strong { color: var(--hueso-2); font-weight: 500; } /* «Nueva conversacion»: vive en la ayuda de la caja, que es donde esta el texto. Sin relleno ni filete —no compite con la brasa de Preguntar— y con el area de toque minima en el telefono. */ .entrada-nueva { min-height: 32px; margin-left: 6px; border: 0; border-bottom: 1px solid var(--bronce); border-radius: 0; padding: 2px 0; background: none; color: var(--hueso-2); font: 400 .75rem/1.5 var(--prosa); cursor: pointer; } .entrada-nueva:hover, .entrada-nueva:focus-visible { border-bottom-color: var(--catodo); color: var(--catodo); } .accion { min-height: 48px; border: 0; border-radius: 36px; padding: 14px 28px; background: var(--catodo); color: var(--catodo-tinta); font: 500 .875rem/1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; cursor: pointer; } .accion:disabled { cursor: wait; opacity: .55; } /* Una sola brasa por vista: el resto de acciones son secundarias, subrayado discontinuo sin relleno. */ .accion.secundaria { min-height: 44px; border-bottom: 1px solid var(--bronce); border-radius: 0; padding: 10px 0; background: none; color: var(--hueso); } .accion.secundaria:hover, .accion.secundaria:focus-visible { border-bottom-color: var(--catodo); color: var(--catodo); } /* ——— la respuesta al toque (spec movil 2026-09-22, §5). Global a proposito ——— En un telefono no hay :hover que avise de que el dedo ha llegado: la pulsacion tiene que verse sola. El navegador pinta su propio rectangulo azul al tocar un boton o un enlace; aqui se apaga y en su lugar el boton brasa baja el brillo y las secundarias aclaran su texto. La duracion es `--t-toque` y con prefers-reduced-motion la valvula global de abajo la deja en cero: el estado final es el mismo, sin coreografia. */ button, a, summary { -webkit-tap-highlight-color: transparent; } .accion { transition: filter var(--t-toque) linear, color var(--t-toque) linear; } .accion:active { filter: brightness(.85); } .accion.secundaria:active { filter: brightness(1.18); } /* ——— secciones de lectura (newsletter, cartera, biblioteca) ——— */ .seccion-cab { padding: 0; margin-bottom: 22px; } .seccion-cab h2 { margin: 0; color: var(--hueso); font: 500 clamp(2rem, 4vw, 3.4rem)/0.9 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; text-wrap: balance; } /* Cifras que cambian o se comparan en columna: todas del mismo ancho. */ .prosa-panel td, .respuesta-texto td, #instrumentos .cifra, .acta dd { font-variant-numeric: tabular-nums; } .prosa-panel { padding: 8px 0 0; font-size: 1.08rem; line-height: 1.7; color: var(--hueso); } .prosa-panel p { margin: 0; } .prosa-panel p + p { margin-top: 18px; } .lecturas { padding: 0; margin: 0; list-style: none; max-width: 68ch; } .lecturas li { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--bronce) 55%, transparent); } .lecturas strong { display: block; color: var(--hueso); font: 500 1.05rem/1.2 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; } .lecturas small { display: block; margin-top: 5px; color: var(--hueso-2); font: .72rem/1.4 var(--datos); font-variant-numeric: tabular-nums; } .lecturas li.esqueleto { pointer-events: none; } .lecturas li.esqueleto div { width: 40%; height: 1em; background: var(--fantasma); } /* El ancho se reserva con la medida, no con un fantasma detras del numero: el fantasma llevaba otra cadena («8.888,88» frente a «394,15 USD») y sobresalia como una raya sobre la cifra. */ .celda { display: inline-block; min-width: 11ch; font: 500 1.25rem/1 var(--condensada); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--catodo); } .sube { color: var(--catodo); } .baja { color: var(--aviso); } .lecturas li.por-revelar { opacity: 0; transform: translateY(8px); } .lecturas li.entra { opacity: 1; transform: none; transition: opacity var(--t-fila) ease var(--retardo, 0ms), transform var(--t-fila) ease var(--retardo, 0ms); } /* ——— biblioteca: indice por materias y lector ——— */ #biblioteca-indice .materia { margin-bottom: 34px; } #biblioteca-indice .materia h3 { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--bronce); color: var(--catodo); font: 500 .8125rem/1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; } #biblioteca-indice .materia ul { padding: 0; margin: 0; list-style: none; } /* Caja normal: 1.460 titulos en mayusculas se leian como un muro. */ #biblioteca-indice .materia button { display: block; width: 100%; min-height: 44px; border: 0; padding: 9px 0; background: none; color: var(--hueso-2); font: 400 1rem/1.35 var(--condensada); text-align: left; cursor: pointer; transition: color var(--t-seccion) ease; } #biblioteca-indice .materia button:hover, #biblioteca-indice .materia button:focus-visible { color: var(--hueso); } /* Leyendo una nota, el aparato del indice estorba: el filtro y su ayuda se apartan y volver es un enlace, no un boton que compite con la accion de la pagina. */ body.leyendo #biblioteca-filtro, body.leyendo #seccion-biblioteca > .seccion-nota { display: none; } #lectura-volver { display: block; min-height: 44px; border: 0; padding: 0 0 4px; margin-bottom: 10px; background: transparent; color: var(--hueso-3); font: 500 .72rem/1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; cursor: pointer; } #lectura-volver:hover, #lectura-volver:focus-visible { color: var(--catodo); } #lectura-meta { margin: 0 0 26px; color: var(--hueso-3); font: 400 .72rem/1.5 var(--datos); letter-spacing: var(--tracking-texto); } .lectura { max-width: 68ch; } /* Un enlace dentro de la prosa no compite con el texto: subrayado fino en brasa, tinta crema. */ .prosa-panel a, .respuesta-texto a { color: var(--hueso); text-decoration-color: var(--catodo); text-decoration-thickness: 1px; text-underline-offset: 3px; } .prosa-panel a:hover, .respuesta-texto a:hover, .prosa-panel a:focus-visible, .respuesta-texto a:focus-visible { color: var(--catodo); } /* P2 (2026-09-28) — el texto que se hornea dentro de la lectura (notas, legales y calculadoras) no lleva la clase `.prosa-panel` encima, así que sus enlaces se pintan con el azul por defecto del navegador: texto de otra página dentro de la de aquí. Heredan la tinta del párrafo y se distinguen con el filete de bronce, que es el mismo que usa el pie. */ #lectura-texto a, .legal a, .herramientas a { color: inherit; text-decoration-color: var(--bronce); } #lectura-texto a:hover, .legal a:hover, .herramientas a:hover { text-decoration-color: var(--hueso-2); } /* Una URL larga en un texto legal no puede empujar la pagina de lado a 390 px. */ .legal { overflow-wrap: anywhere; } /* P13: el titulo de la legal es ahora su

; con el tamano que tenia de

. */ .legal > h1:first-child { font-size: 1.5em; } #biblioteca-lectura > .accion { margin-bottom: 30px; } #lectura-titulo { margin: 0 0 14px; color: var(--hueso); font: 500 clamp(1.6rem, 3vw, 2.6rem)/0.95 var(--condensada); text-transform: none; } .prosa-panel h1, .prosa-panel h2, .prosa-panel h3, .prosa-panel h4, .respuesta-texto h1, .respuesta-texto h2, .respuesta-texto h3, .respuesta-texto h4 { margin: 34px 0 12px; color: var(--hueso); font-family: var(--condensada); font-weight: 500; line-height: 1.1; text-transform: none; } .prosa-panel h1, .respuesta-texto h1 { font-size: 1.7rem; } .prosa-panel h2, .respuesta-texto h2 { font-size: 1.4rem; } .prosa-panel h3, .prosa-panel h4, .respuesta-texto h3, .respuesta-texto h4 { font-size: 1.1rem; letter-spacing: var(--tracking-texto); } /* En el chat los encabezados son el esqueleto del analisis (el primero ES la conclusion y el ultimo suele ser el veredicto): van en brasa, como los rotulos de seccion del resto del sitio. El primero, ademas, un escalon mayor: es el titular. */ .respuesta-texto h1, .respuesta-texto h2, .respuesta-texto h3, .respuesta-texto h4 { color: var(--catodo); } .respuesta-texto > h2:first-child { font-size: 1.7rem; } .respuesta-texto > h2:first-child, .respuesta-texto > h3:first-child { margin-top: 0; } .prosa-panel p { margin: 0; } .prosa-panel p + p { margin-top: 16px; } .prosa-panel ul, .prosa-panel ol, .respuesta-texto ul, .respuesta-texto ol { margin: 16px 0; padding-left: 24px; } .prosa-panel li, .respuesta-texto li { margin: 6px 0; } .prosa-panel a, .respuesta-texto a { color: var(--catodo); } /* ==subrayado==: la idea a retener. Brasa bajo el crema, no otro color de texto. */ .prosa-panel u, .respuesta-texto u { text-decoration: underline; text-decoration-color: var(--catodo); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } /* mini-indice de la newsletter: saltos a las secciones (los h2 de la nota) */ .indice-news { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--bronce); } .indice-news a { color: var(--hueso-3); font: 500 .75rem/1.5 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; text-decoration: none; } .indice-news a:hover, .indice-news a:focus-visible { color: var(--catodo); } .prosa-panel blockquote, .respuesta-texto blockquote { margin: 20px 0; padding-left: 18px; border-left: 1px solid var(--bronce); color: var(--hueso-2); } .prosa-panel code, .respuesta-texto code { font-family: var(--datos); font-size: .92em; } .prosa-panel table, .respuesta-texto table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: .92rem; line-height: 1.5; } .prosa-panel th, .respuesta-texto th { color: var(--catodo); font: 500 .75rem/1.3 var(--condensada); letter-spacing: var(--tracking-texto); text-align: left; text-transform: none; } .prosa-panel th, .prosa-panel td, .respuesta-texto th, .respuesta-texto td { padding: 9px 12px 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--bronce) 55%, transparent); text-align: left; vertical-align: top; } .prosa-panel hr, .respuesta-texto hr { border: 0; border-top: 1px solid var(--bronce); margin: 28px 0; } /* ——— instrumentos ——— */ #instrumentos { display: none; } body.con-instrumentos #instrumentos { display: block; position: fixed; top: var(--alto-barra); right: 0; bottom: 0; width: var(--ancho-instrumentos); overflow-y: auto; padding: 34px 30px 40px; background: color-mix(in srgb, var(--fondo) 92%, transparent); color: var(--hueso-2); font: .72rem/1.55 var(--datos); } #instrumentos h2 { margin: 0 0 18px; color: var(--catodo); font: 500 .8rem/1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; } #instrumentos h3 { margin: 0 0 6px; color: var(--hueso-3); font: 400 .68rem/1 var(--datos); letter-spacing: var(--tracking-texto); text-transform: none; } #instrumentos .grupo { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--bronce); } #instrumentos .grupo:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; } #instrumentos p { margin: 4px 0; overflow-wrap: anywhere; } /* Saltos de materia del rail: botones secundarios, pero leidos como lista. Heredaban el centrado y el interletrado de .accion y los largos se partian centrados en dos lineas. */ #instrumentos .accion.secundaria { display: block; width: 100%; padding: 8px 0; font-size: .75rem; letter-spacing: var(--tracking-texto); text-align: left; } #instrumentos .cifra { display: block; margin: 4px 0 0; color: var(--catodo); font: 500 2.4rem/1 var(--condensada); } #instrumentos a { display: block; width: fit-content; margin-top: 6px; color: var(--hueso-2); text-decoration-color: var(--bronce); text-decoration-thickness: 1px; } #instrumentos a:hover, #instrumentos a:focus-visible { color: var(--catodo); } body.con-instrumentos #contenido { padding-right: calc(var(--ancho-instrumentos) + 42px); } /* ——— la moneda: una pieza, dos sitios ——— La capa es fixed y se coloca sobre el ancla que toque, midiendola con getBoundingClientRect. Va por encima de la barra (30) porque tiene que cruzarla. No se come clics: la pequeña deja pasar el del enlace de inicio, y solo la grande (`body.con-moneda`) los recibe para poder arrastrarse. */ #moneda { position: fixed; z-index: 31; top: 0; left: 0; pointer-events: none; will-change: transform, width, height; } #moneda canvas { pointer-events: none; } body.con-moneda #moneda canvas { pointer-events: auto; } #moneda img, #moneda canvas { display: block; width: 100%; height: 100%; } #moneda-ancla-barra { display: inline-block; width: 18px; height: 18px; margin-right: 9px; vertical-align: -4px; } #moneda-nicho { display: none; } /* 2026-09-15: corona el rail. La banda entre el texto y el rail (458px a 1440) era ancho muerto que estrangulaba la lectura; ahora la moneda se sienta centrada sobre la columna de instrumentos, que le guarda su alto. En `cuenta` no hay rail: la moneda ocupa el mismo sitio y el contenido reserva ese ancho, porque el canvas SI recibe clics (es arrastrable) y no puede pisar un boton. */ body.con-moneda #moneda-nicho { display: block; position: fixed; top: calc(var(--alto-barra) + 28px); right: calc((var(--ancho-instrumentos) - var(--moneda-grande)) / 2); width: var(--moneda-grande); height: var(--moneda-grande); } body.con-moneda.con-instrumentos #instrumentos { padding-top: calc(var(--moneda-grande) + 62px); } body.con-moneda:not(.con-instrumentos) #contenido { padding-right: calc(var(--ancho-instrumentos) + 42px); } @keyframes golpe { from { opacity: .25; filter: blur(6px); } to { opacity: 1; filter: blur(0); } } /* ——— la cartera del visitante ——— */ .seccion-nota { max-width: 68ch; margin: 8px 0 0; color: var(--hueso-3); font: 400 .9rem/1.5 var(--prosa); } #cartera-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 18px; } #cartera-form input { flex: 1 1 140px; min-width: 0; padding: 10px 12px; border: 1px solid var(--hueso-3); border-radius: 3px; background: transparent; color: var(--hueso); font: 400 .95rem/1.2 var(--prosa); } #boletin-ediciones { appearance: none; width: 100%; max-width: 420px; padding: 10px 34px 10px 0; border: 0; border-bottom: 1px solid var(--bronce); border-radius: 0; background: transparent; color: var(--hueso); font: 500 .8125rem/1.4 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; cursor: pointer; } #boletin-ediciones:focus-visible { outline: 2px solid var(--catodo); outline-offset: 3px; } .seccion-nota + #boletin-ediciones, #boletin-fecha + label + #boletin-ediciones { margin-top: 6px; } .indice-news { gap: 10px 26px; padding-bottom: 22px; margin-bottom: 20px; } #cartera-form input::placeholder { color: var(--hueso-3); } #cartera-form input:focus-visible { outline: 2px solid var(--catodo); outline-offset: 1px; } #cartera-form button { flex: 0 0 auto; } /* Absoluto, no `margin-left: auto`: la fila envuelve y con auto el boton se alineaba dentro de la linea envuelta, asi que su posicion cambiaba segun cuantos datos tuviera la posicion (una con plusvalia lo mandaba a un sitio y una sin ella a otro). Anclado a la derecha de la fila queda igual en todas. El padding-right reserva su hueco para que no pise a las cifras. */ /* Fila de instrumento en dos lineas: arriba el valor y su precio, abajo lo tuyo y como va. La version de columnas fijas no cabia en la medida de lectura y superponia la variacion con la plusvalia; aqui los datos fluyen y se reparten en varias lineas cuando hace falta. */ #cartera-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: baseline; padding: 16px 0 12px; } #cartera-lista .texto { grid-column: 1; grid-row: 1; } #cartera-lista .celda { grid-column: 2; grid-row: 1; justify-self: end; } #cartera-lista .datos { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px 20px; } #cartera-lista .datos small { display: inline-block; margin: 0; } #cartera-lista .quitar { grid-column: 2; grid-row: 2; justify-self: end; } #cartera-lista .quitar { padding: 4px 10px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--hueso-3); font: 500 .6875rem/1.4 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; cursor: pointer; } #cartera-lista .quitar:hover { border-color: var(--catodo); color: var(--catodo); } #cartera-vacia { color: var(--hueso-3); font: 400 1rem/1.5 var(--prosa); } #cartera-aviso:empty { display: none; } #cartera-aviso { margin: 0 0 12px; color: var(--catodo); font: 500 .8125rem/1.5 var(--prosa); } #cartera-preguntar { margin-top: 18px; } #cartera-pegar-area { margin: 22px 0 4px; border: 1px solid var(--hueso-2); border-radius: 10px; padding: 14px 16px; } #cartera-pegar-area summary { cursor: pointer; font: 500 .9375rem/1.4 var(--prosa); color: var(--hueso); } #cartera-pegar-area textarea { width: 100%; min-height: 120px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--hueso-2); border-radius: 8px; background: var(--panel); color: var(--hueso); font: 400 .875rem/1.5 var(--datos); } #cartera-pegar-area textarea:focus-visible { outline: 2px solid var(--catodo); outline-offset: 1px; } #cartera-pegar-aviso:empty { display: none; } #cartera-pegar-aviso { margin: 8px 0 0; color: var(--catodo); font: 500 .8125rem/1.5 var(--prosa); } #cartera-lista .bloque { width: 100%; color: var(--hueso-3); font: 400 .75rem/1.3 var(--prosa); } #biblioteca-filtro { width: 100%; max-width: 440px; margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--hueso-2); border-radius: 8px; background: var(--panel); color: var(--hueso); font: 400 .9375rem/1.4 var(--prosa); } #biblioteca-filtro:focus-visible { outline: 2px solid var(--catodo); outline-offset: 1px; } #seccion-biblioteca .seccion-nota { margin-bottom: 26px; } #biblioteca-indice .materia { scroll-margin-top: calc(var(--alto-barra) + 18px); } #biblioteca-sin-resultados { margin: 10px 0 0; } #cartera-preguntar[hidden] { display: none; } .aviso-legal { max-width: 68ch; margin: 18px 0 0; color: var(--hueso-3); font: 400 .8125rem/1.5 var(--prosa); } /* A1 (2026-09-27): el aviso de que quien responde es una IA, encima de la caja de pregunta. Mismo tono que `.seccion-nota` —una nota de la pagina, no un pie legal— y con su separacion propia: va pegado al formulario, asi que sin margen se leeria como parte de la caja. */ .aviso-ia { max-width: 68ch; margin: 0 0 10px; color: var(--hueso-3); font: 400 .9rem/1.5 var(--prosa); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } @media (max-width: 1199px) { body.con-instrumentos #contenido { padding-right: 42px; } /* El rail deja de ser columna: no hay hueco al que viajar. La moneda se queda en la barra. */ body.con-moneda #moneda-nicho { display: none; } body.con-instrumentos #instrumentos { position: static; width: auto; padding: 0 42px 60px; } /* En chat el rail cae al fondo de la pagina, lejos de la respuesta a la que contextua: fuera. */ body[data-seccion="chat"] #instrumentos { display: none; } } @media (min-width: 1200px) { /* En escritorio el indice de la newsletter vive en el rail (grupo 'Secciones'); debajo de 1200px el rail baja al final de la pagina y el indice de arriba es el que se queda. */ body.con-instrumentos .indice-news { display: none; } } @media (max-width: 999px) { #barra { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; height: var(--alto-barra); padding: 8px 18px 0; background: color-mix(in srgb, var(--fondo) 94%, transparent); } #secciones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 10px; padding-bottom: 0; } #secciones li { grid-column: span 2; } #secciones li:nth-child(n+4) { grid-column: span 3; } #secciones button { width: 100%; font-size: .8125rem; } #secciones > li > a { width: 100%; justify-content: center; font-size: .8125rem; } #secciones::-webkit-scrollbar { height: 4px; } #secciones::-webkit-scrollbar-thumb { background: var(--bronce); } #secciones button { white-space: nowrap; scroll-snap-align: start; } #contenido { padding: calc(var(--alto-barra) + 24px) 18px 40px; } /* Las tablas del boletin desbordaban el documento a 390px: scroll propio, nunca el de la pagina. */ .prosa-panel table, .respuesta-texto table { display: block; overflow-x: auto; } #hero { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 30px; padding-top: 20px; } body.con-respuesta #hero { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; } .hero-claim-titulo { max-width: none; } .hero-nota { grid-column: auto; grid-row: auto; max-width: 38ch; } /* 360, no 430: con la barra de dos filas, a 390px el pie de la pieza caia bajo la entrada fija. */ #cerebro { max-width: 360px; height: auto; } #cerebro svg, #cerebro img, #cerebro canvas { position: static; transform: none; width: 100%; height: auto; max-height: none; } .hero-claim::before { display: none; } #entrada { grid-template-columns: 1fr; background: var(--fondo); } body.con-instrumentos #instrumentos { padding: 0 18px 40px; } } @media (max-width: 999px) { #historial summary, .seccion-nota summary, #cartera-pegar-area summary { min-height: 44px; padding-block: 11px; } } /* panel de cuenta */ .cuenta-form { display: grid; gap: 14px; max-width: 36ch; margin: 18px 0; } .cuenta-form input { min-width: 0; padding: 10px 12px; border: 1px solid var(--hueso-3); border-radius: 3px; background: transparent; color: var(--hueso); font: 400 .95rem/1.2 var(--prosa); } .cuenta-form input::placeholder { color: var(--hueso-3); } .cuenta-form input:focus-visible { outline: 2px solid var(--catodo); outline-offset: 1px; } .cuenta-form .accion { justify-self: start; } .cuenta-aux { margin: 0; color: var(--hueso-2); font: 400 .9rem/1.5 var(--prosa); } .cuenta-aux a { color: var(--hueso); } /* La casilla de 18 años. Copia de `.foro-aceptar` (foro.css), que vive en otra hoja y otra pagina: aquí no se carga, y sin estas reglas la casilla sale con el borde y el relleno de los inputs de texto de arriba. El `label` va al lado, no debajo: es lo que hace clicable el texto. */ .cuenta-aceptar { display: flex; gap: var(--ds-esp-3); align-items: flex-start; color: var(--hueso-2); font: 400 var(--ds-pie)/1.5 var(--prosa); } .cuenta-aceptar input[type="checkbox"] { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--catodo); } .cuenta-aceptar a { color: var(--hueso); } #cuenta-mensaje { min-height: 1.4em; color: var(--hueso-2); } #cuenta-mensaje:empty { display: none; } #cuenta-mensaje.cuenta-error { display: block; color: var(--aviso); } #cuenta-google { margin: 6px 0 18px; } .cuenta-peligro { padding: 8px 0; border: 0; background: transparent; color: var(--aviso); font: 500 .8125rem/1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; cursor: pointer; } #cartera-resumen { margin: 14px 0 0; color: var(--hueso); font: 500 .9375rem/1.5 var(--prosa); } #cartera-fecha { margin: 4px 0 0; color: var(--hueso-3); font: 400 .8125rem/1.5 var(--prosa); } #cartera-lista select { max-width: 180px; padding: 4px 8px; border: 1px solid var(--hueso-3); border-radius: 3px; background: transparent; color: var(--hueso-2); font: 400 .75rem/1.3 var(--prosa); } #guardar-articulo { margin-left: 10px; padding: 8px 16px; border: 1px solid var(--hueso-3); border-radius: 3px; background: transparent; color: var(--hueso-2); font: 500 .6875rem/1.4 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: none; cursor: pointer; } #guardar-articulo:hover { border-color: var(--catodo); color: var(--catodo); } #cuenta-guardados { margin: 0 0 22px; } /* ——— 0.3 Ayuda de teclado: fuera donde no hay teclado ——— «Pulsa / … y envia con Ctrl+Enter» explica atajos a quien va con el dedo. Se apaga por capacidad (hover: none), no por ancho: un portatil tactil estrecho sigue teniendo teclado. */ @media (hover: none) { .entrada-ayuda { display: none; } } /* El atributo hidden lo apaga la hoja del navegador con display:none, y cualquier regla nuestra que ponga display (.cuenta-form es grid) lo revive: los cuatro formularios salian a la vez. Se cierra aqui para toda la app, no formulario a formulario, porque el mismo choque ya habia obligado a parchear #cartera-resumen y #cartera-fecha por id. */ [hidden] { display: none !important; } /* Lista de sugerencias del buscador de la cartera. */ #cartera-sugerencias { list-style: none; margin: 0.25rem 0 0; padding: 0; border: 1px solid var(--bronce); border-radius: 4px; max-height: 16rem; overflow-y: auto; } #cartera-sugerencias li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.6rem; cursor: pointer; } #cartera-sugerencias li:hover, #cartera-sugerencias li:focus { background: var(--fantasma); outline: none; } #cartera-sugerencias small { opacity: 0.7; } /* Tabla de revision de la cartera leida de una imagen. */ #cartera-foto-tabla { width: 100%; border-collapse: collapse; margin: 0.5rem 0; } #cartera-foto-tabla th, #cartera-foto-tabla td { padding: 0.3rem 0.4rem; text-align: left; border-bottom: 1px solid var(--bronce); } #cartera-foto-tabla input[type="text"], #cartera-foto-tabla input[type="number"], #cartera-foto-tabla input:not([type]) { width: 100%; min-width: 5rem; } /* Diagramas de la newsletter. `pre.mermaid` es el estado ANTES de que mermaid lo convierta en SVG, y tambien el estado final si mermaid no carga: por eso se estiliza como codigo legible en vez de esconderse. Un diagrama que no pinta deja su fuente a la vista, no un hueco. */ pre.mermaid { margin: 1.5rem 0; padding: 1rem; overflow-x: auto; text-align: center; background: var(--panel); border: 1px solid var(--bronce); border-radius: 6px; font-family: var(--datos); font-size: 0.85rem; line-height: 1.45; white-space: pre; } pre.mermaid[data-processed] { background: none; border: none; padding: 0; } pre.mermaid svg { max-width: 100%; height: auto; } /* perfil de inversor: el cuestionario y su tarjeta. Cero colores propios — todo por token. */ .perfil-form fieldset { border: 1px solid var(--hueso-3); border-radius: 4px; margin: 0 0 1rem; padding: 0.75rem 1rem; } .perfil-form legend { font-weight: 500; padding: 0 0.35rem; } .perfil-form label { display: block; margin: 0.35rem 0; cursor: pointer; } .perfil-form input[type="radio"] { margin-right: 0.5rem; } #perfil-tarjeta { border: 1px solid var(--hueso-3); border-radius: 4px; margin: 0 0 1.25rem; padding: 0.75rem 1rem; } #perfil-tarjeta p { margin: 0 0 0.5rem; } /* Pulido integral: jerarquía editorial, filtros visibles y campos con etiqueta. */ .campo-label { display: block; color: var(--hueso-2); font: 500 .875rem/1.4 var(--prosa); } input, select { font: inherit; min-height: 44px; } input::placeholder, textarea::placeholder { color: var(--hueso-3); opacity: 1; } #entrada { gap: 8px 18px; } #entrada > label { grid-column: 1 / -1; } #entrada > .accion { grid-column: 2; grid-row: 2; } .seccion-cab h2 { line-height: 1.08; letter-spacing: var(--tracking-display); } .seccion-nota { max-width: 68ch; line-height: 1.6; } .hero-nota { color: var(--hueso-2); line-height: 1.45; font-size: clamp(1rem, 1.3vw, 1.3rem); } #cerebro-firma { letter-spacing: var(--tracking-texto); font-size: .75rem; } .sugerida { letter-spacing: var(--tracking-texto); font-size: .9375rem; } .respuesta-cab { color: var(--hueso-2); letter-spacing: var(--tracking-texto); } .respuesta-texto h1, .respuesta-texto h2, .respuesta-texto h3, .respuesta-texto h4 { color: var(--hueso); } .prosa-panel h3, .prosa-panel h4, .respuesta-texto h3, .respuesta-texto h4 { letter-spacing: var(--tracking-texto); } .prosa-panel a, .respuesta-texto a { color: var(--hueso); } .prosa-panel th, .respuesta-texto th { color: var(--hueso-2); letter-spacing: var(--tracking-texto); font-size: .875rem; } #biblioteca-controles { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px 20px; max-width: 68ch; margin: 28px 0 36px; } #biblioteca-filtro, #biblioteca-materia { width: 100%; max-width: none; margin: 8px 0 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--bronce); border-radius: 4px; background: var(--panel); color: var(--hueso); } #biblioteca-controles .seccion-nota, #biblioteca-conteo { margin: 0; color: var(--hueso-3); font-size: .8125rem; line-height: 1.5; } #biblioteca-conteo { text-align: right; } #biblioteca-indice .materia h3 { color: var(--hueso); font-size: 1.15rem; line-height: 1.4; letter-spacing: var(--tracking-texto); padding-bottom: 12px; } #biblioteca-indice .materia { margin-bottom: 40px; } body.leyendo #biblioteca-controles, body.leyendo #seccion-biblioteca > .seccion-cab { display: none; } #lectura-titulo { line-height: 1.15; letter-spacing: var(--tracking-display); margin-top: 20px; } #lectura-meta { font: .875rem/1.5 var(--prosa); margin-bottom: 12px; } .lectura-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 32px; } #guardar-articulo { margin-left: 0; min-height: 44px; } #instrumentos { font-family: var(--prosa); } body.con-instrumentos #instrumentos { font: .8125rem/1.6 var(--prosa); } #instrumentos h2 { color: var(--hueso-2); } #instrumentos h3 { font: 500 .8125rem/1.4 var(--prosa); letter-spacing: var(--tracking-texto); } #cartera-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 16px; align-items: end; max-width: 68ch; } #cartera-form label { grid-row: 1; } #cartera-form input:not([type="hidden"]), #cartera-form > button { grid-row: 2; width: 100%; } #cartera-form label[for="cartera-titulos"], #cartera-titulos { grid-column: 2; } #cartera-form label[for="cartera-entrada"], #cartera-entrada { grid-column: 3; } #cartera-sugerencias { grid-column: 1 / -1; grid-row: 3; } #cartera-pegar-area { max-width: 68ch; border: 0; border-bottom: 1px solid var(--fantasma); border-radius: 0; padding: 8px 0; } #cartera-vacia { max-width: 52ch; margin: 32px 0; line-height: 1.7; } #boletin-ediciones { margin: 8px 0 24px; max-width: 100%; } .cuenta-form { gap: 8px; max-width: 400px; } .cuenta-form input { min-height: 48px; margin-bottom: 12px; } .cuenta-form .cuenta-aux { margin-top: 12px; } .cuenta-aux a { display: inline-block; padding-block: 12px; } @media (max-width: 999px) { #entrada > .accion { grid-column: 1; grid-row: auto; } #biblioteca-controles { grid-template-columns: 1fr; gap: 12px; } #biblioteca-conteo { text-align: left; } #cartera-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #cartera-form label[for="cartera-ticker"] { grid-column: 1 / -1; grid-row: 1; } #cartera-form #cartera-ticker { grid-column: 1 / -1; grid-row: 2; } #cartera-sugerencias { grid-row: 3; } #cartera-form label[for="cartera-titulos"] { grid-column: 1; grid-row: 4; } #cartera-form label[for="cartera-entrada"] { grid-column: 2; grid-row: 4; } #cartera-form #cartera-titulos { grid-column: 1; grid-row: 5; } #cartera-form #cartera-entrada { grid-column: 2; grid-row: 5; } #cartera-form > button { grid-column: 1 / -1; grid-row: 6; margin-top: 8px; } .prosa-panel th, .prosa-panel td, .respuesta-texto th, .respuesta-texto td { min-width: 120px; padding-block: 12px; } .hero-claim-titulo { font-size: clamp(2.1rem, 7.5vw, 4rem); } } /* ——— Fase 4: la lectura editorial ——— La newsletter abre con mancheta, la cartera con su franja de composicion y la biblioteca con columnas de fichero. Todo lo de aqui sale de tokens: ni un color ni una medida suelta. */ /* La mancheta: la fecha de la edicion como display sobre un filete doble fino de bronce. El formato en mayusculas es tipografico —lo decide esta regla, no el texto que escribe app.js—. Va con las dos clases porque `.seccion-cab h2` fija `text-transform: none` y le gana por especificidad: el titular de las demas secciones no se toca, y el de esta si. */ .seccion-cab .mancheta-fecha { margin: 0; padding-bottom: 12px; color: var(--hueso); font: 500 clamp(1.9rem, 3.4vw, 3rem)/1 var(--condensada); letter-spacing: var(--tracking-texto); text-transform: uppercase; } .seccion-cab .mancheta-fecha::after { content: ""; display: block; height: 2px; margin-top: 12px; border-top: 1px solid var(--bronce); border-bottom: 1px solid var(--bronce); } /* La linea de datos —antiguedad, tiempo de lectura y secciones— con el selector de edicion DENTRO: es un control de la linea, no un bloque aparte. Las cajas vacias no reservan su hueco. */ .mancheta-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 12px; color: var(--hueso-3); font: .8125rem/1.5 var(--datos); font-variant-numeric: tabular-nums; } .mancheta-datos > span:empty { display: none; } .mancheta-control { display: flex; align-items: center; gap: 10px; margin-left: auto; } .mancheta-control .campo-label { margin: 0; color: var(--hueso-3); font: .8125rem/1.5 var(--datos); } #boletin-ediciones { appearance: auto; width: auto; max-width: 100%; min-height: 44px; margin: 0; padding: 6px 10px; border: 1px solid var(--bronce); border-radius: 4px; background: var(--panel); color: var(--hueso); font: 500 .8125rem/1.4 var(--condensada); letter-spacing: var(--tracking-texto); cursor: pointer; } /* Las tablas de cifras: cabecera apagada y cuerpo con numeros tabulares, para comparar en columna. */ .prosa-panel th { color: var(--hueso-3); } /* C: la columna «Cifra» del boletin trae FRASES enteras («5,18% en el cierre verificado del 24-sep; 5,16% en la lectura…»), no un numero suelto. Con `nowrap` cada frase era una linea de mas de 600 px, la tabla daba 1.246 px dentro de una columna de 690 y cada fila 220 px casi vacios. */ .prosa-panel .col-cifra { text-align: left; white-space: normal; overflow-wrap: anywhere; } /* Plan elisa-respuesta C2: tablas del chat y del wiki desplazables DENTRO de si mismas en movil. */ .tabla { max-width: 100%; overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; } .tabla:focus-visible { outline: 1px solid var(--catodo); outline-offset: 2px; } .tabla table { min-width: 100%; } /* La derecha se queda solo en el chat, donde la columna SI es un numero suelto y se sigue comparando en vertical. En el boletin es texto corrido y alineado a la derecha se lee mal: por eso la regla de arriba va a la izquierda. `overflow-wrap` deja partir un valor largo sin romper la palabra, que es justo lo que `nowrap` hacia. */ .respuesta-texto .col-cifra { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .prosa-panel .col-cifra { font-variant-numeric: tabular-nums; } /* C: «Las cifras del dia» cabe en la columna que la sostiene. Con `table-layout: fixed` el ancho lo reparten las columnas y no la frase mas larga de la fila, que es lo que hacia que la tabla llegara a 1.246 px dentro de una columna de 690. El reparto es el de la spec: Dato ~22 %, Cifra ~30 % y la Lectura se queda con el resto —es la que cae fuera cuando falta sitio—. */ #boletin-texto table { table-layout: fixed; } #boletin-texto th:nth-child(1), #boletin-texto td:nth-child(1) { width: 22%; } #boletin-texto th:nth-child(2), #boletin-texto td:nth-child(2) { width: 30%; } /* El dato es el rotulo de la fila —hueso con peso 500— y la lectura es cuerpo apagado. La cifra se queda en el color de la prosa: es la que dice el numero, no la que lo grita. */ #boletin-texto td:first-child { color: var(--hueso); font-weight: 500; } #boletin-texto td:last-child { color: var(--hueso-2); } /* C — por debajo de 600 px la tabla deja de ser una rejilla y se apila en tarjetas. A 390 px solo se veia «Dato»: con la region desplazable el telefono tenia que arrastrar la tabla de lado a lado para leer la cifra, y la lectura no cabia en ningun sitio. Aqui cada `tr` es un bloque con su filete, cada `td` es una linea, y el orden es el de la lectura: el DATO como rotulo arriba, la CIFRA destacada en el mismo tono, y la LECTURA debajo en el tono apagado. La region `.tabla` deja de desplazar porque ya no hay nada que desplazar, y el `min-width: 120px` de la regla de 999 px se anula: 3 x 120 = 360 px no caben en los 354 px que deja el contenedor con sus 18 px de aire. */ @media (max-width: 599px) { .prosa-panel .tabla { overflow-x: visible; } .prosa-panel table, .prosa-panel tbody, .prosa-panel tr, .prosa-panel td { display: block; } .prosa-panel tr { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--bronce) 55%, transparent); } .prosa-panel tr:last-child { border-bottom: 0; } .prosa-panel td { min-width: 0; padding: 2px 0; border-bottom: 0; } /* Sin esto la fila guarda 12 px de aire arriba y 12 abajo (la regla de 999 px) y el hueco se ve justo en la tarjeta, que es donde mas llama la atencion: el aire va ENTRE tarjetas. */ .prosa-panel th, .prosa-panel td { padding-block: 0; } /* El `thead` se aparta con la tecnica de `.solo-lectores` —1 px y recorte— y NO con `display: none` lo borra tambien del arbol de accesibilidad, y quien lee con tecnologia asistiva se quedaria con una lista de filas sin decir que columna es cada una. */ .prosa-panel thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } /* Los anchos de las cabeceras YA NO mandan: son bloques, no columnas. Si el ancho se queda, la celda se queda en 22 % del ancho (77 px a 390) y el texto se parte en tres lineas por celda: es el mismo defecto de antes, en vertical. */ #boletin-texto th:nth-child(1), #boletin-texto td:nth-child(1), #boletin-texto th:nth-child(2), #boletin-texto td:nth-child(2) { width: auto; } #boletin-texto td:first-child { font: 500 .8125rem/1.4 var(--datos); letter-spacing: var(--tracking-texto); } } .respuesta-texto h2.valoracion { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--bronce); } /* ——— la franja de composicion de la cartera: el resumen antes del detalle ——— Una barra por divisa. La mayor posicion va en brasa —la unica brasa rellena de la vista— y el resto alterna hueso-3 y bronce. El tono es una trama para separar segmentos vecinos; el dato (ticker y %) va en texto dentro del segmento cuando cabe y siempre en la clave de debajo. */ .franja-area { margin: 18px 0 4px; } .franja { margin-bottom: 18px; } .franja-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; color: var(--hueso-3); font: 500 .6875rem/1.4 var(--datos); letter-spacing: var(--tracking-texto); } .franja-total { color: var(--hueso-2); font-variant-numeric: tabular-nums; } .franja-barra { display: flex; gap: 2px; height: var(--alto-franja); background: var(--fondo); } /* Sin relleno lateral: el flex-basis es 0 y el relleno se sumaria a cada segmento por igual, lo que romperia la proporcion. El texto va centrado y solo se pone cuando el segmento lo admite. */ .franja-seg { flex: 0 1 0; min-width: 2px; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; white-space: nowrap; } /* Tinta nogal en los tres tonos: es el unico texto que pasa AA sobre ellos (lo mide el contraste). */ .franja-seg.brasa { background: var(--catodo); color: var(--catodo-tinta); } .franja-seg.hueso { background: var(--hueso-3); color: var(--catodo-tinta); } .franja-seg.bronce { background: var(--bronce); color: var(--catodo-tinta); } .franja-seg-tick { font: 500 .6875rem/1 var(--condensada); letter-spacing: var(--tracking-texto); } .franja-seg-pct { font: .6875rem/1 var(--datos); font-variant-numeric: tabular-nums; } .franja-clave { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; color: var(--hueso-3); font: .75rem/1.4 var(--datos); } .franja-item { display: inline-flex; align-items: center; gap: 7px; } .franja-item-texto { font-variant-numeric: tabular-nums; } .franja-punto { display: inline-block; width: 8px; height: 8px; } .franja-punto.brasa { background: var(--catodo); } .franja-punto.hueso { background: var(--hueso-3); } .franja-punto.bronce { background: var(--bronce); } .franja-sin { margin: 0; color: var(--hueso-3); font: .75rem/1.5 var(--datos); } /* Sin cotizacion la celda dice n/d: el cero se leeria como un dato y la brasa la tiene la franja. */ #cartera-lista .celda.sin-dato { color: var(--hueso-3); } /* ——— la biblioteca como un fichero: columnas de materias ——— 2-3 columnas por medida en escritorio, una en movil. El ancho de la seccion manda: la medida de lectura (68ch) es para la prosa, y esto es un indice. */ #contenido #biblioteca-indice { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 44px; align-items: start; } #biblioteca-indice .materia h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #biblioteca-indice .materia-cuenta { color: var(--hueso-3); font: 500 .8125rem/1 var(--datos); font-variant-numeric: tabular-nums; } /* ——— la materia plegada (spec movil 2026-09-22, §4) ——— Cada materia es un
: en escritorio nace ABIERTA —el indice de siempre, sin un clic de mas— y en el telefono plegada, porque 1.478 notas desplegadas eran 80.000px de alto. El summary lleva dentro el h3 que ya existia (mismo span.materia-nombre y mismo span.materia-cuenta), asi que el rotulo y el recuento los sigue pintando app.js: aqui solo se le pone el cuerpo, el filete y el +/− de la derecha. */ #biblioteca-indice .materia > summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-bottom: 12px; border-bottom: 1px solid var(--bronce); cursor: pointer; list-style: none; } /* El triangulo nativo del summary sobra: el signo del estado lo pone la regla de abajo. */ #biblioteca-indice .materia > summary::-webkit-details-marker { display: none; } /* El filete y el aire del cuerpo del indice viven ahora en el summary: el h3 es solo su rotulo. */ #biblioteca-indice .materia > summary h3 { flex: 1; margin: 0; padding-bottom: 0; border-bottom: 0; } #biblioteca-indice .materia > summary::after { content: "+"; color: var(--bronce); font: 500 1.1rem/1 var(--datos); } #biblioteca-indice .materia[open] > summary::after { content: "−"; } /* El estado vacio dice con que palabra se ha quedado vacio y da salida: no es un callejon. */ .biblioteca-vacio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; max-width: 68ch; margin: 20px 0 0; } .biblioteca-vacio p { margin: 0; color: var(--hueso-2); font: 400 1rem/1.5 var(--prosa); } /* El hueco entre la columna y el rail: pegada a la izquierda dejaba 590px de vacio a 1440 (y 1.028 a 1920). En escritorio la columna de lectura se centra en el espacio que queda, que es el unico reparto que no toca ni la medida de lectura ni el ancho del rail. */ @media (min-width: 1200px) { #seccion-newsletter, #seccion-cartera { max-width: var(--ancho-lectura); margin-inline: auto; } /* Escenarios es un instrumento de dos columnas, no lectura: sale del tope de 68ch por igual a los dos lados (mismo eje que Cartera) y nunca pasa del hueco entre el margen y el rail. */ #escenarios { --w: min(var(--ancho-escenarios), calc(100vw - var(--ancho-instrumentos) - 104px)); width: var(--w, 100%); margin-inline: min(0px, calc((100% - var(--w, 100%)) / 2)); } } @media (max-width: 999px) { /* 0.1 — la newsletter ensanchaba el documento a 741px en un telefono de 390: el