/* ============================================== */
/* COLOR */
/* ============================================== */

.c-ter.bg_logo {
  background-image: url('./../../images/logo/bg_icon.png');
  background-repeat: repeat;      /* patrón */
  background-size: 74px 57px;     /* escala del icono */
}

/* ============================================== */
/* BORDER BOTTOM */
/* ============================================== */

.b-bottom{
  border-bottom: 1px solid var(--color-blu);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.b-top{
  border-top: 1px solid var(--color-blu);
  padding-top: 10px;
  margin-top: 10px;
}

/* ============================================== */
/* HIDDEN */
/* ============================================== */

.hidden {
    display: none !important; 
}

/* ============================================== */
/* PRELOADER */
/* ============================================== */

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.preloader::before {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("./../../images/logo/preloader_logo.svg") no-repeat center center;
  background-size: contain;
  z-index: 9;
}

/* ============================================== */
/* BTN */
/* ============================================== */

.btn      {  background: var(--color-80); font-weight:600;  }
.btn:hover{  background: var(--color-60);   }

.btn.c-pri,.icon.c-pri{  background: var(--color-pri); color: var(--color-0); }
.btn.c-sec,.icon.c-sec{  background: var(--color-sec); color: var(--color-0); }
.btn.c-ter,.icon.c-ter{  background: var(--color-ter); color: var(--color-0); }

.btn.c-pri:hover, .icon.c-pri:hover{  background: var(--color-pri-h); color: var(--color-0); }
.btn.c-sec:hover, .icon.c-sec:hover{  background: var(--color-sec-h); color: var(--color-0); }
.btn.c-ter:hover, .icon.c-ter:hover{  background: var(--color-ter-h); color: var(--color-0); }

.btn.link        {  color: var(--color-60);  }
.btn.link::before{  background: var(--color-60);  }

.btn-margin{
  margin:0 0 10px 0;
}

/* ============================================== */
/* CUSTOM ICON */
/* ============================================== */

#barChart{
  max-width: 100%;
  width: 100%;
  max-height: 400px;
}

/* ============================================== */
/* TOOLTIP */
/* ============================================== */

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #007bff; /* color del signo de interrogación */
  margin-left: 5px;
  font-weight: bold;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  padding: 8px;
  position: absolute;
  z-index: 10;
  bottom: 125%; /* Ajusta posición */
  left: 50%;
  margin-left: -110px; /* La mitad del ancho */
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.85rem;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/* ============================================== */
/* STICKY */
/* ============================================== */

.sticky {
  position: sticky;
  top: 65px;
  z-index: 2;
}

@media only screen and (max-width: 1080px){
  .sticky {
    position: relative;
  }
}

/* ============================================== */
/* M-WIDTH */
/* ============================================== */

@media screen and (max-width: 1440px){
  .mw-1440,
  .mw-768{
    padding: 90px 30px 30px !important;
  }
}

@media screen and (max-width: 1080px){
  .mw-1440,
  .mw-768{
    padding: 70px 20px 20px !important;
  }
}

/* ============================================== */
/* CUSTOM ICON */
/* ============================================== */


:root {
  --Icon-size-c: 24px;
  --Icon-wrap-c: 48px;

  /* CUSTOM ICON SIZE */

  --Icon-size-big: 40px;
  --Icon-wrap-big: 60px;
}

.v-custom {
  min-height: var(--Icon-wrap-c);
  min-width: var(--Icon-wrap-c);
  padding: 0;
  position: relative;
  transition: all 0.25s ease-in-out;
}

.v-custom::before {
  content: " ";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url("./../../images/body/sprite_local.svg");
  background-size: calc(var(--Icon-size-c) * 10);
  height: var(--Icon-size-c);
  width: var(--Icon-size-c);
  overflow: hidden;
}

/* CUSTOM ICON SIZE */

.v-custom.i-big {
  min-height: var(--Icon-wrap-big);
  min-width: var(--Icon-wrap-big);
}

.v-custom.i-big::before {
  height: var(--Icon-size-big);
  width: var(--Icon-size-big);
  background-size: calc(var(--Icon-size-big) * 10);
}

