/**
 * NegocioGo Design System (ng-*)
 * Inspirado en patrones modernos tipo 21st.dev, adaptado a identidad NegocioGo.
 * Verde · Navy · Cards limpias · Mobile app feel
 */

/* —— AppCard —— */
.app-card,
.ng-app-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.app-card--flat {
    box-shadow: none;
}

.app-card--interactive {
    transition: border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
}

.app-card--interactive:hover {
    border-color: rgba(14, 143, 102, 0.28);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.app-card__eyebrow {
    margin: 0 0 0.35rem;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-slate-muted);
}

.app-card__title {
    margin: 0 0 0.35rem;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    line-height: 1.25;
}

.app-card__desc {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--brand-slate);
}

/* Bridge: seller dashboard cards */
.dash-hero,
.dash-stat-card,
.qr-card,
.stats-kpi,
.seller-product-card,
.seller-service-card {
    border-color: var(--color-border);
    box-shadow: var(--shadow-xs);
}

/* —— AppButton —— */
.app-btn,
.ng-app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    box-sizing: border-box;
    white-space: nowrap;
}

.app-btn:active {
    transform: scale(0.98);
}

@media (hover: hover) {
    .app-btn:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    .app-btn:active:not(:disabled) {
        transform: scale(0.98);
    }
}

.app-btn:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

.app-btn--primary {
    background: linear-gradient(180deg, var(--brand-green-bright) 0%, var(--brand-green) 100%);
    color: #fff;
    box-shadow: var(--shadow-green);
}

.app-btn--primary:hover {
    background: linear-gradient(180deg, var(--brand-green) 0%, var(--brand-green-hover) 100%);
    color: #fff;
}

.app-btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-ink);
}

.app-btn--secondary:hover {
    border-color: rgba(14, 143, 102, 0.35);
    background: var(--brand-green-muted);
    color: var(--brand-green-hover);
}

.app-btn--ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--brand-slate);
}

.app-btn--ghost:hover {
    background: var(--color-surface-muted);
    color: var(--color-ink);
}

.app-btn--danger {
    background: var(--color-danger-bg);
    border-color: #fecaca;
    color: var(--color-danger);
}

.app-btn--sm {
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

.app-btn--block {
    width: 100%;
}

.app-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.app-actions--stack {
    flex-direction: column;
    align-items: stretch;
}

/* Bridge buttons */
.dash-btn--primary,
.creator-btn-primary,
.map-btn--primary,
.landing-search-submit {
    background: linear-gradient(180deg, var(--brand-green-bright) 0%, var(--brand-green) 100%);
}

/* —— AppBadge —— */
.app-badge,
.ng-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.3;
    border: 1px solid transparent;
}

.app-badge--green {
    background: var(--brand-green-soft);
    color: #166534;
    border-color: #bbf7d0;
}

.app-badge--navy {
    background: #f1f5f9;
    color: var(--brand-navy);
    border-color: #e2e8f0;
}

.app-badge--muted {
    background: #f4f4f5;
    color: var(--color-muted);
    border-color: var(--color-border);
}

.app-badge--warning {
    background: var(--color-warning-bg);
    color: #92400e;
    border-color: #fde68a;
}

.app-badge--dot::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

/* —— AppStatCard —— */
.app-stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    min-width: 0;
}

.app-stat-card__label {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-slate-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.app-stat-card__value {
    margin: 0;
    font-size: clamp(1.25rem, 4vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-ink);
    line-height: 1.1;
    word-break: break-word;
}

.app-stat-card__hint {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--brand-slate-muted);
}

.app-stat-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .app-stat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* —— AppEmptyState —— */
.app-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.25rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface-muted);
}

.app-empty-state__icon {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.85rem;
    border-radius: var(--radius-lg);
    background: var(--brand-green-muted);
    color: var(--brand-green);
    display: grid;
    place-items: center;
}

.app-empty-state__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 1.75;
}

.app-empty-state__title {
    margin: 0 0 0.4rem;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-ink);
}

.app-empty-state__text {
    margin: 0 0 1rem;
    max-width: 22rem;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--brand-slate);
}

/* Bridge legacy empty-state */
.empty-state.app-card,
.empty-state {
    border-style: dashed;
    background: var(--color-surface-muted);
    text-align: center;
    padding: 1.75rem 1.25rem;
}

.empty-state-title {
    margin: 0 0 0.4rem;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-ink);
}

.empty-state-text {
    margin: 0 0 1rem;
    font-size: var(--text-sm);
    color: var(--brand-slate);
    line-height: 1.5;
}

/* —— AppPremiumLock —— */
.app-premium-lock,
.ng-app-premium-lock {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(14, 143, 102, 0.35);
    background: linear-gradient(135deg, #f8fafc 0%, var(--brand-green-muted) 100%);
}

.app-premium-lock__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--brand-green-soft);
    color: #166534;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-premium-lock__title {
    margin: 0 0 0.25rem;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-ink);
}

.app-premium-lock__lead {
    margin: 0 0 0.65rem;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--brand-slate);
}

.app-premium-lock__cta {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--brand-green);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
}

.app-premium-lock__cta:hover {
    background: var(--brand-green-hover);
    color: #fff;
}

.catalog-analytics--locked .catalog-analytics-locked__inner {
    padding: 0;
    border: none;
    background: transparent;
}

/* —— AppTabs —— */
.app-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: #f1f5f9;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.app-tabs__btn {
    flex: 1 0 auto;
    min-height: 36px;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--brand-slate-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
}

.app-tabs__btn.is-active,
.app-tabs__btn[aria-selected="true"] {
    background: #fff;
    color: var(--color-ink);
    box-shadow: var(--shadow-xs);
}

