/* =============================================================================
   Utiliobox — estilos propios del planificador de zonas horarias.
   Solo tokens de utiliobox.css. Reutiliza notice, table, btn, input, select,
   field y badge del sistema compartido.
   ============================================================================= */

.tz-tool { overflow: hidden; }
.tz-head { display: flex; flex-direction: column; gap: var(--s-4); }

/* --- Controles de arriba --- */
.tz-controls {
  display: grid; gap: var(--s-3); align-items: end;
  grid-template-columns: minmax(150px, 200px) minmax(110px, 150px) auto;
}
.tz-bestbtn { white-space: nowrap; }

/* --- Buscador de ciudades --- */
.tz-add { position: relative; }
.tz-sug {
  position: absolute; z-index: var(--z-dropdown); left: 0; right: 0; top: 100%;
  margin-top: var(--s-1); padding: var(--s-1);
  list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
}
.tz-sug li { margin: 0; }
.tz-sug button {
  display: flex; width: 100%; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  text-align: left; transition: background var(--dur-fast) var(--ease-out);
}
.tz-sug button:hover { background: var(--surface-sunken); }
.tz-sug__name { font-size: var(--fs-sm); color: var(--ink); font-weight: var(--fw-medium); }
.tz-sug__meta { font-size: var(--fs-2xs); color: var(--ink-mute); }
.tz-sug__empty { padding: var(--s-3); font-size: var(--fs-xs); color: var(--ink-mute); }

/* --- Lista de participantes --- */
.tz-people { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.tz-people:empty { display: none; }
.tz-person {
  margin: 0; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--surface-alt); border: 1px solid var(--border);
}
.tz-person__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tz-person__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.tz-person__tz { font-size: var(--fs-2xs); color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-person__hours { display: flex; align-items: center; gap: var(--s-1); flex: none; }
.tz-person__hours .input { width: 62px; min-height: 32px; padding: var(--s-1) var(--s-2); text-align: center; }
.tz-person__dash { color: var(--ink-mute); font-size: var(--fs-xs); }
.tz-person .btn svg { width: 14px; height: 14px; }

/* --- La rejilla de 24 horas --- */
.tz-gridbox { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--surface-alt); }
.tz-grid__empty { font-size: var(--fs-sm); color: var(--ink-mute); text-align: center; padding: var(--s-6); }
.tz-grid__hint { font-size: var(--fs-xs); color: var(--ink-mute); margin-top: var(--s-3); }

.tz-gridwrap { position: relative; overflow-x: auto; padding-bottom: var(--s-1); touch-action: pan-y; }
.tz-row { display: flex; align-items: stretch; gap: var(--s-2); min-width: 620px; }
.tz-row + .tz-row { margin-top: 3px; }
.tz-row__label {
  flex: 0 0 120px; display: flex; align-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tz-row__cells { flex: 1 1 auto; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }

.tz-row--head .tz-row__cells { margin-bottom: var(--s-1); }
.tz-h {
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute);
  text-align: center; padding-bottom: 2px;
}

.tz-c {
  display: grid; place-items: center; height: 30px; border-radius: var(--r-xs);
  font-family: var(--mono); font-size: var(--fs-2xs);
  border: 1px solid transparent; user-select: none;
}
.tz-c[data-s="ok"]    { background: var(--ok-soft);     color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.tz-c[data-s="edge"]  { background: var(--warn-soft);   color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.tz-c[data-s="night"] { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 26%, transparent); }

/* Franja seleccionada */
.tz-band {
  position: absolute; top: 0; bottom: var(--s-1);
  border: 2px solid var(--accent); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  pointer-events: none; z-index: 2;
}

/* --- Leyenda --- */
.tz-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--ink-mute);
}
.tz-legend__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.tz-legend i { width: 14px; height: 14px; border-radius: var(--r-xs); border: 1px solid transparent; }
.tz-legend i[data-s="ok"]    { background: var(--ok-soft);     border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tz-legend i[data-s="edge"]  { background: var(--warn-soft);   border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.tz-legend i[data-s="night"] { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* --- Aviso de cambio de hora --- */
.tz-dst { margin: var(--s-4) var(--s-5) 0; }
.tz-dst__why { display: block; margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--ink-mute); }

/* --- Mejores franjas --- */
.tz-best { padding: var(--s-5); border-top: 1px solid var(--border); background: var(--surface-alt); }
.tz-best__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.tz-best__note { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--s-4); max-width: 70ch; }
.tz-best__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.tz-best__item {
  margin: 0; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.tz-best__time { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--ink); flex: none; min-width: 62px; }
.tz-best__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tz-best__cities { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute); }

/* --- Franja elegida --- */
.tz-sel { padding: var(--s-5); border-top: 1px solid var(--border); }
.tz-sel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.tz-sel__verdict { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--warn); }
.tz-sel__verdict[data-ok="true"] { color: var(--ok); }
.tz-sel__shift { font-size: var(--fs-2xs); color: var(--ink-mute); font-weight: var(--fw-normal); }
.tz-actions { margin-top: var(--s-4); }
.tz-actions__hint { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--ink-mute); max-width: 78ch; }
.tz-url { display: block; margin-top: var(--s-1); font-size: var(--fs-2xs); word-break: break-all; color: var(--ink-mute); }

.tz-pill {
  display: inline-flex; padding: 2px var(--s-2); border-radius: var(--r-full);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); border: 1px solid transparent;
}
.tz-pill[data-s="ok"]    { background: var(--ok-soft);     color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.tz-pill[data-s="edge"]  { background: var(--warn-soft);   color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.tz-pill[data-s="night"] { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 26%, transparent); }

@media (max-width: 719px) {
  .tz-controls { grid-template-columns: 1fr 1fr; }
  .tz-bestbtn { grid-column: 1 / -1; }
  .tz-gridbox, .tz-best, .tz-sel, .tz-legend { padding-inline: var(--s-4); }
  .tz-dst { margin-inline: var(--s-4); }
  .tz-row__label { flex-basis: 88px; }
  .tz-person { flex-wrap: wrap; }
  .tz-person__id { flex-basis: 100%; }
  .tz-best__item { flex-wrap: wrap; }
  .tz-best__meta { flex-basis: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-sug button, .tz-c { transition: none; }
}

/* Alto reservado de la tarjeta mientras el JavaScript la monta. Medido en el
   sitio, no estimado: sin esto la herramienta empuja al aparecer y eso es
   CLS en la primera pantalla. Si la herramienta cambia de tamaño, este
   número hay que volver a medirlo. */
#tz-tool { --alto-herramienta: 536px; }