@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");

/*====================
** Normalize
====================*/
/* Poppins Regular 400 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/front/Poppins-Regular.woff2') format('woff2'),
        url('/assets/front/Poppins-Regular.woff') format('woff'),
        url('/assets/front/Poppins-Regular.ttf') format('truetype');
}

/* Poppins Medium 500 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/front/Poppins-Medium.woff2') format('woff2'),
        url('/assets/front/Poppins-Medium.woff') format('woff'),
        url('/assets/front/Poppins-Medium.ttf') format('truetype');
}

/* Poppins SemiBold 600 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/front/Poppins-SemiBold.woff2') format('woff2'),
        url('/assets/front/Poppins-SemiBold.woff') format('woff'),
        url('/assets/front/Poppins-SemiBold.ttf') format('truetype');
}

/* Poppins Bold 700 */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/front/Poppins-Bold.woff2') format('woff2'),
        url('/assets/front/Poppins-Bold.woff') format('woff'),
        url('/assets/front/Poppins-Bold.ttf') format('truetype');
}


body {
    /*font-family: 'Poppins', sans-serif;*/
    font-family: Arial, sans-serif;
    font-weight: 400;
}

body {
    background-color: #001458;
    color: #000000;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    margin: 0;
    padding: 0;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/fondo_new_2.png");
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    z-index: -1;
}

.form-select-error {
    border: 1px solid red;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #000;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

/* Modo claro por defecto */

h2.section-title.home-title {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.section-subtitle.home-sub-title {
    font-size: 1rem;
    color: #fff;
    opacity: 0.8;
    margin: 0.5rem 0 0;
}

.section-divider {
    width: 60px;
    height: 2px;
    background-color: #ffc107;
    margin: 1rem auto 0;
    border-radius: 1px;
}

.section-title.first-section {
    margin: 0.5rem 0 0.75rem !important;
    color: #fff;
}

.section-title.first-section i {
    color: #fff;
}

/* Dark mode*/
/* //////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////*/
.dark-mode {
    background-color: #ebebeb;
}

.dark-mode .col-lg-12.text-center.section-title-block.custon-home-tittle {
    background: #51667e1f;
    /* un gris azulado semitransparente */
    padding: 20px;
}

.dark-mode h2.section-title.home-title {
    color: #001458;
}

.dark-mode .section-subtitle.home-sub-title {
    color: #001458;
}

.dark-mode .section-divider {
    background-color: #bf1212;
}

body.dark-mode::before {
    background-image: url("/fondo_new_22.png");
    background-size: contain;
    background-position: center;
    opacity: 0.6;
    z-index: -1;
}

.dark-mode .section-title.first-section {
    color: #545454;
}

.dark-mode .section-title.first-section i {
    color: #545454;
}

/* //////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////*/
/* //////////////////////////////////////////////////*/

/*fin dark mode*/

.col-lg-12.text-center.section-title-block.custon-home-tittle {
    background: #5294e21f;
    padding: 20px;
}

img.icon-Shop {
    width: 1.5rem;
    top: -2px;
    position: relative;
    left: 3px;
}

form#searchForm {
    margin-right: 25px;
}

.btn-transp {
    background: transparent !important;
    border-color: transparent !important;
    margin-left: 0px !important;
    margin-right: 10px !important;
    padding: 0px !important;
}

.btn-transp::after {
    display: none !important;
}

.dropdown-cart {
    padding: 16px !important;
    background: #ffffff !important;
    filter: drop-shadow(0px 2px 1px rgba(0, 29, 110, 0.16)) drop-shadow(0px 8px 16px rgba(0, 20, 88, 0.24));
    top: 58px !important;
    left: -95px !important;
    cursor: default;
}

.triangulo-sup {
    position: absolute;
    left: 90px;
    top: -12px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #8e8e8e85 !important;
}

.dropdown-saludo {
    font-weight: 500;
    font-size: 14px;
    color: #001458;
}

.dropdown-name-user {
    font-weight: 500;
    font-size: 14px;
    color: #3065c1;
}

.dropdown-total-cart {
    font-weight: 500;
    font-size: 14px;
    color: #001458;
    margin-top: 10px;
    margin-bottom: 10px;
}

.cart-total {
    font-weight: 500;
    font-size: 16px;
    color: #ec6221;
}

.view-cart {
    width: 100%;
    height: 40px;
    background: #ec6221;
    border-radius: 0.25rem;
    text-align: center;
    cursor: pointer;
    color: white;
}

.view-cart>span {
    line-height: 40px;
}

.dropdown-cart>.col-12 {
    margin-bottom: 10px;
}

ul#cart-items {
    width: 420px;
}

.icon-Search {
    margin-right: 3px;
    position: absolute;
    right: 0px;
    line-height: 25px !important;
}

.btn-Search {
    position: absolute;
    right: 0px;
    width: 10%;
    height: 100%;
    background: transparent !important;
    border-color: transparent !important;
}

.form>input.B-transparent {
    position: relative;
    top: 20px;
    z-index: 10;
    color: white;
}

.form>div.inputBack {
    position: relative;
    top: -20px;
    z-index: 5;
    cursor: pointer;
}

.inputBack>.btn-Search>span.icon-Search::before {
    color: white;
}

input.B-transparent::placeholder {
    color: white;
}

input.B-transparent:focus+div.inputBack {
    border: solid 2px white;
}

.icon-Shop {
    padding: 5px;
    cursor: pointer;
}

.icon-Shop::before {
    color: white;
}

.btn-register {
    width: 180px;
    height: 40px;
    background: #ec6221;
    border-radius: 0.25rem;
    text-align: center;
    cursor: pointer;
    margin-left: 15px;
}

li.nav-item.margin-btn-sm.login-register {
    margin-left: 10px;
}

.CenterBtnRegister {
    position: relative;
    top: 20px;
}

.btn-register span.cont-btn {
    color: white;
    line-height: 40px;
}

.most-wanted-product {
    margin-top: -15px;
    margin-bottom: 40px;
    padding: 0px !important;
    margin-left: -20px;
}

.cont-categorias {
    min-height: 324px;
}

span.link-direcciones-gestionar.delete-product-btn {
    float: unset;
}

.menu-categorias {
    margin-top: 5px;
    background: white;
    border-radius: 4px;
    padding: 25px 25px 25px 25px;
}

span#dropdownMenuButton {
    padding: 8px 0px 0px 5px;
}

.header-categorias {
    margin-top: 20px;
}

.title-menu {
    font-weight: 700;
    font-size: 18px;
    color: #001458;
}

.inf-categorias {
    margin-top: 5px;
}

.inf-categorias>p {
    font-weight: 500;
    font-size: 12px;
    color: #001458;
}

.cont-categorias .list-group>.list-group-item {
    margin-bottom: 0px;
    background-color: transparent;
    border: none;
}

.categoria {
    font-weight: 500;
    font-size: 16px;
    color: #ec6221 !important;
    cursor: pointer;
}

.categoria:hover {
    color: #ec6221;
}

.can-categoria {
    font-weight: 400;
    font-size: 14px;
    color: #7d80a0;
}

form#searchForm {
    margin-right: 32px;
    width: 460px;
    margin-left: 30px;
}

.title-slider {
    font-weight: 600;
    font-size: 20px;
    color: #001458;
}

.cont-home {
    padding-top: 50px;
}

.owl-carousel .owl-stage {
    margin-top: 10px;
}

.partner-slider-two .item-slide {
    /* background: #42bdc2;         */
    color: #000000;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem !important;
    text-align: center;
}

.btn-outline-success {
    color: #ffffff;
    border-color: #001458;
    background-color: #001458;
    padding-bottom: 8px;
}

.docname a .search-content p {
    margin-bottom: 0px;
    font-size: 14px;
}

.docname a .search-content p {
    margin-bottom: 0px;
    font-size: 14px;
}

.docname a .search-content span {
    color: #000000 !important;
}

.docname a .search-content {
    flex: 1;
}

.docname a img {
    width: 50px;
    height: 50px;
}

.docname a {
    display: flex;
}

.docname {
    width: 100% !important;
    border-bottom: 1px solid rgba(84, 82, 82, 0.09) !important;
}

img.modal-logo {
    width: 125px;
    margin-right: 12px;
}

a {
    text-decoration: auto;
}

.categoria::after {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

.triangulo-cat {
    position: absolute;
    left: 20px;
    top: -12px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ffffff !important;
}

ul.dropdown-menu.cat-lateral.show {
    width: 395px !important;
    top: 40px;
}

ul.dropdown-menu.show {
    top: 55px;
    box-shadow: 0px 0px 8px -5px #6e6e6e;
}

.navbar-nav .dropdown-menu {
    position: absolute !important;
}

li.list-group-item-sub.sub-cat-li {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    color: #212529;
    text-decoration: none;
    background-color: #fff;
}

.child-cat {
    list-style: circle;
}

.start-100 {
    left: 80% !important;
    top: 5px !important;
}

.montacargas::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    left: -2px;
    position: relative;
    top: 2px;
}

li.nav-item.dropdown.campana-notificacioens {
    padding: 8px 5px 5px 10px;
}

.img-logo_yespallet {
    text-align: center;
}

.col-lg-3.col-md-12.col-sm-12.menu-categorias {
    background: white;
}

.bg-light {
    box-shadow: 0px -1px 10px 0px #c8c8c8;
    background-color: #ecadad1a !important;
}

a.logo-link img {
    width: 195px;
}

.container.mt-5 {
    margin-bottom: 120px;
}

.cont-home {
    padding-top: 8px;
}

.section-top .section-title {
    font-weight: 600;
    font-size: 20px;
    color: #001458;
    display: inline-block;
    position: relative;
    margin-bottom: 0px;
    padding: 10px 0px;
}

.section-top.top-new .section-title::after {
    position: absolute;
    content: "";
    background: #001458;
    height: 5px;
    width: 368px;
    bottom: -3px;
    left: 0;
}

.love-text {
    font-size: 18px;
    position: relative;
}

.flag {
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-left: 5px;
}

@keyframes latidos {
    from {
        transform: none;
    }

    50% {
        transform: scale(1.4);
    }

    to {
        transform: none;
    }
}

/* En la clase corazon vamos a llamar latidos en la animación  */
.heart {
    display: inline-block;
    font-size: 21px;
    text-shadow: 0 0 10px #b8b8b8, 1px 1px 0 #e02222;
    color: red;
    animation: latidos 2s infinite;
    transform-origin: center;
}

.con-amor {
    font-family: serif;
    background: #e0e0e0;
    padding: 5px 5px;
    text-align: center;
    color: #001458;
    text-shadow: 1px 1px 1px #cbcbcb;
}

img.bandera-heart {
    width: 38px;
    top: -2px;
    position: relative;
}

.flag {
    width: 20px;
    height: auto;
    vertical-align: middle;
    margin-left: 5px;
    animation: wave 2s infinite linear;
}

img.bandera-heart {
    width: 45px;
    top: 1px;
    position: relative;
    left: -16px;
}

span.hora-local {
    font-size: 10px !important;
    text-align: center !important;
    background: #001458 !important;
    color: white !important;
    border-radius: 0.25rem !important;
}

.link-header:hover {
    border-radius: 0.25rem !important;
}

.link-header.show {
    background: #001458;
    color: white !important;
    border-radius: 0.25rem !important;
}

.link-header:hover {
    background: #001458;
    color: white !important;
    border-radius: 0.25rem !important;
}

a.nav-link.link-header {
    border-radius: 0.25rem;
}

li.nav-item.search-bar {
    margin-left: 5px;
}

.categoria:hover {
    color: #001458 !important;
    cursor: pointer;
}

.sub-span-class {
    cursor: pointer;
}

li.list-group-item-sub.sub-cat-li:hover {
    background: #001458;
    color: white;
}

li.list-group-item-sub.sub-cat-li:hover {
    background: #001458;
    color: white;
}

.child-cat {
    background: #ededed !important;
    margin-right: -16px;
    margin-left: -16px;
    margin-bottom: -8px;
    list-style: none;
}

.child-cat li:hover {
    background: #933434 !important;
}

nav.navbar.navbar-expand-xl.navbar-light.bg-light.header-nav-prinicpal {
    background: #fff000 !important;
}

.btn-outline-success:hover {
    color: #ffffff;
    border-color: #6988d1;
    background-color: #6988d1;
}

ul.navbar-nav.me-auto.mb-2.mb-lg-0.list-group.flex-column {
    width: 100%;
}

img.logo-denominacion {
    position: relative;
    z-index: 100;
    width: 35% !important;
    top: -46px;
}

img.logo-denominacion {
    position: relative;
    z-index: 100;
    width: 25% !important;
    top: -132px;
    left: -8px;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    padding: 1px;
    margin-left: 10px;
    border-radius: 15px;
}

.title-cat {
    padding: 5px 10px;
    position: relative;
    top: -35px;
    left: 4px;
    padding-right: 10px;
    color: #ffffff;
    font-weight: 600 !important;
    background: #001458b0;
}

span.title-cat.carusel-name-denominacion {
    top: -79px !important;
}

.col-lg-12.slider-owl-cat.owl-carousel.owl-theme.owl-loaded.owl-drag {
    margin-bottom: 20px;
}

.footer {
    overflow: hidden;
    position: relative;
    padding: 56px 0px 0px;
}

h5.foot-cont-title {
    font-weight: 700;
    font-size: 18px;
    color: #92bdf4;
    margin-bottom: 10px;
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
}

/* footer */

/*.footer::before {
  padding-top: 10px;
  content: "";
  display: block;
  height: 1px;
  background-color: #c6c6c6;
  margin-bottom: -15px;
}*/

.footer .container {
    padding-top: 60px;
}

.footer a {
    color: white;
}

.footer ul {
    list-style: none;
}

#footer>.container>div>div>div>div>ul>li>a {
    font-weight: 500;
    font-size: 14px;
    color: white !important;
    font-family: "Open Sans", sans-serif;
}

.footer .fotter-social-links ul {
    padding-left: 0px;
    margin-left: 0px;
}

#footer>.container>div>div>div>div>ul>li {
    margin-bottom: 10px;
}

.footer .fotter-social-links ul li {
    display: inline-block;
}

#footer ul li {
    list-style: none;
}

.correoInf {
    margin-top: 0px;
    color: white;
    margin-left: 5px;
}

#footer>.container>div>div>div>div>ul>li>a {
    font-weight: 200;
    font-size: 14px;
    color: #dadada !important;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.fab {
    font-family: "Font Awesome 5 Brands";
}

.fa,
.fab,
.fal,
.far,
.fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.fa-linkedin-in:before {
    content: "\f0e1";
}

.fa-dribbble:before {
    content: "\f17d";
}

.fa-facebook-f:before {
    content: "\f39e";
}

