/* Tool Hub — barra superior compartida + retoques de formularios
   Se carga en todas las páginas del ToolBox (inicio y herramientas). */

/* ---------- Barra superior ---------- */
.th-bar {
  position: relative;
  z-index: 50;
  align-self: stretch;             /* para <body> con display:flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 clamp(16px, 3vw, 28px);
  background: rgba(10, 11, 15, .85);
  border-bottom: 1px solid var(--panel-border, var(--border, #262a37));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.th-crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
}
.th-brand {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink, #eef0f5);
  text-decoration: none;
}
.th-brand span { color: var(--holo-b, #29e0d6); }
.th-sep { color: var(--panel-border, #343846); }
.th-crumb { color: var(--muted, #8a8f9f); text-decoration: none; }
a.th-crumb:hover { color: var(--ink, #eef0f5); }
.th-crumb[aria-current="page"] { color: var(--ink, #eef0f5); }
.th-crumb--current { overflow: hidden; text-overflow: ellipsis; }

.th-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.th-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--panel-border, #262a37);
  color: var(--muted, #8a8f9f);
  transition: border-color .15s ease, color .15s ease;
}
.th-icon:hover { color: var(--ink, #eef0f5); border-color: var(--muted, #8a8f9f); }
.th-icon svg { width: 15px; height: 15px; fill: currentColor; }
.th-donate {
  height: 34px;
  display: inline-flex; align-items: center;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: #08090d;
  background: var(--holo-b, #29e0d6);
  text-decoration: none;
  transition: filter .15s ease;
}
.th-donate:hover { filter: brightness(1.1); }

@media (max-width: 560px) {
  .th-bar { height: 52px; }
  .th-brand { font-size: 13px; }
  .th-crumbs { gap: 7px; font-size: 13px; }
  /* En pantallas chicas, dentro de una herramienta se ve "ToolBox / herramienta" */
  .th-crumbs:has(.th-crumb--current) .th-brand,
  .th-crumbs:has(.th-crumb--current) .th-sep:first-of-type { display: none; }
  .th-donate { padding: 0 10px; font-size: 12px; }
}

/* ---------- Retoques de formularios (baja especificidad: cada
   herramienta puede pisarlos con su propio CSS) ---------- */
:where(input[type="file"])::file-selector-button {
  font: 500 13px 'Inter', sans-serif;
  color: var(--ink, #eef0f5);
  background: var(--panel, #14161e);
  border: 1px solid var(--panel-border, #262a37);
  border-radius: 8px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
  transition: border-color .15s ease;
}
:where(input[type="file"])::file-selector-button:hover { border-color: var(--holo-b, #29e0d6); }
:where(input[type="file"]) { color: var(--muted, #8a8f9f); font-size: 13px; max-width: 100%; }

:where(input[type="color"]) { cursor: pointer; }
:where(input[type="color"])::-webkit-color-swatch-wrapper { padding: 0; }
:where(input[type="color"])::-webkit-color-swatch { border: none; border-radius: 4px; }
:where(input[type="color"])::-moz-color-swatch { border: none; border-radius: 4px; }

:where(input[type="range"], input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--accent, var(--holo-b, #29e0d6));
}