/**
 * Ajustes de compatibilidad Drupal ⇄ diseño estático (pospotencialZIP).
 * Solo neutraliza artefactos propios de Drupal; el diseño vive en style.css.
 */

/* La barra contextual de edición (solo admins) es absoluta y no debe
   interferir con grids/flex de las secciones. */
.contextual {
  z-index: 999;
}

/* Drupal envuelve cada campo en <div>; evitar que rompan flujos flex/grid
   heredando el display del padre cuando la plantilla ya emite el markup
   correcto. Las plantillas propias no usan wrappers, esto es cinturón. */
.block-region-content > .block {
  min-width: 0;
}

/* Mensajes de estado de Drupal visibles sobre el diseño */
.messages-list {
  max-width: 1200px;
  margin: 90px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 50;
}

/* Tabs de tareas locales (Ver/Editar) para admins, discretas al final */
.drupal-admin-region {
  background: #0b1440;
  padding: 8px 24px;
}

.drupal-admin-region a {
  color: #9fb3ff;
  margin-right: 16px;
  font-size: 14px;
}

/* El toolbar de admin es fixed; desplaza el header del diseño (absolute/fixed
   top:0) para que no quede oculto debajo. Solo afecta a admins logueados. */
body.toolbar-fixed .site-header {
  z-index: 500;
  top: var(--drupal-displace-offset-top, 79px);
}

/* El pencil de contextual links del bloque "Main page content"
   (#block-my-theme-content, system_main_block) queda inútil: el body del
   nodo está SIEMPRE vacío en este sitio (portada e interiores usan el
   patrón nodo con body vacío + bloque de sección, ver memoria del
   proyecto), así que su menú contextual solo ofrece "Editar/Eliminar nodo"
   sin valor real. Al tener 0 de alto, su trigger flota en la esquina
   superior derecha de #main con top:0 — EXACTAMENTE la misma posición que
   el trigger del bloque de sección real que se coloca justo después (ej.
   #block-pp-pagina-nosotros), tapándolo por completo. Resultado: al hacer
   click en "el lápiz flotante" se hace click siempre en este trigger inútil
   (o el hit-test queda inestable entre los dos superpuestos) y el trigger
   del bloque que sí se quiere editar queda inalcanzable — se ve como
   "el botón no hace nada". Se oculta aquí para que el trigger del bloque de
   contenido real quede libre y sea el único clickable en esa esquina. */
#block-my-theme-content .contextual {
  display: none;
}

/* El header base (.site-header) es position:absolute, fondo transparente y
   z-index:9200 porque en portada flota sobre el hero. Fuera de portada
   (incl. rutas core de Drupal como /user/login, /user/password...) no hay
   hero debajo: el header queda invisible (blanco sobre blanco) pero sigue
   ahí encima, así que bloquea el click de lo que haya en esos primeros
   ~160px aunque se vea "normal". page.html.twig añade `site-header--legal`
   cuando `is_front` es falso (ya trae fondo sólido de style.css); aquí solo
   reservamos el hueco real para que el contenido no arranque debajo del
   header, igual que `.section-legal` hacía en el estático (pospotencialZIP). */
.site-header--legal ~ #main {
  padding-top: var(--space-22);
}

/* ===================================================================
   /solicita-demo — wizard sobre Webform
   En el prototipo cada paso era un <div> suelto dentro de .demo-form-panel.
   Aquí los pasos 1 y 2 viven dentro del <form> del webform, que se cuela
   como un nivel extra de anidamiento: se le da el mismo flex-column + gap
   que tenía el panel para que la separación entre bloques no cambie.
   =================================================================== */
.demo-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Webform imprime el botón de envío dentro de .form-actions; el diseño lo
   quiere en la fila de acciones del paso 2 junto al botón de volver. */
.demo-wizard .demo-form__actions {
  margin: 0;
}

.demo-wizard .demo-form__actions .button,
.demo-wizard .demo-form__actions input[type='submit'] {
  margin: 0;
}

/* La descripción de campo de Drupal (<div class="description">) equivale al
   .contact-form__help del diseño (texto de ayuda bajo el select de país). */
.demo-wizard .description,
.demo-wizard .webform-element-description {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Drupal marca los campos requeridos con un asterisco propio; el diseño no
   lo usa (todos los campos del wizard son obligatorios). */
.demo-wizard .form-required::after {
  display: none;
}

/* Los mensajes de error de Drupal deben quedar dentro del panel, no flotando
   sobre el hero como en el resto de páginas. */
.demo-form-panel .messages-list {
  margin: 0;
  padding: 0;
}