/*Boton para siguiente, iniciar tramite, guardar cambios*/
.btn-retys {
    background: #6D071A;
    color: white;
    font-weight: 700;
    border: 0;
    border-radius: 50px;
    padding: 12px 26px;
    transition: transform .05s ease-in-out, box-shadow .2s;
    /*box-shadow: 0 6px 16px rgba(0,0,0,.4);*/
}

    .btn-retys:hover {
        transform: translateY(-1px);
        background-color: #820b21;
        color: white;
    }

    .btn-retys:active {
        transform: translateY(0);
    }
        .btn-retys:focus,
        .btn-retys:focus-visible,
        .btn-retys:active:focus {
            outline: none !important;
            box-shadow: none !important;
        }

/*Boton para regresar*/
.btn-retys-gray {
    background: #444444;
    color: white;
    font-weight: 700;
    border: 0;
    border-radius: 50px;
    padding: 12px 26px;
    transition: transform .05s ease-in-out, box-shadow .2s;
    /*box-shadow: 0 6px 16px rgba(0,0,0,.4);*/
}

    .btn-retys-gray:hover {
        transform: translateY(-1px);
        background-color: #5a5a5a; /* tono más claro al hacer hover */
        color: white;
    }

    .btn-retys-gray:active {
        transform: translateY(0);
    }

.btn-retys-gray:focus {
    outline: none;
    box-shadow: 0 0 0 3px #444444;
}

.button-rojo {
    /*background-color: #8B000C;*/
    background-color: #444444;
    /*background-color: #C9A66B;*/
    border-radius: 20px;
    border: 0;
    box-shadow: rgba(101, 67, 33, 0.5) 0 -1px 3px 0 inset, rgba(101, 67, 33, 0.2) 0 3px 6px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: "Space Grotesk", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
    min-height: 56px;
    min-width: 120px;
    padding: 8px 20px;
    position: relative;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    transition: all 0.2s cubic-bezier(.22, .61, .36, 1);
    width: auto;

    text-align: center;
    align-content: center;
}


    .button-rojo:hover {
        background-color: #666666;
        color: #fff;
        transform: translateY(-2px);
    }

    .button-rojo:focus,
    .button-rojo:focus-visible,
    .button-rojo:active:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.button-rojo-vino {
    background-color: #6D071A;
}

    .button-rojo-vino:hover {
        background-color: #820b21;
    }


@media (min-width: 768px) {
    .button-rojo {
        padding: 16px 44px;
        min-width: 150px;
    }

}



.btn-transparent {
    background-color: transparent;
    color: #333;
    border: none;
    padding: 8px;
    transition: opacity 0.2s ease-in-out;

}

    .btn-transparent:focus {
        outline: none;
        box-shadow: none; 
    }

    .btn-transparent:hover {
        opacity: 0.8;
    }

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 0.15rem rgba(109, 7, 26, 0.3); 
    border-color: #6D071A;
}



