/* * estilos.css - Hoja unica, sin dependencias externas. * * Dirección "Efeméride": la lógica de un almanaque astronómico impreso. La * información se ordena en columnas regladas, no en tarjetas: la rejilla de * cajas idénticas con borde redondeado es justo lo que hacía que esto se * pareciera a cualquier otra web. Aquí la estructura la dan las reglas * horizontales, la jerarquía tipográfica y el espacio. * * Negro cálido en vez del azul marino de rigor, y un solo acento —óxido * rojo, la tinta de las cartas celestes antiguas— reservado al veredicto y * a lo que de verdad exige atención. Los estados (excelente/buena/regular/ * mala) se quedan en la misma familia terrosa para no romper el conjunto. * * Tipografia autoalojada, no servida desde Google. Dos razones, y la segunda * pesa mas: (1) una peticion menos a un tercero en el camino critico, y (2) el * CDN de Google Fonts entrega la IP del visitante a Google en cada carga, * antes de que el aviso de cookies haya podido preguntar nada. Un sitio que * promete en su politica de privacidad no ceder datos a terceros no puede * hacer eso en la primera linea del . */ /* --- Tipografia ---------------------------------------------------------- */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/newsreader-400.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('fuentes/newsreader-400i.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/newsreader-600.woff2') format('woff2'); } @font-face { font-family: 'Plex'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/plex-400.woff2') format('woff2'); } @font-face { font-family: 'Plex'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/plex-600.woff2') format('woff2'); } @font-face { font-family: 'PlexMono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/plexmono-500.woff2') format('woff2'); } :root { /* * REPARTO DE TIPOGRAFIAS. Tres familias en una pagina no son un problema; * tres familias DENTRO DE UN MISMO BLOQUE si lo son: se leen como descuido, * no como jerarquia. En una tabla llegaron a convivir el serif del titulo, * la sans del subtitulo, la mono de las cabeceras y otra vez el serif en el * valor. La regla, sin excepciones: * * --display titulares (h1/h2/h3) y cifras-heroe. Nada mas. * --sans TODO lo demas: texto, etiquetas, botones, celdas, valores. * --mono solo lecturas numericas que se alinean o se leen como un * instrumento: horas, coordenadas, grados, escala del mapa. * * La jerarquia dentro de un bloque se hace con PESO y COLOR, no cambiando * de familia. */ --display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --sans: 'Plex', 'Segoe UI', system-ui, -apple-system, sans-serif; --mono: 'PlexMono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* * ESCALA TIPOGRAFICA. Ocho peldaños y ni uno más. La razón de fijarla es * que los tamaños se multiplicaban solos: llegó a haber .62, .68, .72, .78, * .82, .85, .88, .95, 1, 1.05, 1.15, 1.3... y diferencias de medio píxel no * se leen como jerarquía, se leen como descuido. Antes de inventar un * tamaño nuevo hay que usar el de al lado. * * .68rem rótulo en versalitas (etiquetas, unidades, pies) * .82rem secundario: notas, celdas, texto de apoyo de un control * .95rem texto de interfaz * 1rem texto de lectura larga (secciones de apoyo y guías) * 1.15rem h3, títulos de tarjeta y de fila * 1.3rem entradilla, título de diálogo, cifra dentro de tabla * 1.5rem h2 * 2.6rem+ cifras-héroe y h1 * * Se comprueba con `herramientas/auditar-tipografia.js`, que lista todos * los tamaños en uso y marca los que se salen. La regla de familias está * justo arriba; las dos se comprueban con el mismo script. */ /* Negros cálidos, no azules: sesgo hacia el marrón, como tinta sobre papel */ --fondo: #100e0c; --fondo-2: #17140f; --fondo-3: #221d17; --linea: #322c26; --linea-tenue: #221e1a; --texto: #e9e2d5; --texto-2: #b7ad9d; --texto-3: #8d8478; --texto-4: #7d7468; --acento: #c2512f; --acento-claro: #dd6f4a; --acento-tenue: rgba(194, 81, 47, .11); /* Estados en la misma gama terrosa: verde musgo, oliva, ocre y el óxido */ --excelente: #7d9668; --buena: #9aa062; --regular: #c68b3c; --mala: #c2512f; --sin-dato: #262019; --ancho: 1060px; } * { box-sizing: border-box; } /* * `hidden` oculta, punto. La regla del navegador para [hidden] es * `display: none` con especificidad cero: cualquier clase de autor que * declare un display la pisa, y el elemento sigue en pantalla aunque el * atributo este puesto. En esta hoja ya habia siete parches a mano para lo * mismo (.selector, .mapa-modal, .cookies, #ver-todos...) y el octavo lo * cazo el chip del diario, que se veia vacio a quien entraba por primera vez. * Una sola regla y deja de pasar. */ [hidden] { display: none !important; } /* Los controles de formulario NO heredan la tipografia del documento: sin esto, cada input y cada select salen en Arial y rompen la homogeneidad justo en los sitios donde el usuario esta mirando. */ button, input, select, textarea { font-family: inherit; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; } .contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.3rem; } a { color: var(--acento-claro); text-underline-offset: 3px; } a:hover { color: #ec8560; } h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.18; letter-spacing: -.015em; margin: 0 0 .5rem; text-wrap: balance; } /* * Justificado con partición de palabras. Sin `hyphens: auto` el justificado * abre huecos enormes entre palabras en columna estrecha, y el español tiene * palabras largas: partir es lo que hace que los márgenes queden limpios de * verdad en vez de solo alineados. */ .just, .apoyo p, .apoyo li, .objeto-texto, .veredicto-punto, .consejo, .lugar-texto, .oscuridad-detalle, .lluvia p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* Etiqueta versalita: el recurso que da el aire de tabla de almanaque. En sans, no en mono: la mono era la tercera voz que ensuciaba cada bloque. */ .rotulo, .rotulo-mini, .medidor-titulo, .tele-etiqueta, .sesion-etiqueta, .tl-etiqueta, .contador, .lugar-datos, .veredicto-donde, .veredicto-titulo { font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-4); } .tl-marca-h, .objeto-donde strong, .medidor-numero, .oscuridad-bortle, .nota, .sesion-campo input, .tele-campos input { font-variant-numeric: tabular-nums; } /* --- Cabecera ------------------------------------------------------------ */ .cabecera { border-bottom: 1px solid var(--linea); padding: 1.05rem 0; background: rgba(16, 14, 12, .88); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; } .cabecera .contenedor { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .marca { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; color: var(--texto); } /* El símbolo no se encoge nunca: en móvil, con el nombre partido en dos líneas, un flex hijo sin esto se aplasta a media luna. */ .marca-simbolo { flex: 0 0 auto; width: 30px; height: 30px; display: block; } .marca-nombre span { font-style: italic; color: var(--acento-claro); } /* align-items: center, o el chip del diario se estira a la altura de la fila */ .nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; font-size: .82rem; } .nav a { color: var(--texto-3); text-decoration: none; transition: color .15s; } .nav a:hover { color: var(--texto); } /* --- Veredicto ----------------------------------------------------------- */ .principal { padding: 2.6rem 0 3rem; } .veredicto-donde { margin: 0 0 .8rem; } .veredicto-titulo { margin: 0 0 .5rem; color: var(--texto-3); } /* * La nota y de qué sale, en la misma línea de base. En móvil el «basado en» * cae debajo, que es lo correcto: la palabra grande no se parte nunca. * * El «basado en» se apoya en el PIE de la palabra, no en su línea de base: * alineado a la base, un texto de dos renglones queda colgando por debajo y * parece caído ahí por accidente. Con el filo vertical delante se lee como * lo que es, una anotación al margen de la nota. */ .veredicto-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem 1.2rem; } .veredicto-base { margin: 0 0 .55rem; padding-left: .9rem; border-left: 1px solid var(--linea); font-size: .84rem; line-height: 1.5; color: var(--texto-3); max-width: 21ch; } /* * Para qué sirve la noche y qué sacar de casa: dos preguntas distintas, y * hasta ahora dos párrafos seguidos que parecían decir lo mismo. Rotuladas y * bajo un solo filo de acento se leen como una ficha de dos entradas. */ .veredicto-guia { margin: 1.1rem 0 0; padding-left: .9rem; border-left: 2px solid var(--acento); } .veredicto-punto { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--texto-2); max-width: 62ch; } .veredicto-punto + .veredicto-punto { margin-top: .55rem; } .veredicto-punto b { color: var(--texto-1); font-weight: 600; } /* * Barra de sitio y fecha: pura tipografía, sin pastillas ni iconos. El sitio * va en serif con un subrayado fino —como el encabezamiento de una hoja de * efemérides— y la fecha en versalitas al lado. */ .control-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2.4rem; margin: 0 0 1.8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); } .control-campo { display: flex; align-items: flex-end; gap: .4rem; } .control-etq { display: block; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-4); margin-bottom: .3rem; } /* Los dos controles, idénticos entre sí: antes uno era serif y el otro versalitas monoespaciadas, y no parecían la misma clase de mando. */ .control-chip { display: flex; align-items: baseline; gap: .45rem; background: none; cursor: pointer; /* Sans, no serif: es un botón, y la regla dice que los mandos van en sans. La jerarquía frente a su rótulo la da el peso y el color, no la familia. */ font-family: var(--sans); font-weight: 600; font-size: 1.15rem; color: var(--texto); line-height: 1.2; letter-spacing: -.01em; border: 0; border-bottom: 1px solid var(--texto-4); padding: 0 0 3px; transition: color .15s, border-color .15s; } .control-chip i { font-style: normal; font-size: .7em; color: var(--texto-4); } .chip-cal { color: var(--texto-4); align-self: center; margin-left: .1rem; } .control-chip:hover .chip-cal { color: var(--acento-claro); } .control-chip:hover { color: var(--acento-claro); border-color: var(--acento-claro); } .control-chip:hover i { color: var(--acento-claro); } .control-chip:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } .control-campo > .control-etq { align-self: flex-end; } .control-quitar { background: none; border: 0; cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--texto-4); padding: 0 .1rem 3px; } .control-quitar:hover { color: var(--mala); } /* --- Calendario de noches ------------------------------------------------- * * Cuelga del propio selector de fecha. El color de cada casilla es la nota de * esa noche calculada con la misma funcion que el titular, y la barrita de * abajo es la Luna: cuanto mas llena, mas luz mete. Los dias sin prevision * van rayados, para que se lea "expectativa" y no "pronostico". */ .control-campo-pop { position: relative; } .noche-pop { position: absolute; top: calc(100% + .6rem); left: 0; z-index: 50; width: 19.5rem; max-width: calc(100vw - 2rem); background: var(--fondo-3); border: 1px solid var(--linea); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); padding: .9rem .9rem 1rem; } .noche-pop[hidden] { display: none; } .nc-cab { display: flex; align-items: center; gap: .3rem; margin-bottom: .6rem; } .nc-mes { flex: 1; text-align: center; font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); } .nc-mover { background: none; border: 1px solid var(--linea); color: var(--texto-2); width: 1.7rem; height: 1.7rem; line-height: 1; cursor: pointer; font-size: 1rem; } .nc-mover:hover { border-color: var(--acento); color: var(--acento-claro); } .nc-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .nc-dow { text-align: center; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .1em; color: var(--texto-4); padding-bottom: .2rem; } .nc-vacio { display: block; } .nc-dia { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1 / 1; min-height: 2.05rem; background: var(--sin-dato); border: 1px solid transparent; color: var(--texto-2); cursor: pointer; padding: 0; font-family: var(--sans); font-weight: 600; } .nc-dia b { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; } .nc-dia:hover { border-color: var(--texto-3); } /* La barrita de la Luna: el ancho relleno es el porcentaje iluminado */ .nc-luna { display: block; width: 62%; height: 2px; background: linear-gradient(to right, var(--texto-2) 0 var(--il), rgba(125, 116, 104, .28) var(--il) 100%); } .nc-excelente { background: rgba(125, 150, 104, .30); color: #dbe6cd; } .nc-buena { background: rgba(154, 160, 98, .24); color: #e3e3cb; } .nc-regular { background: rgba(198, 139, 60, .22); color: #ecd6b6; } .nc-mala { background: rgba(194, 81, 47, .20); color: #eec3b4; } .nc-nada { background: var(--sin-dato); color: var(--texto-4); cursor: default; } /* Sin prevision de nubes: rayado, porque es solo Luna y horas de oscuridad */ .nc-estimado::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(16, 14, 12, .38) 3px 5px); } .nc-hoy b { text-decoration: underline; text-underline-offset: 2px; } .nc-sel { border-color: var(--acento-claro); box-shadow: inset 0 0 0 1px var(--acento-claro); } .nc-leyenda { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin: .7rem 0 .5rem; font-size: .68rem; color: var(--texto-3); } .nc-key { display: inline-flex; align-items: center; gap: .3rem; } .nc-key i { width: .7rem; height: .7rem; display: inline-block; } .nc-pie { margin: 0; font-size: .68rem; line-height: 1.45; color: var(--texto-4); } /* La luz del sitio, bajo el veredicto: es lo unico del veredicto que se arregla conduciendo, asi que va con el filo del acento y su enlace. */ .veredicto-luz { margin: .8rem 0 0; padding-left: .8rem; border-left: 2px solid var(--acento); font-size: .95rem; color: var(--texto-2); max-width: 60ch; } .veredicto-luz a { color: var(--acento-claro); white-space: nowrap; } /* El veredicto y la descarga, uno al lado del otro */ .cabecera-sesion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 2.5rem; align-items: start; } @media (max-width: 780px) { .cabecera-sesion { grid-template-columns: 1fr; gap: 1.6rem; } } .veredicto-nivel { font-family: var(--display); font-weight: 400; margin: 0; padding: 0; font-size: clamp(3.4rem, 11vw, 5.6rem); letter-spacing: -.035em; line-height: .9; } .nivel-excelente { color: var(--excelente); } .nivel-buena { color: var(--buena); } .nivel-regular { color: var(--regular); } .nivel-mala { color: var(--mala); } .veredicto-razon { font-family: var(--display); font-style: italic; font-weight: 400; margin: .7rem 0 0; font-size: 1.3rem; line-height: 1.4; max-width: 42ch; color: #d9d0c0; } .veredicto-nota { margin: .7rem 0 0; color: var(--texto-4); font-size: .82rem; max-width: 58ch; } .veredicto-sep { color: var(--linea); } .enlace { background: none; border: none; padding: 0; font: inherit; color: var(--acento-claro); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .enlace:hover { color: #ec8560; } .oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* * Cada bloque de la portada responde a una pregunta distinta —qué tiempo * hace, qué llevarte, cómo va la noche, cómo de oscuro es el sitio, qué * relieve te tapa— y antes se leían como un continuo. Cabecera de sección * de verdad: aire por arriba, regla, titular en serif y un subtítulo que * dice de qué va el bloque. Así se ve dónde acaba uno y empieza el otro. */ #condiciones, #consejos, #linea-tiempo, #oscuridad, #horizonte, #diario, #coleccion { margin-top: 4.5rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); position: relative; } /* Marca de acento sobre la regla: ancla el arranque de cada sección de un golpe de vista, mucho antes de leer el titular. */ #condiciones::before, #consejos::before, #linea-tiempo::before, #oscuridad::before, #horizonte::before, #diario::before, #coleccion::before { content: ""; position: absolute; top: -2px; left: 0; width: 46px; height: 3px; background: var(--acento); } #consejos:empty { display: none; } #consejos:empty::before { display: none; } .bloque-titulo { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; color: var(--texto); margin: 0 0 .3rem; } .bloque-sub { margin: 0 0 1.5rem; font-size: .95rem; color: var(--texto-3); max-width: 66ch; } /* --- Ventana de observación ---------------------------------------------- */ .sesion { margin: 1.8rem 0 0; padding: .9rem 0; border-top: 1px solid var(--linea-tenue); border-bottom: 1px solid var(--linea-tenue); } .sesion-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem; } .sesion-campo { font-size: .95rem; color: var(--texto-2); display: flex; align-items: baseline; gap: .4rem; } .sesion-campo input[type="time"] { background: none; border: 0; border-bottom: 1px solid var(--linea); color: var(--texto); padding: .1rem .1rem .15rem; font: 400 .95rem var(--sans); color-scheme: dark; } .sesion-campo input[type="time"]:hover { border-bottom-color: var(--texto-4); } .sesion-horas { font-family: var(--mono); font-weight: 500; font-size: .82rem; letter-spacing: .1em; color: var(--texto-4); } .sesion-detalle { margin: .55rem 0 0; font-size: .82rem; color: var(--texto-4); } /* --- Descarga de la hoja de sesión --------------------------------------- */ .pdf-panel { margin: 0; padding: 1.1rem 1.2rem 1.2rem; background: var(--fondo-2); border: 1px solid var(--linea); border-top: 2px solid var(--acento); } .pdf-panel-tit { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 .35rem; color: var(--texto); } .pdf-panel-texto { margin: 0 0 .6rem; font-size: .82rem; color: var(--texto-3); } /* Atajo a la lista: el panel pide marcar casillas que están 2.000 px más abajo, así que se lleva al usuario allí en un clic. */ .pdf-panel-ir { margin: 0 0 .9rem; font-size: .82rem; } .pdf-panel-ir a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .pdf-opcion { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1rem; font-size: .82rem; color: var(--texto-2); cursor: pointer; } .pdf-opcion input { margin: .2rem 0 0; accent-color: var(--acento); flex: none; } .pdf-opcion-coste { color: var(--texto-4); font-family: var(--sans); } .pdf-panel .boton { width: 100%; } .pdf-panel .boton:disabled { opacity: .45; cursor: not-allowed; } .pdf-panel-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .7rem 0 0; font-size: .82rem; } .pdf-pie { text-align: center; margin: 2.2rem 0 0; } .pdf-pie .boton:disabled { opacity: .45; cursor: not-allowed; } /* --- Tabla de la noche: condiciones y horarios --------------------------- */ #cifras:empty { display: none; } /* * Tabla de condiciones de la noche. Es una tabla de verdad y tiene que leerse * como tal: columnas separadas por una linea, todas las celdas alineadas al * mismo lado y una fila por lectura, siempre de la misma altura. Las * definiciones de "seeing" y "transparencia" van al pie (ver pieDeJerga), no * dentro de la primera celda, que era lo que descuadraba las filas. */ .tabla-noche { width: 100%; border-collapse: collapse; } .tabla-noche th { text-align: left; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-4); padding: 0 .9rem .55rem; border-bottom: 1px solid var(--linea); } .tabla-noche td { padding: .7rem .9rem; border-bottom: 1px solid var(--linea-tenue); vertical-align: middle; } /* La linea que hace que se vea como una tabla y no como tres columnas sueltas */ .tabla-noche th + th, .tabla-noche td + td { border-left: 1px solid var(--linea-tenue); } .tabla-noche th:first-child, .tabla-noche td:first-child { padding-left: 0; } .tabla-noche th:last-child, .tabla-noche td:last-child { padding-right: 0; } .tabla-noche tr:last-child td { border-bottom: 0; } .tabla-noche .campo { font-size: .95rem; color: var(--texto-2); width: 26%; } .tabla-noche .lectura { font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; width: 30%; } .tabla-noche .consecuencia { font-size: .82rem; color: var(--texto-3); } .tabla-noche-pie { margin: .8rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--texto-4); max-width: 78ch; } .tabla-noche-pie b { color: var(--texto-3); font-weight: 600; } /* Medidor: barra fina delante de la palabra, sin caja alrededor */ .medida { display: inline-block; width: 58px; height: 3px; background: var(--sin-dato); margin-right: .65rem; vertical-align: middle; } .medida i { display: block; height: 100%; background: currentColor; } .m-alto { color: var(--excelente); } .m-medio { color: var(--regular); } .m-bajo { color: var(--mala); } .m-sin { color: var(--texto-4); } .lectura .icono-luna { vertical-align: -4px; margin-right: .5rem; color: var(--acento-claro); } /* --- Consejos antes de salir --------------------------------------------- */ .consejo { padding: .75rem 0; border-top: 1px solid var(--linea-tenue); font-size: .95rem; color: var(--texto-2); max-width: 72ch; } .consejo strong { color: var(--texto); font-weight: 600; font-family: var(--sans); } /* --- Linea de tiempo ------------------------------------------------------ */ .tl { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: .5rem 1rem; margin: 0; } .tl-fila { display: contents; } .tl-etiqueta { white-space: nowrap; } .tl-pista { position: relative; display: block; width: 100%; overflow: hidden; } .tl-pista i { position: absolute; top: 0; bottom: 0; display: block; } .tl-nubes { height: 28px; background: var(--sin-dato); } .tl-luna { height: 12px; background: var(--linea-tenue); } .tl-luna i { background: var(--acento); } .tl-ventana { height: 8px; background: var(--linea-tenue); } .tl-ventana i { background: repeating-linear-gradient(-45deg, #b7ad9d 0 5px, #6f6558 5px 10px); } /* Dos filas alternas: ver el porqué en lineaTiempo (app.js) */ .tl-marcas { height: 62px; overflow: visible; } .tl-marca { position: absolute; transform: translateX(-50%); text-align: center; line-height: 1.25; } .tl-marca-a { top: 4px; } .tl-marca-b { top: 34px; } /* Un filo que une la marca de abajo con la barra, o queda flotando suelta */ .tl-marca-b::before { content: ''; position: absolute; left: 50%; top: -28px; width: 1px; height: 26px; background: var(--linea); } .tl-marca-h { display: block; font-family: var(--mono); font-weight: 500; font-size: .68rem; color: var(--texto); } .tl-marca-t { display: block; font-size: .68rem; color: var(--texto-4); } .tl-leyenda { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--texto-4); } /* --- Oscuridad del cielo -------------------------------------------------- */ .oscuridad-caja { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.8rem; } .oscuridad-texto { flex: 1; min-width: 260px; } .oscuridad-bortle { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; margin: 0; letter-spacing: -.02em; } .oscuridad-bortle small { font-size: .82rem; color: var(--texto-4); letter-spacing: .04em; } .oscuridad-bortle.medidor-alto { color: var(--excelente); } .oscuridad-bortle.medidor-medio { color: var(--regular); } .oscuridad-bortle.medidor-bajo { color: var(--mala); } .oscuridad-titulo { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: .35rem 0 .5rem; } .oscuridad-detalle { margin: .4rem 0 0; font-size: .95rem; color: var(--texto-2); max-width: 58ch; } .oscuridad-consejo { margin: .8rem 0 0; padding-left: .9rem; border-left: 2px solid var(--acento); font-size: .95rem; color: var(--texto-2); max-width: 58ch; } .oscuridad-consejo strong { color: var(--texto); } .oscuridad-nota { margin: .85rem 0 0; font-size: .82rem; color: var(--texto-4); max-width: 58ch; } .mapa-luz { flex: none; width: min(300px, 100%); margin: 0; } .mapa-luz svg { display: block; width: 100%; height: auto; } .mapa-etq { fill: #fff; font-size: 8.5px; font-family: var(--sans); font-weight: 600; paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: 2.5px; } .mapa-n, .mapa-tu { fill: #fff; font-size: 10px; font-family: var(--mono); font-weight: 500; paint-order: stroke; stroke: rgba(0, 0, 0, .7); stroke-width: 2.5px; } .mapa-km { fill: var(--texto-4); font-size: 9px; font-family: var(--mono); } .mapa-leyenda { margin: .5rem 0 0; } .mapa-gradiente { display: block; height: 6px; background: linear-gradient(90deg, #080a12 0%, #161e34 12%, #1c3e70 25%, #22743e 40%, #7eac3e 55%, #d6c42c 68%, #e28a20 80%, #ce3c26 90%, #e8e0e8 100%); } .mapa-extremos { display: flex; justify-content: space-between; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-4); margin-top: .3rem; } .lugares { margin: 1.6rem 0 0; } .lugares-titulo { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 .4rem; } .lugares-pie { margin: 0 0 .7rem; font-size: .95rem; color: var(--texto-2); max-width: 72ch; } /* Sitios a los que ir: una sola tabla, con celdas visibles, para los dos bloques. Antes cada uno se maquetaba distinto y se leian como dos cosas diferentes cuando dicen exactamente lo mismo. */ .tabla-lugares { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 420px; } .tabla-lugares th { text-align: left; padding: .4rem .7rem; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-4); background: var(--fondo-2); border: 1px solid var(--linea); } .tabla-lugares td { padding: .55rem .7rem; border: 1px solid var(--linea); vertical-align: top; } .tabla-lugares th:nth-child(2), .tabla-lugares td:nth-child(2), .tabla-lugares th:nth-child(3), .tabla-lugares td:nth-child(3), .tabla-lugares th:last-child, .tabla-lugares td:last-child { text-align: right; white-space: nowrap; width: 1%; } .lg-sitio { color: var(--texto); font-weight: 600; } .lg-nota { display: block; margin-top: .15rem; font-weight: 400; font-size: .82rem; color: var(--texto-3); max-width: 62ch; } .lg-dist, .lg-bortle { font-family: var(--mono); font-size: .82rem; color: var(--texto-2); font-variant-numeric: tabular-nums; } .lg-mapa { font-size: .82rem; } .lugar-solo { margin: 0; padding-left: .9rem; border-left: 2px solid var(--excelente); color: var(--texto-2); } /* --- Perfil del horizonte ------------------------------------------------- */ .hz-intro, .hz-resumen { margin: 0 0 1rem; font-size: .95rem; color: var(--texto-2); max-width: 68ch; } .hz-resumen strong { color: var(--texto); font-family: var(--sans); font-weight: 600; } .hz-ok { color: var(--excelente); } .hz-acciones { margin: 0 0 .8rem; } .hz-nota { margin: .8rem 0 0; font-size: .82rem; color: var(--texto-4); max-width: 68ch; } .hz-error { color: var(--mala); } .hz { margin: 0; } .hz svg { display: block; width: 100%; height: auto; } .hz-grado { fill: var(--texto-4); font-size: 9px; font-family: var(--mono); } .hz-card { fill: var(--texto-3); font-size: 11px; font-family: var(--sans); font-weight: 600; letter-spacing: .08em; } .hz-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: .6rem 0 0; font-size: .82rem; color: var(--texto-3); } .hz-item { display: inline-flex; align-items: center; gap: .4rem; } .hz-item i { width: 10px; height: 2px; flex: none; } /* El Sol no es una traza, es un sitio: su marca en la leyenda es un disco, no una raya. */ .hz-item-sol i { width: 8px; height: 8px; border-radius: 50%; background: #e0a33c; } /* La pista va en su propia línea y pegada al margen izquierdo: empujada a la derecha con margin-left:auto quedaba colgando en mitad de ninguna parte. */ .hz-pista { flex-basis: 100%; margin: .35rem 0 0; color: var(--texto-4); } .hz-hora { font-family: var(--mono); font-size: 9px; font-weight: 500; } /* Elegir qué objetos se dibujan: con más de tres o cuatro, las marcas de hora se pisan y el gráfico deja de leerse. */ .hz-elegir { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 1rem; } .hz-elegir .rotulo { width: 100%; margin-bottom: .1rem; } .hz-chip { background: none; border: 1px solid var(--linea); color: var(--texto-3); font: 400 .82rem var(--sans); cursor: pointer; padding: .25rem .6rem; border-radius: 99px; transition: border-color .15s, color .15s; } .hz-chip:hover { border-color: var(--texto-4); color: var(--texto-2); } .hz-chip.on { color: var(--texto); } .hz-bloqueos { list-style: none; margin: 1.1rem 0 0; padding: 0; } .hz-bloqueos li { padding: .5rem 0 .5rem .9rem; border-left: 2px solid var(--regular); border-top: 1px solid var(--linea-tenue); font-size: .95rem; color: var(--texto-2); } .hz-bloqueos li:first-child { border-top: 0; } .hz-bloqueos strong { color: var(--texto); font-family: var(--sans); font-weight: 600; } /* Obstáculos del sitio. Se piden en metros —altura y distancia— porque nadie sabe decir "eso me tapa 11 grados", y los grados se calculan solos. */ .hz-obst { margin: 1.4rem 0 0; } .hz-obst-texto { margin: .35rem 0 .9rem; font-size: .95rem; color: var(--texto-2); max-width: 68ch; } .hz-obst-texto strong { color: var(--texto); font-weight: 600; } .hz-obst-campos { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; align-items: flex-end; } .hz-obst-campos label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--texto-4); } .hz-obst-campos select, .hz-obst-campos input { background: transparent; color: var(--texto); border: 0; border-bottom: 1px solid var(--linea); font: 600 .95rem var(--sans); padding: .15rem .1rem .2rem; color-scheme: dark; } .hz-obst-campos input { width: 4.6rem; font-variant-numeric: tabular-nums; } .hz-obst-campos select:focus-visible, .hz-obst-campos input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } .con-unidad { display: inline-flex; align-items: baseline; gap: .3rem; color: var(--texto-4); font-size: .82rem; } .hz-obst-calc { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0 0; font-size: .95rem; color: var(--texto-2); } .hz-obst-calc strong { color: var(--acento-claro); font-weight: 600; font-variant-numeric: tabular-nums; } .hz-obst-ayuda { margin: .7rem 0 0; font-size: .82rem; color: var(--texto-4); max-width: 68ch; } .hz-obst-ayuda strong { color: var(--texto-3); font-weight: 600; } .hz-obst-clic { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin: .9rem 0 0; font-size: .82rem; color: var(--texto-2); } .hz-obst-clic label { display: flex; align-items: center; gap: .5rem; cursor: pointer; } .hz-obst-clic input { width: 18px; height: 18px; accent-color: var(--acento); cursor: pointer; } /* Con el modo armado, el cursor avisa de que el próximo clic planta algo */ .hz-armado { cursor: crosshair; } .hz-obst-lista { list-style: none; margin: 1rem 0 0; padding: 0; } .hz-obst-lista li { padding: .45rem 0; border-top: 1px solid var(--linea-tenue); font-size: .82rem; color: var(--texto-3); } .hz-obst-lista strong { color: var(--texto); font-weight: 600; } .hz-obst-lista .enlace { margin-left: .4rem; } /* Leyenda: el relieve es dato medido, los obstáculos son estimación tuya */ .hz-item-relieve i { background: var(--texto-4); height: 8px; border-radius: 1px; } .hz-item-obst i { background: var(--acento); opacity: .55; height: 8px; border-radius: 1px; } /* --- Qué mirar ------------------------------------------------------------ */ .seccion-titulo { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin: 3.2rem 0 0; padding-bottom: .7rem; border-bottom: 1px solid var(--linea); scroll-margin-top: 1.5rem; } .seccion-titulo h2 { font-size: 1.5rem; margin: 0; font-weight: 400; letter-spacing: -.025em; } .contador { margin-left: auto; } .equipo { display: flex; gap: 1.3rem; flex-wrap: wrap; margin: 1.1rem 0 .3rem; } .equipo-boton { background: none; border: 0; padding: 0 0 3px; border-bottom: 1px solid transparent; color: var(--texto-3); cursor: pointer; font: 400 .95rem var(--sans); transition: color .15s, border-color .15s; } .equipo-boton:hover { color: var(--texto); } .equipo-boton[aria-pressed="true"] { color: var(--acento-claro); border-bottom-color: var(--acento); font-weight: 600; } /* Ficha del telescopio */ .tele { margin: 1.2rem 0 1.4rem; padding: .9rem 0; border-top: 1px solid var(--linea-tenue); border-bottom: 1px solid var(--linea-tenue); } .tele-campos { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem; } .tele-campos label { font-size: .82rem; color: var(--texto-2); display: flex; align-items: baseline; gap: .4rem; } .tele-campos input { background: none; border: 0; border-bottom: 1px solid var(--linea); color: var(--texto); padding: .1rem .1rem .15rem; font: 600 .95rem var(--sans); width: 4.6rem; } .tele-campos input:hover { border-bottom-color: var(--texto-4); } .tele-campos input#tele-oculares { width: 7rem; } .tele-lista { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; font-size: .82rem; color: var(--texto-2); font-variant-numeric: tabular-nums; } .tele-lista strong { color: var(--texto); font-family: var(--sans); font-weight: 600; } .tele-aviso { color: var(--mala); font-size: .82rem; } .tele-nota { margin: .6rem 0 0; font-size: .82rem; color: var(--texto-4); } .tele-ayuda { margin: .6rem 0 .9rem; font-size: .82rem; color: var(--texto-4); max-width: 74ch; } .tele-ayuda em { color: var(--texto-2); font-style: normal; font-variant-numeric: tabular-nums; } .tele-accesorios { margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--linea-tenue); } .tele-accesorios ul { margin: .5rem 0 0; padding-left: 1.1rem; } .tele-accesorios li { margin: .35rem 0; font-size: .82rem; color: var(--texto-3); max-width: 74ch; } .tele-accesorios strong { color: var(--texto); font-weight: 600; } .tele-nota strong { color: var(--texto-2); } /* --- Objetos -------------------------------------------------------------- */ /* * "Cómo encontrarlo". Va con filo y no con recuadro: es información de * campo, del mismo rango que la hora y la altura de la línea de arriba, no * una caja aparte. Sans, como todo lo que no es titular ni instrumento. */ .objeto-buscar { margin: .5rem 0 .7rem; padding-left: .8rem; border-left: 2px solid var(--linea); font-size: .82rem; color: var(--texto-2); } .objeto-buscar .rotulo-mini { display: block; margin-bottom: .15rem; } .objetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 0 2.6rem; margin-top: .5rem; } .objeto { padding: 1.3rem 0 1.5rem; border-top: 1px solid var(--linea-tenue); } .objeto.pdf-fuera { opacity: .4; } .objeto.pdf-fuera:hover { opacity: .7; } .objeto h3 { font-size: 1.15rem; margin: 0; font-weight: 400; letter-spacing: -.015em; } .objeto-cabecera { display: flex; align-items: flex-start; gap: .6rem; } .objeto-cabecera > div { flex: 1; min-width: 0; } /* Casilla grande y con área de toque de sobra: es el control que más se usa de la página (decide qué entra en el PDF) y con 14 px se fallaba el clic. */ .objeto-check { flex: none; display: flex; align-items: center; justify-content: center; /* Sin margen negativo a la izquierda: el área de toque se ganaba sacando la casilla fuera del borde de la tarjeta y la columna quedaba desalineada. */ width: 44px; height: 44px; margin: -.35rem -.5rem -.35rem 0; cursor: pointer; border-radius: 2px; transition: background .15s; } .objeto-check:hover { background: var(--acento-tenue); } .objeto-check .chk-pdf { width: 22px; height: 22px; margin: 0; accent-color: var(--acento); cursor: pointer; } .objeto-meta { margin: .2rem 0 .75rem; color: var(--texto-4); font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .06em; } .objeto-donde { margin: 0 0 .6rem; font-size: .95rem; color: #d5cec1; } .objeto-donde strong { color: var(--acento-claro); font-weight: 600; } .objeto-texto { margin: 0 0 .8rem; font-size: .95rem; color: var(--texto-3); } .objeto-ocular { margin: 0 0 .8rem; padding-left: .8rem; border-left: 1px solid var(--acento); font-size: .82rem; color: var(--texto-2); } .rotulo-mini { display: block; margin-bottom: .2rem; } /* Accesorio recomendado para ESE objeto: incluido el "aquí no hace falta ninguno", que es la mitad de los casos y la mitad del valor. */ .objeto-accesorio { display: block; margin-top: .35rem; color: var(--texto-3); } .objeto-equipo { margin: 0; font-size: .68rem; color: var(--texto-4); font-family: var(--sans); font-weight: 600; letter-spacing: .06em; padding-top: .6rem; border-top: 1px solid var(--linea-tenue); } .nota { flex: none; font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; } .nota small { font-size: .68rem; color: var(--texto-4); } .nota-alta { color: var(--excelente); } .nota-media { color: var(--regular); } .nota-baja { color: var(--mala); } .nota-motivo { margin: .25rem 0 .5rem; font-size: .82rem; color: var(--texto-4); font-style: italic; } .ficha-visual { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0 0 .9rem; } .boceto { margin: 0; text-align: center; } .boceto figcaption { margin: .3rem auto 0; max-width: 130px; line-height: 1.35; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .06em; color: var(--texto-4); } .comparacion-luna { flex: 1; min-width: 150px; } /* max-width con height:auto: en una columna estrecha el dibujo se encoge entero en vez de desbordar, que el viewBox mantiene la proporcion. */ .comparacion-luna svg { color: var(--texto-4); display: block; max-width: 100%; height: auto; } .comparacion-etq { fill: var(--texto-4); font-size: 8.5px; font-family: var(--mono); } .comparacion-texto { margin: .3rem 0 0; font-size: .82rem; color: var(--texto-4); } /* --- Lluvias de meteoros -------------------------------------------------- */ .lluvia { padding: 1.1rem 0 1.2rem 1.1rem; border-top: 1px solid var(--linea-tenue); border-left: 2px solid var(--acento); padding-left: 1.1rem; margin: 1rem 0; } .lluvia h3 { font-size: 1.15rem; font-weight: 400; } .lluvia p { margin: .3rem 0; font-size: .95rem; color: var(--texto-2); max-width: 72ch; } .lluvia .dato { color: var(--texto-4); font-size: .82rem; font-family: var(--sans); font-weight: 600; } .etiqueta { background: var(--acento); color: #150c07; font-family: var(--sans); font-size: .68rem; font-weight: 600; padding: .22rem .5rem; vertical-align: middle; text-transform: uppercase; letter-spacing: .1em; } .aviso { color: var(--texto-2); padding: 1.1rem 0; border-top: 1px solid var(--linea-tenue); } /* --- Selector de ubicación ------------------------------------------------ */ .selector { position: fixed; inset: 0; background: rgba(8, 7, 6, .84); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; z-index: 50; } .selector[hidden] { display: none; } .selector-caja { background: var(--fondo-3); border: 1px solid var(--linea); width: min(520px, 100%); max-height: 80vh; display: flex; flex-direction: column; padding: 1.4rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); } .selector-caja h2 { font-size: 1.3rem; font-weight: 400; margin-top: 0; } .selector-fila { display: flex; gap: .5rem; } #buscador { flex: 1; background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); padding: .65rem .8rem; font: inherit; } #buscador:focus { outline: 2px solid var(--acento); outline-offset: 1px; } .selector-pista { margin: .6rem 0 0; font-size: .82rem; color: var(--texto-4); } .selector-pista i { font-style: normal; color: var(--texto-2); } .boton { background: var(--acento); border: 0; color: #170d07; font: 600 .95rem var(--sans); padding: .62rem 1.1rem; cursor: pointer; transition: background-color .15s; } .boton:hover { background: var(--acento-claro); } .boton-sec { background: none; border: 1px solid var(--linea); color: var(--texto-2); } .boton-sec:hover { background: none; border-color: var(--texto-4); color: var(--texto); } #resultados { list-style: none; margin: 1rem 0 0; padding: 0; overflow-y: auto; } #resultados button { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linea-tenue); color: var(--texto); font: inherit; padding: .6rem .2rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; } #resultados button span { color: var(--texto-4); font-size: .82rem; } #resultados button:hover { background: rgba(255, 255, 255, .04); } #resultados .vacio { color: var(--texto-4); padding: .6rem .2rem; } /* --- Mapa de relieve ------------------------------------------------------ */ .selector-acciones { display: flex; gap: .5rem; margin: 1rem 0 0; } .mapa-modal { position: fixed; inset: 0; z-index: 55; background: rgba(8, 7, 6, .88); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; } .mapa-modal[hidden] { display: none; } .mapa-caja { background: var(--fondo-3); border: 1px solid var(--linea); width: min(700px, 100%); padding: 1.2rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); } .mapa-cab { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .9rem; } .mapa-cab h2 { font-size: 1.15rem; margin: 0; } .mapa-cerrar { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--texto-3); font-size: 1.5rem; line-height: 1; padding: 0 .2rem; } .mapa-cerrar:hover { color: var(--texto); } .mapa-lienzo-env { position: relative; } #mapa-lienzo { display: block; width: 100%; height: auto; border: 1px solid var(--linea); cursor: crosshair; background: var(--fondo-2); } .mapa-cargando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(16, 14, 12, .75); color: var(--texto-2); font-family: var(--sans); font-size: .82rem; letter-spacing: .08em; } .mapa-cargando[hidden] { display: none; } .mapa-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin-top: .9rem; } .mapa-zoom { display: flex; align-items: center; gap: .4rem; } .mapa-zoom .boton { padding: .35rem .7rem; font-size: .95rem; line-height: 1; } .mapa-escala { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--texto-4); } .mapa-elegido { margin: 0; flex: 1; min-width: 180px; font-family: var(--mono); font-size: .82rem; color: var(--texto-2); } .mapa-nota { margin: .9rem 0 0; font-size: .82rem; color: var(--texto-4); } @media (max-width: 560px) { .mapa-pie .boton#mapa-usar { width: 100%; } } /* --- Contenido de apoyo --------------------------------------------------- */ .apoyo { border-top: 1px solid var(--linea); margin-top: 3.5rem; padding-top: 2.5rem; } .apoyo h2 { font-size: 1.5rem; margin-top: 2.6rem; font-weight: 400; letter-spacing: -.025em; } .apoyo h3 { font-size: 1.15rem; margin-top: 1.7rem; } .apoyo p, .apoyo li { color: #ccc4b6; max-width: 68ch; } .apoyo ul { padding-left: 1.2rem; } .faq { border-top: 1px solid var(--linea-tenue); padding: 1.1rem 0; } .faq h3 { margin: 0 0 .35rem; } .faq p { margin: 0; } .destacado { padding: 1.1rem 0 1.2rem 1.2rem; border-left: 2px solid var(--acento); margin: 1.8rem 0; } /* Página de teoría suelta: no lleva la regla superior que la separaría de la herramienta, porque aquí no hay herramienta encima. */ .apoyo-suelta { border-top: 0; margin-top: 0; padding-top: 0; } .apoyo-suelta h1 { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 400; letter-spacing: -.03em; margin: 0 0 1.4rem; } .apoyo-suelta > h2:first-of-type { margin-top: 0; } .volver { margin: 3rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--linea); font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; } .volver a { text-decoration: none; } /* Índice de las páginas de teoría, en la portada */ .indice-apoyo { display: grid; gap: 0; margin: 1.4rem 0 0; } .indice-apoyo a { display: block; padding: .95rem 0; border-top: 1px solid var(--linea-tenue); color: var(--texto); text-decoration: none; } .indice-apoyo a:last-child { border-bottom: 1px solid var(--linea-tenue); } .indice-apoyo a:hover .indice-titulo { color: var(--acento-claro); } /* h3 de verdad (es el titulo de un articulo enlazado), no un span en serif: asi el serif esta donde la regla lo permite. Se le quita el margen y el peso que trae por ser encabezado, que aqui no tocan. */ .indice-titulo { font-family: var(--display); font-weight: 400; font-size: 1.15rem; margin: 0; color: var(--texto); transition: color .15s; } .indice-desc { display: block; font-size: .95rem; color: var(--texto-3); margin-top: .15rem; } /* Tabla de la escala de Bortle */ .tabla-envoltura { overflow-x: auto; margin: 1.5rem 0; } .tabla-bortle { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .95rem; } .tabla-bortle th, .tabla-bortle td { text-align: left; padding: .62rem .7rem; border-bottom: 1px solid var(--linea-tenue); vertical-align: top; } .tabla-bortle thead th { font-family: var(--sans); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--texto-4); border-bottom-color: var(--linea); } .tabla-bortle tbody th { font-family: var(--display); font-weight: 400; font-size: 1.3rem; width: 1%; white-space: nowrap; color: var(--texto); font-variant-numeric: tabular-nums; } .tabla-bortle td { color: #ccc4b6; } .tabla-bortle td:first-of-type { color: var(--texto); white-space: nowrap; } .tabla-bortle tr.tu-nivel { background: var(--acento-tenue); } .tabla-bortle tr.tu-nivel th, .tabla-bortle tr.tu-nivel td { color: var(--texto); } .tabla-bortle tr.tu-nivel th::after { content: " \2190"; color: var(--acento); font-size: .68rem; } .tu-nivel-pie { margin: -.7rem 0 1.5rem; font-size: .82rem; color: var(--texto-4); } /* --- Anuncios ------------------------------------------------------------- */ .anuncio { display: none; } .con-anuncios .anuncio { display: block; margin: 2.5rem 0; text-align: center; overflow: hidden; } .con-anuncios .anuncio::before { content: "publicidad"; display: block; font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-4); opacity: .6; margin-bottom: .35rem; } .con-anuncios .anuncio-a { min-height: 100px; } .con-anuncios .anuncio-b { min-height: 280px; } .con-anuncios .anuncio-lateral { display: none; } @media (min-width: 1280px) { .con-anuncios .anuncio-lateral { display: block; position: sticky; top: 5rem; width: 300px; min-height: 600px; } .con-anuncios .con-lateral { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; } } /* --- Pie y cookies -------------------------------------------------------- */ .pie { border-top: 1px solid var(--linea); margin-top: 3.5rem; padding: 2rem 0 3rem; color: var(--texto-4); font-size: .82rem; } .pie a { color: var(--texto-3); } .pie nav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: .7rem; } .cookies { position: fixed; bottom: 0; left: 0; right: 0; background: var(--fondo-3); border-top: 1px solid var(--linea); padding: 1rem; z-index: 60; } .cookies[hidden] { display: none; } .cookies .contenedor { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .cookies p { margin: 0; flex: 1; min-width: 260px; font-size: .95rem; } .cookies .acciones { display: flex; gap: .5rem; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* * REGLA GLOBAL PARA

. Es la trampa clásica del elemento: el * navegador oculta el contenido cerrado por su cuenta, pero en cuanto le das * un `display` propio a un hijo directo —un `display: grid` a una lista, un * `display: flex` a una etiqueta— esa ocultación deja de aplicarse y el * contenido se sigue pintando, fuera de la caja del

y encima de * todo lo que viene detrás. * * Ha pasado dos veces en este proyecto (los grupos del Nocturnario y el panel * de personalización del PDF), así que se corta de raíz para todos y no * componente a componente. Y no se ve midiendo alturas: el contenido * desbordado no suma altura. Lo caza el detector de solapes del auditor. */ details:not([open]) > *:not(summary) { display: none !important; } .centrado { text-align: center; margin: 1.8rem 0 0; } .solo-movil { display: none; } /* --- Lectura del mapa de luz --------------------------------------------- * Es lo único que cambia al mover el mapa, así que tiene que leerse de lejos: * el número grande de la sección NO se mueve a propósito. */ .ml-lectura { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .9rem; } .ml-cifra { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; flex: none; } .ml-donde { flex: 1; min-width: 9rem; line-height: 1.35; } .ml-donde b { display: block; color: var(--texto); font-weight: 600; } .ml-sitio, .ml-dif { display: block; font-size: .68rem; color: var(--texto-4); } .ml-dif { color: var(--acento-claro); } .ml-usar { flex: none; font-size: .82rem; padding: .35rem .7rem; } /* --- Personalizar la hoja que te llevas ------------------------------------ * Sustituye a la casilla suelta de "añadir hojas". Va plegado: quien no * quiera tocar nada no ve más que el botón de descarga. */ .pdf-partes { margin: 0 0 .9rem; } .pdf-partes > summary { cursor: pointer; list-style: none; font-family: var(--sans); font-weight: 600; font-size: .82rem; color: var(--acento-claro); padding: .2rem 0 .2rem 1rem; position: relative; } .pdf-partes > summary::-webkit-details-marker { display: none; } .pdf-partes > summary::before { content: ''; position: absolute; left: .1rem; top: 50%; width: .38rem; height: .38rem; margin-top: -.28rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; } .pdf-partes[open] > summary::before { transform: rotate(45deg); margin-top: -.22rem; } .pdf-partes-txt { margin: .4rem 0 .5rem; font-size: .68rem; color: var(--texto-4); } .pdf-parte { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .45rem; font-size: .82rem; color: var(--texto-2); cursor: pointer; } .pdf-parte input { margin: .15rem 0 0; accent-color: var(--acento); flex: none; } .pdf-parte i { display: block; font-style: normal; font-size: .68rem; color: var(--texto-4); } .pdf-parte .pdf-opcion-coste { color: var(--texto-4); font-size: .68rem; } /* --- Barra de la ventana de observación ------------------------------------ * Dos superpuestos sobre una pista común. Las pistas * nativas se ocultan y solo quedan los pulgares, que son lo que se agarra. */ .sesion-barra { position: relative; height: 2.4rem; margin: .8rem 0 0; max-width: 34rem; } .sesion-pista { position: absolute; left: 0; right: 0; top: .55rem; height: 6px; background: var(--sin-dato); display: block; } .sesion-pista i { position: absolute; top: 0; height: 100%; background: var(--acento); display: block; } .sesion-r { position: absolute; left: 0; width: 100%; top: 0; margin: 0; height: 1.7rem; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .sesion-r:focus { outline: none; } .sesion-r:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--acento-tenue); } .sesion-r::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; cursor: grab; width: 18px; height: 18px; border-radius: 50%; background: var(--texto); border: 2px solid var(--acento); } .sesion-r::-moz-range-thumb { pointer-events: auto; cursor: grab; width: 18px; height: 18px; border-radius: 50%; background: var(--texto); border: 2px solid var(--acento); } .sesion-r::-webkit-slider-runnable-track { background: none; } .sesion-r::-moz-range-track { background: none; } .sesion-extremos { position: absolute; left: 0; right: 0; top: 1.5rem; display: flex; justify-content: space-between; font-family: var(--mono); font-size: .68rem; color: var(--texto-4); } /* --- Tu dibujo en el Nocturnario ------------------------------------------ */ /* --- Mapa de luz interactivo --------------------------------------------- * El campo se pinta a 100x100 y se estira con image-rendering: pixelated, que * es lo honesto: un modelo de resolucion gruesa no debe fingir detalle fino * interpolando. La capa de encima (nombres, cruz, escala) va aparte y a * resolucion de pantalla, o el texto saldria ilegible. */ .ml-lienzo { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--linea); cursor: grab; touch-action: none; background: var(--sin-dato); } .ml-lienzo.ml-arrastrando { cursor: grabbing; } .ml-lienzo #ml-campo { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; } .ml-encima { position: absolute; inset: 0; pointer-events: none; } .ml-mandos { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; } .ml-boton { background: none; border: 1px solid var(--linea); color: var(--texto-2); font-family: var(--sans); font-weight: 600; font-size: .82rem; line-height: 1; padding: .35rem .6rem; cursor: pointer; } .ml-boton:hover { border-color: var(--acento); color: var(--acento-claro); } .ml-centrar { margin-left: auto; } .ml-escala { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--texto-4); } .ml-lectura { margin: .6rem 0 0; font-size: .82rem; color: var(--texto-2); padding-left: .7rem; border-left: 2px solid var(--acento); } .ml-lectura b { color: var(--texto); font-weight: 600; } .ml-lectura .ml-dif { display: block; color: var(--texto-3); margin-top: .15rem; } .ml-lectura .enlace { display: inline-block; margin-top: .25rem; } .hz-tope { flex-basis: 100%; margin: .4rem 0 0; font-size: .82rem; color: var(--regular); } .hz-tope[hidden] { display: none; } /* Texto solo para lectores de pantalla. El titular del veredicto es una sola palabra ("Buena"), que como H1 no dice de qué va la página: delante va la frase entera, sin ocupar un píxel. */ .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* El índice es fijo: los anclajes tienen que dejarle sitio o el titular de la sección queda debajo de la barra. */ #veredicto, #sesion, #oscuridad, #horizonte, #que-mirar, #diario, #coleccion { scroll-margin-top: 3.6rem; } #ver-todos[hidden] { display: none; } /* --- Movil ---------------------------------------------------------------- */ @media (max-width: 560px) { .principal { padding-top: 1.8rem; } .objetos { grid-template-columns: 1fr; gap: 0; } .veredicto-razon { font-size: 1.15rem; } .tl { gap: .45rem .7rem; } .tl-etiqueta { font-size: .68rem; letter-spacing: .08em; } .oscuridad-bortle { font-size: 2.6rem; } .pdf-panel-acciones .boton { margin-left: 0; width: 100%; } /* * La tabla de la noche, apilada. Antes la columna "Consecuencia" se * escondia en movil, y era justo la que dice QUE SIGNIFICA la lectura: * en el telefono quedaba "Seeing — inestable" y ahi se acababa la * explicacion. Ahora cada fila es un bloque de dos lineas: campo y * lectura arriba, la consecuencia debajo a todo el ancho. */ .tabla-noche, .tabla-noche tbody, .tabla-noche tr, .tabla-noche td { display: block; } .tabla-noche thead { display: none; } .tabla-noche tr { padding: .7rem 0; border-bottom: 1px solid var(--linea-tenue); } .tabla-noche tr:last-child { border-bottom: 0; } .tabla-noche td { border: 0; padding: 0; width: auto; } .tabla-noche .campo { width: auto; font-weight: 600; color: var(--texto); display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; } /* Apilada, todo cuelga del mismo lado */ .tabla-noche tbody td.lectura, .tabla-noche tbody td.consecuencia, .tabla-noche tbody td:last-child { text-align: left; justify-content: flex-start; margin-top: .25rem; } .tabla-noche .consecuencia { display: block; } /* * La cabecera del sitio deja de ser pegajosa en movil. Ocupaba 105 px fijos * (marca arriba, navegacion debajo, porque no cabe en una linea) y, en * cuanto aparecia el indice de la pagina, se sumaban 148 px de barras: casi * una quinta parte de la pantalla dedicada a no enseñar nada. El indice ya * hace de navegacion mientras se baja. */ .cabecera { position: static; padding: .8rem 0; } .cabecera .contenedor { gap: .5rem 1rem; } .nav { margin-left: 0; width: 100%; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: .1rem; } .nav::-webkit-scrollbar { display: none; } .nav a { white-space: nowrap; } /* * Tabla de sitios: en 375 px no cabe en cuatro columnas y el enlace al * mapa se quedaba fuera de la pantalla, obligando a desplazar en * horizontal para llegar a lo unico accionable de la fila. */ .tabla-envoltura { overflow: visible; } .tabla-lugares { min-width: 0; display: block; } .tabla-lugares thead { display: none; } .tabla-lugares tbody, .tabla-lugares tr, .tabla-lugares td { display: block; } .tabla-lugares tr { padding: .75rem 0; border-bottom: 1px solid var(--linea-tenue); } .tabla-lugares tr:last-child { border-bottom: 0; } .tabla-lugares td { border: 0; padding: 0; width: auto; text-align: left; white-space: normal; } .tabla-lugares .lg-dist, .tabla-lugares .lg-bortle, .tabla-lugares .lg-mapa { display: inline; text-align: left; width: auto; font-size: .82rem; color: var(--texto-3); } .tabla-lugares .lg-dist::after, .tabla-lugares .lg-bortle::after { content: ' · '; } .tabla-lugares .lg-bortle::before { content: 'Bortle '; } .tabla-lugares .solo-movil { display: inline; } } /* --- Índice de la página -------------------------------------------------- * * Aparece cuando el veredicto sale de pantalla. Con siete bloques largos, * llegar al diario exigía recorrer el catálogo entero. */ .indice-pagina { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: rgba(16, 14, 12, .93); border-bottom: 1px solid var(--linea); transform: translateY(-100%); transition: transform .18s ease; backdrop-filter: blur(6px); } .indice-pagina.visible { transform: none; } .indice-pagina .contenedor { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .indice-pagina .contenedor::-webkit-scrollbar { display: none; } .indice-pagina a { flex: none; padding: .7rem .75rem; text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-4); white-space: nowrap; border-bottom: 2px solid transparent; } .indice-pagina a:hover { color: var(--texto-2); } .indice-pagina a.activo { color: var(--texto); border-bottom-color: var(--acento); } @media (prefers-reduced-motion: reduce) { .indice-pagina { transition: none; } } /* El acceso al diario, en la cabecera: es lo único de la barra que apunta dentro de la propia página, así que se distingue con el filo del acento. */ /* * "Mi diario" llevaba un filo naranja debajo, que es exactamente como se marca * "estas en esta pagina", siendo el unico de los cuatro que NO va a otra * pagina. Ahora tiene la forma de los chips del horizonte —un atajo, no un * enlace de menu—, va al final y separado, y trae el numero de salidas. */ .nav a.nav-diario { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--linea); border-radius: 99px; color: var(--texto-2); } .nav a.nav-diario:hover { border-color: var(--acento); color: var(--texto); } .nav-diario b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--acento-claro); } /* Descarga del pie: mismas opciones que el panel de arriba. En móvil este es el único botón de descarga que se encuentra de verdad. */ .pdf-pie { margin: 2.2rem auto 0; max-width: 30rem; display: flex; flex-direction: column; align-items: center; gap: .7rem; } .pdf-opcion-pie { margin: 0; justify-content: center; text-align: left; } .pdf-pie .boton { width: 100%; } /* --- La colección --------------------------------------------------------- * * Lo que has visto y lo que te falta. Marcador arriba, filtros, y luego una * rejilla por tipo de objeto. La casilla de la derecha es un interruptor: * lleno y con acento cuando está visto. */ #coleccion:empty { display: none; } #coleccion:empty::before { display: none; } .col-marcador { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.2rem; align-items: center; margin: .3rem 0 1.4rem; } .col-cifra { grid-row: span 2; font-family: var(--display); font-weight: 400; font-size: 3.4rem; line-height: .9; color: var(--texto); font-variant-numeric: tabular-nums; } .col-cifra i { font-style: normal; font-size: .82rem; color: var(--texto-4); } .col-barra { height: 6px; background: var(--sin-dato); align-self: end; } .col-barra i { display: block; height: 100%; background: var(--excelente); } .col-frase { margin: 0; font-size: .95rem; color: var(--texto-2); max-width: 62ch; align-self: start; } .col-filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; } .col-filtro { background: none; border: 1px solid var(--linea); color: var(--texto-3); font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .06em; padding: .38rem .7rem; cursor: pointer; } .col-filtro:hover { border-color: var(--texto-4); color: var(--texto-2); } .col-filtro[aria-pressed="true"] { border-color: var(--acento); color: var(--texto); background: var(--acento-tenue); } /* Grupos plegables. Con el catalogo creciendo, siete listas abiertas son varias pantallas de scroll; plegado, cada cabecera ya dice lo que importa. */ .col-grupo { border-bottom: 1px solid var(--linea); } .col-grupo:first-of-type { border-top: 1px solid var(--linea); } .col-grupo-cab { display: flex; align-items: baseline; gap: .7rem; padding: .6rem .2rem .6rem 1.4rem; cursor: pointer; position: relative; list-style: none; } .col-grupo-cab::-webkit-details-marker { display: none; } /* Chevron propio: el marcador nativo cambia de forma en cada navegador */ .col-grupo-cab::before { content: ''; position: absolute; left: .25rem; top: 50%; width: .42rem; height: .42rem; margin-top: -.3rem; border-right: 1.5px solid var(--texto-4); border-bottom: 1.5px solid var(--texto-4); transform: rotate(-45deg); transition: transform .15s; } .col-grupo[open] > .col-grupo-cab::before { transform: rotate(45deg); margin-top: -.25rem; } .col-grupo-cab:hover { background: var(--fondo-2); } .col-grupo-cab:hover::before { border-color: var(--acento-claro); } .col-grupo-tit { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--texto); margin: 0; flex: 1; } .col-grupo > .col-lista, .col-grupo > .col-vacio { padding: .3rem 0 1rem 1.4rem; } /* Ver la regla global de

