/* ============================================
   COMPONENTS.CSS — canje.com.ar
   Botones, Cards, Badges, Inputs, Chips
   ============================================ */

/* === BOTONES === */

.canje-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75em 1.75em;
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md);
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
    min-height: 44px;
    min-width: 44px;
    cursor: pointer;
    text-decoration: none;
}

/* Ripple effect */
.canje-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s, opacity 0.3s;
    border-radius: inherit;
}

.canje-btn:active::after {
    opacity: 1;
    transform: scale(2.5);
    transition: transform 0s;
}

/* Primario — Naranja */
.canje-btn--primary {
    background: var(--canje-orange);
    color: #fff;
    border: 2px solid transparent;
}

.canje-btn--primary:hover {
    background: var(--canje-orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 122, 58, 0.35);
}

/* Secundario — Teal */
.canje-btn--secondary {
    background: var(--canje-teal-mid);
    color: #fff;
    border: 2px solid transparent;
}

.canje-btn--secondary:hover {
    background: var(--canje-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(29, 158, 117, 0.35);
}

/* Ghost */
.canje-btn--ghost {
    background: transparent;
    color: var(--canje-text);
    border: 2px solid var(--canje-border);
}

.canje-btn--ghost:hover {
    border-color: var(--canje-teal-mid);
    color: var(--canje-teal-mid);
    transform: translateY(-2px);
}

/* Tamaños */
.canje-btn--sm {
    padding: 0.5em 1.25em;
    font-size: var(--fs-sm);
}

.canje-btn--lg {
    padding: 1em 2.5em;
    font-size: var(--fs-md);
}

/* === CARDS === */

.canje-card {
    background: var(--canje-surface);
    border: 1px solid var(--canje-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
}

.canje-card:hover {
    transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--canje-teal-light);
}

/* Card glassmorphism */
.canje-card--glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

/* Card con imagen */
.canje-card__image {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.canje-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.canje-card__text {
    font-size: var(--fs-sm);
    color: var(--canje-text-muted);
    line-height: 1.6;
}

.canje-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    font-size: var(--fs-xs);
    color: var(--canje-text-muted);
}

/* === BADGES === */

.canje-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.3em 0.8em;
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    line-height: 1;
}

.canje-badge--teal {
    background: var(--canje-teal-mint);
    color: var(--canje-teal-dark);
}

.canje-badge--orange {
    background: var(--canje-orange-pastel);
    color: var(--canje-orange-dark);
}

.canje-badge--nivel {
    background: var(--canje-orange);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Shimmer en badge de nivel */
.canje-badge--nivel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    animation: shimmer 2.5s infinite;
}

/* === INPUTS === */

.canje-input-group {
    position: relative;
    margin-bottom: var(--space-lg);
}

.canje-input {
    width: 100%;
    padding: 1em 1em 0.5em;
    font-size: var(--fs-base);
    background: var(--canje-surface);
    border: 2px solid var(--canje-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-normal) var(--ease-out);
    min-height: 44px;
}

.canje-input:focus {
    border-color: var(--canje-teal-mid);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.1);
}

/* Label flotante */
.canje-input-group .canje-label {
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-base);
    color: var(--canje-text-muted);
    pointer-events: none;
    transition: all var(--duration-fast) var(--ease-out);
}

.canje-input:focus + .canje-label,
.canje-input:not(:placeholder-shown) + .canje-label {
    top: 0.4em;
    transform: translateY(0);
    font-size: var(--fs-xs);
    color: var(--canje-teal-mid);
}

/* Select */
.canje-select {
    width: 100%;
    padding: 0.75em 1em;
    font-size: var(--fs-base);
    background: var(--canje-surface);
    border: 2px solid var(--canje-border);
    border-radius: var(--radius-md);
    appearance: none;
    cursor: pointer;
    min-height: 44px;
    transition: border-color var(--duration-normal) var(--ease-out);
}

.canje-select:focus {
    border-color: var(--canje-teal-mid);
}

/* Textarea */
.canje-textarea {
    width: 100%;
    padding: 1em;
    font-size: var(--fs-base);
    background: var(--canje-surface);
    border: 2px solid var(--canje-border);
    border-radius: var(--radius-md);
    resize: vertical;
    min-height: 120px;
    transition: border-color var(--duration-normal) var(--ease-out);
}

.canje-textarea:focus {
    border-color: var(--canje-teal-mid);
}

/* === CHIPS / TAGS === */

.canje-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.4em 1em;
    font-size: var(--fs-sm);
    font-weight: 500;
    background: var(--canje-teal-mint);
    color: var(--canje-teal-dark);
    border-radius: var(--radius-full);
    border: 1px solid var(--canje-teal-light);
    transition: all var(--duration-fast) var(--ease-out);
    cursor: pointer;
}

.canje-chip:hover {
    background: var(--canje-teal-light);
}

.canje-chip--active {
    background: var(--canje-teal-mid);
    color: #fff;
    border-color: var(--canje-teal-mid);
}

/* === SKELETON LOADER === */

.canje-skeleton {
    background: linear-gradient(
        90deg,
        var(--canje-border) 25%,
        var(--canje-bg) 50%,
        var(--canje-border) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.canje-skeleton--text {
    height: 1em;
    margin-bottom: 0.5em;
}

.canje-skeleton--title {
    height: 1.5em;
    width: 60%;
    margin-bottom: 0.75em;
}

.canje-skeleton--image {
    aspect-ratio: 16/10;
    margin-bottom: 1em;
}

/* === NIVEL DE EQUIVALENCIA (visual) === */

.canje-nivel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.canje-nivel__dots {
    display: flex;
    gap: 3px;
}

.canje-nivel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--canje-border);
    transition: background var(--duration-fast);
}

.canje-nivel__dot--active {
    background: var(--canje-orange);
}

/* === AVATAR === */

.canje-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--canje-teal-light);
}

.canje-avatar--sm { width: 32px; height: 32px; }
.canje-avatar--lg { width: 56px; height: 56px; }
.canje-avatar--xl { width: 80px; height: 80px; }

/* === DIVIDERS === */

.canje-divider {
    width: 100%;
    height: 1px;
    background: var(--canje-border);
    margin-block: var(--space-xl);
}