:root { --primary: #4F8FEA; --secondary: #34C77B; --bg: #f8fafc; --card: #fff; --text: #234; --muted: #7a8ca3; --border: #e5e7eb; }
html, body { height: 100%; margin: 0; padding: 0; font-family: 'Inter', Arial, sans-serif; background: var(--bg); color: var(--text); width: 100vw; overflow-x: hidden; }

/* Fullscreen map always (desktop + mobile). Logo and menus overlay the map. */
#map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    min-height: 400px;
    z-index: 1;
    filter: drop-shadow(0 2px 14px rgba(44,62,80,0.13));
    transition: box-shadow 0.2s;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    padding: 0;
}

/* Right-side overlay container (keeps cards over the map on all sizes) */
#rightControls {
    position: absolute;
    top: 20px;
    right: 18px;
    z-index: 7000; /* higher than map and many UI elements */
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    pointer-events: auto;
}
#rightControls .control-card {
    background: var(--card);
    padding: 8px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 18px rgba(44,62,80,.08);
    border: 1px solid var(--border);
    color: var(--text);
    min-width: 160px;
    font-size: 0.9rem;
}
#rightControls .control-card small { font-size: 0.95rem; }

/* Tighten vertical spacing and unify text size for 'estadisticas' and 'transporteStats' */
/* This block ensures:
   - Less vertical gap between individual results
   - Same font-size for items in both cards
   - Consistent distance between the title and the first result */
#rightControls .control-card small {
    font-size: 0.95rem;      /* title size */
    margin: 0 0 6px 0;       /* title -> results distance */
    display: block;
}
#rightControls .control-card small b {
    display: block;
    margin: 0 0 6px 0;       /* keep same spacing below bold title */
    font-weight: 700;
}
#estadisticasList,
#transporteStatsList {
    margin-top: 4px;         /* reduce distance from title */
    margin-bottom: 0;
    font-size: 0.95rem;      /* ensure same size as title for better visual balance */
    line-height: 1.18;       /* slightly compact line-height */
    color: var(--muted);
}
#estadisticasList .stat-line,
#transporteStatsList .stat-line {
    display: block;
    margin: 3px 0;           /* less vertical gap between results */
    padding: 2px 0;
    font-size: 0.95rem;      /* same text size for each result */
    line-height: 1.18;
    color: var(--text);
}

/* New: transport icon in stats (small) */
.transport-stat-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    filter: none;
}

/* marker / UI styles preserved */
.marker-circle { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--card); border: 2.2px solid var(--primary); box-shadow: 0 2px 8px rgba(44,62,80,0.12); overflow: hidden; transition: border-color 0.18s; }
.marker-circle.visitar { border-color: var(--secondary); }
/* New class: "algun-dia" forces dark green border regardless of date */
.marker-circle.algun-dia { border-color: #0b6623; box-shadow: 0 6px 26px rgba(11,102,35,0.14); }

.marker-circle .circle-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--card); border-radius: 50%; z-index: 1;}
/* ensure images/svgs inside marker scale nicely and don't overflow */
.marker-circle svg,
.marker-circle img {
    display: block;
    position: relative;
    z-index: 2;
    width: 58%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    filter: drop-shadow(0 2px 8px rgba(44,62,80,0.07));
    object-fit: contain;
}

/* For transport temp marker icons from viajes.js */
.transport-marker-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Tooltip / popup images inside the city tooltip: limit size so they never overflow the bubble */
.leaflet-tooltip-city img,
.leaflet-tooltip-city .tooltip-img {
    display: block;
    width: 100%;
    max-width: 260px; /* keeps images well inside tooltip's max-width */
    height: auto;
    border-radius: 8px;
    margin-bottom: 8px;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}

/* Backwards-compatible small helper used elsewhere */
.spinner { display: inline-block; width: 32px; height: 32px; border: 4px solid var(--border); border-top: 4px solid var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); } }
.modal.fade .modal-dialog { display: flex !important; align-items: center; min-height: 100vh; justify-content: center;}
.modal-content { border-radius: 18px; box-shadow: 0 4px 32px rgba(44,62,80,.12); border: 1px solid var(--border); background: var(--card);}
.modal-header { border-bottom: 1px solid var(--border); background: var(--bg);}
.modal-title { font-weight: 700; color: var(--black); letter-spacing: -0.5px;}
.modal-footer { border-top: 1px solid var(--border); background: var(--bg);}

#shareMapBtn {
    transition: all 0.3s ease;
}

#shareMapBtn:hover {
    font-weight: bold;
    background-color: #f8f9fa;
}