/* Iconos específicos con sprite grande */
.v-custom.i-big.icon-1::before { background-position: calc(0 * var(--Icon-size-big)) 0; }
.v-custom.i-big.icon-2::before { background-position: calc(-1 * var(--Icon-size-big)) 0; }
.v-custom.i-big.icon-3::before { background-position: calc(-2 * var(--Icon-size-big)) 0; }
.v-custom.i-big.icon-4::before { background-position: calc(-3 * var(--Icon-size-big)) 0; }
.v-custom.i-big.icon-5::before { background-position: calc(-4 * var(--Icon-size-big)) 0; }
.v-custom.i-big.icon-6::before { background-position: calc(-5 * var(--Icon-size-big)) 0; }

@media only screen and (max-width: 768px){
  :root {
    --Icon-size-big: 30px;
    --Icon-wrap-big: 50px;
  }
}

/* ============================================== */
/* CAT */
/* ============================================== */

.cat{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  background: var(--color-ter);
  color: white;
  padding: 5px 10px;
  z-index: 2;
}

.new_sale{
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 5px 2px;
  border-radius: 3px;
  background: var(--color-pri);
  color: white;
  margin-left: 5px;
  line-height: 1;
}

.new_sale.Pagado{
  background: var(--color-ter);
}

.new_sale_point {
  width: 10px;
  height: 10px;
  flex: none;                  /* evita que se deforme en flex */
  background: var(--color-ter);
  border-radius: 50%;
  margin-left: 5px;
  display: inline-block;

  /* Animación de glow */
  box-shadow: 0 0 5px var(--color-ter);
  animation: glow 1.5s infinite alternate;
}

/* Keyframes para el glow */
@keyframes glow {
  0% {
    box-shadow: 0 0 2px var(--color-ter), 0 0 5px var(--color-ter);
  }
  50% {
    box-shadow: 0 0 5px var(--color-ter), 0 0 10px var(--color-ter);
  }
  100% {
    box-shadow: 0 0 2px var(--color-ter), 0 0 5px var(--color-ter);
  }
}

#resultados_distribuidor{
  display:none;
  max-height:200px;
  overflow-y:auto;
  background: white;
  border-radius: 5px;
  padding: 10px 20px;
  border: 1px solid var(--color-10);
}
/* ============================================== */
/* REMOVE */
/* ============================================== */

#remove{
  position: absolute;
  right: 10px;
  top:10px;
  margin: 0;
}

/* ============================================== */
/* NEW IMAGE */
/* ============================================== */

.update-file {
    display: none;
}

img.ar-100 {
  width: 100px; 
  height: 100px; 
  object-fit: cover; 
  border-radius: 10px; 
}

/* Contenedor de imagen */
.img-product-wrapper {
    width: 100%;
    height: 300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-product-wrapper img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.img-news-wrapper{
  max-width: 200px;
  width: 100%;
}

/* ============================================== */
/* UPDATE IMAGE */
/* ============================================== */

input[type="file"] {
  display: none;
}

/* ============================================== */
/* CARD */
/* ============================================== */

.card{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--color-10);
  border: 1px solid var(--color-30);
  margin: 1%;
  overflow: hidden;
  border-radius: 10px;
  height: 200px;
}

.card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.card p,
.card h3{
  margin:0;
  color: white;
}

