/* Genesis Design System — "Color de Otoño".
   Regla central: el índigo es funcional, nunca decorativo. Solo aparece en
   lo que se puede pulsar, enfocar o activar. Nada de negro ni blanco puros
   en el texto, y ningún gradiente decorativo: la única textura permitida es
   la retícula de puntos. */
:root {
  --bg: #FAFAFA;            /* fondo de página, gris cálido */
  --bg-elev: #F4F4F5;       /* relleno sutil y fondos hover */
  --card: #FFFFFF;          /* superficies: tarjetas, paneles, modales */
  --border: #E8E8EC;        /* bordes y divisores, discretos */
  --text: #0A0A0A;          /* títulos y cuerpo */
  --text-muted: #6B6B6B;    /* descripciones y metadatos */
  --text-faint: #6E6E6E;    /* placeholders y marcas de tiempo: 4.6:1 sobre el fondo */
  --accent: #5D5FEA;        /* índigo: solo interactivo. Un punto más
                               oscuro que #6366F1 para que el blanco encima
                               llegue a 4.9:1; con el anterior daba 4.47. */
  --accent-hover: #4F46E5;
  --accent-text: #4F46E5;   /* el índigo como texto: 6.0:1 */
  --accent-ink: #FFFFFF;    /* texto sobre índigo */
  --success: #0B7A5A;   /* verde legible: el #10B981 daba 2.4:1 */
  --warning: #9A5B00;   /* ámbar legible: el #F59E0B daba 2.1:1 */
  --danger: #C62828;    /* rojo legible: el #EF4444 daba 3.6:1 */
  /* Alias heredados, para no reescribir cada regla antigua */
  --accent-2: #4F46E5;   /* el mismo índigo legible: solo texto y bordes */
  --accent-suave: #A5B4FC;  /* la nube de detrás del logo */
  --accent-3: #0B7A5A;
  color-scheme: light dark;
  --radius: 12px;
  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.12);
  --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.08);
  /* Superficies que flotan sobre una foto: el menú de un vib, el botón de
     cambiar la portada. Como el color depende del tema, va en una ficha. */
  --velo: rgba(255, 255, 255, 0.88);
  --velo-solido: #FFFFFF;
  /* Alias que ya se usaban en reglas sueltas con un valor por defecto. */
  --surface: #FFFFFF;
  --surface-2: #F4F4F5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 1rem;      /* 16px: por debajo de eso iOS amplía al escribir */
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--velo);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--text);
  flex-shrink: 0;
}

/* La barra de arriba era un bloque con enlaces en línea, y eso rompía en el
   teléfono: "Crear cuenta" es una pastilla con relleno, y un elemento en
   línea con relleno se monta sobre la línea anterior en vez de empujarla.
   El resultado era "Entrar" tapado por el botón. Además el gap que ya se
   declaraba para el teléfono no hacía nada, porque un gap necesita flex. */
.topbar nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
.topbar nav > a { margin-left: 0; }

nav a {
  margin-left: 18px;
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color 0.15s;
}
nav a:hover { color: var(--text); }
nav a.cta {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
}

.footer {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--border);
}

/* ---- flashes ---- */
.flashes { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.92rem;
  border: 1px solid var(--border);
}
.flash-success { background: rgba(16, 185, 129, 0.12); border-color: var(--success); }
.flash-error { background: rgba(239, 68, 68, 0.12); border-color: var(--danger); }

/* ---- hero ---- */
.hero { text-align: center; padding: 48px 0 24px; }
.hero h1 { font-size: 2.3rem; margin-bottom: 12px; max-width: 720px; margin-inline: auto; }
.hero p { color: var(--text-muted); max-width: 620px; margin: 0 auto 24px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 40px 0;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.feature-card h3 { margin: 0 0 8px; font-size: 1rem; }
.feature-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* ---- buttons ---- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); transition: background 0.12s, transform 0.2s, box-shadow 0.2s; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); }
.btn-ghost:hover { border-color: var(--text-faint); }
:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }

/* ---- forms ---- */
.auth-box, .dream-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 560px;
  margin: 0 auto;
}
.dream-form { max-width: 680px; }
/* El título va dentro de la tarjeta, como en el resto de formularios; sin
   este margen queda pegado al borde de arriba. */
.dream-form > h1:first-child { margin: 0 0 18px; }

/* Registrarse es la otra mitad de la entrada, separada de la de iniciar
   sesión por una línea para que no se lea como parte del formulario. */
.auth-alt {
  margin: 22px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.88rem;
}
.auth-alt-btn { display: block; width: 100%; text-align: center; }

/* Llamada a la acción al final de la portada, tras contar qué es la app. */
.hero-cta { text-align: center; margin: 40px auto 8px; }
.hero-cta h2 { margin-bottom: 16px; }
.hero-cta .hero-actions { justify-content: center; }

/* Elección de idioma en Ajustes. */
.lang-choice { display: flex; gap: 10px; flex-wrap: wrap; }

/* Detalle de una idea: la tarjeta enseña foto, título y descripción, y esto
   abre los pasos y los controles solo cuando hacen falta. */
.idea-detalle { margin-top: 8px; }
.idea-detalle > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.idea-detalle > summary::-webkit-details-marker { display: none; }
.idea-detalle > summary::after { content: "▸"; color: var(--text-muted); }
.idea-detalle[open] > summary::after { content: "▾"; }
.idea-detalle[open] { display: flex; flex-direction: column; gap: 8px; }

form label {
  display: block;
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
input, textarea, select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 0.94rem;
  font-family: inherit;
}
textarea { resize: vertical; }

fieldset.privacy-field {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
fieldset.privacy-field legend { padding: 0 6px; color: var(--text-muted); font-size: 0.85rem; }
.radio, .checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin-bottom: 8px; }
.radio input, .checkbox input { width: auto; margin: 0; }

.share-with-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.checkbox-list { display: flex; flex-wrap: wrap; gap: 10px 20px; }

.location-row { display: flex; gap: 8px; align-items: center; }
.location-row input { flex: 1; margin-top: 0; }
.location-row .btn { margin-top: 0; white-space: nowrap; }

.map-picker { margin-bottom: 16px; }
#picker-map, #world-map, #detail-map {
  height: 380px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-top: 8px;
  /* Sin esto, el recuadro blanco de los créditos de Leaflet —que tiene las
     esquinas rectas— pisa la esquina redondeada y parece que se sale. */
  overflow: hidden;
}

/* Los créditos de Esri son una lista larguísima de fuentes: a tamaño normal
   ocupan dos líneas y tapan el mapa. Se dejan legibles pero discretos. */
.leaflet-control-attribution {
  font-size: 10px;
  line-height: 1.35;
  max-width: 100%;
}
#world-map { height: 560px; }

.existing-media { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 16px; }
.existing-media-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.existing-media img, .existing-media video { height: 90px; border-radius: 8px; object-fit: cover; }

.suggested-photos { margin: 20px 0; }

/* Pinterest-style masonry: CSS columns let tiles keep their natural aspect
   ratio and stack without gaps, instead of a uniform cropped grid. */
.suggested-grid {
  columns: 3 220px;
  column-gap: 14px;
  margin-top: 12px;
}
.suggested-topics { margin: 20px 0; }

