/* ============================================================================
 * TANGAMIA.COM — Sistema de diseño (Entrega 8)
 * ============================================================================
 * Única hoja de estilos del sitio principal (compradoras/vendedoras/admin).
 * Autocontenida, sin CDN ni framework externo — mismo criterio que
 * views/layouts/install.php desde la Entrega 7 (cero dependencias de
 * frontend de terceros). Usa pilas de fuentes del sistema (no hay forma de
 * auto-hospedar un webfont con licencia clara sin más contexto del negocio),
 * así que la elegancia viene de tipografía serif del propio sistema +
 * jerarquía + espaciado + color, no de una fuente descargada.
 *
 * Dirección de diseño (pedida explícitamente para esta entrega): un sitio
 * cálido, elegante y muy legible — tonos piel/rosa profundo, tipografía
 * grande y de alto contraste, tarjetas suaves con espacio generoso. Pensado
 * mobile-first (la mayoría del tráfico de un marketplace así es móvil) y
 * escalado hacia una composición más editorial en escritorio.
 *
 * Estrategia: además de clases de componente (.btn, .card, .badge, etc.),
 * se estilizan también las etiquetas HTML semánticas "en crudo" (form,
 * input, table, button...) para que las vistas que todavía no se
 * reescribieron a mano (mensajería, disputas, formularios de producto de
 * la vendedora, etc.) hereden automáticamente la identidad visual sin
 * necesitar tocar su HTML — el mismo principio que un framework "classless"
 * (Water.css/Pico.css), pero con la paleta y tipografía propias de Tangamia.
 * ============================================================================ */

/* --- Tokens ---------------------------------------------------------------- */
:root {
    --color-bg:          #FFF8F5;
    --color-surface:     #FFFFFF;
    --color-surface-2:   #FDF1ED;
    --color-border:      #F1DED9;
    --color-border-soft: #F6E9E5;

    --color-text:        #2B1620;
    --color-text-muted:  #8A6B70;
    --color-text-faint:  #B79A9C;

    --color-primary:       #A32B52;
    --color-primary-dark:  #7E2140;
    --color-primary-light: #D68BA3;
    --color-primary-tint:  #FBE9EE;

    --color-accent:        #C9976B;
    --color-accent-tint:   #F7EADD;

    --color-success:      #3F7A54;
    --color-success-tint: #E7F3EA;
    --color-danger:       #B3261E;
    --color-danger-tint:  #FBE9E7;
    --color-warning:      #9A6B12;
    --color-warning-tint: #FBF0DD;

    --font-heading: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Noto Serif', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(90, 30, 50, 0.06);
    --shadow-md: 0 8px 24px rgba(90, 30, 50, 0.10);
    --shadow-lg: 0 18px 48px rgba(90, 30, 50, 0.16);

    --container-max: 1180px;
}

/* --- Reset base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Defensa en profundidad: una tabla ancha (o cualquier otro elemento)
       que se olvide de envolverse en .table-wrap no debe poder empujar
       TODA la página a scroll horizontal en mobile — el hallazgo real que
       motivó esto fue el carrito (views/cart/show.php, corrección post-
       Entrega 16), que tenía 2 tablas sin .table-wrap. */
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { color: var(--color-primary); text-decoration: underline; }
hr { border: none; border-top: 1px solid var(--color-border); margin: 32px 0; }

/* --- Tipografía -------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary-dark);
    line-height: 1.2;
    letter-spacing: 0.2px;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 700; }
h2 { font-size: clamp(22px, 4vw, 30px); }
h3 { font-size: clamp(19px, 3vw, 22px); }
p { margin: 0 0 1em; color: var(--color-text); }
small { color: var(--color-text-muted); font-size: 0.88em; }
strong { color: var(--color-text); }

/* --- Layout -------------------------------------------------------------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}
main.container { padding-top: 32px; padding-bottom: 64px; }
.section { margin-bottom: 48px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.row.between { justify-content: space-between; }

/* --- Header / navegación ---------------------------------------------------- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 40;
}
.site-header__bar {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.brand {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-primary-dark);
    text-decoration: none;
}
.brand:hover { color: var(--color-primary); text-decoration: none; }
.brand__tag {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: -2px;
}
.site-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.site-nav a {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
}
.site-nav a:hover { color: var(--color-primary); text-decoration: none; }
.site-nav form { margin: 0; }
.site-nav .btn { padding: 9px 18px; font-size: 14px; }

/* Chrome específico de panel (vendedora/admin): franja superior de marca +
   segunda franja de navegación, para distinguirse claramente del sitio
   público sin duplicar todo el CSS. */
.panel-header__brand {
    background: var(--color-primary-dark);
    color: #fff;
}
.panel-header__brand .container {
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-header__brand .brand { color: #fff; }
.panel-header__brand .brand__tag { color: var(--color-primary-light); }
.panel-badge {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,0.14);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}
.panel-nav {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.panel-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
}
.panel-nav nav { display: flex; gap: 20px; flex-wrap: wrap; }
.panel-nav nav a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
}
.panel-nav nav a:hover, .panel-nav nav a.is-active {
    color: var(--color-primary-dark);
    text-decoration: none;
    border-bottom-color: var(--color-primary);
}
.panel-nav form { margin: 0; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--color-border);
    margin-top: 64px;
    padding: 32px 0;
    color: var(--color-text-muted);
    font-size: 14px;
}
.site-footer a { color: var(--color-text-muted); }

/* --- Hero (portada) -------------------------------------------------------- */
.hero {
    background: linear-gradient(160deg, var(--color-primary-tint) 0%, var(--color-bg) 65%);
    border-radius: var(--radius-lg);
    padding: clamp(36px, 7vw, 76px) clamp(24px, 6vw, 64px);
    margin: 24px 0 48px;
    text-align: center;
}
.hero__eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-primary-light);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
}
.hero h1 { max-width: 720px; margin-left: auto; margin-right: auto; }
.hero p.lede {
    max-width: 560px;
    margin: 0 auto 28px;
    font-size: 18px;
    color: var(--color-text-muted);
}
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- Botones -------------------------------------------------------------- */
button, .btn, input[type="submit"] {
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}
button:hover, .btn:hover, input[type="submit"]:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    text-decoration: none;
    box-shadow: var(--shadow-md);
}
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled {
    background: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text-faint);
    cursor: not-allowed;
    box-shadow: none;
}
.btn--ghost {
    background: transparent;
    color: var(--color-primary-dark);
    border-color: var(--color-primary-light);
    box-shadow: none;
}
.btn--ghost:hover { background: var(--color-primary-tint); color: var(--color-primary-dark); }
.btn--danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:hover { background: #8f1e17; border-color: #8f1e17; }
.btn--sm { padding: 8px 16px; font-size: 13.5px; }
.btn--block { width: 100%; }

/* Formularios enviados con un <form> de un solo botón (patrón usado en todo
   el proyecto para "Cerrar sesión", acciones de una sola acción, etc.) no
   deben verse como bloque de ancho completo. */
form[style*="display:inline"] { display: inline !important; }

/* --- Formularios -------------------------------------------------------------- */
form { margin: 0 0 24px; }
label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}
input, select, textarea {
    font-family: var(--font-body);
    font-size: 16px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    margin-bottom: 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
}
textarea { min-height: 120px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; margin-right: 8px; }
form p { margin-bottom: 18px; }
[role="alert"] { color: var(--color-danger); font-size: 13.5px; font-weight: 600; }

/* Formularios y tarjetas centradas de una sola columna (login/registro) */
.form-card {
    max-width: 440px;
    margin: 40px auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 5vw, 44px);
    box-shadow: var(--shadow-md);
}
.form-card h1 { text-align: center; font-size: 26px; }
.form-card > p:first-of-type:not(.lede) { text-align: center; color: var(--color-text-muted); margin-top: -8px; }
.form-card .form-footer { text-align: center; margin-top: 8px; font-size: 14.5px; }
.form-card--wide { max-width: 560px; }

fieldset {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px 16px;
    margin: 0 0 20px;
}
legend {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0 6px;
}
.role-toggle { display: flex; gap: 12px; }
.role-toggle label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    cursor: pointer;
    margin: 0;
}
.role-toggle input { width: auto; margin: 0; }
.checkbox-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: 14.5px;
    color: var(--color-text);
}
.checkbox-line input { width: auto; margin: 3px 0 0; }

/* --- Tarjetas / cuadrícula de productos -------------------------------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card a { color: inherit; text-decoration: none; display: flex; flex-direction: column; flex: 1; }
.product-card__media {
    aspect-ratio: 3 / 4;
    background: var(--color-surface-2);
    overflow: hidden;
    position: relative;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Entrega 13: una prenda 'reserved' (alguien ya inició el pago) sigue
   visible en el catálogo — ver App\Models\Product::findPublicBySlug() — pero
   no se puede agregar al carrito de nuevo mientras tanto; este aviso evita
   que otra compradora se lleve la sorpresa recién al intentar comprarla. */