.card span{
  text-align: center;
  position: absolute;
  z-index: 2;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card:after{
  content: "";
  position: absolute;
  width: 100%;
  z-index: 1;
  height: 100%;
  top:0;
  left: 0;
  background: var(--color-pri);
  opacity: 0.7;
}

/* ============================================== */
/* p-tiny */
/* ============================================== */

.p-tiny :is(.input,.custom-select){
  margin-bottom: 10px;
  font-size: 0.85rem;
}

/* ============================================== */
/* WHITEBOX */
/* ============================================== */

.whitebox{
  background: var(--color-sky);
  border-radius: 20px;
  padding: 30px;

  -webkit-box-shadow: 0 20px 30px -20px var(--color-blue-3);
  -moz-box-shadow: 0 20px 30px -20px var(--color-blue-3);
  -ms-box-shadow: 0 20px 30px -20px var(--color-blue-3);
  box-shadow: 0 20px 30px -20px var(--color-blue-3);
}

@media only screen and (max-width: 768px){
 .whitebox{
    padding: 20px;
  } 
}

/* ============================================== */
/* LOADER */
/* ============================================== */

.loader{
  display: block;
  overflow: hidden;
  width: 100px;
  background: var(--color-10);
  border-radius: 10px;
  margin: 40px auto 0;
  position: relative;
}

.loader span{
  width: 30px;
  position: absolute;
  top: 50%;
  background: var(--color-ter);
  border-radius: 5px;
  animation: pulse 1s ease-in-out infinite alternate; 

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loader,
.loader span{
  height: 10px;
}

@keyframes pulse {
  0%, 100% {
    left: 0;
  }
  50% {
    left: 100%;
  }
}

/* ============================================== */
/* SELECT */
/* ============================================== */

:root{
  --Icon-size: 24px;
}

.custom-select-wrapper select {
  display: none;
}

.custom-select,
.custom-select-trigger,
.custom-option {
  position: relative;
  width: 100%;
}

.custom-select-wrapper{
  width: 100%;
}

.custom-select-trigger{
  padding:11px 20px 10px !important;
}

.custom-select-trigger:hover{
  cursor: pointer;
}

.custom-select-trigger:after {
  content: " ";
  background-image: url("./../../images/icons/sprite_black.svg");
  background-size: 240px;
  overflow: hidden;
  display: block;
  position:absolute;
  right: 15px;
  top:10px;
  height: var(--Icon-size);
  width: var(--Icon-size);
  z-index: 2;
  transform: rotate(90deg);
  background-position: -192px -72px;
}

.custom-select.opened .custom-select-trigger:after {
  transform: rotate(0deg);
}

.custom-select-trigger,
.custom-options{
  background: var(--color-0);
  overflow: hidden;
  border:1px solid var(--color-10);
}

.custom-options{
  box-shadow: 0 20px 30px -20px var(--color-blue-3);
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  margin-top: -1px;
  max-height: 250px;
  overflow-y: scroll;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(3px);
}

.custom-select.opened .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

.custom-option{
  padding: 15px 20px;
  color: #77767c;
}

.custom-option:not(:last-child){  border-bottom: 1px solid var(--color-10);  }

.custom-option:hover{
  color: var(--color-black);
  cursor: pointer;
  background: var(--color-3);
}

.custom-select-trigger,
.custom-select-trigger:after,
.custom-options,
.custom-option{
  -webkit-transition:all 250ms ease;
  -moz-transition:all 250ms ease;
  -ms-transition:all 250ms ease;
  transition:all 250ms ease;
}

@media screen and (max-width: 768px){
  .custom-select-wrapper{
    width: 100%;
  }
}

/* ============================================== */
/* NUMBER BRIEF */
/* ============================================== */

.sortable.noticias li:first-child{
  background: var(--color-ter) !important;
}

.sortable.noticias li:first-child :is(p,h4){
  color: white;
}

/* ============================================== */
/* NUMBER BRIEF */
/* ============================================== */

.new{
  background: var(--color-pri);
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

ul.nuevo li{
  font-weight: 600;
}

ul.nuevo{
  background: #ebf9e8 !important;
}

ul.nuevo span{
  color: var(--color-100);
}

ul.nuevo h3{
  margin: 30px 0 0;
}

.menu-list li{
  border-bottom: 1px solid var(--color-10);
}

/* ============================================== */
/* LOGIN */
/* ============================================== */

.login{
  position: absolute;
  display: flex;
  justify-content: center;
  flex-direction: column;
  top: 50%;
  left: 50%;
  max-width: 500px;
  width: 95%;
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.2);
}

.login .img{
  margin: 0 auto 20px;
}

/* ============================================== */
/* NEW IMAGE */
/* ============================================== */

#files {
  display: none;
}

/* ============================================== */
/* WRAPPER-IMG */
/* ============================================== */

.wrapper_bg_img{
  text-align: center;
  background: var(--color-blue-1);
  padding: 20px 20px 40px;
  border-radius: 10px;
  border: 1px dashed var(--color-blue-3);
}

.wrapper_bg_img img{
  border-radius: 10px;
  width: 300px;
  height: auto;
  margin: 10px auto;
}

/* ============================================== */
/* UPDATE IMAGE */
/* ============================================== */

.thumb_img{
  background: white;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.wrapp_img{
  margin: 0 auto;
  position: relative;
}

.thumb_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb_img,
.wrapp_img{
  width: 200px;
  height: 200px;
}

.wrapp_img .btn{
  position: absolute;
  right: 0;
}

.wrapp_img .btn:hover{
  cursor: pointer;
}

.thumb_img,
.wrapp_img .btn{
  border-radius: 50%;
  border:5px solid white;
}

.wrapp_img .btn{
  width: 60px;
  height: 60px;
  margin: 0;
}

@media screen and (max-width: 768px){
  .thumb_img,
  .wrapp_img{
    width: 100px;
    height: 100px;
  }
}

/* ============================================== */
/* LANGUAGE */
/* ============================================== */

.action{
  position: relative;
}

.action-menu {
  padding: 5px;
  position: absolute;
  bottom: 0;
  right: 50px;
  display: block;
  background: white;
  border-radius: 10px;
  border: 1px solid var(--color-50);
  z-index: 9;

  opacity: 0;
  pointer-events: none;
  transform: translateY(0px);
  box-shadow: 0 20px 15px -10px rgba(0, 0, 0, 0.2);
}

.action-menu.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(5px);
}

.action-menu a{
  color: var(--color-100);
  padding: 10px 20px;
  display: block;
  border-radius: 10px;
}

.action-menu a:hover{
  background: var(--color-30);
}

.action-menu,
.action-menu.visible{
  transition:all 250ms ease;
}

/* ============================================== */
/* TEASER-LINK */
/* ============================================== */

.teaser-link:hover { filter: brightness(0.98); }

/* ============================================== */
/* TABLES */
/* ============================================== */

.table th {
    background: var(--color-bla) !important;
}

.table :is(ul,li){
  width: 100%;
}

.table ul{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom:1px solid var(--color-sky);
  text-align: left;
}

.table ul:last-child{
  border-radius: 0 0 10px 10px;
  border-bottom:0;
}

.table li{
  padding: 10px 20px;
  align-items: center;
  display: flex;
}

.table ul:nth-child(even),
.table ul:nth-child(odd){
  background: var(--color-0);
}

.table li:last-child,
.table li:first-child{
  display: flex;
  justify-content: center;
  align-items: center;
}

.table.same li:first-child{
  max-width: 100%;
  justify-content: flex-start;
}

.table.same li:last-child{
  max-width: 100px;
}

.table li:first-child{
  max-width: 100px;
}

.table li:last-child{
  max-width: 230px;
}

.table li:first-child span{
  margin-right: 0px;
}

.table li:last-child .icon,
.table li:last-child button.icon{
  width: 40px;
  height: 40px;
  padding: 0;
}

.table li:last-child .icon:after{
  top: 8px;
  left: 8px;
}

.table.title ul li{
  font-weight: 500;
  padding: 5px 20px;
  color: var(--color-0);
}

.table.title ul{
  background: var(--color-blu);
  border-radius: 10px 10px 0 0;
}


table tr:nth-child(odd) {
  background-color: var(--color-sky) !important;
}
table tr:nth-child(even) {
  background-color: var(--color-lig) !important;
}

table th {
  background-color: var(--color-blu) !important;
}

table td, table th {
  border: 1px solid var(--color-blu) !important;
}

@media only screen and (max-width: 1080px){
 .table.title{
    display: none;
  }
  .table li::before {
    content: attr(data-label);
    font-size: 1rem;
    color: var(--color-90);
    font-weight: 600;
    float: left;
  }
  /*.table{
    gap: 10px;
    display: flex;
    flex-direction: column;
  }*/
  .table ul{
    flex-direction: column;
  }

  .table.solicitud ul{
    flex-direction: row;
  }

  .table.solicitud li{
    border: 0;
  }

  .table ul li,
  .table li:first-child{
    justify-content: space-between;
    max-width: 100%;
  }

  .table li:last-child{
    max-width: 100%;
  }
  .table ul li{
    border-bottom: 1px solid var(--color-sky);
  }

  table td::before {
    font-size: 0.85rem !important;
    text-transform: capitalize !important;
    font-weight: 600 !important;
  }
  table td:not(:last-child) {
    border-bottom: 0px !important;
  }

}

@media screen and (max-width: 768px){
  .table{
    flex-direction: column;
  }
}
/* ============================================== */
/* CHECKBOX LOGIN */
/* ============================================== */

input[type="checkbox"] {
  color: #000;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-10);
  border-radius: 10px;
}

input[type="checkbox"]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-pri);
  opacity: 0;
}

