/* ============================================================
   NINJA* (lafour_theme) — components/drupal.css
   Design Kit § 10 — Drupal core/Olivero/Claro overrides.
   Maps Drupal's emitted markup classes to our § 10 palette
   (.dmsg, .ltabs, .alink, .dbtn, .dtbl, .cfield, .det, .vtabs,
   .atb). AJAX/autocomplete throbbers: css/components/ajax-throbber.css
   (libraries-extend core/drupal.ajax + drupal.autocomplete).
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   01 Status messages → .dmsg
   Drupal emits markup like
     <div role="contentinfo" aria-label="Status message"
          class="messages messages--status">…</div>
   Our status-messages.html.twig wraps each in .dmsg.dmsg--*.
   ─────────────────────────────────────────────────────────── */
.dmsg,
.messages,
.messages-list__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-text);
  background: var(--c-surface);
  margin-block: var(--space-3);
}
.dmsg--status,
.messages--status,
.messages-list__item--status      { border-left-color: var(--c-status); }
.dmsg--warning,
.messages--warning,
.messages-list__item--warning     { border-left-color: var(--c-warning); }
.dmsg--error,
.messages--error,
.messages-list__item--error       { border-left-color: var(--c-brand); }
.dmsg__icon {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
}
.dmsg--status .dmsg__icon  { background: var(--c-status);  color: var(--c-bg); }
.dmsg--warning .dmsg__icon { background: var(--c-warning); color: var(--c-bg); }
.dmsg--error .dmsg__icon   { background: var(--c-brand);   color: var(--c-text); }
.dmsg__body  { flex: 1; min-width: 0; }
.dmsg__title {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 2px;
}
.dmsg__text {
  font-size: var(--text-xs);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
}
.dmsg__text a { color: var(--c-text); border-bottom: 1px solid var(--c-border-2); }
.dmsg__text a:hover { color: var(--c-brand); border-bottom-color: var(--c-brand); }

/* ───────────────────────────────────────────────────────────
   02 Local task tabs → .ltabs / .ltab
   /node/{id}/edit · /admin/structure/...
   ─────────────────────────────────────────────────────────── */
.ltabs,
.tabs,
nav.tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}
.tabs ul,
.tabs ol {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ltab,
.tabs a,
.tabs__tab a {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  border-bottom: 0;
  margin-right: 4px;
  margin-bottom: -1px;
  background: transparent;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ltab:hover,
.tabs a:hover,
.tabs__tab a:hover { color: var(--c-text); background: var(--c-surface); }
.ltab.is-active,
.ltab[aria-current="page"],
.tabs a.is-active,
.tabs a[aria-current="page"],
.tabs__tab.is-active a,
.tabs li.is-active a {
  color: var(--c-text);
  background: var(--c-surface);
  border-color: var(--c-border-2);
  border-bottom: 1px solid var(--c-bg);
}
.ltab.is-active::before,
.ltab[aria-current="page"]::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--c-brand);
  flex: 0 0 auto;
}

/* ───────────────────────────────────────────────────────────
   03 Action link → .alink
   "+ Add content", "+ New term", etc.
   ─────────────────────────────────────────────────────────── */
.alink,
.action-link,
.action-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--c-brand);
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--c-brand);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.alink:hover,
.action-link:hover,
.action-links a:hover { background: transparent; color: var(--c-brand); }

/* Local actions — flex row, sin viñetas. Core/Claro a veces emite
   <div id="block-…-local-actions"><li>… sin <ul> (marcado inválido). */
nav.local-actions > ul,
.local-actions > ul,
.lafour-page-chrome [id^="block-"][id$="-local-actions"] ul,
[id^="block-"][id$="-local-actions"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
nav.local-actions > ul > li,
.local-actions > ul > li,
.lafour-page-chrome [id^="block-"][id$="-local-actions"] ul > li,
[id^="block-"][id$="-local-actions"] > li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* kit § 10.03 — “+” solo en acciones locales reales (.button-action), no en dropbuttons */
a.button.button-action::before,
button.button.button-action::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center/1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) center/9px 1px no-repeat;
  opacity: 0.95;
}

/* Local actions / toolbar-style primary links (e.g. "Añadir enlace") */
a.button.button-action,
button.button.button-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--c-brand);
  color: var(--c-text);
  border: 1px solid var(--c-brand);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color      var(--dur-fast) var(--ease-out);
  line-height: 1;
}
a.button.button-action:hover,
a.button.button-action:focus-visible,
button.button.button-action:hover,
button.button.button-action:focus-visible {
  background: transparent;
  color: var(--c-brand);
}
.alink__plus {
  width: 12px; height: 12px;
  position: relative;
  flex: 0 0 auto;
}
.alink__plus::before, .alink__plus::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.alink__plus::before {
  top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%);
}
.alink__plus::after  {
  left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
}

/* ───────────────────────────────────────────────────────────
   04 Dropbutton — compact brand-red split button.

   Core's dropbutton.css (loaded before us) applies heavy
   absolute-positioning layout. In Drupal 11 the JS no longer
   emits .dropbutton-widget, which breaks core's own layout.
   We neutralise core's sizing/positioning rules (matching
   their specificity) and rebuild with inline-flex.
   ─────────────────────────────────────────────────────────── */

/* — Reset core's table-cell sizing ────────────────────────
   Core:  .js td .dropbutton-multiple { padding-right: 10em; margin-right: 2em; }
   Core:  .js td .dropbutton-wrapper  { min-height: 2em; }
   Core:  .js td .dropbutton-multiple .dropbutton-widget { position: absolute; }
   We must match or exceed (0,0,2,1) specificity.
   ──────────────────────────────────────────────────────── */
.js td .dropbutton-wrapper {
  min-height: 0;
}
.js td .dropbutton-multiple {
  padding-right: 0;
  margin-right: 0;
  max-width: fit-content;
}
.js td .dropbutton-multiple .dropbutton-widget {
  position: static;
}

/* — Reset core's base block display ──────────────────────
   Core:  .js .dropbutton-wrapper, .js .dropbutton-widget { display: block; position: relative; }
   ──────────────────────────────────────────────────────── */
.js .dropbutton-wrapper {
  display: inline-block;
  position: relative;
  max-width: fit-content;
}

/* — The <ul> list: inline-flex row ────────────────────── */
.js .dropbutton-widget .dropbutton,
ul.dropbutton {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-brand);
  overflow: visible;
}

/* — List items ────────────────────────────────────────── */
.js .dropbutton li {
  display: flex;
  list-style: none;
}

/* — Primary action button ─────────────────────────────── */
.js .dropbutton .dropbutton-action:first-child a,
.js .dropbutton .dropbutton-action:first-child button,
.js .dropbutton .dropbutton-action:first-child input {
  background: var(--c-brand);
  color: var(--c-text);
  padding: 4px 10px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  width: auto;
  outline: none;
}

/* — Toggle <li> + button (neutralise core absolute pos) ─ */
.js .dropbutton-multiple .dropbutton-toggle,
.dropbutton-toggle {
  position: static;
  width: auto;
  display: flex;
  text-indent: 0;
  overflow: visible;
}
.dropbutton-toggle button {
  background: var(--c-brand);
  color: var(--c-text);
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  width: 32px;
  min-width: 32px;
  min-height: calc(1.4em + 8px);
  box-sizing: border-box;
  height: 100%;
  align-self: stretch;
}
.dropbutton-toggle button:hover { background: rgba(0, 0, 0, 0.2); }

/* — Arrow indicator (rotate only — swapping borders shifts the glyph) */
.dropbutton-arrow {
  position: static;
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid currentColor;
  border-bottom: 3px solid transparent;
  overflow: visible;
  flex: 0 0 auto;
  transform: rotate(0deg);
  transform-origin: 50% 55%;
  transition: transform var(--dur-fast) var(--ease-out);
}

.dropbutton-multiple.open .dropbutton-arrow {
  transform: rotate(180deg);
}

/* Admin / rutas bajo /admin — kit: sin “flecha hacia abajo”; puntos verticales + una sola fila en tablas
   (is-admin puede faltar si la ruta no está marcada como admin en el módulo; path-admin-* sí suele aplicar) */
body.is-admin .lafour-main td .js .dropbutton,
body.is-admin .lafour-main td ul.dropbutton,
body[class*="path-admin"] .lafour-main td .js .dropbutton,
body[class*="path-admin"] .lafour-main td ul.dropbutton {
  flex-wrap: nowrap;
}
body.is-admin .lafour-main .dropbutton-toggle .dropbutton-arrow,
body[class*="path-admin"] .lafour-main .dropbutton-toggle .dropbutton-arrow {
  border: 0 !important;
  width: 2px;
  height: 2px;
  margin: 0;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -4px 0 0 currentColor, 0 4px 0 0 currentColor;
  transform: none !important;
  transition: opacity var(--dur-fast) var(--ease-out);
}
body.is-admin .lafour-main .dropbutton-multiple.open .dropbutton-toggle .dropbutton-arrow,
body[class*="path-admin"] .lafour-main .dropbutton-multiple.open .dropbutton-toggle .dropbutton-arrow {
  transform: none !important;
  opacity: 1;
}
body.is-admin .lafour-main .dropbutton-toggle button,
body[class*="path-admin"] .lafour-main .dropbutton-toggle button {
  gap: 0;
}

