/* CSS Variables Tutorial - Estilos del Post */

/* === VARIABLES PARA DEMOS === */
:root {
    --demo-primary: #3498db;
    --demo-secondary: #2ecc71;
    --demo-danger: #e74c3c;
    --demo-warning: #f39c12;
    
    --demo-spacing-sm: 0.5rem;
    --demo-spacing-md: 1rem;
    --demo-spacing-lg: 1.5rem;
    --demo-spacing-xl: 2rem;
}

/* === COMPARISION TABLE === */
.comparison-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
    margin: var(--demo-spacing-lg) 0;
}

.comparison-header {
    display: contents;
}

.comparison-header .comparison-col {
    background: var(--color-primary, #007bff);
    color: white;
    padding: var(--demo-spacing-md);
    font-weight: 600;
    text-align: center;
}

.comparison-row {
    display: contents;
}

.comparison-row .comparison-col {
    padding: var(--demo-spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
}

.comparison-row .comparison-col:first-child {
    border-right: 1px solid var(--border-color, #dee2e6);
}

.comparison-row:last-child .comparison-col {
    border-bottom: none;
}

/* === DEMO CONTAINERS === */
.demo-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--demo-spacing-xl);
    margin: var(--demo-spacing-xl) 0;
}

.demo-container h3 {
    margin-top: 0;
    color: var(--text-primary);
}

/* === THEME SWITCHER DEMO === */
.theme-demo {
    /* Tema Light por defecto - colores fijos */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-text-primary: #212529;
    --theme-text-secondary: #6c757d;
    --theme-border: #dee2e6;
    --theme-shadow: rgba(0, 0, 0, 0.1);
    
    background: var(--theme-bg-primary);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: var(--demo-spacing-lg);
    transition: all 0.3s ease;
}

.theme-demo[data-theme="dark"] {
    --theme-bg-primary: #1a1a1a;
    --theme-bg-secondary: #2d2d2d;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #b0b0b0;
    --theme-border: #404040;
    --theme-shadow: rgba(0, 0, 0, 0.3);
}

.demo-content {
    margin-bottom: var(--demo-spacing-lg);
}

.demo-card {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    padding: var(--demo-spacing-lg);
    box-shadow: 0 2px 10px var(--theme-shadow);
    transition: all 0.3s ease;
}

.demo-card h4 {
    margin: 0 0 var(--demo-spacing-sm) 0;
    color: var(--theme-text-primary);
}

.demo-card .text-muted {
    color: var(--theme-text-secondary);
    margin-bottom: var(--demo-spacing-md);
}

.demo-button {
    background: var(--demo-primary);
    color: white;
    border: none;
    padding: var(--demo-spacing-sm) var(--demo-spacing-md);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.demo-button:hover {
    background: #2980b9;
}

.theme-toggle {
    background: var(--theme-text-primary);
    color: var(--theme-bg-primary);
    border: 2px solid var(--theme-border);
    padding: var(--demo-spacing-sm) var(--demo-spacing-md);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--theme-shadow);
}

/* === PROGRESS BAR DEMO === */
.animation-demo {
    display: grid;
    gap: var(--demo-spacing-xl);
}

.progress-demo {
    text-align: center;
}

.progress-bar {
    --progress: 0%;
    width: 100%;
    max-width: 400px;
    height: 24px;
    background: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin: 0 auto var(--demo-spacing-md);
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress);
    background: linear-gradient(90deg, var(--demo-secondary), #27ae60);
    transition: width 0.5s ease;
    border-radius: 12px;
}

/* Estados de progreso estáticos */
.progress-25 { --progress: 25%; }
.progress-50 { --progress: 50%; }
.progress-75 { --progress: 75%; }
.progress-100 { --progress: 100%; }

/* Animación automática con CSS Variables */
@keyframes progress-fill {
    from { --progress: 0%; }
    to { --progress: 100%; }
}

.progress-animated {
    animation: progress-fill 3s ease-in-out infinite;
}

.progress-animated-once {
    animation: progress-fill 2s ease-out forwards;
}

/* Estilos para ejemplos del tutorial */
.example-container {
    padding: var(--demo-spacing-lg);
    margin: var(--demo-spacing-lg) 0;
    background: var(--card-bg, #f8f9fa);
    border-radius: 8px;
}

.example-button {
    background: var(--demo-primary);
    color: white;
    border: none;
    padding: var(--demo-spacing-sm) var(--demo-spacing-md);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    margin: var(--demo-spacing-sm);
}

.example-button:hover {
    background: #2980b9;
}

.progress-controls {
    display: flex;
    gap: var(--demo-spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.progress-controls button {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--demo-spacing-sm);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.progress-controls button:hover {
    background: var(--demo-primary);
    color: white;
    border-color: var(--demo-primary);
}

/* === DYNAMIC BUTTONS DEMO === */
.button-demo {
    display: flex;
    gap: var(--demo-spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.dynamic-button {
    --btn-bg: var(--demo-primary);
    --btn-hover-bg: #2980b9;
    --btn-scale: 1;
    --btn-shadow: 0 2px 5px rgba(0,0,0,0.2);
    
    background: var(--btn-bg);
    transform: scale(var(--btn-scale));
    box-shadow: var(--btn-shadow);
    transition: all 0.3s ease;
    
    border: none;
    padding: 12px 24px;
    color: white;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
}

.dynamic-button:hover {
    --btn-scale: 1.05;
    --btn-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.dynamic-button {
    --btn-bg: var(--demo-primary);
    --btn-hover-bg: #2980b9;
}

.dynamic-button.btn-success {
    --btn-bg: var(--demo-secondary);
    --btn-hover-bg: #1e7e34;
}

.dynamic-button.btn-danger {
    --btn-bg: var(--demo-danger);
    --btn-hover-bg: #a71e2a;
}

.dynamic-button:hover {
    --btn-bg: var(--btn-hover-bg);
}

.dynamic-button.btn-success:hover {
    --btn-bg: #1e7e34;
}

.dynamic-button.btn-danger:hover {
    --btn-bg: #a71e2a;
}

/* === DASHBOARD DEMO === */
.dashboard-demo {
    /* Tema Light por defecto - colores fijos */
    --dash-bg-primary: #ffffff;
    --dash-bg-secondary: #f8f9fa;
    --dash-text-primary: #212529;
    --dash-text-secondary: #6c757d;
    --dash-border: #dee2e6;
    --dash-shadow: rgba(0, 0, 0, 0.1);
    
    --dash-sidebar-width: 200px;
    --dash-card-padding: var(--demo-spacing-lg);
    --dash-grid-gap: var(--demo-spacing-md);
    
    display: grid;
    grid-template-columns: var(--dash-sidebar-width) 1fr;
    min-height: 400px;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--dash-bg-primary);
    color: var(--dash-text-primary);
    transition: all 0.3s ease;
}

.dashboard-demo[data-theme="dark"] {
    --dash-bg-primary: #1a1a1a;
    --dash-bg-secondary: #2d2d2d;
    --dash-text-primary: #ffffff;
    --dash-text-secondary: #b0b0b0;
    --dash-border: #404040;
    --dash-shadow: rgba(0, 0, 0, 0.3);
}

.dashboard-sidebar {
    background: var(--dash-bg-secondary);
    border-right: 1px solid var(--dash-border);
    padding: var(--demo-spacing-lg) var(--demo-spacing-md);
    transition: all 0.3s ease;
}

.sidebar-header {
    font-size: 2rem;
    text-align: center;
    margin-bottom: var(--demo-spacing-lg);
    color: var(--dash-text-primary);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--demo-spacing-md);
}

.nav-item {
    font-size: 1.5rem;
    text-align: center;
    padding: var(--demo-spacing-sm);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: var(--dash-text-primary);
}

.nav-item:hover {
    background: var(--dash-bg-primary);
}

.dashboard-main {
    padding: var(--demo-spacing-lg);
    color: var(--dash-text-primary);
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--demo-spacing-lg);
    padding-bottom: var(--demo-spacing-md);
    border-bottom: 1px solid var(--dash-border);
}

.dashboard-header h3 {
    margin: 0;
    color: var(--dash-text-primary);
}

.dashboard-header .theme-toggle {
    background: var(--dash-text-primary);
    color: var(--dash-bg-primary);
    border: 2px solid var(--dash-border);
    padding: var(--demo-spacing-sm) var(--demo-spacing-md);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.dashboard-header .theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--dash-shadow);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--dash-grid-gap);
}

.dashboard-card {
    background: var(--dash-bg-secondary);
    border: 1px solid var(--dash-border);
    border-radius: 6px;
    padding: var(--dash-card-padding);
    text-align: center;
    box-shadow: 0 2px 8px var(--dash-shadow);
    transition: all 0.3s ease;
    cursor: pointer;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--dash-shadow);
}

.dashboard-card h4 {
    margin: 0 0 var(--demo-spacing-sm) 0;
    color: var(--dash-text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 600;
}

.dashboard-card .metric {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dash-text-primary);
}

/* === BEST PRACTICES === */
.best-practices {
    display: grid;
    gap: var(--demo-spacing-lg);
}

.practice-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.practice-header {
    display: flex;
    align-items: center;
    gap: var(--demo-spacing-sm);
    padding: var(--demo-spacing-md);
    background: var(--card-bg);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.practice-icon {
    font-size: 1.25rem;
}

.practice-header h4 {
    margin: 0;
    color: var(--text-primary);
}

.practice-content {
    padding: var(--demo-spacing-md);
}

.practice-content p {
    margin-top: 0;
}

.practice-content ul {
    margin-bottom: 0;
}

/* === COMPATIBILITY === */
.compatibility-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--demo-spacing-lg);
    margin: var(--demo-spacing-lg) 0;
}

