/* =====================================================================
   Waypoints de enemigos - Mapa Medieval
   Se carga DESPUES de overviewer.css para poder pisar .ov-marker
   ===================================================================== */

/* overviewer.css define .ov-marker SIN ancho ni alto, asi que la imagen
   se dibuja a tamano real. Con un icono de 1274 px eso tapa el mapa.
   Aqui se fija el tamano y se centra el icono sobre su coordenada:
   los margenes en pixeles sustituyen a los -50% del original, que
   dependen del ancho del contenedor y con tamano fijo no centran bien. */
.ov-marker {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-left: -24px;
    margin-top: -24px;
    image-rendering: pixelated;          /* que no se emborrone el pixel art */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .75));
    transition: transform .12s ease-out;
    cursor: pointer;
}

.ov-marker:hover {
    transform: scale(1.18);
}

/* Escalado por zoom.
   Con 134 marcadores, 48 px es correcto de cerca pero al ver la isla
   entera los iconos se solapan y tapan el mapa. mapaui.js escribe el
   nivel de zoom en data-zoom del contenedor y aqui se ajusta el tamano.
   Los margenes son siempre la mitad del tamano, que es lo que centra el
   icono sobre su coordenada. */
.leaflet-container[data-zoom="0"] .ov-marker,
.leaflet-container[data-zoom="1"] .ov-marker {
    width: 18px; height: 18px; margin-left: -9px; margin-top: -9px;
}
.leaflet-container[data-zoom="2"] .ov-marker {
    width: 24px; height: 24px; margin-left: -12px; margin-top: -12px;
}
.leaflet-container[data-zoom="3"] .ov-marker {
    width: 32px; height: 32px; margin-left: -16px; margin-top: -16px;
}
.leaflet-container[data-zoom="4"] .ov-marker {
    width: 40px; height: 40px; margin-left: -20px; margin-top: -20px;
}

@media (prefers-reduced-motion: reduce) {
    .ov-marker { transition: none; }
    .ov-marker:hover { transform: none; }
}

/* --- globo de informacion al hacer clic --- */
.ov-enemigo-popup {
    font-family: "Segoe UI", Tahoma, sans-serif;
    line-height: 1.45;
    min-width: 130px;
}

.ov-enemigo-popup b {
    font-size: 1.05em;
}

.ov-enemigo-nota {
    color: #5c6a61;
    font-size: .9em;
}

.ov-enemigo-coords {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #dbe2dc;
    font-family: Consolas, "Courier New", monospace;
    font-size: .85em;
    color: #5c6a61;
}

/* --- tabla de estadisticas del globo --- */
.ov-stats {
    border-collapse: collapse;
    margin: 5px 0 2px;
    width: 100%;
}
.ov-stats td {
    padding: 1px 0;
    font-size: .9em;
    vertical-align: baseline;
}
.ov-stats td:first-child {
    color: #5c6a61;
    padding-right: 12px;
    white-space: nowrap;
}
.ov-stats td:last-child {
    font-family: Consolas, "Courier New", monospace;
    color: #161c18;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Aviso para los mobs cuya configuracion en el servidor esta a medias
   (valores de ejemplo del pack, o sin dano definido). */
.ov-aviso {
    margin-top: 6px;
    padding: 4px 7px;
    background: #f6ebd6;
    border-left: 3px solid #b07a12;
    border-radius: 2px;
    font-size: .82em;
    line-height: 1.35;
    color: #6b4b09;
}

/* =====================================================================
   Editor (solo con ?editar=1)
   ===================================================================== */
.leaflet-top .ed-panel {
    width: 210px;
    margin: 8px 10px 0 0;
    padding: 11px 12px 12px;
    background: var(--ui-fondo, rgba(18,20,18,.92));
    border: 2px solid var(--ui-borde, #5b9c3d);
    border-radius: 5px;
    color: var(--ui-texto, #f2f4f1);
    font-family: "Segoe UI", Tahoma, sans-serif;
    box-shadow: 0 3px 14px rgba(0,0,0,.6);
}
.ed-panel.sucio { border-color: #e7b44c; }

.ed-cab {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 3px;
}
.ed-ayuda {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ui-suave, #9fae9f);
    margin-bottom: 9px;
}
.ed-fila {
    display: flex;
    gap: 6px;
    margin-bottom: 7px;
}
.ed-fila > * { flex: 1; }

.ed-tipo {
    min-width: 0;
    padding: 5px 6px;
    background: #0f120f;
    border: 1px solid var(--ui-borde-2, #2f3a2c);
    border-radius: 3px;
    color: var(--ui-texto, #f2f4f1);
    font-family: inherit;
    font-size: 12px;
}

.ed-btn {
    padding: 6px 9px;
    background: rgba(35,45,32,.9);
    border: 1px solid var(--ui-borde, #5b9c3d);
    border-radius: 3px;
    color: var(--ui-texto, #f2f4f1);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.ed-btn:hover  { background: rgba(50,70,45,.95); }
.ed-btn.activo { background: var(--ui-borde, #5b9c3d); color: #0f120f; }
.ed-btn.ed-alt { border-color: var(--ui-borde-2, #2f3a2c); color: var(--ui-suave, #9fae9f); font-weight: 500; }
.ed-btn.ed-alt:hover { color: var(--ui-texto, #f2f4f1); }
.ed-panel > .ed-btn { width: 100%; margin-top: 2px; }

.ed-estado {
    margin: 2px 0 8px;
    font-size: 11.5px;
    color: var(--ui-suave, #9fae9f);
    min-height: 15px;
}
.ed-panel.sucio .ed-estado { color: #e7b44c; font-weight: 600; }

/* Botón de borrar dentro del globo */
.ed-borrar {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 5px;
    background: #f6e2de;
    border: 1px solid #b33a28;
    border-radius: 3px;
    color: #8a2b1c;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.ed-borrar:hover { background: #b33a28; color: #fff; }

/* Mientras se arrastra, que no moleste el globo ni el tooltip */
.leaflet-dragging .ov-marker { cursor: grabbing; }

/* Icono de cada familia en el control de capas. overviewer.css le pone
   1.5em de alto y lo alinea a la derecha; aqui solo se le da un hueco
   fijo para que los nombres de las familias queden en columna. */
.leaflet-control-layers .ov-marker-legend {
    height: 20px;
    width: 20px;
    object-fit: contain;
    margin-left: 10px;
    image-rendering: auto;
}