/* Views listing / módulos: .table-filter va fuera de <form> → no hereda form-native */
body.is-admin .lafour-main .table-filter,
body[class*="path-admin"] .lafour-main .table-filter {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-border-2);
}
body.is-admin .lafour-main .table-filter .cfield,
body.is-admin .lafour-main .table-filter .form-item,
body[class*="path-admin"] .lafour-main .table-filter .cfield,
body[class*="path-admin"] .lafour-main .table-filter .form-item {
  margin: 0;
}
body.is-admin .lafour-main .table-filter input.views-filter-text,
body.is-admin .lafour-main .table-filter input.form-search[type="search"],
body.is-admin .lafour-main .table-filter input[type="search"].form-search,
body[class*="path-admin"] .lafour-main .table-filter input.views-filter-text,
body[class*="path-admin"] .lafour-main .table-filter input.form-search[type="search"],
body[class*="path-admin"] .lafour-main .table-filter input[type="search"].form-search {
  display: block;
  width: 100%;
  max-width: 42rem;
  box-sizing: border-box;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  padding: 9px 12px;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
body.is-admin .lafour-main .table-filter input::placeholder,
body[class*="path-admin"] .lafour-main .table-filter input::placeholder {
  color: var(--c-dim);
}
body.is-admin .lafour-main .table-filter input:hover,
body[class*="path-admin"] .lafour-main .table-filter input:hover {
  border-color: var(--c-text);
}
body.is-admin .lafour-main .table-filter input:focus,
body[class*="path-admin"] .lafour-main .table-filter input:focus {
  border-color: var(--c-brand);
}

/* — Secondary actions: hidden until open ──────────────── */
.dropbutton-multiple .dropbutton .secondary-action { display: none; }
.js .dropbutton-multiple.open,
.js .dropbutton-multiple.open .dropbutton-widget {
  /* Core sets max-width:none — panel stretched to full table cell */
  max-width: min(18rem, 100%);
}

/* Open: keep primary + toggle on row 1 (flex-column was stacking them → “jump”) */
.dropbutton-multiple.open ul.dropbutton {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-rows: auto;
  width: 100%;
  flex-wrap: nowrap;
  align-items: stretch;
}

.dropbutton-multiple.open .dropbutton .dropbutton-action:first-child {
  grid-column: 1;
  grid-row: 1;
}

.dropbutton-multiple.open .dropbutton-toggle {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
}

.dropbutton-multiple.open .dropbutton .secondary-action {
  grid-column: 1 / -1;
  display: flex;
  flex-basis: auto;
  width: 100%;
}

.dropbutton-multiple.open .dropbutton .dropbutton-action:first-child a,
.dropbutton-multiple.open .dropbutton .dropbutton-action:first-child button {
  width: 100%;
  box-sizing: border-box;
  min-height: 32px;
  justify-content: flex-start;
}
.secondary-action a,
.secondary-action button {
  display: block;
  width: 100%;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text);
  background: var(--c-surface);
  border: 0;
  border-top: 1px solid var(--c-border);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
  outline: none;
}
.secondary-action a:hover,
.secondary-action button:hover {
  background: var(--c-brand-dim);
  color: var(--c-brand);
}

/* — Core also applies padding-right:2em to .dropbutton-widget
     inside .dropbutton-multiple. Reset it if the element exists: */
.js .dropbutton-multiple .dropbutton-widget {
  padding-right: 0;
  padding-left: 0;
}

/* ───────────────────────────────────────────────────────────
   05 Admin table → .dtbl
   Used at /admin/content. Selected row = brand-dim background.
   ─────────────────────────────────────────────────────────── */
