/* Encuesta ETS2 - tema carretera / camión */
/* Regla: sobre fondo oscuro el texto siempre amarillo o blanco, nunca oscuro */
:root {
    /* Espacio bajo la nav fija + mismos anchos para scroll-margin en anclas */
    --nav-stack-offset: 44px;
    --bg-dark: #1a1d23;
    --bg-card: #252a33;
    --bg-input: #2d333d;
    --border: #3d4552;
    --text: #e8eaed;
    --text-muted: #ffffff;
    --accent: #f5a623;
    --accent-hover: #e0951a;
    --success: #34a853;
    --error: #ea4335;
    --convoy-yes: #81c14b;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
    padding-top: var(--nav-stack-offset);
}

/* Enlaces: siempre amarillo/naranja sobre fondo oscuro, nunca morado (salvo .nav-link que va sobre botón) */
.container a:link,
.container a:visited {
    color: var(--accent);
}
.container a:hover {
    color: #f5e623;
    font-style: italic;
}
.container a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 100;
    background: var(--bg-dark);
    overflow: visible;
}

.nav-menu-bar {
    width: 100%;
    max-width: min(1200px, calc(100vw - 1.5rem));
    min-width: 0;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem 0.6rem;
    box-sizing: border-box;
}

.nav-menu-inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    box-sizing: border-box;
}

/* Buscador del sitio (inyectado por busqueda.js) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-search {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
}

/* Escritorio: menú centrado en la barra; buscador (y candado) a la derecha */
@media (min-width: 769px) {
    .nav-menu-bar {
        position: relative;
        display: block;
        min-height: 2.75rem;
        padding: 0.5rem 1rem;
    }
    .nav-menu-bar .nav-menu-inner {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        flex: none;
        width: max-content;
        max-width: calc(100% - 12rem);
        justify-content: center;
    }
    /* Páginas sin busqueda.js (p. ej. calibrar-mapa): inner directo bajo .nav-menu */
    .nav-menu > .nav-menu-inner {
        padding: 0.5rem 1rem;
    }
    .nav-menu-esquina--inicio {
        position: absolute;
        right: 1rem;
        top: 50%;
        left: auto;
        transform: translateY(-50%);
        margin: 0;
        z-index: 2;
    }
    .nav-menu-esquina--izq {
        position: absolute;
        left: 1rem;
        top: 50%;
        right: auto;
        transform: translateY(-50%);
        margin: 0;
        z-index: 2;
    }
    .nav-menu-bar--con-edicion .nav-menu-esquina--inicio {
        right: calc(1rem + 2.25rem + 0.35rem);
    }
    .nav-menu-esquina--fin {
        position: absolute;
        right: 1rem;
        top: 50%;
        left: auto;
        transform: translateY(-50%);
        margin: 0;
        z-index: 2;
    }
    .site-search-panel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 9.5rem;
        min-width: 0;
        max-width: 9.5rem;
    }
    .site-search-input {
        width: 100%;
        font-size: 0.8rem;
        padding: 0.3rem 0.45rem;
    }
}

.nav-menu-esquina--fin.btn-edicion {
    flex: 0 0 auto;
    align-self: center;
    padding: 0;
    margin: 0;
}

.nav-menu-esquina--izq.btn-edicion {
    flex: 0 0 auto;
    align-self: center;
    padding: 0;
    margin: 0;
}

.site-search-toggle,
.nav-menu-esquina--fin.btn-edicion,
.nav-menu-esquina--izq.btn-edicion {
    box-sizing: border-box;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
}

.site-search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #000;
    border-radius: 5px;
    background: var(--bg-input);
    color: var(--text);
    cursor: pointer;
    line-height: 0;
}

.nav-menu-esquina--fin.btn-edicion,
.nav-menu-esquina--izq.btn-edicion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.site-search-toggle:hover {
    background: var(--border);
}
.site-search-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.site-search-panel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: min(9.5rem, calc(100vw - 2rem));
    max-width: 9.5rem;
}

.site-search-input {
    width: 100%;
    min-width: 0;
    padding: 0.35rem 0.55rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 5px;
}
.site-search-input::placeholder {
    color: #9aa3ad;
}
.site-search-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.site-search-results {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    left: auto;
    z-index: 120;
    width: min(22rem, calc(100vw - 1.5rem));
    max-height: min(50vh, 22rem);
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    padding: 0.35rem 0;
}

.site-search-results.is-empty,
.site-search-results[hidden] {
    display: none;
    padding: 0;
    border: none;
    box-shadow: none;
}

.site-search-vacio {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.site-search-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-search-item {
    margin: 0;
    border-top: 1px solid var(--border);
}
.site-search-item:first-child {
    border-top: none;
}

.site-search-enlace {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--text);
    line-height: 1.35;
}
.site-search-enlace:hover {
    background: var(--bg-input);
    color: var(--text);
    font-style: normal;
}
.site-search-enlace:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.site-search-item-titulo {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent);
}

.site-search-item-pagina {
    display: block;
    font-size: 0.7rem;
    color: #b8c0c8;
    margin-bottom: 0.15rem;
}

.site-search-item-fragmento {
    display: block;
    font-size: 0.78rem;
    color: var(--text);
    word-break: break-word;
}

.site-search-mark {
    background: rgba(245, 166, 35, 0.35);
    color: inherit;
    padding: 0 0.1em;
    border-radius: 2px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bg-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    background: var(--accent);
    border: 1px solid #000;
    border-radius: 5px;
    transition: background 0.2s, color 0.2s;
    text-align: center;
    line-height: 1.2;
}
.nav-link-wrap {
    white-space: normal;
}
@media (max-width: 800px) {
    .nav-link-wrap {
        max-width: 5.5em;
    }
}

.nav-link:hover {
    color: var(--bg-dark);
    background: #f5e623;
}

.nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav-link-inicio {
    padding: 0.35rem 0.5rem;
    line-height: 0;
}
.nav-link-inicio svg {
    display: block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

/* A baja resolución el menú envuelve y usa tamaño compacto para no cortarse */
/* --nav-stack-offset lo pone nav-stack-offset.js según la altura real del menú fijo */
@media (max-width: 768px) {
    :root {
        /* Sin JS: valor razonable; con JS el inline en <html> lo sustituye */
        --nav-stack-offset: calc(env(safe-area-inset-top, 0px) + 5.75rem);
    }
    .nav-menu-bar {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 0 0.35rem;
        padding-top: env(safe-area-inset-top, 0px);
        box-sizing: border-box;
    }
    .nav-menu-esquina--inicio,
    .nav-menu-esquina--fin,
    .nav-menu-esquina--izq {
        position: absolute;
        top: env(safe-area-inset-top, 0px);
        z-index: 2;
        margin: 0;
    }
    .nav-menu-esquina--inicio {
        left: 0;
    }
    .nav-menu-esquina--izq {
        left: 0;
    }
    .nav-menu-esquina--fin {
        right: 0;
    }
    .nav-menu-bar--edicion-izq .nav-menu-esquina--inicio {
        left: auto;
        right: 0;
    }
    .nav-menu-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 0.35rem 2.25rem 0;
    }
    .nav-menu-bar--edicion-izq .nav-menu-inner {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }
    .nav-menu-bar:not(.nav-menu-bar--con-edicion):not(.nav-menu-bar--edicion-izq) .nav-menu-inner {
        padding-right: 0.35rem;
    }
    .nav-menu-bar:not(.nav-menu-bar--edicion-izq) .nav-menu-inner {
        padding-left: 0.35rem;
    }
    .site-search-toggle {
        display: inline-flex;
    }
    .site-search-panel:not(.is-open) {
        display: none;
    }
    .site-search-panel.is-open {
        display: flex;
        position: fixed;
        top: var(--nav-stack-offset);
        left: 0;
        right: 0;
        max-width: none;
        min-width: 0;
        width: 100%;
        padding: 0.5rem 0.75rem 0.65rem;
        background: var(--bg-dark);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
        z-index: 110;
        box-sizing: border-box;
    }
    .site-search-results {
        position: static;
        width: 100%;
        max-width: none;
        max-height: min(55vh, 20rem);
        margin-top: 0.15rem;
        box-shadow: none;
        border: 1px solid var(--border);
    }
    .nav-link {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }
    .header h1 {
        font-size: 2rem;
        line-height: 1.1;
    }
    .header .subtitle {
        line-height: 1.2;
    }
}

#inicio,
#encuesta,
#resultados,
#respuestas,
#participantes,
#participantes-por-mapa,
#requisitos,
#informacion,
#participar,
#mejoras,
#manuales {
    scroll-margin-top: var(--nav-stack-offset);
}

.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0.6rem 1.5rem 1.5rem 1.5rem;
}

.header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e6c200;
}

/* mapa.html: la línea bajo el bloque completo (incl. «Abrir mapa») sobra; el menú ya delimita la página */
body.pagina-mapa .header {
    border-bottom: none;
}

.mapa-pie-calibrar {
    text-align: center;
    margin: 1.75rem 0 0;
    padding: 0 0 1.25rem;
    font-size: 1.05rem;
}

.header p:not(.subtitle) {
    text-align: justify;
}

.header p.mapa-ruta-desc {
    text-align: center;
}

.header p.ref {
    text-align: center;
}

.header h1 {
    margin: 0 0 0.25rem;
    font-size: 3rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

.subtitle {
    margin: 0;
    color: #f0c000;
    font-size: 1.5rem;
    line-height: 1.2;
}

.header p.mapa-subnota-version {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    color: #f0c000;
    text-align: center;
}

.ref {
    margin: 0.5rem 0 0;
    font-size: 1.05rem;
}

.ref a {
    color: var(--accent);
    text-decoration: none;
}

.ref a:hover {
    text-decoration: underline;
}

.mapa-miniatura {
    margin: 1rem 0 0;
}

.mapa-thumb {
    display: block;
    margin: 0 auto;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-card);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mapa-thumb:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.3);
}

.mapa-thumb img {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    vertical-align: top;
}

.mapa-thumb-label {
    display: block;
    padding: 0.35rem;
    font-size: 0.95rem;
    color: #fff;
}

.mapa-ruta-panel {
    margin: 1.5rem auto 0;
    padding: 1.15rem 1.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-width: min(52rem, 100%);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
}

.mapa-ruta-panel > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Panel de estilo de ruta: solo el ancho del contenido (el > * de arriba forzaría 100 %) */
.mapa-ruta-panel > .mapa-ruta-estilo {
    width: fit-content;
    max-width: 100%;
    align-self: center;
}

.mapa-ruta-titulo {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
    color: #7be67b;
    text-align: center;
}

.mapa-ruta-desc {
    margin: 0 auto 1rem;
    max-width: 48rem;
    font-size: 0.95rem;
    color: var(--text-muted, #aaa);
    line-height: 1.45;
    text-align: center;
}

.mapa-listado-dlc {
    margin-top: 1.5rem;
}

.mapa-listado-dlc-fila {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.mapa-listado-dlc-label {
    flex: 0 1 22rem;
    max-width: 100%;
}

.mapa-listado-dlc-select {
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-dark);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.mapa-listado-dlc-select:focus {
    outline: 2px solid rgba(123, 230, 123, 0.45);
    outline-offset: 1px;
}

.mapa-listado-dlc-texto {
    margin: 0;
    padding: 0.65rem 0.75rem;
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid var(--border);
    min-height: 2.5rem;
    word-break: break-word;
}

.mapa-ruta-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    justify-content: center;
    overflow: visible;
}

.mapa-ruta-fila .mapa-ruta-label-text {
    font-weight: 700;
}

.mapa-ruta-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 1 14rem;
    min-width: 0;
    text-align: center;
    overflow: visible;
}

.mapa-ruta-label-text {
    font-size: 0.9rem;
    color: var(--text);
}

.mapa-ruta-input {
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-dark);
    color: var(--text);
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

