/* ============================================================
   tables.css — Tablas institucionales Dashboard INS 2026
   ============================================================ */

/* ── Wrapper con scroll horizontal ──────────────────────────── */
.table-wrapper {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.table-scroll {
  overflow-x: auto;
  max-height: 520px;
  overflow-y: auto;
}

/* ── Tabla base ──────────────────────────────────────────────── */
.tabla-ins {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .83rem;
}
.tabla-ins thead th {
  background: var(--color-primario);
  color: #fff;
  padding: .65rem .9rem;
  text-align: left;
  font-weight: 600;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.tabla-ins thead th:hover { background: #16304f; }
.tabla-ins thead th::after {
  content: ' ⇅';
  font-size: .65rem;
  opacity: .55;
}
.tabla-ins thead th.sort-asc::after  { content: ' ↑'; opacity: 1; }
.tabla-ins thead th.sort-desc::after { content: ' ↓'; opacity: 1; }

.tabla-ins tbody tr:nth-child(even) { background: #f8fafc; }
.tabla-ins tbody tr:hover            { background: #eef3fb; }

.tabla-ins td {
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.tabla-ins td.wrap { white-space: normal; min-width: 180px; max-width: 300px; }
.tabla-ins td.num  { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Badges de alerta ────────────────────────────────────────── */
.badge-alerta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .55rem;
  border-radius: 20px;
  font-size: .73rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-alerta--critico  { background: #fee2e2; color: #991b1b; }
.badge-alerta--proximo  { background: #fef9c3; color: #854d0e; }
.badge-alerta--ok       { background: #dcfce7; color: #14532d; }
.badge-alerta--vencido  { background: #94a3b8; color: #fff; }
.badge-alerta--sin-fecha{ background: #f3f4f6; color: #6b7280; }

/* ── Barra de herramientas de tabla ─────────────────────────── */
.tabla-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.tabla-titulo {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-primario);
}
.input-busqueda {
  padding: .4rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: .85rem;
  width: 220px;
  outline: none;
  transition: border .2s;
}
.input-busqueda:focus { border-color: var(--color-secundario); }

/* ── Paginación ──────────────────────────────────────────────── */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .7rem 1.1rem;
  font-size: .82rem;
  color: var(--text-sec);
  border-top: 1px solid var(--border);
}
.paginacion__info { margin-right: auto; }
.pag-btn {
  padding: .3rem .65rem;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  font-size: .82rem;
  transition: background .15s, border-color .15s;
}
.pag-btn:hover:not(:disabled) { background: #eef3fb; border-color: var(--color-secundario); }
.pag-btn:disabled { opacity: .4; cursor: default; }
.pag-btn--active {
  background: var(--color-secundario);
  color: #fff;
  border-color: var(--color-secundario);
}

/* ── % avance semáforo ───────────────────────────────────────── */
.pct--verde   { color: #16a34a; font-weight: 700; }
.pct--amarillo{ color: #d97706; font-weight: 700; }
.pct--rojo    { color: #dc2626; font-weight: 700; }

/* ── Fila total ──────────────────────────────────────────────── */
.row-total td {
  background: #1e3a5f !important;
  color: #fff !important;
  font-weight: 700;
}