.dtbl,
table.views-table,
table.views-listing-table,
table.responsive-enabled,
table.sticky-enabled {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.dtbl thead th,
table.views-table thead th,
table.views-listing-table thead th,
table.responsive-enabled thead th,
table.sticky-enabled thead th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border-2);
}
.dtbl thead th .sort,
table.views-table thead th a.is-active,
table.views-table thead th .tablesort,
table.views-listing-table thead th a.is-active,
table.views-listing-table thead th .tablesort,
table.responsive-enabled thead th a.is-active,
table.responsive-enabled thead th .tablesort {
  color: var(--c-brand);
  margin-left: 6px;
  font-family: var(--font-mono);
}
.dtbl tbody td,
table.views-table tbody td,
table.views-listing-table tbody td,
table.responsive-enabled tbody td,
table.sticky-enabled tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--text-sm);
  color: var(--c-text);
  vertical-align: top;
}
.dtbl tbody tr:hover td,
table.views-table tbody tr:hover td,
table.views-listing-table tbody tr:hover td,
table.responsive-enabled tbody tr:hover td,
table.sticky-enabled tbody tr:hover td { background: var(--c-surface); }
.dtbl tbody tr.is-selected td,
table.views-table tbody tr.selected td,
table.views-table tbody tr.is-selected td,
table.views-listing-table tbody tr.is-selected td,
table.responsive-enabled tbody tr.is-selected td {
  background: var(--c-brand-dim);
}
.dtbl .cell-meta {
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* Field UI secondary text & pills */
.field-ui-secondary-text {
  color: var(--c-muted);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: normal;
}
.field-ui-pill {
  display: inline-block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  border-radius: 2px;
}
.field-machine-name {
  color: var(--c-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* Admin tables — no default link underline (kit / block list “Colocar bloque”, etc.) */
.lafour-page-chrome table a:not(.button):not(.tabledrag-handle) {
  text-decoration: none;
}
.lafour-page-chrome table a:not(.button):not(.tabledrag-handle):hover {
  color: var(--c-brand);
}

/* ───────────────────────────────────────────────────────────
   06 Form field (Claro full) → .cfield
   Used by templates/form/form-element.html.twig
   ─────────────────────────────────────────────────────────── */
.cfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) 0;
}
.cfield__label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cfield__req,
.form-required::after,
.fieldset-legend.form-required::after {
  color: var(--c-brand);
  font-family: var(--font-mono);
}
.form-required::after {
  content: '*';
  margin-left: 6px;
}
.cfield__input {
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 10px 12px;
  letter-spacing: var(--tracking-wide);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background   var(--dur-fast) var(--ease-out);
  width: 100%;
}
.cfield__input:focus { border-color: var(--c-brand); }
.cfield__input.is-error,
.cfield__input.error,
.cfield--error .cfield__input {
  border-color: var(--c-brand);
  background: var(--c-brand-dim);
}
.cfield__desc,
.description {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-muted);
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
}
.cfield__err,
.form-item--error-message,
.form-item__error-message {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 10px;
  color: var(--c-brand);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.cfield__err::before,
.form-item--error-message::before,
.form-item__error-message::before {
  content: '!';
  display: inline-flex;
  width: 12px; height: 12px;
  background: var(--c-brand);
  color: var(--c-text);
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  border-radius: 50%;
}

/* Admin: <select multiple> — selección visible aunque el control no tenga foco
   (p. ej. filtros en Mensajes del registro / dblog, otras pantallas admin). */
body.is-admin .lafour-main select[multiple].form-select,
body.is-admin .lafour-main select.form-select[multiple],
body[class*="path-admin"] .lafour-main select[multiple].form-select {
  background: var(--c-surface);
  color: var(--c-text);
  padding: var(--space-2);
  border: 1px solid var(--c-border-2);
  color-scheme: dark;
  accent-color: var(--c-brand);
}
body.is-admin .lafour-main select[multiple].form-select option,
body.is-admin .lafour-main select.form-select[multiple] option,
body[class*="path-admin"] .lafour-main select[multiple].form-select option {
  background-color: var(--c-surface);
  color: var(--c-text);
  padding: 4px var(--space-2);
}
body.is-admin .lafour-main select[multiple].form-select option:checked,
body.is-admin .lafour-main select.form-select[multiple] option:checked,
body[class*="path-admin"] .lafour-main select[multiple].form-select option:checked {
  background: var(--c-brand-dim) linear-gradient(0deg, var(--c-brand-dim), var(--c-brand-dim));
  color: var(--c-text);
  font-weight: var(--weight-medium);
}
body.is-admin .lafour-main select[multiple].form-select option:checked:hover,
body.is-admin .lafour-main select.form-select[multiple] option:checked:hover {
  background-color: var(--c-brand);
  color: var(--c-text);
}
body.is-admin .lafour-main select[multiple].form-select option:hover,
body.is-admin .lafour-main select.form-select[multiple] option:hover {
  background-color: var(--c-surface-2);
}

/* ───────────────────────────────────────────────────────────
   07 Details / summary → .det
   Drupal's <details> with red caret rotates on [open].
   ─────────────────────────────────────────────────────────── */
.det,
details.det {
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  margin-block: var(--space-3);
}
.det__sum,
details.det > summary {
  list-style: none;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
details.det > summary::-webkit-details-marker { display: none; }
details.det[open] > summary,
.det.is-open .det__sum { border-bottom-color: var(--c-border-2); }
.det__caret {
  color: var(--c-brand);
  font-family: var(--font-mono);
  transition: transform var(--dur-fast) var(--ease-out);
}
.det.is-open .det__caret,
details.det[open] .det__caret { transform: rotate(90deg); }
.det__body {
  padding: var(--space-4);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-muted);
  line-height: 1.7;
}

/* ───────────────────────────────────────────────────────────
   08 Vertical tabs → .vtabs (Kit §09)
   Referencia: lista 200px (todas las pestañas) + panel único a la derecha.
   Drupal emite varios <details> hermanos: display:contents + panel en grid-row 1/-1.
   El <input class="vertical-tabs__active-tab"> no debe participar en la rejilla.
   ─────────────────────────────────────────────────────────── */
.vtabs:not(.entity-meta),
.vertical-tabs:not(.entity-meta) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  border: 1px solid var(--c-border-2);
  background: var(--c-bg);
  padding: var(--space-2);
  box-sizing: border-box;
}
.vtabs:has(.vertical-tabs__menu),
.vertical-tabs:has(.vertical-tabs__menu) {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  min-height: 200px;
  align-items: stretch;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
/* §09 — entity-meta: rejilla global; pestañas en col 1; un solo panel (col 2) */
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-auto-rows: auto;
  align-items: stretch;
  border: 1px solid var(--c-border);
  min-height: 200px;
  background: var(--c-bg);
  padding: 0;
  gap: 0;
  box-sizing: border-box;
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > input.vertical-tabs__active-tab {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det {
  display: contents;
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__sum,
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > summary {
  grid-column: 1;
  align-self: stretch;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  background: var(--c-bg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
  align-items: start;
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > summary > span:first-of-type {
  grid-column: 1;
  grid-row: 1;
  font-weight: var(--weight-regular);
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > summary .det__caret {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > summary .summary {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-regular);
  color: var(--c-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-last-of-type(1) > summary {
  border-bottom: 0;
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det[open] > summary {
  background: var(--c-bg);
  border-left: 2px solid var(--c-brand);
  padding-left: calc(var(--space-4) - 2px);
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det[open] > summary > span:first-of-type {
  font-weight: var(--weight-bold);
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-left: 0;
  background: var(--c-bg);
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--c-muted);
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body input,
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body textarea,
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body select,
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body .cfield__desc,
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body .description {
  text-transform: none;
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body .cfield > label,
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body label:not(.option) {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body b,
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body strong {
  color: var(--c-text);
  font-weight: var(--weight-medium);
}
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(1) > summary { grid-row: 1; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(2) > summary { grid-row: 2; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(3) > summary { grid-row: 3; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(4) > summary { grid-row: 4; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(5) > summary { grid-row: 5; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(6) > summary { grid-row: 6; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(7) > summary { grid-row: 7; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(8) > summary { grid-row: 8; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(9) > summary { grid-row: 9; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(10) > summary { grid-row: 10; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(11) > summary { grid-row: 11; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(12) > summary { grid-row: 12; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(13) > summary { grid-row: 13; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(14) > summary { grid-row: 14; }
.vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det:nth-of-type(15) > summary { grid-row: 15; }
.vertical-tabs:not(.entity-meta):not(:has(.vertical-tabs__menu)) > details.det {
  margin-block: 0;
}
.vertical-tabs:not(.entity-meta):not(:has(.vertical-tabs__menu)) .det__body {
  text-transform: none;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  color: var(--c-text);
  line-height: 1.55;
}
.vertical-tabs:not(.entity-meta):not(:has(.vertical-tabs__menu)) .det__body .cfield__desc,
.vertical-tabs:not(.entity-meta):not(:has(.vertical-tabs__menu)) .det__body .description {
  text-transform: none;
}
.vertical-tabs:not(.entity-meta):not(:has(.vertical-tabs__menu)) .det__sum .summary {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-regular);
  color: var(--c-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}
.lafour-main .form-item-vertical-tabs > .cfield {
  padding-top: 0;
}
@media (max-width: 767px) {
  .vtabs:has(.vertical-tabs__menu),
  .vertical-tabs:has(.vertical-tabs__menu) {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) {
    display: block;
  }
  .vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det {
    display: block;
    margin: 0;
    border-bottom: 1px solid var(--c-border);
  }
  .vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > summary {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-right: 0;
    grid-row: auto !important;
    grid-column: auto !important;
  }
  .vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > summary > span:first-of-type {
    grid-column: unset !important;
    grid-row: unset !important;
    flex: 1 1 100%;
  }
  .vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > summary .det__caret {
    grid-column: unset !important;
    grid-row: unset !important;
    order: 2;
  }
  .vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > summary .summary {
    grid-column: unset !important;
    grid-row: unset !important;
    flex: 1 1 100%;
    order: 3;
  }
  .vertical-tabs.entity-meta.vtabs:not(:has(.vertical-tabs__menu)) > details.det > .det__body {
    grid-column: auto !important;
    grid-row: auto !important;
    border-top: 1px solid var(--c-border);
  }
}
.vtabs__list,
.vertical-tabs__menu {
  border-right: 1px solid var(--c-border);
  background: var(--c-surface);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .vertical-tabs__menu {
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }
}
.vtab,
.vertical-tabs__menu-item a {
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border);
  border-left: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  background: transparent;
}
.vtab:hover,
.vertical-tabs__menu-item a:hover { color: var(--c-text); }
.vtab.is-active,
.vertical-tabs__menu-item.is-selected a {
  color: var(--c-text);
  background: var(--c-bg);
  border-left-color: var(--c-brand);
}
.vtab__sum,
.vertical-tabs__menu-item-summary {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-muted);
  text-transform: none;
  letter-spacing: 0.04em;
}
.vtabs__panel,
.vertical-tabs__panes,
.vertical-tabs__pane {
  padding: var(--space-5);
  background: var(--c-bg);
  font-size: var(--text-sm);
  color: var(--c-text);
  text-transform: none;
  letter-spacing: var(--tracking-wide);
  line-height: 1.6;
}

/* ── Fieldsets de widgets (p. ej. fecha/hora compuesta) ───── */
.lafour-main form fieldset.form-wrapper.js-form-wrapper {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  min-width: 0;
  box-sizing: border-box;
}
.lafour-main form fieldset.form-wrapper.js-form-wrapper > legend {
  padding: 0 0 var(--space-3);
  margin: 0 0 var(--space-3);
  width: 100%;
  border-bottom: 1px solid var(--c-border-2);
  float: none;
}
.lafour-main form fieldset.form-wrapper.js-form-wrapper .fieldset-legend {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text);
}
.lafour-main form fieldset.form-wrapper.js-form-wrapper .fieldset-wrapper {
  padding-top: var(--space-1);
}
.lafour-main form fieldset.form-wrapper.js-form-wrapper .fieldset-wrapper > div[id$="-value"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.lafour-main form fieldset.form-wrapper.js-form-wrapper .fieldset-wrapper .cfield.form-no-label {
  padding-top: 0;
  flex: 1 1 140px;
  min-width: 0;
}

/* ───────────────────────────────────────────────────────────
   §10 Throbber (kit .throb) — ver lafour_theme/ajax-throbber
   (libraries-extend: core/drupal.ajax, core/drupal.autocomplete).
   ─────────────────────────────────────────────────────────── */
.throb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-muted);
}
.throb__dot {
  position: relative;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.throb__dot::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg,
    var(--c-brand),
    var(--c-surface-2),
    rgba(227, 6, 19, 0.35),
    var(--c-brand)
  );
  animation: lafour-spin 900ms linear infinite;
  -webkit-mask-image: var(--lafour-ninja-throbber-mask);
  mask-image: var(--lafour-ninja-throbber-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ───────────────────────────────────────────────────────────
   Admin toolbar — the global reset in base.css now excludes
   #toolbar-administration via :where(:not(…)), so Drupal
   core's toolbar CSS applies unmodified. We only set z-index.
   ─────────────────────────────────────────────────────────── */
#toolbar-administration {
  z-index: 501;
}

/* ───────────────────────────────────────────────────────────
   Misc Drupal containers — keep them on-palette.
   ─────────────────────────────────────────────────────────── */
.region {
  color: var(--c-text);
}
.contextual-region { position: relative; }
.contextual .trigger,
.contextual button.trigger {
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
}
.contextual .contextual-links {
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
}
.contextual .contextual-links a {
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.contextual .contextual-links a:hover {
  color: var(--c-brand);
  background: var(--c-brand-dim);
}

/* Tabledrag — flecha 4 direcciones + sin “subrayado” de .lafour-main a */
a.tabledrag-handle {
  cursor: grab;
  touch-action: none;
  margin-right: 6px;
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
}
a.tabledrag-handle:hover,
a.tabledrag-handle:focus,
a.tabledrag-handle:focus-visible {
  border-bottom: 0;
  text-decoration: none;
}
a.tabledrag-handle:active {
  cursor: grabbing;
}
.tabledrag-handle .handle {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  /* SVG explícito — evita fallos de mask que parecían “tres puntos” */
  background: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e30613' d='M12 3l5 8H7l5-8zm0 18l-5-8h10l-5 8zM3 12l8-5v10L3 12zm18 0l-8 5V7l8 5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  opacity: 0.95;
  mask-image: none;
  -webkit-mask-image: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.tabledrag-handle:hover .handle,
.tabledrag-handle:focus-visible .handle {
  opacity: 1;
}
tr.drag td {
  background: var(--c-brand-dim);
}
tr.drag-previous td {
  border-bottom-color: var(--c-brand);
}
body div.tabledrag-changed-warning { border-left-color: var(--c-brand); }

/* Filter tips & description toggles */
.filter-help a,
.filter-guidelines a { color: var(--c-text); }

/* ───────────────────────────────────────────────────────────
   Page chrome — page title + local tasks between breadcrumb
   and main content on non-front pages.
   ─────────────────────────────────────────────────────────── */
.lafour-page-chrome {
  padding: var(--space-4) 0 var(--space-2);
}
.lafour-page-chrome h1 {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display);
  color: var(--c-text);
  margin-bottom: var(--space-3);
}

/* Formularios de edición (nodo, etc.): título y pestañas nunca sobre “franja clara”
   con tipografía clara; algún CSS de módulos puede forzar fondo blanco en el contenedor. */
body.lafour-site.is-admin .lafour-page-chrome,
body.lafour-site.is-admin .region--breadcrumb,
body.lafour-site.is-admin .region--highlighted,
body.lafour-site:has(.lafour-main form.node-form) .lafour-page-chrome,
body.lafour-site:has(.lafour-main form.node-form) .region--breadcrumb,
body.lafour-site:has(.lafour-main form.node-form) .region--highlighted {
  background-color: var(--c-bg) !important;
  color: var(--c-text) !important;
}
body.lafour-site.is-admin .lafour-page-chrome h1,
body.lafour-site:has(.lafour-main form.node-form) .lafour-page-chrome h1 {
  color: var(--c-text) !important;
}
body.lafour-site.is-admin .lafour-page-chrome h1 em,
body.lafour-site:has(.lafour-main form.node-form) .lafour-page-chrome h1 em {
  color: var(--c-muted) !important;
  font-style: normal;
}
body.lafour-site.is-admin .lafour-page-chrome .ltabs,
body.lafour-site:has(.lafour-main form.node-form) .lafour-page-chrome .ltabs {
  border-bottom-color: var(--c-border-2);
}

/* ───────────────────────────────────────────────────────────
   Admin — listados <dl> del bloque de contenido principal (p. ej.
   /node/add, Asset Injector con .list-group). Tarjeta continua dt+dd;
   sin gap entre título y descripción. :has() requiere navegadores
   actuales (mismo requisito que Gin/modern Drupal admin).
   ─────────────────────────────────────────────────────────── */
body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl {
  margin: var(--space-6) 0 0;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  /* Sin gap: el gap separaba dt–dd; solo espacio entre ítems vía dt. */
}

body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl > dt:not(:first-of-type) {
  margin-top: var(--space-5);
}

body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dt {
  margin: 0;
  padding: 0;
  font-weight: var(--weight-medium);
}

body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dt a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  padding-inline-start: calc(var(--space-5) - 3px);
  border: 1px solid var(--c-border-2);
  border-bottom: 0;
  border-inline-start: 3px solid var(--c-brand);
  border-radius: 6px 6px 0 0;
  background: var(--c-surface);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-display);
  line-height: 1.35;
  color: var(--c-text);
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dt a:hover {
  background: var(--c-surface-2);
  border-color: var(--c-border);
  color: var(--c-brand);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dt a:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dt a::after {
  content: '\203A';
  margin-inline-start: auto;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: var(--weight-regular);
  color: var(--c-dim);
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dt a:hover::after {
  color: var(--c-brand);
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dt a:hover::after {
    transform: none;
  }
}

body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dd:empty {
  display: none;
}

body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dd:not(:empty) {
  margin: -1px 0 0;
  padding: var(--space-3) var(--space-5) var(--space-4);
  padding-inline-start: calc(var(--space-5) - 2px);
  border: 1px solid var(--c-border-2);
  border-top: 1px solid var(--c-border);
  border-inline-start: 3px solid rgba(227, 6, 19, 0.35);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(
    180deg,
    rgba(22, 22, 22, 0.92) 0%,
    var(--c-surface) 100%
  );
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  letter-spacing: var(--tracking-wide);
  color: var(--c-muted);
}

/* Sin texto en la descripción (<dd></dd> u oculto): tarjeta cerrada en el enlace */
body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dt:has(+ dd:empty) a,
body.is-admin .lafour-main :is(.block-system-main-block, #block-lafour-theme-content) dl dt:last-child a {
  border-bottom: 1px solid var(--c-border-2);
  border-radius: 6px;
}

/* ───────────────────────────────────────────────────────────
   Status report (/admin/reports/status) — kit §10 recuadros +
   real table for “Checked” (see status-report-grouped.html.twig).
   ─────────────────────────────────────────────────────────── */
.lafour-status-page {
  margin-top: var(--space-4);
}

.lafour-status-report-counters.system-status-report-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.lafour-status-counter.system-status-report-counters__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  white-space: normal;
  margin-bottom: 0;
}

.lafour-status-counter__label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text);
}

.lafour-status-counter__details {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.lafour-status-counter__details:hover {
  border-bottom-color: var(--c-brand);
  color: var(--c-text);
}

.lafour-status-general__heading {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0 0 var(--space-4);
}

.lafour-status-general__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.lafour-status-general__item {
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  padding: var(--space-4);
}

.lafour-status-general__item--wide {
  grid-column: 1 / -1;
}

@media (min-width: 70rem) {
  .lafour-status-general__item--wide {
    grid-column: span 2;
  }
}

.lafour-status-general__item .system-status-general-info__item-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text);
}

.lafour-status-general__item h4 {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-muted);
}

.lafour-status-general__body,
.lafour-status-general__item .description {
  font-size: var(--text-sm);
  color: var(--c-muted);
  line-height: 1.6;
}

.lafour-status-general__kv {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  margin-top: var(--space-3);
}
.lafour-status-general__k {
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-muted);
}
.lafour-status-general__v {
  font-size: var(--text-sm);
  color: var(--c-text);
}

.lafour-status-general__actions {
  margin-top: var(--space-3);
}

/* Cron: core mete enlace + botón en un solo flujo — columnar para no “encimar” */
.lafour-status-general__item--cron .lafour-status-general__cron-meta {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--c-muted);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.lafour-status-general__item--cron .cron-description__run-cron {
  display: block;
  width: 100%;
}
.lafour-status-general__item--cron .system-status-general-info__run-cron {
  margin-top: 0;
}

.lafour-status-page a:not(.button):not(.button--primary),
.lafour-status-general__item a {
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-2);
}
.lafour-status-page a:not(.button):not(.button--primary):hover,
.lafour-status-general__item a:hover {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}

.lafour-status-report-grouped {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.lafour-status-report__group-title {
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--c-border-2);
}

.lafour-status-report__entry.system-status-report__entry {
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  margin-bottom: var(--space-3);
}

.lafour-status-report__entry .system-status-report__status-title.system-status-report__status-icon--warning {
  border-left: 3px solid var(--c-warning);
}
.lafour-status-report__entry .system-status-report__status-title.system-status-report__status-icon--error {
  border-left: 3px solid var(--c-brand);
}

.lafour-status-report__entry .system-status-report__entry__value {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  color: var(--c-muted);
  line-height: 1.65;
}

.lafour-status-report__entry .system-status-report__entry__value a {
  text-decoration: none;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border-2);
}
.lafour-status-report__entry .system-status-report__entry__value a:hover {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}

.lafour-status-report__table-scroll {
  overflow-x: auto;
  border: 1px solid var(--c-border-2);
}

.lafour-status-report__table.system-status-report__table-checked {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--c-bg);
}

.lafour-status-report__table thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border-2);
  background: var(--c-surface);
}

.lafour-status-report__table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
  color: var(--c-text);
}

.lafour-status-report__table tbody tr:hover td {
  background: var(--c-surface);
}

.lafour-status-report__cell--title {
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-right: 1px solid var(--c-border-2);
}

.lafour-status-report__description {
  font-size: var(--text-xs);
  color: var(--c-muted);
  line-height: 1.6;
}
.lafour-status-report__description a {
  text-decoration: none;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border-2);
}
.lafour-status-report__description a:hover {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}

/* Estado en tabla “Checked” / metadata — recuadro + puntito (kit admin table) */
.lafour-status-report__value-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}
.lafour-status-report__value-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-status);
  flex-shrink: 0;
}
.lafour-status-report__value-chip--outline {
  background: transparent;
  color: var(--c-muted);
  border-color: rgba(227, 6, 19, 0.45);
}
.lafour-status-report__value-chip--outline::before {
  background: var(--c-brand);
}
.lafour-status-report__value-chip--ok::before {
  background: var(--c-status);
}

/* Pictogramas legibles en contadores (evita cuadrados “mojibake”) */
.lafour-status-counter .system-status-counter__status-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5rem 1.5rem;
}
.system-status-counter__status-icon--error {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e30613'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}
.system-status-counter__status-icon--warning {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fdca40'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}
.system-status-counter__status-icon--checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233aa55d'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

/* ───────────────────────────────────────────────────────────
   Available updates (/admin/reports/updates)
   ─────────────────────────────────────────────────────────── */
.lafour-main #block-lafour-theme-content table.update {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
}
.lafour-main #block-lafour-theme-content table.update tbody tr.color-success,
.lafour-main #block-lafour-theme-content table.update tbody tr.color-warning {
  background: transparent;
}
.lafour-main #block-lafour-theme-content table.update tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
  color: var(--c-text);
  overflow: hidden;
}
.lafour-main #block-lafour-theme-content table.update tbody tr:last-child td {
  border-bottom: none;
}
.lafour-main #block-lafour-theme-content .project-update__status {
  float: right;
  clear: right;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-2) var(--space-4);
  padding: 4px 12px 4px 10px;
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-border-2);
  max-width: min(100%, 16rem);
}
.lafour-main #block-lafour-theme-content .project-update__status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lafour-main #block-lafour-theme-content .project-update__status--current::before {
  background: var(--c-status);
}
.lafour-main #block-lafour-theme-content .project-update__status--not-current::before {
  background: var(--c-warning);
}
.lafour-main #block-lafour-theme-content .project-update__status--not-current {
  border-color: rgba(253, 202, 64, 0.35);
  color: var(--c-warning);
}
.lafour-main #block-lafour-theme-content .project-update__status-icon {
  display: none;
}
.lafour-main #block-lafour-theme-content .project-update__title {
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
}
.lafour-main #block-lafour-theme-content .project-update__title,
.lafour-main #block-lafour-theme-content .project-update__title a {
  color: var(--c-text);
}
.lafour-main #block-lafour-theme-content .project-updates__details {
  font-size: var(--text-sm);
  color: var(--c-muted);
  line-height: 1.55;
  margin-top: var(--space-2);
}
.lafour-main #block-lafour-theme-content .project-update__version {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border-2);
  font-size: var(--text-sm);
}
.lafour-main #block-lafour-theme-content .project-update__version-title {
  color: var(--c-muted);
}
.lafour-main #block-lafour-theme-content .project-update__version-details a {
  color: var(--c-text);
}
.lafour-main #block-lafour-theme-content details.compatible.det {
  margin-top: var(--space-2);
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  padding: 0 var(--space-3);
}
.lafour-main #block-lafour-theme-content details.compatible .det__sum {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  padding: var(--space-2) 0;
}
.lafour-main #block-lafour-theme-content details.compatible .det__body {
  padding-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--c-muted);
}

