/* ============================================================================
 * components.css — Controles: botones, radios, spinbox, barra de progreso,
 * tabla (Treeview), menú contextual, diálogos, explorador y vista previa.
 * ========================================================================== */

/* -- Botones estilo ttk --------------------------------------------------------- */
.btn {
  padding: 5px 10px;                 /* padding=(10,5) del estilo real */
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 2px;
  cursor: pointer;
  color: #1a1a1a;
}
.btn:hover:not(:disabled) { border-color: var(--btn-hover-border); background: var(--btn-hover-bg); }
.btn:active:not(:disabled) { background: var(--btn-active-bg); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-accent { font-weight: 700; }    /* Accent.TButton: Segoe UI 10 bold */

/* -- Radiobuttons ----------------------------------------------------------------- */
.radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}
.radio input { accent-color: var(--selection); }

/* -- Spinbox ------------------------------------------------------------------------- */
.spinbox {
  text-align: center;
  padding: 2px 2px;
  border: 1px solid #7a7a7a;
  border-radius: 1px;
  background: #fff;
}
.spinbox:focus { outline: 1px solid var(--selection); outline-offset: 0; border-color: var(--selection); }

/* -- Barra de progreso ---------------------------------------------------------------- */
.progressbar {
  width: 200px;                       /* length=200 del real */
  height: 14px;
  border: 1px solid #9a9a9a;
  border-radius: 2px;
  background: #fff;
  overflow: hidden;
  margin: 0 10px;
  position: relative;
}
.progressbar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(#7dc97f, #3fa64b);
  transition: width 0.2s ease;
}
/* Indeterminada: bloque que rebota */
.progressbar:not(.determinate) .progressbar-fill {
  width: 30% !important;
  animation: bounce 1.2s ease-in-out infinite;
}
@keyframes bounce {
  0% { margin-left: 0; }
  50% { margin-left: 70%; }
  100% { margin-left: 0; }
}

#statusLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }

