:root {
    --brand-dark: #002b62;
    --brand: #09388b;
    --brand-mid: #165dc9;
    --brand-focus: #0d47a1;
    --ink: #1f2937;
    --muted: #64748b;
    --line: #dbe4f0;
    --surface: rgba(255, 255, 255, 0.98);
    --app-bg: #f0f4f8;
    --shadow-blue: 0 8px 24px rgba(0, 43, 98, 0.12);
    --scanner-frame-top: 44%;
    --scanner-frame-width: min(82vw, 440px);
    --scanner-frame-height: min(28vh, 230px);
    --scanner-frame-radius: 18px;
    --scanner-corner-size: 34px;
    --scanner-corner-thickness: 4px;
}

html, body {
    min-height: 100%;
    background: var(--app-bg);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.module-home {
    width: min(980px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.module-home-header {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 0.2rem 0.2rem;
}

.module-home-header span {
    color: var(--brand);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.module-home-header h1 {
    margin: 0;
    color: var(--brand-dark);
    font-size: clamp(2rem, 8vw, 3.6rem);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
}

.module-home-header p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 650;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.8rem;
}

.module-card {
    display: grid;
    min-height: 150px;
    align-content: start;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-blue);
    color: var(--ink);
    text-align: left;
    transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.module-card:active {
    transform: scale(0.985);
}

.module-card:hover {
    border-color: var(--brand-mid);
    box-shadow: 0 14px 34px rgba(0, 43, 98, 0.16);
}

.module-card strong {
    color: var(--brand-dark);
    font-size: 1.1rem;
    font-weight: 900;
}

.module-card small {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.28;
}

.module-icon {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 8px;
    background: #eef5ff;
    border: 1px solid #dbe4f0;
    position: relative;
}

.module-icon::before,
.module-icon::after {
    content: "";
    position: absolute;
    background: var(--brand);
}

.module-icon::before {
    inset: 0.7rem 0.55rem auto;
    height: 0.35rem;
}

.module-icon::after {
    inset: 1.35rem 0.55rem auto;
    height: 0.35rem;
}

.module-icon-salon {
    background: #edf9f3;
}

.module-icon-salon::before,
.module-icon-salon::after {
    background: #14804a;
}

.module-icon-sep {
    background: #fff4ed;
}

.module-icon-sep::before,
.module-icon-sep::after {
    background: #c65f18;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.barcode-scan-icon,
.camera-switch-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.camera-switch-icon {
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 0-15-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3 12a9 9 0 0 0 15 6.7l3-2.7'/%3E%3Cpath d='M21 21v-5h-5'/%3E%3C/svg%3E");
}

.scanner-flash-icon {
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8l1-8Z'/%3E%3C/svg%3E");
}

.scanner-modal-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(0, 43, 98, 0.72) 0%, rgba(0, 43, 98, 0) 100%);
    pointer-events: none;
}

.scanner-modal-content {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: #000000;
}

.scanner-modal-content .modal-body {
    min-height: 100dvh;
}

.scanner-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    pointer-events: auto;
}

.scanner-camera-switch-inline,
.scanner-close-button {
    pointer-events: auto;
}

#scannerContainer {
    width: 100%;
    min-height: 100dvh;
    background: #000000;
}

#scannerContainer video {
    width: 100% !important;
    min-height: 100dvh;
    object-fit: cover;
}

/* These scanners already render their own viewfinder with the red guide line. */
.app-scanner-single-frame #qr-shaded-region {
    display: none !important;
}

.scanner-camera-switch-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.85rem;
    padding: 0.68rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    background: rgba(0, 43, 98, 0.78);
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 8px 24px rgba(0, 43, 98, 0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.scanner-camera-switch-inline:disabled {
    opacity: 0.65;
}

.scanner-close-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.85rem;
    height: 2.85rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    background: rgba(0, 43, 98, 0.78);
    box-shadow: 0 8px 24px rgba(0, 43, 98, 0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
}

.scanner-close-button::before,
.scanner-close-button::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
}

.scanner-close-button::before {
    transform: rotate(45deg);
}

.scanner-close-button::after {
    transform: rotate(-45deg);
}

.app-scanner-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.app-scanner-viewfinder {
    position: absolute;
    top: var(--scanner-frame-top);
    left: 50%;
    width: var(--scanner-frame-width);
    height: var(--scanner-frame-height);
    transform: translate(-50%, -50%);
    border-radius: var(--scanner-frame-radius);
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.58);
}

.app-scanner-corner {
    position: absolute;
    width: var(--scanner-corner-size);
    height: var(--scanner-corner-size);
    border: var(--scanner-corner-thickness) solid #ffffff;
}

.app-scanner-corner.top-left {
    top: -2px;
    left: -2px;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: var(--scanner-frame-radius);
}

.app-scanner-corner.top-right {
    top: -2px;
    right: -2px;
    border-left: 0;
    border-bottom: 0;
    border-top-right-radius: var(--scanner-frame-radius);
}

.app-scanner-corner.bottom-left {
    bottom: -2px;
    left: -2px;
    border-right: 0;
    border-top: 0;
    border-bottom-left-radius: var(--scanner-frame-radius);
}

.app-scanner-corner.bottom-right {
    right: -2px;
    bottom: -2px;
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: var(--scanner-frame-radius);
}

.app-scan-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #ff2d20;
    box-shadow: 0 0 14px rgba(255, 45, 32, 0.95);
}