/* Target only the organizer dropdown so other dropdowns keep their default styling */
#organizerDropdownMenu {
min-width: 320px;
padding: 4px 6px;
}
#organizerDropdownMenu li {
padding: 10px 12px !important; /* menos espacio vertical entre rows */
}
#organizerDropdownMenu .trip-title {
font-size: 0.9em; /* solicitado */
font-weight: 600;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#organizerDropdownMenu .trip-date {
font-size: 0.7em; /* solicitado */
color: #666;
margin-top: 3px;
}
/* delete button smaller */
#organizerDropdownMenu .btn-eliminar {
font-size: 0.78rem;
padding: 4px 6px;
line-height: 1;
}
/* Prevent Bootstrap hover/active background on items inside this menu */
#organizerDropdownMenu .dropdown-item,
#organizerDropdownMenu .dropdown-item:focus,
#organizerDropdownMenu .dropdown-item:hover,
#organizerDropdownMenu .dropdown-item:active {
background: transparent !important;
color: inherit !important;
box-shadow: none !important;
}
/* Ensure li hover doesn't show background */
#organizerDropdownMenu li:hover {
background: transparent !important;
}
/* Slightly reduce vertical density on mobile/touch by reducing min-height for dropdown items */
#organizerDropdownMenu .dropdown-item {
min-height: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Style to match modalTipoMarcador buttons for the "Crear Nuevo" button in dropdown:
    We'll rely on bootstrap .btn classes, but ensure the dropdown spacing doesn't crush the button. */
#organizerDropdownMenu .create-new-btn-wrapper {
padding: 8px 12px;
text-align: center;
}
#organizerDropdownMenu .create-new-btn {
display: inline-block;
width: auto;
}

/* --- New styles for hover-show dropdown and remove focus box on the title --- */
/* Reforzadas: eliminar outline persistente en todos los estados que Bootstrap/navegadores puedan aplicar,
   y añadir peso de fuente en hover. Si prefieres mantener una señal de foco para accesibilidad por teclado,
   lo revertimos y aplicamos foco sólo para :focus-visible. */

button#openOrganizadorBtn,
#openOrganizadorBtn {
    outline: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    -moz-outline-style: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: font-weight 120ms ease, background 120ms ease;
}

/* estados específicos donde Bootstrap puede aplicar ring/box-shadow */
button#openOrganizadorBtn:focus,
#openOrganizadorBtn:focus,
button#openOrganizadorBtn:active,
#openOrganizadorBtn:active,
button#openOrganizadorBtn:focus-visible,
#openOrganizadorBtn:focus-visible,
button#openOrganizadorBtn[aria-expanded="true"],
#openOrganizadorBtn[aria-expanded="true"],
#organizerDropdown .dropdown-toggle.show,
#organizerDropdown .dropdown-toggle[aria-expanded="true"] {
    outline: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-color: transparent !important;
}

/* Negrita en hover/mouse: usar !important para superar reglas de Bootstrap si es necesario */
#openOrganizadorBtn:hover,
#openOrganizadorBtn:active,
#openOrganizadorBtn[aria-expanded="true"],
#organizerDropdown:hover > #openOrganizadorBtn {
    font-weight: 700 !important;
}

/* Mantener apariencia coherente con el resto de botones sin mostrar anillo al hacer click */
#openOrganizadorBtn:focus {
    /* Si quieres restaurar un anillo accesible sólo para teclado, cambia esta regla a:
       #openOrganizadorBtn:focus-visible { outline: 3px solid rgba(79,143,234,0.16); outline-offset: 3px; }
       y elimina el outline:none de :focus-visible más arriba. */
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure hovering the dropdown root doesn't add background to the button */
#organizerDropdown:hover > #openOrganizadorBtn {
background: transparent !important;
}

/* ... REST OF CSS UNCHANGED (kept below as originally) ... */

/* Fecha selects, estadisticas, tooltips y resto del fichero sin cambios funcionales.
   (Se mantienen todas las reglas previas para los demás componentes). */

/* Tightened and preserved rest of styles (copied as before starting from .modal-footer) */
.form-label { color: var(--muted); font-weight: 500;}
.form-select, .form-control { border-radius: 8px; border: 1.4px solid var(--border); background: var(--card); font-size: 1.05rem; transition: border-color 0.13s;}
.form-select:focus, .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(79,143,234,0.11); }
.modal-backdrop.show { opacity: 0.20; z-index: 99998;}
.modal { z-index: 99999; }

.fecha-selects { display: flex; gap: 14px; align-items: center; }
.fecha-selects select { min-width: 90px; }

/* Tooltip personalizado para marcador de ciudad */
.leaflet-tooltip-city {
    background: #fff;
    color: #234;
    border-radius: 12px;
    border: 2px solid var(--primary);
    box-shadow: 0 2px 14px rgba(44,62,80,0.15);
    padding: 6px 6px 6px 6px;
    font-size: 1em;
    min-width: 180px;
    max-width: 320px;
    transition: box-shadow 0.2s, border-color 0.18s;
}