.product-card__status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}
.product-card__media .placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-faint);
    font-family: var(--font-heading);
    font-size: 14px;
}
.product-card__body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.product-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card__seller { font-size: 13px; color: var(--color-text-muted); margin: 0 0 10px; }
.product-card__price {
    margin-top: auto;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--color-primary-dark);
}

/* --- Detalle de producto -------------------------------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 8px; }
@media (min-width: 800px) { .product-detail { grid-template-columns: 1fr 1fr; align-items: start; } }
.product-detail__media {
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    position: relative;
    cursor: zoom-in;
}
.product-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__zoom-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(43, 22, 32, 0.65);
    color: #fff;
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: 999px;
    pointer-events: none;
}

/* --- Visor ampliado de fotos de producto (lightbox, Entrega 12) --------- */
.product-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 8, 12, 0.92);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
/* BUG real de la Entrega 12 encontrado al probar esta entrega (Entrega 13):
   un selector de clase (.product-lightbox { display:flex }) y la regla por
   defecto del navegador para el atributo [hidden] ([hidden] { display:none })
   tienen la MISMA especificidad (0,1,0) — cuando eso pasa, el CSS del sitio
   (hoja de autor) siempre le gana a la hoja de estilos del navegador (hoja
   de usuario/agente), sin importar el orden. Resultado: el modal quedaba
   SIEMPRE visible, cubriendo toda la pantalla con una capa oscura vacía
   encima de las fotos del producto desde que la página cargaba — exactamente
   el bug reportado ("al darle clic a las imágenes, estas no se visualizan.
   En pocas palabras no se hacen grandes"): no es que no se agrandaran al dar
   clic, es que el visor ampliado (todavía vacío, sin ninguna imagen cargada)
   ya estaba tapando la foto real desde antes de tocar nada. Esta regla con
   el atributo [hidden] tiene la MISMA especificidad que .product-lightbox
   pero está declarada DESPUÉS en el archivo, así que gana en el cascade. */
.product-lightbox[hidden] {
    display: none !important;
}
.product-lightbox:not([hidden]) {
    display: flex;
}
.product-lightbox img {
    max-width: min(92vw, 900px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.product-lightbox__close,
.product-lightbox__nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.product-lightbox__close:hover,
.product-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.product-lightbox__close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
}
.product-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
}
.product-lightbox__nav--prev { left: 16px; }
.product-lightbox__nav--next { right: 16px; }
@media (max-width: 600px) {
    .product-lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
}

/* --- "Me encanta" (Entrega 12) ------------------------------------------ */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.like-btn:hover { border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.like-btn.is-liked { background: var(--color-primary-tint); border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.product-gallery__thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.product-gallery__thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: opacity 0.15s, border-color 0.15s;
}
.product-gallery__thumb:hover { opacity: 1; }
.product-gallery__thumb.is-active { opacity: 1; border-color: var(--color-primary); }

/* --- Ficha pública de vendedora — rediseño completo (Entrega 27) ----------
   El cliente envió un mockup exacto de cómo la quiere ("Mira, así quiero
   que sea el diseño de la tienda de la vendedora"): una sola tarjeta de
   encabezado (SIN la portada de ancho completo de antes — banner_path
   sigue existiendo y sigue siendo útil, pero ahora solo como imagen de
   vista previa al compartir el enlace de la tienda, ver
   App\Helpers\SeoHelper::forSellerProfile()/sellerBannerUrl(), no como
   bloque visual en la página) con avatar circular + insignia de verificada
   superpuesta, nombre, fecha de verificación, insignias, y un bloque de 4
   estadísticas a la derecha; debajo, la galería de fotos y "Detalles
   personales" en dos columnas. Reemplaza por completo el patrón anterior
   de "portada + tarjeta superpuesta" (.seller-banner y .seller-cover-wrap,
   ya retirados de esta hoja y de storefront.css) y el de "encabezado como
   una de las dos columnas junto a la galería". */
.seller-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    margin: 0 0 24px;
}
.seller-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1 1 380px;
    min-width: 0;
}
.seller-header__avatar-wrap { position: relative; flex: 0 0 auto; }
.seller-header__avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface-2);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.seller-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.seller-header__avatar-initials {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-text-muted);
}
/* Insignia de verificada superpuesta sobre el avatar — todo perfil público
   (findPublicBySlug()) ya pertenece a una vendedora con KYC aprobado, así
   que esto siempre se muestra, sin condición. */
.seller-header__verified-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: 3px solid var(--color-surface);
}
.seller-header__info {
    flex: 1 1 auto;
    min-width: 0;
}
.seller-header__name {
    margin: 0 0 4px;
}
.seller-header__since {
    margin: 0 0 10px;
}
.seller-badges-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
}
.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-surface-2);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
}
.badge-chip__emoji { font-size: 1rem; }
/* --- Redes sociales del encabezado público (corrección post-Entrega 16) -
   Pedido explícito del cliente: hasta 8 redes propias (incluyendo
   OnlyFans/Fansly) para ayudar a la vendedora con su marketing tanto
   dentro de Tangamia como fuera. Mismo criterio visual que .badge-chip
   (pill compacto), pero como enlace real (hover con acento de color) para
   que se distinga a simple vista de las insignias, que no son clicables. */
.seller-social-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
}
.social-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.social-chip:hover,
.social-chip:focus-visible {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}
.social-chip__emoji { font-size: 1rem; }

/* --- Bloque de 4 estadísticas del encabezado (mockup del cliente) -------
   Ver la nota larga en App\Controllers\SellerProfileController::publicStats()
   sobre por qué estas 4 métricas (ventas/visitas/tiempo de
   respuesta/prendas activas) son las que se muestran en vez de una
   "valoración" y un "% de satisfechos" que hoy nadie calcula de verdad. */
.seller-stats-grid {
    flex: 1 1 320px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 640px) {
    .seller-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-tile {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: 14px 10px;
    text-align: center;
}
.stat-tile__icon { font-size: 1.3rem; line-height: 1; margin-bottom: 6px; }
.stat-tile__value {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
}
.stat-tile__label {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* --- Galería + "Detalles personales" en dos columnas en escritorio -------
   Ya no comparten fila con el encabezado (ese ahora es .seller-card, de
   ancho completo arriba): esta es una sección propia debajo. Solo se activa
   el grid de 2 columnas si AMBOS bloques existen (ver
   views/catalog/seller_profile.php) — si la vendedora no tiene galería o no
   llenó ningún dato personal, el bloque restante ocupa el ancho completo en
   vez de dejar una columna vacía. */
@media (min-width: 960px) {
    .seller-content-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 32px;
        align-items: start;
    }
}
.seller-gallery { margin: 0 0 24px; position: relative; }
.seller-gallery__hero {
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    position: relative;
    cursor: zoom-in;
    box-shadow: var(--shadow-sm);
}
.seller-gallery__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Contador "x/N" (mockup del cliente) — número REAL de fotos en la galería,
   no un adorno fijo. */
.seller-gallery__counter {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}
.seller-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.seller-gallery__thumb-wrap { position: relative; }
.seller-gallery__thumb-wrap--hidden { display: none; }
.seller-gallery__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: zoom-in;
    display: block;
}
/* "+N más" sobre la última miniatura visible cuando hay más fotos de las
   que caben en la fila de 3 (mismo patrón que Instagram) — pointer-events:
   none para que el clic siga cayendo sobre la <img> de abajo, que ya tiene
   su listener en seller-gallery-lightbox.js; así se abre el lightbox en esa
   foto y desde ahí se navega con las flechas a las que faltan por ver. */
.seller-gallery__thumb-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    pointer-events: none;
}

/* --- "Sobre mí" con Ver más/Ver menos SIN JavaScript ------------------
   El CSP del sitio (script-src 'self') bloquea todo script inline, así
   que este expand/collapse usa el truco del checkbox oculto: el texto
   viene recortado a 3 líneas por defecto (line-clamp); al marcar el
   checkbox (clic en la etiqueta "Ver más...") el texto se muestra
   completo y la propia etiqueta cambia su contenido a "Ver menos" vía
   :checked, sin una sola línea de JS. */
