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

/* ---------- 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);
  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;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
/* Al escribir en ella, la barra entera se enciende (es el único campo). */
.pmt-barra:focus-within { border-color: var(--accent); box-shadow: var(--anillo-foco); }
/* 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.corriendo:focus-within { box-shadow: inset 3px 0 0 var(--green), var(--anillo-foco); }

.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; }
/* Casi siempre una etiqueta con el proyecto activo (lo fija el switcher); con
   «★ Todos los proyectos» pasa a ser un <select> real para la sesión libre. */
.pmt-barra-espacio {
  display: inline-flex; align-items: center;
  height: 32px; box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 0 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);
  height: 32px; box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: var(--texto-sm);
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pmt-barra-busca { width: 260px; flex: none; }
/* Captura unificada. Autor: Sergio Vargas. */
.pmt-barra-captura { flex: 1; min-width: 220px; display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.pmt-barra-captura .pmt-barra-busca { width: 100%; }
.pmt-barra-captura .pmt-barra-desc { width: 100%; flex-basis: 100%; }
.pmt-barra-captura .pmt-barra-item { max-width: 100%; }
.pmt-barra-captura .pm-buscador-lista { max-width: min(600px, 90vw); }
/* El nombre cede (elipsis) antes que el botón «✕»: con un código + un nombre
   largo, el botón es la única forma de quitar el ítem y no puede clipearse. */
.pmt-barra-item > span:not(.pmb-codigo) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pmt-barra-item .pm-btn-mini { margin-left: 2px; flex: none; }
select.pmt-barra-espacio { cursor: pointer; font-family: inherit; color: var(--text); }

/* Día al que se cargará el registro. Deshabilitado mientras el cronómetro
   corre (el destino se fijó al arrancar); resaltado si no es hoy, que es la
   única situación en la que vale la pena mirarlo. */
.pmt-barra-fecha {
  flex: none;
  height: 32px; box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 0 8px;
  font-family: inherit;
  font-size: var(--texto-sm);
}
.pmt-barra-fecha:disabled { opacity: 0.7; }
.pmt-barra-fecha.otro-dia { color: var(--amber); border-color: var(--amber); opacity: 1; }
/* Hora de inicio de la sesión en curso, editable (estilo Clockify). */
.pmt-barra-inicio {
  flex: none;
  height: 32px; box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 0 8px;
  font-family: inherit;
  font-size: var(--texto-sm);
}
.pmt-barra-fecha:focus, .pmt-barra-inicio:focus, select.pmt-barra-espacio:focus { outline: none; border-color: var(--accent); box-shadow: var(--anillo-foco); color: var(--text); }

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

.pmt-barra-btn {
  flex: none;
  min-width: 96px;
  height: var(--control-h);
  padding: 0 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), box-shadow var(--transicion);
}
.pmt-barra-btn.iniciar { background: var(--accent); }
.pmt-barra-btn.iniciar:hover { background: var(--accent-hover); box-shadow: var(--brillo-acento); }
.pmt-barra-btn.detener { background: var(--red); }
.pmt-barra-btn.detener:hover { filter: brightness(1.08); }
.pmt-barra-btn:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.pmt-barra-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Entradas agrupadas por semana y día ---------- */
/* El total de la semana va arriba de sus registros (estilo Clockify): es lo
   primero que se mira al abrir el Rastreador. Deliberadamente NO es una
   tarjeta: así se lee como el encabezado del bloque y no como una fila más. */
.pmt-semana { margin-bottom: var(--esp-4); }
.pmt-semana-head {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-1) var(--esp-2);
}
.pmt-semana-nombre { font-weight: var(--peso-medio); }
/* El desglose por persona se come el espacio sobrante y empuja el total a la
   derecha; con una sola persona no se pinta y el margen automático mantiene
   el total en su sitio igual. */
.pmt-semana-quien {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--texto-sm);
}
.pmt-semana-total {
  margin-left: auto;
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
}
.pmt-semana .pmt-dia + .pmt-dia { margin-top: var(--esp-3); }

