/* =========================================
           ESTILOS GENERALES Y MAPA
           ========================================= */
        html, body { 
            margin: 0; 
            height: 100%; 
            background: #111; 
            overflow: hidden; 
        }
        
#map { 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    background: #2a241e;
    
    /* MEJORAS DE RENDIMIENTO CSS */
    image-rendering: -webkit-optimize-contrast; /* Mejora la nitidez en algunos navegadores */
    will-change: transform; /* Prepara a la tarjeta gráfica para los movimientos de zoom */
}

        /* =========================================
           EFECTOS VISUALES (RASTRO Y LUCES)
           ========================================= */
        .hex-recorrido { 
            fill: #5d462a; 
            fill-opacity: 0.4; 
            stroke: #3d2b16; 
            stroke-width: 1; 
            pointer-events: none; /* Ignora clics para no bloquear el mapa */
        }
        
        /* Animación y efectos de iluminación */
        .hex-iluminado { 
            filter: drop-shadow(0 0 5px #00ff00) drop-shadow(0 0 30px #22ff00) brightness(1.3) !important; 
            animation: latido-luz-verde 1.5s infinite alternate; 
            z-index: 500 !important; 
        }
        
        .hex-logrim { 
            filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 15px rgba(0, 255, 0, 0.7)) !important; 
            z-index: 499 !important; 
        }
        
		.hex-completado { 
			filter: drop-shadow(0 0 3px #ff6600) 
					drop-shadow(0 0 6px #ff9900)
					brightness(1.2) !important;
			opacity: 1 !important; 
			z-index: 400 !important;
		}

        @keyframes latido-luz-verde { 
            from { filter: drop-shadow(0 0 5px #00ff00) drop-shadow(0 0 20px #22ff00) brightness(1.1); } 
            to { filter: drop-shadow(0 0 10px #00ff00) drop-shadow(0 0 45px #22ff00) brightness(1.5); } 
        }

        /* =========================================
           INTERFAZ DE USUARIO (UI)
           ========================================= */
        
        /* Buscador y Botonera Superior */
        #search-container { 
            position: absolute; 
            top: 10px; 
            left: 55px; 
            right: 10px; 
            max-width: 800px; 
            z-index: 1001; 
            background: rgba(245, 240, 220, 0.9); 
            padding: 10px; 
            border-radius: 5px; 
            border: 2px solid #5d462a; 
            display: flex; 
            gap: 8px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
            align-items: center; 
        }
        
        #searchInput { 
            flex-grow: 1; 
            padding: 8px; 
            border: 1px solid #8b6b3e; 
            border-radius: 3px; 
            font-family: 'EB Garamond', serif; 
            font-size: 16px; 
            outline: none; 
        }
        
        /* Estilos de Botones Medievales */
        .btn-medieval { 
            background: linear-gradient(145deg, #8b6b3e, #5d462a); 
            color: #f5f0dc; 
            padding: 8px 15px; 
            border: 1px solid #3d2b16; 
            border-radius: 3px; 
            font-family: 'Eagle Lake', serif; 
            font-size: 11px; 
            cursor: pointer; 
            text-shadow: 1px 1px 2px black; 
            white-space: nowrap; 
        }
        
        .btn-marcado-activo { 
            background: linear-gradient(145deg, #2d5a27, #1a3a16) !important; 
            border-color: #00ff00 !important; 
            box-shadow: 0 0 10px rgba(0,255,0,0.5); 
        }

        /* Estilos de los Popups (Ventanas emergentes) */
        .leaflet-popup-content-wrapper { 
            background: #fdfaf0 !important; 
            border: 2px solid #5d462a !important; 
            font-family: 'EB Garamond', serif; 
        }
        
        .input-nota { 
            width: 100%; 
            height: 120px; 
            font-size: 18px; 
            border: 1px solid #8b6b3e; 
            padding: 8px; 
            font-family: 'EB Garamond', serif; 
            box-sizing: border-box; 
            resize: none; 
            background: #fffcf5; 
            margin-top: 10px; 
        }
        
        .btn-accion { 
            margin-top: 8px; 
            width: 100%; 
            color: white; 
            padding: 10px; 
            border-radius: 4px; 
            cursor: pointer; 
            border: none; 
            font-family: 'Eagle Lake', serif; 
            font-size: 11px; 
            text-shadow: 1px 1px 1px black; 
        }
        
        .btn-guardar-nota { background: #2d5a27; }
        .btn-marcar { background: #5d462a; }

        /* Canvas para la Nieve */
        #snowCanvas { 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            z-index: 1000; 
            pointer-events: none; 
            display: none; 
            filter: blur(0.5px); 
        }

        /* JUKEBOX BOLA PERFECTA */
#jukebox-container {
    position: absolute; 
    bottom: 30px; 
    left: 20px;
    z-index: 2500; 
    background: rgba(245, 240, 220, 0.95);
    padding: 0 !important; /* Forzamos 0 para que no sea un rectángulo */
    border-radius: 50%; 
    border: 2px solid #5d462a;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
    width: 55px; 
    height: 55px;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* El icono 🎵 */
.jukebox-title { 
    font-size: 26px; 
    margin: 0;
    line-height: 55px;
    text-align: center;
    display: block;
    width: 100%;
}

/* CUANDO SE EXPANDE */
#jukebox-container:hover, 
#jukebox-container:focus-within {
    width: 260px;
    height: auto;
    border-radius: 12px;
    padding: 15px !important; /* Aquí sí recupera el padding para el texto */
    justify-content: flex-start;
}

/* Control de visibilidad del contenido */
#jukebox-container .jukebox-content {
    display: none;
    width: 100%;
}

#jukebox-container:hover .jukebox-content,
#jukebox-container:focus-within .jukebox-content {
    display: block;
}

        .jukebox-title { font-family: 'Eagle Lake', serif; font-size: 11px; margin-bottom: 8px; text-align: center; color: #5d462a; }
        .select-medieval { width: 100%; padding: 5px; font-family: 'EB Garamond', serif; font-size: 14px; border: 1px solid #8b6b3e; background: #fffcf5; margin-bottom: 10px; cursor: pointer; }
        .jukebox-controls { display: flex; gap: 5px; justify-content: center; align-items: center; }
        #volume-slider { width: 100%; margin-top: 10px; accent-color: #5d462a; cursor: pointer; }

        /* Tooltip (Etiqueta flotante al pasar el ratón) */
        .tooltip-medieval {
            background: rgba(45, 35, 20, 0.9) !important;
            border: 1px solid #8b6b3e !important;
            color: #f5f0dc !important;
            font-family: 'Eagle Lake', serif !important;
            font-size: 14px !important;
            border-radius: 3px !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
            padding: 5px 10px !important;
        }

        /* Ocultar flechas por defecto de Leaflet */
        .leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, 
        .leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
            display: none !important;
        }
        
        /* Inputs Generales */
        input::placeholder {
            color: #b0b0b0 !important;
            opacity: 0.6;
            font-style: italic;
            font-weight: normal;
        }

        input[type="number"] {
            color: #000000; 
            font-weight: bold;
        }

/* Estilos específicos para la barra de progreso del Jukebox */
        .seek-container { 
            display: flex; 
            align-items: center; 
            gap: 5px; 
            margin-bottom: 8px; 
            color: #5d462a; 
            font-family: monospace; 
            font-size: 10px; 
        }
        #seek-slider { 
            flex-grow: 1; 
            accent-color: #5d462a; 
            height: 5px; 
            cursor: pointer; 
        }
        .jukebox-icon-mobile { display: none; } /* Se activa en media query */

/* Estilo para el estado desactivado (Rojo medieval) */
.btn-marcado-off {
    background: linear-gradient(145deg, #a43a3a, #6d1d1d) !important;
    border-color: #4a0e0e !important;
}
			}

        /* Escritorio: Mostrar textos */
/* REPRODUCTOR COMPACTO UNIVERSAL (PC Y MÓVIL) */
#jukebox-container {
    position: absolute; 
    bottom: 30px; 
    left: 20px;
    z-index: 2001; 
    background: rgba(245, 240, 220, 0.95);
    padding: 10px; 
    border-radius: 50%; /* Siempre empieza como círculo */
    border: 2px solid #5d462a;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
    width: 50px;
    height: 50px;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* Se expande al pasar el ratón o al clicar (focus) */
#jukebox-container:hover, 
#jukebox-container:focus-within {
    width: 250px; /* Un poco más ancho para que quepa bien el texto */
    height: auto;
    border-radius: 8px;
    padding: 15px;
    cursor: default;
}

/* Ocultar el contenido interno cuando está cerrado */
#jukebox-container .jukebox-content {
    display: none;
    width: 100%;
}

/* Mostrar contenido al expandir */
#jukebox-container:hover .jukebox-content,
#jukebox-container:focus-within .jukebox-content {
    display: block;
}

/* El icono de la nota musical siempre centrado cuando está cerrado */
.jukebox-title { 
    font-size: 24px; 
    margin: 0;
    line-height: 30px;
}

        /* =========================================
           ESTILOS DEL DIARIO (PDF)
           ========================================= */
        #pdf-template { 
            display: none; 
            width: 750px; 
            background: #fdfaf0; 
            padding: 30px 40px; 
            border: 12px double #5d462a; 
            box-sizing: border-box; 
            margin: 0 auto;
        }

        .pdf-titulo { 
            font-family: 'Mea Culpa', cursive; 
            font-size: 55px; 
            color: #3c2814; 
            margin: 0;
            line-height: 0.8;
        }

        .pdf-sub { 
            font-family: 'Pinyon Script', cursive; 
            font-size: 24px; 
            color: #8b4513; 
            margin-top: 20px; 
            display: block;
        }

        .pdf-nota { 
            font-family: 'Pinyon Script', cursive; 
            font-size: 20px; 
            line-height: 1.1; 
            color: #1a1a1a;
            white-space: pre-wrap;
            text-align: left;
        }

        /* Header del PDF */
        .pdf-header { 
            text-align: center; 
            border-bottom: 2px dashed #8b6b3e; 
            margin-bottom: 20px; 
            padding-bottom: 10px;
            break-after: avoid; 
            page-break-after: avoid;
        }

        /* Contenedor principal sin restricciones */
        #pdf-contenido {
            display: block;
            width: 100%;
            page-break-inside: auto !important;
        }

        /* Ítem individual (Crónica) - Configuraciones ANTI-CORTE */
        .pdf-item { 
            margin-bottom: 40px; 
            padding-top: 5px; 
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(139, 107, 62, 0.15);
            display: block;
            width: 100%;
            page-break-inside: avoid !important; 
            break-inside: avoid-page !important;
            position: relative;
            overflow: visible; 
        }

        /* Flex interno para asegurar que foto y texto viajen juntos */
        .pdf-cuerpo-flex {
            display: flex;
            align-items: flex-start;
            width: 100%;
            page-break-inside: avoid !important;
        }

        .pdf-foto {
            width: 140px; 
            height: 140px;
            object-fit: cover;
            border: 6px double #5d462a;
            margin-right: 25px;
            display: inline-block; 
        }

        .pdf-loc { 
            font-family: 'Eagle Lake', serif; 
            font-size: 19px; 
            color: #2d5a27; 
            margin: 0;
        }
		
		/* Estilos para el Token de Grupo */
		.token-escalable img {
			filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
			transition: transform 0.2s;
		}
		.selector-transporte span:hover {
			transform: scale(1.3);
			display: inline-block;
		}
		
		/* --- NUEVAS MEJORAS VISUALES --- */

