/* Compact Theme - Reducción del 5% en todos los elementos */

/* Reducir tamaño base de fuente en 5% */
body {
    font-size: 0.95rem !important;
}

/* Reducir border-radius en 5% */
.challenge-container,
.challenge-card,
.progress-info-card,
.stats-card,
.category-selector,
.challenge-sequence,
.flag-form {
    border-radius: 14px !important; /* Reducir de 15px a 14px */
}

.challenge-container {
    border-radius: 19px !important; /* Reducir de 20px a 19px */
}

.challenge-header {
    border-radius: 19px 19px 0 0 !important; /* Reducir de 20px a 19px */
}

/* Reducir padding en 5% */
.challenge-header,
.progress-info-card,
.stats-card,
.category-selector,
.challenge-sequence {
    padding: 1.9rem !important; /* Reducir de 2rem a 1.9rem */
}

.challenge-card,
.flag-form {
    padding: 1.43rem !important; /* Reducir de 1.5rem a 1.43rem */
}

.hint-section {
    padding: 0.95rem !important; /* Reducir de 1rem a 0.95rem */
}

/* Reducir margin en 5% */
.challenge-container,
.progress-info-card,
.stats-card,
.category-selector,
.challenge-sequence {
    margin-bottom: 1.9rem !important; /* Reducir de 2rem a 1.9rem */
}

.challenge-card {
    margin-bottom: 1.4rem !important; /* Reducir de 1.5rem a 1.4rem */
}

.flag-form,
.hint-section {
    margin-top: 0.95rem !important; /* Reducir de 1rem a 0.95rem */
}

/* Reducir tamaños de fuente en 5% */
.difficulty-badge,
.category-badge {
    font-size: 0.76rem !important; /* Reducir de 0.8rem a 0.76rem */
}

.progress-label,
.stat-label {
    font-size: 0.85rem !important; /* Reducir de 0.9rem a 0.85rem */
}

.stat-number {
    font-size: 1.9rem !important; /* Reducir de 2rem a 1.9rem */
}

.description-content {
    font-size: 1.05rem !important; /* Reducir de 1.1rem a 1.05rem */
}

/* Estilos para el cuadro de consejo/explicación */
.quill-tip-block,
.tip-block {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    border-left: 4px solid #ffc107;
    border-radius: 6px;
    padding: 15px 20px;
    margin: 15px 20px;
    position: relative;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.quill-tip-block .tip-icon,
.tip-block .tip-icon {
    flex-shrink: 0;
    color: #ff9800;
    font-size: 1.5rem;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
}

.quill-tip-block .tip-icon i,
.tip-block .tip-icon i {
    display: block;
}


.step-title {
    font-size: 0.76rem !important; /* Reducir de 0.8rem a 0.76rem */
}

.step-status {
    font-size: 0.67rem !important; /* Reducir de 0.7rem a 0.67rem */
}

/* Reducir padding de badges en 5% */
.difficulty-badge,
.points-badge,
.solved-badge,
.category-badge {
    padding: 0.29rem 0.76rem !important; /* Reducir de 0.3rem 0.8rem */
}

.difficulty-badge,
.points-badge,
.solved-badge {
    padding: 0.38rem 0.95rem !important; /* Reducir de 0.4rem 1rem */
}

/* Reducir border-radius de badges en 5% */
.difficulty-badge,
.points-badge,
.solved-badge,
.category-badge {
    border-radius: 19px !important; /* Reducir de 20px a 19px */
}

.difficulty-badge,
.points-badge,
.solved-badge {
    border-radius: 24px !important; /* Reducir de 25px a 24px */
}

/* Reducir margin de badges en 5% */
.category-badge {
    margin-right: 0.48rem !important; /* Reducir de 0.5rem a 0.48rem */
    margin-bottom: 0.48rem !important; /* Reducir de 0.5rem a 0.48rem */
}

/* Reducir tamaños de elementos de secuencia en 5% */
.step-circle {
    width: 57px !important; /* Reducir de 60px a 57px */
    height: 57px !important; /* Reducir de 60px a 57px */
    font-size: 1.43rem !important; /* Reducir de 1.5rem a 1.43rem */
    margin-bottom: 0.48rem !important; /* Reducir de 0.5rem a 0.48rem */
    border-width: 3.8px !important; /* Reducir de 4px a 3.8px */
}

.step-title {
    margin-bottom: 0.24rem !important; /* Reducir de 0.25rem a 0.24rem */
}

.step-status {
    padding: 0.19rem 0.38rem !important; /* Reducir padding en 5% */
    border-radius: 9.5px !important; /* Reducir de 10px a 9.5px */
}

/* Reducir gaps y spacing en 5% */
.sequence-track {
    margin: 1.9rem 0 !important; /* Reducir de 2rem a 1.9rem */
    gap: 1.9rem !important; /* Reducir de 2rem a 1.9rem */
}

.stat-item {
    padding: 0.95rem !important; /* Reducir de 1rem a 0.95rem */
}

/* Reducir border-radius de botones en 5% */
.btn-flag {
    border-radius: 9.5px !important; /* Reducir de 10px a 9.5px */
    padding: 11.4px 28.5px !important; /* Reducir padding en 5% */
}

.hint-section {
    border-radius: 9.5px !important; /* Reducir de 10px a 9.5px */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sequence-track {
        gap: 1.43rem !important; /* Reducir de 1.5rem a 1.43rem */
        padding: 0.95rem 0 !important; /* Reducir de 1rem a 0.95rem */
    }
    
    .step-circle {
        width: 47.5px !important; /* Reducir de 50px a 47.5px */
        height: 47.5px !important; /* Reducir de 50px a 47.5px */
        font-size: 1.14rem !important; /* Reducir de 1.2rem a 1.14rem */
    }
    
    .step-title {
        font-size: 0.85rem !important; /* Reducir de 0.9rem a 0.85rem */
    }
    
    .step-status {
        font-size: 0.76rem !important; /* Reducir de 0.8rem a 0.76rem */
    }
}

@media (max-width: 480px) {
    .sequence-track {
        gap: 0.95rem !important; /* Reducir de 1rem a 0.95rem */
    }
    
    .step-circle {
        width: 42.75px !important; /* Reducir de 45px a 42.75px */
        height: 42.75px !important; /* Reducir de 45px a 42.75px */
        font-size: 0.95rem !important; /* Reducir de 1rem a 0.95rem */
    }
    
    .step-title {
        font-size: 0.76rem !important; /* Reducir de 0.8rem a 0.76rem */
    }
}