/* =====================================================================
   WIIMSTORE / SISTEMA PLUS — RESPONSIVE MOBILE v1.0
   Capa global no destructiva. Se carga al final de todos los módulos.
   ===================================================================== */

:root {
    --wiim-mobile-gutter: 14px;
    --wiim-touch-size: 44px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
}

button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Contenedores y tablas: evita que un módulo rompa el ancho completo. */
.content-area > *,
.module-page,
.products-page,
.contact-page,
.ur-page,
.settings-page,
.dashboard-page,
.bi-page,
.trace-page,
.inventory-page,
.warehouse-page,
.transfer-page,
.cash-page,
.report-page,
.pos-page {
    min-width: 0;
    max-width: 100%;
}

.table-wrap,
.bi-table-wrap,
.tabla-responsive,
.table-responsive,
.wiim-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.wiim-table-scroll > table,
.table-wrap > table,
.bi-table-wrap > table,
.tabla-responsive > table,
.table-responsive > table {
    min-width: 720px;
}

/* Evita desbordes en textos y controles. */
td, th, .card, .module-card, .bi-card, .ur-card, .contact-card,
.form-card, .settings-card, .trace-card, .ent-card {
    min-width: 0;
}

td, th, p, span, strong, small, label, a {
    overflow-wrap: anywhere;
}

input, select, textarea, .form-control, .form-select {
    max-width: 100%;
}

