/**
 * @file
 * Site-wide custom styles (loaded globally via portal_integracion/global-styling).
 */

/* The documentation content-wrapper is a CSS grid (content + aside TOC). When
   the left nav sidebar is taller, grid-container stretches content-wrapper past
   its content height; with the default align-content the rows absorb that free
   space, inflating the short admin-tabs row into a huge blank gap. Pin rows to
   the top so free space pools at the bottom instead. */
.content-wrapper {
  align-content: start;
}

/* Grid items default to min-width:auto, so a wide code block (white-space:pre)
   expands the 1fr track past the available width — overflowing content-wrapper
   and stretching the full-width tabs/messages along with it. min-width:0 lets
   the track shrink so the code block scrolls within its own overflow-x:auto. */
.content-wrapper > * {
  min-width: 0;
}

/* The admin tabs and status messages must span every column so they sit on
   their own full-width row instead of being placed into a single grid cell
   (which displaced the content into the wrong column). */
.content-wrapper > .admin-local-tasks,
.content-wrapper > [role="contentinfo"] {
  grid-column: 1 / -1;
}

/* The doc_card_grid "grid" variant ships its own .page-container to match the
   standalone maquetado (where it centres the grid on a full-width page). Inside
   the documentation layout the card grid already sits within the global
   .page-container, so that inner wrapper nests a SECOND page-container —
   shrinking the grid to 85% and centring it within its content column. Reset it
   here, scoped to .content-wrapper, so the grid fills its column. The global
   .page-container (an ancestor of .content-wrapper) and every standalone use
   elsewhere are untouched. */
.content-wrapper .page-container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* The documentation paragraphs render as field items nested inside the node's
   .component-content, out of reach of the .content-wrapper { gap: 2rem } that
   spaces the layout's direct sections. Some paragraphs own their vertical margin
   (text/code/table), but others emit a bare wrapper (e.g. doc_download_list) or
   a section without bottom margin (doc_card_grid), so consecutive items can end
   up flush. Replicate the standard 2rem gap between consecutive paragraph items;
   margin-collapse means components that already have a larger internal margin
   keep it (no double spacing). */
.content-wrapper .field--name-field-paragraphs > .field__item + .field__item {
  margin-top: 2rem;
}

/* Local task tabs (View / Edit / Delete ...). Replaces the inline <style>
   previously emitted by the generico base-theme local-task templates. */
.tabs.primary,
.tabs.secondary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  border-bottom: 1px solid var(--semantic-outline-variant, #c3c7c9);
}

.tabs.secondary {
  border-bottom: 0;
  margin-top: -0.75rem;
}

.tabs.primary > li,
.tabs.secondary > li {
  margin: 0;
}

.tabs.primary > li > a,
.tabs.secondary > li > a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--semantic-text-muted, #5f5f5f);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.375rem 0.375rem 0 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}

.tabs.primary > li > a:hover,
.tabs.primary > li > a:focus,
.tabs.secondary > li > a:hover,
.tabs.secondary > li > a:focus {
  color: var(--semantic-text-base, #1c1c1c);
  background-color: var(--semantic-background-surface-low, #f3f4f4);
}

.tabs.primary > li > a.is-active,
.tabs.secondary > li > a.is-active {
  color: var(--semantic-text-base, #1c1c1c);
  font-weight: 700;
  background-color: var(--semantic-background-surface-lowest, #fff);
  border-color: var(--semantic-outline-variant, #c3c7c9);
  margin-bottom: -1px;
}

/* Status messages. Replaces the inline <style> previously emitted by the
   generico base-theme status-messages template (success/warning were unstyled
   there). */
.Alert {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
  border-radius: 8px;
}

.Alert .dialog-data p {
  margin: 0;
}

.Alert .dialog-data p + p {
  margin-top: 0.5rem;
}

/* Colors come from the site's semantic tokens, which the theme redefines under
   html.theme-dark — so dark mode is handled automatically. Hex fallbacks apply
   only if the tokens are ever unavailable. */
.color--success {
  background-color: var(--semantic-success-bg, #d1e7dd);
  border-color: var(--semantic-success, #badbcc);
  color: var(--semantic-on-success-bg, #0f5132);
}

.color--danger {
  background-color: var(--semantic-error-bg, #f8d7da);
  border-color: var(--semantic-error, #f5c6cb);
  color: var(--semantic-on-error-bg, #721c24);
}

.color--warning {
  background-color: var(--semantic-warning-bg, #fff3cd);
  border-color: var(--semantic-warning, #ffecb5);
  color: var(--semantic-on-warning-bg, #664d03);
}

/* Copy-to-clipboard button on code snippets. Positioning/background come from
   the base theme's .component-copy-content / .copy-btn; this adds the button
   reset and the "copied" feedback color (semantic tokens → dark-mode aware). */
.copy-btn {
  display: inline-flex;
  border: 0;
  cursor: pointer;
  color: var(--semantic-text-base, #1c1c1c);
}

.copy-btn:hover,
.copy-btn:focus-visible {
  color: var(--semantic-text-base, #1c1c1c);
  filter: brightness(0.92);
}

.copy-btn.is-copied {
  color: var(--semantic-success, #007347);
}

/* Documentation table caption (doc_table). tablefield stores an optional
   caption; the paragraph template renders it as the native <table> <caption>.
   Own class (never the bare `caption` selector) so it can't clash with other
   tables' captions and isn't overridden by the recompiled base stylesheet.
   caption-side:bottom places it below the rows as a table footer/note, leaving
   the field_subtitle (h3) as the heading above the table. */
.component-table__caption {
  caption-side: bottom;
  padding: 10px;
  font-size: 0.7rem;
  font-weight: 400;
  background: #edeeef;
  color: var(--semantic-text-muted, #5f5f5f);
}