/* ==========================================================================
   responsive-hd.css — sistema responsive y de alta resolución (global)
   Cargado DESPUÉS de material-dashboard.min.css, por lo que gana en overrides.
   Objetivo: escala visual consistente en FHD / 2K / 4K. En pantallas grandes el
   contenido escala de forma proporcional (tipo zoom) subiendo el font-size raíz,
   manteniendo la jerarquía; en laptop/FHD queda igual.
   Solo layout/visual — no cambia lógica, JS, endpoints ni comportamiento.
   ========================================================================== */

:root {
  /* ── Escala de spacing (rem) — tokens reutilizables ── */
  --sp-1: 0.25rem;   /* 4px  */
  --sp-2: 0.5rem;    /* 8px  */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */

  /* ── Radios: ver escala centralizada --ds-r-* en design-system.css ── */

  /* ── Tipografía fluida (tokens para adoptar en componentes nuevos) ── */
  --fs-page-title: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  --fs-section:    clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
  --fs-body:       clamp(0.85rem, 0.82rem + 0.1vw, 0.95rem);

  /* Anchos máximos razonables de campos de formulario */
  --field-max: 34rem;
  --field-date-max: 15rem;
  --textarea-max: 60rem;
}

/* ==========================================================================
   0) Escalado en alta resolución — sube el font-size raíz de forma gradual para
   que TODO el sistema en rem (design system, Material Dashboard, layout) escale
   como un zoom proporcional, sin cambiar la jerarquía. Escala CONTINUA: reduce en
   pantallas chicas y crece en grandes. ~14.5px en 960, ~16px en 1366, ~17px en
   1470, ~19px en 1920, ~22px en 2560, 24px (máx). Mínimo 13.5px.
   ========================================================================== */
html { font-size: clamp(13.5px, 9.8px + 0.49vw, 24px); }

/* ==========================================================================
   1) Contenedor de contenido — límite proporcional (en rem, escala con el
   font-size) para aprovechar la pantalla en 2K/4K sin líneas excesivamente
   largas. En laptop/FHD los caps no aplican (el área útil es menor).
   ========================================================================== */
/* La plantilla base envuelve el contenido en .content-wrapper, que en style.css /
   macos-chrome-fixes.css lo limita a 1200–1600px y lo centra, dejando mucho
   espacio a los lados. Se libera a ancho completo (con un padding lateral
   discreto) para TODAS las pantallas —mismo criterio que ya usaba interacciones/
   resultados—. Los caps de alta resolución de más abajo siguen aplicando. */
.main-content > .content-wrapper {
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 1rem;
}

.main-content .container-fluid {
  width: 100%;
}

@media (min-width: 2200px) {
  .main-content .container-fluid { max-width: 110rem; margin-inline: auto; }
}
@media (min-width: 2560px) {
  .main-content .container-fluid { max-width: 125rem; }
}
@media (min-width: 3200px) {
  .main-content .container-fluid { max-width: 145rem; }
}
@media (min-width: 3840px) {
  .main-content .container-fluid { max-width: 160rem; }
}

/* Nunca provocar scroll horizontal por anchos fijos accidentales. */
.main-content { overflow-x: clip; }

/* ==========================================================================
   2) Grids fluidos — más columnas cuando hay espacio, sin estirar cada tarjeta
   Las pantallas rediseñadas ya usan repeat(auto-fill, minmax(...)); con el
   contenedor acotado, en 2K/4K añaden columnas en vez de ensanchar las cartas.
   Se homogeneiza el ancho mínimo de columna en los grids conocidos.
   ========================================================================== */
.coy-grid, .cd-grid, .rm-mini-grid, .rm-totals-grid, .rm-nsent-grid,
.gia-stats, .gia-grid, .bots-grid, .gx-grid, .imp-grid, .kpi-grid,
.net-grid, .pub-grid, .sg-stats, .stat-grid, .tia-stats {
  gap: clamp(0.75rem, 0.6rem + 0.4vw, 1.25rem);
}

/* ── Utilidad auto-fit: convierte una fila de cards de Bootstrap en grid fluido.
   Se añade la clase al contenedor (en vez de/junto a .row). Neutraliza el ancho,
   márgenes y gutters de los .col-* hijos para que el grid controle el layout.
   Con auto-fit, en 2K/4K se añaden columnas en lugar de quedar fija la rejilla
   de 12; en móvil colapsa según --afg-min. Tunear con --afg-min / --afg-gap. */