/* —— AppModal / BottomSheet —— */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.app-modal {
    position: fixed;
    z-index: 1101;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 28rem);
    max-height: min(85vh, 640px);
    overflow: auto;
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
}

.app-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    max-height: 85vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    background: var(--color-surface);
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-bottom-sheet__handle {
    width: 2.5rem;
    height: 0.25rem;
    margin: 0.65rem auto 0.5rem;
    border-radius: var(--radius-pill);
    background: #cbd5e1;
}

/* —— AppToast —— */
.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    max-width: min(92vw, 24rem);
}

.app-toast--success {
    border-color: #bbf7d0;
    background: var(--brand-green-soft);
    color: #166534;
}

.app-toast--error {
    border-color: #fecaca;
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* —— AppSkeleton —— */
.app-skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: ng-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes ng-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* —— AppMapBusinessCard —— */
.app-map-business-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.app-map-business-card__head {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.app-map-business-card__logo {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

.app-map-business-card__name {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-ink);
}

.app-map-business-card__meta {
    margin: 0.15rem 0 0;
    font-size: var(--text-xs);
    color: var(--brand-slate-muted);
}

.app-map-business-card__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 400px) {
    .app-map-business-card__actions--duo {
        grid-template-columns: 1fr 1fr;
    }
}

/* —— AppTableMobileCards —— */
.app-mobile-cards {
    display: grid;
    gap: 0.75rem;
}

.app-mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.2rem 0;
    font-size: var(--text-sm);
}

.app-mobile-card-row dt {
    margin: 0;
    color: var(--brand-slate-muted);
    font-weight: 600;
}

.app-mobile-card-row dd {
    margin: 0;
    color: var(--color-ink);
    font-weight: 600;
    text-align: right;
}

/* —— Forms (inputs) —— */
.app-input,
.app-select,
.app-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 1rem;
    color: var(--color-text);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.app-input:focus,
.app-select:focus,
.app-textarea:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(14, 143, 102, 0.12);
}

.app-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-soft);
}

/* —— Landing hero CTA row —— */
.landing-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.landing-hero-cta-row .app-btn {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 639px) {
    .landing-hero-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-hero-cta-row .app-btn {
        width: 100%;
    }
}

/* —— Mentor chat polish —— */
.mentor-page {
    --mentor-accent: var(--brand-green);
    --mentor-accent-soft: var(--brand-green-soft);
    --mentor-border: #e2e8f0;
    --mentor-text: var(--brand-navy);
    --mentor-muted: var(--brand-slate-muted);
}

.mentor-context-card,
.mentor-chat-panel {
    border-radius: var(--radius-xl);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xs);
}

.mentor-msg--assistant {
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
    background: #f8fafc;
    border: 1px solid var(--color-border);
}

.mentor-msg--user {
    border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
    background: var(--brand-green-soft);
    border: 1px solid #bbf7d0;
}

.mentor-composer textarea {
    border-radius: var(--radius-lg);
    border-color: var(--color-border);
    font-size: 1rem;
}

.mentor-composer textarea:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(14, 143, 102, 0.12);
}

.mentor-chip {
    border-radius: var(--radius-pill);
    border-color: var(--color-border);
    background: var(--color-surface);
    font-size: var(--text-sm);
}

.mentor-chip:hover {
    border-color: rgba(14, 143, 102, 0.35);
    background: var(--brand-green-muted);
    color: var(--brand-green-hover);
}

/* —— Dashboard seller (Shopify-like) —— */
.dash-metrics {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .dash-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.dash-metric {
    padding: 1rem 1.05rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    min-width: 0;
}

.dash-metric span {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-slate-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-metric strong {
    display: block;
    margin-top: 0.25rem;
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-ink);
}

.dash-metric small {
    font-size: var(--text-xs);
    color: var(--brand-slate-muted);
}

.dash-tool-card {
    border-radius: var(--radius-xl);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}

.dash-tool-card:hover {
    border-color: rgba(14, 143, 102, 0.28);
    box-shadow: var(--shadow-md);
}

.dash-tool-card--mentor {
    background: linear-gradient(145deg, #f8fafc 0%, var(--brand-green-muted) 100%);
}

.dash-activity-empty {
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius-xl);
    border: 1px dashed var(--color-border-strong);
    background: var(--color-surface-muted);
    text-align: center;
}

.dash-alert {
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.dash-alert--warn {
    background: var(--color-warning-bg);
    border-color: #fde68a;
    color: #92400e;
}

.dash-alert--info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

/* —— Seller catalog cards premium —— */
.seller-product-card,
.seller-service-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}

.seller-product-card:hover,
.seller-service-card:hover {
    border-color: rgba(14, 143, 102, 0.22);
    box-shadow: var(--shadow-md);
}

.seller-product-card__price {
    color: var(--color-ink);
    letter-spacing: -0.02em;
}

/* —— Mobile: disable heavy effects —— */
@media (max-width: 768px) {
    .app-card--interactive:hover {
        transform: none;
    }

    .app-modal-backdrop {
        backdrop-filter: none;
    }

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

@media (max-width: 430px) {
    .app-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* —— Badges globales —— */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge__icon {
    display: inline-flex;
    flex-shrink: 0;
    opacity: 0.9;
}

.badge__icon svg {
    display: block;
}

.badge-success {
    background: #ecfdf5;
    color: #166534;
    border-color: rgba(22, 101, 52, 0.12);
}

.badge-muted {
    background: #f1f5f9;
    color: #475569;
    border-color: rgba(71, 85, 105, 0.12);
}

.badge-warning {
    background: #fffbeb;
    color: #92400e;
    border-color: rgba(146, 64, 14, 0.12);
}

.badge-danger {
    background: #fef2f2;
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.12);
}

.badge-info {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.12);
}