.leaflet-tooltip-city .nombre-ciudad {
    color: var(--primary);
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: block;
    margin-bottom: 2px;
    text-shadow: 0 2px 8px rgba(44,62,80,0.07);
    transition: color 0.18s;
}

.leaflet-tooltip-city .info-ciudad {
    color: var(--muted);
    font-size: 0.9em;
    margin: 2px 0 0 0;
    font-weight: 500;
    display: block;
}

.leaflet-tooltip-city .info-valor {
    color: var(--text);
    font-weight: 600;
    margin-left: 3px;
}

.leaflet-tooltip-city:hover,
.leaflet-tooltip-city.leaflet-tooltip-hover {
    border-color: var(--secondary);
    box-shadow: 0 6px 28px rgba(52,199,123,0.11);
}

/* Estilos para la autenticación */
#authButtonContainer {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 12000; /* ¡Aumentado! */
    box-shadow: 0 4px 16px rgba(0,0,0,0.18); /* sombra para destacar */
}


#authButtonContainer:hover {
    transform: translateY(-2px);
}

/* Estilo sobrio para el botón Login/Registro */
#authButton {
    background: #fff;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
    border-radius: 20px;
    padding: 8px 22px;
    box-shadow: 0 2px 10px rgba(79,143,234,0.08);
    font-size: 1.08em;
    transition: background 0.17s, color 0.16s, border 0.16s, box-shadow 0.15s;
    outline: none;
}

#authButton:hover, #authButton:focus {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 18px rgba(79,143,234,0.16);
    text-decoration: none;
}


/* USER INFO: más sobrio y pequeño por defecto; mobile usa 90% de ancho */
#userInfo {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 12000;
    display: none;
    animation: fadeIn 0.2s ease; /* ligeramente más rápido */
    max-width: 280px; /* reducido para aspecto más compacto */
}

/* Card más sobria: menos sombra, bordes más discretos y tamaño contenido */
#userInfo .card {
    min-width: 150px;
    max-width: 280px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid rgba(15,23,42,0.05); /* borde más sutil */
    box-shadow: 0 6px 14px rgba(15,23,42,0.04); /* sombra muy suave */
    padding: 0;
}

/* Body del userInfo compacto */
#userInfo .card-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

/* Título más pequeño y sobrio */
#userInfo .card-title {
    color: var(--text);
    font-weight: 700;
    font-size: 0.95em;
    margin: 0 0 6px 0;
    font-family: 'Inter', Arial, sans-serif;
    letter-spacing: -0.2px;
    word-break: break-all;
}

/* Botón de cerrar sesión más discreto */
#userInfo #logoutButton {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.88em;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    transition: background 0.13s, color 0.13s, border 0.13s, transform 0.12s;
    box-shadow: none;
    align-self: flex-end;
}

/* Hover mantiene legibilidad pero sigue sobrio */
#userInfo #logoutButton:hover, 
#userInfo #logoutButton:focus {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* Mobile: ocupar 90% del ancho, centrar y mantener un estilo compacto */
@media (max-width: 600px) {
    #userInfo {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 14px !important;
        width: 90% !important; /* solicitado: usar 90% del ancho en celulares */
        max-width: none !important;
        min-width: 0 !important;
    }

    #userInfo .card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 10px;
        padding: 0;
    }

    #userInfo .card-body {
        padding: 10px;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    #userInfo .card-title {
        width: 100%;
        word-break: break-word;
        text-align: center;
        margin-bottom: 6px;
        font-size: 0.95em;
        padding: 0;
    }

    #userInfo #logoutButton {
        display: block;
        margin: 2px auto 0 auto;
        padding: 6px 12px;
        font-size: 0.92em;
        max-width: 180px;
        width: auto;
        text-align: center;
        border-radius: 8px;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-backdrop.auth {
    z-index: 9999;
}

.modal.auth {
    z-index: 10000;
}

/* Proximo evento: default top center (desktop). On mobile we position it 80px from footer on the right. */
#proximoEventoAviso {
    display: none;
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    z-index: 13100 !important;
    min-width: 260px;
    max-width: 92vw;
    padding: 18px 34px 14px 24px;
    background: linear-gradient(90deg, #fffbe7 70%, #faf6dd 100%);
    color: #684d00;
    font-size: 1.10em;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(255,210,79,0.18), 0 2px 8px rgba(44,62,80,0.07);
    border: 2.5px solid #ffe18c;
    text-align: left;
    letter-spacing: -0.5px;
    transition: box-shadow 0.25s, border-color 0.2s;
    animation: fadeInAviso 0.7s cubic-bezier(.77,.2,.24,1.13);
    pointer-events: auto;
}
@keyframes fadeInAviso {
    from { opacity: 0; transform: translateX(-50%) scale(0.94); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
#proximoEventoAviso b {
    color: #4F8FEA;
    font-size: 1.08em;
    font-weight: 700;
}
#proximoEventoAviso .close-btn {
    position: absolute;
    right: 12px;
    top: 11px;
    background: rgba(255,225,140,0.07);
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #684d00;
    padding: 5px 10px;
    border-radius: 9px;
    transition: background 0.18s;
}
#proximoEventoAviso .close-btn:hover {
    background: rgba(255,225,140,0.18);
}
#proximoEventoAviso .evento-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    font-size: 1.35em;
    color: #FFD700;
}
#proximoEventoAviso .fecha {
    display: inline-block;
    margin-left: 4px;
    font-size: 1em;
    color: #825a00;
    font-weight: 400;
    background: #fff7c4;
    padding: 1px 8px;
    border-radius: 8px;
    margin-top: 4px;
    margin-bottom: 0;
}      

