/* ---------- Inicio (js/inicio/index.js) ---------- */

#vista-inicio {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

#vista-inicio[hidden] {
  display: none;
}

#vista-inicio button {
  font-family: inherit;
  color: var(--t-texto);
  cursor: pointer;
}

#vista-inicio .icono {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* ---------- Saludo ---------- */

.inicio-cabecera {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.2rem 0;
}

/* El cuaderno del saludo: sus dos marcapáginas asoman por turnos, cada 4 s uno (la fase la pone
   el JS para que no salte al repintar). Como en el logo del menú, el dibujo queda por debajo
   del centro de su caja (lleva aire arriba para que suban los marcapáginas): se sube para que la
   libreta quede a la altura del saludo. */
.inicio-logo {
  flex: none;
  position: relative;
  top: -0.5rem;
  width: 4.6rem;
  height: 4.6rem;
}

.inicio-logo .marca {
  animation: inicio-marca 8s ease-in-out infinite;
  animation-delay: var(--fase, 0s);
}

.inicio-logo .marca + .marca {
  animation-delay: calc(var(--fase, 0s) - 4s);
}

@keyframes inicio-marca {
  0%, 30%, 56%, 100% { transform: translateY(0); }
  40%, 46% { transform: translateY(-40px); }
}

@media (prefers-reduced-motion: reduce) {
  .inicio-logo .marca {
    animation: none;
  }
}

.inicio-saludo {
  flex: 1;
  min-width: 0;
}

.inicio-saludo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.inicio-saludo h1 {
  margin: 0;
  overflow: hidden;
  font-size: 2.7rem;
  line-height: 1.05;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Un vistazo bajo el saludo: lockes en marcha y amigos conectados */
.inicio-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  margin: 0;
  color: var(--t-gris-2);
  font-size: 0.95rem;
  font-weight: 700;
}

.inicio-resumen b {
  font-family: var(--letra-titulos);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--t-texto);
}

.inicio-resumen .en-linea b {
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

/* Cuántos usuarios hay, a la derecha de la cabecera */
.inicio-usuarios {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  color: var(--t-gris-2);
  font-size: 0.95rem;
  font-weight: 700;
}

.inicio-usuarios b {
  font-family: var(--letra-titulos);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--t-texto);
}

.inicio-avisos,
.inicio-entrar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  padding: 0.55rem 0.9rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.inicio-avisos {
  background: rgba(241, 196, 15, 0.15);
  box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.5);
}

.inicio-avisos .icono {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.inicio-avisos:hover {
  background: rgba(241, 196, 15, 0.25);
}

.inicio-entrar {
  background: rgb(var(--color-vista));
}

.inicio-entrar:hover {
  filter: brightness(1.12);
}

.inicio-entrar.grande {
  padding: 0.75rem 1.3rem;
  font-size: 1rem;
}

/* ---------- Lockes en marcha y conectados ---------- */

.inicio-columnas {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

/* Fondo de las tarjetas de dentro de los bloques (lockes, equipos, secciones, avisos, novedades):
   más claro que el bloque para que se vea dónde empieza cada una. En claro, blancas (con la sombra
   ya se distinguen; más oscuras que el bloque se verían grises). */
:root {
  --inicio-tarjeta: var(--t-panel-5);
  --inicio-tarjeta-encima: var(--t-control);
  --inicio-tarjeta-sombra: 0 2px 6px rgba(0, 0, 0, 0.25);
}

:root[data-tema="claro"] {
  --inicio-tarjeta: var(--t-panel);
  --inicio-tarjeta-encima: var(--t-panel-3);
}

.inicio-bloque {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 0.9rem;
  background: var(--t-fondo-2);
  /* La tira de arriba, en el color de cada bloque (como las fichas de Lockes) */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 3px 0 rgb(var(--color-bloque, 128, 128, 128));
}

/* Títulos de bloque: en grande, con su icono suelto y una línea de puntos debajo */
.inicio-bloque h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  /* Sale hasta los bordes del bloque para que la línea de puntos lo cruce entero */
  margin: 0 -1.1rem 0.2rem;
  padding: 0.1rem 1.1rem 0.65rem;
  border-bottom: 1px dashed rgba(var(--t-tinte), 0.25);
  font-size: 1.3rem;
}

/* Bloques que llevan a su sección al pulsarlos: Lockes, Conectados y Últimos equipos */
.inicio-enlace {
  cursor: pointer;
  transition: transform 0.15s;
}

.inicio-enlace:hover {
  transform: translateY(-2px);
}

.inicio-enlace h2::after {
  content: "→";
  margin-left: auto;
  color: color-mix(in srgb, rgb(var(--color-bloque)) var(--t-vivo), black);
  opacity: 0;
  transition: opacity 0.15s;
}

.inicio-enlace:hover h2::after {
  opacity: 1;
}

#vista-inicio .inicio-bloque h2 .icono {
  width: 1.2rem;
  height: 1.2rem;
  color: color-mix(in srgb, rgb(var(--color-bloque, 128, 128, 128)) var(--t-vivo), black);
}