/* “Listado” / “Comprobación” — mismo prefijo + que .button-action */
.path-admin-reports-updates [id$="-local-actions"] a.button:not(.button-action) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.path-admin-reports-updates [id$="-local-actions"] a.button:not(.button-action)::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center/1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) center/9px 1px no-repeat;
  opacity: 0.95;
}

/* ───────────────────────────────────────────────────────────
   Views UI (/admin/structure/views/view/...)
   ─────────────────────────────────────────────────────────── */
.lafour-main .views-edit-view.views-admin,
.lafour-main .views-preview-wrapper.views-admin {
  color: var(--c-text);
}
.lafour-main .views-display-top {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-border-2);
  background: transparent;
}
.lafour-main #views-display-menu-tabs.tabs.secondary {
  border-bottom: 1px solid var(--c-border-2);
}
.lafour-main #views-display-menu-tabs.tabs.secondary li a {
  color: var(--c-muted);
  border-color: transparent;
}
.lafour-main #views-display-menu-tabs.tabs.secondary li.is-active a,
.lafour-main #views-display-menu-tabs.tabs.secondary li a:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-brand);
}
.lafour-main .views-display-columns {
  gap: var(--space-4);
}
@media (min-width: 60rem) {
  .lafour-main .views-display-column {
    padding-right: var(--space-3);
  }
}
.lafour-main .views-ui-display-tab-bucket {
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.lafour-main .views-ui-display-tab-bucket__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-muted);
}
.lafour-main .views-display-setting.views-ui-display-tab-setting {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.lafour-main .views-display-setting .label {
  color: var(--c-muted);
  margin-right: 0.35em;
}
.lafour-main .views-display-setting a.views-ajax-link {
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-2);
}
.lafour-main .views-display-setting a.views-ajax-link:hover {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}
.lafour-main .views-ui-settings-bucket-operations a.compact.add .icon.add {
  display: none;
}
.lafour-main .views-ui-settings-bucket-operations a.compact.add::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center/1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) center/9px 1px no-repeat;
  opacity: 0.95;
}
.lafour-main .views-ui-settings-bucket-operations a.compact.add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lafour-main .views-preview-wrapper {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-border-2);
}
/*
 * Vista previa (Views UI): el formulario tiene hijos directos #edit-controls, #views-live-preview,
 * .preview-submit-wrapper. Un grid de 2 columnas en <form> dejaba la previsualización en una celda
 * estrecha. Los ítems .form-item-view-args viven dentro de #edit-controls; core usa inline-block +
 * label flotado → franja vertical encima de la tabla.
 */
