.MapaLeaflet {
    display: block;
    width: 100%;
    height: calc(100vh - 350px); /* Default: reduced height for expanded panel */
    transition: height 0.3s ease-in-out;
}

/* Only when accordion is closed, expand to full height */
body.accordion-closed .MapaLeaflet {
    height: 100vh;
}

/* Full-screen map for pages that don't need accordion panels */
.MapaLeaflet-fullscreen {
    display: block;
    width: 100%;
    height: 100vh; /* Always full height */
    transition: none; /* No transitions needed for full-screen maps */
}

/* Accordion toggle icon behavior */
.accordion-item .accordion-toggle-icon::before {
    content: "chevron_down"; /* Cerrado - mostrar para expandir */
}
.accordion-item.accordion-item-opened .accordion-toggle-icon::before {
    content: "chevron_up"; /* Abierto - mostrar para contraer */
}

/* Manual accordion control */
.manual-accordion-closed .accordion-toggle-icon::before {
    content: "chevron_up"; /* Para expandir hacia arriba */
}
.manual-accordion-opened .accordion-toggle-icon::before {
    content: "chevron_down"; /* Para contraer hacia abajo */
}

.manual-accordion-closed .accordion-content {
    display: none;
}
.manual-accordion-opened .accordion-content {
    display: block;
}

.manual-accordion-opened .info-collapsed {
    display: none !important;
}

/* Smooth transitions for accordion content */
.accordion-content {
    transition: all 0.3s ease-in-out;
}

/* Accordion header info visibility */
.accordion-item .info-collapsed {
    display: flex;
}
.accordion-item.accordion-item-opened .info-collapsed {
    display: none;
}

/* Hide interactive elements container when accordion is open */
.accordion-item.accordion-item-opened > div > div:first-child {
    display: none;
}
.placeholder-center::placeholder {
  text-align: center;
}
.placeholder-center {
  text-align: center;
}
#MainContent > div > img.DarkMode{
	display: none;
}
.theme-dark #MainContent > div > img.NotDarkMode{
	display: none;
}
.theme-dark #MainContent > div > img.DarkMode{
	display: inline-flex;
}

/* Divisores para listas */
.list.dividers li:not(:last-child) .item-content {
    border-bottom: 1px solid var(--f7-list-border-color, rgba(0,0,0,0.1));
}

/* Para tema oscuro */
.theme-dark .list.dividers li:not(:last-child) .item-content {
    border-bottom-color: var(--f7-list-border-color, rgba(255,255,255,0.15));
}

/* Hover effects for interactive elements in collapsed header */
#velocidadColapsada:hover {
    background: rgba(0,122,255,0.2) !important;
    border-color: rgba(0,122,255,0.5) !important;
    transform: scale(1.05);
}

#fechaColapsada:hover {
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
    transform: scale(1.02);
}

#horaColapsada:hover {
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
    transform: scale(1.02);
}

#velocidadVehiculoColapsada {
    /* Dynamic color will be set by JavaScript based on speed */
}

/* Vehicle speed color variations */
.speed-zero { color: #666 !important; background: rgba(102,102,102,0.1) !important; }
.speed-low { color: #30B32D !important; background: rgba(48,179,45,0.1) !important; }
.speed-medium { color: #FFDD00 !important; background: rgba(255,221,0,0.1) !important; }
.speed-high { color: #F03E3E !important; background: rgba(240,62,62,0.1) !important; }

/* Estilos para el diálogo de eventos */
.events-dialog .dialog-inner {
  background: #1e1e1e !important;
}

.events-dialog .dialog-title {
  background: #2d2d2d !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.events-dialog .dialog-buttons {
  background: #2d2d2d !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.events-dialog .dialog-button {
  color: #007aff !important;
}

/* Quitar bullet points en la lista de eventos */
.events-dialog .list ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.events-dialog .list li {
  list-style: none !important;
  list-style-type: none !important;
}

.rtl.item-link .item-inner::before {
  content: var(--f7-list-chevron-icon-left)!important;
}

.swipeout .myitem-swipeout {
    visibility: visible;
    width: auto;  
}

.swipeout-opened .myitem-swipeout {
    visibility: hidden;
    width: 0;
}

.swipeout .myitem-swipeout-opened
{
  opacity: 0;
  transform: translateX(-60vw);
  visibility: hidden;
  transition: 
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0s linear 0.5s;
}

.swipeout-opened .myitem-swipeout-opened {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    transition: 
      opacity 0.5s ease,
      transform 0.5s ease,
      visibility 0s;
}

.range-slider-wrapper {
    position: relative;
    width: 100%;
}


.range-slider-wrapper .ticks-container {
    position : absolute;
    top : 0px; /*altura*/
    left : 0;
    right : 0;
    height : 10px;
    pointer-events: none;
}

.range-slider-wrapper .ticks-container {
    position : absolute;
    top : 0px; /*altura*/
    left : 0;
    right : 0;
    height : 10px;
    pointer-events: none;
}

.range-slider-wrapper .ticks-container .tick-item-divider {
    position: absolute;
    width: 2px;
    height: 8px;
}

.range-slider-wrapper .ticks-container .tick-item-label {
    position: absolute;
    top: 15px;
    font-size: 10px;
    transform: translateX(-50%);
}

.range-slider-wrapper .ticks-container .tick-item-divider-minute {
    position: absolute;
    width: 1px;
    height: 6px;
}

.range-slider-wrapper .ticks-container .tick-item-divider-minute-short {
    position: absolute;
    width: 1px;
    height: 2px;
}


.range-slider-wrapper .ticks-container .tick-item-date {
    position: absolute;
    top: -13px;
    font-size: 10px;
    transform: translateX(-50%);
}