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

  /* Teléfono (14-sep-2026): que todo quepa en 375 px sin desplazamiento lateral.
     Mismo criterio que el programador: tablas anchas se deslizan dentro de su tarjeta,
     formularios a dos columnas, filtros apilados. */
  @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; }
    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; }
    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, 1fr); gap: 10px; }
    .field.col-1, .field.col-2, .field.col-3 { grid-column: span 1; }
    .field.col-4, .field.col-5, .field.col-6, .field.col-7, .field.col-8, .field.col-9, .field.col-10, .field.col-11, .field.col-12 { grid-column: span 2; }
    input, select, textarea { font-size: 16px; } /* con 16 px el iPhone no hace zoom al enfocar */
    .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; }
    .card:has(.data-table), .card:has(.mat) { overflow-x: auto; }
    .data-table { font-size: 12.5px; min-width: 640px; }
    .data-table thead th, .data-table tbody td { padding: 8px 8px; }
    .detail-panel .data-table, .modal .data-table { min-width: 0; }
    .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; }
  }