@import url('tokens.css');

/* ══════════════════════════════════════════════════════════════════════════
 * ACORDATE — hoja de estilo. Todo color sale de tokens.css: acá no hay ni un
 * hex suelto, para que el QA del design system pueda medirlo.
 * ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--noche);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ── La luz de la hora ─────────────────────────────────────────────
 * El resplandor que dice en qué parte del día estás. La posición y el
 * color los pone app.js según la hora real. */
#luz {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    60vmax 55vmax at var(--luz-x, 50%) var(--luz-y, 0%),
    var(--luz-tono, var(--luz-noche)) 0%,
    transparent 70%
  );
  opacity: 0.30;
  transition: background 1200ms linear, opacity 1200ms linear;
}

.envoltorio { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: var(--e4) var(--e4) 96px; }

/* ── Tipografía ────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--t-2xl); line-height: 1.1; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
.hora, .fecha, time { font-family: var(--reloj); font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.tenue { color: var(--bruma); }
.chico { font-size: var(--t-sm); }

/* ── Encabezado ────────────────────────────────────────────────────── */
.cabecera { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e5); }
.cabecera h1 { flex: 1; }
.marca-hora { color: var(--ahora); font-family: var(--reloj); font-size: var(--t-sm); }

/* ══════════════════════════════════════════════════════════════════════════
 * LA ESPINA DEL DÍA — el elemento firma.
 * Una línea vertical de 6 a 24 h. Cada evento está pinchado en su posición
 * real, no en una lista. La marca de "ahora" se mueve sola.
 * ══════════════════════════════════════════════════════════════════════════ */
.espina {
  position: relative;
  margin: var(--e5) 0;
  padding-left: 62px;
  min-height: 260px;
}
.espina::before {
  content: '';
  position: absolute;
  left: 52px; top: 0; bottom: 0;
  width: var(--espina);
  background: var(--borde);
  border-radius: var(--radio-pastilla);
}

.marca-hora-linea {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.marca-hora-linea .rotulo {
  width: 44px;
  text-align: right;
  font-family: var(--reloj);
  font-size: var(--t-xs);
  color: var(--bruma-tenue);
}

/* El ahora: una línea ámbar que cruza el día */
.ahora-linea {
  position: absolute;
  left: 44px; right: 0;
  height: var(--espina);
  background: var(--ahora);
  border-radius: var(--radio-pastilla);
  z-index: 2;
}
.ahora-linea::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border-radius: var(--radio-pastilla);
  background: var(--ahora);
}
.ahora-rotulo {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-family: var(--reloj);
  font-size: var(--t-xs);
  color: var(--ahora);
  width: 44px;
  text-align: right;
}

.pin {
  position: absolute;
  left: 62px; right: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--saldado);
  border-radius: var(--radio-chico);
  padding: var(--e2) var(--e3);
  z-index: 1;
}
/* Lo que está pasando ahora no se distingue solo por el color del filete:
 * también es más grueso y el título va en negrita. */
.pin.corre { border-left-color: var(--ahora); border-left-width: 6px; }
.pin.corre .titulo { font-weight: 700; }
.pin .titulo { font-size: var(--t-sm); line-height: 1.3; }
.pin .donde { color: var(--bruma); font-size: var(--t-xs); }

.dia-vacio {
  position: absolute; left: 62px; top: 40%;
  color: var(--bruma);
  font-family: var(--display);
  font-size: var(--t-lg);
}

/* ── Tarjetas y listas ─────────────────────────────────────────────── */
.bloque { margin-bottom: var(--e5); }
.bloque > h2 { margin-bottom: var(--e3); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e4);
}

ul.lista { list-style: none; margin: 0; padding: 0; }
ul.lista li {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borde);
  min-height: var(--tap);
}
ul.lista li:last-child { border-bottom: 0; }
ul.lista .crece { flex: 1; min-width: 0; }
ul.lista .crece > div { overflow-wrap: anywhere; }

.pastilla {
  font-family: var(--reloj);
  font-size: var(--t-xs);
  padding: 2px var(--e2);
  border-radius: var(--radio-pastilla);
  background: var(--superficie-alta);
  color: var(--bruma);
  white-space: nowrap;
}
/* Cada estado lleva un signo además del color (WCAG 1.4.1). Tres acentos
 * sobre fondo oscuro no pueden separarse también por brillo sin perder
 * contraste contra el fondo, así que la señal redundante es la forma. */
