/* ===========================================================================
   movil.css — ajustes del CRM para celulares y tablets.
   Se carga en todas las páginas después de tailadmin.css.
   - La página scrollea como página (no en un recuadro interno de 100vh, que
     en el celular corta lo de abajo detrás de la barra del navegador).
   - Las tablas pasan a tarjetas (una por fila, "Etiqueta: valor"), así se
     ven todas las columnas y los botones Editar/Borrar quedan a mano.
     Las etiquetas las pone js/movil.js a partir del <thead>.
     Una tabla puede quedar como tabla con la clase .sin-tarjetas.
   =========================================================================== */

/* El ícono de lupa no se superpone con el texto de los buscadores */
.relative > svg.absolute + .form-control.pl-9,
.form-control.pl-9 { padding-left: 2.25rem; }

@media (max-width: 1023px) {
    html, body { height: auto; }
    body { overflow-x: hidden; }
    .ta-app { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
    .ta-app-main { overflow: visible; }
    .ta-content { overflow: visible; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

    .ta-header {
        position: sticky; top: 0; z-index: 40;
        height: calc(3.5rem + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }

    /* Encabezados de página con botones: que bajen de renglón en vez de salirse */
    .ta-content > .flex.justify-between,
    .ta-content > div > .flex.justify-between,
    .card-body > .flex.justify-between { flex-wrap: wrap; gap: 0.75rem; }
    .ta-content > .flex.justify-between > .flex { flex-wrap: wrap; }

    /* Modales a pantalla completa */
    .ta-modal { padding: 0; }
    .ta-modal-dialog, .ta-modal-dialog.modal-lg {
        max-width: none; min-height: 100%; max-height: none;
        border-radius: 0;
    }
    .ta-modal-header { position: sticky; top: 0; background: #fff; z-index: 1; padding-top: calc(1rem + env(safe-area-inset-top)); }
    .ta-modal-footer { position: sticky; bottom: 0; border-radius: 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); flex-wrap: wrap; }
}

@media (max-width: 767px) {
    /* Inputs a 16px: si son más chicos, iPhone hace zoom al tocarlos */
    .form-control, .form-select, textarea.form-control,
    .form-control.form-control-sm, .form-select.form-select-sm,
    input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
        font-size: 16px;
    }
    .btn { min-height: 2.5rem; }
    .btn-sm { min-height: 2.25rem; padding: 0.4rem 0.7rem; }

    .card-body { padding: 1rem; }
    .ta-content h1.text-2xl { font-size: 1.35rem; }

    /* Header compacto: sin nombre de usuario */
    .ta-header > div:last-child > div:first-child { display: none; }

    /* ---------- Tablas → tarjetas ---------- */
    table.movil-tarjetas,
    table.movil-tarjetas tbody { display: block; width: 100%; background: transparent; }
    table.movil-tarjetas thead,
    table.movil-tarjetas tr.movil-encabezado { display: none; }
    table.movil-tarjetas tr {
        display: block;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        padding: 0.5rem 0.875rem;
        margin-bottom: 0.625rem;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    }
    table.movil-tarjetas tbody tr:hover td,
    table.movil-tarjetas.table-striped tbody tr:nth-child(odd) td { background: transparent; }
    table.movil-tarjetas td {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.45rem 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        width: auto !important; min-width: 0; white-space: normal;
        text-align: right;
    }
    table.movil-tarjetas td:last-child { border-bottom: 0 !important; }
    table.movil-tarjetas td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
        text-transform: uppercase; color: #64748b;
    }
    table.movil-tarjetas td[data-label=""]::before { display: none; }
    table.movil-tarjetas td > .celda-valor { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
    table.movil-tarjetas td > .celda-valor .form-control,
    table.movil-tarjetas td > .celda-valor .form-select { width: 100%; text-align: left; }

    table.movil-tarjetas td.celda-vacia { display: none; }

    /* Fila de "sin resultados" / mensajes que ocupan todo el ancho */
    table.movil-tarjetas td[colspan] { justify-content: center; text-align: center; }
    table.movil-tarjetas td[colspan]::before { display: none; }

    /* Celda de acciones (sólo botones): botones grandes, a lo ancho */
    table.movil-tarjetas td.celda-acciones::before { display: none; }
    table.movil-tarjetas td.celda-acciones > .celda-valor {
        display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem;
    }
    table.movil-tarjetas td.celda-acciones .btn { min-height: 2.5rem; min-width: 2.75rem; }

    /* Celda de imagen: sin etiqueta, la foto a la izquierda */
    table.movil-tarjetas td.celda-imagen::before { display: none; }
    table.movil-tarjetas td.celda-imagen { justify-content: flex-start; }
    table.movil-tarjetas td.celda-imagen > .celda-valor { flex: 0 0 auto; }

    /* El contenedor con scroll horizontal ya no hace falta */
    .overflow-x-auto:has(> table.movil-tarjetas),
    .table-responsive:has(> table.movil-tarjetas) {
        overflow: visible; border: 0 !important; border-radius: 0; background: transparent;
    }
    .card:has(table.movil-tarjetas) { overflow: visible; }

    /* ---------- Insumos del producto: tarjeta compacta ---------- */
    /* Columnas: 1 Insumo · 2 Cantidad · 3 Costo unit. · 4 Mayorista · 5 Subtotal · 6 Quitar · (Ver más) */
    #tablaInsumos.movil-tarjetas tr.insumo {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.75rem;
        padding: 0.75rem;
    }
    #tablaInsumos.movil-tarjetas tr.insumo > td {
        border: 0 !important; padding: 0 !important;
    }
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(1) { grid-column: 1 / -1; }
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(1)::before { display: none; }
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(1) .form-control { font-weight: 600; }
    /* Cantidad y costo lado a lado, con la etiqueta arriba */
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(2),
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(3) {
        flex-direction: column; align-items: stretch; gap: 0.2rem; text-align: left;
    }
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(2)::before,
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(3)::before { flex: none; }
    #tablaInsumos.movil-tarjetas tr.insumo .unidadInsumo,
    #tablaInsumos.movil-tarjetas tr.insumo .unidadCostoInsumo { text-align: left; margin-top: 0.1rem; }
    /* Lo demás, sólo con "Ver más" */
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(4),
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(5),
    #tablaInsumos.movil-tarjetas tr.insumo > td:nth-child(6) { display: none; grid-column: 1 / -1; }
    #tablaInsumos.movil-tarjetas tr.insumo.ver-mas > td:nth-child(4),
    #tablaInsumos.movil-tarjetas tr.insumo.ver-mas > td:nth-child(5) { display: flex; border-top: 1px solid #f1f5f9 !important; padding-top: 0.4rem !important; }
    #tablaInsumos.movil-tarjetas tr.insumo.ver-mas > td:nth-child(6) { display: flex; justify-content: flex-end; }
    #tablaInsumos.movil-tarjetas tr.insumo.ver-mas > td:nth-child(6) .btn::after { content: ' Quitar insumo'; }
    #tablaInsumos.movil-tarjetas tr.insumo > td.celda-vermas { display: flex; grid-column: 1 / -1; justify-content: flex-end; }
    #tablaInsumos.movil-tarjetas tr.insumo > td.celda-vermas::before { display: none; }
    .btn-vermas {
        background: transparent; border: 0; padding: 0.35rem 0.25rem; cursor: pointer;
        color: #2563eb; font-size: 0.8125rem; font-weight: 600;
    }

    /* ---------- Listado de productos: foto y nombre en el mismo renglón ---------- */
    #listadoProductos tr { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0 0.75rem; align-items: center; }
    #listadoProductos tr > td { grid-column: 1 / -1; }
    #listadoProductos tr > td.celda-imagen { grid-column: 1; border: 0 !important; padding: 0.25rem 0 !important; }
    #listadoProductos tr > td.celda-imagen img { width: 3.25rem !important; height: 3.25rem !important; }
    #listadoProductos tr > td.celda-imagen + td { grid-column: 2; border: 0 !important; justify-content: flex-start; text-align: left; font-weight: 600; }
    #listadoProductos tr > td.celda-imagen + td::before { display: none; }

    /* Paginación con muchas páginas: que baje de renglón */
    .pagination { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
    #pagination, .pagination-container { max-width: 100%; }
}

/* ---------- WhatsApp: lista de chats → conversación a pantalla completa ---------- */
.wa-volver { display: none; }
@media (max-width: 900px) {
    /* body + .wa-shell: más específico que el <style> propio de whatsapp.html */
    body .wa-shell { display: block; height: auto; }
    body .wa-shell .wa-list { width: 100%; max-height: none; }
    body .wa-shell .wa-list-items { max-height: none; overflow: visible; }
    body .wa-shell .wa-conv { display: none; }

    body.wa-en-chat .wa-shell .wa-list,
    body.wa-en-chat .ta-content > .flex.justify-between { display: none; }
    body.wa-en-chat .wa-shell .wa-conv {
        display: flex;
        position: fixed; z-index: 45;
        left: 0; right: 0; bottom: 0;
        top: calc(3.5rem + env(safe-area-inset-top));
        border-radius: 0; border: 0;
        min-height: 0;
    }
    body.wa-en-chat { overflow: hidden; }
    .wa-conv-header { flex-wrap: wrap; padding: 0.5rem 0.75rem; }
    .wa-conv-header > .flex.gap-2 { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
    .wa-conv-input { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
    .wa-msg { max-width: 88%; }
    .wa-volver {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.25rem; height: 2.25rem; border-radius: 9999px;
        background: transparent; border: 0; color: #334155; cursor: pointer; flex-shrink: 0;
    }
}