.app-scanner-overlay p {
    position: absolute;
    right: 0;
    bottom: 25%;
    left: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

.ingresos-app {
    min-height: 100dvh;
    background: var(--app-bg);
    color: var(--ink);
}

.control-picking-app {
    --control-accent: #0f7f89;
    --control-accent-strong: #53318f;
    --control-green: #168a48;
    --control-warning: #c47a00;
    --control-danger: #bc2435;
    --control-picking-top-offset: 0px;
    --control-picking-fixed-card-height: 20dvh;
    --control-picking-actionbar-height: 76px;
    padding-bottom: calc(var(--control-picking-actionbar-height) + env(safe-area-inset-bottom, 0px) + 0.8rem);
}

.separadores-control-layout-page:not(.single-module-operational) .control-picking-app {
    --control-picking-top-offset: 3.25rem;
}

.ingresos-simple-loading.control-picking-loading {
    min-height: 100dvh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.7rem;
    padding: 1.2rem;
    text-align: center;
}

.ingresos-simple-loading.control-picking-loading strong {
    color: var(--brand-dark);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.05;
}

.ingresos-simple-loading.control-picking-loading span {
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 750;
}

.ingresos-simple-loading.control-picking-loading small {
    color: #77859a;
    font-size: 0.75rem;
    font-weight: 800;
}

.control-picking-loading-logo {
    width: min(68vw, 340px);
    max-height: 72px;
    object-fit: contain;
}

.separadores-control-shell {
    width: 100%;
    padding: 0 0.75rem 0.75rem !important;
    margin: 0 auto;
}

.control-picking-sticky-card {
    position: fixed;
    top: var(--control-picking-top-offset);
    right: 0;
    left: 0;
    z-index: 1040;
    width: 100%;
    margin: 0 auto;
    border: 1px solid rgba(15, 127, 137, 0.16);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 34px rgba(0, 43, 98, 0.16);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    max-height: 20dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.control-picking-sticky-card::-webkit-scrollbar {
    display: none;
}

.separadores-control-sticky-card {
    padding: 0.28rem 0.5rem !important;
}

.control-picking-fixed-spacer {
    height: calc(var(--control-picking-top-offset) + var(--control-picking-fixed-card-height));
}

.separadores-control-headerline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(5.1rem, auto);
    align-items: center;
    gap: 0.42rem;
}

.separadores-brand-button {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #f8fbff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.separadores-brand-button img {
    width: 1.68rem;
    height: 1.68rem;
    object-fit: contain;
}

.separadores-control-title {
    min-width: 0;
}

.control-picking-kicker {
    display: block;
    color: var(--control-accent);
    font-size: 0.58rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.separadores-control-title h1 {
    margin: 0.05rem 0 0;
    color: var(--brand-dark);
    font-size: 0.95rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.08;
}

.separadores-control-title p {
    margin: 0.12rem 0 0;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.separadores-sync-pill {
    min-height: 1.95rem;
    padding: 0.18rem 0.42rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.56rem;
    font-weight: 950;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
}

.separadores-sync-pill.is-ok {
    border-color: #cfe9d6;
    background: #effaf2;
    color: #15552f;
}

.separadores-sync-pill.is-pending {
    border-color: #a31621;
    background: #dc3545;
    color: #ffffff;
    text-transform: uppercase;
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.78);
    animation: syncPendingDangerBlink 0.7s ease-in-out infinite;
}

.separadores-sync-pill.is-pending:focus-visible {
    outline: 3px solid rgba(220, 53, 69, 0.45);
    outline-offset: 3px;
}

@keyframes syncPendingDangerBlink {
    0%,
    100% {
        background: #dc3545;
        border-color: #a31621;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.78), 0 0 14px rgba(220, 53, 69, 0.35);
        opacity: 1;
        transform: scale(1);
    }

    50% {
        background: #8b000b;
        border-color: #ffccd2;
        box-shadow: 0 0 0 0.28rem rgba(220, 53, 69, 0.28), 0 0 24px rgba(220, 53, 69, 0.7);
        opacity: 0.64;
        transform: scale(1.04);
    }
}

.control-picking-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem;
    margin-top: 0.28rem;
}

.control-picking-summary div {
    min-width: 0;
    padding: 0.22rem 0.28rem;
    border: 1px solid #e4ebf5;
    border-radius: 8px;
    background: #f8fbff;
    text-align: center;
}

.control-picking-summary span {
    display: block;
    color: var(--muted);
    font-size: 0.55rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.control-picking-summary strong {
    display: block;
    margin-top: 0.08rem;
    color: var(--brand-dark);
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1;
}

.control-picking-progress {
    height: 0.22rem;
    margin-top: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: #dbe6f3;
}

.control-picking-progress div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--control-accent), var(--control-accent-strong));
    transition: width 160ms ease;
}

.separadores-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.32rem;
    margin-top: 0.32rem;
}

.separadores-filter-grid label {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.separadores-filter-grid .form-select {
    min-height: 1.52rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    border-color: #d8e3f2;
    border-radius: 8px;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 800;
}

.preparadores-filter-grid {
    grid-template-columns: minmax(0, 1fr);
}

.barcode-search-line.control-picking-search-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.32rem;
    margin-top: 0.32rem;
    margin-bottom: 0;
}

.control-picking-filter-field {
    position: relative;
    min-width: 0;
}

.control-picking-search-line .form-control,
.control-picking-search-line .btn {
    min-height: 1.65rem;
    padding: 0.18rem 0.48rem;
    font-size: 0.8rem;
}

.control-picking-search-line .form-control {
    width: 100%;
    padding-right: 2.2rem;
    border-color: #d8e3f2;
    border-radius: 8px;
    font-weight: 800;
    text-align: center;
}

.control-picking-clear-filter {
    position: absolute;
    top: 50%;
    right: 0.38rem;
    display: inline-grid;
    place-items: center;
    width: 1.28rem;
    min-width: 1.28rem;
    height: 1.28rem;
    min-height: 1.28rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
    transform: translateY(-50%);
}

.control-picking-clear-filter span[aria-hidden="true"] {
    position: relative;
    display: block;
    width: 0.72rem;
    height: 0.72rem;
}

.control-picking-clear-filter span[aria-hidden="true"]::before,
.control-picking-clear-filter span[aria-hidden="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.75rem;
    height: 2px;
    border-radius: 999px;
    background: #475569;
}

.control-picking-clear-filter span[aria-hidden="true"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.control-picking-clear-filter span[aria-hidden="true"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.separadores-filter-button {
    min-width: 4.7rem;
    min-height: 2.2rem;
    border: 0;
    border-radius: 8px;
    background: var(--brand);
    font-size: 0.82rem;
    font-weight: 900;
}

.control-picking-scan-priority-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-width: 5.45rem;
    padding-right: 0.48rem !important;
    padding-left: 0.48rem !important;
    border: 1px solid #e4aa00 !important;
    border-radius: 12px !important;
    background: #ffd24a !important;
    color: #342300 !important;
    font-weight: 950 !important;
    box-shadow: 0 0 0 0 rgba(255, 210, 74, 0.72);
    animation: controlPickingScanBlink 1.35s ease-in-out infinite;
}

.control-picking-scan-priority-button strong {
    color: inherit;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
}

.control-picking-scan-priority-button .barcode-tool-icon {
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    background-size: 0.95rem 0.95rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23342300' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5v14'/%3E%3Cpath d='M8 5v14'/%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M17 5v14'/%3E%3Cpath d='M21 5v14'/%3E%3Cpath d='M5 5v14'/%3E%3Cpath d='M15 5v14'/%3E%3C/svg%3E");
}

@keyframes controlPickingScanBlink {
    0%,
    100% {
        background-color: #ffd24a;
        box-shadow: 0 0 0 0 rgba(255, 210, 74, 0.5);
        transform: translateY(0);
    }

    50% {
        background-color: #ffe28a;
        box-shadow: 0 0 0 5px rgba(255, 210, 74, 0.22);
        transform: translateY(-1px);
    }
}

.separadores-product-list {
    display: grid;
    gap: 0.55rem;
}

.separadores-onboarding,
.separadores-filter-status,
.separadores-sync-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 43, 98, 0.07);
}

