/* TSigns: grillas de filtros y estados ocultos, 29/10/2026. */
@media screen {
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple .dashboard-toolbar[hidden] {
    display: none !important;
  }
  /* Órdenes: el JS mueve la búsqueda fuera de orders-filter-grid. */
  body.ts2 #appScreen #sentOrdersSection .ts-order-toolbar:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(160px, 220px) 40px;
    gap: 12px;
    align-items: end;
  }
  body.ts2 #appScreen #sentOrdersSection .ts-order-toolbar > :is(.orders-filter-search, .orders-sort-control) {
    min-width: 0;
    width: 100%;
    margin: 0;
  }
  body.ts2 #appScreen #sentOrdersSection .ts-order-toolbar > .orders-filter-search {
    grid-column: auto;
  }
  body.ts2 #appScreen #sentOrdersSection .ts-order-toolbar :is(input, select) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Consultas: búsqueda y acciones ocupan pistas estables. */
  body.ts2 #appScreen #contactQueries #cqTools:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 12px;
    align-items: end;
  }
  body.ts2 #appScreen #contactQueries #cqTools > .cq-search {
    width: 100%;
    min-width: 0;
  }
  body.ts2 #appScreen #contactQueries #cqTools > .ts-toolbar:not([hidden]) {
    display: grid;
    grid-template-columns: auto minmax(170px, 220px) 40px;
    gap: 12px !important;
    min-width: 0;
  }
  body.ts2 #appScreen #contactQueries #cqTools > .ts-toolbar:has(> #cqOrder[hidden]) {
    grid-template-columns: auto 40px;
  }
  body.ts2 #appScreen #contactQueries #cqOrder:not([hidden]) {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }
  body.ts2 #appScreen #contactQueries #cqPeriod:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 240px));
    gap: 12px;
    align-items: end;
  }
  body.ts2 #appScreen #contactQueries #cqPeriod > .cq-field {
    min-width: 0;
    width: 100%;
  }

  /* Gastos: el CSS actual declara pistas pero la capa simple fuerza flex. */
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple .dashboard-toolbar:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) !important;
    gap: 12px;
    align-items: end;
  }
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple .dashboard-toolbar.has-custom-dates:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 210px) repeat(2, minmax(0, 190px)) !important;
  }
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple .dashboard-toolbar > .field:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: 6px;
  }
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple .dashboard-toolbar :is(select, input) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body.ts2 #appScreen #renditionsSection .renditions-toolbar .field {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0 !important;
  }
  body.ts2 #appScreen #renditionsSection .renditions-toolbar .field > label {
    margin: 0 !important;
  }
}

/* Rendiciones conserva el orden de teclado y DOM: el grupo Desde/Hasta
 * ocupa dos pistas contiguas cuando está activo, sin mínimos que desborden.
 * La cantidad de pistas se adapta al ancho REAL del contenedor.
 */
@media screen and (min-width: 851px) {
  body.ts2 #appScreen #renditionsSection .renditions-toolbar:not([hidden]) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    align-items: end;
  }
  body.ts2 #appScreen #renditionsSection .renditions-toolbar > .field {
    min-width: 0;
  }
  body.ts2 #appScreen #renditionsSection .renditions-custom-dates.active:not([hidden]) {
    grid-column: span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: 12px;
  }
  body.ts2 #appScreen #renditionsSection .renditions-toolbar :is(input, select) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 1100px) {
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple .dashboard-toolbar.has-custom-dates:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 1000px) {
  body.ts2 #appScreen #contactQueries #cqTools:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
  body.ts2 #appScreen #contactQueries #cqTools > .ts-toolbar:not([hidden]) {
    grid-template-columns: auto minmax(0, 1fr) 40px;
  }
  body.ts2 #appScreen #contactQueries #cqTools > .ts-toolbar:has(> #cqOrder[hidden]) {
    grid-template-columns: auto 40px;
    justify-content: end;
  }
}

@media screen and (max-width: 767px) {
  body.ts2 #appScreen #sentOrdersSection .ts-order-toolbar:not([hidden]) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  body.ts2 #appScreen #sentOrdersSection .ts-order-toolbar > .orders-filter-search {
    grid-column: 1 / -1;
  }
  body.ts2 #appScreen #contactQueries #cqTools > .ts-toolbar:not([hidden]) {
    grid-template-columns: auto minmax(0, 1fr) 44px;
  }
  body.ts2 #appScreen #contactQueries #cqTools > .ts-toolbar:has(> #cqOrder[hidden]) {
    grid-template-columns: auto 44px;
  }
  body.ts2 #appScreen #contactQueries #cqPeriod:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple .dashboard-toolbar:not([hidden]),
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple .dashboard-toolbar.has-custom-dates:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Candidato posterior a design-security-20261029-v1. No publicado.
 * Las cuatro métricas de Rendiciones usan 4 / 2 / 1 pistas según el ancho
 * de su propio espacio. No modifica importes, input values ni visibilidad.
 */