.pastilla.urgente { background: var(--deuda-tenue); color: var(--deuda); font-weight: 700; }
.pastilla.corre   { background: var(--ahora-tenue); color: var(--ahora); }
.pastilla.listo   { background: var(--saldado-tenue); color: var(--saldado); }
.pastilla.urgente::before { content: '! '; }
.pastilla.corre::before   { content: '→ '; }
.pastilla.listo::before   { content: '✓ '; }

/* ══════════════════════════════════════════════════════════════════════════
 * LA BARRA — una sola entrada para todo: escribir, hablar, mostrar una foto.
 * ══════════════════════════════════════════════════════════════════════════ */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  background: var(--noche);
  border-top: 1px solid var(--borde);
  padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
}
.barra-caja {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: var(--e2);
}
.barra textarea {
  flex: 1;
  resize: none;
  min-height: var(--tap);
  max-height: 120px;
  padding: var(--e3);
  font: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
}
.barra textarea::placeholder { color: var(--bruma-tenue); }

button {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radio);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--tinta);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--e3);
  transition: background var(--transicion), border-color var(--transicion);
}
button:hover { background: var(--superficie-alta); }
button.principal { background: var(--ahora); color: var(--noche); border-color: var(--ahora); font-weight: 700; }
button.principal:hover { background: var(--ahora); opacity: 0.9; }
button.fantasma { background: transparent; }
button[aria-pressed='true'] { background: var(--deuda); border-color: var(--deuda); color: var(--noche); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

:focus-visible { outline: 2px solid var(--ahora); outline-offset: 2px; }

/* ── La conversación ───────────────────────────────────────────────── */
.dialogo { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e4); }
.dicho { align-self: flex-end; max-width: 85%; background: var(--superficie-alta); border-radius: var(--radio); padding: var(--e2) var(--e3); }
.contesta { align-self: flex-start; max-width: 92%; }
.contesta .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.contesta .de-donde { color: var(--bruma-tenue); font-size: var(--t-xs); font-family: var(--reloj); margin-top: var(--e1); }

.confirmacion { border: 1px solid var(--ahora); background: var(--ahora-tenue); border-radius: var(--radio); padding: var(--e3); }
.confirmacion .choque { color: var(--deuda); font-size: var(--t-sm); }
.confirmacion .botones { display: flex; gap: var(--e2); margin-top: var(--e3); }

/* ── Navegación ────────────────────────────────────────────────────── */
.pestanas { display: flex; gap: var(--e1); margin-bottom: var(--e5); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  border: 0; background: transparent; color: var(--bruma);
  border-bottom: 2px solid transparent; border-radius: 0;
  padding: var(--e2) var(--e3); min-width: 0;
}
.pestanas button[aria-selected='true'] { color: var(--tinta); border-bottom-color: var(--ahora); }

.buscador {
  width: 100%;
  font: inherit;
  min-height: var(--tap);
  padding: var(--e3);
  margin-bottom: var(--e3);
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
}
.buscador::placeholder { color: var(--bruma-tenue); }

/* ── Estados ───────────────────────────────────────────────────────── */
.vacio { color: var(--bruma); font-family: var(--display); font-size: var(--t-lg); padding: var(--e5) 0; }
.error { color: var(--deuda); }
.aviso-red { background: var(--deuda-tenue); color: var(--deuda); padding: var(--e2) var(--e4); text-align: center; font-size: var(--t-sm); }

.cargando { display: inline-flex; gap: var(--e1); align-items: center; color: var(--bruma); }
.cargando i {
  width: 5px; height: 5px; border-radius: var(--radio-pastilla);
  background: var(--ahora); display: inline-block;
  animation: latir 1.1s infinite ease-in-out;
}
.cargando i:nth-child(2) { animation-delay: 0.16s; }
.cargando i:nth-child(3) { animation-delay: 0.32s; }
@keyframes latir { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.grabando { animation: pulso 1.3s infinite; }
@keyframes pulso { 50% { opacity: 0.55; } }

/* ── Entrar ────────────────────────────────────────────────────────── */
.entrar { max-width: 380px; margin: 18vh auto 0; display: grid; gap: var(--e3); }
.entrar input {
  font: inherit; padding: var(--e3); min-height: var(--tap);
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
}
.entrar input::placeholder { color: var(--bruma-tenue); }

/* ── Respeto por quien no quiere movimiento ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #luz { transition: none; }
}

@media (min-width: 720px) {
  .envoltorio { padding-top: var(--e6); }
  h1 { font-size: 3rem; }
}