.separadores-onboarding div {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.separadores-onboarding strong,
.separadores-filter-status span,
.separadores-sync-note {
    color: var(--brand-dark);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.15;
}

.separadores-onboarding span {
    color: #42526b;
    font-size: 0.76rem;
    font-weight: 760;
    line-height: 1.25;
}

.separadores-onboarding button,
.separadores-filter-status button {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 0.25rem 0.62rem;
    border: 0;
    border-radius: 8px;
    background: var(--brand);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 950;
}

.separadores-filter-status {
    background: #f8fbff;
}

.separadores-filter-status button {
    background: #e7eef8;
    color: var(--brand);
}

.separadores-sync-note {
    justify-content: center;
    border-color: #f2c7a0;
    background: #fff6eb;
    color: #714300;
    text-align: center;
}

.separadores-empty-state {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px dashed #b7c7dd;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
}

.separadores-empty-state strong {
    color: var(--brand-dark);
    font-size: 0.98rem;
    font-weight: 950;
}

.separadores-empty-state span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.control-picking-rubro,
.separadores-section-title {
    margin: 0.2rem 0 0;
    padding: 0.46rem 0.65rem;
    border-radius: 8px;
    background: #e7f6f7;
    color: #075f68;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.control-picking-rubro.is-done,
.separadores-section-title {
    background: #eef8ef;
    color: #176b3a;
}

.separadores-pasados-anchor {
    scroll-margin-top: calc(var(--control-picking-fixed-card-height) + var(--control-picking-top-offset) + 1rem);
}

.control-picking-product {
    overflow: hidden;
    border: 1px solid #e0e8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 43, 98, 0.08);
}

.control-picking-product.is-partial {
    border-color: #9cc9ff;
    box-shadow: 0 8px 18px rgba(13, 96, 202, 0.13);
}

.control-picking-product.is-done {
    border-color: #cfe9d6;
    background: #fbfffc;
}

.control-picking-product-main {
    display: grid;
    grid-template-columns: 4.8rem minmax(0, 1fr);
    align-items: start;
    gap: 0.55rem;
    padding: 0.55rem;
}

.control-picking-product.is-done .control-picking-product-main {
    grid-template-columns: minmax(0, 1fr) 4.6rem;
}

.separadores-control-product:not(.is-done) > .control-picking-product-main {
    grid-template-columns: 4.45rem minmax(0, 1fr);
    gap: 0.48rem;
    padding: 0.48rem;
}

.control-picking-product-image {
    width: 4.65rem;
    aspect-ratio: 1;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e0e8f4;
    border-radius: 8px;
    background: #f8fbff;
    padding: 0;
}

.separadores-control-product:not(.is-done) > .control-picking-product-main > .control-picking-product-image {
    width: 4.35rem;
}

.control-picking-product-image img,
.control-picking-product-image .imagepick {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.control-picking-product-info {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
}

.separadores-control-product:not(.is-done) .control-picking-product-info {
    gap: 0.22rem;
}

.control-picking-product-title {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.separadores-control-product:not(.is-done) .control-picking-product-title {
    gap: 0.2rem;
}

.control-picking-code-badge {
    width: fit-content;
    max-width: 100%;
    padding: 0.16rem 0.38rem;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1.1;
}

.control-picking-product-name {
    display: block;
    overflow: visible;
    color: #172033;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.14;
    overflow-wrap: anywhere;
}

.control-picking-qty {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.control-picking-qty span {
    padding: 0.14rem 0.38rem;
    border-radius: 999px;
    background: #f4f7fb;
    color: #4a5f7a;
    font-size: 0.72rem;
    font-weight: 850;
}

.control-picking-qty strong {
    color: var(--ink);
    font-weight: 950;
}

.control-picking-ean-row {
    margin: 0;
    color: #738197;
    font-size: 0.648rem;
    font-weight: 800;
    line-height: 1.15;
    word-break: break-word;
}

.preparadores-product-code-row,
.separadores-product-code-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(4.2rem, 1fr);
    align-items: center;
    gap: 0.35rem;
}

.preparadores-product-code-row .control-picking-code-badge,
.separadores-product-code-row .control-picking-code-badge {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preparadores-ean-pill,
.separadores-ean-pill {
    justify-self: end;
    max-width: 100%;
    padding: 0.14rem 0.38rem;
    border-radius: 999px;
    background: #f4f7fb;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.control-picking-qty.preparadores-product-qty {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    align-items: center;
    gap: 0.3rem;
}

.preparadores-product-qty .preparadores-stock-pill,
.preparadores-product-qty .preparadores-status-pill {
    justify-self: end;
    text-align: right;
}

.preparadores-product-qty .preparadores-status-pill {
    width: fit-content;
    max-width: 100%;
}

.control-picking-product-action .btn {
    min-width: 6.2rem;
    min-height: 2.15rem;
    border: 0;
    border-radius: 8px;
    background: var(--control-accent-strong);
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1.05;
    white-space: normal;
}

.control-picking-product-action {
    grid-column: 2;
    justify-self: end;
}

.separadores-product-meta-action {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.38rem;
}

.control-picking-qty.separadores-product-qty {
    min-width: 0;
    align-items: center;
    gap: 0.24rem;
}

.control-picking-qty.separadores-product-qty span {
    padding: 0.12rem 0.34rem;
    font-size: 0.68rem;
    line-height: 1.08;
}

.separadores-product-meta-action .control-picking-product-action {
    grid-column: auto;
    justify-self: end;
}

.separadores-product-meta-action .control-picking-product-action .btn {
    min-width: 5.55rem;
    min-height: 2.05rem;
    padding: 0.28rem 0.46rem;
}

.separadores-box-list {
    display: grid;
    border-top: 1px solid #e8eef8;
}

.separadores-box-row {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) 3rem 4.4rem 5.2rem;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.55rem;
    border-top: 1px solid #edf2f8;
    color: #263449;
    font-size: 0.79rem;
}

.separadores-box-row:first-child {
    border-top: 0;
}

.separadores-box-heading {
    min-height: 1.85rem;
    background: #f7f9fc;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 950;
    text-transform: uppercase;
}

.separadores-box-row > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.separadores-box-row > :nth-child(1),
.separadores-box-row > :nth-child(3),
.separadores-box-row > :nth-child(4) {
    justify-self: center;
    text-align: center;
}

.separadores-box-row > :nth-child(2) {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.12;
}

.separadores-box-row .btn {
    min-height: 1.82rem;
    padding: 0.18rem 0.35rem;
    border: 0;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1.05;
    white-space: normal;
}

.separadores-status-line {
    width: fit-content;
    max-width: 100%;
    padding: 0.16rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1.05;
}

.separadores-status-line.is-done {
    background: #e7f8ec;
    color: #176b3a;
}

.separadores-revert-button {
    border: 1px solid #c9d4e3 !important;
    background: #ffffff !important;
    color: #475569 !important;
}

.preparadores-control-product.is-secondary-color {
    border-color: #d5dde9;
    background: #fbfdff;
}

.preparadores-control-product > .preparadores-product-main {
    gap: 0.48rem;
    padding: 0.48rem;
}

.preparadores-control-product > .preparadores-product-main > .control-picking-product-image {
    width: 4.35rem;
}

.preparadores-control-product .control-picking-product-info,
.preparadores-control-product .control-picking-product-title {
    gap: 0.22rem;
}

.control-picking-product-main.preparadores-product-main,
.control-picking-product.is-done .control-picking-product-main.preparadores-product-main {
    grid-template-columns: 4.8rem minmax(0, 1fr);
}

.preparadores-product-action {
    grid-column: 2;
    justify-self: end;
}

.preparadores-product-meta-action {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.38rem;
}

.preparadores-product-meta-action .preparadores-product-qty {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.24rem;
}

.preparadores-product-meta-action .preparadores-product-qty span {
    padding: 0.12rem 0.34rem;
    font-size: 0.68rem;
    line-height: 1.08;
}

.preparadores-product-meta-action .preparadores-product-action {
    grid-column: auto;
    justify-self: end;
}

.preparadores-product-meta-action .preparadores-product-action .btn,
.preparadores-product-meta-action .preparadores-transfer-check {
    min-width: 5.55rem;
    min-height: 2.05rem;
    padding: 0.28rem 0.46rem;
}

.preparadores-stock-pill {
    width: fit-content;
    max-width: 100%;
    padding: 0.16rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1.05;
}

.preparadores-stock-pill.is-ok {
    background: #e7f8ec;
    color: #176b3a;
}

.preparadores-stock-pill.is-low {
    background: #fff2d8;
    color: #8a4c00;
}

.preparadores-transfer-check {
    min-height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.36rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid #c9d4e3;
    border-radius: 8px;
    background: #ffffff;
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1.05;
}

.preparadores-transfer-check .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
}

.preparadores-transfer-note {
    border-color: #d4c2ff;
    background: #f6f0ff;
    color: #53318f;
}

.separadores-modal-help {
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: #f8fbff;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
}

.separadores-box-row.is-complete {
    background: #edf9f0;
    color: #15552f;
}

.separadores-box-row.is-partial {
    background: #fff8e8;
    color: #654300;
}

.separadores-box-row.can-reverse {
    cursor: pointer;
}

.separadores-box-row.can-reverse:active {
    transform: scale(0.995);
}

.control-picking-scroll-top {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--control-picking-actionbar-height) + env(safe-area-inset-bottom, 0px) + 0.85rem);
    z-index: 1046;
    display: inline-grid;
    place-items: center;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--control-accent-strong), var(--control-accent));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.35rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.control-picking-scroll-top::before {
    content: "";
    width: 0.86rem;
    height: 0.86rem;
    margin-top: 0.3rem;
    border-top: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    transform: rotate(45deg);
}

