/* ============================================================================
   HISTORIAL DE LA CARD — botón del panel y hoja con los últimos 10 cambios (ver historial.js)
   ============================================================================ */

/* ── Botón: debajo de «Actualizado (hace 2 horas)», dentro del panel que sube al tocar la card ───────── */
.card-time-panel .card-hist-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 26px; margin-top: 4px; padding: 0 12px 0 9px; border: 0; border-radius: 99px;
  background: #111318; color: #fff; font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .01em; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.card-hist-btn::after { content: ''; position: absolute; inset: -8px -10px; }   /* zona táctil más grande que el dibujo */
.card-hist-btn:active { transform: scale(.95); }
.card-hist-btn svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.card-hist-btn:focus-visible { outline: 2px solid #111318; outline-offset: 2px; }
.container.picking .card-hist-btn { display: none; }

/* ── Hoja ──────────────────────────────────────────────────────────────────── */
.hist-overlay {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(17, 19, 24, .4); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s;
}
.hist-overlay.open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.hist-sheet {
  position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 22px calc(26px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0;
  background: var(--bg, #e8e8ed); color: var(--t1, #1c1c1e); text-align: left;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 -12px 40px rgba(17, 19, 24, .2);
}
.hist-overlay.open .hist-sheet { transform: translateY(0); }
.hist-grab { width: 40px; height: 4px; margin: 0 auto 18px; border-radius: 2px; background: #c3c7d0; }
.hist-x {
  position: absolute; top: 22px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(17, 19, 24, .06); color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hist-x:active { background: rgba(17, 19, 24, .12); }
.hist-x:focus-visible { outline: 2px solid #111318; outline-offset: 2px; }
.hist-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hist-h { margin: 0; padding-right: 52px; font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.hist-ctx { margin: 6px 0 0; padding-right: 52px; font-size: .85rem; font-weight: 600; color: var(--t3, #8e8e93); text-transform: uppercase; letter-spacing: .04em; }

/* ── Lista ─────────────────────────────────────────────────────────────────── */
.hist-lista { list-style: none; margin: 16px 0 0; padding: 0; }
.hist-fila { padding: 13px 0; border-top: 1px solid rgba(17, 19, 24, .08); }
.hist-fila:first-child { border-top: 0; }
.hist-fechas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.hist-antes { font-size: .95rem; font-weight: 600; color: var(--t3, #8e8e93); }
.hist-ahora { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--t1, #1c1c1e); }
.hist-flecha { display: inline-grid; place-items: center; color: var(--t3, #8e8e93); }
.hist-flecha svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.hist-dias { margin-left: auto; padding: 3px 9px; border-radius: 99px; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.hist-dias.sube { background: rgba(42, 138, 92, .14); color: #1f7a4f; }
.hist-dias.baja { background: rgba(214, 64, 74, .13); color: #c0392b; }
.hist-cuando { margin-top: 4px; font-size: .8rem; font-weight: 500; color: var(--t3, #8e8e93); }
.hist-nota { margin: 8px 0 0; font-size: .78rem; line-height: 1.4; color: var(--t4, #b4b7bf); text-align: center; }
.hist-vacio { margin: 22px 0 6px; font-size: .95rem; line-height: 1.5; color: var(--t2, #3a3a3c); text-align: center; }
.hist-reintentar {
  display: block; margin: 12px auto 0; height: 40px; padding: 0 22px; border: 0; border-radius: 99px;
  background: #111318; color: #fff; font-family: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hist-reintentar:active { transform: scale(.96); }

/* Cargando: tres filas grises que respiran */
.hist-cargando { margin-top: 16px; display: grid; gap: 10px; }
.hist-cargando i { display: block; height: 46px; border-radius: 12px; background: rgba(17, 19, 24, .07); animation: histRespira 1.1s ease-in-out infinite; }
.hist-cargando i:nth-child(2) { animation-delay: .15s; }
.hist-cargando i:nth-child(3) { animation-delay: .3s; }
@keyframes histRespira { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hist-overlay, .hist-sheet, .card-hist-btn { transition: none; }
  .hist-cargando i { animation: none; }
}