.lafour-main .views-preview-wrapper form.view-preview-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  margin-bottom: var(--space-4);
  position: relative;
}
.lafour-main .views-preview-wrapper form.view-preview-form > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.lafour-main .views-preview-wrapper form.view-preview-form > #edit-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.lafour-main .views-preview-wrapper .view-preview-form__title {
  margin: 0;
  padding: 0 0 var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--c-border-2);
  background: transparent;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-text);
  float: none !important;
  width: auto;
}
.lafour-main .views-preview-wrapper .view-preview-form .form-item-live-preview,
.lafour-main .views-preview-wrapper .view-preview-form > .js-form-item.form-type-checkbox,
.lafour-main .views-preview-wrapper .view-preview-form #edit-controls .form-item-live-preview {
  margin: 0 !important;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  float: none !important;
  clear: both !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  max-width: 100%;
}
.lafour-main .views-preview-wrapper .view-preview-form .form-item-live-preview .form-checkbox,
.lafour-main .views-preview-wrapper .view-preview-form > .js-form-item.form-type-checkbox .form-checkbox,
.lafour-main .views-preview-wrapper .view-preview-form #edit-controls .form-item-live-preview .form-checkbox {
  margin: 0;
  flex-shrink: 0;
}
.lafour-main .views-preview-wrapper .view-preview-form .form-item-live-preview label,
.lafour-main .views-preview-wrapper .view-preview-form > .js-form-item.form-type-checkbox label,
.lafour-main .views-preview-wrapper .view-preview-form #edit-controls .form-item-live-preview label {
  margin: 0;
  color: var(--c-text);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
}
/* Campo “Previsualización con filtros contextuales” */
.lafour-main .views-preview-wrapper .view-preview-form .form-item-view-args,
.lafour-main .views-preview-wrapper .view-preview-form #edit-controls .form-item-view-args {
  display: block !important;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
}
.lafour-main .views-preview-wrapper .view-preview-form .form-item-view-args label,
.lafour-main .views-preview-wrapper .view-preview-form #edit-controls .form-item-view-args label {
  float: none !important;
  height: auto !important;
  display: block;
  margin: 0 0 var(--space-2) 0 !important;
  font-weight: 500;
  color: var(--c-text);
}
.lafour-main .views-preview-wrapper .view-preview-form .form-item-view-args .form-text,
.lafour-main .views-preview-wrapper .view-preview-form #edit-controls .form-item-view-args .form-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--c-bg);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
}
.lafour-main .views-preview-wrapper .view-preview-form .form-item-view-args .cfield__desc.description,
.lafour-main .views-preview-wrapper .view-preview-form #edit-controls .form-item-view-args .description {
  margin-top: var(--space-2);
  color: var(--c-muted);
  font-size: var(--text-sm);
  white-space: normal;
}
.lafour-main .views-preview-wrapper .preview-submit-wrapper.form-actions {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
  border: 0;
  float: none !important;
  clear: both !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
}
@media (min-width: 641px) {
  .lafour-main .views-preview-wrapper .preview-submit-wrapper.form-actions {
    display: flex !important;
    justify-content: flex-end;
  }
}
.lafour-main .views-preview-wrapper .preview-submit-wrapper input.form-submit,
.lafour-main .views-preview-wrapper .preview-submit-wrapper input.button {
  position: relative !important;
  float: none !important;
  inset: auto !important;
  max-width: 100%;
  white-space: normal;
}
@media (max-width: 640px) {
  .lafour-main .views-preview-wrapper .preview-submit-wrapper.form-actions input.button {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Tabla de metadatos (título/ruta) — core fuerza gris claro sobre blanco */
.lafour-main .views-live-preview .views-query-info {
  overflow: auto;
}
.lafour-main .views-live-preview .views-query-info table {
  margin: var(--space-3) 0;
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
}
.lafour-main .views-live-preview .views-query-info table tr {
  background: transparent;
}
.lafour-main .views-live-preview .views-query-info table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}
.lafour-main .views-live-preview .views-query-info table th,
.lafour-main .views-live-preview .views-query-info table td {
  padding: var(--space-2) var(--space-3);
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
  vertical-align: top;
}
.lafour-main .views-live-preview .views-query-info table td strong {
  color: var(--c-text);
}
.lafour-main .views-live-preview .views-query-info a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lafour-main .views-live-preview .views-query-info a:hover {
  color: var(--c-text);
}

/* Views UI + tablas admin: JS/core pueden posicionar .dropbutton-wrapper (top/right) y romper el split */
.lafour-main .views-edit-view .dropbutton-wrapper,
.lafour-main .views-edit-view .dbtn-wrap.dropbutton-wrapper,
body.is-admin .lafour-main td .dropbutton-wrapper,
body.is-admin .lafour-main td .dbtn-wrap.dropbutton-wrapper,
body[class*="path-admin"] .lafour-main td .dropbutton-wrapper,
body[class*="path-admin"] .lafour-main td .dbtn-wrap.dropbutton-wrapper {
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  position: relative !important;
}

/* Views UI — dropbuttons y “Agregar” como controles compactos (evita bloques rojos enormes) */
.lafour-main .views-edit-view .js .dropbutton,
.lafour-main .views-edit-view ul.dropbutton {
  border-color: var(--c-border-2);
}
.lafour-main .views-edit-view .js .dropbutton .dropbutton-action:first-child a,
.lafour-main .views-edit-view .js .dropbutton .dropbutton-action:first-child button,
.lafour-main .views-edit-view .js .dropbutton .dropbutton-action:first-child input {
  background: var(--c-surface);
  color: var(--c-text);
  padding: 5px 12px;
  font-size: 10px;
}
.lafour-main .views-edit-view .dropbutton-toggle button {
  background: var(--c-surface);
  color: var(--c-text);
  border-left-color: var(--c-border-2);
  min-height: 26px;
}
.lafour-main .views-edit-view .dropbutton-toggle button:hover {
  background: var(--c-bg);
  color: var(--c-brand);
}
.lafour-main .views-edit-view .dropbutton-multiple.open ul.dropbutton {
  width: max-content;
  max-width: min(22rem, 100%);
}
.lafour-main .views-edit-view .dropbutton-multiple.open .dropbutton .dropbutton-action:first-child a,
.lafour-main .views-edit-view .dropbutton-multiple.open .dropbutton .dropbutton-action:first-child button,
.lafour-main .views-edit-view .dropbutton-multiple.open .dropbutton .dropbutton-action:first-child input {
  width: auto;
  min-width: 0;
  min-height: 28px;
}
.lafour-main .views-edit-view #views-display-menu-tabs .action-list {
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  padding: var(--space-1) 0;
  margin: 0;
  min-width: 12rem;
}
.lafour-main .views-edit-view #views-display-menu-tabs .action-list input.add-display.button {
  padding: 7px 12px;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: var(--c-text);
  border: 0;
  border-radius: 0;
  text-align: left;
}
.lafour-main .views-edit-view #views-display-menu-tabs .action-list input.add-display.button:hover {
  background: var(--c-brand-dim);
  color: var(--c-brand);
}
.lafour-main .views-edit-view #views-display-menu-tabs li.add > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
  padding: 5px 12px;
  font-size: 10px;
}
.lafour-main .views-edit-view #views-display-menu-tabs li.add > a .icon.add {
  display: none;
}
.lafour-main .views-edit-view #views-display-menu-tabs li.add > a::before {
  content: '';
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center/1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) center/9px 1px no-repeat;
  opacity: 0.95;
}
.lafour-main .views-edit-view #views-display-menu-tabs li.add.is-active > a,
.lafour-main .views-edit-view #views-display-menu-tabs li.add > a:hover {
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.lafour-main .views-edit-view #views-display-menu-tabs.tabs.secondary li:not(.add) a {
  background: var(--c-bg);
  padding: var(--space-2) var(--space-4);
  font-size: 10px;
}
.lafour-main .views-edit-view #views-display-menu-tabs.tabs.secondary li.is-active:not(.add) a {
  background: var(--c-surface);
  border-bottom-color: var(--c-brand);
  box-shadow: inset 0 -2px 0 var(--c-brand);
}
.lafour-main .views-edit-view .views-ui-display-tab-actions .dropbutton-multiple.open ul.dropbutton {
  max-width: min(32rem, 100%);
}
.lafour-main .views-edit-view #edit-actions input.button--primary,
.lafour-main .views-edit-view .preview-submit-wrapper input.button {
  background: var(--c-brand);
  color: var(--c-text);
  border-color: var(--c-brand);
}
/* Barra Guardar/Cancelar: sin fondo claro de core/Claro; Cancelar = secundario */
.lafour-main .views-edit-view #edit-actions.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border-2);
}
.lafour-main .views-edit-view #edit-actions.form-actions input.button.button--primary {
  background: var(--c-brand);
  color: var(--c-text);
  border: 1px solid var(--c-brand);
}
.lafour-main .views-edit-view #edit-actions.form-actions input.button:not(.button--primary) {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
}
.lafour-main .views-edit-view #edit-actions.form-actions input.button:not(.button--primary):hover {
  border-color: var(--c-text);
  color: var(--c-text);
}