#proximoEventoAviso .close-btn:hover { background: rgba(0,0,0,0.04); }

/* Responsive tweaks - keep map fullscreen and overlays above it */
@media (max-width: 991px) {
    /* keep the map at top:0 so it is fullscreen behind overlays */
    #map { top: 0; height: 100vh; }

    /* ensure controls and logo are clearly above the map */
    #rightControls { top: 14px; right: 12px; z-index: 8000; }

    /* Slightly smaller control-cards on narrow screens */
    #rightControls .control-card { min-width: 140px; padding: 10px 12px; font-size: 0.95rem; }
}

@media (max-width: 600px) {
    /* Proximo aviso at 80px above bottom (so it doesn't cover bottom-left login) */
    #proximoEventoAviso {
        left: auto;
        top: auto;
        bottom: 120px;   /* <-- requested: 80px from footer */
        right: 18px;
        transform: none;
        min-width: 200px;
        max-width: 86vw;
        z-index: 9998;
    }

    #authButtonContainer {
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        bottom: 20px !important;
        z-index: 12000 !important; /* ¡Aumentado! */
        max-width: 95vw;
    }
    #authButton {
        width: 100%;
        min-width: 120px;
    }

    /* Logo should stay above the map, slightly smaller on tiny screens */
    #logovisiMAP { top: 12px; left: 12px; z-index: 9000; transform: none; }

    /* Keep right controls accessible but not too wide */
    #rightControls { top: 12px; right: 12px; z-index: 9000; }
    #rightControls .control-card { min-width: 130px; padding: 10px 10px; }
}

/* --- Session-closed overlay: white letters with green border and realistic shine --- */
#sessionClosedMessage {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 7000;
    color: #ffffff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    text-align: center;
    padding: 12px 26px;
    border-radius: 14px;
    background: rgba(0,0,0,0.14);
    border: 2px solid var(--secondary);
    box-shadow: 0 8px 36px rgba(52,199,123,0.12);
    font-size: clamp(18px, 3.5vw, 40px);
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
}

/* New: smaller explanatory subtext under the main phrase */
#sessionClosedSubtext {
    margin-top: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    max-width: 72vw;
    line-height: 1.25;
    font-weight: 500;
}

/* Backdrop that darkens the map while session is closed.
   It is full-screen and sits under the message (lower z-index than the message).
   Display is controlled by JS when the user is unauthenticated. */
#sessionBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 6600; /* slightly below #sessionClosedMessage (7000) but above map (z-index:1) */
    background: rgba(0,0,0,0.46); /* darker mask to give prominence to the message */
    backdrop-filter: blur(2px) saturate(1.05);
    transition: opacity 220ms ease;
}

/* When shown, ensure the message remains readable and centered */
@media (max-width: 600px) {
    #sessionClosedMessage {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        min-width: 200px;
        max-width: 90vw;
        font-size: 1.1em;
        padding: 20px 12px 24px 12px;
        border-radius: 16px;
        background: rgba(0,0,0,0.17);
    }
    #sessionClosedText {
        font-size: 1.25em;
    }
    #sessionClosedSubtext {
        font-size: 0.95rem;
        max-width: 86vw;
        margin-top: 10px;
    }
}

@keyframes shineMove {
    0%   { left: -120%; opacity: 0; }
    10%  { opacity: 0.0; }
    45%  { left: 120%; opacity: 0.9; }
    70%  { opacity: 0.0; }
    100% { left: 120%; opacity: 0; }
}

/* New styles for clickable stat lines */
.stat-line { display:block; cursor: pointer; user-select: none; padding: 1px 0; transition: all 0.16s ease; }
.stat-line .stat-label { font-weight: 400; }
.stat-line .stat-value { font-weight: 400; margin-left:6px; }

/* Replace underline behavior with a visible badge-like selection
   UPDATED: Use a light gray modern badge that fits the theme */