.pmt-dia { padding: 0; overflow: hidden; }
/* Editar una entrada mete el buscador de destino (posición absoluta) dentro
   de la tarjeta: sin esto, la lista de resultados de la última fila del día
   se corta contra el overflow:hidden de arriba (que redondea las esquinas). */
.pmt-dia:has(.pmt-form-destino) { overflow: visible; }
.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);
}

/* El resumen permanece visible aunque los registros del colaborador estén
   plegados. <summary> conserva el marcador y la interacción nativa de teclado. */
.pmt-colaborador { border-top: 1px solid var(--border); }
.pmt-colaborador-resumen {
  cursor: pointer;
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  overflow-wrap: anywhere;
}
.pmt-colaborador-resumen:hover { background: var(--panel-2); }
.pmt-colaborador-resumen:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.pmt-otras-activas > .pmt-colaborador-resumen { padding: var(--esp-2) 0; }

.pmt-entrada {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 48px;
  padding: var(--esp-2) var(--esp-4);
  border-bottom: 1px solid var(--border-suave);
  transition: background var(--transicion);
}
.pmt-entrada:last-child { border-bottom: none; }
.pmt-entrada:hover { background: var(--superficie-hover); }
.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; }
/* Columna Cliente del registro: ancho fijo para que las filas se alineen. */
.pmt-entrada-cliente {
  flex: none; width: 130px; font-size: var(--texto-sm);
  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); }
/* El ⋯ del registro a la altura del ▶ (pm-btn-mini). */
.pmt-entrada-acciones .pm-fila-menu-btn { padding: 0 8px; }
/* 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); display: flex; align-items: center; }
.pmt-tabs-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--esp-2); }
.pmt-espacio-filtro {
  max-width: 260px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text); font: inherit; font-size: var(--texto-sm); cursor: pointer;
}
.pmt-espacio-filtro:hover { border-color: var(--border-fuerte); }

/* ---------- 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: 56px;
}
.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-fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: flex-end;
  flex: 1 1 100%;
}
/* Filas Descripción + Proyecto y Mover a otra tarea + Épica: 65% / 35%.
   Con Épica también en la primera fila (alta manual), 50 / 25 / 25. */
.pmt-form-fila[data-fila-nota] > label:first-child,
.pmt-form-fila[data-fila-destino] > label:first-child { flex: 0 1 65%; }
.pmt-form-fila[data-fila-nota]:has(> label:nth-child(3)) > label:first-child { flex: 0 1 50%; }
.pmt-form-fila[data-fila-nota] select { width: 100%; }
.pmt-form-fila[data-fila-nota] > *:not(:first-child),
.pmt-form-fila[data-fila-destino] > *:not(:first-child) { flex: 1 1 0; min-width: 0; }
.pmt-form-fila[data-fila-destino] .pm-buscador,
.pmt-form-fila[data-fila-destino] select { 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-destino { display: flex; align-items: center; gap: var(--esp-2); flex: 1 1 auto; flex-wrap: wrap; }
/* .pmt-form-tiempo input: receta única de pm.css ("Sistema de controles"). */

.pmt-sesion {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  min-height: 36px;
  padding: var(--esp-1) 0;
  border-bottom: 1px solid var(--border-suave);
  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%; }
  /* Proyecto, épica y fecha envuelven dentro del ancho de la barra: antes el
     bloque iba en una sola línea y se salía de la pantalla. */
  .pmt-barra-contexto { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .pmt-barra-espacio, .pmt-barra-item, .pmt-barra-epica { max-width: 100%; }
  .pmt-barra-busca { width: auto; flex: 1 1 100%; }
  .pmt-barra-btn { margin-left: auto; }
  .pmt-entrada-quien, .pmt-entrada-rango, .pmt-entrada-cliente { display: none; }
  .pmt-entrada-acciones { opacity: 1; }
}

/* ---------- Rangos rápidos, totales y atajos de reanudar ---------- */
/* Rangos rápidos: control segmentado (misma receta que el resto de la app). */
.pmt-rangos { display: inline-flex; gap: 2px; background: var(--panel-2); border-radius: var(--radius-sm); padding: 3px; }
.pmt-rangos button {
  height: 28px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-xs);
  color: var(--muted); padding: 0 12px; cursor: pointer;
  font-family: inherit; font-size: var(--texto-sm); font-weight: var(--peso-medio);
  transition: background var(--transicion), color var(--transicion);
}
.pmt-rangos button:hover { color: var(--text); }
.pmt-rangos button.activo {
  background: var(--panel); color: var(--text); border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.pmt-rangos button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Flechas para moverse un periodo atrás/adelante con la etiqueta del que se mira. */
.pmt-rango-nav { display: inline-flex; align-items: center; gap: var(--esp-1); }
.pmt-rango-nav button {
  width: var(--control-h-sm); height: var(--control-h-sm); padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--muted); cursor: pointer; line-height: 1;
  font-family: inherit; font-size: var(--texto-base);
}
.pmt-rango-nav button:hover:not(:disabled) { color: var(--text); background: var(--superficie-hover); border-color: var(--border-fuerte); }
.pmt-rango-nav button:disabled { opacity: .4; cursor: default; }
.pmt-rango-etiqueta {
  min-width: 8em; text-align: center;
  font-size: var(--texto-sm); color: var(--text);
}

