/* Yahu · la app web (H3). Esta hoja sólo ACOMODA: la columna, las barras y el
   chat. Colores, tipos, medidas, radios y tiempos salen de los tokens de
   Horizonte (ui/yahu.css, copia de packages/yahu-ui): aquí no se inventa
   ninguno. Celular: barra arriba y pestañas abajo; escritorio (1024 px o más):
   el riel a la izquierda, como manda el patrón de Navegación. */

.yh-app {
  margin: 0;
  min-height: 100dvh;
  background: var(--yh-fondo);
  color: var(--yh-texto);
}
/* Sin especificidad (:where): cualquier clase de abajo le gana. */
:where(.yh-app) :where(h1, h2, h3, p) { margin: 0; }

.yh-app-salto {
  position: absolute;
  left: var(--yh-esp-3);
  top: calc(-1 * var(--yh-esp-18));
  z-index: 10;
  padding: var(--yh-esp-2) var(--yh-esp-3);
  border-radius: var(--yh-radio-control);
  background: var(--yh-sup-2);
  color: var(--yh-texto);
}
.yh-app-salto:focus { top: var(--yh-esp-3); }

.yh-app-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Celular ─────────────────────────────────────────────────────────────── */
.yh-app-barra { position: sticky; top: 0; z-index: 2; }
.yh-app-barra--sola { justify-content: flex-start; }
.yh-app-riel { display: none; }
.yh-app-pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; }
.yh-navegacion-svg--relleno path { fill: currentColor; }

.yh-app-contenido {
  display: block;
  max-width: var(--yh-columna-ancho);
  margin: 0 auto;
  padding: var(--yh-esp-5) var(--yh-esp-4) var(--yh-esp-8);
}
.yh-app--sesion .yh-app-contenido {
  padding-bottom: calc(var(--yh-pestanas-alto) + env(safe-area-inset-bottom, 0px) + var(--yh-esp-6));
}
.yh-app-contenido:focus { outline: none; }

.yh-app-estado { text-decoration: none; }
.yh-app-estado .yh-pildora-estado-punto { background: var(--yh-texto-3); }
.yh-app-estado--vivo .yh-pildora-estado-punto { background: var(--yh-positivo); }

/* ── Escritorio ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .yh-app--sesion {
    display: grid;
    grid-template-columns: var(--yh-riel-ancho) minmax(0, 1fr);
    align-items: start;
  }
  .yh-app--sesion .yh-app-barra,
  .yh-app--sesion .yh-app-pestanas { display: none; }
  .yh-app-riel { display: flex; position: sticky; top: 0; height: 100dvh; }
  .yh-app--sesion .yh-app-contenido { padding: var(--yh-esp-8) var(--yh-esp-6); }
}

/* ── Piezas comunes ──────────────────────────────────────────────────────── */
.yh-app-cabeza { display: grid; gap: var(--yh-esp-1); margin-bottom: var(--yh-esp-5); }
.yh-app-sub { color: var(--yh-texto-3); }
.yh-app-subtitulo { margin: var(--yh-esp-6) 0 var(--yh-esp-3); }

.yh-app-aviso {
  margin: 0 0 var(--yh-esp-4);
  padding: var(--yh-esp-3) var(--yh-esp-4);
  border-radius: var(--yh-radio-ficha);
  background: var(--yh-sup-1);
  box-shadow: inset 0 0 0 1px var(--yh-filete);
  color: var(--yh-texto-2);
}
.yh-app-aviso:empty { display: none; }

.yh-app-vacio,
.yh-app-tarjeta,
.yh-app-pausa,
.yh-app-confirmar {
  display: grid;
  gap: var(--yh-esp-2);
  padding: var(--yh-esp-4);
  border-radius: var(--yh-radio-ficha);
  background: var(--yh-sup-1);
  box-shadow: inset 0 0 0 1px var(--yh-filete);
}
.yh-app-vacio { justify-items: center; text-align: center; color: var(--yh-texto-2); padding: var(--yh-esp-6) var(--yh-esp-4); }
.yh-app-pausa { gap: var(--yh-esp-3); justify-items: start; }
.yh-app-confirmar {
  gap: var(--yh-esp-3);
  margin-bottom: var(--yh-esp-5);
  background: var(--yh-sup-2);
  box-shadow: inset 0 0 0 1px var(--yh-filete-fuerte);
}
.yh-app-cita { color: var(--yh-texto); }
.yh-app-acciones { display: flex; flex-wrap: wrap; gap: var(--yh-esp-3); }

.yh-app-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.yh-app-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yh-esp-3);
  min-height: var(--yh-toque-min);
  box-shadow: inset 0 -1px 0 var(--yh-filete);
}
.yh-app-pronto { color: var(--yh-texto-3); }
.yh-app-salir { margin-top: var(--yh-esp-8); }

.yh-app-enlace { color: var(--yh-texto); text-decoration: underline; text-underline-offset: 3px; }
.yh-app-nota { color: var(--yh-texto-3); }

.yh-app-entrar {
  display: grid;
  gap: var(--yh-esp-4);
  justify-items: start;
  max-width: 30rem;
  margin: var(--yh-esp-10) auto 0;
}

.yh-hoy-ficha form { margin-top: var(--yh-esp-2); }

/* ── Chat ────────────────────────────────────────────────────────────────── */
/* El chat llena la pantalla y la caja de escribir queda abajo aunque haya
   pocos mensajes: el hilo crece y sus turnos se juntan al fondo. */
.yh-app-chat {
  display: flex;
  flex-direction: column;
  gap: var(--yh-esp-3);
  min-height: calc(100dvh - var(--yh-barra-alto) - env(safe-area-inset-top, 0px) - var(--yh-pestanas-alto) - env(safe-area-inset-bottom, 0px) - var(--yh-esp-5) - var(--yh-esp-6));
}
.yh-app-hilo { flex: 1 0 auto; display: grid; align-content: end; gap: var(--yh-esp-4); }
.yh-app .yh-turno-chat-texto,
.yh-app .yh-turno-chat-burbuja { white-space: pre-wrap; overflow-wrap: anywhere; }
.yh-app-dia { justify-self: center; color: var(--yh-texto-3); }
.yh-app-fallo { justify-self: end; }
.yh-app-entrada {
  position: sticky;
  bottom: calc(var(--yh-pestanas-alto) + env(safe-area-inset-bottom, 0px) + var(--yh-esp-3));
  z-index: 1;
}
@media (min-width: 1024px) {
  .yh-app-chat { min-height: calc(100dvh - 2 * var(--yh-esp-8)); }
  .yh-app-entrada { bottom: var(--yh-esp-4); }
}