/* ==========================================================================
   CC PANEL LUXURY — capa de refinamiento visual para las vistas de panel
   (cuenta y vendedor) bajo layouts.sphere-app. Eleva tipografía, botones,
   tarjetas, badges y formularios a la estética de marca Sphere (navy + oro
   sobre crema), sin tocar el marketplace público (.ccx-*).

   Se carga LA ÚLTIMA en el layout para ganar en cascada. Scopeada a
   .sp-panel-content para no afectar cabecera/menú/otras zonas.
   ========================================================================== */

.sp-panel-content {
    --lx-navy: #061426;
    --lx-navy-2: #0b2037;
    --lx-ink: #14203a;
    --lx-gold: #b8891f;
    --lx-gold-2: #d99a21;
    --lx-gold-3: #ffc456;
    --lx-cream: #faf7f0;
    --lx-line: rgba(12, 31, 55, .10);
    --lx-muted: #6b7280;
    --lx-surface: #ffffff;
    --lx-shadow: 0 18px 44px rgba(8, 24, 45, .09);
    --lx-shadow-sm: 0 6px 18px rgba(8, 24, 45, .06);

    color: var(--lx-ink);
    font-feature-settings: "liga" 1, "kern" 1;
    -webkit-font-smoothing: antialiased;
}

/* ---- Tipografía y jerarquía ---- */

.sp-panel-content h1,
.sp-panel-content .cc-section-head h1 {
    color: var(--lx-navy);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
}

.sp-panel-content h2,
.sp-panel-content .cc-section-head h2 {
    color: var(--lx-navy);
    font-weight: 800;
    letter-spacing: -.015em;
}

.sp-panel-content .cc-muted,
.sp-panel-content .cc-section-head p {
    color: var(--lx-muted);
    line-height: 1.6;
}

/* Antetítulo dorado (kicker): sello de identidad Sphere */
.sp-panel-content .cc-kicker,
.sp-panel-content .cc-hero-kicker {
    display: inline-block;
    color: var(--lx-gold);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* ---- Tarjetas ---- */

.sp-panel-content .cc-card,
.sp-panel-content .cc-mini-item,
.sp-panel-content .cc-listing-card {
    background: var(--lx-surface);
    border: 1px solid var(--lx-line);
    border-radius: 18px;
    box-shadow: var(--lx-shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.sp-panel-content a.cc-card:hover,
.sp-panel-content a.cc-listing-card:hover,
.sp-panel-content .cc-mini-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--lx-shadow);
    border-color: rgba(217, 154, 33, .38);
}

.sp-panel-content .cc-card-pad {
    padding: clamp(18px, 3vw, 26px);
}

/* ---- Botones ---- */

.sp-panel-content .cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--lx-line);
    background: var(--lx-surface);
    color: var(--lx-navy);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.sp-panel-content .cc-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(217, 154, 33, .5);
    box-shadow: var(--lx-shadow-sm);
}

/* Primario: navy profundo con filo dorado — el CTA principal de marca */
.sp-panel-content .cc-btn-primary {
    background: linear-gradient(135deg, var(--lx-navy) 0%, var(--lx-navy-2) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 26px rgba(6, 20, 38, .28);
}

.sp-panel-content .cc-btn-primary:hover {
    color: var(--lx-gold-3);
    box-shadow: 0 16px 32px rgba(6, 20, 38, .34);
}

/* Acento dorado (promocionar / destacar) */
.sp-panel-content .cc-btn-promote,
.sp-panel-content .cc-btn-gold {
    background: linear-gradient(135deg, var(--lx-gold-2), var(--lx-gold-3));
    border-color: transparent;
    color: #3a2708;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(217, 154, 33, .28);
}

.sp-panel-content .cc-btn-danger {
    background: #fff;
    border-color: rgba(190, 38, 38, .35);
    color: #b91c1c;
}

.sp-panel-content .cc-btn-danger:hover {
    background: rgba(190, 38, 38, .06);
    border-color: rgba(190, 38, 38, .55);
}

.sp-panel-content .cc-btn-disabled,
.sp-panel-content .cc-btn[disabled],
.sp-panel-content .cc-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---- Badges ---- */

.sp-panel-content .cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(217, 154, 33, .12);
    color: var(--lx-gold);
    border: 1px solid rgba(217, 154, 33, .28);
}