/* jQuery UI modales (Views AJAX, etc.) — tema oscuro; anula “sheet” claro de UI stock */
body.is-admin .ui-widget-overlay {
  background: var(--c-bg);
  opacity: 0.72;
}
body.is-admin .ui-dialog.ui-widget-content {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
  border-radius: 0;
  padding: 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
body.is-admin .ui-dialog .ui-dialog-titlebar {
  background: var(--c-bg);
  background-image: none;
  color: var(--c-text);
  border: 0;
  border-bottom: 1px solid var(--c-border-2);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
}
body.is-admin .ui-dialog .ui-dialog-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--c-text);
  margin: 0;
  white-space: normal;
}
body.is-admin .ui-dialog .ui-dialog-titlebar-close {
  background: transparent;
  border: 1px solid var(--c-border-2);
  color: var(--c-muted);
  border-radius: 0;
  right: var(--space-3);
  top: 50%;
  margin-top: -16px;
  width: 32px;
  height: 32px;
}
body.is-admin .ui-dialog .ui-dialog-titlebar-close:hover {
  border-color: var(--c-text);
  color: var(--c-text);
}
body.is-admin .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
  filter: invert(1);
  opacity: 0.85;
}
body.is-admin .ui-dialog .ui-dialog-content,
body.is-admin .ui-dialog #drupal-modal {
  background: var(--c-surface);
  color: var(--c-text);
  padding: 0;
}
/* Título del formulario en Views modals suele ir en barra propia — sin franja clara */
body.is-admin .ui-dialog .views-override.views-offset-top.form--inline {
  background: var(--c-bg) !important;
  border-bottom: 1px solid var(--c-border-2);
  padding: var(--space-3) var(--space-4);
  margin: 0;
}
body.is-admin .ui-dialog .views-override .form-item {
  margin: 0;
}
body.is-admin .ui-dialog .views-override .form-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
body.is-admin .ui-dialog .scroll[data-drupal-views-scroll] {
  padding: var(--space-4);
  box-sizing: border-box;
}
body.is-admin .ui-dialog .js-form-item.description {
  color: var(--c-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
  background: transparent;
  border: 0;
  padding: 0;
}
body.is-admin .ui-dialog .ui-dialog-content form .cfield > label,
body.is-admin .ui-dialog .ui-dialog-content form .form-item:not(.form-type-checkbox) > label {
  color: var(--c-text);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
body.is-admin .ui-dialog .ui-dialog-content .cfield__desc,
body.is-admin .ui-dialog .ui-dialog-content .description {
  color: var(--c-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
body.is-admin .ui-dialog .ui-dialog-content fieldset:not([data-drupal-selector^="edit-options-replacements"]) {
  border-color: var(--c-border-2);
}
body.is-admin .ui-dialog .ui-dialog-content .fieldset-legend {
  color: var(--c-text);
}
body.is-admin .ui-dialog .ui-dialog-content .det__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  padding: var(--space-2) var(--space-3);
  color: var(--c-text);
}
body.is-admin .ui-dialog .ui-dialog-content .det__caret {
  color: var(--c-brand);
  opacity: 1;
  flex-shrink: 0;
}
body.is-admin .ui-dialog .form-item.js-form-type-checkbox {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  margin-bottom: var(--space-3);
}
body.is-admin .ui-dialog .form-item.js-form-type-checkbox > input.form-checkbox {
  grid-column: 1;
  grid-row: 1;
  margin: 3px 0 0;
}
body.is-admin .ui-dialog .form-item.js-form-type-checkbox > label {
  grid-column: 2;
  grid-row: 1;
  color: var(--c-text);
  font-size: var(--text-sm);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.35;
  margin: 0;
}
body.is-admin .ui-dialog .form-item.js-form-type-checkbox > .description {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
body.is-admin .ui-dialog .form-text,
body.is-admin .ui-dialog .form-textarea,
body.is-admin .ui-dialog .form-email,
body.is-admin .ui-dialog .form-url,
body.is-admin .ui-dialog .form-number,
body.is-admin .ui-dialog .form-search,
body.is-admin .ui-dialog textarea {
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
  box-sizing: border-box;
}
body.is-admin .ui-dialog .form-select,
body.is-admin .ui-dialog select.form-select {
  background-color: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
}

/* Replacement variables fieldset — tokens legibles */
body.is-admin .ui-dialog fieldset[data-drupal-selector^="edit-options-replacements"] {
  border: 1px solid var(--c-border-2);
  background: var(--c-bg);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
body.is-admin .ui-dialog fieldset[data-drupal-selector^="edit-options-replacements"] legend {
  padding: 0 var(--space-2);
}
body.is-admin .ui-dialog fieldset[data-drupal-selector^="edit-options-replacements"] .fieldset-legend {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-text);
}
body.is-admin .ui-dialog fieldset[data-drupal-selector^="edit-options-replacements"] .fieldset-wrapper {
  padding-top: var(--space-2);
}
body.is-admin .ui-dialog fieldset[data-drupal-selector^="edit-options-replacements"] p {
  color: var(--c-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}
body.is-admin .ui-dialog fieldset[data-drupal-selector^="edit-options-replacements"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.is-admin .ui-dialog fieldset[data-drupal-selector^="edit-options-replacements"] li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--c-text);
  padding: 8px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-left: 3px solid var(--c-status);
  margin: 0;
}
body.is-admin .ui-dialog .ui-dialog-buttonpane {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
}
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button,
body.is-admin .ui-dialog .ui-dialog-buttonpane .button {
  background-image: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 10px 16px;
  min-height: 40px;
  box-sizing: border-box;
  margin: 0;
  line-height: 1.2;
}
/* jQuery UI asigna fondo claro a .ui-button; forzar paleta oscura en secundarios */
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
}
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-hover,
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-focus {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-text);
}
body.is-admin .ui-dialog .ui-dialog-buttonpane .button.button--primary,
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button.button--primary {
  background: var(--c-brand);
  color: var(--c-text);
  border: 1px solid var(--c-brand);
}
body.is-admin .ui-dialog .ui-dialog-buttonpane .button.button--primary:hover,
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button.button--primary:hover,
body.is-admin .ui-dialog .ui-dialog-buttonpane .button.button--primary.ui-state-hover,
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button.button--primary.ui-state-hover {
  background: transparent;
  color: var(--c-brand);
  border-color: var(--c-brand);
}
body.is-admin .ui-dialog .ui-dialog-buttonpane .button.button--danger,
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button.button--danger {
  background: transparent;
  color: var(--c-brand);
  border: 1px solid var(--c-brand);
}
body.is-admin .ui-dialog .ui-dialog-buttonpane .button.button--danger:hover,
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button.button--danger:hover,
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button.button--danger.ui-state-hover {
  background: var(--c-brand-dim);
  color: var(--c-text);
}
body.is-admin .ui-dialog .ui-dialog-buttonpane .button:not(.button--primary):not(.button--danger),
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button:not(.button--primary):not(.button--danger) {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
}
body.is-admin .ui-dialog .ui-dialog-buttonpane .button:not(.button--primary):not(.button--danger):hover,
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button:not(.button--primary):not(.button--danger):hover,
body.is-admin .ui-dialog .ui-dialog-buttonpane .ui-button:not(.button--primary):not(.button--danger).ui-state-hover {
  border-color: var(--c-text);
  background: var(--c-surface);
}

/* Herencia jQuery UI (.ui-widget / enlaces / código) */
body.is-admin .ui-dialog .ui-widget-content {
  color: var(--c-text);
}
body.is-admin .ui-dialog .ui-widget-content a {
  color: var(--c-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-2);
}
body.is-admin .ui-dialog .ui-widget-content a:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}
body.is-admin .ui-dialog .ui-widget-content code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  padding: 2px 6px;
  background: var(--c-bg);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
}