/* -- Tabla (ttk.Treeview) ------------------------------------------------------------------ */
.tree-wrap { flex: 1; overflow: auto; background: var(--surface); border: 1px solid #7a7a7a; position: relative; min-height: 0; }
.treeview { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.treeview:focus { outline: 1px dotted #666; outline-offset: -1px; }
.treeview thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(#fdfdfd, #ededed);
  border-bottom: 1px solid #c9c9c9;
  border-right: 1px solid #e2e2e2;
  font-weight: 700;                  /* Treeview.Heading: Segoe UI 10 bold */
  padding: 4px 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.treeview thead th:hover { background: var(--btn-hover-bg); }
.treeview td { padding: 3px 8px; border-bottom: 1px solid #eee; height: 24px; } /* rowheight=24 */
.align-center { text-align: center; }
.align-right { text-align: right; }
tr.even { background: var(--row-even); }
tr.odd { background: var(--row-odd); }
tr.selected { background: var(--selection) !important; color: #fff; }
tr[data-idx]:hover:not(.selected) { background: #e5f1fb; }

.tree-empty {
  position: absolute;
  inset: 30px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #777;
  padding: 30px 20px;
  text-align: center;
  line-height: 1.5;
  background: #fff;
}

/* -- Menú contextual --------------------------------------------------------------------------- */
.context-menu {
  position: fixed;
  z-index: 6000;
  background: #f5f5f5;
  border: 1px solid #9a9a9a;
  border-radius: 2px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
  min-width: 180px;
  padding: 2px;
}
.context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 5px 14px;
  cursor: pointer;
}
.context-menu button:hover { background: var(--selection); color: #fff; }
.context-sep { height: 1px; background: #d0d0d0; margin: 3px 6px; }

/* -- Diálogos modales ----------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
}
.dialog {
  background: var(--win-bg);
  border: 1px solid #8a8a8a;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  min-width: 340px;
  max-width: 560px;
  overflow: hidden;
}
.dialog-title {
  background: linear-gradient(#ffffff, #f0f0f0);
  border-bottom: 1px solid var(--win-border);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}
.dialog-body { display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.dialog-icon { font-size: 26px; line-height: 1; flex: none; }
.msg-info .dialog-icon { color: var(--color-info); }
.msg-warning .dialog-icon { color: #b8860b; }
.msg-error .dialog-icon { color: #c42b1c; }
.msg-question .dialog-icon { color: var(--color-info); font-weight: 700; }
.dialog-text { white-space: pre-wrap; line-height: 1.45; padding-top: 3px; }
.dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px 14px;
}
.dialog-buttons .btn { min-width: 76px; }

/* -- Diálogo Guardar ---------------------------------------------------------------------------------- */
.dialog-save { width: 620px; max-width: calc(100vw - 24px); }
.save-help { font-size: 11px; color: #666; padding: 8px 12px 0; }
.save-main { display: flex; gap: 8px; padding: 10px 12px; height: 220px; }
.save-tree {
  width: 240px;
  border: 1px solid #7a7a7a;
  background: #fff;
  overflow: auto;
  padding: 4px 0;
}
.save-list { flex: 1; border: 1px solid #7a7a7a; background: #fff; overflow: auto; padding: 4px 0; }
.tree-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tree-row:hover { background: #e5f1fb; }
.tree-row.selected { background: var(--selection); color: #fff; }
.tree-arrow { width: 14px; text-align: center; color: #666; flex: none; }
.tree-row.selected .tree-arrow { color: #fff; }
.tree-ico { flex: none; }
.save-fields { display: flex; align-items: center; gap: 6px; padding: 0 12px 4px; }
.save-label { color: #333; }
.save-name { flex: 1; padding: 3px 6px; border: 1px solid #7a7a7a; }
.save-name:focus { outline: 1px solid var(--selection); }
.save-type { padding: 3px; border: 1px solid #7a7a7a; background: #fff; }

/* -- Explorador ficticio --------------------------------------------------------------------------------- */
.explorer-window {
  position: fixed;
  top: 90px;
  left: calc(50% - 260px);
  width: 520px;
  max-width: calc(100vw - 24px);
  background: var(--win-bg);
  border: 1px solid #8a8a8a;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.explorer-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(#ffffff, #f0f0f0);
  border-bottom: 1px solid var(--win-border);
  padding: 6px 4px 6px 10px;
  font-size: 12px;
  cursor: move;
  user-select: none;
}
.explorer-close {
  border: none;
  background: transparent;
  width: 34px;
  height: 20px;
  cursor: pointer;
  border-radius: 2px;
}
.explorer-close:hover { background: #e81123; color: #fff; }
.explorer-list { max-height: 320px; min-height: 120px; overflow: auto; background: #fff; padding: 4px 0; }
.explorer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  cursor: pointer;
  user-select: none;
}
.explorer-row:hover { background: #e5f1fb; }
.explorer-row.selected { background: var(--selection); color: #fff; }
.explorer-ico { flex: none; }
.explorer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-meta { color: #888; font-size: 11px; }
.explorer-row.selected .explorer-meta { color: #dceefb; }
.explorer-empty { padding: 22px 16px; color: #777; text-align: center; }
.explorer-status {
  border-top: 1px solid var(--win-border);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--color-neutral);
}

/* -- Vista previa de archivo ------------------------------------------------------------------------------ */
.dialog-preview { width: 520px; max-width: calc(100vw - 24px); }
.preview-body { display: block; max-height: 340px; overflow: auto; }
.preview-table { width: 100%; border-collapse: collapse; background: #fff; }
.preview-table th { background: #1f4e78; color: #fff; padding: 4px 8px; text-align: left; font-size: 12px; }
.preview-table td { border: 1px solid #bfbfbf; padding: 3px 8px; }
.preview-note { color: #666; font-size: 12px; padding: 8px 2px 0; }
.preview-text {
  background: #fff;
  border: 1px solid #d0d0d0;
  padding: 10px;
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 280px;
  overflow: auto;
  width: 100%;
}