/* ══════════════════════════════════════════════════════════
   RESPONSIVE — piTPVia
   Breakpoints por ANCHURA:
     xs  < 900px  → 800×450, 800×600
     sm  900-1100 → 1024×cualquiera
     md  1100-1500 → 1280×768
     lg  ≥ 1500  → 1920×1080
   Breakpoints por ALTURA (se combinan con los anteriores):
     short  < 520px → 800×450, 1024×550
     medium 520-680 → 800×600, 1024×768, 1280×768
     tall   > 680   → 1024×800+, 1920×1080
   ══════════════════════════════════════════════════════════ */

/* ─── xs: anchura ≤ 900px (800×cualquiera) ─── */
@media (max-width: 900px) {
  #topbar { height: 40px; padding: 4px 10px; }
  #topbar .logo { font-size: 1.05rem; }
  .pill { padding: 3px 8px; font-size: .72rem; }
  .tab-btn { padding: 6px 13px; font-size: .8rem; }

  #tpv-layout { grid-template-columns: 280px 1fr 120px; }

  #panel-familias { padding: 5px 4px; gap: 4px; }
  .btn-familia { padding: 10px 5px; font-size: .78rem; min-height: 46px; }

  .btn-articulo { min-height: 62px; font-size: .8rem; }

  #info-tarjeta { padding: 4px 8px; gap: 5px; }
  .info-chip { font-size: .68rem; padding: 2px 7px; }

  .linea-row { font-size: .75rem; padding: 4px 6px; }
  .linea-cant { font-size: .78rem; }
  .linea-precio { font-size: .71rem; }
  .linea-importe { font-size: .75rem; }

  #barra-calc { padding: 5px 6px 3px; gap: 4px; }
  #txt-calc { width: 52px; font-size: .95rem; }
  #txt-comentario { font-size: .74rem; }
  #txt-precio { width: 60px; font-size: .82rem; }

  .btn-accion { padding: 8px 3px; font-size: .68rem; }
  #barra-acciones { gap: 4px; padding: 5px 6px; }

  #txt-total { font-size: 1.3rem; }
  #btn-cobrar { padding: 10px 14px; font-size: .9rem; }
}

/* ─── xs + altura muy baja (800×450, 1024×550) ─── */
@media (max-height: 520px) {
  #topbar { height: 36px; padding: 3px 10px; }
  .tab-btn { padding: 4px 12px; font-size: .78rem; }
  #info-tarjeta { padding: 3px 8px; }
  .info-chip { font-size: .65rem; padding: 1px 6px; }
  .linea-row { padding: 3px 6px; font-size: .73rem; }
  .btn-accion { padding: 6px 3px; font-size: .65rem; }
  #barra-acciones { padding: 4px 5px; gap: 3px; }
  #barra-calc { padding: 4px 6px 2px; }
  #barra-total { padding: 5px 8px; }
  #txt-total { font-size: 1.15rem; }
  #btn-cobrar { padding: 7px 12px; font-size: .82rem; }
  .btn-familia { min-height: 40px; padding: 8px 4px; font-size: .74rem; }
  .btn-articulo { min-height: 52px; font-size: .76rem; }
}

/* ─── sm: 900-1100px (1024×cualquiera) — ya es el base, solo ajustes de altura ─── */
@media (min-width: 901px) and (max-width: 1100px) {
  /* Layout base ya configurado para 1024 */
}

/* ─── sm + altura corta (1024×550) ─── */
@media (min-width: 901px) and (max-width: 1100px) and (max-height: 580px) {
  #topbar { height: 38px; padding: 3px 12px; }
  .tab-btn { padding: 5px 15px; font-size: .82rem; }
  .linea-row { padding: 3px 8px; }
  .btn-accion { padding: 7px 4px; font-size: .69rem; }
}

/* ─── md: 1100-1499px (1280×768) ─── */
@media (min-width: 1100px) and (max-width: 1499px) {
  #topbar { height: 46px; }
  .pill { font-size: .8rem; padding: 4px 11px; }

  #tpv-layout { grid-template-columns: 470px 1fr 175px; }

  .btn-familia { padding: 13px 8px; font-size: .9rem; min-height: 56px; }
  .btn-articulo { min-height: 80px; font-size: .9rem; }

  .linea-row {
    grid-template-columns: 20px 1fr 34px 58px 62px;
    font-size: .83rem; padding: 6px 9px;
  }
  .linea-cant { font-size: .88rem; }
  .linea-precio { font-size: .79rem; }
  .linea-importe { font-size: .85rem; }

  .btn-accion { padding: 11px 5px; font-size: .78rem; }
  #txt-total { font-size: 1.7rem; }
  #btn-cobrar { padding: 13px 24px; font-size: 1rem; }
}

/* ─── lg: ≥ 1500px (1920×1080) ─── */
@media (min-width: 1500px) {
  #topbar { height: 54px; padding: 8px 20px; gap: 16px; }
  #topbar .logo { font-size: 1.4rem; }
  .pill { font-size: .85rem; padding: 5px 14px; }
  #reloj { font-size: 1rem; }
  .tab-btn { padding: 11px 28px; font-size: .95rem; }

  #tpv-layout { grid-template-columns: 580px 1fr 220px; }

  #panel-familias { padding: 10px 8px; gap: 8px; }
  .btn-familia { padding: 18px 10px; font-size: 1rem; min-height: 68px; }

  #panel-articulos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 14px; }
  .btn-articulo { min-height: 96px; font-size: .95rem; }

  #info-tarjeta { padding: 8px 14px; gap: 10px; }
  .info-chip { font-size: .82rem; padding: 4px 12px; }

  .linea-row {
    grid-template-columns: 22px 1fr 38px 64px 70px;
    font-size: .88rem; padding: 8px 12px;
  }
  .linea-cant { font-size: .95rem; }
  .linea-precio { font-size: .83rem; }
  .linea-importe { font-size: .9rem; }

  #barra-calc { padding: 10px 12px 6px; gap: 8px; }
  #txt-calc { width: 74px; font-size: 1.2rem; }
  #txt-comentario { font-size: .88rem; }
  #txt-precio { width: 84px; font-size: 1rem; }

  #barra-acciones { gap: 7px; padding: 8px 12px; }
  .btn-accion { padding: 13px 6px; font-size: .84rem; border-radius: 10px; }

  #barra-total { padding: 10px 14px; }
  #txt-total { font-size: 2rem; }
  #btn-cobrar { padding: 15px 30px; font-size: 1.1rem; border-radius: 12px; }
}