.footer>.container>div>div>.footer-info-area>.fotter-social-links ul li a {
    color: white !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.footer .fotter-social-links ul li a {
    font-size: 14px;
    width: 38px;
    height: 38px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    line-height: 38px;
    margin: 0px 3px;
    color: #bac9e6;
    border: 1px solid #bac9e6;
    background: none;
    -webkit-transition: 0.3s ease-in;
    -moz-transition: 0.3s ease-in;
    -o-transition: 0.3s ease-in;
    transition: 0.3s ease-in;
}

ul.link-list {
    padding: 0px;
    margin-bottom: 30px;
}

h5.foot-cont-title {
    font-weight: 700 !important;
    font-size: 18px;
    color: #ffff00;
    margin-bottom: 12px;
    text-decoration: underline;
}

.content-copyright.text-center {
    background: #8395b1;
    color: #ffffff;
    font-weight: 100 !important;
}

.footer .fotter-social-links ul li a {
    font-size: 14px;
    width: 38px;
    height: 38px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    line-height: 38px;
    margin: 0px 3px;
    color: #bac9e6;
    border: 1px solid #bac9e6;
    background: none;
    -webkit-transition: 0.3s ease-in;
    -moz-transition: 0.3s ease-in;
    -o-transition: 0.3s ease-in;
    transition: 0.3s ease-in;
}

.fotter-social-links {
    margin-top: 25px;
    margin-bottom: -15px;
}

img.user-photo {
    width: 20%;
}

.container-from {
    background: white;
    box-shadow: 0px 0px 8px -5px #0000005e;
    margin-top: 10px;
}

.txt-inicia {
    padding-left: 0px;
    font-size: 28px;
    color: #003399;
}

.txt-inicia-2 {
    font-size: 28px;
    color: #001458;
}

.row.pading-40 {
    padding: 40px 20px !important;
    border-radius: 8px;
}

.wizard-cont {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    padding-left: 0px !important;
    display: flex;
    cursor: default;
}

.login-panel {
    text-align: right;
}

img.user-photo {
    width: 15%;
}

.col-lg-12.col-md-12.col-sm-12.col-12.content-copyright.text-center span {
    font-weight: 100 !important;
}

.footer .fotter-social-links ul {
    padding-left: 0px;
    margin-left: 0px;
    margin-top: -15px !important;
    margin-bottom: 10px !important;
}

span.name-user {
    padding: 10px 10px;
    border-radius: 0.25rem;
    box-shadow: 1px 0px 5px -3px #565656;
    background: #f5f5f5;
    color: #001458;
    font-weight: 600 !important;
    border: 1px dotted #001458;
}

.txt-inicia.element_two {
    text-align: center;
    margin-top: 45px;
}

span.img-creado img {
    margin-top: 40px !important;
}

span.img-creado img {
    width: 17%;
}

.margin-wizard {
    margin-top: 15px;
}

.cont-btn-cuenta {
    margin-bottom: 10px;
}

.dropdown-menu.dropdown-menu-right.show {
    box-shadow: 0px 0px 8px -5px #6e6e6e !important;
}

.row.no-marginRL.alert.alert-warning {
    padding-top: 15px;
}

.certificate-logo {
    background: white;
    border: 1px solid #d9dbe4;
    border-radius: 4px;
    padding: 4px;
}

nav.navbar.navbar-expand-lg.navbar-light.bg-light {
    padding-bottom: 75px;
}

.row.container-element-contact {
    /* border: 1px solid #d7d7d7; */
    border-radius: 0.25rem;
    /* padding: 10px; */
    margin: 0px 0px 5px 5px;
}

.col-lg-6.col-md-12.col-sm-12.col-12.btn-agregar {
    text-align: end;
}

.category-active-sub {
    background: #ffecce !important;
    border: 3px dotted #003399 !important;
    color: #003399 !important;
    font-weight: 600;
    padding: 15px 15px !important;
    height: 65px;
}

.cart-provider-sub-product {
    width: 100%;
    height: 45px;
    align-items: center;
    padding: 10px 10px;
    border: 1px solid #ff55003b;
    border-radius: 0.25rem;
    color: #ff6700eb;
    cursor: pointer;
    margin-bottom: 5px;
    background: #ff55000a;
}

.cart-provider-sub-product.active {
    background: #00339900;
    border: 0.5px solid #003399;
    height: 45px !important;
    padding: 10px 10px;
    color: #003399;
}

.col-lg-12.col-md-12.col-sm-12.col-12.cart-provider-sub-product.child-category {
    width: 100%;
    height: 35px;
    align-items: center;
    padding: 5px 10px;
    color: #003399;
    cursor: pointer;
    background: #e5effc;
    border: none;
    margin-bottom: 5px;
    font-weight: 600;
    border: 1px dotted #001458;
}

.child-active {
    background: #003399 !important;
    color: #e5effc !important;
}

.btn-eliminar {
    position: absolute;
    z-index: 10;
    background: red;
    color: white;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 100%;
    text-align: center;
    line-height: 30px;
}

.center-all.img-continent {
    margin-bottom: 10px !important;
}

.col-12.alertas-sitio {
    margin-top: -70px;
    margin-bottom: 30px;
}

.alert.validation {
    position: relative;
    padding: 15px 10px 0px 10px !important;
    border-radius: 0.25rem !important;
}

.center-all.txt-info {
    margin-bottom: 0px !important;
}

small.form-text.text-ver-archivo a {
    color: #0f78f2 !important;
    text-decoration: underline;
    margin-top: 10px !important;
}

small.form-text.text-ver-archivo {
    margin-top: 10px !important;
}

img.logo_yespallet_registro {
    width: 60%;
    cursor: pointer;
}

footer#footer {
    padding-top: 0px;
    margin-top: 40px;
    color: white;
    background: linear-gradient(to bottom, #709cd640, #001458);
}

img.user-photo-home {
    width: 20%;
}

a#navbarDropdownMenuLinkHeader {
    width: 160px !important;
}

.nav-text-menu.home-login {
    color: #001458;
}

a#navbarDropdownMenuLinkHeader {
    background: #ffffffba;
    color: black;
    border: 1px solid #0014582b;
    padding: 6px 0px 0px 0px;
}

li.nav-item.dropdown.campana-notificacioens {
    padding: 9px 5px 5px 10px;
}

.bg-info {
    background-color: #bf1212 !important;
}

.col-12.noti-container {
    padding: 10px;
    width: 370px;
}

span#noti-count {
    right: -1px;
    top: -1px;
}

span#favorite-count {
    right: -12px;
    top: -1px;
}

.row-cont-register {
    width: 100% !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-top: 25px !important;
    padding-bottom: 0px;
}

.col-lg-12.col-md-12.col-sm-12.col-12.cont-btn-cuenta {
    margin-top: 40px;
    margin-bottom: 30px;
}

label.form-check-label a {
    text-decoration: underline !important;
    color: #001458 !important;
}

h4.txt-inicia.registrate {
    font-weight: 600;
    text-transform: uppercase;
}

.is-invalid {
    border: 1px solid #dc3545;
}

.row.no-marginRL.input-new-2 .form-group {
    margin-bottom: 12px !important;
}

::placeholder {
    color: #00145852 !important;
    font-style: italic;
    font-size: 15px !important;
    font-weight: 400 !important;
}

.col-lg-12.col-md-12.col-sm-12.col-12.txt-inicia.element_two.txt-rfc {
    text-align: center;
    letter-spacing: normal;
    display: inline-grid;
}

.txt-inica-new {
    color: #003399;
    font-size: 28px;
    margin-bottom: 25px;
}

label.form-check-label.dir-factu {
    font-size: 16px !important;
    color: #003399;
}

img.img-icon-tv {
    width: 14%;
}

.cart-provider-product {
    padding: 35px;
    display: table;
}

.dropdown-menu.categoria-dorp {
    width: 450px !important;
    padding: 20px;
}

.dropdown-menu.categoria-dorp {
    width: 450px !important;
    padding: 20px;
    position: absolute;
    left: -70px;
    background: #405499;
    color: #ffffff;
    font-weight: 400;
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 6px;
    color: #545454;
}

.iti {
    position: relative;
    margin-right: 75px;
    display: inline-block;
}

li.nav-item.dropdown.campana-notificacioens {
    color: #000000;
}

img.img-icon-cat {
    width: 78%;
}

.row.no-marginRL.cart-provider-product.continet {
    padding: 30px 25px 10px 25px !important;
}

button.close.alert-close {
    background: none;
    border: none;
    position: absolute;
    color: #a30606 !important;
    font-size: 18px;
    font-weight: 600;
}

.contMexico {
    position: relative;
}

.contMexico img {
    width: 44px;
    margin-left: 0px;
    position: absolute;
    top: -10px;
}

span.spanLT.header-link {
    display: inline-grid;
    font-size: 12px;
    font-weight: 600;
    color: #001458;
    min-width: 78px !important;
    top: 0px;
    position: relative;
    left: 20px;
}

span#relojnumerico {
    text-align: center;
}

.dropdown-toggle::after {
    position: relative !important;
    top: 2px !important;
}

.btn-register a:hover .cont-btn {
    color: #ffffff;
    text-decoration: underline;
}

.alert.alert-danger.validation p {
    margin-left: 28px;
}

.alert.alert-success.validation p {
    margin-left: 28px;
}

.user-profile-info-area {
    background: white;
    padding: 40px 10px;
}

li.nav-item.sidebar-menu a {
    color: #545454 !important;
}

li.nav-item.sidebar-menu a i {
    color: #5294e2;
}

/*-----------------------------
**  My-breadcrumb Area Start
------------------------------*/
.mr-breadcrumb {
    background: white;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 6px -5px #4f4f4f;
    padding: 15px 15px 0px 20px;
}

.mr-breadcrumb .heading {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #545454;
    display: block;
    width: 100%;
}

.mr-breadcrumb .links {
    position: relative;
    padding-left: 2px;
    display: block;
}

.mr-breadcrumb .links li {
    display: inline-block;
}

.mr-breadcrumb .links li a:hover {
    text-decoration: underline;
}

.mr-breadcrumb .links li a {
    font-size: 12px;
    color: #000000;
    margin-right: 20px;
    position: relative;
    font-weight: 300;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.mr-breadcrumb .links li a:hover {
    color: #1f224f;
}

.mr-breadcrumb .links li a::after {
    position: absolute;
    content: "keyboard_arrow_right";
    /* Reemplaza con el código correcto para Material Icons */
    font-family: "Material Icons";
    top: 0;
    right: -20px;
    color: #143250;
}

.mr-breadcrumb .links li:last-child a::after {
    display: none;
}

span.badge.badge-danger {
    color: white;
    background: #bf1212;
}

.body-container-user-panel {
    background: white;
    border-radius: 10px;
    padding: 25px 25px;
}

h4.title {
    font-size: 20px;
    line-height: 20px;
    color: #5294e2;
    font-weight: 600;
    margin-bottom: 8px;
}

h4.title-form {
    font-size: 20px;
    line-height: 20px;
    color: #bf1212;
    font-weight: 600;
    margin-bottom: 8px;
}

h5.title {
    font-size: 18px;
    margin-bottom: 12px;
    color: #5e5e5e;
    font-weight: 400;
}

span.user-type {
    color: #bf1212;
    text-transform: initial;
}

span.user-title {
    color: #181818;
    font-weight: 600;
    font-style: normal;
}

ul.list li {
    margin-bottom: -10px;
    list-style: none;
}

h3.title.w-title {
    color: #2d6f4f;
    font-size: 20px;
}

h3.title.w-price {
    text-align: justify;
    margin-top: 10px !important;
    color: #bf1212;
}

.transferir {
    text-align: center;
    margin-top: 15px;
}

.main-info.container-ww {
    border: 2px dotted #f0505c;
    padding: 15px 20px 20px 15px;
}

a.link {
    text-decoration: underline !important;
}

.table-responsiv {
    margin-top: 40px;
    margin-bottom: 40px;
}

.row.btn-area {
    margin-bottom: 20px;
}

.col-sm-4.table-contents {
    text-align: end;
}

a.add-btn {
    background: #198754;
    border-radius: 4px;
    padding: 5px 8px;
    color: white;
    font-size: 12px;
    position: relative;
    top: -1px;
}

ul.presentacion-ul {
    list-style: none;
    display: inline-flex;
    padding: 5px 5px;
}

span.notification-imput {
    color: #959595;
    font-size: 11px;
}

label.label-form {
    color: #001458;
    font-size: 14px;
    font-weight: 400;
}

.form-select {
    color: #565656 !important;
}

.img-upload.custom-image-upload #image-preview {
    width: 100% !important;
    border: 1px dotted #bf1212 !important;
}

.img-upload.custom-image-upload #image-preview {
    background-color: #f7f7f7 !important;
    background-size: contain !important;
    background-position: center 0px !important;
    background-repeat: no-repeat !important;
}

.img-upload #image-preview {
    height: 260px !important;
}

a.link {
    color: #0039ff;
}

.item.certificate-logo.product-certificate.upload {
    width: 105%;
    border: none;
    box-shadow: none;
}

hr:not([size]) {
    height: 2px;
    width: 100% !important;
    color: #92929e;
}

span.input-group-btn {
    margin-left: 10px !important;
}

li.select2-results__option img {
    width: 5%;
}

.form-select:disabled {
    background-color: #e9ecef;
    font-style: italic;
    color: #afafaf !important;
}

li.nav-item.sidebar-menu {
    margin-top: 5px;
}

li.nav-item.sidebar-menu:hover {
    background: #e9e9e9;
    border-radius: 4px;
}

li.nav-item.sidebar-menu.active {
    background: #d5e8ff !important;
    border-radius: 4px;
}

div#btn-certi-product {
    text-align: center;
    background: #f4f4f4;
    padding: 15px 10px 5px 10px;
    color: #5294e2;
    border: 1px dotted #bf1212;
    width: 92%;
    margin-left: 0px;
}

.col-lg-6.col-md-12.col-sm-12.col-12.mb-3.product {
    width: 92%;
}

li.presentacion-li.active {
    background: #e5effc !important;
    color: black !important;
    border-radius: 4px !important;
}

li.presentacion-li {
    margin: 0px 5px;
    padding: 5px 10px;
    color: #555555 !important;
    border-radius: 8px;
    /* text-decoration: underline; */
    background: #eeeeee !important;
}

span.label-form.presentacion {
    font-size: 16px;
    color: #2d3274;
}

.krajee-default.file-preview-frame .kv-file-content {
    width: 180px !important;
    height: 110px !important;
}

.btn.btn-primary.btn-file {
    background: #5294e2 !important;
    border-color: #5294e2 !important;
}

.btn.btn-primary.btn-file:hover {
    background: #6da8f0 !important;
    border-color: #6da8f0 !important;
}

.item.certificate-logo.product-certificate {
    width: 100%;
    margin-bottom: 25px;
}

.mr-breadcrumb {
    background: white;
    margin-bottom: 20px !important;
    border-radius: 4px !important;
    padding: 15px 15px 0px 20px !important;
}

.img-upload .text {
    font-size: 14px;
    margin-top: 15px;
}

.img-upload #image-preview {
    width: 240px;
    height: 240px;
    border: 1px dashed #000;
    color: #ecf0f1;
    position: relative;
    background: url(../images/upload.png);
    background-repeat: no-repeat;
    background-position: center;
}

.img-upload #image-preview input {
    width: 120px;
    height: 40px;
    z-index: 10;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0px;
    cursor: pointer;
    opacity: 0;
}

