/* ═══════════════════════════════════════════════════════════════
   SURIAPP — assets/css/movil.css  (B10)
   Celular: barra inferior, objetivos táctiles de 44 px, márgenes del
   notch (safe areas) y tablas que pasan a tarjetas.
   ═══════════════════════════════════════════════════════════════ */

/* ── Barra inferior: sólo en pantallas angostas ─────────────────── */
.barra-movil { display: none; }

@media (max-width: 767px) {
  .barra-movil {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: var(--dark2, var(--color-surface)); border-top: 1px solid var(--border);
    padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    box-shadow: 0 -4px 18px rgba(0,0,0,.08);
  }
  .barra-movil-item {
    flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; background: none; border: 0; border-radius: 10px; color: var(--text3); font-size: .68rem; font-weight: 600;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .barra-movil-item i { font-size: 1.25rem; line-height: 1; }
  .barra-movil-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .barra-movil-item.activo { color: var(--color-primary, var(--violet)); }
  .barra-movil-item.activo i { transform: translateY(-1px); }
  .barra-movil-item:focus-visible { outline: 2px solid var(--color-primary, var(--violet)); outline-offset: -2px; }

  /* El contenido no queda tapado por la barra */
  body.con-barra-movil .content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Los avisos (toasts) suben por encima de la barra */
  body.con-barra-movil .notif-toasts { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
  /* Sobre el menú abierto, la barra queda debajo del cajón */
  .sidebar { z-index: 1050; }
  .sidebar-overlay { z-index: 1045; }
}

/* ── Notch y barra de estado (app instalada en iPhone) ──────────── */
.topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h, 64px) + env(safe-area-inset-top)); }
.sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 767px) {
  .content { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
}

/* ── Objetivos táctiles de 44 px en pantallas táctiles ──────────── */
@media (pointer: coarse) {
  .icon-btn, .btn-icon, .modal-close, .sidebar-toggle { min-width: 44px; min-height: 44px; }
  .btn-grad, .btn-outline, .btn-danger { min-height: 44px; }
  .nav-item { min-height: 44px; }
  .form-control-dark, select.form-control-dark { min-height: 44px; }
  textarea.form-control-dark { min-height: 64px; }
  .badge-pill[onclick] { min-height: 36px; display: inline-flex; align-items: center; }
  .pos-pay-btn, .pos-cart-remove-btn, .pos-pago-moneda, .alta-chip { min-height: 44px; }
  .pos-cart-remove-btn { min-width: 44px; }
  /* iOS hace zoom en los campos con letra menor a 16 px */
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ── Tablas → tarjetas ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .tbl-wrap:has(> .tbl-tarjetas) { overflow-x: visible; }
  table.tbl-tarjetas, table.tbl-tarjetas tbody { display: block; width: 100%; min-width: 0 !important; }
  table.tbl-tarjetas thead { display: none; }
  table.tbl-tarjetas tbody tr {
    display: block; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--dark2, var(--color-surface));
  }
  table.tbl-tarjetas tbody tr:hover { background: var(--dark2, var(--color-surface)); }
  table.tbl-tarjetas tbody td {
    /* Bloque con el rótulo flotando a la izquierda: acomoda celdas de una o varias líneas */
    display: flow-root; padding: 6px 0 !important; border: 0 !important; font-size: .84rem; text-align: right; min-height: 32px;
    width: auto !important; max-width: none !important; white-space: normal !important;
    /* Un nombre, SKU o IMEI largo sin espacios no estira la tarjeta: se corta */
    min-width: 0; overflow-wrap: anywhere;
  }
  table.tbl-tarjetas tbody td + td { border-top: 1px dashed var(--border) !important; }
  table.tbl-tarjetas tbody td::before {
    content: attr(data-label); float: left; width: 38%; margin-right: 10px; padding-top: 1px; text-align: left; color: var(--text3); font-size: .72rem; font-weight: 600;
  }
  table.tbl-tarjetas tbody td[data-label=""]::before { display: none; }
  /* La primera celda es el título de la tarjeta */
  table.tbl-tarjetas tbody td:first-child { text-align: left; font-size: .9rem; }
  table.tbl-tarjetas tbody td:first-child::before { display: none; }
  /* Con foto (inventario): la foto a la izquierda, los datos al lado */
  table.tbl-tarjetas tbody tr:has(> td:first-child img, > td:first-child .bi-camera) {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px;
  }
  table.tbl-tarjetas tbody tr:has(> td:first-child img, > td:first-child .bi-camera) > td:first-child {
    grid-row: 1 / span 30; align-self: start; border: 0 !important;
  }
  /* …y la segunda celda (el nombre) pasa a ser el título */
  table.tbl-tarjetas tbody tr:has(> td:first-child img, > td:first-child .bi-camera) > td:nth-child(2) {
    border-top: 0 !important; text-align: left; font-size: .9rem;
  }
  table.tbl-tarjetas tbody tr:has(> td:first-child img, > td:first-child .bi-camera) > td:nth-child(2)::before { display: none; }
  /* Fila de "sin datos" o totales */
  table.tbl-tarjetas tbody td[data-ancho] { display: block; text-align: center; }
  table.tbl-tarjetas tbody td[data-ancho]::before { display: none; }
  table.tbl-tarjetas tbody tr:has(> td[data-ancho]:only-child) { border-style: dashed; }
  /* Botones de acción: a la derecha, sin rótulo */
  table.tbl-tarjetas tbody td:last-child:has(button, .btn-icon) { text-align: right; }
  table.tbl-tarjetas tbody td:last-child:has(button, .btn-icon)::before { display: none; }
  table.tbl-tarjetas .col-hide-mobile { display: none !important; }
  /* Con botones táctiles de 44 px no entran 5 o 6 en una línea: bajan a la siguiente */
  table.tbl-tarjetas .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

  /* Filtros de Ventas: los dos selectores se reparten el ancho */
  .filtros-ventas { width: 100%; }
  .filtros-ventas select { flex: 1 1 0; min-width: 0; width: auto !important; }
  /* Copias de seguridad: el nombre largo del archivo se corta con "…" */
  .backup-info { max-width: 100%; }
  .backup-info > div:last-child { flex: 1; min-width: 0; }
  .backup-info > div:last-child > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Invitación a instalar ──────────────────────────────────────── */
.instalar-app {
  position: fixed; left: 10px; right: 10px; z-index: 1060;
  bottom: calc(76px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: var(--dark2, var(--color-surface)); border: 1px solid var(--border); box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.instalar-app img { border-radius: 10px; flex: 0 0 auto; }
.instalar-app-txt { flex: 1; min-width: 0; font-size: .8rem; color: var(--text2); display: flex; flex-direction: column; }
.instalar-app-txt strong { color: var(--text1); font-size: .86rem; }
.instalar-app .btn-grad { padding: 6px 14px; }
.instalar-app-x { background: none; border: 0; color: var(--text3); font-size: 1.4rem; min-width: 44px; min-height: 44px; cursor: pointer; }
@media (min-width: 768px) { .instalar-app { display: none; } }