/* ═══════════════════════════════════════════════════════════
   ARCHIVOS TOTALES — Layout completo
   v1.0
═══════════════════════════════════════════════════════════ */

/* ── Fix WPBakery containers ───────────────────────────── */
.vc_row:has(#inf-at) .full_section_inner,
.vc_row:has(#inf-at) .vc_column-inner,
.vc_row:has(#inf-at) .wpb_wrapper,
.vc_row:has(#inf-at) .wpb_raw_html,
.vc_row:has(#inf-at) .vc_row-fluid,
.vc_row:has(#inf-at) {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

/* ── Sección wrapper ───────────────────────────────────── */
#inf-at {
  background: #000 !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
  padding: 20px 190px 120px !important;
  min-height: 100vh !important;
}

#inf-at > p { display: none !important; }

/* ── Título principal ──────────────────────────────────── */
.at-hero {
  text-align: center !important;
  margin-bottom: 60px !important;
}

.at-main-title {
  font-family: 'Roboto Mono', monospace !important;
  font-size: clamp(32px, 4.5vw, 62px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Buscador ──────────────────────────────────────────── */
.at-controls {
  margin-bottom: 48px !important;
}

.at-search-wrap {
  position: relative !important;
  margin-bottom: 20px !important;
}

.at-search-icon {
  position: absolute !important;
  left: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  pointer-events: none !important;
}

#at-search {
  width: 100% !important;
  background: #181818 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 40px !important;
  padding: 18px 24px 18px 56px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 15px !important;
  color: #fff !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

#at-search:focus {
  border-color: rgba(0, 211, 243, 0.5) !important;
}

#at-search::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* ── Filtros ───────────────────────────────────────────── */
.at-controls {
  overflow: visible !important;
}

.at-filters {
  display: flex !important;
  gap: 12px !important;
  overflow: visible !important;
}

.at-filter-wrap {
  position: relative !important;
  overflow: visible !important;
  z-index: 200 !important;
}

.at-filter-btn {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: #181818 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 40px !important;
  padding: 12px 22px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: border-color 0.2s ease !important;
  white-space: nowrap !important;
}

.at-filter-btn svg {
  width: 10px !important;
  height: 6px !important;
  transition: transform 0.2s ease !important;
}

.at-filter-btn.active {
  border-color: #00d3f3 !important;
  color: #00d3f3 !important;
}

.at-filter-btn.open svg {
  transform: rotate(180deg) !important;
}

/* ── Dropdown ──────────────────────────────────────────── */
.at-dropdown {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  min-width: 160px !important;
  z-index: 9999 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

#inf-at .at-dropdown.open {
  display: block !important;
}

.at-dropdown li {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
}

.at-dropdown li:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

.at-dropdown li.selected {
  color: #00d3f3 !important;
}

/* ── Tabla ─────────────────────────────────────────────── */
.at-table {
  width: 100% !important;
}

.at-table-header {
  display: grid !important;
  grid-template-columns: 130px 1fr 220px 140px !important;
  gap: 16px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  text-transform: uppercase !important;
}

.at-table-header span:nth-child(3) {
  text-align: center !important;
}

.at-table-header span:nth-child(4) {
  text-align: right !important;
}

/* ── Filas ─────────────────────────────────────────────── */
.at-row {
  display: grid !important;
  grid-template-columns: 130px 1fr 220px 140px !important;
  gap: 16px !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.at-row:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
}

.at-cell-date {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  letter-spacing: 0.5px !important;
}

.at-cell-title {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 16px !important;
  color: #fff !important;
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
}

.at-cell-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.at-tag {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #000 !important;
  background: #00d3f3 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.at-cell-tipo {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}

.at-cell-tipo svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ── Paginación ────────────────────────────────────────── */
#at-pagination {
  display: none;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  padding: 40px 0 !important;
}

.at-pag-btn {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  transition: border-color 0.2s, opacity 0.2s !important;
}

.at-pag-btn:hover:not(:disabled) {
  border-color: #00d3f3 !important;
  color: #00d3f3 !important;
}

.at-pag-btn:disabled {
  opacity: 0.3 !important;
  cursor: default !important;
}

.at-pag-info {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
}

/* ── Sin resultados ────────────────────────────────────── */
#at-empty {
  display: none;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.3) !important;
  text-align: center !important;
  padding: 60px 0 !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  #inf-at { padding: 20px 60px 100px !important; }
  .at-table-header,
  .at-row { grid-template-columns: 110px 1fr 180px 120px !important; }
}

@media (max-width: 900px) {
  #inf-at { padding: 20px 24px 80px !important; }
  .at-table-header { display: none !important; }
  .at-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 18px 0 !important;
  }
  .at-cell-date { font-size: 11px !important; }
}

@media (max-width: 600px) {
  .at-main-title { letter-spacing: 0.03em !important; }
  .at-filters { flex-wrap: wrap !important; }
}