@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

body .icon,
body .weather-icon,
body .detail-icon,
body .wind-direction-arrow,
body #show-weather-button,
body .icon-btn,
body .icon-emoji, 
body .quick-action-btn .icon {
    font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols', sans-serif;
    font-variant-emoji: emoji;
    -webkit-font-variant-emoji: emoji;
}


body {
    display: flex; flex-direction: column; min-height: 100vh;
    background-color: #ABAB99; margin: 0; overflow-x: hidden;}
body.dark-mode {background-color: #92927E;}
main {
    position: relative;
    margin: 0 auto 0.5rem 60px; margin-top: 76px;
    background-color: transparent; border-radius: 0.75rem;
    padding: 16px; min-height: 400px;
    max-width: 984px; width: 100%;
    transition: margin-top 0.5s ease-in-out;}
footer {
    margin: 0.5rem auto; margin-left: 145px;
    text-align: center; max-width: 984px; width: 100%;
    display: block; background-color: #ABAB99;
    transition: margin-top 0.5s ease-in-out;}
body.dark-mode footer {background-color: #92927E;}
.footer-content {
    color: #5C5C47; padding: 0.5rem; margin: 0 auto;
    max-width: 100%; position: relative;}
.footer-subtext {
    font-size: 0.75rem; color: #5C5C47; margin-top: 0.25rem; text-align: center;}
.footer-link-green {color: #5C5C47; text-decoration: none;
    transition: color 0.2s ease;}
.footer-link-green:hover {   color: #5C5C47;}
.footer-line {
    display: flex; justify-content: center; align-items: center;
    gap: 0.5rem; flex-wrap: wrap;}
.hidden, .footer-hidden {    display: none !important;}
.header-container {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; background-color: #ABAB99; padding: 0.5rem;}
body.dark-mode .header-container {  background-color: #92927E;}
.header-logo {
    width: 100px; height: 70px;   transition: filter 0.2s ease;}
body.dark-mode .header-logo {  filter: brightness(85%);}
.title-container {
    background-color: #ABAB99; padding: 0.5rem 1rem;
    border-radius: 0.5rem; display: inline-block;}
body.dark-mode .title-container   background-color: #92927E;}
.header-container h1 {   color: #5C5C47;}

.version-text {
    font-size: 0.75rem; color: #5C5C47;  font-weight: normal;}
#bookmark-grid {
    display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 15px; background-color: transparent;
    border-radius: 0.75rem; position: relative;
    width: 970px; max-width: 970px;    margin: 0 auto 0 85px;  transition: all 0.3s ease;}
@media (max-width: 1024px) {
    #bookmark-grid {
        width: 100%; margin: 0 auto 0 70px;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));  }}
#bookmark-grid > div {
    height: auto; aspect-ratio: 16 / 9;   transition: all 0.3s ease;}
.bookmark-item {
    width: 100%; height: 100%; position: relative; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    border-radius: 0.5rem;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;}
.bookmark-item:hover:not(.editing-active *):not(.assignment-active *):not(.dragging *):not(.editing-target *):not(.keyword-assignment-active *) {
    transform: scale(1.05) translateY(-1px);
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6), -6px -6px 12px rgba(255, 255, 255, 0.15);}
.bookmark-item img {
    image-rendering: crisp-edges; width: 36px; height: auto;
    max-width: 40px; border-radius: 0.25rem;}
.bookmark-name {
    font-size: clamp(0.85rem, 1.5vw, 1.15rem); font-weight: bold;
    color: #333; text-align: center; margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;}
body.dark-mode .bookmark-item {  filter: brightness(60%);}
.empty-slot {
    width: 100%; height: 100%; cursor: default;
    display: flex; justify-content: center; align-items: center;
    border: 1px dashed #ccc; border-radius: 0.5rem;
    background-color: rgba(200, 200, 200, 0.1); color: #aaa;
    transition: background-color 0.2s ease, outline 0.2s ease, box-shadow 0.2s ease;}
.empty-slot span {font-size: 2rem; pointer-events: none;}
body.dark-mode .empty-slot {  border-color: #666; color: #777;
    background-color: rgba(100, 100, 100, 0.2);}
.toggle-image,
.toggle-sign {
    width: 135px; height: 74px; margin-bottom: 2px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    border: 1px solid #7c7c68; border-radius: 35px;
    position: fixed; left: 10px; top: 90px;
    z-index: 1000; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background-color: #ABAB99;
    transition: background-color 0.2s ease, filter 0.2s ease, top 0.3s ease, border 0.2s ease;}
.toggle-sign {
    font-weight: bold; font-size: 1.25rem;    color: #000000; text-align: center;}
.toggle-sign .sign {    font-size: 1.5rem; margin-right: 2px;}
.toggle-sign img,
.toggle-image img {
    max-width: 70%; max-height: 70%;  object-fit: contain;}
.toggle-sign:not(.range-toggle):not(.editing-active *):not(.assignment-active *):not(.keyword-assignment-active *):hover {
    background-color: #D9A066;}
.toggle-sign.range-toggle:not([data-state="hidden"]):not(.editing-active *):not(.assignment-active *):not(.keyword-assignment-active *):hover {
    background-color: #D9A066;}
.toggle-image:hover { filter: brightness(80%);}
.toggle-sign.range-toggle[data-state="hidden"] {  background-color: #ABAB99; color: #7F7F7F;}
body.dark-mode .toggle-sign.range-toggle[data-state="hidden"] {
    background-color: #ABAB99; color: #A0A0A0;}
body.dark-mode .toggle-sign:not(.range-toggle):not(#password-toggle-button),
body.dark-mode .toggle-image,
body.dark-mode .toggle-sign.range-toggle:not([data-state="hidden"]) {
    filter: brightness(85%); background-color: #ABAB99;}
body.dark-mode .toggle-sign:not(.range-toggle):hover:not(.editing-active *):not(.assignment-active *):not(.keyword-assignment-active *),
body.dark-mode .toggle-sign.range-toggle:not([data-state="hidden"]):hover:not(.editing-active *):not(.assignment-active *):not(.keyword-assignment-active *) {
    background-color: #ABAB99;}
.scroll-toggle-button {
    position: fixed; left: 10px; top: 10px;
    width: 110px !important; height: clamp(75px, 20vw, 130px) !important;
    background-color: #ABAB99; border-radius: 60px;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: clamp(10px, 2vw, 20px); cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #808080 !important; z-index: 1001;
    transition: background-color 0.2s ease;}
.scroll-toggle-button:hover {   background-color: #668B8B;}
.scroll-toggle-button svg {
    width: clamp(24px, 4vw, 32px); height: clamp(24px, 4vw, 32px);
    stroke: #E6E6DC;}
#config-button { left: 185px !important; }
#personal-button { left: 260px !important; }
#radar-button { left: 330px !important; }
#home-button { left: 400px !important; }
#reload-button { left: 470px !important; }
#store-button { left: 540px !important; }
#keyword-assignment-button { left: 615px !important; }
#config-button img {
    max-width: 52px !important; max-height: 52px !important;
    width: 52px; height: 52px; object-fit: contain;
    display: block; filter: none !important;}
#personal-button img, #radar-button img,
#home-button img, #reload-button img,
#keyword-assignment-button img,
#store-button img {
    max-width: 46px !important; max-height: 46px !important;
    width: 46px; height: 46px; object-fit: contain;
    display: block; filter: none !important;}
#password-toggle-button img {  filter: brightness(85%) !important; top: 25px;}
#versions-button img { transition: opacity 0.5s ease;}
#config-button:hover, #personal-button:hover, #radar-button:hover,
#home-button:hover, #reload-button:hover,
#keyword-assignment-button:hover:not(.active),
#password-toggle-button:hover,
#versions-button:hover:not(.versions-icon-dimmed),
#info-button:hover, #store-button:hover {
    transform: scale(1.1); background-color: rgba(255, 255, 255, 0.2);}
#personal-button.editing {
    border: 3px solid yellow !important;
    box-shadow: 0 0 10px yellow !important;}
#personal-button.assigning {
    border: 3px solid cyan !important;
    box-shadow: 0 0 10px cyan !important;}
#keyword-assignment-button.active {
    border: 3px solid yellow !important;
    box-shadow: 0 0 10px yellow !important;
    transform: scale(1.05); background-color: transparent !important;}
body.dark-mode #keyword-assignment-button.active {
    border-color: yellow !important;
    box-shadow: 0 0 10px yellow !important;}
.keyword-assignment-active .grid-cell:hover:not(.editing-active *):not(.assignment-active *):not(.dragging *):not(.editing-target *):not(.keyword-assigned-highlight) {
    transform: scale(1.05) translateY(-1px);
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6), -6px -6px 12px rgba(255, 255, 255, 0.15);
    outline: 3px dashed #10B981; cursor: crosshair;}
.keyword-assignment-active .grid-cell.editing-target {
    outline: 3px solid #10B981 !important; outline-offset: 1px;
    box-shadow: 0 0 8px #10B981;}
.keyword-assignment-active .grid-cell.keyword-assigned-highlight {
    outline: 3px solid yellow !important; outline-offset: 1px;
    box-shadow: 0 0 8px yellow; cursor: crosshair;}
#grid-filter-container {
    position: absolute; top: 43px; left: 670px;
    display: flex; align-items: center; z-index: 900;}
#grid-filter-input {
    padding: 8px 12px; border: 1px solid #7c7c68;
    border-radius: 4px; font-size: 1.3rem; font-weight: bold;
    height: 45px; width: 160px; background-color: #f0f0e0;}
body.dark-mode #grid-filter-input {
    background-color: #a0a090; color: #e0e0e0;    border-color: #666;}
#clear-filter-button {
    background: none; border: none; cursor: pointer;
    padding: 0 8px; margin-left: -35px;
    font-size: 1.6rem; color: #555; height: 40px;
    line-height: 40px; z-index: 901; display: none;}
body.dark-mode #clear-filter-button {   color: #bbb;}
body.dark-mode #user-id-display {
    color: #E6E6DC; background-color: rgba(146, 146, 126, 0.7);
    opacity: 0.7; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);}
.notices-icon-container {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 984px; margin: 0 auto;
    margin-left: 165px; position: relative;
    transition: margin-top 0.5s ease-in-out;}
.notices-container {
    flex-grow: 1; padding: 0.5rem; border: none;
    border-radius: 0.5rem; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-left: 2px; height: 3rem;}
.notice-wrapper {
    padding: 0.5rem; height: 1.5rem;
    flex-grow: 1; overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center;}
.notice {
    color: #E6E6DC; font-size: 1.3rem; font-weight: bold;
    white-space: nowrap; text-align: center;
    opacity: 0; animation: fadeInOut 14s infinite;}
@keyframes fadeInOut {
    0% { opacity: 1; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }}
.notice-off-icon {
    width: auto; height: clamp(4rem, 7vw, 6rem);
    margin-right: 10px; align-self: center;
    cursor: pointer; transition: filter 0.3s ease;}
body.dark-mode .notice-off-icon {  filter: brightness(85%);}
#reminder-button {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    position: fixed; background-color: #ABAB99;}
#reminder-button img {  object-fit: contain;}
#reminder-button .reminder-count {
    position: absolute; top: 6px; left: 8px;
    background-color: #EF4444; color: #FFFFFF;
    border-radius: 55%; padding: 4px 10px;
    font-size: 1.1rem; font-weight: bold; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    z-index: 1500; min-width: 1.9rem;
    max-width: 2.5rem; text-align: center;}
.reminder-count-globe {
    position: fixed; top: 10px; left: 10px;
    background-color: #2563EB; color: white;
    border-radius: 65%; padding: 10px 15px;
    font-size: 1.3rem; font-weight: bold;
    z-index: 1500;
    transition: margin-top 0.5s ease-in-out;}
#unified-reminder-window {
    position: fixed; top: 35px; left: 180px; transform: none;
    background-color: #FFFF99; border-radius: 1.5rem;
    border: 2px solid #ABAB99; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    z-index: 7000; max-width: 550px; width: 95%;
    max-height: 85vh; overflow: hidden;
    display: flex; flex-direction: column;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;}
#unified-reminder-window:not(.visible) {
    opacity: 0; transform: scale(0.9);  pointer-events: none;}
#unified-reminder-window.visible {
    opacity: 1; transform: scale(1);pointer-events: auto;}
.reminder-count-header {
    padding: 0.8rem 1.5rem; text-align: center;
    font-weight: bold; color: #0000FF;
    border-bottom: 1px solid #ABAB99; flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0px 10px; position: relative;}
.reminder-title-container {
    display: flex; flex-direction: column; align-items: center; flex-grow: 1;}
.reminder-title-container > span:first-child {   font-size: 1.3rem;}
.reminder-title-container .swipe-hint {   font-size: smaller;}
#reminder-swiper-container {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; flex-grow: 1;touch-action: pan-x;}
.reminder-slide {
    flex: 0 0 100%; scroll-snap-align: start; padding: 1.5rem;
    box-sizing: border-box; display: flex; flex-direction: row;
    gap: 1rem; overflow-y: auto; align-items: flex-start;
    max-height: calc(85vh - 60px);}
.reminder-slide-content {
    display: flex; flex-direction: column; flex-grow: 1; min-width: 0;}
.reminder-slide .reminder-content-scrollable {
    max-height: 30vh; overflow-y: auto; margin-bottom: 1rem;
    word-wrap: break-word; overflow-wrap: break-word;
    text-align: left; padding-right: 5px; flex-grow: 1;}
.reminder-slide .reminder-details {
    margin: 0.2rem 0; font-size: 1.15rem;
    font-weight: bold; color: #0000FF;}
.reminder-slide .button-group {
    display: flex; flex-direction: column;
    justify-content: center; gap: 0.5rem;
    margin-top: auto; padding-top: 1rem; flex-shrink: 0;}
.reminder-slide button {
    padding: 0.5rem 1rem; border-radius: 0.25rem;
    cursor: pointer; font-size: 0.9rem;
    width: 100%; background-color: #D1D5DB;}
.reminder-slide button.cancel {
    background-color: #EF4444; color: #FFFFFF;
    font-weight: bold; height: 70px;
    font-size: 1.2rem; order: 1;}
.reminder-slide button.modify {
    background-color: #10B981; font-weight: bold;
    height: 60px; font-size: 1.2rem;
    color: #FFFFFF; order: 5;}
.reminder-slide button.postpone {
    background-color: #F59E0B; font-weight: bold;
    height: 60px; font-size: 1.2rem;
    color: #FFFFFF; order: 3;}
.reminder-slide button.adjust-time-0001 {
    background-color: #4F4F4F; color: #FFFFFF;
    font-weight: bold; height: 60px;
    font-size: 1.2rem; order: 2; margin-top: 0.5rem;}
.reminder-slide button.cancel-cyclic {
    background-color: #8B0000; color: #FFFFFF;
    font-weight: bold; height: 60px;
    font-size: 1.2rem; order: 4; margin-top: 0.5rem;}
.reminder-map-preview-container {
    flex-shrink: 0; width: 150px;
    display: flex; align-items: center; justify-content: center;
    align-self: stretch;}
.reminder-map-preview {
    width: 100%; height: 100%;
    min-height: 100px; max-height: 25vh;
    border-radius: 0.5rem;}
#hide-all-reminders-button {
    background: none; border: none; color: #0000FF;
    font-size: 1rem; font-weight: bold; cursor: pointer;
    padding: 0.2rem 0.5rem; position: absolute; right: 1rem;
    top: 50%; transform: translateY(-50%); z-index: 3001;}
#hide-all-reminders-button:hover {  text-decoration: underline;}
.modal-top-buttons {
    display: flex; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;}
.modal-top-buttons button {
    flex: 1 1 auto; min-width: 100px; background-color: #D1D5DB;}
.reminder-modal, .help-modal, .edit-info-modal,
.choice-modal, .edit-modal, .reminder-table-modal,
.postpone-options, .saved-locations-modal,
#reorder-stages-modal, #simulation-modal,
#deviation-modal, #arrival-stats-modal,
#simulation-speed-modal {
    z-index: 2000; background-color: #FF7C1F; 
    color: white; font-weight: bold;
    padding: 1.0rem; border-radius: 0.3rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);}
#arrival-stats-modal .eta-deviation {
    font-size: 2.1em; font-weight: bold;
    margin-left: 8px; vertical-align: middle;}
#arrival-stats-modal .eta-deviation.positive { color: #F0B7B4; }
#arrival-stats-modal .eta-deviation.negative { color: #C7F2D8; }
.address-suggestions-modal h2 {
    font-size: 1rem; font-weight: bold; text-align: center;
    margin-bottom: 0.75rem; color: #333;}
body.modal-open {  overflow: hidden;}
#locations-preview-modal .modal-top-buttons {
    flex-shrink: 0; display: flex;
    justify-content: center; margin-top: 0;}
#simulation-speed-modal {
    position: fixed; top: 50px; left: 50%;
    transform: translateX(-50%); width: 90%;
    max-width: 400px; z-index: 9100;
    background-color: #F5E1A9; padding: 1.5rem;
    border-radius: 1rem; box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    text-align: center;}
#simulation-speed-modal h2 {
    font-size: 1.2rem; font-weight: bold;
    margin-bottom: 1rem; color: #333;}
#simulation-speed-modal input {
    width: 100px; padding: 0.5rem; margin-bottom: 1rem;
    font-size: 1.2rem; text-align: center;
    border: 1px solid #ccc; border-radius: 4px;}
#reorder-stages-modal button { background-color: #D1D5DB;}
#reorder-stages-modal #confirm-reorder-stages {
    background-color: #28a745; color: white;}
#reorder-stages-modal #cancel-reorder-stages {
    background-color: #6c757d; color: white;}
#simulation-modal #close-simulation-modal {
    background-color: #2563EB; color: white;
    position: absolute; top: 10px; left: 10px;
    height: 35px; padding: 0.5rem 1rem; font-size: 0.9rem;
    min-height: unset; min-width: unset; width: auto;
    line-height: 1;}
.postpone-options {
    background-color: #F5E1A9 !important; z-index: 7500 !important;
    top: 10px !important; transform: translateX(-50%) !important;}
.versions-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex; justify-content: center; align-items: flex-start;
    z-index: 5000; padding-top: 50px;}
.versions-modal-content {
    background-color: #DAC8A0; padding: 1.5rem;
    border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    width: 85%; max-width: 900px; max-height: 85vh;
    overflow-y: auto; display: flex; flex-direction: column;}
.versions-modal-content h2 {
    font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;
    color: #111827; text-align: center;}
.versions-modal-content .modal-top-buttons { margin-bottom: 1rem;}
.versions-modal-content pre {
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
    font-size: 1rem; line-height: 1.4; color: #333;
    margin-bottom: 1.5rem; padding: 0.8rem;
    background-color: #f0f0e0; border-radius: 0.25rem;
    max-height: calc(85vh - 150px); overflow-y: auto;}
.versions-modal-content button {
    display: block; width: 100%; padding: 0.75rem 1rem;
    border-radius: 0.25rem; cursor: pointer; font-size: 1.1rem;
    text-align: center; border: none;
    background-color: #2563EB; color: white;}
.versions-modal-content button:hover {  background-color: #1D4ED8;}
.reminder-modal {
    position: fixed; top: 1%; left: 50%;
    transform: translate(-50%, 0); max-width: 96%; width: 95%;
    max-height: 95vh; overflow-y: auto;
    font-weight: bold; font-size: 1.3rem;}
.reminder-table-modal button.visto-prox {
    background-color: #EF4444; font-size: 0.9rem; color: #FFFFFF;
    border: 1px solid #A00000; font-weight: bold;}
.reminder-table-modal button.visto-prox:hover {  background-color: #D00000;}
.help-modal,
.edit-info-modal {
    position: fixed; top: 1%; left: 50%;
    transform: translate(-50%, 1%); max-width: 910px; width: 98%;
    max-height: 96vh; overflow-y: auto; font-size: 1.10rem;
    z-index: 5500;}
#reminders-map-help-modal-instance {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    max-width: none !important; max-height: none !important;
    transform: none !important; z-index: 7000 !important;
    border-radius: 0 !important; box-sizing: border-box !important;
    padding: 1rem !important;}
#reminders-map-help-modal-instance > div[style*="overflow-y: auto"] {
    padding: 1.5rem !important; flex-grow: 1;
    max-height: none !important;}
.reminder-table-modal {
    position: fixed; top: 30px; left: 35px;
    transform: translateY(0); max-width: 99%; width: 1090px;
    max-height: 90vh; overflow-y: auto;
    background-color: #E6D6A8; border-radius: 1.5rem;}
.edit-modal {
    position: fixed; top: 5%; left: 50%;
    transform: translate(-50%, 0); width: 75%; max-width: 900px;
    border: 5px solid #A0522D; background-color: #EADDCA;
    z-index: 6000;}
.modal h2,
.modal h3 {
    font-weight: bold; margin-bottom: 1rem; color: #111827;}
.reminder-modal h2, .help-modal h2, .edit-info-modal h2,
.choice-modal h2, .edit-modal h2, .saved-locations-modal h2,
#reorder-stages-modal h2, #simulation-modal h2, #deviation-modal h2,
#arrival-stats-modal h2, #simulation-speed-modal h2 {
    font-size: 1.5rem;}
.reminder-modal label, .help-modal label, .edit-info-modal label,
.choice-modal label, .edit-modal label, .saved-locations-modal label {
    display: block; margin-bottom: 0.25rem; font-weight: 500;
    color: #374151; font-size: 1.1rem;}
.reminder-modal button, .help-modal button, .edit-info-modal button,
.choice-modal button, .edit-modal button, .reminder-table-modal button,
.versions-modal-content button, .saved-locations-modal button,
#reorder-stages-modal button, #simulation-modal button,
#address-suggestions-modal button, #deviation-modal button,
#arrival-stats-modal button, #simulation-speed-modal button {
    padding: 0.75rem 1rem; border-radius: 0.25rem; color: white; font-weight: bold; 
    cursor: pointer; font-size: 1.1rem; flex: 1;
    text-align: center; min-width: 100px; border: none;
    background-color: #2c3ea8; min-height: 60px;}
.reminder-modal .modal-top-buttons button {  height: 70px; min-height: 70px;}
.edit-info-modal #close-edit-info,
.help-modal #close-help,
#reminders-map-help-modal-instance #close-reminders-map-help-instance,
#simulation-modal #close-simulation-modal {
    background-color: #2563EB; color: white;}
.edit-info-modal #close-edit-info:hover,
.help-modal #close-help:hover,
#reminders-map-help-modal-instance #close-reminders-map-help-instance:hover,
#simulation-modal #close-simulation-modal:hover {
    background-color: #1D4ED8;
    height: 20px; }
.reminder-modal textarea#reminder-text {
    width: 100%; padding: 0.5rem; margin-bottom: 0.3rem;
    border: 1px solid #D1D5DB; border-radius: 0.25rem;
    font-size: 1.4rem; font-weight: bold;
    text-transform: uppercase;}
.reminder-modal input#reminder-time { max-width: 120px; width: auto; }
.reminder-modal input#reminder-date { max-width: 160px; width: auto; }
.reminder-modal input#reminder-interval { max-width: 100px; width: auto; }
.reminder-modal input#reminder-radius { max-width: 120px; width: auto; }
.reminder-modal input[type="text"],
.reminder-modal input[type="number"] {
    padding: 0.5rem; margin-bottom: 0.3rem;
    border: 1px solid #D1D5DB; border-radius: 0.25rem;
    font-size: 1.5rem; text-align: center;}
.reminder-modal .form-grid {
    display: grid; grid-template-columns: auto auto auto 1fr;
    gap: 1rem; align-items: end; margin-bottom: 1rem;}
label[for="reminder-interval"] { line-height: 1.2;}
.location-controls-group {
    grid-column: 4 / 5; display: flex;  flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: 0.5rem;  margin-top: 0;}
.location-controls-group label { margin-bottom: 0; }
.location-controls-group input[type="checkbox"] { margin-right: 0.2rem; }
.location-controls-group label[for="reminder-radius"] { margin-left: 0; }
#expand-map-button {
    padding: 0.3rem 0.6rem !important; font-size: 1.3rem !important;
    height: auto !important; flex-shrink: 0;
    background-color: #668B8B !important; color: white !important;
    border: none !important; border-radius: 0.25rem !important;
    min-width: unset !important; flex: unset !important;
    margin-left: 0.5rem;}
#expand-map-button:hover {  background-color: #5C5C47 !important;}
#location-map-container {
    grid-column: 1 / -1; width: 100%;
    border: 1px solid #ccc; border-radius: 0.25rem;
    background-color: #eee; position: relative;
    margin-top: 0.5rem; display: none;
    transition: height 0.3s ease-in-out;}
#location-map-container.preview { display: block !important; height: 65px;}
#location-map-container.expanded { display: block !important; height: 360px;}
#reduce-map-button,
#locate-me-button {
    position: absolute; top: 5px; z-index: 1001;
    padding: 0.8rem 1rem; font-size: 1rem; font-weight: bold;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #777; border-radius: 4px;
    cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    transition: background-color 0.2s ease;}
#reduce-map-button:hover,
#locate-me-button:hover {
    background-color: rgba(230, 230, 230, 0.95);}
