/* ============================================================
   Landing · "Un día con Xtryde" (#un-dia)
   Cuatro momentos del día ordenados por hora (la hora ES la secuencia):
   el resumen de la mañana con su maqueta, la venta que mueve el
   inventario, la pregunta al asistente y el cierre por Telegram.
   Usa los tokens --xt-* de index.html. Archivo aparte para no seguir
   engordando index.html (regla de las 1,500 líneas).
   ============================================================ */

.undia { padding-bottom: clamp(40px, 6vw, 72px); }

.undia__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 1024px) {
  .undia__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto auto;
    align-items: stretch;
  }
  .undia__momento--manana { grid-row: 1 / span 3; }
}

.undia__momento {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--xt-line);
  border-radius: 4px;
  background: var(--xt-crema);
}
.undia__momento--manana { background: var(--xt-crema-2); border-color: transparent; }

.undia__hora {
  font-family: var(--xt-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--xt-terracota);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.undia__hora small {
  font-family: var(--xt-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--xt-texto-sec);
  margin-left: 10px;
  vertical-align: middle;
}
.undia__titulo {
  font-family: var(--xt-font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.15;
  color: var(--xt-carbon);
  margin: 0;
}
.undia__texto { font-size: 15px; line-height: 1.6; color: var(--xt-texto-sec); margin: 0; max-width: 56ch; }
.undia__plan {
  align-self: flex-start;
  font-family: var(--xt-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xt-jade-dark);
  border: 1px solid rgba(0, 137, 123, 0.35);
  border-radius: 4px;
  padding: 3px 8px;
}

/* Maqueta de la ficha del resumen (ejemplo, no datos reales) */
.undia__maqueta {
  margin-top: 8px;
  background: var(--xt-crema);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(42, 54, 61, 0.04), 0 18px 34px -24px rgba(42, 54, 61, 0.28);
  padding: 18px 18px 8px;
  position: relative;
  overflow: hidden;
}
.undia__maqueta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'><path d='M0,12 V0 H12 V8 H4 V4 H8 V12' fill='none' stroke='%232A363D' stroke-opacity='0.18' stroke-width='1.5'/><path d='M12,0 V12 H24 V4 H16 V8 H20 V0' fill='none' stroke='%232A363D' stroke-opacity='0.18' stroke-width='1.5'/></svg>");
  background-size: 24px 10px;
  background-repeat: repeat-x;
}
.undia__maqueta-fecha {
  font-family: var(--xt-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--xt-terracota);
  margin: 6px 0 0;
}
.undia__maqueta-titulo {
  font-family: var(--xt-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--xt-carbon);
  margin: 2px 0 6px;
}
.undia__maqueta-ayer { font-size: 14px; color: var(--xt-carbon); margin: 0 0 6px; }
.undia__maqueta-ayer b { font-family: var(--xt-font-display); color: var(--xt-terracota); font-size: 1.05rem; }
.undia__maqueta-ayer span { font-family: var(--xt-font-mono); color: var(--xt-jade-dark); font-size: 12.5px; }
.undia__avisos { list-style: none; margin: 0; padding: 0; }
.undia__aviso {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--xt-line);
}
.undia__led { width: 9px; height: 9px; border-radius: 50%; background: var(--xt-carbon); }
.undia__aviso--alerta .undia__led { background: var(--xt-terracota); box-shadow: 0 0 0 3px rgba(216, 67, 21, 0.14); }
.undia__aviso-t { font-weight: 600; font-size: 14px; color: var(--xt-carbon); display: block; }
.undia__aviso-d { font-size: 12.5px; color: var(--xt-texto-sec); display: block; }
.undia__aviso-b {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1.5px solid var(--xt-line-strong);
  color: var(--xt-carbon);
}
.undia__aviso--alerta .undia__aviso-b { background: var(--xt-terracota); border-color: var(--xt-terracota); color: var(--xt-crema); }
.undia__ejemplo {
  font-family: var(--xt-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xt-texto-sec);
  margin: 6px 0 4px;
  text-align: right;
}

/* Como decide: al pie de la tarjeta de la manana */
.undia__notas {
  list-style: none;
  margin: auto 0 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  border-top: 1px solid var(--xt-line);
}
.undia__notas li {
  font-family: var(--xt-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--xt-carbon);
  display: flex;
  align-items: center;
  gap: 8px;
}
.undia__notas li::before { content: ""; width: 7px; height: 7px; background: var(--xt-terracota); }

/* Pregunta y respuesta del asistente */
.undia__chat { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.undia__burbuja {
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 4px;
  max-width: 92%;
}
.undia__burbuja--yo { align-self: flex-end; background: var(--xt-carbon); color: var(--xt-crema); }
.undia__burbuja--xt { align-self: flex-start; background: var(--xt-crema-2); color: var(--xt-carbon); }
.undia__burbuja--xt b { font-family: var(--xt-font-display); color: var(--xt-terracota); }

.undia__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 32px); }

@media (max-width: 480px) {
  .undia__aviso { grid-template-columns: 10px minmax(0, 1fr); }
  .undia__aviso-b { grid-column: 2; justify-self: start; }
}