.dropdown-menu {
    background-color: #fff !important;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/*boton navbar iniciar sesion movil*/
.navbarMovil {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.4rem;
    outline: none !important;
    padding-right:15px;
}

    .navbarMovil:focus,
    .navbarMovil:hover,
    .navbarMovil:active {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .navbarMovil i {
        color: #333; /* o el color institucional que prefieras */
    }






.btn-retys-gray2 {
    background: #444444;
    color: white;
    font-weight: 700;
    border: 0;
    border-radius: 20px;
    padding: 12px 20px; /* ✅ ajusta altura total */
    font-size: 15px; /* opcional, para balance visual */
    line-height: 1; /* ✅ evita que el texto se desplace verticalmente */
    height: 40px; /* ✅ altura fija */
    display: inline-flex; /* ✅ asegura alineación vertical */
    align-items: center;
    justify-content: center;
    transition: transform .05s ease-in-out, box-shadow .2s;
    box-sizing: border-box;
}

    .btn-retys-gray2:hover {
        transform: translateY(-1px);
        background-color: #5a5a5a;
        color: white;
    }

    .btn-retys-gray2:active {
        transform: translateY(0);
    }

    .btn-retys-gray2:focus {
        outline: none;
        box-shadow: 0 0 0 3px #444444;
    }



.btn-retysSM {
    background: #6D071A;
    color: white;
    font-weight: 600;
    border: 0;
    border-radius: 20px;
    padding: 12px 20px; /* ✅ ajusta altura total */
    font-size: 15px; /* opcional, para balance visual */
    line-height: 1; /* ✅ evita que el texto se desplace verticalmente */
    height: 40px; /* ✅ altura fija */
    display: inline-flex; /* ✅ asegura alineación vertical */
    align-items: center;
    justify-content: center;
    transition: transform .05s ease-in-out, box-shadow .2s;
    box-sizing: border-box;
}

    .btn-retysSM:hover {
        transform: translateY(-1px);
        background-color: #820b21;
        color: white;
    }

    .btn-retysSM:active {
        transform: translateY(0);
    }

    /*.btn-retysSM:focus {
        outline: none;
        box-shadow: 0 0 0 3px #6D071A;
    }*/


/* === Botones personalizados === */
.tramite-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.55;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, transform .05s ease;
    color: #fff;
}

    .tramite-btn i {
        font-size: 14px;
    }

/* Descargar */
.tramite-btn-descargar {
    background: #2f6b49;
}


    .tramite-btn-descargar:hover {
        background: #2f6b49;
        color: white;
    }

/* Eliminar */
.tramite-btn-eliminar {
    background: #6D071A;
}

    .tramite-btn-eliminar:hover {
        background: #820b21;
        color: white;
    }

/* Subir */
.tramite-btn-subir {
    background-color: #006341;
}

    .tramite-btn-subir:hover {
        background-color: #007A3D;
    }


.tramite-btn-gray {
    background-color: #444444;
}

    .tramite-btn-gray:hover {
        background-color: #5a5a5a;
        color:white;
    }

.tramite-btn-ghost {
    background: transparent;
    color: #3b3c36;
    /*border-color: green;*/
}

    .tramite-btn-ghost:hover {
        background-color: transparent;
        color: #3b3c36;
    }



.awesomplete {
    width: 100%;
}

    .awesomplete > ul {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
        padding: 6px 0;
        margin: 4px 0 0 0;
        border: 1px solid #e9e9e9;
        max-height: 260px;
        overflow-y: auto;
        transition: opacity 0.15s ease-in-out, transform 0.15s ease;
    }

        .awesomplete > ul[hidden] {
            display: block !important;
            opacity: 0;
            transform: translateY(-6px);
            pointer-events: none;
        }

        .awesomplete > ul > li {
            padding: 10px 16px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: background 0.12s ease, padding-left 0.12s;
            border-bottom: 1px solid #f2f2f2;
        }

            .awesomplete > ul > li:last-child {
                border-bottom: none;
            }

            /* Hover estilizado */
            .awesomplete > ul > li:hover {
                background: #fdf7fa;
                padding-left: 20px;
            }

            /* Selección con teclado (resaltado) */
            .awesomplete > ul > li[aria-selected="true"] {
                background: #e8f0fe;
                color: #7B1A1A;
                font-weight: 600;
            }

    /* Texto resaltado de coincidencia */
    .awesomplete mark {
        background: transparent;
        color: #7B1A1A;
        font-weight: 700;
    }



.btn-ghost {
    background: transparent;
    border-color: var(--border);
    border-radius: 50px;
    padding: 12px 26px;
    color: var(--ink-700)
}

    .btn-ghost:hover {
        background-color:transparent; 
    }

.btn-ghostSM {
    background: transparent;
    border-color: var(--border);
    border-radius: 50px;
    padding: 12px 26px;
    color: var(--ink-700)
}

    .btn-ghostSM:hover {
        background-color: transparent;
    }