/* Wrapper principal para aislamiento */
.wp-block-gs-dashboard-steps {
    /* Variables Locales */
    --de-black: #1a1a1a;    
    --de-gold: #ffce00;     
    --primary: #0f172a;     
    --primary-light: #334155;
    --accent-blue: #003399;
    --bg-section-alt: #f8fafc;
    --text-main: #1e293b;
    --text-light: #64748b;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    line-height: 1.6;
}

/* Reset para el editor */
.wp-block-gs-dashboard-steps * { box-sizing: border-box; }

.wp-block-gs-dashboard-steps .bg-light { background-color: var(--bg-section-alt); }
.wp-block-gs-dashboard-steps .container { max-width: 75rem; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 2; }
.wp-block-gs-dashboard-steps a { text-decoration: none; color: inherit; }

/* Dashboard Styles */
.wp-block-gs-dashboard-steps .section-padding { padding: 5rem 0; }
.wp-block-gs-dashboard-steps .section-header { margin-bottom: 2.5rem; text-align: left; }
.wp-block-gs-dashboard-steps .sub-label { font-size: 0.85rem; font-weight: 700; color: var(--accent-blue); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.6rem; display: block; }
.wp-block-gs-dashboard-steps .section-title { font-size: 2.5rem; font-weight: 700; color: var(--de-black); margin: 0; line-height: 1.2; }

.wp-block-gs-dashboard-steps .swipe-hint { font-size: 0.9rem; color: var(--text-light); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
.wp-block-gs-dashboard-steps .desktop-hint { display: block; } 
.wp-block-gs-dashboard-steps .mobile-hint { display: none; }

.wp-block-gs-dashboard-steps .steps-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.wp-block-gs-dashboard-steps .step-card { background: white; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: var(--transition); min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; }

.wp-block-gs-dashboard-steps .start-chip { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #ffcc00; color: #111827; font-size: 0.65rem; padding: 2px 8px; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 5; }
.wp-block-gs-dashboard-steps .start-chip.hidden { opacity: 0; pointer-events: none; }

.wp-block-gs-dashboard-steps .step-icon-box { width: 3rem; height: 3rem; margin: 0 auto 1rem; background: #f1f5f9; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: var(--primary); transition: var(--transition); }
.wp-block-gs-dashboard-steps .step-icon-box svg { display: block; } /* Fix para editor */

.wp-block-gs-dashboard-steps .step-card h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--de-black); margin-top: 0; }
.wp-block-gs-dashboard-steps .step-card p { font-size: 0.75rem; color: var(--text-light); margin: 0; }
.wp-block-gs-dashboard-steps .step-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }

/* Estados Activo / Completado */
.wp-block-gs-dashboard-steps .step-card.completed { border-color: #bbf7d0; background-color: #ecfdf5; }
.wp-block-gs-dashboard-steps .step-card.completed .step-icon-box { background-color: #dcfce7; color: #166534; }
.wp-block-gs-dashboard-steps .step-card.active { background-color: white; border: 2px solid var(--accent-blue); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.15); }
.wp-block-gs-dashboard-steps .step-card.active .step-icon-box { background-color: var(--accent-blue); color: white; }
.wp-block-gs-dashboard-steps .step-card.active h3 { color: var(--accent-blue); }

/* Detail Box */
.wp-block-gs-dashboard-steps .detail-box { 
    background: white; border-radius: 1.5rem; border: 1px solid #e2e8f0; 
    padding: 3rem; display: flex; align-items: flex-start; gap: 2.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); min-height: 15.6rem; 
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 1; transform: translateY(0);
}
.wp-block-gs-dashboard-steps .detail-box.fade-out { opacity: 0; transform: translateY(10px); }

.wp-block-gs-dashboard-steps .detail-content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; max-width: 38rem; align-items: flex-start; }
.wp-block-gs-dashboard-steps .detail-title { font-size: 2rem; font-weight: 800; color: var(--de-black); line-height: 1.1; margin: 0; }
.wp-block-gs-dashboard-steps .detail-desc { font-size: 1rem; color: var(--text-main); line-height: 1.6; }
.wp-block-gs-dashboard-steps .detail-visual { flex: 0 0 5rem; height: 5rem; background: #eff6ff; color: var(--accent-blue); border-radius: 1.25rem; display: flex; align-items: center; justify-content: center; }

.wp-block-gs-dashboard-steps .btn-ghost-dark { background: transparent; border: 1px solid var(--de-black); color: var(--de-black); padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; transition: var(--transition); }
.wp-block-gs-dashboard-steps .btn-ghost-dark:hover { background: var(--de-black); color: white; }

/* Media Queries */
@media (max-width: 900px) {
    .wp-block-gs-dashboard-steps .steps-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

@media (max-width: 600px) {
    .wp-block-gs-dashboard-steps .steps-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2rem 0 1.25rem 0; scrollbar-width: none; -ms-overflow-style: none; }
    .wp-block-gs-dashboard-steps .steps-wrapper::-webkit-scrollbar { display: none; }
    .wp-block-gs-dashboard-steps .step-card { min-width: 10rem; scroll-snap-align: center; flex-shrink: 0; }
    .wp-block-gs-dashboard-steps .desktop-hint { display: none; } 
    .wp-block-gs-dashboard-steps .mobile-hint { display: flex; justify-content: flex-end; }
    .wp-block-gs-dashboard-steps .detail-box { flex-direction: column; align-items: center; padding: 1.8rem; text-align: center; }
    .wp-block-gs-dashboard-steps .detail-content { align-items: center; }
}