.control-picking-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ingresos-app .control-picking-actionbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    height: calc(var(--control-picking-actionbar-height) + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem;
    padding: 0.42rem 0.55rem calc(0.42rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dce7f4;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -10px 26px rgba(0, 43, 98, 0.12);
    backdrop-filter: blur(10px);
}

.ingresos-app .control-picking-actionbar.preparadores-actionbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ingresos-app .control-picking-actionbar.preparadores-actionbar.is-transfer-mode {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ingresos-app .control-picking-actionbar.salon-actionbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ingresos-app .control-picking-actionbar.salon-unificacion-actionbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.control-picking-actionbar-button {
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.2rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--brand);
    font-size: 0.62rem;
    font-weight: 950;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
}

.control-picking-actionbar-button span:last-child {
    max-width: 100%;
    white-space: normal;
}

.control-picking-actionbar-button:hover,
.control-picking-actionbar-button:focus {
    color: var(--brand);
    background: #eef5ff;
    text-decoration: none;
}

.control-picking-actionbar-button.danger {
    color: var(--control-danger);
}

.control-picking-barcodes-modal {
    position: fixed;
    inset: 0;
    z-index: 1065;
    width: 100vw;
    height: 100dvh;
    padding: 0 !important;
    overflow: hidden;
}

.control-picking-barcodes-modal .modal-dialog {
    width: 100vw;
    max-width: none;
    height: 100%;
    min-height: 100dvh;
    margin: 0 !important;
}

.control-picking-barcodes-modal .modal-content {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.28);
}

.control-picking-barcodes-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--control-accent-strong, #53318f), var(--control-accent, #0f7f89));
    color: #ffffff;
}

.control-picking-barcodes-modal .modal-header > div {
    min-width: 0;
}

.control-picking-barcodes-modal .modal-title {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
}

.control-picking-barcodes-modal .modal-header span {
    display: block;
    margin-top: 0.12rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    font-weight: 800;
}

.control-picking-report-close {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
}

.control-picking-report-close::before,
.control-picking-report-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.05rem;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
}

.control-picking-report-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.control-picking-report-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.control-picking-barcodes-modal .modal-body {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    height: 100%;
    max-height: none;
    padding: 0.85rem;
    overflow: auto;
}

.control-picking-barcode-rubro {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 43, 98, 0.08);
}

.control-picking-barcode-rubro h3 {
    margin: 0;
    color: var(--control-accent-strong);
    font-size: 0.88rem;
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
}

.control-picking-barcode-svg {
    display: block;
    width: 100%;
    max-width: 24rem;
    height: 3.2rem;
    margin: 0 auto;
}

.preparadores-barcodes-modal .control-picking-barcode-svg {
    height: 6.4rem;
}

