:root {
    --bg: #f5f7fb;
    --surface: #fff;
    --ink: #18202f;
    --muted: #667085;
    --line: #dde3ee;
    --primary: #0f766e;
    --primary-dark: #115e59;
    --accent: #eab308;
    --danger: #dc2626;
    --warn: #d97706;
    --ok: #15803d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f4f6f8;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

.promo-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 9px 16px;
    background: #101828;
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
}

.promo-strip a {
    color: #facc15;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px clamp(16px, 4vw, 48px);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
}

.brand-logo {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.brand strong,
.brand small,
td strong,
td small { display: block; }

.brand strong {
    font-size: 1.04rem;
    letter-spacing: -.01em;
}

.brand small {
    font-size: .78rem;
    font-weight: 700;
}

.brand small,
td small,
.muted { color: var(--muted); }

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nav a {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.nav a:hover {
    background: #ecfdf5;
    color: var(--primary-dark);
}

.page {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 56px;
}

.store-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 24px;
    align-items: stretch;
    min-height: 430px;
    padding: clamp(28px, 6vw, 68px);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .88), rgba(15, 118, 110, .72)),
        url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1600&q=80") center/cover;
    color: #fff;
}

.store-hero h1 {
    margin: 0;
    max-width: 900px;
    font-size: clamp(2.2rem, 5vw, 4.7rem);
    line-height: 1;
}

.store-hero p {
    max-width: 680px;
    color: rgba(255, 255, 255, .88);
    font-size: 1.08rem;
    line-height: 1.6;
}

.hero-feature {
    align-self: end;
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
}

.hero-feature strong {
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.1;
}

.deal {
    display: inline-grid;
    width: 78px;
    height: 78px;
    place-items: center;
    border-radius: 50%;
    background: #facc15;
    color: #111827;
    font-weight: 900;
    font-size: 1.35rem;
}

.store-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.store-benefits article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.store-benefits strong,
.store-benefits span {
    display: block;
}

.store-benefits span {
    margin-top: 6px;
    color: var(--muted);
}

.shop-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}

.shop-sidebar {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.shop-sidebar h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.shop-sidebar > a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 8px;
    color: #344054;
    font-weight: 700;
}

.shop-sidebar > a.active,
.shop-sidebar > a:hover {
    background: #ecfdf5;
    color: var(--primary-dark);
}

.shop-sidebar b {
    color: var(--muted);
}

.support-box {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 14px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid var(--line);
}

.support-box p {
    margin: 0;
    color: var(--muted);
    line-height: 1.4;
}

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

.shop-titlebar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.shop-titlebar h2 {
    margin: 4px 0;
    font-size: 2rem;
}

.shop-titlebar span,
.breadcrumb {
    margin: 0;
    color: var(--muted);
}

.store-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 220px) auto;
    gap: 10px;
    width: min(100%, 620px);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.product-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
}

.product-media {
    position: relative;
    display: grid;
    min-height: 190px;
    place-items: center;
    padding: 24px;
    background: linear-gradient(145deg, #101828, #0f766e);
    color: #fff;
}

.product-card.herramienta_disenio .product-media { background: linear-gradient(145deg, #7c2d12, #f97316); }
.product-card.herramienta_ia .product-media { background: linear-gradient(145deg, #1e1b4b, #14b8a6); }
.product-card.productividad .product-media { background: linear-gradient(145deg, #0f172a, #2563eb); }
.product-card.educacion .product-media { background: linear-gradient(145deg, #14532d, #84cc16); }
.product-card.streaming_video .product-media { background: linear-gradient(145deg, #7f1d1d, #ef4444); }
.product-card.streaming_musica .product-media { background: linear-gradient(145deg, #064e3b, #22c55e); }
.product-card.entretenimiento .product-media { background: linear-gradient(145deg, #312e81, #a855f7); }

.product-initial {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .34);
    font-size: 3rem;
    font-weight: 900;
}

.discount {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #facc15;
    color: #111827;
    font-weight: 900;
}

.media-label {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 800;
}

.product-body {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}

.product-meta a {
    color: var(--primary-dark);
}

.product-card h3 {
    margin: 0;
    min-height: 48px;
    font-size: 1.18rem;
    line-height: 1.25;
}

.rating {
    color: #b45309;
    font-size: .9rem;
    font-weight: 700;
}

.product-card p {
    min-height: 46px;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.product-price {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 900;
}

.product-actions {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.btn.whatsapp {
    background: #16a34a;
    color: #fff;
}

.featured-band {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    margin-top: 26px;
    padding: 26px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
}

.featured-band h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
}

.mini-cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mini-cats a {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    font-weight: 800;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: 28px;
    align-items: stretch;
    padding: clamp(28px, 6vw, 64px);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .94), rgba(24, 32, 47, .95)),
        url("https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1600&q=80") center/cover;
    color: #fff;
}

.hero h1,
.section-head h1 {
    margin: 0;
    max-width: 860px;
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 1.02;
}

.hero p {
    max-width: 680px;
    color: rgba(255, 255, 255, .84);
    font-size: 1.08rem;
    line-height: 1.6;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-actions,
.form-actions,
.panel-head,
.section-head,
.card-foot,
.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
}

.btn.primary { background: var(--accent); color: #1f2937; }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn.dark,
.btn.small { background: var(--primary); color: #fff; }
.btn.small { min-height: 36px; padding: 0 12px; }

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

.metrics article {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
}

.metrics strong {
    display: block;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.metrics span { color: rgba(255, 255, 255, .76); }

.dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 20px 0;
}

.dashboard article {
    background: var(--surface);
    border-color: var(--line);
}

.dashboard span { color: var(--muted); }

.toolbar,
.section-head,
.panel,
.form-panel,
.empty,
.notice {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.filters {
    display: grid;
    grid-template-columns: 1fr 240px auto;
    gap: 12px;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.grid.catalog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.tool-card {
    display: flex;
    min-height: 292px;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.tool-card h2 {
    margin: 0;
    font-size: 1.35rem;
}

.tool-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.badge,
.cycle,
.pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

.badge { background: #ccfbf1; color: #115e59; }
.cycle { background: #fef3c7; color: #92400e; }
.price { margin-top: auto; }
.price span,
.price strong { display: block; }
.price span { color: var(--muted); }
.price strong { font-size: 1.8rem; }

.form-panel fieldset {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.form-panel legend {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    font-size: 1.2rem;
    font-weight: 800;
}

label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-weight: 700;
}

.wide { grid-column: 1 / -1; }
.notice.ok,
.pill.ok { background: #dcfce7; color: var(--ok); }
.notice.danger,
.pill.danger { background: #fee2e2; color: var(--danger); }
.pill.warn { background: #fef3c7; color: var(--warn); }
.pill.muted { background: #eef2f7; color: var(--muted); }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 18px;
}

.panel h2 { margin: 0; }
.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
}

th,
td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.profit-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.profit-list article {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.profit-list span {
    display: block;
    color: var(--muted);
}

.footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .hero,
    .store-hero,
    .shop-layout,
    .shop-titlebar,
    .store-benefits,
    .product-grid,
    .featured-band,
    .split,
    .filters,
    .grid.catalog,
    .form-panel fieldset { grid-template-columns: 1fr; }
    .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-sidebar { position: static; }
    .store-filters { width: 100%; }
}

@media (max-width: 620px) {
    .topbar,
    .section-head,
    .promo-strip,
    .footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .dashboard,
    .metrics,
    .store-filters,
    .mini-cats { grid-template-columns: 1fr; }
    .store-hero { min-height: 0; }
    .product-actions .btn { width: 100%; }
}

/* Tienda mas llamativa y panel editable */
body {
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .16), transparent 32rem),
        radial-gradient(circle at top right, rgba(37, 99, 235, .18), transparent 34rem),
        #f4f7fb;
}

.promo-strip {
    background: linear-gradient(90deg, #111827, #1d4ed8, #f97316);
}

.topbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .07);
}

.brand-mark {
    background: linear-gradient(135deg, #2563eb, #f97316);
}

.store-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 70px rgba(17, 24, 39, .22);
}

.store-hero::after {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -22%;
    width: 330px;
    height: 330px;
    border: 44px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    pointer-events: none;
}

.hero-content,
.hero-feature {
    position: relative;
    z-index: 1;
}

.hero-feature,
.store-benefits article,
.shop-sidebar,
.shop-titlebar,
.product-card,
.featured-band {
    border-radius: 18px;
}

.deal {
    background: linear-gradient(135deg, #facc15, #fb923c);
}

.store-benefits article {
    box-shadow: 0 10px 30px rgba(16, 24, 40, .05);
}

.product-card {
    box-shadow: 0 14px 36px rgba(16, 24, 40, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(16, 24, 40, .14);
}

.product-card.is-featured {
    border-color: rgba(249, 115, 22, .5);
}

.product-media {
    background-size: cover;
    background-position: center;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.product-price del {
    color: #98a2b3;
    font-weight: 700;
}

.product-price strong {
    color: #f97316;
    font-size: 1.35rem;
}

.featured-band {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(37, 99, 235, .86)),
        url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1400&q=80") center/cover;
}

.admin-hero {
    background:
        linear-gradient(135deg, rgba(17, 24, 39, .94), rgba(37, 99, 235, .72)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1500&q=80") center/cover;
    color: #fff;
    border: 0;
}

.admin-hero span {
    color: rgba(255, 255, 255, .78);
}

.admin-products {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.admin-product-card {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(16, 24, 40, .06);
}

.admin-product-preview {
    display: grid;
    min-height: 260px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #111827, #2563eb);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.admin-product-preview span {
    display: grid;
    width: 88px;
    height: 88px;
    place-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, .18);
    font-size: 3rem;
    font-weight: 900;
}

.admin-product-fields {
    display: grid;
    gap: 14px;
}

.admin-product-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-product-title strong,
.admin-product-title small {
    display: block;
}

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

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

.check {
    display: inline-flex;
    align-items: center;
    width: auto;
    grid-auto-flow: column;
    color: var(--ink);
}

.check input {
    width: auto;
    min-height: 0;
}

.login-shell {
    display: grid;
    min-height: 68vh;
    place-items: center;
}

.login-card {
    width: min(460px, 100%);
    display: grid;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(16, 24, 40, .14);
}

.login-card h1 {
    margin: 0;
    font-size: 2rem;
}

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

/* Login administrador profesional */
.admin-area:not(.adminlte-area) {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(2, 8, 23, .94), rgba(6, 78, 92, .88)),
        radial-gradient(circle at 20% 18%, rgba(94, 234, 212, .26), transparent 24rem),
        radial-gradient(circle at 82% 78%, rgba(56, 189, 248, .22), transparent 22rem),
        #020817;
}

.admin-area:not(.adminlte-area) .admin-page {
    width: 100%;
    max-width: none;
    padding: 0;
}

.admin-login-screen {
    display: grid;
    grid-template-columns: minmax(320px, .95fr) minmax(360px, 440px);
    gap: clamp(28px, 5vw, 74px);
    align-items: center;
    width: min(1180px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 64px) 0;
}

.login-brand-panel {
    display: grid;
    gap: 28px;
    color: #ffffff;
}

.login-brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
}

.login-brand span {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #5eead4, #38bdf8);
    color: #031827;
    font-weight: 950;
    box-shadow: 0 18px 42px rgba(45, 212, 191, .22);
}

.login-brand strong {
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.18rem;
    font-weight: 900;
}

.login-brand-panel h1 {
    max-width: 720px;
    margin: 8px 0 14px;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
}

.login-brand-panel p:not(.eyebrow) {
    max-width: 620px;
    margin: 0;
    color: rgba(226, 232, 240, .82);
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.7;
}

.login-benefits {
    display: grid;
    gap: 10px;
    max-width: 520px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(241, 245, 249, .9);
    font-weight: 850;
}

.login-benefits li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #5eead4;
    box-shadow: 0 0 18px rgba(94, 234, 212, .75);
}

.admin-login-card {
    position: relative;
    width: 100%;
    gap: 18px;
    padding: clamp(26px, 3vw, 36px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 26px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 34px 90px rgba(2, 8, 23, .36);
}

.admin-login-card::before {
    content: "";
    position: absolute;
    inset: 12px 12px auto;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4, #38bdf8, #22c55e);
}

.login-card-head {
    display: grid;
    gap: 6px;
    padding-top: 8px;
}

.login-card-head span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-card-head h2 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.7rem, 2vw, 2.2rem);
    font-weight: 900;
}

.login-card-head p {
    margin: 0;
    color: #64748b;
    font-weight: 700;
}

.admin-login-card label {
    color: #334155;
    font-size: .9rem;
    font-weight: 900;
}

.login-input-wrap {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
}

.login-input-wrap b {
    display: grid;
    width: 42px;
    height: 100%;
    place-items: center;
    color: #0f766e;
    background: #ecfeff;
    font-size: .88rem;
    font-weight: 950;
}

.login-input-wrap input {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.login-input-wrap:focus-within {
    border-color: #38bdf8;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.login-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 4px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f766e, #0ea5e9) !important;
    box-shadow: 0 18px 34px rgba(14, 165, 233, .22);
}

.login-back-link {
    color: #64748b;
    font-size: .9rem;
    font-weight: 850;
    text-align: center;
}

@media (max-width: 900px) {
    .admin-login-screen {
        grid-template-columns: 1fr;
        width: min(560px, calc(100% - 28px));
    }

    .login-brand-panel {
        gap: 18px;
        text-align: center;
    }

    .login-brand {
        margin: 0 auto;
    }

    .login-benefits {
        margin: 0 auto;
        text-align: left;
    }
}

/* Login administrador definitivo */
.admin-login-v2 {
    display: grid !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: clamp(18px, 3vw, 36px) !important;
    place-items: center !important;
    background:
        linear-gradient(135deg, rgba(2, 8, 23, .96), rgba(15, 23, 42, .94)),
        radial-gradient(circle at 18% 18%, rgba(45, 212, 191, .16), transparent 22rem),
        radial-gradient(circle at 84% 82%, rgba(56, 189, 248, .16), transparent 24rem) !important;
}

.admin-login-frame {
    display: grid;
    grid-template-columns: minmax(330px, .92fr) minmax(360px, 460px);
    width: min(1040px, 100%);
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 38px 100px rgba(0, 0, 0, .38);
}

.admin-login-showcase {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 100%;
    padding: clamp(28px, 4vw, 48px);
    color: #ffffff;
    background:
        linear-gradient(145deg, rgba(15, 118, 110, .96), rgba(2, 8, 23, .96)),
        linear-gradient(120deg, rgba(255,255,255,.14), transparent 38%);
    isolation: isolate;
}

.admin-login-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .38;
}

.admin-login-logo {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    text-decoration: none;
}

.admin-login-logo img,
.admin-login-logo span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    object-fit: contain;
    padding: 6px;
    color: #ffffff;
    font-weight: 950;
}

.admin-login-logo strong {
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
}

.admin-login-copy {
    display: grid;
    gap: 12px;
    max-width: 500px;
}

.admin-login-copy span {
    width: fit-content;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: #ccfbf1;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-login-copy h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(2rem, 3vw, 3.25rem);
    font-weight: 900;
    line-height: 1.06;
}

.admin-login-copy p {
    margin: 0;
    color: rgba(226, 232, 240, .84);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.7;
}

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

.admin-login-status article {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.08);
}

.admin-login-status strong {
    display: block;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
}

.admin-login-status span {
    color: rgba(226, 232, 240, .72);
    font-size: .82rem;
    font-weight: 800;
}

.admin-login-v2 .admin-login-card {
    display: grid;
    align-content: center;
    width: 100%;
    height: 100%;
    gap: 18px;
    padding: clamp(30px, 4vw, 48px);
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.admin-login-v2 .admin-login-card::before {
    content: none;
}

.admin-login-v2 .login-card-head span {
    background: #ecfeff;
    color: #0f766e;
}

.admin-login-v2 .login-card-head h2 {
    font-size: clamp(1.8rem, 2.4vw, 2.45rem);
}

.admin-login-v2 .login-input-wrap {
    min-height: 56px;
    border-radius: 14px;
    background: #f8fafc;
}

.admin-login-v2 .login-input-wrap b {
    width: 46px;
    color: #0f766e;
}

.admin-login-v2 .login-input-wrap input {
    min-height: 56px;
    padding: 0 14px;
    font-size: .96rem;
}

.admin-login-v2 .login-submit {
    min-height: 54px;
    border-radius: 14px;
    font-size: .98rem;
}

.admin-login-foot {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    color: #94a3b8;
    font-size: .86rem;
    font-weight: 800;
}

.admin-login-v2 .login-back-link {
    color: #0f766e;
    text-align: right;
}

@media (max-width: 860px) {
    .admin-login-frame {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .admin-login-showcase {
        min-height: 320px;
    }

    .admin-login-status {
        display: none;
    }
}

@media (max-width: 520px) {
    .admin-login-v2 {
        padding: 12px !important;
    }

    .admin-login-frame {
        border-radius: 22px;
    }

    .admin-login-showcase,
    .admin-login-v2 .admin-login-card {
        padding: 24px;
    }

    .admin-login-copy h1 {
        font-size: 1.8rem;
    }

    .admin-login-foot {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Login centrado sin panel lateral */
.admin-login-v3 {
    display: grid !important;
    min-height: 100vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px !important;
    place-items: center !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(45, 212, 191, .18), transparent 26rem),
        linear-gradient(135deg, #020817 0%, #0f172a 58%, #052e33 100%) !important;
}

.admin-login-v3 .admin-login-frame {
    display: block !important;
    width: min(440px, 100%) !important;
    min-height: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.admin-login-v3 .admin-login-card {
    position: relative;
    display: grid;
    width: 100%;
    height: auto;
    gap: 18px;
    padding: clamp(28px, 5vw, 42px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .36);
}

.admin-login-v3 .admin-login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.admin-login-v3 .admin-login-logo {
    display: grid;
    width: 96px;
    height: 96px;
    margin: -78px auto 4px;
    place-items: center;
    overflow: hidden;
    border: 8px solid rgba(255,255,255,.98);
    border-radius: 28px;
    background: #0f172a;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .26);
}

.admin-login-v3 .admin-login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.admin-login-v3 .admin-login-logo span {
    color: #5eead4;
    font-weight: 950;
}

.admin-login-v3 .login-card-head {
    text-align: center;
}

.admin-login-v3 .login-card-head span {
    margin: 0 auto;
}

.admin-login-v3 .login-card-head h2 {
    color: #0f172a;
    font-size: clamp(1.7rem, 4vw, 2.15rem);
}

.admin-login-v3 .login-card-head p {
    color: #64748b;
}

.admin-login-v3 .login-input-wrap {
    border-radius: 14px;
}

.admin-login-v3 .login-submit {
    border-radius: 14px;
}

.admin-login-v3 .admin-login-foot {
    justify-content: center;
    text-align: center;
}

.admin-login-v3 .admin-login-foot span {
    display: none;
}

@media (max-width: 520px) {
    .admin-login-v3 {
        padding: 18px !important;
    }

    .admin-login-v3 .admin-login-card {
        padding: 28px 22px;
    }

    .admin-login-v3 .admin-login-logo {
        width: 84px;
        height: 84px;
        margin-top: -66px;
        border-radius: 22px;
    }
}

/* Login final premium centrado */
.admin-login-v3 {
    background:
        radial-gradient(circle at 50% 18%, rgba(45, 212, 191, .14), transparent 18rem),
        linear-gradient(145deg, #08111f 0%, #0f172a 54%, #092f35 100%) !important;
}

.admin-login-v3 .admin-login-frame {
    width: min(410px, 100%) !important;
}

.admin-login-v3 .admin-login-card {
    gap: 16px;
    padding: 38px 34px 30px;
    border: 1px solid rgba(226, 232, 240, .88);
    border-radius: 22px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(255, 255, 255, .18);
}

.admin-login-v3 .admin-login-card::after {
    content: "";
    position: absolute;
    left: 34px;
    right: 34px;
    top: 0;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #0f766e, #0ea5e9);
}

.admin-login-v3 .admin-login-logo {
    width: 82px;
    height: 82px;
    margin: -72px auto 6px;
    border: 6px solid #ffffff;
    border-radius: 24px;
    background:
        linear-gradient(135deg, #071827, #0f172a);
    box-shadow:
        0 20px 38px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(94, 234, 212, .18);
}

.admin-login-v3 .admin-login-logo img {
    padding: 7px;
}

.admin-login-v3 .login-card-head {
    gap: 7px;
    margin-bottom: 2px;
}

.admin-login-v3 .login-card-head span {
    padding: 5px 10px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: .68rem;
}

.admin-login-v3 .login-card-head h2 {
    font-size: 1.9rem;
    line-height: 1.1;
}

.admin-login-v3 .login-card-head p {
    font-size: .94rem;
    font-weight: 750;
}

.admin-login-v3 .admin-login-card label {
    gap: 8px;
    color: #1e293b;
    font-size: .86rem;
    font-weight: 950;
}

.admin-login-v3 .login-input-wrap {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 52px;
    border: 1px solid #d8e0ea;
    border-radius: 12px;
    background: #ffffff;
}

.admin-login-v3 .login-input-wrap b {
    width: 44px;
    color: #0f766e;
    background: #f0fdfa;
}

.admin-login-v3 .login-input-wrap input {
    min-height: 52px;
    color: #0f172a;
    font-weight: 750;
}

.admin-login-v3 .login-input-wrap input::placeholder {
    color: #94a3b8;
    font-weight: 650;
}

.admin-login-v3 .login-input-wrap:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.admin-login-v3 .login-submit {
    min-height: 52px;
    margin-top: 2px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f766e, #0284c7) !important;
    box-shadow: 0 16px 28px rgba(2, 132, 199, .22);
}

.admin-login-v3 .login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 34px rgba(2, 132, 199, .28);
}

.admin-login-v3 .login-back-link {
    color: #64748b;
    font-size: .86rem;
}

@media (max-width: 520px) {
    .admin-login-v3 .admin-login-card {
        padding: 34px 22px 26px;
    }
}

/* Login con imagen izquierda y formulario derecha */
.admin-login-v3 .admin-login-frame {
    display: grid !important;
    grid-template-columns: minmax(300px, .95fr) minmax(360px, 430px) !important;
    width: min(980px, 100%) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .34) !important;
}

.admin-login-v3 .admin-login-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.admin-login-v3 .admin-login-card::after {
    content: none !important;
}

.admin-login-image-panel {
    position: relative;
    display: grid;
    min-height: 560px;
    margin: 0;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .92), rgba(2, 8, 23, .94)),
        radial-gradient(circle at 28% 18%, rgba(94, 234, 212, .24), transparent 20rem);
}

.admin-login-image-panel::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    pointer-events: none;
}

.admin-login-image-panel img,
.admin-login-image-panel figcaption {
    position: relative;
    z-index: 1;
}

.admin-login-image-panel img {
    width: min(76%, 360px);
    height: min(76%, 360px);
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .34));
}

.admin-login-image-panel figcaption {
    display: grid;
    width: 140px;
    height: 140px;
    place-items: center;
    border-radius: 34px;
    background: rgba(255,255,255,.12);
    color: #ccfbf1;
    font-size: 2.3rem;
    font-weight: 950;
}

@media (max-width: 860px) {
    .admin-login-v3 .admin-login-frame {
        grid-template-columns: 1fr !important;
    }

    .admin-login-image-panel {
        min-height: 220px;
    }

    .admin-login-image-panel img {
        width: min(54%, 220px);
        height: min(54%, 220px);
    }
}

/* Login presentable: acabado visual superior */
.admin-login-v3 {
    background:
        radial-gradient(circle at 18% 18%, rgba(20, 184, 166, .22), transparent 23rem),
        radial-gradient(circle at 82% 72%, rgba(14, 165, 233, .18), transparent 24rem),
        linear-gradient(135deg, #020817 0%, #0f172a 58%, #042f2e 100%) !important;
}

.admin-login-v3 .admin-login-frame {
    grid-template-columns: minmax(360px, 1.05fr) minmax(390px, .95fr) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 32px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.98)) !important;
    box-shadow:
        0 42px 110px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,255,255,.14) !important;
}

.admin-login-image-panel {
    min-height: 600px;
    background:
        linear-gradient(145deg, rgba(8, 47, 73, .96) 0%, rgba(15, 118, 110, .94) 58%, rgba(2, 8, 23, .96) 100%) !important;
}

.admin-login-image-panel::before {
    inset: 22px;
    border-color: rgba(255,255,255,.18);
    border-radius: 26px;
}

.admin-login-image-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.07) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(94,234,212,.24), transparent 18rem);
    background-size: 44px 44px, 44px 44px, auto;
    opacity: .42;
    pointer-events: none;
}

.admin-login-image-panel img {
    width: min(72%, 390px);
    height: min(72%, 390px);
    padding: 22px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 34px;
    background: rgba(255,255,255,.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 30px 58px rgba(0,0,0,.32);
    backdrop-filter: blur(8px);
}

.admin-login-v3 .admin-login-card {
    justify-content: center;
    padding: clamp(38px, 5vw, 56px);
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.admin-login-v3 .admin-login-logo {
    width: 88px;
    height: 88px;
    margin: 0 auto 2px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 24px;
    background: #0f172a;
    box-shadow: 0 18px 36px rgba(15,23,42,.16);
}

.admin-login-v3 .login-card-head {
    margin-bottom: 8px;
}

.admin-login-v3 .login-card-head span {
    background: linear-gradient(135deg, rgba(15, 118, 110, .12), rgba(14, 165, 233, .1));
}

.admin-login-v3 .login-card-head h2 {
    font-size: 2.05rem;
}

.admin-login-v3 .admin-login-card label {
    gap: 9px;
}

.admin-login-v3 .login-input-wrap {
    min-height: 56px;
    border-color: #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.admin-login-v3 .login-password-wrap {
    grid-template-columns: 48px minmax(0, 1fr) auto;
}

.admin-login-v3 .login-input-wrap b {
    width: 48px;
    background: linear-gradient(135deg, #ecfeff, #f0fdfa);
}

.admin-login-v3 .login-input-wrap input {
    min-height: 56px;
}

.admin-login-v3 .login-password-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    min-width: 38px;
    height: 36px;
    margin-right: 8px;
    border: 1px solid #dbe4ef;
    border-radius: 50%;
    background: #f8fafc;
    color: #0f766e;
    cursor: pointer;
    font: inherit;
}

.admin-login-v3 .login-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-login-v3 .login-password-toggle:hover {
    border-color: #0ea5e9;
    background: #ecfeff;
}

.admin-login-v3 .login-password-toggle.is-visible {
    border-color: rgba(15, 118, 110, .34);
    background: #ccfbf1;
}

.admin-login-v3 .login-submit {
    min-height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f766e 0%, #0ea5e9 100%) !important;
    box-shadow: 0 18px 36px rgba(14, 165, 233, .24);
}

.admin-login-v3 .admin-login-foot {
    margin-top: 2px;
}

@media (max-width: 860px) {
    .admin-login-v3 .admin-login-frame {
        grid-template-columns: 1fr !important;
    }

    .admin-login-image-panel {
        min-height: 260px;
    }

    .admin-login-image-panel img {
        width: min(44%, 220px);
        height: min(44%, 220px);
        padding: 14px;
        border-radius: 24px;
    }
}

/* Presencia profesional para cliente */
.store-hero {
    min-height: 520px;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .72fr);
}

.store-hero h1 {
    max-width: 820px;
    text-wrap: balance;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hero-proof span {
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.92);
    font-weight: 800;
}

.feature-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.feature-stats span {
    padding: 13px;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.84);
}

.feature-stats b {
    display: block;
    color: #fff;
    font-size: 1.35rem;
}

.brand-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--line);
}

.brand-strip span {
    display: grid;
    min-height: 62px;
    place-items: center;
    background: rgba(255,255,255,.86);
    color: #344054;
    font-weight: 900;
}

.section-intro {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(260px, .55fr);
    gap: 18px;
    align-items: end;
    margin-top: 34px;
}

.section-intro.compact {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 0;
    margin-bottom: 16px;
}

.section-intro h2 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(1.8rem, 3.8vw, 3.3rem);
    line-height: 1.05;
    text-wrap: balance;
}

.section-intro p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.category-showcase {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.category-tile {
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: 230px;
    align-content: end;
    gap: 10px;
    padding: 22px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, #111827, #2563eb);
    box-shadow: 0 16px 38px rgba(16,24,40,.1);
}

.category-tile::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 34px solid rgba(255,255,255,.12);
}

.category-tile.herramienta_disenio { background: linear-gradient(145deg, #7c2d12, #f97316); }
.category-tile.herramienta_ia { background: linear-gradient(145deg, #1e1b4b, #14b8a6); }
.category-tile.productividad { background: linear-gradient(145deg, #0f172a, #2563eb); }
.category-tile.educacion { background: linear-gradient(145deg, #14532d, #84cc16); }

.category-tile span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255,255,255,.18);
    font-weight: 900;
}

.category-tile strong {
    font-size: 1.25rem;
}

.category-tile p {
    margin: 0;
    color: rgba(255,255,255,.84);
    line-height: 1.45;
}

.featured-products {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 16px 40px rgba(16,24,40,.06);
}

.featured-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.featured-product-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.featured-thumb {
    display: grid;
    min-height: 150px;
    place-items: center;
    background: linear-gradient(145deg, #111827, #2563eb);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.featured-thumb span {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,.2);
    font-size: 2rem;
    font-weight: 900;
}

.featured-product-card > div:last-child {
    display: grid;
    gap: 7px;
    padding: 14px;
}

.featured-product-card small {
    color: var(--primary-dark);
    font-weight: 800;
}

.featured-product-card h3 {
    min-height: 44px;
    margin: 0;
    line-height: 1.2;
}

.featured-product-card b {
    color: #f97316;
    font-size: 1.25rem;
}

.featured-product-card a {
    color: #16a34a;
    font-weight: 900;
}

.buy-process {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, .65fr));
    gap: 16px;
    margin-top: 30px;
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16,24,40,.06);
}

.buy-process h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    line-height: 1.08;
}

.buy-process article {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
}

.buy-process b {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
}

.buy-process span {
    color: var(--muted);
    line-height: 1.45;
}

.final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
    padding: clamp(24px, 5vw, 42px);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(249,115,22,.95), rgba(37,99,235,.92)),
        url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1500&q=80") center/cover;
    color: #fff;
}

.final-cta h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(1.8rem, 3.6vw, 3.2rem);
    line-height: 1.05;
}

.final-cta p:not(.eyebrow) {
    max-width: 640px;
    color: rgba(255,255,255,.86);
}

.final-cta .btn.primary {
    background: #fff;
    color: #111827;
}

@media (max-width: 1050px) {
    .brand-strip,
    .category-showcase,
    .featured-row,
    .buy-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buy-process > div {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .brand-strip,
    .category-showcase,
    .featured-row,
    .section-intro,
    .section-intro.compact,
    .buy-process {
        grid-template-columns: 1fr;
    }

    .store-hero {
        min-height: 0;
    }

    .final-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Administrador de tienda por categorias */
.admin-store-dashboard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.admin-store-dashboard article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .05);
}

.admin-store-dashboard strong {
    display: block;
    font-size: 2rem;
}

.admin-store-dashboard span,
.admin-category-filter span {
    color: var(--muted);
}

.admin-workspace {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 22px;
}

.admin-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.admin-sidebar span {
    padding: 2px 4px 8px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-sidebar button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-align: left;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.admin-sidebar button::after {
    content: ">";
    color: #94a3b8;
    font-weight: 900;
}

.admin-sidebar button:hover,
.admin-sidebar button.active {
    border-color: rgba(14, 165, 233, .2);
    background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(20, 184, 166, .1));
    color: #0f172a;
    transform: translateX(2px);
}

.admin-sidebar button.active::after {
    color: #0ea5e9;
}

.admin-workspace-content {
    min-width: 0;
}

.admin-tab-panel {
    display: none;
}

.admin-tab-panel.active {
    display: block;
}

.admin-tab-panel > .admin-config-panel,
.admin-tab-panel > .admin-category-filter:first-child {
    margin-top: 0;
}

.admin-config-panel {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.admin-config-panel > summary,
.admin-product-card-wrap > summary {
    cursor: pointer;
    list-style: none;
}

.admin-config-panel > summary::-webkit-details-marker,
.admin-product-card-wrap > summary::-webkit-details-marker {
    display: none;
}

.admin-config-panel > summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.admin-config-panel > summary span {
    font-size: 1.15rem;
    font-weight: 900;
}

.admin-config-panel > summary b {
    color: var(--muted);
}

.admin-config-panel .form-panel {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.admin-crud-overview {
    padding: 18px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.admin-crud-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.admin-crud-table th,
.admin-crud-table td {
    padding: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    color: #475569;
    font-size: .9rem;
    font-weight: 750;
    text-align: left;
    vertical-align: middle;
}

.admin-crud-table th {
    background: #f1f5f9;
    color: #0f172a;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-crud-table tr:last-child td {
    border-bottom: 0;
}

.admin-crud-table td:nth-child(2) {
    max-width: 320px;
    overflow: hidden;
    color: #1e293b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-crud-table td:last-child {
    width: 170px;
}

.admin-crud-name {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 180px;
}

.admin-crud-name strong {
    color: #0f172a;
    font-size: .94rem;
    font-weight: 950;
}

.admin-crud-preview {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(20, 184, 166, .12));
    color: #0f766e;
    font-weight: 950;
}

.admin-crud-preview.logo {
    background: #0f172a;
}

.admin-crud-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.admin-crud-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.admin-crud-actions button,
.admin-crud-actions a {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 950;
    text-decoration: none;
}

.admin-crud-actions .crud-add {
    color: #065f46;
    background: #dcfce7;
}

.admin-crud-actions .crud-edit {
    color: #075985;
    background: #e0f2fe;
}

.admin-crud-actions .crud-delete {
    color: #991b1b;
    background: #fee2e2;
}

.admin-crud-actions .crud-view {
    color: #4338ca;
    background: #eef2ff;
}

.admin-crud-actions button:hover,
.admin-crud-actions a:hover {
    border-color: rgba(14, 165, 233, .35);
    background: rgba(14, 165, 233, .1);
}

.admin-category-filter {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(360px, 1fr);
    gap: 18px;
    align-items: end;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.admin-category-filter h2 {
    margin: 4px 0;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.admin-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px auto auto;
    gap: 10px;
}

.admin-category-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 12px 2px 4px;
    margin-top: 10px;
}

.admin-category-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-weight: 900;
}

.admin-category-tabs a.active,
.admin-category-tabs a:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.admin-category-tabs b {
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
}

.admin-category-tabs a.active b,
.admin-category-tabs a:hover b {
    background: rgba(255,255,255,.2);
}

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

.admin-product-card-wrap {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .05);
}

.admin-product-card-wrap > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
}

.admin-product-card-wrap[open] > summary {
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.admin-product-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    min-width: 0;
}

.admin-product-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-product-summary small {
    grid-column: 2;
    color: var(--muted);
}

.admin-dot {
    grid-row: 1 / span 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
}

.admin-dot.on {
    background: #16a34a;
}

.admin-summary-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-summary-badges span,
.admin-summary-badges b {
    padding: 8px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e;
    font-size: .86rem;
}

.admin-summary-badges b {
    background: #fef3c7;
    color: #92400e;
}

.admin-product-card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-product-preview {
    position: relative;
}

.admin-product-preview em {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: #111827;
    font-style: normal;
    font-weight: 900;
}

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

.image-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 700;
}

.image-current a {
    overflow: hidden;
    max-width: 100%;
    color: #0f766e;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rate-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    color: var(--muted);
}

.rate-status .crud-view {
    cursor: pointer;
}

.logo-admin-box {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 700;
}

.logo-admin-preview {
    display: grid;
    width: 180px;
    height: 128px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.logo-admin-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.logo-admin-preview b {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 14px;
    background: #0f766e;
    color: #fff;
    font-size: 1.5rem;
}

.logo-admin-box small {
    color: var(--muted);
    line-height: 1.35;
}

@media (max-width: 980px) {
    .admin-store-dashboard,
    .admin-workspace,
    .admin-category-filter,
    .admin-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-sidebar span {
        grid-column: 1 / -1;
    }
}

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

    .admin-product-card-wrap > summary,
    .admin-summary-badges {
        align-items: flex-start;
        flex-direction: column;
    }

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

/* Rediseño limpio de tienda publica */
:root {
    --clean-bg: #f6f7fb;
    --clean-surface: #ffffff;
    --clean-ink: #111827;
    --clean-muted: #667085;
    --clean-line: #e4e7ec;
    --clean-brand: #0f766e;
    --clean-brand-dark: #0f4f49;
    --clean-accent: #f59e0b;
}

body {
    background: var(--clean-bg);
    color: var(--clean-ink);
}

.promo-strip {
    background: #0f172a;
    color: #fff;
}

.topbar {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--clean-line);
    box-shadow: none;
}

.brand-mark {
    border-radius: 12px;
    background: #0f766e;
}

.nav a:hover {
    background: #f0fdfa;
    color: var(--clean-brand-dark);
}

.clean-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .7fr);
    gap: 28px;
    align-items: stretch;
    min-height: 520px;
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid #dbe2ea;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(15, 118, 110, .8)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1600&q=80") center/cover;
    color: #fff;
}

.clean-hero-copy {
    display: grid;
    align-content: center;
    gap: 18px;
}

.clean-kicker {
    color: #fbbf24;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.clean-hero h1 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.9rem);
    line-height: .96;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.clean-hero p {
    max-width: 640px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.65;
}

.clean-actions,
.clean-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.clean-trust span {
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-weight: 800;
}

.clean-hero-panel {
    align-self: center;
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
}

.panel-top,
.hero-product-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.panel-top {
    padding-bottom: 8px;
    color: rgba(255,255,255,.84);
}

.hero-product-line {
    padding: 13px;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    color: var(--clean-ink);
}

.hero-product-line > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 12px;
    background: #ecfdf5;
    color: var(--clean-brand);
    font-weight: 900;
}

.hero-product-line div {
    min-width: 0;
    flex: 1;
}

.hero-product-line strong,
.hero-product-line small {
    display: block;
}

.hero-product-line strong {
    letter-spacing: -.02em;
}

.hero-product-line small {
    color: var(--clean-muted);
}

.hero-product-line b {
    color: var(--clean-brand-dark);
    white-space: nowrap;
}

.clean-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.tools-marquee-section {
    margin-top: 26px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,253,250,.88)),
        #fff;
    box-shadow: 0 18px 42px rgba(15,23,42,.07);
}

.marquee-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.marquee-heading h2 {
    max-width: 620px;
    margin: 4px 0 0;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    line-height: 1.04;
    letter-spacing: -.055em;
}

.tools-marquee {
    position: relative;
    overflow: hidden;
    padding: 4px 0;
}

.tools-marquee::before,
.tools-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: min(90px, 12vw);
    pointer-events: none;
}

.tools-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
}

.tools-marquee::after {
    right: 0;
    background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
}

.tools-marquee-track {
    display: flex;
    width: max-content;
    gap: 16px;
    animation: toolsMarquee 34s linear infinite;
    will-change: transform;
}

.tools-marquee:hover .tools-marquee-track {
    animation-play-state: paused;
}

.marquee-tool {
    display: grid;
    width: clamp(150px, 17vw, 210px);
    flex: 0 0 auto;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.07);
    transition: transform .18s ease, box-shadow .18s ease;
}

.marquee-tool.image-only {
    padding: 0;
    overflow: hidden;
}

.marquee-tool.image-only .marquee-image {
    width: 100%;
    height: 100%;
    border-radius: 22px;
}

.marquee-tool:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(15,23,42,.12);
}

.marquee-image {
    position: relative;
    display: grid;
    aspect-ratio: 16 / 10;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f172a, #0f766e);
}

.marquee-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.marquee-image b {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
}

.marquee-tool strong {
    overflow: hidden;
    color: #101828;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marquee-tool small {
    color: #0f766e;
    font-size: .8rem;
    font-weight: 900;
}

@keyframes toolsMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 8px));
    }
}

@media (max-width: 760px) {
    .tools-marquee-section {
        padding: 16px;
        border-radius: 22px;
    }

    .marquee-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tools-marquee-track {
        gap: 12px;
        animation-duration: 28s;
    }

    .marquee-tool {
        width: 150px;
        border-radius: 18px;
    }
}

.promo-carousel {
    position: relative;
    overflow: hidden;
    margin-top: 22px;
    border-radius: 22px;
    background: #0f172a;
    color: #fff;
}

.carousel-track {
    position: relative;
    min-height: clamp(300px, 34vw, 420px);
}

.promo-slide {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    padding: clamp(22px, 5vw, 52px);
    opacity: 0;
    transform: translateX(28px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.promo-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.promo-slide:nth-child(1) {
    background:
        linear-gradient(90deg, rgba(15,23,42,.96), rgba(15,118,110,.76)),
        url("https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1500&q=80") center/cover;
}

.promo-slide:nth-child(2) {
    background:
        linear-gradient(90deg, rgba(15,23,42,.94), rgba(249,115,22,.72)),
        url("https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=1500&q=80") center/cover;
}

.promo-slide:nth-child(3) {
    background:
        linear-gradient(90deg, rgba(15,23,42,.95), rgba(37,99,235,.72)),
        url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1500&q=80") center/cover;
}

.promo-slide div {
    max-width: min(680px, 100%);
}

.promo-slide h2 {
    margin: 8px 0 12px;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.05em;
    text-wrap: balance;
}

.promo-slide p {
    max-width: 560px;
    color: rgba(255,255,255,.82);
    line-height: 1.6;
    font-size: 1.04rem;
    font-weight: 500;
}

.carousel-controls {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.carousel-controls button,
.mini-controls button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 900;
}

.carousel-dots {
    display: flex;
    gap: 6px;
}

.carousel-dots button {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
}

.carousel-dots button.active {
    width: 28px;
    background: #fbbf24;
}

.featured-carousel-block {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--clean-line);
    border-radius: 22px;
    background: #fff;
}

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

.carousel-heading h2 {
    margin: 4px 0 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.mini-controls {
    display: flex;
    gap: 8px;
}

.mini-controls button {
    border-color: var(--clean-line);
    background: #f8fafc;
    color: var(--clean-ink);
}

.featured-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(240px, 28vw, 320px);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.featured-rail::-webkit-scrollbar {
    height: 8px;
}

.featured-rail::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd5e1;
}

.rail-card {
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid var(--clean-line);
    border-radius: 18px;
    background: #fff;
}

.rail-media {
    position: relative;
    display: grid;
    min-height: 210px;
    aspect-ratio: 16 / 11;
    place-items: center;
    padding: 0;
    background: linear-gradient(145deg, #0f172a, #0f766e);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.rail-media.herramienta_disenio { background: linear-gradient(145deg, #334155, #f97316); }
.rail-media.herramienta_ia { background: linear-gradient(145deg, #172554, #14b8a6); }
.rail-media.productividad { background: linear-gradient(145deg, #1e293b, #2563eb); }
.rail-media.educacion { background: linear-gradient(145deg, #14532d, #84cc16); }

.rail-media b {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border-radius: 20px;
    background: rgba(255,255,255,.18);
    font-size: 2.2rem;
}

.rail-media img,
.clean-product-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.rail-media span {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fbbf24;
    color: #111827;
    font-weight: 900;
}

.rail-info {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.rail-info small {
    color: var(--clean-brand);
    font-weight: 900;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rail-info h3 {
    min-height: 44px;
    margin: 0;
    line-height: 1.18;
    letter-spacing: -.025em;
}

.rail-info div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rail-info del {
    color: #98a2b3;
}

.rail-info strong {
    color: var(--clean-brand-dark);
    font-size: 1.25rem;
    letter-spacing: -.03em;
}

.rail-info a {
    color: #16a34a;
    font-weight: 900;
}

.stock-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 900;
}

.stock-pill.in {
    background: #dcfce7;
    color: #15803d;
}

.stock-pill.out {
    background: #fee2e2;
    color: #b91c1c;
}

.btn.disabled {
    background: #64748b;
}

.help-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.help-strip article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--clean-line);
    border-radius: 16px;
    background: #fff;
}

.help-strip b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 12px;
    background: #0f766e;
    color: #fff;
}

.help-strip span {
    font-weight: 900;
    letter-spacing: -.015em;
}

.promo-strip {
    font-size: .88rem;
    letter-spacing: -.01em;
}

input,
select,
textarea {
    font-size: .95rem;
}

label {
    font-size: .9rem;
}

.clean-categories a {
    padding: 11px 15px;
    border: 1px solid var(--clean-line);
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.clean-categories a.active,
.clean-categories a:hover {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}

.clean-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.clean-benefits article {
    padding: 20px;
    border: 1px solid var(--clean-line);
    border-radius: 18px;
    background: #fff;
}

.clean-benefits strong,
.clean-benefits span {
    display: block;
}

.clean-benefits strong {
    font-size: 1.04rem;
    letter-spacing: -.02em;
}

.clean-benefits span {
    margin-top: 8px;
    color: var(--clean-muted);
    line-height: 1.5;
}

.catalog-head {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(320px, .75fr);
    gap: 18px;
    align-items: end;
    margin-top: 38px;
}

.catalog-head h2 {
    margin: 6px 0;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.catalog-head p {
    margin: 0;
    color: var(--clean-muted);
}

.clean-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px auto;
    gap: 10px;
}

.clean-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.clean-product-card {
    overflow: hidden;
    border: 1px solid var(--clean-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .06);
}

.clean-product-media {
    position: relative;
    display: grid;
    min-height: 260px;
    aspect-ratio: 16 / 11;
    place-items: center;
    padding: 0;
    background: linear-gradient(145deg, #0f172a, #0f766e);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    border-bottom: 1px solid var(--clean-line);
}

.clean-product-media.herramienta_disenio { background: linear-gradient(145deg, #334155, #f97316); }
.clean-product-media.herramienta_ia { background: linear-gradient(145deg, #172554, #14b8a6); }
.clean-product-media.productividad { background: linear-gradient(145deg, #1e293b, #2563eb); }
.clean-product-media.educacion { background: linear-gradient(145deg, #14532d, #84cc16); }
.clean-product-media.streaming_video { background: linear-gradient(145deg, #7f1d1d, #ef4444); }
.clean-product-media.streaming_musica { background: linear-gradient(145deg, #064e3b, #22c55e); }
.clean-product-media.entretenimiento { background: linear-gradient(145deg, #312e81, #a855f7); }

.rail-media:has(img),
.clean-product-media:has(img) {
    background: transparent;
}

.clean-product-media > span {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fbbf24;
    color: #111827;
    font-weight: 900;
}

.clean-product-media > b {
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border-radius: 20px;
    background: rgba(255,255,255,.18);
    font-size: 2.4rem;
}

.clean-product-info {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.clean-product-info small {
    color: var(--clean-brand);
    font-weight: 900;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.clean-product-info h3 {
    min-height: 48px;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.tool-name {
    position: relative;
    min-height: 54px;
    padding-bottom: 10px;
}

.tool-name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f766e, #f59e0b);
}

.product-commerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(15, 118, 110, .14);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(245,158,11,.16), transparent 8rem),
        linear-gradient(135deg, rgba(15,118,110,.08), rgba(20,184,166,.06)),
        #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.price-box {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3px;
}

.price-box > span {
    color: #667085;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.price-box div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.price-box del {
    color: #98a2b3;
    font-size: .92rem;
    font-weight: 700;
}

.price-box strong {
    color: #0f766e;
    font-size: 1.65rem;
    font-weight: 950;
    letter-spacing: -.04em;
}

.service-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.service-note span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #f8fafc;
    color: #475467;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: -.01em;
    text-align: center;
}

.buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
    font-weight: 950;
    letter-spacing: -.01em;
    box-shadow: 0 12px 24px rgba(22, 163, 74, .22);
    transition: transform .16s ease, box-shadow .16s ease;
}

.buy-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(22, 163, 74, .3);
}

.buy-button span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.buy-button span::after {
    content: "→";
    font-size: 1.1rem;
    line-height: 1;
}

.buy-button.disabled {
    background: linear-gradient(135deg, #64748b, #94a3b8);
    box-shadow: none;
}

.clean-product-info p {
    min-height: 64px;
    margin: 0;
    color: var(--clean-muted);
    line-height: 1.45;
    font-size: .94rem;
}

.clean-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.clean-price del {
    color: #98a2b3;
}

.clean-price strong {
    color: var(--clean-brand-dark);
    font-size: 1.4rem;
    letter-spacing: -.035em;
}

.btn.whatsapp {
    background: #16a34a;
    color: #fff;
}

.clean-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 34px;
    padding: 30px;
    border-radius: 22px;
    background: #0f172a;
    color: #fff;
}

.clean-cta h2 {
    margin: 6px 0;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.clean-cta p {
    margin: 0;
    color: rgba(255,255,255,.72);
}

@media (max-width: 1120px) {
    .clean-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .clean-hero,
    .catalog-head,
    .clean-benefits {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .promo-carousel {
        border-radius: 18px;
    }

    .carousel-track {
        min-height: 430px;
    }

    .promo-slide {
        align-items: start;
        padding: 28px 20px 86px;
    }

    .promo-slide h2 {
        font-size: clamp(1.8rem, 9vw, 2.8rem);
    }

    .promo-slide p {
        font-size: .98rem;
    }

    .featured-carousel-block {
        padding: 16px;
    }

    .carousel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .featured-rail {
        grid-auto-columns: minmax(78%, 1fr);
        gap: 12px;
        margin-inline: -4px;
        padding-inline: 4px;
    }
}

@media (max-width: 620px) {
    .clean-search,
    .clean-product-grid {
        grid-template-columns: 1fr;
    }

    .clean-hero {
        min-height: 0;
    }

    .clean-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .carousel-controls {
        right: 14px;
        bottom: 14px;
        left: 14px;
        justify-content: space-between;
    }

    .carousel-dots {
        order: 2;
    }

    .carousel-controls button {
        width: 40px;
        height: 40px;
    }

    .help-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .carousel-track {
        min-height: 470px;
    }

    .promo-slide {
        padding: 24px 16px 90px;
    }

    .promo-slide .btn {
        width: 100%;
    }

    .featured-rail {
        grid-auto-columns: 88%;
    }
}

.public-site .cart-page {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(22px, 5vw, 54px) 0 40px;
}

.public-site .cart-page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.public-site .cart-page-heading h1 {
    margin: 8px 0 0;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
}

.public-site .cart-page-heading p {
    margin: 12px 0 0;
    color: rgba(226, 232, 240, .72);
}

.public-site .cart-continue-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(125, 211, 252, .25);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #dff9ff;
    font-weight: 850;
}

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

.public-site .cart-items {
    display: grid;
    gap: 12px;
}

.public-site .cart-item,
.public-site .cart-summary {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(7, 17, 31, .72);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}

.public-site .cart-item {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
}

.public-site .cart-item-image {
    display: grid;
    width: 86px;
    height: 70px;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: 1.4rem;
    font-weight: 950;
}

.public-site .cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-site .cart-item-info small,
.public-site .cart-item-info span {
    color: rgba(226, 232, 240, .58);
    font-size: .78rem;
}

.public-site .cart-item-info h2 {
    margin: 4px 0;
    color: #ffffff;
    font-size: 1rem;
}

.public-site .cart-item-quantity {
    display: grid;
    gap: 5px;
    color: rgba(226, 232, 240, .68);
    font-size: .72rem;
    font-weight: 800;
}

.public-site .cart-item-quantity select {
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid rgba(125, 211, 252, .25);
    border-radius: 9px;
    background: #0b1627;
    color: #ffffff;
    font: inherit;
    font-weight: 850;
}

.public-site .cart-item-subtotal {
    min-width: 86px;
    color: #ffffff;
    font-size: .92rem;
    text-align: right;
}

.public-site .cart-item-actions {
    display: grid;
    gap: 6px;
    justify-items: end;
}

.public-site .cart-item-actions a,
.public-site .cart-item-actions button {
    border: 0;
    background: transparent;
    color: #7dd3fc;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 850;
}

.public-site .cart-item-actions button:hover,
.public-site .cart-item-actions a:hover {
    color: #facc15;
}

.public-site .cart-summary {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 12px;
    padding: 22px;
}

.public-site .cart-summary > span {
    color: #7dd3fc;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.public-site .cart-summary > strong {
    color: #ffffff;
    font-size: 1.15rem;
}

.public-site .cart-summary-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .16);
}

.public-site .cart-summary-total small,
.public-site .cart-summary p {
    color: rgba(226, 232, 240, .62);
    font-size: .8rem;
}

.public-site .cart-summary-total b {
    color: #ffffff;
    font-size: 1.2rem;
}

.public-site .cart-summary p {
    margin: 0;
    line-height: 1.5;
}

.public-site .cart-summary-button,
.public-site .cart-empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    background: #1fd8ff;
    color: #07111f;
    font-weight: 950;
}

.public-site .cart-summary-button {
    width: 100%;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.public-site .cart-checkout {
    display: grid;
    gap: 18px;
    margin-top: 24px;
    padding: 26px;
    border: 1px solid rgba(31, 216, 255, .24);
    border-radius: 18px;
    background: rgba(7, 17, 31, .84);
}

.public-site .cart-checkout[hidden] {
    display: none;
}

.public-site .cart-checkout h2 {
    margin: 8px 0 0;
    color: #ffffff;
}

.public-site .cart-checkout p {
    margin: 8px 0 0;
    color: rgba(226, 232, 240, .68);
}

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

.public-site .cart-checkout-form label {
    display: grid;
    gap: 6px;
    color: rgba(226, 232, 240, .76);
    font-size: .8rem;
    font-weight: 850;
}

.public-site .cart-checkout-form input {
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font: inherit;
}

.public-site .cart-checkout-form input:focus {
    outline: 3px solid rgba(31, 216, 255, .16);
    border-color: #1fd8ff;
}

.public-site .cart-checkout-submit {
    grid-column: 1 / -1;
    min-height: 48px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #1fd8ff, #22c55e);
    color: #07111f;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
}

.public-site .cart-checkout-message {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 800;
}

.public-site .cart-checkout-message.is-error {
    background: rgba(248, 113, 113, .14);
    color: #fecaca;
}

.public-site .cart-checkout-message.is-success {
    background: rgba(74, 222, 128, .14);
    color: #bbf7d0;
}

.public-site .cart-loading,
.public-site .cart-empty {
    padding: 48px 24px;
    border: 1px dashed rgba(125, 211, 252, .3);
    border-radius: 18px;
    color: rgba(226, 232, 240, .72);
    text-align: center;
}

.public-site .cart-empty i {
    color: #1fd8ff;
    font-size: 2rem;
}

.public-site .cart-empty h2 {
    margin: 12px 0 6px;
    color: #ffffff;
}

.public-site .cart-empty p {
    margin: 0 0 18px;
}

.public-site .cart-empty a {
    width: fit-content;
    padding: 0 16px;
}

@media (max-width: 900px) {
    .public-site .cart-layout {
        grid-template-columns: 1fr;
    }

    .public-site .cart-summary {
        position: static;
    }
}

@media (max-width: 620px) {
    .public-site .cart-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .public-site .cart-item {
        grid-template-columns: 70px minmax(0, 1fr) auto;
    }

    .public-site .cart-item-image {
        width: 70px;
        height: 58px;
    }

    .public-site .cart-item-quantity {
        grid-column: 2;
    }

    .public-site .cart-item-subtotal {
        grid-column: 3;
        grid-row: 2;
        min-width: 0;
    }

    .public-site .cart-item-actions {
        grid-column: 3;
        grid-row: 1;
    }

    .public-site .cart-checkout {
        padding: 20px;
    }

    .public-site .cart-checkout-form {
        grid-template-columns: 1fr;
    }

    .public-site .cart-checkout-submit {
        grid-column: auto;
    }
}

/* Capa final: imagenes estables para cualquier proporcion */
.rail-media,
.clean-product-media,
.admin-product-preview {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

.rail-media {
    display: block !important;
    min-height: 220px !important;
    aspect-ratio: 16 / 11 !important;
    padding: 0 !important;
}

.clean-product-media {
    display: block !important;
    min-height: 270px !important;
    aspect-ratio: 16 / 11 !important;
    padding: 0 !important;
}

.rail-media img,
.clean-product-media img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    image-rendering: auto;
    transform: translateZ(0);
}

.rail-media::after,
.clean-product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 58%, rgba(15, 23, 42, .24));
    pointer-events: none;
}

.rail-media > span,
.clean-product-media > span,
.rail-media > b,
.clean-product-media > b {
    position: relative;
    z-index: 2;
}

.rail-media.image-error,
.clean-product-media.image-error {
    background: linear-gradient(145deg, #0f172a, #0f766e);
}

.rail-media.image-error::before,
.clean-product-media.image-error::before {
    content: "Sin imagen";
    position: relative;
    z-index: 2;
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    border-radius: 22px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 900;
}

@media (max-width: 620px) {
    .rail-media {
        min-height: 200px;
    }

    .clean-product-media {
        min-height: 240px;
    }
}

/* Imagenes de producto definitivas: componente aislado */
.store-image-frame {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #0f172a !important;
    isolation: isolate;
}

.store-image-frame--rail {
    aspect-ratio: 16 / 10 !important;
    min-height: 210px !important;
}

.store-image-frame--product {
    aspect-ratio: 16 / 10 !important;
    min-height: 260px !important;
}

.store-image-frame img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.store-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15,23,42,0) 62%, rgba(15,23,42,.24));
    pointer-events: none;
}

.store-image-frame > span {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 2 !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: #fbbf24 !important;
    color: #111827 !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
}

.store-image-frame figcaption {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
}

.store-image-frame.image-error::before {
    content: "Sin imagen";
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    display: grid;
    width: 110px;
    height: 82px;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 18px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 900;
}

@media (max-width: 620px) {
    .store-image-frame--rail {
        min-height: 190px !important;
    }

    .store-image-frame--product {
        min-height: 230px !important;
    }
}

/* Carrusel Productos populares: imagen estable al actualizar */
.popular-image-frame {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 210px !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #0f172a !important;
    border-radius: 0 !important;
    isolation: isolate;
}

.popular-image-frame img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.popular-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15,23,42,0) 62%, rgba(15,23,42,.24));
    pointer-events: none;
}

.popular-image-frame > span {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 2 !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    background: #fbbf24 !important;
    color: #111827 !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
}

.popular-image-frame figcaption,
.popular-image-frame.image-error::before {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
}

.popular-image-frame.image-error::before {
    content: "Sin imagen";
    width: 110px;
    font-size: .92rem;
}

@media (max-width: 760px) {
    .popular-image-frame {
        min-height: 190px !important;
    }
}

/* Capa visual final: diseño mas llamativo y profesional */
body {
    background:
        radial-gradient(circle at top left, rgba(20,184,166,.12), transparent 30rem),
        radial-gradient(circle at top right, rgba(245,158,11,.13), transparent 28rem),
        #f6f7fb;
}

.topbar {
    background: rgba(255,255,255,.9) !important;
    border-bottom: 1px solid rgba(15,23,42,.08) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(18px);
}

.brand-logo {
    border: 1px solid rgba(15,118,110,.12) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}

.clean-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 76% 24%, rgba(251,191,36,.32), transparent 22rem),
        linear-gradient(135deg, rgba(15,23,42,.94), rgba(15,118,110,.82)),
        url("https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1600&q=80") center/cover !important;
    box-shadow: 0 28px 70px rgba(15,23,42,.18);
}

.clean-hero::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 42px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.clean-hero-copy,
.clean-hero-panel {
    position: relative;
    z-index: 1;
}

.clean-hero-panel {
    border-radius: 24px !important;
    background: rgba(255,255,255,.15) !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.18);
}

.hero-product-line,
.clean-benefits article,
.help-strip article,
.rail-card,
.clean-product-card {
    box-shadow: 0 14px 32px rgba(15,23,42,.07);
    transition: transform .18s ease, box-shadow .18s ease;
}

.hero-product-line:hover,
.rail-card:hover,
.clean-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(15,23,42,.13);
}

.clean-categories a.active,
.clean-categories a:hover {
    background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(15,118,110,.22);
}

.promo-carousel {
    border-radius: 28px !important;
    box-shadow: 0 20px 48px rgba(15,23,42,.14);
}

.featured-carousel-block {
    border-radius: 26px !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.08);
}

.rail-card,
.clean-product-card {
    border-radius: 24px !important;
}

.clean-cta {
    border-radius: 28px !important;
    background:
        radial-gradient(circle at top right, rgba(251,191,36,.22), transparent 20rem),
        linear-gradient(135deg, #0f172a, #0f766e) !important;
    box-shadow: 0 22px 50px rgba(15,23,42,.16);
}

/* Capa premium final para datos de producto */
.clean-product-info {
    gap: 14px !important;
    padding: 18px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #fbfcfe 100%) !important;
}

.product-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.product-card-head span,
.product-card-head b {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.product-card-head span {
    background: #ecfdf5;
    color: #0f766e;
}

.product-card-head b {
    background: #fff7ed;
    color: #c2410c;
}

.tool-name {
    min-height: 58px !important;
    margin-top: -2px !important;
    color: #0f172a !important;
    font-size: 1.22rem !important;
    font-weight: 950 !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
}

.tool-name::after {
    width: 62px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0f766e, #14b8a6, #f59e0b) !important;
}

.clean-product-info p {
    min-height: 58px !important;
    color: #667085 !important;
    font-size: .93rem !important;
    line-height: 1.45 !important;
}

.product-commerce {
    grid-template-columns: minmax(0, 1fr) minmax(130px, .55fr) !important;
    gap: 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(15, 118, 110, .12) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.95)),
        #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 24px rgba(15,23,42,.05);
}

.price-box {
    display: grid !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}

.price-box > span {
    color: #0f766e !important;
    font-size: .7rem !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
}

.price-box div {
    justify-content: flex-start !important;
}

.price-box strong {
    color: #0b3b36 !important;
    font-size: 1.86rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.stock-status {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border-radius: 18px;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}

.stock-status > span {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(22,163,74,.12);
}

.stock-status.in > span {
    background: #16a34a;
}

.stock-status.out > span {
    background: #dc2626;
    box-shadow: 0 0 0 5px rgba(220,38,38,.12);
}

.stock-status small,
.stock-status strong {
    display: block;
}

.stock-status small {
    color: #64748b;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.stock-status strong {
    overflow: hidden;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.service-note,
.product-assurance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.product-assurance span,
.service-note span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 850;
    text-align: center;
}

.service-note span {
    border: 1px solid #e4e7ec;
    background: #f8fafc;
    color: #475467;
}

.product-assurance span {
    border: 1px solid rgba(15,118,110,.14);
    background: rgba(15,118,110,.06);
    color: #0f766e;
}

.buy-button {
    min-height: 54px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, #128c7e, #25d366) !important;
    color: #fff !important;
    font-size: .98rem !important;
    box-shadow: 0 14px 30px rgba(37, 211, 102, .26) !important;
}

.buy-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 38px rgba(37, 211, 102, .34) !important;
}

.buy-button.disabled {
    background: linear-gradient(135deg, #64748b, #94a3b8) !important;
    box-shadow: none !important;
}

@media (max-width: 520px) {
    .product-commerce,
    .service-note,
    .product-assurance {
        grid-template-columns: 1fr !important;
    }

    .stock-pill {
        width: 100% !important;
        justify-content: center !important;
    }

    .stock-status {
        justify-content: center;
    }
}

/* Tarjetas de producto premium: capa limpia y aislada */
.clean-product-grid {
    align-items: stretch;
}

.premium-product-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.premium-product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(15, 118, 110, .22);
    box-shadow: 0 26px 56px rgba(15, 23, 42, .14);
}

.premium-product-card .store-image-frame {
    flex: 0 0 auto;
    min-height: 250px !important;
    aspect-ratio: 16 / 10 !important;
}

.premium-product-body {
    display: flex;
    min-height: 430px;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}

.premium-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.premium-product-meta span,
.premium-product-meta b {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.premium-product-meta span {
    background: #ecfdf5;
    color: #0f766e;
}

.premium-product-meta b {
    background: #fff7ed;
    color: #c2410c;
}

.premium-product-title {
    min-height: 58px;
    margin: 0;
    color: #101828;
    font-size: 1.22rem;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.premium-product-desc {
    min-height: 62px;
    margin: 0;
    color: #667085;
    font-size: .94rem;
    line-height: 1.48;
}

.premium-purchase-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(138px, .58fr);
    gap: 10px;
    margin-top: auto;
    padding: 12px;
    border: 1px solid rgba(15, 118, 110, .14);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .08), rgba(255, 255, 255, .96)),
        #fff;
}

.premium-price,
.premium-stock {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

.premium-price > span,
.premium-stock small {
    display: block;
    color: #64748b;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.premium-price div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.premium-price del {
    color: #98a2b3;
    font-size: .9rem;
    font-weight: 750;
}

.premium-price strong {
    color: #0b3b36;
    font-size: 1.78rem;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -.045em;
}

.premium-stock {
    display: flex;
    align-items: center;
    gap: 10px;
}

.premium-stock > span {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
}

.premium-stock.in > span {
    background: #16a34a;
    box-shadow: 0 0 0 5px rgba(22, 163, 74, .12);
}

.premium-stock.out > span {
    background: #dc2626;
    box-shadow: 0 0 0 5px rgba(220, 38, 38, .12);
}

.premium-stock strong {
    display: block;
    overflow: hidden;
    color: #101828;
    font-size: .88rem;
    font-weight: 950;
    line-height: 1.15;
    text-overflow: ellipsis;
}

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

.premium-perks span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #f8fafc;
    color: #475467;
    font-size: .76rem;
    font-weight: 850;
    text-align: center;
}

.premium-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #128c7e, #25d366);
    color: #fff;
    font-size: .98rem;
    font-weight: 950;
    letter-spacing: -.01em;
    box-shadow: 0 14px 30px rgba(37, 211, 102, .26);
    transition: transform .16s ease, box-shadow .16s ease;
}

.premium-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(37, 211, 102, .34);
}

.premium-buy span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.premium-buy span::after {
    content: "→";
    font-size: 1.1rem;
    line-height: 1;
}

.premium-buy.is-disabled {
    background: linear-gradient(135deg, #64748b, #94a3b8);
    box-shadow: none;
}

.public-site .premium-product-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 12px;
}

.public-site .product-quantity-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    color: #475467;
    font-size: .82rem;
    font-weight: 850;
}

.public-site .product-quantity-field select {
    min-width: 72px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.public-site .product-quantity-field small {
    color: #64748b;
    font-size: .7rem;
    font-weight: 750;
}

.public-site .product-quantity-control {
    display: grid;
    grid-template-columns: 34px 48px 34px;
    gap: 4px;
    align-items: center;
}

.public-site .product-quantity-control button,
.public-site .product-quantity-control input {
    height: 36px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    font-weight: 900;
    text-align: center;
}

.public-site .product-quantity-control button {
    border-radius: 9px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.public-site .product-quantity-control button:hover,
.public-site .product-quantity-control button:focus-visible {
    border-color: #0284c7;
    background: #e0f2fe;
    color: #0369a1;
}

.public-site .product-quantity-control input {
    width: 48px;
    border-radius: 9px;
}

.public-site .product-quantity-control input::-webkit-inner-spin-button,
.public-site .product-quantity-control input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.public-site .product-quantity-control input:focus-visible {
    outline: 3px solid rgba(14, 165, 233, .2);
    border-color: #0284c7;
}

.public-site .product-quantity-field select:focus-visible {
    outline: 3px solid rgba(14, 165, 233, .2);
    border-color: #0284c7;
}

.public-site .premium-product-actions .premium-buy,
.public-site .add-cart-button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 14px;
    font-size: .82rem;
}

.public-site .premium-product-actions .premium-buy {
    padding: 0 10px;
}

.public-site .add-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(14, 165, 233, .34);
    background: #e0f2fe;
    color: #0369a1;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-align: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.public-site .add-cart-button:hover,
.public-site .add-cart-button:focus-visible,
.public-site .add-cart-button.is-added {
    border-color: #0284c7;
    background: #0284c7;
    color: #ffffff;
    transform: translateY(-2px);
}

.public-site .add-cart-button.is-added i::before {
    content: "\f00c";
}

@media (max-width: 430px) {
    .public-site .premium-product-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .premium-product-body {
        min-height: 450px;
    }
}

@media (max-width: 620px) {
    .premium-product-card .store-image-frame {
        min-height: 220px !important;
    }

    .premium-product-body {
        min-height: auto;
    }

    .premium-purchase-panel,
    .premium-perks {
        grid-template-columns: 1fr;
    }
}

/* Identidad tipografica publica */
body {
    font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: #101828;
}

h1,
h2,
h3,
.brand strong,
.clean-hero h1,
.catalog-head h2,
.carousel-heading h2,
.promo-slide h2,
.premium-product-title,
.price-box strong,
.premium-price strong {
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif !important;
}

.brand strong {
    font-size: 1.14rem !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
}

.brand small {
    color: #667085 !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
}

.nav a {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .92rem !important;
    font-weight: 850 !important;
    letter-spacing: -.025em !important;
}

.clean-kicker {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    color: #fbbf24 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.clean-hero h1 {
    max-width: 880px !important;
    font-size: clamp(2.65rem, 5.6vw, 5.35rem) !important;
    font-weight: 900 !important;
    line-height: .94 !important;
    letter-spacing: -.07em !important;
}

.clean-hero p,
.promo-slide p {
    font-size: 1.12rem !important;
    font-weight: 600 !important;
    line-height: 1.72 !important;
    letter-spacing: -.018em !important;
}

.promo-slide h2,
.catalog-head h2,
.carousel-heading h2 {
    font-weight: 900 !important;
    letter-spacing: -.065em !important;
}

.clean-categories a,
.hero-product-line strong,
.premium-product-meta span,
.premium-product-meta b,
.premium-perks span,
.premium-buy {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
}

.premium-product-title {
    color: #0b1220 !important;
    font-size: 1.32rem !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: -.055em !important;
}

.premium-product-desc {
    color: #5f6b7a !important;
    font-size: .96rem !important;
    font-weight: 600 !important;
    line-height: 1.58 !important;
    letter-spacing: -.015em !important;
}

.premium-product-meta span,
.premium-product-meta b {
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
}

.premium-price > span,
.premium-stock small {
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
}

.premium-price strong {
    color: #0f4f49 !important;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .92rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -.025em !important;
}

.premium-stock strong {
    font-size: .92rem !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
}

.premium-buy {
    font-size: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
}

.stock-pill,
.price-box,
.buy-button,
.btn {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
}

@media (max-width: 620px) {
    .clean-hero h1 {
        font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
        letter-spacing: -.06em !important;
    }

    .premium-product-title {
        font-size: 1.2rem !important;
    }
}

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

/* Hero comercial premium */
.clean-hero {
    isolation: isolate;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .72fr) !important;
    gap: clamp(22px, 4vw, 42px) !important;
    min-height: 590px !important;
    padding: clamp(30px, 5vw, 70px) !important;
    border: 0 !important;
    border-radius: 34px !important;
    background:
        linear-gradient(120deg, rgba(4, 12, 24, .96) 0%, rgba(9, 36, 45, .91) 47%, rgba(15, 118, 110, .82) 100%),
        url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1800&q=82") center/cover !important;
    box-shadow: 0 34px 78px rgba(15, 23, 42, .24) !important;
}

.clean-hero::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 26px;
    pointer-events: none;
}

.clean-hero::after {
    right: -70px !important;
    bottom: -135px !important;
    width: 390px !important;
    height: 390px !important;
    border-color: rgba(45, 212, 191, .14) !important;
}

.clean-hero-copy {
    max-width: 920px;
    gap: 20px !important;
}

.hero-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.hero-live-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px 0 30px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .9);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .01em;
    backdrop-filter: blur(12px);
}

.hero-live-dot::before {
    content: "";
    position: absolute;
    left: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, .15);
}

.hero-main-title {
    max-width: 900px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.75rem, 5.25vw, 5.55rem) !important;
    font-weight: 900 !important;
    line-height: .95 !important;
    letter-spacing: -.064em !important;
}

.hero-main-title span {
    background: linear-gradient(90deg, #ffffff 0%, #ecfeff 52%, #fde68a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

.hero-lead {
    max-width: 720px !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: clamp(1rem, 1.55vw, 1.18rem) !important;
    font-weight: 650 !important;
    line-height: 1.7 !important;
}

.clean-actions {
    margin-top: 2px;
}

.clean-actions .btn {
    min-height: 50px;
    padding-inline: 18px;
    border-radius: 999px !important;
    font-weight: 900 !important;
}

.clean-actions .btn.primary {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    color: #111827 !important;
    box-shadow: 0 18px 34px rgba(245, 158, 11, .28) !important;
}

.clean-actions .btn.ghost {
    border-color: rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px);
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 660px;
}

.hero-metrics article {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
}

.hero-metrics strong,
.hero-metrics span {
    display: block;
}

.hero-metrics strong {
    color: #fef3c7;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.045em;
}

.hero-metrics span {
    margin-top: 5px;
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
    font-weight: 800;
}

.clean-trust {
    gap: 9px !important;
}

.clean-trust span {
    min-height: 36px;
    padding: 0 13px !important;
    border-color: rgba(45, 212, 191, .22) !important;
    background: rgba(15, 118, 110, .28) !important;
    color: rgba(255, 255, 255, .92);
    font-size: .84rem;
    letter-spacing: -.01em;
}

.clean-hero-panel {
    align-self: center !important;
    gap: 11px !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .11)) !important;
    box-shadow: 0 24px 52px rgba(0, 0, 0, .24) !important;
    backdrop-filter: blur(22px);
}

.panel-top {
    padding: 2px 4px 8px !important;
}

.panel-top span {
    color: #fff;
    font-size: .9rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.panel-top b {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(251, 191, 36, .18);
    color: #fde68a;
    font-size: .74rem;
    font-weight: 900;
}

.hero-product-line {
    min-height: 74px;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 16px 32px rgba(4, 12, 24, .12) !important;
}

.hero-product-line:hover {
    transform: translateY(-3px) scale(1.01) !important;
}

.hero-product-line .hero-product-thumb {
    position: relative;
    overflow: hidden;
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg, #ecfeff, #fef3c7) !important;
    color: #0f766e !important;
    font-size: 1.1rem;
    font-weight: 900;
}

.hero-product-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-product-line strong {
    color: #101828;
    font-size: .96rem;
    font-weight: 900;
    letter-spacing: -.035em;
}

.hero-product-line small {
    margin-top: 2px;
    color: #667085 !important;
    font-size: .78rem;
    font-weight: 800;
}

.hero-product-line b {
    padding: 8px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #0f766e !important;
    font-size: .86rem;
    font-weight: 950;
}

@media (max-width: 980px) {
    .clean-hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .clean-hero-panel {
        width: 100%;
    }

    .hero-metrics {
        max-width: none;
    }
}

@media (max-width: 620px) {
    .clean-hero {
        padding: 24px !important;
        border-radius: 26px !important;
    }

    .clean-hero::before {
        inset: 10px;
        border-radius: 20px;
    }

    .hero-main-title {
        font-size: clamp(2.25rem, 11vw, 3.2rem) !important;
        line-height: .98 !important;
        letter-spacing: -.055em !important;
    }

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

    .hero-metrics article {
        padding: 12px 14px;
    }

    .hero-product-line {
        align-items: center;
        gap: 10px !important;
    }

    .hero-product-line b {
        font-size: .78rem;
        padding-inline: 8px;
    }
}

/* Encabezado profesional */
.promo-strip {
    position: relative;
    isolation: isolate;
    min-height: 42px;
    padding: 8px clamp(16px, 4vw, 52px) !important;
    justify-content: space-between !important;
    overflow: hidden;
    background:
        linear-gradient(90deg, #07111f 0%, #0f766e 52%, #f59e0b 100%) !important;
    color: #fff;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
}

.promo-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(110deg, transparent 0%, rgba(255,255,255,.14) 46%, transparent 56%);
    transform: translateX(-70%);
    animation: headerShine 7s linear infinite;
}

.promo-message,
.promo-action {
    position: relative;
    z-index: 1;
}

.promo-message {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .9rem;
    font-weight: 850;
    letter-spacing: -.015em;
}

.promo-message::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 6px rgba(52, 211, 153, .16);
}

.promo-action {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none !important;
    text-underline-offset: 0 !important;
    backdrop-filter: blur(12px);
}

.topbar {
    top: 0;
    z-index: 30 !important;
    width: min(1240px, calc(100% - 28px));
    margin: 14px auto 0;
    padding: 12px 14px !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 24px;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(20px);
}

.brand {
    min-width: 0;
    gap: 13px !important;
}

.brand-logo,
.brand-mark {
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px;
    border-radius: 22px !important;
}

.brand-logo {
    padding: 7px;
    border: 1px solid rgba(15, 118, 110, .16) !important;
    background:
        linear-gradient(180deg, #ffffff, #f8fafc) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 12px 28px rgba(15, 23, 42, .1) !important;
}

.brand-logo img {
    padding: 0 !important;
    border-radius: 16px;
    object-fit: contain !important;
}

.brand-mark {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.38), transparent 32%),
        linear-gradient(135deg, #0f766e, #14b8a6 54%, #f59e0b) !important;
    color: #fff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.55rem;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(15, 118, 110, .26);
}

.brand-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.brand strong {
    color: #0b1220 !important;
    font-size: clamp(1.05rem, 1.6vw, 1.28rem) !important;
    font-weight: 950 !important;
    line-height: 1.05;
    letter-spacing: -.045em !important;
}

.brand small {
    color: #667085 !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    line-height: 1.2;
    letter-spacing: -.02em !important;
}

.nav {
    align-items: center;
    justify-content: flex-end;
    gap: 7px !important;
}

.nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px !important;
    border: 1px solid transparent;
    border-radius: 999px !important;
    color: #475467 !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.nav a:hover,
.nav a.active {
    border-color: rgba(15, 118, 110, .16);
    background: #ecfdf5 !important;
    color: #0f766e !important;
    transform: translateY(-1px);
}

.nav a.active::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 7px;
    left: 14px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f766e, #14b8a6, #f59e0b);
}

.nav .nav-cta {
    min-height: 46px;
    margin-left: 4px;
    padding: 0 18px !important;
    border: 0;
    background: linear-gradient(135deg, #128c7e, #25d366) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(37, 211, 102, .28);
}

.nav .nav-cta::after {
    content: none;
}

.nav .nav-cta:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(37, 211, 102, .34);
}

@keyframes headerShine {
    0% { transform: translateX(-78%); }
    48%, 100% { transform: translateX(78%); }
}

@media (max-width: 900px) {
    .topbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px !important;
        width: min(100% - 20px, 1240px);
        margin-top: 10px;
    }

    .nav {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding: 2px 2px 6px;
        scrollbar-width: thin;
    }

    .nav a {
        flex: 0 0 auto;
    }
}

@media (max-width: 620px) {
    .promo-strip {
        align-items: stretch !important;
        gap: 8px !important;
        min-height: 0;
    }

    .promo-message {
        font-size: .82rem;
    }

    .promo-action {
        justify-content: center;
        width: 100%;
    }

    .brand-logo,
    .brand-mark {
        width: 64px !important;
        height: 64px !important;
        flex-basis: 64px;
    }

    .brand small {
        font-size: .73rem !important;
    }

    .nav .nav-cta {
        margin-left: 0;
    }
}

/* Encabezado con paleta del logo */
.promo-strip {
    background:
        radial-gradient(circle at 18% 50%, rgba(31, 216, 255, .28), transparent 22rem),
        radial-gradient(circle at 72% 50%, rgba(255, 62, 181, .28), transparent 20rem),
        linear-gradient(90deg, #030817 0%, #061432 45%, #121038 72%, #ffb703 120%) !important;
}

.promo-action {
    border-color: rgba(31, 216, 255, .36);
    background: rgba(7, 20, 50, .54);
    box-shadow: 0 0 22px rgba(31, 216, 255, .18);
}

.promo-message::before {
    background: #1fd8ff;
    box-shadow: 0 0 0 6px rgba(31, 216, 255, .16), 0 0 18px rgba(31, 216, 255, .65);
}

.topbar {
    border-color: rgba(31, 216, 255, .16) !important;
    background:
        linear-gradient(135deg, rgba(3, 8, 23, .92), rgba(6, 20, 50, .88) 48%, rgba(18, 16, 56, .9)) !important;
    box-shadow:
        0 24px 56px rgba(3, 8, 23, .28),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.brand-logo {
    border-color: rgba(31, 216, 255, .28) !important;
    background:
        radial-gradient(circle at 28% 18%, rgba(31, 216, 255, .2), transparent 36%),
        radial-gradient(circle at 80% 70%, rgba(255, 62, 181, .2), transparent 38%),
        #050b1d !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .06),
        0 16px 34px rgba(31, 216, 255, .13) !important;
}

.brand-mark {
    background:
        radial-gradient(circle at 24% 20%, rgba(255,255,255,.4), transparent 26%),
        linear-gradient(135deg, #1fd8ff 0%, #7c3aed 48%, #ff3eb5 74%, #ffb703 100%) !important;
    box-shadow: 0 16px 32px rgba(255, 62, 181, .24);
}

.brand strong {
    color: #ffffff !important;
    text-shadow: 0 0 18px rgba(31, 216, 255, .2);
}

.brand small {
    color: rgba(226, 232, 240, .78) !important;
}

.nav a {
    color: rgba(226, 232, 240, .78) !important;
}

.nav a:hover,
.nav a.active {
    border-color: rgba(31, 216, 255, .26);
    background:
        linear-gradient(135deg, rgba(31, 216, 255, .14), rgba(255, 62, 181, .1)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(31, 216, 255, .1);
}

.nav a.active::after {
    background: linear-gradient(90deg, #1fd8ff, #ff3eb5, #ffb703);
    box-shadow: 0 0 12px rgba(31, 216, 255, .55);
}

.nav .nav-cta {
    background:
        linear-gradient(135deg, #1fd8ff 0%, #7c3aed 48%, #ff3eb5 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 16px 32px rgba(255, 62, 181, .24),
        0 0 28px rgba(31, 216, 255, .16);
}

.nav .nav-cta:hover {
    box-shadow:
        0 20px 38px rgba(255, 62, 181, .32),
        0 0 34px rgba(31, 216, 255, .22);
}

/* Fondo global llamativo y contrastado */
html {
    background: #030817;
}

body {
    min-height: 100vh;
    background-color: #030817 !important;
    background-image:
        linear-gradient(118deg, rgba(31, 216, 255, .2) 0%, transparent 24%, transparent 68%, rgba(255, 62, 181, .18) 100%),
        linear-gradient(160deg, transparent 0 42%, rgba(255, 183, 3, .13) 42% 43%, transparent 43% 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 76px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 76px),
        linear-gradient(135deg, #030817 0%, #061432 38%, #120d36 68%, #18081f 100%) !important;
    background-attachment: fixed;
}

.page {
    position: relative;
    z-index: 1;
}

.page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(105deg, transparent 0 18%, rgba(31, 216, 255, .08) 18% 18.35%, transparent 18.35% 100%),
        linear-gradient(72deg, transparent 0 58%, rgba(255, 62, 181, .07) 58% 58.4%, transparent 58.4% 100%),
        linear-gradient(140deg, transparent 0 78%, rgba(255, 183, 3, .08) 78% 78.35%, transparent 78.35% 100%);
}

.clean-hero,
.promo-carousel,
.tools-marquee-section,
.featured-carousel-block,
.clean-benefits article,
.help-strip article,
.premium-product-card {
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .26),
        0 0 0 1px rgba(31, 216, 255, .07) !important;
}

.tools-marquee-section,
.featured-carousel-block {
    border-color: rgba(31, 216, 255, .12) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(240, 249, 255, .9)) !important;
}

.clean-benefits article,
.help-strip article {
    border-color: rgba(31, 216, 255, .12) !important;
    background: rgba(255, 255, 255, .96) !important;
}

.catalog-head {
    padding: 26px 0 4px;
}

.catalog-head h2 {
    color: #ffffff !important;
    text-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.catalog-head p {
    color: rgba(226, 232, 240, .76) !important;
    font-weight: 700;
}

.catalog-head .clean-kicker {
    color: #1fd8ff !important;
    text-shadow: 0 0 20px rgba(31, 216, 255, .28);
}

.clean-categories a {
    border-color: rgba(31, 216, 255, .15) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.clean-categories a.active,
.clean-categories a:hover {
    border-color: transparent !important;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 54%, #ff3eb5) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px rgba(31, 216, 255, .18);
}

.clean-search input,
.clean-search select {
    border-color: rgba(31, 216, 255, .2) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .16);
}

.footer {
    margin-top: 34px;
    border-top-color: rgba(31, 216, 255, .14) !important;
    color: rgba(226, 232, 240, .72) !important;
}

.about-store {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(280px, .8fr);
    gap: 22px;
    align-items: center;
    margin-top: 26px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid rgba(31, 216, 255, .14);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 20%, rgba(31, 216, 255, .16), transparent 22rem),
        radial-gradient(circle at 88% 70%, rgba(255, 62, 181, .13), transparent 20rem),
        rgba(255, 255, 255, .94);
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .24),
        0 0 0 1px rgba(31, 216, 255, .06);
}

.about-store h2 {
    max-width: 760px;
    margin: 8px 0 0;
    color: #101828;
    font-size: clamp(1.8rem, 3.3vw, 3rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.06em;
}

.about-store h1 {
    max-width: 860px;
    margin: 8px 0 0;
    color: #101828;
    font-size: clamp(2rem, 4.8vw, 4.4rem);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.07em;
}

.about-store p {
    margin: 0;
    color: #475467;
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.7;
}

.about-points {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.about-points span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(31, 216, 255, .16);
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.about-store-page {
    margin-top: 0;
    min-height: 420px;
}

.about-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.about-detail-grid article {
    padding: 22px;
    border: 1px solid rgba(31, 216, 255, .14);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,249,255,.9));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}

.about-detail-grid strong,
.about-detail-grid span {
    display: block;
}

.about-detail-grid strong {
    color: #0f172a;
    font-size: 2rem;
    font-weight: 950;
    letter-spacing: -.055em;
}

.about-detail-grid span {
    margin-top: 6px;
    color: #5f6b7a;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 620px) {
    body {
        background-size: auto;
    }

    .catalog-head {
        padding-top: 20px;
    }

    .about-store,
    .about-points,
    .about-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Inicio: carrusel promocional principal */
.legacy-promo-carousel {
    display: none !important;
}

.home-promo-carousel {
    min-height: 0;
    margin-top: 0 !important;
    border: 1px solid rgba(31, 216, 255, .18);
    border-radius: 30px !important;
    background:
        linear-gradient(135deg, rgba(3, 8, 23, .94), rgba(6, 20, 50, .9) 52%, rgba(18, 16, 56, .92)) !important;
    box-shadow:
        0 28px 68px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.home-promo-carousel .carousel-track {
    min-height: clamp(330px, 34vw, 455px) !important;
}

.home-promo-carousel .promo-slide {
    grid-template-columns: minmax(0, 1fr) minmax(270px, .46fr);
    gap: clamp(20px, 4vw, 42px);
    padding: clamp(24px, 4vw, 48px) !important;
    background:
        radial-gradient(circle at 12% 20%, rgba(31, 216, 255, .24), transparent 24rem),
        radial-gradient(circle at 78% 35%, rgba(255, 62, 181, .2), transparent 22rem),
        linear-gradient(135deg, rgba(3, 8, 23, .94), rgba(8, 18, 46, .9)) !important;
}

.home-promo-carousel .promo-slide:nth-child(2) {
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 62, 181, .22), transparent 24rem),
        radial-gradient(circle at 80% 50%, rgba(255, 183, 3, .18), transparent 20rem),
        linear-gradient(135deg, rgba(3, 8, 23, .94), rgba(18, 16, 56, .9)) !important;
}

.home-promo-carousel .promo-slide:nth-child(3) {
    background:
        radial-gradient(circle at 16% 20%, rgba(255, 183, 3, .17), transparent 22rem),
        radial-gradient(circle at 78% 46%, rgba(31, 216, 255, .24), transparent 24rem),
        linear-gradient(135deg, rgba(3, 8, 23, .94), rgba(6, 20, 50, .9)) !important;
}

.promo-slide-copy {
    max-width: 720px !important;
}

.home-promo-carousel .promo-slide h2 {
    max-width: 760px;
    margin: 8px 0 12px;
    color: #ffffff;
    font-size: clamp(2rem, 4.2vw, 4.15rem) !important;
    font-weight: 900;
    line-height: .98 !important;
    letter-spacing: -.065em !important;
}

.home-promo-carousel .promo-slide p {
    max-width: 620px;
    color: rgba(226, 232, 240, .82) !important;
    font-size: clamp(.98rem, 1.35vw, 1.12rem) !important;
    font-weight: 650 !important;
    line-height: 1.65 !important;
}

.home-promo-carousel .promo-slide .btn {
    min-height: 48px;
    margin-top: 4px;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 54%, #ff3eb5) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 36px rgba(31, 216, 255, .18);
}

.promo-slide-media {
    position: relative;
    display: grid;
    place-items: center;
    align-self: stretch;
    min-height: 250px;
    margin: 0;
    overflow: hidden;
    padding: clamp(12px, 2vw, 18px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 24px;
    background:
        radial-gradient(circle at center, rgba(31, 216, 255, .18), transparent 52%),
        radial-gradient(circle at 80% 70%, rgba(255, 62, 181, .14), transparent 46%),
        #050b1d;
    box-shadow:
        0 22px 46px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.promo-slide-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 250px;
    border-radius: 18px;
    object-fit: contain;
    object-position: center;
    image-rendering: auto;
}

.promo-slide-media::after {
    content: none;
}

.promo-slide-media figcaption {
    display: grid;
    height: 100%;
    min-height: 250px;
    place-items: center;
    color: #1fd8ff;
    font-size: 3rem;
    font-weight: 900;
}

.promo-slide-media span,
.promo-slide-media b {
    display: none !important;
}

.home-essentials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.home-essentials article {
    padding: 18px;
    border: 1px solid rgba(31, 216, 255, .14);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,249,255,.9));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .2);
}

.home-essentials b,
.home-essentials span {
    display: block;
}

.home-essentials b {
    color: #101828;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -.035em;
}

.home-essentials span {
    margin-top: 6px;
    color: #5f6b7a;
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.5;
}

.home-essentials + .clean-hero {
    margin-top: 24px;
}

@media (max-width: 820px) {
    .home-promo-carousel .promo-slide {
        grid-template-columns: 1fr;
    }

    .promo-slide-media {
        min-height: 220px;
    }

    .promo-slide-media img,
    .promo-slide-media figcaption {
        min-height: 220px;
    }

    .home-essentials {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .home-promo-carousel {
        border-radius: 24px !important;
    }

    .home-promo-carousel .carousel-track {
        min-height: 590px !important;
    }

    .home-promo-carousel .promo-slide {
        padding: 22px !important;
    }

    .home-promo-carousel .promo-slide h2 {
        font-size: clamp(2rem, 10vw, 2.85rem) !important;
    }
}

/* Acabado final del primer carrusel */
.home-promo-carousel {
    border-radius: 32px !important;
}

.home-promo-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(110deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(255,255,255,.06)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 54px);
    pointer-events: none;
}

.home-promo-carousel .carousel-track {
    height: clamp(390px, 35vw, 485px) !important;
    min-height: 0 !important;
}

.home-promo-carousel .promo-slide {
    z-index: 1;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 440px) !important;
    align-items: center !important;
    min-height: 100%;
    padding: clamp(28px, 4vw, 54px) clamp(28px, 4.4vw, 60px) !important;
}

.home-promo-carousel .promo-slide-copy {
    display: grid;
    gap: 12px;
    align-content: center;
}

.home-promo-carousel .promo-slide h2 {
    max-width: 720px;
    margin: 0 !important;
}

.home-promo-carousel .promo-slide p {
    margin: 0 0 4px !important;
}

.promo-slide-media {
    align-self: center !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    padding: clamp(14px, 2vw, 22px) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)),
        radial-gradient(circle at 50% 42%, rgba(31, 216, 255, .2), transparent 50%),
        #050b1d !important;
}

.promo-slide-media::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    pointer-events: none;
}

.promo-slide-media img {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100%;
    max-height: 100%;
    border-radius: 18px;
    object-fit: contain !important;
    object-position: center center !important;
}

.home-promo-carousel .carousel-controls {
    z-index: 3;
    right: 24px;
    bottom: 20px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(3, 8, 23, .42);
    backdrop-filter: blur(14px);
}

.home-promo-carousel .carousel-controls button {
    width: 36px;
    height: 36px;
    border-color: rgba(31,216,255,.28);
}

.home-promo-carousel .carousel-dots button.active {
    background: linear-gradient(90deg, #1fd8ff, #ff3eb5);
}

@media (max-width: 820px) {
    .home-promo-carousel .carousel-track {
        height: 640px !important;
    }

    .home-promo-carousel .promo-slide {
        grid-template-columns: 1fr !important;
        align-content: center;
        gap: 20px;
        padding-bottom: 76px !important;
    }

    .promo-slide-media {
        max-width: 520px;
        justify-self: center;
    }
}

@media (max-width: 620px) {
    .home-promo-carousel .carousel-track {
        height: 675px !important;
    }

    .home-promo-carousel .promo-slide {
        padding: 22px 20px 76px !important;
    }

    .home-promo-carousel .carousel-controls {
        right: 50%;
        transform: translateX(50%);
    }
}

/* Footer llamativo */
.site-footer {
    position: relative;
    width: min(1240px, calc(100% - 28px));
    margin: 34px auto 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(31, 216, 255, .16) !important;
    border-radius: 30px 30px 0 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(31, 216, 255, .24), transparent 24rem),
        radial-gradient(circle at 82% 26%, rgba(255, 62, 181, .2), transparent 22rem),
        linear-gradient(135deg, rgba(3, 8, 23, .98), rgba(6, 20, 50, .96) 52%, rgba(18, 16, 56, .98)) !important;
    color: #e2e8f0 !important;
    box-shadow:
        0 -18px 54px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 58px),
        linear-gradient(110deg, transparent 0 72%, rgba(255,183,3,.1) 72% 72.4%, transparent 72.4% 100%);
    pointer-events: none;
}

.footer-main,
.footer-bottom {
    position: relative;
    z-index: 1;
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(280px, 1.25fr) repeat(3, minmax(160px, .55fr));
    gap: clamp(18px, 3vw, 34px);
    padding: clamp(28px, 4vw, 44px);
}

.footer-brand {
    display: grid;
    align-content: start;
    gap: 16px;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    width: max-content;
    max-width: 100%;
}

.footer-logo,
.footer-mark {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(31, 216, 255, .28);
    border-radius: 22px;
    background:
        radial-gradient(circle at 28% 18%, rgba(31, 216, 255, .2), transparent 36%),
        radial-gradient(circle at 80% 70%, rgba(255, 62, 181, .2), transparent 38%),
        #050b1d;
    box-shadow: 0 14px 32px rgba(31, 216, 255, .12);
}

.footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 7px;
    object-fit: contain;
}

.footer-mark {
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 52%, #ff3eb5);
    color: #fff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
}

.footer-brand strong,
.footer-brand small {
    display: block;
}

.footer-brand strong {
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -.045em;
}

.footer-brand small {
    margin-top: 2px;
    color: rgba(226,232,240,.72);
    font-size: .84rem;
    font-weight: 800;
}

.footer-brand p {
    max-width: 460px;
    margin: 0;
    color: rgba(226,232,240,.76);
    font-size: .96rem;
    font-weight: 650;
    line-height: 1.65;
}

.footer-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 54%, #ff3eb5);
    color: #fff;
    font-size: .92rem;
    font-weight: 950;
    box-shadow: 0 16px 32px rgba(31, 216, 255, .16);
}

.footer-column {
    display: grid;
    align-content: start;
    gap: 9px;
}

.footer-column h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: .92rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-column a,
.footer-column span,
.footer-column small {
    color: rgba(226,232,240,.72);
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.45;
}

.footer-column a {
    transition: color .16s ease, transform .16s ease;
}

.footer-column a:hover {
    color: #1fd8ff;
    transform: translateX(3px);
}

.footer-contact b {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -.03em;
}

.footer-contact small {
    max-width: 220px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px clamp(24px, 4vw, 44px);
    border-top: 1px solid rgba(31, 216, 255, .13);
    background: rgba(3, 8, 23, .44);
}

.footer-bottom span {
    color: rgba(226,232,240,.62);
    font-size: .84rem;
    font-weight: 750;
}

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

@media (max-width: 620px) {
    .site-footer {
        width: min(100% - 20px, 1240px);
        border-radius: 24px 24px 0 0;
    }

    .footer-main {
        grid-template-columns: 1fr;
        padding: 26px 22px;
    }

    .footer-logo-link,
    .footer-whatsapp {
        width: 100%;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        padding: 15px 22px;
    }
}

/* Footer profesional refinado */
.site-footer {
    border-radius: 28px 28px 0 0 !important;
    background:
        linear-gradient(180deg, rgba(8, 18, 46, .96), rgba(3, 8, 23, .98)) !important;
}

.site-footer::before {
    opacity: .72;
    background:
        linear-gradient(120deg, rgba(31, 216, 255, .1), transparent 32%, transparent 70%, rgba(255, 62, 181, .08)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
}

.footer-cta-panel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px) 0;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid rgba(31, 216, 255, .16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 20%, rgba(31, 216, 255, .18), transparent 18rem),
        linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.footer-eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: #1fd8ff;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-cta-panel h2 {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.45rem, 3vw, 2.55rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.06em;
}

.footer-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: #ffffff;
    color: #07111f;
    font-size: .92rem;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.footer-main {
    grid-template-columns: minmax(320px, 1.35fr) repeat(3, minmax(170px, .58fr)) !important;
    padding-top: clamp(24px, 3vw, 34px) !important;
}

.footer-column {
    padding: 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
}

.footer-brand {
    padding-right: clamp(10px, 2vw, 24px);
}

.footer-brand p {
    max-width: 520px;
}

.footer-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-trust span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(31,216,255,.16);
    border-radius: 999px;
    background: rgba(31,216,255,.07);
    color: rgba(226,232,240,.82);
    font-size: .78rem;
    font-weight: 850;
}

.footer-column h3 {
    color: #e0faff !important;
}

.footer-column a,
.footer-column span,
.footer-column small {
    font-weight: 700 !important;
}

.footer-whatsapp {
    width: max-content;
    min-height: 40px;
    margin-top: 4px;
    padding: 0 14px;
    border: 1px solid rgba(37, 211, 102, .22);
    background: rgba(37, 211, 102, .12) !important;
    color: #d9ffe8 !important;
    box-shadow: none !important;
}

.footer-bottom {
    background: rgba(0,0,0,.18) !important;
}

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

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .footer-cta-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .footer-cta-button {
        width: 100%;
    }
}

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

    .footer-column {
        padding: 15px;
    }
}

/* Footer profesional final */
.professional-footer {
    width: min(1240px, calc(100% - 28px)) !important;
    margin: 42px auto 0 !important;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 28px 28px 0 0 !important;
    background:
        linear-gradient(180deg, #08111f 0%, #030817 100%) !important;
    color: #e5e7eb !important;
    box-shadow:
        0 -18px 48px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

.professional-footer::before {
    background:
        linear-gradient(90deg, rgba(31, 216, 255, .16), transparent 34%, transparent 66%, rgba(255, 62, 181, .12)),
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 32%) !important;
    opacity: 1;
}

.professional-footer .footer-cta-panel {
    margin: 0 !important;
    padding: clamp(24px, 4vw, 38px) clamp(24px, 4vw, 44px) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(135deg, rgba(31, 216, 255, .09), rgba(255, 62, 181, .055)) !important;
    box-shadow: none !important;
}

.professional-footer .footer-eyebrow {
    color: #7dd3fc !important;
    font-size: .74rem !important;
    letter-spacing: .14em !important;
}

.professional-footer .footer-cta-panel h2 {
    max-width: 760px;
    color: #ffffff !important;
    font-size: clamp(1.45rem, 2.6vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.052em !important;
}

.professional-footer .footer-cta-button {
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(125, 211, 252, .24);
    background: #ffffff !important;
    color: #07111f !important;
    font-size: .9rem !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22) !important;
}

.professional-footer .footer-main {
    grid-template-columns: minmax(320px, 1.45fr) repeat(3, minmax(160px, .55fr)) !important;
    gap: clamp(18px, 3vw, 34px) !important;
    padding: clamp(28px, 4vw, 44px) !important;
}

.professional-footer .footer-brand {
    gap: 15px !important;
    padding: 0 !important;
}

.professional-footer .footer-logo,
.professional-footer .footer-mark {
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
    border-radius: 18px !important;
    border-color: rgba(125, 211, 252, .18) !important;
    background: rgba(15, 23, 42, .8) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18) !important;
}

.professional-footer .footer-logo img {
    padding: 6px !important;
}

.professional-footer .footer-brand strong {
    color: #ffffff !important;
    font-size: 1.18rem !important;
}

.professional-footer .footer-brand small,
.professional-footer .footer-brand p {
    color: rgba(226, 232, 240, .68) !important;
}

.professional-footer .footer-brand p {
    max-width: 500px !important;
    font-size: .94rem !important;
}

.professional-footer .footer-trust {
    gap: 7px !important;
}

.professional-footer .footer-trust span {
    min-height: 30px !important;
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(255,255,255,.045) !important;
    color: rgba(226, 232, 240, .74) !important;
}

.professional-footer .footer-column {
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.professional-footer .footer-column h3 {
    margin-bottom: 9px !important;
    color: #ffffff !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    letter-spacing: .14em !important;
}

.professional-footer .footer-column a,
.professional-footer .footer-column span,
.professional-footer .footer-column small {
    color: rgba(226, 232, 240, .66) !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
}

.professional-footer .footer-column a,
.professional-footer .footer-contact > span,
.professional-footer .footer-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-link-icon,
.footer-mini-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}

.footer-link-icon {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(125, 211, 252, .16);
    background: rgba(125, 211, 252, .08);
    color: #7dd3fc;
    font-size: .68rem;
}

.footer-mini-icon {
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,.08);
    color: #e0faff;
    font-size: .62rem;
}

.professional-footer .footer-column a:hover {
    color: #7dd3fc !important;
    transform: translateX(2px) !important;
}

.professional-footer .footer-contact b {
    color: #ffffff !important;
    font-size: 1.02rem !important;
}

.professional-footer .footer-whatsapp {
    min-height: 38px !important;
    margin-top: 8px !important;
    border-color: rgba(34, 197, 94, .22) !important;
    background: rgba(34, 197, 94, .1) !important;
    color: #bbf7d0 !important;
    font-size: .86rem !important;
}

.professional-footer .footer-payments {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(240px, .65fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 0 clamp(24px, 4vw, 44px) clamp(22px, 3vw, 30px);
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.professional-footer .footer-payments h3 {
    max-width: 380px;
    margin: 5px 0 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.08rem, 1.8vw, 1.45rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.045em;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.payment-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(255,255,255,.07);
    color: #ffffff;
    font-size: .88rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.payment-card b {
    display: inline-grid;
    min-width: 32px;
    height: 32px;
    place-items: center;
    padding: 0 6px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.payment-card.yape b {
    background: #742384;
    color: #ffffff;
}

.payment-card.plin b {
    background: linear-gradient(135deg, #00a0df, #00c48c);
    color: #ffffff;
}

.payment-card.binance b {
    background: #f3ba2f;
    color: #111827;
}

.payment-card.bcp b {
    background: #0b3b8c;
    color: #ffffff;
}

.payment-card.interbank b {
    background: #00a650;
    color: #ffffff;
}

.professional-footer .footer-bottom {
    padding: 16px clamp(24px, 4vw, 44px) !important;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(0, 0, 0, .18) !important;
}

.professional-footer .footer-bottom span {
    color: rgba(226, 232, 240, .52) !important;
    font-size: .82rem !important;
}

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

    .professional-footer .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .professional-footer .footer-cta-panel {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .professional-footer .footer-cta-button {
        width: 100%;
    }

    .professional-footer .footer-payments {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 620px) {
    .professional-footer {
        width: min(100% - 20px, 1240px) !important;
    }

    .professional-footer .footer-main {
        grid-template-columns: 1fr !important;
    }

    .professional-footer .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .professional-footer .footer-payments {
        margin-right: 20px;
        margin-left: 20px;
        padding: 16px;
    }

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

    .payment-card {
        justify-content: flex-start;
    }
}

/* Separacion visual: admin no hereda el acabado comercial publico */
.admin-area {
    background: #f6f7fb !important;
    background-image: none !important;
    color: #101828 !important;
}

.admin-area .topbar {
    width: auto !important;
    margin: 0 !important;
    padding: 12px clamp(16px, 4vw, 40px) !important;
    border: 0 !important;
    border-bottom: 1px solid #e4e7ec !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
    color: #101828 !important;
}

.admin-area .brand-logo,
.admin-area .brand-mark {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px #e4e7ec !important;
}

.admin-area .brand strong {
    color: #101828 !important;
    text-shadow: none !important;
}

.admin-area .brand small {
    color: #667085 !important;
}

.admin-area .nav a {
    min-height: 38px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #475467 !important;
    box-shadow: none !important;
}

.admin-area .nav a:hover,
.admin-area .nav a.active {
    border-color: #d0d5dd !important;
    background: #f2f4f7 !important;
    color: #101828 !important;
    transform: none !important;
}

.admin-area .nav a.active::after {
    content: none !important;
}

.admin-area .nav .nav-cta {
    border-color: transparent !important;
    background: #101828 !important;
    color: #ffffff !important;
}

.admin-area .page {
    width: min(1280px, calc(100% - 32px));
    padding-top: 28px;
}

.admin-area .admin-footer {
    width: min(1280px, calc(100% - 32px));
    margin: 36px auto 0;
    padding: 18px 0;
    border-top: 1px solid #e4e7ec !important;
    color: #667085 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Footer ecommerce final */
.deluxe-footer {
    width: min(1240px, calc(100% - 28px)) !important;
    margin: 46px auto 0 !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 28px 28px 0 0 !important;
    background:
        linear-gradient(180deg, #0a1220 0%, #050814 100%) !important;
    color: #e5e7eb !important;
    box-shadow: 0 -18px 46px rgba(0, 0, 0, .22) !important;
}

.deluxe-footer::before {
    background:
        linear-gradient(90deg, rgba(31,216,255,.11), transparent 32%, transparent 70%, rgba(255,62,181,.09)),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 44%) !important;
}

.footer-service-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 22px clamp(22px, 4vw, 42px);
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.footer-service-row article {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .045);
}

.footer-service-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(31,216,255,.18), rgba(255,62,181,.12));
    color: #7dd3fc;
}

.footer-service-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-service-row b,
.footer-service-row small {
    display: block;
}

.footer-service-row b {
    color: #ffffff;
    font-size: .94rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.footer-service-row small {
    margin-top: 2px;
    color: rgba(226,232,240,.58);
    font-size: .8rem;
    font-weight: 700;
}

.deluxe-footer .footer-main {
    grid-template-columns: minmax(320px, 1.35fr) repeat(2, minmax(150px, .5fr)) minmax(220px, .72fr) !important;
    gap: clamp(20px, 3vw, 38px) !important;
    padding: clamp(28px, 4vw, 44px) !important;
}

.deluxe-footer .footer-brand-panel {
    padding: 22px !important;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
}

.deluxe-footer .footer-logo,
.deluxe-footer .footer-mark {
    width: 70px !important;
    height: 70px !important;
    flex-basis: 70px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.06) !important;
}

.footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-primary-action,
.footer-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 950;
}

.footer-primary-action {
    background: #ffffff;
    color: #07111f;
}

.footer-secondary-action {
    border: 1px solid rgba(125, 211, 252, .22);
    background: rgba(125, 211, 252, .08);
    color: #dff8ff;
}

.deluxe-footer .footer-column {
    padding-top: 8px !important;
}

.deluxe-footer .footer-column h3 {
    color: #f8fafc !important;
    font-size: .8rem !important;
    letter-spacing: .15em !important;
}

.deluxe-footer .footer-column a {
    width: max-content;
    max-width: 100%;
    padding: 3px 0;
}

.deluxe-footer .footer-contact-card {
    padding: 18px !important;
    border: 1px solid rgba(34, 197, 94, .16) !important;
    border-radius: 20px !important;
    background: rgba(34, 197, 94, .055) !important;
}

.deluxe-footer .footer-whatsapp {
    background: #22c55e !important;
    color: #052e16 !important;
    border-color: transparent !important;
    font-weight: 950 !important;
}

.deluxe-payments {
    margin: 0 clamp(22px, 4vw, 42px) 26px !important;
    padding: 20px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.04) !important;
}

.deluxe-payments .payment-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.deluxe-payments .payment-card {
    display: grid !important;
    justify-items: start;
    align-content: center;
    gap: 3px;
    min-height: 68px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.065) !important;
}

.deluxe-payments .payment-card b {
    display: block !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: .96rem !important;
    font-weight: 950 !important;
}

.deluxe-payments .payment-card small {
    color: rgba(226,232,240,.56);
    font-size: .74rem;
    font-weight: 800;
}

.deluxe-payments .payment-card.yape {
    border-color: rgba(116, 35, 132, .45);
}

.deluxe-payments .payment-card.plin {
    border-color: rgba(0, 196, 140, .38);
}

.deluxe-payments .payment-card.binance {
    border-color: rgba(243, 186, 47, .42);
}

.deluxe-payments .payment-card.bcp {
    border-color: rgba(59, 130, 246, .38);
}

.deluxe-payments .payment-card.interbank {
    border-color: rgba(34, 197, 94, .38);
}

@media (max-width: 980px) {
    .footer-service-row,
    .deluxe-footer .footer-main {
        grid-template-columns: 1fr 1fr !important;
    }

    .deluxe-footer .footer-brand-panel {
        grid-column: 1 / -1;
    }

    .deluxe-payments .payment-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .footer-service-row,
    .deluxe-footer .footer-main,
    .deluxe-payments,
    .deluxe-payments .payment-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-service-row {
        padding: 20px;
    }

    .deluxe-footer .footer-main {
        padding: 24px 20px !important;
    }

    .deluxe-payments {
        margin-right: 20px !important;
        margin-left: 20px !important;
    }

    .footer-actions,
    .footer-primary-action,
    .footer-secondary-action {
        width: 100%;
    }
}

/* Footer estilo ecommerce tipo SuperTec */
.supertec-style-footer {
    width: min(1240px, calc(100% - 28px));
    margin: 46px auto 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 24px 24px 0 0;
    background: #08111f !important;
    color: #e5e7eb !important;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .22) !important;
}

.supertec-footer-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(148, 163, 184, .16);
}

.supertec-footer-features article {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 22px 18px;
    background: #0d1728;
}

.feature-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 14px;
    background: rgba(31, 216, 255, .1);
    color: #7dd3fc;
}

.feature-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.supertec-footer-features b,
.supertec-footer-features small {
    display: block;
}

.supertec-footer-features b {
    color: #ffffff;
    font-size: .92rem;
    font-weight: 950;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.supertec-footer-features small {
    margin-top: 3px;
    color: rgba(226, 232, 240, .6);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
}

.supertec-footer-main {
    display: grid;
    grid-template-columns: minmax(280px, .92fr) minmax(0, 1.45fr);
    gap: clamp(28px, 4vw, 52px);
    padding: clamp(34px, 5vw, 56px) clamp(24px, 5vw, 54px);
    background:
        radial-gradient(circle at 10% 20%, rgba(31, 216, 255, .12), transparent 26rem),
        radial-gradient(circle at 90% 80%, rgba(255, 62, 181, .09), transparent 24rem),
        #08111f;
}

.supertec-footer-brand {
    display: grid;
    align-content: start;
    gap: 14px;
}

.supertec-footer-logo {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 24px;
    background: rgba(255,255,255,.055);
}

.supertec-footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.supertec-footer-logo span {
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 900;
}

.supertec-footer-brand h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.055em;
}

.supertec-footer-brand p {
    max-width: 450px;
    margin: 0;
    color: rgba(226, 232, 240, .68);
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.65;
}

.supertec-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 34px);
}

.supertec-footer-links section {
    display: grid;
    align-content: start;
    gap: 9px;
}

.supertec-footer-links h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.supertec-footer-links a {
    width: max-content;
    max-width: 100%;
    color: rgba(226, 232, 240, .68);
    font-size: .92rem;
    font-weight: 750;
    transition: color .16s ease, transform .16s ease;
}

.supertec-footer-links a:hover {
    color: #7dd3fc;
    transform: translateX(3px);
}

.supertec-payments {
    display: grid;
    grid-template-columns: minmax(230px, .5fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 24px clamp(24px, 5vw, 54px);
    border-top: 1px solid rgba(148, 163, 184, .14);
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    background: #0b1424;
}

.supertec-payments h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.supertec-payments p {
    margin: 4px 0 0;
    color: rgba(226, 232, 240, .58);
    font-size: .86rem;
    font-weight: 700;
}

.supertec-payment-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.supertec-payment-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    min-width: 104px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: #ffffff;
    font-size: .86rem;
    font-weight: 950;
}

.supertec-payment-list span:nth-child(1) { border-color: rgba(116, 35, 132, .5); }
.supertec-payment-list span:nth-child(2) { border-color: rgba(0, 196, 140, .44); }
.supertec-payment-list span:nth-child(3) { border-color: rgba(243, 186, 47, .5); }
.supertec-payment-list span:nth-child(4) { border-color: rgba(59, 130, 246, .46); }
.supertec-payment-list span:nth-child(5) { border-color: rgba(34, 197, 94, .46); }

.supertec-footer-company {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px clamp(24px, 5vw, 54px);
    background: #050814;
}

.supertec-footer-company strong,
.supertec-footer-company span {
    display: block;
}

.supertec-footer-company strong {
    color: #ffffff;
    font-size: .95rem;
    font-weight: 950;
}

.supertec-footer-company span,
.supertec-footer-company p {
    margin: 0;
    color: rgba(226,232,240,.55);
    font-size: .84rem;
    font-weight: 700;
}

@media (max-width: 980px) {
    .supertec-footer-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .supertec-footer-main,
    .supertec-payments {
        grid-template-columns: 1fr;
    }

    .supertec-payment-list {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .supertec-style-footer {
        width: min(100% - 20px, 1240px);
    }

    .supertec-footer-features,
    .supertec-footer-links {
        grid-template-columns: 1fr;
    }

    .supertec-footer-main,
    .supertec-payments,
    .supertec-footer-company {
        padding-right: 20px;
        padding-left: 20px;
    }

    .supertec-payment-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .supertec-footer-company {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Footer final limpio y profesional */
.clean-commerce-footer {
    width: min(1240px, calc(100% - 28px));
    margin: 46px auto 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .14) !important;
    border-radius: 22px 22px 0 0;
    background: #07111f !important;
    color: #e5e7eb !important;
    box-shadow: 0 -16px 44px rgba(0, 0, 0, .22) !important;
}

.footer-assurance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(226, 232, 240, .12);
    background: #0b1627;
}

.footer-assurance span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 14px;
    border-right: 1px solid rgba(226, 232, 240, .1);
    color: rgba(255,255,255,.86);
    font-size: .86rem;
    font-weight: 850;
    text-align: center;
}

.footer-assurance span:last-child {
    border-right: 0;
}

.footer-content {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.35fr) minmax(230px, .72fr);
    gap: clamp(24px, 4vw, 46px);
    padding: clamp(30px, 5vw, 54px);
}

.footer-company {
    display: grid;
    align-content: start;
    gap: 16px;
}

.footer-company-logo {
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
}

.footer-company-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 7px;
    object-fit: contain;
}

.footer-company-logo span {
    color: #fff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 900;
}

.footer-company h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
}

.footer-company p {
    max-width: 390px;
    margin: 8px 0 0;
    color: rgba(226, 232, 240, .64);
    font-size: .94rem;
    font-weight: 650;
    line-height: 1.65;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 30px);
}

.footer-links div {
    display: grid;
    align-content: start;
    gap: 9px;
}

.footer-links h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.footer-links a {
    width: max-content;
    max-width: 100%;
    color: rgba(226, 232, 240, .64);
    font-size: .9rem;
    font-weight: 750;
    transition: color .16s ease, transform .16s ease;
}

.footer-links a:hover {
    color: #7dd3fc;
    transform: translateX(3px);
}

.footer-contact-panel {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 20px;
    border: 1px solid rgba(34, 197, 94, .18);
    border-radius: 18px;
    background: rgba(34, 197, 94, .07);
}

.footer-contact-panel span {
    color: rgba(187, 247, 208, .82);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-contact-panel strong {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 950;
    letter-spacing: -.03em;
}

.footer-contact-panel p {
    margin: 0;
    color: rgba(226, 232, 240, .66);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.5;
}

.footer-contact-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 4px;
    padding: 0 14px;
    border-radius: 999px;
    background: #22c55e;
    color: #052e16;
    font-size: .88rem;
    font-weight: 950;
}

.footer-payment-row {
    display: grid;
    grid-template-columns: minmax(230px, .5fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 22px clamp(30px, 5vw, 54px);
    border-top: 1px solid rgba(226, 232, 240, .12);
    background: #0b1627;
}

.footer-payment-row strong,
.footer-payment-row span {
    display: block;
}

.footer-payment-row strong {
    color: #ffffff;
    font-size: .95rem;
    font-weight: 950;
}

.footer-payment-row > div:first-child span {
    margin-top: 3px;
    color: rgba(226, 232, 240, .56);
    font-size: .84rem;
    font-weight: 700;
}

.footer-payment-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.footer-payment-methods span {
    min-width: 98px;
    padding: 10px 14px;
    border: 1px solid rgba(226, 232, 240, .12);
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    color: #ffffff;
    font-size: .86rem;
    font-weight: 900;
    text-align: center;
}

.footer-payment-methods span:nth-child(1) { border-color: rgba(116, 35, 132, .5); }
.footer-payment-methods span:nth-child(2) { border-color: rgba(0, 196, 140, .44); }
.footer-payment-methods span:nth-child(3) { border-color: rgba(243, 186, 47, .5); }
.footer-payment-methods span:nth-child(4) { border-color: rgba(59, 130, 246, .46); }
.footer-payment-methods span:nth-child(5) { border-color: rgba(34, 197, 94, .46); }

.footer-legal {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 17px clamp(30px, 5vw, 54px);
    border-top: 1px solid rgba(226, 232, 240, .1);
    background: #050814;
}

.footer-legal span {
    color: rgba(226, 232, 240, .5);
    font-size: .82rem;
    font-weight: 700;
}

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

    .footer-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .clean-commerce-footer {
        width: min(100% - 20px, 1240px);
    }

    .footer-assurance,
    .footer-links,
    .footer-payment-row {
        grid-template-columns: 1fr;
    }

    .footer-assurance span {
        border-right: 0;
        border-bottom: 1px solid rgba(226, 232, 240, .1);
    }

    .footer-content,
    .footer-payment-row,
    .footer-legal {
        padding-right: 20px;
        padding-left: 20px;
    }

    .footer-payment-methods {
        justify-content: flex-start;
    }

    .footer-legal {
        flex-direction: column;
    }
}

/* Footer: formato final mejorado */
.clean-commerce-footer {
    position: relative;
    isolation: isolate;
    border-radius: 28px 28px 0 0 !important;
    background:
        linear-gradient(180deg, #0b1424 0%, #07111f 56%, #050814 100%) !important;
}

.clean-commerce-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 22%, rgba(31, 216, 255, .14), transparent 24rem),
        radial-gradient(circle at 88% 64%, rgba(255, 62, 181, .1), transparent 22rem);
    pointer-events: none;
}

.footer-assurance {
    gap: 12px;
    padding: 16px clamp(20px, 4vw, 38px);
    border-bottom: 1px solid rgba(226, 232, 240, .1);
    background: rgba(255,255,255,.025);
}

.footer-assurance span {
    position: relative;
    justify-content: flex-start;
    min-height: 50px;
    padding: 0 14px 0 42px;
    border: 1px solid rgba(226, 232, 240, .1) !important;
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    text-align: left;
}

.footer-assurance span::before {
    content: "";
    position: absolute;
    left: 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #7dd3fc;
    box-shadow: 0 0 0 5px rgba(125, 211, 252, .1);
}

.footer-content {
    grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.25fr) minmax(260px, .78fr);
    align-items: stretch;
    padding-top: clamp(34px, 5vw, 48px);
    padding-bottom: clamp(34px, 5vw, 48px);
}

.footer-company,
.footer-contact-panel {
    min-height: 100%;
    padding: 22px;
    border: 1px solid rgba(226, 232, 240, .1);
    border-radius: 22px;
    background: rgba(255,255,255,.04);
}

.footer-company {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
}

.footer-company-logo {
    width: 78px;
    height: 78px;
    border-radius: 20px;
}

.footer-company > div {
    align-self: center;
}

.footer-links {
    gap: 14px;
}

.footer-links div {
    padding: 20px;
    border: 1px solid rgba(226, 232, 240, .1);
    border-radius: 22px;
    background: rgba(255,255,255,.035);
}

.footer-links a {
    position: relative;
    width: 100%;
    padding: 5px 0 5px 14px;
}

.footer-links a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(125, 211, 252, .7);
    transform: translateY(-50%);
}

.footer-contact-panel {
    border-color: rgba(34, 197, 94, .2);
    background:
        linear-gradient(180deg, rgba(34, 197, 94, .09), rgba(255,255,255,.035));
}

.footer-contact-panel strong {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.footer-contact-panel a {
    width: 100%;
}

.footer-payment-row {
    margin: 0 clamp(20px, 4vw, 38px) 22px;
    padding: 20px;
    border: 1px solid rgba(226, 232, 240, .1);
    border-radius: 22px;
    background: rgba(255,255,255,.045);
}

.footer-payment-methods {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.footer-payment-methods span {
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.07);
}

.footer-legal {
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
}

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

    .footer-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-payment-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .footer-assurance,
    .footer-links,
    .footer-payment-row,
    .footer-payment-methods {
        grid-template-columns: 1fr;
    }

    .footer-company {
        grid-template-columns: 1fr;
    }

    .footer-payment-row {
        margin-right: 20px;
        margin-left: 20px;
    }
}

/* Correccion definitiva del footer publico */
.public-site .clean-commerce-footer {
    display: block !important;
    width: min(1280px, calc(100% - 32px)) !important;
    max-width: 1280px !important;
    margin: 48px auto 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border: 1px solid rgba(31, 216, 255, .16) !important;
    border-top: 2px solid #1fd8ff !important;
    border-radius: 8px 8px 0 0 !important;
    background: #07111f !important;
    color: #e5e7eb !important;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .18) !important;
}

.public-site .clean-commerce-footer *,
.public-site .clean-commerce-footer *::before,
.public-site .clean-commerce-footer *::after {
    box-sizing: border-box;
}

.public-site .clean-commerce-footer > section {
    width: 100% !important;
}

.public-site .footer-assurance {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
    background: transparent !important;
}

.public-site .footer-assurance span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-right: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .86) !important;
    font-size: .86rem !important;
    font-weight: 850 !important;
    text-align: center !important;
}

.public-site .footer-assurance span::before {
    content: none !important;
}

.public-site .footer-assurance span:last-child {
    border-right: 0 !important;
}

.public-site .footer-content {
    display: grid !important;
    grid-template-columns: minmax(230px, .85fr) minmax(390px, 1.35fr) minmax(245px, .8fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 42px 36px 38px !important;
    background:
        radial-gradient(circle at 8% 14%, rgba(31, 216, 255, .12), transparent 22rem),
        radial-gradient(circle at 94% 82%, rgba(255, 62, 181, .09), transparent 22rem),
        #07111f !important;
}

.public-site .footer-company,
.public-site .footer-contact-panel,
.public-site .footer-links div {
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .footer-company {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-content: start !important;
    padding: 8px 24px 8px 0 !important;
    border-right: 1px solid rgba(148, 163, 184, .16) !important;
}

.public-site .footer-company-logo {
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px !important;
}

.public-site .footer-company h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
}

.public-site .footer-company p {
    max-width: none !important;
    margin: 8px 0 0 !important;
    color: rgba(226, 232, 240, .68) !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
}

.public-site .footer-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.public-site .footer-links div {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 8px 0 !important;
}

.public-site .footer-links h3 {
    margin: 0 0 8px !important;
    color: #ffffff !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

.public-site .footer-links a {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    color: rgba(226, 232, 240, .68) !important;
    font-size: .88rem !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    transition: color .2s ease, transform .2s ease !important;
}

.public-site .footer-links a::before {
    content: none !important;
}

.public-site .footer-links a:hover {
    color: #1fd8ff !important;
    transform: translateX(4px);
}

.public-site .footer-links a:focus-visible,
.public-site .footer-contact-panel a:focus-visible,
.public-site .footer-company-logo:focus-visible {
    outline: 2px solid #facc15;
    outline-offset: 4px;
}

.public-site .footer-contact-panel {
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    padding: 8px 0 8px 24px !important;
    border-left: 1px solid rgba(34, 197, 94, .28) !important;
    border-color: rgba(34, 197, 94, .2) !important;
    background: linear-gradient(180deg, rgba(34, 197, 94, .08), transparent) !important;
}

.public-site .footer-contact-panel span {
    color: #86efac !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.public-site .footer-contact-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.public-site .footer-contact-label i {
    color: #4ade80 !important;
    font-size: .85rem !important;
}

.public-site .footer-contact-panel strong {
    color: #ffffff !important;
    font-size: 1.28rem !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere;
}

.public-site .footer-contact-number {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .2s ease !important;
}

.public-site .footer-contact-number:hover {
    color: #86efac !important;
}

.public-site .footer-contact-panel p {
    margin: 0 !important;
    color: rgba(226, 232, 240, .7) !important;
    font-size: .88rem !important;
    line-height: 1.5 !important;
}

.public-site .footer-contact-panel a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    color: #052e16 !important;
    font-size: .88rem !important;
    font-weight: 950 !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

.public-site .footer-contact-panel a:hover {
    background: #86efac !important;
    box-shadow: 0 10px 24px rgba(34, 197, 94, .18) !important;
    transform: translateY(-2px);
}

.public-site .footer-chatbot {
    position: relative !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(31, 216, 255, .34) !important;
    border-radius: 20px !important;
    background: linear-gradient(155deg, rgba(31, 216, 255, .16), rgba(255, 255, 255, .045) 58%, rgba(255, 62, 181, .08)) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.public-site .footer-chatbot-heading {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
}

.public-site .footer-chatbot-avatar {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #1fd8ff !important;
    color: #07111f !important;
    font-size: 1.1rem !important;
}

.public-site .footer-chatbot-heading strong,
.public-site .footer-chatbot-heading span {
    display: block !important;
}

.public-site .footer-chatbot-heading > .footer-chatbot-avatar {
    display: grid !important;
    flex: 0 0 42px !important;
}

.public-site .footer-chatbot-heading strong {
    color: #ffffff !important;
    font-size: 1rem !important;
}

.public-site .footer-chatbot-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    margin-left: auto !important;
    padding: 0 8px !important;
    border: 1px solid rgba(134, 239, 172, .25) !important;
    border-radius: 999px !important;
    background: rgba(34, 197, 94, .12) !important;
    color: #86efac !important;
    font-size: .65rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.public-site .footer-chatbot-heading div > span {
    margin-top: 2px !important;
    color: rgba(226, 232, 240, .66) !important;
    font-size: .75rem !important;
}

.public-site .footer-chatbot-heading div > span i {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    margin-right: 4px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
}

.public-site .footer-chatbot-messages {
    display: grid !important;
    gap: 8px !important;
    min-height: 66px !important;
    max-height: 132px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    background: rgba(3, 8, 23, .3) !important;
}

.public-site .footer-chatbot-message {
    width: fit-content !important;
    max-width: 92% !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border-radius: 12px 12px 12px 3px !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: .8rem !important;
    line-height: 1.4 !important;
}

.public-site .footer-chatbot-message.is-bot {
    background: rgba(255, 255, 255, .1) !important;
}

.public-site .footer-chatbot-prompt {
    display: block !important;
    color: rgba(226, 232, 240, .52) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
}

.public-site .footer-chatbot-message.is-user {
    justify-self: end !important;
    border-radius: 12px 12px 3px 12px !important;
    background: rgba(31, 216, 255, .18) !important;
    color: #dff9ff !important;
}

.public-site .footer-chatbot-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.public-site .footer-chatbot-options button {
    flex: 1 1 calc(50% - 7px) !important;
    min-height: 38px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(31, 216, 255, .3) !important;
    border-radius: 10px !important;
    background: rgba(7, 17, 31, .35) !important;
    color: #b9f3ff !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
}

.public-site .footer-chatbot-options button:hover,
.public-site .footer-chatbot-options button:focus-visible {
    border-color: #1fd8ff !important;
    background: rgba(31, 216, 255, .16) !important;
    transform: translateY(-1px);
}

.public-site .footer-chatbot-options button:disabled {
    cursor: default !important;
    opacity: .42 !important;
}

.public-site .footer-chatbot .footer-whatsapp-button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 10px !important;
    justify-self: center !important;
    width: min(100%, 270px) !important;
    min-height: 46px !important;
    margin: 2px auto 0 !important;
    padding: 7px 12px 7px 8px !important;
    border: 1px solid rgba(187, 247, 208, .35) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #25d366, #16a34a) !important;
    color: #052e16 !important;
    font-size: .84rem !important;
    letter-spacing: .01em !important;
    box-shadow: 0 10px 22px rgba(34, 197, 94, .2) !important;
}

.public-site .footer-whatsapp-icon {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .82) !important;
    color: #16a34a !important;
    font-size: 1.35rem !important;
}

.public-site .footer-whatsapp-copy {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
    text-align: center !important;
}

.public-site .footer-whatsapp-copy strong,
.public-site .footer-whatsapp-copy small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.public-site .footer-whatsapp-copy strong {
    color: #052e16 !important;
    font-size: .8rem !important;
    font-weight: 950 !important;
}

.public-site .footer-whatsapp-copy small {
    color: rgba(5, 46, 22, .7) !important;
    font-size: .63rem !important;
    font-weight: 800 !important;
}

.public-site .footer-whatsapp-arrow {
    justify-self: end !important;
    color: rgba(5, 46, 22, .72) !important;
    font-size: .78rem !important;
}

.public-site .footer-chatbot .footer-whatsapp-button:hover,
.public-site .footer-chatbot .footer-whatsapp-button:focus-visible {
    background: linear-gradient(135deg, #86efac, #22c55e) !important;
    box-shadow: 0 14px 28px rgba(34, 197, 94, .3) !important;
    transform: translateY(-2px) !important;
}

.public-site .footer-payment-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: center !important;
    justify-items: center !important;
    margin: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 36px !important;
    border: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 0 !important;
    background: #0b1627 !important;
}

.public-site .footer-payment-row strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.public-site .footer-payment-row > div:first-child span {
    margin-top: 4px !important;
    color: rgba(226, 232, 240, .58) !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
}

.public-site .footer-payment-methods {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(100%, 680px) !important;
    gap: 10px !important;
    justify-content: initial !important;
}

.public-site .footer-payment-methods span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 8px !important;
    border: 1px solid rgba(226, 232, 240, .13) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: #ffffff !important;
    font-size: .84rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.public-site .footer-payment-methods img {
    display: block !important;
    width: 72px !important;
    height: 40px !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
}

.public-site .footer-payment-methods span:nth-child(1) { border-color: rgba(116, 35, 132, .5) !important; }
.public-site .footer-payment-methods span:nth-child(2) { border-color: rgba(0, 196, 140, .44) !important; }
.public-site .footer-payment-methods span:nth-child(3) { border-color: rgba(243, 186, 47, .5) !important; }
.public-site .footer-payment-methods span:nth-child(4) { border-color: rgba(59, 130, 246, .46) !important; }
.public-site .footer-payment-methods span:nth-child(5) { border-color: rgba(34, 197, 94, .46) !important; }

.public-site .footer-legal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 16px max(24px, calc((100% - 1180px) / 2)) !important;
    border-top: 1px solid rgba(148, 163, 184, .12) !important;
    background: #050814 !important;
}

.public-site .footer-legal span {
    display: block !important;
    color: rgba(226, 232, 240, .54) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    text-align: center !important;
}

@media (max-width: 1080px) {
    .public-site .footer-content {
        grid-template-columns: 1fr !important;
    }

    .public-site .footer-links {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .public-site .clean-commerce-footer {
        width: calc(100% - 20px) !important;
        margin-top: 36px !important;
    }

    .public-site .footer-assurance,
    .public-site .footer-payment-row {
        grid-template-columns: 1fr !important;
    }

    .public-site .footer-assurance {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .public-site .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .public-site .footer-payment-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .public-site .footer-content,
    .public-site .footer-payment-row,
    .public-site .footer-legal {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .public-site .footer-assurance {
        width: 100% !important;
    }

    .public-site .footer-company {
        grid-template-columns: 1fr !important;
        padding-right: 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
        padding-bottom: 24px !important;
    }

    .public-site .footer-contact-panel {
        padding-left: 0 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(34, 197, 94, .28) !important;
        padding-top: 24px !important;
    }

    .public-site .footer-legal {
        flex-direction: column !important;
    }
}

@media (max-width: 460px) {
    .public-site .footer-assurance,
    .public-site .footer-links,
    .public-site .footer-payment-methods {
        grid-template-columns: 1fr !important;
    }

    .public-site .footer-assurance span {
        min-height: 48px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
    }

    .public-site .footer-assurance span:last-child {
        border-bottom: 0 !important;
    }

    .public-site .footer-links {
        gap: 22px !important;
    }

    .public-site .footer-payment-methods span {
        justify-content: flex-start !important;
    }
}

/* Caja profesional para Herramientas disponibles */
.public-site .catalog-head {
    position: relative;
    overflow: hidden;
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(360px, .9fr) !important;
    gap: clamp(18px, 3vw, 34px) !important;
    align-items: center !important;
    margin-top: 42px !important;
    padding: clamp(24px, 4vw, 36px) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 10% 22%, rgba(31, 216, 255, .16), transparent 22rem),
        radial-gradient(circle at 92% 82%, rgba(255, 62, 181, .12), transparent 20rem),
        linear-gradient(135deg, rgba(8, 18, 46, .98), rgba(3, 8, 23, .96)) !important;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.public-site .catalog-head::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 22px;
    pointer-events: none;
}

.public-site .catalog-head > div,
.public-site .catalog-head .clean-search {
    position: relative;
    z-index: 1;
}

.public-site .catalog-head .clean-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 999px;
    background: rgba(125, 211, 252, .08);
    color: #7dd3fc !important;
    font-size: .72rem !important;
    letter-spacing: .14em !important;
}

.public-site .catalog-head h2 {
    max-width: 700px;
    margin: 12px 0 10px !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 3.6rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.065em !important;
}

.public-site .catalog-head p {
    max-width: 560px;
    color: rgba(226, 232, 240, .72) !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
}

.public-site .clean-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 165px 110px !important;
    gap: 10px !important;
    padding: 14px !important;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(14px);
}

.public-site .clean-search input,
.public-site .clean-search select {
    min-height: 46px !important;
    border: 1px solid rgba(226, 232, 240, .16) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #101828 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.public-site .clean-search input::placeholder {
    color: #667085;
}

.public-site .clean-search .btn,
.public-site .clean-search button {
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 55%, #ff3eb5) !important;
    color: #ffffff !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 28px rgba(31, 216, 255, .16) !important;
}

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

    .public-site .clean-search {
        grid-template-columns: 1fr 160px 110px !important;
    }
}

@media (max-width: 640px) {
    .public-site .catalog-head {
        padding: 22px !important;
        border-radius: 24px !important;
    }

    .public-site .catalog-head::before {
        inset: 10px;
        border-radius: 18px;
    }

    .public-site .clean-search {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }
}

/* Productos en carrusel desplegable */
.public-site .product-showcase {
    margin-top: 20px;
    padding: clamp(18px, 3vw, 24px);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
    box-shadow: 0 22px 52px rgba(0, 0, 0, .18);
}

.public-site .product-showcase-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.public-site .product-showcase-toolbar h2 {
    margin: 5px 0 0;
    color: #101828;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.055em;
}

.public-site .product-showcase-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.public-site .product-showcase-actions button {
    display: inline-grid;
    min-width: 42px;
    min-height: 42px;
    place-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #ffffff;
    color: #101828;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 950;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.public-site .product-showcase-actions .toggle-products {
    padding: 0 16px;
    background: #101828;
    color: #ffffff;
    font-size: .9rem;
}

.public-site .product-carousel-track {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: clamp(280px, 31vw, 350px);
    grid-template-columns: none !important;
    gap: 18px;
    margin-top: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 16px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.public-site .product-carousel-track::-webkit-scrollbar {
    height: 9px;
}

.public-site .product-carousel-track::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eef2f7;
}

.public-site .product-carousel-track::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #1fd8ff, #7c3aed, #ff3eb5);
}

.public-site .product-carousel-track .premium-product-card {
    min-width: 0;
    scroll-snap-align: start;
}

.public-site .product-showcase.is-expanded .product-carousel-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-columns: initial;
    overflow: visible;
    padding-bottom: 4px;
    scroll-snap-type: none;
}

.public-site .product-showcase.is-expanded [data-scroll-prev],
.public-site .product-showcase.is-expanded [data-scroll-next] {
    display: none;
}

@media (max-width: 1180px) {
    .public-site .product-showcase.is-expanded .product-carousel-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 860px) {
    .public-site .product-showcase-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .public-site .product-showcase-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .public-site .product-showcase.is-expanded .product-carousel-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .public-site .product-carousel-track {
        grid-auto-columns: minmax(270px, 88vw);
    }

    .public-site .product-showcase.is-expanded .product-carousel-track {
        grid-template-columns: 1fr !important;
    }
}

/* Catalogo unificado */
.public-site .catalog-section {
    position: relative;
    overflow: hidden;
    margin-top: 42px !important;
    padding: clamp(22px, 4vw, 34px) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 10% 18%, rgba(31, 216, 255, .14), transparent 22rem),
        radial-gradient(circle at 92% 86%, rgba(255, 62, 181, .11), transparent 20rem),
        linear-gradient(135deg, rgba(8, 18, 46, .98), rgba(3, 8, 23, .96)) !important;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.public-site .catalog-section::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    pointer-events: none;
}

.public-site .catalog-section > * {
    position: relative;
    z-index: 1;
}

.public-site .catalog-section .product-showcase-toolbar {
    margin-bottom: 16px !important;
}

.public-site .catalog-section .clean-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 999px;
    background: rgba(125, 211, 252, .08);
    color: #7dd3fc !important;
    font-size: .72rem !important;
    letter-spacing: .14em !important;
}

.public-site .catalog-section .product-showcase-toolbar h2 {
    margin: 12px 0 10px !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 4vw, 3.6rem) !important;
    line-height: 1 !important;
    letter-spacing: -.065em !important;
}

.public-site .catalog-section .product-showcase-toolbar p {
    max-width: 560px;
    margin: 0;
    color: rgba(226,232,240,.72);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.55;
}

.public-site .catalog-section .product-showcase-actions button {
    border-color: rgba(226, 232, 240, .16) !important;
    background: rgba(255,255,255,.1) !important;
    color: #ffffff !important;
}

.public-site .catalog-section .product-showcase-actions .toggle-products {
    background: #ffffff !important;
    color: #07111f !important;
}

.public-site .catalog-search {
    margin-bottom: 18px;
}

.public-site .catalog-section .product-carousel-track {
    background: transparent;
}

.public-site .catalog-section .premium-product-card {
    box-shadow: 0 20px 42px rgba(0,0,0,.16);
}

@media (max-width: 860px) {
    .public-site .catalog-section .product-showcase-toolbar {
        align-items: stretch;
    }

    .public-site .catalog-section .product-showcase-actions {
        justify-content: flex-start;
    }
}

/* Catalogo: formato premium final */
.public-site .catalog-section {
    padding: clamp(24px, 4vw, 38px) !important;
}

.public-site .catalog-section .product-showcase-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 20px !important;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(226, 232, 240, .11);
}

.public-site .catalog-section .product-showcase-toolbar h2 {
    max-width: 760px;
}

.public-site .catalog-section .product-showcase-actions {
    display: grid !important;
    grid-template-columns: auto 44px 44px auto;
    gap: 9px !important;
    align-items: center;
    justify-content: end;
}

.public-site .catalog-count {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 999px;
    background: rgba(125, 211, 252, .08);
    color: rgba(226, 232, 240, .86);
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.public-site .catalog-section .product-showcase-actions button {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.public-site .catalog-section .product-showcase-actions [data-scroll-prev],
.public-site .catalog-section .product-showcase-actions [data-scroll-next] {
    font-size: 1.45rem !important;
}

.public-site .catalog-section .product-showcase-actions .toggle-products {
    min-width: 112px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
}

.public-site .catalog-search {
    grid-template-columns: minmax(0, 1fr) 190px 122px !important;
    gap: 12px !important;
    margin: 18px 0 20px !important;
    padding: 12px !important;
    border: 1px solid rgba(226, 232, 240, .12) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.075) !important;
}

.public-site .catalog-search input,
.public-site .catalog-search select,
.public-site .catalog-search button {
    min-height: 48px !important;
}

.public-site .catalog-section .product-carousel-track {
    padding: 6px 6px 18px !important;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .08);
}

.public-site .catalog-section .product-carousel-track .premium-product-card {
    border-color: rgba(15, 23, 42, .08) !important;
}

.public-site .catalog-section.is-expanded,
.public-site .product-showcase.is-expanded.catalog-section {
    background:
        radial-gradient(circle at 10% 18%, rgba(31, 216, 255, .12), transparent 22rem),
        radial-gradient(circle at 92% 86%, rgba(255, 62, 181, .1), transparent 20rem),
        linear-gradient(135deg, rgba(8, 18, 46, .98), rgba(3, 8, 23, .96)) !important;
}

@media (max-width: 980px) {
    .public-site .catalog-section .product-showcase-toolbar {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .public-site .catalog-section .product-showcase-actions {
        justify-content: start;
    }

    .public-site .catalog-search {
        grid-template-columns: 1fr 180px 120px !important;
    }
}

@media (max-width: 680px) {
    .public-site .catalog-section {
        padding: 20px !important;
    }

    .public-site .catalog-section .product-showcase-actions {
        grid-template-columns: 1fr 44px 44px;
        width: 100%;
    }

    .public-site .catalog-count,
    .public-site .catalog-section .product-showcase-actions .toggle-products {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    .public-site .catalog-search {
        grid-template-columns: 1fr !important;
    }
}

/* Buscador y carrusel del catalogo refinados */
.public-site .catalog-search {
    position: relative;
    align-items: center;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 220px) 118px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 38px rgba(0,0,0,.16);
}

.public-site .catalog-search::before {
    content: "Buscar";
    position: absolute;
    top: -11px;
    left: 18px;
    z-index: 2;
    padding: 3px 9px;
    border: 1px solid rgba(125, 211, 252, .18);
    border-radius: 999px;
    background: #08122a;
    color: #7dd3fc;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.public-site .catalog-search input,
.public-site .catalog-search select {
    height: 50px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(226, 232, 240, .16) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.96) !important;
    color: #111827 !important;
    font-size: .94rem !important;
    font-weight: 800 !important;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.public-site .catalog-search input {
    padding-left: 42px !important;
    background:
        linear-gradient(90deg, transparent 0 38px, rgba(15,23,42,.06) 38px 39px, transparent 39px),
        rgba(255,255,255,.96) !important;
}

.public-site .catalog-search input:focus,
.public-site .catalog-search select:focus {
    border-color: rgba(31,216,255,.5) !important;
    box-shadow: 0 0 0 4px rgba(31,216,255,.12) !important;
}

.public-site .catalog-search button {
    height: 50px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #1fd8ff, #7c3aed 58%, #ff3eb5) !important;
    font-size: .92rem !important;
}

.public-site .catalog-section.is-loading {
    pointer-events: none;
}

.public-site .catalog-section.is-loading::after {
    content: "Actualizando catalogo...";
    position: absolute;
    inset: auto 24px 24px auto;
    z-index: 5;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 999px;
    background: rgba(8, 18, 46, .92);
    color: #e0faff;
    font-size: .84rem;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(0,0,0,.22);
}

.public-site .catalog-section .product-carousel-track {
    position: relative;
    gap: 20px !important;
    grid-auto-columns: clamp(300px, 30vw, 365px) !important;
    padding: 12px 12px 20px !important;
    scroll-padding-left: 12px;
}

.public-site .catalog-section .product-carousel-track::before,
.public-site .catalog-section .product-carousel-track::after {
    content: "";
    position: sticky;
    z-index: 2;
    width: 34px;
    pointer-events: none;
}

.public-site .catalog-section .product-carousel-track::before {
    left: 0;
    background: linear-gradient(90deg, rgba(8,18,46,.55), transparent);
}

.public-site .catalog-section .product-carousel-track::after {
    right: 0;
    background: linear-gradient(270deg, rgba(8,18,46,.55), transparent);
}

.public-site .catalog-section .premium-product-card {
    transform: translateZ(0);
}

.public-site .catalog-section .premium-product-card:hover {
    transform: translateY(-4px) !important;
}

.public-site .product-showcase.is-expanded .product-carousel-track::before,
.public-site .product-showcase.is-expanded .product-carousel-track::after {
    content: none;
}

@media (max-width: 980px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr 190px 118px !important;
    }
}

@media (max-width: 700px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    .public-site .catalog-search::before {
        position: static;
        width: max-content;
        margin-bottom: -2px;
    }

    .public-site .catalog-section .product-carousel-track {
        grid-auto-columns: minmax(280px, 88vw) !important;
    }
}

/* Carrusel de productos: acabado superior */
.public-site .catalog-carousel-shell {
    padding: 18px !important;
    border: 1px solid rgba(226, 232, 240, .1);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.public-site .catalog-carousel-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, .35fr);
    gap: 18px;
    align-items: end;
    margin-bottom: 14px;
}

.public-site .catalog-carousel-top span,
.public-site .catalog-carousel-top strong {
    display: block;
}

.public-site .catalog-carousel-top span {
    color: #7dd3fc;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.public-site .catalog-carousel-top strong {
    margin-top: 4px;
    color: rgba(255,255,255,.94);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.public-site .catalog-progress-line {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
}

.public-site .catalog-progress-line::before {
    content: "";
    display: block;
    width: 46%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1fd8ff, #7c3aed, #ff3eb5);
}

.public-site .catalog-carousel-shell > .product-showcase-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px !important;
    margin-bottom: 14px;
}

.public-site .catalog-carousel-shell > .product-showcase-actions button {
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(226,232,240,.16) !important;
    background: rgba(255,255,255,.09) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.public-site .catalog-carousel-shell > .product-showcase-actions .toggle-products {
    min-width: 116px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #07111f !important;
}

.public-site .catalog-carousel-shell > .product-showcase-actions .catalog-count {
    margin-right: auto;
    background: rgba(255,255,255,.08);
}

.public-site .catalog-section .product-carousel-track {
    grid-auto-columns: clamp(310px, 27vw, 345px) !important;
    gap: 18px !important;
    padding: 4px 4px 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-type: x mandatory;
}

.public-site .catalog-section .product-carousel-track .premium-product-card {
    scroll-snap-align: start;
    border-radius: 22px !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame {
    min-height: 220px !important;
    aspect-ratio: 16 / 11 !important;
}

.public-site .catalog-section .premium-product-body {
    min-height: 400px !important;
    padding: 16px !important;
}

.public-site .catalog-section .premium-product-title {
    min-height: 48px !important;
    font-size: 1.18rem !important;
}

.public-site .catalog-section .premium-product-desc {
    min-height: 54px !important;
    font-size: .91rem !important;
}

.public-site .catalog-section .premium-purchase-panel {
    grid-template-columns: 1fr !important;
}

.public-site .catalog-section .premium-stock {
    min-height: 58px;
}

.public-site .catalog-section .premium-perks {
    grid-template-columns: 1fr 1fr !important;
}

.public-site .product-showcase.is-expanded .catalog-carousel-top {
    grid-template-columns: 1fr;
}

.public-site .product-showcase.is-expanded .catalog-progress-line {
    display: none;
}

@media (max-width: 760px) {
    .public-site .catalog-carousel-top {
        grid-template-columns: 1fr;
    }

    .public-site .catalog-carousel-shell > .product-showcase-actions {
        justify-content: flex-start;
    }

    .public-site .catalog-carousel-shell > .product-showcase-actions .catalog-count {
        width: 100%;
        justify-content: center;
    }
}

/* Filtro del catalogo: accesible y llamativo */
.public-site .catalog-search {
    grid-template-columns: minmax(280px, 1fr) minmax(210px, 250px) 132px !important;
    gap: 14px !important;
    align-items: end !important;
    padding: 16px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.07)) !important;
}

.public-site .catalog-field {
    gap: 8px !important;
}

.public-site .catalog-field label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(226, 232, 240, .82) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    letter-spacing: .11em !important;
}

.public-site .catalog-field label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1fd8ff;
    box-shadow: 0 0 0 5px rgba(31, 216, 255, .1);
}

.public-site .catalog-field input,
.public-site .catalog-field select {
    height: 54px !important;
    border-radius: 16px !important;
    font-size: .96rem !important;
}

.public-site .catalog-field-search::after {
    bottom: 18px !important;
}

.public-site .catalog-filter-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    height: 54px !important;
    min-height: 54px !important;
    align-self: end !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, #1fd8ff 0%, #7c3aed 55%, #ff3eb5 100%) !important;
    color: #ffffff !important;
    font-size: .96rem !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 34px rgba(31,216,255,.18) !important;
}

.public-site .catalog-filter-button::after {
    content: ">";
    font-size: 1.05rem;
    line-height: 1;
}

.public-site .catalog-filter-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(255,62,181,.22) !important;
}

@media (max-width: 860px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr 1fr !important;
    }

    .public-site .catalog-filter-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr !important;
    }
}

/* Catalogo avanzado: buscador y carrusel */
.public-site .catalog-search {
    grid-template-columns: minmax(260px, 1fr) minmax(190px, 230px) 118px !important;
    align-items: stretch !important;
    padding: 12px !important;
}

.public-site .catalog-search::before {
    content: none !important;
}

.public-site .catalog-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.public-site .catalog-field label {
    color: rgba(226, 232, 240, .72);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.public-site .catalog-field input,
.public-site .catalog-field select {
    width: 100%;
}

.public-site .catalog-field-search {
    position: relative;
}

.public-site .catalog-field-search::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 15px;
    width: 14px;
    height: 14px;
    border: 2px solid #667085;
    border-radius: 50%;
    box-shadow: 6px 6px 0 -4px #667085;
    transform: rotate(45deg);
    pointer-events: none;
}

.public-site .catalog-search input {
    padding-left: 44px !important;
}

.public-site .catalog-carousel-shell {
    position: relative;
    overflow: hidden;
    margin-top: 4px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(226, 232, 240, .09);
}

.public-site .catalog-carousel-hint {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 0 0 10px 6px;
    padding: 0 11px;
    border: 1px solid rgba(125, 211, 252, .16);
    border-radius: 999px;
    background: rgba(125, 211, 252, .08);
    color: rgba(226, 232, 240, .78);
    font-size: .78rem;
    font-weight: 850;
}

.public-site .catalog-carousel-shell::before,
.public-site .catalog-carousel-shell::after {
    content: "";
    position: absolute;
    top: 56px;
    bottom: 18px;
    z-index: 3;
    width: 42px;
    pointer-events: none;
}

.public-site .catalog-carousel-shell::before {
    left: 0;
    background: linear-gradient(90deg, rgba(8,18,46,.88), transparent);
}

.public-site .catalog-carousel-shell::after {
    right: 0;
    background: linear-gradient(270deg, rgba(8,18,46,.88), transparent);
}

.public-site .product-showcase.is-expanded .catalog-carousel-hint,
.public-site .product-showcase.is-expanded .catalog-carousel-shell::before,
.public-site .product-showcase.is-expanded .catalog-carousel-shell::after {
    display: none;
}

.public-site .catalog-section .product-carousel-track {
    min-height: 0;
    grid-auto-columns: clamp(310px, 29vw, 360px) !important;
    gap: 22px !important;
    padding: 10px 14px 20px !important;
    border-radius: 24px !important;
}

.public-site .catalog-section .product-showcase-actions button:hover {
    transform: translateY(-2px);
}

@media (max-width: 980px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr 210px !important;
    }

    .public-site .catalog-search button {
        align-items: center;
        padding-bottom: 0;
    }
}

@media (max-width: 700px) {
    .public-site .catalog-search {
        grid-template-columns: 1fr !important;
    }

    .public-site .catalog-carousel-shell::before,
    .public-site .catalog-carousel-shell::after {
        width: 22px;
    }
}

/* Ajuste de titulo del catalogo */
.public-site .catalog-section .product-showcase-toolbar h2 {
    font-size: clamp(1.55rem, 2.7vw, 2.45rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
}

/* Carrusel de catalogo: barra limpia y profesional */
.public-site .catalog-section .catalog-carousel-shell {
    margin-top: 18px !important;
    padding: 18px !important;
    border: 1px solid rgba(226, 232, 240, .12) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
        rgba(6, 18, 38, .68) !important;
    box-shadow: 0 22px 56px rgba(2, 8, 23, .28) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions {
    position: relative;
    z-index: 5;
    display: grid !important;
    grid-template-columns: minmax(120px, 1fr) 48px 48px auto;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 0 14px !important;
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, .12) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .075) !important;
    backdrop-filter: blur(16px);
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count {
    width: fit-content;
    min-height: 38px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 999px !important;
    background: rgba(125, 211, 252, .1) !important;
    color: rgba(240, 249, 255, .92) !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions button {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 28px rgba(2, 8, 23, .2) !important;
    font-weight: 900 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions [data-scroll-prev],
.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions [data-scroll-next] {
    font-size: 1.55rem !important;
    line-height: 1 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products {
    width: auto !important;
    min-width: 128px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #07111f !important;
    font-size: .86rem !important;
    letter-spacing: 0 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions button:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 211, 252, .36) !important;
    background: rgba(125, 211, 252, .16) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products:hover {
    background: #e0f2fe !important;
}

.public-site .catalog-section .product-carousel-track {
    padding-top: 2px !important;
}

@media (max-width: 720px) {
    .public-site .catalog-section .catalog-carousel-shell {
        padding: 12px !important;
        border-radius: 22px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions {
        grid-template-columns: 1fr 46px 46px;
        border-radius: 18px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count,
    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100% !important;
        justify-content: center;
    }
}

/* Carrusel de catalogo: version refinada */
.public-site .catalog-section .catalog-carousel-shell {
    isolation: isolate;
    overflow: hidden !important;
    margin-top: 22px !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(34, 211, 238, .16), transparent 24rem),
        linear-gradient(145deg, rgba(8, 21, 45, .94), rgba(16, 24, 45, .88) 52%, rgba(28, 18, 48, .92)) !important;
    box-shadow:
        0 28px 78px rgba(2, 8, 23, .42),
        inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

.public-site .catalog-section .catalog-carousel-shell::before,
.public-site .catalog-section .catalog-carousel-shell::after {
    top: 98px !important;
    bottom: 38px !important;
    z-index: 4 !important;
    width: 58px !important;
}

.public-site .catalog-section .catalog-carousel-shell::before {
    background: linear-gradient(90deg, rgba(8, 21, 45, .98), rgba(8, 21, 45, .48), transparent) !important;
}

.public-site .catalog-section .catalog-carousel-shell::after {
    background: linear-gradient(270deg, rgba(24, 18, 48, .98), rgba(24, 18, 48, .48), transparent) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions {
    display: grid !important;
    grid-template-columns: minmax(130px, 1fr) 46px 46px auto;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(125, 211, 252, .24) !important;
    border-radius: 999px !important;
    background: rgba(14, 165, 233, .12) !important;
    color: #f8fafc !important;
    font-family: inherit !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 0 5px rgba(34, 211, 238, .14);
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions button {
    position: relative;
    display: inline-grid !important;
    place-items: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(2, 8, 23, .24), inset 0 1px 0 rgba(255,255,255,.15) !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions [data-scroll-prev],
.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions [data-scroll-next] {
    font-size: 1.55rem !important;
    font-weight: 750 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products {
    width: auto !important;
    min-width: 126px !important;
    padding: 0 18px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #ffffff, #dff7ff) !important;
    color: #07111f !important;
    font-size: .86rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions button:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(34, 211, 238, .46) !important;
    background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(255,255,255,.08)) !important;
}

.public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products:hover {
    background: linear-gradient(135deg, #f8fafc, #bae6fd) !important;
}

.public-site .catalog-carousel-meter {
    position: relative;
    z-index: 5;
    height: 6px;
    margin: 0 8px 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.public-site .catalog-carousel-meter span {
    display: block;
    width: 20%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6);
    box-shadow: 0 0 24px rgba(34, 211, 238, .36);
    transition: width .2s ease, transform .2s ease;
}

.public-site .catalog-section .product-carousel-track {
    grid-auto-columns: clamp(300px, 28vw, 352px) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 8px 8px 18px !important;
    overflow-x: auto !important;
    scroll-padding-left: 8px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .catalog-section .product-carousel-track::-webkit-scrollbar {
    display: none;
}

.public-site .catalog-section .product-carousel-track::before,
.public-site .catalog-section .product-carousel-track::after {
    content: none !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card {
    overflow: hidden !important;
    scroll-snap-align: start !important;
    border: 1px solid rgba(226, 232, 240, .18) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 48px rgba(2, 8, 23, .22) !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 30px 62px rgba(2, 8, 23, .3) !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame {
    min-height: 238px !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 0 !important;
    background: #eef2f7 !important;
}

.public-site .catalog-section .premium-product-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.public-site .catalog-section .product-availability {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(187, 247, 208, .4) !important;
    border-radius: 999px !important;
    background: rgba(5, 46, 22, .84) !important;
    color: #bbf7d0 !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
}

.public-site .catalog-section .product-availability i {
    color: #4ade80 !important;
}

.public-site .catalog-section .product-quantity-label {
    color: #0f172a !important;
    font-weight: 900 !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.public-site .catalog-section .premium-product-card .premium-purchase-panel {
    gap: 10px !important;
    margin: 18px 0 0 !important;
}

.public-site .catalog-section .premium-price,
.public-site .catalog-section .premium-stock {
    position: relative !important;
    min-height: 86px !important;
    padding: 14px !important;
    border: 1px solid rgba(14, 165, 233, .18) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #f8fbff, #eef6ff) !important;
}

.public-site .catalog-section .premium-price > span,
.public-site .catalog-section .premium-stock small {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #64748b !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.public-site .catalog-section .premium-price > span i {
    color: #0284c7 !important;
}

.public-site .catalog-section .premium-price > div {
    display: flex !important;
    align-items: baseline !important;
    gap: 7px !important;
    margin-top: 5px !important;
}

.public-site .catalog-section .premium-price strong {
    color: #075985 !important;
    font-size: 1.28rem !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}

.public-site .catalog-section .premium-price > span,
.public-site .catalog-section .premium-stock small {
    line-height: 1.25 !important;
}

.public-site .catalog-section .premium-price del {
    color: #94a3b8 !important;
    font-size: .72rem !important;
}

.public-site .catalog-section .premium-price > small {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
}

.public-site .catalog-section .premium-stock {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-color: rgba(34, 197, 94, .2) !important;
    background: linear-gradient(145deg, #f5fff8, #ecfdf3) !important;
}

.public-site .catalog-section .premium-stock-dot {
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .12) !important;
    animation: productStockPulse 2s ease-in-out infinite !important;
}

.public-site .catalog-section .premium-stock strong {
    display: block !important;
    margin-top: 4px !important;
    color: #15803d !important;
    font-size: .88rem !important;
    font-weight: 950 !important;
}

.public-site .catalog-section .product-quantity-field output {
    display: block !important;
    margin-top: 2px !important;
    color: #075985 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    text-align: right !important;
}

@keyframes productStockPulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(34, 197, 94, .12); }
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, .04); }
}

.public-site .catalog-section .premium-product-body {
    min-height: 390px !important;
    padding: 18px !important;
}

.public-site .product-image-trigger {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    cursor: pointer !important;
    font: inherit !important;
}

.public-site .product-image-hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(255, 255, 255, .48) !important;
    border-radius: 999px !important;
    background: rgba(3, 8, 23, .74) !important;
    color: #ffffff !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity .2s ease, transform .2s ease, background .2s ease !important;
}

.public-site .product-image-hint i {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7dd3fc !important;
    opacity: 1 !important;
    transform: none !important;
}

.public-site .product-image-trigger:hover .product-image-hint,
.public-site .product-image-trigger:focus-visible .product-image-hint {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.public-site .product-image-trigger:hover .product-image-hint {
    background: #0284c7 !important;
}

.public-site .product-image-trigger:hover .product-image-hint,
.public-site .product-image-trigger:focus-visible .product-image-hint {
    opacity: 1 !important;
    transform: translateY(0) !important;
    background: rgba(2, 132, 199, .9) !important;
}

.public-site .product-details-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    display: grid !important;
    place-items: center !important;
    padding: 20px !important;
    background: rgba(2, 8, 23, .78) !important;
    backdrop-filter: blur(8px) !important;
}

.public-site .product-details-modal[hidden] {
    display: none !important;
}

.public-site .product-details-dialog {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(220px, .85fr) minmax(0, 1fr) !important;
    width: min(760px, 100%) !important;
    max-height: min(620px, calc(100vh - 40px)) !important;
    overflow: auto !important;
    border: 1px solid rgba(125, 211, 252, .28) !important;
    border-radius: 22px !important;
    background: #07111f !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .45) !important;
}

.public-site .product-details-visual {
    min-height: 290px !important;
    background: #0b1627 !important;
}

.public-site .product-details-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 290px !important;
    object-fit: cover !important;
}

.public-site .product-details-visual span {
    display: grid !important;
    height: 100% !important;
    min-height: 290px !important;
    place-items: center !important;
    color: #1fd8ff !important;
    font-size: 4rem !important;
    font-weight: 950 !important;
}

.public-site .product-details-copy {
    display: grid !important;
    align-content: center !important;
    gap: 14px !important;
    padding: 32px !important;
}

.public-site .product-details-copy h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
    line-height: 1.05 !important;
}

.public-site .product-details-copy p {
    margin: 0 !important;
    color: rgba(226, 232, 240, .72) !important;
    line-height: 1.65 !important;
}

.public-site .product-details-facts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.public-site .product-details-facts span {
    display: grid !important;
    gap: 4px !important;
    padding: 10px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .05) !important;
}

.public-site .product-details-facts small {
    color: rgba(226, 232, 240, .5) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.public-site .product-details-facts strong {
    color: #ffffff !important;
    font-size: .82rem !important;
}

.public-site .product-details-note {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 4px !important;
    color: rgba(226, 232, 240, .54) !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.public-site .product-details-note i {
    color: #1fd8ff !important;
}

.public-site .product-details-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2 !important;
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 50% !important;
    background: rgba(3, 8, 23, .7) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 1.4rem !important;
}

.product-modal-open {
    overflow: hidden !important;
}

@media (max-width: 620px) {
    .public-site .product-details-dialog {
        grid-template-columns: 1fr !important;
    }

    .public-site .product-details-visual,
    .public-site .product-details-visual img,
    .public-site .product-details-visual span {
        min-height: 190px !important;
        height: 190px !important;
    }

    .public-site .product-details-copy {
        padding: 24px 20px !important;
    }

    .public-site .product-details-facts {
        grid-template-columns: 1fr !important;
    }
}

/* Tarjetas de producto: jerarquia comercial limpia */
.public-site .catalog-section .product-carousel-track .premium-product-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 650px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 30px rgba(2, 8, 23, .16) !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card:hover {
    transform: translateY(-4px) !important;
    border-color: #7dd3fc !important;
    box-shadow: 0 20px 38px rgba(2, 8, 23, .22) !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame {
    position: relative !important;
    flex: 0 0 210px !important;
    min-height: 210px !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 18px 18px 0 0 !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame img {
    transition: transform .35s ease !important;
}

.public-site .catalog-section .premium-product-card:hover .store-image-frame img {
    transform: scale(1.04) !important;
}

.public-site .catalog-section .product-image-hint {
    min-height: 34px !important;
    padding: 0 12px !important;
    background: rgba(15, 23, 42, .82) !important;
    font-size: .72rem !important;
}

.public-site .catalog-section .premium-product-body {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 20px !important;
}

.public-site .catalog-section .premium-product-meta {
    min-height: 24px !important;
}

.public-site .catalog-section .premium-product-title {
    min-height: 44px !important;
    margin: 10px 0 6px !important;
    color: #0f172a !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

.public-site .catalog-section .premium-product-desc {
    display: -webkit-box !important;
    min-height: 45px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
}

.public-site .catalog-section .premium-purchase-panel {
    display: grid !important;
    grid-template-columns: 1.15fr .85fr !important;
    gap: 8px !important;
    margin: auto 0 0 !important;
    padding: 14px 0 0 !important;
}

.public-site .catalog-section .premium-price,
.public-site .catalog-section .premium-stock {
    min-height: 78px !important;
    padding: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

.public-site .catalog-section .premium-price {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

.public-site .catalog-section .premium-price > span,
.public-site .catalog-section .premium-stock small {
    font-size: .62rem !important;
    letter-spacing: .06em !important;
}

.public-site .catalog-section .premium-price strong {
    font-size: 1.18rem !important;
}

.public-site .catalog-section .premium-stock strong {
    font-size: .78rem !important;
    line-height: 1.15 !important;
}

.public-site .catalog-section .product-quantity-field {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px 10px !important;
    align-items: center !important;
    margin: 14px 0 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

.public-site .catalog-section .product-quantity-label {
    font-size: .78rem !important;
}

.public-site .catalog-section .product-quantity-field small {
    grid-column: 1 / -1 !important;
    font-size: .65rem !important;
}

.public-site .catalog-section .product-quantity-field output {
    grid-column: 1 / -1 !important;
    padding-top: 7px !important;
    border-top: 1px solid #eef2f7 !important;
    font-size: .76rem !important;
    text-align: left !important;
}

.public-site .catalog-section .premium-product-actions {
    margin-top: 12px !important;
}

.public-site .catalog-section .add-cart-button {
    min-height: 46px !important;
    border-radius: 12px !important;
    background: #0f766e !important;
    color: #ffffff !important;
    font-size: .82rem !important;
    box-shadow: 0 8px 18px rgba(15, 118, 110, .2) !important;
}

.public-site .catalog-section .add-cart-button:hover,
.public-site .catalog-section .add-cart-button:focus-visible,
.public-site .catalog-section .add-cart-button.is-added {
    background: #115e59 !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 430px) {
    .public-site .catalog-section .product-carousel-track .premium-product-card {
        min-height: 0 !important;
    }

    .public-site .catalog-section .premium-purchase-panel {
        grid-template-columns: 1fr !important;
    }
}

/* Presentacion refinada de las tarjetas del catalogo */
.public-site .catalog-section .product-carousel-track .premium-product-card {
    position: relative !important;
    min-height: 660px !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 34px rgba(2, 8, 23, .16) !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto !important;
    height: 4px !important;
    z-index: 4 !important;
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(90deg, #0f766e, #22d3ee, #f59e0b) !important;
}

.public-site .catalog-section .product-carousel-track .premium-product-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(14, 165, 233, .35) !important;
    box-shadow: 0 24px 48px rgba(2, 8, 23, .23) !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame {
    flex-basis: 222px !important;
    min-height: 222px !important;
    border-radius: 18px 18px 0 0 !important;
    background: #e8f1f5 !important;
}

.public-site .catalog-section .premium-product-card .store-image-frame img {
    filter: saturate(1.04) contrast(1.02) !important;
}

.public-site .catalog-section .premium-product-body {
    padding: 22px !important;
}

.public-site .catalog-section .premium-product-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.public-site .catalog-section .premium-product-meta span {
    color: #0f766e !important;
    font-size: .7rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.public-site .catalog-section .premium-product-meta b {
    padding: 4px 8px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-size: .66rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.public-site .catalog-section .premium-product-title {
    min-height: 0 !important;
    margin: 12px 0 8px !important;
    font-size: 1.32rem !important;
    letter-spacing: -.025em !important;
}

.public-site .catalog-section .premium-product-desc {
    min-height: 47px !important;
    color: #64748b !important;
    font-size: .84rem !important;
}

.public-site .catalog-section .premium-purchase-panel {
    grid-template-columns: 1.08fr .92fr !important;
    gap: 9px !important;
    padding-top: 18px !important;
}

.public-site .catalog-section .premium-price,
.public-site .catalog-section .premium-stock {
    min-height: 92px !important;
    padding: 14px !important;
    border-radius: 13px !important;
}

.public-site .catalog-section .premium-price {
    border-color: #bfdbfe !important;
    background: linear-gradient(145deg, #eff6ff, #f8fbff) !important;
}

.public-site .catalog-section .premium-stock {
    border-color: #bbf7d0 !important;
    background: linear-gradient(145deg, #f0fdf4, #f8fff9) !important;
}

.public-site .catalog-section .premium-price > span,
.public-site .catalog-section .premium-stock small {
    font-size: .64rem !important;
    letter-spacing: .045em !important;
}

.public-site .catalog-section .premium-price strong {
    font-size: 1.34rem !important;
}

.public-site .catalog-section .premium-stock-dot {
    width: 10px !important;
    height: 10px !important;
    flex-basis: 10px !important;
}

.public-site .catalog-section .product-quantity-field {
    grid-template-columns: 1fr auto !important;
    gap: 7px 12px !important;
    margin-top: 16px !important;
    padding: 12px 13px !important;
    border-color: #dbe4ef !important;
    background: #f8fafc !important;
}

.public-site .catalog-section .product-quantity-label {
    color: #334155 !important;
    font-size: .8rem !important;
}

.public-site .catalog-section .product-quantity-control {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.public-site .catalog-section .product-quantity-field small {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    color: #64748b !important;
}

.public-site .catalog-section .product-quantity-field output {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #075985 !important;
    font-size: .74rem !important;
    text-align: right !important;
}

.public-site .catalog-section .add-cart-button {
    min-height: 50px !important;
    border: 1px solid #0f766e !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #0f766e, #0d9488) !important;
    box-shadow: 0 10px 20px rgba(15, 118, 110, .2) !important;
    font-size: .86rem !important;
}

.public-site .catalog-section .add-cart-button:hover,
.public-site .catalog-section .add-cart-button:focus-visible,
.public-site .catalog-section .add-cart-button.is-added {
    background: linear-gradient(135deg, #115e59, #0f766e) !important;
    box-shadow: 0 14px 26px rgba(15, 118, 110, .28) !important;
}

@media (max-width: 430px) {
    .public-site .catalog-section .product-carousel-track .premium-product-card {
        min-height: 0 !important;
    }

    .public-site .catalog-section .premium-purchase-panel {
        grid-template-columns: 1fr !important;
    }

    .public-site .catalog-section .product-quantity-control,
    .public-site .catalog-section .product-quantity-field small,
    .public-site .catalog-section .product-quantity-field output {
        grid-column: 1 !important;
    }

    .public-site .catalog-section .product-quantity-control {
        grid-row: 2 !important;
    }

    .public-site .catalog-section .product-quantity-field small {
        grid-row: 3 !important;
    }

    .public-site .catalog-section .product-quantity-field output {
        grid-row: 4 !important;
        text-align: left !important;
    }
}

.public-site .product-showcase.is-expanded .catalog-carousel-meter {
    display: none;
}

@media (max-width: 780px) {
    .public-site .catalog-section .catalog-carousel-shell {
        padding: 12px !important;
        border-radius: 24px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell::before,
    .public-site .catalog-section .catalog-carousel-shell::after {
        top: 144px !important;
        width: 26px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions {
        grid-template-columns: 1fr 46px 46px !important;
        border-radius: 18px !important;
    }

    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .catalog-count,
    .public-site .catalog-section .catalog-carousel-shell > .product-showcase-actions .toggle-products {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100% !important;
        justify-content: center !important;
    }

    .public-site .catalog-section .product-carousel-track {
        grid-auto-columns: minmax(282px, 88vw) !important;
        gap: 14px !important;
        padding-inline: 2px !important;
    }

    .public-site .catalog-section .premium-product-card .store-image-frame {
        min-height: 215px !important;
    }
}

/* Inicio: carrusel principal premium */
.public-site .home-promo-carousel {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    min-height: 0 !important;
    margin-top: 12px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 10% 16%, rgba(34, 211, 238, .18), transparent 25rem),
        radial-gradient(circle at 86% 18%, rgba(244, 114, 182, .14), transparent 24rem),
        linear-gradient(135deg, rgba(3, 9, 24, .97), rgba(9, 24, 51, .95) 52%, rgba(22, 18, 44, .96)) !important;
    box-shadow:
        0 34px 86px rgba(2, 8, 23, .42),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.public-site .home-promo-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.1), transparent 24%, transparent 76%, rgba(255,255,255,.06)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 62px);
    opacity: .75;
    pointer-events: none;
}

.public-site .home-promo-carousel::after {
    content: "";
    position: absolute;
    inset: auto 32px 16px 32px;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    pointer-events: none;
}

.public-site .home-promo-carousel .carousel-track {
    height: clamp(430px, 38vw, 540px) !important;
    min-height: 0 !important;
}

.public-site .home-promo-carousel .promo-slide {
    z-index: 1;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 455px) !important;
    gap: clamp(24px, 4vw, 56px) !important;
    align-items: center !important;
    padding: clamp(34px, 4.6vw, 66px) clamp(30px, 5vw, 72px) clamp(52px, 5vw, 70px) !important;
    background: transparent !important;
    transform: translateX(18px) scale(.985);
    transition: opacity .42s ease, transform .42s ease !important;
}

.public-site .home-promo-carousel .promo-slide.active {
    transform: translateX(0) scale(1);
}

.public-site .home-promo-carousel .promo-slide-copy {
    display: grid !important;
    max-width: 740px !important;
    gap: 14px !important;
    align-content: center;
}

.public-site .home-promo-carousel .clean-kicker {
    width: fit-content;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px !important;
    border: 1px solid rgba(125, 211, 252, .26);
    border-radius: 999px;
    background: rgba(14, 165, 233, .11);
    color: #bae6fd !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-promo-carousel .promo-slide h2 {
    max-width: 760px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.15rem, 4.15vw, 4rem) !important;
    font-weight: 900 !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
}

.public-site .home-promo-carousel .promo-slide p {
    max-width: 610px !important;
    margin: 0 !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.25vw, 1.12rem) !important;
    font-weight: 600 !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
}

.public-site .home-promo-features {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 4px 0 2px;
}

.public-site .home-promo-features span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(248, 250, 252, .88);
    font-size: .8rem;
    font-weight: 800;
}

.public-site .home-promo-features span::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}

.public-site .home-promo-carousel .promo-slide .btn {
    width: fit-content;
    min-height: 50px !important;
    margin-top: 4px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #22d3ee, #6366f1 52%, #f472b6) !important;
    color: #ffffff !important;
    font-size: .94rem !important;
    font-weight: 900 !important;
    box-shadow: 0 18px 38px rgba(34, 211, 238, .22) !important;
}

.public-site .home-promo-carousel .promo-slide-media {
    position: relative !important;
    align-self: center !important;
    justify-self: stretch;
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: 16 / 11;
    padding: clamp(16px, 2.2vw, 24px) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 30px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.045)),
        rgba(255, 255, 255, .08) !important;
    box-shadow:
        0 28px 62px rgba(2, 8, 23, .36),
        inset 0 1px 0 rgba(255, 255, 255, .15) !important;
    transform: perspective(900px) rotateY(-4deg);
}

.public-site .home-promo-carousel .promo-slide-media::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;
    pointer-events: none;
}

.public-site .home-promo-carousel .promo-slide-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(120deg, transparent 12%, rgba(255,255,255,.16) 46%, transparent 64%);
    transform: translateX(-68%);
    pointer-events: none;
}

.public-site .home-promo-carousel .promo-slide.active .promo-slide-media::after {
    animation: homeHeroShine 5.8s ease-in-out infinite;
}

.public-site .home-promo-carousel .promo-slide-media img {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 22px !important;
    object-fit: contain !important;
    object-position: center !important;
    image-rendering: auto !important;
    filter: drop-shadow(0 18px 24px rgba(2, 8, 23, .28));
}

.public-site .home-promo-carousel .promo-slide-media figcaption {
    position: relative;
    z-index: 1;
    min-height: 100% !important;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
}

.public-site .home-promo-carousel .carousel-controls {
    z-index: 5 !important;
    right: 28px !important;
    bottom: 28px !important;
    gap: 9px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 999px !important;
    background: rgba(3, 8, 23, .5) !important;
    box-shadow: 0 18px 38px rgba(2, 8, 23, .24) !important;
    backdrop-filter: blur(16px);
}

.public-site .home-promo-carousel .carousel-controls button {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
}

.public-site .home-promo-carousel .carousel-controls button:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, .45) !important;
    background: rgba(34, 211, 238, .16) !important;
}

.public-site .home-promo-carousel .carousel-dots {
    align-items: center;
    gap: 7px !important;
    padding: 0 2px;
}

.public-site .home-promo-carousel .carousel-dots button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .38) !important;
}

.public-site .home-promo-carousel .carousel-dots button.active {
    width: 28px !important;
    background: linear-gradient(90deg, #22d3ee, #f472b6) !important;
}

.public-site .home-carousel-progress {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 18px;
    z-index: 4;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
}

.public-site .home-carousel-progress span {
    display: block;
    width: var(--slide-progress, 33.333%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6);
    box-shadow: 0 0 24px rgba(34, 211, 238, .34);
    transition: width .42s ease;
}

@keyframes homeHeroShine {
    0%, 45% { transform: translateX(-68%); }
    75%, 100% { transform: translateX(68%); }
}

@media (max-width: 900px) {
    .public-site .home-promo-carousel .carousel-track {
        height: 720px !important;
    }

    .public-site .home-promo-carousel .promo-slide {
        grid-template-columns: 1fr !important;
        align-content: center !important;
        gap: 24px !important;
        padding: 30px 24px 92px !important;
    }

    .public-site .home-promo-carousel .promo-slide-copy {
        max-width: 100% !important;
    }

    .public-site .home-promo-carousel .promo-slide-media {
        width: min(100%, 560px);
        justify-self: center;
        transform: none;
    }
}

@media (max-width: 620px) {
    .public-site .home-promo-carousel {
        margin-top: 8px !important;
        border-radius: 24px !important;
    }

    .public-site .home-promo-carousel .carousel-track {
        height: 760px !important;
    }

    .public-site .home-promo-carousel .promo-slide {
        padding: 24px 18px 94px !important;
    }

    .public-site .home-promo-carousel .promo-slide h2 {
        font-size: clamp(1.95rem, 9vw, 2.75rem) !important;
        line-height: 1.06 !important;
    }

    .public-site .home-promo-features {
        gap: 7px;
    }

    .public-site .home-promo-features span {
        min-height: 30px;
        font-size: .76rem;
    }

    .public-site .home-promo-carousel .promo-slide .btn {
        width: 100%;
        justify-content: center;
    }

    .public-site .home-promo-carousel .carousel-controls {
        right: 50% !important;
        bottom: 28px !important;
        transform: translateX(50%);
    }

    .public-site .home-carousel-progress {
        left: 22px;
        right: 22px;
        bottom: 16px;
    }
}

/* Correccion visual: carrusel de inicio limpio y presentable */
.public-site .home-promo-carousel {
    margin-top: 14px !important;
    border: 1px solid rgba(20, 184, 166, .22) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(115deg, rgba(5, 18, 34, .97) 0%, rgba(7, 38, 55, .96) 52%, rgba(9, 31, 46, .97) 100%) !important;
    box-shadow:
        0 24px 58px rgba(2, 8, 23, .24),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.public-site .home-promo-carousel::before {
    background:
        linear-gradient(90deg, rgba(20, 184, 166, .08), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.055), transparent 48%) !important;
    opacity: 1 !important;
}

.public-site .home-promo-carousel::after {
    content: none !important;
}

.public-site .home-promo-carousel .carousel-track {
    height: clamp(390px, 34vw, 475px) !important;
}

.public-site .home-promo-carousel .promo-slide {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 410px) !important;
    gap: clamp(22px, 3.6vw, 46px) !important;
    padding: clamp(28px, 4vw, 54px) clamp(26px, 4.4vw, 60px) 66px !important;
    transform: translateX(14px) !important;
}

.public-site .home-promo-carousel .promo-slide.active {
    transform: translateX(0) !important;
}

.public-site .home-promo-carousel .promo-slide-copy {
    gap: 13px !important;
}

.public-site .home-promo-carousel .clean-kicker {
    min-height: 31px !important;
    padding: 0 12px !important;
    border-color: rgba(94, 234, 212, .28) !important;
    background: rgba(20, 184, 166, .12) !important;
    color: #99f6e4 !important;
    font-size: .73rem !important;
}

.public-site .home-promo-carousel .promo-slide h2 {
    max-width: 690px !important;
    font-size: clamp(2rem, 3.55vw, 3.35rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-promo-carousel .promo-slide p {
    max-width: 570px !important;
    color: rgba(226, 232, 240, .82) !important;
    font-size: clamp(.96rem, 1.15vw, 1.06rem) !important;
    line-height: 1.65 !important;
    font-weight: 550 !important;
}

.public-site .home-promo-features {
    gap: 8px !important;
    margin: 2px 0 2px !important;
}

.public-site .home-promo-features span {
    min-height: 29px !important;
    padding: 0 10px !important;
    border-color: rgba(226, 232, 240, .11) !important;
    background: rgba(255, 255, 255, .065) !important;
    color: rgba(241, 245, 249, .82) !important;
    font-size: .76rem !important;
    font-weight: 760 !important;
}

.public-site .home-promo-features span::before {
    width: 6px !important;
    height: 6px !important;
    margin-right: 7px !important;
    background: #5eead4 !important;
    box-shadow: none !important;
}

.public-site .home-promo-carousel .promo-slide .btn {
    min-height: 46px !important;
    padding: 0 20px !important;
    border-color: rgba(94, 234, 212, .26) !important;
    background: #14b8a6 !important;
    color: #052e2b !important;
    font-size: .92rem !important;
    box-shadow: 0 14px 28px rgba(20, 184, 166, .2) !important;
}

.public-site .home-promo-carousel .promo-slide .btn:hover {
    background: #5eead4 !important;
    transform: translateY(-1px);
}

.public-site .home-promo-carousel .promo-slide-media {
    aspect-ratio: 4 / 3 !important;
    padding: 16px !important;
    border: 1px solid rgba(226, 232, 240, .16) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow:
        0 22px 42px rgba(2, 8, 23, .26),
        inset 0 0 0 1px rgba(255,255,255,.5) !important;
    transform: none !important;
}

.public-site .home-promo-carousel .promo-slide-media::before,
.public-site .home-promo-carousel .promo-slide-media::after {
    content: none !important;
    animation: none !important;
}

.public-site .home-promo-carousel .promo-slide-media img {
    border-radius: 16px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
}

.public-site .home-promo-carousel .promo-slide-media figcaption {
    color: #0f766e !important;
    background: #f8fafc !important;
}

.public-site .home-promo-carousel .carousel-controls {
    right: 24px !important;
    bottom: 22px !important;
    padding: 7px !important;
    border-color: rgba(226, 232, 240, .14) !important;
    background: rgba(2, 8, 23, .42) !important;
    box-shadow: 0 14px 28px rgba(2, 8, 23, .22) !important;
}

.public-site .home-promo-carousel .carousel-controls button {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, .08) !important;
}

.public-site .home-promo-carousel .carousel-controls button:hover {
    border-color: rgba(94, 234, 212, .45) !important;
    background: rgba(20, 184, 166, .16) !important;
}

.public-site .home-promo-carousel .carousel-dots button.active {
    width: 26px !important;
    background: #5eead4 !important;
}

.public-site .home-carousel-progress {
    left: 30px !important;
    right: 30px !important;
    bottom: 15px !important;
    height: 3px !important;
    background: rgba(255, 255, 255, .12) !important;
}

.public-site .home-carousel-progress span {
    background: #5eead4 !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .public-site .home-promo-carousel .carousel-track {
        height: 650px !important;
    }

    .public-site .home-promo-carousel .promo-slide {
        gap: 18px !important;
        padding: 26px 22px 86px !important;
    }

    .public-site .home-promo-carousel .promo-slide-media {
        width: min(100%, 500px) !important;
    }
}

@media (max-width: 620px) {
    .public-site .home-promo-carousel {
        border-radius: 20px !important;
    }

    .public-site .home-promo-carousel .carousel-track {
        height: 690px !important;
    }

    .public-site .home-promo-carousel .promo-slide {
        padding: 22px 16px 88px !important;
    }

    .public-site .home-promo-carousel .promo-slide h2 {
        font-size: clamp(1.82rem, 8.4vw, 2.45rem) !important;
    }

    .public-site .home-promo-carousel .promo-slide p {
        font-size: .94rem !important;
    }

    .public-site .home-promo-features span {
        font-size: .72rem !important;
    }

    .public-site .home-promo-carousel .promo-slide-media {
        aspect-ratio: 16 / 11 !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .public-site .home-promo-carousel .carousel-controls {
        bottom: 24px !important;
    }

    .public-site .home-carousel-progress {
        left: 20px !important;
        right: 20px !important;
        bottom: 13px !important;
    }
}

/* Inicio: carrusel corredizo solo de productos */
.public-site .home-products-carousel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 14px;
    padding: clamp(14px, 2.4vw, 24px);
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(4, 18, 32, .96), rgba(8, 34, 50, .94)),
        #07111f;
    box-shadow:
        0 24px 58px rgba(2, 8, 23, .26),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.public-site .home-products-carousel::before,
.public-site .home-products-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: clamp(42px, 8vw, 110px);
    pointer-events: none;
}

.public-site .home-products-carousel::before {
    left: 0;
    background: linear-gradient(90deg, #07111f, rgba(7, 17, 31, .72), transparent);
}

.public-site .home-products-carousel::after {
    right: 0;
    background: linear-gradient(270deg, #07111f, rgba(7, 17, 31, .72), transparent);
}

.public-site .home-products-viewport {
    overflow: hidden;
    border-radius: 22px;
}

.public-site .home-products-track {
    display: flex;
    width: max-content;
    gap: clamp(14px, 2vw, 24px);
    animation: homeProductsFlow 34s linear infinite;
    will-change: transform;
}

.public-site .home-products-carousel:hover .home-products-track {
    animation-play-state: paused;
}

.public-site .home-product-slide {
    display: block;
    flex: 0 0 clamp(230px, 24vw, 360px);
    min-width: 0;
    border-radius: 22px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.public-site .home-product-slide:hover {
    transform: translateY(-4px);
}

.public-site .home-product-slide figure {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0;
    overflow: hidden;
    padding: clamp(8px, 1vw, 14px);
    border: 1px solid rgba(226, 232, 240, .18);
    border-radius: inherit;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(2, 8, 23, .22);
}

.public-site .home-product-slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: contain;
    object-position: center;
    image-rendering: auto;
}

.public-site .home-product-slide figcaption {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 16px;
    background: #f8fafc;
    color: #0f766e;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
}

.public-site .home-product-slide .image-error::before {
    content: "";
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, #14b8a6, #38bdf8);
}

@keyframes homeProductsFlow {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - clamp(7px, 1vw, 12px))); }
}

@media (max-width: 760px) {
    .public-site .home-products-carousel {
        padding: 12px;
        border-radius: 22px;
    }

    .public-site .home-products-viewport {
        border-radius: 18px;
    }

    .public-site .home-products-track {
        gap: 12px;
        animation-duration: 26s;
    }

    .public-site .home-product-slide {
        flex-basis: min(78vw, 320px);
        border-radius: 18px;
    }

    .public-site .home-product-slide figure {
        aspect-ratio: 16 / 11;
        padding: 8px;
    }

    .public-site .home-product-slide img {
        border-radius: 13px;
    }
}

/* Inicio: carrusel de productos en formato grande */
.public-site .home-products-carousel {
    padding: clamp(18px, 3vw, 34px) !important;
    border-radius: 32px !important;
}

.public-site .home-products-viewport {
    border-radius: 26px !important;
}

.public-site .home-products-track {
    gap: clamp(20px, 2.4vw, 32px) !important;
    animation-duration: 40s !important;
}

.public-site .home-product-slide {
    flex-basis: clamp(340px, 34vw, 540px) !important;
    border-radius: 28px !important;
}

.public-site .home-product-slide figure {
    aspect-ratio: 16 / 9 !important;
    padding: clamp(14px, 1.4vw, 22px) !important;
    border-radius: inherit !important;
    box-shadow: 0 24px 52px rgba(2, 8, 23, .28) !important;
}

.public-site .home-product-slide img {
    border-radius: 22px !important;
}

@media (max-width: 900px) {
    .public-site .home-product-slide {
        flex-basis: min(82vw, 480px) !important;
    }
}

@media (max-width: 620px) {
    .public-site .home-products-carousel {
        padding: 12px !important;
        border-radius: 24px !important;
    }

    .public-site .home-products-track {
        gap: 16px !important;
        animation-duration: 30s !important;
    }

    .public-site .home-product-slide {
        flex-basis: 88vw !important;
        border-radius: 22px !important;
    }

    .public-site .home-product-slide figure {
        aspect-ratio: 16 / 10 !important;
        padding: 10px !important;
    }

    .public-site .home-product-slide img {
        border-radius: 16px !important;
    }
}

/* Inicio: carrusel una imagen por vez */
.public-site .home-products-carousel {
    padding: clamp(14px, 2.2vw, 24px) !important;
    border-radius: 30px !important;
}

.public-site .home-products-viewport {
    overflow: hidden !important;
    border-radius: 24px !important;
}

.public-site .home-products-track {
    display: flex !important;
    width: 100% !important;
    gap: 0 !important;
    animation: none !important;
    transform: translateX(calc(var(--home-product-index, 0) * -100%));
    transition: transform 1.05s cubic-bezier(.22, .72, .18, 1);
}

.public-site .home-products-carousel:hover .home-products-track {
    animation: none !important;
}

.public-site .home-product-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: clamp(6px, 1vw, 10px);
    border-radius: 26px !important;
    opacity: .68;
    transform: scale(.985);
    transition: opacity .85s ease, transform .85s ease;
}

.public-site .home-product-slide.active {
    opacity: 1;
    transform: scale(1);
}

.public-site .home-product-slide:hover {
    transform: scale(1) !important;
}

.public-site .home-product-slide figure {
    aspect-ratio: 16 / 7 !important;
    min-height: clamp(310px, 38vw, 520px);
    padding: clamp(18px, 2vw, 34px) !important;
    border-radius: inherit !important;
    background:
        linear-gradient(180deg, #ffffff, #f8fafc) !important;
    box-shadow:
        0 24px 58px rgba(2, 8, 23, .28),
        inset 0 0 0 1px rgba(15, 23, 42, .04) !important;
}

.public-site .home-product-slide img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 22px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.public-site .home-products-dots {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.public-site .home-products-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .34);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.public-site .home-products-dots button.active {
    width: 34px;
    background: #5eead4;
}

@media (max-width: 760px) {
    .public-site .home-products-carousel {
        padding: 10px !important;
        border-radius: 22px !important;
    }

    .public-site .home-products-viewport {
        border-radius: 18px !important;
    }

    .public-site .home-product-slide {
        padding: 4px;
        border-radius: 18px !important;
    }

    .public-site .home-product-slide figure {
        aspect-ratio: 4 / 3 !important;
        min-height: clamp(260px, 72vw, 430px);
        padding: 12px !important;
    }

    .public-site .home-product-slide img {
        border-radius: 14px !important;
    }
}

/* Admin: editor del carrusel de marketing */
.admin-area .admin-carousel-panel {
    margin-top: 18px;
}

.admin-area .admin-carousel-form {
    margin-bottom: 18px;
}

.admin-area .admin-carousel-form small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
}

.admin-area .admin-carousel-list {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.admin-area .admin-carousel-item {
    display: grid;
    grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.admin-area .admin-carousel-item figure {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 180px;
    margin: 0;
    overflow: hidden;
    padding: 10px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, .08);
}

.admin-area .admin-carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: contain;
    object-position: center;
}

.admin-area .admin-carousel-item figcaption {
    color: #64748b;
    font-weight: 900;
}

.admin-area .admin-carousel-item form {
    display: grid;
    align-content: space-between;
    gap: 14px;
}

@media (max-width: 900px) {
    .admin-area .admin-carousel-item {
        grid-template-columns: 1fr;
    }
}

/* Inicio: carrusel dividido imagen + frase de marketing */
.public-site .home-products-carousel {
    padding: clamp(14px, 2vw, 22px) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 82% 20%, rgba(20, 184, 166, .16), transparent 24rem),
        linear-gradient(135deg, #07111f 0%, #0a2638 54%, #071827 100%) !important;
}

.public-site .home-products-viewport {
    border-radius: 24px !important;
}

.public-site .home-product-slide.marketing-slide {
    display: grid !important;
    grid-template-columns: minmax(280px, .82fr) minmax(360px, 1.18fr);
    align-items: center;
    gap: clamp(22px, 3vw, 46px);
    min-height: clamp(430px, 42vw, 610px);
    padding: clamp(24px, 4vw, 56px) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.035)) !important;
}

.public-site .home-product-slide.marketing-slide::before {
    opacity: .28 !important;
    filter: blur(30px) saturate(1.05) !important;
}

.public-site .home-product-slide.marketing-slide::after {
    content: none !important;
}

.public-site .marketing-slide-copy {
    position: relative;
    z-index: 3;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 16px;
    max-width: 560px;
}

.public-site .marketing-slide-copy span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(94, 234, 212, .28);
    border-radius: 999px;
    background: rgba(20, 184, 166, .12);
    color: #99f6e4;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: 0;
}

.public-site .marketing-slide-copy h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2rem, 3.45vw, 3.85rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: 0;
    text-wrap: balance;
}

.public-site .marketing-slide-copy p {
    max-width: 500px;
    margin: 0;
    color: rgba(226, 232, 240, .86);
    font-size: clamp(.98rem, 1.2vw, 1.12rem);
    font-weight: 600;
    line-height: 1.68;
}

.public-site .marketing-slide-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid rgba(94, 234, 212, .28);
    border-radius: 999px;
    background: #5eead4;
    color: #052e2b;
    font-size: .92rem;
    font-weight: 900;
    box-shadow: 0 16px 32px rgba(20, 184, 166, .22);
}

.public-site .marketing-slide-button:hover {
    transform: translateY(-1px);
    background: #99f6e4;
}

.public-site .home-product-slide.marketing-slide figure {
    z-index: 3;
    width: 100% !important;
    height: clamp(330px, 34vw, 500px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(10px, 1.4vw, 18px) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 24px 58px rgba(2, 8, 23, .3) !important;
}

.public-site .home-product-slide.marketing-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 18px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
}

.public-site .home-products-dots {
    margin-top: 12px !important;
}

@media (max-width: 900px) {
    .public-site .home-product-slide.marketing-slide {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px !important;
    }

    .public-site .marketing-slide-copy {
        max-width: 100%;
    }

    .public-site .marketing-slide-copy h2 {
        font-size: clamp(1.8rem, 7vw, 2.8rem);
    }

    .public-site .home-product-slide.marketing-slide figure {
        height: clamp(300px, 74vw, 520px) !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel {
        padding: 8px !important;
        border-radius: 22px !important;
    }

    .public-site .home-product-slide.marketing-slide {
        padding: 16px !important;
        border-radius: 18px !important;
    }

    .public-site .marketing-slide-copy {
        gap: 12px;
    }

    .public-site .marketing-slide-button {
        width: 100%;
    }

    .public-site .home-product-slide.marketing-slide figure {
        height: clamp(260px, 82vw, 420px) !important;
        border-radius: 18px !important;
    }
}

/* Inicio: banners de marketing bien redimensionados */
.public-site .home-products-carousel {
    padding: clamp(10px, 1.5vw, 16px) !important;
}

.public-site .home-products-viewport {
    background: #07111f;
}

.public-site .home-product-slide.marketing-slide {
    padding: 0 !important;
}

.public-site .home-product-slide.marketing-slide figure {
    aspect-ratio: 16 / 7 !important;
    min-height: clamp(300px, 34vw, 500px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #07111f !important;
    box-shadow: none !important;
}

.public-site .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: center center !important;
}

@media (max-width: 760px) {
    .public-site .home-product-slide.marketing-slide figure {
        aspect-ratio: 16 / 10 !important;
        min-height: clamp(250px, 68vw, 390px) !important;
    }
}

/* Inicio: mostrar imagen de marketing completa, sin recortes */
.public-site .home-product-slide.marketing-slide figure {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 7 !important;
    padding: 4px !important;
    background: #07111f !important;
}

.public-site .home-product-slide.marketing-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 20px !important;
}

@media (max-width: 760px) {
    .public-site .home-product-slide.marketing-slide figure {
        aspect-ratio: 16 / 9 !important;
        padding: 3px !important;
    }

    .public-site .home-product-slide.marketing-slide img {
        border-radius: 14px !important;
    }
}

/* Inicio: imagen de marketing con mayor presencia */
.public-site .home-products-carousel {
    padding: 8px !important;
}

.public-site .home-products-viewport,
.public-site .home-product-slide.marketing-slide,
.public-site .home-product-slide.marketing-slide figure {
    border-radius: 24px !important;
}

@media (min-width: 1200px) {
    .public-site .home-product-slide.marketing-slide figure {
        aspect-ratio: 16 / 6.6 !important;
    }
}

/* Inicio: carrusel marketing profesional para imagenes verticales/cuadradas */
.public-site .home-products-carousel {
    padding: clamp(12px, 2vw, 22px) !important;
    background:
        linear-gradient(135deg, rgba(3, 12, 25, .98), rgba(8, 32, 45, .96)) !important;
}

.public-site .home-products-viewport {
    border-radius: 30px !important;
}

.public-site .home-product-slide.marketing-slide {
    position: relative;
    overflow: hidden;
    border-radius: 30px !important;
    background: #07111f;
}

.public-site .home-product-slide.marketing-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, .74), rgba(7, 17, 31, .2), rgba(7, 17, 31, .74)),
        var(--marketing-image);
    background-size: cover;
    background-position: center;
    filter: blur(22px) saturate(1.08);
    transform: scale(1.12);
    opacity: .58;
}

.public-site .home-product-slide.marketing-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(7, 17, 31, .44) 100%);
    pointer-events: none;
}

.public-site .home-product-slide.marketing-slide figure {
    position: relative;
    z-index: 2;
    height: clamp(520px, 58vw, 780px) !important;
    max-height: 78vh;
    padding: clamp(12px, 1.6vw, 22px) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: inherit !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 30px 70px rgba(2, 8, 23, .28) !important;
}

.public-site .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 22px !important;
    filter: drop-shadow(0 24px 36px rgba(2, 8, 23, .28));
}

@media (max-width: 760px) {
    .public-site .home-products-carousel {
        padding: 8px !important;
        border-radius: 22px !important;
    }

    .public-site .home-products-viewport,
    .public-site .home-product-slide.marketing-slide {
        border-radius: 20px !important;
    }

    .public-site .home-product-slide.marketing-slide figure {
        height: clamp(430px, 118vw, 650px) !important;
        padding: 8px !important;
    }

    .public-site .home-product-slide.marketing-slide img {
        border-radius: 16px !important;
    }
}

/* FINAL Inicio: carrusel con frase editable + imagen */
.public-site .home-products-carousel .home-products-track {
    transform: translateX(calc(var(--home-product-index, 0) * -100%)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    display: grid !important;
    grid-template-columns: minmax(300px, .85fr) minmax(380px, 1.15fr) !important;
    gap: clamp(24px, 3.5vw, 54px) !important;
    align-items: center !important;
    min-height: clamp(440px, 42vw, 620px) !important;
    padding: clamp(28px, 4.2vw, 60px) !important;
    background:
        radial-gradient(circle at 85% 28%, rgba(94, 234, 212, .18), transparent 22rem),
        linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before {
    opacity: .22 !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    gap: 16px !important;
    max-width: 560px !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.05rem, 3.45vw, 3.8rem) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    margin: 0 !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.18vw, 1.12rem) !important;
    font-weight: 600 !important;
    line-height: 1.68 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    width: fit-content !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure {
    position: relative !important;
    z-index: 5 !important;
    height: clamp(330px, 34vw, 500px) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: clamp(10px, 1.2vw, 16px) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .055) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 18px !important;
    filter: none !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        padding: 22px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure {
        height: clamp(300px, 72vw, 500px) !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel .marketing-slide-button {
        width: 100% !important;
    }
}

/* FINAL Inicio: ajuste real segun proporcion de imagen */
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait {
    grid-template-columns: minmax(300px, 1fr) minmax(280px, 430px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square {
    grid-template-columns: minmax(300px, .95fr) minmax(340px, 520px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide {
    grid-template-columns: minmax(300px, .72fr) minmax(420px, 1.28fr) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(100%, 430px) !important;
    height: clamp(430px, 45vw, 610px) !important;
    justify-self: center !important;
    padding: 8px !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(100%, 520px) !important;
    height: clamp(380px, 38vw, 540px) !important;
    justify-self: center !important;
    padding: 8px !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    width: 100% !important;
    height: clamp(320px, 32vw, 480px) !important;
    padding: 6px !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Inicio: imagen del carrusel sin fondo blanco */
.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .1) !important;
    box-shadow: none !important;
}

/* FINAL PRO: carrusel de marketing con presencia premium */
.public-site .home-products-carousel {
    margin-top: 18px !important;
    padding: 16px !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    border-radius: 32px !important;
    background:
        linear-gradient(135deg, #06111f 0%, #08253a 48%, #081522 100%) !important;
    box-shadow:
        0 30px 72px rgba(2, 8, 23, .34),
        inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.public-site .home-products-viewport {
    border-radius: 26px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    min-height: 34rem !important;
    padding: 3rem !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(120deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 54%, rgba(94,234,212,.07)) !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    gap: 1rem !important;
    max-width: 34rem !important;
}

.public-site .home-products-carousel .marketing-slide-copy span {
    min-height: 2.25rem !important;
    padding: 0 .9rem !important;
    border: 1px solid rgba(94, 234, 212, .32) !important;
    border-radius: 999px !important;
    background: rgba(20, 184, 166, .13) !important;
    color: #a7f3d0 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 33rem !important;
    color: #f8fafc !important;
    font-size: 3.1rem !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 18px 38px rgba(2, 8, 23, .36);
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 31rem !important;
    color: rgba(226, 232, 240, .9) !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    font-weight: 650 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    min-height: 3rem !important;
    padding: 0 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5eead4, #38bdf8) !important;
    color: #031827 !important;
    font-size: .94rem !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 36px rgba(45, 212, 191, .22) !important;
}

.public-site .home-products-carousel .marketing-slide-button:hover {
    background: linear-gradient(135deg, #99f6e4, #7dd3fc) !important;
    transform: translateY(-2px);
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure {
    display: grid !important;
    place-items: center !important;
    height: 28rem !important;
    padding: .75rem !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 26px 56px rgba(2, 8, 23, .26) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    content: "";
    position: absolute;
    inset: .65rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    pointer-events: none;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 20px !important;
    filter: drop-shadow(0 22px 34px rgba(2, 8, 23, .28)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(100%, 28rem) !important;
    height: 32rem !important;
    justify-self: center !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(100%, 32rem) !important;
    height: 32rem !important;
    justify-self: center !important;
}

.public-site .home-products-carousel .home-products-dots button.active {
    background: #5eead4 !important;
    box-shadow: 0 0 18px rgba(94, 234, 212, .34);
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        padding: 1.5rem !important;
        min-height: 0 !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: 2.35rem !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
        width: 100% !important;
        height: 28rem !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel {
        padding: .5rem !important;
        border-radius: 22px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        padding: 1rem !important;
        border-radius: 18px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: 1.9rem !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy p {
        font-size: .95rem !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
        height: 24rem !important;
        border-radius: 18px !important;
    }
}

/* FINAL PRO: caja elegante para texto del carrusel */
.public-site .home-products-carousel .marketing-slide-copy {
    padding: clamp(1.25rem, 2.4vw, 2rem) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 22px 48px rgba(2, 8, 23, .18) !important;
    backdrop-filter: blur(14px);
}

.public-site .home-products-carousel .marketing-slide-copy span {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    padding-bottom: .15rem;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    padding-left: .9rem;
    border-left: 3px solid rgba(94, 234, 212, .62);
}

@media (max-width: 560px) {
    .public-site .home-products-carousel .marketing-slide-copy {
        padding: 1rem !important;
        border-radius: 18px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy p {
        padding-left: .75rem;
    }
}

/* FINAL PRO: ritmo lento y cajas niveladas en el carrusel */
.public-site .home-products-carousel {
    --marketing-panel-height: clamp(28rem, 34vw, 34rem);
}

.public-site .home-products-carousel .home-products-track {
    transition: transform 1.45s cubic-bezier(.2, .72, .18, 1) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    align-items: stretch !important;
}

.public-site .home-products-carousel .marketing-slide-copy,
.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    height: var(--marketing-panel-height) !important;
    min-height: var(--marketing-panel-height) !important;
    max-height: var(--marketing-panel-height) !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    align-self: stretch !important;
    align-content: center !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure {
    align-self: stretch !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel {
        --marketing-panel-height: auto;
    }

    .public-site .home-products-carousel .marketing-slide-copy {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        height: clamp(25rem, 72vw, 33rem) !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* FINAL DELUXE: carrusel marketing mas llamativo y profesional */
.public-site .home-products-carousel {
    position: relative !important;
    margin-top: 22px !important;
    padding: clamp(14px, 2vw, 24px) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 34px !important;
    background:
        linear-gradient(135deg, #06111f 0%, #08283d 48%, #061827 100%) !important;
    box-shadow:
        0 34px 86px rgba(2, 8, 23, .38),
        inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.public-site .home-products-carousel::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 33px;
    background:
        linear-gradient(120deg, rgba(94, 234, 212, .16), transparent 34%, rgba(125, 211, 252, .12));
    pointer-events: none;
}

.public-site .home-products-viewport {
    position: relative !important;
    z-index: 1 !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: rgba(2, 8, 23, .16) !important;
}

.public-site .home-products-carousel .home-products-track {
    transition: transform 1.7s cubic-bezier(.2, .72, .18, 1) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    grid-template-columns: minmax(310px, .9fr) minmax(390px, 1.1fr) !important;
    gap: clamp(26px, 4vw, 60px) !important;
    padding: clamp(30px, 4.8vw, 68px) !important;
    min-height: clamp(500px, 45vw, 680px) !important;
    align-items: stretch !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 54%, rgba(94, 234, 212, .075)) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before {
    opacity: .18 !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    align-self: stretch !important;
    display: grid !important;
    align-content: center !important;
    gap: 18px !important;
    min-height: 100% !important;
    padding: clamp(24px, 3vw, 38px) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, .56), rgba(15, 23, 42, .22)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 26px 54px rgba(2, 8, 23, .22) !important;
    backdrop-filter: blur(18px);
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #5eead4, #38bdf8, #a78bfa);
}

.public-site .home-products-carousel .marketing-slide-copy span {
    width: fit-content !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-color: rgba(94, 234, 212, .32) !important;
    background: rgba(20, 184, 166, .14) !important;
    color: #ccfbf1 !important;
    font-size: .78rem !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 560px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.2rem, 3.7vw, 4.05rem) !important;
    line-height: 1.03 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 520px !important;
    margin: 0 !important;
    padding-left: 16px !important;
    border-left: 3px solid rgba(94, 234, 212, .7) !important;
    color: rgba(241, 245, 249, .88) !important;
    font-size: clamp(1rem, 1.16vw, 1.14rem) !important;
    line-height: 1.72 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    min-height: 50px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5eead4, #38bdf8) !important;
    color: #031827 !important;
    box-shadow:
        0 18px 36px rgba(45, 212, 191, .22),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(14px, 1.8vw, 24px) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 26px 58px rgba(2, 8, 23, .28) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    inset: 12px !important;
    border-radius: 22px !important;
    border-color: rgba(255,255,255,.12) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    object-fit: contain !important;
    border-radius: 20px !important;
    filter: drop-shadow(0 24px 38px rgba(2, 8, 23, .3)) !important;
}

.public-site .home-products-controlbar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44px minmax(140px, 1fr) 44px;
    align-items: center;
    gap: 12px;
    width: min(520px, calc(100% - 24px));
    margin: 14px auto 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(2, 8, 23, .36);
    backdrop-filter: blur(14px);
}

.public-site .home-products-controlbar button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font-size: 1.45rem;
    cursor: pointer;
}

.public-site .home-products-controlbar button:hover {
    border-color: rgba(94, 234, 212, .46);
    background: rgba(20, 184, 166, .18);
}

.public-site .home-products-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.public-site .home-products-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5eead4, #38bdf8, #a78bfa);
    transition: width .6s ease;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        padding: 22px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy {
        min-height: auto !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        min-height: 400px !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel {
        padding: 8px !important;
        border-radius: 24px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        padding: 14px !important;
        border-radius: 20px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: clamp(1.85rem, 8.5vw, 2.45rem) !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        min-height: 330px !important;
        padding: 10px !important;
        border-radius: 20px !important;
    }

    .public-site .home-products-controlbar {
        grid-template-columns: 40px 1fr 40px;
        width: 100%;
    }

    .public-site .home-products-controlbar button {
        width: 40px;
        height: 40px;
    }
}

/* Ajuste: titulo del carrusel mas elegante */
.public-site .home-products-carousel .marketing-slide-copy h2 {
    font-size: clamp(1.75rem, 2.55vw, 2.85rem) !important;
    line-height: 1.12 !important;
}

@media (max-width: 560px) {
    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: clamp(1.55rem, 7vw, 2.05rem) !important;
    }
}

/* FINAL limpio: un solo contenedor para el carrusel */
.public-site .home-products-carousel {
    padding: clamp(18px, 2.4vw, 30px) !important;
    border: 1px solid rgba(125, 211, 252, .18) !important;
    border-radius: 32px !important;
    background:
        radial-gradient(circle at 80% 22%, rgba(94, 234, 212, .16), transparent 24rem),
        radial-gradient(circle at 18% 82%, rgba(56, 189, 248, .1), transparent 22rem),
        linear-gradient(135deg, #06111f 0%, #08263a 52%, #061827 100%) !important;
    box-shadow: 0 30px 76px rgba(2, 8, 23, .34) !important;
}

.public-site .home-products-viewport {
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    grid-template-columns: minmax(300px, .86fr) minmax(360px, 1.14fr) !important;
    gap: clamp(28px, 4vw, 64px) !important;
    min-height: clamp(430px, 38vw, 560px) !important;
    padding: clamp(18px, 2vw, 28px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before,
.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    content: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy span {
    background: rgba(94, 234, 212, .13) !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 34rem !important;
    font-size: clamp(1.85rem, 2.65vw, 3rem) !important;
    line-height: 1.1 !important;
    text-shadow: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 32rem !important;
    padding-left: 1rem !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    height: clamp(320px, 32vw, 470px) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    content: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    border-radius: 18px !important;
    filter: drop-shadow(0 22px 34px rgba(2, 8, 23, .34)) !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        height: clamp(280px, 72vw, 460px) !important;
    }
}

/* FINAL VISTA: carrusel principal profesional y limpio */
.public-site .home-products-carousel {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 22px !important;
    padding: clamp(22px, 3vw, 42px) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 34px !important;
    background:
        radial-gradient(circle at 86% 24%, rgba(20, 184, 166, .16), transparent 24rem),
        radial-gradient(circle at 12% 88%, rgba(56, 189, 248, .1), transparent 22rem),
        linear-gradient(135deg, #07111f 0%, #092438 48%, #071827 100%) !important;
    box-shadow:
        0 34px 82px rgba(2, 8, 23, .34),
        inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

.public-site .home-products-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(255,255,255,.04));
    pointer-events: none;
}

.public-site .home-products-viewport {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    display: grid !important;
    grid-template-columns: minmax(300px, .78fr) minmax(380px, 1.22fr) !important;
    gap: clamp(32px, 5vw, 76px) !important;
    align-items: center !important;
    min-height: clamp(430px, 39vw, 590px) !important;
    padding: clamp(10px, 1vw, 16px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before,
.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    align-content: center !important;
    gap: 15px !important;
    max-width: 36rem !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    content: "";
    width: 4.5rem;
    height: 4px;
    order: -1;
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4, #38bdf8);
}

.public-site .home-products-carousel .marketing-slide-copy span {
    width: fit-content !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(94, 234, 212, .24) !important;
    border-radius: 999px !important;
    background: rgba(15, 118, 110, .22) !important;
    color: #ccfbf1 !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 35rem !important;
    margin: 0 !important;
    color: #f8fafc !important;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(1.85rem, 2.65vw, 3.05rem) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 33rem !important;
    margin: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.08vw, 1.08rem) !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    width: fit-content !important;
    min-height: 48px !important;
    margin-top: 4px;
    padding: 0 22px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5eead4, #38bdf8) !important;
    color: #031827 !important;
    font-size: .93rem !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 34px rgba(45, 212, 191, .18) !important;
}

.public-site .home-products-carousel .marketing-slide-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #99f6e4, #7dd3fc) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: clamp(330px, 34vw, 510px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(100%, 430px) !important;
    justify-self: center !important;
    height: clamp(390px, 39vw, 560px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(100%, 500px) !important;
    justify-self: center !important;
    height: clamp(360px, 36vw, 510px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    content: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 18px !important;
    filter: drop-shadow(0 24px 38px rgba(2, 8, 23, .38)) !important;
}

.public-site .home-products-controlbar {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(140px, 1fr) 42px !important;
    width: min(480px, 100%) !important;
    margin: 16px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.public-site .home-products-controlbar button {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .08) !important;
}

.public-site .home-products-progress {
    height: 5px !important;
    background: rgba(255, 255, 255, .13) !important;
}

.public-site .home-products-dots {
    margin-top: 10px !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        width: 100% !important;
        height: clamp(300px, 72vw, 480px) !important;
    }
}

@media (max-width: 560px) {
    .public-site .home-products-carousel {
        padding: 14px !important;
        border-radius: 24px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy h2 {
        font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important;
    }

    .public-site .home-products-carousel .marketing-slide-button {
        width: 100% !important;
    }
}

/* FINAL UNSM style: hero carousel amplio y profesional */
.public-site .home-products-carousel {
    margin-top: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: #07111f !important;
    box-shadow: 0 30px 78px rgba(2, 8, 23, .34) !important;
}

.public-site .home-products-carousel::before {
    content: none !important;
}

.public-site .home-products-viewport {
    border-radius: inherit !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    position: relative !important;
    isolation: isolate;
    display: grid !important;
    grid-template-columns: minmax(320px, .78fr) minmax(380px, 1.22fr) !important;
    min-height: clamp(500px, 45vw, 690px) !important;
    gap: clamp(26px, 4vw, 68px) !important;
    align-items: center !important;
    padding: clamp(34px, 5vw, 74px) !important;
    background: #07111f !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, .96) 0%, rgba(7, 17, 31, .82) 38%, rgba(7, 17, 31, .4) 72%, rgba(7, 17, 31, .84) 100%),
        var(--marketing-image);
    background-size: cover;
    background-position: center;
    filter: saturate(1.04);
    opacity: .95 !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: "" !important;
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 32%),
        radial-gradient(circle at 82% 30%, rgba(94, 234, 212, .16), transparent 22rem);
    pointer-events: none;
}

.public-site .home-products-carousel .marketing-slide-copy {
    max-width: 36rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    width: 5rem !important;
    height: 5px !important;
    background: linear-gradient(90deg, #5eead4, #38bdf8) !important;
}

.public-site .home-products-carousel .marketing-slide-copy span {
    min-height: 34px !important;
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .2) !important;
    color: #dffdf7 !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    max-width: 35rem !important;
    font-size: clamp(1.9rem, 2.8vw, 3.15rem) !important;
    line-height: 1.08 !important;
    color: #ffffff !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 33rem !important;
    color: rgba(241, 245, 249, .9) !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    background: #ffffff !important;
    color: #07111f !important;
    box-shadow: 0 18px 40px rgba(2, 8, 23, .26) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    justify-self: center !important;
    width: min(100%, 620px) !important;
    height: clamp(360px, 36vw, 560px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(100%, 460px) !important;
    height: clamp(430px, 42vw, 620px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(100%, 540px) !important;
    height: clamp(390px, 38vw, 560px) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    object-fit: contain !important;
    border-radius: 16px !important;
    filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .42)) !important;
}

.public-site .home-products-controlbar {
    position: absolute !important;
    right: clamp(18px, 3vw, 42px) !important;
    bottom: clamp(18px, 3vw, 36px) !important;
    z-index: 5 !important;
    width: min(360px, calc(100% - 36px)) !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;
    background: rgba(2, 8, 23, .5) !important;
    backdrop-filter: blur(14px) !important;
}

.public-site .home-products-controlbar button {
    background: rgba(255,255,255,.1) !important;
}

.public-site .home-products-dots {
    position: absolute !important;
    left: clamp(18px, 3vw, 42px);
    bottom: clamp(28px, 4vw, 48px);
    z-index: 5;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        grid-template-columns: 1fr !important;
        padding: 28px 22px 92px !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        width: 100% !important;
        height: clamp(290px, 70vw, 480px) !important;
    }

    .public-site .home-products-controlbar {
        right: 14px !important;
        bottom: 14px !important;
    }

    .public-site .home-products-dots {
        left: 18px;
        bottom: 28px;
    }
}

/* FINAL REAL: carrusel hero comercial, imagen protagonista */
.public-site .home-products-carousel {
    height: clamp(520px, 48vw, 720px) !important;
    margin-top: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: #06111f !important;
    box-shadow: 0 34px 86px rgba(2, 8, 23, .38) !important;
}

.public-site .home-products-viewport,
.public-site .home-products-track {
    height: 100% !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        linear-gradient(90deg, rgba(6,17,31,.98) 0%, rgba(6,17,31,.9) 38%, rgba(6,17,31,.18) 70%, rgba(6,17,31,.58) 100%) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-image: var(--marketing-image) !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(18px) saturate(1.08) brightness(.72) !important;
    transform: scale(1.08) !important;
    opacity: .34 !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        linear-gradient(90deg, rgba(6,17,31,.98) 0%, rgba(6,17,31,.82) 40%, rgba(6,17,31,.18) 68%, rgba(6,17,31,.68) 100%),
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.18), transparent 26rem) !important;
}

.public-site .home-products-carousel .marketing-slide-copy {
    position: absolute !important;
    z-index: 4 !important;
    left: clamp(28px, 5vw, 72px) !important;
    top: 50% !important;
    width: min(42rem, 46%) !important;
    max-width: 42rem !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    gap: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .marketing-slide-copy::before {
    content: "" !important;
    width: 5.5rem !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #5eead4, #38bdf8) !important;
}

.public-site .home-products-carousel .marketing-slide-copy span {
    width: fit-content !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.1) !important;
    color: #ccfbf1 !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
}

.public-site .home-products-carousel .marketing-slide-copy h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2rem, 3vw, 3.35rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.public-site .home-products-carousel .marketing-slide-copy p {
    max-width: 34rem !important;
    margin: 0 !important;
    color: rgba(241,245,249,.88) !important;
    font-size: clamp(1rem, 1.15vw, 1.12rem) !important;
    line-height: 1.72 !important;
    font-weight: 600 !important;
}

.public-site .home-products-carousel .marketing-slide-button {
    width: fit-content !important;
    min-height: 50px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #06111f !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 38px rgba(2,8,23,.32) !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
.public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
    position: absolute !important;
    z-index: 3 !important;
    right: clamp(24px, 5vw, 76px) !important;
    top: 50% !important;
    width: min(48%, 650px) !important;
    height: 82% !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure {
    width: min(34%, 460px) !important;
    height: 88% !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure {
    width: min(42%, 540px) !important;
    height: 76% !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide figure::before {
    content: none !important;
}

.public-site .home-products-carousel .home-product-slide.marketing-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 34px 44px rgba(0,0,0,.46)) !important;
}

.public-site .home-products-controlbar {
    position: absolute !important;
    z-index: 6 !important;
    left: clamp(28px, 5vw, 72px) !important;
    right: auto !important;
    bottom: clamp(24px, 4vw, 46px) !important;
    width: min(390px, 48%) !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;
    background: rgba(2,8,23,.48) !important;
    backdrop-filter: blur(14px) !important;
}

.public-site .home-products-dots {
    position: absolute !important;
    z-index: 6 !important;
    right: clamp(24px, 5vw, 76px) !important;
    left: auto !important;
    bottom: clamp(30px, 4vw, 52px) !important;
}

@media (max-width: 900px) {
    .public-site .home-products-carousel {
        height: auto !important;
        min-height: 0 !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        min-height: 0 !important;
        padding: 28px 20px 96px !important;
    }

    .public-site .home-products-carousel .marketing-slide-copy {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        transform: none !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        height: clamp(300px, 72vw, 500px) !important;
        transform: none !important;
    }

    .public-site .home-products-controlbar {
        left: 18px !important;
        bottom: 18px !important;
        width: calc(100% - 36px) !important;
    }

    .public-site .home-products-dots {
        display: none !important;
    }
}

/* NUEVO CARRUSEL PROFESIONAL: componente aislado */
.public-site .marketing-hero-carousel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(520px, 46vw, 720px);
    margin-top: 22px;
    border-radius: 30px;
    background: #07111f;
    box-shadow: 0 34px 86px rgba(2, 8, 23, .36);
}

.public-site .marketing-hero-track {
    display: flex;
    width: 100%;
    min-height: inherit;
    transform: translateX(calc(var(--hero-index, 0) * -100%));
    transition: transform 1.6s cubic-bezier(.2, .72, .18, 1);
}

.public-site .marketing-hero-slide {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(360px, 1.22fr);
    flex: 0 0 100%;
    gap: clamp(28px, 5vw, 78px);
    align-items: center;
    min-height: inherit;
    padding: clamp(34px, 5vw, 76px);
    color: #ffffff;
}

.public-site .marketing-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(90deg, rgba(7,17,31,.98) 0%, rgba(7,17,31,.86) 42%, rgba(7,17,31,.36) 72%, rgba(7,17,31,.78) 100%),
        var(--hero-bg);
    background-size: cover;
    background-position: center;
    filter: saturate(1.08) brightness(.9);
}

.public-site .marketing-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.18), transparent 26rem),
        linear-gradient(180deg, rgba(255,255,255,.07), transparent 36%);
    pointer-events: none;
}

.public-site .marketing-hero-copy {
    display: grid;
    max-width: 38rem;
    gap: 15px;
    align-content: center;
}

.public-site .marketing-hero-copy::before {
    content: "";
    width: 5.5rem;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4, #38bdf8);
}

.public-site .marketing-hero-copy span {
    display: inline-flex;
    width: fit-content;
    min-height: 34px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: #ccfbf1;
    font-size: .75rem;
    font-weight: 900;
}

.public-site .marketing-hero-copy h2 {
    max-width: 36rem;
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.95rem, 2.85vw, 3.25rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.public-site .marketing-hero-copy p {
    max-width: 34rem;
    margin: 0;
    color: rgba(241,245,249,.88);
    font-size: clamp(.98rem, 1.12vw, 1.12rem);
    font-weight: 600;
    line-height: 1.72;
}

.public-site .marketing-hero-button {
    display: inline-flex;
    width: fit-content;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 0 22px;
    border-radius: 999px;
    background: #ffffff;
    color: #06111f;
    font-size: .93rem;
    font-weight: 950;
    box-shadow: 0 18px 38px rgba(2,8,23,.32);
}

.public-site .marketing-hero-button:hover {
    transform: translateY(-2px);
    background: #ccfbf1;
}

.public-site .marketing-hero-media {
    display: grid;
    width: 100%;
    height: clamp(360px, 36vw, 580px);
    place-items: center;
    justify-self: center;
    margin: 0;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
    width: min(100%, 460px);
    height: clamp(430px, 42vw, 640px);
}

.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 560px);
    height: clamp(390px, 38vw, 580px);
}

.public-site .marketing-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 34px 44px rgba(0,0,0,.46));
}

.public-site .marketing-hero-media figcaption {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #5eead4;
    font-size: 4rem;
    font-weight: 900;
}

.public-site .marketing-hero-controls {
    position: absolute;
    z-index: 5;
    left: clamp(28px, 5vw, 76px);
    bottom: clamp(22px, 3.5vw, 44px);
    display: grid;
    grid-template-columns: 42px minmax(130px, 1fr) 42px;
    align-items: center;
    gap: 10px;
    width: min(390px, 46%);
    padding: 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(2,8,23,.48);
    backdrop-filter: blur(14px);
}

.public-site .marketing-hero-controls button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #ffffff;
    font-size: 1.45rem;
    cursor: pointer;
}

.public-site .marketing-hero-controls button:hover {
    border-color: rgba(94,234,212,.48);
    background: rgba(20,184,166,.2);
}

.public-site .marketing-hero-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
}

.public-site .marketing-hero-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5eead4, #38bdf8, #a78bfa);
    transition: width .55s ease;
}

.public-site .marketing-hero-dots {
    position: absolute;
    z-index: 5;
    right: clamp(28px, 5vw, 76px);
    bottom: clamp(34px, 4.5vw, 58px);
    display: flex;
    gap: 8px;
}

.public-site .marketing-hero-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.42);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.public-site .marketing-hero-dots button.active {
    width: 34px;
    background: #5eead4;
}

@media (max-width: 900px) {
    .public-site .marketing-hero-carousel {
        min-height: 0;
    }

    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 20px 96px;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        width: 100%;
        height: clamp(300px, 72vw, 500px);
    }

    .public-site .marketing-hero-controls {
        left: 18px;
        bottom: 18px;
        width: calc(100% - 36px);
    }

    .public-site .marketing-hero-dots {
        display: none;
    }
}

@media (max-width: 560px) {
    .public-site .marketing-hero-carousel {
        border-radius: 22px;
    }

    .public-site .marketing-hero-slide {
        padding: 22px 16px 92px;
    }

    .public-site .marketing-hero-copy h2 {
        font-size: clamp(1.62rem, 7.4vw, 2.1rem);
    }

    .public-site .marketing-hero-button {
        width: 100%;
    }
}

/* Ajuste: carrusel sin fondo de cajon */
.public-site .marketing-hero-carousel {
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-slide {
    background: transparent !important;
}

.public-site .marketing-hero-slide::before {
    opacity: .22 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        linear-gradient(90deg, rgba(7, 17, 31, .82) 0%, rgba(7, 17, 31, .62) 42%, rgba(7, 17, 31, .08) 72%, rgba(7, 17, 31, .28) 100%),
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.12), transparent 24rem) !important;
}

/* Contorno elegante para texto e imagen del primer carrusel */
.public-site .marketing-hero-copy {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.8rem) !important;
    border-left: 4px solid rgba(94, 234, 212, .82) !important;
    border-radius: 0 22px 22px 0;
    background: linear-gradient(90deg, rgba(7,17,31,.42), rgba(7,17,31,.06));
}

.public-site .marketing-hero-copy::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, .12);
    border-left: 0;
    pointer-events: none;
}

.public-site .marketing-hero-media {
    position: relative;
    padding: clamp(.55rem, 1vw, .85rem);
    border-radius: 28px;
}

.public-site .marketing-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(94,234,212,.78), rgba(56,189,248,.24), rgba(255,255,255,.1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.public-site .marketing-hero-media img {
    border-radius: 22px !important;
}

/* Pulido premium: marcos con esquinas y profundidad visual */
.public-site .marketing-hero-copy {
    overflow: visible !important;
    padding: clamp(1.35rem, 2.4vw, 2.1rem) !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.public-site .marketing-hero-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5.25rem;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #5eead4, #38bdf8);
    box-shadow: 0 0 24px rgba(94, 234, 212, .28);
}

.public-site .marketing-hero-copy::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(94,234,212,.72), transparent 34%) top left / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(94,234,212,.72), transparent 44%) top left / 1px 100% no-repeat,
        linear-gradient(270deg, rgba(255,255,255,.18), transparent 32%) bottom right / 100% 1px no-repeat,
        linear-gradient(0deg, rgba(255,255,255,.18), transparent 42%) bottom right / 1px 100% no-repeat;
    pointer-events: none;
}

.public-site .marketing-hero-copy h2 {
    position: relative;
}

.public-site .marketing-hero-copy p {
    position: relative;
    padding-left: 1rem !important;
    border-left: 3px solid rgba(94, 234, 212, .68) !important;
}

.public-site .marketing-hero-media {
    isolation: isolate;
    overflow: visible;
    padding: clamp(.75rem, 1.2vw, 1.15rem) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(94,234,212,.13), transparent 62%),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 28px 64px rgba(2, 8, 23, .26) !important;
}

.public-site .marketing-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(94,234,212,.58), rgba(56,189,248,.16), rgba(255,255,255,.1));
    opacity: .9;
    pointer-events: none;
}

.public-site .marketing-hero-media::after {
    content: "";
    position: absolute;
    inset: .65rem;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.16);
    pointer-events: none;
}

.public-site .marketing-hero-media img {
    position: relative;
    z-index: 1;
    border-radius: 22px !important;
    filter: drop-shadow(0 30px 42px rgba(0,0,0,.44)) !important;
}

@media (max-width: 560px) {
    .public-site .marketing-hero-copy {
        padding: 1rem !important;
    }

    .public-site .marketing-hero-media {
        padding: .55rem !important;
        border-radius: 22px !important;
    }

    .public-site .marketing-hero-media::after {
        inset: .45rem;
        border-radius: 16px;
    }
}

/* Acabado final refinado del carrusel principal */
.public-site .marketing-hero-carousel {
    margin-top: 24px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(5, 18, 34, .96), rgba(7, 36, 52, .94)) !important;
    box-shadow:
        0 28px 70px rgba(2, 8, 23, .3),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(310px, .82fr) minmax(380px, 1.18fr) !important;
    gap: clamp(34px, 5vw, 78px) !important;
    padding: clamp(38px, 5vw, 72px) !important;
}

.public-site .marketing-hero-slide::before {
    filter: blur(8px) saturate(1.02) brightness(.68) !important;
    opacity: .3 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        linear-gradient(90deg, rgba(5,18,34,.94) 0%, rgba(5,18,34,.76) 42%, rgba(5,18,34,.16) 72%, rgba(5,18,34,.48) 100%),
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.13), transparent 25rem) !important;
}

.public-site .marketing-hero-copy {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    max-width: 38rem !important;
    gap: 14px !important;
}

.public-site .marketing-hero-copy::before {
    position: static !important;
    width: 4.75rem !important;
    height: 4px !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-copy::after {
    content: none !important;
}

.public-site .marketing-hero-copy span {
    min-height: 32px !important;
    padding: 0 12px !important;
    background: rgba(94, 234, 212, .12) !important;
    border-color: rgba(94, 234, 212, .22) !important;
    color: #ccfbf1 !important;
    font-size: .73rem !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 36rem !important;
    font-size: clamp(1.9rem, 2.7vw, 3rem) !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
}

.public-site .marketing-hero-copy p {
    max-width: 33rem !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.08vw, 1.08rem) !important;
}

.public-site .marketing-hero-button {
    min-height: 48px !important;
    margin-top: 8px !important;
    padding: 0 22px !important;
    background: #ffffff !important;
    color: #06111f !important;
    box-shadow: 0 16px 32px rgba(2, 8, 23, .26) !important;
}

.public-site .marketing-hero-media {
    padding: clamp(.65rem, 1vw, .9rem) !important;
    border-radius: 26px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-media::before {
    inset: 0 !important;
    border-radius: inherit !important;
    background:
        linear-gradient(135deg, rgba(94,234,212,.72), rgba(56,189,248,.22), rgba(255,255,255,.12)) !important;
    opacity: .75 !important;
}

.public-site .marketing-hero-media::after {
    inset: .7rem !important;
    border-radius: 18px !important;
    border-color: rgba(255,255,255,.14) !important;
}

.public-site .marketing-hero-media img {
    border-radius: 18px !important;
    filter: drop-shadow(0 26px 38px rgba(0,0,0,.4)) !important;
}

.public-site .marketing-hero-controls {
    padding: 7px !important;
    background: rgba(2, 8, 23, .42) !important;
}

.public-site .marketing-hero-dots button.active {
    background: #5eead4 !important;
}

@media (max-width: 900px) {
    .public-site .marketing-hero-slide {
        padding: 26px 20px 92px !important;
        gap: 24px !important;
    }

    .public-site .marketing-hero-media {
        padding: .5rem !important;
    }
}

/* ULTIMO ACABADO: showcase interactivo profesional */
.public-site .marketing-hero-carousel {
    --hero-accent: #5eead4;
    --hero-accent-2: #38bdf8;
    position: relative !important;
    isolation: isolate;
    min-height: clamp(540px, 48vw, 730px) !important;
    margin-top: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 34px !important;
    background:
        linear-gradient(135deg, rgba(5, 18, 34, .98), rgba(7, 32, 48, .96) 56%, rgba(5, 16, 30, .98)) !important;
    box-shadow:
        0 34px 86px rgba(2, 8, 23, .34),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.public-site .marketing-hero-carousel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,.08), transparent 26%, transparent 74%, rgba(255,255,255,.04)),
        radial-gradient(circle at 78% 28%, rgba(94, 234, 212, .14), transparent 26rem);
    pointer-events: none;
}

.public-site .marketing-hero-track {
    position: relative !important;
    z-index: 1 !important;
    transition: transform 3.6s cubic-bezier(.18, .76, .16, 1) !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(310px, .72fr) minmax(420px, 1.28fr) !important;
    gap: clamp(32px, 5vw, 82px) !important;
    padding: clamp(42px, 5.5vw, 82px) clamp(34px, 5vw, 80px) clamp(76px, 7vw, 104px) !important;
}

.public-site .marketing-hero-slide::before {
    filter: blur(20px) saturate(1.08) brightness(.72) !important;
    opacity: .32 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        linear-gradient(90deg, rgba(5,18,34,.98) 0%, rgba(5,18,34,.82) 38%, rgba(5,18,34,.2) 72%, rgba(5,18,34,.52) 100%),
        radial-gradient(circle at 78% 34%, rgba(94,234,212,.15), transparent 25rem) !important;
}

.public-site .marketing-hero-copy {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    gap: 16px !important;
    max-width: 38rem !important;
    padding: 0 !important;
}

.public-site .marketing-hero-copy::before {
    position: static !important;
    width: 72px !important;
    height: 5px !important;
    background: linear-gradient(90deg, var(--hero-accent), var(--hero-accent-2)) !important;
}

.public-site .marketing-hero-copy::after {
    content: "";
    position: absolute;
    left: -24px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(94,234,212,.58), transparent);
}

.public-site .marketing-hero-copy span {
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(94, 234, 212, .28) !important;
    background: rgba(20, 184, 166, .14) !important;
    color: #ccfbf1 !important;
    font-size: .73rem !important;
    letter-spacing: 0 !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 36rem !important;
    font-size: clamp(1.9rem, 2.75vw, 3.15rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
}

.public-site .marketing-hero-copy p {
    max-width: 34rem !important;
    color: rgba(226, 232, 240, .88) !important;
    font-size: clamp(.98rem, 1.08vw, 1.1rem) !important;
    line-height: 1.72 !important;
    font-weight: 600 !important;
}

.public-site .marketing-hero-button {
    min-height: 48px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, #ffffff, #ccfbf1) !important;
    color: #06111f !important;
    box-shadow:
        0 18px 36px rgba(2,8,23,.28),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.public-site .marketing-hero-media {
    position: relative !important;
    width: 100% !important;
    height: clamp(380px, 38vw, 590px) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
    width: min(100%, 480px) !important;
    height: clamp(440px, 43vw, 640px) !important;
}

.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 560px) !important;
    height: clamp(400px, 39vw, 580px) !important;
}

.public-site .marketing-hero-media::before {
    content: "";
    position: absolute;
    inset: 4% 2%;
    z-index: 0;
    border-radius: 32px;
    background:
        linear-gradient(135deg, rgba(94,234,212,.32), rgba(56,189,248,.1)),
        rgba(255,255,255,.045);
    transform: rotate(-2deg);
}

.public-site .marketing-hero-media::after {
    content: "";
    position: absolute;
    inset: 8% 7%;
    z-index: 1;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 26px;
    pointer-events: none;
}

.public-site .marketing-hero-media img {
    position: relative;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 22px !important;
    filter: drop-shadow(0 32px 46px rgba(0,0,0,.44)) !important;
}

.public-site .marketing-hero-controls {
    left: clamp(34px, 5vw, 80px) !important;
    bottom: clamp(22px, 3.2vw, 38px) !important;
    width: min(430px, 48%) !important;
    padding: 8px !important;
}

.public-site .marketing-hero-counter {
    position: absolute;
    z-index: 5;
    right: clamp(34px, 5vw, 80px);
    top: clamp(28px, 4vw, 54px);
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: #ffffff;
    font-family: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
}

.public-site .marketing-hero-counter span:first-child {
    font-size: clamp(2rem, 3vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
}

.public-site .marketing-hero-counter b,
.public-site .marketing-hero-counter span:last-child {
    color: rgba(226, 232, 240, .58);
    font-size: 1rem;
    font-weight: 900;
}

.public-site .marketing-hero-thumbs {
    position: absolute;
    z-index: 5;
    right: clamp(34px, 5vw, 80px);
    bottom: clamp(22px, 3.2vw, 38px);
    display: flex;
    gap: 10px;
}

.public-site .marketing-hero-thumbs button {
    width: 70px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background-color: rgba(255,255,255,.08);
    background-position: center;
    background-size: cover;
    cursor: pointer;
    opacity: .62;
    transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
}

.public-site .marketing-hero-thumbs button.active,
.public-site .marketing-hero-thumbs button:hover {
    opacity: 1;
    transform: translateY(-2px);
    border-color: rgba(94,234,212,.72);
}

.public-site .marketing-hero-dots {
    display: none !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr !important;
        padding: 30px 22px 120px !important;
    }

    .public-site .marketing-hero-copy::after {
        content: none;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        width: 100% !important;
        height: clamp(300px, 72vw, 500px) !important;
    }

    .public-site .marketing-hero-counter {
        display: none;
    }

    .public-site .marketing-hero-thumbs {
        display: none;
    }

    .public-site .marketing-hero-controls {
        left: 18px !important;
        width: calc(100% - 36px) !important;
    }
}

/* PRESENTACION FINAL: carrusel premium sobrio */
.public-site .marketing-hero-carousel {
    min-height: clamp(520px, 44vw, 680px) !important;
    margin-top: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 32px !important;
    background:
        radial-gradient(circle at 72% 32%, rgba(20, 184, 166, .2), transparent 24rem),
        linear-gradient(135deg, #07111f 0%, #092338 52%, #071827 100%) !important;
    box-shadow:
        0 32px 78px rgba(2, 8, 23, .34),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr) !important;
    gap: clamp(28px, 4.6vw, 70px) !important;
    align-items: center !important;
    padding: clamp(38px, 5vw, 72px) !important;
}

.public-site .marketing-hero-slide::before {
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, .94), rgba(7, 17, 31, .78), rgba(7, 17, 31, .34)),
        var(--hero-bg) !important;
    filter: blur(18px) saturate(1.05) brightness(.72) !important;
    transform: scale(1.08) !important;
    opacity: .32 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        linear-gradient(90deg, rgba(7, 17, 31, .96) 0%, rgba(7, 17, 31, .76) 48%, rgba(7, 17, 31, .16) 100%),
        radial-gradient(circle at 80% 38%, rgba(94,234,212,.18), transparent 22rem) !important;
}

.public-site .marketing-hero-copy {
    max-width: 36rem !important;
    gap: 14px !important;
}

.public-site .marketing-hero-copy::before {
    width: 5rem !important;
    height: 4px !important;
}

.public-site .marketing-hero-copy::after {
    content: none !important;
}

.public-site .marketing-hero-copy span {
    min-height: 32px !important;
    padding: 0 12px !important;
    background: rgba(94, 234, 212, .13) !important;
    border: 1px solid rgba(94, 234, 212, .28) !important;
    color: #ccfbf1 !important;
    font-size: .72rem !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 34rem !important;
    font-size: clamp(1.9rem, 2.55vw, 2.9rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

.public-site .marketing-hero-copy p {
    max-width: 32rem !important;
    color: rgba(226, 232, 240, .86) !important;
    font-size: clamp(.98rem, 1.06vw, 1.08rem) !important;
    line-height: 1.72 !important;
}

.public-site .marketing-hero-button {
    min-height: 48px !important;
    padding: 0 22px !important;
    background: #ffffff !important;
    color: #07111f !important;
    box-shadow: 0 18px 36px rgba(2, 8, 23, .28) !important;
}

.public-site .marketing-hero-media {
    position: relative !important;
    width: min(100%, 620px) !important;
    height: clamp(350px, 34vw, 540px) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
    width: min(100%, 440px) !important;
    height: clamp(420px, 42vw, 620px) !important;
}

.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 520px) !important;
    height: clamp(380px, 38vw, 560px) !important;
}

.public-site .marketing-hero-media::before {
    content: "";
    position: absolute;
    inset: 8% 0 2%;
    z-index: 0;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(94, 234, 212, .18), transparent 64%);
    transform: none !important;
}

.public-site .marketing-hero-media::after {
    content: none !important;
}

.public-site .marketing-hero-media img {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 34px 46px rgba(0, 0, 0, .46)) !important;
}

.public-site .marketing-hero-counter,
.public-site .marketing-hero-thumbs,
.public-site .marketing-hero-dots {
    display: none !important;
}

.public-site .marketing-hero-controls {
    left: clamp(38px, 5vw, 72px) !important;
    bottom: clamp(24px, 3.5vw, 42px) !important;
    width: min(390px, 44%) !important;
    padding: 7px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: rgba(2,8,23,.42) !important;
}

.public-site .marketing-hero-controls button {
    width: 40px !important;
    height: 40px !important;
}

@media (max-width: 900px) {
    .public-site .marketing-hero-carousel {
        min-height: 0 !important;
        border-radius: 24px !important;
    }

    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr !important;
        padding: 26px 18px 92px !important;
        gap: 22px !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        width: 100% !important;
        height: clamp(300px, 76vw, 500px) !important;
    }

    .public-site .marketing-hero-controls {
        left: 18px !important;
        bottom: 18px !important;
        width: calc(100% - 36px) !important;
    }
}

@media (max-width: 900px) {
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide {
        grid-template-columns: 1fr !important;
    }

    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-portrait figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-square figure,
    .public-site .home-products-carousel .home-product-slide.marketing-slide.is-wide figure {
        width: 100% !important;
        height: clamp(300px, 82vw, 560px) !important;
    }
}

/* CARRUSEL PRINCIPAL PRO: escaparate visual editable */
.public-site .marketing-hero-carousel {
    position: relative !important;
    min-height: clamp(560px, 44vw, 700px) !important;
    margin: clamp(20px, 3vw, 34px) 0 clamp(30px, 4vw, 54px) !important;
    border: 0 !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, rgba(2, 8, 23, .98) 0%, rgba(5, 35, 52, .96) 45%, rgba(4, 16, 34, .99) 100%) !important;
    box-shadow:
        0 34px 90px rgba(2, 8, 23, .34),
        0 0 0 1px rgba(125, 211, 252, .12) !important;
    isolation: isolate !important;
    cursor: grab !important;
    user-select: none !important;
    touch-action: pan-y !important;
}

.public-site .marketing-hero-carousel.is-dragging {
    cursor: grabbing !important;
}

.public-site .marketing-hero-carousel.is-swiping .marketing-hero-button {
    pointer-events: none !important;
}

.public-site .marketing-hero-carousel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    background:
        linear-gradient(120deg, rgba(45, 212, 191, .18), transparent 24%),
        linear-gradient(300deg, rgba(56, 189, 248, .16), transparent 30%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 96px) !important;
    opacity: .78 !important;
    pointer-events: none !important;
}

.public-site .marketing-hero-carousel::after {
    content: "" !important;
    position: absolute !important;
    inset: 14px !important;
    z-index: 0 !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 24px !important;
    pointer-events: none !important;
}

.public-site .marketing-hero-track {
    position: relative !important;
    z-index: 1 !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(390px, 1.12fr) minmax(320px, .88fr) !important;
    gap: clamp(28px, 5vw, 76px) !important;
    align-items: center !important;
    min-height: inherit !important;
    padding: clamp(42px, 5vw, 76px) clamp(34px, 5.6vw, 86px) clamp(88px, 6vw, 102px) !important;
}

.public-site .marketing-hero-slide::before {
    background-image:
        linear-gradient(90deg, rgba(2, 8, 23, .9), rgba(2, 8, 23, .74)),
        var(--hero-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(28px) saturate(1.18) brightness(.72) !important;
    transform: scale(1.14) !important;
    opacity: .35 !important;
}

.public-site .marketing-hero-slide::after {
    background:
        radial-gradient(circle at 28% 50%, rgba(45, 212, 191, .2), transparent 22rem),
        radial-gradient(circle at 78% 22%, rgba(59, 130, 246, .2), transparent 18rem),
        linear-gradient(90deg, rgba(2,8,23,.14), rgba(2,8,23,.62)) !important;
}

.public-site .marketing-hero-media {
    order: 2 !important;
    justify-self: center !important;
    width: min(100%, 680px) !important;
    height: clamp(390px, 36vw, 560px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 580px) !important;
    height: clamp(420px, 38vw, 590px) !important;
}

.public-site .marketing-hero-media::before {
    content: none !important;
}

.public-site .marketing-hero-media::after {
    content: none !important;
    position: absolute !important;
    inset: auto 24px 20px 24px !important;
    z-index: 0 !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: rgba(45, 212, 191, .28) !important;
    filter: blur(28px) !important;
}

.public-site .marketing-hero-media img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 0 !important;
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, .9))
        drop-shadow(0 0 8px rgba(94, 234, 212, .62))
        drop-shadow(0 18px 32px rgba(0, 0, 0, .42)) !important;
    pointer-events: none !important;
}

.public-site .marketing-hero-copy {
    order: 1 !important;
    position: relative !important;
    max-width: 35rem !important;
    gap: 15px !important;
    padding: clamp(24px, 2.6vw, 34px) !important;
    border: 1.5px solid rgba(94, 234, 212, .56) !important;
    border-left: 0 !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, .58), rgba(8, 47, 73, .28)) !important;
    box-shadow:
        0 24px 54px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 0 6px rgba(94, 234, 212, .045) !important;
    backdrop-filter: blur(14px) !important;
}

.public-site .marketing-hero-copy::before {
    content: "" !important;
    position: absolute !important;
    inset: -1.5px !important;
    z-index: -1 !important;
    width: auto !important;
    height: auto !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(94, 234, 212, .75), rgba(56, 189, 248, .28), rgba(34, 197, 94, .52)) !important;
    box-shadow: 0 0 24px rgba(45, 212, 191, .2) !important;
    transform: none !important;
}

.public-site .marketing-hero-copy::after {
    content: none !important;
    position: absolute !important;
    inset: -20px -14px -20px 10px !important;
    z-index: -1 !important;
    border-radius: 24px !important;
    background: linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
    opacity: .55 !important;
}

.public-site .marketing-hero-copy span {
    min-height: 31px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(94, 234, 212, .42) !important;
    border-radius: 999px !important;
    background: rgba(13, 148, 136, .16) !important;
    color: #a7f3d0 !important;
    font-family: "Manrope", "Poppins", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 33rem !important;
    color: #ffffff !important;
    font-family: "Manrope", "Poppins", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(1.7rem, 2.25vw, 2.55rem) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-wrap: balance !important;
    text-shadow: 0 16px 36px rgba(0,0,0,.3) !important;
}

.public-site .marketing-hero-copy p {
    max-width: 31rem !important;
    color: rgba(226, 232, 240, .88) !important;
    font-family: "Manrope", "Poppins", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(.96rem, 1.02vw, 1.08rem) !important;
    font-weight: 650 !important;
    line-height: 1.72 !important;
}

.public-site .marketing-hero-button {
    width: fit-content !important;
    min-height: 48px !important;
    margin-top: 8px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #5eead4, #22c55e) !important;
    color: #03221f !important;
    font-family: "Manrope", "Poppins", ui-sans-serif, system-ui, sans-serif !important;
    font-size: .92rem !important;
    font-weight: 950 !important;
    box-shadow: 0 18px 34px rgba(34, 197, 94, .22) !important;
}

.public-site .marketing-hero-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 44px rgba(34, 197, 94, .3) !important;
}

.public-site .marketing-hero-controls {
    z-index: 6 !important;
    left: clamp(34px, 5.6vw, 86px) !important;
    right: clamp(34px, 5.6vw, 86px) !important;
    bottom: clamp(26px, 3vw, 38px) !important;
    width: auto !important;
    max-width: 520px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(120px, 1fr) 46px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.public-site .marketing-hero-controls button {
    width: 46px !important;
    height: 46px !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, .76) !important;
    color: #ecfeff !important;
    font-size: 1.55rem !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.26) !important;
}

.public-site .marketing-hero-progress {
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.16) !important;
    overflow: hidden !important;
}

.public-site .marketing-hero-progress span {
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #5eead4, #38bdf8, #22c55e) !important;
    box-shadow: 0 0 18px rgba(94, 234, 212, .62) !important;
}

.public-site .marketing-hero-counter {
    display: flex !important;
    z-index: 6 !important;
    right: clamp(34px, 5.6vw, 86px) !important;
    bottom: clamp(29px, 3.1vw, 42px) !important;
    gap: 8px !important;
    align-items: baseline !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.public-site .marketing-hero-counter span:first-child {
    color: #ffffff !important;
    font-size: 1.08rem !important;
}

.public-site .marketing-hero-counter b,
.public-site .marketing-hero-counter span:last-child {
    color: rgba(226, 232, 240, .52) !important;
    font-size: .9rem !important;
}

.public-site .marketing-hero-dots {
    display: flex !important;
    position: absolute !important;
    z-index: 6 !important;
    right: clamp(34px, 5.6vw, 86px) !important;
    top: clamp(28px, 3.2vw, 44px) !important;
    gap: 9px !important;
}

.public-site .marketing-hero-dots button {
    width: 9px !important;
    height: 9px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.38) !important;
    cursor: pointer !important;
    transition: width .24s ease, background .24s ease, transform .24s ease !important;
}

.public-site .marketing-hero-dots button.active {
    width: 34px !important;
    background: #5eead4 !important;
    box-shadow: 0 0 18px rgba(94, 234, 212, .55) !important;
}

.public-site .marketing-hero-thumbs {
    display: none !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-carousel {
        min-height: 0 !important;
        border-radius: 26px !important;
    }

    .public-site .marketing-hero-carousel::after {
        inset: 10px !important;
        border-radius: 18px !important;
    }

    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr !important;
        padding: 28px 18px 98px !important;
        gap: 24px !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        order: 2 !important;
        width: 100% !important;
        height: clamp(300px, 74vw, 500px) !important;
        border-radius: 22px !important;
    }

    .public-site .marketing-hero-copy {
        order: 1 !important;
        max-width: none !important;
        padding: 22px !important;
        border-left: 0 !important;
    }

    .public-site .marketing-hero-copy::before {
        inset: -1.5px !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
    }

    .public-site .marketing-hero-copy h2 {
        font-size: clamp(1.55rem, 7vw, 2.25rem) !important;
    }

    .public-site .marketing-hero-controls {
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
        max-width: none !important;
        grid-template-columns: 42px minmax(90px, 1fr) 42px !important;
    }

    .public-site .marketing-hero-controls button {
        width: 42px !important;
        height: 42px !important;
    }

    .public-site .marketing-hero-counter {
        display: none !important;
    }

    .public-site .marketing-hero-dots {
        top: 22px !important;
        right: 22px !important;
    }
}

@media (max-width: 560px) {
    .public-site .marketing-hero-slide {
        padding: 22px 14px 92px !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        height: clamp(270px, 82vw, 410px) !important;
        padding: 10px !important;
    }

    .public-site .marketing-hero-copy {
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .public-site .marketing-hero-copy::before {
        width: auto !important;
        height: auto !important;
    }

    .public-site .marketing-hero-copy p {
        font-size: .94rem !important;
        line-height: 1.58 !important;
    }
}

/* Carrusel automatico sin controles visibles */
.public-site .marketing-hero-controls,
.public-site .marketing-hero-counter,
.public-site .marketing-hero-dots,
.public-site .marketing-hero-thumbs {
    display: none !important;
}

.public-site .marketing-hero-slide {
    padding-bottom: clamp(42px, 5vw, 76px) !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-slide {
        padding-bottom: 28px !important;
    }
}

/* Optimizacion de rendimiento del carrusel principal */
.public-site .marketing-hero-carousel {
    contain: layout paint !important;
}

.public-site .marketing-hero-track {
    transform: translateX(calc(var(--hero-index, 0) * -100%)) translateZ(0) !important;
    transition: transform 1.15s cubic-bezier(.22, .72, .22, 1) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

.public-site .marketing-hero-slide {
    backface-visibility: hidden !important;
}

.public-site .marketing-hero-slide::before {
    filter: blur(10px) saturate(1.04) brightness(.78) !important;
    transform: scale(1.03) !important;
    opacity: .22 !important;
}

.public-site .marketing-hero-copy {
    box-shadow:
        0 16px 34px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 0 0 4px rgba(94, 234, 212, .035) !important;
    backdrop-filter: blur(5px) !important;
}

.public-site .marketing-hero-copy::before {
    box-shadow: 0 0 12px rgba(45, 212, 191, .14) !important;
}

.public-site .marketing-hero-media::after {
    filter: blur(12px) !important;
}

.public-site .marketing-hero-media img {
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, .82))
        drop-shadow(0 0 4px rgba(94, 234, 212, .42))
        drop-shadow(0 12px 22px rgba(0, 0, 0, .32)) !important;
}

/* Formato final del slider principal */
.public-site .marketing-hero-carousel {
    min-height: clamp(500px, 38vw, 620px) !important;
    border-radius: 30px !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(300px, .76fr) minmax(500px, 1.24fr) !important;
    gap: clamp(30px, 4.4vw, 70px) !important;
    padding: clamp(34px, 4vw, 58px) clamp(46px, 5.8vw, 86px) !important;
    overflow: visible !important;
}

.public-site .marketing-hero-copy {
    align-self: center !important;
    max-width: 34rem !important;
    padding: clamp(22px, 2.6vw, 32px) !important;
}

.public-site .marketing-hero-copy h2 {
    max-width: 30rem !important;
    font-size: clamp(1.55rem, 2vw, 2.25rem) !important;
}

.public-site .marketing-hero-copy p {
    max-width: 29rem !important;
}

.public-site .marketing-hero-media,
.public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    align-self: center !important;
    justify-self: end !important;
    width: min(100%, 760px) !important;
    height: clamp(430px, 38vw, 620px) !important;
    overflow: visible !important;
}

.public-site .marketing-hero-media img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-carousel {
        min-height: 0 !important;
    }

    .public-site .marketing-hero-slide {
        grid-template-columns: 1fr !important;
        padding: 24px 18px 34px !important;
        gap: 20px !important;
        overflow: visible !important;
    }

    .public-site .marketing-hero-copy {
        max-width: none !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media {
        justify-self: center !important;
        width: 100% !important;
        height: clamp(350px, 84vw, 560px) !important;
        overflow: visible !important;
    }
}

/* Correccion: las imagenes del slider siempre por encima del fondo */
.public-site .marketing-hero-slide {
    isolation: isolate !important;
}

.public-site .marketing-hero-slide::before,
.public-site .marketing-hero-slide::after {
    z-index: 0 !important;
    pointer-events: none !important;
}

.public-site .marketing-hero-copy {
    position: relative !important;
    z-index: 3 !important;
}

.public-site .marketing-hero-media,
.public-site .marketing-hero-slide.is-portrait .marketing-hero-media,
.public-site .marketing-hero-slide.is-square .marketing-hero-media,
.public-site .marketing-hero-slide.is-wide .marketing-hero-media {
    position: relative !important;
    z-index: 4 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.public-site .marketing-hero-media::before,
.public-site .marketing-hero-media::after {
    content: none !important;
    display: none !important;
}

.public-site .marketing-hero-media img {
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
}

/* Slider limpio: ningun fondo interno debe tapar las imagenes */
.public-site .marketing-hero-slide::before,
.public-site .marketing-hero-slide::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.public-site .marketing-hero-carousel::after {
    content: none !important;
    display: none !important;
}

.public-site .marketing-hero-slide {
    grid-template-columns: minmax(300px, .78fr) minmax(520px, 1.22fr) !important;
    align-items: center !important;
    overflow: hidden !important;
}

.public-site .marketing-hero-media,
.public-site .marketing-hero-slide.is-wide .marketing-hero-media {
    width: min(100%, 760px) !important;
    height: clamp(430px, 38vw, 620px) !important;
    justify-self: end !important;
}

.public-site .marketing-hero-slide.is-square .marketing-hero-media {
    width: min(100%, 640px) !important;
    height: clamp(420px, 36vw, 580px) !important;
    justify-self: end !important;
}

.public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
    width: min(100%, 500px) !important;
    height: clamp(470px, 42vw, 680px) !important;
    justify-self: center !important;
}

.public-site .marketing-hero-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 0 !important;
}

@media (max-width: 980px) {
    .public-site .marketing-hero-slide {
        overflow: visible !important;
    }

    .public-site .marketing-hero-media,
    .public-site .marketing-hero-slide.is-wide .marketing-hero-media,
    .public-site .marketing-hero-slide.is-square .marketing-hero-media,
    .public-site .marketing-hero-slide.is-portrait .marketing-hero-media {
        width: 100% !important;
        height: clamp(330px, 82vw, 560px) !important;
        justify-self: center !important;
    }
}

/* Adaptacion AdminLTE para el administrable */
.adminlte-area {
    --lte-sidebar-width: 270px;
    background: #f4f6f9 !important;
}

.adminlte-area .app-wrapper {
    min-height: 100vh;
}

.adminlte-area .app-header {
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.adminlte-area .app-sidebar {
    background: #111827 !important;
}

.adminlte-area .sidebar-brand {
    min-height: 64px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.adminlte-area .brand-link {
    color: #fff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-weight: 900;
    text-decoration: none;
}

.adminlte-area .sidebar-menu .nav-link {
    min-height: 44px;
    margin: 4px 10px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .75);
    font-weight: 800;
}

.adminlte-area .sidebar-menu .nav-link:hover,
.adminlte-area .sidebar-menu .nav-link.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, .28), rgba(20, 184, 166, .2));
    color: #fff;
}

.adminlte-area .nav-icon {
    display: inline-grid;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: #a7f3d0;
    font-size: .78rem;
    font-weight: 950;
}

.adminlte-area .adminlte-menu-icon {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 950;
}

.adminlte-area .app-content {
    padding: 22px;
}

.adminlte-area .admin-page {
    max-width: 1600px;
}

.adminlte-area .section-head,
.adminlte-area .admin-store-dashboard article,
.adminlte-area .admin-config-panel,
.adminlte-area .admin-category-filter,
.adminlte-area .admin-product-card-wrap,
.adminlte-area .panel,
.adminlte-area .form-panel,
.adminlte-area .notice {
    border-color: rgba(15, 23, 42, .08);
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.adminlte-area .section-head {
    margin-top: 0;
    border-radius: 18px;
}

.adminlte-area .admin-store-dashboard {
    margin-bottom: 4px;
}

.adminlte-area .admin-config-panel > summary {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.adminlte-area .admin-workspace {
    grid-template-columns: 270px minmax(0, 1fr);
}

.adminlte-area .admin-sidebar {
    top: 86px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.adminlte-area .admin-crud-table {
    box-shadow: none;
}

@media (max-width: 991px) {
    .adminlte-area .app-content {
        padding: 16px;
    }

    .adminlte-area .admin-workspace {
        grid-template-columns: 1fr;
    }
}

/* AdminLTE acabado profesional */
.adminlte-area {
    color: #1f2937;
    font-family: "Manrope", "Inter", system-ui, sans-serif;
}

.adminlte-area .app-main {
    background:
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.adminlte-area .app-header {
    min-height: 62px;
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(12px);
}

.adminlte-area .navbar-nav .nav-link {
    color: #475569;
    font-weight: 850;
}

.adminlte-area .admin-top-title {
    color: #0f172a !important;
    font-family: "Poppins", "Manrope", sans-serif;
    font-weight: 900 !important;
}

.adminlte-area .admin-top-link,
.adminlte-area .admin-logout-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 0 14px !important;
    border-radius: 999px;
    background: #f1f5f9;
}

.adminlte-area .admin-logout-link {
    background: #fee2e2;
    color: #991b1b !important;
}

.adminlte-area .app-sidebar {
    background:
        linear-gradient(180deg, #06111f 0%, #0f172a 52%, #08111f 100%) !important;
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 18px 0 38px rgba(15, 23, 42, .16) !important;
}

.adminlte-area .sidebar-brand {
    min-height: 74px;
    padding: 0 18px;
}

.adminlte-area .brand-link {
    display: flex !important;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.adminlte-area .admin-brand-mark,
.adminlte-area .admin-user-panel > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #5eead4, #38bdf8);
    color: #031827;
    font-size: .86rem;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(45, 212, 191, .2);
}

.adminlte-area .brand-text {
    color: #f8fafc;
    font-size: 1.02rem;
    font-weight: 950 !important;
    letter-spacing: 0;
}

.adminlte-area .admin-user-panel {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 16px 14px 18px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
}

.adminlte-area .admin-user-panel > span {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    box-shadow: none;
}

.adminlte-area .admin-user-panel div {
    display: grid;
    min-width: 0;
}

.adminlte-area .admin-user-panel strong {
    overflow: hidden;
    color: #ffffff;
    font-size: .9rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adminlte-area .admin-user-panel small {
    color: rgba(226,232,240,.68);
    font-size: .78rem;
    font-weight: 800;
}

.adminlte-area .nav-header {
    margin: 12px 18px 6px;
    color: rgba(226, 232, 240, .44);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.adminlte-area .sidebar-menu .nav-link {
    min-height: 46px;
    margin: 5px 12px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 14px;
}

.adminlte-area .sidebar-menu .nav-link p {
    margin: 0;
    font-size: .91rem;
    letter-spacing: 0;
}

.adminlte-area .sidebar-menu .nav-link.active {
    border-color: rgba(94, 234, 212, .2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.adminlte-area .nav-icon {
    background: rgba(255,255,255,.09);
}

.adminlte-area .nav-icon svg,
.adminlte-area .adminlte-menu-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.adminlte-area .nav-icon svg path:first-child:last-child {
    fill: currentColor;
    stroke: none;
}

.adminlte-area .section-head {
    padding: 22px 24px;
    border: 0;
    background:
        linear-gradient(135deg, #ffffff, #f8fafc) !important;
}

.adminlte-area .section-head h1 {
    margin: 2px 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    font-weight: 900;
}

.adminlte-area .eyebrow {
    color: #0f766e;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.adminlte-area .admin-store-dashboard article {
    border: 0;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.adminlte-area .admin-store-dashboard strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
}

.adminlte-area .admin-sidebar {
    border: 0;
    border-radius: 22px;
}

.adminlte-area .admin-sidebar button {
    min-height: 48px;
    background: #ffffff;
}

.adminlte-area .admin-config-panel,
.adminlte-area .admin-product-card-wrap,
.adminlte-area .admin-category-filter {
    border: 0;
    border-radius: 22px;
}

.adminlte-area .admin-config-panel > summary {
    padding: 20px 22px;
}

.adminlte-area .admin-config-panel > summary span {
    color: #0f172a;
}

.adminlte-area .admin-crud-overview,
.adminlte-area .form-panel {
    background: #ffffff;
}

.adminlte-area input,
.adminlte-area textarea,
.adminlte-area select {
    border-color: #dbe3ef;
    border-radius: 12px;
    background: #f8fafc;
}

.adminlte-area input:focus,
.adminlte-area textarea:focus,
.adminlte-area select:focus {
    outline: 3px solid rgba(14, 165, 233, .14);
    border-color: #38bdf8;
    background: #fff;
}

.adminlte-area .btn {
    border-radius: 999px;
    font-weight: 950;
}

.adminlte-area .btn.primary,
.adminlte-area .btn.dark {
    border: 0;
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    color: #fff;
    box-shadow: 0 14px 26px rgba(14, 165, 233, .16);
}

.adminlte-area .admin-crud-table {
    border: 0;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.adminlte-area .admin-crud-table th {
    background: #eef6ff;
}

.adminlte-area .app-footer {
    border-top: 1px solid rgba(15, 23, 42, .08);
    color: #64748b;
    font-weight: 800;
}

.adminlte-area .sidebar-overlay,
.adminlte-area .skip-links,
.adminlte-area .live-region {
    display: none !important;
}

.adminlte-area.sidebar-collapse .app-sidebar {
    transform: translateX(-100%);
}

.adminlte-area.sidebar-collapse .app-main,
.adminlte-area.sidebar-collapse .app-header,
.adminlte-area.sidebar-collapse .app-footer {
    margin-left: 0 !important;
}

@media (min-width: 992px) {
    .adminlte-area .app-main,
    .adminlte-area .app-header,
    .adminlte-area .app-footer {
        transition: margin-left .2s ease;
    }

    .adminlte-area .app-sidebar {
        transition: transform .2s ease;
    }
}

/* Login interactivo tipo marketplace */
body.admin-area.admin-only:not(.adminlte-area) {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 17% 18%, rgba(56, 189, 248, .16), transparent 20rem),
        radial-gradient(circle at 82% 76%, rgba(45, 212, 191, .18), transparent 23rem),
        linear-gradient(135deg, #07111f 0%, #0f172a 52%, #052f33 100%) !important;
}

.admin-login-v3 {
    min-height: 100vh !important;
    padding: clamp(18px, 3vw, 36px) !important;
    place-items: center !important;
    background: transparent !important;
}

.admin-login-v3 .admin-login-frame {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(330px, .94fr) minmax(380px, 430px) !important;
    width: min(1060px, 100%) !important;
    min-height: clamp(560px, 72vh, 660px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 30px !important;
    background: rgba(15, 23, 42, .72) !important;
    box-shadow: 0 34px 90px rgba(2, 6, 23, .52) !important;
    backdrop-filter: blur(18px);
}

.admin-login-v3 .admin-login-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(94, 234, 212, .2), transparent 25%, transparent 75%, rgba(14, 165, 233, .18)),
        linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 34%);
    opacity: .75;
}

.admin-login-v3 .admin-login-image-panel {
    position: relative;
    display: grid;
    min-height: 100%;
    margin: 0;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(8, 47, 73, .96), rgba(15, 118, 110, .92) 56%, rgba(2, 8, 23, .96)) !important;
}

.admin-login-v3 .admin-login-image-panel::before {
    content: "";
    position: absolute;
    inset: 28px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 26px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .14), transparent 13rem),
        linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.admin-login-v3 .admin-login-image-panel::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(94, 234, 212, .15);
    filter: blur(26px);
    transform: translate(40px, 38px);
}

.admin-login-v3 .admin-login-image-panel img,
.admin-login-v3 .admin-login-image-panel figcaption {
    position: relative;
    z-index: 2;
}

.admin-login-v3 .admin-login-image-panel img {
    width: min(72%, 390px);
    height: min(72%, 390px);
    max-height: 430px;
    padding: 24px;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 30px;
    background: rgba(2, 8, 23, .22);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .34);
    transition: transform .28s ease, box-shadow .28s ease;
}

.admin-login-v3 .admin-login-image-panel:hover img {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 34px 70px rgba(0, 0, 0, .42);
}

.admin-login-v3 .admin-login-image-panel figcaption {
    display: grid;
    width: 150px;
    height: 150px;
    place-items: center;
    border-radius: 30px;
    background: #ffffff;
    color: #0f766e;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 2rem;
    font-weight: 950;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
}

.admin-login-v3 .admin-login-card {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 18px;
    height: 100%;
    padding: clamp(36px, 5vw, 58px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96)) !important;
    box-shadow: none !important;
}

.admin-login-v3 .admin-login-card::before,
.admin-login-v3 .admin-login-card::after {
    content: none !important;
}

.admin-login-v3 .admin-login-logo {
    display: grid !important;
    width: 74px !important;
    height: 74px !important;
    margin: 0 auto 4px !important;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .11) !important;
}

.admin-login-v3 .admin-login-logo img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.admin-login-v3 .admin-login-logo span {
    color: #0f766e;
    font-family: "Poppins", "Manrope", sans-serif;
    font-weight: 950;
}

.admin-login-v3 .login-card-head {
    gap: 7px;
    margin: 0 0 8px;
    text-align: center;
}

.admin-login-v3 .login-card-head span {
    margin: 0 auto;
    padding: 6px 12px;
    border: 1px solid rgba(15, 118, 110, .12);
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-login-v3 .login-card-head h2 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.7rem, 2.2vw, 2.05rem);
    font-weight: 900;
    letter-spacing: 0;
}

.admin-login-v3 .admin-login-card label {
    display: grid;
    gap: 9px;
    color: #1e293b;
    font-size: .88rem;
    font-weight: 900;
}

.admin-login-v3 .login-input-wrap {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    min-height: 58px;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 13px 30px rgba(15, 23, 42, .055);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.admin-login-v3 .login-user-wrap,
.admin-login-v3 .login-password-wrap {
    grid-template-columns: 50px minmax(0, 1fr) 46px;
}

.admin-login-v3 .login-input-wrap.is-focused,
.admin-login-v3 .login-input-wrap:focus-within {
    border-color: #0ea5e9;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13), 0 18px 36px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.admin-login-v3 .login-input-wrap b {
    display: grid;
    width: 50px;
    height: 100%;
    place-items: center;
    color: #0f766e;
    background: linear-gradient(135deg, #ecfeff, #f0fdfa);
}

.admin-login-v3 .login-input-wrap b svg,
.admin-login-v3 .login-clear-toggle svg,
.admin-login-v3 .login-password-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.admin-login-v3 .login-input-wrap input {
    width: 100%;
    min-height: 58px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: .98rem;
    font-weight: 750;
}

.admin-login-v3 .login-input-wrap input:focus {
    outline: 0;
}

.admin-login-v3 .login-input-wrap input::placeholder {
    color: #94a3b8;
    font-weight: 650;
}

.admin-login-v3 .login-clear-toggle,
.admin-login-v3 .login-password-toggle {
    display: grid;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.admin-login-v3 .login-clear-toggle {
    opacity: 0;
    pointer-events: none;
}

.admin-login-v3 .login-input-wrap.has-value .login-clear-toggle {
    opacity: 1;
    pointer-events: auto;
}

.admin-login-v3 .login-clear-toggle:hover,
.admin-login-v3 .login-password-toggle:hover,
.admin-login-v3 .login-password-toggle.is-visible {
    border-color: rgba(15, 118, 110, .2);
    background: #ecfeff;
    color: #0f766e;
    transform: scale(1.04);
}

.admin-login-v3 .notice.danger {
    border: 1px solid rgba(220, 38, 38, .18);
    border-radius: 14px;
    background: #fff1f2;
    color: #be123c;
    font-weight: 850;
}

.admin-login-v3 .login-submit {
    position: relative;
    display: inline-grid;
    min-height: 58px;
    margin-top: 2px;
    place-items: center;
    overflow: hidden;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #0f766e 0%, #0891b2 48%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    font-size: .98rem;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 20px 38px rgba(14, 165, 233, .25);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.admin-login-v3 .login-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
    transform: translateX(-115%);
    transition: transform .55s ease;
}

.admin-login-v3 .login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 46px rgba(14, 165, 233, .31);
    filter: saturate(1.07);
}

.admin-login-v3 .login-submit:hover::before {
    transform: translateX(115%);
}

.admin-login-v3 .login-submit.is-loading {
    cursor: wait;
    opacity: .88;
}

.admin-login-v3 .login-submit.is-loading::after {
    content: "";
    position: absolute;
    right: 20px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .44);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: loginSpin .7s linear infinite;
}

.admin-login-v3 .admin-login-foot {
    justify-content: center;
    margin-top: 0;
    color: #64748b;
    font-size: .82rem;
    font-weight: 850;
    text-align: center;
}

@keyframes loginSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 860px) {
    .admin-login-v3 .admin-login-frame {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        border-radius: 24px !important;
    }

    .admin-login-v3 .admin-login-image-panel {
        min-height: 230px;
    }

    .admin-login-v3 .admin-login-image-panel::before {
        inset: 18px;
        border-radius: 20px;
    }

    .admin-login-v3 .admin-login-image-panel img {
        width: min(54%, 240px);
        height: min(54%, 240px);
        padding: 14px;
        border-radius: 22px;
    }

    .admin-login-v3 .admin-login-card {
        padding: 32px 24px 28px !important;
    }
}

@media (max-width: 520px) {
    .admin-login-v3 {
        padding: 12px !important;
    }

    .admin-login-v3 .admin-login-image-panel {
        min-height: 190px;
    }

    .admin-login-v3 .admin-login-image-panel img {
        width: min(58%, 190px);
        height: min(58%, 190px);
    }

    .admin-login-v3 .admin-login-logo {
        width: 64px !important;
        height: 64px !important;
        border-radius: 18px !important;
    }

    .admin-login-v3 .login-card-head h2 {
        font-size: 1.55rem;
    }

    .admin-login-v3 .login-user-wrap,
    .admin-login-v3 .login-password-wrap {
        grid-template-columns: 46px minmax(0, 1fr) 42px;
    }

    .admin-login-v3 .login-input-wrap b {
        width: 46px;
    }
}

/* Modulo publico de compra */
.public-site .purchase-module {
    display: grid;
    gap: 20px;
    width: min(1180px, calc(100% - 32px));
    margin: clamp(18px, 3vw, 34px) auto clamp(42px, 6vw, 84px);
}

.public-site .purchase-back {
    width: fit-content;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .88);
    font-size: .88rem;
    font-weight: 850;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}

.public-site .purchase-back:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateY(-1px);
}

.public-site .purchase-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(18px, 3vw, 30px);
    align-items: stretch;
}

.public-site .purchase-product,
.public-site .purchase-checkout,
.public-site .purchase-success-card {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .93));
    box-shadow: 0 24px 70px rgba(2, 6, 23, .22);
}

.public-site .purchase-product {
    display: grid;
    grid-template-rows: minmax(320px, 430px) auto;
    overflow: hidden;
}

.public-site .purchase-image {
    position: relative;
    display: grid;
    min-height: 320px;
    margin: 0;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 18%, rgba(94, 234, 212, .24), transparent 17rem),
        linear-gradient(135deg, #082f49, #0f766e 54%, #020817);
}

.public-site .purchase-image::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 22px;
    pointer-events: none;
}

.public-site .purchase-image img {
    position: relative;
    z-index: 1;
    width: min(76%, 460px);
    height: min(76%, 360px);
    object-fit: contain;
    filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .36));
}

.public-site .purchase-image > span {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    padding: 8px 12px;
    border-radius: 999px;
    background: #22c55e;
    color: #052e16;
    font-size: .78rem;
    font-weight: 950;
}

.public-site .purchase-image figcaption {
    position: relative;
    z-index: 1;
    display: grid;
    width: 130px;
    height: 130px;
    place-items: center;
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    color: #0f766e;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 2rem;
    font-weight: 950;
}

.public-site .purchase-product-info {
    display: grid;
    gap: 15px;
    padding: clamp(22px, 3vw, 34px);
}

.public-site .purchase-product-info h1 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.05;
}

.public-site .purchase-product-info p {
    max-width: 720px;
    margin: 0;
    color: #475569;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.65;
}

.public-site .purchase-product-metrics,
.public-site .purchase-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.public-site .purchase-product-metrics article,
.public-site .purchase-summary-grid article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.public-site .purchase-product-metrics small,
.public-site .purchase-summary-grid small {
    color: #64748b;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-site .purchase-product-metrics strong,
.public-site .purchase-summary-grid strong {
    color: #0f172a;
    font-family: "Manrope", sans-serif;
    font-size: .98rem;
    font-weight: 950;
}

.public-site .purchase-product-metrics del {
    color: #94a3b8;
    font-size: .86rem;
    font-weight: 800;
}

.public-site .purchase-checkout {
    display: grid;
    align-content: start;
    gap: 18px;
    padding: clamp(22px, 3vw, 34px);
}

.public-site .purchase-checkout-head {
    display: grid;
    gap: 7px;
}

.public-site .purchase-checkout-head span,
.public-site .purchase-success-card > span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-site .purchase-checkout-head h2,
.public-site .purchase-success-card h1 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 900;
    letter-spacing: 0;
}

.public-site .purchase-checkout-head p,
.public-site .purchase-success-card p {
    margin: 0;
    color: #64748b;
    font-weight: 700;
    line-height: 1.55;
}

.public-site .purchase-form {
    display: grid;
    gap: 14px;
}

.public-site .purchase-form label {
    display: grid;
    gap: 7px;
    color: #1e293b;
    font-size: .86rem;
    font-weight: 900;
}

.public-site .purchase-form input,
.public-site .purchase-form select,
.public-site .purchase-form textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    font-family: "Manrope", sans-serif;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

.public-site .purchase-form textarea {
    min-height: 92px;
    padding-top: 12px;
    resize: vertical;
}

.public-site .purchase-form input:focus,
.public-site .purchase-form select:focus,
.public-site .purchase-form textarea:focus {
    outline: 0;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13);
}

.public-site .purchase-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 12px;
}

.public-site .purchase-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 18px;
    background: linear-gradient(135deg, #f0fdfa, #eff6ff);
}

.public-site .purchase-total span {
    color: #0f766e;
    font-size: .88rem;
    font-weight: 950;
}

.public-site .purchase-total strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
}

.public-site .purchase-submit {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
}

.public-site .purchase-submit:disabled {
    cursor: wait;
    opacity: .75;
}

.public-site .purchase-unavailable {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, .24);
    border-radius: 18px;
    background: #fffbeb;
}

.public-site .purchase-unavailable strong {
    color: #92400e;
    font-family: "Poppins", "Manrope", sans-serif;
}

.public-site .purchase-unavailable p {
    margin: 0;
    color: #78350f;
    font-weight: 700;
}

.public-site .purchase-success {
    display: grid;
    min-height: 520px;
    place-items: center;
}

.public-site .purchase-success-card {
    display: grid;
    gap: 18px;
    width: min(760px, 100%);
    padding: clamp(26px, 4vw, 42px);
    text-align: left;
}

.public-site .purchase-success-card h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.public-site .purchase-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.public-site .purchase-success-actions .btn {
    min-height: 48px;
    border-radius: 999px;
}

@media (max-width: 900px) {
    .public-site .purchase-layout {
        grid-template-columns: 1fr;
    }

    .public-site .purchase-product {
        grid-template-rows: minmax(240px, 320px) auto;
    }
}

@media (max-width: 620px) {
    .public-site .purchase-module {
        width: min(100% - 20px, 1180px);
        margin-top: 12px;
    }

    .public-site .purchase-product,
    .public-site .purchase-checkout,
    .public-site .purchase-success-card {
        border-radius: 20px;
    }

    .public-site .purchase-product-metrics,
    .public-site .purchase-summary-grid,
    .public-site .purchase-form-row {
        grid-template-columns: 1fr;
    }

    .public-site .purchase-image img {
        width: min(82%, 320px);
        height: min(74%, 250px);
    }

    .public-site .purchase-success-actions .btn {
        width: 100%;
    }
}

/* Compra premium: pasos, pagos y resumen */
.public-site .purchase-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.public-site .purchase-safe-note {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid rgba(94, 234, 212, .26);
    border-radius: 999px;
    background: rgba(8, 47, 73, .46);
    color: #dffcf7;
    font-size: .84rem;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.public-site .purchase-safe-note span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, .14);
}

.public-site .purchase-steps,
.public-site .purchase-status-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.public-site .purchase-steps article,
.public-site .purchase-status-line article {
    display: flex;
    min-width: 0;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    color: #64748b;
    font-size: .8rem;
    font-weight: 900;
}

.public-site .purchase-steps b,
.public-site .purchase-status-line b {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .78rem;
}

.public-site .purchase-steps .active,
.public-site .purchase-status-line .active {
    border-color: rgba(14, 165, 233, .2);
    background: #eff6ff;
    color: #075985;
}

.public-site .purchase-status-line .done {
    border-color: rgba(34, 197, 94, .22);
    background: #f0fdf4;
    color: #166534;
}

.public-site .purchase-steps .active b,
.public-site .purchase-status-line .active b {
    background: #0ea5e9;
    color: #ffffff;
}

.public-site .purchase-status-line .done b {
    background: #22c55e;
    color: #ffffff;
}

.public-site .purchase-fieldset,
.public-site .purchase-payment-box {
    display: grid;
    gap: 12px;
}

.public-site .purchase-fieldset > strong,
.public-site .purchase-payment-box > strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: .98rem;
    font-weight: 900;
}

.public-site .purchase-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.public-site .purchase-payment-option {
    position: relative;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px !important;
    align-items: center;
    min-height: 78px;
    padding: 12px !important;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.public-site .purchase-payment-option:hover,
.public-site .purchase-payment-option.is-selected {
    border-color: rgba(15, 118, 110, .32);
    background: linear-gradient(135deg, #ffffff, #f0fdfa);
    box-shadow: 0 18px 34px rgba(15, 118, 110, .1);
    transform: translateY(-1px);
}

.public-site .purchase-payment-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    box-shadow: none;
    pointer-events: none;
}

.public-site .purchase-payment-option .payment-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: #ecfeff;
    color: #0f766e;
    font-size: .76rem;
    font-weight: 950;
}

.public-site .purchase-payment-option.is-selected .payment-icon {
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    color: #ffffff;
}

.public-site .purchase-payment-option span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.public-site .purchase-payment-option span:last-child strong {
    overflow: hidden;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-site .purchase-payment-option span:last-child small {
    color: #64748b;
    font-size: .73rem;
    font-weight: 750;
    line-height: 1.25;
}

.public-site .purchase-order-summary {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.public-site .purchase-order-summary > div {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #edf2f7;
}

.public-site .purchase-order-summary > div:last-child {
    border-bottom: 0;
}

.public-site .purchase-order-summary span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 850;
}

.public-site .purchase-order-summary strong {
    max-width: 58%;
    overflow: hidden;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 950;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-site .purchase-total {
    border-color: rgba(14, 165, 233, .2);
    background:
        linear-gradient(135deg, rgba(15, 118, 110, .1), rgba(14, 165, 233, .12)),
        #ffffff;
}

.public-site .purchase-security {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.public-site .purchase-security span {
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: .76rem;
    font-weight: 850;
}

.public-site .purchase-success-icon {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #22c55e, #0ea5e9);
    color: #ffffff;
    box-shadow: 0 20px 40px rgba(34, 197, 94, .22);
}

.public-site .purchase-success-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.public-site .purchase-next-step {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 16px;
    background: #eff6ff;
}

.public-site .purchase-next-step strong {
    color: #075985;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: .92rem;
}

.public-site .purchase-next-step span {
    color: #334155;
    font-size: .88rem;
    font-weight: 750;
}

@media (max-width: 700px) {
    .public-site .purchase-topline {
        align-items: stretch;
        flex-direction: column;
    }

    .public-site .purchase-safe-note,
    .public-site .purchase-back {
        justify-content: center;
        width: 100%;
    }

    .public-site .purchase-payment-grid,
    .public-site .purchase-steps,
    .public-site .purchase-status-line {
        grid-template-columns: 1fr;
    }

    .public-site .purchase-order-summary > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .public-site .purchase-order-summary strong {
        max-width: 100%;
        text-align: left;
        white-space: normal;
    }
}

/* Login y cuenta de cliente */
.public-site .customer-auth-page,
.public-site .customer-account-page {
    width: min(1180px, calc(100% - 32px));
    margin: clamp(20px, 4vw, 46px) auto clamp(46px, 7vw, 90px);
}

.public-site .customer-auth-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .86fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 30px;
    background: rgba(15, 23, 42, .76);
    box-shadow: 0 34px 90px rgba(2, 6, 23, .42);
}

.public-site .customer-auth-visual {
    display: grid;
    align-content: center;
    gap: 18px;
    min-height: 620px;
    padding: clamp(34px, 5vw, 64px);
    background:
        radial-gradient(circle at 28% 20%, rgba(94, 234, 212, .24), transparent 18rem),
        linear-gradient(135deg, #082f49 0%, #0f766e 55%, #020817 100%);
    color: #ffffff;
}

.public-site .customer-auth-visual > span {
    width: fit-content;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #ccfbf1;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-site .customer-auth-visual h1 {
    max-width: 620px;
    margin: 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.05;
}

.public-site .customer-auth-visual p {
    max-width: 560px;
    margin: 0;
    color: rgba(241, 245, 249, .82);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
}

.public-site .customer-auth-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.public-site .customer-auth-benefits article {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
}

.public-site .customer-auth-benefits b {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 999px;
    background: #ffffff;
    color: #0f766e;
    font-size: .82rem;
    font-weight: 950;
}

.public-site .customer-auth-benefits strong {
    color: #ffffff;
    font-size: .9rem;
    font-weight: 950;
}

.public-site .customer-auth-benefits small {
    color: rgba(226, 232, 240, .72);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.35;
}

.public-site .customer-auth-card {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: clamp(28px, 4vw, 48px);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.public-site .customer-auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f1f5f9;
}

.public-site .customer-auth-tabs a {
    display: grid;
    min-height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #64748b;
    font-size: .88rem;
    font-weight: 950;
    text-decoration: none;
}

.public-site .customer-auth-tabs a.active {
    background: #ffffff;
    color: #0f766e;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.public-site .customer-auth-form {
    display: grid;
    gap: 14px;
}

.public-site .customer-auth-form label {
    display: grid;
    gap: 7px;
    color: #1e293b;
    font-size: .86rem;
    font-weight: 900;
}

.public-site .customer-auth-form input,
.public-site .customer-auth-form select,
.public-site .customer-password-field {
    width: 100%;
    min-height: 52px;
    border: 1px solid #dbe4ef;
    border-radius: 15px;
    background: #ffffff;
    color: #0f172a;
    font-family: "Manrope", sans-serif;
    font-weight: 750;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}

.public-site .customer-auth-form input {
    padding: 0 14px;
}

.public-site .customer-auth-form select {
    padding: 0 10px;
    appearance: none;
}

.public-site .customer-password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
}

.public-site .customer-password-field input {
    min-height: 50px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.public-site .customer-password-field button {
    height: 36px;
    margin-right: 8px;
    padding: 0 12px;
    border: 1px solid #dbe4ef;
    border-radius: 11px;
    background: #f8fafc;
    color: #0f766e;
    font-size: .78rem;
    font-weight: 950;
    cursor: pointer;
}

.public-site .customer-auth-form input:focus,
.public-site .customer-password-field:focus-within {
    outline: 0;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13);
}

.public-site .customer-auth-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: 12px;
}

.public-site .customer-auth-form .btn {
    min-height: 54px;
    border-radius: 16px;
}

.public-site .purchase-login-nudge,
.public-site .purchase-customer-session {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-radius: 18px;
}

.public-site .purchase-login-nudge {
    border: 1px solid rgba(14, 165, 233, .18);
    background: #eff6ff;
}

.public-site .purchase-login-nudge div,
.public-site .purchase-customer-session {
    min-width: 0;
}

.public-site .purchase-login-nudge strong,
.public-site .purchase-customer-session strong {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-site .purchase-login-nudge span,
.public-site .purchase-customer-session small {
    color: #475569;
    font-size: .8rem;
    font-weight: 750;
}

.public-site .purchase-login-nudge a {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: #0f766e;
    color: #ffffff;
    font-size: .8rem;
    font-weight: 950;
    text-decoration: none;
}

.public-site .purchase-customer-session {
    display: grid;
    justify-content: stretch;
    border: 1px solid rgba(34, 197, 94, .2);
    background: #f0fdf4;
}

.public-site .purchase-customer-session > span {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.public-site .customer-account-head {
    display: flex;
    gap: 18px;
    align-items: end;
    justify-content: space-between;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 28px;
    background:
        radial-gradient(circle at 18% 18%, rgba(94, 234, 212, .16), transparent 18rem),
        linear-gradient(135deg, rgba(8, 47, 73, .92), rgba(15, 23, 42, .96));
    color: #ffffff;
    box-shadow: 0 26px 70px rgba(2, 6, 23, .32);
}

.public-site .customer-account-head span {
    color: #99f6e4;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-site .customer-account-head h1 {
    margin: 6px 0;
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 900;
}

.public-site .customer-account-head p {
    margin: 0;
    color: rgba(226, 232, 240, .78);
    font-weight: 700;
}

.public-site .customer-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.public-site .customer-account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.public-site .customer-account-grid article,
.public-site .customer-orders-panel,
.public-site .customer-empty-orders {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .94));
    box-shadow: 0 18px 48px rgba(2, 6, 23, .16);
}

.public-site .customer-account-grid article {
    display: grid;
    gap: 6px;
    padding: 18px;
}

.public-site .customer-account-grid small,
.public-site .customer-order-card small {
    color: #64748b;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-site .customer-account-grid strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-site .customer-orders-panel {
    padding: clamp(18px, 3vw, 26px);
}

.public-site .customer-orders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.public-site .customer-orders-head h2 {
    margin: 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.public-site .customer-orders-head span {
    color: #64748b;
    font-weight: 850;
}

.public-site .customer-orders-list {
    display: grid;
    gap: 12px;
}

.public-site .customer-order-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, .7fr));
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.public-site .customer-order-card h3 {
    margin: 4px 0;
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1rem;
}

.public-site .customer-order-card span {
    color: #0f766e;
    font-size: .82rem;
    font-weight: 900;
}

.public-site .customer-order-card strong {
    color: #0f172a;
    font-size: .9rem;
    font-weight: 950;
    text-transform: capitalize;
}

.public-site .customer-empty-orders {
    display: grid;
    gap: 10px;
    padding: 24px;
    text-align: center;
}

.public-site .customer-empty-orders strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.1rem;
}

.public-site .customer-empty-orders p {
    margin: 0;
    color: #64748b;
    font-weight: 750;
}

@media (max-width: 900px) {
    .public-site .customer-auth-panel,
    .public-site .customer-account-grid,
    .public-site .customer-order-card {
        grid-template-columns: 1fr;
    }

    .public-site .customer-auth-visual {
        min-height: 420px;
    }

    .public-site .customer-account-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .public-site .customer-auth-page,
    .public-site .customer-account-page {
        width: min(100% - 20px, 1180px);
    }

    .public-site .customer-auth-benefits,
    .public-site .customer-auth-row {
        grid-template-columns: 1fr;
    }

    .public-site .purchase-login-nudge {
        align-items: stretch;
        flex-direction: column;
    }

    .public-site .purchase-login-nudge a {
        text-align: center;
    }
}

/* Iconos del encabezado publico */
.public-site .nav .nav-icon-link {
    display: inline-flex;
    width: 38px;
    height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.public-site .nav .nav-icon-link i {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: currentColor;
    font-size: .88rem;
}

.public-site .nav .nav-icon-link.cart-action {
    position: relative;
}

.public-site .nav .nav-icon-link .cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 2px solid #07111f;
    border-radius: 999px;
    background: #facc15;
    color: #111827;
    font-size: .64rem;
    font-weight: 950;
    line-height: 1;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .18s ease, transform .18s ease;
}

.public-site .nav .nav-icon-link .cart-count.has-items {
    opacity: 1;
    transform: scale(1);
}

.public-site .nav .nav-icon-link:hover i {
    background: rgba(94, 234, 212, .18);
    color: #5eead4;
}

@media (max-width: 720px) {
    .public-site .nav .nav-icon-link span {
        display: none;
    }

    .public-site .nav .nav-icon-link i {
        width: 34px;
        height: 34px;
    }
}

/* Acciones finales del encabezado */
.public-site .nav .nav-action-icons {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-left: 6px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 10px 24px rgba(2, 8, 23, .16);
}

.public-site .nav .nav-action-icons::before {
    content: "";
    width: 1px;
    height: 22px;
    margin: 0 3px 0 -9px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .26), transparent);
}

.public-site .nav .nav-action-icons .nav-icon-link {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.public-site .nav .nav-action-icons .nav-icon-link::after {
    content: none !important;
}

.public-site .nav .nav-action-icons .nav-icon-link i {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: currentColor !important;
    font-size: .98rem;
}

.public-site .nav .nav-action-icons .cart-action {
    background:
        linear-gradient(135deg, rgba(31, 216, 255, .22), rgba(124, 58, 237, .16)) !important;
}

.public-site .nav .nav-action-icons .login-action {
    background:
        linear-gradient(135deg, rgba(255, 62, 181, .2), rgba(255, 183, 3, .13)) !important;
}

.public-site .nav .nav-action-icons .logout-action {
    background:
        linear-gradient(135deg, rgba(248, 113, 113, .22), rgba(244, 63, 94, .15)) !important;
}

.public-site .nav .nav-action-icons .nav-icon-link:hover {
    border-color: rgba(255, 255, 255, .32) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 24px rgba(31, 216, 255, .16) !important;
}

@media (max-width: 900px) {
    .public-site .nav .nav-action-icons {
        flex: 0 0 auto;
        margin-left: 0;
    }

    .public-site .nav .nav-action-icons::before {
        content: none;
    }
}

/* Campo celular integrado: codigo de pais + numero */
.public-site .customer-auth-form .customer-phone-field {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    min-height: 56px;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.public-site .customer-auth-form .customer-phone-field:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13), 0 16px 34px rgba(15, 23, 42, .08);
}

.public-site .customer-dni-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.public-site .customer-dni-field input {
    min-width: 0;
}

.public-site .customer-dni-validate {
    min-width: 82px;
    padding: 0 14px;
    border: 1px solid #0ea5e9;
    border-radius: 16px;
    background: #e0f2fe;
    color: #0369a1;
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.public-site .customer-dni-validate:hover,
.public-site .customer-dni-validate:focus-visible {
    background: #0ea5e9;
    color: #ffffff;
    transform: translateY(-1px);
}

.public-site .customer-dni-validate:disabled {
    cursor: wait;
    opacity: .65;
}

.public-site .customer-dni-status {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    font-size: .78rem;
    font-weight: 700;
}

.public-site .customer-dni-status.is-loading { color: #0369a1; }
.public-site .customer-dni-status.is-valid { color: #15803d; }
.public-site .customer-dni-status.is-invalid { color: #b91c1c; }

.public-site .customer-auth-form .customer-phone-field select,
.public-site .customer-auth-form .customer-phone-field input {
    width: 100%;
    min-height: 56px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
}

.public-site .customer-auth-form .customer-phone-field select {
    padding: 0 10px;
    border-right: 1px solid #e2e8f0 !important;
    background: #f8fafc;
    color: #0f766e;
    font-size: .82rem;
    font-weight: 950;
}

@media (max-width: 420px) {
    .public-site .customer-auth-form .customer-phone-field {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

.public-site .customer-auth-alert {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 14px !important;
    border: 1px solid rgba(225, 29, 72, .22) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(255, 241, 242, .98), rgba(255, 247, 237, .96)) !important;
    color: #9f1239 !important;
    box-shadow: 0 16px 34px rgba(225, 29, 72, .1);
}

.public-site .customer-auth-alert > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 13px;
    background: #ffe4e6;
    color: #e11d48;
    font-size: 1rem;
}

.public-site .customer-auth-alert div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.public-site .customer-auth-alert strong {
    color: #9f1239;
    font-size: .9rem;
    font-weight: 950;
    line-height: 1.35;
}

.public-site .customer-auth-alert small {
    color: #be123c;
    font-size: .8rem;
    font-weight: 750;
    line-height: 1.35;
}

.public-site .customer-auth-alert a {
    display: inline-grid;
    min-height: 34px;
    padding: 0 12px;
    place-items: center;
    border-radius: 999px;
    background: #0f766e;
    color: #ffffff;
    font-size: .8rem;
    font-weight: 950;
    text-decoration: none;
}

@media (max-width: 520px) {
    .public-site .customer-auth-alert {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .public-site .customer-auth-alert a {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Login de cliente interactivo sin panel izquierdo */
.public-site .customer-auth-page {
    display: grid;
    width: min(100%, calc(100% - 28px));
    min-height: calc(100vh - 150px);
    margin: 18px auto 58px;
    place-items: center;
}

.public-site .customer-auth-panel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(470px, 100%) !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.public-site .customer-auth-visual {
    display: none !important;
}

.public-site .customer-auth-card {
    position: relative;
    align-content: start;
    gap: 18px;
    padding: clamp(28px, 5vw, 42px) !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .95)) !important;
    box-shadow:
        0 34px 80px rgba(2, 6, 23, .32),
        inset 0 1px 0 rgba(255, 255, 255, .65);
}

.public-site .customer-auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #1fd8ff, #7c3aed, #ff3eb5);
}

.public-site .customer-auth-brand {
    display: flex;
    gap: 13px;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.public-site .customer-auth-brand > span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 19px;
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    color: #ffffff;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.28rem;
    font-weight: 950;
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.public-site .customer-auth-brand div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.public-site .customer-auth-brand strong {
    color: #0f172a;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
}

.public-site .customer-auth-brand small {
    color: #64748b;
    font-size: .84rem;
    font-weight: 850;
}

.public-site .customer-auth-tabs {
    border-radius: 18px;
    background: #eaf1f7;
}

.public-site .customer-auth-tabs a {
    min-height: 46px;
    border-radius: 14px;
}

.public-site .customer-auth-tabs a.active {
    color: #0f766e;
    box-shadow: 0 13px 28px rgba(15, 23, 42, .09);
}

.public-site .customer-auth-form {
    gap: 15px;
}

.public-site .customer-auth-form label {
    transition: transform .18s ease;
}

.public-site .customer-auth-form label.is-focused {
    transform: translateY(-1px);
}

.public-site .customer-auth-form label.is-focused,
.public-site .customer-auth-form label.has-value {
    color: #0f766e;
}

.public-site .customer-auth-form input,
.public-site .customer-password-field {
    min-height: 56px;
    border-radius: 16px;
    background: #ffffff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.public-site .customer-auth-form input:focus,
.public-site .customer-password-field:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .13), 0 16px 34px rgba(15, 23, 42, .08);
}

.public-site .customer-password-field button {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid #dbe4ef;
    border-radius: 13px;
    background: #f8fafc;
    color: #64748b;
}

.public-site .customer-password-field button:hover,
.public-site .customer-password-field button.is-visible {
    border-color: rgba(15, 118, 110, .22);
    background: #ecfeff;
    color: #0f766e;
}

.public-site .customer-auth-form .btn {
    position: relative;
    min-height: 56px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(14, 165, 233, .22);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.public-site .customer-auth-form .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 46px rgba(14, 165, 233, .28);
}

.public-site .customer-auth-form .btn.is-loading {
    cursor: wait;
    opacity: .82;
}

.public-site .customer-auth-form .btn.is-loading::after {
    content: "";
    position: absolute;
    right: 18px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: loginSpin .7s linear infinite;
}

@media (max-width: 560px) {
    .public-site .customer-auth-page {
        width: min(100% - 18px, 470px);
        min-height: auto;
        margin-top: 12px;
    }

    .public-site .customer-auth-card {
        padding: 26px 20px !important;
        border-radius: 22px;
    }

    .public-site .customer-auth-brand {
        justify-content: flex-start;
    }
}


/* ==========================================================================
   Mejoras vista cliente (2026-09-23): carrito, confirmación, catálogo vacío
   ========================================================================== */
.public-site .cart-notice {
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid rgba(250, 204, 21, .35);
    border-radius: 12px;
    background: rgba(250, 204, 21, .1);
    color: #fde68a;
    font-size: .88rem;
    font-weight: 700;
}

.public-site .cart-notice[hidden] {
    display: none;
}

.public-site .cart-summary-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.public-site .cart-login-hint {
    margin: 0;
    color: rgba(226, 232, 240, .78);
    font-size: .88rem;
}

.public-site .cart-login-hint a {
    color: #1fd8ff;
    font-weight: 800;
    text-decoration: underline;
}

.public-site .cart-checkout-form label small {
    color: rgba(226, 232, 240, .5);
    font-weight: 600;
}

.public-site .cart-checkout-form .cart-form-wide {
    grid-column: 1 / -1;
}

.public-site .cart-checkout-form textarea {
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font: inherit;
    resize: vertical;
}

.public-site .cart-checkout-form textarea:focus {
    outline: 3px solid rgba(31, 216, 255, .16);
    border-color: #1fd8ff;
}

.public-site .cart-checkout-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.public-site .cart-checkout-form legend {
    margin-bottom: 8px;
    color: rgba(226, 232, 240, .76);
    font-size: .8rem;
    font-weight: 850;
}

.public-site .cart-checkout-form .purchase-payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.public-site .cart-checkout-form .purchase-payment-option {
    color: #0f172a;
}

.public-site .cart-checkout-submit:disabled {
    opacity: .6;
    cursor: wait;
}

.public-site .cart-success-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-site .cart-success-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
}

.public-site .cart-success-list li span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.public-site .cart-success-list li small {
    color: #64748b;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.public-site .cart-success-list li.is-total {
    border-color: rgba(15, 118, 110, .3);
    background: #f0fdfa;
    font-size: 1.05rem;
}

.public-site .catalog-empty {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin: 12px 0;
    padding: 40px 20px;
    border: 1px dashed rgba(125, 211, 252, .35);
    border-radius: 18px;
    text-align: center;
}

.public-site .catalog-empty div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.public-site .product-details-buy {
    justify-self: start;
    margin-top: 6px;
}

.public-site .customer-order-card h3 a {
    color: inherit;
    text-decoration: none;
}

.public-site .customer-order-card h3 a:hover {
    text-decoration: underline;
}

.public-site .customer-order-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #16a34a;
    font-size: .82rem;
    font-weight: 800;
}

@media (max-width: 620px) {
    .public-site .cart-success-list li {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-site .tools-marquee-track {
        animation: none !important;
    }
}

/* Header en movil: carrito y cuenta siempre visibles junto al logo (antes quedaban ocultos al final del menu deslizable). */
@media (max-width: 900px) {
    .public-site .topbar {
        position: relative;
    }

    .public-site .nav-action-icons {
        position: absolute;
        top: 18px;
        right: 16px;
        z-index: 2;
    }

    .public-site .brand {
        padding-right: 110px;
    }
}

@media (max-width: 480px) {
    .public-site .brand small {
        display: none;
    }
}

/* ---------- Selector de moneda de los precios (S/ | US$) ---------- */
.public-site .nav .currency-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}

.public-site .nav .currency-switch button {
    min-width: 40px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.public-site .nav .currency-switch button:hover {
    color: #ffffff;
}

.public-site .nav .currency-switch button.is-active {
    background: linear-gradient(135deg, #1fd8ff, #5eead4);
    color: #04202c;
    box-shadow: 0 6px 16px rgba(31, 216, 255, .25);
}

.public-site .nav .currency-switch button:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .public-site .brand {
        padding-right: 196px;
    }
}

@media (max-width: 400px) {
    .public-site .nav .currency-switch button {
        min-width: 34px;
        padding: 0 7px;
        font-size: .74rem;
    }

    .public-site .brand {
        padding-right: 180px;
    }
}

@media (max-width: 380px) {
    .public-site .brand .brand-copy {
        display: none;
    }
}

/* ---------- Menu de la cuenta del cliente (nombre + avatar) ---------- */
.public-site .account-menu {
    position: relative;
    display: inline-flex;
}

.public-site .account-menu .sr-only,
.account-dropdown .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.public-site .nav .account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 12px 0 4px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 62, 181, .16), rgba(31, 216, 255, .12));
    color: #ffffff;
    font: inherit;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.public-site .nav .account-trigger:hover,
.public-site .account-menu.is-open .account-trigger {
    border-color: rgba(94, 234, 212, .5);
    box-shadow: 0 10px 24px rgba(31, 216, 255, .16);
}

.public-site .nav .account-trigger:hover {
    transform: translateY(-1px);
}

.public-site .nav .account-trigger:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: 2px;
}

.public-site .nav .account-trigger.is-current {
    border-color: rgba(94, 234, 212, .45);
}

.account-avatar {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5eead4, #38bdf8 55%, #a78bfa);
    color: #04202c;
    font-family: "Poppins", sans-serif;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .14);
}

.account-avatar.is-large {
    width: 46px;
    height: 46px;
    font-size: 1rem;
}

.account-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid #0b1220;
    border-radius: 50%;
    background: #facc15;
    animation: account-pulse 2s ease-in-out infinite;
}

@keyframes account-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, .6); }
    50% { box-shadow: 0 0 0 5px rgba(250, 204, 21, 0); }
}

.public-site .account-name {
    display: grid;
    line-height: 1.1;
    text-align: left;
}

.public-site .account-name small {
    color: rgba(255, 255, 255, .6);
    font-size: .68rem;
    font-weight: 600;
}

.public-site .account-name strong {
    max-width: 110px;
    overflow: hidden;
    color: #ffffff;
    font-size: .86rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-site .account-caret {
    color: rgba(255, 255, 255, .7);
    font-size: .68rem;
    transition: transform .2s ease;
}

.public-site .account-menu.is-open .account-caret {
    transform: rotate(180deg);
}

/* Desplegable (se agrega al <body> y se posiciona con JS) */
.account-dropdown {
    position: fixed;
    z-index: 1000;
    width: 280px;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    background: rgba(12, 21, 41, .97);
    color: #e6ecf6;
    font-family: "Manrope", system-ui, sans-serif;
    box-shadow: 0 24px 60px rgba(2, 8, 23, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .16s ease, transform .16s ease;
}

.account-dropdown.is-open {
    opacity: 1;
    transform: none;
}

.account-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 10px 10px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}

.account-dropdown-head div {
    display: grid;
    min-width: 0;
}

.account-dropdown-head strong {
    overflow: hidden;
    color: #ffffff;
    font-size: .95rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown-head small {
    overflow: hidden;
    color: #93a0b8;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    color: #e6ecf6;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.account-dropdown a > i {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #5eead4;
    font-size: .88rem;
    transition: background-color .15s ease, transform .15s ease;
}

.account-dropdown a > span {
    display: grid;
    flex: 1;
    min-width: 0;
}

.account-dropdown a strong {
    font-size: .88rem;
    font-weight: 700;
}

.account-dropdown a small {
    color: #93a0b8;
    font-size: .76rem;
}

.account-dropdown a:hover,
.account-dropdown a:focus-visible {
    outline: none;
    background: rgba(94, 234, 212, .09);
}

.account-dropdown a:hover > i,
.account-dropdown a:focus-visible > i {
    background: rgba(94, 234, 212, .18);
    transform: scale(1.06);
}

.account-badge {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #facc15;
    color: #111827;
    font-size: .72rem;
    font-weight: 800;
}

.account-dropdown a.is-logout {
    margin-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, .16);
    border-radius: 0 0 12px 12px;
    padding-top: 12px;
}

.account-dropdown a.is-logout > i {
    color: #fb7185;
}

.account-dropdown a.is-logout:hover,
.account-dropdown a.is-logout:focus-visible {
    background: rgba(251, 113, 133, .1);
}

@media (max-width: 1180px) {
    .public-site .account-name {
        display: none;
    }

    .public-site .nav .account-trigger {
        padding: 0 10px 0 4px;
    }
}

@media (max-width: 900px) {
    .public-site .nav .account-trigger {
        gap: 0;
        width: 40px;
        padding: 0;
        justify-content: center;
    }

    .public-site .account-caret {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-dot {
        animation: none;
    }

    .account-dropdown {
        transition: none;
    }
}

/* ---------- Panel: Mi cuenta (admin/cuenta.php). Prefijo: ac- ---------- */
.adminlte-area a.admin-user-panel {
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.adminlte-area a.admin-user-panel:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .09);
}

.ac-notice {
    margin-bottom: 0;
}

.ac-grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ac-profile {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

.ac-avatar {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 6px;
    border-radius: 22px;
    background: linear-gradient(135deg, #5eead4, #38bdf8);
    color: #031827;
    font-size: 1.4rem;
    font-weight: 900;
}

.ac-profile h2,
.ac-head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.ac-role {
    padding: 3px 10px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
    font-size: .78rem;
    font-weight: 700;
}

.ac-facts {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #eef2f7;
    text-align: left;
}

.ac-facts div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .88rem;
}

.ac-facts dt {
    color: #64748b;
    font-weight: 600;
}

.ac-facts dd {
    margin: 0;
    color: #0f172a;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ac-name-form {
    display: grid;
    gap: 6px;
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eef2f7;
    text-align: left;
}

.ac-name-form label,
.ac-field label {
    display: block;
    color: #334155;
    font-size: .86rem;
    font-weight: 700;
}

.ac-inline {
    display: flex;
    gap: 8px;
}

.ac-inline input {
    flex: 1;
    min-width: 0;
}

.ac-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.ac-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .9rem;
}

.ac-icon {
    display: grid;
    flex: 0 0 44px;
    place-items: center;
    height: 44px;
    border-radius: 12px;
    background: #ecfeff;
    color: #0e7490;
}

.ac-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ac-alert {
    margin: 0 0 16px;
}

.ac-field {
    max-width: 480px;
    margin-bottom: 16px;
}

.ac-control {
    position: relative;
    margin-top: 6px;
}

.ac-control input {
    width: 100%;
    padding-right: 78px;
}

.ac-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    padding: 5px 10px;
    border: 0;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transform: translateY(-50%);
}

.ac-eye:hover {
    background: #e2e8f0;
}

.ac-field.is-invalid input {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.ac-error {
    display: block;
    margin-top: 6px;
    color: #dc2626;
    font-size: .82rem;
    font-weight: 600;
}

.ac-error:empty {
    display: none;
}

.ac-meter {
    height: 6px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.ac-meter span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width .2s ease, background-color .2s ease;
}

.ac-meter .is-weak { background: #ef4444; }
.ac-meter .is-fair { background: #f59e0b; }
.ac-meter .is-good { background: #10b981; }
.ac-meter .is-strong { background: #059669; }

.ac-meter-label {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: .8rem;
    font-weight: 600;
}

.ac-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.ac-rules li {
    position: relative;
    padding-left: 22px;
    color: #64748b;
    font-size: .82rem;
}

.ac-rules li::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    width: 14px;
    height: 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
}

.ac-rules li.is-ok {
    color: #047857;
    font-weight: 600;
}

.ac-rules li.is-ok::before {
    border-color: #10b981;
    background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.ac-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

@media (max-width: 900px) {
    .ac-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .ac-rules {
        grid-template-columns: minmax(0, 1fr);
    }

    .ac-actions .btn {
        width: 100%;
    }
}

/* ---------- Menu lateral del panel: enlaces alineados a la izquierda ---------- */
.adminlte-area .sidebar-menu .nav-item {
    width: 100%;
}

.adminlte-area .sidebar-menu .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
    text-align: left;
}

.adminlte-area .sidebar-menu .nav-link .nav-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0;
}

.adminlte-area .sidebar-menu .nav-link p {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
}

/* ---------- Panel principal (admin/index.php). Prefijo: db- ---------- */
.db,
.ox-drawer,
.ox-toasts {
    --db-ink: #0f172a;
    --db-text: #334155;
    --db-muted: #64748b;
    --db-line: #e8edf3;
    --db-soft: #f8fafc;
    --db-teal: #0e7490;
    --db-green: #059669;
    --db-amber: #b45309;
    --db-red: #dc2626;
    --db-blue: #2563eb;
    display: grid;
    gap: 20px;
    color: var(--db-ink);
}

.db .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.db svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.db-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    overflow: hidden;
    padding: 26px 28px;
    border-radius: 22px;
    background: linear-gradient(135deg, #0b1220 0%, #10233a 60%, #0e4f5f 100%);
    color: #ffffff;
    box-shadow: 0 18px 40px -22px rgba(11, 18, 32, .7);
}

.db-hero::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, .25), transparent 65%);
    pointer-events: none;
}

.db-hero > * {
    position: relative;
}

.db-date {
    margin: 0 0 4px;
    color: #99f6e4;
    font-size: .82rem;
    font-weight: 700;
}

.db-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.db-sub {
    max-width: 640px;
    margin: 6px 0 0;
    color: #cbd5e1;
    font-size: .95rem;
}

.db-sub strong {
    color: #ffffff;
}

.db-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.db-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}

.db-btn:hover {
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
}

.db-btn svg {
    width: 18px;
    height: 18px;
}

.db-btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #5eead4, #38bdf8);
    color: #04202c;
}

.db-btn-primary:hover {
    background: linear-gradient(135deg, #99f6e4, #7dd3fc);
    color: #04202c;
    transform: translateY(-1px);
}

.db-flash {
    margin: 0;
}

/* Indicadores */
.db-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.db-kpi {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 18px;
    border: 1px solid var(--db-line);
    border-radius: 18px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.db-kpi.is-link:hover {
    border-color: #bae6fd;
    color: inherit;
    box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .35);
    transform: translateY(-2px);
}

.db-kpi-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
    border-radius: 12px;
}

.db-kpi-icon svg {
    width: 20px;
    height: 20px;
}

.db-kpi-icon.is-teal { background: #ecfeff; color: var(--db-teal); }
.db-kpi-icon.is-green { background: #ecfdf5; color: var(--db-green); }
.db-kpi-icon.is-amber { background: #fffbeb; color: var(--db-amber); }
.db-kpi-icon.is-red { background: #fef2f2; color: var(--db-red); }
.db-kpi-icon.is-blue { background: #eff6ff; color: var(--db-blue); }

.db-kpi small {
    color: var(--db-muted);
    font-size: .8rem;
    font-weight: 700;
}

.db-kpi strong {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.db-kpi > span:last-child {
    color: var(--db-muted);
    font-size: .8rem;
}

/* Tarjetas */
.db-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.db-card {
    padding: 22px;
    border: 1px solid var(--db-line);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    scroll-margin-top: 80px;
}

.db-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.db-card-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.db-card-head p {
    margin: 2px 0 0;
    color: var(--db-muted);
    font-size: .86rem;
}

.db-count {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fef2f2;
    color: var(--db-red);
    font-weight: 800;
}

/* Lista de atencion */
.db-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.db-list li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto 38px;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--db-line);
}

.db-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.db-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--db-text);
    font-weight: 800;
}

.db-avatar.is-vencida { background: #fef2f2; color: var(--db-red); }
.db-avatar.is-por_vencer { background: #fffbeb; color: var(--db-amber); }

.db-list-main {
    display: grid;
    min-width: 0;
}

.db-list-main strong,
.db-list-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-list-main small,
.db-table small {
    color: var(--db-muted);
    font-size: .8rem;
}

.db-list-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.db-tag,
.db-pay,
.db-chip-static {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.db-tag.is-vencida,
.db-pay.is-debe { background: #fef2f2; color: var(--db-red); }
.db-tag.is-por_vencer,
.db-tag.is-debe,
.db-pay.is-pendiente { background: #fffbeb; color: var(--db-amber); }
.db-tag.is-vigente,
.db-pay.is-pagado { background: #ecfdf5; color: var(--db-green); }
.db-tag.is-sin_fecha { background: #f1f5f9; color: var(--db-muted); }

.db-wa {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #16a34a;
    transition: background-color .15s ease, transform .15s ease;
}

.db-wa:hover {
    background: #16a34a;
    color: #ffffff;
    transform: scale(1.05);
}

.db-wa svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
}

.db-wa.is-disabled {
    background: #f8fafc;
    color: #cbd5e1;
}

.db-more {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: transparent;
    color: var(--db-teal);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.db-more:hover {
    border-color: var(--db-teal);
    background: #f0fdfa;
}

.db-empty {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 28px 16px;
    color: var(--db-muted);
    text-align: center;
}

.db-empty svg {
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
    color: #94a3b8;
}

.db-empty strong {
    color: var(--db-ink);
}

/* Barras de ganancia */
.db-bars {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.db-bar-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .9rem;
}

.db-bar-row b {
    color: var(--db-green);
}

.db-bar {
    height: 8px;
    margin: 6px 0 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f5f9;
}

.db-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #38bdf8);
}

.db-bars small {
    color: var(--db-muted);
    font-size: .78rem;
}

/* Filtros y busqueda */
.db-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 320px);
    margin: 0;
}

.db-search svg {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.db-search input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px 0 38px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: var(--db-soft);
    font: inherit;
}

.db-search input:focus {
    border-color: var(--db-teal);
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 116, 144, .12);
}

.db-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.db-chips.is-static {
    margin: 0;
}

.db-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #ffffff;
    color: var(--db-text);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.db-chip b {
    padding: 0 7px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: .74rem;
}

.db-chip:hover {
    border-color: #94a3b8;
}

.db-chip.is-active {
    border-color: var(--db-ink);
    background: var(--db-ink);
    color: #ffffff;
}

.db-chip.is-active b {
    background: rgba(255, 255, 255, .18);
}

.db-chip-static.is-warn { background: #fffbeb; color: var(--db-amber); }
.db-chip-static.is-ok { background: #ecfdf5; color: var(--db-green); }
.db-chip-static.is-info { background: #eff6ff; color: var(--db-blue); }
.db-chip-static.is-muted { background: #f1f5f9; color: var(--db-muted); }

/* Tablas */
.db-table-wrap {
    overflow-x: auto;
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.db-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--db-line);
    background: var(--db-soft);
    color: var(--db-muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.db-table th:first-child { border-radius: 10px 0 0 10px; }
.db-table th:last-child { border-radius: 0 10px 10px 0; }

.db-table td {
    padding: 12px;
    border-bottom: 1px solid var(--db-line);
    color: var(--db-text);
    vertical-align: middle;
}

.db-table td strong {
    color: var(--db-ink);
}

.db-table td small {
    display: block;
    margin-top: 2px;
}

.db-table tbody tr {
    transition: background-color .12s ease;
}

.db-table tbody tr:hover {
    background: #f8fafc;
}

.db-actions {
    width: 48px;
    text-align: right;
}

.db-status-form {
    margin: 0;
}

.db .db-status {
    min-height: 34px;
    padding: 0 30px 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.db .db-status.is-warn { border-color: #fde68a; background-color: #fffbeb; color: var(--db-amber); }
.db .db-status.is-ok { border-color: #a7f3d0; background-color: #ecfdf5; color: var(--db-green); }
.db .db-status.is-info { border-color: #bfdbfe; background-color: #eff6ff; color: var(--db-blue); }
.db .db-status.is-muted { border-color: #e2e8f0; background-color: #f8fafc; color: var(--db-muted); }

.db-table-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    color: var(--db-muted);
    font-size: .84rem;
}

.db-table-foot .db-more {
    width: auto;
    margin: 0;
    padding: 8px 18px;
}

@media (max-width: 1280px) {
    .db-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .db-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .db-kpi:last-child {
        grid-column: 1 / -1;
    }

    .db-hero,
    .db-card {
        padding: 18px;
        border-radius: 18px;
    }

    .db-search {
        width: 100%;
    }

    .db-list li {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
    }

    .db-list-meta {
        grid-column: 2 / 3;
        grid-row: 2;
        justify-content: flex-start;
    }

    .db-list .db-wa {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    /* Tablas como tarjetas */
    .db-table thead {
        display: none;
    }

    .db-table,
    .db-table tbody,
    .db-table tr,
    .db-table td {
        display: block;
        width: 100%;
    }

    .db-table tr {
        position: relative;
        margin-bottom: 10px;
        padding: 12px 14px;
        border: 1px solid var(--db-line);
        border-radius: 14px;
    }

    .db-table tr[hidden] {
        display: none;
    }

    .db-table td {
        padding: 5px 0;
        border: 0;
    }

    .db-table td::before {
        content: attr(data-label);
        display: block;
        color: var(--db-muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .db-table td.db-actions {
        position: absolute;
        top: 10px;
        right: 12px;
        width: auto;
        padding: 0;
    }

    .db-table td.db-actions::before {
        content: none;
    }

    .db-table td:first-child {
        padding-right: 44px;
    }
}

/* Suscripciones: 4 indicadores */
.db-kpis.is-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .db-kpis.is-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .db-kpis.is-4 .db-kpi:last-child {
        grid-column: auto;
    }
}

/* Panel: balance del negocio */
.bz-kpis {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bz-kpi {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 20px;
    border: 1px solid var(--db-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.bz-kpi small {
    color: var(--db-muted);
    font-size: .8rem;
    font-weight: 700;
}

.bz-kpi strong {
    color: var(--db-ink);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.bz-kpi strong em {
    color: var(--db-muted);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
}

.bz-kpi.is-main {
    border-color: transparent;
    background: linear-gradient(135deg, #047857, #0d9488);
    box-shadow: 0 18px 34px -22px rgba(4, 120, 87, .8);
}

.bz-kpi.is-main small,
.bz-kpi.is-main .bz-kpi-foot {
    color: #d1fae5;
}

.bz-kpi.is-main strong {
    color: #ffffff;
    font-size: 2rem;
}

.bz-kpi-foot {
    margin-top: 4px;
    color: var(--db-muted);
    font-size: .8rem;
}

.bz-trend {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
}

.bz-trend.is-up { background: #ecfdf5; color: var(--db-green); }
.bz-trend.is-down { background: #fef2f2; color: var(--db-red); }
.bz-trend.is-flat { background: #f1f5f9; color: var(--db-muted); font-weight: 700; }
.bz-kpi.is-main .bz-trend { background: rgba(255, 255, 255, .18); color: #ffffff; }

/* Pendientes */
.bz-todo {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.bz-todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
    color: var(--db-text);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

a.bz-todo-item:hover {
    border-color: #94a3b8;
    color: var(--db-text);
    transform: translateY(-1px);
}

.bz-todo-item strong {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--db-muted);
    font-size: 1rem;
    font-weight: 800;
}

.bz-todo-item span {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
}

.bz-todo-item.is-amber strong { background: #fef3c7; color: #b45309; }
.bz-todo-item.is-blue strong { background: #dbeafe; color: #1d4ed8; }
.bz-todo-item.is-red strong { background: #fee2e2; color: #b91c1c; }
.bz-todo-item.is-done { opacity: .7; }
.bz-todo-item.is-done strong { background: #ecfdf5; color: var(--db-green); }
.bz-todo-item.is-money { display: grid; gap: 0; background: var(--db-soft); }
.bz-todo-item.is-money strong { display: block; min-width: 0; height: auto; padding: 0; background: none; color: var(--db-ink); }

/* Grafico mensual */
.bz-range {
    display: inline-flex;
    padding: 3px;
    border-radius: 12px;
    background: #f1f5f9;
}

.bz-range a {
    padding: 6px 12px;
    border-radius: 9px;
    color: var(--db-muted);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.bz-range a.is-active {
    background: #ffffff;
    color: var(--db-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.bz-legend {
    display: flex;
    gap: 16px;
    margin: 4px 0 10px;
    color: var(--db-muted);
    font-size: .8rem;
    font-weight: 700;
}

.bz-legend span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: -1px;
}

.bz-legend .is-income::before { background: #bae6fd; }
.bz-legend .is-profit::before { background: #10b981; }

.bz-chart {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 240px;
    padding-top: 10px;
    border-bottom: 1px solid var(--db-line);
    background: repeating-linear-gradient(to top, transparent 0, transparent 59px, #f1f5f9 59px, #f1f5f9 60px);
}

.bz-col {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    outline: none;
}

.bz-bars {
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}

.bz-bar {
    width: min(22px, 40%);
    min-height: 2px;
    border-radius: 6px 6px 2px 2px;
    transition: filter .15s ease;
}

.bz-bar.is-income { background: #bae6fd; }
.bz-bar.is-profit { background: #10b981; }
.bz-bar.is-profit.is-negative { background: #f87171; }

.bz-col small {
    padding: 6px 0 0;
    color: var(--db-muted);
    font-size: .74rem;
    font-weight: 700;
    text-align: center;
    text-transform: capitalize;
}

.bz-col.is-current small {
    color: var(--db-ink);
}

.bz-col.is-current .bz-bar.is-income { background: #7dd3fc; }

.bz-col:hover .bz-bar,
.bz-col:focus .bz-bar {
    filter: brightness(.9);
}

.bz-tip {
    position: absolute;
    bottom: calc(100% - 30px);
    left: 50%;
    z-index: 5;
    display: none;
    gap: 2px;
    min-width: 170px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #0f172a;
    color: #cbd5e1;
    font-size: .78rem;
    box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .6);
    transform: translateX(-50%);
    pointer-events: none;
}

.bz-tip strong { color: #ffffff; }
.bz-tip span { display: flex; justify-content: space-between; gap: 12px; }
.bz-tip b { color: #ffffff; }

.bz-col:first-child .bz-tip { left: 0; transform: none; }
.bz-col:last-child .bz-tip { right: 0; left: auto; transform: none; }

.bz-col:hover .bz-tip,
.bz-col:focus .bz-tip {
    display: grid;
}

/* Balance mensual */
.bz-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.bz-table td {
    white-space: nowrap;
}

.bz-table td small {
    color: var(--db-muted);
    font-size: .74rem;
}

.bz-table tr.is-current {
    background: #f0fdfa;
}

.bz-table .is-positive { color: var(--db-green); }
.bz-table .is-negative { color: var(--db-red); }

.bz-warning {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffbeb;
    color: #92400e;
    font-size: .86rem;
}

.bz-warning a {
    color: #b45309;
    font-weight: 800;
}

.bz-note {
    margin: 12px 0 0;
    color: var(--db-muted);
    font-size: .76rem;
}

@media (max-width: 1280px) {
    .bz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bz-todo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .bz-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .bz-kpis,
    .bz-todo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bz-kpi.is-main,
    .bz-kpi:last-child { grid-column: 1 / -1; }
    .bz-chart { gap: 3px; height: 200px; }
    .bz-col small { font-size: .66rem; }
    .bz-table td { white-space: normal; }

    /* Cada mes como tarjeta compacta de 2 columnas */
    .bz-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 12px;
    }

    .bz-table tr[hidden] { display: none; }
    .bz-table td:first-child { grid-column: 1 / -1; padding-right: 0; }
}

/* ---------- Pagos por validar (admin/pagos.php). Prefijo: pg- ---------- */
.adminlte-area .sidebar-menu .admin-nav-badge {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0 7px;
    border-radius: 999px;
    background: #facc15;
    color: #111827;
    font-size: .72rem;
    font-weight: 900;
}

.pg-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid #fde68a;
    border-radius: 18px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #78350f;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.pg-alert:hover {
    color: #78350f;
    box-shadow: 0 12px 24px -16px rgba(180, 83, 9, .6);
    transform: translateY(-2px);
}

.pg-alert.is-danger {
    border-color: #fecaca;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #7f1d1d;
}

.pg-alert.is-danger .pg-alert-icon {
    background: #dc2626;
}

.pg-alert.is-info {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1e3a8a;
}

.pg-alert.is-info .pg-alert-icon {
    background: #2563eb;
}

.db-delivery {
    display: block;
    margin-top: 6px;
    color: var(--db-muted);
    font-size: .74rem;
    font-weight: 700;
}

.db-delivery.is-ok { color: #047857; }
.db-delivery.is-problem { color: #b91c1c; }
.db-delivery.is-wait { color: #b45309; }

.pg-alert-icon {
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f59e0b;
    color: #ffffff;
}

.pg-alert svg,
.pg svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pg-alert > span:nth-child(2) {
    display: grid;
    flex: 1;
    font-size: .88rem;
}

.pg-alert strong {
    font-size: 1rem;
}

.pg-alert b {
    white-space: nowrap;
}

.pg-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.pg-hero-stats div {
    min-width: 120px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
}

.pg-hero-stats dt {
    color: #99f6e4;
    font-size: .74rem;
    font-weight: 700;
}

.pg-hero-stats dd {
    margin: 0;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 800;
}

.pg-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid var(--db-line);
    border-radius: 16px;
    background: #ffffff;
}

.pg-tabs button {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--db-muted);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.pg-tabs button[aria-selected="true"] {
    background: var(--db-ink);
    color: #ffffff;
}

.pg-tabs b {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #facc15;
    color: #111827;
    font-size: .72rem;
}

.pg-list {
    display: grid;
    gap: 16px;
}

.pg-item {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
}

.pg-proof {
    align-self: start;
}

.pg-proof-img {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: var(--db-soft);
    cursor: zoom-in;
}

.pg-proof-img img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: contain;
}

.pg-proof-img span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .75);
    color: #ffffff;
    font-size: .74rem;
    font-weight: 700;
}

.pg-proof-pdf,
.pg-proof-none {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 36px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    color: var(--db-muted);
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.pg-proof-pdf svg,
.pg-proof-none svg {
    width: 34px;
    height: 34px;
}

.pg-proof-pdf {
    color: #b91c1c;
}

.pg-body {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.pg-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.pg-head > div:first-child {
    display: grid;
}

.pg-head strong {
    font-size: 1.1rem;
}

.pg-head small {
    color: var(--db-muted);
}

.pg-amount {
    display: grid;
    justify-items: end;
    padding: 8px 14px;
    border-radius: 12px;
    background: #ecfdf5;
    text-align: right;
}

.pg-amount small {
    color: var(--db-green);
    font-size: .72rem;
    font-weight: 700;
}

.pg-amount strong {
    color: #065f46;
    font-size: 1.35rem;
    font-weight: 800;
}

.pg-amount span {
    color: var(--db-muted);
    font-size: .76rem;
}

.pg-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.pg-facts div {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--db-soft);
}

.pg-facts dt {
    color: var(--db-muted);
    font-size: .74rem;
    font-weight: 700;
}

.pg-facts dd {
    margin: 2px 0 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pg-facts code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #e2e8f0;
    color: var(--db-ink);
    font-size: .86rem;
}

.pg-copy {
    margin-left: 6px;
    padding: 2px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
}

.pg-note {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid #cbd5e1;
    color: var(--db-text);
    font-style: italic;
}

/* ---------- Pedidos y entrega de accesos (admin/pedidos.php). Prefijo: od- ---------- */
.od-all-link {
    margin-left: 10px;
    color: var(--db-teal);
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}

.od-filters {
    flex-wrap: wrap;
}

.od-filters .db-chip {
    text-decoration: none;
}

.od-filters .db-chip.is-alert:not(.is-active) {
    border-color: #fcd34d;
    background: #fffbeb;
}

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

.od-item {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--db-line);
    border-left: 4px solid #cbd5e1;
    border-radius: 14px;
    scroll-margin-top: 90px;
    transition: box-shadow .2s ease;
}

.od-item.is-pagado { border-left-color: #2563eb; }
.od-item.is-pago_en_revision { border-left-color: #60a5fa; }
.od-item.is-pendiente_contacto,
.od-item.is-pendiente_pago { border-left-color: #f59e0b; }
.od-item.is-entregado { border-left-color: #059669; }
.od-item.has-problem { border-left-color: #dc2626; background: #fffafa; }

.od-item.is-focus {
    box-shadow: 0 0 0 3px rgba(14, 116, 144, .25);
}

.od-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 14px;
}

.od-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.od-info strong span {
    color: var(--db-muted);
    font-weight: 600;
}

.od-info small {
    color: var(--db-muted);
    font-size: .8rem;
}

.od-info a {
    color: #16a34a;
    font-weight: 700;
}

.od-amount strong {
    white-space: nowrap;
}

.od-status {
    margin: 0;
}

.od-delivered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.od-delivered .db-delivery {
    margin: 0;
}

.od-access summary {
    color: var(--db-teal);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.od-access pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f1f5f9;
    font-size: .82rem;
    white-space: pre-wrap;
}

.od-deliver em {
    justify-self: start;
}

.od-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.adminlte-area .od-mode {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
}

.od-mode:has(input:checked) {
    border-color: #059669;
    box-shadow: 0 0 0 1px #059669;
}

.od-mode.is-disabled {
    background: #f8fafc;
    cursor: not-allowed;
}

.od-mode.is-disabled strong {
    color: var(--db-muted);
}

.adminlte-area .od-mode input[type="radio"] {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    accent-color: #059669;
}

.od-mode span {
    display: grid;
    gap: 2px;
}

.od-mode small {
    color: var(--db-muted);
    font-size: .78rem;
    font-weight: 600;
}

.od-mode small.is-ok { color: #047857; }
.od-mode small.is-warn { color: #b45309; }

.od-mode a {
    color: var(--db-teal);
    font-size: .8rem;
    font-weight: 800;
}

.od-write {
    display: grid;
    gap: 6px;
}

.od-hint {
    color: var(--db-muted);
    font-size: .78rem;
}

.od-hint.is-error {
    color: #b91c1c;
}

.od-deliver .pg-btn:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 640px) {
    .od-modes {
        grid-template-columns: minmax(0, 1fr);
    }
}

.od-deliver .pg-btn {
    justify-self: start;
}

@media (max-width: 900px) {
    .od-main {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .od-actions {
        grid-column: 1 / -1;
    }

    .od-actions .pg-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Inventario de accesos (admin/accesos.php). Prefijo: ax- ---------- */
.ax-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.ax-form {
    display: grid;
    gap: 12px;
}

.ax-form label {
    display: grid;
    gap: 6px;
    color: var(--db-text);
    font-size: .86rem;
    font-weight: 700;
}

.ax-form select,
.ax-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    font: inherit;
}

.ax-form textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem;
    font-weight: 400;
}

.ax-help {
    margin: 0;
    color: var(--db-muted);
    font-size: .82rem;
}

.ax-help code,
.ax-list code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #eef2f7;
    color: var(--db-ink);
}

.ax-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--db-muted);
    font-size: .86rem;
    font-weight: 700;
}

.ax-products {
    display: grid;
    max-height: 460px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.ax-products li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-top: 1px solid var(--db-line);
    border-radius: 10px;
}

.ax-products li.is-selected {
    background: #f0f9ff;
}

.ax-products a {
    display: grid;
    flex: 1;
    min-width: 0;
    color: var(--db-ink);
    text-decoration: none;
}

.ax-products small {
    color: var(--db-muted);
}

.ax-count {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    font-weight: 800;
}

.ax-count.is-ok { background: #ecfdf5; color: #047857; }
.ax-count.is-warn { background: #fef3c7; color: #b45309; }
.ax-count.is-muted { background: #f1f5f9; color: var(--db-muted); }

.ax-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ax-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 12px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
}

.ax-list small {
    flex: 1;
    color: var(--db-muted);
}

.ax-list form {
    margin: 0;
}

.ax-list .pg-btn {
    min-height: 34px;
}

.ax-index {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    font-size: .76rem;
    font-weight: 800;
}

@media (max-width: 1024px) {
    .ax-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pg-deliver {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #fcfdfe;
}

.pg-deliver-title {
    font-size: .9rem;
}

.pg-deliver label {
    display: grid;
    gap: 6px;
    font-size: .84rem;
    font-weight: 700;
}

.pg-deliver label > span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.pg-deliver em {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-style: normal;
}

.pg-deliver em.is-ok { background: #ecfdf5; color: #047857; }
.pg-deliver em.is-warn { background: #fffbeb; color: #b45309; }

.pg-deliver textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem;
    font-weight: 400;
}

.pg-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #bae6fd;
    border-radius: 14px;
    background: #f0f9ff;
}

.pg-chain-icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #0e7490;
    color: #ffffff;
}

.pg-chain > div {
    display: grid;
    flex: 1;
    min-width: 220px;
    gap: 2px;
    font-size: .86rem;
}

.pg-chain strong {
    color: #0c4a6e;
}

.pg-chain span {
    color: var(--db-text);
}

.pg-chain a {
    color: #0e7490;
    font-weight: 700;
}

.pg-chain form {
    margin: 0;
}

.pg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pg-actions form {
    margin: 0;
}

.pg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: var(--db-text);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.pg-btn:hover {
    transform: translateY(-1px);
}

.pg-btn.is-approve {
    border-color: transparent;
    background: #059669;
    color: #ffffff;
    box-shadow: 0 10px 20px -12px rgba(5, 150, 105, .8);
}

.pg-btn.is-reject {
    border-color: #fecaca;
    color: #b91c1c;
}

.pg-btn.is-reject-confirm {
    border-color: transparent;
    background: #dc2626;
    color: #ffffff;
    justify-self: start;
}

.pg-reject {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #fecaca;
    border-radius: 14px;
    background: #fef2f2;
}

.pg-reject label {
    display: grid;
    gap: 6px;
    color: #7f1d1d;
    font-size: .86rem;
    font-weight: 700;
}

.pg-reject textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    font: inherit;
}

.pg-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pg-reasons button {
    padding: 6px 10px;
    border: 1px solid #fca5a5;
    border-radius: 999px;
    background: #ffffff;
    color: #991b1b;
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
}

.pg-reasons button:hover {
    background: #fee2e2;
}

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

.pg-method {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--db-line);
    border-radius: 16px;
}

.pg-method legend {
    padding: 0 6px;
    font-weight: 800;
}

.pg-method legend span {
    color: var(--db-muted);
    font-size: .76rem;
    font-weight: 600;
}

.pg-method label {
    display: grid;
    gap: 4px;
    color: var(--db-text);
    font-size: .84rem;
    font-weight: 700;
}

.pg-method input:not([type="checkbox"]) {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    font: inherit;
}

.pg-qr {
    display: grid;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--db-line);
}

.pg-qr img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border: 1px solid var(--db-line);
    border-radius: 10px;
}

.pg .pg-check {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pg-save {
    margin-top: 16px;
}

.pg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(2, 6, 23, .85);
}

.pg-lightbox img {
    max-width: min(900px, 100%);
    max-height: 90vh;
    border-radius: 12px;
    background: #ffffff;
}

.pg-lightbox button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    font-size: 1.6rem;
    cursor: pointer;
}

@media (max-width: 900px) {
    .pg-item,
    .pg-methods {
        grid-template-columns: minmax(0, 1fr);
    }

    .pg-proof-img img {
        max-height: 220px;
    }
}

@media (max-width: 560px) {
    .pg-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .pg-actions .pg-btn,
    .pg-actions form,
    .pg-actions form .pg-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Pedidos (ox-): lista compacta de compras + panel lateral de detalle
   ========================================================================== */
.ox {
    gap: 16px;
}

.ox-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.ox-top h1 {
    margin: 0;
    color: var(--db-ink);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.ox-top p {
    margin: 2px 0 0;
    color: var(--db-muted);
    font-size: .9rem;
}

.ox-top p b {
    color: #1d4ed8;
}

.ox-top-actions {
    display: flex;
    gap: 8px;
}

.ox-board {
    display: grid;
    gap: 12px;
    padding: 16px;
}

/* Pestañas */
.ox-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.ox-tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--db-muted);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.ox-tab b {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--db-ink);
    font-size: .75rem;
    text-align: center;
}

.ox-tab:hover {
    background: #f8fafc;
    color: var(--db-ink);
}

.ox-tab.is-alert.is-entregar b { background: #dbeafe; color: #1d4ed8; }
.ox-tab.is-alert.is-problemas b { background: #fee2e2; color: #b91c1c; }

.ox-tab.is-active {
    background: #0f172a;
    color: #ffffff;
}

.ox-tab.is-active b {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

/* Busqueda y orden */
.ox-toolbar {
    display: flex;
    gap: 8px;
}

.ox-search {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--db-line);
    border-radius: 11px;
    background: var(--db-soft);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ox-search:focus-within {
    border-color: #7dd3fc;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.ox-search svg {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--db-muted);
}

.ox .ox-search input {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: .9rem;
    outline: none;
}

.ox-search kbd {
    padding: 1px 7px;
    border: 1px solid var(--db-line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--db-muted);
    font-size: .72rem;
}

.ox .ox-toolbar select {
    flex: 0 0 180px;
    width: 180px;
    min-height: 42px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--db-line);
    border-radius: 11px;
    background-color: #ffffff;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
}

.ox-summary {
    margin: 0;
    color: var(--db-muted);
    font-size: .8rem;
}

.ox-summary b {
    color: var(--db-ink);
}

/* Tabla compacta */
.ox-list {
    display: grid;
    gap: 12px;
    transition: opacity .15s ease;
}

.ox-list.is-loading {
    opacity: .5;
    pointer-events: none;
}

.ox-table {
    overflow: hidden;
    border: 1px solid var(--db-line);
    border-radius: 12px;
}

.ox-row {
    display: grid;
    grid-template-columns: 130px minmax(120px, .9fr) minmax(140px, 1.1fr) minmax(160px, 1.5fr) 110px 132px;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 8px 14px;
    border-top: 1px solid var(--db-line);
    background: #ffffff;
    cursor: pointer;
    outline: none;
    transition: background-color .12s ease, box-shadow .12s ease;
}

.ox-row.is-head {
    min-height: 0;
    padding-top: 9px;
    padding-bottom: 9px;
    border-top: 0;
    background: var(--db-soft);
    color: var(--db-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: default;
}

.ox-row:not(.is-head):hover {
    background: #f8fafc;
}

.ox-row:not(.is-head):focus-visible {
    box-shadow: inset 3px 0 0 #38bdf8;
    background: #f0f9ff;
}

.ox-row.is-current {
    box-shadow: inset 3px 0 0 #0f172a;
    background: #f1f5f9;
}

.ox-row > span {
    display: grid;
    min-width: 0;
}

.ox-row strong {
    overflow: hidden;
    color: var(--db-ink);
    font-size: .88rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ox-row small {
    overflow: hidden;
    color: var(--db-muted);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ox-row small.is-late {
    color: #b91c1c;
    font-weight: 800;
}

.ox-row .is-num {
    justify-items: end;
    text-align: right;
}

.ox-c-products strong {
    font-weight: 600;
}

.ox-c-action {
    justify-items: end;
}

.ox-c-action .ox-btn {
    min-width: 108px;
}

.ox-row.is-cancelado strong {
    color: var(--db-muted);
}

.ox-empty {
    border: 1px dashed var(--db-line);
    border-radius: 12px;
}

/* Paginas */
.ox-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ox-page {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    border-radius: 9px;
    color: var(--db-text);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}

.ox-page:hover {
    background: #f1f5f9;
    color: var(--db-ink);
}

.ox-page.is-active {
    background: #0f172a;
    color: #ffffff;
}

.ox-page-gap {
    color: var(--db-muted);
}

/* Etiquetas de estado */
.ox-pill {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.ox-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ox-pill.is-red { background: #fee2e2; color: #b91c1c; }
.ox-pill.is-blue { background: #dbeafe; color: #1d4ed8; }
.ox-pill.is-violet { background: #ede9fe; color: #6d28d9; }
.ox-pill.is-amber { background: #fef3c7; color: #b45309; }
.ox-pill.is-green { background: #d1fae5; color: #047857; }
.ox-pill.is-gray { background: #f1f5f9; color: #64748b; }
.ox-pill.is-soft { padding: 0; background: transparent; }

/* Botones */
.ox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: var(--db-ink);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.ox-btn:hover { border-color: #94a3b8; color: var(--db-ink); }
.ox-btn.is-primary { border-color: #0f172a; background: #0f172a; color: #ffffff; }
.ox-btn.is-primary:hover { background: #1e293b; color: #ffffff; }
.ox-btn.is-danger { border-color: #dc2626; background: #dc2626; color: #ffffff; }
.ox-btn.is-danger:hover { background: #b91c1c; color: #ffffff; }
.ox-btn.is-ghost { border-color: transparent; background: #f1f5f9; }
.ox-btn.is-ghost:hover { background: #e2e8f0; }
.ox-btn.is-wa { color: #15803d; }
.ox-btn.is-danger-text { color: #b91c1c; }

.ox-btn:disabled,
.ox-btn.is-off {
    opacity: .45;
    pointer-events: none;
}

/* Panel lateral */
body.ox-locked {
    overflow: hidden;
}

.ox-drawer {
    position: fixed;
    inset: 0;
    z-index: 1080;
}

.ox-drawer[hidden] {
    display: none;
}

.ox-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    opacity: 0;
    transition: opacity .2s ease;
}

.ox-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    background: #ffffff;
    box-shadow: -24px 0 48px -24px rgba(15, 23, 42, .45);
    outline: none;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.ox-drawer.is-open .ox-drawer-backdrop { opacity: 1; }
.ox-drawer.is-open .ox-drawer-panel { transform: none; }

.ox-drawer-bar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--db-line);
    color: var(--db-muted);
    font-size: .8rem;
    font-weight: 700;
}

.ox-drawer-bar span {
    margin-right: auto;
    margin-left: 4px;
}

.ox-drawer .ox-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--db-line);
    border-radius: 9px;
    background: #ffffff;
    color: var(--db-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.ox-drawer .ox-icon:hover { background: #f1f5f9; }
.ox-drawer .ox-icon:disabled { opacity: .4; cursor: default; }
.ox-drawer .ox-icon.is-close { font-size: 1.3rem; }

.ox-drawer-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ox-skeleton {
    display: grid;
    gap: 14px;
    padding: 22px;
}

.ox-skeleton i {
    display: block;
    height: 18px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: ox-shimmer 1.1s linear infinite;
}

.ox-skeleton i:nth-child(1) { width: 40%; height: 26px; }
.ox-skeleton i:nth-child(2) { width: 70%; }
.ox-skeleton i:nth-child(3) { height: 70px; }
.ox-skeleton i:nth-child(4) { height: 70px; }

@keyframes ox-shimmer {
    to { background-position: -200% 0; }
}

/* Detalle */
.oxd {
    display: grid;
    gap: 16px;
    padding: 20px 22px 28px;
}

.oxd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.oxd-head > div:first-child {
    display: grid;
    justify-items: start;
    gap: 4px;
}

.oxd-head h2 {
    margin: 0;
    color: var(--db-ink);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.oxd-head small,
.oxd-total small {
    color: var(--db-muted);
    font-size: .8rem;
}

.oxd-total {
    display: grid;
    justify-items: end;
}

.oxd-total strong {
    color: var(--db-ink);
    font-size: 1.35rem;
    font-weight: 800;
    white-space: nowrap;
}

.oxd-customer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--db-soft);
}

.oxd-customer > div {
    display: grid;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.oxd-customer strong {
    color: var(--db-ink);
}

.oxd-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ox-chip {
    overflow: hidden;
    max-width: 100%;
    padding: 2px 9px;
    border: 1px solid var(--db-line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--db-text);
    font: inherit;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: copy;
}

.ox-chip:hover {
    border-color: #94a3b8;
}

.ox-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2fe, #ccfbf1);
    color: #0e7490;
    font-weight: 800;
}

.oxd-alert {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 600;
}

.oxd-alert.is-violet {
    background: #f5f3ff;
    color: #5b21b6;
}

.oxd-alert a {
    color: inherit;
    font-weight: 800;
}

.oxd-lines {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.oxd-line {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
}

.oxd-line-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ox-product {
    display: grid;
    min-width: 0;
}

.ox-product strong {
    color: var(--db-ink);
    font-weight: 700;
}

.ox-product strong span {
    color: var(--db-muted);
    font-weight: 600;
}

.ox-product small {
    color: var(--db-muted);
    font-size: .78rem;
}

.oxd-line-side {
    display: grid;
    flex: none;
    justify-items: end;
    gap: 2px;
}

.oxd-line-side small {
    color: var(--db-muted);
    font-size: .76rem;
    font-weight: 600;
}

.oxd-line-side small.is-green { color: #047857; }
.oxd-line-side small.is-red { color: #b91c1c; }
.oxd-line-side small.is-amber { color: #b45309; }

.oxd-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oxd-line-actions:empty {
    display: none;
}

.ox-report {
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
    font-size: .84rem;
}

.oxd-note {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fffbeb;
    color: #78350f;
    font-size: .85rem;
}

.oxd-note b {
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.oxd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--db-line);
}

.oxd-actions form {
    margin: 0;
}

.oxd-history {
    color: var(--db-muted);
    font-size: .82rem;
}

.oxd-history summary {
    font-weight: 700;
    cursor: pointer;
}

.oxd-history p {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--db-soft);
}

/* Formularios desplegables */
.ox-panel {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-soft);
    animation: ox-in .16s ease;
}

.ox-panel[hidden] { display: none; }
.ox-panel.is-danger { border-color: #fecaca; background: #fff7f7; }

@keyframes ox-in {
    from { opacity: 0; transform: translateY(-4px); }
}

.ox-panel p {
    margin: 0;
    color: var(--db-text);
    font-size: .85rem;
}

.ox-panel small {
    color: var(--db-muted);
    font-size: .78rem;
}

.ox-panel-title {
    color: var(--db-ink);
    font-size: .92rem;
}

.ox-access {
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: .84rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.ox-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ox-mode {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
}

.ox-mode:has(input:checked) {
    border-color: #0f172a;
    box-shadow: 0 0 0 1px #0f172a;
}

.ox-mode.is-disabled {
    cursor: not-allowed;
    opacity: .75;
}

.ox .ox-mode input,
.ox-drawer .ox-mode input {
    flex: none;
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    accent-color: #0f172a;
}

.ox-mode span { display: grid; gap: 2px; }
.ox-mode strong { color: var(--db-ink); font-size: .88rem; }
.ox-mode a { color: #0e7490; font-size: .8rem; font-weight: 700; }

.ox-write { display: grid; gap: 4px; }
.ox-write[hidden] { display: none; }

.ox-drawer textarea,
.ox-drawer .ox-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
    font-size: .9rem;
}

.ox-drawer textarea {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .85rem;
    resize: vertical;
}

.ox-drawer textarea:focus,
.ox-drawer .ox-field input:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.ox-hint.is-error {
    color: #b91c1c !important;
    font-weight: 700;
}

.ox-field {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--db-ink);
    font-size: .84rem;
    font-weight: 700;
}

.ox-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--db-ink);
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
}

.ox-drawer .ox-check input {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 0 !important;
    accent-color: #0f172a;
}

.ox-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ox-reasons button {
    padding: 5px 10px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #ffffff;
    color: #991b1b;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

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

/* Avisos flotantes */
.ox-toasts {
    position: fixed;
    bottom: 18px;
    left: 50%;
    z-index: 1100;
    display: grid;
    gap: 8px;
    width: min(420px, calc(100% - 32px));
    transform: translateX(-50%);
    pointer-events: none;
}

.ox-toast {
    padding: 12px 16px;
    border-radius: 12px;
    background: #0f172a;
    color: #ffffff;
    font-size: .88rem;
    font-weight: 600;
    box-shadow: 0 16px 32px -16px rgba(15, 23, 42, .6);
    animation: ox-toast .2s ease;
    transition: opacity .3s ease, transform .3s ease;
}

.ox-toast.is-ok { background: #065f46; }
.ox-toast.is-danger { background: #991b1b; }
.ox-toast.is-out { opacity: 0; transform: translateY(8px); }

@keyframes ox-toast {
    from { opacity: 0; transform: translateY(8px); }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .ox-board { padding: 12px; }
    .ox-row.is-head { display: none; }

    /* Cada compra en dos lineas */
    .ox-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "state total"
            "customer action"
            "order action";
        gap: 4px 12px;
        padding: 12px;
    }

    .ox-c-state { grid-area: state; }
    .ox-c-total { grid-area: total; }
    .ox-c-customer { grid-area: customer; }
    .ox-c-order { grid-area: order; display: flex !important; gap: 8px; }
    .ox-c-action { grid-area: action; align-self: center; }
    .ox-c-action .ox-btn { min-width: 0; }
    .ox-c-order strong { color: var(--db-muted); font-size: .76rem; font-weight: 600; }
    .ox-toolbar { flex-wrap: wrap; }
    .ox-search { flex-basis: 100%; }
    .ox-search kbd { display: none; }
    .ox .ox-toolbar select { flex: 1 1 auto; width: auto; }
    .ox-modes { grid-template-columns: 1fr; }
    .oxd { padding: 16px 16px 24px; }
    .ox-drawer-panel { width: 100%; }
}

/* ==========================================================================
   Pagos → Datos de pago (pd-): lista de metodos + editor con vista previa
   ========================================================================== */
.pd {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
}

.pd[hidden] {
    display: none;
}

.pd-nav {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 18px 14px;
    border-right: 1px solid var(--db-line);
    background: var(--db-soft);
}

.pd-summary {
    display: grid;
    gap: 8px;
    margin: 0 4px 10px;
    padding: 14px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
}

.pd-summary strong {
    color: var(--db-ink);
    font-size: .92rem;
}

.pd-summary small {
    color: var(--db-muted);
    font-size: .76rem;
}

.pd-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.pd-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #14b8a6);
    transition: width .3s ease;
}

.pd-group {
    margin: 10px 8px 2px;
    color: var(--db-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pd-item {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.pd-item:hover {
    background: #ffffff;
    color: inherit;
}

.pd-item.is-active {
    border-color: #0f172a;
    background: #ffffff;
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .45);
}

.pd-item-text {
    display: grid;
    min-width: 0;
}

.pd-item-text strong {
    color: var(--db-ink);
    font-size: .88rem;
}

.pd-item-text small {
    overflow: hidden;
    color: var(--db-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-dirty {
    position: absolute;
    top: 8px;
    left: 38px;
    width: 9px;
    height: 9px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #f59e0b;
}

.pd-dirty[hidden] {
    display: none;
}

.pd-logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid var(--db-line);
    border-radius: 10px;
    background: #ffffff;
}

.pd-logo img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.pd-logo b {
    color: #0f766e;
    font-size: 1.05rem;
}

.pd-logo.is-lg {
    width: 52px;
    height: 52px;
    border-radius: 14px;
}

.pd-logo.is-lg img {
    width: 36px;
    height: 36px;
}

.pd-status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.pd-status.is-activo { background: #d1fae5; color: #047857; }
.pd-status.is-pausado { background: #e2e8f0; color: #475569; }
.pd-status.is-incompleto { background: #fef3c7; color: #b45309; }
.pd-status.is-vacio { background: #f1f5f9; color: #94a3b8; }

/* Editor */
.pd-editor {
    min-width: 0;
}

.pd-method {
    display: grid;
    gap: 18px;
    padding: 22px 24px 0;
}

.pd-method[hidden] {
    display: none;
}

.pd-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pd-head > div {
    flex: 1;
    min-width: 0;
}

.pd-head h2 {
    margin: 0;
    color: var(--db-ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.pd-head p {
    margin: 2px 0 0;
    color: var(--db-muted);
    font-size: .84rem;
}

/* Interruptor visible / oculto */
.pd-switch {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.pd .pd-switch input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.pd-switch span {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .2s ease;
}

.pd-switch span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transition: transform .2s ease;
}

.pd-switch input:checked + span { background: #10b981; }
.pd-switch input:checked + span::after { transform: translateX(18px); }
.pd-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(56, 189, 248, .35); }
.pd-switch input:disabled + span { opacity: .45; cursor: not-allowed; }

.pd-switch b {
    min-width: 48px;
    color: var(--db-text);
    font-size: .82rem;
}

.pd-banner {
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 600;
}

.pd-banner.is-activo { background: #ecfdf5; color: #047857; }
.pd-banner.is-pausado { background: #f1f5f9; color: #475569; }
.pd-banner.is-incompleto { background: #fffbeb; color: #b45309; }
.pd-banner.is-vacio { background: #f8fafc; color: var(--db-muted); }

.pd-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 24px;
}

.pd-fields {
    display: grid;
    gap: 14px;
}

.pd-field {
    display: grid;
    gap: 5px;
    margin: 0;
}

.pd-field > span {
    color: var(--db-ink);
    font-size: .84rem;
    font-weight: 700;
}

.pd-field > span em {
    color: #dc2626;
    font-style: normal;
}

.pd-field > span small {
    color: var(--db-muted);
    font-weight: 500;
}

.pd .pd-field input[data-type] {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    background: #ffffff;
    color: var(--db-ink);
    font: inherit;
    font-size: .92rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pd .pd-field input[data-type="trc20"],
.pd .pd-field input[data-type="evm"],
.pd .pd-field input[data-type="btc"],
.pd .pd-field input[data-type="cci"] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .86rem;
}

.pd .pd-field input[data-type]:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.pd .pd-field input.is-ok {
    border-color: #6ee7b7;
}

.pd .pd-field input.is-error {
    border-color: #f87171;
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, .14);
}

.pd-hint {
    color: var(--db-muted);
    font-size: .76rem;
}

.pd-hint.is-error {
    color: #b91c1c;
    font-weight: 700;
}

/* Zona para soltar el QR */
.pd-drop {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    background: var(--db-soft);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.pd-drop:hover,
.pd-drop.is-over {
    border-color: #38bdf8;
    background: #f0f9ff;
}

.pd .pd-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    cursor: pointer;
}

.pd-drop img {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    background: #ffffff;
    object-fit: contain;
}

.pd-drop img[hidden] {
    display: none;
}

.pd-drop-text {
    display: grid;
    gap: 2px;
}

.pd-drop-text strong {
    color: var(--db-ink);
    font-size: .88rem;
}

.pd-drop-text small {
    color: var(--db-muted);
    font-size: .76rem;
}

.pd-link {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: #0e7490;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.pd-link.is-danger { color: #b91c1c; }
.pd-link[hidden] { display: none; }

/* Vista previa */
.pd-preview {
    position: sticky;
    top: 86px;
}

.pd-preview-label {
    margin: 0 0 8px;
    color: var(--db-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pd-phone {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--db-line);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 18px 36px -26px rgba(15, 23, 42, .5);
}

.pd-phone-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pd-phone-head strong {
    color: var(--db-ink);
}

.pd-preview-rows {
    display: grid;
    gap: 8px;
    margin: 0;
}

.pd-preview-rows div {
    padding: 8px 10px;
    border: 1px solid var(--db-line);
    border-radius: 10px;
    background: #ffffff;
}

.pd-preview-rows dt {
    color: var(--db-muted);
    font-size: .7rem;
    font-weight: 700;
}

.pd-preview-rows dd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    color: var(--db-ink);
    font-size: .86rem;
    font-weight: 700;
}

.pd-preview-rows dd span {
    overflow-wrap: anywhere;
}

.pd-preview-rows button {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--db-line);
    border-radius: 7px;
    background: #f8fafc;
    color: #0e7490;
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
}

.pd-preview-qr {
    justify-self: center;
    width: 150px;
    height: 150px;
    padding: 6px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: #ffffff;
    object-fit: contain;
}

.pd-preview-qr[hidden],
.pd-preview-empty[hidden] {
    display: none;
}

.pd-preview-empty,
.pd-preview-op {
    margin: 0;
    color: var(--db-muted);
    font-size: .78rem;
}

.pd-preview-op b {
    color: var(--db-text);
}

/* Barra de guardado */
.pd-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 -24px;
    padding: 14px 24px;
    border-top: 1px solid var(--db-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
}

.pd-foot [data-clear-method] {
    margin-right: auto;
}

.pd-unsaved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b45309;
    font-size: .8rem;
    font-weight: 700;
}

.pd-unsaved::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
}

.pd-unsaved[hidden],
.pd-foot .pg-btn[hidden] {
    display: none;
}

.pd-foot .pg-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.pd-toasts {
    position: fixed;
    bottom: 18px;
    left: 50%;
    z-index: 1100;
    display: grid;
    gap: 8px;
    width: min(440px, calc(100% - 32px));
    transform: translateX(-50%);
    pointer-events: none;
}

.pd-toast {
    padding: 12px 16px;
    border-radius: 12px;
    color: #ffffff;
    font-size: .88rem;
    font-weight: 600;
    box-shadow: 0 16px 32px -16px rgba(15, 23, 42, .6);
    animation: pd-toast .2s ease;
    transition: opacity .3s ease, transform .3s ease;
}

.pd-toast.is-ok { background: #065f46; }
.pd-toast.is-error { background: #991b1b; }
.pd-toast.is-out { opacity: 0; transform: translateY(8px); }

@keyframes pd-toast {
    from { opacity: 0; transform: translateY(8px); }
}

@media (max-width: 1180px) {
    .pd-body { grid-template-columns: minmax(0, 1fr); }
    .pd-preview { position: static; max-width: 360px; }
}

@media (max-width: 900px) {
    .pd { grid-template-columns: minmax(0, 1fr); }
    .pd-nav { border-right: 0; border-bottom: 1px solid var(--db-line); }
    .pd-method { padding: 18px 16px 0; }
    .pd-foot { margin: 0 -16px; padding: 12px 16px; }
    .pd-head { flex-wrap: wrap; }
}
/* ==========================================================================
   Inventario (iv-): stock + accesos por producto, con historial
   ========================================================================== */
.iv-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.iv-kpis > div {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
}

.iv-kpis span {
    color: var(--db-muted);
    font-size: .78rem;
    font-weight: 700;
}

.iv-kpis b {
    color: var(--db-ink);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.iv-kpis small {
    color: var(--db-muted);
    font-size: .74rem;
}

.iv-kpis .is-blue {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.iv-kpis .is-blue b { color: #1d4ed8; }

.iv-table {
    overflow: hidden;
    border: 1px solid var(--db-line);
    border-radius: 12px;
}

.iv-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.6fr) 150px 100px 100px minmax(170px, 1.2fr) 110px;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 8px 14px;
    border-top: 1px solid var(--db-line);
    background: #ffffff;
    cursor: pointer;
    outline: none;
    transition: background-color .12s ease;
}

.iv-row[hidden] { display: none; }

.iv-row.is-head {
    min-height: 0;
    padding-top: 9px;
    padding-bottom: 9px;
    border-top: 0;
    background: var(--db-soft);
    color: var(--db-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: default;
}

.iv-row:not(.is-head):hover { background: #f8fafc; }
.iv-row:not(.is-head):focus-visible { background: #f0f9ff; box-shadow: inset 3px 0 0 #38bdf8; }
.iv-row.is-current { background: #f1f5f9; box-shadow: inset 3px 0 0 #0f172a; }

.iv-row > span {
    display: grid;
    min-width: 0;
}

.iv-c-product strong {
    overflow: hidden;
    color: var(--db-ink);
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-c-product small,
.iv-c-num small,
.iv-c-access small {
    color: var(--db-muted);
    font-size: .74rem;
}

.iv-c-stock {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.iv-c-stock b {
    min-width: 30px;
    color: var(--db-ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.iv-row.is-agotado .iv-c-stock b { color: #b91c1c; }

.iv-c-num b {
    color: var(--db-ink);
    font-size: 1rem;
}

.iv-c-access { gap: 4px; }

.iv-c-access > span:first-child {
    color: var(--db-text);
    font-size: .84rem;
}

.iv-c-access small.is-red {
    color: #b91c1c;
    font-weight: 700;
}

.iv-bar {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.iv-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #14b8a6;
}

.iv-bar.is-over i { background: #ef4444; }

.iv-c-action { justify-items: end; }

/* Panel del producto */
.ivd {
    display: grid;
    gap: 14px;
    padding: 20px 22px 28px;
}

.ivd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ivd-head small {
    color: var(--db-muted);
    font-size: .78rem;
    font-weight: 700;
}

.ivd-head h2 {
    margin: 0;
    color: var(--db-ink);
    font-size: 1.3rem;
    font-weight: 800;
}

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

.ivd-stats > div {
    display: grid;
    padding: 10px 12px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-soft);
}

.ivd-stats dt {
    color: var(--db-muted);
    font-size: .72rem;
    font-weight: 700;
}

.ivd-stats dd {
    margin: 0;
    color: var(--db-ink);
    font-size: 1.4rem;
    font-weight: 800;
}

.ivd-stats small {
    color: var(--db-muted);
    font-size: .7rem;
}

.ivd-stats .is-agotado { border-color: #fecaca; background: #fef2f2; }
.ivd-stats .is-agotado dd { color: #b91c1c; }
.ivd-stats .is-bajo { border-color: #fde68a; background: #fffbeb; }

.ivd-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .85rem;
}

.ivd-alert.is-red { background: #fef2f2; color: #991b1b; }
.ivd-alert.is-blue { background: #eff6ff; color: #1e40af; }

.ivd-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
}

.ivd-card h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: var(--db-ink);
    font-size: .98rem;
    font-weight: 800;
}

.ivd-card h3 small {
    color: var(--db-muted);
    font-size: .76rem;
    font-weight: 600;
}

.iv-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 3px;
    border-radius: 11px;
    background: #f1f5f9;
}

.iv-seg label {
    position: relative;
    margin: 0;
    padding: 8px 6px;
    border-radius: 9px;
    color: var(--db-muted);
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.ox-drawer .iv-seg input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.iv-seg label:has(input:checked) {
    background: #ffffff;
    color: var(--db-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}

.iv-seg label:has(input:disabled) {
    opacity: .4;
    cursor: not-allowed;
}

.iv-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ox-drawer .iv-qty input {
    width: 90px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
}

.iv-result {
    margin: 0 0 0 6px;
    color: var(--db-muted);
    font-size: .88rem;
}

.iv-result b {
    color: var(--db-ink);
    font-size: 1.05rem;
}

.ox-drawer .ox-reasons button {
    border-color: var(--db-line);
    color: var(--db-text);
}

.iv-access-msg {
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: .82rem;
    font-weight: 600;
}

.iv-access-msg.is-error {
    background: #fef2f2;
    color: #b91c1c;
}

.ox-hint.is-error {
    color: #b91c1c;
    font-weight: 700;
}

.ivd-list summary {
    list-style: none;
    cursor: pointer;
}

.ivd-list ul,
.iv-history {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ivd-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    background: var(--db-soft);
}

.ivd-list form { margin: 0; }

.iv-index {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #ffffff;
    color: var(--db-muted);
    font-size: .74rem;
    font-weight: 800;
}

.ivd-list code {
    overflow: hidden;
    color: var(--db-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ivd-list small {
    color: var(--db-muted);
    font-size: .74rem;
}

.iv-history li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--db-line);
}

.iv-history li:last-child { border-bottom: 0; }

.iv-history li > div {
    display: grid;
    min-width: 0;
}

.iv-history strong {
    color: var(--db-ink);
    font-size: .86rem;
}

.iv-history small {
    overflow: hidden;
    color: var(--db-muted);
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-history-side {
    justify-items: end;
    text-align: right;
}

.iv-history-side b {
    color: var(--db-text);
    font-size: .8rem;
}

.iv-delta {
    display: grid;
    place-items: center;
    height: 30px;
    border-radius: 9px;
    font-size: .88rem;
    font-weight: 800;
}

.iv-delta.is-up { background: #d1fae5; color: #047857; }
.iv-delta.is-down { background: #fee2e2; color: #b91c1c; }

/* Stock de solo lectura en Gestion de tienda */
.admin-stock-link {
    display: grid;
    gap: 2px;
    font-weight: 700;
}

.admin-stock-link strong { font-size: 1rem; }

.admin-stock-link a {
    color: #0e7490;
    font-size: .82rem;
}

.admin-nav-badge.is-muted {
    background: rgba(148, 163, 184, .35);
    color: #e2e8f0;
}

@media (max-width: 1180px) {
    .iv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .iv-row { grid-template-columns: minmax(160px, 1.4fr) 140px 90px minmax(150px, 1fr) 104px; }
    .iv-row > span:nth-child(4) { display: none !important; }
}

@media (max-width: 760px) {
    .iv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .iv-row.is-head { display: none; }
    .iv-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "product stock"
            "access access"
            "reserved action";
        gap: 6px 12px;
        padding: 12px;
    }
    .iv-c-product { grid-area: product; }
    .iv-c-stock { grid-area: stock; }
    .iv-c-access { grid-area: access; }
    .iv-row > .iv-c-num:nth-child(3) { grid-area: reserved; display: flex !important; gap: 6px; align-items: baseline; }
    .iv-c-action { grid-area: action; }
    .ivd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ivd { padding: 16px 16px 24px; }
}

.ox-drawer .ox-hint {
    color: var(--db-muted);
    font-size: .78rem;
}

.ivd .ox-field {
    display: block;
}

.ivd .ox-field input {
    display: block;
    margin-top: 6px;
}

/* ==========================================================================
   Productos (pr-): catalogo + stock + accesos en una sola vista
   ========================================================================== */
.pr-row {
    grid-template-columns: minmax(220px, 1.8fr) 120px 190px 90px 90px minmax(150px, 1.1fr) 70px;
}

.pr-c-product {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.pr-c-product > span:last-child {
    display: grid;
    min-width: 0;
}

.pr-c-product strong {
    overflow: hidden;
    color: var(--db-ink);
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-c-product small {
    color: var(--db-muted);
    font-size: .74rem;
}

.pr-c-product small b.is-muted {
    color: #94a3b8;
}

.pr-star {
    color: #f59e0b;
    font-style: normal;
}

.pr-thumb {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border: 1px solid var(--db-line);
    border-radius: 10px;
    background: linear-gradient(135deg, #e0f2fe, #ccfbf1);
    color: #0e7490;
    font-weight: 800;
}

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

.pr-thumb.is-lg {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    font-size: 1.4rem;
}

.pr-c-price {
    display: grid;
    justify-items: start;
}

.pr-c-price b {
    color: var(--db-ink);
    font-size: .95rem;
}

.pr-c-price small {
    color: var(--db-muted);
    font-size: .72rem;
}

.pr-c-visible {
    justify-items: end;
}

.pr-row.is-hidden-product .pr-thumb {
    opacity: .5;
}

/* Panel del producto */
.pr-drawer {
    width: min(620px, 100%);
}

.pr-head {
    align-items: center;
}

.pr-head > div {
    flex: 1;
    min-width: 0;
}

.pr-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.pr-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 3px;
    border-radius: 12px;
    background: #f1f5f9;
}

.pr-tabs button {
    padding: 9px 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--db-muted);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}

.pr-tabs button b {
    margin-left: 4px;
    padding: 0 7px;
    border-radius: 999px;
    background: #e2e8f0;
    color: var(--db-ink);
    font-size: .72rem;
}

.pr-tabs button[aria-selected="true"] {
    background: #ffffff;
    color: var(--db-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}

.pr-panel {
    display: grid;
    gap: 14px;
}

.pr-panel[hidden] {
    display: none;
}

.pr-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 12px 14px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-soft);
}

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

.ox-drawer .pr-panel input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ox-drawer .pr-panel textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
    font-size: .9rem;
}

.ox-drawer .pr-panel input:focus,
.ox-drawer .pr-panel textarea:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.pr-calc {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f0fdfa;
    color: #115e59;
    font-size: .84rem;
}

.pr-calc .is-red {
    color: #b91c1c;
}

.pr-drop img {
    width: 120px;
    height: 80px;
    object-fit: cover;
}

.pr-image-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.pr-image-actions input {
    flex: 1;
    min-width: 0;
}

.pr-save {
    position: sticky;
    bottom: -28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 -22px -28px;
    padding: 12px 22px;
    border-top: 1px solid var(--db-line);
    background: rgba(255, 255, 255, .96);
}

.pr-save .pd-unsaved {
    margin-right: auto;
}

.ox-drawer .pd-switch input,
.pr-c-visible .pd-switch input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.ox-drawer .pd-switch b {
    color: var(--db-ink);
    font-size: .86rem;
}

/* ==========================================================================
   Configuracion de la tienda (st-)
   ========================================================================== */
.st-layout {
    grid-template-columns: 280px minmax(0, 1fr);
}

.st-item {
    grid-template-columns: 36px minmax(0, 1fr);
}

.st-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #0f766e;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.st-section {
    padding-bottom: 0;
}

.st-head h2 {
    margin: 0;
    color: var(--db-ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.st-head p {
    margin: 2px 0 0;
    color: var(--db-muted);
    font-size: .86rem;
}

.st-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

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

.st-stack {
    display: grid;
    gap: 14px;
}

.st-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

.pd .st-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    background: #ffffff;
    color: var(--db-ink);
    font: inherit;
    font-size: .92rem;
}

.pd .st-input:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.pd .st-input.is-error {
    border-color: #f87171;
    background: #fffafa;
}

.st-drop img {
    width: 110px;
    height: 70px;
    object-fit: contain;
}

.st-drop.is-wide img {
    width: 160px;
    height: 70px;
    object-fit: cover;
}

.pd .pr-image-actions input {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
    font-size: .86rem;
}

.st-foot {
    margin-top: 6px;
}

.st-slides {
    display: grid;
    gap: 12px;
    padding-bottom: 22px;
}

.st-slide {
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
}

.st-slide[hidden] {
    display: none;
}

.st-slide.is-new {
    padding: 16px;
    border-color: #7dd3fc;
    background: #f0f9ff;
}

.st-slide.is-new h3 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.st-slide.is-off .st-slide-thumb {
    opacity: .45;
}

.st-slide-summary {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
}

.st-slide-summary strong {
    display: block;
    overflow: hidden;
    color: var(--db-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-slide-summary small {
    color: var(--db-muted);
    font-size: .78rem;
}

.st-slide-thumb {
    display: block;
    width: 120px;
    height: 56px;
    overflow: hidden;
    border-radius: 10px;
    background: #e2e8f0;
}

.st-slide-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-inline {
    margin: 0;
}

.st-slide > .st-slide-form {
    padding: 14px;
    border-top: 1px solid var(--db-line);
}

.st-slide.is-new > .st-slide-form {
    padding: 0;
    border: 0;
}

.st-slide-form[hidden] {
    display: none;
}

.st-slide-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.st-slide-actions .pd-link {
    margin-right: auto;
}

.pd .pd-switch input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.st-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f172a, #134e4a);
    color: #cbd5e1;
}

.st-rate > div {
    display: grid;
}

.st-rate strong {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 800;
}

.st-rate small {
    font-size: .8rem;
}

.st-rate .ox-btn {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
}

.st-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pd .st-modes .ox-mode input {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    margin: 3px 0 0 !important;
    accent-color: #0f172a;
}

.pd-field.is-disabled {
    opacity: .45;
}

/* Configuración → Franja de plataformas: logo de cada herramienta */
.st-brands {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding-bottom: 22px;
}

.st-brand {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 10px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
}

.st-brand-logo {
    display: grid;
    width: 52px;
    height: 52px;
    overflow: hidden;
    place-items: center;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .85rem;
    font-weight: 800;
}

.st-brand.has-logo .st-brand-logo {
    border-style: solid;
    border-color: var(--db-line);
    background: #ffffff;
}

.st-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.st-brand-text strong {
    display: block;
    overflow: hidden;
    color: var(--db-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-brand-text small {
    color: var(--db-muted);
    font-size: .78rem;
}

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

.st-brand-upload {
    position: relative;
    cursor: pointer;
}

.st-brand-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.st-brand-upload:focus-within {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.st-brand-upload.is-busy {
    opacity: .6;
    pointer-events: none;
}

@media (max-width: 1180px) {
    .pr-row { grid-template-columns: minmax(200px, 1.6fr) 110px 185px 80px minmax(140px, 1fr) 64px; }
    .pr-row > span:nth-child(5) { display: none !important; }
}

@media (max-width: 900px) {
    .st-layout { grid-template-columns: minmax(0, 1fr); }
    .st-grid, .st-row, .st-modes, .pr-grid { grid-template-columns: minmax(0, 1fr); }
    .st-slide-summary { grid-template-columns: 90px minmax(0, 1fr) auto; }
    .st-slide-summary [data-slide-edit] { grid-column: 1 / -1; }
    .st-slide-thumb { width: 90px; }
}

@media (max-width: 760px) {
    .pr-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "product product visible"
            "price stock stock"
            "access access access";
        gap: 8px 12px;
        padding: 12px;
    }
    .pr-row .pr-c-product { grid-area: product; }
    .pr-row .pr-c-visible { grid-area: visible; }
    .pr-row .pr-c-price { grid-area: price; }
    .pr-row .iv-c-stock { grid-area: stock; }
    .pr-row .iv-c-access { grid-area: access; }
    .pr-row > .iv-c-num { display: none !important; }
    .pr-save { margin: 0 -16px -24px; padding: 12px 16px; }
}

.ox-drawer .pd-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    cursor: pointer;
}

.ox-drawer .pd-drop {
    min-height: 96px;
}

/* ==========================================================================
   Mi cuenta del administrador (ac2-)
   ========================================================================== */
.ac2-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.ac2-profile {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    overflow: hidden;
    padding: 0 20px 20px;
    text-align: center;
}

.ac2-banner {
    width: calc(100% + 40px);
    height: 86px;
    margin: 0 -20px;
    background: linear-gradient(135deg, #0b1220, #10233a 55%, #0e7490);
}

.ac2-avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-top: -42px;
    border: 4px solid #ffffff;
    border-radius: 24px;
    background: linear-gradient(135deg, #5eead4, #38bdf8);
    box-shadow: 0 12px 24px -12px rgba(14, 116, 144, .6);
    color: #04202c;
    font-size: 1.7rem;
    font-weight: 800;
}

.ac2-profile h2 {
    margin: 6px 0 0;
    color: var(--db-ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.ac2-user {
    margin: 0 0 4px;
    color: var(--db-muted);
    font-size: .88rem;
}

.ac2-facts {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--db-line);
    text-align: left;
}

.ac2-facts div {
    display: grid;
    gap: 2px;
}

.ac2-facts dt {
    color: var(--db-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ac2-facts dd {
    display: grid;
    margin: 0;
    color: var(--db-ink);
    font-size: .9rem;
    font-weight: 700;
}

.ac2-facts small {
    color: var(--db-muted);
    font-size: .76rem;
    font-weight: 500;
}

.ac2-note {
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--db-soft);
    color: var(--db-muted);
    font-size: .78rem;
    text-align: left;
}

.ac2-main {
    display: grid;
    gap: 18px;
}

.ac2-tabs {
    max-width: 480px;
}

.ac2-tabs b.is-alert {
    background: #fee2e2;
    color: #b91c1c;
}

.ac2-panel {
    display: grid;
    gap: 18px;
}

.ac2-panel[hidden] {
    display: none;
}

.ac2-form {
    display: grid;
    gap: 14px;
}

.ac2-form h3,
.ac2-logins h3 {
    margin: 0;
    color: var(--db-ink);
    font-size: 1.02rem;
    font-weight: 800;
}

.ac2-sub {
    margin: -8px 0 0;
    color: var(--db-muted);
    font-size: .84rem;
}

.ac2 .st-input {
    width: 100%;
    max-width: 460px;
    min-height: 44px;
    margin-top: 6px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    background: #ffffff;
    color: var(--db-ink);
    font: inherit;
    font-size: .95rem;
}

.ac2 .st-input:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.ac2 .ox-field {
    display: grid;
    gap: 2px;
}

.ac2 .pd-hint {
    display: block;
    margin-top: 4px;
    color: var(--db-muted);
    font-size: .78rem;
    font-weight: 500;
}

.ac2 .pd-hint.is-error {
    color: #b91c1c;
    font-weight: 700;
}

.ac2-readonly {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
}

.ac2-readonly > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 10px;
    padding: 12px 14px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-soft);
}

.ac2-readonly span {
    grid-column: 1 / -1;
    color: var(--db-muted);
    font-size: .74rem;
    font-weight: 700;
}

.ac2-readonly strong {
    overflow: hidden;
    color: var(--db-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac2-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--db-line);
}

.ac2-actions .ox-btn.is-primary {
    margin-left: auto;
}

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

.ac2 .ac-field .ac-control {
    max-width: none;
}

.ac2 .ac-rules {
    margin: -4px 0 0;
}

.ac2-logins {
    display: grid;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--db-line);
}

.ac2-logins ul,
.ac2-timeline {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ac2-logins li,
.ac2-timeline li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px dashed var(--db-line);
}

.ac2-logins li:last-child,
.ac2-timeline li:last-child {
    border-bottom: 0;
}

.ac2-logins li > div,
.ac2-timeline li > div {
    display: grid;
    min-width: 0;
}

.ac2-logins strong,
.ac2-timeline strong {
    color: var(--db-ink);
    font-size: .88rem;
}

.ac2-logins small,
.ac2-timeline small {
    overflow: hidden;
    color: var(--db-muted);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac2-logins time,
.ac2-timeline time {
    color: var(--db-muted);
    font-size: .76rem;
    white-space: nowrap;
}

.ac2-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
}

.ac2-logins .is-ok .ac2-dot { background: #10b981; }
.ac2-logins .is-fail .ac2-dot { background: #ef4444; }
.ac2-logins .is-fail strong { color: #b91c1c; }
.ac2-dot.is-green { background: #10b981; }
.ac2-dot.is-red { background: #ef4444; }
.ac2-dot.is-blue { background: #3b82f6; }
.ac2-dot.is-amber { background: #f59e0b; }

.ac2-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ac2-stats div {
    display: grid;
    padding: 14px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-soft);
}

.ac2-stats b {
    color: var(--db-ink);
    font-size: 1.5rem;
    font-weight: 800;
}

.ac2-stats span {
    color: var(--db-muted);
    font-size: .78rem;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .ac2-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .ac2-two,
    .ac2-readonly,
    .ac2-stats { grid-template-columns: minmax(0, 1fr); }
    .ac2-actions .ox-btn { flex: 1 1 auto; }
}

.ac2-form > .ac-field {
    width: calc(50% - 7px);
}

.ac2-form > .ac-field .ac-control,
.ac2-two .ac-control {
    width: 100%;
    max-width: none;
}

@media (max-width: 640px) {
    .ac2-form > .ac-field { width: 100%; }
}

/* ==========================================================================
   Pagos → Por validar (rv-): cola + panel de revision
   ========================================================================== */
.rv-stats {
    display: flex;
    gap: 10px;
    margin: 0;
}

.rv-stats div {
    display: grid;
    padding: 8px 14px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: #ffffff;
}

.rv-stats dt {
    color: var(--db-muted);
    font-size: .72rem;
    font-weight: 700;
}

.rv-stats dd {
    margin: 0;
    color: var(--db-ink);
    font-size: 1.1rem;
    font-weight: 800;
}

.rv[hidden],
.rv-layout[hidden],
.rv-empty[hidden] {
    display: none;
}

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

.rv-queue {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 10px;
    max-height: calc(100vh - 100px);
    padding: 14px;
}

.rv-queue-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.rv-queue-head strong {
    color: var(--db-ink);
    font-size: 1rem;
}

.rv-queue-head b {
    margin-left: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-size: .8rem;
}

.rv-queue-head small {
    color: var(--db-muted);
    font-size: .74rem;
}

.rv-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rv-filters button {
    padding: 5px 10px;
    border: 1px solid var(--db-line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--db-text);
    font: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}

.rv-filters button.is-active {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

.rv-list {
    display: grid;
    gap: 6px;
    overflow-y: auto;
    padding-right: 2px;
}

.rv-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: #ffffff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.rv-item[hidden] {
    display: none;
}

.rv-item:hover {
    background: #f8fafc;
}

.rv-item.is-current {
    border-color: #0f172a;
    box-shadow: 0 0 0 1px #0f172a;
}

.rv-item-main {
    display: grid;
    min-width: 0;
}

.rv-item-main strong {
    overflow: hidden;
    color: var(--db-ink);
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-item-main small {
    color: var(--db-muted);
    font-size: .74rem;
}

.rv-item-main .is-late {
    color: #b91c1c;
    font-weight: 800;
}

.rv-item-side {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.rv-item-side b {
    color: var(--db-ink);
    font-size: .86rem;
    white-space: nowrap;
}

.rv-item-side .ox-pill {
    font-size: .66rem;
}

.rv-keys {
    margin: 0;
    color: var(--db-muted);
    font-size: .72rem;
    text-align: center;
}

.rv-keys kbd {
    padding: 0 6px;
    border: 1px solid var(--db-line);
    border-radius: 5px;
    background: var(--db-soft);
}

/* Panel de revision */
.rv-detail {
    min-width: 0;
    transition: opacity .15s ease;
}

.rv-detail.is-loading {
    opacity: .45;
    pointer-events: none;
}

.rv-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--db-line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.rv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.rv-who {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.rv-who > div {
    display: grid;
    gap: 3px;
}

.rv-who strong {
    color: var(--db-ink);
    font-size: 1.15rem;
    font-weight: 800;
}

.rv-who small {
    color: var(--db-muted);
    font-size: .8rem;
}

.rv-trust {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--db-muted);
    font-size: .74rem;
    font-weight: 700;
}

.rv-trust.is-ok { background: #ecfdf5; color: #047857; }
.rv-trust.is-warn { background: #fef2f2; color: #b91c1c; }

.rv-amount {
    display: grid;
    justify-items: end;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
}

.rv-amount small {
    color: #047857;
    font-size: .74rem;
    font-weight: 800;
}

.rv-amount strong {
    color: #065f46;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
}

.rv-amount span {
    color: #0f766e;
    font-size: .76rem;
}

.rv-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 18px;
}

.rv-proof {
    display: grid;
    gap: 6px;
}

.rv-proof-img {
    display: block;
    overflow: hidden;
    height: 360px;
    padding: 0;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #0f172a;
    cursor: zoom-in;
}

.rv-proof-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .2s ease;
}

.rv-proof-img.is-zoomed {
    cursor: zoom-out;
}

.rv-proof-img.is-zoomed img {
    transform: scale(2.2);
}

.rv-proof-tools {
    display: flex;
    justify-content: space-between;
    color: var(--db-muted);
    font-size: .76rem;
}

.rv-proof-tools a {
    color: #0e7490;
    font-weight: 700;
}

.rv-proof-empty {
    display: grid;
    place-content: center;
    gap: 4px;
    min-height: 200px;
    padding: 20px;
    border: 2px dashed var(--db-line);
    border-radius: 14px;
    color: var(--db-muted);
    font-size: .84rem;
    text-align: center;
    text-decoration: none;
}

.rv-proof-empty strong {
    color: var(--db-ink);
    font-size: .95rem;
}

.rv-facts {
    display: grid;
    align-content: start;
    gap: 8px;
}

.rv-fact {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-soft);
}

.rv-fact span {
    color: var(--db-muted);
    font-size: .72rem;
    font-weight: 700;
}

.rv-fact strong {
    color: var(--db-ink);
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.rv-fact.is-code {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-color: #bae6fd;
    background: #f0f9ff;
}

.rv-fact.is-code span {
    grid-column: 1 / -1;
}

.rv-fact.is-code code {
    color: #0c4a6e;
    font-size: .92rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rv-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fffbeb;
    color: #78350f;
    font-size: .84rem;
}

.rv-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    background: #f5f3ff;
}

.rv-chain > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.rv-chain strong {
    color: #5b21b6;
    font-size: .86rem;
}

.rv-chain span {
    color: #4c1d95;
    font-size: .82rem;
}

.rv-chain a {
    color: #6d28d9;
    font-size: .8rem;
    font-weight: 700;
}

.rv-approve,
.rv-reject {
    display: grid;
    gap: 14px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--db-line);
}

.rv-approve[hidden],
.rv-reject[hidden] {
    display: none;
}

.rv-checks {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffbeb;
}

.rv-checks legend {
    float: left;
    width: 100%;
    margin-bottom: 4px;
    color: #92400e;
    font-size: .86rem;
    font-weight: 800;
}

.rv-checks label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--db-text);
    font-size: .88rem;
    cursor: pointer;
}

.rv .rv-checks input {
    flex: none;
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 1px 0 0 !important;
    accent-color: #047857;
}

.rv-checks label:has(input:checked) {
    color: #065f46;
}

.rv-checks code {
    padding: 0 5px;
    border-radius: 5px;
    background: #ffffff;
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.rv-delivery {
    display: grid;
    gap: 8px;
}

.rv-delivery > strong {
    color: var(--db-ink);
    font-size: .92rem;
}

.rv-delivery-row {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
}

.rv-delivery-row > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rv-delivery-row span {
    color: var(--db-ink);
    font-weight: 700;
}

.rv-delivery-row em {
    font-size: .78rem;
    font-style: normal;
    font-weight: 700;
}

.rv-delivery-row em.is-ok { color: #047857; }
.rv-delivery-row em.is-warn { color: #b45309; }

.rv-delivery-row summary {
    color: #0e7490;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.rv textarea {
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .85rem;
    resize: vertical;
}

.rv textarea:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

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

.rv-actions > :last-child {
    margin-left: auto;
}

.ox-btn.is-approve-btn {
    min-height: 44px;
    padding: 0 20px;
    border-color: #059669;
    background: #059669;
    color: #ffffff;
    font-size: .92rem;
}

.ox-btn.is-approve-btn:hover {
    background: #047857;
    color: #ffffff;
}

.ox-btn.is-approve-btn svg {
    width: 18px;
    height: 18px;
}

.rv-hint {
    margin-top: -6px;
    color: var(--db-muted);
    font-size: .78rem;
    text-align: right;
}

.rv-hint.is-ready {
    color: #047857;
    font-weight: 700;
}

.rv-reject > strong {
    color: #991b1b;
}

.rv-reject > strong small {
    color: var(--db-muted);
    font-weight: 500;
}

.rv .ox-reasons button {
    border-color: #fecaca;
    color: #991b1b;
}

@media (max-width: 1180px) {
    .rv-body { grid-template-columns: minmax(0, 1fr); }
    .rv-proof-img { height: 300px; }
}

@media (max-width: 1024px) {
    .rv-layout { grid-template-columns: minmax(0, 1fr); }
    .rv-queue { position: static; max-height: 360px; }
    .rv-stats { flex-wrap: wrap; }
}

@media (max-width: 620px) {
    .rv-card { padding: 16px; }
    .rv-amount { justify-items: start; width: 100%; }
    .rv-actions > * { flex: 1 1 auto; }
    .rv-actions > :last-child { margin-left: 0; }
}

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

.rv-body.is-single .rv-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rv-body.is-single .rv-fact.is-code,
.rv-body.is-single .rv-chain,
.rv-body.is-single .rv-note {
    grid-column: 1 / -1;
}

.rv-note.is-info {
    background: #eff6ff;
    color: #1e40af;
}

.rv-item-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-item-side .ox-pill {
    padding: 2px 7px;
}

@media (max-width: 620px) {
    .rv-body.is-single .rv-facts { grid-template-columns: minmax(0, 1fr); }
}

.rv-queue {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.rv-list {
    min-height: 0;
}

@media (max-width: 620px) {
    .pg-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pg-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 1024px) {
    .rv-keys { display: none; }
}

@media (max-width: 620px) {
    .pg-tabs button {
        padding: 8px 10px;
        font-size: .82rem;
    }
}

/* ==========================================================================
   Pagos → Historial (hs-)
   ========================================================================== */
.hs {
    display: grid;
    gap: 16px;
}

.hs[hidden] {
    display: none;
}

.hs-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hs-filters .ox-search {
    flex: 1 1 260px;
}

.pg .hs-filters select {
    min-height: 42px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--db-line);
    border-radius: 11px;
    background-color: #ffffff;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
}

.hs-states {
    display: inline-flex;
    padding: 3px;
    border-radius: 11px;
    background: #f1f5f9;
}

.hs-states label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.pg .hs-states input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.hs-states span {
    display: block;
    padding: 7px 12px;
    border-radius: 9px;
    color: var(--db-muted);
    font-size: .82rem;
    font-weight: 700;
}

.hs-states input:checked + span {
    background: #ffffff;
    color: var(--db-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}

.hs-states input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .35);
}

.hs-export {
    margin-left: auto;
}

.hs-results {
    display: grid;
    gap: 16px;
    transition: opacity .15s ease;
}

.hs-results.is-loading {
    opacity: .45;
    pointer-events: none;
}

.hs-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .85rem;
}

.hs-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.hs-kpis > div {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: var(--db-soft);
}

.hs-kpis span {
    color: var(--db-muted);
    font-size: .76rem;
    font-weight: 700;
}

.hs-kpis b {
    color: var(--db-ink);
    font-size: 1.35rem;
    font-weight: 800;
}

.hs-kpis small {
    color: var(--db-muted);
    font-size: .74rem;
}

.hs-kpis .is-green {
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.hs-kpis .is-green b {
    color: #047857;
}

.hs-day {
    display: grid;
    gap: 6px;
}

.hs-day > header {
    position: sticky;
    top: 62px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 4px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(4px);
}

.hs-day > header strong {
    color: var(--db-ink);
    font-size: .92rem;
}

.hs-day > header span {
    color: var(--db-muted);
    font-size: .8rem;
}

.hs-day > header b {
    color: #047857;
}

.hs-row {
    overflow: hidden;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: #ffffff;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.hs-row.is-open {
    border-color: #94a3b8;
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .5);
}

.hs-main {
    display: grid;
    grid-template-columns: 52px minmax(140px, 1.3fr) minmax(140px, 1fr) 130px 120px 18px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hs-main:hover {
    background: #f8fafc;
}

.hs-main > span {
    display: grid;
    min-width: 0;
}

.hs-time {
    color: var(--db-muted);
    font-size: .84rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hs-who strong,
.hs-method strong {
    overflow: hidden;
    color: var(--db-ink);
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-who small,
.hs-method small,
.hs-amount small {
    overflow: hidden;
    color: var(--db-muted);
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-method small {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.hs-amount {
    justify-items: end;
    text-align: right;
}

.hs-amount strong {
    color: var(--db-ink);
    font-size: .92rem;
    white-space: nowrap;
}

.hs-amount .is-struck {
    color: var(--db-muted);
    text-decoration: line-through;
}

.hs-state {
    justify-items: start;
}

.hs-chevron {
    color: var(--db-muted);
    font-size: 1.2rem;
    transition: transform .15s ease;
}

.hs-row.is-open .hs-chevron {
    transform: rotate(90deg);
}

.hs-detail {
    display: grid;
    gap: 12px;
    padding: 4px 14px 14px 78px;
}

.hs-detail[hidden] {
    display: none;
}

.hs-reason {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    color: #991b1b;
    font-size: .85rem;
}

.hs-detail dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
}

.hs-detail dl .is-wide {
    grid-column: 1 / -1;
}

.hs-detail dt {
    color: var(--db-muted);
    font-size: .72rem;
    font-weight: 700;
}

.hs-detail dd {
    display: grid;
    margin: 0;
    color: var(--db-ink);
    font-size: .86rem;
}

.hs-detail dd code {
    overflow-wrap: anywhere;
}

.hs-detail dd small {
    color: var(--db-muted);
    font-size: .76rem;
}

.hs-detail dd .ox-chip {
    justify-self: start;
    margin-top: 4px;
}

.hs-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

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

@media (max-width: 760px) {
    .hs-main {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "time who amount"
            "time method state";
        gap: 4px 10px;
    }
    .hs-time { grid-area: time; }
    .hs-who { grid-area: who; }
    .hs-method { grid-area: method; }
    .hs-amount { grid-area: amount; }
    .hs-state { grid-area: state; justify-items: end; }
    .hs-chevron { display: none !important; }
    .hs-detail { padding-left: 14px; }
    .hs-detail dl { grid-template-columns: minmax(0, 1fr); }
    .hs-states { overflow-x: auto; max-width: 100%; }
    .hs-filters select { flex: 1 1 auto; }
}

.pg .hs-filters select {
    flex: 0 0 auto;
    width: auto;
}

.hs .ox-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--db-line);
    border-radius: 11px;
    background: var(--db-soft);
}

.hs .ox-search:focus-within {
    border-color: #7dd3fc;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.hs .ox-search svg {
    flex: none;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--db-muted);
    stroke-width: 2;
}

.pg .hs .ox-search input {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: .9rem;
    outline: none;
}

@media (max-width: 760px) {
    .pg .hs-filters select { flex: 1 1 auto; }
}

.hs > *,
.hs-results > * {
    min-width: 0;
}

@media (max-width: 760px) {
    .hs-states {
        display: flex;
        flex: 1 1 100%;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hs-states label {
        flex: 1 0 auto;
        text-align: center;
    }

    .hs-kpis b {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   Productos v2: precio en linea, stock rapido, vista de tarjetas y nuevo producto
   ========================================================================== */
.pr-price-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -3px -6px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--db-ink);
    font: inherit;
    cursor: text;
    transition: border-color .12s ease, background-color .12s ease;
}

.pr-price-btn svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #94a3b8;
    stroke-width: 2;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity .12s ease;
}

.pr-price-btn:hover,
.pr-price-btn:focus-visible {
    border-color: #cbd5e1;
    background: #ffffff;
    outline: none;
}

.pr-price-btn:hover svg,
.pr-price-btn:focus-visible svg { opacity: 1; }

.pr-price-cta {
    padding: 4px 10px;
    border: 1px dashed #f59e0b;
    border-radius: 999px;
    background: #fffbeb;
    color: #b45309;
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.pr-price-cta:hover { background: #fef3c7; }

.pr .pr-price-input {
    width: 100px;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid #38bdf8;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
    font: inherit;
    font-weight: 800;
    outline: none;
}

.pr-plus {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--db-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--db-muted);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}

.pr-row:hover .pr-plus,
.pr-plus:focus-visible { opacity: 1; }

.pr-plus:hover {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

@media (hover: none) {
    .pr-plus, .pr-price-btn svg { opacity: 1; }
}

.pr-pop {
    position: fixed;
    z-index: 1080;
    display: grid;
    gap: 8px;
    width: 250px;
    padding: 12px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    animation: pr-pop-in .14s ease;
}

.pr-pop[hidden] { display: none; }

@keyframes pr-pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.pr-pop strong {
    overflow: hidden;
    color: #0f172a;
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-pop-qty {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
}

.pr-pop-qty input {
    width: 100%;
    min-height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
}

.pr-pop small {
    color: #64748b;
    font-size: .76rem;
}

/* Orden y vista */
.pr-view {
    display: inline-flex;
    flex: none;
    padding: 3px;
    border-radius: 10px;
    background: #f1f5f9;
}

.pr-view button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--db-muted);
    cursor: pointer;
}

.pr-view svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.pr-view button[aria-pressed="true"] {
    background: #ffffff;
    color: var(--db-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}

/* Vista de tarjetas */
.iv-table.is-cards {
    overflow: visible;
    border: 0;
}

.iv-table.is-cards .iv-row.is-head { display: none; }

.iv-table.is-cards > [data-rows] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
}

.iv-table.is-cards .pr-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "product product visible"
        "price stock stock"
        "access access access";
    align-content: start;
    gap: 12px;
    min-height: 0;
    padding: 14px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.iv-table.is-cards .pr-row:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.iv-table.is-cards .pr-row.is-current { box-shadow: 0 0 0 2px #0f172a; }
.iv-table.is-cards .pr-row.is-agotado { border-color: #fecaca; }
.iv-table.is-cards .pr-c-product { grid-area: product; }
.iv-table.is-cards .pr-c-visible { grid-area: visible; align-self: start; }
.iv-table.is-cards .pr-c-price { grid-area: price; }
.iv-table.is-cards .iv-c-stock { grid-area: stock; }
.iv-table.is-cards .iv-c-access { grid-area: access; padding-top: 10px; border-top: 1px dashed var(--db-line); }
.iv-table.is-cards .pr-row > .iv-c-num { display: none !important; }
.iv-table.is-cards .pr-thumb { width: 52px; height: 52px; }
.iv-table.is-cards .pr-c-price b { font-size: 1.1rem; }

/* Panel: aviso sin precio y cambios sin guardar */
.ivd-alert.is-amber { background: #fffbeb; color: #92400e; }

.pr-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: #f59e0b;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .2);
}

.pr-dot[hidden] { display: none; }

/* Nuevo producto (pn-) */
.pn-icon {
    background: #0f172a;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 500;
}

.pn-preview {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--db-line);
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc, #f0fdfa);
}

.pn-preview-img {
    display: grid;
    place-items: center;
    width: 76px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e0f2fe, #ccfbf1) center / cover no-repeat;
    color: #0e7490;
    font-size: 1.4rem;
    font-weight: 800;
}

.pn-preview-img.has-image b { display: none; }

.pn-preview > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pn-preview strong {
    overflow: hidden;
    color: var(--db-ink);
    font-size: .98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-preview small {
    color: var(--db-muted);
    font-size: .76rem;
}

.pn-preview em {
    justify-self: start;
    padding: 1px 8px;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: .66rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pn-preview em[hidden],
.pn-preview s[hidden],
.pn-preview i[hidden] { display: none; }

.pn-preview-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pn-preview-price b {
    color: var(--db-ink);
    font-size: 1.05rem;
}

.pn-preview-price s {
    color: #94a3b8;
    font-size: .8rem;
}

.pn-preview-price i {
    color: #059669;
    font-size: .78rem;
    font-style: normal;
    font-weight: 800;
}

.pn-preview-stock {
    padding: 4px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.pn-preview-stock.is-out {
    background: #fee2e2;
    color: #991b1b;
}

.pn-step {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
}

.pn-step h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--db-ink);
    font-size: .95rem;
    font-weight: 800;
}

.pn-step h3 span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0f172a;
    color: #ffffff;
    font-size: .72rem;
}

.pn-step h3 small {
    color: var(--db-muted);
    font-size: .76rem;
    font-weight: 600;
}

.pn-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pn .ox-field small.is-req { color: #b45309; font-weight: 700; }

.ox-drawer .pn input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ox-drawer .pn select,
.ox-drawer .pn textarea {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
    font-size: .9rem;
}

.ox-drawer .pn .iv-qty input { flex: none; max-width: 96px; font-size: 1.05rem; font-weight: 800; text-align: center; }

.pr .ox-toolbar [data-category-filter] { width: auto; min-width: 220px; }

.pn-grid3 { align-items: end; }

.ox-drawer.is-new [data-drawer-prev],
.ox-drawer.is-new [data-drawer-next] { visibility: hidden; }

.ox-drawer .pn input:focus,
.ox-drawer .pn select:focus,
.ox-drawer .pn textarea:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.ox-drawer .pn .pn-file {
    width: 100%;
    padding: 7px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: var(--db-soft);
    font-size: .8rem;
}

.pn-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pn .pr-calc[hidden],
.pn .iv-access-msg:empty { display: none; }

.pn-more {
    display: grid;
    gap: 8px;
}

.pn-more summary {
    color: #0e7490;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
}

.pn-more summary small { color: var(--db-muted); font-weight: 600; }
.pn-more[open] { gap: 10px; }

.pn-missing {
    margin-right: auto;
    color: var(--db-muted);
    font-size: .82rem;
    font-weight: 600;
}

.pn-missing.is-error { color: #b91c1c; }

@media (max-width: 900px) {
    .pn-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pn-grid3 > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .pn-preview { grid-template-columns: 60px minmax(0, 1fr); }
    .pn-preview-img { width: 60px; height: 48px; }
    .pn-preview-stock { grid-column: 2; justify-self: start; }
    .pr .ox-top-actions .ox-btn.is-ghost { display: none; }
    .pr-view { display: none; }
}

/* ==========================================================================
   Productos v3 (pv-): tarjetas con foto, estado y "El cliente ve"; lista compacta opcional
   ========================================================================== */
.pv-repair {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: #f0fdf4;
    color: #14532d;
    font-size: .86rem;
}

.pv-repair-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #16a34a;
}

.pv-repair-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linejoin: round;
}

.pv-repair div {
    display: grid;
    gap: 2px;
}

.pv-repair strong {
    color: #052e16;
    font-size: .92rem;
}

/* Resumen: tarjetas que filtran */
.pv-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.pv-kpis > * {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
    color: var(--db-ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
}

.pv-kpis > button,
.pv-kpis > a {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pv-kpis > button:hover,
.pv-kpis > a:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 22px -16px rgba(15, 23, 42, .45);
    transform: translateY(-1px);
}

.pv-kpis span {
    color: var(--db-muted);
    font-size: .76rem;
    font-weight: 700;
}

.pv-kpis b {
    color: var(--db-ink);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
}

.pv-kpis small {
    color: var(--db-muted);
    font-size: .74rem;
}

.pv-kpis small span {
    color: inherit;
    font-size: inherit;
    font-weight: 800;
}

.pv-kpis > *::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.pv-kpis .is-green::before { background: #22c55e; }
.pv-kpis .is-blue { border-color: #bfdbfe; background: #eff6ff; }
.pv-kpis .is-blue::before { background: #3b82f6; }
.pv-kpis .is-blue b { color: #1d4ed8; }
.pv-kpis .is-red { border-color: #fecaca; background: #fef2f2; }
.pv-kpis .is-red::before { background: #ef4444; }
.pv-kpis .is-red b { color: #b91c1c; }
.pv-kpis .is-amber { border-color: #fde68a; background: #fffbeb; }
.pv-kpis .is-amber::before { background: #f59e0b; }
.pv-kpis .is-amber b { color: #b45309; }

/* Tarjetas */
.pv-grid {
    min-width: 0;
}

.pv-list-head {
    display: none;
}

.pv-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.pv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--db-line);
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pv-card[hidden] { display: none; }

.pv-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 16px 32px -22px rgba(15, 23, 42, .55);
    transform: translateY(-2px);
}

.pv-card:focus-visible { box-shadow: 0 0 0 3px rgba(56, 189, 248, .45); }
.pv-card.is-current { border-color: #0f172a; box-shadow: 0 0 0 2px #0f172a; }

.pv-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: linear-gradient(135deg, #e0f2fe, #ccfbf1);
    color: #0e7490;
}

.pv-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-media > b {
    font-size: 2rem;
    font-weight: 800;
}

.pv-card.is-hidden-product .pv-media img,
.pv-card.is-hidden-product .pv-media > b {
    opacity: .45;
    filter: grayscale(.6);
}

.pv-state {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}

.pv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #334155;
    font-size: .72rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
}

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

.pv-badge.is-green { color: #15803d; }
.pv-badge.is-amber { color: #b45309; }
.pv-badge.is-red { color: #b91c1c; }
.pv-badge.is-gray { color: #475569; }

.pv-switch {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
}

.pv-switch input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.pv-body {
    display: grid;
    flex: 1;
    gap: 10px;
    align-content: start;
    padding: 12px 14px 12px;
}

.pv-card .pv-head {
    display: grid !important;
    gap: 1px;
    min-width: 0;
}

.pv-head strong {
    overflow: hidden;
    color: var(--db-ink);
    font-size: .98rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-head small {
    color: var(--db-muted);
    font-size: .76rem;
}

.pv-price {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.pv-price .pr-price-btn b {
    font-size: 1.15rem;
}

.pv-price small {
    color: var(--db-muted);
    font-size: .76rem;
}

.pv-price small .is-red { color: #b91c1c; }

.pv-stats {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    margin: 0;
}

.pv-stats > div {
    position: relative;
    display: grid;
    gap: 1px;
    padding: 7px 9px;
    border-radius: 10px;
    background: #f8fafc;
}

.pv-stats > div {
    min-width: 0;
}

.pv-stats dt {
    overflow: hidden;
    color: var(--db-muted);
    font-size: .7rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-stats dd {
    margin: 0;
    color: var(--db-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.pv-stats dd small {
    color: var(--db-muted);
    font-size: .68rem;
    font-weight: 600;
}

.pv-stock.is-ok { background: #f0fdf4; }
.pv-stock.is-ok dd { color: #15803d; }
.pv-stock.is-bajo { background: #fffbeb; }
.pv-stock.is-bajo dd { color: #b45309; }
.pv-stock.is-agotado { background: #fef2f2; }
.pv-stock.is-agotado dd { color: #b91c1c; }

.pv-stats > .pv-stock {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 6px;
}

.pv-stock dt {
    grid-column: 1 / -1;
}

.pv-stock .pr-plus {
    width: 24px;
    height: 24px;
    margin: 0;
    opacity: 1;
}

.pv-access {
    display: grid;
    gap: 4px;
    color: var(--db-muted);
    font-size: .76rem;
}

.pv-access b {
    color: var(--db-ink);
}

.pv-access em {
    font-style: normal;
    font-weight: 800;
}

.pv-access .is-red { color: #b91c1c; }

.pv-store {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px -14px -12px;
    padding: 9px 14px;
    border-top: 1px solid var(--db-line);
    background: #f8fafc;
    color: var(--db-muted);
    font-size: .78rem;
}

.pv-store svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.pv-store b { color: var(--db-ink); }
.pv-store.is-green { background: #f0fdf4; color: #15803d; }
.pv-store.is-green b { color: #166534; }
.pv-store.is-amber { background: #fffbeb; color: #b45309; }
.pv-store.is-amber b { color: #92400e; }
.pv-store.is-red { background: #fef2f2; color: #b91c1c; }
.pv-store.is-red b { color: #991b1b; }

/* Tabla de productos (vista por defecto) */
.pv-grid {
    container: pvtabla / inline-size;
}

.pv-grid.is-list {
    overflow: hidden;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
}

.pv-grid.is-list .pv-list-head,
.pv-grid.is-list .pv-card {
    display: grid;
    grid-template-columns: 44px minmax(150px, 1.5fr) 98px 112px 84px 66px 66px minmax(96px, .8fr) minmax(130px, 1fr) 48px;
    align-items: center;
    column-gap: 12px;
}

.pv-grid.is-list .pv-list-head {
    padding: 10px 16px;
    border-bottom: 1px solid var(--db-line);
    background: #f8fafc;
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pv-grid.is-list .pv-list-head > :first-child { grid-column: 1 / 3; }
.pv-grid.is-list .pv-list-head .is-num { text-align: right; }
.pv-grid.is-list .pv-list-head .is-end { grid-column: 10; text-align: right; }

.pv-grid.is-list .pv-cards {
    display: block;
}

.pv-grid.is-list .pv-card {
    min-height: 64px;
    padding: 10px 16px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    transform: none;
}

.pv-grid.is-list .pv-card + .pv-card { border-top: 1px solid #eef2f6; }
.pv-grid.is-list .pv-card[hidden] { display: none; }
.pv-grid.is-list .pv-card:hover { background: #f8fafc; box-shadow: none; transform: none; }
.pv-grid.is-list .pv-card:focus-visible { background: #f0f9ff; box-shadow: inset 3px 0 0 #38bdf8; }
.pv-grid.is-list .pv-card.is-current { background: #f1f5f9; box-shadow: inset 3px 0 0 #0f172a; }
.pv-grid.is-list .pv-card.is-hidden-product .pv-head strong { color: #94a3b8; }

.pv-grid.is-list .pv-media {
    position: static;
    width: 44px;
    height: 44px;
    aspect-ratio: auto;
    border: 1px solid var(--db-line);
    border-radius: 10px;
}

.pv-grid.is-list .pv-media img { position: static; border-radius: inherit; }
.pv-grid.is-list .pv-media > b { font-size: 1.05rem; }
.pv-grid.is-list .pv-body,
.pv-grid.is-list .pv-stats { display: contents; }

.pv-grid.is-list .pv-head strong { font-size: .9rem; }
.pv-grid.is-list .pv-state { position: static; }
.pv-grid.is-list .pv-badge { box-shadow: none; }
.pv-grid.is-list .pv-badge.is-green { background: #dcfce7; }
.pv-grid.is-list .pv-badge.is-amber { background: #fef3c7; }
.pv-grid.is-list .pv-badge.is-red { background: #fee2e2; }
.pv-grid.is-list .pv-badge.is-gray { background: #f1f5f9; }

.pv-grid.is-list .pv-price { display: grid !important; gap: 0; }
.pv-grid.is-list .pv-price .pr-price-btn b { font-size: .95rem; white-space: nowrap; }
.pv-grid.is-list .pv-store b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-grid.is-list .pv-store { min-width: 0; }

/* Numeros alineados a la derecha, sin cajas */
.pv-grid.is-list .pv-stats > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
    background: transparent;
}

.pv-grid.is-list .pv-stats dt { display: none; }
.pv-grid.is-list .pv-stats dd { font-size: .98rem; font-variant-numeric: tabular-nums; }
.pv-grid.is-list .pv-stats dd small { display: none; }
.pv-grid.is-list .pv-stock dd { font-size: 1.1rem; }
.pv-grid.is-list .pv-stock .pr-plus { order: -1; opacity: .6; }
.pv-grid.is-list .pv-card:hover .pv-stock .pr-plus { opacity: 1; }

.pv-grid.is-list .pv-access { font-size: .74rem; }

.pv-grid.is-list .pv-store {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: .8rem;
    line-height: 1.3;
}

.pv-grid.is-list .pv-store span { font-size: 0; }
.pv-grid.is-list .pv-store b { font-size: .8rem; }

.pv-grid.is-list .pv-switch {
    top: 50%;
    right: 16px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
}

@media (max-width: 1100px) {
    .pv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tabla mas angosta: se quita "Vendidos" (sigue en el panel del producto) */
@container pvtabla (max-width: 1000px) {
    .pv-grid.is-list .pv-list-head,
    .pv-grid.is-list .pv-card {
        grid-template-columns: 44px minmax(130px, 1.4fr) 90px 100px 76px minmax(80px, .8fr) minmax(110px, 1fr) 48px;
    }
    .pv-grid.is-list .pv-list-head > :nth-child(5),
    .pv-grid.is-list .pv-list-head > :nth-child(6),
    .pv-grid.is-list .pv-stats > div:nth-child(2),
    .pv-grid.is-list .pv-stats > div:nth-child(3) { display: none; }
    .pv-grid.is-list .pv-list-head .is-end { grid-column: 8; }
}

/* Celular o tabla muy angosta: cada producto en un bloque de 3 lineas */
@container pvtabla (max-width: 720px) {
    .pv-grid.is-list .pv-list-head { display: none; }
    .pv-grid.is-list .pv-card {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "media head state"
            "media price stock"
            "access access store";
        gap: 8px 12px;
        padding: 12px 14px;
    }
    .pv-grid.is-list .pv-media { grid-area: media; align-self: start; }
    .pv-grid.is-list .pv-head { grid-area: head; padding-right: 54px; }
    .pv-grid.is-list .pv-state { grid-area: state; justify-self: end; margin-right: 54px; }
    .pv-grid.is-list .pv-price { grid-area: price; }
    .pv-grid.is-list .pv-stock { grid-area: stock; }
    .pv-grid.is-list .pv-stats > div:not(.pv-stock) { display: none; }
    .pv-grid.is-list .pv-access { grid-area: access; }
    .pv-grid.is-list .pv-store { grid-area: store; justify-self: end; }
    .pv-grid.is-list .pv-switch { top: 12px; transform: none; }
}

@container pvtabla (max-width: 420px) {
    .pv-grid.is-list .pv-card {
        grid-template-areas:
            "media head head"
            "media state state"
            "price price stock"
            "access access access"
            "store store store";
    }
    .pv-grid.is-list .pv-state { justify-self: start; margin-right: 0; }
    .pv-grid.is-list .pv-store { justify-self: start; }
}

@media (max-width: 760px) {
    .pv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-kpis > :first-child { grid-column: 1 / -1; }
    .pv-repair { grid-template-columns: auto minmax(0, 1fr); }
    .pv-repair .ox-btn { grid-column: 1 / -1; }
    .pv-cards { grid-template-columns: minmax(0, 1fr); }
    .pv-media { aspect-ratio: 16 / 7; }
}

/* ---------- Productos: paginas y cabeceras ordenables ---------- */
.pv-list-head button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.pv-list-head button.is-num { justify-content: flex-end; }
.pv-list-head button:hover { color: #0f172a; }

.pv-list-head button::after {
    content: "↕";
    color: #cbd5e1;
    font-size: .8rem;
    letter-spacing: 0;
}

.pv-list-head button.is-sorted { color: #0f172a; }
.pv-list-head button.is-sorted::after { content: "↑"; color: #0f172a; }
.pv-list-head button.is-sorted.is-reverse::after { content: "↓"; }

.pv-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 14px;
    color: var(--db-muted);
    font-size: .84rem;
}

.pv-pager[hidden] { display: none; }
.pv-pager-info b { color: var(--db-ink); }

.pv-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pv-page {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--db-line);
    border-radius: 9px;
    background: #ffffff;
    color: var(--db-ink);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.pv-page:hover:not(:disabled) { border-color: #94a3b8; }
.pv-page[aria-current="page"] { border-color: #0f172a; background: #0f172a; color: #ffffff; }
.pv-page:disabled { opacity: .4; cursor: default; }
.pv-page.is-arrow { font-size: 1.1rem; }
.pv-page-gap { padding: 0 4px; color: #94a3b8; }

.pv-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.pv-pagesize select {
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--db-line);
    border-radius: 9px;
    background: #ffffff;
    color: var(--db-ink);
    font: inherit;
    font-weight: 700;
}

.pv-card.is-flash {
    animation: pv-flash 2.4s ease-out;
}

@keyframes pv-flash {
    0%, 30% { background-color: #dcfce7; box-shadow: inset 4px 0 0 #16a34a; }
    100% { background-color: #ffffff; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .pv-pager { justify-content: center; }
    .pv-pager-info { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .pv-card.is-flash { animation: none; }
}

/* ==========================================================================
   Pedidos (po-): diseno limpio tipo panel profesional
   - Resumen en una sola tarjeta dividida, filtros como control segmentado
   - Tabla sobria: texto, numeros alineados, estado con insignia suave
   - Detalle blanco con secciones separadas por lineas
   ========================================================================== */
.po {
    --po-ink: #0f172a;
    --po-text: #334155;
    --po-muted: #64748b;
    --po-faint: #94a3b8;
    --po-line: #e6e9ef;
    --po-soft: #f8fafc;
    gap: 18px;
}

.po .ox-top h1 { font-size: 1.6rem; letter-spacing: -.01em; }
.po .ox-top p { color: var(--po-muted); }

.po-export {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--po-line) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.po-export svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Resumen: una tarjeta con divisiones ---------- */
.po-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--po-line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.po-stat {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 16px 20px;
    color: var(--po-ink);
    text-decoration: none;
    transition: background-color .15s ease;
}

.po-stat + .po-stat { border-left: 1px solid var(--po-line); }
a.po-stat:hover { background: var(--po-soft); }

.po-stat.is-active::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 0;
    left: 20px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--po-ink);
}

.po-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--po-muted);
    font-size: .78rem;
    font-weight: 600;
}

.po-stat b {
    color: var(--po-ink);
    font-size: 1.55rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.15;
    white-space: nowrap;
}

.po-stat.is-urgent b { color: #dc2626; }

.po-stat small {
    overflow: hidden;
    color: var(--po-faint);
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--po-faint);
}

.po-dot.is-entregar { background: #3b82f6; }
.po-dot.is-problemas { background: #ef4444; }
.po-dot.is-revision { background: #8b5cf6; }
.po-dot.is-pendientes { background: #f59e0b; }
.po-dot.is-ventas { background: #10b981; }

/* ---------- Tablero ---------- */
.po .ox-board {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: var(--po-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* Filtros como control segmentado */
.po .ox-tabs {
    gap: 2px;
    width: fit-content;
    max-width: calc(100% - 40px);
    margin: 18px 20px 0;
    padding: 4px;
    border-radius: 11px;
    background: #f1f5f9;
    scrollbar-width: none;
}

.po .ox-tab {
    padding: 7px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--po-muted);
    font-size: .82rem;
    font-weight: 600;
}

.po .ox-tab:hover { background: transparent; color: var(--po-ink); }

.po .ox-tab.is-active {
    background: #ffffff;
    color: var(--po-ink);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.po .ox-tab b {
    min-width: 22px;
    padding: 0 6px;
    background: rgba(15, 23, 42, .06);
    color: var(--po-text);
    font-size: .72rem;
    font-weight: 700;
}

.po .ox-tab.is-active b { background: var(--po-ink); color: #ffffff; }
.po .ox-tab.is-alert.is-problemas b { background: #fee2e2; color: #b91c1c; }

.po .ox-toolbar { padding: 14px 20px 16px; }
.po .ox-search { min-height: 40px; border-color: var(--po-line); background: #ffffff; }
.po .ox-toolbar select { min-height: 40px; border-color: var(--po-line); }
.po .po-list { padding: 0; container: potabla / inline-size; }

/* ---------- Tabla ---------- */
.po .po-table {
    overflow: hidden;
    border: 0;
    border-top: 1px solid var(--po-line);
    border-radius: 0;
}

.po .po-table .ox-row {
    grid-template-columns: 172px minmax(150px, 1.1fr) minmax(170px, 1.5fr) 128px 164px 118px;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 10px 20px;
    border-top: 1px solid #eef1f5;
    box-shadow: none;
}

.po .po-table .ox-row.is-head {
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 0;
    background: #fafbfc;
    color: var(--po-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.po .po-table .ox-row:not(.is-head):hover { background: #f8fafc; }
.po .po-table .ox-row:not(.is-head):focus-visible { background: #f0f9ff; box-shadow: inset 3px 0 0 #3b82f6; }
.po .po-table .ox-row.is-current { background: #f1f5f9; box-shadow: inset 3px 0 0 var(--po-ink); }

.po .po-table .ox-row > span { display: grid; gap: 2px; min-width: 0; }

.po .po-table strong {
    overflow: hidden;
    color: var(--po-ink);
    font-size: .86rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po .po-table small {
    overflow: hidden;
    color: var(--po-muted);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po .po-c-order strong { font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.po .po-c-products strong { color: var(--po-text); font-weight: 500; }
.po .po-c-total strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
.po .po-c-customer small { display: flex; align-items: center; gap: 6px; }

.po-wa {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: #16a34a;
    opacity: 0;
    transition: opacity .15s ease, background-color .15s ease;
}

.po-wa svg { width: 14px; height: 14px; fill: currentColor; }
.po .ox-row:hover .po-wa,
.po-wa:focus-visible { opacity: 1; }
.po-wa:hover { background: #dcfce7; }

/* Insignia de estado */
.po-badge {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    max-width: 100%;
    padding: 3px 9px 3px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.po-badge::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.po-badge.is-blue { background: #eff6ff; color: #1d4ed8; }
.po-badge.is-red { background: #fef2f2; color: #b91c1c; }
.po-badge.is-violet { background: #f5f3ff; color: #6d28d9; }
.po-badge.is-amber { background: #fffbeb; color: #b45309; }
.po-badge.is-green { background: #f0fdf4; color: #15803d; }
.po-badge.is-gray { background: #f1f5f9; color: #64748b; }

.po .po-wait { color: var(--po-faint) !important; font-size: .72rem !important; }
.po .po-wait.is-warn { color: #b45309 !important; }
.po .po-wait.is-late { color: #dc2626 !important; font-weight: 600; }

/* Accion: enlace discreto */
.po-act {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 2px;
    padding: 6px 8px 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--po-ink);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.po-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.po-act:hover { background: #f1f5f9; }
.po .ox-row:hover .po-act svg { transform: translateX(2px); }
.po-act.is-entregar { color: #1d4ed8; }
.po-act.is-entregar:hover { background: #eff6ff; }
.po-act.is-problema { color: #b91c1c; }
.po-act.is-problema:hover { background: #fef2f2; }
.po-act.is-entregado,
.po-act.is-cancelado { color: var(--po-muted); }
.po .ox-c-action { justify-items: end; }

/* ---------- Paginas ---------- */
.po-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--po-line);
    background: #fafbfc;
    color: var(--po-muted);
    font-size: .8rem;
}

.po-pager-info b { color: var(--po-ink); font-weight: 600; }
.po-pages { display: flex; align-items: center; gap: 4px; }

.po-page {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--po-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--po-ink);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.po-page:hover { border-color: #cbd5e1; }
.po-page.is-active { border-color: var(--po-ink); background: var(--po-ink); color: #ffffff; }
.po-page.is-off { opacity: .4; pointer-events: none; }
.po-page-gap { padding: 0 4px; color: var(--po-faint); }

.po-size { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

.po-size select {
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--po-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--po-ink);
    font: inherit;
    font-weight: 600;
}

.po .ox-empty { margin: 16px; }

/* Tabla mas angosta: la accion queda en el clic de la fila */
@container potabla (max-width: 960px) {
    .po .po-table .ox-row { grid-template-columns: 158px minmax(130px, 1fr) minmax(140px, 1.2fr) 116px 150px; }
    .po .po-table .ox-row > :nth-child(6) { display: none; }
}

@container potabla (max-width: 680px) {
    .po .po-table .ox-row.is-head { display: none; }
    .po .po-table .ox-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "customer total"
            "products state"
            "order action";
        gap: 6px 12px;
        padding: 14px 16px;
    }
    .po .po-table .ox-row > :nth-child(1) { grid-area: order; }
    .po .po-table .ox-row > :nth-child(2) { grid-area: customer; }
    .po .po-table .ox-row > :nth-child(3) { grid-area: products; }
    .po .po-table .ox-row > :nth-child(4) { grid-area: total; }
    .po .po-table .ox-row > :nth-child(5) { grid-area: state; justify-items: end; }
    .po .po-table .ox-row > :nth-child(5) .po-wait { display: none; }
    .po .po-table .ox-row > :nth-child(6) { display: grid; grid-area: action; }
    .po-wa { opacity: 1; }
}

@media (max-width: 1100px) {
    .po-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .po-stat:nth-child(4) { border-left: 0; }
    .po-stat:nth-child(n + 4) { border-top: 1px solid var(--po-line); }
}

@media (max-width: 760px) {
    .po-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .po-stat { padding: 14px 16px; }
    .po-stat:nth-child(odd) { border-left: 0; }
    .po-stat:nth-child(4) { border-left: 1px solid var(--po-line); }
    .po-stat:nth-child(n + 3) { border-top: 1px solid var(--po-line); }
    .po-stat.is-sales { grid-column: 1 / -1; }
    .po-pager { justify-content: center; }
    .po-pager-info { flex: 1 1 100%; text-align: center; }
}

/* ==========================================================================
   Detalle de la compra (panel lateral)
   ========================================================================== */
.po-drawer .ox-drawer-panel { width: min(580px, 100%); background: #ffffff; }
.po-drawer .oxd { gap: 0; padding: 0; }

.po-drawer .oxd > * { margin: 0; }
.po-drawer .oxd-head,
.po-drawer .po-steps,
.po-drawer .po-meta,
.po-drawer .po-cancelled,
.po-drawer .oxd-customer,
.po-drawer .oxd-alert,
.po-drawer .oxd-lines,
.po-drawer .oxd-note,
.po-drawer .oxd-history,
.po-drawer .ox-panel { margin-right: 24px; margin-left: 24px; }

.po-drawer .oxd-head { padding: 22px 0 16px; }
.po-drawer .oxd-head h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.po-drawer .oxd-total strong { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }

/* Progreso */
.po-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 16px 0 18px;
    border-top: 1px solid var(--po-line, #e6e9ef);
    list-style: none;
}

.po-steps li { position: relative; display: grid; gap: 2px; padding-top: 22px; color: #94a3b8; font-size: .74rem; }
.po-steps li::before { content: ""; position: absolute; top: 7px; right: 0; left: 0; height: 2px; background: #e2e8f0; }
.po-steps li:first-child::before { left: 8px; }
.po-steps li:last-child::before { right: calc(100% - 8px); }
.po-steps li > span { position: absolute; top: 0; left: 0; z-index: 1; width: 16px; height: 16px; border: 2px solid #cbd5e1; border-radius: 50%; background: #ffffff; }
.po-steps b { color: #64748b; font-size: .8rem; font-weight: 600; }
.po-steps small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-steps li.is-done::before { background: #10b981; }
.po-steps li.is-done > span { border-color: #10b981; background: #10b981; box-shadow: inset 0 0 0 3px #ffffff; }
.po-steps li.is-done b { color: #0f172a; }
.po-steps li.is-now > span { border-color: #3b82f6; box-shadow: 0 0 0 4px #dbeafe; }
.po-steps li.is-now b { color: #1d4ed8; }
.po-steps li.is-warn > span { border-color: #ef4444; background: #ef4444; box-shadow: 0 0 0 4px #fee2e2; }
.po-steps li.is-warn b { color: #b91c1c; }

.po-cancelled { margin-bottom: 16px !important; padding: 12px 14px; border-radius: 10px; background: #f1f5f9; color: #475569; font-size: .84rem; font-weight: 600; }

/* Datos */
.po-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 0;
    border-top: 1px solid #e6e9ef;
}

.po-meta div { display: grid; gap: 4px; padding-right: 12px; }
.po-meta div + div { padding-left: 16px; border-left: 1px solid #e6e9ef; }
.po-meta dt { color: #64748b; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.po-meta dd { margin: 0; color: #0f172a; font-size: .86rem; font-weight: 600; }
.po-meta dd small { color: #64748b; font-weight: 500; }

.po-pay { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.po-pay-logo { display: grid; flex: none; place-items: center; width: 22px; height: 22px; overflow: hidden; border-radius: 6px; }
.po-pay-logo img { width: 20px; height: 20px; object-fit: contain; }
.po-pay-logo b { color: #475569; font-size: .72rem; }
.po-pay small { color: #0f172a; font-size: .84rem; font-weight: 600; }

/* Cliente */
.po-drawer .oxd-customer {
    padding: 16px 0;
    border-top: 1px solid #e6e9ef;
    border-radius: 0;
    background: transparent;
}

.po-drawer .ox-avatar { width: 40px; height: 40px; background: #eef2ff; color: #4338ca; font-size: .9rem; }
.po-drawer .is-wa { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #bbf7d0 !important; background: #f0fdf4 !important; color: #15803d !important; }
.po-drawer .is-wa svg { width: 16px; height: 16px; fill: currentColor; }
.po-drawer .is-wa:hover { border-color: #16a34a !important; background: #16a34a !important; color: #ffffff !important; }

.po-drawer .oxd-alert { margin-bottom: 14px; }

/* Productos */
.po-drawer .oxd-lines { gap: 0; padding: 4px 0 8px; border-top: 1px solid #e6e9ef; }
.po-drawer .oxd-line { padding: 14px 0; border: 0; border-radius: 0; }
.po-drawer .oxd-line + .oxd-line { border-top: 1px dashed #e6e9ef; }
.po-drawer .oxd-line-main { align-items: center; }
.po-drawer .ox-product { flex: 1; }
.po-drawer .ox-product strong { font-weight: 600; }

.po-line-thumb {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
}

.po-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.po-drawer .oxd-line-actions { padding-left: 52px; }
.po-drawer .ox-panel { margin-left: 0; margin-right: 0; }

.po-drawer .oxd-note { margin-bottom: 14px; border: 1px solid #fde68a; }
.po-drawer .oxd-history { padding: 12px 0 20px; }

/* Boleta de la compra (includes/boletas.php) */
.oxd-receipt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px dashed #d0d5dd;
    border-radius: 12px;
    background: #fff;
}
.oxd-receipt.is-ready { border-style: solid; border-color: #d1e9ff; background: #f5faff; }
.oxd-receipt-head { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 240px; }
.oxd-receipt-head > div { display: grid; gap: 2px; min-width: 0; }
.oxd-receipt-head strong { color: #101828; font-size: .9rem; }
.oxd-receipt-head small { color: #667085; font-size: .78rem; }
.oxd-receipt-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f2f4f7;
    color: #475467;
}
.oxd-receipt.is-ready .oxd-receipt-icon { background: #d1e9ff; color: #175cd3; }
.oxd-receipt-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oxd-receipt-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.oxd-receipt-actions form { margin: 0; }
.po-drawer .oxd > .oxd-receipt { margin: 4px 24px 14px; }
.po-drawer .oxd > .oxd-receipt + .ox-panel { margin: 0 24px 14px; }
.ox-receipt-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.ox-drawer .ox-receipt-grid select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    font: inherit;
    font-size: .9rem;
}
.ox-drawer [data-receipt-form] input[type="file"] { padding: 8px 10px; font-size: .84rem; }
@media (max-width: 520px) {
    .ox-receipt-grid { grid-template-columns: 1fr 1fr; }
    .ox-receipt-grid > :first-child { grid-column: 1 / -1; }
}

/* Acciones fijas abajo */
.po-drawer .oxd-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 14px 24px;
    border-top: 1px solid #e6e9ef;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(6px);
}

.po-drawer .oxd-actions ~ .ox-panel { margin: 16px 24px; }

@media (max-width: 560px) {
    .po-drawer .oxd-head,
    .po-drawer .po-steps,
    .po-drawer .po-meta,
    .po-drawer .oxd-customer,
    .po-drawer .oxd-lines { margin-right: 16px; margin-left: 16px; }
    .po-meta { grid-template-columns: 1fr 1fr; row-gap: 12px; }
    .po-meta div:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
    .po-steps small { display: none; }
}

/* ==========================================================================
   Ventas (vt-): Pedidos + Pagos en una seccion, estilo "tarjetas vivas"
   ========================================================================== */
.vt {
    --vt-ink: #0b1324;
    --vt-text: #334155;
    --vt-muted: #64748b;
    --vt-line: #e3e8f0;
    --vt-brand: #1fd8ff;
    --vt-pink: #ff3eb5;
    gap: 18px;
}

/* Encabezado con degradado de la marca */
.vt-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
    padding: 24px 26px;
    border-radius: 22px;
    background: radial-gradient(120% 150% at 0% 0%, #22d3ee 0%, #0e7490 42%, #1e1b4b 100%);
    color: #ffffff;
    box-shadow: 0 22px 40px -30px rgba(14, 116, 144, .9);
}

.vt-hero::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 62, 181, .5), transparent 70%);
    pointer-events: none;
}

.vt-hero-text { position: relative; z-index: 1; display: grid; gap: 4px; max-width: 62ch; }
.vt-eyebrow { color: #a5f3fc; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vt-hero h1 { margin: 0; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 1.85rem; font-weight: 800; line-height: 1.15; }
.vt-hero h1 span { color: #a5f3fc; font-weight: 700; }
.vt-hero p { margin: 0; color: #cffafe; font-size: .92rem; }
.vt-hero p b { color: #ffffff; }
.vt-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }

.vt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 13px;
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.vt-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vt-btn:hover { transform: translateY(-1px); }
.vt-btn.is-glass { background: rgba(255, 255, 255, .14); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.vt-btn.is-glass:hover { background: rgba(255, 255, 255, .24); }
.vt-btn.is-pink { background: var(--vt-pink); color: #ffffff; box-shadow: 0 12px 22px -12px var(--vt-pink); }

/* Tarjetas de resumen en color */
.vt-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }

.vt-kpi {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 18px;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 16px 28px -22px var(--vt-shadow, #0f172a);
    transition: transform .15s ease, box-shadow .15s ease;
}

.vt-kpi:hover { transform: translateY(-2px); color: #ffffff; }
.vt-kpi.is-active { outline: 3px solid var(--vt-ink); outline-offset: 3px; }
.vt-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(255, 255, 255, .92); font-size: .84rem; font-weight: 700; }
.vt-kpi-top i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .22); }
.vt-kpi-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vt-kpi b { color: #ffffff; font-family: "Poppins", sans-serif; font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-kpi small { overflow: hidden; color: rgba(255, 255, 255, .88); font-size: .76rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.vt-kpi.is-blue { --vt-shadow: #1d4ed8; background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.vt-kpi.is-violet { --vt-shadow: #7c3aed; background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.vt-kpi.is-red { --vt-shadow: #e11d48; background: linear-gradient(135deg, #fb7185, #e11d48); }
.vt-kpi.is-amber { --vt-shadow: #ea580c; background: linear-gradient(135deg, #fbbf24, #ea580c); }
.vt-kpi.is-green { --vt-shadow: #059669; background: linear-gradient(135deg, #34d399, #059669); }
.vt-kpi.is-green b { font-size: 1.65rem; }
.vt-kpi.is-zero { filter: saturate(.55); opacity: .85; }

/* Pestanas grandes de la seccion */
.vt-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 6px;
    border: 1px solid var(--vt-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 18px -16px rgba(15, 23, 42, .5);
    scrollbar-width: none;
}

.vt-tab {
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    color: var(--vt-muted);
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.vt-tab:hover { background: #f1f5f9; color: var(--vt-ink); }
.vt-tab.is-active { background: var(--vt-ink); color: #ffffff; box-shadow: 0 10px 18px -12px rgba(11, 19, 36, .8); }
.vt-tab b { padding: 1px 9px; border-radius: 99px; background: var(--vt-pink); color: #ffffff; font-size: .75rem; }
.vt-tab.is-active b { background: var(--vt-brand); color: #04252f; }

/* ---------- Pedidos: filtros y buscador ---------- */
.vt .ox-board {
    gap: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.vt .ox-tabs {
    width: auto;
    max-width: none;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 0 4px;
    border: 0;
    background: transparent;
}

.vt .ox-tab {
    padding: 9px 15px;
    border: 1px solid var(--vt-line);
    border-radius: 99px;
    background: #ffffff;
    color: var(--vt-text);
    font-size: .84rem;
    font-weight: 800;
    box-shadow: 0 1px 0 var(--vt-line);
}

.vt .ox-tab::after { content: none; }
.vt .ox-tab:hover { border-color: #cbd5e1; background: #ffffff; color: var(--vt-ink); }
.vt .ox-tab b { padding: 1px 8px; border-radius: 99px; background: #f1f5f9; color: var(--vt-ink); font-size: .74rem; }
.vt .ox-tab.is-active { border-color: var(--vt-ink); background: var(--vt-ink); color: #ffffff; box-shadow: none; }
.vt .ox-tab.is-active b { background: var(--vt-brand); color: #04252f; }
.vt .ox-tab.is-alert.is-problemas b { background: #ffe4e6; color: #be123c; }
.vt .ox-tab.is-alert.is-entregar b { background: #dbeafe; color: #1d4ed8; }

.vt .ox-toolbar { gap: 10px; margin-bottom: 14px; padding: 0; }
.vt .ox-search { min-height: 46px; border: 2px solid var(--vt-line); border-radius: 14px; background: #ffffff; }
.vt .ox-search:focus-within { border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(34, 211, 238, .18); }
.vt .ox-toolbar select { min-height: 46px; border: 2px solid var(--vt-line); border-radius: 14px; background-color: #ffffff; font-weight: 700; }
.vt .po-list { padding: 0; }

/* ---------- Pedidos: cada compra es una tarjeta ---------- */
.vt-list { display: grid; gap: 12px; }

.vt-row {
    --c: #64748b;
    --cbg: #f1f5f9;
    display: grid;
    grid-template-columns: 50px minmax(170px, 1.25fr) minmax(150px, 1.2fr) 150px 160px 150px;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid var(--vt-line);
    border-left: 6px solid var(--c);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px -22px rgba(11, 19, 36, .6);
    cursor: pointer;
    outline: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.vt-row:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -22px rgba(11, 19, 36, .55); }
.vt-row:focus-visible { box-shadow: 0 0 0 3px rgba(34, 211, 238, .5); }
.vt-row.is-current { border-color: var(--c); box-shadow: 0 0 0 2px var(--c); }
.vt-row.is-entregar { --c: #2563eb; --cbg: #dbeafe; }
.vt-row.is-problema { --c: #e11d48; --cbg: #ffe4e6; background: #fffafb; }
.vt-row.is-revision { --c: #7c3aed; --cbg: #ede9fe; }
.vt-row.is-pendiente { --c: #d97706; --cbg: #fef3c7; }
.vt-row.is-entregado { --c: #059669; --cbg: #d1fae5; }
.vt-row.is-cancelado { --c: #94a3b8; --cbg: #f1f5f9; opacity: .82; }

.vt-ava {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--cbg);
    color: var(--c);
    font-family: "Poppins", sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
}

.vt-who, .vt-money, .vt-state { display: grid; gap: 3px; min-width: 0; }

.vt-who strong {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    color: var(--vt-ink);
    font-size: 1rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-who small, .vt-money small {
    overflow: hidden;
    color: var(--vt-muted);
    font-size: .78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt .po-wa { opacity: 1; width: 24px; height: 24px; border-radius: 8px; background: #dcfce7; color: #16a34a; }
.vt .po-wa svg { width: 15px; height: 15px; }
.vt .po-wa:hover { background: #16a34a; color: #ffffff; }

.vt-prods { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.vt-chip {
    overflow: hidden;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-chip.is-t0 { background: #fee2e2; color: #b91c1c; }
.vt-chip.is-t1 { background: #ede9fe; color: #5b21b6; }
.vt-chip.is-t2 { background: #dbeafe; color: #1e40af; }
.vt-chip.is-t3 { background: #dcfce7; color: #166534; }
.vt-chip.is-t4 { background: #fef3c7; color: #92400e; }
.vt-chip.is-t5 { background: #cffafe; color: #155e75; }
.vt-chip.is-more { background: #f1f5f9; color: #475569; }

.vt-money { justify-items: end; text-align: right; }
.vt-money strong { color: var(--vt-ink); font-family: "Poppins", sans-serif; font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.vt-state { justify-items: start; }

.vt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 11px;
    border-radius: 99px;
    background: var(--cbg);
    color: var(--c);
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.vt-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vt-wait { color: var(--vt-muted); font-size: .76rem; font-weight: 700; }
.vt-wait.is-warn { color: #d97706; }
.vt-wait.is-late { color: #e11d48; font-weight: 800; }
.vt-wait.is-fresh { color: #059669; }

.vt-action { display: grid; justify-items: end; }

.vt-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--c);
    color: #ffffff;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 18px -12px var(--c);
    transition: transform .15s ease, filter .15s ease;
}

.vt-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vt-row.is-entregado .vt-go,
.vt-row.is-cancelado .vt-go { background: #f1f5f9; color: var(--vt-ink); box-shadow: none; }

/* Paginas debajo de las tarjetas */
.vt .po-pager { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--vt-line); border-radius: 14px; background: #ffffff; }
.vt .po-page.is-active { border: 0; background: linear-gradient(135deg, #0e7490, var(--vt-pink)); color: #ffffff; }
.vt .ox-empty { margin: 0; border-radius: 18px; background: #ffffff; }

/* Panel de detalle: cabecera con el color de la marca */
.po-drawer .oxd-head { border-bottom: 0; }
.po-drawer .oxd-actions .ox-btn.is-primary { background: linear-gradient(135deg, #0e7490, #1e1b4b); }

@container potabla (max-width: 1060px) {
    .vt-row { grid-template-columns: 50px minmax(0, 1.3fr) minmax(0, 1fr) 130px 150px; }
    .vt-row .vt-prods { display: none; }
}

@container potabla (max-width: 760px) {
    .vt-row {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        grid-template-areas:
            "ava who money"
            "prods prods prods"
            "state state action";
        gap: 10px 12px;
        padding: 14px;
    }
    .vt-row .vt-ava { grid-area: ava; width: 46px; height: 46px; }
    .vt-row .vt-who { grid-area: who; }
    .vt-row .vt-prods { display: flex; grid-area: prods; }
    .vt-row .vt-money { grid-area: money; }
    .vt-row .vt-state { display: flex; flex-wrap: wrap; grid-area: state; align-items: center; gap: 4px 8px; }
    .vt-row .vt-wait { white-space: nowrap; }
    .vt-row .vt-action { grid-area: action; }
    .vt-row .vt-go { min-height: 40px; padding: 0 14px; }
    /* En el celular el WhatsApp esta en el detalle; el pago va bajo el total en una linea corta */
    .vt-row .po-wa { display: none; }
    .vt-row .vt-money { max-width: 120px; }
    .vt-row .vt-money small { white-space: normal; text-align: right; }
}

@media (max-width: 1100px) {
    .vt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .vt-hero { padding: 20px; border-radius: 18px; }
    .vt-hero h1 { font-size: 1.5rem; }
    .vt-hero-actions, .vt-hero-actions .vt-btn { width: 100%; justify-content: center; }
    .vt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vt-kpi:last-child { grid-column: 1 / -1; }
    .vt-kpi b { font-size: 1.6rem; }
    .vt-tab { flex: 0 0 auto; padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .vt-row, .vt-kpi, .vt-btn, .vt-go { transition: none; }
    .vt-row:hover, .vt-kpi:hover, .vt-btn:hover, .vt-go:hover { transform: none; }
}

/* ---------- Menu lateral: grupo desplegable "Gestión de ventas" (Pedidos y Pagos) ---------- */
.adminlte-area .sidebar-menu .nav-group details > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.adminlte-area .sidebar-menu .nav-group details > summary::-webkit-details-marker { display: none; }
.adminlte-area .sidebar-menu .nav-group summary:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }
.adminlte-area .sidebar-menu .nav-group summary.is-parent-active { color: #ffffff; }
/* "Gestión de ventas" completo: puede ir en dos lineas en vez de cortarse */
.adminlte-area .sidebar-menu .nav-group summary p { line-height: 1.2; white-space: normal; }
.adminlte-area .sidebar-menu .nav-group summary { padding-top: 6px; padding-bottom: 6px; }
.adminlte-area .sidebar-menu .nav-group summary.is-parent-active .nav-icon { background: rgba(94, 234, 212, .18); color: #5eead4; }

.adminlte-area .sidebar-menu .nav-chevron {
    display: grid;
    flex: none;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    color: rgba(255, 255, 255, .55);
    transition: transform .2s ease;
}

.adminlte-area .sidebar-menu .nav-chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.adminlte-area .sidebar-menu .nav-group details[open] .nav-chevron { transform: rotate(90deg); }
/* Abierto: cada subseccion muestra su propio numero */
.adminlte-area .sidebar-menu .nav-group details[open] .nav-group-badge { display: none; }

.adminlte-area .sidebar-menu .nav-sub {
    position: relative;
    margin: 0 0 6px 32px;
    padding: 0 0 0 10px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    list-style: none;
}

.adminlte-area .sidebar-menu .nav-sub .nav-link {
    min-height: 38px;
    margin: 3px 12px 3px 0;
    padding: 0 12px;
    gap: 10px;
    border-radius: 11px;
}

.adminlte-area .sidebar-menu .nav-sub .nav-link p { font-size: .87rem; }

.adminlte-area .sidebar-menu .nav-sub-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.adminlte-area .sidebar-menu .nav-sub .nav-link.active .nav-sub-dot {
    background: #5eead4;
    box-shadow: 0 0 0 4px rgba(94, 234, 212, .18);
}

@media (prefers-reduced-motion: reduce) {
    .adminlte-area .sidebar-menu .nav-chevron { transition: none; }
}

/* Verificacion con IA de pagos Lemon Cash (admin/pagos.php) */
.rv-ia-checks {
    display: grid;
    gap: 2px;
    margin: 6px 0 2px;
    padding: 0;
    list-style: none;
    font-size: .8rem;
}

.rv-ia-checks li {
    overflow-wrap: anywhere;
}

.rv-ia-checks b {
    display: inline-block;
    width: 1.1em;
}

.rv-ia-checks .is-ok {
    color: #067647;
}

.rv-ia-checks .is-bad {
    color: #b42318;
}

.rv-ia-checks .is-doubt {
    color: #b54708;
}

.rv-ia small {
    color: #4c1d95;
    font-size: .78rem;
}
/* Lemon: aprobacion automatica sin costo con los avisos del celular (admin/pagos.php) */
.pd-auto {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #b7f0cf;
    border-radius: 14px;
    background: #f6fef9;
}

.pd-auto header h3 {
    margin: 0 0 4px;
    color: #065f46;
    font-size: 1rem;
}

.pd-auto header p,
.pd-auto-steps p,
.pd-auto-empty {
    margin: 0;
    color: #475467;
    font-size: .84rem;
}

.pd-auto-url {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
}

.pd-auto-url span {
    grid-column: 1 / -1;
    color: #475467;
    font-size: .78rem;
    font-weight: 600;
}

.pd-auto-url code {
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.pd-auto-steps summary {
    cursor: pointer;
    color: #065f46;
    font-size: .86rem;
    font-weight: 700;
}

.pd-auto-steps ol {
    display: grid;
    gap: 6px;
    margin: 10px 0;
    padding-left: 20px;
    color: #344054;
    font-size: .84rem;
}

.pd-auto-log {
    display: grid;
    gap: 8px;
    font-size: .84rem;
}

.pd-auto-log ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-auto-log li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2px 10px;
    padding: 8px 10px;
    border-left: 3px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
}

.pd-auto-log li span {
    color: #667085;
    font-size: .78rem;
}

.pd-auto-log li small {
    grid-column: 2 / -1;
    color: #667085;
    overflow-wrap: anywhere;
}

.pd-auto-log li em {
    grid-column: 3;
    grid-row: 1;
    font-size: .76rem;
    font-style: normal;
    font-weight: 700;
}

.pd-auto-log li.is-ok { border-left-color: #12b76a; }
.pd-auto-log li.is-ok em { color: #067647; }
.pd-auto-log li.is-wait { border-left-color: #f79009; }
.pd-auto-log li.is-wait em { color: #b54708; }
.pd-auto-log li.is-off em { color: #98a2b3; }

.pd-auto-regen {
    margin: 0;
}

.pd-auto-ia {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding-top: 12px;
    border-top: 1px dashed #b7f0cf;
}

.pd-auto-ia div {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 260px;
}

.pd-auto-ia small {
    color: #667085;
    font-size: .8rem;
}

.pd-auto-limit-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    color: #344054;
}

.pd-auto-limit-field input {
    width: 110px;
    padding: 7px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font: inherit;
}

.rv-ia-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rv-ia-actions form {
    margin: 0;
}

@media (max-width: 600px) {
    .pd-auto-log li {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-auto-log li small,
    .pd-auto-log li em {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Configuracion → Cache de imagenes (admin/tienda.php) */
.st-cache {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0;
}

.st-cache div {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    background: #f9fafb;
}

.st-cache dt {
    color: #667085;
    font-size: .8rem;
}

.st-cache dd {
    margin: 0;
    color: #101828;
    font-size: 1.25rem;
    font-weight: 700;
}

.st-cache dd small {
    display: block;
    color: #667085;
    font-size: .78rem;
    font-weight: 500;
}

.st-cache .is-warn {
    border-color: #fedf89;
    background: #fffaeb;
}

.st-cache .is-ok {
    border-color: #abefc6;
    background: #ecfdf3;
}

.st-cache-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.st-cache-actions form {
    margin: 0;
}

.st-cache-actions .pg-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Pedidos: datos que envio el cliente para activar (perfil y PIN o correo) */
.ox-cdata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    background: #f0f9ff;
}

.ox-cdata.is-missing {
    border-color: #fde68a;
    background: #fffbeb;
}

.ox-cdata-body {
    display: grid;
    flex: 1 1 220px;
    gap: 2px;
    min-width: 0;
    color: #0f172a;
    font-size: .86rem;
}

.ox-cdata-body b {
    color: #075985;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ox-cdata-body span {
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ox-cdata.is-missing .ox-cdata-body b {
    color: #92400e;
}

.ox-cdata.is-missing .ox-cdata-body span {
    color: #78350f;
    font-family: inherit;
}

/* Entrega sin claves: correo donde se agrego al cliente (grupo familiar o invitacion) */
.ox-activate {
    display: grid;
    gap: 10px;
}

.ox-activate[hidden] {
    display: none;
}

.ox-insert {
    justify-self: start;
    padding: 4px 0;
    border: 0;
    background: none;
    color: #0e7490;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

.ox-insert:hover {
    text-decoration: underline;
}
/* Productos: datos que se piden al cliente al comprar */
.pr-kinds {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pr-kinds legend {
    margin-bottom: 8px;
    padding: 0;
    color: var(--db-ink, #0f172a);
    font-size: .86rem;
    font-weight: 700;
}

.pr-kinds legend small {
    color: #64748b;
    font-weight: 500;
}
/* Productos: datos que se piden al cliente (cuales y si son obligatorios) y como se entrega */
.pr-fields {
    display: grid;
    gap: 6px;
}

.pr-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 12px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 10px;
    background: #ffffff;
}

.pr-field.is-on {
    border-color: #0f172a;
    box-shadow: 0 0 0 1px #0f172a;
}

.pr-field-pick {
    display: flex;
    flex: 1 1 150px;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--db-ink, #0f172a);
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
}

.pr-field-req {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #475569;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.pr-field:not(.is-on) .pr-field-req {
    opacity: .45;
}

.ox-drawer .pr-field input[type="checkbox"] {
    flex: none;
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #0f172a;
}

.ox-drawer .pr-field-name {
    flex: 2 1 200px;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .86rem;
}

.ox-drawer .pr-field-name:disabled {
    background: #f8fafc;
}

.pr-fields-preview {
    margin: 4px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f0f9ff;
    color: #075985;
    font-size: .84rem;
}

.pr-delivery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .pr-delivery {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Productos: eliminar (logico) los que nunca tuvieron stock; desactivar / activar los agotados; restaurar */
.pv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    color: #64748b;
    font-size: .78rem;
    font-weight: 600;
}

.pv-act {
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.pv-act:hover {
    border-color: #0f172a;
}

.pv-act.is-danger {
    border-color: #fecaca;
    color: #b91c1c;
}

.pv-act.is-danger:hover {
    border-color: #b91c1c;
    background: #fef2f2;
}

.pv-act:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.pv-act:disabled {
    cursor: wait;
    opacity: .6;
}

.pv-card.is-deleted {
    cursor: default;
}

.pv-card.is-deleted .pv-media {
    filter: grayscale(1);
    opacity: .7;
}

.pr-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.pv-grid.is-list .pv-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.pv-grid.is-list .pv-card.is-deleted {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.pv-grid.is-list .pv-card.is-deleted .pv-head {
    flex: 1 1 160px;
    padding-right: 0;
}

.pv-grid.is-list .pv-card.is-deleted .pv-state {
    margin-right: 0;
}

.pv-grid.is-list .pv-card.is-deleted .pv-store span {
    font-size: .8rem;
}
/* ==========================================================================
   Productos: orden por estado con titulos de grupo, pestañas + "Por revisar",
   menu "⋯" por producto y duracion del plan editable
   ========================================================================== */
.pv-filters {
    display: grid;
    gap: 10px;
}

.pv-review {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.pv-review-title {
    margin-right: 2px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.pv-chip b {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .72rem;
    text-align: center;
}

.pv-chip.has-items b {
    background: #fef3c7;
    color: #92400e;
}

.pv-chip:hover {
    border-color: #94a3b8;
    color: #0f172a;
}

.pv-chip.is-active {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

.pv-chip.is-active b {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

.pv-chip:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

/* Titulos de grupo: "En venta 6", "Agotados 16"... */
.pv-group {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    color: #334155;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pv-group::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
}

.pv-group b {
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .72rem;
    letter-spacing: 0;
}

.pv-group.is-rank-0::before { background: #16a34a; }
.pv-group.is-rank-1::before,
.pv-group.is-rank-2::before { background: #d97706; }
.pv-group.is-rank-3::before { background: #dc2626; }
.pv-group.is-rank-4::before,
.pv-group.is-rank-5::before { background: #94a3b8; }
.pv-group.is-rank-cat::before { background: #0e7490; }

.pv-grid.is-list .pv-group {
    margin: 0;
    padding: 9px 16px;
    border-top: 1px solid #eef2f6;
    background: #f8fafc;
}

.pv-grid.is-list .pv-cards > .pv-group:first-child {
    border-top: 0;
}

.pv-grid.is-list .pv-group + .pv-card {
    border-top: 1px solid #eef2f6;
}

/* Plan en la fila: "Streaming · Mensual" */
.pv-plan {
    color: #0e7490;
    font-weight: 700;
}

/* Menu "⋯" */
.pv-more {
    position: absolute;
    top: 8px;
    right: 64px;
    z-index: 2;
}

.pv-more-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
    color: #334155;
    cursor: pointer;
}

.pv-more-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
}

.pv-more-btn:hover,
.pv-more-btn[aria-expanded="true"] {
    background: #0f172a;
    color: #ffffff;
}

.pv-more-btn:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.pv-more-menu {
    position: fixed;
    z-index: 60;
    display: grid;
    min-width: 240px;
    max-width: 290px;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .35);
}

.pv-more-menu[hidden] {
    display: none;
}

.pv-more-menu [role="menuitem"] {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.pv-more-menu [role="menuitem"]:hover,
.pv-more-menu [role="menuitem"]:focus-visible {
    outline: none;
    background: #f1f5f9;
}

.pv-more-menu .is-danger {
    color: #b91c1c;
}

.pv-more-menu .is-danger:hover,
.pv-more-menu .is-danger:focus-visible {
    background: #fef2f2;
}

.pv-more-note {
    margin: 4px 0 0;
    padding: 8px 12px 4px;
    border-top: 1px solid #f1f5f9;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.35;
}

/* Tabla: columna final con el interruptor y el menu */
.pv-grid.is-list .pv-list-head,
.pv-grid.is-list .pv-card {
    grid-template-columns: 44px minmax(150px, 1.5fr) 98px 112px 84px 66px 66px minmax(96px, .8fr) minmax(130px, 1fr) 96px;
}

/* Sin transform: el menu (position: fixed) no debe quedar atrapado dentro de la tarjeta */
.pv-grid.is-list .pv-more {
    top: calc(50% - 15px);
    right: 68px;
}

.pv-card:has([data-more][aria-expanded="true"]) {
    transform: none !important;
}

.pv-grid.is-list .pv-more-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    box-shadow: none;
}

.pv-grid.is-list .pv-more-btn:hover,
.pv-grid.is-list .pv-more-btn[aria-expanded="true"] {
    background: #0f172a;
}

@container pvtabla (max-width: 1000px) {
    .pv-grid.is-list .pv-list-head,
    .pv-grid.is-list .pv-card {
        grid-template-columns: 44px minmax(130px, 1.4fr) 90px 100px 76px minmax(80px, .8fr) minmax(110px, 1fr) 96px;
    }
}

@container pvtabla (max-width: 720px) {
    .pv-grid.is-list .pv-more {
        top: 12px;
    }

    .pv-grid.is-list .pv-head {
        padding-right: 100px;
    }

    .pv-grid.is-list .pv-state {
        margin-right: 100px;
    }
}

/* Duracion del plan */
.pr-plan {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
    background: #f8fafc;
}

.pr-plan legend {
    float: left;
    width: 100%;
    margin: 0 0 2px;
    padding: 0;
    color: var(--db-ink, #0f172a);
    font-size: .88rem;
    font-weight: 700;
}

.pr-plan legend small {
    color: #64748b;
    font-weight: 500;
}

.pr-plan-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    clear: both;
}

.pr-plan input[type="number"],
.pr-plan select {
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .92rem;
}

.pr-plan input[type="number"] {
    width: 92px;
}

.pr-plan input[type="number"]:disabled {
    background: #f1f5f9;
    color: #94a3b8;
}

.pr-plan select {
    min-width: 190px;
}

.pr-plan input:focus,
.pr-plan select:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.pr-plan-shows {
    color: #475569;
    font-size: .82rem;
}

.pr-plan-shows b {
    color: #0e7490;
}

.pr-plan-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pr-plan-quick button {
    padding: 5px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.pr-plan-quick button:hover {
    border-color: #0f172a;
}

.pr-plan-quick button[aria-pressed="true"] {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

.pr-plan-quick button:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

/* Ajustes: plan en una linea dentro del panel, categoria y plan sin saltar de linea, columna final mas ancha */
.ox-drawer .pr-plan-row input[type="number"] {
    flex: none;
    width: 92px !important;
}

.ox-drawer .pr-plan-row select {
    flex: 0 1 220px;
    width: auto !important;
    min-width: 170px;
}

.pv-grid.is-list .pv-head small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-grid.is-list .pv-list-head,
.pv-grid.is-list .pv-card {
    grid-template-columns: 44px minmax(150px, 1.5fr) 98px 112px 84px 66px 66px minmax(96px, .8fr) minmax(130px, 1fr) 104px;
}

.pv-grid.is-list .pv-more {
    right: 66px;
}

@container pvtabla (max-width: 1000px) {
    .pv-grid.is-list .pv-list-head,
    .pv-grid.is-list .pv-card {
        grid-template-columns: 44px minmax(130px, 1.4fr) 90px 100px 76px minmax(80px, .8fr) minmax(110px, 1fr) 104px;
    }
}

/* ==========================================================================
   Productos → "Stock y accesos": resumen, mover stock, cargar accesos, accesos listos e historial
   ========================================================================== */
.sk {
    display: grid;
    gap: 14px;
}

/* Resumen */
.sk-summary {
    --sk-tone: #16a34a;
    --sk-soft: #f0fdf4;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--sk-soft), #ffffff 60%);
}

.sk-summary.is-amber { --sk-tone: #d97706; --sk-soft: #fffbeb; }
.sk-summary.is-red { --sk-tone: #dc2626; --sk-soft: #fef2f2; }

.sk-main {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.sk-label {
    color: #475569;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sk-big {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.sk-big strong {
    color: #0f172a;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}

.sk-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sk-tone) 35%, transparent);
    color: var(--sk-tone);
    font-size: .76rem;
    font-weight: 800;
}

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

.sk-summary.is-amber .sk-state { color: #b45309; }
.sk-summary.is-red .sk-state { color: #b91c1c; }
.sk-summary.is-green .sk-state { color: #15803d; }

.sk-bar {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.sk-bar i {
    display: block;
    height: 100%;
}

.sk-bar .is-free,
.sk-legend .is-free { background: #16a34a; }
.sk-bar .is-held,
.sk-legend .is-held { background: #6366f1; }

.sk-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: #475569;
    font-size: .78rem;
    font-weight: 600;
}

.sk-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sk-legend i {
    width: 8px;
    height: 8px;
    border-radius: 3px;
}

.sk-legend-total {
    margin-left: auto;
    color: #64748b;
}

.sk-metrics {
    display: grid;
    gap: 8px;
    margin: 0;
}

.sk-metrics > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 9px 12px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
    background: #ffffff;
}

.sk-metrics dt {
    color: #64748b;
    font-size: .74rem;
    font-weight: 700;
}

.sk-metrics dd {
    grid-row: span 2;
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.sk-metrics dd span {
    color: #94a3b8;
    font-size: .9rem;
    font-weight: 700;
}

.sk-metrics small {
    color: #64748b;
    font-size: .74rem;
}

.sk-meter {
    display: block;
    height: 6px;
    margin-top: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.sk-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0e7490;
}

/* Tarjetas */
.sk-card {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 16px;
    background: #ffffff;
}

.sk-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sk-card-head > div {
    flex: 1;
    min-width: 0;
}

.sk-card-head h3,
.sk-list summary h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.sk-card-head p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: .8rem;
    line-height: 1.4;
}

.sk-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #0f172a;
}

.sk-icon.is-key { background: #ecfeff; color: #0e7490; }
.sk-icon.is-list { background: #f0fdf4; color: #15803d; }

.sk-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-badge {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.sk-badge.is-amber { background: #fef3c7; color: #92400e; }
.sk-badge.is-green { background: #dcfce7; color: #166534; }

/* Tipo de movimiento */
.sk-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sk-mode {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.sk-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sk-mode-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}

.sk-mode.is-in .sk-mode-icon { background: #dcfce7; color: #15803d; }
.sk-mode.is-out .sk-mode-icon { background: #fee2e2; color: #b91c1c; }
.sk-mode.is-fix .sk-mode-icon { background: #e0e7ff; color: #4338ca; }

.sk-mode span:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.sk-mode b {
    color: #0f172a;
    font-size: .88rem;
}

.sk-mode small {
    color: #64748b;
    font-size: .74rem;
    line-height: 1.3;
}

.sk-mode:hover {
    border-color: #94a3b8;
}

.sk-mode:has(input:checked) {
    border-color: #0f172a;
    background: #f8fafc;
    box-shadow: 0 0 0 1px #0f172a;
}

.sk-mode:has(input:focus-visible) {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.sk-mode.is-disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* Cantidad y vista previa */
.sk-qty-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.sk-stepper {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
}

.sk-stepper button {
    width: 42px;
    border: 0;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
}

.sk-stepper button:hover {
    background: #e2e8f0;
}

.sk-stepper button:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: -2px;
}

.ox-drawer .sk-stepper input[type="number"] {
    width: 90px !important;
    height: 44px;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-inline: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    background: #ffffff;
    box-shadow: none !important;
    color: #0f172a;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    -moz-appearance: textfield;
}

.sk-stepper input::-webkit-outer-spin-button,
.sk-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.ox-drawer .sk-stepper input:focus {
    outline: none;
    background: #f0f9ff;
}

.sk-preview {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 8px 14px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
    font-size: .86rem;
    font-weight: 600;
}

.sk-preview .sk-from {
    color: #64748b;
    font-size: 1rem;
    font-weight: 700;
}

.sk-preview i {
    color: #94a3b8;
    font-style: normal;
}

.sk-preview b {
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.sk-preview.is-up { background: #f0fdf4; }
.sk-preview.is-up b { color: #15803d; }
.sk-preview.is-down { background: #fef2f2; }
.sk-preview.is-down b { color: #b91c1c; }

/* Campos */
.sk-field {
    display: grid;
    gap: 6px;
    margin: 0;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 700;
}

.sk-field small {
    color: #64748b;
    font-weight: 500;
}

.ox-drawer .sk-field input,
.ox-drawer .sk-textarea {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .92rem;
    font-weight: 500;
}

.ox-drawer .sk-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .86rem;
    line-height: 1.5;
}

.ox-drawer .sk-field input:focus,
.ox-drawer .sk-textarea:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.sk-hint {
    margin-top: -4px;
    color: #64748b;
    font-size: .78rem;
}

.sk-hint code {
    padding: 1px 5px;
    border-radius: 5px;
    background: #f1f5f9;
    color: #0f172a;
}

.sk-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
}

.sk-check:has(input:checked) {
    border-color: #0e7490;
    background: #ecfeff;
}

.ox-drawer .sk-check input {
    flex: none;
    width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 !important;
    accent-color: #0e7490;
}

.sk-check span {
    display: grid;
    gap: 1px;
}

.sk-check b {
    color: #0f172a;
    font-size: .86rem;
}

.sk-check small {
    color: #64748b;
    font-size: .76rem;
}

.sk-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.sk-foot p {
    flex: 1 1 220px;
    margin: 0;
}

.sk-foot p:empty,
.sk-foot p[hidden] {
    display: none;
}

.sk-foot .ox-btn {
    margin-left: auto;
}

/* Accesos listos */
.sk-list summary {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    cursor: pointer;
}

.sk-list summary::-webkit-details-marker {
    display: none;
}

.sk-list summary h3 {
    flex: 1;
}

.sk-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg) translateY(-3px);
    transition: transform .15s ease;
}

.sk-list[open] .sk-chevron {
    transform: rotate(-135deg) translateY(-3px);
}

.sk-list summary:focus-visible {
    border-radius: 10px;
    outline: 2px solid #0e7490;
    outline-offset: 4px;
}

.sk-access-list {
    display: grid;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
    list-style: none;
}

.sk-access-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
}

.sk-access-list li + li {
    border-top: 1px solid #f1f5f9;
}

.sk-access-list li:nth-child(even) {
    background: #f8fafc;
}

.sk-num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: .76rem;
    font-weight: 800;
}

.sk-access-list code {
    overflow: hidden;
    color: #0f172a;
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-access-list small {
    color: #64748b;
    font-size: .74rem;
    white-space: nowrap;
}

.sk-access-list form {
    margin: 0;
}

.sk-del {
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #b91c1c;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.sk-del:hover {
    border-color: #fecaca;
    background: #fef2f2;
}

.sk-del:focus-visible {
    outline: 2px solid #b91c1c;
    outline-offset: 2px;
}

/* Accesos listos: ver completo y copiar */
.sk-access-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sk-view {
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #1e40af;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.sk-view:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.sk-view:focus-visible {
    outline: 2px solid #1e40af;
    outline-offset: 2px;
}

.sk-view:disabled {
    opacity: .6;
    cursor: wait;
}

.sk-access-full {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.sk-access-full[hidden] {
    display: none;
}

.sk-access-full pre {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .84rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: all;
}

/* Historial */
.sk-history .iv-history {
    margin: 0;
}

@media (max-width: 640px) {
    .sk-summary,
    .sk-modes {
        grid-template-columns: minmax(0, 1fr);
    }

    .sk-access-list li {
        grid-template-columns: 28px minmax(0, 1fr) auto;
    }

    .sk-access-list small {
        display: none;
    }

    .sk-foot .ox-btn {
        width: 100%;
    }
}

/* Stock: ajustes (panel angosto, etiqueta del motivo, accesos en letra monoespaciada) */
.ivd > * {
    min-width: 0;
}

.sk-field > span {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ox-drawer .sk-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

@media (max-width: 640px) {
    .ivd {
        padding: 16px 14px 24px;
    }

    .ivd-head.pr-head {
        flex-wrap: wrap;
    }

    .pr-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .sk-legend-total {
        margin-left: 0;
    }
}

/* ==========================================================================
   Productos (lista): stock como etiqueta de color con reservas debajo,
   vendidos "este mes", accesos con barra por cobertura y ceros atenuados
   ========================================================================== */
.pv-stock-word,
.pv-stock-held {
    display: none;
}

.pv-stats dd.is-zero {
    color: #94a3b8;
}

.pv-stock-num {
    font-variant-numeric: tabular-nums;
}

/* Accesos: color segun cuantas unidades ya tienen su acceso */
.pv-access.is-full .iv-bar i { background: #16a34a; }
.pv-access.is-part .iv-bar i { background: #0e7490; }
.pv-access.is-empty .iv-bar { background: #fde68a; }
.pv-access.is-empty b { color: #b45309; }

.pv-access-pct {
    margin-left: 4px;
    color: #64748b;
    font-size: .72rem;
}

.pv-access.is-full .pv-access-pct { color: #15803d; }

/* Tabla: columnas (Reservas pasa debajo del stock) */
.pv-grid.is-list .pv-list-head,
.pv-grid.is-list .pv-card {
    grid-template-columns: 44px minmax(150px, 1.5fr) 98px 104px 156px 76px minmax(104px, .8fr) minmax(130px, 1fr) 104px;
}

.pv-grid.is-list .pv-list-head .is-end {
    grid-column: 9;
}

.pv-grid.is-list .pv-reserved {
    display: none !important;
}

/* Stock: "9 disponibles" en una etiqueta de color, "+" para agregar y las reservas debajo */
.pv-grid.is-list .pv-stats > .pv-stock {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 3px 8px;
    padding: 0;
    background: transparent;
}

.pv-grid.is-list .pv-stock dd {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.pv-grid.is-list .pv-stock .pv-stock-num {
    font-size: 1rem;
    font-weight: 800;
}

.pv-grid.is-list .pv-stock-word {
    display: inline;
}

.pv-grid.is-list .pv-stock.is-bajo dd {
    background: #fef3c7;
    color: #92400e;
}

.pv-grid.is-list .pv-stock.is-agotado dd {
    background: #fee2e2;
    color: #991b1b;
}

.pv-grid.is-list .pv-stock .pr-plus {
    grid-row: 1;
    grid-column: 2;
    order: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    opacity: .75;
}

.pv-grid.is-list .pv-card:hover .pv-stock .pr-plus,
.pv-grid.is-list .pv-stock .pr-plus:focus-visible {
    opacity: 1;
}

.pv-grid.is-list .pv-stock-held {
    display: block;
    grid-column: 1 / -1;
    padding-left: 4px;
    color: #475569;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.pv-grid.is-list .pv-stock-held.is-zero {
    color: #94a3b8;
    font-weight: 500;
}

/* Vendidos: numero con "este mes" debajo */
.pv-grid.is-list .pv-sold dd {
    display: grid;
    justify-items: end;
    line-height: 1.15;
}

.pv-grid.is-list .pv-sold dd small {
    display: block;
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 600;
}

/* Accesos en la tabla: sin la palabra (ya esta en la cabecera) */
.pv-grid.is-list .pv-access-label {
    display: none;
}

.pv-grid.is-list .pv-access > span:first-child {
    color: #475569;
    font-size: .8rem;
}

.pv-grid.is-list .pv-access b {
    font-size: .9rem;
}

/* Tabla mas angosta: sin "Vendidos" */
@container pvtabla (max-width: 1000px) {
    .pv-grid.is-list .pv-list-head,
    .pv-grid.is-list .pv-card {
        grid-template-columns: 44px minmax(130px, 1.4fr) 90px 100px 148px minmax(90px, .8fr) minmax(110px, 1fr) 104px;
    }

    .pv-grid.is-list .pv-list-head > :nth-child(6) {
        display: block;
    }

    .pv-grid.is-list .pv-list-head .is-end {
        grid-column: 8;
    }
}

@container pvtabla (max-width: 720px) {
    .pv-grid.is-list .pv-stock-held {
        display: none;
    }
}

/* Lista: porcentaje de accesos mas liviano */
.pv-access .pv-access-pct {
    font-weight: 600;
}

/* Lista angosta (celular): el stock solo con el numero de color y el "+" */
@container pvtabla (max-width: 720px) {
    .pv-grid.is-list .pv-stock-word {
        display: none;
    }

    .pv-grid.is-list .pv-stats > .pv-stock {
        justify-self: end;
    }
}

/* ==========================================================================
   Gestión de productos: tabla de Productos (Nombre, Categoría, Tipo, Duración, Precio, Costo,
   Ganancia, Estado de venta, Stock, Estado de stock, Estado en tienda) y página de Categorías
   ========================================================================== */
.ct-crumb {
    display: block;
    margin-bottom: 2px;
    color: #0e7490;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---------- Tabla de productos ---------- */
.pv-row,
.pv-thead {
    display: none;
}

.pv-grid.is-list {
    --pv-cols: minmax(150px, 1.5fr) 104px 104px 76px 86px 70px 84px 92px 68px 86px 108px 34px;
    overflow-x: auto;
}

.pv-grid.is-list .pv-thead,
.pv-grid.is-list .pv-cards {
    min-width: 1080px;
}

.pv-grid.is-list .pv-thead {
    display: grid;
    grid-template-columns: var(--pv-cols);
    align-items: center;
    column-gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--db-line, #e2e8f0);
    background: #f8fafc;
    color: #64748b;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pv-grid.is-list .pv-thead > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-grid.is-list .pv-thead button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.pv-grid.is-list .pv-thead button:hover,
.pv-grid.is-list .pv-thead button.is-sorted {
    color: #0f172a;
}

.pv-grid.is-list .pv-thead button::after {
    content: "↕";
    color: #cbd5e1;
}

.pv-grid.is-list .pv-thead button.is-sorted::after { content: "↑"; color: #0f172a; }
.pv-grid.is-list .pv-thead button.is-sorted.is-reverse::after { content: "↓"; }
.pv-grid.is-list .pv-thead .is-num { justify-content: flex-end; text-align: right; }

/* La fila reemplaza el contenido de la tarjeta en la vista de tabla */
.pv-grid.is-list .pv-card,
.pv-grid.is-list .pv-card.is-deleted {
    display: block;
    min-height: 0;
    padding: 0;
}

.pv-grid.is-list .pv-card > .pv-media,
.pv-grid.is-list .pv-card > .pv-body {
    display: none !important;
}

.pv-grid.is-list .pv-row {
    display: grid;
    grid-template-columns: var(--pv-cols);
    align-items: center;
    column-gap: 8px;
    min-height: 58px;
    padding: 8px 14px;
    cursor: pointer;
}

.pv-grid.is-list .pv-card.is-deleted .pv-row {
    cursor: default;
}

.pv-c {
    min-width: 0;
    color: #0f172a;
    font-size: .82rem;
}

.pv-c-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pv-c-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pv-thumb {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 10px;
    background: linear-gradient(135deg, #e0f2fe, #ccfbf1);
    color: #0e7490;
    font-weight: 800;
}

.pv-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-c-title {
    min-width: 0;
}

.pv-c-title strong {
    display: block;
    overflow: hidden;
    font-size: .88rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-card.is-hidden-product .pv-thumb img,
.pv-card.is-hidden-product .pv-c-title strong {
    opacity: .55;
}

.pv-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    color: #334155;
    font-size: .8rem;
    font-weight: 600;
}

.pv-cat i {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #ecfeff;
    color: #0e7490;
    font-size: .7rem;
    line-height: 22px;
    text-align: center;
}

.pv-type,
.pv-dur {
    display: inline-block;
    max-width: 100%;
    color: #334155;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
}

.pv-type {
    padding: 3px 8px;
    border-radius: 8px;
    background: #f1f5f9;
}

.pv-type.is-suggested {
    border: 1px dashed #cbd5e1;
    background: transparent;
    color: #64748b;
}

.pv-dur {
    color: #0e7490;
    font-weight: 700;
}

.pv-c-num .pr-price-btn {
    margin-left: auto;
}

.pv-c-num .pr-price-btn b {
    font-size: .88rem;
}

.pv-c-num .pr-price-cta {
    margin-left: auto;
    padding: 3px 8px;
    font-size: .74rem;
}

.pv-none {
    color: #cbd5e1;
    font-weight: 700;
}

.pv-profit {
    display: inline-grid;
    justify-items: end;
    line-height: 1.15;
}

.pv-profit b {
    font-size: .86rem;
}

.pv-profit small {
    font-size: .68rem;
    font-weight: 700;
}

.pv-profit.is-up { color: #15803d; }
.pv-profit.is-down { color: #b91c1c; }

.pv-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.pv-pill::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pv-pill.is-green { background: #dcfce7; color: #166534; }
.pv-pill.is-amber { background: #fef3c7; color: #92400e; }
.pv-pill.is-red { background: #fee2e2; color: #991b1b; }
.pv-pill.is-gray { background: #f1f5f9; color: #475569; }

.pv-c-stock {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pv-c-stock > span {
    display: grid;
    line-height: 1.1;
}

.pv-c-stock b {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pv-c-stock b.is-zero {
    color: #b91c1c;
}

.pv-c-stock small {
    color: #64748b;
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
}

.pv-c-stock .pr-plus {
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 999px;
    opacity: .75;
}

.pv-row:hover .pv-c-stock .pr-plus,
.pv-c-stock .pr-plus:focus-visible {
    opacity: 1;
}

.pv-row-switch {
    gap: 6px !important;
}

.pv-row-switch input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.pv-row-switch span {
    flex: none;
    width: 36px !important;
    height: 20px !important;
}

.pv-row-switch span::after {
    width: 14px !important;
    height: 14px !important;
}

.pv-row-switch input:checked + span::after {
    transform: translateX(16px) !important;
}

.pv-row-switch b {
    min-width: 0 !important;
    color: #334155 !important;
    font-size: .74rem !important;
    font-weight: 700;
}

.pv-c-more {
    display: flex;
    justify-content: flex-end;
}

.pv-grid.is-list .pv-row .pv-more {
    position: static;
}

.pv-grid.is-list .pv-row .pv-more-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    box-shadow: none;
}

.pv-grid.is-list .pv-row .pv-more-btn:hover,
.pv-grid.is-list .pv-row .pv-more-btn[aria-expanded="true"] {
    background: #0f172a;
    color: #ffffff;
}

.pv-c-deleted {
    display: flex;
    grid-column: span 4;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.pv-c-deleted small {
    color: #64748b;
    font-size: .72rem;
}

.pv-grid.is-list .pv-row .pv-act {
    padding: 5px 9px;
    font-size: .74rem;
}

.pv-grid.is-list .pv-c-deleted + .pv-c-more {
    grid-column: span 1;
}

/* Celular: cada producto como una ficha con "Etiqueta: valor" */
@container pvtabla (max-width: 720px) {
    .pv-grid.is-list .pv-thead {
        display: none;
    }

    .pv-grid.is-list .pv-cards {
        min-width: 0;
    }

    .pv-grid.is-list .pv-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        padding: 12px 14px;
    }

    .pv-grid.is-list .pv-c-name {
        grid-column: 1 / -1;
        padding-right: 40px;
    }

    .pv-grid.is-list .pv-c-more {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .pv-grid.is-list .pv-card {
        position: relative;
    }

    .pv-grid.is-list .pv-c[data-label] {
        display: grid;
        gap: 2px;
        text-align: left;
    }

    .pv-grid.is-list .pv-c[data-label]::before {
        content: attr(data-label);
        color: #64748b;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .pv-grid.is-list .pv-c-num .pr-price-btn,
    .pv-grid.is-list .pv-c-num .pr-price-cta {
        margin-left: 0;
    }

    .pv-grid.is-list .pv-profit {
        justify-items: start;
    }

    .pv-grid.is-list .pv-c-stock {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: start;
    }

    .pv-grid.is-list .pv-c-stock::before {
        grid-column: 1 / -1;
    }

    .pv-grid.is-list .pv-c-deleted {
        grid-column: 1 / -1;
    }
}

/* ---------- Página de Categorías ---------- */
.ct-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ct-summary > div {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 14px;
    background: #ffffff;
}

.ct-summary b {
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 800;
}

.ct-summary span {
    color: #64748b;
    font-size: .8rem;
}

.ct-card {
    padding: 0;
    overflow: hidden;
}

.ct-table {
    width: 100%;
    border-collapse: collapse;
}

.ct-table th {
    padding: 11px 16px;
    border-bottom: 1px solid var(--db-line, #e2e8f0);
    background: #f8fafc;
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
}

.ct-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    font-size: .88rem;
    vertical-align: middle;
}

.ct-table tbody tr:hover {
    background: #f8fafc;
}

.ct-table tr.is-off .ct-name strong,
.ct-table tr.is-off .ct-icon {
    opacity: .5;
}

.ct-col-order {
    width: 132px;
}

.ct-col-actions {
    width: 1%;
    white-space: nowrap;
}

.ct-order {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ct-order form,
.ct-actions form,
.ct-toggle-form {
    margin: 0;
}

.ct-pos {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    font-size: .8rem;
    font-weight: 800;
}

.ct-arrow {
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
}

.ct-arrow:hover:not(:disabled) {
    border-color: #0f172a;
}

.ct-arrow:disabled {
    cursor: default;
    opacity: .35;
}

.ct-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #ecfeff;
    color: #0e7490;
    font-size: 1rem;
}

.ct-name > span:last-child {
    display: grid;
    gap: 1px;
}

.ct-name strong {
    font-size: .95rem;
    font-weight: 800;
}

.ct-name small {
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
}

.ct-count {
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
}

.ct-count:hover {
    color: #0e7490;
    text-decoration: underline;
}

.ct-selling {
    display: block;
    color: #15803d;
    font-size: .74rem;
    font-weight: 600;
}

.ct-empty {
    color: #94a3b8;
    font-size: .82rem;
}

.ct-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #64748b;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

.ct-toggle > span {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .2s ease;
}

.ct-toggle > span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transition: transform .2s ease;
}

.ct-toggle.is-on {
    color: #15803d;
}

.ct-toggle.is-on > span {
    background: #10b981;
}

.ct-toggle.is-on > span::after {
    transform: translateX(16px);
}

.ct-toggle:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.ct-toggle:focus-visible,
.ct-arrow:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.ct-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.ct-note {
    margin: 0;
    padding: 12px 16px;
    color: #64748b;
    font-size: .8rem;
}

/* Ventana para crear o editar */
.ct-dialog {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .45);
}

.ct-dialog::backdrop {
    background: rgba(15, 23, 42, .45);
}

.ct-dialog form {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.ct-dialog header,
.ct-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ct-dialog footer {
    justify-content: flex-end;
}

.ct-dialog h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 800;
}

.ct-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 1.2rem;
    cursor: pointer;
}

.ct-field {
    display: grid;
    gap: 6px;
    margin: 0;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 700;
}

.ct-field input {
    height: 44px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #0f172a;
    font: inherit;
    font-size: .95rem;
    font-weight: 500;
}

.ct-field input:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.ct-icons {
    margin: 0;
    padding: 0;
    border: 0;
}

.ct-icons legend {
    margin-bottom: 8px;
    padding: 0;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 700;
}

.ct-icon-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
}

.ct-icon-grid label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.ct-icon-grid input {
    position: absolute;
    opacity: 0;
}

.ct-icon-grid label > span {
    display: grid;
    place-items: center;
    height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #334155;
    font-size: 1rem;
}

.ct-icon-grid label:hover > span {
    border-color: #94a3b8;
}

.ct-icon-grid input:checked + span {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

.ct-icon-grid input:focus-visible + span {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.ct-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #64748b;
    font-size: .82rem;
}

.ct-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: .82rem;
}

@media (max-width: 720px) {
    .ct-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-table thead {
        display: none;
    }

    .ct-table,
    .ct-table tbody,
    .ct-table tr,
    .ct-table td {
        display: block;
        width: auto;
    }

    .ct-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding: 12px 14px;
        border-bottom: 1px solid #f1f5f9;
    }

    .ct-table td {
        padding: 0;
        border: 0;
    }

    .ct-table td:nth-child(2) {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .ct-icon-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Tabla de productos: anchos para que entre completa en pantallas comunes (en angostas se desliza) */
.pv-grid.is-list {
    --pv-cols: minmax(118px, 1.3fr) 92px 94px 70px 76px 62px 66px 92px 62px 88px 84px 28px;
}

.pv-grid.is-list .pv-thead,
.pv-grid.is-list .pv-cards {
    min-width: 1000px;
}

.pv-grid.is-list .pv-thead,
.pv-grid.is-list .pv-row {
    column-gap: 6px;
}

.pv-grid.is-list .pv-thead > * {
    overflow: visible;
    line-height: 1.2;
    white-space: normal;
}

.pv-grid.is-list .pv-c-stock small {
    display: none;
}

.pv-grid.is-list .pv-type {
    padding: 2px 7px;
    font-size: .76rem;
}

.pv-grid.is-list .pv-cat {
    font-size: .78rem;
}

@container pvtabla (max-width: 720px) {
    .pv-grid.is-list .pv-cards {
        min-width: 0;
    }

    .pv-grid.is-list .pv-c-stock small {
        display: block;
    }
}


/* ==========================================================================
   Gestión de clientes (CRM): Clientes (datos + ficha) y Renovaciones
   ========================================================================== */
.crm-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.crm-summary button,
.crm-summary a {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.crm-summary button:hover,
.crm-summary a:hover {
    border-color: #94a3b8;
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .5);
}

.crm-summary button:focus-visible,
.crm-summary a:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.crm-summary b {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.crm-summary span {
    color: #64748b;
    font-size: .8rem;
}

.crm-summary .is-green b { color: #15803d; }
.crm-summary .is-amber b { color: #b45309; }
.crm-summary .is-red b { color: #b91c1c; }

/* Tabla */
.crm-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 14px;
}

.crm-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.crm-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--db-line, #e2e8f0);
    background: #f8fafc;
    color: #64748b;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.crm-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    font-size: .84rem;
    vertical-align: middle;
}

.crm-table tbody tr:last-child td {
    border-bottom: 0;
}

.crm-table tbody tr[data-id] {
    cursor: pointer;
}

.crm-table tbody tr:hover {
    background: #f8fafc;
}

.crm-table tbody tr:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: -2px;
}

.crm-table .is-num {
    text-align: right;
    white-space: nowrap;
}

.crm-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
}

.crm-who > span:last-child {
    display: grid;
    min-width: 0;
}

.crm-who strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.crm .ox-toolbar select {
    min-width: 210px;
}

/* Grupos de la barra lateral: que "GESTIÓN DE PRODUCTOS" entre completo junto a su contador */
.adminlte-area .sidebar-menu .nav-group summary p {
    font-size: .82rem;
    letter-spacing: -.01em;
}

.crm-who small,
.crm-sub {
    display: block;
    color: #64748b;
    font-size: .72rem;
}

.crm-sub {
    margin-top: 3px;
    font-weight: 500;
}

.crm-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0e7490, #14b8a6);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.crm-avatar.is-sm {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .78rem;
}

.crm-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
}

.crm-none {
    color: #cbd5e1;
    font-weight: 700;
}

.crm-wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #15803d;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.crm-wa svg {
    width: 16px;
    height: 16px;
    fill: #22c55e;
    stroke: none;
}

.crm-wa:hover {
    text-decoration: underline;
}

.crm-mail {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    color: #334155;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.crm-due {
    display: block;
    font-size: .86rem;
    white-space: nowrap;
}

.crm-count {
    font-size: 1rem;
    font-weight: 800;
}

/* Renovaciones: una fila por cliente; al abrirla, sus productos */
.crm-list {
    display: grid;
    gap: 14px;
    transition: opacity .15s ease;
}

.crm-list.is-loading {
    opacity: .5;
    pointer-events: none;
}

.crm-renewals th,
.crm-renewals td {
    padding-right: 14px;
    padding-left: 14px;
}

.crm-renewals td {
    white-space: nowrap;
}

.crm-renewals .crm-sub {
    white-space: normal;
}

.crm-renewals td[data-label="Cliente"] {
    width: 28%;
    max-width: 320px;
    white-space: normal;
}

.crm-client-row {
    cursor: pointer;
}

.crm-client-row.is-open > td {
    border-bottom-color: transparent;
    background: #f8fafc;
}

.crm-client-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}

.crm-client-cell > div {
    display: grid;
    min-width: 0;
}

.crm-toggle {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.crm-toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    transition: transform .18s ease;
}

.crm-toggle:hover {
    border-color: #94a3b8;
}

.crm-toggle[aria-expanded="true"] {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

.crm-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.crm-toggle:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.crm-client-name {
    overflow: hidden;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-client-name:hover {
    color: #0e7490;
    text-decoration: underline;
}

.crm-client-contact {
    overflow: hidden;
    color: #64748b;
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Columna Productos: logos apilados y total */
.crm-logos {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: .8rem;
}

.crm-logos b {
    color: #0f172a;
    font-weight: 800;
}

.crm-logo-stack {
    display: flex;
}

.crm-logo-stack > .crm-logo {
    box-shadow: 0 0 0 2px #ffffff;
}

.crm-logo-stack > .crm-logo + .crm-logo {
    margin-left: -7px;
}

.crm-client-row:hover .crm-logo-stack > .crm-logo,
.crm-client-row.is-open .crm-logo-stack > .crm-logo {
    box-shadow: 0 0 0 2px #f8fafc;
}

/* Próxima renovación en una línea y resumen de estados en contadores de color */
.crm-renewals .crm-next {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-renewals > thead th {
    white-space: normal;
    vertical-align: bottom;
}

.crm-renewals td[data-label="Estado"] {
    min-width: 116px;
    white-space: normal;
}

.crm-counts {
    display: inline-flex;
    gap: 4px;
    margin: 3px 0 0 2px;
    vertical-align: middle;
}

.crm-count-chip {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
}

.crm-count-chip.is-amber { background: #fef3c7; color: #92400e; }
.crm-count-chip.is-red { background: #fee2e2; color: #991b1b; }
.crm-count-chip.is-green { background: #dcfce7; color: #166534; }
.crm-count-chip.is-gray { background: #f1f5f9; color: #475569; }

/* Panel con los productos del cliente */
.crm-renewals .crm-detail-row > td {
    padding: 0 14px 14px 52px;
    background: #f8fafc;
    white-space: normal;
}

.crm-detail {
    overflow-x: auto;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px -18px rgba(15, 23, 42, .45);
}

.crm-subtable {
    width: 100%;
    border-collapse: collapse;
}

.crm-table .crm-subtable th {
    padding: 9px 12px;
    border-bottom: 1px solid #eef2f6;
    background: #ffffff;
    color: #94a3b8;
    font-size: .6rem;
}

.crm-table .crm-subtable td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.crm-table .crm-subtable tbody tr:last-child td {
    border-bottom: 0;
}

.crm-subtable td[data-label="Producto adquirido"] {
    width: 34%;
    white-space: normal;
}

.crm-subtable .is-num .crm-sub {
    display: inline;
}

.crm-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.crm-product > span:last-child {
    min-width: 0;
}

.crm-product strong {
    display: block;
    font-size: .88rem;
    font-weight: 700;
}

/* Logo de la plataforma sobre fondo oscuro (los colores de marca están pensados para eso) */
.crm-logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #0f172a;
    color: var(--logo, #5eead4);
    font-size: 1rem;
}

.crm-logo svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.crm-logo.is-text {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Foto real del producto (la misma de la tienda) */
.crm-logo.is-photo {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.crm-logo.is-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crm-logo.is-xs {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: .74rem;
}

.crm-logo.is-xs svg {
    width: 14px;
    height: 14px;
}

.crm-logo.is-xs.is-text {
    font-size: .54rem;
}

.crm-pager a.pv-page {
    text-decoration: none;
}

.crm-expand-all {
    white-space: nowrap;
}

.crm-client-row.is-flash > td {
    animation: crm-flash 2.4s ease;
}

@keyframes crm-flash {
    0%, 45% { background: #ecfeff; }
    100% { background: #f8fafc; }
}

@media (prefers-reduced-motion: reduce) {
    .crm-client-row.is-flash > td {
        animation: none;
    }

    .crm-toggle svg {
        transition: none;
    }
}

/* Acciones de cada renovación: botones de ícono */
.crm-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.crm-row-actions form {
    margin: 0;
}

.crm-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.crm-icon-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.crm-icon-btn:hover {
    border-color: #0e7490;
    background: #ecfeff;
    color: #0e7490;
}

.crm-icon-btn:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.crm-icon-btn.is-wa svg {
    fill: #22c55e;
    stroke: none;
}

.crm-icon-btn.is-wa:hover {
    border-color: #22c55e;
    background: #f0fdf4;
}

.crm-dialog-subject {
    margin: 0;
    color: #334155;
    font-size: .9rem;
    font-weight: 700;
}

/* Ficha del cliente */
.crm-drawer {
    width: min(620px, 100%);
}

.crm-drawer .ox-drawer-bar > span {
    flex: 1;
    color: #64748b;
    font-size: .8rem;
    font-weight: 700;
}

.crm-d {
    display: grid;
    gap: 16px;
    padding: 20px 22px 28px;
}

.crm-d > * {
    min-width: 0;
}

/* Cabecera de la ficha: tarjeta de perfil */
.crm-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f172a 0%, #134e4a 100%);
    color: #ffffff;
    box-shadow: 0 18px 36px -26px rgba(15, 23, 42, .75);
}

.crm-profile-main {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.crm-profile h2 {
    margin: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
}

.crm-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.crm-profile-meta {
    margin: 0;
    color: #cbd5e1;
    font-size: .8rem;
}

.crm-profile-actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 8px;
}

.crm-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.crm-profile-btn:hover {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .16);
}

.crm-profile-btn:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: 2px;
}

.crm-profile-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.crm-profile-btn.is-wa {
    border-color: #22c55e;
    background: #16a34a;
}

.crm-profile-btn.is-wa:hover {
    background: #15803d;
}

.crm-profile-btn.is-wa svg {
    fill: #ffffff;
    stroke: none;
}

.crm-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.5;
    vertical-align: middle;
}

.crm-chip.is-account {
    background: #ccfbf1;
    color: #115e59;
}

.crm-chip.is-guest {
    background: #fef3c7;
    color: #92400e;
}

.crm-chip.is-new {
    background: #dbeafe;
    color: #1e40af;
}

/* Avatar grande y colores (el mismo color siempre para el mismo nombre) */
.crm-avatar.is-lg {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 1.2rem;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14);
}

.crm-avatar.is-tone-0 { background: linear-gradient(135deg, #0e7490, #0d9488); }
.crm-avatar.is-tone-1 { background: linear-gradient(135deg, #4338ca, #6366f1); }
.crm-avatar.is-tone-2 { background: linear-gradient(135deg, #b45309, #d97706); }
.crm-avatar.is-tone-3 { background: linear-gradient(135deg, #be185d, #db2777); }
.crm-avatar.is-tone-4 { background: linear-gradient(135deg, #15803d, #16a34a); }
.crm-avatar.is-tone-5 { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }

/* Lista de clientes */
.crm-summary .is-blue b { color: #1d4ed8; }

.crm-clients th,
.crm-clients td {
    padding-right: 14px;
    padding-left: 14px;
}

.crm-clients td {
    white-space: nowrap;
}

.crm-clients td[data-label="Cliente"] {
    width: 34%;
    max-width: 360px;
    white-space: normal;
}

.crm-person-row {
    cursor: pointer;
    transition: background .12s ease;
}

.crm-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 230px;
}

.crm-person > span:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.crm-person strong {
    overflow: hidden;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-person strong .crm-chip {
    margin-left: 4px;
    font-size: .62rem;
}

.crm-person small {
    overflow: hidden;
    color: #64748b;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-when {
    display: grid;
    gap: 1px;
}

.crm-when b {
    color: #0f172a;
    font-size: .84rem;
    font-weight: 700;
}

.crm-when small {
    color: #64748b;
    font-size: .72rem;
}

/* Actividad del cliente: "En línea" (punto verde) o hace cuanto se fue (punto gris) */
.crm-presence {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 7px;
    row-gap: 1px;
}

.crm-presence i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.crm-presence b {
    color: #0f172a;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}

.crm-presence small {
    grid-column: 2;
    color: #64748b;
    font-size: .72rem;
}

.crm-presence.is-online i {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}

.crm-presence.is-online b {
    color: #15803d;
}

.crm-row-go {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: 9px;
    color: #94a3b8;
    transition: background .12s ease, color .12s ease;
}

.crm-row-go svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.crm-person-row:hover .crm-row-go,
.crm-person-row:focus-visible .crm-row-go {
    background: #0f172a;
    color: #ffffff;
}

/* Aviso: los datos del cliente solo los cambia el propio cliente */
.crm-readonly {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    background: #f0f9ff;
    color: #0c4a6e;
    font-size: .82rem;
    line-height: 1.45;
}

.crm-readonly svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Datos del cliente en campos desactivados (solo lectura) */
.crm-locked {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 14px;
    background: #ffffff;
}

.crm-locked legend {
    display: flex;
    float: left;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}

.crm-locked legend svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #64748b;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.crm-locked-badge {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.crm-grid {
    display: grid;
    clear: both;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.crm-span-2 {
    grid-column: 1 / -1;
}

.crm-field {
    display: grid;
    gap: 5px;
    margin: 0;
    color: #334155;
    font-size: .8rem;
    font-weight: 700;
}

.crm-field input[disabled] {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: not-allowed;
    opacity: 1;
    -webkit-text-fill-color: #334155;
}

.crm-field input[disabled]::placeholder {
    color: #94a3b8;
    font-weight: 500;
    -webkit-text-fill-color: #94a3b8;
}

/* Tarjetas de resumen con ícono (Renovaciones y Clientes) */
.crm-summary .crm-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.crm-stat-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #f1f5f9;
    color: #334155;
}

.crm-stat-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.crm-stat.is-amber .crm-stat-icon { background: #fef3c7; color: #b45309; }
.crm-stat.is-red .crm-stat-icon { background: #fee2e2; color: #b91c1c; }
.crm-stat.is-green .crm-stat-icon { background: #dcfce7; color: #15803d; }
.crm-stat.is-blue .crm-stat-icon { background: #dbeafe; color: #1d4ed8; }

.crm-stat-body {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.crm-summary .crm-stat-body > span {
    color: #334155;
    font-size: .82rem;
    font-weight: 700;
}

.crm-stat-body small {
    overflow: hidden;
    color: #64748b;
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Agenda de la semana */
.crm-agenda {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 16px;
    background: #ffffff;
}

.crm-agenda header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.crm-agenda h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.crm-agenda header span {
    color: #64748b;
    font-size: .8rem;
}

.crm-days {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
}

.crm-day {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 6px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.crm-day:hover {
    border-color: #94a3b8;
    box-shadow: 0 10px 22px -18px rgba(15, 23, 42, .5);
}

.crm-day:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.crm-day-name {
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.crm-day-num {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
}

.crm-day-count {
    color: #b45309;
    font-size: .72rem;
    font-weight: 700;
}

.crm-day small {
    color: #64748b;
    font-size: .68rem;
}

.crm-day.is-empty {
    background: #f8fafc;
}

.crm-day.is-empty .crm-day-count {
    color: #94a3b8;
    font-weight: 600;
}

.crm-day.is-today {
    border-color: #f59e0b;
    background: #fffbeb;
}

.crm-day.is-active {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

.crm-day.is-active .crm-day-name,
.crm-day.is-active .crm-day-count,
.crm-day.is-active small {
    color: #e2e8f0;
}

/* Filtro por día elegido en la agenda */
.crm-filter-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    color: #78350f;
    font-size: .84rem;
}

.crm-filter-chip svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.crm-filter-chip a {
    margin-left: auto;
    color: #92400e;
    font-weight: 800;
    text-decoration: none;
}

.crm-filter-chip a:hover {
    text-decoration: underline;
}

/* Fechas en palabras con el color del estado, avance del plan y montos */
.crm-rel {
    font-weight: 700;
}

.crm-rel.is-red { color: #b91c1c; }
.crm-rel.is-amber { color: #b45309; }
.crm-rel.is-green { color: #15803d; }
.crm-rel.is-gray { color: #64748b; }

.crm-progress {
    display: block;
    width: 120px;
    height: 5px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.crm-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #64748b;
}

.crm-progress.is-red > span { background: #ef4444; }
.crm-progress.is-amber > span { background: #f59e0b; }
.crm-progress.is-green > span { background: #22c55e; }

.crm-amount {
    color: #0f172a;
    font-size: .86rem;
    font-weight: 800;
}

.crm-renewals .crm-person {
    min-width: 210px;
}

/* Celular: cada fila como ficha */
@media (max-width: 720px) {
    .crm-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .crm-table {
        min-width: 0;
    }

    .crm-table thead {
        display: none;
    }

    .crm-table,
    .crm-table tbody,
    .crm-table tr,
    .crm-table td {
        display: block;
        width: auto;
    }

    .crm-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        padding: 12px 14px;
        border-bottom: 1px solid #f1f5f9;
    }

    .crm-table tr[hidden] {
        display: none;
    }

    .crm-table td {
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .crm-table td:first-child {
        grid-column: 1 / -1;
    }

    .crm-table td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: #64748b;
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .crm-table .is-num {
        text-align: left;
    }

    /* Datos que el cliente no tiene: no se muestran en la ficha del celular */
    .crm-table td:has(> .crm-none:only-child) {
        display: none;
    }

    .crm-mail {
        display: block;
        max-width: 100%;
    }

    .crm .ox-toolbar select {
        min-width: 0;
    }

    /* Renovaciones: cada cliente es una ficha; sus productos se abren debajo */
    .crm-renewals td[data-label="Cliente"] {
        width: auto;
        max-width: none;
    }

    .crm-client-cell {
        min-width: 0;
    }

    .crm-client-row.is-open {
        background: #f8fafc;
    }

    .crm-client-row.is-open > td {
        background: transparent;
    }

    .crm-renewals .crm-detail-row {
        padding: 0 12px 12px;
        background: #f8fafc;
    }

    .crm-renewals .crm-detail-row > td {
        padding: 0;
        background: transparent;
    }

    .crm-table .crm-subtable tr {
        padding: 12px;
    }

    .crm-table .crm-subtable td {
        padding: 0;
        border: 0;
    }

    .crm-subtable td[data-label="Producto adquirido"] {
        width: auto;
    }

    .crm-renewals td[data-label="Acciones"] {
        grid-column: 1 / -1;
    }

    .crm-renewals td[data-label="Acciones"]::before {
        display: none !important;
    }

    .crm-row-actions {
        justify-content: flex-start;
    }

    .crm .crm-expand-all {
        display: none;
    }

    /* Ficha cerrada más corta: adquisiciones y fechas de cada producto se ven al abrirla */
    .crm-client-row > td[data-label="Adquisiciones"],
    .crm-client-row > td[data-label="Última adquisición"] {
        display: none;
    }

    .crm-renewals .crm-client-row > td[data-label="Acciones"] {
        grid-column: auto;
        align-self: end;
    }

    .crm-client-row .crm-row-actions {
        justify-content: flex-end;
    }

    .crm-renewals .crm-next {
        max-width: 100%;
    }

    /* Clientes: cada cliente es una ficha corta */
    .crm-clients td[data-label="Cliente"] {
        width: auto;
        max-width: none;
    }

    .crm-person {
        min-width: 0;
    }

    .crm-clients td[data-label="Ver ficha"] {
        display: none;
    }

    .crm-profile-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Renovaciones: agenda deslizable y tarjetas más compactas */
    .crm-days {
        grid-auto-columns: 92px;
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .crm-summary .crm-stat {
        gap: 10px;
        padding: 12px;
    }

    .crm-stat-icon {
        width: 36px;
        height: 36px;
    }

    .crm-stat-body small {
        white-space: normal;
    }

    .crm-renewals .crm-person {
        min-width: 0;
    }

    .crm-progress {
        width: 100%;
    }

    .crm-logos {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ==========================================================================
   Gestión de pedidos (Registro de pedidos): número, cliente, producto, método de pago, comprobante y fecha
   ========================================================================== */
/* Barra lateral: con el grupo nuevo el menú se desplaza en pantallas bajas (1366×768). Mientras se desplaza
   (clase has-scrollbar, la pone admin/includes/footer.php), la barra usa el margen derecho y los nombres no se cortan. */
.adminlte-area .sidebar-wrapper.has-scrollbar {
    padding-right: 0;
}

.rp .ox-toolbar select {
    min-width: 168px;
}

.rp-toolbar {
    flex-wrap: wrap;
}

.rp-export {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    white-space: nowrap;
}

.rp-export svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.rp .ox-search {
    flex: 1 1 300px;
}

.rp-table {
    min-width: 0;
}

.rp-table th,
.rp-table td {
    padding-right: 12px;
    padding-left: 12px;
}

.rp-table td[data-label="N° de pedido"],
.rp-table td[data-label="Fecha"] {
    white-space: nowrap;
}

.rp-table td[data-label="Ver detalle"] {
    width: 1%;
    padding-left: 0;
}

.rp-table .crm-person {
    min-width: 0;
}

.rp-table .crm-person strong,
.rp-product strong {
    white-space: normal;
}

/* Número de pedido y su estado */
.rp-number {
    display: grid;
    justify-items: start;
    gap: 4px;
}

.rp-number b {
    color: #0f172a;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.rp-state {
    --tone: #475569;
    --soft: #f1f5f9;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--tone);
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
}

.rp-state::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.rp-state.is-green { --tone: #15803d; --soft: #dcfce7; }
.rp-state.is-blue { --tone: #1d4ed8; --soft: #dbeafe; }
.rp-state.is-violet { --tone: #6d28d9; --soft: #ede9fe; }
.rp-state.is-amber { --tone: #b45309; --soft: #fef3c7; }
.rp-state.is-red { --tone: #b91c1c; --soft: #fee2e2; }
.rp-state.is-gray { --tone: #64748b; --soft: #f1f5f9; }

/* Producto con su foto */
.rp-product {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rp-product > span:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.rp-product strong {
    overflow: hidden;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-product small {
    color: #64748b;
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}

/* Método de pago */
.rp-method {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rp-method > span:last-child {
    display: grid;
    gap: 1px;
}

.rp-method b {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 700;
}

.rp-method small {
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem;
}

.rp-method-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f1f5f9;
    color: #0e7490;
    font-size: .82rem;
}

/* Comprobante */
.rp-proof-btn {
    --tone: #0e7490;
    --soft: #ecfeff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rp-proof-btn:hover {
    border-color: var(--tone);
    box-shadow: 0 8px 18px -14px rgba(15, 23, 42, .6);
}

.rp-proof-btn:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.rp-proof-btn svg {
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 7px;
    background: var(--soft);
    color: var(--tone);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.rp-proof-btn > span,
.rp-proof-tag {
    display: grid;
    gap: 1px;
    line-height: 1.25;
}

.rp-proof-btn b,
.rp-proof-tag b {
    font-size: .8rem;
    font-weight: 800;
}

.rp-proof-btn small,
.rp-proof-tag small {
    color: var(--tone);
    font-size: .7rem;
    font-weight: 700;
}

.rp-proof-btn.is-green, .rp-proof-tag.is-green { --tone: #15803d; --soft: #dcfce7; }
.rp-proof-btn.is-amber, .rp-proof-tag.is-amber { --tone: #b45309; --soft: #fef3c7; }
.rp-proof-btn.is-red, .rp-proof-tag.is-red { --tone: #b91c1c; --soft: #fee2e2; }
.rp-proof-tag.is-blue { --tone: #1d4ed8; }
.rp-proof-tag.is-gray { --tone: #94a3b8; }

.rp-proof-tag b {
    color: #334155;
}

.rp-proof-tag.is-gray b {
    color: #94a3b8;
}

/* Detalle del pedido (panel lateral) */
.rp-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f172a 0%, #164e63 100%);
    color: #ffffff;
    box-shadow: 0 18px 36px -26px rgba(15, 23, 42, .75);
}

.rp-head-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: rgba(94, 234, 212, .14);
    color: #5eead4;
}

.rp-head-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.rp-head-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.rp-head-main small {
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rp-head-main h2 {
    margin: 0;
    overflow: hidden;
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-head-main p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #cbd5e1;
    font-size: .8rem;
}

.rp-head-actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 8px;
}

.rp-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.rp-facts > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    background: #f8fafc;
}

.rp-facts .rp-span-2 {
    grid-column: 1 / -1;
}

.rp-facts dt {
    margin-bottom: 5px;
    color: #64748b;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.rp-facts dd {
    display: grid;
    gap: 3px;
    margin: 0;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rp-facts dd small {
    color: #64748b;
    font-size: .76rem;
    font-weight: 500;
}

.rp-facts dd .rp-state {
    justify-self: start;
}

.rp-facts dd.rp-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rp-with-icon > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.rp-with-icon a {
    color: #0e7490;
    text-decoration: none;
}

.rp-with-icon a:hover {
    text-decoration: underline;
}

.rp-proof {
    display: grid;
    gap: 10px;
}

.rp-proof h3 {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}

.rp-proof-img {
    display: block;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f1f5f9;
}

.rp-proof-img img {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: contain;
}

.rp-proof-pdf,
.rp-proof-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #0f172a;
    text-decoration: none;
}

.rp-proof-pdf:hover {
    border-color: #0e7490;
}

.rp-proof-pdf svg,
.rp-proof-empty svg {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #475569;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.rp-proof-pdf > span,
.rp-proof-empty > span {
    display: grid;
    gap: 2px;
}

.rp-proof-pdf small,
.rp-proof-empty small {
    color: #64748b;
    font-size: .78rem;
}

.rp-proof-empty.is-green svg { background: #dcfce7; color: #15803d; }
.rp-proof-empty.is-blue svg { background: #dbeafe; color: #1d4ed8; }

.rp-proof-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.rp-attempts {
    display: grid;
    margin: 0;
    padding: 0;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    list-style: none;
}

.rp-attempts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
}

.rp-attempts li + li {
    border-top: 1px solid #f1f5f9;
}

.rp-attempts li > span:nth-child(2) {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.rp-attempts b {
    color: #0f172a;
    font-size: .82rem;
}

.rp-attempts small {
    color: #64748b;
    font-size: .74rem;
    overflow-wrap: anywhere;
}

.rp-attempts .rp-reason {
    color: #b91c1c;
}

.rp-attempts a {
    color: #0e7490;
    font-size: .8rem;
    font-weight: 800;
}

.rp-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: .8rem;
}

.rp-note svg {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Pantallas medianas: sin avatar para que entren las 6 columnas */
@media (max-width: 1440px) {
    .rp-table .crm-avatar {
        display: none;
    }
}

/* Tablet: cada pedido como ficha de 3 columnas (así se ven comprobante y fecha sin deslizar) */
@media (max-width: 1320px) {
    .rp-table thead {
        display: none;
    }

    .rp-table,
    .rp-table tbody,
    .rp-table tr,
    .rp-table td {
        display: block;
        width: auto;
    }

    .rp-table tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 18px;
        padding: 14px 16px;
        border-bottom: 1px solid #f1f5f9;
    }

    .rp-table tbody tr:last-child {
        border-bottom: 0;
    }

    .rp-table td {
        min-width: 0;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .rp-table td:first-child {
        grid-column: 1 / -1;
    }

    .rp-table td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #64748b;
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .rp-table td[data-label="Ver detalle"] {
        display: none;
    }

    .rp-table .crm-avatar {
        display: grid;
    }

    .rp-number {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 1100px) {
    .rp-export {
        margin-left: 0;
    }
}

/* Celular: cliente, producto y comprobante a lo ancho; método y fecha lado a lado */
@media (max-width: 720px) {
    .rp .ox-toolbar select {
        flex: 1 1 140px;
        min-width: 0;
    }

    .rp .ox-toolbar select[name="metodo"],
    .rp-export {
        flex: 1 1 100%;
        justify-content: center;
    }

    .rp-table tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
        padding: 12px 14px;
    }

    .rp-table td[data-label="Cliente"],
    .rp-table td[data-label="Producto"],
    .rp-table td[data-label="Comprobante"] {
        grid-column: 1 / -1;
    }

    .rp-table td[data-label="Método de pago"] { order: 3; }
    .rp-table td[data-label="Fecha"] { order: 4; }
    .rp-table td[data-label="Comprobante"] { order: 5; }

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

/* Editar y eliminar: botones de cada fila */
.rp-table td[data-label="Acciones"] {
    width: 1%;
    padding-left: 4px;
    white-space: nowrap;
}

.rp-row-actions {
    display: inline-flex;
    gap: 6px;
}

.rp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #ffffff;
    color: #475569;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.rp-icon-btn svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.rp-icon-btn:hover {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

.rp-icon-btn.is-danger {
    color: #b91c1c;
}

.rp-icon-btn.is-danger:hover {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

.rp-icon-btn:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

/* En la tabla solo se ve el ícono (el texto queda para lectores de pantalla) */
.rp-btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Botones del detalle */
.crm-profile-btn.is-edit {
    border-color: transparent;
    background: #2dd4bf;
    color: #042f2e;
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
}

.crm-profile-btn.is-edit:hover {
    background: #5eead4;
    color: #042f2e;
}

.crm-profile-btn.is-danger {
    border-color: rgba(248, 113, 113, .55);
    background: rgba(220, 38, 38, .16);
    color: #fecaca;
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
}

.crm-profile-btn.is-danger:hover {
    border-color: #f87171;
    background: #dc2626;
    color: #ffffff;
}

/* Aviso después de guardar o eliminar */
.rp-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    background: #ecfdf5;
    color: #065f46;
    font-size: .88rem;
    font-weight: 700;
}

.rp-flash::before {
    content: '✓';
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    font-size: .8rem;
}

.rp-flash.is-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.rp-flash.is-error::before {
    content: '!';
    background: #dc2626;
}

.rp-flash[hidden] {
    display: none;
}

/* Historial y aviso de por qué no se elimina */
.rp-history {
    display: grid;
    gap: 8px;
}

.rp-history h3 {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}

.rp-history ol {
    display: grid;
    margin: 0;
    padding: 0;
    border-left: 2px solid #e2e8f0;
    list-style: none;
}

.rp-history li {
    position: relative;
    display: grid;
    gap: 1px;
    padding: 6px 0 6px 16px;
    color: #334155;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.rp-history li::before {
    content: '';
    position: absolute;
    top: 12px;
    left: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
}

.rp-history li:first-child::before {
    background: #0d9488;
}

.rp-history small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
}

.rp-delete-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #64748b;
    font-size: .78rem;
}

.rp-delete-note svg,
.rp-hint svg,
.rp-fieldset legend svg {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Formulario para editar */
.rp-head.is-edit {
    background: linear-gradient(135deg, #0f172a 0%, #115e59 100%);
}

.rp-edit .rp-head-main p {
    color: #cbd5e1;
}

.rp-form-error {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #991b1b;
    font-size: .84rem;
    font-weight: 700;
}

.rp-form-error:focus {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

.rp-form-error[hidden] {
    display: none;
}

.rp-fieldset {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.rp-fieldset legend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 6px;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 800;
}

.rp-fieldset.is-locked {
    background: #f8fafc;
}

.rp-fieldset.is-locked legend {
    color: #475569;
}

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

.rp-grid.is-product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.rp-grid .rp-span-2 {
    grid-column: 1 / -1;
}

.rp-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    margin: 0;
    color: #334155;
    font-size: .8rem;
    font-weight: 700;
}

.rp-field small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 500;
}

.rp-field input,
.rp-field select {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
}

.rp-field input[type="file"] {
    height: auto;
    padding: 8px;
    font-size: .8rem;
}

.rp-field input:focus,
.rp-field select:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.rp-field input:disabled,
.rp-field select:disabled {
    border-color: #e2e8f0;
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
    opacity: 1;
    -webkit-text-fill-color: #64748b;
}

.rp-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.45;
}

.rp-hint.is-info {
    color: #0e7490;
}

.rp-hint.is-warn {
    color: #b91c1c;
    font-weight: 700;
}

.rp-hint:empty {
    display: none;
}

.rp-proof-now {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
}

.rp-proof-now svg {
    flex: none;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 9px;
    background: #e0f2fe;
    color: #0e7490;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.rp-proof-now > span {
    display: grid;
    gap: 1px;
}

.rp-proof-now b {
    color: #0f172a;
    font-size: .84rem;
}

.rp-proof-now small {
    color: #64748b;
    font-size: .74rem;
}

.rp-form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 -22px -28px;
    padding: 14px 22px;
    border-top: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
}

/* Ventana para confirmar que se elimina */
.rp-confirm-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.rp-confirm-body p {
    margin: 0;
    color: #334155;
    font-size: .9rem;
    line-height: 1.55;
}

.rp-confirm-body strong {
    color: #b91c1c;
}

.rp-confirm-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fee2e2;
    color: #dc2626;
}

.rp-confirm-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Tablet y celular (fichas): botones con texto al final de cada pedido */
@media (max-width: 1320px) {
    .rp-table td[data-label="Acciones"] {
        grid-column: 1 / -1;
        width: auto;
        padding: 2px 0 0;
    }

    .rp-table td[data-label="Acciones"]::before {
        display: none !important;
    }

    .rp-row-actions {
        display: flex;
        justify-content: flex-end;
    }

    .rp-icon-btn {
        width: auto;
        padding: 0 12px;
    }

    .rp-btn-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
}

@media (max-width: 720px) {
    .rp-table td[data-label="Acciones"] {
        order: 6;
    }

    .rp-row-actions {
        justify-content: stretch;
    }

    .rp-icon-btn {
        flex: 1;
        height: 38px;
    }

    .rp-grid,
    .rp-grid.is-product {
        grid-template-columns: minmax(0, 1fr);
    }

    .rp-form-actions {
        padding: 12px 22px;
    }

    .rp-form-actions .ox-btn {
        flex: 1;
        justify-content: center;
    }

    .rp-confirm-body {
        flex-direction: column;
    }
}

/* ==========================================================================
   Control financiero (Ingresos y Gastos): balance, categorías, movimientos y mes a mes
   ========================================================================== */
.fn {
    --fn-gain: #047857;
    --fn-loss: #b91c1c;
}

.fn svg {
    flex: none;
}

/* Encabezado: periodo y "Registrar" */
.fn-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 20px;
}

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

.fn-period {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.fn-period svg {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: #0e7490;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    pointer-events: none;
}

.fn-period select {
    height: 42px;
    padding: 0 36px 0 38px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background-color: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
}

.fn-period select:focus-visible {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .2);
}

.fn-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    margin-left: 0;
}

.fn-add svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2.4;
}

/* Balance: ¿realmente ganas? */
.fn-balance {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fn-verdict {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    padding: 20px 22px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .2), transparent 45%),
        linear-gradient(135deg, #047857, #0d9488);
    color: #ffffff;
    box-shadow: 0 18px 34px -22px rgba(4, 120, 87, .85);
}

.fn-verdict.is-loss {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .18), transparent 45%),
        linear-gradient(135deg, #991b1b, #dc2626);
    box-shadow: 0 18px 34px -22px rgba(153, 27, 27, .85);
}

.fn-verdict small {
    color: rgba(255, 255, 255, .85);
    font-size: .8rem;
    font-weight: 700;
}

.fn-verdict strong {
    color: #ffffff;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.fn-verdict-text {
    color: rgba(255, 255, 255, .92);
    font-size: .86rem;
    font-weight: 600;
}

.fn-verdict .fn-trend.is-up,
.fn-verdict .fn-trend.is-down,
.fn-verdict .fn-trend.is-flat {
    background: rgba(255, 255, 255, .2);
    color: #ffffff;
}

.fn-tile {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid #e8edf3;
    border-radius: 18px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow .15s ease, border-color .15s ease;
}

a.fn-tile:hover {
    border-color: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 16px 30px -24px rgba(15, 23, 42, .5);
}

a.fn-tile:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.fn-tile.is-current {
    border-color: #0f172a;
    box-shadow: 0 0 0 1px #0f172a;
}

.fn-tile-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
}

.fn-tile-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.fn-tile.is-income .fn-tile-icon { background: #dcfce7; color: #15803d; }
.fn-tile.is-expense .fn-tile-icon { background: #fee2e2; color: #b91c1c; }
.fn-tile.is-margin .fn-tile-icon { background: #dbeafe; color: #1d4ed8; }

.fn-tile small {
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
}

.fn-tile b {
    overflow: hidden;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fn-tile-note {
    color: #64748b;
    font-size: .76rem;
}

.fn-trend {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fn-trend small {
    font-weight: 600;
    opacity: .8;
}

.fn-trend.is-up { background: #dcfce7; color: #15803d; }
.fn-trend.is-down { background: #fee2e2; color: #b91c1c; }
.fn-trend.is-flat { background: #f1f5f9; color: #64748b; font-weight: 700; }

/* Por categoría */
.fn-section {
    display: grid;
    gap: 12px;
}

.fn-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.fn-section-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
}

.fn-section-head span {
    color: #64748b;
    font-size: .82rem;
}

.fn-cats {
    display: grid;
    gap: 12px;
}

.fn-cats.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fn-cats.is-six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.fn-cat {
    --tone: #475569;
    --soft: #f1f5f9;
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fn-cat:hover {
    border-color: var(--tone);
    color: #0f172a;
    box-shadow: 0 14px 28px -22px rgba(15, 23, 42, .55);
    transform: translateY(-1px);
}

.fn-cat:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.fn-cat.is-active {
    border-color: var(--tone);
    box-shadow: 0 0 0 1px var(--tone);
}

.fn-cat.is-teal, .fn-chip.is-teal { --tone: #0f766e; --soft: #ccfbf1; }
.fn-cat.is-blue, .fn-chip.is-blue { --tone: #1d4ed8; --soft: #dbeafe; }
.fn-cat.is-violet, .fn-chip.is-violet { --tone: #6d28d9; --soft: #ede9fe; }
.fn-cat.is-amber, .fn-chip.is-amber { --tone: #b45309; --soft: #fef3c7; }
.fn-cat.is-pink, .fn-chip.is-pink { --tone: #be185d; --soft: #fce7f3; }
.fn-cat.is-gray, .fn-chip.is-gray { --tone: #475569; --soft: #f1f5f9; }

.fn-cat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.fn-cat-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--soft);
    color: var(--tone);
}

.fn-cat-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.fn-cat-share {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--tone);
    font-size: .72rem;
    font-weight: 800;
}

.fn-cat small {
    overflow: hidden;
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fn-cat b {
    overflow: hidden;
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fn-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f5f9;
}

.fn-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tone);
}

.fn-cat-note {
    overflow: hidden;
    color: #64748b;
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Movimientos */
.fn-board-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 14px;
}

.fn-board-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
}

.fn-board-head p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: .82rem;
}

.fn-toolbar {
    flex: 0 1 380px;
    margin: 0;
}

.fn-toolbar .ox-search {
    flex: 1;
}

.fn-list {
    min-width: 760px;
}

.fn-list td[data-label="Fecha"],
.fn-list td[data-label="Monto"] {
    white-space: nowrap;
}

.fn-list td[data-label="Acciones"] {
    width: 1%;
    white-space: nowrap;
}

.fn-chip {
    --tone: #475569;
    --soft: #f1f5f9;
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--tone);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.fn-concept {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.fn-concept strong {
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
}

.fn-concept small {
    color: #64748b;
    font-size: .74rem;
}

.fn-concept small:empty {
    display: none;
}

.fn-amount {
    font-size: .9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fn-amount.is-income { color: var(--fn-gain); }
.fn-amount.is-expense { color: var(--fn-loss); }

.fn-usd {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 600;
}

.fn-empty strong {
    color: #0f172a;
}

/* Mes a mes */
.fn-table {
    min-width: 620px;
}

.fn-table td {
    white-space: nowrap;
}

.fn-table tr.is-current td {
    background: #f0fdfa;
}

.fn-table .is-num {
    text-align: right;
}

.fn-now {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #ccfbf1;
    color: #0f766e;
    font-size: .66rem;
    font-weight: 800;
}

.fn-mini {
    display: block;
    width: 110px;
    height: 4px;
    margin: 5px 0 0 auto;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f5f9;
}

.fn-mini span {
    display: block;
    height: 100%;
    margin-left: auto;
    border-radius: inherit;
}

.fn-mini.is-income span { background: #10b981; }
.fn-mini.is-expense span { background: #f87171; }

.fn-gain {
    font-size: .92rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fn-gain.is-gain { color: var(--fn-gain); }
.fn-gain.is-loss { color: var(--fn-loss); }

.fn-margin {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
}

.fn-margin.is-gain { background: #dcfce7; color: #15803d; }
.fn-margin.is-loss { background: #fee2e2; color: #b91c1c; }

.fn-note {
    margin: 12px 0 0;
    color: #64748b;
    font-size: .78rem;
}

/* Ventana para registrar o editar */
.fn-dialog {
    width: min(560px, calc(100vw - 32px));
}

.fn-dialog .rp-grid [hidden] {
    display: none;
}

.fn-equals {
    margin: -4px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: .84rem;
    font-weight: 700;
}

.fn-equals[hidden] {
    display: none;
}

@media (max-width: 1320px) {
    .fn-balance {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fn-verdict {
        grid-column: 1 / -1;
    }

    .fn-cats.is-six {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .fn-top-actions {
        width: 100%;
    }

    .fn-period {
        flex: 1;
    }

    .fn-period select {
        width: 100%;
    }

    .fn-balance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .fn-tile.is-margin {
        grid-column: 1 / -1;
    }

    .fn-tile {
        padding: 14px;
    }

    .fn-tile b {
        font-size: 1.1rem;
    }

    .fn-trend small {
        display: none;
    }

    .fn-cats.is-three,
    .fn-cats.is-six {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .fn-cats.is-three .fn-cat:last-child {
        grid-column: 1 / -1;
    }

    .fn-cat {
        padding: 12px;
    }

    .fn-cat b {
        font-size: 1.05rem;
    }

    .fn-toolbar {
        flex: 1 1 100%;
    }

    .fn-list,
    .fn-table {
        min-width: 0;
    }

    .fn-list td[data-label="Concepto"],
    .fn-list td[data-label="Acciones"] {
        grid-column: 1 / -1;
    }

    .fn-list td[data-label="Acciones"] {
        order: 6;
        width: auto;
    }

    .fn-list td[data-label="Acciones"]::before {
        display: none !important;
    }

    .fn-list .rp-row-actions {
        display: flex;
    }

    .fn-list .rp-icon-btn {
        flex: 1;
        width: auto;
        height: 38px;
        padding: 0 12px;
    }

    .fn-list .rp-btn-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .fn-table td,
    .fn-list td {
        text-align: left;
        white-space: normal;
    }

    .fn-mini {
        margin-left: 0;
    }

    .fn-mini span {
        margin-left: 0;
    }
}

/* ==========================================================================
   Inventario digital (Cuentas, Perfiles y Paneles)
   ========================================================================== */
.iv svg {
    flex: none;
}

.iv .crm-summary .is-violet b { color: #6d28d9; }
.crm-stat.is-violet .crm-stat-icon { background: #ede9fe; color: #6d28d9; }

/* Tarjetas del resumen que no son enlaces (Paneles) */
.crm-summary div.crm-stat {
    padding: 14px 16px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
}

.iv-dialog {
    width: min(600px, calc(100vw - 32px));
}

.iv-dialog [hidden] {
    display: none !important;
}

/* Buscador + producto */
.iv-toolbar {
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.iv-toolbar .ox-search {
    flex: 1 1 280px;
}

.iv-toolbar select {
    min-width: 200px;
}

/* Tabla */
.iv-table {
    min-width: 0;
}

.iv-table th,
.iv-table td {
    padding-right: 12px;
    padding-left: 12px;
}

.iv-table td[data-label="Vence"],
.iv-table td[data-label="Estado"],
.iv-table td[data-label="Acciones"] {
    white-space: nowrap;
}

.iv-table td[data-label="Acciones"] {
    width: 1%;
}

.rp-icon-btn.is-primary {
    border-color: #99f6e4;
    background: #f0fdfa;
    color: #0f766e;
}

.rp-icon-btn.is-primary:hover {
    border-color: #0f766e;
    background: #0f766e;
    color: #ffffff;
}

/* Datos que se copian o se muestran (correo, contraseña, PIN) */
.iv-access {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.iv-copyable,
.iv-secret {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.iv-copyable > span {
    overflow: hidden;
    color: #0f172a;
    font-size: .84rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-secret code {
    overflow: hidden;
    padding: 1px 7px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-secret.is-shown code {
    background: #fef9c3;
    color: #0f172a;
    letter-spacing: 0;
}

.iv-mini {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.iv-mini svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.iv-mini:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.iv-mini:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 1px;
}

.iv-mini[aria-pressed="true"],
.iv-mini.is-done,
.rp-icon-btn.is-done {
    background: #dcfce7;
    color: #15803d;
}

/* Perfiles de cada cuenta */
.iv-usage {
    display: grid;
    gap: 5px;
    min-width: 110px;
    color: #334155;
    font-size: .8rem;
    text-decoration: none;
}

.iv-usage b {
    color: #0f766e;
    font-size: .95rem;
    font-weight: 800;
}

.iv-usage:hover {
    color: #0e7490;
}

.iv-usage:hover > span:first-child {
    text-decoration: underline;
}

.iv-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #ccfbf1;
}

.iv-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2563eb;
}

.iv-due {
    font-weight: 700;
}

.iv-due.is-red { color: #b91c1c; }
.iv-due.is-amber { color: #b45309; }
.iv-due.is-green { color: #15803d; }
.iv-due.is-gray { color: #94a3b8; }

.iv-profile {
    display: grid;
    gap: 3px;
}

.iv-profile strong {
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
}

.iv-profile small {
    color: #94a3b8;
    font-size: .74rem;
}

.iv-pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
}

.iv-wa {
    color: #15803d;
    font-weight: 700;
}

/* Libres por producto */
.iv-available {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 14px 18px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #ffffff;
}

.iv-available h2 {
    margin: 0;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 800;
}

.iv-available ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.iv-available a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px 5px 12px;
    border: 1px solid #ccfbf1;
    border-radius: 999px;
    background: #f0fdfa;
    color: #115e59;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

.iv-available a b {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #0f766e;
    color: #ffffff;
    font-size: .74rem;
    text-align: center;
}

.iv-available a:hover {
    border-color: #0f766e;
}

.iv-available-empty {
    margin: 0;
    color: #64748b;
    font-size: .84rem;
}

.iv-filter-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: .84rem;
}

/* Casillas y opciones de las ventanas */
.iv-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-size: .84rem;
    cursor: pointer;
}

.iv-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #0f766e;
}

.iv-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.iv-mode label {
    position: relative;
    cursor: pointer;
}

.iv-mode input {
    position: absolute;
    opacity: 0;
}

.iv-mode span {
    display: block;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #334155;
    font-size: .86rem;
    font-weight: 700;
    text-align: center;
}

.iv-mode input:checked + span {
    border-color: #0f766e;
    background: #f0fdfa;
    color: #0f766e;
    box-shadow: 0 0 0 1px #0f766e;
}

.iv-mode input:focus-visible + span {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

/* Paneles: una tarjeta por panel */
.iv-panels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
}

.iv-panel {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid #e8edf3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.iv-panel.is-off {
    background: #f8fafc;
}

.iv-panel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.iv-panel-head h2 {
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-panel-head p {
    margin: 2px 0 0;
    overflow: hidden;
    color: #64748b;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-panel-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #0f172a;
    color: #5eead4;
}

.iv-panel-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.iv-credits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdfa, #ecfeff);
}

.iv-credits > div:first-child {
    display: grid;
}

.iv-credits b {
    color: #0f766e;
    font-size: 1.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.iv-credits span {
    white-space: nowrap;
    color: #115e59;
    font-size: .78rem;
    font-weight: 700;
}

.iv-credit-actions {
    display: flex;
    gap: 6px;
}

.iv-credit-actions .rp-icon-btn {
    width: auto;
    height: 34px;
    padding: 0 12px;
    background: #ffffff;
}

.iv-credit-actions .rp-btn-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

.iv-panel-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0;
}

.iv-panel-facts > div {
    min-width: 0;
}

.iv-panel-facts dt {
    margin-bottom: 2px;
    color: #64748b;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.iv-panel-facts dd {
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: .84rem;
    font-weight: 600;
    text-overflow: ellipsis;
}

.iv-panel-facts dd a {
    display: block;
    overflow: hidden;
    color: #0e7490;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-panel-facts dd a:hover {
    text-decoration: underline;
}

.iv-panel-note {
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: .8rem;
}

.iv-history summary {
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.iv-history ol {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0 0 0 12px;
    border-left: 2px solid #e2e8f0;
    list-style: none;
}

.iv-history li {
    display: grid;
    color: #334155;
    font-size: .78rem;
}

.iv-history li small {
    color: #94a3b8;
    font-size: .7rem;
}

.iv-panel-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.iv-panel-foot .ox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.iv-panel-foot svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Pantallas medianas y tablet: cada fila como ficha (así entran todos los datos sin deslizar) */
@media (max-width: 1420px) {
    .iv-table thead {
        display: none;
    }

    .iv-table,
    .iv-table tbody,
    .iv-table tr,
    .iv-table td {
        display: block;
        width: auto;
    }

    .iv-table tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 16px;
        padding: 14px 16px;
        border-bottom: 1px solid #f1f5f9;
    }

    .iv-table td {
        min-width: 0;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .iv-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 3px;
        color: #64748b;
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .iv-table td[data-label="Acciones"] {
        grid-column: 1 / -1;
        width: auto;
    }

    .iv-table td[data-label="Acciones"]::before {
        display: none !important;
    }

    .iv-table .rp-row-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .iv-table .rp-icon-btn {
        width: auto;
        padding: 0 12px;
    }

    .iv-table .rp-btn-text {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
}

@media (max-width: 720px) {
    .iv-toolbar select {
        flex: 1 1 100%;
        min-width: 0;
    }

    .iv-toolbar .ox-btn {
        flex: 1 1 100%;
    }

    .iv-table tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px 14px;
    }

    .iv-table td:first-child {
        grid-column: 1 / -1;
    }

    .iv-table .rp-row-actions {
        justify-content: stretch;
    }

    .iv-table .rp-icon-btn {
        flex: 1 1 auto;
        height: 38px;
    }

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

    .iv-panel-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .iv-credits {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Renovaciones automáticas (Clientes que vencen y Recordatorios automáticos)
   ========================================================================== */
.ra svg {
    flex: none;
}

/* Barra lateral: el contador de cada grupo va como burbuja sobre su ícono; así los nombres largos
   ("RENOVACIONES AUTOMÁTICAS", "GESTIÓN DE CLIENTES (CRM)") usan todo el ancho y no se cortan. */
.adminlte-area .sidebar-menu .nav-group summary {
    position: relative;
}

.adminlte-area .sidebar-menu .nav-group summary .nav-group-badge {
    position: absolute;
    top: -2px;
    left: 20px;
    z-index: 1;
    min-width: 20px;
    height: 19px;
    margin: 0;
    padding: 0 5px;
    border: 2px solid #0b1424;
    font-size: .64rem;
    line-height: 1;
}

/* Clientes que vencen: Hoy, Esta semana, Este mes, Vencidos */
.ra-due {
    display: grid;
    gap: 12px;
}

.ra-due-title {
    margin: 0;
    color: #0f172a;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ra-due-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ra-due-card {
    --tone: #475569;
    --soft: #f1f5f9;
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #e8edf3;
    border-top: 4px solid var(--tone);
    border-radius: 18px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow .15s ease, transform .15s ease;
}

.ra-due-card:hover {
    color: #0f172a;
    box-shadow: 0 16px 30px -24px rgba(15, 23, 42, .55);
    transform: translateY(-1px);
}

.ra-due-card:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.ra-due-card.is-active {
    background: linear-gradient(180deg, var(--soft), #ffffff 70%);
    box-shadow: 0 0 0 1px var(--tone);
}

.ra-due-card.is-red { --tone: #dc2626; --soft: #fef2f2; }
.ra-due-card.is-amber { --tone: #d97706; --soft: #fffbeb; }
.ra-due-card.is-blue { --tone: #2563eb; --soft: #eff6ff; }
.ra-due-card.is-gray { --tone: #64748b; --soft: #f8fafc; }

.ra-due-top {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: .88rem;
    font-weight: 800;
}

.ra-due-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--soft);
    color: var(--tone);
}

.ra-due-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ra-due-card b {
    margin-top: 6px;
    color: var(--tone);
    font-size: 2.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    line-height: 1;
}

.ra-due-card small {
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
}

.ra-due-foot {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    color: #64748b;
    font-size: .76rem;
}

/* Estado de los recordatorios automáticos */
.ra-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    background: #ecfdf5;
    color: #065f46;
    font-size: .86rem;
}

.ra-status.is-off {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.ra-status > span:nth-child(2) {
    flex: 1 1 320px;
}

.ra-status-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #ffffff;
}

.ra-status-icon svg,
.ra-hero-icon svg,
.fn-add svg,
.ra-run svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Tabla */
.ra-client {
    color: inherit;
    text-decoration: none;
}

.ra-client:hover {
    color: #0e7490;
    text-decoration: underline;
}

.ra-table .crm-when small.rp-state {
    justify-self: start;
    margin-top: 3px;
}

.ra-none {
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 700;
}

.ra-actions {
    flex-wrap: nowrap;
}

.rp-icon-btn.is-wa {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
    text-decoration: none;
}

.rp-icon-btn.is-wa:hover {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
}

.rp-icon-btn.is-disabled,
.rp-icon-btn:disabled {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #cbd5e1;
    cursor: not-allowed;
}

.rp-icon-btn:disabled:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #cbd5e1;
}

.rp-icon-btn.is-busy {
    opacity: .6;
    cursor: progress;
}

/* Ventanas */
.ra-renew-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: #f0fdfa;
    color: #115e59;
    font-size: .86rem;
}

.ra-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rp-confirm-icon.is-info {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Recordatorios automáticos */
.ra-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    padding: 20px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #047857, #0d9488);
    color: #ffffff;
    box-shadow: 0 18px 34px -22px rgba(4, 120, 87, .85);
}

.ra-hero.is-off {
    background: linear-gradient(135deg, #334155, #0f172a);
    box-shadow: 0 18px 34px -22px rgba(15, 23, 42, .85);
}

.ra-hero > div {
    flex: 1 1 360px;
    min-width: 0;
}

.ra-hero h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
}

.ra-hero p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: .88rem;
}

.ra-hero .ra-hero-note {
    color: rgba(255, 255, 255, .72);
    font-size: .8rem;
}

.ra-hero-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
}

.ra-hero-icon svg {
    width: 24px;
    height: 24px;
}

.ra-run {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-color: transparent;
    background: #ffffff;
    color: #065f46;
    font-weight: 800;
}

.ra-run:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.ra-config {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.ra-config > *,
.ra-side > * {
    min-width: 0;
}

.ra-settings {
    display: grid;
    gap: 16px;
}

.ra-settings .fn-board-head {
    margin-bottom: 0;
}

.ra-switch {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
}

.ra-switch input {
    position: absolute;
    opacity: 0;
}

.ra-switch-ui {
    position: relative;
    flex: none;
    width: 44px;
    height: 24px;
    margin-top: 1px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .15s ease;
}

.ra-switch-ui::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
    transition: transform .15s ease;
}

.ra-switch input:checked + .ra-switch-ui {
    background: #10b981;
}

.ra-switch input:checked + .ra-switch-ui::after {
    transform: translateX(20px);
}

.ra-switch input:focus-visible + .ra-switch-ui {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.ra-switch > span:last-child {
    display: grid;
    gap: 2px;
    color: #0f172a;
    font-size: .9rem;
}

.ra-switch small {
    color: #64748b;
    font-size: .78rem;
}

.ra-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.ra-stages legend {
    width: 100%;
    margin-bottom: 8px;
    color: #334155;
    font-size: .8rem;
    font-weight: 700;
}

.ra-stages label {
    position: relative;
    cursor: pointer;
}

.ra-stages input {
    position: absolute;
    opacity: 0;
}

.ra-stages span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    font-size: .82rem;
    font-weight: 700;
}

.ra-stages input:checked + span {
    border-color: #0f766e;
    background: #f0fdfa;
    color: #0f766e;
    box-shadow: 0 0 0 1px #0f766e;
}

.ra-stages input:focus-visible + span {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.ra .rp-field textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #0f172a;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.5;
    resize: vertical;
}

.ra .rp-field textarea:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.ra-vars {
    margin: -6px 0 0;
    color: #64748b;
    font-size: .78rem;
}

.ra-vars code {
    padding: 1px 6px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: .76rem;
}

.ra-settings-foot {
    display: flex;
    justify-content: flex-end;
}

.ra-side {
    display: grid;
    gap: 18px;
}

.ra-side h2 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.ra-mail {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.ra-mail small {
    color: #0e7490;
    font-size: .74rem;
    font-weight: 800;
}

.ra-mail strong {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
}

.ra-mail p {
    margin: 0;
    color: #344054;
    font-size: .88rem;
    line-height: 1.6;
    white-space: pre-line;
}

.ra-mail-btn {
    justify-self: start;
    padding: 9px 16px;
    border-radius: 10px;
    background: #0b1220;
    color: #ffffff;
    font-size: .84rem;
    font-weight: 800;
}

.ra-cron p {
    margin: 0 0 12px;
    color: #475569;
    font-size: .84rem;
    line-height: 1.55;
}

.ra-code {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #0f172a;
}

.ra-code code {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    color: #a7f3d0;
    font-size: .74rem;
    white-space: nowrap;
}

.ra-code .iv-mini {
    color: #cbd5e1;
}

.ra-code .iv-mini:hover {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.ra-token {
    margin: 12px 0 0;
}

.ra-detail {
    display: grid;
    gap: 1px;
    color: #334155;
    font-size: .8rem;
}

.ra-detail small {
    color: #94a3b8;
    font-size: .72rem;
}

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

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

@media (max-width: 720px) {
    .ra-due-grid {
        gap: 10px;
    }

    .ra-due-card {
        padding: 14px;
    }

    .ra-due-card b {
        font-size: 2rem;
    }

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

    .ra-actions {
        flex-wrap: wrap;
    }
}

/* Renovaciones hechas por el cliente (renovar.php): Pedidos, Registro de pedidos */
.oxd-line .ox-renewal {
    margin: 8px 0 0;
    padding: 9px 12px;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    background: #f5f3ff;
    color: #5b21b6;
    font-size: .8rem;
    line-height: 1.5;
}

.oxd-line .ox-renewal b {
    color: #4c1d95;
}

.oxd-line.is-renewal .oxd-line-actions {
    margin-top: 8px;
}

.rp-product small .rp-renewal {
    color: #6d28d9;
    font-weight: 700;
}

.ra-table .crm-when a.ra-renewing {
    justify-self: start;
    margin-top: 4px;
    text-decoration: none;
}

.ra-table .crm-when a.ra-renewing:hover {
    text-decoration: underline;
}

/* Pagos de renovación (admin/pagos_renovacion.php) */
.rq-summary .crm-stat.is-active {
    border-color: #0f172a;
    box-shadow: inset 0 0 0 1px #0f172a;
}

.rq-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rq-rules li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
    font-size: .82rem;
    line-height: 1.5;
}

.rq-rules b {
    color: #0f172a;
}

.rq-rules li > span:first-child {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #ede9fe;
    color: #6d28d9;
}

.rq-rules svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rq-table tr.is-review,
.rq-table tr.is-review > td {
    background: #faf7ff;
}

.rq-amount {
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
}

.rq-amount small {
    color: #64748b;
    font-weight: 600;
}

/* En la vista de tabla (las fichas empiezan en 1420 px) el N° y las fechas no se parten */
@media (min-width: 1421px) {
    .rq-table .crm-mono,
    .rq-table .crm-when b {
        white-space: nowrap;
    }
}

.rq-table .crm-when small.is-ok {
    color: #15803d;
    font-weight: 700;
}

.rq-pay {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.rq-pay .rp-state {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
}

.rq-pay small {
    color: #64748b;
    font-size: .72rem;
    line-height: 1.35;
}

.rq-pay small.is-late {
    color: #b91c1c;
    font-weight: 700;
}

.rq-dialog {
    width: min(760px, calc(100vw - 32px));
}

.rq-review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.rq-proof {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.rq-proof img {
    display: block;
    width: 100%;
    max-height: 340px;
    border-radius: 10px;
    background: #1e293b;
    object-fit: contain;
}

.rq-proof:hover span {
    text-decoration: underline;
}

.rq-noproof {
    margin: 0;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
    font-size: .82rem;
    line-height: 1.5;
}

.rq-facts {
    display: grid;
    gap: 8px;
    margin: 0;
}

.rq-facts > div {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.rq-facts dt {
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
}

.rq-facts dd {
    margin: 0;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.rq-facts code {
    font-size: .82rem;
}

.rq-facts .is-amount {
    border-color: #c4b5fd;
    background: #f5f3ff;
}

.rq-facts .is-amount dd {
    color: #5b21b6;
    font-size: 1.15rem;
}

.rq-checks {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.rq-checks legend {
    margin-bottom: 6px;
    color: #0f172a;
    font-size: .82rem;
    font-weight: 800;
}

.rq-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 1100px) {
    .rq-rules {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .rq-review {
        grid-template-columns: minmax(0, 1fr);
    }

    .rq-proof img {
        max-height: 240px;
    }
}

/* ==========================================================================
   Barra lateral del administrador (admin/includes/header.php): marca, secciones desplegables,
   cuenta fija al pie y panel deslizable en celular y tablet (menos de 992 px). Manda sobre los
   estilos anteriores de la barra (.app-sidebar da más especificidad).
   ========================================================================== */
body.adminlte-area {
    --lte-sidebar-width: 292px;
    --sb-line: rgba(148, 163, 184, .14);
    --sb-text: #cbd5e1;
    --sb-sub: #a3b0c2;
    --sb-muted: #8391a7;
    --sb-hover: rgba(148, 163, 184, .1);
    --sb-active: rgba(94, 234, 212, .12);
    --sb-accent: #5eead4;
}

.adminlte-area .app-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: linear-gradient(180deg, #0b1322 0%, #0d1628 55%, #0a1120 100%) !important;
    border-right: 1px solid var(--sb-line);
    box-shadow: 10px 0 30px -18px rgba(2, 6, 23, .55) !important;
    font-family: "Manrope", system-ui, sans-serif;
}

/* La lista se desplaza entre la marca y la cuenta (fijas) */
.adminlte-area.sidebar-expand-lg .app-sidebar .sidebar-wrapper,
.adminlte-area.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 8px 0 14px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(148, 163, 184, .28) transparent;
    scrollbar-width: thin;
}

.adminlte-area .app-sidebar .sidebar-wrapper::-webkit-scrollbar {
    width: 6px;
}

.adminlte-area .app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(148, 163, 184, .28);
}

/* Marca */
.adminlte-area .app-sidebar .sidebar-brand {
    flex: none;
    justify-content: space-between;
    gap: 8px;
    height: 62px;
    min-height: 62px;
    padding: 0 12px 0 18px;
    border-bottom: 1px solid var(--sb-line);
}

.adminlte-area .app-sidebar .brand-link {
    flex: 1 1 auto;
    gap: 11px;
    width: auto;
    min-width: 0;
    border-radius: 12px;
}

.adminlte-area .app-sidebar .brand-link:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 4px;
}

.adminlte-area .app-sidebar .admin-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: .8rem;
    box-shadow: 0 8px 20px -8px rgba(45, 212, 191, .7);
}

.adminlte-area .app-sidebar .brand-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    margin: 0;
    line-height: 1.15;
}

.adminlte-area .app-sidebar .brand-text b {
    color: #f8fafc;
    font-family: "Poppins", "Manrope", sans-serif;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.adminlte-area .app-sidebar .brand-text small {
    color: var(--sb-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.adminlte-area .sb-close {
    display: none;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--sb-line);
    border-radius: 10px;
    background: transparent;
    color: var(--sb-text);
    cursor: pointer;
}

.adminlte-area .sb-close:hover {
    background: var(--sb-hover);
    color: #ffffff;
}

.adminlte-area .sb-close svg,
.adminlte-area .sb-logout svg,
.adminlte-area .app-sidebar .nav-external svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Títulos de sección */
.adminlte-area .app-sidebar .sidebar-menu .nav-header {
    display: block;
    align-self: stretch;
    width: auto;
    margin: 16px 0 6px;
    padding: 0 22px;
    color: var(--sb-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-header:first-child {
    margin-top: 6px;
}

/* Enlaces y grupos */
.adminlte-area .app-sidebar .sidebar-menu .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: auto;
    min-height: 40px;
    margin: 1px 8px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--sb-text);
    font-weight: 600;
    text-align: left;
    transition: background-color .15s ease, color .15s ease;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-link p,
.adminlte-area .app-sidebar .sidebar-menu .nav-group summary p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: .855rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-group summary {
    padding-top: 0;
    padding-bottom: 0;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-link:hover {
    background: var(--sb-hover);
    color: #ffffff;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-link:focus-visible,
.adminlte-area .app-sidebar .sidebar-menu .nav-group summary:focus-visible,
.adminlte-area .app-sidebar .admin-user-panel:focus-visible,
.adminlte-area .app-sidebar .sb-logout:focus-visible,
.adminlte-area .sb-close:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: -2px;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-link .nav-icon {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    max-width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 9px;
    background: rgba(148, 163, 184, .1);
    color: #a5b4c8;
    transition: background-color .15s ease, color .15s ease;
}

.adminlte-area .app-sidebar .nav-icon svg {
    width: 17px;
    height: 17px;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-link:hover .nav-icon {
    background: rgba(148, 163, 184, .16);
    color: #e2e8f0;
}

/* Página actual (Inicio, Configuración) y grupo que la contiene: barra de acento a la izquierda */
.adminlte-area .app-sidebar .sidebar-menu > .nav-item > .nav-link.active {
    background: var(--sb-active);
    color: #ffffff;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-group summary.is-parent-active {
    color: #ffffff;
}

.adminlte-area .app-sidebar .sidebar-menu > .nav-item > .nav-link.active::before,
.adminlte-area .app-sidebar .sidebar-menu .nav-group summary.is-parent-active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sb-accent);
}

.adminlte-area .app-sidebar .sidebar-menu > .nav-item > .nav-link.active .nav-icon,
.adminlte-area .app-sidebar .sidebar-menu .nav-group summary.is-parent-active .nav-icon {
    background: rgba(94, 234, 212, .16);
    color: var(--sb-accent);
}

/* La lista lleva la clase "nav" y los estilos de la tienda para ".nav a" usan !important
   (gris, fondo claro al estar activo): en la barra lateral se anulan aquí. */
.adminlte-area .app-sidebar .sidebar-menu a.nav-link {
    justify-content: flex-start;
    min-height: 40px !important;
    padding: 0 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--sb-text) !important;
    transform: none !important;
}

.adminlte-area .app-sidebar .sidebar-menu a.nav-link:hover {
    background: var(--sb-hover) !important;
    color: #ffffff !important;
}

.adminlte-area .app-sidebar .sidebar-menu > .nav-item > a.nav-link.active {
    background: var(--sb-active) !important;
    color: #ffffff !important;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-sub a.nav-link {
    min-height: 34px !important;
    color: var(--sb-sub) !important;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-sub a.nav-link:hover {
    background: var(--sb-hover) !important;
    color: #ffffff !important;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-sub a.nav-link.active {
    background: rgba(148, 163, 184, .13) !important;
    color: #ffffff !important;
}

/* Flecha del grupo */
.adminlte-area .app-sidebar .sidebar-menu .nav-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #64748b;
    transition: transform .18s ease, color .15s ease;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-group summary:hover .nav-chevron,
.adminlte-area .app-sidebar .sidebar-menu .nav-group details[open] > summary .nav-chevron {
    color: #cbd5e1;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-group details[open] > summary .nav-chevron {
    transform: rotate(90deg);
}

/* Contadores: píldora a la derecha; en un grupo cerrado, burbuja sobre su ícono */
.adminlte-area .app-sidebar .sidebar-menu .admin-nav-badge {
    display: inline-grid;
    flex: none;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: 999px;
    background: #fbbf24;
    color: #1c1300;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.adminlte-area .app-sidebar .sidebar-menu .admin-nav-badge.is-muted {
    background: rgba(148, 163, 184, .22);
    color: #e2e8f0;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-group summary .nav-group-badge {
    position: absolute;
    top: 1px;
    left: 30px;
    z-index: 1;
    min-width: 19px;
    height: 19px;
    margin: 0;
    padding: 0 5px;
    border: 2px solid #0c1424;
    font-size: .62rem;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-group details[open] > summary .nav-group-badge {
    display: none;
}

/* Subsecciones: línea guía bajo el ícono del grupo y acento en la página actual */
.adminlte-area .app-sidebar .sidebar-menu .nav-sub {
    position: relative;
    margin: 2px 8px 8px 33px;
    padding: 0;
    border-left: 1px solid rgba(148, 163, 184, .18);
    list-style: none;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-sub .nav-link {
    min-height: 34px;
    margin: 1px 0 1px 10px;
    padding: 0 10px;
    gap: 10px;
    border-radius: 8px;
    color: var(--sb-sub);
}

.adminlte-area .app-sidebar .sidebar-menu .nav-sub .nav-link p {
    font-size: .82rem;
    font-weight: 600;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-sub .nav-link:hover {
    background: var(--sb-hover);
    color: #ffffff;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-sub .nav-link.active {
    background: rgba(148, 163, 184, .13);
    color: #ffffff;
}

.adminlte-area .app-sidebar .sidebar-menu .nav-sub .nav-link.active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -11px;
    width: 2px;
    border-radius: 2px;
    background: var(--sb-accent);
}

.adminlte-area .app-sidebar .sidebar-menu .nav-sub-dot {
    display: none;
}

.adminlte-area .app-sidebar .nav-external {
    display: grid;
    flex: none;
    place-items: center;
    margin-left: auto;
    color: #64748b;
}

.adminlte-area .app-sidebar .nav-external svg {
    width: 14px;
    height: 14px;
}

/* Cuenta del administrador, fija al pie */
.adminlte-area .app-sidebar .sb-footer {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 12px;
    border-top: 1px solid var(--sb-line);
    background: rgba(2, 6, 23, .28);
}

.adminlte-area .app-sidebar .sb-footer .admin-user-panel {
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
}

.adminlte-area .app-sidebar .sb-footer .admin-user-panel:hover,
.adminlte-area .app-sidebar .sb-footer .admin-user-panel.is-active {
    border-color: var(--sb-line);
    background: var(--sb-hover);
}

.adminlte-area .app-sidebar .sb-footer .admin-user-panel > span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: .76rem;
}

.adminlte-area .app-sidebar .sb-footer .admin-user-panel strong {
    font-size: .84rem;
    font-weight: 700;
}

.adminlte-area .app-sidebar .sb-footer .admin-user-panel small {
    color: var(--sb-muted);
    font-size: .72rem;
    font-weight: 600;
}

.adminlte-area .app-sidebar .sb-logout {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #94a3b8;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.adminlte-area .app-sidebar .sb-logout:hover {
    background: rgba(248, 113, 113, .14);
    color: #fca5a5;
}

.adminlte-area .sb-backdrop {
    display: none;
}

/* Celular y tablet: la barra es un panel que se desliza sobre la página */
@media (max-width: 991.98px) {
    body.adminlte-area {
        --lte-sidebar-width: min(300px, 86vw);
    }

    .adminlte-area .app-sidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1045;
        height: 100%;
        max-height: none;
        margin-left: 0 !important;
        visibility: hidden;
        transform: translateX(-104%);
        transition: transform .24s ease, visibility .24s ease;
    }

    .adminlte-area.sidebar-open .app-sidebar {
        visibility: visible;
        transform: none;
        box-shadow: 24px 0 60px rgba(2, 6, 23, .5) !important;
    }

    .adminlte-area .sb-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1044;
        background: rgba(2, 6, 23, .55);
        opacity: 0;
        pointer-events: none;
        transition: opacity .24s ease;
    }

    .adminlte-area.sidebar-open .sb-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .adminlte-area .sb-close {
        display: grid;
    }

    body.adminlte-area.sb-lock {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adminlte-area .app-sidebar,
    .adminlte-area .sb-backdrop,
    .adminlte-area .app-sidebar .sidebar-menu .nav-chevron {
        transition: none;
    }
}

/* ==========================================================================
   Marketing y promociones (Cupones, Descuentos, Ofertas y Combos)
   ========================================================================== */
.mk svg {
    flex: none;
}

/* Tabla: código del cupón, valores y vigencia */
.mk-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mk-code code {
    padding: 4px 9px;
    border: 1px dashed #0f766e;
    border-radius: 8px;
    background: #f0fdfa;
    color: #0f766e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.mk-sub {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: .74rem;
}

.mk-value {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}

.mk-scope-text,
.mk-period {
    color: #334155;
    font-size: .82rem;
    font-weight: 600;
}

.mk .crm-when b.is-warn {
    color: #b45309;
}

.mk .crm-when small.is-late {
    color: #b91c1c;
    font-weight: 700;
}

/* Ofertas: productos con su precio de oferta */
.mk-items {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-items li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    color: #334155;
    font-size: .8rem;
}

.mk-items li span {
    min-width: 0;
    font-weight: 600;
}

.mk-items li b {
    color: #047857;
    font-weight: 800;
}

.mk-items li del {
    color: #94a3b8;
    font-size: .74rem;
}

.mk-items li.is-more {
    color: #64748b;
    font-size: .74rem;
}

/* Combos: logos de sus productos y lo que incluye */
.mk-combo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mk-combo-logos {
    display: flex;
    flex: none;
}

.mk-combo-logos .crm-logo {
    width: 32px;
    height: 32px;
    border: 2px solid #ffffff;
    border-radius: 9px;
    font-size: .85rem;
}

.mk-combo-logos .crm-logo + .crm-logo {
    margin-left: -10px;
}

.mk-combo-logos .crm-logo img {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
}

.mk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mk-chip {
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Ventanas de crear / editar */
.mk-dialog {
    width: min(680px, calc(100vw - 32px));
}

.mk-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mk-checks {
    display: grid;
    grid-column: 1 / -1;
    gap: 8px;
}

.mk-scope {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mk-scope legend {
    margin-bottom: 8px;
    padding: 0;
    color: #334155;
    font-size: .8rem;
    font-weight: 700;
}

.mk-scope-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Buscador y lista de productos para elegir */
.mk-picker {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.mk-picker-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
}

.mk-picker-search {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
}

.mk-picker-search:focus-within {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.mk-picker-search svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #94a3b8;
    stroke-linecap: round;
    stroke-width: 2;
}

.mk-picker-search input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #0f172a;
    font-size: .84rem;
}

.mk-picker-count {
    flex: none;
    color: #0f766e;
    font-size: .76rem;
    font-weight: 800;
}

.mk-picker-hint {
    margin: 0;
    padding: 8px 12px 0;
    color: #64748b;
    font-size: .76rem;
}

.mk-picker-list {
    display: grid;
    gap: 2px;
    max-height: 260px;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mk-pick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s ease;
}

.mk-pick[hidden] {
    display: none;
}

.mk-pick:hover {
    background: #f8fafc;
}

.mk-pick.is-on {
    background: #f0fdfa;
}

.mk-pick input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #0f766e;
}

.mk-pick-name {
    display: grid;
    min-width: 0;
}

.mk-pick-name b {
    overflow: hidden;
    color: #0f172a;
    font-size: .84rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-pick-name small {
    overflow: hidden;
    color: #64748b;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-pick-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: .76rem;
    font-weight: 700;
}

.mk-pick-price input {
    width: 84px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: .84rem;
    font-weight: 700;
    text-align: right;
}

.mk-pick-price input:disabled {
    border-color: #e2e8f0;
    background: #f1f5f9;
    color: #94a3b8;
}

.mk-pick-price input:focus {
    border-color: #0f766e;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

/* Vista previa de precios (descuentos) y del ahorro (combos) */
.mk-preview {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.mk-preview:empty {
    display: none;
}

.mk-preview strong {
    margin-bottom: 4px;
    color: #0f172a;
    font-size: .8rem;
    font-weight: 800;
}

.mk-preview p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    color: #334155;
    font-size: .82rem;
}

.mk-preview p b {
    color: #0f172a;
    font-weight: 800;
    text-align: right;
}

.mk-preview p del {
    margin-right: 6px;
    color: #94a3b8;
    font-weight: 600;
}

.mk-preview p.is-ok b {
    color: #047857;
}

.mk-preview p.is-bad,
.mk-preview p.is-bad b {
    color: #b91c1c;
}

.mk-preview .mk-preview-empty {
    color: #64748b;
    font-size: .78rem;
}

/* Productos: aviso de promoción vigente en la ficha del producto */
.pr-promo-note {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    background: #ecfdf5;
    color: #065f46;
    font-size: .8rem;
    line-height: 1.45;
}

.pr-promo-note a {
    color: #047857;
    font-weight: 800;
}

@media (max-width: 640px) {
    .mk-scope-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .mk-pick {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .mk-pick-price {
        grid-column: 2;
    }
}

/* ==========================================================================
   Soporte al cliente (Tickets): lista, conversación, notas internas y datos del cliente. Prefijo sp-.
   ========================================================================== */
.sp svg {
    flex: none;
}

/* Lista */
.sp-table tr.is-waiting td {
    background: #f0f9ff;
}

.sp-subject {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.sp-subject span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sp-subject strong {
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.sp-subject:hover strong {
    color: #0e7490;
    text-decoration: underline;
}

.sp-subject small {
    color: #64748b;
    font-size: .74rem;
}

.sp-dot {
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .18);
}

.sp-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.sp-cat.is-acceso { background: #eff6ff; color: #1d4ed8; }
.sp-cat.is-correo { background: #f5f3ff; color: #6d28d9; }
.sp-cat.is-renovacion { background: #ecfdf5; color: #047857; }
.sp-cat.is-reclamo { background: #fef2f2; color: #b91c1c; }
/* Libro de reclamaciones (admin/reclamos.php) */
.sp-cat.is-queja { background: #fffbeb; color: #b45309; }

.lb-warn {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    color: #92400e;
    font-size: .86rem;
}

.lb-warn a {
    color: #92400e;
    font-weight: 700;
}

.lb-number {
    font-variant-numeric: tabular-nums;
}

.lb-table .rp-state {
    justify-self: start;
}

.lb-state {
    display: grid;
    gap: 4px;
    justify-items: end;
    color: #64748b;
    font-size: .76rem;
}

.lb-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.lb-sheet {
    padding: 16px;
    overflow-x: auto;
}

.lb-side {
    display: grid;
    gap: 16px;
}

.lb-reply {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.lb-reply h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.lb-reply p {
    margin: 0;
    color: #475569;
    font-size: .84rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.lb-reply textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
    font-size: .88rem;
    line-height: 1.55;
    resize: vertical;
}

.lb-reply textarea:focus {
    border-color: #0e7490;
    outline: 2px solid rgba(14, 116, 144, .18);
}

.lb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lb-actions form {
    margin: 0;
}

.lb-bad {
    color: #b91c1c;
}

@media (max-width: 1100px) {
    .lb-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .lb-state {
        justify-items: start;
    }
}

/* Detalle */
.sp-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: #0e7490;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}

.sp-back svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.sp-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.sp-conv {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.sp-conv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
}

.sp-conv-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.sp-conv-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .8rem;
}

.sp-thread {
    display: grid;
    gap: 10px;
    max-height: 560px;
    margin: 0;
    padding: 4px 2px;
    overflow-y: auto;
    list-style: none;
}

.sp-msg {
    display: flex;
}

.sp-msg.is-store {
    justify-content: flex-end;
}

.sp-bubble {
    max-width: min(80%, 620px);
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px 16px 16px 4px;
    background: #f8fafc;
}

.sp-msg.is-store .sp-bubble {
    border-color: #a5f3fc;
    border-radius: 16px 16px 4px 16px;
    background: #ecfeff;
}

.sp-msg.is-internal .sp-bubble {
    border: 1px dashed #f59e0b;
    background: #fffbeb;
}

.sp-meta {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: .74rem;
}

.sp-meta b {
    color: #0f172a;
}

.sp-meta em {
    color: #b45309;
    font-style: normal;
    font-weight: 700;
}

.sp-bubble p {
    margin: 0;
    color: #1e293b;
    font-size: .88rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.sp-msg.is-system {
    justify-content: center;
}

.sp-msg.is-system span {
    padding: 4px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .74rem;
    text-align: center;
}

.sp-msg.is-system.is-internal span {
    background: #fffbeb;
    color: #92400e;
}

.sp-closed {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
    font-size: .84rem;
}

.sp-closed svg,
.sp-states svg,
.sp-links svg,
.sp-reply-foot svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Responder */
.sp-reply {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    transition: border-color .15s ease, background-color .15s ease;
}

.sp-reply.is-internal {
    border-color: #fbbf24;
    background: #fffdf5;
}

.sp-reply-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sp-reply-top label {
    color: #0f172a;
    font-size: .86rem;
    font-weight: 800;
}

.sp-reply select,
.sp-reply textarea {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .86rem;
}

.sp-reply select {
    min-height: 36px;
    padding: 0 10px;
}

.sp-reply textarea {
    width: 100%;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.sp-reply textarea:focus,
.sp-reply select:focus {
    border-color: #0f766e;
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

.sp-reply-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sp-internal {
    flex: 1 1 220px;
    padding: 8px 10px;
}

.sp-after {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
}

.sp-reply-foot .ox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Columna derecha */
.sp-side {
    display: grid;
    gap: 12px;
}

.sp-box {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.sp-box h3 {
    margin: 0;
    color: #0f172a;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sp-states {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-states form {
    margin: 0;
}

.sp-states .ox-btn,
.sp-links .ox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sp-cat-form {
    margin: 0;
}

.sp-facts {
    display: grid;
    gap: 8px;
    margin: 0;
}

.sp-facts div {
    display: grid;
    gap: 2px;
}

.sp-facts dt {
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
}

.sp-facts dd {
    margin: 0;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sp-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Ventana "Nuevo ticket" */
.sp-dialog {
    width: min(640px, calc(100vw - 32px));
}

.sp-dialog-hint {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f0f9ff;
    color: #075985;
    font-size: .8rem;
    line-height: 1.45;
}

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

.sp-dialog textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font: inherit;
    font-size: .88rem;
    resize: vertical;
}

@media (max-width: 1100px) {
    .sp-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-side {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    }
}

@media (max-width: 640px) {
    .sp-conv {
        padding: 14px;
    }

    .sp-bubble {
        max-width: 90%;
    }

    .sp-reply-foot .ox-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Usuarios y permisos (Trabajadores, Roles y permisos, Sin permiso) y Soporte → Usuarios. Prefijos eq- y uw-.
   ========================================================================== */
.eq svg,
.uw svg {
    flex: none;
}

.eq-foot svg,
.eq-role-people svg,
.eq-role-lock svg,
.eq-pass-row svg,
.eq-forbidden-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Tablas: trabajadores y cuentas de clientes */
.eq-table tr.is-off td,
.uw-table tr.is-off td {
    background: #f8fafc;
}

.eq-table tr.is-off .crm-person,
.uw-table tr.is-off .crm-person {
    opacity: .7;
}

.eq-you {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
    vertical-align: 1px;
}

.eq-sees {
    display: block;
    max-width: 280px;
    color: #475569;
    font-size: .78rem;
    line-height: 1.45;
}

.uw-activity {
    color: #475569;
    font-size: .8rem;
    white-space: nowrap;
}

.uw-activity b {
    color: #0f172a;
}

.uw-activity b.is-ticket {
    color: #b45309;
}

.uw-phone {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.uw-wa {
    color: #16a34a;
}

.uw-wa:hover {
    background: #dcfce7;
    color: #15803d;
}

.eq-foot {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid #eef2f7;
    color: #64748b;
    font-size: .8rem;
    line-height: 1.5;
}

.eq-foot svg {
    margin-top: 2px;
    color: #0f766e;
}

.eq-foot a {
    color: #0e7490;
    font-weight: 700;
}

.eq > .eq-foot {
    border-top: 0;
    padding: 4px 2px;
}

/* Ventanas: nuevo trabajador, editar y contraseña */
.eq-dialog {
    width: min(680px, calc(100vw - 32px));
}

.eq-roles {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.eq-roles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.eq-roles legend {
    margin-bottom: 6px;
    padding: 0;
    color: #334155;
    font-size: .8rem;
    font-weight: 700;
}

.eq-roles label {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

.eq-roles input {
    position: absolute;
    opacity: 0;
}

.eq-roles span {
    display: grid;
    gap: 3px;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color .15s ease, background-color .15s ease;
}

.eq-roles b {
    color: #0f172a;
    font-size: .88rem;
}

.eq-roles small {
    color: #475569;
    font-size: .76rem;
    line-height: 1.4;
}

.eq-roles em {
    color: #64748b;
    font-size: .7rem;
    font-style: normal;
    line-height: 1.4;
}

.eq-roles label:hover span {
    border-color: #94a3b8;
}

.eq-roles input:checked + span {
    border-color: #0f766e;
    background: #f0fdfa;
    box-shadow: 0 0 0 1px #0f766e;
}

.eq-roles input:checked + span b {
    color: #0f766e;
}

.eq-roles input:focus-visible + span {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.eq-pass-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eq-pass-row input {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .02em;
}

.eq-pass-row .ox-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 42px;
}

.eq-pass-row .iv-mini {
    width: 42px;
    height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.eq-pass-row .iv-mini.is-done {
    border-color: #0f766e;
    background: #f0fdfa;
    color: #0f766e;
}

.eq-user {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

/* Roles y permisos: tabla con las secciones en filas y los roles en columnas */
.eq-perms {
    display: grid;
    padding: 0;
    overflow: hidden;
}

.eq-matrix-wrap {
    overflow-x: auto;
}

.eq-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.eq-matrix th,
.eq-matrix td {
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.eq-matrix thead th {
    background: #f8fafc;
    text-align: center;
    vertical-align: top;
}

.eq-matrix thead th.eq-matrix-section {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    vertical-align: bottom;
}

.eq-matrix-role {
    width: 16%;
    min-width: 130px;
}

.eq-matrix-role .rp-state {
    font-size: .8rem;
    font-weight: 800;
}

.eq-about {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.35;
}

.eq-people {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: #334155;
    font-size: .72rem;
    font-weight: 700;
}

.eq-people svg,
.eq-lock svg,
.eq-perms-foot p svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.eq-matrix tbody th {
    font-weight: 400;
    text-align: left;
}

.eq-matrix-section b {
    display: block;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 800;
}

.eq-matrix-section small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: .74rem;
    line-height: 1.4;
}

.eq-matrix tbody tr:hover th,
.eq-matrix tbody tr:hover td {
    background: #f8fafc;
}

.eq-matrix-cell {
    text-align: center;
}

.eq-matrix tbody .eq-matrix-cell.is-administrador {
    background: #fcfaff;
}

.eq-tick {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.eq-tick:hover {
    background: #f0fdfa;
}

.eq-tick input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #0f766e;
    cursor: pointer;
}

.eq-matrix-cell.is-changed .eq-tick {
    background: #fef9c3;
    box-shadow: inset 0 0 0 1px #facc15;
}

.eq-always {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ede9fe;
    color: #6d28d9;
}

.eq-always svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.6;
}

.eq-never {
    color: #cbd5e1;
    font-weight: 800;
}

.eq-matrix tfoot th,
.eq-matrix tfoot td {
    border-bottom: 0;
    background: #f8fafc;
}

.eq-matrix tfoot small {
    color: #64748b;
    font-size: .74rem;
}

.eq-suggest {
    padding: 5px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #0e7490;
    font: inherit;
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
}

.eq-suggest:hover {
    border-color: #0e7490;
    background: #ecfeff;
}

.eq-suggested {
    color: #94a3b8;
    font-size: .74rem;
    font-weight: 700;
}

.eq-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6d28d9;
    font-size: .74rem;
    font-weight: 700;
}

.eq-short {
    display: none;
}

.eq-perms-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border-top: 1px solid #eef2f7;
}

.eq-perms-foot p {
    display: flex;
    flex: 1 1 320px;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #64748b;
    font-size: .8rem;
    line-height: 1.5;
}

.eq-perms-foot p svg {
    margin-top: 3px;
    color: #0f766e;
}

.eq-role-dirty {
    color: #b45309;
    font-size: .8rem;
    font-weight: 800;
}

/* Sin permiso */
.eq-forbidden {
    display: grid;
    place-items: center;
    min-height: 60vh;
}

.eq-forbidden-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(520px, 100%);
    padding: 32px 24px;
    text-align: center;
}

.eq-forbidden-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: #fef3c7;
    color: #b45309;
}

.eq-forbidden-icon svg {
    width: 28px;
    height: 28px;
}

.eq-forbidden-card h1 {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
}

.eq-forbidden-card p {
    margin: 0;
    color: #475569;
    font-size: .9rem;
    line-height: 1.55;
}

.eq-forbidden-help {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
}

.eq-forbidden-card .ox-btn {
    margin-top: 6px;
}

@media (max-width: 640px) {
    .eq-roles-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .eq-pass-row {
        flex-wrap: wrap;
    }

    .eq-pass-row input {
        flex-basis: 100%;
    }

    .eq-pass-row .ox-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .eq-sees {
        max-width: none;
    }

    .eq-matrix th,
    .eq-matrix td {
        padding: 8px 2px;
    }

    .eq-matrix tbody th,
    .eq-matrix thead th.eq-matrix-section,
    .eq-matrix tfoot th {
        padding-left: 10px;
        overflow-wrap: anywhere;
    }

    .eq-matrix thead th.eq-matrix-section {
        font-size: .64rem;
        letter-spacing: .03em;
    }

    .eq-matrix-role {
        width: 50px;
        min-width: 0;
    }

    .eq-matrix-role .rp-state {
        padding: 2px 5px;
        font-size: .62rem;
    }

    .eq-matrix-role .rp-state::before,
    .eq-about,
    .eq-matrix-section small,
    .eq-full {
        display: none;
    }

    .eq-short {
        display: inline;
    }

    .eq-matrix-section b {
        font-size: .8rem;
    }

    .eq-tick {
        width: 34px;
        height: 34px;
    }

    .eq-suggest {
        padding: 3px 5px;
        font-size: .6rem;
    }

    .eq-suggested {
        display: none;
    }

    .eq-perms-foot .ox-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Reportes (Ventas por fecha, Ganancias, Productos vendidos, Clientes frecuentes, Renovaciones, Gastos). Prefijo rep-.
   ========================================================================== */
.rep svg {
    flex: none;
}

/* Botones de descarga */
.rep-export {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rep-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 800;
    text-decoration: none;
}

.rep-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.rep-btn.is-excel {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
}

.rep-btn.is-excel:hover {
    border-color: #15803d;
    background: #15803d;
    color: #ffffff;
}

.rep-btn.is-pdf {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}

.rep-btn.is-pdf:hover {
    border-color: #b91c1c;
    background: #b91c1c;
    color: #ffffff;
}

/* Cambiar de reporte */
.rep-nav {
    display: flex;
    gap: 6px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    scrollbar-width: thin;
}

.rep-nav a {
    flex: none;
    padding: 8px 14px;
    border-radius: 10px;
    color: #475569;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.rep-nav a:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.rep-nav a.is-active {
    background: #0f172a;
    color: #ffffff;
}

/* Filtros */
.rep-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 14px 16px;
}

.rep-filters .rp-field {
    flex: 0 1 190px;
}

.rep-filters .rp-field[hidden] {
    display: none;
}

.rep-filters .ox-btn {
    min-height: 42px;
}

.rep-period {
    flex: 1 1 220px;
    margin: 0;
    color: #64748b;
    font-size: .8rem;
    text-align: right;
}

/* Gráficos */
.rep-chart-card {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

.rep-chart-card h2,
.rep-board-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}

.rep-bars {
    display: grid;
    grid-template-columns: repeat(var(--rep-bars, 12), minmax(0, 1fr));
    align-items: end;
    gap: 4px;
    height: 190px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.rep-bar {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.rep-bar-fill {
    width: 100%;
    min-height: 2px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #22d3ee, #0e7490);
    transition: filter .15s ease;
}

.rep-bar.is-negative .rep-bar-fill {
    background: linear-gradient(180deg, #fca5a5, #dc2626);
}

.rep-bar:hover .rep-bar-fill {
    filter: brightness(1.12);
}

.rep-bar small {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    color: #64748b;
    font-size: .64rem;
    white-space: nowrap;
    transform: translateX(-50%);
}

.rep-bar small.is-hidden {
    display: none;
}

.rep-rank {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rep-rank li {
    display: grid;
    grid-template-columns: 24px minmax(0, 220px) minmax(60px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.rep-rank-n {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}

.rep-rank-name {
    overflow: hidden;
    color: #0f172a;
    font-size: .84rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rep-rank-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f5f9;
}

.rep-rank-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0e7490, #22d3ee);
}

.rep-rank-value {
    display: grid;
    justify-items: end;
    min-width: 92px;
}

.rep-rank-value b {
    color: #0f172a;
    font-size: .84rem;
}

.rep-rank-value small {
    color: #64748b;
    font-size: .7rem;
}

/* Resumen: las notas pueden ocupar dos líneas; un nombre (no una cifra) va con letra más chica */
.rep .crm-stat-body b {
    overflow-wrap: anywhere;
}

.rep .crm-stat-body b.is-text {
    font-size: 1.05rem;
    line-height: 1.3;
}

.rep .crm-stat-body small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* Tablas */
.rep-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 10px;
}

.rep-board-head span {
    color: #64748b;
    font-size: .76rem;
    font-weight: 700;
}

.rep-board .crm-table-wrap {
    margin: 0 16px 16px;
}

.rep-board .db-empty {
    margin: 0 16px 16px;
}

.rep-table td.is-first {
    font-weight: 700;
}

.rep-table td.is-text {
    overflow-wrap: break-word;
}

.rep-under {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

@media (min-width: 721px) {
    .rep-table td.is-first:has(.rep-under) {
        min-width: 210px;
    }
}

.rep-table .is-negative {
    color: #b91c1c;
    font-weight: 700;
}

.rep-table th.is-num {
    text-align: right;
}

.rep-table tfoot td {
    border-top: 2px solid #0f172a;
    border-bottom: 0;
    background: #f1f5f9;
    font-weight: 800;
}

.rep-more {
    margin: -6px 16px 16px;
    color: #64748b;
    font-size: .8rem;
}

.rep-notes {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0 0 0 18px;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .rep .crm-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .rep-export {
        width: 100%;
    }

    .rep-btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .rep-filters .rp-field {
        flex: 1 1 140px;
    }

    .rep-filters .ox-btn {
        flex: 1 1 100%;
    }

    .rep-period {
        text-align: left;
    }

    .rep-bars {
        height: 150px;
        gap: 2px;
    }

    .rep-rank li {
        grid-template-columns: 22px minmax(0, 1fr) auto;
    }

    .rep-rank-bar {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .rep-board .crm-table-wrap,
    .rep-board .db-empty {
        margin: 0 10px 10px;
    }

    .rep-table tfoot {
        display: block;
    }

    .rep-table tfoot tr {
        background: #f1f5f9;
    }

    .rep-table tfoot td {
        border-top: 0;
        background: transparent;
    }

    .rep-table tfoot td:empty {
        display: none;
    }
}

/* ==========================================================================
   Seguridad (Registro de actividad, Historial de cambios, Backup automático). Prefijo sg-.
   ========================================================================== */
.sg svg {
    flex: none;
}

.sg-foot svg,
.sg-secret svg,
.sg-entity svg,
.sg .sp-back svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.sg > .sg-foot {
    padding: 4px 2px;
    border-top: 0;
}

.sg-muted {
    color: #64748b;
    font-size: .76rem;
}

.sg-block {
    display: block;
    color: #64748b;
    font-size: .72rem;
}

/* Resumen: un valor en palabras ("Activada", "Fuera de la web") va con letra más chica; las notas pueden ocupar dos líneas */
.sg .crm-stat-body b {
    overflow-wrap: anywhere;
}

.sg .crm-stat-body b.is-text {
    font-size: 1.05rem;
    line-height: 1.3;
}

.sg .crm-stat-body small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* Filtros */
.sg-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
}

.sg-filters .rp-field {
    flex: 0 1 190px;
}

.sg-search {
    flex: 1 1 240px;
    min-width: 0;
}

.sg-filters .ox-btn {
    min-height: 42px;
}

.sg-board .crm-table-wrap {
    margin: 14px 16px 16px;
}

.sg-board .db-empty {
    margin: 16px;
}

/* Registro de actividad */
.sg-table tr.is-alert td {
    background: #fff7ed;
}

.crm-avatar.is-system {
    display: grid;
    place-items: center;
    background: #0f172a;
    color: #ffffff;
}

.crm-avatar.is-system svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.sg-action {
    min-width: 280px;
}

.sg-action p {
    margin: 6px 0 2px;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sg-action > small {
    display: block;
    color: #64748b;
    font-size: .74rem;
}

.sg-action a {
    color: #0e7490;
    font-weight: 700;
}

.sg-details {
    margin-top: 8px;
}

.sg-details summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    background: #f0f9ff;
    color: #0369a1;
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.sg-details summary::-webkit-details-marker {
    display: none;
}

.sg-details summary::after {
    content: '▾';
    font-size: .7rem;
}

.sg-details[open] summary::after {
    content: '▴';
}

.sg-details .sg-diff {
    margin-top: 8px;
}

/* Tabla "antes → después" */
.sg-diff {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: .8rem;
}

.sg-diff th,
.sg-diff td {
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.sg-diff tbody tr:last-child th,
.sg-diff tbody tr:last-child td {
    border-bottom: 0;
}

.sg-diff thead th {
    background: #f8fafc;
    color: #64748b;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sg-diff tbody th {
    width: 28%;
    color: #0f172a;
    font-weight: 700;
}

.sg-diff tbody th small {
    display: block;
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 500;
}

.sg-diff td.is-old {
    background: #fef2f2;
    color: #991b1b;
}

.sg-diff td.is-new {
    background: #f0fdf4;
    color: #166534;
    font-weight: 600;
}

.sg-empty {
    color: #94a3b8;
    font-style: italic;
    font-weight: 400;
}

.sg-secret {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: .1em;
}

/* Historial de cambios */
.sg .sp-back {
    margin-bottom: -4px;
}

.sg-timeline {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 16px;
    list-style: none;
}

.sg-change {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.sg-change-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}

.sg-change-head p {
    margin: 0;
    font-size: .8rem;
}

.sg-change-head strong {
    display: block;
    margin-top: 2px;
    color: #0f172a;
    font-size: .9rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.sg-change-head small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: .74rem;
}

.sg-entity {
    display: grid;
    justify-items: end;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #334155;
    font-size: .72rem;
    font-weight: 800;
    text-align: right;
}

.sg-entity a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #0e7490;
    font-weight: 700;
    text-decoration: none;
}

.sg-entity a:hover {
    text-decoration: underline;
}

/* Backup automático */
.sg-now {
    margin: 0;
}

.sg-now .ox-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.sg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: start;
}

.sg-side {
    display: grid;
    gap: 12px;
}

.sg-box {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 16px;
}

.sg-box h3 {
    margin: 0;
    color: #0f172a;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sg-box .iv-check small {
    color: #64748b;
    font-size: .74rem;
    line-height: 1.4;
}

.sg-box form {
    margin: 0;
}

.sg-steps {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: #334155;
    font-size: .82rem;
    line-height: 1.45;
}

.sg-note {
    margin: 0;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.5;
}

.sg-code {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.sg-code code {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .7rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.sg-backups {
    min-width: 0;
}

.sg-backups td small.sg-block {
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .sg-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-side {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    }
}

@media (max-width: 720px) {
    .sg .crm-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .sg-filters .rp-field {
        flex: 1 1 140px;
    }

    .sg-filters .ox-btn {
        flex: 1 1 100%;
    }

    .sg-board .crm-table-wrap {
        margin: 10px;
    }

    .sg-action {
        min-width: 0;
    }

    /* En celular cada acción es una ficha de una columna */
    .sg-table tr {
        grid-template-columns: minmax(0, 1fr);
    }

    /* La tablita "antes / después" dentro de la ficha sigue siendo tabla */
    .crm-table .sg-diff {
        display: table;
        width: 100%;
    }

    .crm-table .sg-diff thead {
        display: table-header-group;
    }

    .crm-table .sg-diff tbody {
        display: table-row-group;
    }

    .crm-table .sg-diff tr {
        display: table-row;
        padding: 0;
        border: 0;
    }

    .crm-table .sg-diff th,
    .crm-table .sg-diff td {
        display: table-cell;
        padding: 6px 8px;
        border-bottom: 1px solid #f1f5f9;
    }

    .crm-table .sg-diff td[data-label]::before {
        content: none;
    }

    .sg-timeline {
        padding: 10px;
    }

    .sg-change-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sg-entity {
        grid-column: 1 / -1;
        justify-items: start;
        text-align: left;
    }

    .sg-diff tbody th {
        width: 38%;
        font-size: .76rem;
        overflow-wrap: normal;
    }

    .sg-secret {
        white-space: nowrap;
        letter-spacing: .02em;
    }

    .sg-now,
    .sg-now .ox-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Dashboard principal (Inicio): ventas, más vendidos, renovaciones próximas e indicadores
   ========================================================================== */
.dh {
    gap: 22px;
}

.dh svg {
    flex: none;
}

/* Portada */
.dh-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px 28px;
    overflow: hidden;
    padding: 28px 30px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% -20%, rgba(45, 212, 191, .32), transparent 42%),
        radial-gradient(circle at 10% 130%, rgba(59, 130, 246, .22), transparent 45%),
        linear-gradient(135deg, #0b1220 0%, #10233a 58%, #0e4f5f 100%);
    color: #ffffff;
    box-shadow: 0 20px 44px -26px rgba(11, 18, 32, .8);
}

.dh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000000 100%);
    mask-image: linear-gradient(90deg, transparent 30%, #000000 100%);
    pointer-events: none;
}

.dh-hero > * {
    position: relative;
}

.dh-hero-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.dh-hero-date b {
    color: #ffffff;
    font-weight: 800;
}

.dh-hero-date {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #a5f3fc;
    font-size: .78rem;
    font-weight: 700;
}

.dh-hero-date svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.dh-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.45rem, 2.3vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.dh-hero p {
    margin: 0;
    color: rgba(226, 232, 240, .82);
    font-size: .94rem;
    line-height: 1.55;
}

.dh-hero p strong {
    color: #ffffff;
    font-weight: 800;
}

.dh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dh-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.dh-hero-btn:hover {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .15);
    color: #ffffff;
    transform: translateY(-1px);
}

.dh-hero-btn.is-primary {
    border-color: transparent;
    background: #2dd4bf;
    color: #042f2e;
    box-shadow: 0 10px 22px -12px rgba(45, 212, 191, .9);
}

.dh-hero-btn.is-primary:hover {
    background: #5eead4;
    color: #042f2e;
}

.dh-hero-btn:focus-visible,
.dh-ind:focus-visible,
.dh-todo-item:focus-visible,
.dh-link:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.dh-hero-btn:focus-visible {
    outline-color: #5eead4;
}

.dh-hero-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* Títulos de sección */
.dh-section {
    display: grid;
    gap: 12px;
}

.dh-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.dh-section-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.dh-section-head span {
    color: #64748b;
    font-size: .82rem;
}

/* Tarjetas de ventas */
.dh-kpis {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dh-kpi {
    --tone: #0d9488;
    --soft: #ccfbf1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    padding: 18px 18px 0;
    border: 1px solid #e8edf3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow .15s ease, transform .15s ease;
}

.dh-kpi:hover {
    box-shadow: 0 16px 30px -24px rgba(15, 23, 42, .5);
    transform: translateY(-1px);
}

.dh-kpi.is-teal { --tone: #0d9488; --soft: #ccfbf1; }
.dh-kpi.is-blue { --tone: #2563eb; --soft: #dbeafe; }
.dh-kpi.is-violet { --tone: #7c3aed; --soft: #ede9fe; }
.dh-kpi.is-amber { --tone: #d97706; --soft: #fef3c7; }

.dh-kpi-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.dh-kpi-top small {
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
}

.dh-kpi-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    background: var(--soft);
    color: var(--tone);
}

.dh-kpi-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.dh-kpi > strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dh-kpi > strong em {
    color: #64748b;
    font-size: .8rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
}

.dh-kpi-foot {
    overflow: hidden;
    color: #64748b;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dh-trend {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.dh-trend small {
    font-weight: 600;
    opacity: .75;
}

.dh-trend.is-up { background: #dcfce7; color: #15803d; }
.dh-trend.is-down { background: #fee2e2; color: #b91c1c; }
.dh-trend.is-flat { background: #f1f5f9; color: #64748b; font-weight: 700; }

.dh-spark {
    display: block;
    width: calc(100% + 36px);
    height: 44px;
    margin: auto -18px 0;
    padding-top: 8px;
}

.dh-spark-area {
    fill: var(--tone);
    opacity: .12;
}

.dh-spark-line {
    fill: none;
    stroke: var(--tone);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* Tarjeta principal: ganancia del mes */
.dh-kpi.is-main {
    --tone: #ffffff;
    border-color: transparent;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .18), transparent 45%),
        linear-gradient(135deg, #047857, #0d9488);
    box-shadow: 0 18px 34px -22px rgba(4, 120, 87, .85);
}

.dh-kpi.is-main .dh-kpi-top small,
.dh-kpi.is-main .dh-kpi-foot {
    color: rgba(236, 253, 245, .85);
}

.dh-kpi.is-main .dh-kpi-icon {
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
}

.dh-kpi.is-main > strong {
    color: #ffffff;
    font-size: 1.85rem;
}

.dh-kpi.is-main .dh-trend {
    background: rgba(255, 255, 255, .16);
    color: #ffffff;
}

.dh-kpi.is-main .dh-spark-area {
    opacity: .16;
}

.dh-kpi.is-main .dh-spark-line {
    stroke: rgba(255, 255, 255, .9);
}

/* Filas de paneles */
.dh-row {
    display: grid;
    gap: 18px;
    align-items: stretch;
}

.dh-row.is-chart {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.dh-row.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dh-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dh-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.dh-card-head > div {
    min-width: 0;
}

.dh-card-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 800;
}

.dh-card-head p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: .82rem;
}

.dh-card-head p strong {
    color: #0f172a;
    white-space: nowrap;
}

.dh-badge {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.dh-link {
    flex: none;
    padding: 5px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #0e7490;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.dh-link:hover {
    background: #e0f2fe;
    color: #0e7490;
}

/* Gráfico de los últimos 30 días: se estira al alto de la tarjeta */
.dh-chart {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 250px;
}

.dh-plot {
    position: relative;
    flex: 1;
    margin-top: 18px;
}

.dh-gl {
    position: absolute;
    right: 0;
    left: 0;
    height: 0;
    border-top: 1px dashed #e8edf3;
}

.dh-gl.is-base {
    border-top: 1px solid #e2e8f0;
}

.dh-gl em {
    position: absolute;
    bottom: 3px;
    left: 0;
    color: #94a3b8;
    font-size: .7rem;
    font-style: normal;
    font-weight: 700;
    text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff;
}

.dh-plot-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dh-chart-line {
    fill: none;
    stroke: #0d9488;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.dh-day {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(100% / 29);
    transform: translateX(-50%);
}

.dh-day::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #cbd5e1;
    opacity: 0;
    transition: opacity .12s ease;
}

.dh-dot {
    position: absolute;
    bottom: var(--y);
    left: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid #0d9488;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0;
    transform: translate(-50%, 50%);
    transition: opacity .12s ease, transform .12s ease;
}

.dh-day.is-today .dh-dot {
    border-color: #ffffff;
    background: #0d9488;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, .2);
    opacity: 1;
}

.dh-day:hover::before,
.dh-day:hover .dh-dot {
    opacity: 1;
}

.dh-day:hover .dh-dot {
    transform: translate(-50%, 50%) scale(1.25);
}

.dh-tip {
    position: absolute;
    bottom: calc(var(--y) + 14px);
    left: 50%;
    z-index: 3;
    display: grid;
    gap: 1px;
    padding: 7px 11px;
    border-radius: 10px;
    background: #0f172a;
    color: #cbd5e1;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .6);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .12s ease, transform .12s ease;
}

.dh-tip small {
    color: #5eead4;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dh-tip b {
    color: #ffffff;
    font-size: .92rem;
    font-weight: 800;
}

.dh-day:hover .dh-tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.dh-day.is-start .dh-tip {
    transform: translate(-14px, 4px);
}

.dh-day.is-start:hover .dh-tip {
    transform: translate(-14px, 0);
}

.dh-day.is-end .dh-tip {
    transform: translate(calc(-100% + 14px), 4px);
}

.dh-day.is-end:hover .dh-tip {
    transform: translate(calc(-100% + 14px), 0);
}

.dh-xaxis {
    position: relative;
    height: 26px;
}

.dh-xaxis span {
    position: absolute;
    top: 8px;
    color: #94a3b8;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(-50%);
}

.dh-xaxis span.is-end {
    color: #0f766e;
    transform: translateX(-100%);
}

/* Indicadores */
.dh-health {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
}

.dh-health-row {
    display: flex;
    justify-content: space-between;
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
}

.dh-health-row b {
    color: #15803d;
    font-weight: 800;
}

.dh-health-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #fecaca;
}

.dh-health-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #16a34a, #22c55e);
}

.dh-indicators {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dh-ind {
    --tone: #64748b;
    --soft: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    color: #0f172a;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.dh-ind:hover {
    border-color: var(--soft);
    background: #f8fafc;
    color: #0f172a;
}

.dh-ind.is-green { --tone: #16a34a; --soft: #dcfce7; }
.dh-ind.is-red { --tone: #dc2626; --soft: #fee2e2; }
.dh-ind.is-amber { --tone: #d97706; --soft: #fef3c7; }
.dh-ind.is-orange { --tone: #ea580c; --soft: #ffedd5; }

.dh-ind-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--soft);
    color: var(--tone);
}

.dh-ind-icon svg,
.dh-ind-go {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.dh-ind-body {
    display: grid;
    flex: 1;
    min-width: 0;
}

.dh-ind-body > span {
    color: #0f172a;
    font-size: .87rem;
    font-weight: 800;
}

.dh-ind-body small {
    overflow: hidden;
    color: #64748b;
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dh-ind > b {
    min-width: 34px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--tone);
    font-size: 1.02rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.dh-ind.is-zero > b {
    background: #f1f5f9;
    color: #94a3b8;
}

.dh-ind-go {
    width: 16px;
    height: 16px;
    color: #cbd5e1;
    transition: color .15s ease, transform .15s ease;
}

.dh-ind:hover .dh-ind-go {
    color: var(--tone);
    transform: translateX(2px);
}

/* Listas: más vendidos, renovaciones próximas y actividad reciente */
.dh-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dh-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
}

.dh-list li + li {
    border-top: 1px solid #f1f5f9;
}

.dh-list .crm-logo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.dh-rank {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}

.dh-list li:nth-child(1) .dh-rank { background: #fef3c7; color: #b45309; }
.dh-list li:nth-child(2) .dh-rank { background: #e2e8f0; color: #334155; }
.dh-list li:nth-child(3) .dh-rank { background: #ffedd5; color: #c2410c; }

.dh-item {
    display: grid;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.dh-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.dh-item-row strong {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dh-item-row a {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.dh-item-row a:hover strong {
    color: #0e7490;
    text-decoration: underline;
}

.dh-item-row b {
    flex: none;
    color: #0f172a;
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.dh-item small {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dh-meter {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f5f9;
}

.dh-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0d9488, #2dd4bf);
}

.dh-chip {
    --tone: #475569;
    --soft: #f1f5f9;
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--tone);
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.dh-chip.is-green { --tone: #15803d; --soft: #dcfce7; }
.dh-chip.is-red { --tone: #b91c1c; --soft: #fee2e2; }
.dh-chip.is-amber { --tone: #b45309; --soft: #fef3c7; }
.dh-chip.is-blue { --tone: #1d4ed8; --soft: #dbeafe; }

.dh-more {
    margin: 8px 0 0;
    font-size: .82rem;
}

.dh-more a {
    color: #0e7490;
    font-weight: 700;
}

/* Otros pendientes */
.dh-todo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dh-todo-item {
    --tone: #64748b;
    --soft: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #ffffff;
    color: #334155;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dh-todo-item:hover {
    border-color: var(--soft);
    box-shadow: 0 12px 24px -20px rgba(15, 23, 42, .5);
    color: #0f172a;
}

.dh-todo-item.is-amber { --tone: #d97706; --soft: #fde68a; }
.dh-todo-item.is-red { --tone: #dc2626; --soft: #fecaca; }
.dh-todo-item.is-green { --tone: #059669; --soft: #a7f3d0; }
.dh-todo-item.is-done { --tone: #94a3b8; --soft: #e2e8f0; }

.dh-todo-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--soft) 45%, #ffffff);
    color: var(--tone);
}

.dh-todo-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.dh-todo-item > span:last-child {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.dh-todo-item b {
    color: var(--tone);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.dh-todo-item.is-done b {
    color: #94a3b8;
}

@media (max-width: 1320px) {
    .dh-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 3 columnas: la ganancia ocupa dos y abajo las otras tres tarjetas */
    .dh-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dh-kpi.is-main {
        grid-column: span 2;
    }

    .dh-row.is-chart {
        grid-template-columns: minmax(0, 1fr);
    }

    .dh-chart {
        min-height: 230px;
    }

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

    .dh-row.is-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Actividad reciente a lo ancho: sus compras en dos columnas */
    .dh-row.is-three > :last-child {
        grid-column: 1 / -1;
    }

    .dh-row.is-three > :last-child .dh-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
    }

    .dh-row.is-three > :last-child .dh-list li:nth-child(2) {
        border-top: 0;
    }

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

@media (max-width: 1100px) {
    .dh-kpis,
    .dh-todo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dh-kpi.is-main {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .dh-row.is-three {
        grid-template-columns: minmax(0, 1fr);
    }

    .dh-row.is-three > :last-child .dh-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .dh-row.is-three > :last-child .dh-list li:nth-child(2) {
        border-top: 1px solid #f1f5f9;
    }

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

@media (max-width: 720px) {
    .dh {
        gap: 18px;
    }

    .dh-hero {
        padding: 20px 18px;
        border-radius: 18px;
    }

    .dh-hero-date b {
        display: none;
    }

    .dh-hero-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .dh-hero-btn {
        justify-content: center;
        gap: 6px;
        padding: 9px 6px;
        font-size: .8rem;
    }

    .dh-hero-btn svg {
        width: 16px;
        height: 16px;
    }

    .dh-kpis {
        gap: 10px;
    }

    .dh-kpi {
        gap: 5px;
        padding: 14px 14px 0;
    }

    .dh-kpi-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dh-kpi.is-main .dh-kpi-top {
        flex-direction: row;
        align-items: center;
    }

    .dh-kpi-top small {
        font-size: .76rem;
    }

    .dh-kpi-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .dh-kpi-icon svg {
        width: 16px;
        height: 16px;
    }

    .dh-kpi > strong {
        font-size: 1.12rem;
    }

    .dh-kpi.is-main > strong {
        font-size: 1.6rem;
    }

    .dh-trend {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dh-trend small {
        display: none;
    }

    .dh-spark {
        width: calc(100% + 28px);
        height: 36px;
        margin: auto -14px 0;
    }

    .dh-card-head {
        flex-wrap: wrap;
    }

    .dh-chart {
        min-height: 200px;
    }

    .dh-ind-go {
        display: none;
    }

    .dh-todo {
        gap: 10px;
    }

    .dh-todo-item {
        gap: 10px;
        padding: 10px 12px;
        font-size: .78rem;
    }
}

@media (max-width: 480px) {
    .dh-hero-btn svg,
    .dh-xaxis span.is-minor {
        display: none;
    }
}

/* Marca del panel con el logo de la tienda (MetStrim) en lugar de las iniciales */
.admin-brand-mark.has-logo {
    overflow: hidden;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 14px rgba(56, 189, 248, .3);
}

.admin-brand-mark.has-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Configuracion general (admin/configuracion.php): vista previa de la marca, metodos de pago y plantillas */
.cg .pd-item.is-active {
    border-color: #7dd3fc;
    background: #f0f9ff;
}

.cg-narrow {
    max-width: 560px;
}

.cg-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #0b0c10;
    color: #e6ecf6;
}

.cg-brand-logo {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    overflow: hidden;
    place-items: center;
    border-radius: 50%;
    background: #1f2430;
}

.cg-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cg-brand strong,
.cg-brand small {
    display: block;
}

.cg-brand strong {
    color: #ffffff;
    font-size: 1.05rem;
}

.cg-brand small {
    color: #9ca5b8;
    font-size: .8rem;
}

.cg-pay {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.cg-pay-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: #ffffff;
}

.cg-pay-item.is-off {
    background: #f8fafc;
}

.cg-pay-item strong {
    display: block;
    color: var(--db-ink);
}

.cg-pay-item small {
    display: block;
    color: var(--db-muted);
    font-size: .8rem;
}

.cg-pay-currencies {
    display: block;
    margin-top: 2px;
    color: #0e7490;
    font-size: .74rem;
    font-weight: 700;
}

.cg-pay-item .ox-pill {
    flex: none;
}

.cg-tpls {
    display: grid;
    gap: 12px;
}

.cg-tpl {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: #ffffff;
}

.cg-tpl header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.cg-tpl header > div {
    flex: 1;
    min-width: 0;
}

.cg-tpl header strong {
    display: block;
    color: var(--db-ink);
}

.cg-tpl header small {
    color: var(--db-muted);
    font-size: .78rem;
}

.pd .cg-tpl textarea {
    min-height: 76px;
    resize: vertical;
}

.cg-vars {
    margin: 0;
    color: var(--db-muted);
    font-size: .78rem;
}

.cg-vars code {
    display: inline-block;
    margin: 2px 2px 0 0;
    padding: 1px 6px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: .76rem;
    cursor: help;
}

.cg-preview {
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--db-muted);
    font-size: .86rem;
}

.cg-preview strong {
    color: var(--db-ink);
}

/* Configuracion general → Metodos de pago (admin/includes/datos_pago.php): resumen, metodos en tarjetas
   agrupadas por moneda y, debajo, el editor del metodo elegido con su vista previa */
.cg-methods {
    display: grid;
    gap: 18px;
}

.cg-msummary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 260px);
    align-items: center;
    gap: 10px 20px;
    padding: 14px 16px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: var(--db-soft);
}

.cg-msummary strong {
    display: block;
    color: var(--db-ink);
    font-size: .95rem;
}

.cg-msummary small {
    color: var(--db-muted);
    font-size: .78rem;
}

.cg-mgroups {
    display: grid;
    gap: 16px;
}

.cg-mgroup .pd-group {
    margin: 0 0 8px 2px;
}

.cg-mgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.pd-item.cg-mcard {
    padding: 11px 12px;
    border-color: var(--db-line);
    background: #ffffff;
}

.pd-item.cg-mcard:hover {
    border-color: #94a3b8;
}

.pd-item.cg-mcard.is-active {
    border-color: #0f172a;
    box-shadow: 0 0 0 1px #0f172a, 0 10px 22px -14px rgba(15, 23, 42, .45);
}

.cg-meditor {
    padding-top: 20px;
    border-top: 1px solid var(--db-line);
}

.cg-meditor .pd-method {
    padding: 0;
}

.cg-meditor .pd-foot {
    margin: 0;
    padding: 14px 0;
}

@media (max-width: 1100px) {
    .cg-meditor .pd-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .cg-msummary {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Grupos de metodos en 3 columnas: cada grupo ocupa tantas como metodos tiene (Dolares y Soles y cripto van lado a lado) */
.cg-mgroups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
}

.cg-mgroup {
    grid-column: span var(--span, 3);
    min-width: 0;
}

.cg-mgroup .cg-mgrid {
    grid-template-columns: repeat(var(--span, 3), minmax(0, 1fr));
}

@media (max-width: 900px) {
    .cg-mgroups,
    .cg-mgroup .cg-mgrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cg-mgroup {
        grid-column: auto;
    }
}

/* Diseño de la tienda → Carrusel: aviso de imagen que no es horizontal (el banner es de 1920×600) */
.st-slide-summary .st-slide-warn {
    display: block;
    margin-top: 2px;
    color: #b45309;
    font-weight: 600;
}

/* Diseño de la tienda → Carrusel (cs-): banners que se ordenan arrastrando y formulario con la vista previa
   del banner tal como se ve en el inicio (1920×600, de borde a borde) */
.cs .st-slide-summary {
    grid-template-columns: 22px 168px minmax(0, 1fr) auto auto auto;
}

.cs-handle {
    display: grid;
    width: 22px;
    height: 40px;
    place-items: center;
    border-radius: 6px;
    color: #94a3b8;
    cursor: grab;
}

.cs-handle:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cs-handle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.cs .cs-thumb {
    width: 168px;
    height: auto;
    aspect-ratio: 1920 / 600;
}

.cs-info {
    min-width: 0;
}

.cs-info small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-move {
    display: grid;
    gap: 2px;
}

.cs-move button {
    display: grid;
    width: 28px;
    height: 22px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--db-line);
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
}

.cs-move button:hover {
    border-color: #0f172a;
    color: #0f172a;
}

.cs-move svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.cs .st-slide.is-dragging {
    border-style: dashed;
    opacity: .55;
}

.cs-order-status {
    font-weight: 700;
}

.cs-order-status.is-ok {
    color: #047857;
}

.cs-order-status.is-error {
    color: #b91c1c;
}

/* Formulario: vista previa grande a la izquierda y los datos a la derecha */
.cs-form {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.pd-drop.cs-drop {
    display: grid !important;
    gap: 10px;
    padding: 10px;
}

.cs-preview {
    display: block;
    overflow: hidden;
    aspect-ratio: 1920 / 600;
    border-radius: 10px;
    background: #0b0c10;
}

.cs-drop:not(.has-image) .cs-preview {
    display: none;
}

.pd-drop .cs-preview img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;
    object-fit: cover;
}

.cs-size {
    display: block;
    margin-top: 6px;
    color: var(--db-muted);
    font-size: .78rem;
}

.cs-size.is-ok {
    color: #047857;
    font-weight: 700;
}

.cs-size.is-warn {
    color: #b45309;
    font-weight: 700;
}

.cs [data-destino-campo] {
    margin-top: 8px;
}

.cs [data-destino-campo][hidden] {
    display: none;
}

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

@media (max-width: 760px) {
    .cs .st-slide-summary {
        grid-template-columns: 22px 110px minmax(0, 1fr) auto;
    }

    .cs .cs-thumb {
        width: 110px;
    }

    .cs .st-slide-summary .cs-move {
        grid-row: 2;
        grid-column: 3;
        display: flex;
    }

    .cs .st-slide-summary [data-slide-edit] {
        grid-column: auto;
    }
}

/* Productos → Datos de venta: insignias sobre la imagen (Nuevo, Oferta, Top). La etiqueta de colores es la vista
   previa con los mismos colores de la tienda; el selector elige Automático, Mostrar u Ocultar. */
.pr-badges {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
    background: var(--db-soft);
}

.pr-badges legend {
    padding: 0 6px;
    color: var(--db-ink, #0f172a);
    font-size: .86rem;
    font-weight: 800;
}

.pr-badges legend small {
    color: var(--db-muted);
    font-weight: 600;
}

.pr-badge-row {
    display: grid;
    grid-template-columns: 96px auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
}

.pr-badge-chip {
    justify-self: start;
    max-width: 96px;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 6px;
    color: #ffffff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity .2s ease, filter .2s ease;
}

.pr-badge-chip.is-new {
    background: #0f766e;
}

.pr-badge-chip.is-offer {
    background: #2563eb;
}

.pr-badge-chip.is-hot {
    background: #f59e0b;
    color: #1f1300;
}

.pr-badge-row.is-off .pr-badge-chip {
    opacity: .35;
    filter: grayscale(1);
    text-decoration: line-through;
}

.pr-seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--db-line);
    border-radius: 9px;
    background: #ffffff;
}

.pr-seg label {
    position: relative;
    cursor: pointer;
}

.pr-seg input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pr-seg span {
    display: block;
    padding: 5px 10px;
    border-radius: 7px;
    color: var(--db-muted);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.pr-seg label:hover span {
    color: #0f172a;
}

.pr-seg input:checked + span {
    background: #0f172a;
    color: #ffffff;
}

.pr-seg input:focus-visible + span {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.pr-badge-text {
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--db-line);
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    font-size: .84rem;
}

.pr-badge-rule {
    grid-column: 2 / -1;
    margin-top: -2px;
    color: var(--db-muted);
    font-size: .74rem;
}

@media (max-width: 640px) {
    .pr-badge-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .pr-badge-row .pr-seg {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
    }

    .pr-badge-rule {
        grid-column: 1 / -1;
    }
}

/* Productos → lista: nombre con lápiz para cambiarlo ahí mismo (Enter guarda, Esc cancela) */
.pr-name-line {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.pr-name-line > strong {
    min-width: 0;
}

.pr-name-edit {
    display: inline-grid;
    flex: none;
    width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.pr-name-edit svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

[data-row]:hover .pr-name-edit,
[data-row]:focus-within .pr-name-edit,
.pr-name-edit:focus-visible {
    opacity: 1;
}

.pr-name-edit:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.pr-name-edit:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

/* En pantallas tactiles no hay "pasar el mouse": el lápiz se ve siempre */
@media (hover: none) {
    .pr-name-edit {
        opacity: 1;
    }
}

.pr-name-input {
    width: 100%;
    min-width: 140px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid #2563eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    color: #0f172a;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
}

.pr-name-input:focus {
    outline: none;
}

/* Diseño de la tienda → Franja de plataformas (pf-): cada plataforma con su logo, nombre y los productos que muestra
   al hacer clic. Se ordenan arrastrando, igual que el carrusel (usa cs-handle, cs-info y cs-move). */
.pf .st-slide-summary {
    grid-template-columns: 22px 52px minmax(0, 1fr) auto auto auto;
}

.pf .st-slide.is-dragging {
    border-style: dashed;
    opacity: .55;
}

.pf .st-slide.is-off .pf-logo {
    opacity: .45;
    filter: grayscale(1);
}

.pf-logo {
    display: grid;
    width: 52px;
    height: 52px;
    overflow: hidden;
    place-items: center;
    border: 2px solid #f5c542;
    border-radius: 14px;
    background: #0b0c10;
}

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

.pf-logo b {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.pf .cs-info small b {
    color: var(--db-ink);
}

/* Formulario: logo a la izquierda y los datos a la derecha */
.pf-form {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.pd-drop.pf-drop {
    display: grid !important;
    justify-items: center;
    gap: 10px;
    padding: 12px;
    text-align: center;
}

.pf-preview {
    display: block;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border: 3px solid #f5c542;
    border-radius: 24px;
    background: #0b0c10;
}

.pf-drop:not(.has-image) .pf-preview {
    display: none;
}

.pd-drop .pf-preview img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;
    object-fit: cover;
}

.pf .pd-field > [data-image-clear] {
    justify-self: start;
    margin-top: 6px;
}

/* Productos que mostrara al hacer clic (se actualiza al escribir) */
.pf-matches:empty {
    display: none;
}

.pf-matches {
    padding: 10px 12px;
    border: 1px solid var(--db-line);
    border-radius: 10px;
    background: var(--db-soft);
    font-size: .8rem;
}

.pf-matches p {
    margin: 0;
    color: var(--db-muted);
}

.pf-matches p.is-warn {
    color: #b45309;
    font-weight: 700;
}

.pf-matches ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.pf-matches li {
    padding: 3px 9px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 700;
}

.pf-matches li.is-off {
    border-color: var(--db-line);
    background: #ffffff;
    color: var(--db-muted);
    text-decoration: line-through;
}

/* Franja automatica (aun no se agregaron plataformas): aviso con el boton para importar las actuales */
.pf-auto form {
    margin-top: 12px;
}

@media (max-width: 760px) {
    .pf .st-slide-summary {
        grid-template-columns: 22px 44px minmax(0, 1fr) auto;
    }

    .pf-logo {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .pf .st-slide-summary .cs-move {
        grid-row: 2;
        grid-column: 3;
        display: flex;
    }

    .pf .st-slide-summary [data-slide-edit] {
        grid-column: auto;
    }

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

/* Productos → "Cómo lo entregas": 4 opciones (con "Key de licencia (25 caracteres)", 2026-10-08) en 2 × 2 */
.pr-delivery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .pr-delivery {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Productos → Insignias: la vista previa con el mismo estilo de la tienda (fondo suave, borde fino) — 2026-10-09 */
.pr-badge-chip {
    border: 1px solid transparent;
    letter-spacing: .06em;
}

.pr-badge-chip.is-new {
    border-color: #6ee7b7;
    background: #d1fae5;
    color: #047857;
}

.pr-badge-chip.is-offer {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1d4ed8;
}

.pr-badge-chip.is-hot {
    border-color: #fcd34d;
    background: #fef3c7;
    color: #b45309;
}

/* Productos → Insignias: vista previa con el estilo de la tienda (marcador de color solido con degradado) — 2026-10-09 */
.pr-badge-chip {
    border: 0;
    color: #ffffff;
}

.pr-badge-chip.is-new {
    background: linear-gradient(180deg, #10b981, #047857);
}

.pr-badge-chip.is-offer {
    background: linear-gradient(180deg, #f43f5e, #be123c);
}

.pr-badge-chip.is-hot {
    background: linear-gradient(180deg, #fcd34d, #f59e0b 55%, #d97706);
    color: #2a1600;
}

/* Productos → Insignias: vista previa igual que en la tienda (opcion 3: solidas y pequenas) — 2026-10-09 */
.pr-badge-chip {
    border: 0;
    border-radius: 5px;
    color: #ffffff;
}

.pr-badge-chip.is-new {
    background: #059669;
}

.pr-badge-chip.is-offer {
    background: #e11d48;
}

.pr-badge-chip.is-hot {
    background: #f59e0b;
    color: #2a1600;
}

/* Productos → Insignias: vista previa igual que en la tienda (opcion 10: pildora con degradado) — 2026-10-09 */
.pr-badge-chip {
    border: 0;
    border-radius: 999px;
    color: #ffffff;
}

.pr-badge-chip.is-new {
    background: linear-gradient(135deg, #34d399, #059669);
}

.pr-badge-chip.is-offer {
    background: linear-gradient(135deg, #fb7185, #e11d48);
}

.pr-badge-chip.is-hot {
    background: linear-gradient(135deg, #fde047, #f59e0b);
    color: #2a1600;
}

/* Productos → Insignias: vista previa como en la tienda (vidrio medio transparente sobre la foto) — 2026-10-09.
   El fondo oscuro de debajo simula la foto para que se lea igual que en la tienda. */
.pr-badge-chip {
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.pr-badge-chip.is-new {
    background: linear-gradient(rgba(16, 185, 129, .5), rgba(16, 185, 129, .5)), #1f2937;
}

.pr-badge-chip.is-offer {
    background: linear-gradient(rgba(225, 29, 72, .5), rgba(225, 29, 72, .5)), #1f2937;
}

.pr-badge-chip.is-hot {
    background: linear-gradient(rgba(217, 119, 6, .52), rgba(217, 119, 6, .52)), #1f2937;
    color: #ffffff;
}

/* Productos → Insignias: vista previa mas transparente, como en la tienda (2026-10-09) */
.pr-badge-chip.is-new {
    background: linear-gradient(rgba(16, 185, 129, .32), rgba(16, 185, 129, .32)), #1f2937;
}

.pr-badge-chip.is-offer {
    background: linear-gradient(rgba(225, 29, 72, .32), rgba(225, 29, 72, .32)), #1f2937;
}

.pr-badge-chip.is-hot {
    background: linear-gradient(rgba(217, 119, 6, .34), rgba(217, 119, 6, .34)), #1f2937;
}

/* Productos → Duración del plan → ¿Se puede renovar? (2026-10-09): "Sí, se renueva" / "No se renueva" (usa .pr-seg) */
.pr-renew {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--db-line);
}

.pr-renew-label {
    color: var(--db-ink, #0f172a);
    font-size: .84rem;
    font-weight: 800;
}

.pr-renew-hint {
    flex-basis: 100%;
    color: var(--db-muted);
    font-size: .76rem;
}

.pr-renew .pr-seg input:checked + span {
    background: #0f172a;
    color: #ffffff;
}

.pr-renew .pr-seg label:has(input[value="0"]:checked) span {
    background: #b45309;
}

.pr-renew .pr-seg input:disabled + span {
    opacity: .45;
    cursor: not-allowed;
}

/* Productos → Insignias: vista previa como en la tienda (pildora de color bajo el nombre) — 2026-10-09 */
.pr-badge-chip {
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.pr-badge-chip.is-new {
    background: linear-gradient(135deg, #34d399, #059669);
}

.pr-badge-chip.is-offer {
    background: linear-gradient(135deg, #fb7185, #e11d48);
}

.pr-badge-chip.is-hot {
    background: linear-gradient(135deg, #fde047, #f59e0b);
    color: #2a1600;
    text-shadow: none;
}

/* ==========================================================================
   CRM: origen, compras, segmentos, notas y etiquetas internas (admin/clientes.php)
   y Canales (admin/canales.php). 2026-10-28
   ========================================================================== */
.crm-filters {
    flex-wrap: wrap;
}

.crm-filters .ox-search {
    flex: 1 1 280px;
}

.crm .crm-filters select {
    flex: 1 1 170px;
    width: auto;
    min-width: 0;
}

.crm-tab-help {
    margin: -4px 0 10px;
    color: #64748b;
    font-size: .8rem;
}

/* Etiquetas internas (VIP, Revendedor...) */
.crm-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.5;
    vertical-align: middle;
}

.crm-tag.is-violet { background: #ede9fe; color: #5b21b6; }
.crm-tag.is-blue { background: #dbeafe; color: #1e40af; }
.crm-tag.is-teal { background: #ccfbf1; color: #115e59; }
.crm-tag.is-red { background: #fee2e2; color: #991b1b; }

/* Origen: punto del color del canal y detalle debajo */
.crm-origin {
    display: grid;
    gap: 1px;
}

.crm-origin b {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0f172a;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}

.crm-origin i,
.ch-channel i {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.crm-origin small {
    max-width: 180px;
    overflow: hidden;
    color: #64748b;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ficha: de dónde llegó el cliente */
.crm-came {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
    background: #ffffff;
}

.crm-came > span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

.crm-came .crm-origin {
    grid-auto-flow: column;
    align-items: baseline;
    gap: 10px;
}

/* Consentimientos del cliente (ficha) */
.crm-consents {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
}

.crm-consents h3 {
    margin: 0;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
}

.crm-consents ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-consents li {
    display: grid;
    gap: 1px;
    font-size: .8rem;
}

.crm-consents li b {
    color: #0f172a;
}

.crm-consents li span,
.crm-consents p {
    margin: 0;
    color: #64748b;
    font-size: .76rem;
}

/* Notas y etiquetas internas */
.crm-notes {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffbeb;
}

.crm-notes-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.crm-notes-tags legend {
    float: left;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    color: #334155;
    font-size: .8rem;
    font-weight: 700;
}

.crm-tag-check {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.crm-tag-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.crm-tag-check span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: .8rem;
    font-weight: 700;
}

.crm-tag-check input:checked + span { border-color: transparent; }
.crm-tag-check.is-violet input:checked + span { background: #ede9fe; color: #5b21b6; }
.crm-tag-check.is-blue input:checked + span { background: #dbeafe; color: #1e40af; }
.crm-tag-check.is-teal input:checked + span { background: #ccfbf1; color: #115e59; }
.crm-tag-check.is-red input:checked + span { background: #fee2e2; color: #991b1b; }

.crm-tag-check input:checked + span::before {
    content: '✓';
    margin-right: 6px;
}

.crm-tag-check input:focus-visible + span {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.crm-notes textarea {
    width: 100%;
    min-height: 92px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    resize: vertical;
}

.crm-notes textarea:focus {
    border-color: #7dd3fc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

.crm-notes-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.crm-notes-foot small {
    color: #92400e;
    font-size: .75rem;
}

.crm-notes-status {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 700;
}

.crm-notes-status.is-ok { color: #15803d; }
.crm-notes-status.is-error { color: #b91c1c; }

@media (max-width: 720px) {
    .crm-notes-status {
        margin-left: 0;
    }
}

/* Canales (admin/canales.php): tablero sobrio. Barras en un solo color (azul #2a78d6, validado contra el blanco);
   el color de cada canal solo va en el punto junto a su nombre. */
.ch {
    display: grid;
    gap: 18px;
}

/* Resumen con variación contra el periodo anterior */
.ch-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.ch-kpi {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 16px;
    background: #ffffff;
}

.ch-kpi-label {
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

.ch-kpi-value {
    overflow: hidden;
    color: #0f172a;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-kpi-note {
    color: #64748b;
    font-size: .74rem;
}

.ch-delta {
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.ch-delta.is-up { color: #15803d; }
.ch-delta.is-down { color: #b91c1c; }

.ch-delta-when {
    color: #94a3b8;
    font-weight: 600;
}

/* Tarjetas y columnas */
.ch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.ch-grid.is-wide-left {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.ch-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
}

/* Lo ancho (tablas) se desliza dentro de su caja, sin ensanchar la página. */
.ch-card > * {
    min-width: 0;
}

.ch-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.ch-card-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.ch-card-head span,
.ch-card-foot {
    color: #64748b;
    font-size: .78rem;
}

.ch-card-foot {
    margin: 0;
}

/* position: relative: el texto oculto para lectores de pantalla (sr-only, absoluto) queda dentro de la caja que se
   desliza; si no, se sale y ensancha la página en celular. */
.ch-card .crm-table-wrap {
    position: relative;
    margin: 0;
}

/* Visitas por día: columnas finas, líneas de guía muy suaves y detalle al pasar el mouse */
.ch-trend {
    position: relative;
    padding: 8px 0 0 36px;
}

.ch-trend-grid {
    position: absolute;
    inset: 8px 0 26px 36px;
    pointer-events: none;
}

.ch-trend-grid span {
    position: absolute;
    right: 0;
    left: 0;
    border-top: 1px solid #eef1f5;
}

.ch-trend-grid span:last-child {
    border-top-color: #cbd5e1;
}

.ch-trend-grid em {
    position: absolute;
    top: -8px;
    left: -36px;
    width: 30px;
    color: #94a3b8;
    font-size: .68rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ch-trend-bars {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--ch-cols, 30), minmax(0, 1fr));
    align-items: end;
    gap: 2px;
    height: 216px;
}

.ch-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr 26px;
    height: 100%;
    min-width: 0;
    outline: none;
    cursor: default;
}

.ch-col-bar {
    align-self: end;
    width: 60%;
    max-width: 14px;
    margin: 0 auto;
    border-radius: 4px 4px 0 0;
    background: #2a78d6;
}

.ch-col:hover .ch-col-bar,
.ch-col.is-active .ch-col-bar {
    background: #1c5cab;
}

.ch-col:focus-visible .ch-col-bar {
    outline: 2px solid #0f172a;
    outline-offset: 2px;
}

/* La fecha puede ser más ancha que su columna: se centra y sobresale (solo se muestra una de cada varias). */
.ch-col small {
    align-self: start;
    justify-self: center;
    width: max-content;
    padding-top: 6px;
    color: #94a3b8;
    font-size: .66rem;
    text-align: center;
    white-space: nowrap;
}

.ch-col small.is-hidden {
    visibility: hidden;
}

.ch-tip {
    position: absolute;
    top: -6px;
    z-index: 5;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #0f172a;
    color: #ffffff;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .45);
}

.ch-table-view summary {
    width: fit-content;
    color: #0e7490;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.ch-table-view .crm-table {
    min-width: 0;
    margin-top: 10px;
}

/* Embudo: una barra por paso, mismo color, y cuánto pasa al siguiente */
.ch-funnel {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-funnel li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
}

.ch-funnel-label {
    color: #334155;
    font-size: .84rem;
    font-weight: 700;
}

.ch-funnel-track {
    grid-column: 1;
    height: 10px;
    border-radius: 999px;
    background: #f1f5f9;
}

.ch-funnel-bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #2a78d6;
}

.ch-funnel-value {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-content: center;
    justify-items: end;
}

.ch-funnel-value b {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
}

.ch-funnel-value small {
    color: #64748b;
    font-size: .72rem;
    white-space: nowrap;
}

/* Tablas */
.ch-table {
    min-width: 760px;
}

.ch-table.is-compact {
    min-width: 0;
}

.ch-table td.is-num,
.ch-table th.is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ch-table tfoot td {
    border-top: 1px solid #cbd5e1;
    background: #f8fafc;
    font-weight: 700;
}

.ch-channel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ch-channel b {
    color: #0f172a;
    font-weight: 700;
}

.ch-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.ch-share {
    display: block;
    width: 120px;
    height: 4px;
    margin-top: 6px;
    border-radius: 999px;
    background: #f1f5f9;
}

.ch-share span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #2a78d6;
}

.ch-sub {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 500;
}

.ch-sub.is-inline {
    display: inline;
    margin-left: 4px;
}

.ch-person {
    display: grid;
    gap: 1px;
}

.ch-person b {
    color: #0f172a;
}

.ch-nodata td,
.ch-nodata .ch-channel b {
    color: #94a3b8;
}

.ch-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.ch-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 9px;
    background: #ffffff;
    color: #0f172a;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ch-link:hover {
    border-color: #94a3b8;
}

.ch-link:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.ch-link.is-wa {
    color: #15803d;
}

.ch-link svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* Enlaces con etiqueta: plegado al final */
.ch-links summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.ch-links summary::-webkit-details-marker {
    display: none;
}

.ch-links summary > span:first-child {
    display: grid;
    gap: 2px;
}

.ch-links summary b {
    color: #0f172a;
    font-size: 1rem;
}

.ch-links summary small {
    color: #64748b;
    font-size: .78rem;
}

.ch-links-open {
    color: #0e7490;
    font-size: .8rem;
    font-weight: 700;
}

.ch-links:not([open]) {
    gap: 0;
}

@media (max-width: 1200px) {
    .ch-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ch-grid,
    .ch-grid.is-wide-left {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

    .ch-kpi-value {
        font-size: 1.3rem;
    }

    .ch-delta-when {
        display: none;
    }

    .ch-trend-bars {
        height: 180px;
    }

    .ch-col small:not(.is-sparse) {
        visibility: hidden;
    }

    /* Las tablas pasan a fichas (regla del CRM): sin el ancho mínimo de escritorio y con las cifras a la izquierda. */
    .ch-table {
        min-width: 0;
    }

    .ch-table td.is-num {
        text-align: left;
    }

    .ch-share {
        width: 100%;
    }
}

.ch-help {
    margin: 0;
    color: #475569;
    font-size: .86rem;
    line-height: 1.5;
}

.ch-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-list li {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
}

.ch-list-name {
    color: #0f172a;
    font-size: .85rem;
    font-weight: 700;
}

.ch-list code,
.ch-builder-out {
    overflow: hidden;
    color: #0e7490;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-builder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--db-line, #e2e8f0);
}

.ch-builder-campaign {
    flex: 1 1 200px;
}

.ch-builder-out {
    flex: 1 1 100%;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f1f5f9;
}

@media (max-width: 720px) {
    .ch-list li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ch-list code {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Fidelización (admin/fidelizacion.php) y nivel de cada cliente (Clientes). Mismo tablero sobrio que Canales. */
.crm-level {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.crm-level.is-violet { background: #ede9fe; color: #5b21b6; }
.crm-level.is-blue { background: #dbeafe; color: #1e40af; }
.crm-level.is-teal { background: #ccfbf1; color: #115e59; }
.crm-level.is-amber { background: #fef3c7; color: #92400e; }
.crm-level.is-red { background: #fee2e2; color: #991b1b; }

.ch-grid.is-wide-right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
}

.fd-levels .ch-funnel-label {
    text-decoration: none;
}

.fd-levels .ch-funnel-label:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
    border-radius: 999px;
}

/* Retención mes a mes: rampa de un solo azul (claro = pocos volvieron, oscuro = muchos) y el porcentaje escrito.
   Es una tabla propia: en celular no pasa a fichas, se desliza de lado. */
.fd-cohort {
    width: 100%;
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 3px;
}

.fd-cohort thead th {
    padding: 6px 8px;
    color: #64748b;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.fd-cohort thead th.is-num {
    text-align: center;
}

.fd-cohort th[scope="row"] {
    padding: 8px;
    color: #0f172a;
    font-size: .8rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.fd-cohort td {
    padding: 8px;
    color: #334155;
    font-size: .82rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fd-cohort td.fd-cell {
    border-radius: 7px;
    font-size: .78rem;
    font-weight: 700;
}

.fd-cell.is-0 { background: #f8fafc; color: #94a3b8; }
.fd-cell.is-1 { background: #cde2fb; color: #0f172a; }
.fd-cell.is-2 { background: #9ec5f4; color: #0f172a; }
.fd-cell.is-3 { background: #6da7ec; color: #0f172a; }
.fd-cell.is-4 { background: #3987e5; color: #0f172a; }
.fd-cell.is-5 { background: #256abf; color: #ffffff; }
.fd-cell.is-6 { background: #184f95; color: #ffffff; }

.fd-cohort td.fd-cell.is-future {
    background: repeating-linear-gradient(45deg, #f8fafc 0 6px, #ffffff 6px 12px);
}

.fd-scale {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fd-scale i {
    display: inline-block;
    width: 22px;
    height: 10px;
    border-radius: 3px;
}

.fd-scale span:first-child {
    margin-right: 4px;
}

.fd-scale span:last-child {
    margin-left: 4px;
}

/* Mejores clientes: puesto + nombre */
.fd-rank-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.fd-rank {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #f1f5f9;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}

.fd .ch-channel {
    color: inherit;
    text-decoration: none;
}

/* Programa de puntos */
.fd-points .ch-card-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.fd-points-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: start;
}

.fd-points-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.fd-points-stats > div {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
}

.fd-points-stats dt {
    color: #64748b;
    font-size: .74rem;
    font-weight: 700;
}

.fd-points-stats dd {
    display: grid;
    margin: 0;
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 800;
}

.fd-points-stats dd small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 600;
}

.fd-points-form {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 14px;
    background: #f8fafc;
}

.fd-points-form .ox-btn {
    justify-self: start;
}

.fd-points-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fd-points-fields input {
    width: 100%;
}

.fd-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-weight: 700;
    cursor: pointer;
}

.fd-switch input {
    width: 18px;
    height: 18px;
    accent-color: #0e7490;
}

.fd-points-preview {
    margin: 0;
    color: #334155;
    font-size: .82rem;
    line-height: 1.5;
}

.fd-subtitle {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: .88rem;
    font-weight: 800;
}

.fd-holders {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-holders a {
    display: grid;
    gap: 1px;
    padding: 8px 12px;
    border: 1px solid var(--db-line, #e2e8f0);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

.fd-holders a:hover {
    border-color: #94a3b8;
}

.fd-holders b {
    color: #0f172a;
    font-size: .84rem;
}

.fd-holders span {
    color: #64748b;
    font-size: .74rem;
}

@media (max-width: 1200px) {
    .ch-grid.is-wide-right,
    .fd-points-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .fd-points-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Contabilidad (admin/contabilidad.php) */
.acc .acc-tabs {
    flex-wrap: wrap;
}

.acc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.acc-spacer {
    flex: 1 1 auto;
}

.acc-month input {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
}

.acc-year {
    min-width: 90px;
    color: #0f172a;
    font-size: .95rem;
    text-align: center;
}

.acc-note {
    margin: 10px 0;
    color: #475569;
    font-size: .84rem;
    line-height: 1.55;
}

.acc-note.is-ok {
    color: #15803d;
    font-weight: 700;
}

.acc-note.is-bad {
    color: #b91c1c;
    font-weight: 700;
}

.acc-card {
    padding: 18px;
}

.acc-card h2 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.acc-card h2 + .rp-grid {
    margin-bottom: 18px;
}

.acc-checklist {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-checklist li {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: .86rem;
    line-height: 1.5;
}

.acc-checklist li.is-warn {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.acc-checklist li.is-bad {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.acc-checklist a {
    color: #0e7490;
    font-weight: 700;
}

.acc-money {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.acc-money-card {
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    color: inherit;
    text-decoration: none;
}

.acc-money-card:hover {
    border-color: #94a3b8;
}

.acc-money-card.is-active {
    border-color: #0e7490;
    box-shadow: 0 0 0 2px rgba(14, 116, 144, .15);
}

.acc-money-card small {
    color: #64748b;
    font-size: .72rem;
}

.acc-money-card strong {
    color: #0f172a;
    font-size: .9rem;
}

.acc-money-card b {
    color: #0f172a;
    font-size: 1.15rem;
}

.acc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acc-table .is-num,
.acc-statement .is-num,
.acc-entry .is-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.acc-table tfoot th,
.acc-table tfoot td {
    padding: 10px 12px;
    border-top: 2px solid #0f172a;
    background: #f8fafc;
}

.acc-table tr.is-active td {
    background: #ecfeff;
}

.acc-table a {
    color: #0f172a;
    text-decoration: none;
}

.acc-table a:hover {
    color: #0e7490;
    text-decoration: underline;
}

.is-negative {
    color: #b91c1c;
}

.acc-subtitle {
    margin: 20px 0 8px;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}

.acc-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-list li {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #334155;
    font-size: .84rem;
}

.acc-pair {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 6px;
}

.acc-carry {
    display: block;
    color: #15803d;
    font-size: .72rem;
}

.acc-link {
    padding: 0;
    border: 0;
    background: none;
    color: #0e7490;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* Libro diario */
.acc-journal {
    display: grid;
    gap: 10px;
}

.acc-entry {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.acc-entry header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    padding: 8px 12px;
    background: #f8fafc;
    color: #334155;
    font-size: .84rem;
}

.acc-entry header small {
    margin-left: auto;
    color: #64748b;
}

.acc-entry-n {
    display: inline-grid;
    min-width: 26px;
    height: 22px;
    place-items: center;
    border-radius: 6px;
    background: #0f172a;
    color: #ffffff;
    font-size: .72rem;
    font-weight: 700;
}

.acc-entry table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.acc-entry td {
    padding: 6px 12px;
    border-top: 1px solid #f1f5f9;
    color: #0f172a;
}

.acc-entry td:not(.is-num) {
    width: 60%;
}

.acc-entry tr.is-credit td:first-child {
    padding-left: 36px;
    color: #475569;
}

.acc-lines {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    font-size: .84rem;
}

.acc-lines th {
    padding: 4px 6px;
    color: #475569;
    text-align: left;
}

.acc-lines td {
    padding: 3px;
}

.acc-lines select,
.acc-lines input {
    width: 100%;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
}

.acc-lines td:not(:first-child) {
    width: 110px;
}

.acc-lines tfoot td {
    padding: 6px 8px;
    font-weight: 800;
    text-align: right;
}

.acc-lines tfoot.is-off td {
    color: #b91c1c;
}

.acc-entry-dialog {
    width: min(760px, calc(100vw - 24px));
}

/* Estados financieros */
.acc-statements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 12px;
}

.acc-statements h2 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.acc-statement {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.acc-statement th,
.acc-statement td {
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    text-align: left;
}

.acc-indent {
    padding-left: 26px !important;
    color: #475569 !important;
}

.acc-statement tr.is-subtotal th,
.acc-statement tr.is-subtotal td {
    font-weight: 700;
}

.acc-statement tr.is-total th,
.acc-statement tr.is-total td {
    border-top: 1px solid #0f172a;
    background: #f8fafc;
    font-weight: 800;
}

.acc-statement tr.is-grand th,
.acc-statement tr.is-grand td {
    border-top: 2px solid #0f172a;
    border-bottom: 2px solid #0f172a;
    background: #ecfeff;
    font-weight: 800;
}

.acc-statement tr.is-head th {
    padding-top: 14px;
    color: #0e7490;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}



@media (max-width: 1000px) {
    .acc-statements {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Contabilidad → Ajustes: cada sección en una fila (título y explicación a la izquierda, controles a la derecha) */
.acs {
    display: grid;
    gap: 0;
}

.acs-row {
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: 16px 32px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid #e2e8f0;
}

.acs > .acs-row:first-of-type {
    border-top: 0;
    padding-top: 6px;
}

.acs-intro h2 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.acs-intro p {
    margin: 0;
    color: #64748b;
    font-size: .84rem;
    line-height: 1.55;
}

.acs-link {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-top: 10px;
    color: #0e7490;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
}

.acs-link:hover {
    text-decoration: underline;
}

.acs-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.acs-panel.is-flush {
    padding: 0;
    overflow: hidden;
}

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

.acs-fields[hidden] {
    display: none;
}

.acs-fields > .rp-field {
    align-content: start;
    align-self: start;
}

.acs-static {
    display: flex;
    gap: 8px;
    align-items: center;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    font-size: .9rem;
    font-weight: 600;
}

.acs-static i {
    color: #64748b;
}

/* Entrada con "%" al final */
.acs-suffix {
    position: relative;
    display: block;
    max-width: 180px;
}

.acs-suffix input {
    display: block;
    padding-right: 38px !important;
}

.acs-suffix b {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #64748b;
    font-weight: 700;
}

/* Tarjetas para elegir el IGV */
.acs-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.acs-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
}

.acs-option:hover {
    border-color: #94a3b8;
}

.acs-option:has(input:checked) {
    border-color: #0e7490;
    background: #f0fdff;
    box-shadow: 0 0 0 1px #0e7490;
}

.acs-option input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #0e7490;
}

.acs-option-body {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.5;
}

.acs-option-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    align-items: center;
}

.acs-option-head b {
    color: #0f172a;
    font-size: .92rem;
}

.acs-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: .7rem;
    font-weight: 700;
}

.acs-callout {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #fde68a;
    border-radius: 12px;
    background: #fffbeb;
    color: #78350f;
    font-size: .82rem;
    line-height: 1.5;
}

.acs-callout > i {
    margin-top: 2px;
    color: #d97706;
}

.acs-callout b {
    display: block;
    margin-bottom: 4px;
    color: #78350f;
}

.acs-callout ul {
    margin: 0;
    padding-left: 18px;
}

.acs-callout li + li {
    margin-top: 2px;
}

.acs-callout a {
    color: #92400e;
    font-weight: 700;
}

/* Tasas rápidas de renta */
.acs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acs-chip {
    display: grid;
    gap: 1px;
    padding: 7px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.acs-chip:hover {
    border-color: #0e7490;
    color: #0e7490;
}

.acs-chip small {
    color: #64748b;
    font-size: .7rem;
    font-weight: 500;
}

/* Método de pago → cuenta */
.acs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.acs-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid #f1f5f9;
}

.acs-list li:first-child {
    border-top: 0;
}

.acs-list li.is-off .acs-method {
    opacity: .55;
}

.acs-list li.is-default {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.acs-method {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.acs-method-icon {
    display: grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #f1f5f9;
    color: #334155;
}

.acs-method b {
    display: block;
    color: #0f172a;
    font-size: .88rem;
}

.acs-method small {
    color: #64748b;
    font-size: .74rem;
}

.acs-select select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: .86rem;
}

.acs-select select:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

/* Barra para guardar (queda abajo de la pantalla mientras se edita) */
.acs-bar {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin: 4px 0 18px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.acs-bar span {
    margin-right: auto;
    color: #64748b;
    font-size: .84rem;
}

.acs.is-dirty .acs-bar {
    border-color: #f59e0b;
}

.acs.is-dirty .acs-bar span {
    color: #b45309;
    font-weight: 700;
}

/* Tabla de referencia contable */
.acs-ref {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.acs-ref th,
.acs-ref td {
    padding: 11px 16px;
    border-top: 1px solid #f1f5f9;
    color: #0f172a;
    text-align: left;
    vertical-align: top;
}

.acs-ref thead th {
    border-top: 0;
    background: #f8fafc;
    color: #475569;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.acs-ref tbody th {
    width: 26%;
    font-weight: 700;
}

.acs-ref small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 500;
}

@media (max-width: 1000px) {
    .acs-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .acs-fields,
    .acs-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .acs-list li {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .acs-ref thead {
        display: none;
    }

    .acs-ref tr {
        display: grid;
        padding: 10px 14px;
        border-top: 1px solid #f1f5f9;
    }

    .acs-ref th,
    .acs-ref td {
        width: auto !important;
        padding: 2px 0;
        border: 0;
    }

    .acs-ref td::before {
        color: #64748b;
        font-size: .72rem;
        font-weight: 700;
    }

    .acs-ref td:nth-of-type(1)::before {
        content: "Debe: ";
    }

    .acs-ref td:nth-of-type(2)::before {
        content: "Haber: ";
    }

    .acs-bar {
        bottom: 70px;
    }
}

/* ==========================================================================
   Configuración general → Culqi (configuracion.php?seccion=culqi): llaves e instrucciones
   ========================================================================== */
.cq-remove {
    margin: -6px 0 0;
}

.cq-guide {
    display: grid;
    gap: 12px;
    margin-top: 6px;
    padding: 18px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #f8fafc;
}

.cq-guide h3 {
    margin: 0;
    color: var(--db-ink);
    font-size: 1rem;
    font-weight: 800;
}

.cq-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: cq-step;
}

.cq-steps li {
    position: relative;
    display: grid;
    gap: 2px;
    padding-left: 40px;
    counter-increment: cq-step;
}

.cq-steps li::before {
    content: counter(cq-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0e7490;
    color: #ffffff;
    font-size: .85rem;
    font-weight: 800;
}

.cq-steps strong {
    color: var(--db-ink);
    font-size: .92rem;
}

.cq-steps span,
.cq-notes li {
    color: #475569;
    font-size: .86rem;
    line-height: 1.55;
}

.cq-notes {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
}

.cq-guide code {
    padding: 1px 5px;
    border-radius: 5px;
    background: #e2e8f0;
    color: #0f172a;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.cq-guide a {
    color: #0e7490;
    font-weight: 700;
}

@media (max-width: 575px) {
    .cq-guide {
        padding: 14px;
    }
}

/* Configuración general → Culqi: medios de pago y aviso de pagos (webhook) */
.cq-methods {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--db-line);
    border-radius: 12px;
}

.cq-methods legend {
    padding: 0 6px;
    color: var(--db-ink);
    font-size: .9rem;
    font-weight: 800;
}

.cq-webhook {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid #a5f3fc;
    border-radius: 14px;
    background: #ecfeff;
}

.cq-webhook h3 {
    margin: 0;
    color: var(--db-ink);
    font-size: 1rem;
    font-weight: 800;
}

.cq-webhook .pd-hint {
    margin: 0;
    color: #334155;
    font-size: .82rem;
    line-height: 1.5;
}

.cq-webhook code {
    padding: 1px 5px;
    border-radius: 5px;
    background: #cffafe;
    color: #0f172a;
    font-size: .8rem;
}

.cq-url {
    display: flex;
    gap: 8px;
}

.cq-url .st-input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    background: #ffffff;
}

@media (max-width: 575px) {
    .cq-url {
        flex-direction: column;
    }
}

/* Medios de pago de Culqi: un interruptor por medio que se guarda al tocarlo (Configuración general → Culqi y Métodos de pago) */
.cq-methods {
    max-width: 760px;
}

.cq-methods-head {
    display: grid;
    gap: 2px;
}

.cq-methods-head strong {
    color: var(--db-ink);
    font-size: .95rem;
    font-weight: 800;
}

.cq-methods-head small {
    color: var(--db-muted);
    font-size: .8rem;
}

.cq-method {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--db-line);
}

.cq-method .pd-hint {
    grid-column: 1 / -1;
    margin: 0;
}

.cq-keys-title {
    margin: 6px 0 0;
    color: var(--db-ink);
    font-size: 1rem;
    font-weight: 800;
}

.cg-meditor + .cq-methods,
.pd-banner + .cq-methods {
    margin-top: 4px;
}

/* ==========================================================================
   Configuración general dinámica (configuracion.php, 2026-11-05): resumen de avance, menú agrupado con estado,
   buscador, barra "Cambios sin guardar" y estados de carga. Sobrio: sin degradados ni efectos llamativos.
   ========================================================================== */
.cg-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 14px 18px;
    border: 1px solid var(--db-line);
    border-radius: 14px;
    background: #ffffff;
}

.cg-overview-main {
    display: grid;
    gap: 6px;
    min-width: 220px;
}

.cg-overview-main strong {
    color: var(--db-ink);
    font-size: .92rem;
    font-weight: 800;
}

.cg-overview-bar {
    overflow: hidden;
    height: 6px;
    border-radius: 99px;
    background: #e2e8f0;
}

.cg-overview-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0f766e;
    transition: width .4s ease;
}

.cg-overview-pending {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--db-muted);
    font-size: .8rem;
    font-weight: 600;
}

.cg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #fcd34d;
    border-radius: 99px;
    background: #fffbeb;
    color: #92400e;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

.cg-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d97706;
}

.cg-chip:hover {
    border-color: #d97706;
    color: #78350f;
}

.cg-overview-ok {
    margin: 0;
    color: #047857;
    font-size: .84rem;
    font-weight: 700;
}

/* Menú: buscador, grupos y punto de estado */
.cg-nav {
    gap: 14px;
}

.cg-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.cg-search svg {
    position: absolute;
    left: 11px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--db-muted);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.cg-search input {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 34px;
    border: 1px solid var(--db-line);
    border-radius: 10px;
    background: #ffffff;
    color: var(--db-ink);
    font: inherit;
    font-size: .85rem;
}

.cg-search input:focus {
    border-color: #0f766e;
    outline: 2px solid rgba(15, 118, 110, .18);
}

.cg-search kbd {
    position: absolute;
    right: 9px;
    padding: 1px 6px;
    border: 1px solid var(--db-line);
    border-radius: 5px;
    background: var(--db-soft);
    color: var(--db-muted);
    font-family: inherit;
    font-size: .7rem;
}

.cg-search input:focus + kbd,
.cg-search input:not(:placeholder-shown) + kbd {
    display: none;
}

.cg-nav-group {
    display: grid;
    gap: 2px;
}

.cg-nav-group[hidden],
.cg-item[hidden] {
    display: none;
}

.cg-nav-label {
    margin: 0 0 4px 10px;
    color: var(--db-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cg-item.st-item {
    grid-template-columns: 36px minmax(0, 1fr) 10px;
}

.cg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cg-dot.is-ok { background: #10b981; }
.cg-dot.is-warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.cg-dot.is-neutral { background: #cbd5e1; }

.cg-nav-empty {
    margin: 0;
    padding: 8px 10px;
    color: var(--db-muted);
    font-size: .82rem;
}

/* Cargando una sección o guardando */
[data-config] .pd-editor {
    transition: opacity .15s ease;
}

[data-config].is-loading .pd-editor,
[data-config].is-saving .pd-editor {
    opacity: .55;
    pointer-events: none;
}

[data-config].is-loading .st-layout {
    position: relative;
}

[data-config].is-loading .st-layout::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 40%;
    height: 3px;
    border-radius: 3px;
    background: #0f766e;
    animation: cg-loading 1s ease-in-out infinite;
}

@keyframes cg-loading {
    from { left: 0; width: 20%; }
    50% { width: 45%; }
    to { left: 100%; width: 10%; }
}

/* Barra fija "Cambios sin guardar" */
.cg-savebar {
    position: fixed;
    bottom: 18px;
    left: 50%;
    z-index: 1090;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 12px 10px 18px;
    border: 1px solid #1e293b;
    border-radius: 14px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: .86rem;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .7);
    transform: translateX(-50%);
    animation: pd-toast .2s ease;
}

.cg-savebar[hidden] {
    display: none;
}

.cg-savebar b {
    color: #ffffff;
}

.cg-savebar .ox-btn {
    border-color: rgba(255, 255, 255, .25);
    background: transparent;
    color: #ffffff;
}

.cg-savebar .ox-btn.is-primary {
    border-color: #10b981;
    background: #10b981;
    color: #052e20;
}

/* Las notificaciones suben si la barra está visible */
.cg-savebar:not([hidden]) ~ .cg-toasts {
    bottom: 84px;
}

@media (max-width: 900px) {
    .cg-overview {
        padding: 12px 14px;
    }

    /* En celular el menú es una fila que se desliza, con los grupos uno tras otro */
    .cg-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }

    .cg-search {
        flex: 1 1 100%;
    }

    .cg-nav-groups-row,
    .cg-nav-group {
        display: flex;
        gap: 6px;
    }

    .cg-nav {
        overflow: hidden;
    }

    .cg-nav-group {
        flex: 0 0 auto;
    }

    .cg-nav-label {
        display: none;
    }

    .cg-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .cg-search {
        position: sticky;
        left: 0;
        flex: 0 0 180px;
        background: var(--db-soft);
    }

    .cg-item.st-item {
        grid-template-columns: 28px auto 8px;
        gap: 8px;
        padding: 7px 10px;
        border: 1px solid var(--db-line);
        background: #ffffff;
        white-space: nowrap;
    }

    .cg-item .pd-item-text small {
        display: none;
    }

    .cg-item .st-icon svg {
        width: 18px;
        height: 18px;
    }

    .cg-savebar {
        right: 12px;
        left: 12px;
        justify-content: space-between;
        transform: none;
    }
}

/* ==========================================================================
   Configuración general · rediseño profesional (2026-11-05, pedido "no veo que le hayas mejorado el formato y
   estilo, hazlo más profesional"). Estilo de panel de configuración (tipo Shopify / Stripe): sobrio, una sola tipografía,
   un solo color de acento (verde azulado), campos uniformes, botones planos, sin brillos ni bloques oscuros.
   Todo acotado a .cg[data-config] (solo existe en admin/configuracion.php).
   ========================================================================== */
.cg[data-config] {
    --cg-ink: #101828;
    --cg-text: #344054;
    --cg-muted: #667085;
    --cg-line: #e4e7ec;
    --cg-soft: #f9fafb;
    --cg-accent: #0f766e;
    --cg-accent-soft: #f0fdfa;
    --cg-accent-line: #99f6e4;
    --cg-radius: 10px;
    gap: 18px;
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--cg-text);
}

.cg[data-config] h1,
.cg[data-config] h2,
.cg[data-config] h3 {
    font-family: "Manrope", system-ui, sans-serif;
    letter-spacing: -.01em;
}

/* Encabezado de la página */
.cg[data-config] .ox-top h1 {
    color: var(--cg-ink);
    font-size: 1.6rem;
    font-weight: 800;
}

.cg[data-config] .ox-top p {
    max-width: 680px;
    color: var(--cg-muted);
    font-size: .9rem;
}

.cg[data-config] .ox-top .ox-btn.is-primary {
    min-height: 38px;
    border: 1px solid var(--cg-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--cg-ink);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.cg[data-config] .ox-top .ox-btn.is-primary:hover {
    border-color: #d0d5dd;
    background: var(--cg-soft);
}

/* Resumen */
.cg[data-config] .cg-overview {
    padding: 14px 20px;
    border-color: var(--cg-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.cg[data-config] .cg-overview-main strong {
    color: var(--cg-ink);
    font-size: .88rem;
    font-weight: 700;
}

.cg[data-config] .cg-overview-bar span {
    background: var(--cg-accent);
}

/* Contenedor: menú + contenido */
.cg[data-config] .st-layout {
    grid-template-columns: 264px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--cg-line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

/* Menú lateral */
.cg[data-config] .cg-nav {
    gap: 18px;
    padding: 18px 12px;
    border-right: 1px solid var(--cg-line);
    background: var(--cg-soft);
}

.cg[data-config] .cg-search input {
    height: 36px;
    border-color: var(--cg-line);
    border-radius: 8px;
    font-size: .84rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.cg[data-config] .cg-nav-label {
    margin: 0 0 4px 12px;
    color: #98a2b3;
    font-size: .68rem;
    letter-spacing: .07em;
}

.cg[data-config] .cg-item.st-item {
    grid-template-columns: 20px minmax(0, 1fr) 8px;
    gap: 12px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
}

.cg[data-config] .cg-item .st-icon {
    width: auto;
    height: auto;
    border: 0;
    background: none;
    box-shadow: none;
}

.cg[data-config] .cg-item .st-icon svg {
    width: 18px;
    height: 18px;
    stroke: #98a2b3;
}

.cg[data-config] .cg-item .pd-item-text strong {
    color: var(--cg-text);
    font-size: .86rem;
    font-weight: 600;
}

.cg[data-config] .cg-item .pd-item-text small {
    color: #98a2b3;
    font-size: .73rem;
}

.cg[data-config] .cg-item:hover {
    background: #f2f4f7;
}

.cg[data-config] .cg-item.is-active {
    position: relative;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), inset 0 0 0 1px var(--cg-line);
}

.cg[data-config] .cg-item.is-active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--cg-accent);
}

.cg[data-config] .cg-item.is-active .pd-item-text strong {
    color: var(--cg-ink);
    font-weight: 700;
}

.cg[data-config] .cg-item.is-active .st-icon svg {
    stroke: var(--cg-accent);
}

.cg[data-config] .cg-dot {
    width: 7px;
    height: 7px;
}

.cg[data-config] .cg-dot.is-warn {
    box-shadow: none;
}

/* Encabezado de la sección */
.cg[data-config] .cg-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 22px 28px 14px;
}

.cg[data-config] .cg-head-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cg-line);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.cg[data-config] .cg-head-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--cg-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cg[data-config] .cg-head-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cg[data-config] .cg-crumb {
    color: #98a2b3;
    font-size: .74rem;
    font-weight: 600;
}

.cg[data-config] .cg-head h2 {
    margin: 0;
    color: var(--cg-ink);
    font-size: 1.3rem;
    font-weight: 800;
}

.cg[data-config] .cg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 320px;
    padding: 4px 10px;
    overflow: hidden;
    border: 1px solid var(--cg-line);
    border-radius: 99px;
    background: #ffffff;
    color: var(--cg-text);
    font-size: .74rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg[data-config] .cg-badge > span {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #98a2b3;
}

.cg[data-config] .cg-badge.is-ok { border-color: #abefc6; background: #ecfdf3; color: #067647; }
.cg[data-config] .cg-badge.is-ok > span { background: #17b26a; }
.cg[data-config] .cg-badge.is-warn { border-color: #fedf89; background: #fffaeb; color: #b54708; }
.cg[data-config] .cg-badge.is-warn > span { background: #f79009; }

/* Cuerpo de la sección: el título interno lo reemplaza el encabezado; su texto queda como descripción */
.cg[data-config] .pd-editor .pd-method {
    gap: 20px;
    padding: 0 28px;
}

.cg[data-config] .pd-editor .st-head h2 {
    display: none;
}

.cg[data-config] .pd-editor .st-head {
    margin: 0 0 4px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--cg-line);
}

.cg[data-config] .pd-editor .st-head p {
    max-width: 720px;
    margin: 0;
    color: var(--cg-muted);
    font-size: .88rem;
    line-height: 1.55;
}

.cg[data-config] .pd-editor .st-head a {
    color: var(--cg-accent);
    font-weight: 700;
}

.cg[data-config] .st-stack {
    gap: 18px;
}

.cg[data-config] .cg-narrow,
.cg[data-config] .st-stack.cg-narrow {
    max-width: 640px;
}

/* Campos */
.cg[data-config] .pd-field > span,
.cg[data-config] .pd-field > b {
    color: var(--cg-text);
    font-size: .82rem;
    font-weight: 700;
}

.cg[data-config] .pd-field > span small {
    color: #98a2b3;
    font-weight: 500;
}

.cg[data-config] .st-input,
.cg[data-config] .pd .st-input,
.cg[data-config] .pr-image-actions input {
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
    color: var(--cg-ink);
    font-size: .9rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cg[data-config] textarea.st-input {
    line-height: 1.5;
}

.cg[data-config] .st-input:focus,
.cg[data-config] .pr-image-actions input:focus {
    border-color: var(--cg-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

.cg[data-config] .st-input.is-error {
    border-color: #fda29b;
    box-shadow: 0 0 0 3px rgba(240, 68, 56, .1);
}

.cg[data-config] .pd-hint {
    color: var(--cg-muted);
    font-size: .78rem;
    line-height: 1.5;
}

.cg[data-config] .pd-hint.is-error {
    color: #b42318;
}

.cg[data-config] .st-row {
    gap: 16px;
}

/* Opciones (moneda, tipo de cambio) */
.cg[data-config] .ox-mode {
    padding: 14px;
    border-color: var(--cg-line);
    border-radius: var(--cg-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .15s ease, background-color .15s ease;
}

.cg[data-config] .ox-mode:hover {
    border-color: #d0d5dd;
}

.cg[data-config] .ox-mode:has(input:checked) {
    border-color: var(--cg-accent);
    background: var(--cg-accent-soft);
    box-shadow: 0 0 0 1px var(--cg-accent);
}

.cg[data-config] .st-modes .ox-mode input {
    accent-color: var(--cg-accent);
}

.cg[data-config] .ox-mode strong {
    color: var(--cg-ink);
    font-size: .88rem;
}

.cg[data-config] .ox-mode small {
    color: var(--cg-muted);
    font-size: .78rem;
}

/* Interruptores */
.cg[data-config] .pd-switch b {
    color: var(--cg-ink);
    font-size: .88rem;
    font-weight: 700;
}

/* Cuadros de estado (Moneda, Correos, Culqi): claros en lugar de bloques oscuros */
.cg[data-config] .st-rate {
    padding: 16px 18px;
    border: 1px solid var(--cg-line);
    border-radius: 12px;
    background: var(--cg-soft);
    color: var(--cg-text);
}

.cg[data-config] .st-rate small {
    color: var(--cg-muted);
    font-size: .78rem;
}

.cg[data-config] .st-rate strong {
    color: var(--cg-ink);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.cg[data-config] .st-rate .ox-btn {
    min-height: 36px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
    color: var(--cg-ink);
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.cg[data-config] .st-rate .ox-btn:hover:not(:disabled) {
    background: var(--cg-soft);
}

/* Avisos y banners */
.cg[data-config] .notice,
.cg[data-config] .pd-banner {
    border-radius: var(--cg-radius);
    font-size: .84rem;
}

/* Pie de cada formulario: guardar a la derecha, botones planos */
.cg[data-config] .pd-foot {
    justify-content: flex-end;
    margin: 6px -28px 0;
    padding: 14px 28px;
    border-top: 1px solid var(--cg-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(4px);
}

.cg[data-config] .pd-foot .pd-unsaved {
    margin-right: auto;
}

.cg[data-config] .pg-btn {
    min-height: 40px;
    padding: 0 16px;
    border-color: #d0d5dd;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.cg[data-config] .pg-btn.is-approve {
    border-color: var(--cg-accent);
    background: var(--cg-accent);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.cg[data-config] .pg-btn.is-approve:hover:not(:disabled) {
    border-color: #115e59;
    background: #115e59;
}

.cg[data-config] .pd-link {
    font-size: .84rem;
    font-weight: 700;
}

/* Vista previa de marca (logo, nombre) */
.cg[data-config] .cg-brand {
    border: 1px solid #1d2939;
    border-radius: 12px;
}

.cg[data-config] .st-drop {
    border-width: 1px;
    border-radius: 12px;
    background: #ffffff;
}

/* Bloques de Culqi */
.cg[data-config] .cq-methods,
.cg[data-config] .cq-webhook,
.cg[data-config] .cq-guide {
    padding: 18px 20px;
    border: 1px solid var(--cg-line);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.cg[data-config] .cq-webhook {
    background: var(--cg-soft);
}

.cg[data-config] .cq-methods-head strong,
.cg[data-config] .cq-webhook h3,
.cg[data-config] .cq-guide h3,
.cg[data-config] .cq-keys-title {
    color: var(--cg-ink);
    font-size: .95rem;
    font-weight: 800;
}

.cg[data-config] .cq-method {
    padding: 12px 0;
    border-top-color: var(--cg-line);
}

.cg[data-config] .cq-steps li::before {
    background: var(--cg-accent);
}

.cg[data-config] .cq-guide a,
.cg[data-config] .cq-webhook a {
    color: var(--cg-accent);
}

/* Métodos de pago (editor) dentro de esta página */
.cg[data-config] .cg-msummary {
    border-color: var(--cg-line);
    border-radius: 12px;
    background: var(--cg-soft);
}

.cg[data-config] .pd-item.cg-mcard {
    border-color: var(--cg-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.cg[data-config] .pd-item.cg-mcard.is-active {
    border-color: var(--cg-accent);
    box-shadow: 0 0 0 1px var(--cg-accent);
}

/* Plantillas */
.cg[data-config] .cg-tpl {
    border-color: var(--cg-line);
    border-radius: 12px;
}

/* Celular y tableta */
@media (max-width: 900px) {
    .cg[data-config] .st-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cg[data-config] .cg-nav {
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid var(--cg-line);
    }

    .cg[data-config] .cg-item.st-item {
        grid-template-columns: 18px auto 7px;
        padding: 7px 10px;
        background: #ffffff;
        box-shadow: inset 0 0 0 1px var(--cg-line);
    }

    .cg[data-config] .cg-item.is-active::before {
        display: none;
    }

    .cg[data-config] .cg-item.is-active {
        box-shadow: inset 0 0 0 1px var(--cg-accent);
    }

    .cg[data-config] .cg-head {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 18px 16px 12px;
    }

    .cg[data-config] .cg-badge {
        grid-column: 1 / -1;
        justify-self: start;
        max-width: 100%;
    }

    .cg[data-config] .pd-editor .pd-method {
        padding: 0 16px;
    }

    .cg[data-config] .pd-foot {
        margin: 6px -16px 0;
        padding: 12px 16px;
    }

    .cg[data-config] .st-grid,
    .cg[data-config] .st-row,
    .cg[data-config] .st-modes {
        grid-template-columns: minmax(0, 1fr);
    }
}