/* =====================================================
   btn.css - Sistema de botones personalizado
   Reemplaza mdui-button y mdui-button-icon
   ===================================================== */

/* --- Base (filled por defecto) -------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 20px;
    font-family: var(--fontfamilyroboto), sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    box-sizing: border-box;
    vertical-align: middle;
    margin: 0;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
    background-color: var(--verde-principal);
    color: #fff;

}

/* Shimmer sweep */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 65%
    );
    transform: translateX(-150%);
    pointer-events: none;
}

.btn:hover:not(:disabled):not([disabled]) {
    background-color: #388e3c;
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.4);
    transform: translateY(-2px);
}

.btn:hover:not(:disabled):not([disabled])::after {
    transform: translateX(150%);
    transition: transform 0.45s ease;
}

.btn:active:not(:disabled):not([disabled]) {
    transform: translateY(1px);
    box-shadow: none;
    background-color: #1b5e20;
    transition-duration: 0.08s;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Imágenes dentro de botones ------------------- */
/* Especificidad elevada (0,1,2) para ganar a .login-container img (0,1,1) */
button.btn img,
a.btn img,
button.btn-icon-only img,
a.btn-icon-only img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    margin: 0;
}

/* Icono a la izquierda: padding izquierdo reducido para equilibrio visual */
.btn:has(> img:first-child) {
    padding-left: 16px;
}


/* --- Small ---------------------------------------- */
.btn-sm {
    height: 33px;
    border-radius: 16.5px;
    font-size: 13px;
    padding: 0 16px;
}

.btn-sm:has(> img:first-child) {
    padding-left: 12px;
}

/* --- Outlined ------------------------------------- */
.btn-outlined {
    background-color: transparent;
    color: var(--verde-principal);
    border-color: var(--verde-principal);
}

.btn-outlined::after {
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(46, 125, 50, 0.12) 50%,
        transparent 65%
    );
}

.btn-outlined:hover:not(:disabled):not([disabled]) {
    background-color: var(--bg-light-green);
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.15);
    transform: translateY(-2px);
}

.btn-outlined:active:not(:disabled):not([disabled]) {
    background-color: var(--hover-green);
    box-shadow: none;
    transform: translateY(1px);
    transition-duration: 0.08s;
}

/* --- Text ----------------------------------------- */
.btn-text {
    background-color: transparent;
    color: var(--verde-principal);
    border-color: transparent;
    padding: 0 12px;
}

.btn-text::after {
    display: none;
}

.btn-text:hover:not(:disabled):not([disabled]) {
    background-color: var(--bg-light-green);
    box-shadow: none;
    transform: none;
}

.btn-text:active:not(:disabled):not([disabled]) {
    background-color: var(--hover-green);
    transform: none;
    transition-duration: 0.08s;
}

/* --- Tonal ---------------------------------------- */
.btn-tonal {
    background-color: var(--bg-light-green-alt);
    color: var(--verde-principal);
    border-color: transparent;
}

.btn-tonal::after {
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(46, 125, 50, 0.15) 50%,
        transparent 65%
    );
}

.btn-tonal:hover:not(:disabled):not([disabled]) {
    background-color: var(--hover-green);
    box-shadow: 0 4px 14px rgba(46, 125, 50, 0.2);
    transform: translateY(-2px);
}

.btn-tonal:active:not(:disabled):not([disabled]) {
    transform: translateY(0);
    box-shadow: none;
}

/* --- Danger --------------------------------------- */
.btn-danger {
    background-color: #c62828;
    color: #fff;
    border-color: #c62828;
}

.btn-danger:hover:not(:disabled):not([disabled]) {
    background-color: #b71c1c;
    box-shadow: 0 4px 14px rgba(198, 40, 40, 0.4);
    transform: translateY(-2px);
}

.btn-danger:active:not(:disabled):not([disabled]) {
    transform: translateY(1px);
    box-shadow: none;
    background-color: #7f0000;
    transition-duration: 0.08s;
}

.btn-outlined.btn-danger {
    background-color: transparent;
    color: #c62828;
    border-color: #c62828;
}

.btn-outlined.btn-danger::after {
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(198, 40, 40, 0.1) 50%,
        transparent 65%
    );
}

.btn-outlined.btn-danger:hover:not(:disabled):not([disabled]) {
    background-color: rgba(198, 40, 40, 0.06);
    box-shadow: 0 4px 14px rgba(198, 40, 40, 0.15);
    transform: translateY(-2px);
}

/* --- Purple --------------------------------------- */
.btn-purple {
    background-color: rgb(103, 80, 164);
    color: #fff;
    border-color: transparent;
}

.btn-purple:hover:not(:disabled):not([disabled]) {
    background-color: rgb(88, 66, 148);
    box-shadow: 0 4px 14px rgba(103, 80, 164, 0.4);
    transform: translateY(-2px);
}

.btn-purple:active:not(:disabled):not([disabled]) {
    transform: translateY(1px);
    box-shadow: none;
    background-color: rgb(60, 44, 110);
    transition-duration: 0.08s;
}

.btn-tonal.btn-purple {
    background-color: rgb(234, 221, 255);
    color: rgb(33, 0, 94);
}

.btn-tonal.btn-purple:hover:not(:disabled):not([disabled]) {
    background-color: rgb(214, 198, 245);
    box-shadow: 0 4px 14px rgba(103, 80, 164, 0.2);
    transform: translateY(-2px);
}

/* --- Tacita --------------------------------------- */
.btn-tacita {
    background-color: rgb(108, 52, 131);
    color: #fff;
    border-color: transparent;
}

.btn-tacita:hover:not(:disabled):not([disabled]) {
    background-color: rgb(90, 40, 110);
    box-shadow: 0 4px 14px rgba(108, 52, 131, 0.4);
    transform: translateY(-2px);
}

.btn-tacita:active:not(:disabled):not([disabled]) {
    transform: translateY(1px);
    box-shadow: none;
    background-color: rgb(65, 25, 80);
    transition-duration: 0.08s;
}

.btn-tonal.btn-tacita {
    background-color: rgb(233, 213, 255);
    color: rgb(72, 20, 95);
}

.btn-tonal.btn-tacita:hover:not(:disabled):not([disabled]) {
    background-color: rgb(210, 188, 245);
    box-shadow: none;
    transform: translateY(-2px);
}

/* --- Reactivate ----------------------------------- */
.btn-reactivate {
    background-color: transparent;
    color: #0284c7;
    border-color: transparent;
}

.btn-tonal.btn-reactivate {
    background-color: rgba(2, 132, 199, 0.12);
    color: #0284c7;
}

.btn-tonal.btn-reactivate:hover:not(:disabled):not([disabled]) {
    background-color: rgba(2, 132, 199, 0.2);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2);
    transform: translateY(-2px);
}

/* --- Icon-only ------------------------------------ */
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    margin: 0;

}

.btn-icon-only:hover {
    background-color: var(--bg-light-green);
    transform: scale(1.1);
}

.btn-icon-only:active {
    background-color: var(--hover-green);
    transform: scale(0.95);
}

button.btn-icon-only img,
a.btn-icon-only img {
    width: 24px;
    height: 24px;
}

.btn-icon-only.btn-filled {
    background-color: var(--verde-principal);
}

.btn-icon-only.btn-filled:hover {
    background-color: #388e3c;
}