/* Sugerencias bajo el campo (sustituye <datalist>, que en móvil suele tapar el texto) */
.mapa-ciudad-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.mapa-ciudad-sugerencias {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 2px 0 0;
    padding: 0.2rem 0;
    list-style: none;
    max-height: min(42vh, 15rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 300;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    text-align: left;
    /* Misma base tipográfica que las casillas (igual que .mapa-ruta-input: 1rem) */
    font-family: inherit;
    font-size: 1rem;
}
.mapa-ciudad-sugerencias li {
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    font-weight: normal;
    line-height: inherit;
    color: var(--text);
}
.mapa-ciudad-sugerencias li:hover,
.mapa-ciudad-sugerencias li:active {
    background: rgba(255, 255, 255, 0.08);
}
.mapa-ciudad-sugerencias li.mapa-ciudad-sugerencia-activa {
    background: rgba(255, 255, 255, 0.14);
}

.mapa-ruta-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.mapa-ruta-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.15rem auto 0;
    padding-top: 0.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
    min-height: 1.5em;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.mapa-ruta-info.mapa-ruta-info-error {
    color: #ff8a80;
}

.mapa-ruta-info strong {
    color: var(--accent);
    font-weight: 600;
}

.mapa-ruta-info strong.mapa-ruta-ciudad-nombre {
    color: #ffffff;
    font-weight: 700;
}

.mapa-ruta-abrir-mapa-fila {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.mapa-ruta-abrir-mapa-fila + .mapa-ruta-estilo {
    margin-top: 1.1rem;
}

/* Una ciudad por línea, sin partir “→ DLC: …” en varias líneas */
.mapa-ruta-linea-dlc {
    white-space: nowrap;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.modal-mapa {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-mapa.oculto {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}

.modal-cerrar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1002;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.modal-cerrar:hover {
    background: var(--accent);
    color: var(--bg-dark);
}

.modal-content {
    position: relative;
    z-index: 1001;
    max-width: 95vw;
    max-height: 95vh;
}

.modal-content img {
    display: block;
    max-width: 100%;
    max-height: 95vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* Mapa con zoom */
.mapa-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 95vw;
    max-height: 95vh;
}

.mapa-zoom-wrap {
    overflow: hidden;
    width: 90vw;
    max-width: 1200px;
    height: 80vh;
    max-height: 700px;
    position: relative;
    cursor: grab;
    border-radius: 8px;
    background: #0d0d0d;
}

.mapa-zoom-wrap:active {
    cursor: grabbing;
}

.mapa-zoom-inner {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.mapa-img-stack {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: top;
}

.mapa-img-stack img {
    display: block;
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.mapa-ruta-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/*
 * Grosor en px (vector-effect: no escala con zoom). Línea = núcleo; trazo = anillo fuera (js: exterior = línea + 2×anillo).
 */
.mapa-ruta-linea-principal {
    stroke-width: 20px;
    vector-effect: non-scaling-stroke;
    filter: none;
}

.mapa-ruta-linea-trazo {
    stroke-width: 40px;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
}

.mapa-ruta-estilo {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: flex-start;
    gap: 0.55rem;
    margin: 0.75rem auto 0;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: var(--bg-card, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    max-width: 100%;
    width: fit-content;
    box-sizing: border-box;
    text-align: center;
}

/* Primera fila: solo Línea + Trazo (el flex en fila del panel apretaba los sliders en horizontal) */
.mapa-ruta-estilo-colores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem 1.25rem;
}

.mapa-ruta-estilo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9rem;
}

.mapa-ruta-estilo-item-grow {
    flex: 1;
    min-width: 12rem;
}

/* Cada slider en su propia fila (altura como antes; el ancho lo limita max-width) */
.mapa-ruta-estilo-fila-ancho {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: min(22rem, 100%);
    align-self: center;
    box-sizing: border-box;
}

.mapa-ruta-estilo > .mapa-ruta-estilo-fila-ancho {
    justify-content: center;
}

.mapa-ruta-estilo > .mapa-ruta-estilo-item.mapa-ruta-estilo-fila-ancho.mapa-ruta-estilo-item-grow {
    flex: 0 0 auto;
    min-width: 0;
    max-width: min(22rem, 100%);
    margin-left: auto;
    margin-right: auto;
}

.mapa-ruta-estilo-text {
    color: var(--text-muted, #aaa);
    white-space: nowrap;
}

.mapa-ruta-color {
    width: 2.5rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border, #444);
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
}

.mapa-ruta-opacidad {
    flex: 1;
    min-width: 6rem;
    max-width: 14rem;
    vertical-align: middle;
}

.mapa-ruta-opacidad-val {
    min-width: 2.5rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--text-muted, #aaa);
}

.mapa-ruta-grosor {
    flex: 1;
    min-width: 6rem;
    max-width: 14rem;
    vertical-align: middle;
}

.mapa-ruta-grosor-val {
    flex-shrink: 0;
    min-width: 3rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--text-muted, #aaa);
    white-space: nowrap;
}

.mapa-zoom-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.mapa-zoom-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.mapa-zoom-btn:hover {
    background: var(--accent);
    color: var(--bg-dark);
}

/* Mapa a pantalla completa (mismo zoom +/− y arrastre) */
#modal-mapa.modal-mapa {
    padding: 0;
}

#modal-mapa .mapa-modal-content {
    position: absolute;
    inset: 0;
    z-index: 1001;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#modal-mapa .mapa-zoom-wrap {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
}

#modal-mapa .mapa-zoom-controls {
    flex-shrink: 0;
    justify-content: center;
    margin-top: 0;
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    gap: 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

/* Color / opacidad encima del mapa a pantalla completa */
.mapa-ruta-estilo-flotante {
    display: none;
}

#modal-mapa .mapa-ruta-estilo-fs-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1003;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    pointer-events: none;
}

#modal-mapa .mapa-ruta-estilo-fs-wrap > * {
    pointer-events: auto;
}

#modal-mapa .mapa-ruta-estilo-fs-wrap--panel-oculto .mapa-ruta-estilo-flotante {
    display: none !important;
}

#modal-mapa .mapa-ruta-estilo-flotante {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: flex-start;
    gap: 0.45rem;
    position: relative;
    width: fit-content;
    max-width: min(30rem, calc(100vw - 2.5rem));
    margin: 0;
    box-sizing: border-box;
    padding: 0.55rem 2.5rem 0.65rem 0.75rem;
    border-radius: 8px;
    background: rgba(12, 12, 14, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    text-align: center;
}

#modal-mapa .mapa-ruta-estilo-flotante .mapa-ruta-estilo-colores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem 1rem;
}

