/**
 * Categorías - Estilos
 * @package Ubika
 */

/* Solo el header rompe el container */
.page-categorias .page-header {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* ==========================================================================
   Header compacto
   ========================================================================== */
.page-header--compact {
    min-height: 280px;
    padding: 1.5rem 0 2.5rem;
}

.page-header--compact .page-header-title {
    font-size: 2.5rem;
}

@media (max-width: 768px) {
    .page-header--compact {
        min-height: 200px;
        padding: 1rem 0 2rem;
    }
    
    .page-header--compact .page-header-title {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   Categorías Destacadas
   ========================================================================== */
.categories-featured {
    padding: 3rem 0;
    background: white;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.categories-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .categories-featured-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* Card Featured */
.category-card-featured {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.category-card-featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.category-card-featured-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 1.75rem;
}

.category-card-featured-content {
    flex: 1;
}

.category-card-featured-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.25rem;
}

.category-card-featured-description {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}

.category-card-featured-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-400);
}

.category-card-featured-arrow {
    position: absolute;
    right: 1rem;
    top: 1.5rem;
    font-size: 1.25rem;
    color: var(--gray-300);
    transition: all 0.2s ease;
}

.category-card-featured:hover .category-card-featured-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   Todas las Categorías
   ========================================================================== */
.categories-all {
    padding: 3rem 0 4rem;
    background: var(--gray-50);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1280px) {
    .categories-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* Card Normal */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
    background: white;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
    border: 1px solid var(--gray-100);
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.category-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}

.category-card:hover .category-card-icon {
    transform: scale(1.1);
}

.category-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.category-card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
}

.category-card-count {
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* ==========================================================================
   Colores por categoría
   ========================================================================== */

/* Orange */
.category-card--orange .category-card-icon,
.category-card-featured--orange .category-card-featured-icon {
    background: var(--orange-100);
    color: var(--orange-600);
}

.category-card-featured--orange:hover {
    background: var(--orange-50);
}

.category-card-featured--orange .category-card-featured-arrow {
    color: var(--orange-300);
}

/* Amber */
.category-card--amber .category-card-icon,
.category-card-featured--amber .category-card-featured-icon {
    background: var(--amber-100);
    color: var(--amber-600);
}

.category-card-featured--amber:hover {
    background: var(--amber-50);
}

.category-card-featured--amber .category-card-featured-arrow {
    color: var(--amber-300);
}

/* Pink */
.category-card--pink .category-card-icon,
.category-card-featured--pink .category-card-featured-icon {
    background: #fce7f3;
    color: #db2777;
}

.category-card-featured--pink:hover {
    background: #fdf2f8;
}

.category-card-featured--pink .category-card-featured-arrow {
    color: #f9a8d4;
}

/* Red */
.category-card--red .category-card-icon,
.category-card-featured--red .category-card-featured-icon {
    background: var(--red-100);
    color: var(--red-600);
}

.category-card-featured--red:hover {
    background: var(--red-50);
}

.category-card-featured--red .category-card-featured-arrow {
    color: var(--red-300);
}

/* Purple */
.category-card--purple .category-card-icon,
.category-card-featured--purple .category-card-featured-icon {
    background: var(--purple-100);
    color: var(--purple-600);
}

.category-card-featured--purple:hover {
    background: var(--purple-50);
}

.category-card-featured--purple .category-card-featured-arrow {
    color: var(--purple-300);
}

/* Blue */
.category-card--blue .category-card-icon,
.category-card-featured--blue .category-card-featured-icon {
    background: var(--blue-100);
    color: var(--blue-600);
}

.category-card-featured--blue:hover {
    background: var(--blue-50);
}

.category-card-featured--blue .category-card-featured-arrow {
    color: var(--blue-300);
}

/* Teal */
.category-card--teal .category-card-icon,
.category-card-featured--teal .category-card-featured-icon {
    background: #ccfbf1;
    color: #0d9488;
}

.category-card-featured--teal:hover {
    background: #f0fdfa;
}

.category-card-featured--teal .category-card-featured-arrow {
    color: #5eead4;
}

/* Indigo */
.category-card--indigo .category-card-icon,
.category-card-featured--indigo .category-card-featured-icon {
    background: #e0e7ff;
    color: #4f46e5;
}

.category-card-featured--indigo:hover {
    background: #eef2ff;
}

.category-card-featured--indigo .category-card-featured-arrow {
    color: #a5b4fc;
}

/* Green */
.category-card--green .category-card-icon,
.category-card-featured--green .category-card-featured-icon {
    background: var(--green-100);
    color: var(--green-600);
}

.category-card-featured--green:hover {
    background: var(--green-50);
}

.category-card-featured--green .category-card-featured-arrow {
    color: var(--green-300);
}

/* Violet */
.category-card--violet .category-card-icon,
.category-card-featured--violet .category-card-featured-icon {
    background: #ede9fe;
    color: #7c3aed;
}

.category-card-featured--violet:hover {
    background: #f5f3ff;
}

.category-card-featured--violet .category-card-featured-arrow {
    color: #c4b5fd;
}

/* Cyan */
.category-card--cyan .category-card-icon,
.category-card-featured--cyan .category-card-featured-icon {
    background: #cffafe;
    color: #0891b2;
}

.category-card-featured--cyan:hover {
    background: #ecfeff;
}

.category-card-featured--cyan .category-card-featured-arrow {
    color: #67e8f9;
}

/* Lime */
.category-card--lime .category-card-icon,
.category-card-featured--lime .category-card-featured-icon {
    background: #ecfccb;
    color: #65a30d;
}

.category-card-featured--lime:hover {
    background: #f7fee7;
}

.category-card-featured--lime .category-card-featured-arrow {
    color: #bef264;
}

/* Slate */
.category-card--slate .category-card-icon,
.category-card-featured--slate .category-card-featured-icon {
    background: #e2e8f0;
    color: #475569;
}

.category-card-featured--slate:hover {
    background: #f1f5f9;
}

.category-card-featured--slate .category-card-featured-arrow {
    color: #94a3b8;
}

/* Rose */
.category-card--rose .category-card-icon,
.category-card-featured--rose .category-card-featured-icon {
    background: #ffe4e6;
    color: #e11d48;
}

.category-card-featured--rose:hover {
    background: #fff1f2;
}

.category-card-featured--rose .category-card-featured-arrow {
    color: #fda4af;
}

/* Emerald */
.category-card--emerald .category-card-icon,
.category-card-featured--emerald .category-card-featured-icon {
    background: #d1fae5;
    color: #059669;
}

.category-card-featured--emerald:hover {
    background: #ecfdf5;
}

.category-card-featured--emerald .category-card-featured-arrow {
    color: #6ee7b7;
}

/* Gray */
.category-card--gray .category-card-icon,
.category-card-featured--gray .category-card-featured-icon {
    background: var(--gray-200);
    color: var(--gray-600);
}

.category-card-featured--gray:hover {
    background: var(--gray-100);
}

.category-card-featured--gray .category-card-featured-arrow {
    color: var(--gray-400);
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.categories-cta {
    padding: 3rem 0;
    background: white;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.categories-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    border-radius: var(--radius-xl);
    text-align: center;
}

@media (min-width: 768px) {
    .categories-cta-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 3rem;
    }
}

.categories-cta-text h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.categories-cta-text p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

.categories-cta .btn-secondary-solid-shadow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.categories-cta .btn-secondary-solid-shadow i {
    transition: transform 0.2s ease;
}

.categories-cta .btn-secondary-solid-shadow:hover i {
    transform: translateX(4px);
}