@media screen {
  body.ts2 #appScreen #renditionsSection .renditions-shell {
    container: ts-renditions-summary / inline-size;
  }
  body.ts2 #appScreen #renditionsSection .renditions-metrics:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
  }
  body.ts2 #appScreen #renditionsSection .renditions-metrics > .renditions-metric {
    min-width: 0;
  }
  body.ts2 #appScreen #renditionsSection .renditions-metric :is(span, strong, small) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  body.ts2 #appScreen #renditionsSection .renditions-metric strong {
    white-space: normal;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
  }
  body.ts2 #appScreen #renditionsSection .renditions-rate-input {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
  }
}

@container ts-renditions-summary (min-width: 960px) {
  body.ts2 #appScreen #renditionsSection .renditions-metrics:not([hidden]) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@container ts-renditions-summary (max-width: 479px) {
  body.ts2 #appScreen #renditionsSection .renditions-metrics:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Navegadores sin container queries conservan una distribución conservadora. */
@supports not (container-type: inline-size) {
  @media screen and (min-width: 1440px) {
    body.ts2 #appScreen #renditionsSection .renditions-metrics:not([hidden]) {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }
  @media screen and (max-width: 700px) {
    body.ts2 #appScreen #renditionsSection .renditions-metrics:not([hidden]) {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
}

/* Candidato independiente posterior a design-security-20261029-v1.
 * Sólo actúa cuando la advertencia Sin clasificación MC / FC no tiene [hidden].
 * Conserva el estado habitual de tres métricas y todos los importes/avisos.
 */
@media screen {
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple:has(> .dashboard-metrics > #expenseUnclassifiedCard:not([hidden])) {
    container: ts-expenses-summary / inline-size;
  }
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple > .dashboard-metrics:has(> #expenseUnclassifiedCard:not([hidden])) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
  }
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple > .dashboard-metrics:has(> #expenseUnclassifiedCard:not([hidden])) > .dashboard-metric-card {
    min-width: 0;
  }
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple > .dashboard-metrics:has(> #expenseUnclassifiedCard:not([hidden])) > .dashboard-metric-card > :is(span, strong, small) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple > .dashboard-metrics:has(> #expenseUnclassifiedCard:not([hidden])) > .dashboard-metric-card > strong {
    white-space: normal;
    font-variant-numeric: tabular-nums;
  }
  @container ts-expenses-summary (min-width: 960px) {
    body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple > .dashboard-metrics:has(> #expenseUnclassifiedCard:not([hidden])) {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }
  @container ts-expenses-summary (max-width: 479px) {
    body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple > .dashboard-metrics:has(> #expenseUnclassifiedCard:not([hidden])) {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
}

/* Sin container queries, el navegador conserva dos pistas salvo en móvil.
 * Sin :has(), conserva íntegramente la cascada previa de Gastos.
 */
@supports not (container-type: inline-size) {
  @media screen and (min-width: 1440px) {
    body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple > .dashboard-metrics:has(> #expenseUnclassifiedCard:not([hidden])) {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }
  @media screen and (max-width: 700px) {
    body.ts2 #appScreen #dashboardExpensesPanel.expenses-simple > .dashboard-metrics:has(> #expenseUnclassifiedCard:not([hidden])) {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
}

/* Candidato independiente. Sólo corrige los dos conflictos medidos en Chrome.
 * No modifica mobile-ios.css, filas de estadísticas, datos ni acciones.
 */
@media screen and (max-width: 760px) {
  /* El adaptador iOS debe conservar la grilla propia de Consultas.
   * Las reglas existentes de grid-column mantienen Contacto, Detalle y
   * Acciones en una fila completa; data-label y el wrap no cambian.
   */
  body.ts2 #appScreen #contactQueries .cq-table.ios-mobile-table:not(.cq-stat-table) tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.ts2 #appScreen #contactQueries .cq-table.ios-mobile-table:not(.cq-stat-table) tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media screen and (min-width: 761px) and (max-width: 767px) {
  /* Aquí Unidades todavía conserva la tabla con encabezados visibles.
   * Restaurar el padding de escritorio evita el corrimiento de 12px.
   */
  body.ts2 #appScreen #unitsSection.un .un-table-wrap tbody td {
    padding: 14px 12px !important;
  }
}