@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --primary: #f4c430;
    --primary-dark: #c89a13;

    --bg: #070707;
    --bg-soft: #0d0d0d;
    --panel: #121212;
    --panel-2: #171717;
    --panel-3: #1d1d1d;

    --text: #ffffff;
    --muted: #a2a2a2;
    --muted-2: #737373;

    --border: rgba(244, 196, 48, 0.12);
    --border-soft: rgba(255, 255, 255, 0.07);

    --danger: #ff4d4d;
    --success: #22c55e;
    --info: #60a5fa;

    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;

    --shadow: 0 26px 80px rgba(0, 0, 0, 0.38);
    --sidebar-width: 292px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background:
        radial-gradient(circle at top left, rgba(244, 196, 48, 0.09), transparent 28%),
        radial-gradient(circle at top right, rgba(244, 196, 48, 0.04), transparent 24%),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

.admin-overlay {
    display: none;
}

/* SIDEBAR */

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        #080808;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 100;
}

.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.side-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.brand-img {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(244, 196, 48, 0.22);
    background: #000;
    box-shadow: 0 14px 30px rgba(244, 196, 48, 0.10);
}

.brand-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.side-brand strong {
    display: block;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-brand small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.sidebar-close {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 18px;
}

.sidebar-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(244, 196, 48, 0.10), rgba(255,255,255,.025));
    border: 1px solid var(--border);
}

.sidebar-status strong {
    display: block;
    font-size: 13px;
    font-weight: 900;
}

.sidebar-status small {
    color: var(--muted);
    font-size: 12px;
}

.pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
    flex: 0 0 12px;
}

.sidebar nav {
    display: grid;
    gap: 7px;
    margin-top: 6px;
}

.sidebar nav a,
.store-link,
.logout-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 16px;
    color: #dbdbdb;
    font-weight: 800;
    font-size: 14px;
    transition: 0.2s ease;
}

.sidebar nav a i,
.store-link i,
.logout-link i {
    width: 20px;
    text-align: center;
    color: var(--primary);
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #111;
    box-shadow: 0 14px 30px rgba(244, 196, 48, 0.16);
}

.sidebar nav a:hover i,
.sidebar nav a.active i {
    color: #111;
}

.sidebar-footer {
    margin-top: auto;
    display: grid;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.store-link {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--border-soft);
}

.store-link:hover {
    border-color: var(--border);
    background: rgba(244, 196, 48, 0.08);
}

.logout-link {
    color: #ffb4b4;
}

.logout-link i {
    color: var(--danger);
}

.logout-link:hover {
    background: rgba(255, 77, 77, 0.10);
}

/* MAIN */

.admin-main {
    padding: 26px;
    min-width: 0;
}

.topbar {
    min-height: 92px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.menu-btn,
.ghost-action {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    display: grid;
    place-items: center;
    transition: 0.2s ease;
}

.menu-btn {
    display: none;
}

.menu-btn:hover,
.ghost-action:hover {
    background: rgba(244, 196, 48, 0.10);
    border-color: var(--border);
    color: var(--primary);
}

.eyebrow {
    display: inline-flex;
    color: var(--primary);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.topbar h1 {
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.05;
    letter-spacing: -1px;
    font-weight: 950;
}

.topbar p {
    color: var(--muted);
    margin-top: 7px;
    font-size: 14px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

.user-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #111;
}

.user-card strong {
    display: block;
    font-size: 13px;
    font-weight: 950;
}

.user-card small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}

/* COMPONENTS */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.stat,
.panel {
    background:
        linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
        var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.stat {
    position: relative;
    overflow: hidden;
    padding: 20px;
    min-height: 142px;
}

.stat::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -54px;
    top: -54px;
    border-radius: 50%;
    background: rgba(244, 196, 48, 0.10);
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(244, 196, 48, 0.11);
    color: var(--primary);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border: 1px solid var(--border);
}

.stat span {
    display: block;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
}

.stat strong {
    display: block;
    font-size: 31px;
    line-height: 1;
    margin-top: 8px;
    color: var(--primary);
    letter-spacing: -1px;
}

.stat small {
    display: block;
    color: var(--muted-2);
    font-size: 12px;
    margin-top: 8px;
}

.panel {
    padding: 20px;
    margin-bottom: 20px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.panel-head h2,
.panel h2 {
    font-size: 20px;
    font-weight: 950;
    letter-spacing: -0.5px;
}

.panel-head p {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
}

.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #111;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 950;
    box-shadow: 0 14px 34px rgba(244, 196, 48, 0.18);
    transition: 0.2s ease;
}

.admin-btn:hover,
.form-panel button:hover,
.login-card button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.admin-link {
    color: var(--primary);
    font-weight: 850;
}

.danger-link {
    color: #ff9b9b;
    font-weight: 850;
}

/* TABLE */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

th,
td {
    text-align: left;
    padding: 15px 14px;
    border-bottom: 1px solid rgba(255,255,255,.065);
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 950;
}

td {
    color: #e9e9e9;
    font-size: 14px;
}

tbody tr {
    transition: 0.16s ease;
}

tbody tr:hover {
    background: rgba(255,255,255,.025);
}

.table-img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 18px;
    background: #090909;
    border: 1px solid var(--border-soft);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(244,196,48,.12);
    color: var(--primary);
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 950;
    font-size: 12px;
    white-space: nowrap;
}

.status::before {
    content: "";
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 50%;
}

/* FORMS */

.form-panel {
    max-width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.form-panel input,
.form-panel select,
.form-panel textarea,
.order-detail select,
.inline-form input {
    width: 100%;
    padding: 14px 15px;
    border-radius: 15px;
    border: 1px solid var(--border-soft);
    background: #ffffff;
    color: #111111;
    outline: 0;
    font-size: 14px;
}

.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus,
.order-detail select:focus,
.inline-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(244, 196, 48, 0.13);
}

.form-panel textarea {
    grid-column: 1 / -1;
    min-height: 116px;
    resize: vertical;
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e8e8e8;
    font-weight: 800;
}

.check input {
    width: 18px;
    height: 18px;
}

.inline-form {
    display: grid;
    grid-template-columns: 110px 1fr 140px auto;
    gap: 10px;
    margin-bottom: 20px;
}

.two-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.order-detail {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 20px;
    margin-bottom: 20px;
}

.order-detail p {
    color: var(--muted);
    line-height: 1.7;
}

.order-detail form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.total-line {
    text-align: right;
    margin-top: 18px;
    color: var(--primary);
}

/* LOGIN */

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(244,196,48,.16), transparent 32%),
        radial-gradient(circle at bottom left, rgba(244,196,48,.05), transparent 22%),
        #050505;
}

.login-card {
    width: min(440px, 100%);
    background:
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        #101010;
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 32px;
    box-shadow: 0 30px 90px rgba(0,0,0,.52);
}

.login-logo {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #111;
    font-size: 28px;
    margin-bottom: 18px;
}

.login-card h1 {
    font-size: 34px;
    letter-spacing: -1px;
    font-weight: 950;
}

.login-card p {
    color: var(--muted);
    margin: 8px 0 22px;
    line-height: 1.5;
}

.login-card input {
    width: 100%;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid var(--border-soft);
    margin-bottom: 12px;
    outline: 0;
}

.login-card input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(244,196,48,.13);
}

.login-card button {
    width: 100%;
    padding: 15px;
    margin-top: 4px;
}

.alert {
    background: rgba(255, 77, 77, .10);
    border: 1px solid rgba(255, 77, 77, .24);
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 12px;
    color: #ffb3b3;
    font-weight: 800;
}

/* EMPTY / HELPERS */

.empty-state {
    text-align: center;
    padding: 36px 18px;
    color: var(--muted);
}

.empty-state i {
    font-size: 34px;
    color: var(--primary);
    margin-bottom: 12px;
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border-soft);
    color: #d9d9d9;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
}

/* RESPONSIVE */

@media (max-width: 1180px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-105%);
        width: min(var(--sidebar-width), 88vw);
        transition: transform 0.24s ease;
        box-shadow: 30px 0 90px rgba(0,0,0,.55);
    }

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

    body.sidebar-open .admin-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.58);
        z-index: 90;
        backdrop-filter: blur(3px);
    }

    .sidebar-close {
        display: grid;
        place-items: center;
    }

    .menu-btn {
        display: grid;
    }

    .admin-main {
        padding: 20px;
    }

    .topbar {
        grid-template-columns: auto 1fr;
    }

    .topbar-actions {
        grid-column: 1 / -1;
        justify-content: space-between;
    }

    .user-card {
        margin-left: auto;
    }
}

@media (max-width: 720px) {
    .admin-main {
        padding: 16px;
    }

    .topbar {
        align-items: start;
        gap: 12px;
        margin-bottom: 18px;
    }

    .topbar-actions {
        width: 100%;
    }

    .user-card {
        min-width: 0;
    }

    .user-card div {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .panel {
        padding: 16px;
        border-radius: 22px;
    }

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

    .form-grid,
    .inline-form {
        grid-template-columns: 1fr;
    }

    .order-detail {
        grid-template-columns: 1fr;
    }

    .order-detail form {
        align-items: stretch;
        flex-direction: column;
    }

    .order-detail .admin-btn {
        width: 100%;
    }

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

    .login-card {
        padding: 24px;
        border-radius: 24px;
    }
}

@media (max-width: 460px) {
    .brand-img {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .side-brand strong {
        font-size: 15px;
    }

    .stat {
        min-height: 126px;
    }

    .stat strong {
        font-size: 28px;
    }

    .topbar p {
        font-size: 13px;
    }

    th,
    td {
        padding: 13px 12px;
    }
}


.muted-text {
    color: var(--muted);
    font-size: 12px;
}

.orders-filter {
    display: grid;
    grid-template-columns: 1.4fr 220px 180px auto auto;
    gap: 10px;
    align-items: center;
}

.order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 20px;
    align-items: start;
}

.order-customer-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--border-soft);
    margin-bottom: 18px;
}

.customer-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.customer-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #111;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    font-size: 20px;
    flex: 0 0 54px;
}

.quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.secondary-btn {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: none !important;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.info-grid div {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--border-soft);
}

.info-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 7px;
}

.info-grid strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

.info-grid small {
    color: var(--muted);
    display: block;
    margin-top: 5px;
}

.note-box {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(244,196,48,.08);
    border: 1px solid var(--border);
    margin-bottom: 18px;
    color: #f5f5f5;
}

.note-box i {
    color: var(--primary);
    margin-top: 3px;
}

.order-totals {
    max-width: 390px;
    margin-left: auto;
    margin-top: 18px;
    display: grid;
    gap: 8px;
}

.order-totals div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.order-totals span {
    color: var(--muted);
    font-weight: 850;
}

.order-totals strong {
    font-weight: 950;
}

.grand-total {
    font-size: 22px;
    color: var(--primary);
    border-bottom: 0 !important;
}

.status-form {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.status-form select,
.status-form textarea {
    width: 100%;
    padding: 14px 15px;
    border-radius: 15px;
    border: 1px solid var(--border-soft);
    background: #fff;
    color: #111;
    outline: none;
}

.status-form textarea {
    min-height: 92px;
    resize: vertical;
}

.timeline {
    display: grid;
    gap: 12px;
}

.timeline h3 {
    margin-bottom: 4px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    position: relative;
}

.timeline-item > span {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(244,196,48,.10);
    color: var(--primary);
    border: 1px solid var(--border);
}

.timeline-item strong {
    display: block;
    font-size: 14px;
}

.timeline-item small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.timeline-item p {
    color: #ddd;
    font-size: 13px;
    margin-top: 4px;
    line-height: 1.4;
}

@media (max-width: 1180px) {
    .order-layout {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .orders-filter {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .orders-filter,
    .info-grid {
        grid-template-columns: 1fr;
    }

    .order-customer-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .quick-actions,
    .quick-actions .admin-btn {
        width: 100%;
    }

    .quick-actions {
        flex-direction: column;
    }

    .order-totals {
        max-width: 100%;
    }
}

@media print {
    .sidebar,
    .topbar,
    .admin-overlay,
    .quick-actions,
    .status-form,
    .sidebar-footer,
    .panel-head a {
        display: none !important;
    }

    body,
    .admin-main {
        background: #fff !important;
        color: #111 !important;
        padding: 0 !important;
    }

    .admin-shell {
        display: block !important;
    }

    .panel {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        background: #fff !important;
        color: #111 !important;
    }

    td, th, p, strong, span, small, h1, h2, h3 {
        color: #111 !important;
    }
}


/* Sellable v2 improvements */
.compact-stats .compact {
    min-height: 104px;
}

.compact-stats .compact strong {
    font-size: 25px;
}

.status-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.status-board-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-soft);
    transition: .2s ease;
}

.status-board-card:hover {
    transform: translateY(-2px);
    border-color: var(--border);
    background: rgba(244,196,48,.08);
}

.status-board-card i {
    color: var(--primary);
    font-size: 20px;
}

.status-board-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.status-board-card strong {
    font-size: 26px;
    color: #fff;
}

.row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.row-actions a {
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .status-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .status-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .status-board {
        grid-template-columns: 1fr;
    }
}


/* Orders seen / day grouping / product image upload */
.day-group {
    margin-top: 22px;
}

.day-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: rgba(244,196,48,.08);
    border: 1px solid var(--border);
}

.day-title span {
    font-weight: 950;
    color: var(--primary);
}

.day-title small {
    color: var(--muted);
    font-weight: 800;
}

.order-unseen {
    background: rgba(244,196,48,.065);
}

.new-dot {
    display: inline-flex;
    margin-left: 8px;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--primary);
    color: #111;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.mini-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #eee;
    font-weight: 850;
    padding: 0 8px;
}

.mini-check input {
    width: 18px;
    height: 18px;
}

.danger-zone {
    border-color: rgba(255,77,77,.20);
    background:
        linear-gradient(145deg, rgba(255,77,77,.055), rgba(255,255,255,.02)),
        var(--panel);
}

.delete-all-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.delete-all-form select {
    min-width: 240px;
    padding: 14px 15px;
    border-radius: 15px;
    border: 1px solid var(--border-soft);
    background: #fff;
    color: #111;
}

.danger-btn {
    background: linear-gradient(135deg, #ff5a5a, #c81e1e) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(255,77,77,.20) !important;
}

.product-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
    margin-bottom: 18px;
}

.image-upload-card {
    position: sticky;
    top: 22px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--border-soft);
}

.image-upload-card h3 {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.image-upload-card h3 i {
    color: var(--primary);
}

.image-upload-card p {
    color: var(--muted);
    line-height: 1.5;
    font-size: 13px;
    margin-bottom: 14px;
}

.product-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    background: radial-gradient(circle at center, rgba(244,196,48,.12), transparent 60%), #090909;
    border: 1px solid var(--border);
    margin-bottom: 14px;
}

.product-preview img {
    width: 92%;
    height: 92%;
    object-fit: contain;
}

.file-drop {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 98px;
    padding: 16px;
    border-radius: 18px;
    border: 1px dashed rgba(244,196,48,.35);
    background: rgba(244,196,48,.06);
    color: var(--primary);
    font-weight: 950;
    cursor: pointer;
    text-align: center;
}

.file-drop input {
    display: none;
}

.file-drop i {
    font-size: 24px;
}

@media (max-width: 980px) {
    .product-edit-layout {
        grid-template-columns: 1fr;
    }

    .image-upload-card {
        position: relative;
        top: auto;
    }
}

@media (max-width: 720px) {
    .delete-all-form,
    .delete-all-form select,
    .delete-all-form .admin-btn {
        width: 100%;
    }
}


/* App-like v3 */
.admin-main {
    padding-bottom: 28px;
}

.quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 14px;
    border-radius: 16px;
    background: rgba(244,196,48,.10);
    border: 1px solid var(--border);
    color: var(--primary);
    font-weight: 950;
    font-size: 13px;
}

.admin-alert {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 13px 15px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: rgba(255,77,77,.12);
    border: 1px solid rgba(255,77,77,.25);
    color: #ffb8b8;
    font-weight: 850;
}

.sticky-panel-head {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(18,18,18,.86);
    backdrop-filter: blur(18px);
    margin: -20px -20px 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-soft);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.form-card {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border-soft);
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-weight: 950;
    margin-bottom: 16px;
}

.image-url-input {
    width: 100%;
    padding: 14px 15px;
    border-radius: 15px;
    border: 1px solid var(--border-soft);
    background: #fff;
    color: #111;
    outline: none;
    margin-bottom: 12px;
}

.or-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    margin: 12px 0;
}

.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

.mobile-save-bar {
    display: none;
}

.mobile-tabbar {
    display: none;
}

@media (min-width: 981px) {
    .sidebar {
        transition: width .2s ease;
    }

    .sidebar nav a {
        position: relative;
    }
}

@media (max-width: 980px) {
    .admin-main {
        padding-bottom: 92px;
    }

    .mobile-tabbar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 95;
        height: 66px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        padding: 7px;
        border-radius: 24px;
        background: rgba(12,12,12,.88);
        border: 1px solid var(--border);
        backdrop-filter: blur(18px);
        box-shadow: 0 22px 60px rgba(0,0,0,.45);
    }

    .mobile-tabbar a {
        display: grid;
        place-items: center;
        gap: 3px;
        border-radius: 18px;
        color: #d7d7d7;
        font-size: 11px;
        font-weight: 850;
    }

    .mobile-tabbar a i {
        font-size: 17px;
        color: var(--primary);
    }

    .mobile-tabbar a.active {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #111;
    }

    .mobile-tabbar a.active i {
        color: #111;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 40;
        margin: -20px -20px 18px;
        padding: 16px 20px;
        background: rgba(7,7,7,.82);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--border-soft);
    }
}

@media (max-width: 720px) {
    .quick-chip span {
        display: none;
    }

    .sticky-panel-head {
        position: relative;
        margin: -16px -16px 18px;
        padding: 16px;
    }

    .sticky-panel-head .row-actions {
        width: 100%;
    }

    .sticky-panel-head .row-actions .admin-btn,
    .sticky-panel-head .row-actions .badge-soft {
        flex: 1;
        justify-content: center;
    }

    .form-card {
        padding: 14px;
    }

    .mobile-save-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 88px;
        display: block;
        z-index: 94;
    }

    .mobile-save-bar .admin-btn {
        width: 100%;
        min-height: 54px;
    }

    .product-form-panel > form > .admin-btn {
        display: none;
    }
}


/* v4 professional responsive/product fixes */
.mobile-only { display: none; }
.desktop-only { display: inline-flex; }

.topbar-actions {
    margin-left: auto;
    justify-content: flex-end;
}

.icon-action {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.045);
    color: var(--primary);
    transition: .2s ease;
}

.icon-action:hover,
.ghost-action:hover {
    background: rgba(244,196,48,.10);
    border-color: var(--border);
}

.store-toggle.open {
    color: #22c55e;
    border-color: rgba(34,197,94,.22);
    background: rgba(34,197,94,.10);
}

.store-toggle.closed {
    color: #ff4d4d;
    border-color: rgba(255,77,77,.24);
    background: rgba(255,77,77,.10);
}

.sidebar-status {
    color: inherit;
}

.sidebar-status.is-closed {
    border-color: rgba(255,77,77,.25);
    background: linear-gradient(135deg, rgba(255,77,77,.10), rgba(255,255,255,.025));
}

.sidebar-status.is-closed .pulse {
    background: #ff4d4d;
    box-shadow: 0 0 0 6px rgba(255,77,77,.12);
}

.status-power {
    margin-left: auto;
    color: var(--muted);
}

.active-status {
    color: #22c55e !important;
    background: rgba(34,197,94,.11) !important;
}

.hidden-status {
    color: #ffcc4d !important;
    background: rgba(244,196,48,.10) !important;
}

.products-list-mobile {
    display: none;
}

.product-actions-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-actions-icons a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(244,196,48,.10);
    color: var(--primary);
    border: 1px solid var(--border);
    transition: .18s ease;
}

.product-actions-icons a:hover {
    transform: translateY(-1px);
    background: var(--primary);
    color: #111;
}

.product-actions-icons .danger-icon {
    color: #ff8a8a;
    background: rgba(255,77,77,.09);
    border-color: rgba(255,77,77,.18);
}

.product-actions-icons .danger-icon:hover {
    background: #ff4d4d;
    color: #fff;
}

.product-thumb {
    width: 74px;
    height: 74px;
    object-fit: cover;
    background: #111;
}

.product-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.product-preview img[src$="burger-demo.svg"] {
    width: 92% !important;
    height: 92% !important;
    object-fit: contain !important;
}

.products-table-desktop table {
    min-width: 980px;
}

@media (max-width: 980px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: grid; }

    .topbar {
        min-height: 64px;
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    .topbar-title {
        display: none;
    }

    .topbar-actions {
        grid-column: auto;
        justify-content: flex-end;
        gap: 10px;
        width: auto;
    }

    .menu-btn,
    .ghost-action,
    .icon-action,
    .user-avatar {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .user-card {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .user-card div {
        display: none;
    }

    .products-table-desktop {
        display: none;
    }

    .products-list-mobile {
        display: grid;
        gap: 12px;
    }

    .product-mobile-card {
        display: grid;
        grid-template-columns: 86px 1fr;
        gap: 12px;
        padding: 12px;
        border-radius: 20px;
        background: rgba(255,255,255,.035);
        border: 1px solid var(--border-soft);
    }

    .product-mobile-card img {
        width: 86px;
        height: 86px;
        object-fit: cover;
        border-radius: 17px;
        background: #111;
    }

    .product-mobile-info {
        min-width: 0;
        display: grid;
        gap: 9px;
    }

    .product-mobile-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
    }

    .product-mobile-top h3 {
        font-size: 15px;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .product-mobile-top span:not(.status) {
        color: var(--muted);
        font-size: 12px;
    }

    .product-mobile-top .status {
        padding: 5px 8px;
        font-size: 11px;
        flex: 0 0 auto;
    }

    .product-mobile-meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .product-mobile-meta span {
        font-size: 11px;
        color: var(--muted);
        padding: 6px 8px;
        border-radius: 999px;
        background: rgba(255,255,255,.045);
        border: 1px solid var(--border-soft);
    }

    .product-mobile-meta strong {
        color: #fff;
    }

    .product-actions-icons {
        justify-content: flex-start;
    }

    .product-actions-icons a {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }
}

@media (max-width: 720px) {
    .panel-head {
        gap: 12px;
    }

    .products-panel .panel-head {
        flex-direction: row;
        align-items: center;
    }

    .products-panel .panel-head p {
        display: none;
    }

    .products-panel .panel-head .admin-btn {
        padding: 11px 13px;
        white-space: nowrap;
    }

    .topbar {
        margin: -16px -16px 14px;
        padding: 10px 16px;
    }
}

@media (max-width: 420px) {
    .topbar-actions {
        gap: 7px;
    }

    .menu-btn,
    .ghost-action,
    .icon-action,
    .user-avatar {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .product-mobile-card {
        grid-template-columns: 74px 1fr;
    }

    .product-mobile-card img {
        width: 74px;
        height: 74px;
    }

    .product-actions-icons a {
        width: 32px;
        height: 32px;
    }
}

.quick-settings-row {
    margin-bottom: 18px;
}

.quick-settings-row .sidebar-status {
    max-width: 360px;
}


/* v5 professional product catalog and settings */
.products-control-panel {
    margin-bottom: 18px;
}

.catalog-toolbar {
    display: grid;
    gap: 14px;
}

.catalog-search {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-radius: 18px;
    background: #fff;
    color: #111;
}

.catalog-search input {
    border: 0;
    outline: 0;
    width: 100%;
    font-size: 14px;
}

.catalog-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.catalog-tabs::-webkit-scrollbar {
    height: 0;
}

.catalog-tabs button {
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.045);
    color: #ddd;
    padding: 11px 14px;
    border-radius: 999px;
    font-weight: 900;
    white-space: nowrap;
}

.catalog-tabs button.active,
.catalog-tabs button:hover {
    background: var(--primary);
    color: #111;
}

.catalog-sections {
    display: grid;
    gap: 20px;
}

.section-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.section-kicker {
    color: var(--primary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .9px;
    font-weight: 950;
}

.section-bar h2 {
    margin-top: 4px;
    font-size: 25px;
}

.section-bar strong {
    color: var(--muted);
    font-size: 13px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border-soft);
}

.admin-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-product-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--border-soft);
    transition: .2s ease;
}

.admin-product-card:hover {
    transform: translateY(-2px);
    border-color: var(--border);
}

.product-card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(0,0,0,.48);
    backdrop-filter: blur(12px);
}

.product-card-actions a {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--primary);
    background: rgba(244,196,48,.10);
}

.product-card-actions .danger-icon {
    color: #ff8b8b;
    background: rgba(255,77,77,.12);
}

.admin-product-img {
    height: 180px;
    background: #101010;
}

.admin-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-product-img img[src$="burger-demo.svg"],
.admin-product-img img[src$="drink-demo.svg"],
.admin-product-img img[src$="fries-demo.svg"],
.admin-product-img img[src$="chivito-demo.svg"] {
    object-fit: contain;
    padding: 24px;
}

.admin-product-body {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.admin-product-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
}

.admin-product-title h3 {
    font-size: 16px;
    line-height: 1.2;
}

.admin-product-title small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.admin-product-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.admin-product-metrics div {
    padding: 9px;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--border-soft);
}

.admin-product-metrics span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.admin-product-metrics strong {
    font-size: 13px;
}

.settings-grid {
    display: grid;
    gap: 18px;
}

.hero-config-card textarea {
    min-height: 94px;
}

.hero-preview-admin {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-soft);
}

.hero-preview-admin img {
    width: 150px;
    height: 100px;
    border-radius: 16px;
    object-fit: cover;
    background: #111;
}

.hero-preview-admin span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 950;
}

.hero-preview-admin strong {
    display: block;
    margin-top: 6px;
    font-size: 20px;
    line-height: 1.1;
}

.settings-save-btn {
    margin-top: 18px;
}

@media (max-width: 1180px) {
    .admin-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .admin-product-grid {
        grid-template-columns: 1fr;
    }

    .admin-product-img {
        height: 160px;
    }

    .admin-product-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-preview-admin {
        grid-template-columns: 1fr;
    }

    .hero-preview-admin img {
        width: 100%;
        height: 160px;
    }

    .section-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* v6 premium serious admin refinements */
:root {
    --radius-xl: 18px;
    --radius-lg: 14px;
    --radius-md: 10px;
}

body {
    overflow-x: hidden;
}

.admin-main {
    max-width: 100vw;
    overflow-x: hidden;
}

.panel,
.stat,
.editor-card,
.premium-editor {
    border-radius: 18px !important;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(7,7,7,.88);
    backdrop-filter: blur(18px);
}

@media (min-width: 981px) {
    .topbar {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* Premium editor */
.premium-editor {
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022)), var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255,255,255,.018);
}

.editor-kicker {
    display: block;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .9px;
    font-weight: 950;
    font-size: 11px;
    margin-bottom: 5px;
}

.editor-header h2 {
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -.5px;
}

.editor-header p {
    color: var(--muted);
    margin-top: 5px;
}

.editor-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-solid,
.btn-muted {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 15px;
    border-radius: 10px;
    font-weight: 950;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-solid {
    background: var(--primary);
    color: #111;
    border-color: rgba(255,255,255,.08);
}

.btn-muted {
    background: rgba(255,255,255,.055);
    color: #fff;
    border-color: var(--border-soft);
}

.editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    padding: 20px;
}

.editor-main {
    display: grid;
    gap: 16px;
}

.editor-side {
    min-width: 0;
}

.editor-card {
    background: rgba(255,255,255,.032);
    border: 1px solid var(--border-soft);
    padding: 18px;
}

.editor-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #fff;
}

.editor-card-title i {
    color: var(--primary);
}

.premium-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.premium-form-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.premium-form-grid label,
.image-editor-card label,
.category-premium-form label {
    display: grid;
    gap: 7px;
}

.premium-form-grid label span,
.image-editor-card label span,
.category-premium-form label span {
    color: #cfcfcf;
    font-size: 12px;
    font-weight: 850;
}

.premium-form-grid input,
.premium-form-grid select,
.premium-form-grid textarea,
.image-editor-card input,
.category-premium-form input {
    width: 100%;
    border: 1px solid #2d2d2d;
    background: #f4f4f4;
    color: #111;
    border-radius: 9px;
    padding: 13px 13px;
    outline: none;
    font-size: 14px;
}

.premium-form-grid input:focus,
.premium-form-grid select:focus,
.premium-form-grid textarea:focus,
.image-editor-card input:focus,
.category-premium-form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(244,196,48,.13);
}

.premium-form-grid textarea {
    min-height: 110px;
    resize: vertical;
}

.premium-form-grid .full {
    grid-column: 1 / -1;
}

.switch-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.premium-switch {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #fff;
}

.premium-switch input {
    display: none;
}

.premium-switch span {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #2a2a2a;
    border: 1px solid var(--border-soft);
    position: relative;
}

.premium-switch span::after {
    content: "";
    width: 18px;
    height: 18px;
    background: #777;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 3px;
    transition: .18s ease;
}

.premium-switch input:checked + span {
    background: rgba(244,196,48,.22);
    border-color: rgba(244,196,48,.45);
}

.premium-switch input:checked + span::after {
    left: 19px;
    background: var(--primary);
}

.image-editor-card {
    position: sticky;
    top: 92px;
}

.premium-product-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0a0a0a;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.premium-product-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-product-preview img[src$="burger-demo.svg"] {
    object-fit: contain;
    padding: 26px;
}

.premium-upload {
    min-height: 104px;
    border: 1px dashed rgba(244,196,48,.45);
    border-radius: 12px;
    background: rgba(244,196,48,.065);
    display: grid !important;
    place-items: center;
    text-align: center;
    cursor: pointer;
    padding: 15px;
    color: var(--primary);
}

.premium-upload input {
    display: none;
}

.premium-upload i {
    font-size: 24px;
}

.premium-upload small {
    color: var(--muted);
}

.premium-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    margin: 14px 0;
}

.premium-separator::before,
.premium-separator::after {
    content: "";
    height: 1px;
    background: var(--border-soft);
    flex: 1;
}

.image-current {
    display: block;
    margin-top: 10px;
}

/* Categories */
.categories-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.category-premium-form {
    display: grid;
    grid-template-columns: 110px 1fr 140px auto;
    gap: 12px;
    align-items: end;
}

.category-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.category-card {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: rgba(255,255,255,.032);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}

.category-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(244,196,48,.10);
    border: 1px solid var(--border);
    font-size: 24px;
}

.category-card h3 {
    font-size: 15px;
}

.category-card p,
.help-copy {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.category-delete {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #ff8a8a;
    background: rgba(255,77,77,.10);
    border: 1px solid rgba(255,77,77,.20);
}

.category-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.category-examples span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    border: 1px solid var(--border-soft);
    font-size: 12px;
    font-weight: 850;
}

/* Dashboard mobile robustness */
.dashboard-main-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dashboard-panel {
    min-width: 0;
    overflow: hidden;
}

.dashboard-list {
    display: grid;
    gap: 10px;
}

.dashboard-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border-radius: 12px;
    background: rgba(255,255,255,.032);
    border: 1px solid var(--border-soft);
}

.dashboard-list-item strong {
    display: block;
    font-size: 14px;
}

.dashboard-list-item span:not(.status) {
    color: var(--muted);
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

.mobile-save-bar {
    display: none;
}

/* Swipe hint */
.sidebar::after {
    content: "Deslizá hacia la derecha para cerrar";
    display: none;
}

/* Mobile */
@media (max-width: 1180px) {
    .dashboard-main-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-form-grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .admin-main {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
    }

    .editor-grid,
    .categories-grid {
        grid-template-columns: 1fr;
    }

    .image-editor-card {
        position: relative;
        top: auto;
    }

    .category-premium-form {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-main-stats,
    .compact-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .table-wrap {
        max-width: 100%;
        overflow-x: auto;
    }
}

@media (max-width: 720px) {
    .admin-main {
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 96px;
    }

    .editor-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .editor-actions {
        width: 100%;
    }

    .editor-actions .btn-solid,
    .editor-actions .btn-muted {
        flex: 1;
    }

    .editor-grid {
        padding: 14px;
        gap: 14px;
    }

    .editor-card {
        padding: 14px;
    }

    .premium-form-grid,
    .premium-form-grid.four,
    .category-premium-form {
        grid-template-columns: 1fr;
    }

    .category-cards {
        grid-template-columns: 1fr;
    }

    .dashboard-main-stats,
    .compact-stats {
        grid-template-columns: 1fr;
    }

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

    .dashboard-list-item {
        grid-template-columns: 1fr;
    }

    .dashboard-list-item > div:last-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

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

    .mobile-save-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 88px;
        display: block;
        z-index: 94;
    }

    .mobile-save-bar .btn-solid {
        width: 100%;
        min-height: 54px;
    }

    .premium-editor .editor-actions .btn-solid {
        display: none;
    }

    .mobile-tabbar {
        display: grid !important;
    }
}

@media (max-width: 420px) {
    .admin-main {
        padding-left: 10px;
        padding-right: 10px;
    }

    .status-board {
        grid-template-columns: 1fr !important;
    }

    .editor-header h2 {
        font-size: 21px;
    }
}


/* v7 formal/elegant corrections */
:root {
    --radius-xl: 12px;
    --radius-lg: 10px;
    --radius-md: 8px;
    --panel: #161616;
    --panel-2: #1b1b1b;
    --border: rgba(244,196,48,.10);
    --border-soft: rgba(255,255,255,.08);
}

body {
    background: #060606;
}

/* Remove heavy black title slab on desktop */
@media (min-width: 981px) {
    .topbar {
        background: transparent !important;
        border-bottom: 0 !important;
        backdrop-filter: none !important;
        padding: 22px 0 24px !important;
        margin: 0 !important;
    }

    .topbar::after {
        content: "";
        position: absolute;
        left: -26px;
        right: -26px;
        bottom: 0;
        height: 1px;
        background: rgba(255,255,255,.035);
        pointer-events: none;
    }
}

/* Mobile fixed header that stays while scrolling */
@media (max-width: 980px) {
    .topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 76px !important;
        z-index: 200 !important;
        margin: 0 !important;
        padding: 14px 14px !important;
        background: rgba(6,6,6,.94) !important;
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
        backdrop-filter: blur(18px) !important;
    }

    .admin-main {
        padding-top: 92px !important;
    }

    .sidebar {
        z-index: 260 !important;
    }

    body.sidebar-open .admin-overlay {
        z-index: 240 !important;
    }
}

/* Less rounded, more formal components */
.panel,
.stat,
.editor-card,
.premium-editor,
.admin-product-card,
.category-card,
.status-board-card,
.dashboard-list-item {
    border-radius: 12px !important;
}

.btn-solid,
.btn-muted,
.admin-btn,
.badge-soft,
.status,
input,
select,
textarea,
.catalog-search,
.catalog-tabs button,
.product-card-actions,
.product-card-actions a,
.premium-upload,
.premium-product-preview,
.web-hero-preview,
.mobile-tabbar,
.mobile-tabbar a,
.icon-action,
.ghost-action,
.menu-btn,
.user-avatar,
.user-card,
.quick-chip {
    border-radius: 8px !important;
}

/* Fields: stronger importance and clearer visual hierarchy */
.premium-form-grid label span,
.image-editor-card label span,
.category-premium-form label span {
    color: #f1f1f1 !important;
    font-size: 11px !important;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.premium-form-grid input,
.premium-form-grid select,
.premium-form-grid textarea,
.image-editor-card input,
.category-premium-form input,
.form-panel input,
.form-panel select,
.form-panel textarea {
    border-radius: 6px !important;
    border: 1px solid #3a3a3a !important;
    background: #eeeeee !important;
    font-weight: 650;
}

.premium-form-grid input::placeholder,
.premium-form-grid textarea::placeholder,
.category-premium-form input::placeholder {
    color: #777;
    font-weight: 500;
}

/* Remove giant decorative yellow circles in cards */
.stat::after {
    display: none !important;
}

.stat {
    min-height: 124px;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), #151515 !important;
}

.stat-icon {
    border-radius: 8px !important;
}

/* Dashboard mobile no horizontal break */
.dashboard-panels,
.dashboard-panel,
.dashboard-list,
.dashboard-list-item {
    min-width: 0 !important;
    max-width: 100% !important;
}

.dashboard-list-item {
    overflow: hidden;
}

.dashboard-list-item > div {
    min-width: 0;
}

.dashboard-list-item strong,
.dashboard-list-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Web manual section */
.web-editor-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
}

.web-hero-preview {
    width: 100%;
    aspect-ratio: 16/10;
    background: #0b0b0b;
    border: 1px solid var(--border-soft);
    overflow: hidden;
    margin-bottom: 14px;
}

.web-hero-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.web-guidelines {
    display: grid;
    gap: 10px;
}

.web-guidelines div {
    padding: 12px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.03);
    border-radius: 8px;
}

.web-guidelines strong {
    display: block;
    color: #fff;
    margin-bottom: 4px;
}

.web-guidelines span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.settings-editor-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.editor-submit-row {
    padding: 0 20px 20px;
    display: flex;
    justify-content: flex-end;
}

.operational-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.03);
    color: #fff;
    margin-bottom: 12px;
}

.operational-status > span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.operational-status.open > span {
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34,197,94,.12);
}

.operational-status.closed > span {
    background: #ff4d4d;
    box-shadow: 0 0 0 5px rgba(255,77,77,.12);
}

.operational-status small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

@media (max-width: 1180px) {
    .web-editor-grid,
    .settings-editor-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile form improvements */
@media (max-width: 720px) {
    .stat {
        min-height: 108px !important;
    }

    .stat strong {
        font-size: 25px !important;
    }

    .editor-header {
        padding: 14px !important;
    }

    .editor-grid {
        padding: 12px !important;
    }

    .editor-card {
        padding: 13px !important;
    }

    .premium-product-preview {
        aspect-ratio: 16/10;
    }

    .editor-submit-row {
        padding: 0 12px 18px;
    }

    .editor-submit-row .btn-solid {
        width: 100%;
    }
}


@media (max-width: 980px) {
    .mobile-tabbar {
        display: grid !important;
        position: fixed !important;
        z-index: 210 !important;
    }
}


/* v8 admin menu serious refinement */
.sidebar {
    background: #0b0b0b !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
}

.brand-img,
.sidebar nav a,
.sidebar-status,
.store-link,
.logout-link,
.user-card,
.icon-action,
.ghost-action,
.quick-chip,
.menu-btn,
.sidebar-close,
.mobile-tabbar,
.mobile-tabbar a {
    border-radius: 6px !important;
}

.sidebar nav {
    gap: 2px !important;
}

.sidebar nav a {
    background: transparent !important;
    border: 1px solid transparent;
    box-shadow: none !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: rgba(244,196,48,.12) !important;
    border-color: rgba(244,196,48,.20) !important;
    color: #fff !important;
}

.sidebar nav a:hover i,
.sidebar nav a.active i {
    color: var(--primary) !important;
}

.sidebar-status {
    box-shadow: none !important;
    background: rgba(255,255,255,.035) !important;
}

.sidebar-status.is-open {
    border-color: rgba(34,197,94,.26) !important;
}

.sidebar-status.is-closed {
    border-color: rgba(255,77,77,.26) !important;
}

.mobile-tabbar {
    border-radius: 8px !important;
    left: 10px !important;
    right: 10px !important;
}

.mobile-tabbar a.active {
    border-radius: 6px !important;
}

.open-store-modal {
    position: fixed;
    inset: 0;
    z-index: 320;
    background: rgba(0,0,0,.72);
    display: grid;
    place-items: center;
    padding: 20px;
    backdrop-filter: blur(8px);
}

.open-store-card {
    width: min(460px, 100%);
    background: #141414;
    border: 1px solid var(--border);
    box-shadow: 0 24px 90px rgba(0,0,0,.5);
    padding: 20px;
    border-radius: 10px;
}

.open-store-card p {
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.open-store-card label {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.open-store-card label span {
    color: #f1f1f1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .35px;
    font-weight: 850;
}

.open-store-card input {
    border: 1px solid #3a3a3a;
    background: #eee;
    color: #111;
    padding: 12px;
    border-radius: 6px;
}

.quick-hours {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.quick-hours button {
    border: 1px solid var(--border);
    background: rgba(244,196,48,.10);
    color: var(--primary);
    font-weight: 900;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
}

@media (max-width: 980px) {
    .topbar {
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
    }
}


/* v13 panel control / less floating workspace */
.admin-main {
    max-width: none !important;
}

.panel,
.premium-editor,
.work-panel {
    background: #181818 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: none !important;
}

.work-panel {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.workspace-head {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #1a1a1a;
}

.workspace-head span {
    color: var(--primary);
    font-weight: 950;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.workspace-head h2 {
    font-size: 23px;
    margin-top: 4px;
}

.workspace-head p {
    color: var(--muted);
    margin-top: 6px;
}

.workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 0;
}

.workspace-main {
    padding: 18px;
    border-right: 1px solid rgba(255,255,255,.08);
}

.workspace-side {
    padding: 18px;
    background: #161616;
}

.inline-create-form {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr) 120px auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    background: #202020;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    margin-bottom: 14px;
}

.field {
    display: grid;
    gap: 6px;
}

.field label {
    color: #f1f1f1;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .45px;
    font-weight: 900;
}

.field input {
    height: 40px;
    border-radius: 5px;
    border: 1px solid #3b3b3b;
    background: #eeeeee;
    color: #111;
    padding: 0 11px;
    font-weight: 700;
}

.category-sort-list {
    display: grid;
    gap: 10px;
}

.category-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: #202020;
    border-radius: 8px;
}

.category-row.dragging {
    opacity: .55;
    border-color: var(--primary);
}

.drag-handle {
    display: grid;
    place-items: center;
    color: var(--muted);
    background: rgba(255,255,255,.04);
    border-radius: 6px;
    cursor: grab;
}

.category-edit-form {
    display: grid;
    grid-template-columns: 54px 90px minmax(0,1fr) 100px auto;
    gap: 10px;
    align-items: end;
}

.cat-preview {
    width: 46px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(244,196,48,.10);
    border: 1px solid rgba(244,196,48,.20);
    font-size: 20px;
}

.category-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
}

.icon-link {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--primary);
    cursor: pointer;
}

.icon-link.delete-link {
    color: #ff8b8b;
    background: rgba(255,77,77,.10);
    border-color: rgba(255,77,77,.20);
}

.icon-link.save-link {
    border: 0;
}

.reorder-bar {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 8px;
    background: #1b1b1b;
    border: 1px solid rgba(255,255,255,.08);
}

.reorder-bar strong {
    display: block;
}

.reorder-bar span {
    color: var(--muted);
    font-size: 12px;
}

.side-note {
    border: 1px solid rgba(255,255,255,.08);
    background: #202020;
    padding: 14px;
    border-radius: 8px;
}

.side-note p {
    color: var(--muted);
    line-height: 1.5;
    margin: 8px 0 12px;
}

@media (max-width: 1180px) {
    .workspace-grid {
        grid-template-columns: 1fr;
    }

    .workspace-main {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .category-edit-form {
        grid-template-columns: 44px 80px minmax(0,1fr) 90px auto;
    }
}

@media (max-width: 760px) {
    .inline-create-form,
    .category-edit-form {
        grid-template-columns: 1fr;
    }

    .category-row {
        grid-template-columns: 1fr;
    }

    .drag-handle {
        height: 34px;
    }

    .cat-preview {
        width: 100%;
    }

    .category-actions {
        justify-content: flex-end;
    }

    .reorder-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-main,
    .workspace-side {
        padding: 12px;
    }
}


/* v18 categorías premium: monitor limpio y sin rupturas */
.category-admin-page {
    background: #181818;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    overflow: hidden;
}

.category-admin-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #1b1b1b;
}

.category-admin-head span {
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 950;
    letter-spacing: .7px;
    font-size: 11px;
}

.category-admin-head h2 {
    margin-top: 4px;
    font-size: 24px;
}

.category-admin-head p {
    margin-top: 6px;
    color: var(--muted);
}

.category-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
}

.category-admin-main {
    padding: 18px;
    border-right: 1px solid rgba(255,255,255,.08);
    min-width: 0;
}

.category-admin-side {
    padding: 18px;
    background: #151515;
}

.category-create-strip {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 120px 130px;
    gap: 12px;
    align-items: end;
    padding: 14px;
    margin-bottom: 14px;
    background: #202020;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
}

.category-create-strip label,
.category-row-form label {
    display: grid;
    gap: 6px;
}

.category-create-strip span {
    color: #f1f1f1;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .45px;
    font-weight: 900;
}

.category-create-strip input,
.category-row-form input {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #3b3b3b;
    background: #eeeeee;
    color: #111;
    padding: 0 11px;
    font-weight: 750;
}

.category-table-head {
    display: grid;
    grid-template-columns: 44px 92px minmax(0, 1fr) 110px 138px;
    gap: 10px;
    padding: 0 12px 8px;
    color: #b9b9b9;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .45px;
    font-weight: 900;
}

.category-sort-list {
    display: grid;
    gap: 8px;
}

.category-edit-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    background: #202020;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 10px;
}

.category-edit-row.dragging {
    opacity: .55;
    border-color: rgba(244,196,48,.45);
}

.category-drag {
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: rgba(255,255,255,.04);
    border-radius: 6px;
    cursor: grab;
}

.category-row-form {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 110px 138px;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.category-icon-field input {
    text-align: center;
    font-size: 18px;
}

.category-order-field input {
    text-align: center;
}

.category-row-actions {
    display: grid;
    grid-template-columns: repeat(3, 38px);
    gap: 7px;
    justify-content: end;
}

.category-row-actions a,
.category-row-actions button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    color: var(--primary);
    cursor: pointer;
}

.category-row-actions .danger {
    color: #ff8b8b;
    background: rgba(255,77,77,.10);
    border-color: rgba(255,77,77,.20);
}

.category-order-save {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 8px;
    background: #1b1b1b;
    border: 1px solid rgba(255,255,255,.08);
}

.category-order-save strong {
    display: block;
}

.category-order-save span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.category-side-card {
    border: 1px solid rgba(255,255,255,.08);
    background: #202020;
    padding: 14px;
    border-radius: 8px;
}

.category-side-card p {
    color: var(--muted);
    line-height: 1.45;
    margin: 8px 0 12px;
}

.category-mini-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-mini-list a {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
}

@media (max-width: 1180px) {
    .category-admin-layout {
        grid-template-columns: 1fr;
    }

    .category-admin-main {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
}

@media (max-width: 760px) {
    .category-admin-head,
    .category-order-save {
        align-items: stretch;
        flex-direction: column;
    }

    .category-create-strip,
    .category-table-head,
    .category-row-form {
        grid-template-columns: 1fr;
    }

    .category-table-head {
        display: none;
    }

    .category-edit-row {
        grid-template-columns: 1fr;
    }

    .category-drag {
        height: 34px;
    }

    .category-row-actions {
        grid-template-columns: repeat(3, 1fr);
    }

    .category-row-actions a,
    .category-row-actions button {
        width: 100%;
    }

    .category-admin-main,
    .category-admin-side {
        padding: 12px;
    }
}


/* v19 finanzas editable + espaciado iconos */
.panel-head h2,
.editor-card-title,
.workspace-head h2,
.category-admin-head h2,
.stat span,
.topbar-title h1 {
    letter-spacing: -.25px;
}

.panel-head h2 i,
.editor-card-title i,
.stat-icon i {
    margin-right: 8px;
}

.panel-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.finance-form-card.editing-card {
    border-color: rgba(244,196,48,.34) !important;
    background: linear-gradient(145deg, rgba(244,196,48,.055), rgba(255,255,255,.025)), #181818 !important;
}

.finance-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.finance-actions .admin-link,
.finance-actions .danger-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
}

.finance-actions .danger-link {
    background: rgba(255,77,77,.10);
    border-color: rgba(255,77,77,.18);
}

.finance-list-panel table td:last-child,
.finance-list-panel table th:last-child {
    min-width: 190px;
}

@media (max-width: 760px) {
    .finance-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .finance-actions .admin-link,
    .finance-actions .danger-link {
        justify-content: center;
    }
}


/* v20 Admin polish: countdown realtime and spacing between price/status */
.admin-countdown {
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    font-weight: 950;
}

.dashboard-list-item > div:last-child {
    display: grid !important;
    grid-template-columns: auto auto !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 18px !important;
    min-width: 210px !important;
}

.dashboard-list-item > div:last-child strong {
    min-width: 72px !important;
    text-align: right !important;
}

.dashboard-list-item .status {
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    .dashboard-list-item > div:last-child {
        min-width: 0 !important;
        width: 100% !important;
        grid-template-columns: 1fr auto !important;
        gap: 12px !important;
    }

    .dashboard-list-item > div:last-child strong {
        text-align: left !important;
    }
}


/* v21 Dashboard pedidos recientes: separación precio/estado + countdown */
.admin-countdown {
    color: var(--primary) !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 950 !important;
}

.dashboard-list-item > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 22px !important;
    min-width: 230px !important;
}

.dashboard-list-item > div:last-child > strong {
    display: inline-block !important;
    min-width: 86px !important;
    text-align: right !important;
    margin-right: 4px !important;
}

.dashboard-list-item > div:last-child .status {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: 104px !important;
    justify-content: center !important;
}

@media (max-width: 760px) {
    .dashboard-list-item > div:last-child {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .dashboard-list-item > div:last-child > strong {
        min-width: 0 !important;
        text-align: left !important;
    }
}


/* v22 Finanzas: layout más sólido, sin campos flotando */
.finance-workspace {
    margin-top: 18px;
    margin-bottom: 18px;
    background: #181818;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    overflow: hidden;
}

.finance-workspace-head {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #1b1b1b;
}

.finance-workspace-head span {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: 11px;
    font-weight: 950;
}

.finance-workspace-head h2 {
    margin-top: 4px;
    font-size: 24px;
}

.finance-workspace-head p {
    color: var(--muted);
    margin-top: 5px;
}

.finance-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.finance-box {
    padding: 18px;
    min-width: 0;
}

.finance-box + .finance-box {
    border-left: 1px solid rgba(255,255,255,.08);
}

.finance-box.editing-card {
    background: linear-gradient(145deg, rgba(244,196,48,.055), rgba(255,255,255,.018));
}

.finance-box-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.finance-box-title h3 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 20px;
}

.finance-box-title h3 i {
    color: var(--primary);
}

.finance-box-title p {
    color: var(--muted);
    margin-top: 5px;
}

.finance-clean-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    align-items: end;
}

.finance-clean-form label {
    display: grid;
    gap: 6px;
}

.finance-clean-form label span {
    color: #f1f1f1;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .45px;
    font-weight: 900;
}

.finance-clean-form input,
.finance-clean-form select {
    height: 42px;
    border-radius: 6px;
    border: 1px solid #3b3b3b;
    background: #eeeeee;
    color: #111;
    padding: 0 12px;
    font-weight: 750;
}

.finance-clean-form button {
    justify-self: start;
    align-self: end;
}

.expense-clean-form {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

@media (max-width: 1100px) {
    .finance-form-grid {
        grid-template-columns: 1fr;
    }

    .finance-box + .finance-box {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
    }
}

@media (max-width: 720px) {
    .finance-clean-form,
    .expense-clean-form {
        grid-template-columns: 1fr;
    }

    .finance-box {
        padding: 14px;
    }
}


/* vIMAGE CONTROLS BACKOFFICE */
.product-image-adjust-preview {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    background: #0d0d0d;
}

.product-image-adjust-preview img {
    position: absolute !important;
    top: var(--product-img-y, 50%) !important;
    left: var(--product-img-x, 50%) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    object-fit: var(--product-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important;
    transform-origin: center center;
}

.image-adjust-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    display: grid;
    gap: 14px;
}

.image-adjust-head {
    display: grid;
    gap: 4px;
}

.image-adjust-head strong {
    color: #fff;
    font-weight: 950;
    font-size: 14px;
}

.image-adjust-head small {
    color: var(--muted);
    font-size: 12px;
}

.image-range-grid {
    display: grid;
    gap: 12px;
}

.image-adjust-panel label {
    display: grid;
    gap: 7px;
}

.image-adjust-panel label span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #f2f2f2;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.image-adjust-panel label span b {
    color: var(--primary);
    font-size: 12px;
}

.image-adjust-panel input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
}

.image-adjust-panel select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: #fff;
    color: #111;
    font-weight: 800;
}

.image-reset-btn {
    width: 100%;
    justify-content: center;
}


/* vFIX image controls editor preview */
.product-image-adjust-preview {
    position: relative !important;
    overflow: hidden !important;
    min-height: 270px !important;
    background: #0d0d0d !important;
}

.product-image-adjust-preview img {
    position: absolute !important;
    top: var(--product-img-y, 50%) !important;
    left: var(--product-img-x, 50%) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: var(--product-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
}

.image-adjust-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    display: grid;
    gap: 14px;
}

.image-adjust-head {
    display: grid;
    gap: 4px;
}

.image-adjust-head strong {
    color: #fff;
    font-weight: 950;
    font-size: 14px;
}

.image-adjust-head small {
    color: var(--muted);
    font-size: 12px;
}

.image-range-grid {
    display: grid;
    gap: 12px;
}

.image-adjust-panel label {
    display: grid;
    gap: 7px;
}

.image-adjust-panel label span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #f2f2f2;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.image-adjust-panel label span b {
    color: var(--primary);
    font-size: 12px;
}

.image-adjust-panel input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
}

.image-adjust-panel select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: #fff;
    color: #111;
    font-weight: 800;
}

.image-reset-btn {
    width: 100%;
    justify-content: center;
}


/* vREAL IMAGE EDITOR PREVIEW */
.product-image-adjust-preview {
    position: relative !important;
    overflow: hidden !important;
    min-height: 270px !important;
    height: 270px !important;
    background: #0d0d0d !important;
}

.product-image-adjust-preview img {
    position: absolute !important;
    top: var(--product-img-y, 50%) !important;
    left: var(--product-img-x, 50%) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: var(--product-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
}

.image-adjust-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    display: grid;
    gap: 14px;
}

.image-adjust-head {
    display: grid;
    gap: 4px;
}

.image-adjust-head strong {
    color: #fff;
    font-weight: 950;
    font-size: 14px;
}

.image-adjust-head small {
    color: var(--muted);
    font-size: 12px;
}

.image-range-grid {
    display: grid;
    gap: 12px;
}

.image-adjust-panel label {
    display: grid;
    gap: 7px;
}

.image-adjust-panel label span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f2f2f2;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.image-adjust-panel label span b {
    color: var(--primary);
}

.image-adjust-panel input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
}

.image-adjust-panel select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    background: #fff;
    color: #111;
    font-weight: 800;
}

.image-reset-btn {
    width: 100%;
    justify-content: center;
}


/* vADMIN PROFESSIONAL UI - editor más ágil y dashboard formal */

/* Separadores generales de títulos y contenido */
.panel-head,
.editor-card-title,
.image-title-pro {
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
}

.panel-head h2,
.panel h2,
.editor-card-title strong {
    letter-spacing: -0.35px;
}

.editor-card-title {
    justify-content: flex-start !important;
}

/* Editor de producto más profesional */
.premium-editor {
    border-color: rgba(255,255,255,.075) !important;
}

.editor-header {
    background:
        linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
}

.editor-grid {
    grid-template-columns: minmax(0, 1fr) minmax(520px, 640px) !important;
    align-items: start !important;
    gap: 18px !important;
}

.editor-main {
    gap: 14px !important;
}

.editor-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
    border-color: rgba(255,255,255,.075) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.20) !important;
}

.editor-card::before {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, var(--primary), transparent 46%);
    opacity: .28;
    margin: -18px -18px 16px;
}

.image-editor-card-pro::before {
    display: none !important;
}

.premium-form-grid {
    gap: 16px !important;
}

.premium-form-grid label,
.image-editor-card label,
.category-premium-form label {
    gap: 8px !important;
}

.premium-form-grid label span,
.image-editor-card label span,
.category-premium-form label span {
    color: #efefef !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .35px !important;
    font-weight: 950 !important;
}

.premium-form-grid input,
.premium-form-grid select,
.premium-form-grid textarea,
.image-editor-card input,
.image-editor-card select {
    border-radius: 11px !important;
    min-height: 42px !important;
}

/* Imagen: preview y controles al lado para ver el ajuste en vivo */
.image-editor-card {
    position: sticky !important;
    top: 108px !important;
}

.image-title-pro {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
}

.image-title-pro > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.image-title-pro small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.image-editor-workspace {
    display: grid;
    grid-template-columns: minmax(220px, .95fr) minmax(230px, 1.05fr);
    gap: 14px;
    align-items: stretch;
}

.image-preview-zone {
    min-width: 0;
    display: grid;
    gap: 9px;
    align-content: start;
}

.product-image-adjust-preview,
.premium-product-preview {
    aspect-ratio: 4 / 3 !important;
    min-height: 255px !important;
    height: auto !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 38px rgba(0,0,0,.30) !important;
}

.image-current-pro {
    display: block;
    line-height: 1.35;
    word-break: break-word;
    color: var(--muted) !important;
    border-top: 1px solid rgba(255,255,255,.065);
    padding-top: 9px;
}

.image-adjust-panel {
    margin-top: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022)) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    align-content: start;
}

.image-adjust-head {
    border-bottom: 1px solid rgba(255,255,255,.075);
    padding-bottom: 10px;
    margin-bottom: 2px;
}

.image-adjust-head strong {
    font-size: 13px !important;
}

.image-range-grid {
    gap: 11px !important;
}

.image-adjust-panel input[type="range"] {
    height: 5px;
    cursor: pointer;
}

.image-adjust-panel select {
    min-height: 40px !important;
}

.image-reset-btn {
    min-height: 40px !important;
}

.image-upload-area-pro {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.075);
    display: grid;
    gap: 12px;
}

.image-upload-area-pro .premium-upload {
    min-height: 82px !important;
    padding: 12px !important;
}

.image-upload-area-pro .premium-upload i {
    font-size: 20px !important;
}

.premium-separator {
    margin: 0 !important;
}

/* Dashboard más formal con separadores */
.dashboard-main-stats,
.compact-stats {
    padding: 16px !important;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.018);
}

.dashboard-main-stats .stat,
.compact-stats .stat {
    border-color: rgba(255,255,255,.075) !important;
}

.stat {
    position: relative;
}

.stat::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 68px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.11), transparent);
    opacity: .8;
}

.stat.compact::before {
    top: 42px;
}

.dashboard-panels {
    align-items: start;
}

.dashboard-panel,
.panel {
    border-color: rgba(255,255,255,.075) !important;
}

.dashboard-list {
    gap: 0 !important;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 14px;
    overflow: hidden;
}

.dashboard-list-item {
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
    background: rgba(255,255,255,.025) !important;
}

.dashboard-list-item:last-child {
    border-bottom: 0 !important;
}

.dashboard-list-item:hover {
    background: rgba(255,255,255,.04) !important;
}

/* Tablas y bloques con lectura más formal */
.table-wrap {
    border: 1px solid rgba(255,255,255,.065);
}

th {
    background: rgba(255,255,255,.025);
}

td,
th {
    border-bottom-color: rgba(255,255,255,.07) !important;
}

@media (max-width: 1280px) {
    .editor-grid {
        grid-template-columns: minmax(0, 1fr) 430px !important;
    }

    .image-editor-workspace {
        grid-template-columns: 1fr !important;
    }
}

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

    .image-editor-card {
        position: relative !important;
        top: auto !important;
    }

    .product-image-adjust-preview,
    .premium-product-preview {
        min-height: 230px !important;
    }

    .dashboard-main-stats,
    .compact-stats {
        padding: 12px !important;
    }
}

@media (max-width: 640px) {
    .editor-header {
        flex-direction: column;
        align-items: stretch;
    }

    .editor-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .image-editor-workspace {
        gap: 12px;
    }
}


/* vFINAL admin sidebar borders, dynamic primary shadows and notifications */

/* Usa el color principal del tenant en brillos/sombras */
:root {
    --border: rgba(var(--primary-rgb), .14);
}

body {
    background:
        radial-gradient(circle at top left, rgba(var(--primary-rgb), .09), transparent 28%),
        radial-gradient(circle at top right, rgba(var(--primary-rgb), .04), transparent 24%),
        var(--bg) !important;
}

/* Menú lateral con estructura formal, no flotante */
.sidebar nav {
    gap: 0 !important;
    margin-top: 8px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 16px;
    background: rgba(255,255,255,.018);
}

.sidebar nav a {
    min-height: 51px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
    background: transparent !important;
    position: relative;
}

.sidebar nav a:last-child {
    border-bottom: 0 !important;
}

.sidebar nav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: linear-gradient(90deg, rgba(var(--primary-rgb), .20), rgba(255,255,255,.028)) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .08) !important;
}

.sidebar nav a:hover::before,
.sidebar nav a.active::before {
    background: var(--primary);
}

.sidebar nav a:hover i,
.sidebar nav a.active i {
    color: var(--primary) !important;
}

.sidebar nav a i,
.store-link i,
.logout-link i,
.ghost-action i,
.icon-action i,
.quick-chip i,
.editor-card-title i,
.stat-icon,
.stat-icon i {
    color: var(--primary) !important;
}

/* Footer lateral también con bordes más prolijos */
.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

.store-link,
.logout-link {
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.025) !important;
}

.store-link:hover,
.logout-link:hover {
    border-color: rgba(var(--primary-rgb), .28) !important;
    background: rgba(var(--primary-rgb), .08) !important;
}

/* Logo, botones, chips e íconos respetan el color de la base de datos */
.brand-img {
    border-color: rgba(var(--primary-rgb), .22) !important;
    box-shadow: 0 14px 30px rgba(var(--primary-rgb), .10) !important;
}

.sidebar-status {
    background:
        linear-gradient(135deg, rgba(var(--primary-rgb), .10), rgba(255,255,255,.025)) !important;
    border-color: rgba(var(--primary-rgb), .22) !important;
}

.sidebar nav a:hover,
.sidebar nav a.active,
.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.btn-solid,
.quick-chip,
.user-avatar {
    box-shadow: 0 14px 30px rgba(var(--primary-rgb), .16) !important;
}

.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.btn-solid,
.user-avatar {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}

.btn-muted:hover,
.ghost-action:hover,
.icon-action:hover {
    border-color: rgba(var(--primary-rgb), .26) !important;
    background: rgba(var(--primary-rgb), .09) !important;
    color: var(--primary) !important;
}

.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus,
.order-detail select:focus,
.inline-form input:focus,
.premium-form-grid input:focus,
.premium-form-grid select:focus,
.premium-form-grid textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .13) !important;
}

/* Separadores de tarjetas con más aire respecto al icono */
.stat::before {
    top: 82px !important;
    left: 20px !important;
    right: 20px !important;
    background: linear-gradient(90deg, rgba(255,255,255,.10), transparent) !important;
}

.stat.compact::before {
    top: 48px !important;
}

.stat-icon {
    background: rgba(var(--primary-rgb), .11) !important;
    border-color: rgba(var(--primary-rgb), .18) !important;
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), .08) !important;
    margin-bottom: 22px !important;
}

/* Dropdown de notificaciones */
.notification-wrapper {
    position: relative;
}

.notification-trigger {
    position: relative;
}

.notification-trigger small,
.quick-chip b {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: var(--primary);
    color: #111;
    font-size: 10px;
    font-weight: 950;
}

.notification-trigger small {
    position: absolute;
    top: -6px;
    right: -6px;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(360px, 92vw);
    background:
        linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
        #111;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    overflow: hidden;
    z-index: 220;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: .18s ease;
}

.notification-wrapper.open .notification-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.notification-head {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,.075);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.notification-head strong {
    display: block;
    font-size: 15px;
    font-weight: 950;
}

.notification-head span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.notification-head a {
    color: var(--primary);
    font-size: 12px;
    font-weight: 950;
}

.notification-list {
    display: grid;
}

.notification-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255,255,255,.065);
    align-items: center;
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item:hover {
    background: rgba(var(--primary-rgb), .08);
}

.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .10);
}

.notification-item strong {
    display: block;
    font-size: 13px;
    font-weight: 950;
}

.notification-item small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.notification-empty {
    padding: 20px;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: var(--muted);
    text-align: center;
}

.notification-empty i {
    color: var(--primary);
}

/* Mobile */
@media (max-width: 980px) {
    .sidebar nav {
        border-radius: 14px;
    }

    .notification-dropdown {
        right: -76px;
    }
}


/* vFINAL CLEANUP ADMIN UI
   - Quita fondos contenedores externos.
   - Deja el fondo solo en encabezados/títulos.
   - Corrige separadores de tarjetas.
   - Botones e iconos con texto blanco.
*/

/* EDITOR: quitar el fondo grande que contenía las dos columnas */
.premium-editor {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.editor-header {
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
        var(--panel) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.22) !important;
    margin-bottom: 18px !important;
}

.editor-grid {
    padding: 0 !important;
}

/* Mantener solo las cards reales con fondo propio, sin contenedor padre oscuro */
.editor-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        var(--panel) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
}

/* DASHBOARD: quitar fondo externo de los grupos, que queden sueltos */
.dashboard-main-stats,
.compact-stats {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Paneles principales: solo el panel/card tiene fondo */
.panel {
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        var(--panel) !important;
}

/* Separadores de tarjetas: que no queden pegados al icono, texto o número */
.stat {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    min-height: 132px !important;
}

.stat-icon {
    order: 1 !important;
    margin-bottom: 0 !important;
}

.stat::before {
    content: "" !important;
    position: static !important;
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    margin: 17px 0 15px !important;
    background: linear-gradient(90deg, rgba(255,255,255,.12), transparent) !important;
    opacity: 1 !important;
}

.stat span {
    order: 3 !important;
}

.stat strong {
    order: 4 !important;
}

.stat small {
    order: 5 !important;
}

/* En tarjetas compactas la línea queda entre título y número con aire */
.stat.compact {
    min-height: 112px !important;
}

.stat.compact span {
    order: 1 !important;
}

.stat.compact::before {
    order: 2 !important;
    margin: 13px 0 13px !important;
}

.stat.compact strong {
    order: 3 !important;
}

/* Cuando la tarjeta no tiene icono, evita que la línea quede arriba sin aire */
.compact-stats .stat::before {
    margin: 13px 0 13px !important;
}

/* Botones: contenido blanco */
.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.btn-solid,
.quick-chip,
.icon-action,
.ghost-action,
.store-toggle,
.checkout-btn,
.image-reset-btn {
    color: #fff !important;
}

.admin-btn i,
button.admin-btn i,
.form-panel button i,
.login-card button i,
.btn-solid i,
.btn-muted i,
.quick-chip i,
.icon-action i,
.ghost-action i,
.store-toggle i,
.checkout-btn i,
.image-reset-btn i {
    color: #fff !important;
}

/* Botones principales mantienen el color del sistema, pero texto blanco */
.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.btn-solid,
.quick-chip,
.user-avatar {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

/* Iconos con fondo también blancos */
.stat-icon,
.user-avatar,
.menu-btn,
.ghost-action,
.icon-action,
.store-toggle {
    color: #fff !important;
}

.stat-icon i,
.user-avatar i,
.menu-btn i,
.ghost-action i,
.icon-action i,
.store-toggle i {
    color: #fff !important;
}

/* Iconos con fondo del color principal */
.stat-icon,
.user-avatar {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .95), rgba(var(--primary-dark-rgb), .95)) !important;
    border-color: rgba(var(--primary-rgb), .25) !important;
}

/* Acciones secundarias: fondo oscuro pero contenido blanco */
.btn-muted,
.ghost-action,
.icon-action {
    color: #fff !important;
}

/* Menú activo conserva lectura clara */
.sidebar nav a:hover,
.sidebar nav a.active {
    color: #fff !important;
}

.sidebar nav a:hover i,
.sidebar nav a.active i {
    color: #fff !important;
}

/* La línea decorativa de las cards de formulario no queda pegada */
.editor-card::before {
    margin: -18px -18px 18px !important;
}

/* En formularios largos, más aire entre título y contenido */
.editor-card-title {
    margin-bottom: 18px !important;
}


/* vFINAL PANEL GLOBAL CLEANUP */

/* Menú lateral: sin borde exterior, solo separadores inferiores */
.sidebar nav {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    gap: 0 !important;
}

.sidebar nav a {
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    background: transparent !important;
}

.sidebar nav a:last-child {
    border-bottom: 0 !important;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    border-radius: 12px !important;
    border-bottom-color: transparent !important;
}

/* El panel no debe parecer un bloque grande con contenido flotando dentro.
   Los encabezados tienen fondo; el contenido queda suelto o en sus propias cards. */
.panel {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.panel-head,
.panel > h2:first-child,
.section-bar,
.editor-header {
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
        var(--panel) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.22) !important;
    padding: 18px !important;
    margin-bottom: 16px !important;
}

/* Si el panel tiene contenido directo, cada bloque útil conserva estructura propia. */
.panel .table-wrap,
.panel .dashboard-list,
.panel .order-detail,
.panel .form-panel,
.panel .finance-grid,
.panel .settings-grid,
.panel .web-editor-grid {
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        var(--panel) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.20) !important;
}

/* Tablas/listas no quedan pegadas al título */
.panel .table-wrap,
.panel .dashboard-list {
    margin-top: 14px !important;
}

/* Cards de estadísticas sueltas, sin contenedor padre */
.dashboard-main-stats,
.compact-stats,
.stats-grid {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Líneas internas de tarjetas con espaciado parejo */
.stat {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.stat-icon {
    margin-bottom: 0 !important;
}

.stat::before {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    margin: 18px 0 16px !important;
    background: linear-gradient(90deg, rgba(255,255,255,.12), transparent) !important;
}

.stat span {
    margin-bottom: 0 !important;
}

.stat strong {
    margin-top: 8px !important;
}

.stat small {
    margin-top: 10px !important;
}

.stat.compact::before,
.compact-stats .stat::before {
    margin: 14px 0 14px !important;
}

.stat.compact strong {
    margin-top: 0 !important;
}

/* Botones e íconos: contenido blanco cuando el fondo tiene color */
.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.btn-solid,
.quick-chip,
.user-avatar,
.stat-icon {
    color: #fff !important;
}

.admin-btn i,
button.admin-btn i,
.form-panel button i,
.login-card button i,
.btn-solid i,
.quick-chip i,
.user-avatar i,
.stat-icon i {
    color: #fff !important;
}

.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.btn-solid,
.quick-chip,
.user-avatar,
.stat-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.20) !important;
}

/* Botones oscuros también con contenido blanco */
.btn-muted,
.ghost-action,
.icon-action,
.store-toggle,
.menu-btn {
    color: #fff !important;
}

.btn-muted i,
.ghost-action i,
.icon-action i,
.store-toggle i,
.menu-btn i {
    color: #fff !important;
}

/* Hover/activo del menú: iconos blancos sobre fondo activo */
.sidebar nav a:hover,
.sidebar nav a.active {
    color: #fff !important;
}

.sidebar nav a:hover i,
.sidebar nav a.active i {
    color: #fff !important;
}


/* vCOLOR PICKER + LOGO COLOR RECOGNITION */
.brand-editor-card .editor-card-title {
    margin-bottom: 18px !important;
}

.brand-color-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 18px;
    align-items: stretch;
}

.brand-color-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-content: start;
}

.brand-color-fields label:last-child {
    grid-column: 1 / -1;
}

.color-control {
    display: grid;
    gap: 8px;
}

.color-row {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 10px;
    align-items: center;
}

.color-picker {
    width: 54px !important;
    height: 44px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.06) !important;
    cursor: pointer;
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: 0;
    border-radius: 8px;
}

.color-text {
    text-transform: uppercase;
    font-weight: 900 !important;
    letter-spacing: .4px;
}

.brand-ai-panel {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.075);
    background:
        linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
}

.brand-ai-preview {
    width: 110px;
    height: 110px;
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #050505;
    border: 1px solid rgba(var(--primary-rgb), .18);
    box-shadow: 0 14px 34px rgba(var(--primary-rgb), .10);
}

.brand-ai-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.brand-ai-content {
    display: grid;
    align-content: start;
    gap: 9px;
    min-width: 0;
}

.brand-ai-content strong {
    color: #fff;
    font-size: 14px;
    font-weight: 950;
}

.brand-ai-content small {
    color: var(--muted);
    line-height: 1.4;
    font-size: 12px;
}

.brand-ai-btn {
    width: fit-content;
    min-height: 38px !important;
    padding: 9px 12px !important;
}

.brand-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
    align-items: center;
}

.brand-empty {
    color: var(--muted);
    font-size: 12px;
}

.brand-swatch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
    color: #fff;
    cursor: pointer;
}

.brand-swatch span {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.20);
}

.brand-swatch strong {
    font-size: 11px;
    font-weight: 900;
}

.brand-swatch:hover {
    border-color: rgba(var(--primary-rgb), .35);
    background: rgba(var(--primary-rgb), .08);
}

.brand-swatch-hint {
    flex: 0 0 100%;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}

@media (max-width: 1180px) {
    .brand-color-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .brand-color-fields {
        grid-template-columns: 1fr;
    }

    .brand-ai-panel {
        grid-template-columns: 1fr;
    }

    .brand-ai-preview {
        width: 100%;
        height: 130px;
    }
}


/* vFINAL USERS SETTINGS CLEANUP */

/* Inputs oscuros y profesionales en todo el panel */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
    background: #0f0f0f !important;
    color: #f5f5f5 !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder { color: rgba(255,255,255,.45) !important; }

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: rgba(var(--primary-rgb), .55) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10) !important;
}

/* Evitar líneas dobles/sobrecargadas en botones */
.btn-solid,
.btn-muted,
.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.quick-chip,
.icon-action,
.ghost-action,
.store-toggle,
.image-reset-btn,
.brand-ai-btn {
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.btn-solid,
.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.quick-chip {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    text-shadow: none !important;
}

.btn-solid:hover,
.admin-btn:hover,
button.admin-btn:hover,
.quick-chip:hover {
    box-shadow: 0 12px 26px rgba(var(--primary-rgb), .16) !important;
    transform: translateY(-1px);
}

/* Marca más prolija */
.brand-color-layout { grid-template-columns: 1fr !important; }
.brand-color-fields { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

.color-row {
    grid-template-columns: 58px 1fr !important;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    padding: 8px;
}

.color-picker {
    height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: #161616 !important;
}

.color-text {
    background: transparent !important;
    border: 0 !important;
    min-height: 38px !important;
    padding: 0 8px !important;
}

.brand-ai-panel-colors-only { grid-template-columns: 1fr !important; }
.brand-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Logo en apartado propio */
.logo-settings-layout {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    align-items: center;
}

.logo-preview-box {
    width: 150px;
    height: 150px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.09);
    background: #050505;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.logo-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
}

.logo-upload-panel { display: grid; gap: 10px; }

/* Usuarios */
.users-layout {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 420px);
    gap: 18px;
    align-items: start;
}

.users-form { grid-template-columns: 1fr !important; }

.user-active-switch {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
}

.users-list { display: grid; gap: 14px; }

.user-row-card {
    padding: 15px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    display: grid;
    gap: 14px;
}

.user-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.075);
}

.user-mini-avatar {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}

.user-row-head strong { display: block; font-weight: 950; }
.user-row-head small { color: var(--muted); display: block; margin-top: 2px; }

.user-row-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.user-row-grid label { display: grid; gap: 7px; }

.user-permission-note {
    padding: 12px;
    border-radius: 13px;
    background: rgba(var(--primary-rgb), .06);
    border: 1px solid rgba(var(--primary-rgb), .12);
}

.user-permission-note strong { display: block; margin-bottom: 4px; color: var(--primary); }
.user-permission-note span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.user-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.danger-link { color: #ffb4b4 !important; }

/* Finanzas: ingreso y gasto separados */
.finance-workspace {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.finance-workspace-head {
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022)), var(--panel) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    margin-bottom: 16px !important;
}

.finance-form-grid { gap: 18px !important; }

.finance-box {
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), var(--panel) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 18px !important;
    padding: 18px !important;
}

/* Usuario superior como acceso a usuarios */
.user-card {
    text-decoration: none !important;
    cursor: pointer !important;
}

.user-card:hover {
    border-color: rgba(var(--primary-rgb), .25) !important;
    background: rgba(var(--primary-rgb), .07) !important;
}

/* Editor de imagen más simple visualmente */
.image-adjust-panel,
.brand-ai-panel,
.product-image-adjust-preview {
    box-shadow: none !important;
}

@media (max-width: 1100px) {
    .users-layout,
    .logo-settings-layout { grid-template-columns: 1fr; }
    .brand-color-fields { grid-template-columns: 1fr !important; }
    .user-row-grid { grid-template-columns: 1fr; }
}


/* vUSERS ALWAYS VISIBLE + ACCOUNT EDIT */
.users-layout {
    display: grid !important;
    grid-template-columns: 1fr minmax(300px, 420px) !important;
    gap: 18px !important;
    align-items: start !important;
}

.users-form {
    grid-template-columns: 1fr !important;
}

.users-list {
    display: grid !important;
    gap: 14px !important;
}

.user-row-card {
    padding: 15px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.025) !important;
    display: grid !important;
    gap: 14px !important;
}

.user-row-card.is-current-user {
    border-color: rgba(var(--primary-rgb), .28) !important;
    background: rgba(var(--primary-rgb), .055) !important;
}

.user-row-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

.user-mini-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
}

.user-mini-avatar i {
    color: #fff !important;
}

.user-row-head strong {
    display: block !important;
    font-weight: 950 !important;
}

.user-row-head small {
    color: var(--muted) !important;
    display: block !important;
    margin-top: 2px !important;
}

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

.user-row-grid label,
.users-form label {
    display: grid !important;
    gap: 7px !important;
}

.user-permission-note {
    padding: 12px !important;
    border-radius: 13px !important;
    background: rgba(var(--primary-rgb), .06) !important;
    border: 1px solid rgba(var(--primary-rgb), .12) !important;
}

.user-permission-note strong {
    display: block !important;
    margin-bottom: 4px !important;
    color: var(--primary) !important;
}

.user-permission-note span {
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.user-row-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

.user-active-switch {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.danger-link {
    color: #ffb4b4 !important;
}

.sidebar nav a[href*="admin/users"] {
    display: flex !important;
}

.user-card {
    text-decoration: none !important;
    cursor: pointer !important;
}

.user-card:hover {
    border-color: rgba(var(--primary-rgb), .25) !important;
    background: rgba(var(--primary-rgb), .07) !important;
}

@media (max-width: 1100px) {
    .users-layout,
    .user-row-grid {
        grid-template-columns: 1fr !important;
    }
}


/* vFINAL INPUT STYLE + SIDEBAR SUBTLE */

/* ==============================
   INPUTS EDITABLES DEL PANEL
   Estilo único tipo editor profesional.
   No afecta buscadores.
============================== */

.admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.search-input):not([name="search"]),
.admin-main select:not(.search-input),
.admin-main textarea:not(.search-input) {
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px 13px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255,255,255,.105) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        #101010 !important;
    color: #f4f4f4 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(0,0,0,.26) !important;
    outline: none !important;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.admin-main textarea:not(.search-input) {
    min-height: 88px !important;
    resize: vertical !important;
}

.admin-main select:not(.search-input) {
    appearance: auto !important;
    cursor: pointer !important;
}

.admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.search-input):not([name="search"])::placeholder,
.admin-main textarea:not(.search-input)::placeholder {
    color: rgba(255,255,255,.42) !important;
    font-weight: 600 !important;
}

.admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.search-input):not([name="search"]):hover,
.admin-main select:not(.search-input):hover,
.admin-main textarea:not(.search-input):hover {
    border-color: rgba(255,255,255,.17) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        #111 !important;
}

.admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.search-input):not([name="search"]):focus,
.admin-main select:not(.search-input):focus,
.admin-main textarea:not(.search-input):focus {
    border-color: rgba(var(--primary-rgb), .55) !important;
    background: #121212 !important;
    box-shadow:
        0 0 0 3px rgba(var(--primary-rgb), .10),
        inset 0 1px 0 rgba(255,255,255,.045) !important;
}

/* Inputs dentro de líneas de color mantienen su comportamiento especial */
.color-row .color-text {
    min-height: 38px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 8px !important;
}

/* Los buscadores quedan como estaban */
.search-input,
input[name="search"],
input[type="search"],
.search-box input,
.filters input[name="search"] {
    box-shadow: inherit;
}

/* ==============================
   MENÚ LATERAL MÁS SUTIL
   Sin bloque grande ni hover exagerado.
============================== */

.sidebar nav {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    gap: 0 !important;
}

.sidebar nav a {
    position: relative !important;
    min-height: 46px !important;
    padding: 12px 12px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #d8d8d8 !important;
    transform: none !important;
}

.sidebar nav a:last-child {
    border-bottom: 0 !important;
}

.sidebar nav a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 15px !important;
    bottom: 15px !important;
    width: 2px !important;
    border-radius: 999px !important;
    background: transparent !important;
    opacity: 0 !important;
    transition: opacity .16s ease, background .16s ease !important;
}

.sidebar nav a i {
    color: var(--primary) !important;
    opacity: .82 !important;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: rgba(var(--primary-rgb), .035) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom-color: rgba(255,255,255,.065) !important;
}

.sidebar nav a:hover::before,
.sidebar nav a.active::before {
    background: var(--primary) !important;
    opacity: .9 !important;
}

.sidebar nav a:hover i,
.sidebar nav a.active i {
    color: var(--primary) !important;
    opacity: 1 !important;
}

.sidebar nav a:hover span,
.sidebar nav a.active span {
    color: #fff !important;
}

/* Anula efectos anteriores que hacían el active demasiado pesado */
.sidebar nav a.active,
.sidebar nav a:hover {
    text-shadow: none !important;
    outline: none !important;
}

.sidebar nav a.active::after,
.sidebar nav a:hover::after {
    display: none !important;
    content: none !important;
}

/* En mobile igual de simple */
@media (max-width: 980px) {
    .sidebar nav a:hover,
    .sidebar nav a.active {
        background: rgba(var(--primary-rgb), .045) !important;
        border-radius: 0 !important;
    }
}


/* vFINAL LINE SPACING + SEARCH DARK + BUTTON CLEAN */

/* Espaciado entre secciones para que las líneas no queden pegadas */
.products-control-panel {
    margin-bottom: 22px !important;
}

.products-control-panel .panel-head {
    margin-bottom: 18px !important;
}

.catalog-toolbar {
    margin-top: 18px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

/* Buscador de productos: oscuro completo, sin bloque blanco */
.catalog-search {
    background: #0c0c0c !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.catalog-search i {
    color: rgba(255,255,255,.82) !important;
}

.catalog-search input,
.catalog-search input#adminProductSearch {
    background: #0c0c0c !important;
    background-color: #0c0c0c !important;
    color: #f2f2f2 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.catalog-search input::placeholder {
    color: rgba(255,255,255,.45) !important;
}

.catalog-search:focus-within {
    border-color: rgba(var(--primary-rgb), .45) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .10) !important;
}

/* Botones: eliminar sobre-línea / doble borde visual */
.btn-solid,
.admin-btn,
button.admin-btn,
.quick-chip,
.form-panel button,
.login-card button,
.user-row-actions .btn-solid,
.users-form .btn-solid,
.editor-actions .btn-solid,
.brand-ai-btn,
.image-reset-btn {
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
}

.btn-solid::before,
.btn-solid::after,
.admin-btn::before,
.admin-btn::after,
.quick-chip::before,
.quick-chip::after,
.form-panel button::before,
.form-panel button::after,
.login-card button::before,
.login-card button::after,
.user-row-actions .btn-solid::before,
.user-row-actions .btn-solid::after,
.users-form .btn-solid::before,
.users-form .btn-solid::after,
.editor-actions .btn-solid::before,
.editor-actions .btn-solid::after,
.brand-ai-btn::before,
.brand-ai-btn::after,
.image-reset-btn::before,
.image-reset-btn::after {
    display: none !important;
    content: none !important;
}

.btn-solid i,
.admin-btn i,
.quick-chip i,
.form-panel button i,
.login-card button i,
.user-row-actions .btn-solid i,
.users-form .btn-solid i,
.editor-actions .btn-solid i {
    color: #fff !important;
}

/* Botones secundarios sin línea superpuesta */
.btn-muted,
.ghost-action,
.icon-action,
.store-toggle {
    box-shadow: none !important;
    outline: 0 !important;
}

.btn-muted::before,
.btn-muted::after,
.ghost-action::before,
.ghost-action::after,
.icon-action::before,
.icon-action::after,
.store-toggle::before,
.store-toggle::after {
    display: none !important;
    content: none !important;
}

/* Encabezado de configuración: botón guardar arriba junto a los iconos */
.editor-header .editor-actions {
    align-items: center !important;
    gap: 10px !important;
}

.editor-header .editor-actions .btn-solid {
    min-height: 44px !important;
    padding: 0 16px !important;
}

/* Si quedó algún submit row antiguo, ocultarlo en configuración */
.premium-editor .editor-submit-row {
    display: none !important;
}

/* Más aire en paneles que vienen uno debajo del otro */
.panel + .panel,
.panel + .catalog-sections,
.catalog-sections .panel {
    margin-top: 18px !important;
}

/* Línea superior de cards/paneles más limpia */
.panel-head,
.editor-header,
.section-bar,
.finance-workspace-head {
    border-top-color: rgba(255,255,255,.055) !important;
}


/* vFINAL SPACING HEADER LINE */
/* Evita que la línea/borde inferior del encabezado quede pegada al contenido siguiente. */
.products-control-panel,
.panel.products-control-panel,
.premium-editor,
.panel,
.catalog-sections {
    margin-top: 0;
}

.products-control-panel {
    padding-top: 0 !important;
}

.products-control-panel .panel-head,
.panel-head,
.editor-header,
.finance-workspace-head,
.section-bar {
    margin-bottom: 24px !important;
}

/* En productos, la barra de búsqueda queda claramente separada del encabezado. */
.products-control-panel .catalog-toolbar {
    margin-top: 24px !important;
}

/* Si el borde viene del panel principal, generar aire interno antes del contenido. */
.products-control-panel > .catalog-toolbar,
.panel > .catalog-toolbar {
    padding-top: 4px !important;
}

/* Más aire entre el título superior de página y el primer panel */
.admin-main > .panel:first-of-type,
.admin-main > .premium-editor:first-of-type,
.admin-main > .stats-grid:first-of-type {
    margin-top: 22px !important;
}

/* Evita que los bordes superiores de cards/paneles parezcan una línea pegada */
.panel,
.editor-card,
.section-bar,
.finance-workspace-head,
.editor-header {
    background-clip: padding-box !important;
}

/* Línea del panel más limpia y con espacio visual */
.products-control-panel {
    border-top-color: rgba(255,255,255,.055) !important;
}


/* vGLOBAL PANEL HEADER SPACING */
/* Aplica el espaciado de líneas/separadores en TODO el panel:
   productos, categorías, pedidos, caja, configuración, usuarios y web. */

/* Separación entre el encabezado general de página y el primer bloque */
.admin-main > section:first-of-type,
.admin-main > .panel:first-of-type,
.admin-main > .premium-editor:first-of-type,
.admin-main > .stats-grid:first-of-type,
.admin-main > .categories-page:first-of-type,
.admin-main > .products-control-panel:first-of-type {
    margin-top: 24px !important;
}

/* Todos los encabezados internos con aire debajo */
.panel-head,
.editor-header,
.section-bar,
.finance-workspace-head,
.category-header,
.categories-header,
.orders-header,
.users-editor .editor-header,
.web-editor-grid + .editor-card,
.editor-card-title {
    margin-bottom: 24px !important;
}

/* Si una card tiene título interno con línea, que el contenido no quede pegado */
.editor-card-title + *,
.finance-box-title + *,
.category-form-head + *,
.panel-head + *,
.section-bar + *,
.orders-toolbar,
.category-toolbar,
.catalog-toolbar,
.premium-form-grid,
.table-wrap,
.dashboard-list,
.admin-product-grid,
.users-layout,
.finance-form-grid {
    margin-top: 16px !important;
}

/* Categorías: corregir especialmente el caso donde el separador quedaba pegado */
.categories-panel,
.category-panel,
.panel.categories-panel,
.panel.category-panel {
    padding-top: 0 !important;
}

.categories-panel .panel-head,
.category-panel .panel-head,
.panel .category-header,
.panel .categories-header {
    margin-bottom: 24px !important;
}

/* Formularios/listados dentro de categorías con aire desde el borde superior */
.categories-panel form,
.category-panel form,
.categories-list,
.category-list,
.category-table,
.categories-grid {
    margin-top: 16px !important;
}

/* Evita líneas pegadas cuando dos paneles vienen seguidos */
.panel + .panel,
.editor-card + .editor-card,
.finance-box + .finance-box,
.category-panel + .category-panel,
.categories-panel + .categories-panel,
section + section {
    margin-top: 22px !important;
}

/* Bordes superiores más livianos y con lectura limpia */
.panel,
.editor-card,
.section-bar,
.finance-workspace-head,
.editor-header,
.category-panel,
.categories-panel {
    border-top-color: rgba(255,255,255,.055) !important;
    background-clip: padding-box !important;
}

/* Las líneas internas decorativas de cards no quedan pegadas */
.editor-card::before {
    margin-bottom: 20px !important;
}

/* Títulos con línea inferior: que el contenido respire */
.editor-card-title {
    padding-bottom: 14px !important;
}

/* En páginas con filtros o buscadores, mantener espacio uniforme */
.filters,
.admin-filters,
.orders-filters,
.category-actions,
.catalog-toolbar {
    margin-top: 18px !important;
}

/* Responsive mantiene aire pero sin exagerar */
@media (max-width: 700px) {
    .admin-main > section:first-of-type,
    .admin-main > .panel:first-of-type,
    .admin-main > .premium-editor:first-of-type,
    .admin-main > .stats-grid:first-of-type {
        margin-top: 18px !important;
    }

    .panel-head,
    .editor-header,
    .section-bar,
    .finance-workspace-head,
    .editor-card-title {
        margin-bottom: 18px !important;
    }

    .panel-head + *,
    .section-bar + *,
    .editor-card-title + *,
    .catalog-toolbar,
    .category-toolbar,
    .orders-toolbar {
        margin-top: 12px !important;
    }
}


/* vFINAL CATEGORY SPLIT + REMOVE OVERLINES */
/* Categorías: separar claramente las dos funciones izquierda/derecha */
.category-admin-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 24px !important;
    align-items: start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.category-admin-main,
.category-admin-side {
    min-width: 0 !important;
}

.category-admin-main {
    display: grid !important;
    gap: 18px !important;
}

.category-admin-side {
    position: sticky !important;
    top: 104px !important;
}

.category-create-strip,
.category-sort-list,
.category-order-save,
.category-side-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        var(--panel) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

.category-create-strip {
    padding: 16px !important;
    margin: 0 !important;
}

.category-table-head {
    margin: 0 !important;
    padding: 0 12px !important;
}

.category-sort-list {
    padding: 10px !important;
    display: grid !important;
    gap: 10px !important;
}

.category-edit-row {
    margin: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.065) !important;
    background: rgba(0,0,0,.12) !important;
    box-shadow: none !important;
}

.category-order-save {
    padding: 14px !important;
    margin: 0 !important;
}

.category-side-card {
    padding: 18px !important;
    margin: 0 !important;
}

/* Eliminar sobre-líneas decorativas que se superponen en contenedores, botones e iconos */
.panel::before,
.panel::after,
.editor-card::before,
.editor-card::after,
.stat::after,
.stat-icon::before,
.stat-icon::after,
.btn-solid::before,
.btn-solid::after,
.admin-btn::before,
.admin-btn::after,
.btn-muted::before,
.btn-muted::after,
.quick-chip::before,
.quick-chip::after,
.icon-action::before,
.icon-action::after,
.ghost-action::before,
.ghost-action::after,
.user-avatar::before,
.user-avatar::after,
.category-create-strip::before,
.category-create-strip::after,
.category-sort-list::before,
.category-sort-list::after,
.category-order-save::before,
.category-order-save::after,
.category-side-card::before,
.category-side-card::after,
.category-edit-row::before,
.category-edit-row::after,
.finance-box::before,
.finance-box::after,
.product-section::before,
.product-section::after,
.admin-product-card::before,
.admin-product-card::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Dashboard: iconos sin línea/halo superior pesado */
.stat-icon {
    position: relative !important;
    background:
        linear-gradient(135deg, rgba(var(--primary-rgb), .88), rgba(var(--primary-dark-rgb), .88)) !important;
    border: 1px solid rgba(var(--primary-rgb), .20) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.stat-icon i {
    color: #fff !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Botones sin borde doble ni franja superior */
.btn-solid,
.admin-btn,
.btn-muted,
.quick-chip,
.icon-action,
.ghost-action,
.category-row-actions a,
.category-row-actions button,
.category-create-strip button,
.category-order-save button,
.form-panel button,
.login-card button,
.user-row-actions button,
.users-form button {
    box-shadow: none !important;
    outline: 0 !important;
    border-top-color: rgba(255,255,255,.10) !important;
    background-clip: border-box !important;
}

.btn-solid,
.admin-btn,
.category-create-strip button,
.form-panel button,
.login-card button,
.users-form button,
.user-row-actions .btn-solid {
    border: 0 !important;
}

/* Si alguna línea viene del border-top, bajarla a un borde sutil uniforme */
.panel,
.editor-card,
.stat,
.category-create-strip,
.category-sort-list,
.category-order-save,
.category-side-card,
.finance-box,
.admin-product-card,
.product-section {
    border-top-color: rgba(255,255,255,.075) !important;
}

/* Más separación entre cabecera de categorías y el layout */
.category-admin-head {
    margin-bottom: 24px !important;
}

/* Responsivo */
@media (max-width: 1100px) {
    .category-admin-layout {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .category-admin-side {
        position: relative !important;
        top: auto !important;
    }
}


/* vFINAL CATEGORY FLOATING COLUMNS + remove middle divider */
.category-admin-page {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.category-admin-head {
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.02)), var(--panel) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 22px !important;
    margin-bottom: 24px !important;
}

.category-admin-layout {
    align-items: start !important;
    background: transparent !important;
    border: 0 !important;
    position: relative !important;
}

.category-admin-layout::before,
.category-admin-layout::after {
    display: none !important;
    content: none !important;
}

.category-admin-main {
    padding: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
}

.category-admin-side {
    padding: 0 !important;
    background: transparent !important;
    border-left: 0 !important;
}

/* Make left and right really feel separate/floating */
.category-create-strip,
.category-sort-list,
.category-order-save,
.category-side-card {
    box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
}

/* Remove remaining top accent/overline from cards and dashboard stats */
.stat,
.panel,
.category-create-strip,
.category-sort-list,
.category-order-save,
.category-side-card,
.category-edit-row,
.editor-card,
.finance-box,
.admin-product-card,
.product-section {
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
    background-image: none !important;
}

.stat {
    background-color: var(--panel) !important;
}

.stat-icon {
    box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
    border-top: 0 !important;
}

/* Extra breathing room in categories */
.category-table-head,
.category-sort-list,
.category-order-save {
    margin-top: 6px !important;
}

@media (max-width: 1100px) {
    .category-admin-head {
        margin-bottom: 18px !important;
    }
}


/* vNEXT roles + orders filter adjustments */
.orders-filter {
    grid-template-columns: minmax(360px, 1.8fr) 220px 180px auto auto !important;
    gap: 12px !important;
    align-items: center !important;
}

.orders-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.orders-search-wrap input[name="search"] {
    padding-left: 44px !important;
    min-width: 0;
}

.orders-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
    z-index: 2;
}

.orders-clear-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
}

.orders-clear-btn:hover {
    border-color: rgba(var(--primary-rgb), .22);
    background: rgba(var(--primary-rgb), .08);
}

.users-layout-single {
    grid-template-columns: 1fr !important;
}

.users-create-card {
    position: sticky;
    top: 18px;
}

.users-manage-card {
    display: grid;
    gap: 12px;
}

.users-section-block {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.02);
}

.users-section-heading {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.075);
}

.users-section-heading h3 {
    margin: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.users-section-heading p {
    margin: 6px 0 0;
    color: var(--muted);
}

.only-self-section {
    background: rgba(var(--primary-rgb), .035);
    border-color: rgba(var(--primary-rgb), .12);
}

.user-static-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    color: #fff;
    font-weight: 800;
}

.user-static-status.is-active i { color: #46d37d; }
.user-static-status.is-inactive i { color: #ff7c7c; }

@media (max-width: 1280px) {
    .orders-filter {
        grid-template-columns: 1fr 220px 180px auto auto !important;
    }
}

@media (max-width: 1024px) {
    .orders-filter {
        grid-template-columns: 1fr 1fr !important;
    }

    .orders-search-wrap {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .orders-filter {
        grid-template-columns: 1fr !important;
    }

    .orders-search-wrap {
        flex-wrap: wrap;
    }

    .orders-clear-btn,
    .orders-filter .admin-btn {
        width: 100%;
        justify-content: center;
    }
}


/* usuarios: filtro visual dueño/admin */
.users-role-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.users-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    transition: .22s ease;
}

.users-role-chip i {
    color: var(--primary);
}

.users-role-chip:hover,
.users-role-chip.active {
    border-color: rgba(var(--primary-rgb), .22);
    background: rgba(var(--primary-rgb), .10);
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .08);
}

.users-section-block[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    .users-role-filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .users-role-chip {
        justify-content: center;
        padding: 11px 10px;
    }

    .users-role-chip span {
        font-size: 13px;
    }
}


/* vUSERS ALIGNMENT FINAL */
/* Elimina el espacio grande entre la línea de "Editar usuarios" y los filtros. */
.users-manage-card .editor-card-title {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
}

.users-manage-card .editor-card-title + .users-role-filter {
    margin-top: 0 !important;
}

/* Filtros pegados de forma prolija al título, sin aire exagerado. */
.users-role-filter {
    margin: 0 0 12px 0 !important;
    padding-top: 0 !important;
}

/* El contenido filtrado arranca más cerca de los botones. */
.users-section-block {
    margin-top: 0 !important;
}

/* Alinea la card derecha "Crear administrador" con la card izquierda. */
.users-layout {
    align-items: start !important;
}

.users-create-card {
    top: 0 !important;
    margin-top: 0 !important;
    align-self: start !important;
}

/* Evita que reglas globales agreguen margen extra dentro de usuarios. */
.users-manage-card .editor-card-title + *,
.users-create-card .editor-card-title + * {
    margin-top: 0 !important;
}

/* Ajuste fino para que ambas cards queden visualmente a la misma altura. */
.users-manage-card,
.users-create-card {
    align-self: start !important;
}

/* Mantiene el filtro Admin seleccionado por defecto con lectura clara. */
.users-role-chip.active {
    background: rgba(var(--primary-rgb), .12) !important;
    border-color: rgba(var(--primary-rgb), .32) !important;
}


/* vADMIN UNIFIED COLOR SYSTEM
   Todo el panel administrativo toma un único color principal.
   El color sale de --primary y --primary-dark, que ya vienen desde la base de datos.
*/

:root {
    --admin-accent: var(--primary);
    --admin-accent-dark: var(--primary-dark);
    --admin-accent-rgb: var(--primary-rgb);
    --admin-accent-dark-rgb: var(--primary-dark-rgb);
    --admin-accent-soft: rgba(var(--admin-accent-rgb), .10);
    --admin-accent-border: rgba(var(--admin-accent-rgb), .20);
    --admin-accent-border-strong: rgba(var(--admin-accent-rgb), .34);
}

/* Textos destacados, subtítulos pequeños e iconos */
.editor-kicker,
.page-kicker,
.panel-kicker,
.sidebar nav a i,
.store-link i,
.ghost-action i,
.icon-action i,
.editor-card-title i,
.panel-head i,
.users-role-chip i,
.users-section-heading i,
.stat span,
.stat strong,
.price-value,
.admin-link,
.badge-soft i {
    color: var(--admin-accent) !important;
}

/* Botones principales */
.btn-solid,
.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.quick-chip,
.checkout-btn,
.users-form button,
.user-row-actions .btn-solid,
.editor-actions .btn-solid,
.category-create-strip button,
.category-order-save button {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.btn-solid i,
.admin-btn i,
button.admin-btn i,
.form-panel button i,
.login-card button i,
.quick-chip i,
.checkout-btn i,
.users-form button i,
.user-row-actions .btn-solid i,
.editor-actions .btn-solid i {
    color: #fff !important;
}

/* Botones principales hover */
.btn-solid:hover,
.admin-btn:hover,
button.admin-btn:hover,
.form-panel button:hover,
.login-card button:hover,
.quick-chip:hover,
.checkout-btn:hover {
    background: linear-gradient(135deg, var(--admin-accent-dark), var(--admin-accent)) !important;
    box-shadow: 0 12px 28px rgba(var(--admin-accent-rgb), .16) !important;
}

/* Botones secundarios e iconos cuadrados */
.btn-muted:hover,
.ghost-action:hover,
.icon-action:hover,
.store-toggle:hover,
.brand-ai-btn:hover,
.image-reset-btn:hover {
    border-color: var(--admin-accent-border-strong) !important;
    background: var(--admin-accent-soft) !important;
    color: #fff !important;
}

.btn-muted:hover i,
.ghost-action:hover i,
.icon-action:hover i,
.store-toggle:hover i,
.brand-ai-btn:hover i,
.image-reset-btn:hover i {
    color: #fff !important;
}

/* Menú lateral */
.sidebar nav a::before {
    background: transparent !important;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: rgba(var(--admin-accent-rgb), .045) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.sidebar nav a:hover::before,
.sidebar nav a.active::before {
    background: var(--admin-accent) !important;
    opacity: 1 !important;
}

.sidebar nav a:hover i,
.sidebar nav a.active i {
    color: var(--admin-accent) !important;
}

/* Cards, bordes y estados seleccionados */
.sidebar-status,
.brand-img,
.user-row-card.is-current-user,
.users-role-chip.active,
.users-role-chip:hover,
.user-permission-note,
.only-self-section,
.color-row:focus-within,
.catalog-search:focus-within,
.orders-search-wrap:focus-within {
    border-color: var(--admin-accent-border) !important;
}

.users-role-chip.active,
.users-role-chip:hover,
.user-row-card.is-current-user,
.only-self-section,
.user-permission-note,
.sidebar-status {
    background: rgba(var(--admin-accent-rgb), .07) !important;
}

/* Inputs focus */
.admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.search-input):not([name="search"]):focus,
.admin-main select:not(.search-input):focus,
.admin-main textarea:not(.search-input):focus {
    border-color: rgba(var(--admin-accent-rgb), .55) !important;
    box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), .10) !important;
}

/* Switches y toggles */
.premium-switch input:checked + span,
.switch input:checked + span,
.toggle input:checked + span {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    border-color: var(--admin-accent-border-strong) !important;
}

/* Avatares e iconos con fondo */
.user-avatar,
.user-mini-avatar,
.stat-icon {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    color: #fff !important;
    border-color: var(--admin-accent-border) !important;
}

.user-avatar i,
.user-mini-avatar i,
.stat-icon i {
    color: #fff !important;
}

/* Badges y avisos */
.badge-soft,
.new-dot,
.status,
.notification-dot {
    border-color: var(--admin-accent-border) !important;
}

.notification-dot {
    background: var(--admin-accent) !important;
    box-shadow: 0 0 0 5px rgba(var(--admin-accent-rgb), .10) !important;
}

/* Rangos/sliders */
input[type="range"] {
    accent-color: var(--admin-accent) !important;
}

/* Bordes decorativos */
.editor-card,
.panel,
.section-bar,
.editor-header,
.finance-workspace-head,
.category-side-card,
.category-create-strip,
.category-sort-list,
.category-order-save,
.user-row-card,
.users-section-block {
    border-color: rgba(255,255,255,.075) !important;
}

.editor-card:hover,
.panel:hover,
.user-row-card:hover,
.category-side-card:hover {
    border-color: rgba(var(--admin-accent-rgb), .16) !important;
}

/* Topbar */
.notification-trigger small,
.quick-chip b {
    background: var(--admin-accent) !important;
    color: #111 !important;
}

/* Links de acción */
.admin-link:hover,
.danger-link:hover {
    color: var(--admin-accent) !important;
}


/* ==========================================================
   vFINAL REAL FIX - USUARIOS + COLOR UNIFICADO ADMIN
   Pegar al final de public/assets/css/admin.css
   ========================================================== */

/* 1) Color único real para TODO el panel.
   Cambiá solo estos valores si querés otro color fijo del panel. */
:root {
    --admin-panel-color: #C9A000;
    --admin-panel-color-dark: #8F7300;
    --admin-panel-rgb: 201,160,0;

    --admin-accent: var(--admin-panel-color);
    --admin-accent-dark: var(--admin-panel-color-dark);
    --admin-accent-rgb: var(--admin-panel-rgb);
    --admin-accent-soft: rgba(var(--admin-panel-rgb), .10);
    --admin-accent-border: rgba(var(--admin-panel-rgb), .22);
    --admin-accent-border-strong: rgba(var(--admin-panel-rgb), .36);
}

/* 2) Aplica el color único a botones, íconos, chips, active, switches y destacados. */
.editor-kicker,
.page-kicker,
.panel-kicker,
.sidebar nav a i,
.store-link i,
.editor-card-title i,
.panel-head i,
.users-role-chip i,
.users-section-heading i,
.admin-link,
.stat span,
.stat strong {
    color: var(--admin-accent) !important;
}

.btn-solid,
.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.quick-chip,
.users-form button,
.user-row-actions .btn-solid,
.editor-actions .btn-solid,
.category-create-strip button,
.category-order-save button {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.btn-solid i,
.admin-btn i,
button.admin-btn i,
.form-panel button i,
.login-card button i,
.quick-chip i,
.users-form button i,
.user-row-actions .btn-solid i,
.editor-actions .btn-solid i {
    color: #fff !important;
}

.btn-solid:hover,
.admin-btn:hover,
button.admin-btn:hover,
.quick-chip:hover,
.form-panel button:hover {
    background: linear-gradient(135deg, var(--admin-accent-dark), var(--admin-accent)) !important;
    box-shadow: 0 12px 28px rgba(var(--admin-accent-rgb), .18) !important;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: rgba(var(--admin-accent-rgb), .055) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.sidebar nav a:hover::before,
.sidebar nav a.active::before {
    background: var(--admin-accent) !important;
    opacity: 1 !important;
}

.sidebar nav a:hover i,
.sidebar nav a.active i {
    color: var(--admin-accent) !important;
}

.user-mini-avatar,
.user-avatar,
.stat-icon {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    color: #fff !important;
    border-color: var(--admin-accent-border) !important;
    box-shadow: none !important;
}

.user-mini-avatar i,
.user-avatar i,
.stat-icon i {
    color: #fff !important;
}

.premium-switch input:checked + span,
.switch input:checked + span,
.toggle input:checked + span {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    border-color: var(--admin-accent-border-strong) !important;
}

.admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.search-input):not([name="search"]):focus,
.admin-main select:not(.search-input):focus,
.admin-main textarea:not(.search-input):focus {
    border-color: var(--admin-accent-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), .10) !important;
}

/* 3) USUARIOS: izquierda editar usuarios / derecha crear administrador. */
.users-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
    gap: 18px !important;
    align-items: start !important;
}

.users-manage-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
    display: grid !important;
    gap: 0 !important;
}

.users-create-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
    top: 0 !important;
}

/* Anula la regla global ".editor-card + .editor-card" que bajaba la card derecha. */
.users-manage-card + .users-create-card,
.users-create-card + .users-manage-card {
    margin-top: 0 !important;
}

/* 4) USUARIOS: elimina el espacio exagerado entre línea de título y filtros. */
.users-manage-card .editor-card-title {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
}

.users-manage-card .editor-card-title + .users-role-filter {
    margin-top: 0 !important;
}

.users-role-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

/* 5) Filtros Dueños/Admins: Admin seleccionado por defecto se ve claro. */
.users-role-chip {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.users-role-chip.active,
.users-role-chip:hover {
    background: rgba(var(--admin-accent-rgb), .13) !important;
    border-color: var(--admin-accent-border-strong) !important;
    color: #fff !important;
}

.users-role-chip.active i,
.users-role-chip:hover i {
    color: var(--admin-accent) !important;
}

/* 6) Sección filtrada arranca más cerca de los botones. */
.users-section-block {
    margin-top: 0 !important;
}

/* 7) Responsive usuarios */
@media (max-width: 1100px) {
    .users-layout {
        grid-template-columns: 1fr !important;
    }

    .users-manage-card,
    .users-create-card {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .users-create-card {
        margin-top: 16px !important;
        position: static !important;
    }
}

@media (max-width: 760px) {
    .users-role-filter {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .users-role-chip {
        justify-content: center !important;
    }
}


/* ==========================================================
   vOWNER MANUAL ADMIN COLOR
   El dueño define el color del panel desde Configuración.
   Estas variables vienen desde la base de datos en layouts/header.php.
   ========================================================== */

:root {
    --admin-accent: var(--admin-panel-color, var(--primary));
    --admin-accent-dark: var(--admin-panel-color-dark, var(--primary-dark));
    --admin-accent-rgb: var(--admin-panel-rgb, var(--primary-rgb));
    --admin-accent-soft: rgba(var(--admin-accent-rgb), .10);
    --admin-accent-border: rgba(var(--admin-accent-rgb), .22);
    --admin-accent-border-strong: rgba(var(--admin-accent-rgb), .36);
}

/* Vista previa del color del panel dentro de Configuración */
.admin-panel-color-card .help-copy {
    margin-bottom: 14px;
}

.admin-panel-color-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.admin-color-preview {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--admin-accent-border);
    border-radius: 16px;
    background: rgba(var(--admin-accent-rgb), .07);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.admin-color-preview span,
.admin-color-preview strong {
    color: #fff;
    font-weight: 900;
}

.admin-color-preview span i {
    color: var(--admin-accent);
}

.admin-color-preview button {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark));
    color: #fff;
    font-weight: 950;
}

/* Reaplica el color manual del dueño a todos los elementos importantes */
.editor-kicker,
.page-kicker,
.panel-kicker,
.sidebar nav a i,
.store-link i,
.editor-card-title i,
.panel-head i,
.users-role-chip i,
.users-section-heading i,
.admin-link,
.stat span,
.stat strong {
    color: var(--admin-accent) !important;
}

.btn-solid,
.admin-btn,
button.admin-btn,
.form-panel button,
.login-card button,
.quick-chip,
.users-form button,
.user-row-actions .btn-solid,
.editor-actions .btn-solid,
.category-create-strip button,
.category-order-save button {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: rgba(var(--admin-accent-rgb), .055) !important;
    color: #fff !important;
}

.sidebar nav a:hover::before,
.sidebar nav a.active::before {
    background: var(--admin-accent) !important;
    opacity: 1 !important;
}

.sidebar nav a:hover i,
.sidebar nav a.active i {
    color: var(--admin-accent) !important;
}

.user-mini-avatar,
.user-avatar,
.stat-icon {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    color: #fff !important;
    border-color: var(--admin-accent-border) !important;
    box-shadow: none !important;
}

.user-mini-avatar i,
.user-avatar i,
.stat-icon i {
    color: #fff !important;
}

.users-role-chip.active,
.users-role-chip:hover,
.user-row-card.is-current-user,
.user-permission-note,
.only-self-section,
.sidebar-status {
    background: rgba(var(--admin-accent-rgb), .07) !important;
    border-color: var(--admin-accent-border) !important;
}

.premium-switch input:checked + span,
.switch input:checked + span,
.toggle input:checked + span {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    border-color: var(--admin-accent-border-strong) !important;
}

.admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.search-input):not([name="search"]):focus,
.admin-main select:not(.search-input):focus,
.admin-main textarea:not(.search-input):focus {
    border-color: var(--admin-accent-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), .10) !important;
}

/* Mantener alineación final de usuarios */
.users-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
    gap: 18px !important;
    align-items: start !important;
}

.users-manage-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
    display: grid !important;
    gap: 0 !important;
}

.users-create-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
    top: 0 !important;
}

.users-manage-card + .users-create-card,
.users-create-card + .users-manage-card {
    margin-top: 0 !important;
}

.users-manage-card .editor-card-title {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
}

.users-role-filter {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

@media (max-width: 1100px) {
    .users-layout {
        grid-template-columns: 1fr !important;
    }

    .users-manage-card,
    .users-create-card {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .users-create-card {
        margin-top: 16px !important;
        position: static !important;
    }
}


/* ==========================================================
   vFINAL ADMIN PANEL COLOR FULL OVERRIDE
   Fuerza a que TODO el backoffice use el color del panel administrativo.
   Evita que queden elementos con el color público de la web.
   ========================================================== */

:root {
    --admin-accent: var(--admin-panel-color, var(--primary));
    --admin-accent-dark: var(--admin-panel-color-dark, var(--primary-dark));
    --admin-accent-rgb: var(--admin-panel-rgb, var(--primary-rgb));
    --admin-accent-soft: rgba(var(--admin-accent-rgb), .10);
    --admin-accent-soft-2: rgba(var(--admin-accent-rgb), .07);
    --admin-accent-border: rgba(var(--admin-accent-rgb), .22);
    --admin-accent-border-strong: rgba(var(--admin-accent-rgb), .38);
}

/* Textos e iconos del panel */
.admin-shell .eyebrow,
.admin-shell .editor-kicker,
.admin-shell .page-kicker,
.admin-shell .panel-kicker,
.admin-shell .panel-head i,
.admin-shell .panel h2 i,
.admin-shell .editor-card-title i,
.admin-shell .sidebar nav a i,
.admin-shell .store-link i,
.admin-shell .logout-link i,
.admin-shell .ghost-action i,
.admin-shell .icon-action i,
.admin-shell .quick-chip i,
.admin-shell .admin-link,
.admin-shell .badge-soft i,
.admin-shell .users-role-chip i,
.admin-shell .users-section-heading i,
.admin-shell .stat span,
.admin-shell .stat strong,
.admin-shell .stat.compact strong,
.admin-shell .price-value,
.admin-shell .brand-ai-content strong,
.admin-shell .color-control span,
.admin-shell .notification-empty i,
.admin-shell .category-side-card i,
.admin-shell .category-table-head,
.admin-shell .day-title i,
.admin-shell .status i,
.admin-shell .new-dot,
.admin-shell .form-panel label span,
.admin-shell .premium-form-grid label span,
.admin-shell .empty-state i {
    color: var(--admin-accent) !important;
}

/* Íconos de estado que no deben quedar como marca */
.admin-shell .pulse,
.admin-shell .sidebar-status .pulse {
    background: var(--success) !important;
    box-shadow: 0 0 0 6px rgba(34,197,94,.12) !important;
}

/* Botones principales */
.admin-shell .btn-solid,
.admin-shell .admin-btn,
.admin-shell button.admin-btn,
.admin-shell .form-panel button,
.admin-shell .login-card button,
.admin-shell .quick-chip,
.admin-shell .checkout-btn,
.admin-shell .users-form button,
.admin-shell .user-row-actions .btn-solid,
.admin-shell .editor-actions .btn-solid,
.admin-shell .category-create-strip button,
.admin-shell .category-order-save button,
.admin-shell .brand-ai-btn.btn-solid {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.admin-shell .btn-solid i,
.admin-shell .admin-btn i,
.admin-shell button.admin-btn i,
.admin-shell .form-panel button i,
.admin-shell .login-card button i,
.admin-shell .quick-chip i,
.admin-shell .checkout-btn i,
.admin-shell .users-form button i,
.admin-shell .user-row-actions .btn-solid i,
.admin-shell .editor-actions .btn-solid i {
    color: #fff !important;
}

.admin-shell .btn-solid:hover,
.admin-shell .admin-btn:hover,
.admin-shell button.admin-btn:hover,
.admin-shell .form-panel button:hover,
.admin-shell .login-card button:hover,
.admin-shell .quick-chip:hover,
.admin-shell .checkout-btn:hover {
    background: linear-gradient(135deg, var(--admin-accent-dark), var(--admin-accent)) !important;
    box-shadow: 0 12px 28px rgba(var(--admin-accent-rgb), .18) !important;
}

/* Botones secundarios y cuadrados */
.admin-shell .btn-muted:hover,
.admin-shell .ghost-action:hover,
.admin-shell .icon-action:hover,
.admin-shell .store-toggle:hover,
.admin-shell .image-reset-btn:hover,
.admin-shell .brand-ai-btn:hover,
.admin-shell .store-link:hover {
    border-color: var(--admin-accent-border-strong) !important;
    background: rgba(var(--admin-accent-rgb), .08) !important;
    color: #fff !important;
}

.admin-shell .btn-muted:hover i,
.admin-shell .ghost-action:hover i,
.admin-shell .icon-action:hover i,
.admin-shell .store-toggle:hover i,
.admin-shell .image-reset-btn:hover i,
.admin-shell .brand-ai-btn:hover i,
.admin-shell .store-link:hover i {
    color: #fff !important;
}

/* Sidebar */
.admin-shell .sidebar {
    border-right-color: var(--admin-accent-border) !important;
}

.admin-shell .brand-img {
    border-color: var(--admin-accent-border) !important;
    box-shadow: 0 14px 30px rgba(var(--admin-accent-rgb), .10) !important;
}

.admin-shell .sidebar-status {
    border-color: var(--admin-accent-border) !important;
    background: linear-gradient(135deg, rgba(var(--admin-accent-rgb), .10), rgba(255,255,255,.025)) !important;
}

.admin-shell .sidebar nav a:hover,
.admin-shell .sidebar nav a.active {
    background: rgba(var(--admin-accent-rgb), .055) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.admin-shell .sidebar nav a:hover::before,
.admin-shell .sidebar nav a.active::before {
    background: var(--admin-accent) !important;
    opacity: 1 !important;
}

.admin-shell .sidebar nav a:hover i,
.admin-shell .sidebar nav a.active i {
    color: var(--admin-accent) !important;
}

/* Cards, dashboard e iconos */
.admin-shell .stat-icon,
.admin-shell .user-avatar,
.admin-shell .user-mini-avatar {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    border-color: var(--admin-accent-border) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.admin-shell .stat-icon i,
.admin-shell .user-avatar i,
.admin-shell .user-mini-avatar i {
    color: #fff !important;
}

/* Paneles hover */
.admin-shell .panel:hover,
.admin-shell .editor-card:hover,
.admin-shell .user-row-card:hover,
.admin-shell .category-side-card:hover,
.admin-shell .category-create-strip:hover,
.admin-shell .category-sort-list:hover,
.admin-shell .category-order-save:hover,
.admin-shell .stat:hover {
    border-color: rgba(var(--admin-accent-rgb), .16) !important;
}

/* Usuarios */
.admin-shell .users-role-chip.active,
.admin-shell .users-role-chip:hover,
.admin-shell .user-row-card.is-current-user,
.admin-shell .user-permission-note,
.admin-shell .only-self-section {
    background: rgba(var(--admin-accent-rgb), .07) !important;
    border-color: var(--admin-accent-border) !important;
}

.admin-shell .users-role-chip.active i,
.admin-shell .users-role-chip:hover i {
    color: var(--admin-accent) !important;
}

/* Switches/toggles */
.admin-shell .premium-switch input:checked + span,
.admin-shell .switch input:checked + span,
.admin-shell .toggle input:checked + span {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    border-color: var(--admin-accent-border-strong) !important;
}

/* Inputs focus */
.admin-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.search-input):not([name="search"]):focus,
.admin-shell select:not(.search-input):focus,
.admin-shell textarea:not(.search-input):focus {
    border-color: var(--admin-accent-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), .10) !important;
}

.admin-shell .color-row:focus-within,
.admin-shell .catalog-search:focus-within,
.admin-shell .orders-search-wrap:focus-within {
    border-color: var(--admin-accent-border-strong) !important;
}

/* Badges / notificaciones */
.admin-shell .notification-trigger small,
.admin-shell .quick-chip b,
.admin-shell .notification-dot {
    background: var(--admin-accent) !important;
    color: #111 !important;
}

.admin-shell .notification-dot {
    box-shadow: 0 0 0 5px rgba(var(--admin-accent-rgb), .10) !important;
}

/* Sliders */
.admin-shell input[type="range"] {
    accent-color: var(--admin-accent) !important;
}

/* Modal abrir tienda / horas rápidas */
.admin-shell .quick-hours button:hover,
.admin-shell .quick-hours button:focus,
.admin-shell .quick-hours button.active {
    background: rgba(var(--admin-accent-rgb), .10) !important;
    border-color: var(--admin-accent-border-strong) !important;
    color: #fff !important;
}

/* Mantener danger como rojo */
.admin-shell .danger-btn,
.admin-shell .danger-btn i,
.admin-shell .danger-link:hover,
.admin-shell .logout-link:hover,
.admin-shell .store-alert {
    color: #ffb4b4 !important;
}

.admin-shell .danger-btn {
    background: rgba(255,77,77,.14) !important;
    border: 1px solid rgba(255,77,77,.22) !important;
}


/* ==========================================================
   vADMIN COLOR SCOPE FIX
   Solución definitiva para no mezclar color público de la web
   con color interno del panel administrativo.

   Dentro de .admin-shell, todas las variables --primary pasan
   a usar el color del panel, no el color de la tienda.
   ========================================================== */

.admin-shell {
    --primary: var(--admin-panel-color, #C9A000) !important;
    --primary-dark: var(--admin-panel-color-dark, #8F7300) !important;
    --primary-rgb: var(--admin-panel-rgb, 201,160,0) !important;
    --primary-dark-rgb: var(--admin-panel-rgb, 201,160,0) !important;

    --admin-accent: var(--admin-panel-color, #C9A000) !important;
    --admin-accent-dark: var(--admin-panel-color-dark, #8F7300) !important;
    --admin-accent-rgb: var(--admin-panel-rgb, 201,160,0) !important;

    --border: rgba(var(--admin-panel-rgb, 201,160,0), .14) !important;
    --admin-accent-soft: rgba(var(--admin-panel-rgb, 201,160,0), .10) !important;
    --admin-accent-border: rgba(var(--admin-panel-rgb, 201,160,0), .22) !important;
    --admin-accent-border-strong: rgba(var(--admin-panel-rgb, 201,160,0), .38) !important;
}

/* También cubre elementos fuera del shell pero propios del admin, como modales. */
.open-store-modal,
.login-card,
.admin-main,
.sidebar,
.topbar,
.mobile-tabbar {
    --primary: var(--admin-panel-color, #C9A000) !important;
    --primary-dark: var(--admin-panel-color-dark, #8F7300) !important;
    --primary-rgb: var(--admin-panel-rgb, 201,160,0) !important;
    --primary-dark-rgb: var(--admin-panel-rgb, 201,160,0) !important;

    --admin-accent: var(--admin-panel-color, #C9A000) !important;
    --admin-accent-dark: var(--admin-panel-color-dark, #8F7300) !important;
    --admin-accent-rgb: var(--admin-panel-rgb, 201,160,0) !important;
}

/* Fuerza filtros, pills y chips que antes seguían tomando el color público. */
.admin-shell .filter-chip.active,
.admin-shell .category-filter.active,
.admin-shell .catalog-filter.active,
.admin-shell .product-filter.active,
.admin-shell .admin-filter.active,
.admin-shell .tabs button.active,
.admin-shell .tabs a.active,
.admin-shell .chip.active,
.admin-shell .quick-filter.active,
.admin-shell .catalog-tabs a.active,
.admin-shell .catalog-tabs button.active,
.admin-shell [data-filter].active,
.admin-shell .filter-btn.active {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    color: #fff !important;
    border-color: var(--admin-accent-border-strong) !important;
    box-shadow: none !important;
}

.admin-shell .filter-chip:hover,
.admin-shell .category-filter:hover,
.admin-shell .catalog-filter:hover,
.admin-shell .product-filter:hover,
.admin-shell .admin-filter:hover,
.admin-shell .tabs button:hover,
.admin-shell .tabs a:hover,
.admin-shell .chip:hover,
.admin-shell .quick-filter:hover,
.admin-shell .catalog-tabs a:hover,
.admin-shell .catalog-tabs button:hover,
.admin-shell [data-filter]:hover,
.admin-shell .filter-btn:hover {
    border-color: var(--admin-accent-border-strong) !important;
    background: rgba(var(--admin-accent-rgb), .08) !important;
    color: #fff !important;
}

/* Botones de acciones de producto que quedaban en rojo/color web. */
.admin-shell .product-actions a,
.admin-shell .product-actions button,
.admin-shell .card-actions a,
.admin-shell .card-actions button,
.admin-shell .row-actions a,
.admin-shell .row-actions button {
    color: var(--admin-accent) !important;
}

.admin-shell .product-actions a:hover,
.admin-shell .product-actions button:hover,
.admin-shell .card-actions a:hover,
.admin-shell .card-actions button:hover,
.admin-shell .row-actions a:hover,
.admin-shell .row-actions button:hover {
    border-color: var(--admin-accent-border-strong) !important;
    background: rgba(var(--admin-accent-rgb), .08) !important;
}

/* Excepciones: eliminar/cerrar sesión/cancelado se mantienen rojos. */
.admin-shell .danger-btn,
.admin-shell .danger-link,
.admin-shell .delete-btn,
.admin-shell .btn-delete,
.admin-shell .logout-link,
.admin-shell a[href*="delete"],
.admin-shell button[name*="delete"],
.admin-shell .status-cancelado,
.admin-shell .status.cancelado {
    color: #ff7b7b !important;
}

.admin-shell .danger-btn,
.admin-shell .delete-btn,
.admin-shell .btn-delete,
.admin-shell a[href*="delete"],
.admin-shell button[name*="delete"] {
    background: rgba(255,77,77,.13) !important;
    border-color: rgba(255,77,77,.25) !important;
}

/* Estado activo/verde no debe cambiar al color del panel. */
.admin-shell .badge-active,
.admin-shell .status-activo,
.admin-shell .is-active-badge,
.admin-shell .active-badge {
    color: #36d777 !important;
    background: rgba(54,215,119,.10) !important;
    border-color: rgba(54,215,119,.18) !important;
}

/* Elementos que estaban hardcodeados con color de tienda. */
.admin-shell .section-label,
.admin-shell .section-tag,
.admin-shell .product-category,
.admin-shell .category-name,
.admin-shell .small-kicker,
.admin-shell .table-kicker,
.admin-shell .card-kicker {
    color: var(--admin-accent) !important;
}

/* Fondos suaves del admin no deben quedar con tono de la web. */
.admin-shell body,
.admin-shell .admin-main {
    background-color: transparent !important;
}

/* Topbar y botones rápidos */
.admin-shell .topbar-actions .quick-chip,
.admin-shell .topbar-actions .notification-trigger,
.admin-shell .topbar-actions .user-card .user-avatar {
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
    color: #fff !important;
}

/* El botón de encendido queda verde porque representa estado, no marca. */
.admin-shell .store-toggle,
.admin-shell .power-btn,
.admin-shell .topbar-actions a[href*="toggle-open"] {
    background: rgba(34,197,94,.10) !important;
    border-color: rgba(34,197,94,.24) !important;
    color: #65e68f !important;
}

.admin-shell .store-toggle i,
.admin-shell .power-btn i,
.admin-shell .topbar-actions a[href*="toggle-open"] i {
    color: #65e68f !important;
}

/* Si algún componente usa directamente --primary en pseudo-elementos,
   esto lo reencamina al color del panel. */
.admin-shell *::before,
.admin-shell *::after {
    --primary: var(--admin-panel-color, #C9A000) !important;
    --primary-dark: var(--admin-panel-color-dark, #8F7300) !important;
    --primary-rgb: var(--admin-panel-rgb, 201,160,0) !important;
}

/* v9 sidebar mobile scroll fix */
.sidebar {
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 99px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 980px) {
    .sidebar {
        height: 100vh !important;
        height: 100dvh !important;
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    }

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

    .sidebar-footer {
        margin-top: 12px !important;
    }
}


/* vNEXT - sidebar usable en resoluciones bajas */
.sidebar {
    max-height: 100vh;
    overflow: hidden;
}
.sidebar nav {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--admin-accent-rgb), .55) rgba(255,255,255,.05);
}
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 999px; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(var(--admin-accent-rgb), .55); border-radius: 999px; }
.sidebar-footer { flex: 0 0 auto; }
.sidebar-top, .sidebar-status { flex: 0 0 auto; }

@media (max-height: 720px) {
    .sidebar { gap: 12px; padding: 16px; }
    .brand-img { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
    .sidebar-status { padding: 11px; border-radius: 16px; }
    .sidebar nav a, .store-link, .logout-link { min-height: 42px; padding: 10px 12px; border-radius: 13px; }
    .sidebar-footer { padding-top: 10px; }
}

@media (max-width: 980px) {
    .sidebar {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }
    .sidebar nav {
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }
}

/* vNEXT - tablas y paneles más seguros en móvil */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 780px; }
.order-unseen { box-shadow: inset 4px 0 0 var(--admin-accent); }
.order-age-badge { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border-radius:999px; background:rgba(255,255,255,.055); border:1px solid var(--border-soft); color:#ddd; font-size:12px; font-weight:900; white-space:nowrap; }
.quick-status-list { display:flex; flex-wrap:wrap; gap:6px; }
.quick-status-list a { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border-radius:999px; border:1px solid var(--border-soft); background:rgba(255,255,255,.045); font-size:12px; font-weight:900; }
.quick-status-list a:hover { border-color:var(--admin-accent-border-strong); background:var(--admin-accent-soft); }
.notification-trigger.has-new { animation: bellPulse 1.2s ease-in-out infinite; }
@keyframes bellPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.admin-hint { margin-top:10px; color:var(--muted); font-size:13px; line-height:1.45; }
.image-clean-result { margin-top:12px; padding:12px 14px; border-radius:14px; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.22); color:#c7f9d8; font-weight:850; }

/* v4 - cabecera sticky global + guardado rápido en scroll */
.admin-main {
    overflow: visible !important;
}

.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 220 !important;
    padding: 14px 0 !important;
    margin-bottom: 24px !important;
    isolation: isolate;
    transition: min-height .22s ease, padding .22s ease, transform .22s ease;
}

.topbar::before {
    content: "";
    position: absolute;
    inset: 0 -26px;
    z-index: -1;
    background: rgba(7, 8, 7, .78);
    border-bottom: 1px solid rgba(255,255,255,.055);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    opacity: .92;
    transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.topbar.is-stuck::before {
    background: rgba(7, 8, 7, .92);
    border-color: rgba(var(--admin-accent-rgb), .14);
    box-shadow: 0 18px 40px rgba(0,0,0,.34);
}

.topbar.is-stuck {
    min-height: 78px;
}

.topbar.is-stuck .topbar-title p {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
}

.topbar-title p {
    transition: max-height .2s ease, opacity .2s ease, margin .2s ease;
}

.topbar-sticky-submit[hidden] {
    display: none !important;
}

.topbar-sticky-submit {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.topbar-sticky-submit:not(.is-visible) {
    display: none;
}

.topbar-submit-btn {
    min-height: 46px;
    padding: 0 17px;
    border: 1px solid rgba(var(--admin-accent-rgb), .26);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(var(--admin-accent-rgb), .18);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.topbar-submit-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 18px 38px rgba(var(--admin-accent-rgb), .24);
}

.topbar-submit-btn i {
    color: inherit !important;
}

@media (max-width: 980px) {
    .topbar {
        top: 0 !important;
        padding: 12px 0 !important;
    }

    .topbar::before {
        inset: 0 -20px;
    }

    .topbar-actions {
        flex-wrap: wrap;
        gap: 9px !important;
    }

    .topbar-sticky-submit {
        order: -1;
        width: 100%;
    }

    .topbar-submit-btn {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 520px) {
    .topbar.is-stuck .eyebrow,
    .topbar.is-stuck .topbar-title p {
        display: none;
    }

    .topbar.is-stuck h1 {
        font-size: 22px !important;
    }
}

/* v5 - corrección cabecera: sin fondo negro en reposo, sin titileo y mobile compacto */
.topbar {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    transition: padding .28s ease, min-height .28s ease, box-shadow .28s ease !important;
    will-change: padding;
}

.topbar::before {
    background: rgba(7, 8, 7, .82) !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.26) !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    pointer-events: none !important;
    transition: opacity .28s ease, transform .28s ease, background .28s ease, box-shadow .28s ease !important;
}

.topbar.is-stuck::before {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.topbar:not(.is-stuck) .topbar-title p {
    max-height: 48px !important;
    opacity: 1 !important;
    margin-top: 7px !important;
}

.topbar.is-stuck {
    min-height: 74px !important;
}

@media (max-width: 980px) {
    .topbar {
        min-height: 72px !important;
        display: grid !important;
        grid-template-columns: 48px 1fr !important;
        align-items: center !important;
        gap: 10px !important;
        margin: -16px -16px 18px !important;
        padding: 12px 14px !important;
        background: rgba(7,7,7,.72) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-bottom: 1px solid rgba(255,255,255,.055) !important;
    }

    .topbar::before {
        display: none !important;
    }

    .topbar-title {
        display: none !important;
    }

    .menu-btn {
        display: grid !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 13px !important;
    }

    .topbar-actions {
        grid-column: 2 !important;
        width: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: 0 !important;
        min-width: 0 !important;
    }

    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .user-card {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        display: grid !important;
        place-items: center !important;
    }

    .topbar-actions .user-card .user-avatar {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
    }

    .topbar-actions .user-card div,
    .topbar-actions .quick-chip,
    .topbar-actions .desktop-only {
        display: none !important;
    }

    .topbar-sticky-submit {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 88px !important;
        z-index: 140 !important;
        width: auto !important;
        display: flex !important;
        pointer-events: none !important;
        opacity: 0 !important;
        transform: translateY(10px) !important;
        transition: opacity .22s ease, transform .22s ease !important;
    }

    .topbar-sticky-submit.is-visible {
        pointer-events: auto !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .topbar-sticky-submit:not(.is-visible) {
        display: flex !important;
    }

    .topbar-submit-btn {
        width: 100% !important;
        min-height: 52px !important;
        border-radius: 17px !important;
    }
}

@media (max-width: 430px) {
    .topbar {
        margin: -14px -14px 16px !important;
        padding: 11px 12px !important;
        grid-template-columns: 44px 1fr !important;
    }

    .topbar-actions {
        gap: 7px !important;
    }

    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .user-card,
    .menu-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }
}

/* Productos: tarjetas más compactas en escritorio.
   En pantallas grandes se muestran 4 por fila, en notebook/monitor medio 3,
   y se mantiene una lectura cómoda en tablet/mobile. */
.admin-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.admin-product-card {
    min-width: 0 !important;
}

.admin-product-img {
    height: clamp(132px, 9vw, 155px) !important;
}

.admin-product-body {
    padding: 13px !important;
    gap: 10px !important;
}

.admin-product-metrics {
    gap: 6px !important;
}

.admin-product-metrics div {
    padding: 8px !important;
    min-width: 0 !important;
}

.admin-product-metrics strong {
    font-size: 12px !important;
    white-space: nowrap;
}

@media (min-width: 1650px) {
    .admin-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1180px) {
    .admin-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .admin-product-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-product-img {
        height: 160px !important;
    }

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

/* v7 - detalle de pedido más compacto y usable en mobile */
.order-detail-page {
    align-items: start;
}

.order-main-panel,
.order-side-panel {
    overflow: hidden;
}

.order-page-head {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}

.order-page-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.order-page-head p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

.compact-back {
    min-height: 38px;
    padding: 9px 13px !important;
}

.order-status-strip {
    display: grid;
    grid-template-columns: minmax(190px, 260px) 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 14px;
    border: 1px solid rgba(var(--admin-accent-rgb), .22);
    background: linear-gradient(135deg, rgba(var(--admin-accent-rgb), .12), rgba(255,255,255,.028));
}

.order-status-strip span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.order-status-strip strong {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    color: #fff;
}

.order-status-strip strong i {
    color: var(--admin-accent);
}

.quick-status-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.quick-status-buttons button {
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 11px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.045);
    color: #ededed;
    font-size: 12px;
    font-weight: 900;
    transition: .18s ease;
}

.quick-status-buttons button:hover,
.quick-status-buttons button.active {
    background: rgba(var(--admin-accent-rgb), .18);
    border-color: rgba(var(--admin-accent-rgb), .36);
    color: #fff;
}

.order-customer-card {
    align-items: stretch !important;
    padding: 14px !important;
    margin-bottom: 16px !important;
}

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

.customer-label {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.customer-avatar {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    border-radius: 14px !important;
}

.customer-main h2 {
    font-size: clamp(18px, 2.2vw, 23px);
    line-height: 1.08;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.customer-main p {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #ededed;
    font-weight: 850;
}

.quick-actions {
    align-content: center;
}

.quick-actions .admin-btn {
    min-height: 42px;
    justify-content: center;
    white-space: nowrap;
    overflow: visible;
}

.quick-actions .admin-btn span {
    overflow: visible;
    text-overflow: initial;
}

.order-info-card {
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,.028);
}

.order-info-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
}

.order-info-title i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(var(--admin-accent-rgb), .12);
    color: var(--admin-accent);
    border: 1px solid rgba(var(--admin-accent-rgb), .20);
    flex: 0 0 34px;
}

.order-info-title h3 {
    font-size: 16px;
    line-height: 1.2;
}

.order-info-title p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.compact-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
}

.compact-info-grid div {
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.16) !important;
}

.note-box {
    align-items: flex-start;
}

.note-box strong {
    display: block;
    margin-bottom: 4px;
}

.order-products-table {
    margin-top: 0;
}

.order-products-table table {
    min-width: 640px;
}

.order-totals {
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: rgba(255,255,255,.028);
}

.status-form .admin-btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 980px) {
    .order-layout {
        gap: 14px !important;
    }

    .order-side-panel {
        order: -1;
    }

    .order-side-panel .timeline {
        display: none;
    }
}

@media (max-width: 720px) {
    .order-main-panel,
    .order-side-panel {
        padding: 14px !important;
    }

    .order-page-head {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .order-page-head .eyebrow,
    .order-page-head p {
        display: none;
    }

    .order-page-head h2 {
        font-size: 20px;
        line-height: 1.15;
    }

    .compact-back {
        margin-left: auto;
        min-width: 0;
        flex: 0 0 auto;
    }

    .order-status-strip {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .quick-status-buttons {
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-status-buttons button {
        width: 100%;
    }

    .order-customer-card {
        gap: 13px !important;
    }

    .customer-main {
        width: 100%;
    }

    .customer-avatar {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
    }

    .quick-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .quick-actions .admin-btn {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        white-space: normal;
        text-align: center;
    }

    .compact-info-grid {
        grid-template-columns: 1fr !important;
    }

    .order-info-card {
        padding: 12px;
    }

    .order-info-title p {
        display: none;
    }

    .order-totals {
        margin-top: 14px !important;
    }

    .grand-total {
        font-size: 19px !important;
    }
}

@media (max-width: 430px) {
    .order-page-head h2 {
        font-size: 18px;
    }

    .customer-main {
        gap: 10px;
    }

    .customer-main h2 {
        font-size: 19px;
    }

    .topbar {
        min-height: 66px !important;
        height: 66px !important;
    }

    .admin-main {
        padding-top: 82px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .user-card,
    .menu-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .topbar-actions .user-card .user-avatar {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ==========================================================
   v8 - Corrección real mobile en Pedidos + cabecera compacta
   ========================================================== */
@media (max-width: 720px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        background:
            radial-gradient(circle at top left, rgba(var(--admin-accent-rgb), .045), transparent 210px),
            #070707 !important;
    }

    .admin-shell {
        display: block !important;
        min-height: 100vh !important;
    }

    .admin-main {
        padding: 8px 10px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        width: 100% !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    /* elimina el hueco superior que dejaba la cabecera anterior */
    .topbar,
    .topbar.is-stuck {
        position: sticky !important;
        top: 0 !important;
        z-index: 320 !important;
        min-height: 58px !important;
        height: 58px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        margin: -8px -10px 10px !important;
        padding: 8px 10px !important;
        background: rgba(7,7,7,.90) !important;
        border-bottom: 1px solid rgba(255,255,255,.065) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,.30) !important;
        backdrop-filter: blur(14px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
        overflow: visible !important;
    }

    .topbar::before,
    .topbar::after {
        display: none !important;
        content: none !important;
    }

    .topbar-title,
    .topbar .topbar-title,
    .topbar .eyebrow,
    .topbar h1,
    .topbar p {
        display: none !important;
    }

    .menu-btn {
        display: grid !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        background: rgba(255,255,255,.045) !important;
        border: 1px solid rgba(255,255,255,.085) !important;
    }

    .topbar-actions {
        grid-column: 2 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .topbar-actions .notification-wrapper {
        position: static !important;
        flex: 0 0 auto !important;
    }

    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .user-card,
    .topbar-actions .menu-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        display: grid !important;
        place-items: center !important;
        flex: 0 0 40px !important;
    }

    .topbar-actions .user-card {
        margin-left: auto !important;
    }

    .topbar-actions .user-card .user-avatar {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }

    .topbar-actions .user-card div,
    .topbar-actions .quick-chip,
    .topbar-actions .desktop-only,
    .topbar-sticky-submit {
        display: none !important;
    }

    /* Dropdown de notificaciones: fijo y sin salirse de pantalla */
    .notification-dropdown {
        position: fixed !important;
        top: 64px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(420px, calc(100dvh - 150px)) !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
        z-index: 500 !important;
        transform: translateY(-6px) !important;
    }

    .notification-wrapper.open .notification-dropdown {
        transform: translateY(0) !important;
    }

    .notification-head {
        padding: 12px 13px !important;
    }

    .notification-item {
        padding: 11px 13px !important;
    }

    .notification-empty {
        padding: 18px 13px !important;
    }

    /* Paneles de pedidos más livianos */
    .orders-filter-panel,
    .orders-clean-panel,
    .orders-list-panel,
    .panel {
        border-radius: 16px !important;
        box-shadow: 0 14px 38px rgba(0,0,0,.26) !important;
    }

    .orders-filter-panel,
    .orders-clean-panel {
        padding: 14px !important;
        margin-bottom: 12px !important;
    }

    .orders-filter-panel .panel-head,
    .orders-clean-panel .panel-head,
    .orders-list-panel .panel-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(255,255,255,.065) !important;
    }

    .orders-filter-panel .panel-head h2,
    .orders-clean-panel .panel-head h2,
    .orders-list-panel .panel-head h2 {
        font-size: 18px !important;
        line-height: 1.15 !important;
        gap: 8px !important;
    }

    .orders-filter-panel .panel-head p,
    .orders-clean-panel .panel-head p,
    .orders-list-panel .panel-head p {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin-top: 4px !important;
    }

    .orders-filter-panel .panel-head .row-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .orders-filter-panel .panel-head .badge-soft {
        min-height: 36px !important;
        padding: 8px 9px !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 12px !important;
        white-space: normal !important;
    }

    .orders-filter {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .orders-search-wrap {
        grid-column: auto !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
    }

    .orders-search-icon {
        left: 13px !important;
        top: 19px !important;
        transform: none !important;
    }

    .orders-search-wrap input[name="search"] {
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 12px 0 38px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        width: 100% !important;
    }

    .orders-clear-btn {
        width: auto !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        justify-content: center !important;
        font-size: 0 !important;
        background: rgba(255,255,255,.035) !important;
        border-color: rgba(255,255,255,.075) !important;
    }

    .orders-clear-btn i {
        font-size: 14px !important;
        margin: 0 !important;
    }

    .orders-filter select,
    .orders-filter input[type="date"] {
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }

    .orders-filter .mini-check {
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 3px !important;
        font-size: 14px !important;
        font-weight: 850 !important;
    }

    .orders-filter .mini-check input {
        width: 18px !important;
        height: 18px !important;
        accent-color: var(--admin-accent) !important;
    }

    .orders-filter .admin-btn {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 13px !important;
        justify-content: center !important;
        padding: 0 13px !important;
        font-size: 13px !important;
    }

    /* Limpieza: más compacta y no invadida por la tabbar */
    .orders-clean-panel .panel-head p {
        max-width: 100% !important;
    }

    .delete-all-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .delete-all-form select,
    .delete-all-form .admin-btn {
        width: 100% !important;
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
    }

    .orders-list-panel {
        padding: 14px !important;
        margin-bottom: 18px !important;
    }

    .orders-list-panel .panel-head .admin-btn.danger-btn {
        width: 100% !important;
        min-height: 40px !important;
        justify-content: center !important;
        font-size: 13px !important;
    }

    .day-title {
        border-radius: 13px !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .table-wrap {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 13px !important;
    }

    /* barra inferior: más baja y con espacio real debajo */
    .mobile-tabbar {
        left: 10px !important;
        right: 10px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        height: 58px !important;
        padding: 5px !important;
        border-radius: 18px !important;
        z-index: 260 !important;
    }

    .mobile-tabbar a {
        border-radius: 14px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        gap: 2px !important;
    }

    .mobile-tabbar a i {
        font-size: 15px !important;
    }
}

@media (max-width: 390px) {
    .admin-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .topbar,
    .topbar.is-stuck {
        margin-left: -8px !important;
        margin-right: -8px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

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

    .menu-btn,
    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .user-card {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }

    .topbar-actions .user-card .user-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    .notification-dropdown {
        top: 60px !important;
        left: 8px !important;
        right: 8px !important;
    }
}

/* ==========================================================
   v9 - Header mobile fijo real al hacer scroll
   ========================================================== */
@media (max-width: 720px) {
    .admin-main {
        /* deja espacio real para la cabecera fija */
        padding-top: 68px !important;
        padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .topbar,
    .topbar.is-stuck {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 420 !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgba(7, 7, 7, .92) !important;
        border-bottom: 1px solid rgba(255,255,255,.065) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,.30) !important;
        backdrop-filter: blur(14px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
        overflow: visible !important;
        transform: translateZ(0) !important;
    }

    .topbar::before,
    .topbar::after {
        display: none !important;
        content: none !important;
    }

    .topbar-title,
    .topbar .topbar-title,
    .topbar .eyebrow,
    .topbar h1,
    .topbar p {
        display: none !important;
    }

    .menu-btn {
        display: grid !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .topbar-actions {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        overflow: visible !important;
    }

    .topbar-actions .notification-wrapper,
    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .user-card {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .user-card,
    .topbar-actions .notification-trigger {
        padding: 0 !important;
        border-radius: 12px !important;
        display: grid !important;
        place-items: center !important;
    }

    .topbar-actions .user-card {
        margin-left: auto !important;
    }

    .notification-dropdown {
        position: fixed !important;
        top: 64px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 700 !important;
    }

    .sidebar {
        z-index: 900 !important;
    }

    body.sidebar-open .admin-overlay {
        z-index: 850 !important;
    }
}

@media (max-width: 390px) {
    .admin-main {
        padding-top: 68px !important;
    }

    .topbar,
    .topbar.is-stuck {
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }
}

/* v10 - refinamiento visual de Modificar web + editor de imagen de banner */
@media (min-width: 981px) {
    .topbar {
        padding-top: 16px !important;
        padding-bottom: 18px !important;
    }

    .topbar-title h1 {
        font-size: clamp(30px, 2.4vw, 42px) !important;
        line-height: 1.02 !important;
    }

    .topbar-title p {
        margin-top: 6px !important;
    }

    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .notification-trigger {
        width: 48px !important;
        height: 48px !important;
    }

    .topbar-actions .user-card {
        min-height: 48px !important;
        padding: 8px 12px !important;
    }
}

.web-premium-editor {
    margin-top: 2px;
}

.web-editor-header-refined {
    padding: 18px 20px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.052), rgba(255,255,255,.022)) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.16) !important;
}

.web-editor-header-refined h2 {
    font-size: clamp(24px, 2vw, 31px) !important;
    line-height: 1.05 !important;
}

.web-editor-header-refined p {
    margin-top: 7px !important;
    max-width: 620px;
}

.web-editor-header-refined .editor-actions {
    gap: 10px !important;
}

.web-editor-header-refined .btn-solid,
.web-editor-header-refined .btn-muted {
    min-height: 44px !important;
    padding: 0 16px !important;
}

.web-editor-grid-refined {
    grid-template-columns: minmax(0, 1fr) 430px !important;
    align-items: start;
    gap: 18px !important;
    padding-top: 18px !important;
}

.web-form-card-refined,
.hero-image-editor-card {
    background: linear-gradient(145deg, rgba(255,255,255,.044), rgba(255,255,255,.018)), #151515 !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.18) !important;
}

.web-form-card-refined .editor-card-title,
.hero-image-editor-card .editor-card-title {
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.refined-card-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.refined-card-title > div {
    display: grid;
    gap: 2px;
}

.refined-card-title small {
    color: rgba(255,255,255,.48) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.web-text-grid-refined {
    gap: 14px !important;
}

.web-text-grid-refined label {
    gap: 8px !important;
}

.web-text-grid-refined input,
.web-text-grid-refined textarea,
.hero-adjust-panel select {
    background: #111 !important;
    color: #f4f4f4 !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.web-text-grid-refined textarea {
    min-height: 88px !important;
    line-height: 1.6 !important;
    resize: vertical;
}

.web-text-grid-refined input:focus,
.web-text-grid-refined textarea:focus,
.hero-adjust-panel select:focus {
    border-color: rgba(var(--admin-panel-rgb), .48) !important;
    box-shadow: 0 0 0 4px rgba(var(--admin-panel-rgb), .09), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.web-guidelines-refined {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
}

.web-guidelines-refined div {
    padding: 11px 12px !important;
    min-height: 78px;
}

.web-guidelines-refined strong {
    font-size: 14px;
}

.web-guidelines-refined span {
    font-size: 12px !important;
}

.hero-image-editor-card {
    position: sticky;
    top: 18px;
}

.hero-editor-workspace {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

.web-hero-preview-adjust {
    aspect-ratio: 16 / 8.7 !important;
    max-height: 330px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
    background: radial-gradient(circle at 50% 42%, rgba(var(--admin-panel-rgb), .13), transparent 56%), #090909 !important;
}

.web-hero-preview-adjust img {
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--hero-img-fit, cover) !important;
    object-position: var(--hero-img-x, 50%) var(--hero-img-y, 50%) !important;
    transform: scale(var(--hero-img-zoom, 1)) rotate(var(--hero-img-rotate, 0deg)) !important;
    transform-origin: var(--hero-img-x, 50%) var(--hero-img-y, 50%) !important;
    transition: transform .18s ease, object-position .18s ease !important;
}

.clean-file-name {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 0 0;
    color: rgba(255,255,255,.58) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-adjust-panel {
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    background: rgba(0,0,0,.16) !important;
    border-radius: 10px !important;
}

.hero-adjust-panel .image-adjust-head {
    margin-bottom: 12px !important;
}

.hero-adjust-panel .image-adjust-head strong {
    color: #fff;
}

.hero-adjust-panel .image-adjust-head small {
    color: rgba(255,255,255,.48);
}

.hero-adjust-panel .image-range-grid {
    gap: 10px !important;
}

.hero-adjust-panel input[type="range"] {
    accent-color: var(--admin-panel-color) !important;
}

.hero-upload-area-refined {
    margin-top: 14px !important;
}

.hero-upload-compact {
    min-height: 94px !important;
    padding: 16px !important;
    background: linear-gradient(145deg, rgba(var(--admin-panel-rgb), .11), rgba(var(--admin-panel-rgb), .035)) !important;
    border: 1px dashed rgba(var(--admin-panel-rgb), .34) !important;
}

.hero-upload-compact i {
    font-size: 22px !important;
}

.hero-upload-compact small {
    max-width: 330px;
    line-height: 1.45;
}

.web-feedback {
    margin-bottom: 14px !important;
}

.admin-success.web-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 10px;
    color: #d8ffe8;
    background: rgba(34,197,94,.10);
    border: 1px solid rgba(34,197,94,.25);
    font-weight: 800;
}

/* Aviso visual de cambios sin guardar */
body.has-unsaved-changes .topbar-submit-btn,
body.has-unsaved-changes .web-editor-header-refined .btn-solid {
    box-shadow: 0 0 0 4px rgba(var(--admin-panel-rgb), .12), 0 14px 34px rgba(var(--admin-panel-rgb), .14) !important;
}

@media (max-width: 1180px) {
    .web-editor-grid-refined {
        grid-template-columns: 1fr !important;
    }

    .hero-image-editor-card {
        position: relative;
        top: auto;
    }

    .web-guidelines-refined {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .web-editor-header-refined {
        padding: 15px !important;
    }

    .web-editor-header-refined .editor-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .web-editor-header-refined .editor-actions .btn-solid {
        display: none !important;
    }

    .web-hero-preview-adjust {
        aspect-ratio: 16 / 10 !important;
        max-height: 245px !important;
    }

    .hero-adjust-panel {
        padding: 12px !important;
    }

    .hero-upload-compact {
        min-height: 82px !important;
        padding: 14px !important;
    }
}

/* ===== Web banner editor refinements v11 ===== */
.hero-preview-zone {
    gap: 10px !important;
}

.preview-block-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.86);
}

.preview-block-title.secondary {
    margin-top: 2px;
}

.preview-block-title small {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.48);
    text-transform: none;
    letter-spacing: 0;
}

.web-hero-preview-full {
    width: 100%;
    min-height: 220px;
    max-height: 360px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
        radial-gradient(circle at 50% 42%, rgba(var(--admin-panel-rgb), .13), transparent 56%),
        #090909;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.web-hero-preview-full img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 8px;
}

.web-hero-preview-adjust {
    min-height: 120px !important;
}

.hero-mobile-live-preview {
    display: none;
}

.hero-adjust-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-adjust-actions small {
    color: rgba(255,255,255,.52);
    line-height: 1.45;
    flex: 1 1 220px;
}

@media (max-width: 720px) {
    .hero-preview-zone {
        gap: 8px !important;
    }

    .web-hero-preview-full {
        min-height: 160px;
        max-height: 230px;
        padding: 8px;
    }

    .web-hero-preview-adjust {
        aspect-ratio: 16 / 8.5 !important;
        max-height: 165px !important;
    }

    .hero-mobile-live-preview {
        display: block;
        position: sticky;
        top: calc(var(--mobile-topbar-height, 74px) + 8px);
        z-index: 8;
        margin: -2px 0 14px;
        padding: 10px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.08);
        background: linear-gradient(180deg, rgba(16,16,16,.97), rgba(10,10,10,.96));
        box-shadow: 0 10px 30px rgba(0,0,0,.28);
        backdrop-filter: blur(10px);
    }

    .hero-mobile-live-preview .web-hero-preview-adjust {
        margin-bottom: 0 !important;
        min-height: 90px !important;
        max-height: 115px !important;
        aspect-ratio: 16 / 5.8 !important;
    }

    .image-preview-zone.hero-preview-zone .preview-block-title.secondary,
    .image-preview-zone.hero-preview-zone .web-hero-preview-adjust {
        display: none;
    }

    .hero-adjust-panel {
        padding: 12px !important;
        scroll-margin-top: calc(var(--mobile-topbar-height, 74px) + 12px);
    }

    .hero-adjust-actions {
        align-items: stretch;
    }

    .hero-adjust-actions .image-reset-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== v12: editor de banner dentro de la imagen ===== */
.web-hero-preview-adjust {
    position: relative !important;
    cursor: grab;
    user-select: none;
    touch-action: none;
    isolation: isolate;
}

.web-hero-preview-adjust.is-dragging {
    cursor: grabbing;
}

.web-hero-preview-adjust img {
    object-position: center center !important;
    transform: translate(var(--hero-img-pan-x, 0%), var(--hero-img-pan-y, 0%)) scale(var(--hero-img-zoom, 1)) rotate(var(--hero-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
    will-change: transform;
}

.hero-edit-overlay {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    color: rgba(255,255,255,.9);
    background: rgba(0,0,0,.56);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
    font-size: 12px;
    font-weight: 850;
    pointer-events: none;
    opacity: .88;
    backdrop-filter: blur(8px);
}

.hero-edit-overlay.compact {
    left: 8px;
    bottom: 8px;
    padding: 6px 8px;
    font-size: 11px;
}

.hero-adjust-panel .image-adjust-head small {
    max-width: 420px;
}

.hero-adjust-actions .image-reset-btn {
    min-height: 42px;
}

@media (max-width: 720px) {
    .hero-edit-overlay:not(.compact) {
        display: none;
    }

    .hero-mobile-live-preview {
        display: block !important;
    }

    .hero-mobile-live-preview .web-hero-preview-adjust {
        cursor: grab;
    }
}

/* ===== v13: preview del banner igual a la web ===== */
.web-hero-preview-store {
    position: relative !important;
    width: min(430px, 100%) !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    border-radius: 36px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.01)),
        radial-gradient(circle at 50% 35%, rgba(var(--admin-panel-rgb), .22), transparent 55%),
        #0d0d0d !important;
    border: 1px solid rgba(var(--admin-panel-rgb), .12) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.65) !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    isolation: isolate;
}

.web-hero-preview-store img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: var(--hero-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(var(--hero-img-pan-x, 0%), var(--hero-img-pan-y, 0%)) scale(var(--hero-img-zoom, 1)) rotate(var(--hero-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 26px 22px rgba(0,0,0,.48));
    will-change: transform;
}

.web-hero-preview-store img[src$="burger-demo.svg"] {
    width: 82% !important;
    height: 82% !important;
    object-fit: contain !important;
    transform: none !important;
}

.hero-preview-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 4;
    background: var(--admin-panel-color);
    color: #111;
    font-weight: 950;
    padding: 10px 14px;
    border-radius: 999px;
    transform: rotate(6deg);
    box-shadow: 0 12px 28px rgba(var(--admin-panel-rgb), .26);
}

.hero-preview-zone .preview-block-title.secondary {
    margin-bottom: 8px;
}

.hero-preview-zone .clean-file-name {
    padding-top: 2px;
}

@media (max-width: 720px) {
    .hero-mobile-live-preview .web-hero-preview-store {
        width: min(100%, 250px) !important;
        margin-bottom: 0 !important;
        border-radius: 24px !important;
        box-shadow: 0 16px 42px rgba(0,0,0,.48) !important;
    }

    .hero-mobile-live-preview .hero-preview-badge {
        top: 14px;
        right: 14px;
        padding: 7px 11px;
        font-size: 11px;
    }

    .image-preview-zone.hero-preview-zone .clean-file-name {
        display: none !important;
    }
}

/* ===== v14: Configuración / Identidad visual premium ===== */
.settings-visual-editor {
    padding-bottom: 120px;
}

.settings-visual-header {
    align-items: center !important;
}

.settings-layout-pro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
}

.settings-main-pro {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.settings-side-pro {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 18px;
}

.settings-section-banner,
.settings-card-pro,
.settings-preview-card-pro {
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026));
    box-shadow: 0 18px 46px rgba(0,0,0,.22);
    border-radius: 18px;
}

.settings-section-banner {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.settings-section-banner span {
    display: block;
    color: var(--admin-panel-color);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.settings-section-banner h3 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 950;
}

.settings-section-banner p,
.settings-help-pro {
    margin: 8px 0 0;
    color: rgba(255,255,255,.56);
    line-height: 1.55;
    font-weight: 600;
}

.settings-card-pro,
.settings-preview-card-pro {
    padding: 18px;
}

.settings-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.settings-card-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 950;
}

.settings-card-head i {
    color: var(--admin-panel-color);
}

.settings-card-head small {
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.logo-pro-layout {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.logo-pro-preview,
.preview-logo-mini-pro {
    background: #050505;
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.logo-pro-preview {
    height: 128px;
    border-radius: 18px;
    padding: 10px;
}

.logo-pro-preview img,
.preview-logo-mini-pro img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-dropzone-pro {
    min-height: 128px;
    border: 1px dashed rgba(var(--admin-panel-rgb), .38) !important;
    background: linear-gradient(145deg, rgba(var(--admin-panel-rgb), .11), rgba(var(--admin-panel-rgb), .035));
    border-radius: 18px;
    display: grid !important;
    place-items: center;
    align-content: center;
    text-align: center;
    gap: 6px !important;
    padding: 18px !important;
    cursor: pointer;
}

.logo-dropzone-pro i {
    font-size: 25px;
    color: var(--admin-panel-color);
}

.logo-dropzone-pro strong {
    color: #fff;
    font-weight: 950;
}

.logo-dropzone-pro span {
    color: rgba(255,255,255,.54) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    line-height: 1.45;
}

.logo-dropzone-pro input {
    display: none !important;
}

.color-cards-grid-pro {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-colors-grid-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.color-tile-pro {
    display: grid !important;
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 16px;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.075);
}

.color-tile-pro > span {
    color: rgba(255,255,255,.9) !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 950 !important;
}

.color-tile-pro small {
    color: rgba(255,255,255,.48);
    line-height: 1.45;
    min-height: 34px;
}

.color-row-pro {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.color-row-pro .color-picker {
    width: 58px !important;
    height: 46px !important;
    padding: 5px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.06) !important;
}

.color-row-pro .color-text {
    height: 46px !important;
    max-width: 170px;
    background: #101010 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-weight: 900 !important;
    letter-spacing: .03em;
}

.settings-ai-actions-pro {
    margin: 14px 0 12px;
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.brand-swatches-pro {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(0,0,0,.15);
    border-radius: 14px;
}

.settings-form-grid-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
}

.settings-form-grid-pro.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.settings-form-grid-pro input {
    background: #101010 !important;
    border-color: rgba(255,255,255,.12) !important;
}

.settings-preview-card-pro {
    padding: 16px;
}

.preview-store-mini-pro {
    border-radius: 20px;
    padding: 14px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 18%, transparent), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        var(--secondary, #050505);
    border: 1px solid color-mix(in srgb, var(--primary) 23%, transparent);
}

.preview-store-head-pro {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.preview-logo-mini-pro {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    padding: 6px;
}

.preview-store-head-pro strong {
    display: block;
    color: #fff;
    font-weight: 950;
}

.preview-store-head-pro small {
    color: rgba(255,255,255,.58);
}

.preview-hero-mini-pro {
    position: relative;
    min-height: 120px;
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, #111), #0b0b0b);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    display: grid;
    align-content: end;
    gap: 4px;
}

.preview-hero-mini-pro span {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--primary);
    color: #111;
    padding: 7px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.preview-hero-mini-pro strong {
    color: #fff;
    font-weight: 950;
    font-size: 18px;
}

.preview-hero-mini-pro small {
    color: rgba(255,255,255,.6);
}

.preview-pills-pro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.preview-pills-pro span {
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    padding: 9px 12px;
    border-radius: 999px;
    font-weight: 900;
}

.preview-pills-pro button,
.admin-color-preview-pro button {
    border: 0;
    background: var(--primary);
    color: #111;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 950;
}

.admin-color-preview-pro {
    margin-top: 14px !important;
    border-radius: 16px !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    background: rgba(var(--admin-panel-rgb), .09) !important;
    border: 1px solid rgba(var(--admin-panel-rgb), .22) !important;
}

.admin-color-preview-pro span,
.admin-color-preview-pro strong {
    color: #fff;
}

.admin-color-preview-pro span i,
.admin-color-preview-pro strong {
    color: var(--admin-panel-color) !important;
}

.operational-card-pro .operational-status {
    margin-bottom: 12px;
}

@media (max-width: 1180px) {
    .settings-layout-pro {
        grid-template-columns: 1fr;
    }

    .settings-side-pro {
        position: relative;
        top: auto;
        grid-row: 1;
    }

    .settings-preview-card-pro {
        order: -1;
    }
}

@media (max-width: 760px) {
    .settings-section-banner,
    .settings-visual-header {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .settings-section-banner h3 {
        font-size: 21px;
    }

    .logo-pro-layout,
    .color-cards-grid-pro,
    .admin-colors-grid-pro,
    .settings-form-grid-pro,
    .settings-form-grid-pro.compact {
        grid-template-columns: 1fr !important;
    }

    .logo-pro-preview {
        width: 124px;
        height: 124px;
    }

    .color-row-pro .color-text {
        max-width: none;
    }

    .settings-card-pro,
    .settings-preview-card-pro {
        padding: 14px;
        border-radius: 16px;
    }

    .settings-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-card-head small {
        text-align: left;
    }
}

/* ===== v15: corrección sticky configuración + ajuste visual de logo ===== */
.topbar {
    z-index: 90 !important;
}

.settings-side-pro {
    top: 96px !important;
    z-index: 2 !important;
}

.settings-preview-card-pro,
.operational-card-pro {
    position: relative;
    z-index: 1;
}

.logo-pro-preview img,
.preview-logo-mini-pro img,
.brand-img img {
    object-fit: var(--logo-fit, contain) !important;
    transform: scale(var(--logo-zoom, 1)) !important;
    transform-origin: center center !important;
    transition: transform .18s ease, object-fit .18s ease !important;
}

.logo-adjust-pro {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.075);
    background: rgba(0,0,0,.15);
    border-radius: 16px;
}

.logo-adjust-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.075);
}

.logo-adjust-head strong {
    color: #fff;
    font-weight: 950;
}

.logo-adjust-head small {
    color: rgba(255,255,255,.5);
    font-weight: 650;
    line-height: 1.4;
    text-align: right;
}

.logo-adjust-grid-pro {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 12px;
    align-items: end;
}

.logo-adjust-grid-pro label {
    display: grid !important;
    gap: 8px !important;
}

.logo-adjust-grid-pro label span {
    color: rgba(255,255,255,.62) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

.logo-adjust-grid-pro label span b {
    float: right;
    color: var(--admin-panel-color);
}

.logo-adjust-grid-pro select,
.logo-adjust-grid-pro input[type="range"] {
    width: 100%;
}

.logo-adjust-grid-pro select {
    min-height: 44px;
    background: #101010 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
    font-weight: 850;
}

.logo-adjust-grid-pro input[type="range"] {
    accent-color: var(--admin-panel-color) !important;
}

.logo-adjust-grid-pro .btn-muted {
    min-height: 44px;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .settings-side-pro {
        top: auto !important;
        z-index: 1 !important;
    }
}

@media (max-width: 760px) {
    .logo-adjust-head {
        flex-direction: column;
    }

    .logo-adjust-head small {
        text-align: left;
    }

    .logo-adjust-grid-pro {
        grid-template-columns: 1fr;
    }

    .logo-adjust-grid-pro .btn-muted {
        width: 100%;
        justify-content: center;
    }
}

/* ===== v16: separación sticky configuración + guardado rápido en header ===== */
@media (min-width: 1181px) {
    .settings-side-pro {
        top: 118px !important;
    }
}

.settings-visual-editor .topbar-submit-btn,
body.has-unsaved-changes .topbar-submit-btn {
    white-space: nowrap;
}

/* ===== v17 dashboard operativo ===== */
.sidebar-status.is-open .pulse {
    background: #22c55e !important;
    box-shadow: 0 0 0 6px rgba(34,197,94,.14) !important;
}

.sidebar-status.is-closed .pulse {
    background: #ef4444 !important;
    box-shadow: 0 0 0 6px rgba(239,68,68,.14) !important;
}

.sidebar-status.is-closed strong,
.sidebar-status.is-closed .status-power {
    color: #ff8b8b !important;
}

.dashboard-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
}

.dashboard-hero-main,
.dashboard-hero-side,
.dashboard-section-block,
.dashboard-quick-actions {
    border: 1px solid rgba(255,255,255,.075);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0,0,0,.20);
}

.dashboard-hero-main {
    padding: 22px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dashboard-kicker,
.dashboard-section-title span {
    color: var(--admin-panel-color);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-hero-main h2 {
    margin: 8px 0 8px;
    color: #fff;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.05;
    letter-spacing: -.03em;
}

.dashboard-hero-main p {
    max-width: 560px;
    color: rgba(255,255,255,.62);
    font-weight: 650;
}

.dashboard-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.dashboard-hero-side {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.dashboard-hero-side .hero-status-dot {
    width: 15px;
    height: 15px;
    border-radius: 999px;
    flex: 0 0 15px;
}

.dashboard-hero-side.is-open .hero-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 8px rgba(34,197,94,.12);
}

.dashboard-hero-side.is-closed .hero-status-dot {
    background: #ef4444;
    box-shadow: 0 0 0 8px rgba(239,68,68,.12);
}

.dashboard-hero-side strong {
    display: block;
    color: #fff;
    font-size: 22px;
    font-weight: 950;
}

.dashboard-hero-side small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.56);
    line-height: 1.4;
    font-weight: 650;
}

.dashboard-section-block {
    padding: 16px;
    margin-bottom: 16px;
}

.dashboard-section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.dashboard-section-title h2 {
    margin-top: 4px;
    color: #fff;
    font-size: 21px;
    letter-spacing: -.02em;
}

.dashboard-section-title small {
    color: rgba(255,255,255,.48);
    font-weight: 750;
}

.dashboard-main-stats-pro,
.dashboard-month-grid {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.dashboard-main-stats-pro {
    grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.dashboard-month-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.dashboard-stat-primary {
    background: linear-gradient(145deg, rgba(var(--admin-panel-rgb), .16), rgba(255,255,255,.025)) !important;
    border-color: rgba(var(--admin-panel-rgb), .24) !important;
}

.stat-positive strong {
    color: #38d476 !important;
}

.stat-warning {
    border-color: rgba(250,204,21,.24) !important;
    background: linear-gradient(145deg, rgba(250,204,21,.09), rgba(255,255,255,.02)) !important;
}

.stat-warning strong {
    color: #facc15 !important;
}

.stat-danger {
    border-color: rgba(239,68,68,.24) !important;
    background: linear-gradient(145deg, rgba(239,68,68,.09), rgba(255,255,255,.02)) !important;
}

.stat-danger strong {
    color: #ff7b7b !important;
}

.dashboard-status-panel {
    margin-bottom: 16px;
}

.status-flow-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.status-flow-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon label" "icon number";
    gap: 3px 10px;
    align-items: center;
    min-height: 78px;
    padding: 14px;
    color: inherit;
    border-radius: 14px;
    background: rgba(255,255,255,.032);
    border: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
    transition: .18s ease;
}

.status-flow-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(var(--admin-panel-rgb), .45);
    opacity: .5;
}

.status-flow-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--admin-panel-rgb), .23);
    background: rgba(255,255,255,.045);
}

.status-flow-icon {
    grid-area: icon;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--admin-panel-color);
    background: rgba(var(--admin-panel-rgb), .10);
}

.status-flow-card span:not(.status-flow-icon) {
    grid-area: label;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    font-weight: 900;
}

.status-flow-card strong {
    grid-area: number;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
}

.status-cancelado::after { background: rgba(239,68,68,.85); }
.status-entregado::after { background: rgba(34,197,94,.85); }
.status-en-camino::after { background: rgba(59,130,246,.85); }
.status-preparando::after { background: rgba(250,204,21,.85); }

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    margin-bottom: 16px;
}

.dashboard-quick-actions a {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
    font-weight: 900;
    transition: .18s ease;
}

.dashboard-quick-actions a:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--admin-panel-rgb), .22);
    background: rgba(var(--admin-panel-rgb), .10);
}

.dashboard-quick-actions i {
    color: var(--admin-panel-color);
}

.dashboard-panels-pro {
    gap: 16px !important;
}

.dashboard-empty {
    min-height: 120px !important;
    padding: 28px 18px !important;
}

.dashboard-empty p {
    max-width: 380px;
    line-height: 1.5;
}

.order-list-item > div:first-child strong {
    font-size: 15px !important;
}

.top-product-item > div:first-child {
    position: relative;
    padding-bottom: 11px;
}

.top-product-item em {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.top-product-item em::before {
    content: "";
    display: block;
    width: var(--bar-width, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--admin-panel-color), rgba(var(--admin-panel-rgb), .45));
}

@media (max-width: 1280px) {
    .dashboard-main-stats-pro {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

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

    .status-flow-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .dashboard-hero-panel {
        grid-template-columns: 1fr;
    }

    .dashboard-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-hero-main {
        padding: 18px;
        min-height: auto;
    }

    .dashboard-hero-main h2 {
        font-size: 30px;
    }

    .dashboard-main-stats-pro,
    .dashboard-month-grid,
    .status-flow-board {
        grid-template-columns: 1fr !important;
    }

    .dashboard-section-title {
        align-items: start;
        flex-direction: column;
    }

    .dashboard-quick-actions {
        grid-template-columns: 1fr;
    }
}

/* ===== v18 ajustes finos solicitados ===== */
.global-open-store-modal[hidden] { display: none !important; }
.global-open-store-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)) !important;
    background: rgba(0,0,0,.66) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.global-open-store-modal .open-store-card {
    width: min(520px, 100%) !important;
    max-height: calc(100dvh - 40px) !important;
    overflow: auto !important;
    margin: 0 !important;
}

body.store-modal-open {
    overflow: hidden !important;
}

@media (max-width: 640px) {
    .global-open-store-modal {
        align-items: flex-start !important;
        padding: calc(var(--mobile-topbar-height, 74px) + 22px) 20px max(20px, env(safe-area-inset-bottom)) !important;
    }

    .global-open-store-modal .open-store-card {
        width: 100% !important;
        max-height: calc(100dvh - var(--mobile-topbar-height, 74px) - 44px) !important;
    }
}

/* Íconos de cabecera blancos; el estado se comunica por fondo. */
.admin-shell .topbar-actions .notification-trigger i,
.admin-shell .topbar-actions .quick-chip i,
.admin-shell .topbar-actions .ghost-action i,
.admin-shell .topbar-actions .store-toggle i {
    color: #fff !important;
    opacity: 1 !important;
}

.admin-shell .topbar-actions .quick-chip,
.admin-shell .topbar-actions .ghost-action,
.admin-shell .topbar-actions .notification-trigger {
    color: #fff !important;
}

.admin-shell .topbar-actions .store-toggle.open {
    background: linear-gradient(135deg, rgba(var(--admin-panel-rgb), .95), rgba(var(--admin-panel-rgb), .68)) !important;
    border-color: rgba(var(--admin-panel-rgb), .46) !important;
    box-shadow: 0 12px 28px rgba(var(--admin-panel-rgb), .18) !important;
}

.admin-shell .topbar-actions .store-toggle.closed {
    background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(127,29,29,.78)) !important;
    border-color: rgba(248,113,113,.42) !important;
    box-shadow: 0 12px 28px rgba(239,68,68,.16) !important;
}

/* Evita que sombras o degradados usen el color público de la tienda dentro del backoffice. */
.admin-shell .sidebar,
.admin-shell .sidebar::before,
.admin-shell .sidebar::after,
.admin-shell .admin-main::before,
.admin-shell .topbar::before,
.admin-shell .panel::before,
.admin-shell .editor-card::before,
.admin-shell .stat::before,
.admin-shell .dashboard-section-block::before {
    --primary: var(--admin-panel-color) !important;
    --primary-rgb: var(--admin-panel-rgb) !important;
    --primary-dark: var(--admin-panel-color-dark) !important;
}

.admin-shell .sidebar {
    box-shadow: 18px 0 55px rgba(var(--admin-panel-rgb), .045), 0 0 0 1px rgba(var(--admin-panel-rgb), .08) !important;
}

.admin-shell .sidebar nav a.active,
.admin-shell .sidebar nav a:hover,
.admin-shell .mobile-tabbar,
.admin-shell .mobile-tabbar a.active {
    box-shadow: 0 12px 30px rgba(var(--admin-panel-rgb), .10) !important;
}

.status-flow-card.status-entregado .status-flow-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

.status-flow-card.status-entregado .status-flow-icon i::before {
    content: "\f560"; /* check-double */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

@media (max-width: 640px) {
    .open-store-card .editor-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .open-store-card .editor-actions .btn-muted,
    .open-store-card .editor-actions .btn-solid {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ===== v19 dashboard pulido y alineación de paneles ===== */
.dashboard-store-alert {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(239,68,68,.22);
    background: linear-gradient(145deg, rgba(239,68,68,.12), rgba(255,255,255,.018));
    box-shadow: 0 18px 42px rgba(0,0,0,.20);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.dashboard-store-alert > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.dashboard-store-alert .alert-dot {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 8px rgba(239,68,68,.12);
}
.dashboard-store-alert strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 950;
}
.dashboard-store-alert small {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.58);
    font-weight: 650;
}
.dashboard-store-alert .btn-solid {
    white-space: nowrap;
}

.dashboard-quick-actions a.quick-primary {
    background: linear-gradient(135deg, rgba(var(--admin-panel-rgb), .22), rgba(var(--admin-panel-rgb), .10)) !important;
    border-color: rgba(var(--admin-panel-rgb), .30) !important;
    box-shadow: 0 12px 30px rgba(var(--admin-panel-rgb), .10) !important;
}
.dashboard-quick-actions a.quick-primary i {
    color: #fff !important;
}

.dashboard-panels-pro {
    align-items: stretch !important;
}
.dashboard-panels-pro > .dashboard-panel {
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}
.dashboard-panels-pro .panel-head {
    min-height: 74px;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}
.dashboard-panels-pro .dashboard-list {
    flex: 1 1 auto;
    margin-top: 0 !important;
}

.order-list-item-pro {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 14px 16px !important;
    transition: .18s ease;
}
.order-list-item-pro:hover {
    background: rgba(var(--admin-panel-rgb), .07) !important;
}
.order-main-info strong {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}
.order-main-info span {
    color: rgba(255,255,255,.50) !important;
    font-size: 12px !important;
    margin-top: 3px;
}
.order-side-info {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    text-align: right;
}
.order-side-info > strong {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}
.order-side-info .status {
    min-width: 112px;
    justify-content: center;
    background: rgba(var(--admin-panel-rgb), .10) !important;
    border: 1px solid rgba(var(--admin-panel-rgb), .18) !important;
}

.top-product-item-pro {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 16px !important;
    align-items: center !important;
}
.top-product-item-pro + .top-product-item-pro {
    border-top: 1px solid rgba(255,255,255,.065) !important;
}
.top-product-main strong {
    color: #fff !important;
    font-weight: 950 !important;
}
.top-product-main span {
    color: rgba(255,255,255,.58) !important;
    font-size: 12px !important;
}
.top-product-total {
    min-width: 120px;
    text-align: right;
}
.top-product-total strong {
    display: block;
    color: #fff !important;
    font-size: 15px !important;
}
.top-product-total span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.42) !important;
    font-size: 11px !important;
    font-weight: 800;
}
.top-product-item em::before {
    background: linear-gradient(90deg, var(--admin-panel-color), rgba(var(--admin-panel-rgb), .38)) !important;
}

.status-flow-card::after {
    height: 2px !important;
    opacity: .38 !important;
}
.status-flow-card.status-entregado .status-flow-icon,
.status-flow-card.status-cancelado .status-flow-icon,
.status-flow-card.status-en-camino .status-flow-icon,
.status-flow-card.status-preparando .status-flow-icon,
.status-flow-card.status-confirmado .status-flow-icon,
.status-flow-card.status-nuevo .status-flow-icon {
    width: 38px !important;
    height: 38px !important;
    opacity: 1 !important;
}

@media (max-width: 760px) {
    .dashboard-store-alert {
        align-items: stretch;
        flex-direction: column;
    }
    .dashboard-store-alert .btn-solid {
        width: 100%;
        justify-content: center;
    }
    .dashboard-panels-pro .panel-head {
        min-height: auto;
        align-items: flex-start !important;
    }
    .order-list-item-pro,
    .top-product-item-pro {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .order-side-info,
    .top-product-total {
        width: 100%;
        justify-content: space-between !important;
        text-align: left;
    }
    .top-product-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .top-product-total span {
        margin-top: 0;
    }
}

/* ===== v20 dashboard ajustes de estructura y color ===== */
.dashboard-hero-panel.dashboard-hero-panel-single {
    grid-template-columns: 1fr !important;
}

.dashboard-hero-panel.dashboard-hero-panel-single .dashboard-hero-main {
    min-height: 168px;
}

/* Pendientes debe seguir el color del panel, no amarillo fijo */
.stat-warning {
    border-color: rgba(var(--admin-panel-rgb), .24) !important;
    background: linear-gradient(145deg, rgba(var(--admin-panel-rgb), .11), rgba(255,255,255,.02)) !important;
}

.stat-warning strong,
.stat-warning span,
.stat-warning .stat-icon {
    color: var(--admin-panel-color) !important;
}

.stat-warning .stat-icon {
    background: rgba(var(--admin-panel-rgb), .12) !important;
}

/* Cada columna del cierre del dashboard mantiene su altura natural */
.dashboard-panels-pro {
    align-items: start !important;
}

.dashboard-panels-pro > .dashboard-panel {
    display: block !important;
    height: auto !important;
    align-self: start !important;
}

.dashboard-panels-pro .dashboard-list {
    flex: initial !important;
}

/* Evitar huecos raros cuando un panel tiene más contenido que el otro */
.dashboard-panel .dashboard-list.dashboard-orders-list,
.dashboard-panel .dashboard-list.top-products-list {
    min-height: auto !important;
}

@media (max-width: 980px) {
    .dashboard-hero-panel.dashboard-hero-panel-single .dashboard-hero-main {
        min-height: auto;
    }
}

/* ===== v21 Pedidos: centro operativo ===== */
.orders-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.orders-summary-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 118px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    box-shadow: 0 16px 42px rgba(0,0,0,.22);
}

.orders-summary-card small {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 6px;
}

.orders-summary-card strong {
    display: block;
    font-size: 26px;
    line-height: 1.05;
    margin-bottom: 7px;
}

.orders-summary-card p {
    margin: 0;
    color: rgba(255,255,255,.68);
    line-height: 1.45;
    font-size: 13px;
}

.orders-summary-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--admin-panel-color);
    background: rgba(var(--admin-panel-rgb), .14);
    border: 1px solid rgba(var(--admin-panel-rgb), .22);
    font-size: 18px;
    flex-shrink: 0;
}

.orders-summary-primary {
    color: inherit;
    background: linear-gradient(145deg, rgba(var(--admin-panel-rgb), .11), rgba(255,255,255,.02));
    border-color: rgba(var(--admin-panel-rgb), .22);
}

.orders-filter-panel-pro,
.orders-list-panel-pro,
.orders-clean-panel-pro {
    border-radius: 20px !important;
}

.orders-head-actions {
    justify-content: flex-end;
}

.orders-filter-pro {
    display: grid;
    grid-template-columns: minmax(280px, 1.9fr) repeat(2, minmax(170px, .7fr)) minmax(220px, .9fr) auto;
    gap: 12px;
    align-items: center;
}

.orders-search-wrap-pro {
    grid-column: auto;
    display: flex;
    align-items: center;
}

.orders-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.orders-clear-btn-pro {
    min-width: 126px;
    font-size: 14px !important;
}

.orders-unseen-toggle {
    min-height: 48px;
    padding: 0 10px !important;
    border: 1px dashed rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
}

.orders-quick-tabs {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.orders-quick-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.82);
    font-weight: 800;
}

.orders-quick-tabs a b {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: rgba(255,255,255,.07);
}

.orders-quick-tabs a.active,
.orders-quick-tabs a:hover {
    background: rgba(var(--admin-panel-rgb), .12);
    border-color: rgba(var(--admin-panel-rgb), .24);
    color: #fff;
}

.orders-quick-tabs a.active b,
.orders-quick-tabs a:hover b {
    background: rgba(var(--admin-panel-rgb), .18);
    color: #fff;
}

.orders-list-head-pro {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
}

.orders-list-actions-pro {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.empty-state-orders-pro {
    min-height: 270px;
    gap: 14px;
}

.empty-state-orders-pro .admin-btn {
    margin-top: 4px;
}

.orders-clean-details {
    width: 100%;
}

.orders-clean-details summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
}

.orders-clean-details summary::-webkit-details-marker { display: none; }

.orders-clean-details summary strong {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.orders-clean-details summary small {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.62);
}

.orders-clean-details summary > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    font-weight: 800;
}

.orders-clean-details[open] summary {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.orders-clean-content p {
    margin: 0 0 12px;
    color: rgba(255,255,255,.68);
}

@media (max-width: 1400px) {
    .orders-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .orders-filter-pro {
        grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(160px, .75fr)) minmax(210px, .95fr);
    }

    .orders-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 980px) {
    .orders-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .orders-filter-pro {
        grid-template-columns: 1fr 1fr;
    }

    .orders-search-wrap-pro,
    .orders-filter-actions {
        grid-column: 1 / -1;
    }

    .orders-list-head-pro {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .orders-overview-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .orders-summary-card {
        min-height: 0;
        padding: 14px;
        border-radius: 16px;
    }

    .orders-summary-card strong {
        font-size: 22px;
    }

    .orders-head-actions {
        justify-content: stretch;
    }

    .orders-filter-pro {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .orders-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .orders-clear-btn-pro,
    .orders-filter-actions .admin-btn {
        width: 100%;
        min-width: 0;
    }

    .orders-quick-tabs {
        gap: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
    }

    .orders-quick-tabs a {
        flex: 0 0 auto;
    }

    .orders-list-actions-pro {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .orders-clean-details summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .orders-clean-details summary > span {
        width: 100%;
        justify-content: center;
    }
}

/* ===== v22 Pedidos: filtros compactos y tarjetas operativas ===== */
.orders-unseen-switch {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    cursor: pointer;
    user-select: none;
}

.orders-unseen-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.orders-switch-slider {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    transition: .2s ease;
    flex-shrink: 0;
}

.orders-switch-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: .2s ease;
}

.orders-unseen-switch.is-active,
.orders-unseen-switch:has(input:checked) {
    border-color: rgba(var(--admin-panel-rgb), .24);
    background: rgba(var(--admin-panel-rgb), .08);
}

.orders-unseen-switch.is-active .orders-switch-slider,
.orders-unseen-switch:has(input:checked) .orders-switch-slider {
    background: rgba(var(--admin-panel-rgb), .45);
}

.orders-unseen-switch.is-active .orders-switch-slider::after,
.orders-unseen-switch:has(input:checked) .orders-switch-slider::after {
    left: 23px;
}

.orders-switch-text {
    font-weight: 800;
    color: rgba(255,255,255,.9);
}

.orders-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.order-card-pro {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
}

.order-card-unseen {
    border-color: rgba(var(--admin-panel-rgb), .2);
    box-shadow: 0 16px 42px rgba(var(--admin-panel-rgb), .08);
}

.order-card-select {
    padding-top: 4px;
}

.order-card-select input {
    width: 18px;
    height: 18px;
}

.order-card-main {
    min-width: 0;
}

.order-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.order-card-code-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.order-card-code-wrap strong {
    font-size: 22px;
    line-height: 1.1;
}

.order-card-top-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.order-card-time {
    font-size: 13px;
    color: rgba(255,255,255,.72);
    font-weight: 700;
}

.order-card-body {
    display: grid;
    grid-template-columns: 1.3fr .95fr;
    gap: 14px;
    align-items: stretch;
}

.order-card-customer {
    min-width: 0;
}

.order-card-customer h3 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.1;
}

.order-card-customer p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: rgba(255,255,255,.68);
}

.order-card-customer p span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.order-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.order-card-meta > div {
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
}

.order-card-meta > div > span:first-child {
    display: block;
    color: rgba(255,255,255,.52);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.order-card-meta strong {
    font-size: 24px;
    line-height: 1;
}

.status-pill {
    display: inline-flex !important;
    width: auto !important;
}

.badge-soft-action {
    text-decoration: none;
}

.order-card-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.order-card-action-primary {
    min-width: 156px;
}

.order-card-action-link {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.order-status-menu,
.order-more-menu {
    position: relative;
}

.order-status-menu summary,
.order-more-menu summary {
    list-style: none;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 800;
}

.order-more-menu summary {
    min-width: 44px;
    justify-content: center;
    padding: 0;
}

.order-status-menu summary::-webkit-details-marker,
.order-more-menu summary::-webkit-details-marker { display: none; }

.order-status-dropdown,
.order-more-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: #111;
    box-shadow: 0 24px 40px rgba(0,0,0,.32);
    display: grid;
    gap: 6px;
    z-index: 30;
}

.order-status-dropdown a,
.order-more-dropdown a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    color: #fff;
    font-weight: 700;
}

.order-status-dropdown a:hover,
.order-more-dropdown a:hover {
    background: rgba(var(--admin-panel-rgb), .12);
}

.order-more-dropdown .danger-link {
    color: #ff8f8f !important;
}

.orders-list-actions-pro .danger-btn[disabled] {
    opacity: .48;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 1180px) {
    .order-card-body {
        grid-template-columns: 1fr;
    }

    .order-card-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .order-card-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-card-top-right {
        justify-content: flex-start;
    }

    .order-card-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .orders-unseen-switch {
        width: 100%;
        justify-content: space-between;
    }

    .order-card-pro {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    .order-card-select {
        padding-top: 0;
    }

    .order-card-code-wrap strong {
        font-size: 18px;
    }

    .order-card-customer h3 {
        font-size: 20px;
    }

    .order-card-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .order-card-action-primary,
    .order-card-action-link,
    .order-status-menu summary,
    .order-more-menu summary {
        width: 100%;
        justify-content: center;
    }

    .order-status-dropdown,
    .order-more-dropdown {
        left: 0;
        right: 0;
        min-width: 0;
    }
}

/* ===== v23 Pedidos: refinamiento final ===== */
.orders-summary-primary.is-alert {
    border-color: rgba(var(--admin-panel-rgb), .34);
    background: linear-gradient(145deg, rgba(var(--admin-panel-rgb), .18), rgba(255,255,255,.03));
    box-shadow: 0 20px 48px rgba(var(--admin-panel-rgb), .12);
}

.orders-summary-primary.is-alert .orders-summary-icon {
    background: rgba(var(--admin-panel-rgb), .2);
    box-shadow: 0 0 0 8px rgba(var(--admin-panel-rgb), .08);
}

.orders-quick-tabs a {
    border-color: rgba(255,255,255,.10);
}

.orders-quick-tabs a b {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.92);
}

.order-card-body-refined {
    grid-template-columns: 1.2fr .85fr;
    align-items: start;
}

.order-card-meta-refined {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-card-extra-lines {
    margin-top: 10px;
    display: grid;
    gap: 7px;
    color: rgba(255,255,255,.66);
    font-size: 13px;
}

.order-card-extra-lines span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.order-seen-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    color: rgba(255,255,255,.66);
    font-size: 12px;
    font-weight: 800;
}

.order-mini-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--admin-panel-rgb), .08);
    border: 1px solid rgba(var(--admin-panel-rgb), .16);
    color: var(--admin-panel-color);
    font-size: 12px;
    font-weight: 800;
}

.order-card-top-right {
    row-gap: 8px;
}

.order-card-actions-refined {
    align-items: center;
}

.order-card-action-next {
    background: rgba(var(--admin-panel-rgb), .12) !important;
    border-color: rgba(var(--admin-panel-rgb), .25) !important;
    color: #fff !important;
}

.order-card-action-next:hover {
    filter: brightness(1.06);
}

.order-more-dropdown,
.order-status-dropdown {
    min-width: 220px;
}

.orders-list-actions-pro .danger-btn[disabled] {
    opacity: .28;
    filter: grayscale(.2);
    border-color: rgba(255,255,255,.06) !important;
    background: rgba(255,255,255,.03) !important;
    color: rgba(255,255,255,.35) !important;
}

@media (max-width: 1180px) {
    .order-card-body-refined {
        grid-template-columns: 1fr;
    }

    .order-card-meta-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .order-card-meta-refined {
        grid-template-columns: 1fr;
    }

    .order-mini-action,
    .order-seen-badge {
        width: auto;
        max-width: 100%;
    }
}

/* ===== v24 Pedidos: pulido visual final ===== */
.admin-main > .orders-overview-grid:first-of-type {
    margin-top: 34px !important;
    padding-top: 4px;
}

.topbar {
    margin-bottom: 28px !important;
}

.orders-overview-grid {
    scroll-margin-top: 110px;
}

.orders-filter-panel-pro {
    padding: 18px 18px 16px;
}

.orders-filter-panel-pro .panel-head {
    margin-bottom: 14px;
}

.orders-filter-pro {
    gap: 10px;
}

.orders-quick-tabs {
    margin-top: 12px;
}

.order-card-pro {
    overflow: visible;
}

.order-card-main {
    min-width: 0;
}

.order-card-body-refined {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 18px;
}

.order-card-meta-refined {
    justify-self: end;
    width: 100%;
    max-width: 380px;
}

.order-card-meta-refined > div {
    min-height: 72px;
}

.status-pill {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.status-pill::before {
    width: 8px;
    height: 8px;
}

.status-pill-confirmado {
    background: rgba(var(--admin-panel-rgb), .14);
    color: var(--admin-panel-color);
    border-color: rgba(var(--admin-panel-rgb), .28);
}

.status-pill-preparando {
    background: rgba(250, 204, 21, .12);
    color: #facc15;
    border-color: rgba(250, 204, 21, .24);
}

.status-pill-en-camino {
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, .24);
}

.status-pill-entregado {
    background: rgba(34, 197, 94, .12);
    color: #4ade80;
    border-color: rgba(34, 197, 94, .24);
}

.status-pill-cancelado {
    background: rgba(239, 68, 68, .12);
    color: #f87171;
    border-color: rgba(239, 68, 68, .24);
}

.order-card-actions-refined {
    margin-top: 16px;
}

.order-card-action-next {
    order: 1;
    min-width: 190px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--admin-panel-rgb), .96), rgba(var(--admin-panel-rgb), .72)) !important;
    border-color: rgba(var(--admin-panel-rgb), .34) !important;
    box-shadow: 0 16px 32px rgba(var(--admin-panel-rgb), .18);
}

.order-card-action-primary {
    order: 2;
    min-width: 150px;
    min-height: 46px;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #fff !important;
}

.order-card-action-link {
    order: 3;
}

.order-status-menu {
    order: 4;
}

.order-more-menu {
    order: 5;
}

.order-status-menu summary,
.order-more-menu summary,
.order-card-action-link {
    min-height: 46px;
}

.order-status-dropdown,
.order-more-dropdown {
    top: calc(100% + 12px);
    min-width: 230px;
}

.order-status-menu[open],
.order-more-menu[open] {
    z-index: 40;
}

.orders-day-group-pro {
    margin-bottom: 18px;
}

.orders-list-panel-pro {
    padding-bottom: 22px;
}

@media (max-width: 1180px) {
    .order-card-body-refined {
        grid-template-columns: 1fr;
    }

    .order-card-meta-refined {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 720px) {
    .admin-main > .orders-overview-grid:first-of-type {
        margin-top: 18px !important;
        padding-top: 0;
    }

    .orders-filter-panel-pro {
        padding: 14px;
    }

    .order-card-action-next,
    .order-card-action-primary {
        min-width: 0;
        width: 100%;
    }

    .order-card-actions-refined {
        row-gap: 10px;
    }
}

/* ===== v25 Pedidos: acciones avanzadas siempre visibles ===== */
.orders-clean-panel-static {
    padding: 18px 18px 16px;
}

.orders-clean-static-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.orders-clean-static-head strong {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    line-height: 1.1;
}

.orders-clean-static-head small {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.64);
    font-size: 13px;
}

.orders-clean-static-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.86);
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.orders-clean-content-static {
    display: grid;
    gap: 12px;
}

.orders-clean-content-static p {
    margin: 0;
    color: rgba(255,255,255,.72);
}

.orders-clean-form {
    display: grid;
    grid-template-columns: minmax(240px, 420px) auto;
    gap: 12px;
    align-items: center;
}

.orders-clean-form select {
    min-height: 46px;
}

.orders-clean-form .danger-btn {
    min-height: 46px;
    justify-self: start;
}

@media (max-width: 820px) {
    .orders-clean-static-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .orders-clean-static-badge {
        width: 100%;
        justify-content: center;
    }

    .orders-clean-form {
        grid-template-columns: 1fr;
    }

    .orders-clean-form .danger-btn {
        justify-self: stretch;
        width: 100%;
    }
}

/* ===== v26 Mobile: cabecera y navegación inferior fijas de verdad ===== */
@media (max-width: 720px) {
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .admin-main {
        padding-top: calc(74px + env(safe-area-inset-top, 0px)) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    .topbar,
    .topbar.is-stuck {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: calc(62px + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(62px + env(safe-area-inset-top, 0px)) !important;
        z-index: 5000 !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px !important;
        background: rgba(7,7,7,.94) !important;
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
        backdrop-filter: blur(16px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
        transform: none !important;
        overflow: visible !important;
        isolation: isolate !important;
    }

    .topbar::before,
    .topbar::after {
        display: none !important;
        content: none !important;
    }

    .topbar-title,
    .topbar .topbar-title,
    .topbar .eyebrow,
    .topbar h1,
    .topbar p {
        display: none !important;
    }

    .menu-btn {
        display: grid !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        flex: 0 0 42px !important;
    }

    .topbar-actions {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .topbar-actions .notification-wrapper {
        position: static !important;
        flex: 0 0 auto !important;
    }

    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .user-card {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        flex: 0 0 42px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        display: grid !important;
        place-items: center !important;
        transform: none !important;
    }

    .topbar-actions .user-card {
        margin-left: 0 !important;
    }

    .topbar-actions .user-card .user-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 10px !important;
    }

    .topbar-actions .user-card div,
    .topbar-actions .quick-chip,
    .topbar-actions .desktop-only,
    .topbar-sticky-submit {
        display: none !important;
    }

    .notification-dropdown {
        position: fixed !important;
        top: calc(68px + env(safe-area-inset-top, 0px)) !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 6000 !important;
    }

    .mobile-tabbar {
        display: grid !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        height: 60px !important;
        min-height: 60px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 18px !important;
        z-index: 5001 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0,0,0) !important;
        background: rgba(10,10,10,.94) !important;
        border: 1px solid rgba(var(--admin-panel-rgb), .32) !important;
        box-shadow: 0 14px 38px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.035) inset !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
        will-change: auto !important;
    }

    .mobile-tabbar a {
        display: grid !important;
        place-items: center !important;
        gap: 2px !important;
        min-width: 0 !important;
        border-radius: 14px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        color: rgba(255,255,255,.86) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .mobile-tabbar a i {
        font-size: 15px !important;
        color: var(--admin-panel-color) !important;
    }

    .mobile-tabbar a.active {
        background: rgba(var(--admin-panel-rgb), .28) !important;
        color: #fff !important;
    }

    .mobile-tabbar a.active i {
        color: #fff !important;
    }
}

@media (max-width: 390px) {
    .topbar,
    .topbar.is-stuck {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .topbar-actions {
        gap: 6px !important;
    }

    .menu-btn,
    .topbar-actions .icon-action,
    .topbar-actions .ghost-action,
    .topbar-actions .user-card {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
    }
}

/* ===== v27 FIX real: Pedidos mobile header/tabbar siempre visibles ===== */
@media (max-width: 720px) {
    body.admin-orders-page {
        --orders-mobile-topbar: 64px;
        --orders-mobile-tabbar: 72px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.admin-orders-page .admin-main {
        padding-top: calc(var(--orders-mobile-topbar) + 12px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(var(--orders-mobile-tabbar) + 34px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: visible !important;
        transform: none !important;
        contain: none !important;
    }

    body.admin-orders-page .topbar,
    body.admin-orders-page .topbar.is-stuck {
        position: fixed !important;
        inset-inline: 0 !important;
        top: var(--orders-fixed-top, 0px) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(var(--orders-mobile-topbar) + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(var(--orders-mobile-topbar) + env(safe-area-inset-top, 0px)) !important;
        z-index: 99990 !important;
        margin: 0 !important;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: center !important;
        background: rgba(7, 7, 7, .96) !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 0 16px 34px rgba(0,0,0,.40) !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
        transform: translate3d(0,0,0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.admin-orders-page .topbar::before,
    body.admin-orders-page .topbar::after {
        display: none !important;
        content: none !important;
    }

    body.admin-orders-page .topbar-title,
    body.admin-orders-page .topbar .eyebrow,
    body.admin-orders-page .topbar h1,
    body.admin-orders-page .topbar p {
        display: none !important;
    }

    body.admin-orders-page .menu-btn {
        display: grid !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        place-items: center !important;
    }

    body.admin-orders-page .topbar-actions {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.admin-orders-page .topbar-actions .icon-action,
    body.admin-orders-page .topbar-actions .ghost-action,
    body.admin-orders-page .topbar-actions .user-card {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        flex: 0 0 42px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 13px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.admin-orders-page .topbar-actions .user-card .user-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 10px !important;
    }

    body.admin-orders-page .topbar-actions .user-card div,
    body.admin-orders-page .topbar-actions .quick-chip,
    body.admin-orders-page .topbar-actions .desktop-only,
    body.admin-orders-page .topbar-sticky-submit {
        display: none !important;
    }

    body.admin-orders-page .orders-overview-grid:first-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.admin-orders-page .mobile-tabbar {
        display: grid !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: var(--orders-fixed-bottom, calc(8px + env(safe-area-inset-bottom, 0px))) !important;
        height: 60px !important;
        min-height: 60px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 5px !important;
        border-radius: 18px !important;
        z-index: 99991 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0,0,0) !important;
        background: rgba(10,10,10,.96) !important;
        border: 1px solid rgba(var(--admin-panel-rgb), .34) !important;
        box-shadow: 0 14px 38px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.035) inset !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    }

    body.admin-orders-page .mobile-tabbar a {
        display: grid !important;
        place-items: center !important;
        gap: 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

@media (max-width: 390px) {
    body.admin-orders-page .topbar,
    body.admin-orders-page .topbar.is-stuck {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.admin-orders-page .topbar-actions {
        gap: 6px !important;
    }

    body.admin-orders-page .menu-btn,
    body.admin-orders-page .topbar-actions .icon-action,
    body.admin-orders-page .topbar-actions .ghost-action,
    body.admin-orders-page .topbar-actions .user-card {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
    }
}

/* ===== v28 FIX REAL Pedidos mobile: sin rotura de cabecera/tabbar ===== */
@media (max-width: 720px) {
    html,
    body.admin-orders-page,
    body.admin-orders-page .admin-shell,
    body.admin-orders-page .admin-main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.admin-orders-page .admin-shell {
        display: block !important;
        min-width: 0 !important;
    }

    body.admin-orders-page .admin-main {
        margin: 0 !important;
        padding: calc(66px + env(safe-area-inset-top, 0px)) 10px calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        contain: none !important;
    }

    body.admin-orders-page .topbar,
    body.admin-orders-page .topbar.is-stuck {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: calc(62px + env(safe-area-inset-top, 0px)) !important;
        height: calc(62px + env(safe-area-inset-top, 0px)) !important;
        margin: 0 !important;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        z-index: 99990 !important;
        background: rgba(7,7,7,.97) !important;
        border-bottom: 1px solid rgba(255,255,255,.075) !important;
        box-shadow: 0 14px 30px rgba(0,0,0,.44) !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
        transform: translate3d(0,0,0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.admin-orders-page .topbar::before,
    body.admin-orders-page .topbar::after,
    body.admin-orders-page .topbar-title,
    body.admin-orders-page .topbar .eyebrow,
    body.admin-orders-page .topbar h1,
    body.admin-orders-page .topbar p {
        display: none !important;
        content: none !important;
    }

    body.admin-orders-page .menu-btn {
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        flex: 0 0 42px !important;
        border-radius: 13px !important;
    }

    body.admin-orders-page .topbar-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 62px) !important;
        width: auto !important;
        gap: 7px !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
    }

    body.admin-orders-page .topbar-actions .icon-action,
    body.admin-orders-page .topbar-actions .ghost-action,
    body.admin-orders-page .topbar-actions .user-card {
        display: grid !important;
        place-items: center !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex: 0 0 40px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.admin-orders-page .topbar-actions .user-card .user-avatar {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        border-radius: 10px !important;
    }

    body.admin-orders-page .topbar-actions .user-card div,
    body.admin-orders-page .topbar-actions .quick-chip,
    body.admin-orders-page .topbar-actions .desktop-only,
    body.admin-orders-page .topbar-sticky-submit {
        display: none !important;
    }

    body.admin-orders-page .orders-overview-grid,
    body.admin-orders-page .orders-filter-panel,
    body.admin-orders-page .orders-list-panel,
    body.admin-orders-page .orders-clean-panel,
    body.admin-orders-page .panel,
    body.admin-orders-page form,
    body.admin-orders-page .orders-cards-grid,
    body.admin-orders-page .order-card-pro {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
    }

    body.admin-orders-page .orders-overview-grid:first-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 10px !important;
    }

    body.admin-orders-page .orders-summary-card {
        padding: 14px 14px !important;
        min-height: 104px !important;
        border-radius: 16px !important;
        gap: 12px !important;
    }

    body.admin-orders-page .orders-summary-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    body.admin-orders-page .orders-summary-card strong {
        font-size: 22px !important;
    }

    body.admin-orders-page .orders-summary-card p {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    body.admin-orders-page .orders-filter-panel-pro {
        padding: 14px !important;
        border-radius: 17px !important;
    }

    body.admin-orders-page .orders-filter-panel-pro .panel-head {
        gap: 10px !important;
    }

    body.admin-orders-page .orders-filter-pro {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.admin-orders-page .orders-search-wrap-pro,
    body.admin-orders-page .orders-filter-pro select,
    body.admin-orders-page .orders-filter-pro input[type="date"],
    body.admin-orders-page .orders-unseen-switch,
    body.admin-orders-page .orders-filter-actions,
    body.admin-orders-page .orders-filter-actions .admin-btn,
    body.admin-orders-page .orders-clear-btn-pro {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.admin-orders-page .orders-quick-tabs {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.admin-orders-page .orders-quick-tabs a {
        flex: 0 0 auto !important;
    }

    body.admin-orders-page .mobile-tabbar {
        display: grid !important;
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 4px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 3px !important;
        border-radius: 17px !important;
        z-index: 99991 !important;
        background: rgba(10,10,10,.97) !important;
        border: 1px solid rgba(var(--admin-panel-rgb), .34) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.035) inset !important;
        transform: translate3d(0,0,0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.admin-orders-page .mobile-tabbar a {
        min-width: 0 !important;
        font-size: 10px !important;
        border-radius: 13px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (max-width: 390px) {
    body.admin-orders-page .admin-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.admin-orders-page .topbar,
    body.admin-orders-page .topbar.is-stuck {
        padding-left: 8px !important;
        padding-right: 8px !important;
        gap: 6px !important;
    }

    body.admin-orders-page .menu-btn,
    body.admin-orders-page .topbar-actions .icon-action,
    body.admin-orders-page .topbar-actions .ghost-action,
    body.admin-orders-page .topbar-actions .user-card {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        flex-basis: 38px !important;
    }

    body.admin-orders-page .topbar-actions {
        gap: 5px !important;
        max-width: calc(100vw - 52px) !important;
    }
}

/* ===== v29 FIX DEFINITIVO Pedidos mobile: sin desplazamiento lateral ===== */
@media (max-width: 720px) {
    html,
    body.admin-orders-page {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    body.admin-orders-page .admin-shell,
    body.admin-orders-page .admin-main {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: clip !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.admin-orders-page .admin-main {
        padding: calc(68px + env(safe-area-inset-top, 0px)) 10px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.admin-orders-page .topbar,
    body.admin-orders-page .topbar.is-stuck {
        position: fixed !important;
        display: block !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: calc(62px + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(62px + env(safe-area-inset-top, 0px)) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        z-index: 99990 !important;
        background: rgba(7,7,7,.98) !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.42) !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.admin-orders-page .topbar::before,
    body.admin-orders-page .topbar::after,
    body.admin-orders-page .topbar-title,
    body.admin-orders-page .topbar .eyebrow,
    body.admin-orders-page .topbar h1,
    body.admin-orders-page .topbar p,
    body.admin-orders-page .topbar-sticky-submit,
    body.admin-orders-page .topbar-actions .quick-chip,
    body.admin-orders-page .topbar-actions .desktop-only,
    body.admin-orders-page .topbar-actions .user-card div {
        display: none !important;
        content: none !important;
    }

    body.admin-orders-page .menu-btn {
        position: absolute !important;
        left: 10px !important;
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 13px !important;
        z-index: 2 !important;
    }

    body.admin-orders-page .topbar-actions {
        position: absolute !important;
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        right: 10px !important;
        left: auto !important;
        width: auto !important;
        max-width: calc(100vw - 72px) !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        z-index: 2 !important;
    }

    body.admin-orders-page .topbar-actions .notification-wrapper,
    body.admin-orders-page .topbar-actions .icon-action,
    body.admin-orders-page .topbar-actions .notification-trigger,
    body.admin-orders-page .topbar-actions .ghost-action,
    body.admin-orders-page .topbar-actions .user-card {
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex: 0 0 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 13px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.admin-orders-page .topbar-actions .user-card .user-avatar {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        border-radius: 10px !important;
    }

    body.admin-orders-page .notification-dropdown {
        position: fixed !important;
        top: calc(62px + env(safe-area-inset-top, 0px) + 8px) !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }

    body.admin-orders-page .admin-main > *,
    body.admin-orders-page .orders-overview-grid,
    body.admin-orders-page .orders-filter-panel,
    body.admin-orders-page .orders-list-panel,
    body.admin-orders-page .orders-clean-panel,
    body.admin-orders-page .orders-cards-grid,
    body.admin-orders-page .order-card-pro,
    body.admin-orders-page form {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    body.admin-orders-page .orders-overview-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.admin-orders-page .orders-summary-card {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 12px !important;
        padding: 14px !important;
        min-height: 100px !important;
        overflow: hidden !important;
    }

    body.admin-orders-page .orders-summary-icon {
        margin: 0 !important;
        transform: none !important;
        position: static !important;
    }

    body.admin-orders-page .orders-filter-panel-pro .panel-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body.admin-orders-page .orders-filter-panel-pro .orders-head-actions {
        width: 100% !important;
    }

    body.admin-orders-page .orders-filter-panel-pro .orders-head-actions .badge-soft {
        width: 100% !important;
        justify-content: center !important;
    }

    body.admin-orders-page .orders-filter-pro,
    body.admin-orders-page .orders-filter-actions {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.admin-orders-page .mobile-tabbar {
        display: grid !important;
        position: fixed !important;
        left: 10px !important;
        right: auto !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 4px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 3px !important;
        border-radius: 17px !important;
        z-index: 99991 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    body.admin-orders-page .mobile-tabbar a {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

@media (max-width: 390px) {
    body.admin-orders-page .admin-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.admin-orders-page .admin-main > *,
    body.admin-orders-page .orders-overview-grid,
    body.admin-orders-page .orders-filter-panel,
    body.admin-orders-page .orders-list-panel,
    body.admin-orders-page .orders-clean-panel,
    body.admin-orders-page .orders-cards-grid,
    body.admin-orders-page .order-card-pro,
    body.admin-orders-page form {
        max-width: calc(100vw - 16px) !important;
    }

    body.admin-orders-page .menu-btn,
    body.admin-orders-page .topbar-actions .notification-wrapper,
    body.admin-orders-page .topbar-actions .icon-action,
    body.admin-orders-page .topbar-actions .notification-trigger,
    body.admin-orders-page .topbar-actions .ghost-action,
    body.admin-orders-page .topbar-actions .user-card {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        flex-basis: 38px !important;
    }

    body.admin-orders-page .menu-btn {
        left: 8px !important;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    }

    body.admin-orders-page .topbar-actions {
        right: 8px !important;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        gap: 6px !important;
        max-width: calc(100vw - 60px) !important;
    }

    body.admin-orders-page .mobile-tabbar {
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}


/* ===== v30 Pedidos: cabecera estable + día adaptado + meta vertical ===== */
.orders-day-group-pro .day-title {
    background: linear-gradient(135deg, rgba(var(--admin-panel-rgb), .14), rgba(255,255,255,.04)) !important;
    border: 1px solid rgba(var(--admin-panel-rgb), .24) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

.orders-day-group-pro .day-title span {
    color: var(--admin-panel-color) !important;
}

.orders-day-group-pro .day-title small {
    color: rgba(255,255,255,.74) !important;
}

.order-card-body-refined {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 240px) !important;
    gap: 18px !important;
}

.order-card-meta-refined {
    grid-template-columns: 1fr !important;
    justify-self: end !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 240px !important;
    gap: 12px !important;
}

.order-card-meta-refined > div {
    min-height: 76px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

@media (max-width: 1180px) {
    .order-card-body-refined {
        grid-template-columns: 1fr !important;
    }

    .order-card-meta-refined {
        justify-self: stretch !important;
        max-width: none !important;
    }
}

@media (max-width: 720px) {
    body.admin-orders-page .topbar,
    body.admin-orders-page .topbar.is-stuck {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        transform: translate3d(0,0,0) !important;
    }

    body.admin-orders-page .topbar-actions {
        right: 8px !important;
    }

    body.admin-orders-page .mobile-tabbar {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }

    .orders-day-group-pro .day-title {
        background: linear-gradient(135deg, rgba(var(--admin-panel-rgb), .18), rgba(255,255,255,.05)) !important;
    }

    .order-card-meta-refined {
        max-width: 100% !important;
    }
}

/* ===== v31 Mobile sidebar: menú por encima, sin cabecera/tabbar superpuestas ===== */
@media (max-width: 980px) {
    body.sidebar-open .topbar,
    body.sidebar-open .mobile-tabbar,
    body.admin-orders-page.sidebar-open .topbar,
    body.admin-orders-page.sidebar-open .mobile-tabbar {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0,0,0) !important;
    }

    body.sidebar-open .sidebar {
        z-index: 100004 !important;
    }

    body.sidebar-open .admin-overlay {
        z-index: 100003 !important;
    }

    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .sidebar-top,
    .sidebar-status {
        flex: 0 0 auto !important;
    }

    .sidebar nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 12px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar-footer {
        flex: 0 0 auto !important;
        margin-top: auto !important;
        padding-top: 14px !important;
        padding-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
        background: linear-gradient(180deg, rgba(8,8,8,0), #080808 18%) !important;
    }
}

@media (max-width: 980px) and (max-height: 680px) {
    .sidebar {
        gap: 10px !important;
        padding-top: 14px !important;
        padding-bottom: 12px !important;
    }

    .sidebar nav a,
    .store-link,
    .logout-link {
        min-height: 40px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    .sidebar-footer {
        gap: 8px !important;
    }
}

/* ===== v32 Sidebar mobile: ancho más equilibrado + footer limpio ===== */
@media (max-width: 980px) {
    .sidebar {
        width: clamp(248px, 74vw, 300px) !important;
        max-width: 300px !important;
    }

    .sidebar nav a,
    .store-link,
    .logout-link {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    .sidebar-footer {
        background: transparent !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
        padding-top: 12px !important;
        gap: 10px !important;
    }

    .store-link,
    .logout-link {
        background: transparent !important;
        box-shadow: none !important;
    }

    .store-link:hover {
        background: rgba(var(--admin-panel-rgb), .08) !important;
        border-color: rgba(var(--admin-panel-rgb), .20) !important;
    }

    .logout-link:hover {
        background: rgba(239, 68, 68, .08) !important;
        border-color: rgba(239, 68, 68, .18) !important;
    }
}

/* ===== v33 Pedidos: escala premium desktop + filtros más claros + limpieza integrada ===== */
@media (min-width: 1181px) {
    .orders-overview-grid {
        gap: 18px !important;
        margin-bottom: 20px !important;
    }

    .orders-summary-card {
        min-height: 132px !important;
        padding: 22px !important;
        border-radius: 22px !important;
    }

    .orders-summary-card strong {
        font-size: 30px !important;
    }

    .orders-summary-card p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    .orders-summary-icon {
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        font-size: 19px !important;
    }

    .orders-filter-panel-pro,
    .orders-list-panel-pro,
    .orders-clean-panel-static {
        padding-left: 22px !important;
        padding-right: 22px !important;
        border-radius: 22px !important;
    }

    .orders-filter-panel-pro {
        padding-top: 22px !important;
        padding-bottom: 18px !important;
    }

    .orders-filter-panel-pro .panel-head {
        margin-bottom: 16px !important;
        padding-bottom: 14px !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
    }

    .orders-filter-pro {
        grid-template-columns: minmax(360px, 2fr) minmax(210px, .8fr) minmax(180px, .62fr) minmax(220px, .95fr) auto !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .orders-filter-pro select,
    .orders-filter-pro input[type="date"],
    .orders-filter-pro .orders-search-wrap-pro,
    .orders-unseen-switch,
    .orders-filter-actions .orders-clear-btn-pro,
    .orders-filter-actions .admin-btn {
        min-height: 50px !important;
    }

    .orders-search-wrap-pro input {
        font-size: 15px !important;
    }

    .orders-filter-actions {
        justify-content: flex-end !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .orders-quick-tabs {
        margin-top: 16px !important;
        gap: 12px !important;
    }

    .orders-quick-tabs a {
        min-height: 44px !important;
        padding: 0 14px 0 16px !important;
        font-size: 14px !important;
    }

    .orders-list-panel-pro {
        padding-top: 20px !important;
        padding-bottom: 24px !important;
    }

    .orders-list-head-pro {
        padding-bottom: 14px !important;
        margin-bottom: 6px !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
    }

    .order-card-pro {
        padding: 20px !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 42px rgba(0,0,0,.20) !important;
    }

    .order-card-top {
        margin-bottom: 16px !important;
    }

    .order-card-code-wrap strong {
        font-size: 18px !important;
        letter-spacing: -.015em !important;
    }

    .order-card-customer h3 {
        margin-bottom: 10px !important;
        font-size: 18px !important;
        line-height: 1.12 !important;
    }

    .order-card-customer p,
    .order-card-extra-lines {
        font-size: 14px !important;
    }

    .order-card-extra-lines {
        margin-top: 14px !important;
        gap: 8px !important;
    }

    .order-card-body-refined {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 280px) !important;
        gap: 20px !important;
        align-items: start !important;
    }

    .order-card-meta-refined {
        max-width: 280px !important;
        gap: 14px !important;
    }

    .order-card-meta-refined > div {
        min-height: 86px !important;
        padding: 14px 15px !important;
        border-radius: 16px !important;
    }

    .order-card-meta strong {
        font-size: 18px !important;
    }

    .order-card-actions-refined {
        margin-top: 18px !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(255,255,255,.06) !important;
        gap: 12px !important;
    }

    .order-card-action-next,
    .order-card-action-primary,
    .order-card-action-link,
    .order-status-menu summary,
    .order-more-menu summary {
        min-height: 48px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
    }

    .order-card-action-next {
        min-width: 210px !important;
    }

    .orders-clean-panel-static {
        margin-top: 18px !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        background: linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.012)) !important;
    }

    .orders-clean-static-head {
        align-items: center !important;
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }

    .orders-clean-static-head strong {
        font-size: 17px !important;
    }

    .orders-clean-content-static {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 16px !important;
        align-items: end !important;
    }

    .orders-clean-content-static p {
        max-width: 760px !important;
        margin: 0 !important;
    }

    .orders-clean-form {
        grid-template-columns: minmax(260px, 340px) auto !important;
        gap: 12px !important;
        justify-content: end !important;
    }
}

@media (max-width: 1180px) {
    .orders-clean-content-static {
        grid-template-columns: 1fr !important;
    }

    .orders-clean-content-static p {
        margin-bottom: 2px !important;
    }
}

/* ===== v34 Pedidos: cards estilo mobile en desktop, hasta 5 por fila ===== */
@media (min-width: 981px) {
    .orders-cards-grid {
        display: grid !important;
        gap: 16px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .order-card-pro {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 18px !important;
        min-height: 100% !important;
    }

    .order-card-select {
        padding-top: 0 !important;
    }

    .order-card-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        min-width: 0;
    }

    .order-card-top {
        margin-bottom: 0 !important;
        align-items: flex-start !important;
    }

    .order-card-code-wrap strong {
        font-size: 18px !important;
    }

    .order-card-body-refined {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .order-card-customer h3 {
        font-size: 16px !important;
        line-height: 1.15 !important;
        margin-bottom: 10px !important;
    }

    .order-card-customer p,
    .order-card-extra-lines {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .order-card-meta-refined {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        gap: 12px !important;
    }

    .order-card-meta-refined > div {
        min-height: 74px !important;
    }

    .order-card-actions-refined {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 2px !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    .order-card-action-next,
    .order-card-action-primary,
    .order-card-action-link,
    .order-status-menu summary,
    .order-more-menu summary {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    .order-status-menu,
    .order-more-menu {
        width: 100% !important;
    }

    .order-status-dropdown,
    .order-more-dropdown {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (min-width: 981px) and (max-width: 1279px) {
    .orders-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px) and (max-width: 1499px) {
    .orders-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1500px) and (max-width: 1799px) {
    .orders-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1800px) {
    .orders-cards-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ===== v35 Pedidos modernizado: centro operativo más actual ===== */
body.admin-orders-page .orders-overview-grid {
    margin-bottom: 18px !important;
}

body.admin-orders-page .orders-summary-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
}

body.admin-orders-page .orders-summary-card::after {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--admin-panel-rgb), .7), rgba(var(--admin-panel-rgb), .08));
}

body.admin-orders-page .orders-filter-panel-pro {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)) !important;
}

body.admin-orders-page .orders-filter-panel-pro .panel-head {
    margin-bottom: 14px !important;
}

body.admin-orders-page .orders-filter-panel-pro .panel-head h2,
body.admin-orders-page .orders-list-head-pro h2 {
    font-size: clamp(28px, 2vw, 34px);
    letter-spacing: -.03em;
}

body.admin-orders-page .orders-filter-panel-pro .panel-head p,
body.admin-orders-page .orders-list-head-pro p {
    max-width: 780px;
}

body.admin-orders-page .orders-quick-tabs a {
    background: rgba(255,255,255,.025) !important;
    border-color: rgba(255,255,255,.08) !important;
}

body.admin-orders-page .orders-list-panel-pro {
    background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012)) !important;
}

body.admin-orders-page .orders-list-head-pro {
    align-items: end !important;
}

body.admin-orders-page .orders-list-head-pro .row-actions {
    align-items: center !important;
}

body.admin-orders-page .orders-day-group-pro {
    margin-top: 16px !important;
}

body.admin-orders-page .orders-day-group-pro .day-title {
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    background: linear-gradient(90deg, rgba(var(--admin-panel-rgb), .18), rgba(255,255,255,.02)) !important;
    border: 1px solid rgba(var(--admin-panel-rgb), .18) !important;
}

body.admin-orders-page .orders-cards-grid {
    margin-top: 14px !important;
    gap: 18px !important;
}

body.admin-orders-page .order-card-pro {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8,10,12,.94), rgba(15,17,20,.92)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.admin-orders-page .order-card-pro:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--admin-panel-rgb), .22) !important;
    box-shadow: 0 24px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

body.admin-orders-page .order-card-pro::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(var(--admin-panel-rgb), .65);
    opacity: .95;
}

body.admin-orders-page .order-card-pro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(var(--admin-panel-rgb), .08), transparent 38%);
    pointer-events: none;
}

body.admin-orders-page .order-card-live::before { background: rgba(var(--admin-panel-rgb), .72); }
body.admin-orders-page .status-card-nuevo::before { background: rgba(245, 158, 11, .9); }
body.admin-orders-page .status-card-confirmado::before { background: rgba(34, 197, 94, .9); }
body.admin-orders-page .status-card-preparando::before { background: rgba(249, 115, 22, .92); }
body.admin-orders-page .status-card-en-camino::before { background: rgba(59, 130, 246, .9); }
body.admin-orders-page .status-card-entregado::before { background: rgba(16, 185, 129, .88); }
body.admin-orders-page .status-card-cancelado::before { background: rgba(239, 68, 68, .9); }

body.admin-orders-page .order-card-closed {
    background: linear-gradient(180deg, rgba(10,12,14,.9), rgba(14,16,18,.88)) !important;
}

body.admin-orders-page .order-card-top {
    position: relative;
    z-index: 1;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

body.admin-orders-page .order-card-code-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.admin-orders-page .order-card-code-wrap strong {
    font-size: 18px !important;
    letter-spacing: -.02em !important;
}

body.admin-orders-page .order-seen-badge,
body.admin-orders-page .new-dot,
body.admin-orders-page .order-age-badge,
body.admin-orders-page .order-card-time {
    backdrop-filter: blur(6px);
}

body.admin-orders-page .order-card-time,
body.admin-orders-page .order-age-badge {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

body.admin-orders-page .order-card-body-refined,
body.admin-orders-page .order-card-actions-refined,
body.admin-orders-page .order-card-customer,
body.admin-orders-page .order-card-meta-refined {
    position: relative;
    z-index: 1;
}

body.admin-orders-page .order-card-customer {
    padding: 14px 14px 0 0 !important;
}

body.admin-orders-page .order-card-customer h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
}

body.admin-orders-page .order-card-customer p {
    gap: 10px !important;
}

body.admin-orders-page .order-card-customer p span,
body.admin-orders-page .order-card-extra-lines span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.admin-orders-page .order-card-extra-lines {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed rgba(255,255,255,.06);
}

body.admin-orders-page .order-card-meta-refined > div {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

body.admin-orders-page .order-card-meta-refined > div:first-child strong {
    font-size: 20px !important;
    letter-spacing: -.02em;
}

body.admin-orders-page .order-card-actions-refined {
    margin-top: 14px !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link,
body.admin-orders-page .order-status-menu summary,
body.admin-orders-page .order-more-menu summary {
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
    background: linear-gradient(135deg, rgba(var(--admin-panel-rgb), .88), rgba(var(--admin-panel-rgb), .62)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-action-next {
    background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.03)) !important;
}

body.admin-orders-page .order-card-closed .order-card-action-next,
body.admin-orders-page .order-card-closed .order-status-menu {
    display: none !important;
}

body.admin-orders-page .order-card-closed .order-card-actions-refined {
    grid-template-columns: 1fr 1fr auto !important;
}

body.admin-orders-page .orders-clean-panel-static {
    margin-top: 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.01)) !important;
    border-style: solid !important;
}

body.admin-orders-page .orders-clean-static-head {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

body.admin-orders-page .orders-clean-form select,
body.admin-orders-page .orders-clean-form .admin-btn {
    min-height: 48px !important;
}

@media (min-width: 981px) {
    body.admin-orders-page .orders-filter-pro {
        grid-template-columns: minmax(320px, 1.8fr) minmax(210px, .8fr) minmax(170px, .55fr) minmax(210px, .8fr) auto !important;
    }

    body.admin-orders-page .orders-list-head-pro {
        grid-template-columns: minmax(0,1fr) auto;
    }

    body.admin-orders-page .order-card-pro {
        padding: 18px !important;
        border-radius: 24px !important;
    }

    body.admin-orders-page .order-card-actions-refined {
        grid-template-columns: 1fr 1fr !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
        grid-column: span 2;
        order: -2;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-next {
        grid-column: span 2;
        order: -1;
    }

    body.admin-orders-page .order-status-menu,
    body.admin-orders-page .order-more-menu,
    body.admin-orders-page .order-card-actions-refined .order-card-action-link {
        width: 100% !important;
    }
}

@media (max-width: 980px) {
    body.admin-orders-page .orders-day-group-pro .day-title {
        min-height: 48px !important;
        padding: 0 12px !important;
    }

    body.admin-orders-page .order-card-pro {
        border-radius: 22px !important;
    }
}

/* ===== v36 Pedidos: corrección real de cards y dropdowns ===== */
body.admin-orders-page .order-card-pro {
    overflow: visible !important;
}

body.admin-orders-page .order-card-main,
body.admin-orders-page .order-card-body-refined,
body.admin-orders-page .order-card-actions-refined,
body.admin-orders-page .order-card-actions-refined > *,
body.admin-orders-page .order-card-customer,
body.admin-orders-page .order-card-meta-refined {
    min-width: 0 !important;
}

body.admin-orders-page .order-card-actions-refined {
    align-items: stretch !important;
}

body.admin-orders-page .order-status-menu,
body.admin-orders-page .order-more-menu {
    position: relative;
    z-index: 30;
}

body.admin-orders-page .order-status-dropdown,
body.admin-orders-page .order-more-dropdown {
    z-index: 120 !important;
    box-shadow: 0 24px 44px rgba(0,0,0,.38) !important;
}

body.admin-orders-page .order-more-menu summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (min-width: 981px) {
    body.admin-orders-page .order-card-actions-refined {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-primary,
    body.admin-orders-page .order-card-actions-refined .order-card-action-next,
    body.admin-orders-page .order-card-actions-refined .order-status-menu {
        grid-column: 1 / -1 !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-link {
        grid-column: 1 !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-more-menu {
        grid-column: 2 !important;
        width: auto !important;
        justify-self: end !important;
    }

    body.admin-orders-page .order-more-menu summary {
        width: 48px !important;
        min-width: 48px !important;
        padding: 0 !important;
    }

    body.admin-orders-page .order-status-dropdown,
    body.admin-orders-page .order-more-dropdown {
        top: auto !important;
        bottom: calc(100% + 8px) !important;
    }

    body.admin-orders-page .order-status-dropdown {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.admin-orders-page .order-more-dropdown {
        left: auto !important;
        right: 0 !important;
        width: 220px !important;
        min-width: 220px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-actions-refined {
        grid-template-columns: 1fr 1fr !important;
    }

    body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-primary,
    body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-link {
        grid-column: span 1 !important;
    }
}

@media (max-width: 980px) {
    body.admin-orders-page .order-card-pro {
        overflow: visible !important;
    }

    body.admin-orders-page .order-card-actions-refined {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-primary,
    body.admin-orders-page .order-card-actions-refined .order-card-action-next,
    body.admin-orders-page .order-card-actions-refined .order-status-menu {
        grid-column: 1 / -1 !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-link {
        grid-column: 1 !important;
        width: 100% !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-more-menu {
        grid-column: 2 !important;
        width: auto !important;
        justify-self: end !important;
        align-self: stretch !important;
    }

    body.admin-orders-page .order-more-menu summary {
        width: 52px !important;
        min-width: 52px !important;
        padding: 0 !important;
    }

    body.admin-orders-page .order-status-dropdown,
    body.admin-orders-page .order-more-dropdown {
        top: auto !important;
        bottom: calc(100% + 8px) !important;
    }

    body.admin-orders-page .order-status-dropdown {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.admin-orders-page .order-more-dropdown {
        left: auto !important;
        right: 0 !important;
        width: min(220px, calc(100vw - 36px)) !important;
        min-width: min(220px, calc(100vw - 36px)) !important;
    }
}

/* ===== v37 Pedidos: cards compactas y menús mejor resueltos ===== */
body.admin-orders-page .order-card-pro {
    overflow: visible !important;
}

body.admin-orders-page .order-card-customer,
body.admin-orders-page .order-card-meta-refined,
body.admin-orders-page .order-card-actions-refined,
body.admin-orders-page .order-card-actions-refined > * {
    min-width: 0 !important;
}

body.admin-orders-page .order-card-closed {
    padding-bottom: 18px !important;
}

body.admin-orders-page .order-card-closed .order-card-body-refined {
    gap: 12px !important;
}

body.admin-orders-page .order-card-closed .order-card-customer {
    padding-top: 10px !important;
}

body.admin-orders-page .order-card-closed .order-card-customer h3 {
    font-size: 17px !important;
    margin-bottom: 8px !important;
}

body.admin-orders-page .order-card-closed .order-card-customer p {
    gap: 8px !important;
    row-gap: 6px !important;
}

body.admin-orders-page .order-card-closed .order-card-extra-lines {
    margin-top: 8px !important;
    padding-top: 8px !important;
}

body.admin-orders-page .order-card-closed .order-card-meta-refined {
    gap: 10px !important;
}

body.admin-orders-page .order-card-closed .order-card-meta-refined > div {
    min-height: 72px !important;
    padding: 14px 16px !important;
}

body.admin-orders-page .order-card-closed .order-card-actions-refined {
    margin-top: 12px !important;
    align-items: stretch !important;
}

body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-link,
body.admin-orders-page .order-card-closed .order-more-menu summary {
    min-height: 52px !important;
}

body.admin-orders-page .order-more-menu,
body.admin-orders-page .order-status-menu {
    position: relative;
    z-index: 40;
}

body.admin-orders-page .order-more-dropdown,
body.admin-orders-page .order-status-dropdown {
    z-index: 140 !important;
    box-shadow: 0 22px 44px rgba(0,0,0,.38) !important;
}

body.admin-orders-page .order-more-dropdown a,
body.admin-orders-page .order-status-dropdown a {
    min-height: 48px;
}

body.admin-orders-page .order-more-menu summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (min-width: 981px) {
    body.admin-orders-page .order-more-dropdown,
    body.admin-orders-page .order-status-dropdown {
        top: calc(100% + 8px) !important;
        bottom: auto !important;
    }

    body.admin-orders-page .order-status-dropdown {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.admin-orders-page .order-more-dropdown {
        left: auto !important;
        right: 0 !important;
        width: 220px !important;
        min-width: 220px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-actions-refined {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px !important;
        gap: 10px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-action-primary {
        grid-column: 1 !important;
        order: 0 !important;
    }

    body.admin-orders-page .order-card-closed .order-card-action-link {
        grid-column: 2 !important;
        order: 1 !important;
        width: 100% !important;
    }

    body.admin-orders-page .order-card-closed .order-more-menu {
        grid-column: 3 !important;
        order: 2 !important;
        width: auto !important;
        justify-self: end !important;
        align-self: stretch !important;
    }

    body.admin-orders-page .order-card-closed .order-more-menu summary {
        width: 52px !important;
        min-width: 52px !important;
        padding: 0 !important;
    }
}

@media (max-width: 980px) {
    body.admin-orders-page .order-card-closed .order-card-actions-refined {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-action-primary {
        grid-column: 1 / -1 !important;
        order: 0 !important;
    }

    body.admin-orders-page .order-card-closed .order-card-action-link {
        grid-column: 1 !important;
        order: 1 !important;
        width: 100% !important;
    }

    body.admin-orders-page .order-card-closed .order-more-menu {
        grid-column: 2 !important;
        order: 2 !important;
        width: auto !important;
        justify-self: end !important;
        align-self: stretch !important;
    }

    body.admin-orders-page .order-card-closed .order-more-menu summary {
        width: 56px !important;
        min-width: 56px !important;
        padding: 0 !important;
    }

    body.admin-orders-page .order-more-menu[open]::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.52);
        z-index: 130;
    }

    body.admin-orders-page .order-more-menu[open] > summary {
        position: relative;
        z-index: 141;
    }

    body.admin-orders-page .order-more-dropdown {
        position: fixed !important;
        left: 14px !important;
        right: 14px !important;
        top: auto !important;
        bottom: 92px !important;
        width: auto !important;
        min-width: 0 !important;
        border-radius: 18px !important;
        padding: 10px !important;
        z-index: 141 !important;
    }

    body.admin-orders-page .order-more-dropdown a {
        min-height: 52px !important;
        font-size: 15px !important;
    }
}

/* ===== v38 Pedidos: pulido final de cards cerradas y menú mobile ===== */
body.admin-orders-page .order-card-closed .order-card-body-refined {
    gap: 10px !important;
}
body.admin-orders-page .order-card-closed .order-card-customer {
    padding-top: 8px !important;
}
body.admin-orders-page .order-card-closed .order-card-customer h3 {
    margin-bottom: 6px !important;
}
body.admin-orders-page .order-card-closed .order-card-extra-lines {
    margin-top: 6px !important;
    padding-top: 6px !important;
}
body.admin-orders-page .order-card-closed .order-card-meta-refined {
    gap: 8px !important;
}
body.admin-orders-page .order-card-closed .order-card-meta-refined > div {
    min-height: 66px !important;
    padding: 12px 14px !important;
}
body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-link,
body.admin-orders-page .order-card-closed .order-more-menu summary {
    min-height: 46px !important;
    font-size: 14px !important;
}
body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-btn i,
body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-link i,
body.admin-orders-page .order-card-closed .order-more-menu summary i {
    font-size: 14px !important;
}
body.admin-orders-page .order-more-sheet-head {
    display: none;
}
body.admin-orders-page .order-more-dropdown a {
    white-space: normal !important;
}

@media (min-width: 981px) {
    body.admin-orders-page .order-card-closed {
        padding: 16px !important;
    }
    body.admin-orders-page .order-card-closed .order-card-actions-refined {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) 46px !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }
    body.admin-orders-page .order-card-closed .order-card-action-primary {
        grid-column: 1 !important;
    }
    body.admin-orders-page .order-card-closed .order-card-action-link {
        grid-column: 2 !important;
    }
    body.admin-orders-page .order-card-closed .order-more-menu {
        grid-column: 3 !important;
    }
    body.admin-orders-page .order-card-closed .order-more-menu summary {
        width: 46px !important;
        min-width: 46px !important;
    }
}

@media (max-width: 980px) {
    body.admin-orders-page .order-card-closed .order-card-actions-refined {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }
    body.admin-orders-page .order-card-closed .order-card-action-primary,
    body.admin-orders-page .order-card-closed .order-card-action-link {
        grid-column: span 1 !important;
    }
    body.admin-orders-page .order-card-closed .order-more-menu {
        grid-column: 2 !important;
        justify-self: end !important;
    }
    body.admin-orders-page .order-card-closed .order-more-menu summary {
        width: 56px !important;
        min-width: 56px !important;
    }
    body.admin-orders-page .order-more-menu[open]::before {
        backdrop-filter: blur(6px);
    }
    body.admin-orders-page .order-more-dropdown {
        left: 12px !important;
        right: 12px !important;
        bottom: 88px !important;
        border-radius: 20px !important;
        padding: 12px !important;
    }
    body.admin-orders-page .order-more-sheet-head {
        display: block;
        padding: 4px 4px 10px 4px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    body.admin-orders-page .order-more-sheet-head strong {
        display: block;
        font-size: 16px;
        color: #fff;
        margin-bottom: 2px;
    }
    body.admin-orders-page .order-more-sheet-head small {
        display: block;
        font-size: 12px;
        color: rgba(255,255,255,.58);
    }
    body.admin-orders-page .order-more-dropdown a {
        border-radius: 14px !important;
        min-height: 50px !important;
        padding: 12px 14px !important;
    }
}

/* ===== v39 Pedidos: menú mobile compacto y acciones desktop más respiradas ===== */
body.admin-orders-page .order-more-sheet-head {
    display: none !important;
}

@media (min-width: 981px) {
    body.admin-orders-page .orders-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
        gap: 20px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-actions-refined {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 54px !important;
        gap: 12px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-btn,
    body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-link {
        min-height: 50px !important;
        padding: 0 16px !important;
        white-space: nowrap !important;
        font-size: 15px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-action-primary,
    body.admin-orders-page .order-card-closed .order-card-action-link {
        justify-content: center !important;
        text-align: center !important;
    }

    body.admin-orders-page .order-card-closed .order-more-menu summary {
        width: 54px !important;
        min-width: 54px !important;
        min-height: 50px !important;
    }
}

@media (max-width: 980px) {
    body.admin-orders-page .order-more-menu[open]::before {
        content: none !important;
    }

    body.admin-orders-page .order-card-closed .order-card-actions-refined {
        align-items: stretch !important;
    }

    body.admin-orders-page .order-more-menu {
        position: relative !important;
    }

    body.admin-orders-page .order-more-dropdown {
        position: absolute !important;
        left: auto !important;
        right: 0 !important;
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        width: 210px !important;
        min-width: 210px !important;
        max-width: min(210px, calc(100vw - 28px)) !important;
        border-radius: 16px !important;
        padding: 8px !important;
        z-index: 141 !important;
        box-shadow: 0 18px 36px rgba(0,0,0,.34) !important;
    }

    body.admin-orders-page .order-more-dropdown a {
        min-height: 46px !important;
        font-size: 14px !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-btn,
    body.admin-orders-page .order-card-closed .order-card-actions-refined .admin-link,
    body.admin-orders-page .order-card-closed .order-more-menu summary {
        min-height: 48px !important;
    }
}

/* ===== v40 Pedidos: evitar card única estirada ===== */
@media (min-width: 981px) {
    body.admin-orders-page .orders-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(340px, 420px)) !important;
        justify-content: start !important;
        align-items: start !important;
        gap: 20px !important;
    }

    body.admin-orders-page .orders-cards-grid > .order-card-pro {
        width: 100% !important;
        max-width: 420px !important;
        min-height: 100% !important;
    }

    /* Si entra una sola, queda con ancho de tarjeta y no ocupa toda la fila */
    body.admin-orders-page .orders-day-group-pro .orders-cards-grid:has(> .order-card-pro:only-child) {
        grid-template-columns: minmax(340px, 420px) !important;
    }
}

/* ===== v41 Pedidos: cards más fluidas, acciones mejor balanceadas ===== */
body.admin-orders-page .order-card-main {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

body.admin-orders-page .order-card-body-refined {
    flex: 1 1 auto !important;
}

body.admin-orders-page .order-card-actions-refined {
    margin-top: auto !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link,
body.admin-orders-page .order-status-menu summary,
body.admin-orders-page .order-more-menu summary {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

body.admin-orders-page .order-more-menu summary {
    padding: 0 !important;
}

@media (min-width: 981px) {
    body.admin-orders-page .order-card-pro {
        padding: 18px 16px !important;
    }

    body.admin-orders-page .order-card-customer {
        min-height: 122px !important;
        padding-right: 0 !important;
    }

    body.admin-orders-page .order-card-customer h3 {
        margin-bottom: 8px !important;
    }

    body.admin-orders-page .order-card-actions-refined {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
        order: 1 !important;
        grid-column: 1 !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-link {
        order: 2 !important;
        grid-column: 2 !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-more-menu {
        order: 3 !important;
        grid-column: 3 !important;
        width: 52px !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-next {
        order: 4 !important;
        grid-column: 1 !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-status-menu {
        order: 5 !important;
        grid-column: 2 / 4 !important;
    }

    body.admin-orders-page .order-card-closed .order-card-actions-refined {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-action-primary {
        grid-column: 1 !important;
    }

    body.admin-orders-page .order-card-closed .order-card-action-link {
        grid-column: 2 !important;
    }

    body.admin-orders-page .order-card-closed .order-more-menu {
        grid-column: 3 !important;
    }

    body.admin-orders-page .order-card-closed .order-status-menu,
    body.admin-orders-page .order-card-closed .order-card-action-next {
        display: none !important;
    }

    body.admin-orders-page .order-more-menu summary {
        width: 52px !important;
        min-width: 52px !important;
    }
}

@media (max-width: 980px) {
    body.admin-orders-page .order-card-actions-refined {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) 58px !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
        order: 1 !important;
        grid-column: 1 / 3 !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-link {
        order: 2 !important;
        grid-column: 1 / 2 !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-more-menu {
        order: 2 !important;
        grid-column: 3 !important;
        width: 58px !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-next {
        order: 3 !important;
        grid-column: 2 / 4 !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-status-menu {
        order: 4 !important;
        grid-column: 1 / -1 !important;
    }

    body.admin-orders-page .order-card-closed .order-card-actions-refined {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) 58px !important;
    }

    body.admin-orders-page .order-card-closed .order-card-action-primary {
        grid-column: 1 / 2 !important;
    }

    body.admin-orders-page .order-card-closed .order-card-action-link {
        grid-column: 2 / 3 !important;
    }

    body.admin-orders-page .order-card-closed .order-more-menu {
        grid-column: 3 !important;
    }
}

/* ===== v42 Pedidos: masonry moderno + altura independiente por card ===== */
@media (min-width: 981px) {
    /* Reemplaza la grilla rígida por un layout tipo masonry/columns */
    body.admin-orders-page .orders-cards-grid {
        display: block !important;
        column-gap: 20px !important;
        column-fill: balance !important;
        align-items: initial !important;
    }

    @media (min-width: 981px) and (max-width: 1299px) {
        body.admin-orders-page .orders-cards-grid {
            column-count: 2 !important;
        }
    }

    @media (min-width: 1300px) and (max-width: 1699px) {
        body.admin-orders-page .orders-cards-grid {
            column-count: 3 !important;
        }
    }

    @media (min-width: 1700px) {
        body.admin-orders-page .orders-cards-grid {
            column-count: 4 !important;
        }
    }

    body.admin-orders-page .orders-cards-grid > .order-card-pro {
        display: inline-block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 20px !important;
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
        page-break-inside: avoid !important;
        vertical-align: top !important;
    }

    /* Asegura que una card sola quede con tamaño de card y no de banner */
    body.admin-orders-page .orders-day-group-pro .orders-cards-grid:has(> .order-card-pro:only-child) {
        column-count: 1 !important;
        max-width: 420px !important;
    }

    body.admin-orders-page .order-card-pro {
        min-height: 0 !important;
        height: auto !important;
    }

    body.admin-orders-page .order-card-main {
        height: auto !important;
        min-height: 0 !important;
    }

    body.admin-orders-page .order-card-body-refined {
        flex: initial !important;
    }

    /* Más aire entre bloques internos */
    body.admin-orders-page .order-card-header-refined {
        margin-bottom: 14px !important;
    }

    body.admin-orders-page .order-card-customer {
        min-height: 0 !important;
        margin-bottom: 14px !important;
    }

    body.admin-orders-page .order-card-meta-stack {
        margin-top: 14px !important;
        gap: 12px !important;
    }

    /* Botonera más natural y menos rígida */
    body.admin-orders-page .order-card-actions-refined {
        margin-top: 14px !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px !important;
        gap: 10px !important;
    }

    body.admin-orders-page .order-card-actions-refined .order-card-action-primary,
    body.admin-orders-page .order-card-actions-refined .order-card-action-link,
    body.admin-orders-page .order-card-actions-refined .order-card-action-next,
    body.admin-orders-page .order-card-actions-refined .order-status-menu {
        min-width: 0 !important;
    }
}

/* ===== v43 Pedidos: layout fluido moderno + selección por tarjeta ===== */
body.admin-orders-page .orders-cards-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

body.admin-orders-page .orders-cards-grid > .order-card-pro {
    flex: 1 1 330px !important;
    width: auto !important;
    max-width: 390px !important;
    min-width: 300px !important;
    height: auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
}

body.admin-orders-page .orders-cards-grid > .order-card-pro:only-child {
    max-width: 420px !important;
}

body.admin-orders-page .order-card-pro {
    position: relative !important;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.admin-orders-page .order-card-pro:hover {
    transform: translateY(-2px);
}

body.admin-orders-page .order-card-pro.is-selected {
    border-color: rgba(var(--panel-rgb), .65) !important;
    box-shadow: 0 0 0 1px rgba(var(--panel-rgb), .35), 0 20px 38px rgba(0,0,0,.32) !important;
}

body.admin-orders-page .order-card-select {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 5 !important;
    width: 18px !important;
    height: 18px !important;
}

body.admin-orders-page .order-card-select .order-select-item {
    opacity: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    pointer-events: none !important;
}

body.admin-orders-page .order-card-select::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

body.admin-orders-page .order-card-pro.is-selected .order-card-select::before {
    background: rgba(var(--panel-rgb), .18);
    border-color: rgba(var(--panel-rgb), .58);
    box-shadow: inset 0 0 0 4px rgba(var(--panel-rgb), .95);
}

body.admin-orders-page .order-card-main {
    position: relative !important;
    height: auto !important;
}

body.admin-orders-page .order-card-top,
body.admin-orders-page .order-card-header-refined {
    padding-right: 64px !important;
}

body.admin-orders-page .order-more-menu {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 30 !important;
}

body.admin-orders-page .order-more-menu summary {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

body.admin-orders-page .order-more-dropdown {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    width: 220px !important;
    max-width: min(220px, calc(100vw - 30px)) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    background: rgba(12, 14, 18, .98) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.44) !important;
}

body.admin-orders-page .order-more-sheet-head {
    display: none !important;
}

body.admin-orders-page .order-more-dropdown a {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: .95rem !important;
}

body.admin-orders-page .order-card-meta-refined {
    gap: 12px !important;
}

body.admin-orders-page .order-card-actions-refined {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 14px !important;
}

body.admin-orders-page .order-card-action-primary {
    grid-column: 1 / -1 !important;
    order: 1 !important;
}

body.admin-orders-page .order-card-action-next,
body.admin-orders-page .order-card-action-link,
body.admin-orders-page .order-status-menu {
    min-width: 0 !important;
}

body.admin-orders-page .order-card-action-next {
    order: 2 !important;
}

body.admin-orders-page .order-card-action-link {
    order: 3 !important;
}

body.admin-orders-page .order-status-menu {
    order: 4 !important;
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-status-menu summary {
    width: 100% !important;
    justify-content: center !important;
}

body.admin-orders-page .order-card-body-refined,
body.admin-orders-page .order-card-main,
body.admin-orders-page .order-card-pro {
    min-height: 0 !important;
}

/* Reduce sensación de rigidez visual */
body.admin-orders-page .order-card-pro .order-card-extra-lines,
body.admin-orders-page .order-card-pro .order-card-customer p {
    gap: 8px 12px !important;
}

@media (max-width: 980px) {
    body.admin-orders-page .orders-cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.admin-orders-page .orders-cards-grid > .order-card-pro {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.admin-orders-page .order-card-top,
    body.admin-orders-page .order-card-header-refined {
        padding-right: 54px !important;
    }

    body.admin-orders-page .order-card-top-right {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }

    body.admin-orders-page .order-card-actions-refined {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.admin-orders-page .order-card-action-primary {
        grid-column: 1 / -1 !important;
    }

    body.admin-orders-page .order-status-menu {
        grid-column: 1 / -1 !important;
    }

    body.admin-orders-page .order-card-action-next,
    body.admin-orders-page .order-card-action-link {
        grid-column: span 1 !important;
    }

    body.admin-orders-page .order-more-menu {
        top: auto !important;
        right: 0 !important;
        bottom: 10px !important;
    }

    body.admin-orders-page .order-more-dropdown {
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        width: 210px !important;
        max-width: calc(100vw - 34px) !important;
    }
}

/* ===== v44 Pedidos: tarjetas fluidas, selección por click y menú compacto ===== */
body.admin-orders-page .orders-cards-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
}

body.admin-orders-page .orders-cards-grid > .order-card-pro {
    flex: 0 1 360px !important;
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    min-width: 320px !important;
    height: auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
}

body.admin-orders-page .order-card-pro {
    position: relative !important;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.admin-orders-page .order-card-pro:hover { transform: translateY(-2px); }
body.admin-orders-page .order-card-pro.is-selected {
    border-color: rgba(var(--panel-rgb), .65) !important;
    box-shadow: 0 0 0 1px rgba(var(--panel-rgb), .35), 0 18px 36px rgba(0,0,0,.34) !important;
}

body.admin-orders-page .order-card-select {
    display: none !important;
}

body.admin-orders-page .order-card-main {
    min-height: 0 !important;
    height: auto !important;
}

body.admin-orders-page .order-card-top {
    padding-right: 0 !important;
    gap: 12px !important;
}
body.admin-orders-page .order-card-top-right {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

body.admin-orders-page .new-dot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: auto !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: rgba(var(--panel-rgb), .18) !important;
    color: rgba(var(--panel-rgb), 1) !important;
    border: 1px solid rgba(var(--panel-rgb), .28) !important;
    font-size: .8rem !important;
}

body.admin-orders-page .order-seen-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.admin-orders-page .order-card-customer h3 {
    margin-bottom: 8px !important;
}

body.admin-orders-page .order-card-meta-refined {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

body.admin-orders-page .order-card-actions-refined {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 14px !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link {
    min-height: 50px !important;
    height: auto !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
    grid-column: 1 / -1 !important;
}
body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-next,
body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-link {
    grid-column: span 1 !important;
}
body.admin-orders-page .order-card-actions-refined.has-next.no-wa .order-card-action-next,
body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-action-link {
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-more-menu {
    position: relative !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-left: 2px !important;
}
body.admin-orders-page .order-more-menu summary {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.admin-orders-page .order-more-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    bottom: auto !important;
    width: 220px !important;
    max-width: min(220px, calc(100vw - 28px)) !important;
    padding: 8px !important;
    border-radius: 16px !important;
    background: rgba(12,14,18,.98) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(16px) !important;
    z-index: 60 !important;
}
body.admin-orders-page .order-more-sheet-head { display: none !important; }
body.admin-orders-page .order-more-group-label {
    font-size: .72rem !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: rgba(255,255,255,.46) !important;
    padding: 6px 8px 4px !important;
}
body.admin-orders-page .order-more-divider {
    height: 1px !important;
    margin: 6px 4px !important;
    background: rgba(255,255,255,.08) !important;
}
body.admin-orders-page .order-more-dropdown a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    font-size: .94rem !important;
}

/* El menú de estado vive dentro del menú de más */
body.admin-orders-page .order-status-menu {
    display: none !important;
}

@media (max-width: 900px) {
    body.admin-orders-page .orders-cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    body.admin-orders-page .orders-cards-grid > .order-card-pro {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
    }
    body.admin-orders-page .order-card-top {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    body.admin-orders-page .order-card-top-right {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    body.admin-orders-page .order-card-actions-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
        grid-column: 1 / -1 !important;
    }
    body.admin-orders-page .order-more-dropdown {
        width: min(220px, calc(100vw - 32px)) !important;
    }
}

/* ===== v45 Pedidos: tarjetas más fluidas, acciones resumidas y menú mejor ubicado ===== */
body.admin-orders-page .orders-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 360px)) !important;
    justify-content: start !important;
    align-items: start !important;
    gap: 18px !important;
}

body.admin-orders-page .orders-cards-grid > .order-card-pro {
    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;
    flex: none !important;
    align-self: start !important;
    margin: 0 !important;
}

body.admin-orders-page .order-card-pro {
    border-radius: 24px !important;
    overflow: visible !important;
}

body.admin-orders-page .order-card-pro::before {
    left: 8px !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 4px !important;
    border-radius: 14px !important;
}

body.admin-orders-page .order-card-pro.is-selected {
    border-color: rgba(255,255,255,.92) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.72), 0 20px 42px rgba(0,0,0,.34) !important;
}

body.admin-orders-page .order-card-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

body.admin-orders-page .order-card-top-right {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

body.admin-orders-page .order-more-menu-top {
    margin-left: 2px !important;
    align-self: flex-start !important;
}

body.admin-orders-page .order-more-menu-top summary {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
}

body.admin-orders-page .order-more-menu-top .order-more-dropdown {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
}

body.admin-orders-page .order-card-actions-refined {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link {
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
}

body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-primary,
body.admin-orders-page .order-card-actions-refined.has-next.no-wa .order-card-action-primary,
body.admin-orders-page .order-card-actions-refined.no-next.no-wa .order-card-action-primary {
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-link,
body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-next,
body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-action-primary,
body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-action-link {
    grid-column: span 1 !important;
}

body.admin-orders-page .order-card-actions-refined.has-next.no-wa .order-card-action-next {
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-card-closed .order-card-actions-refined {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-primary,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-link {
    grid-column: span 1 !important;
}

body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-primary,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-link,
body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-link,
body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-next {
    min-width: 0 !important;
}

@media (max-width: 900px) {
    body.admin-orders-page .orders-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.admin-orders-page .orders-cards-grid > .order-card-pro {
        max-width: 100% !important;
    }

    body.admin-orders-page .order-card-top {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    body.admin-orders-page .order-card-top-right {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    body.admin-orders-page .order-more-menu-top {
        margin-left: auto !important;
    }

    body.admin-orders-page .order-more-menu-top .order-more-dropdown {
        width: min(220px, calc(100vw - 34px)) !important;
        max-width: min(220px, calc(100vw - 34px)) !important;
    }

    body.admin-orders-page .order-card-actions-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-primary,
    body.admin-orders-page .order-card-actions-refined.has-next.no-wa .order-card-action-primary,
    body.admin-orders-page .order-card-actions-refined.no-next.no-wa .order-card-action-primary {
        grid-column: 1 / -1 !important;
    }

    body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-action-primary,
    body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-action-link,
    body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-link,
    body.admin-orders-page .order-card-actions-refined.has-next.has-wa .order-card-action-next {
        grid-column: span 1 !important;
    }
}

/* ===== v46 Pedidos: alturas independientes, extra-lines horizontales y menú superior compacto ===== */
body.admin-orders-page .orders-cards-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;
}

body.admin-orders-page .orders-cards-grid > .order-card-pro {
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    min-width: 320px !important;
    align-self: flex-start !important;
}

body.admin-orders-page .orders-cards-grid > .order-card-pro:only-child {
    width: 360px !important;
    max-width: 360px !important;
}

body.admin-orders-page .order-card-pro {
    overflow: visible !important;
}

body.admin-orders-page .order-card-pro::before {
    left: -4px !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 5px !important;
    border-radius: 999px !important;
}

body.admin-orders-page .order-card-top {
    position: relative !important;
    padding-right: 48px !important;
}

body.admin-orders-page .order-card-top-right {
    padding-right: 6px !important;
}

body.admin-orders-page .order-more-menu-top {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 120 !important;
}

body.admin-orders-page .order-more-menu-top summary {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.04) !important;
}

body.admin-orders-page .order-more-menu-top .order-more-dropdown {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 210px !important;
    max-width: min(210px, calc(100vw - 28px)) !important;
    z-index: 200 !important;
}

body.admin-orders-page .order-card-extra-lines {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
    align-items: start !important;
}

body.admin-orders-page .order-card-extra-lines span {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.admin-orders-page .order-card-actions-refined {
    align-items: start !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link {
    min-height: 50px !important;
}

@media (max-width: 1200px) {
    body.admin-orders-page .orders-cards-grid > .order-card-pro {
        flex-basis: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        min-width: 300px !important;
    }
}

@media (max-width: 900px) {
    body.admin-orders-page .orders-cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.admin-orders-page .orders-cards-grid > .order-card-pro,
    body.admin-orders-page .orders-cards-grid > .order-card-pro:only-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    body.admin-orders-page .order-card-pro::before {
        left: -3px !important;
        top: 10px !important;
        bottom: 10px !important;
        width: 4px !important;
    }

    body.admin-orders-page .order-card-top {
        padding-right: 42px !important;
    }

    body.admin-orders-page .order-more-menu-top summary {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    body.admin-orders-page .order-card-extra-lines {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    body.admin-orders-page .order-card-extra-lines span {
        white-space: normal !important;
    }
}

/* ===== v47 Pedidos: dropdown de opciones más sólido, mejor alineado y acento lateral más integrado ===== */
body.admin-orders-page .order-card-pro {
    isolation: isolate !important;
}

body.admin-orders-page .order-card-pro::before {
    left: -6px !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 6px !important;
    border-radius: 14px 0 0 14px !important;
}

body.admin-orders-page .order-card-top {
    padding-right: 52px !important;
}

body.admin-orders-page .order-more-menu-top {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    margin: 0 !important;
    z-index: 80 !important;
}

body.admin-orders-page .order-more-menu-top[open] {
    z-index: 260 !important;
}

body.admin-orders-page .order-more-menu-top summary {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

body.admin-orders-page .order-more-menu-top .order-more-dropdown {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: min(220px, calc(100vw - 28px)) !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(16,18,24,.985) 0%, rgba(10,12,16,.985) 100%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    box-shadow: 0 24px 54px rgba(0,0,0,.55) !important;
    overflow: hidden !important;
    z-index: 280 !important;
}

body.admin-orders-page .order-more-dropdown .order-more-group-label {
    padding: 2px 8px 6px !important;
    color: rgba(255,255,255,.56) !important;
    font-size: .74rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

body.admin-orders-page .order-more-dropdown .order-more-divider {
    height: 1px !important;
    margin: 4px 4px 6px !important;
    background: rgba(255,255,255,.08) !important;
}

body.admin-orders-page .order-more-dropdown a {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.035) !important;
    font-size: .97rem !important;
    color: rgba(255,255,255,.96) !important;
}

body.admin-orders-page .order-more-dropdown a:hover {
    background: rgba(var(--admin-panel-rgb), .16) !important;
}

body.admin-orders-page .order-more-dropdown .danger-link {
    background: rgba(239, 68, 68, .14) !important;
    color: #ff8f8f !important;
}

body.admin-orders-page .order-more-dropdown .danger-link:hover {
    background: rgba(239, 68, 68, .22) !important;
}

@media (max-width: 900px) {
    body.admin-orders-page .order-card-pro::before {
        left: -5px !important;
        top: 7px !important;
        bottom: 7px !important;
        width: 5px !important;
    }

    body.admin-orders-page .order-card-top {
        padding-right: 46px !important;
    }

    body.admin-orders-page .order-more-menu-top {
        top: 0 !important;
        right: 0 !important;
    }

    body.admin-orders-page .order-more-menu-top summary {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    body.admin-orders-page .order-more-menu-top .order-more-dropdown {
        width: min(212px, calc(100vw - 24px)) !important;
        min-width: min(212px, calc(100vw - 24px)) !important;
        max-width: min(212px, calc(100vw - 24px)) !important;
        right: 0 !important;
        left: auto !important;
    }
}

/* ===== v48 Pedidos: menú superior realmente flotante y acento lateral más sutil ===== */
body.admin-orders-page .orders-cards-grid,
body.admin-orders-page .orders-cards-grid > .order-card-pro,
body.admin-orders-page .order-card-main,
body.admin-orders-page .order-card-pro {
    overflow: visible !important;
}

body.admin-orders-page .order-card-main {
    position: relative !important;
}

body.admin-orders-page .order-card-top {
    position: relative !important;
    padding-right: 58px !important;
}

body.admin-orders-page .order-card-top-right {
    position: static !important;
    padding-right: 0 !important;
}

body.admin-orders-page .order-more-menu-top {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 500 !important;
}

body.admin-orders-page .order-more-menu-top summary {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
    position: relative !important;
    z-index: 1 !important;
}

body.admin-orders-page .order-more-menu-top .order-more-dropdown {
    position: fixed !important;
    left: -9999px !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 10px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(11, 13, 18, .995) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    box-shadow: 0 28px 60px rgba(0,0,0,.56) !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

body.admin-orders-page .order-more-dropdown a {
    position: relative !important;
    z-index: 2 !important;
}

body.admin-orders-page .order-card-pro::before {
    left: -4px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 4px !important;
    border-radius: 999px !important;
}

@media (max-width: 900px) {
    body.admin-orders-page .order-card-top {
        padding-right: 52px !important;
    }

    body.admin-orders-page .order-more-menu-top {
        top: 10px !important;
        right: 10px !important;
    }

    body.admin-orders-page .order-more-menu-top summary {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }

    body.admin-orders-page .order-more-menu-top .order-more-dropdown {
        width: min(212px, calc(100vw - 20px)) !important;
        min-width: min(212px, calc(100vw - 20px)) !important;
        max-width: min(212px, calc(100vw - 20px)) !important;
    }

    body.admin-orders-page .order-card-pro::before {
        left: -4px !important;
        top: 8px !important;
        bottom: 8px !important;
        width: 4px !important;
    }
}

/* ===== v49 Pedidos: menú de opciones por encima del contenido y trigger consistente ===== */
body.admin-orders-page .order-card-main,
body.admin-orders-page .order-card-top,
body.admin-orders-page .order-card-pro,
body.admin-orders-page .orders-cards-grid {
    overflow: visible !important;
}

body.admin-orders-page .order-card-top {
    position: relative !important;
    padding-right: 50px !important;
}

body.admin-orders-page .order-card-top-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    padding-right: 0 !important;
}

body.admin-orders-page .order-more-menu-top {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 30 !important;
}

body.admin-orders-page .order-more-menu-top summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    list-style: none !important;
}

body.admin-orders-page .order-more-menu-top summary::marker,
body.admin-orders-page .order-more-menu-top summary::-webkit-details-marker {
    display: none !important;
    content: '' !important;
}

body.admin-orders-page .order-more-menu-top summary i {
    font-size: 13px !important;
}

body.admin-orders-page .order-more-menu-top .order-more-dropdown {
    display: none !important;
}

body.admin-orders-page .order-more-menu-top.menu-open .order-more-dropdown.is-portal-open {
    display: block !important;
    position: fixed !important;
    z-index: 100000 !important;
    background: rgba(10, 12, 18, .985) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    box-shadow: 0 26px 64px rgba(0,0,0,.58) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    opacity: 1 !important;
}

body.admin-orders-page .order-more-dropdown,
body.admin-orders-page .order-status-dropdown {
    isolation: isolate !important;
}

body.admin-orders-page .order-more-dropdown a,
body.admin-orders-page .order-more-dropdown .order-more-group-label,
body.admin-orders-page .order-more-divider {
    position: relative !important;
    z-index: 2 !important;
}

body.admin-orders-page .order-card-pro::before {
    left: -3px !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 3px !important;
    border-radius: 999px !important;
}

@media (max-width: 900px) {
    body.admin-orders-page .order-card-top {
        padding-right: 46px !important;
    }

    body.admin-orders-page .order-more-menu-top {
        top: 10px !important;
        right: 10px !important;
    }

    body.admin-orders-page .order-more-menu-top summary {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }

    body.admin-orders-page .order-card-pro::before {
        left: -3px !important;
        top: 10px !important;
        bottom: 10px !important;
        width: 3px !important;
    }
}


/* ===== v50 Pedidos: se eliminó el menú de tres puntos ===== */
body.admin-orders-page .order-more-menu,
body.admin-orders-page .order-more-menu-top,
body.admin-orders-page .order-more-dropdown,
body.admin-orders-page .order-status-menu,
body.admin-orders-page .order-status-dropdown {
    display: none !important;
}

body.admin-orders-page .order-card-top {
    padding-right: 0 !important;
}

body.admin-orders-page .order-card-top-right {
    padding-right: 0 !important;
    margin-left: auto !important;
}

body.admin-orders-page .order-card-actions-refined {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-action-primary,
body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-action-link,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-primary,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-link {
    grid-column: span 1 !important;
}

@media (max-width: 900px) {
    body.admin-orders-page .order-card-top {
        padding-right: 0 !important;
    }
}

/* v51 - productos modernizados */
.products-page-premium {
    display: grid;
    gap: 14px;
}

.products-page-premium .products-control-panel {
    padding: clamp(16px, 2.1vw, 24px) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.02)) !important;
    border-color: rgba(255,255,255,.08) !important;
}

.products-page-premium .panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px !important;
}

.products-page-premium .panel-head > div:first-child {
    max-width: 760px;
}

.products-page-premium .row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.catalog-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.catalog-stat {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
    box-shadow: 0 16px 34px rgba(0,0,0,.16);
}

.catalog-stat-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(var(--admin-accent-rgb), .12);
    color: var(--admin-accent);
    border: 1px solid rgba(var(--admin-accent-rgb), .20);
}

.catalog-stat-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.catalog-stat-copy span {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: 10px;
    font-weight: 900;
}

.catalog-stat-copy strong {
    font-size: 21px;
    line-height: 1;
}

.catalog-stat-copy small {
    color: var(--muted);
    font-size: 11px;
}

.products-page-premium .catalog-toolbar {
    gap: 12px !important;
    margin-top: 0 !important;
}

.products-page-premium .catalog-search {
    min-height: 50px;
    max-width: 880px;
    border-radius: 15px !important;
}

.products-page-premium .catalog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
}

.products-page-premium .catalog-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 14px;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.products-page-premium .catalog-tabs button:hover {
    transform: translateY(-1px);
}

.products-page-premium .catalog-tabs .tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.085);
    border: 1px solid rgba(255,255,255,.07);
    color: #f5f5f5;
    font-size: 12px;
    font-weight: 900;
}

.products-page-premium .catalog-tabs button.active .tab-count,
.products-page-premium .catalog-tabs button:hover .tab-count {
    background: rgba(0,0,0,.18);
    color: #111;
    border-color: rgba(0,0,0,.08);
}

.products-page-premium .catalog-sections {
    gap: 14px !important;
}

.products-page-premium .product-section {
    padding: 14px 16px !important;
}

.products-page-premium .section-bar {
    margin-bottom: 8px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.products-page-premium .section-bar h2 {
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1;
    margin-top: 2px;
}

.products-page-premium .section-bar strong {
    background: rgba(var(--admin-accent-rgb), .08);
    border-color: rgba(var(--admin-accent-rgb), .16);
    color: #fff;
}

.products-page-premium .admin-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 360px)) !important;
    justify-content: start !important;
    align-items: start !important;
    gap: 16px !important;
    margin-top: 8px !important;
}

.products-page-premium .admin-product-card {
    min-width: 0 !important;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg, rgba(7,14,15,.98), rgba(7,10,11,.96));
    box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.products-page-premium .admin-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--admin-accent-rgb), .24);
    box-shadow: 0 24px 44px rgba(0,0,0,.22);
}

.products-page-premium .product-card-actions {
    top: 12px;
    right: 12px;
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(8,12,12,.7);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.products-page-premium .product-card-actions a {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: var(--admin-accent);
    background: rgba(var(--admin-accent-rgb), .12);
    transition: transform .16s ease, filter .16s ease, background .16s ease;
}

.products-page-premium .product-card-actions a:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.products-page-premium .product-card-actions .danger-icon {
    color: #ff9f9f;
    background: rgba(255, 77, 77, .15);
}

.products-page-premium .admin-product-img {
    position: relative;
    height: 176px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(var(--admin-accent-rgb), .18), transparent 45%),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.18)),
        #0a0e0f;
}

.products-page-premium .admin-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.products-page-premium .admin-product-card:hover .admin-product-img img {
    transform: scale(1.04);
}

.products-page-premium .admin-product-img.is-fallback {
    background:
        radial-gradient(circle at 50% 25%, rgba(var(--admin-accent-rgb), .17), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)),
        #0a0e0f;
}

.products-page-premium .admin-product-img.is-fallback img[src$="burger-demo.svg"],
.products-page-premium .admin-product-img.is-fallback img[src$="drink-demo.svg"],
.products-page-premium .admin-product-img.is-fallback img[src$="fries-demo.svg"],
.products-page-premium .admin-product-img.is-fallback img[src$="chivito-demo.svg"] {
    width: min(54%, 180px) !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 0 !important;
    opacity: .9;
}

.product-fallback-note {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.48);
    border: 1px solid rgba(255,255,255,.08);
    color: #f1f1f1;
    font-size: 12px;
    font-weight: 800;
}

.products-page-premium .admin-product-body {
    display: grid;
    gap: 12px !important;
    padding: 14px !important;
}

.admin-product-meta-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.product-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(var(--admin-accent-rgb), .18);
    background: rgba(var(--admin-accent-rgb), .10);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.product-card-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.product-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
    color: #f3f3f3;
    font-size: 11px;
    font-weight: 900;
}

.product-card-badge.featured {
    background: rgba(255, 198, 73, .12);
    border-color: rgba(255, 198, 73, .18);
    color: #ffd15a;
}

.products-page-premium .admin-product-title {
    gap: 14px;
    align-items: flex-start;
}

.product-title-meta {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.products-page-premium .admin-product-title h3 {
    font-size: 18px;
    line-height: 1.1;
}

.products-page-premium .admin-product-title small {
    margin-top: 0;
    font-size: 12px;
}

.products-page-premium .admin-product-title .status {
    flex-shrink: 0;
    white-space: nowrap;
}

.product-description {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
    min-height: 34px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border-radius: 18px;
    border: 1px solid rgba(var(--admin-accent-rgb), .14);
    background: linear-gradient(145deg, rgba(var(--admin-accent-rgb), .08), rgba(255,255,255,.02));
}

.product-price-main span,
.product-price-side span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .65px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.product-price-main strong {
    font-size: 28px;
    line-height: 1;
}

.product-price-main small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
}

.product-price-side {
    min-width: 112px;
    text-align: right;
}

.product-price-side strong {
    font-size: 19px;
    line-height: 1;
}

.products-page-premium .admin-product-metrics.product-compact-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.products-page-premium .admin-product-metrics.product-compact-metrics div {
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 15px;
    background: rgba(255,255,255,.038);
    border: 1px solid rgba(255,255,255,.06);
}

.products-page-premium .admin-product-metrics.product-compact-metrics strong {
    font-size: 12.5px !important;
}

@media (max-width: 1450px) {
    .catalog-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .catalog-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 980px) {
    .products-page-premium .panel-head {
        flex-direction: column;
    }

    .products-page-premium .row-actions {
        width: 100%;
        justify-content: stretch;
    }

    .products-page-premium .row-actions .badge-soft,
    .products-page-premium .row-actions .admin-btn {
        flex: 1 1 220px;
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .products-page-premium {
        gap: 18px;
    }

    .catalog-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .catalog-stat {
        padding: 12px;
        gap: 10px;
    }

    .catalog-stat-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 13px;
    }

    .catalog-stat-copy strong {
        font-size: 20px;
    }

    .products-page-premium .section-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .products-page-premium .admin-product-grid {
        grid-template-columns: 1fr !important;
    }

    .products-page-premium .admin-product-img {
        height: 170px !important;
    }

    .product-price-hero {
        grid-template-columns: 1fr;
    }

    .product-price-side {
        text-align: left;
        min-width: 0;
    }

    .products-page-premium .admin-product-metrics.product-compact-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 540px) {
    .catalog-overview {
        grid-template-columns: 1fr;
    }

    .products-page-premium .catalog-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .products-page-premium .catalog-tabs::-webkit-scrollbar {
        height: 0;
    }

    .products-page-premium .admin-product-title {
        flex-direction: column;
    }

    .products-page-premium .admin-product-title .status {
        align-self: flex-start;
    }

    .products-page-premium .admin-product-metrics.product-compact-metrics {
        grid-template-columns: 1fr !important;
    }
}


/* ===== v52 Productos: encabezado premium compacto ===== */
.products-page-premium {
    gap: 14px !important;
}

.products-page-premium .products-control-panel {
    padding: clamp(16px, 2.1vw, 24px) !important;
    margin-bottom: 10px !important;
}

.products-page-premium .panel-head {
    margin-bottom: 14px !important;
    gap: 16px !important;
}

.products-page-premium .catalog-overview {
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.products-page-premium .catalog-stat {
    padding: 12px !important;
    gap: 12px !important;
}

.products-page-premium .catalog-stat-icon {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
}

.products-page-premium .catalog-stat-copy strong {
    font-size: 21px !important;
}

.products-page-premium .catalog-stat-copy small {
    font-size: 11px !important;
}

.products-page-premium .catalog-toolbar {
    gap: 12px !important;
    margin-top: 0 !important;
}

.products-page-premium .catalog-search {
    min-height: 50px !important;
    max-width: 880px !important;
    border-radius: 15px !important;
}

.products-page-premium .catalog-tabs {
    gap: 8px !important;
}

.products-page-premium .catalog-tabs button {
    padding: 9px 13px !important;
    gap: 8px !important;
    border-radius: 14px !important;
}

.products-page-premium .catalog-sections {
    gap: 14px !important;
}

.products-page-premium .product-section {
    padding: 14px 16px !important;
}

.products-page-premium .section-bar {
    margin-bottom: 8px !important;
}

.products-page-premium .section-bar h2 {
    font-size: clamp(22px, 2.2vw, 30px) !important;
}

.products-page-premium .section-kicker {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: .55px;
}

.products-page-premium .section-bar strong {
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.products-page-premium .admin-product-grid {
    gap: 16px !important;
    margin-top: 8px !important;
}

.products-page-premium .admin-product-img {
    height: 176px !important;
}

.products-page-premium .admin-product-body {
    gap: 12px !important;
    padding: 14px !important;
}

.products-page-premium .admin-product-title h3 {
    font-size: 18px !important;
}

.products-page-premium .product-description {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    min-height: 34px !important;
}

.products-page-premium .product-price-hero {
    gap: 10px !important;
    padding: 13px !important;
}

.products-page-premium .product-price-main strong {
    font-size: 28px !important;
}

.products-page-premium .product-price-side strong {
    font-size: 19px !important;
}

.products-page-premium .admin-product-metrics.product-compact-metrics div {
    padding: 10px !important;
}

.products-page-premium .admin-product-metrics.product-compact-metrics strong {
    font-size: 12.5px !important;
}

@media (max-width: 720px) {
    .products-page-premium {
        gap: 14px !important;
    }

    .products-page-premium .catalog-stat {
        padding: 11px !important;
        gap: 9px !important;
    }

    .products-page-premium .section-bar h2 {
        font-size: 26px !important;
    }
}

/* ===== v53 Productos: secciones más compactas ===== */
.products-page-premium .products-control-panel {
    margin-bottom: 6px !important;
}

.products-page-premium .products-control-panel + .catalog-sections,
.products-page-premium .catalog-sections {
    margin-top: 6px !important;
    gap: 8px !important;
}

.products-page-premium .catalog-sections .panel,
.products-page-premium .catalog-sections .product-section,
.products-page-premium .catalog-sections .product-section + .product-section {
    margin-top: 0 !important;
}

.products-page-premium .product-section {
    padding: 10px 14px 12px !important;
}

.products-page-premium .section-bar {
    margin-bottom: 6px !important;
    padding-bottom: 2px !important;
    min-height: auto !important;
}

.products-page-premium .section-bar h2 {
    line-height: .95 !important;
}

.products-page-premium .section-kicker {
    margin-bottom: 2px !important;
}

.products-page-premium .section-bar + .admin-product-grid,
.products-page-premium .admin-product-grid {
    margin-top: 6px !important;
    gap: 14px !important;
}

@media (max-width: 720px) {
    .products-page-premium .products-control-panel {
        margin-bottom: 4px !important;
    }

    .products-page-premium .products-control-panel + .catalog-sections,
    .products-page-premium .catalog-sections {
        margin-top: 4px !important;
        gap: 6px !important;
    }

    .products-page-premium .product-section {
        padding: 10px 12px !important;
    }

    .products-page-premium .section-bar {
        margin-bottom: 4px !important;
    }

    .products-page-premium .section-bar + .admin-product-grid,
    .products-page-premium .admin-product-grid {
        margin-top: 4px !important;
        gap: 12px !important;
    }
}


/* ===== v54 Productos: corregir desborde horizontal + secciones más unidas ===== */
.products-page-premium,
.products-page-premium * {
    box-sizing: border-box;
}

.products-page-premium {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
    gap: 10px !important;
}

.products-page-premium .products-control-panel,
.products-page-premium .catalog-sections,
.products-page-premium .product-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.products-page-premium .products-control-panel {
    overflow: hidden;
    padding: 16px 18px 18px !important;
    margin-bottom: 0 !important;
}

.products-page-premium .panel-head {
    margin-bottom: 12px !important;
}

/* Las métricas ya no fuerzan 5 columnas ni rompen el ancho */
.products-page-premium .catalog-overview {
    width: 100%;
    max-width: 100%;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    overflow: hidden;
}

.products-page-premium .catalog-stat {
    min-width: 0 !important;
    padding: 11px 12px !important;
}

.products-page-premium .catalog-stat-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 13px !important;
}

.products-page-premium .catalog-stat-copy strong {
    font-size: 20px !important;
}

.products-page-premium .catalog-toolbar {
    width: 100%;
    max-width: 100%;
    display: grid !important;
    grid-template-columns: minmax(280px, 760px) 1fr;
    align-items: center;
    gap: 12px !important;
    margin-top: 0 !important;
    overflow: hidden;
}

.products-page-premium .catalog-search {
    width: 100%;
    max-width: 760px !important;
    min-width: 0;
    min-height: 48px !important;
}

.products-page-premium .catalog-tabs {
    min-width: 0;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    gap: 8px !important;
    overflow: hidden;
}

.products-page-premium .catalog-tabs button {
    flex: 0 0 auto;
    padding: 8px 12px !important;
}

/* Menos aire entre categorías */
.products-page-premium .products-control-panel + .catalog-sections,
.products-page-premium .catalog-sections {
    margin-top: 4px !important;
    gap: 6px !important;
}

.products-page-premium .catalog-sections .panel,
.products-page-premium .catalog-sections .product-section,
.products-page-premium .catalog-sections .product-section + .product-section {
    margin-top: 0 !important;
}

.products-page-premium .product-section {
    overflow: hidden;
    padding: 10px 12px 12px !important;
}

.products-page-premium .section-bar {
    min-height: 0 !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
}

.products-page-premium .section-bar h2 {
    font-size: clamp(21px, 2vw, 28px) !important;
    line-height: .95 !important;
    margin: 0 !important;
}

.products-page-premium .section-kicker {
    margin-bottom: 2px !important;
    font-size: 10px !important;
}

.products-page-premium .section-bar strong {
    padding: 7px 11px !important;
}

.products-page-premium .section-bar + .admin-product-grid,
.products-page-premium .admin-product-grid {
    width: 100%;
    max-width: 100%;
    margin-top: 6px !important;
    gap: 12px !important;
    overflow: visible;
}

/* Cards: no generar ancho extra */
.products-page-premium .admin-product-grid {
    grid-template-columns: repeat(auto-fit, minmax(290px, 350px)) !important;
    justify-content: start !important;
}

.products-page-premium .admin-product-card {
    width: 100%;
    max-width: 350px;
    min-width: 0;
}

@media (max-width: 1280px) {
    .products-page-premium .catalog-toolbar {
        grid-template-columns: 1fr !important;
    }

    .products-page-premium .catalog-search {
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {
    .products-page-premium {
        overflow-x: hidden;
        gap: 8px !important;
    }

    .products-page-premium .products-control-panel {
        padding: 14px !important;
    }

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

    .products-page-premium .catalog-toolbar {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .products-page-premium .catalog-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 2px;
    }

    .products-page-premium .catalog-tabs::-webkit-scrollbar {
        height: 0;
    }

    .products-page-premium .product-section {
        padding: 10px !important;
    }

    .products-page-premium .admin-product-grid {
        grid-template-columns: 1fr !important;
    }

    .products-page-premium .admin-product-card {
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    .products-page-premium .catalog-overview {
        grid-template-columns: 1fr !important;
    }
}


/* ===== v55 Productos: click en card + padding correcto de secciones ===== */
.products-page-premium {
    overflow-x: hidden !important;
}

.products-page-premium .product-section {
    padding: 14px 16px 16px !important;
    overflow: visible !important;
}

.products-page-premium .section-bar {
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
    border: 1px solid rgba(255,255,255,.065) !important;
}

.products-page-premium .section-bar + .admin-product-grid,
.products-page-premium .admin-product-grid {
    margin-top: 12px !important;
    gap: 14px !important;
}

.products-page-premium .catalog-sections {
    gap: 10px !important;
}

.products-page-premium .catalog-sections .product-section + .product-section {
    margin-top: 8px !important;
}

.products-page-premium .admin-product-card {
    cursor: pointer;
    position: relative;
}

.products-page-premium .admin-product-card:focus-visible {
    outline: 2px solid rgba(var(--admin-accent-rgb), .65);
    outline-offset: 4px;
}

.products-page-premium .admin-product-card::after {
    content: 'Click para editar';
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 6;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.52);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.86);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .2px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.products-page-premium .admin-product-card:hover::after,
.products-page-premium .admin-product-card:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.products-page-premium .product-card-actions {
    z-index: 8;
}

.products-page-premium .product-card-actions a {
    cursor: pointer;
}

@media (max-width: 720px) {
    .products-page-premium .product-section {
        padding: 12px !important;
    }

    .products-page-premium .section-bar {
        padding: 11px 12px !important;
        margin-bottom: 8px !important;
    }

    .products-page-premium .section-bar + .admin-product-grid,
    .products-page-premium .admin-product-grid {
        margin-top: 10px !important;
        gap: 12px !important;
    }

    .products-page-premium .admin-product-card::after {
        display: none;
    }
}


/* ===== v56 Productos: corregir hover recortado en filtros ===== */
.products-page-premium .catalog-toolbar,
.products-page-premium .catalog-tabs {
    overflow: visible !important;
}

.products-page-premium .catalog-tabs {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.products-page-premium .catalog-tabs button {
    transform: none !important;
    position: relative;
}

.products-page-premium .catalog-tabs button:hover {
    transform: none !important;
    translate: none !important;
    box-shadow: 0 0 0 1px rgba(var(--admin-accent-rgb), .22), 0 10px 24px rgba(0,0,0,.18) !important;
}

.products-page-premium .catalog-tabs button.active {
    transform: none !important;
}

@media (max-width: 900px) {
    .products-page-premium .catalog-toolbar {
        overflow: visible !important;
    }

    .products-page-premium .catalog-tabs {
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding-top: 3px !important;
        padding-bottom: 6px !important;
    }

    .products-page-premium .catalog-tabs button:hover {
        transform: none !important;
    }
}


/* ===== v57 Productos: selección, eliminación masiva y doble click para editar ===== */
.products-page-premium .catalog-selection-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(var(--admin-accent-rgb), .14);
    background: rgba(var(--admin-accent-rgb), .055);
}

.products-page-premium .catalog-selection-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    color: #f4f4f4;
    font-weight: 850;
}

.products-page-premium .catalog-selection-copy i {
    color: var(--admin-accent);
}

.products-page-premium .catalog-selection-copy small {
    color: var(--muted);
    font-weight: 700;
}

.products-page-premium .danger-soft-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 14px;
    border-radius: 13px;
    border: 1px solid rgba(255, 90, 90, .28);
    background: rgba(255, 74, 74, .12);
    color: #ff9a9a;
    font-weight: 900;
    cursor: pointer;
}

.products-page-premium .danger-soft-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    filter: grayscale(.4);
}

.products-page-premium .section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.products-page-premium .section-delete-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 90, 90, .22);
    background: rgba(255, 74, 74, .10);
    color: #ff9a9a;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.products-page-premium .admin-product-card {
    user-select: none;
}

.products-page-premium .admin-product-card.is-selected {
    border-color: rgba(var(--admin-accent-rgb), .78) !important;
    box-shadow: 0 0 0 1px rgba(var(--admin-accent-rgb), .42), 0 20px 46px rgba(0,0,0,.34) !important;
}

.products-page-premium .product-select-item {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 9;
    width: 19px;
    height: 19px;
    opacity: 0;
    pointer-events: none;
}

.products-page-premium .product-selected-mark {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 9;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.42);
    color: rgba(255,255,255,.65);
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
    pointer-events: none;
}

.products-page-premium .admin-product-card.is-selected .product-selected-mark {
    background: rgba(var(--admin-accent-rgb), .92);
    border-color: rgba(var(--admin-accent-rgb), .92);
    color: #07100d;
    transform: scale(1.04);
}

.products-page-premium .admin-product-card::after {
    content: 'Click selecciona · doble click edita' !important;
    left: 48px !important;
}

@media (max-width: 900px) {
    .products-page-premium .catalog-selection-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .products-page-premium .catalog-selection-actions form,
    .products-page-premium .danger-soft-btn {
        width: 100%;
    }

    .products-page-premium .section-actions {
        width: 100%;
        justify-content: space-between;
    }

    .products-page-premium .section-delete-btn {
        flex: 1 1 auto;
    }
}


/* ===== v58 Categorías: gestor moderno de secciones ===== */
.category-admin-modern {
    display: grid;
    gap: 16px;
}

.category-admin-modern .category-hero-panel,
.category-admin-modern .category-stats-grid,
.category-admin-modern .category-create-premium,
.category-admin-modern .category-list-header,
.category-admin-modern .category-order-premium,
.category-admin-modern .category-preview-card {
    border: 1px solid rgba(255,255,255,.075);
    background: linear-gradient(145deg, rgba(255,255,255,.043), rgba(255,255,255,.018));
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

.category-admin-modern .category-hero-panel {
    padding: 20px;
    border-radius: 24px;
    margin-bottom: 0;
}

.category-admin-modern .category-hero-panel h2 {
    font-size: clamp(28px, 3vw, 42px);
    line-height: .95;
}

.category-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.category-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border-radius: 20px;
}

.category-stat-card > i {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--admin-accent);
    background: rgba(var(--admin-accent-rgb), .11);
    border: 1px solid rgba(var(--admin-accent-rgb), .20);
}

.category-stat-card div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.category-stat-card span,
.category-list-header span,
.category-create-copy span,
.category-side-head span {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: 10px;
    font-weight: 900;
}

.category-stat-card strong {
    font-size: 25px;
    line-height: 1;
}

.category-stat-card small {
    color: var(--muted);
    font-size: 12px;
}

.category-admin-modern .category-admin-layout {
    align-items: start;
    gap: 18px;
}

.category-admin-modern .category-admin-main {
    display: grid;
    gap: 14px;
}

.category-create-premium {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) 96px minmax(220px, 1.4fr) 100px auto !important;
    align-items: end;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 22px !important;
}

.category-create-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: center;
}

.category-create-copy > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--admin-accent);
    background: rgba(var(--admin-accent-rgb), .10);
    border: 1px solid rgba(var(--admin-accent-rgb), .18);
}

.category-create-copy strong {
    display: block;
    font-size: 15px;
}

.category-create-premium label span,
.category-card-form label span {
    display: block;
    margin-bottom: 7px;
    color: var(--admin-accent);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: 10px;
    font-weight: 900;
}

.category-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 20px;
}

.category-list-header h3 {
    margin: 3px 0 0;
    font-size: 22px;
    line-height: 1;
}

.category-list-header small {
    color: var(--muted);
    font-weight: 700;
}

.category-admin-modern .category-table-head {
    display: none !important;
}

.category-card-list {
    display: grid;
    gap: 12px;
}

.category-card-item {
    display: grid !important;
    grid-template-columns: 42px minmax(190px, 260px) minmax(0, 1fr) !important;
    align-items: center;
    gap: 12px;
    padding: 12px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    background:
        radial-gradient(circle at 0% 50%, rgba(var(--admin-accent-rgb), .10), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.014)) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.17);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.category-card-item:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--admin-accent-rgb), .24) !important;
    box-shadow: 0 22px 44px rgba(0,0,0,.22);
}

.category-card-item.dragging {
    opacity: .62;
    transform: scale(.985);
}

.category-card-item.is-empty {
    border-color: rgba(255, 198, 73, .15) !important;
}

.category-admin-modern .category-drag {
    width: 42px !important;
    height: 58px !important;
    border-radius: 16px !important;
    color: rgba(255,255,255,.52) !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
}

.category-card-preview {
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-areas:
        "icon info"
        "order info";
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.category-order-badge {
    grid-area: order;
    justify-self: center;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--admin-accent);
    background: rgba(var(--admin-accent-rgb), .09);
    border: 1px solid rgba(var(--admin-accent-rgb), .16);
    font-size: 11px;
    font-weight: 900;
}

.category-icon-preview {
    grid-area: icon;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    font-size: 20px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.07);
}

.category-card-preview div {
    grid-area: info;
    min-width: 0;
}

.category-card-preview strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
}

.category-card-preview small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 750;
}

.category-card-form {
    display: grid !important;
    grid-template-columns: 86px minmax(180px, 1fr) 92px auto !important;
    align-items: end;
    gap: 10px !important;
    min-width: 0;
}

.category-card-form label,
.category-card-form input {
    min-width: 0;
}

.category-card-form input {
    min-height: 44px !important;
    border-radius: 13px !important;
}

.category-card-form .category-row-actions {
    display: flex !important;
    justify-content: flex-end;
    gap: 8px;
}

.category-card-form .category-row-actions a,
.category-card-form .category-row-actions button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
}

.category-order-premium {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px !important;
    border-radius: 20px !important;
}

.category-order-premium span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.category-preview-card {
    position: sticky;
    top: 118px;
    padding: 16px !important;
    border-radius: 22px !important;
}

.category-side-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.category-side-head strong {
    font-size: 18px;
}

.category-preview-card p {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.45;
}

.category-admin-modern .category-mini-list {
    display: grid;
    gap: 9px;
}

.category-admin-modern .category-mini-list a {
    display: grid !important;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 10px 11px !important;
    border-radius: 14px !important;
    color: #f4f4f4 !important;
}

.category-admin-modern .category-mini-list a span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.045);
}

.category-admin-modern .category-mini-list a small {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(var(--admin-accent-rgb), .12);
    color: var(--admin-accent);
    font-weight: 900;
}

@media (max-width: 1280px) {
    .category-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-create-premium {
        grid-template-columns: 1fr 92px minmax(180px, 1fr) 90px !important;
    }

    .category-create-copy,
    .category-create-premium button {
        grid-column: 1 / -1;
    }

    .category-card-item {
        grid-template-columns: 42px 1fr !important;
    }

    .category-card-form {
        grid-column: 2 / -1;
        grid-template-columns: 78px minmax(160px, 1fr) 86px auto !important;
    }
}

@media (max-width: 980px) {
    .category-admin-modern .category-admin-layout {
        grid-template-columns: 1fr !important;
    }

    .category-preview-card {
        position: static;
    }
}

@media (max-width: 720px) {
    .category-stats-grid {
        grid-template-columns: 1fr;
    }

    .category-admin-modern .category-hero-panel {
        padding: 16px;
    }

    .category-create-premium {
        grid-template-columns: 1fr !important;
    }

    .category-card-item {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .category-admin-modern .category-drag {
        width: 100% !important;
        height: 34px !important;
    }

    .category-card-form {
        grid-column: auto;
        grid-template-columns: 1fr !important;
    }

    .category-card-form .category-row-actions {
        justify-content: stretch;
    }

    .category-card-form .category-row-actions a,
    .category-card-form .category-row-actions button {
        flex: 1 1 auto;
        width: auto !important;
    }

    .category-order-premium,
    .category-list-header {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ===== v59 Categorías: separación del panel lateral sticky con la cabecera ===== */
.category-admin-modern .category-preview-card,
.category-admin-modern .category-admin-side .category-side-card {
    top: 150px !important;
}

.category-admin-modern .category-admin-side {
    padding-top: 0 !important;
}

@media (max-width: 980px) {
    .category-admin-modern .category-preview-card,
    .category-admin-modern .category-admin-side .category-side-card {
        position: static !important;
        top: auto !important;
    }
}


/* ===== v60 Categorías: panel lateral con más aire + guardar orden más integrado ===== */

/* El panel derecho seguía quedando pegado porque el sticky anterior ganaba por especificidad.
   Lo empujamos más abajo y le damos aire visual. */
.category-admin-modern .category-admin-side {
    position: sticky !important;
    top: 172px !important;
    align-self: start !important;
    padding-top: 14px !important;
}

.category-admin-modern .category-preview-card,
.category-admin-modern .category-admin-side .category-side-card {
    position: relative !important;
    top: auto !important;
}

/* Mejor ritmo entre lista y panel de guardar orden */
.category-admin-modern .category-card-list {
    gap: 10px !important;
}

.category-admin-modern .category-order-premium {
    margin-top: 2px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.16) !important;
}

/* Que no parezca una barra suelta demasiado ancha: contenido más ordenado */
.category-admin-modern .category-order-premium > div:not(#reorderInputs) {
    display: grid;
    gap: 3px;
}

.category-admin-modern .category-order-premium strong {
    font-size: 15px !important;
}

.category-admin-modern .category-order-premium span {
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.category-admin-modern .category-order-premium .btn-muted {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 13px !important;
    background: rgba(var(--admin-accent-rgb), .18) !important;
    border-color: rgba(var(--admin-accent-rgb), .28) !important;
}

/* Reducimos un poco la altura visual de cada categoría para que el conjunto no se sienta pesado */
.category-admin-modern .category-card-item {
    padding: 10px !important;
}

.category-admin-modern .category-drag {
    height: 52px !important;
}

.category-admin-modern .category-icon-preview {
    width: 39px !important;
    height: 39px !important;
}

.category-admin-modern .category-card-form input {
    min-height: 40px !important;
}

.category-admin-modern .category-card-form .category-row-actions a,
.category-admin-modern .category-card-form .category-row-actions button {
    width: 40px !important;
    height: 40px !important;
}

/* En resoluciones medias el lateral baja y deja de ser sticky para no chocar con cabecera */
@media (max-width: 1180px) {
    .category-admin-modern .category-admin-side {
        position: static !important;
        top: auto !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 980px) {
    .category-admin-modern .category-order-premium {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ===== v61 Categorías: lateral menos separado + bloque guardar alineado a la izquierda ===== */

/* Dejamos el aside normal y hacemos sticky solo la tarjeta derecha, con menos separación */
.category-admin-modern .category-admin-side {
    position: static !important;
    top: auto !important;
    padding-top: 0 !important;
    align-self: start !important;
}

.category-admin-modern .category-preview-card,
.category-admin-modern .category-admin-side .category-side-card {
    position: sticky !important;
    top: 126px !important;
    margin-top: 4px !important;
}

/* El bloque inferior debe leerse desde la izquierda, no centrado */
.category-admin-modern .category-order-premium {
    justify-content: space-between !important;
    align-items: center !important;
    gap: 14px !important;
}

.category-admin-modern .category-order-premium > div:not(#reorderInputs) {
    text-align: left !important;
    justify-items: start !important;
    align-self: center !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    max-width: 100% !important;
}

.category-admin-modern .category-order-premium strong,
.category-admin-modern .category-order-premium span {
    text-align: left !important;
}

.category-admin-modern .category-order-premium .btn-muted {
    margin-left: auto !important;
}

@media (max-width: 1180px) {
    .category-admin-modern .category-preview-card,
    .category-admin-modern .category-admin-side .category-side-card {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 980px) {
    .category-admin-modern .category-order-premium {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .category-admin-modern .category-order-premium .btn-muted {
        margin-left: 0 !important;
    }
}


/* ===== v62 Categorías: lateral sticky correcto + evitar desborde de filas ===== */

/* El panel derecho vuelve a quedar fijado al scroll, pero sin quedar ni pegado ni demasiado abajo */
.category-admin-modern .category-admin-side {
    position: sticky !important;
    top: 132px !important;
    align-self: start !important;
    padding-top: 0 !important;
    z-index: 2 !important;
}

.category-admin-modern .category-preview-card,
.category-admin-modern .category-admin-side .category-side-card {
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
}

/* Evita que las filas de categorías se metan debajo del panel derecho */
.category-admin-modern .category-admin-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
    gap: 18px !important;
    align-items: start !important;
}

.category-admin-modern .category-admin-main,
.category-admin-modern .category-card-list,
.category-admin-modern .category-card-item,
.category-admin-modern .category-card-form {
    min-width: 0 !important;
    max-width: 100% !important;
}

.category-admin-modern .category-card-item {
    grid-template-columns: 40px minmax(150px, 210px) minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow: hidden !important;
}

.category-admin-modern .category-card-form {
    grid-template-columns: 72px minmax(130px, 1fr) 72px auto !important;
    gap: 8px !important;
}

.category-admin-modern .category-card-form .category-row-actions {
    min-width: 122px !important;
    gap: 6px !important;
}

.category-admin-modern .category-card-form .category-row-actions a,
.category-admin-modern .category-card-form .category-row-actions button {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
}

.category-admin-modern .category-card-form input {
    width: 100% !important;
}

/* Guardar orden: texto siempre a la izquierda */
.category-admin-modern .category-order-premium {
    justify-content: space-between !important;
    align-items: center !important;
}

.category-admin-modern .category-order-premium > div:not(#reorderInputs) {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    justify-items: start !important;
}

.category-admin-modern .category-order-premium strong,
.category-admin-modern .category-order-premium span {
    text-align: left !important;
}

/* En resoluciones donde no entra cómodo, el panel baja y las filas no se rompen */
@media (max-width: 1280px) {
    .category-admin-modern .category-admin-layout {
        grid-template-columns: minmax(0, 1fr) 290px !important;
    }

    .category-admin-modern .category-card-item {
        grid-template-columns: 38px minmax(130px, 180px) minmax(0, 1fr) !important;
    }

    .category-admin-modern .category-card-form {
        grid-template-columns: 66px minmax(110px, 1fr) 66px auto !important;
    }
}

@media (max-width: 1120px) {
    .category-admin-modern .category-admin-layout {
        grid-template-columns: 1fr !important;
    }

    .category-admin-modern .category-admin-side {
        position: static !important;
        top: auto !important;
    }

    .category-admin-modern .category-card-item {
        grid-template-columns: 42px minmax(180px, 240px) minmax(0, 1fr) !important;
        overflow: visible !important;
    }
}

@media (max-width: 720px) {
    .category-admin-modern .category-card-item {
        grid-template-columns: 1fr !important;
    }

    .category-admin-modern .category-card-form {
        grid-template-columns: 1fr !important;
    }

    .category-admin-modern .category-card-form .category-row-actions {
        min-width: 0 !important;
    }
}

/* v63 - compactación y pulido premium de la sección Modificar web */
.web-premium-editor {
    margin-top: 6px;
}

.web-editor-header-refined {
    padding: 16px 18px !important;
    border-radius: 18px !important;
}

.web-editor-header-refined h2 {
    font-size: clamp(23px, 1.9vw, 29px) !important;
}

.web-editor-header-refined p {
    margin-top: 6px !important;
}

.web-editor-grid-refined {
    grid-template-columns: minmax(0, 1fr) 400px !important;
    gap: 16px !important;
    padding-top: 16px !important;
}

.web-premium-editor .editor-main {
    gap: 14px !important;
}

.web-form-card-refined,
.hero-image-editor-card {
    padding: 18px !important;
    border-radius: 18px !important;
}

.web-form-card-refined .editor-card-title,
.hero-image-editor-card .editor-card-title {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
}

.web-text-grid-refined {
    gap: 12px !important;
}

.web-text-grid-refined textarea {
    min-height: 80px !important;
}

.compact-guidelines-card-inline {
    padding-top: 16px !important;
}

.compact-guidelines-head {
    margin-bottom: 12px !important;
}

.web-guidelines-inline-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.web-guidelines-inline-row > div {
    min-height: auto !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.028) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
}

.web-guidelines-inline-row strong {
    margin-bottom: 4px;
}

.hero-image-editor-card {
    position: sticky;
    top: 16px;
}

.hero-editor-workspace {
    gap: 12px !important;
}

.web-hero-preview-adjust {
    aspect-ratio: 16 / 9 !important;
    max-height: 300px !important;
    margin-bottom: 4px !important;
}

.hero-adjust-panel {
    padding: 12px !important;
    border-radius: 12px !important;
}

.hero-adjust-panel .image-adjust-head {
    margin-bottom: 10px !important;
}

.hero-adjust-panel .image-range-grid {
    gap: 8px !important;
}

.hero-adjust-actions {
    margin-top: 10px;
}

.hero-upload-area-refined {
    margin-top: 12px !important;
}

.hero-upload-compact {
    min-height: 80px !important;
    padding: 14px 16px !important;
}

.hero-upload-compact strong {
    font-size: 14px;
}

.hero-upload-compact small {
    max-width: none;
    line-height: 1.42;
}

@media (max-width: 1320px) {
    .web-editor-grid-refined {
        grid-template-columns: minmax(0, 1fr) 372px !important;
    }
}

@media (max-width: 1180px) {
    .web-editor-grid-refined {
        grid-template-columns: 1fr !important;
    }

    .hero-image-editor-card {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .web-editor-header-refined {
        padding: 14px !important;
    }

    .web-form-card-refined,
    .hero-image-editor-card {
        padding: 15px !important;
        border-radius: 16px !important;
    }

    .web-guidelines-inline-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .web-hero-preview-adjust {
        max-height: 245px !important;
    }
}


/* ===== v64 Web: editor de encuadre tipo app moderna ===== */
.hero-crop-entry-panel {
    display: grid !important;
    gap: 12px !important;
}

.hero-open-cropper {
    width: 100%;
    min-height: 48px !important;
    border-radius: 14px !important;
}

.hero-reset-compact {
    width: 100%;
    min-height: 42px !important;
    border-radius: 13px !important;
}

.hero-crop-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.hero-crop-values span {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.065);
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-weight: 850;
}

.hero-crop-values b,
.hero-crop-values em {
    display: block;
    margin-top: 3px;
    color: var(--admin-panel-color);
    font-style: normal;
    font-weight: 950;
}

.image-preview-zone .web-hero-preview-store {
    cursor: grab;
}

.image-preview-zone .web-hero-preview-store::after {
    content: 'Doble click para editar';
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 8;
    padding: 7px 10px;
    border-radius: 999px;
    color: rgba(255,255,255,.88);
    background: rgba(0,0,0,.48);
    border: 1px solid rgba(255,255,255,.10);
    font-size: 11px;
    font-weight: 850;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.image-preview-zone .web-hero-preview-store:hover::after {
    opacity: 1;
    transform: translateY(0);
}

body.hero-cropper-open {
    overflow: hidden;
}

.hero-cropper-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.hero-cropper-modal.is-open {
    display: flex;
}

.hero-cropper-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero-cropper-dialog {
    position: relative;
    z-index: 2;
    width: min(980px, 100%);
    max-height: calc(100vh - 44px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 28% 0%, rgba(var(--admin-panel-rgb), .18), transparent 34%),
        linear-gradient(145deg, rgba(26,26,26,.98), rgba(11,11,11,.98));
    box-shadow: 0 34px 90px rgba(0,0,0,.52);
}

.hero-cropper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.hero-cropper-head span {
    display: block;
    margin-bottom: 3px;
    color: var(--admin-panel-color);
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: 11px;
    font-weight: 950;
}

.hero-cropper-head strong {
    font-size: 24px;
    line-height: 1;
}

.hero-cropper-close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
    color: #fff;
    cursor: pointer;
}

.hero-cropper-stage-wrap {
    min-height: 0;
    padding: clamp(16px, 2.2vw, 24px);
    display: grid;
    place-items: center;
}

.hero-cropper-stage {
    position: relative;
    width: min(860px, 100%);
    aspect-ratio: 16 / 9;
    max-height: min(58vh, 520px);
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.13);
    background:
        linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.035) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.035) 75%),
        #080808;
    background-size: 28px 28px;
    background-position: 0 0, 0 14px, 14px -14px, -14px 0;
    cursor: grab;
    touch-action: none;
}

.hero-cropper-stage.is-dragging {
    cursor: grabbing;
}

.hero-cropper-stage img {
    width: 100%;
    height: 100%;
    object-fit: var(--hero-img-fit, cover);
    object-position: var(--hero-img-x, 50%) var(--hero-img-y, 50%);
    transform: scale(var(--hero-img-zoom, 1)) rotate(var(--hero-img-rotate, 0deg));
    transform-origin: var(--hero-img-x, 50%) var(--hero-img-y, 50%);
    user-select: none;
    pointer-events: none;
}

.hero-crop-frame {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border: 2px solid rgba(255,255,255,.86);
    box-shadow:
        inset 0 0 0 999px rgba(0,0,0,.04),
        0 0 0 1px rgba(0,0,0,.36);
}

.hero-crop-frame::before,
.hero-crop-frame::after {
    content: "";
    position: absolute;
    inset: 33.333% 0;
    border-top: 1px solid rgba(255,255,255,.24);
    border-bottom: 1px solid rgba(255,255,255,.24);
}

.hero-crop-frame::after {
    inset: 0 33.333%;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.24);
    border-right: 1px solid rgba(255,255,255,.24);
}

.hero-crop-help {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 8;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.12);
    font-size: 12px;
    font-weight: 850;
    pointer-events: none;
}

.hero-cropper-controls {
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: grid;
    gap: 13px;
}

.hero-cropper-controls label {
    display: grid;
    gap: 8px;
}

.hero-cropper-controls label span {
    color: rgba(255,255,255,.76);
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: 11px;
    font-weight: 950;
}

.hero-cropper-controls input[type="range"] {
    width: 100%;
    accent-color: var(--admin-panel-color);
}

.hero-cropper-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.hero-cropper-actions .btn-muted,
.hero-cropper-actions .btn-solid {
    min-height: 42px !important;
    border-radius: 13px !important;
}

@media (max-width: 720px) {
    .hero-cropper-modal {
        padding: 10px;
        align-items: end;
    }

    .hero-cropper-dialog {
        width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 22px 22px 0 0;
    }

    .hero-cropper-head {
        padding: 15px;
    }

    .hero-cropper-head strong {
        font-size: 20px;
    }

    .hero-cropper-stage-wrap {
        padding: 14px;
    }

    .hero-cropper-stage {
        border-radius: 18px;
        max-height: 44vh;
    }

    .hero-cropper-controls {
        padding: 14px;
    }

    .hero-cropper-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hero-cropper-actions #heroCropApply {
        grid-column: 1 / -1;
    }

    .hero-crop-values {
        grid-template-columns: 1fr;
    }

    .image-preview-zone .web-hero-preview-store::after {
        display: none;
    }
}


/* ===== v65 Web: el cropper usa exactamente el mismo encuadre que la vista guardada ===== */
/* Antes el modal usaba object-position y formato 16:9, mientras la vista real usa formato 1:1
   con translate/zoom. Eso hacía que se guardara distinto a lo que se veía editando. */

.hero-cropper-stage {
    width: min(560px, 100%) !important;
    aspect-ratio: 1 / 1 !important;
    max-height: min(62vh, 560px) !important;
    border-radius: 36px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.01)),
        radial-gradient(circle at 50% 35%, rgba(var(--admin-panel-rgb), .22), transparent 55%),
        #0d0d0d !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
}

.hero-cropper-stage img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: var(--hero-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(var(--hero-img-pan-x, 0%), var(--hero-img-pan-y, 0%)) scale(var(--hero-img-zoom, 1)) rotate(var(--hero-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 26px 22px rgba(0,0,0,.48));
    will-change: transform;
}

.hero-cropper-stage img[src$="burger-demo.svg"] {
    width: 82% !important;
    height: 82% !important;
    object-fit: contain !important;
    transform: none !important;
}

.hero-crop-frame {
    border-radius: 36px !important;
}

/* La grilla ahora marca el marco real cuadrado, no un banner diferente */
.hero-crop-frame::before,
.hero-crop-frame::after {
    opacity: .75;
}

.hero-cropper-stage-wrap {
    padding: clamp(18px, 2.4vw, 28px) !important;
}

/* La mini vista del panel y el modal comparten la misma lógica visual */
.web-hero-preview-store img,
.hero-cropper-stage img {
    object-position: center center !important;
    transform-origin: center center !important;
}

@media (max-width: 720px) {
    .hero-cropper-stage {
        width: min(100%, 380px) !important;
        max-height: 56vh !important;
        border-radius: 24px !important;
    }

    .hero-crop-frame {
        border-radius: 24px !important;
    }
}


/* ===== v67 Web: reorden estable, banner protagonista sin romper layout ===== */
.web-layout-v67 {
    display: grid;
    gap: 16px;
    padding-top: 16px;
}

.hero-focus-card-v67 {
    padding: clamp(18px, 2vw, 24px) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--admin-panel-rgb), .16), transparent 34%),
        linear-gradient(145deg, rgba(28,28,28,.98), rgba(12,12,12,.98)) !important;
}

.hero-focus-top-v67 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.hero-focus-top-v67 h3 {
    margin: 5px 0 7px;
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1.02;
}

.hero-focus-top-v67 p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,.70);
    line-height: 1.45;
}

.hero-focus-actions-v67 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-upload-btn-v67 {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.hero-upload-btn-v67 input {
    display: none;
}

.hero-focus-grid-v67 {
    display: grid;
    grid-template-columns: minmax(420px, 0.95fr) minmax(330px, 0.55fr);
    gap: 18px;
    align-items: stretch;
}

.hero-preview-panel-v67,
.hero-settings-panel-v67 {
    min-width: 0;
}

.hero-preview-panel-v67 {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.065);
    background: rgba(0,0,0,.18);
}

.hero-preview-main-v67 {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
}

.hero-current-file-v67 {
    display: block;
    margin-top: 10px !important;
    text-align: center;
}

.hero-settings-panel-v67 {
    display: grid;
    align-content: start;
    gap: 13px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.065);
    background: rgba(255,255,255,.026);
}

.hero-settings-panel-v67 .refined-card-title {
    margin-bottom: 0 !important;
    padding-bottom: 12px !important;
}

.hero-crop-values-v67 {
    grid-template-columns: 1fr !important;
}

.hero-settings-note-v67 {
    margin: 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(var(--admin-panel-rgb), .22);
    background: rgba(var(--admin-panel-rgb), .055);
    color: rgba(255,255,255,.66);
    line-height: 1.45;
    font-weight: 700;
}

.web-secondary-grid-v67 {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 16px;
    align-items: start;
}

.web-secondary-grid-v67 .web-guidelines-inline-row {
    grid-template-columns: 1fr !important;
}

.web-secondary-grid-v67 .web-guidelines-inline-row > div {
    min-height: 0 !important;
}

@media (max-width: 1280px) {
    .hero-focus-grid-v67 {
        grid-template-columns: minmax(360px, .9fr) minmax(300px, .55fr);
    }

    .hero-preview-main-v67 {
        width: min(100%, 470px) !important;
        max-width: 470px !important;
    }
}

@media (max-width: 1080px) {
    .hero-focus-top-v67 {
        flex-direction: column;
    }

    .hero-focus-actions-v67 {
        width: 100%;
        justify-content: flex-start;
    }

    .hero-focus-grid-v67,
    .web-secondary-grid-v67 {
        grid-template-columns: 1fr !important;
    }

    .hero-preview-main-v67 {
        width: min(100%, 540px) !important;
        max-width: 540px !important;
    }

    .web-secondary-grid-v67 .web-guidelines-inline-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .web-layout-v67 {
        padding-top: 12px;
        gap: 12px;
    }

    .hero-focus-card-v67 {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .hero-focus-actions-v67 {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-preview-panel-v67,
    .hero-settings-panel-v67 {
        padding: 12px;
    }

    .web-secondary-grid-v67 .web-guidelines-inline-row {
        grid-template-columns: 1fr !important;
    }
}


/* ===== v68 Web: banner independiente, sin contenedor gigante ===== */

/* La sección ya no estira el panel de imagen a todo el ancho disponible */
.hero-focus-card-v67 {
    padding: 20px !important;
}

.hero-focus-grid-v67 {
    grid-template-columns: auto minmax(360px, 1fr) !important;
    align-items: start !important;
    justify-content: start !important;
    gap: 18px !important;
}

/* El preview pasa a ser una tarjeta propia, ajustada al tamaño real de la imagen */
.hero-preview-panel-v67 {
    width: fit-content !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--admin-panel-rgb), .10), transparent 52%),
        rgba(255,255,255,.025) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.22) !important;
}

.hero-preview-panel-v67 .preview-block-title {
    margin-bottom: 10px !important;
    padding: 0 2px !important;
}

/* Tamaño controlado: tiene presencia, pero no queda flotando dentro de un contenedor enorme */
.hero-preview-main-v67 {
    width: clamp(340px, 31vw, 520px) !important;
    max-width: 520px !important;
    margin: 0 !important;
}

.hero-current-file-v67 {
    max-width: clamp(340px, 31vw, 520px) !important;
    margin: 10px 0 0 !important;
    text-align: left !important;
    opacity: .72;
}

/* El panel derecho también queda como card independiente, no pegado a un bloque estirado */
.hero-settings-panel-v67 {
    max-width: 560px !important;
    align-self: stretch !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.018)) !important;
}

/* Los botones de arriba quedan más claros y sin empujar el layout */
.hero-focus-actions-v67 {
    align-self: start !important;
}

.hero-focus-actions-v67 .hero-open-cropper,
.hero-focus-actions-v67 .hero-upload-btn-v67 {
    min-width: 170px;
}

/* Los textos secundarios quedan más cerca y con mejor proporción */
.web-secondary-grid-v67 {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px) !important;
}

/* En pantallas medianas sí vuelve a una columna limpia */
@media (max-width: 1180px) {
    .hero-focus-grid-v67 {
        grid-template-columns: 1fr !important;
    }

    .hero-preview-panel-v67 {
        width: 100% !important;
    }

    .hero-preview-main-v67 {
        width: min(100%, 520px) !important;
        margin: 0 auto !important;
    }

    .hero-current-file-v67 {
        max-width: min(100%, 520px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero-settings-panel-v67 {
        max-width: 100% !important;
    }
}

@media (max-width: 720px) {
    .hero-focus-card-v67 {
        padding: 14px !important;
    }

    .hero-preview-panel-v67 {
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .hero-preview-main-v67 {
        width: 100% !important;
    }

    .hero-focus-actions-v67 .hero-open-cropper,
    .hero-focus-actions-v67 .hero-upload-btn-v67 {
        min-width: 0;
        width: 100%;
    }
}


/* ===== v69 Web: banner más independiente + recomendaciones dentro del bloque superior ===== */

/* El contenedor superior deja de ser una caja gigante vacía */
.hero-focus-card-v67 {
    width: 100% !important;
    max-width: 1280px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    overflow: visible !important;
}

/* Contenido más compacto y balanceado */
.hero-focus-grid-v67 {
    grid-template-columns: auto minmax(340px, 520px) !important;
    justify-content: start !important;
    align-items: start !important;
    gap: 18px !important;
}

/* La imagen se siente como módulo propio, no flotando dentro de un fondo enorme */
.hero-preview-panel-v67 {
    width: fit-content !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.20) !important;
}

.hero-preview-main-v67 {
    width: clamp(340px, 28vw, 480px) !important;
    max-width: 480px !important;
    margin: 0 !important;
}

.hero-current-file-v67 {
    max-width: clamp(340px, 28vw, 480px) !important;
    margin: 10px 0 0 !important;
    text-align: left !important;
}

/* La columna derecha contiene ajustes + recomendaciones y acompaña con scroll */
.hero-settings-panel-v67 {
    max-width: 520px !important;
    position: sticky !important;
    top: 116px !important;
    align-self: start !important;
    gap: 12px !important;
}

/* Recomendaciones ahora quedan dentro del bloque superior, compactas */
.hero-guidelines-inside-v69 {
    margin-top: 2px !important;
    padding: 13px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.028) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: none !important;
}

.hero-guidelines-inside-v69 .refined-card-title {
    margin-bottom: 10px !important;
    padding-bottom: 9px !important;
}

.hero-guidelines-inside-v69 .web-guidelines-inline-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

.hero-guidelines-inside-v69 .web-guidelines-inline-row > div {
    padding: 10px !important;
    border-radius: 12px !important;
    min-height: 0 !important;
}

/* Como recomendaciones ya subieron, la zona secundaria queda solo para textos y no se parte raro */
.web-secondary-grid-v67 {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 980px !important;
}

/* Si el segundo espacio queda vacío por el movimiento, no debe ocupar lugar */
.web-secondary-grid-v67 > .web-guidelines-card-side:empty {
    display: none !important;
}

.web-text-card-refined {
    width: 100% !important;
}

/* La card de textos baja como bloque secundario, más tranquila */
.web-secondary-grid-v67 .web-text-grid-refined {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.web-secondary-grid-v67 .web-text-grid-refined .full {
    grid-column: 1 / -1 !important;
}

/* Menos aire vertical general */
.web-layout-v67 {
    gap: 14px !important;
}

@media (max-width: 1180px) {
    .hero-focus-card-v67 {
        max-width: 100% !important;
    }

    .hero-focus-grid-v67 {
        grid-template-columns: 1fr !important;
    }

    .hero-preview-panel-v67 {
        width: 100% !important;
    }

    .hero-preview-main-v67 {
        width: min(100%, 500px) !important;
        max-width: 500px !important;
        margin: 0 auto !important;
    }

    .hero-current-file-v67 {
        max-width: min(100%, 500px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero-settings-panel-v67 {
        position: static !important;
        max-width: 100% !important;
    }

    .hero-guidelines-inside-v69 .web-guidelines-inline-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .web-secondary-grid-v67 {
        max-width: 100% !important;
    }
}

@media (max-width: 720px) {
    .hero-focus-card-v67 {
        padding: 14px !important;
    }

    .hero-preview-main-v67 {
        width: 100% !important;
    }

    .hero-guidelines-inside-v69 .web-guidelines-inline-row,
    .web-secondary-grid-v67 .web-text-grid-refined {
        grid-template-columns: 1fr !important;
    }
}


/* ===== v70 Web: portada con más protagonismo y mejor uso del ancho desktop ===== */
.web-premium-editor .web-layout-v67 {
    max-width: 1320px !important;
    width: 100% !important;
    gap: 18px !important;
}

.web-premium-editor .hero-focus-card-v67 {
    max-width: 1320px !important;
    width: 100% !important;
    padding: clamp(18px, 1.55vw, 24px) !important;
    background:
        radial-gradient(circle at 26% 8%, rgba(var(--admin-panel-rgb), .18), transparent 34%),
        linear-gradient(145deg, rgba(28,28,28,.98), rgba(10,10,10,.98)) !important;
}

.web-premium-editor .hero-focus-top-v67 {
    align-items: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
}

.web-premium-editor .hero-focus-grid-v67 {
    grid-template-columns: minmax(560px, 1.45fr) minmax(360px, .82fr) !important;
    gap: clamp(18px, 1.65vw, 26px) !important;
    align-items: start !important;
    justify-content: stretch !important;
}

.web-premium-editor .hero-preview-panel-v67 {
    width: 100% !important;
    padding: clamp(14px, 1.25vw, 18px) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--admin-panel-rgb), .13), transparent 56%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.26) !important;
}

.web-premium-editor .hero-preview-panel-v67 .preview-block-title {
    margin-bottom: 12px !important;
    letter-spacing: .04em !important;
}

.web-premium-editor .hero-preview-main-v67 {
    width: min(100%, 680px) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    border-radius: 34px !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.58) !important;
}

.web-premium-editor .hero-current-file-v67 {
    max-width: 680px !important;
    margin: 12px auto 0 !important;
    text-align: left !important;
}

.web-premium-editor .hero-settings-panel-v67 {
    max-width: none !important;
    position: sticky !important;
    top: 112px !important;
    padding: clamp(15px, 1.2vw, 18px) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.02)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

.web-premium-editor .hero-crop-values-v67 {
    gap: 8px !important;
}

.web-premium-editor .hero-crop-values-v67 span {
    border-color: rgba(255,255,255,.075) !important;
    background: rgba(0,0,0,.18) !important;
}

.web-premium-editor .hero-settings-note-v67 {
    border-color: rgba(var(--admin-panel-rgb), .26) !important;
    background: rgba(var(--admin-panel-rgb), .07) !important;
}

.web-premium-editor .hero-guidelines-inside-v69 {
    background: rgba(0,0,0,.17) !important;
    border-color: rgba(255,255,255,.07) !important;
}

.web-premium-editor .web-secondary-grid-v67 {
    max-width: 1320px !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
}

.web-premium-editor .web-text-card-refined {
    max-width: 100% !important;
    padding: clamp(16px, 1.3vw, 20px) !important;
    border-radius: 22px !important;
}

.web-premium-editor .web-secondary-grid-v67 .web-text-grid-refined {
    grid-template-columns: minmax(220px, .52fr) minmax(320px, .88fr) !important;
    gap: 12px !important;
}

.web-premium-editor .web-secondary-grid-v67 .web-text-grid-refined .full {
    grid-column: 1 / -1 !important;
}

@media (min-width: 1500px) {
    .web-premium-editor .web-layout-v67,
    .web-premium-editor .hero-focus-card-v67,
    .web-premium-editor .web-secondary-grid-v67 {
        max-width: 1420px !important;
    }

    .web-premium-editor .hero-focus-grid-v67 {
        grid-template-columns: minmax(620px, 1.55fr) minmax(380px, .78fr) !important;
    }

    .web-premium-editor .hero-preview-main-v67 {
        max-width: 740px !important;
    }

    .web-premium-editor .hero-current-file-v67 {
        max-width: 740px !important;
    }
}

@media (max-width: 1220px) {
    .web-premium-editor .hero-focus-grid-v67 {
        grid-template-columns: 1fr !important;
    }

    .web-premium-editor .hero-settings-panel-v67 {
        position: static !important;
    }

    .web-premium-editor .hero-preview-main-v67 {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
    }

    .web-premium-editor .hero-guidelines-inside-v69 .web-guidelines-inline-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .web-premium-editor .hero-focus-top-v67 {
        align-items: stretch !important;
        padding-bottom: 12px !important;
    }

    .web-premium-editor .hero-preview-panel-v67,
    .web-premium-editor .hero-settings-panel-v67,
    .web-premium-editor .web-text-card-refined {
        border-radius: 17px !important;
    }

    .web-premium-editor .hero-preview-main-v67 {
        width: 100% !important;
        max-width: none !important;
        border-radius: 24px !important;
    }

    .web-premium-editor .hero-current-file-v67 {
        max-width: none !important;
        text-align: center !important;
    }

    .web-premium-editor .hero-guidelines-inside-v69 .web-guidelines-inline-row,
    .web-premium-editor .web-secondary-grid-v67 .web-text-grid-refined {
        grid-template-columns: 1fr !important;
    }
}

/* ===== v71 Web: portada moderna sin espacios muertos ===== */
.web-premium-editor .web-layout-v67 {
    max-width: none !important;
    width: 100% !important;
}

.web-premium-editor .hero-focus-card-v67,
.web-premium-editor .web-secondary-grid-v67 {
    max-width: none !important;
    width: 100% !important;
}

.web-premium-editor .hero-focus-grid-v67 {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px) !important;
    gap: clamp(18px, 1.6vw, 28px) !important;
    align-items: start !important;
}

.web-premium-editor .hero-preview-modern-v71 {
    min-height: 0 !important;
    align-self: start !important;
    padding: clamp(14px, 1.2vw, 18px) !important;
    background:
        radial-gradient(circle at 78% 16%, rgba(var(--admin-panel-rgb), .18), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.018)) !important;
}

.hero-live-shell-v71 {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 340px);
    gap: clamp(16px, 1.4vw, 24px);
    align-items: center;
    min-height: 330px;
    padding: clamp(18px, 1.8vw, 28px);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.62) 48%, rgba(0,0,0,.28)),
        radial-gradient(circle at 78% 46%, rgba(var(--admin-panel-rgb), .20), transparent 36%),
        #090909;
    border: 1px solid rgba(255,255,255,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 28px 70px rgba(0,0,0,.32);
}

.hero-live-shell-v71::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.28), transparent 70%);
}

.hero-live-copy-v71 {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.hero-live-tag-v71 {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 8px 11px;
    margin-bottom: 16px;
    border-radius: 999px;
    color: rgb(var(--admin-panel-rgb));
    background: rgba(var(--admin-panel-rgb), .12);
    border: 1px solid rgba(var(--admin-panel-rgb), .26);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-live-copy-v71 strong {
    display: block;
    max-width: 650px;
    font-size: clamp(32px, 3.05vw, 58px);
    line-height: .95;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: #fff;
}

.hero-live-copy-v71 p {
    max-width: 560px;
    margin: 16px 0 0;
    color: rgba(255,255,255,.72);
    line-height: 1.55;
    font-weight: 700;
}

.hero-live-actions-v71 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.hero-live-actions-v71 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 950;
    color: #0b0b0b;
    background: linear-gradient(135deg, rgb(var(--admin-panel-rgb)), rgba(var(--admin-panel-rgb), .78));
    box-shadow: 0 16px 28px rgba(var(--admin-panel-rgb), .18);
}

.hero-live-actions-v71 span + span {
    color: #fff;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: none;
}

.hero-live-image-wrap-v71 {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.web-premium-editor .hero-preview-modern-v71 .hero-preview-main-v67 {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    margin: 0 !important;
    border-radius: 28px !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.64) !important;
}

.web-premium-editor .hero-preview-modern-v71 .hero-current-file-v67 {
    max-width: 100% !important;
    margin: 12px 2px 0 !important;
    text-align: left !important;
}

.web-premium-editor .hero-settings-panel-v67 {
    align-self: start !important;
}

.web-premium-editor .web-secondary-grid-v67 .web-text-grid-refined {
    grid-template-columns: minmax(220px, .42fr) minmax(320px, .58fr) !important;
}

@media (min-width: 1500px) {
    .hero-live-shell-v71 {
        grid-template-columns: minmax(360px, 1fr) minmax(300px, 380px);
        min-height: 360px;
    }

    .web-premium-editor .hero-preview-modern-v71 .hero-preview-main-v67 {
        width: min(100%, 360px) !important;
        max-width: 360px !important;
    }
}

@media (max-width: 1220px) {
    .web-premium-editor .hero-focus-grid-v67 {
        grid-template-columns: 1fr !important;
    }

    .hero-live-shell-v71 {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    }
}

@media (max-width: 860px) {
    .hero-live-shell-v71 {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .hero-live-image-wrap-v71 {
        justify-content: flex-start;
    }

    .web-premium-editor .hero-preview-modern-v71 .hero-preview-main-v67 {
        width: min(100%, 360px) !important;
        max-width: 360px !important;
    }
}

@media (max-width: 760px) {
    .hero-live-shell-v71 {
        padding: 14px;
        border-radius: 18px;
    }

    .hero-live-copy-v71 strong {
        font-size: clamp(30px, 10vw, 44px);
    }

    .hero-live-copy-v71 p {
        font-size: 13px;
    }

    .web-premium-editor .hero-preview-modern-v71 .hero-preview-main-v67 {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ===== v72 Web: tres módulos independientes, sin contenedor gigante ===== */
.web-premium-editor .web-layout-v72 {
    max-width: 1380px !important;
    width: 100% !important;
    display: grid !important;
    gap: 16px !important;
    padding-top: 16px !important;
}

.web-banner-intro-v72 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 0 2px 2px;
}

.web-banner-intro-v72 h3 {
    margin: 5px 0 6px;
    font-size: clamp(25px, 2vw, 34px);
    line-height: 1.02;
    letter-spacing: -.03em;
    color: #fff;
}

.web-banner-intro-v72 p {
    margin: 0;
    max-width: 720px;
    color: rgba(255,255,255,.66);
    font-weight: 650;
    line-height: 1.45;
}

.web-banner-actions-v72 {
    flex-shrink: 0;
}

.web-modular-grid-v72 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    grid-template-areas:
        "preview settings"
        "texts   settings";
    gap: clamp(14px, 1.25vw, 20px);
    align-items: start;
}

.web-card-preview-v72,
.web-card-text-v72,
.web-card-settings-v72 {
    min-width: 0;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--admin-panel-rgb), .12), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.22) !important;
}

.web-card-preview-v72 {
    grid-area: preview;
    width: 100% !important;
    padding: clamp(14px, 1.2vw, 18px) !important;
}

.web-card-text-v72 {
    grid-area: texts;
    width: 100% !important;
    padding: clamp(16px, 1.25vw, 20px) !important;
}

.web-card-settings-v72 {
    grid-area: settings;
    width: 100% !important;
    max-width: none !important;
    position: sticky !important;
    top: 112px !important;
    align-self: start !important;
    padding: clamp(15px, 1.15vw, 18px) !important;
    gap: 12px !important;
}

.web-card-preview-v72 .hero-live-shell-v71 {
    min-height: clamp(300px, 19vw, 380px) !important;
}

.web-card-preview-v72 .hero-preview-main-v67 {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    margin: 0 !important;
}

.web-card-preview-v72 .hero-current-file-v67 {
    max-width: 100% !important;
    margin: 11px 2px 0 !important;
    text-align: left !important;
    opacity: .72;
}

.web-card-text-v72 .refined-card-title {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
}

.web-card-text-v72 .web-text-grid-refined {
    display: grid !important;
    grid-template-columns: minmax(220px, .42fr) minmax(320px, .58fr) !important;
    gap: 12px !important;
}

.web-card-text-v72 .web-text-grid-refined .full {
    grid-column: 1 / -1 !important;
}

.web-card-text-v72 textarea {
    min-height: 96px !important;
    resize: vertical;
}

.web-card-settings-v72 .hero-guidelines-inside-v69 {
    margin-top: 0 !important;
    padding: 13px !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,.16) !important;
    border: 1px solid rgba(255,255,255,.065) !important;
}

.web-card-settings-v72 .web-guidelines-inline-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

.web-card-settings-v72 .web-guidelines-inline-row > div {
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
}

.web-card-settings-v72 .hero-crop-values-v67 {
    grid-template-columns: 1fr !important;
}

/* Evita que reglas anteriores de v67/v71 vuelvan a crear una caja grande */
.web-layout-v72 .hero-focus-card-v67,
.web-layout-v72 .web-secondary-grid-v67 {
    display: contents !important;
}

@media (min-width: 1500px) {
    .web-premium-editor .web-layout-v72 {
        max-width: 1460px !important;
    }

    .web-modular-grid-v72 {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 460px);
    }

    .web-card-preview-v72 .hero-live-shell-v71 {
        min-height: 390px !important;
    }

    .web-card-preview-v72 .hero-preview-main-v67 {
        width: min(100%, 365px) !important;
        max-width: 365px !important;
    }
}

@media (max-width: 1220px) {
    .web-modular-grid-v72 {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "preview"
            "texts"
            "settings";
    }

    .web-card-settings-v72 {
        position: static !important;
    }

    .web-card-settings-v72 .web-guidelines-inline-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    .web-banner-intro-v72 {
        align-items: stretch;
        flex-direction: column;
    }

    .web-banner-actions-v72 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .web-card-preview-v72 .hero-live-shell-v71 {
        min-height: 0 !important;
    }

    .web-card-preview-v72 .hero-preview-main-v67 {
        width: min(100%, 360px) !important;
        max-width: 360px !important;
    }
}

@media (max-width: 760px) {
    .web-premium-editor .web-layout-v72 {
        gap: 12px !important;
        padding-top: 12px !important;
    }

    .web-card-preview-v72,
    .web-card-text-v72,
    .web-card-settings-v72 {
        border-radius: 17px !important;
    }

    .web-banner-actions-v72 {
        grid-template-columns: 1fr;
    }

    .web-card-text-v72 .web-text-grid-refined,
    .web-card-settings-v72 .web-guidelines-inline-row {
        grid-template-columns: 1fr !important;
    }

    .web-card-preview-v72 .hero-preview-main-v67 {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ===== v73 Web: distribución a ancho completo como Categorías ===== */
.web-premium-editor {
    width: 100% !important;
}

.web-premium-editor .web-layout-v72 {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.web-banner-intro-v72 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 460px) !important;
    align-items: end !important;
    gap: clamp(14px, 1.25vw, 20px) !important;
    width: 100% !important;
}

.web-banner-actions-v72,
.hero-focus-actions-v67.web-banner-actions-v72 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.web-banner-actions-v72 .btn-solid,
.web-banner-actions-v72 .btn-muted,
.web-banner-actions-v72 .hero-upload-btn-v67 {
    width: auto !important;
    min-width: 185px !important;
    height: 42px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.web-modular-grid-v72 {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 460px) !important;
    gap: clamp(14px, 1.25vw, 20px) !important;
}

.web-card-settings-v72 {
    justify-self: stretch !important;
}

.web-card-preview-v72 .hero-live-shell-v71 {
    min-height: clamp(330px, 21vw, 420px) !important;
}

.web-card-preview-v72 .hero-live-image-wrap-v71 {
    justify-content: flex-end !important;
}

.web-card-preview-v72 .hero-preview-main-v67 {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
}

.web-card-text-v72 .web-text-grid-refined {
    grid-template-columns: minmax(260px, .34fr) minmax(420px, .66fr) !important;
}

@media (min-width: 1500px) {
    .web-banner-intro-v72,
    .web-modular-grid-v72 {
        grid-template-columns: minmax(0, 1fr) minmax(440px, 480px) !important;
    }

    .web-card-preview-v72 .hero-preview-main-v67 {
        width: min(100%, 455px) !important;
        max-width: 455px !important;
    }
}

@media (max-width: 1220px) {
    .web-banner-intro-v72,
    .web-modular-grid-v72 {
        grid-template-columns: 1fr !important;
    }

    .web-banner-actions-v72,
    .hero-focus-actions-v67.web-banner-actions-v72 {
        justify-content: flex-start !important;
    }
}

@media (max-width: 760px) {
    .web-banner-actions-v72,
    .hero-focus-actions-v67.web-banner-actions-v72 {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .web-banner-actions-v72 .btn-solid,
    .web-banner-actions-v72 .btn-muted,
    .web-banner-actions-v72 .hero-upload-btn-v67 {
        width: 100% !important;
        min-width: 0 !important;
    }

    .web-card-text-v72 .web-text-grid-refined {
        grid-template-columns: 1fr !important;
    }
}

/* ===== v74 Web: acciones integradas al bloque de portada ===== */
.web-banner-intro-v72 {
    grid-template-columns: 1fr !important;
}

.web-banner-intro-v72 > div:first-child {
    max-width: 900px;
}

.web-preview-card-head-v74 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 0 2px 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.web-preview-card-head-v74 .preview-block-title {
    margin: 0 0 4px !important;
}

.web-preview-card-head-v74 small {
    display: block;
    color: rgba(255,255,255,.55);
    font-weight: 650;
    line-height: 1.35;
}

.web-preview-actions-v74,
.hero-focus-actions-v67.web-preview-actions-v74 {
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
}

.web-preview-actions-v74 .btn-solid,
.web-preview-actions-v74 .btn-muted,
.web-preview-actions-v74 .hero-upload-btn-v67 {
    min-width: 160px !important;
    height: 40px !important;
    border-radius: 11px !important;
}

.web-preview-actions-v74 .btn-solid {
    box-shadow: 0 10px 24px rgba(var(--admin-panel-rgb), .18) !important;
}

.web-card-preview-v72 .hero-live-shell-v71 {
    margin-top: 0 !important;
}

@media (max-width: 1220px) {
    .web-preview-card-head-v74 {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .web-preview-actions-v74,
    .hero-focus-actions-v67.web-preview-actions-v74 {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 760px) {
    .web-preview-card-head-v74 {
        gap: 12px !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }

    .web-preview-actions-v74,
    .hero-focus-actions-v67.web-preview-actions-v74 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .web-preview-actions-v74 .btn-solid,
    .web-preview-actions-v74 .btn-muted,
    .web-preview-actions-v74 .hero-upload-btn-v67 {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* ===== v75 Ajustes pedidos + web ===== */
/* La bajada de Portada visual ya vive dentro del bloque de vista previa; evitamos texto duplicado. */
.web-banner-intro-v72 {
    align-items: flex-start !important;
}

/* Separación extra cuando el panel derecho acompaña el scroll, para que no quede pegado a la cabecera. */
.web-card-settings-v72 {
    top: 132px !important;
}

/* Pedidos: en tarjetas angostas el código largo debe conservar su propia línea.
   Los metadatos y "Marcar visto" bajan a una segunda línea para no romper el código. */
@media (max-width: 760px) {
    body.admin-orders-page .order-card-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    body.admin-orders-page .order-card-code-wrap {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    body.admin-orders-page .order-card-code-wrap strong {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: min(210px, 100%) !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.05 !important;
    }

    body.admin-orders-page .order-card-code-wrap .new-dot,
    body.admin-orders-page .order-card-code-wrap .order-seen-badge {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
    }

    body.admin-orders-page .order-card-top-right {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    body.admin-orders-page .order-card-time,
    body.admin-orders-page .order-age-badge,
    body.admin-orders-page .order-mini-action {
        flex: 0 0 auto !important;
    }

    body.admin-orders-page .order-mini-action {
        margin-left: 0 !important;
    }
}

@media (max-width: 420px) {
    body.admin-orders-page .order-card-code-wrap strong {
        font-size: clamp(22px, 7vw, 28px) !important;
        letter-spacing: -.04em !important;
    }
}


/* ===== v76 Web: quitar encabezado duplicado, alinear paneles y preview realmente útil ===== */
.web-premium-editor .web-layout-v72 {
    padding-top: 0 !important;
}

.web-banner-intro-v72 {
    display: none !important;
}

.web-modular-grid-v72 {
    align-items: start !important;
}

.web-card-preview-v72,
.web-card-settings-v72 {
    align-self: start !important;
    margin-top: 0 !important;
}

.web-card-settings-v72 {
    top: 132px !important;
}

.web-preview-card-head-v74 {
    min-height: 44px !important;
}

.web-card-preview-v72 .hero-live-shell-v71 {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .72fr) !important;
    min-height: clamp(420px, 27vw, 520px) !important;
    padding: clamp(30px, 3vw, 52px) !important;
    align-items: center !important;
}

.web-card-preview-v72 .hero-live-copy-v71 strong {
    max-width: 780px !important;
    font-size: clamp(44px, 4.15vw, 78px) !important;
    line-height: .94 !important;
}

.web-card-preview-v72 .hero-live-copy-v71 p {
    max-width: 620px !important;
    font-size: clamp(13px, .95vw, 16px) !important;
}

.web-card-preview-v72 .hero-live-image-wrap-v71 {
    justify-content: center !important;
}

.web-card-preview-v72 .hero-preview-main-v67,
.web-card-preview-v72 .web-hero-preview-store {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    margin: 0 auto !important;
    border-radius: 34px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.012)),
        radial-gradient(circle at 50% 35%, rgba(var(--admin-panel-rgb), .22), transparent 55%),
        #0d0d0d !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.55) !important;
    overflow: hidden !important;
}

.web-card-preview-v72 .web-hero-preview-store img,
.web-card-preview-v72 .hero-preview-main-v67 img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: var(--hero-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(var(--hero-img-pan-x, 0%), var(--hero-img-pan-y, 0%)) scale(var(--hero-img-zoom, 1)) rotate(var(--hero-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 26px 22px rgba(0,0,0,.48));
}

.web-card-preview-v72 .web-hero-preview-store img[src$="burger-demo.svg"],
.web-card-preview-v72 .hero-preview-main-v67 img[src$="burger-demo.svg"] {
    width: 82% !important;
    height: 82% !important;
    margin: auto !important;
    object-fit: contain !important;
    transform: none !important;
}

@media (min-width: 1500px) {
    .web-card-preview-v72 .hero-preview-main-v67,
    .web-card-preview-v72 .web-hero-preview-store {
        width: min(100%, 455px) !important;
        max-width: 455px !important;
    }
}

@media (max-width: 1280px) {
    .web-card-preview-v72 .hero-live-shell-v71 {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr) !important;
    }
}

@media (max-width: 980px) {
    .web-card-preview-v72 .hero-live-shell-v71 {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .web-card-preview-v72 .hero-live-image-wrap-v71 {
        justify-content: flex-start !important;
    }

    .web-card-preview-v72 .hero-preview-main-v67,
    .web-card-preview-v72 .web-hero-preview-store {
        width: min(100%, 380px) !important;
        max-width: 380px !important;
    }
}

@media (max-width: 760px) {
    .web-card-preview-v72 .hero-live-shell-v71 {
        padding: 22px !important;
    }

    .web-card-preview-v72 .hero-preview-main-v67,
    .web-card-preview-v72 .web-hero-preview-store {
        width: 100% !important;
        max-width: none !important;
        border-radius: 24px !important;
    }
}


/* ===== v77 Web: alineación exacta + sin apertura del menú por swipe ===== */
.web-modular-grid-v72 {
    align-items: start !important;
}

.web-modular-grid-v72 > .web-card-preview-v72,
.web-modular-grid-v72 > .web-card-settings-v72 {
    align-self: start !important;
    margin-top: 0 !important;
}

/* Compensa reglas globales antiguas de .editor-card + .editor-card que podían bajar la columna derecha. */
.web-modular-grid-v72 > .editor-card + .editor-card,
.web-modular-grid-v72 > .web-card-settings-v72.hero-settings-panel-v67 {
    margin-top: 0 !important;
}

.web-modular-grid-v72 > .web-card-settings-v72 {
    position: sticky !important;
    top: 132px !important;
    transform: translateY(-1px);
}

@media (max-width: 1220px) {
    .web-modular-grid-v72 > .web-card-settings-v72 {
        transform: none;
    }
}

/* vFINANCE PRO REDESIGN - Centro financiero moderno */
.finance-command-center {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 18px !important;
    align-items: stretch !important;
    margin: 22px 0 18px !important;
}

.finance-hero-card,
.finance-side-panel,
.finance-actions-zone,
.finance-ledger-panel,
.finance-breakdown-card,
.finance-table-panel {
    background:
        radial-gradient(circle at top left, rgba(var(--admin-accent-rgb), .12), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
        var(--panel) !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

.finance-hero-card {
    padding: 22px !important;
    overflow: hidden !important;
    position: relative !important;
}

.finance-hero-card::after {
    content: "" !important;
    position: absolute !important;
    right: -120px !important;
    top: -120px !important;
    width: 300px !important;
    height: 300px !important;
    border-radius: 999px !important;
    background: rgba(var(--admin-accent-rgb), .10) !important;
    filter: blur(6px) !important;
    pointer-events: none !important;
}

.finance-hero-top,
.finance-side-head,
.finance-card-heading,
.finance-ledger-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.finance-kicker,
.finance-section-title span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--admin-accent) !important;
    text-transform: uppercase !important;
    letter-spacing: .75px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

.finance-hero-top h2,
.finance-section-title h2 {
    margin: 5px 0 0 !important;
    font-size: clamp(24px, 2.1vw, 34px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.8px !important;
}

.finance-hero-top p,
.finance-section-title p,
.finance-card-heading p,
.finance-ledger-head p {
    color: var(--muted) !important;
    margin-top: 6px !important;
    line-height: 1.45 !important;
}

.finance-balance-pill {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.045) !important;
    color: #f4f4f4 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.finance-balance-pill.is-positive {
    background: rgba(34,197,94,.10) !important;
    border-color: rgba(34,197,94,.20) !important;
    color: #a7f3d0 !important;
}

.finance-balance-pill.is-negative {
    background: rgba(255,77,77,.10) !important;
    border-color: rgba(255,77,77,.22) !important;
    color: #fecaca !important;
}

.finance-balance-main {
    position: relative !important;
    z-index: 1 !important;
    margin: 34px 0 24px !important;
    padding: 22px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(0,0,0,.34), rgba(var(--admin-accent-rgb), .08)) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
}

.finance-balance-main span,
.finance-hero-metrics span,
.finance-ratio-list span {
    display: block !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.finance-balance-main strong {
    display: block !important;
    margin-top: 6px !important;
    font-size: clamp(42px, 5vw, 72px) !important;
    line-height: .95 !important;
    letter-spacing: -2.8px !important;
}

.finance-balance-main small,
.finance-hero-metrics small {
    display: block !important;
    color: var(--muted-2) !important;
    margin-top: 9px !important;
}

.finance-hero-metrics {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.finance-hero-metrics > div,
.finance-ratio-list > div {
    padding: 15px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
}

.finance-hero-metrics strong,
.finance-ratio-list strong {
    display: block !important;
    margin-top: 5px !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    letter-spacing: -.35px !important;
}

.finance-side-panel,
.finance-breakdown-card {
    padding: 18px !important;
}

.finance-side-head {
    justify-content: flex-start !important;
    align-items: center !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

.finance-side-head > i {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-dark)) !important;
}

.finance-side-head strong {
    display: block !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

.finance-side-head span {
    display: block !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    margin-top: 3px !important;
    line-height: 1.35 !important;
}

.finance-flow-list {
    display: grid !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

.finance-flow-list > div {
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.032) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
}

.finance-flow-list span {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    color: var(--admin-accent) !important;
    background: rgba(var(--admin-accent-rgb), .12) !important;
    font-weight: 950 !important;
}

.finance-flow-list p {
    color: #dedede !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.finance-actions-zone {
    padding: 20px !important;
    margin-bottom: 18px !important;
}

.finance-section-title {
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    margin-bottom: 18px !important;
}

.finance-form-grid-pro {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: 18px !important;
}

.finance-box-pro {
    padding: 18px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        #111 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: none !important;
}

.finance-income-card {
    border-color: rgba(34,197,94,.14) !important;
}

.finance-expense-card {
    border-color: rgba(248,113,113,.14) !important;
}

.finance-title-inline {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    min-width: 0 !important;
}

.finance-form-icon {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 15px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(var(--admin-accent-rgb), .12) !important;
    color: var(--admin-accent) !important;
    border: 1px solid rgba(var(--admin-accent-rgb), .16) !important;
}

.finance-card-heading h3 {
    font-size: 21px !important;
    line-height: 1.12 !important;
    margin: 0 !important;
}

.finance-pro-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
}

.finance-field-wide,
.finance-submit-btn {
    grid-column: 1 / -1 !important;
}

.finance-submit-btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    margin-top: 4px !important;
}

.finance-ledger-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 18px !important;
    align-items: start !important;
    margin-bottom: 18px !important;
}

.finance-ledger-panel {
    padding: 18px !important;
}

.finance-ledger-head {
    margin-bottom: 16px !important;
}

.finance-movement-list {
    display: grid !important;
    gap: 10px !important;
}

.finance-movement-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 13px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.032) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
}

.finance-movement-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.045) !important;
}

.finance-movement-row.is-income .finance-movement-icon,
.finance-movement-row.is-income .finance-movement-amount {
    color: #86efac !important;
}

.finance-movement-row.is-expense .finance-movement-icon,
.finance-movement-row.is-expense .finance-movement-amount {
    color: #fca5a5 !important;
}

.finance-movement-main {
    min-width: 0 !important;
}

.finance-movement-main strong {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
}

.finance-movement-main small {
    display: block !important;
    margin-top: 4px !important;
    color: var(--muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.finance-movement-amount {
    font-size: 17px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.finance-movement-actions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.finance-movement-actions a {
    width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
    padding: 0 !important;
}

.finance-ratio-list {
    display: grid !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

.finance-empty-state {
    min-height: 170px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 24px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px dashed rgba(255,255,255,.12) !important;
}

.finance-empty-state i {
    font-size: 25px !important;
    color: var(--admin-accent) !important;
}

.finance-empty-state strong {
    font-size: 17px !important;
}

.finance-empty-state span {
    color: var(--muted) !important;
}

.finance-table-panel {
    margin-top: 18px !important;
    overflow: hidden !important;
}

.finance-table-panel .panel-head {
    background: rgba(255,255,255,.025) !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

.finance-list-panel table th {
    color: rgba(255,255,255,.72) !important;
    font-size: 11px !important;
    letter-spacing: .55px !important;
}

.finance-list-panel table td {
    vertical-align: middle !important;
}

@media (max-width: 1280px) {
    .finance-command-center,
    .finance-ledger-layout {
        grid-template-columns: 1fr !important;
    }

    .finance-side-panel,
    .finance-breakdown-card {
        position: relative !important;
        top: auto !important;
    }
}

@media (max-width: 1020px) {
    .finance-form-grid-pro,
    .finance-hero-metrics {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .finance-command-center,
    .finance-actions-zone,
    .finance-ledger-layout {
        margin-top: 14px !important;
    }

    .finance-hero-card,
    .finance-side-panel,
    .finance-actions-zone,
    .finance-ledger-panel,
    .finance-breakdown-card {
        border-radius: 18px !important;
        padding: 15px !important;
    }

    .finance-hero-top,
    .finance-card-heading,
    .finance-ledger-head {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .finance-balance-pill {
        width: 100% !important;
        justify-content: center !important;
    }

    .finance-balance-main {
        margin: 18px 0 !important;
        padding: 16px !important;
    }

    .finance-movement-row {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    .finance-movement-amount,
    .finance-movement-actions {
        grid-column: 2 !important;
    }

    .finance-movement-actions {
        justify-content: flex-start !important;
    }

    .finance-pro-form,
    .expense-clean-form {
        grid-template-columns: 1fr !important;
    }
}

/* vFINANCE REWORK - layout independiente y más moderno */
.finance-overview-grid,
.finance-action-cards-grid,
.finance-stream-grid,
.finance-records-grid {
    display: grid !important;
    gap: 18px !important;
    align-items: start !important;
}

.finance-overview-grid {
    grid-template-columns: minmax(0, 1.2fr) 320px !important;
    margin: 22px 0 18px !important;
}

.finance-action-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 18px 0 !important;
}

.finance-stream-grid {
    grid-template-columns: minmax(0, 1fr) 290px !important;
    margin-bottom: 18px !important;
}

.finance-records-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 0 0 18px !important;
}

.finance-bento-card {
    background:
        radial-gradient(circle at top left, rgba(var(--admin-accent-rgb), .10), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
        var(--panel) !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

.finance-intro-strip {
    padding: 18px 20px !important;
    margin-bottom: 4px !important;
}

.finance-intro-strip h2 {
    margin: 5px 0 0 !important;
    font-size: clamp(24px, 2vw, 32px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.7px !important;
}

.finance-intro-strip p {
    margin-top: 6px !important;
    color: var(--muted) !important;
}

.finance-overview-grid .finance-side-panel,
.finance-stream-grid .finance-breakdown-card,
.finance-action-card,
.finance-record-card {
    height: auto !important;
    align-self: start !important;
}

.finance-overview-grid .finance-side-panel,
.finance-stream-grid .finance-breakdown-card {
    position: sticky !important;
    top: 104px !important;
}

.finance-action-card {
    padding: 18px !important;
    overflow: hidden !important;
}

.finance-action-card .finance-card-heading {
    margin-bottom: 16px !important;
}

.finance-action-card .finance-pro-form {
    display: grid !important;
    gap: 13px !important;
}

.finance-pro-form-income {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.finance-pro-form-expense {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.finance-action-card .finance-submit-btn {
    margin-top: 2px !important;
}

.finance-stream-grid .finance-ledger-panel,
.finance-record-card {
    padding: 18px !important;
    overflow: hidden !important;
}

.finance-record-card .panel-head {
    background: transparent !important;
    padding-bottom: 14px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

.finance-table-wrap {
    overflow: auto !important;
}

.finance-record-card table {
    min-width: 100% !important;
}

.finance-record-card tbody tr td,
.finance-record-card thead th {
    white-space: nowrap !important;
}

.finance-record-card .row-actions {
    flex-wrap: wrap !important;
}

.finance-record-card .row-actions a {
    white-space: nowrap !important;
}

.finance-records-grid .finance-record-card:first-child table {
    min-width: 760px !important;
}

.finance-records-grid .finance-record-card:last-child table {
    min-width: 980px !important;
}

.finance-record-card tbody tr td:last-child,
.finance-record-card thead th:last-child {
    width: 1% !important;
}

/* desactivar aspecto de gran contenedor compartido en finanzas */
.finance-actions-zone {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 1320px) {
    .finance-overview-grid,
    .finance-stream-grid,
    .finance-records-grid {
        grid-template-columns: 1fr !important;
    }

    .finance-overview-grid .finance-side-panel,
    .finance-stream-grid .finance-breakdown-card {
        position: relative !important;
        top: auto !important;
    }
}

@media (max-width: 980px) {
    .finance-action-cards-grid,
    .finance-records-grid,
    .finance-hero-metrics,
    .finance-pro-form-income,
    .finance-pro-form-expense {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .finance-overview-grid,
    .finance-action-cards-grid,
    .finance-stream-grid,
    .finance-records-grid {
        gap: 14px !important;
    }

    .finance-intro-strip,
    .finance-action-card,
    .finance-record-card,
    .finance-overview-grid .finance-side-panel,
    .finance-stream-grid .finance-breakdown-card,
    .finance-hero-card {
        border-radius: 18px !important;
        padding: 15px !important;
    }
}

/* vFINANCE BENTO FINAL - caja moderna, bloques independientes */
.finance-modern-shell {
    display: grid !important;
    gap: 18px !important;
    margin-top: 22px !important;
}

.finance-modern-shell * {
    box-sizing: border-box !important;
}

.finance-surface {
    background:
        radial-gradient(circle at top left, rgba(var(--admin-accent-rgb), .12), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.046), rgba(255,255,255,.018)),
        var(--panel) !important;
    border: 1px solid rgba(255,255,255,.088) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
}

.finance-control-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 18px !important;
    align-items: start !important;
}

.finance-control-main,
.finance-automation-card,
.finance-entry-card,
.finance-ledger-column,
.finance-recent-strip {
    align-self: start !important;
    height: auto !important;
}

.finance-control-main {
    padding: 22px !important;
    min-height: 0 !important;
}

.finance-control-header,
.finance-card-heading.clean-heading,
.finance-ledger-title {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.finance-control-header h2,
.finance-section-title-line h2,
.finance-ledger-title h2 {
    margin: 4px 0 0 !important;
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.75px !important;
}

.finance-control-header p,
.finance-section-title-line p,
.finance-ledger-title p,
.clean-heading p {
    margin: 7px 0 0 !important;
    color: var(--muted) !important;
}

.finance-balance-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 14px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    background: rgba(var(--admin-accent-rgb), .12) !important;
    border: 1px solid rgba(var(--admin-accent-rgb), .26) !important;
    color: var(--admin-accent) !important;
}

.finance-balance-display {
    margin: 22px 0 16px !important;
    min-height: 140px !important;
    padding: 23px !important;
    display: grid !important;
    align-content: center !important;
    border-radius: 20px !important;
    border: 1px solid rgba(var(--admin-accent-rgb), .16) !important;
    background:
        radial-gradient(circle at 80% 15%, rgba(var(--admin-accent-rgb), .16), transparent 32%),
        linear-gradient(135deg, rgba(0,0,0,.24), rgba(255,255,255,.025)) !important;
}

.finance-balance-display span,
.finance-mini-metric span,
.finance-entry-form label span {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .55px !important;
    font-weight: 900 !important;
    color: rgba(255,255,255,.64) !important;
}

.finance-balance-display strong {
    display: block !important;
    margin: 4px 0 !important;
    font-size: clamp(48px, 5vw, 76px) !important;
    line-height: .9 !important;
    letter-spacing: -2.5px !important;
    color: #fff !important;
}

.finance-balance-display small,
.finance-mini-metric small {
    color: var(--muted) !important;
}

.finance-metric-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.finance-mini-metric {
    min-width: 0 !important;
    padding: 17px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    background: rgba(255,255,255,.032) !important;
}

.finance-mini-metric strong {
    display: block !important;
    margin: 6px 0 2px !important;
    font-size: 22px !important;
    color: #fff !important;
}

.finance-automation-card {
    padding: 18px !important;
}

.finance-side-head {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.finance-side-head > i {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(var(--admin-accent-rgb), .16) !important;
    color: var(--admin-accent) !important;
    flex: 0 0 auto !important;
}

.finance-side-head strong {
    display: block !important;
    font-size: 17px !important;
    color: #fff !important;
}

.finance-side-head span {
    display: block !important;
    color: var(--muted) !important;
    margin-top: 3px !important;
}

.compact-flow {
    margin-top: 18px !important;
    display: grid !important;
    gap: 10px !important;
}

.compact-flow div {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 13px !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.038) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
}

.compact-flow span {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(var(--admin-accent-rgb), .12) !important;
    color: var(--admin-accent) !important;
    font-weight: 900 !important;
}

.compact-flow p {
    margin: 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.finance-section-title-line {
    padding: 4px 2px 0 !important;
}

.finance-dual-actions,
.finance-ledgers-modern {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
}

.finance-entry-card {
    padding: 18px !important;
}

.finance-income-panel {
    border-color: rgba(var(--admin-accent-rgb), .20) !important;
}

.finance-expense-panel {
    border-color: rgba(255,105,105,.16) !important;
}

.clean-heading {
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

.clean-heading h3 {
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 1.05 !important;
}

.finance-entry-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
}

.finance-entry-form .field-full {
    grid-column: 1 / -1 !important;
}

.finance-entry-form label {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.finance-entry-form input,
.finance-entry-form select {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    background: rgba(0,0,0,.24) !important;
    color: #fff !important;
    padding: 0 13px !important;
    outline: none !important;
}

.finance-entry-form input:focus,
.finance-entry-form select:focus {
    border-color: rgba(var(--admin-accent-rgb), .45) !important;
    box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), .10) !important;
}

.finance-submit-btn {
    min-height: 46px !important;
    justify-content: center !important;
    border-radius: 13px !important;
    font-weight: 900 !important;
}

.finance-ledger-column {
    padding: 18px !important;
}

.finance-ledger-title {
    padding-bottom: 14px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

.finance-ledger-title h2 {
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.finance-ledger-title > strong {
    font-size: 24px !important;
    color: #fff !important;
    white-space: nowrap !important;
}

.finance-compact-list {
    display: grid !important;
    gap: 10px !important;
    max-height: 430px !important;
    overflow: auto !important;
    padding-right: 4px !important;
}

.finance-compact-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 13px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    background: rgba(255,255,255,.032) !important;
}

.finance-compact-row.income-row {
    border-left: 3px solid rgba(var(--admin-accent-rgb), .72) !important;
}

.finance-compact-row.expense-row {
    border-left: 3px solid rgba(255,105,105,.72) !important;
}

.finance-compact-main {
    min-width: 0 !important;
}

.finance-compact-main strong {
    display: block !important;
    color: #fff !important;
    font-size: 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.finance-compact-main span {
    display: block !important;
    margin-top: 3px !important;
    color: var(--muted) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.finance-compact-side {
    display: grid !important;
    justify-items: end !important;
    gap: 8px !important;
}

.finance-compact-side b {
    color: #fff !important;
    font-size: 15px !important;
}

.finance-compact-side .row-actions {
    gap: 7px !important;
    flex-wrap: nowrap !important;
}

.finance-compact-side .row-actions a {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.small-empty {
    min-height: 175px !important;
    border-radius: 16px !important;
}

.finance-recent-strip {
    padding: 18px !important;
}

.finance-recent-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(230px, 1fr)) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
}

.finance-recent-pill {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 12px !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.032) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
}

.finance-recent-pill > span {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(var(--admin-accent-rgb), .12) !important;
    color: var(--admin-accent) !important;
}

.finance-recent-pill.is-expense > span {
    background: rgba(255,105,105,.12) !important;
    color: #ff7979 !important;
}

.finance-recent-pill strong,
.finance-recent-pill small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.finance-recent-pill strong {
    color: #fff !important;
}

.finance-recent-pill small {
    color: var(--muted) !important;
    margin-top: 2px !important;
}

.finance-recent-pill b {
    color: #fff !important;
    white-space: nowrap !important;
}

/* esconder estructuras viejas si quedan en caché o mezcladas */
.finance-overview-grid,
.finance-intro-strip,
.finance-action-cards-grid,
.finance-stream-grid,
.finance-records-grid {
    align-items: start !important;
}

@media (max-width: 1280px) {
    .finance-control-board {
        grid-template-columns: 1fr !important;
    }

    .finance-automation-card {
        position: relative !important;
        top: auto !important;
    }
}

@media (max-width: 1060px) {
    .finance-dual-actions,
    .finance-ledgers-modern {
        grid-template-columns: 1fr !important;
    }

    .finance-recent-scroll {
        grid-template-columns: repeat(2, minmax(230px, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .finance-modern-shell {
        gap: 14px !important;
        margin-top: 16px !important;
    }

    .finance-control-main,
    .finance-automation-card,
    .finance-entry-card,
    .finance-ledger-column,
    .finance-recent-strip {
        border-radius: 18px !important;
        padding: 15px !important;
    }

    .finance-control-header,
    .finance-card-heading.clean-heading,
    .finance-ledger-title {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .finance-balance-chip {
        width: 100% !important;
        justify-content: center !important;
    }

    .finance-balance-display {
        min-height: 112px !important;
        padding: 17px !important;
    }

    .finance-balance-display strong {
        font-size: 46px !important;
    }

    .finance-metric-row,
    .finance-entry-form,
    .finance-recent-scroll {
        grid-template-columns: 1fr !important;
    }

    .finance-compact-row,
    .finance-recent-pill {
        grid-template-columns: 1fr !important;
        justify-items: start !important;
    }

    .finance-compact-side {
        width: 100% !important;
        justify-items: start !important;
    }
}

/* vFINANCE PRO - rediseño definitivo tipo panel financiero, sin bloques dependientes */
.finance-pro-shell {
    display: grid !important;
    gap: 18px !important;
    margin-top: 22px !important;
}

.finance-pro-shell * {
    box-sizing: border-box !important;
}

.finance-pro-surface {
    background:
        radial-gradient(circle at 8% 0%, rgba(var(--admin-accent-rgb), .13), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.050), rgba(255,255,255,.016)),
        var(--panel) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.24) !important;
    overflow: hidden !important;
    min-width: 0 !important;
    height: auto !important;
    align-self: start !important;
}

.finance-pro-top-grid {
    display: grid !important;
    grid-template-columns: minmax(360px, 1.55fr) repeat(3, minmax(160px, .68fr)) minmax(260px, .78fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

.finance-pro-hero {
    padding: 22px !important;
}

.finance-pro-headline,
.finance-pro-form-head,
.finance-pro-ledger-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.finance-pro-kicker,
.finance-pro-title-wrap small,
.finance-pro-form label span,
.finance-pro-metric span {
    display: block !important;
    font-size: 11px !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
    font-weight: 950 !important;
    color: var(--admin-accent) !important;
}

.finance-pro-headline h2 {
    margin: 4px 0 0 !important;
    font-size: clamp(28px, 2.6vw, 42px) !important;
    letter-spacing: -1.2px !important;
    line-height: .96 !important;
    color: #fff !important;
}

.finance-pro-headline p,
.finance-pro-form-head p,
.finance-pro-ledger-head p,
.finance-pro-automation-title span {
    margin: 7px 0 0 !important;
    color: var(--muted) !important;
    line-height: 1.35 !important;
}

.finance-pro-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 13px !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    color: var(--admin-accent) !important;
    background: rgba(var(--admin-accent-rgb), .13) !important;
    border: 1px solid rgba(var(--admin-accent-rgb), .24) !important;
}

.finance-pro-status.is-negative {
    color: #ff7d7d !important;
    background: rgba(255, 105, 105, .12) !important;
    border-color: rgba(255, 105, 105, .24) !important;
}

.finance-pro-balance {
    margin-top: 22px !important;
    padding: 22px !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 88% 20%, rgba(var(--admin-accent-rgb), .18), transparent 34%),
        linear-gradient(135deg, rgba(0,0,0,.33), rgba(255,255,255,.025)) !important;
    border: 1px solid rgba(var(--admin-accent-rgb), .16) !important;
}

.finance-pro-balance span,
.finance-pro-balance small,
.finance-pro-metric small {
    color: var(--muted) !important;
}

.finance-pro-balance strong {
    display: block !important;
    margin: 5px 0 !important;
    font-size: clamp(48px, 5vw, 78px) !important;
    line-height: .9 !important;
    letter-spacing: -3px !important;
    color: #fff !important;
}

.finance-pro-metric {
    padding: 18px !important;
    display: grid !important;
    gap: 8px !important;
}

.finance-pro-metric strong {
    display: block !important;
    font-size: 28px !important;
    letter-spacing: -.7px !important;
    color: #fff !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.finance-pro-automation {
    padding: 18px !important;
}

.finance-pro-automation-title {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.finance-pro-automation-title > i,
.finance-pro-title-wrap > span {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    background: rgba(var(--admin-accent-rgb), .16) !important;
    color: var(--admin-accent) !important;
}

.finance-pro-automation-title strong,
.finance-pro-title-wrap h3,
.finance-pro-ledger-head h3 {
    display: block !important;
    margin: 0 !important;
    color: #fff !important;
}

.finance-pro-automation ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 0 !important;
    display: grid !important;
    gap: 9px !important;
}

.finance-pro-automation li {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    padding: 11px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.034) !important;
    border: 1px solid rgba(255,255,255,.074) !important;
    color: rgba(255,255,255,.86) !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.finance-pro-automation li span {
    width: 26px !important;
    height: 26px !important;
    border-radius: 9px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(var(--admin-accent-rgb), .13) !important;
    color: var(--admin-accent) !important;
    font-weight: 950 !important;
}

.finance-pro-actions-grid,
.finance-pro-history-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
}

.finance-pro-form-card {
    padding: 20px !important;
}

.finance-pro-income {
    border-color: rgba(var(--admin-accent-rgb), .22) !important;
}

.finance-pro-expense {
    border-color: rgba(255,105,105,.18) !important;
    background:
        radial-gradient(circle at 6% 0%, rgba(255,105,105,.08), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.050), rgba(255,255,255,.016)),
        var(--panel) !important;
}

.finance-pro-title-wrap {
    display: flex !important;
    gap: 13px !important;
    align-items: flex-start !important;
}

.finance-pro-title-wrap h3 {
    margin-top: 4px !important;
    font-size: clamp(22px, 1.8vw, 28px) !important;
    letter-spacing: -.55px !important;
    line-height: 1 !important;
}

.finance-pro-cancel {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    background: rgba(255,255,255,.035) !important;
    white-space: nowrap !important;
}

.finance-pro-form {
    margin-top: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
}

.finance-pro-form .span-2 {
    grid-column: 1 / -1 !important;
}

.finance-pro-form label {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.finance-pro-form input,
.finance-pro-form select {
    width: 100% !important;
    min-height: 45px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255,255,255,.115) !important;
    background: rgba(0,0,0,.27) !important;
    color: #fff !important;
    outline: none !important;
    padding: 0 13px !important;
    font-weight: 780 !important;
}

.finance-pro-form input:focus,
.finance-pro-form select:focus {
    border-color: rgba(var(--admin-accent-rgb), .48) !important;
    box-shadow: 0 0 0 3px rgba(var(--admin-accent-rgb), .10) !important;
}

.finance-pro-submit {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    font-weight: 950 !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--admin-accent), rgba(var(--admin-accent-rgb), .62)) !important;
    box-shadow: 0 14px 28px rgba(var(--admin-accent-rgb), .16) !important;
    cursor: pointer !important;
}

.finance-pro-expense .finance-pro-submit {
    background: linear-gradient(135deg, rgba(var(--admin-accent-rgb), .84), rgba(255,105,105,.50)) !important;
}

.finance-pro-ledger {
    padding: 18px !important;
}

.finance-pro-ledger-head {
    padding-bottom: 14px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
}

.finance-pro-ledger-head h3 {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin-top: 5px !important;
    font-size: 22px !important;
    letter-spacing: -.45px !important;
}

.finance-pro-ledger-head > strong {
    color: #fff !important;
    font-size: 24px !important;
    white-space: nowrap !important;
}

.finance-pro-list {
    display: grid !important;
    gap: 10px !important;
    max-height: 410px !important;
    overflow: auto !important;
    padding-right: 4px !important;
}

.finance-pro-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 13px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.033) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
}

.finance-pro-row.income-row {
    border-left: 3px solid rgba(var(--admin-accent-rgb), .75) !important;
}

.finance-pro-row.expense-row {
    border-left: 3px solid rgba(255,105,105,.75) !important;
}

.finance-pro-row strong,
.finance-pro-row span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.finance-pro-row strong {
    color: #fff !important;
    font-size: 14px !important;
}

.finance-pro-row span {
    color: var(--muted) !important;
    margin-top: 4px !important;
}

.finance-pro-row aside {
    display: grid !important;
    justify-items: end !important;
    gap: 8px !important;
}

.finance-pro-row aside b {
    color: #fff !important;
    font-size: 15px !important;
}

.finance-pro-row nav {
    display: inline-flex !important;
    gap: 7px !important;
}

.finance-pro-row nav a {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: var(--admin-accent) !important;
    background: rgba(var(--admin-accent-rgb), .11) !important;
    text-decoration: none !important;
}

.finance-pro-row nav a.danger {
    color: #ff7777 !important;
    background: rgba(255, 85, 85, .12) !important;
}

.finance-pro-empty {
    min-height: 160px !important;
    border-radius: 17px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    border: 1px dashed rgba(255,255,255,.12) !important;
    background: rgba(0,0,0,.18) !important;
    color: var(--muted) !important;
}

.finance-pro-empty i {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(var(--admin-accent-rgb), .13) !important;
    color: var(--admin-accent) !important;
}

.finance-pro-empty strong {
    color: #fff !important;
}

.finance-pro-recent {
    padding: 18px !important;
}

.finance-pro-recent-track {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
}

.finance-pro-pill {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 11px !important;
    align-items: center !important;
    padding: 12px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    background: rgba(255,255,255,.033) !important;
    min-width: 0 !important;
}

.finance-pro-pill > span {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(var(--admin-accent-rgb), .13) !important;
    color: var(--admin-accent) !important;
}

.finance-pro-pill.is-expense > span {
    background: rgba(255,105,105,.12) !important;
    color: #ff7777 !important;
}

.finance-pro-pill strong,
.finance-pro-pill small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.finance-pro-pill strong,
.finance-pro-pill b {
    color: #fff !important;
}

.finance-pro-pill small {
    color: var(--muted) !important;
    margin-top: 3px !important;
}

.finance-pro-pill b {
    white-space: nowrap !important;
}

/* Evita que las columnas se estiren entre sí en cualquier grilla de finanzas */
.finance-pro-top-grid > *,
.finance-pro-actions-grid > *,
.finance-pro-history-grid > * {
    align-self: start !important;
    height: auto !important;
}

@media (max-width: 1540px) {
    .finance-pro-top-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    .finance-pro-hero { grid-column: span 6 !important; }
    .finance-pro-metric { grid-column: span 2 !important; }
    .finance-pro-automation { grid-column: span 6 !important; }
}

@media (max-width: 1120px) {
    .finance-pro-top-grid,
    .finance-pro-actions-grid,
    .finance-pro-history-grid {
        grid-template-columns: 1fr !important;
    }
    .finance-pro-hero,
    .finance-pro-metric,
    .finance-pro-automation {
        grid-column: auto !important;
    }
}

@media (max-width: 760px) {
    .finance-pro-shell {
        gap: 14px !important;
        margin-top: 16px !important;
    }
    .finance-pro-hero,
    .finance-pro-metric,
    .finance-pro-automation,
    .finance-pro-form-card,
    .finance-pro-ledger,
    .finance-pro-recent {
        padding: 15px !important;
        border-radius: 18px !important;
    }
    .finance-pro-headline,
    .finance-pro-form-head,
    .finance-pro-ledger-head {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .finance-pro-status,
    .finance-pro-cancel {
        width: 100% !important;
        justify-content: center !important;
    }
    .finance-pro-balance {
        padding: 17px !important;
    }
    .finance-pro-balance strong {
        font-size: 48px !important;
    }
    .finance-pro-form,
    .finance-pro-recent-track {
        grid-template-columns: 1fr !important;
    }
    .finance-pro-form .span-2 {
        grid-column: auto !important;
    }
    .finance-pro-row,
    .finance-pro-pill {
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
    }
    .finance-pro-row aside {
        justify-items: start !important;
    }
}

/* vAUTO-INCOME - pedidos entregados vinculados a caja */
.finance-auto-total {
    margin-top: 14px !important;
    padding: 13px !important;
    border-radius: 15px !important;
    background: rgba(var(--admin-accent-rgb), .105) !important;
    border: 1px solid rgba(var(--admin-accent-rgb), .18) !important;
}

.finance-auto-total small,
.finance-lock-note {
    display: block !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    letter-spacing: .45px !important;
}

.finance-auto-total strong {
    display: block !important;
    color: #fff !important;
    margin-top: 3px !important;
    font-size: 24px !important;
    letter-spacing: -.5px !important;
}

.finance-source-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--admin-accent) !important;
    font-style: normal !important;
    font-weight: 950 !important;
}

.finance-lock-note {
    text-align: right !important;
    color: var(--admin-accent) !important;
}

.finance-pro-pill.is-income .finance-source-badge {
    font-size: 11px !important;
}

/* ===== vAUTO-CASH - caja diaria + movimientos fuera de caja + pedidos sin romper código ===== */
body.admin-orders-page .order-card-code-stack {
    display: grid !important;
    gap: 8px !important;
    min-width: 0 !important;
}

body.admin-orders-page .order-card-code-stack > strong {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.03 !important;
}

body.admin-orders-page .order-card-code-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.admin-orders-page .order-card-code-meta .order-mini-action {
    margin-left: 0 !important;
    width: fit-content !important;
    max-width: 100% !important;
}

body.admin-orders-page .order-card-top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
}

body.admin-orders-page .order-card-top-right {
    flex: 0 0 auto !important;
}

@media (max-width: 760px) {
    body.admin-orders-page .order-card-top {
        grid-template-columns: 1fr !important;
    }

    body.admin-orders-page .order-card-code-wrap.order-card-code-stack {
        justify-content: start !important;
        align-items: start !important;
    }

    body.admin-orders-page .order-card-code-meta {
        width: 100% !important;
    }
}

.finance-cashdesk-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

.finance-cashdesk-grid > * {
    align-self: start !important;
    height: auto !important;
}

.finance-cashdesk-card {
    padding: 20px !important;
}

.finance-cash-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    color: var(--admin-accent) !important;
    background: rgba(var(--admin-accent-rgb), .13) !important;
    border: 1px solid rgba(var(--admin-accent-rgb), .22) !important;
}

.finance-cash-status.is-closed {
    color: rgba(255,255,255,.72) !important;
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.10) !important;
}

.finance-cash-numbers {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.finance-cash-numbers > div,
.finance-outside-summary > div {
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,.18) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    min-width: 0 !important;
}

.finance-cash-numbers span,
.finance-outside-summary span,
.finance-cash-form label span {
    display: block !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .45px !important;
    text-transform: uppercase !important;
}

.finance-cash-numbers strong,
.finance-outside-summary strong {
    display: block !important;
    margin-top: 5px !important;
    color: #fff !important;
    font-size: 24px !important;
    letter-spacing: -.7px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.finance-cash-numbers small {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255,255,255,.52) !important;
    font-weight: 750 !important;
}

.finance-cash-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto !important;
    gap: 10px !important;
    align-items: end !important;
    margin-top: 15px !important;
}

.finance-cash-form label {
    display: grid !important;
    gap: 7px !important;
}

.finance-cash-form input {
    width: 100% !important;
    padding: 13px 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(0,0,0,.18) !important;
    color: #fff !important;
    outline: none !important;
}

.finance-cash-form .finance-pro-submit {
    height: 46px !important;
    white-space: nowrap !important;
}

.finance-outside-summary {
    display: grid !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.finance-cash-note {
    margin: 13px 0 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    border: 1px dashed rgba(var(--admin-accent-rgb), .24) !important;
    background: rgba(var(--admin-accent-rgb), .075) !important;
    color: var(--muted) !important;
    line-height: 1.35 !important;
}

.finance-pro-metric small,
.finance-pro-pill small,
.finance-pro-row span {
    white-space: normal !important;
}

@media (max-width: 1280px) {
    .finance-cashdesk-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 920px) {
    .finance-cash-numbers,
    .finance-cash-form {
        grid-template-columns: 1fr 1fr !important;
    }

    .finance-cash-form .finance-pro-submit {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

@media (max-width: 620px) {
    .finance-cash-numbers,
    .finance-cash-form {
        grid-template-columns: 1fr !important;
    }

    .finance-cashdesk-card {
        padding: 15px !important;
        border-radius: 18px !important;
    }
}

.finance-cash-auto-note {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    margin-top: 15px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(var(--admin-accent-rgb), .08) !important;
    border: 1px dashed rgba(var(--admin-accent-rgb), .24) !important;
    color: rgba(255,255,255,.78) !important;
}

.finance-cash-auto-note > i {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--admin-accent) !important;
    background: rgba(var(--admin-accent-rgb), .14) !important;
    flex: 0 0 auto !important;
}

.finance-cash-auto-note strong,
.finance-cash-auto-note span {
    display: block !important;
}

.finance-cash-auto-note strong {
    color: #fff !important;
    font-weight: 950 !important;
    margin-bottom: 2px !important;
}

.finance-cash-auto-note span {
    color: var(--muted) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

/* ===== FIX MOBILE: ultimos movimientos no se salen del contenedor ===== */
.finance-pro-recent,
.finance-pro-recent * {
    box-sizing: border-box !important;
}

.finance-pro-recent-track {
    max-width: 100% !important;
    min-width: 0 !important;
}

.finance-pro-pill,
.finance-pro-pill > div {
    min-width: 0 !important;
    max-width: 100% !important;
}

@media (max-width: 760px) {
    .finance-pro-recent {
        overflow: hidden !important;
    }

    .finance-pro-recent-track {
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow-x: hidden !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .finance-pro-pill {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        align-items: start !important;
        padding: 12px !important;
        overflow: hidden !important;
    }

    .finance-pro-pill > span {
        width: 34px !important;
        height: 34px !important;
        border-radius: 11px !important;
    }

    .finance-pro-pill > div {
        overflow: hidden !important;
        min-width: 0 !important;
    }

    .finance-pro-pill strong,
    .finance-pro-pill small {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.32 !important;
    }

    .finance-pro-pill small {
        margin-top: 5px !important;
    }

    .finance-pro-pill b {
        grid-column: 2 !important;
        justify-self: start !important;
        margin-top: 7px !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

/* Delivery workflow: pedidos + repartidores */
.delivery-control-strip {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(135deg, rgba(var(--admin-accent-rgb), .10), rgba(255,255,255,.035));
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.delivery-control-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.delivery-control-head h2 { margin: 3px 0 4px; }
.delivery-control-head p { margin: 0; color: rgba(255,255,255,.62); }
.delivery-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}
.delivery-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(0,0,0,.24);
    min-width: 0;
}
.delivery-stat-card strong,
.delivery-stat-card small { display: block; min-width: 0; }
.delivery-stat-card small { color: rgba(255,255,255,.58); line-height: 1.35; }
.delivery-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(var(--admin-accent-rgb), .18);
    color: var(--admin-accent);
    flex: 0 0 auto;
}
.order-delivery-line {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.70);
    font-size: .86rem;
}
.order-delivery-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-delivery-line.is-assigned {
    border-color: rgba(var(--admin-accent-rgb), .28);
    background: rgba(var(--admin-accent-rgb), .10);
    color: rgba(255,255,255,.88);
}
.order-assign-mini {
    min-width: 170px;
    flex: 1 1 170px;
}
.order-assign-mini select,
.delivery-assign-detail select,
.status-form input[name="delivery_tip"] {
    width: 100%;
    background: rgba(0,0,0,.26);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    border-radius: 12px;
    padding: 11px 12px;
    outline: none;
}
.order-card-actions-refined .order-assign-mini + .order-card-action-next {
    flex: 1 1 140px;
}
.delivery-assign-detail {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.delivery-timing-box {
    display: grid;
    gap: 8px;
    padding: 14px;
    margin: 14px 0;
    border-radius: 16px;
    border: 1px solid rgba(var(--admin-accent-rgb), .18);
    background: rgba(var(--admin-accent-rgb), .07);
}
.delivery-timing-box strong { margin-bottom: 2px; }
.delivery-timing-box span { color: rgba(255,255,255,.66); font-size: .88rem; }
.user-permission-note.role-delivery {
    border-color: rgba(var(--admin-accent-rgb), .18);
    background: rgba(var(--admin-accent-rgb), .08);
}
@media (max-width: 720px) {
    .delivery-control-head { flex-direction: column; }
    .delivery-stats-row { grid-template-columns: 1fr; }
    .order-assign-mini { flex-basis: 100%; min-width: 100%; }
    .order-delivery-line { width: 100%; border-radius: 14px; }
}


/* ===== vFIX-ORDERS-DELIVERY-FLOW ===== */
body.admin-orders-page .empty-state-orders-pro {
    min-height: 210px !important;
    padding: 30px 18px !important;
}
body.admin-orders-page .empty-state-orders-pro .admin-btn,
body.admin-orders-page .orders-empty-clear-btn {
    width: auto !important;
    max-width: max-content !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 10px !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
}
body.admin-orders-page .order-card-code-wrap.order-card-code-stack {
    width: 100% !important;
}
body.admin-orders-page .order-card-code-meta {
    justify-content: flex-start !important;
}
body.admin-orders-page .order-card-code-meta .order-mini-action,
body.admin-orders-page .order-card-code-meta .order-seen-badge {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    white-space: nowrap !important;
}
@media (max-width: 760px) {
    body.admin-orders-page .empty-state-orders-pro .admin-btn,
    body.admin-orders-page .orders-empty-clear-btn {
        width: auto !important;
        max-width: 220px !important;
        align-self: center !important;
    }
}

/* ===== vDELIVERY-TIPS-MAPS ===== */
body.admin-orders-page .orders-overview-delivery .orders-summary-card strong {
    letter-spacing: -0.02em;
}
body.admin-orders-page .order-map-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--admin-accent-rgb), .26);
    background: rgba(var(--admin-accent-rgb), .11);
    color: var(--admin-accent);
    font-size: .83rem;
    font-weight: 800;
    text-decoration: none;
}
body.admin-orders-page .order-map-link:hover {
    transform: translateY(-1px);
    background: rgba(var(--admin-accent-rgb), .18);
}
@media (max-width: 720px) {
    body.admin-orders-page .order-map-link {
        border-radius: 12px;
        justify-content: center;
        width: 100%;
    }
}


/* Delivery/orders workflow refinements */
.delivery-status-safe-box {
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(135deg, rgba(13, 148, 136, .09), rgba(255,255,255,.025));
    border-radius: 18px;
    padding: 18px;
    display: grid;
    gap: 12px;
}
.delivery-status-safe-box > strong {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-primary, #f7f7f7);
    font-size: 1.02rem;
}
.delivery-status-safe-box p {
    color: var(--text-muted, rgba(255,255,255,.62));
    margin: 0;
    line-height: 1.45;
}
.delivery-tip-inline {
    min-width: 110px;
    max-width: 150px;
    height: 40px;
    border-radius: 12px;
    padding: 0 12px;
}
.order-card-delete-link {
    color: rgba(255, 119, 119, .92) !important;
    border-color: rgba(255, 119, 119, .18) !important;
}
.order-card-delete-link:hover {
    background: rgba(255, 85, 85, .10) !important;
    color: #fff !important;
}
.order-card-pro {
    cursor: pointer;
}
.order-card-pro:has(a:hover),
.order-card-pro:has(button:hover),
.order-card-pro:has(input:hover),
.order-card-pro:has(select:hover),
.order-card-pro:has(textarea:hover) {
    cursor: default;
}
@media (max-width: 720px) {
    .delivery-tip-inline {
        width: 100%;
        max-width: none;
    }
    .order-card-delete-link {
        width: 100%;
        justify-content: center;
    }
}

/* === Ajustes operativos pedidos/repartidor - 2026-05-20 === */
body.admin-orders-page .order-card-actions-refined {
    align-items: stretch !important;
    gap: 10px !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link,
body.admin-orders-page .order-card-actions-refined select {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
}

body.admin-orders-page .order-card-delete-link {
    align-self: stretch !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px;
}

body.admin-orders-page .order-card-map-action {
    border: 1px solid rgba(var(--admin-accent-rgb), .22) !important;
    background: rgba(var(--admin-accent-rgb), .10) !important;
    color: var(--admin-accent) !important;
    font-weight: 900;
}

body.admin-orders-page .order-card-map-action:hover {
    background: rgba(var(--admin-accent-rgb), .18) !important;
    color: #fff !important;
}

/* Cuando la tarjeta tiene tres acciones principales, el botón eliminar queda abajo completo */
body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-delete-link,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-delete-link {
    grid-column: 1 / -1 !important;
    order: 3;
}
body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-action-primary,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-primary {
    order: 1;
}
body.admin-orders-page .order-card-actions-refined.no-next.has-wa .order-card-action-link,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-link {
    order: 2;
}

/* En perfil de repartidor, Cómo llegar se integra como acción principal de la tarjeta */
body.admin-orders-page .order-card-actions-refined .order-card-map-action {
    order: 1;
}
body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
    order: 2;
}
body.admin-orders-page .order-card-actions-refined .order-card-action-next {
    order: 3;
}
body.admin-orders-page .order-card-actions-refined .order-card-action-link {
    order: 4;
}
body.admin-orders-page .order-card-actions-refined .order-assign-mini {
    order: 5;
}
body.admin-orders-page .order-card-actions-refined .order-card-delete-link {
    order: 6;
}

.order-detail-map-link {
    margin-top: 10px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 720px) {
    body.admin-orders-page .order-card-actions-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body.admin-orders-page .order-card-actions-refined .order-card-map-action,
    body.admin-orders-page .order-card-actions-refined .order-card-action-primary,
    body.admin-orders-page .order-card-actions-refined .order-card-action-next,
    body.admin-orders-page .order-card-actions-refined .order-card-action-link,
    body.admin-orders-page .order-card-actions-refined .order-card-delete-link,
    body.admin-orders-page .order-card-actions-refined .order-assign-mini {
        width: 100% !important;
        min-width: 0 !important;
    }
    body.admin-orders-page .order-card-actions-refined .order-card-delete-link {
        grid-column: 1 / -1 !important;
    }
}

/* ==========================================================
   FIX mobile detalle pedido / repartidor - 2026-05-20
   Evita desborde horizontal y compacta el bloque superior.
   ========================================================== */
@media (max-width: 720px) {
    body.admin-orders-page,
    body.admin-orders-page * {
        box-sizing: border-box;
    }

    body.admin-orders-page .admin-main,
    body.admin-orders-page .order-layout,
    body.admin-orders-page .order-main-panel,
    body.admin-orders-page .order-side-panel,
    body.admin-orders-page .panel,
    body.admin-orders-page .delivery-status-safe-box,
    body.admin-orders-page .delivery-timing-box,
    body.admin-orders-page .order-status-strip,
    body.admin-orders-page .order-info-card,
    body.admin-orders-page .status-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body.admin-orders-page .order-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    body.admin-orders-page .order-side-panel {
        order: -1;
        padding: 12px !important;
        margin: 0 0 8px !important;
        border-radius: 18px !important;
        display: grid !important;
        gap: 10px !important;
    }

    body.admin-orders-page .order-main-panel {
        padding: 12px !important;
        margin: 0 !important;
        border-radius: 18px !important;
    }

    body.admin-orders-page .order-side-panel > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.admin-orders-page .order-status-strip {
        padding: 11px 12px !important;
        margin-bottom: 10px !important;
        border-radius: 16px !important;
    }

    body.admin-orders-page .delivery-status-safe-box {
        padding: 13px !important;
        gap: 9px !important;
        border-radius: 16px !important;
    }

    body.admin-orders-page .delivery-status-safe-box > strong {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    body.admin-orders-page .delivery-status-safe-box p {
        font-size: .92rem !important;
        line-height: 1.42 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body.admin-orders-page .delivery-timing-box {
        padding: 12px !important;
        gap: 6px !important;
        border-radius: 16px !important;
    }

    body.admin-orders-page .delivery-timing-box span,
    body.admin-orders-page .delivery-timing-box strong {
        overflow-wrap: anywhere !important;
    }

    body.admin-orders-page .status-form {
        display: grid !important;
        gap: 9px !important;
    }

    body.admin-orders-page .status-form input,
    body.admin-orders-page .status-form select,
    body.admin-orders-page .status-form textarea,
    body.admin-orders-page .status-form .admin-btn,
    body.admin-orders-page .delivery-status-safe-box .admin-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.admin-orders-page .delivery-status-safe-box .admin-btn {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    body.admin-orders-page .order-info-card,
    body.admin-orders-page .order-customer-card,
    body.admin-orders-page .note-box,
    body.admin-orders-page .products-summary-card {
        margin-bottom: 10px !important;
    }

    body.admin-orders-page .order-page-head {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    body.admin-orders-page .order-info-title {
        margin-bottom: 9px !important;
        padding-bottom: 9px !important;
    }

    body.admin-orders-page .compact-info-grid {
        gap: 8px !important;
    }

    body.admin-orders-page .compact-info-grid div {
        padding: 10px !important;
    }

    body.admin-orders-page .mobile-tabbar {
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
    }
}

@media (max-width: 430px) {
    body.admin-orders-page .admin-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.admin-orders-page .order-side-panel,
    body.admin-orders-page .order-main-panel {
        border-radius: 16px !important;
    }

    body.admin-orders-page .panel-head h2,
    body.admin-orders-page .delivery-status-safe-box > strong,
    body.admin-orders-page .delivery-timing-box strong {
        font-size: .98rem !important;
    }
}

/* Pedido manual + cocina */
.manual-order-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.55fr);gap:18px;align-items:start}.manual-order-card{min-height:auto}.manual-order-main-card{grid-column:1/2}.manual-order-side-card{position:sticky;top:118px}.manual-order-side-card .manual-order-submit{width:100%;margin-top:18px}.manual-flow-list{display:grid;gap:10px;margin-top:16px}.manual-flow-list div{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.035)}.manual-flow-list b{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:var(--admin-accent-soft);color:var(--admin-accent)}.manual-flow-list span{color:var(--muted);line-height:1.35}.orders-overview-kitchen .orders-summary-primary{border-color:var(--admin-accent-border-strong)}.kitchen-status-safe-box{border-color:var(--admin-accent-border-strong);background:linear-gradient(135deg,rgba(var(--admin-accent-rgb),.10),rgba(255,255,255,.025))}.status-pill-en-camino .fa-kitchen-set,.status-card-en-camino .fa-kitchen-set{color:var(--admin-accent)}
@media(max-width:900px){.manual-order-layout{grid-template-columns:1fr}.manual-order-main-card{grid-column:auto}.manual-order-side-card{position:static}.form-grid.two{grid-template-columns:1fr}.manual-order-hero .panel-head{align-items:flex-start}}

/* Estado intermedio: pedido listo para retirar por reparto */
.status-pill-pronto {
    background: rgba(14, 165, 233, .14);
    color: #7dd3fc;
    border-color: rgba(14, 165, 233, .28);
}
body.admin-orders-page .status-card-pronto::before { background: rgba(14, 165, 233, .9); }
.status-pill-pronto .fa-box-open,
.status-card-pronto .fa-box-open { color: #7dd3fc; }
.order-kitchen-line { margin-top: 8px; }

/* ===== vFINAL Pedidos/Repartidor: acciones consistentes + asignación sin recarga ===== */
body.admin-orders-page .order-card-pro {
    border-radius: 22px !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
body.admin-orders-page .orders-cards-grid,
body.admin-orders-page .order-card-main {
    overflow: visible !important;
}
body.admin-orders-page .order-card-pro::before {
    left: 0 !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 3px !important;
    border-radius: 0 999px 999px 0 !important;
}
body.admin-orders-page .order-card-pro::after {
    border-radius: inherit !important;
    pointer-events: none !important;
}

body.admin-orders-page .order-card-actions-refined {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}
body.admin-orders-page .order-card-actions-refined > * {
    min-width: 0 !important;
    width: 100% !important;
}
body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link,
body.admin-orders-page .order-card-actions-refined select {
    min-height: 48px !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}
body.admin-orders-page .order-card-actions-refined .admin-btn i,
body.admin-orders-page .order-card-actions-refined .admin-link i {
    margin: 0 !important;
    flex: 0 0 auto !important;
}
body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
    grid-column: 1 / -1 !important;
    order: 1 !important;
}
body.admin-orders-page .order-card-actions-refined .order-card-map-action {
    grid-column: 1 / -1 !important;
    order: 0 !important;
    min-height: 46px !important;
    border-color: rgba(var(--admin-accent-rgb), .26) !important;
    background: rgba(var(--admin-accent-rgb), .10) !important;
    color: var(--admin-accent) !important;
}
body.admin-orders-page .order-card-actions-refined .order-card-action-link { order: 2 !important; }
body.admin-orders-page .order-card-actions-refined .order-card-action-next { order: 3 !important; }
body.admin-orders-page .order-card-actions-refined .order-assign-mini { order: 4 !important; }
body.admin-orders-page .order-card-actions-refined .order-card-delete-link { order: 5 !important; }
body.admin-orders-page .order-card-actions-refined .order-card-delete-link {
    color: rgba(255, 128, 128, .96) !important;
    border-color: rgba(255, 128, 128, .20) !important;
    align-self: stretch !important;
}
body.admin-orders-page .order-card-actions-refined.actions-3 .order-card-delete-link,
body.admin-orders-page .order-card-actions-refined.actions-5 .order-card-delete-link,
body.admin-orders-page .order-card-actions-refined.actions-6 .order-card-delete-link {
    grid-column: 1 / -1 !important;
}
body.admin-orders-page .order-card-actions-refined .order-assign-mini select {
    cursor: pointer !important;
    padding: 0 12px !important;
}
body.admin-orders-page .order-card-actions-refined .order-assign-mini select:disabled {
    opacity: .65 !important;
    cursor: progress !important;
}

@media (max-width: 720px) {
    body.admin-orders-page .order-card-actions-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
    body.admin-orders-page .order-card-actions-refined .order-card-map-action,
    body.admin-orders-page .order-card-actions-refined .order-card-action-primary {
        grid-column: 1 / -1 !important;
    }
    body.admin-orders-page .order-card-actions-refined .admin-btn,
    body.admin-orders-page .order-card-actions-refined .admin-link,
    body.admin-orders-page .order-card-actions-refined select {
        min-height: 46px !important;
        font-size: .9rem !important;
        gap: 7px !important;
    }
}


/* ===== v52 Pedidos: filtros por rol, acciones consistentes y entregados menos invasivos ===== */
body.admin-orders-page .order-card-actions-refined {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link,
body.admin-orders-page .order-card-actions-refined .order-assign-mini select {
    min-height: 50px !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    text-align: center !important;
    white-space: normal !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn i,
body.admin-orders-page .order-card-actions-refined .admin-link i {
    margin-right: 2px !important;
    flex: 0 0 auto !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-map-action,
body.admin-orders-page .order-card-actions-refined .order-card-action-primary,
body.admin-orders-page .order-card-actions-refined .order-card-action-next,
body.admin-orders-page .order-card-actions-refined .order-assign-mini {
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-delete-link,
body.admin-orders-page .order-card-actions-refined .order-card-action-link {
    grid-column: span 1 !important;
}

/* Cuando el pedido ya está entregado no mostramos camino; ver y eliminar quedan parejos. */
body.admin-orders-page .order-card-closed .order-card-actions-refined {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.admin-orders-page .order-card-closed .order-card-action-primary,
body.admin-orders-page .order-card-closed .order-card-delete-link,
body.admin-orders-page .order-card-closed .order-card-action-link {
    grid-column: span 1 !important;
}
body.admin-orders-page .order-card-closed .order-card-action-next,
body.admin-orders-page .order-card-closed .order-card-map-action,
body.admin-orders-page .order-card-closed .order-assign-mini {
    display: none !important;
}

/* Entregados visibles, pero menos protagonistas para no marear en la operación diaria. */
body.admin-orders-page .order-card-closed.status-card-entregado {
    opacity: .66 !important;
    filter: saturate(.72) brightness(.92) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.018), rgba(255,255,255,.009)) !important;
}
body.admin-orders-page .order-card-closed.status-card-entregado:hover,
body.admin-orders-page .order-card-closed.status-card-entregado.is-selected {
    opacity: .9 !important;
    filter: saturate(.9) brightness(.98) !important;
}
body.admin-orders-page .order-card-closed.status-card-entregado .order-card-customer,
body.admin-orders-page .order-card-closed.status-card-entregado .order-card-meta-refined {
    opacity: .86 !important;
}

/* El acento lateral queda dentro del radio y no genera vértices cuadrados. */
body.admin-orders-page .order-card-pro {
    overflow: hidden !important;
}
body.admin-orders-page .order-card-pro::before {
    left: 0 !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 4px !important;
    border-radius: 0 999px 999px 0 !important;
}
body.admin-orders-page .order-card-pro .order-card-main,
body.admin-orders-page .order-card-actions-refined {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 900px) {
    body.admin-orders-page .order-card-actions-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body.admin-orders-page .order-card-actions-refined .order-card-map-action,
    body.admin-orders-page .order-card-actions-refined .order-card-action-primary,
    body.admin-orders-page .order-card-actions-refined .order-card-action-next,
    body.admin-orders-page .order-card-actions-refined .order-assign-mini {
        grid-column: 1 / -1 !important;
    }
    body.admin-orders-page .order-card-closed .order-card-action-primary,
    body.admin-orders-page .order-card-closed .order-card-delete-link,
    body.admin-orders-page .order-card-closed .order-card-action-link {
        grid-column: span 1 !important;
    }
}

/* ===== v52 Pedidos: acciones consistentes, cocina privada y tarjetas cerradas limpias ===== */
body.admin-orders-page .order-card-actions-refined {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link,
body.admin-orders-page .order-card-actions-refined .order-assign-mini,
body.admin-orders-page .order-card-actions-refined .order-assign-mini select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

body.admin-orders-page .order-card-actions-refined .admin-btn,
body.admin-orders-page .order-card-actions-refined .admin-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 52px !important;
    padding: 0 15px !important;
    white-space: normal !important;
    text-align: center !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-action-primary,
body.admin-orders-page .order-card-actions-refined .order-assign-mini,
body.admin-orders-page .order-card-actions-refined .order-card-map-action,
body.admin-orders-page .order-card-actions-refined.actions-2 .order-card-action-primary,
body.admin-orders-page .order-card-actions-refined.actions-2 .order-card-action-next,
body.admin-orders-page .order-card-actions-refined.actions-1 .order-card-action-primary {
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-card-actions-refined .order-assign-mini select {
    min-height: 52px !important;
    border-radius: 14px !important;
    padding: 0 16px !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-delete-link {
    color: #ff8585 !important;
    border-color: rgba(255, 102, 102, .28) !important;
    background: rgba(255, 70, 70, .035) !important;
}

body.admin-orders-page .order-card-actions-refined.has-map .order-card-map-action {
    order: 1 !important;
}
body.admin-orders-page .order-card-actions-refined .order-card-action-primary { order: 2 !important; }
body.admin-orders-page .order-card-actions-refined .order-card-action-link { order: 3 !important; }
body.admin-orders-page .order-card-actions-refined .order-card-action-next { order: 4 !important; }
body.admin-orders-page .order-card-actions-refined .order-assign-mini { order: 5 !important; }
body.admin-orders-page .order-card-actions-refined .order-card-delete-link { order: 9 !important; }

/* Si el pedido está entregado/cancelado: acciones compactas y no invasivas */
body.admin-orders-page .order-card-closed {
    opacity: .66 !important;
    filter: saturate(.74) contrast(.94) !important;
}

body.admin-orders-page .order-card-closed:hover {
    opacity: .88 !important;
    filter: saturate(.9) contrast(.98) !important;
}

body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-primary,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-delete-link,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-link {
    grid-column: span 1 !important;
}

body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-link:only-child,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-delete-link:only-child,
body.admin-orders-page .order-card-closed .order-card-actions-refined .order-card-action-primary:only-child {
    grid-column: 1 / -1 !important;
}

/* En reparto activo, eliminar queda como acción completa abajo para no generar huecos */
body.admin-orders-page .order-card-live .order-card-actions-refined .order-card-delete-link {
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-action-next {
    grid-column: span 1 !important;
}

body.admin-orders-page .order-card-actions-refined.no-wa.no-map.has-next .order-card-action-next,
body.admin-orders-page .order-card-actions-refined.has-map.has-next .order-card-action-next {
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-card-actions-refined .order-card-action-link i,
body.admin-orders-page .order-card-actions-refined .order-card-map-action i,
body.admin-orders-page .order-card-actions-refined .order-card-delete-link i,
body.admin-orders-page .order-card-actions-refined .order-card-action-primary i,
body.admin-orders-page .order-card-actions-refined .order-card-action-next i {
    margin-right: 2px !important;
    flex: 0 0 auto !important;
}

/* Privacidad de cocina: nada de datos del cliente, reparto, pago ni importes */
body.admin-orders-page .order-card-customer-kitchen h3 {
    margin-bottom: 8px !important;
}

body.admin-orders-page .order-card-customer-kitchen p {
    color: rgba(255,255,255,.72) !important;
}

body.admin-orders-page .order-card-customer-kitchen .kitchen-note-lines {
    display: block !important;
    grid-template-columns: 1fr !important;
}

body.admin-orders-page .order-card-customer-kitchen .kitchen-note-lines span {
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.45 !important;
}

body.admin-orders-page .order-card-meta-kitchen {
    grid-template-columns: 1fr !important;
}

body.admin-orders-page .order-card-meta-kitchen > div:first-child {
    display: none !important;
}

body.admin-orders-page .order-card-meta-kitchen > div:last-child {
    grid-column: 1 / -1 !important;
}

body.admin-orders-page .order-kitchen-brief-card {
    background: linear-gradient(135deg, rgba(var(--admin-panel-rgb), .075), rgba(255,255,255,.025)) !important;
}

body.admin-orders-page .order-kitchen-brief-card .customer-main p {
    color: rgba(255,255,255,.68) !important;
}

@media (max-width: 900px) {
    body.admin-orders-page .order-card-actions-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.admin-orders-page .order-card-actions-refined .admin-btn,
    body.admin-orders-page .order-card-actions-refined .admin-link,
    body.admin-orders-page .order-card-actions-refined .order-assign-mini select {
        min-height: 50px !important;
        font-size: .92rem !important;
    }

    body.admin-orders-page .order-card-live .order-card-actions-refined .order-card-delete-link,
    body.admin-orders-page .order-card-actions-refined .order-card-action-primary,
    body.admin-orders-page .order-card-actions-refined .order-assign-mini,
    body.admin-orders-page .order-card-actions-refined .order-card-map-action {
        grid-column: 1 / -1 !important;
    }
}

/* === Ajustes finales: cocina/reparto privacidad + sidebar mobile compacto === */
@media (max-width: 980px) {
    .sidebar nav {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
    }

    .sidebar nav a {
        flex: 0 0 auto !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 10px 12px !important;
        align-items: center !important;
    }
}

body.admin-orders-page .delivery-privacy-summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    color: rgba(255,255,255,.66) !important;
}

body.admin-orders-page .delivery-delivered-safe-card {
    background: linear-gradient(135deg, rgba(var(--admin-panel-rgb), .065), rgba(255,255,255,.025)) !important;
    border-color: rgba(var(--admin-panel-rgb), .16) !important;
}

body.admin-orders-page .delivery-delivered-safe-card h2,
body.admin-orders-page .delivery-delivered-safe-card p {
    color: rgba(255,255,255,.78) !important;
}

/* Evita que en perfiles con pocos accesos el menú mobile estire los ítems de navegación */
@media (max-width: 980px) {
    .admin-shell .sidebar nav a,
    body.sidebar-open .sidebar nav a {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* v60 - Pedido manual pro: buscador de productos, total automático y layout menos básico */
.manual-order-hero-pro .panel-head{align-items:center;gap:18px}.manual-order-title-block .eyebrow{display:inline-flex;align-items:center;gap:8px}.manual-order-title-block h2{margin-top:8px}.manual-order-title-block p{max-width:860px}.manual-order-layout-pro{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(360px,.65fr);gap:20px;align-items:start}.manual-order-left-stack,.manual-order-right-stack{display:grid;gap:18px;align-content:start}.manual-order-card-pro{padding:20px;border-radius:22px}.manual-card-header{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}.manual-form-grid{gap:18px 16px}.field-pro{display:grid;gap:8px;min-width:0}.field-pro span{font-size:.73rem;text-transform:uppercase;letter-spacing:.08em;color:var(--admin-accent);font-weight:900}.field-pro input,.field-pro select,.field-pro textarea{width:100%;min-height:46px}.manual-order-products-card{background:linear-gradient(135deg,rgba(var(--admin-accent-rgb),.08),rgba(255,255,255,.035) 48%,rgba(0,0,0,.08))}.manual-product-picker{display:grid;grid-template-columns:minmax(220px,1fr) 110px 130px auto;gap:12px;align-items:end}.manual-product-picker .admin-btn{height:46px;white-space:nowrap}.manual-product-results{display:grid;gap:8px;margin:12px 0;max-height:210px;overflow:auto}.manual-product-result{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:rgba(0,0,0,.18);cursor:pointer;transition:.18s ease}.manual-product-result:hover,.manual-product-result.is-active{border-color:var(--admin-accent-border-strong);background:rgba(var(--admin-accent-rgb),.10)}.manual-product-result strong{display:block;color:var(--text)}.manual-product-result small{color:var(--muted)}.manual-product-result b{color:var(--admin-accent);font-size:.95rem}.manual-product-note-field{margin-top:10px}.manual-selected-products{display:grid;gap:10px;margin-top:14px}.manual-empty-products{display:grid;place-items:center;text-align:center;gap:6px;min-height:130px;border:1px dashed var(--border);border-radius:18px;color:var(--muted);background:rgba(0,0,0,.12)}.manual-empty-products i{color:var(--admin-accent);font-size:1.35rem}.manual-empty-products strong{color:var(--text)}.manual-selected-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:18px;background:rgba(0,0,0,.18)}.manual-selected-row .qty-badge{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:var(--admin-accent-soft);color:var(--admin-accent);font-weight:900}.manual-selected-row strong{display:block}.manual-selected-row small{display:block;color:var(--muted);margin-top:3px}.manual-selected-row .line-price{font-weight:900;color:var(--text);white-space:nowrap}.manual-remove-item{width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,110,110,.28);color:#ff7d7d;background:rgba(255,80,80,.08);display:grid;place-items:center}.manual-free-command{margin-top:16px}.manual-order-payment-card{position:sticky;top:104px}.total-field-highlight input{font-size:1.45rem;font-weight:950;color:var(--text);min-height:58px}.total-field-highlight small{color:var(--muted);font-size:.78rem}.manual-order-side-card-pro{position:sticky;top:410px}.manual-order-side-card-pro .manual-order-submit{width:100%;min-height:48px;margin-top:16px}.status-form-readonly-note{padding:16px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.035)}.status-form-readonly-note strong{display:block;color:var(--text);margin-bottom:6px}.status-form-readonly-note p,.status-form-readonly-note small{color:var(--muted);line-height:1.45}
@media(max-width:1100px){.manual-order-layout-pro{grid-template-columns:1fr}.manual-order-payment-card,.manual-order-side-card-pro{position:static}.manual-order-right-stack{grid-template-columns:1fr 1fr}.manual-product-picker{grid-template-columns:1fr 110px 130px}.manual-product-picker .admin-btn{grid-column:1/-1}}
@media(max-width:720px){.manual-order-hero-pro .panel-head{align-items:flex-start}.manual-order-right-stack{grid-template-columns:1fr}.manual-order-card-pro{padding:16px;border-radius:18px}.manual-product-picker{grid-template-columns:1fr 1fr}.product-search-field{grid-column:1/-1}.manual-product-picker .admin-btn{grid-column:1/-1;width:100%}.manual-selected-row{grid-template-columns:auto 1fr auto}.manual-selected-row .line-price{grid-column:2/3}.manual-remove-item{grid-column:3/4;grid-row:1/3}.manual-form-grid{gap:14px}.field-pro input,.field-pro select,.field-pro textarea{min-height:44px}}


/* ===== Manual order page final layout fixes ===== */
.manual-order-hero-pro .panel-head{
  align-items:center;
}
.manual-order-title-block{
  display:grid;
  gap:7px;
  min-width:0;
}
.manual-order-title-block .eyebrow{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:8px;
  line-height:1;
}
.manual-order-title-block h2{
  display:block;
  margin:0;
  line-height:1.05;
}
.manual-order-title-block p{
  margin:0;
  line-height:1.45;
}
.manual-order-layout-pro{
  align-items:start;
}
.manual-order-left-stack,
.manual-order-right-stack{
  min-width:0;
}
@media(min-width:1101px){
  .manual-order-right-stack{
    position:sticky;
    top:112px;
    align-self:start;
    z-index:3;
  }
  .manual-order-payment-card,
  .manual-order-side-card-pro{
    position:static !important;
    top:auto !important;
  }
}
.manual-order-card-pro .manual-card-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.manual-order-card-pro .manual-card-header > i{
  flex:0 0 auto;
  margin-top:2px;
}
.manual-order-card-pro .manual-card-header > div{
  min-width:0;
}
.manual-order-card-pro .manual-card-header strong,
.manual-order-card-pro .manual-card-header small{
  display:block;
}
.manual-order-card-pro .manual-card-header strong{
  line-height:1.15;
}
.manual-order-card-pro .manual-card-header small{
  margin-top:3px;
  line-height:1.35;
}
.manual-form-grid.two{
  gap:20px 18px;
}
.manual-form-grid.one{
  gap:17px;
}
.manual-order-payment-card .field-pro small{
  line-height:1.35;
}
.manual-flow-list div{
  min-width:0;
}
.manual-flow-list span{
  min-width:0;
}
@media(max-width:1100px){
  .manual-order-right-stack{
    position:static;
  }
}
@media(max-width:720px){
  .manual-order-hero-pro .panel-head{
    gap:14px;
  }
  .manual-order-title-block{
    gap:6px;
  }
  .manual-order-title-block .eyebrow{
    font-size:.72rem;
  }
  .manual-order-title-block h2{
    font-size:1.45rem;
  }
}

/* ===== vNEXT Pedidos: cabecera normal, color de panel y reparto por bandeja ===== */
body {
    background:
        radial-gradient(circle at top left, rgba(var(--admin-panel-rgb, 42, 135, 116), .085), transparent 28%),
        radial-gradient(circle at top right, rgba(var(--admin-panel-rgb, 42, 135, 116), .04), transparent 24%),
        var(--bg) !important;
}

@media (min-width: 721px) {
    body.admin-orders-page .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 220 !important;
        min-height: 92px !important;
        padding: 22px 0 24px !important;
        margin: 0 0 24px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        gap: 18px !important;
    }

    body.admin-orders-page .topbar:not(.is-stuck)::before {
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    body.admin-orders-page .topbar.is-stuck::before {
        opacity: 1 !important;
        transform: translateY(0) !important;
        background: rgba(7, 8, 7, .92) !important;
        border-bottom: 1px solid rgba(var(--admin-panel-rgb, 42,135,116), .14) !important;
        box-shadow: 0 18px 40px rgba(0,0,0,.34) !important;
    }

    body.admin-orders-page .topbar:not(.is-stuck) .topbar-title,
    body.admin-orders-page .topbar:not(.is-stuck) .topbar .eyebrow,
    body.admin-orders-page .topbar:not(.is-stuck) h1,
    body.admin-orders-page .topbar:not(.is-stuck) p {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
    }

    body.admin-orders-page .topbar.is-stuck .topbar-title p {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        overflow: hidden !important;
    }
}

.order-delivery-line.is-empty[data-delivery-line] span::after {
    content: " · disponible";
    color: rgba(var(--admin-panel-rgb, 42,135,116), .92);
    font-weight: 900;
}

/* ===== Pedido manual: extras/modificadores rápidos ===== */
.manual-modifiers-box{
    margin-top:14px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(0,0,0,.14);
}
.manual-modifiers-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.manual-modifiers-head strong{display:block;color:var(--text);font-size:.95rem}
.manual-modifiers-head small{display:block;color:var(--muted);line-height:1.35;margin-top:3px}
.manual-clear-modifiers{
    border:1px solid var(--border);
    background:rgba(255,255,255,.035);
    color:var(--muted);
    border-radius:12px;
    padding:9px 11px;
    font-weight:900;
    cursor:pointer;
    white-space:nowrap;
}
.manual-clear-modifiers:hover{color:var(--text);border-color:var(--admin-accent-border)}
.manual-modifier-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
}
.manual-modifier-chip{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    min-height:42px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.035);
    color:var(--text);
    font-weight:900;
    cursor:pointer;
    transition:.18s ease;
    user-select:none;
}
.manual-modifier-chip input{
    width:16px;
    height:16px;
    accent-color:var(--admin-accent);
    flex:0 0 auto;
}
.manual-modifier-chip span{display:flex;align-items:center;gap:6px;line-height:1.15;font-size:.86rem}
.manual-modifier-chip b{color:var(--admin-accent);font-size:.78rem;white-space:nowrap}
.manual-modifier-chip.is-selected,
.manual-modifier-chip:has(input:checked){
    border-color:var(--admin-accent-border-strong);
    background:rgba(var(--admin-accent-rgb),.12);
    box-shadow:0 0 0 1px rgba(var(--admin-accent-rgb),.08) inset;
}
.manual-modifier-chip.is-free b{display:none}
.manual-total-breakdown{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:10px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.025);
    color:var(--muted);
    font-size:.82rem;
    font-weight:800;
}
.manual-total-breakdown b{color:var(--text)}
@media(max-width:1100px){.manual-modifier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
    .manual-modifiers-head{display:grid}
    .manual-clear-modifiers{width:100%}
    .manual-modifier-grid{grid-template-columns:1fr}
    .manual-total-breakdown{display:grid}
}

/* vEXTRAS_DYNAMIC - extras configurables y producto incluye */
.modifier-manager-panel{margin-top:18px;}
.modifier-manager-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start;}
.modifier-form-card,.modifier-list-card{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);border-radius:20px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.18);}
.modifier-form-fields{display:grid;grid-template-columns:1fr 110px;gap:12px;margin-top:14px;}
.modifier-form-fields label{display:flex;flex-direction:column;gap:6px;color:rgba(255,255,255,.76);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.modifier-form-fields input,.modifier-form-fields select,.modifier-row input,.modifier-row select{width:100%;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.28);color:#fff;border-radius:12px;padding:12px;font-weight:800;outline:none;}
.modifier-form-fields .admin-btn{grid-column:1/-1;justify-content:center;}
.premium-switch.compact{grid-column:1/-1;flex-direction:row!important;align-items:center;text-transform:none!important;letter-spacing:0!important;font-size:14px!important;}
.modifier-list{display:grid;gap:10px;margin-top:14px;}
.modifier-row{display:grid;grid-template-columns:minmax(180px,1.6fr) 110px 135px 80px 90px 42px 42px;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.20);border-radius:14px;padding:10px;}
.modifier-row.is-disabled{opacity:.55;}
.modifier-row .mini-check{display:flex;align-items:center;gap:6px;font-weight:800;color:rgba(255,255,255,.75);}
.modifier-row .mini-check input{width:auto;}
.icon-save,.modifier-row .danger-icon{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;background:rgba(255,255,255,.04);color:var(--panel-accent,#2b8a78);text-decoration:none;cursor:pointer;}
.modifier-row .danger-icon{color:#ff7777;border-color:rgba(255,119,119,.25);}
.manual-modifiers-box{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);border-radius:18px;padding:14px;margin-top:14px;}
.manual-modifiers-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.manual-modifiers-head strong{display:block;font-size:16px;color:#fff;}
.manual-modifiers-head small{display:block;color:rgba(255,255,255,.60);margin-top:3px;}
.manual-clear-modifiers{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer;}
.manual-modifier-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.manual-modifier-chip{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);border-radius:13px;padding:12px 14px;font-weight:900;cursor:pointer;color:#fff;}
.manual-modifier-chip input{width:16px;height:16px;accent-color:var(--panel-accent,#2b8a78);}
.manual-modifier-chip b{color:var(--panel-accent,#2b8a78);}
.manual-modifier-chip.is-selected{border-color:rgba(43,138,120,.55);background:rgba(43,138,120,.14);}
.manual-empty-products.compact{padding:18px;border-radius:14px;}
.field-pro small,.premium-form-grid label small{display:block;color:rgba(255,255,255,.50);font-size:12px;font-weight:700;line-height:1.35;margin-top:6px;text-transform:none;letter-spacing:0;}
@media (max-width:1100px){.modifier-manager-grid{grid-template-columns:1fr}.modifier-row{grid-template-columns:1fr 90px 120px 70px}.modifier-row .mini-check,.modifier-row .icon-save,.modifier-row .danger-icon{grid-column:auto}.manual-modifier-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.modifier-form-fields,.modifier-row,.manual-modifier-grid{grid-template-columns:1fr}.modifier-row{gap:10px}.manual-modifiers-head{align-items:flex-start;flex-direction:column}.manual-clear-modifiers{width:100%;}.manual-modifier-chip{min-height:44px}}
.admin-product-includes{margin:10px 0 0;display:flex;align-items:flex-start;gap:8px;border:1px solid rgba(43,138,120,.25);background:rgba(43,138,120,.10);color:rgba(255,255,255,.78);border-radius:12px;padding:9px 10px;font-size:12px;font-weight:800;line-height:1.35;}
.admin-product-includes i{color:var(--panel-accent,#2b8a78);margin-top:1px;}

/* === Ajustes Prograsan: extras configurables, incluidos y editor de imagen de producto === */
.section-title-stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.section-kicker-row{display:flex;align-items:center;gap:10px;color:var(--panel-accent,#2b8a78);font-weight:1000;text-transform:uppercase;letter-spacing:.12em;font-size:12px;}
.section-kicker-row i{font-size:16px;color:var(--panel-accent,#2b8a78);}
.modifier-title-head h2{margin:0;font-size:28px;line-height:1.05;}
.modifier-title-head p{margin:2px 0 0;}

.product-includes-builder{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));padding:16px;display:flex;flex-direction:column;gap:14px;}
.include-builder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);}
.include-builder-head>div{display:flex;flex-direction:column;gap:4px;}
.include-builder-head span{color:var(--panel-accent,#2b8a78);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:1000;}
.include-builder-head small{color:rgba(255,255,255,.58);font-weight:800;line-height:1.35;}
.include-price-switch{min-width:max-content;margin-top:0!important;}
.include-search-box{height:46px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 14px;}
.include-search-box i{color:var(--panel-accent,#2b8a78);}
.include-search-box input{border:0!important;background:transparent!important;padding:0!important;width:100%;height:100%;font-size:14px;}
.included-products-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:260px;overflow:auto;padding-right:4px;}
.include-product-option{display:grid!important;grid-template-columns:auto 48px 1fr;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);border-radius:16px;padding:10px!important;cursor:pointer;transition:.18s ease;}
.include-product-option:hover{border-color:rgba(43,138,120,.42);background:rgba(43,138,120,.08);}
.include-product-option:has(input:checked){border-color:rgba(43,138,120,.72);background:rgba(43,138,120,.14);box-shadow:0 0 0 1px rgba(43,138,120,.18) inset;}
.include-product-option input{width:18px!important;height:18px!important;accent-color:var(--panel-accent,#2b8a78);}
.include-product-thumb{width:48px;height:48px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;}
.include-product-thumb img{width:100%;height:100%;object-fit:cover;}
.include-product-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.include-product-copy strong{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.include-product-copy small{color:rgba(255,255,255,.55);font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.included-summary{border:1px dashed rgba(43,138,120,.42);border-radius:14px;background:rgba(43,138,120,.08);padding:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:48px;}
.included-summary span,.included-summary small{color:rgba(255,255,255,.58);font-weight:800;}
.included-summary b{display:inline-flex;align-items:center;border:1px solid rgba(43,138,120,.32);background:rgba(43,138,120,.15);color:#dffaf5;border-radius:999px;padding:6px 10px;font-size:12px;margin-right:4px;}
.included-summary small{width:100%;font-size:12px;margin-top:3px;}
.mini-empty{grid-column:1/-1;padding:18px;border:1px dashed rgba(255,255,255,.12);border-radius:14px;color:rgba(255,255,255,.55);font-weight:800;text-align:center;}

.image-editor-card-pro{position:sticky;top:104px;align-self:start;}
.image-title-pro{align-items:flex-start!important;}
.image-editor-workspace{display:grid;grid-template-columns:1fr;gap:16px;}
.image-editor-card-pro .premium-product-preview{width:100%;height:260px;border-radius:20px;background:radial-gradient(circle at center,rgba(43,138,120,.12),rgba(0,0,0,.42));}
.image-adjust-panel{border-radius:18px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.10);padding:16px;}
.image-adjust-head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px;}
.image-adjust-head strong{font-size:16px;}
.image-adjust-head small{color:rgba(255,255,255,.55);font-weight:800;line-height:1.35;}
.image-range-grid{display:grid;gap:12px;}
.image-upload-area-pro{margin-top:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px;}
.image-current-pro{display:block;margin-top:8px;word-break:break-word;}

.admin-product-includes-linked{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.admin-product-includes-linked span{display:inline-flex;border-radius:999px;background:rgba(43,138,120,.16);border:1px solid rgba(43,138,120,.32);padding:4px 8px;color:#dffaf5;}

@media (max-width: 900px){
  .include-builder-head{flex-direction:column;align-items:stretch;}
  .included-products-picker{grid-template-columns:1fr;max-height:none;}
  .image-editor-card-pro{position:relative;top:auto;}
}

/* Correcciones finales solicitadas: pedido manual, imagen producto y mobile pedidos */
.manual-order-payment-card .manual-form-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:16px!important;
  align-items:start!important;
}
.manual-order-payment-card .total-field-highlight,
.manual-order-payment-card .manual-total-breakdown,
.manual-order-payment-card label:last-child{
  grid-column:auto!important;
}
.manual-order-payment-card .manual-total-breakdown{
  min-height:84px!important;
  padding:16px!important;
  align-self:stretch!important;
}
.manual-order-payment-card .field-pro select,
.manual-order-payment-card .field-pro input{
  min-height:48px!important;
}
.manual-order-payment-card .field-pro small{
  max-width:260px!important;
  line-height:1.35!important;
}
@media (max-width:900px){
  .manual-order-payment-card .manual-form-grid{grid-template-columns:1fr!important;}
  .manual-order-payment-card .total-field-highlight,
  .manual-order-payment-card .manual-total-breakdown,
  .manual-order-payment-card label:last-child{grid-column:auto!important;}
}

.product-image-web-style-card{overflow:hidden!important;}
.product-image-card-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:14px;margin-bottom:16px;}
.product-image-card-head .editor-card-title{margin:0!important;border:0!important;padding:0!important;}
.product-image-actions-pro{display:flex!important;gap:10px!important;align-items:center!important;flex-wrap:wrap!important;justify-content:flex-end!important;}
.product-image-actions-pro .btn-solid,.product-image-actions-pro .btn-muted{height:40px!important;padding:0 14px!important;white-space:nowrap!important;}
.product-upload-inline{position:relative;overflow:hidden;cursor:pointer;}
.product-upload-inline input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.product-image-live-shell{border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 30% 10%,rgba(43,138,120,.12),transparent 36%),rgba(0,0,0,.22);border-radius:18px;padding:14px;}
.product-image-live-preview{width:100%!important;aspect-ratio:1.45/1!important;min-height:260px!important;border-radius:16px!important;position:relative!important;overflow:hidden!important;background:#090b0b!important;}
.product-image-live-preview img,.product-cropper-stage img{width:100%!important;height:100%!important;object-fit:var(--product-img-fit,cover)!important;object-position:var(--product-img-x,50%) var(--product-img-y,50%)!important;transform:scale(var(--product-img-zoom,1)) rotate(var(--product-img-rotate,0deg))!important;transform-origin:center!important;}
.product-edit-overlay{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.78);font-size:12px;font-weight:900;backdrop-filter:blur(10px);}
.product-image-url-row{margin-top:16px;display:flex;flex-direction:column;gap:12px;}
.product-image-url-row label{display:flex;flex-direction:column;gap:8px;}
.product-cropper-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;}
.product-cropper-modal.is-open{display:flex;}
.product-cropper-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);}
.product-cropper-dialog{position:relative;width:min(980px,96vw);max-height:92vh;overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:#111414;box-shadow:0 30px 80px rgba(0,0,0,.5);padding:18px;}
.product-cropper-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:4px 4px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px;}
.product-cropper-head span{display:block;color:var(--panel-accent,#2b8a78);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:1000;}
.product-cropper-head strong{font-size:22px;color:#fff;}
.product-cropper-close{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;}
.product-cropper-stage-wrap{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(0,0,0,.25);}
.product-cropper-stage{position:relative!important;width:100%!important;aspect-ratio:1.45/1!important;min-height:360px!important;border-radius:18px!important;overflow:hidden!important;background:#080909!important;}
.product-crop-frame{position:absolute;inset:16px;border:1px dashed rgba(255,255,255,.25);border-radius:16px;pointer-events:none;}
.product-crop-help{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.14);padding:9px 14px;color:rgba(255,255,255,.78);font-weight:900;font-size:12px;}
.product-cropper-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
.product-cropper-controls label{display:flex;flex-direction:column;gap:8px;color:#fff;font-weight:900;}
.product-cropper-controls label span{display:flex;justify-content:space-between;color:rgba(255,255,255,.82);font-size:12px;text-transform:uppercase;letter-spacing:.06em;}
.product-cropper-controls input[type=range]{width:100%;accent-color:var(--panel-accent,#2b8a78);}
.product-position-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;grid-column:1/-1;}
.product-cropper-actions{display:flex;gap:10px;justify-content:flex-end;grid-column:1/-1;}
@media (max-width:700px){
  .product-image-card-head{flex-direction:column;}
  .product-image-actions-pro{width:100%;display:grid!important;grid-template-columns:1fr 1fr;}
  .product-image-actions-pro .btn-solid,.product-image-actions-pro .btn-muted{width:100%;justify-content:center;}
  .product-cropper-controls,.product-position-grid{grid-template-columns:1fr;}
  .product-cropper-dialog{padding:14px;border-radius:20px;}
  .product-cropper-stage{min-height:250px!important;}
  .product-image-live-preview{min-height:210px!important;}
}

/* === Producto: editor de encuadre igual a portada web === */
body.modal-open .product-cropper-modal.is-open { display: flex !important; }
.product-cropper-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
}
.product-cropper-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.78) !important;
    backdrop-filter: blur(12px) !important;
}
.product-cropper-dialog {
    position: relative !important;
    width: min(1120px, 94vw) !important;
    max-height: 92vh !important;
    overflow: auto !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, rgba(23,26,26,.98), rgba(12,13,13,.98)) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.65) !important;
    padding: 22px !important;
}
.product-cropper-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 2px 2px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    margin: 0 0 26px !important;
}
.product-cropper-head span {
    display: block !important;
    color: var(--panel-accent, #2b8a78) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .14em !important;
    font-weight: 1000 !important;
    margin-bottom: 4px !important;
}
.product-cropper-head strong {
    display: block !important;
    color: #fff !important;
    font-size: clamp(26px, 3vw, 34px) !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
}
.product-cropper-close {
    width: 52px !important;
    height: 52px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
    cursor: pointer !important;
}
.product-cropper-stage-wrap {
    width: min(720px, 82vw) !important;
    margin: 0 auto 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.product-cropper-stage {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / .68 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #050606 !important;
    border: 2px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.6) !important;
    cursor: grab !important;
    user-select: none !important;
    touch-action: none !important;
}
.product-cropper-stage.is-dragging { cursor: grabbing !important; }
.product-cropper-stage:before,
.product-cropper-stage:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.product-cropper-stage:before {
    background:
        linear-gradient(90deg, transparent 33.33%, rgba(255,255,255,.17) 33.33%, rgba(255,255,255,.17) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255,255,255,.17) 66.66%, rgba(255,255,255,.17) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
        linear-gradient(0deg, transparent 33.33%, rgba(255,255,255,.17) 33.33%, rgba(255,255,255,.17) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%, rgba(255,255,255,.17) 66.66%, rgba(255,255,255,.17) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}
.product-cropper-stage img,
.product-image-live-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--product-img-fit, cover) !important;
    object-position: var(--product-img-x, 50%) var(--product-img-y, 50%) !important;
    transform: scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important;
    transform-origin: var(--product-img-x, 50%) var(--product-img-y, 50%) !important;
    display: block !important;
}
.product-crop-help {
    position: absolute !important;
    left: 50% !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.62) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #fff !important;
    font-weight: 1000 !important;
    font-size: 13px !important;
}
.product-cropper-controls-hero-style {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}
.product-cropper-controls-hero-style label {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    color: #fff !important;
    font-weight: 1000 !important;
}
.product-cropper-controls-hero-style label span {
    color: rgba(255,255,255,.86) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 12px !important;
}
.product-cropper-controls-hero-style input[type="range"] {
    width: 100% !important;
    accent-color: var(--panel-accent, #2b8a78) !important;
}
.product-cropper-actions-hero-style {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.product-cropper-actions-hero-style .btn-muted,
.product-cropper-actions-hero-style .btn-solid {
    min-height: 48px !important;
    padding-inline: 20px !important;
}
@media (max-width: 720px) {
    .product-cropper-modal { padding: 12px !important; align-items: flex-start !important; }
    .product-cropper-dialog { width: 100% !important; max-height: 94vh !important; padding: 16px !important; border-radius: 22px !important; }
    .product-cropper-stage-wrap { width: 100% !important; margin-bottom: 20px !important; }
    .product-cropper-stage { border-radius: 20px !important; }
    .product-cropper-actions-hero-style { display: grid !important; grid-template-columns: 1fr 1fr !important; }
    .product-cropper-actions-hero-style #applyProductCropper { grid-column: 1 / -1 !important; }
}

/* === FIX definitivo: editor de imagen de producto idéntico al editor de portada === */
.product-cropper-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
}
.product-cropper-modal.is-open { display: flex !important; }
.product-cropper-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}
.product-cropper-dialog {
    position: relative !important;
    z-index: 2 !important;
    width: min(980px, 100%) !important;
    max-height: calc(100vh - 44px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background:
        radial-gradient(circle at 28% 0%, rgba(var(--admin-panel-rgb), .18), transparent 34%),
        linear-gradient(145deg, rgba(26,26,26,.98), rgba(11,11,11,.98)) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.52) !important;
    padding: 0 !important;
}
.product-cropper-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    margin: 0 !important;
}
.product-cropper-head span {
    display: block !important;
    margin-bottom: 3px !important;
    color: var(--admin-panel-color) !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}
.product-cropper-head strong {
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
}
.product-cropper-close {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.045) !important;
    color: #fff !important;
    cursor: pointer !important;
}
.product-cropper-stage-wrap {
    min-height: 0 !important;
    padding: clamp(18px, 2.4vw, 28px) !important;
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.product-cropper-stage {
    position: relative !important;
    width: min(560px, 100%) !important;
    aspect-ratio: 1 / 1 !important;
    max-height: min(62vh, 560px) !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 36px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.01)),
        radial-gradient(circle at 50% 35%, rgba(var(--admin-panel-rgb), .22), transparent 55%),
        #0d0d0d !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
    cursor: grab !important;
    touch-action: none !important;
    user-select: none !important;
}
.product-cropper-stage.is-dragging { cursor: grabbing !important; }
.product-cropper-stage img,
.product-image-live-preview img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    display: block !important;
    object-fit: var(--product-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(var(--product-img-pan-x, 0%), var(--product-img-pan-y, 0%)) scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
    will-change: transform !important;
    user-select: none !important;
    pointer-events: none !important;
}
.product-crop-frame {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    border: 2px solid rgba(255,255,255,.86) !important;
    border-radius: 36px !important;
    box-shadow: inset 0 0 0 999px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.36) !important;
}
.product-crop-frame::before,
.product-crop-frame::after {
    content: "" !important;
    position: absolute !important;
    inset: 33.333% 0 !important;
    border-top: 1px solid rgba(255,255,255,.24) !important;
    border-bottom: 1px solid rgba(255,255,255,.24) !important;
}
.product-crop-frame::after {
    inset: 0 33.333% !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.24) !important;
    border-right: 1px solid rgba(255,255,255,.24) !important;
}
.product-crop-help {
    position: absolute !important;
    left: 50% !important;
    bottom: 16px !important;
    z-index: 8 !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(0,0,0,.55) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}
.product-cropper-controls-hero-style {
    padding: 16px 20px 20px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 13px !important;
}
.product-cropper-controls-hero-style label {
    display: grid !important;
    gap: 8px !important;
    color: #fff !important;
    font-weight: 950 !important;
}
.product-cropper-controls-hero-style label span {
    color: rgba(255,255,255,.76) !important;
    text-transform: uppercase !important;
    letter-spacing: .7px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}
.product-cropper-controls-hero-style input[type="range"] {
    width: 100% !important;
    accent-color: var(--admin-panel-color) !important;
}
.product-cropper-actions-hero-style {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
.product-cropper-actions-hero-style .btn-muted,
.product-cropper-actions-hero-style .btn-solid {
    min-height: 42px !important;
    border-radius: 13px !important;
    padding-inline: 16px !important;
}
@media (max-width: 720px) {
    .product-cropper-modal { padding: 10px !important; align-items: end !important; }
    .product-cropper-dialog { width: 100% !important; max-height: calc(100vh - 20px) !important; border-radius: 22px 22px 0 0 !important; }
    .product-cropper-head { padding: 15px !important; }
    .product-cropper-head strong { font-size: 20px !important; }
    .product-cropper-stage-wrap { padding: 14px !important; }
    .product-cropper-stage { width: min(100%, 380px) !important; max-height: 56vh !important; border-radius: 24px !important; }
    .product-crop-frame { border-radius: 24px !important; }
    .product-cropper-controls-hero-style { padding: 14px !important; }
    .product-cropper-actions-hero-style { display: grid !important; grid-template-columns: 1fr 1fr !important; }
    .product-cropper-actions-hero-style #applyProductCropper { grid-column: 1 / -1 !important; }
}

/* ===== FIX FINAL REAL: editor de producto igual al editor de portada ===== */
body.modal-open{overflow:hidden!important;}
.product-cropper-modal{position:fixed!important;inset:0!important;z-index:99999!important;display:none!important;align-items:center!important;justify-content:center!important;padding:22px!important;}
.product-cropper-modal.is-open,body.modal-open .product-cropper-modal.is-open{display:flex!important;}
.product-cropper-backdrop{position:absolute!important;inset:0!important;background:rgba(0,0,0,.72)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;}
.product-cropper-dialog{position:relative!important;z-index:2!important;width:min(980px,100%)!important;max-height:calc(100vh - 44px)!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important;border-radius:26px!important;border:1px solid rgba(255,255,255,.10)!important;background:radial-gradient(circle at 28% 0%,rgba(var(--admin-panel-rgb),.18),transparent 34%),linear-gradient(145deg,rgba(26,26,26,.98),rgba(11,11,11,.98))!important;box-shadow:0 34px 90px rgba(0,0,0,.52)!important;padding:0!important;}
.product-cropper-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:18px 20px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;margin:0!important;}
.product-cropper-head span{display:block!important;margin-bottom:3px!important;color:var(--admin-panel-color)!important;text-transform:uppercase!important;letter-spacing:.8px!important;font-size:11px!important;font-weight:950!important;}
.product-cropper-head strong{font-size:24px!important;line-height:1!important;letter-spacing:-.02em!important;}
.product-cropper-close{width:44px!important;height:44px!important;display:grid!important;place-items:center!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(255,255,255,.045)!important;color:#fff!important;cursor:pointer!important;}
.product-cropper-stage-wrap{min-height:0!important;padding:clamp(18px,2.4vw,28px)!important;display:grid!important;place-items:center!important;width:auto!important;margin:0!important;border:0!important;background:transparent!important;}
.product-cropper-stage{position:relative!important;width:min(560px,100%)!important;aspect-ratio:1/1!important;max-height:min(62vh,560px)!important;min-height:0!important;height:auto!important;overflow:hidden!important;border-radius:36px!important;border:1px solid rgba(255,255,255,.13)!important;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.01)),radial-gradient(circle at 50% 35%,rgba(var(--admin-panel-rgb),.22),transparent 55%),#0d0d0d!important;box-shadow:0 24px 70px rgba(0,0,0,.55)!important;cursor:grab!important;touch-action:none!important;user-select:none!important;}
.product-cropper-stage.is-dragging{cursor:grabbing!important;}
.product-cropper-stage img,.product-image-live-preview img{width:100%!important;height:100%!important;max-height:none!important;display:block!important;object-fit:var(--product-img-fit,cover)!important;object-position:center center!important;transform:translate(var(--product-img-pan-x,0%),var(--product-img-pan-y,0%)) scale(var(--product-img-zoom,1)) rotate(var(--product-img-rotate,0deg))!important;transform-origin:center center!important;will-change:transform!important;user-select:none!important;pointer-events:none!important;}
.product-crop-frame{position:absolute!important;inset:0!important;z-index:5!important;pointer-events:none!important;border:2px solid rgba(255,255,255,.86)!important;border-radius:36px!important;box-shadow:inset 0 0 0 999px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.36)!important;}
.product-crop-frame:before,.product-crop-frame:after{content:""!important;position:absolute!important;inset:33.333% 0!important;border-top:1px solid rgba(255,255,255,.24)!important;border-bottom:1px solid rgba(255,255,255,.24)!important;}
.product-crop-frame:after{inset:0 33.333%!important;border:0!important;border-left:1px solid rgba(255,255,255,.24)!important;border-right:1px solid rgba(255,255,255,.24)!important;}
.product-crop-help{position:absolute!important;left:50%!important;bottom:16px!important;z-index:8!important;transform:translateX(-50%)!important;display:inline-flex!important;align-items:center!important;gap:8px!important;padding:9px 13px!important;border-radius:999px!important;color:#fff!important;background:rgba(0,0,0,.55)!important;border:1px solid rgba(255,255,255,.12)!important;font-size:12px!important;font-weight:850!important;pointer-events:none!important;white-space:nowrap!important;}
.product-cropper-controls,.product-cropper-controls-hero-style{padding:16px 20px 20px!important;border-top:1px solid rgba(255,255,255,.08)!important;display:grid!important;grid-template-columns:1fr!important;gap:13px!important;margin:0!important;}
.product-cropper-controls label,.product-cropper-controls-hero-style label{display:grid!important;gap:8px!important;color:#fff!important;font-weight:950!important;}
.product-cropper-controls label span,.product-cropper-controls-hero-style label span{display:block!important;color:rgba(255,255,255,.76)!important;text-transform:uppercase!important;letter-spacing:.7px!important;font-size:11px!important;font-weight:950!important;}
.product-cropper-controls input[type=range],.product-cropper-controls-hero-style input[type=range]{width:100%!important;accent-color:var(--admin-panel-color)!important;}
.product-cropper-actions,.product-cropper-actions-hero-style{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;align-items:center!important;gap:10px!important;grid-column:1/-1!important;width:100%!important;}
.product-cropper-actions .btn-muted,.product-cropper-actions .btn-solid,.product-cropper-actions-hero-style .btn-muted,.product-cropper-actions-hero-style .btn-solid{width:auto!important;min-width:0!important;max-width:none!important;flex:0 0 auto!important;min-height:42px!important;border-radius:13px!important;padding:0 16px!important;}
.product-cropper-actions #resetImageAdjust,.product-cropper-actions-hero-style #resetImageAdjust{width:auto!important;flex:0 0 auto!important;}
@media(max-width:720px){.product-cropper-modal{padding:10px!important;align-items:end!important}.product-cropper-dialog{width:100%!important;max-height:calc(100vh - 20px)!important;border-radius:22px 22px 0 0!important}.product-cropper-head{padding:15px!important}.product-cropper-head strong{font-size:20px!important}.product-cropper-stage-wrap{padding:14px!important}.product-cropper-stage{width:min(100%,380px)!important;max-height:56vh!important;border-radius:24px!important}.product-crop-frame{border-radius:24px!important}.product-cropper-controls,.product-cropper-controls-hero-style{padding:14px!important}.product-cropper-actions,.product-cropper-actions-hero-style{display:grid!important;grid-template-columns:1fr 1fr!important}.product-cropper-actions #applyProductCropper,.product-cropper-actions-hero-style #applyProductCropper{grid-column:1/-1!important}}


/* ===== PRODUCTO: editor de encuadre igual al editor de portada, sin desalineaciones ===== */
.product-cropper-modal { position: fixed !important; inset: 0 !important; z-index: 99999 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 22px !important; }
.product-cropper-modal.is-open { display: flex !important; }
.product-cropper-backdrop { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,.72) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }
.product-cropper-dialog { position: relative !important; z-index: 2 !important; width: min(980px, 100%) !important; max-height: calc(100vh - 44px) !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; overflow: hidden !important; border-radius: 26px !important; border: 1px solid rgba(255,255,255,.10) !important; background: radial-gradient(circle at 28% 0%, rgba(var(--admin-panel-rgb), .18), transparent 34%), linear-gradient(145deg, rgba(26,26,26,.98), rgba(11,11,11,.98)) !important; box-shadow: 0 34px 90px rgba(0,0,0,.52) !important; padding: 0 !important; }
.product-cropper-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 18px 20px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; margin: 0 !important; }
.product-cropper-head span { display: block !important; margin-bottom: 3px !important; color: var(--admin-panel-color) !important; text-transform: uppercase !important; letter-spacing: .8px !important; font-size: 11px !important; font-weight: 950 !important; }
.product-cropper-head strong { font-size: 24px !important; line-height: 1 !important; letter-spacing: -.02em !important; }
.product-cropper-close { width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; border-radius: 14px !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.045) !important; color: #fff !important; cursor: pointer !important; }
.product-cropper-stage-wrap { min-height: 0 !important; padding: clamp(16px, 2.2vw, 24px) !important; display: grid !important; place-items: center !important; width: auto !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
.product-cropper-stage { position: relative !important; width: min(860px, 100%) !important; aspect-ratio: 16 / 9 !important; max-height: min(58vh, 520px) !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; border-radius: 24px !important; border: 1px solid rgba(255,255,255,.13) !important; background: linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.035) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.035) 75%), #080808 !important; background-size: 28px 28px !important; background-position: 0 0, 0 14px, 14px -14px, -14px 0 !important; cursor: grab !important; touch-action: none !important; user-select: none !important; }
.product-cropper-stage.is-dragging { cursor: grabbing !important; }
.product-cropper-stage img, .product-image-live-preview img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; display: block !important; object-fit: var(--product-img-fit, cover) !important; object-position: var(--product-img-x, 50%) var(--product-img-y, 50%) !important; transform: scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important; transform-origin: var(--product-img-x, 50%) var(--product-img-y, 50%) !important; transition: none !important; user-select: none !important; pointer-events: none !important; }
.product-crop-frame { position: absolute !important; inset: 0 !important; z-index: 5 !important; pointer-events: none !important; border: 2px solid rgba(255,255,255,.86) !important; border-radius: 0 !important; box-shadow: inset 0 0 0 999px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.36) !important; }
.product-crop-frame::before, .product-crop-frame::after { content: "" !important; position: absolute !important; inset: 33.333% 0 !important; border-top: 1px solid rgba(255,255,255,.24) !important; border-bottom: 1px solid rgba(255,255,255,.24) !important; }
.product-crop-frame::after { inset: 0 33.333% !important; border: 0 !important; border-left: 1px solid rgba(255,255,255,.24) !important; border-right: 1px solid rgba(255,255,255,.24) !important; }
.product-crop-help { position: absolute !important; left: 50% !important; bottom: 16px !important; z-index: 8 !important; transform: translateX(-50%) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 9px 13px !important; border-radius: 999px !important; color: #fff !important; background: rgba(0,0,0,.55) !important; border: 1px solid rgba(255,255,255,.12) !important; font-size: 12px !important; font-weight: 850 !important; pointer-events: none !important; white-space: nowrap !important; }
.product-cropper-controls, .product-cropper-controls-hero-style { padding: 16px 20px 20px !important; border-top: 1px solid rgba(255,255,255,.08) !important; display: grid !important; grid-template-columns: 1fr !important; gap: 13px !important; margin: 0 !important; }
.product-cropper-controls label, .product-cropper-controls-hero-style label { display: grid !important; gap: 8px !important; color: #fff !important; font-weight: 950 !important; }
.product-cropper-controls label span, .product-cropper-controls-hero-style label span { display: block !important; color: rgba(255,255,255,.76) !important; text-transform: uppercase !important; letter-spacing: .7px !important; font-size: 11px !important; font-weight: 950 !important; }
.product-cropper-controls input[type="range"], .product-cropper-controls-hero-style input[type="range"] { width: 100% !important; accent-color: var(--admin-panel-color) !important; }
.product-cropper-actions, .product-cropper-actions-hero-style { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center !important; gap: 10px !important; grid-column: 1 / -1 !important; width: 100% !important; }
.product-cropper-actions .btn-muted, .product-cropper-actions .btn-solid, .product-cropper-actions-hero-style .btn-muted, .product-cropper-actions-hero-style .btn-solid { width: auto !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto !important; min-height: 42px !important; border-radius: 13px !important; padding: 0 16px !important; }
@media (max-width: 720px) { .product-cropper-modal { padding: 10px !important; align-items: end !important; } .product-cropper-dialog { width: 100% !important; max-height: calc(100vh - 20px) !important; border-radius: 22px 22px 0 0 !important; } .product-cropper-head { padding: 15px !important; } .product-cropper-head strong { font-size: 20px !important; } .product-cropper-stage-wrap { padding: 14px !important; } .product-cropper-stage { border-radius: 18px !important; max-height: 44vh !important; } .product-cropper-controls, .product-cropper-controls-hero-style { padding: 14px !important; } .product-cropper-actions, .product-cropper-actions-hero-style { display: grid !important; grid-template-columns: 1fr 1fr !important; } .product-cropper-actions #applyProductCropper, .product-cropper-actions-hero-style #applyProductCropper { grid-column: 1 / -1 !important; } }

/* =========================================================
   PRODUCTOS - EDITOR FINAL UNIFICADO CON LA TIENDA
   El preview del backoffice y la tienda pública usan exactamente
   el mismo cálculo visual: 16:9 + paneo X/Y + zoom + rotación.
   ========================================================= */
.product-image-adjust-preview,
.product-cropper-stage,
.product-image-live-preview {
    --product-img-pan-x: calc(var(--product-img-x, 50%) - 50%);
    --product-img-pan-y: calc(var(--product-img-y, 50%) - 50%);
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #0d0d0d !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
.product-cropper-stage {
    width: min(860px, 100%) !important;
    border-radius: 24px !important;
    cursor: grab !important;
    touch-action: none !important;
}
.product-cropper-stage.is-dragging { cursor: grabbing !important; }
.product-cropper-stage img,
.product-image-live-preview img,
.product-image-adjust-preview > img,
.premium-product-preview.product-image-adjust-preview > img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: var(--product-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) translate(var(--product-img-pan-x, 0%), var(--product-img-pan-y, 0%)) scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: none !important;
    pointer-events: none !important;
    user-select: none !important;
}
.product-crop-frame { border-radius: 24px !important; }
.product-cropper-actions-hero-style,
.product-cropper-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
.product-cropper-actions-hero-style .btn-muted,
.product-cropper-actions-hero-style .btn-solid,
.product-cropper-actions .btn-muted,
.product-cropper-actions .btn-solid {
    width: auto !important;
    flex: 0 0 auto !important;
}
@media (max-width: 720px) {
    .product-cropper-stage { width: 100% !important; max-height: 46vh !important; }
    .product-cropper-actions-hero-style,
    .product-cropper-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; }
    .product-cropper-actions-hero-style #applyProductCropper,
    .product-cropper-actions #applyProductCropper { grid-column: 1 / -1 !important; }
}

/* =========================================================
   FIX DEFINITIVO PRODUCTOS: mismo encuadre que portada web
   - editor y vista previa del producto usan el mismo marco 1:1
   - la imagen se mueve por paneo real y no por object-position
   ========================================================= */
.product-cropper-stage-wrap{
    min-height:0!important;
    padding:clamp(18px,2.4vw,28px)!important;
    display:grid!important;
    place-items:center!important;
    width:auto!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
}
.product-cropper-stage,
.product-image-live-preview,
.product-image-adjust-preview{
    --product-img-pan-x: calc(var(--product-img-x, 50%) - 50%);
    --product-img-pan-y: calc(var(--product-img-y, 50%) - 50%);
    position:relative!important;
    display:block!important;
    width:100%!important;
    aspect-ratio:1 / 1!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    border-radius:24px!important;
    background:#080808!important;
    padding:0!important;
}
.product-cropper-stage{
    width:min(560px,100%)!important;
    max-height:min(62vh,560px)!important;
    border-radius:36px!important;
    border:1px solid rgba(255,255,255,.13)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.55)!important;
    cursor:grab!important;
    touch-action:none!important;
    user-select:none!important;
}
.product-cropper-stage.is-dragging{cursor:grabbing!important;}
.product-cropper-stage img,
.product-image-live-preview > img,
.product-image-adjust-preview > img,
.premium-product-preview.product-image-adjust-preview > img{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:var(--product-img-fit,cover)!important;
    object-position:center center!important;
    transform:translate(-50%,-50%) translate(var(--product-img-pan-x,0%),var(--product-img-pan-y,0%)) scale(var(--product-img-zoom,1)) rotate(var(--product-img-rotate,0deg))!important;
    transform-origin:center center!important;
    margin:0!important;
    padding:0!important;
    pointer-events:none!important;
    user-select:none!important;
    transition:none!important;
}
.product-crop-frame{
    position:absolute!important;
    inset:0!important;
    border:1px solid rgba(255,255,255,.65)!important;
    border-radius:inherit!important;
    pointer-events:none!important;
}
.product-cropper-actions-hero-style,
.product-cropper-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
}
.product-cropper-actions-hero-style .btn-muted,
.product-cropper-actions-hero-style .btn-solid,
.product-cropper-actions .btn-muted,
.product-cropper-actions .btn-solid{
    width:auto!important;
    flex:0 0 auto!important;
    min-height:42px!important;
    border-radius:13px!important;
    padding:0 16px!important;
}
@media(max-width:720px){
    .product-cropper-stage{width:min(100%,380px)!important;max-height:56vh!important;border-radius:24px!important;}
    .product-cropper-actions-hero-style,.product-cropper-actions{display:grid!important;grid-template-columns:1fr 1fr!important;}
    .product-cropper-actions-hero-style #applyProductCropper,.product-cropper-actions #applyProductCropper{grid-column:1/-1!important;}
}

/* === FIX DEFINITIVO ENCUADRE PRODUCTO ===
   El editor de producto usa el mismo sistema visual que portada,
   pero con el MISMO ratio cuadrado que la tarjeta pública del producto. */
.product-image-live-preview,
.product-cropper-stage,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview {
    position: relative !important;
    display: block !important;
    width: min(640px, 100%) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(62vh, 640px) !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #080909 !important;
}

.product-image-live-preview > img,
.product-cropper-stage > img,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview > img,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: var(--product-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(var(--product-img-pan-x, 0%), var(--product-img-pan-y, 0%)) scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
    padding: 0 !important;
    margin: 0 !important;
    user-select: none !important;
    pointer-events: none !important;
}

.product-cropper-actions-hero-style,
.product-cropper-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.product-cropper-actions-hero-style .btn-muted,
.product-cropper-actions-hero-style .btn-solid,
.product-cropper-actions .btn-muted,
.product-cropper-actions .btn-solid {
    width: auto !important;
    flex: 0 0 auto !important;
}

@media (max-width: 720px) {
    .product-image-live-preview,
    .product-cropper-stage,
    .premium-product-preview.product-image-adjust-preview.product-image-live-preview {
        width: min(100%, 380px) !important;
        max-height: 56vh !important;
    }
    .product-cropper-actions-hero-style,
    .product-cropper-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .product-cropper-actions-hero-style #applyProductCropper,
    .product-cropper-actions #applyProductCropper {
        grid-column: 1 / -1 !important;
    }
}

/* FIX DEFINITIVO: editor de imagen de producto igual al marco real de la tarjeta pública */
.product-image-live-preview,
.product-cropper-stage{
    position:relative!important;
    width:min(100%,560px)!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-inline:auto!important;
    overflow:hidden!important;
    border-radius:22px!important;
    background:#070808!important;
}
.product-image-live-preview>img,
.product-cropper-stage>img,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage>img{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-width:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    object-fit:var(--product-img-fit,cover)!important;
    object-position:center center!important;
    transform:translate(-50%,-50%) translate(var(--product-img-pan-x,0%),var(--product-img-pan-y,0%)) scale(var(--product-img-zoom,1)) rotate(var(--product-img-rotate,0deg))!important;
    transform-origin:center center!important;
    transition:none!important;
    pointer-events:none!important;
    user-select:none!important;
}
.product-cropper-stage-wrap{display:flex!important;justify-content:center!important;align-items:center!important;}
.product-crop-frame{inset:0!important;border-radius:22px!important;}
@media(max-width:720px){
    .product-image-live-preview,.product-cropper-stage{width:min(100%,420px)!important;}
}

/* =========================================================
   FIX FINAL REAL - EDITOR DE PRODUCTO
   Unifica el marco del preview y del modal. No se genera crop
   destructivo: se guarda imagen base + encuadre.
   ========================================================= */
.product-image-live-preview,
.product-cropper-stage,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage {
    --product-img-pan-x: calc(var(--product-img-x, 50%) - 50%);
    --product-img-pan-y: calc(var(--product-img-y, 50%) - 50%);
    position: relative !important;
    display: block !important;
    width: min(100%, 560px) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-inline: auto !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #080909 !important;
    padding: 0 !important;
}
.product-cropper-stage {
    width: min(560px, 100%) !important;
    max-height: min(62vh, 560px) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
    cursor: grab !important;
    touch-action: none !important;
    user-select: none !important;
}
.product-cropper-stage.is-dragging { cursor: grabbing !important; }
.product-image-live-preview > img,
.product-cropper-stage > img,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview > img,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage > img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: var(--product-img-fit, cover) !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) translate(var(--product-img-pan-x, 0%), var(--product-img-pan-y, 0%)) scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: none !important;
    pointer-events: none !important;
    user-select: none !important;
}
.product-crop-frame {
    position: absolute !important;
    inset: 0 !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}
@media(max-width:720px){
    .product-image-live-preview,
    .product-cropper-stage,
    .premium-product-preview.product-image-adjust-preview.product-image-live-preview,
    .premium-product-preview.product-image-adjust-preview.product-cropper-stage{
        width:min(100%,420px)!important;
    }
}

/* =========================================================
   FIX REAL EDITOR PRODUCTO 2026-05-21
   Preview y modal usan la misma lógica que la tienda pública.
   ========================================================= */
.product-image-editor-modern .image-editor-actions,
.product-image-editor-modern .product-image-actions,
.product-image-editor-modern .product-image-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.product-image-editor-modern .btn-solid,
.product-image-editor-modern .btn-muted,
.product-image-editor-modern button {
    width: auto !important;
    min-width: 150px !important;
    justify-content: center !important;
}
.product-cropper-stage,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage {
    --product-img-pan-x: 0% !important;
    --product-img-pan-y: 0% !important;
    position: relative !important;
    width: min(560px, 100%) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: min(62vh, 560px) !important;
    overflow: hidden !important;
    background: #080909 !important;
}
.premium-product-preview.product-image-adjust-preview.product-image-live-preview {
    width: 100% !important;
    max-height: none !important;
}
.product-cropper-stage > img,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview > img,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: var(--product-img-fit, cover) !important;
    object-position: var(--product-img-x, 50%) var(--product-img-y, 50%) !important;
    transform: scale(var(--product-img-zoom, 1)) rotate(var(--product-img-rotate, 0deg)) !important;
    transform-origin: var(--product-img-x, 50%) var(--product-img-y, 50%) !important;
    transition: none !important;
    user-select: none !important;
    pointer-events: none !important;
}
.product-cropper-actions-hero-style,
.product-cropper-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.product-cropper-actions-hero-style .btn-muted,
.product-cropper-actions-hero-style .btn-solid,
.product-cropper-actions .btn-muted,
.product-cropper-actions .btn-solid {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 138px !important;
}
@media (max-width: 720px) {
    .product-cropper-stage,
    .premium-product-preview.product-image-adjust-preview.product-image-live-preview {
        width: 100% !important;
        max-height: 48vh !important;
    }
    .product-cropper-actions-hero-style,
    .product-cropper-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .product-cropper-actions-hero-style .btn-muted,
    .product-cropper-actions-hero-style .btn-solid,
    .product-cropper-actions .btn-muted,
    .product-cropper-actions .btn-solid {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   FIX PRODUCT IMAGE EDITOR 2026-05-21 - UNIFICADO REAL
   El preview del backoffice y el producto público usan el mismo
   cálculo: marco cuadrado + imagen centrada + desplazamiento X/Y.
   ========================================================= */
.product-image-card-head{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:start!important;
    gap:18px!important;
}
.product-image-card-head .image-title-pro{
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    align-items:start!important;
    gap:12px!important;
}
.product-image-card-head .image-title-pro > div{
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    align-items:start!important;
    gap:10px!important;
}
.product-image-card-head .image-title-pro small{
    grid-column:2!important;
    display:block!important;
    max-width:320px!important;
    line-height:1.35!important;
    color:rgba(255,255,255,.62)!important;
}
.product-image-actions-pro{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    flex-wrap:wrap!important;
}
.product-image-actions-pro .btn-solid,
.product-image-actions-pro .btn-muted,
.product-image-actions-pro .product-upload-inline{
    width:auto!important;
    min-width:158px!important;
    height:46px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    margin:0!important;
    white-space:nowrap!important;
}
.product-image-live-shell{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
}
.product-image-live-preview,
.product-cropper-stage,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage{
    position:relative!important;
    width:min(100%,560px)!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-inline:auto!important;
    overflow:hidden!important;
    border-radius:22px!important;
    background:#070808!important;
    border:1px solid rgba(255,255,255,.08)!important;
    padding:0!important;
}
.product-cropper-stage{
    width:min(560px,100%)!important;
    max-height:min(62vh,560px)!important;
    border:1px solid rgba(255,255,255,.62)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.55)!important;
    cursor:grab!important;
    touch-action:none!important;
}
.product-cropper-stage.is-dragging{cursor:grabbing!important;}
.product-image-live-preview>img,
.product-cropper-stage>img,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview>img,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage>img{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:var(--product-img-fit,cover)!important;
    object-position:center center!important;
    transform:translate(calc(var(--product-img-x,50%) - 100%), calc(var(--product-img-y,50%) - 100%)) scale(var(--product-img-zoom,1)) rotate(var(--product-img-rotate,0deg))!important;
    transform-origin:center center!important;
    transition:none!important;
    pointer-events:none!important;
    user-select:none!important;
}
.product-cropper-actions-hero-style,
.product-cropper-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    flex-wrap:nowrap!important;
}
.product-cropper-actions-hero-style .btn-muted,
.product-cropper-actions-hero-style .btn-solid,
.product-cropper-actions .btn-muted,
.product-cropper-actions .btn-solid{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:138px!important;
    height:44px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
}
#applyProductCropper{min-width:170px!important;}
@media(max-width:900px){
    .product-image-card-head{grid-template-columns:1fr!important;}
    .product-image-actions-pro{justify-content:flex-start!important;}
}
@media(max-width:720px){
    .product-image-live-preview,
    .product-cropper-stage,
    .premium-product-preview.product-image-adjust-preview.product-image-live-preview,
    .premium-product-preview.product-image-adjust-preview.product-cropper-stage{
        width:min(100%,420px)!important;
    }
    .product-cropper-actions-hero-style,
    .product-cropper-actions{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
    }
    .product-cropper-actions-hero-style .btn-muted,
    .product-cropper-actions-hero-style .btn-solid,
    .product-cropper-actions .btn-muted,
    .product-cropper-actions .btn-solid{
        width:100%!important;
        min-width:0!important;
    }
    #applyProductCropper{grid-column:1/-1!important;}
}

/* =========================================================
   CORRECCION REAL PRODUCTOS 2026-05-21
   Backoffice y tienda usan el mismo criterio: marco cuadrado,
   object-fit + object-position + zoom/rotación. Sin translate
   acumulado, que era lo que mandaba la foto a las esquinas.
   ========================================================= */
.product-image-card-head{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:start!important;
    gap:18px!important;
}
.product-image-card-head .image-title-pro{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    min-width:0!important;
}
.product-image-card-head .image-title-pro .image-title-main,
.product-image-card-head .image-title-pro > div{
    display:flex!important;
    align-items:flex-start!important;
    gap:12px!important;
    min-width:0!important;
}
.product-image-card-head .image-title-pro small{
    grid-column:auto!important;
    display:block!important;
    max-width:360px!important;
    margin-left:34px!important;
    line-height:1.35!important;
    color:rgba(255,255,255,.62)!important;
    white-space:normal!important;
}
.product-image-actions-pro{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    flex-wrap:nowrap!important;
}
.product-image-actions-pro .btn-solid,
.product-image-actions-pro .btn-muted,
.product-image-actions-pro .product-upload-inline{
    width:auto!important;
    min-width:154px!important;
    height:46px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    margin:0!important;
    white-space:nowrap!important;
}
.product-image-live-preview,
.product-cropper-stage,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage{
    position:relative!important;
    display:block!important;
    width:min(100%,560px)!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-inline:auto!important;
    overflow:hidden!important;
    border-radius:22px!important;
    background:#070808!important;
    border:1px solid rgba(255,255,255,.08)!important;
    padding:0!important;
}
.product-cropper-stage{
    width:min(560px,100%)!important;
    max-height:min(62vh,560px)!important;
    border:1px solid rgba(255,255,255,.62)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.55)!important;
    cursor:grab!important;
    touch-action:none!important;
    user-select:none!important;
}
.product-cropper-stage.is-dragging{cursor:grabbing!important;}
.product-image-live-preview>img,
.product-cropper-stage>img,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview>img,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage>img{
    position:absolute!important;
    inset:0!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:var(--product-img-fit,cover)!important;
    object-position:var(--product-img-x,50%) var(--product-img-y,50%)!important;
    transform:scale(var(--product-img-zoom,1)) rotate(var(--product-img-rotate,0deg))!important;
    transform-origin:var(--product-img-x,50%) var(--product-img-y,50%)!important;
    margin:0!important;
    padding:0!important;
    transition:none!important;
    pointer-events:none!important;
    user-select:none!important;
}
.product-cropper-actions-hero-style,
.product-cropper-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    flex-wrap:nowrap!important;
}
.product-cropper-actions-hero-style .btn-muted,
.product-cropper-actions-hero-style .btn-solid,
.product-cropper-actions .btn-muted,
.product-cropper-actions .btn-solid{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:138px!important;
    height:44px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
}
#applyProductCropper{min-width:170px!important;}
@media(max-width:900px){
    .product-image-card-head{grid-template-columns:1fr!important;}
    .product-image-actions-pro{justify-content:flex-start!important;flex-wrap:wrap!important;}
    .product-image-card-head .image-title-pro small{margin-left:34px!important;max-width:none!important;}
}
@media(max-width:720px){
    .product-image-live-preview,
    .product-cropper-stage,
    .premium-product-preview.product-image-adjust-preview.product-image-live-preview,
    .premium-product-preview.product-image-adjust-preview.product-cropper-stage{width:min(100%,420px)!important;}
    .product-cropper-actions-hero-style,
    .product-cropper-actions{display:grid!important;grid-template-columns:1fr 1fr!important;}
    .product-cropper-actions-hero-style .btn-muted,
    .product-cropper-actions-hero-style .btn-solid,
    .product-cropper-actions .btn-muted,
    .product-cropper-actions .btn-solid{width:100%!important;min-width:0!important;}
    #applyProductCropper{grid-column:1/-1!important;}
}

/* =========================================================
   FIX DEFINITIVO ENCUADRE PRODUCTO 2026-05-21
   El preview del backoffice usa el mismo cálculo que la tienda pública.
   ========================================================= */
.product-image-live-preview,
.product-cropper-stage,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage{
    position:relative!important;
    display:block!important;
    width:min(100%,560px)!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-inline:auto!important;
    overflow:hidden!important;
    border-radius:22px!important;
    background:#070808!important;
    padding:0!important;
}
.product-image-live-preview>img,
.product-cropper-stage>img,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview>img,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage>img{
    position:absolute!important;
    inset:0!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:var(--product-img-fit,cover)!important;
    object-position:var(--product-img-x,50%) var(--product-img-y,50%)!important;
    transform:scale(var(--product-img-zoom,1)) rotate(var(--product-img-rotate,0deg))!important;
    transform-origin:var(--product-img-x,50%) var(--product-img-y,50%)!important;
    margin:0!important;
    padding:0!important;
    transition:none!important;
    pointer-events:none!important;
    user-select:none!important;
}

/* =========================================================
   Ajuste 2026-05-21: editor de producto con arrastre directo
   y zoom por estirar esquinas / gesto de dos dedos.
   ========================================================= */
.product-cropper-stage{
    touch-action:none!important;
}
.product-cropper-stage.is-resizing{
    cursor:nwse-resize!important;
}
.product-resize-handle{
    position:absolute!important;
    z-index:8!important;
    width:30px!important;
    height:30px!important;
    border-radius:9px!important;
    border:2px solid rgba(255,255,255,.92)!important;
    background:rgba(8,8,8,.32)!important;
    box-shadow:0 8px 22px rgba(0,0,0,.36), inset 0 0 0 1px rgba(0,0,0,.18)!important;
    padding:0!important;
    margin:0!important;
    cursor:nwse-resize!important;
    touch-action:none!important;
    opacity:.88!important;
}
.product-resize-handle::before,
.product-resize-handle::after{
    content:""!important;
    position:absolute!important;
    background:rgba(255,255,255,.95)!important;
    border-radius:10px!important;
}
.product-resize-handle::before{width:14px!important;height:3px!important;left:7px!important;top:13px!important;}
.product-resize-handle::after{width:3px!important;height:14px!important;left:13px!important;top:7px!important;}
.product-resize-handle:hover,
.product-resize-handle:focus-visible{
    opacity:1!important;
    transform:scale(1.06)!important;
    outline:none!important;
}
.product-resize-handle-tl{top:12px!important;left:12px!important;}
.product-resize-handle-tr{top:12px!important;right:12px!important;cursor:nesw-resize!important;}
.product-resize-handle-bl{bottom:12px!important;left:12px!important;cursor:nesw-resize!important;}
.product-resize-handle-br{bottom:12px!important;right:12px!important;}
.product-cropper-stage.is-resizing .product-resize-handle{
    opacity:1!important;
}
.product-zoom-range-fallback[hidden]{display:none!important;}
@media(max-width:720px){
    .product-resize-handle{width:34px!important;height:34px!important;border-radius:10px!important;}
    .product-resize-handle::before{width:16px!important;left:8px!important;top:15px!important;}
    .product-resize-handle::after{height:16px!important;left:15px!important;top:8px!important;}
}

/* =========================================================
   AJUSTE PRODUCTO 2026-05-21 - zoom visible + doble clic
   ========================================================= */
.product-zoom-range-fallback{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-width:220px!important;
    flex:1 1 260px!important;
}
.product-zoom-range-fallback span{
    min-width:52px!important;
    color:rgba(255,255,255,.78)!important;
    font-weight:800!important;
    font-size:.82rem!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
}
.product-zoom-range-fallback input[type="range"]{
    width:100%!important;
}
.product-image-live-preview{
    cursor:zoom-in!important;
}
.product-image-live-preview .product-edit-overlay{
    pointer-events:none!important;
}
@media(max-width:720px){
    .product-zoom-range-fallback{
        grid-column:1/-1!important;
        min-width:0!important;
        width:100%!important;
    }
}

/* =========================================================
   FIX 2026-05-21: arrastre estable de imagen de producto
   Unifica el cálculo visual del editor y la vista previa.
   El punto X/Y representa el centro real de la imagen, por eso
   el movimiento no se invierte aunque cambie el zoom.
   ========================================================= */
.product-image-live-preview > img,
.product-cropper-stage > img,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview > img,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage > img{
    position:absolute!important;
    inset:auto!important;
    top:var(--product-img-y,50%)!important;
    left:var(--product-img-x,50%)!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    display:block!important;
    object-fit:var(--product-img-fit,cover)!important;
    object-position:center center!important;
    transform:translate(-50%,-50%) scale(var(--product-img-zoom,1)) rotate(var(--product-img-rotate,0deg))!important;
    transform-origin:center center!important;
    margin:0!important;
    padding:0!important;
    transition:none!important;
    pointer-events:none!important;
    user-select:none!important;
}

/* FIX producto: el editor muestra solo la imagen real; el relleno difuminado queda para la vista final */
.product-image-live-preview{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
}
.product-image-live-preview::before{
    content:"";
    position:absolute;
    inset:-18px;
    z-index:0;
    background-image:var(--product-fill-bg, none);
    background-size:cover;
    background-position:var(--product-fill-pos, 50% 50%);
    background-repeat:no-repeat;
    filter:blur(18px);
    transform:scale(1.08);
    opacity:.58;
    pointer-events:none;
}
.product-image-live-preview > img{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
}
.product-image-live-preview .product-edit-overlay{
    z-index:3!important;
}
.product-cropper-stage{
    background-image:none!important;
    background-size:auto!important;
    background-position:initial!important;
    background-repeat:no-repeat!important;
}
.product-cropper-stage::before{
    display:none!important;
    content:none!important;
}
.product-cropper-stage > img{
    z-index:1!important;
}

/* =========================================================
   FIX FINAL 2026-05-21 - Producto: editor sin fondo fantasma
   y misma geometría que la tienda pública.
   ========================================================= */
.product-image-live-preview,
.product-cropper-stage,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage{
    position:relative!important;
    display:block!important;
    width:min(100%,560px)!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    overflow:hidden!important;
    background:#070808!important;
    isolation:isolate!important;
}
.product-image-live-preview::before,
.product-cropper-stage::before,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview::before,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage::before{
    display:none!important;
    content:none!important;
    background:none!important;
}
.product-image-live-preview>img,
.product-cropper-stage>img,
.premium-product-preview.product-image-adjust-preview.product-image-live-preview>img,
.premium-product-preview.product-image-adjust-preview.product-cropper-stage>img{
    position:absolute!important;
    inset:0!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:50% 50%!important;
    transform:translate(var(--product-img-pan-x,0%), var(--product-img-pan-y,0%)) scale(var(--product-img-zoom,1)) rotate(var(--product-img-rotate,0deg))!important;
    transform-origin:50% 50%!important;
    margin:0!important;
    padding:0!important;
    filter:none!important;
    transition:none!important;
    pointer-events:none!important;
    user-select:none!important;
    z-index:1!important;
}

/* Configuración de descuentos */
.settings-full-switch{
    grid-column:1 / -1;
    min-height:54px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.035);
}

/* Campo ancho para códigos múltiples de descuento */
.settings-full-field{grid-column:1/-1!important;}
.settings-full-field textarea{
    width:100%!important;
    min-height:118px!important;
    resize:vertical!important;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:rgba(0,0,0,.22)!important;
    color:#fff!important;
    padding:13px 14px!important;
    font-weight:800!important;
}
.settings-full-field small{
    display:block!important;
    margin-top:7px!important;
    color:rgba(255,255,255,.56)!important;
    font-weight:700!important;
}

/* =========================================================
   FIX Lucas 2026-05-22: configuración de códigos por fila
   ========================================================= */
.settings-discount-codes-box{
    grid-column:1 / -1!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:18px!important;
    padding:14px!important;
    background:rgba(255,255,255,.035)!important;
}
.settings-discount-codes-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    margin-bottom:12px!important;
}
.settings-discount-codes-head strong{
    display:block!important;
    color:#fff!important;
    font-weight:950!important;
}
.settings-discount-codes-head small{
    display:block!important;
    margin-top:4px!important;
    color:rgba(255,255,255,.56)!important;
    font-weight:700!important;
}
.discount-code-rows{
    display:grid!important;
    gap:10px!important;
}
.discount-code-row{
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(110px,.7fr) auto 42px!important;
    gap:10px!important;
    align-items:end!important;
    padding:12px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:16px!important;
    background:rgba(0,0,0,.18)!important;
}
.discount-code-row label{margin:0!important;}
.discount-code-active{
    min-height:48px!important;
    padding:0 12px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.035)!important;
}
.discount-code-remove{
    width:42px!important;
    height:42px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:13px!important;
    background:rgba(255,80,80,.12)!important;
    color:#ff8e8e!important;
    cursor:pointer!important;
}
@media(max-width:760px){
    .settings-discount-codes-head{align-items:flex-start!important;flex-direction:column!important;}
    .discount-code-row{grid-template-columns:1fr!important;}
    .discount-code-remove{width:100%!important;}
}

/* =========================================================
   FIX FINAL banner web: mismo encuadre en preview y tienda pública
   - 50% / 50% vuelve a ser centro real.
   - Se elimina el translate por pan porque generaba corrimientos hacia arriba.
   - El preview, modal de recorte y banner guardado usan object-position.
   ========================================================= */
.web-hero-preview-adjust,
.web-hero-preview-store,
.hero-preview-main-v67,
.hero-cropper-stage,
.js-hero-preview-box {
    position: relative !important;
    overflow: hidden !important;
}

.web-hero-preview-adjust img,
.web-hero-preview-store img,
.hero-preview-main-v67 img,
.hero-cropper-stage img,
.js-hero-preview-box > img,
.web-card-preview-v72 .web-hero-preview-store img,
.web-card-preview-v72 .hero-preview-main-v67 img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    object-fit: var(--hero-img-fit, cover) !important;
    object-position: var(--hero-img-x, 50%) var(--hero-img-y, 50%) !important;
    transform: scale(var(--hero-img-zoom, 1)) rotate(var(--hero-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
    transition: none !important;
}

.web-hero-preview-adjust img[src$="placeholder-demo.svg"],
.web-hero-preview-store img[src$="placeholder-demo.svg"],
.hero-preview-main-v67 img[src$="placeholder-demo.svg"],
.hero-cropper-stage img[src$="placeholder-demo.svg"],
.js-hero-preview-box > img[src$="placeholder-demo.svg"],
.web-hero-preview-adjust img[src$="burger-demo.svg"],
.web-hero-preview-store img[src$="burger-demo.svg"],
.hero-preview-main-v67 img[src$="burger-demo.svg"],
.hero-cropper-stage img[src$="burger-demo.svg"] {
    width: 82% !important;
    height: 82% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    transform-origin: center center !important;
}

/* =========================================================
   FIX FINAL Lucas: drag directo del banner X/Y
   - 50% / 50% es centro real.
   - X/Y se usan como desplazamiento desde el centro para que el
     movimiento acompañe el mouse/dedo, incluyendo arriba y abajo.
   ========================================================= */
.web-hero-preview-adjust img,
.web-hero-preview-store img,
.hero-preview-main-v67 img,
.hero-cropper-stage img,
.js-hero-preview-box > img,
.web-card-preview-v72 .web-hero-preview-store img,
.web-card-preview-v72 .hero-preview-main-v67 img {
    object-position: center center !important;
    transform: translate3d(var(--hero-img-pan-x, 0%), var(--hero-img-pan-y, 0%), 0) scale(var(--hero-img-zoom, 1)) rotate(var(--hero-img-rotate, 0deg)) !important;
    transform-origin: center center !important;
}

.web-hero-preview-adjust img[src$="placeholder-demo.svg"],
.web-hero-preview-store img[src$="placeholder-demo.svg"],
.hero-preview-main-v67 img[src$="placeholder-demo.svg"],
.hero-cropper-stage img[src$="placeholder-demo.svg"],
.js-hero-preview-box > img[src$="placeholder-demo.svg"],
.web-hero-preview-adjust img[src$="burger-demo.svg"],
.web-hero-preview-store img[src$="burger-demo.svg"],
.hero-preview-main-v67 img[src$="burger-demo.svg"],
.hero-cropper-stage img[src$="burger-demo.svg"] {
    transform: none !important;
}


/* =========================================================
   FIX Producto 2026-05-23: iPhone, pinch zoom y rotación 360
   ========================================================= */
.product-cropper-stage,
.product-cropper-stage *{
    touch-action:none!important;
}
.product-cropper-stage{
    overscroll-behavior:contain!important;
    -webkit-user-select:none!important;
    user-select:none!important;
}
.product-cropper-stage img,
.product-image-live-preview img{
    image-orientation:from-image!important;
}
#imageRotateControl{
    accent-color:var(--admin-panel-color, #f4c430)!important;
}