al principio de la hoja */ .col-barra-mandos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1rem; } .col-barra-mandos .col-filtros { margin-bottom: 0; } .col-cuenta { font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .08em; color: var(--texto-4); font-variant-numeric: tabular-nums; flex: none; } .col-cuenta b { color: var(--acento-claro); font-weight: 600; } .col-vacio { margin: .2rem 0 0; font-size: .82rem; color: var(--texto-4); } .col-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .2rem .9rem; } /* * Tres columnas: miniatura, nombre y marca de visto. Llego a haber una * cuarta con una flecha de subir imagen, y se ha quitado —era un icono sin * rotulo repetido 121 veces, y lo de las imagenes vive ahora en la ficha. */ .col-obj { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: .4rem; padding: .35rem 0; } .col-boceto { line-height: 0; opacity: .55; } .col-nom { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--texto-3); min-width: 0; line-height: 1.25; } .col-nom:hover { color: var(--acento-claro); } .col-pie { display: block; font-weight: 400; font-size: .68rem; color: var(--texto-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .col-marcar { width: 1.6rem; height: 1.6rem; flex: none; cursor: pointer; background: none; border: 1px solid var(--linea); color: var(--texto-4); font-family: var(--sans); font-size: .82rem; line-height: 1; } .col-marcar:hover { border-color: var(--texto-3); color: var(--texto-2); } .col-visto .col-boceto { opacity: 1; } .col-visto .col-nom { color: var(--texto); } .col-visto .col-marcar { background: var(--excelente); border-color: var(--excelente); color: #13160f; } .col-hoy .col-nom { color: var(--texto-2); } .col-hoy .col-pie { color: var(--acento-claro); } .col-aviso { margin: 1rem 0 0; font-size: .82rem; color: var(--texto-4); max-width: 70ch; } .diario-subir-pie { margin: .6rem 0 0; font-size: .68rem; color: var(--texto-4); } @media (max-width: 560px) { .col-marcador { grid-template-columns: 1fr; gap: .5rem; } .col-cifra { grid-row: auto; font-size: 2.6rem; } .col-lista { grid-template-columns: 1fr; } } /* --- Seccion del eclipse 2027 ---------------------------------------------- * * Paginas estaticas (eclipse-2027/). Las dos tarjetas de arriba responden a * las dos preguntas que la gente trae de casa; las tablas van dentro de un * envoltorio con scroll propio para que en el movil nunca desborde la pagina. */ .eclipse-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.2rem 0 2rem; } .eclipse-tarjeta { display: block; padding: 1rem 1.1rem; border: 1px solid var(--linea); border-radius: 2px; text-decoration: none; color: var(--texto-2); transition: border-color .15s; } .eclipse-tarjeta:hover { border-color: var(--acento); } .eclipse-tarjeta h3 { margin: 0 0 .4rem; font-size: 1.15rem; color: var(--texto); } .eclipse-tarjeta p { margin: 0; font-size: .82rem; color: var(--texto-3); } .tabla-scroll { overflow-x: auto; } .tabla-eclipse { width: 100%; border-collapse: collapse; } .tabla-eclipse th { text-align: left; font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-4); padding: 0 .8rem .55rem 0; border-bottom: 1px solid var(--linea); white-space: nowrap; } .tabla-eclipse td { padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--linea-tenue); font-size: .95rem; color: var(--texto-2); vertical-align: baseline; } .tabla-eclipse td:first-child { font-weight: 600; color: var(--texto); } .tabla-eclipse th:last-child, .tabla-eclipse td:last-child { text-align: right; padding-right: 0; } .tabla-eclipse tr:last-child td { border-bottom: 0; } /* Horas y duraciones: lectura de instrumento, en mono */ .te-hora { font-family: var(--mono); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .eclipse-nota-tabla { margin: .8rem 0 0; font-size: .82rem; color: var(--texto-4); max-width: 72ch; } /* --- Mapa de la franja del eclipse (.mef-) -------------------------------- * * Dos capas superpuestas: el relieve en