/* NaymCreaciones — universal responsive and cross-device polish.
   Loaded last to provide predictable behaviour on desktop, laptop, tablet and mobile. */

:root {
    --ux-safe-top: env(safe-area-inset-top, 0px);
    --ux-safe-right: env(safe-area-inset-right, 0px);
    --ux-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ux-safe-left: env(safe-area-inset-left, 0px);
}

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

body {
    min-width: 320px;
}

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

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

:where(a, button, summary, input, select, textarea) {
    -webkit-tap-highlight-color: rgba(232, 146, 134, .2);
}

.table-wrap,
.admin-body .panel:has(> table),
.admin-body .restock-table,
.admin-body .supplier-invoices,
.admin-body .sale-items {
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

/* Compact laptops and large tablets use an app-like navigation instead of a crushed header. */
@media (min-width: 701px) and (max-width: 1100px) {
    body:not(.admin-body):not(.customer-auth-page) {
        padding-bottom: calc(96px + var(--ux-safe-bottom));
    }

    body:not(.admin-body) .site-header {
        height: 76px;
    }

    body:not(.admin-body) .header-inner {
        width: calc(100% - 40px);
    }

    body:not(.admin-body) .site-header nav > a {
        display: none !important;
    }

    body:not(.admin-body) .site-header nav {
        width: auto;
        margin-left: auto;
    }

    body:not(.admin-body) .mobile-dock {
        position: fixed;
        z-index: 80;
        left: 50%;
        bottom: calc(12px + var(--ux-safe-bottom));
        display: grid;
        width: min(560px, calc(100vw - 36px));
        height: 70px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 6px;
        color: #fff;
        background: rgba(31, 28, 28, .95);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 23px;
        box-shadow: 0 18px 48px rgba(40, 29, 29, .26);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        transform: translateX(-50%);
    }

    body:not(.admin-body) .mobile-dock.has-five-items {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    body:not(.admin-body) .mobile-dock a {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 56px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #d9d3d0;
        border-radius: 17px;
    }

    body:not(.admin-body) .mobile-dock a.is-active {
        color: #302829;
        background: #efbbb5;
    }

    body:not(.admin-body) .mobile-dock a span {
        font-size: 19px;
        line-height: 1;
    }

    body:not(.admin-body) .mobile-dock a small {
        font-size: 8px;
        font-weight: 800;
    }

    body:not(.admin-body) .mobile-dock a b {
        position: absolute;
        top: 1px;
        right: 17%;
        display: grid;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        place-items: center;
        color: #302829;
        background: #ef8f7d;
        border-radius: 99px;
        font-size: 8px;
        box-shadow: 0 0 0 2px #1f1c1c;
    }
}

/* Administrative workspace: larger controls and clearer density on touch screens. */
.admin-menu-backdrop {
    display: none;
}

@media (max-width: 900px) {
    .admin-body .sidebar-toggle {
        min-width: 96px;
        min-height: 48px;
        justify-content: center;
        padding: 10px 14px;
    }

    .admin-body .sidebar.is-open {
        padding-bottom: calc(18px + var(--ux-safe-bottom)) !important;
    }

    .admin-body .sidebar.is-open nav a {
        min-height: 48px;
        padding: 11px 12px;
        border-radius: 10px;
    }

    .admin-body .sidebar.is-open nav a:focus-visible,
    .admin-body .sidebar.is-open nav a:hover {
        background: rgba(255, 255, 255, .1);
    }

    .admin-body .admin-main > header {
        gap: 18px;
    }

    .admin-body .admin-alerts > summary {
        width: 48px;
        height: 48px;
    }

    .admin-body .admin-logout button {
        min-height: 48px;
    }

    .admin-body .operation-order-action,
    .admin-body .table-action,
    .admin-body .panel-head a,
    .admin-body .dashboard-sales > header a,
    .admin-body .dashboard-sales article a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        padding-block: 8px;
    }

    .admin-body .panel,
    .admin-body .module-panel,
    .admin-body .growth-panel {
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .admin-body .admin-main {
        padding-right: max(14px, var(--ux-safe-right));
        padding-left: max(14px, var(--ux-safe-left));
    }

    .admin-body .admin-main > header h1 {
        font-size: clamp(34px, 11vw, 46px) !important;
        line-height: .98;
        overflow-wrap: anywhere;
    }

    .admin-body .admin-main > header {
        align-items: flex-start;
    }

    .admin-body .admin-user {
        min-width: 0;
    }

    .admin-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .admin-body select,
    .admin-body textarea {
        min-height: 48px;
        font-size: 16px !important;
    }

    .admin-body textarea {
        line-height: 1.5;
    }

    .admin-body form button:not(.payment-delete button):not(.slider-module-delete button),
    .admin-body .button,
    .admin-body details > summary {
        min-height: 44px;
    }

    .admin-body .metric-grid article,
    .admin-body .growth-metrics article,
    .admin-body .payment-metrics article,
    .admin-body .supplier-metrics article {
        min-height: 144px;
    }

    .admin-body .metric-grid article strong,
    .admin-body .growth-metrics article b {
        font-size: clamp(30px, 9vw, 38px);
    }

    .admin-body .panel,
    .admin-body .module-panel,
    .admin-body .growth-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .admin-body table {
        font-size: 11px;
    }

    .admin-body th,
    .admin-body td {
        padding: 12px 10px;
    }
}

@media (max-width: 430px) {
    .admin-body .sidebar {
        padding-right: max(12px, var(--ux-safe-right)) !important;
        padding-left: max(12px, var(--ux-safe-left)) !important;
    }

    .admin-body .sidebar-toggle {
        min-width: 88px;
    }

    .admin-body .sidebar.is-open nav {
        grid-template-columns: 1fr !important;
    }

    .admin-body .sidebar.is-open nav .nav-label {
        grid-column: 1 !important;
    }

    .admin-body .admin-header-actions {
        flex-wrap: nowrap;
    }

    .admin-body .admin-alerts > div {
        position: fixed;
        top: 94px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - 112px);
        overflow-y: auto;
    }

    .admin-body .metric-grid,
    .admin-body .growth-metrics,
    .admin-body .payment-metrics,
    .admin-body .supplier-metrics {
        grid-template-columns: 1fr !important;
    }
}

/* Short landscape screens keep actions reachable without sacrificing the content area. */
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
    body:not(.admin-body) {
        padding-bottom: calc(68px + var(--ux-safe-bottom));
    }

    body:not(.admin-body) .mobile-dock {
        bottom: calc(5px + var(--ux-safe-bottom));
        height: 58px;
        padding: 4px;
        border-radius: 18px;
    }

    body:not(.admin-body) .mobile-dock a {
        min-height: 48px;
    }

    body:not(.admin-body) .mobile-dock a small {
        display: none;
    }

    body:not(.admin-body) .showcase-slider,
    body:not(.admin-body) .showcase-slider.slider-module {
        min-height: 520px;
    }

    .admin-body .sidebar.is-open {
        grid-template-rows: auto 1fr;
    }
}

/* Opaque fallbacks for older Safari/WebView versions without backdrop-filter. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .site-header,
    .mobile-dock,
    .cart-drawer-panel,
    .catalog-advanced[open] > div {
        background-color: #fffaf6;
    }

    .mobile-dock {
        color: #fff;
        background-color: #1f1c1c;
    }
}

@supports not (height: 100dvh) {
    .admin-body .sidebar.is-open,
    .product-lightbox {
        height: 100vh;
    }

    .cart-drawer-panel,
    .quick-view-modal {
        max-height: 88vh;
    }
}

@media (prefers-contrast: more) {
    :where(a, button, input, select, textarea, summary):focus-visible {
        outline-width: 4px;
    }

    .mobile-dock,
    .admin-body .panel,
    .atelier-product-card {
        border-width: 2px;
    }
}