/* ---- Alertas ---- */

.sp-panel-content .cc-alert {
    border-radius: 14px;
    padding: 14px 16px;
    font-size: .92rem;
    line-height: 1.5;
    border: 1px solid var(--lx-line);
}

.sp-panel-content .cc-alert-success {
    background: rgba(22, 130, 92, .08);
    border-color: rgba(22, 130, 92, .28);
    color: #0f6b48;
}

.sp-panel-content .cc-alert-error,
.sp-panel-content .cc-alert-danger {
    background: rgba(190, 38, 38, .07);
    border-color: rgba(190, 38, 38, .3);
    color: #b91c1c;
}

/* ---- Campos de formulario ---- */

.sp-panel-content .cc-field label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--lx-ink);
    letter-spacing: .01em;
}

.sp-panel-content .cc-field input:not([type=checkbox]):not([type=radio]),
.sp-panel-content .cc-field textarea,
.sp-panel-content .cc-field select {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--lx-line);
    border-radius: 14px;
    background: var(--lx-cream);
    color: var(--lx-ink);
    padding: 0 15px;
    font-size: 15px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.sp-panel-content .cc-field textarea {
    min-height: 120px;
    padding: 12px 15px;
    resize: vertical;
}

.sp-panel-content .cc-field input:focus,
.sp-panel-content .cc-field textarea:focus,
.sp-panel-content .cc-field select:focus {
    outline: none;
    background: #fff;
    border-color: rgba(217, 154, 33, .6);
    box-shadow: 0 0 0 4px rgba(217, 154, 33, .14);
}

/* ---- Tema oscuro ---- */

:root[data-theme="dark"] .sp-panel-content,
body[data-theme="dark"] .sp-panel-content {
    --lx-ink: #f2ede2;
    --lx-navy: #f7efe2;
    --lx-muted: rgba(247, 239, 226, .66);
    --lx-line: rgba(214, 173, 47, .22);
    --lx-cream: #171310;
    --lx-surface: #17130d;
    --lx-shadow: 0 18px 44px rgba(0, 0, 0, .4);
    --lx-shadow-sm: 0 6px 18px rgba(0, 0, 0, .3);
}

/* ==========================================================================
   PARTE 2 — Refinamiento aplicado a las CLASES REALES de cada vista de panel
   (inventariadas vista a vista: ccx-dash, ccx-order, ccx-dispute, ccx-wishlist,
   ccx-notification, ccx-seller-*, ccx-payout*, ccx-verification, ccx-agreement,
   cc-payout*, cc-rev-*). Especificidad .sp-panel-shell .sp-panel-content para
   ganar a los <style> inline de las vistas sin usar !important.
   ========================================================================== */

/* ---- Tipografía editorial: títulos en la serif de marca (token --spx-serif),
        cuerpo en Inter. Sin tocar colores (los héroes navy conservan su blanco). */

.sp-panel-shell .sp-panel-content h1,
.sp-panel-shell .sp-panel-content h2 {
    font-family: var(--spx-serif, Georgia, serif);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.14;
}

.sp-panel-shell .sp-panel-content h3 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.sp-panel-shell .sp-panel-content p {
    line-height: 1.65;
}

/* ---- Botones: forma y comportamiento unificados en todas las vistas.
        Solo forma/tipografía/movimiento; cada variante conserva su color. */