.suggestion-card {
  break-inside: avoid;
  margin-bottom: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.suggestion-card-media { position: relative; }
.suggestion-card-media img { width: 100%; height: auto; display: block; }
.play-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.68rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.suggestion-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.suggestion-card-title { margin: 0; font-weight: 600; font-size: 0.92rem; }
.suggestion-card-source { margin: 0; font-size: 0.76rem; }
.suggestion-card-reason { margin: 4px 0 8px; font-size: 0.8rem; color: var(--text-muted); }
.suggestion-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.suggestion-card-actions .btn { margin-top: 0; }
.suggestion-card-actions .add-toggle-btn.added { background: var(--accent-3); }

.cover-pick { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; }
.cover-pick input { width: auto; margin: 0; }
.cover-pick input:disabled { opacity: 0.4; }

.attached-topics { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.attached-topic {
  display: flex; gap: 10px; align-items: center;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 8px;
}
.attached-topic img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.attached-topic strong { display: block; font-size: 0.88rem; }
.attached-topic .muted { font-size: 0.8rem; }

.attached-articles { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; }

/* ---- tabs ---- */
.tabs { display: flex; gap: 8px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.tab { padding: 10px 16px; color: var(--text-muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--accent-text); border-color: var(--accent); }

/* ---- dream grid / cards (Pinterest/Instagram-style, image-first) ---- */
/* Rejilla de mampostería, al estilo de Pinterest: columnas de ancho fijo y
   tarjetas de altura libre, para que cada foto se vea entera en vez de
   recortada a un 4:3 que no le corresponde. Se hace con columnas de CSS y
   sin JavaScript; el orden de lectura pasa a ser por columnas, que es
   justo como se leen los tableros. */
.dream-grid {
  /* En el teléfono, dos columnas: con 170px solo cabía una y se perdía la
     gracia del tablero. En pantalla ancha las columnas crecen, porque
     cinco tarjetas estrechas se leen peor que cuatro cómodas. */
  columns: 150px;
  column-gap: 14px;
  margin-top: 12px;
}
@media (min-width: 700px) {
  .dream-grid { columns: 220px; }
}
.dream-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 14px;
  /* Sin esto, una tarjeta se parte entre el final de una columna y el
     principio de la siguiente. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  border-radius: var(--radius);
  background: var(--card);
  transition: transform 0.15s;
}
.dream-card:hover { transform: translateY(-2px); }
.dream-card:hover .dream-card-media { box-shadow: var(--shadow-hover); }
.dream-card-media {
  position: relative;
  background: var(--bg-elev);
  border-radius: var(--radius);
  overflow: hidden;
}
.dream-card-media img {
  width: 100%;
  height: auto;
  display: block;
  /* Una foto muy alargada no debe adueñarse de la columna entera. */
  max-height: 420px;
  object-fit: cover;
}
.dream-card-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev);
  color: var(--text-muted); font-weight: 500; font-size: 0.85rem; text-align: center; padding: 8px;
}
.dream-card-badge {
  position: absolute; top: 10px; right: 10px; margin: 0;
  background: var(--velo);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--text-muted);
}
/* El texto va debajo de la foto, sin caja ni borde: en un tablero lo que
   manda es la imagen y el título solo acompaña. */
.dream-card-overlay {
  padding: 8px 2px 0;
  display: flex; flex-direction: column; gap: 2px;
  color: var(--text);
}
.dream-card-overlay strong {
  font-size: 0.98rem;
  line-height: 1.3;
  /* Tres líneas. Con dos, un título como "Dominar la ceremonia del té
     matcha" se cortaba a mitad de frase y parecía un error. */
  max-height: 3.9em;
  overflow: hidden;
}
/* Se recorta a tres líneas: en una columna estrecha una descripción larga
   empujaría la foto de abajo hasta el otro extremo del tablero. */
.dream-card-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.35;
  max-height: 4.05em;  /* tres líneas */
  overflow: hidden;
}
.dream-card-overlay .muted { color: var(--text-muted); font-size: 0.82rem; }
.muted { color: var(--text-muted); font-size: 0.9rem; }