.img-upload #image-preview input:focus {
    outline: 0px;
}

.img-upload #image-preview label {
    z-index: 5;
    width: 120px;
    height: 40px;
    background-color: #ffffff;
    color: #143250;
    font-size: 14px;
    line-height: 40px;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    margin-left: 0px;
    bottom: 0px;
    margin-bottom: 0px;
    text-align: center;
    position: absolute;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    /* box-shadow: 0px 0px 15px #eaeaea; */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.img-upload #image-preview label i {
    margin-right: 7px;
}

.img-upload #image-preview label:hover {
    background: #2d3274;
    color: #fff;
}

.img-upload #image-preview label:focus {
    outline: 0px;
}

@keyframes shine-group1 {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes shine-group2 {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes shine-group3 {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

.placeholder-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 13px;
    width: 95%;
    height: 325px;
    background-color: #f0f0f0;
    overflow: hidden;
}

.placeholder-image {
    width: 100%;
    height: 100%;
    background-color: #ddd;
    /* Color de fondo de las imágenes de carga */
}

/* Aplica la animación de brillo al primer grupo de tres imágenes */
.placeholder-container:nth-child(3n + 1) .placeholder-image {
    animation: shine-group1 2s infinite;
}

/* Aplica la animación de brillo al segundo grupo de tres imágenes */
.placeholder-container:nth-child(3n + 2) .placeholder-image {
    animation: shine-group2 2s infinite;
}

/* Aplica la animación de brillo al tercer grupo de tres imágenes */
.placeholder-container:nth-child(3n + 3) .placeholder-image {
    animation: shine-group3 2s infinite;
}

.item.certificate-logo.product-certificate img {
    width: 100%;
}

.col-lg-4.row-certificates {
    display: inline-flex;
    margin-bottom: -25px;
}

div#certificates-container div {
    padding: 10px;
}

div#certificates-container {
    border: 1px dotted #bf1212;
    background: #f4f4f4;
    padding: 5px 5px 5px 5px;
    max-height: 256px;
    overflow-y: auto;
    height: 338px;
}

.item.certificate-logo.product-certificate img {
    width: 95% !important;
}

.placeholder-container {
    margin-left: 10px;
}

span.ctn_certificaciones {
    font-size: 12px;
    color: #bf1212;
}

.config_pallet input {
    width: auto;
    max-width: 50px;
    height: auto !important;
    text-align: center;
    border: 0px;
    border-bottom: 1px solid black;
    border-radius: 0;
    padding: 0;
}

.config_pallet input:focus {
    outline: 0 !important;
    background: transparent !important;
    border: 0px !important;
    border-color: transparent !important;
    border-bottom: 1px solid black !important;
}

.config_pallet input[type="number"]::-webkit-inner-spin-button,
.config_pallet input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

img.img-camas {
    width: 100%;
}

img.img-cajas {
    width: 100%;
}

.fron-config-pallet-label {
    color: #5294e2;
    font-size: 20px;
    margin-bottom: 25px;
    font-style: italic;
    letter-spacing: 2px;
    font-weight: 600;
}

span.banged-list.ml-3 {
    margin-right: 3px;
}

.custom-select {
    border: none;
    border-bottom: 1px solid #ced4da;
    /* Color del borde inferior */
    border-radius: 0;
    /* Borde inferior sin redondeo */
    padding: 0.375rem 0;
    /* Ajusta el relleno según tus preferencias */
    display: inline-block;
    /* Mantiene en la misma línea */
    width: auto;
    /* Ajusta el ancho según tus preferencias */
}

.config_pallet input {
    width: auto;
    max-width: 45px;
    height: auto !important;
    text-align: center;
    border: 1px solid #aaa;
    padding: 1px;
    border-radius: 3px 3px 0px 0px;
    margin-right: 3px;
    margin-left: 3px;
}

.custom-select {
    border: none;
    border-bottom: 1px solid #d7d7d7;
    border-radius: 0;
    padding: 0px 11px 0px 10px;
    display: inline-block;
    width: 110px;
}

label.form-label-secun {
    font-size: 14px;
    color: #001458;
}

.col-lg-12.mt-3.mb-5.conta-ner-cajas {
    margin-top: 32px !important;
}

label.form-label {
    color: #545454;
    font-weight: 400;
}

.nicEdit-panelContain {
    width: 100%;
}

.content-copyright.text-center {
    background: #001458 !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    padding: 12px 10px;
}

button.btn-c:hover {
    background: #0056b3 !important;
    border-color: #0056b3 !important;
}

.btn-primary:hover {
    color: #fff;
    background: #0056b3 !important;
    border-color: #0056b3 !important;
}

a.element-edit.d-flex.align-items-center {
    text-decoration: none;
}

#loading-image-submit {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 10px;
}

#loading-image-submit img {
    width: 100px;
    height: 100px;
}

.btn-agregar-certificacion:hover {
    text-decoration: none !important;
}

a.btn.btn-secondary:hover {
    text-decoration: none !important;
}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255);
}

.container-aguila {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: #ffffff;
    border-radius: 8px;
    width: 30%;
    text-align: center;
}

.hidden {
    display: none;
}

.semi-transparent {
    opacity: 0.5;
    /* Opacidad menor para la capa de abajo */
}

.container-aguila img {
    width: 85%;
}

.loading-message {
    color: #001458;
    text-align: center;
    margin-top: 10px;
    font-size: 24px;
    font-family: unset;
    font-weight: 600;
}

.loading-message::after {
    content: " .";
    /* Inicializa el texto con un punto */
    animation: dots 1.5s infinite;
    /* Agrega la animación de los puntos */
}

@keyframes dots {

    0%,
    20% {
        content: " .";
        /* Muestra un punto durante el 20% de la animación */
    }

    40% {
        content: " ..";
        /* Muestra dos puntos durante el 20% de la animación */
    }

    60% {
        content: " ...";
        /* Muestra tres puntos durante el 20% de la animación */
    }

    80%,
    100% {
        content: " .";
        /* Vuelve a mostrar un punto durante el 20% de la animación */
    }
}

.with-border-left {
    border-left: 2px dotted #b3bac2;
    padding-left: 20px;
}

.col-lg-6.col-md-12.col-sm-12.col-12.txt-complemento span {
    color: #bf1212;
    font-size: 18px;
    font-weight: 600;
}

.col-lg-6.col-md-12.col-sm-12.col-12.btn-agregar {
    margin-top: -5px;
}

.row.first-element {
    padding-right: 30px;
}

span.btn-eliminar.direccion-derecha {
    position: relative;
    float: inline-end;
}

.col-lg-12.col-md-12.col-sm-12.col-12.txt-complemento span {
    color: #bf1212;
    font-weight: 600;
}

.row.container-element-contact {
    margin-bottom: 10px;
}

.col-lg-12.col-md-12.col-sm-12.col-12.txt-complemento span {
    color: #bf1212;
    font-weight: 600;
    font-size: 18px;
}

.col-lg-12.col-md-12.col-sm-12.col-12.txt-complemento {
    border-bottom: 2px dotted #acadbc;
    margin-bottom: 20px;
    padding-bottom: 5px;
}

span.btn-eliminar.direccion-derecha {
    color: white !important;
}

.btn-group .check-icon {
    display: none;
    margin-left: 5px;
}

.btn-group .btn-check:checked+label .check-icon {
    display: inline-block;
}

label.btn.btn-outline-primary {
    min-width: 75px;
}

.btn-outline-primary {
    color: #545454;
    border-color: #92929e;
}

.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
    color: #fff;
    background-color: #001458;
    border-color: #001458;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: rgb(152, 153, 154);
    border-color: rgb(152, 153, 154);
}

div#direccion-recoleccion {
    margin-top: 40px;
}

.text-tittle {
    font-size: 24px !important;
    color: #003399;
}

.form-control:focus {
    box-shadow: none !important;
}

span.validation-red {
    color: #bf1212;
}

.validation-input {
    color: #bf1212;
}

.docname:hover {
    background: white;
    cursor: pointer;
}

div#myInputautocomplete-list-cp {
    padding-bottom: 0px;
    background: #e5effc;
    padding-left: 0px;
    padding-top: 0px;
}

.autocompleteCP {
    overflow-y: scroll;
    max-height: 150px;
}

div#myInputautocomplete-list-cp_2 {
    padding-bottom: 0px;
    background: #e5effc;
    padding-left: 0px;
    padding-top: 0px;
}

.autocompleteCP_2 {
    overflow-y: scroll;
    max-height: 150px;
}

div#myInputautocomplete-list-cp_3 {
    padding-bottom: 0px;
    background: #e5effc;
    padding-left: 0px;
    padding-top: 0px;
}

.autocompleteCP_3 {
    overflow-y: scroll;
    max-height: 150px;
}

.bdisabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff !important;
    background-color: #bcbcbc !important;
    border-color: #b6b6b6 !important;
}

.txt-inica-new.exportacion-txt {
    font-size: 22px;
    margin-bottom: 30px;
}

.row.pading-40.container-from label {
    font-size: 16px;
    color: #003399;
}

.txt-inica-new.exportacion-txt {
    font-size: 22px;
    margin-bottom: 30px;
}

.btn-group>.btn-check:checked+.btn {
    color: white !important;
}

.imput-file {
    margin-left: 45px;
}

.check-cont {
    margin-bottom: 10px !important;
}

.list-edit-user {
    list-style-type: none;
}

.element-edit {
    display: flex;
    align-items: center;
    padding: 20px;
    /* border: 1px dotted #d9dbe4;*/
    margin-bottom: 10px;
}

.first-colum,
.tree-colum {
    width: 30px;
    text-align: center;
}

.second-colum {
    flex-grow: 1;
    padding: 0 10px;
}

.list-edit-user {
    list-style-type: none;
    margin: 10px 10px;
}

span.d-block.primary-element {
    color: #001458;
    font-size: 16px;
}

span.d-block.secundary-element {
    color: #aaa;
}

.first-colum,
.tree-colum {
    width: 30px;
    text-align: center;
    font-size: 20px;
    margin-right: 60px;
}

.list-edit-user {
    list-style-type: none;
}

.element-edit {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 30px;
    border: 2px dotted #d9dbe4;
    padding: 20px 40px;
}

.first-colum {
    display: flex;
    align-items: center;
}

.container-icono-circle {
    background-color: #eef2f9;
    border-radius: 50%;
    padding: 5px 9px;
    margin-right: 10px;
    border: 1px solid #d9dbe4;
}

.container-icono-circle-2 {
    background-color: #eef2f9;
    border-radius: 50%;
    padding: 13px 18px;
    margin-right: 10px;
    border: 1px solid #d9dbe4;
}

.container-icono-circle-3 {
    background-color: #eef2f9;
    border-radius: 50%;
    padding: 5px 9px;
    margin-right: 10px;
    border: 1px solid #d9dbe4;
}

.container-icono-circle-4 {
    background-color: #eef2f9;
    border-radius: 50%;
    padding: 5px 10px;
    margin-right: 10px;
    border: 1px solid #d9dbe4;
}

.container-icono-circle-4 i {
    color: rgb(110 160 247);
    /* Color del icono en el círculo */
}

.container-icono-circle i {
    color: rgb(81, 137, 234);
    /* Color del icono en el círculo */
}

.container-icono-circle-2 i {
    color: rgb(110 160 247);
    /* Color del icono en el círculo */
}

.second-colum {
    flex-grow: 1;
    padding: 0 10px;
}

.tree-colum {
    padding-left: 10px;
}

.element-edit-2 {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 30px;
    padding: 0px 0px;
}

.first-colum.pr-3.user-tree {
    margin-right: 70px;
}

span.d-block.primary-element-perfil {
    font-size: 21px;
    color: #bf1212;
}

span.d-block.secundary-element-perfil {
    color: #92929e;
}

.camera {
    align-items: center;
    border: 1px solid var(--all-andes-gray-070, rgba(0, 0, 0, 0.07));
    border-radius: 50%;
    display: flex;
    justify-content: center;
}

span.d-block.primary-element-perfil {
    font-size: 21px;
    color: #000000;
    font-weight: 600;
}

svg.camara-img {
    top: 0px;
    position: relative;
    cursor: pointer;
}

.container-formulario-edit {
    background: #ffffff;
    padding: 5px 30px;
    margin-top: -32px;
}

span.ver_archivo_csf {
    margin-top: -15px;
    text-decoration: underline;
}

.user-panels {
    padding: 16px 20px;
}

.container-pallet {
    padding: 40px;
    position: relative;
}

.row-pallet {
    position: relative;
}

.img-pallet {
    position: relative;
}

img.img-camas {
    width: 100%;
    transform: rotate(360deg);
}

select.form-select.custom-select.select-metraje {
    margin-top: 15px;
}

.config_pallet {
    color: #001458;
}

.col-lg-12.config_pallet.mb-3.mt-3.medidas-cajas {
    margin-top: 33px !important;
}

span.banged-list {
    padding: 5px 10px;
    border-radius: 50%;
    background: #f27474;
    color: white;
}

.col-lg-12.config_pallet.medidas-cajas {
    margin-bottom: 30px;
}

.col-lg-12.config_pallet.mb-3.mt-3.medidas-cajas {
    margin-bottom: 30px !important;
}

.col-lg-12.config_pallet.medidas-cajas.alert-dimencion {
    margin-top: 5px !important;
    color: #bf1212;
    font-weight: 600;
    font-style: italic;
}

.col-lg-12.config_pallet.medidas-cajas.final-imput {
    margin-top: 45px !important;
}

span.tox-statusbar__branding {
    display: none !important;
}

a.a-modificar {
    font-size: 15px;
    background: #e6e6e6;
    padding: 5px 10px;
    border-radius: 4px;
    color: #5294e2;
}

a.a-modificar:hover {
    background: #e5effc;
    color: #5294e2;
}

span.position-absolute.secund-icono {
    top: 15px;
    left: 30px;
}

.link-pointer {
    cursor: pointer;
}

span.validation-alert-danger-email {
    color: #bf1212;
}

.container-formulario-edit {
    margin: auto;
}

.container-validacion {
    max-width: 400px;
    margin: auto;
    padding: 0px 20px;
}

.verification-code-inputs {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    margin-bottom: 80px;
}

label.d-block.text-phone-verification {
    text-align: start;
    margin-bottom: 5px;
    color: #001458;
}

.text-phone-verification {
    font-weight: bold;
    margin-bottom: 10px;
}

.verification-digit {
    width: 30px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    margin-right: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

label.verification_code {
    color: #545454;
    font-size: 16px;
    font-weight: 400;
}

label.verification_code {
    margin: auto;
    padding: 30px;
    margin-top: 20px;
    justify-content: center;
    text-align: center;
}

.btn-c,
.btn-con>a>.btn-c {
    padding: 8px 40px;
    background: #001458;
    border-radius: 0.25rem;
    border: 1px solid #001458;
    font-weight: 400;
    font-size: 16px;
    color: white !important;
    width: auto;
    height: auto;
    text-align: center;
    line-height: normal;
    float: right;
    text-transform: none;
}

#send-code-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #ffffff;
    background: #aaa;
    border-color: #aaa;
}