/* Resplandor para botones al pasar el ratón */
.btn-medieval:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px #00d4ff;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Mejora del pergamino de las notas */
.leaflet-popup-content-wrapper {
    box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 50px rgba(139, 107, 62, 0.1) !important;
}

/* --- MEJORAS DEL TABLÓN --- */
#nueva-mision {
    width: 100%;
    height: 80px; /* Altura para ver unas 3-4 líneas */
    padding: 10px;
    border: 1px solid #c1a35f;
    background: rgba(255, 255, 255, 0.9);
    font-family: 'EB Garamond', serif;
    resize: vertical; /* Permite estirar hacia abajo pero no hacia los lados */
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* RECUERDA: La pestaña debe estar fuera del 100% para que se vea */
#pestaña-tablon {
    position: absolute;
    left: -35px; /* Esto la saca "fuera" del panel hacia la izquierda */
    top: 50%;
    transform: translateY(-50%);
    width: 25px; /* Ajusta según el ancho real de tu pestaña */
    z-index: 1001;
    /* Evita que el texto se desborde si es muy pequeña */
    writing-mode: vertical-rl;
    white-space: nowrap;
}

.tablon-header button {
    transition: all 0.3s ease;
}

/* Opcional: un efecto para cuando el textarea está activo */
#nueva-mision:focus {
    border-color: #ffd700;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    outline: none;
}

