/* ============================================================
   Tiempo: barra de cronómetro, entradas por día y tarjeta por ítem.
   Prefijo pmt-. Solo consume los tokens de styles.css.
   ============================================================ */

/* ---------- Barra de cronómetro (estilo Clockify) ---------- */
.pmt-barra {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-4);
  position: sticky;
  /* Se queda pegada bajo la topbar: el cronómetro nunca se pierde al bajar. */
  top: calc(var(--topbar-h) + var(--esp-2));
  z-index: 10;
}
/* Corriendo: un borde de acento a la izquierda, visible de reojo. */
.pmt-barra.corriendo {
  border-color: var(--green);
  box-shadow: inset 3px 0 0 var(--green), var(--shadow-sm);
}

.pmt-barra-desc {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: var(--texto-md);
  font-family: inherit;
  padding: var(--esp-2) 0;
}
.pmt-barra-desc::placeholder { color: var(--muted); }
.pmt-barra-desc:focus { outline: none; }

.pmt-barra-contexto { display: flex; align-items: center; gap: var(--esp-2); flex: none; }
/* Dejó de ser un <select>: el espacio lo fija el switcher, aquí solo se
   muestra a qué cliente se le está cargando el tiempo libre. */
.pmt-barra-espacio {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 6px 10px;
  font-size: var(--texto-sm);
  max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmt-barra-item {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--texto-sm);
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pmt-barra-reloj {
  flex: none;
  font-family: var(--fuente-mono);
  font-size: var(--texto-lg);
  font-variant-numeric: tabular-nums;
  min-width: 88px;
  text-align: right;
  letter-spacing: -0.5px;
}

.pmt-barra-btn {
  flex: none;
  min-width: 96px;
  padding: 10px var(--esp-4);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  font-family: inherit;
  color: var(--on-accent);
  cursor: pointer;
  transition: background var(--transicion);
}
.pmt-barra-btn.iniciar { background: var(--accent); }
.pmt-barra-btn.iniciar:hover { background: var(--accent-hover); }
.pmt-barra-btn.detener { background: var(--red); }
.pmt-barra-btn.detener:hover { filter: brightness(1.08); }
.pmt-barra-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Entradas agrupadas por día ---------- */
.pmt-dia { padding: 0; overflow: hidden; }
.pmt-dia-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.pmt-dia-nombre { font-weight: var(--peso-medio); }
.pmt-dia-total {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.pmt-entrada {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 10px var(--esp-4);
  border-bottom: 1px solid var(--border);
}
.pmt-entrada:last-child { border-bottom: none; }
.pmt-entrada:hover { background: var(--panel-2); }
.pmt-entrada-info { flex: 1; min-width: 0; }
.pmt-entrada-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmt-entrada-nota { font-size: var(--texto-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmt-entrada-quien { flex: none; font-size: var(--texto-sm); }
.pmt-entrada-rango {
  flex: none; font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pmt-entrada-dur {
  flex: none;
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
  font-weight: var(--peso-medio);
}
.pmt-entrada-acciones { flex: none; display: flex; gap: var(--esp-1); }
/* Las acciones aparecen al posarse encima: la fila se lee sin ruido. */
@media (hover: hover) {
  .pmt-entrada-acciones { opacity: 0; transition: opacity var(--transicion); }
  .pmt-entrada:hover .pmt-entrada-acciones,
  .pmt-entrada:focus-within .pmt-entrada-acciones { opacity: 1; }
}

.pmt-filtros { align-items: flex-end; }
.pmt-acciones { margin-left: auto; display: flex; gap: var(--esp-2); }
.pmt-tabs { margin-top: var(--esp-2); }

/* ---------- Otras personas en curso (admin) ---------- */
.pmt-encurso {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--border);
}
.pmt-encurso:last-child { border-bottom: none; }
.pmt-reloj {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  color: var(--green);
  min-width: 76px;
}
.pmt-encurso-quien { font-weight: var(--peso-medio); }
.pmt-encurso-que { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Tarjeta de tiempo por ítem ---------- */
.pmt-acumulado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) 0;
  margin-top: var(--esp-3);
  border-top: 1px solid var(--border);
}
.pmt-acumulado strong { font-size: var(--texto-md); font-variant-numeric: tabular-nums; }

/* ---------- Formulario de sesión y filas heredadas ---------- */
.pmt-form-tiempo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: flex-end;
  padding: var(--esp-2) 0;
  width: 100%;
}
.pmt-form-tiempo label {
  display: flex; flex-direction: column; gap: var(--esp-1);
  font-size: var(--texto-xs); color: var(--muted); font-weight: var(--peso-medio);
}
.pmt-form-tiempo input {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: var(--texto-base);
  font-family: inherit;
}
.pmt-form-tiempo input:focus { border-color: var(--accent); }

.pmt-sesion {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--texto-base);
}
.pmt-sesion:last-child { border-bottom: none; }
.pmt-sesion-acciones { margin-left: auto; display: flex; gap: var(--esp-1); }

@media (max-width: 760px) {
  .pmt-barra { flex-wrap: wrap; position: static; }
  .pmt-barra-desc { flex-basis: 100%; }
  .pmt-barra-btn { margin-left: auto; }
  .pmt-entrada-quien, .pmt-entrada-rango { display: none; }
  .pmt-entrada-acciones { opacity: 1; }
}

/* ---------- Rangos rápidos, totales y atajos de reanudar ---------- */
.pmt-rangos { display: inline-flex; background: var(--panel-2); border-radius: var(--radius-sm); padding: 3px; }
.pmt-rangos button {
  background: transparent; border: none; border-radius: 6px;
  color: var(--muted); padding: 5px 12px; cursor: pointer;
  font-family: inherit; font-size: var(--texto-sm);
}
.pmt-rangos button:hover { color: var(--text); }
.pmt-rangos button.activo {
  background: var(--panel); color: var(--text);
  font-weight: var(--peso-medio); box-shadow: var(--shadow-sm);
}

.pmt-totales {
  display: flex; flex-wrap: wrap; gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}
.pmt-total {
  flex: 1; min-width: 140px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--esp-3) var(--esp-4);
}
.pmt-total > span {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: var(--peso-medio);
}
.pmt-total > strong { font-size: var(--texto-lg); font-variant-numeric: tabular-nums; }

.pmt-recientes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: var(--esp-4); font-size: var(--texto-sm);
}
.pmt-reciente {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-full); color: var(--text);
  padding: 4px 12px; cursor: pointer;
  font-family: inherit; font-size: var(--texto-sm);
}
.pmt-reciente:hover { border-color: var(--accent); color: var(--accent); }