.control-picking-barcode-rubro small {
    overflow: hidden;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.control-picking-barcode-empty {
    display: grid;
    min-height: 3.2rem;
    place-items: center;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 850;
}

.control-picking-barcode-totals,
.control-picking-barcode-grand-total {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.control-picking-barcode-totals span,
.control-picking-barcode-grand-total span {
    display: grid;
    gap: 0.08rem;
    padding: 0.42rem 0.5rem;
    border-radius: 10px;
    background: #eef5ff;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
    text-align: center;
}

.control-picking-barcode-totals strong,
.control-picking-barcode-grand-total strong {
    color: var(--control-accent-strong);
    font-size: 0.98rem;
    font-weight: 950;
}

.control-picking-barcode-grand-total {
    padding: 0.65rem;
    border-radius: 12px;
    background: #14532d;
}

.control-picking-barcode-grand-total span {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.82);
}

.control-picking-barcode-grand-total strong {
    color: #ffffff;
}

.control-picking-actionbar-icon {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.separadores-actionbar-icon-account {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7.5h18v12H3zM5 5h14v2.5H5zM6 12h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.separadores-actionbar-icon-transfer {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h11l3 4h2v6h-2M6 17h8M8 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm8 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.preparadores-actionbar-icon-swap {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h11l-3-3M17 17H6l3 3M18 7l-3 3M6 17l3-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.separadores-actionbar-icon-done {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 13 4 4L19 7M4 5h8M4 9h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.separadores-actionbar-icon-logout {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 5H5v14h5M14 7l5 5-5 5M19 12H9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.salon-control-app {
    --control-picking-fixed-card-height: 24dvh;
}

.salon-orders-app {
    --control-picking-fixed-card-height: 192px;
}

.salon-control-sticky-card {
    max-height: 24dvh;
}

.salon-orders-app .salon-control-sticky-card {
    max-height: 192px;
}

.salon-control-headerline {
    grid-template-columns: auto minmax(0, 1fr) minmax(4.7rem, auto);
}

.salon-orders-app .salon-control-headerline {
    grid-template-columns: auto minmax(0, 1fr);
}

.salon-status-pill {
    align-self: stretch;
    display: inline-grid;
    place-items: center;
    text-transform: uppercase;
}

.salon-control-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.salon-orders-app .salon-control-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.salon-control-summary strong {
    font-size: 0.78rem;
}

.salon-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 0.32rem;
    margin-top: 0.32rem;
}

.salon-filter-grid label {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.salon-filter-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.salon-filter-grid .form-select,
.salon-filter-grid .form-control {
    min-height: 2.08rem;
    border-color: #d5e2f2;
    border-radius: 8px;
    color: #172033;
    font-size: 0.78rem;
    font-weight: 850;
}

.salon-filter-grid .form-select:disabled {
    background-color: #eef3fb;
    color: #7b8798;
}

.salon-orders-list,
.salon-products-panel {
    display: grid;
    gap: 0.48rem;
}

.salon-order-card {
    min-width: 0;
    display: grid;
    gap: 0.26rem;
    width: 100%;
    padding: 0.6rem 0.65rem;
    border: 1px solid #e0e8f4;
    border-radius: 8px;
    background: #ffffff;
    color: #172033;
    text-align: left;
    box-shadow: 0 8px 18px rgba(0, 43, 98, 0.08);
}

.salon-order-card.is-selected {
    border-color: var(--control-accent);
    background: #eefafa;
    box-shadow: 0 9px 22px rgba(15, 127, 137, 0.16);
}

.salon-order-card strong,
.salon-order-card span {
    min-width: 0;
}

.salon-order-card strong {
    color: #172033;
    font-size: 0.88rem;
    font-weight: 950;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.salon-order-card > span:not(.salon-order-date):not(.salon-order-footer) {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 780;
    line-height: 1.18;
}

.salon-order-date {
    width: fit-content;
    max-width: 100%;
    padding: 0.14rem 0.38rem;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--brand);
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
}

.salon-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 850;
}

.salon-order-footer b {
    color: #176b3a;
    font-size: 0.82rem;
    font-weight: 950;
    white-space: nowrap;
}

.salon-facturados-app {
    --control-picking-fixed-card-height: 130px;
    background: #f4f8fc;
}

.salon-facturados-app .salon-control-headerline {
    grid-template-columns: auto minmax(0, 1fr);
}

.salon-facturados-app .salon-control-sticky-card {
    max-height: 130px;
}

.salon-facturados-list {
    display: grid;
    gap: 0.48rem;
}

.salon-unificacion-app {
    --control-picking-fixed-card-height: 130px;
    background: #f4f8fc;
}

.salon-unificacion-app .salon-control-headerline {
    grid-template-columns: auto minmax(0, 1fr);
}

.salon-unificacion-app .salon-control-sticky-card {
    max-height: 130px;
}

.salon-unificacion-list,
.salon-unificados-list {
    display: grid;
    gap: 0.48rem;
}

.salon-unificacion-card {
    position: relative;
    gap: 0.25rem;
    padding: 0.4rem 0.62rem;
    cursor: pointer;
}

.salon-unificacion-card:focus-visible {
    outline: 3px solid rgba(15, 127, 137, 0.28);
    outline-offset: 2px;
}

.salon-unificacion-card-top {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.salon-unificacion-code {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1;
}

.salon-unificacion-check {
    min-height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    margin: 0;
    padding: 0.22rem 0.46rem;
    border: 1px solid #cfdced;
    border-radius: 8px;
    background: #ffffff;
    color: var(--brand);
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
}

.salon-unificacion-check input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--control-accent-strong);
}

.salon-unificacion-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.24rem;
}

.salon-unificacion-meta span {
    width: fit-content;
    max-width: 100%;
    padding: 0.14rem 0.38rem;
    border-radius: 999px;
    background: #eef3fb;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.05;
}

.salon-unificacion-card .salon-unificacion-link-actions {
    width: min(100%, 7.75rem);
    grid-template-columns: minmax(0, 1fr);
}

.salon-unificacion-card .salon-unificacion-link-actions a {
    min-height: 2rem;
}

.salon-unificacion-card-footer {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.salon-unificacion-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.salon-unificacion-status b {
    color: #176b3a;
    font-size: 0.82rem;
    font-weight: 950;
    white-space: nowrap;
}

.salon-unificacion-notice {
    margin-top: 0.45rem;
    padding: 0.56rem 0.65rem;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.22;
    box-shadow: 0 8px 18px rgba(0, 43, 98, 0.08);
}

.salon-unificacion-notice.is-error {
    border-color: #f2c4ca;
    background: #fff4f5;
    color: #9f1c2c;
}

.salon-unificacion-notice.is-ok {
    border-color: #bfe5cb;
    background: #effaf2;
    color: #15552f;
}

.salon-unificados-title {
    margin-top: 0.85rem;
}

.salon-unificado-card {
    cursor: default;
}

.salon-unificacion-primary-action:not(:disabled) {
    color: var(--control-accent-strong);
}

.control-picking-actionbar-button:disabled {
    color: #98a5b8;
    cursor: not-allowed;
    opacity: 0.68;
}

.salon-facturado-card {
    cursor: default;
}

.salon-facturado-card > span:not(.salon-order-date):not(.salon-order-footer):not(.salon-link-empty) {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.salon-facturado-links {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.1rem;
    padding-top: 0.48rem;
    border-top: 1px solid #e4ebf5;
}

.salon-facturado-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.42rem;
}

.salon-facturado-link-row .salon-link-actions {
    width: min(100%, 21rem);
}

.salon-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    margin: 0.55rem 0;
}

.salon-selected-order {
    display: grid;
    gap: 0.42rem;
    padding: 0.68rem;
}

.salon-selected-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.salon-order-meta {
    gap: 0.28rem;
}

.salon-address,
.salon-comment {
    margin: 0;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 780;
    line-height: 1.18;
}

.salon-comment {
    padding: 0.42rem 0.5rem;
    border-radius: 8px;
    background: #fff7e6;
    color: #805100;
}

.salon-barcode-panel {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 0.68rem;
    border: 1px solid #e0e8f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 43, 98, 0.08);
}

.salon-barcode-panel img {
    width: min(100%, 270px);
    height: auto;
    border: 1px solid #d6e3f3;
    border-radius: 8px;
    background: #ffffff;
}

.salon-link-actions {
    width: min(100%, 270px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.salon-link-actions button,
.salon-link-actions a {
    min-height: 2.2rem;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: var(--control-accent-strong);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 950;
    line-height: 1.05;
    text-align: center;
    text-decoration: none;
}

.salon-link-actions a {
    background: var(--brand);
}

.salon-link-empty {
    color: #7b8798;
    font-size: 0.75rem;
    font-weight: 850;
}

.salon-section-title {
    margin-top: 15px;
    margin-bottom: 0.04rem;
}

.salon-product-card {
    width: 100%;
    padding: 0;
    border-color: #e0e8f4;
    text-align: left;
}

.salon-product-card.is-combo {
    border-color: #ffd99c;
    background: #fffaf1;
}

.salon-product-card.is-checked {
    border-color: #b7dfc0;
    background: #effaf2;
}

.salon-product-card-main {
    display: grid;
    gap: 0.28rem;
    padding: 0.55rem;
}

.salon-product-qty {
    grid-template-columns: repeat(3, max-content);
}

.salon-qr-overlay {
    z-index: 1070;
}

.salon-qr-content {
    width: min(92vw, 30rem);
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    background: #ffffff;
}

.salon-actionbar-icon-list {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.salon-actionbar-icon-merge {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v5a5 5 0 0 0 5 5h5M17 10l3 4-3 4M17 4h-5a5 5 0 0 0-5 5v11' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.salon-actionbar-icon-refresh {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6v6h-6M4 18v-6h6M18 9a7 7 0 0 0-11.7-3M6 15a7 7 0 0 0 11.7 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.salon-actionbar-icon-clear {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M8 6V4h8v2M10 11v6M14 11v6M6 6l1 14h10l1-14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.salon-actionbar-icon-back {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6 4 12l6 6M5 12h11M14 5h6v14h-6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.salon-actionbar-icon-qr {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h6v6H3zM15 3h6v6h-6zM3 15h6v6H3zM15 15h2v2h-2zM19 15h2v2h-2zM15 19h2v2h-2zM19 19h2v2h-2z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.salon-actionbar-icon-barcode {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5v14M7 5v14M11 5v14M16 5v14M20 5v14M13.5 5v14M18 5v14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.salon-pedido-detail-app {
    --control-picking-fixed-card-height: 158px;
    background: #f4f8fc;
}

.salon-pedido-sticky-card {
    max-height: 158px;
}

.salon-pedido-detail-app > .container-fluid {
    padding-top: 0 !important;
}

.salon-pedido-title-line {
    min-height: auto;
}

.salon-pedido-title-copy {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.salon-pedido-client-code {
    color: #0f4f8f;
}

.salon-pedido-client-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.salon-pedido-title-line h6 {
    margin: 0;
    color: #172033;
    font-size: clamp(0.92rem, 2vw, 1.15rem);
    font-weight: 950;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.salon-pedido-summary.control-picking-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.45rem;
}

.salon-pedido-summary strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salon-pedido-progress {
    height: 0.28rem;
    margin: 0.48rem 0 0;
    border-radius: 999px;
    background: #dbe7f5;
}

.salon-pedido-search-line {
    display: block;
}

.salon-pedido-products-section {
    display: grid;
    gap: 0.52rem;
    margin-bottom: 0.9rem;
}

.salon-pedido-controlled-section {
    padding-top: 0.55rem;
    border-top: 1px solid #dbe7f5;
}

.salon-pedido-detail-app .preparadores-control-product.is-combo {
    border-color: #ffd99c;
    background: #fffaf1;
}

.salon-pedido-detail-app .preparadores-product-meta-action .preparadores-product-qty {
    align-content: center;
}

.salon-pedido-detail-app .salon-detail-product-action .btn {
    min-width: 5.55rem;
}

.salon-detail-product-card {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr) minmax(4.6rem, auto);
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem;
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 43, 98, 0.08);
}

.salon-detail-product-card.is-combo {
    border-color: #ffd99c;
    background: #fffaf1;
}

.salon-detail-product-card.is-controlled {
    border-color: #b7dfc0;
    background: #f1faf3;
}

.salon-detail-product-media {
    width: 5.2rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e0e8f4;
    border-radius: 8px;
    background: #f8fafc;
}

.salon-detail-product-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.salon-detail-product-info {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
}

.salon-detail-product-qty {
    grid-template-columns: repeat(3, max-content);
}

.salon-detail-price-row {
    color: #176b3a;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.15;
}

.salon-detail-product-action {
    display: grid;
    justify-items: stretch;
}

.salon-detail-product-action .btn {
    min-height: 2.4rem;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 950;
}

.salon-pedido-detail-app .control-picking-actionbar-button {
    gap: 0.08rem;
}

.ingresos-app .control-picking-actionbar.salon-pedido-actionbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.ingresos-app .control-picking-actionbar.salon-pedido-actionbar .control-picking-actionbar-button {
    width: 100%;
    max-width: 15rem;
    justify-self: stretch;
}

.salon-qr-modal {
    z-index: 1080;
}

.salon-qr-backdrop,
.salon-barcode-backdrop {
    z-index: 1070;
}

.salon-qr-modal .modal-dialog {
    width: min(92vw, 24rem);
    margin: 0.75rem auto;
}

.salon-barcode-modal .modal-dialog {
    width: min(96vw, 48rem);
    margin: 0.75rem auto;
}

.salon-qr-content,
.salon-barcode-content {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 35, 64, 0.22);
}

.salon-barcode-modal {
    z-index: 1080;
}

.salon-qr-close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #edf3fb;
}

.salon-qr-close span {
    width: 1rem;
    height: 1rem;
    background: #173a66;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.salon-qr-header {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 0.12rem;
    padding-right: 2.4rem;
    text-align: left;
}

.salon-qr-header span {
    color: #0f4f8f;
    font-size: 0.74rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.salon-qr-header h2 {
    margin: 0;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1.1;
}

.salon-qr-header small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 850;
}

.salon-qr-code {
    min-height: 300px;
    display: grid;
    place-items: center;
}

.salon-qr-code img,
.salon-qr-code canvas {
    width: min(70vw, 300px);
    height: auto;
    border: 4px solid #86b7fea8;
    border-radius: 8px;
}

.salon-qr-link {
    width: min(100%, 18rem);
    min-height: 2.35rem;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: var(--brand);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 950;
    text-align: center;
    text-decoration: none;
}

.salon-qr-loading,
.salon-qr-error {
    width: 100%;
    min-height: 6rem;
    display: grid;
    place-items: center;
    padding: 0.8rem;
    border-radius: 8px;
    background: #f3f7fc;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 850;
    text-align: center;
}

.salon-qr-error {
    background: #fff3f3;
    color: #9b1c1c;
}

.salon-pedido-barcode-render {
    width: 100%;
    display: grid;
    place-items: center;
    padding: 0.7rem;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    background: #ffffff;
}

.salon-pedido-barcode-svg {
    width: min(100%, 48rem);
    max-width: 48rem;
    height: 6rem;
}

.salon-pedido-detail-app .control-picking-actionbar-button strong,
.salon-pedido-detail-app .control-picking-actionbar-button small {
    display: block;
    line-height: 1.05;
    text-align: center;
}

.salon-pedido-detail-app .control-picking-actionbar-button strong {
    font-size: 0.74rem;
    font-weight: 950;
}

.salon-pedido-detail-app .control-picking-actionbar-button small {
    color: #64748b;
    font-size: 0.58rem;
    font-weight: 850;
}

.salon-product-selection-modal {
    z-index: 1080;
}

.salon-product-selection-backdrop {
    z-index: 1070;
}

.salon-confirm-modal {
    z-index: 1080;
}

.salon-confirm-backdrop {
    z-index: 1070;
}

.salon-confirm-modal .modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 35, 64, 0.22);
}

.salon-confirm-modal .modal-title {
    color: #123f73;
    font-size: 1rem;
    font-weight: 950;
}

.salon-confirm-modal .modal-body {
    color: #172033;
    font-size: 0.9rem;
    font-weight: 750;
}

.salon-product-selection-modal .modal-dialog {
    margin: 0;
    max-width: none;
}

.salon-product-selection-modal .modal-content,
.salon-product-selection-modal .product-selection-shell {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    background: #f6f8fb;
}

.product-selection-hero {
    position: relative;
    display: grid;
    grid-template-columns: 6.2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1rem 0.9rem;
    background: #10233f;
    color: #ffffff;
}

.product-modal-dismiss {
    position: absolute;
    top: 0.62rem;
    right: 0.62rem;
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.product-modal-dismiss span {
    width: 1.05rem;
    height: 1.05rem;
    background: #ffffff;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.product-hero-image {
    width: 6.2rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
}

.product-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-hero-image span {
    display: none;
    color: #10233f;
    font-size: 1.5rem;
    font-weight: 950;
}

.product-hero-image.is-missing img {
    display: none;
}

.product-hero-image.is-missing span {
    display: block;
}

.product-hero-info {
    min-width: 0;
    padding-right: 2.1rem;
}

.product-hero-info h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.ingresos-product-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.42rem;
}

.ingresos-product-modal-meta span {
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #e7eef8;
    font-size: 0.68rem;
    font-weight: 850;
}

.product-selection-body {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem 1rem 6rem;
}

.product-quantity-card,
.product-modal-form label {
    display: grid;
    gap: 0.45rem;
    padding: 0.8rem;
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 43, 98, 0.08);
}

.product-quantity-card > span,
.product-modal-form span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.product-quantity-stepper {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem;
    gap: 0.45rem;
}

.product-quantity-stepper button {
    min-height: 2.75rem;
    border: 0;
    border-radius: 8px;
    background: #123f73;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 950;
}

.product-quantity-stepper .form-control {
    min-height: 2.75rem;
    border-radius: 8px;
    text-align: center;
    font-size: 1.12rem;
    font-weight: 950;
}

.salon-modal-helper {
    margin-top: 0.38rem;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 850;
    text-align: center;
}

.product-modal-form .form-control {
    min-height: 2.45rem;
    border-color: #dce7f4;
    border-radius: 8px;
    color: #172033;
    font-size: 0.78rem;
    font-weight: 850;
}

.product-selection-action {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: rgba(246, 248, 251, 0.96);
    border-top: 1px solid #dce7f4;
}

.product-selection-action .btn {
    width: 100%;
    min-height: 3rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 950;
}

@media (min-width: 760px) {
    .salon-detail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.42fr);
        align-items: stretch;
    }

    .salon-orders-list,
    .salon-facturados-list,
    .salon-unificacion-list,
    .salon-unificados-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .salon-detail-product-card {
        grid-template-columns: 5.8rem minmax(0, 1fr) minmax(5.5rem, auto);
    }

    .salon-detail-product-media {
        width: 5.8rem;
    }

    .salon-product-selection-modal .modal-dialog {
        max-width: 34rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 430px) {
    .salon-control-app {
        --control-picking-fixed-card-height: 27dvh;
    }

    .salon-control-sticky-card {
        max-height: 27dvh;
    }

    .salon-orders-app {
        --control-picking-fixed-card-height: 192px;
    }

    .salon-orders-app .salon-control-sticky-card {
        max-height: 192px;
    }

    .salon-facturados-app {
        --control-picking-fixed-card-height: 130px;
    }

    .salon-facturados-app .salon-control-sticky-card {
        max-height: 130px;
    }

    .salon-unificacion-app {
        --control-picking-fixed-card-height: 130px;
    }

    .salon-unificacion-app .salon-control-sticky-card {
        max-height: 130px;
    }

    .salon-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .salon-facturado-link-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .salon-facturado-link-row .salon-link-actions {
        width: 100%;
    }

    .salon-product-qty {
        grid-template-columns: repeat(2, max-content);
    }

    .salon-pedido-detail-app {
        --control-picking-fixed-card-height: 158px;
    }

    .salon-pedido-sticky-card {
        max-height: 158px;
    }

    .salon-detail-product-card {
        grid-template-columns: 4.8rem minmax(0, 1fr);
        align-items: start;
    }

    .salon-detail-product-media {
        width: 4.8rem;
    }

    .salon-detail-product-action {
        grid-column: 1 / -1;
    }

    .salon-detail-product-qty {
        grid-template-columns: repeat(2, max-content);
    }
}

