/* Herramientas flotantes del escritorio (herramientas.js, 2026-10-17).
   Todo cuelga de #herramientas para no chocar con el resto del panel. */

#herramientas {
  --herr-navy: #011526;
  --herr-blue: #043F8C;
  --herr-red: #F20505;
  --herr-green: #178A4C;
  --herr-borde: #e5e7eb;
  --herr-suave: #F5F7FA;
  --herr-gris: #6b7280;
  font-size: 14px;
  color: #0f1b24;
}
#herramientas [hidden] { display: none !important; }
#herramientas button { font: inherit; cursor: pointer; }
#herramientas button:focus-visible,
#herramientas input:focus-visible,
#herramientas select:focus-visible,
#herramientas textarea:focus-visible {
  outline: 2px solid var(--herr-blue);
  outline-offset: 1px;
}
@media print { #herramientas { display: none !important; } }

/* ---- Botón flotante ---- */
.herr-burbuja {
  position: fixed;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.55);
  background: rgba(1, 21, 38, 0.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(1, 21, 38, 0.28);
  opacity: 0.6;
  touch-action: none;
  user-select: none;
  transition: opacity 0.15s, transform 0.15s, background 0.15s;
  backdrop-filter: blur(4px);
}
.herr-burbuja:hover,
.herr-burbuja:focus-visible,
.herr-burbuja.abierta,
.herr-burbuja.arrastrando { opacity: 1; background: rgba(1, 21, 38, 0.9); }
.herr-burbuja.arrastrando { cursor: grabbing; transform: scale(1.06); }
.herr-burbuja.pegando { transition: left 0.2s ease-out, top 0.2s ease-out, opacity 0.15s; }

.herr-menu {
  position: fixed;
  background: #fff;
  border: 1px solid var(--herr-borde);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(1, 21, 38, 0.22);
  padding: 6px;
  min-width: 210px;
  animation: herr-entrar 0.14s ease-out;
}
.herr-menu.desde-der { transform-origin: right center; }
.herr-menu.desde-izq { transform-origin: left center; }
.herr-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  font-weight: 600;
  color: var(--herr-navy);
}
.herr-menu button:hover,
.herr-menu button:focus-visible { background: #EAF1FC; outline: none; }
.herr-menu-icono {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #EAF1FC;
  color: var(--herr-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.herr-menu-punto {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--herr-green);
}
@keyframes herr-entrar {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- Ventanas ---- */
.herr-ventana {
  position: fixed;
  max-width: calc(100vw - 16px);
  background: #fff;
  border: 1px solid var(--herr-borde);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(1, 21, 38, 0.25);
  display: flex;
  flex-direction: column;
  outline: none;
  animation: herr-entrar 0.14s ease-out;
}
.herr-ventana.arrastrando { box-shadow: 0 22px 50px rgba(1, 21, 38, 0.32); user-select: none; }
.herr-barra {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 12px;
  background: var(--herr-navy);
  color: #fff;
  border-radius: 13px 13px 0 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}
.herr-ventana.arrastrando .herr-barra { cursor: grabbing; }
.herr-barra-icono { display: flex; opacity: 0.85; }
.herr-barra-titulo { font-weight: 600; font-size: 13px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.herr-btn-barra {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}
.herr-btn-barra:hover { background: rgba(255, 255, 255, 0.14); opacity: 1; }
.herr-cuerpo {
  padding: 12px;
  overflow-y: auto;
}
.herr-ventana.herr-min { width: 230px !important; }
.herr-ventana.herr-min .herr-cuerpo { display: none; }
.herr-ventana.herr-min .herr-barra { border-radius: 13px; }

/* ---- Piezas comunes ---- */
.herr-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; }
.herr-input {
  width: 100%;
  min-width: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
}
.herr-input:focus { border-color: var(--herr-blue); outline: none; box-shadow: 0 0 0 3px rgba(4, 63, 140, 0.12); }
.herr-input.invalido { border-color: var(--herr-red); background: #fff5f5; }
.herr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  border-radius: 8px;
  padding: 7px 11px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.herr-btn:hover { background: var(--herr-suave); }
.herr-btn:disabled { opacity: 0.55; cursor: default; }
.herr-btn.primario { background: var(--herr-blue); border-color: var(--herr-blue); color: #fff; }
.herr-btn.primario:hover { background: var(--herr-navy); }
.herr-btn.peligro { color: var(--herr-red); border-color: #fecaca; }
.herr-btn.peligro:hover { background: #fef2f2; }
.herr-link { border: 0; background: none; color: var(--herr-blue); font-weight: 600; font-size: 13px; padding: 2px 0; }
.herr-link:hover { text-decoration: underline; }
.herr-link.gris { color: var(--herr-gris); }
.herr-ayuda { font-size: 12px; color: var(--herr-gris); margin: 4px 0 8px; }
.herr-vacio { font-size: 13px; color: var(--herr-gris); text-align: center; padding: 14px 6px; }
.herr-tabs { display: flex; border-bottom: 1px solid var(--herr-borde); margin-bottom: 8px; }
.herr-tabs button {
  flex: 1;
  border: 0;
  background: none;
  padding: 8px 4px;
  font-weight: 600;
  font-size: 13px;
  color: var(--herr-gris);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.herr-tabs button.activo { color: var(--herr-blue); border-bottom-color: var(--herr-blue); }
.herr-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0; cursor: pointer; }
.herr-check input { width: 16px; height: 16px; accent-color: var(--herr-blue); }

/* ---- Calculadora ---- */
.herr-calc-hist { list-style: none; margin: 0 0 6px; padding: 0; max-height: 96px; overflow-y: auto; }
.herr-calc-hist button {
  width: 100%;
  border: 0;
  background: none;
  text-align: right;
  font-size: 12px;
  color: var(--herr-gris);
  padding: 2px 4px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.herr-calc-hist button:hover { background: var(--herr-suave); color: var(--herr-navy); }
.herr-calc-hist b { color: var(--herr-navy); font-weight: 600; }
.herr-calc-expr {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 22px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.herr-calc-expr:focus { border-color: var(--herr-blue); outline: none; box-shadow: 0 0 0 3px rgba(4, 63, 140, 0.12); }
.herr-calc-res {
  min-height: 22px;
  text-align: right;
  font-size: 15px;
  color: var(--herr-blue);
  font-weight: 600;
  padding: 3px 4px 8px;
  font-variant-numeric: tabular-nums;
}
.herr-calc-res.error { color: var(--herr-red); font-size: 13px; }
.herr-calc-teclas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.herr-tecla {
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--herr-suave);
  font-size: 17px;
  font-weight: 600;
  color: var(--herr-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.herr-tecla:hover { background: #e8edf3; }
.herr-tecla:active { transform: scale(0.96); }
.herr-tecla.fn { color: var(--herr-gris); }
.herr-tecla.op { background: #EAF1FC; color: var(--herr-blue); font-size: 20px; }
.herr-tecla.igual { grid-column: span 3; background: var(--herr-blue); color: #fff; font-size: 20px; }
.herr-tecla.igual:hover { background: var(--herr-navy); }

/* ---- IVA ---- */
.herr-seg { display: inline-flex; background: var(--herr-suave); border-radius: 9px; padding: 3px; }
.herr-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font-weight: 600; font-size: 13px; color: var(--herr-gris); }
.herr-seg button.activo { background: #fff; color: var(--herr-blue); box-shadow: 0 1px 3px rgba(1, 21, 38, 0.15); }
.herr-tasa { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--herr-gris); }
.herr-tasa select { border: 1px solid #d1d5db; border-radius: 8px; padding: 5px 6px; font: inherit; color: #0f1b24; }
.herr-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--herr-gris); margin-bottom: 10px; }
.herr-campo .herr-input { font-size: 18px; font-weight: 600; color: #0f1b24; text-align: right; }
.herr-resumen { background: var(--herr-suave); border-radius: 10px; padding: 6px 10px; }
.herr-res-titulo { font-size: 12px; font-weight: 600; color: var(--herr-gris); margin: 4px 0 2px; }
.herr-res-fila { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 14px; }
.herr-res-fila + .herr-res-fila { border-top: 1px solid #e8edf3; }
.herr-res-fila.destacada { font-weight: 700; color: var(--herr-blue); font-size: 16px; }
.herr-res-valor { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.herr-copiar {
  border: 0;
  background: none;
  color: var(--herr-gris);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.herr-copiar:hover { background: #fff; color: var(--herr-blue); }
.herr-renglones { display: flex; flex-direction: column; gap: 5px; }
.herr-renglon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 88px 86px 24px;
  gap: 5px;
  align-items: center;
}
.herr-renglon .herr-input { padding: 6px 7px; font-size: 13px; }
.herr-renglon [data-campo="cant"],
.herr-renglon [data-campo="precio"] { text-align: right; }
.herr-renglon.encabezado { font-size: 11px; font-weight: 600; color: var(--herr-gris); text-transform: uppercase; letter-spacing: 0.02em; }
.herr-renglon .der { text-align: right; }
.herr-renglon-importe { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.herr-quitar {
  border: 0;
  background: none;
  color: #9ca3af;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.herr-quitar:hover { color: var(--herr-red); background: #fef2f2; }

/* ---- Notas ---- */
.herr-n-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.herr-n-item {
  width: 100%;
  border: 1px solid var(--herr-borde);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.herr-n-item:hover { border-color: #c7d4e6; background: #fbfcfe; }
.herr-n-titulo { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--herr-navy); min-width: 0; }
.herr-n-texto-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.herr-n-marca { color: var(--herr-blue); display: flex; flex-shrink: 0; }
.herr-n-insignia {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--herr-green);
  background: #e8f5ee;
  padding: 1px 7px;
  border-radius: 999px;
}
.herr-n-resumen { font-size: 12px; color: #4b5563; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.herr-n-fecha { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #9ca3af; }
.herr-n-editor { display: flex; flex-direction: column; }
.herr-n-estado { font-size: 12px; color: var(--herr-gris); }
.herr-n-estado.error { color: var(--herr-red); }
.herr-n-campo-titulo { font-weight: 600; margin-bottom: 6px; }
.herr-n-campo-texto { resize: vertical; min-height: 140px; line-height: 1.45; }
.herr-n-confirmar { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--herr-red); flex-wrap: wrap; justify-content: flex-end; }
.herr-n-leer-titulo { font-weight: 700; font-size: 16px; color: var(--herr-navy); margin: 4px 0 2px; }
.herr-n-leer-texto {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--herr-suave);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  max-height: 360px;
  overflow-y: auto;
  line-height: 1.45;
}