/* ============================================================================
   DSA Compliance Marketplace — Design Tokens
   ----------------------------------------------------------------------------
   Variables CSS compartidas por todos los escaparates (App.Server + standalone)
   y por la extranet. Cambiar un token aquí se propaga a las 4 vistas.
   ============================================================================ */

:root {
    /* Color base */
    --mkt-text-strong:    #0f172a;
    --mkt-text:           #1f2937;
    --mkt-text-soft:      #6b7280;
    --mkt-text-muted:     #9ca3af;

    /* Surfaces */
    --mkt-bg:             #ffffff;
    --mkt-bg-soft:        #fafafb;
    --mkt-bg-section:     #f9fafb;
    --mkt-border:         rgba(15, 23, 42, .08);
    --mkt-border-strong:  rgba(15, 23, 42, .16);
    --mkt-border-dashed:  rgba(15, 23, 42, .12);

    /* Brand */
    --mkt-primary:        #6d28d9;     /* violeta DSA */
    --mkt-primary-bg:     rgba(109, 40, 217, .08);
    --mkt-primary-soft:   rgba(109, 40, 217, .15);
    --mkt-success:        #047857;
    --mkt-success-bg:     rgba(4, 120, 87, .1);
    --mkt-warning:        #b45309;
    --mkt-warning-bg:     #fef3c7;
    --mkt-danger:         #b91c1c;
    --mkt-danger-bg:      #fee2e2;
    --mkt-verified:       #1e40af;
    --mkt-verified-bg:    rgba(30, 64, 175, .08);
    --mkt-rating:         #92400e;
    --mkt-rating-bg:      #fef3c7;

    /* Geometría */
    --mkt-radius-card:    14px;
    --mkt-radius-pill:    999px;
    --mkt-radius-chip:    8px;
    --mkt-radius-input:   10px;

    /* Sombras (sutiles, capas como Stripe/Linear) */
    --mkt-shadow-card:    0 1px 2px rgba(15, 23, 42, .04),
                          0 0 0 1px rgba(15, 23, 42, .04);
    --mkt-shadow-card-hover: 0 8px 24px rgba(15, 23, 42, .08),
                              0 2px 4px rgba(15, 23, 42, .06),
                              0 0 0 1px rgba(15, 23, 42, .06);
    --mkt-shadow-section: 0 1px 3px rgba(15, 23, 42, .04);

    /* Tipografía */
    --mkt-font-xs:        .72rem;
    --mkt-font-sm:        .82rem;
    --mkt-font-md:        .92rem;
    --mkt-font-lg:        1.05rem;
    --mkt-font-xl:        1.25rem;
    --mkt-font-2xl:       1.6rem;

    /* Spacing */
    --mkt-gap-xs:         .25rem;
    --mkt-gap-sm:         .5rem;
    --mkt-gap-md:         .85rem;
    --mkt-gap-lg:         1.25rem;

    /* Animaciones */
    --mkt-ease-out:       cubic-bezier(.16, 1, .3, 1);
    --mkt-ease-in-out:    cubic-bezier(.4, 0, .2, 1);
    --mkt-dur-fast:       .15s;
    --mkt-dur-base:       .25s;
    --mkt-dur-slow:       .4s;
}

/* ============================================================================
   Animaciones reutilizables
   ============================================================================ */

@keyframes mkt-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes mkt-shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes mkt-pulse-soft {
    0%, 100% { opacity: 1; }
    50%      { opacity: .6; }
}

/* ============================================================================
   Utility classes
   ============================================================================ */

.mkt-fade-in    { animation: mkt-fade-in-up var(--mkt-dur-base) var(--mkt-ease-out) both; }
.mkt-skeleton {
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 1000px 100%;
    animation: mkt-shimmer 1.6s infinite linear;
    border-radius: var(--mkt-radius-chip);
}

/* ============================================================================
   Pills & badges (usados en tarjetas y fichas)
   ============================================================================ */

.mkt-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: var(--mkt-font-xs);
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--mkt-radius-pill);
    background: #f3f4f6;
    color: var(--mkt-text);
    line-height: 1.4;
    white-space: nowrap;
}
.mkt-pill .rzi { font-size: .9rem; }

.mkt-pill--rating   { background: var(--mkt-rating-bg);   color: var(--mkt-rating); }
.mkt-pill--success  { background: var(--mkt-success-bg);  color: var(--mkt-success); }
.mkt-pill--verified { background: var(--mkt-verified-bg); color: var(--mkt-verified); }
.mkt-pill--warning  { background: var(--mkt-warning-bg);  color: var(--mkt-warning); }
.mkt-pill--danger   { background: var(--mkt-danger-bg);   color: var(--mkt-danger); }
.mkt-pill--muted    { background: #f3f4f6;                color: var(--mkt-text-muted); }

.mkt-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: var(--mkt-font-xs);
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--mkt-radius-chip);
}
.mkt-chip .rzi { font-size: .85rem; }