/* Hub de recursos */

.breadcrumb a { color: var(--hueso); text-decoration: none; }
.breadcrumb a:hover { color: var(--senal); }

/* Buscador */
.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vacio2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  margin: 26px 0 18px;
  transition: border-color 0.15s ease;
}

.searchbar:focus-within { border-color: var(--senal); }

.search-prompt {
  font-family: 'JetBrains Mono', monospace;
  color: var(--senal);
  font-size: 0.95rem;
}

#search {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--hueso);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95rem;
}

#search::placeholder { color: var(--gris); }

/* Filtros */
.filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.filter-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris);
  min-width: 74px;
}

.fchips { display: flex; gap: 8px; flex-wrap: wrap; }

.fchip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  background: transparent;
  color: var(--gris2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fchip:hover { border-color: var(--line2); color: var(--hueso); }
.fchip.is-active { background: var(--klein); border-color: var(--klein); color: #fff; }

.results-head { margin-bottom: 12px; }

.results-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--gris);
}

/* Cards */
.grid { display: flex; flex-direction: column; gap: 12px; }

.card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--vacio2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s var(--eo);
}

.card:hover { border-color: var(--senal); transform: translateY(-1px); }

.card-emoji { font-size: 1.7rem; line-height: 1; margin-top: 2px; }

.card-body { flex: 1; }

.card-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--hueso);
}

.card-desc {
  font-size: 0.93rem;
  color: var(--gris2);
  margin: 0 0 12px;
  line-height: 1.55;
}

.card-meta { display: flex; gap: 8px; flex-wrap: wrap; }

.card-arrow {
  font-family: 'JetBrains Mono', monospace;
  color: var(--gris);
  transition: color 0.15s ease, transform 0.15s var(--eo);
  margin-top: 4px;
}

.card:hover .card-arrow { color: var(--senal); transform: translateX(3px); }

/* Empty state */
.empty {
  text-align: center;
  padding: 36px 20px;
  border: 1px dashed var(--line2);
  border-radius: var(--radius);
}

.empty-title { font-size: 1.05rem; color: var(--hueso); margin: 0 0 8px; }
.empty-sub { font-size: 0.92rem; color: var(--gris2); margin: 0; }

/* Solicitud de recurso */
.request { margin: 8px 0 26px; }

.request-title { font-size: 1.5rem; font-weight: 600; margin: 0 0 8px; }

.request-sub { color: var(--gris2); font-size: 0.98rem; margin: 0 0 20px; }

#request-form { display: flex; flex-direction: column; gap: 10px; }

.req-row { display: flex; gap: 10px; }
.req-row input { flex: 1; }

#request-form input,
#request-form textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 0.96rem;
  font-family: inherit;
  background: var(--vacio2);
  color: var(--hueso);
  resize: vertical;
}

#request-form input::placeholder,
#request-form textarea::placeholder { color: var(--gris); }

#request-form input:focus,
#request-form textarea:focus { outline: 2px solid var(--senal); outline-offset: 1px; }

#req-btn {
  align-self: flex-start;
  background: var(--klein);
  color: #fff;
  font-family: 'Inter', sans-serif;
  border: none;
  padding: 12px 22px;
  border-radius: 9px;
  font-size: 0.96rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

#req-btn:hover { background: #0A3FD0; }
#req-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.gate-error { font-size: 0.85rem; color: #F28B82; margin: 4px 0 0; min-height: 0; }

.req-ok {
  border: 1px solid var(--line);
  border-left: 3px solid var(--senal);
  border-radius: 9px;
  padding: 16px 18px;
  background: var(--vacio2);
}

.req-ok p { margin: 0; color: var(--gris2); }
.req-ok strong { color: var(--hueso); }

@media (max-width: 600px) {
  .req-row { flex-direction: column; }
  .card { padding: 16px; }
}

/* Recursos exclusivos de la comunidad */
.card-locked { cursor: pointer; }
.card-locked .card-emoji { opacity: 0.75; }
.card-locked:hover { border-color: var(--line2); transform: none; }

.pill-locked { border-color: var(--line2); color: var(--gris); }

.locked-note {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--line2);
  border-radius: 9px;
  font-size: 0.88rem;
  color: var(--gris2);
}

.locked-note a { color: var(--senal); }