.contador-js {
    color: #001458;
}

span.countdown {
    color: #bf1212;
}

.btn-info {
    color: #000;
    background-color: #ffffff;
    border-color: #cecece;
}

.alerta-danger {
    color: #bf1212;
    font-weight: 600;
}

.container-formulario-edit.session-panel {
    padding: 40px 30px;
}

.validation-message {
    color: #bf1212;
    font-size: 14px;
    margin-bottom: 10px;
}

.container-icono-circle-user img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
}

.container-icono-circle-user {
    background-color: #ffffff;
    border-radius: 50%;
    padding: 10px 10px;
    margin-right: 10px;
    border: 1px solid #d9dbe4;
    position: relative;
}

.defaul_img_perfil {
    padding: 15px;
}

div.a-modificar {
    font-size: 15px;
    background: #003399;
    padding: 5px 10px;
    border-radius: 4px;
    color: #fff;
    width: 150px;
    position: relative;
    right: 120px;
    cursor: pointer;
}

div.a-modificar:hover {
    background: #e5effc;
    color: #5294e2;
}

.checkIcon {
    display: none !important;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.checkIcon-view {
    display: block;
    opacity: 1;
}

#cameraIcon.transition .checkIcon {
    opacity: 1;
}

.camera {
    background-color: #fff;
    bottom: 0;
    cursor: pointer;
    max-height: 23px;
    max-width: 23px;
    min-height: 23px;
    min-width: 23px;
    padding: 4px;
    position: absolute;
    right: 0;
}

img.user-photo-home.perfil_imagen {
    border-radius: 50%;
    overflow: hidden;
    /* Asegura que la imagen se ajuste al borde circular */
    width: 100px;
    /* Ajusta el ancho según tus necesidades */
    height: 100px;
    /* Ajusta la altura según tus necesidades */
}

img.user-photo-home.perfil_imagen {
    border-radius: 15%;
    overflow: hidden;
    width: 28px;
    height: 28px;
    margin-right: 5px;
}

.comp-section {
    background-color: #f8f8f8;
}

.comp-row {
    display: flex;
    flex-wrap: wrap;
}

.shortcode-col {
    box-sizing: border-box;
    padding: 0 20px;
}

.comp-title {
    color: #333;
}

.comp-p {
    color: #666;
}

.comp-cta-btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #4caf50;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.comp-cta-btn:hover {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #84cf8692;
    color: #fff;
}

.comp-cta-btn:hover {
    background-color: #45a049;
}

section.comp-section.shortcode-section.text-left.fluid-height .container {
    padding-left: 40px;
    padding-right: 40px;
}

.comp-resp-img {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
}

.green-doodle {
    color: #4caf50;
}

.comp-row.shortcode-row.space-between.valign-center {
    padding-bottom: 50px;
}

i.fa-solid.fa-truck-ramp-box {
    font-size: 16px;
}

i.fa-solid.fa-file-invoice-dollar {
    font-size: 30px;
}

.btn-edit-contacto-add {
    display: inline-flex;
    width: max-content;
}

a#navbarDropdownMenuLinkHeader img {
    float: inline-start;
    margin-left: 8px;
}

a#navbarDropdownMenuLinkHeader span {
    float: inline-start;
    line-height: 26px;
}

.home-login-header::after {
    position: relative !important;
    top: 13px !important;
    float: inline-end;
    right: 10px !important;
}

.defaul_img_perfil_header {
    width: 18% !important;
    margin-right: 5px;
    padding: 0px !important;
}

.col-md-11.container-context-direccion span.edit-tag {
    float: inline-end;
}

.col-md-11.container-context-direccion h5 {
    color: #001458;
    font-size: 18px;
    padding-bottom: 10px;
    font-weight: 400;
    margin-top: 10px;
}

.descripcion-context.certificacion-details a {
    margin-left: 6px;
}

i.fa-regular.fa-file-lines {
    color: #0039ff;
}

.address-card {
    border: 1px dotted #cdcdcd;
    margin: 20px 60px;
    padding: 20px 30px;
    background: white;
}

.status-revision {
    display: inline-block;
    padding: 5px 10px;
    background-color: #ffc107;
    /* Color de fondo amarillo */
    color: #fff;
    /* Color del texto blanco */
    border-radius: 5px;
    /* Borde redondeado */
}

/* Estilos para la badge de estado "Aprobado" */
.status-aprove {
    display: inline-block;
    padding: 5px 10px;
    background-color: #28a745;
    /* Color de fondo verde */
    color: #fff;
    /* Color del texto blanco */
    border-radius: 5px;
    /* Borde redondeado */
}

span.badge.bg-blue-100.text-blue-800.me-2.rounded-pill {
    background: #f48734;
}

span.badge.bg-green-100.text-green-800.me-2.rounded-pill {
    background: #007500;
}

span.badge.bg-red-100.text-red-800.me-2.rounded-pill {
    background: #930303;
}

/* Estilos para la badge de estado "Denegado" */
.status-rechazado {
    display: inline-block;
    padding: 5px 10px;
    background-color: #dc3545;
    /* Color de fondo rojo */
    color: #fff;
    /* Color del texto blanco */
    border-radius: 5px;
    /* Borde redondeado */
}

.address-card .edit-tag {
    margin-top: 5px;
}

.descripcion-context {
    font-weight: 100;
    color: #585858;
}

.direcciones-gestionar {
    font-size: 15px;
    background: #e6e6e6;
    padding: 5px 10px;
    border-radius: 4px;
    color: #5294e2;
}

.direcciones-gestionar:hover {
    background: #e5effc;
    color: #5294e2;
}

.ul-direcciones-gestionar {
    margin-top: 15px;
    min-width: 8rem !important;
    padding: 0.5rem 10px !important;
    font-size: 1rem;
    top: 5px !important;
}

a.link-direcciones-gestionar {
    color: #626262;
    font-size: 14px;
}

ul.dropdown-menu.ul-direcciones-gestionar li {
    margin-bottom: 8px;
    padding-left: 5px;
    margin-top: 4px;
}

.triangulo-cat-direccion {
    position: absolute;
    left: 20px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #8e8e8e85 !important;
}

.container-formulario-agregar {
    background: #f8fafd;
    margin-bottom: 30px;
    padding: 20px 40px;
    text-align: end;
    padding-bottom: 40px;
}

.container-formulario-agregar a {
    background: #001458;
    padding: 8px 15px;
    color: white;
    border-radius: 4px;
}

i.fa-regular.fa-file-pdf {
    color: #404040;
}

:root {
    --card-line-height: 1.2em;
    --card-padding: 1em;
    --card-radius: 0.5em;
    --color-green: #558309;
    --color-gray: #e2ebf6;
    --color-dark-gray: #c4d1e1;
    --radio-border-width: 2px;
    --radio-size: 1.5em;
}

.grid {
    display: grid;
    grid-gap: var(--card-padding);
    margin: 0 auto;
    max-width: 60em;
    padding: 0;

    @media (min-width: 42em) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    background-color: #fff;
    border-radius: 4px;
    position: relative;
}

.radio {
    font-size: inherit;
    margin: 0;
    position: absolute;
    right: calc(var(--card-padding) + var(--radio-border-width));
    top: calc(var(--card-padding) + var(--radio-border-width));
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .radio {
        -webkit-appearance: none;
        -moz-appearance: none;
        background: #fff;
        border: var(--radio-border-width) solid var(--color-gray);
        border-radius: 50%;
        cursor: pointer;
        height: var(--radio-size);
        outline: none;
        transition: background 0.2s ease-out, border-color 0.2s ease-out;
        width: var(--radio-size);
        top: 5px;
        right: 5px;

        &::after {
            border: var(--radio-border-width) solid #fff;
            border-top: 0;
            border-left: 0;
            content: "";
            display: block;
            height: 0.75rem;
            left: 25%;
            position: absolute;
            top: 50%;
            transform: rotate(45deg) translate(-50%, -50%);
            width: 0.375rem;
        }

        &:checked {
            top: 5px;
            right: 5px;
            background: var(--color-green);
            border-color: var(--color-green);
        }
    }

    .card:hover .radio {
        border-color: var(--color-dark-gray);

        &:checked {
            border-color: var(--color-green);
        }
    }
}

.cat-details {
    border: var(--radio-border-width) solid var(--color-gray);
    border-radius: var(--card-radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 145px;
    padding: var(--card-padding);
    transition: border-color 0.2s ease-out;
}

.card:hover .cat-details {
    border-color: var(--color-dark-gray);
}

.radio:checked~.cat-details {
    border-color: var(--color-green);
}

.radio:focus~.cat-details {
    box-shadow: 0 0 0 2px var(--color-dark-gray);
}

.radio:disabled~.cat-details {
    color: var(--color-dark-gray);
    cursor: default;
}

.radio:disabled~.cat-details .cat-type {
    color: var(--color-dark-gray);
}

.card:hover .radio:disabled~.cat-details {
    border-color: var(--color-gray);
    box-shadow: none;
}

.card:hover .radio:disabled {
    border-color: var(--color-gray);
}

.cat-type {
    color: var(--color-green);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1em;
}

.cat-cost {
    font-size: 2.5rem;
    font-weight: bold;
    padding: 0.5rem 0;
}

.slash {
    font-weight: normal;
}

.cat-cycle {
    font-size: 2rem;
    font-variant: none;
    border-bottom: none;
    cursor: inherit;
    text-decoration: none;
}

.hidden-visually {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.tittle-page {
    font-size: 24px;
    color: #001458;
}

.sub-tittle-page {
    font-size: 16px;
    color: #001458;
}

.step-clasificacion {
    margin-top: 40px;
    margin-bottom: 80px;
}

.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}

.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;

    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;
}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    margin-bottom: 6px;
}

.stepper-item.active .step-counter {
    background-color: hsl(223,
            68%,
            59%);
    /* Cambia este color para el paso activo */
    color: white;
}

.stepper-item.completed .step-counter {
    background-color: hsl(223, 100%, 71%);
}

.stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid hsl(223, 100%, 71%);
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
}

.stepper-item:first-child::before {
    content: none;
}

.stepper-item:last-child::after {
    content: none;
}

.btn-next.mt-3 {
    text-align: end;
    padding-bottom: 40px;
}

.tab-menu ul {
    margin: 0;
    padding: 0;
}

.tab-menu ul li {
    list-style-type: none;
    display: inline-block;
}

.tab-menu ul li a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.4);
    background-color: #d4e2f9;
    padding: 7px 25px;
    border-radius: 0px;
}

.tab-menu ul li a.active-a {
    background-color: #4f78de;
    color: #ffffff;
}

.tab {
    display: none;
}

.tab h2 {
    color: rgba(0, 0, 0, 0.7);
}

.tab p {
    color: rgba(0, 0, 0, 0.6);
    text-align: justify;
}

.tab-active {
    display: block;
    margin-top: 35px;
}

span.add-presentation {
    float: inline-end;
    color: #0559d4;
    text-decoration: underline;
    cursor: pointer;
    top: -21px;
    position: relative;
    right: 10px;
}

.tab-menu {
    background: #dfdfdf;
    padding: 6px 0px;
}

.delete-tab {
    cursor: pointer;
    color: #ffffff;
    position: relative;
    top: -8px;
    right: 14px;
}

.subtittle-seccion {
    margin-bottom: 30px;
    color: #001458;
    font-weight: 900;
    font-size: 16px;
    margin-top: 40px;
}

.col-md-4.d-flex.align-items-center {
    position: relative;
    top: 15px;
    right: 15px;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin: 10px;
    background-color: #fff;
}

.product-card img {
    display: block;
    width: 75%;
    height: auto;
    margin: 0 auto;
}

.product-card .badge {
    background-color: #ffc107;
    color: #000000;
    position: absolute;
    gap: 10px;
    padding-top: 8px;
    padding-right: 24px;
    padding-bottom: 8px;
    padding-left: 24px;
    top: 0px;
    left: 0px;
    border-radius: 5px 0px 5px 0px !important;
}

.product-card .btn-group-toggle .btn.active {
    border-radius: 4px !important;
    padding: 8px !important;
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: white !important;
    background: #013296 !important;
    width: 0%;
    max-width: 78px;
}

.btn-home-bange.active {
    width: 85%;
    border-radius: 4px !important;
    padding: 8px !important;
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: white !important;
    background: #013296 !important;
}

.btn-home-bange {
    width: 85%;
    border-radius: 4px !important;
    padding: 8px !important;
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #000000 !important;
    background: #ffffff !important;
    border: 1px solid #ccc !important;
}

.btn-group.btn-group-toggle.d-flex.mt-3 {
    gap: 20px;
}

.product-card .btn-group-toggle .btn {
    width: 0%;
    border-radius: 4px !important;
    padding: 8px !important;
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #000000 !important;
    background: #ffffff !important;
    border: 1px solid #ccc !important;
    max-width: 78px;
}

.product-card .presentation {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

.product-card .presentation button {
    border: 1px solid #ddd;
    margin-right: 5px;
    padding: 5px 10px;
    border-radius: 5px;
}

.product-card .presentation button.active {
    background-color: #6c757d;
    color: #fff;
}

.product-card .product-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #bf1212;
    margin-bottom: 0px;
}

.product-card .product-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
}

.product-card .product-description {
    font-size: 0.875rem;
    color: #777;
    margin-top: 10px;
}

.product-card .rating {
    color: #ffc107;
}

.product-card .rating .reviews {
    font-size: 0.875rem;
    color: #777;
}

.btn-secondary.active,
.btn-secondary:active,
.show>.btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #5294e2a3;
    border-color: transparent !important;
}

.btn-group.btn-group-toggle.d-flex.justify-content-center.mt-3 {
    gap: 20px;
}

p.product-hierarchy-search {
    display: block;
    margin-left: 12px;
}

.category-card {
    display: -webkit-box;
    border: 0.5px dotted #d9dbe4 !important;
    padding: 10px !important;
    background: #fff !important;
}

.category-image {
    width: 120px;
    height: auto;
    margin-right: 15px;
    object-fit: cover;
}

p.category-hierarchy {
    display: inline-grid;
    position: absolute;
}

span.parent-name {
    color: #bf1212;
    font-weight: 500;
    font-size: 13px;
}

span.grandparent-name {
    color: #001458;
    font-weight: 500;
    font-size: 13px;
}

span.category-name {
    font-size: 17px;
    font-weight: 100;
    margin-top: 5px;
    text-transform: uppercase;
}

span.product-name-search {
    font-size: 17px;
    font-weight: 100;
    margin-top: 5px;
    text-transform: uppercase;
}

.product-content-search img {
    width: 70px;
}

.product-content-search {
    display: inline-flex;
}

.product-card-search {
    display: -webkit-box;
    border: 0.5px dotted #d9dbe4 !important;
    padding: 10px !important;
    background: #fff !important;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group .form-control {
    border-radius: 0;
}

.input-group .input-group-text {
    position: absolute;
    right: 0;
    border: 1px solid #ced4da;
    border-radius: 0;
    padding: 0.5rem 1rem;
    background-color: #fff;
    cursor: pointer;
}

