.custom-select {
  padding: 8px 26px 8px 12px;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #000;
  font-size: 14px;
}

/* Estilo al enfocar */
.custom-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--P-AzulUltramar);
}

.cb-custom {
  border-radius: 5px;
  width: 100%;
  padding: 3px 5px;
  border: 1px solid var(--S-PardoGrisaceo);
}
.bg-gray {
  background: #eaeaea;
}

.table-filters {
  display: flex;
  background-color: var(--P-AzulUltramar);
  color: white;
  gap: 24px;
}

.input-text {
  width: 302px;
  border-radius: 5px;
  padding: 3px 5px;
  border: 1px solid var(--S-PardoGrisaceo);
}

.input-text:focus {
  border: none;
  border: 0;
  outline: none;
}

#pageSize {
  max-width: 64px;
}

@media (min-width: 320px) and (max-width: 768px) {
  .td-hide-sm {
    display: none;
  }

  .input-text {
    width: 100%;
  }
  .per-page {
    width: 100%;
  }
  .table-filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .table-wrap th:nth-child(3),
  .table-wrap td:nth-child(3) {
    width: auto; /* deja que el layout se ajuste */

    white-space: normal;
    overflow-wrap: anywhere; /* wrap agresivo en palabras largas */
  }
}
.btn-small {
  display: none;
}

/* Móvil: que NO se estire */
@media (max-width: 768px) {
  .table-wrap {
    overflow-x: hidden; /* opcional (si ya no querés scroll horizontal) */
  }

  .table-wrap table {
    min-width: 0 !important; /* 🔥 clave: quita el min-width */
    width: 100% !important;
    table-layout: fixed; /* 🔥 clave: el contenido no manda */
  }

  /* Permitir que el texto haga wrap */
  .table-wrap th,
  .table-wrap td {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Col 3 (Distrito) que no se infle */
  .table-wrap th:nth-child(3),
  .table-wrap td:nth-child(3) {
    width: 100% !important; /* ajustá 40–55 */
  }

  /* Col 4 (Acción) para que no empuje */
  .table-wrap th:nth-child(4),
  .table-wrap td:nth-child(4) {
    width: 30% !important; /* ajustá según botón */
  }

  /* Botón: quitar nowrap que empuja ancho */
  .table-wrap .btn {
    white-space: normal !important;
    min-width: 0 !important;
    width: 100%; /* opcional: botón ocupa la celda */
  }

  .btn-small {
    display: flex;
    max-width: max-content;
  }

  .flex-sm-ver {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
}