.sp-panel-shell .sp-panel-content a[class*="btn"],
.sp-panel-shell .sp-panel-content button[class*="btn"],
.sp-panel-shell .sp-panel-content .ccx-setup-action a,
.sp-panel-shell .sp-panel-content .ccx-notification-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .015em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.sp-panel-shell .sp-panel-content a[class*="btn"]:hover,
.sp-panel-shell .sp-panel-content button[class*="btn"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(8, 24, 45, .14);
}

.sp-panel-shell .sp-panel-content button[class*="btn"]:active,
.sp-panel-shell .sp-panel-content a[class*="btn"]:active {
    transform: translateY(0);
}

/* ---- Tarjetas y paneles: borde fino, radio y sombra coherentes ---- */

.sp-panel-shell .sp-panel-content .ccx-card,
.sp-panel-shell .sp-panel-content .ccx-order,
.sp-panel-shell .sp-panel-content .ccx-dispute,
.sp-panel-shell .sp-panel-content .ccx-notification,
.sp-panel-shell .sp-panel-content .ccx-doc,
.sp-panel-shell .sp-panel-content .ccx-seller-step,
.sp-panel-shell .sp-panel-content .ccx-seller-summary,
.sp-panel-shell .sp-panel-content .ccx-setup-action,
.sp-panel-shell .sp-panel-content .ccx-payouts-panel,
.sp-panel-shell .sp-panel-content .ccx-notifications-panel,
.sp-panel-shell .sp-panel-content .cc-payout-panel,
.sp-panel-shell .sp-panel-content .cc-payout-mobile-card,
.sp-panel-shell .sp-panel-content .ccx-empty-state,
.sp-panel-shell .sp-panel-content .ccx-wishlist-card,
.sp-panel-shell .sp-panel-content .ccx-agreement-doc,
.sp-panel-shell .sp-panel-content .cc-rev-card {
    border-radius: 18px;
    border-color: rgba(217, 154, 33, .22);
    box-shadow: 0 10px 28px rgba(8, 24, 45, .06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.sp-panel-shell .sp-panel-content a.ccx-order:hover,
.sp-panel-shell .sp-panel-content a.ccx-dispute:hover,
.sp-panel-shell .sp-panel-content a.ccx-notification:hover,
.sp-panel-shell .sp-panel-content .ccx-wishlist-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(8, 24, 45, .11);
    border-color: rgba(217, 154, 33, .42);
}

/* ---- Héroes de sección: radio y sombra unificados ---- */

.sp-panel-shell .sp-panel-content .ccx-seller-hero,
.sp-panel-shell .sp-panel-content .ccx-wishlist-hero,
.sp-panel-shell .sp-panel-content .ccx-notifications-hero-inner,
.sp-panel-shell .sp-panel-content .ccx-profile-hero {
    border-radius: 26px;
    box-shadow: 0 22px 54px rgba(6, 20, 38, .20);
}

/* ---- Tablas (liquidaciones / métodos de cobro) ---- */

.sp-panel-shell .sp-panel-content .cc-payout-table th,
.sp-panel-shell .sp-panel-content .ccx-payout-table th {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lx-gold, #b8891f);
    border-bottom: 1px solid rgba(217, 154, 33, .28);
    padding: 10px 12px;
    text-align: start;
}

.sp-panel-shell .sp-panel-content .cc-payout-table td,
.sp-panel-shell .sp-panel-content .ccx-payout-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(12, 31, 55, .07);
    font-variant-numeric: tabular-nums;
}

/* ---- Badges: forma de sello uniforme (cada uno conserva su color) ---- */

.sp-panel-shell .sp-panel-content [class*="badge"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ---- Estados vacíos: centrados y con aire ---- */

.sp-panel-shell .sp-panel-content .ccx-empty-state,
.sp-panel-shell .sp-panel-content .ccx-empty-notifications,
.sp-panel-shell .sp-panel-content .ccx-wishlist-empty,
.sp-panel-shell .sp-panel-content .cc-payout-empty {
    text-align: center;
    padding: 44px 28px;
}