.pmt-totales {
  display: flex; flex-wrap: wrap; gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}
/* Superficie y tipografía del tile: receta KPI compartida (pm.css). */
.pmt-total { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }

.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;
  height: 28px; 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: 0 12px; cursor: pointer;
  font-family: inherit; font-size: var(--texto-sm);
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.pmt-reciente:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-suave); }
.pmt-reciente:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--anillo-foco); }

.pmt-reporte-sub td { background: var(--panel-2); font-size: var(--texto-sm); }
.pmt-resumen-sub td { background: var(--panel-2); font-size: var(--texto-sm); }
/* Selector de épica de la sesión libre (mejoras 2026-08-25): mismo look que
   el de proyecto, con tope de ancho para que la barra no se desborde. */
.pmt-barra-epica { max-width: 220px; }

/* Chip de proyecto en Entradas y Resumen (petición 2026-08-25): el estilo
   base es .pmb-proyecto de pm-backlog.css; aquí solo el respiro. */
.pmt-entrada-titulo .pmb-proyecto, .pm-tabla td .pmb-proyecto {
  margin-right: 6px; display: inline-block; max-width: 180px; vertical-align: middle;
}

/* ---------- pestaña Reuniones (calendario Microsoft) ---------- */
.pmt-reuniones-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3);
  flex-wrap: wrap; padding-bottom: var(--esp-3); border-bottom: 1px solid var(--border);
}
.pmt-reuniones-vacio { padding: var(--esp-4) 0; }
.pmt-reunion { padding: 10px 0; border-bottom: 1px solid var(--border-suave); }
.pmt-reunion:last-child { border-bottom: none; }
.pmt-reunion-cerrada { opacity: 0.6; }
.pmt-reunion-cab { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.pmt-reunion-hora { flex: none; font-variant-numeric: tabular-nums; font-size: var(--texto-sm); color: var(--muted); }
.pmt-reunion-asunto { flex: 1; min-width: 160px; font-weight: var(--peso-medio); }
.pmt-reunion-teams { font-size: var(--texto-xs); font-weight: normal; margin-left: var(--esp-2); }
.pmt-reunion-estado { font-size: var(--texto-xs); }
.pmt-reunion-estado.ok { color: var(--green); }
.pmt-reunion-estado.vivo { color: var(--accent); font-weight: var(--peso-medio); }
.pmt-reunion-acciones { display: flex; gap: var(--esp-2); margin-left: auto; }
.pmt-reunion-form {
  margin-top: var(--esp-3); padding: var(--esp-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--panel-2);
  display: flex; flex-direction: column; gap: var(--esp-3);
}
.pmt-reunion-modos { margin: 0; }
.pmt-reunion-elegido { flex: none; }
.pmt-reunion-datos .pmt-reunion-dur { flex: 0 0 90px; }
.pmt-reunion-datos .pmt-reunion-desc { flex: 1; }
.pmt-reunion-form .pmt-acciones { justify-content: flex-end; }