/* ============================================
   RESPONSIVE ALQUILER — MOBILE
   Breakpoint: max-width 767px

   Estilos responsive móviles exclusivos del
   módulo Alquiler: pagos, recibos, contratos,
   tabs, estado de cuenta, buscadores.
   ============================================ */

/* --------------------------------------------
   PAGOS Y RECIBOS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    /* Selector de período */
    .period-selector {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .period-selector select,
    .period-selector input {
        width: 100% !important;
    }

    /* Vista previa del recibo */
    .recibo-preview {
        width: 100% !important;
        padding: 12px !important;
    }
}

/* --------------------------------------------
   TABS DE PAGOS Y ALQUILER
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    .pagos-tab,
    .alquiler-tab {
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 10px 8px !important;
        font-size: 11px !important;
        min-height: 40px !important;
    }

    /* Buscadores de pagos y alquiler */
    #buscadorAlquilerWrap,
    #buscadorEstadoCuentaWrap {
        width: 100% !important;
    }

    #buscadorEstadoCuenta,
    #buscadorHistorial,
    #buscadorAlquiler {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 12px !important;
    }

    /* Select de concepto en Estado de Cuenta */
    #estadoCuentaConcepto {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Barras de herramientas de tabs */
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"] {
        flex-wrap: wrap !important;
    }
}

@media screen and (max-width: 480px) {
    .pagos-tab,
    .alquiler-tab {
        flex: 1 1 45% !important;
        font-size: 10px !important;
        padding: 8px 4px !important;
    }
}

/* --------------------------------------------
   ESTADO DE CUENTA — TABLA RESPONSIVE
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    /* Columna sticky más estrecha */
    .data-table th[style*="position: sticky"],
    .data-table td[style*="position: sticky"],
    .data-table th[style*="position:sticky"],
    .data-table td[style*="position:sticky"] {
        min-width: 120px !important;
        max-width: 120px !important;
        font-size: 9px !important;
    }

    /* Columnas de meses más estrechas */
    .data-table th[style*="min-width: 55px"],
    .data-table th[style*="min-width:55px"] {
        min-width: 40px !important;
        font-size: 8px !important;
        padding: 4px 2px !important;
    }

    #estadoCuentaTableBody {
        font-size: 9px !important;
    }

    #estadoCuentaTableBody td {
        font-size: 9px !important;
        padding: 4px 2px !important;
    }

    #estadoCuentaTableBody td[style*="position: sticky"] div,
    #estadoCuentaTableBody td[style*="position:sticky"] div {
        font-size: 9px !important;
    }
}

/* --------------------------------------------
   TABLAS DE ALQUILER
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    #tablaContratos,
    #tablaPagosAlquiler,
    #tablaDepositosAlquiler,
    #tablaAnuladosAlquiler {
        font-size: 10px !important;
    }

    #tablaContratos th,
    #tablaContratos td,
    #tablaPagosAlquiler th,
    #tablaPagosAlquiler td,
    #tablaDepositosAlquiler th,
    #tablaDepositosAlquiler td,
    #tablaAnuladosAlquiler th,
    #tablaAnuladosAlquiler td {
        padding: 6px 4px !important;
        font-size: 10px !important;
    }
}

/* --------------------------------------------
   BARRA DE STATS DE PAGOS
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    div[style*="display: flex"][style*="background: white"][style*="border-radius"] {
        flex-wrap: wrap !important;
    }

    div[style*="border-right: 1px solid"][style*="padding"][style*="text-align: center"] {
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        flex: 1 1 45% !important;
        min-width: 0 !important;
    }

    div[style*="padding"][style*="text-align: center"]:last-child {
        border-bottom: none !important;
    }
}

/* --------------------------------------------
   LÍNEAS DE CONCEPTO EN ALQUILER
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    /* Grid: 120px 1fr 80px 70px 50px 30px → 1 columna */
    div[style*="120px 1fr 80px 70px 50px 30px"],
    div[style*="120px 1fr 80px 70px"] {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}

/* --------------------------------------------
   RECIBO DE ALQUILER — PREVIEW EN MODAL
   -------------------------------------------- */
@media screen and (max-width: 767px) {
    #reciboAlquilerParaPDF {
        transform: scale(0.5) !important;
        transform-origin: top left !important;
        margin-bottom: -45% !important;
    }

    #modalDetalleAlquiler > div {
        width: 95% !important;
        max-width: 95vw !important;
    }

    #modalDetalleAlquiler div[style*="display: flex"][style*="gap: 6px"] button,
    #modalDetalleAlquiler div[style*="display:flex"][style*="gap:6px"] button {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }
}

@media screen and (max-width: 480px) {
    #reciboAlquilerParaPDF {
        transform: scale(0.38) !important;
        margin-bottom: -55% !important;
    }
}