.input-group .input-group-text i {
    font-size: 1.2rem;
}

.input-group .form-control,
.input-group .input-group-text {
    height: 100%;
}

.input-group .input-group-text input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.loading {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #555;
}

.error {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: red;
}

/* Placeholder para imágenes de productos */

/* Placeholder cuando la imagen real aún no esté disponible */
.product-image[data-loading="true"],
.category-image[data-loading="true"] {
    background-image: url("ruta-al-placeholder.png");
    /* Ruta a tu imagen de placeholder */
}

/* Quitar el placeholder una vez que la imagen esté cargada */
.product-image:not([data-loading="true"]),
.category-image:not([data-loading="true"]) {
    background-image: none;
}

.alert-success {
    color: #ffffff !important;
    background-color: #198754 !important;
    border-color: #198754 !important;
}

.certificate-content-search img {
    width: 120px;
}

.certificate-content-search {
    display: inline-flex;
}

span.description-certificate {
    margin-top: 5px;
    font-size: 11px;
}

.fa-heart {
    color: black;
}

.fa-heart.favorite {
    color: red;
    /* Color del corazón cuando está marcado como favorito */
}

/* Estilo para el botón de favoritos */
.btn-favorites {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.btn-favorites i {
    font-size: 1.2rem;
    color: #000;
    /* Cambia el color según sea necesario */
}

.btn-favorites .badge {
    margin-left: 0.5rem;
}

ul#favorite-items {
    left: -92px;
    width: 380px;
}

.product-description.mt-3.mb-3 p {
    min-height: 40px;
}

a.dropdown-item i {
    color: #a4a4a4;
}

.categori-filter-area {
    background: white;
    padding-top: 10px;
}

.breadcrumb-filter-home {
    background: #ffffff;
    margin-bottom: 10px;
    padding-top: 25px;
    border-radius: 8px;
    padding-left: 30px;
    width: 99%;
}

li.me-3.product-icon-list-grid {
    margin-left: 15px;
    margin-top: 20px;
}

/* Vista de cuadrícula */
.product-grid-view {
    display: flex;
    flex-wrap: wrap;
}

.product-grid-view .product-item {
    flex: 1 1 calc(33.333% - 20px);
    /* Tres columnas con espacio entre ellas */
    box-sizing: border-box;
    margin: 10px;
    /* Espacio entre tarjetas */
}

.product-grid-view .product-card {
    display: flex;
    flex-direction: column;
}

.product-grid-view .product-image {
    width: 100%;
    /* Imagen ocupa todo el ancho de la tarjeta */
    height: auto;
    max-height: 200px;
    /* Altura máxima para mantener las imágenes uniformes */
    object-fit: cover;
    /* Mantiene la imagen proporcional y cubre el contenedor */
}

/* Vista de lista */
.product-list-view {
    display: flex;
    flex-direction: column;
}

.product-list-view .product-item {
    width: 100%;
    margin-bottom: 10px;
    /* Espacio entre tarjetas */
}

.product-list-view .product-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 15px;
    /* Más espacio alrededor del contenido */
    transition: background-color 0.3s ease;
}

.product-list-view .product-card:hover {
    background-color: #f8f8f8;
    /* Fondo más claro al pasar el cursor */
}

.product-list-view .product-image {
    width: 150px;
    /* Ancho fijo para la vista de lista */
    height: 150px;
    /* Altura fija para la vista de lista */
    object-fit: cover;
    /* Mantiene la imagen proporcional */
    margin-right: 20px;
    /* Espacio entre imagen y contenido */
    border-radius: 4px;
    /* Esquinas redondeadas */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Sombra sutil para la imagen */
}

.product-list-view .product-info {
    flex: 1;
    /* El contenido ocupa el resto del espacio disponible */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-list-view .product-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.product-list-view .product-description {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 10px;
}

.product-list-view .product-price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #28a745;
}

.product-list-view .product-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.product-list-view .product-actions .btn {
    min-width: 100px;
}

/* Filtros y botones */
.product-filter-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.product-filter-select {
    padding: 5px 10px;
    font-size: 0.9rem;
    width: 215px;
}

.product-icon-list-grid .product-grid-btn,
.product-icon-list-grid .product-list-btn {
    font-size: 1.2rem;
    padding: 5px 10px;
}

/* Imagen del producto en la lista */
.product-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.container.mt-4 {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1444px !important;
}

.container-home {
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.cont-categorias-filter {
    background: white;
    padding: 20px;
    padding-top: 35px;
    min-height: 18%;
}

button.btn.btn-outline-secondary.favorite-btn i {
    font-size: 20px;
}

button.btn.btn-outline-secondary.favorite-btn {
    border: none;
    width: 45px;
}

button.btn.btn-outline-secondary.favorite-btn:hover {
    border: none;
    background: none;
}

button.btn.btn-outline-secondary.favorite-btn:hover .fa-heart {
    color: #ff7575 !important;
}

/* CSS de filtro de certificaciones */
/* Contenedor de la cuadrícula de certificaciones */
.certificate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 30px;
    padding: 20px;
    background: white;
}

/* Contenedor de cada imagen */
.certificate-photo-container {
    display: flex;
    /* Alinea el contenido del contenedor */
    justify-content: center;
    /* Centra la imagen horizontalmente */
    align-items: center;
    /* Centra la imagen verticalmente */
    overflow: hidden;
    /* Oculta cualquier parte de la imagen que sobresalga del contenedor */
    width: 40px;
    /* Ancho del contenedor */
    height: 40px;
    /* Altura del contenedor */
    border-radius: 4px;
    /* Bordes redondeados opcional */
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    /* Suaviza el cambio de tamaño del contenedor */
}

/* Ajusta el tamaño de la imagen */
.certificate-photo {
    width: 100%;
    /* La imagen ocupa todo el ancho del contenedor */
    height: 100%;
    /* La imagen ocupa toda la altura del contenedor */
    object-fit: cover;
    /* Mantiene la imagen dentro del contenedor sin distorsión */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    /* Suaviza el efecto de transición */
    filter: grayscale(100%);
    /* Aplica escala de grises */
}

/* Efecto hover para agrandar la imagen */
.certificate-item:hover .certificate-photo-container {
    width: 60px;
    /* Nuevo ancho del contenedor cuando se hace hover */
    height: 60px;
    /* Nueva altura del contenedor cuando se hace hover */
}

.certificate-item:hover .certificate-photo {
    transform: scale(1.5);
    /* Escala la imagen al 150% de su tamaño original */
    filter: grayscale(0%);
    /* Restaura el color original */
}

.certificate-item.active .certificate-photo {
    transform: scale(1);
    filter: grayscale(0%);
}

.list-group-item {
    padding: 5px !important;
}

li.list-group-item.active.item-active-category {
    background: #d5e6ff;
}

a.category-toggle.d-flex.justify-content-between.align-items-center {
    margin-bottom: 8px;
}

.header-categorias.mb-3 h3 {
    margin-left: 20px;
    text-transform: uppercase;
}

.container-clean {
    background: white;
    padding: 40px;
    padding-bottom: 135px;
}

small.optional-tag {
    position: absolute;
    top: 42px;
    background: #bf12129c;
    padding: 0px 3px;
    border-radius: 5px;
    color: white;
}

.stepper-item.completed .step-counter {
    background-color: #198754;
}

.step-counter.grey {
    background: #bbbbbb !important;
}

.btn-next.mt-3 a {
    margin-right: 20px;
}

a.btn.btn-secundary {
    background: #e3e3e3;
}

a.link-variant {
    color: #003e99 !important;
    padding: 5px 5px;
}

.text-primary {
    color: #001458 !important;
}

a.toggle-active-variant {
    margin-right: 5px;
}

.remaining-time {
    background: #198754;
    padding: 5px 20px;
    color: white;
    border-radius: 5px;
}

.show-timeline {
    cursor: pointer;
}

.cart-item-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.cart-item {
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
}

.cart-item-image img {
    width: 80px;
    height: auto;
}

.cart-item-details {
    padding-left: 10px;
}

.cart-item-quantity {
    font-size: 0.9rem;
    color: #666;
}

.removecart {
    background: none;
    border: none;
    color: #d9534f;
    cursor: pointer;
    font-size: 1rem;
}

p.cart-item-price.mb-1 {
    margin-bottom: -10px !important;
}

h6.mb-1.font-weight-bold {
    color: #5d7cba !important;
}

button.btn.btn-link.trash-cart {
    color: #686868 !important;
}

.btn-primary {
    color: #fff;
    background-color: #033598 !important;
    border-color: #033598 !important;
}

span.subtotal-amount.d-block.my-2 {
    color: #bf1212;
    font-size: 20px;
    font-weight: 700;
}

p.cart-item-price.mb-1 {
    font-size: 16px;
    color: #bf1212;
}

i.fa.fa-minus-circle {
    color: #919191;
    cursor: pointer;
}

i.fa.fa-plus-circle {
    color: #919191;
    cursor: pointer;
}

span.mx-2 {
    font-size: 16px;
    background: #eee;
    padding: 1px 10px;
    border-radius: 5px;
    font-weight: 400;
    color: #545454;
}

.toast-bottom-right {
    top: 0px !important;
    /* Ajusta la distancia desde la parte inferior */
    right: 20px;
    /* Puedes ajustar el valor para separarlo más de la derecha si lo necesitas */
}

.row.componet-product-information {
    background: #ffffff;
    padding: 30px 5px;
}

a.badge.bg-primary-product-detail.active {
    background: #ffc107;
    padding: 6px 20px;
    border-radius: 4px;
    color: #545454;
    font-weight: 100;
}

a.badge.bg-primary-product-detail:hover {
    background: #001458;
    padding: 6px 20px;
    border-radius: 4px;
    color: white;
    text-decoration: none;
}

a.badge.bg-primary-product-detail.active:hover {
    background: #f7c42b;
    padding: 6px 20px;
    border-radius: 4px;
    color: #545454;
    font-weight: 100;
}

a.badge.bg-primary-product-detail {
    background: #d9dbe4;
    padding: 6px 20px;
    border-radius: 4px;
    color: #545454;
    font-weight: 100;
}

span.text-description {
    color: #9b9b9b;
}

.des-pallet {
    background: #ececec;
    padding: 10px 10px;
    border-radius: 4px;
    font-weight: 100;
    color: #545454;
}

h5 {
    color: #545454;
}

p.product-descriptors {
    color: #545454;
}

.row.componet-product-information {
    background: #ffffff;
    padding: 10px 20px 80px 20px;
}

h4.text-danger.price-details {
    margin-bottom: 15px;
    color: #bf1212 !important;
    font-weight: 600;
}

.text-warning-priice-ddp {
    color: #333 !important;
    font-weight: bold;
}

.text-muted {
    color: #999999 !important;
    font-weight: 500 !important;
}

.alert-warning-des {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
    padding: 5px;
}

button.btn.btn-outline-secondary.favorite-btn.details-product i {
    width: 20px;
    font-size: 26px;
}

button.btn.btn-outline-secondary.favorite-btn.details-product {
    width: 42px;
    margin-left: -15px;
}

.favorite-btn {
    outline: none;
    box-shadow: none;
    border: none;
    /* Elimina el borde del botón */
}

.favorite-btn:focus,
.favorite-btn:active {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Esto es opcional para evitar que el borde vuelva a aparecer en navegadores específicos después del clic */
.favorite-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

p.text-muted.mt-3 {
    color: #e16565 !important;
}

.fa-heart {
    color: #ccc;
}

.toast-top-right {
    top: 10px !important;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
    margin-top: 10px;
    list-style: none;
    margin-left: 10px;
}

li.breadcrumb-item {
    color: #001458 !important;
}

li.breadcrumb-item a {
    color: #545454;
}

.vertical-line-container {
    padding: 0px;
    margin-right: 0px;
    margin-left: -30px;
}

i.fa.fa-heart.header-heart {
    color: #000;
}

.certificate-grid-product-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* Ajusta el espacio entre imágenes si es necesario */
}

.certificate-grid-product-details img {
    width: 65px !important;
    height: auto;
}

.alert-warning-des {
    background-color: #ececec;
    color: #333;
    border: 1px solid #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 100;
    margin-bottom: 30px;
}

.certificate-grid-product-details {
    margin-top: 24px;
    margin-bottom: 40px;
}

.producer-info {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Ajusta el espacio entre los dos lados según prefieras */
}

.producer-details {
    display: flex;
    flex-direction: column;
}

.producer-logo {
    width: 70px;
    /* Ajusta el tamaño de la imagen */
    height: auto;
}

.col-8.producer-details p {
    font-weight: 800;
    color: #545454;
}

.product-description.short-description {
    max-height: 3.6em;
    /* Ajuste para 3 líneas */
    overflow: hidden;
    display: inline-block;
    white-space: normal;
}

.toggle-description-link {
    color: #001458;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
    margin-top: 5px;
    display: inline-block;
}

.view-producer-info-link {
    color: #001458;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
    display: inline-block;
    margin-top: 5px;
}

.container.py-5 {
    background: rgba(255, 255, 255, 0.185);
}

h4.text-warning-priice-ddp {
    margin-top: 15px;
    background: #ececec;
    padding: 20px 20px;
    margin-bottom: 20px;
}

p.name-total-price {
    font-weight: 400;
    font-size: 14px;
    color: #131111;
}

.text-muted-orange {
    font-weight: 500 !important;
    color: #bf1212 !important;
}

small.icon-dolar-price {
    position: relative;
    font-size: 14px;
    top: -10px;
}

small.icon-dolar-price-usd {
    position: relative;
    font-size: 14px;
}

.zoomable {
    transition: transform 0.3s ease, transform-origin 0.3s ease;
    cursor: zoom-in;
}

.zoomable:hover {
    transform: scale(2);
    /* Nivel de ampliación */
}

.custom-control-prev,
.custom-control-next {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo oscuro semi-transparente */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    position: absolute;
    top: 50%;
    /* Centra el botón verticalmente */
    transform: translateY(-50%);
    /* Ajusta para centrar perfectamente */
    z-index: 10;
    /* Asegura que estén encima de la imagen */
}

.custom-control-prev:hover,
.custom-control-next:hover {
    background-color: rgba(0,
            0,
            0,
            0.8);
    /* Fondo más oscuro al pasar el mouse */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%);
    /* Hace el ícono blanco visible */
    width: 20px;
    height: 20px;
}

.carousel-control-prev {
    left: -12px;
}

.carousel-control-next {
    right: -12px;
}

/* Estilo general para la tabla */
table {
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-collapse: collapse;
    margin-top: 10px;
}

th,
td {
    text-align: left;
    padding: 8px;
}

th {
    background-color: #f4f4f4;
    font-weight: bold;
    border-bottom: 2px solid #4caf50;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:nth-child(odd) {
    background-color: #ffffff;
}

tbody tr td {
    border-bottom: 1px solid #ddd;
}

tbody tr td:first-child {
    font-weight: bold;
    color: #001458;
}

tbody tr.group-row {
    background-color: #e9fbe5;
    font-weight: bold;
    color: #4caf50;
}