input[type="checkbox"]:checked:before {
  opacity: 1;
}

input[type="checkbox"],
input[type="checkbox"]:before{
  width: 18px;
  height: 18px;
}

/* ============================================== */
/* ALERTS */
/* ============================================== */

.label-status{
  width: auto;
  overflow: hidden;
  padding:5px 10px;
  border-radius: 10px;
}

.label-status p{
  font-size: 0.85rem;
}

.label-status p{
  font-weight: 600;
  margin: 0;
}

.label-status.alert-warning{
  background: #FFCCCC;
  border:1px solid #F7A7A7;
}

.label-status.alert-warning p{
  color:#4F2222;
}

.label-status.alert-success{
  background: #A3EF97;
  border:1px solid #7FD072;
}

.label-status.alert-success p{
  color:#284F22;
}

.alert-distibruidor{
  width: auto;
  overflow: hidden;
  padding:15px 20px;
  background: #FFCCCC;
  border:1px solid #F7A7A7;
  padding:10px 20px;
  border-radius: 10px;
}

.alert-distibruidor :is(h4,p,small){color:#4F2222; margin: 0}

@media screen and (max-width: 1080px){
  .alert-distibruidor{
    width: 100%;
  }
}

/* ============================================== */
/* TOP TITLE */
/* ============================================== */

.top-title{
  background: #E4F2EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  padding: 20px;
}

.top-title :is(.btn,h1,p){
  margin: 0;
}

@media screen and (max-width: 768px){
  .top-title{
    gap: 10px;
  }
  .top-title .btn{
    padding: 11px 15px;
  }
}

/* ============================================== */
/* LABEL PROGRESO */
/* ============================================== */

.meta-alcanzada {
    font-size: 1rem;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 20px;
    display: inline-block;
    background: var(--color-pri);
}

/* ============================================== */
/* BARRA PROGRESO */
/* ============================================== */

#progress-text {
    text-align: center;
    margin-top: 5px;
    font-weight: bold;
    color: #333;
}

