/* ZIVO · Aprobaciones de pagos · compactación móvil v2
   Se carga después de approvals-payments-mobile.css y solo hasta 768px. */

@media (max-width: 768px) {
  app-aprobaciones-pagos {
    --mobile-control-h: 38px;
    --mobile-card-radius: 12px;
  }

  app-aprobaciones-pagos .contenedor-principal {
    position: relative;
    padding: 6px 8px max(18px, env(safe-area-inset-bottom));
  }

  /* Cabecera más compacta */
  app-aprobaciones-pagos h1 {
    margin: 0 0 6px;
    padding: 9px 11px 8px;
    border: 1px solid #dbe4ef;
    border-bottom: 3px solid #175a94;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05);
    font-size: 0.98rem;
    line-height: 1.08;
    letter-spacing: 0.02em;
  }

  app-aprobaciones-pagos h1::after {
    margin-top: 2px;
    font-size: 0.6rem;
  }

  app-aprobaciones-pagos .header-top {
    width: calc(100% - 43px);
    margin: 0 0 7px;
  }

  app-aprobaciones-pagos .department {
    min-height: 38px;
    padding: 5px 9px;
    border-radius: 9px;
  }

  app-aprobaciones-pagos .department p {
    gap: 5px;
    font-size: 0.69rem;
  }

  app-aprobaciones-pagos .department span {
    padding: 1px 5px;
    font-size: 0.65rem;
  }

  app-aprobaciones-pagos .flex-space-between {
    width: 37px;
    margin: -45px 0 8px auto;
  }

  app-aprobaciones-pagos .config-tabla {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  app-aprobaciones-pagos .config-tabla svg {
    width: 19px;
    height: 19px;
  }

  /* Filtros: 5 filas en lugar de 8 */
  app-aprobaciones-pagos .busqueda-container {
    gap: 6px;
    margin-bottom: 6px;
  }

  app-aprobaciones-pagos .busqueda-box {
    display: grid !important;
    grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 11px !important;
  }

  app-aprobaciones-pagos .busqueda-box > .busqueda-input:nth-child(1) {
    grid-column: 1;
  }

  app-aprobaciones-pagos .busqueda-box > .busqueda-input:nth-child(2) {
    grid-column: 2;
  }

  app-aprobaciones-pagos .busqueda-box > .busqueda-input:nth-child(3) {
    grid-column: 1 / -1;
  }

  app-aprobaciones-pagos .busqueda-box > .busqueda-input:nth-child(4) {
    grid-column: 1;
  }

  app-aprobaciones-pagos .busqueda-box > .busqueda-input:nth-child(5) {
    grid-column: 2;
  }

  app-aprobaciones-pagos .busqueda-box > .busqueda-input:nth-child(6) {
    grid-column: 1 / -1;
  }

  app-aprobaciones-pagos .busqueda-box > .busqueda-input:nth-child(7) {
    grid-column: 1;
  }

  app-aprobaciones-pagos .busqueda-box > .busqueda-input:nth-child(8) {
    grid-column: 2;
  }

  app-aprobaciones-pagos .busqueda-input input,
  app-aprobaciones-pagos .busqueda-input select,
  app-aprobaciones-pagos .busqueda-select select,
  app-aprobaciones-pagos .fecha input {
    height: 38px !important;
    min-height: 38px;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
  }

  app-aprobaciones-pagos .fecha label {
    margin: 0 0 2px 2px !important;
    font-size: 0.57rem !important;
  }

  /* Estados en una matriz compacta 3 + 2 */
  app-aprobaciones-pagos .busqueda-estados {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px !important;
    padding: 7px !important;
    overflow: visible !important;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.04);
  }

  app-aprobaciones-pagos .busqueda-estados label {
    width: 100%;
    min-width: 0;
    min-height: 34px !important;
    padding: 0 7px !important;
    justify-content: flex-start;
    border-radius: 8px !important;
    font-size: 0.66rem !important;
    white-space: nowrap;
  }

  app-aprobaciones-pagos .busqueda-estados input[type="radio"] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }

  /* Rangos rápidos 2 x 2 y total completo */
  app-aprobaciones-pagos .filtros-rapidos {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px !important;
    margin: 0 0 6px !important;
    padding: 7px !important;
    overflow: visible !important;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
  }

  app-aprobaciones-pagos .filtros-rapidos button,
  app-aprobaciones-pagos .suma-total {
    width: 100%;
    min-width: 0;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    justify-content: center;
    font-size: 0.65rem !important;
  }

  app-aprobaciones-pagos .suma-total {
    grid-column: 1 / -1;
  }

  /* Paginación siempre en una sola fila */
  app-aprobaciones-pagos .pagination {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 5px !important;
    margin: 5px 0 7px !important;
  }

  app-aprobaciones-pagos .pagination button {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 34px !important;
    height: 34px;
    padding: 0 7px !important;
    border-radius: 8px !important;
    font-size: 0.65rem !important;
  }

  app-aprobaciones-pagos .pagination span {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 34px !important;
    font-size: 0.62rem !important;
  }

  /* Tarjetas de solicitudes más densas */
  app-aprobaciones-pagos tbody {
    gap: 7px !important;
  }

  app-aprobaciones-pagos tbody > tr {
    border-radius: 11px !important;
    box-shadow: 0 2px 9px rgba(15, 23, 42, 0.055) !important;
  }

  app-aprobaciones-pagos tbody td {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 7px 8px !important;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }

  app-aprobaciones-pagos tbody td::before {
    font-size: 0.56rem !important;
    line-height: 1.25 !important;
  }

  app-aprobaciones-pagos tbody td[data-label="Cod. Local / Factura"] {
    padding-top: 8px !important;
  }

  app-aprobaciones-pagos .col-forma-pago .forma-pago-container,
  app-aprobaciones-pagos .forma-pago-container {
    gap: 3px !important;
  }

  app-aprobaciones-pagos .payment-method,
  app-aprobaciones-pagos .account-info,
  app-aprobaciones-pagos .bank-name {
    font-size: 0.66rem !important;
    line-height: 1.3;
  }

  app-aprobaciones-pagos tbody td[data-label="Valor a pagar"] > div > span:first-child {
    font-size: 0.9rem !important;
  }

  app-aprobaciones-pagos textarea {
    min-height: 68px !important;
    padding: 7px !important;
    border-radius: 8px !important;
  }

  /* Acciones en dos columnas incluso en teléfonos pequeños */
  app-aprobaciones-pagos tbody td[data-label="Acciones"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
    padding: 8px !important;
  }

  app-aprobaciones-pagos tbody td[data-label="Acciones"]::before {
    grid-column: 1 / -1;
    margin: 0 0 1px !important;
  }

  app-aprobaciones-pagos tbody td[data-label="Acciones"] > div {
    display: contents !important;
  }

  app-aprobaciones-pagos tbody td[data-label="Acciones"] .btn-table,
  app-aprobaciones-pagos tbody td[data-label="Acciones"] .btn,
  app-aprobaciones-pagos tbody td[data-label="Acciones"] button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto;
    flex: none !important;
    margin: 0 !important;
    padding: 6px 7px !important;
    border-radius: 8px !important;
    font-size: 0.67rem !important;
    line-height: 1.15;
    white-space: normal;
  }

  app-aprobaciones-pagos tbody td[data-label="Acciones"] .file-input-table {
    grid-column: 1 / -1;
    min-height: 38px !important;
  }

  /* Aprobar y acciones positivas con jerarquía visual discreta */
  app-aprobaciones-pagos tbody td[data-label="Acciones"] button:not(:disabled):hover {
    transform: none !important;
  }

  /* Fallback profesional para PDFs en Android/iOS */
  app-aprobaciones-pagos .zivo-mobile-document-fallback {
    position: absolute;
    inset: 0 0 58px;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 18px;
    background:
      radial-gradient(circle at 50% 25%, rgba(37, 99, 235, 0.12), transparent 34%),
      #0b1220;
  }

  app-aprobaciones-pagos .pdf-modal-body .zivo-mobile-document-fallback {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 320px;
  }

  app-aprobaciones-pagos .zivo-mobile-document-card {
    width: min(320px, 100%);
    padding: 20px 16px 16px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.94);
    color: #f8fafc;
    text-align: center;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
  }

  app-aprobaciones-pagos .zivo-mobile-document-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 11px;
    place-items: center;
    border-radius: 13px;
    background: rgba(37, 99, 235, 0.18);
    color: #93c5fd;
    font-size: 25px;
  }

  app-aprobaciones-pagos .zivo-mobile-document-card strong {
    display: block;
    margin-bottom: 5px;
    font-size: 0.88rem;
  }

  app-aprobaciones-pagos .zivo-mobile-document-card p {
    margin: 0 0 14px;
    color: #94a3b8;
    font-size: 0.68rem;
    line-height: 1.4;
  }

  app-aprobaciones-pagos .zivo-mobile-document-open {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 11px;
    background: #2563eb;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
  }

  app-aprobaciones-pagos .iframe-container.maximizar {
    padding-bottom: max(58px, env(safe-area-inset-bottom)) !important;
  }

  app-aprobaciones-pagos .iframe-container.maximizar > .btn-right {
    padding: 7px 8px max(7px, env(safe-area-inset-bottom)) !important;
  }

  app-aprobaciones-pagos .iframe-container.maximizar > .btn-right button {
    min-height: 38px !important;
    font-size: 0.66rem !important;
  }
}

@media (max-width: 380px) {
  app-aprobaciones-pagos .busqueda-box {
    grid-template-columns: minmax(82px, 0.68fr) minmax(0, 1.32fr) !important;
  }

  app-aprobaciones-pagos .busqueda-estados {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  app-aprobaciones-pagos tbody td {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
}