@media (max-width: 390px) {
    .control-picking-app {
        --control-picking-fixed-card-height: 20dvh;
    }

    .control-picking-product-main {
        grid-template-columns: 4.25rem minmax(0, 1fr);
        gap: 0.42rem;
        padding: 0.45rem;
    }

    .separadores-control-product:not(.is-done) > .control-picking-product-main {
        grid-template-columns: 4.18rem minmax(0, 1fr);
        gap: 0.4rem;
        padding: 0.42rem;
    }

    .control-picking-product.is-done .control-picking-product-main {
        grid-template-columns: minmax(0, 1fr) 4.2rem;
    }

    .control-picking-product-main.preparadores-product-main,
    .control-picking-product.is-done .control-picking-product-main.preparadores-product-main {
        grid-template-columns: 4.25rem minmax(0, 1fr);
        gap: 0.4rem;
        padding: 0.42rem;
    }

    .control-picking-product-image {
        width: 4.15rem;
    }

    .preparadores-control-product > .preparadores-product-main > .control-picking-product-image {
        width: 4.05rem;
    }

    .separadores-control-product:not(.is-done) > .control-picking-product-main > .control-picking-product-image {
        width: 4.05rem;
    }

    .control-picking-product-action .btn {
        min-width: 6rem;
        font-size: 0.62rem;
    }

    .separadores-product-meta-action .control-picking-product-action .btn {
        min-width: 5.25rem;
        font-size: 0.6rem;
    }

    .separadores-box-row {
        grid-template-columns: 2.25rem minmax(4.1rem, 1fr) 2.65rem 4.05rem 5rem;
        gap: 0.28rem;
        padding-inline: 0.42rem;
        font-size: 0.72rem;
    }

    .separadores-box-row .btn {
        font-size: 0.62rem;
    }

    .separadores-box-heading {
        font-size: 0.52rem;
    }

    .separadores-product-meta-action {
        gap: 0.3rem;
    }

    .preparadores-product-meta-action {
        gap: 0.3rem;
    }

    .preparadores-product-meta-action .preparadores-product-action .btn,
    .preparadores-product-meta-action .preparadores-transfer-check {
        min-width: 5.25rem;
        font-size: 0.6rem;
    }

    .control-picking-scroll-top {
        right: 0.75rem;
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
    }

    .separadores-sync-pill {
        max-width: 5.4rem;
        font-size: 0.52rem;
    }

    .separadores-onboarding,
    .separadores-filter-status {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 340px) {
    .separadores-product-meta-action {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .separadores-product-meta-action .control-picking-product-action {
        justify-self: stretch;
    }

    .separadores-product-meta-action .control-picking-product-action .btn {
        width: 100%;
        min-width: 0;
    }

    .preparadores-product-meta-action {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .preparadores-product-meta-action .preparadores-product-action {
        justify-self: stretch;
    }

    .preparadores-product-meta-action .preparadores-product-action .btn,
    .preparadores-product-meta-action .preparadores-transfer-check {
        width: 100%;
        min-width: 0;
    }
}

@media (min-width: 760px) {
    .control-picking-app {
        --control-picking-fixed-card-height: 20dvh;
    }

    .separadores-control-layout-page:not(.single-module-operational) .control-picking-app {
        --control-picking-top-offset: 3.5rem;
    }

    .separadores-control-sticky-card {
        width: 100%;
        padding: 0.28rem 0.5rem !important;
    }

    .separadores-filter-grid {
        grid-template-columns: minmax(0, 1.2fr) 0.8fr;
    }

    .preparadores-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .control-picking-product-main {
        grid-template-columns: 5.4rem minmax(0, 1fr);
    }

    .separadores-control-product:not(.is-done) > .control-picking-product-main {
        grid-template-columns: 5.05rem minmax(0, 1fr);
        gap: 0.5rem;
    }

    .control-picking-product.is-done .control-picking-product-main {
        grid-template-columns: minmax(0, 1fr) 5.2rem;
    }

    .control-picking-product-main.preparadores-product-main,
    .control-picking-product.is-done .control-picking-product-main.preparadores-product-main {
        grid-template-columns: 5.4rem minmax(0, 1fr);
        gap: 0.5rem;
    }

    .control-picking-product-image {
        width: 5.2rem;
    }

    .preparadores-control-product > .preparadores-product-main > .control-picking-product-image {
        width: 4.9rem;
    }

    .separadores-control-product:not(.is-done) > .control-picking-product-main > .control-picking-product-image {
        width: 4.9rem;
    }

    .ingresos-app .control-picking-actionbar {
        right: 50%;
        left: auto;
        width: min(540px, calc(100% - 2rem));
        transform: translateX(50%);
        border: 1px solid #dce7f4;
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
    }
}

body:has(#loading) .top-row,
body:has(#loading) .sidebar,
body:has(header.bg-dark.fixed-top) .top-row,
body:has(header.bg-dark.fixed-top) .sidebar {
    display: none !important;
}

body:has(#loading) article.content,
body:has(header.bg-dark.fixed-top) article.content {
    min-height: 100dvh;
    padding: 0 !important;
}

body:has(#loading) #loading {
    min-height: 100dvh;
    display: grid !important;
    align-content: center;
    justify-items: center;
    background: var(--app-bg);
}

body:has(#loading) #loading .loadingOverlay {
    display: none;
}

body:has(#loading) #loading .loadingContent {
    position: static;
    width: min(92vw, 360px);
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    padding: 1.2rem;
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-blue);
    color: var(--ink);
    text-align: center;
}

body:has(#loading) #loading .loadingContent img {
    width: min(68vw, 260px) !important;
    height: auto !important;
    content: url("../img/logo.gif");
    object-fit: contain;
}

body:has(#loading) #loading .loadingContent h1 {
    margin: 0;
    color: var(--brand-dark);
    font-size: 1.25rem;
    font-weight: 950;
    letter-spacing: 0;
}

body:has(#loading) #loading .loadingContent h6,
body:has(#loading) #loading .loadingContent p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

body:has(header.bg-dark.fixed-top) header.bg-dark.fixed-top {
    top: 0.4rem !important;
    right: 0.4rem !important;
    left: 0.4rem !important;
    width: auto !important;
    max-width: 1120px;
    margin: 0 auto;
    border: 1px solid rgba(15, 127, 137, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 14px 34px rgba(0, 43, 98, 0.16);
    color: var(--ink) !important;
    backdrop-filter: blur(10px);
}

body:has(header.bg-dark.fixed-top) header.bg-dark.fixed-top h6 {
    margin: 0;
    color: var(--brand-dark);
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1.05;
}

body:has(header.bg-dark.fixed-top) header.bg-dark.fixed-top .row {
    color: var(--ink);
}

body:has(header.bg-dark.fixed-top) header.bg-dark.fixed-top .progress {
    height: 0.34rem !important;
    overflow: hidden;
    border-radius: 999px;
    background: #dbe6f3;
}

body:has(header.bg-dark.fixed-top) header.bg-dark.fixed-top .progress-bar {
    background: linear-gradient(90deg, var(--control-accent), var(--control-accent-strong)) !important;
}

body:has(header.bg-dark.fixed-top) header.bg-dark.fixed-top .form-select,
body:has(header.bg-dark.fixed-top) header.bg-dark.fixed-top .form-control {
    min-height: 2.1rem;
    border-color: #d8e3f2;
    border-radius: 8px;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
}

body:has(header.bg-dark.fixed-top) header.bg-dark.fixed-top .btn {
    min-height: 2rem;
    border-radius: 8px;
    font-weight: 900;
}

body:has(header.bg-dark.fixed-top) div[style*="padding-top: 180px"] {
    padding-top: 15.8rem !important;
    padding-bottom: 5.5rem;
}

body:has(header.bg-dark.fixed-top) section > .container-fluid.p-1 > .row {
    overflow: hidden;
    margin: 0 0 0.55rem !important;
    border: 1px solid #e0e8f4 !important;
    border-radius: 8px;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(0, 43, 98, 0.08);
}

body:has(header.bg-dark.fixed-top) section > .container-fluid.p-1 > .row .row.mt-2 {
    align-items: center;
    margin: 0 !important;
    padding: 0.5rem;
}

body:has(header.bg-dark.fixed-top) section > .container-fluid.p-1 > .row .letrasmaller p:first-child {
    color: #172033;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.14;
}

body:has(header.bg-dark.fixed-top) section > .container-fluid.p-1 > .row .fontEAN {
    color: #738197;
    font-size: 0.72rem;
    font-weight: 800;
}

body:has(header.bg-dark.fixed-top) section .imagepick {
    width: 4.65rem !important;
    height: 4.65rem !important;
    object-fit: contain;
    border: 1px solid #e0e8f4;
    border-radius: 8px;
    background: #f8fbff;
}

body:has(header.bg-dark.fixed-top) section .border {
    border-color: #edf2f8 !important;
}

body:has(header.bg-dark.fixed-top) section .btn-success,
body:has(header.bg-dark.fixed-top) section .btn-primary {
    min-height: 1.85rem;
    border: 0;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 950;
}

body:has(header.bg-dark.fixed-top) footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    padding: 0.55rem;
    border-top: 1px solid #dce7f4;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -10px 26px rgba(0, 43, 98, 0.12);
    color: var(--muted);
    backdrop-filter: blur(10px);
}

body:has(header.bg-dark.fixed-top) footer .btn {
    border-radius: 8px;
    font-weight: 900;
}