/* ═══════════════════════════════════════════════════════════════════════════
   HERRAMIENTAS — EL LANZADOR
   ───────────────────────────────────────────────────────────────────────────
   Mismo criterio que el resto del sitio: sin cajas. Un botón es una línea de
   texto con un filete a la izquierda que se enciende al pasar por encima. Doce
   rectángulos en grilla leerían como un panel de control de avión; así leen
   como lo que son, una lista de cosas que se pueden hacer.
   ═══════════════════════════════════════════════════════════════════════════ */

.herram-bajada {
  margin: 14px 0 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-dim);
}

/* `bloques.css` le pone 104px de aire a toda <section> del contenido, que es
   lo correcto para un bloque de página entera. Acá son cinco listas cortas de
   la misma familia: con ese aire se leen como cinco pantallas distintas. Se
   baja a la mitad, y se gana la especificidad para hacerlo. */
.contenido > .herram-grupo { margin: 0 0 clamp(30px, 3.6vw, 52px); }
.contenido > .herram-grupo:last-of-type { margin-bottom: 0; }

/* El título del grupo es un rótulo, no un encabezado: la jerarquía la lleva
   el h1 de arriba. Filete completo debajo para separar sin dibujar una caja. */
.herram-titulo {
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--g6);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-faint);
}

.herram-grilla {
  display: grid;
  /* Tres columnas, no cuatro. Los grupos tienen 5, 5, 2 y 3 herramientas: con
     cuatro columnas los dos primeros dejaban una fila huérfana de uno y tres
     agujeros al lado. Con tres, la huérfana lleva dos y la página deja de
     verse agujereada. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 2px 26px;
}

.herram-boton {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0 14px 14px;
  border-left: 1px solid transparent;
  color: var(--tinta-dim);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

.herram-boton:hover { color: var(--tinta); border-left-color: var(--g7); }

.herram-boton:focus-visible {
  outline: none;
  color: var(--tinta);
  border-left-color: var(--acento);
}

.herram-boton b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tinta);
}

.herram-boton span { font-size: 13px; line-height: 1.45; }

/* El precio en monoespaciada y apagado: está para consultarlo, no para que sea
   lo primero que se lee. */
.herram-costo {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--tinta-faint);
}

/* Una sección del catálogo sin material: se ve, no se toca. No es un botón
   deshabilitado —no hay nada que habilitar— es un renglón informativo con la
   misma forma que sus hermanos, para que la lista se lea pareja. */
.herram-apagado { cursor: default; color: var(--tinta-faint); }
.herram-apagado b { color: var(--tinta-dim); }

/* ── La biblioteca de presets ──────────────────────────────────────────────
   Una ficha por preset: el nombre y el texto que aporta al pedido. Sin caja,
   como todo, con el filete a la izquierda que agrupa la columna. */

.presets-nota {
  margin: 10px 0 2px;
  font-size: 13px;
  color: var(--tinta-faint);
}

.preset-ficha {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0;
  border-left: 1px solid var(--g6);
}

.preset-alto { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.preset-alto b { font-size: 14.5px; font-weight: 600; color: var(--tinta); }

.preset-marca {
  font-style: normal;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-faint);
}
.preset-mio { color: var(--acento); }

.preset-texto {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta-dim);
}


.presets-ayuda {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--tinta-dim);
  font-size: 13px;
  line-height: 1.6;
}

.preset-elegir {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 44px;
  padding: 14px;
  cursor: pointer;
}
.preset-consulta { padding: 14px; }
.preset-contenido { min-width: 0; }
.preset-casilla {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--acento);
  cursor: pointer;
}
.preset-ficha:hover { border-left-color: var(--acento); }
.preset-ficha:has(.preset-casilla:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.preset-elegido {
  border-left-color: var(--acento);
  background: var(--acento-soft, color-mix(in oklch, var(--gr-rosa) 10%, transparent));
}

.contenido > .presets-seleccion {
  position: sticky;
  top: calc(var(--barra, 72px) + 10px);
  z-index: 8;
  margin: 0 0 30px;
  padding: 14px 18px;
  border: 1px solid var(--g6);
  border-radius: 12px;
  background: var(--papel-2, #203944);
  box-shadow: 0 8px 24px #10232c26;
}
.presets-seleccion-cab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.presets-seleccion h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}
.presets-cuenta { font-size: 12px; color: var(--tinta-dim); }
.presets-limpiar {
  margin-left: auto;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--acento);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.presets-estado {
  margin: 4px 0 8px;
  color: var(--tinta-dim);
  font-size: 12.5px;
  line-height: 1.5;
}
.presets-elegidos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 100px;
  overflow-y: auto;
  padding: 3px;
  margin: 0 0 8px;
}
.presets-elegidos[hidden] { display: none; }
.presets-quitar {
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--g6);
  border-radius: 6px;
  background: var(--acento-soft, color-mix(in oklch, var(--gr-rosa) 10%, transparent));
  color: var(--tinta);
  font: inherit;
  font-size: 12px;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.presets-acciones { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.presets-usar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--acento);
  border-radius: 6px;
  background: var(--acento);
  color: var(--acento-ink, #28161f);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.presets-usar:hover { background: var(--tinta); border-color: var(--tinta); }
.presets-usar[aria-disabled="true"], .presets-limpiar:disabled {
  background: none;
  border-color: var(--g6);
  color: var(--tinta-faint);
  opacity: .65;
  cursor: default;
}
.presets-usar[aria-disabled="true"] { pointer-events: none; }
.presets-usar, .presets-quitar, .presets-limpiar { min-width: 44px; min-height: 44px; box-sizing: border-box; }
.presets-usar:focus-visible, .presets-quitar:focus-visible,
.presets-limpiar:focus-visible, .presets-seleccion h2:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}
@media (max-width: 520px) {
  .contenido > .presets-seleccion { padding: 12px; }
  .presets-seleccion-cab { column-gap: 10px; }
  .presets-cuenta { flex-basis: calc(100% - 62px); order: 1; }
  .presets-limpiar { order: 2; }
  .presets-usar { flex: 1 1 auto; padding-inline: 10px; }
}
@media (max-height: 600px) {
  .contenido > .presets-seleccion { position: static; }
}