:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg: #f9fafb;
    --danger: #dc2626;
    --success: #16a34a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--store-muted, var(--muted)); }
h1, h2, h3 { line-height: 1.2; }
img { max-width: 100%; }
.store-body { background: var(--store-bg, var(--bg)); color: var(--store-text, var(--text)); }

/* ---- Admin ---- */
/* ---- Admin: sidebar ---- */
.admin-topbar { display: none; }
.admin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 220px; overflow-y: auto;
    background: #111827; color: #fff; padding: 20px 0; z-index: 50;
    display: flex; flex-direction: column;
}
.admin-sidebar-brand { font-weight: 700; font-size: 18px; padding: 0 20px 20px; color: #fff; }
.admin-sidebar a { color: #d1d5db; padding: 12px 20px; font-size: 14px; display: block; }
.admin-sidebar a:hover { background: #1f2937; color: #fff; text-decoration: none; }
.admin-sidebar a.active { background: #1f2937; color: #fff; border-left: 3px solid var(--primary); }
.sidebar-overlay { display: none; }
.admin-main { max-width: 960px; padding: 32px 24px; margin: 0 auto; }
.admin-sidebar ~ .admin-main { margin-left: 240px; margin-right: 20px; }

.auth-card, .card {
    background: var(--store-surface, #fff); border: 1px solid var(--store-border, var(--border)); border-radius: 10px;
    padding: 28px; margin-bottom: 24px; color: inherit;
}
.card.highlight { border-color: var(--primary); background: var(--store-surface, #eff6ff); }
.auth-card { max-width: 420px; margin: 40px auto; }

label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 14px; }
input, select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; font-family: inherit;
}
input[type=color] { padding: 4px; height: 42px; }
textarea { resize: vertical; }

.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 12px 0 4px; }
.checkbox-label input { width: auto; }

.variant-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.variant-row input { margin: 0; }
.variant-row .btn-link { font-size: 18px; flex-shrink: 0; }

.btn {
    display: inline-block; padding: 10px 18px; border-radius: 6px; border: none;
    font-size: 14px; font-weight: 600; cursor: pointer; text-align: center;
}
.btn-primary { background: var(--primary); color: var(--primary-text, #fff); }
.btn-primary:hover { background: var(--primary-hover); text-decoration: none; color: var(--primary-text, #fff); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: #e5e7eb; color: var(--text); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-link { background: none; border: none; color: var(--danger); cursor: pointer; padding: 0; font-size: 13px; }
.btn-danger { background: var(--danger, #dc2626); color: #fff; }
.btn-danger:hover { background: #b91c1c; text-decoration: none; color: #fff; }
.form-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Panel de administración de usuarios ---- */
.user-row { border-bottom: 1px solid var(--border); padding: 16px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.user-row.user-suspended { background: #fef2f2; margin: 0 -12px; padding: 16px 12px; border-radius: 6px; }
.user-info { flex: 1; min-width: 260px; }
.user-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-meta { font-size: 13px; margin: 4px 0; }
.user-store { font-size: 13px; margin-top: 4px; }
.suspend-reason { font-size: 13px; color: var(--danger); margin-top: 4px; }
.user-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.action-form { flex-basis: 100%; margin-top: 12px; padding: 14px; background: #f9fafb; border-radius: 8px; }
.action-form-danger { background: #fef2f2; border: 1px solid #fecaca; }

.mod-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mod-product { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mod-product-img img, .mod-product-img .thumb-placeholder { width: 100%; height: 140px; object-fit: cover; display: block; }
.mod-product-info { padding: 12px; }
.mod-desc { font-size: 12px; color: var(--muted); margin: 6px 0; }

.btn-whatsapp { display: inline-block; background: #25D366; color: #fff; padding: 10px 18px; border-radius: 6px; font-weight: 600; margin-top: 10px; }
.btn-whatsapp:hover { background: #1ebe5b; text-decoration: none; color: #fff; }
.whatsapp-float {
    position: fixed; bottom: 20px; right: 20px; background: #25D366; color: #fff;
    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 26px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
    z-index: 999; text-decoration: none;
}
.whatsapp-float:hover { text-decoration: none; filter: brightness(1.05); }

.oauth-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.btn-oauth {
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px;
    border-radius: 6px; font-weight: 600; font-size: 14px;
}
.btn-oauth svg { flex-shrink: 0; }
.btn-google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(0,0,0,.15); text-decoration: none; }
.btn-facebook { background: #1877F2; color: #fff; border: 1px solid #1877F2; }
.btn-facebook:hover { background: #166fe0; text-decoration: none; color: #fff; }
.divider { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 13px; margin: 16px 0; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); }
.divider span { padding: 0 10px; }

.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
.alert-error { background: #fee2e2; color: #991b1b; }
.alert-success { background: #dcfce7; color: #166534; }

.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; }
.stat-number { display: block; font-size: 26px; font-weight: 700; color: var(--primary); }
.stat-label { color: var(--muted); font-size: 13px; }

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 14px; white-space: nowrap; }
.store-body .table th, .store-body .table td { border-bottom-color: var(--store-border, var(--border)); }

.badge { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge-pendiente { background: #fef3c7; color: #92400e; }
.badge-pagado { background: #dcfce7; color: #166534; }
.badge-enviado { background: #dbeafe; color: #1e40af; }
.badge-entregado { background: #d1fae5; color: #065f46; }
.badge-cancelado { background: #fee2e2; color: #991b1b; }

.image-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.image-thumb { position: relative; width: 90px; height: 90px; }
.image-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.image-thumb a { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.preview-sm { max-width: 120px; display: block; margin-top: 8px; border-radius: 6px; }
.img-hint {
    font-size: 13px; color: var(--muted); background: #f0f9ff; border-left: 3px solid #38bdf8;
    padding: 8px 12px; border-radius: 4px; margin: 6px 0 4px;
}
.img-hint strong { color: var(--text); }

.order-block { border-bottom: 1px solid var(--border); padding: 16px 0; }
.order-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 8px; }
.order-items { margin: 8px 0; padding-left: 18px; font-size: 14px; }
.inline-form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

.qr-share { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.qr-share img { border: 1px solid var(--border); border-radius: 8px; }

.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
.plan-card {
    background: #fff; border: 2px solid var(--border); border-radius: 10px; padding: 22px;
    display: flex; flex-direction: column; position: relative;
}
.plan-card.current { border-color: var(--primary); }
.plan-current-badge {
    position: absolute; top: -11px; left: 16px; background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 10px;
}
.plan-card h2 { margin: 4px 0 8px; font-size: 18px; }
.plan-price { font-size: 26px; font-weight: 800; color: var(--primary); margin: 0 0 16px; }
.plan-price span { font-size: 13px; font-weight: 500; color: var(--muted); }
.plan-features { list-style: none; padding: 0; margin: 0 0 20px; flex-grow: 1; }
.plan-features li { font-size: 13px; padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
.plan-card .btn { width: 100%; }

.payment-log-row { border-bottom: 1px solid var(--border); padding: 14px 0; }
.payment-log-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }

/* ---- Generador de matriz de variantes (admin) ---- */
.matrix-generator { margin: 12px 0; padding: 12px; background: var(--surface, #f8fafc); border: 1px solid var(--border); border-radius: 8px; }
.matrix-generator summary { cursor: pointer; font-weight: 600; }
.matrix-inputs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.matrix-inputs input { flex: 1 1 180px; }

/* ---- Selectores de variantes combinadas (tienda) ---- */
.combined-selects { display: flex; flex-wrap: wrap; gap: 10px; }
.combined-selects > div { flex: 1 1 140px; }

/* ---- Aviso IA próximamente ---- */
.ai-soon { font-size: 13px; color: var(--muted); background: linear-gradient(90deg, #eff4ff, #fdf4ff); border: 1px dashed #c7d2fe; border-radius: 8px; padding: 8px 12px; margin: 6px 0 12px; }

/* ---- Barra de almacenamiento ---- */
.storage-bar { width: 100%; height: 8px; background: var(--border); border-radius: 6px; margin-top: 8px; overflow: hidden; }
.storage-bar-fill { height: 100%; background: var(--primary); border-radius: 6px; transition: width .3s; }
.storage-bar-fill.danger { background: #dc2626; }

/* ---- Videos de producto ---- */
.product-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 14px; border-radius: 10px; overflow: hidden; background: #000; }
.product-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.product-video-file { width: 100%; margin-top: 14px; border-radius: 10px; background: #000; max-height: 420px; }

/* ---- Selector de método de pago en el checkout ---- */
.pay-option {
    display: flex; align-items: flex-start; gap: 10px; padding: 14px;
    border: 1px solid var(--store-border, var(--border)); border-radius: 10px;
    margin-bottom: 10px; cursor: pointer; font-weight: 400;
}
.pay-option:hover { border-color: var(--primary); }
.pay-option input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
.pay-option .muted { font-size: 13px; }

/* ---- Pantalla de resultado del pago ---- */
.payment-result { text-align: center; padding: 36px 24px; }
.payment-result .result-icon { font-size: 52px; margin-bottom: 12px; }
.payment-result h1 { margin-bottom: 12px; }
.result-actions { margin-top: 24px; }

/* ---- Tienda pública ---- */
.store-header { background: var(--store-surface, #fff); border-bottom: 1px solid var(--store-border, var(--border)); }
.store-header-inner { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.store-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--store-text, var(--text)); }
.store-brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.store-brand-name { color: var(--primary); }
.cart-link { font-weight: 600; color: var(--store-text, var(--text)); }
.store-main { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
/* Breadcrumb: alineado al mismo contenedor de 1100px que el resto de la
   tienda (antes no tenía estilos y quedaba pegado al borde izquierdo). */
.breadcrumbs { font-size: 13px; }
.breadcrumbs-inner { max-width: 1100px; margin: 0 auto; padding: 12px 20px 0; color: var(--store-muted, #6b7280); }
.breadcrumbs a { color: var(--store-muted, #6b7280); }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs .crumb-sep { margin: 0 6px; }
.breadcrumbs span:last-child { color: var(--store-text, var(--text)); font-weight: 600; }
.store-footer { text-align: center; padding: 24px; color: var(--store-muted, var(--muted)); font-size: 13px; }
.store-banner img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; }
.store-intro { margin: 20px 0; }
.store-intro h1 { color: var(--primary); }

.category-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.category-pill {
    display: inline-block; padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 600;
    background: var(--store-surface, #fff); border: 1px solid var(--store-border, var(--border)); color: var(--store-text, var(--text));
}
.category-pill:hover { text-decoration: none; border-color: var(--primary); }
.category-pill.active { background: var(--primary); color: var(--primary-text, #fff); border-color: var(--primary); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; margin-top: 20px; }
.product-card { position: relative; background: var(--store-surface, #fff); border: 1px solid var(--store-border, var(--border)); border-radius: 10px; overflow: hidden; color: var(--store-text, var(--text)); display: block; }
.product-card:hover { border-color: var(--primary); text-decoration: none; }
.product-thumb { aspect-ratio: 1; background: var(--store-border, #f3f4f6); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--store-muted, var(--muted)); font-size: 13px; }
.thumb-placeholder.large { aspect-ratio: 1; }
.product-info { padding: 12px; }
.product-info h3 { font-size: 15px; margin: 0 0 6px; }
.price { font-weight: 700; color: var(--primary); }
.tag { display: inline-block; background: #eef2ff; color: #4338ca; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 6px; font-weight: 600; }
.tag.tag-oferta { background: #fee2e2; color: #991b1b; }
.tag.tag-nuevo { background: #dbeafe; color: #1e40af; }
.tag.tag-mas_vendido { background: #fef3c7; color: #92400e; }
.tag.tag-ultimas_unidades { background: #fee2e2; color: #991b1b; }
.tag.tag-envio_gratis { background: #dcfce7; color: #166534; }
.product-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px;
}
.product-badge.tag-oferta { background: #fee2e2; color: #991b1b; }
.product-badge.tag-nuevo { background: #dbeafe; color: #1e40af; }
.product-badge.tag-mas_vendido { background: #fef3c7; color: #92400e; }
.product-badge.tag-ultimas_unidades { background: #fee2e2; color: #991b1b; }
.product-badge.tag-envio_gratis { background: #dcfce7; color: #166534; }

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.main-image { width: 100%; border-radius: 10px; object-fit: cover; aspect-ratio: 1; }
.thumb-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb-small { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid var(--store-border, var(--border)); }
.price-lg { font-size: 24px; font-weight: 700; color: var(--primary); }
.out-of-stock { color: var(--danger); font-weight: 600; }
.product-summary h1 { color: var(--primary); }

.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.order-summary .summary-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--store-border, var(--border)); }
.order-summary .total { font-weight: 700; font-size: 16px; border-bottom: none; }
.total-line { font-size: 18px; margin: 16px 0; }

/* ---- Reseñas y productos relacionados ---- */
.review-summary-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--store-muted, var(--muted)); margin: 4px 0; }
.stars { color: #f59e0b; letter-spacing: 1px; }
.reviews-section, .related-section { margin-top: 40px; }
.reviews-section h2, .related-section h2 { font-size: 20px; margin-bottom: 16px; }
.reviews-list { margin-bottom: 20px; }
.review-item { border-bottom: 1px solid var(--store-border, var(--border)); padding: 14px 0; }
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.review-date { font-size: 12px; }
.review-form-wrap { margin-top: 20px; border: 1px solid var(--store-border, var(--border)); border-radius: 8px; padding: 14px 18px; }
.review-form-wrap summary { cursor: pointer; font-weight: 600; }
.review-form { margin-top: 12px; max-width: 480px; }
.star-input { display: flex; gap: 4px; font-size: 28px; cursor: pointer; }
.star-input .star-radio { margin: 0; cursor: pointer; }
.star-input .star-radio input { display: none; }
.star-input span { color: #f59e0b; }

/* ---- Selector de tema claro/oscuro (en Mi tienda) ---- */
.theme-options { display: flex; gap: 16px; margin: 8px 0 16px; flex-wrap: wrap; }
.theme-option { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin: 0; cursor: pointer; }
.theme-option input { width: auto; }
.theme-swatch {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 6px; border: 1px solid var(--border); font-size: 12px; font-weight: 700;
}
.theme-swatch-light { background: #ffffff; color: #1f2937; }
.theme-swatch-dark { background: #0f172a; color: #f1f5f9; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .product-detail, .checkout-layout { grid-template-columns: 1fr; }

    .admin-topbar {
        display: flex; align-items: center; gap: 14px; background: #111827; color: #fff;
        padding: 14px 18px; position: sticky; top: 0; z-index: 60;
    }
    .sidebar-toggle { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
    .admin-topbar-brand { font-weight: 700; font-size: 16px; }
    .admin-sidebar { width: 240px; transform: translateX(-100%); transition: transform .2s ease; }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main, .admin-sidebar ~ .admin-main { margin-left: auto; margin-right: auto; padding: 20px 14px; }
    .sidebar-overlay {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
        opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 40;
    }
    .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
}

@media (max-width: 600px) {
    .admin-main, .store-main { padding: 20px 14px; }
    .auth-card, .card { padding: 18px; }
    h1 { font-size: 22px; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .whatsapp-float { width: 50px; height: 50px; font-size: 22px; bottom: 14px; right: 14px; }
    /* Evita el zoom automático de iOS al enfocar campos de formulario */
    input, select, textarea { font-size: 16px; }
    .variant-row { flex-wrap: wrap; }
    .variant-row input { flex: 1 1 100px; }
}

/* ---- Diseño de tienda (admin) ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.banner-list { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.banner-item { width: 220px; }
.banner-item img { width: 100%; height: 82px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.banner-item form { margin-top: 6px; }

/* ============================================================
   REDISEÑO DE TIENDA PÚBLICA (estilo catálogo profesional)
   Usa las variables de tema de la tienda: --primary (color de
   marca), --store-bg, --store-text, --store-surface, --store-border
   ============================================================ */

/* --- Barra superior --- */
.store-topbar { background: #10151f; color: #cbd5e1; font-size: 13px; }
.store-topbar-inner { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.store-topbar a { color: #fff; text-decoration: none; }
.store-topbar a:hover { text-decoration: underline; }

/* --- Sub-nav de categorías + franja de envíos --- */
.store-subnav { background: var(--store-surface, #f8fafc); border-bottom: 1px solid var(--store-border, #e2e8f0); }
.store-subnav-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.subnav-cats { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
.subnav-cats::-webkit-scrollbar { display: none; }
.subnav-cats-wrap { position: relative; display: flex; align-items: center; min-width: 0; flex: 1; }
.subnav-cats-wrap .subnav-cats { flex: 1; min-width: 0; }
.subnav-arrow { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--store-surface, #f8fafc); color: var(--store-text, #0f172a); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15); z-index: 2; }
.subnav-arrow.is-hidden { visibility: hidden; pointer-events: none; opacity: 0; }
/* Las flechas solo tienen sentido con mouse/trackpad: en touch, el swipe
   nativo ya mueve las categorías sin necesidad de botones. */
@media (hover: hover) and (pointer: fine) {
    .subnav-cats-wrap.has-overflow .subnav-arrow { display: flex; }
    .subnav-arrow-left { margin-right: 4px; }
    .subnav-arrow-right { margin-left: 4px; }
}
.subnav-link { display: inline-block; padding: 12px 12px; font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--store-text, #0f172a); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav-link:hover, .subnav-link.active { color: var(--primary); border-bottom-color: var(--primary); }
.subnav-shipping { font-size: 13px; color: var(--primary); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .subnav-shipping { display: none; } }

/* --- Carrusel de banners --- */
.hero-slider { position: relative; max-width: 1100px; margin: 16px auto 0; padding: 0 16px; }
.hero-slide { display: none; }
.hero-slide.active { display: block; }
.hero-slide img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; display: block; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: #0f172a; font-size: 22px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25); z-index: 2; }
.slider-arrow.prev { left: 28px; }
.slider-arrow.next { right: 28px; }
.slider-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.slider-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); }
.slider-dots .dot.active { background: #fff; }

/* --- Buscador --- */
.store-search { max-width: 560px; margin: 6px auto 18px; padding: 0 16px; }
.store-search input { width: 100%; padding: 13px 18px; border-radius: 30px; border: 1px solid var(--store-border, #e2e8f0); background: var(--store-surface, #fff); color: var(--store-text, #0f172a); font-size: 15px; box-shadow: 0 2px 12px rgba(15,23,42,.05); }
.store-search input:focus { outline: 2px solid var(--primary); border-color: transparent; }

/* --- Tarjeta de producto rediseñada --- */
.product-card { position: relative; display: flex; flex-direction: column; background: var(--store-surface, #fff); border: 1px solid var(--store-border, #e2e8f0); border-radius: 16px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15,23,42,.12); }
.product-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.card-stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
.price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-compare { color: #94a3b8; text-decoration: line-through; font-size: 14px; }
.card-add { margin: 0 12px 12px; text-align: center; background: #10151f; color: #fff; border-radius: 10px; padding: 11px; font-weight: 600; font-size: 14px; border: none; cursor: pointer; width: calc(100% - 24px); transition: background .2s; }
.card-add:hover { background: var(--primary); color: var(--primary-text, #fff); }
.card-add.disabled { background: var(--store-border, #e2e8f0); color: var(--store-text, #64748b); cursor: not-allowed; }
.product-card form { margin: 0; }

/* --- Countdown de oferta --- */
.offer-countdown { position: absolute; top: 44px; left: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.cd-box { background: rgba(255,255,255,.95); border: 1px solid #fecaca; border-radius: 8px; padding: 3px 7px; text-align: center; line-height: 1.1; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.cd-box b { display: block; font-size: 13px; color: #dc2626; }
.cd-box small { font-size: 8.5px; color: #64748b; letter-spacing: .5px; }

/* --- Secciones informativas --- */
.store-section { max-width: 1100px; margin: 0 auto; padding: clamp(2.2rem, 6vw, 4rem) 16px; text-align: center; }
.section-chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; padding: 6px 16px; border: 1px solid var(--store-border, #e2e8f0); border-radius: 20px; background: var(--store-surface, #fff); color: var(--store-text, #334155); margin-bottom: 14px; }
.section-title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 26px; color: var(--store-text, #0f172a); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; text-align: center; }
.why-card { background: var(--store-surface, #fff); border: 1px solid var(--store-border, #e2e8f0); border-radius: 18px; padding: 30px 22px; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
.why-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--store-bg, #f1f5f9); font-size: 24px; margin-bottom: 14px; border: 1px solid var(--store-border, #e2e8f0); }
.why-card h3 { margin: 0 0 8px; font-size: 17px; }
.why-card p { margin: 0; color: var(--primary); font-size: 14.5px; }

.story-text { max-width: 60ch; margin: 0 auto 26px; color: var(--store-text, #334155); text-align: left; line-height: 1.7; }
.story-stats { display: flex; gap: 40px; justify-content: flex-start; max-width: 60ch; margin: 0 auto; flex-wrap: wrap; }
.stat { text-align: left; }
.stat-big { display: block; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; color: var(--store-text, #0f172a); line-height: 1; }
.stat-small { font-size: 11.5px; letter-spacing: 1px; color: var(--primary); font-weight: 600; }

.testimonial-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.testimonial-card { background: var(--store-surface, #fff); border: 1px solid var(--store-border, #e2e8f0); border-radius: 18px; padding: 26px 22px; text-align: left; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
.testimonial-quote { font-style: italic; color: var(--store-text, #334155); margin: 0 0 18px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--store-bg, #f1f5f9); border: 1px solid var(--store-border, #e2e8f0); font-weight: 700; font-size: 13px; color: var(--store-text, #0f172a); flex-shrink: 0; }

/* --- Animación de entrada (respeta reduced motion) --- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(0,0,.2,1), transform .6s cubic-bezier(0,0,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .product-card:hover { transform: none; }
}

/* --- Preguntas frecuentes (acordeón nativo con <details>) --- */
.faq-list { max-width: 720px; margin: 0 auto; text-align: left; }
.faq-item { background: var(--store-surface, #fff); border: 1px solid var(--store-border, #e2e8f0); border-radius: 10px; margin-bottom: 10px; padding: 0 18px; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 15px 0; color: var(--store-text, #0f172a); list-style: none; position: relative; padding-right: 28px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--primary); font-weight: 700; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0 0 15px; color: var(--store-muted, #475569); line-height: 1.6; }

/* Línea "Todo lo del plan anterior, más:" en las tarjetas de planes */
.plan-inherits { font-size: 13px; color: var(--primary); margin: 0 0 10px; line-height: 1.4; }
/* Botón de texto para acciones destructivas (eliminar pedido) */
.btn-link-danger { background: none; border: none; color: #b91c1c; cursor: pointer; font-size: 13px; padding: 6px 4px; text-decoration: underline; }
.btn-link-danger:hover { color: #7f1d1d; }

/* Guía SEO desplegable en los formularios del panel */
.seo-tips { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 0 14px; margin: 8px 0 4px; }
.seo-tips summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--primary); padding: 11px 0; list-style: none; }
.seo-tips summary::-webkit-details-marker { display: none; }
.seo-tips[open] summary { border-bottom: 1px solid var(--border); }
.seo-tips ul { margin: 12px 0 14px; padding-left: 18px; }
.seo-tips li { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 9px; }
.seo-tips li strong { color: var(--text); }

/* --- Pestañas Descripción / Reseñas en la página de producto (v24.8) --- */
.reviews-section .tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--store-border, #e2e8f0); margin-bottom: 22px; flex-wrap: wrap; }
.reviews-section .tab-btn { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 12px 18px; font-size: 16px; font-weight: 600; color: var(--store-muted, #64748b); cursor: pointer;
  font-family: inherit; transition: color .15s, border-color .15s; }
.reviews-section .tab-btn:hover { color: var(--store-text, #0f172a); }
.reviews-section .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.reviews-section .tab-count { display: inline-block; background: var(--store-border, #e2e8f0); color: var(--store-text, #0f172a);
  border-radius: 10px; font-size: 12px; padding: 1px 8px; margin-left: 4px; vertical-align: middle; }
.reviews-section .tab-btn.active .tab-count { background: var(--primary); color: var(--primary-text, #fff); }
.reviews-section .tab-panel { display: none; }
.reviews-section .tab-panel.active { display: block; }
.reviews-section .long-description { line-height: 1.75; color: var(--store-text, #334155); white-space: normal; }
.reviews-section .reviews-avg { margin: 0 0 16px; font-size: 17px; }
@media (max-width: 480px) {
  .reviews-section .tab-btn { padding: 11px 13px; font-size: 15px; }
}
/* Selector de plan en administración de usuarios (v24.8) */
.plan-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-form select { width: auto; min-width: 150px; margin: 0; padding: 7px 10px; font-size: 14px; }
.plan-form-label { margin: 0 !important; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ===========================================================================
   CRO v30.4 — Barra de compra persistente y modo checkout enfocado
   Ambos reutilizan los tokens de la tienda (--primary, --store-surface,
   --store-border, --store-text) para heredar el color y el tema (claro/oscuro)
   que cada vendedor configura, sin introducir una paleta propia.
   =========================================================================== */

/* --- Barra de compra persistente (ficha de producto) ---------------------
   Aparece solo cuando el botón real de "Agregar al carrito" sale de la vista,
   para que en fichas largas el comprador nunca tenga que buscar cómo comprar.
   No sustituye al formulario: lo envía, así se respetan variante y cantidad. */
.buy-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
    background: var(--store-surface, #fff);
    border-top: 1px solid var(--store-border, var(--border));
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .10);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform .25s ease;
    visibility: hidden;
}
.buy-bar.visible { transform: none; visibility: visible; }
.buy-bar-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; gap: 14px;
}
.buy-bar-info { flex: 1; min-width: 0; }
.buy-bar-name {
    font-size: 13px; font-weight: 600; color: var(--store-text, var(--text));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buy-bar-price { font-size: 19px; font-weight: 700; color: var(--primary); line-height: 1.25; }
.buy-bar .btn { flex-shrink: 0; padding: 12px 22px; }

/* El flotante de WhatsApp vive en la misma esquina: se eleva para no quedar
   tapado por la barra (y vuelve a su sitio cuando la barra se oculta). */
.buy-bar-open .whatsapp-float { bottom: 92px; transition: bottom .25s ease; }

@media (max-width: 640px) {
    .buy-bar-inner { gap: 10px; }
    .buy-bar .btn { padding: 12px 16px; font-size: 13.5px; }
    .buy-bar-price { font-size: 17px; }
    /* En móvil el nombre compite por el ancho con el botón: se omite y queda
       el precio, que es el dato que el comprador necesita confirmar. */
    .buy-bar-name { display: none; }
}

/* --- Modo checkout enfocado ---------------------------------------------
   En el paso de pago se retira la navegación de catálogo: el comprador solo
   debe poder avanzar (pagar) o retroceder (volver al carrito). Se conserva la
   marca para no perder la sensación de "sigo en la misma tienda". */
.store-header.checkout-header .store-header-inner { padding: 14px 20px; }
.store-header.checkout-header .store-brand { cursor: default; }
.checkout-secure {
    display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: 13px; font-weight: 600; color: var(--store-muted, var(--muted));
}
.checkout-secure .secure-badge {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--store-text, var(--text));
}
.checkout-back { color: var(--store-muted, var(--muted)); font-weight: 600; }
.checkout-back:hover { color: var(--primary); }

/* ===========================================================================
   Guías de pasarelas de pago (v30.6)
   Acordeón con las instrucciones reales para obtener Token / Store ID, los
   datos exactos que el vendedor debe copiar y los enlaces de acceso directo
   a cada plataforma, para que no tenga que salir a buscar el sitio correcto.
   =========================================================================== */
.gw-guide {
    margin: 10px 0 4px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; overflow: hidden;
}
.gw-guide > summary {
    cursor: pointer; padding: 11px 14px; font-size: 13.5px; font-weight: 600;
    color: var(--primary); background: #f8fafc; list-style: none;
}
.gw-guide > summary::-webkit-details-marker { display: none; }
.gw-guide > summary::after { content: ' ▾'; color: var(--muted); }
.gw-guide[open] > summary { border-bottom: 1px solid var(--border); }
.gw-guide[open] > summary::after { content: ' ▴'; }
.gw-steps {
    margin: 14px 0 10px; padding: 0 16px 0 34px;
    font-size: 13.5px; color: var(--text); line-height: 1.65;
}
.gw-steps li { margin-bottom: 9px; }
.gw-note {
    margin: 0 14px 14px; padding: 9px 12px; border-radius: 6px;
    background: #fffbeb; border-left: 3px solid #f59e0b;
    font-size: 13px; color: var(--text); line-height: 1.55;
}
.gw-fields { padding: 0 14px 4px; }
.gw-field-label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--muted); margin: 8px 0 4px;
}
/* Campos de solo lectura: se seleccionan al hacer clic para copiar de una vez. */
input.gw-copy {
    width: 100%; margin: 0; padding: 9px 11px; font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #f8fafc; border: 1px dashed var(--border); border-radius: 6px;
    color: var(--text); cursor: pointer;
}
.gw-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; }
.gw-link { font-size: 13px; }
@media (max-width: 560px) {
    .gw-links { flex-direction: column; }
    .gw-links .gw-link { width: 100%; }
}