/**
 * Comunidad — tablón. Tokens del hub. Sin hex sueltos.
 * Lista para leer con conexión mala: poco cromo, nada de mapa, nada de fotos.
 */

[hidden] {
  display: none !important;
}

.com-kicker {
  margin: 0.15rem 0 0.2rem;
  font-family: var(--font-headline);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--turquoise);
}

.com-titulo {
  margin: 0 0 0.35rem;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--on-surface);
}

.com-sub {
  margin: 0 0 0.95rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

.com-buscar {
  position: relative;
  margin: 0 0 0.75rem;
}

.com-buscar__icono,
.com-buscar__x svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.com-buscar__icono {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--on-surface-muted);
  pointer-events: none;
}

.com-buscar input {
  width: 100%;
  height: 2.75rem;
  padding: 0 2.5rem 0 2.5rem;
  border: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--navy-deep) 70%, transparent);
  color: var(--on-surface);
}

.com-buscar input::placeholder {
  color: var(--on-surface-muted);
}

.com-buscar input:focus {
  outline: 2px solid color-mix(in srgb, var(--turquoise) 55%, transparent);
  outline-offset: 1px;
}

.com-buscar__x {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-surface-muted);
}

.com-formas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.7rem;
}

.com-pill {
  height: 1.9rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--on-surface) 14%, transparent);
  background: transparent;
  color: var(--on-surface);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.com-pill.is-on {
  border-color: color-mix(in srgb, var(--turquoise) 55%, transparent);
  background: color-mix(in srgb, var(--turquoise) 16%, transparent);
  color: var(--on-surface);
}

.com-filtros {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.95rem;
}

.com-filtros .field {
  margin: 0;
}

.com-filtros .field__label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.com-filtros .field__control {
  width: 100%;
  height: 2.4rem;
  padding: 0 0.7rem;
  border-radius: var(--radius-control);
  border: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
  background: color-mix(in srgb, var(--navy-deep) 70%, transparent);
  color: var(--on-surface);
}

.com-error,
.com-vacio,
.com-cargando {
  margin: 0.5rem 0 1rem;
  padding: 1rem 0.2rem;
}

.com-vacio p,
.com-error {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

.com-lista {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 1.5rem;
}

.com-card {
  padding: 0.85rem 0.9rem 0.8rem;
  border-radius: var(--radius-card);
  background: var(--navy-deep);
  border: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.com-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.com-card__forma {
  color: var(--turquoise);
}

.com-card__titulo {
  margin: 0 0 0.3rem;
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

.com-card__detalle {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--on-surface-muted);
}

.com-card__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: 0.75rem;
  color: var(--on-surface-muted);
}

.com-card__senal {
  color: var(--tramite);
}

.com-card__senal--suave {
  color: var(--on-surface-muted);
}

.com-card__hasta {
  color: var(--on-surface-muted);
}

@media (hover: hover) {
  .com-pill:hover {
    border-color: color-mix(in srgb, var(--turquoise) 40%, transparent);
  }
  .com-buscar__x:hover {
    color: var(--on-surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  .com-pill,
  .com-buscar input,
  .com-card {
    transition: none;
  }
}