:root {
        /* Colores de botones - modo dark */
        --btn-primary-bg: #e09a5f;
        --btn-primary-text: #ffffff;
        --btn-primary-hover: #c78445;

        --btn-secondary-bg: #424242;
        --btn-secondary-text: #ffffff;
        --btn-secondary-hover: #616161;

        --btn-border-radius: 4px;
        --btn-font-size: 0.9rem;
        --btn-padding-v: 0.4rem;
        --btn-padding-h: 0.8rem;
}

/* Botones en modo light */
body.light {
        --btn-primary-bg: #d18c54;
        --btn-primary-text: #ffffff;
        --btn-primary-hover: #b77440;

        --btn-secondary-bg: #e0e0e0;
        --btn-secondary-text: #212121;
        --btn-secondary-hover: #bdbdbd;
}

/* Estilos base para botones */
.t-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--btn-padding-v) var(--btn-padding-h);
        border-radius: var(--btn-border-radius);
        font-family: var(--font-primary);
        font-size: var(--btn-font-size);
        font-weight: 500;
        text-align: center;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.1s ease;
        outline: none;
        min-height: 36px;
        min-width: 64px;
        touch-action: manipulation;
}

.t-button:active {
        transform: scale(0.98);
}

/* Tipos de botones */
.t-button.primary {
        background-color: var(--btn-primary-bg);
        color: var(--btn-primary-text);
}

.t-button.primary:hover {
        background-color: var(--btn-primary-hover);
}

.t-button.secondary {
        background-color: var(--btn-secondary-bg);
        color: var(--btn-secondary-text);
}

.t-button.secondary:hover {
        background-color: var(--btn-secondary-hover);
}

/* Botones con íconos */
.t-button.icon-button {
        gap: 0.5rem;
}

.t-button .icon {
        width: 18px;
        height: 18px;
}

/* Botones de tamaños diferentes */
.t-button.small {
        font-size: calc(var(--btn-font-size) - 0.1rem);
        padding: calc(var(--btn-padding-v) - 0.1rem) calc(var(--btn-padding-h) - 0.1rem);
        min-height: 28px;
}

.t-button.large {
        font-size: calc(var(--btn-font-size) + 0.1rem);
        padding: calc(var(--btn-padding-v) + 0.1rem) calc(var(--btn-padding-h) + 0.1rem);
        min-height: 44px;
}

/* Contenedor para grupos de botones */
.button-container {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
}