/* Listados y formularios de búsqueda (SearchKit y Afform).
 *
 * Son componentes de Angular que CiviCRM pinta aparte, así que no los alcanza
 * ninguna de las otras hojas: salían con el aspecto de fábrica, sueltos dentro
 * de un CRM que ya tiene el suyo.
 *
 * Sin colores nuevos: se usan las variables del tema (yucore-theme.css).
 */

/* ============================================================
   EL FORMULARIO DE FILTROS
   ============================================================ */

/* Los filtros van en una tarjeta propia, separada de la tabla. Sueltos sobre
   el fondo no se lee dónde acaba el filtro y dónde empieza el resultado. */
.crm-container .af-form-wrapper > af-form > .af-container:first-child,
.crm-container form[af-form] > .af-container:first-child {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 14px;
  align-items: end;
  padding: 14px 16px;
  margin: 0 0 16px;
  background: var(--hu-surface, #fff);
  border: 1px solid var(--hu-border, #e4e8ef);
  border-radius: var(--hu-radius-sm, 9px);
}

.crm-container af-field { min-width: 0; }

.crm-container .crm-af-field-label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hu-text-muted, #66707f);
}

.crm-container .crm-af-field input[type="text"],
.crm-container .crm-af-field input[type="number"],
.crm-container .crm-af-field input[type="date"],
.crm-container .crm-af-field select,
.crm-container .crm-af-field .select2-container {
  width: 100% !important;
  max-width: 100%;
}

.crm-container .crm-af-field-help-pre,
.crm-container .crm-af-field-help-post {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--hu-text-muted, #66707f);
}

/* El rango de fechas: dos casillas que se leen como una sola cosa. */
.crm-container .af-field-range-sep {
  padding: 0 6px;
  color: var(--hu-text-muted, #66707f);
  font-size: 12px;
}

/* Los botones, al final y alineados con los campos. */
.crm-container .af-container.af-layout-inline {
  display: flex;
  gap: 8px;
  align-items: end;
  grid-column: 1 / -1;
}
.crm-container .af-container.af-layout-inline .af-button { margin: 0; }

/* ============================================================
   LA TABLA DE RESULTADOS
   ============================================================ */

.crm-container .crm-search-display-table {
  background: var(--hu-surface, #fff);
  border: 1px solid var(--hu-border, #e4e8ef);
  border-radius: var(--hu-radius-sm, 9px);
  overflow: hidden;
}

/* La tabla ancha se desplaza DENTRO de su caja, no empuja la página entera:
   con doce columnas, si no, aparece una barra horizontal en todo el sitio. */
.crm-container .crm-search-display-table > table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 0;
  border: 0;
  white-space: nowrap;
}

.crm-container .crm-search-display-table thead th {
  padding: 9px 12px;
  background: var(--aah-bg-layer, #f4f6fa);
  border-bottom: 1px solid var(--hu-border, #e4e8ef);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hu-text-muted, #66707f);
  text-align: left;
}

/* Que se note cuáles se pueden ordenar, sin tener que probar una por una. */
.crm-container .crm-search-display-table thead th.crm-sortable {
  cursor: pointer;
}
.crm-container .crm-search-display-table thead th.crm-sortable:hover {
  color: var(--hu-navy, #1b3a6b);
  background: #edf1f8;
}

.crm-container .crm-search-display-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--aah-bg-layer, #f4f6fa);
  font-size: 13px;
  color: var(--hu-text, #1f2733);
  vertical-align: middle;
}
.crm-container .crm-search-display-table tbody tr:last-child td { border-bottom: 0; }
.crm-container .crm-search-display-table tbody tr:hover td { background: #f9fbfd; }

.crm-container .crm-search-display-table tbody a {
  color: var(--hu-blue, #2b5aa0);
  font-weight: 500;
}

/* Las celdas vacías se ven vacías, no rotas. */
.crm-container .crm-search-display-table tbody td:empty::after {
  content: "—";
  color: var(--hu-text-muted, #66707f);
}

/* Acciones de la fila: iconos discretos, no una fila de botones. */
.crm-container .crm-search-display-table td .btn-group .btn,
.crm-container .crm-search-display-table td a.btn {
  padding: 2px 8px;
  font-size: 12px;
  background: transparent;
  border: 0;
  color: var(--hu-blue, #2b5aa0);
  box-shadow: none;
}
.crm-container .crm-search-display-table td .btn-group .btn:hover,
.crm-container .crm-search-display-table td a.btn:hover {
  text-decoration: underline;
  background: transparent;
}

/* El pie: contador y páginas. */
.crm-container .crm-search-display-table .form-inline,
.crm-container .crm-search-display-table .form-group.pull-right {
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--hu-text-muted, #66707f);
}

/* Cuando no hay nada, decirlo con calma y no con un aviso rojo. */
.crm-container .crm-search-display .alert-info {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--hu-border, #e4e8ef);
  border-radius: 0;
  background: var(--aah-bg-layer, #f4f6fa);
  color: var(--hu-text-muted, #66707f);
  font-size: 13px;
}

/* ============================================================
   EN PANTALLA PEQUEÑA
   ============================================================ */
@media (max-width: 780px) {
  .crm-container .af-form-wrapper > af-form > .af-container:first-child,
  .crm-container form[af-form] > .af-container:first-child {
    grid-template-columns: 1fr;
  }
  .crm-container .af-container.af-layout-inline { flex-wrap: wrap; }
}