/* /Components/Admin/AdminLayout.razor.rz.scp.css */
/* ============================================================================
   Admin layout — sidebar plegable desktop + overlay mobile
   Patrón: HTML5 <details> nativo para grupos (sin JS) + JavaScript inline en el
   layout para toggle del sidebar entero + localStorage de preferencia desktop.
   Breakpoint mobile: 1024px (iPad portrait y más chico = overlay).
   ============================================================================ */

/* height:100% (no un calc con la altura de la topbar hardcodeada): .rkxt-main, en
   MainLayout.razor.css, ya mide exactamente lo que sobra del viewport (100vh menos topbar Y
   footer, vía flexbox) — duplicar esa cuenta acá con un valor fijo (62px) quedaba desactualizado
   apenas la topbar creció (el logo institucional mide 80px + padding, no los 62px originales) y
   ADEMÁS nunca descontaba el footer. Ese desfasaje hacía que la página entera terminara siendo
   más alta que el viewport y scrolleara completa — el sidebar y el título "pegado" se iban con
   el scroll en vez de quedar fijos en su panel. */
.rkxt-admin[b-rp0cbg03im] {
    display: flex;
    height: 100%;
    background: var(--rkxt-bg);
    position: relative;
    overflow: hidden;   /* el scroll lo manejan sidebar y content por separado */
}

.rkxt-admin-sidebar[b-rp0cbg03im] {
    flex: 0 0 260px;
    width: 260px;
    height: 100%;
    /* Sin overflow acá a propósito (queda "visible"): .rkxt-admin-sidebar-fold sobresale 13px del
       borde derecho (right:-13px) y necesita poder pintarse fuera de la caja. El scroll interno
       del menú vive en .rkxt-admin-sidebar-scroll (ver abajo), NO acá — si el scroll estuviera en
       este nivel, el spec de CSS fuerza overflow-x a "auto" también (no puede quedar "visible" si
       overflow-y no lo es), y esos 13px del fold aparecían como scroll HORIZONTAL con flechitas
       al pie del menú, tapado además por el footer de abajo. */
    /* Negro fijo, igual al fondo de la topbar (.rkxt-topbar en MainLayout.razor.css) — mismo
       tono que el logo institucional para que sidebar y header lean como una sola pieza. El
       texto de los links se overridea a blanco más abajo y en app.css (.rkxt-admin-link vive
       ahí porque NavLink no participa del CSS isolation). */
    background: #000;
    border-right: 1px solid var(--rkxt-border);
    display: flex;
    flex-direction: column;
    padding: 18px 16px;
    transition: margin-left 0.25s ease, transform 0.25s ease;
    z-index: 200;
    position: relative;   /* ancla el pliegue de .rkxt-admin-sidebar-fold al borde derecho */
}

/* Envuelve todo el contenido del sidebar EXCEPTO el fold (empresa-switch + nav + "ir a tienda" +
   pie) — el scroll vertical vive acá, no en .rkxt-admin-sidebar, para no arrastrar al fold (que
   sobresale del borde) dentro del mismo overflow. */
.rkxt-admin-sidebar-scroll[b-rp0cbg03im] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.rkxt-admin-content[b-rp0cbg03im] {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;   /* scroll propio del contenido */
    /* Sin padding-top: con top-padding, los elementos position:sticky top:0 (la cabecera de
       página) se pegan por DEBAJO del padding y dejan colar filas en la franja superior. El
       aire arriba lo da el padding propio del header. Laterales + bottom se mantienen. */
    padding: 0 36px 28px;
    overflow-x: auto;
    transition: padding-left 0.25s ease;
}

/* ============================================================================
   Botón hamburguesa — sticky a la izquierda arriba. Visible siempre.
   ============================================================================ */
/* 2026-08-24: top pasa de 80px a 118px. .rkxt-topbar (MainLayout.razor.css) mide 108px cuando la
   empresa tiene logo institucional cargado (img de 80px + padding 14px arriba/abajo) — con la
   hamburguesa en top:80px y el topbar en z-index:300 (más alto que sus 250), el topbar le tapaba
   los primeros 28px del ícono, dejándolo casi invisible para reabrir el sidebar. 118px la deja
   siempre debajo del topbar (con o sin logo — el caso sin logo, ~60px de alto, solo le suma aire). */
.rkxt-admin-hamburger[b-rp0cbg03im] {
    position: fixed;
    top: 118px;
    left: 12px;
    width: 36px;
    height: 36px;
    border-radius: var(--rkxt-radius-sm);
    background: var(--rkxt-surface);
    border: 1px solid var(--rkxt-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 250;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    gap: 4px;
}

.rkxt-admin-hamburger span[b-rp0cbg03im] {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--rkxt-text);
    border-radius: 2px;
}

.rkxt-admin-hamburger:hover[b-rp0cbg03im] {
    background: var(--rkxt-bg-alt);
}

/* En desktop: hamburguesa visible solo si el sidebar está plegado (= sirve para re-abrirlo). */
@media (min-width: 1025px) {
    .rkxt-admin.sidebar-collapsed-desktop .rkxt-admin-hamburger[b-rp0cbg03im] {
        display: flex;
    }
    .rkxt-admin.sidebar-collapsed-desktop .rkxt-admin-sidebar[b-rp0cbg03im] {
        margin-left: -260px;
    }
    /* 2026-08-25 (a pedido de Walter, bug ya documentado 2026-08-24 sin tocar) — con el sidebar
       plegado en desktop la hamburguesa (fixed, left:12px, 36px de ancho) quedaba flotando sobre el
       título de CUALQUIER pantalla del admin ("Samic" se leía "amic"). El caso mobile (abajo,
       @media max-width:1024px) ya le daba 56px de padding-left al contenido para esquivarla; a este
       caso —plegado manual en pantallas anchas— le faltaba la misma compensación. */
    .rkxt-admin.sidebar-collapsed-desktop .rkxt-admin-content[b-rp0cbg03im] {
        padding-left: 56px;
    }
}

/* Pliegue para ocultar el sidebar — reemplaza el botón "×" cuadrado por una lengüeta
   sutil pegada al borde derecho, mitad afuera del panel (como el doblez de una hoja).
   Visible solo cuando el sidebar está abierto (desktop expandido OR mobile overlay);
   para reabrirlo está la hamburguesa fija (.rkxt-admin-hamburger). Sin glifo de fuente
   (nada de "‹"/"×" — un triángulo dibujado con CSS, gris neutro fijo, cero naranja
   incluso en :hover/:focus, para que no dependa de ningún color de tema). */
.rkxt-admin-sidebar-fold[b-rp0cbg03im] {
    position: absolute;
    top: 50%;
    right: -13px;
    transform: translateY(-50%);
    width: 16px;
    height: 52px;
    border: 1px solid var(--rkxt-border);
    border-left: none;
    background: var(--rkxt-surface);
    border-radius: 0 var(--rkxt-radius-sm) var(--rkxt-radius-sm) 0;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    padding: 0;
    opacity: 0.75;
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
    outline: none;
}

.rkxt-admin-sidebar-fold-arrow[b-rp0cbg03im] {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 5px solid #6B6B72;
}

.rkxt-admin-sidebar-fold:hover[b-rp0cbg03im] {
    opacity: 1;
}

.rkxt-admin-sidebar-fold:hover .rkxt-admin-sidebar-fold-arrow[b-rp0cbg03im] {
    border-right-color: #26262B;
}

.rkxt-admin-sidebar-fold:focus-visible[b-rp0cbg03im] {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 2px;
}

@media (min-width: 1025px) {
    .rkxt-admin:not(.sidebar-collapsed-desktop) .rkxt-admin-sidebar-fold[b-rp0cbg03im] {
        display: flex;
    }
}

/* ============================================================================
   Backdrop — solo visible en mobile cuando el sidebar está abierto.
   ============================================================================ */
.rkxt-admin-backdrop[b-rp0cbg03im] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 180;
    display: none;
    animation: rkxtAdminBackdropFade-b-rp0cbg03im 0.18s ease;
}

@keyframes rkxtAdminBackdropFade-b-rp0cbg03im {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================================
   Mobile (≤1024px): sidebar off-canvas + hamburguesa siempre visible.
   ============================================================================ */
@media (max-width: 1024px) {
    .rkxt-admin-hamburger[b-rp0cbg03im] {
        display: flex;
    }
    .rkxt-admin-sidebar[b-rp0cbg03im] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        overflow-y: auto;   /* el menú overlay tiene su propio scroll interno */
        transform: translateX(-100%);
        box-shadow: none;
    }
    .rkxt-admin.sidebar-open .rkxt-admin-sidebar[b-rp0cbg03im] {
        transform: translateX(0);
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    }
    .rkxt-admin.sidebar-open .rkxt-admin-backdrop[b-rp0cbg03im] {
        display: block;
    }
    .rkxt-admin-sidebar-fold[b-rp0cbg03im] {
        display: flex;
    }
    .rkxt-admin-content[b-rp0cbg03im] {
        padding-left: 56px;   /* deja espacio para la hamburguesa fija */
    }
}

.rkxt-admin-empresa-switch[b-rp0cbg03im] {
    margin-bottom: 14px;
}

.rkxt-admin-nav[b-rp0cbg03im] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* .rkxt-admin-link y variantes se declaran en wwwroot/app.css global porque
   NavLink renderiza <a> sin el atributo b-{scope} y el CSS scoped no le aplica.
   Lección Rakuxt: componentes externos (NavLink, MudBlazor, etc.) no participan
   del CSS isolation. Sus estilos deben ir global o usar ::deep. */

/* Impresión (pedido inducido y futuras pantallas de impresión): oculta el chrome del admin
   propio de ESTE layout (el topbar de MainLayout se oculta en MainLayout.razor.css) y libera
   .rkxt-admin-content de su layout flex/scroll para que fluya como documento normal. */
@media print {
    .rkxt-admin-hamburger[b-rp0cbg03im],
    .rkxt-admin-backdrop[b-rp0cbg03im],
    .rkxt-admin-sidebar[b-rp0cbg03im] {
        display: none !important;
    }
    .rkxt-admin[b-rp0cbg03im] {
        display: block;
        height: auto;
        overflow: visible;
    }
    .rkxt-admin-content[b-rp0cbg03im] {
        overflow: visible;
        height: auto;
        padding: 0;
    }
}
/* /Components/Admin/Catalog/Articulos/ArticuloCategoriasEditor.razor.rz.scp.css */
.cats[b-dao1dsagm8] {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--rkxt-border, #ECE9E4);
}

.cats-head h3[b-dao1dsagm8] {
    margin: 0 0 4px;
    font-size: 1rem;
}

.cats-selected[b-dao1dsagm8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 10px;
}