#reduce-map-button { right: 5px; }
#locate-me-button { right: calc(5px + 135px + 15px); }
.reminder-modal .full-width {  grid-column: 1 / -1;}
.reminder-modal .days-group {
    display: flex; gap: 1rem; flex-wrap: wrap;
    grid-column: 1 / -1; margin-top: 1rem;}
.reminder-modal .days-group label { font-size: 1.1rem; flex: 0 0 auto;}
.reminder-modal button[type="submit"] {
    background-color: #2563EB; color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;}
.reminder-modal button[type="submit"] span#countdown-save {justify-content: right;}
.reminder-modal button[type="button"] {
    background-color: #D1D5DB; color: #111827;}
#config-modal #config-close-modal,
#simulation-speed-modal #cancel-simulation-speed,
.postpone-options #cancel-postpone {
    background-color: blue !important; color: white !important;
    border: 1px solid #2D3748 !important; font-weight: bold !important;}
#config-modal #config-close-modal:hover,
#simulation-speed-modal #cancel-simulation-speed:hover,
.postpone-options #cancel-postpone:hover {
    background-color: #2D3748 !important;}
#simulation-speed-modal #confirm-simulation-speed {
    background-color: #28a745 !important; color: white !important;}
.speech-button {
    background-color: #668B8B; color: white;
    border: none; border-radius: 0.25rem;
    padding: 0.5rem; cursor: pointer;
    margin-left: 0.5rem; font-size: 1rem;
    vertical-align: top;}
.speech-button:hover { background-color: #5C5C47;}
.speech-status {
    font-size: 0.85rem; color: #ABAB99;
    margin-top: 0.1rem; min-height: 1em;}
#auto-save-timer {
    color: #1E40AF; grid-column: 1 / -1;  text-align: center;}
.reminder-table-modal td.text-column {text-align: left;}
.reminder-table-modal td.date-column {  white-space: nowrap;}
.reminder-table-modal button.modify {
    background-color: #10B981; font-size: 1rem; color: #FFFFFF;
    height: 60px; border: 1px solid #008000; font-weight: bold;}
.reminder-table-modal button.modify:hover {  background-color: #008000;}
.reminder-table-modal button.delete {
    background-color: #EF4444; font-size: 0.9rem; color: #FFFFFF;
    border: 1px solid #A00000; font-weight: bold;}
.reminder-table-modal button.delete:hover { background-color: #D00000;}
.reminder-table-modal button.postpone {
    background-color: #F59E0B; font-size: 0.9rem; color: #FFFFFF;
    border: 1px solid #D97706; font-weight: bold;}
.reminder-table-modal button.postpone:hover {  background-color: #D97706;}
.reminder-table-modal button.cancel-cyclic-table {
    background-color: #8B0000; font-size: 0.9rem; color: #FFFFFF;
    border: 1px solid #580000; font-weight: bold;}
.reminder-table-modal button.cancel-cyclic-table:hover {
    background-color: #580000;}
.reminder-table-modal #close-reminders-bottom, {
    padding-left: 3rem;
    background-color: #2563EB; color: white;
    padding: 0.75rem 3rem; border-radius: 0.5rem;
    font-size: 1.25rem; font-weight: bold;
    border: 2px solid #1E3A8A; cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex; align-items: center;}
.reminder-table-modal #close-reminders-bottom:hover, {background-color: #1D4ED8;}
.choice-modal .personalization-options {
    display: flex; flex-direction: column; gap: 1rem;
    align-items: stretch; margin-bottom: 1.5rem;}
.choice-modal .personalization-options button {
    font-weight: bold; width: 100%;  background-color: #D1D5DB;}
.input-with-clear-button {
    position: relative; display: flex;  align-items: center;}
.input-with-clear-button input {
    width: 100%; padding-right: 40px !important;}
.clear-input-btn {
    position: absolute; right: 5px; top: 50%;
    transform: translateY(-69%); background: transparent;
    border: none; font-size: 1.8rem; font-weight: bold;
    color: #666; cursor: pointer; padding: 0 5px;
    line-height: 1; display: none;}
.choice-modal .footer-buttons {
    display: flex; justify-content: center; gap: 1rem; margin-top: 1rem;}
.choice-modal .footer-buttons button {
    flex: 0 1 auto; min-width: 120px; background-color: #D1D5DB;}
.edit-modal h2 {
    font-size: 1.4rem; margin-bottom: 1rem; color: #333;
    font-weight: bold; text-align: center;}
.edit-modal .modal-top-buttons {  margin-bottom: 1.2rem;}
.edit-modal label {
    display: block; margin-bottom: 0.3rem;
    font-weight: 500; color: #444; font-size: 1rem;}
.edit-modal input[type="text"],
.edit-modal input[type="url"] {
    width: 100%; padding: 0.6rem; margin-bottom: 0.8rem;
    border: 1px solid #BDB7AB; border-radius: 0.25rem; font-size: 1rem;
    background-color: #ffffff; 
    color: #333333;  }
.edit-modal .input-with-button {
    display: flex; align-items: center;  gap: 0.5rem; margin-bottom: 0.8rem;}
.edit-modal .input-with-button input {  flex-grow: 1; margin-bottom: 0;}
.edit-modal .search-button {
    padding: 0.4rem 0.6rem; font-size: 0.8rem;
    background-color: #668B8B; color: white;
    border: none; border-radius: 0.25rem;
    cursor: pointer; line-height: 1; height: fit-content;}
.edit-modal .search-button:hover { background-color: #5C5C47;}
.edit-modal button {
    padding: 0.7rem 1rem; font-size: 1.3rem;
    border-radius: 0.25rem; cursor: pointer;
    border: none; flex: 1 1 auto; min-width: 90px;
    background-color: #D1D5DB;}
.edit-modal button.save { background-color: #28a745; color: white; }
.edit-modal button.save:hover { background-color: #218838; }
.edit-modal button.cancel { background-color: #6c757d; color: white; }
.edit-modal button.cancel:hover { background-color: #5a6268; }
.edit-modal button.reset { background-color: #ffc107; color: #333; }
.edit-modal button.reset:hover { background-color: #e0a800; }
.edit-modal button.empty { background-color: #fd7e14; color: white; }
.edit-modal button.empty:hover { background-color: #e66b04; }
.editing-active .bookmark-item:hover,
.editing-active .range-toggle:hover,
.editing-active .empty-slot:hover {
    transform: none; outline: 3px solid yellow;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5), -4px -4px 8px rgba(255, 255, 255, 0.1);
    cursor: crosshair;}
.editing-active .grid-cell.editing-target,
.editing-active .range-toggle.editing-target {
    outline: 3px solid yellow !important; outline-offset: 1px;
    box-shadow: 0 0 8px yellow;}
.editing-active .grid-cell {
    cursor: grab; user-select: none;
    -webkit-user-select: none; -moz-user-select: none;
    -ms-user-select: none;}
.editing-active .grid-cell:active { cursor: grabbing;}
.grid-cell.dragging {
    opacity: 0.4; border: 2px dashed #aaa; cursor: grabbing;
    transform: scale(0.95); z-index: 10;}
.grid-cell.drag-over {
    border: 3px solid #3498db !important;
    background-color: rgba(52, 152, 219, 0.1);
    box-shadow: inset 0 0 10px rgba(52, 152, 219, 0.3);}
.empty-slot.drag-over {
    border: 3px solid #3498db !important;
    background-color: rgba(52, 152, 219, 0.2);}
.empty-slot.dragging {
    opacity: 0.4; border: 2px dashed #aaa !important;
    cursor: grabbing;}
.assignment-active .range-toggle.assigning-selected {
    outline: 4px solid cyan; box-shadow: 0 0 12px cyan;
    transform: scale(1.03);}
.assignment-active .range-toggle:not(.assigning-selected) {
    opacity: 0.7; cursor: pointer;}
.assignment-active .grid-cell.assigned-to-current {
    outline: 3px solid cyan;
    box-shadow: inset 0 0 8px rgba(0, 255, 255, 0.6);
    background-color: hsla(180, 70%, 80%, 0.3);
    opacity: 1;}
.assignment-active .grid-cell:not(.assigned-to-current) {
    opacity: 0.6; outline: 1px dashed #aaa;}
.assignment-active .grid-cell { cursor: pointer;}
body.dark-mode .assignment-active .grid-cell.assigned-to-current {
    box-shadow: inset 0 0 10px rgba(0, 200, 200, 0.7);
    background-color: hsla(180, 60%, 30%, 0.4);}
body.dark-mode .assignment-active .grid-cell:not(.assigned-to-current) {
    opacity: 0.5; outline-color: #555;}
#pin-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex; justify-content: center; align-items: flex-start;
    z-index: 9998;}
#pin-modal-content {
    background-color: #DAC8A0; padding: 2rem;
    border-radius: 0.75rem; box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    text-align: center; border: 1px solid #A0522D;
    margin-top: 50px;}
#pin-modal-content h2 {
    font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 1rem;}
#pin-modal-content .modal-top-buttons { margin-bottom: 1.5rem;}
#pin-modal-content label {
    display: block; font-size: 1.1rem;
    color: #444; margin-bottom: 0.8rem;}
#pin-input {
    width: 150px; padding: 0.8rem; font-size: 1.8rem;
    text-align: center; border: 2px solid #A0522D;
    border-radius: 0.25rem; margin-bottom: 1.5rem;
    letter-spacing: 0.5em; background-color: #f0f0e0;}
#pin-submit-button {
    padding: 0.8rem 2rem; font-size: 1.2rem;
    background-color: #28a745; color: white;
    border: none; border-radius: 0.25rem;
    cursor: pointer; transition: background-color 0.2s;}
#pin-submit-button:hover {  background-color: #218838;}
#pin-error-message {
    color: #dc3545; font-weight: bold; margin-top: 1rem; min-height: 1.2em;}
#config-modal {
    position: fixed; top: 15px; left: 50%;
    transform: translate(-50%, 0); background-color: #ECEFE8;
    padding: 1.5rem; border-radius: .75rem;
    box-shadow: 0 8px 16px rgba(0,0,0,.25); z-index: 5000;
    max-width: 1000px; width: 95%;
    max-height: calc(83vh + 190px); display: flex;
    flex-direction: column;}
#config-modal .modal-top-buttons {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 1rem;}
#config-modal .modal-top-buttons h2 {  margin-bottom: 0;}
.config-tab-content {
    max-height: calc(83vh + 130px - 190px);}
.config-tab-button {
    padding: .7rem 1.2rem; cursor: pointer;
    border: 1px solid #ccc; border-bottom: none;
    background-color: #e0e0d0; margin-right: .3rem;
    border-radius: .5rem .5rem 0 0; font-size: 1rem;
    font-weight: 500; color: #555; outline: none;
    transition: background-color .2s ease,color .2s ease;}
.config-tab-button:hover {  background-color: #d8d8c0;}
.config-tab-button.active {
    background-color: #ECEFE8; border-color: #ccc;
    border-bottom: 1px solid #ECEFE8; font-weight: bold;
    color: #2F4F4F; position: relative; top: 1px;
    z-index: 2;}
.tab-buttons {
    margin-bottom: -1px; flex-shrink: 0;
    border-bottom: 1px solid #ccc; padding-left: 1rem;
    display: flex; overflow-x: auto;}
.tab-contents {
    flex-grow: 1; overflow-y: auto; position: relative;
    z-index: 1; border-top: none; min-height: 200px;}
.config-tab-content { display: none; }
.config-tab-content.active {  display: block; }   
#config-modal h2 {
    font-size: 1.6rem; margin-bottom: 0; color: #2F4F4F;
    text-align: center; flex-shrink: 0;}
#config-modal h3 {
    font-size: 1.3rem; margin-bottom: .8rem; color: #4682B4;}
#config-modal p,
#config-modal label {
    font-size: 1rem; line-height: 1.5; color: #333;}
#config-modal em { font-size: .85rem;}
#config-modal button:not(.config-tab-button) {
    font-size: 1.05rem; padding: .8rem 1.5rem;  background-color: #D1D5DB;}
#config-modal textarea {
    font-size: .9rem; height: 110px; width: 100%;
    border: 1px solid #ccc; border-radius: .25rem;
    padding: .5rem; resize: vertical;}
#config-modal input[type=text],
#config-modal input[type=number],
#config-modal input[type=password] {
    font-size: 1rem; padding: .6rem; width: 100%;
    border: 1px solid #ccc; border-radius: .25rem;}
#config-modal .status-message {
    font-size: .9rem; min-height: 1.1em; font-weight: 500; text-align: center;
    margin-top: .5rem;}
.user-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 1.2rem 1.8rem; align-items: start; margin-bottom: 1rem;}
.user-data-grid label {
    margin-bottom: .3rem; display: block; font-weight: 500;}
.user-data-grid .checkbox-container {
    grid-column: 1 / -1; display: flex; align-items: center;
    gap: .5rem; justify-content: center; margin-top: .5rem;}
.user-data-grid .checkbox-container input {width: 1.2rem; height: 1.2rem;}
.user-data-grid .checkbox-container label {  margin-bottom: 0;}
.user-buttons-container {
    display: flex; justify-content: space-around;
    gap: 1.5rem; margin-top: 1.5rem; margin-bottom: 1rem;}
.user-buttons-container button {
    border: none; border-radius: .25rem;  cursor: pointer; flex-grow: 1;}
#config-user-status { min-height: 1.2em;}
.backup-restore-container {  display: flex; gap: 2.5rem; flex-wrap: wrap;}
.backup-restore-container > div { flex: 1; min-width: 250px;}
.backup-restore-container p { margin-bottom: 1.2rem;}
.backup-restore-container textarea { margin-bottom: 1rem; background-color: #f9f9f9;}
.backup-restore-container button {
    margin-bottom: 1rem; border: none;
    border-radius: .25rem; cursor: pointer;width: 100%;}
#config-restore-grid-button {
    background-color: #E65100; color: black; margin-top: 10px;}
#config-restore-grid-button:hover {background-color: #D84315;}
.backup-restore-container .status-message {
    margin-top: .6rem;}
.borrar-container h3 {
    margin-bottom: .8rem;}
.borrar-container p {
    margin-top: .6rem;}
.borrar-container button {
    margin-top: 1.5rem; border: none;
    border-radius: .25rem; cursor: pointer; width: 100%;}
.borrar-container button#config-clear-cache {
    background-color: #EF4444; color: white;}
#config-close-modal-container {
    text-align: center; margin-top: 1rem; flex-shrink: 0;}
#config-close-modal {
    font-size: 1.15rem; padding: .8rem 2.5rem;
    background-color: #4A5568; color: white;
    border: 1px solid #2D3748; font-weight: bold;}
#config-close-modal:hover { background-color: #2D3748;}
.pin-config-section {
    border-top: 1px solid #ccc;  margin-top: 2rem; padding-top: 1.5rem;}
.pin-config-layout {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
    gap: 1rem 1.5rem; align-items: end;}
.pin-config-layout .pin-input-group {
    grid-column: span 1; display: flex;  flex-direction: column;}
.pin-config-layout .pin-input-group label {  margin-bottom: 0.3rem;}
.pin-config-layout .pin-buttons-container {
    grid-column: 1 / 3; grid-row: 2;
    display: flex; justify-content: flex-start;
    gap: 1rem; margin-top: 0.5rem;}
.pin-config-layout .pin-buttons-container button {
    flex-grow: 0; min-width: 120px;max-width: 180px;}
#tab-content-pin .checkbox-container {
    grid-column: 1 / -1; display: flex; align-items: center;
    gap: .5rem; justify-content: flex-start;
    margin-top: 1.5rem; border-top: 1px solid #ccc;
    padding-top: 1rem;}
#tab-content-pin .checkbox-container input { width: 1.2rem; height: 1.2rem;}
#tab-content-pin .checkbox-container label { margin-bottom: 0;}
.toast-notification {
    position: fixed; top: 180px; right: 15px; transform: none;
    padding: 10px 25px; border-radius: 8px; color: white;
    font-size: 0.9rem; font-weight: bold; z-index: 9999;
    opacity: 0; text-align: center;
    transition: opacity 0.4s ease-in-out, top 0.4s ease-in-out;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    min-width: 200px; max-width: 70%;}
.toast-notification.show { opacity: 1;}
.toast-success { background-color: #28a745; }
.toast-error { background-color: #dc3545; }
.toast-warning { background-color: #ffc107; color: #333; }
.toast-info { background-color: #17a2b8; }
.toast-debug {
    background-color: #663399; color: white; font-size: 0.9rem;
    text-align: left; max-width: 90%; white-space: pre-wrap;
    max-height: 80vh; overflow-y: auto; line-height: 1.2;}
.toast-debug button {
    display: block; margin-top: 10px; padding: 5px 10px;
    background-color: rgba(255,255,255,0.2); color: white;
    border: 1px solid white; border-radius: 3px; cursor: pointer;}
.toast-error.not-found {
    background-color: #a02020; border: 2px solid #ffdddd;
    font-size: 1.2rem; box-shadow: 0 8px 16px rgba(0,0,0,0.4);}
#average-speed-display { color: #CBDDB5 !important; }
#max-speed-display { color: #FFA420 !important; }
#orientation-text {
    display: block; font-size: 1.4em; font-weight: bold;
    line-height: 1.2; margin-bottom: 2px;}
#altitude-display {
    display: block; font-size: 1.2em; line-height: 1.1;font-weight: bold;}
#current-speed-display,
#average-speed-display,
#max-speed-display {
    display: block; font-size: 1.2em; font-weight: bold;
    line-height: 1.2; margin-top: 3px;}
#navigation-graph-card.enlarged {
    position: fixed; background-color: rgba(0, 0, 0, 0.85);
    z-index: 2000; border: 1px solid #888;}
#navigation-graph-card.enlarged #navigation-graph-container {
    flex-grow: 1;}
#enlarge-graph-button {
    position: absolute; top: 5px; right: 5px;
    width: 28px; height: 28px; cursor: pointer;
    z-index: 5; opacity: 0.7; transition: opacity 0.2s;}
#enlarge-graph-button:hover {
    opacity: 1;}
#navigation-graph-title {
    font-size: 1.1em; font-weight: bold; padding: 1px 5px;
    color: #cb9a01; flex-shrink: 0;
    display: flex; justify-content: space-between;
    align-items: center; width: 100%;}
#navigation-graph-container {
    width: 100%; flex-grow: 1;
    position: relative; min-height: 0;}
#navigation-chart {
    display: block; width: 100%; height: 100%;}
#location-map-container:not(.expanded) ,
#location-picker-map-container:not(.expanded)  {
    display: none !important;}
.saved-locations-modal .modal-top-buttons {
    margin-bottom: 1rem;}
.saved-locations-modal .location-slot button.map-button:hover {
    background-color: #5C5C47;}
.saved-locations-modal #close-saved-locations-modal {
    background-color: #D1D5DB; color: #111827;}
#location-picker-map-container {
    height: 300px; border: 1px solid #ccc;
    position: relative; margin-top: 1rem;
    border-radius: 0.25rem; background-color: #eee;
    display: none;}
#location-picker-map-container.expanded {  display: block !important;}
#picker-ok-map-button { top: 5px; right: 5px;}
#location-picker-map-container button {
    padding: 0.5rem 0.8rem; font-size: 0.9rem; font-weight: bold;
    background-color: #007bff; /* CAMBIO: Fondo azul */
    color: white; /* CAMBIO: Letra blanca */
    border: 1px solid #0056b3; /* CAMBIO: Borde azul oscuro */
    border-radius: 4px;
    cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    position: absolute; z-index: 1001;
    transition: background-color 0.2s ease; /* AÑADIDO: Transición suave */}
#location-picker-map-container button:hover {  background-color: #0056b3;}   
#picker-locate-me-button {  top: 5px; right: calc(5px + 90px + 10px);}
#search-row-map-header .reminders-map-button-action { height: 57px;}
#search-row-map-header > #reorder-route-stages-button,
#search-row-map-header > #map-location-search-button,
#search-row-map-header > #clear-map-search-input-button,
#search-row-map-header > #map-location-search-input,
#search-row-map-header > #filter-input,
#search-row-map-header > #navigation-map-help-button {
    height: 60px !important;  box-shadow: 2px 5px 4px rgba(0,0,0,0.65); }
#reminders-location-map-header .button-row.hidden-map-header {
    opacity: 0; visibility: hidden; max-height: 0 !important;
    min-height: 0 !important; overflow: hidden !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    margin-bottom: 0 !important; border-bottom: none !important;}
#reminders-location-map-header .button-row:first-child {
    margin-bottom: 10px;}
#reminders-location-map-header h2 { display: none;}
#reminders-location-map-header .reminders-map-button-action img,
#reminders-location-map-header .reminders-map-button-action svg {
    width: 100%; height: 100%; object-fit: contain;}
#reminders-location-map-header .reminders-map-button-action:hover {
    opacity: 0.88;}
#toggle-map-header-buttons-panel {
    position: fixed; left: 15px; top: 50%;
    transform: translateY(-50%); width: calc(120px);
    height: calc(120px);
    background-color: rgba(100, 100, 100, 0.45);
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    cursor: pointer; z-index: 1010;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.45);
    touch-action: none;}
#toggle-map-header-buttons-panel img {
    width: 60%; height: 60%; object-fit: contain;}
#load-route-button,
#save-route-button {   background-color: #0000CD !important;}
#navigation-map-help-button {
    margin-right: 10px; margin-left: 10px;
    background-color: #4A5568 !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.50);}
#add-reminder-at-location-button {
    background-color: #FFA500 !important; width: 60px;
    height: 60px; padding: 5px; gap: 0;}
#add-reminder-at-location-button.active-reminder-mode {
    background-color: #EF4444 !important;}
#add-reminder-at-location-button svg {
    width: 100%; height: 100%; object-fit: contain;}
.radares-ruta-control {
    display: flex; align-items: center; justify-content: center;
    padding: 0.3rem 0.6rem; background-color: rgba(200,200,180,0.7);
    border-radius: 5px; height: 60px; min-width: 70px;
    box-sizing: border-box; gap: 3px;}
#radares-ruta-checkbox {
    margin-right: 0px; margin-bottom: 0px; transform: scale(1.1);}
.radares-ruta-label-container {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;}
#radares-ruta-checkbox + .radares-ruta-label-container > label {
    font-weight: bold; font-size: 0.70rem; color: #333;
    cursor: pointer; text-align: center;
    line-height: 1.1; margin-bottom: 1px;}
#radares-ruta-count {
    display: flex; align-items: center; justify-content: center;
    width: 25px; height: 20px; background-color: #6600a1;
    color: white; border-radius: 50%;
    font-size: 0.75rem; font-weight: bold;
    line-height: 1; margin-top: 2px;}
.tareas-ruta-control {
    display: flex; align-items: center; justify-content: center;
    padding: 0.3rem 0.6rem; background-color: rgba(200,200,180,0.7);
    border-radius: 5px; height: 60px; min-width: 70px;
    box-sizing: border-box; gap: 3px;}
#tareas-ruta-checkbox {
    margin-right: 0px; margin-bottom: 0px;transform: scale(1.1);}
.tareas-ruta-label-container {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;}
#tareas-ruta-checkbox + .tareas-ruta-label-container > label {
    font-weight: bold; font-size: 0.70rem; color: #333;
    cursor: pointer; text-align: center;
    line-height: 1.1; margin-bottom: 1px;}
#tareas-ruta-count {
    display: flex; align-items: center; justify-content: center;
    width: 25px; height: 20px; background-color: #008f39;
    color: white; border-radius: 50%;
    font-size: 0.75rem; font-weight: bold;
    line-height: 1; margin-top: 2px;}
#reorder-route-stages-button {
    height: 60px; width: 60px; border: 1px solid #777;
    box-shadow: 2px 3px 5px rgba(0,0,0,0.70);
    padding: 2px; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: bold; color: white;
    border-radius: 4px; cursor: pointer; flex-shrink: 0;
    white-space: nowrap; background-color: white !important; margin-right: 4px;}
#reorder-route-stages-button img {
    max-height: 90%; max-width: 90%; object-fit: contain;}
#map-location-search-button {
    height: 60px; width: 60px; border: 1px solid #777;
    box-shadow: 2px 5px 4px rgba(0,0,0,0.65);
    padding: 3px; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: bold; color: white;
    border-radius: 4px; cursor: pointer; flex-shrink: 0;
    white-space: nowrap; background-color: white !important;
    margin-left: 2px;}
#map-location-search-button img {
    max-height: 80%; max-width: 90%; object-fit: contain;}
#map-location-search-input::placeholder,
#::placeholder {    color: #CDCDCD; opacity: 1;}
#map-location-search-input::-webkit-input-placeholder { color: #CDCDCD; }
#map-location-search-input::-moz-placeholder { color: #CDCDCD; opacity: 1; }
#map-location-search-input:-ms-input-placeholder { color: #CDCDCD; }
#map-location-search-input::-ms-input-placeholder { color: #CDCDCD; }
body.dark-mode #map-location-search-input {
    background-color: #a0a090; color: #e0e0e0; border-color: #666;}
body.dark-mode #map-location-search-input::placeholder { color: #A0A0A0;}
#clear-map-search-input-button {
    height: 60px !important;   width: 30px !important;
    background-color: #e0e0e0;  border: 1px solid #ccc;
    box-shadow: 2px 5px 4px rgba(0,0,0,0.65); border-radius: 4px; 
    cursor: pointer;   flex-shrink: 0;  padding: 0; 
    z-index: 1; display: flex; align-items: center; 
    justify-content: center;   margin-left: 2px;
    font-size: 2.2rem;  font-weight: bold;        color: red;             
    line-height: 1; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