.stat-line.active {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f3f4f6 0%, #eef2f6 100%); /* soft light gray */
    color: #1f2937; /* dark-gray text for good contrast */
    box-shadow: 0 6px 18px rgba(15,23,42,0.06), inset 0 -1px 0 rgba(255,255,255,0.6);
    border: 1px solid #e6e9ee; /* subtle border to define the badge */
}
/* Ensure inner label/value contrast when active */
.stat-line.active .stat-label,
.stat-line.active .stat-value {
    color: #374151;
    font-weight: 700;
}

/* small transition to make toggling feel smoother */
.stat-line:hover { transform: translateY(-1px); }

#selectorAnioContainer .form-select,
#selectorEventoContainer .form-select {
    font-size: 0.8em;
}

#transporteStatsList {
    font-size: 0.8em !important;
}

#sessionClosedText {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

#sessionClosedText::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    height: 100%; width: 120%;
    background: linear-gradient(115deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.6) 75%, rgba(255,255,255,0) 95%);
    pointer-events: none;
    animation: shineMove 2.2s cubic-bezier(.77,.2,.24,1.13) infinite;
}

@keyframes shineMove {
    0%   { left: -120%; opacity: 0; }
    10%  { opacity: 0.0; }
    45%  { left: 120%; opacity: 0.9; }
    70%  { opacity: 0.0; }
    100% { left: 120%; opacity: 0; }
}

/* Opcional: resalta el texto con un glow suave también */
#sessionClosedText {
    text-shadow:
        0 1px 12px #34C77B88,
        0 0px 6px #4F8FEA;
    transition: text-shadow 0.35s;
}

/* Eventos aviso estilo personalizado */
#proximoEventoAviso .eventos-titulo {
    color: #222;
    font-size: 1.15em;
    font-weight: 700;
    font-family: 'Montserrat', Arial, sans-serif;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}
#proximoEventoAviso .eventos-lista {
    margin: 0;
    padding-left: 18px;
}
#proximoEventoAviso .eventos-lista li {
    font-size: 0.97em;
    color: #555;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
    margin-bottom: 2px;
    letter-spacing: -0.2px;
}         

/* Tooltip de países: POSICIÓN A LA IZQUIERDA respecto al contenedor de estadísticas.
   - top:20px para alinearlo verticalmente (no encima de las estadístiscas)
   - right: calc(100% + 12px) lo coloca a la izquierda del padre con un pequeño gap
   - pointer-events desactivado hasta que se muestre (.show) para no bloquear interacción
   - en pantallas pequeñas vuelve a su comportamiento "debajo" (top:110%) para garantizar visibilidad */
.custom-tooltip-paises {
    display: none;
    position: absolute;
    top: 20px;
    right: calc(100% + 12px); /* sitúa el tooltip a la izquierda del contenedor padre */
    left: auto;
    z-index: 9999;
    min-width: 160px;
    max-width: 260px;
    background: #fff;
    color: #234;
    border-radius: 12px;
    border: 2px solid var(--primary);
    box-shadow: 0 2px 14px rgba(44,62,80,0.18);
    padding: 10px 14px;
    font-size: 0.96em;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
    text-align: left;
    transition: opacity 0.18s, transform 0.12s;
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
}
.custom-tooltip-paises.show {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.custom-tooltip-paises ul {
    margin: 7px 0 0 18px;
    padding: 0;
}
.custom-tooltip-paises li {
    list-style-type: disc;
    margin-bottom: 2px;
    font-weight: 400;
    font-size: 0.97em;
}

/* Fallback para pantallas pequeñas: mostrar debajo para evitar quedar cortado fuera de pantalla */
@media (max-width: 600px) {
    .custom-tooltip-paises {
        top: 110%;
        left: 0;
        right: auto;
        transform: none;
        pointer-events: none;
    }
    .custom-tooltip-paises.show {
        pointer-events: auto;
    }
}

/* MODAL LOGIN/REGISTRO MODERNO Y SOBRIO */
#authModal .modal-content {
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--card);
    box-shadow: 0 4px 24px rgba(44,62,80,0.09);
    padding: 0;
}
#authModal .modal-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 20px 28px 12px 28px;
}
#authModal .modal-title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.5px;
    font-size: 1.30em;
}
#authModal .modal-body {
    padding: 22px 28px 10px 28px;
    background: var(--card);
}
#authModal .modal-footer {
    border-top: 1px solid var(--border);
    background: var(--bg);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    padding: 12px 28px;
}
#authModal .form-label {
    color: var(--muted);
    font-weight: 500;
    font-size: 1em;
    margin-bottom: 6px;
}
#authModal .form-control, 
#authModal .form-select {
    background: var(--bg);
    border: 1.4px solid var(--border);
    border-radius: 8px;
    font-size: 1.04em;
    color: var(--text);
    transition: border-color 0.16s;
}
#authModal .form-control:focus, 
#authModal .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(79,143,234,0.12);
    background: var(--card);
}
#authModal .form-check-label {
    color: var(--muted);
    font-size: 0.98em;
}
#authModal .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
#authModal .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
    border-radius: 9px;
    box-shadow: none;
    padding: 8px 20px;
    transition: background 0.16s, box-shadow 0.16s;
}
#authModal .btn-primary:hover, 
#authModal .btn-primary:focus {
    background: #336bb3;
    border-color: #336bb3;
    color: #fff;
    box-shadow: 0 2px 12px rgba(79,143,234,0.13);
}
#authModal .btn-secondary {
    background: var(--bg);
    border-color: var(--border);
    color: var(--primary);
    font-weight: 500;
    border-radius: 9px;
    box-shadow: none;
    padding: 8px 18px;
}
#authModal .btn-close {
    filter: grayscale(0.7);
    opacity: 0.7;
    margin-right: -4px;
}
#authModal .btn-close:hover {
    opacity: 1;
    filter: grayscale(0);
}
#authModal #authError {
    color: #c00;
    font-size: 0.99em;
    margin-bottom: 8px;
    font-weight: 500;
    background: #fff3f3;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid #f2dede;
}