.mapa-ruta-estilo-btn-ocultar {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.mapa-ruta-estilo-btn-ocultar:hover {
    background: rgba(255, 255, 255, 0.16);
}

.mapa-ruta-estilo-btn-mostrar {
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(12, 12, 14, 0.92);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    transition: background 0.15s, border-color 0.15s;
}

/* [hidden] debe poder ocultar el botón (display:flex del autor anulaba el atributo nativo) */
.mapa-ruta-estilo-btn-mostrar[hidden] {
    display: none !important;
}

.mapa-ruta-estilo-btn-mostrar:not([hidden]) {
    display: flex;
}

.mapa-ruta-estilo-btn-mostrar:hover {
    background: rgba(40, 40, 48, 0.95);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Controles centrados respecto a la ventana (colores en la primera fila, sliders alineados al centro) */
#modal-mapa .mapa-ruta-estilo-flotante > .mapa-ruta-estilo-item:not(.mapa-ruta-estilo-fila-ancho) {
    flex: 0 0 auto;
    justify-content: center;
}

#modal-mapa .mapa-ruta-estilo-flotante .mapa-ruta-estilo-fila-ancho {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: min(22rem, 100%);
    align-self: center;
    justify-content: center;
}

#modal-mapa .mapa-ruta-estilo-flotante .mapa-ruta-estilo-item-grow.mapa-ruta-estilo-fila-ancho {
    flex: 0 0 auto;
    min-width: 0;
    max-width: min(22rem, 100%);
    margin-left: auto;
    margin-right: auto;
}

#modal-mapa .mapa-ruta-estilo-flotante .mapa-ruta-estilo-text {
    color: rgba(255, 255, 255, 0.75);
}

#modal-mapa .mapa-ruta-estilo-flotante .mapa-ruta-opacidad-val,
#modal-mapa .mapa-ruta-estilo-flotante .mapa-ruta-grosor-val {
    color: rgba(255, 255, 255, 0.7);
}

.titulo-seccion-encuesta {
    font-size: 1.5rem;
    margin: 0 0 1rem;
    color: #7be67b;
    text-align: center;
}

.form-encuesta {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.campo {
    margin-bottom: 1.5rem;
}

.campo:last-of-type {
    margin-bottom: 0;
}

.campo label,
.campo legend,
.campo .campo-legend {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
    text-align: center;
}

.form-encuesta .campo label,
.form-encuesta .campo legend,
.form-encuesta .campo .campo-legend {
    text-align: center;
}

.form-encuesta .campo label.label-nick-twitch {
    color: #f5e623;
}
.form-encuesta .campo label.label-nick-twitch .label-hint {
    color: rgba(255, 255, 255, 0.85);
}

.campo input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
}

#nick,
#edit-nick {
    max-width: 18em;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.campo input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.25);
}

.Mapasfieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.Mapaslegend {
    margin-bottom: 0.75rem;
}

.dlcs-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.btn-secundario-dlc {
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-secundario-dlc:hover:not(:disabled) {
    border-color: var(--accent);
    color: #f5e623;
}

.btn-secundario-dlc:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Botones "Seleccionar todos" / "Deseleccionar todos" más pequeños, fondo amarillo */
.dlcs-acciones .btn,
.participantes-acciones .btn,
.participantes-por-mapa-acciones .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid #fff;
    background: #f5e623;
    color: #1a1d23;
}

.dlcs-acciones .btn:hover,
.participantes-acciones .btn:hover,
.participantes-por-mapa-acciones .btn:hover {
    background: var(--accent-hover);
    color: #fff;
    border-color: #fff;
}

.dlcs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.35rem;
    grid-auto-rows: 2em;
}

.dlc-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
    min-height: 2em;
}

.dlc-item input {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.dlc-item label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    font-size: 0.95rem;
}

.dlc-base label {
    color: var(--text-muted);
    cursor: default;
}

.dlc-separador {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    margin: 0.75rem 0;
}

.dlc-promods {
    justify-content: center;
}

/* Fila de Promods: mismo contenedor, centrados, sin recortes */
.dlcs-promods-row {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    box-sizing: border-box;
    overflow: visible;
}
.dlcs-promods-row .dlc-item {
    flex-shrink: 0;
}

.dlcs-promods-row .dlc-item label {
    line-height: 1.08;
    display: block;
}

/* En la encuesta: Promods fuera del contenedor (sin caja, como el resto de mapas) */
.campo.dlcs .dlcs-promods-row {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.25rem 0 0;
    margin-top: 0.35rem;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 0.75rem;
    justify-items: center;
}
.campo.dlcs .dlcs-promods-row .dlc-item {
    min-width: 0;
    justify-self: center;
}

/* Cuando no es baja res.: 3 columnas y bloque centrado */
@media (min-width: 641px) {
    .campo.dlcs {
        margin-left: auto;
        margin-right: auto;
        max-width: 560px;
    }
    .dlcs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.campo.dlcs .dlcs-grid {
    grid-auto-rows: minmax(2em, auto);
}

.campo.dlcs .dlcs-promods-row {
    align-self: start;
    min-height: auto;
    margin-bottom: 0.25rem;
}

/* A baja res.: dos columnas y evitar solapamiento Promods / Convoy (como en edición) */
@media (max-width: 640px) {
    .dlcs-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(2em, auto);
    }
    .campo.dlcs .dlcs-promods-row {
        margin-bottom: 0.35rem;
        grid-template-columns: repeat(2, 1fr);
    }
    .campo.dlcs .dlcs-promods-nota {
        margin-top: 1.5rem;
        margin-bottom: 0.25rem;
        white-space: normal;
    }

    .campo.dlcs .promods-admin-panel {
        margin-top: 1.5rem;
    }
}

/* Solo en pantallas muy estrechas una columna */
@media (max-width: 360px) {
    .dlcs-grid {
        grid-template-columns: 1fr;
    }
}

.dlcs-promods-nota {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 0;
    font-size: 0.9rem;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    align-self: start;
}

.campo.dlcs .dlcs-promods-nota {
    margin-top: 2rem;
}

.campo.dlcs .promods-admin-panel {
    margin-top: 2rem;
}

.promods-admin-panel {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--accent);
    border-radius: 8px;
    background: rgba(245, 166, 35, 0.08);
}

.promods-admin-titulo {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
}

