/**
 * @file
 * Landing Portal — site-wide UI components not covered by styles-base.
 *
 * Keep this file focused on small, system-wide pieces (alerts, toasts, etc.).
 * Page-level or block-level styles belong in styles-base.min.css.
 */

/* -------------------------------------------------------------------------
 * Status messages (.Alert)
 *
 * Used by: themes/.../templates/system/status-messages.html.twig
 * Variants: .color--danger, .color--warning, .color--success
 * Tokens: scale 95 (bg) / 70 (border) / 30 (text) of each semantic color.
 * ------------------------------------------------------------------------- */

.Alert {
  --alert-bg: var(--global-neutral-95, #f0f0fa);
  --alert-border: var(--global-neutral-70, #868dc4);
  --alert-text: var(--global-neutral-20, #2a2e4b);

  background-color: var(--alert-bg);
  border: 1px solid var(--alert-border);
  border-radius: 1rem;
  color: var(--alert-text);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.Alert.color--danger {
  --alert-bg: var(--global-red-95);
  --alert-border: var(--global-red-70);
  --alert-text: var(--global-red-30);
}

.Alert.color--warning {
  --alert-bg: var(--global-yellow-95);
  --alert-border: var(--global-yellow-70);
  --alert-text: var(--global-yellow-30);
}

.Alert.color--success {
  --alert-bg: var(--global-green-95);
  --alert-border: var(--global-green-70);
  --alert-text: var(--global-green-30);
}

.Alert .dialog-data {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.Alert .dialog-data p {
  margin: 0;
  line-height: 1.5;
  color: inherit;
}

/* Workaround: https://www.drupal.org/project/gin_lb/issues/3590256
   gin_lb 3.x beta dropped _ui-dialog.scss; jQuery UI defaults give height:0/top:winHeight. */
.ui-dialog.ui-dialog-off-canvas {
  top: 0 !important;
  height: 100vh !important;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.075);
}

#drupal-off-canvas {
  height: 100vh !important;
}

/* -------------------------------------------------------------------------
 * Hero img-right tabs — show/hide genérico de los grids de cards.
 *
 * El JS (showHideContent en custom-scripts.js) togglea .is-active sobre el
 * grid cuyo id coincide con el data-target del botón clickeado. Reemplaza el
 * mecanismo hardcoded por nombre (.area-X--active) de styles-base, para que
 * el toggle no dependa del texto del tab.
 * .grid-cards arranca oculto (definido en styles-base.min.css).
 * ------------------------------------------------------------------------- */
.cardds-content .grid-cards.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  height: auto;
  margin-top: 3rem;
}