.progress-container.progress-small{
  height: 10px;
}

/* ============================================== */
/* MODAL */
/* ============================================== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

.modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-content {
  background: white;
  padding: 40px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  border-radius: 20px;
  border: 1px solid var(--color-90);
  animation: fadeIn 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.modal.modal_product .modal-content {
  max-width: 768px;
}

.modal .icon-close{
  position: absolute;
  top:-30px;
  right:-30px;
  border-radius: 50%;
  z-index: 12;
}

.no-scroll {
  overflow: hidden;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* relación 16:9 */
  border-radius: 12px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


@media screen and (max-width: 768px) {
  .modal-content{
    padding: 20px;
    max-height: 480px;
    overflow-y: scroll;
  }
  .modal .icon-close{
    top:10px;
    right:10px;
  }
}


/* ============================================== */
/* SWITCH */
/* ============================================== */

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

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

.slidero {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-blu);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slidero:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.slidero.visible {
  background-color: var(--color-ter);
}

.slidero.visible:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* ============================================== */
/* INPUT SEARCH */
/* ============================================== */

.input-search{
  position: relative;
}

.input-search::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: var(--Icon-size-c);
  height: var(--Icon-size-c);
  z-index: 2;
  border-radius: 5px;

  background-color: var(--color-ter);
  background-image: url("./../../images/icons/sprite_white.svg");
  background-repeat: no-repeat;
  background-size: calc(var(--Icon-size-c) * 10) auto;
  background-position: calc(-3 * var(--Icon-size)) calc(-3 * var(--Icon-size));
}

