/* ════════════════════════════════════════════════════════════════
   HOY — franja «¿Qué hago hoy?», plegable, línea temporal del día.
   Acento propio (--cyan, el mismo que Calendario). Reutiliza clases
   compartidas ya existentes (.seg, .empty, .cal-prio, .dot.ok,
   .mo-glow) en vez de duplicarlas. Ver docs/decisiones.md.
   ════════════════════════════════════════════════════════════════ */

.hoy-franja{
  --a:var(--cyan);--a2:var(--blue);
  position:relative;margin:14px 22px 0;border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--a) 24%, var(--line));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--a) 16%, transparent) 0%, transparent 62%),
    var(--card);
  overflow:hidden;
}
.hoy-franja::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:1;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--a) 90%, transparent) 30%, color-mix(in srgb, var(--a2) 75%, transparent) 70%, transparent);
}

/* ---------- cabecera: cerrada muestra la mascota, el título y el resumen ---------- */
.hoy-cab{width:100%;display:flex;align-items:center;gap:12px;padding:11px 16px}
.hoy-cab:hover{background:color-mix(in srgb, var(--a) 6%, transparent)}
.hoy-mascota{width:40px;height:40px;flex:0 0 40px;object-fit:contain;display:block}
.hoy-cab-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.hoy-cab-texto b{font-family:var(--f-dp);font-size:14px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hoy-resumen{font-family:var(--f-mo);font-size:11px;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.hoy-caret{width:16px;height:16px;flex:0 0 auto;color:var(--tx-3);transition:transform .18s var(--ease-out)}
.hoy-franja[data-abierta="1"] .hoy-caret{transform:rotate(180deg)}

/* ---------- abrir/cerrar: grid-template-rows 0fr→1fr, sin medir en JS y sin salto ---------- */
.hoy-cuerpo-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms var(--ease-out)}
.hoy-franja[data-abierta="1"] .hoy-cuerpo-wrap{grid-template-rows:1fr}
.hoy-cuerpo-inner{overflow:hidden}
.hoy-cuerpo{padding:2px 16px 16px;display:flex;flex-direction:column;gap:14px;border-top:1px solid color-mix(in srgb, var(--a) 18%, var(--line))}

.hoy-barra{display:flex;align-items:center;justify-content:flex-end}

/* ---------- vencidas: siempre lo primero, acento de aviso ---------- */
.hoy-vencidas{
  border:1px solid color-mix(in srgb, var(--crit) 32%, var(--line));
  background:color-mix(in srgb, var(--crit) 8%, transparent);
  border-radius:var(--rs);padding:10px 12px;display:flex;flex-direction:column;gap:8px;
}
.hoy-vencidas-t{font-family:var(--f-mo);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#FF9B9B}
.hoy-vencidas-lista{display:flex;flex-direction:column;gap:6px}
.hoy-vencida{background:color-mix(in srgb, var(--crit) 6%, var(--card-solid));border-color:color-mix(in srgb, var(--crit) 22%, var(--line))}

/* ---------- eje horizontal: overflow-x propio, nunca el de la página ---------- */
.hoy-eje-wrap{overflow-x:auto;overflow-y:hidden;margin:0 -16px;padding:4px 16px 6px}
.hoy-eje{display:flex;align-items:stretch;gap:10px;min-width:max-content}

.hoy-sinhora{display:flex;gap:10px;padding-right:14px;margin-right:4px;border-right:1px dashed var(--line-2)}
.hoy-sinhora-etq{writing-mode:vertical-rl;font-family:var(--f-mo);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);align-self:center}

/* ---------- una parada de la línea: título, hora, quién y acciones ---------- */
.hoy-parada{
  flex:0 0 auto;width:172px;display:flex;flex-direction:column;gap:6px;
  padding:9px 10px;border-radius:10px;
  border:1px solid color-mix(in srgb, var(--a) 22%, var(--line));
  background:color-mix(in srgb, var(--a) 7%, var(--card-solid));
  transition:opacity .18s var(--ease-out);
}
.hoy-parada--hecha{opacity:.5}
.hoy-punto{width:7px;height:7px;flex:0 0 auto}
.hoy-parada-cuerpo{min-width:0}
.hoy-parada-titulo{display:block;font-size:12px;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hoy-parada-meta{font-family:var(--f-mo);font-size:9.5px;color:var(--tx-3);display:block;margin-top:2px}
.hoy-parada-acciones{display:flex;gap:5px;margin-top:2px}
.hoy-ir,.hoy-hecha{
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;
  color:var(--tx-2);border:1px solid color-mix(in srgb, var(--a) 26%, var(--line));
  background:color-mix(in srgb, var(--a) 8%, transparent);
}
.hoy-ir svg,.hoy-hecha svg{width:13px;height:13px}
.hoy-ir:hover,.hoy-hecha:hover{color:var(--tx);background:color-mix(in srgb, var(--a) 20%, rgba(255,255,255,.06))}
.hoy-hecha:hover{color:#7FE6C4;border-color:rgba(63,214,140,.4)}
.hoy-hecha:disabled{opacity:.5;cursor:default}

/* ---------- marca de «ahora»: reutiliza el punto .dot.ok y su pulso/pausa ya existentes ---------- */
.hoy-ahora{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;padding:0 2px}
.hoy-ahora span{font-family:var(--f-mo);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.hoy-ahora .linea{display:block;width:1px;flex:1;min-height:16px;background:color-mix(in srgb, var(--ok) 45%, var(--line-2))}

/* ---------- estado vacío: la mascota del cartel, un mensaje corto ---------- */
.hoy-vacio{display:flex;align-items:center;gap:14px;padding:6px 2px}
.hoy-vacio img{width:56px;height:56px;flex:0 0 56px;object-fit:contain}
.hoy-vacio p{margin:0;font-size:12px;color:var(--tx-2);line-height:1.5}

/* ---------- mascota viva pero discreta: solo transform, en pausa fuera de pestaña ---------- */
@keyframes hoy-flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.hoy-mascota-flota{animation:hoy-flotar 6.5s var(--ease-in-out) infinite}
html.tab-oculta .hoy-mascota-flota{animation-play-state:paused}

@media(max-width:900px){
  .hoy-franja{margin:12px 14px 0}
}
@media(max-width:560px){
  .hoy-parada{width:150px}
}