/* El candado de la guía de LUMA, y cómo sale en papel. POR QUÉ EL TEXTO ESTÁ AHÍ DEBAJO Y NO ESCONDIDO: ver el comentario largo de scripts/luma.mjs. En resumen — esconderlo lo saca de los buscadores y no vende nada, porque quien no sabe que existe no lo echa de menos. Lo que vende es ver la forma de la respuesta y no poder leerla. Y ESTO NO ES SEGURIDAD. El texto viaja al navegador. Es una puerta, no una caja fuerte. */ /* La primera columna de la tabla de vías lleva frases, no palabras sueltas: sin esto, el `white-space: nowrap` que legal.css pone en td:first-child sacaba «Más de 25 y hasta 300 kW AC» fuera de la pantalla a 375 px. */ .tabla td:first-child { white-space: normal; } .bajollave { position: relative; border-radius: 14px; overflow: hidden; } .velado { padding: 2px; } .bajollave .velado { filter: blur(6px); opacity: .5; user-select: none; pointer-events: none; transform: scale(.995); /* SE RECORTA, Y ESO SE MIDIO EN EL NAVEGADOR. Sin el tope, el bloque de los siete pasos medía 988 px a 375 px de ancho: casi tres pantallas de teléfono de borrón, con el botón flotando en el medio de la segunda. El candado tiene que verse desde donde se llega. El texto sigue entero en el HTML —que es lo que lee el buscador—, solo que no se pinta todo. */ max-height: 320px; overflow: hidden; } /* Sin el candado puesto el velo no existe: la clase se le quita al div desde luma.js cuando el plan es de paga, y con ella se va todo lo de arriba. */ .velo { display: none; } .bajollave .velo { display: flex; flex-direction: column; align-items: center; /* ABAJO Y NO EN EL MEDIO, y el fondo OPACO donde va el texto. Medido en el navegador: centrado, el título caía sobre la parte semitransparente del degradado y el contraste daba 1.18 — ilegible, y encima ilegible de una manera que no se nota programando de noche. Con el texto pegado abajo sobre papel sólido, el contraste vuelve a ser el de los colores de legal.css, que sí están medidos. Y arriba quedan 140 px de borrón, que es lo que enseña que ahí hay trabajo hecho. */ justify-content: flex-end; text-align: center; gap: 7px; position: absolute; inset: 0; padding: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--papel) 12%, transparent) 0%, color-mix(in srgb, var(--papel) 65%, transparent) 18%, /* Sólido ANTES del 34 %, que es donde empieza el título — medido. */ var(--papel) 31%, var(--papel) 100%); } .candado { color: var(--sol); line-height: 1; } .veloTit { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 16px; color: var(--tinta); } .veloPor { font-size: 12.5px; color: var(--suave); line-height: 1.55; max-width: 400px; } .btnVelo { /* 44 px de alto de verdad: esto se toca en un techo, con guantes. */ display: inline-block; margin-top: 3px; padding: 12px 20px; border-radius: 10px; background: #2563EB; color: #FFFFFF; font-weight: 700; font-size: 14px; text-decoration: none; } .btnVelo:hover { filter: brightness(1.06); } .veloFino { font-size: 11.5px; color: var(--suave); } /* Los pasos, los adjuntos y los reclamos comparten forma. */ .paso { display: flex; gap: 11px; margin: 0 0 13px; } .paso b { display: block; font-size: 14px; color: var(--tinta); margin-bottom: 2px; } .paso p { font-size: 13.5px; margin: 0; line-height: 1.6; } .paso .aviso { color: var(--verde); } .pasoN { flex-shrink: 0; width: 23px; height: 23px; border-radius: 50%; background: #2563EB; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 600; } /* La casilla se dibuja con borde y no con un carácter: los cuadros Unicode se imprimen distintos en cada máquina y algunos ni salen. */ .casilla { flex-shrink: 0; width: 13px; height: 13px; margin-top: 3px; border: 1.5px solid var(--suave); border-radius: 3px; } /* EN PAPEL. Antes esto era un documento escondido dentro del simulador y una clase que se le ponía a justo antes de llamar a print(), porque en la misma pantalla convivían dos documentos y el navegador no sabía cuál querías. Ahora es una página: imprimirla imprime la lista. */ @media print { html, body { background: #FFFFFF !important; color: #111 !important; } header, footer, .cta, .finoCta, .velo { display: none !important; } .hoja { max-width: none; padding: 0; } h1 { font-size: 20px; } h2 { font-size: 13px; color: #111; border-bottom: 1px solid #999; padding-bottom: 3px; text-transform: uppercase; letter-spacing: .07em; } p, .paso p, td, th { color: #333; font-size: 11px; } .paso { page-break-inside: avoid; } .pasoN { background: #111 !important; color: #FFF !important; } /* Con el candado puesto no se imprime el trámite: saldrían siete recuadros borrosos y una hoja gastada. Se imprime lo que sí se puede leer. */ .bajollave .velado { display: none !important; } .bajollave::after { content: '·'; display: block; text-align: center; color: #999; font-size: 11px; } }