/* =====================================================
   ARCHIVO GENERAL SAN JUAN — tabla-retencion.css
   Herramienta de consulta de la Tabla de Retención
   (tabla-retencion.html). Requiere shared.css antes.
   ===================================================== */

.pg-tabla {
  flex: 1;
  background: var(--cbg);
  padding: 48px var(--gsj-container-pad) 80px;
}

.tr-wrap {
  max-width: 1060px;
  margin: 0 auto;
}

/* ─── Encabezado ─────────────────────────────────────────────────────── */
.tr-head h1 {
  font-family: var(--fu);
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--ct);
  line-height: 1.15;
  margin-bottom: 10px;
  text-wrap: balance;
}

.tr-sub {
  font-family: var(--fb);
  font-size: 16px;
  color: var(--ct2);
  line-height: 1.7;
  max-width: 72ch;
  margin-bottom: 24px;
}

/* ─── Descargas oficiales ────────────────────────────────────────────── */
.tr-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 40px;
}

.tr-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--cbrd2);
  border-radius: 9999px;
  background: var(--csurf);
  font-family: var(--fu);
  font-size: 14px;
  font-weight: 600;
  color: var(--ct);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.tr-dl:hover {
  border-color: var(--cp);
  background: oklch(from var(--cp) l c h / 0.04);
}

.tr-dl svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--cp-act);
}

.tr-dl .tr-dl-meta {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ct3);
}

.tr-dl--page {
  border: none;
  background: none;
  color: var(--cp-act);
  padding-inline: 4px;
}

.tr-dl--page:hover {
  border: none;
  background: none;
  text-decoration: underline;
}

/* ─── Toolbar: búsqueda + filtros ────────────────────────────────────── */
.tr-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.tr-search {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 440px;
}

.tr-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ct3);
  pointer-events: none;
}

.tr-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 40px;
  border: 1.5px solid var(--cbrd2);
  border-radius: 9999px;
  background: var(--csurf);
  font-family: var(--fu);
  font-size: 15px;
  color: var(--ct);
}

.tr-search input::placeholder { color: var(--ct2); }

.tr-search input:focus {
  outline: 2px solid var(--cp);
  outline-offset: 1px;
  border-color: var(--cp);
}

.tr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tr-chip {
  min-height: 44px;
  padding: 8px 18px;
  border: 1.5px solid var(--cbrd2);
  border-radius: 9999px;
  background: var(--csurf);
  font-family: var(--fu);
  font-size: 14px;
  font-weight: 600;
  color: var(--ct2);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.tr-chip:hover { color: var(--ct); background: var(--cmuted); }

.tr-chip.active {
  background: var(--cp-btn, oklch(55% 0.19 40));
  border-color: var(--cp-btn, oklch(55% 0.19 40));
  color: oklch(100% 0 0);
}

.tr-count {
  font-family: var(--fu);
  font-size: 13.5px;
  color: var(--ct2);
  margin-bottom: 6px;
}

.tr-nota {
  font-family: var(--fb);
  font-size: 13.5px;
  font-style: italic;
  color: var(--ct2);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 90ch;
}

/* ─── Tabla ──────────────────────────────────────────────────────────── */
.tr-table-wrap {
  background: var(--csurf);
  border: 1px solid var(--cbrd);
  border-radius: var(--gsj-radius-lg);
  overflow: hidden;
}

.tr-table {
  width: 100%;
  border-collapse: collapse;
}

.tr-table th {
  font-family: var(--fu);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ct2);
  text-align: left;
  padding: 14px 16px;
  background: var(--cmuted);
  border-bottom: 1px solid var(--cbrd);
}

.tr-table td {
  padding: 16px;
  border-bottom: 1px solid var(--cbrd);
  vertical-align: top;
}

.tr-table tbody tr:last-child td { border-bottom: none; }

.tr-num {
  font-family: var(--fu);
  font-size: 14px;
  font-weight: 700;
  color: var(--ct3);
  width: 48px;
}

.tr-serie strong {
  display: block;
  font-family: var(--fu);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ct);
  line-height: 1.4;
  margin-bottom: 4px;
  text-wrap: pretty;
}

.tr-desc {
  display: block;
  font-family: var(--fb);
  font-size: 14px;
  color: var(--ct2);
  line-height: 1.6;
  max-width: 62ch;
}

.tr-norma {
  display: block;
  font-family: var(--fu);
  font-size: 12.5px;
  color: var(--ct3);
  line-height: 1.5;
  margin-top: 6px;
}

.tr-area { width: 110px; }

.tr-tag {
  display: inline-block;
  font-family: var(--fu);
  font-size: 12px;
  font-weight: 600;
  color: var(--ct2);
  background: var(--cmuted);
  border-radius: 9999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.tr-guarda {
  width: 150px;
  font-family: var(--fu);
  font-size: 13.5px;
  color: var(--ct);
  line-height: 1.7;
  white-space: nowrap;
}

.tr-guarda span { display: block; }
.tr-guarda .tr-guarda-lbl { color: var(--ct3); font-size: 12px; }

.tr-disp { width: 220px; }

.tr-badge {
  display: inline-block;
  font-family: var(--fu);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 9999px;
  padding: 4px 12px;
  margin: 0 4px 4px 0;
  white-space: nowrap;
}

/* Colores semánticos del DS (success/error/info) en tinte suave */
.tr-badge--eliminar   { color: oklch(38% 0.16 29);  background: oklch(57.81% 0.25 29.23 / 0.10); }
.tr-badge--permanente { color: oklch(35% 0.10 145); background: oklch(53% 0.14 145 / 0.12); }
.tr-badge--digital    { color: oklch(33% 0.11 250); background: oklch(45% 0.16 250 / 0.10); }
.tr-badge--transferir { color: oklch(32% 0.13 40);  background: oklch(from var(--cp-lt, oklch(84% 0.18 85)) l c h / 0.35); }

/* ─── Vacío ──────────────────────────────────────────────────────────── */
.tr-empty {
  padding: 48px 24px;
  text-align: center;
  font-family: var(--fb);
  font-size: 15.5px;
  color: var(--ct2);
}

.tr-empty strong {
  display: block;
  font-family: var(--fu);
  font-size: 17px;
  color: var(--ct);
  margin-bottom: 6px;
}

/* ─── Mobile: filas como tarjetas ────────────────────────────────────── */
@media (max-width: 860px) {
  .tr-table thead { display: none; }

  .tr-table, .tr-table tbody, .tr-table tr, .tr-table td { display: block; width: 100%; }

  .tr-table tr { border-bottom: 1px solid var(--cbrd); padding: 16px; }
  .tr-table tbody tr:last-child { border-bottom: none; }
  .tr-table td { padding: 0 0 12px; border-bottom: none; }
  .tr-table td:last-child { padding-bottom: 0; }

  .tr-num::before { content: 'Serie N° '; font-weight: 400; color: var(--ct3); }
  .tr-num { width: auto; font-size: 13px; color: var(--ct2); }

  /* Sin thead, cada dato repite su etiqueta de columna (mismo estilo
     que los th) para que los valores no queden flotando sin contexto. */
  .tr-area::before,
  .tr-guarda::before,
  .tr-disp::before {
    display: block;
    font-family: var(--fu);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ct3);
    margin-bottom: 5px;
  }

  .tr-area::before   { content: 'Área'; }
  .tr-guarda::before { content: 'Tiempo de guarda'; }
  .tr-disp::before   { content: 'Disposición final'; }

  .tr-guarda { white-space: normal; }
  .tr-guarda span { display: inline-block; margin-right: 16px; }
}