@media (max-width: 991px) {
    .sidebar {
        width: min(86vw, 300px) !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar-brand {
        padding-top: env(safe-area-inset-top);
    }

    .sidebar-overlay {
        backdrop-filter: blur(2px);
    }

    .content-area {
        width: 100%;
    }

    .topbar {
        padding-top: env(safe-area-inset-top);
    }

    /* Cabeceras de módulos */
    .module-header,
    .page-header,
    .products-header,
    .warehouse-header,
    .inventory-header,
    .settings-header,
    .bi-header,
    .trace-header,
    .contact-header,
    .ur-header,
    .section-header,
    .panel-header {
        align-items: flex-start !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    .module-header > div:first-child,
    .page-header > div:first-child,
    .products-header > div:first-child,
    .warehouse-header > div:first-child,
    .inventory-header > div:first-child,
    .settings-header > div:first-child,
    .bi-header > div:first-child,
    .trace-header > div:first-child,
    .contact-header > div:first-child,
    .ur-header > div:first-child {
        min-width: 0;
        flex: 1 1 240px;
    }

    .module-actions,
    .page-actions,
    .header-actions,
    .form-actions,
    .card-actions,
    .toolbar-actions,
    .actions,
    .filters-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        max-width: 100%;
    }

    /* Rejillas de KPIs y formularios */
    .bi-kpi-grid,
    .bi-kpi-grid-4,
    .stats-grid,
    .kpi-grid,
    .dashboard-grid,
    .summary-grid,
    .cards-grid,
    .module-grid,
    .contact-grid,
    .settings-grid,
    .settings-form-grid,
    .form-grid,
    .fields-grid,
    .product-form-grid,
    .warehouse-grid,
    .inventory-grid,
    .reports-grid,
    .trace-grid,
    .row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .span-2,
    .field-span-2,
    .full,
    .col-span-2,
    .grid-full {
        grid-column: 1 / -1 !important;
    }

    /* Layouts laterales pasan a una sola columna en tablet. */
    .product-form-layout,
    .product-detail-layout,
    .settings-layout,
    .warehouse-detail-grid,
    .trace-layout,
    .report-layout,
    .cash-layout,
    .pos-layout,
    .split-layout,
    .two-column-layout {
        grid-template-columns: 1fr !important;
    }

    .settings-sidebar,
    .detail-sidebar,
    .summary-sidebar {
        position: static !important;
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    :root {
        --wiim-mobile-gutter: 12px;
        --topbar-height: 62px;
    }

    body.erp-body {
        min-width: 320px;
    }

    .topbar {
        min-height: var(--topbar-height);
        padding-inline: 10px !important;
        gap: 8px !important;
    }

    .topbar-left {
        min-width: 0;
        flex: 1 1 auto;
        gap: 8px !important;
    }

    .topbar-heading {
        min-width: 0;
    }

    .topbar-heading h1 {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px !important;
    }

    .topbar-actions {
        flex: 0 0 auto;
        gap: 5px !important;
    }

    .topbar-actions > .icon-button:not(:first-child) {
        display: none;
    }

    .user-menu {
        padding-left: 5px !important;
        border-left: 0 !important;
        gap: 5px !important;
    }

    .user-avatar,
    .icon-button,
    .sidebar-toggle {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        border-radius: 11px !important;
    }

    .logout-button {
        width: 38px;
        height: 38px;
    }

    .content-area {
        min-height: calc(100vh - var(--topbar-height));
    }

    /* Normaliza el padding interno de páginas creadas por distintos módulos. */
    .module-page,
    .products-page,
    .contact-page,
    .ur-page,
    .settings-page,
    .dashboard-page,
    .bi-page,
    .trace-page,
    .inventory-page,
    .warehouse-page,
    .transfer-page,
    .cash-page,
    .report-page,
    .pos-page,
    .content-wrapper,
    .page-content {
        padding: 16px var(--wiim-mobile-gutter) 24px !important;
    }

    .alert {
        margin: 12px var(--wiim-mobile-gutter) 0 !important;
    }

    h1, .h1 { font-size: 22px !important; }
    h2, .h2 { font-size: 19px !important; }
    h3, .h3 { font-size: 17px !important; }

    /* Una sola columna real en teléfono. */
    .bi-kpi-grid,
    .bi-kpi-grid-4,
    .stats-grid,
    .kpi-grid,
    .dashboard-grid,
    .summary-grid,
    .cards-grid,
    .module-grid,
    .contact-grid,
    .settings-grid,
    .settings-form-grid,
    .form-grid,
    .fields-grid,
    .product-form-grid,
    .warehouse-grid,
    .inventory-grid,
    .reports-grid,
    .trace-grid,
    .row,
    .product-form-layout,
    .product-detail-layout,
    .settings-layout,
    .warehouse-detail-grid,
    .trace-layout,
    .report-layout,
    .cash-layout,
    .split-layout,
    .two-column-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bi-kpi,
    .stat-card,
    .module-card,
    .bi-card,
    .ur-card,
    .contact-card,
    .form-card,
    .settings-card,
    .trace-card,
    .ent-card,
    .card {
        border-radius: 12px !important;
    }

    /* Filtros: cada control utiliza todo el ancho. */
    .filters,
    .filter-bar,
    .filters-bar,
    .toolbar,
    .search-toolbar,
    .table-toolbar,
    .module-filters,
    .report-filters,
    .inventory-filters,
    .products-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .filters > *,
    .filter-bar > *,
    .filters-bar > *,
    .toolbar > *,
    .search-toolbar > *,
    .table-toolbar > *,
    .module-filters > *,
    .report-filters > *,
    .inventory-filters > *,
    .products-filters > * {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .btn,
    .contact-btn,
    .ur-btn {
        min-height: var(--wiim-touch-size) !important;
    }

    .module-actions,
    .page-actions,
    .header-actions,
    .form-actions {
        width: 100%;
    }

    .module-actions .btn,
    .page-actions .btn,
    .header-actions .btn,
    .form-actions .btn,
    .module-actions .contact-btn,
    .page-actions .contact-btn {
        flex: 1 1 145px;
    }

    /* Tablas cómodas: scroll horizontal, encabezado legible y acciones accesibles. */
    .wiim-table-scroll,
    .table-wrap,
    .bi-table-wrap,
    .tabla-responsive,
    .table-responsive {
        margin-inline: 0;
        border-radius: 10px;
        border: 1px solid var(--wiim-border, var(--border));
        background: var(--white);
    }

    .wiim-table-scroll > table,
    .table-wrap > table,
    .bi-table-wrap > table,
    .tabla-responsive > table,
    .table-responsive > table {
        min-width: 680px !important;
    }

    table th,
    table td,
    .table th,
    .table td {
        padding: 11px 12px !important;
        white-space: nowrap;
    }

    table td:first-child,
    table th:first-child {
        padding-left: 14px !important;
    }

    /* Formularios y modales */
    .field,
    .campo,
    .form-group,
    .wa-field,
    .client-field {
        min-width: 0 !important;
        width: 100%;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select {
        width: 100%;
        font-size: 16px !important; /* evita zoom automático en iPhone */
    }

    textarea {
        min-height: 110px;
    }

    .modal,
    .pos-modal {
        padding: 10px !important;
    }

    .modal-dialog,
    .pos-modal__dialog,
    .modal-content {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
    }

    .modal-body,
    .modal-header,
    .modal-footer {
        padding-inline: 14px !important;
    }

    .modal-footer {
        flex-wrap: wrap;
    }

    .modal-footer .btn {
        flex: 1 1 130px;
    }

    /* POS: mantiene catálogo y carrito utilizables sin comprimirlos. */
    .pos-layout,
    .pos-main,
    .pos-shell,
    .pos-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .pos-products,
    .pos-catalog,
    .pos-cart,
    .pos-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }

    .pos-product-grid,
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .pos-cart {
        max-height: none !important;
    }

    /* Login */
    .auth-shell {
        grid-template-columns: 1fr !important;
    }

    .auth-showcase {
        display: none !important;
    }

    .auth-panel {
        min-height: 100vh;
        padding: 24px 18px !important;
    }

    .auth-card__mobile-logo {
        display: grid !important;
        margin: 0 auto 20px;
    }
}

@media (max-width: 390px) {
    .topbar-heading h1 {
        max-width: 34vw;
    }

    .topbar-actions > .icon-button {
        display: none !important;
    }

    .pos-product-grid,
    .products-grid {
        grid-template-columns: 1fr !important;
    }

    .module-actions .btn,
    .page-actions .btn,
    .header-actions .btn,
    .form-actions .btn {
        flex-basis: 100%;
    }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 991px) {
    .sidebar-brand {
        min-height: 58px;
    }

    .sidebar-nav {
        padding-top: 8px;
    }

    .nav-item {
        min-height: 38px;
    }
}

/* =====================================================================
   LOGIN RESPONSIVE — corrección v1.1
   La vista de acceso es independiente del layout principal.
   ===================================================================== */
@media (max-width: 768px) {
    body.auth-page {
        min-width: 320px;
        min-height: 100dvh;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 15% 10%, rgba(90,54,255,.10), transparent 34%),
            linear-gradient(180deg, #f5f7ff 0%, #eef3fb 100%);
    }

    .auth-shell {
        display: block !important;
        width: 100% !important;
        min-height: 100dvh !important;
    }

    .auth-showcase {
        display: none !important;
    }

    .auth-panel {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh !important;
        padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom)) !important;
        background: transparent !important;
    }

    .auth-card {
        width: 100% !important;
        max-width: 430px !important;
        min-width: 0 !important;
        padding: 26px 20px 22px !important;
        border: 1px solid rgba(218,224,238,.95);
        border-radius: 20px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 18px 50px rgba(31,35,60,.12);
    }

    .auth-card__mobile-logo {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        margin: 0 0 24px !important;
    }

    .auth-card__mobile-logo .auth-logo__icon {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px;
        border: 1px solid var(--border);
        box-shadow: 0 8px 22px rgba(31,35,60,.08);
    }

    .auth-card__mobile-logo > div {
        min-width: 0;
    }

    .auth-card__mobile-logo strong,
    .auth-card__mobile-logo small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .auth-card__mobile-logo strong {
        color: var(--text);
        font-size: 17px;
        line-height: 1.25;
    }

    .auth-card__mobile-logo small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 12px;
    }

    .auth-eyebrow {
        display: block;
        font-size: 12px !important;
        letter-spacing: 1.35px;
    }

    .auth-card h2 {
        margin: 8px 0 7px !important;
        font-size: 28px !important;
        line-height: 1.15;
    }

    .auth-description {
        margin-bottom: 24px !important;
        line-height: 1.55;
    }

    .auth-form,
    .form-group,
    .input-icon {
        width: 100%;
        min-width: 0;
    }

    .form-group {
        margin-bottom: 16px !important;
    }

    .input-icon input {
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }

    .password-toggle {
        top: 9px !important;
        right: 8px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .remember-check {
        align-items: flex-start !important;
        margin: 4px 0 20px !important;
        line-height: 1.35;
    }

    .remember-check input {
        flex: 0 0 auto;
        width: 17px;
        height: 17px;
        margin-top: 1px;
    }

    .btn-login {
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        padding: 0 18px !important;
        border-radius: 12px !important;
    }

    .auth-footer {
        margin: 22px 0 0 !important;
        line-height: 1.45;
    }
}

@media (max-width: 390px) {
    .auth-panel {
        align-items: flex-start !important;
        padding-inline: 12px !important;
    }

    .auth-card {
        padding: 22px 16px 18px !important;
        border-radius: 17px;
    }

    .auth-card h2 {
        font-size: 25px !important;
    }
}

/* Tipografía de campos móviles: estándar global WiimStore */
@media (max-width:768px){
  input,select,textarea,.form-control,.form-select{font-size:13px!important}
}