.madera-fondo { 
    background: #3d2b16; 
    border: 10px solid #2a1d0e; 
    padding: 20px; 
    width: 100%; 
    max-height: 70vh; /* <-- AÑADIDO: Máximo 85% de la altura de la ventana */
    box-shadow: inset 0 0 50px #000; 
    display: flex; 
    flex-direction: column; 
}

/* Alineación en una sola fila */
.mision-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* El contenedor del papelito de misión ahora es más compacto */
.mision-item {
    background: #fdfaf0; /* Color pergamino claro */
    color: #2c1e14;      /* Texto marrón muy oscuro */
    border: 1px solid #8b6b3e;
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* El texto de la misión */
.mision-texto { 
    font-family: 'EB Garamond', serif; 
    font-size: 16px; 
    color: #1a1a1a; 
    display: block; 
    margin-bottom: 2px; /* Casi pegado a los iconos */
    line-height: 1.1;
}

/* Los iconos debajo, muy juntos y pequeños */
.mision-acciones-mini { 
    display: flex; 
    justify-content: flex-end; 
    gap: 12px; /* Espacio horizontal entre iconos */
    font-size: 13px; /* Iconos más pequeños */
    cursor: pointer;
    border-top: 1px dashed rgba(0,0,0,0.1); /* Una línea muy sutil */
    padding-top: 2px;
}

/* Ajuste específico para el checkbox para que no desalinee */
.mision-acciones-mini input {
    margin: 0;
    transform: scale(0.8); /* Checkbox un poco más pequeño */
}

/* Los iconos se quedan agrupados a la derecha */
.mision-acciones-iconos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Evita que los iconos se aplasten */
}