body.dark-mode #clear-map-search-input-button {
    background-color: #555; border-color: #444;  color: #ff6666; }
#toggle-simulate-gps-button {
    background-color: #DAA520 !important; width: 60px;
    height: 60px; padding: 5px !important;}
#toggle-simulate-gps-button.active-simulate-gps-mode {
    background-color: #B22222 !important; box-shadow: 0 0 8px #FF4500;}
#toggle-simulate-gps-button img {
    width: 100%; height: 100%; object-fit: contain;}
#simulate-route-button { padding: 5px;}
#simulate-route-button img {
    width: 100%; height: 100%;   object-fit: contain;}
#view-all-locations-map {
    padding: 0.75rem 1.2rem; font-size: 1.1rem;
    font-weight: bold; border-radius: 0.5rem;
    cursor: pointer; border: 2px solid #506C6C;
    color: white; background-color: #668B8B;
    margin-left: 10px; transition: background-color 0.2s ease;
    display: inline-flex; align-items: center;
    justify-content: center; height: auto;
    min-height: 46px; white-space: nowrap;}
#view-all-locations-map:hover {   background-color: #5C7A7A;}
#tab-content-radares .radar-filter-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; margin-bottom: 1rem; align-items: end;}
#tab-content-radares .radar-filter-group label {
    margin-bottom: 0.25rem; font-weight: 500;
    font-size: 0.9rem;}
#tab-content-radares .radar-filter-group input {
    padding: 0.5rem; font-size: 1rem;
    border: 1px solid #ccc; border-radius: 0.25rem;}
#tab-content-radares .radar-import-options {
    margin-bottom: 1rem; display: flex;
    align-items: center; gap: 0.5rem;}
#tab-content-radares .radar-import-options input[type=checkbox] {
    width: 1.1rem; height: 1.1rem;}
#tab-content-radares .radar-import-options label {
    margin-bottom: 0; font-size: 0.9rem;}
#tab-content-radares .radar-action-buttons {
    display: flex; justify-content: space-around;
    gap: 1rem; margin-top: 1rem; margin-bottom: 1.5rem;}
#tab-content-radares .radar-action-buttons button {
    flex: 1; padding: 0.8rem 1rem; font-size: 1.1rem;
    border-radius: 0.3rem; background-color: #D1D5DB;}
#import-radars-button,
#delete-filtered-radars-button {
    background-color: #F59E0B !important; color: white !important;
    border: 1px solid #D97706 !important;}
#import-radars-button:hover,
#delete-filtered-radars-button:hover { background-color: #D97706 !important;}
#radar-import-progress-container {
    margin-top: 1rem; padding: 0.8rem;
    border: 1px solid #ccc; border-radius: 0.25rem;  background-color: #f9f9f9;}
#radar-import-progress-bar {
    width: 100%; height: 20px; margin-bottom: 0.5rem;}
#radar-import-status {
    font-size: 0.9rem; color: #333; min-height: 1.2em; text-align: center;}
.navigation-waypoint-marker {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: white; font-weight: bold;
    text-align: center; box-shadow: 0 0 3px rgba(0,0,0,0.5);
    opacity: 0.85;    }
.navigation-waypoint-marker.start-point { background-color: rgba(0, 128, 0, 0.80); }
.navigation-waypoint-marker.finish-point { background-color: rgba(0, 0, 255, 0.80); }
.navigation-waypoint-marker.intermediate-point { background-color: rgba(230, 140, 0, 0.80); }
.waypoint-delete-button {
    position: absolute; background-color: rgba(255, 0, 0, 0.85);
    color: white; border-radius: 50%; text-align: center;
    cursor: pointer; border: 1px solid white; z-index: 10;}
#turn-icon-container-styled {
    position: relative; background-color: white;
    padding: 2px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; box-sizing: border-box;
    z-index: 1; flex-shrink: 0; margin-right: 3px;
    overflow: hidden;}
#navigation-top-info-bar .maneuver-text-container {
    flex-grow: 1; text-align: center;max-width: calc(100% - 60px);}
#navigation-top-info-bar .maneuver-text,
#navigation-top-info-bar .street-name {
    font-weight: bold; font-size: 1.33em; color: white;
    text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
    white-space: normal; word-wrap: break-word;
    overflow-wrap: break-word; line-height: 1.2;}
#navigation-top-info-bar .maneuver-text {
    font-size: 1.2em; margin-right: 5px; display: inline;}
#navigation-top-info-bar .street-name { font-size: 0.8em; display: inline;}
#distance-progress-bar-to-turn {
    width: 100%; height: 100%;
    background: linear-gradient(to right, #680000 0%, #FF0000 50%, #FA8072 97%);
    border-radius: 4px; transition: width 0.3s linear;}
#route-overall-progress {
    width: 0%; height: 100%; z-index: 3;
    background-color: #4CAF50;
    background: linear-gradient(to right, #006600 30%, #258D19 92%, #b4ff9a 99%);
    border-radius: 9px; transition: width 0.5s linear;
    position: relative;}
.radar-marker-on-progress-bar {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 0; height: 0;
    z-index: 1; border-left: 7px solid transparent;
    border-right: 7px solid transparent; border-bottom: 10px solid black;}
.radar-marker-on-progress-bar::after {
    content: ''; position: absolute; width: 0; height: 0;
    z-index: 2; border-left: 5px solid transparent;
    border-right: 5px solid transparent; border-bottom: 8px solid #C76054;
    top: 1px; left: -5px;}
.task-marker-on-progress-bar {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 0; height: 0;
    z-index: 1; border-left: 6px solid transparent;
    border-right: 6px solid transparent; border-bottom: 9px solid black;}
.task-marker-on-progress-bar::after {
    content: ''; position: absolute; width: 0; height: 0;
    z-index: 2; border-left: 4px solid transparent;
    border-right: 4px solid transparent; border-bottom: 7px solid #85FF12;
    top: 1px; left: -4px;}
#route-progress-icon {
    position: absolute; height: 100%; width: auto;
    max-height: 18px; left: 100%; top: 50%;
    transform: translate(-50%, -50%); z-index: 4; display: none;}
.waypoint-dot-on-progress-bar {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; background-color: #3498db;
    border-radius: 50%; border: 1px solid white; z-index: 2;}
#navigation-eta-info {
    display: flex; justify-content: space-between;
    margin-top: 6px; font-size: 1em;}
#navigation-eta-info.single-destination {  justify-content: center;}
#navigation-eta-info > div { flex-basis: 48%; text-align: center;}
#final-destination-info.single-destination-layout {
    text-align: center; flex-basis: auto !important;}
#final-destination-info.single-destination-layout strong {
    font-size: 0.7em !important;}
#final-destination-info.single-destination-layout span {
    font-size: 1.1em !important;}
#navigation-eta-info strong {
    display: block; font-size: 0.7em; margin-bottom: 2px;}
#navigation-eta-info span { font-size: 1.2em; font-weight: bold;}
#next-stage-info { display: block;}
#navigation-eta-info #next-stage-distance,
#navigation-eta-info #final-destination-distance { margin-right: 3px;}
#navigation-eta-info #next-stage-time,
#navigation-eta-info #final-destination-time {
    margin-left: 3px; margin-right: 3px;}
#navigation-eta-info #next-stage-eta,
#navigation-eta-info #final-destination-eta {   margin-left: 3px;}
.eta-deviation {
    font-size: 1em !important; font-weight: bold;
    margin-left: 6px !important;}
#next-stage-info .eta-deviation {
    font-size: 0.9em !important; font-weight: bold; margin-left: 6px;}
#final-destination-info .eta-deviation {
    font-size: 0.9em !important; font-weight: bold; margin-left: 6px;}
#simulation-modal .modal-top-buttons {  margin-bottom: 1rem;}
#simulation-modal .turn-icon-sim {
    margin-right: 8px; display: inline-flex;
    align-items: center; justify-content: center;
    width: 24px; height: 24px;
    flex-shrink: 0; vertical-align: middle;}
#simulation-modal .turn-icon-sim img {
    width: 24px !important; height: 24px !important;
    object-fit: contain;}
.favicon-red {
    filter: hue-rotate(0deg) saturate(200%) brightness(80%);}
.favicon-blue {
    filter: hue-rotate(200deg) saturate(150%) brightness(90%);}
.button-countdown-timer {}
.drag-handle {
    cursor: grab; padding: 0 10px; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    margin-right: 8px; touch-action: none;}
.drag-handle img { width: 24px; height: 24px; object-fit: contain;}
.stage-label-badge {
    background-color: #555; color: white;
    padding: 4px 8px; border-radius: 4px;
    font-size: 0.85rem; min-width: 25px;
    text-align: center; flex-shrink: 0;
    font-weight: bold;}
.stage-name-text {
    flex-grow: 1; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 1rem; color: #333;}
.delete-stage-button {
    cursor: pointer; margin-left: auto; padding: 0 10px;
    font-size: 1.8rem; color: #EF4444; font-weight: bold;
    line-height: 1; flex-shrink: 0;}
.delete-stage-button:hover {  color: #B91C1C;}    
#search-row-map-header {
    height: 70px; min-height: 70px; max-height: 70px; margin-bottom: 2px;}   
#reminders-location-map-header .reminders-map-button-action {
    padding: 5px; font-size: 0.9rem;
    height: 60px; min-height: 60px; font-weight: bold;
    border-radius: 0.375rem; cursor: pointer;
    border: 1px solid #777; color: white;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    box-shadow: 2px 5px 4px rgba(0,0,0,0.65);
    display: inline-flex; align-items: center;
    justify-content: center; text-align: center;
    flex-shrink: 0; white-space: nowrap;
    background-color: white !important;
    min-width: 60px; width: 60px}
.map-control-custom-map-controls {
    display: flex; flex-direction: row; flex-wrap: nowrap !important;
    align-items: flex-end; gap: 7px; z-index: 1001; min-width: 0;}
#navigation-graph-card {
    width: 395px; height: 160px;
    background-color: rgba(0, 0, 0, 0.60); color: white;
    border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,0.45);
    z-index: auto; box-sizing: border-box;
    display: flex; flex-direction: column; padding: 5px;
    position: relative; transition: all 0.4s ease-in-out;border-radius: 14px !important;  }
#reminders-location-map-header .button-row::-webkit-scrollbar {
    display: none;}
#reminders-location-map-header .button-row > *:not(:last-child) {
    margin-right: 10px;}
@media (min-width: 768px) {
    #intersection-preview-map-window {
        height: 480px;   }}
body.mobile-view #intersection-preview-map-window {
    width: 90vw; height: 50vh; max-width: 500px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);}
body.mobile-view #reminders-location-map-modal {
    display: flex; flex-direction: column; position: fixed;
    top: 0; left: 0; width: 100vw; height: 100dvh;
    padding: 0; border: none; border-radius: 0;
    box-sizing: border-box; z-index: 10000;}
body.mobile-view #reminders-location-map-content-wrapper {
    display: flex; flex-direction: column;
    width: 100%; height: 100%; border-radius: 0;
    overflow: hidden;}
body.mobile-view #reminders-location-map-header {
    flex-shrink: 0; padding: 5px; background-color: #C8C8C0;}
body.mobile-view #reminders-location-map-header .button-row {
    height: auto; min-height: 0; flex-wrap: wrap;
    justify-content: center; gap: 5px; padding: 5px 0;}
body.mobile-view #reminders-location-map-header #map-location-search-input {
        font-size: 1.1rem;
        height: 48px !important;
        min-height: 48px !important;
        flex-grow: 1;
        min-width: 150px;}
body.mobile-view #reminders-location-map-header #filter-input {
        height: 48px !important;
        min-height: 48px !important;
        width: 100px;
        font-size: 0.9rem;
    }
body.mobile-view #reminders-location-map-div { flex-grow: 1; position: relative;}
body.mobile-view #mapbox-map-actual-container {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;}
body.mobile-view #toggle-map-header-buttons-panel {
    width: 60px; height: 60px; left: 10px;}
body.mobile-view #map-info-overlay {
    max-width: 80%; top: 10px; right: 10px;font-size: 0.9em;}
body.mobile-view  {
    flex-direction: column; align-items: flex-start; gap: 5px;}
body.mobile-view .reminder-modal, body.mobile-view .help-modal,
body.mobile-view .edit-info-modal, body.mobile-view .choice-modal,
body.mobile-view .edit-modal, body.mobile-view .reminder-table-modal,
body.mobile-view .postpone-options, body.mobile-view .saved-locations-modal,
body.mobile-view #reorder-stages-modal, body.mobile-view #simulation-modal,
body.mobile-view #locations-preview-modal, body.mobile-view #deviation-modal,
body.mobile-view #arrival-stats-modal, body.mobile-view #simulation-speed-modal,
body.mobile-view #saved-routes-modalsave-route-prompt-modal #cancel-save-route:hover, body.mobile-view #save-route-prompt-modal,
body.mobile-view #pin-modal-overlay,
body.mobile-view #versions-modal-overlay,
body.mobile-view #reminders-map-help-modal-instance,
body.mobile-view #intersection-preview-map-window { z-index: 11000 !important;}
body.mobile-view .route-modal-overlay { z-index: 10001 !important;}
#reminders-map-help-modal-instance { z-index: 10002 !important;}
#map-location-search-input {
    flex-grow: 1; padding: 8px 12px; border: 1px solid #ccc;
    border-radius: 4px; background-color: #fff; min-width: 300px;
    height: 60px; font-weight: bold; text-transform: uppercase;
    font-size: 1rem; box-sizing: border-box;
    margin-right: 0 !important; margin-left: 5px;}
#filter-input {
    max-width: 200px; font-size: 0.9rem; padding: 8px 5px;
    margin-left: 2PX; border: 1px solid #7c7c68;
    border-radius: 4px; font-weight: bold; height: 60px;
    background-color: #f0f0e0; box-sizing: border-box;}
#nav-map-zoomtoggle-button {
    width: 60px; min-width: 60px; height: 60px; padding: 5px;}
#reminders-location-map-header .button-row {
    display: flex; margin-left: 5px; flex-direction: row;
    flex-wrap: nowrap !important;
    align-items: flex-end; /* <-- CORRECCIÓN: De 'center' a 'flex-end' */
    width: 100%; height: 70px; min-height: 70px;
    padding-bottom: 5px; box-sizing: content-box;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;}
#accident-alert-button-map {  background-color: white !important;}
#proximity-alert-modal {
    position: fixed; top: 25px; left: 25px;
    background-color: white; border: 2px solid black;
    border-radius: 0.75rem; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 8500; padding: 0.8rem; display: flex;
    align-items: center; gap: 0.8rem; max-width: 450px;}
#proximity-alert-modal img {
    width: 110px; height: 85px; object-fit: contain;}
#proximity-alert-modal .content {
    display: flex; flex-direction: column; gap: 0.5rem;}
#proximity-alert-modal .alert-text {
    font-size: 1.3rem; font-weight: bold; color: #111827;}
#proximity-alert-modal button {
    padding: 0.6rem 1.2rem; font-size: 1rem;
    background-color: #2563EB; color: white;
    font-weight: bold; border: none; border-radius: 0.25rem;
    cursor: pointer; align-self: flex-start; min-width: 120px;}
#flashing-border-overlay {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; box-sizing: border-box;
    pointer-events: none; z-index: 8499;
    border: 15px solid transparent;
    animation: flash-yellow-border 1s infinite;}
@keyframes flash-yellow-border {
    0%, 100% { border-color: transparent; }
    50% { border-color: #FFFF00; }}
.traffic-alert-icon-container {
    width: 55px; height: 55px; border-radius: 50%;
    background-color: white; border: 3px solid red;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); display: flex;
    justify-content: center; align-items: center;
    overflow: hidden;
    transition: width 0.2s ease, height 0.2s ease;}
.traffic-alert-icon-container.small {
    width: 27px; height: 27px; border-width: 2px;}
.traffic-alert-icon-container img {
    width: 85%; height: 85%; object-fit: contain;}
.reminder-slide .radar-icon {
    display: block; margin: 0 auto 0.5rem auto;
    width: 90px; height: 70px; object-fit: contain;}
.filter-modal-content button#accept-filters-btn {
    background-color: #2563EB; color: white; font-weight: bold;
    padding: 10px 30px; border-radius: 5px; border: none;
    font-size: 1.1rem; cursor: pointer;
    transition: background-color 0.2s;}
.filter-modal-content button#accept-filters-btn:hover {
    background-color: #1D4ED8;}
.single-slider-container .slider-range {left: 0;}
.single-slider-container .slider-thumb { transform: translateX(-50%);}
.charging-point-card {
    width: 90px; height: 90px;
    background-color: rgb(30, 144, 255); color: white;
    border: 2px solid white; border-radius: 50%;
    padding: 5px; box-sizing: border-box;
    font-family: sans-serif; text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6); cursor: pointer;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    gap: 1px;}
.charging-point-card p,
.charging-point-card span {
    margin: 0; padding: 0; line-height: 1.1;
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;}
.charging-point-card .power,
.charging-point-card .price {
    display: inline-flex; align-items: baseline; gap: 0.2em;}
