/* /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).
   ============================================================================ */

/* Alto de la topbar sticky de MainLayout (14px*2 padding + ~33px contenido + 1px borde). */
.rkxt-admin[b-rp0cbg03im] {
    --rkxt-admin-topbar-h: 62px;
    display: flex;
    height: calc(100dvh - var(--rkxt-admin-topbar-h));
    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%;
    overflow-y: auto;   /* scroll interno propio del menú, independiente del contenido */
    background: var(--rkxt-bg-alt);
    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;
}

.rkxt-admin-content[b-rp0cbg03im] {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;   /* scroll propio del contenido */
    padding: 28px 36px;
    overflow-x: auto;
    transition: padding-left 0.25s ease;
}

/* ============================================================================
   Botón hamburguesa — sticky a la izquierda arriba. Visible siempre.
   ============================================================================ */
.rkxt-admin-hamburger[b-rp0cbg03im] {
    position: fixed;
    top: 80px;
    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;
    }
}

/* Botón cerrar dentro del header del sidebar — visible solo cuando sidebar abierto
   y el hamburguesa quedaría tapado (desktop expandido OR mobile overlay). */
.rkxt-admin-sidebar-close[b-rp0cbg03im] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--rkxt-border);
    background: var(--rkxt-surface);
    border-radius: var(--rkxt-radius-sm);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--rkxt-text);
    display: none;
}

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

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

/* ============================================================================
   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-close[b-rp0cbg03im] {
        display: block;
    }
    .rkxt-admin-content[b-rp0cbg03im] {
        padding-left: 56px;   /* deja espacio para la hamburguesa fija */
    }
}

/* ============================================================================
   Header del sidebar
   ============================================================================ */
.rkxt-admin-sidebar-header[b-rp0cbg03im] {
    position: relative;
    margin-bottom: 18px;
    padding-right: 32px;     /* deja lugar al botón close */
}

.rkxt-admin-section[b-rp0cbg03im] {
    display: block;
    font-family: var(--rkxt-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--rkxt-text);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.rkxt-admin-scope-pill[b-rp0cbg03im] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--rkxt-radius-pill);
    background: var(--rkxt-primary-soft);
    border: 1px solid rgba(235, 82, 2, 0.3);
    color: var(--rkxt-primary);
    font-size: 0.68rem;
    font-weight: 600;
}

.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. */

.rkxt-admin-sidebar-footer[b-rp0cbg03im] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rkxt-border-soft);
}

.rkxt-admin-link-back[b-rp0cbg03im] {
    color: var(--rkxt-text-dim);
    font-size: 0.85rem;
    text-decoration: none;
}

.rkxt-admin-link-back:hover[b-rp0cbg03im] {
    color: var(--rkxt-primary-hover);
}
/* /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/Layout/MainLayout.razor.rz.scp.css */
.rkxt-app[b-nqitsl362f] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--rkxt-bg);
}

/* ----- Topbar ----- */
.rkxt-topbar[b-nqitsl362f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    border-bottom: 1px solid var(--rkxt-border);
    background: var(--rkxt-bg-alt);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(140%) blur(8px);
}

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

.rkxt-brand:hover[b-nqitsl362f] {
    color: var(--rkxt-text);
}

.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;
}

.rkxt-brand-tag[b-nqitsl362f] {
    margin-left: 4px;
    padding: 3px 10px;
    border-radius: var(--rkxt-radius-pill);
    background: var(--rkxt-primary-soft);
    color: var(--rkxt-primary-hover);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

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

.rkxt-link-mute[b-nqitsl362f] {
    color: var(--rkxt-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.rkxt-link-mute:hover[b-nqitsl362f] {
    color: var(--rkxt-text);
}

.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%;
}

/* ----- Footer ----- */
.rkxt-footer[b-nqitsl362f] {
    padding: 22px 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;
}
/* /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/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); }
}
/* /Components/Storefront/Componentes/HeroVideo.razor.rz.scp.css */
/* Hero de video full-bleed. El alto lo fija el inline style (px o 100vh). */
.rkxt-sf-hv[b-4yeoyf7jh7] {
    position: relative;
    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;
}
/* /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; }

/* 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;
    font-family: var(--rkxt-font-display, inherit);
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.rkxt-sf-img-cap-titulo.is-underline[b-ih3om9le71] {
    display: inline-block;
    padding-bottom: .25rem;
    border-bottom: 2px solid currentColor;
}
.rkxt-sf-img-cap p[b-ih3om9le71] {
    margin: 0;
    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%; }
}
/* /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; }