/* ===== Diseño adaptable: celular y tableta (se carga al final para ajustar los demás estilos) ===== */
html { -webkit-text-size-adjust: 100%; }
main { max-width: min(1360px, 100%) !important; }   /* más ancho en pantallas grandes: la cartera tiene muchas columnas */
img, canvas, svg { max-width: 100%; }
body { overflow-x: hidden; }

@media (max-width: 900px) {
  header { padding: 12px 16px !important; gap: 10px; }
  header h1 { font-size: 16px; }
  header .subtitulo { display: none; }
  nav { padding: 0 6px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: sticky; top: 0; z-index: 40; }
  nav::-webkit-scrollbar { display: none; }
  .nav-btn { white-space: nowrap; padding: 13px 14px; flex: none; }
  main { padding: 14px 10px 40px; }
  .panel { padding: 16px 14px; border-radius: 12px; }
  #tarjetas-metricas { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  #vista-inicio > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .tarjeta-metrica { padding: 14px; } .tarjeta-metrica .valor { font-size: 21px; }
}

@media (max-width: 760px) {
  header #nombre-usuario-conectado { display: none; }
  input, select, textarea { font-size: 16px; }              /* evita el zoom automático de iOS al enfocar un campo */
  .buscador { flex-wrap: wrap; } .buscador input { flex: 1 1 100%; } .buscador button { flex: 1; min-height: 44px; }
  .fila-opciones { gap: 14px; }
  .barra-inferior { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-enviar { width: 100%; min-height: 48px; }
  .canal-btn { min-height: 42px; }
  .panel h2 { font-size: 13px; }

  /* tablas del panel como tarjetas */
  table.tabla-tarjetas, table.tabla-tarjetas tbody { display: block; width: 100%; margin-top: 0; }
  table.tabla-tarjetas thead { display: none; }
  table.tabla-tarjetas tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 2px; border-bottom: 1px solid var(--gris-borde); }
  table.tabla-tarjetas tr:hover td { background: transparent; }
  table.tabla-tarjetas td { display: block; border: none; padding: 0; text-align: left !important; min-width: 0; overflow-wrap: anywhere; }
  table.tabla-tarjetas td[data-label]::before { content: attr(data-label); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--gris-texto); margin-bottom: 2px; font-weight: 600; }
  table.tabla-tarjetas td.td-ancho, table.tabla-tarjetas td[colspan] { grid-column: 1 / -1; }
  table.tabla-tarjetas td input[type=checkbox] { width: 22px; height: 22px; }
  table.tabla-tarjetas td select { font-size: 16px; padding: 9px 8px; }

  /* lista de clientes de Facturación: 3 columnas */
  #tabla-clientes tr { grid-template-columns: repeat(3, 1fr); }
  #tabla-clientes td.col-chk { grid-column: 1 / 2; }
  #tabla-clientes td.col-acc { grid-column: 2 / -1; text-align: right !important; }
  #tabla-clientes td.col-acc button { font-size: 20px !important; padding: 4px 10px; }
  #tabla-clientes td.celda-monto { white-space: nowrap; }
}

@media (max-width: 420px) {
  .rp-seg button { padding: 9px 4px; font-size: 12.5px; }
  .cb-kpi .n { font-size: 19px; }
}