/* ════════════════════════════════════════════════════════════════════════
   Telemetría del día · #sosms/colaborador-detalle, bloque "Cómo se repartió
   el día". Consume public.sosms_dia_descomposicion y
   public.sosms_tiempo_en_punto (sql_v45t/179 y /172), ambas SECURITY
   INVOKER: el estado vacío cubre tanto "sin jornada ese día" como "RLS no
   te deja ver a esta persona", sin distinguir el motivo en la UI.
   Scope propio: todas las clases llevan el prefijo .sdt- para no chocar con
   otros bloques de js/sosms.js. Prefijo ".shell " obligatorio en el botón
   "Hoy": el reset global `.shell button{padding:0}` (css/main.css) gana por
   especificidad a una sola clase.
   ════════════════════════════════════════════════════════════════════════ */

.sdt-card{
  background:var(--sur);
  border:1px solid var(--bdr);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:14px;
}
.sdt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.sdt-title{
  font-size:11px;
  color:var(--tx3);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:600;
}
.sdt-datebar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.sdt-date-input{
  border:1px solid var(--bdr);
  border-radius:8px;
  padding:6px 8px;
  font-size:12px;
  background:var(--sur);
  color:var(--tx);
}
.shell .sdt-hoy-btn{
  border:1px solid var(--bdr2,var(--bdr));
  border-radius:8px;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  background:var(--sur2,var(--sur));
  color:var(--tx);
  cursor:pointer;
}
.shell .sdt-hoy-btn:hover{ background:var(--hov,var(--sur)); }

.sdt-loading{
  padding:16px;
  text-align:center;
  color:var(--tx3);
  font-size:12px;
}
.sdt-empty{
  padding:20px;
  text-align:center;
  color:var(--tx3);
  background:var(--sur2,transparent);
  border:1px dashed var(--bdr);
  border-radius:10px;
  font-size:12px;
}
.sdt-empty-sm{ padding:12px; margin-top:4px; }

/* Barra apilada: punto / base / tránsito */
.sdt-bar{
  display:flex;
  width:100%;
  height:14px;
  border-radius:8px;
  overflow:hidden;
  background:var(--bdr);
  margin-bottom:10px;
}
.sdt-bar-seg{ height:100%; min-width:0; }
.sdt-seg-punto{ background:#10b981; }
.sdt-seg-base{ background:#3b82f6; }
.sdt-seg-transito{ background:#f59e0b; }

.sdt-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin-bottom:10px;
  font-size:12px;
}
.sdt-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--tx2);
}
.sdt-legend-item b{ color:var(--tx); font-weight:700; margin-left:2px; }
.sdt-legend-pct{ color:var(--tx3); font-size:11px; }
.sdt-legend-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}

/* Avisos de calidad del dato (hora no confiable, solape, jornada sospechosa) */
.sdt-notas{
  margin:4px 0 12px;
  padding-top:8px;
  border-top:1px dashed var(--bdr);
}
.sdt-nota{
  font-size:10.5px;
  color:var(--tx3);
  margin-bottom:4px;
}
.sdt-nota:last-child{ margin-bottom:0; }

/* Lista "Tiempo en cada punto" */
.sdt-puntos-head{
  font-size:11px;
  color:var(--tx3);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:600;
  margin:4px 0 6px;
}
.sdt-puntos-list{
  max-height:320px;
  overflow-y:auto;
}
.sdt-punto-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:2px 10px;
  padding:8px 0;
  border-bottom:1px solid var(--bdr);
}
.sdt-punto-row:last-child{ border-bottom:none; }
.sdt-punto-nombre{
  flex:1 1 140px;
  min-width:0;
  font-size:12px;
  font-weight:600;
  color:var(--tx);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sdt-chk{ color:#10b981; font-weight:700; }
.sdt-punto-horas{
  color:var(--tx2);
  font-family:monospace;
  font-size:11px;
  white-space:nowrap;
}
.sdt-punto-min{
  color:var(--tx);
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}