/* --- MODAL TIPO MARCADOR: Estilo sobrio y adaptado al theme --- */
#modalTipoMarcador .modal-content {
    border-radius: 16px;
    border: 1.5px solid var(--border);
    background: var(--card);
    box-shadow: 0 4px 32px rgba(44,62,80,0.12);
    padding: 0;
    text-align: center;
}
#modalTipoMarcador .modal-header {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 18px 24px 10px 24px;
}
#modalTipoMarcador .modal-title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.5px;
    font-size: 1.05rem;
}

/* Banner install button */
#installBtn {
  background: #ffffff !important;
  color: var(--primary) !important;
  border: 1.6px solid var(--primary) !important;
  padding: 4px 10px !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(79,143,234,0.08) !important;
  line-height: 1 !important;
}

/* Hover / focus para mantener contraste pero sutil */
#installBtn:hover,
#installBtn:focus {
  background: #f6fbff !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 18px rgba(79,143,234,0.12) !important;
  text-decoration: none !important;
}

/* Small install link (segunda opción en el sidebar) */
#smallInstallLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  color: var(--primary) !important;
  border: 1.2px solid var(--primary) !important;
  padding: 4px 8px !important;
  font-size: 0.78rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(79,143,234,0.06) !important;
}

/* Hover / focus del enlace pequeño */
#smallInstallLink:hover,
#smallInstallLink:focus {
  background: #f6fbff !important;
  color: var(--primary) !important;
  text-decoration: none !important;
}

/* Compatibilidad con tamaños de botón de Bootstrap: forzar min-height más pequeño */
#installBtn.btn-sm,
#smallInstallLink.btn-sm {
  min-height: 30px !important;
}

/* ========================================================================
   New: Modal-specific styling for modalDatos, modalEvento and modalTipoMarcador
   These rules intentionally target only those modals and related classes
   so the rest of the global CSS is untouched.
   ======================================================================== */

/* Base look for the three modals: softer background, subtler shadow and smooth transitions */
#modalDatos .datos-modal-content,
#modalEvento .evento-modal-content,
#modalTipoMarcador .modal-content {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--card));
    box-shadow: 0 12px 36px rgba(15,23,42,0.07);
    transition: transform 240ms cubic-bezier(.2,.9,.25,1), box-shadow 240ms ease, opacity 180ms ease;
    overflow: hidden;
}

/* Slight entrance lift for these modals; initial state is slightly scaled and translated */
#modalDatos .modal-dialog .modal-content,
#modalEvento .modal-dialog .modal-content,
#modalTipoMarcador .modal-dialog .modal-content {
    transform: translateY(8px) scale(0.996);
    opacity: 0.97;
}

/* When shown, normalize transform -> smooth pop-in */
#modalDatos.show .modal-dialog .modal-content,
#modalEvento.show .modal-dialog .modal-content,
#modalTipoMarcador.show .modal-dialog .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow: 0 18px 48px rgba(15,23,42,0.10);
}

/* Header adjustments (consistent with theme, lighter background and softer border) */
#modalDatos .datos-modal-header,
#modalEvento .evento-modal-content .modal-header,
#modalEvento .modal-header,
#modalTipoMarcador .modal-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
}

/* Titles in these modals: Montserrat, bold and compact */
#modalDatos .datos-modal-title,
#modalEvento .modal-title,
#modalTipoMarcador .modal-title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 1.05rem;
}

/* Modal body spacing and subtle separation from header/footer */
#modalDatos .datos-modal-body,
#modalEvento .evento-modal-content .modal-body,
#modalEvento .modal-body,
#modalTipoMarcador .modal-body {
    padding: 18px 20px;
    color: var(--text);
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(250,250,252,0.99));
}