/* Edición Views (página): mismas alineaciones checkbox / ritmo vertical
   (excluir live preview: va en .view-preview-form con su propio layout) */
.lafour-main .views-edit-view .form-item.js-form-type-checkbox:not(.form-item-live-preview) {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  margin-bottom: var(--space-3);
}
.lafour-main .views-edit-view .form-item.js-form-type-checkbox:not(.form-item-live-preview) > input.form-checkbox {
  grid-column: 1;
  grid-row: 1;
  margin: 3px 0 0;
}
.lafour-main .views-edit-view .form-item.js-form-type-checkbox:not(.form-item-live-preview) > label {
  grid-column: 2;
  grid-row: 1;
  color: var(--c-text);
  margin: 0;
}
.lafour-main .views-edit-view .form-item.js-form-type-checkbox:not(.form-item-live-preview) > .description {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: var(--c-muted);
}

/* ───────────────────────────────────────────────────────────
   RH — Dashboard (markup del módulo: .kpis-container, .kpi-card, …)
   Override visual completo al kit §10 (sin azules Bootstrap).
   ─────────────────────────────────────────────────────────── */
body.is-admin .lafour-main *:has(+ .kpis-container) {
  font-size: var(--text-sm);
  color: var(--c-muted);
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-3);
}
body.is-admin .lafour-main .kpis-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
}
body.is-admin .lafour-main .kpi-card {
  --kpi-accent: var(--c-border-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-left: 3px solid var(--kpi-accent);
  padding: var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  box-sizing: border-box;
}
body.is-admin .lafour-main .kpi-card.kpi-blue   { --kpi-accent: #4a8fd4; }
body.is-admin .lafour-main .kpi-card.kpi-green  { --kpi-accent: var(--c-status); }
body.is-admin .lafour-main .kpi-card.kpi-red    { --kpi-accent: var(--c-brand); }
body.is-admin .lafour-main .kpi-card.kpi-orange { --kpi-accent: var(--c-warning); }
body.is-admin .lafour-main .kpi-card.kpi-purple { --kpi-accent: #8b7bc4; }
body.is-admin .lafour-main .kpi-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex: 0 0 auto;
  opacity: 0.92;
}
body.is-admin .lafour-main .kpi-content {
  min-width: 0;
  flex: 1;
}
body.is-admin .lafour-main .kpi-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-display);
  color: var(--c-text);
  line-height: 1.1;
}
body.is-admin .lafour-main .kpi-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 4px;
  line-height: 1.35;
}
body.is-admin .lafour-main .kpi-subtitle {
  font-size: var(--text-xs);
  color: var(--c-dim);
  margin-top: 2px;
}
body.is-admin .lafour-main .estadisticas-container,
body.is-admin .lafour-main .alertas-container,
body.is-admin .lafour-main .acciones-rapidas-container,
body.is-admin .lafour-main .ultimas-actividades-container {
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  box-sizing: border-box;
}
body.is-admin .lafour-main .estadisticas-container h2,
body.is-admin .lafour-main .alertas-container h2,
body.is-admin .lafour-main .acciones-rapidas-container h2,
body.is-admin .lafour-main .ultimas-actividades-container h2 {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-border-2);
}
body.is-admin .lafour-main .simple-chart {
  margin-top: var(--space-2);
}
body.is-admin .lafour-main .simple-chart h3 {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--space-4);
}
body.is-admin .lafour-main .chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 140px;
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--c-border);
}
body.is-admin .lafour-main .chart-bar-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
body.is-admin .lafour-main .chart-bar {
  width: 100%;
  max-width: 28px;
  min-height: 4px;
  background: linear-gradient(to top, var(--c-brand-dim), var(--c-brand));
  border-radius: 0;
  opacity: 0.92;
}
body.is-admin .lafour-main .chart-label {
  font-size: 0.65rem;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.is-admin .lafour-main .chart-value {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--c-dim);
}
body.is-admin .lafour-main .estadisticas-container .no-data {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--c-muted);
  padding: var(--space-3);
  background: var(--c-bg);
  border: 1px dashed var(--c-border-2);
}
body.is-admin .lafour-main .alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(253, 202, 64, 0.08);
  border: 1px solid rgba(253, 202, 64, 0.35);
  border-left: 3px solid var(--c-warning);
  color: var(--c-text);
  font-size: var(--text-sm);
  line-height: 1.5;
}
body.is-admin .lafour-main .alerta-icon {
  flex: 0 0 auto;
  line-height: 1.2;
}
body.is-admin .lafour-main .alerta-message {
  min-width: 0;
}
body.is-admin .lafour-main .acciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
body.is-admin .lafour-main a.accion-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-border-2);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
body.is-admin .lafour-main a.accion-button:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: var(--c-brand-dim);
}
body.is-admin .lafour-main .actividades-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
body.is-admin .lafour-main .actividades-list li {
  margin: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--text-sm);
  color: var(--c-text);
  line-height: 1.45;
}
body.is-admin .lafour-main .actividades-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
body.is-admin .lafour-main .actividades-list .activity-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-muted);
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────
   RH — Lista empleados (vista + Bootstrap .btn en columna Editar)
   ─────────────────────────────────────────────────────────── */
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) {
  margin-bottom: var(--space-6);
}
body.is-admin .lafour-main [id^="views-exposed-form-rh-mexico-empleados"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  box-sizing: border-box;
}
body.is-admin .lafour-main [id^="views-exposed-form-rh-mexico-empleados"] .cfield,
body.is-admin .lafour-main [id^="views-exposed-form-rh-mexico-empleados"] .form-item {
  margin: 0;
  flex: 1 1 200px;
  min-width: min(100%, 220px);
}
body.is-admin .lafour-main [id^="views-exposed-form-rh-mexico-empleados"] .form-actions {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) table.table {
  font-size: var(--text-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-border-2);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) table.table thead th {
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-border-2);
  padding: var(--space-3) var(--space-3);
  vertical-align: bottom;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) table.table thead th a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) table.table thead th a:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-border-2);
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) table.table tbody td {
  padding: var(--space-3);
  border-color: var(--c-border);
  vertical-align: middle;
  color: var(--c-text);
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) table.table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) table.table tbody tr:hover td {
  background: rgba(227, 6, 19, 0.06);
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) td.views-field-nothing {
  width: 12rem;
  max-width: 14rem;
  vertical-align: top;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .views-field-field-nombre-completo {
  max-width: 18rem;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .btn-group-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 10.5rem;
  max-width: 13rem;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .btn-group-vertical .btn {
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 9px 12px !important;
  line-height: 1.25 !important;
  border: 1px solid var(--c-border-2) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .btn-group-vertical .btn-primary {
  background: transparent !important;
  color: var(--c-text) !important;
  border-color: var(--c-border-2) !important;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .btn-group-vertical .btn-primary:hover {
  border-color: var(--c-brand) !important;
  color: var(--c-brand) !important;
  background: var(--c-brand-dim) !important;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .btn-group-vertical .btn-success {
  background: transparent !important;
  color: var(--c-status) !important;
  border-color: rgba(58, 165, 93, 0.45) !important;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .btn-group-vertical .btn-success:hover {
  background: rgba(58, 165, 93, 0.12) !important;
  color: var(--c-text) !important;
  border-color: var(--c-status) !important;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .btn-group-vertical .svg-inline--fa {
  width: 0.85em;
  height: 0.85em;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .xlsx-feed a.feed-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-2);
  padding-bottom: 2px;
}
body.is-admin .lafour-main .views-element-container:has([id^="views-exposed-form-rh-mexico-empleados"]) .xlsx-feed a.feed-icon:hover {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
}

/* ───────────────────────────────────────────────────────────
   Node / entity forms in frontend theme (ej. /node/*/edit)
   Refuerzo de contraste: textos y controls legibles sobre fondo oscuro.
   CKEditor 5 UI asume fondo claro en el editable; aquí forzamos área clara.
   ─────────────────────────────────────────────────────────── */
body.is-admin .lafour-main form.node-form :where(
  input.form-text,
  input.form-url,
  input.form-number,
  input.form-email,
  input.form-search,
  input.form-date,
  input.form-time,
  input.form-datetime,
  input.form-tel,
  input.form-color,
  input.form-file,
  input.form-autocomplete,
  textarea.form-textarea,
  select.form-select
),
body[class*="path-node"] .lafour-main form.node-form :where(
  input.form-text,
  input.form-url,
  input.form-number,
  input.form-email,
  input.form-search,
  input.form-date,
  input.form-time,
  input.form-autocomplete,
  textarea.form-textarea,
  select.form-select
) {
  background-color: var(--c-surface) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border-2) !important;
  color-scheme: dark;
}

body.is-admin .lafour-main form.node-form textarea.text-summary,
body[class*="path-node"] .lafour-main form.node-form textarea.text-summary {
  background-color: var(--c-surface) !important;
  color: var(--c-text) !important;
}

body.is-admin .lafour-main form.node-form :where(label, .fieldset-legend),
body[class*="path-node"] .lafour-main form.node-form :where(label, .fieldset-legend) {
  color: var(--c-text);
}

body.is-admin .lafour-main form.node-form .description,
body[class*="path-node"] .lafour-main form.node-form .description,
body.is-admin .lafour-main form.node-form .cfield__desc,
body[class*="path-node"] .lafour-main form.node-form .cfield__desc {
  color: var(--c-muted);
}

body.is-admin .lafour-main form.node-form .file a,
body.is-admin .lafour-main form.node-form a.menu-item__link,
body[class*="path-node"] .lafour-main form.node-form .file a,
body[class*="path-node"] .lafour-main form.node-form a.menu-item__link {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.is-admin .lafour-main form.node-form .file a:hover,
body[class*="path-node"] .lafour-main form.node-form .file a:hover {
  color: var(--c-text);
}

/* CKEditor 5 — área editable en el DOM (Body/resumen). layout.css aplica
   .lafour-main p { color: var(--c-text) } a TODO main; eso dejaba párrafos claros
   sobre el fondo crema del editor → texto invisible. */
body.is-admin .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable),
body[class*="path-node"] .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
  --ck-color-base-text: #1a1a1a;
  --ck-color-base-background: #f5f3ef;
  background: #f5f3ef !important;
  color: #1a1a1a !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  min-height: 12rem;
}

/* Todo el contenido generado dentro del editable: mismo contraste papel/negro */
body.is-admin .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) :where(
  p, li, td, th, figcaption, span, div, strong, em, u, s, sub, sup, small
),
body[class*="path-node"] .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) :where(
  p, li, td, th, figcaption, span, div, strong, em, u, s, sub, sup, small
) {
  color: #1a1a1a !important;
}

body.is-admin .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) :where(h1, h2, h3, h4, h5, h6),
body[class*="path-node"] .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) :where(h1, h2, h3, h4, h5, h6) {
  color: #0a0a0a !important;
}