.charging-point-card .power {
    font-size: 1.1rem; font-weight: bold;
    color: #ffd700; order: 1;}
.charging-point-card .operator {
    font-size: 0.8rem; font-weight: bold; order: 2;
    width: 90%; padding: 0 2px; box-sizing: border-box;}
.charging-point-card .price {
    font-size: 0.9rem; font-weight: bold;
    color: #90ee90; order: 3;}
.charging-point-card .availability {
    font-size: 0.75rem; font-weight: bold;
    color: #e0e0e0; order: 4;}
.charging-point-card .unit-text { font-size: 0.85rem; font-weight: bold;}
.charging-point-icon-simple {
    width: 32px; height: 32px; border-radius: 50%;
    background-color: rgb(30, 144, 255);
    border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;}
.charging-point-icon-simple img {
    width: 75%; height: 75%; object-fit: contain;}
.charging-point-popup .mapboxgl-popup-content-wrapper {
    background-color: #E6D6A8; color: #333;
    border-radius: 8px; border: 1px solid #C0B080;}
.charging-point-popup .mapboxgl-popup-content {
    font-family: sans-serif; font-size: 1rem;
    line-height: 1.4; padding: 10px; width: 300px !important;}
.charging-point-popup h3 {
    font-size: 1.2rem; font-weight: bold;
    margin-bottom: 8px; color: #1E3A8A;}
.charging-point-popup h4 {
    font-size: 1.1rem; font-weight: bold;
    margin-top: 10px; margin-bottom: 5px;
    border-top: 1px solid #ccc; padding-top: 8px;}
.charging-point-popup p {  margin: 4px 0;}
.charging-point-popup .ocm-connection-list {
    list-style: none; padding: 0; margin: 0;}
.charging-point-popup .ocm-connection-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; border-bottom: 1px solid #D8CEC0;}
.charging-point-popup .ocm-connection-list li:last-child {
    border-bottom: none;}
.charging-point-popup .conn-type {
    font-weight: 500; flex-basis: 45%; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;}
.charging-point-popup .conn-power {
    flex-basis: 20%; text-align: center;}
.charging-point-popup .conn-status {
    flex-basis: 35%; text-align: center; color: white;
    padding: 2px 5px; border-radius: 3px;
    font-size: 0.8rem; font-weight: bold;}
.charging-point-popup .popup-buttons {
    display: flex; justify-content: space-around; margin-top: 12px;}
.charging-point-popup button {
    padding: 6px 12px; font-size: 1rem; border: none;
    border-radius: 4px; cursor: pointer; font-weight: bold;}
.charging-point-popup .add-to-route-btn { background-color: #28a745; color: white; }
.charging-point-popup .cancel-btn { background-color: #6c757d; color: white; }
.ocm-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.60); z-index: 9500;
    display: flex; justify-content: center; align-items: center;
    padding: 15px;}
.ocm-modal-content {
    background-color: #2c2c2e; color: #f0f0f0;
    border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    width: 100%; max-width: 750px; height: 98vh;
    max-height: 850px; display: flex; flex-direction: column;
    overflow: hidden; border: 1px solid #444;}
.ocm-modal-header {
    height: 180px; background-size: cover;
    background-position: center; position: relative;
    display: flex; flex-direction: column;
    justify-content: space-between; padding: 12px;
    color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.8);}
.ocm-modal-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0) 100%);}
.ocm-modal-address {
    font-size: 1.25rem; font-weight: bold;
    position: relative; z-index: 1;}
.ocm-modal-operator-wrapper {
    position: relative; z-index: 1; align-self: flex-start;}
.ocm-modal-operator {
    font-size: 1.4rem; font-weight: bold;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 4px 10px; border-radius: 6px;
    display: inline-block; box-shadow: 0 2px 4px rgba(0,0,0,0.4);}
.ocm-modal-tabs {
    display: flex; background-color: #1c1c1e;
    border-bottom: 1px solid #444;}
.ocm-modal-tab {
    flex: 1; padding: 12px; text-align: center;
    font-weight: bold; cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
    color: #a0a0a0;}
.ocm-modal-tab:hover {   background-color: #3a3a3c;}
.ocm-modal-tab.active {   border-bottom-color: #007aff; color: white;}
.ocm-modal-body {   flex-grow: 1; overflow-y: auto; padding: 15px;}
.ocm-modal-panel { display: none; }
.ocm-modal-panel.active { display: block; }
.ocm-modal-panel h4 {
    font-size: 1.1rem; font-weight: bold; color: #007aff;
    margin-top: 15px; margin-bottom: 8px;
    border-bottom: 1px solid #444; padding-bottom: 5px;}
.ocm-modal-panel h4:first-child {   margin-top: 0;}
.ocm-modal-panel p,
.ocm-modal-panel li {
    font-size: 0.95rem; line-height: 1.5; margin-bottom: 5px;}
.ocm-modal-panel a { color: #0a84ff; text-decoration: none; }
.ocm-modal-panel a:hover { text-decoration: underline; }
.ocm-photo-grid {
    display: grid;  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  gap: 10px;}
.ocm-photo-grid img {
    width: 100%; height: 120px; object-fit: cover;
    border-radius: 8px; cursor: pointer; transition: transform 0.2s;}
.ocm-photo-grid img:hover {  transform: scale(1.05);}
.ocm-comment-list {   list-style: none; padding: 0;}
.ocm-comment {
    background-color: #3a3a3c; padding: 12px;
    border-radius: 8px; margin-bottom: 10px;}
.ocm-comment-header {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: #a0a0a0; margin-bottom: 5px;}
.ocm-comment-header .user {  font-weight: bold;}
.ocm-modal-footer {
    padding: 15px; border-top: 1px solid #444;
    display: flex; gap: 15px;}
.ocm-modal-footer button {
    flex: 1; padding: 12px; font-size: 1.1rem;
    font-weight: bold; border-radius: 8px;
    border: none; cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;}
#ocm-add-route-btn { background-color: #34c759; color: white; }
#ocm-add-route-btn:hover { background-color: #2fb350; }
#ocm-close-btn { background-color: #5856d6; color: white; }
#ocm-close-btn:hover { background-color: #4f4dbf; }
.ocm-modal-station-name-wrapper {
    align-self: flex-start; width: 100%; text-align: left;}
.ocm-modal-station-name {
    font-size: 1.5rem; font-weight: bold;
    background-color: rgba(0, 0, 0, 0.6); padding: 4px 10px;
    border-radius: 6px; display: inline-block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    margin-bottom: auto; color: #fdfbd4;}
.ocm-modal-address {
    font-size: 1.1rem; font-weight: bold;
    position: relative; z-index: 1; padding: 5px 5px;
    align-self: flex-start; margin-top: auto;}
.ocm-color-legend-icon {
    width: 24px; height: 24px;
    background-image: url('PNG/pdrs.png');
    background-size: 95%; background-repeat: no-repeat;
    background-position: center; border: 3px solid transparent;
    border-radius: 50%; box-sizing: border-box;
    flex-shrink: 0; box-shadow: 0 0 0 2px white;}
.ocm-color-legend {
    display: flex; justify-content: space-around; align-items: center;
    padding: 10px 0; margin-top: -10px; margin-bottom: 15px;}
.ocm-connection-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; border-bottom: 1px solid #3a3a3c;}
.ocm-connection-item:last-child {    border-bottom: none;}
.ocm-connection-type {   flex-basis: 50%; font-weight: 500;}
.ocm-connection-power-status {
    flex-basis: 50%; text-align: right; color: #fdfbd4;  font-weight: bold;}
.ocm-price-info {
    margin-top: 12px; font-size: 1.1rem;  color: #fdfbd4; text-align: center;}
.ocm-photo-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); z-index: 11000;
    display: flex; justify-content: center; align-items: center;
    padding: 20px;}
.ocm-photo-modal-content {
    position: relative; max-width: 90vw; max-height: 90vh;}
.ocm-photo-modal-content img {
    max-width: 100%; max-height: 100%;
    border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.5);}
.ocm-photo-modal-close-btn {
    position: absolute; top: -15px; right: -15px;
    width: 35px; height: 35px; background-color: white;
    color: black; border-radius: 50%;
    border: 2px solid #333; font-size: 24px;
    font-weight: bold; line-height: 32px; text-align: center;
    cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.3);}
.pdr-search-highlight {
    border: 3px solid yellow !important;
    box-shadow: 0 0 10px yellow, 2px 5px 4px rgba(0,0,0,0.65) !important;
    transform: scale(1.05);}
.ocm-external-links-container {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 15px; padding: 10px;
    background-color: #3a3a3c; border-radius: 8px;}
.ocm-external-links-left-group {   display: flex; align-items: center;}
.ocm-external-links-label {
    font-weight: bold; color: #c7c7cc;
    font-size: 0.9rem; white-space: nowrap;}
.ocm-external-links-note {
    font-size: 0.6rem; color: #8e8e93;
    margin-left: 5rem; white-space: nowrap;}
.ocm-external-links-buttons {  display: flex; gap: 10px;}
.ocm-external-link-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 5px;
    background-color: #f0f0f0; border: none;
    border-radius: 8px; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;}
.ocm-external-link-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);}
.ocm-external-link-btn img {
    width: 100%; height: 100%; object-fit: contain;}
.btn-modal-cancel {
    background-color: #C0392B; color: white; font-weight: normal;}
#close-saved-routes-modal.btn-modal-action-secondary {
    background-color: #C0392B;}
.btn-modal-action-secondary {
    background-color: red; color: white; font-weight: normal;}
#arrival-stats-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); background-color: #2c2c2e;
    color: #f0f0f0; border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    width: 99%; max-width: 1050px; max-height: 97vh;
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid #444; z-index: 11006;}
.arrival-stats-header {
    height: 150px;
    background-image: url('https://boardinggate.github.io/Tesla/PNG/modal-finish.jpg');
    background-size: cover; background-position: center;
    position: relative; display: flex; flex-direction: column;
    justify-content: space-between; padding: 10px; color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); flex-shrink: 0;}
.arrival-stats-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);}
.arrival-stats-header h2 {
    font-size: 1.7rem; font-weight: bold; position: relative;
    z-index: 1; margin: 0; text-shadow: 1px 1px 4px rgba(0,0,0,0.7);}
.arrival-stats-header .destination-name {
    font-size: 1.1rem; font-weight: 500; margin-right: 180px;
    position: relative; z-index: 1; background-color: rgba(0,0,0,0.5);
    padding: 4px 8px; border-radius: 6px; align-self: flex-start;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);}
.arrival-stats-body {
    padding: 15px; background-color: #2c2c2e;
    overflow-y: auto; flex-grow: 1;}
.stats-section-header {
    font-size: 1.1rem; font-weight: bold; color: #007aff;
    margin-bottom: 15px; padding-bottom: 8px;
    border-bottom: 1px solid #444;}
.stats-section-header:not(:first-child) {  margin-top: 23px;}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 13px;}
.stat-card {
    background-color: #3a3a3c; border-radius: 10px;
    padding: 13px; text-align: center;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; border: 1px solid #4a4a4a;
    min-height: 110px;}
.stat-icon svg {   width: 28px; height: 28px; color: #e0e0e0;}
.stat-label { font-size: 0.9rem; color: #b0b0b0; font-weight: 500;}
.stat-value {
    font-size: 1.5rem; font-weight: bold; color: #f0f0f0;
    line-height: 1.2; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
.initial-eta-details {
    grid-column: 1 / -1; background-color: transparent;
    border: 1px dashed #555; padding: 10px;
    font-size: 0.90rem; color: #b0b0b0; text-align: center;
    border-radius: 8px; margin-top: 8px;}
.arrival-stats-footer {
    padding: 8px; border-top: 1px solid #444;
    display: flex; justify-content: center;
    background-color: #FF7C1F; flex-shrink: 0;}
#arrival-stats-modal .eta-deviation.positive { color: #FF6347; }
#arrival-stats-modal .eta-deviation.negative { color: #7CFC00; }
#arrival-stats-modal .stat-value button#show-max-speed-location-button {
    font-size: 0.8rem; padding: 1px 5px; line-height: 1.2;
    height: auto; margin-left: 5px; vertical-align: middle;
    background-color: #D1D5DB; color: blue;
    border: 1px solid #9CA3AF; border-radius: 5px; font-weight: bold;}
.arrival-stats-footer button {
    padding: 12px 10px; font-size: 1.2rem; font-weight: bold;
    border-radius: 8px; border: 1px solid #bbb;
    cursor: pointer; background-color: #a13838;
    color: white; transition: background-color 0.2s;}
.arrival-stats-footer button:hover {  background-color: #e0e0e0;}
.reminder-modal {
    background-color: #2c2c2e; color: #f0f0f0;
    border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    border: 1px solid #444; padding: 0;
    display: flex; flex-direction: column; font-size: 1rem;
    position: fixed; top: 1%; left: 50%;
    transform: translate(-50%, 0); max-width: 96%; width: 95%;
    max-height: 95vh; overflow: hidden;}
.reminder-modal-header {
    height: 60px;
    background-image: url('PNG/recordatorios.jpg');
    background-size: cover; background-position: center;
    position: relative; display: flex; align-items: center;
    justify-content: space-between; padding: 0.5rem 1.5rem;
    border-radius: 14px 14px 0 0; flex-shrink: 0;}
.reminder-modal-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
    border-radius: 14px 14px 0 0;}
.reminder-modal-title {
    font-size: 1.5rem; font-weight: bold; color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8); z-index: 1;}
.reminder-modal .header-options { z-index: 1; }
.reminder-modal .form-label-exclude {
    display: flex; align-items: center; color: #ccc;
    cursor: pointer; font-size: 0.9rem; font-weight: 500;}
.reminder-modal .form-label-exclude input {
    margin-right: 0.5rem; transform: scale(1.1);}
.reminder-modal-body { padding: 0.5rem 1.5rem; flex-grow: 1; overflow-y: auto;}
.reminder-modal-form {  display: flex; flex-direction: column; gap: 0.1rem;}
.reminder-modal .form-section { display: flex; flex-direction: column; gap: 0.3rem;}
.reminder-modal .input-with-buttons {
    display: flex; align-items: stretch; gap: 0.75rem; margin-top: 0.3rem;}
.reminder-modal #reminder-text {
    flex-grow: 1; background-color: #3a3a3c;
    border: 1px solid #555; color: #f0f0f0;
    border-radius: 8px; padding: 0.75rem;
    font-size: 1.1rem; resize: vertical; min-height: 45px;
    text-transform: uppercase;}
.reminder-modal .clear-button {
    width: 45px; height: 45px; background-color: #48484a;
    border: 1px solid #5f5f61; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;}
.reminder-modal .clear-button svg { width: 22px; height: 22px; stroke: #ff9500;}
.reminder-modal .parse-status {
    font-size: 0.6rem; color: #8e8e93; text-align: right;
    margin-top: -0.2rem; min-height: 1em;}
.reminder-modal .controls-grid {
    display: grid; grid-template-columns: auto auto auto 1fr;
    align-items: end; gap: 15px 30px; margin-top: 4px;}
.reminder-modal .control-item {
    display: flex; flex-direction: column; gap: 0.2rem;}
.reminder-modal .form-label {
    font-size: 0.85rem; color: #a0a0a0; margin-bottom: 0;}
.reminder-modal input[type="text"],
.reminder-modal input[type="number"] {
    background-color: #3a3a3c; border: 1px solid #555;
    color: #f0f0f0; border-radius: 8px; padding: 0.5rem;
    font-size: 1rem; text-align: center; min-width: 80px;}
.days-group-grid-item {
    display: flex; flex-direction: column; gap: 0.2rem; margin-left: 20px;}
.reminder-modal .days-checkbox-container { display: flex; gap: 0.4rem; flex-wrap: nowrap;}
.reminder-modal .days-group-grid-item label {
    display: flex; align-items: center;
    cursor: pointer; user-select: none;}
.reminder-modal .days-group-grid-item input[type="checkbox"] {display: none;}
.reminder-modal .days-group-grid-item span {
    padding: 0.35rem 0.8rem; border: 1px solid #555;
    background-color: #3a3a3c; color: white;
    border-radius: 20px; font-size: 0.9rem;}
.reminder-modal .days-group-grid-item input[type="checkbox"]:checked + span {
    background-color: #007aff; border-color: #007aff;
    font-weight: bold;}
.reminder-modal .location-section {
    background-color: rgba(255, 255, 255, 0.05); padding: 0.7rem;
    border-radius: 8px; border: 1px solid #444; margin-top: 20px;}
.reminder-modal .location-header {
    display: flex; justify-content: space-between;
    align-items: center; gap: 1rem;}
.reminder-modal .form-label-location {
    display: flex; align-items: center; font-size: 1rem;
    font-weight: bold; color: #f0f0f0; cursor: pointer;flex-shrink: 0;}
.reminder-modal .form-label-location input[type="checkbox"] {
    width: 1.2rem; height: 1.2rem; margin-right: 0.6rem;}
.reminder-modal .radius-slider-group {
    display: flex; align-items: center; gap: 0.75rem;
    flex-grow: 1;}
.reminder-modal .radius-slider-group .form-label {
    white-space: nowrap; font-size: 0.8rem;}
.reminder-modal .expand-map-button {
    background-color: #007aff; color: white; border: none;
    border-radius: 8px; padding: 0.4rem 0.8rem;
    font-size: 0.9rem; font-weight: bold; display: inline-flex;
    align-items: center; gap: 0.4rem; cursor: pointer;
    flex-shrink: 0;}
.reminder-modal #location-controls-container { margin-top: 0.8rem;}
.reminder-modal .location-map-container {
    height: 65px; border-radius: 8px; background-color: #1c1c1e;
    border: 1px solid #555; position: relative;}
.reminder-modal .location-map-container.expanded { height: 310px;}
.reminder-modal-footer {
    flex-shrink: 0; padding: 0.8rem 1.5rem;
    border-top: 1px solid #444; background-color: #1c1c1e;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 0.75rem; border-radius: 0 0 14px 14px;}
.reminder-modal .action-button {
    padding: 0.8rem; font-size: 1rem; font-weight: bold;
    border-radius: 8px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; min-height: 55px;}
.reminder-modal .action-button.primary { background-color: #007aff; color: white; padding: 0.8rem 2.2rem; }
.reminder-modal .action-button.secondary { background-color: #555; color: white; }
.reminder-modal .action-button.danger { background-color: #ff3b30; color: white; }
.reminder-modal #countdown-save {
    font-size: 1rem; font-weight: normal; opacity: 0.8;
    background-color: rgba(255,255,255,0.2);
    padding: 2px 6px; border-radius: 10px; margin-left: 8px;}
.help-modal .reminder-modal-body {    flex-grow: 1; overflow-y: auto;}
.help-modal h2, .help-modal h3 { color: white; }
.help-modal .reminder-modal-body ul { list-style: none; padding-left: 0; }
.help-modal .reminder-modal-body li { padding-left: 1.2rem; position: relative; }
.help-modal .reminder-modal-body li::before {
    content: '•'; color: #007aff; font-weight: bold;
    position: absolute; left: 0; top: 2px;}
.reminder-modal .form-grid,
.reminder-modal .days-group:not(.days-group-grid-item) {  display: none;}
.reminder-modal .full-width { display: contents; }
#arrival-stats-modal .arrival-stats-layout-grid {
    display: grid; grid-template-columns: 2fr 1fr;
    gap: 25px; align-items: start;}
#arrival-stats-modal .main-stats-container,
#arrival-stats-modal .side-stats-container {
    display: flex; flex-direction: column; gap: 20px;}
#arrival-stats-modal .side-stats-container .stats-section-header:not(:first-child) {
    margin-top: 0;}
@media (max-width: 1000px) {
    #arrival-stats-modal .arrival-stats-layout-grid {
        grid-template-columns: 1fr;  }}
.maneuver-highlight, .maneuver-highlight-south {   border-radius: 8px;}
.maneuver-highlight { animation: flash-yellow-halo 1.3s infinite; }
.maneuver-highlight-south { animation: flash-red-halo 1.1s infinite; }
@keyframes flash-yellow-halo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 0, 0); }
    50% { box-shadow: 0 0 21px 9px rgba(255, 255, 0, 1); }}
@keyframes flash-black-halo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    50% { box-shadow: 0 0 21px 9px rgba(0, 0, 0, 1); }}
@keyframes flash-red-halo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
    50% { box-shadow: 0 0 21px 9px rgba(255, 0, 0, 1); }}
.route-label-marker {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: white; font-weight: bold;
    font-size: 14px; font-family: Arial, sans-serif;
    text-align: center; box-shadow: 0 0 5px rgba(0,0,0,0.7);
    border: 2px solid white; cursor: pointer;
    transition: transform 0.2s ease; width: 40px; height: 40px;}
.route-label-marker:hover {  transform: scale(1.1);}
#user-info-header {
    position: absolute !important; top: -30px; left: 1060px;
    transform: translateX(-100%); display: flex;
    align-items: center; gap: 10px; z-index: 800;}
#open-chat-area { cursor: pointer; }
#user-id-display, #user-count-globe, #chat-icon-button {
    position: static; top: auto; right: auto; transform: none;}
#user-id-display {
    font-weight: bold; font-size: 1.1rem; color: #5C5C47;
    padding: 4px 4px; background-color: rgba(171, 171, 153, 0.7);
    border-radius: 1px; white-space: nowrap;
    text-align: right; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);}
#user-count-globe {
    background-color: #FFA500; color: white;
    border: 2px solid white; border-radius: 50%;
    width: 42px; height: 32px; display: flex;
    align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.9rem; cursor: pointer;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);}
#chat-icon-button {
    background-color: #2563EB; color: white;
    border: 2px solid white; border-radius: 50%;
    min-width: 42px; height: 32px; padding: 0 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    position: relative; font-weight: bold;
    font-size: 0.9rem; line-height: 1;}
#chat-modal-overlay {
    position: fixed; inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9000; display: flex; padding: 0;}
#chat-modal-content {
    background-color: #2c2c2e; color: #f0f0f0;
    border-radius: 0; box-shadow: none; border: none;
    width: 100%; display: flex; flex-direction: row;
    overflow: hidden;}
#chat-messages-container {
    flex-grow: 1; padding: 1rem; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.75rem;}
#chat-left-column {
    flex-grow: 1; display: flex; flex-direction: column; overflow: hidden;}
#chat-right-column {
    flex-shrink: 0; width: 250px;
    background-color: #1c1c1e; border-left: 1px solid #444;
    display: flex; flex-direction: column; overflow: hidden;}
#chat-users-filter-container {
    padding: 0.75rem; background-color: #3a3a3c;
    border-bottom: 1px solid #444; flex-shrink: 0;}
#chat-user-filter-input {
    width: 100%; padding: 0.5rem 0.75rem;
    background-color: #2c2c2e; border: 1px solid #555;
    color: #f0f0f0; border-radius: 6px; font-size: 0.9rem;}
#chat-user-filter-input::placeholder { color: #8e8e93; }
#chat-users-list {padding: 0.5rem; overflow-y: auto; flex-grow: 1;}
.chat-no-users { font-style: italic; color: #8e8e93; text-align: center; margin-top: 1rem; }
#chat-input-area {
    padding: 1rem; border-bottom: 1px solid #444;
    background-color: #1c1c1e; flex-shrink: 0;}
#chat-permission-warning {
    background-color: #b91c1c; color: white;  padding: 0.5rem; margin-bottom: 0.75rem;
    border-radius: 6px; text-align: center;font-size: 0.9rem;}
#chat-message-input {
    width: 100%; background-color: #3a3a3c;
    border: 1px solid #555; color: #f0f0f0;
    border-radius: 8px; padding: 0.75rem; font-size: 1rem;
    resize: none; line-height: 1.4; margin-bottom: 0.75rem;}
#chat-message-input::placeholder { color: #746969; }
#chat-input-footer {
    display: flex; justify-content: space-between; align-items: center;}
#chat-buttons {display: flex; gap: 1rem; flex-grow: 1;}
#chat-send-button, #chat-exit-button {
    flex: 1; padding: 0.75rem; font-size: 1.1rem;
    font-weight: bold; border-radius: 8px;
    border: none; cursor: pointer;}
#chat-send-button { background-color: #007aff; color: white; }
#chat-exit-button { background-color: #555; color: white; }
#chat-send-button:disabled { background-color: #444; cursor: not-allowed; }
#chat-char-counter {
    font-size: 0.8rem; color: #8e8e93;
    margin-left: 1rem; flex-shrink: 0;}
.chat-message-bubble {
    max-width: 75%; padding: 0.6rem 0.9rem;
    border-radius: 18px; display: flex; flex-direction: column;}
.chat-message-bubble.sent { align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-message-bubble.received { align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-message-bubble.public-msg { background-color: #2e7d32; }
.chat-message-bubble.private-msg { background-color: #1565c0; }
.chat-message-bubble.private-msg-sent { background-color: #0d47a1; }
.chat-message-bubble.sent.public-msg { background-color: #DF6565 !important; }
.chat-message-sender {
    font-size: 0.9rem; font-weight: bold;
    margin-bottom: 4px; opacity: 0.8;}
.chat-message-content {
    word-wrap: break-word; overflow-wrap: break-word;
    white-space: pre-wrap; line-height: 1.4;}
.chat-message-time {
    font-size: 0.8rem; align-self: flex-end;
    margin-top: 4px; opacity: 0.7; display: flex;
    align-items: center; gap: 8px;}
.chat-system-message {
    text-align: center; font-style: italic;
    color: #8e8e93; padding: 1rem;}
.chat-message-actions {
    display: flex; align-items: center;
    gap: 16px; margin-left: 8px;}
.chat-action-icon {
    width: 30px; height: 30px; cursor: pointer;
    opacity: 0.7; transition: opacity 0.2s;}
.chat-action-icon:hover { opacity: 1; }
@media (max-width: 768px) {
    #chat-left-column { flex-basis: 70%; min-width: 70%; }
    #chat-right-column { flex-basis: 30%; min-width: 100px; }}
.reminder-modal .button-and-status-wrapper {
    display: flex; flex-direction: column;
    align-items: center; gap: 0.2rem; flex-shrink: 0;}
.reminder-modal .speech-status,
.reminder-modal .parse-status {
    font-size: 0.7rem; color: #8e8e93; text-align: center;
    min-height: 1em; width: 100%; margin-top: 0;}
.mapbox-control {
    display: flex; align-items: center; justify-content: center;
    padding: 0.3rem 0.6rem; background-color: rgba(200,200,180,0.7);
    border-radius: 5px; height: 60px; min-width: 70px;
    box-sizing: border-box; gap: 3px;}
#mapbox-primary-checkbox {
    margin-right: 0px; margin-bottom: 0px; transform: scale(1.1);}
.mapbox-label-container {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;}
#mapbox-primary-checkbox + .mapbox-label-container > label {
    font-weight: bold; font-size: 0.70rem; color: #333;
    cursor: pointer; text-align: center;
    line-height: 1.1; margin-bottom: 1px;}
.radar-speed-circle {
    border-radius: 50%; background-color: red;
    border: 3px solid white; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    color: yellow; font-weight: bold;
    font-family: Arial, sans-serif;
    text-shadow: 1px 2px 2px rgba(0,0,0,0.5);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));}
.radar-alert-circle {
    border-radius: 50%; background-color: red;
    border: 3px solid #e905f3; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));}
.radar-alert-circle img {
    width: 70%; height: 70%; object-fit: contain;}
.chat-poll-bubble {
    background-color: #3d3a4b; align-self: stretch;
    max-width: 95%; margin: 30px auto;
    border-radius: 12px; border: 1px solid #5a576b;
    position: relative; padding: 0.75rem 1rem 0.5rem 1rem;}
.poll-sender-info {
    display: flex; align-items: baseline; margin-bottom: 0.5rem; gap: 30px;}
.poll-sender-info .chat-message-sender {  color: #f0f0f0; opacity: 1;}
.poll-time { font-size: 0.75rem; color: #a0a0a0; }
.poll-question { font-size: 1.1rem; font-weight: bold; color: #ffd700; margin-bottom: 0.75rem; }
.poll-options-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.poll-option-item { display: flex; flex-direction: column; gap: 0.25rem;}
.poll-option-button {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.75rem; background-color: #4a475a;
    border: 1px solid #6a677a; border-radius: 6px;cursor: pointer;
    transition: background-color 0.2s, transform 0.1s; width: 100%;}
.poll-option-button:hover {
    background-color: #5a576a; transform: translateY(-1px);}
.poll-option-button.voted {
    background-color: #007aff; border-color: #0056b3; font-weight: bold;}
.poll-option-text { color: #f0f0f0; flex-grow: 1; text-align: left; }
.poll-vote-count {
    color: #f0f0f0; font-weight: bold;
    background-color: rgba(0,0,0,0.2);
    padding: 2px 8px; border-radius: 10px;
    min-width: 25px; text-align: center;}
.poll-progress-bar {
    width: 100%; height: 6px; background-color: #2c2a3b;
    border-radius: 3px; overflow: hidden;}
.poll-progress-fill {
    height: 100%; background-color: #007aff;
    border-radius: 3px; transition: width 0.3s ease-in-out;}
.poll-voters-container { padding: 4px 8px; margin-top: 2px; }
.poll-voter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.poll-voter-name {
    font-size: 0.7rem; color: #b0b0b0;
    background-color: rgba(0,0,0,0.15);padding: 1px 5px; border-radius: 4px;}
.poll-moderation-icons {
    position: absolute; top: 6px; right: 8px; display: flex; gap: 25px; background-color: transparent;}

#free-drive-stats-card {
    max-width: 300px;    width: 100%;   margin-left: auto;
    margin-right: auto;   padding: 8px 12px;
    color: white;  text-align: left;
    background-color: transparent;}
#free-drive-stats-card .fd-title {
    font-size: 0.8em; font-weight: bold;
    color: white;  margin: 0;
    padding: 0; line-height: 1.2;
    text-align: center; text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
    margin-bottom: 5px;}
#free-drive-stats-card .fd-subtitle {
    font-size: 0.5em; color: #cccccc;
    margin-bottom: 1px; text-align: center;}
#free-drive-stats-card .fd-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px; align-items: center;}
#free-drive-stats-card .fd-label {
    font-size: 0.65em;color: #dddddd;
    font-weight: bold;
    text-align: center;  font-weight: 500; margin-bottom: 0px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);}    
#free-drive-stats-card .fd-stat-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 0px;}
#free-drive-stats-card .fd-data {
    font-size: 1.1em; font-weight: bold;
    color: #87CEEB;   text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);}
#location-map-container.expanded .mapboxgl-canvas,
#location-picker-map-container.expanded .mapboxgl-canvas,
#reminders-location-map-div #mapbox-map-actual-container .mapboxgl-canvas {
    cursor: crosshair !important;}
#reminders-location-map-div.simulating-gps-click-mode #mapbox-map-actual-container .mapboxgl-canvas {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="%23FF0000" stroke="white" stroke-width="1"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>') 14 28, crosshair !important;}
#reminders-location-map-div.navigating #mapbox-map-actual-container .mapboxgl-canvas {
    cursor: default !important;}
#reminders-location-map-div.add-reminder-mode #mapbox-map-actual-container .mapboxgl-canvas {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="%23008000" stroke="white" stroke-width="1"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle><line x1="12" y1="7" x2="12" y2="13"></line><line x1="9" y1="10" x2="15" y2="10"></line></svg>') 14 28, crosshair !important;}
.mapboxgl-popup {
    max-width: 250px !important;  font-family: sans-serif;font-size: 0.9rem;}
.mapboxgl-popup-content {
    padding: 10px;  z-index: 10001; }
.mapboxgl-popup-close-button {
    font-size: 1.5rem; padding: 0 5px;}
.mapboxgl-marker.dragging {  cursor: grabbing;}
#reminders-location-map-modal {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100dvh; 
    background-color: #D8D8D0; z-index: 6500;
    display: flex;flex-direction: column;
    padding: 2px; box-sizing: border-box;}
#reminders-location-map-content-wrapper {
    background-color: #F0EFE4; width: 100%;
    border-radius: 0.75rem; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    flex-grow: 1;overflow: hidden;}
#reminders-location-map-header { flex-shrink: 0; }
#reminders-location-map-div { flex-grow: 1;  position: relative; overflow: hidden;}
#mapbox-map-actual-container {  width: 100%;   height: 100%; background-color: #333;}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl {   margin: 10px 10px 0 0;  float: none;}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-logo {   display: none !important;}
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group {   display: none;}
.map-control-custom-map-controls {
    display: flex;
    flex-direction: row; flex-wrap: nowrap !important;
    align-items: flex-end;
    gap: 7px; z-index: 1001;
    min-width: 0;}
.map-control-custom-map-controls > * {
    flex-shrink: 0 !important;min-width: 0 !important;}
.vehicle-maneuver-overlay {
    position: absolute;
    top: -25px;    left: 50%;    transform: translateX(-50%);
    width: 40px;   height: 40px;   background-size: contain;
    background-repeat: no-repeat;    background-position: center;
    display: none;}
.vehicle-icon-minimap {
    width: 48px;    height: 48px;    position: relative;}
.vehicle-icon-minimap img {
    width: 100%;   height: 100%;    object-fit: contain;}
.mapboxgl-canary { background-color: transparent !important;}
.map-combined-control-container .map-layer-selector,
.map-combined-control-container .map-view-selector {
    display: flex;   flex-direction: column; gap: 4px;}
.map-combined-control-container .map-view-selector {
    border-top: 1px solid rgba(255,255,255,0.2);
    margin-top: 6px;    padding-top: 6px;}
.map-combined-control-container {
    background: rgba(44, 44, 46, 0.35);
    color: white;
    padding: 8px 10px;    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);}   
.map-combined-control-container label {
    display: flex;    align-items: center;      cursor: pointer;
    font-weight: bold;   font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.2s;   border-radius: 4px;
    padding: 8px 8px;     }
.map-combined-control-container label:hover {
    background-color: rgba(255,255,255,0.15);}
.map-combined-control-container input[type="radio"] {
    margin-right: 8px;
    vertical-align: middle;    appearance: none;
    -webkit-appearance: none;
    background-color: #333;   border: 1px solid #888;
    width: 16px;   height: 16px;
    border-radius: 50%;   position: relative;
    cursor: pointer;}
.map-combined-control-container input[type="radio"]:checked {
    background-color: #2a82e0; border-color: #fff;}
.map-combined-control-container input[type="radio"]:checked::after {
    content: '';
    display: block;    width: 8px;    height: 8px;    border-radius: 50%;
    background: white;    position: absolute;
    top: 50%;    left: 50%;
    transform: translate(-50%, -50%);}
.map-item-modal-overlay {
    position: fixed;    top: 0;    left: 0;
    width: 100%;    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);z-index: 10002;
    display: flex;  justify-content: center;
    align-items: center;}
.map-item-modal-content {
    background-color: #E6D6A8;
    color: #333;   border-radius: 10px;  border: 1px solid #C0B080;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);padding: 15px;
    width: 90%;    max-width: 350px; font-family: sans-serif;}
.map-item-modal-content h3 {
    font-size: 1.2rem;   font-weight: bold;    margin: 0 0 8px 0;
    color: #1E3A8A;  word-wrap: break-word;}
.map-item-modal-content hr {
    border: none;    border-top: 1px solid #C0B080;margin: 10px 0;}
.map-item-modal-content p {margin: 5px 0;    font-size: 0.95rem;}
.map-item-modal-buttons {
    margin-top: 15px; display: flex; flex-wrap: wrap;    gap: 13px;
    justify-content: center;}
.map-item-modal-buttons button {
    padding: 14px 16px;    font-size: 1rem;    border: none;
    border-radius: 4px;    cursor: pointer;   font-weight: bold;
    color: white;    flex-grow: 1;min-width: 100px;}    
#map-info-overlay {
    position: absolute;
    top: 4px;right: 4px; z-index: 1001;
    background-color: transparent; 
    color: black;   font-weight: bold;             
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
    padding: 4px 8px; border-radius: 5px;  box-shadow: none; 
    max-width: 300px;  font-size: 0.9em;text-align: center; display: none;
    transition: opacity 0.3s ease-in-out;}
#map-info-overlay.error-overlay {
    background-color: rgba(220, 50, 50, 0.75) !important;color: white !important; 
    text-shadow: 1px 1px 2px black !important; }    
    
#reminders-location-map-modal.map-modal-hidden {
    display: flex;  visibility: hidden;    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;}