.cats-chip[b-dao1dsagm8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--rkxt-border, #ECE9E4);
    border-radius: 999px;
    background: var(--rkxt-surface-2, #F5F1EB);
    font-size: .82rem;
}

/* La principal se distingue del resto: es de donde sale todo lo demas. */
.cats-chip-main[b-dao1dsagm8] {
    border-color: var(--rkxt-accent, #F59E0B);
    color: var(--rkxt-accent, #F59E0B);
    background: transparent;
    font-weight: 600;
}

.cats-chip-x[b-dao1dsagm8] {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--rkxt-text-dim, #8A8A95);
}

.cats-chip-x:hover[b-dao1dsagm8] {
    color: var(--rkxt-danger, #b91c1c);
}

.cats-buscar[b-dao1dsagm8] {
    max-width: 340px;
}

.cats-lista[b-dao1dsagm8] {
    margin-top: 10px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--rkxt-border, #ECE9E4);
    border-radius: 6px;
    padding: 6px;
}

.cats-item[b-dao1dsagm8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: .86rem;
    cursor: pointer;
}

.cats-item:hover[b-dao1dsagm8] {
    background: var(--rkxt-surface-2, #F5F1EB);
}

.cats-item-main[b-dao1dsagm8] {
    opacity: .6;
    cursor: default;
}

.cats-item-tag[b-dao1dsagm8] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rkxt-accent, #F59E0B);
}
/* /Components/Admin/Compass/Catalogo.razor.rz.scp.css */
.rkxt-cc-toolbar[b-7pcfwlt3p4] {
    margin: 1rem 0 1.25rem;
}
.rkxt-cc-tienda-select[b-7pcfwlt3p4] {
    max-width: 320px;
}

.rkxt-cc-grid[b-7pcfwlt3p4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.rkxt-cc-card[b-7pcfwlt3p4] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rkxt-border);
    border-radius: var(--rkxt-radius);
    background: var(--rkxt-surface);
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.rkxt-cc-card:hover[b-7pcfwlt3p4] {
    box-shadow: var(--rkxt-shadow-md);
    border-color: var(--rkxt-primary);
    transform: translateY(-2px);
}
.rkxt-cc-card.is-installed[b-7pcfwlt3p4] {
    border-color: var(--rkxt-primary);
}

.rkxt-cc-thumb[b-7pcfwlt3p4] {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rkxt-primary) 12%, var(--rkxt-surface)), var(--rkxt-bg-alt));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rkxt-cc-thumb img[b-7pcfwlt3p4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rkxt-cc-thumb-ph[b-7pcfwlt3p4] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--rkxt-primary);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .03em;
}

.rkxt-cc-body[b-7pcfwlt3p4] {
    padding: .75rem .85rem .25rem;
    flex: 1 1 auto;
}
.rkxt-cc-head[b-7pcfwlt3p4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.rkxt-cc-badge-ok[b-7pcfwlt3p4] {
    font-size: .68rem;
    font-weight: 600;
    color: var(--rkxt-primary);
    background: var(--rkxt-primary-soft);
    border-radius: var(--rkxt-radius-pill);
    padding: .12rem .5rem;
    white-space: nowrap;
}
.rkxt-cc-meta[b-7pcfwlt3p4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .4rem;
}
.rkxt-cc-tag[b-7pcfwlt3p4] {
    font-size: .7rem;
    background: var(--rkxt-surface-2);
    color: var(--rkxt-text-muted);
    border-radius: var(--rkxt-radius-sm);
    padding: .1rem .45rem;
}
.rkxt-cc-tag-soft[b-7pcfwlt3p4] {
    opacity: .75;
}
.rkxt-cc-ver[b-7pcfwlt3p4] {
    font-size: .7rem;
    color: var(--rkxt-text-dim);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.rkxt-cc-actions[b-7pcfwlt3p4] {
    padding: .6rem .85rem .85rem;
}
.rkxt-cc-actions .rkxt-btn[b-7pcfwlt3p4] {
    width: 100%;
}
/* /Components/Admin/Compass/PropsEditor.razor.rz.scp.css */
.rkxt-props-editor[b-wimsorx4zu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* .rkxt-color-row / .rkxt-color-swatch / .rkxt-color-hex movidas a wwwroot/app.css (global)
   para que apliquen también fuera de este componente (ej. barra Fondo del editor de diseño).
   Scoped acá NO alcanzaban a otros .razor por el CSS isolation (b-{scopeId}). */

.rkxt-icon-row[b-wimsorx4zu] {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.rkxt-icon-preview[b-wimsorx4zu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--rkxt-border);
    border-radius: var(--rkxt-radius-sm);
    color: var(--rkxt-primary);
    flex: 0 0 auto;
}

.rkxt-switch-inline[b-wimsorx4zu] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
    cursor: pointer;
    color: var(--rkxt-text);
}

/* Control "image": preview + uploader + acciones. */
.rkxt-img-control[b-wimsorx4zu] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.rkxt-img-preview[b-wimsorx4zu] {
    max-width: 200px;
    max-height: 130px;
    object-fit: cover;
    border: 1px solid var(--rkxt-border);
    border-radius: var(--rkxt-radius-sm);
    background: var(--rkxt-surface-2);
}
.rkxt-img-actions[b-wimsorx4zu] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .85rem;
}

/* El <input type=file> nativo (InputFile) es feo por default. Lo dejamos coherente con
   el resto del PropsEditor: el texto al tamaño de los demás controles y el botón
   "Elegir archivo" con la misma estética que un botón ghost (surface-2 + borde). */
.rkxt-img-actions input[type=file][b-wimsorx4zu] {
    font-size: .85rem;
    color: var(--rkxt-text-muted);
    max-width: 100%;
}
.rkxt-img-actions input[type=file][b-wimsorx4zu]::file-selector-button {
    margin-right: .5rem;
    padding: 6px 12px;
    background: var(--rkxt-surface-2);
    color: var(--rkxt-text);
    border: 1px solid var(--rkxt-border);
    border-radius: var(--rkxt-radius-sm);
    font-family: var(--rkxt-font-display);
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.rkxt-img-actions input[type=file][b-wimsorx4zu]::file-selector-button:hover {
    background: var(--rkxt-surface);
    border-color: var(--rkxt-primary);
}
.rkxt-img-actions input[type=file]:disabled[b-wimsorx4zu] {
    cursor: not-allowed;
    opacity: .6;
}
.rkxt-img-actions input[type=file]:disabled[b-wimsorx4zu]::file-selector-button {
    cursor: not-allowed;
}

/* Marca de campo requerido en el label del editor de props. */
.rkxt-req[b-wimsorx4zu] {
    color: var(--rkxt-primary);
    font-weight: 700;
}

/* Control "repeater": lista de ítems editables (ej. slides de un carrusel). */
.rkxt-repeater[b-wimsorx4zu] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.rkxt-repeater-item[b-wimsorx4zu] {
    border: 1px solid var(--rkxt-border);
    border-left: 3px solid var(--rkxt-primary);
    border-radius: var(--rkxt-radius-sm);
    background: var(--rkxt-surface);
    box-shadow: var(--rkxt-shadow-sm);
    padding: .85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Los .rkxt-field anidados de un ítem ya separan con el gap del flex: anulamos
   el margin-bottom global para que el ritmo vertical sea uniforme y no apretado. */
.rkxt-repeater-item .rkxt-field[b-wimsorx4zu] {
    margin-bottom: 0;
}

.rkxt-repeater-item-head[b-wimsorx4zu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--rkxt-border);
    padding-bottom: .5rem;
    margin-bottom: .1rem;
}
.rkxt-repeater-item-head strong[b-wimsorx4zu] {
    display: inline-flex;
    align-items: center;
    color: var(--rkxt-primary);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.rkxt-repeater-item-actions[b-wimsorx4zu] {
    display: flex;
    gap: .3rem;
}

/* Los botones ↑ ↓ del head son .rkxt-btn .rkxt-btn-xs sin modificador de color
   → el base .rkxt-btn no tiene fondo ni borde visible (R2). Les damos afford. ghost. */
.rkxt-repeater-item-actions .rkxt-btn:not(.rkxt-btn-danger)[b-wimsorx4zu] {
    background: var(--rkxt-surface-2);
    color: var(--rkxt-text);
    border: 1px solid var(--rkxt-border);
}
.rkxt-repeater-item-actions .rkxt-btn:not(.rkxt-btn-danger):hover:not(:disabled)[b-wimsorx4zu] {
    border-color: var(--rkxt-primary);
    color: var(--rkxt-primary);
}
.rkxt-repeater-item-actions .rkxt-btn:disabled[b-wimsorx4zu] {
    opacity: .45;
    cursor: not-allowed;
}
.rkxt-repeater-add[b-wimsorx4zu] {
    align-self: flex-start;
    border: 1px dashed var(--rkxt-border);
    background: transparent;
    color: var(--rkxt-text-dim);
    border-radius: var(--rkxt-radius-sm);
    padding: .5rem 1rem;
    cursor: pointer;
    font-size: .88rem;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.rkxt-repeater-add:hover[b-wimsorx4zu] {
    border-color: var(--rkxt-primary);
    color: var(--rkxt-primary);
    background: var(--rkxt-primary-soft);
}

/* Control "ajusteImagen": PREVIEW EN VIVO + grupo de sliders, layout 2 columnas en desktop.
   El contenedor + las clases de preview son propias del editor de props (solo se usan acá), por
   eso van scoped. Los sliders (.rkxt-range / .rkxt-field-range) viven en app.css GLOBAL porque
   la barra Fondo del editor de diseño los reusa (mismo motivo que .rkxt-color-row, ver nota arriba). */
.rkxt-ajuste-imagen[b-wimsorx4zu] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    border: 1px solid var(--rkxt-border);
    border-radius: var(--rkxt-radius-sm);
    background: var(--rkxt-surface-2);
    padding: .9rem 1rem;
}

/* Columna izquierda: el recuadro de vista previa + (si aplica) el slider de posición. */
.rkxt-ajuste-preview[b-wimsorx4zu] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    position: sticky;
    top: .5rem;
}

/* Recuadro de foto tipo hero (2 capas como el storefront: foto con filter + velo encima). */
.rkxt-ajuste-preview-marco[b-wimsorx4zu] {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: var(--rkxt-radius-sm);
    overflow: hidden;
    border: 1px solid var(--rkxt-border);
    background: var(--rkxt-surface);
    box-shadow: var(--rkxt-shadow-sm);
}
.rkxt-ajuste-preview-foto[b-wimsorx4zu] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    /* background-position + filter llegan inline desde el componente (live). */
}
.rkxt-ajuste-preview-velo[b-wimsorx4zu] {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
    z-index: 1;
    /* opacity llega inline (live). */
}
.rkxt-ajuste-preview-badge[b-wimsorx4zu] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(15, 15, 18, .55);
    backdrop-filter: blur(4px);
    padding: 3px 8px;
    border-radius: 999px;
}

/* Estado vacío: sin imagen hermana todavía. */
.rkxt-ajuste-preview-vacio[b-wimsorx4zu] {
    width: 100%;
    height: 240px;
    border-radius: var(--rkxt-radius-sm);
    border: 1px dashed var(--rkxt-border);
    background: var(--rkxt-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    color: var(--rkxt-text-dim);
    font-size: .85rem;
    padding: 1rem;
}
.rkxt-ajuste-preview-vacio-ico[b-wimsorx4zu] {
    color: var(--rkxt-text-muted);
    display: inline-flex;
}

/* El slider de posición vive bajo el recuadro, atado a la columna del preview. */
.rkxt-ajuste-preview-posicion[b-wimsorx4zu] {
    margin-top: .1rem;
}

/* Columna derecha: los 6 sliders + botón Restablecer. */
.rkxt-ajuste-sliders[b-wimsorx4zu] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.rkxt-ajuste-sliders > .rkxt-btn[b-wimsorx4zu] {
    align-self: flex-start;
    margin-top: .15rem;
}

/* Apilado en pantallas chicas: preview arriba, sliders abajo. El sticky se desactiva. */
@media (max-width: 720px) {
    .rkxt-ajuste-imagen[b-wimsorx4zu] {
        grid-template-columns: 1fr;
    }
    .rkxt-ajuste-preview[b-wimsorx4zu] {
        position: static;
    }
}
/* /Components/Admin/Crm/Clientes/Editar.razor.rz.scp.css */
/* Asesor de recompra (IA) — "Analizar la temporada". Copia de las reglas de
   PedidoColectorDetalle.razor.css (CSS isolation: no se heredan entre componentes). */
.rkxt-asesor-panel[b-knsyqxnnz1] {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--rkxt-border, #e5e3df);
    border-radius: 10px;
    background: var(--rkxt-bg-alt, #f4f3f1);
}

.rkxt-asesor-analisis[b-knsyqxnnz1] {
    margin: 0 0 12px;
    line-height: 1.5;
    white-space: pre-line;
}

.rkxt-asesor-tabla[b-knsyqxnnz1] { width: 100%; margin-bottom: 12px; }
.rkxt-asesor-nota[b-knsyqxnnz1] { margin: 8px 0 0; font-size: .82rem; }
/* /Components/Admin/Crm/Clientes/Index.razor.rz.scp.css */
/* Nombre del cliente en negro — el default de <a> es naranja institucional (app.css),
   acá se pidió explícitamente texto neutro en vez de link-color. */
.rkxt-cliente-nombre-link[b-tunnyazkqh],
.rkxt-cliente-nombre-link:hover[b-tunnyazkqh] {
    color: var(--rkxt-text);
}

/* Cabecera de esta grilla + texto blanco (a pedido, solo esta pantalla — el resto de las
   tablas del admin siguen con el thead crema default de app.css). Antes era verde inglés
   hardcodeado; 2026-08-06 pasa a borravino, el mismo acento que el resto de los botones del
   admin (--rkxt-admin-primary, ver app.css) para que quede consistente en toda la pantalla. */
.rkxt-table thead th[b-tunnyazkqh] {
    background: var(--rkxt-admin-primary);
    color: #fff;
}

/* Botón OK del buscador: mismo borravino que la cabecera de la tabla. */
.rkxt-cliente-btn-ok[b-tunnyazkqh] {
    background: var(--rkxt-admin-primary);
    border-color: var(--rkxt-admin-primary);
    color: #fff;
}

.rkxt-cliente-btn-ok:hover:not(:disabled)[b-tunnyazkqh] {
    background: var(--rkxt-admin-primary-hover);
    border-color: var(--rkxt-admin-primary-hover);
}

/* Buscador al doble del ancho default de .rkxt-field-inline (220px → 440px). */
.rkxt-cliente-busqueda[b-tunnyazkqh] {
    min-width: 440px;
}

/* .rkxt-field trae margin-bottom:16px (pensado para forms apilados) — dentro de la filterbar,
   con align-items:flex-end, ese margen hacía que el botón OK quedara 16px más abajo que el
   renglón del buscador. Sacándolo, ambos quedan a la misma altura. */
.rkxt-filterbar .rkxt-field[b-tunnyazkqh] {
    margin-bottom: 0;
}

/* Sin el label "Buscar" arriba y con menos padding, el renglón queda más pegado al título. */
.rkxt-filterbar[b-tunnyazkqh] {
    padding-top: 2px;
}

/* Fila clickeable entera → ficha del cliente. Patrón "stretched link": el <a> real (navegación
   nativa, no @onclick de Blazor) se estira con un ::after absoluto sobre TODA la fila. .rkxt-tr
   es el containing block (position:relative) porque ningún <td> tiene position propio. */
.rkxt-cliente-fila[b-tunnyazkqh] {
    position: relative;
    cursor: pointer;
}

.rkxt-cliente-nombre-link[b-tunnyazkqh]::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* /Components/Admin/Crm/Clientes/PedidoColectorDetalle.razor.rz.scp.css */
/* Detalle de un pedido del Colector (compras reales del showroom). Molde: PedidoRecompra.razor.css
   (mismo layout header-con-donuts + grid 2 columnas + aside sticky), adaptado a DOS métricas
   (Unidades e Importe) apiladas en el mismo aside en vez de una sola. */

.rkxt-pcd-back[b-250ap1zto1] {
    color: var(--rkxt-text);
    font-weight: 600;
    white-space: nowrap;
}

/* 2026-08-26 (a pedido de Walter) — "← Volver" + nombre del cliente en la MISMA línea (antes el
   volver ocupaba su propio renglón abajo de todo, achicando el header sin necesidad). */
.rkxt-pcd-clientelinea[b-250ap1zto1] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
}
.rkxt-pcd-clientelinea h1[b-250ap1zto1] { margin: 0; }

/* Header: info del pedido · donuts chicos por marca (Unidades + Importe). Rediseño 2026-08-24 (c):
   alineado arriba (no centrado) para que headinfo/botones/donuts arranquen todos contra el mismo
   "techo" — antes con align-items:center el header se centraba y, al crecer headinfo con más
   renglones, los botones quedaban corridos hacia el medio en vez de parejos arriba. */
/* 2026-08-25 (a pedido de Walter) — CUARTO intento, el que quedó. Los tres anteriores (aside con
   margin-top negativo, header con position:absolute) intentaban CALCULAR dónde tenían que caer los
   donuts. Este no calcula nada: el header pasa a vivir DENTRO de .rkxt-pcd-main, que es la primera
   columna del MISMO grid que ya usan la tabla y el aside (ver .rkxt-pcd-layout más abajo) — el
   aside (donuts + categorías + barras) es la segunda columna, mide su propio contenido y arranca
   en el borde de arriba del grid, nunca detrás del header. */
.rkxt-pcd-header[b-250ap1zto1] {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
}
.rkxt-pcd-headinfo[b-250ap1zto1] { flex: 1 1 auto; min-width: 0; }
.rkxt-pcd-headinfo h1[b-250ap1zto1] { margin: 0; }
.rkxt-pcd-headinfo p[b-250ap1zto1] { margin: 4px 0 0; }

/* El cliente pasa a ser el dato importante (negrita, tamaño que antes tenía el h1 — hereda
   font-size de .rkxt-admin-page-header h1, acá solo se fuerza el peso). 2026-08-26: "← Volver"
   vive ahora en la misma línea (.rkxt-pcd-clientelinea, arriba), ya no en renglón propio. */
.rkxt-pcd-cliente[b-250ap1zto1] { font-weight: 700; }

/* Rediseño 2026-08-24 (c): debajo del cliente, un renglón por campo (Pedido/Fecha/Importe/
   Unidades/Estado), en ESE orden. Etiqueta y valor comparten tamaño y peso a propósito — "misma
   tipografía", solo cambia el contenido — así ningún dato se ve más chico/gris que su etiqueta. */
.rkxt-pcd-campo[b-250ap1zto1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    font-weight: 600;
}
.rkxt-pcd-campo-label[b-250ap1zto1],
.rkxt-pcd-campo-valor[b-250ap1zto1] {
    font-size: inherit;
    font-weight: inherit;
    color: var(--rkxt-text);
}
.rkxt-pcd-campo-label[b-250ap1zto1]::after { content: ":"; }
select.rkxt-pcd-campo-valor.rkxt-pcd-estado-select[b-250ap1zto1] { width: auto; min-width: 170px; padding: 4px 8px; }

/* 2026-08-25 — variante de .rkxt-pcd-campo para los 5 campos EN UNA LÍNEA (con "·" de separador),
   en vez de un <p> por campo. gap con wrap para que en pantallas angostas el renglón se parta solo
   en vez de desbordar. */
.rkxt-pcd-campos-linea[b-250ap1zto1] { flex-wrap: wrap; row-gap: 4px; }
.rkxt-pcd-campo-sep[b-250ap1zto1] { color: var(--rkxt-text-muted); }

/* Los botones, agrupados (ver el .razor). Wrapean ENTRE ELLOS: en una notebook pasan a 2x2 y le
   dejan la linea a los donuts, en vez de ocupar 772px y expulsarlos. */
/* ⚠️ 2026-08-26 (causa real del bug Chrome/Firefox, encontrada con Walter probando en vivo) — este
   div es a su vez un ITEM flex de `.rkxt-pcd-header` (junto a `.rkxt-pcd-headinfo`, el bloque de
   título/Pedido/Estado). Con `flex:0 1 auto` (el default), cuando no entra al lado del título y baja
   a su propia línea, su ANCHO en esa línea sigue siendo "auto" — el navegador tiene que calcularlo a
   partir del tamaño natural de sus propios hijos (los botones + la barra de escaneo), otro caso de
   la misma ambigüedad de flex anidado que ya vimos en `.rkxt-pcd-scanbar`, un nivel más arriba. Eso
   explica la "pared angosta" que Walter encontró en Chrome: no es que falte espacio en la fila, es
   que el navegador le da un ancho MENOR al que realmente hay disponible porque lo calcula de forma
   ambigua, y Chrome y Firefox no llegan al mismo número. Fix: `flex:1 1 100%` — le pide ocupar TODO
   el ancho disponible de esa línea (deterministico, ninguna cuenta ambigua), así el wrap interno de
   los botones/escaneo trabaja con el ancho real y no con una estimación que difiere por navegador. */
.rkxt-pcd-headacciones[b-250ap1zto1] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
    flex: 1 1 100%;
}

/* ⚠⚠ 2026-08-24 — SIN `margin-left: auto` y con los donuts FLUIDOS.
   Con el auto + 288px fijos por donut pasaban dos cosas, las dos reportadas por Walter:
   · monitor grande: los donuts se iban al borde derecho y quedaba una franja blanca enorme entre
     los botones y ellos (el auto empuja hasta el extremo, no reparte);
   · notebook: 600px de donuts no entraban en la linea, wrapeaban a una franja propia y el auto los
     dejaba de nuevo contra la derecha — media pantalla en blanco y la grilla empujada hacia abajo.
   Ahora `flex: 1 1 320px` los hace crecer para LLENAR el hueco cuando sobra, y encogerse antes de
   wrapear cuando falta. Si igual tienen que bajar de linea, ocupan todo el ancho y quedan centrados
   (no pegados a un borde), asi que no hay franja vacia en ningun tamano. */
/* 2026-08-25 — donuts arriba del todo DENTRO del aside (misma columna que categorías+barras, ver
   .rkxt-pcd-layout más abajo) — no en el header. Como el aside es una columna de grid aparte, su
   alto nunca compite con .rkxt-pcd-main (donde vive el header ahora). */
.rkxt-pcd-headdonuts[b-250ap1zto1] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 14px;
}
/* Cada donut se lleva la mitad de lo que haya, con 190px de tope. El alto sale del aspect-ratio
   para conservar la proporcion 288x185 en cualquier ancho. */