.mision-item.completada { background: #c3bc9f; opacity: 0.8; }
.mision-acciones { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px dashed rgba(0,0,0,0.1); padding-top: 5px; }
.mision-acciones-lateral {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Impide que los iconos se achaquen */
    font-size: 14px;
}
.mision-contenido-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.btn-accion { border: none; background: none; cursor: pointer; font-size: 16px; }
#filtro-misiones { background: #5d462a; color: #e2c98d; border: 1px solid #8b6b3e; font-family: 'Eagle Lake', serif; width: 100%; margin-bottom: 10px; }

		/* =========================================
           ESTILOS DE LAS LOCALIZACIONES (POPUP)
           ========================================= */
        .popup-medieval {
            font-family: 'EB Garamond', serif;
            width: 250px;
            background: #fdfaf0;
            padding: 5px;
        }

        .popup-titulo {
            font-family: 'Eagle Lake', serif;
            font-size: 18px;
            color: #5d462a;
            text-align: center;
            border-bottom: 2px solid #8b6b3e;
            margin-bottom: 10px;
            padding-bottom: 5px;
        }

        .popup-imagen {
            width: 100%;
            height: auto;
            border: 2px solid #8b6b3e;
            border-radius: 5px;
            margin-bottom: 10px;
            display: block;
        }

        .label-nota {
            font-family: 'Eagle Lake', serif;
            font-size: 12px;
            color: #333;
            margin-bottom: 5px;
        }

        .popup-textarea {
            width: 100%;
            height: 100px;
            background: #fff;
            border: 1px solid #8b6b3e;
            font-family: 'EB Garamond', serif;
            font-size: 16px;
            padding: 8px;
            box-sizing: border-box;
            resize: none;
        }

        .btn-popup {
            flex: 1;
            padding: 8px 5px;
            font-family: 'Eagle Lake', serif;
            font-size: 10px;
            cursor: pointer;
            border: 1px solid #8b6b3e;
            color: #e2c98d;
            background: #5d462a;
            transition: all 0.3s;
        }

        .btn-completar { background: #3d5d2a !important; }
        .btn-guardar { background: #5d462a !important; }

        .btn-popup:hover { filter: brightness(1.2); }

        /* Ajuste para que el fondo de Leaflet sea pergamino */
        .leaflet-popup-content-wrapper {
            background: #fdfaf0 !important;
            padding: 0;
            border-radius: 8px;
        }
        .leaflet-popup-content {
            margin: 10px;
        }

/* AÑADE ESTO (Para el cuadro de texto) */
#nueva-mision {
    width: 100%;
    height: 80px;
    padding: 10px;
    border: 1px solid #c1a35f;
    background: rgba(255, 255, 255, 0.9);
    font-family: 'EB Garamond', serif;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* OPCIONAL: El estilo de la lista de misiones */
.mision-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Colores de los bordes según el rango */
.rango-hierro { border-left: 8px solid #7a7a7a !important; }
.rango-bronce { border-left: 8px solid #cd7f32 !important; }
.rango-acero { border-left: 8px solid #4682b4 !important; }
.rango-plata { border-left: 8px solid #c0c0c0 !important; }
.rango-oro { border-left: 8px solid #ffd700 !important; }
.rango-URGENTE { border-left: 8px solid #ff0000 !important; }

.icono-rango-grande {
    display: inline-block;
    font-size: 1.4rem; /* Ajusta este número para hacerlo más o menos grande */
    margin-right: 8px;
    vertical-align: middle; /* Para que quede alineado con el centro del texto */
    line-height: 1;
}

/* =========================================
   SISTEMA DE HISTORIAL Y EFECTOS FINALES
   ========================================= */

/* 1. Animación del Jukebox (La bola que late) */
.jukebox-activo {
    animation: latido-musical 2s infinite ease-in-out;
    border-color: #ffae00 !important;
    box-shadow: 0 0 15px rgba(255, 174, 0, 0.6) !important;
}

@keyframes latido-musical {
    0% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 174, 0, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 174, 0, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 174, 0, 0.4); }
}

/* 2. Estilo del Botón de Cerrar del Historial */
#visor-backups .btn-medieval {
    background: linear-gradient(145deg, #8b6b3e, #5d462a) !important;
    color: #f5f0dc !important;
    border: 1px solid #3d2b16 !important;
    padding: 8px 20px !important;
    font-family: 'Eagle Lake', serif !important;
    font-size: 12px !important;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px black;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    cursor: pointer;
    display: inline-block;
}

#visor-backups .btn-medieval:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px #00d4ff !important; /* Brillo azulado como tus otros botones */
}

/* 3. Estilo de las filas de crónicas */
#visor-backups div[onclick] {
    background: rgba(61, 43, 22, 0.8) !important;
    border: 1px solid #8b6b3e !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
    transition: all 0.3s ease;
}

#visor-backups div[onclick]:hover {
    background: rgba(139, 107, 62, 0.6) !important;
    border-color: #ffd700 !important;
    transform: translateX(10px);
}

.tab-activa {
    background: #8b6b3e !important; /* Un color un poco más claro para resaltar */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5) !important;
    border-bottom: none !important;
}

/* =========================================
   MEJORA PARA ESCRITORIO (PANTALLA GRANDE)
   ========================================= */
@media (min-width: 1200px) {

    .madera-fondo {
        width: 100% !important;
        max-width: 650px;
    }

    /* Hacemos el texto más grande para aprovechar el espacio */
    .mision-texto {
        font-size: 18px; 
    }
}

/* =========================================
   REPARACIÓN DEFINITIVA TABLÓN
   ========================================= */

/* Pestaña: Color sólido para que no sea transparente */
#pestaña-tablon {
    position: absolute;
    left: -35px; /* Ajusta según el ancho real */
    top: 50%;
    transform: translateY(-50%);
    background: #5d462a; /* Color madera sólido */
    color: #e2c98d;
    padding: 15px 5px;
    writing-mode: vertical-rl;
    cursor: pointer;
    border-radius: 10px 0 0 10px;
    border: 2px solid #8b6b3e;
    border-right: none;
    font-family: 'Eagle Lake', serif;
    font-size: 12px;
    z-index: 1001;
    white-space: nowrap;
}

/* Capa para envolver el contenido y que flote sobre la madera */
.contenido-interno {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;        /* Ocupa todo el alto disponible del panel */
    width: 100%;
    overflow: hidden;    /* Importante para que no aparezca scroll doble */
}

/* 1. Contenedor principal de la cabecera: pone los elementos en fila */
.cabecera-tablon {
    display: flex;
    align-items: center;         /* Centra verticalmente botones y título */
    justify-content: space-between; /* Botones a los extremos, título al centro */
    padding: 5px 10px;
    gap: 10px;                   /* Espacio mínimo entre elementos */
	background: rgba(0, 0, 0, 0.3);
    margin: 0; /* Aseguramos que no haya margen */
}

/* 2. Ajuste del Título para que no ocupe más de una línea */
.titulo-compacto-fila {
    margin: 0 !important;
    font-size: 18px !important;  /* Reducimos un poco para asegurar que quepa */
    color: #ffd700;
    text-shadow: 2px 2px 4px #000;
    font-family: 'Eagle Lake', serif;
    text-align: center;
    white-space: nowrap;         /* Evita que el título salte de línea */
    flex-shrink: 1;              /* Permite que el título se ajuste si hay poco espacio */
}

/* 3. Estilo para los botones de las pestañas (más compactos) */
.cabecera-tablon .btn-medieval {
    padding: 5px 8px;            /* Menos relleno para ganar espacio */
    font-size: 13px;             /* Texto un pelín más pequeño */
    min-width: 90px;             /* Ancho mínimo para que sean iguales */
    flex-shrink: 0;              /* Los botones no se encogen, se encoge el título */
    margin: 0;                   /* Quitamos márgenes que puedan molestar */
}

/* 4. Ajuste final para que los filtros suban un poco */
.grupo-filtros {
    display: flex;
    gap: 5px;
	padding: 2px 10px 5px 10px; /* Reducimos padding vertical */
    margin: 0;
    margin-top: -5px;            /* Subimos los filtros para pegar a la cabecera */
}

#lista-misiones-scroll, #lista-leyendas-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;       /* Obliga a estirarse para llenar el hueco */
    overflow-y: auto;
    margin: 0 10px 10px 10px; /* 0 arriba para pegarse a los selectores */
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #8b6b3e;
    min-height: 100px;    /* Seguridad: nunca medirá menos de esto */
}

.footer-compacto {
    padding: 10px;
    background: rgba(44, 30, 20, 0.95);
    border-top: 2px solid #8b6b3e;
}

/* AJUSTE PARA PC */
@media (min-width: 1200px) {
    #tablon-misiones { width: 650px !important; }
}

/* 1. EL CUERPO DEL TABLÓN (Única definición) */
#tablon-misiones {
    position: fixed;
    top: 50%;         /* Centrado vertical real */
    right: 0;
    width: 350px;
    height: 90vh; 
    z-index: 1000;
    transition: transform 0.5s ease-in-out;
    display: flex !important;
    flex-direction: column;
    background: #2c1e14;
    border-left: 4px solid #8b6b3e;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    
    /* El truco: empezamos centrados en Y */
    transform: translateY(-50%); 
}

/* 2. ESTADOS DE APERTURA (Combinando X e Y) */

/* Estado cerrado: Mantenemos el -50% vertical y lo sacamos 100% a la derecha */
.tablon-cerrado {
    transform: translateY(-50%) translateX(100%) !important;
}

/* Estado abierto: Mantenemos el -50% vertical y lo ponemos en su sitio (0) */
.tablon-abierto {
    transform: translateY(-50%) translateX(0) !important;
}

/* 3. LA PESTAÑA (Para que siempre esté en el centro del tablón) */
#pestaña-tablon {
    position: absolute;
    left: -35px; 
    top: 50%;
    transform: translateY(-50%); /* Centra la pestaña respecto al panel */
    background: #5d462a;
    color: #e2c98d;
    padding: 15px 5px;
    writing-mode: vertical-rl;
    cursor: pointer;
    border-radius: 10px 0 0 10px;
    border: 2px solid #8b6b3e;
    border-right: none;
    font-family: 'Eagle Lake', serif;
    font-size: 12px;
    z-index: 1001;
    white-space: nowrap;
}

