/* ─── Bloque "Así funciona <Herramienta>" ────────────────────────────────
   ÚNICA fuente de verdad del CSS de los bloques <details class="ds-howto-details">
   que aparecen en Driver Tacho, Driver Fleet, Driver Lex, Driver Docs,
   Driver Tax y Driver Labor.  Antes vivía como <style> inline duplicado en
   cada landing + en driver-tax.css con valores ligeramente distintos — los
   bloques no se veían iguales.  Este archivo unifica todo y se carga AL
   FINAL en cada landing para vencer cualquier .tool-help previo de
   herramientas.css o pages/product.css.

   Si cambias algo aquí afecta a las 6 landings a la vez: ese es el punto.
   ─────────────────────────────────────────────────────────────────────── */

/* Wrapper neutro: solo limita ancho y centra.  Los !important neutralizan
   herramientas.css (`body.tools-page .tool-help { padding, background,
   border }`) y pages/product.css (`body.ds-app .tool-help { background:
   var(--ds-surface-2), border, border-radius }`) que rompían la coherencia
   visual entre Tax/Labor (con esos fondos) y Lex/Docs (sin ellos). */
.tool-help {
  /* Mismo ancho de columna que el resto de bloques (--ds-max = 1180px).
     Antes estaba capado a 820px y se veía MÁS ESTRECHO que las tarjetas,
     el hero y el bloque de la nube. En Tacho/Fleet (con <main> full-bleed)
     este width auto-centra el bloque; en Lex/Docs/Tax/Labor lo sobreescribe
     la regla de abajo para llenar el <main> ya limitado. */
  width: min(100% - 32px, var(--ds-max)) !important;
  margin: 18px auto 28px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: var(--ds-max) !important;
}

/* Dentro de un <main> que YA limita el ancho (main.container en Lex/Docs,
   .dtax-shell en Tax/Labor) el howto debe llenar la columna al 100% para
   quedar EXACTAMENTE igual de ancho que las tarjetas y secciones hermanas. */
body.ds-app main.container > .tool-help,
body.ds-app .dtax-shell > .tool-help {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Cuando el bloque va seguido de una <section class="ds-section"> (caso de
   Driver Fleet), el padding-top:92px de ds-section duplicaba la separación.
   Neutralizamos el padding-top del SIGUIENTE ds-section cuando viene justo
   detrás del .tool-help — la separación queda solo por el margin-bottom:28px
   de aquí, igual que en el resto de landings. */
.tool-help + .ds-section,
.tool-help + script + .ds-section { padding-top: 0 !important; }

/* Panel blanco — la "tarjeta" desplegable que el usuario ve. */
.ds-howto-details {
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md, 12px);
  box-shadow: var(--ds-shadow-sm, 0 2px 8px rgba(0, 0, 0, .04));
  margin: 0;
}

.ds-howto-details summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.ds-howto-details summary::-webkit-details-marker { display: none; }

/* Triángulo de la izquierda que rota al abrir. */
.ds-howto-icon {
  display: inline-block;
  transition: transform .2s;
  color: var(--ds-blue, #0b4f9f);
  font-size: 1.1rem;
  line-height: 1;
}
.ds-howto-details[open] .ds-howto-icon { transform: rotate(90deg); }

/* Icono SVG de la herramienta (balanza, documento, libro, personas, reloj,
   camión).  Tamaño fijo 20×20 — sin esto el SVG se renderiza al ancho del
   contenedor (bug que se vio en Driver Tacho antes del unificador). */
.ds-howto-tool-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ds-blue, #0b4f9f);
}

.ds-howto-summary-text {
  color: var(--ds-ink, #1a202c);
  font-weight: 700;
  font-size: 1rem;
  flex: 1;
  min-width: 0;
}

/* Pildora "ABRIR / CERRAR" a la derecha del summary. */
.ds-howto-cta {
  margin-left: auto;
  font-size: .78rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ds-blue, #0b4f9f);
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s;
}
.ds-howto-details:hover .ds-howto-cta { background: var(--ds-blue-600, #063372); }
.ds-howto-details[open] .ds-howto-cta::before { content: ""; }
.ds-howto-details[open] .ds-howto-cta-label::after { content: "Cerrar"; }
.ds-howto-details:not([open]) .ds-howto-cta-label::after { content: "Abrir"; }

/* Cuerpo desplegado (pasos + nota + footer Maite). */
.ds-howto-content {
  padding: 4px 18px 16px;
  color: var(--ds-ink-soft, #4a5568);
  line-height: 1.55;
}
.ds-howto-content ol { margin: 0 0 12px; padding-left: 22px; }
.ds-howto-content li { margin: 6px 0; }
.ds-howto-content li strong { color: var(--ds-ink, #1a202c); }

.ds-howto-foot {
  margin: 0;
  font-size: .93rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ds-howto-maite-btn {
  background: var(--ds-blue, #0b4f9f);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds-howto-maite-btn:hover { background: var(--ds-blue-600, #063372); }

/* Lista de pasos y nota — copiadas de driver-tax.css/herramientas.css para
   neutralizar las variantes "tools-page" que aplicaban estilos oscuros
   (background rgba blanco/negro, borde gris, padding distinto). */
.tool-help-list {
  margin: 0 0 12px;
  padding-left: 22px;
  line-height: 1.55;
  font-size: .95rem;
  list-style: decimal;
  display: block;
  grid-template-columns: none;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.tool-help-list li {
  margin: 6px 0;
  padding: 0;
  background: transparent;
}
.tool-help-list li strong { color: var(--ds-ink, #1a202c); }

.tool-help-note {
  margin-top: 12px;
  padding: 0;
  font-size: .88rem;
  color: var(--ds-ink-soft, #4a5568);
  background: transparent;
  border-left: 0;
  font-weight: 400;
  line-height: 1.55;
}

/* ─── Coherencia del gutter por debajo de 900px ──────────────────────────────
   design-system.css baja el gutter de .ds-container de 32px a 24px en
   @media (max-width: 900px), pero los shells (main.container, .dtax-shell,
   .driver-tacho-shell), las tarjetas, el bloque de la nube y .tool-help usan
   32px FIJO.  Resultado: en tablet/móvil/split estrecho el hero y las
   .ds-section quedaban 8px MÁS ANCHOS que las tarjetas.  En las páginas de
   herramienta forzamos el .ds-container a 32px para que TODOS los bloques
   midan EXACTAMENTE igual a cualquier ancho.  (Tacho ya fija su hero a
   width:100% desde pages/product.css con mayor especificidad; esta regla
   cubre Lex, Docs, Tax, Labor y Fleet.) */
@media (max-width: 900px) {
  body.tools-page .ds-container {
    width: min(100% - 32px, var(--ds-max)) !important;
  }
}