/* Operaciones · Thelsa — ajustes de pantalla (≤1100px y ≤640px) — SIEMPRE al final */

  @media (max-width: 1100px) {
    .form-grid { grid-template-columns: repeat(6, 1fr); }
    .field.col-3 { grid-column: span 3; } .field.col-4, .field.col-5, .field.col-6 { grid-column: span 6; }
    .capacity-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Teléfono (14-sep-2026): que todo quepa en 375 px sin desplazamiento lateral.
     Las tablas anchas se deslizan dentro de su tarjeta; los formularios van a dos columnas;
     los menús desplegables se abren pegados al botón con posición fija (ver menuTopMovil). */
  @media (max-width: 640px) {
    header.topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
    .brand { gap: 8px; }
    .brand-logo img { height: 26px; }
    .brand-sub { display: none; }
    .mod-switch button.cur { padding: 4px 8px; font-size: 11px; }
    .topbar-right { gap: 8px; font-size: 11px; flex-wrap: wrap; margin-left: auto; }
    .topbar-right .solo-escritorio { display: none; }
    .corte-chip { white-space: normal; max-width: 100%; }
    nav.tabs { padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    nav.tabs::-webkit-scrollbar { display: none; }
    nav.tabs button { padding: 11px 11px; font-size: 12.5px; }
    nav.tabs .menu-wrap { position: static; }
    nav.tabs .menu-panel, .notif-panel, .mod-panel { position: fixed; left: 8px; right: 8px; top: var(--menu-top, 100px);
      min-width: 0; max-width: none; max-height: calc(100dvh - var(--menu-top, 100px) - 12px); overflow-y: auto; }
    main { padding: 14px 12px; }
    .page-head { margin-bottom: 14px; gap: 10px; }
    .page-head > div { min-width: 0; max-width: 100%; }
    .page-title { font-size: 21px; }
    .page-sub { font-size: 12.5px; }
    .card-head, .card-body { padding: 12px; }
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* minmax(0): a 320 px los campos de fecha no empujan la página */
    .field.col-1, .field.col-2, .field.col-3 { grid-column: span 1; }
    .field.col-4, .field.col-5, .field.col-6, .field.col-12 { grid-column: span 2; }
    input, select, textarea { font-size: 16px; min-width: 0; } /* con 16 px el iPhone no hace zoom al enfocar; min-width 0 para que quepan en su columna */
    .filter-bar { padding: 10px 12px; gap: 8px; }
    .filter-bar label { flex-basis: 100%; margin-bottom: -4px; }
    .filter-bar select, .filter-bar input { width: 100%; min-width: 0; font-size: 14px; }
    .filter-bar .field, .filter-bar .btn { width: 100%; justify-content: center; }
    .filter-spacer { display: none; }
    .seg { width: 100%; }
    .seg button { flex: 1 1 auto; padding: 6px 8px; }
    .capacity-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card:has(.data-table), .card:has(.cap-grid), .card:has(.mat) { overflow-x: auto; }
    .data-table { font-size: 12.5px; min-width: 640px; } /* ancho mínimo: la tarjeta se desliza en vez de aplastar las columnas */
    .data-table thead th, .data-table tbody td { padding: 8px 8px; }
    .detail-panel .data-table, .modal .data-table { min-width: 0; } /* las tablas chicas del detalle sí caben */
    .picker-row { flex-wrap: wrap; row-gap: 3px; }
    .picker-row .nom { flex: 1 1 auto; white-space: normal; }
    .picker-row .pill { flex-basis: 100%; margin-left: 26px; white-space: normal; font-size: 10px; width: fit-content; }
    #hojaTabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #hojaTabla table { min-width: 1150px; }
    .detail-panel { width: 100vw; }
    .detail-head, .detail-body, .detail-foot { padding-left: 14px; padding-right: 14px; }
    .modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .modal.modal-ancho { width: 100vw; }
    .modal-head, .modal-body, .modal-foot { padding-left: 14px; padding-right: 14px; }
    .modal-foot { flex-wrap: wrap; }
    .tb-graficas { grid-template-columns: 1fr; }
    .tb-calor { overflow-x: auto; padding-bottom: 4px; } /* el mapa de calor del mes se desliza en vez de desbordar la página */
    .tb-mes-val { width: auto; max-width: 62%; white-space: normal; line-height: 1.35; } /* a 320 px el porcentaje y la etiqueta caben en dos líneas */
    .edit-aviso { flex-wrap: wrap; }
  }
  /* Plantilla del año minimizada mientras la capacidad sale del personal */
  #cardPlantAnio.plant-off > div:not(.card-head), #cardPlantAnio.plant-off #plantBranchSelect, #cardPlantAnio.plant-off #plantMonth { display:none !important; }
  #cardPlantAnio.plant-off #btnPlantVer, #cardPlantAnio.plant-off #plantEstado { display:inline-flex !important; }
  #cardPlantAnio.plant-off h2 { color:var(--ink-soft); }