/*
 * Adaptación progresiva de base2 en escritorio (> 960 px). Las reglas solo se
 * activan por debajo de 1600 px de ancho o de 1000 px de alto; por encima, el
 * diseño original ya cabe y no se toca. Los tamaños usan clamp(): crecen con
 * el viewport y en su máximo coinciden con los valores originales.
 */

@media (min-width: 961px) and (max-width: 1599.98px), (min-width: 961px) and (max-height: 1000px) {
  /* ---------- Mi entidad: tamaños fluidos ---------- */
  .layout-main-body > .mt-5:has(#welcome) {
    margin-top: clamp(0.5rem, 3vh - 0.75rem, 3rem) !important;
    padding-bottom: clamp(0.5rem, 3vh - 0.75rem, 3rem) !important;
  }
  #welcome h4 {
    font-size: clamp(1.4rem, 0.8rem + 1.1vw, 2rem);
    margin-bottom: 0.25rem !important;
  }
  #welcome > div > h2 {
    font-size: clamp(1.5rem, min(2.6vw, 5.2vh), 3rem);
    line-height: 1.15;
    margin-top: clamp(0.5rem, 3vh - 0.75rem, 1.5rem) !important;
    margin-bottom: clamp(0.5rem, 3vh - 0.75rem, 1.5rem) !important;
  }
  #welcome .spacingTop,
  #welcome.is-visible .spacingTop {
    margin-top: clamp(0.75rem, 3vh - 0.6rem, 1.5rem);
  }
  #welcome .background-card .list-group-item {
    padding-top: clamp(0.35rem, 1.6vh - 0.35rem, 0.75rem) !important;
    padding-bottom: clamp(0.35rem, 1.6vh - 0.35rem, 0.75rem) !important;
  }
  #welcome.is-visible .background-card .bar-2 .py-2 {
    padding-top: clamp(0.5rem, 1.6vh - 0.2rem, 0.9rem) !important;
    padding-bottom: clamp(0.5rem, 1.6vh - 0.2rem, 0.9rem) !important;
  }
  #welcome.is-visible [id^='reporte_'] {
    margin-top: clamp(0.6rem, 2vh - 0.4rem, 1rem) !important;
  }

  /* Filas de las tarjetas en flex: el número nunca pisa el texto. */
  #welcome .container-status .row {
    flex-wrap: nowrap;
    align-items: center;
  }
  #welcome .container-status .row > .col-7 {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding-right: 0.25rem;
  }
  #welcome .container-status .row > .col-5 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 0.25rem;
  }
  #welcome .container-status .row p {
    margin-bottom: 0;
  }
  #welcome .container-status .row p,
  #welcome .container-status .row a {
    font-size: clamp(0.875rem, 0.4rem + 0.75vw, 1.05rem);
  }
  #welcome .container-status .colorTextGreenCard {
    align-items: center;
  }
  #welcome .container-status .colorTextGreenCard p.ml-3 {
    margin-left: 0.5rem !important;
  }
  #welcome .background-card .colorTextGreenCard .material-icons {
    font-size: clamp(1.2rem, 0.6rem + 0.9vw, 1.5rem);
  }
  #welcome .background-card .list-group-item {
    padding-left: clamp(0.5rem, 1vw - 0.2rem, 1.25rem);
    padding-right: clamp(0.5rem, 1vw - 0.2rem, 1.25rem);
  }
  #welcome .background-card .bar-2 > div {
    align-items: center;
  }
  #welcome .background-card .bar-2 h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.5rem) !important;
    margin-bottom: 0;
  }
  #welcome .background-card .bar-2 p {
    font-size: clamp(0.82rem, 0.4rem + 0.6vw, 1rem);
    line-height: 1.2;
    margin-bottom: 0;
  }
  #welcome .background-card .bar-2 p.ml-3 {
    margin-left: 0.5rem !important;
  }
  #welcome [id^='reporte_'] .btn {
    font-size: clamp(0.875rem, 0.45rem + 0.6vw, 1.1666666667rem);
    white-space: normal;
    line-height: 1.15;
  }
}

@media (min-width: 961px) and (max-width: 1599.98px) {
  /* ---------- Sidebar: ancho acotado en lugar del 16,67 % de col-lg-2 ---------- */
  #view-desktop > .row > #navbarOpenAuth,
  #view-desktop > .row > #navbarOpenPublic {
    flex: 0 0 clamp(200px, 16vw, 260px);
    max-width: clamp(200px, 16vw, 260px);
  }
  #view-desktop > .row > #content {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
  }
  nav .list-group a {
    font-size: clamp(0.82rem, 0.45rem + 0.45vw, 1rem);
  }
  nav .list-group .list-group-item {
    padding: clamp(0.25rem, 1vh - 0.1rem, 0.5rem) 0.75rem;
  }
  nav .list-group .list-group-item .material-icons {
    font-size: 1.3rem;
  }
  nav .titleNavItem {
    font-size: 1.05rem;
  }
  nav .spacingNavItem {
    margin-top: 1vh;
  }
  nav .linkContact {
    margin: 0.5vh 0.5vw 0 0;
  }
  nav .textaditional {
    font-size: 0.75rem;
  }
  nav .nav-directorio h3 {
    font-size: 1.6rem;
  }
  nav .nav-directorio .material-icons {
    font-size: 3rem;
  }
  nav .nav-directorio .ml {
    margin-left: 1vw;
  }
  .btn-manuales {
    padding: 0 0.5rem;
  }

  /* ---------- Encabezado: el título usa todo el ancho libre ---------- */
  #backgroundheader {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #backgroundheader .row {
    flex-wrap: nowrap;
  }
  #backgroundheader .row > .col-lg-9 {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    padding-left: 1.5rem;
  }
  #backgroundheader .row > .col-lg-2 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  #backgroundheader .title_App {
    font-size: clamp(1.2rem, 0.5rem + 1.2vw, 1.75rem);
    line-height: 1.15;
    margin-bottom: 0;
  }
  #backgroundheader .dataUser h2 {
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
  }
  #backgroundheader .dataUser h3 {
    font-size: 0.9rem;
    margin-bottom: 0;
  }

  /* ---------- Usuarios: celdas compactas y texto largo que se parte ---------- */
  #tableAll #users_table th,
  #tableAll #users_table td {
    padding: 0.5rem 0.4rem;
    vertical-align: middle;
  }
  #tableAll #users_table .textContentTable {
    font-size: 0.85rem;
  }
  #tableAll #users_table td:nth-child(5),
  #tableAll #users_table td:nth-child(6) {
    overflow-wrap: anywhere;
  }
  #tableAll #users_table th:nth-child(7),
  #tableAll #users_table td:nth-child(7) {
    min-width: 6rem !important;
  }
}

@media (min-width: 961px) and (max-width: 1099.98px) {
  #welcome .container-fluid[data-step='2'] {
    padding-left: 0;
    padding-right: 0;
  }
  #welcome .container-fluid[data-step='2'] .px-2 {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }
  #tableAll #users_table th,
  #tableAll #users_table td {
    padding: 0.4rem 0.3rem;
  }
  #tableAll #users_table .textContentTable {
    font-size: 0.8rem;
  }
}

/* Si aun así no cabe, se desplaza en lugar de recortarse. */
@media (min-width: 961px) {
  .layout-main-body:has(#welcome) {
    overflow-y: auto;
  }
  #tableAll {
    overflow-x: auto;
  }
}