.toast-instructional {
    background-color: #CF7C00;     color: white; 
    font-size: 1.3rem;    font-weight: bold;
    border: 2px solid #FFCDD2;
    box-shadow: 0 6px 15px rgba(0,0,0,0.4); max-width: 600px;
    text-align: center;    line-height: 1.4;}  
/* === INICIO: NUEVOS ESTILOS PARA AGRUPAR CONTROLES DEL MAPA === */   
#toggle-progress-bar-lock {
    width: 36px;  height: 36px;
    display: flex; align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1); border-radius: 50%;
    transition: background-color 0.2s ease; position: absolute;
    top: 3px;  left: 3px; z-index: 2;}
#toggle-progress-bar-lock:hover { background-color: rgba(255, 255, 255, 0.3);}
#toggle-progress-bar-lock img {
    width: 28px;height: 28px;  object-fit: contain;}  
/* === REGLA MODIFICADA: AÑADIR TRANSICIÓN A LA BARRA DE PROGRESO === */
#navigation-bottom-progress-bar {
    position: absolute; top: 5px; left: 5px; transform: none;
    width: auto; max-width: 500px; min-width: 480px;
    background-color: rgba(0, 0, 0, 0.6); padding: 8px;
    border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 1001; color: white; display: none;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out, transform 0.8s ease-out; /* TRANSICIÓN AÑADIDA/MODIFICADA */}

/* === NUEVA REGLA: PARA DESLIZAR PARCIALMENTE LA BARRA DE PROGRESO === */
#navigation-bottom-progress-bar.progress-bar-partially-hidden {
    transform: translateY(-105px) !important;}    
#navigation-bottom-progress-bar hr {
    border: none;  border-top: 1px solid rgba(229, 209, 193, 0.5);
    margin: 10px 0;}
#navigation-top-info-bar .turn-icon-display img {
    width: 95% !important; height: 95% !important;
    background-size: contain; background-position: center;
    display: block; margin: auto; object-fit: contain;}
#navigation-bottom-progress-bar.progress-bar-auto-hidden {
    opacity: 0;    visibility: hidden;    transform: translateY(-100%);
    pointer-events: none;}
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {  margin: 0 0 5px 5px; }   
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 3px 5px 0; }    
/* === INICIO: CSS PARA MEJORAR SATURACIÓN Y CONTRASTE DEL MAPA (CON VARIABLES) === */
:root {
    --map-saturation: 1.6; 
    --map-contrast: 1.2;   }
.mapboxgl-canvas {
    filter: saturate(var(--map-saturation)) contrast(var(--map-contrast));}
/* === INICIO: ESTILOS PARA ESTADÍSTICAS DE ADMIN EN CHAT === */
.chat-admin-stats-header {
    padding: 8px; background-color: #3a3a3c;
    border-bottom: 1px solid #444;
    text-align: center; font-size: 0.9rem;
    font-weight: bold;   color: #ffd700;}
.mapboxgl-ctrl.map-combined-controls-wrapper {
    display: flex;
    flex-direction: row;    align-items: flex-end;  gap: 3px; 
    background-color: transparent !important;
    box-shadow: none !important;}
    
.mapboxgl-ctrl.map-combined-controls-wrapper {
    display: flex;
    flex-direction: row;    align-items: flex-end;  gap: 3px; 
    background-color: transparent !important;
    box-shadow: none !important;}
.control-button {
    width: 85px;
    height: 100%; background-color: rgba(42, 130, 224, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.6);  color: white;
    border-radius: 30px;   font-size: 35px;
    text-align: center;  cursor: pointer;  user-select: none;
    -webkit-user-select: none; transition: background-color 0.2s;
    display: flex; align-items: center;justify-content: center; flex-shrink: 0;}
.zoom-control-button {
    height: 100%; 
    aspect-ratio: 1 / 1;  background-color: rgba(42, 130, 224, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.6);  color: white;
    border-radius: 50%;   font-size: 42px; font-height: bold; 
    text-align: center;  cursor: pointer; user-select: none;
    -webkit-user-select: none; transition: background-color 0.2s;
    display: flex; align-items: center;
    justify-content: center;flex-shrink: 0;}    
.zoom-control-button:hover {  background-color: rgba(62, 150, 244, 0.4);}
#zoom-toggle-button img {  width: 30px;height: 30px;  object-fit: contain;}  
#zoom-toggle-button {   background-color: white;}
#zoom-toggle-button:hover {  background-color: #e0e0e0; }    

.saved-locations-modal {
    background-color: #2c2c2e;   color: #f0f0f0;    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    border: 1px solid #444;   padding: 1rem;
    height: calc(100dvh - 30px);   max-height: calc(100dvh - 30px);
    display: flex;   flex-direction: column;}
.saved-locations-modal h2 {
    color: white;font-size: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    border-bottom: 1px solid #444; padding-bottom: 0.75rem;}
.saved-locations-modal #saved-locations-list {
    flex-grow: 1; overflow-y: auto; margin-bottom: 1rem;
    padding-right: 10px;  background-color: transparent; border: none;}
.saved-locations-modal .location-slot {
    display: flex;  align-items: stretch;  gap: 0.75rem; 
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #3a3a3c;
    padding-bottom: 0.75rem;}
.saved-locations-modal .location-slot:last-child { border-bottom: none;}
.saved-locations-modal .location-slot span:first-child {align-self: center;}
.saved-locations-modal .location-slot input[type="text"] {
    background-color: #3a3a3c;   border: 1px solid #555; color: #f0f0f0;
    border-radius: 8px; font-size: 1.1rem; font-weight: bold;
    min-height: 55px; }
.saved-locations-modal .location-slot button {
    height: auto;   min-height: 55px; border-radius: 8px;border: none;
    font-weight: bold;  font-size: 1rem;
    transition: opacity 0.2s;}
.saved-locations-modal .location-slot button:hover {   opacity: 0.85;}
.saved-locations-modal .location-slot button.map-button {
    background-color: #007aff;   color: white;}
.saved-locations-modal .location-slot button.select-location-button {
    background-color: #34c759;  color: white;}
.saved-locations-modal .location-slot .coords-display {
    color: #a0a0a0; align-self: center; font-size: 0.9rem;}
.saved-locations-modal #save-all-user-locations {
    background-color: #007aff;
    color: white;   font-weight: bold; border-radius: 8px;}
.saved-locations-modal #save-all-user-locations:hover {
    background-color: #0056b3;}
.saved-locations-modal #close-saved-locations-modal {
    background-color: #555;   color: white; font-weight: bold;
    border-radius: 8px;}
.saved-locations-modal #close-saved-locations-modal:hover {
    background-color: #444;}

#saved-routes-modal,
#save-route-prompt-modal { }
.route-modal-container {
    background-color: #2c2c2e; color: #f0f0f0; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);border: 1px solid #444;
    overflow: hidden;  display: flex;   flex-direction: column;
    width: 100%; max-width: 750px;
    max-height: calc(100vh - 30px);}
.route-modal-header {
    height: 120px;
    background-image: url('https://boardinggate.github.io/Tesla/PNG/modalrutas.png');
    background-size: cover;
    background-position: center;  position: relative;
    display: flex;align-items: flex-start;
    padding: 0;}    
.route-modal-header::before {
    content: '';position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);}
.route-modal-title-card {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 14px;border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);  position: relative;
    z-index: 1;  margin: 15px;}
.route-modal-title {
    font-size: 1.6rem;   font-weight: bold; color: white;}
.route-modal-body {
    padding: 15px 20px;
    flex-grow: 1; overflow-y: hidden;
    display: flex;flex-direction: column;}
.route-modal-controls {
    display: flex; gap: 10px;  margin-bottom: 15px;
    align-items: center; position: relative;}
.route-modal-body p {
    font-size: 1rem; color: #b0b0b0;  margin-bottom: 8px; line-height: 1.5;}
.route-modal-body p strong {color: #f0f0f0;  font-weight: bold;}
.route-modal-body .route-label {
    display: block; margin-bottom: 8px;
    font-weight: 500; color: #a0a0a0; font-size: 1rem;}
.route-filter-input {
    flex-grow: 1;  padding: 12px 40px 12px 15px;
    height: 50px;border: 1px solid #555;  border-radius: 8px;
    font-size: 1.1rem; font-weight: 500;
    background-color: #3a3a3c; color: #f0f0f0;
    display: flex;  align-items: center;}
.route-filter-input::placeholder { color: #8e8e93; }
.route-scroll-container {
    flex-grow: 1; overflow-y: auto; padding-right: 5px;}
.routes-section-title {
    font-size: 1.1rem; font-weight: bold;  color: #007aff;
    margin-top: 15px; margin-bottom: 8px; padding-bottom: 5px;
    border-bottom: 1px solid #444;}
.routes-section-title:first-child { margin-top: 0;}
.route-list {  list-style: none;  padding: 0;    margin: 0;}
.route-list-item:hover {   background-color: #4a4a4a;}
.route-list-empty {
    color: #8e8e93; text-align: center; padding: 20px; font-style: italic;}
.route-name {
    flex-grow: 1;cursor: pointer; font-size: 1.1rem;
    font-weight: bold; color: #f0f0f0;}
.route-actions {
    display: flex;gap: 10px;flex-shrink: 0; margin-left: 15px;}
.btn-return, .btn-share, .btn-delete {
    font-size: 0.95rem;  padding: 6px 14px;
    border-radius: 6px; border: none;
    cursor: pointer; font-weight: bold;
    color: white; transition: transform 0.1s ease, opacity 0.2s;}
.btn-return:hover, .btn-share:hover, .btn-delete:hover {
    transform: scale(1.05); opacity: 0.9;}
.btn-return { background-color: #077a09; }
.btn-delete { background-color: #ff3b30; }
.btn-share { background-color: #6e700a; }
.route-modal-footer {
    display: flex; gap: 1rem; padding: 15px 20px;
    border-top: 1px solid #444;   background-color: #1c1c1e;}
.route-modal-footer button {
    flex: 1;  padding: 12px;
    font-size: 1.1rem; font-weight: bold;border-radius: 8px;
    cursor: pointer;  border: none; transition: opacity 0.2s;
    display: flex;  align-items: center;  justify-content: center;}
.route-modal-footer button .button-countdown-timer {
    font-size: 1rem; font-weight: normal; opacity: 0.8;
     background-color: rgba(255,255,255,0.2);
    padding: 2px 6px; border-radius: 10px; margin-left: 8px;}
.route-modal-footer button:hover {opacity: 0.85;}
.btn-modal-save,
.btn-modal-action-primary { background-color: #007aff;   color: white;}
.btn-modal-cancel,
.btn-modal-action-secondary {background-color: #555; color: white;}
.btn-modal-favorite { background-color: #917b96;color: white;}
.btn-modal-danger { background-color: #ff3b30;   color: white;}
.route-label-marker {
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: white; font-weight: bold;
    font-size: 14px; font-family: Arial, sans-serif;
    text-align: center; box-shadow: 0 0 5px rgba(0,0,0,0.7);
    border: 2px solid white; cursor: pointer;
    transition: transform 0.2s ease; width: 40px; height: 40px;}
.route-label-marker:hover {    transform: scale(1.1);}

.reminder-table-modal {
    background-color: #2c2c2e; color: #f0f0f0; border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6); border: 1px solid #444;
    padding: 0;
    display: flex; flex-direction: column;
    width: 95%; max-width: 1200px;
    height: 95vh; max-height: 95vh;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    overflow: hidden;}
.reminder-table-header {
    height: 120px;
    background-image: url('https://boardinggate.github.io/Tesla/PNG/modalrutas.png');
    background-size: cover; background-position: center;
    position: relative; flex-shrink: 0;
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding: 1rem 1.5rem;}
.reminder-table-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);}
.reminder-table-modal .reminder-table-top-controls {
    display: flex; justify-content: space-between; align-items: left;
    position: relative; z-index: 1;}
.reminder-table-modal h2 {
    font-size: 2.2rem !important; font-weight: bold !important; color: white !important;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    position: relative; z-index: 1;
    text-align: left; margin: 0;
    padding-bottom: 0.5rem;}
.reminder-table-modal .reminder-table-top-controls label {
    color: #e0e0e0; font-weight: bold;}
.reminder-table-modal .reminder-table-top-controls button {
    font-weight: bold; border-radius: 8px;
    transition: background-color 0.2s, opacity 0.2s;
    min-height: 50px;}
.reminder-table-modal #view-all-locations-map {   background-color: #007aff; color: white; border: none;}
.reminder-table-modal #view-all-locations-map:hover { background-color: #0056b3;}
.reminder-table-modal #close-reminders-top {  background-color: #555; color: white; border: none;}
.reminder-table-modal #close-reminders-top:hover {  background-color: #444;}

.reminder-table-body-container {
    flex-grow: 1; overflow-y: auto; padding: 0.5rem 1.5rem 1.5rem 1.5rem;}
.reminder-table-modal table {
    border-collapse: separate; border-spacing: 0;}
.reminder-table-modal th {
    background-color: #3a3a3c; color: #f0f0f0; border-color: #444; border-bottom-width: 2px;}
.reminder-table-modal td {
    border: none;  border-bottom: 1px solid #0fd978;  color: #e0e0e0;}
.reminder-table-modal tbody tr:last-child td {  border-bottom: none;}
.reminder-table-modal tbody tr {transition: background-color 0.15s ease;}
.reminder-table-modal tbody tr:hover {background-color: #48484a !important;}
.reminder-table-modal td:first-child { border: none;}
.reminder-table-modal td:first-child button {
    border-radius: 6px;font-weight: bold;
    color: white;   border: none;
    transition: opacity 0.2s;}
.reminder-table-modal td:first-child button:hover {  opacity: 0.85;}
.reminder-table-modal .visto-prox { background-color: #ff3b30; }
.reminder-table-modal .postpone { background-color: #ff9500; }
.reminder-table-modal .cancel-cyclic-table { background-color: #8B0000; }
.reminder-table-modal button.modify { background-color: #34c759; }
.reminder-table-modal .bottom-button-container {
    display: none;}

.poi-modal-overlay {
    position: fixed; inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10005;
    display: flex; justify-content: center; align-items: center;
    padding: 15px;}
.poi-modal-content {
    background-color: #2c2c2e; color: #f0f0f0;
    border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #444;
    width: 100%; max-width: 750px; 
    max-height: 95vh; 
    display: flex; flex-direction: column; overflow: hidden;}    

.poi-modal-header {
    height: 140px;
    background-image: url('https://boardinggate.github.io/Tesla/PNG/modal-poi-header.jpg');
    background-size: cover; background-position: center;
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9);}

.poi-modal-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);}
.poi-modal-title {
    font-size: 1.6rem; font-weight: bold; color: white;
    position: relative; z-index: 1; line-height: 1.2;}
.poi-modal-address {
    font-size: 0.9rem; color: #c7c7cc;
    position: relative; z-index: 1; margin-top: 4px;}
.poi-modal-body {
    padding: 1rem;
    max-height: calc(90vh - 300px); /* Ajusta la altura máxima para el scroll */
    overflow-y: auto;}
.poi-modal-info-section {   margin-bottom: 1rem;}

.poi-modal-info-section h4 {
    font-size: 0.8rem; font-weight: bold; color: #8e8e93;
    text-transform: uppercase; margin-bottom: 0.5rem;
    border-bottom: 1px solid #444; padding-bottom: 0.25rem;}
.poi-modal-info-section p,
.poi-modal-info-section a {
    font-size: 1rem; color: #f0f0f0; margin: 0;  line-height: 1.5;}

.poi-modal-info-section a {
    color: #0a84ff; text-decoration: none;  word-break: break-all;}
.poi-modal-info-section a:hover {text-decoration: underline;}
.poi-modal-footer {
    padding: 1rem; border-top: 1px solid #444;
    background-color: #1c1c1e;  display: grid;
    grid-template-columns: 1fr 1fr; gap: 0.75rem;}
.poi-modal-footer button {
    padding: 12px; font-size: 1rem; font-weight: bold;
    border-radius: 8px; border: none; cursor: pointer;
    transition: opacity 0.2s;}
.poi-modal-footer button:hover {opacity: 0.85;}    

/* --- NUEVOS ESTILOS PARA EL CONTROL DE INCLINACIÓN (PITCH) --- */
.pitch-control-button {
    background: none;
    border: none;padding: 0;
    cursor: pointer;
    color: white; opacity: 0.8;
    transition: opacity 0.2s, transform 0.1s;}
.pitch-control-button:hover {opacity: 1;}
.pitch-control-button:active { transform: scale(0.9);}
.pitch-control-button svg {
    width: 32px; height: 24px;  stroke-width: 2.5;}

.map-settings-popup {
    display: flex; flex-direction: row;   gap: 10px;padding: 10px;
    background: rgba(44, 44, 46, 0.85);  border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);  backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);   opacity: 0;
    visibility: hidden; transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;}

.map-settings-popup.visible {
    opacity: 1;visibility: visible; transform: translateY(0);}
.map-settings-popup .map-layer-selector,
.map-settings-popup .map-view-selector {
    display: flex;flex-direction: column;gap: 5px;}
.map-settings-popup .separator {
    width: 1px;background-color: rgba(255, 255, 255, 0.2);  margin: 0 5px;}

.map-settings-popup label {
    display: flex; align-items: center;  padding: 6px 8px; cursor: pointer;
    font-weight: 500;font-size: 0.9rem;white-space: nowrap;
    transition: background-color 0.2s; border-radius: 4px;  color: #e0e0e0;}
.map-settings-popup label:hover {  background-color: rgba(255,255,255,0.15);}
.map-settings-popup input[type="radio"] {
    margin-right: 8px;
    vertical-align: middle;appearance: none;
    -webkit-appearance: none;
    background-color: #333;border: 1px solid #888;
    width: 16px; height: 16px;  border-radius: 50%;
    position: relative; cursor: pointer;}

.map-settings-popup input[type="radio"]:checked {
    background-color: #2a82e0; border-color: #fff;}

.map-settings-popup input[type="radio"]:checked::after {
    content: '';
    display: block;width: 8px; height: 8px; border-radius: 50%;
    background: white; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);}
#mini-nav-info-card {
    position: absolute;
    top: 10px;   left: 10px; z-index: 1012;
    background-color: rgba(40, 40, 40, 0.3); 
    color: #E0E0E0;  font-weight: bold;
    font-size: 1.5em; padding: 4px 10px;
    border-radius: 8px;  pointer-events: none;
    display: none; 
    text-shadow: 
        0 0 5px black,  /* Desenfoque principal */
        0 0 8px black,  /* Desenfoque más amplio */
        1px 1px 2px black; /* Sombra sólida ligera para definir bordes */
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);  text-align: center;}
#route-modal-save-overlay {
    justify-content: flex-start;   align-items: flex-start;   }    
.mapboxgl-ctrl.map-controls-bottom-right {
    display: flex;flex-direction: column;  align-items: flex-end;
    gap: 8px; background-color: transparent !important;
    box-shadow: none !important;}
#zoom-controls-horizontal {
    display: flex;flex-direction: row;align-items: center;
    gap: 6px;  background-color: rgba(0, 0, 0, 0.3);
    border-radius: 28px;  padding: 3px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);}
.zoom-control-button {
    width: 60px; height: 60px;
    background-color: rgba(42, 130, 224, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: white;border-radius: 50%;font-size: 28px;
    text-align: center;cursor: pointer; user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.2s;display: flex;
    align-items: center;  justify-content: center;  flex-shrink: 0;}
.zoom-control-button:hover { background-color: rgba(62, 150, 244, 0.4);}
#zoom-level-display {
    color: white; font-size: 1.2rem;font-weight: bold;   padding: 0 8px;
    text-shadow: 1px 1px 2px black; min-width: 40px;
    text-align: center;}
#zoom-auto-button {
    font-size: 1rem; font-weight: bold;  line-height: 1;
    background-color: #6c757d;}

#zoom-toggle-button img,
#map-settings-toggle-button img,
#map-offset-toggle-button img { /* Añadido #map-offset-toggle-button */
    width: 45px; height: 45px; object-fit: contain;}
#zoom-toggle-button { background-color: white; }
#zoom-toggle-button:hover { background-color: #e0e0e0; }
#map-settings-toggle-button { background-color: rgba(236, 255, 173, 0.7);}
#map-settings-toggle-button:hover { background-color: rgba(201, 204, 200, 0.7);   }
.map-settings-popup {
    display: flex; flex-direction: row;   gap: 10px;padding: 10px;
    background: rgba(44, 44, 46, 0.85);  border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);  backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);   opacity: 0;
    visibility: hidden; transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;}
.map-settings-popup.visible {
    opacity: 1;visibility: visible; transform: translateY(0);}
.map-settings-popup .map-layer-selector,
.map-settings-popup .map-view-selector {
    display: flex;flex-direction: column;gap: 5px;}
.map-settings-popup .separator {
    width: 1px;background-color: rgba(255, 255, 255, 0.2);  margin: 0 5px;}
.map-settings-popup label {
    display: flex; align-items: center;  padding: 8px 10px; cursor: pointer; /* Aumentado de 6px 8px */
    font-weight: 500;font-size: 1rem;white-space: nowrap; /* Aumentado de 0.9rem */
    transition: background-color 0.2s; border-radius: 4px;  color: #e0e0e0;}
.map-settings-popup label:hover {  background-color: rgba(255,255,255,0.15);}
.map-settings-popup input[type="radio"] {
    margin-right: 8px;
    vertical-align: middle;appearance: none;
    -webkit-appearance: none;
    background-color: #333;border: 1px solid #888;
    width: 19px; height: 19px;  border-radius: 50%; /* Aumentado de 16px */
    position: relative; cursor: pointer;}
.map-settings-popup input[type="radio"]:checked {
    background-color: #2a82e0; border-color: #fff;}
.map-settings-popup input[type="radio"]:checked::after {
    content: '';
    display: block;width: 10px; height: 10px; border-radius: 50%; /* Aumentado de 8px */
    background: white; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);}
#map-offset-toggle-button { background-color: white;}
#map-offset-toggle-button:hover {   background-color: #e0e0e0; }
.map-offset-popup {
    display: flex; flex-direction: row; align-items: center; gap: 0px; padding: 10px;
    background: rgba(44, 44, 46, 0.85);  border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);  backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);   opacity: 0;
    visibility: hidden; transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;}
.map-offset-popup.visible {
    opacity: 1;visibility: visible; transform: translateY(0);}
.map-offset-popup .crosshair-container {
    display: grid;
    grid-template-columns: 48px 70px 48px; 
    grid-template-rows: 48px 48px 48px;    
    align-items: center; justify-items: center;}
.map-offset-popup .offset-arrow {
    width: 43px; height: 43px; 
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s;}
.map-offset-popup .offset-arrow:hover { background-color: rgba(255, 255, 255, 0.4); }
.map-offset-popup .offset-arrow svg { width: 29px; height: 29px; stroke: white; stroke-width: 2.5; } /* Aumentado de 24px */

.map-offset-popup #offset-arrow-up { grid-column: 2; grid-row: 1; }
.map-offset-popup #offset-arrow-down { grid-column: 2; grid-row: 3; }
.map-offset-popup #offset-arrow-left { grid-column: 1; grid-row: 2; }
.map-offset-popup #offset-arrow-right { grid-column: 3; grid-row: 2; }

.map-offset-popup #minimap-toggle-container {
    grid-column: 2; grid-row: 2;
    display: flex; flex-direction: column; align-items: center;  gap: 4px;}
.map-offset-popup #minimap-toggle-container input {
    width: 20px; height: 20px; margin: 0; }
.map-offset-popup #minimap-toggle-container label {
    font-size: 0.9rem; font-weight: bold; color: white; cursor: pointer; }
.offset-popup-separator {
    width: 1px; align-self: stretch;
    background-color: rgba(255, 255, 255, 0.2); margin: 0 12px;}
.pitch-controls-container {
    display: flex; flex-direction: column;
    justify-content: space-between; align-items: center;
    gap: 10px;  height: 100%;}
.pitch-value-display {
    font-size: 1.1rem;  font-weight: bold; color: white;}
.route-modal-tabs {
    display: flex; background-color: #1c1c1e;
    border-bottom: 1px solid #444;flex-shrink: 0; }
.route-modal-tab {
    flex: 1;  padding: 12px; text-align: center;  font-weight: bold;
    cursor: pointer;
    border: none;    background-color: transparent;  border-bottom: 3px solid transparent;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    color: #a0a0a0;
    font-size: 1rem; }
.route-modal-tab:hover { background-color: #3a3a3c;}
.route-modal-tab.active { border-bottom-color: #007aff;color: white;}
.route-modal-panel { display: none; }
.route-modal-panel.active {display: block; }
/* === INICIO: CORRECCIÓN COMPLETA PARA PERMITIR ARRASTRE Y ZOOM SOBRE CONTROLES === */
.mapboxgl-ctrl.map-controls-bottom-right {
    pointer-events: none;}
.mapboxgl-ctrl.map-controls-bottom-right > * {  pointer-events: auto;}
#zoom-controls-horizontal { pointer-events: auto; }
#zoom-controls-horizontal > .zoom-control-button { pointer-events: auto; }
.offset-value-display {
    position: absolute;
    font-size: 1.1rem;  font-weight: bold;  color: #f0f0f0; 
    white-space: nowrap;
    background-color: rgba(0,0,0,1);  padding: 2px 6px;  border-radius: 4px;
    pointer-events: none; opacity: 0.9; 
    text-shadow: 1px 1px 2px rgba(0,0,0,1); }
.offset-value-display.vertical {
    top: 0;left: 50%;
    transform: translate(-50%, -142%); }
.offset-value-display.horizontal {
    left: 0; top: 50%;
    transform: translate(-117%, -50%);}
#locations-preview-modal {
    position: fixed; top: 0; left: 0;  width: 100%; height: 100%;
    background-color: #DAC8A0; z-index: 8500;
    display: flex; flex-direction: column;
    padding: 10px; box-sizing: border-box;}
#locations-preview-map-container {
    flex-grow: 1; border: 1px solid #A09888;
    border-radius: 0.5rem; margin-bottom: 10px;min-height: 200px;}
#locations-preview-modal h2 {
    font-size: 1.2rem; font-weight: bold; text-align: center;
    margin-bottom: 10px; color: #333; flex-shrink: 0;}
#locations-preview-modal .modal-top-buttons {
    flex-shrink: 0; display: flex;
    justify-content: center; margin-top: 0;}
#close-locations-preview {
    padding: 0.8rem 2rem; font-size: 1.2rem; background-color: #4A5568; color: white;
    border: 1px solid #2D3748; border-radius: 8px;
    cursor: pointer; font-weight: bold;width: auto; min-width: 150px;}
#close-locations-preview:hover {  background-color: #2D3748;}
body.mobile-view #locations-preview-modal { z-index: 11000 !important;}
/* --- Estilos del Tema Oscuro (Específicos del Modal) --- */
#locations-preview-modal {
    background-color: #2c2c2e; color: #f0f0f0; border: 1px solid #444;}
#locations-preview-modal h2 {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    border-bottom: 1px solid #444; padding-bottom: 10px;}
#locations-preview-map-container {  border: 1px solid #444;}
#close-locations-preview {
    background-color: #555; color: white; border: none;}
#close-locations-preview:hover {
    background-color: #444;}
#zoom-locate-me-button {
    position: relative; background-color: white;}
#zoom-locate-me-button:hover { background-color: #e0e0e0;}
#zoom-locate-me-button img {
    width: 45px;  height: 45px;   object-fit: contain;}
#zoom-locate-me-button .countdown-overlay {
    position: absolute;  top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #FF3333;  font-size: 1.7rem; font-weight: bold;
    text-shadow: 0 0 3px yellow, 0 0 5px yellow, 0 0 8px gold;
    pointer-events: none;  z-index: 10;}    
/* === INICIO: CSS PARA ICONO DE VEHÍCULO EN MINIMAPA (MAPBOX) === */
.vehicle-icon-minimap {
    width: 48px;  height: 48px;  position: relative;}
.vehicle-icon-minimap img {
    width: 100%;  height: 100%;  object-fit: contain;}
.vehicle-maneuver-overlay-minimap {
    position: absolute;
    top: -20px;   left: 50%;   transform: translateX(-50%);
    width: 32px;   height: 32px;   background-size: contain;
    background-repeat: no-repeat;  background-position: center;
    display: none;}  
#intersection-preview-map-window {   transition: opacity 0.25s ease-in-out;}
#intersection-preview-map-window.rendering {
    opacity: 0;
    pointer-events: none; }
.radius-control-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 15px;}
.reminder-modal .slider-btn,
.help-modal .slider-btn {
    flex-shrink: 0;  width: 50px; height: 50px;
    min-width: 50px;  /* Sobrescribe el min-width: 100px general */
    min-height: 50px; /* Sobrescribe el min-height: 60px general */
    background-color: #007aff; 
    color: white;  border: 1px solid #0056b3; 
    border-radius: 50%;   cursor: pointer;
    font-size: 32px;    font-weight: bold;
    line-height: 35px; text-align: center;
    padding: 0; user-select: none;  -webkit-user-select: none;
    transition: background-color 0.2s, transform 0.1s;
    flex-grow: 0; }
.reminder-modal .slider-btn:active,
.help-modal .slider-btn:active {  background-color: #0056b3; transform: scale(0.95);}
.unified-countdown-style {
    display: inline-block; font-size: 0.9rem !important;
    font-weight: bold !important;   opacity: 0.8;
    background-color: rgba(29, 125, 71, 0.3);
    color: white;  padding: 2px 8px;
    border-radius: 12px; margin-left: 8px;
    line-height: 1.2;}
.reminder-modal .radius-slider-group {
    flex-grow: 1; display: flex;
    align-items: center;gap: 0; }
.reminder-modal .radius-slider-group .slider-container {flex-grow: 1; }
#arrival-stats-accept-button {
    background-color: transparent !important;  color: white !important;
    border: 1px solid #943232 !important; padding: 12px 10px;
    font-size: 1.2rem; border: 2px solid rgba(255, 255, 255, 0.5) !important;
    font-weight: bold;  border-radius: 8px; cursor: pointer;
    outline: none !important; box-shadow: none !important;
    transition: background-color 0.2s, border-color 0.2s;}
#arrival-stats-accept-button:hover {
    background-color: #0056b3 !important; }
#route-modal-load-overlay {
    justify-content: flex-start;    align-items: flex-start;     padding: 20px;              }
#clear-map-search-input-button {
    display: flex; align-items: center; justify-content: center;   padding: 0; }
#clear-map-search-input-button svg {
    width: 95%;   height: 95%;
    stroke: #FF0000;   stroke-width: 6; }
body.dark-mode #clear-map-search-input-button svg {  stroke: #FF4D4D; }
.mapboxgl-ctrl.map-control-custom-map-controls {
    position: absolute !important;
    bottom: 5px !important;  left: 5px !important;    margin: 0 !important;      
    display: flex;   flex-direction: row;       
    align-items: flex-end;   gap: 7px;       }
#orientation-text {  margin-bottom: 9px; }
#compass-rose-icon {
    width: 100px; height: 100px; display: block;
    margin: 0 auto 2px auto; margin-bottom: 5px; transition: transform 0.3s ease-out;}