.rkxt-pcd-hd-col[b-250ap1zto1] { text-align: center; flex: 1 1 0; min-width: 0; max-width: 190px; }
.rkxt-pcd-hd-title[b-250ap1zto1] {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--rkxt-text-muted, #6b6b76);
    margin-bottom: 2px;
}
/* Rediseño 2026-08-24 (c): +20% (154×240 → 185×288) — la leyenda no se toca (legendFont/legendPad/
   legendBox fijos en px desde el .razor), así que el espacio de más lo gana el anillo del donut. */
.rkxt-pcd-hd-wrap[b-250ap1zto1] {
    position: relative;
    width: 100%;
    aspect-ratio: 288 / 185;
    height: auto;
}

/* Rediseño 2026-08-24 (c): los 3 botones del header (Guardar cambios/Proforma/Eliminar pedido)
   comparten ancho y alto fijos — antes ".rkxt-btn-inline" los dejaba en width:auto y cada uno
   quedaba del ancho de su propio texto. */
/* Ancho parejo entre ellos (era el objetivo del 172px fijo) pero capaz de achicarse cuando la
   pantalla no da: `flex-basis` en vez de `width`, con un piso para que no se aplasten.
   2026-08-25 (a pedido de Walter, "hacé los botones más chicos así entran en una sola línea") —
   172px×3 + gaps no entraba en el ancho real que le queda al admin en una notebook (sidebar+padding
   se comen ~332px). Bajado a 108px de base / 84px de piso, 32px de alto en vez de 40, y el gap de
   la fila (.rkxt-pcd-headacciones) de 12 a 8 — con eso "Guardar cambios/Proforma/Eliminar pedido"
   entran juntos en una sola línea en vez de partirse en dos. */
