/* ==========================================================
   Proyecto v0.1
   Componentes reutilizables
   ========================================================== */

/* ---------- BOTÓN PRINCIPAL ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 58px;

    padding: 0 var(--space-5);

    border: 1px solid transparent;
    border-radius: var(--radius-lg);

    background: var(--color-primary);
    color: #fff;

    font-size: var(--text-md);
    font-weight: var(--weight-semibold);

    cursor: pointer;

    transition: var(--transition);
}

.btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}

.btn:active {
    transform: scale(.98);
}

/* ---------- TARJETA ---------- */

.card {
    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    padding: var(--space-5);

    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* ---------- TARJETA DE HERRAMIENTA ---------- */

.tool-card {

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    min-height: 90px;

    font-size: var(--text-lg);

    font-weight: var(--weight-semibold);

    border-radius: var(--radius-lg);

    border: 1px solid var(--color-border);

    background: var(--color-surface);

    cursor: pointer;

    transition: var(--transition);

}

.tool-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}

.tool-card:active {

    transform: scale(.98);

}

/* ---------- INPUT ---------- */

.input {

    width: 100%;

    padding: 16px;

    border-radius: var(--radius-md);

    border: 1px solid var(--color-border);

    font-size: var(--text-md);

}

/* ---------- SEPARADOR ---------- */

.divider {

    width: 100%;

    height: 1px;

    background: var(--color-border);

}

/* ---------- BADGE ---------- */

.badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 12px;

    border-radius: var(--radius-pill);

    background: #f3f4f6;

    color: var(--color-text-light);

    font-size: var(--text-sm);

}