/* ============================================================
   Civika · Listado con sidebar de filtros
   ============================================================ */

.listado-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: var(--space-8);
  align-items: start;
}
.listado-main { min-width: 0; }

.filter-sidebar {
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg);
  padding: var(--space-5); position: sticky; top: calc(var(--header-height) + 16px);
  max-height: calc(100vh - var(--header-height) - 32px); overflow-y: auto;
}
.filter-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.filter-sidebar-head h2 { font-size: var(--text-lg); }
.filter-clear { font-size: var(--text-xs); font-weight: 700; }

.filter-group { padding-block: var(--space-4); border-top: 1px solid var(--slate-100); }
.filter-group:first-of-type { border-top: none; padding-top: 0; }
.filter-group h3 {
  font-size: var(--text-xs); font-weight: 700; color: var(--slate-500);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-3);
}

.filter-search {
  display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--slate-200); border-radius: var(--radius-md);
  padding-inline: var(--space-3); background: var(--white);
}
.filter-search svg { flex-shrink: 0; color: var(--slate-400); }
.filter-search input {
  flex: 1; min-width: 0; min-height: 42px; border: none; outline: none;
  background: transparent; font-size: var(--text-sm); color: var(--ink-900);
}
.filter-search input::placeholder { color: var(--slate-400); }

.filter-select {
  width: 100%; min-height: 42px; padding: 0 var(--space-3);
  border: 1px solid var(--slate-200); border-radius: var(--radius-md);
  background: var(--white); color: var(--ink-900); font-size: var(--text-sm);
}
.filter-select:focus { border-color: var(--green-600); }

.filter-range { display: flex; gap: var(--space-3); min-width: 0; }
.filter-range-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--slate-200); border-radius: var(--radius-md); padding-inline: var(--space-3);
}
.filter-range-field input {
  flex: 1; min-width: 0; min-height: 42px; border: none; outline: none;
  background: transparent; font-size: var(--text-sm); color: var(--ink-900);
  -moz-appearance: textfield;
}
.filter-range-field input::-webkit-outer-spin-button,
.filter-range-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-range-field span { color: var(--slate-400); font-size: var(--text-sm); }

.filter-checkbox {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--ink-900); cursor: pointer;
}
.filter-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--green-600); flex-shrink: 0; cursor: pointer;
}
.filter-checkbox span { flex: 1; min-width: 0; }
.filter-sidebar .btn-block { margin-top: var(--space-5); }

.filter-sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 55;
}
.filter-sidebar-backdrop.is-open { display: block; }

/* --- Pestañas "Tipo de ayuda" + orden --- */
.listado-tabs-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
  border-bottom: 1px solid var(--slate-200); padding-bottom: var(--space-2);
}
.listado-tabs { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.listado-tab {
  padding-bottom: var(--space-3); font-weight: 700; font-size: var(--text-sm);
  color: var(--slate-500); border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.listado-tab:hover { color: var(--ink-900); text-decoration: none; }
.listado-tab.is-active { color: var(--green-700); border-bottom-color: var(--green-600); }
.listado-tabs-actions { display: flex; align-items: center; gap: var(--space-3); }
.listado-tabs-actions .filter-select { width: auto; min-width: 170px; }
.listado-filter-toggle { display: none; }

/* --- Tarjetas de resultado --- */
.results-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.result-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-5); color: inherit;
}
.result-main { min-width: 0; flex: 1; }
.result-badge { margin-bottom: var(--space-2); font-size: 10px; letter-spacing: .04em; }
.result-title { font-weight: 700; font-size: var(--text-base); color: var(--ink-900); }
.result-org { margin-top: 2px; font-size: var(--text-xs); color: var(--slate-500); }
.result-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.result-meta {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right; min-width: 120px;
}
.result-amount { font-weight: 700; font-size: var(--text-base); color: var(--ink-900); }
.result-tipo { font-size: var(--text-xs); color: var(--slate-500); }
.result-time {
  margin-top: var(--space-2); display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--slate-400);
}
.result-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.result-dot-green { background: var(--green-500); }
.result-dot-amber { background: #f59e0b; }
.result-arrow { margin-top: var(--space-2); color: var(--slate-300); font-size: 1.3rem; }

@media (max-width: 900px) {
  .listado-layout { grid-template-columns: 1fr; }
  .listado-filter-toggle { display: inline-flex; order: -1; }

  .filter-sidebar {
    position: fixed; inset: 0 20% 0 0; z-index: 60; max-width: 340px;
    border-radius: 0; overflow-y: auto;
    transform: translateX(-105%); transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .filter-sidebar.is-open { transform: translateX(0); }
}

@media (max-width: 640px) {
  .listado-tabs-row { flex-direction: column; align-items: stretch; }
  .listado-tabs-actions { justify-content: space-between; }
  .filter-sidebar { inset: 0 10% 0 0; max-width: none; }

  .result-card { flex-direction: column; gap: var(--space-3); }
  .result-meta { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
  .result-time, .result-arrow { margin-top: 0; }
}