.variant-section {
    page-break-after: always;
}

.dimension-label {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.alert .btn-close {
    filter: invert(1);
}

/* Estilos generales para las etiquetas */
.largo-pallet,
.alto-pallet,
.ancho-pallet {
    position: absolute;
    display: table;
    font-size: 18px;
    font-weight: 800;
    color: #0d6efd75;
    text-align: center;
    background-color: transparent;
    padding: 0 5px;
    white-space: nowrap;
}

/* LINEA LARGO (Parte superior) */
.largo-pallet {
    top: 0%;
    left: 15%;
    transform: skew(355deg, 351deg);
    width: 100px;
    height: 24px;
}

/* Líneas antes y después del texto en largo */
.largo-pallet::before,
.largo-pallet::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 2px;
    background-color: #4d4d4d;
}

.largo-pallet::before {
    left: -30px;
}

.largo-pallet::after {
    right: -30px;
}

/* LINEA ALTO (Izquierda) */
.alto-pallet {
    top: 42%;
    left: -12%;
    transform: rotate(267deg);
    width: 115px;
    height: 24px;
}

/* Líneas antes y después del texto en alto */
.alto-pallet::before,
.alto-pallet::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 2px;
    background-color: #4d4d4d;
}

.alto-pallet::before {
    left: -30px;
}

.alto-pallet::after {
    right: -30px;
}

/* LINEA ANCHO (Abajo) */
.ancho-pallet {
    top: 90%;
    left: 15%;
    transform: skew(322deg, 25deg);
    width: 78px;
    height: 24px;
    font-size: 16px;
}

/* Líneas antes y después del texto en ancho */
.ancho-pallet::before,
.ancho-pallet::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 2px;
    background-color: #4d4d4d;
}

.ancho-pallet::before {
    left: -30px;
}

.ancho-pallet::after {
    right: -30px;
}

.row.g-4.align-items-center {
    margin-top: 10px;
}

/* Modal general */
#detailSheetContent {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.5;
    font-size: 14px;
}

.detail-modal-header {
    background: #d9dbe4;
    color: #333;
}

.detail-sheet-header.text-center p {
    color: #545454 !important;
    font-weight: 500;
}

.detail-modal-header .modal-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.detail-modal-body {
    padding: 2rem;
}

/* Encabezado principal */
.detail-sheet-header h2 {
    color: #003399;
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.detail-sheet-header .product-name {
    font-size: 1.1rem;
    margin: 0;
    color: #555;
}

/* Bloques de detalle */
.detail-block {
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.detail-block-title {
    color: #545454;
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 700;
}

/* Sección de variantes */
.variant-section {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 1.5rem;
    margin-bottom: 30px;
    border-radius: 5px;
}

/* Título de cada variante */
.variant-title {
    color: #333;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.variant-measure {
    color: #212529;
}

.variant-price {
    color: #333;
    font-size: 1rem;
}

/* Tabla de detalles */
.detail-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.detail-table thead th {
    background: #5294e2;
    color: #fff;
    text-align: left;
    padding: 10px;
    font-weight: 600;
}

.detail-table td,
.detail-table th {
    border: 1px solid #ddd;
    padding: 8px 10px;
}

.detail-table tr:nth-child(even) td {
    background: #f2f2f2;
}

/* Documentos */
.documents-title {
    margin-top: 20px;
    font-size: 1rem;
    color: #333;
    font-weight: 600;
}

.documents-list {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

.documents-list li {
    margin-bottom: 5px;
}

.documents-list a {
    color: #003399;
    text-decoration: none;
    font-weight: 600;
}

.documents-list a:hover {
    text-decoration: underline;
}

/* Footer del modal */
.detail-modal-footer {
    background: #f8f8f8;
    border-top: 1px solid #ddd;
    padding: 1rem;
}

.detail-modal-footer .btn-secondary {
    background: #999;
    border-color: #999;
}

.detail-modal-footer .btn-primary {
    background: #003399;
    border-color: #003399;
}

.detail-modal-footer .btn-primary:hover {
    background: #003399;
    border-color: #003399;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
}

/* carts section */

.cart-page-wrapper {
    /* Estilos específicos para esta página, en lugar de body */
    background: #f9f9f9;
}

/* Sin estilos globales a h1, aplicamos a .cart-title si se necesita, por ahora asumimos que h1 no se modifica directamente */

/* Contenedor principal blanco */
.card-background {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

/* Breadcrumb */
.breadcrumb-custom {
    font-size: 0.875rem;
    margin-bottom: 20px;
    color: #666;
}

.breadcrumb-custom a {
    color: #666;
    text-decoration: none;
}

.breadcrumb-custom a:hover {
    text-decoration: underline;
}

.breadcrumb-custom .separator {
    margin: 0 5px;
    color: #999;
}

/* Tarjeta del item en el carrito */
.cart-item-card {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background: #fff;
    position: relative;
}

.cart-item-card .delete-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    color: #d16f6f;
    font-size: 1.1rem;
}

/* Purchase order */
.purchase-order-title {
    font-size: 1rem;
    font-weight: bold;
    color: #f45b0c;
    margin-bottom: 15px;
}

.purchase-order-title .order-number {
    color: #0056b3;
    font-weight: 700;
    margin-left: 5px;
}

/* Grid: Imagen sola, Product name, Pallet info, Qty, Pallet Total */
.cart-item-grid {
    display: grid;
    /* Ajustamos la cantidad de columnas: imagen, product name, pallet info, qty, pallet total */
    grid-template-columns: min-content 270px 1fr min-content min-content;
    grid-gap: 40px;
    align-items: start;
    width: 100%;
    white-space: nowrap;
    padding-bottom: 10px;
}

.info-cell {
    font-size: 0.875rem;
    color: #333;
    white-space: normal;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.image-only-cell {
    min-width: 80px;
    white-space: normal;
}

.image-only-cell .products-image img {
    width: 100%;
    height: auto;
    margin-top: 5px;
}

/* Celda del nombre con ancho 270px */
.cart-name-cell {
    width: 270px;
}

.cart-item-name {
    display: block;
    /* margin-top: 5px; */
    color: #333;
    font-size: 0.875rem;
    white-space: normal;
}

/* Quantity */
.quantity-cell {
    min-width: 90px;
    text-align: center;
    white-space: nowrap;
}

.quantity-controls {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 5px;
    margin-top: 5px;
}

.quantity-controls button {
    border: none;
    background: none;
    padding: 0 5px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #333;
}

.quantity-controls button:focus {
    outline: none;
}

.quantity-controls i {
    font-size: 0.9rem;
}

.quantity-controls span {
    margin: 0 5px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

/* Pallet Total */
.pallet-total-cell {
    min-width: 100px;
    text-align: right;
    white-space: nowrap;
}

.text-primary {
    color: #0056b3 !important;
}

.font-weight-bold {
    font-weight: 600 !important;
}

/* Divider */
.divider {
    border: none;
    border-top: 1px solid #eaeaea;
    margin: 15px 0;
}

/* Delivery Address */
.delivery-address a {
    color: #0069d9;
    text-decoration: none;
    font-size: 0.85rem;
}

.delivery-address a:hover {
    text-decoration: underline;
}

/* Payment info */
.payment-info h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}

.payment-method-card {
    background: #f9f9f9;
    border-radius: 4px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
}

.payment-method-card img {
    width: 40px;
    height: auto;
    border-radius: 4px;
}

.payment-method-card p {
    margin: 0;
    font-weight: bold;
    color: #333;
}

.change-link {
    color: #0069d9;
    text-decoration: none;
    font-size: 0.85rem;
    margin-left: auto;
}

.change-link:hover {
    text-decoration: underline;
}

.terms-text {
    font-size: 0.75rem;
    color: #777;
    margin-top: 20px;
}

.terms-text a {
    color: #0069d9;
    text-decoration: none;
}

.terms-text a:hover {
    text-decoration: underline;
}

.summary-box {
    background: #d9dbe4;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px;
}

.summary-box h4 {
    font-weight: 700;
    font-size: 1.4rem;
    color: #476589;
    margin-bottom: 20px;
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.summary-list li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #333;
}

.summary-list li:last-child {
    margin-bottom: 0;
}

.summary-list li .label {
    color: #666;
}

.summary-list li.total {
    border-top: 1px solid #eaeaea;
    padding-top: 10px;
    font-weight: 700;
    color: #0056b3;
    font-size: 1rem;
}

/* Botón Finalizar */
.finish-order-btn {
    background: #002d9c;
    border-color: #002d9c;
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
}

.finish-order-btn:hover {
    background: #00238b;
}

.card-background {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

/* Breadcrumb */
.breadcrumb-custom {
    font-size: 0.875rem;
    margin-bottom: 20px;
    color: #666;
}

.breadcrumb-custom a {
    color: #666;
    text-decoration: none;
}

.breadcrumb-custom a:hover {
    text-decoration: underline;
}

.breadcrumb-custom .separator {
    margin: 0 5px;
    color: #999;
}

.text-right.mt-4 {
    text-align: end;
    margin-top: 15px;
}

h1.cart-title.mb-4 {
    margin-bottom: 30px !important;
    margin-top: 50px;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
}

span.price-text-value.text-muted.font-weight-bold {
    font-size: 20px;
}

span.price-text-value.text-primary.font-weight-bold.ml-1 {
    font-size: 20px;
}

.btn-light {
    background-color: #ccc !important;
    border-color: #ccc !important;
}

label.form-check-label.font-weight-bold {
    color: #545454;
}

span.price-text-value.text-primary.font-weight-bold.ml-1 {
    color: #001458 !important;
}

.form-check-input:checked {
    background-color: #52759f;
    border-color: #52759f;
}

a.show-delivery-link.text-primary.font-weight-bold {
    color: #0693c8 !important;
}

h5.font-weight-bold.mb-1 {
    color: #5294e2;
}

a.btn.btn-sm.btn-info.btn-view {
    background: #d9dbe4 !important;
    color: #545454 !important;
}

a.btn.btn-sm.btn-info.btn-view {
    background: #eee !important;
    color: #545454 !important;
    border-radius: 4px;
}

a.btn.btn-sm.btn-info.btn-view:hover {
    color: #ffffff !important;
    background-color: #001458 !important;
    border-color: #001458 !important;
    text-decoration: none;
}

a.nav-link {
    text-decoration: none;
}

a.btn.btn-primary {
    text-decoration: none;
}

a.btn.btn-outline-primary {
    text-decoration: none;
}

.product-name {
    color: #001458 !important;
    font-weight: 100;
    text-decoration: underline !important;
    text-shadow: none;
}

h3 {
    color: #545454;
}

.component-presentation {
    margin-top: 20px;
}

.component-presentation label {
    color: #666 !important;
    font-weight: 100 !important;
}

.vertical-line-container .mb-4 {
    margin-top: 30px;
}

span.d-block.primary-element-perfil {
    font-size: 21px;
    color: #545454;
    font-weight: 600;
    text-decoration: none !important;
}

.categoria:before {
    content: "-";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
    margin-left: 10px;
}

.categoria {
    font-weight: 500;
    font-size: 16px;
    color: #0056b3 !important;
    cursor: pointer;
}

span#notifications-count {
    top: -1px;
    right: -1px;
}

/* Botón de favoritos */
.btn-favorite {
    position: relative;
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    color: #ff4757;
    transition: color 0.3s ease;
}

.btn-favorite:hover {
    color: #ff6b81;
}

.dropdown-item {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

span#favorite-count {
    right: -10px;
}

.dropdown-item img {
    border-radius: 5px;
}

.dropdown-item h6 {
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.dropdown-item small {
    color: #6c757d;
}

/* Botón para eliminar favoritos */
.remove-favorite-btn {
    background-color: transparent;
    border: none;
    color: #dc3545;
    transition: color 0.3s ease;
}

.remove-favorite-btn:hover {
    color: #a71d2a;
}

a.nav-link.position-relative.text-white span {
    padding: 5px 8px;
}

.body-container-user-panel {
    min-height: 75vh !important;
}

/* =========== footer wrapper full-width con SVG =========== */
.custom-footer-ecommerce {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* El SVG va “detrás” */
.footer-bg-svg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 242px;
    z-index: 0;
    background: #000a29;
}

/* =========== contenido centrado sobre el SVG =========== */
.custom-footer-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 100px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: #fff;
}

/* =========== filas de contenido =========== */
.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

/* =========== divider =========== */
.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    margin: 0;
}

/* =========== iconos sociales =========== */
.footer-social .bi {
    width: 28.56px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.footer-social .list-inline-item+.list-inline-item {
    margin-left: 32px;
}

/* =========== badges tiendas =========== */
.footer-store {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-store-badge {
    height: 57px;
    display: inline-block;
}

/* =========== logo México =========== */
.footer-mexico {
    max-width: 77px;
    display: block;
}

li.list-inline-item.footer-link>a:hover {
    color: #ffc107 !important;
}

/* =========== sección legal =========== */
.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.footer-legal-links {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.separator {
    color: rgba(255, 255, 255, 0.5);
}

.footer-copy {
    margin-top: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* =========== enlaces generales =========== */
.custom-footer-ecommerce a {
    color: #fff;
    text-decoration: none;
}

/* =========== responsive <768px =========== */
/* -------------------------------
   Breakpoint TABLET: 768px–1023px
   ------------------------------- */
/* ==============================
   ESTILOS BASE (Desktop ≥1200px)
   ============================== */
.custom-footer-ecommerce {
    width: 100%;
    background: #000a29;
    padding: 32px 0;
}

.custom-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.footer-social {
    display: flex;
    gap: 0px;
}

.footer-store {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-legal-links {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.footer-legal-links .separator {
    color: rgba(255, 255, 255, 0.5);
}

.footer-copy {
    margin-top: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Hover amarillo */
li.footer-link>a:hover {
    color: yellow !important;
}

/* ===================================
     Desktop mediano (≥992px y <1200px)
     =================================== */
@media (max-width: 1199px) {
    .custom-footer-inner {
        padding: 0 80px;
    }
}

/* ================================
     Laptop/tablet grande (≥768px)
     y <992px
     ================================ */
@media (max-width: 991px) {
    .custom-footer-inner {
        padding: 0 60px;
    }

    /* reparto más equitativo */
    .footer-row {
        flex-wrap: wrap;
    }

    .footer-social {
        flex: 1 1 50%;
        justify-content: flex-start;
    }

    .footer-store {
        flex: 1 1 50%;
        justify-content: flex-end;
    }
}

/* =================================
     Tablet/tablet pequeño (<768px)
     ================================= */
@media (max-width: 767px) {
    .custom-footer-inner {
        padding: 0 40px;
    }

    .footer-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
        gap: 24px;
        margin-bottom: 16px;
    }

    .footer-store {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }

    .footer-store span {
        display: block;
    }

    .footer-divider {
        margin: 16px 0;
    }

    .footer-mexico {
        margin: 0 auto 16px;
    }

    .footer-legal-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .footer-legal-links .separator {
        display: none;
    }

    .footer-copy {
        margin-top: 8px;
    }
}

/* ===================================
     Móviles muy estrechos (<576px)
     =================================== */
@media (max-width: 575px) {
    .custom-footer-inner {
        padding: 0 16px;
        background: #000a29;
    }

    footer.custom-footer-ecommerce {
        background: #000a29;
    }

    .footer-copy {
        margin-top: 8px;
        margin-right: 50px;
    }

    /* reducimos iconos un poco */
    .footer-social .bi {
        width: 24px;
        height: 18px;
        font-size: 18px;
        line-height: 18px;
    }

    .footer-store-badge {
        height: 36px;
    }

    /* links legales en 3 líneas si hiciera falta */
    .footer-legal-links {
        gap: 4px;
    }

    .footer-copy {
        font-size: 0.75rem;
    }
}

/* cart-item.css */
.cart-item-card {
    background-color: #ffffff;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    color: #000000;
    box-sizing: border-box;
}

.cart-item-card .trash-cart {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    color: #bf1212;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.2sease;
}

span.pallet-total {
    color: #003399;
    font-weight: 600;
}

.cart-item-card .trash-cart:hover {
    color: #e60000;
}

.cart-item-card .cart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.cart-item-card .col-image {
    flex: 0 0 auto;
    width: 16.6667%;
    padding-right: 0;
}

.cart-item-card .col-image img {
    max-width: 100%;
    display: block;
    border-radius: 0.125rem;
}

.cart-item-card .col-data {
    flex: 1 1 auto;
    width: 83.3333%;
    padding-left: 1rem;
    box-sizing: border-box;
}

.cart-item-card .cart-table-header {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #666666;
    margin-bottom: 0.25rem;
}

.cart-item-card .cart-table-header .col-header {
    flex: 1 1 0;
    text-transform: uppercase;
}

.cart-item-card .cart-table-header .col-header.text-right {
    text-align: right;
}

.cart-item-card .cart-table-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
}

.cart-item-card .cart-table-row .col-row {
    flex: 1 1 0;
    font-size: 1rem;
    line-height: 1.2;
}

.cart-item-card .cart-table-row a {
    color: #0066cc;
    text-decoration: none;
}

.cart-item-card .cart-table-row a:hover {
    text-decoration: underline;
}

.cart-item-card .cart-table-row .tariff-code {
    color: #000000;
}

.cart-item-card .cart-table-row .qty-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.cart-item-card .cart-table-row .qty-controls .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1;
    border: 1px solid #0066cc;
    background-color: #ffffff;
    color: #0066cc;
}

.cart-item-card .cart-table-row .qty-controls .btn i {
    pointer-events: none;
}

.cart-item-card .cart-table-row .quantity {
    margin: 0 0.5rem;
    color: #000000;
    font-weight: 500;
}

.cart-item-card .cart-table-row .col-total {
    text-align: right;
}

.cart-item-card .cart-table-row .col-total .total-price {
    color: #0066cc;
    font-weight: 700;
}

.cart-item-card hr.divider {
    border: none;
    border-top: 1px solid #c5c5c5;
    margin: 1rem 0;
}

.cart-item-card .delivery-address-toggle {
    font-size: 1rem;
    font-weight: 600;
    color: #0066cc;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.cart-item-card .delivery-address-toggle:hover {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .cart-item-card .col-image {
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .cart-item-card .col-data {
        width: 100%;
        padding-left: 0;
    }

    .cart-item-card .cart-table-header {
        flex-direction: column;
    }

    .cart-item-card .cart-table-header .col-header {
        width: 100%;
        text-align: left;
        margin-bottom: 0.25rem;
    }

    .cart-item-card .cart-table-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-item-card .cart-table-row .col-row {
        width: 100%;
        text-align: left;
        margin-bottom: 0.5rem;
    }

    .cart-item-card .cart-table-row .col-total {
        width: 100%;
        text-align: left;
    }

    .cart-item-card .trash-cart {
        top: 0.5rem;
        right: 0.5rem;
        font-size: 1rem;
    }

    .cart-item-card {
        padding: 0.75rem;
    }
}

.qty-controls {
    display: inline-flex;
    align-items: center;
}

.qty-controls .qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid #0066cc;
    background-color: #ffffff;
    color: #0066cc;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-radius: 50%;
    margin: 0 0.5rem;
    user-select: none;
}

.qty-controls .qty-btn:hover {
    background-color: #0066cc;
    color: #ffffff;
}

.qty-controls .qty-btn:active {
    background-color: #004999;
    border-color: #004999;
    color: #ffffff;
}

.qty-controls .quantity-value {
    font-size: 1rem;
    font-weight: 600;
    color: #333333;
    min-width: 24px;
    text-align: center;
}

@media (max-width: 480px) {
    .qty-controls .qty-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        margin: 0 0.25rem;
    }

    .qty-controls .quantity-value {
        font-size: 0.9rem;
        min-width: 20px;
    }
}

.qty-wrapper {
    display: inline-flex;
    align-items: center;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #555;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.qty-btn:hover {
    background-color: #f5f5f5;
    color: #000;
}

.qty-btn:active {
    background-color: #eaeaea;
}

.qty-value {
    margin: 0 8px;
    font-size: 1rem;
    color: #333;
    min-width: 20px;
    text-align: center;
}

.summary-box {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.summary-box h4 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.summary-list li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    color: #4b5563;
}

.summary-list li .label {
    font-weight: 500;
}

.summary-list li .value {
    font-weight: 500;
    color: #1f2937;
}

.summary-list li.total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    font-size: 1rem;
}

.summary-list li.total .label {
    font-size: 1rem;
    font-weight: 600;
}

.summary-list li.total .value {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.action-area {
    margin-top: 1.5rem;
    text-align: right;
}

.prompt-text {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #4b5563;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.button-group .btn-outline-primary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 0.375rem;
    background-color: #ffffff;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.button-group .btn-outline-primary:hover {
    background-color: #2563eb;
    color: #ffffff;
}

.button-group .btn-outline-success {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #059669;
    border: 1px solid #059669;
    border-radius: 0.375rem;
    background-color: #ffffff;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.button-group .btn-outline-success:hover {
    background-color: #059669;
    color: #ffffff;
}

.button-group .btn-quote {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background-color: #f3f4f6;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.button-group .btn-quote:hover {
    background-color: #e5e7eb;
}

:root {
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --blue-600: #2563eb;
    --orange-500: #ec6221;
    --orange-600: #d45c1f;
    --red-500: #dc2626;
}

.full-width-btn {
    display: block;
    width: 100%;
    text-align: center;
}

.btn-primary.full-width-btn {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.375rem;
    background-color: #1e40af;
    color: #ffffff;
    border: none;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

/* Hover para darle feedback al pasar el mouse */
.btn-primary.full-width-btn:hover {
    background-color: #1e3a8a;
    /* Azul más oscuro en hover */
}

.full-width-btn {
    /* Podemos restar márgenes si .action-area tiene padding interno */
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 576px) {
    .btn-primary.full-width-btn {
        padding: 0.65rem 0.8rem;
        /* Un pelín más pequeño en móviles */
        font-size: 0.95rem;
    }
}

.breadcrumb-custom .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.breadcrumb-custom .breadcrumb-item+.breadcrumb-item::before {
    content: ">";
    color: var(--gray-400);
    margin: 0 0.5rem;
}

.breadcrumb-custom .breadcrumb a {
    color: var(--blue-600);
}

.breadcrumb-custom .breadcrumb-item.active {
    color: var(--gray-600);
}

.cart-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gray-800);
}

.card-background {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.empty-cart-wrapper {
    min-height: 400px;
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.empty-cart-content {
    max-width: 600px;
    background-color: var(--gray-100);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
}

.empty-cart-img {
    max-width: 150px;
    margin-bottom: 1rem;
}

.empty-cart-title {
    font-size: 1.5rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.empty-cart-subtitle {
    color: var(--gray-600);
    margin-bottom: 1rem;
}

.cart-item-card {
    background-color: #ffffff;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    color: var(--gray-800);
}

.cart-item-card .trash-cart {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--red-500);
    font-size: 1.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cart-item-card .trash-cart:hover {
    color: #a50b0b;
}

/* 7.1) Grid interno del item */
.cart-item-card .cart-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* 7.2) Imagen del producto */
.cart-item-card .col-image {
    flex: 0 0 16.6667%;
    padding-right: 1rem;
}

.cart-item-card .col-image img {
    max-width: 100%;
    border-radius: 0.25rem;
    object-fit: cover;
}

/* 7.3) Datos del producto */
.cart-item-card .col-data {
    flex: 1 1 auto;
}

/* 7.3.1) Encabezados pequeños */
.cart-item-card .cart-table-header {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-bottom: 0.25rem;
}

.cart-item-card .cart-table-header .col-header {
    flex: 1 1 0;
    text-transform: uppercase;
    font-weight: 500;
}

.cart-item-card .cart-table-header .col-header.text-right {
    text-align: right;
}

/* 7.3.2) Valores */
.cart-item-card .cart-table-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
}

.cart-item-card .cart-table-row .col-row {
    flex: 1 1 0;
    font-size: 1rem;
    line-height: 1.2;
}

.cart-item-card .cart-table-row a {
    color: var(--blue-600);
    font-weight: 500;
    transition: color 0.15s ease;
}

.cart-item-card .cart-table-row a:hover {
    color: #1e40af;
}

.cart-item-card .cart-table-row .tariff-code {
    color: var(--gray-800);
}

/* 7.3.3) Controles de cantidad */
.qty-controls {
    display: inline-flex;
    align-items: center;
}

.qty-controls .qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--gray-300);
    background-color: #ffffff;
    color: var(--gray-800);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.qty-controls .qty-btn:hover {
    background-color: var(--gray-100);
    color: var(--gray-800);
}

.qty-controls .qty-btn:active {
    background-color: var(--gray-200);
}

.qty-controls .qty-number {
    margin: 0 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    min-width: 20px;
    text-align: center;
}

/* 7.3.4) Total del pallet */
.cart-item-card .col-total {
    text-align: right;
}

.cart-item-card .col-total .total-price {
    color: var(--blue-600);
    font-weight: 600;
}

/* 7.4) Línea divisoria */
.cart-item-card hr.divider {
    border: none;
    border-top: 1px solid var(--gray-300);
    margin: 1rem 0;
}

/* 7.5) Toggle “Delivery Address” */
.delivery-address-toggle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--blue-600);
    cursor: pointer;
    transition: color 0.15s ease;
}

.delivery-address-toggle:hover {
    color: #1e40af;
}

.summary-box {
    background-color: #ffffff;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.summary-box h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 1rem;
}

.summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.summary-list li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    color: var(--gray-600);
}

.summary-list li .label {
    font-weight: 500;
}

.summary-list li .value {
    font-weight: 500;
    color: var(--gray-800);
}

.summary-list li.total {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-300);
    font-size: 1rem;
}

