/* Estilos del inicio (con sesión) y de la portada (sin sesión), estilo «Abrazo». Solo variables de app.css. Los únicos
   colores fijos son los de encima de una foto (texto blanco sobre el velo oscuro), el marco blanco de las fotos y los de
   los dibujos: se ven igual de día y de noche. Ancho normal de la página (sin «ancho»): las rejillas se adaptan solas. */

/* ============================================================ inicio */
.inicio { gap: 1.2rem; }
.inicio h2 { font-size: 1.45rem; }

/* ------------------------------------------------------------ cabecera: foto grande de su mascota */
.inicio-portada {
  position: relative; display: flex; flex-direction: column; gap: 0.8rem; min-height: 23rem;
  margin: -1rem -0.85rem 0; padding: 1rem 1rem 3.4rem; background: var(--cielo-suave); color: var(--tinta);
}
.inicio-portada.con-foto { background: var(--canela); color: #FFFFFF; }
.inicio-portada.con-foto .ip-foto { position: absolute; inset: 0; margin: 0; }
.inicio-portada.con-foto .ip-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ip-urgencia, .ip-bocadillo, .ip-saludo, .ip-botones { position: relative; z-index: 1; }
.ip-urgencia { align-self: flex-end; }
.ip-bocadillo:empty { display: none; }
.ip-bocadillo .bocadillo { max-width: min(19rem, 100%); margin-bottom: 0.9rem; }
.inicio-portada .bocadillo .quien { font-size: 0.82rem; }
.ip-saludo { margin-top: auto; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.ip-fecha { font-weight: 700; color: var(--tinta-2); }
.con-foto .ip-fecha { color: #FFE6D6; }
.inicio-portada h1 { font-size: 2.2rem; line-height: 1.04; letter-spacing: -0.02em; }
.con-foto h1 { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.ip-texto { color: var(--tinta-2); max-width: 34rem; }
.ip-ponle-foto { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; min-height: 2.75rem; color: var(--tinta); font-weight: 800; }
.ip-ponle-foto svg { width: 1.3rem; height: 1.3rem; }
.ip-botones { display: none; flex-wrap: wrap; gap: 0.6rem; }
.ip-pegatina { display: none; }
/* Sin foto: el dibujo de Perrete o Gatunha entre el bocadillo y el saludo. */
.inicio-portada.sin-foto .ip-foto { position: relative; z-index: 1; order: 1; display: flex; justify-content: center; margin: 0; }
.inicio-portada.sin-foto .ip-saludo { order: 2; }
.inicio-portada.sin-foto .ip-botones { order: 3; }
.ip-dibujo { width: min(11rem, 55%); height: auto; }
.bienvenida .ip-dibujo { width: min(18rem, 88%); }
.bienvenida .ip-botones { display: flex; }
.bienvenida .ip-botones .btn { flex: 1 1 14rem; }
.neutra { min-height: 14rem; }
/* La urgencia va arriba en el móvil y con los botones en el ordenador. */
.ip-botones .btn.peligro { display: none; }
:root[data-contraste='alto'] .inicio-portada.con-foto .velo { height: 100%; background: rgba(0, 0, 0, 0.8); }
:root[data-contraste='alto'] .inicio-portada { border: 2px solid #FFFFFF; }

@media (min-width: 720px) {
  .inicio-portada, .inicio-portada.con-foto {
    margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 15rem);
    grid-template-areas: 'saludo foto' 'bocadillo foto' 'botones foto'; align-content: center; align-items: center;
    gap: 1rem 2rem; min-height: 0; padding: 2.2rem 2.4rem; background: var(--cielo-suave); color: var(--tinta);
  }
  .inicio-portada::before {
    content: ''; position: absolute; right: -4rem; top: -5rem; width: 20rem; height: 20rem; border-radius: 50%;
    background: color-mix(in srgb, var(--cielo) 13%, transparent); pointer-events: none;
  }
  .inicio-portada .velo, .ip-urgencia { display: none; }
  .inicio-portada .ip-foto, .inicio-portada.con-foto .ip-foto, .inicio-portada.sin-foto .ip-foto { grid-area: foto; position: relative; inset: auto; z-index: 1; }
  /* Arco: el radio vertical es la mitad del ancho entre el alto (9,5 / 22 = 43,2 %), así la curva sale redonda. */
  .inicio-portada.con-foto .ip-foto img {
    height: auto; aspect-ratio: 19 / 22; border-radius: 50% 50% 1.8rem 1.8rem / 43.2% 43.2% 1.8rem 1.8rem;
    border: 6px solid #FFFFFF; box-shadow: 0 16px 34px rgba(140, 70, 40, 0.22);
  }
  .inicio-portada.neutra { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'saludo' 'botones'; }
  .ip-dibujo, .bienvenida .ip-dibujo { width: 100%; }
  .ip-pegatina { display: inline-flex; position: absolute; left: -0.9rem; bottom: 1.4rem; }
  .ip-saludo { grid-area: saludo; margin-top: 0; }
  .ip-bocadillo { grid-area: bocadillo; }
  .ip-bocadillo .bocadillo { margin-bottom: 0.4rem; }
  .ip-botones, .bienvenida .ip-botones { grid-area: botones; display: flex; }
  .ip-botones .btn { flex: 0 1 auto; }
  .ip-botones .btn.peligro { display: inline-flex; }
  .con-foto .ip-fecha { color: var(--tinta-2); }
  .con-foto h1 { text-shadow: none; }
  .inicio-portada h1 { font-size: 2.7rem; }
  :root[data-contraste='alto'] .inicio-portada::before { display: none; }
}

/* ------------------------------------------------------------ accesos grandes y redondos (móvil) */
.inicio-accesos-caja { position: relative; z-index: 2; margin-top: -3.6rem; }
.inicio-accesos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem 0.25rem; padding: 0.8rem 0.35rem 0.7rem;
  border-radius: 1.8rem; background: var(--tarjeta); box-shadow: 0 14px 34px rgba(140, 70, 40, 0.16);
}
.inicio-acceso {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 0; padding: 0.15rem 0;
  border-radius: 1.2rem; color: var(--tinta); text-decoration: none; font-weight: 800; font-size: 0.85rem; line-height: 1.15; text-align: center;
}
.inicio-acceso:hover { color: var(--tinta); }
.inicio-acceso .ic { position: relative; display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; }
.inicio-acceso .ic svg { width: 1.55rem; height: 1.55rem; }
.inicio-acceso .ic.miel { background: var(--canela); color: #3B2420; }
.inicio-acceso .ic.salvia { background: var(--hoja); color: var(--sobre-cielo); }
.inicio-acceso .ic.coral { background: var(--cielo); color: var(--sobre-cielo); }
.inicio-acceso .ic.lavanda { background: var(--lavanda); color: var(--sobre-cielo); }
.inicio-acceso .globo { top: -0.3rem; right: -0.3rem; border: 2px solid var(--tarjeta); }
:root[data-contraste='alto'] .inicio-accesos { border: 2px solid #FFFFFF; }
:root[data-contraste='alto'] .inicio-acceso .ic { color: #000000; }
/* Con letra grande en un móvil estrecho, dos por fila (así no se parte ninguna palabra). */
@media (max-width: 374px) { .inicio-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { :root[data-tam='grande'] .inicio-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { :root[data-tam='muy'] .inicio-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .inicio-accesos-caja { display: none; } }

/* ------------------------------------------------------------ rejilla de bloques de color */
.inicio-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.1rem; }
.inicio-rejilla > [data-slot] { display: contents; }
.inicio-rejilla:not(:has(> [data-slot] > *)) { display: none; }
.inicio-rejilla > [data-slot] > * { min-width: 0; }
.inicio-rejilla .bloque { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.3rem 1.25rem; border-radius: 1.8rem; }
.inicio-sub { color: var(--tinta-2); }
.inicio-enlace { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2.75rem; color: var(--tinta); font-weight: 800; text-decoration: underline; }
.inicio-enlace:hover { color: var(--tinta); text-decoration-thickness: 2px; }

/* Racha de paseos (miel) con Perrete asomándose. */
.inicio-racha .huellas { gap: 0.3rem; }
.inicio-racha .huellas li { font-size: 0.82rem; gap: 0.1rem; }
.inicio-racha .huellas svg { fill: none; stroke: var(--linea-fuerte); stroke-width: 1.3; }
.inicio-racha .huellas .hecha svg { fill: var(--cielo); stroke: none; }
.inicio-racha .huellas .en-marcha svg { stroke: var(--cielo); stroke-width: 1.6; stroke-dasharray: 2 2; }
.inicio-racha .huellas .pendiente svg { stroke: var(--cielo); stroke-width: 1.6; stroke-dasharray: 0.5 1.8; stroke-linecap: round; }
.inicio-racha .huellas .hoy { color: var(--cielo-osc); }
.inicio-racha .personaje-esquina { width: 5.6rem; right: -0.3rem; bottom: -0.5rem; }
.inicio-botones-esquina { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: auto; margin-right: 5rem; }
.inicio-botones-esquina .btn { flex: 1 1 11rem; }

/* «Un día como hoy» (coral) con su polaroid. */
.inicio-recuerdo .polaroid { width: min(15rem, 82%); }
.inicio-recuerdo .fila-btn { margin-top: auto; }
.inicio-recuerdo .btn.coral svg { fill: currentColor; }
.inicio-recuerdo-otros { display: flex; flex-direction: column; gap: 0.4rem; }
.inicio-recuerdo-minis { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.inicio-recuerdo-minis a { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; color: var(--tinta); font-size: 0.82rem; font-weight: 700; text-decoration: none; border-radius: 1rem; }
.inicio-recuerdo-minis a:hover span { text-decoration: underline; }
.inicio-recuerdo-minis img { width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: 1rem; border: 3px solid #FFFFFF; box-shadow: var(--sombra); }

/* Animal perdido cerca: borde y banda rojos. */
.inicio-perdido { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; padding-bottom: 0.7rem; border-radius: 1.8rem; background: var(--tarjeta); border: 3px solid var(--alerta); overflow: hidden; }
.inicio-perdido-banda { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.1rem; background: var(--alerta); color: var(--sobre-cielo); font-weight: 800; }
.inicio-perdido-banda svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
.inicio-perdido-cuerpo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.9rem; padding: 0 1rem; }
.inicio-perdido-cuerpo img { width: 6.5rem; height: 6.5rem; flex-shrink: 0; border-radius: 1.3rem; object-fit: cover; }
.inicio-perdido-cuerpo .pila-s { flex: 1 1 10rem; min-width: 0; }
.inicio-perdido .fila-btn { margin: auto 1rem 0; }
.inicio-perdido .inicio-enlace { margin: 0 1rem; }
:root[data-contraste='alto'] .inicio-perdido-banda { color: #000000; }

/* Próximos cuidados (salvia) y quedadas (lavanda). */
.inicio-cuidados .icono-caja { background: var(--tarjeta); }
.inicio-quedadas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.inicio-quedadas-lista a { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.7rem; border-radius: 1.2rem; background: var(--tarjeta); color: var(--tinta); text-decoration: none; }
.inicio-quedadas-lista a:hover b { text-decoration: underline; }
.inicio-quedadas-lista .crece { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.inicio-quedadas-lista .fecha-bloque { background: var(--lavanda-suave); color: var(--lavanda-osc); }
:root[data-contraste='alto'] .inicio-quedadas-lista a { border: 2px solid #FFFFFF; }

/* Adopción destacada: salvia fuerte, foto grande y su frase escrita a mano. */
.inicio-adopta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); padding: 0; border-radius: 2rem; }
.inicio-adopta-foto { position: relative; min-height: 16rem; }
.inicio-adopta-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inicio-adopta-foto .pegatina { position: absolute; left: 1rem; top: 1rem; }
.inicio-adopta-texto { display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; padding: 1.4rem 1.4rem 1.5rem; min-width: 0; }
.inicio-adopta h2 { font-size: 1.8rem; line-height: 1.05; }
.inicio-adopta .nota { color: var(--canela-suave); font-size: 1.65rem; }
.inicio-btn-claro { background: var(--suelo); color: var(--tinta); }
.inicio-btn-claro:hover { background: var(--tarjeta); color: var(--tinta); }
.inicio-btn-claro svg { color: var(--cielo); fill: currentColor; }
.inicio-btn-borde { background: transparent; color: inherit; border-color: currentColor; }
.inicio-btn-borde:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
:root[data-contraste='alto'] .inicio-btn-claro { background: #FFE14D; }
:root[data-contraste='alto'] .inicio-btn-claro svg { color: #000000; }

/* ------------------------------------------------------------ publicaciones: una columna en el móvil, dos si caben */
.inicio-muro { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; align-items: start; }
.inicio-muro > .vacio, .inicio-muro > .cargando, .inicio-muro > .inicio-ancho { grid-column: 1 / -1; }
.inicio-mas { width: 100%; }

/* ============================================================ portada (sin sesión) */
.portada { gap: 2.2rem; }
.portada-h2 { font-size: 1.6rem; }
.bienvenida-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; margin: -1rem -0.85rem 0; background: var(--cielo-suave); }
.bienvenida-hero::before, .bienvenida-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.bienvenida-hero::before { right: -5rem; top: -4rem; width: 16rem; height: 16rem; background: color-mix(in srgb, var(--cielo) 14%, transparent); }
.bienvenida-hero::after { left: -3rem; top: 9rem; width: 9rem; height: 9rem; background: color-mix(in srgb, var(--canela) 26%, transparent); }
.bh-dibujo { position: relative; z-index: 1; display: flex; justify-content: center; padding: 1.6rem 1rem 0.6rem; }
.bh-dibujo .personaje { width: min(21rem, 90%); height: auto; }
.bh-tarjeta {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.8rem 1.4rem 1.6rem;
  border-radius: 2.4rem 2.4rem 0 0; background: var(--tarjeta); box-shadow: 0 -12px 30px rgba(140, 70, 40, 0.12);
}
.bh-tarjeta h1 { font-size: 2.35rem; line-height: 1.02; letter-spacing: -0.02em; }
.bh-texto { color: var(--tinta-2); }
.bh-tarjeta .btn { width: 100%; }
.bh-tarjeta .btn.coral svg { fill: currentColor; }
.bh-mirar { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; font-weight: 800; text-align: center; }
:root[data-contraste='alto'] .bienvenida-hero { border: 2px solid #FFFFFF; }
:root[data-contraste='alto'] .bienvenida-hero::before, :root[data-contraste='alto'] .bienvenida-hero::after { display: none; }
@media (min-width: 720px) {
  .bienvenida-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 1rem; margin: 0; padding: 1.6rem; border-radius: 2.4rem; }
  .bh-dibujo { padding: 0; }
  .bh-dibujo .personaje { width: 100%; }
  .bh-tarjeta { border-radius: 2rem; }
}

.portada-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.portada-quien { display: flex; flex-direction: column; gap: 0.55rem; border-radius: 1.8rem; }
.portada-ic { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 50%; }
.portada-ic svg { width: 1.5rem; height: 1.5rem; }
.portada-ic.coral { background: var(--cielo); color: var(--sobre-cielo); }
.portada-ic.miel { background: var(--canela); color: #3B2420; }
.portada-ic.salvia { background: var(--hoja); color: var(--sobre-cielo); }
.portada-ic.lavanda { background: var(--lavanda); color: var(--sobre-cielo); }
.portada-ic.alerta { background: var(--alerta); color: var(--sobre-cielo); }
:root[data-contraste='alto'] .portada-ic { color: #000000; }
.portada-enlace { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2.75rem; margin-top: auto; color: var(--tinta); font-weight: 800; text-decoration: underline; }
.portada-enlace:hover { color: var(--tinta); text-decoration-thickness: 2px; }

.portada-hacer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0.9rem 1.2rem; }
.portada-hacer li { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1rem; border-radius: 1.6rem; background: var(--tarjeta); box-shadow: var(--sombra); }
.portada-hacer li > div { min-width: 0; }
:root[data-contraste='alto'] .portada-hacer li { border: 2px solid #FFFFFF; }

.portada-razas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem 1.6rem; padding: 1.5rem 1.4rem; border-radius: 2rem; }
.portada-razas-fotos { display: flex; justify-content: center; flex: 1 1 14rem; }
.portada-raza-foto { display: block; width: 6.4rem; height: 6.4rem; margin-left: -1rem; overflow: hidden; border-radius: 50%; border: 5px solid #FFFFFF; background: var(--cielo-suave); box-shadow: var(--sombra); }
.portada-raza-foto:first-child { margin-left: 0; }
.portada-raza-foto:nth-child(2) { transform: translateY(-0.6rem); }
.portada-raza-foto img { width: 100%; height: 100%; object-fit: cover; }
.portada-razas-texto { flex: 999 1 18rem; min-width: 0; }

.portada-mirar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem; }
.portada-mirar .btn { justify-content: flex-start; text-align: left; }