:root {
    --color-primary-carmel: #D8AB94;
    --color-primary-pcfk: #7C786D;

    --color-text-carmel: var(--color-primary-carmel);
    --color-text-pcfk: var(--color-primary-pcfk);
}

.fz-10 { font-size: 10px; }
.fz-11 { font-size: 11px; }
.fz-12 { font-size: 12px; }
.fz-13 { font-size: 13px; }
.fz-14 { font-size: 14px; }
.fz-15 { font-size: 15px; }
.fz-16 { font-size: 16px; }
.fz-18 { font-size: 18px; }
.fz-19 { font-size: 19px; }
.fz-20 { font-size: 20px; }

/** CSS: CUSTOM-CAROUSEL **/
.custom-carousel { font-family: 'Poppins'; }
.custom-carousel .carousel-indicators { position: initial; padding: 8px 0; }
.custom-carousel .carousel-indicators li.active { background-color: #264F5C; }
.custom-carousel .carousel-indicators li { border: 1px solid #264F5C; width: 10px; height: 10px; border-radius: 50%; }
.custom-carousel .carousel-control-prev, .carousel-control-next { opacity: 1; width: 10%; margin-bottom: 20px; }
.custom-carousel .dialog-terms-and-conditions { position: absolute; color: white; bottom: 0; width: 100%; padding: 2px; background: lch(0 0 0 / 0.3); cursor: pointer; }
.custom-carousel .dialog-terms-and-conditions span { text-decoration: underline; width: 100%; display: block; text-align: center; }
.custom-carousel .carousel-dialogs button { background: none; border: none; position: absolute; top: 5px; right: 5px; cursor: pointer; }
.custom-carousel .carousel-dialogs dialog { position: relative; width: 95%; height: 80%; border: none; padding: 30px 12px 12px 12px; }
.custom-carousel .carousel-dialogs dialog .dialog-body { overflow-y: auto; height: 100%; }
.custom-carousel .carousel-dialogs dialog::backdrop { background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); cursor: pointer }
@media (min-width: 768px) {
    .custom-carousel .carousel-dialogs dialog { width: 60%; }
}


/** CSS: SALDOS-Y-CUPO-V2 **/
.dashboard-scv2 { font-family: 'Poppins'; }
.dashboard-scv2 .link-new-orders { max-width: 300px; background: #FFFFFF; box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); border-radius: 12px; text-align: center; }
.dashboard-scv2 .info-saldos .underline { border-bottom: 1px solid rgba(0, 0, 0, 0.3); margin-bottom: 15px; }
.dashboard-scv2 .info-saldos .credit-ld { font-size: 22px; font-weight: bold; text-transform: uppercase; }
.dashboard-scv2 .info-saldos .credit-allow-ld { font-size: 20px; font-weight: 400 }
.dashboard-scv2 .info-saldos .pay-by-brand-ld { font-size: 22px; font-weight: 400 }
.dashboard-scv2 .info-saldos .estado-cuenta a { font-size: 16px; color: #2B84F7; text-decoration: underline; }
.dashboard-scv2 .info-saldos .cupo-allow-ld { font-size: 20px; }

.accordion-sidebar-dz .m-accordion__item { border: none !important; }
.accordion-sidebar-dz .m-accordion__item-head { padding: 0 !important; background-color: white !important;}
.accordion-sidebar-dz .m-accordion__item-title { width: calc(100% - 20px) !important; }
.accordion-sidebar-dz .m-accordion__item-content {text-align: left; }
.accordion-sidebar-dz .m-accordion__item-head[aria-expanded="false"] .on-open { display: none }
.accordion-sidebar-dz .m-accordion__item-head[aria-expanded="true"] .on-closed { display: none }

/** CSS: BUTTON ELEDE **/
.text-poppins{ font-family: 'Poppins' !important; }
.bg-elede { background-color: #264F5C; }
.text-elede { color: #264F5C; }
.btn-elede { padding: 10px 20px; font-size: 24px; font-weight: bold; border-radius: 12px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.btn-elede, .btn-elede:hover, .btn-elede:active, .btn-elede:focus { color: white; text-decoration: none; }

/**
 * Estilos para el botón de mostrar/ocultar contraseña en la vista de login
 */
.m-input-icon { position: relative }
.m-input-icon .m-input-icon__icon { position: absolute; right: 0; top: 30%; cursor: pointer }
.m-input-icon [type="password"] + .m-input-icon__icon svg { cursor: pointer; }
.m-input-icon [type="password"] + .m-input-icon__icon .eye { display: none; }
.m-input-icon [type="text"] + .m-input-icon__icon .eye-slash { display: none; }

.fz-12 { font-size: 12px !important; }
.capitalize { text-transform: capitalize !important;}

/**
 * Estilos para personalizar el formulario de nuevo pedido.
 * Yo se que este no es el lugar y que debe ser mas lindo, pero solo mira a tu alrededor y dime donde es el lugar correcto para ponerlo, porque yo no lo veo.
 * Solo dios sabe por que funcionan las cosas en este proyecto, asi que no me hagas preguntas, solo acepta el hecho de que esto es lo correcto y dejame en paz.
 * @autor Jader Luis Diaz E. <jader.diaz@lineadirecta.com.co>
 */
.input-quantity-detail { max-width: 50px; padding: 0; text-align: center; }
.tblPdDetails tbody tr td { vertical-align: middle; }
.order-new { padding: 5px 1rem !important; }
.w-full { width: 100% !important; }

/**
 * Estilos para el placeholder skeleton
 */
@keyframes spinPlaceholder { 0% { left: -100%; } 100% { left: 100%; } }
.pw-placeholder { background-color: #eee; width: 100%; overflow: hidden; position: relative; border-radius: 5px; height: 40px; }
.pw-placeholder-loader { position: absolute; top: 0; left: 0; width: 100%; background: linear-gradient(to right, #eee 10%, #ddd 50%, #eee 90%); height: 100%; animation: spinPlaceholder 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite; }

.btn-modal-action { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 16px; gap: 10px; background: #7A776D; border-radius: 8px; color: white; font-weight: bold; opacity: .8; }
.btn-modal-action:hover { background: #7A776D; opacity: 1 !important; }
.btn-modal-link-action {color: #7A776D; font-weight: bold; text-decoration: underline; opacity: .8;}
.btn-modal-link-action:hover { opacity: 1 !important; color: #7A776D;}

.container-card-of-stock {
    max-width: 225px;
    border: 1px solid #CDD6DC;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}
.container-card-of-stock.card-scale-active:hover { border: 2px solid #67CEB6;}

.card-scale-active {cursor: pointer; transition: all 0.3s ease}
.card-scale-active:hover {box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.25);transform: scale(1.02); }