.badge {
  align-self: flex-start;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 4px;
}
.badge-private { background: var(--bg-elev); color: var(--text-muted); }
.badge-shared { background: rgba(99, 102, 241, 0.12); color: var(--accent-hover); }
.badge-public { background: rgba(16, 185, 129, 0.12); color: #0B7A5B; }
.badge-cover { background: rgba(245, 158, 11, 0.14); color: #92610A; position: absolute; top: 10px; left: 10px; margin: 0; }

.empty-state {
  color: var(--text-muted);
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ---- dream detail ---- */
.dream-detail { max-width: 760px; margin: 0 auto; }
.dream-detail-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.owner-actions { display: flex; gap: 10px; margin: 12px 0; }
.dream-description { white-space: pre-wrap; margin: 16px 0; }

/* ---- vibs (collections within a dream) ---- */
.vibs { margin-top: 32px; }
.vibs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vibs-header h2 { margin: 0; }
.new-collection-form { display: flex; gap: 8px; margin-bottom: 20px; }
.new-collection-form[hidden] { display: none; }
.new-collection-form input[type="text"]:not(.icon-input) { flex: 1; margin-top: 0; }
.new-collection-form .icon-input { width: 56px; text-align: center; margin-top: 0; }
.vib-group { margin-bottom: 24px; }
.vib-group-header {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; margin-bottom: 10px;
}
.vib-group-header .muted { font-weight: 400; margin-left: auto; }
.vib-group-delete {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.9rem; padding: 2px 6px; border-radius: 6px;
}
.vib-group-delete:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.vib-empty { margin: 0 0 8px; }
/* Los vibs de un sueño se leen igual que el tablero de la portada: columnas
   de altura libre, cada foto con su proporción. Recortarlas todas a 120px
   convertía un tablero en una hoja de contactos. */
.vib-items {
  columns: 140px;
  column-gap: 12px;
}
@media (min-width: 700px) {
  .vib-items { columns: 190px; }
}
.vib-item {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  margin: 0 0 12px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vib-item img, .vib-item video {
  width: 100%;
  height: auto;
  /* Una foto muy alargada no debe adueñarse de la columna. */
  max-height: 360px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
/* La foto se pasea despacio mientras el cursor está encima: no un salto de
   tamaño, sino un movimiento continuo, que es lo que se ve. El recorte del
   contenedor es lo que impide que se salga de su marco. */
.vib-item-photo, .vib-item-video { overflow: hidden; }
.vib-item img, .vib-item video, .dream-card-media img {
  transition: transform 0.6s ease;
  will-change: transform;
}

@keyframes paseo {
  0%   { transform: scale(1.06) translate(0, 0); }
  25%  { transform: scale(1.12) translate(-2.5%, -1.5%); }
  50%  { transform: scale(1.14) translate(0, -3%); }
  75%  { transform: scale(1.12) translate(2.5%, -1.5%); }
  100% { transform: scale(1.06) translate(0, 0); }
}

/* Solo donde hay cursor de verdad. En una pantalla táctil, ":hover" se queda
   pegado tras el toque y la foto no pararía nunca. */
@media (hover: hover) and (pointer: fine) {
  .vib-item:hover img,
  .vib-item:hover video,
  .dream-card:hover .dream-card-media img {
    animation: paseo 7s ease-in-out infinite;
  }
}

/* El equivalente táctil: mientras se mantiene el dedo, la foto se acerca. */
.vib-item:active img,
.vib-item:active video,
.dream-card:active .dream-card-media img { transform: scale(1.08); }
.vib-item-topic { justify-content: flex-start; min-height: 90px; }
.vib-item-topic strong { font-size: 0.88rem; }
.vib-move select {
  width: 100%; margin: 0; padding: 4px 8px; font-size: 0.85rem;
  border-radius: 6px;
}

/* ---- profile / people ---- */

/* Facebook-style cover photo + overlapping avatar */
.fb-cover {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
}
.fb-cover img, .fb-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Retícula de puntos: la única decoración que admite el sistema. */
.fb-cover-placeholder {
  width: 100%; height: 100%;
  background-color: var(--bg-elev);
  background-image: radial-gradient(var(--border) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}
.fb-cover-upload { position: absolute; bottom: 12px; right: 12px; margin: 0; }
.fb-photo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--velo); backdrop-filter: saturate(180%) blur(12px);
  color: var(--text); font-size: 0.8rem; font-weight: 500;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border);
}
.fb-photo-btn:hover { background: var(--velo-solido); }

.fb-header { margin-top: 12px; position: relative; z-index: 2; }
.fb-header .fb-avatar-wrap { margin-top: -64px; }
.fb-header .profile-identity { align-items: flex-end; }
.fb-avatar-wrap .avatar-photo, .fb-avatar-wrap .avatar {
  border: 4px solid var(--bg);
  background: var(--bg-elev);
}
.fb-avatar-wrap { position: relative; flex-shrink: 0; }
.fb-avatar-wrap .avatar { width: 112px; height: 112px; font-size: 2.4rem; border: 4px solid var(--bg); }
.fb-avatar-btn {
  position: absolute; bottom: 4px; right: 4px;
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; border-radius: 50%; gap: 0;
}

.profile-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.profile-identity { display: flex; align-items: center; gap: 16px; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted); font-weight: 600; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
.avatar-photo { object-fit: cover; }
.profile-header h1 { margin: 0 0 4px; }
.profile-stats { display: flex; gap: 16px; margin-top: 8px; font-size: 0.85rem; color: var(--text-muted); }
.profile-stats strong { color: var(--text); }
.people-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.people-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px;
}
.inline-form { margin-left: auto; }
.search-form { display: flex; gap: 10px; max-width: 400px; margin-bottom: 20px; }

/* ---- coming soon ---- */
.coming-soon {
  text-align: center;
  max-width: 420px;
  margin: 60px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.coming-soon-icon { font-size: 2.6rem; }

/* ---- bud (AI assistant) ---- */
.bud-summary { margin-top: 24px; }
.bud-summary .bud-history { margin-bottom: 0; }
.bud-intro { text-align: center; max-width: 480px; margin: 0 auto 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bud-chat { max-width: 560px; margin: 0 auto; }
.bud-chat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.bud-history { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.bud-qa {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px;
}
.bud-qa-question { margin: 0 0 4px; font-weight: 600; font-size: 0.95rem; }
.bud-qa-answer { margin: 0; color: var(--accent-3); font-size: 0.92rem; }

.bud-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.bud-card-icon { font-size: 2rem; margin-bottom: 10px; }
.bud-card-question { font-size: 1.05rem; font-weight: 700; margin: 0 0 18px; }
.bud-loading, .bud-done, .bud-error { color: var(--text-muted); }
.bud-done p, .bud-error p { margin-bottom: 14px; }

.bud-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.bud-option-btn {
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  padding: 12px 16px; border-radius: 10px; text-align: left; cursor: pointer; font-size: 0.92rem;
}
.bud-option-btn:hover { border-color: var(--accent-2); }
.bud-option-btn.selected { border-color: var(--accent); background: rgba(99, 102, 241, 0.08); }

.bud-scale { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.bud-scale-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; font-weight: 600;
}
.bud-scale-btn:hover { border-color: var(--accent-2); }
.bud-scale-btn.selected { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.bud-answer-input { margin-bottom: 16px; }

.bud-why {
  text-align: left; font-size: 0.82rem; color: var(--text-muted);
  background: var(--bg-elev); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
}
.bud-actions { display: flex; gap: 10px; justify-content: center; }

/* ---- bottom nav (mobile app-style tab bar) ---- */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: var(--velo);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  color: var(--text-muted);
  font-size: 0.66rem;
  border-radius: 10px;
}
.bottom-nav-item.active { color: var(--accent-text); font-weight: 600; }
.bottom-nav-icon {
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  height: 26px;
}
/* Los iconos son de trazo y heredan currentColor, así que la pestaña activa
   se tiñe sola. A 24px el trazo se sigue distinguiendo sin gafas. */
.bottom-nav-icon svg { width: 24px; height: 24px; display: block; }
/* La activa se marca dos veces: color y una barra fina arriba. Solo el color
   no basta para quien no distingue bien el índigo del gris. */
.bottom-nav-item.active::before {
  content: "";
  position: absolute; top: 0; left: 18%; right: 18%;
  height: 2px; border-radius: 0 0 2px 2px;
  background: var(--accent);
}
.bottom-nav-item { position: relative; }
.bottom-nav-fab .bottom-nav-icon {
  background: var(--accent);
  color: var(--accent-ink);
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: -16px;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.38);
}
.bottom-nav-fab .bottom-nav-icon svg { width: 22px; height: 22px; }
/* Bud es el único botón elevado de la barra; no necesita además la barra
   de pestaña activa encima del círculo. */
.bottom-nav-fab.active::before { display: none; }
.bottom-nav-fab.active { color: var(--text-muted); }

@media (max-width: 640px) {
  /* Con sesión abierta, los enlaces de la barra superior los sustituye la
     barra inferior. Sin sesión no hay barra inferior, así que si se ocultaran
     aquí también, no quedaría a la vista ni "Entrar" ni "Crear cuenta".
     El selector de idioma se queda siempre: no está en ninguna otra pantalla. */
  .is-authed .topbar nav > a { display: none; }
  .is-authed .topbar nav { gap: 0; }
  .topbar nav > a.nav-secondary { display: none; }
  /* El selector de idioma se muda a Ajustes: aquí no cabe sin encimarse con
     "Crear cuenta". La app arranca igual en el idioma del teléfono. */
  .topbar .lang-switch { display: none; }
  .topbar nav { gap: 8px; }
  .topbar nav > a { margin-left: 0; font-size: 0.85rem; }
  .topbar nav a.cta { padding: 7px 12px; }
  .brand { font-size: 1rem; white-space: nowrap; }
  .topbar .lang-switch { margin-left: 0; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .bottom-nav { display: flex; }
  .container { padding-bottom: 96px; }
  /* En el teléfono, los márgenes pensados para pantalla grande dejaban un
     hueco muerto entre la frase y las tarjetas. Se recorta para que lo que
     cuenta qué es la app suba y el conjunto quede equilibrado. */
  .container { padding-top: 14px; }
  .hero { padding: 0 0 8px; }
  /* A 2.3rem el titular se comía cuatro líneas de pantalla. Bajarlo deja ver
     de una vez lo que la app hace, sin tener que desplazar. */
  .hero h1 { font-size: 1.75rem; line-height: 1.25; }
  .hero p { margin-bottom: 12px; font-size: 0.92rem; }
  .features { margin: 16px 0; gap: 10px; }
  .feature-card { padding: 14px; }
  .dream-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .profile-identity { gap: 12px; }
  .avatar { width: 52px; height: 52px; font-size: 1.3rem; }
  .fb-cover { height: 140px; }
  .fb-header { margin-top: 10px; }
  .fb-header .fb-avatar-wrap { margin-top: -46px; }
  .fb-avatar-wrap .avatar { width: 76px; height: 76px; font-size: 1.6rem; border-width: 3px; }
  .fb-avatar-btn { width: 26px; height: 26px; font-size: 0.7rem; }
  .fb-header .profile-identity { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- encabezado de sección ---- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head h1 { margin: 0 0 4px; }
.section-head p { margin: 0; }
.section-head-actions { display: flex; gap: 10px; }
.footer-link { color: var(--accent-2); }
.fine-print { color: var(--text-muted); font-size: 0.78rem; line-height: 1.6; margin-top: 20px; }
.intent-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

/* ---- chips de filtro ---- */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 18px; }
.chip {
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-size: 0.84rem;
}
.chip.active { border-color: var(--accent); color: var(--accent-text); }

/* ---- tablero de inspiración (masonry estilo Pinterest) ---- */
.board { columns: 4 220px; column-gap: 16px; }
.board-card {
  transition: transform 0.2s, box-shadow 0.2s;
  break-inside: avoid;
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
}
.board-card-sponsored { border-color: var(--border); }
.board-card-img { width: 100%; height: auto; display: block; }
.board-card-emoji {
  font-size: 2.4rem;
  padding: 26px 18px;
  text-align: center;
  background-color: var(--bg-elev);
  background-image: radial-gradient(var(--border) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
}
.board-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.board-card-body h3 { margin: 0; font-size: 0.98rem; line-height: 1.3; }
.board-card-body p { margin: 0; font-size: 0.84rem; }
.board-card-for { font-size: 0.78rem; color: var(--text-muted); }
.board-card-link { font-size: 0.82rem; color: var(--accent-2); font-weight: 600; }
.board-card form { margin-top: 4px; }

.sponsored-tag {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--bg-elev);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.sponsored-tag-sm { border: none; border-radius: 6px; padding: 4px 8px; text-transform: none; letter-spacing: 0; }
.sponsored-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0; }
.vib-item-sponsored { border-color: var(--border); background: var(--bg-elev); }

/* ---- asistente de descubrimiento ---- */
.discover { max-width: 720px; margin: 0 auto; }
.discover-intro { text-align: center; margin-bottom: 32px; }
.discover-icon { font-size: 2.6rem; }
.discover-form { display: flex; flex-direction: column; gap: 22px; }
.discover-q { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--card); }
.discover-q legend { font-weight: 700; padding: 0 8px; }
.discover-help { margin: 0 0 12px; font-size: 0.84rem; }
.discover-options { display: flex; flex-direction: column; gap: 8px; }
.discover-option {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
}
.discover-option:hover { border-color: var(--accent-2); }
.discover-option input { width: auto; margin: 0; }
.discover-option.selected { border-color: var(--accent); background: rgba(99, 102, 241, 0.08); }
.discover-results { margin-top: 40px; }
.discover-profile { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.discover-profile li { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding-bottom: 6px; font-size: 0.88rem; }
.discover-catalog { margin-top: 40px; }
.discover-questionnaire { margin-top: 40px; }

/* Categorías desplegables: se abren de una en una, sin recargar la página. */
.category-accordion-list { display: flex; flex-direction: column; gap: 10px; }
.category-accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 4px 16px;
}
.category-accordion summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.category-accordion summary::-webkit-details-marker { display: none; }
.category-accordion summary::before { content: "▸"; color: var(--text-muted); transition: transform 0.15s ease; }
.category-accordion[open] summary::before { transform: rotate(90deg); }
.category-count { font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
.category-accordion .board,
.category-accordion .dream-grid { padding-bottom: 16px; }

/* ---- consentimiento ---- */
.consent-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 18px 0; background: rgba(16, 185, 129, 0.05); }
.consent-box ul { margin: 10px 0 0; padding-left: 18px; }

@media (max-width: 640px) {
  .board { columns: 2 140px; column-gap: 10px; }
  .board-card { margin-bottom: 10px; }
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* ---- foto que representa el sueño ---- */
.dream-hero {
  margin: 20px 0 8px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  aspect-ratio: 16 / 10;
}
.dream-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La foto grande del sueño se mueve sola, despacio. Aquí sí tiene sentido:
   es una sola imagen y es el asunto de la página. En la rejilla no, porque
   un tablero entero moviéndose cansa la vista en segundos.
   Los 28 segundos son a propósito: tiene que notarse al mirarla un rato,
   no llamar la atención mientras se lee lo de al lado. */
@keyframes paseo_lento {
  0%   { transform: scale(1.05) translate(0, 0); }
  33%  { transform: scale(1.12) translate(-2%, -1.5%); }
  66%  { transform: scale(1.12) translate(2%, 1%); }
  100% { transform: scale(1.05) translate(0, 0); }
}
.dream-hero img {
  animation: paseo_lento 28s ease-in-out infinite;
  will-change: transform;
}
.auto-photo-note {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 4px 0 18px;
}

/* ---- avatares reutilizables ---- */
.avatar-xs { width: 20px; height: 20px; font-size: 0.68rem; }
.avatar-sm { width: 40px; height: 40px; font-size: 1rem; }
.avatar-md { width: 56px; height: 56px; font-size: 1.3rem; }
.avatar-xs, .avatar-sm, .avatar-md {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  flex: none;
}
.dream-card-meta { display: flex; align-items: center; gap: 6px; }

/* ---- personas ---- */
.people-section { margin-top: 32px; }
.people-section h2 { font-size: 1.05rem; margin-bottom: 14px; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.person-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.person-card-main { display: grid; gap: 6px; justify-items: center; }
.person-card .muted { font-size: 0.8rem; line-height: 1.4; }
.person-card form { margin: 0; }
.people-list li { align-items: center; gap: 12px; }
.people-list-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.people-list-main > span { display: flex; flex-direction: column; min-width: 0; }
.people-list-main .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-stats a { border-bottom: 1px solid transparent; }
.profile-stats a:hover { border-color: var(--accent); color: var(--text); }

/* ---- adjuntos y notas de voz ---- */
.attach-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.attach-bar form { margin: 0; }
.attach-bar .btn {
  margin-top: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.attach-hint { font-size: 0.8rem; margin: 0 0 18px; }
#rec-btn.recording { border-color: var(--danger); color: var(--danger); }
.rec-status { font-size: 0.82rem; color: var(--text-muted); }
.rec-live { color: var(--danger); font-variant-numeric: tabular-nums; }
.rec-ok { color: var(--accent-3); }
.rec-error { color: var(--danger); }

.vib-item-audio { justify-content: flex-start; gap: 8px; min-height: 90px; }
.audio-name { font-size: 0.82rem; font-weight: 600; line-height: 1.3; }
.vib-item audio { width: 100%; height: 34px; }

.vib-item-file { justify-content: flex-start; min-height: 90px; }
.file-chip { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.file-icon { font-size: 1.7rem; }
.file-name {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}
.file-chip .muted { font-size: 0.74rem; }

/* ---- formularios rápidos (enlace, nota) ---- */
.quick-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}
.quick-form[hidden] { display: none; }
.quick-form input, .quick-form textarea { margin-top: 0; }
.quick-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quick-form-actions .btn { margin-top: 0; }
.quick-form-actions .muted { font-size: 0.78rem; }

/* ---- notas y enlaces dentro del sueño ---- */
.vib-item-note, .vib-item-link { justify-content: flex-start; min-height: 90px; text-align: left; }
.note-title, .link-title { font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.link-title { color: var(--accent-2); word-break: break-word; }
.link-site { font-size: 0.74rem; }
.note-body {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: pre-wrap;
  line-height: 1.45;
  max-height: 8.7em;
  overflow-y: auto;
}
.vib-item-note { border-left: 3px solid var(--accent); }
.vib-item-link { border-left: 3px solid var(--accent-2); }
.vib-item-link img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; }

/* ---- compartir ---- */
.share-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-actions .btn { margin-top: 0; }
.share-box form { margin: 0; }
.share-note { font-size: 0.82rem; margin: 0; }
.share-warn { display: block; margin-top: 6px; color: var(--accent-text); }
.share-wa { background: #25d366; color: #06301a; font-weight: 600; padding: 8px 18px; font-size: 0.88rem; }
.share-fb { background: #1877f2; color: #fff; font-weight: 600; padding: 8px 18px; font-size: 0.88rem; }

/* ---- cabecera de identidad en el Home ---- */
.fb-cover-compact { height: 150px; }
.fb-cover-compact + .fb-header .fb-avatar-wrap .avatar {
  width: 84px;
  height: 84px;
  font-size: 1.8rem;
}
.fb-cover-compact + .fb-header { margin-top: 10px; }
.fb-cover-compact + .fb-header .fb-avatar-wrap { margin-top: -50px; }
.fb-cover-compact + .fb-header h1 { font-size: 1.5rem; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .fb-photo-btn-text { display: none; }
  .header-actions { width: 100%; }

  /* En el teléfono la cabecera de Home se comía el 61% de la primera
     pantalla: portada, foto, nombre, arroba, cifras, tres botones y las
     pestañas, y solo entonces asomaba un sueño. En un tablero, el tablero
     es el producto. Aquí no se quita nada, se le quita el aire. */
  .fb-cover-compact { height: 96px; }
  .fb-cover-compact + .fb-header { margin-top: 8px; }
  .fb-cover-compact + .fb-header .fb-avatar-wrap { margin-top: -44px; }
  .fb-cover-compact + .fb-header .fb-avatar-wrap .avatar { width: 76px; height: 76px; }
  .fb-cover-compact + .fb-header h1 { font-size: 1.35rem; }
  .fb-cover-compact + .fb-header .profile-identity { gap: 12px; }
  .fb-cover-compact + .fb-header .profile-handle { margin-bottom: 0; }
  .fb-cover-compact + .fb-header .profile-stats { margin-top: 5px; }
  .fb-cover-compact + .fb-header { margin-bottom: 10px; }
  .tabs { margin-bottom: 12px; }
  .tab { padding: 8px 12px; }
}

/* ---- personas con acceso e invitaciones ---- */
.people-box { gap: 14px; }
.access-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.access-list li { display: flex; align-items: center; gap: 10px; }
.access-list .inline-form { margin-left: auto; }
.access-list .btn { margin-top: 0; }
.add-person-form { display: flex; gap: 8px; flex-wrap: wrap; }
.add-person-form input { flex: 1; min-width: 200px; margin-top: 0; }
.add-person-form .btn { margin-top: 0; white-space: nowrap; }

.invite-details summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; padding: 6px 0; }
.invite-details .muted { font-size: 0.82rem; margin: 6px 0 10px; }
.invite-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.invite-list li {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invite-list li.invite-new { border-color: var(--accent); background: rgba(99, 102, 241, 0.06); }
.invite-line { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; }
.invite-url {
  font-size: 0.74rem;
  color: var(--text-muted);
  background: var(--bg-elev);
  padding: 6px 8px;
  border-radius: 6px;
  word-break: break-all;
}
.invite-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.invite-actions .btn { margin-top: 0; }
.invite-actions form { margin: 0; }

/* ---- llegada por invitación ---- */
.invite-hero {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 24px;
  text-align: center;
}
.invite-hero-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 6px;
}
.invite-hero h2 { margin: 0 0 8px; }
.invite-hero .muted { max-width: 52ch; margin: 0 auto; }
.invite-hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.invite-hero .fine-print { margin-top: 12px; }
.invite-banner {
  border: 1px solid var(--accent-2);
  background: var(--bg-elev);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.invite-banner .muted { display: block; margin-top: 4px; font-size: 0.82rem; }

/* ---- dentro de la app nativa ---- */
/* La app ya tiene su propia barra de estado del sistema; se deja aire arriba
   y se ocultan los enlaces que solo tienen sentido en el navegador. */
.is-native .topbar { padding-top: calc(16px + env(safe-area-inset-top)); }
.is-native .bottom-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.is-native .footer { display: none; }

/* En la app, arrastrar el dedo sobre un texto lo seleccionaba en vez de
   desplazar la pantalla, que es como se mueve uno por toda la aplicación.
   Se desactiva la selección salvo donde de verdad hace falta: lo que se
   escribe y se copia. */
.is-native {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.is-native input,
.is-native textarea,
.is-native select,
.is-native [contenteditable],
.is-native .share-url,
.is-native code {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Desplazamiento con inercia, como el resto del sistema. */
.is-native body { -webkit-overflow-scrolling: touch; }

/* Botón de atrás: en el navegador sobra, porque ya está el del navegador. */
.nav-back { display: none; }
.is-native .nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  padding: 0;
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}
.is-native .nav-back:active { background: var(--bg); }

/* ---- selector de idioma ---- */
.lang-switch {
  margin-left: 18px;
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  vertical-align: middle;
}
.lang-option {
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.lang-option.active { background: var(--accent); color: var(--accent-ink); }

/* ---- foto y portada desde ajustes ---- */
.photo-settings {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.photo-settings h2 { margin: 0; font-size: 1.05rem; }
.photo-setting-row { display: flex; gap: 16px; align-items: center; }
.photo-preview { flex: none; border-radius: 10px; overflow: hidden; background: var(--bg-elev); }
.photo-preview-cover { width: 140px; height: 74px; }
.photo-preview-cover img, .photo-preview-cover video,
.photo-preview-cover .fb-cover-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-preview-avatar { width: 74px; height: 74px; border-radius: 50%; }
.photo-preview-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-preview-avatar .avatar { width: 100%; height: 100%; font-size: 1.8rem; }
.photo-setting-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.photo-setting-text .muted { font-size: 0.82rem; }
.photo-setting-text form { margin-top: 6px; }
.photo-setting-text .btn { margin-top: 0; cursor: pointer; }
.profile-handle { margin: 0 0 4px; font-size: 0.86rem; }

@media (max-width: 640px) {
  .photo-setting-row { flex-direction: column; align-items: flex-start; }
  .photo-preview-cover { width: 100%; height: 96px; }
}

/* ---- vista previa del enlace antes de guardarlo ---- */
.link-preview {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-elev);
}
.link-preview[hidden] { display: none; }
.link-preview-img {
  width: 92px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  flex: none;
  background: var(--border);
}
.link-preview-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.link-preview-text strong { font-size: 0.9rem; line-height: 1.3; }
.link-preview-text .muted { font-size: 0.78rem; line-height: 1.4; }
#link-preview-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-preview-status { font-size: 0.8rem; margin: 0; }

/* ---- pasos de una idea ---- */
.pasos { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pasos-avance { display: flex; align-items: center; gap: 8px; }
.pasos-barra {
  flex: 1;
  height: 4px;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: hidden;
}
.pasos-barra > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pasos-avance .muted { font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.pasos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pasos-lista li { display: flex; align-items: flex-start; gap: 6px; font-size: 0.8rem; line-height: 1.35; }
.pasos-lista li form { margin: 0; }
.pasos-lista li.hecho .paso-texto { text-decoration: line-through; color: var(--text-faint); }
.paso-check {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--accent-text);
}
.paso-texto { flex: 1; text-align: left; }
.paso-quitar {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  color: var(--text-faint); font-size: 0.75rem;
}
.paso-quitar:hover { color: var(--danger); }
.paso-nuevo { display: flex; gap: 4px; margin-top: 2px; }
.paso-nuevo input { flex: 1; margin-top: 0; font-size: 0.9rem; padding: 5px 8px; }
.paso-nuevo .btn { margin-top: 0; padding: 4px 10px; }

/* ---- pasos anunciados en el tablero de ideas ---- */
.board-card-pasos {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.board-card-pasos li { display: grid; grid-template-columns: 0.9rem 1fr; gap: 6px; line-height: 1.35; }
.board-card-pasos li::before { content: "☐"; color: var(--accent-text); }

/* ---- foto y pasos rellenables de una idea ---- */
.idea-foto { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; }
.idea-foto-form { margin: 0; display: flex; }
.idea-foto-form .btn { margin-top: 0; cursor: pointer; }

.pasos-lista li { flex-direction: column; align-items: stretch; gap: 3px; }
.paso-linea { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; }
.paso-linea input[type="checkbox"] { width: auto; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.paso-respuesta { display: flex; align-items: center; gap: 4px; padding-left: 20px; }
.paso-respuesta input {
  flex: 1;
  margin-top: 0;
  font-size: 0.76rem;
  padding: 4px 8px;
  border-radius: 6px;
}
.paso-respuesta-leida {
  padding-left: 20px;
  font-size: 0.76rem;
  color: var(--text);
  border-left: 2px solid var(--border);
  margin-left: 4px;
}
.pasos .btn-primary { align-self: flex-start; margin-top: 4px; }

/* ---- artículos propuestos por la plataforma ---- */
.articulos {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
  background: var(--card);
}
.articulos[hidden] { display: none; }
.articulos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.articulo {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.articulo-img { width: 100%; height: 96px; object-fit: cover; }
.articulo-cuerpo { padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.articulo-titulo { font-size: 0.86rem; font-weight: 600; color: var(--accent-text); line-height: 1.3; }
.articulo-sitio { font-size: 0.74rem; }
.articulo-razon { font-size: 0.78rem; line-height: 1.4; }
.articulo form { margin-top: 6px; }

/* ---- distinguir un artículo comprobado de una búsqueda ---- */
.articulo-sello {
  align-self: flex-start;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-elev);
  color: var(--text-faint);
}
.articulo-sello-ok { background: rgba(16, 185, 129, 0.12); color: #0B7A5B; }
.articulo-buscador { border-style: dashed; }

/* ---- páginas legales ---- */
.legal { max-width: 68ch; margin: 0 auto; }
.legal h1 { margin-bottom: 4px; }
.legal h2 { font-size: 1.08rem; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 0.92rem; line-height: 1.65; }
.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--accent-text); }


/* ---- Recomendación de Bud ------------------------------------------------
   Lo que devuelve tras las preguntas. Va antes que el repaso de respuestas
   porque es lo que se viene a ver. */
.bud-recomendacion .bud-siguiente {
  background: var(--surface-2, #F4F4F5);
  border-left: 3px solid var(--accent);
  padding: .6rem .8rem;
  border-radius: 8px;
  margin: .8rem 0;
}
.bud-pasos {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: .7rem;
}
.bud-paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
}
.bud-paso > div { min-width: 0; overflow-wrap: anywhere; }
.bud-paso-icono {
  font-size: 1.15rem;
  line-height: 1.4;
  flex: 0 0 auto;
}
.bud-paso strong { display: block; }
.bud-paso .muted { display: block; font-size: .92rem; }
.bud-aviso {
  margin-top: 1rem;
  font-size: .92rem;
  color: var(--text-muted, #6B7280);
}


/* ---- Meta de vibs y arranque en frío --------------------------------------
   Un sueño recién creado enseñaba una fila de botones grises y un "0 vibs".
   Esto le da una meta y le dice que abajo ya hay material esperando. */
.vibs-meta {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .2rem 0 1rem;
}
.vibs-meta-barra {
  flex: 1 1 auto;
  max-width: 220px;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2, #E5E7EB);
  overflow: hidden;
}
.vibs-meta-barra > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .3s ease;
}
.vibs-vacio {
  border: 1px dashed var(--border, #D4D4D8);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.vibs-vacio p { margin: 0 0 .4rem; }
.vibs-vacio p:last-child { margin-bottom: 0; }


/* ---- Lo que Bud pide y lo que Bud propone al crear ------------------------ */
.vibs-pedidos { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .6rem; }
.vib-pedido { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
/* min-width: 0 es lo que permite que el texto se parta en vez de empujar la
   fila fuera de la pantalla. */
.vib-pedido > div { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.vib-pedido strong { display: block; }
.vib-pedido .muted { display: block; font-size: .88rem; }
.vib-pedido-icono { font-size: 1.1rem; }
.vib-pedido-btn { flex: 0 0 auto; }

.bud-ayuda {
  border: 1px dashed var(--border, #D4D4D8);
  border-radius: 12px;
  padding: .9rem;
  margin: 0 0 1rem;
}
.bud-ayuda > .muted { margin: .4rem 0 0; font-size: .9rem; }
.bud-ficha-fila {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0; border-top: 1px solid var(--border, #E5E7EB);
  margin-top: .6rem;
}
.bud-ficha-fila > div, .bud-ficha-desc > p { flex: 1 1 auto; margin: 0; }
.bud-ficha-fila strong { display: block; }
.bud-ficha-vibs { margin: .4rem 0 0; padding-left: 1.1rem; }
.bud-ficha-vibs .muted { display: block; font-size: .88rem; }


/* ---- Bud en la portada ----------------------------------------------------
   La puerta de entrada para dos personas distintas: la que sabe qué quiere
   y la que no. La caja crece cuando todavía no hay ningún sueño. */
.bud-inicio {
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 14px;
  padding: 1rem;
  margin: 0 0 1rem;
  background: var(--surface, #fff);
}
.bud-inicio h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.bud-inicio-cabecera { display: flex; align-items: center; gap: .5rem; }
.bud-inicio-cabecera h2 { flex: 1 1 auto; }
.bud-inicio-cerrar {
  border: 0; background: none; cursor: pointer;
  font-size: 1rem; color: var(--text-muted); padding: 2px 6px;
}
.bud-inicio-grande { padding: 1.4rem; }
.bud-inicio-grande h2 { font-size: 1.35rem; }
.bud-inicio > .muted { margin: 0 0 .8rem; }
.bud-inicio-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.bud-inicio-form input {
  flex: 1 1 240px;
  min-width: 0;
  padding: .6rem .75rem;
  border: 1px solid var(--border, #D4D4D8);
  border-radius: 10px;
  font: inherit;
}
.bud-inicio-alterna {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.bud-inicio-alterna .muted { font-size: .88rem; }
/* Que el botón no se parta en dos líneas: la explicación va al lado. */
#bud-inicio-noseque { white-space: nowrap; }
#bud-inicio-salida { margin-top: .8rem; }

.bud-propuesta {
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  padding: .9rem;
}
.bud-propuesta-cat {
  display: inline-block;
  font-size: .78rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--surface-2, #F4F4F5);
  margin-bottom: .4rem;
}
.bud-propuesta p { margin: 0 0 .5rem; }
.bud-propuesta-vibs { margin: .2rem 0 .8rem; padding-left: 1.1rem; font-size: .92rem; }
.bud-propuesta-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

.bud-ideas { display: grid; gap: .6rem; margin-top: .6rem; }
@media (min-width: 640px) { .bud-ideas { grid-template-columns: 1fr 1fr; } }
.bud-idea {
  text-align: left;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  padding: .8rem;
  background: var(--surface, #fff);
  cursor: pointer;
  font: inherit;
  display: grid;
  gap: .15rem;
}
.bud-idea:hover { border-color: var(--accent); }
.bud-idea-icono { font-size: 1.3rem; }
.bud-idea .muted { font-size: .88rem; }


/* ---- Lo que Bud propone y hay que aceptar --------------------------------- */
.bud-pregunta { margin: .8rem 0 .3rem; font-weight: 600; }
.bud-elegibles { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.bud-elegibles li { min-width: 0; }
.bud-elegibles label {
  /* Rejilla en vez de flex: con flex, el texto no puede encogerse por debajo
     de su palabra más larga y se desbordaba fuera de la pantalla. Con
     "auto 1fr" la casilla ocupa lo suyo y el texto, todo lo que quede. */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: start;
  cursor: pointer;
  padding: .35rem .5rem;
  border-radius: 8px;
}
.bud-elegibles label > span { min-width: 0; overflow-wrap: anywhere; }
.bud-elegibles label:hover { background: var(--surface-2, #F4F4F5); }
.bud-elegibles input { margin-top: .25rem; }
.bud-elegibles strong { font-weight: 600; }
.bud-elegibles .muted { display: block; font-size: .87rem; }


/* ---- Búsqueda propia de cada carpeta -------------------------------------- */
.carpeta-hallazgos { margin: .6rem 0 .8rem; }
.carpeta-hallazgos .carpeta-estado { margin: 0 0 .5rem; }
.carpeta-buscar { margin-left: auto; }


/* ---- Sitios del sueño ------------------------------------------------------
   Un sueño rara vez ocurre en un punto. El principal sigue siendo el del
   sueño; estos son los demás, y el mapa los encuadra a todos. */
.lugares { margin: 1.2rem 0; }
details.lugares > summary.lugares-header {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  margin-bottom: .5rem;
}
details.lugares > summary::-webkit-details-marker { display: none; }
details.lugares > summary.lugares-header::after {
  content: "›";
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
details.lugares[open] > summary.lugares-header::after { transform: rotate(90deg); }
.lugares-acciones { margin-bottom: .6rem; }
.lugares-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.lugares-header h2 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; }
.lugares-lista { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; }
.lugares-lista li { display: flex; align-items: center; gap: .5rem;
                    flex-wrap: wrap; min-width: 0; }
.lugares-lista strong { font-weight: 600; }
.lugares-lista .muted { font-size: .88rem; }
.lugares-lista form { margin-left: auto; }
.lugar-punto { flex: 0 0 auto; }


/* ---- La entrevista de Bud --------------------------------------------------
   Para quien no sabe qué quiere: se le pregunta por lo que le gusta, no por
   su sueño, que es justo lo que no sabría contestar. */
.bud-entrevista { border: 1px solid var(--border, #E5E7EB); border-radius: 12px; padding: .9rem; }
.bud-entrevista > .muted { margin: 0 0 .3rem; font-size: .82rem; }
.bud-entrevista-pregunta { margin: 0 0 .7rem; font-size: 1.05rem; font-weight: 600; }
.bud-opciones { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
.bud-opcion {
  border: 1px solid var(--border, #D4D4D8);
  background: var(--surface, #fff);
  border-radius: 999px;
  padding: .45rem .8rem;
  font: inherit;
  cursor: pointer;
}
.bud-opcion:hover { border-color: var(--accent); }


/* ---- Aparición de las tarjetas -------------------------------------------
   Un tablero que se pinta de golpe se siente brusco. Se atenúa la entrada,
   escalonando las primeras para que se lea el orden. */
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.dream-card, .vib-item { animation: aparece 0.4s ease both; }
.dream-card:nth-child(2), .vib-item:nth-child(2) { animation-delay: 40ms; }
.dream-card:nth-child(3), .vib-item:nth-child(3) { animation-delay: 80ms; }
.dream-card:nth-child(4), .vib-item:nth-child(4) { animation-delay: 120ms; }
.dream-card:nth-child(5), .vib-item:nth-child(5) { animation-delay: 160ms; }
.dream-card:nth-child(6), .vib-item:nth-child(6) { animation-delay: 200ms; }
.dream-card:nth-child(n+7), .vib-item:nth-child(n+7) { animation-delay: 240ms; }

/* Quien pide menos movimiento no lo recibe: ni entrada ni acercamiento. */
@media (prefers-reduced-motion: reduce) {
  .dream-card, .vib-item { animation: none; }
  .vib-item img, .vib-item video, .dream-card-media img,
  .vib-item:hover img, .vib-item:hover video,
  .dream-card:hover .dream-card-media img,
  .dream-hero img,
  .dream-card, .dream-card:hover {
    animation: none; transition: none; transform: none;
  }
}


/* ---- Reparto por la columna más corta -------------------------------------
   Lo activa tablero.js. Las columnas de CSS se quedan como respaldo: si el
   guion no llega a ejecutarse, el tablero sigue estando bien. */
.dream-grid.tablero-repartido,
.vib-items.tablero-repartido {
  columns: auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.vib-items.tablero-repartido { gap: 12px; }
.tablero-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vib-items.tablero-repartido .tablero-col { gap: 12px; }
/* El margen inferior era para separar las tarjetas entre columnas de CSS;
   aquí lo hace el hueco de la columna. */
.tablero-repartido .dream-card,
.tablero-repartido .vib-item { margin-bottom: 0; }


/* ---- Invitación a crear cuenta desde un sueño compartido -------------------
   Quien llega desde WhatsApp o Instagram veía el sueño y nada más: ni qué
   sitio es esto ni cómo empezar el suyo. */
.invita-cuenta {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0;
  background: var(--bg-elev);
}
.invita-cuenta p { margin: 0 0 10px; }
.invita-cuenta-acciones { display: flex; gap: 8px; flex-wrap: wrap; }


/* Quién puso cada cosa, cuando no fue el dueño del sueño. */
.vib-autor { font-size: 0.72rem; }


/* ---- Editor de fotos -------------------------------------------------------
   Marco fijo y foto que se mueve por dentro: con el dedo eso funciona, y
   perseguir la esquina de un recuadro, no. */
.editor-foto {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  overflow: auto;
}
.editor-caja {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
}
.editor-lienzo {
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.editor-lienzo canvas {
  max-width: 100%;
  max-height: 46vh;
  display: block;
  cursor: grab;
  touch-action: none;   /* el arrastre mueve la foto, no la página */
}
.editor-lienzo canvas:active { cursor: grabbing; }
.editor-formas { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.editor-forma {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.editor-forma.activa { border-color: var(--accent); color: var(--accent-text); }
.editor-mandos { display: grid; gap: 8px; margin-bottom: 12px; }
.editor-mandos label {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-muted);
}
.editor-mandos input[type="range"] { width: 100%; margin: 0; }
.editor-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.editor-aviso { flex: 1 1 auto; font-size: 0.82rem; color: var(--text-muted); }


/* ---- Paneles de gestión del sueño ------------------------------------------
   Quién lo ve, cómo se comparte y lo que Bud preguntó ocupaban media página
   en cajas que casi nunca se miran. Ahora se abren desde un botón. */
.abre-panel.abierto { border-color: var(--accent); color: var(--accent-text); }
.panel-guardado { margin-top: 14px; }
/* Eliminar deja de ser un botón rojo compitiendo con el resto: sigue ahí,
   pero no es lo primero que pide atención en la página. */
.btn-borrar-sueno { color: var(--danger, #DC2626); }


/* ---- Panel de añadir un vib ------------------------------------------------
   Seis botones y un párrafo sueltos llenaban la cabecera del tablero antes
   de que se viera ni un solo vib. */
.panel-anadir {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bg-elev);
}
.panel-anadir .attach-hint { margin: 10px 0 0; font-size: 0.82rem; }
#abrir-anadir.abierto { filter: brightness(0.94); }


/* Cuántos hallazgos esperan dentro del panel de añadir. Sin este número, la
   búsqueda automática termina sin que nadie se entere: los resultados viven
   dentro de un panel cerrado. */
.chivato {
  display: inline-block;
  min-width: 1.25em;
  padding: 0 .35em;
  margin-left: .4em;
  border-radius: 999px;
  background: var(--accent-ink);
  color: var(--accent-text);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}


/* ---- Menú de cada vib ------------------------------------------------------
   Editar, eliminar y la carpeta ocupaban más que el propio vib. Ahora viven
   detrás de un «⋯» en la esquina, que solo se abre cuando hace falta. */
.vib-item { position: relative; }
.vib-menu { position: absolute; top: 6px; right: 6px; z-index: 2; }
.vib-menu > summary {
  list-style: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--velo);
  backdrop-filter: saturate(180%) blur(10px);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.vib-menu > summary::-webkit-details-marker { display: none; }
.vib-menu[open] > summary { color: var(--accent-text); }
.vib-menu-cuerpo {
  position: absolute;
  top: 30px;
  right: 0;
  min-width: 172px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-hover, 0 6px 20px rgba(0, 0, 0, 0.14));
  padding: 6px;
  display: grid;
  gap: 4px;
}
.vib-menu-cuerpo .btn { width: 100%; justify-content: flex-start; text-align: left; }
.vib-menu-cuerpo .vib-move { margin-top: 2px; }
.vib-menu-borrar { color: var(--danger, #DC2626); }

/* El sitio del mapa no es una tarjeta: su menú va en la fila, no flotando. */
.lugares-lista .vib-menu { position: static; margin-left: auto; }
.lugares-lista .vib-menu-cuerpo { position: absolute; right: 16px; }


/* ---- Carpetas del sueño, plegadas --------------------------------------
   Todas abiertas a la vez hacían del sueño una página interminable. */
details.vib-group > summary.vib-group-header {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
details.vib-group > summary::-webkit-details-marker { display: none; }
/* La flecha la ponemos nosotros para que gire al abrir. */
details.vib-group > summary.vib-group-header { padding-right: 68px; }
details.vib-group > summary.vib-group-header::after {
  content: "›";
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
details.vib-group[open] > summary.vib-group-header::after { transform: rotate(90deg); }
details.vib-group[open] > summary.vib-group-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
details.vib-group { margin-bottom: 12px; }
.vib-group-acciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px 0;
}


/* ---- Carpeta nueva: iconos propuestos --------------------------------------
   Teclear un emoji a mano en un campo de ocho caracteres no lo hace nadie. */
.nueva-carpeta-fila { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nueva-carpeta-fila input[name="name"] { flex: 1 1 12rem; min-width: 0; }
.carpeta-iconos { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.carpeta-icono {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 1.1rem;
  line-height: 1.3;
  cursor: pointer;
}
.carpeta-icono.activo { border-color: var(--accent); background: var(--bg-elev); }
.new-collection-form .muted { font-size: 0.82rem; margin: 0; }


/* El menú de la carpeta flota sobre su cabecera, fuera del desplegable, para
   poder renombrarla sin abrirla. */
.vib-group-envoltorio { position: relative; }
.carpeta-menu { position: absolute; top: 9px; right: 34px; z-index: 3; }
.vib-group-envoltorio > .new-collection-form { margin: 0 0 10px; }


/* ---- Buscador de iconos ----------------------------------------------------
   Las propuestas por tema siempre se quedan cortas para quien tenía otra
   idea en la cabeza. */
.carpeta-mas-iconos {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--card);
}
.carpeta-mas-iconos input[type="search"] { width: 100%; margin: 0 0 8px; }
.carpeta-rejilla-iconos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 4px;
  max-height: 210px;
  overflow-y: auto;
}
.carpeta-rejilla-iconos .carpeta-icono { padding: 4px 0; text-align: center; }
.carpeta-rejilla-iconos .muted { grid-column: 1 / -1; margin: 4px 2px; font-size: .84rem; }


/* ---- Que iOS no amplíe la página al escribir --------------------------------
   Safari y la vista web de la app amplían la página en cuanto se enfoca un
   campo cuya letra mide menos de 16px, y entonces todo queda cortado por la
   derecha y hay que arrastrar para leer. Con 16px no lo hace. Solo en
   pantalla pequeña: en el ordenador el tamaño de antes se ve mejor. */
@media (max-width: 767px) {
  input, textarea, select,
  .paso-nuevo input,
  .vib-move select,
  .carpeta-mas-iconos input[type="search"],
  .icon-input {
    font-size: 16px;
  }
}


/* Cambiar quién ve el sueño desde el panel de compartir, de un toque. */
.privacidad-rapida { display: grid; gap: 2px; margin: 6px 0 0; }
.privacidad-rapida .checkbox { margin: 0; }


/* La opción de abrir a aportes, dentro de Privacidad: solo se muestra al
   elegir público, y el guion se encarga de eso. */
.aportes-box {
  display: none;
  margin: 8px 0 0 22px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.aportes-box .muted { margin: 4px 0 0; font-size: 0.82rem; }


/* Seis pestañas en la barra de abajo en vez de cinco: el texto se aprieta
   un poco para que ninguna se corte. */
@media (max-width: 767px) {
  .bottom-nav-item { padding-left: 2px; padding-right: 2px; }
  .bottom-nav-item span:last-child { font-size: 0.72rem; }
}


/* ---- Invitar a alguien que no está en la plataforma ------------------------
   Buscar a alguien y no encontrarlo es justo el momento de invitarlo. */
.invitar-caja {
  display: block;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 12px;
}
.invitar-caja .muted { margin: 4px 0 10px; }
.invitar-acciones { display: flex; gap: 8px; flex-wrap: wrap; }


/* Botones de muestra en la vista previa de una invitación: se ven como los
   de verdad, pero no llevan a ninguna parte porque no son para quien mira. */
.btn-inerte {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}


/* ---- Modo oscuro -----------------------------------------------------------
   La app no lo tenía, y en el teléfono eso se nota: quien lleva el sistema
   en oscuro recibía una pantalla blanca de golpe. Solo se cambian las
   fichas de color; ninguna regla de maquetación se toca.

   Los tonos están elegidos para que todo texto pase de 4.5:1 sobre su
   fondo, igual que en claro: el índigo de #6366F1 sobre negro no se lee, y
   se sube a #A5B4FC (9.4:1). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121214;
    --bg-elev: #1C1C21;
    --card: #17171B;
    --border: #2C2C33;
    --text: #F4F4F5;
    --text-muted: #A8A8AE;
    --text-faint: #8A8A90;
    --accent: #818CF8;
    --accent-hover: #A5B4FC;
    --accent-text: #A5B4FC;
    --accent-ink: #14141A;
    --success: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --accent-2: #818CF8;
    --accent-suave: #C7D2FE;
    --accent-3: #34D399;
    --surface: #17171B;
    --surface-2: #1C1C21;
    --velo: rgba(23, 23, 27, 0.92);
    --velo-solido: #17171B;
    --focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.28);
    --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.5);
  }
  /* El navegador pinta a su manera los controles nativos si no se le dice
     en qué tema está. */
  :root { color-scheme: dark; }
  /* Las fotos y los mapas se atenúan un punto: a plena luz sobre fondo
     oscuro deslumbran. */
  .dream-card-media img, .vib-item img { filter: brightness(0.94); }
  /* Los fondos translúcidos de los avisos venían con color claro fijo. */
  .flash-success { background: rgba(52, 211, 153, 0.14); }
  .flash-error { background: rgba(248, 113, 113, 0.14); }
}

/* ---- El logo de Nubodu -----------------------------------------------------
   Va como SVG en línea, no como imagen, por una razón concreta: así los
   colores salen de las fichas y el tema oscuro los cambia sin tener dos
   ficheros. La palabra hereda el color del texto de la barra. */
.logo-nubodu {
  display: block;
  /* Se ata a la altura, y el ancho lo pone el viewBox. */
  height: 26px;
  width: auto;
}
.logo-nube { fill: var(--accent); }
.logo-nube-atras { fill: var(--accent-suave); }
.logo-palabra { stroke: currentColor; }

/* De las dos piezas del logo solo se ve una a la vez. */
.logo-solo-marca { display: none; }
@media (max-width: 640px) {
  /* Sin sesión la barra lleva además "Entrar" y "Crear cuenta", y a 375px
     los tres se pisaban: medido. Ahí el logo se queda en la nube, que es
     la parte que identifica. Con sesión no hay botones —los sustituye la
     barra de abajo— así que la palabra se queda. */
  body:not(.is-authed) .logo-completo { display: none; }
  body:not(.is-authed) .logo-solo-marca { display: block; }
}
@media (max-width: 420px) {
  .logo-nubodu { height: 24px; }
}