/* ══════════════════════════════════════════
   HISTORIAL.CSS
   Estilos específicos de Historial de Turnos
   hereda de ui.css
══════════════════════════════════════════ */

/* ── Filtros ── */
.hist-filtros {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 18px 22px;
  flex-wrap: wrap;
}

.filtro-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.filtro-grupo-grow { flex: 1; min-width: 0; }
.filtro-grupo-grow .filter-tabs { flex-wrap: wrap; }

.filtro-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gris-texto);
}

/* ── Timeline por día ── */
.hist-dia-block {
  margin-bottom: 20px;
}

/* Cabecera del día */
.hist-dia-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.hist-dia-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--azul-medio), var(--azul-claro));
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(24,95,165,0.25);
}
.hist-dia-badge.hoy {
  background: linear-gradient(135deg, #10B981, #059669);
  box-shadow: 0 4px 12px rgba(16,185,129,0.25);
}
.hist-dia-badge.futuro {
  background: var(--gris-fondo);
  color: var(--gris-texto);
  box-shadow: none;
  border: 1px solid var(--gris-borde);
}

.hist-dia-num  { font-size: 20px; font-weight: 800; line-height: 1; }
.hist-dia-name { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.85; }

.hist-dia-info { flex: 1; min-width: 0; }
.hist-dia-fecha {
  font-size: 15px;
  font-weight: 700;
  color: var(--texto-main);
}
.hist-dia-meta {
  font-size: 12px;
  color: var(--gris-texto);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hist-dia-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Sin turnos ese día */
.hist-dia-vacio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--gris-fondo);
  border: 1px dashed var(--gris-borde);
  border-radius: 12px;
  color: var(--gris-texto);
  font-size: 13px;
}

/* Grid de turnos del día */
.hist-turnos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hist-turnos-grid.solo-uno {
  grid-template-columns: 1fr;
  max-width: 600px;
}

/* Card de turno */
.hist-turno-card {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
.hist-turno-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.09);
}

/* Header del card de turno */
.htc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--gris-borde);
}
.htc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.htc-turno-icon {
  font-size: 22px;
  line-height: 1;
}
.htc-turno-info {}
.htc-turno-nombre {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-main);
}
.htc-turno-hora {
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 1px;
}

/* Indicador de turno en el header */
.htc-header.dia   { border-top: 3px solid #F59E0B; }
.htc-header.noche { border-top: 3px solid #8B5CF6; }

/* Stats del card */
.htc-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.htc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--gris-fondo);
  min-width: 48px;
}
.htc-stat-num { font-size: 16px; font-weight: 800; color: var(--texto-main); line-height: 1; }
.htc-stat-lbl { font-size: 9px; color: var(--gris-texto); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

/* Body del card: lista de colaboradores */
.htc-body {
  padding: 12px 16px;
}

.htc-colab-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.htc-colab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.12s;
}
.htc-colab-item:hover { background: var(--gris-fondo); }

.htc-avatar {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  background: rgba(24,95,165,0.10);
  color: var(--azul-medio);
}

.htc-colab-nombre {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-main);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.htc-colab-funcion {
  font-size: 10px;
  color: var(--gris-texto);
  white-space: nowrap;
}

/* Footer del card */
.htc-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--gris-borde);
  background: var(--gris-fondo);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.htc-ver-mas {
  font-size: 12px;
  font-weight: 600;
  color: var(--azul-medio);
  display: flex;
  align-items: center;
  gap: 4px;
}
.htc-puestos-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.htc-puesto-chip {
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(24,95,165,0.08);
  color: var(--azul-medio);
  white-space: nowrap;
}

/* ── Modal Detalle ── */
.detalle-kpis {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.detalle-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  min-width: 90px;
  gap: 3px;
}
.detalle-kpi-num { font-size: 22px; font-weight: 800; color: var(--texto-main); line-height: 1; }
.detalle-kpi-lbl { font-size: 10px; color: var(--gris-texto); font-weight: 600; text-align: center; }

/* ── Separador de días ── */
.hist-separador {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}
.hist-separador-line {
  flex: 1;
  height: 1px;
  background: var(--gris-borde);
}
.hist-separador-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-texto);
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hist-turnos-grid { grid-template-columns: 1fr; }
  .hist-filtros     { flex-direction: column; align-items: stretch; }
  .filtro-grupo     { flex-shrink: 1; }
}