.autofit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--afg-min, 15rem), 1fr));
  gap: var(--afg-gap, clamp(0.75rem, 0.6rem + 0.4vw, 1.25rem));
}
.autofit-grid--sm { --afg-min: 11rem; }
.autofit-grid--lg { --afg-min: 22rem; }
.autofit-grid > * {
  max-width: none !important;
  flex: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   3) Formularios — que no ocupen todo el ancho en monitores grandes
   Se acotan campos que tienden a estirarse. Los formularios en grid
   (col-md-*, .row) ya quedan limitados por el contenedor.
   ========================================================================== */
.main-content input[type="date"] { max-width: var(--field-date-max); }
.main-content textarea.form-control,
.main-content .input-group-outline textarea { max-width: var(--textarea-max); width: 100%; }

/* Excepción: textareas de instrucciones (TIA/TIA+ y Comment Analyzer) abarcan todo
   el ancho del contenedor, sin el cap general. */
.main-content #instruccionesClusters,
.main-content #instruccionesTemas,
.main-content #instruccionesAdicionales,
.main-content #prompt_lineas,
.main-content #prompt_lineas_cs,
.main-content #prompt_adicional { max-width: none; }

/* Filtros de fecha de los historiales rediseñados: ya son flex; se limitan los
   campos para que no crezcan de más en 4K. Prefijo .main-content para ganar
   al {% block css %} de cada plantilla (igual especificidad, carga posterior). */
.main-content .th-date-field input, .main-content .gr-date-field input,
.main-content .ih-date-field input, .main-content .rp-date-field input,
.main-content .sm-date-field input, .main-content .sc-date-field input,
.main-content .cx-date-field input, .main-content .bc-date-field input,
.main-content .fbc-date-field input, .main-content .pc-date-field input {
  max-width: 16rem;
}

/* ==========================================================================
   4) Tablas — overflow horizontal en pantallas pequeñas (defensa).
   El estiramiento en 4K ya lo resuelve el cap del contenedor (sección 1);
   no se fuerzan anchos de columna para no romper estructuras específicas.
   ========================================================================== */
.th-table-wrap, .gr-table-wrap, .ih-table-wrap, .rp-table-wrap,
.sm-table-wrap, .sc-table-wrap, .cx-table-wrap, .fbc-table-wrap,
.pc-table-wrap, .rx-table-wrap, .bc-table-wrap, .table-responsive {
  overflow-x: auto;
}

/* ==========================================================================
   5) Sidebar — ancho estándar de Material Dashboard.
   ========================================================================== */
@media (min-width: 1200px) {
  /* Menú ~12% más chico en general (ancho, letras e iconos) para que no se vea grande.
     El offset de .main-content se ajusta en sincronía para que no quede hueco. */
  .sidenav { width: 12.8rem; }                 /* antes 15.625rem (~82%) */
  body.has-sidenav .main-content {
    width: calc(100% - 12.8rem);
    margin-left: 12.8rem;
  }
  .sidenav .nav-link-text { font-size: 0.9em; }   /* letras del menú -10% */
}

/* Íconos del menú en rem para que escalen con el zoom del root. El CSS remoto de
   Google fija `.material-symbols-outlined` en 24px (px), así que no escalaban y
   en 2K/4K se veían chicos frente al resto. 1.5rem = 24px al root base. */
/* Caja de ancho fijo y centrada para que TODOS los iconos del menú queden
   alineados (misma columna) y a la misma altura del texto, sin importar el ancho
   propio de cada glifo. */
.sidenav .material-symbols-outlined,
.sidenav .material-icons,
.sidenav .material-icons-round {
  font-size: 1.22rem;
  line-height: 1;
  width: 1.6rem;
  min-width: 1.6rem;
  text-align: center;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ==========================================================================
   6) Responsive pequeño — laptop / tablet / móvil
   ========================================================================== */
@media (max-width: 991.98px) {
  /* En pantallas donde el sidebar se colapsa, el contenido usa todo el ancho */
  .main-content .container-fluid { max-width: none; }
}
@media (max-width: 575.98px) {
  /* Historiales rediseñados: filtros y encabezados apilados sin desbordar */
  .th-date-filter, .gr-date-filter, .ih-date-filter, .rp-date-filter,
  .sm-date-filter, .sc-date-filter, .cx-date-filter, .pc-date-filter { align-items: stretch; }
  .th-date-field input, .gr-date-field input, .ih-date-field input,
  .rp-date-field input, .sm-date-field input, .sc-date-field input,
  .cx-date-field input, .pc-date-field input { max-width: none; width: 100%; }
}