.promods-admin-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}

.promods-admin-fila label {
    font-size: 0.9rem;
}

.input-promods-version {
    width: 5.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-size: 0.95rem;
}

.promods-admin-panel .password-error {
    margin: 0.5rem 0 0;
    text-align: center;
}

/* Separador visual antes del bloque de Convoy */
.form-encuesta .campo.convoy {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Convoy: menos separación entre título, Sí/No y opciones de vehículo */
.campo.convoy .campo-legend {
    margin-bottom: 0.35rem;
}
.convoy-coche-wrap {
    margin-top: 0.5rem;
}

.convoy-coche-wrap.oculto {
    display: none;
}

.convoy-coche-legend {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.convoy-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: center;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 400;
}

.radio-option input {
    width: 18px;
    height: 18px;
    accent-color: var(--convoy-yes);
    cursor: pointer;
}

.acciones {
    margin-top: 1.5rem;
    text-align: center;
}

.btn {
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-enviar {
    background: var(--accent);
    color: #1a1d23;
}

.btn-enviar:hover {
    background: var(--accent-hover);
}

.btn-enviar:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.mensaje {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.mensaje.ok {
    background: rgba(52, 168, 83, 0.2);
    border: 1px solid var(--success);
    color: #a8e6b0;
}

.mensaje.error {
    background: rgba(234, 67, 53, 0.2);
    border: 1px solid var(--error);
    color: #f5a5a0;
}

.oculto {
    display: none !important;
}

.mensaje.oculto {
    display: none;
}

.participantes-acciones.oculto {
    display: none;
}

.resultados h2 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    color: var(--text);
}

.hint {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: #fff;
}

.lista-respuestas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.respuesta-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
}

.respuesta-card .nick {
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--accent);
}

.respuesta-card .dlcs-list {
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 0.35rem;
}
.respuesta-card .dlcs-lista-nombres {
    color: #f5e623;
}

.respuesta-card .convoy-badge {
    display: inline-block;
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(129, 193, 75, 0.25);
    color: var(--convoy-yes);
}

.respuesta-card .convoy-badge.no {
    background: #c0392b;
    color: #fff;
}

.respuesta-card .convoy-coche-badge {
    font-size: 0.85rem;
    color: #fff;
    margin-top: 0.25rem;
}

.respuesta-card .fecha {
    font-size: 0.8rem;
    color: #fff;
    margin-top: 0.35rem;
}

.lista-respuestas .vacio {
    color: #fff;
    font-style: italic;
    padding: 1rem;
}

.respuestas-recibidas-block {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e6c200;
}

.estadisticas-convoy {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    max-width: 100%;
}

.estadisticas-convoy h2 {
    font-size: 1.25rem;
    margin: 0 0 0.25rem;
    color: #7be67b;
    text-align: center;
}

.estadisticas-desc {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: #fff;
    text-align: center;
}

.estadisticas-convoy-content .vacio {
    color: #fff;
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

.estadisticas-Mapas{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.estadisticas-dlcs-mapas {
    margin-top: 2rem;
}

.estadisticas-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    align-items: start;
}

.estadisticas-tres-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    align-items: stretch;
}