.inicio-vacio {
  margin: 0.2rem 0;
  font-size: 0.9rem;
  opacity: 0.6;
}

/* Cada locke: su color a la izquierda, nombre y juego, las caras y tus cifras */
.inicio-locke {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 1.1rem;
  border: none;
  border-radius: 0.8rem;
  /* La capa del color del locke a la izquierda, difuminada hacia dentro */
  background: linear-gradient(100deg, color-mix(in srgb, var(--color-locke, #3498db) 16%, transparent), transparent 70%), var(--inicio-tarjeta);
  box-shadow: inset 5px 0 0 var(--color-locke, #3498db), var(--inicio-tarjeta-sombra);
  text-align: left;
  transition: transform 0.15s;
}

.inicio-locke:hover {
  transform: translateY(-2px);
}

.inicio-locke-datos {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
  padding-left: 0.2rem;
}

/* El tipo, como etiqueta de pestaña: rayita y nombre en su color */
.inicio-locke-tipo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-locke, #3498db) var(--t-vivo), black);
}

.inicio-locke-tipo::before {
  content: "";
  width: 1.1rem;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.inicio-locke-nombre,
.inicio-locke-juego {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inicio-locke-nombre {
  font-family: var(--letra-titulos);
  font-size: 1.45rem;
  line-height: 1.1;
}

.inicio-locke-juego {
  font-size: 0.82rem;
  opacity: 0.65;
}

/* Las caras, montadas un poco unas encima de otras */
.inicio-locke-caras {
  display: flex;
  flex: none;
}

.inicio-locke-caras .inicio-cara + .inicio-cara {
  margin-left: -0.45rem;
}

.inicio-cara {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  overflow: hidden;
  /* Del color de la tarjeta: separa las caras que se montan unas sobre otras */
  border: 2px solid var(--inicio-tarjeta);
  border-radius: 50%;
  background: var(--t-control);
  box-sizing: border-box;
  font-size: 0.8rem;
  font-weight: bold;
}

.inicio-cara img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.inicio-cara img[src^="data:"] {
  image-rendering: auto;
}

/* Tus números, en grande y con su etiqueta debajo, separados por rayas de puntos */
.inicio-locke-cifras {
  display: flex;
  flex: none;
  justify-content: flex-end;
}

.inicio-cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.9rem;
  padding: 0 0.7rem;
}

.inicio-cifra + .inicio-cifra {
  border-left: 1px dashed rgba(var(--t-tinte), 0.22);
}

.inicio-cifra b {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  font-family: var(--letra-titulos);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
}

.inicio-cifra small {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.65;
}

.inicio-cifra.victorias b { color: color-mix(in srgb, #f1c40f var(--t-vivo), black); }
.inicio-cifra.vidas b { color: #e74c3c; }
.inicio-cifra.medallas b { color: color-mix(in srgb, #e67e22 var(--t-vivo), black); }
.inicio-cifra.vidas.fuera { opacity: 0.6; }
.inicio-cifra.vidas.fuera b { color: var(--t-texto); }
#vista-inicio .inicio-cifra b .icono { width: 1.7rem; height: 1.7rem; }

.inicio-pie {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

/* Sin ningún botón a la vista (p. ej. «Ver todos» cuando todo cabe), el pie no ocupa sitio */
.inicio-pie:not(:has(> :not([hidden]))) {
  display: none;
}

.inicio-pie button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  font-size: 0.85rem;
  font-weight: bold;
}

.inicio-pie button:hover {
  background: var(--t-control-2);
}

/* El botón de crear, en el color de su sección */
.inicio-lockes { --color-bloque: 214, 88, 76; }
.inicio-equipos { --color-bloque: 91, 141, 239; }
.inicio-amigos { --color-bloque: 80, 190, 215; }
.inicio-avisos-web { --color-bloque: 241, 196, 15; }

.inicio-pie .inicio-principal {
  background: rgb(var(--color-bloque));
}

.inicio-pie .inicio-principal:hover {
  background: rgb(var(--color-bloque));
  filter: brightness(1.12);
}

/* Al lado de los lockes: conectados y, debajo, los equipos */
.inicio-lado {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}

.inicio-equipo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  padding: 0.6rem 0.8rem 0.6rem 0.9rem;
  border: none;
  border-radius: 0.7rem;
  background: var(--inicio-tarjeta);
  box-shadow: inset 4px 0 0 rgb(var(--color-bloque)), var(--inicio-tarjeta-sombra);
  text-align: left;
}

.inicio-equipo:hover {
  background: var(--inicio-tarjeta-encima);
}

.inicio-equipo strong {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Amigos conectados: foto con el aro verde y el nombre debajo */
.inicio-amigos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 0.3rem;
}

.inicio-amigo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.45rem 0.2rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 0.8rem;
  font-weight: bold;
}

.inicio-amigo:hover {
  background: rgba(var(--t-tinte), 0.06);
}

.inicio-amigo > span:last-child {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inicio-cara.grande {
  width: 2.8rem;
  height: 2.8rem;
  border-color: var(--t-bien);
  font-size: 1.1rem;
}

/* ---------- Bienvenida (sin sesión) ---------- */

/* A la izquierda qué es la web y el botón de entrar; a la derecha sus secciones */
.inicio-bienvenida {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 1.6rem;
  padding: 1.6rem;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(var(--color-vista), 0.16), rgba(var(--color-vista), 0) 55%),
    var(--t-fondo-2);
  box-shadow: inset 0 0 0 1px rgba(var(--color-vista), 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* El icono grande y casi transparente de fondo, abajo a la izquierda */
.inicio-bienvenida::before {
  content: "";
  position: absolute;
  left: -5rem;
  bottom: -6rem;
  width: 18rem;
  height: 18rem;
  background: url("../img/icono.svg") center / contain no-repeat;
  opacity: 0.05;
  transform: rotate(-20deg);
  pointer-events: none;
}

.inicio-bienvenida-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.8rem;
}

.inicio-bienvenida .inicio-bienvenida-texto h2 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 1.9rem;
}

.inicio-bienvenida-texto p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  opacity: 0.85;
}

.inicio-bienvenida-texto b {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.inicio-bienvenida-texto .inicio-bienvenida-cuenta {
  font-size: 0.88rem;
  opacity: 0.65;
}

.inicio-bienvenida-texto .inicio-entrar {
  margin-top: 0.3rem;
}

.inicio-bienvenida-secciones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* Cada sección: su icono en su color y una línea de qué hace */
.inicio-seccion {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: none;
  border-radius: 0.55rem;
  background: var(--inicio-tarjeta);
  box-shadow: var(--inicio-tarjeta-sombra);
  text-align: left;
  transition: background 0.15s, box-shadow 0.15s;
}

.inicio-seccion:hover {
  background: var(--inicio-tarjeta-encima);
  box-shadow: inset 0 0 0 1px rgba(var(--color-seccion), 0.55), var(--inicio-tarjeta-sombra);
}

.inicio-seccion-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  color: color-mix(in srgb, rgb(var(--color-seccion)) var(--t-vivo), black);
}

#vista-inicio .inicio-seccion-icono .icono {
  width: 1.4rem;
  height: 1.4rem;
}

.inicio-seccion-datos {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.inicio-seccion-datos strong {
  font-size: 0.92rem;
}

.inicio-seccion-datos span {
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.65;
}

/* ---------- Notas y avisos ---------- */

.inicio-nota {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  opacity: 0.8;
}

.inicio-avisos-lista {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
}

/* Cada aviso, como los lockes: su color a la izquierda */
.inicio-avisos-lista li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.55rem;
  background: var(--inicio-tarjeta);
  box-shadow: inset 3px 0 0 rgb(var(--color-aviso)), var(--inicio-tarjeta-sombra);
  font-size: 0.9rem;
  line-height: 1.5;
}

.inicio-avisos-lista b {
  color: var(--t-texto-fuerte);
}

.inicio-aviso-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: color-mix(in srgb, rgb(var(--color-aviso)) var(--t-vivo), black);
}

#vista-inicio .inicio-aviso-icono .icono {
  width: 1.3rem;
  height: 1.3rem;
}

/* ---------- Novedades ---------- */
/* Debajo de los lockes: las últimas tres en fila, cada una con el color de su sección a la
   izquierda (como los avisos). Pulsando una se va a su sección. */

.inicio-novedades { --color-bloque: 114, 182, 200; }

.inicio-novedades-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inicio-novedad {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: 0.55rem;
  background: var(--inicio-tarjeta);
  box-shadow: inset 3px 0 0 rgb(var(--color-aviso)), var(--inicio-tarjeta-sombra);
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.inicio-novedad:hover {
  background: var(--inicio-tarjeta-encima);
}

.inicio-novedad b {
  color: var(--t-texto-fuerte);
}

.inicio-novedad-fecha {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  opacity: 0.55;
}

/* En «Ver todas», una debajo de otra */
#dialogo-novedades {
  width: min(34rem, calc(100vw - 2rem));
}

#dialogo-novedades .inicio-novedades-lista {
  grid-template-columns: minmax(0, 1fr);
  max-height: 65vh;
  overflow-y: auto;
}

#dialogo-novedades .inicio-aviso-icono .icono {
  width: 1.3rem;
  height: 1.3rem;
}

/* ---------- Sugerencias ---------- */

.inicio-sugerencias { --color-bloque: 231, 76, 60; }

.sugerencias-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.sugerencias-texto {
  width: 100%;
  min-height: 6.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: var(--t-panel);
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: vertical;
}

.sugerencias-texto::placeholder {
  color: rgba(var(--t-texto-rgb), 0.4);
}

.sugerencias-texto:focus {
  outline: none;
  border-color: rgba(var(--color-bloque), 0.7);
  background: #2f3144;
}

/* El mensaje de «Enviando…» / «¡Gracias!», a la izquierda del botón */
.sugerencias-aviso {
  align-self: center;
  margin-right: auto;
  font-size: 0.82rem;
  opacity: 0.75;
}

.sugerencias-aviso.ok {
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
  opacity: 1;
}

.sugerencias-aviso.error {
  color: var(--t-rojo);
  opacity: 1;
}

.inicio-pie button:disabled {
  opacity: 0.6;
  cursor: default;
  filter: none;
}

/* ---------- Con sesión, sin scroll ----------
   La sección ocupa justo la ventana (menos el margen de <main>): las dos filas se reparten el
   alto y, si algo no cabe, se desplaza solo su lista, por dentro del recuadro. En el móvil
   (una sola columna) no cabe: ahí sigue bajando como siempre. */

.inicio-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 761px) {
  #vista-inicio.inicio-fijo {
    height: calc(100vh - 1.7rem);
    height: calc(100dvh - 1.7rem);
    /* Lo justo para que no se corten las sombras de los recuadros */
    padding: 0 0.4rem 0.5rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  .inicio-fijo > .inicio-cabecera {
    flex: none;
  }

  .inicio-fijo > .inicio-columnas {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }

  .inicio-fijo .inicio-lado {
    min-height: 0;
  }

  .inicio-fijo .inicio-bloque {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  /* El último de cada lado se estira hasta abajo */
  .inicio-fijo .inicio-lado > .inicio-bloque:last-child {
    flex-grow: 1;
  }

  /* A la izquierda, al revés: los lockes se llevan el alto que sobra y las novedades, el suyo */
  .inicio-fijo .inicio-lado.inicio-izq > .inicio-bloque.inicio-lockes {
    flex: 1 1 auto;
  }

  .inicio-fijo .inicio-lado.inicio-izq > .inicio-bloque.inicio-novedades {
    flex: none;
  }

  .inicio-fijo .inicio-bloque > * {
    flex: none;
  }

  /* Nada de desplazarse dentro de las tarjetas: las listas enseñan las que caben (el JS esconde
     el resto, ver ajustarListas en js/inicio/index.js) */
  .inicio-fijo .inicio-bloque > .inicio-lista,
  .inicio-fijo .inicio-bloque > .inicio-amigos-lista {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  /* Conectados: como mucho dos filas de caras; no se estira ni se encoge */
  .inicio-fijo .inicio-amigos {
    flex: none;
  }

  .inicio-fijo .inicio-amigos-lista {
    flex: none;
    max-height: 10.2rem;
  }

  /* La fila de abajo (avisos y sugerencias) mide lo que mide su contenido; lo de arriba, el resto */
  .inicio-fijo > .inicio-fila-baja {
    flex: none;
    grid-template-rows: auto;
  }

  /* Los avisos, de dos en dos y enteros: caben todos, sin desplazar */
  .inicio-fijo .inicio-avisos-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  /* Las sugerencias: el cuadro de texto ocupa lo que quede */
  .inicio-fijo .inicio-bloque > .sugerencias-form {
    flex: 1 1 auto;
    min-height: 0;
  }

  .inicio-fijo .sugerencias-texto {
    flex: 1 1 auto;
    min-height: 3rem;
    resize: none;
  }

  .inicio-fijo .sugerencias-form .inicio-pie {
    flex: none;
  }
}

/* Sin sesión también cabe en la pantalla: la bienvenida mantiene su alto y las columnas de abajo
   se reparten el resto. En pantallas bajas, las secciones pierden su explicación. */
@media (min-width: 761px) {
  .inicio-fijo > .inicio-bienvenida {
    flex: none;
  }

  .inicio-fijo .inicio-avisos-lista li {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .inicio-fijo .inicio-seccion-datos span,
  .inicio-fijo .inicio-bienvenida-cuenta {
    display: none;
  }

  .inicio-fijo .inicio-bienvenida {
    padding: 1.1rem 1.4rem;
  }

  .inicio-fijo .inicio-seccion {
    align-items: center;
  }
}

/* Sin sesión, la bienvenida es lo principal: se lleva todo el alto que sobra, con las secciones
   y el texto más grandes, y lo de abajo (avisos y sugerencias) se queda en una franja baja. */
@media (min-width: 761px) {
  .inicio-invitado > .inicio-bienvenida {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 2.2rem;
    padding: 2rem 2.2rem;
  }

  .inicio-invitado .inicio-bienvenida-texto {
    gap: 1.1rem;
  }

  .inicio-invitado .inicio-bienvenida .inicio-bienvenida-texto h2 {
    font-size: 2.6rem;
    line-height: 1.05;
  }

  .inicio-invitado .inicio-bienvenida-texto p {
    font-size: 1.1rem;
  }

  .inicio-invitado .inicio-bienvenida-texto .inicio-bienvenida-cuenta {
    font-size: 0.98rem;
  }

  .inicio-invitado .inicio-bienvenida-secciones {
    grid-auto-rows: minmax(0, 1fr);
    gap: 0.7rem;
  }

  .inicio-invitado .inicio-seccion {
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem;
  }

  .inicio-invitado .inicio-seccion-datos strong {
    font-family: var(--letra-titulos);
    font-size: 1.2rem;
  }

  .inicio-invitado .inicio-seccion-datos span {
    font-size: 0.86rem;
  }

  .inicio-invitado .inicio-seccion-icono,
  .inicio-invitado #vista-inicio .inicio-seccion-icono .icono {
    width: 1.9rem;
    height: 1.9rem;
  }

  #vista-inicio.inicio-invitado .inicio-seccion-icono .icono {
    width: 1.8rem;
    height: 1.8rem;
  }

  .inicio-invitado .sugerencias-texto {
    min-height: 4.5rem;
  }
}

/* ---------- Al llegar a un locke desde Inicio: se ilumina un momento ---------- */

.locke.resaltado {
  animation: locke-resaltado 1.6s ease-out;
}

@keyframes locke-resaltado {
  0%, 30% { outline: 3px solid var(--color-locke, #3498db); outline-offset: 3px; }
  100% { outline: 3px solid transparent; outline-offset: 3px; }
}

/* ---------- Móvil ---------- */

@media (max-width: 760px) {
  .inicio-columnas {
    grid-template-columns: minmax(0, 1fr);
  }

  .inicio-cabecera {
    flex-wrap: wrap;
  }

  .inicio-saludo h1 {
    font-size: 1.5rem;
  }

  .inicio-locke-caras {
    display: none;
  }

  .inicio-locke {
    flex-wrap: wrap;
  }

  .inicio-locke-cifras {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .inicio-cifra:first-child {
    padding-left: 0;
  }

  .inicio-saludo h1 {
    font-size: 1.9rem;
  }

  .inicio-bienvenida {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.1rem;
  }

  .inicio-bienvenida .inicio-bienvenida-texto h2 {
    font-size: 1.45rem;
  }
}

@media (max-width: 480px) {
  .inicio-bienvenida-secciones {
    grid-template-columns: minmax(0, 1fr);
  }
}