/* Ajuste para pantallas grandes (Mantenemos el centrado vertical) */
@media (min-width: 1200px) {
    #tablon-misiones { 
        width: 650px !important; 
        /* El transform se heredará de las clases abierto/cerrado */
    }
}

.oculto {
    display: none !important;
}

/* Estilo para el nuevo botón de modificar */
.btn-modificar {
    background: #3498db !important; /* Azul para diferenciarlo de borrar y completar */
    color: white !important;
    border: 1px solid #2980b9 !important;
    padding: 2px 6px !important;
    margin-right: 5px;
    cursor: pointer;
    font-size: 10px;
}

/* Contenedor de filtros: los pone en una fila */
.grupo-filtros {
    display: flex; /* Esto ya lo tienes */
    gap: 5px;
    padding: 5px 10px;
    width: 100%;       /* Añade esto para asegurar que ocupe todo el ancho */
    box-sizing: border-box; /* Añade esto para que el padding no ensanche el div */
}

/* Estilo para los dos selectores por igual */
#filtro-misiones, #filtro-nivel {
    flex: 1;
    background: #3d2b16;
    color: #e2c98d;
    border: 1px solid #8b6b3e;
    border-radius: 4px;
    padding: 4px;
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    cursor: pointer;
    
    /* AÑADE ESTO PARA IGUALARLOS: */
    height: 32px;      /* Forzamos la misma altura en ambos */
    margin: 0;         /* Eliminamos cualquier margen que los esté moviendo */
    line-height: 1.2;  /* Alineación del texto interna */
    box-sizing: border-box; 
}

