/* Tema Maincra para BlueMap: interfaz oscura moderna con acento ambar.
   Subir a bluemap/web/maincra.css (junto a maincra.js).
   Lo carga el propio BlueMap (webapp.conf) o lo inyecta IIS en cada pagina. */

:root {
    --theme-bg: #fdc800;
}

/* Base */
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    background: #0c0d0c !important;
}

/* Menu lateral: cristal oscuro */
.side-menu {
    background: rgba(12, 13, 12, .94) !important;
    backdrop-filter: blur(10px);
    border-right: 1px solid #262822 !important;
}

/* Botones del menu: pastillas redondeadas */
.side-menu .simple-button {
    border: 1px solid #262822 !important;
    border-radius: 10px !important;
    margin: 4px 8px !important;
}

.side-menu .simple-button:hover {
    border-color: #fdc800 !important;
}

.side-menu .simple-button .label {
    color: #ece7d8 !important;
    font-size: 14px !important;
}

/* Botones de mapa */
.side-menu .map-button {
    border-radius: 10px !important;
}

.side-menu .map-button .sky img {
    border-radius: 6px;
}

/* Deslizadores y controles con acento ambar */
/* Tema Maincra para BlueMap 3.14: interfaz oscura moderna con acento ambar.
   Subir a bluemap/web/maincra.css (junto a maincra.js). */

:root {
    --theme-bg: #fdc800;
    --theme-bg-hover: #e3b400;
    --theme-bg-light: #3a3d38;
}

/* Barra superior de controles: pastilla flotante */
.control-bar {
    background: rgba(12, 13, 12, .92) !important;
    backdrop-filter: blur(10px);
    border: 1px solid #262822 !important;
    border-radius: 14px !important;
    margin: 12px !important;
    padding: 6px !important;
}

/* Botones de la barra: redondeados */
.svg-button,
.menu-button {
    border-radius: 9px !important;
}

/* Campos de coordenadas: mono y compactos */
.pos-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 13px !important;
    border-radius: 9px !important;
}

/* Menu lateral: tarjeta flotante de cristal oscuro */
.side-menu {
    background: rgba(12, 13, 12, .94) !important;
    backdrop-filter: blur(10px);
    border: 1px solid #262822 !important;
    border-radius: 16px !important;
    margin: 12px !important;
    max-height: calc(100% - 24px) !important;
    overflow-y: auto !important;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.side-menu .title {
    font-family: Georgia, serif !important;
    font-size: 20px !important;
    letter-spacing: 1px !important;
    padding: 14px 14px 6px !important;
}

.side-menu .simple-button {
    border: 1px solid #262822 !important;
    border-radius: 10px !important;
    margin: 4px 8px !important;
}

.side-menu .simple-button:hover {
    border-color: #fdc800 !important;
}

.side-menu .simple-button .label {
    color: #ece7d8 !important;
    font-size: 14px !important;
}

.side-menu .map-button {
    border-radius: 10px !important;
}

.side-menu .map-button .sky img {
    border-radius: 6px;
}

/* Deslizadores con acento ambar */
.side-menu input[type="range"] {
    accent-color: #fdc800;
}

/* Barras de desplazamiento discretas */
.side-menu ::-webkit-scrollbar {
    width: 8px;
}

.side-menu ::-webkit-scrollbar-thumb {
    background: #33362f;
    border-radius: 8px;
}

.side-menu ::-webkit-scrollbar-track {
    background: transparent;
}

/* Marca Maincra arriba del menu (la crea maincra.js) */
.mc-brand {
    font-family: Georgia, serif;
    font-size: 20px;
    letter-spacing: 1px;
    color: #ece7d8;
    padding: 14px 14px 6px;
}

.mc-brand b {
    color: #fdc800;
    font-weight: 400;
}

/* Boton flotante de vuelta al estado (lo crea maincra.js) */
.mc-back {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 9999;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    letter-spacing: .4px;
    text-decoration: none;
    color: #fdc800;
    background: rgba(12, 13, 12, .92);
    backdrop-filter: blur(8px);
    border: 1px solid #6b5600;
    border-radius: 999px;
    padding: 11px 18px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.mc-back:hover {
    background: #fdc800;
    color: #171604;
}

/* Lista de jugadores dentro, sobre el mapa */
.mc-roster {
    position: fixed;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 9998;
    width: 232px;
    max-height: 46vh;
    overflow-y: auto;
    background: rgba(12, 13, 12, .93);
    backdrop-filter: blur(10px);
    border: 1px solid #262822;
    border-radius: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: #ece7d8;
}

.mc-roster-head {
    cursor: pointer;
    padding: 12px 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    list-style: none;
    color: #ece7d8;
}

.mc-roster-head::-webkit-details-marker {
    display: none;
}

.mc-roster-count {
    color: #fdc800;
}

.mc-roster-list {
    border-top: 1px solid #262822;
    padding: 6px 8px 10px;
}

.mc-roster-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    overflow-wrap: anywhere;
}

.mc-roster-row img {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    image-rendering: pixelated;
    flex: none;
    background: #1c1e1b;
}

.mc-roster-empty {
    display: block;
    padding: 8px 6px;
    color: #9d9a8c;
}

@media (max-width: 640px) {
    .control-bar {
        margin: 8px !important;
    }
    .mc-roster {
        width: 200px;
    }
}