/* ==========================================================
   TC STORE - RESPONSIVE GLOBAL
   Corrige sidebar, topbar, tablas, formularios, reportes,
   cards, modales y POS para tablet y móvil.
   ========================================================== */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

button,
input,
select,
textarea {
    max-width: 100%;
}

.main-section {
    min-width: 0;
}

.content-area {
    min-width: 0;
}

.sidebar-backdrop {
    display: none;
}

.mobile-menu-button {
    display: none;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

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

.topbar-title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Evita que tablas, filtros y formularios rompan el ancho */
.table-card,
.company-card,
.report-panel,
.report-filter-card,
.module-table-card,
.cash-summary-card,
.detail-grid-card,
.receivable-stat-card,
.payable-stat-card,
.inventory-stat-card,
.customer-stat-card,
.audit-stat-card,
.stat-card,
.report-kpi-card,
.info-box,
.pos-cart-card,
.pos-product-card {
    min-width: 0;
}

.table-responsive,
.compact-table-wrapper,
.receipt-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table,
.compact-table-wrapper table,
.receipt-table-wrap table,
.data-table,
.compact-table,
.receipt-table {
    width: 100%;
}

.data-table th,
.data-table td,
.compact-table th,
.compact-table td {
    white-space: nowrap;
}

.data-table td:first-child,
.compact-table td:first-child {
    white-space: normal;
}

.row-actions,
.reports-actions,
.inventory-actions,
.table-actions,
.form-actions,
.pos-title-actions {
    min-width: 0;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1180px) {
    .stats-grid,
    .report-kpi-grid,
    .dashboard-kpi-grid,
    .module-stats,
    .customers-stats,
    .inventory-stats,
    .audit-stats,
    .reports-kpi-grid,
    .sales-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .reports-grid-two,
    .dashboard-panels-grid,
    .detail-grid,
    .cash-detail-grid,
    .receipt-bottom-grid,
    .bottom {
        grid-template-columns: 1fr !important;
    }

    .pos-modern-shell {
        grid-template-columns: 1fr !important;
    }

    .pos-cart-card {
        position: static !important;
    }

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

/* ==========================================================
   SIDEBAR MÓVIL / TABLET
   ========================================================== */

@media (max-width: 1050px) {
    .app-shell {
        display: block !important;
        min-height: 100vh;
    }

    .main-section {
        width: 100%;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 2200 !important;
        display: flex !important;
        width: min(310px, 86vw) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 18px 0 55px rgba(0, 0, 0, .25);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 2100;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(18, 10, 8, .48);
        backdrop-filter: blur(3px);
        transition: opacity .22s ease, visibility .22s ease;
    }

    body.sidebar-open .sidebar-backdrop {
        visibility: visible;
        opacity: 1;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    .mobile-menu-button {
        display: inline-grid;
        place-items: center;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border: 1px solid var(--borde);
        border-radius: 13px;
        background: var(--blanco);
        color: var(--texto);
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(47, 24, 20, .06);
    }

    .mobile-menu-button span {
        display: block;
        width: 18px;
        height: 2px;
        margin: 2px 0;
        border-radius: 999px;
        background: currentColor;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 1200;
        min-height: 74px;
        padding: 14px 18px !important;
    }

    .topbar h1 {
        font-size: 20px;
    }

    .content-area {
        padding: 20px !important;
    }

    .welcome-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .welcome-date {
        align-self: flex-start;
    }
}

/* ==========================================================
   MÓVIL GENERAL
   ========================================================== */

@media (max-width: 760px) {
    .content-area {
        padding: 14px !important;
    }

    .topbar {
        gap: 12px;
    }

    .topbar-left {
        gap: 10px;
        min-width: 0;
    }

    .topbar-label {
        font-size: 9px;
    }

    .topbar h1 {
        max-width: 46vw;
        font-size: 18px;
    }

    .user-session {
        gap: 8px;
        max-width: 42vw;
    }

    .user-avatar {
        width: 35px;
        height: 35px;
        flex: 0 0 auto;
    }

    .user-session strong {
        display: block;
        max-width: 118px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }

    .user-session small {
        display: none !important;
    }

    .welcome-panel,
    .company-card,
    .table-card,
    .report-panel,
    .report-filter-card,
    .module-table-card,
    .cash-summary-card,
    .detail-grid-card {
        border-radius: 16px !important;
    }

    .welcome-panel {
        padding: 20px !important;
    }

    .welcome-panel h2 {
        font-size: 22px !important;
        line-height: 1.15;
    }

    .welcome-panel p {
        font-size: 13px;
    }

    .page-heading,
    .users-heading,
    .customers-heading,
    .inventory-heading,
    .reports-heading,
    .sales-heading,
    .company-heading {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .page-heading h2,
    .users-heading h2,
    .customers-heading h2,
    .inventory-heading h2,
    .reports-heading h2,
    .sales-heading h2 {
        font-size: 22px !important;
        line-height: 1.18;
    }

    .page-heading p,
    .users-heading p,
    .customers-heading p,
    .inventory-heading p,
    .reports-heading p,
    .sales-heading p {
        font-size: 13px;
    }

    .row-actions,
    .reports-actions,
    .inventory-actions,
    .table-actions,
    .form-actions,
    .pos-title-actions {
        width: 100%;
        justify-content: stretch !important;
        flex-direction: column !important;
        gap: 9px !important;
    }

    .row-actions > *,
    .reports-actions > *,
    .inventory-actions > *,
    .table-actions > *,
    .form-actions > *,
    .pos-title-actions > *,
    .btn-primary,
    .btn-secondary,
    .new-user-button,
    .btn-search,
    .btn-clear-search,
    .action-button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .stats-grid,
    .report-kpi-grid,
    .dashboard-kpi-grid,
    .module-stats,
    .customers-stats,
    .inventory-stats,
    .audit-stats,
    .reports-kpi-grid,
    .sales-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .stat-card,
    .report-kpi-card,
    .audit-stat-card,
    .inventory-stat-card,
    .customer-stat-card,
    .receivable-stat-card,
    .payable-stat-card {
        min-height: auto !important;
        padding: 18px !important;
    }

    .company-form,
    .company-card,
    .table-card,
    .report-panel,
    .module-table-card {
        padding: 16px !important;
    }

    .report-panel {
        padding: 0 !important;
    }

    .report-panel .panel-header,
    .panel-header,
    .table-toolbar,
    .card-title-area {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .form-grid,
    .pos-form-grid,
    .filter-grid,
    .filters-form,
    .report-filter-grid,
    .detail-grid,
    .cash-detail-grid,
    .receipt-info-grid,
    .info-grid,
    .bottom,
    .signatures {
        grid-template-columns: 1fr !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    .filter-select,
    .search-form input,
    .company-form input,
    .company-form select,
    .company-form textarea {
        width: 100%;
        min-width: 0;
    }

    .search-form,
    .filters-form,
    .report-filter-card form,
    .table-toolbar form {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .table-responsive {
        margin-left: -2px;
        margin-right: -2px;
        padding-bottom: 4px;
    }

    .data-table,
    .compact-table {
        min-width: 720px;
    }

    .table-pagination {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .pagination-link,
    .pagination-current,
    .pagination-disabled {
        width: 100%;
        justify-content: center;
    }

    .app-toast {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ==========================================================
   MÓVIL PEQUEÑO
   ========================================================== */

@media (max-width: 520px) {
    .content-area {
        padding: 12px !important;
    }

    .topbar {
        padding: 12px !important;
    }

    .mobile-menu-button {
        width: 39px;
        height: 39px;
        border-radius: 12px;
    }

    .topbar h1 {
        max-width: 42vw;
        font-size: 16px;
    }

    .user-session {
        max-width: 38vw;
    }

    .user-session strong {
        max-width: 96px;
    }

    .welcome-badge,
    .section-label {
        font-size: 9px !important;
        letter-spacing: .9px;
    }

    .welcome-panel h2,
    .page-heading h2,
    .users-heading h2,
    .customers-heading h2,
    .inventory-heading h2,
    .reports-heading h2 {
        font-size: 20px !important;
    }

    .company-card,
    .table-card,
    .company-form {
        padding: 14px !important;
    }

    .data-table,
    .compact-table {
        min-width: 650px;
    }
}

/* ==========================================================
   POS / NUEVA VENTA
   ========================================================== */

@media (max-width: 1180px) {
    .pos-modern-page {
        margin: 0 !important;
    }

    .pos-blackbar {
        border-radius: 18px !important;
    }

    .pos-modern-shell {
        grid-template-columns: 1fr !important;
    }

    .pos-cart-card {
        position: static !important;
    }
}

@media (max-width: 900px) {
    .pos-blackbar {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .pos-blackbar-left,
    .pos-blackbar-right {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 9px !important;
    }

    .pos-top-pill {
        width: 100% !important;
        min-width: 0 !important;
    }

    .pos-title-row {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .pos-title-row h2 {
        font-size: 24px !important;
    }

    .pos-context-grid {
        grid-template-columns: 1fr !important;
    }

    .pos-search-card {
        grid-template-columns: 1fr !important;
    }

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

    .pos-product-image {
        height: 150px !important;
    }
}

@media (max-width: 620px) {
    .pos-products-grid {
        grid-template-columns: 1fr !important;
    }

    .pos-category-pills {
        gap: 8px !important;
        padding-bottom: 10px !important;
    }

    .pos-category-pill {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }

    .pos-payment-methods,
    .pos-payment-extra {
        grid-template-columns: 1fr !important;
    }

    .pos-payment-methods .credit-btn,
    .pos-payment-extra input[style] {
        grid-column: auto !important;
    }

    .pos-cart-header,
    .pos-cart-context,
    .pos-cart-note,
    .pos-cart-totals {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .pos-charge-button {
        width: calc(100% - 28px) !important;
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    .quick-client-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .quick-client-modal {
        width: 100% !important;
        border-radius: 22px 22px 0 0 !important;
    }
}

/* ==========================================================
   LOGIN RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {
    .auth-container {
        grid-template-columns: 1fr !important;
    }

    .login-brand {
        min-height: auto !important;
        padding: 38px 24px !important;
    }

    .login-form-section {
        padding: 24px !important;
    }
}

@media (max-width: 520px) {
    .login-brand {
        padding: 30px 20px !important;
    }

    .login-card {
        padding: 26px 20px !important;
        border-radius: 20px !important;
    }

    .login-card h2 {
        font-size: 24px !important;
    }
}

/* ==========================================================
   PRINT
   ========================================================== */

@media print {
    .mobile-menu-button,
    .sidebar-backdrop {
        display: none !important;
    }
}