body.is-admin .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) a,
body[class*="path-node"] .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) a {
  color: #0b57d0 !important;
  border-bottom-color: rgba(11, 87, 208, 0.35) !important;
}

body.is-admin .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) blockquote,
body[class*="path-node"] .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) blockquote {
  color: #333 !important;
  border-left-color: rgba(0, 0, 0, 0.22) !important;
}

body.is-admin .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) :where(code, pre),
body[class*="path-node"] .lafour-main form.node-form .ck.ck-editor__editable:not(.ck-editor__nested-editable) :where(code, pre) {
  background: rgba(0, 0, 0, 0.07) !important;
  color: #111 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.is-admin .lafour-main form.node-form .ck.ck-editor__editable.ck-focused,
body[class*="path-node"] .lafour-main form.node-form .ck.ck-editor__editable.ck-focused {
  box-shadow: 0 0 0 1px var(--c-brand) !important;
}

body.is-admin .lafour-main form.node-form .ck-source-editing-area textarea,
body[class*="path-node"] .lafour-main form.node-form .ck-source-editing-area textarea {
  background: #0d0d0d !important;
  color: #f0ede8 !important;
  font-family: var(--font-mono);
  border: 1px solid var(--c-border-2) !important;
}

body.is-admin .lafour-main form.node-form .ck.ck-toolbar,
body[class*="path-node"] .lafour-main form.node-form .ck.ck-toolbar {
  background: var(--c-surface-2) !important;
  border: 1px solid var(--c-border-2) !important;
}

body.is-admin .lafour-main form.node-form .ck.ck-editor__main,
body[class*="path-node"] .lafour-main form.node-form .ck.ck-editor__main {
  background: #f5f3ef !important;
}

/* Pie del formulario (publicado / guardar): sin franja blanca sobre texto claro */
body.is-admin .lafour-main form.node-form .entity-content-form-footer,
body.is-admin .lafour-main form.node-form .form-actions,
body[class*="path-node"] .lafour-main form.node-form .entity-content-form-footer,
body[class*="path-node"] .lafour-main form.node-form .form-actions {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border-2) !important;
  padding: var(--space-4);
  margin-top: var(--space-5);
}
body.is-admin .lafour-main form.node-form .form-actions .button:not(.button--primary):not(.button--danger),
body[class*="path-node"] .lafour-main form.node-form .form-actions .button:not(.button--primary):not(.button--danger) {
  background: transparent !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border-2) !important;
}