/* Footer style: keep buttons visible but consistent with theme (no heavy shadows) */
#modalDatos .datos-modal-footer,
#modalEvento .modal-footer,
#modalTipoMarcador .modal-footer {
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding: 12px 18px;
}

/* Make action buttons slightly larger and more tactile inside these modals */
#modalDatos .modal-footer .btn,
#modalEvento .modal-footer .btn,
#modalTipoMarcador .modal-footer .btn {
    border-radius: 10px;
    padding: 8px 16px;
    min-width: 88px;
    transition: transform 120ms ease, box-shadow 160ms ease;
}

/* Hover micro-interaction */
#modalDatos .modal-footer .btn:hover,
#modalEvento .modal-footer .btn:hover,
#modalTipoMarcador .modal-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(15,23,42,0.06);
}

/* Specific style for the "Guardar" / primary buttons in those modals */
#modalDatos .modal-footer .btn-primary,
#modalEvento .modal-footer .btn-warning,
#modalTipoMarcador .modal-footer .btn-primary {
    box-shadow: none;
}

/* Tweak the warning/save in evento to match theme but keep emphasis */
#modalEvento .btn-warning {
    background: linear-gradient(90deg, #ffb84d, #ff9800);
    border: 1px solid rgba(0,0,0,0.03);
    color: #fff;
    font-weight: 600;
}

/* Drag & Drop zone (modalDatos) - visually integrated with theme */
.foto-dropzone {
    border-radius: 10px;
    border: 1.4px dashed var(--border);
    background: linear-gradient(180deg, rgba(248,250,252,0.9), rgba(255,255,255,0.98));
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.foto-dropzone:focus,
.foto-dropzone.dragover {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 12px 36px rgba(79,143,234,0.08);
    transform: translateY(-2px);
}
.foto-dropzone .foto-icon {
    font-size: 28px;
}
.foto-dropzone .foto-instructions {
    font-size: 0.95rem;
    color: var(--muted);
    text-align: center;
    max-width: 320px;
}

/* Preview inside dropzone */
.foto-preview {
    width: 100%;
    display: block;
    text-align: center;
}
.foto-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}

/* Foto clear button style (modalDatos) */
#fotoClearBtn {
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.9rem;
}

/* Modal tipo marcador: make the choice buttons more prominent but soft */
#modalTipoMarcador .modal-body {
    padding: 18px 22px 24px 22px;
}
#modalTipoMarcador #btnTipoViaje,
#modalTipoMarcador #btnTipoEvento {
    min-width: 140px;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(15,23,42,0.06);
    transition: transform 140ms ease, box-shadow 180ms ease;
}
#modalTipoMarcador #btnTipoViaje {
    background: linear-gradient(90deg, rgba(79,143,234,1), rgba(51,107,179,1));
    color: #fff;
    border: none;
}
#modalTipoMarcador #btnTipoEvento {
    background: linear-gradient(90deg, #ffd27a, #ffb84d);
    color: #6a3700;
    border: none;
}
#modalTipoMarcador #btnTipoViaje:hover,
#modalTipoMarcador #btnTipoEvento:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(15,23,42,0.09);
}

/* Accessibility focus outlines (only for keyboard users) */
#modalDatos .modal-dialog .modal-content:focus-visible,
#modalEvento .modal-dialog .modal-content:focus-visible,
#modalTipoMarcador .modal-dialog .modal-content:focus-visible {
    outline: 3px solid rgba(79,143,234,0.12);
    outline-offset: 4px;
}

/* Make sure the smaller form elements inside modalDatos keep good spacing on small screens */
@media (max-width: 600px) {
    #modalDatos .datos-modal-body,
    #modalEvento .evento-modal-content .modal-body {
        padding: 12px;
    }
    #modalTipoMarcador #btnTipoViaje,
    #modalTipoMarcador #btnTipoEvento {
        min-width: 120px;
        padding: 10px 14px;
        font-size: 0.95rem;
    }
}

/* ========================================================================
   FIX: Improve touch interaction for right-side controls on mobile
   - Ensure the right controls are above the map on small screens
   - Allow pointer events and touch-action so selects/checkboxes receive touches
   - Avoid tap highlight visual noise
   ======================================================================== */
@media (max-width: 600px) {
    /* make sure controls are clearly above everything on tiny screens */
    #rightControls {
        z-index: 12010 !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* ensure the selectorEvento container and its children accept pointer events */
    #selectorEventoContainer,
    #selectorEventoContainer * {
        pointer-events: auto !important;
        -webkit-user-select: none;
    }

    /* the checkbox should respond to touch gestures; avoid surprises with touch-action */
    #selectorEventoContainer .form-check-input {
        touch-action: manipulation;
        -webkit-user-select: none;
    }
    #selectorEventoContainer .form-check-label {
        -webkit-user-select: none;
        cursor: pointer;
    }

    /* also make card itself easier to tap */
    #selectorEventoContainer .control-card {
        -webkit-tap-highlight-color: transparent;
    }
}

