/* * El panel de Taraceista. * * Mismas reglas que la web publica, que es de donde viene el cliente y no * puede notar el salto: * * 1. CERO sombras. Para separar bloques, filetes de 1px. * 2. Fondo negro casi puro, hueso para el texto, un solo acento. * 3. Bordes rectos. Nada de esquinas redondeadas. * * Y una regla propia de aqui: un panel es una herramienta de trabajo, no un * escaparate. Nada se mueve si no es porque el usuario lo ha tocado. */ :root { --negro: #0a0a0b; --negro-2: #121215; --negro-3: #1c1c20; --linea: #2a2a30; --linea-viva: #3d3d45; --hueso: #f2f0ed; --gris: #8b8783; --acento: #e4572e; --acento-apagado: #b8401f; --rojo: #d64545; /* Solo placeholders (ver guia §2), y el brillo que recorre el esqueleto. Estuvieron escritas como var(--apagado) y var(--hueso-brillo), que se llaman a si mismas: el navegador las da por invalidas y en oscuro los ejemplos de los campos salian con el color del texto, como si ya estuvieran rellenos (lo vio Jesus el 01/10 en Ayuda). Valor de la guia. */ --apagado: #6f6b66; --hueso-brillo: #1f1f24; --display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif; --texto: 'Bricolage Grotesque', system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace; --ancho: 1100px; color-scheme: dark; } /* * MODO CLARO. Sigue al sistema (prefers-color-scheme): si el portatil esta en * claro, el panel esta en claro. Y en el ordenador se puede forzar a mano. Los tokens son los de * guia-de-diseño/tokens/colores.json, seccion «claro». * * LOS NOMBRES SON LOS DEL ORIGEN OSCURO. `--negro` sigue llamandose asi y en * claro vale un blanco casi puro; `--hueso` es la tinta y en claro es negro. * Renombrarlas a «fondo» y «tinta» habria sido tocar mil lineas para lo mismo: * lo que importa es el papel, y el papel no cambia. * * Y NO ES CREMA. La guia lo prohibe (es la paleta de Claude): blanco casi puro, * como el negro es casi puro. El acento en claro es el apagado del oscuro: el * naranja de marca da 4,1:1 sobre blanco y no vale para texto pequeño; este da * 5,1:1. */ /* A mano, desde el selector de la cabecera (src/tema.mjs): `data-tema` en gana al sistema. Sin atributo, manda prefers-color-scheme. Los tokens van dos veces porque CSS no deja compartir un bloque entre un selector y una media query; si tocas uno, toca el otro. */ :root[data-tema="claro"] { --negro: #f6f6f7; --negro-2: #ededef; --negro-3: #e3e3e6; --linea: #d8d8dc; --linea-viva: #bdbdc4; --hueso: #0a0a0b; --gris: #66646a; --apagado: #767479; --acento: #b8401f; --acento-apagado: #96331a; --rojo: #b73434; --hueso-brillo: #e6e6e9; color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) { --negro: #f6f6f7; --negro-2: #ededef; --negro-3: #e3e3e6; --linea: #d8d8dc; --linea-viva: #bdbdc4; --hueso: #0a0a0b; --gris: #66646a; --apagado: #767479; --acento: #b8401f; --acento-apagado: #96331a; --rojo: #b73434; --hueso-brillo: #e6e6e9; color-scheme: light; } } /* La marca en pantalla: cada pieza lleva su papel, y el papel se resuelve aqui, en el tema. En claro los rombos de hueso pasan a tinta solos. */ .pieza-acento { fill: var(--acento); } .pieza-hueso { fill: var(--hueso); } .pieza-gris { fill: var(--gris); } .pieza-fondo { fill: var(--negro); } * { box-sizing: border-box; margin: 0; padding: 0; } /* El atributo hidden lo pisa cualquier regla de display propia (la del navegador es la mas debil de todas). Sin esto, ocultar algo desde el guion no oculta nada: el campo del codigo salia en la pantalla de entrar. */ [hidden] { display: none !important; } body { background: var(--negro); color: var(--hueso); font-family: var(--texto); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } .envoltorio { width: min(var(--ancho), 100% - 40px); margin-inline: auto; } h1 { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.05; } h2 { font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; } /* ---------- Botones: los mismos de la web ---------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; padding: 15px 26px; font: 500 0.94rem/1 var(--texto); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .boton--fuerte { background: var(--acento); color: #fff; } .boton--fuerte:hover { background: var(--acento-apagado); } .boton--linea { border-color: var(--linea-viva); color: var(--hueso); background: none; } .boton--linea:hover { border-color: var(--hueso); } .boton[disabled] { opacity: 0.5; cursor: default; } .boton--ancho { width: 100%; } /* ---------- Cabecera ---------- */ .cabecera { border-bottom: 1px solid var(--linea); } .cabecera__fila { display: flex; align-items: center; gap: 20px; height: 62px; } .marca { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.04em; } .marca svg { width: 22px; height: 22px; display: block; } .cabecera__yo { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 0.85rem; color: var(--gris); } .cabecera__yo button { background: none; border: 0; color: var(--gris); font: inherit; cursor: pointer; } .cabecera__yo button:hover { color: var(--hueso); } @media (max-width: 560px) { .cabecera__correo { display: none; } } /* En un movil no caben la marca con su nombre, los dos enlaces, el aspecto, el idioma y salir (30/08: con el selector de aspecto la cabecera se salia de ancho a 390 px): se queda la estrella sola y todo mas junto. */ @media (max-width: 480px) { .marca__nombre { display: none; } .cabecera__fila { gap: 12px; } .cabecera__yo { gap: 10px; } .cabecera__nav { gap: 10px; margin-right: 0; } } /* ---------- Entrar ---------- */ .entrada { min-height: 100dvh; display: grid; place-items: center; padding: 20px; } .entrada__caja { width: min(400px, 100%); } .entrada__marca { display: block; margin: 0 auto 20px; width: 56px; height: 56px; } /* El SVG viene con width="72" de fabrica: sin esta regla se sale de la caja y la estrella queda corrida a la derecha de su sitio. */ .entrada__marca svg { width: 100%; height: 100%; display: block; } .entrada h1 { font-size: 1.75rem; margin-bottom: 6px; } .boton--google { gap: 10px; background: var(--negro); } .entrada__o { display: flex; align-items: center; gap: 12px; margin: 14px 0 2px; font-size: 0.88rem; color: var(--gris); } /* La vuelta al camino corto cuando el correo esta desplegado. */ .entrada__mejor { margin: 10px 0 0; text-align: center; font-size: 0.9rem; } .entrada__o::before, .entrada__o::after { content: ''; flex: 1; border-top: 1px solid var(--linea); } .entrada__despliega { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: default; } .entrada__despliega--pulsa { color: var(--hueso); cursor: pointer; } /* Al desplegar el correo (o volver a Google), el que entra aparece con un movimiento corto, no de golpe. */ @media (prefers-reduced-motion: no-preference) { .entrada__aparece { animation: entrada-aparece 0.35s ease-out; } @keyframes entrada-aparece { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } } .entrada__casilla + .entrada__casilla { margin-top: 8px; } .entrada .campo { margin-top: 14px; } .entrada .boton--grande { padding-top: 13px; padding-bottom: 13px; } .entrada__pie { margin-top: 24px; font-size: 0.88rem; color: var(--gris); text-align: center; } .entrada__pie button { background: none; border: 0; color: var(--acento); font: inherit; cursor: pointer; } .entrada__pie button:hover { color: var(--hueso); } .campo { display: block; margin-top: 18px; } .campo span { display: block; font-size: 0.82rem; color: var(--gris); margin-bottom: 7px; } .campo input { width: 100%; background: var(--negro-2); border: 1px solid var(--linea-viva); color: var(--hueso); font: inherit; font-size: 0.95rem; padding: 13px 14px; outline: none; } .campo input:focus { border-color: var(--acento); } /* Color solido y no un gris con transparencia: sobre el fondo del campo, un 33% de opacidad se queda en 1,3:1 de contraste y no se lee. Este da 3,9:1, legible de sobra y aun asi claramente por debajo del texto escrito. */ .campo input::placeholder, .campo textarea::placeholder { color: var(--apagado); } .aviso { margin-top: 18px; border-left: 2px solid var(--rojo); padding: 10px 14px; background: var(--negro-2); font-size: 0.88rem; } /* En el alta y la entrada el aviso guarda su sitio siempre: al aparecer no mueve ni un boton. */ .entrada .aviso { margin-top: 14px; line-height: 1.4; } .entrada .aviso:empty { visibility: hidden; min-height: calc(1.4em + 20px); } .aviso--bien { border-left-color: var(--acento); } /* ---------- Mis webs ---------- */ .panel { padding: clamp(36px, 6vw, 60px) 0 80px; } .panel__titular { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .panel__cuenta { font-family: var(--mono); font-size: 0.74rem; color: var(--gris); letter-spacing: 0.06em; } .rejilla { display: grid; gap: 16px; margin-top: 34px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .web { border: 1px solid var(--linea); padding: 22px; display: flex; flex-direction: column; min-height: 168px; transition: border-color 0.15s; } .web:hover { border-color: var(--linea-viva); } .web__estado { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); display: flex; align-items: center; gap: 7px; } .web__punto { width: 6px; height: 6px; background: var(--gris); flex: none; } .web__punto--viva { background: var(--acento); } .web h2 { margin-top: 14px; } .web__dominio { margin-top: 4px; font-size: 0.85rem; color: var(--gris); word-break: break-all; } .web__pie { margin-top: auto; padding-top: 18px; display: flex; gap: 10px; } .web__pie .boton { padding: 10px 16px; font-size: 0.85rem; } /* La caja de crear: raya discontinua porque todavia no es nada. Es la unica forma de decir "aqui cabe algo" sin escribirlo. */ .nueva { border: 1px dashed var(--linea-viva); background: none; color: var(--gris); font: inherit; cursor: pointer; /* Un boton no se estira solo: dentro de la rejilla da igual, pero suelto se queda del ancho de su texto y las letras se le salen por los lados. */ width: 100%; min-height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: border-color 0.15s, color 0.15s; } .nueva:hover { border-color: var(--acento); color: var(--hueso); } .nueva__mas { font-size: 1.9rem; line-height: 1; font-weight: 300; } .nueva__texto { font-size: 0.9rem; } /* Sin ninguna web todavia: la caja de crear manda, ocupa el ancho y explica. */ .estreno { margin-top: 34px; } .estreno .nueva { min-height: 260px; max-width: 560px; } .estreno .nueva__mas { font-size: 2.6rem; } .estreno__nota { margin-top: 16px; font-size: 0.9rem; color: var(--gris); max-width: 52ch; } .cargando { margin-top: 34px; color: var(--gris); font-size: 0.9rem; } /* Las tarjetas mientras llegan: la misma caja, con barras en vez de texto. Misma altura, mismo borde y mismos márgenes que una web de verdad, para que al llegar los datos no se mueva nada de sitio. Si el hueco no coincide, un esqueleto es un salto con animación. La clase `.hueso` es la que ya usa la ficha, más abajo en esta misma hoja: aquí solo van las medidas de ESTAS barras. Definirla otra vez sería tener el mismo nombre en dos sitios, y como la de abajo es la que gana, tocar una y no la otra da un resultado que no se explica leyendo la que has tocado. */ .web--hueso { gap: 0; pointer-events: none; } /* Sin el margen de 14 px que `.hueso` lleva para la ficha: aquí las separaciones las pone cada barra con su `margin-top`. */ .web--hueso .hueso { display: block; border-radius: 3px; margin-bottom: 0; } /* Los márgenes salen de MEDIR una tarjeta de verdad, no de calcular a ojo. A ojo salían 168 px contra los 186,2 que mide la real, y esos 18 px de diferencia son exactamente el salto que un esqueleto viene a quitar: la página se recolocaba justo al llegar los datos. Cada barra se ve más fina que el texto que sustituye -queda mejor-, así que el hueco que le falta va en el margen de la siguiente. Suman 140,2 px, que con los 22 de relleno arriba y abajo y el borde dan los 186,2. */ .hueso--estado { width: 84px; height: 10px; } .hueso--nombre { width: 62%; height: 19px; margin-top: 21.4px; } .hueso--dominio { width: 45%; height: 12px; margin-top: 14.4px; } .hueso--boton { width: 104px; height: 35.6px; margin-top: 27.8px; } /* Para quien no ve la pantalla: los huesos no dicen nada, esto sí. */ .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Alta de una web ---------- */ .alta { padding: clamp(36px, 6vw, 64px) 0 90px; } .alta__caja { width: min(620px, 100%); margin-inline: auto; } .alta__paso { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); } .alta h1 { margin-top: 12px; font-size: clamp(1.7rem, 3.6vw, 2.3rem); } .alta__ayuda { margin-top: 10px; color: var(--gris); font-size: 0.95rem; max-width: 46ch; } .alta__botonera { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; } /* Las dos opciones del principio. Cuadradas y de 1px, como todo. */ .opciones { display: grid; gap: 14px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .opcion { border: 1px solid var(--linea); background: none; color: var(--hueso); font: inherit; text-align: left; padding: 24px; cursor: pointer; transition: border-color 0.15s; } .opcion:hover { border-color: var(--acento); } .opcion[aria-pressed="true"] { border-color: var(--acento); background: var(--negro-2); } .opcion strong { display: block; font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; } .opcion span { display: block; margin-top: 6px; font-size: 0.88rem; color: var(--gris); } /* La landing ocupa la fila entera. En esta caja -unos 620 px- no caben tres columnas, asi que la tercera caia sola dejando un hueco al lado, que se lee como "se nos ha olvidado algo". Cruzada de lado a lado deja de ser una tarjeta descolgada y pasa a decir lo que es: no una tercera clase de web, sino otra cosa que tambien se puede. */ .opcion--ancha { grid-column: 1 / -1; } /* «si tienes», «opcional»: la aclaración va pegada a la etiqueta y en gris, porque un campo que no es obligatorio hay que decirlo DONDE se rellena, no en una nota al pie que se lee después de haberlo dejado en blanco. */ .campo__suelto { font-style: normal; color: var(--gris); font-size: 0.85em; margin-left: 6px; } /* Los archivos elegidos, esperando a subir. Con su peso al lado: es el dato que hace entender por qué uno tarda y otro no. */ .adjuntos { list-style: none; display: grid; gap: 6px; margin-top: 12px; } .adjunto { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linea); padding: 9px 12px; font-size: 0.86rem; } .adjunto__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adjunto__peso { flex: none; font-family: var(--mono); font-size: 0.76rem; color: var(--gris); } .adjunto__quitar { flex: none; background: none; border: 0; color: var(--gris); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 2px; } .adjunto__quitar:hover { color: var(--acento); } /* El bocadillo: la pregunta la hace alguien, no un formulario. */ .bocadillo { position: relative; margin-top: 30px; border: 1px solid var(--linea-viva); background: var(--negro-2); padding: 22px 24px; } .bocadillo::after { content: ''; position: absolute; left: 32px; bottom: -8px; width: 14px; height: 14px; background: var(--negro-2); border-right: 1px solid var(--linea-viva); border-bottom: 1px solid var(--linea-viva); transform: rotate(45deg); } .bocadillo p { font-family: var(--display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.3; } .bocadillo textarea { width: 100%; margin-top: 16px; min-height: 100px; resize: vertical; background: var(--negro); border: 1px solid var(--linea-viva); color: var(--hueso); font: inherit; font-size: 0.95rem; padding: 12px 13px; outline: none; } .bocadillo textarea:focus { border-color: var(--acento); } .bocadillo textarea::placeholder { color: var(--apagado); } /* Va con `.bocadillo` delante a proposito: `.bocadillo p` de arriba pesa mas que una clase sola, asi que la letra pequeña se estaba pintando del tamaño de la pregunta. Se veia en el paso 2 desde siempre. */ .bocadillo p.bocadillo__quien { margin-top: 18px; font-size: 0.8rem; color: var(--gris); } /* Sugerencias de dominio */ .dominios { display: grid; gap: 10px; margin-top: 26px; } .dominio { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linea); background: none; color: var(--hueso); font: inherit; text-align: left; padding: 15px 18px; cursor: pointer; transition: border-color 0.15s; } .dominio:hover { border-color: var(--linea-viva); } .dominio[aria-pressed="true"] { border-color: var(--acento); background: var(--negro-2); } .dominio__nombre { font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.02em; } .dominio__zona { color: var(--gris); } .dominio__marca { margin-left: auto; font-size: 0.78rem; color: var(--acento); } .dominios__cargando { color: var(--gris); font-size: 0.9rem; margin-top: 26px; } .propio { margin-top: 26px; border-top: 1px solid var(--linea); padding-top: 22px; } .propio__fila { display: flex; align-items: stretch; margin-top: 12px; border: 1px solid var(--linea-viva); } .propio__fila:focus-within { border-color: var(--acento); } .propio__fila input { flex: 1; min-width: 0; background: var(--negro-2); border: 0; color: var(--hueso); font: inherit; font-size: 0.95rem; padding: 13px 14px; outline: none; } .propio__fila input::placeholder { color: var(--apagado); } .propio__fila span { display: flex; align-items: center; padding: 0 14px; background: var(--negro-3); color: var(--gris); font-size: 0.9rem; white-space: nowrap; } .propio__dictamen { margin-top: 10px; font-size: 0.85rem; color: var(--gris); min-height: 1.2em; } .propio__dictamen--libre { color: var(--acento); } /* El dominio de verdad y el colgador de subdominios: mismas piezas que el campo libre, con un desplegable donde alli habia un sufijo fijo. */ .deverdad { margin-top: 26px; border-top: 1px solid var(--linea); padding-top: 22px; } .deverdad__incluido { color: var(--acento); font-weight: 600; } .deverdad select { background: var(--negro-3); border: 0; border-left: 1px solid var(--linea-viva); color: var(--gris); font: inherit; font-size: 0.9rem; padding: 0 14px; outline: none; } .deverdad select:focus { color: var(--hueso); } /* Los datos del registro, en dos columnas donde caben y en una donde no. */ .contacto-registro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 16px; } .contacto-registro .campo { margin-top: 12px; } @media (max-width: 560px) { .contacto-registro { grid-template-columns: 1fr; } } /* ---------- Esperando a que arranque el taller ---------- */ .espera { min-height: 100dvh; display: grid; place-items: center; padding: 40px 20px; text-align: center; } .espera__caja { width: min(520px, 100%); } .espera__marca { width: min(300px, 70vw); margin: 0 auto 40px; --avance: 0; } .espera__marca svg { width: 100%; height: auto; display: block; } .espera__marca--roto { opacity: 0.35; } .espera__paso { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); } .espera__titulo { margin-top: 14px; font-size: clamp(1.5rem, 3.4vw, 2.1rem); } .espera__nota { margin-top: 12px; color: var(--gris); font-size: 0.92rem; } /* Un filete de 1px que se llena. Nada de barras con bordes redondeados. */ .espera__regla { margin: 34px auto 0; width: min(320px, 80%); height: 1px; background: var(--linea); } .espera__regla span { display: block; height: 100%; width: 0; background: var(--acento); transition: width 0.4s linear; } .espera__pie { margin-top: 12px; font-family: var(--mono); font-size: 0.7rem; color: var(--gris); letter-spacing: 0.08em; min-height: 1em; } /* La pregunta del taller mientras escribe la web: el mismo bloque que en la ficha. */ .espera__avisos { margin: 10px 0 0; } .espera__avisos:empty { display: none; } .espera__salidas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; } .espera__salidas[hidden] { display: none; } .espera__pregunta { margin-top: 22px; text-align: left; border: 1px solid var(--linea); border-left: 3px solid var(--acento); background: var(--negro-2); padding: 16px 18px; display: grid; gap: 10px; } .espera__pregunta[hidden] { display: none; } .espera__pregunta-rotulo { margin: 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); } .espera__pregunta-texto { margin: 0; font-family: var(--display); font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; } .espera__pregunta-porque { margin: 0; font-size: 0.88rem; color: var(--gris); } .espera__pregunta-porque[hidden] { display: none; } .espera__opciones { display: flex; flex-wrap: wrap; gap: 6px; } .espera__opciones:empty { display: none; } .espera__opciones button { font: inherit; font-size: 0.82rem; padding: 6px 12px; border: 1px solid var(--linea); background: var(--negro-3); color: var(--hueso); cursor: pointer; } .espera__opciones button:hover { border-color: var(--linea-viva); } .espera__pregunta textarea { width: 100%; resize: vertical; min-height: 56px; font: inherit; font-size: 0.95rem; padding: 10px 12px; background: var(--negro); color: var(--hueso); border: 1px solid var(--linea-viva); } .espera__pregunta-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .espera__pregunta-nota { font-size: 0.8rem; color: var(--gris); } /* ---------- La ficha de una web ---------- */ /* Manda la web publicada, no los botones: lo primero que se ve es lo que ve quien entre en su direccion. Por eso la mirilla va grande y arriba. */ .ficha { padding: 40px 0 96px; } .ficha__cargando { color: var(--gris); padding: 60px 0; } .ficha__volver { display: inline-block; color: var(--gris); font-size: 0.88rem; margin-bottom: 22px; } .ficha__volver:hover { color: var(--hueso); } .ficha__cabeza { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; padding-bottom: 26px; border-bottom: 1px solid var(--linea); } .ficha__cabeza h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 6px 0 4px; } .ficha__dominio a { color: var(--acento); font-size: 0.94rem; } .ficha__acciones { display: flex; flex-wrap: wrap; gap: 10px; } .ficha__aviso { margin-top: 20px; padding: 12px 16px; border: 1px solid var(--linea-viva); color: var(--hueso); font-size: 0.92rem; } .ficha__aviso--bien { border-color: var(--acento); } .ficha__bloque { padding: 34px 0; border-bottom: 1px solid var(--linea); } /* Lo que va a pasar solo. Con filete naranja a la izquierda y no en una caja de alarma: no es un problema, es una consecuencia que conviene saber. */ .ficha__nota { margin-top: 18px; padding: 12px 0 12px 14px; border-left: 2px solid var(--acento); font-size: 0.88rem; color: var(--gris); line-height: 1.55; max-width: 60ch; } /* Lo que se le propone a esta web. Cada una es una caja con su botón dentro, y no una lista con un botón al final: son tres cosas independientes y hay que poder hacer la segunda sin hacer la primera. El botón va DENTRO para que se vea de cuál es. */ .reco { display: grid; gap: 12px; margin-top: 18px; } .reco__una { border: 1px solid var(--linea); padding: 20px 22px; display: grid; gap: 8px; justify-items: start; } .reco__una h3 { font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--hueso); } .reco__una p { font-size: 0.9rem; color: var(--gris); line-height: 1.55; } .reco__hacer { margin-top: 4px; padding: 9px 18px; font-size: 0.85rem; } /* Encargado y esperando: se apaga en vez de desaparecer, porque lo que dice -«en marcha»- es la única señal de que se pulsó y de que va a llegar. */ .reco__hacer:disabled { opacity: 0.55; cursor: default; } .ficha__titulo { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); font-weight: 400; margin-bottom: 18px; } .ficha__pie { color: var(--gris); font-size: 0.9rem; margin-top: 14px; max-width: 62ch; } .ficha__mas { color: var(--gris); font-size: 0.92rem; display: grid; gap: 16px; justify-items: start; max-width: 62ch; } /* La mirilla: la web de verdad, servida desde su dominio. No es una captura que envejece, es la pagina. */ .mirilla { border: 1px solid var(--linea); background: var(--negro-2); height: min(62vh, 560px); } .mirilla iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; } .versiones { list-style: none; display: grid; } .version { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--linea); } .version:first-child { border-top: 0; } .version__n { font-family: var(--mono); font-size: 0.78rem; color: var(--gris); letter-spacing: 0.08em; } .version__viva { color: var(--acento); } .version__titulo { margin: 4px 0 3px; font-size: 0.98rem; } .version__cuando { color: var(--gris); font-size: 0.82rem; } .version--viva .version__titulo { color: var(--hueso); } .boton--menudo { padding: 9px 14px; font-size: 0.84rem; } /* El esqueleto de los nombres: la misma caja que va a ocupar cada sugerencia, en gris y latiendo. Se prefiere a un "Pensando nombres…" porque cuando llegan los nombres no hay salto: el hueco ya estaba hecho. */ .dominio--hueso { display: block; height: 58px; border: 1px solid var(--linea); background: linear-gradient(90deg, var(--negro-2) 0%, var(--hueso-brillo) 50%, var(--negro-2) 100%); background-size: 200% 100%; animation: hueso 1.4s ease-in-out infinite; } @keyframes hueso { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } } @media (prefers-reduced-motion: reduce) { .dominio--hueso { animation: none } } /* ---------- Trasladar una web que ya existe ---------- */ /* Va debajo de las dos opciones y separado: no es "qué tipo de web quieres" sino otra cosa distinta, y mezclarlo confundiría las dos preguntas. */ .traslado { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .traslado__linea { color: var(--gris); font-size: 0.92rem; } .traslado__resultado { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--linea); color: var(--gris); font-size: 0.9rem; display: grid; gap: 6px; } .traslado__resultado strong { color: var(--hueso); font-family: var(--display); font-size: 1.02rem; font-weight: 500; } .traslado__resultado--bien { border-color: var(--linea-viva); } .traslado__resultado--mal { border-color: var(--acento); } /* Qué se trae de su web: entera, unas cuantas, o solo la portada. Dos filas en vez de dos botones, porque cada opción necesita una línea que explique qué significa -"solo la portada" no dice por sí solo que se pierden las demás páginas-, y eso en un botón no cabe. */ .quetraigo { margin-top: 14px; display: grid; gap: 8px; } .quetraigo__una { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border: 1px solid var(--linea); cursor: pointer; } .quetraigo__una:hover { border-color: var(--linea-viva); } .quetraigo__una:has(input:checked) { border-color: var(--acento); } .quetraigo__una input { flex: none; margin-top: 2px; accent-color: var(--acento); width: 15px; height: 15px; cursor: pointer; } .quetraigo__una span { display: grid; gap: 2px; font-size: 0.84rem; line-height: 1.45; } .quetraigo__una strong { font-size: 0.95rem; } /* La lista de páginas para elegir cuáles se trasladan. Cuarenta direcciones puestas en fila son un muro: en columnas y con la ruta sola -sin el dominio repetido cuarenta veces- se leen de un vistazo. */ .paginas { margin-top: 14px; max-height: 300px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; padding-right: 6px; } .paginas__una { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 6px; font-size: 0.86rem; cursor: pointer; } .paginas__una:hover { background: rgba(255, 255, 255, .05); } .paginas__una input { flex: none; accent-color: var(--acento); width: 15px; height: 15px; cursor: pointer; } .paginas__una span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.8rem; } .paginas__cuenta { margin-top: 10px; font-size: 0.85rem; color: var(--gris); } .paginas__cuenta--mal { color: var(--acento); } .traslado__resultado ul { list-style: none; display: grid; gap: 3px; margin-top: 6px; font-family: var(--mono); font-size: 0.76rem; color: var(--gris); } /* La casilla de la declaración. Texto legible, no letra pequeña escondida: si se le pide a alguien que declare algo, que pueda leerlo. */ .declaro { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; color: var(--gris); font-size: 0.86rem; line-height: 1.55; cursor: pointer; max-width: 70ch; } .declaro input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--acento); flex: none; } /* ---------- Estadísticas ---------- */ /* * La regla que gobierna todo este bloque: un número solo no dice nada. * «320 visitantes» no es bueno ni malo; «320, un 18% más que el mes pasado» sí * es una frase con la que se puede decidir algo. Por eso cada cifra grande * lleva su comparación pegada debajo, y por eso la comparación NO se pinta * cuando no hay con qué comparar: un «+100%» porque antes había cero es ruido * con pinta de dato. */ .stats__cabeza { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; justify-content: space-between; } .stats__cabeza .ficha__titulo { margin-bottom: 0; } .stats__periodos { display: flex; gap: 0; border: 1px solid var(--linea); } .stats__periodo { background: none; border: 0; border-left: 1px solid var(--linea); color: var(--gris); font: inherit; font-size: 0.82rem; padding: 7px 12px; cursor: pointer; white-space: nowrap; transition: color 0.15s, background 0.15s; } .stats__periodo:first-child { border-left: 0; } .stats__periodo:hover { color: var(--hueso); } .stats__periodo--este { background: var(--negro-2); color: var(--acento); } .stats__cifras { display: grid; gap: 1px; margin-top: 22px; background: var(--linea); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--linea); } .cifra { background: var(--negro); padding: 18px 20px; } .cifra__que { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); } /* Tabular para que al cambiar de periodo los números no bailen de ancho. */ .cifra__cuanto { font-family: var(--display); font-weight: 500; font-size: 2.1rem; letter-spacing: -0.035em; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; } .cifra__cambio { font-size: 0.8rem; color: var(--gris); margin-top: 2px; } .cifra__cambio--sube { color: var(--acento); } /* Bajar NO se pinta en rojo. Que en agosto entre menos gente en la web de una heladería no es una alarma, y teñirlo de rojo es asustar por costumbre. */ .cifra__cambio--baja { color: var(--gris); } .stats__vacio { margin-top: 26px; border: 1px dashed var(--linea-viva); padding: 24px; } .stats__vacio-titulo { font-family: var(--display); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 6px; } /* La gráfica. Barras y no una línea: los días que no entró nadie tienen que verse, y una línea los recorre por encima como si no hubieran existido. */ .grafica { margin-top: 28px; position: relative; } .grafica__tope { font-family: var(--mono); font-size: 0.68rem; color: var(--gris); margin-bottom: 4px; } .grafica__lienzo { display: block; width: 100%; height: 150px; border-bottom: 1px solid var(--linea); } .grafica__barra { fill: var(--acento); opacity: 0.75; transition: opacity 0.12s; } .grafica__col:hover .grafica__barra { opacity: 1; } /* Un día a cero no se ve, y tiene que verse: se le deja un filete en el suelo. */ .grafica__barra[height="0"] { height: 1px; y: 99; fill: var(--linea-viva); opacity: 1; } .grafica__pie { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 0.68rem; color: var(--gris); } .stats__rejilla { display: grid; gap: 28px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .stats__tabla-titulo { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); font-weight: 400; margin-bottom: 12px; } /* La barra va DE FONDO en la propia fila y no en una columna aparte: así se lee la proporción de un vistazo sin gastar el doble de ancho. */ .barras { list-style: none; display: grid; } .barra { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 9px 10px; border-top: 1px solid var(--linea); overflow: hidden; } .barra:first-child { border-top: 0; } .barra__relleno { position: absolute; left: 0; top: 0; bottom: 0; background: var(--negro-3); z-index: 0; } .barra__que { position: relative; z-index: 1; flex: 1; min-width: 0; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barra__que em { color: var(--gris); font-style: normal; font-size: 0.8rem; margin-left: 8px; } .barra__cuanto { position: relative; z-index: 1; font-family: var(--mono); font-size: 0.8rem; color: var(--gris); font-variant-numeric: tabular-nums; } .stats__nota { margin-top: 26px; font-size: 0.82rem; color: var(--gris); max-width: 68ch; } /* ---------- Personalizado ---------- */ .stats__propio { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--linea); } .metricas { list-style: none; display: grid; } .metrica { display: flex; gap: 18px; align-items: baseline; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--linea); } .metrica:first-child { border-top: 0; } .metrica__titulo { font-size: 0.98rem; } .metrica__nota { color: var(--gris); font-size: 0.84rem; margin-top: 2px; max-width: 56ch; } .metrica__cuanto { text-align: right; flex: none; } .metrica__veces { font-family: var(--display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .metrica__gente { color: var(--gris); font-size: 0.78rem; margin-top: 4px; } /* Declarada y sin disparar todavía. Se enseña apagada, no escondida: si no apareciera, quien la pidió creería que no se hizo. */ .metrica--quieta .metrica__titulo, .metrica--quieta .metrica__veces { color: var(--gris); } /* * La demostración de cómo se pide una estadística. * * Va donde iría una tabla vacía, y a propósito: aquí lo que falta no son datos, * es que el cliente sepa que puede pedirlos. Un «no hay nada que mostrar» no se * lo enseña; ver un cursor marcar un botón y el número subir, sí. */ .muestra { margin-top: 6px; } .muestra__intro { color: var(--gris); font-size: 0.9rem; margin-bottom: 14px; } .muestra__marco { position: relative; border: 1px solid var(--linea); background: var(--negro-2); padding: 22px; } .muestra__web { display: grid; justify-items: start; gap: 8px; } .muestra__rotulo { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); } .muestra__titular { font-family: var(--display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.025em; } .muestra__boton { display: inline-block; background: var(--acento); color: #fff; font-size: 0.86rem; padding: 9px 18px; margin-top: 4px; } .muestra__rect { position: absolute; border: 1px solid var(--acento); background: rgba(228, 87, 46, 0.12); opacity: 0; transition: opacity 0.25s; pointer-events: none; } .muestra__cursor { position: absolute; left: 0; top: 0; opacity: 0; transition: transform 0.65s cubic-bezier(.3,.7,.3,1), opacity 0.25s; pointer-events: none; } /* Lo que se dice. Con su cursor parpadeando, que es lo que hace que se lea como algo que alguien está escribiendo y no como un rótulo. */ .muestra__dicho { margin-top: 12px; border: 1px solid var(--linea-viva); background: var(--negro); padding: 12px 14px; font-size: 0.92rem; min-height: 3.1em; } .muestra__cursor-texto { display: inline-block; width: 7px; height: 1em; background: var(--acento); vertical-align: -2px; margin-left: 2px; animation: parpadeo 1s step-end infinite; } @keyframes parpadeo { 50% { opacity: 0 } } .muestra__resultado { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border: 1px solid var(--linea); padding: 14px 16px; opacity: 0.25; transition: opacity 0.4s, border-color 0.4s; } .muestra__resultado--vivo { opacity: 1; border-color: var(--acento); } .muestra__resultado-que { font-size: 0.92rem; } .muestra__resultado-cuanto { font-family: var(--display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .muestra__cursor, .muestra__rect, .muestra__resultado { transition: none; } .muestra__cursor-texto { animation: none; } } /* ---------- El selector de idioma ---------- */ /* * Lo que hay puesto, y al tocarlo, los seis con su nombre entero. * * Antes eran las seis siglas en fila, como en la landing, y en una cabecera de * panel -con el correo y el botón de salir al lado- se leían como una palabra * sola: ESCAVAGLEUEN. En la landing funcionan porque allí la cabecera está * vacía; aquí no. */ .idiomas { position: relative; } .idiomas__ahora { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--linea); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--gris); cursor: pointer; list-style: none; transition: border-color 0.15s, color 0.15s; } .idiomas__ahora::-webkit-details-marker { display: none; } .idiomas__ahora:hover { color: var(--hueso); border-color: var(--linea-viva); } .idiomas[open] .idiomas__ahora { color: var(--hueso); border-color: var(--linea-viva); } .idiomas__flecha { font-size: 0.6rem; } .tema__icono { width: 14px; height: 14px; display: block; } .idiomas__uno .tema__icono { width: 15px; height: 15px; } .idiomas__lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; background: var(--negro-2); border: 1px solid var(--linea-viva); display: grid; } .idiomas__uno { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: none; border: 0; border-bottom: 1px solid var(--linea); color: var(--gris); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; } .idiomas__uno:last-child { border-bottom: 0; } .idiomas__uno:hover { background: var(--negro-3); color: var(--hueso); } .idiomas__uno--este { color: var(--hueso); } /* La sigla, en un ancho fijo: sin él los nombres bailan de izquierda a derecha según la sigla tenga dos letras o tres. */ .idiomas__corto { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--gris); width: 22px; flex: none; } .idiomas__uno--este .idiomas__corto { color: var(--acento); } /* En un móvil se despliega ocupando el ancho, pegado al borde derecho: un menú de 190 px flotando sobre una pantalla de 360 se sale por un lado. */ @media (max-width: 480px) { .idiomas__lista { position: fixed; left: 12px; right: 12px; top: 62px; min-width: 0; } } /* ---------- La ficha, con panel a la izquierda ---------- */ /* * Antes la ficha era una página larga con cinco secciones una detrás de otra. * Con eso, lo de abajo no lo miraba nadie: el almacenamiento ni siquiera tenía * dónde ponerse. Un panel de trabajo se usa a diario y llegar a lo tuyo tiene * que costar un click, no un scroll de metro y medio. */ .taller-panel { width: min(var(--ancho), 100% - 40px); margin-inline: auto; padding: 36px 0 80px; display: grid; gap: 40px; align-items: start; } @media (min-width: 900px) { .taller-panel { grid-template-columns: 230px 1fr; } } /* En pantalla ancha se queda pegado arriba: al bajar por doscientos mensajes, cambiar de sección no puede obligar a subir del todo primero. */ @media (min-width: 900px) { .lateral { position: sticky; top: 24px; } } .lateral__web { padding-bottom: 18px; border-bottom: 1px solid var(--linea); margin-bottom: 18px; } .lateral__nombre { font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; margin-top: 10px; } .lateral__dominio { display: block; margin-top: 3px; font-size: 0.85rem; color: var(--acento); word-break: break-all; } .lateral__nav { display: grid; margin-top: 18px; } .lateral__ir { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; font-size: 0.94rem; color: var(--gris); border-left: 2px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s; } .lateral__ir:hover { color: var(--hueso); background: var(--negro-2); } .lateral__ir--esta { color: var(--hueso); background: var(--negro-2); border-left-color: var(--acento); } /* El número de sin leer, en acento: es lo único de esta pantalla que puede necesitar una respuesta hoy. */ .lateral__cuenta { font-family: var(--mono); font-size: 0.72rem; color: var(--acento); } .lateral__otras { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea); } .lateral__rotulo { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; } .lateral__otra { display: block; padding: 7px 0; font-size: 0.9rem; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lateral__otra:hover { color: var(--hueso); } .lateral__otra--todas { color: var(--acento); margin-top: 4px; } /* * EL MÓVIL. * * Aquí no vale encoger el panel de escritorio: en una pantalla de 360 px, una * columna de 230 deja 130 para la web y no es nada. Así que el panel deja de * ser una columna y se convierte en lo que tiene sentido en un móvil: * * - La web y su botón de editar, arriba, a lo ancho. * - Las secciones, en una tira que se desliza. Nada de cajón detrás de un * icono: en una pantalla estrecha, lo que se esconde deja de existir. * - Y el cambio de web al final, que es lo que menos se hace. * * La tira se sale de los márgenes a propósito (los -20 px): si se quedara * dentro, la última sección aparecería cortada justo en el borde y nadie * adivinaría que se puede deslizar. */ @media (max-width: 899px) { .taller-panel { width: 100%; padding: 0 0 60px; gap: 0; } .lateral { padding: 22px 20px 0; } /* * Y que puedan ENCOGER, que es lo que no hacían. * * Un hijo de rejilla vale por defecto `min-width: auto`, y eso significa «no * te hagas más estrecho que tu contenido». Debajo hay dos filas que se * desplazan de lado -las pestañas y «cambiar de web»-, y para calcular ese * mínimo el navegador las mide DESPLEGADAS, como si no llevaran * `overflow-x`. Con cuatro webs, el lateral se plantaba en 571 px dentro de * una ventana de 419 y arrastraba la página entera: la barra de desplazar * horizontal, el botón de editar cortado y las pestañas saliéndose. * * `min-width: 0` deja que encojan, y entonces sí manda el `overflow-x` de * cada fila. No se ve en el ordenador ni con una sola web: hacen falta un * móvil y varias webs a la vez, que es justo lo que tiene quien ya lleva * tiempo usando esto. */ .lateral, .ficha { min-width: 0; } .lateral__web { padding-bottom: 16px; } .lateral__nombre { font-size: 1.35rem; } .lateral__nav { display: flex; gap: 0; margin: 18px -20px 0; padding: 0 20px; overflow-x: auto; border-bottom: 1px solid var(--linea); /* Sin barra de desplazamiento a la vista: en un móvil no se usa, y ocupa una franja gris debajo de las pestañas. */ scrollbar-width: none; } .lateral__nav::-webkit-scrollbar { display: none; } .lateral__ir { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 13px 14px; background: none; } .lateral__ir:first-child { padding-left: 0; } .lateral__ir--esta { border-left: 0; border-bottom-color: var(--acento); background: none; } /* Cambiar de web: al final y en una fila, no en una lista de arriba abajo. En el móvil se entra a mirar UNA web, así que esto no puede comerse la mitad de la primera pantalla; pero esconderlo del todo sería quitar la función, que es lo que estuve a punto de hacer. */ .lateral__otras { margin: 14px 0 0; padding: 0; border-top: 0; display: flex; gap: 8px; overflow-x: auto; align-items: center; scrollbar-width: none; } .lateral__otras::-webkit-scrollbar { display: none; } .lateral__rotulo { margin: 0; flex: none; } .lateral__otra { padding: 6px 11px; border: 1px solid var(--linea); white-space: nowrap; font-size: 0.84rem; flex: none; } .ficha { padding: 0 20px; } .ficha__bloque { padding: 26px 0; } .ficha__cabeza { padding-bottom: 20px; } /* La mirilla, más baja: en vertical, 62vh de iframe deja la página sin sitio para nada más y hay que hacer scroll para ver que hay algo debajo. */ .mirilla { height: min(46vh, 380px); } /* Y las tablas de estadísticas, en una sola columna. Dos columnas de 150 px con nombres de página dentro no se leen. */ .stats__rejilla { grid-template-columns: 1fr; gap: 24px; } .stats__cifras { grid-template-columns: 1fr 1fr; } .cifra__cuanto { font-size: 1.7rem; } .archivo { flex-wrap: wrap; } .espacio__cifras { flex-wrap: wrap; } } /* Y en un móvil estrecho de verdad, las cifras una debajo de otra: tres columnas de 100 px cortan «Páginas por visitante» por la mitad. */ @media (max-width: 420px) { .stats__cifras { grid-template-columns: 1fr; } .stats__periodos { width: 100%; overflow-x: auto; } } /* Sin hueco arriba: el primer bloque empieza pegado a las pestañas. `padding-top` y no `padding` a secas, que es lo que había: puesto entero borraba también los lados, y como esta regla va DESPUÉS de la del móvil se llevaba por delante sus 20 px. Por eso en un móvil la ficha salía pegada al borde -la mirilla, los títulos y los botones- mientras el panel de la izquierda, que tiene su propio relleno, sí respiraba. */ .ficha { padding-top: 0; } .ficha .ficha__bloque:first-of-type { padding-top: 0; } /* ---------- El esqueleto ---------- */ /* * La forma de lo que va a venir, no la palabra «Cargando». * * La base de datos se duerme sola y tarda hasta quince segundos en despertar. * Quince segundos con un «Cargando…» es una pantalla muerta; el mismo rato * viendo el hueco de lo que va a llegar se lee como algo que está pasando. Y * cuando llega no hay salto, porque el hueco ya estaba hecho. */ .hueso { background: linear-gradient(90deg, var(--negro-2) 0%, var(--hueso-brillo) 50%, var(--negro-2) 100%); background-size: 200% 100%; animation: hueso 1.4s ease-in-out infinite; margin-bottom: 14px; } .hueso--rotulo { height: 10px; width: 120px; } .hueso--titulo { height: 34px; width: min(320px, 70%); } .hueso--linea { height: 13px; width: min(460px, 90%); } /* La mirilla es lo que ocupa la sección de entrada, así que el hueco tiene su alto exacto: cuando llega, encaja donde ya estaba en vez de empujarlo todo. */ .hueso--mirilla { height: min(62vh, 560px); } .hueso--nav { height: 40px; margin-bottom: 2px; } .hueso--fila { height: 74px; margin-bottom: 12px; } @media (prefers-reduced-motion: reduce) { .hueso { animation: none } } /* ---------- Archivos y espacio ---------- */ .espacio { margin-top: 22px; } .espacio__cifras { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .espacio__usado { font-family: var(--display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.02em; } .espacio__queda { font-size: 0.85rem; color: var(--gris); } .espacio__regla { margin-top: 10px; height: 2px; background: var(--linea); } .espacio__lleno { display: block; height: 100%; background: var(--acento); transition: width 0.3s; } /* Rojo SOLO cuando de verdad está lleno. Un medidor en rojo desde el 60% enseña a ignorar el rojo, y entonces cuando hace falta ya no dice nada. */ .espacio__lleno--casi { background: var(--acento); } .espacio__lleno--tope { background: var(--rojo); } .archivos { list-style: none; display: grid; } .archivo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--linea); } .archivo:first-child { border-top: 0; } .archivo__que { min-width: 0; } .archivo__nombre { display: block; font-size: 0.95rem; color: var(--hueso); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .archivo__nombre:hover { color: var(--acento); } .archivo__cuando { font-size: 0.8rem; color: var(--gris); margin-top: 3px; } .archivo__acciones { display: flex; gap: 8px; flex: none; } /* Dónde se ve el archivo. Es lo que convierte «foto-3.jpg, 2 MB» en algo sobre lo que se puede decidir: nadie sabe si puede borrar un archivo hasta que le dicen que está en su portada. */ .archivo__uso { font-size: 0.8rem; margin-top: 4px; color: var(--acento); } .archivo__uso--no { color: var(--gris); } /* Lo de las copias en gris: es un aviso para cuando vaya a borrar, no una alarma. Si fuera del color del acento competiría con «está en tu portada», que es lo que de verdad hay que leer primero. */ .archivo__uso--copias { color: var(--gris); font-size: 0.78rem; margin-top: 2px; } .espacio__copias { margin-top: 14px; } /* La barra de buscar y el botón de limpiar. */ .archivos__mando { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .archivos__buscar { flex: 1; min-width: 180px; background: var(--negro-2); border: 1px solid var(--linea-viva); color: var(--hueso); font: inherit; font-size: 0.92rem; padding: 10px 13px; outline: none; } .archivos__buscar:focus { border-color: var(--acento); } .archivos__buscar::placeholder { color: var(--apagado); } .archivos__mirando { font-size: 0.82rem; color: var(--gris); } @media (max-width: 560px) { .archivo { align-items: flex-start; } .archivo__acciones { width: 100%; margin-top: 10px; } .archivo__acciones .boton { flex: 1; justify-content: center; } } /* ---------- La bandeja: exportar y paginar ---------- */ .bandeja__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .bandeja__cabeza .ficha__titulo { margin-bottom: 0; } .patas { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); } .patas__cuantos { display: flex; align-items: center; gap: 0; } .patas__rotulo { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); margin-right: 10px; } .patas__n { background: none; border: 1px solid var(--linea); border-right: 0; color: var(--gris); font: inherit; font-size: 0.8rem; padding: 5px 10px; cursor: pointer; transition: color 0.15s, background 0.15s; } .patas__n:last-of-type { border-right: 1px solid var(--linea); } .patas__n:hover { color: var(--hueso); background: var(--negro-2); } .patas__n--este { color: var(--acento); background: var(--negro-2); } .patas__ir { display: flex; align-items: center; gap: 12px; } .patas__donde { font-family: var(--mono); font-size: 0.74rem; color: var(--gris); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .patas { flex-direction: column; align-items: stretch; gap: 14px; } .patas__ir { justify-content: space-between; } } /* ---------- Lo que te han escrito ---------- */ /* * Esto es una BANDEJA, no un listado. * * Antes cada envío era una ficha abierta con todos sus campos a la vista, y * los treinta últimos iban uno detrás de otro. Con dos clientes se leía bien; * con cincuenta, la página medía metros y para llegar al historial había que * pasar por encima de un mes de correo. Y encima mezclaba formularios: los * presupuestos revueltos con las suscripciones. * * Ahora: los formularios arriba para cambiar de uno a otro, y cada envío en * UNA línea. Se abre el que se quiere leer. Lo que crece es la lista, que es * lo que tiene que crecer; la pantalla se queda quieta. */ /* La tira de formularios. Se puede arrastrar de lado cuando no caben: en un móvil, cuatro formularios no entran en 360 px y partirlos en dos filas levanta la lista entera. */ .bandeja__tira { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .bandeja__tira::-webkit-scrollbar { display: none; } .bandeja__pestana { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linea); background: none; color: var(--gris); font: inherit; font-size: 0.88rem; padding: 9px 14px; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, color 0.15s; } .bandeja__pestana:hover { border-color: var(--linea-viva); color: var(--hueso); } .bandeja__pestana--esta { border-color: var(--acento); background: var(--negro-2); color: var(--hueso); } .bandeja__cuenta { background: var(--acento); color: #fff; font-family: var(--mono); font-size: 0.68rem; line-height: 1.5; padding: 0 5px; } .envios { list-style: none; display: grid; } .envios__nuevos { color: var(--acento); letter-spacing: 0; text-transform: none; font-family: var(--texto); } /* Filete arriba y nada más: cincuenta cajas con borde entero son cincuenta rectángulos, y lo que hay que ver es una lista. */ .envio { border-top: 1px solid var(--linea); } .envio:last-child { border-bottom: 1px solid var(--linea); } .envio--abierto { background: var(--negro-2); } /* La línea que se pulsa: quién, de qué va y cuándo. Es un botón porque se pulsa, y así funciona con el teclado sin tener que inventar nada. */ .envio__linea { width: 100%; display: flex; align-items: baseline; gap: 12px; background: none; border: 0; border-left: 2px solid transparent; color: var(--hueso); font: inherit; text-align: left; padding: 14px 16px 14px 14px; cursor: pointer; transition: background 0.12s; } .envio__linea:hover { background: var(--negro-2); } /* Sin leer: el filete de la izquierda en acento y el nombre en hueso vivo. */ .envio--nuevo .envio__linea { border-left-color: var(--acento); } /* Leido y sin leer se distinguen como en cualquier correo: lo nuevo en negrita y tinta viva (nombre y asunto), lo leido en peso normal. El filete solo no se veia (Jesus, 31/08: «¿como diferencias los leidos?»). */ .envio__quien { flex: none; max-width: 34%; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .envio__asunto strong { font-weight: 400; } .envio--nuevo .envio__quien, .envio--nuevo .envio__asunto strong { color: var(--hueso); font-weight: 600; } /* Y como Gmail: lo leido con el fondo un punto tintado, lo nuevo sobre el papel limpio; lo marcado con la casilla, con un velo del acento. */ .envio--leido .envio__linea { background: color-mix(in srgb, var(--negro-2) 55%, var(--negro)); } .envio .envio__linea:hover { background: var(--negro-2); } .envio--marcado .envio__linea, .envio--marcado .envio__linea:hover { background: color-mix(in srgb, var(--acento) 9%, var(--negro)); } .envio__asunto { flex: 1; min-width: 0; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; } .envio__de, .envio__clip { flex: none; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); border: 1px solid var(--linea); padding: 2px 7px; } .envio__cuando { flex: none; font-size: 0.8rem; color: var(--gris); } /* En un móvil no caben cinco cosas en una línea: se apilan las dos que importan y lo demás se va. La fecha se queda, que es media decisión. */ @media (max-width: 620px) { .envio__linea { flex-wrap: wrap; } .envio__quien { max-width: none; flex: 1; } .envio__asunto { flex-basis: 100%; order: 3; } .envio__de { display: none; } } .envio__cuerpo { padding: 0 16px 18px 16px; } .envio__pagina { margin-top: 12px; font-size: 0.82rem; color: var(--gris); } .envio__campos { display: grid; grid-template-columns: minmax(90px, 22%) 1fr; gap: 6px 18px; margin-top: 4px; } .envio__campos dt { font-size: 0.8rem; color: var(--gris); text-transform: lowercase; } .envio__campos dd { font-size: 0.94rem; white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 560px) { .envio__campos { grid-template-columns: 1fr; gap: 2px; } .envio__campos dd { margin-bottom: 10px; } } .envio__adjuntos { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .envio__adjunto { border: 1px solid var(--linea-viva); background: none; color: var(--hueso); font: inherit; font-size: 0.85rem; padding: 8px 12px; cursor: pointer; transition: border-color 0.15s; } .envio__adjunto:hover { border-color: var(--acento); } .envio__adjunto span { color: var(--gris); font-size: 0.78rem; margin-left: 6px; } .envio__adjunto[disabled] { opacity: 0.5; cursor: default; } /* Un envio hecho por el propio dueño probando su formulario desde el taller. Se enseña -si no, parece que su formulario no funciona- pero se distingue de un cliente escribiendo de verdad. */ .envio__prueba { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); border: 1px solid var(--linea); padding: 2px 7px; } /* Tu cuenta: menu a la izquierda, hoja a la derecha. En estrecho, el menu pasa arriba en fila, que una columna de tres botones a lo ancho es un muro. */ .cuenta__marco { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; } .cuenta__menu { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 20px; } .cuenta__pestana { text-align: left; background: none; border: 0; border-left: 2px solid var(--linea); color: var(--apagado); font: inherit; padding: 10px 14px; cursor: pointer; } .cuenta__pestana:hover { color: var(--texto); } .cuenta__pestana--esta { color: var(--texto); border-left-color: var(--acento); } @media (max-width: 720px) { .cuenta__marco { grid-template-columns: 1fr; } .cuenta__menu { flex-direction: row; position: static; } .cuenta__pestana { border-left: 0; border-bottom: 2px solid var(--linea); } .cuenta__pestana--esta { border-bottom-color: var(--acento); } } /* La navegacion de la cabecera: la misma en todo el panel. La pagina actual en hueso; el resto, en gris que se enciende al pasar. */ .cabecera__nav { display: flex; gap: 16px; margin-right: 4px; } .cabecera__nav a { color: var(--apagado); text-decoration: none; font-size: 0.9rem; } .cabecera__nav a:hover { color: var(--texto); } .cabecera__nav a.cabecera__aqui { color: var(--texto); } /* El muro ligero del panel: un parrafo y la puerta a /cuenta. */ .panel__muro { border: 1px solid var(--linea); padding: 40px 24px; text-align: center; } .panel__muro p { margin: 0 0 18px; color: var(--apagado); } .cabecera__yo .enlace { font-size: 0.9rem; } /* El velo de comprobando el pago: fondo de la casa, un texto y una barra fina que respira. Sin ruedas dentadas. */ .velo { position: fixed; inset: 0; background: rgba(10, 10, 11, 0.96); z-index: 40; display: grid; place-items: center; } .velo__caja { text-align: center; color: var(--apagado); } .velo__caja p { margin: 0 0 14px; } .velo__barra { width: 180px; height: 1px; background: var(--linea); margin: 0 auto; overflow: hidden; } .velo__barra span { display: block; width: 40%; height: 100%; background: var(--acento); animation: velo-va 1.2s ease-in-out infinite; } @keyframes velo-va { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* Elegir como empezar, dentro de crear cuenta. Botones-fila, el elegido con el filete del acento: mismo lenguaje que el resto de la casa. */ .entrada__pregunta { margin: 0 0 8px; font-size: 0.95rem; color: var(--apagado); } .entrada__plan { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; text-align: left; margin: 0 0 8px; padding: 12px 14px; background: none; border: 1px solid var(--linea); color: inherit; font: inherit; cursor: pointer; } .entrada__plan:hover { border-color: var(--apagado); } .entrada__plan--este { border-color: var(--acento); box-shadow: inset 2px 0 0 var(--acento); } .entrada__plan-precio { color: var(--apagado); font-size: 0.85rem; } /* El letrero de quien esta probando, arriba del panel. Un filete y el acento solo en el boton: es un aviso de la casa, no una alarma. */ .panel__prueba { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--linea); color: var(--apagado); font-size: 0.92rem; } /* Elegir plan, dentro de «Tu cuenta». Mismas reglas de la casa: sin sombras, sin esquinas redondeadas, filete de 1 px y un solo acento. */ .cuenta__accion { margin-top: 14px; } .cuenta__acciones { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; } .planes { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .plan-tarjeta { background: var(--fondo); padding: 18px 16px; } /* El que ya tiene, marcado por el filete y no por un fondo de color: el color se reserva para lo que se puede pulsar. */ .plan-tarjeta--suyo { box-shadow: inset 2px 0 0 var(--acento); } .plan-tarjeta__nombre { margin: 0 0 4px; font-size: 1rem; font-weight: 500; } .plan-tarjeta__precio { margin: 0 0 2px; font-size: 1.35rem; letter-spacing: -0.03em; } .plan-tarjeta__suyo { margin: 14px 0 0; font-size: 0.85rem; color: var(--acento); } .plan-tarjeta .boton { margin-top: 14px; width: 100%; } /* ================= El panel de dentro: /admin ================= */ /* * TODO LO DE AQUI VA CON SU PREFIJO, Y ESO COSTO UN SUSTO. * * La primera version uso `.marca`, `.cifra` y `.barra`, que son nombres * razonables y que YA EXISTIAN mas arriba: `.marca` es el logotipo de la * cabecera, `.cifra` son los numeros de las estadisticas y `.barra` las * paginas mas visitadas. Como esto se anade al final del fichero, gano lo * ultimo, y el resultado fue el logotipo de Taraceista dentro de un recuadro * en TODAS las pantallas del panel, no solo en esta. * * Una hoja de estilos sin modulos es un espacio de nombres compartido. Lo que * es de esta pantalla lleva `adm-`, `etiq` o `quien`, y lo que se toque sin * prefijo -`.campo`, `.boton`, `.hueso`, `.aviso`- es a proposito: son las * piezas de la casa, y esta pantalla las usa tal cual en vez de inventarse * unas parecidas. */ /* * Dos columnas fijas: la lista de gente a la izquierda y la ficha a la * derecha. Todo el trabajo que se hace aqui es «buscar a alguien y tocarle * algo», y perder de vista la lista en cada ficha se paga en cada vuelta. * * Las mismas reglas que el resto de la casa: sin sombras, sin esquinas * redondeadas, filetes de 1 px para separar y un solo acento. */ .admin { display: grid; min-height: calc(100dvh - 61px); } .admin__lista { border-right: 1px solid var(--linea); padding: 20px; } .admin__ficha { padding: 28px 24px 80px; min-width: 0; } /* En pantalla ancha cada columna scrolea por su lado: la lista baja y la ficha se queda, y al reves. Las pestañas y el buscador no se mueven. VA DETRAS de las reglas base: si no, el padding de la lista gana a este. */ @media (min-width: 940px) { .admin { grid-template-columns: 330px 1fr; height: calc(100dvh - 61px); min-height: 0; } .admin__lista, .admin__ficha { overflow-y: auto; } .admin__lista { padding: 0 20px 20px; } .admin__arriba { position: sticky; top: 0; z-index: 5; background: var(--negro); padding-top: 20px; padding-bottom: 12px; } .admin__ficha { padding: 32px 36px 90px; } } .admin__buscar { display: flex; gap: 8px; } .admin__buscar input { flex: 1; min-width: 0; background: var(--negro-2); border: 1px solid var(--linea); color: var(--hueso); font: inherit; font-size: 0.88rem; padding: 9px 12px; } .admin__buscar input:focus { border-color: var(--acento); outline: none; } .admin__buscar .boton { white-space: nowrap; padding: 9px 14px; font-size: 0.82rem; } .quienes { margin-top: 14px; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); } .quien { display: block; width: 100%; text-align: left; background: var(--negro); border: 0; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--hueso); } .quien:hover { background: var(--negro-2); } /* El que se esta mirando lleva un filete de acento a la izquierda, no un fondo de color: el fondo compite con la ficha de al lado. */ .quien--puesto { background: var(--negro-2); box-shadow: inset 2px 0 0 var(--acento); } .quien__correo { display: block; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quien__linea { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; } .quien__plan { font-size: 0.76rem; color: var(--gris); } .quien__cambios { display: block; font-size: 0.72rem; color: var(--gris); margin-top: 5px; } .etiq { font-size: 0.64rem; letter-spacing: 0.04em; padding: 1px 6px; border: 1px solid var(--linea-viva); color: var(--gris); } .etiq--parada { border-color: var(--rojo); color: var(--rojo); } /* La barra de consumo: se pone del color del acento cuando queda poco, que es el unico momento en el que hace falta que salte a la vista. */ .adm-barra { display: block; height: 2px; background: var(--linea); margin-top: 7px; } .adm-barra__lleno { display: block; height: 100%; background: var(--linea-viva); } .adm-barra__lleno--apretado { background: var(--acento); } .admin__cabeza { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .admin__ficha h1 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.03em; word-break: break-word; } .admin__ficha h2 { font-family: var(--display); font-size: 1.1rem; letter-spacing: -0.02em; margin: 30px 0 12px; } .admin__bloque h2 { margin-top: 0; } .admin__sub { color: var(--gris); font-size: 0.88rem; margin-top: 6px; } .admin__cifras { display: grid; gap: 1px; margin-top: 22px; background: var(--linea); border: 1px solid var(--linea); } @media (min-width: 620px) { .admin__cifras { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .admin__cifras { grid-template-columns: repeat(4, 1fr); } } .adm-cifra { background: var(--negro); padding: 16px 18px; } .adm-cifra__num { font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .adm-cifra__que { font-size: 0.82rem; margin-top: 3px; } .adm-cifra__pie { font-size: 0.72rem; color: var(--gris); margin-top: 3px; } .admin__bloque { margin-top: 34px; border-top: 1px solid var(--linea); padding-top: 22px; } .admin__fila { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 4px; } .admin__fila--separada { margin-top: 18px; align-items: flex-start; flex-direction: column; gap: 8px; } .admin__fila .campo { margin-top: 0; flex: 1; min-width: 190px; } .admin__fila .campo--corto { flex: 0 0 120px; min-width: 120px; } .admin__fila .boton { padding: 10px 16px; font-size: 0.85rem; } .campo select, .campo input[type="number"], .campo input[type="search"] { width: 100%; background: var(--negro-2); border: 1px solid var(--linea); color: var(--hueso); font: inherit; font-size: 0.88rem; padding: 9px 12px; } .campo select:focus, .campo input:focus { border-color: var(--acento); outline: none; } .adm-tabla-caja { overflow-x: auto; margin-top: 14px; border: 1px solid var(--linea); } .admin__tabla { width: 100%; border-collapse: collapse; min-width: 520px; } .admin__tabla th, .admin__tabla td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--linea); font-size: 0.84rem; } .admin__tabla th { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); font-weight: 400; background: var(--negro-2); } /* El traslado de una web: la fila se vuelve el formulario. */ .adm-traslado-celda { white-space: nowrap; } .adm-traslado { display: flex; gap: 8px; align-items: center; } .adm-traslado input { width: 190px; background: var(--negro-2); border: 1px solid var(--linea); color: var(--hueso); font: inherit; font-size: 0.84rem; padding: 7px 10px; } .adm-traslado .boton { padding: 7px 12px; font-size: 0.84rem; } .admin__tabla tr:last-child td { border-bottom: 0; } .admin__tabla .n { text-align: right; font-variant-numeric: tabular-nums; } .admin__suma td { border-top: 1px solid var(--linea-viva); font-weight: 500; } .admin__gastado { color: var(--gris); } .admin__gastado td { color: var(--gris); } .admin__fallido td:first-child { box-shadow: inset 2px 0 0 var(--rojo); } .admin__peticion { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin__nota { color: var(--gris); font-size: 0.86rem; margin-top: 10px; max-width: 64ch; } .admin__nota strong { color: var(--hueso); } .admin__nota--fina { font-size: 0.8rem; } .admin__vacio { color: var(--gris); font-size: 0.86rem; padding: 14px 0; } /* La casilla de una funcion. El cuadrito y la palabra van dentro del mismo