.shadow-surface-lg {
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    border: 1px solid var(--Border-Containers, #E5E7EB);
    background: var(--color-base-white, #FFF);
}

.w-160 {
    width: 160px;
}

.w-320{
    width: 320px !important; 
}

.w-400 {
    width: 400px !important;
}
.max-width-400 {
    max-width: 400px !important;
}

.mw-464 {
    max-width: 464px;
}

.h-160 {
    height: 160px;
}

.h-188 {
    height: 188px !important;
}

.br-4 {
    border-radius: 4px;
}

.border-container {
    border: 1px solid var(--color-border-container, #E5E7EB);
}

.border-input {
    border-radius: 4px;
    border: 1px solid var(--color-border-input, #7B7B7B);
    background: var(--color-base-white, #FFF);
}

.gap-2 {
    gap: 2px;
}

.gap-4 {
    gap: 4px;
}

.gap-6 {
    gap: 6px;
}
.gap-12 {
    gap: 12px;
}
/* Nuevo espaciado para gap-16 */
.gap-16 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.align-center {
    align-items: center;
}

.align-Start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.space-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.max-width{
    width:100%;
}



/* Padding */

.p-10 {
    padding: 10px;
}

.p-12{
    padding: 12px;
}

.p-8 {
    padding: 8px;
}

.p-8-12 {
    padding: 8px 12px;
}

/* Margin */

.u-mr-8 {
    margin-right: 8px;
}

.u-ml-8{
    margin-left: 8px;
}

.u-mt-16 {
    margin-top: 16px;
}

.u-mb-8 {
    margin-bottom: 8px;
}

.u-mb-16{
    margin-bottom: 16px;
}

.mb-28 {
    margin-bottom: 28px;
}
.mt-28 {
    margin-top: 28px;
}

.cursor-pointer {
    cursor: pointer;
}

.d-none {
    display: none;
}

.form-control:focus {
    box-shadow: none !important;
    border-color: var(--color-border-input-focus, #077574) !important;
    border-radius: 8px;
    outline: 2px solid var(--color-border-input-focus, #077574);
    outline-offset: 2px;
}

.m-24{
    margin-block:24px !important;
}

.ph:before {
    font-family: "Phosphor" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
}