.map-control-orientation-altitude {
    background-color: rgba(0,0,0,0.7); border-radius: 12px !important;
    color: white;   padding: 8px;   border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.40);  text-align: center;   display: flex;
    flex-direction: column;   align-items: center;  box-sizing: border-box;  cursor: pointer;
    width: 135px; font-weight: bold;
    height: 180px; justify-content: flex-end;   padding-bottom: 10px; }
.vehicle-icon-mapbox-container {
    width: 48px;  height: 48px;   position: relative; }
.vehicle-icon-mapbox-container .vehicle-icon-wrapper {
    width: 100%; height: 100%; display: flex;
    align-items: center; justify-content: center;}
.vehicle-icon-mapbox-container img {width: 100%; height: 100%; object-fit: contain; }
#auto-start-nav-modal .auto-start-title {
    font-size: 1.2rem; font-weight: bold;
    text-align: center; color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
#auto-start-nav-modal .info-text {font-size: 0.8rem; line-height: 1.4; color: #b0b0b0; text-align: center;}
#deviation-modal {
    position: fixed; top: 10px;  left: 10px; transform: none;
    background-color: #2c2c2e; color: #f0f0f0;
    border-radius: 14px; border: 1px solid #444;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    padding: 1.5rem; width: 90%; max-width: 500px;
    z-index: 9000; text-align: center;
    display: flex; flex-direction: column;}
#deviation-modal h2 {
    font-size: 1.6rem; font-weight: bold;
    margin-bottom: 0.5rem; color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
#deviation-modal p#deviation-modal-message {
    font-size: 1rem; line-height: 1.5;
    margin-bottom: 1.5rem; color: #b0b0b0;}
#deviation-modal .deviation-options-container {display: flex; flex-direction: column;  gap: 0.75rem;}
#deviation-modal .stage-list-scroll-container {
    max-height: 150px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.5rem; margin: 0.5rem 0;
    background-color: rgba(0,0,0,0.15); border-radius: 8px;}
#deviation-modal button {
    padding: 12px; font-size: 1.1rem;
    font-weight: bold; border-radius: 8px;
    border: none; cursor: pointer;transition: opacity 0.2s;}
#deviation-modal button:hover { opacity: 0.85; }
#deviation-modal .btn-modal-action-primary { background-color: #007aff; color: white; }
#deviation-modal .btn-modal-action-secondary { background-color: #555; color: white; }
#deviation-modal .btn-modal-danger { background-color: #ff3b30; color: white; }
#deviation-modal #scroll-hint-text {
    font-size: 0.8rem; font-style: italic;
    color: #8e8e93; margin-top: 5px;  display: none;}
#auto-start-nav-modal button {
    padding: 12px; font-size: 1.1rem;
    font-weight: bold; border: none;
    border-radius: 8px; cursor: pointer;
    transition: opacity 0.2s;}
#auto-start-nav-modal button:hover { opacity: 0.85; }
#auto-start-nav-modal { background-color: #34c759; color: white; }
#auto-start-nav-modal #start-and-add-reminder-button { background-color: #007aff; color: white; }
#auto-start-nav-modal #cancel-start-nav { background-color: #555; color: white; }
#reorder-stages-modal {
    position: fixed !important;
    top: 5px !important;       left: 5px !important;     
    transform: none !important;
    width: calc(100vw - 20px) !important;    
    height: calc(100vh - 20px) !important;
    max-width: none !important;
    max-height: none !important; z-index: 8600 !important;
    display: flex; flex-direction: column;
    background-color: #2c2c2e; color: #f0f0f0;
    border-radius: 14px; border: 1px solid #444;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6); padding: 1.5rem;} 
#reorder-stages-modal .drag-handle img {  filter: invert(1) brightness(1.5);}
#reorder-stages-modal h2 { color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
#reorder-stages-modal p { color: #b0b0b0; }
#reorder-stages-modal #confirm-reorder-stages { background-color: #34c759; color: white; }
#reorder-stages-modal #cancel-reorder-stages { background-color: #555; color: white; }
#sortable-stages-list {
    flex-grow: 1; max-height: calc(100% - 130px); overflow-y: auto;
    -webkit-overflow-scrolling: touch; touch-action: pan-y;
    padding: 0.5rem; margin: 0; list-style-type: none;
    background-color: #1c1c1e; border-radius: 8px;}
#sortable-stages-list li {
    padding: 15px; min-height: 60px;
    background-color: #3a3a3c; color: #f0f0f0;
    border-bottom: 1px solid #444;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: grab; user-select: none;
    display: flex; align-items: center; gap: 12px;
    border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-bottom: 10px;}
