:root {
    --dtm-primary: #0d47a1;
    --dtm-secondary: #ff6d00;
    --dtm-success: #43a047;
    --dtm-warning: #ffc107;
    --dtm-info: #29b6f6;
    --dtm-muted: #607d8b;
    --dtm-sidebar: #13294b;
}

[data-sidebar=dark] .app-menu { background: var(--dtm-sidebar); border-right-color: rgba(255,255,255,.08); }
.app-menu {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 0 !important;
    overflow: hidden;
}
.app-menu .navbar-brand-box { flex: 0 0 auto; }
.app-menu #scrollbar {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.app-menu #scrollbar.tf-simplebar-ready { overflow: hidden; }
.app-menu #scrollbar .simplebar-content-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.app-menu #scrollbar .simplebar-track.simplebar-vertical { right: 2px; }
.app-menu #scrollbar .simplebar-scrollbar::before { opacity: .55; }
.navbar-brand-box .logo-lg img { max-height: 44px; width: auto; max-width: 190px; }
.navbar-brand-box .logo-sm img { max-height: 34px; width: auto; }
.auth-logo img { max-height: 72px; max-width: 340px; width: auto; object-fit: contain; }
.btn-primary { --vz-btn-bg: var(--dtm-primary); --vz-btn-border-color: var(--dtm-primary); --vz-btn-hover-bg: #093b89; --vz-btn-hover-border-color: #093b89; }
.text-primary { color: var(--dtm-primary) !important; }
.bg-primary { background-color: var(--dtm-primary) !important; }
.nav-tabs .nav-link.active { color: var(--dtm-primary); }
.tienda-page .quick-card { border: 0; box-shadow: 0 3px 14px rgba(19,41,75,.08); }
.tienda-page .card { border-radius: 14px; }
.tienda-page .form-control:focus,
.tienda-page .form-select:focus { border-color: var(--dtm-info); box-shadow: 0 0 0 .2rem rgba(41,182,246,.15); }

/* Login propio de De To' Market: no reutiliza la fotografía del tema base. */
.dtm-login-body { background: #f4f7fb; }
.dtm-login-shell { min-height: 100vh; padding-top: 0 !important; position: relative; overflow: hidden; }
.dtm-login-hero {
    position: absolute;
    inset: 0 0 auto;
    height: 390px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 22%, rgba(41,182,246,.42) 0 7%, transparent 7.4%),
        radial-gradient(circle at 86% 30%, rgba(255,109,0,.26) 0 8%, transparent 8.4%),
        linear-gradient(132deg, #082f73 0%, #0d47a1 54%, #1769c2 100%);
}
.dtm-login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image:
        linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
    background-size: 42px 42px;
    transform: perspective(600px) rotateX(58deg) scale(1.5) translateY(30px);
}
.dtm-login-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -80px;
    top: -95px;
    border: 36px solid rgba(255,255,255,.08);
    border-radius: 50%;
}
.dtm-login-hero .bg-overlay { background: linear-gradient(90deg, rgba(8,47,115,.1), rgba(13,71,161,.02)); opacity: 1; }
.dtm-login-hero .shape { position: absolute; right: 0; bottom: -1px; left: 0; z-index: 1; }
.dtm-login-hero .shape svg { display: block; width: 100%; height: 115px; fill: #f4f7fb; }
.dtm-login-shell .auth-page-content { position: relative; z-index: 2; padding: 38px 0 32px; }
.dtm-login-shell .auth-logo { min-height: 78px; }
.dtm-login-shell .auth-logo img { filter: drop-shadow(0 6px 18px rgba(0,0,0,.15)); }
.dtm-login-tagline { margin: 7px 0 0; color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.dtm-login-shell .login-card { border-top: 5px solid var(--dtm-secondary); box-shadow: 0 24px 60px rgba(19,41,75,.18); }
.dtm-login-shell .btn-login-main { color: #fff; background: var(--dtm-primary); border-color: var(--dtm-primary); }
.dtm-login-shell .btn-login-main:hover { background: #093b89; border-color: #093b89; }
.dtm-login-shell .login-help-box { border-color: rgba(13,71,161,.18); background: linear-gradient(135deg, rgba(13,71,161,.08), rgba(41,182,246,.10)); }
.dtm-login-shell .login-help-icon { background: var(--dtm-primary); box-shadow: 0 8px 18px rgba(13,71,161,.25); }

@media (max-width: 767.98px) {
    .tienda-page .page-content { padding-left: 0; padding-right: 0; }
    .tienda-page .container-fluid { padding-left: 12px; padding-right: 12px; }
    .modal-fullscreen-sm-down .modal-content { border-radius: 0; }
    .navbar-brand-box .logo-lg img { max-width: 150px; }
    .dtm-login-hero { height: 325px; }
    .dtm-login-shell .auth-page-content { padding-top: 24px; }
    .dtm-login-shell .auth-logo img { max-width: 260px; }
    .dtm-login-tagline { font-size: .72rem; }
}
@media (max-width: 991.98px) {
    body.tienda-menu-open { overflow: hidden; }
    .app-menu #scrollbar { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
/* Responsive foundation shared by every active De To' Market screen. */
.tf-auto-fields { display: grid; gap: .38rem; margin-top: .55rem; }
.tf-auto-field { align-items: start; display: grid; gap: .55rem; grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr); }
.tf-auto-field-label { color: #64748b; font-size: .74rem; font-weight: 700; }
.tf-auto-field-value { color: #111827; min-width: 0; overflow-wrap: anywhere; text-align: right; }
.tf-auto-card-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; margin-top: .65rem; }
.tf-responsive-tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tf-responsive-tabs .nav-link { white-space: nowrap; }

@media (max-width: 767.98px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .tienda-page .page-content { padding-top: calc(70px + .55rem) !important; }
    .tienda-page .container-fluid { max-width: 100%; padding-left: .72rem; padding-right: .72rem; }
    .tienda-page .page-heading,
    .tienda-page > .page-content .container-fluid > .d-flex:first-child { align-items: stretch !important; flex-direction: column; }
    .tienda-page .action-bar { justify-content: stretch; width: 100%; }
    .tienda-page .action-bar .btn { flex: 1 1 auto; }
    .tienda-page .card-body { max-width: 100%; overflow: hidden; padding: .72rem; }
    .tienda-page .table-responsive { max-width: 100%; overflow: visible; }
    .tienda-page .dataTables_wrapper,
    .tienda-page .dataTables_wrapper > .row,
    .tienda-page .dataTables_wrapper > .row > [class*="col-"] { max-width: 100%; width: 100%; }
    .tienda-page .dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
    .tienda-page .dataTables_wrapper > .row > [class*="col-"] { flex: 0 0 100%; padding-left: 0; padding-right: 0; }
    .tienda-page .dataTables_length,
    .tienda-page .dataTables_filter { text-align: left !important; width: 100%; }
    .tienda-page .dataTables_length label,
    .tienda-page .dataTables_filter label { display: block; font-size: .78rem; width: 100%; }
    .tienda-page .dataTables_filter input { display: block; margin: .25rem 0 0 !important; max-width: 100%; min-height: 42px; width: 100% !important; }
    .tienda-page .dataTables_length select { min-height: 40px; width: auto; }
    .tienda-page .dataTables_info,
    .tienda-page .dataTables_paginate { font-size: .78rem; text-align: center !important; width: 100%; }
    .tienda-page .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: center; }

    .tienda-page table.tf-mobile-table { border-collapse: separate !important; border-spacing: 0 .45rem !important; display: block; max-width: 100% !important; min-width: 0 !important; table-layout: fixed; width: 100% !important; }
    .tienda-page table.tf-mobile-table thead { display: none; }
    .tienda-page table.tf-mobile-table tbody { display: block; width: 100%; }
    .tienda-page table.tf-mobile-table tbody tr { background: #fff; border: 1px solid #e9edf5; border-radius: 10px; box-sizing: border-box; display: block; margin-bottom: .5rem; max-width: 100%; overflow: hidden; width: 100%; }
    .tienda-page table.tf-mobile-table tbody td { border: 0 !important; display: none; max-width: 100%; overflow: hidden; padding: .72rem !important; }
    .tienda-page table.tf-mobile-table tbody td:first-child { box-sizing: border-box; display: block; width: 100%; }
    .tienda-page table.tf-mobile-table .tf-mobile-card { display: block; }
    .tienda-page table.tf-mobile-table .tf-desktop-cell { display: none; }

    .tf-responsive-modal .modal-dialog { height: 100dvh; margin: 0; max-width: none; width: 100%; }
    .tf-responsive-modal .modal-content { border: 0; border-radius: 0; display: flex; height: 100dvh; max-height: 100dvh; }
    .tf-responsive-modal form.modal-content,
    .tf-responsive-modal form .modal-content { min-height: 0; }
    .tf-responsive-modal .modal-header { flex: 0 0 auto; }
    .tf-responsive-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .tf-responsive-modal .modal-footer { background: #fff; box-shadow: 0 -7px 18px rgba(15,23,42,.07); flex: 0 0 auto; gap: .5rem; position: sticky; bottom: 0; z-index: 4; }
    .tf-responsive-modal .modal-footer .btn { flex: 1 1 0; min-height: 44px; }
    .tf-responsive-modal .row > [class*="col-md-"],
    .tf-responsive-modal .row > [class*="col-lg-"],
    .admin-user-shell .row > [class*="col-md-"],
    .admin-user-shell .row > [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
    .tf-responsive-modal .select2-container { max-width: 100% !important; width: 100% !important; }
    .tf-responsive-modal video,
    .tf-responsive-modal iframe { max-width: 100%; width: 100%; }
    .admin-user-shell .nav-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .admin-user-shell .nav-tabs .nav-link { white-space: nowrap; }
    .admin-user-shell [style*="width:"] { max-width: 100% !important; }
    .auth-page-content .card { max-width: calc(100vw - 1.4rem); margin-left: auto; margin-right: auto; }
}
/* Responsive detail rows for editable and historical modal tables. */
@media (max-width: 767.98px) {
    .tf-detail-table { display: block; margin: 0; max-width: 100%; width: 100%; }
    .tf-detail-table thead { display: none; }
    .tf-detail-table tbody { display: block; width: 100%; }
    .tf-detail-table tbody tr { background: #fff; border: 1px solid #e5eaf2; border-radius: 10px; display: block; margin-bottom: .7rem; overflow: hidden; padding: .3rem .72rem; width: 100%; }
    .tf-detail-table tbody td { align-items: center; border: 0 !important; border-bottom: 1px solid #f0f2f6 !important; display: grid; gap: .65rem; grid-template-columns: minmax(6rem, 36%) minmax(0, 1fr); max-width: 100%; padding: .62rem 0 !important; text-align: right !important; width: 100% !important; }
    .tf-detail-table tbody td:last-child { border-bottom: 0 !important; }
    .tf-detail-table tbody td::before { color: #64748b; content: attr(data-label); font-size: .72rem; font-weight: 700; line-height: 1.2; text-align: left; }
    .tf-detail-table tbody td[colspan] { display: block; text-align: center !important; }
    .tf-detail-table tbody td[colspan]::before { display: none; }
    .tf-detail-table .form-control,
    .tf-detail-table .form-select,
    .tf-detail-table .input-group { margin-left: auto; max-width: 100%; min-height: 42px; width: 100% !important; }
    .tf-detail-table .btn { min-height: 40px; min-width: 40px; }
    .tf-detail-table tfoot { display: block; }
    .tf-detail-table tfoot tr { align-items: center; display: flex; justify-content: space-between; padding: .45rem .2rem; }
    .tf-detail-table tfoot th { border: 0; display: block; padding: .45rem; }
    .tf-detail-table tfoot th[colspan] { flex: 1 1 auto; }

    .tienda-page .row.g-2 > [class*="col-md-"],
    .tienda-page .row.g-3 > [class*="col-md-"] { min-width: 0; }
    .tienda-page .btn { min-height: 40px; }
    .tienda-page .form-control,
    .tienda-page .form-select,
    .tienda-page .select2-selection { max-width: 100%; }
}