/* Reglas generales de la app:
   1. Sin saltos de diseño: lo que aparece o desaparece tiene su lugar reservado.
   2. En listas largas, buscador, filtros y títulos de la tabla quedan fijos al bajar. */

/* ---- 1. Lugar reservado para mensajes de cada campo ---- */
.field { padding-bottom: 1.15rem; }
.field > .field__error,
.field > small.field__error[data-js] {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-grid { row-gap: 6px; }
.filtros .field, .items__cabecera .field { padding-bottom: 0; }
.item .field { padding-bottom: 1.15rem; }
.items { gap: 4px; }
.items__filas { gap: 4px; }

/* Avisos de un campo (hint / advertencia): siempre ocupan dos líneas */
.hint-slot { min-height: 2.6em; display: block; font-size: 0.8rem; line-height: 1.3em; }
.padron-estado { min-height: 2.6em; line-height: 1.3em; display: block; }
.items-error-slot { min-height: 1.3em; display: block; }
.items-error-slot[hidden] { display: block !important; visibility: hidden; }

/* Botones que no aplican todavía: visibles y deshabilitados (no aparecen de golpe) */
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Botón ocupado: mantiene el ancho; si el texto no entra, queda solo el spinner */
.btn.is-ocupado { overflow: hidden; }
.btn.is-ocupado.is-solo-spinner { gap: 0; }

/* ---- 2. Encabezado fijo en listas largas ---- */
.lista { --alto-barra: 0px; }
.lista__barra {
  position: sticky;
  top: calc(var(--banner-h) + var(--topbar-h));
  z-index: 30;
  margin: -24px -24px 0;
  padding: 20px 24px 14px;
  background: var(--superficie);
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
}
.lista__barra .filtros { margin-bottom: 0; }
.lista__barra.is-fijo { border-radius: 0; box-shadow: 0 1px 0 var(--borde), 0 10px 24px -12px rgba(2, 6, 23, 0.9); }
.lista .table-wrap { overflow: visible; }
.lista .data-table thead th {
  position: sticky;
  top: calc(var(--banner-h) + var(--topbar-h) + var(--alto-barra));
  z-index: 20;
  background: var(--superficie);
  /* Tapa la fila entera, sin rendijas arriba ni a los costados */
  box-shadow: 0 -3px 0 var(--superficie), inset 0 -1px 0 var(--borde);
}
.lista .data-table thead th:first-child { box-shadow: -24px -3px 0 var(--superficie), inset 0 -1px 0 var(--borde); }
.lista .data-table thead th:last-child { box-shadow: 24px -3px 0 var(--superficie), inset 0 -1px 0 var(--borde); }
.lista .data-table tbody td { position: relative; z-index: 0; }

/* Filtros: en escritorio, todos a la vista; en el celular, buscador + botón "Filtros"
   que abre el resto en un panel flotante (no desplaza la lista). */
.filtros__toggle { display: none; }
.filtros__extra { display: contents; }

@media (max-width: 860px) {
  .filtros, .filtros--cbtes { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .filtros__buscar { grid-column: auto; }
  .filtros__toggle { display: inline-flex; }
  .filtros__extra {
    display: none;
    position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 40;
    grid-template-columns: 1fr 1fr; gap: 12px;
    background: var(--superficie); border: 1px solid var(--borde-acento); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 16px;
  }
  .filtros__extra.is-abierto { display: grid; }
  .filtros__extra .filtros__acciones { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 640px) {
  .lista__barra { padding: 14px 16px 12px; }
}


/* Acciones del encabezado: nunca desbordan la pantalla */
.page-header__actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .page-header { align-items: stretch; }
  .page-header__actions { width: 100%; }
  .page-header__actions > .btn, .page-header__actions > form { flex: 1 1 auto; }
  .page-header__actions > form .btn { width: 100%; }
}