/* ============================================================
   Celular y tablet chica (hasta 760 px de ancho)

   Las mismas pantallas, acomodadas para usar con el pulgar:
   - la barra lateral pasa a ser la barra de abajo;
   - las tablas se leen como tarjetas;
   - los paneles ocupan la pantalla entera;
   - nada queda más ancho que la pantalla (sin desplazamiento de costado);
   - los campos usan 16 px o más: así el iPhone no hace zoom al tocarlos;
   - se respetan la muesca y la barra de gestos (safe-area).
   ============================================================ */

@media (max-width: 760px) {
  html, body { font-size: 16px; height: auto; min-height: 100%; }
  body { overflow-x: hidden; }

  button, input, select, textarea, .campo { font-size: 16px; }

  /* ---------------- barra superior ---------------- */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
    gap: 8px;
  }
  .marca { font-size: 17px; }
  .marca__comercio { margin-left: 8px; padding-left: 8px; font-size: 15px; }
  .badge { font-size: 12px; padding: 4px 9px; max-width: 46%; }

  /* ---------------- estructura: navegación abajo ---------------- */
  .layout { display: block; height: auto; }
  main { padding: 12px 12px calc(86px + env(safe-area-inset-bottom)); overflow: visible; }
  .pantalla { height: auto; }

  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    flex-direction: row; gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
  }
  .nav { flex: 1 1 0; min-width: 0; padding: 6px 2px; gap: 2px; font-size: 11px; white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis; }
  .nav__ico { font-size: 22px; }
  .nav--abajo { margin-top: 0; font-size: 0; }
  .nav--abajo .nav__ico { font-size: 22px; }
  .nav--abajo::after { content: "Ajustes"; font-size: 11px; }     /* «Configuración» no entra en la barra */

  .banda { margin-bottom: 10px; padding: 10px 12px; font-size: 15px; }

  /* ---------------- Vender ---------------- */
  .pantalla--vender { display: flex; flex-direction: column; gap: 12px; height: auto; }
  .columna-buscador { height: auto; gap: 10px; }
  .buscador { padding: 12px 14px; font-size: 17px; }
  .resultados { max-height: 46vh; padding-right: 0; }
  .producto { padding: 10px 12px; gap: 2px 10px; }
  .producto__nombre, .producto__precio { font-size: 16px; }
  .producto__categoria, .producto__stock { font-size: 13px; }

  .carrito { max-height: none; }
  .carrito__titulo { padding: 12px 14px; font-size: 17px; }
  .carrito__items { overflow: visible; padding: 4px 8px; }
  .renglon__controles { flex-wrap: wrap; }
  .carrito__pie { padding: 12px 14px; border-radius: 0 0 var(--radio) var(--radio); }
  .total strong { font-size: 28px; }

  /* ---------------- botones y campos ---------------- */
  .btn { min-height: 48px; padding: 0 14px; font-size: 16px; }
  .mini { padding: 8px 12px; font-size: 15px; }
  .contador__btn, .quitar, .icono { width: 44px; height: 44px; }
  .campo { padding: 11px 12px; }

  /* ---------------- barras de herramientas ---------------- */
  .barra-herramientas { gap: 8px; }
  .campo--busca { flex: 1 1 100%; }
  .barra-herramientas .btn { flex: 1 1 auto; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .filtro { flex: none; padding: 8px 12px; font-size: 15px; }

  /* ---------------- tablas principales: tarjetas ---------------- */
  .tabla-caja { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .tabla:not(.tabla--compacta) thead { display: none; }
  .tabla:not(.tabla--compacta),
  .tabla:not(.tabla--compacta) tbody,
  .tabla:not(.tabla--compacta) tr,
  .tabla:not(.tabla--compacta) td { display: block; width: 100%; }
  .tabla:not(.tabla--compacta) tr {
    position: relative; margin-bottom: 10px; padding: 10px 12px;
    background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  }
  .tabla:not(.tabla--compacta) td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 4px 0; border: 0; text-align: left; min-height: 0;
  }
  .tabla:not(.tabla--compacta) td:first-child { display: block; padding-right: 0; }
  .tabla:not(.tabla--compacta) td:empty { display: none; }
  .tabla:not(.tabla--compacta) td::before { color: var(--tinta-suave); font-size: 14px; font-weight: 400; flex: none; }
  .tabla:not(.tabla--compacta) .num { text-align: right; }
  .tabla:not(.tabla--compacta) .acciones { justify-content: flex-end; }
  .fila--bajo, .fila--agotado { border-left-width: 5px !important; }
  .fila--bajo { border-left-color: var(--ambar) !important; }
  .fila--agotado { border-left-color: var(--rojo) !important; }
  .fila--bajo td:first-child, .fila--agotado td:first-child { box-shadow: none; }
  .fila-producto__nombre { font-size: 17px; }

  /* rótulos de cada dato (las tablas no tienen encabezado a la vista) */
  #pantalla-stock td:nth-child(2)::before { content: "Categoría"; }
  #pantalla-stock td:nth-child(3)::before { content: "Stock"; }
  #pantalla-stock td:nth-child(4)::before { content: "Precio"; }
  #pantalla-clientes td:nth-child(2)::before { content: "Documento"; }
  #pantalla-clientes td:nth-child(3)::before { content: "Condición IVA"; }
  #pantalla-clientes td:nth-child(4)::before { content: "Cuenta"; }
  #pantalla-clientes td:nth-child(5)::before { content: "Domicilio"; }
  #pantalla-cuentas td:nth-child(2)::before { content: "Estado"; }
  #pantalla-cuentas td:nth-child(3)::before { content: "Debe"; }
  #pantalla-cuentas td:nth-child(4)::before { content: "A favor"; }
  #pantalla-cuentas td:nth-child(5)::before { content: "Facturas impagas"; }
  #pantalla-cuentas td:nth-child(6)::before { content: "Deuda más vieja"; }
  .celda-editable { width: 120px; font-size: 17px; }
  .confirmar { flex-wrap: wrap; justify-content: flex-start; }

  /* tablas chicas dentro de paneles: se deslizan de costado dentro de su caja */
  .tabla--compacta { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .tabla--compacta th, .tabla--compacta td { padding: 8px 10px; font-size: 14px; }

  /* La cuenta del cliente: facturas impagas y movimientos como tarjetas. Deslizar la tabla de costado
     no se descubre en el teléfono y parecía que los importes estaban cortados. */
  #panel-cuenta .tabla--compacta { display: block; overflow: visible; white-space: normal; }
  #panel-cuenta .tabla--compacta thead { display: none; }
  #panel-cuenta .tabla--compacta tbody,
  #panel-cuenta .tabla--compacta tr,
  #panel-cuenta .tabla--compacta td { display: block; width: 100%; }
  #panel-cuenta .tabla--compacta tr {
    margin-bottom: 8px; padding: 8px 12px;
    background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  }
  #panel-cuenta .tabla--compacta td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 3px 0; border: 0; font-size: 15px; text-align: left;
  }
  #panel-cuenta .tabla--compacta td:empty { display: none; }
  #panel-cuenta .tabla--compacta td::before { color: var(--tinta-suave); font-size: 14px; flex: none; }
  #cuenta-pendientes td:first-child { display: block; }
  #cuenta-pendientes td:nth-child(2)::before { content: "Fecha"; }
  #cuenta-pendientes td:nth-child(3)::before { content: "Antigüedad"; }
  #cuenta-pendientes td:nth-child(4)::before { content: "Total"; }
  #cuenta-pendientes td:nth-child(5)::before { content: "Pagado"; }
  #cuenta-pendientes td:nth-child(6)::before { content: "Debe"; }
  #cuenta-pendientes td:nth-child(7) { justify-content: flex-end; }
  #cuenta-movimientos td:nth-child(1) { display: block; color: var(--tinta-suave); font-size: 14px; }
  #cuenta-movimientos td:nth-child(2) { display: block; font-weight: 600; }
  #cuenta-movimientos td:nth-child(3)::before { content: "Debe"; }
  #cuenta-movimientos td:nth-child(4)::before { content: "Haber"; }
  #cuenta-movimientos td:nth-child(5)::before { content: "Saldo"; }
  #cuenta-movimientos td.vacio { display: block; text-align: center; }

  /* ---------------- Hoy y listados ---------------- */
  .resumen { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .resumen__dato { flex: 1 1 140px; padding: 12px 14px; }
  .resumen__dato strong { font-size: 22px; }
  .venta { padding: 12px 14px; }
  .venta__cabeza { flex-wrap: wrap; gap: 4px 10px; }
  .venta__hora { font-size: 14px; }
  .venta__total { font-size: 19px; }
  .venta__items { font-size: 15px; }
  .venta__cae { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .venta__archivo { flex-direction: column; align-items: stretch; }
  .archivo__acciones .mini { flex: 1 1 auto; }

  /* ---------------- paneles a pantalla completa ---------------- */
  .panel { padding: 0; align-items: stretch; z-index: 30; }   /* por encima de la barra de arriba y del menú de abajo */
  #panel-pdf { z-index: 32; }   /* el visor, encima del panel desde el que se abrió */
  .panel__caja,
  .panel__caja--ancha, .panel__caja--xl, .panel__caja--pdf, .comprobante, .cartel-bloqueo {
    max-width: none; width: 100%; height: 100%; max-height: 100%; border-radius: 0;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
  }
  .panel__caja h2 { margin-bottom: 14px; font-size: 20px; }
  .panel__botones { flex-wrap: wrap; }
  .panel__botones .btn { flex: 1 1 140px; }
  .fila { flex-direction: column; gap: 0; }
  .historial__cabeza, .historial-cuenta, .recibo-cliente, .estado-cuenta, .estado-config, .cuenta-nube {
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .estado-cuenta__monto { text-align: left; }
  .estado-cuenta__texto { font-size: 22px; }
  .estado-cuenta__monto strong, .estado-config strong { font-size: 22px; }
  .acciones-cuenta { flex-direction: column; }
  #form-recibo .panel__botones { bottom: calc(-18px - env(safe-area-inset-bottom)); margin: 8px -14px -18px; padding: 12px 14px 16px; }
  .comprobante__monto { font-size: 38px; }

  .vista-pdf__barra { align-items: flex-start; }
  .vista-pdf__acciones { flex-wrap: wrap; width: 100%; }
  .vista-pdf__acciones .btn { flex: 1 1 auto; }
  .vista-pdf__periodo label { flex: 1 1 140px; }

  .aviso-flotante { top: calc(8px + env(safe-area-inset-top)); width: calc(100% - 16px); font-size: 15px; flex-wrap: wrap; }

  /* ---------------- Configuración ---------------- */
  .config-columnas { gap: 14px; }
  .bienvenida { padding: 14px 16px; }
  .bienvenida h2 { font-size: 19px; }
  .tarjeta { padding: 14px; }
  .paso { padding: 10px 12px; }
  .busqueda-arca { flex-direction: column; align-items: stretch; }
  .fila--abajo { flex-direction: column; align-items: stretch; }

  /* ---------------- factura en pantalla (reimprimir) ---------------- */
  .factura__hoja { padding: 10px; }
  .factura__cabeza { grid-template-columns: 1fr; }
  .factura__letra { margin: 0 auto; }
  .factura__datos { text-align: left; }
}

/* Celular acostado o tablet chica: la grilla de Vender vuelve a dos columnas si entra. */
@media (min-width: 761px) and (max-width: 1024px) {
  .pantalla--vender { grid-template-columns: 1fr 340px; gap: 14px; }
  main { padding: 16px; }
  .sidebar { flex-basis: 104px; }
  .nav { font-size: 14px; }
}

/* ---------------- Terminación premium en el celular ---------------- */
@media (max-width: 760px) {
  body { background: var(--fondo); }
  main { border-radius: 0; box-shadow: none; }
  .topbar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--marco) 92%, transparent); }
  .logo { width: 26px; height: 26px; }
  .logo-barra { height: 21px; }
  .marca { flex: none; }                       /* el logo no se recorta: cede lugar el cartel de estado */
  .marca__comercio { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .marca { gap: 8px; }
  .actualizacion-chip { padding: 5px 10px; font-size: 12px; }
  .sidebar { border-top: 1px solid var(--marco-linea); padding-top: 6px; }
  .nav { border-radius: 12px; }
  .nav__ico { width: 22px; height: 22px; }
  .nav--activo::before { left: 50%; top: -6px; width: 26px; height: 3px; margin: 0 0 0 -13px; border-radius: 0 0 3px 3px; }
  .buscador { padding-left: 46px; background-position: 16px 50%; background-size: 19px; }
  .panel__caja { border: 0; }
  .config-pie { grid-template-columns: 1fr; }
}