.summary-list li.total .label {
    font-size: 1rem;
    font-weight: 600;
}

.summary-list li.total .value {
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    text-align: right;
}

.action-area {
    margin-top: 1.5rem;
    text-align: right;
}

.prompt-text {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.button-group .btn-outline-primary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--blue-600);
    border: 1px solid var(--blue-600);
    border-radius: 0.375rem;
    background-color: #ffffff;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.button-group .btn-outline-primary:hover {
    background-color: var(--blue-600);
    color: #ffffff;
}

.button-group .btn-outline-success {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #059669;
    border: 1px solid #059669;
    border-radius: 0.375rem;
    background-color: #ffffff;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.button-group .btn-outline-success:hover {
    background-color: #059669;
    color: #ffffff;
}

.button-group .btn-quote {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-800);
    background-color: var(--gray-100);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.button-group .btn-quote:hover {
    background-color: var(--gray-200);
}

.alert-warning {
    padding: 1rem;
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 0.375rem;
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.4;
}

/*.btn-primary {
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  background-color: #1e40af;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}*/

.btn-primary:hover {
    background-color: #1e3a8a;
}

.btn-quote,
.btn-cotizacion {
    background-color: var(--orange-500);
    border: 1px solid var(--orange-500);
    color: #ffffff;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-cotizacion:hover,
.btn-quote:hover {
    background-color: var(--orange-600);
    border-color: var(--orange-600);
    color: #ffffff;
}

@media (max-width: 991.98px) {

    .col-lg-9,
    .col-lg-3 {
        width: 100%;
    }

    .summary-box {
        margin-top: 2rem;
    }
}

@media (max-width: 575.98px) {
    .cart-item-card .cart-row {
        flex-direction: column;
    }

    .cart-item-card .col-image,
    .cart-item-card .col-data {
        width: 100%;
        padding: 0;
    }

    .cart-item-card .cart-table-header {
        flex-direction: column;
    }

    .cart-item-card .cart-table-header .col-header {
        width: 100%;
        text-align: left;
        margin-bottom: 0.25rem;
    }

    .cart-item-card .cart-table-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-item-card .cart-table-row .col-row {
        width: 100%;
        margin-bottom: 0.5rem;
        text-align: left;
    }

    .cart-item-card .col-total {
        width: 100%;
        text-align: left;
    }

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

    .action-area {
        text-align: center;
    }
}

/*------------------------------------------------------------
  Ajustes refinados para que coincida con el diseño de Figma
------------------------------------------------------------*/

/* Contenedor principal, fondo blanco, bordes suaves */
.product-detail-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    /* 10px */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 1.25rem;
    /* 20px */
    max-width: 380px;
    /* Ajustar según diseño */
    margin: 0 auto;
    font-family: "Inter", sans-serif;
    color: #1f2937;
    /* Gris oscuro para texto */
}

/* Título del producto */
.pd-title {
    font-size: 1.375rem;
    /* 22px */
    font-weight: 600;
    margin-bottom: 1rem;
    /* 16px */
    color: #111827;
    /* Negro suave */
}

/* Sección de Product type */
.pd-section {
    width: 100%;
}

.pd-type {
    margin-bottom: 1rem;
    /* 16px */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px separación label/badges */
}

.pd-label {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    color: #4b5563;
    /* Gris medio */
    min-width: 100px;
    /* Para alinear a la izquierda */
}

.pd-badges {
    display: flex;
    gap: 0.5rem;
}

.pd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    /* 6px 12px */
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 500;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #6b7280;
    /* Gris atenuado */
    transition: background-color 0.15s, color 0.15s;
    text-transform: capitalize;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}

.pd-badge:hover:not(.disabled) {
    background-color: #e5e7eb;
    color: #374151;
}

.pd-badge.active {
    background-color: #001458;
    color: #ffffff;
    border-color: #001458;
}

.pd-badge.disabled {
    background-color: #f9fafb;
    color: #d1d5db;
    cursor: default;
    pointer-events: none;
    border-color: #f3f4f6;
}

/* Selector de presentación */
.pd-presentation {
    margin-bottom: 1rem;
    /* 16px */
}

.pd-presentation .pd-label {
    margin-bottom: 0.25rem;
}

.pd-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    /* 8px 12px */
    font-size: 0.9375rem;
    /* 15px */
    color: #1f2937;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    /* 6px */
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pd-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    outline: none;
}

