/*
 * MOB-02: el área de clientes en el teléfono y la tableta (Apple HIG: blancos de 44 px, letra de 16 px en campos, nada de
 * scroll lateral de la página). Archivo estático (sin npm run build): lo carga client/layouts/_head.blade.php DESPUÉS de
 * cliente.css (gana por orden con la misma especificidad).
 *
 * Regla de oro: en escritorio (>= 992 px con ratón) nada de esto aplica y el portal queda pixel por pixel igual al
 * Twenty-One aprobado. Fuera de las media queries solo hay display:none de piezas que no existen en escritorio.
 *   < 992 px            cabecera compacta (logo, carrito, botón Menú de 44 px), menú en hoja lateral (#wcDrawer),
 *                       migas en una línea deslizable, panel lateral DESPUÉS del contenido.
 *   < 768 px            tablas de listas como tarjetas (etiqueta: valor; la etiqueta la pone cliente-mobile.js desde el
 *                       <thead>); factura y pago a una columna con botones a todo lo ancho; checkout a una columna.
 *   (pointer: coarse)   cualquier ancho con dedo: blancos >= 44 px y campos de 16 px (el iPhone no hace zoom).
 * Guía: docs/kb/portal-clientes.md, "Área de clientes en el teléfono (MOB-02)".
 */

/* ---------- piezas que solo existen en pantalla angosta ---------- */
.wc-menu-li, .wc-menu-btn, .wc-drawer, .invoice-topbar { display: none; }