#sortable-stages-list li:hover:not(.dragging) { background-color: #4a4a4a; }
#sortable-stages-list li:last-child { border-bottom: none; margin-bottom: 0; }
#sortable-stages-list li.dragging { opacity: 0.7; background-color: #5856d6; box-shadow: 0 4px 8px rgba(0,0,0,0.4); }
.stage-name-text { color: #f0f0f0; }
.delete-stage-button { color: #ff3b30; }
.delete-stage-button:hover { color: #ff453a; }
#address-suggestions-modal {
    position: fixed; left: 5%; width: 90%; transform: none;
    background-color: #2c2c2e; padding: 1rem;
    border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.6);
    z-index: 11005 !important; 
    display: flex; flex-direction: column;
    border: 1px solid #444;}
#address-suggestions-modal h2 { color: white; }
#address-suggestions-list {
    list-style: none; padding: 0; margin: 0 0 0.75rem 0;
    overflow-y: auto; border: 1px solid #444;
    border-radius: 8px; background-color: #1c1c1e;}
#address-suggestions-list li {
    padding: 10px 15px; border-bottom: 1px solid #444;
    cursor: pointer; font-size: 1.1rem; font-weight: 500;
    color: #f0f0f0; background-color: #3a3a3c;}
.slider-track { background-color: #444; }
.slider-range { background-color: #007aff; }
.slider-thumb { border-color: #007aff; }
.filter-help-text, .ocm-modal-info-footer { color: #8e8e93; border-top-color: #444; }
#simulation-modal #close-simulation-modal { background-color: #555; }
#simulation-modal #close-simulation-modal:hover { background-color: #444; height: auto; }
#simulation-content-area {
    overflow-y: auto; margin-bottom: 1rem; padding: 0.5rem;
    background-color: #1c1c1e; border: 1px solid #444;
    border-radius: 8px; min-height: 150px;
    font-size: 0.9rem; line-height: 1.4; flex-grow: 1;}
#simulation-content-area ul { list-style-type: none; padding-left: 0; }
#simulation-content-area li:last-child { border-bottom: none; }
#alert-modal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    z-index: 8000;}
#alert-modal-content {
    position: fixed; top: 25px; left: 25px;
    background-color: #2c2c2e; padding: 1.5rem;
    border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border: 1px solid #444;}
#alert-columns-container { display: flex; gap: 1rem; }
.alert-column {
    display: flex; flex-direction: column; gap: 0.8rem;}
.alert-option, #alert-cancel-button {
    display: flex; align-items: center; padding: 0.75rem 1.25rem;
    background-color: #3a3a3c; border: 1px solid #555;
    border-radius: 8px; cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    width: 100%;}
.alert-option:hover {background-color: #007aff; transform: translateY(-2px);}
.alert-option img {
    width: 80px; height: 80px;
    margin-right: 1rem; object-fit: contain;}
.alert-option span {font-size: 1.4rem; font-weight: bold; color: #f0f0f0;}
#alert-cancel-button {
    background-color: #555;
    justify-content: center; margin-top: auto;}
#alert-cancel-button:hover { background-color: #444; }
#alert-cancel-button span {
    color: white !important; font-weight: bold !important;}
.filter-modal-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex; justify-content: flex-start; align-items: flex-start;
    padding-top: 10px; padding-left: 10px;}
.filter-modal-content {
    background-color: #2c2c2e; padding: 20px;
    border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border: 1px solid #444;
    width: 90%; max-width: 500px; text-align: center; color: #f0f0f0;}
.filter-modal-content h2 {
    font-size: 1.5rem; font-weight: bold; color: white;
    margin-bottom: 20px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
.filter-group { margin-bottom: 20px; }
.filter-group label {
    display: block; font-weight: bold; color: #a0a0a0;
    margin-bottom: 15px; font-size: 1.1rem;}
#operator-filter-input {
    width: 100%; padding: 10px 35px 10px 12px; font-size: 1.1rem;
    border-radius: 8px; border: 1px solid #555;
    background-color: #3a3a3c; color: #f0f0f0;}
#clear-operator-filter {
    position: absolute; right: 5px; top: 50%;
    transform: translateY(-50%); background: none; border: none;
    font-size: 1.8rem; color: #aaa; cursor: pointer; padding: 0 5px;}
.slider-container {
    position: relative; width: 90%; margin: 0 auto; height: 30px;}
.slider-track, .slider-range {
    position: absolute; height: 5px;
    border-radius: 3px; top: 12.5px; width: 100%;}
.slider-track { background-color: #444; z-index: 1; }
.slider-range { background-color: #007aff; z-index: 2; }
.slider-thumb {
    position: absolute; width: 25px; height: 25px;
    background-color: white; border: 2px solid #007aff;
    border-radius: 50%; top: 2.5px; z-index: 3;
    cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.slider-thumb.left { transform: translateX(-50%); }
.slider-thumb.right { transform: translateX(50%); }
#search-in-view-label {
    display: flex; align-items: center; cursor: pointer;
    font-size: 1.1rem; user-select: none; color: #f0f0f0;}
#search-in-view-checkbox {
    width: 1.2rem; height: 1.2rem; margin-right: 10px; flex-shrink: 0;}
.filter-modal-content button#accept-filters-btn {
    background-color: #007aff; color: white; font-weight: bold;
    padding: 12px 30px; border-radius: 8px; border: none;
    font-size: 1.1rem; cursor: pointer; transition: opacity 0.2s;
    width: 100%;}
.filter-modal-content button#accept-filters-btn:hover {background-color: #007aff; opacity: 0.85;}
.ocm-modal-info-footer {
    font-size: 0.8rem; color: #8e8e93; text-align: left;
    margin-top: 20px; padding-top: 15px;
    border-top: 1px solid #444;}
.ocm-modal-info-footer p { margin: 5px 0; }
.ocm-modal-info-footer a { color: #0a84ff; text-decoration: none; }
.ocm-modal-info-footer a:hover { text-decoration: underline; }
#address-suggestions-list li:nth-child(even) { background-color: #4a4a4a;}
#address-suggestions-list li:hover { background-color: #007aff; }
#intersection-preview-map-window {
    position: absolute;  top: 10px;  left: 10px;
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 7px;     z-index: 8900 !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.5);   overflow: hidden;
    animation: flash-black-halo 1.5s infinite;}
#intersection-rotator {    width: 100%; height: 100%;}
#intersection-preview-map-container {
    width: 100%;    height: 100%; filter: contrast(100%) saturate(105%);}
#maneuver-flashing-border-overlay {
    position: fixed;top: 0;  left: 0;  width: 100vw; height: 100vh;
    box-sizing: border-box;pointer-events: none;
    z-index: 8498;   border: 7px solid transparent;}
#maneuver-flashing-border-overlay:not(.hidden) {
    animation: flash-maneuver-yellow-border 0.5s 6;}
@keyframes flash-maneuver-yellow-border {
    0%, 100% {
        border-color: transparent;   box-shadow: none; }
    50% {
        border-color: #FFFF00; 
        box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); }}
.edit-info-modal,
.edit-info-modal h2,
.edit-info-modal h3,
.edit-info-modal p,
.edit-info-modal li {   color: #333; }
.chat-user-item {
    padding: 0.5rem;border-bottom: 1px solid #333;
    transition: background-color 0.2s;  display: flex;
    align-items: center; gap: 10px; }
.chat-user-item:hover {  background-color: #3a3a3c;}
.chat-admin-controls {flex-shrink: 0; margin: 0;  padding: 0;}
.map-access-toggle {width: 20px; height: 20px;cursor: pointer;vertical-align: middle; }
.chat-user-main-info {
    flex-grow: 1; cursor: pointer;  min-width: 0;}
.chat-user-name {
    display: block; font-weight: bold;
    color: #0a84ff; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;}
.chat-user-details {
    display: block; font-size: 0.75rem;color: #a0a0a0;}
.chat-user-session-stats {
    font-size: 0.7rem; color: #ffd700;
    margin-left: 5px; font-style: italic; }
.poi-category-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;}
.poi-category-modal-header h2 {color: #cfbb51;  margin: 0; font-size: 1.4rem; }
.poi-category-close-btn {
    background: #555;
    color: white;  border: none; border-radius: 50%;
    width: 32px;  height: 32px;font-size: 22px;
    line-height: 32px;  text-align: center; cursor: pointer;
    transition: background-color 0.2s;  }
.poi-category-close-btn:hover {  background: #777;}
.poi-category-button {
    background-color: #3a3a3c; border: 1px solid #555;
    color: #f0f0f0; border-radius: 8px;
    padding: 12px 8px; font-size: 0.9rem; 
    font-weight: bold;  cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;   display: flex;
    flex-direction: column;   align-items: center;
    gap: 8px;}
.poi-category-button:hover { background-color: #4a4a4c; }
.poi-category-button:active { transform: scale(0.95);}
.poi-category-button .icon {font-size: 1.8rem;}
.numbered-poi-marker {
    width: 38px;  height: 38px;   border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    border: 2px solid black; display: flex;
    justify-content: center; align-items: center;
    font-size: 16px;font-weight: bold;
    color: black; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);  }
.poi-category-modal-overlay {
    position: fixed;   inset: 0; width: 100%;  height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 15001 !important;
    display: flex; justify-content: center;
    align-items: center;  padding: 20px;
    box-sizing: border-box;}
#address-suggestions-modal {
    position: fixed;
    z-index: 11005 !important; background-color: #2c2c2e;
    padding: 1rem;  border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    display: flex;  flex-direction: column;
    border: 1px solid #444;}
#address-suggestions-modal h2 { color: white; }
#address-suggestions-list {
    list-style: none; padding: 0; margin: 0 0 0.75rem 0;
    overflow-y: auto; border: 1px solid #444;
    border-radius: 8px; background-color: #1c1c1e;}
#address-suggestions-list li {
    padding: 12px 18px; 
    border-bottom: 1px solid #444;
    cursor: pointer;font-size: 1.1rem; 
    font-weight: 500; color: #f0f0f0;
    background-color: #3a3a3c;
    transition: background-color 0.2s; }
#address-suggestions-list li:last-child { border-bottom: none; }
#address-suggestions-list li:hover { background-color: #007aff; }
#address-suggestions-modal .modal-top-buttons button#close-address-suggestions-modal {
    background-color: #555 !important;   color: white !important;
    border: none !important; font-weight: bold !important;
    border-radius: 8px;}
#address-suggestions-modal .modal-top-buttons button#close-address-suggestions-modal:hover {
    background-color: #444 !important;}
#poi-results-list-container {
    position: absolute;
    top: 10px;left: 10px;width: 250px;
    max-height: calc(100% - 20px); 
    background-color: rgba(44, 44, 46, 0.65);  backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid #444;  border-radius: 8px;
    z-index: 1002;  overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    display: none;}
.poi-list-item {
    padding: 8px;display: flex;
    align-items: center;gap: 8px;cursor: pointer;
    border-bottom: 1px solid #444;  transition: background-color 0.2s;}
.poi-list-item:last-child { border-bottom: none;}
.poi-list-item:hover { background-color: #007aff; }
.poi-list-number {
    flex-shrink: 0;
    width: 24px;  height: 24px;
    background-color: white;   color: black;
    border-radius: 50%;   display: flex;  align-items: center;
    justify-content: center;  font-weight: bold;
    font-size: 0.9rem;}
.poi-list-name {
    flex-grow: 1;    color: white;
    font-size: 0.8rem;    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;}
.poi-list-filter-container {
    padding: 10px;
    background-color: #1c1c1e;border-bottom: 1px solid #444;
    position: sticky; top: 0;
    z-index: 2;   display: flex;
    align-items: center;position: relative; }
.poi-list-filter-input {
    width: 100%;
    padding: 8px 30px 8px 10px; font-size: 0.9rem;
    background-color: #3a3a3c; border: 1px solid #555;
    color: #f0f0f0;  border-radius: 6px;}
.poi-list-filter-input::placeholder { color: #8e8e93;}
.poi-list-filter-clear {
    position: absolute; right: 15px; top: 50%;
    transform: translateY(-50%);
    background: none;  border: none;
    color: #a0a0a0;font-size: 1.5rem; font-weight: bold;
    cursor: pointer;  padding: 0 5px;display: none; }
.choice-modal.help-choice {
    background-color: #2c2c2e !important;
    color: #f0f0f0 !important;
    border-radius: 14px !important;
    border: 1px solid #555 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
    padding: 1.5rem !important;
    max-width: 450px !important;
    text-align: center !important;
    z-index: 11000 !important;}
.choice-modal.help-choice h2 {
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
    margin-bottom: 0.5rem !important;}
.choice-modal.help-choice p {color: #b0b0b0 !important;margin-bottom: 1.5rem !important;}
.choice-modal.help-choice .personalization-options button {
    background-color: #3a3a3c !important;
    color: #f0f0f0 !important;
    border: 1px solid #555 !important;
    font-weight: bold !important;}
.driver-popover {
    background-color: #2c2c2e !important; color: #f0f0f0 !important;
    border-radius: 14px !important;   border: 1px solid #555 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;}
.driver-popover-title {
    font-size: 1.2rem !important; font-weight: bold !important;
    color: #ffd700 !important; }
.driver-popover-description {
    font-size: 1.05rem !important;  line-height: 1.6 !important;
    color: #e0e0e0 !important;}
.driver-popover-description strong { color: #0a84ff !important;}
.driver-popover-progress-text {   color: #a0a0a0 !important;}
.driver-popover-footer {
    display: flex !important;
    justify-content: space-between !important;  align-items: center !important;}
.driver-popover-navigation-btns button {
    background-color: #555 !important;
    color: white !important;
    text-shadow: none !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    padding: 8px 16px !important;
    font-weight: bold !important;
    border: none !important;}
.driver-popover-navigation-btns button.driver-popover-next-btn {
    background-color: #007aff !important;} 
.driver-popover-navigation-btns button.driver-popover-previous-btn {
    background-color: #6c757d !important; }
#ai-route-modal {
    position: absolute;  inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10005;  display: flex;
    justify-content: flex-start;
    align-items: flex-start;  padding: 10px;
    box-sizing: border-box; opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;}
#ai-route-modal.hidden {opacity: 0; transform: translateY(-30px);pointer-events: none;}
.ai-modal-content {
    background-color: #2c2c2e;
    color: #f0f0f0; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #444;
    width: 100%; max-width: 1150px; 
    max-height: 95vh; display: flex;
    flex-direction: column; padding: 1.5rem;
    gap: 1rem;}
.ai-modal-content h2 {
    color: #ffd700;  font-size: 1.5rem;
    font-weight: bold;text-align: center;    margin: 0;}
.ai-modal-content p {
    color: #b0b0b0; font-size: 0.9rem;text-align: center;
    line-height: 1.5;   margin: 0;}
.ai-modal-content #ai-prompt-input {
    background-color: #3a3a3c;
    border: 1px solid #555;  color: #f0f0f0;
    border-radius: 8px;  padding: 0.75rem;
    font-size: 1rem;  resize: vertical;
    min-height: 80px;}
#ai-status-area {
    background-color: #1c1c1e;
    border: 1px solid #444;  border-radius: 8px;
    padding: 1rem;  min-height: 200px; 
    max-height: 45vh;   overflow-y: auto;  font-size: 0.9rem;
    color: #e0e0e0;}    
#ai-status-area p {
    text-align: left;margin-bottom: 0.5rem;
    border-bottom: 1px dashed #444;
    padding-bottom: 0.5rem;}
#ai-status-area p:last-child { border-bottom: none; }
#ai-status-area ul { list-style: decimal; padding-left: 1.5rem; }
#ai-status-area li { margin-bottom: 0.5rem; }
.ai-modal-buttons {display: flex; gap: 1rem; justify-content: center;}
.ai-modal-buttons button {
    flex-grow: 1; padding: 12px; font-size: 1.1rem;
    font-weight: bold; border-radius: 8px; border: none;
    cursor: pointer; transition: opacity 0.2s;}
.ai-modal-buttons button:hover { opacity: 0.85; }
#ai-generate-route-button { background-color: #007aff; color: white; }
#ai-generate-route-button:disabled { background-color: #444; cursor: not-allowed; }
#ai-cancel-button, #ai-refine-route { background-color: #555; color: white; }
#ai-accept-route { background-color: #34c759; color: white; }
.vehicle-icon-mapbox-container .vehicle-icon-wrapper {
    transform-origin: bottom center;
    transition: transform 0.15s linear;}    
.vehicle-icon-mapbox-container {
    width: 50px; height: 50px;perspective: 200px; }
.vehicle-icon-mapbox-container .vehicle-icon-wrapper {
    width: 100%; height: 100%;
    display: flex;align-items: center; justify-content: center;
    transform-origin: bottom center;
    transition: transform 0.1s linear;}
.vehicle-icon-mapbox-container img {
    width: 100%;  height: 100%;object-fit: contain;}
#ai-route-modal .ai-modal-content > div[style*="position: relative"] {
    position: relative;  width: 100%;}
#ai-prompt-input { width: 100%; padding-right: 40px; }
#ai-clear-prompt-button {
    position: absolute; top: 50%;   right: 10px;
    transform: translateY(-50%);
    background: none;   border: none;
    color: #a0a0a0; font-size: 1.8rem; font-weight: bold;
    cursor: pointer; padding: 0 5px; display: none; }
#ai-status-area .ai-message {
    padding: 0.8rem 1.2rem; 
    border-radius: 18px;  margin-bottom: 1rem;
    max-width: 85%;line-height: 1.6; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
#ai-status-area .ai-message p {
    margin: 0;  padding: 0;  font-size: 1.1rem; 
    font-weight: bold;     text-align: left;   border-bottom: none;
    word-wrap: break-word; }
#ai-status-area .ai-message.user {
    background-color: #69564b;   color: white;
    align-self: flex-end; margin-left: auto;
    border-bottom-right-radius: 6px; }
#ai-status-area .ai-message.user p { text-align: right; }
#ai-status-area .ai-message.assistant {
    background-color: #52569e; 
    color: white ;align-self: flex-start;
    margin-right: auto; border-bottom-left-radius: 6px; }
#ai-status-area .ai-message.tool {
    background-color: #6A67CE; /* Morado más claro y vibrante */
    color: white; font-style: italic;
    align-self: flex-start;margin-right: auto;
    border-bottom-left-radius: 6px;}
#ai-status-area .ai-message.assistant.error { background-color: #C0392B;}
#ai-status-area .ai-message.assistant.error p {color: #FFFFFF; }
body.mobile-view #search-row-map-header {align-items: center; }
#route-recovery-overlay {
    position: fixed;
    top: 0;  left: 0;width: 100vw; height: 100dvh; 
    background-color: rgba(20, 20, 20, 0.80);
    z-index: 100000; display: flex;
    flex-direction: column;  justify-content: center;
    align-items: center; gap: 20px;opacity: 1;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;}
#route-recovery-overlay.hidden {
    opacity: 0;    visibility: hidden;
    pointer-events: none;}
.recovery-spinner {
    width: 80px;  height: 80px;
    border: 8px solid rgba(255, 255, 255, 0.2);
    border-left-color: #007aff;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;}
.recovery-text {
    font-size: 1.8rem;font-weight: bold;
    color: #f0f0f0;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    letter-spacing: 1.5px;}
@keyframes spin {
    to {
        transform: rotate(360deg);}}
.vehicle-icon-wrapper {
    transform-origin: bottom center;
    pointer-events: auto;   cursor: pointer;
    position: relative;  z-index: 2;}
.ground-anchor-marker {
    width: 8px;  height: 8px;
    background-color: #ff3b30;  border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    pointer-events: none;   position: relative;
    z-index: 1;}
.ground-anchor-hidden {display: none;}
body.mobile-view #reminders-location-map-header .reminders-map-button-action,
body.mobile-view #reminders-location-map-header #reorder-route-stages-button,
body.mobile-view #reminders-location-map-header #ai-route-planner-button,
body.mobile-view #reminders-location-map-header #map-location-search-button,
body.mobile-view #reminders-location-map-header #navigation-map-help-button {
        height: 48px !important;   min-height: 48px !important;
        width: 48px !important;    min-width: 48px !important;
        padding: 2px; font-size: 0.7rem;}
body.mobile-view #reminders-location-map-header #clear-map-search-input-button {
        height: 48px !important;
        min-height: 48px !important; width: 30px !important;
        min-width: 30px !important; padding: 2px; font-size: 1.7rem;}
#daily-user-count-globe {
    background-color: #6c757d;
    color: white;  border: 2px solid white;
    border-radius: 50%; width: 42px;  height: 32px; display: none;   align-items: center;
    justify-content: center;  font-weight: bold;  font-size: 0.9rem;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);}

/* =================================================================== */
body.mobile-view .mapboxgl-ctrl-bottom-left { display: none !important;}
body.mobile-view #toggle-map-header-buttons-panel {width: 80px; height: 80px;left: 15px;}
body.mobile-view #toggle-map-header-buttons-panel img {width: 70%;height: 70%;}
body.mobile-view #navigation-bottom-progress-bar {
    transform: scale(0.5);  transform-origin: top left;top: 5px;    left: 5px; 
    width: 200%;  max-width: 1000px;  min-width: 960px; }
body.mobile-view #toggle-progress-bar-lock {transform: scale(1.4);transform-origin: center center;}
body.mobile-view .mapboxgl-ctrl-bottom-right {overflow: visible; left: auto; right: 5px;   bottom: 5px;width: auto;}
body.mobile-view .mapboxgl-ctrl.map-controls-bottom-right { transform: scale(0.7);  transform-origin: bottom right; }
body.mobile-view .map-settings-popup,
body.mobile-view .map-offset-popup {
    position: fixed; bottom: 65px; right: 15px;
    transform: none;width: auto;max-width: calc(100vw - 30px);}
body.mobile-view #route-modal-load-overlay .route-modal-container {  width: 95vw !important;  max-width: 95vw !important;  height: 90vh !important;  max-height: 90vh !important;  transform: none !important; }
body.mobile-view #route-modal-load-overlay .route-modal-title {  font-size: 1.3rem;}
body.mobile-view #route-modal-load-overlay .route-filter-input { font-size: 1rem; height: 45px;}
body.mobile-view #route-modal-load-overlay .route-name { font-size: 1rem; }
body.mobile-view #route-modal-load-overlay .route-list-item {  flex-wrap: wrap; padding: 12px;}
body.mobile-view #route-modal-load-overlay .route-actions {   flex-basis: 100%; margin-top: 10px;  justify-content: flex-end; }
body.mobile-view #route-modal-load-overlay .btn-return,
body.mobile-view #route-modal-load-overlay .btn-share,
body.mobile-view #route-modal-load-overlay .btn-delete {padding: 8px 16px;   font-size: 1rem;}
body.mobile-view #route-modal-load-overlay .route-modal-footer button {  font-size: 1.2rem;padding: 14px;}
/* =================================================================== */
#navigation-bottom-progress-bar {transition: opacity 0.8s ease-out, visibility 0.8s ease-out, transform 0.4s ease-in-out;}
#navigation-bottom-progress-bar.scaled-for-maneuver {transform: scale(0.72); transform-origin: top left; }
body.mobile-view #navigation-bottom-progress-bar.scaled-for-maneuver { transform: scale(0.5); }
.mapboxgl-ctrl-bottom-left {transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;}
.mapboxgl-ctrl-bottom-left.hidden-for-maneuver {  opacity: 0;visibility: hidden;    pointer-events: none; }
.maneuver-text-container {
    display: flex; flex-direction: column;   justify-content: center; 
    height: 100%;  padding-left: 8px;  gap: 2px; }
.maneuver-instruction-line { width: 100%;}
#maneuver-text-display { white-space: normal; line-height: 1.3;}
.street-name-line { width: 100%; display: flex;  justify-content: flex-end;}
.road-sign-banner {
    display: inline-block; 
    background-color: rgba(26, 83, 40, 0.75); 
    padding: 6px 10px;border-radius: 6px;
    color: #FFD700 !important;
    border: 1px solid #C8A97E;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: bold;
    font-size: 1.3rem;  white-space: normal;
    text-align: center;  line-height: 1.6; max-width: 100%; }
#mini-nav-info-card {display: flex; flex-direction: column;  gap: 3px;}
#mini-card-main-info { text-align: center;}
#mini-card-road-sign {
    display: block;    background-color: rgba(26, 83, 40, 0.50);
    color: #FFD700;   padding: 3px 5px; 
    border-radius: 6px;  border: 1px solid #C8A97E;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);  font-weight: bold;
    font-size: 1.2rem;  line-height: 1.35; text-align: center;
    white-space: normal;   width: 100%; 
    box-sizing: border-box; }    
#street-name-display:not(.road-sign-banner) {
    color: white !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: 0 !important;}    
#maneuver-distance-progress-wrapper {
    position: relative; width: 100%;
    padding: 12px 0;   margin-top: 0px;
    margin-bottom: -5px; display: flex;
    justify-content: center;
    align-items: center;}
#distance-progress-bar-to-turn {
    width: 100%;  height: 100%;
    background: linear-gradient(to right, #680000 0%, #FF0000 50%, #FA8072 97%);
    border-radius: 10px;  transition: width 0.3s linear;}
#navigation-top-info-bar {
    margin-bottom: 0;   font-size: 1.2em; display: flex;
    align-items: center;
    position: relative;   cursor: pointer;}
#navigation-bottom-progress-bar hr {
    border: none; border-top: 1px solid rgba(229, 209, 193, 0.5);
    margin: 8px 0;}
#navigation-top-info-bar .maneuver-text-container {
    flex-grow: 1;    text-align: center;
    max-width: calc(100% - 30px); margin-right: 10px; }

#quick-reminder-modal {
    position: absolute;  top: 5px; left: 5px;
    width: calc(100% - 10px);   height: calc(100% - 10px);
    max-width: none;  max-height: none;
    background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);  z-index: 8700; display: flex;
    justify-content: center;  align-items: center;
    padding: 20px;  box-sizing: border-box;}
#quick-reminder-modal .quick-reminder-content {
    background-color: #2c2c2e; color: #f0f0f0; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #444;  width: 100%;
    max-width: 950px; max-height: 95vh;
    display: flex; flex-direction: column;
    overflow: hidden;}
.quick-reminder-header {
    height: 120px;
    background-image: url('PNG/recordatorios.jpg');
    background-size: cover;
    background-position: center;  position: relative;
    display: flex; align-items: flex-end;
    padding: 1rem 1.5rem;flex-shrink: 0;}
.quick-reminder-header::before {
    content: '';
    position: absolute;  top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);}
.quick-reminder-header h2 {
    font-size: 1.8rem;font-weight: bold;color: white;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    position: relative;  z-index: 1;margin: 0;}
.quick-reminder-body {
    padding: 1.5rem; flex-grow: 1;overflow-y: auto;}
.quick-reminder-columns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;}
.quick-reminder-column h3 {
    font-size: 1.2rem;font-weight: bold; color: #007aff;
    margin-top: 0;  margin-bottom: 1rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid #444;}
.quick-action-list,
.saved-locations-list {
    list-style: none; padding: 0;  margin: 0; display: flex;
    flex-direction: column; gap: 0.75rem;}
.quick-action-btn {
    width: 100%;   padding: 14px;
    font-size: 1.1rem;   font-weight: bold;
    text-align: left; background-color: #3a3a3c;
    color: #f0f0f0;    border: 1px solid #555;
    border-radius: 8px;  cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;}
.quick-action-btn:hover:not(:disabled) {
    background-color: #4a4a4c; transform: translateY(-1px);}
.quick-action-btn:disabled {
    background-color: #2a2a2c;  color: #6a6a6c;
    cursor: not-allowed;border-color: #444;}
.quick-reminder-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #444; background-color: #1c1c1e;
    display: flex; justify-content: flex-end;}
.quick-reminder-footer button {
    background-color: #555;  color: white;
    padding: 12px 25px;  font-size: 1.1rem;  font-weight: bold;
    border-radius: 8px;  border: none;  cursor: pointer;}
#simulation-modal {
    position: fixed; top: 5px; left: 520px;  right: auto; 
    transform: none;  background-color: #2c2c2e;
    padding: 1.5rem; border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6); z-index: 8800;
    max-width: 600px; width: calc(100% - 80px);
    height: calc(100vh - 10px); display: flex;
    flex-direction: column; border: 1px solid #444;}
#simulation-modal h2 {  color: white;text-shadow: 1px 1px 3px rgba(0,0,0,0.5); font-size: 1.5rem;}
#simulation-content-area li {
    padding: 0.4rem 0.2rem; border-bottom: 1px solid #3a3a3c;
    display: flex; align-items: center; color: #f0f0f0 !important; font-size: 1.1rem;}
.hidden-by-zoom {   display: none !important;}
.radial-menu-container {
    position: absolute; top: 0;left: 0;
    width: 150px; height: 150px; transform-origin: top left;
    pointer-events: none; z-index: 10;}
.radial-menu-container .radial-menu-button {
    position: absolute;
    top: 0; left: 0;  width: 65px; height: 65px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #333;  border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); display: flex;
    align-items: center;justify-content: center;cursor: pointer;
    transform-origin: center center;  opacity: 0;
    transform: scale(0.5);transition: opacity 0.3s ease-out, transform 0.3s ease-out, background-color 0.2s;
    z-index: 1;}
.radial-menu-container.active {pointer-events: auto;}
.radial-menu-container.active .radial-menu-button { opacity: 1; transform: scale(1);}
.radial-menu-button img {  width: 60%; height: 60%;object-fit: contain;}
.radial-menu-button:hover {background-color: #ffd700; transform: scale(1.1) !important;}
.radial-menu-button .radial-text-label {
    font-size: 1.1rem; font-weight: bold; color: #333;
    width: 100%; text-align: center;} 
.radial-menu-container.active #radial-add-radar {
        transform: rotate(0deg) translateX(135px) rotate(0deg);
        transition-delay: 0s;}
.radial-menu-container.active #radial-ai {
        transform: rotate(-18deg) translateX(135px) rotate(18deg);
        transition-delay: 0.04s;}
.radial-menu-container.active #radial-pdr {
        transform: rotate(-36deg) translateX(135px) rotate(36deg);
        transition-delay: 0.08s;}
.radial-menu-container.active #radial-range-calc {
        transform: rotate(-54deg) translateX(135px) rotate(54deg);
        transition-delay: 0.12s;}
.radial-menu-container.active #radial-poi {
        transform: rotate(-72deg) translateX(135px) rotate(72deg);
        transition-delay: 0.16s;}
.radial-menu-container.active #radial-quick-reminder {
        transform: rotate(-90deg) translateX(135px) rotate(90deg);
        transition-delay: 0.20s;}    
  .map-layer-visibility-selector {padding-top: 10px;margin-top: 10px;}
.map-layer-visibility-selector h3 {
    color: #FFD700; font-weight: bold; font-size: 1rem;
    margin-bottom: 12px;text-transform: uppercase;}
.layer-visibility-toggle {
    display: flex;align-items: center; margin-bottom: 10px;
    font-size: 1.1rem;color: white; }
.layer-visibility-toggle input[type="checkbox"] {
    width: 20px; height: 20px;
    margin-right: 12px;accent-color: #007aff; }
.eco-note {
    font-size: 0.8rem; color: #ccc;  font-style: italic;margin-top: 15px;}
.map-layer-visibility-selector.disabled {opacity: 0.6;  pointer-events: none;}
.separator-bold {  height: 2px;  background-color: #555; margin: 10px 0;   border: none;}
#recovery-screenshot-overlay {opacity: 1;  transition: opacity 0.5s ease-in-out;}
#recovery-screenshot-overlay.fade-out {opacity: 0;}
#maneuver-counter-display {
    position: absolute; 
    top: 38px;   left: 6px;  z-index: 2;  width: 25px;  height: 25px;
    background-color: rgba(30, 30, 30, 0.40);  border: 2px solid #888888;
    border-radius: 50%;display: none;   align-items: center;
    justify-content: center;font-size: 0.9rem; font-weight: bold;color: #CCCCCC;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    box-sizing: border-box;}

#force-show-minimap-button {
    position: absolute;
    top: 33px;  right: 15px; width: 35px;  height: 35px;
    background-color: rgba(40, 40, 40, 0.1); backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.1);  border-radius: 50%;
    color: white; font-size: 18px;
    font-weight: bold; text-align: center;
    cursor: pointer;  z-index: 1002;
    transition: opacity 0.3s, transform 0.3s;}
#force-show-minimap-button:hover {  background-color: rgba(0, 122, 255, 0.3);transform: scale(1.05);}
#force-show-minimap-button.hidden {  display: none;}   
#minimap-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 330px;
    height: 330px;
    z-index: 1001;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;}
#minimap-container:not(.hidden) {    pointer-events: auto;}
#minimap-car-container {
    position: absolute;
    top: 0;  left: 0;
    width: 330px;  height: 330px;
    pointer-events: none;
    z-index: 1001;
    overflow: hidden;
    border-bottom-left-radius: 330px;}
#minimap-container.hidden {  opacity: 0;  transform: scale(0.8);}
#minimap-map-div {
    width: 100%;   height: 100%;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, 
        rgba(0,0,0,0.95) 0%,   /* Casi opaco en la esquina */
        rgba(0,0,0,0.65) 60%,  /* Empieza a desvanecerse a partir del 60% */
        rgba(0,0,0,0.15) 70%,   /* Casi transparente en el borde */
        transparent 71%       /* Corte final para la forma */
    );
    mask-image: radial-gradient(circle at 100% 0%, 
        rgba(0,0,0,0.95) 0%,   /* Casi opaco en la esquina */
        rgba(0,0,0,0.65) 60%,  /* Empieza a desvanecerse a partir del 60% */
        rgba(0,0,0,0.15) 70%,   /* Casi transparente en el borde */
        transparent 71%   );}
.minimap-car-icon {
    position: absolute;
    width: 24px; height: 24px;
    z-index: 2;
    transform: translate(-50%, -50%);
    transition: transform 0.1s linear; }
.minimap-car-icon img { width: 100%;   height: 100%;  object-fit: contain;}    
.route-modal-overlay {
    position: fixed;    inset: 0;  width: 100vw;   height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);  backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 8400;    display: flex;
    justify-content: center;  align-items: center;
    padding: 3px 10px; }
.route-list-item {
    background-color: #3a3a3c;
    padding: 9px 15px; 
    border: 1px solid #4a4a4a; display: flex;
    justify-content: space-between; align-items: center;
    border-radius: 8px;   margin-bottom: 8px;
    transition: background-color 0.2s;}

/* Estilo para el botón de la barra de herramientas cuando está activo */
#range-calculator-button.active {
    background-color: #FFD700 !important; /* Amarillo sólido */
    border: 2px solid white !important; /* Borde blanco para destacar */
    transform: scale(1.05); }
#range-calc-modal {
    position: absolute; top: 5px;  left: 5px;
    background-color: rgba(44, 44, 46, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 8700;  display: flex;
    justify-content: center;
    align-items: center;  padding: 20px;
    box-sizing: border-box; border-radius: 14px;
    border: 1px solid #555;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);}
#range-calc-modal.hidden {  display: none;}
.range-calc-content { color: #f0f0f0;  width: 100%;   max-width: 450px;text-align: center;}
.range-calc-content h2 {
    color: #ffd700;
    font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);}
.range-calc-content .modal-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
    margin-bottom: 2rem;}
.range-calc-content .form-group {
    display: flex; flex-direction: column;  align-items: flex-start;}
.range-calc-content .form-group.checkbox-group {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center;
    justify-content: center; gap: 0.75rem;}