.input-search input{
  padding: 10px 45px 10px 20px;
}


/* ============================================== */
/* FOOTER DELETE */
/* ============================================== */

.footer-delete{
  border-top: 1px solid var(--color-blu);
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* ============================================== */
/* DISTRIBUIDORES MAPA */
/* ============================================== */

.mw-20 {
  width: 15px;
  height: 20px;
}

.estado-item{
  padding: 10px;
  border-radius: 10px;
  background: var(--color-sky);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1px;
  border: 1px solid var(--color-blu);
}

.ciudad-item{
  background: #DCE4F7;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 1px;
}

.ciudad-item p{
  color: var(--color-tit);
}

/* Buscador */
.buscador-ciudad {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.buscador-ciudad .input {
  padding: 12px 20px;
}

/* Contador de items */
.count {
  background: var(--color-blu);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  display: block;
  width: 40px !important;
}

/* Lista de subdistribuidores */
.sub-list li{
  border: 1px solid var(--color-blu);
}

.ciudad-contenido li{
  padding: 5px;
}

.ciudad-contenido li:hover{
  cursor: pointer;
}

.ciudad-contenido li:not(:last-child) {
  border-bottom: 1px solid var(--color-blu);
}

/* Popups Leaflet */
.leaflet-popup-content-wrapper {
  border-radius: 10px !important;
  background: white !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.leaflet-popup-content p {
  margin: 0 !important;
}

/* Botones dentro de popup */
.popup-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.ciudades-list{
  margin-top: 10px;
}

/* ============================================== */
/* ACCORDION */
/* ============================================== */

.accordion li{ 
  display: block; 
  width: 100%; 
  position: relative; 
  overflow: hidden;
}

.accordion li:not(:last-child) {
  border-bottom: 1px dotted var(--color-blu); 
}


.img-articulo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
}

.accordion li:hover {
  cursor: pointer;
}

.accordion li h4.link,
.accordion li a {
  display: block;
  padding: 15px 20px;
  transition: all 250ms ease;
}

.accordion li h4 {
  margin: 0;
}

.accordion li h4.link:hover {
  background: var(--color-sky);
}

.accordion li.open {
  background: var(--color-sky);
}

/* Chevron icon */
.accordion > li::before {
  content: '';
  position: absolute;
  top: 19px;
  right: 10px;
  width: 24px;
  height: 24px;
  transform: rotate(0deg);
  transition: all 250ms ease;
  border-radius: 50%;

  background-color: var(--color-blu);
  background-image: url("./../../images/icons/sprite_white.svg");
  background-repeat: no-repeat;
  background-size: calc(var(--Icon-size-c) * 10) auto;
  background-position: calc(-8 * var(--Icon-size-c)) calc(-3 * var(--Icon-size-c));
}

.accordion li.open::before {
  transform: rotate(-90deg);
}

/* Full width for all elements */
.accordion .link,
.accordion .submenu,
.accordion li a {
  width: 100%;
}

.accordion li a {
  color: var(--color-tex);
}

.accordion li a:hover{
  transform: translateX(5px);
  color: var(--color-bla);
}

/* Hide submenu by default */
.accordion .submenu {
  display: none;
}

/* ============================================== */
/* IMG-ARTICULO */
/* ============================================== */

.img-articulo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================== */
/* MAP */
/* ============================================== */

#mapa-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* deja pasar clicks al mapa */
  z-index: 500;
  font-weight: bold;
  color: #333;
  text-align: center;
}

#mapa-overlay h4{
  position: absolute;
  top: 0;
  right: 10px;
  background: var(--color-bla);
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
}

#map{
  height:85vh;
  width:100%;
  border-radius:10px;
  overflow:hidden;
  z-index: 1;
}

#map:fullscreen {
  width: 100vw;
  height: 90vh;
}


@media screen and (max-width: 768px){
  #map{
    height:300px;
    width: 300px;
    margin: 0 auto;
  }
}