/* Efecto hover para ambos */
#filtro-misiones:hover, #filtro-nivel:hover {
    border-color: #ffd700;
}

/* Clase de utilidad para el JS */
.oculto {
    display: none !important;
}

/* Aplicamos el mismo estilo medieval al selector del pie de página */
#nivel-mision-nueva {
    background: #3d2b16;
    color: #e2c98d;
    border: 1px solid #8b6b3e;
    border-radius: 4px;
    padding: 4px;
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    cursor: pointer;
    height: 32px;
    box-sizing: border-box;
    outline: none;
}

/* Efecto al pasar el ratón */
#nivel-mision-nueva:hover {
    border-color: #ffd700;
}

/* ============================================================
   UNIFICACIÓN ADAPTACIÓN MÓVIL - TUS POSICIONES FINALES
   ============================================================ */
@media (max-width: 768px) {
    
    /* 1. BUSCADOR (LUPA) - Al lado del Zoom */
    #search-container {
        position: fixed;
        top: 10px;
        left: 55px;        /* Espacio para el control de zoom a su izquierda */
        right: auto;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0;
        border: 2px solid #5d462a;
        background: rgba(245, 240, 220, 0.95);
        z-index: 2000;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    /* Expandir buscador al hacer foco */
    #search-container:focus-within {
        width: calc(100% - 20px); 
        left: 10px;
        height: auto !important;
        flex-wrap: wrap;
        border-radius: 8px;
        padding: 10px !important;
    }

    #search-container::before {
        content: "🔍";
        min-width: 44px;
        text-align: center;
        font-size: 18px;
        line-height: 40px;
        display: block;
    }

    /* 2. BOTÓN MODO LECTURA (EL CANDADO) */
    #btn-lock {
        position: fixed !important;
        top: 10px !important;
        right: 112px !important; 
        left: auto !important;
        z-index: 3000 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
    }

    #lock-text { display: none !important; }
    #lock-icon { font-size: 20px !important; } /* Icono un poco más grande */

    /* 3. CONTROLES NATIVOS DE LEAFLET (ZOOM +/-) */
    .leaflet-top.leaflet-left {
        top: 0px !important;
        left: 10px !important;
    }

    /* 4. GESTIÓN DE BOTONES E INTERFAZ */
    .text-boton { display: none !important; }

    #search-container .btn-medieval {
        display: none;
        padding: 8px;
        min-width: 42px;
        margin-left: 5px;
        margin-top: 5px;
    }

    #search-container:focus-within .btn-medieval {
        display: flex;
    }
}