@media (max-width: 960px) {
    .estadisticas-tres-columnas {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .estadisticas-dos-columnas {
        grid-template-columns: 1fr;
    }
    .estadisticas-tres-columnas {
        grid-template-columns: 1fr;
    }
}

.estadisticas-dos-columnas .estadisticas-grafica-seccion,
.estadisticas-tres-columnas .estadisticas-grafica-seccion {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
}

.estadisticas-dos-columnas .estadisticas-grafica-seccion:last-child,
.estadisticas-tres-columnas .estadisticas-grafica-seccion:not(:first-child) {
    border-left: 1px solid var(--border);
    padding-left: 1.5rem;
}

.estadisticas-grafica-seccion {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.estadisticas-grafica-seccion:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.estadisticas-grafica-titulo {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #7be67b;
    text-align: center;
}

.estadisticas-tres-columnas .estadisticas-grafica-titulo {
    min-height: 4.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.3;
}

.estadistica-convoy-coche {
    margin-top: 0.5rem;
}

.estadistica-convoy-coche:first-of-type {
    margin-top: 1.25rem;
}

.estadistica-dlc {
    margin-bottom: 0.25rem;
}

.estadistica-dlc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.estadistica-dlc-nombre {
    color: var(--text);
}

.estadistica-dlc-pct {
    color: var(--accent);
    font-weight: 600;
}

.estadistica-dlc-bar {
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.estadistica-dlc-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.estadisticas-par {
    margin-top: 1rem;
}

.estadisticas-par .estadisticas-total {
    margin: 0;
    font-size: 0.9rem;
    color: #fff;
    text-align: left;
    font-weight: bold;
}

.estadisticas-par .estadisticas-total-segunda {
    margin-top: 0.25rem;
}

.estadisticas-separador {
    border: none;
    border-top: 2px solid #e6c200;
    margin: 1rem 0;
}

.estadisticas-separador-promods {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    margin: 0.75rem 0;
}

.estadisticas-separador-interno {
    border: none;
    border-top: 1px solid #fff;
    margin: 1rem 0;
}

.estadisticas-convoy-content .estadisticas-total {
    text-align: left;
    font-weight: bold;
}

.estadisticas-total {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

.estadisticas-nicks {
    color: #f5e623;
    font-weight: inherit;
}

.resultados-header {
    margin-bottom: 0.5rem;
}

.resultados-header h2 {
    margin: 0;
    text-align: center;
    color: #7be67b;
}

.btn-edicion {
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
}

/* Candado convoy: va en la esquina derecha de .nav-menu-bar (busqueda.js lo mueve ahí) */

.btn-edicion:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-edicion .btn-edicion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-edicion .icon-unlock {
    display: none;
}

.btn-edicion.edit-mode-on .icon-lock {
    display: none;
}

.btn-edicion.edit-mode-on .icon-unlock {
    display: inline-flex;
}

.respuesta-card .card-acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.respuesta-card .btn-card {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
}

.respuesta-card .btn-card:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.respuesta-card .btn-card.btn-eliminar:hover {
    border-color: var(--error);
    color: var(--error);
}

.modal-password-content {
    width: 100%;
    max-width: 640px;
    min-width: 280px;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-editar-content {
    width: 100%;
    max-width: 640px;
    min-width: 440px;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    isolation: isolate;
}

.modal-password-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}
.modal-editar-content h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.modal-desc {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: #fff;
}

.input-password {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
}

.password-error {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--error);
}

.password-error.oculto {
    display: none;
}

.modal-password-btns {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: center;
}

.modal-sobrescribir-content {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.modal-sobrescribir-titulo {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    color: var(--accent);
    text-align: center;
}

.modal-sobrescribir-mensaje {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
    text-align: center;
}

.modal-sobrescribir-mensaje .nick-destacado {
    color: #f5e623;
    font-weight: bold;
}

.modal-sobrescribir-btns {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-confirm-content {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.modal-confirm-titulo {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    color: var(--accent);
    text-align: center;
}

.modal-confirm-mensaje {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
    text-align: center;
}

.btn-secondary {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-secondary:hover {
    border-color: #fff;
    color: #fff;
}

.modal-editar-content .campo {
    margin-bottom: 0.6rem;
}

.modal-editar-content .campo.convoy .convoy-coche-wrap {
    margin-top: 0.4rem;
}

.modal-editar-content .campo.convoy .convoy-coche-legend {
    margin-bottom: 0.35rem;
}

.modal-editar-content .edit-Mapas.dlcs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow-y: visible;
}

/* Modal editar: Nick, Mapas y Convoy en amarillo */
.modal-editar-content .campo label[for="edit-nick"],
.modal-editar-content fieldset.campo.Mapasedit-dlcs legend,
.modal-editar-content .convoy-titulo {
    color: #f5e623;
}

/* Modal editar: fieldset Mapas sin espacio extra */
.modal-editar-content fieldset.campo.Mapasedit-dlcs {
    margin: 0 0 0.5rem;
    padding: 0;
    border: none;
}
.modal-editar-content fieldset.Mapasedit-dlcs legend {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

/* Evitar que la sección Convoy se solape con los Promods (todas las res.) */
.modal-editar-content .dlcs-grid {
    margin-bottom: 0;
    grid-auto-rows: minmax(1.5em, auto);
    gap: 0.15rem 0.4rem;
}
.modal-editar-content .dlc-item {
    min-height: 1.5em;
    padding: 0.1rem 0;
}
.modal-editar-content .dlc-separador {
    margin: 0.2rem 0;
}
.modal-editar-content .dlcs-promods-row {
    margin-bottom: 0.2rem;
    min-height: 0;
    padding: 0.1rem 0 0.2rem;
    background: transparent;
    border: none;
    border-radius: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 0.75rem;
    justify-items: center;
}
.modal-editar-content .dlcs-promods-row .dlc-item {
    min-width: 0;
    justify-self: center;
}
.modal-editar-content .dlcs-promods-row .dlc-item label {
    font-size: 0.875rem;
    line-height: 1.08;
    display: block;
}
.modal-editar-content .dlcs-promods-nota {
    margin-top: 1rem;
}
.modal-editar-content .modal-convoy {
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Título Convoy (color amarillo definido arriba con Nick y Mapas) */
.modal-editar-content .convoy-titulo {
    margin: 0 0 0.35rem;
    font-weight: 600;
    text-align: center;
}

/* Sí y No siempre en la misma fila y centrados */
.modal-editar-content .convoy-sino-fila {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0;
}
.modal-editar-content .convoy-sino-fila .radio-option {
    margin: 0;
}

/* Modal editar y contraseña a baja res.: que quepa y se vea bien */
@media (max-width: 640px) {
    .modal-mapa#modal-editar,
    .modal-mapa#modal-password {
        padding: 0.75rem;
        align-items: flex-start;
        overflow-y: auto;
    }
    .modal-mapa#modal-password {
        align-items: center;
    }
    .modal-password-content {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding: 1.25rem 1rem;
        box-sizing: border-box;
    }
    .modal-password-content h3,
    .modal-password-content .modal-desc {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .modal-mapa#modal-editar {
        padding: 0.5rem;
    }
    .modal-editar-content {
        min-width: 0;
        max-width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 0.75rem 1rem;
    }
    .modal-editar-content .edit-Mapas.dlcs-grid,
    .modal-editar-content .dlcs-grid {
        grid-template-columns: 1fr;
    }
    /* Promods en 2 columnas a baja res. en edición */
    .modal-editar-content .dlcs-promods-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Botón subir arriba */
.btn-subir {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-dark);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.2s, transform 0.2s;
    text-decoration: none;
}

/* Que la flecha se vea: el botón debe mantener color oscuro (no el de .container a) */
.container a.btn-subir:link,
.container a.btn-subir:visited,
.container a.btn-subir:hover,
.container a.btn-subir:focus {
    color: var(--bg-dark);
    font-style: normal;
}

.btn-subir:hover {
    background: #f5e623;
    transform: translateY(-2px);
}

.btn-subir svg {
    display: block;
}

/* Botón "Subir" más pequeño en pantallas no anchas (p. ej. 360px) */
@media (max-width: 992px) {
    .btn-subir {
        width: 32px;
        height: 32px;
        bottom: 0.75rem;
        right: 0.75rem;
    }
    .btn-subir svg {
        width: 18px;
        height: 18px;
    }
}

/* Sección Participantes */
.participantes-seccion {
    margin-top: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 3rem;
    border-top: 2px solid #e6c200;
}

.participantes-seccion h2 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    color: #7be67b;
    text-align: center;
}

.participantes-desc {
    font-size: 1.1rem;
    color: #fff;
    margin: 0 0 1rem;
    text-align: justify;
}

.participantes-filtros {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.participantes-filtros .participantes-acciones-botones {
    margin-top: 0;
}

.participantes-filtros .participantes-acciones-botones:not(.oculto) {
    margin-bottom: 1rem;
}

.participantes-acciones {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.participantes-acciones-botones {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}

.participantes-acciones-botones .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid #fff;
    background: #f5e623;
    color: #1a1d23;
}

.lista-participantes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: center;
}

.participante-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.participante-check:hover {
    border-color: var(--accent);
    background: rgba(245, 166, 35, 0.1);
}

.participante-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.resumen-participantes .resumen-vacio {
    margin: 0;
    padding: 0.75rem 0;
    text-align: center;
    color: #fff;
    font-size: 1.1rem;
}

.resumen-participantes {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.25rem 1rem;
    min-height: 200px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
}

#resumen-participantes-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Evita que las líneas cortas (p.ej. "Promods") queden centradas; alargar para que
   se alineen como la línea larga de "Mapas". */
.resumen-participantes #resumen-participantes-body .participante-detalle {
    width: 100%;
}

.resumen-participantes h3 {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    color: var(--accent);
    text-align: center;
}

.resumen-resumen-tabla {
    width: 860px;
    max-width: 100%;
    margin: 0 auto 0.5rem;
    border-collapse: collapse;
    font-size: 0.95rem;
    table-layout: fixed;
}

.resumen-resumen-tabla th,
.resumen-resumen-tabla td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border: 1px solid #fff;
    vertical-align: top;
    word-wrap: break-word;
}

.resumen-resumen-tabla th:first-child {
    width: 45%;
}

.resumen-resumen-tabla th:last-child {
    width: 55%;
}

.resumen-resumen-tabla td:last-child {
    min-width: 0;
    overflow: visible;
}

.resumen-resumen-tabla th {
    font-weight: bold;
    color: #f5e623;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
}

.resumen-dlcs-lista {
    display: block;
    color: #f5e623;
}

.resumen-dlcs-pct {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.resumen-promods {
    margin-top: 0.35rem;
    color: #fff;
    font-size: 0.9rem;
}

.resumen-promods-version {
    color: #f5e623;
    font-weight: 600;
}

.resumen-vehiculo-barras {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.resumen-vehiculo-item {
    display: grid;
    grid-template-columns: minmax(0, 90px) minmax(0, 1fr) minmax(0, 2.5rem);
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.resumen-vehiculo-label {
    font-size: 0.9rem;
    color: #fff;
    white-space: nowrap;
}

.resumen-vehiculo-track {
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    overflow: hidden;
}

.resumen-vehiculo-fill {
    height: 100%;
    border-radius: 6px;
    min-width: 2px;
    transition: width 0.3s ease;
}

.resumen-vehiculo-item.resumen-vehiculo-camion .resumen-vehiculo-fill {
    background: linear-gradient(90deg, #e67e22, #d35400);
}

.resumen-vehiculo-item.resumen-vehiculo-coche .resumen-vehiculo-fill {
    background: linear-gradient(90deg, #f1c40f, #f39c12);
}

.resumen-vehiculo-item.resumen-vehiculo-mixto .resumen-vehiculo-fill {
    background: linear-gradient(90deg, #27ae60, #2ecc71);
}

.resumen-vehiculo-pct {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    text-align: right;
}

.resumen-convoy-tabla {
    width: auto;
    max-width: 360px;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.resumen-convoy-tabla th,
.resumen-convoy-tabla td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid #fff;
}

.resumen-convoy-tabla th:first-child,
.resumen-convoy-tabla td:first-child {
    border-right: 1px solid #fff;
}

.resumen-convoy-tabla th {
    font-weight: bold;
    color: #f5e623;
    text-align: center;
}

.participante-convoy-titulo {
    margin-top: 1.25rem;
    text-align: center;
    width: 100%;
}

.participante-modos-pct {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 400;
}

.participante-nick {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.participante-nick:hover {
    border-color: var(--accent);
    background: rgba(245, 166, 35, 0.1);
}

.modal-participante-content {
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
}

.modal-participante-content h3 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    color: var(--accent);
    text-align: center;
}

.participante-detalle {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.participante-mapas-lista,
.participante-detalle-dlcs {
    color: #f5e623;
}

.participante-detalle-Mapas{
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--bg-input);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.4;
}

.resumen-participantes .participante-detalle-Mapas{
    background: none;
    padding: 0;
    border-radius: 0;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: inherit;
}

.resumen-participantes .participante-convoy-line {
    margin-top: 1.25rem;
}

.modal-participante-content .btn {
    display: block;
    margin: 1rem auto 0;
}

/* Sección Participantes por mapa y preferencia */
.participantes-por-mapa {
    margin-top: 2.5rem;
    padding-top: 0;
}

.participantes-por-mapa h2 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    color: #7be67b;
    text-align: center;
}

.requisitos-seccion h2 {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
    color: #7be67b;
    text-align: center;
}

.requisitos-aviso {
    text-align: center;
    margin: 0;
    color: var(--text);
}

.requisitos-aviso a {
    color: var(--accent);
    text-decoration: underline;
}

.requisitos-aviso a:hover {
    color: #f5e623;
}

/* Guía (convoy.html) - títulos más grandes y negrita en amarillo */
.pagina-convoy strong,
.pagina-convoy b {
    color: #f5e623;
}
.pagina-convoy .seccion-guia h2 {
    font-size: 1.85rem;
}

.seccion-guia {
    margin-bottom: 2rem;
}
.seccion-guia p {
    text-align: justify;
}
.seccion-guia h2 {
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
    color: #e6c200;
    text-align: center;
}
.guia-intro {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 1rem;
    text-align: justify;
}

/* Para los puntos que empiezan por "- " dentro de la guía (para tabular más). */
.guia-bullet {
    padding-left: 1rem;
}
.guia-contenido {
    color: var(--text);
    line-height: 1.6;
    text-align: justify;
}
.guia-contenido p {
    margin: 0 0 0.75rem;
}
.guia-contenido p:last-child {
    margin-bottom: 0;
}
.guia-contenido a {
    color: var(--accent);
    text-decoration: none;
}
.guia-contenido a:hover {
    text-decoration: underline;
    font-style: italic;
}

.guia-indent {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.guia-video-thumb-centro {
    display: flex;
    justify-content: center;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    width: calc(100% + 3rem);
}
.guia-video-thumb-centro .guia-video-thumb-wrap {
    display: block;
}
.guia-video-thumb-wrap {
    display: inline-block;
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.guia-video-thumb-wrap:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.3);
}
.guia-video-thumb {
    display: block;
    width: 320px;
    height: auto;
    vertical-align: middle;
}

.guia-video-item {
    margin: 0;
    text-align: center;
}
.guia-video-item .guia-video-thumb-wrap {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.guia-video-canal {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.guia-video-canal-centro {
    text-align: center;
}

.guia-code {
    font-family: Consolas, "Liberation Mono", Monaco, monospace;
    font-size: 0.9rem;
    text-align: center;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 1rem;
    color: #fff;
    overflow-x: auto;
    white-space: pre;
}

/* Miniatura y modal de imagen en la guía */
.guia-figures-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
.guia-figures-row .guia-figure {
    margin: 0;
}

/* Fila Ajustes: barra de nav y miniatura Ajustes una debajo de la otra */
.guia-figures-row-ajustes {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
}
/* Contenedor con scroll para la imagen de la barra de navegación (Remolque, Camión, Perfil, Ajustes, Acerca de) */
.guia-nav-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
}
.guia-nav-scroll .guia-img-fija {
    display: block;
    min-width: min-content;
    margin-left: auto;
    margin-right: auto;
}

/* En baja resolución, fila consola con scroll horizontal */
@media (max-width: 768px) {
    /* Tabla Resultados: columna Vehículo por participante más compacta para que los % no salgan fuera */
    .resumen-vehiculo-item {
        grid-template-columns: minmax(0, 70px) minmax(0, 1fr) minmax(0, 2.25rem);
        gap: 0.35rem;
    }
    .resumen-vehiculo-label {
        font-size: 0.85rem;
        white-space: normal;
    }
    .resumen-vehiculo-pct {
        font-size: 0.85rem;
    }
    .guia-figures-row-consola {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 1rem;
        padding-bottom: 0.5rem;
    }
    .guia-figures-row-consola .guia-img-fija {
        flex-shrink: 0;
    }
}

.guia-img-fija {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
}
.guia-figure {
    margin: 1rem 0 1.5rem;
    text-align: center;
}
.guia-thumb-btn {
    display: inline-block;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.guia-thumb-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.3);
}
.guia-thumb {
    display: block;
    max-width: 280px;
    height: auto;
    border-radius: 6px;
    vertical-align: middle;
}
.guia-figcaption {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.guia-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.guia-modal.oculto {
    display: none;
}
.guia-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}
.guia-modal-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    z-index: 1;
}
.guia-modal-cerrar {
    position: absolute;
    top: -2.5rem;
    right: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-dark);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}
.guia-modal-cerrar:hover {
    background: #f5e623;
}
.guia-modal-img {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    border: 2px solid var(--border);
}

.participantes-por-mapa-desc {
    font-size: 1rem;
    color: #fff;
    margin: 0 0 1rem;
    text-align: center;
}

.participantes-por-mapa-filtros {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.participantes-por-mapa-mapa {
    margin: 0 0 0.75rem;
    color: #fff;
}

.participantes-por-mapa-mapa-label {
    margin: 0 0 0.5rem;
}

.participantes-por-mapa-acciones {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.lista-mapas-participantes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.mapa-participantes-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.mapa-participantes-check:hover {
    border-color: var(--accent);
    background: rgba(245, 166, 35, 0.1);
}

.mapa-participantes-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.mapa-participantes-check:has([data-dlc^="Promods"]) {
    line-height: 1.08;
}

.mapa-participantes-check:has([data-dlc^="Promods"]) span {
    line-height: 1.08;
    display: block;
}

.participantes-por-mapa-promods-nota {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    width: 100%;
    flex-basis: 100%;
    text-align: center;
}

.participantes-por-mapa-preferencia {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.participantes-por-mapa-preferencia-legend {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
}

.participantes-por-mapa-preferencia .radio-option {
    color: #fff;
    cursor: pointer;
}

.participantes-por-mapa-pct {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--accent);
    text-align: center;
}

.participantes-por-mapa-pct .participantes-por-mapa-barras {
    margin-bottom: 0.5rem;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.participantes-por-mapa-pct .resumen-vehiculo-item {
    grid-template-columns: minmax(0, 105px) minmax(0, 1fr) minmax(0, 2.2rem);
    gap: 0.4rem;
}

.participantes-por-mapa-pct .resumen-vehiculo-label {
    white-space: normal;
    line-height: 1.15;
}

.participantes-por-mapa-pct .participantes-por-mapa-total {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: bold;
    color: #7be67b;
}

.participantes-por-mapa-resultados-titulo {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    color: var(--accent);
    text-align: center;
}

.participantes-por-mapa-contenedor {
    padding: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #fff;
}

.participantes-por-mapa-lista {
    font-size: 1rem;
    line-height: 1.5;
}

.participantes-por-mapa-lista-tabla {
    display: block;
}

.participantes-por-mapa-lista-tabla .participantes-por-mapa-tabla {
    margin-bottom: 0;
}

/* Un punto más grande las fuentes dentro del contenedor resultados */
.participantes-por-mapa-contenedor .participantes-por-mapa-resultados-titulo {
    font-size: 1.2rem;
}
.participantes-por-mapa-contenedor .participantes-por-mapa-pct {
    font-size: 1rem;
}
.participantes-por-mapa-contenedor .participantes-por-mapa-pct .participantes-por-mapa-total {
    font-size: 1rem;
}
.participantes-por-mapa-contenedor .participantes-por-mapa-lista {
    font-size: 1.0625rem;
}
.participantes-por-mapa-contenedor .resumen-vehiculo-label,
.participantes-por-mapa-contenedor .resumen-vehiculo-pct {
    font-size: 1rem;
}
.participantes-por-mapa-contenedor .participantes-por-mapa-tabla,
.participantes-por-mapa-contenedor .resumen-convoy-tabla {
    font-size: 1rem;
}
.participantes-por-mapa-contenedor .resumen-vehiculo-item {
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) minmax(0, 2.25rem);
    gap: 0.35rem;
}

/* En la tabla "Vehículo por participante" evitar recorte de etiqueta */
.resumen-resumen-tabla td:last-child .resumen-vehiculo-item {
    grid-template-columns: minmax(0, 7.8rem) minmax(0, 1fr) minmax(0, 2.25rem);
    gap: 0.4rem;
}

.resumen-resumen-tabla td:last-child .resumen-vehiculo-label {
    white-space: normal;
    line-height: 1.15;
    font-size: 0.95rem;
}