/* make dropdown-item buttons look like anchor items */
#organizerDropdown .dropdown-item[role="link"],
#mobileMenuPanel .dropdown-item[role="link"] {
  background: transparent;
  border: 0;
  padding: 0.5rem 0.75rem;
  width: 100%;
  text-align: left;
}
#organizerDropdown .trip-link:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(79,143,234,0.18);
}

/* MOBILE HAMBURGER (moved to LEFT side and with very high z-index so it sits above everything) */
#mobileMenuBtn {
display: none; /* hidden by default, shown on small screens via media query */
position: fixed;
/* Default values (won't affect desktop) */
top: 90px;
left: 14px; /* moved to left side */
z-index: 13005; /* very high to be above all map elements and overlays */
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(255,255,255,0.96);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
border: 0;
cursor: pointer;
align-items: center;
justify-content: center;
padding: 0;
}
#mobileMenuBtn:focus { outline: 2px solid rgba(79,143,234,0.6); }

/* Hamburger lines */
#mobileMenuBtn .bars {
display: inline-block;
width: 20px;
height: 14px;
position: relative;
}
#mobileMenuBtn .bars span {
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #1b1b1b;
display: block;
border-radius: 2px;
}
#mobileMenuBtn .bars span:nth-child(1) { top: 0; }
#mobileMenuBtn .bars span:nth-child(2) { top: 6px; }
#mobileMenuBtn .bars span:nth-child(3) { top: 12px; }

/* The mobile panel that appears when the hamburger is activated (positioned to the LEFT) */
#mobileMenuPanel {
display: none; /* hidden by default; we toggle via JS */
position: fixed;
left: 14px; /* align under the hamburger on the left */
top: 140px; /* appears below the hamburger / below map zoom; tuned for mobile */
z-index: 13004; /* just under the button but above the map */
width: calc(92vw);
max-width: 360px;
max-height: calc(80vh);
overflow: auto;
background: rgba(255,255,255,0.98);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(8,18,34,0.35);
padding: 8px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}

/* Header of the panel: already present in markup; adjust styles for compactness */
#mobileMenuPanelHeader { padding: 8px 12px; }
#mobileMenuPanelInner { padding: 8px 12px; }

/* When the mobile panel is visible we still keep rightControls intact;
    the script will move the relevant nodes into this panel on small screens. */

/* Hide centered nav on small screens (we'll move it into the mobile panel) */
@media (max-width: 768px) {
/* Keep default hiding for centerNav at its original position, BUT allow it to be visible when inside the mobile panel.
    We provide a specific override: when #centerNav is a descendant of #mobileMenuPanel, show it as a vertical list. */
#centerNav { display: none !important; }
#mobileMenuBtn { display:flex; }

/* Make the center nav render vertically inside the mobile panel */
#mobileMenuPanel #centerNav {
    display: flex !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-direction: column !important; /* vertical list */
    align-items: stretch !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Ensure the center nav buttons stretch full width and align left */
#mobileMenuPanel #centerNav .btn,
#mobileMenuPanel #centerNav .dropdown-toggle {
    width: 100%;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Keep share-like buttons visually separated */
#mobileMenuPanel #shareMapBtn { padding-top: 10px; padding-bottom: 10px; }

/* Dropdown menu inside the panel: static positioning so it sits under the toggle, but don't force it visible.
    Bootstrap controls visibility via the .show class on .dropdown-menu; we only override positioning so it flows with the vertical list. */
#mobileMenuPanel .dropdown-menu {
    position: static !important;
    float: none !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 6px 0 0 0 !important;
    width: 100% !important;
}

/* Make dropdown items full-width and stacked */
#mobileMenuPanel .dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
}

/* Ensure the panel is sized reasonably on small phones */
#mobileMenuBtn { top: 86px; left: 14px; }

#mobileMenuPanel {
    top: 140px;
    left: 10px;
    right: auto;
    width: calc(94vw);
    max-width: 360px;
}
}

/* Desktop: keep the mobile elements hidden */
@media (min-width: 769px) {
#mobileMenuPanel { display:none !important; }
#mobileMenuBtn { display:none !important; }
}

/* Small visual tweaks to keep dropdown items looking good inside the mobile panel */
#mobileMenuPanel .dropdown-item, #mobileMenuPanel .dropdown-item-text { display:block; padding:8px 6px; }
#mobileMenuPanel .create-new-btn { width:100%; display:block; text-align:center; margin-top:6px; }