.seller-about {
    max-width: 640px;
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin: 0 0 8px;
}
.seller-about__toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.seller-about__text {
    margin: 0;
    color: var(--color-text);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.seller-about__toggle-input:checked ~ .seller-about__text {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.seller-about__toggle-label {
    display: inline-block;
    margin-top: 6px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}
.seller-about__toggle-label-less { display: none; }
.seller-about__toggle-input:checked ~ .seller-about__toggle-label .seller-about__toggle-label-more { display: none; }
.seller-about__toggle-input:checked ~ .seller-about__toggle-label .seller-about__toggle-label-less { display: inline; }
@media (max-width: 600px) {
    .seller-header { flex-direction: column; align-items: center; text-align: center; }
    .seller-badges-strip { justify-content: center; }
    .seller-social-strip { justify-content: center; }
    .seller-header__avatar { width: 100px; height: 100px; }
}

/* --- Formulario de imagen de portada, panel "Mi cuenta" (Entrega 12/13) -
   Misma técnica de fondo desenfocado + imagen completa que .seller-banner,
   para que la vista previa ya muestre exactamente cómo se va a ver en la
   tienda pública — sin sorpresas al guardar. */
.settings-banner-preview {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 3 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 6px 0 10px;
    background: var(--color-surface-2);
}
.settings-banner-preview__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px) brightness(0.65) saturate(1.15);
    transform: scale(1.15);
}
.settings-banner-preview__fg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* --- Animación de "verificando" al enviar KYC (Entrega 12) -------------- */
.kyc-verifying-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 8, 12, 0.85);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
/* Mismo bug de especificidad que .product-lightbox (ver la nota completa
   junto a esa regla, en la sección del lightbox de producto): sin esto, el
   overlay "verificando" quedaba SIEMPRE visible desde que cargaba la
   página, tapando por completo el formulario de subida de INE — nadie
   podría haber llegado a usar el módulo de verificación KYC en un
   navegador real. */
.kyc-verifying-overlay[hidden] {
    display: none;
}
.kyc-verifying-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    max-width: 340px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.kyc-verifying-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: kyc-spin 0.9s linear infinite;
}
@keyframes kyc-spin { to { transform: rotate(360deg); } }

/* --- Verificación KYC: captura de selfie por cámara en vivo ---------------- */
/* Corrección post-Entrega 16 (ver README): la selfie de "prueba de vida" ya
   NO se sube como archivo — ver public/assets/js/kyc-camera-capture.js
   para el porqué. El INE (frente/reverso) sigue siendo un input type=file
   normal, sin cambios. */
.kyc-camera {
    max-width: 380px;
    margin: 0 auto 8px;
}
.kyc-camera__stage {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #14080c;
    box-shadow: var(--shadow-md);
}
.kyc-camera__video,
.kyc-camera__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Espejo SOLO visual, para que la vista previa se sienta como un espejo
   normal — la imagen que de verdad se captura y se envía NO va espejada
   (ver kyc-camera-capture.js, drawImage sobre el <canvas>). */
.kyc-camera__video { transform: scaleX(-1); }
.kyc-camera__video[hidden],
.kyc-camera__preview[hidden] { display: none; }
.kyc-camera__guide {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64%;
    aspect-ratio: 3 / 4;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 9999px rgba(11, 7, 9, 0.55);
    animation: kyc-guide-pulse 2.4s ease-in-out infinite;
    pointer-events: none;
}
.kyc-camera__guide[hidden] { display: none; }
@keyframes kyc-guide-pulse {
    0%, 100% { border-color: rgba(255, 255, 255, 0.85); }
    50%      { border-color: var(--color-primary-light); }
}
.kyc-camera__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14080c;
}
.kyc-camera__loading[hidden] { display: none; }
.kyc-camera__loading .kyc-verifying-spinner { margin: 0; }
.kyc-camera__status {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 12px 0 0;
    min-height: 1.4em;
}
.kyc-camera__status--error { color: var(--color-danger); font-weight: 600; }
.kyc-camera__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}
.kyc-camera__actions button[hidden] { display: none; }
.product-detail__price {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 4px 0 20px;
}
.detail-list { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px solid var(--color-border-soft); }
.detail-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 14.5px;
}
.detail-list li span:first-child { color: var(--color-text-muted); }
.detail-list li span:last-child { font-weight: 600; }

/* --- Extras opcionales de producto (Entrega 14) --------------------------------------- */
.product-addons { margin-bottom: 16px; }
.product-addons__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}
.product-addons__row:last-of-type { border-bottom: none; }
.product-addons__row input[type="checkbox"] { margin-top: 4px; }

/* --- Insignias / estados -------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
}
.badge--success { background: var(--color-success-tint); color: var(--color-success); }
.badge--danger  { background: var(--color-danger-tint);  color: var(--color-danger); }
.badge--warning { background: var(--color-warning-tint); color: var(--color-warning); }
.badge--accent  { background: var(--color-accent-tint);  color: #7A5426; }
.badge--verified::before { content: '✓ '; }

/* --- Alertas (mismo lenguaje visual que el instalador) -------------------------------------------------------------- */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    margin-bottom: 20px;
    font-size: 14.5px;
}
.alert--success { background: var(--color-success-tint); border-color: #BEDCC5; color: #2C5A3C; }
.alert--danger  { background: var(--color-danger-tint);  border-color: #EFC3BE; color: #8A211B; }
.alert--warning { background: var(--color-warning-tint); border-color: #EEDBAE; color: #6E4D0D; }

/* --- Tablas (paneles de admin/vendedora) -------------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 24px;
    font-size: 14.5px;
}
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-border-soft); }
th {
    background: var(--color-surface-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

/* --- Métricas de dashboard -------------------------------------------------------------- */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
@media (min-width: 720px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); } }
.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}
.metric-card__label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.metric-card__value {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1;
}
.metric-card__hint { font-size: 12.5px; color: var(--color-text-faint); margin-top: 6px; }
.metric-card--alert .metric-card__value { color: var(--color-danger); }

/* --- Empty states -------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
}

/* --- Páginas de contenido largo (/paginas/{slug}, Entrega 10) ------------------ */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { margin-top: 36px; font-size: 22px; }
.prose h3 { margin-top: 24px; font-size: 18px; }
.prose p, .prose li { color: var(--color-text); line-height: 1.7; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; }
.prose .page-updated { color: var(--color-text-faint); font-size: 13px; margin-top: -8px; margin-bottom: 32px; }

/* --- Configuración operativa (/admin/configuracion, Entrega 9) ---------------- */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
}
@media (min-width: 860px) { .settings-grid { grid-template-columns: repeat(2, 1fr); } }
.settings-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 24px 26px 8px;
}
.settings-card h2 { font-size: 19px; margin-bottom: 4px; }
.settings-card__desc { font-size: 13.5px; color: var(--color-text-muted); margin: 0 0 20px; }
.settings-card fieldset { border: none; padding: 0; margin: 0 0 4px; }
.settings-field-hint { font-size: 12px; color: var(--color-text-faint); margin: 4px 0 0; }
.settings-field-hint--ok { color: var(--color-success); }

/* --- Redes sociales de la vendedora: divulgación progresiva ("+ Agregar
   más") en vez de los 8 slots siempre visibles — corrección explícita del
   cliente ("debemos simplificar el agregado de sus redes sociales"). Se usa
   <details>/<summary> nativo (ver views/seller/store/edit.php) para revelar
   los slots vacíos restantes sin depender de JavaScript. */
.social-slot { padding: 10px 0; border-bottom: 1px solid var(--color-border-soft); }
.social-slot:last-child { border-bottom: none; }
.social-more {
    margin-top: 4px;
    border-top: 1px solid var(--color-border-soft);
    padding-top: 8px;
}
.social-more summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary);
    padding: 8px 0;
    list-style: none;
}
.social-more summary::-webkit-details-marker { display: none; }
.social-more summary::before { content: '+ '; }
.social-more[open] summary::before { content: '− '; }

/* --- Utilidades -------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* --- Responsive: menú hamburguesa (Entrega 11) --------------------------
   Antes de esto, en pantallas angostas los enlaces de navegación (hasta 9
   en el panel admin) solo se envolvían con flex-wrap, sin ningún botón de
   menú — usable pero desordenado. Debajo de 860px el nav se oculta por
   completo y se reemplaza por un botón hamburguesa (.nav-toggle,
   controlado por public/assets/js/nav-toggle.js) que lo despliega en pila
   vertical de ancho completo al tocarlo. Encima de 860px el botón nunca se
   muestra: el nav va inline como siempre. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--color-text); border-radius: 1px; }
.nav-toggle--light { border-color: rgba(255,255,255,0.35); }
.nav-toggle--light span { background: #fff; }

@media (max-width: 860px) {
    .nav-toggle { display: flex; }

    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding-top: 8px;
    }
    .site-nav.is-open { display: flex; }
    .site-nav .btn { align-self: flex-start; }

    .panel-nav { display: none; }
    .panel-nav.is-open { display: block; }
    .panel-nav .container { flex-direction: column; align-items: stretch; }
    .panel-nav nav { flex-direction: column; gap: 2px; }
    .panel-nav form { align-self: flex-start; margin-top: 8px; }

    .site-header__bar { flex-wrap: wrap; }
    .panel-header__brand .container { flex-wrap: nowrap; }

    .hero { padding: 32px 20px; border-radius: var(--radius-md); }
}

/* --- Aviso de instalación PWA -----------------------------------------------
 * Aparece cuando el navegador ofrece instalar el sitio (Android/Chrome) o,
 * en iOS Safari (que nunca dispara ese evento), con una instrucción manual
 * de "Compartir -> Agregar a pantalla de inicio" — ver public/assets/js/
 * pwa-register.js. Usa las mismas variables de color que .card/.btn, así
 * que hereda automáticamente la paleta clara (paneles) u oscura (sitio
 * público, storefront.css) según en qué layout se imprima, sin reglas
 * propias por tema. */