/* Descripción de pallet (gris tenue, fondo ligeramente gris) */
.des-pallet {
    background-color: #f9fafb;
    padding: 0.75rem;
    /* 12px */
    border-radius: 0.375rem;
    /* 6px */
    font-size: 0.875rem;
    /* 14px */
    color: #4b5563;
    margin-bottom: 1rem;
    /* 16px */
}

/* Dirección de entrega */
.pd-address {
    margin-bottom: 1rem;
    /* 16px */
}

.pd-address .pd-label {
    margin-bottom: 0.25rem;
}

.pd-address .pd-select {
    margin-bottom: 0;
    /* elimina margen extra */
}

/* Precio total (bloque destacado) */
.pd-price-section {
    background-color: #f9fafb;
    border-radius: 0.375rem;
    /* 6px */
    padding: 1rem;
    /* 16px */
    margin-bottom: 1rem;
    /* 16px */
}

.pd-subtitle {
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 0.5rem;
    /* 8px */
}

.pd-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    /* 4px */
    margin-bottom: 0.25rem;
    /* 4px */
}

.pd-dollar-sign {
    font-size: 1.125rem;
    color: #585858;
    top: -5px;
    position: relative;
}

.pd-price-val {
    font-size: 1.75rem;
    /* 28px */
    font-weight: 700;
    color: #111827;
}

.pd-currency {
    font-size: 0.875rem;
    /* 14px */
    color: #4b5563;
}

.text-muted-orange {
    font-size: 0.8125rem;
    color: #ec6221 !important;
}

/* Contenedor de la parte DDP/EXW */
.pd-price-section p {
    margin: 0;
    line-height: 1.2;
}

/* Controles de cantidad */
.pd-quantity {
    margin-bottom: 0.75rem;
    /* 12px */
}

.pd-quantity .pd-label {
    margin-bottom: 0.25rem;
}

.pd-qty-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px separación */
}

.pd-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #6b7280;
    font-size: 1.125rem;
    border-radius: 50%;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
}

.pd-qty-btn:hover {
    background-color: #f3f4f6;
    color: #374151;
    border-color: #9ca3af;
}

.pd-qty-btn:active {
    background-color: #e5e7eb;
    border-color: #6b7280;
}

.pd-qty-number {
    font-size: 1rem;
    /* 16px */
    font-weight: 500;
    color: #1f2937;
    min-width: 24px;
    /* deja espacio para 2 dígitos */
    text-align: center;
}

.pd-text-muted {
    font-size: 0.875rem;
    color: #ec6221;
    margin-bottom: 1rem;
}

/* Acciones finales (botones) */
.pd-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* 8px */
}

.pd-actions .favorite-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #d1d5db;
    font-size: 1.125rem;
    /* 18px */
    border-radius: 0.375rem;
    /* 6px */
    transition: color 0.15s, background-color 0.15s;
}

.pd-actions .favorite-btn:hover {
    color: #ec2626;
}

.pd-actions .favorite-btn .favorite {
    color: #ec2626;
}

.pd-actions .btn-warning {
    background-color: #ec6221;
    border: 1px solid #ec6221;
    color: #ffffff;
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    padding: 0.5rem 1rem;
    /* 8px 16px */
    border-radius: 0.375rem;
    /* 6px */
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-pd-cart {
    width: 185px;
    border-radius: 5px;
    border: 1px solid #757575;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: transparent;
}

.pd-actions .btn-warning:hover {
    background-color: #d45c1f;
    border-color: #d45c1f;
}

.pd-actions .btn-primary {
    background-color: #2563eb;
    border: 1px solid #2563eb;
    color: #ffffff;
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    padding: 0.5rem 1rem;
    /* 8px 16px */
    border-radius: 0.375rem;
    /* 6px */
    transition: background-color 0.15s, border-color 0.15s;
}

.pd-actions .btn-primary:hover {
    background-color: #1e40af;
    border-color: #1e40af;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 576px) {
    .product-detail-card {
        padding: 1rem;
        /* 16px */
        max-width: 100%;
    }

    .pd-title {
        font-size: 1.25rem;
        /* 20px */
        text-align: center;
    }

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

    .pd-qty-controls {
        justify-content: center;
    }

    .pd-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
        /* 12px */
    }

    .pd-text-muted {
        text-align: center;
    }
}

/* =============================
   CONTENEDOR PRINCIPAL (Tarjeta Blanca)
   ============================= */
.product-sidebar-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    /* 8px */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    /* 24px */
    max-width: 320px;
    /* Ajusta según tu layout */
    margin-left: 2rem;
    /* Separación de la sección central */
    font-family: "Inter", sans-serif;
    color: #1f2937;
    /* Gris oscuro para texto */
}

/* =============================
   “Minimum order quantity” Banner
   ============================= */
.alert-warning-des {
    background-color: #f3f4f6;
    /* Gris muy claro */
    color: #374151;
    /* Gris medio */
    border: none;
    border-radius: 0.375rem;
    /* 6px */
    padding: 0.5rem 1rem;
    /* 8px 16px */
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    margin-bottom: 1.5rem;
    /* 24px */
}

/* =============================
   Descriptors (Texto y Listado)
   ============================= */
.product-descriptors {
    font-size: 0.9375rem;
    /* 15px */
    color: #4b5563;
    /* Gris intermedio */
    line-height: 1.5;
    margin-bottom: 1.5rem;
    /* 24px */
}

/* =============================
   Producer Info (Tarjeta Interna)
   ============================= */
.producer-info {
    background-color: #f9fafb;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1.5rem !important;
}

.producer-details {
    flex: 1;
}

.producer-details h5 {
    font-size: 1rem;
    /* 16px */
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
    /* 8px */
}

.producer-details p {
    font-size: 0.9375rem;
    /* 15px */
    color: #4b5563;
    margin-bottom: 0.5rem;
    /* 8px */
}

.view-producer-info-link {
    font-size: 0.875rem;
    /* 14px */
    color: #2563eb;
    /* Azul vivo */
    text-decoration: none;
    font-weight: 500;
}

.view-producer-info-link:hover {
    text-decoration: underline;
}

.producer-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-left: 1rem;
}

/* =============================
   Certifications Grid
   ============================= */
.certificate-grid-product-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    /* 12px */
    margin-top: 0.5rem;
    /* 8px */
    margin-bottom: 1.5rem;
    /* 24px */
}

.certificate-grid-product-details img {
    width: 80px !important;
    height: 80px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background-color: #f9fafb;
}

/* =============================
   Títulos de Sección (h5)
   ============================= */
.product-sidebar-card h5 {
    font-size: 1rem;
    /* 16px */
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.75rem;
    /* 12px */
}

/* =============================
   Responsive (para pantallas pequeñas)
   ============================= */
@media (max-width: 768px) {
    .product-sidebar-card {
        max-width: 100%;
        margin-left: 0;
        padding: 1rem;
        /* Reducir padding en móvil */
    }

    .producer-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .producer-logo {
        margin-left: 0;
        margin-top: 1rem;
        /* 16px */
    }

    .certificate-grid-product-details {
        justify-content: center;
    }
}

.tag {
    display: inline-block;
    background-color: #f3f4f6;
    color: #4b5563;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.tag:hover {
    background-color: #e5e7eb;
    color: #374151;
}

.btn-pd-cart svg {
    /* Aseguramos que el SVG use el color actual del texto */
    fill: currentColor;
}

.btn-pd-cart:hover {
    background-color: #f3f4f6;
    border-color: #6b7280;
    color: #6b7280;
}

.btn-home-badge[disabled],
.btn-home-badge.disabled {
    opacity: 0.5;
    /* apariencia “atenuada” */
    cursor: not-allowed;
    /* cursor prohibido */
    pointer-events: none;
    /* previene cualquier evento de puntero */
}

.buy-now-btn {
    margin-left: -5.5rem;
    padding: 0px !important;
}

.btn-outline-secondary:hover {
    color: #bd2b2b !important;
}

.product-img {
    transition: opacity 0.5s ease-in-out;
}

.product-img.d-none {
    opacity: 0;
    display: none;
}

.product-img.active {
    opacity: 1;
    display: block;
}

.presentation {
    transition: opacity 0.5s ease-in-out;
}

.presentation.d-none {
    opacity: 0;
    display: none;
}

.presentation.active {
    opacity: 1;
}

.seccion-categorias-certificados {
    /* Puedes ajustar un ancho máx. si deseas */
    /* max-width: 1200px; margin: 0 auto; */
}

.slider-owl-cat .item,
.slider-owl-cert .item {
    padding: 10px;
}

.slider-owl-cat .item img,
.slider-owl-cert .item img {
    display: block;
    margin: 0 auto;
    /* Ajusta más estilos si gustas */
}

.seccion-categorias-certificados {
    border-radius: 10px !important;
}

h2.mb-2.fw-bold {
    color: #000a29;
    margin-top: 30px;
}

.container.header-banner-home {
    padding: 5px;
}

/* Ajusta la altura máxima, centrado y espaciado de los logos en la sección de certificados */
.slider-owl-cert .item {
    padding: 10px;
    text-align: center;
}

.slider-owl-cert .item img {
    max-height: 150px !important;
    display: block;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 1px 3px #cccccc91;
    width: 150px;
    border-radius: 8px;
    border: 1px solid #d9dbe4;
    filter: grayscale(50%);
}

.slider-owl-cert .item p {
    font-size: 0.9rem;
    margin-top: 5px;
    color: #333;
}

.section-title-block {
    margin: 1.5rem 0;
}

.product-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    padding: 1.2rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: #333;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.product-img {
    width: 100%;
    max-height: 220px;
    display: block;
    margin: 0 auto 0.8rem;
    object-fit: contain;
    border-radius: 6px;
}

.product-title {
    margin: 1rem 0 0.5rem;
    text-align: left;
}

.product-name {
    color: #333;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
}

.product-name:hover {
    text-decoration: underline;
}

.product-details {
    margin-top: 0.5rem;
}

.product-description {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

.product-price .price-content {
    color: #333;
    font-weight: 700;
    font-size: 1.2rem;
}

.text-muted {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.4rem;
}

.text-muted strong {
    color: #ff5c00;
}

.d-flex.justify-content-between.mt-3 {
    margin-top: 1.2rem !important;
}

.favorite-btn i.favorite {
    color: #ff5c00;
}

.add-to-cart,
.buy-now-btn {
    border: none;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-to-cart {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
}

.add-to-cart:hover {
    background-color: #001458;
    color: #fff;
    border-color: #001458;
}

.buy-now-btn:hover {
    background-color: #ff3a00;
}

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

/* Asegura que tus clases custom también lo hereden */
.btn-home-badge:focus,
.btn-home-badge:active,
.product-grid-btn:focus,
.product-grid-btn:active,
.category-toggle:focus,
.category-toggle:active,
.subcategory-toggle:focus,
.subcategory-toggle:active {
    outline: none !important;
    box-shadow: none !important;
}

.cont-categorias-filter {
    min-height: 800px !important;
}

/* 1) Quita overflow y scroll */
.cont-categorias {
    overflow: visible;
}

/* 2) Separadores horizontales entre todos los enlaces */
.cont-categorias .category-link {
    display: block;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: #374151;
    transition: background-color 0.2s, color 0.2s;
    margin-bottom: 5px;
}

/* 3) No poner separador en el último ítem de cada nivel */
.cont-categorias ul>li:last-child>.category-link,
.cont-categorias ul>li>ul>li:last-child>.category-link {
    border-bottom: none;
}

/* 4) Indentación por nivel */
.cont-categorias ul>li>ul>li>.category-link {
    padding-left: 1.5rem;
}

.cont-categorias ul>li>ul>li>ul>li>.category-link {
    padding-left: 2.5rem;
}

/* 5) Hover sobre enlace */
.cont-categorias .category-link:hover {
    background-color: #f9fafb;
    color: #111827;
}

/* 6) Estilo del ícono chevron */
.cont-categorias .category-link i.fa-chevron-down {
    transition: transform 0.2s, color 0.2s;
    color: #6b7280;
}

/* 7) Chevron gira y colorea al expandir */
.cont-categorias .category-link[aria-expanded="true"] i.fa-chevron-down {
    transform: rotate(180deg);
    color: #ccc;
}

/* 8) Estado activo */
.cont-categorias .active-sub {
    color: #ff6701 !important;
    font-weight: 400;
    background: #f3f4f6;
}

/* 9) Ajuste del título */
.cont-categorias h2 {
    color: #000a29;
    font-weight: 400 !important;
    font-size: 16px;
    line-height: 100%;
    margin-bottom: 20px !important;
    margin-top: 12px;
}

.container-clean {
    padding: 15rem 7rem !important;
    display: flex;
    flex-direction: column;
}

.category-link i.fa-chevron-down {
    transition: transform 0.2s;
}

.category-link[aria-expanded="true"] i.fa-chevron-down {
    transform: rotate(180deg);
}

div#categoriesAccordion {
    height: 1192px !important;
}

.container-clean {
    padding: 10rem 7rem !important;
    display: flex;
    flex-direction: column;
    padding-bottom: 39rem !important;
}

.results-header {
    background: #fff;
    margin-bottom: 15px;
}

.results-header .d-flex.flex-nowrap {
    flex-wrap: nowrap;
    gap: 10px;
}

.form-select-sm {
    min-width: 160px;
    /* ancho mínimo para el select */
}

span.result-search {
    font-weight: 600;
    color: #000a29;
}

span.result-search.capitalizze {
    text-transform: capitalize;
}

/* ====== CONTENEDOR PRINCIPAL ====== */
.yp-notifications.dropdown-notifications {
    width: 400px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
    overflow: hidden;
}

/* Flechita */
.yp-notifications .yp-triangle {
    position: absolute;
    top: -10px;
    right: 28px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 10px solid #fff;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, .06));
}

/* Encabezado */
.yp-notifications .yp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fafbfc;
    border-bottom: 1px solid #edf0f3;
}

.yp-notifications .yp-header .yp-title {
    font-size: 12px;
    color: #6b7a88;
    letter-spacing: .2px;
}

.yp-notifications .yp-header .yp-mark-all {
    font-size: 12px;
    color: #0b5ed7;
    text-decoration: none;
}

/* Ítems */
.yp-notifications .yp-item {
    padding: 25px 15px;
    border-bottom: 1px solid #f1f3f5;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
}

.yp-notifications .yp-item:last-child {
    border-bottom: 0;
}

.yp-notifications .yp-title-text {
    font-size: 14px;
    font-weight: 600;
    color: #0b1b2a;
}

.yp-notifications .yp-msg {
    font-size: 13px;
    color: #5b6b7b;
    grid-column: 1 / 2;
}

.yp-notifications .yp-time {
    font-size: 12px !important;
    color: #98a4b0 !important;
    align-self: start;
}

.yp-notifications .yp-cta {
    grid-column: 1 / 2;
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
}

.yp-notifications .yp-item:hover {
    background: #f8fafc;
}

@media (max-width: 576px) {
    .yp-notifications.dropdown-notifications {
        width: 320px;
        border-radius: 8px;
    }

    .yp-notifications .yp-triangle {
        right: 18px;
    }
}