/* ─── HISTORIAL por FECHAS (Carlos, 2026-09-28) — con historial-fechas.js ──────
   Compartido: el Viewer lleva una copia IGUAL. Siempre oscuro, como la tarjeta.
   Azul del HISTORIAL (#5c9ee0), el mismo de su pestaña. */
:root {
  --hf-azul:  #5c9ee0;
  --hf-texto: #e0e0e0;
  --hf-gris:  #8a8a8a;
  --hf-borde: #2a2a2a;
  --hf-fondo: #141414;
  --hf-letra: 'Lexend', 'TBV Lexend', 'Segoe UI', system-ui, sans-serif;
  --hf-fija:  'Consolas', 'JetBrains Mono', monospace;
}

/* Barra de fechas: botones rápidos + 📅 RANGO + lo que se está viendo */
.hf-bar { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
          padding: 7px 12px; background: #101010; border-bottom: 1px solid var(--hf-borde); font-family: var(--hf-letra); }
.hf-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.hf-chip { font-family: var(--hf-letra); font-size: 10px; font-weight: 700; letter-spacing: .7px; padding: 4px 10px;
           border-radius: 12px; border: 1px solid var(--hf-borde); background: #161616; color: var(--hf-gris); cursor: pointer;
           transition: color .12s, border-color .12s, background .12s; }
.hf-chip:hover { color: var(--hf-texto); border-color: #3a3a3a; }
.hf-chip.on { color: #0b0b0b; background: var(--hf-azul); border-color: var(--hf-azul); }
.hf-rango { margin-left: 4px; }
.hf-resumen { font-family: var(--hf-fija); font-size: 11px; color: var(--hf-azul); display: flex; align-items: center; gap: 8px; }
.hf-cuenta { color: var(--hf-gris); font-size: 10.5px; }

/* Calendario chico debajo de 📅 RANGO */
.hf-cal { position: absolute; top: calc(100% + 4px); left: 12px; z-index: 50; width: 232px; padding: 10px;
          background: #0e0e0e; border: 1px solid #262626; border-radius: 8px;
          box-shadow: 0 10px 32px rgba(0,0,0,.95), 0 0 0 1px rgba(92,158,224,.12); font-family: var(--hf-letra); }
.hf-cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.hf-cal-mes { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--hf-texto); }
.hf-nav { width: 24px; height: 22px; border-radius: 5px; border: 1px solid var(--hf-borde); background: #161616; color: var(--hf-gris);
          font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.hf-nav:hover { color: var(--hf-texto); border-color: #3a3a3a; }
.hf-sem, .hf-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hf-sem span { text-align: center; font-size: 9px; font-weight: 700; color: #555; padding: 2px 0; }
.hf-dia { position: relative; height: 28px; border: 1px solid transparent; border-radius: 5px; background: transparent;
          color: #9a9a9a; font-family: var(--hf-fija); font-size: 11px; cursor: pointer; padding: 0; }
.hf-dia.vacio { cursor: default; }
.hf-dia:not(.vacio):hover { background: #1c1c1c; color: var(--hf-texto); }
.hf-dia.hoy { border-color: #3a3a3a; color: var(--hf-texto); }
/* Días con jugadas: puntito verde abajo y el número más claro */
.hf-dia.con { color: var(--hf-texto); font-weight: 700; }
.hf-dia.con::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px;
                     border-radius: 50%; background: #28cc95; }
/* Rango elegido: tramo azul suave; los extremos, azul lleno */
.hf-dia.en { background: rgba(92,158,224,.16); color: var(--hf-texto); }
.hf-dia.borde { background: var(--hf-azul); color: #0b0b0b; font-weight: 700; }
.hf-dia.borde.con::after { background: #0b0b0b; }
.hf-dia.primero { box-shadow: 0 0 0 2px rgba(92,158,224,.45); }
.hf-cal-ayuda { margin-top: 7px; font-size: 9px; color: #666; text-align: center; letter-spacing: .3px; }

/* Separador de un día: franja de lado a lado, bien marcada. Lleva fondo oscuro
   PROPIO (como la tarjeta, siempre oscura): el Viewer tiene modo claro y sobre su
   fondo claro las letras claras no se leerían. */
.hf-sep { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 7px 12px;
          border-left: 3px solid var(--hf-azul); border-radius: 4px; font-family: var(--hf-letra); flex-wrap: wrap;
          background: linear-gradient(90deg, rgba(92,158,224,.18), rgba(92,158,224,.05) 60%, rgba(92,158,224,.02)), #121212; }
.hf-sep:first-child { margin-top: 0; }
.hf-sep::after { content: ''; flex: 1; height: 1px; background: rgba(92,158,224,.22); order: 3; }
.hf-sep-tag { order: 0; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; padding: 2px 7px; border-radius: 3px;
              background: var(--hf-azul); color: #0b0b0b; }
.hf-sep-dia { order: 1; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; color: var(--hf-texto); }
.hf-sep-fecha { order: 2; font-size: 13px; font-weight: 500; letter-spacing: 1px; color: var(--hf-azul); }
.hf-sep-n { order: 4; font-family: var(--hf-fija); font-size: 10.5px; color: var(--hf-gris); letter-spacing: .5px; }
.hf-sep.sin { border-left-color: #555; background: linear-gradient(90deg, rgba(136,136,136,.14), transparent 60%), #121212; }
.hf-sep.sin .hf-sep-dia { color: var(--hf-gris); }
.hf-vacio { grid-column: 1 / -1; padding: 30px 0; text-align: center; font-family: var(--hf-letra); font-size: 12px; color: #666; }