/* ============================================================================ CANDY · COMPONENTES. Nada de esto escribe un hex: todo sale de tokens.css. ========================================================================= */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;height:100%} /* EL FONDO DE LA PÁGINA ES EL DEL LIENZO, no el de las superficies. Lo que se ve detrás del gráfico —y en los bordes, y bajo los paneles— es el plano donde ocurre el mercado, y tiene que ser más oscuro que lo que flota encima o la sombra no separa nada. */ body{background:var(--sup-canvas)} body{background:var(--sup-0);color:var(--txt-2);font-family:var(--tipo); font-size:var(--t-13);line-height:var(--lh-13);-webkit-font-smoothing:antialiased} :focus-visible{outline:none;box-shadow:var(--foco);border-radius:var(--r-1)} /* --- BASE DE DATO --------------------------------------------------------- */ .num{font-variant-numeric:tabular-nums slashed-zero;font-weight:var(--peso-dato); color:var(--txt-1)} .etq{font-size:var(--t-11);line-height:var(--lh-11);letter-spacing:var(--track-etiqueta); text-transform:uppercase;color:var(--txt-3);font-weight:var(--peso-dato)} .mono{font-family:var(--tipo-mono);font-size:var(--t-12);color:var(--txt-3)} /* Signo y glifo: los dos canales que no dependen del color. */ .dir{font-size:9px;line-height:1;vertical-align:1px;margin-right:2px} .gana{color:var(--gana)} .pierde{color:var(--pierde)} .neutro{color:var(--txt-2)} /* --- LA PIEZA CENTRAL: MODALIDAD DEL DATO --------------------------------- firme · vivo · proyectado · desconocido */ [data-modo="firme"]{} [data-modo="vivo"]{position:relative} [data-modo="vivo"]>.latido{display:inline-block;width:5px;height:5px;border-radius:var(--r-max); background:currentColor;margin-right:5px;vertical-align:1px;animation:latido 2s infinite} @keyframes latido{0%,100%{opacity:.35}50%{opacity:1}} /* PROYECTADO: color atenuado un paso + prefijo léxico OBLIGATORIO. */ [data-modo="proyectado"]{opacity:.82;font-weight:var(--peso-normal)} [data-modo="proyectado"]::before{content:attr(data-pre) " ";color:var(--txt-3); font-weight:var(--peso-normal);font-variant-numeric:normal} /* El sistema delata al que lo usa mal: un pronóstico sin prefijo se ve roto. */ [data-modo="proyectado"]:not([data-pre]){outline:1px dashed var(--aviso); outline-offset:2px} [data-modo="proyectado"]:not([data-pre])::after{content:" ← falta data-pre"; color:var(--aviso);font-size:var(--t-11)} /* DESCONOCIDO: nunca 0. El valor no se pinta: se declara la ausencia. */ [data-modo="desconocido"]{color:var(--txt-3);font-weight:var(--peso-dato)} [data-modo="desconocido"] .valor{display:none} [data-modo="desconocido"]::before{content:"—";color:var(--txt-3);margin-right:6px} /* RANCIO: el número NO se borra ni se pone a 0. Baja un paso y confiesa edad. */ .rancio{color:var(--txt-3)!important;font-weight:var(--peso-normal)!important} .rancio .latido{animation:none;opacity:.3} .edad{font-size:var(--t-11);color:var(--aviso);margin-left:6px; font-variant-numeric:tabular-nums} /* --- BARRA DEL DÍA (hecho sólido + pronóstico rayado) ---------------------- */ .barra{position:relative;height:6px;border-radius:var(--r-max); background:var(--sup-3);overflow:hidden;display:flex} .barra-hecho{background:currentColor;height:100%} .barra-pron{height:100%;color:inherit;background-image:var(--trama-proyectado); opacity:.75} .barra-desconocido{position:absolute;inset:0;background-image:var(--trama-desconocido)} /* LO QUE NO SE PUEDE MEDIR, en el tramo que le toca y no en toda la barra. `barra-desconocido` cubre la barra entera (va absoluta); ésta es un tramo más, para decir «lo consumido lo sé, lo que hay abierto no». Sin ella ese caso se pintaba sin rayado, o sea: «de aquí en adelante no hay nada en riesgo». */ .barra-nosesabe{height:100%;background-image:var(--trama-desconocido);opacity:.75} .barra-marca{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--txt-3)} /* --- PASTILLA DE ESTADO (glifo + texto, el color es el tercer canal) ------- */ .pastilla{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px; border-radius:var(--r-max);font-size:var(--t-11);line-height:1;font-weight:var(--peso-dato); letter-spacing:.02em;border:var(--borde) solid currentColor;white-space:nowrap} .pastilla::before{content:attr(data-glifo);font-size:10px} .p-ok{color:var(--txt-3)} .p-aviso{color:var(--aviso);background:var(--aviso-f)} .p-parada{color:var(--pierde);background:var(--pierde-f)} .p-sinred{color:var(--aviso);background:transparent;border-style:dashed} .p-sinmedir{color:var(--guardian);background:var(--guardian-f);border-style:dashed} .p-guardian{color:var(--guardian);background:var(--guardian-f)} /* --- CHIP DE CUENTA (HUD) -------------------------------------------------- */ .chip{background:var(--sup-1);border:var(--borde) solid var(--linea-2); border-radius:var(--r-2);padding:var(--e-4) var(--e-5);min-width:230px; display:flex;flex-direction:column;gap:var(--e-3)} .chip-cab{display:flex;justify-content:space-between;align-items:center;gap:var(--e-4)} .chip-cifra{font-size:var(--t-22);line-height:var(--lh-22)} /* LA FECHA DEL DATO, no un aviso: en el tamaño de una nota y sin color propio. Va pegada a la cifra porque es de ELLA de lo que habla. */ .chip-edad{font-size:var(--t-11);line-height:1;margin-left:var(--e-2); vertical-align:middle} .chip-pie{display:flex;justify-content:space-between;gap:var(--e-3); font-size:var(--t-11);line-height:var(--lh-11);color:var(--txt-3)} /* El pie lleva a veces una FRASE del núcleo («el equity que tengo es viejo…»), no dos etiquetas cortas. Sin esto se desbordaba y se pegaba al texto de al lado. Se recorta con puntos suspensivos y el texto entero queda en `title`: la regla de «el dinero nunca se trunca» es para las CIFRAS, no para la prosa. */ .chip-pie > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chip[data-estado="sinmedir"]{border-color:var(--guardian); background:linear-gradient(var(--guardian-f),var(--guardian-f)),var(--sup-1)} .chip[data-estado="parada"]{border-color:var(--pierde)} .chip.pulso{animation:pulso var(--v-pulso) var(--curva) 1} @keyframes pulso{0%{box-shadow:0 0 0 0 var(--aviso-f)}100%{box-shadow:0 0 0 10px transparent}} /* --- TABLA DENSA ----------------------------------------------------------- */ .t{width:100%;border-collapse:collapse;font-size:var(--t-13)} .t th{height:24px;text-align:right;padding:0 var(--e-4);font-size:var(--t-11); letter-spacing:var(--track-etiqueta);text-transform:uppercase;color:var(--txt-3); font-weight:var(--peso-dato);border-bottom:var(--borde) solid var(--linea-2); white-space:nowrap;position:sticky;top:0;background:var(--sup-0);z-index:1} .t td{height:var(--fila-densa);padding:0 var(--e-4);text-align:right; border-bottom:var(--borde) solid var(--linea-1);white-space:nowrap; font-variant-numeric:tabular-nums slashed-zero} .t th:first-child,.t td:first-child{text-align:left} .t tbody tr:hover{background:var(--sup-2)} .t--ultra td{height:var(--fila-ultra);font-size:var(--t-12)} .t--comoda td{height:var(--fila-comoda)} /* Anchuras al PEOR caso, no al actual: una columna que baila con cada tick hace ilegible una tabla que se mira ocho horas. */ .c-dinero{width:9ch} .c-precio{width:10ch} .c-pct{width:6ch} /* --- BOTONES --------------------------------------------------------------- El primario dentro de la operativa es NEUTRO ALTO. Verde ya significa ganancia: un "Ejecutar" verde opina sobre la dirección del trade. */ .btn{height:var(--alto-normal);padding:0 var(--e-5);border-radius:var(--r-1); border:var(--borde) solid var(--linea-3);background:var(--sup-3);color:var(--txt-1); font:inherit;font-weight:var(--peso-dato);cursor:pointer; transition:background var(--v-control) var(--curva)} .btn:hover{background:var(--sup-2)} .btn-principal{background:var(--txt-1);color:var(--sup-0);border-color:transparent} /* TEXTO OSCURO SOBRE EL ACENTO, y no blanco. El blanco sobre `--marca` (#d1508b) da 4,01:1 y no llega al 4,5 de la AA; `--sup-0` encima da 4,84:1. El blanco venía copiado de otro proyecto cuyo acento era más oscuro, donde sí pasaba. El patrón ya estaba en casa: `.btn-principal` es texto oscuro sobre claro. */ .btn-marca{background:var(--marca);color:var(--sup-0);border-color:transparent} .btn-compra{background:var(--gana-f);border-color:var(--gana);color:var(--gana)} .btn-venta{background:var(--pierde-f);border-color:var(--pierde);color:var(--pierde)} .btn-secundario{background:transparent} .btn:disabled{opacity:.45;cursor:not-allowed} /* --- CAMPO DE TEXTO ------------------------------------------------------- No existía: el sistema se escribió para la superficie operativa, donde no se teclea casi nada. Pero entrar sí es teclear, y una pantalla que se inventa su propio campo empieza a inventarse el resto. El foco NO es un color de marca: es el mismo `--foco` que todo lo demás, para que se vea igual de claro con el teclado en cualquier sitio. */ .campo{height:var(--alto-normal);padding:0 var(--e-4);border-radius:var(--r-1); border:var(--borde) solid var(--linea-3);background:var(--sup-3); color:var(--txt-1);font:inherit;width:100%} .campo::placeholder{color:var(--txt-4)} .campo:disabled{opacity:.45;cursor:not-allowed} .campo[aria-invalid="true"]{border-color:var(--pierde)} /* --- ESTADOS FEOS ---------------------------------------------------------- */ /* Cargando: esqueleto con la anchura del número típico. Aparece a los 400 ms (un parpadeo de esqueleto es peor que un retardo) y NUNCA pinta un 0. */ .esqueleto{display:inline-block;height:12px;border-radius:var(--r-1); background:linear-gradient(90deg,var(--sup-3),var(--sup-2),var(--sup-3)); background-size:200% 100%;animation:barrido 1.4s infinite linear;vertical-align:-1px} @keyframes barrido{0%{background-position:200% 0}100%{background-position:-200% 0}} .caja{border:var(--borde) solid var(--linea-2);border-radius:var(--r-2); background:var(--sup-1);padding:var(--e-6)} .vacio{text-align:center;color:var(--txt-3);padding:var(--e-9) var(--e-6)} .error{border-color:var(--pierde);background:var(--pierde-f)} .duda{border-color:var(--aviso);border-style:dashed;background:transparent} .bloqueada{border-color:var(--guardian);background:var(--guardian-f)} .banda{display:flex;align-items:center;gap:var(--e-5);height:var(--alto-ancho); padding:0 var(--e-5);background:var(--aviso-f); border-bottom:var(--borde) solid var(--aviso);font-size:var(--t-13)} /* Número que no cabe: el dinero nunca se trunca con puntos suspensivos. Se degrada decimales → miles → abreviatura, y el completo queda en title. */ .abrev{border-bottom:1px dotted var(--txt-4);cursor:help} /* --- LO QUE USA LA APLICACIÓN de lo que antes estaba en el bloque «DEMO» ---- El resto —`.sec`, `h1/h2/h3`, `p`, `.par`, `.rejilla`— se ha ido a `docs/diseno/sistema/catalogo.css`. Estaba marcado «solo para esta página» y se servía en producción: `.sec{padding:48px}`, `h2{margin-top:48px}` y `p{max-width:70ch}` son la maquetación de un DOCUMENTO, y mientras estuvieran aquí la aplicación heredaba la respiración de un documento. Se notaba: el único `h1` de la app (el «Entrar») necesitaba un tamaño en línea para contrarrestarlo. */ .rejilla{display:grid;gap:var(--e-5)} .nota{font-size:var(--t-12);color:var(--txt-3);max-width:70ch} .mal{color:var(--pierde)} .bien{color:var(--gana)} .barra-sup{position:sticky;top:0;z-index:10;display:flex;gap:var(--e-4); align-items:center;padding:var(--e-3) var(--e-6);background:var(--sup-1); border-bottom:var(--borde) solid var(--linea-2);font-size:var(--t-12)} /* --- LA CAPA QUE FLOTA ----------------------------------------------------- `--sombra-flota` y `--r-3` estaban declarados desde el principio y NO los usaba nadie: todo el producto se pintaba con un borde de 1 px y un radio de 3 px sobre una superficie plana, que es literalmente la firma visual de un panel de administración. Ésta es la única capa del producto con sombra. La sombra no lleva ninguna información —no cuesta un punto de contraste— y es lo que separa un instrumento con mandos suspendidos de una pila de secciones apiladas. */ .flota{background:var(--flota-fondo);backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:var(--borde) solid var(--linea-2); border-radius:var(--r-flota);box-shadow:var(--sombra-flota)} /* --- EL BOTÓN QUE MUEVE EL DINERO ------------------------------------------ El ÚNICO botón grande del producto: si hay dos, no hay ninguno. Antes medía exactamente lo mismo que «cerrar» y que «ajustes» —32 px, radio 3— y decía «mandar la orden», que es lo que pone un formulario. Ahora dice la operación y lleva su cuenta dentro, como hacía candy2: leer y actuar en un gesto. EL LADO VA EN EL CANTO, no en el relleno. La superficie sigue siendo neutra —un «Ejecutar» verde opina sobre la dirección del trade, y esa decisión no se toca— pero el canal de color existe igual, y siempre con la palabra delante. */ .btn--disparo{height:auto;min-height:52px;width:100%;text-align:left; padding:var(--e-4) var(--e-5);border-radius:var(--r-2);display:grid;gap:2px; box-shadow:var(--sombra-flota); transition:background var(--v-control) var(--curva), transform var(--v-control) var(--curva)} .btn--disparo:hover:not(:disabled){transform:translateY(-1px)} .btn--disparo .grande{font-size:var(--t-15);line-height:var(--lh-15); font-weight:var(--peso-fuerte);letter-spacing:.02em} .btn--disparo .cuenta{font-size:var(--t-12);line-height:var(--lh-12); font-variant-numeric:tabular-nums slashed-zero} /* SIN `opacity:.85`. Aquí va «0,11 lotes · riesgo 214,50 €» a 12 px, y ese 85 % sobre el acento daba 3,33:1 — la cifra de riesgo del botón que manda la orden era el texto menos legible de toda la aplicación. La jerarquía con la línea de arriba ya la dan el tamaño (15 contra 12) y el peso; no hace falta apagarla. */ .btn--disparo[data-lado="buy"]{border-left:3px solid var(--gana)} .btn--disparo[data-lado="sell"]{border-left:3px solid var(--pierde)} /* MAYÚSCULA PARA LO QUE EJECUTA, minúscula para lo que navega. Con todo en minúscula el producto se había quedado sin registro alto: no tenía ningún recurso tipográfico para decir «esto es irreversible». «salir» y «cerrar» siguen en minúscula, y ese contraste es justo lo que hace que la mayúscula signifique algo. */ .btn--alza{letter-spacing:var(--track-etiqueta);font-weight:var(--peso-fuerte)} /* --- EL ESCENARIO: el gráfico y lo que va pegado a él ---------------------- El gráfico estaba en un hueco de 220 px de alto dentro de una columna de 320 de ancho. Con el eje descontado, 264 x 220 px de velas — y el norte del producto es «dibujas el riesgo». En 264 px no se dibuja un stop: se apunta. */ .escena{display:flex;flex-direction:column;gap:var(--e-3);min-width:0; min-height:0;flex:1} /* TODO JUNTO Y A LA IZQUIERDA. Con un separador elástico, el selector de temporalidad se iba al otro extremo de la pantalla y quedaba huérfano: el nombre, el precio y la temporalidad son lo mismo —de qué es esta vela— y se leen de un tirón. */ /* UNA SOLA LÍNEA. Con `wrap`, la tira de temporalidades se caía al segundo renglón y la pastilla crecía hasta chocar con los chips de abajo. Lo que no cabe se desplaza dentro de la tira, no rompe la fila. */ .escena-cab{display:flex;align-items:center;gap:var(--e-5);min-height:32px; flex-wrap:nowrap;min-width:0} .escena-nombre{font-size:var(--t-15);line-height:var(--lh-15);color:var(--txt-1); font-weight:var(--peso-fuerte);letter-spacing:.02em} .escena-precio{white-space:nowrap;font-size:var(--t-15);line-height:var(--lh-15);color:var(--txt-1); font-variant-numeric:tabular-nums slashed-zero} /* SE QUEDA CON LO QUE SOBRE. Con una altura fija (`clamp`) el gráfico o dejaba hueco muerto en una pantalla alta o desbordaba en una baja; un terminal de trading da al gráfico el sitio que queda. El mínimo es el suelo por debajo del cual una vela ya no se puede ni señalar. */ /* SIN BORDE NI RADIO: el gráfico no es una tarjeta, es el plano donde ocurre el mercado. Un marco alrededor lo convierte en «un gráfico dentro de la app», que es justo lo contrario de «el gráfico ES la app». */ .escena-lienzo{flex:1;min-height:220px;overflow:hidden;background:var(--sup-canvas)} .escena-nota{margin:0} /* --- MOVIMIENTO ------------------------------------------------------------ La regla del sistema («un número no se anima nunca») está bien y se respeta. Pero se había aplicado también al CROMO, y el resultado era que la única transición del producto era un cambio de gris al pasar por encima de un botón: indistinguible de no tener ninguna. Sin acuse de recibo, una interfaz se siente muerta aunque los datos estén vivos — eso es exactamente «seca». Lo que APARECE entra. Lo que ya estaba en pantalla no se mueve nunca, y ningún número se interpola jamás. `prefers-reduced-motion` lo anula entero. */ @keyframes entra{from{opacity:0;transform:translateY(4px)}} .entra{animation:entra var(--v-panel) var(--curva)} .chip{transition:border-color var(--v-control) var(--curva)} .pastilla{transition:background var(--v-control) var(--curva)} /* --- LO QUE SE ABRE DESDE LA BARRA DE ARRIBA ------------------------------- Cambiar la contraseña era un botón permanente en la columna de trabajo, encima del gráfico. Nadie cambia una contraseña a las tres de la tarde con una posición viva: es lo más burocrático que había en pantalla. Ahora vive en la barra y se abre flotando, que es para lo que existía `--sombra-flota`. */ .emergente{position:absolute;right:0;top:calc(100% + var(--e-3));z-index:20; width:min(360px,calc(100vw - var(--e-6) * 2))} /* --- LA LÍNEA DEL STOP, encima del gráfico y arrastrable ------------------- No es la línea de la librería: aquélla es una raya con una etiqueta y no se puede coger. Ésta se arrastra, y ese gesto ES el producto —«dibujas el riesgo, la plataforma se ocupa de la ejecución»—. Es la misma decisión de candy2. El asa es una banda de 24 px (`AGARRE` × 2) porque una raya de 1 px no se agarra con el ratón y menos con el dedo. La raya se pinta en su centro. */ .linea-stop{display:flex;align-items:center} .linea-stop-raya{position:absolute;left:0;right:0;top:50%;height:0; border-top:1px dashed var(--pierde)} .linea-stop-etq{position:relative;margin-left:var(--e-4);padding:1px var(--e-3); border-radius:var(--r-1);background:var(--pierde-f);color:var(--pierde); border:var(--borde) solid var(--pierde); font-size:var(--t-11);line-height:var(--lh-11); font-variant-numeric:tabular-nums slashed-zero;white-space:nowrap} /* --- LAS TECLAS ------------------------------------------------------------ Mono y con el canto de abajo más grueso: es como se lee una tecla sin tener que explicar que lo es. Sale en la ayuda de `?`, que se construye de la misma lista que define los atajos. */ kbd{font-family:var(--tipo-mono);font-size:var(--t-11);line-height:var(--lh-11); font-weight:var(--peso-dato);border:var(--borde) solid var(--linea-3); border-bottom-width:2px;background:var(--sup-3);padding:2px var(--e-3); border-radius:var(--r-1);color:var(--txt-1);white-space:nowrap} /* --- LOS CHIPS, EN VERSIÓN COMPACTA ---------------------------------------- Medido sobre candy2 en producción (1470 x 683): sus mandos ocupan el 20 % de la pantalla, en pastillas de 34 px de alto con OCHO datos dentro, y toda la letra entre 11 y 12,5 px. Aquí ocupaban el 43 % con tarjetas de 232 x 100 y cifras a 22 px. El gráfico ya estaba a pantalla completa: lo que sobraba era todo lo demás. No se cambia la ESTRUCTURA del chip —los siete estados, el glifo, la barra con su pronóstico rayado y el pie siguen exactamente igual, y son lo mejor que tiene este producto—. Se cambia lo que ocupan. `.hud` es quien lo pide, así que el chip suelto del catálogo de diseño no se entera. */ .hud .chip{min-width:0;padding:var(--e-3) var(--e-4);gap:var(--e-2); border-radius:var(--r-2)} .hud .chip-cifra{font-size:var(--t-15);line-height:var(--lh-15)} .hud .chip-cab .etq{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* El pie es la línea que más sitio gasta y la que menos se mira de un vistazo: se queda, más pequeña. Nunca se esconde — es donde vive el «no lo sé». */ .hud .chip-pie{gap:var(--e-2)} /* --- LAS PÍLDORAS: lo elegido lleva el acento ------------------------------- Es el segundo ingrediente del aspecto de candy2, y el que más se reconoce: un grupo de opciones son píldoras de 999 px, apagadas en gris, y **la elegida se pinta del color de la casa**. Medido en su producción: 11,5 px, peso 600, `padding 4px 10px`, inactiva `color:#545e70` sobre transparente, activa fondo `#e01c63` y texto blanco. El acento aquí no lleva ningún dato —solo dice «esto es lo que has elegido»—, así que cumple la regla del sistema: nunca un estado, nunca una vela. */ .grupo{display:inline-flex;align-items:center;gap:var(--e-2);padding:var(--e-2); border-radius:var(--r-max);background:var(--sup-2); border:var(--borde) solid var(--linea-2)} .opcion{height:auto;padding:var(--e-2) var(--e-5);border:0;background:none; border-radius:var(--r-max);color:var(--txt-3); font-size:var(--t-11);line-height:var(--lh-11);font-weight:var(--peso-fuerte); letter-spacing:var(--track-etiqueta);cursor:pointer;white-space:nowrap; transition:background var(--v-control) var(--curva), color var(--v-control) var(--curva)} .opcion:hover{color:var(--txt-1)} .opcion[aria-pressed="true"],.opcion.on{background:var(--marca);color:var(--sup-0)} /* El lado SÍ lleva dato —compra o venta—, así que ahí manda el verde y el rojo del dinero y no el acento. Es la excepción, y es la correcta. */ .opcion.on[data-lado="compra"]{background:var(--gana);color:var(--sup-0)} .opcion.on[data-lado="venta"]{background:var(--pierde);color:var(--sup-0)} /* --- EL BOTÓN QUE MUEVE EL DINERO, con su resplandor ------------------------ candy2 lo pinta del acento con una sombra ancha DEL MISMO COLOR (`0 12px 34px rgba(255,61,129,.34)`). Eso es lo que lo levanta de la pantalla sin subirle el contraste ni gritar. Y sigue sin opinar sobre la dirección: el acento es la marca, no el verde de ganar. El lado va en el canto y en la palabra, como estaba. */ .btn--disparo{background:var(--marca);color:var(--sup-0);border-color:transparent; box-shadow:var(--brillo-acento);border-radius:var(--r-flota)} .btn--disparo:hover:not(:disabled){background:var(--marca); filter:brightness(1.06);transform:translateY(-1px)} .btn--disparo:disabled{background:var(--sup-3);color:var(--txt-3); box-shadow:none;filter:none} /* --- EL SOMBREADO DEL PLAN, por DEBAJO de las velas ------------------------ Rojo de la entrada al stop —lo que te juegas— y verde de la entrada al objetivo —lo que buscas—, pintados sobre el recorrido del precio. Es lo que convierte dos números en una imagen. Van muy transparentes y SIN borde: compiten con las velas por el mismo sitio y las velas ganan siempre. Y van debajo, no encima, porque encima taparían justo lo que hay que mirar. */ .zona{position:absolute;left:0;right:0;pointer-events:none} .zona-riesgo{background:color-mix(in srgb,var(--pierde) 13%,transparent)} .zona-premio{background:color-mix(in srgb,var(--gana) 11%,transparent)} /* --- LAS FILAS DEL BUSCADOR ------------------------------------------------ La elegida se marca con el acento en el canto, no con el fondo: se recorre con las flechas y un fondo entero parpadeando fila a fila cansa la vista. */ .pa-fila{display:flex;flex-direction:column;gap:1px;padding:var(--e-3) var(--e-4); border-left:3px solid transparent;border-radius:var(--r-1);cursor:pointer} .pa-fila:hover{background:var(--sup-2)} .pa-fila.on{border-left-color:var(--marca);background:var(--marca-f)} /* --- LA PANTALLA DE ENTRAR ------------------------------------------------ Es la SEGUNDA pantalla que ve alguien que viene de la portada, y tiene que parecerse a la primera. La tipografía, el botón y el enlace salen de `portada.css` tal cual; aquí va solo la disposición, que allí no existe porque una portada no tiene formularios. El campo se sube a 48 px de alto y 12 px de radio para que case con `.p-btn`: con los 34 px del panel al lado de un botón de 48 la caja parecía de otro sitio. En el PANEL se quedan como estaban —ahí se teclea poco y la densidad es la que manda—, por eso esto va acotado a `.entrada-caja`. */ .entrada{display:grid;place-items:center;align-content:center; gap:var(--e-5);padding:clamp(24px,8vh,80px) 20px 96px} .entrada-caja{width:100%;max-width:420px; border:var(--borde) solid var(--linea-2);border-radius:var(--r-flota); background:var(--sup-1);padding:clamp(24px,5vw,32px); /* La elevación en oscuro la da la línea, no la sombra: `--sombra-flota` sobre el fondo de la aplicación da 1,04:1 y no se ve. Es la misma decisión que la maqueta de la portada. */ box-shadow:inset 0 1px 0 var(--linea-2)} .entrada-titulo{margin:0} .entrada-sub{margin:8px 0 0} .entrada-caja .etq{display:block;margin:24px 0 8px} .entrada-caja .campo{height:48px;border-radius:12px} .entrada-btn{width:100%;justify-content:center;margin-top:28px} .entrada-error{margin-top:16px} .entrada-pie{margin:0;text-align:center} /* LA BARRA, MIENTRAS SE ESTÁ FUERA. La del panel es baja y densa a propósito: ahí compite por píxeles con el gráfico, que se lleva el 100 % de la ventana. En la pantalla de entrar no compite con nada, y a 26 px de alto al lado de una caja de 420 seguía diciendo «esto es otra aplicación». Se le da la altura y el fondo de la cabecera de la portada —64 px, translúcida con desenfoque— solo mientras no hay sesión. `body.fuera` lo pone y lo quita `app.js`: es lo mismo que decide qué pantalla se enseña, así que no hay dos verdades sobre si se ha entrado o no. */ body.fuera .barra-sup{height:64px;padding:0 var(--e-6); background:color-mix(in srgb, var(--sup-0) 82%, transparent); backdrop-filter:blur(12px);border-bottom-color:var(--linea-1)} body.fuera .barra-sup strong{font-size:var(--t-15);gap:10px} body.fuera .barra-sup svg{width:14px;height:20px} /* La pila que cuelga del botón de conectar: el formulario y, debajo, el resultado. Sin fondo propio —cada hijo trae el suyo— y sin interceptar el ratón cuando los dos están plegados, que si no sería una placa invisible de 520 px encima de los chips. */ .br-pila{pointer-events:none} .br-pila > *{pointer-events:auto}