.range-calc-content label {font-size: 1rem;  font-weight: 500;  color: #a0a0a0;  margin-bottom: 0.5rem;}
.range-calc-content input[type="number"] {
    width: 100%;  padding: 10px;
    font-size: 1.2rem; font-weight: bold;
    text-align: center;   background-color: #3a3a3c;
    border: 1px solid #555; color: #f0f0f0;  border-radius: 8px;}
.range-calc-content input[type="checkbox"] {
    width: 1.5rem;  height: 1.5rem;accent-color: #007aff;}
.range-calc-content .modal-footer { display: flex;  gap: 1rem;}
.range-calc-content .modal-footer button {
    flex: 1; padding: 14px; font-size: 1.1rem;
    font-weight: bold;  border-radius: 8px;
    border: none; cursor: pointer;
    transition: opacity 0.2s;}
.range-calc-content #rc-start-calculation { background-color: #007aff;  color: white;}
.range-calc-content #rc-cancel {background-color: #555;  color: white;}
.weather-widget-right.visible {
    display: block; opacity: 1;
    transform: translateY(-50%) translateX(0);}
#weather-widget-content {
    display: flex;flex-direction: column; align-items: center;
    justify-content: center;   gap: 8px; 
    line-height: 1.2;  white-space: nowrap;}
.weather-main-line {
    display: flex;  align-items: baseline;  gap: 10px;font-size: 1.4rem; }
.weather-icon {
    font-size: 2.7rem;   font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;}
.weather-temp { font-size: 1.7rem; font-weight: bold;  color: white;}
.feels-like-temp {
    font-size: 1.1rem;  font-weight: 300;color: #d1d1d1;  margin-left: -5px;}
.weather-details {
    display: flex; gap: 15px; font-size: 1.3rem; margin-top: 4px; opacity: 0.9;}
.detail-item { display: flex; align-items: center; gap: 6px; }
.detail-icon {
    font-size: 1.3rem;
    font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;}
.wind-direction-arrow {
    display: inline-block;
    transition: transform 0.5s ease-out; margin-left: 5px;
    font-size: 1.8rem;    font-weight: bold;
    font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;}
.hidden {display: none !important;}  
#reminders-location-map-modal.immersive-mode-active #reminders-location-map-header,
#reminders-location-map-modal.immersive-mode-active #navigation-bottom-progress-bar,
#reminders-location-map-modal.immersive-mode-active #map-info-overlay,
#reminders-location-map-modal.immersive-mode-active .map-control-custom-map-controls { 
#reminders-location-map-modal.immersive-mode-active:not(.manual-override) .map-controls-bottom-right { /* ESTO AHORA RESPETA LA ANULACIÓN */
    display: none !important; opacity: 0;
    visibility: hidden; pointer-events: none;}    
    display: none !important; opacity: 0;
    visibility: hidden; pointer-events: none;}
#show-weather-button {
    background-color: #3a3a3c !important;  
    font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    font-variant-emoji: emoji;
    -webkit-font-variant-emoji: emoji;}
.weather-separator {
    border: none; border-top: 1px solid rgba(255, 255, 255, 0.3);  width: 80%;
    margin: 12px auto;}
.destination-weather-header {
    font-size: 1.1rem; font-weight: 500;
    color: #FFD700; margin-bottom: 4px;
    text-align: center;}    
.destination-weather-header {
    font-size: 1.1rem; font-weight: 500;
    color: #FFD700; margin-bottom: 4px;
    text-align: center;}
.weather-extended-info-container {
    margin-top: 12px;  padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); width: 100%;}
.weather-extended-info-btn {
    display: block;  text-align: center;   text-decoration: none;  width: 100%;
    padding: 8px 12px;
    font-size: 1rem;
    font-weight: bold;
    background-color: rgba(31, 49, 64, 0.4);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;}   
.weather-extended-info-btn:hover {  background-color: rgba(0, 100, 210, 0.8);}
.weather-extended-info-note {
    font-size: 0.7rem;   color: #d1d1d1; text-align: center;
    margin-top: 8px;    font-style: italic;}
#route-concat-choice-modal {
    position: fixed;   top: 120px;  left: 15px;
    background-color: rgba(30, 30, 32, 0.65);  color: #f0f0f0; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.5rem 2rem;  width: 90%;
    max-width: 500px;   z-index: 8500;  text-align: center;
    backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);}
#route-concat-choice-modal h2 {
    color: #ffd700;  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;font-size: 1.6rem; font-weight: bold;}
#route-concat-choice-modal p {
    color: #e0e0e0;  margin-bottom: 1.5rem; font-size: 1.1rem; line-height: 1.5;}
#route-concat-choice-modal .modal-top-buttons {
    display: flex;  flex-direction: column; gap: 1rem;}
#route-concat-choice-modal .modal-top-buttons button {
    width: 100%; font-weight: bold;
    min-height: 70px; border-radius: 12px;
    font-size: 1.2rem; display: flex;
    align-items: center; justify-content: center; gap: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s, transform 0.1s;}
#route-concat-choice-modal .modal-top-buttons button:active { transform: scale(0.98);}
#route-concat-choice-modal button .icon-emoji,
#route-concat-choice-modal button svg {  font-size: 1.8rem; flex-shrink: 0;}
#route-concat-choice-modal #concat-choice-append {
    background-color: rgba(0, 122, 255, 0.55);color: white !important;}
#route-concat-choice-modal #concat-choice-append:hover {
    background-color: rgba(10, 132, 255, 0.55);}
#route-concat-choice-modal #concat-choice-replace {
    background-color: rgba(255, 149, 0, 0.55);  color: white !important;}
#route-concat-choice-modal #concat-choice-replace:hover { background-color: rgba(255, 159, 10, 0.55);}
#route-concat-choice-modal #concat-choice-cancel {
    background-color: rgba(85, 85, 85, 0.5);color: white !important;
    border: 1px solid #555;}
#route-concat-choice-modal #concat-choice-cancel:hover {
    background-color: rgba(70, 70, 70, 0.5);}  
#auto-start-nav-modal {
    position: fixed;
    bottom: 10px; left: 10px;  transform: none;
    background-color: rgba(30, 30, 32, 0.5);color: #f0f0f0;
    border-radius: 14px; padding: 1.25rem;
    z-index: 10003;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    width: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);  border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex; flex-direction: column;  gap: 0.75rem; }
#auto-start-nav-modal #start-nav-buttons-container {
    display: flex;  flex-direction: row;  gap: 10px;
    align-items: center;}
.actions-grid, .main-actions, .reminder-actions { display: contents; }
.primary-action-btn {
    padding: 0 1rem;
    height: 60px; border-radius: 12px;  cursor: pointer;
    display: flex; align-items: center;
    justify-content: center;  gap: 0.75rem;
    transition: background-color 0.2s, transform 0.1s;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;}
.primary-action-btn:active {transform: scale(0.97);}
#start-route-now-button {background-color: rgba(0, 86, 179, 1.0) !important; }
#start-route-now-button:hover {  background-color: rgba(10, 132, 255, 0.9) !important;}
.primary-action-btn .button-text-container {
    display: flex;align-items: center;gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: bold; color: white;}
.primary-action-btn svg {
    width: 40px;  height: 40px;   flex-shrink: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}
.secondary-action-btn {
    padding: 0 0.8rem; height: 60px; 
    background-color: rgba(20, 20, 20, 1.0) !important; 
    border: 1px solid #555;  border-radius: 12px;
    cursor: pointer; display: flex;
    flex-direction: row;  align-items: center;
    justify-content: center;   gap: 0.5rem;
    transition: background-color 0.2s, transform 0.1s;
    font-size: 1rem;   font-weight: 500;
    color: #e0e0e0; text-align: center; line-height: 1.15;
    white-space: nowrap;
   text-shadow: 1px 1px 3px rgba(0,0,0,0.9);}
.secondary-action-btn:hover:not(:disabled) {  background-color: #4a4a4c !important; transform: translateY(0);}
.secondary-action-btn .icon {font-size: 1.5rem;}
#cancel-start-nav {
    width: auto;  padding: 0 1rem;height: 60px; 
    font-size: 1.2rem;  font-weight: bold;
    background-color: rgba(110, 10, 10, 1.0);  color: white;
    border: 1px solid #555; border-radius: 12px;  cursor: pointer;
    transition: background-color 0.2s;
    display: flex;  align-items: center;
    justify-content: center;  gap: 0.75rem;
    white-space: nowrap;}
#cancel-start-nav:hover {background-color: #444;}
#cancel-start-nav svg { width: 24px; height: 24px; stroke: #ff453a; stroke-width: 3;}
#auto-start-nav-modal .info-text {
    font-size: 0.8rem; line-height: 1.4;
    color: #e0e0e0 !important;
    text-align: left; margin: 0;
    text-shadow: 1px 1px 2px black;}
.weather-block { width: 100%;}
.weather-widget-right.visible {
    display: block;  opacity: 1;
    transform: translateY(-50%) translateX(0);
    cursor: pointer;}
.location-header-wrapper {
    position: relative;display: flex;  align-items: center;
    justify-content: center; width: 100%;
    min-height: 40px;  margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;}
.location-icon {
    position: absolute;left: 15px; top: 50%;
    transform: translateY(-50%);  width: 30px;
    height: 30px; font-size: 30px; display: flex; align-items: center;
    justify-content: center;
    font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    line-height: 1;}
.location-name {display: inline-block; text-align: center;padding: 0 50px; }
.destination-prefix { font-size: 0.7rem;  color: white;font-weight: 500;display: block;}
.origin-location, .destination-location {
    font-size: 1.1rem;color: #90ee90;  font-weight: bold;}
.weather-main-line, .weather-details {
    display: flex; align-items: center;  justify-content: center; }
.weather-main-line { gap: 10px;font-size: 1.4rem;}
.weather-details {gap: 15px; font-size: 1.3rem;  margin-top: 4px; opacity: 0.9;}
.forecast-panel-container {
    display: grid;
    grid-template-columns: 1fr 1fr; gap: 15px;
    width: 100%; margin-top: 15px; padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);}
.forecast-column {display: flex; flex-direction: column;gap: 6px;}
.forecast-column h4 {
    font-size: 0.8rem;font-weight: bold;color: #FFD700;
    text-align: center;  margin: 0 0 5px 0;text-transform: none;}
.forecast-time { font-weight: bold; color: #f0f0f0; text-align: left;}
.forecast-icon {
    font-size: 1.6rem;text-align: center;
    font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;}
.forecast-temp { font-weight: bold; color: white; text-align: right;}
.forecast-item-empty {
    font-size: 0.9rem;
    color: #a0a0a0;  text-align: center; font-style: italic;  padding: 10px 0;}
.weather-widget-right {
    position: fixed; top: 50%;
    right: 10px;  transform: translateY(-50%); z-index: 6500;
    background-color: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);   color: #FFFFFF; 
    font-weight: bold;    border-radius: 20px;
    padding: 10px 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: none;
    transition: opacity 0.5s ease, transform 0.5s ease;  opacity: 0;
    transform: translateY(-50%) translateX(20px); 
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 1.0);}
.eta-deviation.positive { color: #F0B7B4; }
.eta-deviation.negative {  color: #C7F2D8; }
#distance-to-turn-formatted {
    position: absolute;  left: 50%;  top: 50%;
    transform: translate(calc(-50% + 28px), -50%);
    z-index: 2; width: 100%;
    text-align: center; font-weight: bold;
    font-size: 1.48em;  color: #FCD856;
    text-shadow:
        -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
        -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
        -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;}

#post-arrival-action-modal {
    position: fixed;
    bottom: 10px;  left: 10px; transform: none;
    background-color: rgba(30, 30, 32, 0.75);  color: #f0f0f0;
    border-radius: 14px;   padding: 1.25rem;  z-index: 10003;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5); width: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15); display: flex;
    flex-direction: column;   gap: 0.75rem;}
#post-arrival-buttons-container {
    display: flex; flex-direction: row; gap: 10px; align-items: center;}
#post-arrival-action-modal .primary-action-btn,
#post-arrival-action-modal .secondary-action-btn {
    padding: 0 1rem;  height: 60px;
    border-radius: 12px;  cursor: pointer;
    display: flex;  align-items: center;
    justify-content: center; gap: 0.75rem;
    transition: background-color 0.2s, transform 0.1s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;  font-size: 1.1rem;  font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);}
#post-arrival-action-modal button span { text-shadow: 1px 2px 1px rgba(0,0,0,1.0);}
#post-arrival-action-modal .primary-action-btn:active,
#post-arrival-action-modal .secondary-action-btn:active {
    transform: scale(0.97);}
#post-arrival-action-modal #return-trip-button {
    background-color: #2e7549;    color: white;}
#post-arrival-action-modal #return-trip-button:hover {
    background-color: #2fb350;}
#post-arrival-action-modal #clear-completed-route-button,
#post-arrival-action-modal #post-arrival-exit-button {
    background-color: #2c2c2e;   color: white;}
#post-arrival-action-modal #clear-completed-route-button:hover,
#post-arrival-action-modal #post-arrival-exit-button:hover {
    background-color: #3a3a3c;}
#post-arrival-action-modal .icon { font-size: 1.5rem;}
#zoom-auto-button,
#zoom-auto-button.active,
#zoom-auto-button.eco-mode {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    color: white !important; 
    -webkit-text-stroke-width: 0;
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         2px  2px 1px rgba(0,0,0,1.5) !important;}  

#zoom-auto-button.active {
    background-color: #CF6565 !important;  }
#zoom-auto-button.eco-mode {
    background-color: #7DBA7D !important;  } 
#zoom-auto-button.route-mode {
    background-color: #9e749d !important;}    
.ocm-color-legend-item { color: white !important; }

.choice-modal {
    background-color: #2c2c2e !important;
    color: #f0f0f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    border: 1px solid #444 !important;
    padding: 1.5rem !important;
    max-width: 450px !important;
    position: fixed !important;
    top: 100px !important; left: 180px !important;  transform: none !important;}
.choice-modal h2 {
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
    margin-bottom: 0.5rem !important;}
.choice-modal p { color: #b0b0b0 !important; margin-bottom: 1.5rem !important;}
.choice-modal .personalization-options button,
.choice-modal .modal-top-buttons .choice-cancel {
    width: 100%; padding: 12px;  font-size: 1.1rem;
    font-weight: bold;  border-radius: 8px;
    border: 1px solid #555; cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;}
.choice-modal .personalization-options button:hover,
.choice-modal .modal-top-buttons .choice-cancel:hover {
    transform: translateY(-1px);}
.choice-modal button.choice-edit {
    background-color: #7f8724 !important; 
    color: white !important; 
    border-color: #e0a800 !important;}
.choice-modal button.choice-assign {
    background-color: #1851BA !important; 
    color: white !important;
    border-color: #0056b3 !important;}
.choice-modal button.choice-help {
    background-color: #55A373 !important; 
    color: white !important;
    border-color: #28a745 !important;}
.choice-modal button.choice-cancel {
    background-color: #6A6070 !important;
    color: white !important;
    border-color: #444 !important;}
#unified-reminder-window .reminder-slide-content p.reminder-text[style*="font-size: 1.8rem"] {
    color: #FF5938 !important;}
#unified-reminder-window [id^="current-speed-display-"][style*="color: rgb(51, 51, 51)"] {
    color: #7CFC00 !important; }    
#unified-reminder-window .reminder-slide-content p.reminder-text[style*="font-size: 1.8rem"] {
    color: #FF5938 !important;}
#unified-reminder-window [id^="current-speed-display-"][style*="color: red"] {
    color: #FF5938 !important;}
#radar-speed-selection-modal .speed-option {font-size: 2rem !important;  padding: 1.2rem;   }    


#unified-reminder-window .reminder-count-header,
#unified-reminder-window .reminder-count-header * { text-shadow: none !important;},
#unified-reminder-window .reminder-slide .reminder-text,
#unified-reminder-window .reminder-slide .reminder-details,
#unified-reminder-window .reminder-slide-content p {
    color: #C9725F !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}
#unified-reminder-window .reminder-slide .reminder-details,
#unified-reminder-window .reminder-slide-content p.reminder-text[style*="font-size: 1rem"] {
    color: #00008B !important; /* DarkBlue para alto contraste */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4) !important; /* Sombra más suave */
}
.reminder-slide .reminder-text {
    margin: 0 0 0.5rem 0; font-size: 1.6rem;
    font-weight: bold; color: #593d3d;}

.weather-icon, .forecast-icon, .detail-icon {
    line-height: 1; display: inline-flex;
    align-items: center; justify-content: center;}

.weather-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; }
.weather-main-line {
    display: flex;   align-items: center;
    gap: 1px;
    margin-top: -25px;   margin-bottom: -20px; }
.weather-details { 
    display: flex; 
    justify-content: center; 
    margin-top: -13px;
}
.weather-temp {
    display: inline-flex;
    align-items: center;
    font-size: 1.9rem;}
.detail-icon img { width: 2.7rem !important; height: 2.7rem !important; }
.forecast-icon {
    width: 3.9rem !important;
    height: 3.2rem !important;}
.forecast-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;}
.weather-widget-right, .weather-widget-right * {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;}
.forecast-time { justify-self: start; }
.forecast-icon { justify-self: center; }
.forecast-temp-value { justify-self: end; }
.weather-separator + .weather-block .weather-main-line {
    display: flex; justify-content: center; gap: 1px;}
.weather-separator + .weather-block .temp-date-container {
    justify-content: center;}
.weather-widget-right {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;  backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);   padding: 8px;}
.weather-widget-right, .weather-widget-right * {
    text-shadow: 1px 1px 2px rgba(0,0,0,1.1) !important;
}

   
.edit-info-modal,
.help-modal {
    background-color: #2c2c2e;  color: #f0f0f0;border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);  border: 1px solid #444;
    padding: 1.5rem;  max-width: 980px;
    position: fixed;top: 50%; left: 50%;transform: translate(-50%, -50%);
    max-height: 90vh; display: flex;flex-direction: column;}
.edit-info-modal h2,
.help-modal h2 {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); margin-bottom: 0.5rem;
    font-size: 1.6rem; font-weight: bold; text-align: center;}
.edit-info-modal p,
.help-modal p {   color: #b0b0b0; font-size: 1.05rem;  line-height: 1.6;}
.edit-info-modal .edit-info-body,
.help-modal .reminder-modal-body { flex-grow: 1;  overflow-y: auto;
    padding-right: 15px; }
.edit-info-modal .help-section {
    margin-bottom: 1.5rem;  padding: 1rem 1.5rem;
    background-color: #3a3a3c; border-left: 4px solid;
    border-radius: 8px;}
.edit-info-modal .help-section h3 {font-weight: bold;   font-size: 1.3rem;  margin-bottom: 0.75rem;}
.edit-info-modal .help-section ul,
.help-modal ul { list-style-type: ' • '; padding-left: 1rem;}
.edit-info-modal .help-section li,
.help-modal li {color: #e0e0e0;   padding-left: 0.5rem; margin-bottom: 0.5rem;}
.edit-info-modal .help-section.help-yellow { border-color: #ffd700; }
.edit-info-modal .help-section.help-yellow h3 { color: #ffd700; }
.edit-info-modal .help-section.help-cyan { border-color: #00c3ff; }
.edit-info-modal .help-section.help-cyan h3 { color: #00c3ff; }
.edit-info-modal .help-section.help-green { border-color: #34c759; }
.edit-info-modal .help-section.help-green h3 { color: #34c759; }
.edit-info-modal strong, .edit-info-modal b,
.help-modal strong, .help-modal b {  color: #f0f0f0; font-weight: 600;}
.edit-info-modal .icon-in-text,
.help-modal .icon-in-text {
    height: 1.4em; display: inline-block;
    vertical-align: text-bottom;  margin: 0 4px;
    padding: 2px; border-radius: 4px;
    background: rgba(255,255,255,0.1);
    border: 1px solid #555;}
.edit-info-modal #close-edit-info,
.help-modal #close-help {
    background-color: #007aff; color: white;
    font-weight: bold; border-radius: 8px;
    min-height: 50px;}
.edit-info-modal #close-edit-info:hover,
.help-modal #close-help:hover {
    background-color: #0056b3;
    height: auto;}

#distance-progress-bar-to-turn-container {
    width: 100%; height: 20px;
    background-color: rgba(40, 40, 40, 0.7); 
    border-radius: 10px;
    overflow: hidden;    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);}
#route-progress-text {
    position: absolute;  text-align: left;
    top: 50%; left: 10px;transform: translateY(-50%);
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: bold; color: yellow;
    -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: black;
    paint-order: stroke fill;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);    font-size: clamp(0.85em, 3vw, 0.95em);
    line-height: 1;  pointer-events: none; z-index: 3;
    background-color: transparent;   padding: 2px;
    white-space: nowrap; }    
#route-overall-progress-container {
    width: 100%; height: 18px; background-color: rgba(40, 40, 40, 0.7); /* AHORA SÍ: Mismo color que el contenedor superior */
    border-radius: 9px; margin-bottom: 9px;
    position: relative; overflow: visible;}    

.forecast-temp-value { justify-self: end; }
.weather-widget-right { width: 470px !important; }
.forecast-item {
    background-color: rgba(0, 0, 0, 0.3) !important;
    display: grid !important;
    grid-template-columns: 28px auto auto 1fr 28px; /* TIEMPO | ICONO | PRECIP | TEMP | HUECO-TERMÓMETRO */
    gap: 4px !important;
    align-items: center;
    padding: 0px 5px;
    border-radius: 10px;}

.forecast-temp-trend {
    justify-self: center;  display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;}

.weather-main-line .forecast-temp-trend img {
    height: 4.3rem !important;
    width: auto !important;
    filter: brightness(1.0) contrast(1.5) saturate(2.0);}

.forecast-item .forecast-temp-trend img {
    height: 2.3rem !important;
    width: auto !important;
    filter: brightness(1.5) contrast(1.5) saturate(2.0) drop-shadow(0 0 3px white);}
    
.weather-widget-right, .weather-widget-right * {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;}
.temp-date-container {
    display: flex;
    align-items: center;  justify-self: start;
    gap: 4px;}
.weather-date {
    font-size: 1.1rem;font-weight: 300;
    color: white; opacity: 0.9;
    margin-left: 3px;
    font-weight:bold;}
.weather-icon img { width: 7.3rem !important; height: 7.3rem !important;  filter: brightness(1.0) contrast(1.5) saturate(2.3) ;  } 
    
.radares-ruta-control,
.tareas-ruta-control,
.pdrs-ruta-control,
.mapbox-control {
    /* Estilos base para unificar apariencia visual */
    display: flex;
    align-items: center;
    justify-content: center; padding: 0.3rem 0.6rem;
    background-color: rgba(200, 200, 180, 0.7);
    border-radius: 5px;  height: 60px;
    min-width: 70px; box-sizing: border-box;
    gap: 3px;
    margin-right: 3px !important; }

#unified-reminder-window *,
.reminder-modal *,
#pdrs-filter-modal-overlay *,        
#quick-reminder-modal *,             
#simulation-modal *,                 
#range-calc-modal *,                 
#reorder-stages-modal *,             
#ai-route-modal *,                   
.poi-category-modal-overlay *,       
.choice-modal *,                     
#alert-modal-overlay *,    
#radar-speed-selection-modal *,    
#route-modal-save-overlay #save-route-prompt-modal,    
#arrival-stats-modal *,    
.radares-ruta-label-container label,
#radares-ruta-count,
.tareas-ruta-label-container label,
#tareas-ruta-count,
.mapbox-label-container label,    
#zoom-controls-horizontal .zoom-control-button,
#zoom-controls-horizontal #zoom-level-display,
#route-modal-load-overlay .route-modal-title,
#route-modal-load-overlay .routes-section-title,
#route-modal-load-overlay .route-modal-tab,
#route-modal-load-overlay .route-name,
#route-modal-load-overlay .route-list-empty,
#route-modal-load-overlay .btn-modal-action-secondary,
#start-route-now-button,    
#maneuver-text-display,
#street-name-display,
#distance-to-turn-formatted,
#route-progress-text,
#navigation-eta-info, 
.radares-ruta-control,
.tareas-ruta-control,
.pdrs-ruta-control,
.mapbox-control,
#maneuver-counter-display {
    text-shadow:1px 1px 1px rgba(0,0,0,1.1) !important;
    -webkit-text-stroke-width: 0;}

#radares-ruta-checkbox,
#tareas-ruta-checkbox,
#pdrs-ruta-checkbox,
#mapbox-primary-checkbox {
    margin-right: 0px;
    margin-bottom: 0px;
    transform: scale(1.1);}

.radares-ruta-label-container,
.tareas-ruta-label-container,
.pdrs-ruta-label-container,
.mapbox-label-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;}

#radares-ruta-checkbox + .radares-ruta-label-container > label,
#tareas-ruta-checkbox + .tareas-ruta-label-container > label,
#pdrs-ruta-checkbox + .pdrs-ruta-label-container > label,
#mapbox-primary-checkbox + .mapbox-label-container > label {
    font-weight: bold;
    font-size: 0.70rem;   color: #333;
    cursor: pointer;  text-align: center;
    line-height: 1.1;
    margin-bottom: 1px;}

#radares-ruta-count,
#tareas-ruta-count,
#pdrs-ruta-count {
    display: flex;  align-items: center;
    justify-content: center;
    width: 25px;  height: 20px;
    color: white; border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;   line-height: 1;
    margin-top: 2px;
}
#radares-ruta-count { background-color: #6600a1; }
#tareas-ruta-count { background-color: #008f39; }
#pdrs-ruta-count { background-color: #007bff; }

#config-button, #personal-button, #radar-button,
#home-button, #reload-button, #keyword-assignment-button,
#password-toggle-button, #versions-button, #info-button, #store-button, #utils-button {
    width: auto !important; height: auto !important;
    background-color: transparent !important; border: none !important;
    box-shadow: none !important; padding: 5px !important;
    position: absolute !important; top: 37px !important;
    z-index: 900 !important; cursor: pointer; border-radius: 50%;
    transition: transform 0.1s ease, background-color 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;}

#utils-button { left: 1012px !important; max-width: 30px !important; max-height: 30px !important; }
#versions-button { left: 969px !important; max-width: 30px !important; max-height: 30px !important; }
#info-button { left: 1055px !important; max-width: 30px !important; max-height: 30px !important; }
#password-toggle-button { left: 1100px !important; top: 25px; }
#versions-button img, #info-button img, #utils-button img, 
#password-toggle-button img {
    max-width: 53px !important; max-height: 37px !important;
    width: 40px; height: 37px; object-fit: contain; display: block;
}