.pwa-install-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
    max-width: 420px;
    margin: 0 auto;
}
.pwa-install-banner[hidden] { display: none; }
.pwa-install-banner__text { flex: 1; font-size: 13.5px; color: var(--color-text); line-height: 1.4; margin: 0; }
.pwa-install-banner__btn {
    flex-shrink: 0;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.pwa-install-banner__btn[hidden] { display: none; }
.pwa-install-banner__dismiss {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--color-text-faint);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px;
}
@media (min-width: 640px) {
    .pwa-install-banner { left: auto; right: 24px; bottom: 24px; width: 360px; }
}

/* ============================================================================
 * TANGAMIA — PANEL DE VENDEDORA 2026
 * Centro de operaciones: oscuro, limpio, profesional y consistente con la
 * identidad pública sin convertir cada bloque en decoración rosa.
 * ============================================================================ */
.seller-panel-body {
    --sp-bg: #080709;
    --sp-surface: #100d11;
    --sp-surface-2: #151017;
    --sp-surface-3: #1a121a;
    --sp-border: rgba(255,255,255,.085);
    --sp-border-pink: rgba(244,53,135,.26);
    --sp-text: #f6eef2;
    --sp-muted: #a99ca3;
    --sp-faint: #756a70;
    --sp-pink: #f43587;
    --sp-pink-2: #ff4f9c;
    --sp-pink-soft: rgba(244,53,135,.11);
    --sp-green: #5ad98a;
    --sp-yellow: #f2bd58;
    --sp-danger: #ff6a7d;
    background: var(--sp-bg);
    color: var(--sp-text);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.55;
}
.seller-panel-body h1,
.seller-panel-body h2,
.seller-panel-body h3,
.seller-panel-body h4 { color: var(--sp-text); }
.seller-panel-body p,
.seller-panel-body strong { color: inherit; }
.seller-panel-body a { color: var(--sp-pink-2); }
.seller-panel-body a:hover { color: #ff75af; text-decoration: none; }
.seller-panel-body hr { border-color: var(--sp-border); }

.seller-panel-topbar {
    height: 72px;
    position: sticky;
    top: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 28px;
    background: rgba(8,7,9,.94);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--sp-border);
}
.seller-panel-brand {
    display: inline-flex;
    flex-direction: column;
    color: var(--sp-pink-2) !important;
    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .4px;
}
.seller-panel-brand span {
    margin-top: 5px;
    color: #85757e;
    font-family: var(--font-body);
    font-size:10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.seller-panel-topbar__right { display: flex; align-items: center; gap: 12px; }
.seller-panel-topbar form { margin: 0; }
.seller-panel-store-link { font-size:14.5px; color: var(--sp-muted) !important; padding: 8px 10px; }
.seller-panel-logout,
.seller-panel-mobile-toggle {
    appearance: none;
    border: 1px solid rgba(244,53,135,.5);
    color: var(--sp-pink-2);
    background: rgba(244,53,135,.04);
    border-radius: 999px;
    min-height: 38px;
    padding: 8px 16px;
    font: 600 13.5px/1 var(--font-body);
    cursor: pointer;
}
.seller-panel-mobile-toggle { display: none; width: 42px; padding: 0; font-size: 18px; }

.seller-panel-shell { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 250px minmax(0,1fr); }
.seller-panel-sidebar {
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    overflow-y: auto;
    padding: 22px 16px 28px;
    border-right: 1px solid var(--sp-border);
    background: #0b090c;
}
.seller-panel-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 9px 20px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--sp-border);
}
.seller-panel-user__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg,#321223,#f43587);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 20px;
    border: 1px solid rgba(244,53,135,.55);
}
.seller-panel-user__avatar img { width:100%; height:100%; object-fit:cover; }
.seller-panel-user strong { display:block; max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14.5px; color:var(--sp-text); }
.seller-panel-user small { display:block; margin-top:2px; color:var(--sp-muted); font-size:12px; }
.seller-panel-menu { display: flex; flex-direction: column; gap: 3px; }
.seller-panel-menu > a {
    position: relative;
    min-height: 42px;
    display: grid;
    grid-template-columns: 26px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 9px;
    color: #b8adb3 !important;
    font-size:14px;
    transition: .18s ease;
}
.seller-panel-menu > a > span { color:#81747b; font-size:16px; text-align:center; }
.seller-panel-menu > a > strong { color:inherit; font-weight:600; }
.seller-panel-menu > a > b { min-width:21px; height:21px; display:grid; place-items:center; padding:0 6px; border-radius:999px; background:var(--sp-pink); color:white; font-size:11.5px; }
.seller-panel-menu > a:hover { background:rgba(255,255,255,.035); color:#fff !important; }
.seller-panel-menu > a.is-active { color:#fff !important; background:var(--sp-pink-soft); }
.seller-panel-menu > a.is-active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--sp-pink); }
.seller-panel-menu > a.is-active > span { color:var(--sp-pink-2); }
.seller-panel-menu > a.seller-panel-menu__publish { margin:5px 0; border:1px solid rgba(244,53,135,.2); color:#f6d9e5 !important; }
.seller-panel-menu > a.seller-panel-menu__publish > span { color:var(--sp-pink-2); }
.seller-panel-menu__label { padding: 18px 11px 6px; color:#645b60; font-size:10.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }

.seller-panel-content { min-width:0; width:100%; max-width:1400px; padding:36px 38px 70px; margin:0 auto; }
.seller-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 28px; }
.seller-page-heading h1 { margin:4px 0 8px; font-size:clamp(30px,3.2vw,44px); }
.seller-page-heading p { max-width:720px; margin:0; color:var(--sp-muted); }
.seller-back-link { display:inline-block; margin-bottom:12px; font-size:13.5px; color:var(--sp-muted) !important; }
.seller-section-kicker { display:block; color:var(--sp-pink-2); font-size:11px; font-weight:800; letter-spacing:1.7px; text-transform:uppercase; }

.seller-panel-btn {
    min-height: 39px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 15px;
    border-radius:9px;
    border:1px solid transparent;
    font:700 13.5px/1.15 var(--font-body);
    cursor:pointer;
    transition:.18s ease;
    text-decoration:none !important;
}
.seller-panel-btn--primary { background:linear-gradient(135deg,var(--sp-pink),#ff4f9c); color:white !important; box-shadow:0 8px 22px rgba(244,53,135,.18); }
.seller-panel-btn--primary:hover { transform:translateY(-1px); box-shadow:0 10px 28px rgba(244,53,135,.27); }
.seller-panel-btn--ghost { color:#e5d6dd !important; border-color:var(--sp-border-pink); background:transparent; }
.seller-panel-btn--soft { color:var(--sp-pink-2) !important; background:var(--sp-pink-soft); border-color:rgba(244,53,135,.12); }
.seller-panel-btn--block { display:flex; width:100%; }
.seller-panel-btn--large { min-height:47px; padding:12px 24px; font-size:14.5px; }
.seller-panel-icon-btn { width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--sp-border); border-radius:9px; color:var(--sp-muted) !important; }

.seller-dashboard-hero {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    margin-bottom:24px;
    padding:2px 0 4px;
}
.seller-dashboard-hero h1 { margin:4px 0 5px; font-size:clamp(30px,3vw,44px); }
.seller-dashboard-hero p { margin:0; color:var(--sp-muted); }
.seller-dashboard-hero__actions { display:flex; gap:9px; flex-wrap:wrap; }

.seller-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.seller-kpi-card {
    min-height:137px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:18px;
    border:1px solid var(--sp-border);
    border-radius:14px;
    background:linear-gradient(145deg,#121014,#0e0c0f);
    color:var(--sp-text) !important;
    transition:.18s ease;
}
.seller-kpi-card:not(.seller-kpi-card--static):hover { border-color:rgba(244,53,135,.28); transform:translateY(-2px); }
.seller-kpi-card__icon { width:30px; height:30px; display:grid; place-items:center; margin-bottom:12px; border-radius:8px; color:var(--sp-pink-2); background:var(--sp-pink-soft); font-size:15px; }
.seller-kpi-card__label { color:var(--sp-muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; }
.seller-kpi-card strong { margin-top:3px; color:#fff; font-family:var(--font-heading); font-size:27px; line-height:1.1; }
.seller-kpi-card small { margin-top:auto; color:#72686e; font-size:12px; }

.seller-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:16px; margin-bottom:16px; }
.seller-dashboard-grid--lower { grid-template-columns:repeat(2,minmax(0,1fr)); }
.seller-dashboard-grid--money { grid-template-columns:1.1fr .9fr; }
.seller-panel-card {
    padding:20px;
    border:1px solid var(--sp-border);
    border-radius:15px;
    background:var(--sp-surface);
    box-shadow:0 10px 35px rgba(0,0,0,.12);
}
.seller-panel-card__head { margin-bottom:16px; }
.seller-panel-card__head h2 { margin:3px 0 0; font-size:22px; }
.seller-panel-card__head p { margin:6px 0 0; color:var(--sp-muted); font-size:13.5px; }
.seller-panel-card__head--between { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; }
.seller-panel-card__head--between > a { font-size:13px; }

.seller-action-list { display:flex; flex-direction:column; gap:8px; }
.seller-action-item { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--sp-border); border-radius:11px; color:var(--sp-text) !important; background:rgba(255,255,255,.015); }
.seller-action-item:hover { border-color:rgba(244,53,135,.24); background:rgba(244,53,135,.035); }
.seller-action-item__icon { width:38px; height:38px; display:grid; place-items:center; border-radius:9px; background:#181318; font-size:17px; }
.seller-action-item__body strong { display:block; color:#fff; font-size:14px; }
.seller-action-item__body small { display:block; margin-top:2px; color:var(--sp-muted); font-size:12px; }
.seller-action-item__cta { color:var(--sp-pink-2); font-size:12px; white-space:nowrap; }
.seller-action-item--warning { border-color:rgba(242,189,88,.22); }
.seller-action-item--danger { border-color:rgba(255,106,125,.22); }

.seller-progress { height:8px; overflow:hidden; border-radius:999px; background:#1e181d; margin:15px 0 16px; }
.seller-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sp-pink),#ff7fb7); }
.seller-checklist { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.seller-checklist li { display:grid; grid-template-columns:19px 1fr; gap:7px; align-items:center; color:#8c8187; font-size:12.5px; }
.seller-checklist li > span { color:#665d62; }
.seller-checklist li a { color:inherit !important; }
.seller-checklist li.is-done { color:#c9c0c5; }
.seller-checklist li.is-done > span { color:var(--sp-green); }
.seller-empty-success { display:flex; gap:13px; align-items:flex-start; padding:16px; border:1px solid rgba(90,217,138,.18); border-radius:11px; background:rgba(90,217,138,.045); }
.seller-empty-success > span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(90,217,138,.12); color:var(--sp-green); }
.seller-empty-success strong { display:block; font-size:14px; }
.seller-empty-success p { margin:2px 0 0; color:var(--sp-muted); font-size:12.5px; }

.seller-order-list,
.seller-top-products { display:flex; flex-direction:column; }
.seller-order-row { display:grid; grid-template-columns:1fr auto auto auto 16px; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--sp-border); color:#d7ced2 !important; font-size:12.5px; }
.seller-order-row:last-child { border-bottom:0; }
.seller-order-row__number { color:#fff; font-weight:700; }
.seller-order-row small { color:#71686d; }
.seller-order-row__status { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:4px 8px; border-radius:999px; background:#1d181b; color:#aea2a8; font-size:11px; font-weight:700; }
.seller-order-row__status--paid,.seller-order-row__status--processing,.seller-order-row__status--pending { background:rgba(244,53,135,.11); color:#ff6aa9; }
.seller-order-row__status--completed { background:rgba(90,217,138,.1); color:var(--sp-green); }
.seller-order-row__status--shipped { background:rgba(89,161,255,.1); color:#7cb3ff; }
.seller-order-row__status--cancelled,.seller-order-row__status--refunded,.seller-order-row__status--rejected { background:rgba(255,106,125,.1); color:var(--sp-danger); }
.seller-top-product { display:grid; grid-template-columns:44px minmax(0,1fr) 16px; gap:11px; align-items:center; padding:9px 0; border-bottom:1px solid var(--sp-border); color:#d7ced2 !important; }
.seller-top-product:last-child { border-bottom:0; }
.seller-top-product__image { width:44px; height:44px; border-radius:9px; overflow:hidden; background:#1a1519; display:grid; place-items:center; }
.seller-top-product__image img { width:100%; height:100%; object-fit:cover; }
.seller-top-product__body strong { display:block; color:#f0e8ec; font-size:13px; }
.seller-top-product__body small { color:#766c71; font-size:11px; }

.seller-empty-state { display:grid; place-items:center; text-align:center; padding:28px 20px; border:1px dashed var(--sp-border); border-radius:12px; color:var(--sp-muted); }
.seller-empty-state > span { font-size:24px; margin-bottom:7px; }
.seller-empty-state strong,.seller-empty-state h2 { color:#d7ced2; }
.seller-empty-state p { margin:4px 0 0; color:#80757b; font-size:12.5px; }
.seller-empty-state--large { min-height:330px; }
.seller-empty-state--large h2 { margin:4px 0 7px; }
.seller-empty-state--large .seller-panel-btn { margin-top:15px; }

.seller-quick-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.seller-quick-actions a { min-height:98px; padding:15px; border:1px solid var(--sp-border); border-radius:12px; background:#0f0c10; color:var(--sp-text) !important; }
.seller-quick-actions a:hover { border-color:rgba(244,53,135,.25); }
.seller-quick-actions a > span { display:block; color:var(--sp-pink-2); font-size:18px; margin-bottom:8px; }
.seller-quick-actions strong { display:block; color:#eee5e9; font-size:13px; }
.seller-quick-actions small { display:block; margin-top:3px; color:#756b70; font-size:11px; }

/* Inputs del panel */
.seller-panel-body form { background:none; border:0; padding:0; box-shadow:none; }
.seller-panel-body label { display:block; margin:0 0 6px; color:#cec3c9; font-size:12.5px; font-weight:700; }
.seller-panel-body label small { color:#70666c; font-weight:500; }
.seller-panel-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.seller-panel-body select,
.seller-panel-body textarea {
    width:100%;
    min-height:43px;
    padding:10px 12px;
    border:1px solid #292229;
    border-radius:9px;
    outline:none;
    background:#0c0a0d;
    color:#eee7eb;
    font:500 13.5px/1.4 var(--font-body);
    transition:border-color .18s,box-shadow .18s;
}
.seller-panel-body textarea { resize:vertical; min-height:110px; }
.seller-panel-body input:focus,
.seller-panel-body select:focus,
.seller-panel-body textarea:focus { border-color:rgba(244,53,135,.55); box-shadow:0 0 0 3px rgba(244,53,135,.08); }
.seller-panel-body input::placeholder,.seller-panel-body textarea::placeholder { color:#554c51; }
.seller-panel-body select option,.seller-panel-body select optgroup { background:#121014; color:#eee7eb; }
.seller-panel-body form > p { margin:0 0 16px; }
.seller-field-help { display:block; margin-top:5px; color:#776d72; font-size:11.5px; }
.seller-field-error { display:block; margin-top:5px; color:#ff7b8e; font-size:12px; }
.seller-form-grid { display:grid; gap:0 16px; }
.seller-form-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.seller-form-grid__wide { grid-column:1/-1; }
.seller-form-submit-row { display:flex; justify-content:flex-end; margin-top:10px; }
.seller-money-input { display:flex; align-items:center; border:1px solid #292229; border-radius:9px; background:#0c0a0d; overflow:hidden; }
.seller-money-input:focus-within { border-color:rgba(244,53,135,.55); box-shadow:0 0 0 3px rgba(244,53,135,.08); }
.seller-money-input > span { padding-left:12px; color:var(--sp-pink-2); font-weight:800; }
.seller-money-input input { border:0 !important; box-shadow:none !important; }
.seller-visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.seller-panel-notice { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 15px; margin:0 0 18px; border:1px solid var(--sp-border); border-radius:11px; background:#0f0c10; }
.seller-panel-notice > span { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#171217; }
.seller-panel-notice strong { display:block; color:#eee5e9; font-size:13px; }
.seller-panel-notice p { margin:2px 0 0; color:#857a80; font-size:12px; }
.seller-panel-notice > a { font-size:12px; white-space:nowrap; }
.seller-panel-notice--warning { border-color:rgba(242,189,88,.19); }
.seller-panel-notice--warning > span { color:var(--sp-yellow); background:rgba(242,189,88,.08); }
.seller-panel-notice--danger { border-color:rgba(255,106,125,.19); }
.seller-panel-notice--danger > span { color:var(--sp-danger); }
.seller-panel-notice--neutral > span { color:#8ab7ff; }
.seller-panel-body .alert { border:1px solid var(--sp-border); background:#121014; color:#d9cfd4; border-radius:10px; padding:12px 14px; margin:0 0 18px; }
.seller-panel-body .alert--success { border-color:rgba(90,217,138,.22); color:#a7e8bd; }
.seller-panel-body .alert--danger { border-color:rgba(255,106,125,.24); color:#ff9aaa; }

/* Mis prendas */
.seller-product-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.seller-product-toolbar > span { color:#70666b; font-size:12px; }
.seller-product-filters { display:flex; gap:5px; flex-wrap:wrap; }
.seller-product-filters button { min-height:33px; padding:7px 12px; border:1px solid var(--sp-border); border-radius:999px; background:transparent; color:#8f848a; font:700 11.5px var(--font-body); cursor:pointer; }
.seller-product-filters button.is-active { background:var(--sp-pink-soft); color:var(--sp-pink-2); border-color:rgba(244,53,135,.23); }
.seller-products-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.seller-product-card { overflow:hidden; border:1px solid var(--sp-border); border-radius:13px; background:#0f0c10; }
.seller-product-card__image { display:block; position:relative; aspect-ratio:1/1.04; overflow:hidden; background:#171317; }
.seller-product-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.seller-product-card:hover .seller-product-card__image img { transform:scale(1.025); }
.seller-product-card__placeholder { width:100%; height:100%; display:grid; place-items:center; font-size:38px; }
.seller-product-status { position:absolute; top:9px; left:9px; padding:5px 8px; border-radius:999px; background:rgba(8,7,9,.84); backdrop-filter:blur(6px); color:#ddd3d8; font-size:10.5px; font-weight:800; }
.seller-product-status--active { color:#8ce7aa; }
.seller-product-status--sold { color:#ff8cba; }
.seller-product-status--draft,.seller-product-status--inactive { color:#d6b374; }
.seller-product-card__body { padding:12px; }
.seller-product-card__title-row { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.seller-product-card__title-row h2 { margin:0; font-family:var(--font-body); font-size:13px; font-weight:700; line-height:1.35; }
.seller-product-card__title-row > strong { color:var(--sp-pink-2); font-size:13px; white-space:nowrap; }
.seller-product-card__stats { display:flex; gap:13px; margin:10px 0; padding:9px 0; border-top:1px solid var(--sp-border); border-bottom:1px solid var(--sp-border); color:#786e73; font-size:11px; }
.seller-product-card__actions { display:flex; gap:6px; }
.seller-product-card__actions .seller-panel-btn { flex:1; min-height:36px; padding:8px 9px; font-size:11.5px; }

/* Asistente de publicación */
.seller-product-wizard { max-width:960px; }
.seller-wizard-nav { list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--sp-border); border-radius:13px; overflow:hidden; background:#0e0c0f; }
.seller-wizard-nav li { display:flex; align-items:center; gap:9px; padding:13px 12px; border-right:1px solid var(--sp-border); color:#756b70; cursor:pointer; }
.seller-wizard-nav li:last-child { border-right:0; }
.seller-wizard-nav li > span { width:27px; height:27px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; border:1px solid #31282f; font-size:11.5px; font-weight:800; }
.seller-wizard-nav strong { display:block; color:inherit; font-size:12px; }
.seller-wizard-nav small { display:block; color:#5f565b; font-size:10px; }
.seller-wizard-nav li.is-active { color:#fff; background:var(--sp-pink-soft); }
.seller-wizard-nav li.is-active > span { border-color:var(--sp-pink); background:var(--sp-pink); color:#fff; }
.seller-wizard-nav li.is-complete > span { color:var(--sp-green); border-color:rgba(90,217,138,.3); }
.seller-wizard-panel { padding:25px; border:1px solid var(--sp-border); border-radius:15px; background:var(--sp-surface); }
.seller-wizard-panel__head { display:flex; gap:13px; margin-bottom:22px; padding-bottom:17px; border-bottom:1px solid var(--sp-border); }
.seller-wizard-panel__head > span { color:var(--sp-pink-2); font-family:var(--font-heading); font-size:23px; }
.seller-wizard-panel__head h2 { margin:0 0 3px; font-size:22px; }
.seller-wizard-panel__head p { margin:0; color:var(--sp-muted); font-size:12.5px; }
.seller-wizard-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:24px; padding-top:17px; border-top:1px solid var(--sp-border); }
.seller-upload-dropzone { min-height:190px; display:flex !important; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:5px; padding:25px; border:1px dashed rgba(244,53,135,.35); border-radius:13px; background:rgba(244,53,135,.025); cursor:pointer; }
.seller-upload-dropzone:hover { background:rgba(244,53,135,.05); }
.seller-upload-dropzone input { width:auto !important; margin-top:9px; }
.seller-upload-dropzone__icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--sp-pink-soft); color:var(--sp-pink-2); font-size:20px; }
.seller-upload-dropzone strong { color:#eee5e9; font-size:13.5px; }
.seller-upload-dropzone small { color:#786e73; font-size:11.5px; }
.seller-upload-preview { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-top:12px; }
.seller-upload-preview img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:9px; border:1px solid var(--sp-border); }
.seller-form-note { color:#70666b !important; font-size:11.5px; margin-top:9px !important; }
.seller-publish-summary { display:flex; align-items:flex-start; gap:13px; padding:16px; border:1px solid rgba(90,217,138,.18); border-radius:12px; background:rgba(90,217,138,.04); }
.seller-publish-summary > span { color:var(--sp-green); font-size:20px; }
.seller-publish-summary strong { color:#dceee2; }
.seller-publish-summary p { margin:3px 0 0; color:#8a9a8f; font-size:12.5px; }
.seller-publish-points { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; }
.seller-publish-points span { padding:12px; border:1px solid var(--sp-border); border-radius:9px; color:#94888e; font-size:11.5px; }

/* Tu tienda */
.seller-store-tabs { display:flex; gap:5px; padding:5px; margin-bottom:16px; overflow-x:auto; border:1px solid var(--sp-border); border-radius:12px; background:#0d0b0e; }
.seller-store-tabs a { flex:0 0 auto; padding:9px 13px; border-radius:8px; color:#8c8187 !important; font-size:12px; font-weight:700; }
.seller-store-tabs a.is-active { background:var(--sp-pink-soft); color:#ff6cab !important; }
.seller-store-panel[hidden] { display:none !important; }
.seller-store-editor-card { max-width:960px; }
.seller-store-profile-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:28px; }
.seller-store-avatar-editor { display:flex; flex-direction:column; align-items:center; gap:9px; padding:12px; }
.seller-store-avatar-editor__circle { width:150px; height:150px; overflow:hidden; display:grid; place-items:center; border-radius:50%; border:2px solid rgba(244,53,135,.45); background:linear-gradient(135deg,#26101c,#711b47); color:#fff; font-family:var(--font-heading); font-size:52px; box-shadow:0 12px 35px rgba(244,53,135,.13); }
.seller-store-avatar-editor__circle img { width:100%; height:100%; object-fit:cover; }
.seller-store-avatar-editor small { max-width:180px; text-align:center; color:#6d6268; font-size:11px; }
.seller-gallery-manager { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; margin-bottom:17px; }
.seller-gallery-manager__item { position:relative; aspect-ratio:1; overflow:hidden; border:1px solid var(--sp-border); border-radius:10px; background:#151116; }
.seller-gallery-manager__item img { width:100%; height:100%; object-fit:cover; }
.seller-gallery-manager__item form { margin:0; }
.seller-gallery-manager__primary,.seller-gallery-manager__action { position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); padding:4px 7px; border:0; border-radius:999px; background:rgba(8,7,9,.82); color:#ff75af; font:700 9.5px var(--font-body); }
.seller-gallery-manager__action { cursor:pointer; }
.seller-gallery-manager__delete { position:absolute; top:6px; right:6px; width:24px; height:24px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:rgba(8,7,9,.82); color:#fff; font-size:16px; cursor:pointer; }
.seller-count-pill { min-width:31px; height:27px; display:grid; place-items:center; padding:0 8px; border-radius:999px; background:var(--sp-pink-soft); color:var(--sp-pink-2); font-size:11px; font-weight:800; }
.seller-store-two-column { display:grid; grid-template-columns:.85fr 1.15fr; gap:14px; margin-bottom:14px; }
.seller-badge-editor { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.seller-badge-editor__slot { display:grid; grid-template-columns:29px minmax(0,1fr); gap:8px; padding:11px; border:1px solid var(--sp-border); border-radius:10px; }
.seller-badge-editor__number { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:var(--sp-pink-soft); color:var(--sp-pink-2); font-size:11.5px; font-weight:800; }
.seller-custom-badge-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:7px; margin-top:7px; }
.seller-social-card { margin-top:14px; }
.seller-social-editor { display:flex; flex-direction:column; gap:7px; margin-bottom:10px; }
.seller-social-editor__row { display:grid; grid-template-columns:180px 180px minmax(0,1fr); gap:7px; }
.seller-social-editor__row--extra { display:none; }
.seller-social-more-btn { margin-right:6px; }
.seller-shipping-settings-card { max-width:900px; }
.seller-preview-card { min-height:420px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:18px; background:radial-gradient(circle at 50% 0%,rgba(244,53,135,.08),transparent 42%),var(--sp-surface); }
.seller-preview-card__profile { max-width:650px; display:flex; align-items:center; gap:18px; text-align:left; }
.seller-preview-card__avatar { width:105px; height:105px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden; border-radius:50%; border:2px solid rgba(244,53,135,.45); background:#28101d; color:#fff; font-family:var(--font-heading); font-size:38px; }
.seller-preview-card__avatar img { width:100%; height:100%; object-fit:cover; }
.seller-preview-card h2 { margin:3px 0; font-size:30px; }
.seller-preview-card p { margin:0; color:var(--sp-muted); }
.seller-preview-card__badges { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.seller-preview-card__badges span { padding:6px 9px; border-radius:999px; background:var(--sp-pink-soft); color:#d9a4bd; font-size:11px; }

/* Pedidos */
.seller-orders-section { margin-bottom:27px; }
.seller-order-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.seller-order-card { padding:15px; border:1px solid var(--sp-border); border-radius:12px; background:#0f0c10; }
.seller-order-card--priority { border-color:rgba(244,53,135,.17); }
.seller-order-card__top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.seller-order-card__top small,.seller-order-card__meta dt { display:block; color:#6f656a; font-size:10px; text-transform:uppercase; letter-spacing:.6px; }
.seller-order-card__top strong { color:#fff; font-size:13.5px; }
.seller-order-card__amount { margin:20px 0 14px; color:var(--sp-pink-2); font-family:var(--font-heading); font-size:25px; font-weight:700; }
.seller-order-card__amount small { color:#7d7177; font-family:var(--font-body); font-size:10.5px; }
.seller-order-card__meta { margin:0 0 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seller-order-card__meta dd { margin:2px 0 0; color:#b5aab0; font-size:11px; }
.seller-order-history-list { border:1px solid var(--sp-border); border-radius:12px; overflow:hidden; background:#0e0c0f; }
.seller-order-history-row { display:grid; grid-template-columns:1.1fr auto 1fr 1fr 1fr 16px; align-items:center; gap:11px; min-height:66px; padding:10px 13px; border-bottom:1px solid var(--sp-border); color:#d9d0d4 !important; }
.seller-order-history-row:last-child { border-bottom:0; }
.seller-order-history-row:hover { background:rgba(255,255,255,.018); }
.seller-order-history-row small { display:block; color:#685f64; font-size:10px; text-transform:uppercase; }
.seller-order-history-row strong,.seller-order-history-row span { font-size:12px; }
.seller-order-history-row__arrow { color:var(--sp-pink-2); }
.seller-order-history-row--static { cursor:default; }

/* Ganancias */
.seller-money-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.seller-money-card { min-height:142px; padding:19px; border:1px solid var(--sp-border); border-radius:14px; background:var(--sp-surface); display:flex; flex-direction:column; }
.seller-money-card--primary { border-color:rgba(244,53,135,.27); background:linear-gradient(145deg,rgba(244,53,135,.09),#100d11 58%); }
.seller-money-card > span { color:#9b8f95; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.seller-money-card strong { margin:8px 0 3px; color:#fff; font-family:var(--font-heading); font-size:31px; }
.seller-money-card--primary strong { color:var(--sp-pink-2); }
.seller-money-card small { margin-top:auto; color:#70666c; font-size:11px; }
.seller-money-breakdown { margin:0; }
.seller-money-breakdown > div { display:flex; justify-content:space-between; gap:15px; padding:11px 0; border-bottom:1px solid var(--sp-border); }
.seller-money-breakdown dt { color:#887d82; font-size:12px; }
.seller-money-breakdown dd { margin:0; color:#d8cfd3; font-size:12px; font-weight:700; }
.seller-money-breakdown dd.is-negative { color:#c98a9e; }
.seller-money-breakdown .is-total { padding-top:14px; border-bottom:0; }
.seller-money-breakdown .is-total dt,.seller-money-breakdown .is-total dd { color:#fff; font-size:13.5px; }

/* Estadísticas */
.seller-stats-ranking { margin-top:16px; }
.seller-stats-product-list { display:flex; flex-direction:column; }
.seller-stats-product-row { display:grid; grid-template-columns:30px 48px minmax(0,1fr) 85px 85px 16px; gap:10px; align-items:center; min-height:67px; padding:9px 0; border-bottom:1px solid var(--sp-border); color:#ddd4d8 !important; }
.seller-stats-product-row:last-child { border-bottom:0; }
.seller-stats-product-row__rank { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#1b151a; color:var(--sp-pink-2); font-size:11.5px; font-weight:800; }
.seller-stats-product-row__image { width:48px; height:48px; display:grid; place-items:center; overflow:hidden; border-radius:8px; background:#181317; }
.seller-stats-product-row__image img { width:100%; height:100%; object-fit:cover; }
.seller-stats-product-row__name strong { display:block; color:#eee5e9; font-size:12.5px; }
.seller-stats-product-row small { display:block; color:#6e6469; font-size:10px; }
.seller-stats-product-row > span:not(.seller-stats-product-row__rank):not(.seller-stats-product-row__image):not(.seller-stats-product-row__name) strong { display:block; font-size:13.5px; }

/* Vistas antiguas que aún usan settings-card/table heredan un acabado coherente. */
.seller-panel-body .settings-grid { gap:14px; }
.seller-panel-body .settings-card { background:var(--sp-surface); border-color:var(--sp-border); box-shadow:none; border-radius:13px; }
.seller-panel-body .settings-card h2 { color:#eee5e9; }
.seller-panel-body .settings-card__desc,.seller-panel-body .text-muted { color:var(--sp-muted); }
.seller-panel-body .table-wrap { border:1px solid var(--sp-border); border-radius:12px; overflow:auto; background:#0e0c0f; }
.seller-panel-body table { background:transparent; color:#d5ccd0; }
.seller-panel-body th { background:#121014; color:#887c82; font-size:11px; }
.seller-panel-body td { border-color:var(--sp-border); color:#c8bec3; font-size:12px; }
.seller-panel-body button:not(.seller-panel-logout):not(.seller-panel-mobile-toggle):not(.seller-panel-btn):not(.seller-panel-icon-btn):not(.seller-gallery-manager__delete):not(.seller-gallery-manager__action):not(.seller-product-filters button) { border-radius:9px; }

@media (max-width: 1180px) {
    .seller-products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .seller-gallery-manager { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .seller-order-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
    .seller-panel-shell { grid-template-columns:1fr; }
    .seller-panel-mobile-toggle { display:grid; place-items:center; }
    .seller-panel-sidebar { position:fixed; z-index:80; top:72px; left:0; width:min(290px,86vw); transform:translateX(-105%); transition:transform .22s ease; box-shadow:20px 0 50px rgba(0,0,0,.45); }
    .seller-panel-sidebar.is-open { transform:translateX(0); }
    .seller-panel-content { padding:28px 22px 60px; }
    .seller-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .seller-dashboard-grid,.seller-dashboard-grid--lower,.seller-dashboard-grid--money { grid-template-columns:1fr; }
    .seller-store-two-column { grid-template-columns:1fr; }
    .seller-social-editor__row { grid-template-columns:1fr 1fr; }
    .seller-social-editor__row input:last-of-type { grid-column:1/-1; }
    .seller-order-history-row { grid-template-columns:1fr auto 1fr 16px; }
    .seller-order-history-row > div:nth-of-type(3),.seller-order-history-row > div:nth-of-type(4) { display:none; }
}
@media (max-width: 760px) {
    .seller-panel-topbar { height:64px; padding:0 15px; }
    .seller-panel-brand { font-size:23px; }
    .seller-panel-brand span { font-size:9.5px; }
    .seller-panel-sidebar { top:64px; height:calc(100vh - 64px); }
    .seller-panel-store-link,.seller-panel-logout { display:none; }
    .seller-panel-content { padding:22px 14px 48px; }
    .seller-page-heading,.seller-dashboard-hero { align-items:flex-start; flex-direction:column; }
    .seller-dashboard-hero__actions,.seller-page-heading > .seller-panel-btn { width:100%; }
    .seller-dashboard-hero__actions .seller-panel-btn,.seller-page-heading > .seller-panel-btn { flex:1; }
    .seller-kpi-grid,.seller-money-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .seller-kpi-card { min-height:125px; padding:14px; }
    .seller-kpi-card strong { font-size:23px; }
    .seller-action-item { grid-template-columns:36px 1fr; }
    .seller-action-item__cta { grid-column:2; }
    .seller-quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .seller-products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .seller-product-card__body { padding:10px; }
    .seller-product-card__title-row { flex-direction:column; gap:3px; }
    .seller-product-card__stats { flex-direction:column; gap:3px; }
    .seller-product-card__actions { flex-wrap:wrap; }
    .seller-wizard-nav { grid-template-columns:repeat(4,1fr); }
    .seller-wizard-nav li { justify-content:center; padding:10px 4px; }
    .seller-wizard-nav li > div { display:none; }
    .seller-wizard-panel { padding:17px; }
    .seller-form-grid--2 { grid-template-columns:1fr; }
    .seller-publish-points { grid-template-columns:1fr; }
    .seller-upload-preview { grid-template-columns:repeat(3,1fr); }
    .seller-store-profile-layout { grid-template-columns:1fr; }
    .seller-store-avatar-editor { padding-top:0; }
    .seller-gallery-manager { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .seller-custom-badge-row { grid-template-columns:1fr; }
    .seller-social-editor__row { grid-template-columns:1fr; }
    .seller-social-editor__row input:last-of-type { grid-column:auto; }
    .seller-preview-card__profile { flex-direction:column; text-align:center; }
    .seller-order-cards { grid-template-columns:1fr; }
    .seller-order-history-row { grid-template-columns:1fr auto 16px; }
    .seller-order-history-row > div:nth-of-type(n+2) { display:none; }
    .seller-stats-product-row { grid-template-columns:28px 44px minmax(0,1fr) 16px; }
    .seller-stats-product-row > span:nth-last-child(2),.seller-stats-product-row > span:nth-last-child(3) { display:none; }
    .seller-panel-notice { grid-template-columns:34px 1fr; }
    .seller-panel-notice > a { grid-column:2; }
}
@media (max-width: 480px) {
    .seller-kpi-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .seller-kpi-card { min-height:116px; }
    .seller-kpi-card__label { font-size:10.5px; }
    .seller-products-grid { grid-template-columns:1fr 1fr; }
    .seller-quick-actions { grid-template-columns:1fr 1fr; }
    .seller-money-grid { grid-template-columns:1fr; }
    .seller-store-tabs a { padding:8px 10px; }
}

/* Mensajería dentro del panel */
.seller-panel-body .seller-chat-inbox { border:1px solid var(--sp-border); border-radius:13px; overflow:hidden; background:#0e0c0f; }
.seller-panel-body .seller-chat-thread { min-height:72px; display:grid; grid-template-columns:42px minmax(0,1fr) auto 18px; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--sp-border); color:#d7cdd2 !important; }
.seller-panel-body .seller-chat-thread:last-child { border-bottom:0; }
.seller-panel-body .seller-chat-thread:hover { background:rgba(255,255,255,.018); }
.seller-panel-body .seller-chat-thread.is-unread { background:rgba(244,53,135,.035); }
.seller-panel-body .seller-chat-thread__avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#1b1319; color:var(--sp-pink-2); font-family:var(--font-heading); font-size:18px; }
.seller-panel-body .seller-chat-thread__name { display:block; color:#f1e9ed; font-size:13px; font-weight:700; }
.seller-panel-body .seller-chat-thread__subject { display:block; margin-top:2px; color:#81767c; font-size:11.5px; }
.seller-panel-body .seller-chat-thread__meta { text-align:right; }
.seller-panel-body .seller-chat-thread__meta small { display:block; color:#665d62; font-size:10px; }
.seller-panel-body .seller-chat-thread__meta b { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-top:4px; padding:0 6px; border-radius:999px; background:var(--sp-pink); color:white; font-size:10.5px; }
.seller-panel-body .seller-chat-thread__arrow { color:var(--sp-pink-2); }
.seller-panel-body .seller-chat-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr); gap:15px; }
.seller-panel-body .seller-chat-window { border:1px solid var(--sp-border); border-radius:14px; background:var(--sp-surface); overflow:hidden; }
.seller-panel-body .seller-chat-window__messages { min-height:430px; max-height:62vh; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:12px; }
.seller-panel-body .seller-chat-message { display:flex; flex-direction:column; max-width:74%; }
.seller-panel-body .seller-chat-message.is-mine { align-self:flex-end; align-items:flex-end; }
.seller-panel-body .seller-chat-message.is-theirs { align-self:flex-start; align-items:flex-start; }
.seller-panel-body .seller-chat-message__bubble { padding:10px 12px; border-radius:13px 13px 13px 4px; background:#1a1519; color:#e9e0e4; font-size:13px; white-space:normal; }
.seller-panel-body .seller-chat-message.is-mine .seller-chat-message__bubble { border-radius:13px 13px 4px 13px; background:linear-gradient(135deg,#a81e5c,#ef3484); color:#fff; }
.seller-panel-body .seller-chat-message time { margin-top:4px; color:#5e555a; font-size:9.5px; }
.seller-panel-body .seller-chat-message__filtered { display:block; margin-top:7px; color:#efc0d4; font-size:9.5px; }
.seller-panel-body .seller-chat-compose { padding:14px; border-top:1px solid var(--sp-border); }
.seller-panel-body .seller-chat-compose textarea { min-height:90px; }
.seller-panel-body .seller-chat-compose__foot { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:8px; }
.seller-panel-body .seller-chat-compose__foot small { max-width:520px; color:#6f656a; font-size:10.5px; }
.seller-panel-body .seller-chat-context { align-self:start; }
.seller-panel-body .seller-chat-context h2 { margin:4px 0 7px; font-size:19px; }
.seller-panel-body .seller-chat-context > p { color:var(--sp-muted); font-size:12px; }
@media (max-width:980px) {
    .seller-panel-body .seller-chat-layout { grid-template-columns:1fr; }
    .seller-panel-body .seller-chat-context { order:-1; }
}
@media (max-width:600px) {
    .seller-panel-body .seller-chat-thread { grid-template-columns:38px minmax(0,1fr) auto; }
    .seller-panel-body .seller-chat-thread__arrow { display:none; }
    .seller-panel-body .seller-chat-thread__meta small { display:none; }
    .seller-panel-body .seller-chat-message { max-width:88%; }
    .seller-panel-body .seller-chat-compose__foot { align-items:stretch; flex-direction:column; }
}

/* ==========================================================================
 * 2026-08-29 — Edición de fotografías de prendas
 * ========================================================================== */
.seller-edit-product-layout {
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
    gap:16px;
    align-items:start;
}
.seller-edit-product-form,
.seller-product-images-editor { min-width:0; }
.seller-edit-product-form__actions { margin-top:20px; padding-top:16px; border-top:1px solid var(--sp-border); }
.seller-product-images-editor { position:sticky; top:18px; }
.seller-product-images-editor__head p { margin:3px 0 0; color:var(--sp-muted); font-size:12.5px; }
.seller-product-image-manager {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:16px;
}
.seller-product-image-manager__item {
    position:relative;
    overflow:hidden;
    aspect-ratio:1;
    border:1px solid var(--sp-border);
    border-radius:12px;
    background:#151116;
}
.seller-product-image-manager__item.is-primary { border-color:rgba(244,53,135,.48); box-shadow:0 0 0 1px rgba(244,53,135,.08); }
.seller-product-image-manager__item > img { width:100%; height:100%; display:block; object-fit:cover; }
.seller-product-image-manager__primary,
.seller-product-image-manager__make-primary {
    position:absolute;
    left:7px;
    bottom:7px;
    z-index:2;
    max-width:calc(100% - 44px);
    min-height:28px;
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    background:rgba(8,7,9,.86);
    color:#ff75af;
    font:700 10.5px/1 var(--font-body);
    backdrop-filter:blur(5px);
}
.seller-product-image-manager__make-primary { cursor:pointer; }
.seller-product-image-manager__make-primary:hover { border-color:rgba(244,53,135,.5); color:#fff; }
.seller-product-image-manager__delete-form,
.seller-product-image-manager__primary-form { margin:0; }
.seller-product-image-manager__delete {
    position:absolute;
    top:7px;
    right:7px;
    z-index:2;
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    background:rgba(8,7,9,.86);
    color:#fff;
    font-size:19px;
    line-height:1;
    cursor:pointer;
    backdrop-filter:blur(5px);
}
.seller-product-image-manager__delete:hover { background:#91234f; border-color:#c83a73; }
.seller-product-image-uploader { padding-top:13px; border-top:1px solid var(--sp-border); }
.seller-upload-dropzone--compact { min-height:145px; margin-bottom:10px; }
.seller-panel-empty-note { margin:10px 0 0; color:#8d8187; font-size:12.5px; line-height:1.5; }

/* Preview local de imágenes: tarjetas reales, no iconos de imagen rota. */
.seller-upload-preview__item {
    min-width:0;
    margin:0;
    overflow:hidden;
    border:1px solid var(--sp-border);
    border-radius:10px;
    background:#111014;
}
.seller-upload-preview__item img {
    width:100%;
    aspect-ratio:1;
    display:block;
    object-fit:cover;
    border:0;
    border-radius:0;
}
.seller-upload-preview__item figcaption {
    overflow:hidden;
    padding:6px 7px;
    color:#91858b;
    font-size:10px;
    line-height:1.25;
    white-space:nowrap;
    text-overflow:ellipsis;
}

@media (max-width: 980px) {
    .seller-edit-product-layout { grid-template-columns:1fr; }
    .seller-product-images-editor { position:static; }
    .seller-product-image-manager { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 620px) {
    .seller-product-image-manager { grid-template-columns:repeat(2,minmax(0,1fr)); }
}