@media (max-width: 991.98px) {
    /* ---------- cabecera compacta: logo · carrito · menú ---------- */
    header.header .topbar,
    header.header .main-navbar-wrapper { display: none; }
    header.header .navbar-top { padding: 4px 4px 4px 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
    header.header .navbar-top > .contenedor { max-width: none; padding: 0; min-height: 52px; gap: 4px; }
    header.header .navbar-brand { display: inline-flex; align-items: center; min-height: 44px; flex: 0 1 auto; min-width: 0; margin-right: 8px; padding: 0; line-height: 1; }
    header.header .logo-img { max-width: min(220px, 52vw); max-height: 40px; }
    header.header .toolbar { align-items: center; gap: 4px; flex: 0 0 auto; }
    header.header .toolbar .nav-link.cart-btn {
        display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }
    header.header .toolbar .nav-link.cart-btn .fas { color: #888; font-size: 18px; }
    header.header .toolbar .nav-link .badge { top: 3px; right: 3px; }
    header.header .wc-menu-li { display: block; }
    header.header .wc-menu-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid #e5e5e5; border-radius: 10px;
        background: #fff; color: #444; font: inherit; font-size: 15px; cursor: pointer;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }
    header.header .wc-menu-btn:active, header.header .wc-menu-btn[aria-expanded="true"] { background: #e9ecef; }
    header.header .wc-menu-btn:focus-visible { outline: 2px solid #369; outline-offset: 2px; }
    header.header .wc-menu-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }

    /* migas en una sola línea; si no caben se deslizan (sin empujar la página) */
    .master-breadcrumb .contenedor { max-width: none; padding-left: max(12px, env(safe-area-inset-left)); padding-right: 12px; }
    .master-breadcrumb .breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 6px 0; }
    .master-breadcrumb .breadcrumb::-webkit-scrollbar { display: none; }
    .breadcrumb-item { flex: 0 0 auto; align-items: center; }

    /* ---------- el contenido primero, el panel lateral después ---------- */
    section#main-body { padding: 12px 0 24px; min-height: 0; }
    section#main-body > .contenedor { max-width: none; padding-left: max(15px, env(safe-area-inset-left)); padding-right: max(15px, env(safe-area-inset-right)); }
    #main-body .row > .primary-content { order: 1; }
    #main-body .row > .col-sidebar { order: 2; margin-top: 6px; }
    #main-body .col-sidebar .sidebar { columns: 2 260px; column-gap: 14px; }
    #main-body .col-sidebar .sidebar > .card { break-inside: avoid; display: flex; }
    #main-body .col-sidebar, .primary-content [id] { scroll-margin-top: 12px; }

    /* ---------- nada más ancho que la pantalla ---------- */
    .primary-content img, .primary-content iframe, .primary-content pre,
    .primary-content input, .primary-content select, .primary-content textarea, .invoice-container img { max-width: 100%; }
    .primary-content pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
    .listtable-top .dataTables_filter, .listtable-top .dataTables_filter label { flex: 1 1 100%; }
    .listtable-top .dataTables_filter label { display: flex; width: 100%; }
    .listtable-top .dataTables_filter input { width: 100%; flex: 1 1 auto; }
    .listtable-top .dataTables_length:empty { display: none; }
    .listtable-bottom { gap: 4px 12px; }
    .pagination { flex-wrap: wrap; }

    /* inicio: listas sin scroll anidado; botones de cada renglón debajo del nombre si no caben */
    .client-home-cards .list-group { max-height: none; overflow: visible; }
    .div-service-item { flex-wrap: wrap; gap: 6px 0; }
    .div-service-name { flex: 1 1 55%; }
    .div-service-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }

    /* letra mínima legible (resumen del carrito, pie de la tarjeta de login, estados) */
    #order-standard_cart .view-cart-items .item, #order-standard_cart .summary-container { font-size: 14px; }
    #order-standard_cart small, .login-form .card-footer, .login-form small { font-size: 12px; }
    table.table-list td .label.status { font-size: 12px; }

    /* pie */
    footer.footer { padding: 24px 0 calc(32px + env(safe-area-inset-bottom)); }
    footer.footer .nav { justify-content: center; }
}

/* ---------- menú en hoja lateral ---------- */
@media (max-width: 991.98px) {
    .wc-drawer { display: block; position: fixed; inset: 0; z-index: 2000; }
    .wc-drawer[hidden] { display: none; }
    .wc-drawer-scrim {
        position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0;
        transition: opacity 220ms ease-out; -webkit-tap-highlight-color: transparent;
    }
    .wc-drawer-panel {
        position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 86vw);
        display: flex; flex-direction: column; background: #f2f2f7; color: #1c1c1e;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); outline: 0;
        transform: translate3d(100%, 0, 0);
        /* curva de hoja de iOS: arranca rápido y se asienta sin rebotar (amortiguamiento crítico) */
        transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .wc-drawer.is-open .wc-drawer-scrim { opacity: 1; }
    .wc-drawer.is-open .wc-drawer-panel { transform: translate3d(0, 0, 0); }
    .wc-drawer-head {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        min-height: 52px; padding: 4px 4px 4px 16px; background: #404040; color: #fff;
        padding-top: max(4px, env(safe-area-inset-top));
    }
    .wc-drawer-title { font-size: 17px; font-weight: 600; margin: 0; line-height: 1.2; }
    .wc-drawer-close {
        width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #fff;
        font-size: 28px; line-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .wc-drawer-close:active { background: rgba(0, 0, 0, 0.28); }
    .wc-drawer-close:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
    .wc-drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 0 24px; }
    .wc-drawer-who { margin: 8px 16px 4px; font-size: 13px; color: #6c6c70; overflow-wrap: anywhere; }
    .wc-drawer-who strong { color: #1c1c1e; font-weight: 600; }
    .wc-drawer-group { margin: 0 12px 14px; }
    .wc-drawer-heading {
        margin: 12px 4px 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: #6c6c70;
    }
    .wc-drawer-list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 10px; overflow: hidden; }
    .wc-drawer-list li + li { border-top: 1px solid #e5e5ea; }
    .wc-drawer-list form { margin: 0; }
    a.wc-drawer-link, button.wc-drawer-link {
        display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 16px; margin: 0;
        border: 0; background: transparent; color: #1c1c1e; text-align: left; text-decoration: none;
        font: inherit; font-size: 16px; line-height: 1.3; cursor: pointer;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    }
    a.wc-drawer-link::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-top: 2px solid #c4c4c6; border-right: 2px solid #c4c4c6; transform: rotate(45deg); flex: 0 0 auto; }
    a.wc-drawer-link:active, button.wc-drawer-link:active { background: #d1d1d6; color: #1c1c1e; }
    a.wc-drawer-link:hover { color: #1c1c1e; text-decoration: none; }
    a.wc-drawer-link:focus-visible, button.wc-drawer-link:focus-visible { outline: 2px solid #369; outline-offset: -2px; }
    a.wc-drawer-link[aria-current="page"] { color: #369; font-weight: 600; }
    button.wc-drawer-link.is-danger { color: #c0392b; }
    .wc-drawer-link .badge { margin-left: auto; font-size: 12px; padding: 3px 7px; border-radius: 10px; }
    a.wc-drawer-link.has-badge::after { margin-left: 8px; }
    html.wc-drawer-lock, html.wc-drawer-lock body { overflow: hidden; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .wc-drawer-panel, .wc-drawer-scrim { transition: none; }
}

/* ---------- factura y pago ---------- */
@media (max-width: 991.98px) {
    /* barra mínima arriba de la factura: "‹ Mis facturas" (la factura no lleva el menú del portal) */
    .invoice-topbar {
        display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 900;
        min-height: 48px; padding: 2px max(8px, env(safe-area-inset-right)) 2px max(8px, env(safe-area-inset-left));
        background: #fff; border-bottom: 1px solid #ddd;
    }
    .invoice-topbar a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 16px; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
    .invoice-topbar a:active { background: #e9ecef; }
    .invoice-topbar a + a { margin-left: auto; font-size: 14px; }
}
@media (max-width: 767.98px) {
    .invoice-container { margin: 8px; padding: 20px 16px 24px; }
    .invoice-container .invoice-header > div:first-child { flex: 1 1 100%; }
    .invoice-container .invoice-header > .text-right { flex: 1 1 100%; text-align: left !important; margin-top: 8px; }
    .invoice-container .invoice-status { text-align: left; margin-top: 4px; }
    .invoice-container .payment-btn-container { text-align: left; }
    .invoice-container .payment-btn-container .btn { display: flex; width: 100%; justify-content: center; }
    .opciones-pago { grid-template-columns: minmax(0, 1fr); }
    .opciones-pago .btn, #pagar form .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; font-size: 16px; }
    #ppcp-buttons { width: 100%; min-width: 0; }
    #credito .input-group { max-width: none !important; }
    /* Imprimir / Descargar PDF: uno junto al otro, a todo lo ancho */
    .invoice-container > .float-right { float: none !important; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .invoice-container > .float-right > .btn { flex: 1 1 140px; display: flex; align-items: center; justify-content: center; }
    .invoice-back { margin: 0 8px 24px; line-height: 2.4; }
    .invoice-container .card-body { padding: 14px; }
}

/* ---------- tienda, carrito y checkout ---------- */
@media (max-width: 991.98px) {
    #order-standard_cart .header-lined h1, #order-standard_cart .font-size-36 { font-size: 28px; line-height: 1.2; }
    #order-standard_cart .order-summary { margin-top: 6px; }
}
@media (max-width: 767.98px) {
    #order-standard_cart .order-summary .btn-checkout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 16px; font-size: 1.25em; }
    #order-standard_cart .order-summary .total-due-today { margin: 12px 0; }
    #order-standard_cart .forma-pago { display: flex; flex-direction: column; align-items: stretch; text-align: left !important; }
    #order-standard_cart .forma-pago label { margin-right: 0; }
    #order-standard_cart .view-cart-items .item-title { font-size: 1.35em; }
    #order-standard_cart .sub-heading span { font-size: 15px; }
}
@media (max-width: 575.98px) {
    #order-standard_cart .products .product div.product-desc,
    #order-standard_cart .products .product footer { float: none; width: 100%; margin: 0; padding: 8px 14px; }
    #order-standard_cart .products .product footer { text-align: left; }
    #order-standard_cart .products .product .btn-order-now { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
}

/* ---------- login, registro y tarjetas ---------- */
@media (max-width: 575.98px) {
    .login-form .card { margin-top: 4px; }
    .login-form .card-body.px-sm-5 { padding: 22px 18px; }
    .login-form .card-footer { padding: 12px 18px; font-size: 13px; }
    .card-body { padding: 1rem; }
    .primary-content .card-title { font-size: 20px; margin-bottom: 14px; }
    .header-lined h1 { font-size: 28px; }
    div.product-details div.product-icon { padding: 20px; font-size: 44px; }
    div.product-details-tab-container { padding: 14px; }
    .stat-grid { gap: 8px; }
    .tiles .tile { padding: 10px 14px; }
    .tiles .tile .stat { font-size: 32px; margin-top: 14px; }
    .tiles .tile i { font-size: 40px; right: 12px; }
    .tiles .tile:hover i { font-size: 40px; }
}

/* ---------- tablas como tarjetas (< 768 px, solo con JS: cliente-mobile.js pone .wc-cards y data-label) ---------- */
@media (max-width: 767.98px) {
    table.wc-cards { display: block; width: 100% !important; border: 0 !important; background: transparent; margin: 8px 0 !important; }
    table.wc-cards > thead { display: none; }
    table.wc-cards > tbody, table.wc-cards > tfoot { display: block; }
    table.wc-cards > tbody > tr, table.wc-cards > tfoot > tr {
        display: block; margin: 0 0 10px; padding: 4px 0; background: #fff;
        border: 1px solid #d9dee5; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    table.wc-cards > tbody > tr > td, table.wc-cards > tfoot > tr > td, table.wc-cards > tbody > tr > th {
        display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
        width: auto !important; min-width: 0; padding: 7px 12px; border: 0; border-bottom: 1px solid #eef0f3;
        background: transparent; text-align: right !important; white-space: normal; overflow-wrap: anywhere;
    }
    table.wc-cards > tbody > tr > td:last-child { border-bottom: 0; }
    table.wc-cards > tbody > tr > td[data-label]::before, table.wc-cards > tfoot > tr > td[data-label]::before {
        content: attr(data-label); flex: 0 0 auto; max-width: 48%; margin-right: auto;
        color: #6c757d; font-weight: 600; font-size: 13px; text-align: left;
    }
    table.wc-cards > tbody > tr > td[data-label=""]::before { content: none; }
    table.wc-cards > tbody > tr > td[data-label=""] { justify-content: flex-end; }
    table.wc-cards > tbody > tr > td:empty { display: none; }
    /* "No hay facturas." y otras filas de una sola celda: la tarjeta completa, centrada */
    table.wc-cards > tbody > tr > td.vacio, table.wc-cards > tbody > tr > td[colspan]:only-child { display: block; text-align: center !important; }
    /* totales (celda con colspan + monto): una línea "Saldo ........ $0.00" */
    table.wc-cards > tbody > tr.wc-cards-total { display: flex; align-items: center; justify-content: space-between; background: #f8f8f8; }
    table.wc-cards > tbody > tr.wc-cards-total > td { border: 0; background: transparent; }
    table.wc-cards > tbody > tr.wc-cards-total > td::before { content: none; }
    table.wc-cards > tbody > tr > td > * { max-width: 100%; }
    table.wc-cards tr.clicable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    table.wc-cards > tbody > tr.clicable:active { background: #f2f6fb; }
    table.wc-cards > tbody > tr.clicable:hover > td { background: transparent; }
    .table-container:has(> table.wc-cards) { background: transparent; border: 0; padding: 0; }
    .table-responsive:has(> table.wc-cards) { overflow: visible; }
    .invoice-container .card > .table-responsive:has(> table.wc-cards) { padding: 8px 8px 0; }
}

/* ---------- dedo: blancos de 44 px y campos de 16 px (cualquier ancho) ---------- */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
    select, textarea { font-size: 16px !important; } /* !important: regla de accesibilidad (zoom de iOS), gana a tamaños fijos */
    .form-control, .listtable-top .dataTables_filter input, #order-standard_cart .products .product select { height: auto; min-height: 44px; }
    textarea.form-control { min-height: 88px; }
    .input-group > .input-group-append > .btn, .input-group > .input-group-prepend > .btn { min-height: 44px; }

    /* casillas: se ven de 22 px pero el área de toque mide 44 x 44 */
    .form-check { display: flex; align-items: center; gap: 0 4px; min-height: 44px; padding-left: 0; margin-bottom: 0; }
    .form-check .form-check-input, .forma-pago input[type="radio"], .primary-content input[type="checkbox"], .primary-content input[type="radio"],
    .login-form input[type="checkbox"], .login-form input[type="radio"] {
        position: static; -webkit-appearance: none; appearance: none; flex: 0 0 auto;
        width: 44px; min-width: 44px; height: 44px; margin: 0 -8px 0 -11px; padding: 0; border: 0; border-radius: 0; vertical-align: middle;
        background: transparent no-repeat center / 22px 22px; cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='5' fill='%23fff' stroke='%238e8e93' stroke-width='1.6'/%3E%3C/svg%3E");
    }
    .form-check .form-check-input:checked, .primary-content input[type="checkbox"]:checked, .login-form input[type="checkbox"]:checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='0.5' y='0.5' width='21' height='21' rx='5' fill='%23336699'/%3E%3Cpath d='M6 11.5l3.3 3.3L16 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .form-check input[type="radio"].form-check-input, .forma-pago input[type="radio"], .primary-content input[type="radio"], .login-form input[type="radio"] {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23fff' stroke='%238e8e93' stroke-width='1.6'/%3E%3C/svg%3E");
    }
    .form-check input[type="radio"].form-check-input:checked, .forma-pago input[type="radio"]:checked, .primary-content input[type="radio"]:checked, .login-form input[type="radio"]:checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23fff' stroke='%23336699' stroke-width='1.6'/%3E%3Ccircle cx='11' cy='11' r='5.5' fill='%23336699'/%3E%3C/svg%3E");
    }
    .form-check-input:focus-visible, .primary-content input[type="checkbox"]:focus-visible, .primary-content input[type="radio"]:focus-visible { outline: 2px solid #79a6d2; outline-offset: -8px; }
    .form-check-input:disabled, .primary-content input[type="checkbox"]:disabled, .primary-content input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }
    .form-check-label { display: flex; align-items: center; min-height: 44px; flex: 1 1 auto; }
    #order-standard_cart .forma-pago label, .primary-content label:has(> input[type="checkbox"]), .primary-content label:has(> input[type="radio"]) {
        display: inline-flex; align-items: center; gap: 0 4px; min-height: 44px;
    }

    /* botones */
    .btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; touch-action: manipulation; }
    .btn-block { display: flex; width: 100%; }
    .btn-sm, .btn-xs { padding-left: 12px; padding-right: 12px; }
    .btn:active { filter: brightness(0.92); }
    .btn-link { min-height: 44px; }
    .client-home-cards .card-header .btn { margin-left: 8px; }
    #order-standard_cart .btn-remove-from-cart { min-height: 44px; padding: 0 8px 0 0; display: inline-flex; align-items: center; gap: 4px; }
    #order-standard_cart .btn-continue-shopping { display: inline-flex; align-items: center; min-height: 44px; }

    /* listas, menús, paginación, migas, pestañas y pie */
    .list-group-item-action, .sidebar .list-group-item-action { display: flex; align-items: center; min-height: 44px; }
    .sidebar .list-group-item-action .badge { order: 2; margin-left: auto; float: none; }
    .dropdown-item, header.header .dropdown-item { display: flex; align-items: center; min-height: 44px; }
    .page-link { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    .breadcrumb-item > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
    .master-breadcrumb .breadcrumb { padding-top: 0; padding-bottom: 0; }
    .nav-tabs .nav-link { display: flex; align-items: center; min-height: 44px; }
    footer.footer .nav-link { display: inline-flex; align-items: center; min-height: 44px; }
    header.header .topbar .btn { min-height: 44px; }
    .menu-principal > li > a, .menu-principal > li > button { display: inline-flex; align-items: center; min-height: 44px; }
    /* enlaces sueltos en tablas y renglones: área de toque de 44 px sin mover el texto */
    .primary-content td a, .invoice-container td a { min-width: 44px; justify-content: center; }
    .primary-content td a, .invoice-container td a, .primary-content li > a:not(.list-group-item),
    .div-service-name > a, .invoice-back a, .login-form .card-footer a, .login-form a.small, .login-form .card-body p > a:only-child,
    .client-home-cards .card-body p > a, #order-standard_cart .header-lined p > a, .text-center > a:only-child {
        display: inline-flex; align-items: center; min-height: 44px;
    }
    label { touch-action: manipulation; }
}