se estiraba con
ella. Con «start» cada uno mide lo suyo. */
.ad-seguir__caja { align-items: start; }
/* Con JavaScript, la barra de progreso ya dice en qué paso estamos, así
que el título del
repetiría lo mismo dos veces. Se esconde
de la vista pero NO del lector de pantalla: quien no ve la barra
necesita oír «paso 1 de 3». Y sin JavaScript se queda visible, que
entonces sí es la única pista. */
.ad-js .ad-form--pasos > fieldset {
padding: 0;
border: 0;
}
.ad-js .ad-form--pasos > fieldset > legend {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* El grupo de casillas de dentro sí conserva su marco: ahí el título
(«Marca lo que corresponda») está haciendo falta. */
.ad-js .ad-form--pasos fieldset.ad-marcas {
padding: 1rem 1.2rem;
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
}
.ad-js .ad-form--pasos fieldset.ad-marcas > legend {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip-path: none;
padding-inline: .4rem;
}
/* ===================================================================
EL TABLÓN CON LOS FILTROS A LA IZQUIERDA
-------------------------------------------------------------------
Dos columnas: los filtros a la izquierda, los animales a la derecha.
En el móvil se apilan y el panel arranca cerrado, porque lo primero
que tiene que ver quien entra son animales, no un formulario.
=================================================================== */
.ad-tablon {
display: grid;
grid-template-columns: 17.5rem minmax(0, 1fr);
gap: clamp(1.2rem, .6rem + 2vw, 2.5rem);
align-items: start;
margin-block-start: var(--sec);
}
/* La columna se queda pegada al hacer scroll: con veinte animales por
página, tener que subir hasta arriba para cambiar un filtro es de las
cosas que hacen que la gente se rinda y se vaya. */
.ad-lado { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.ad-filtros {
display: grid;
gap: .8rem;
padding: 1rem;
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
}
/* El botón que despliega. Ancho entero, con la cuenta de filtros
puestos a la derecha: estando cerrado hay que poder saber que algo
está apretando, si no la gente cree que el tablón está vacío. */
.ad-filtros__abrir {
display: flex;
gap: .6rem;
align-items: center;
width: 100%;
padding: .7rem .85rem;
font: inherit;
font-weight: 600;
color: var(--teal);
background: var(--blanco);
border: 1px solid var(--linea-osc);
border-radius: var(--r);
cursor: pointer;
transition: border-color var(--rapido), background-color var(--rapido);
}
.ad-filtros__abrir:hover { border-color: var(--turq-osc); }
.ad-filtros__abrir svg { width: 1.15rem; height: 1.15rem; flex: none; }
.ad-filtros__abrir > span:nth-of-type(1) { margin-inline-end: auto; }
.ad-filtros__cuantos {
display: grid;
place-items: center;
min-width: 1.4rem;
height: 1.4rem;
padding-inline: .35rem;
font-size: .75rem;
font-weight: 700;
color: var(--blanco);
background: var(--teal);
border-radius: var(--pastilla);
}
.ad-filtros__flecha { display: grid; place-items: center; transition: rotate var(--rapido); }
.ad-filtros__flecha svg { width: 1rem; height: 1rem; }
.ad-filtros__abrir.es-abierto .ad-filtros__flecha { rotate: 180deg; }
.ad-filtros__panel { display: grid; gap: .9rem; }
.ad-grupo {
display: grid;
gap: .5rem;
padding: 0 0 .9rem;
margin: 0;
border: 0;
border-block-end: 1px solid var(--linea-osc);
}
.ad-grupo:last-of-type { border-block-end: 0; padding-block-end: 0; }
.ad-grupo legend {
padding: 0;
margin-block-end: .15rem;
font-size: .75rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--turq-osc);
}
/* Los desplegables del panel: uno debajo de otro y a todo el ancho, que
es lo que se puede tocar bien con el pulgar. */
.ad-filtros select {
width: 100%;
padding: .7rem 2rem .7rem .8rem;
font: inherit;
color: var(--tinta);
background: var(--blanco);
border: 1px solid var(--linea-osc);
border-radius: var(--r);
cursor: pointer;
}
.ad-filtros .ad-interruptor { width: 100%; }
.ad-filtros__pie { display: grid; gap: .6rem; }
.ad-filtros__pie .ad-btn { justify-content: center; }
.ad-filtros__limpiar {
font-size: .8125rem;
font-weight: 600;
color: var(--turq-osc);
text-decoration: underline;
text-align: center;
}
/* La nota de «publica tú uno», debajo de los filtros. */
.ad-lado__nota {
padding: 1.1rem;
background: var(--menta);
border-radius: var(--r-lg);
}
.ad-lado__nota h2 { font-size: 1rem; margin-block-end: .3rem; }
.ad-lado__nota p { font-size: .8125rem; color: var(--tinta70); margin-block-end: .9rem; }
.ad-lado__nota .ad-btn { width: 100%; justify-content: center; text-align: center; }
/* Mientras llega la respuesta del servidor, la lista se apaga un poco.
No es decoración: sin nada, tocar un filtro parece que no ha hecho
nada y la gente vuelve a tocarlo. */
.ad-resultados.es-cargando { opacity: .45; transition: opacity .12s linear; }
.ad-resultados { margin-block-start: 0; scroll-margin-top: 1rem; }
.ad-resultados:focus { outline: none; }
.ad-resultados .ad-rejilla { margin-block-start: 1.2rem; }
/* La cuenta de fotos en la esquina de la tarjeta. */
.ad-tarjeta__fotos {
position: absolute;
right: .6rem;
bottom: .6rem;
display: inline-flex;
gap: .3rem;
align-items: center;
padding: .2rem .5rem;
font-size: .75rem;
font-weight: 700;
color: var(--blanco);
background: rgba(18, 41, 41, .72);
border-radius: var(--r);
}
.ad-tarjeta__fotos svg { width: .9rem; height: .9rem; }
@media (max-width: 62rem) {
.ad-tablon { grid-template-columns: minmax(0, 1fr); }
.ad-lado { position: static; }
.ad-lado__nota { display: none; } /* abajo del todo ya está la misma llamada */
}
/* ===================================================================
MÁS CONTRASTE
-------------------------------------------------------------------
El turquesa claro sobre blanco casi no se veía, y a la vez había
secciones enteras de amarillo fuerte que cansan la vista. La regla
aquí es sencilla: los colores fuertes, en trozos pequeños (sellos,
botones); los fondos grandes, suaves; y el texto, oscuro siempre.
=================================================================== */
.ad-portada p,
.ad-tarjeta__datos,
.ad-tarjeta__donde,
.ad-portada__pasos { color: var(--tinta70); }
.ad-cuenta { font-weight: 600; }
.ad-cuenta b { color: var(--teal); }
/* El amarillo a saco quemaba. Se queda para sellos y botones —que son
pequeños— y los fondos grandes pasan al amarillo claro con texto
oscuro, que se lee sin castigar. */
.ad-estado--fiesta { color: #5B4B00; background: var(--limon-cl); border: 1px solid var(--limon-linea); }
.ad-estado--espera { color: #5B4B00; background: var(--limon-cl); border: 1px solid var(--limon-linea); }
.ad-consejo { color: #4A3D00; border: 1px solid var(--limon-linea); }
.ad-puesto { color: var(--teal); border: 1px solid var(--salvia); }
.ad-puesto span { color: var(--teal); }
.ad-puesto--todo { color: var(--tinta70); border-color: transparent; }
/* El foco: se ve, pero sin el marco gordo de siempre. Es la misma idea
que en la tienda. */
.ad-btn:focus-visible,
.ad-filtros__abrir:focus-visible,
.ad-filtros select:focus-visible,
.ad-buscar input:focus-visible,
.ad-peticion summary:focus-visible {
outline: 2px solid var(--turq-osc);
outline-offset: 2px;
}
.ad-filtros select:focus,
.ad-buscar input:focus,
.ad-campo textarea:focus,
.ad-campo input:focus {
border-color: var(--turq-osc);
outline: none;
}
/* ===================================================================
PEDIR EN VEZ DE CAMBIAR
-------------------------------------------------------------------
Quien publicó no cambia el estado de su ficha: nos lo pide y lo
miramos. Cada petición es un desplegable con su motivo y sus fotos.
=================================================================== */
.ad-seguir__intro { max-width: 62ch; margin-block-end: 1.1rem; color: var(--tinta70); }
.ad-peticiones { display: grid; gap: .8rem; }
.ad-peticion {
background: var(--blanco);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
overflow: hidden;
}
.ad-peticion[open] { border-color: var(--turq-osc); }
.ad-peticion summary {
display: flex;
flex-direction: column;
gap: .2rem;
padding: 1rem 1.2rem;
cursor: pointer;
list-style: none;
}
.ad-peticion summary::-webkit-details-marker { display: none; }
.ad-peticion summary::after {
content: 'Contárnoslo →';
align-self: start;
margin-block-start: .4rem;
font-size: .8125rem;
font-weight: 700;
color: var(--turq-osc);
}
.ad-peticion[open] summary::after { content: 'Cerrar'; }
.ad-peticion summary b { font-size: 1.0625rem; }
.ad-peticion summary small { font-size: .875rem; color: var(--tinta70); }
.ad-peticion__form {
display: grid;
gap: .9rem;
padding: 0 1.2rem 1.2rem;
border-block-start: 1px solid var(--linea);
padding-block-start: 1.1rem;
}
.ad-peticion__form .ad-btn { justify-self: start; }
.ad-aviso--espera { color: #5B4B00; background: var(--limon-cl); border: 1px solid var(--limon-linea); }
/* El historial de lo pedido. */
.ad-historial { margin-block-start: 1.6rem; }
.ad-historial h3 { font-size: 1rem; margin-block-end: .6rem; }
.ad-historial ul { display: grid; gap: .4rem; }
.ad-historial li {
display: flex;
flex-wrap: wrap;
gap: .3rem .8rem;
align-items: baseline;
padding: .6rem .8rem;
font-size: .875rem;
background: var(--crema-cl);
border-inline-start: 3px solid var(--linea-osc);
border-radius: 0 var(--r) var(--r) 0;
}
.ad-historial li.es-aceptada { border-inline-start-color: var(--turq-osc); }
.ad-historial li.es-pendiente { border-inline-start-color: var(--limon); }
.ad-historial li.es-rechazada { border-inline-start-color: var(--error); }
.ad-historial__que { font-weight: 600; margin-inline-end: auto; }
.ad-historial__cuando { color: var(--tinta50); font-size: .8125rem; }
.ad-historial__estado { font-size: .8125rem; font-weight: 600; color: var(--tinta70); }
/* ===================================================================
FOTOS SIN TOPE
=================================================================== */
/* El marco de la foto grande, para colgarle la cuenta «3 / 9». */
.ad-ficha__marco { position: relative; }
.ad-ficha__cuenta {
position: absolute;
right: .8rem;
bottom: .8rem;
padding: .25rem .65rem;
font-size: .8125rem;
font-weight: 700;
color: var(--blanco);
background: rgba(18, 41, 41, .72);
border-radius: var(--r);
}
/* Con muchas fotos, las miniaturas se van en una tira que se desliza en
vez de partirse en cuatro filas y empujar la ficha hacia abajo. */
.ad-ficha__miniaturas {
flex-wrap: nowrap;
overflow-x: auto;
padding-block-end: .3rem;
scrollbar-width: thin;
scroll-snap-type: x proximity;
}
.ad-ficha__miniaturas .ad-mini { flex: 0 0 auto; scroll-snap-align: start; }
.ad-seguir__foto { position: relative; }
.ad-seguir__cuantas {
position: absolute;
right: .5rem;
bottom: .5rem;
padding: .15rem .5rem;
font-size: .75rem;
font-weight: 700;
color: var(--blanco);
background: rgba(18, 41, 41, .72);
border-radius: var(--r);
}
/* Aire alrededor del truco de las fotos: estaba pegado al bloque de
arriba y al de abajo, y con tres cosas seguidas sin respirar no se
lee ninguna. */
.ad-consejo { margin-block: 1.8rem 1.6rem; padding: 1.2rem 1.3rem; }
/* ===================================================================
MÓVIL
-------------------------------------------------------------------
Repaso entero, que es por donde entra la mayoría.
=================================================================== */
@media (max-width: 48rem) {
/* Nada se sale a lo ancho: es el fallo que más se ve en un móvil y el
que más cuesta encontrar. */
html, body { overflow-x: hidden; }
.ad-cabecera__caja { gap: .6rem; }
.ad-nav { width: 100%; flex-wrap: wrap; gap: .5rem .9rem; font-size: .875rem; }
.ad-nav .ad-btn { width: 100%; justify-content: center; padding-block: .8rem; }
.ad-portada__pasos { flex-wrap: wrap; gap: .4rem .9rem; }
.ad-rejilla { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
.ad-tarjeta__ver { font-size: .8125rem; }
.ad-ficha { grid-template-columns: minmax(0, 1fr); }
.ad-mini img { width: 4rem; height: 4rem; }
.ad-peticion summary { padding: .9rem 1rem; }
.ad-peticion__form { padding-inline: 1rem; }
.ad-peticion__form .ad-btn { justify-self: stretch; text-align: center; }
/* Los dedos no son ratones: nada por debajo de 44px de alto. */
.ad-btn { padding-block: .8rem; }
.ad-filtros select,
.ad-buscar input,
.ad-campo input,
.ad-campo select,
.ad-campo textarea { font-size: 1rem; } /* menos de 16px = iOS hace zoom solo */
.ad-historial li { flex-direction: column; gap: .15rem; }
.ad-historial__que { margin-inline-end: 0; }
}
/* Los pasos de arriba no son pastillas: son etapas. Con la esquina suave
se parecen a los del resto de la tienda y dejan de competir con los
botones de verdad. */
.ad-progreso li { border-radius: var(--r); }
/* Las líneas de ayuda a lo ancho de la pantalla no se leen: el ojo pierde
el renglón. Se cortan donde se corta un párrafo normal. */
.ad-form__ayuda { max-width: 68ch; }
/* ===================================================================
TODO EN 3:4
-------------------------------------------------------------------
Las fotos se recortan a 3:4 al subirlas (inc/comun.php), así que
aquí basta con reservarles ese hueco. La ganancia es que ninguna
tarjeta baila de altura y se pueden comparar de un vistazo, que es
lo que hace la gente cuando mira animales.
=================================================================== */
.ad-tarjeta__foto { aspect-ratio: 3 / 4; }
.ad-ficha__grande { aspect-ratio: 3 / 4; }
.ad-mini img { width: 4.5rem; height: 6rem; }
.ad-mini-foto img { aspect-ratio: 3 / 4; object-fit: cover; }
.ad-seguir__foto img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); }
/* --- El carrusel de la ficha ------------------------------------- */
.ad-galeria { position: relative; }
/* La tira: se desliza sola, sin JavaScript. En el móvil se pasa con el
dedo igual que cualquier otra cosa. */
.ad-galeria__pista {
display: flex;
gap: .6rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
border-radius: var(--r-xl);
}
.ad-galeria__pista::-webkit-scrollbar { display: none; }
.ad-galeria__pista:focus-visible { outline: 2px solid var(--turq-osc); outline-offset: 3px; }
.ad-galeria__foto {
flex: 0 0 100%;
margin: 0;
scroll-snap-align: center;
}
.ad-galeria__foto img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
background: var(--crema);
border-radius: var(--r-xl);
}
.ad-galeria__flecha {
position: absolute;
top: 50%;
translate: 0 -50%;
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
padding: 0;
color: var(--teal);
background: rgba(255, 255, 255, .92);
border: 1px solid var(--linea-osc);
border-radius: var(--r);
cursor: pointer;
box-shadow: var(--sombra);
transition: background-color var(--rapido);
}
.ad-galeria__flecha:hover { background: var(--blanco); border-color: var(--turq-osc); }
.ad-galeria__flecha svg { width: 1.2rem; height: 1.2rem; }
.ad-galeria__flecha--antes { left: .7rem; }
.ad-galeria__flecha--luego { right: .7rem; }
.ad-galeria__cuenta {
position: absolute;
right: .8rem;
bottom: .8rem;
padding: .25rem .65rem;
font-size: .8125rem;
font-weight: 700;
color: var(--blanco);
background: rgba(18, 41, 41, .72);
border-radius: var(--r);
}
@media (max-width: 48rem) {
/* En el móvil las flechas sobran: se pasa con el dedo y encima tapan
foto. El contador se queda, que ese sí dice algo. */
.ad-galeria__flecha { display: none; }
.ad-mini img { width: 3.6rem; height: 4.8rem; }
}
/* ===================================================================
LOS ENLACES A UN SITIO DE LA MISMA PÁGINA, SUAVES
-------------------------------------------------------------------
«Me interesa Trufa» lleva al formulario de más abajo. Con el salto
seco del navegador, quien lo pulsa aparece de golpe en otro sitio y
pierde el hilo: mira arriba, busca el nombre y a veces vuelve atrás
creyendo que se ha equivocado. Bajando con animación se ve QUE SE
BAJA, y eso es todo lo que hace falta para no perderse.
Va aquí y no en el JavaScript porque es una línea de CSS y funciona
para todos los enlaces de la página, los de hoy y los de mañana.
El scroll-padding deja un dedo de aire por encima del destino: sin
él, el título al que se salta queda pegadísimo al borde y parece
cortado.
=================================================================== */
html {
scroll-behavior: smooth;
scroll-padding-top: 1.5rem;
}
/* A quien haya pedido en su sistema que no le muevan cosas, no se le
mueve nada. Es una preferencia de accesibilidad, no un capricho:
hay gente a la que el desplazamiento animado le marea de verdad. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Al llegar, el destino se resalta un momento. Sin esto, en una página
larga uno no sabe si ha llegado al sitio bueno. */
:target {
animation: ad-llegada 1.4s ease-out 1;
}
@keyframes ad-llegada {
0% { box-shadow: 0 0 0 3px var(--teal), 0 0 0 12px rgba(43, 217, 222, .18); }
100% { box-shadow: 0 0 0 3px transparent, 0 0 0 12px transparent; }
}
@media (prefers-reduced-motion: reduce) {
:target { animation: none; }
}
/* ===================================================================
CON LOS FILTROS PLEGADOS, LA COLUMNA SOBRA
-------------------------------------------------------------------
Si el panel arranca cerrado y la columna izquierda se queda ahí
reservada, lo que se ve es medio metro de vacío al lado de los
animales. Así que mientras está plegado, la barra se coloca arriba
—buscador y botón, en una línea— y la lista se lleva todo el ancho.
Al desplegar, vuelve a su columna.
Se hace con :has(), que es CSS del bueno y no hace falta tocar el
JavaScript. Si un navegador viejo no lo entiende, se queda con la
columna de siempre: se ve algo más vacío y funciona igual.
=================================================================== */
.ad-tablon:has(#ad-panel-filtros[hidden]) {
grid-template-columns: minmax(0, 1fr);
}
.ad-tablon:has(#ad-panel-filtros[hidden]) .ad-lado {
position: static;
}
.ad-tablon:has(#ad-panel-filtros[hidden]) .ad-filtros {
display: flex;
flex-wrap: wrap;
gap: .7rem;
align-items: center;
}
.ad-tablon:has(#ad-panel-filtros[hidden]) .ad-buscar { flex: 1 1 20rem; }
.ad-tablon:has(#ad-panel-filtros[hidden]) .ad-filtros__abrir { width: auto; }
/* La llamada a publicar se queda para la de abajo del todo: aquí
arriba, en horizontal, no pinta nada. */
.ad-tablon:has(#ad-panel-filtros[hidden]) .ad-lado__nota { display: none; }
/* El recuadro de «no soy un robot», cuando está puesto. Va suelto encima
del botón de enviar, con su aire: metido entre dos campos parece un
error de maquetación. */
.ad-robot { margin-block: 1rem; }
/* ===================================================================
EL CALCO DEL MOCKUP · más grande, más suave, un solo color fuerte
-------------------------------------------------------------------
Esto no es un cambio de color, es un cambio de tono. Lo que se buscó
al hacer el mockup y lo que se copia aquí:
1 · LETRA Y BOTONES MÁS GRANDES. El tablón lo mira una señora de
sesenta años en el móvil y con sol, y una protectora con prisa.
16px de base y botones que se pulsan con el pulgar sin apuntar.
2 · UN SOLO COLOR FUERTE. El teal de la tienda significa siempre
«pulsa aquí». Antes competían el amarillo (botones), el turquesa
(enlaces) y el rojo (sellos): con tres colores gritando, ninguno
dice nada. El amarillo se queda para celebrar —el sello de «ya
tiene casa»— y para los números de los pasos.
3 · MÁS AIRE Y ESQUINAS MÁS SUAVES, y sombra en vez de borde grueso.
Que no parezca un panel de administración.
=================================================================== */
body {
font-size: 1rem;
line-height: 1.62;
background: var(--fondo);
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; }
/* --- Botones ------------------------------------------------------ */
.ad-btn {
padding: .85rem 1.4rem;
font-size: 1rem;
font-weight: 700;
border-width: 2px;
border-radius: .8rem;
justify-content: center;
}
/* EL BOTÓN PRINCIPAL VUELVE AL AMARILLO, Y AHORA SÍ FUNCIONA.
Se pasó al teal con letra blanca porque el amarillo de entonces
—#FFD100, saturado al máximo— se peleaba con el sello y con las
etiquetas por la atención: había tres cosas amarillas gritando a la
vez y ninguna ganaba.
Con la mantequilla (#FFE07E) eso ya no pasa: es más claro, así que
los sellos pequeños siguen destacando por encima, y el botón se
distingue por tamaño y por relieve, no por saturación. La tinta
encima da 11,8:1 —más que el blanco sobre teal, que eran 4,9— y
ahora un botón del tablón y uno de la tienda son la misma cosa. */
.ad-btn--limon,
.ad-btn--teal {
color: var(--tinta);
background: var(--limon);
box-shadow: 0 4px 0 #BDA65D;
}
.ad-btn--limon:hover,
.ad-btn--teal:hover { background: #FFECAF; box-shadow: 0 6px 0 #BDA65D; }
.ad-btn--linea { color: var(--tinta); background: var(--tarjeta); border-color: var(--linea-osc); }
.ad-btn--linea:hover { color: var(--teal); border-color: var(--teal); }
.ad-btn--grande { padding: 1rem 1.9rem; font-size: 1.05rem; }
/* --- EL SEGURO DE LOS BOTONES -------------------------------------
Un botón se pinta con su clase y con nadie más.
Ya van tres veces que una regla ancha del tipo «.loquesea a { color: … }»
se lleva por delante el color de un botón que estaba dentro de ese
bloque. La última dejó el botón de «Por los que has preguntado» con
letra teal sobre fondo teal: verde oscuro sobre verde oscuro, ilegible.
Y es un fallo que no canta al escribirlo. Las dos reglas están a mil
líneas de distancia, las dos parecen correctas por separado, y gana la
del bloque solo porque un selector de descendencia —«.ad-preguntas a»,
que pesa (0,1,1)— pesa más que una clase suelta —«.ad-btn--teal»,
(0,1,0)—. Eso no se ve leyendo el código.
En vez de perseguir cada regla ancha, se cierra por abajo: aquí se
repite el color de cada botón con DOS clases, que pesa (0,2,0), y con eso
ninguna regla de bloque puede repintarlos.
DÓNDE VA ESTO IMPORTA, y no es al final del archivo.
Más abajo hay sitios donde el botón cambia de color A PROPÓSITO: el
amarillo sobre la franja teal del pie, o el de dentro del aviso oscuro.
Esos también pesan (0,2,0), así que con el mismo peso gana el último —y
tienen que ganar ellos—. Por eso el seguro va aquí arriba, pegado a la
definición de los botones: por encima de los accidentes, por debajo de
lo que se cambió queriendo. */
.ad-btn.ad-btn--teal,
.ad-btn.ad-btn--limon { color: var(--tinta); }
.ad-btn.ad-btn--linea { color: var(--tinta); }
.ad-btn.ad-btn--linea:hover { color: var(--teal); }
/* --- Cabecera y portada ------------------------------------------- */
.ad-cabecera { background: var(--tarjeta); border-block-end: 1px solid var(--linea); }
.ad-cabecera__caja { padding-block: 1rem; }
.ad-nav { font-size: .95rem; }
.ad-nav a:not(.ad-btn) { color: var(--tinta50); font-weight: 600; }
.ad-nav a.es-activo { color: var(--tinta); }
/* La portada, centrada y con el titular contando cuántos hay: es el
dato que hace que alguien se quede, mucho más que un lema. */
.ad-portada {
text-align: center;
background:
radial-gradient(700px 300px at 50% -10%, var(--menta), transparent 70%),
var(--crema-cl);
border-block-end: 1px solid var(--linea);
}
.ad-portada h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); }
.ad-portada p { max-width: 48ch; margin-inline: auto; font-size: 1.05rem; color: var(--tinta50); }
.ad-portada .ad-ojo { justify-content: center; }
.ad-portada__pasos { justify-content: center; gap: 1.6rem; font-size: .95rem; }
.ad-portada__pasos b { width: 1.7rem; height: 1.7rem; font-size: .8rem; color: var(--sobre-claro); }
/* --- Los atajos, encima de la lista -------------------------------- */
/* La mayoría de la gente no abre un panel de filtros en su vida. Toca
«Gatos» y ya está. Los filtros siguen ahí para quien afina. */
.ad-atajos {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-block: 0 1.2rem;
}
.ad-atajos a {
padding: .5rem 1rem;
font-size: .95rem;
font-weight: 600;
color: var(--tinta);
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--pastilla);
transition: all var(--rapido);
}
.ad-atajos a:hover { border-color: var(--teal); color: var(--teal); }
.ad-atajos a.es-activo { color: var(--blanco); background: var(--teal); border-color: var(--teal); }
@media (max-width: 48rem) {
/* En el móvil, en una tira que se desliza: parten la pantalla si no. */
.ad-atajos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ad-atajos::-webkit-scrollbar { display: none; }
.ad-atajos a { white-space: nowrap; }
}
/* --- Buscar y filtros --------------------------------------------- */
.ad-buscar input,
.ad-filtros select,
.ad-filtros__abrir,
.ad-campo input,
.ad-campo select,
.ad-campo textarea {
padding: .85rem 1rem;
background: var(--tarjeta);
border: 2px solid var(--linea-osc);
border-radius: .8rem;
}
.ad-buscar input { padding-inline-start: 2.8rem; }
.ad-buscar__lupa svg { width: 1.2rem; height: 1.2rem; }
.ad-filtros { background: var(--tarjeta); border: 1px solid var(--linea); }
.ad-filtros__abrir { font-weight: 700; color: var(--tinta); }
.ad-filtros__cuantos { color: var(--blanco); background: var(--teal); }
.ad-interruptor { border: 2px solid var(--linea-osc); border-radius: .8rem; padding: .7rem .85rem; }
.ad-interruptor:has(input:checked) { color: var(--blanco); background: var(--teal); border-color: var(--teal); }
.ad-grupo legend { color: var(--teal); }
/* --- Tarjetas ------------------------------------------------------ */
.ad-tarjeta {
background: var(--tarjeta);
border: 1px solid var(--linea);
border-radius: 1.1rem;
box-shadow: var(--sombra);
}
.ad-tarjeta:hover { transform: translateY(-4px); border-color: var(--linea-osc); }
.ad-tarjeta__foto { border-radius: 1.1rem 1.1rem 0 0; background: var(--crema-cl); }
.ad-tarjeta__cuerpo { padding: .85rem .95rem 1.1rem; }
.ad-tarjeta h2 { font-size: 1.2rem; }
.ad-tarjeta__datos, .ad-tarjeta__donde { color: var(--tinta50); }
.ad-tarjeta__ver { color: var(--teal); font-weight: 700; }
.ad-tarjeta__sinfoto, .ad-ficha__sinfoto, .ad-seguir__sinfoto, .ad-vacio__ico { color: var(--linea-osc); }
/* Los sellos: el de prisa con el color de la marca, el de casa con el
amarillo de celebrar. Y con sombrita, que van sobre una foto y hay
fotos muy claras. */
.ad-sello {
padding: .3rem .75rem;
font-size: .78rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.ad-sello--urgente { color: var(--blanco); background: var(--teal); }
.ad-sello--casa { color: var(--sobre-claro); background: var(--limon); }
/* --- Ficha del animal ---------------------------------------------- */
.ad-ficha__texto h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); }
.ad-datos li { padding-block: .6rem; border-block-end: 1px solid var(--linea); }
.ad-etiqueta { color: var(--acento); background: var(--menta); font-size: .88rem; padding: .3rem .8rem; }
.ad-galeria__foto img, .ad-ficha__grande { border-radius: 1.1rem; }
.ad-galeria__flecha { color: var(--tinta); background: rgba(255, 255, 255, .94); border-color: var(--linea-osc); box-shadow: var(--sombra); }
.ad-galeria__flecha:hover { background: var(--blanco); border-color: var(--teal); color: var(--teal); }
.ad-mini.es-activa { border-color: var(--teal); }
/* Quién lo publica, en su cajita: es lo que la gente pregunta siempre y
suelto en una línea de texto gris no lo lee nadie. */
.ad-quien {
display: flex;
gap: .7rem;
align-items: center;
margin-top: 1.2rem;
padding: .8rem 1rem;
font-size: .92rem;
color: var(--tinta70);
background: var(--crema-cl);
border-radius: .8rem;
}
/* --- Formularios ---------------------------------------------------- */
.ad-campo > span { font-weight: 700; font-size: .95rem; }
.ad-campo em { color: var(--teal); font-style: normal; }
.ad-marca { border: 2px solid var(--linea); border-radius: .8rem; padding: .8rem 1rem; }
.ad-marca:has(input:checked) { border-color: var(--teal); }
.ad-marca input, .ad-interruptor input { accent-color: var(--teal); }
.ad-soltar__caja { background: var(--crema-cl); border: 2px dashed var(--linea-osc); border-radius: 1.1rem; }
.ad-soltar__ico { color: var(--teal); }
.ad-consejo { color: var(--tinta70); background: var(--limon-cl); border: 1px solid var(--limon-linea); }
.ad-consejo b { color: var(--tinta); }
.ad-progreso li { border: 2px solid var(--linea); border-radius: .8rem; font-weight: 700; }
.ad-progreso li.es-ahora { color: var(--blanco); background: var(--teal); border-color: var(--teal); }
.ad-progreso li.es-ahora span { color: var(--sobre-claro); background: var(--limon); border-color: var(--limon); }
.ad-progreso li.es-hecho { color: var(--teal); background: var(--tarjeta); border-color: var(--teal); }
.ad-progreso li.es-hecho span { color: var(--blanco); background: var(--teal); border-color: var(--teal); }
/* --- Avisos y estados ----------------------------------------------- */
.ad-aviso--bien { color: var(--teal); background: var(--crema-cl); border: 1px solid var(--linea-osc); }
.ad-aviso--mal { color: var(--error); background: var(--error-fondo); border: 1px solid var(--salvia); }
.ad-aviso--espera { color: var(--tinta70); background: var(--limon-cl); border: 1px solid var(--limon-linea); }
.ad-estado--bien { color: var(--teal); background: var(--crema-cl); }
.ad-estado--espera { color: var(--tinta70); background: var(--limon-cl); border: 1px solid var(--limon-linea); }
.ad-estado--fiesta { color: var(--tinta70); background: var(--limon-cl); border: 1px solid var(--limon-linea); }
.ad-estado--parado { color: var(--error); background: var(--error-fondo); }
.ad-camino li.es-hecho { border-block-start-color: var(--teal); }
.ad-camino li.es-hecho::before { background: var(--teal); }
.ad-camino li.es-ahora::before { background: var(--limon); box-shadow: 0 0 0 5px rgba(255, 224, 126, .5); }
.ad-peticion { background: var(--tarjeta); border: 2px solid var(--linea); border-radius: 1rem; }
.ad-peticion[open] { border-color: var(--teal); }
.ad-peticion summary::after { color: var(--teal); }
.ad-peticion summary small { color: var(--tinta50); }
.ad-historial li { background: var(--crema-cl); }
.ad-historial li.es-aceptada { border-inline-start-color: var(--teal); }
.ad-puesto { color: var(--teal); background: var(--crema-cl); border: 1px solid var(--linea-osc); }
.ad-puesto:hover { background: var(--crema); }
.ad-puesto span { color: var(--teal); }
.ad-cuenta { font-size: 1.1rem; }
.ad-cuenta b { color: var(--teal); }
/* --- Llamada, lado y pie -------------------------------------------- */
.ad-llamada { background: var(--crema-cl); border: 1px solid var(--linea-osc); border-radius: 1.2rem; }
.ad-llamada h2 { font-size: 1.25rem; }
.ad-llamada p { color: var(--tinta50); }
.ad-lado__nota { background: var(--crema-cl); border: 1px solid var(--linea-osc); }
.ad-lado__nota p { color: var(--tinta50); }
.ad-pie { background: var(--crema-cl); border-block-start: 1px solid var(--linea); }
.ad-pie b { color: var(--tinta); }
.ad-pie a { color: var(--teal); font-weight: 600; }
.ad-pie__nota { color: var(--tinta50); }
.ad-seguimiento { background: var(--crema-cl); border: 1px solid var(--linea-osc); }
.ad-gracias__ico { color: var(--blanco); background: var(--teal); }
/* El logo de la tienda ya está sobre blanco: no le hace falta pastilla. */
.ad-logo__img { padding: 0; background: none; }
/* ===================================================================
LAS CUENTAS
-------------------------------------------------------------------
Entrar, crear cuenta y la puerta de «para publicar hay que entrar».
=================================================================== */
.ad-nav__quien { display: inline-flex; gap: .5rem; align-items: center; font-size: .95rem; color: var(--tinta50); }
.ad-nav__quien b { color: var(--tinta); font-weight: 700; }
.ad-nav__quien a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.ad-nav__tienda svg { width: 1.1rem; height: 1.1rem; }
.ad-entrar { padding-block: var(--sec); }
.ad-entrar__cabeza { max-width: 46rem; margin-bottom: 1.8rem; }
.ad-entrar__cabeza h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); margin-block: .6rem .6rem; }
.ad-entrar__cabeza p { color: var(--tinta70); max-width: 60ch; }
.ad-entrar__porque { margin-top: .7rem; font-size: .95rem; color: var(--tinta50); }
.ad-entrar__caja {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
gap: 1.2rem;
align-items: start;
}
.ad-entrar__lado {
display: grid;
gap: .9rem;
padding: 1.5rem;
background: var(--tarjeta);
border: 1px solid var(--linea);
border-radius: var(--r-xl);
box-shadow: var(--sombra);
}
/* La caja de crear cuenta va sobre el fondo suave: así, de un vistazo,
se ve que son dos caminos distintos y no un formulario partido. */
.ad-entrar__lado--alta { background: var(--crema-cl); }
.ad-entrar__lado h2 { font-size: 1.3rem; }
.ad-entrar__lado form { display: grid; gap: .9rem; }
.ad-entrar__nota { font-size: .9rem; color: var(--tinta50); }
.ad-entrar__nota a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.ad-entrar__pie { margin-top: 1.6rem; color: var(--tinta50); }
.ad-entrar__pie a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.ad-btn--ancho { width: 100%; }
/* La puerta de publicar */
.ad-puerta { max-width: 44rem; padding-block: var(--sec); }
.ad-puerta h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); margin-block: .6rem .7rem; }
.ad-puerta p { color: var(--tinta70); }
.ad-puerta__porque { margin-top: .8rem; font-size: .95rem; color: var(--tinta50); }
.ad-puerta__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
/* Lo que ha publicado quien ha entrado */
.ad-mias { margin-bottom: 1.8rem; }
.ad-mias h2 { font-size: 1.1rem; margin-bottom: .7rem; }
.ad-mias ul { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .4rem; }
.ad-mias a {
display: flex;
gap: .6rem;
align-items: center;
padding: .5rem .8rem .5rem .5rem;
background: var(--tarjeta);
border: 2px solid var(--linea);
border-radius: var(--r-lg);
white-space: nowrap;
}
.ad-mias img { width: 2.6rem; height: 3.5rem; object-fit: cover; border-radius: .5rem; }
.ad-mias b { display: block; font-size: .95rem; }
.ad-mias small { color: var(--tinta50); font-size: .82rem; }
.ad-mias li.es-ahora a { border-color: var(--teal); }
.ad-seguir__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
/* ===================================================================
LA CORTINA DE «SE ESTÁ ENVIANDO»
-------------------------------------------------------------------
Publicar un animal manda varias fotos y en el móvil eso tarda. Sin
nada que lo diga, la gente cree que no ha funcionado y le da otra
vez —y entonces sí que se lía.
=================================================================== */
.ad-espera {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
padding: 1.5rem;
background: rgba(247, 253, 253, .94);
backdrop-filter: blur(3px);
}
.ad-espera__caja {
display: grid;
gap: .5rem;
justify-items: center;
width: min(22rem, 100%);
max-width: 22rem;
min-width: 0;
padding: 2rem 1.6rem;
text-align: center;
background: var(--tarjeta);
border: 1px solid var(--linea);
border-radius: var(--r-xl);
box-shadow: var(--sombra);
}
.ad-espera__caja b { font-size: 1.2rem; }
.ad-espera__caja small { color: var(--tinta50); }
.ad-espera__rueda {
width: 2.6rem;
height: 2.6rem;
margin-bottom: .5rem;
border: 4px solid var(--linea-osc);
border-top-color: var(--teal);
border-radius: 50%;
animation: ad-girar .8s linear infinite;
}
@keyframes ad-girar { to { rotate: 360deg; } }
/* A quien haya pedido que no le muevan cosas, no se le mueve: se le deja
la rueda quieta, que igualmente dice que algo está pasando. */
@media (prefers-reduced-motion: reduce) {
.ad-espera__rueda { animation: none; }
}
/* ===================================================================
LAS FOTOS DEL FORMULARIO
=================================================================== */
.ad-miniaturas { display: flex; flex-wrap: wrap; gap: .7rem; margin-block: 1rem 0; }
.ad-mini-foto { position: relative; margin: 0; }
.ad-mini-foto img { width: 5.5rem; height: 7.3rem; object-fit: cover; border-radius: var(--r); }
/* La × para quitar una foto. Sin esto, quitar la que sobra obligaba a
volver a elegirlas todas. */
.ad-mini-foto__quitar {
position: absolute;
top: -.4rem;
right: -.4rem;
display: grid;
place-items: center;
width: 1.6rem;
height: 1.6rem;
padding: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1;
color: var(--blanco);
background: var(--acento);
border: 2px solid var(--tarjeta);
border-radius: 50%;
cursor: pointer;
}
/* EL AVISO DE LAS FOTOS
-------------------------------------------------------------------
Estaba en letra pequeña y gris debajo de las miniaturas, y era justo
donde había que mirar: es el momento en el que alguien decide si pone
una foto o cinco, y de eso depende que a su animal le pregunten. Va a
todo el ancho, con su caja y su color. */
.ad-mini-aviso {
width: 100%;
margin-block: 1rem 1.6rem;
padding: .9rem 1.1rem;
font-size: 1rem;
font-weight: 600;
color: var(--tinta);
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--r);
}
.ad-mini-aviso.es-poco {
color: var(--tinta);
background: var(--limon-cl);
border-color: var(--limon-linea);
}
.ad-mini-aviso.es-mal { color: var(--error); background: var(--error-fondo); border-color: var(--salvia); }
/* ===================================================================
LA CASILLA DE CONFIRMAR, SIN CAJA
-------------------------------------------------------------------
Las demás casillas son opciones que se marcan o no; esta es una
declaración que hay que leer. Metida en una caja con borde parecía una
opción más y se marcaba sin mirarla. Suelta, con aire arriba y abajo,
se lee.
=================================================================== */
.ad-marca--grande,
.ad-marca--suelta {
display: flex;
gap: .8rem;
align-items: flex-start;
padding: 1.3rem 0;
background: none;
border: 0;
border-radius: 0;
font-size: 1rem;
line-height: 1.55;
}
.ad-marca--grande:has(input:checked),
.ad-marca--suelta:has(input:checked) { border: 0; }
.ad-marca--grande input, .ad-marca--suelta input { margin-block-start: .3rem; width: 1.15rem; height: 1.15rem; flex: none; }
.ad-marca--grande.es-mal { color: var(--error); background: none; }
/* ===================================================================
EL PIE, QUE NO SE LEÍA
=================================================================== */
.ad-pie__arriba {
display: flex;
flex-wrap: wrap;
gap: 1.2rem;
align-items: center;
justify-content: space-between;
}
/* La frase que explica de qué va todo esto: estaba en gris claro y en
letra pequeña. Ahora es lo primero del pie y con su tamaño. */
.ad-pie__lema { font-size: 1.15rem; color: var(--tinta); }
.ad-pie__lema b { font-weight: 700; }
.ad-pie__nota { margin-top: .4rem; font-size: .95rem; color: var(--tinta70); }
.ad-pie__nota a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.ad-pie__tienda { flex: none; }
.ad-pie__tienda svg { width: 1.2rem; height: 1.2rem; }
.ad-pie__enlaces {
margin-top: 1.2rem;
padding-top: 1rem;
font-size: .95rem;
color: var(--tinta50);
border-top: 1px solid var(--linea-osc);
}
.ad-pie__enlaces a { color: var(--teal); font-weight: 600; }
@media (max-width: 48rem) {
.ad-pie__arriba { flex-direction: column; align-items: stretch; }
.ad-pie__tienda { justify-content: center; }
.ad-nav__quien { width: 100%; }
}
/* El botón del pie salía en teal sobre teal —invisible— porque «.ad-pie a»
pinta todos los enlaces del pie del color de la marca y gana por
especificidad al botón. Aquí se le devuelve su letra blanca. */
.ad-pie .ad-btn--teal,
.ad-pie .ad-btn--limon { color: var(--tinta); }
.ad-pie .ad-btn--linea { color: var(--tinta); }
/* ===================================================================
LA CUENTA · isla, pestañas deslizantes y popup
===================================================================
Tres piezas que van juntas y comparten todo:
.ad-isla la tarjeta flotante del centro de entrar.php
.ad-cuenta las dos pestañas y sus dos formularios
.ad-modal la misma .ad-cuenta, pero flotando encima de donde
estabas cuando has intentado hacer algo que pide cuenta
La pastilla de las pestañas SE MUEVE de una a otra; no aparece y
desaparece. Lo hace assets/adopta.js midiendo el botón activo; aquí
solo está la transición.
=================================================================== */
/* --- la isla del centro ------------------------------------------- */
.ad-entrar {
display: grid;
justify-items: center;
gap: 1.2rem;
padding-block: var(--sec);
}
.ad-isla {
width: min(34rem, 100%);
padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-xl);
box-shadow: 0 18px 50px rgba(0, 80, 82, .13);
}
.ad-isla__cabeza { text-align: center; margin-block-end: 1.4rem; }
.ad-isla__cabeza h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); margin-block: .4rem .6rem; }
.ad-isla__cabeza p { color: var(--tinta70); font-size: .95rem; }
.ad-isla__porque {
margin-block-start: 1.4rem;
padding-block-start: 1.1rem;
font-size: .875rem;
line-height: 1.55;
color: var(--tinta50);
border-top: 1px solid var(--linea);
}
/* Los formularios que van sueltos en la isla —recuperar la contraseña—
necesitan el mismo aire que los de las pestañas, o el botón sale pegado
al campo de arriba. */
.ad-isla form { display: grid; gap: 1rem; }
.ad-isla__porque a { color: var(--teal); font-weight: 600; }
.ad-entrar__pie { font-size: .95rem; color: var(--tinta50); }
.ad-entrar__pie a { color: var(--teal); font-weight: 600; }
/* --- las pestañas -------------------------------------------------- */
.ad-pestanas {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-block-end: 1.5rem;
padding: .3rem;
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: 1rem;
}
/* LA PASTILLA. Va por debajo de los botones, en posición absoluta, y el
JavaScript le pone ancho y translateX. Al cambiar de pestaña se
desliza; es lo único que se mueve. */
.ad-pestanas__marca {
position: absolute;
inset-block: .3rem;
inset-inline-start: 0;
width: 0;
background: var(--tarjeta);
border-radius: .75rem;
box-shadow: 0 2px 8px rgba(0, 80, 82, .13);
transition: transform .34s cubic-bezier(.32, .72, 0, 1),
width .34s cubic-bezier(.32, .72, 0, 1);
will-change: transform, width;
}
.ad-pestanas__boton {
position: relative; /* por encima de la pastilla */
z-index: 1;
padding: .7rem .9rem;
font: inherit;
font-weight: 700;
font-size: .95rem;
color: var(--tinta50);
background: none;
border: 0;
border-radius: .75rem;
cursor: pointer;
transition: color var(--rapido);
}
.ad-pestanas__boton:hover { color: var(--tinta); }
.ad-pestanas__boton.es-activa { color: var(--teal); }
.ad-pestanas__boton:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Con JavaScript solo se ve la hoja activa. Sin él —sin la clase ad-js—
se ven las dos, una debajo de la otra, y funcionan igual. */
.ad-js .ad-cuenta__hoja { display: none; }
.ad-js .ad-cuenta__hoja[data-ad-activa] { display: block; animation: adEntraHoja .28s ease both; }
.ad-cuenta__hoja + .ad-cuenta__hoja { margin-block-start: 2rem; }
.ad-js .ad-cuenta__hoja + .ad-cuenta__hoja { margin-block-start: 0; }
.ad-cuenta__titulo { font-size: 1.15rem; margin-block-end: 1rem; }
.ad-js .ad-cuenta__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ad-cuenta__nota { margin-block-start: 1rem; font-size: .85rem; color: var(--tinta50); }
.ad-cuenta__nota a { color: var(--teal); font-weight: 600; }
.ad-cuenta form { display: grid; gap: 1rem; }
@keyframes adEntraHoja {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* --- el popup ------------------------------------------------------ */
.ad-modal {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: 1rem;
overflow-y: auto;
}
.ad-modal__fondo {
position: fixed;
inset: 0;
background: rgba(6, 40, 41, .55);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity .22s ease;
}
.ad-modal__isla {
position: relative;
width: min(32rem, 100%);
max-height: calc(100dvh - 2rem);
overflow-y: auto;
padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
background: var(--tarjeta);
border-radius: var(--r-xl);
box-shadow: 0 24px 60px rgba(0, 60, 62, .3);
opacity: 0;
transform: translateY(14px) scale(.97);
transition: opacity .22s ease, transform .28s cubic-bezier(.32, .72, 0, 1);
}
.ad-modal.es-abierto .ad-modal__fondo { opacity: 1; }
.ad-modal.es-abierto .ad-modal__isla { opacity: 1; transform: none; }
.ad-modal__x {
position: absolute;
inset-block-start: .7rem;
inset-inline-end: .7rem;
width: 2.2rem;
height: 2.2rem;
font-size: 1.4rem;
line-height: 1;
color: var(--tinta50);
background: var(--crema-cl);
border: 0;
border-radius: 50%;
cursor: pointer;
}
.ad-modal__x:hover { color: var(--tinta); background: var(--linea-osc); }
.ad-modal__cabeza { margin-block-end: 1.3rem; padding-inline-end: 2rem; }
.ad-modal__cabeza h2 { font-size: 1.35rem; margin-block: .35rem .5rem; }
.ad-modal__cabeza p { font-size: .9rem; color: var(--tinta70); }
/* Con el popup abierto, el fondo no se mueve: si no, uno cierra y se
encuentra la página en otro sitio. */
.ad-sin-scroll { overflow: hidden; }
/* ===================================================================
LA CABECERA, EN UNA SOLA LÍNEA
-------------------------------------------------------------------
Estando dentro, «Hola, Fulanito de Tal» + Salir + Publicar + La
tienda no cabía y la mitad derecha se caía a una segunda línea. La
solución no es quitar cosas: es que el nombre no crezca sin límite.
=================================================================== */
/* De tablet para arriba, la cabecera es UNA línea y no se parte. Por
debajo de 48rem sigue mandando la regla de más arriba, que baja el
menú entero debajo del logo con los botones a lo ancho: en un móvil
eso se toca mejor que cuatro cosas apretadas. */
@media (min-width: 48.0625rem) {
.ad-nav {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: .55rem;
min-width: 0;
}
}
/* Los enlaces de texto piden más aire que los botones: pegados parecen
una sola palabra larga. Se les da margen propio en vez de subir el
«gap», que separaría también los dos botones del final y ahí no hace
falta. */
.ad-nav__enlace {
white-space: nowrap;
margin-inline-end: .75rem;
padding-block: .2rem;
}
.ad-nav__enlace + .ad-nav__enlace { margin-inline-start: .25rem; }
.ad-btn--peque {
padding: .5rem .9rem;
font-size: .875rem;
white-space: nowrap;
}
.ad-nav__tienda { display: inline-flex; align-items: center; gap: .4rem; }
.ad-nav__tienda svg { width: 1.05rem; height: 1.05rem; }
/* EL CHIP DE QUIEN ESTÁ DENTRO. Ancho fijo pase lo que pase: la
inicial, el nombre recortado con puntos suspensivos y Salir. */
.ad-yo {
display: inline-flex;
align-items: center;
gap: .5rem;
min-width: 0;
max-width: 14rem;
padding: .28rem .28rem .28rem .3rem;
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--pastilla);
}
/* EL ENLACE AL PERFIL: AHORA LLEVA DOS COSAS, NO UNA.
-------------------------------------------------------------------------
Nació pintando una sola letra, así que era un `grid` con `place-items:
center` y esquinas redondas: un círculo con una letra dentro. Cuando pasó a
llevar el avatar seguía valiendo, porque seguía siendo UN hijo.
Al meterle además la palabra «Perfil» se rompió, y de forma muy visible: en
un grid, dos hijos sin más instrucciones se ponen en DOS FILAS. La foto
arriba, la palabra debajo, el enlace el doble de alto que la pastilla que lo
contiene y el texto saliéndose por abajo.
Ahora es una fila: foto y palabra, uno al lado del otro. Y el redondeo pasa
a ser de pastilla —el círculo lo pone el propio avatar—, que si no recorta
las esquinas del texto. */
.ad-yo__ini {
flex: none;
display: inline-flex;
align-items: center;
gap: .35rem;
min-width: 0;
padding-inline-end: .1rem;
border-radius: var(--pastilla);
outline-offset: 2px;
}
.ad-yo__ini:hover .ad-avatar,
.ad-yo__ini:focus-visible .ad-avatar { box-shadow: 0 0 0 2px var(--teal); }
.ad-yo__nombre {
min-width: 0;
overflow: hidden;
font-size: .85rem;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
.ad-yo__salir {
flex: none;
padding: .25rem .6rem;
font-size: .8rem;
font-weight: 600;
color: var(--tinta50);
white-space: nowrap;
background: var(--tarjeta);
border-radius: var(--pastilla);
}
.ad-yo__salir:hover { color: var(--teal); }
/* En pantallas medianas se van cayendo cosas por orden de importancia,
pero SIEMPRE en una línea. Lo último que se va es publicar. */
/* En la franja estrecha —tablet— se van cayendo cosas por orden de
importancia, pero SIEMPRE en una sola línea. Lo último que se va es
el botón de publicar, que es a lo que venimos. */
/* LA CABECERA NO SE PARTE EN DOS. NUNCA.
-------------------------------------------------------------------
Se rompía cada vez que se añadía algo —el chip de la cuenta, el
botón de la tienda, el enlace de «ya tienen casa»— porque la caja
tenía flex-wrap: wrap y en cuanto no cabía por un pelo, la mitad
derecha se caía a una segunda línea.
Ahora, de tablet para arriba, la caja NO envuelve: lo que no cabe se
quita por orden de importancia (los enlaces de texto primero, que
están todos en el pie) y el nombre de la cuenta se recorta. Que algo
se estreche es feo; que la cabecera se parta en dos, es que está
rota. */
@media (min-width: 48.0625rem) {
.ad-cabecera__caja { flex-wrap: nowrap; gap: 1rem; }
/* El logotipo no se encoge: es el nombre del sitio y verlo recortado
(«El tablón de adopción de Peluda…») queda peor que cualquier otra
cosa. Lo que cede es el menú, que para eso tiene de dónde. */
.ad-logo { flex: none; }
.ad-logo b, .ad-logo small { white-space: nowrap; }
.ad-nav { flex: 0 1 auto; min-width: 0; }
}
/* La coletilla del logotipo se va antes que ninguna otra cosa: es lo
único de la cabecera que no sirve para nada más que para explicar. */
@media (min-width: 48.0625rem) and (max-width: 76rem) {
.ad-logo small { display: none; }
}
/* Con tres enlaces de texto ya no caben en un portátil normal, y menos
estando dentro de la cuenta. Se van los enlaces (están en el pie) y
la tienda se queda con su carrito a secas. */
/* Sin cuenta abierta hay sitio de sobra, así que los enlaces aguantan
hasta que la cabecera se estrecha de verdad. Con el chip de la cuenta
en medio, se van antes: caben menos cosas. */
@media (min-width: 48.0625rem) and (max-width: 62rem) {
.ad-nav__enlace { display: none; }
/* Menos «Entrar»: es la única puerta de quien no está dentro. */
.ad-nav__enlace--entrar { display: inline; }
}
@media (min-width: 48.0625rem) and (max-width: 82rem) {
.ad-nav--dentro .ad-nav__enlace { display: none; }
.ad-yo { max-width: 11rem; }
}
/* Estando dentro de la cuenta hay un chip más en la fila y, con el ancho
máximo del sitio, la suma se pasa por unos pocos píxeles: el nombre se
quedaba en «M…». Se quita el enlace que sobra —el logotipo de al lado
lleva al mismo sitio— y vuelve a caber todo con su nombre entero. */
.ad-nav--dentro .ad-nav__enlace--tablon { display: none; }
@media (min-width: 48.0625rem) and (max-width: 62rem) {
.ad-nav__tienda { font-size: 0; gap: 0; padding: .5rem .7rem; }
.ad-nav__tienda svg { width: 1.15rem; height: 1.15rem; }
}
@media (min-width: 82.0001rem) {
.ad-yo__nombre { max-width: 9rem; }
}
/* ===================================================================
LOS SÍES Y LOS NOES DE LA FICHA
-------------------------------------------------------------------
Antes solo se pintaba lo que había. Si un perro no estaba
esterilizado, no salía nada, y quien miraba no sabía si era que no lo
estaba o que no lo habían dicho. Ahora se dicen las dos cosas: los
síes en verde de marca, los noes en gris con una raya. En gris, no en
rojo: no estar esterilizado no es una tara, es una cosa que hay que
hacer.
=================================================================== */
.ad-etiquetas { display: flex; flex-wrap: wrap; gap: .45rem; margin-block: 1rem; }
.ad-etiqueta { display: inline-flex; align-items: center; gap: .35rem; }
.ad-etiqueta--si {
color: var(--teal);
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
}
.ad-etiqueta--no {
color: var(--tinta50);
background: var(--blanco);
border: 1px dashed #C2CFCF;
}
.ad-etiqueta__signo { font-weight: 700; opacity: .8; }
.ad-etiquetas__nota {
margin-block-end: 1.2rem;
font-size: .8125rem;
color: var(--tinta50);
}
/* --- quién lo publica, con su nombre ------------------------------- */
.ad-quien { display: block; line-height: 1.55; }
.ad-quien__nombre { color: var(--tinta); font-weight: 700; }
.ad-quien small { display: block; margin-block-start: .25rem; font-size: .8rem; color: var(--tinta50); }
/* ===================================================================
LA PUERTA DENTRO DE LA FICHA
-------------------------------------------------------------------
Donde iría el formulario de interés cuando no hay cuenta. No se
esconde el formulario y ya está: se dice qué hay detrás y por qué.
=================================================================== */
.ad-puerta--caja {
max-width: none;
padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
text-align: center;
background: var(--crema-cl);
border: 1px dashed var(--linea-osc);
border-radius: var(--r-lg);
}
.ad-puerta__icono { font-size: 1.8rem; line-height: 1; margin-block-end: .6rem; }
.ad-puerta--caja h3 { font-size: 1.2rem; margin-block-end: .6rem; }
.ad-puerta--caja p { color: var(--tinta70); font-size: .95rem; }
.ad-puerta--caja .ad-puerta__botones { justify-content: center; }
.ad-puerta__nota { margin-block-start: 1rem; font-size: .85rem; color: var(--tinta50); }
/* ===================================================================
LA BARRA DE ARRIBA SE CONVIERTE EN LA COLUMNA DE LA IZQUIERDA
-------------------------------------------------------------------
Al pulsar «Filtrar», el buscador deja de ser una barra ancha encima
de la lista y pasa a ser la cabecera de la columna de la izquierda.
Es el MISMO trozo de página moviéndose, y ahora se ve moverse.
Cada pieza lleva su nombre (view-transition-name) y el navegador se
encarga del viaje: saca una foto de antes, otra de después y anima
una hacia la otra. Donde no exista, el cambio es instantáneo como
hasta ahora; y con «menos animaciones» puesto, tampoco se mueve.
=================================================================== */
.ad-filtros { view-transition-name: ad-barra; }
.ad-buscar { view-transition-name: ad-buscador; }
.ad-filtros__abrir { view-transition-name: ad-boton-filtrar; }
.ad-resultados { view-transition-name: ad-lista; }
.ad-filtros__panel { view-transition-name: ad-panel; }
/* El viaje del buscador y del botón: sin desvanecerse, solo moviéndose.
Si se desvanecieran parecerían dos cosas distintas en vez de la
misma cambiándose de sitio. */
::view-transition-old(ad-buscador),
::view-transition-new(ad-buscador),
::view-transition-old(ad-boton-filtrar),
::view-transition-new(ad-boton-filtrar),
::view-transition-old(ad-barra),
::view-transition-new(ad-barra) {
animation-duration: .42s;
animation-timing-function: cubic-bezier(.32, .72, 0, 1);
mix-blend-mode: normal;
}
::view-transition-group(ad-barra),
::view-transition-group(ad-buscador),
::view-transition-group(ad-boton-filtrar),
::view-transition-group(ad-lista),
::view-transition-group(ad-panel) {
animation-duration: .42s;
animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
/* El panel de filtros no viaja: no estaba. Se despliega desde arriba,
como un acordeón, mientras el resto se recoloca. */
::view-transition-new(ad-panel) { animation: adAbrePanel .38s cubic-bezier(.32, .72, 0, 1) both; }
::view-transition-old(ad-panel) { animation: adAbrePanel .28s ease reverse both; }
@keyframes adAbrePanel {
from { opacity: 0; transform: translateY(-10px) scale(.98); }
to { opacity: 1; transform: none; }
}
/* Mientras dura el viaje no se deja tocar nada: dos morfeos a la vez se
pisan y el resultado es un parpadeo feo. */
.ad-morfando .ad-filtros__abrir { pointer-events: none; }
/* Lo mismo que hace el :has() de más arriba, pero con una clase que
pone el JavaScript. Los navegadores sin :has() también colocan bien
la barra cuando los filtros están plegados. */
.ad-tablon.es-plegado { grid-template-columns: minmax(0, 1fr); }
.ad-tablon.es-plegado .ad-lado { position: static; }
.ad-tablon.es-plegado .ad-filtros { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.ad-tablon.es-plegado .ad-buscar { flex: 1 1 20rem; }
.ad-tablon.es-plegado .ad-filtros__abrir { width: auto; }
.ad-tablon.es-plegado .ad-lado__nota { display: none; }
@media (prefers-reduced-motion: reduce) {
.ad-filtros, .ad-buscar, .ad-filtros__abrir,
.ad-resultados, .ad-filtros__panel { view-transition-name: none; }
.ad-pestanas__marca { transition: none; }
.ad-modal__isla, .ad-modal__fondo { transition: none; }
}
/* ===================================================================
LOS AÑADIDOS DE LA 1.0.3
=================================================================== */
/* --- el acordeón de estado.php ------------------------------------ */
/* Mientras se abre o se cierra, la altura la manda el JavaScript y aquí
solo se pone la transición. Fuera de ese momento no hay altura fija:
así el bloque crece si el texto crece, que es lo que tiene que pasar. */
.ad-peticion.es-moviendo .ad-peticion__form {
overflow: hidden;
transition: height .28s cubic-bezier(.32, .72, 0, 1);
}
/* Y el contenido entra con un empujoncito, para que se note que viene
de arriba y no que aparece de la nada. */
.ad-peticion[open] .ad-peticion__form { animation: adAbreCajon .3s ease both; }
@keyframes adAbreCajon {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* --- el guiño de los animales poco corrientes ---------------------- */
.ad-guino {
display: flex;
gap: .55rem;
align-items: flex-start;
margin-block: 1rem;
padding: .8rem 1rem;
font-size: .92rem;
color: var(--sobre-claro);
background: var(--limon-cl);
border: 1px solid var(--limon-linea);
border-radius: .8rem;
}
.ad-guino::before { content: "🐾"; flex: none; }
/* --- «busca casa ya», con su aviso --------------------------------- */
/* Marcar esto adelanta al animal por delante de todos los demás, así que
la casilla no puede parecer una más de la lista. */
.ad-marca--aviso {
border-color: var(--limon-linea);
background: var(--limon-cl);
}
.ad-marca--aviso small { display: block; margin-top: .3rem; line-height: 1.5; }
.ad-marca--aviso:has(input:checked) { border-color: var(--teal); }
.ad-marcas__nada {
font-size: .9rem;
color: var(--tinta50);
padding: .2rem 0 .4rem;
}
/* --- «ya te has interesado» ---------------------------------------- */
.ad-yaesta__botones {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-block-start: .9rem;
}
/* --- quién lo publica, con la fecha detrás ------------------------- */
.ad-quien__sep { margin-inline: .3rem; color: var(--tinta50); }
.ad-quien__fecha { white-space: nowrap; }
/* ===================================================================
LOS AÑADIDOS DE LA 1.0.4
=================================================================== */
/* --- los que ya tienen casa --------------------------------------- */
.ad-portada--casas { background: linear-gradient(180deg, var(--limon-cl), var(--fondo)); }
.ad-portada--casas h1 b { color: var(--teal); }
.ad-portada__casas { margin-block-start: 1.2rem; }
/* NO ES UN FLEX, ES UNA FRASE.
-------------------------------------------------------------------
Estaba como «inline-flex» con hueco entre elementos, y ahí está el
fallo: en un contenedor flex, cada trozo de texto suelto se convierte
en un elemento independiente. Así que «Y ya hay», el «1» en negrita y
«que ha encontrado casa desde aquí» eran tres cajas separadas por el
hueco, cada una partiéndose por su cuenta. En pantalla ancha colaba
porque cabía todo en una línea; en el móvil se veía la carnicería:
palabras sueltas repartidas por el recuadro.
Una frase con una palabra en negrita no necesita ningún flex. */
.ad-portada__casas a {
display: inline-block;
padding: .5rem 1rem;
font-size: .95rem;
font-weight: 600;
color: var(--teal);
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--pastilla);
transition: transform var(--rapido), border-color var(--rapido);
}
.ad-portada__casas a:hover { transform: translateY(-1px); border-color: var(--teal); }
.ad-portada__casas b { color: var(--tinta); }
.ad-tarjeta__casa {
margin-block-start: .35rem;
font-size: .8125rem;
font-weight: 600;
color: var(--teal);
}
.ad-llamada--casas { margin-block: var(--sec); }
.ad-llamada__botones { display: flex; flex-wrap: wrap; gap: .7rem; }
.ad-paginas__cuenta { font-size: .9rem; color: var(--tinta50); }
/* --- por lo que he preguntado -------------------------------------- */
.ad-preguntas {
margin-block-end: var(--sec);
padding: clamp(1.1rem, .8rem + 1.2vw, 1.8rem);
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
}
.ad-preguntas h2 { font-size: 1.25rem; margin-block-end: .4rem; }
.ad-preguntas__intro { font-size: .92rem; color: var(--tinta50); margin-block-end: 1.1rem; }
.ad-preguntas__lista { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ad-pregunta {
display: flex;
gap: .9rem;
align-items: center;
flex-wrap: wrap;
padding: .6rem;
background: var(--crema-cl);
border-radius: .8rem;
}
.ad-pregunta__foto { flex: none; }
.ad-pregunta__foto img {
display: block;
width: 3rem;
height: 4rem;
object-fit: cover;
border-radius: .55rem;
}
.ad-pregunta__sinfoto {
display: grid;
place-items: center;
width: 3rem;
height: 4rem;
color: var(--tinta50);
background: var(--linea);
border-radius: .55rem;
}
.ad-pregunta__sinfoto svg { width: 1.4rem; height: 1.4rem; }
.ad-pregunta__texto { flex: 1 1 8rem; min-width: 0; }
.ad-pregunta__texto b { display: block; font-size: 1rem; }
.ad-pregunta__texto a { color: var(--tinta); }
.ad-pregunta__texto a:hover { color: var(--teal); }
.ad-pregunta__texto small { font-size: .82rem; color: var(--tinta50); }
/* El estado, con su color. Es lo único que la persona viene a mirar. */
.ad-pregunta__estado {
flex: none;
padding: .35rem .8rem;
font-size: .82rem;
font-weight: 700;
border-radius: var(--pastilla);
}
.ad-pregunta__estado.es-espera { color: var(--sobre-claro); background: var(--limon-cl); border: 1px solid var(--limon-linea); }
.ad-pregunta__estado.es-hecho { color: var(--blanco); background: var(--teal); }
.ad-pregunta__estado.es-casa { color: var(--teal); background: var(--crema); border: 1px solid var(--teal); }
.ad-preguntas__pie { margin-block-start: 1rem; font-size: .85rem; color: var(--tinta50); }
/* OJO CON ESTA REGLA, QUE PINTÓ UN BOTÓN DE TEAL SOBRE TEAL.
-------------------------------------------------------------------------
Era «.ad-preguntas a», a secas, y ahí dentro también hay botones. Un
selector de descendencia pesa (0,1,1) y «.ad-btn--teal» pesa (0,1,0), así
que ganaba éste y le ponía letra teal al botón teal: texto verde oscuro
sobre fondo verde oscuro, ilegible.
Es la tercera vez en este proyecto que una regla ancha se lleva por
delante a una clase de componente. La forma de que no vuelva a pasar es
ésta: cuando se pinten enlaces «de dentro de un bloque», se excluyen los
que ya son un botón. Un botón se pinta con su clase y con nadie más. */
.ad-preguntas__pie a,
.ad-preguntas a:not(.ad-btn) { color: var(--teal); font-weight: 600; }
@media (max-width: 34rem) {
.ad-pregunta__estado { width: 100%; text-align: center; }
}
/* --- rescatar lo escrito ------------------------------------------- */
.ad-rescate { margin-block-end: 1.4rem; }
.ad-rescate__botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: .8rem; }
/* --- la barra de subida -------------------------------------------- */
/* LA BARRA DESCUADRABA EL POPUP, y el motivo es una cuenta que no sale.
-------------------------------------------------------------------
Medía «min(20rem, 70vw)» dentro de una caja de 22rem con 1.6rem de
relleno a cada lado. O sea: el hueco de dentro son 18,8rem y la barra
pedía 20. Se salía 1,2rem.
Y al salirse de una rejilla, lo que sobra se va SIEMPRE hacia la
derecha, aunque los elementos estén centrados. De ahí la sensación de
que por la derecha había menos aire que por la izquierda: no era una
sensación, faltaban 1,2rem de verdad.
Con 100% se ata al hueco que hay y el problema desaparece para
cualquier ancho de caja, hoy y cuando alguien la cambie. */
.ad-espera__barra {
width: 100%;
height: .5rem;
margin-block-start: .9rem;
overflow: hidden;
background: rgba(18, 41, 41, .12);
border-radius: var(--pastilla);
}
.ad-espera__barra span {
display: block;
width: 0;
height: 100%;
background: var(--limon);
border-radius: var(--pastilla);
transition: width .2s linear;
}
.ad-espera__cuanto {
margin-block-start: .5rem;
font-size: .9rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* --- la página de privacidad --------------------------------------- */
.ad-legal { max-width: 46rem; padding-block: var(--sec); }
.ad-legal__cabeza { margin-block-end: 2rem; }
.ad-legal__cabeza h1 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); margin-block: .5rem .7rem; }
.ad-legal__cabeza p { color: var(--tinta70); }
.ad-legal h2 {
margin-block: 2rem .7rem;
font-size: 1.3rem;
padding-block-start: 1.4rem;
border-top: 1px solid var(--linea);
}
.ad-legal h3 { margin-block: 1.3rem .4rem; font-size: 1.05rem; color: var(--teal); }
.ad-legal p { margin-block-end: .8rem; line-height: 1.7; color: var(--tinta70); }
.ad-legal a { color: var(--teal); font-weight: 600; }
/* El resumen de arriba: es lo único que va a leer la mayoría, así que se
lee como una tarjeta y no como un párrafo más. */
.ad-legal__resumen {
padding: 1.3rem 1.5rem;
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
}
.ad-legal__resumen h2 { margin-block: 0 .8rem; padding: 0; border: 0; font-size: 1.1rem; }
/* Con viñetas: el CSS de la página las quita en todas las listas, y aquí
son cinco frases sueltas que sin punto delante se leen como un párrafo
partido. */
.ad-legal__resumen ul { margin: 0; padding-inline-start: 1.2rem; list-style: disc; }
.ad-legal__resumen li { margin-block-end: .45rem; color: var(--tinta70); line-height: 1.6; }
.ad-legal__pie {
margin-block-start: 2.5rem;
padding-block-start: 1.4rem;
border-top: 1px solid var(--linea);
}
.ad-legal__pie p { font-size: .85rem; color: var(--tinta50); }
.ad-legal__botones { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: 1rem; }
/* ===================================================================
EL AVISO DE «TUS DATOS NO SALEN EN EL TABLÓN»
-------------------------------------------------------------------
Es lo que más tranquiliza a quien duda si publicar, y estaba en
letra pequeña y a media anchura. Ahora ocupa la fila entera del
formulario, se lee como un aviso y tiene aire por debajo para que no
se pegue al primer campo.
=================================================================== */
.ad-aviso--ancho {
grid-column: 1 / -1;
width: 100%;
margin-block-end: 1.4rem;
}
/* Esta es la que manda: hay otra igual más arriba y esta va después.
Iba en «--menta», que se llama menta pero es un rosa, y el aviso se
leía como una advertencia cuando dice justo lo contrario — que sus
datos están a salvo. En verde menta de verdad dice lo que quiere
decir. */
.ad-form__ayuda--fuerte {
padding: 1rem 1.2rem;
font-size: .92rem;
line-height: 1.6;
color: var(--turq-osc);
background: var(--menta-ok);
border: 1px solid var(--menta-ok-linea);
border-radius: var(--r-lg);
}
.ad-form__ayuda--fuerte b { color: var(--tinta); }
.ad-form__ayuda--fuerte > b { display: block; margin-block-end: .5rem; font-size: 1rem; }
.ad-form__ayuda--fuerte p + p { margin-block-start: .7rem; }
/* Las dos columnas se alinean por arriba: si una lleva nota debajo y la
otra no, con «center» las cajas de escribir salen a distinta altura y
se ve descuadrado aunque midan lo mismo. */
.ad-form__fila { align-items: start; }
/* ===================================================================
LOS FAVORITOS · el corazón
-------------------------------------------------------------------
Es un botón dentro de un formulario de verdad, así que hay que
quitarle al formulario todo el sitio que ocuparía: en la tarjeta va
flotando sobre la foto.
=================================================================== */
.ad-guardar { margin: 0; padding: 0; border: 0; }
/* Sobre la foto de la tarjeta, arriba a la derecha, que es donde lo
busca todo el mundo. */
.ad-tarjeta__foto .ad-guardar {
position: absolute;
inset-block-start: .55rem;
inset-inline-end: .55rem;
z-index: 2; /* por encima del enlace que cubre la tarjeta */
}
.ad-guardar__boton {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .45rem;
font: inherit;
font-size: .85rem;
font-weight: 700;
color: var(--tinta50);
background: rgba(255, 255, 255, .92);
border: 1px solid var(--linea-osc);
border-radius: var(--pastilla);
cursor: pointer;
transition: color var(--rapido), background var(--rapido), transform var(--rapido);
}
.ad-guardar__boton:hover { color: var(--acento); background: #fff; transform: scale(1.06); }
.ad-guardar__boton:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.ad-guardar__boton.es-guardado { color: var(--acento); }
.ad-guardar__dibujo { width: 1.35rem; height: 1.35rem; flex: none; }
/* Dos corazones superpuestos: el de línea siempre, el relleno solo
cuando está guardado. Así el paso de uno a otro se puede animar. */
.ad-guardar__relleno { opacity: 0; transform-origin: center; transition: opacity var(--rapido); }
.ad-guardar__boton.es-guardado .ad-guardar__linea { opacity: 0; }
.ad-guardar__boton.es-guardado .ad-guardar__relleno { opacity: 1; }
/* En la tarjeta, solo el corazón: el texto sobraría encima de la foto. */
.ad-tarjeta__foto .ad-guardar__texto {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
/* En la ficha, con su palabra al lado y del tamaño de los demás botones. */
.ad-guardar--grande .ad-guardar__boton {
padding: .8rem 1.3rem;
font-size: .95rem;
color: var(--tinta);
background: var(--tarjeta);
}
.ad-guardar--grande .ad-guardar__boton:hover { transform: none; border-color: var(--acento); }
.ad-guardar--grande .ad-guardar__boton.es-guardado { color: var(--acento); border-color: var(--acento); background: var(--menta); }
/* El latido al pulsarlo. Dura menos de medio segundo y es lo que hace
que el corazón se sienta como un corazón y no como una casilla. */
.ad-guardar__boton.es-latiendo .ad-guardar__dibujo { animation: adLatido .42s ease; }
@keyframes adLatido {
0% { transform: scale(1); }
30% { transform: scale(1.35); }
55% { transform: scale(.92); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.ad-guardar__boton.es-latiendo .ad-guardar__dibujo { animation: none; }
.ad-guardar__boton:hover { transform: none; }
}
/* --- el enlace de la cabecera, con su número ----------------------- */
.ad-nav__guardados {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .45rem .7rem;
font-size: .9rem;
font-weight: 600;
color: var(--tinta50);
white-space: nowrap;
border-radius: var(--pastilla);
}
.ad-nav__guardados:hover { color: var(--acento); background: var(--menta); }
.ad-nav__guardados.es-activo { color: var(--acento); }
.ad-nav__guardados svg { width: 1.15rem; height: 1.15rem; }
.ad-nav__cuenta {
display: grid;
place-items: center;
min-width: 1.3rem;
height: 1.3rem;
padding-inline: .3rem;
font-size: .72rem;
font-weight: 700;
color: var(--blanco);
background: var(--acento);
border-radius: var(--pastilla);
}
/* --- la página de guardados --------------------------------------- */
.ad-guardados { padding-block: var(--sec); }
.ad-guardados__cabeza { margin-block-end: 1.6rem; }
.ad-guardados__cabeza h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); margin-block: .5rem .6rem; }
.ad-guardados__cabeza p { color: var(--tinta70); max-width: 56ch; }
.ad-guardados__novedades { display: grid; gap: .8rem; margin-block-end: 1.6rem; }
.ad-guardados__aviso { margin-block-end: 1.6rem; }
.ad-aviso--ojo {
color: var(--sobre-claro);
background: var(--limon-cl);
border: 1px solid var(--limon-linea);
}
/* ===================================================================
CON QUIÉN SE LLEVA BIEN
-------------------------------------------------------------------
Lo primero que mira una familia, así que va antes que el texto
libre y con su propio recuadro.
=================================================================== */
.ad-convivencia {
margin-block: 1.2rem;
padding: 1.1rem 1.3rem;
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
}
.ad-convivencia__titulo { font-size: 1rem; margin-block-end: .8rem; }
.ad-convivencia__lista { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ad-convivencia__lista li {
display: flex;
gap: .55rem;
align-items: center;
font-size: .95rem;
font-weight: 600;
}
.ad-convivencia__signo {
display: grid;
place-items: center;
width: 1.4rem;
height: 1.4rem;
flex: none;
font-size: .8rem;
font-weight: 700;
border-radius: 50%;
}
/* Sí en teal, no en coral, y el «no lo sabemos» en gris: ni bueno ni
malo, que es exactamente lo que significa. */
.ad-convive-si { color: var(--teal); }
.ad-convive-si .ad-convivencia__signo { color: var(--blanco); background: var(--teal); }
.ad-convive-no { color: var(--acento); }
.ad-convive-no .ad-convivencia__signo { color: var(--blanco); background: var(--acento); }
.ad-convive-quizas { color: var(--tinta50); font-weight: 500; }
.ad-convive-quizas .ad-convivencia__signo { color: var(--tinta50); background: var(--linea); }
.ad-caracteres { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .9rem; }
.ad-pastilla-fija {
padding: .3rem .8rem;
font-size: .82rem;
font-weight: 600;
color: var(--teal);
background: var(--blanco);
border: 1px solid var(--linea-osc);
border-radius: var(--pastilla);
}
.ad-necesita {
margin: .9rem 0 0;
padding-inline-start: 1.1rem;
font-size: .9rem;
color: var(--tinta70);
}
.ad-necesita li { margin-block-end: .25rem; }
.ad-acogida {
margin-block-start: .9rem;
padding-block-start: .8rem;
font-size: .9rem;
color: var(--tinta70);
border-top: 1px solid var(--linea-osc);
}
/* --- las casillas de carácter, en el formulario -------------------- */
.ad-convive__porque {
margin-block-end: 1rem;
font-size: .9rem;
color: var(--tinta70);
}
.ad-convive__filas { display: grid; gap: .8rem; }
.ad-caracter { padding: 0; margin: .4rem 0 0; border: 0; }
.ad-caracter legend { padding: 0; font-size: .95rem; font-weight: 700; margin-block-end: .6rem; }
.ad-caracter__lista { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Las pastillas de carácter: la casilla se esconde y lo que se pulsa
es la etiqueta entera, que en un móvil es la diferencia entre
acertar y no acertar. */
.ad-pastilla input {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.ad-pastilla span {
display: inline-block;
padding: .45rem 1rem;
font-size: .875rem;
font-weight: 600;
color: var(--tinta70);
background: var(--blanco);
border: 1.5px solid var(--linea-osc);
border-radius: var(--pastilla);
cursor: pointer;
transition: all var(--rapido);
}
.ad-pastilla span:hover { border-color: var(--teal); }
.ad-pastilla input:checked + span { color: var(--blanco); background: var(--teal); border-color: var(--teal); }
.ad-pastilla input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.ad-grupo__nota { margin-block-start: .5rem; font-size: .8rem; color: var(--tinta50); }
/* ===================================================================
LA CABECERA EN DOS PISOS Y EL PIE OSCURO
-------------------------------------------------------------------
Esto sustituye a la cabecera de una sola fila y al pie claro. Va al
final del archivo a propósito: lo que hay más arriba sigue estando
para las piezas que se reaprovechan (el chip de la cuenta, el
corazón de guardados, los botones), y aquí solo se coloca lo nuevo.
=================================================================== */
/* --- 1 · la franja de arriba -------------------------------------- */
/* Teal de la marca. Cumple dos funciones: dice el lema —que estaba
escondido en el pie, donde no lo leía nadie— y saca de la barra
principal la salida hacia la tienda, que es lo que la tenía sin
sitio para crecer. */
.ad-tira {
color: #CFEDEE;
background: var(--teal);
font-size: .8125rem;
}
.ad-tira__caja {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: .5rem;
}
.ad-tira__lema { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.ad-tira__lema b { color: var(--blanco); }
.ad-tira__pata { display: inline-flex; flex: none; color: var(--limon); }
.ad-tira__pata svg { width: 1.05rem; height: 1.05rem; }
/* ===================================================================
EL BOTÓN DE LA TIENDA
-------------------------------------------------------------------
Sale en dos sitios —la franja de arriba y el pie oscuro— y es el
mismo botón en los dos, a propósito: si el usuario aprende que «el
blanco es la tienda», lo reconoce sin leerlo.
POR QUÉ BLANCO Y NO LIMÓN
El limón ya significa una cosa concreta en este tablón: publicar un
peludo. Es el botón grande de la llamada de antes del pie. Si la
tienda usara el mismo amarillo, a dos centímetros habría dos botones
iguales pidiendo cosas distintas, y entonces el color deja de decir
nada. El blanco resalta igual de fuerte sobre el teal de la franja y
sobre el oscuro del pie, y de paso queda libre para la tienda sola.
POR QUÉ PEQUEÑO
Porque tiene que resaltar, no ganar. En la franja compite con el
lema, y en el pie con «publicar un peludo», que sigue siendo lo que
más nos importa que se pulse. Un botón pequeño con mucho contraste
se ve más que uno grande con poco.
=================================================================== */
.ad-tienda-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
flex: none;
/* Pequeño de verdad: la altura de una línea de texto y poco más. */
padding: .34rem .7rem;
font-size: .8125rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -.005em;
white-space: nowrap;
color: var(--teal-osc);
background: var(--blanco);
/* Esquina suave, nunca pastilla: es la regla de la casa y la de la
tienda. Un botón redondo del todo aquí cantaría. */
border-radius: .5rem;
/* Una sombra corta y un filo claro por dentro. Sin esto, sobre el
teal el blanco se ve plano, como un trozo de papel pegado; con
ellos parece una tecla y se entiende que se pulsa. */
box-shadow: 0 1px 0 rgba(0, 0, 0, .12), inset 0 -1px 0 rgba(0, 80, 82, .12);
border: 0;
transition: background var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
.ad-tienda-btn:hover,
.ad-tienda-btn:focus-visible {
color: var(--teal-osc);
background: var(--blanco);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, .22), inset 0 -1px 0 rgba(0, 80, 82, .12);
}
.ad-tienda-btn:active { transform: translateY(0); }
.ad-tienda-btn__icono {
width: .95rem;
height: .95rem;
flex: none;
/* La bolsa va en limón: es el único trozo de amarillo del botón y es
lo que lo ata al resto de la marca sin convertirlo en un botón
amarillo. Sobre blanco el limón solo se lee si es un dibujo con
trazo, nunca de fondo, que es justo lo que es. */
color: #C9A400;
}
.ad-tienda-btn__flecha {
font-size: .95em;
color: var(--turq-osc);
transition: transform var(--rapido);
}
.ad-tienda-btn:hover .ad-tienda-btn__flecha { transform: translateX(2px); }
/* El nombre de la tienda solo cabe en pantallas anchas. Por debajo se
queda «La tienda», que ya se entiende: el logotipo de al lado dice
de quién es. */
@media (max-width: 62rem) {
.ad-tienda-btn__marca { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ad-tienda-btn,
.ad-tienda-btn__flecha { transition: none; }
.ad-tienda-btn:hover { transform: none; }
.ad-tienda-btn:hover .ad-tienda-btn__flecha { transform: none; }
}
/* EN EL MÓVIL, LO QUE SE VA ES LA TIENDA, NO EL LEMA.
-----------------------------------------------------------------------------
Esto estaba justo al revés: en el móvil se escondía el lema y se dejaba el
botón de la tienda solo y centrado, «que es lo accionable». El efecto era que
en la pantalla por la que entra casi todo el mundo, lo primero de la web era
un botón hacia la tienda — en un tablón cuyo argumento entero es que aquí no
se vende nada.
Ahora manda el lema, que es lo que hace que alguien se fíe, y la tienda se
queda en «La tienda» a secas. Si ni así cabe, el lema pierde su segunda mitad
(«solo buscamos casas…») y conserva la primera, que es la que importa. */
@media (max-width: 44rem) {
.ad-tira__caja { gap: .5rem; }
.ad-tira__lema { min-width: 0; }
.ad-tira__lema b { white-space: nowrap; }
}
@media (max-width: 30rem) {
/* La segunda mitad se va entera, no cortada a media palabra: «Aquí no se
vende nada: solo …» se lee peor que «Aquí no se vende nada». */
.ad-tira__cola { display: none; }
.ad-tira__pata { display: none; }
.ad-tira__lema { white-space: nowrap; }
}
/* --- 2 · la barra principal --------------------------------------- */
.ad-cabecera__caja {
display: flex;
align-items: center;
gap: 1.5rem;
padding-block: .9rem;
}
/* El logotipo no se encoge nunca: es el nombre del sitio. */
.ad-cabecera__caja .ad-logo { flex: none; }
/* La pastilla amarilla cuando la tienda no tiene logotipo puesto. Un
texto suelto no parece una marca; con la pata delante, sí. */
.ad-logo__pata {
display: grid;
place-items: center;
width: 2.4rem;
height: 2.4rem;
flex: none;
color: var(--tinta);
background: var(--limon);
border-radius: 50%;
}
.ad-logo__pata svg { width: 1.35rem; height: 1.35rem; }
/* LAS SECCIONES, en el centro. */
/* LAS SECCIONES NO SE ENCOGEN.
-------------------------------------------------------------------
Con «min-width: 0» la caja del menú cedía sitio antes que nadie, y
como los enlaces no parten palabra, se salían por encima del chip de
la cuenta: se veía «Seguir el mío» escrito encima de «Guardados».
Lo que tiene que ceder es el nombre de la cuenta, que para eso se
recorta con puntos suspensivos y sigue leyéndose. */
.ad-menu {
display: flex;
align-items: center;
flex: none;
gap: 1.4rem;
margin-inline-end: auto;
}
.ad-menu__enlace {
font-size: .9375rem;
font-weight: 600;
color: var(--tinta50);
white-space: nowrap;
padding-block: .3rem;
border-bottom: 2px solid transparent;
transition: color var(--rapido), border-color var(--rapido);
}
.ad-menu__enlace:hover { color: var(--tinta); }
.ad-menu__enlace.es-activo {
color: var(--tinta);
border-bottom-color: var(--limon);
}
/* Y a la derecha, lo de cada uno. */
/* NADA SE APLASTA: LO QUE SOBRA, SE QUITA.
-------------------------------------------------------------------
Dejando que el bloque de la derecha se encogiera, el chip de la
cuenta se comía a sí mismo y «Salir» acababa metido debajo del botón
de publicar. Así que aquí no se encoge nadie; lo que se hace es
quitar cosas por orden, y la primera que sobra está clarísima.
LA CUENTA DE ANCHOS, que es lo que decide esto: el sitio tiene un
ancho máximo de 78rem, así que a partir de 1330 px de pantalla el
contenido SIEMPRE mide lo mismo, 1248 px. O cabe ahí, o no cabe
nunca por grande que sea el monitor.
logo 283 + secciones 426 + guardados 135 + chip 192 + publicar 180
+ los huecos 67 = 1283 px → se pasa por 35.
Quitando la palabra «Guardados» —queda el corazón con su número, que
se entiende igual y además tiene su «title»— bajamos a 1198 y entra
con holgura. Sin sesión no hay chip, así que ahí la palabra se queda. */
.ad-mio {
display: flex;
align-items: center;
gap: .6rem;
flex: none;
}
.ad-mio .ad-yo { max-width: 12rem; }
/* Aquí se escondía la palabra «Guardados» en cuanto había sesión iniciada,
para hacer sitio al nombre y al botón de publicar. El resultado en el móvil
era el de la foto: un bocadillo y un corazón sueltos encima del botón
grande, sin una palabra que dijera qué eran. Ahora la palabra se queda; lo
que se aprieta es el espacio, que se recupera de sobra. */
.ad-mio--dentro .ad-nav__guardados { padding-inline: .5rem; }
/* --- lo que se va cuando falta sitio ------------------------------ */
/* CUÁNDO PASA A DOS FILAS.
-------------------------------------------------------------------
A 82rem (1312 px). No es un número redondo por gusto: es donde deja
de caber la suma de arriba —1189 px de contenido— con los márgenes
del sitio. Por debajo, las secciones bajan a su propia fila y se
pueden deslizar con el dedo; el logo, los guardados, la cuenta y el
botón de publicar se quedan arriba.
Apretarlo más en una sola fila era lo que hacía que las cosas se
montaran unas encima de otras. */
@media (max-width: 86rem) {
.ad-cabecera__caja { flex-wrap: wrap; gap: .8rem; }
.ad-menu { order: 3; width: 100%; gap: 1.2rem; overflow-x: auto; padding-block-end: .2rem; }
.ad-mio { margin-inline-start: auto; }
}
@media (max-width: 34rem) {
.ad-logo__texto small { display: none; }
.ad-yo__nombre { display: none; }
.ad-mio .ad-btn--peque { padding-inline: .8rem; }
}
/* --- 3 · la llamada de antes del pie ------------------------------ */
/* La franja va pegada al pie a propósito —hace de suelo— pero por
arriba necesitaba aire: el contenido de la página terminaba y el
color empezaba justo ahí, sin respiro, y se leía como si formara
parte de lo último que estabas mirando. */
.ad-llamadon {
margin-block-start: var(--sec);
color: var(--blanco);
background: var(--teal);
}
.ad-llamadon__caja {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
padding-block: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
}
.ad-llamadon h2 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); color: var(--blanco); }
.ad-llamadon p { margin-block-start: .45rem; color: #BFE6E7; max-width: 46ch; }
/* El botón amarillo sobre el teal: el único punto de color fuerte de
toda la franja, que es exactamente donde hay que pulsar. */
.ad-llamadon .ad-btn--limon,
.ad-llamadon .ad-btn--teal { color: var(--tinta); background: var(--limon); box-shadow: none; }
.ad-llamadon .ad-btn--limon:hover { background: #FFECAF; transform: translateY(-1px); }
/* --- 4 · el pie oscuro -------------------------------------------- */
.ad-pie--oscuro {
color: #A9CFCF;
background: var(--tinta);
border: 0;
/* Sin hueco por arriba: la franja teal de la llamada y el pie son el
mismo bloque de suelo, y un dedo de fondo claro entre los dos rompe
justo el efecto que se busca. */
margin-block-start: 0;
padding-block: 0;
}
/* La raya de encima de los enlaces la ponía el pie claro para separarlos
del lema. Aquí no hay lema arriba y la raya sobra. */
.ad-pie--oscuro .ad-pie__enlaces { border-top: 0; padding-top: 0; }
.ad-pie--oscuro .ad-pie__caja { padding-block: 1.3rem; }
.ad-pie__fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
flex-wrap: wrap;
}
.ad-pie--oscuro .ad-pie__enlaces {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem .7rem;
font-size: .9rem;
}
.ad-pie--oscuro .ad-pie__enlaces a {
font-weight: 600;
color: #DCF0F0;
border-bottom: 1px solid transparent;
}
.ad-pie--oscuro .ad-pie__enlaces a:hover { color: var(--blanco); border-bottom-color: var(--limon); }
.ad-pie--oscuro .ad-pie__enlaces span { color: #4E7676; }
.ad-pie__firma {
display: flex;
flex-wrap: wrap;
gap: .4rem;
font-size: .82rem;
color: #7FA9A9;
}
.ad-pie--oscuro .ad-pie__firma a { color: #7FA9A9; }
.ad-pie--oscuro .ad-pie__firma a:hover { color: var(--blanco); }
@media (max-width: 56rem) {
.ad-pie__fila { justify-content: flex-start; }
}
/* --- 5 · la tienda dentro del pie oscuro --------------------------
El bloque nuevo del final del pie. Va separado del resto por una
raya tenue —no por un hueco— porque un hueco a secas se lee como
«se acabó la página» y lo que queremos es justo lo contrario: que
quien ha llegado hasta aquí tenga todavía un sitio al que ir.
Sobre el oscuro del pie el botón blanco tira mucho, así que el
texto de al lado va apagado: si los dos gritan, no se oye ninguno. */
.ad-pie__tienda-bloque {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .75rem 1.25rem;
margin-block-start: 1rem;
padding-block-start: 1rem;
border-block-start: 1px solid rgba(255, 255, 255, .09);
}
.ad-pie__tienda-texto {
margin: 0;
min-width: 0;
font-size: .875rem;
line-height: 1.5;
color: #A9CFCF;
}
.ad-pie__tienda-texto b {
display: block;
color: var(--blanco);
font-weight: 700;
}
/* El botón del pie es el mismo, un punto más grande: aquí no compite
con un lema en la misma línea, compite con nada, y a esa altura de
la página conviene que se vea sin buscarlo. */
.ad-tienda-btn--pie {
padding: .45rem .85rem;
font-size: .875rem;
}
/* «.ad-pie a» pinta de teal todos los enlaces del pie y gana por
especificidad al botón, que se quedaba en teal sobre blanco: legible
de milagro y feo. Se le devuelve su color a la fuerza, igual que ya
se hace con .ad-btn--teal y .ad-btn--limon unas líneas más arriba. */
.ad-pie .ad-tienda-btn,
.ad-pie .ad-tienda-btn:hover { color: var(--teal-osc); }
.ad-pie .ad-tienda-btn__icono { color: #C9A400; }
.ad-pie .ad-tienda-btn__flecha { color: var(--turq-osc); }
@media (max-width: 40rem) {
/* Apilado y a lo ancho: en un móvil un botón a la derecha de un
párrafo acaba siendo un botón diminuto en una esquina. */
.ad-pie__tienda-bloque { flex-direction: column; align-items: stretch; }
.ad-tienda-btn--pie { justify-content: center; }
}
/* ===================================================================
6 · REMATES DE LA CABECERA, EL PIE Y EL ACORDEÓN
=================================================================== */
/* --- 6.1 · «Entrar» con la misma forma que «Guardados» -------------
Sin sesión, «Entrar» usaba .ad-menu__enlace, que es el formato de
las secciones de la izquierda: letra de .9375rem, sin relleno
lateral y con una línea de 2px debajo para marcar la activa. Al
lado de «Guardados» —que es una pastilla de .9rem con relleno— no
pegaba ni en tamaño ni en altura: al no tener relleno vertical, su
caja era más baja y el texto quedaba más arriba.
Aquí se le da exactamente la misma forma que a «Guardados». Son dos
cosas del mismo grupo —lo tuyo— y tienen que parecerlo. */
.ad-mio .ad-menu__enlace--entrar {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .45rem .7rem;
font-size: .9rem;
font-weight: 600;
line-height: 1.2;
border-bottom: 0; /* la línea de las secciones aquí sobra */
border-radius: var(--pastilla);
transition: color var(--rapido), background-color var(--rapido);
}
/* LA ALTURA, ATADA PARA LOS DOS.
Con el mismo relleno seguían midiendo distinto: «Guardados» lleva
dentro un icono y la pastilla del número —20,8 px de alto— y
«Entrar» solo texto. Igualar el relleno no basta cuando el contenido
no mide lo mismo; hay que fijar el suelo. Medido en el navegador:
38 y 32 px antes, 38 y 38 ahora. */
.ad-mio .ad-nav__guardados,
.ad-mio .ad-menu__enlace--entrar {
min-height: 2.375rem;
}
.ad-mio .ad-menu__enlace--entrar:hover,
.ad-mio .ad-menu__enlace--entrar.es-activo {
color: var(--acento);
background: var(--menta);
}
/* --- 6.2 · «Guardados», con transición ----------------------------
Cambiaba de color y de fondo de golpe. Es el único elemento de la
cabecera que lo hacía, y se notaba: parecía un fallo de pintado más
que una respuesta al ratón. */
.ad-nav__guardados {
transition: color var(--rapido), background-color var(--rapido);
}
/* --- 6.3 · El pie, sin doble subrayado ----------------------------
Los enlaces del pie llevan su propia línea amarilla al pasar por
encima. Pero el navegador ya subraya los enlaces por su cuenta, así
que salían las dos: el subrayado fino pegado al texto y la línea
gorda debajo. Se quita el del navegador y se queda solo el nuestro,
que es el que está pensado. */
.ad-pie a,
.ad-pie a:hover,
.ad-pie a:focus,
.ad-pie--oscuro .ad-pie__enlaces a,
.ad-pie--oscuro .ad-pie__enlaces a:hover,
.ad-pie--oscuro .ad-pie__firma a,
.ad-pie--oscuro .ad-pie__firma a:hover {
text-decoration: none;
}
/* --- 6.4 · El acordeón, sin el tirón del final --------------------
Al plegarse se paraba justo antes de cerrar del todo y luego daba un
salto. Eran dos cosas a la vez:
1 · el JavaScript cortaba a los 260 ms y la transición dura 280. En
esos 20 ms que faltaban la caja seguía teniendo altura, así que
al cerrarla de golpe se veía el salto. Ahora el JavaScript espera
al «transitionend» de verdad, así que la duración puede cambiar
aquí sin tener que tocar el JavaScript nunca más.
2 · la animación de entrada («adAbreCajon») sigue activa mientras la
caja está abierta, y al cerrar peleaba con la altura: una tiraba
hacia abajo y la otra hacia arriba. Mientras se cierra, se apaga. */
.ad-peticion.es-cerrando .ad-peticion__form {
animation: none !important;
}
/* --- 6.5 · La cabecera en el móvil --------------------------------
En pantalla estrecha el bloque de la derecha no cabía junto al logo
y se iba a su propia fila. Como lleva «margin-inline-start: auto»
para empujarlo a la derecha cuando comparte fila, al quedarse solo
ese margen lo mandaba entero al borde derecho y dejaba media fila en
blanco a la izquierda. Parecía descuadrado, y lo estaba.
Al bajar de 40rem se le quita el empujón y se reparte: los guardados
y la cuenta a un lado, el botón de publicar al otro. Se aprovecha el
ancho y desaparece el hueco. */
@media (max-width: 40rem) {
.ad-mio {
width: 100%;
margin-inline-start: 0;
/* Iba «space-between», que estaba bien mientras los iconos no llevaban
texto: repartía tres cositas pequeñas a lo ancho. Con «Mensajes» y
«Guardados» escritos, la fila ya no cabe entera, el chip de la cuenta
salta abajo y el reparto deja a los dos enlaces pegados a los bordes
opuestos con un hueco enorme en medio — como si faltara algo entre
ellos. Alineados a la izquierda se leen como lo que son: una lista. */
justify-content: flex-start;
gap: .45rem .9rem;
/* Con el bocadillo de conversaciones ya son cinco cosas en esta fila
—bocadillo, corazón, chip de la cuenta, salir y publicar— y en 390
píxeles no caben. Antes esto era «nowrap» porque con cuatro sí
cabían; ahora se deja saltar, y lo que salta es el botón de
publicar, que es lo más ancho y lo que mejor se lee a todo lo
ancho de la fila siguiente. */
flex-wrap: wrap;
}
.ad-mio .ad-btn--peque {
flex: 1 1 100%;
text-align: center;
order: 2;
}
/* El logo deja de empujar: si intenta ocupar lo que mide su texto,
obliga a la fila a partirse antes de tiempo. */
.ad-logo { flex: 1 1 auto; min-width: 0; }
.ad-logo__texto { min-width: 0; }
.ad-logo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ===================================================================
7 · EL OJITO DE LAS CONTRASEÑAS
-------------------------------------------------------------------
Un campo de contraseña que no se puede leer es la causa número uno de
«no me deja entrar»: se teclea a ciegas, con el móvil cambiando
mayúsculas por su cuenta, y a la tercera se abandona. Poder mirar lo
que has escrito arregla eso.
OJO CON EL NOMBRE: en este proyecto «.ad-ojo» YA existe y es otra cosa
—la etiqueta de la rayita amarilla que presenta cada sección—. Por eso
esto se llama «.ad-verclave» y no «.ad-ojo», que fue lo primero que
escribí y pisaba media web.
EL DIBUJO ES CSS, NO UN SVG
Así se puede animar de verdad: el párpado baja, la pupila se encoge y
aparece la rayita cruzada, todo con transiciones. Con dos SVG que se
intercambian se ve un salto, que es justo lo que no se quería.
=================================================================== */
.ad-clave {
position: relative;
display: block;
}
/* Sitio para el botón, para que el texto no pase por debajo. */
.ad-clave input {
width: 100%;
padding-inline-end: 3rem;
}
.ad-verclave {
position: absolute;
inset-block-start: 50%;
inset-inline-end: .45rem;
transform: translateY(-50%);
width: 2.3rem;
height: 2.3rem;
display: grid;
grid-template-areas: "ojo"; /* una sola casilla: los dos iconos encima */
place-items: center;
padding: 0;
color: var(--tinta50);
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: color var(--rapido), background-color var(--rapido);
}
.ad-verclave:hover { color: var(--teal); background: var(--crema); }
.ad-verclave:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 1px;
}
/* --- los dos ojos, cruzándose ------------------------------------- */
/* Aquí antes había un ojo dibujado con ::before y ::after: un cuadrado con
dos esquinas redondeadas girado 45 grados. Funcionaba, pero se notaba
que no era un icono de verdad, y en un gesto que tiene que entenderse
sin pensarlo eso importa. Ahora son los de Feather —«eye» y «eye-off»,
MIT— y viven en una sola función PHP: ojo_de_clave_html().
CÓMO SE CRUZAN
Los dos SVG están puestos a la vez, uno encima del otro en el mismo
sitio de la rejilla. Se cambia cuál se ve con opacidad, y se les añade
un giro y una escala pequeños para que el cambio tenga dirección y no
parezca un parpadeo.
Se hace así y no cambiando el «d» del path porque ese atributo no se
puede animar desde JavaScript, y quitar un SVG para meter otro da un
salto en seco. Con los dos puestos, el JavaScript solo toca
aria-pressed y de la animación se encarga el CSS. */
.ad-verclave__ico {
grid-area: ojo; /* los dos en la misma casilla */
width: 1.25rem;
height: 1.25rem;
transition: opacity .2s ease,
transform .28s cubic-bezier(.32, .72, 0, 1);
}
/* De salida: se ve el ojo abierto («púlsame para ver»). */
.ad-verclave__ico--ver { opacity: 1; transform: none; }
.ad-verclave__ico--tapar { opacity: 0; transform: rotate(-12deg) scale(.85); }
/* Pulsado: la contraseña se ve, así que el botón ofrece taparla. */
.ad-verclave[aria-pressed="true"] { color: var(--teal); }
.ad-verclave[aria-pressed="true"] .ad-verclave__ico--ver { opacity: 0; transform: rotate(12deg) scale(.85); }
.ad-verclave[aria-pressed="true"] .ad-verclave__ico--tapar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.ad-verclave__ico { transition: opacity .15s linear; transform: none !important; }
}
/* ===================================================================
8 · LA FICHA DEL PELUDO · DISEÑO A
-------------------------------------------------------------------
Dos columnas: a la izquierda todo lo que se lee, a la derecha un
carril con lo único que hay que hacer aquí —escribir a quien lo
publica— pegado arriba mientras se baja.
POR QUÉ ASÍ Y NO COMO ESTABA
El botón vivía al final de la columna de texto. En una ficha bien
escrita eso son dos pantallas de scroll: quien se convencía leyendo
tenía que volver a buscarlo, y quien llegaba decidido tenía que
leérselo todo para encontrarlo. Con el carril, la decisión está
siempre a un golpe de vista y la lectura no se corta.
El reparto es 1,55 a 1 y no mitad y mitad: la columna de texto tiene
que dar para párrafos cómodos, y el carril solo tiene que caber.
=================================================================== */
.ad-ficha {
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
/* Las fotos y el texto comparten la columna izquierda. */
.ad-ficha__fotos,
.ad-ficha__texto {
grid-column: 1;
}
.ad-ficha__carril {
grid-column: 2;
grid-row: 1 / span 2;
position: sticky;
top: 1rem;
align-self: start;
display: grid;
gap: .85rem;
padding: 1.25rem;
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-xl);
box-shadow: var(--sombra);
}
/* --- el aviso de prisa -------------------------------------------- */
.ad-carril__urge {
display: flex;
gap: .55rem;
align-items: baseline;
padding: .65rem .8rem;
font-size: .9rem;
color: #8C2A1B;
background: var(--menta);
border: 1px solid var(--salvia);
border-radius: var(--r);
}
/* --- quién lo publica --------------------------------------------- */
/* Esto era una línea de letra pequeña al final de la página, y es el
dato que decide si alguien escribe o no: no es lo mismo contestarle
a «un particular» que a «María». La inicial en un círculo cuesta
nada y convierte un dato en una persona. */
.ad-carril__quien {
display: flex;
gap: .7rem;
align-items: center;
padding-block-end: .9rem;
border-block-end: 1px solid var(--linea);
}
.ad-carril__ini {
flex: none;
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
font-weight: 800;
color: var(--sobre-claro);
background: var(--limon);
border-radius: 50%;
}
.ad-carril__cuando {
display: block;
font-size: .85rem;
color: var(--tinta50);
}
.ad-carril__yatiene {
padding: .8rem .9rem;
font-size: .92rem;
background: var(--crema);
border: 1px solid var(--linea-osc);
border-radius: var(--r);
}
/* En el carril los botones van a lo ancho y en columna: es una lista de
acciones, no una fila. */
.ad-ficha__carril .ad-ficha__acciones {
display: grid;
gap: .7rem;
margin: 0;
}
.ad-ficha__carril .ad-ficha__nota {
font-size: .84rem;
line-height: 1.5;
color: var(--tinta50);
}
.ad-carril__compartir { margin-block-start: .2rem; }
/* --- los datos, en tarjetas --------------------------------------- */
/* La lista de «campo — valor» con su rayita se leía como una factura.
En tarjetas se escanean de un vistazo, que es como se mira esto:
nadie lee los datos de un animal de arriba abajo, busca el que le
preocupa —el tamaño, si aguanta solo— y salta al siguiente. */
.ad-datos--tarjetas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: .7rem;
margin-block: 1.3rem;
}
.ad-datos--tarjetas li {
display: block;
padding: .8rem .9rem;
background: var(--tarjeta);
border: 1px solid var(--linea);
border-block-end: 1px solid var(--linea);
border-radius: var(--r);
}
.ad-datos--tarjetas span {
display: block;
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tinta50);
}
.ad-datos--tarjetas b {
display: block;
margin-block-start: .15rem;
font-size: 1rem;
}
/* --- estrecho ------------------------------------------------------ */
/* Por debajo de 62rem se apila. El carril deja de estar pegado —en una
columna sola, «sticky» no tiene sentido— y se coloca justo después
de las fotos y del titular, antes de la parrafada: en el móvil, lo
primero que hay que poder hacer es escribir. */
@media (max-width: 62rem) {
.ad-ficha { grid-template-columns: minmax(0, 1fr); }
.ad-ficha__fotos,
.ad-ficha__texto,
.ad-ficha__carril { grid-column: 1; }
.ad-ficha__carril {
position: static;
grid-row: auto;
}
}
/* ===================================================================
9 · EL CAMPO DE LA EDAD
-------------------------------------------------------------------
Número + unidad en una fila, y debajo el «no lo sé» que abre una
nota. La nota crece con animación en vez de aparecer de golpe: un
campo que salta de la nada hace que la página dé un tirón y uno
pierda de vista dónde estaba mirando.
=================================================================== */
.ad-edad__et,
.ad-campo__et {
display: block;
margin-block-end: .35rem;
font-weight: 700;
font-size: .9rem;
}
.ad-edad__fila {
display: grid;
grid-template-columns: minmax(4.5rem, 1fr) minmax(6rem, 1.1fr);
gap: .5rem;
}
.ad-edad__num { text-align: center; }
/* Fuera las flechitas del input numérico: en un campo de dos dígitos
ocupan sitio, se pulsan sin querer y en el móvil no salen igual. */
.ad-edad__num::-webkit-outer-spin-button,
.ad-edad__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ad-edad__num { -moz-appearance: textfield; appearance: textfield; }
/* Cuando se marca «no lo sé», los dos campos se apagan. Se deshabilitan
de verdad (disabled) y no solo se pintan grises: así el navegador no
los manda y no hay manera de que llegue un número contradiciendo al
«no lo sabemos». */
.ad-edad__fila input:disabled,
.ad-edad__fila select:disabled {
color: var(--tinta50);
background: var(--crema);
opacity: .65;
cursor: not-allowed;
}
.ad-edad__nose {
display: inline-flex;
gap: .45rem;
align-items: center;
margin-block-start: .6rem;
font-size: .9rem;
font-weight: 600;
color: var(--tinta70);
cursor: pointer;
}
.ad-edad__nose input { width: 1.05rem; height: 1.05rem; accent-color: var(--teal); }
/* La nota: pequeñita, en su cajita, y creciendo. */
.ad-edad__nota {
display: grid;
grid-template-rows: 0fr;
margin-block-start: 0;
overflow: hidden;
opacity: 0;
transition: grid-template-rows .28s cubic-bezier(.32, .72, 0, 1),
opacity .2s linear,
margin-block-start .28s cubic-bezier(.32, .72, 0, 1);
}
.ad-edad__nota > * { min-height: 0; }
/* «grid-template-rows: 0fr → 1fr» es el truco que permite animar hacia
«auto», que es lo que no se puede hacer con height. Sin esto habría
que medir la altura con JavaScript, y eso se descuadra en cuanto el
texto cambia de tamaño. */
.ad-edad__nota:not([hidden]) {
grid-template-rows: 1fr;
margin-block-start: .6rem;
opacity: 1;
}
.ad-edad__nota label span {
display: block;
margin-block-end: .3rem;
font-size: .82rem;
color: var(--tinta50);
}
.ad-edad__nota input { font-size: .92rem; }
@media (prefers-reduced-motion: reduce) {
.ad-edad__nota { transition: opacity .15s linear; }
}
/* ===================================================================
10 · PUBLICAR UN PELUDO · DISEÑO F
-------------------------------------------------------------------
Dos columnas: el formulario por pasos a la izquierda y, a la derecha,
la tarjeta tal y como va a salir en el tablón, montándose sola
mientras se escribe.
La duda que frena a quien publica no es «me costará mucho», es
«¿quedará bien mi anuncio?». Quien no está seguro escribe cuatro
palabras y se va. Viendo la tarjeta crecer pasa lo contrario: se
quiere rellenar el hueco que falta.
=================================================================== */
.ad-publicar__dos {
display: grid;
grid-template-columns: minmax(0, 1fr) 21rem;
gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
align-items: start;
}
.ad-previa {
position: sticky;
top: 1rem;
align-self: start;
}
.ad-previa__et {
margin-block-end: .55rem;
font-size: .82rem;
font-weight: 700;
color: var(--tinta50);
}
.ad-previa__tarjeta {
overflow: hidden;
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-xl);
box-shadow: var(--sombra);
}
.ad-previa__foto {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
font-size: .85rem;
font-weight: 600;
color: #7FA9A9;
background: linear-gradient(135deg, #D6EFF0, #BFE4E6);
background-size: cover;
background-position: center;
}
/* Cuando ya hay foto elegida, el rótulo de «aún sin foto» sobra. */
.ad-previa__foto.es-llena span { display: none; }
.ad-previa__cuerpo { padding: .9rem 1rem 1.1rem; }
.ad-previa__cuerpo h3 {
font-size: 1.2rem;
letter-spacing: -.02em;
}
.ad-previa__sub {
margin-block-start: .15rem;
font-size: .88rem;
color: var(--tinta50);
}
.ad-previa__desc {
margin-block-start: .55rem;
font-size: .9rem;
color: var(--tinta70);
}
/* Los huecos que faltan, en cursiva y apagados. Están escritos para que
den ganas de rellenarlos, no para regañar: «falta contar cómo es…» y
no «campo obligatorio». */
.ad-previa__vacio {
font-style: italic;
font-weight: 400;
color: #9BB3B3;
}
.ad-previa__chips {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-block-start: .7rem;
}
.ad-previa__chips:empty { margin-block-start: 0; }
.ad-previa__pie {
margin-block-start: .7rem;
font-size: .82rem;
color: var(--tinta50);
}
/* --- estrecho ------------------------------------------------------ */
/* Por debajo de 68rem la previa se va arriba del formulario y deja de
estar pegada. Arriba y no abajo a propósito: enseñar cómo va
quedando solo sirve si se ve mientras se escribe, y una tarjeta al
final de un formulario de tres pasos no la ve nadie. */
@media (max-width: 68rem) {
.ad-publicar__dos { grid-template-columns: minmax(0, 1fr); }
.ad-previa {
position: static;
order: -1;
max-width: 22rem;
}
}
/* ===================================================================
11 · REMATES: ÉNFASIS OSCURO, PREVIA Y SEPARACIONES
=================================================================== */
/* --- 11.1 · «Ya nos escribiste por Trufa», en oscuro ---------------
Este mensaje contesta a la pregunta más urgente que trae quien vuelve
a la ficha: «¿se envió lo mío o no?». Estaba pintado como un aviso
más —fondo clarito, letra normal— y se perdía entre el resto de
cajas de la página.
En oscuro no compite con nada: es lo primero que ve el ojo al entrar,
que es exactamente lo que hace falta aquí. Y de paso el botón amarillo
de dentro pasa a ser el único punto de color fuerte del bloque. */
.ad-yaesta.ad-aviso--bien {
color: #DCF0F0;
background: var(--teal-osc);
border: 0;
padding: 1.2rem 1.3rem;
border-radius: var(--r-xl);
box-shadow: var(--sombra);
}
.ad-yaesta.ad-aviso--bien b {
display: block;
margin-block-end: .2rem;
font-size: 1.1rem;
color: var(--blanco);
}
/* Los botones de dentro, sobre oscuro. El de línea era gris sobre gris
y no se veía; aquí va con borde claro. */
.ad-yaesta .ad-btn--teal {
color: var(--sobre-claro);
background: var(--limon);
}
.ad-yaesta .ad-btn--teal:hover { background: #FFECAF; }
.ad-yaesta .ad-btn--linea {
color: #DCF0F0;
background: transparent;
border-color: rgba(220, 240, 240, .45);
}
.ad-yaesta .ad-btn--linea:hover {
color: var(--blanco);
border-color: var(--blanco);
background: rgba(255, 255, 255, .08);
}
/* --- 11.2 · La previa, sin desbordarse ----------------------------
Escribiendo mucho, el texto se salía por la derecha de la tarjeta.
Eran dos cosas: una palabra larga sin espacios no se parte sola, y la
descripción no tenía tope de líneas.
Se corta a cuatro líneas con «line-clamp» —que es lo que hace la
tarjeta de verdad del tablón, así que la previa no miente— y se
fuerza a partir palabras imposibles. El nombre, a una línea con
puntos suspensivos: un nombre de animal no ocupa dos renglones. */
.ad-previa__cuerpo h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.ad-previa__sub {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ad-previa__desc {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.ad-previa__chips { max-width: 100%; }
.ad-previa__chips .ad-pastilla-fija { max-width: 100%; overflow-wrap: anywhere; }
/* --- 11.3 · Aire antes de «¿Con quién se lleva bien?» --------------
El bloque venía pegado a los rasgos de salud de arriba y los dos se
leían como una sola lista larga, cuando son dos preguntas distintas:
una es «qué le han hecho» y otra «con quién puede vivir». */
.ad-convivencia {
margin-block-start: var(--sec-peq, 2rem);
}
.ad-convive.ad-marcas {
margin-block-start: 2rem;
}
/* --- 11.4 · Elegir la foto de portada ------------------------------
La primera foto es la que sale en el tablón, y era la primera que
hubieras elegido, sin poder cambiarla. Eso importa: la foto de la
tarjeta decide si alguien pincha o pasa de largo, y muchas veces la
buena es la tercera.
El botón sale al pasar por encima y en las pantallas táctiles se
queda fijo, porque ahí no hay «pasar por encima». */
.ad-mini-foto { position: relative; }
.ad-mini-foto.es-portada {
outline: 2.5px solid var(--teal);
outline-offset: 1px;
border-radius: var(--r);
}
.ad-mini-foto__sello {
position: absolute;
inset-block-start: .35rem;
inset-inline-start: .35rem;
padding: .2rem .5rem;
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--blanco);
background: var(--teal);
border-radius: var(--pastilla);
pointer-events: none;
}
.ad-mini-foto__portada {
position: absolute;
inset-inline: .35rem;
inset-block-end: .35rem;
padding: .35rem .4rem;
font: inherit;
font-size: .72rem;
font-weight: 700;
color: var(--tinta);
background: rgba(255, 255, 255, .94);
border: 0;
border-radius: var(--r);
cursor: pointer;
opacity: 0;
transform: translateY(.25rem);
transition: opacity var(--rapido), transform var(--rapido), background-color var(--rapido);
}
.ad-mini-foto:hover .ad-mini-foto__portada,
.ad-mini-foto:focus-within .ad-mini-foto__portada {
opacity: 1;
transform: none;
}
.ad-mini-foto__portada:hover { background: var(--limon); }
/* En táctil no existe el «pasar por encima»: si el botón solo apareciera
ahí, en el móvil no habría manera de cambiar la portada. */
@media (hover: none) {
.ad-mini-foto__portada { opacity: 1; transform: none; }
}
/* ===================================================================
12 · EL CHAT ENTRE LAS DOS PARTES
-------------------------------------------------------------------
Antes el circuito era: alguien se interesa → llega a la tienda → la
tienda habla con los dos por separado → la tienda los presenta.
Funciona, pero mete a una persona en medio de cada adopción y cada
paso son horas o días. Lo que se pierde por el camino no son
mensajes: son adopciones que no pasan.
Ahora hablan ellos y la tienda mira.
=================================================================== */
.ad-charla { max-width: 46rem; padding-block: var(--sec); }
.ad-charla__volver { margin-block-end: 1rem; font-size: .9rem; }
.ad-charla__volver a { color: var(--tinta50); font-weight: 600; }
.ad-charla__volver a:hover { color: var(--teal); }
/* --- de quién y con quién --------------------------------------- */
/* Siempre a la vista. En un hilo largo, sin esto uno acaba sin saber si
está hablando de Trufa o de Ares — y quien lleva varios animales
publicados los tiene todos abiertos a la vez. */
.ad-charla__cabeza {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
padding: 1rem 1.2rem;
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-xl);
}
.ad-charla__foto {
flex: none;
width: 3.6rem;
height: 4.5rem;
object-fit: cover;
background: var(--crema);
border-radius: var(--r);
}
.ad-charla__foto--sin { background: linear-gradient(135deg, #D6EFF0, #BFE4E6); }
.ad-charla__cabeza h1 { font-size: 1.6rem; margin-block-start: .1rem; }
.ad-charla__sub { font-size: .9rem; color: var(--tinta50); }
.ad-charla__ficha { margin-inline-start: auto; }
/* --- el aviso de privacidad -------------------------------------- */
/* Es lo que hace que la gente escriba tranquila. Se dice UNA vez, al
principio del hilo: repetirlo en cada mensaje sería ruido y acabaría
sin leerse, que es lo que le pasa a la letra pequeña. */
.ad-charla__privado {
margin-block: 1rem;
padding: .9rem 1.1rem;
font-size: .9rem;
line-height: 1.6;
color: var(--turq-osc);
background: var(--menta-ok);
border: 1px solid var(--menta-ok-linea);
border-radius: var(--r);
}
/* --- el hilo ------------------------------------------------------ */
.ad-charla__hilo {
display: grid;
gap: .8rem;
margin-block: 1.4rem;
}
.ad-globo {
max-width: 85%;
padding: .85rem 1.05rem;
background: var(--tarjeta);
border: 1px solid var(--linea);
border-radius: var(--r-lg);
}
/* Los míos a la derecha y en color; los suyos a la izquierda y en
blanco. Es la convención de cualquier chat del mundo, y aquí importa
más que en otros sitios: mucha de esta gente no es nativa digital, y
lo único que conocen seguro es WhatsApp. */
.ad-globo--mio {
justify-self: end;
color: #E8F6F6;
background: var(--teal);
border-color: var(--teal);
border-end-end-radius: .35rem;
}
.ad-globo--suyo {
justify-self: start;
border-end-start-radius: .35rem;
}
/* Cuando escribe la tienda se ve distinto a propósito: las dos partes
tienen que saber que ahí ha hablado la casa y no el otro. */
.ad-globo--tienda {
justify-self: center;
max-width: 100%;
color: var(--sobre-claro);
background: var(--limon-cl);
border-color: var(--limon-linea);
}
/* El primero se marca con el borde discontinuo, no con el color ni con el
lado: el lado y el color ya dicen quién habla, y si el primero los
cambiara, el hilo se leería como si lo hubiera escrito otra persona. */
.ad-globo--primero { border-style: dashed; }
/* Cuando es del otro, además va sobre crema, para que se note que es el
mensaje que abrió todo. En el propio no hace falta: ya es de color. */
.ad-globo--primero.ad-globo--suyo { background: var(--crema); }
.ad-globo__quien {
display: flex;
gap: .5rem;
align-items: center;
flex-wrap: wrap;
margin-block-end: .35rem;
font-size: .82rem;
font-weight: 700;
}
.ad-globo__nombre { min-width: 0; }
.ad-globo__cuando { font-weight: 400; opacity: .72; }
/* La cara, dentro de la línea del nombre. Un poco más chica que el avatar
normal: aquí acompaña, no manda. */
.ad-globo__cara .ad-avatar,
.ad-globo__cara.ad-avatar { width: 1.5rem; height: 1.5rem; font-size: .65rem; }
/* Sobre el globo de color hace falta un filo claro o la cara se funde con
el fondo teal. */
.ad-globo--mio .ad-globo__cara .ad-avatar,
.ad-globo--mio .ad-globo__cara.ad-avatar { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
/* LA RAYA QUE SEPARA LOS DÍAS.
Una conversación de tres semanas sin esto es un muro de textos con una
fecha diminuta en cada uno que no lee nadie. Y en una adopción el paso del
tiempo es información: un silencio de dos semanas significa algo. */
.ad-charla__dia {
display: flex;
gap: .8rem;
align-items: center;
margin: .6rem 0 .2rem;
font-size: .78rem;
font-weight: 700;
color: var(--tinta50);
text-align: center;
}
.ad-charla__dia::before,
.ad-charla__dia::after {
content: "";
flex: 1;
height: 1px;
background: var(--linea);
}
.ad-charla__dia span {
padding: .15rem .7rem;
background: var(--crema-cl);
border-radius: var(--pastilla);
}
.ad-globo__texto { font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.ad-globo__et {
display: inline-block;
margin-block-start: .5rem;
font-size: .75rem;
font-weight: 600;
color: var(--tinta50);
}
/* Sobre el globo de color, el gris de la etiqueta no se lee: quedaba un
texto marrón oscuro sobre teal. Va con el mismo tono claro que el resto
del globo, bajado de opacidad para que siga siendo una nota al pie y no
compita con el mensaje. */
.ad-globo--mio .ad-globo__et {
color: #BFE6E7;
opacity: .9;
}
.ad-charla__nadie {
padding: 1.4rem;
text-align: center;
color: var(--tinta50);
background: var(--crema);
border-radius: var(--r-lg);
}
/* --- escribir ----------------------------------------------------- */
.ad-charla__form {
padding: 1rem 1.2rem;
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-xl);
}
.ad-charla__form textarea { width: 100%; resize: vertical; }
.ad-charla__enviar {
display: flex;
gap: .8rem;
align-items: center;
flex-wrap: wrap;
margin-block-start: .7rem;
}
.ad-charla__nota { font-size: .85rem; color: var(--tinta50); }
/* --- la lista de conversaciones en «seguir el mío» ---------------- */
.ad-charlas { margin-block: var(--sec); }
.ad-charlas h2 { font-size: 1.3rem; }
.ad-charlas__intro { margin-block: .4rem 1rem; color: var(--tinta50); max-width: 60ch; }
.ad-charlas__lista { display: grid; gap: .6rem; }
.ad-charla-fila {
display: flex;
gap: .8rem;
align-items: center;
flex-wrap: wrap;
padding: .8rem 1rem;
background: var(--tarjeta);
border: 1px solid var(--linea);
border-radius: var(--r-lg);
}
/* Con algo sin leer, la fila entera se marca. Un puntito pequeño en una
lista de quince filas no lo ve nadie. */
.ad-charla-fila.es-nueva {
border-color: var(--teal);
box-shadow: inset 3px 0 0 var(--teal);
}
/* Ya no pinta una letra: lleva dentro el avatar de quien pregunta (su foto,
o sus iniciales con su color). Con quince conversaciones abiertas, quince
círculos con letras se parecen todos. */
.ad-charla-fila__ini {
flex: none;
display: grid;
place-items: center;
}
.ad-charla-fila__texto { flex: 1 1 12rem; min-width: 0; }
.ad-charla-fila__texto small { display: block; font-size: .85rem; color: var(--tinta50); }
.ad-charla-fila .ad-btn { margin-inline-start: auto; }
.ad-pregunta__acciones {
display: flex;
gap: .5rem;
align-items: center;
flex-wrap: wrap;
margin-inline-start: auto;
}
@media (max-width: 40rem) {
/* EN EL MÓVIL LOS LADOS SIGUEN SIENDO LADOS.
Estaba en el 95 % y con eso los dos lados quedaban casi pegados a los
dos bordes: la diferencia era de unos pocos píxeles y no se leía como
un chat. Con el 82 % hay un escalón claro, que es lo que hace que se
entienda de un vistazo quién ha dicho qué — igual que en WhatsApp,
que es la referencia que tiene todo el mundo. */
.ad-globo { max-width: 82%; }
.ad-charla__ficha { margin-inline-start: 0; }
.ad-charla-fila .ad-btn,
.ad-pregunta__acciones { margin-inline-start: 0; width: 100%; }
.ad-pregunta__acciones .ad-btn { flex: 1; text-align: center; }
}
/* --- 12.1 · El bocadillo de conversaciones en la cabecera ----------
Al lado del corazón y con la misma forma: son las dos cosas que le
pertenecen a quien mira y que cambian solas mientras no está.
Aquí importa más que en el corazón, eso sí. Un guardado no caduca;
un mensaje sin contestar, sí: quien pregunta por un animal espera
respuesta en horas, y si no la ve se va a otro sitio. */
.ad-nav__charlas {
position: relative;
display: inline-flex;
align-items: center;
gap: .4rem;
min-height: 2.375rem; /* la misma altura que «Guardados» y «Entrar» */
padding: .45rem .7rem;
font-size: .9rem;
font-weight: 600;
color: var(--tinta50);
white-space: nowrap;
border-radius: var(--pastilla);
transition: color var(--rapido), background-color var(--rapido);
}
.ad-nav__charlas:hover { color: var(--teal); background: var(--crema); }
/* Solo para lectores de pantalla: se lleva el texto fuera de la vista sin
esconderlo del todo. Con «display:none» el lector tampoco lo lee, y
entonces el botón se anuncia como «enlace» a secas.
No es un detalle menor aquí: el bocadillo va sin palabra al lado del
corazón, así que sin esto habría dos enlaces seguidos que un lector de
pantalla no sabe distinguir. */
.ad-solo-lectores {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.ad-nav__charlas.es-activo { color: var(--teal); }
.ad-nav__charlas svg { width: 1.15rem; height: 1.15rem; }
/* Con mensajes sin leer, el icono se pone del color de la marca: el
número solo no basta, porque el número está en un círculo pequeño y
en un móvil eso son cuatro píxeles. */
.ad-nav__charlas:has([data-ad-mensajes]:not([hidden])) { color: var(--teal); }
/* El bocadillo va SIN palabra en todos los tamaños: solo el icono y el
número, como el corazón. Un bocadillo con un número encima se entiende
en cualquier idioma, y la palabra le quitaba sitio a las secciones, que
esas sí necesitan leerse. */
.ad-nav__charlas { padding-inline: .55rem; gap: .3rem; }
/* ===================================================================
13 · REMATES DE «SEGUIR EL MÍO» Y DEL FORMULARIO
=================================================================== */
/* --- 13.1 · Lo publicado, en el móvil ------------------------------
Se veía una tarjeta y media cortada por casualidad, según lo largo
que fuera el nombre. Ahora es a propósito: cada tarjeta mide el 62 %
del ancho, así que siempre se ve una entera y media asomando. Ese
medio es lo único que le dice a alguien que hay más y que se puede
arrastrar — sin él, la gente cree que solo tiene un animal
publicado. */
@media (max-width: 48rem) {
.ad-mias ul {
scroll-snap-type: x mandatory;
scroll-padding-inline-start: var(--lado);
/* El scroll sale hasta el borde de la pantalla aunque el contenido
esté dentro del margen: si la tira acaba donde acaba el texto, el
medio que asoma queda cortado por un espacio en blanco y parece
un fallo, no una tira. */
margin-inline: calc(var(--lado) * -1);
padding-inline: var(--lado);
}
.ad-mias li {
flex: 0 0 62%;
scroll-snap-align: start;
}
.ad-mias a { width: 100%; }
}
/* --- 13.2 · El estado, sin salirse de la tarjeta -------------------
«Publicado en el tablón» es más largo que la tarjeta y se salía por
la derecha. Con puntos suspensivos se queda dentro y el estado
completo sigue en el «title», para quien lo necesite. */
.ad-mias a > span {
min-width: 0; /* sin esto, un hijo de flex no se deja encoger */
overflow: hidden;
}
.ad-mias b,
.ad-mias small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- 13.3 · El «no lo sé» solo ocupa lo que ocupa ------------------
La etiqueta era un bloque de ancho completo, así que un clic en
cualquier punto vacío de esa línea marcaba la casilla. En el móvil
pasaba constantemente: se toca fuera del campo de la edad para
quitar el teclado y se activaba el «no lo sé» sin querer, borrando
lo que se acababa de escribir.
Con «width: fit-content» la zona sensible es la casilla y su texto,
y ni un píxel más. */
.ad-edad__nose {
width: fit-content;
max-width: 100%;
}
/* --- 13.4 · Aire antes de «¿Corre prisa de verdad?» ---------------- */
.ad-marcas + .ad-marcas,
.ad-caracter + .ad-marcas {
margin-block-start: 2rem;
}
/* --- 13.5 · El botón de «vamos con las fotos», con aire ------------ */
.ad-pasos__botones {
margin-block-start: 2rem;
padding-block-start: 1.4rem;
border-block-start: 1px solid var(--linea);
}
/* --- 13.6 · Botones sueltos, centrados ---------------------------- */
/* «Ver a los que todavía esperan» quedaba pegado a la izquierda debajo
de una rejilla centrada, y se leía como si se hubiera caído ahí. */
.ad-vuelta {
display: flex;
justify-content: center;
margin-block-start: var(--sec);
}
/* --- 13.7 · QUE LA PÁGINA NO SALTE AL MARCAR UNA CASILLA ----------
Pasaba en varios sitios y siempre por lo mismo: al marcar algo, lo
que hay debajo cambia de alto —se abre una nota, se actualiza la
vista previa, aparece un aviso— y el navegador mantiene la posición
del scroll respecto al DOCUMENTO, no respecto a lo que estás
mirando. Resultado: el contenido se mueve bajo el dedo.
«scroll-behavior: auto» no lo arregla. Lo que sí lo arregla es
decirle al navegador que ancle el scroll a lo que ya se está viendo,
que es exactamente para lo que existe overflow-anchor. Está activado
de serie, pero cualquier «overflow» en un ancestro lo desactiva sin
avisar, y aquí hay unos cuantos. Se vuelve a encender a mano. */
html { overflow-anchor: auto; }
.ad-form,
.ad-form__fila,
.ad-marcas,
.ad-publicar__dos,
.ad-filtros__caja { overflow-anchor: auto; }
/* Y la vista previa se reserva su sitio: es lo que más cambiaba de alto
mientras se escribe, porque el texto crece línea a línea. Con un alto
mínimo, el formulario de al lado deja de moverse. */
@media (min-width: 68.0625em) {
.ad-previa__tarjeta { min-height: 24rem; }
}
/* ===================================================================
14 · LOS FILTROS EN EL MÓVIL: UN CAJÓN LATERAL
-------------------------------------------------------------------
En pantalla ancha los filtros viven en su columna y se ven siempre,
que es lo suyo. En el móvil no caben, así que hasta ahora se plegaban
hacia abajo — y eso tiene dos problemas gordos:
· El botón ocupaba una línea entera para él solo, debajo del
buscador. Dos renglones para dos controles que van juntos.
· Al desplegar, los filtros empujaban la lista de animales fuera
de la pantalla. Se elegía a ciegas y había que volver a subir
para cerrar y ver el resultado.
Un cajón lateral resuelve las dos: el botón cabe al lado del
buscador, y los filtros se abren ENCIMA sin mover nada de debajo.
Es lo que hace cualquier tienda en el móvil, y por esto mismo.
Se abre al 80 % del ancho, con tope de 24rem. No al 100 %: ese trozo
de página que se ve al lado es lo que dice «esto está encima y se
cierra», y además da dónde tocar para cerrarlo.
=================================================================== */
@media (max-width: 62rem) {
/* El buscador y el botón, en la misma línea.
-----------------------------------------------------------------
Los selectores llevan «.ad-tablon» delante por una razón concreta:
más arriba hay un «.ad-tablon.es-plegado .ad-filtros» que pone
«flex-wrap: wrap». Tres clases pesan más que una, y en CSS la
especificidad gana al orden — así que aunque esto esté al final del
archivo, sin igualar el peso el botón seguía saltando a la línea de
abajo. Es el mismo tropiezo que hubo con el banner de la portada.
Y HAY UN TERCERO PEOR, que costó encontrar:
.ad-tablon:has(#ad-panel-filtros[hidden]) .ad-filtros
«:has()» toma la especificidad de su argumento MÁS específico, y ahí
dentro hay un ID. O sea que ese selector pesa (1,1,0) y le gana a
cualquier combinación de clases por muchas que se pongan. La única
forma de empatarle es repetirlo, que es lo que se hace aquí. */
.ad-tablon .ad-filtros,
.ad-tablon.es-plegado .ad-filtros,
.ad-tablon:has(#ad-panel-filtros[hidden]) .ad-filtros {
display: flex;
flex-wrap: nowrap;
gap: .5rem;
align-items: center;
}
.ad-tablon .ad-buscar,
.ad-tablon.es-plegado .ad-buscar,
.ad-tablon:has(#ad-panel-filtros[hidden]) .ad-buscar { flex: 1 1 auto; min-width: 0; }
.ad-tablon .ad-filtros__abrir,
.ad-tablon.es-plegado .ad-filtros__abrir,
.ad-tablon:has(#ad-panel-filtros[hidden]) .ad-filtros__abrir {
flex: none;
width: auto;
padding-inline: .8rem;
}
/* La palabra «Filtrar» se va si aprieta: el icono con el número al
lado se entiende igual y libera el sitio que necesita el buscador,
que es donde de verdad se escribe. */
@media (max-width: 26rem) {
.ad-filtros__abrir > span:nth-of-type(1) { display: none; }
}
/* La flecha de «desplegar» sobra: ya no despliega hacia abajo. */
.ad-filtros__flecha { display: none; }
/* --- el cajón --- */
.ad-filtros__panel {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: 60;
width: min(80vw, 24rem);
padding: 1.2rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain; /* al llegar al final no arrastra la página */
background: var(--fondo);
border-inline-start: 1px solid var(--linea-osc);
box-shadow: -18px 0 40px -20px rgba(18, 41, 41, .35);
transform: translateX(100%);
transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
/* Abierto = sin el atributo «hidden». Se usa el mismo estado que ya
maneja el JavaScript en vez de inventar una clase nueva: dos formas
de decir «está abierto» se desincronizan a la primera. */
.ad-filtros__panel:not([hidden]) { transform: none; }
/* «hidden» lo esconde del todo y entonces no se puede animar la
salida; se le devuelve el display y se le quita del paso con la
visibilidad, que sí espera a que acabe la transición. */
.ad-filtros__panel[hidden] {
display: grid;
visibility: hidden;
transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s .28s;
}
/* El velo. Es hijo del panel para no tocar el HTML: se pinta con un
pseudoelemento del propio tablón cuando el panel está abierto. */
.ad-tablon:has(.ad-filtros__panel:not([hidden]))::after {
content: "";
position: fixed;
inset: 0;
z-index: 55;
background: rgba(18, 41, 41, .45);
backdrop-filter: blur(2px);
}
/* Con el cajón abierto, la página de detrás no se mueve. Si se deja
desplazar, al cerrar apareces en otro sitio del tablón. */
body:has(.ad-filtros__panel:not([hidden])) { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
.ad-filtros__panel { transition: none; }
}
/* Y en el móvil, fuera las View Transitions de los filtros.
-------------------------------------------------------------------
Existen para el cambio bonito de escritorio: la barra de búsqueda
viaja de arriba a la izquierda y el panel se despliega. En el cajón
lateral estorban: el navegador intenta mover una pieza que ahora es
fija y a pantalla completa, y sale un barrido raro por encima de
todo. El cajón ya tiene su propia animación, que es la que toca. */
@media (max-width: 62rem) {
.ad-filtros,
.ad-buscar,
.ad-filtros__abrir,
.ad-resultados,
.ad-filtros__panel { view-transition-name: none; }
}
/* ===================================================================
15 · REMATES DE MÓVIL EN LA FICHA Y LA PORTADA
=================================================================== */
/* --- 15.1 · Guardar y compartir, mitad y mitad -------------------- */
.ad-carril__dos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .6rem;
align-items: stretch;
}
/* El formulario del corazón es un envoltorio: se estira para que su
botón ocupe su mitad entera, igual que el de compartir. */
.ad-carril__dos .ad-guardar { display: grid; margin: 0; }
.ad-carril__dos .ad-guardar__boton,
.ad-carril__dos .ad-carril__compartir {
width: 100%;
min-height: 3rem;
margin: 0;
justify-content: center;
}
.ad-carril__compartir { margin-block-start: 0; }
/* En pantallas muy estrechas, «Guardado» y «Compartir» juntos aprietan;
se les baja la letra antes de partirlas en dos líneas. */
@media (max-width: 24rem) {
.ad-carril__dos .ad-guardar__boton,
.ad-carril__dos .ad-carril__compartir { font-size: .88rem; }
}
/* --- 15.2 · La descripción, sin salirse por la derecha ------------
Una palabra larga sin espacios —un nombre compuesto, una dirección
pegada, «Palabraquenosepuedepartir»— no la parte el navegador por su
cuenta, así que se salía de la pantalla y arrastraba la página
entera. Pasa sobre todo en el móvil, que es donde menos ancho hay.
«anywhere» y no «break-word»: break-word solo parte cuando la
palabra no cabe NI en una línea entera para ella sola, y aquí eso
llega tarde. */
.ad-descripcion,
.ad-globo__texto,
.ad-charla__sub,
.ad-quien {
overflow-wrap: anywhere;
word-break: break-word;
}
.ad-descripcion { max-width: 100%; }
/* --- 15.3 · «No puede esperar», en una sola frase -----------------
Era un flex con hueco entre los trozos, así que el reloj, el «no
puede esperar» y la frase se separaban cada uno por su lado — y en
el móvil, al partirse en varias líneas, quedaba como tres cosas
sueltas dentro de un recuadro rojo.
No hace falta ningún flex: es una frase con un icono delante. Se
pinta como texto normal y se acabó. */
.ad-carril__urge {
display: block;
line-height: 1.55;
text-wrap: pretty;
}
.ad-carril__urge > span:first-child {
margin-inline-end: .35rem;
}
.ad-carril__urge b { white-space: nowrap; }
/* --- 15.4 · El contador de «ya tienen casa» ------------------------
Es una pastilla con el texto dentro. En el móvil el texto se parte
en dos o tres líneas y una pastilla de bordes completamente redondos
con tres renglones dentro se ve deformada: los bordes se comen las
esquinas del texto.
Con radio normal en pantalla estrecha vuelve a parecer lo que es —un
aviso con su enlace— y la flecha se queda pegada a la última palabra
para que no caiga sola en un renglón. */
.ad-portada__casas a { text-wrap: pretty; }
.ad-portada__casas .ad-portada__flecha { white-space: nowrap; }
@media (max-width: 40rem) {
/* Ojo: «block», no «flex». Le puse flex aquí y volví a romper lo
mismo que estaba arreglando arriba — en un flex, cada trozo de
texto suelto es un elemento independiente y la frase se despedaza.
Aquí solo hace falta que ocupe el ancho y que el radio deje de ser
una pastilla, porque una pastilla con tres renglones dentro se ve
deformada. */
.ad-portada__casas a {
display: block;
width: 100%;
padding: .7rem .9rem;
border-radius: var(--r);
text-align: start;
}
}
/* ===================================================================
16 · LA FICHA DE CASA DE QUIEN ADOPTA
-------------------------------------------------------------------
Siete preguntas de un toque, con la ficha del peludo al lado. Lo
pidió una protectora: recibían un «me interesa» y no sabían nada de
esa persona.
=================================================================== */
.ad-micasa { padding-block: var(--sec); }
.ad-micasa__dos {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
align-items: start;
}
.ad-micasa__cabeza { margin-block-end: 1.4rem; }
.ad-micasa__cabeza h1 { font-size: 1.9rem; }
.ad-micasa__cabeza p { margin-block-start: .5rem; color: var(--tinta50); max-width: 58ch; }
/* El aviso de «vas a escribirle a quien cuida a Ares». Es lo que
explica por qué se pregunta esto justo aquí y no en el registro. */
.ad-micasa__aviso {
display: flex;
gap: .7rem;
align-items: flex-start;
padding: .9rem 1.1rem;
margin-block-end: 1.3rem;
font-size: .93rem;
line-height: 1.6;
color: var(--sobre-claro);
background: var(--limon-cl);
border: 1px solid var(--limon-linea);
border-radius: var(--r);
}
.ad-micasa__aviso > span:first-child { font-size: 1.2rem; line-height: 1.3; }
/* --- las preguntas --- */
.ad-micasa__grupo {
padding: 1.1rem 1.2rem;
margin: 0 0 .9rem;
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
}
.ad-micasa__grupo legend {
padding: 0;
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -.01em;
}
.ad-micasa__ayuda {
margin-block: .25rem .9rem;
font-size: .87rem;
line-height: 1.55;
color: var(--tinta50);
}
.ad-micasa__ops {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: .6rem;
}
/* CADA OPCIÓN ES LA ETIQUETA ENTERA, y el radio va escondido dentro.
Así se pulsa en cualquier punto del recuadro, que en el móvil es la
diferencia entre acertar y no acertar. El radio no se quita con
«display:none» —eso lo saca del teclado y de los lectores de
pantalla— sino que se hace transparente y se deja encima. */
.ad-micasa__op {
position: relative;
display: grid;
place-items: center;
gap: .1rem;
padding: .85rem .7rem;
text-align: center;
font-weight: 600;
font-size: .92rem;
background: var(--fondo);
border: 2px solid var(--linea-osc);
border-radius: var(--r);
cursor: pointer;
transition: border-color var(--rapido), background-color var(--rapido),
box-shadow var(--rapido);
}
.ad-micasa__op input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.ad-micasa__ico { font-size: 1.5rem; line-height: 1.2; }
.ad-micasa__op small { font-weight: 400; font-size: .78rem; color: var(--tinta50); }
.ad-micasa__op:hover { border-color: var(--turq-osc); }
/* Marcada. Se pinta con «:has()» para que responda al instante al
pulsar, y además con la clase que pone el PHP para cuando se vuelve
a la página con lo ya contestado. */
.ad-micasa__op:has(input:checked),
.ad-micasa__op.es-puesta {
background: var(--crema-cl);
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(0, 107, 110, .1);
}
/* Y esta línea es la que evita un fallo de los que se descubren tarde:
la clase «es-puesta» la pinta el servidor y no se entera de que has
cambiado de opción. Sin esto, al pulsar otra quedarían dos marcadas. */
.ad-micasa__ops:has(input:checked) .ad-micasa__op.es-puesta:not(:has(input:checked)) {
background: var(--fondo);
border-color: var(--linea-osc);
box-shadow: none;
}
.ad-micasa__op:has(input:focus-visible) {
outline: 2px solid var(--turq-osc);
outline-offset: 2px;
}
.ad-micasa__grupo textarea {
width: 100%;
resize: vertical;
font: inherit;
font-size: .95rem;
padding: .7rem .85rem;
color: var(--tinta);
background: #fff;
border: 1.5px solid var(--linea-osc);
border-radius: var(--r);
}
.ad-micasa__pie {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin-block-start: 1.2rem;
}
.ad-micasa__saltar { font-size: .9rem; color: var(--tinta50); text-decoration: underline; }
.ad-micasa__saltar:hover { color: var(--teal); }
/* --- la columna de al lado --- */
.ad-micasa__lado {
position: sticky;
top: 1rem;
align-self: start;
padding: 1.1rem;
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--r-xl);
}
.ad-micasa__foto {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
margin-block-end: .7rem;
background: linear-gradient(135deg, #D6EFF0, #BFE4E6);
border-radius: var(--r);
}
.ad-micasa__nombre { display: block; font-size: 1.15rem; }
.ad-micasa__barra {
height: .45rem;
margin-block: .7rem .4rem;
overflow: hidden;
background: #fff;
border-radius: var(--pastilla);
}
.ad-micasa__barra i {
display: block;
height: 100%;
background: var(--teal);
border-radius: var(--pastilla);
transition: width .3s cubic-bezier(.32, .72, 0, 1);
}
.ad-micasa__nota {
margin-block-start: .9rem;
font-size: .84rem;
line-height: 1.6;
color: var(--tinta70);
}
@media (max-width: 62rem) {
.ad-micasa__dos { grid-template-columns: minmax(0, 1fr); }
/* El peludo, ARRIBA en el móvil. Es el motivo por el que se está
contestando: puesto al final no lo ve nadie. */
.ad-micasa__lado { position: static; order: -1; }
.ad-micasa__foto { max-width: 12rem; }
}
/* ===================================================================
17 · EL PANEL DE ENCAJE · lo que ve quien publicó
-------------------------------------------------------------------
La razón de ser de todo lo anterior. Va arriba del hilo, porque se
lee ANTES de contestar, que es cuando sirve. Y se pliega solo a
partir del tercer mensaje: para entonces ya se ha leído y estorba.
NO HAY PUNTUACIÓN, y es a propósito. Un «87 % compatible» sería
inventarse una precisión que no existe, y lo peor: una nota alta
hace que se dejen de leer los detalles, que es justo donde está el
problema si lo hay.
=================================================================== */
.ad-encaje {
margin-block-end: 1.2rem;
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-xl);
overflow: hidden;
}
.ad-encaje summary {
display: flex;
gap: .8rem;
align-items: center;
padding: .95rem 1.1rem;
cursor: pointer;
list-style: none;
}
.ad-encaje summary::-webkit-details-marker { display: none; }
.ad-encaje__marca {
flex: none;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
font-weight: 800;
color: var(--blanco);
border-radius: 50%;
}
.ad-encaje__resumen b { display: block; font-size: .98rem; }
.ad-encaje__resumen > span { display: block; font-size: .87rem; color: var(--tinta50); }
/* Los tres tonos del resumen. El del medio es el que más sale, y es
el que evita que esto haga daño: «ojo» no dice «malo», dice «esto
es lo que hay que preguntar». */
.ad-encaje--si { border-color: var(--menta-ok-linea); }
.ad-encaje--si .ad-encaje__marca { background: #0A7D32; }
.ad-encaje--ojo { border-color: var(--limon-linea); }
.ad-encaje--ojo .ad-encaje__marca { background: #B58900; }
.ad-encaje--no { border-color: var(--salvia); }
.ad-encaje--no .ad-encaje__marca { background: var(--acento); }
.ad-encaje__cuerpo {
padding: 0 1.1rem 1.1rem;
border-block-start: 1px solid var(--linea);
padding-block-start: 1rem;
}
.ad-encaje__lista { display: grid; gap: .5rem; }
.ad-encaje__f {
display: grid;
grid-template-columns: 1.5rem 1fr;
gap: .7rem;
align-items: start;
padding: .7rem .85rem;
background: var(--fondo);
border: 1px solid var(--linea);
border-radius: var(--r);
}
.ad-encaje__f b { display: block; font-size: .92rem; }
.ad-encaje__f > span > span { font-size: .87rem; line-height: 1.55; color: var(--tinta50); }
.ad-encaje__f span b { display: inline; font-weight: 700; color: var(--tinta70); }
.ad-encaje__ico {
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
font-size: .85rem;
font-weight: 800;
color: var(--blanco);
border-radius: 50%;
}
.ad-encaje__f--si { background: var(--menta-ok); border-color: var(--menta-ok-linea); }
.ad-encaje__f--si .ad-encaje__ico { background: #0A7D32; }
.ad-encaje__f--ojo { background: var(--limon-cl); border-color: var(--limon-linea); }
.ad-encaje__f--ojo .ad-encaje__ico { background: #B58900; }
.ad-encaje__f--no { background: var(--menta); border-color: var(--salvia); }
.ad-encaje__f--no .ad-encaje__ico { background: var(--acento); }
/* El texto libre. Va el último y destacado: las respuestas cerradas
dicen si encaja, esto dice quién es — y es lo que de verdad se lee. */
.ad-encaje__cuenta {
margin-block-start: .9rem;
padding: .9rem 1.1rem;
background: var(--crema);
border-radius: var(--r);
font-size: .92rem;
line-height: 1.65;
}
.ad-encaje__cuenta p { margin-block-start: .35rem; color: var(--tinta70); }
.ad-encaje__nada { color: var(--tinta50); font-size: .92rem; }
.ad-encaje__pie {
margin-block-start: .8rem;
font-size: .82rem;
color: var(--tinta50);
}
@media (max-width: 40rem) {
.ad-encaje summary { align-items: flex-start; }
}
/* --- 16.1 · «Tu ficha de casa va con el mensaje» -------------------
Sin esto había dos cajas de texto pidiendo casi lo mismo —«cuéntale
un poco de ti» en la ficha del animal y «algo más que quieras
contar» en la ficha de casa— y nadie sabía en cuál escribir qué.
Se resuelve enseñando que la ficha ya está hecha y qué papel juega
cada cosa: la ficha habla de ti y va siempre; el mensaje habla de
ESE peludo. Dicho así, se deja de escribir lo mismo dos veces. */
.ad-adjunta {
display: flex;
gap: .7rem;
align-items: flex-start;
padding: .8rem 1rem;
margin-block-end: 1.1rem;
font-size: .9rem;
line-height: 1.6;
color: var(--turq-osc);
background: var(--menta-ok);
border: 1px solid var(--menta-ok-linea);
border-radius: var(--r);
}
.ad-adjunta a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.ad-adjunta__ok {
flex: none;
display: grid;
place-items: center;
width: 1.35rem;
height: 1.35rem;
margin-block-start: .1rem;
font-size: .8rem;
font-weight: 800;
color: var(--blanco);
background: #0A7D32;
border-radius: 50%;
}
/* Cuando falta por rellenar, el mismo aviso pero llamando la atención:
es una tarea pendiente, no una confirmación. */
.ad-adjunta--falta {
color: var(--sobre-claro);
background: var(--limon-cl);
border-color: var(--limon-linea);
}
.ad-adjunta--falta .ad-adjunta__ok { background: #B58900; }
/* ===========================================================================
16.2 · LA PUERTA DE LA FICHA DE CASA
---------------------------------------------------------------------------
La misma caja que la puerta de «entra con tu cuenta», con dos diferencias
pensadas a propósito:
· El borde es continuo y no de rayas. La de la cuenta es una puerta cerrada
(«aquí no pasas sin entrar»); ésta es una tarea que se hace en un minuto y
se queda hecha para siempre. Un borde de rayas la haría parecer un muro.
· Va en crema con el trazo teal. No en limón de aviso: no ha hecho nada mal,
es el siguiente paso.
======================================================================== */
.ad-puerta--casa {
background: var(--crema-cl);
border: 1px solid var(--teal-linea, var(--linea-osc));
border-inline-start: 4px solid var(--teal);
text-align: start;
}
.ad-puerta--casa .ad-puerta__botones { justify-content: flex-start; }
/* La barra de «llevas 4 de 7». Solo sale si empezó: enseñar una barra vacía
a quien no ha contestado nada es enseñarle lo que le queda, no lo que
lleva, y eso desanima en vez de tirar. */
.ad-puerta__barra {
height: .45rem;
margin-block: 1rem .5rem;
overflow: hidden;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--pastilla);
}
.ad-puerta__barra i {
display: block;
height: 100%;
background: var(--teal);
border-radius: var(--pastilla);
}
.ad-puerta--casa .ad-puerta__nota { margin-block-start: .8rem; }
/* ===========================================================================
16.3 · LA PREGUNTA QUE FALTA
---------------------------------------------------------------------------
La ficha de casa hay que terminarla —sin ella no se abre conversación— así
que hace falta decir CUÁL falta, no cuántas.
El aviso vive dentro de cada pregunta y está escondido por defecto. Sale
solo cuando el bloque lleva «es-falta», que la pone el JS al intentar
enviar o el PHP al volver del servidor. Un formulario que te recibe con
siete avisos en rojo parece que ya lo has hecho mal antes de empezar.
Y el color es el limón de la casa, no rojo de error: no ha metido la pata,
le queda una pregunta.
======================================================================== */
.ad-micasa__falta {
display: none;
align-items: center;
gap: .4rem;
margin-block: 0 .8rem;
font-size: .87rem;
font-weight: 700;
color: var(--sobre-claro);
}
.ad-micasa__falta span { font-size: 1rem; line-height: 1; }
.ad-micasa__grupo.es-falta {
border-color: var(--limon-linea);
background: var(--limon-cl);
box-shadow: 0 0 0 3px rgba(255, 214, 0, .18);
}
.ad-micasa__grupo.es-falta .ad-micasa__falta { display: flex; }
/* Las tarjetas de opción sobre el fondo limón: en blanco, que si no se
confunden con el fondo del bloque y parece que hay algo marcado. */
.ad-micasa__grupo.es-falta .ad-micasa__op { background: var(--blanco); }
/* Un aviso que no es un error. «Ese enlace ya no vale, pero aquí tienes lo
tuyo» no es una alerta roja: es una nota. En rojo, quien lo lee cierra la
página pensando que algo se ha roto, cuando justo debajo está todo. */
.ad-aviso--limon {
color: var(--sobre-claro);
background: var(--limon-cl);
border: 1px solid var(--limon-linea);
}
/* La caja de «este lo has publicado tú». En crema y sin el marco de
formulario: no es algo que rellenar, es un cartel. */
.ad-interes__caja--mio {
background: var(--crema-cl);
border-style: solid;
}
/* ===========================================================================
17 · CONVERSACIONES: PESTAÑAS, CIERRE Y ARCHIVO
---------------------------------------------------------------------------
Todo lo que aparece cuando una conversación deja de estar viva.
======================================================================== */
/* --- Las dos pestañas ---------------------------------------------------- */
.ad-pest {
display: flex;
gap: .3rem;
margin-block: 1rem .9rem;
border-block-end: 2px solid var(--linea);
}
.ad-pest__b {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .6rem .9rem;
margin-block-end: -2px;
font: inherit;
font-weight: 700;
font-size: .93rem;
color: var(--tinta50);
background: none;
border: 0;
border-block-end: 2px solid transparent;
cursor: pointer;
}
.ad-pest__b:hover { color: var(--tinta); }
.ad-pest__b.es-puesta {
color: var(--teal);
border-block-end-color: var(--teal);
}
/* El número de cada pestaña. Gris, y no de color: el color aquí lo tiene
reservado el punto de «hay algo sin leer», y dos cosas llamando la
atención a la vez no llama la atención ninguna. */
.ad-pest__n {
padding: .05rem .4rem;
font-size: .78rem;
font-weight: 700;
color: var(--tinta50);
background: var(--crema-cl);
border-radius: var(--pastilla);
}
.ad-pest__b.es-puesta .ad-pest__n { color: var(--teal); }
/* El punto de «tienes algo por leer». Va sin número a propósito: el número
ya está en las filas de abajo, y aquí lo único que hace falta saber es si
hay que mirar o no. */
.ad-pest__punto {
width: .5rem;
height: .5rem;
background: var(--acento, #C4402B);
border-radius: 50%;
}
/* Los títulos de cada lista son para cuando NO hay JavaScript. Con pestañas
sobran, porque el botón ya dice lo mismo dos centímetros más arriba. */
.ad-charlas.es-pestanas .ad-charlas__titulo { display: none; }
.ad-charlas__titulo {
margin-block: 1.4rem .6rem;
font-size: 1rem;
}
.ad-charlas__nada {
padding: 1.2rem;
font-size: .92rem;
color: var(--tinta50);
text-align: center;
background: var(--crema-cl);
border: 1px dashed var(--linea-osc);
border-radius: var(--r);
}
/* Una fila cerrada: apagada, pero perfectamente legible. Es historial, no
basura — y si alguien viene a buscarla dentro de seis meses, tiene que
poder leerla sin forzar la vista. */
.ad-charla-fila.es-cerrada { opacity: .78; }
.ad-charla-fila.es-cerrada .ad-avatar { filter: grayscale(.6); }
.ad-pregunta__estado.es-cerrada {
color: var(--tinta50);
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
}
/* --- El aviso de «esta conversación está cerrada» ------------------------ */
.ad-cerrada {
display: flex;
gap: .8rem;
align-items: flex-start;
color: var(--tinta);
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-inline-start: 4px solid var(--teal);
}
.ad-cerrada__ico {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 1.5rem;
height: 1.5rem;
margin-block-start: .1rem;
font-size: .85rem;
font-weight: 800;
color: var(--blanco);
background: var(--teal);
border-radius: 50%;
}
.ad-cerrada__nota,
.ad-cerrada__que {
display: block;
margin-block-start: .5rem;
}
.ad-cerrada__nota {
padding-inline-start: .7rem;
font-style: italic;
color: var(--tinta70);
border-inline-start: 2px solid var(--linea-osc);
}
.ad-cerrada__que { font-size: .87rem; color: var(--tinta50); }
.ad-cerrada__reabrir { margin-block-start: .8rem; }
/* --- Cerrarla: abajo del todo y plegado ---------------------------------- */
.ad-cerrar {
margin-block-start: 1.6rem;
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
}
.ad-cerrar > summary {
display: flex;
align-items: center;
gap: .5rem;
padding: .9rem 1.1rem;
font-weight: 700;
font-size: .93rem;
color: var(--tinta70);
cursor: pointer;
list-style: none;
}
.ad-cerrar > summary::-webkit-details-marker { display: none; }
.ad-cerrar > summary:hover { color: var(--tinta); }
.ad-cerrar[open] > summary { border-block-end: 1px solid var(--linea); }
.ad-cerrar__cuerpo { padding: 1.1rem; }
.ad-cerrar__que { margin-block-end: 1rem; font-size: .92rem; color: var(--tinta70); }
.ad-cerrar__motivos { padding: 0; margin: 0 0 1rem; border: 0; }
.ad-cerrar__motivos legend { padding: 0; font-weight: 700; font-size: .95rem; }
/* El aviso de que esto lo lee la otra persona. En limón y antes de las
opciones: es lo que hace elegir con cabeza en vez de pulsar la primera. */
.ad-cerrar__aviso {
padding: .7rem .85rem;
margin-block: .6rem .9rem;
font-size: .87rem;
line-height: 1.55;
color: var(--sobre-claro);
background: var(--limon-cl);
border: 1px solid var(--limon-linea);
border-radius: var(--r);
}
.ad-cerrar__op {
display: flex;
align-items: center;
gap: .6rem;
padding: .6rem .75rem;
margin-block-end: .4rem;
font-size: .93rem;
background: var(--fondo);
border: 2px solid var(--linea-osc);
border-radius: var(--r);
cursor: pointer;
}
.ad-cerrar__op:hover { border-color: var(--turq-osc); }
.ad-cerrar__op:has(input:checked) {
background: var(--crema-cl);
border-color: var(--teal);
}
.ad-cerrar__op input { accent-color: var(--teal); }
/* ===========================================================================
19 · PREGUNTAS FRECUENTES
---------------------------------------------------------------------------
Salen en dos sitios: la página entera y un resumen de cuatro al final del
tablón. El mismo aspecto en los dos, porque son lo mismo.
======================================================================== */
.ad-faq__indice {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-block: 1.6rem 2.4rem;
}
.ad-faq__indice a {
padding: .45rem .85rem;
font-size: .88rem;
font-weight: 600;
color: var(--teal);
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--pastilla);
text-decoration: none;
}
.ad-faq__indice a:hover { border-color: var(--teal); }
.ad-faq__entrada { margin-block-end: 1rem; }
.ad-faq__lista { display: grid; gap: .6rem; margin-block-end: 2.2rem; }
.ad-faq__p {
background: var(--tarjeta);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
overflow: hidden;
}
/* Abierta se distingue con el borde, no con el fondo: en una lista de seis,
seis fondos distintos se leen como seis cosas distintas. */
.ad-faq__p[open] { border-color: var(--teal); }
.ad-faq__p > summary {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.2rem;
font-weight: 700;
font-size: 1rem;
line-height: 1.45;
color: var(--tinta);
cursor: pointer;
list-style: none;
}
.ad-faq__p > summary::-webkit-details-marker { display: none; }
.ad-faq__p > summary:hover { color: var(--teal); }
.ad-faq__mas {
flex: none;
margin-inline-start: auto;
display: grid;
place-items: center;
width: 1.6rem;
height: 1.6rem;
color: var(--teal);
transition: transform var(--rapido);
}
.ad-faq__mas svg { width: 1.1rem; height: 1.1rem; }
.ad-faq__p[open] .ad-faq__mas { transform: rotate(180deg); }
.ad-faq__r {
padding: 0 1.2rem 1.1rem;
border-block-start: 1px solid var(--linea);
padding-block-start: 1rem;
}
.ad-faq__r p { margin-block: 0 .8rem; line-height: 1.7; color: var(--tinta70); }
.ad-faq__r p:last-child { margin-block-end: 0; }
.ad-faq__r a { color: var(--teal); font-weight: 600; }
.ad-faq__r b { color: var(--tinta); }
/* --- El resumen del final del tablón ------------------------------- */
.ad-faq--home {
margin-block: var(--sec) 0;
padding-block-start: var(--sec);
border-block-start: 1px solid var(--linea);
}
.ad-faq__cabeza { margin-block-end: 1.4rem; }
.ad-faq__cabeza h2 { margin-block: .5rem .4rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.ad-faq__cabeza p { color: var(--tinta70); }
.ad-faq__cabeza a { color: var(--teal); font-weight: 600; }
.ad-faq__pie { display: flex; flex-wrap: wrap; gap: .7rem; }
/* ===========================================================================
20 · AVISO LEGAL Y CONDICIONES
======================================================================== */
/* El hueco por rellenar. Rojo y a la vista, no un comentario escondido: un
aviso legal con un dato de mentira es peor que uno sin publicar. */
.ad-legal__hueco {
padding: .1rem .35rem;
font-weight: 700;
color: var(--error);
background: var(--error-fondo);
border-radius: var(--r-sm, 6px);
}
.ad-legal__aviso-obra {
padding: 1rem 1.2rem;
margin-block-end: 2rem;
font-size: .92rem;
line-height: 1.65;
color: var(--sobre-claro);
background: var(--limon-cl);
border: 1px solid var(--limon-linea);
border-radius: var(--r-lg);
}
.ad-legal__ficha {
padding: 1.2rem 1.4rem;
margin-block: 1rem 1.6rem;
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
}
.ad-legal__ficha dl { display: grid; gap: .7rem; margin: 0; }
.ad-legal__ficha dl > div {
display: grid;
grid-template-columns: 11rem minmax(0, 1fr);
gap: .3rem 1rem;
}
.ad-legal__ficha dt {
font-size: .8rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tinta50);
}
.ad-legal__ficha dd { margin: 0; color: var(--tinta); word-break: break-word; }
@media (max-width: 34rem) {
.ad-legal__ficha dl > div { grid-template-columns: 1fr; }
}
/* ===========================================================================
21 · LAS TRES DECLARACIONES DEL FORMULARIO DE PUBLICAR
---------------------------------------------------------------------------
Eran una sola casilla que decía tres cosas. Separadas se leen; la del medio
—la del dinero— lleva marco propio porque es la que sostiene el tablón.
======================================================================== */
.ad-declaro {
padding: 1.2rem 1.3rem;
margin-block: 1.6rem;
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--r-lg);
}
.ad-declaro legend {
padding: 0;
margin-block-end: .9rem;
font-size: 1rem;
font-weight: 700;
}
.ad-declaro .ad-marca { margin-block-end: .7rem; }
.ad-declaro .ad-marca b { display: block; margin-block-end: .15rem; }
.ad-declaro .ad-marca small {
display: block;
margin-block-start: .45rem;
font-size: .82rem;
line-height: 1.6;
color: var(--tinta50);
}
.ad-declaro .ad-marca small a { color: var(--teal); font-weight: 600; }
/* La del dinero, destacada. Es la única de las tres que, si se firma en
falso, convierte un problema nuestro en un problema de quien la firmó. */
.ad-marca--clave {
background: var(--limon-cl);
border-color: var(--limon-linea);
}
.ad-marca--clave small { color: var(--sobre-claro); }
.ad-declaro__nota {
padding: .9rem 1rem;
margin: .3rem 0 0;
font-size: .87rem;
line-height: 1.65;
color: var(--tinta70);
background: var(--tarjeta);
border: 1px dashed var(--linea-osc);
border-radius: var(--r);
}
.ad-declaro__nota b { color: var(--tinta); }
/* =============================================================================
22 · QUIÉN MÁS PUEDE LEER LA CONVERSACIÓN
-----------------------------------------------------------------------------
Peludamente puede abrir cualquier hilo para moderarlo. Eso se dice donde se
escribe, no solo en la página de privacidad: un aviso que vive en una página
que nadie abre no es un aviso.
Gris, pequeño y al final del todo. Tiene que estar y tiene que leerse, pero
no es lo que la gente viene a hacer aquí.
============================================================================= */
.ad-charla__quienlee {
margin: 2rem 0 0;
padding: .85rem 1rem;
border-top: 1px solid var(--linea);
font-size: .85rem;
line-height: 1.6;
color: var(--tinta50);
}
.ad-charla__quienlee a {
color: var(--tinta50);
text-decoration: underline;
}
.ad-charla__quienlee a:hover,
.ad-charla__quienlee a:focus-visible { color: var(--teal); }
/* =============================================================================
23 · EL AVATAR, Y LA PÁGINA DEL PERFIL
-----------------------------------------------------------------------------
SIEMPRE SALE ALGO. Con foto, la foto; sin foto, un círculo con las iniciales
y un color estable —el mismo para esa persona en todas las pantallas—. Un
hueco vacío donde debería ir una cara descoloca la fila entera y encima
parece un error de carga.
Tres tamaños y solo tres: el del chat, el de las listas y el de la página del
perfil. Cada tamaño nuevo es una decisión que hay que tomar otra vez en cada
pantalla, y así no hace falta.
============================================================================= */
.ad-avatar {
flex: none;
display: grid;
place-items: center;
overflow: hidden;
background: var(--crema);
border-radius: 50%;
object-fit: cover;
user-select: none;
}
.ad-avatar--letras {
font-weight: 700;
color: var(--blanco);
letter-spacing: .02em;
text-transform: uppercase;
}
.ad-avatar--peque { width: 1.7rem; height: 1.7rem; font-size: .72rem; }
.ad-avatar--medio { width: 2.6rem; height: 2.6rem; font-size: .95rem; }
.ad-avatar--grande { width: 6.5rem; height: 6.5rem; font-size: 2.1rem; }
/* --------------------------------------------------------- la página */
.ad-perfil { max-width: 46rem; }
.ad-perfil__cabeza { margin-bottom: 1.6rem; }
.ad-perfil__cabeza h1 { margin: .3rem 0 .6rem; }
.ad-perfil__cabeza p { margin: 0; color: var(--tinta70); }
.ad-perfil__form {
display: grid;
gap: 1.4rem;
padding: 1.4rem;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r);
}
/* La foto de ahora al lado de lo que se puede hacer con ella: hay que ver lo
que se está cambiando, no cambiarlo a ciegas. */
.ad-perfil__foto {
display: flex;
gap: 1.2rem;
align-items: center;
flex-wrap: wrap;
}
.ad-perfil__actual { flex: none; }
.ad-perfil__acciones {
flex: 1 1 16rem;
display: grid;
gap: .7rem;
justify-items: start;
}
.ad-perfil__acciones .ad-campo { width: 100%; margin: 0; }
.ad-campo--archivo input[type="file"] {
width: 100%;
padding: .55rem;
font-size: .9rem;
background: var(--crema-cl);
border: 1px dashed var(--linea-osc);
border-radius: var(--r);
}
.ad-perfil__enviar {
display: flex;
gap: .6rem;
flex-wrap: wrap;
align-items: center;
}
.ad-perfil__nota {
margin-top: 1.6rem;
padding: 1.2rem 1.4rem;
background: var(--crema-cl);
border: 1px solid var(--linea);
border-radius: var(--r);
}
.ad-perfil__nota h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.ad-perfil__nota ul { margin: 0 0 .8rem; padding-left: 1.1rem; }
.ad-perfil__nota li { margin-bottom: .35rem; line-height: 1.6; }
.ad-perfil__nota p { margin: 0; font-size: .9rem; color: var(--tinta70); }
/* =============================================================================
24 · RESERVADO
-----------------------------------------------------------------------------
Un estado que no existía y hacía falta. Entre «busca casa» y «ya tiene casa»
hay un rato —a veces semanas— en el que ya hay alguien decidido y todavía no
se lo ha llevado. Sin forma de decirlo, quien publica seguía recibiendo
mensajes de gente que se ilusionaba con un animal que ya estaba apalabrado.
El sello va en el mismo sitio que los otros y con el mismo peso: no es una
mala noticia, es información.
============================================================================= */
.ad-sello--reservado {
color: var(--sobre-claro);
background: var(--limon);
border-color: var(--limon-linea);
}
/* La tarjeta, un punto más apagada: sigue leyéndose entera —hay que poder
guardarlo por si la reserva se cae— pero no compite con los que sí están
libres, que son los que de verdad puedes adoptar hoy. */
.ad-tarjeta.es-reservado .ad-tarjeta__foto img { filter: saturate(.85); }
/* Cuánto lleva esperando. Pequeño y al final: es apoyo, no titular. */
.ad-tarjeta__desde {
margin: .35rem 0 0;
font-size: .8rem;
color: var(--tinta50);
}
/* La caja de reservar, dentro de la conversación. Con borde discontinuo,
como todo lo que es una decisión y no un mensaje. */
.ad-reserva {
margin: 1rem 0;
padding: 1rem 1.1rem;
background: var(--crema-cl);
border: 1px dashed var(--linea-osc);
border-radius: var(--r);
}
.ad-reserva p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.6; }
/* =============================================================================
25 · REPORTAR
-----------------------------------------------------------------------------
El enlace va al final de la ficha, en gris y en pequeño, y eso no es
esconderlo: es ponerlo en su sitio. La inmensa mayoría de las fichas están
bien, y un botón rojo de «denunciar» en cada una convierte un tablón de
adopción en un sitio donde se sospecha por defecto.
Antes esto era «escríbenos a este correo», que en la práctica es no tener
dónde reportar: quien ve algo raro está en el móvil y no va a redactar un
correo explicando de qué animal habla.
============================================================================= */
.ad-reportalo {
margin: 2rem auto 0;
font-size: .88rem;
text-align: center;
}
.ad-reportalo a {
display: inline-flex;
gap: .4rem;
align-items: center;
padding: .4rem .8rem;
color: var(--tinta50);
text-decoration: none;
border-radius: var(--pastilla);
}
.ad-reportalo a:hover,
.ad-reportalo a:focus-visible {
color: var(--tinta);
background: var(--crema-cl);
}
.ad-reportalo svg { width: 1.05rem; height: 1.05rem; }
.ad-reportalo--charla { margin-top: .4rem; text-align: left; }
/* --------------------------------------------------------- la página */
.ad-reportar { max-width: 42rem; }
.ad-reportar__cabeza { margin-bottom: 1.4rem; }
.ad-reportar__cabeza h1 { margin: .3rem 0 .6rem; }
.ad-reportar__cabeza p { margin: 0; color: var(--tinta70); }
.ad-reportar__form {
display: grid;
gap: 1.3rem;
padding: 1.4rem;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r);
}
.ad-reportar__motivos { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0; }
.ad-reportar__motivos legend { margin-bottom: .5rem; font-weight: 700; }
.ad-reportar__op {
display: flex;
gap: .6rem;
align-items: flex-start;
padding: .6rem .8rem;
cursor: pointer;
background: var(--crema-cl);
border: 1px solid var(--linea);
border-radius: var(--r);
}
.ad-reportar__op:has(input:checked) { border-color: var(--teal); background: var(--blanco); }
.ad-reportar__enviar { display: flex; gap: .6rem; flex-wrap: wrap; }
/* El aviso del 062. Va aparte y con borde: es lo único de esta página que
puede salvar a un animal HOY, y no puede quedar como una nota al pie. */
.ad-reportar__ley {
margin-top: 1.4rem;
padding: 1rem 1.1rem;
font-size: .9rem;
line-height: 1.65;
background: var(--crema-cl);
border: 1px dashed var(--linea-osc);
border-radius: var(--r);
}
.ad-reportar__hecho { max-width: 34rem; }
.ad-reportar__hecho h1 { margin: .3rem 0 .8rem; }
.ad-reportar__hecho p { line-height: 1.7; }
/* =============================================================================
26 · HASTA DÓNDE ME MUEVO
-----------------------------------------------------------------------------
Este filtro nació escondido: la etiqueta iba solo para lectores de pantalla
—como la de provincia— y el desplegable salía en gris al 50% mientras no
hubiera provincia elegida. Resultado: dos desplegables seguidos sin título,
el segundo medio borrado, y nadie sabía que existía la función.
Ahora la etiqueta se lee, el desplegable nunca se apaga, y si falta la
provincia se dice con una línea debajo en vez de con una opacidad.
============================================================================= */
.ad-campo__mini {
display: block;
margin-block-end: .3rem;
font-size: .8rem;
font-weight: 600;
color: var(--tinta70);
}
.ad-campo__pista {
display: block;
margin-block-start: .35rem;
font-size: .78rem;
line-height: 1.45;
color: var(--tinta50);
}
/* =============================================================================
27 · AVÍSAME CUANDO ENTRE UNO
-----------------------------------------------------------------------------
Debajo de los resultados, en una franja de color suave. No es un banner ni un
pop-up: es una fila más de la página, y aparece justo cuando tiene sentido —
con algún filtro puesto, haya resultados o no.
El caso que importa no es «no hay ninguno», que es evidente: es «salen tres y
ninguno me convence». Ese se va igual, y ese es a quien se puede recuperar.
============================================================================= */
.ad-avisame {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
margin: 2rem 0 0;
padding: 1.1rem 1.3rem;
background: var(--crema-cl);
border: 1px solid var(--linea);
border-radius: var(--r-lg);
}
.ad-avisame__texto { flex: 1 1 18rem; min-width: 0; }
.ad-avisame__texto b { display: block; margin-bottom: .2rem; }
.ad-avisame__texto span {
font-size: .9rem;
line-height: 1.55;
color: var(--tinta70);
}
.ad-avisame__correo { flex: 0 1 15rem; margin: 0; }
.ad-avisame__correo input { width: 100%; }
/* --------------------------------------------------------- la página */
.ad-avisos { max-width: 44rem; }
.ad-avisos__cabeza { margin-bottom: 1.4rem; }
.ad-avisos__cabeza h1 { margin: .3rem 0 .6rem; }
.ad-avisos__cabeza p { margin: 0; color: var(--tinta70); }
.ad-avisos__lista { display: grid; gap: .7rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.ad-avisos__fila {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
padding: .9rem 1.1rem;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r);
}
.ad-avisos__fila > div { flex: 1 1 16rem; min-width: 0; }
.ad-avisos__fila small { display: block; font-size: .85rem; color: var(--tinta50); }
.ad-avisos__nada { margin: 1.4rem 0 .8rem; color: var(--tinta70); }
.ad-avisos__baja { max-width: 34rem; }
.ad-avisos__baja h1 { margin: .3rem 0 .8rem; }
.ad-avisos__baja p { line-height: 1.7; }
/* =============================================================================
28 · CÓMO LES VA, Y LA PÁGINA DE CONTARLO
-----------------------------------------------------------------------------
La página de los que ya tienen casa contaba cuántos se fueron. Un número está
bien, pero lo que convence a alguien de publicar a su peludo aquí es leer que
Trufa duerme en el sofá aunque tiene su cama.
Solo salen los que han dado permiso marcando una casilla que viene
desmarcada, y nunca los que no salieron adelante.
============================================================================= */
.ad-comoles {
margin: var(--sec) 0 0;
padding: 1.6rem;
background: var(--crema-cl);
border-radius: var(--r-xl);
}
.ad-comoles h2 { margin: 0 0 .4rem; }
.ad-comoles__intro { margin: 0 0 1.4rem; color: var(--tinta70); }
.ad-comoles__rejilla {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.ad-comoles__uno {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-lg);
}
.ad-comoles__foto {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.ad-comoles__texto { padding: .9rem 1rem 1rem; }
.ad-comoles__texto b { display: block; margin-bottom: .3rem; }
.ad-comoles__texto p { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.6; }
.ad-comoles__texto small { font-size: .8rem; color: var(--tinta50); }
/* --------------------------------------------------- contarlo */
.ad-quetal { max-width: 42rem; }
.ad-quetal__cabeza {
display: flex;
gap: 1.2rem;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1.4rem;
}
.ad-quetal__foto {
flex: none;
width: 6rem;
height: 8rem;
object-fit: cover;
border-radius: var(--r);
}
.ad-quetal__cabeza h1 { margin: .3rem 0 .5rem; }
.ad-quetal__cabeza p { margin: 0; color: var(--tinta70); }
.ad-quetal__form {
display: grid;
gap: 1.3rem;
padding: 1.4rem;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r);
}
.ad-quetal__opciones { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0; }
.ad-quetal__opciones legend { margin-bottom: .5rem; font-weight: 700; }
.ad-quetal__op {
display: flex;
gap: .6rem;
align-items: center;
padding: .6rem .8rem;
cursor: pointer;
background: var(--crema-cl);
border: 1px solid var(--linea);
border-radius: var(--r);
}
.ad-quetal__op:has(input:checked) { border-color: var(--teal); background: var(--blanco); }
.ad-quetal__enviar { display: flex; gap: .6rem; flex-wrap: wrap; }
.ad-quetal__gracias { max-width: 34rem; }
.ad-quetal__gracias h1 { margin: .3rem 0 .8rem; }
.ad-quetal__gracias p { line-height: 1.7; }
/* Con quién estás hablando: su cara y sus dos líneas, encima del hilo.
Solo sale si ha puesto algo — un recuadro que diga «sin información» hace
parecer sospechoso a quien simplemente no rellenó un campo opcional. */
.ad-quienes {
display: flex;
gap: .9rem;
align-items: flex-start;
margin: 0 0 1.2rem;
padding: .9rem 1rem;
background: var(--crema-cl);
border: 1px solid var(--linea);
border-radius: var(--r);
}
.ad-quienes > div { min-width: 0; }
.ad-quienes b { display: block; margin-bottom: .2rem; font-size: .95rem; }
.ad-quienes p {
margin: 0;
font-size: .9rem;
line-height: 1.6;
color: var(--tinta70);
}
/* =============================================================================
29 · UN SOLO ANCHO PARA TODO
-----------------------------------------------------------------------------
EL PROBLEMA: la cabecera, el pie y el tablón usan --ancho (82rem), pero las
páginas de texto —aviso legal, condiciones, privacidad, preguntas— y las de
una sola cosa —el chat, el perfil, los avisos, reportar, el «qué tal va»—
se habían quedado en 46rem cada una.
Eso, en una pantalla normal, se ve como si la web cambiara de sitio al
navegar: el logotipo y el pie llegan a los bordes y el contenido queda en una
columna estrecha en medio, sin alinear con nada. Cada página parecía de una
web distinta.
Ahora todas las cajas ocupan lo mismo y sus bordes caen justo debajo de los
del menú y los del pie. Lo único que se sigue limitando es lo que de verdad
no debe estirarse: un globo de chat de tres palabras no puede medir metro y
medio, y un párrafo de introducción se lee peor cuanto más largo es el
renglón — pero eso son límites de PIEZAS, no de la página.
============================================================================= */
.ad-legal,
.ad-charla,
.ad-perfil,
.ad-reportar,
.ad-avisos,
.ad-quetal {
max-width: var(--ancho);
}
/* Las pantallas de «ya está, gracias»: el texto es corto y centrarlo en una
caja de 82rem lo deja perdido arriba a la izquierda. Se quedan estrechas
a propósito, pero CENTRADAS dentro del ancho de todos, que es distinto de
ser más estrechas que la página. */
.ad-reportar__hecho,
.ad-avisos__baja,
.ad-quetal__gracias {
max-width: 40rem;
margin-inline: auto;
}
/* El globo del chat. Con la conversación a 82rem, un «vale, perfecto» ocupaba
media pantalla y el hilo se volvía ilegible: los ojos tienen que volver al
principio de cada línea desde muy lejos. */
.ad-globo { max-width: min(85%, 42rem); }
/* Los formularios de una sola columna, dentro del ancho grande, se quedan a
una medida cómoda y pegados al margen izquierdo — que es donde empieza a
leer la vista, y donde está el título de la página. */
.ad-perfil__form,
.ad-reportar__form,
.ad-quetal__form,
.ad-avisos__lista,
.ad-reportar__ley,
.ad-perfil__nota {
max-width: 52rem;
}
/* En las páginas de texto largo, el renglón se limita para poder leerlo, pero
los títulos, las rayas y las cajas siguen ocupando el ancho entero: así la
página «mide» lo mismo que el resto de la web aunque el texto no llegue al
borde. */
.ad-legal p,
.ad-legal li,
.ad-faq p,
.ad-faq li {
max-width: 72ch;
}
/* =============================================================================
30 · LOS ICONOS DE LA CABECERA, CON SU PALABRA
-----------------------------------------------------------------------------
El bocadillo de mensajes iba sin texto y la palabra «Guardados» se escondía
en cuanto había sesión. En el escritorio se entendía; en el móvil quedaban
dos iconos sueltos flotando encima del botón de publicar, y la cabecera
parecía a medio cargar.
El argumento de «un icono se entiende en cualquier idioma» solo vale cuando
YA SABES lo que hace. La primera vez, no: un bocadillo puede ser mensajes,
comentarios, ayuda o chat de soporte. La palabra cuesta 60 píxeles y quita
la duda para siempre.
============================================================================= */
.ad-nav__etiqueta {
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
}
/* En pantallas pequeñas se encoge, pero no se va. */
@media (max-width: 34rem) {
.ad-nav__etiqueta { font-size: .75rem; }
.ad-nav__charlas,
.ad-nav__guardados { padding-inline: .5rem; gap: .3rem; }
}
/* La palabra del avatar ocupa el sitio del nombre cuando el nombre no cabe:
una foto suelta al lado de «Salir» no dice a dónde lleva.
Va en línea con la foto, no debajo: eso fue lo que se rompió la primera vez
—ver el comentario de .ad-yo__ini—. */
.ad-yo__que {
display: none;
font-size: .8rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 34rem) {
.ad-yo__que { display: inline-block; }
/* Con la palabra dentro, la pastilla necesita algo más de sitio del que le
dejaba el tope pensado para «foto + nombre recortado». */
.ad-mio .ad-yo,
.ad-yo { max-width: none; }
}
/* =============================================================================
31 · LA FILA DE LA CUENTA, EN UNA SOLA LÍNEA
-----------------------------------------------------------------------------
Mensajes, Guardados y el chip de la cuenta tienen que caber juntos. Saltaban
porque cada pieza estaba pensada para el escritorio: iconos de 1,15rem,
textos de 0,82rem y pastillas con 0,7rem de aire a cada lado. Sumado, eso son
unos 350 px, y en un móvil de 360 no entra.
Así que en móvil se encoge TODO un punto —iconos, letra, aire y separación—
en vez de esconder cosas. La diferencia entre 0,82rem y 0,72rem no la nota
nadie; un chip que salta de línea, sí.
El botón de publicar sigue yéndose a su propia fila a lo ancho, que es donde
mejor está: es la acción principal y así se pulsa sin apuntar.
============================================================================= */
@media (max-width: 40rem) {
.ad-mio { gap: .3rem .55rem; }
.ad-nav__charlas,
.ad-nav__guardados {
gap: .3rem;
padding: .35rem .45rem;
min-height: 2rem;
}
.ad-nav__charlas svg,
.ad-nav__guardados svg { width: 1rem; height: 1rem; }
.ad-nav__etiqueta { font-size: .72rem; }
/* El chip: menos aire por dentro y la foto un punto más pequeña. */
.ad-yo { gap: .3rem; padding: .2rem .2rem .2rem .22rem; }
.ad-yo .ad-avatar--peque { width: 1.45rem; height: 1.45rem; font-size: .62rem; }
.ad-yo__que { font-size: .72rem; }
.ad-yo__salir { padding: .2rem .45rem; font-size: .72rem; }
/* El número de mensajes sin leer también encoge: iba en un círculo pensado
para el escritorio y era lo que más empujaba de toda la fila. */
.ad-nav__cuenta { min-width: 1.05rem; height: 1.05rem; font-size: .65rem; }
}
/* Por debajo de 24rem (384 px, que es casi todo el parque de móviles) se
aprieta otro punto. Los números salen justos: a 360 px quedan 328 útiles y
las tres piezas sumaban 344. Aquí se recuperan esos 16 px y sobran unos
pocos para el globito de mensajes sin leer, que también ocupa. */
@media (max-width: 24rem) {
.ad-mio { gap: .25rem .4rem; }
.ad-nav__etiqueta,
.ad-yo__que,
.ad-yo__salir { font-size: .68rem; }
.ad-nav__charlas,
.ad-nav__guardados { gap: .25rem; padding-inline: .3rem; }
.ad-nav__charlas svg,
.ad-nav__guardados svg { width: .95rem; height: .95rem; }
.ad-yo { gap: .25rem; padding: .15rem .15rem .15rem .18rem; }
.ad-yo .ad-avatar--peque { width: 1.35rem; height: 1.35rem; }
.ad-yo__salir { padding: .15rem .4rem; }
.ad-nav__cuenta { min-width: .95rem; height: .95rem; font-size: .6rem; }
}
/* Y para los móviles de 320 px —los iPhone SE y los Android pequeños que
siguen por ahí— el último apretón. A partir de aquí no se recorta más:
se recorta la letra, no la información. */
@media (max-width: 20.5rem) {
.ad-mio { gap: .2rem .3rem; }
.ad-nav__etiqueta,
.ad-yo__que,
.ad-yo__salir { font-size: .64rem; letter-spacing: -.01em; }
.ad-nav__charlas,
.ad-nav__guardados { padding-inline: .2rem; gap: .2rem; }
.ad-yo { padding: .12rem; gap: .2rem; }
.ad-yo .ad-avatar--peque { width: 1.25rem; height: 1.25rem; }
.ad-yo__salir { padding: .12rem .3rem; }
}
/* =============================================================================
32 · LA CABECERA NUEVA · una fila, y tu cuenta en un menú
-----------------------------------------------------------------------------
Sustituye a la de cuatro filas (franja de la tienda · logo con lema ·
secciones · bocadillo + corazón + nombre + salir + publicar). Todo eso eran
nueve elementos permanentes para una web que tiene tres secciones.
Ahora hay tres bloques: quién eres, dónde ir y qué puedes hacer. Lo tuyo
—mensajes, guardados, perfil, avisos, salir— vive detrás de tu foto, que es
donde lo busca cualquiera. Lo único que NO se esconde es el número de
mensajes sin leer: un guardado no caduca, un mensaje sí.
Las reglas viejas de .ad-tira, .ad-mio, .ad-yo, .ad-nav__charlas y
.ad-nav__guardados se quedan en el archivo sin hacer nada: ya no hay HTML que
las use. No se borran de golpe para no arrastrarse a medias otra pantalla que
las comparta; cuando pase un tiempo y no se eche nada en falta, fuera.
============================================================================= */
.ad-cabecera__caja {
display: flex;
align-items: center;
gap: 1.5rem;
padding-block: 1rem;
flex-wrap: nowrap;
}
/* Las secciones, en el centro y con sitio propio. */
.ad-cabecera__caja .ad-menu {
flex: 1 1 auto;
justify-content: center;
gap: 1.6rem;
min-width: 0;
overflow: visible;
}
.ad-acciones {
display: flex;
align-items: center;
gap: .6rem;
flex: none;
}
.ad-cabecera__caja .ad-logo { flex: none; }
/* --------------------------------------------------- el menú de tu cuenta */
/* Es un : abre, cierra, se recorre con el teclado y funciona con el
JavaScript apagado sin una línea de código. El JavaScript solo añade dos
cortesías —cerrar al pulsar fuera y con Escape—, que es exactamente el
reparto que debe haber. */
.ad-cuenta { position: relative; flex: none; }
.ad-cuenta__boton {
display: inline-flex;
align-items: center;
gap: .45rem;
max-width: 12rem;
padding: .25rem .5rem .25rem .25rem;
cursor: pointer;
list-style: none;
background: var(--crema-cl);
border: 1px solid var(--linea-osc);
border-radius: var(--pastilla);
transition: background-color var(--rapido), border-color var(--rapido);
}
/* Safari pinta su propio triangulito en el summary. */
.ad-cuenta__boton::-webkit-details-marker { display: none; }
.ad-cuenta__boton:hover { background: var(--crema); border-color: var(--turq); }
.ad-cuenta[open] .ad-cuenta__boton { background: var(--blanco); border-color: var(--turq); }
.ad-cuenta__nombre {
min-width: 0;
overflow: hidden;
font-size: .85rem;
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
.ad-cuenta__flecha { width: .85rem; height: .85rem; flex: none; color: var(--tinta50); }
.ad-cuenta[open] .ad-cuenta__flecha { rotate: 180deg; }
/* EL PUNTO ROJO. Va sobre la foto y no dentro del menú: es lo único que tiene
que verse sin abrir nada. Con borde blanco para que se despegue de la foto,
sea la que sea. */
.ad-cuenta__punto {
position: absolute;
top: -.2rem;
left: 1.5rem;
display: grid;
place-items: center;
min-width: 1.15rem;
height: 1.15rem;
padding-inline: .25rem;
font-size: .68rem;
font-weight: 800;
color: var(--blanco);
background: var(--acento);
border: 2px solid var(--blanco);
border-radius: var(--pastilla);
}
.ad-cuenta__menu {
position: absolute;
z-index: 40;
inset-inline-end: 0;
inset-block-start: calc(100% + .5rem);
width: 15rem;
padding: .4rem;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r);
box-shadow: var(--sombra);
}
.ad-cuenta__op {
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .7rem;
font-size: .9rem;
font-weight: 600;
color: var(--tinta70);
border-radius: .5rem;
}
.ad-cuenta__op svg { width: 1.05rem; height: 1.05rem; flex: none; }
.ad-cuenta__op:hover { color: var(--teal); background: var(--crema-cl); }
.ad-cuenta__op.es-activo { color: var(--teal); background: var(--crema); }
.ad-cuenta__op .ad-nav__cuenta { margin-inline-start: auto; }
.ad-cuenta__op--salir { color: var(--tinta50); }
.ad-cuenta__raya { height: 1px; margin: .3rem .2rem; background: var(--linea); }
/* --------------------------------------------------------- según el ancho */
/* Con poco sitio, el subtítulo del logo y el nombre de la cuenta sobran: el
logotipo ya identifica la casa y la foto ya te identifica a ti. */
@media (max-width: 68rem) {
.ad-cabecera__caja { gap: 1rem; }
.ad-cabecera__caja .ad-menu { gap: 1.1rem; }
.ad-logo__texto small { display: none; }
.ad-cuenta__nombre { display: none; }
}
/* Y cuando ya no caben las secciones en la misma fila, bajan enteras a una
segunda línea que se desliza con el dedo. La fila de arriba se queda con lo
que de verdad no puede faltar: la marca, publicar y tu cuenta. */
/* CON POCO SITIO, REJILLA Y NO «FLEX-WRAP».
-----------------------------------------------------------------------------
Aquí estaba el fallo que costó tres intentos: con «flex-wrap», el navegador
coloca los hijos en la línea usando su tamaño NATURAL y, si no caben, baja
uno entero a la siguiente. NO los encoge para evitar el salto — encoger solo
ocurre DENTRO de una línea ya formada. Por eso el nombre de la marca podía
acortarse y aun así el bloque de acciones se caía abajo: la decisión de
partir ya estaba tomada antes de mirar si algo podía ceder.
Con una rejilla no hay heurística: la marca va en una columna que ocupa lo
que quede (y por tanto se encoge), las acciones en otra que mide lo suyo, y
las secciones abajo a lo ancho. Siempre, en cualquier móvil. */
@media (max-width: 56rem) {
.ad-cabecera__caja {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"logo acciones"
"menu menu";
align-items: center;
gap: .6rem .8rem;
padding-block: .8rem;
}
.ad-cabecera__caja .ad-logo { grid-area: logo; }
.ad-acciones { grid-area: acciones; }
.ad-cabecera__caja .ad-menu {
grid-area: menu;
width: 100%;
justify-content: flex-start;
gap: 1.3rem;
overflow-x: auto;
padding-block-end: .2rem;
}
.ad-acciones { justify-self: end; flex: none; }
/* Y LA MARCA CEDE, QUE ES LO ÚNICO QUE PUEDE CEDER.
-------------------------------------------------------------------
A base de recortar píxeles se llega hasta 390 px y a 360 vuelve a
saltar; así se acaba con una tabla de anchos mágicos que se rompe con
el siguiente móvil. La regla buena es otra: los botones NO se encogen
—una acción a medias no se pulsa— y el nombre de la marca SÍ, con
puntos suspensivos si hace falta. La pata amarilla se queda entera, y
con eso la marca se reconoce aunque el texto se corte.
Va con «.ad-cabecera__caja» delante y no con «.ad-logo» a secas porque
más arriba hay un «.ad-cabecera__caja .ad-logo { flex: none }» que gana
por especificidad —dos clases contra una— y dejaba esto sin efecto. La
regla estaba escrita, se leía bien y no se aplicaba. */
.ad-cabecera__caja .ad-logo { min-width: 0; flex: 0 1 auto; }
.ad-logo__texto { min-width: 0; }
.ad-logo__texto b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
/* A 360 px hay 328 útiles y la fila pedía 385: marca, publicar y tu foto no
caben a tamaño de escritorio. Se recorta lo que no informa —el «+», el aire
de los botones, dos puntos de letra— y NO lo que sí: la marca sigue
leyéndose, «Publicar» sigue diciendo qué hace y la foto sigue siendo tu
puerta. Con esto entra en una línea, que era el encargo. */
@media (max-width: 30rem) {
.ad-cabecera__caja { gap: .5rem; }
.ad-logo { gap: .5rem; }
.ad-logo__pata, .ad-logo__img { width: 2rem; height: 2rem; }
.ad-logo__texto b { font-size: .85rem; }
/* Se cae «un peludo» y se cae el «+», no «Publicar»: un botón con solo un
signo dentro obliga a adivinar, y esta es la acción más importante de la
web. */
.ad-publicar-btn__cola,
.ad-publicar-btn__mas { display: none; }
.ad-publicar-btn { padding: .5rem .75rem; font-size: .85rem; }
.ad-acciones { gap: .4rem; }
.ad-cuenta__boton { padding: .18rem .35rem .18rem .18rem; gap: .25rem; }
.ad-cuenta .ad-avatar--peque { width: 1.5rem; height: 1.5rem; font-size: .64rem; }
.ad-cuenta__flecha { width: .75rem; height: .75rem; }
.ad-cuenta__punto { left: 1.15rem; min-width: 1rem; height: 1rem; font-size: .6rem; }
}
/* ------------------------------------- la tienda, en la franja y en voz baja
Estaba como botón blanco relleno, el mismo que el del pie, con la idea de
que «el blanco es la tienda». Funcionaba demasiado bien: en una franja de
una línea, un botón relleno se lleva la mirada antes que el lema, y aquí el
protagonista es el tablón. La tienda es de dónde viene esto, no a dónde
queremos mandar a la gente.
Así que baja a enlace: se ve, está siempre, y no compite. El subrayado
aparece al pasar por encima, que es cuando hace falta confirmar que es
pulsable. */
.ad-tira__tienda {
display: inline-flex;
align-items: center;
gap: .4rem;
flex: none;
padding: .2rem .3rem;
font-weight: 600;
color: #CFEDEE;
white-space: nowrap;
border-radius: var(--r);
}
.ad-tira__tienda svg { width: .95rem; height: .95rem; color: var(--limon); }
.ad-tira__tienda:hover,
.ad-tira__tienda:focus-visible {
color: var(--blanco);
text-decoration: underline;
text-underline-offset: .18em;
}
/* En pantallas estrechas se queda «La tienda» a secas: el nombre de la casa
ya está en el logotipo, justo debajo. */
@media (max-width: 34rem) {
.ad-tira__caja { gap: .6rem; }
.ad-tira { font-size: .75rem; }
.ad-tira__tienda-texto { font-size: 0; }
.ad-tira__tienda-texto::after { content: "La tienda"; font-size: .75rem; }
}
/* =============================================================================
33 · LOS DESPLEGABLES, CON SUAVIDAD
-----------------------------------------------------------------------------
La animación de altura la hace el JavaScript (desplegablesSuaves), porque el
truco de CSS que lo haría —«interpolate-size» con «::details-content»— es de
2024 y aquí entra gente con móviles viejos.
Lo que sí es de CSS son las flechitas: son transiciones de un ángulo, no de
una altura, y esas sí las anima cualquier navegador desde hace años. Estaban
girando de golpe —salvo la de las preguntas frecuentes, que ya iba suave— y
el detalle se nota: una flecha que gira acompaña al contenido que sale;
una que salta parece otro elemento distinto.
============================================================================= */
.ad-cuenta__flecha { transition: rotate var(--rapido); }
/* El cuerpo que envuelve el JavaScript cuando dentro del hay varias
cosas sueltas. No pinta nada: solo existe para que haya UNA caja a la que
animarle la altura. */
.ad-desplegable__cuerpo { display: block; }
/* Ni «ad-cerrar» ni «ad-encaje» tienen flechita: uno abre con un emoji de
meta y el otro con su marca de color. No se les inventa una para poder
animarla — la animación acompaña a lo que ya hay, no es la excusa para
añadir adornos. */
@media (prefers-reduced-motion: reduce) {
.ad-cuenta__flecha,
.ad-faq__mas { transition: none; }
}
/* ===================================================================
UN BOTÓN QUE PARECE UN ENLACE
-------------------------------------------------------------------
Lo usan el pie y la política de cookies para abrir el panel. Es un
porque abre una cosa, no lleva a una página —un
que no enlaza confunde al lector de pantalla y ensucia el historial—,
pero tiene que leerse como los enlaces que tiene al lado.
=================================================================== */
.ad-enlace-boton {
padding: 0;
font: inherit;
color: inherit;
background: none;
border: 0;
text-decoration: underline;
text-underline-offset: 0.15em;
cursor: pointer;
}
.ad-enlace-boton:hover { color: var(--turq); }
.ad-enlace-boton:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
border-radius: 3px;
}