/* 2026-08-26 (a pedido de Walter, "hace la letra un poco más chica así los botones pueden ser más
   angostos y darle lugar a todos, están muy encimados") — con 5 botones posibles en la fila (Guardar
   cambios/Modificar Pedido/Proforma/Eliminar pedido/Ver modificaciones) + la barra de escaneo, letra
   más chica (.8rem → .72rem) deja angostar la base de 108px a 88px sin recortar ningún texto. */
.rkxt-pcd-headbtn[b-250ap1zto1] {
    flex: 0 1 88px;
    min-width: 72px;
    height: 32px;
    padding: 0 6px;
    font-size: .72rem;
    white-space: nowrap;
}

/* Cuerpo: grilla de detalle (izq) + barras por categoría (der, sticky). Aside ensanchado 2026-08-06
   (480px → 600px, ~20% menos para la grilla) para que las barras entren más grandes y sean
   clickeables como filtro incluso con muchas categorías — ver altura dinámica en el .razor. */
.rkxt-pcd-layout[b-250ap1zto1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 600px;
    gap: 20px;
    align-items: start;
}
.rkxt-pcd-main[b-250ap1zto1] { min-width: 0; }

/* Grilla del pedido. */
.rkxt-pcd-gridhead[b-250ap1zto1] { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rkxt-pcd-tabla[b-250ap1zto1] { width: 100%; }

/* Nota "no editable" (facturado / con entregas / estado no editable) — mismo tono que EditarPedido.razor. */
.rkxt-pcd-nota-editable[b-250ap1zto1] { margin: 4px 0 12px; }

/* ===================== Edición RKXT (2026-08-10) — molde PedidoRecompra.razor.css ===================== */

/* Barra de escaneo/alta rápida por código, pegada al margen izquierdo, justo encima de la grilla. */
/* 2026-08-25 (a pedido de Walter) — se mudó de renglón propio (debajo del header) a vivir DENTRO de
   .rkxt-pcd-headacciones, junto a los demás botones (al final), sin margin-bottom (era para
   separarse de la grilla de abajo cuando tenía su propio renglón).
   ⚠️ `flex-wrap: nowrap` es a propósito: con `wrap`, el input y el botón OK se partían en DOS
   renglones distintos (el input entraba en la fila de arriba, el OK quedaba solo, más abajo) en vez
   de bajar los dos juntos — porque .rkxt-pcd-scanbar es en sí mismo un contenedor flex con su propio
   wrap interno, y ESE wrap ganaba antes de que el conjunto completo decidiera bajar de línea en el
   contenedor padre (.rkxt-pcd-headacciones). Con nowrap, el span entero se mueve como una unidad. */
/* ⚠️ 2026-08-26 (reportado por Walter, con capturas Firefox/Chrome a igual resolución Y a igual
   escalado de Windows 100% — la teoría del 25/08 de abajo quedó descartada): en Chrome este span se
   caía a una línea propia con ~730px de espacio LIBRE de sobra en la fila de arriba (medido recortando
   las capturas), o sea que NO era un problema real de espacio. Causa: `.rkxt-pcd-scanbar` no tenía
   ancho propio — al ser `display:inline-flex` SIN flex-basis fijo, su tamaño para la fila que envuelve
   (`.rkxt-pcd-headacciones`) se resuelve como flex-basis:auto, que exige calcular el tamaño intrínseco
   de un flex container ANIDADO (input + botón OK). Chrome y Firefox no miden igual esa cuenta interna
   (min/max-content de un `<input>` dentro de un flex anidado es zona gris de la spec, con bugs de larga
   data en Chromium) y terminaron dando un resultado distinto pese al MISMO HTML/CSS. Fix: sacarle la
   ambigüedad dándole un ancho FIJO al span (grow:0 shrink:0, sin auto) — deja de depender de que los
   navegadores midan igual el contenido interno. */
/* 2026-08-26 — probamos `margin-left:auto` acá como diagnóstico (separarlo del cluster de botones
   para ver si Chrome lo aceptaba en la misma línea estando lejos): confirmó que en Chrome la "pared"
   de esa fila estaba mucho antes de lo esperado — la causa real era `.rkxt-pcd-headacciones` (ver su
   comentario más arriba), no la vecindad con los otros botones. Con esa causa arreglada, el margin ya
   no hace falta — se saca para que la barra de escaneo quede pegada al resto de los botones, como
   antes de la prueba. */
/* 2026-08-26 (a pedido de Walter) — input +25% (150px -> 188px). El ancho fijo del span se corre en
   la misma medida (260 -> 300px) para que le siga sobrando margen con el input más ancho. */
/* 2026-08-26 (a pedido de Walter) — el input quedaba más alto que los botones (heredaba el padding
   vertical grande de .rkxt-input) y corrido al mismo margen de los botones. Se lo empareja a los 32px
   de .rkxt-pcd-headbtn con su propio padding (el de .rkxt-input no entra en 32px) y se lo corre al
   borde derecho de la fila con margin-left:auto — separado del resto, como pidió antes de la prueba
   de diagnóstico del 26/08 (esta vez es a propósito, no un test). */
.rkxt-pcd-scanbar[b-250ap1zto1] { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 0 0 330px; margin-left: auto; }
.rkxt-pcd-scaninput[b-250ap1zto1] { width: 220px; height: 32px; padding: 0 10px; }
.rkxt-pcd-scanmsg[b-250ap1zto1] { font-size: .78rem; max-width: 260px; }
.rkxt-pcd-scanmsg-ok[b-250ap1zto1] { color: var(--rkxt-success, #2e7d32); }
.rkxt-pcd-scanmsg-error[b-250ap1zto1] { color: var(--rkxt-danger, #c62828); }

/* "Quitar Marca" / "Quitar Categoría" — empujados al borde derecho del header de la grilla. */
.rkxt-pcd-gridhead-actions[b-250ap1zto1] { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.rkxt-pcd-quitar-wrap[b-250ap1zto1] { position: relative; }
.rkxt-pcd-quitar-panel[b-250ap1zto1] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--rkxt-bg, #fff);
    border: 1px solid var(--rkxt-border, #e2e0dc);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    white-space: nowrap;
    z-index: 6;
}
.rkxt-pcd-quitar-panel select.rkxt-input[b-250ap1zto1] { width: 180px; }

/* Botones "Quitar Marca/Categoría" — outline sutil con el acento borravino del admin. */
.rkxt-pcd-btn-quitar[b-250ap1zto1] {
    width: auto;
    padding: 6px 10px;
    font-size: .64rem;
    background: transparent;
    color: var(--rkxt-admin-primary, #7A1F3D);
    border: 1px solid var(--rkxt-admin-primary, #7A1F3D);
}
.rkxt-pcd-btn-quitar:hover:not(:disabled)[b-250ap1zto1] {
    background: var(--rkxt-admin-primary, #7A1F3D);
    color: #fff;
}
.rkxt-pcd-btn-quitar:disabled[b-250ap1zto1] { opacity: .5; cursor: not-allowed; }

/* Input de cantidad + columna de acciones (✕/🗑) de la tabla editable. */
.rkxt-pcd-cant[b-250ap1zto1] { width: 70px; text-align: right; padding: 2px 6px; }
.rkxt-pcd-rowacciones[b-250ap1zto1] { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.rkxt-pcd-rowacciones .rkxt-pcd-chip-x[b-250ap1zto1] { font-size: 1rem; }

/* Regla Rakuxt: toda tabla consultable con thead sticky. La grilla de detalle puede ser larga
   (un pedido con todo el catálogo), así que el encabezado queda fijo al scrollear. Borravino del
   admin (2026-08-10, corrigiendo que esta pantalla se había quedado afuera de la pasada de
   identidad visual borravino de 2026-08-07) — mismo acento que .rkxt-pr-tabla/.rkxt-ed-tabla. */
.rkxt-pcd-tabla thead th[b-250ap1zto1] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--rkxt-admin-primary, #7A1F3D);
    color: #fff;
}

/* Código de artículo en monospace para que alineen los SKU. */
.rkxt-pcd-cod[b-250ap1zto1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}

/* Chip de filtro activo (categoría) en el header de la grilla. */
.rkxt-pcd-chip[b-250ap1zto1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    background: var(--rkxt-bg-alt, #f4f3f1);
    border-radius: 999px;
    padding: 2px 10px;
}
.rkxt-pcd-chip-x[b-250ap1zto1] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--rkxt-text-muted, #6b6b76);
    font-size: .9rem;
    line-height: 1;
    padding: 0 2px;
}

/* Barras por categoría a la derecha (sticky). Unidades arriba, Importe abajo. */
.rkxt-pcd-side[b-250ap1zto1] {
    position: sticky;
    top: 12px;
    min-width: 0;
}
.rkxt-pcd-sidehead[b-250ap1zto1] { display: flex; align-items: center; gap: 8px; }
.rkxt-pcd-hint[b-250ap1zto1] { margin: 2px 0 10px; font-size: .78rem; }
.rkxt-pcd-barblock[b-250ap1zto1] { margin-bottom: 18px; }
.rkxt-pcd-barblock:last-child[b-250ap1zto1] { margin-bottom: 0; }
/* Alto en `style` inline por cantidad de categorías (ver .razor) — position acá nomás. */
.rkxt-pcd-bars[b-250ap1zto1] { position: relative; }

/* 2026-08-25 (a pedido de Walter) — el corte estaba en 1100px de VENTANA, pero acá adentro del admin
   el sidebar (260px) + el padding del contenido (72px) se comen ~332px antes de llegar a esta grilla:
   una notebook de 1280px de ventana (caso reportado: 15", 1280x1024) le deja a esta página solo
   ~948px reales, bien por debajo de lo que el aside fijo de 600px necesita para convivir con una
   tabla de 7 columnas sin apretarla. El corte real tiene que calcularse sobre el ancho de VENTANA
   equivalente a esos ~948px de contenido, no sobre el ancho de contenido en sí — de ahí el salto a
   1500px (≈ 948 + 332 + margen). Por debajo de eso apila (tabla arriba a todo el ancho, barras
   debajo) en vez de repartir un aside de 600px fijo contra lo que sobre. */
@media (max-width: 1500px) {
    .rkxt-pcd-layout[b-250ap1zto1] { grid-template-columns: 1fr; }
    .rkxt-pcd-side[b-250ap1zto1] { position: static; }
}

/* Asesor de recompra (IA). */
.rkxt-asesor-panel[b-250ap1zto1] {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--rkxt-border, #e5e3df);
    border-radius: 10px;
    background: var(--rkxt-bg-alt, #f4f3f1);
}

.rkxt-asesor-analisis[b-250ap1zto1] {
    margin: 0 0 12px;
    line-height: 1.5;
    white-space: pre-line;
}

.rkxt-asesor-tabla[b-250ap1zto1] { width: 100%; margin-bottom: 12px; }
.rkxt-asesor-nota[b-250ap1zto1] { margin: 8px 0 0; font-size: .82rem; }
/* /Components/Admin/Crm/Clientes/PedidoInducidoImprimir.razor.rz.scp.css */
.rkxt-pii-toolbar[b-n9c48ahv1x] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

/* Un reporte por marca — cada uno arranca en hoja nueva al imprimir (menos el primero). */
.rkxt-pii-marca + .rkxt-pii-marca[b-n9c48ahv1x] {
    page-break-before: always;
    margin-top: 40px;
}

.rkxt-pii-marca-header h1[b-n9c48ahv1x] {
    margin: 0 0 4px;
    font-size: 1.4rem;
}
.rkxt-pii-marca-header p[b-n9c48ahv1x] {
    margin: 0 0 20px;
    color: var(--rkxt-text-muted, #6b6b76);
}

.rkxt-pii-categoria[b-n9c48ahv1x] { margin-bottom: 24px; }
.rkxt-pii-categoria h2[b-n9c48ahv1x] {
    font-size: 1.05rem;
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--rkxt-border, #e5e3df);
}

/* Sin valorizar a propósito (código/descripción/cantidad/categoría nomás) — ver DOC10. */
.rkxt-pii-tabla[b-n9c48ahv1x] { width: 100%; border-collapse: collapse; }
.rkxt-pii-tabla th[b-n9c48ahv1x],
.rkxt-pii-tabla td[b-n9c48ahv1x] {
    padding: 4px 8px;
    border-bottom: 1px solid var(--rkxt-border, #e5e3df);
    font-size: 0.85rem;
    text-align: left;
}
.rkxt-pii-prenda-row td[b-n9c48ahv1x] {
    background: var(--rkxt-bg-alt, #f4f3f1);
    padding-top: 8px;
}
.rkxt-pii-cod[b-n9c48ahv1x] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}
.rkxt-pii-total[b-n9c48ahv1x] {
    text-align: right;
    margin-top: 8px;
    font-size: 0.95rem;
}

@media print {
    .rkxt-no-print[b-n9c48ahv1x] { display: none !important; }
}
/* /Components/Admin/Crm/Clientes/PedidoInducidoResumen.razor.rz.scp.css */
.rkxt-pir-acciones[b-2kc136tt59] {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

/* Grilla de "condiciones del cliente" — más angosta que el ancho completo del área de contenido. */
.rkxt-table[b-2kc136tt59] {
    width: 50%;
    min-width: 420px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.rkxt-app[b-nqitsl362f] {
    /* height fija (no min-height): con min-height la página podía crecer más que el viewport si
       el contenido de adentro se desbordaba, y entonces TODO (topbar, sidebar, título) scrolleaba
       con la página entera en vez de quedar contenido en su propio panel — el sidebar "desaparecía"
       al bajar. Con height fija + overflow:hidden acá, el único que scrollea es el panel interno
       de contenido (.rkxt-admin-content, overflow-y:auto en AdminLayout.razor.css). */
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--rkxt-bg);
    overflow: hidden;
}

/* ----- Topbar ----- */
/* Fondo negro fijo (no var de tema): funde con el fondo negro sólido del logo institucional
   (Empresa.LogoUrl) que se apoya acá. Por eso el texto/links de la nav de al lado se overridean
   a claro más abajo — quedarían ilegibles con los colores de tema pensados para barra clara. */
.rkxt-topbar[b-nqitsl362f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    border-bottom: none;   /* --rkxt-border (claro) quedaba como línea blanca en la unión con el sidebar, negro también */
    background: #000;
    position: sticky;
    top: 0;
    /* 300: por encima de TODO lo del admin que también es sticky/fixed (page-header 30, backdrop
       180, sidebar 200, hamburguesa 250) — si no, al scrollear una página larga el zócalo blanco
       del título o el sidebar terminan tapando el header con el logo institucional. */
    z-index: 300;
    backdrop-filter: saturate(140%) blur(8px);
}

.rkxt-brand[b-nqitsl362f] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-family: var(--rkxt-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.rkxt-brand:hover[b-nqitsl362f] {
    color: #fff;
}

.rkxt-brand-mark[b-nqitsl362f] {
    width: 32px;
    height: 32px;
    border-radius: var(--rkxt-radius-sm);
    background: var(--rkxt-grad-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: var(--rkxt-shadow-md);
}

.rkxt-brand-name[b-nqitsl362f] {
    font-size: 1.05rem;
}

/* Logo institucional de la empresa (Empresa.LogoUrl) — reemplaza la marca "R"+"Rakuxt" cuando
   hay sesión y la empresa tiene logo cargado. object-fit:contain evita que logos con
   proporciones distintas se deformen. El fondo negro del archivo funde directo con el fondo
   negro de .rkxt-topbar (ver arriba), sin placa propia. */
.rkxt-brand-logo[b-nqitsl362f] {
    display: block;
    height: 80px;
    max-height: 80px;
    width: auto;
    max-width: 450px;
    object-fit: contain;
}

.rkxt-topbar-nav[b-nqitsl362f] {
    display: flex;
    gap: 18px;
    align-items: center;
}

.rkxt-link-mute[b-nqitsl362f] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
    font-weight: 500;
}

.rkxt-link-mute:hover[b-nqitsl362f] {
    color: #fff;
}

.rkxt-logout-form[b-nqitsl362f] {
    display: inline;
    margin: 0;
}

.rkxt-logout-btn[b-nqitsl362f] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
}

/* ----- Main ----- */
.rkxt-main[b-nqitsl362f] {
    flex: 1;
    width: 100%;
    /* min-height:0 pisa el default de flexbox (min-height:auto), que NO deja angostar un flex
       item por debajo del tamaño de su contenido — sin esto, .rkxt-admin de adentro (con su
       height:calc(100dvh - topbarH) propio) podía forzar a .rkxt-main a crecer más de lo
       disponible, empujando el overflow hacia la página entera en vez de quedar contenido acá. */
    min-height: 0;
    overflow: hidden;
}

/* ----- Footer ----- */
/* padding vertical mínimo (no 22px): con height:100vh + flexbox, .rkxt-main mide exactamente lo
   que sobra entre topbar y footer, así que un footer más alto que su única línea de texto le
   robaba ese espacio real al sidebar/contenido de abajo — el menú quedaba con menos alto útil
   y su último ítem terminaba pegado/tapado por el zócalo. Alto justo para la leyenda y nada más. */
.rkxt-footer[b-nqitsl362f] {
    padding: 8px 32px;
    border-top: 1px solid var(--rkxt-border);
    color: var(--rkxt-text-dim);
    font-size: 0.82rem;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: var(--rkxt-bg-alt);
}

.rkxt-footer-dot[b-nqitsl362f] {
    opacity: 0.5;
}

/* Cuando hay sidebar admin (AdminLayout, 260px fijos), el footer no ocupa esa columna — decidido
   por ruta en el @code de este mismo componente (MainLayout.EsAdmin), no por CSS :has() cruzando
   scopes (resultó frágil en la práctica: no se aplicaba de forma confiable). */
.rkxt-footer-admin[b-nqitsl362f] {
    margin-left: 260px;
}
@media (max-width: 1024px) {
    /* Sidebar mobile es overlay (position:fixed, off-canvas) — no ocupa columna real. */
    .rkxt-footer-admin[b-nqitsl362f] {
        margin-left: 0;
    }
}

/* Impresión (pedido inducido y futuras pantallas de impresión): oculta topbar/footer propios de
   este layout y libera .rkxt-app/.rkxt-main de su altura fija — el resto del chrome (sidebar
   admin) se oculta en AdminLayout.razor.css. */
@media print {
    .rkxt-topbar[b-nqitsl362f],
    .rkxt-footer[b-nqitsl362f] {
        display: none !important;
    }
    .rkxt-app[b-nqitsl362f] {
        height: auto;
        overflow: visible;
    }
    .rkxt-main[b-nqitsl362f] {
        height: auto;
        overflow: visible;
    }
}
/* /Components/Layout/PrintLayout.razor.rz.scp.css */
.rkxt-print-shell[b-09wvv3o8qg] {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 28px 64px;
    background: var(--rkxt-bg);
    color: var(--rkxt-text);
    font-family: var(--rkxt-font-body);
    min-height: 100vh;
}

@media print {
    .rkxt-print-shell[b-09wvv3o8qg] {
        max-width: none;
        margin: 0;
        padding: 0;
        min-height: 0;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-e9n7elysfg],
.components-reconnect-repeated-attempt-visible[b-e9n7elysfg],
.components-reconnect-failed-visible[b-e9n7elysfg],
.components-pause-visible[b-e9n7elysfg],
.components-resume-failed-visible[b-e9n7elysfg],
.components-rejoining-animation[b-e9n7elysfg] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-e9n7elysfg],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-e9n7elysfg],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-e9n7elysfg],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-e9n7elysfg],
#components-reconnect-modal.components-reconnect-retrying[b-e9n7elysfg],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-e9n7elysfg],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-e9n7elysfg],
#components-reconnect-modal.components-reconnect-failed[b-e9n7elysfg],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-e9n7elysfg] {
    display: block;
}


#components-reconnect-modal[b-e9n7elysfg] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-e9n7elysfg 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-e9n7elysfg 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-e9n7elysfg 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-e9n7elysfg]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-e9n7elysfg 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-e9n7elysfg {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-e9n7elysfg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-e9n7elysfg {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-e9n7elysfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-e9n7elysfg] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-e9n7elysfg] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-e9n7elysfg] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-e9n7elysfg] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-e9n7elysfg] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-e9n7elysfg] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-e9n7elysfg 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-e9n7elysfg] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-e9n7elysfg {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */

.rkxt-hero[b-xfieplrt8l] {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 32px;
    background:
        radial-gradient(900px 500px at 80% -100px, rgba(139, 92, 246, 0.16), transparent 60%),
        radial-gradient(700px 400px at -10% 110%, rgba(99, 102, 241, 0.12), transparent 60%),
        var(--rkxt-bg);
}

.rkxt-hero-inner[b-xfieplrt8l] {
    max-width: 920px;
    width: 100%;
    text-align: center;
}

.rkxt-hero-badge[b-xfieplrt8l] {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--rkxt-radius-pill);
    background: var(--rkxt-primary-soft);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--rkxt-primary-hover);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.rkxt-hero-title[b-xfieplrt8l] {
    font-size: clamp(3.4rem, 7vw, 5.6rem);
    margin: 0 0 22px 0;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.rkxt-hero-grad[b-xfieplrt8l] {
    background: var(--rkxt-grad-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rkxt-hero-lead[b-xfieplrt8l] {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--rkxt-text-muted);
    max-width: 640px;
    margin: 0 auto 48px auto;
    line-height: 1.65;
}

.rkxt-hero-lead strong[b-xfieplrt8l] {
    color: var(--rkxt-text);
    font-weight: 600;
}

/* ----- Status grid ----- */
.rkxt-status-grid[b-xfieplrt8l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0 auto 48px auto;
    max-width: 820px;
}

@media (max-width: 720px) {
    .rkxt-status-grid[b-xfieplrt8l] {
        grid-template-columns: 1fr 1fr;
    }
}

.rkxt-status-card[b-xfieplrt8l] {
    background: var(--rkxt-surface);
    border: 1px solid var(--rkxt-border);
    border-radius: var(--rkxt-radius);
    padding: 16px 18px;
    text-align: left;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.rkxt-status-card:hover[b-xfieplrt8l] {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.rkxt-status-label[b-xfieplrt8l] {
    font-size: 0.7rem;
    color: var(--rkxt-text-dim);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.rkxt-status-value[b-xfieplrt8l] {
    color: var(--rkxt-text);
    font-size: 0.92rem;
    font-weight: 500;
}

/* ----- Scope card (sesión activa) ----- */
.rkxt-scope-card[b-xfieplrt8l] {
    max-width: 820px;
    margin: 0 auto 32px auto;
    text-align: left;
    background: var(--rkxt-primary-soft);
    border: 1px solid rgba(99, 102, 241, 0.4);
}

.rkxt-scope-grid[b-xfieplrt8l] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
    color: var(--rkxt-text);
    font-size: 0.88rem;
}

.rkxt-scope-grid strong[b-xfieplrt8l] {
    color: var(--rkxt-primary-hover);
    font-weight: 600;
    margin-right: 6px;
}

.rkxt-hero-meta code[b-xfieplrt8l] {
    background: var(--rkxt-surface-2);
    border: 1px solid var(--rkxt-border-soft);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.82rem;
}

/* ----- Footer-ish meta below grid ----- */
.rkxt-hero-meta[b-xfieplrt8l] {
    color: var(--rkxt-text-dim);
    font-size: 0.85rem;
    margin-top: 8px;
}
/* /Components/Storefront/Componentes/Button.razor.rz.scp.css */
.rkxt-sf-cbtn-wrap[b-46umsb036w] {
    margin: 1.25rem 0;
}
.rkxt-sf-cbtn-wrap.is-full[b-46umsb036w] {
    width: 100%;
}

.rkxt-sf-cbtn[b-46umsb036w] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--cbtn-bg);
    color: var(--cbtn-fg);
    border: none;
    border-radius: var(--rkxt-sf-radius, var(--rkxt-radius-sm));
    font-family: var(--rkxt-font-body);
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s ease, transform .05s ease;
}
.rkxt-sf-cbtn:hover[b-46umsb036w] { filter: brightness(1.07); }
.rkxt-sf-cbtn:active[b-46umsb036w] { transform: translateY(1px); }
.rkxt-sf-cbtn.is-full[b-46umsb036w] { width: 100%; justify-content: center; }

.rkxt-sf-cbtn-sm[b-46umsb036w] { padding: .4rem .8rem; font-size: .85rem; }
.rkxt-sf-cbtn-md[b-46umsb036w] { padding: .6rem 1.2rem; font-size: 1rem; }
.rkxt-sf-cbtn-lg[b-46umsb036w] { padding: .85rem 1.8rem; font-size: 1.15rem; }

.rkxt-sf-cbtn svg[b-46umsb036w] { flex: 0 0 auto; }

/* Tanda 2 — celular: garantizar área táctil cómoda (~44px) en los tamaños chicos, que con su
   padding quedan por debajo del mínimo recomendado para el dedo. No toca desktop. */
@media (max-width: 520px) {
    .rkxt-sf-cbtn-sm[b-46umsb036w] { min-height: 40px; }
    .rkxt-sf-cbtn-md[b-46umsb036w],
    .rkxt-sf-cbtn-lg[b-46umsb036w] { min-height: 44px; }
}
/* /Components/Storefront/Componentes/CarruselTarjetas.razor.rz.scp.css */
/* CarruselTarjetas: accesos editoriales (imagen + label + link). Carrusel scroll-snap con N
   visibles, o grilla. Foto en 2 capas (background + velo), label debajo. Tokens --rkxt-*. */
.rkxt-sf-ct[b-dh47cxsstz] {
    margin: 2rem 0;
}
.rkxt-sf-ct-titulo[b-dh47cxsstz] {
    text-align: center;
    margin: 0 0 1.25rem;
    font-family: var(--rkxt-font-display, inherit);
}
.rkxt-sf-ct-wrap[b-dh47cxsstz] {
    position: relative;
}

/* Carrusel: track horizontal con scroll-snap. Cada tarjeta ocupa 100/visibles del ancho. */
.rkxt-sf-ct-carrusel .rkxt-sf-ct-track[b-dh47cxsstz] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;          /* Firefox */
    padding-bottom: 4px;
}
.rkxt-sf-ct-carrusel .rkxt-sf-ct-track[b-dh47cxsstz]::-webkit-scrollbar { display: none; }
.rkxt-sf-ct-carrusel .rkxt-sf-ct-card[b-dh47cxsstz] {
    flex: 0 0 calc((100% - (var(--ct-visibles) - 1) * 16px) / var(--ct-visibles));
    scroll-snap-align: start;
}

/* Grilla: misma cantidad de columnas que "visibles". */
.rkxt-sf-ct-grid .rkxt-sf-ct-track[b-dh47cxsstz] {
    display: grid;
    grid-template-columns: repeat(var(--ct-visibles), minmax(0, 1fr));
    gap: 16px;
}

/* Tarjeta */
.rkxt-sf-ct-card[b-dh47cxsstz] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    text-decoration: none;
    color: var(--rkxt-on-surface, var(--rkxt-text));
    min-width: 0;
}
.rkxt-sf-ct-card.is-static[b-dh47cxsstz] { cursor: default; pointer-events: none; }
/* Foco visible: la tarjeta es un <a> y app.css no da ring a los links sueltos. */
.rkxt-sf-ct-card:focus-visible[b-dh47cxsstz] {
    outline: 2px solid var(--rkxt-primary);
    outline-offset: 3px;
    border-radius: var(--rkxt-radius-sm, 6px);
}
.rkxt-sf-ct-card:focus:not(:focus-visible)[b-dh47cxsstz] { outline: none; }
.rkxt-sf-ct-foto[b-dh47cxsstz] {
    position: relative;
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: var(--rkxt-radius-sm, 6px);
    overflow: hidden;
    background-color: var(--rkxt-surface-2);
}
/* Aspecto de la foto */
.rkxt-sf-ct-vertical   .rkxt-sf-ct-foto[b-dh47cxsstz] { aspect-ratio: 3 / 4; }
.rkxt-sf-ct-cuadrado   .rkxt-sf-ct-foto[b-dh47cxsstz] { aspect-ratio: 1 / 1; }
.rkxt-sf-ct-horizontal .rkxt-sf-ct-foto[b-dh47cxsstz] { aspect-ratio: 4 / 3; }
.rkxt-sf-ct-velo[b-dh47cxsstz] {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
}
.rkxt-sf-ct-label[b-dh47cxsstz] {
    text-align: center;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
}
.rkxt-sf-ct-card:not(.is-static):hover .rkxt-sf-ct-label[b-dh47cxsstz] { color: var(--rkxt-primary); }

/* Flechas */
.rkxt-sf-ct-nav[b-dh47cxsstz] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #111;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--rkxt-shadow-sm, 0 1px 4px rgba(0,0,0,.2));
    display: flex;
    align-items: center;
    justify-content: center;
}
.rkxt-sf-ct-prev[b-dh47cxsstz] { left: -6px; }
.rkxt-sf-ct-next[b-dh47cxsstz] { right: -6px; }
.rkxt-sf-ct-nav:disabled[b-dh47cxsstz] { opacity: .35; cursor: default; }
.rkxt-sf-ct-nav:focus-visible[b-dh47cxsstz] {
    outline: 2px solid var(--rkxt-primary);
    outline-offset: 2px;
}
.rkxt-sf-ct-nav:focus:not(:focus-visible)[b-dh47cxsstz] { outline: none; }

/* Barra de progreso (refleja el scroll del track) */
.rkxt-sf-ct-progress[b-dh47cxsstz] {
    margin: 1rem auto 0;
    width: min(420px, 70%);
    height: 2px;
    background: var(--rkxt-border);
    border-radius: 2px;
    overflow: hidden;
}
.rkxt-sf-ct-progress-bar[b-dh47cxsstz] {
    display: block;
    height: 100%;
    width: 20%;
    background: var(--rkxt-text);
    border-radius: 2px;
    transition: margin-left .1s linear, width .1s linear;
}

/* Responsive: en pantallas chicas se ven menos tarjetas (el carrusel sigue por swipe). */
@media (max-width: 900px) {
    .rkxt-sf-ct-carrusel .rkxt-sf-ct-card[b-dh47cxsstz] { flex-basis: calc((100% - 16px) / 2.2); }
    .rkxt-sf-ct-grid .rkxt-sf-ct-track[b-dh47cxsstz] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rkxt-sf-ct-nav[b-dh47cxsstz] { display: none; }
}
@media (max-width: 520px) {
    .rkxt-sf-ct-carrusel .rkxt-sf-ct-card[b-dh47cxsstz] { flex-basis: calc(100% / 1.3); }
}
/* /Components/Storefront/Componentes/GuiaMarcas.razor.rz.scp.css */
/* =============================================================
   GuiaMarcas — lengüetas tipo guía telefónica, borde derecho.
   Markup 100% propio (<nav>/<a>/<span>), no hay componentes externos de por medio,
   así que el CSS isolation de Blazor aplica normal (no necesitamos ::deep — regla 28
   del CLAUDE.md es para casos con NavLink/MudBlazor, no para este componente).
   ============================================================= */

.rkxt-sf-guia[b-7u9htplabl] {
    /* Anclado al borde derecho, centrado verticalmente por defecto. Position fixed
       (no absolute): tiene que seguir visible mientras el visitante scrollea la Home,
       igual que el globo de WhatsApp. */
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 90; /* un escalón por debajo del WhatsApp (z-index:100 en app.css) a propósito:
                    si algún día llegan a superponerse un pixel, gana el botón de contacto
                    directo, que es la acción más importante de la página. */

    display: flex;
    flex-direction: column;
    align-items: flex-end; /* si alguna etiqueta larga ensancha su lengüeta, las demás
                               siguen flush contra el borde en vez de dejar un hueco */
    gap: 6px;

    /* Guarda-raya para stacks largos (4ª marca a futuro) en viewports bajos: preferible
       scrollear la guía a que la primera lengüeta quede recortada arriba de la pantalla. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rkxt-sf-guia[b-7u9htplabl]::-webkit-scrollbar {
    display: none;
}

/* Con WhatsApp en pantalla (botón fijo 56px + 24px de margen = ~104px de "zona reservada"
   desde abajo): dejamos de centrar verticalmente y anclamos la guía por el borde inferior,
   104px arriba del piso, para que crezca hacia arriba y jamás tape ni sea tapada por el
   globo verde. Es una regla determinística (no depende de cuántas lengüetas haya). */
.rkxt-sf-guia--con-whatsapp[b-7u9htplabl] {
    top: auto;
    bottom: 104px;
    transform: none;
    max-height: calc(100vh - 104px - 24px);
}

.rkxt-sf-guia-solapa[b-7u9htplabl] {
    /* "Página replegada asomando": esquinas redondeadas solo del lado que se ve completo
       (izquierda), el borde derecho queda recto y pegado al viewport — como el lomo de una
       hoja que sale de la guía. Un <select>/menú flotante genérico no tendría esta asimetría. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 116px;
    padding: 0.85rem 0.6rem;

    background: var(--rkxt-sf-guia-bg, var(--rkxt-surface));
    color: var(--rkxt-sf-guia-fg, var(--rkxt-text));
    border: 1px solid var(--rkxt-border);
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

    /* Sombra direccional (no la --rkxt-shadow-* del tema, que son omnidireccionales):
       necesitamos que la sombra caiga solo hacia la izquierda para vender el efecto de
       "hoja que sobresale del cuerpo de la guía". Sutil a propósito, nada de glow. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        -3px 0 10px rgba(15, 15, 18, 0.10);

    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rkxt-sf-guia-solapa:hover[b-7u9htplabl],
.rkxt-sf-guia-solapa:focus-visible[b-7u9htplabl] {
    /* Se "despliega" un poco hacia afuera del borde, como si la hoja se separara del resto
       de la guía. Sin rebote ni escalado: el storefront mayorista es editorial, no lúdico. */
    transform: translateX(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        -5px 0 16px rgba(15, 15, 18, 0.16);
    color: var(--rkxt-sf-guia-fg, var(--rkxt-text));
}

.rkxt-sf-guia-solapa:focus-visible[b-7u9htplabl] {
    outline: 2px solid var(--rkxt-primary);
    outline-offset: -3px; /* offset negativo: el outline queda contenido en el ancho angosto
                              de la lengüeta en vez de recortarse contra el borde del viewport */
}

.rkxt-sf-guia-solapa-texto[b-7u9htplabl] {
    /* Texto vertical. vertical-rl + rotate(180deg) es el truco clásico para que se lea de
       abajo hacia arriba (como los separadores de una agenda/guía telefónica real) con
       soporte parejo en todos los navegadores — "sideways-lr" directo todavía no lo tiene. */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;

    font-family: var(--rkxt-font-display);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* --- Mobile --- */
@media (max-width: 640px) {
    .rkxt-sf-guia[b-7u9htplabl] {
        /* En mano el visitante alcanza mejor la mitad inferior de la pantalla: en vez de
           centrar verticalmente, anclamos siempre abajo (con o sin WhatsApp) y variamos
           el offset. Mantenemos el MISMO borde derecho y la MISMA metáfora — achicamos el
           tamaño y lo que asoma en vez de inventar un patrón nuevo (una barra horizontal
           competiría por espacio con el resto del chrome mobile: topbar, carrito, promobar). */
        top: auto;
        bottom: 24px;
        transform: none;
        max-height: calc(100vh - 96px);
        gap: 4px;
    }

    .rkxt-sf-guia--con-whatsapp[b-7u9htplabl] {
        bottom: 88px; /* 56px del botón + 24px de margen + 8px de aire */
        max-height: calc(100vh - 88px - 24px);
    }

    .rkxt-sf-guia-solapa[b-7u9htplabl] {
        /* Menos "asomo" (padding/alto) pero el mínimo de 44px de alto se respeta de sobra
           (116px→72px) para que siga siendo un blanco cómodo con el pulgar. */
        min-height: 72px;
        padding: 0.55rem 0.4rem;
    }

    .rkxt-sf-guia-solapa-texto[b-7u9htplabl] {
        font-size: 0.78rem;
    }
}
/* /Components/Storefront/Componentes/HeroCarousel.razor.rz.scp.css */
.rkxt-sf-hc[b-tagzldt8ac] {
    position: relative;
    margin: 0 0 1.5rem;
    overflow: hidden;
    border-radius: var(--rkxt-sf-radius, var(--rkxt-radius));
}

.rkxt-sf-hc-track[b-tagzldt8ac] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;       /* Firefox */
}
.rkxt-sf-hc-track[b-tagzldt8ac]::-webkit-scrollbar { display: none; }

.rkxt-sf-hc-slide[b-tagzldt8ac] {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 2rem clamp(1.5rem, 6vw, 5rem);
    box-sizing: border-box;
    overflow: hidden;
}

/* Slide sin foto: degradado de marca (fallback histórico). */
.rkxt-sf-hc-sinfoto[b-tagzldt8ac] {
    background: linear-gradient(135deg, var(--rkxt-primary), var(--rkxt-secondary));
}

/* Alto configurable en px (config del componente → var inline --hc-alto), pero SIEMPRE capado a
   la altura del viewport: un hero alto (puede ser 520-2000px) nunca debe superar la pantalla y
   tiene que adaptarse de forma fluida a CUALQUIER tamaño de ventana, no solo en breakpoints mobile.
   En desktop con ventana alta usa el px configurado; al achicar la ventana cae al 88vh y sigue. */
.rkxt-sf-hc-slide[b-tagzldt8ac] { min-height: min(var(--hc-alto, 520px), 88vh); }

/* El patrón de 2 capas (foto en ::before + velo en ::after) es global y canónico: vive en
   app.css como .rkxt-sf-img-ajustable (lo comparten hero carousel, hero banner y fondos de
   sección). Acá el slide solo aporta su layout; las vars --img-foto/--img-filtro/--img-oscuro/
   --img-pos-y las inyecta el molde inline. */

.rkxt-sf-hc-izquierda[b-tagzldt8ac] { justify-content: flex-start; text-align: left; }
.rkxt-sf-hc-centro[b-tagzldt8ac]    { justify-content: center; text-align: center; }
.rkxt-sf-hc-derecha[b-tagzldt8ac]   { justify-content: flex-end; text-align: right; }

.rkxt-sf-hc-content[b-tagzldt8ac] {
    position: relative;   /* por encima de la foto (::before) y el velo (::after) */
    z-index: 2;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: inherit;
}
.rkxt-sf-hc-centro .rkxt-sf-hc-content[b-tagzldt8ac] { align-items: center; }
.rkxt-sf-hc-derecha .rkxt-sf-hc-content[b-tagzldt8ac] { align-items: flex-end; }

.rkxt-sf-hc-content h2[b-tagzldt8ac] {
    margin: 0;
    font-family: var(--rkxt-font-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.1;
    color: #fff;
    /* El overlay (gradiente vertical .3→.45) no garantiza contraste sobre zonas
       claras/ocupadas de la foto. Sombra de texto = misma defensa que .rkxt-sf-hero. */
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.rkxt-sf-hc-content p[b-tagzldt8ac] {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: .95;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* Flechas */
.rkxt-sf-hc-nav[b-tagzldt8ac] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    color: #111;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.rkxt-sf-hc-nav:hover[b-tagzldt8ac] { background: #fff; }
.rkxt-sf-hc-prev[b-tagzldt8ac] { left: 12px; }
.rkxt-sf-hc-next[b-tagzldt8ac] { right: 12px; }

/* Dots */
.rkxt-sf-hc-dots[b-tagzldt8ac] {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.rkxt-sf-hc-dot[b-tagzldt8ac] {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    padding: 0;
    /* Sombra sutil para que los dots se vean también sobre slides claros. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: background .15s ease, transform .15s ease;
}
.rkxt-sf-hc-dot.is-active[b-tagzldt8ac] {
    background: #fff;
    transform: scale(1.25);
}

/* Tanda 2 — responsive del hero carousel.
   Tablet: bajamos un poco el padding lateral y cap del alto a 70vh para que un hero alto
   (puede ser 520-2000px) no ocupe pantallas enteras.
   Celular: cap más agresivo (62vh, mínimo 320px), padding chico, flechas fuera (se navega por
   swipe) y dots con área táctil de ~44px (el punto visible sigue siendo chico, pero el botón
   transparente alrededor es tappable). */
@media (max-width: 768px) {
    .rkxt-sf-hc-slide[b-tagzldt8ac] { min-height: min(var(--hc-alto, 520px), 70vh); }
}
@media (max-width: 520px) {
    .rkxt-sf-hc-slide[b-tagzldt8ac] {
        min-height: min(var(--hc-alto, 520px), 62vh);
        padding: 1.5rem 1.25rem;
    }
    .rkxt-sf-hc-nav[b-tagzldt8ac] { display: none; }
    /* Dots tappables: el botón crece a 36x36 con padding, el "punto" lo dibuja ::before. */
    .rkxt-sf-hc-dots[b-tagzldt8ac] { bottom: 10px; gap: 4px; }
    .rkxt-sf-hc-dot[b-tagzldt8ac] {
        width: 32px;
        height: 32px;
        background: transparent;
        box-shadow: none;
        position: relative;
    }
    .rkxt-sf-hc-dot[b-tagzldt8ac]::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .55);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
        transition: background .15s ease, transform .15s ease;
    }
    .rkxt-sf-hc-dot.is-active[b-tagzldt8ac] { background: transparent; transform: none; }
    .rkxt-sf-hc-dot.is-active[b-tagzldt8ac]::before { background: #fff; transform: translate(-50%, -50%) scale(1.3); }
}

/* Enlace que cubre el slide entero (heroes editoriales: la foto ES el link, sin CTA visible).
   Va por encima de la foto y del velo, y por DEBAJO del contenido (z-index 2) para que un CTA
   con texto siga siendo clickeable por su cuenta cuando conviven. */
.rkxt-sf-hc-cover[b-tagzldt8ac] {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

/* ===== Responsive de la foto y del alto (agregado 2026-08-20) =====
   Las webs de moda no reescalan el hero de escritorio en el celular: publican otra toma, recortada
   en vertical (1080x1920 contra 1920x1080). Reescalar la apaisada deja el sujeto del tamaño de una
   uña. --img-foto-mob la trae el molde (cae a --img-foto si el operador no cargó una propia), así
   que esta regla es inocua para cualquier slide ya publicado.

   El alto va aparte: --hc-alto-mob (prop AltoMobile, o el alto de escritorio topeado a 620px). El
   cap por vh se conserva — es el que evita que un hero de 2000px tape la pantalla entera. */
@media (max-width: 700px) {
    .rkxt-sf-hc-slide[b-tagzldt8ac]::before { background-image: var(--img-foto-mob, var(--img-foto)); }
}
@media (max-width: 768px) {
    .rkxt-sf-hc-slide[b-tagzldt8ac] { min-height: min(var(--hc-alto-mob, var(--hc-alto, 520px)), 70vh); }
}
@media (max-width: 520px) {
    .rkxt-sf-hc-slide[b-tagzldt8ac] { min-height: min(var(--hc-alto-mob, var(--hc-alto, 520px)), 78vh); }
}
/* /Components/Storefront/Componentes/HeroVideo.razor.rz.scp.css */
/* Hero de video full-bleed. El alto viaja en --hv-alto (px o 100vh) desde el inline style. */
.rkxt-sf-hv[b-4yeoyf7jh7] {
    position: relative;
    height: var(--hv-alto, 600px);
    width: 100%;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
}

.rkxt-sf-hv-media[b-4yeoyf7jh7] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Video archivo: cubre el contenedor recortando lo que sobra. */
.rkxt-sf-hv-video[b-4yeoyf7jh7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* YouTube: el iframe es 16:9; lo escalamos para que cubra el contenedor (cover) y lo
   centramos. pointer-events:none → el video es decorativo, no interactivo. */
.rkxt-sf-hv-yt[b-4yeoyf7jh7] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;        /* 16:9 a partir del ancho */
    min-height: 100%;
    min-width: 177.78vh;    /* 16:9 a partir del alto */
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* Velo negro configurable sobre el video. */
.rkxt-sf-hv-velo[b-4yeoyf7jh7] {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 1;
}

/* Overlay de texto. */
.rkxt-sf-hv-content[b-4yeoyf7jh7] {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 4rem);
    color: #fff;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}

.rkxt-sf-hv-content h2[b-4yeoyf7jh7] {
    margin: 0 0 .5rem;
    font-family: var(--rkxt-font-display, inherit);
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: .01em;
}

.rkxt-sf-hv-content p[b-4yeoyf7jh7] {
    margin: 0 0 1.5rem;
    font-size: clamp(1rem, 2vw, 1.35rem);
    opacity: .95;
    max-width: 46ch;
}

.rkxt-sf-hv-izquierda[b-4yeoyf7jh7] { justify-content: flex-start; }
.rkxt-sf-hv-izquierda .rkxt-sf-hv-content[b-4yeoyf7jh7] { text-align: left; }
.rkxt-sf-hv-izquierda .rkxt-sf-hv-content p[b-4yeoyf7jh7] { margin-left: 0; margin-right: auto; }

.rkxt-sf-hv-centro[b-4yeoyf7jh7] { justify-content: center; }
.rkxt-sf-hv-centro .rkxt-sf-hv-content[b-4yeoyf7jh7] { text-align: center; }
.rkxt-sf-hv-centro .rkxt-sf-hv-content p[b-4yeoyf7jh7] { margin-left: auto; margin-right: auto; }

.rkxt-sf-hv-derecha[b-4yeoyf7jh7] { justify-content: flex-end; }
.rkxt-sf-hv-derecha .rkxt-sf-hv-content[b-4yeoyf7jh7] { text-align: right; }
.rkxt-sf-hv-derecha .rkxt-sf-hv-content p[b-4yeoyf7jh7] { margin-left: auto; margin-right: 0; }

/* Estado vacío (sin fuente configurada) — solo visible en el editor/preview. */
.rkxt-sf-hv-vacio[b-4yeoyf7jh7] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 12px, #202020 12px, #202020 24px);
    color: #9aa0a6;
    font-size: .95rem;
    text-align: center;
    padding: 2rem;
}

/* Celular: alto propio del hero (prop AltoMobile). Sin el prop, --hv-alto-mob viene con el mismo
   valor que --hv-alto y esto no cambia nada. */
@media (max-width: 768px) {
    .rkxt-sf-hv[b-4yeoyf7jh7] { height: var(--hv-alto-mob, var(--hv-alto, 600px)); }
}
/* /Components/Storefront/Componentes/Html.razor.rz.scp.css */
/* Contenedor neutro del bloque HTML libre. No imponemos tipografía ni colores: el operador
   controla el contenido. Solo un reset defensivo para que media/tablas no desborden la columna.
   El contenido viene de MarkupString → NO recibe el scope b-{id} del componente, por eso se
   alcanza con ::deep (regla 28 de Rakuxt). */

.rkxt-sf-html[b-rsspw4v16q] {
    margin: 1rem 0;
}

.rkxt-sf-html[b-rsspw4v16q]  img,
.rkxt-sf-html[b-rsspw4v16q]  video,
.rkxt-sf-html[b-rsspw4v16q]  iframe,
.rkxt-sf-html[b-rsspw4v16q]  table {
    max-width: 100%;
}
/* /Components/Storefront/Componentes/Imagen.razor.rz.scp.css */
.rkxt-sf-img[b-ih3om9le71] {
    margin: 1rem 0;
    display: flex;
}
.rkxt-sf-img-izquierda[b-ih3om9le71] { justify-content: flex-start; }
.rkxt-sf-img-centro[b-ih3om9le71]    { justify-content: center; }
.rkxt-sf-img-derecha[b-ih3om9le71]   { justify-content: flex-end; }

.rkxt-sf-img img[b-ih3om9le71] {
    max-width: 100%;
    /* Cap de alto: una imagen enorme no debe estirar la columna (2col/3col) ni el flujo
       de la página. object-fit (cover/contain) viene inline desde el componente y respeta
       este recuadro. El tenant puede subir el tope con un override del tema si lo necesita. */
    max-height: var(--rkxt-sf-img-max-h, 520px);
    height: auto;
    display: block;
}
.rkxt-sf-img a[b-ih3om9le71] {
    display: block;
    max-width: 100%;
    line-height: 0; /* evita el gap inferior del inline-image dentro del enlace */
}

/* Marco relativo: contiene el <img> y el velo opcional (capa hermana absoluta). El velo NO
   recibe el filter del <img> porque es un elemento aparte, no un pseudo del mismo nodo. */
.rkxt-sf-img-marco[b-ih3om9le71] {
    position: relative;
    display: block;
    max-width: 100%;
    line-height: 0;
}
.rkxt-sf-img-velo[b-ih3om9le71] {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--img-oscuro, 0);
    pointer-events: none;
    border-radius: inherit;
}
.rkxt-sf-img.is-rounded img[b-ih3om9le71],
.rkxt-sf-img.is-rounded .rkxt-sf-img-marco[b-ih3om9le71] {
    border-radius: var(--rkxt-sf-radius, var(--rkxt-radius));
}
.rkxt-sf-img.is-rounded .rkxt-sf-img-marco[b-ih3om9le71] { overflow: hidden; }

/* Alto fijo (Props.Alto > 0): el componente ocupa todo el ancho del contenedor (banner tipo
   "franja"), el marco toma la altura inline y la imagen la llena con object-fit:cover. Anula el
   cap de max-height y el flujo flex/auto del modo normal. El ancho real lo da la sección
   (ancho-completo = full-bleed; contenido = boxed). */
.rkxt-sf-img.is-alto-fijo[b-ih3om9le71] { display: block; margin: 0; }
.rkxt-sf-img.is-alto-fijo .rkxt-sf-img-marco[b-ih3om9le71] { width: 100%; overflow: hidden; }
.rkxt-sf-img.is-alto-fijo img[b-ih3om9le71] { width: 100%; height: 100%; max-height: none; }

/* ANCHO COMPLETO CON ALTO NATURAL (Props.AltoAuto) — el modo de cualquier banner de e-commerce:
   la foto ocupa todo el ancho disponible y su alto sale del aspect ratio. Cero recorte (no hay un
   alto en px contra el que hacer cover), cero franjas (no hay contain), y funciona igual en
   cualquier ancho de pantalla — que es justo lo que un alto en px NO puede dar, porque el ancho
   es fluido y el alto quedaría fijo.
   Hay que anular las tres cosas del modo normal: el max-height de 520px, el display:flex que
   centra, y el margin vertical de 1rem (un banner full-bleed va pegado al bloque de al lado). */
.rkxt-sf-img.is-alto-auto[b-ih3om9le71] { display: block; margin: 0; }
.rkxt-sf-img.is-alto-auto .rkxt-sf-img-marco[b-ih3om9le71] { width: 100%; }
.rkxt-sf-img.is-alto-auto img[b-ih3om9le71] { width: 100%; height: auto; max-width: none; max-height: none; }

/* Overlay de texto (banner de categoría: título/subtítulo sobre la foto). Va por encima del
   velo (z-index) dentro del marco relativo. El color llega inline (default blanco). */
.rkxt-sf-img-cap[b-ih3om9le71] {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.5rem;
    color: #fff;
    line-height: 1.15;
    pointer-events: none; /* el click pasa al <a> del marco */
    max-width: 90%;
    /* Sombra de respaldo SIEMPRE presente: además del velo configurable (que el tenant puede
       dejar en 0), un text-shadow sutil garantiza legibilidad del blanco sobre fotos claras
       sin oscurecer la imagen entera. Patrón editorial estándar (SETS/CUEROS de Kosiuko). */
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45), 0 0 2px rgba(0, 0, 0, .35);
}
/* Scrim de respaldo: degradado negro→transparente detrás del texto, anclado al borde donde
   se ancla el caption. NO depende del velo (--img-oscuro) que es config del tenant. Solo
   refuerza la zona del texto, no toda la foto. */
.rkxt-sf-img-cap[b-ih3om9le71]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}
.rkxt-sf-img-cap-abajo-centro[b-ih3om9le71]::before,
.rkxt-sf-img-cap-abajo-izq[b-ih3om9le71]::before,
.rkxt-sf-img-cap-abajo-der[b-ih3om9le71]::before {
    background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0) 85%);
}
.rkxt-sf-img-cap-arriba-centro[b-ih3om9le71]::before {
    background: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,0) 85%);
}
.rkxt-sf-img-cap-centro[b-ih3om9le71]::before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,.38), rgba(0,0,0,0) 70%);
}
.rkxt-sf-img-cap-titulo[b-ih3om9le71] {
    margin: 0;
    /* color: inherit toma el color del caption (.rkxt-sf-img-cap = ColorTexto configurable, default
       #fff). Sin esto, la regla global `h1,h2,h3,h4{color:var(--rkxt-text)}` pinta el título de
       oscuro (color DIRECTO sobre el h3 le gana a la herencia del div), ignorando ColorTexto. */
    color: inherit;
    /* Editorial (referencia kosiuko.com): serif FINO, Title Case ("Camisas & Blusas") — no la
       sans-serif bold/uppercase del admin. 'DM Serif Display' (--rkxt-font-serif) solo tiene un
       peso regular bastante marcado; 'Cormorant Garamond' es la que da el trazo delgado real de
       la referencia — con fallback a --rkxt-font-serif si no cargó. 500 (Medium) tras dos ajustes
       de Walter (300 muy fino → 400 → 500, un toque más ancho cada vez). El Title Case (primera
       letra de cada palabra) se resuelve en Imagen.razor (TitleCase helper), no acá: CSS
       text-transform no puede "minuscular y después capitalizar" en un solo paso confiable. */
    font-family: 'Cormorant Garamond', var(--rkxt-font-serif, var(--rkxt-font-display, inherit));
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 500;
    letter-spacing: .01em;
}
.rkxt-sf-img-cap-titulo.is-underline[b-ih3om9le71] {
    display: inline-block;
    /* Subrayado fino con separación (no border-bottom pegado al texto) — mismo patrón visual
       que kosiuko.com. */
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 1px;
}
.rkxt-sf-img-cap p[b-ih3om9le71] {
    margin: 0;
    color: inherit;
    font-size: clamp(.85rem, 1.4vw, 1.05rem);
    letter-spacing: .03em;
    text-transform: uppercase;
}
/* Posiciones del overlay dentro del marco. */
.rkxt-sf-img-cap-centro[b-ih3om9le71]        { inset: 0; align-items: center; justify-content: center; text-align: center; }
.rkxt-sf-img-cap-abajo-centro[b-ih3om9le71]  { left: 0; right: 0; bottom: 0; align-items: center; text-align: center; }
.rkxt-sf-img-cap-abajo-izq[b-ih3om9le71]     { left: 0; bottom: 0; align-items: flex-start; text-align: left; }
.rkxt-sf-img-cap-abajo-der[b-ih3om9le71]     { right: 0; bottom: 0; align-items: flex-end; text-align: right; }
.rkxt-sf-img-cap-arriba-centro[b-ih3om9le71] { left: 0; right: 0; top: 0; align-items: center; text-align: center; }

/* Tanda 2 — celular.
   · El alto fijo (banner "franja") llega inline en px (--no var--), puede ser 500-800px y
     ahogar la pantalla del celular. Lo capamos a 60vh (mín 220px) con !important para ganarle
     al inline. El object-fit:cover mantiene la foto encuadrada.
   · El caption (título/subtítulo sobre la foto) reduce su padding para no comerse el ancho. El
     tamaño del texto ya es fluido (clamp), sigue legible. */
@media (max-width: 520px) {
    .rkxt-sf-img.is-alto-fijo .rkxt-sf-img-marco[b-ih3om9le71] {
        height: clamp(220px, 60vh, 600px) !important;
    }
    .rkxt-sf-img-cap[b-ih3om9le71] { padding: 1rem; max-width: 94%; }
}

/* <picture> con foto propia para celular: el wrapper no debe romper ninguno de los tres modos
   (normal / alto fijo / alto auto), así que hereda el layout del <img> que envuelve. */
.rkxt-sf-img-pic[b-ih3om9le71] { display: block; max-width: 100%; line-height: 0; }
.rkxt-sf-img.is-alto-fijo .rkxt-sf-img-pic[b-ih3om9le71] { width: 100%; height: 100%; }
.rkxt-sf-img.is-alto-auto .rkxt-sf-img-pic[b-ih3om9le71] { width: 100%; }
/* /Components/Storefront/Componentes/Texto.razor.rz.scp.css */
.rkxt-sf-texto[b-1i01170g8r] {
    margin: 1rem 0;
}

.rkxt-sf-texto-izquierda[b-1i01170g8r] { text-align: left; }
.rkxt-sf-texto-centro[b-1i01170g8r]    { text-align: center; }
.rkxt-sf-texto-derecha[b-1i01170g8r]   { text-align: right; }

.rkxt-sf-texto-tit[b-1i01170g8r] {
    margin: 0 0 .5rem;
    font-family: var(--rkxt-font-display, inherit);
    line-height: 1.25;
    font-weight: 700;
    color: var(--rkxt-text, inherit);
}

/* Jerarquía explícita: no dependemos de los defaults del user-agent (que
   chocarían con el h2 de .rkxt-sf-section). Tamaños sobrios para columna angosta. */
h2.rkxt-sf-texto-tit[b-1i01170g8r] { font-size: 1.5rem; }
h3.rkxt-sf-texto-tit[b-1i01170g8r] { font-size: 1.25rem; }
h4.rkxt-sf-texto-tit[b-1i01170g8r] { font-size: 1.05rem; }

.rkxt-sf-texto-body[b-1i01170g8r] {
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;   /* preserva saltos de línea del textarea */
    /* Contenido principal sobre el fondo de página (no card) → --rkxt-text,
       que el tema del tenant sí pisa. on-surface-muted es para texto sobre
       cards y dejaría el cuerpo gris/poco legible en temas oscuros. */
    color: var(--rkxt-text, inherit);
}

.rkxt-sf-texto-sm     .rkxt-sf-texto-body[b-1i01170g8r] { font-size: .9rem; }
.rkxt-sf-texto-normal .rkxt-sf-texto-body[b-1i01170g8r] { font-size: 1rem; }
.rkxt-sf-texto-lg     .rkxt-sf-texto-body[b-1i01170g8r] { font-size: 1.2rem; }