.browser-support,
.fallback-strategy {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--demo-spacing-lg);
}

.browser-support h4,
.fallback-strategy h4 {
    margin-top: 0;
    color: var(--text-primary);
}

.browser-support ul {
    margin-bottom: 0;
}

/* === SUMMARY GRID === */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--demo-spacing-xl);
    margin: var(--demo-spacing-xl) 0;
}

.summary-item {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--demo-spacing-lg);
}

.summary-item h4 {
    margin-top: 0;
    color: var(--text-primary);
}

.summary-item ul {
    margin-bottom: 0;
}

/* === KEY TAKEAWAY === */
.key-takeaway {
    background: linear-gradient(135deg, var(--demo-primary), var(--demo-secondary));
    color: white;
    border-radius: 12px;
    padding: var(--demo-spacing-xl);
    text-align: center;
    margin: var(--demo-spacing-xl) 0;
}

.key-takeaway h4 {
    margin-top: 0;
    font-size: 1.25rem;
}

.key-takeaway p {
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .comparison-table {
        grid-template-columns: 1fr;
    }
    
    .compatibility-info {
        grid-template-columns: 1fr;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-demo {
        grid-template-columns: 1fr;
        --dash-sidebar-width: auto;
    }
    
    .dashboard-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--dash-border);
        padding: var(--demo-spacing-md);
    }
    
    .sidebar-nav {
        flex-direction: row;
        justify-content: center;
    }
    
    .dashboard-header {
        flex-direction: column;
        gap: var(--demo-spacing-md);
        align-items: stretch;
    }
    
    .button-demo {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .progress-controls {
        gap: 0.25rem;
    }
    
    .progress-controls button {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}