/* =====================================================================
   ATER · Visor Catastral — chrome de la aplicacion
   ---------------------------------------------------------------------
   Se carga DESPUES de dist/ol.editor.css y cdn/main.css. Reemplaza el
   azul marino heredado por la identidad ATER (violeta -> magenta, acento
   dorado) sin tocar la geometria que OpenLayers necesita:
     menubar 48px · toolbar 60px · map-container calc(100% - 108px)

   Requiere css/ater-tokens.css cargado antes.
   ===================================================================== */

:root {
    /* Iconos vectoriales usados como mascara CSS (Lucide). Nunca emoji:
       el emoji cambia segun el sistema y no toma el color del tema. */
    --vs-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Bootstrap 3.3.6 fija `html { font-size: 10px }`, lo que encogia toda la
   escala en `rem` de los tokens. No usa ninguna medida en rem, asi que
   devolver la raiz a 16px es seguro y necesario. */
html { font-size: 100%; }

html, body {
    color: var(--ater-text);
    background: var(--ater-bg);
    font-family: var(--ater-font);
    -webkit-font-smoothing: antialiased;
}

.application { color: var(--ater-text); }

/* =====================================================================
   Barra de navegacion
   Fondo con el degradado institucional; la pestana activa se marca con
   un riel dorado, el mismo acento que el kicker del portal.
   ===================================================================== */
.menubar {
    background: var(--ater-grad);
    box-shadow: 0 6px 24px -8px rgba(66, 34, 104, .55);
    border-bottom: 3px solid rgba(255, 255, 255, .12);
    z-index: var(--ater-z-chrome);
}

.menubar ul {
    height: 48px;
    /* Con pocas pestanas no se nota; en pantallas angostas se desplaza
       en lugar de recortar opciones. */
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.menubar ul::-webkit-scrollbar { display: none; }

.menubar ul li { flex: 0 0 auto; }

.menubar ul li > a {
    padding: 12px 22px;
    color: rgba(255, 255, 255, .78);
    font-size: var(--ater-fs-sm);
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    transition: background var(--ater-t) var(--ater-ease),
                color var(--ater-t) var(--ater-ease);
}

.menubar ul li > a::before {
    width: 100%;
    height: 3px;
    background: var(--ater-oro);
    border-radius: 3px 3px 0 0;
}

.menubar ul li:hover > a {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.menubar ul li.active > a {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-weight: 700;
}

.menubar ul li.active > a::before {
    box-shadow: 0 0 12px rgba(243, 198, 74, .55);
}

/* "Inicio" actua como marca: caja dorada, separada del resto. */
.menubar ul li.branding > a {
    padding: 12px 24px;
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, .2);
    color: var(--ater-oro);
    font-size: var(--ater-fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}
.menubar ul li.branding:hover > a { background: rgba(255, 255, 255, .1); }

.menubar .pin, .menubar a.pin { color: rgba(255, 255, 255, .55); }
.menubar a.pin:hover { color: var(--ater-oro); }

/* =====================================================================
   Barra de herramientas
   ===================================================================== */
.toolbar {
    background: var(--ater-card);
    border-bottom: 1px solid var(--ater-border);
    box-shadow: 0 2px 8px -4px rgba(16, 24, 40, .18);
}

.toolbar .tab-pane {
    padding: 8px 16px;
    background: var(--ater-card);
    border-bottom: 1px solid var(--ater-border);
    /* Las paletas largas se desplazan en lugar de romper el alto fijo. */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
}

.toolbar .ol-control {
    border-right: 1px solid var(--ater-border);
    padding: 0 10px;
}

.toolbar .ol-control button {
    width: 40px;
    height: 40px;
    border-radius: var(--ater-r);
    border: 1px solid var(--ater-border);
    background-color: var(--ater-card);
    box-shadow: var(--ater-shadow-sm);
    transition: border-color var(--ater-t) var(--ater-ease),
                box-shadow var(--ater-t) var(--ater-ease),
                transform var(--ater-t-fast) var(--ater-ease);
}

.toolbar .ol-control button:hover {
    background-color: var(--ater-surface-2);
    border-color: var(--ater-magenta);
    box-shadow: 0 4px 10px -4px var(--ater-ring);
    transform: translateY(-1px);
}

.toolbar .ol-control button.active,
.toolbar .ol-control button.active:hover {
    background-color: var(--ater-surface-2);
    border-color: var(--ater-magenta);
    box-shadow: 0 0 0 3px var(--ater-ring);
    transform: none;
}

.toolbar .ol-control button[disabled],
.toolbar .ol-control button[disabled]:hover {
    border-color: var(--ater-border);
    background-color: var(--ater-surface-2);
    opacity: .38;
}

.toolbar .ol-control .ol-separator { border-right-color: var(--ater-border); }

.toolbar label {
    color: var(--ater-text);
    font-size: var(--ater-fs-sm);
    font-weight: 600;
}

.toolbar select,
.toolbar .form-select {
    min-height: 40px;
    padding: 8px 32px 8px 12px;
    border: 1.5px solid var(--ater-border);
    border-radius: var(--ater-r);
    background-color: var(--ater-card);
    color: var(--ater-text);
    font-family: var(--ater-font);
    font-size: var(--ater-fs-sm);
    font-weight: 600;
    box-shadow: none;
}
.toolbar select:hover,
.toolbar .form-select:hover { border-color: var(--ater-magenta); box-shadow: none; }
.toolbar select:focus,
.toolbar .form-select:focus {
    outline: none;
    border-color: var(--ater-magenta);
    box-shadow: 0 0 0 3px var(--ater-ring);
}

/* Cerrar sesion: accion destructiva, separada visualmente del resto. */
.toolbar .btn-outline-danger {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding: 8px 16px;
    border: 1px solid var(--ater-error-border);
    border-radius: var(--ater-r);
    background: #fff;
    color: var(--ater-error);
    font-size: var(--ater-fs-sm);
    font-weight: 600;
}
.toolbar .btn-outline-danger:hover {
    background: var(--ater-error-bg);
    border-color: var(--ater-error);
    color: var(--ater-error);
}

/* =====================================================================
   Titulos de los paneles laterales
   ===================================================================== */
.bar-title {
    padding: 12px 16px;
    background: var(--ater-violeta);
    border-bottom: 2px solid var(--ater-magenta);
    color: #fff;
    font-size: var(--ater-fs-sm);
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    box-shadow: none;
}

.bar-title a.pin { color: rgba(255, 255, 255, .65); }
.bar-title a.pin:hover { color: var(--ater-oro); transform: none; }
.bar-title a.pin.active { color: var(--ater-oro); }

/* =====================================================================
   Paneles laterales: capas y referencias
   ===================================================================== */
.layermanager,
.attributemanager {
    background: var(--ater-card);
    color: var(--ater-text);
    box-shadow: var(--ater-shadow);
    backdrop-filter: none;
}

/* Marca de agua del panel: chica y separada del borde, para que acompane
   sin competir con la lista de capas. */
.layermanager,
.layermanager.pinned {
    border-right: 1px solid var(--ater-border);
    background: var(--ater-card) url(../res/logo-ater.png) no-repeat;
    background-size: auto 26px;
    background-position: 14px calc(100% - 14px);
}
.layermanager:hover { box-shadow: var(--ater-shadow-lg); }

.attributemanager,
.attributemanager.pinned { border-left: 1px solid var(--ater-border); }
.attributemanager:hover { box-shadow: var(--ater-shadow-lg); }

.ol-layercontainer,
.attributemanager .ol-attributemanager { scrollbar-width: thin; scrollbar-color: var(--ater-magenta) transparent; }
.ol-layercontainer::-webkit-scrollbar,
.attributemanager .ol-attributemanager::-webkit-scrollbar { width: 8px; }
.ol-layercontainer::-webkit-scrollbar-track,
.attributemanager .ol-attributemanager::-webkit-scrollbar-track { background: transparent; }
.ol-layercontainer::-webkit-scrollbar-thumb,
.attributemanager .ol-attributemanager::-webkit-scrollbar-thumb {
    background: var(--ater-magenta);
    border-radius: var(--ater-r-pill);
}

/* =====================================================================
   Acordeon del panel de capas
   ---------------------------------------------------------------------
   Antes cada seccion traia alto fijo (450-750px), asi que al abrir
   "Capas" el encabezado de "Localidades" se iba abajo del panel y
   terminaba encima de la marca de agua.

   Ahora el acordeon es una columna flex del alto del panel: los
   encabezados quedan siempre a la vista y solo scrollea la seccion
   abierta. Se descuentan la barra de titulo (47px) y la banda del
   logotipo (40px) para que nada se solape.
   ===================================================================== */
.layermanager .miacordeon {
    display: flex;
    flex-direction: column;
    gap: var(--ater-sp-2);
    height: calc(100% - 47px - 40px);
    padding: 12px;
    /* Si el navegador no resolviera el :has() de abajo, el acordeon
       entero scrollea: peor UX, pero nunca desborda. */
    overflow-y: auto;
}

.layermanager .item-acordeon {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    flex: 0 0 auto;
}

/* Cual es la seccion abierta: `clickAcordeon` usa fadeIn/fadeOut de
   jQuery, que al abrir LIMPIA el style en linea (queda `style=""`) en vez
   de escribir `display: block`. Asi que la senal fiable es la contraria:
   la cerrada es la que conserva `display: none`. */
.layermanager .item-acordeon:has(> .contenido-acordeon:not([style*="none"])) {
    flex: 1 1 auto;
}

.layermanager .item-acordeon > .item { flex: 0 0 auto; }

.layermanager .contenido-acordeon {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Los contenedores externos del acordeon arrastran la clase `panel-body`
   de Bootstrap, pero no son cuerpos de panel: son la caja de scroll. Se
   les quita el marco heredado para que no dibujen una tarjeta de mas. */
.contenido-acordeon.panel-body {
    display: block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* El alto lo fija la columna flex del acordeon, no la caja interna: los
   `height: calc(100vh - 260px)` / `min-height: 450px` heredados eran los
   que empujaban "Localidades" fuera del panel. */
.globalAcordeon,
.acordeonCapas,
.contenido-acordeon .globalAcordeon {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 10px 4px;
    background: none;
    border: none;
    border-radius: var(--ater-r-md);
    box-shadow: none;
    text-align: left;
    overflow: visible;
}

/* El scroll de los acordeones va fino y en magenta liso; la barra gruesa
   con degradado competia con el contenido. */
.globalAcordeon,
.acordeonCapas { scrollbar-width: thin; scrollbar-color: var(--ater-magenta) transparent; }
.globalAcordeon::-webkit-scrollbar,
.acordeonCapas::-webkit-scrollbar { width: 6px; }
.globalAcordeon::-webkit-scrollbar-track,
.acordeonCapas::-webkit-scrollbar-track { background: transparent; }
.globalAcordeon::-webkit-scrollbar-thumb,
.acordeonCapas::-webkit-scrollbar-thumb {
    background: var(--ater-magenta);
    border-radius: var(--ater-r-pill);
}

.globalAcordeon .panel-group { padding-bottom: 0; }

/* Un departamento con el foco adentro no necesita marco magenta ni sombra
   de color: alcanza con el halo estandar de foco. */
.panel:focus-within,
.panel.active {
    border-color: var(--ater-border);
    box-shadow: 0 0 0 3px var(--ater-ring);
}
.panel:hover { transform: none; box-shadow: var(--ater-shadow-sm); border-color: var(--ater-border); }

/* Cabeceras del acordeon: violeta solido, igual que los titulos de panel.
   El degradado magenta se reserva para las acciones. */
.h5Acordeon {
    background: var(--ater-violeta);
    border-radius: var(--ater-r-md);
    box-shadow: none;
    font-size: var(--ater-fs-base);
    font-weight: 700;
    letter-spacing: .2px;
    padding: 13px 15px;
    transition: background var(--ater-t) var(--ater-ease),
                transform var(--ater-t-fast) var(--ater-ease);
}
.h5Acordeon:hover {
    background: var(--ater-violeta-900);
    box-shadow: none;
    transform: translateY(-1px);
}
.h5Acordeon i { font-size: 1.15em; filter: none; color: var(--ater-oro); }

/* Departamento abierto: el fondo pasa a magenta, asi que el titulo y su
   marcador tienen que ir en blanco. Bootstrap pone aria-expanded en el
   boton, no en la cabecera; por eso hace falta el :has(). */
.panel-heading:has(.clickAcordeonLocalidades[aria-expanded="true"]) .panel-title > a:first-child,
.panel-heading:has(.clickAcordeonLocalidades[aria-expanded="true"]) .panel-title > a:first-child:hover {
    color: #fff;
}

/* Los nombres de localidad no se recortan: el panel es angosto, asi que
   las fichas se acomodan en las columnas que entren y el texto envuelve.
   Ojo: `panel-body` tambien lo llevan los contenedores externos del
   acordeon (`contenido-acordeon panel-body`), que NO deben volverse
   grilla. Por eso se exige que el hijo directo sea un boton. */
.panel-body:has(> .claseBoton) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--ater-sp-2);
    align-content: start;
}

.panel-body:has(> .claseBoton) .claseBoton {
    width: auto;
    margin: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
    border-radius: var(--ater-r);
}

/* ---- Fichas de capa --------------------------------------------------- */
.ol-layercontainer .ol-layer {
    background: var(--ater-card);
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-md);
    box-shadow: none;
    margin: 6px 0;
    padding: 10px 12px;
}
.ol-layer:hover {
    background: var(--ater-surface-2);
    border-color: var(--ater-magenta);
    box-shadow: var(--ater-shadow-sm);
    transform: none;
}
.ol-layer.active {
    background: var(--ater-surface-2);
    border-color: var(--ater-magenta);
    box-shadow: 0 0 0 3px var(--ater-ring);
}
.ol-layer span:first-of-type { color: var(--ater-text); font-weight: 600; }
.ol-layer.active span:first-of-type { color: var(--ater-magenta); }
.ol-layer input[type=checkbox] { accent-color: var(--ater-magenta); }
.ol-layer.over { border-top: 3px solid var(--ater-magenta); box-shadow: none; }

.ol-layermanager-style { border-top: 1px solid var(--ater-border); }
.ol-layermanager-style input,
.ol-layermanager-style select {
    border: 1.5px solid var(--ater-border);
    border-radius: var(--ater-r-sm);
    color: var(--ater-text);
}
.ol-layermanager-style input:focus,
.ol-layermanager-style select:focus {
    border-color: var(--ater-magenta);
    box-shadow: 0 0 0 3px var(--ater-ring);
}
.ol-layermanager-style button {
    background: var(--ater-grad);
    border: none;
    border-radius: var(--ater-r-sm);
    box-shadow: var(--ater-shadow-btn);
    font-weight: 600;
}
.ol-layermanager-style button:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--ater-shadow-btn); }

/* ---- Referencias de la capa ------------------------------------------
   La simbologia que publica el servicio, desplegable desde la ficha. La
   ficha se arma como una grilla de una sola fila y el panel ocupa una fila
   entera abajo: asi abrirlo no reacomoda el nombre ni los checkbox. */
.ol-layercontainer .ol-layer { flex-wrap: wrap; }
/* El nombre comparte la primera fila con los controles en vez de quedarse
   con el 100% del ancho, que era lo que empujaba todo a la fila siguiente. */
.ol-layercontainer .ol-layer > span:first-of-type {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.ol-layer .ol-layermanager-style,
.ol-layer .ol-layer-referencias { flex: 0 0 100%; }
.ol-layer .ol-layer-referencias { order: 2; }

/* ---- Controles de la ficha de capa -----------------------------------
   Los dos botones de la fila -ver y referencias- comparten la misma caja
   para que el renglon se lea parejo. El estado lo cuenta el icono, no el
   color de fondo: con quince capas listadas, quince recuadros llenos son
   ruido. */
.ol-layermanager-visible,
.ol-layermanager-referencias {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--ater-card);
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-sm);
    color: var(--ater-muted);
    font-size: .82em;
    line-height: 1;
    cursor: pointer;
    transition: background var(--ater-t-fast) var(--ater-ease),
                border-color var(--ater-t-fast) var(--ater-ease),
                color var(--ater-t-fast) var(--ater-ease);
}
.ol-layermanager-visible:hover,
.ol-layermanager-referencias:hover {
    background: var(--ater-surface-2);
    border-color: var(--ater-magenta);
    color: var(--ater-magenta);
}
.ol-layermanager-visible:focus,
.ol-layermanager-referencias:focus {
    outline: none;
    border-color: var(--ater-magenta);
    box-shadow: 0 0 0 3px var(--ater-ring);
}

/* Capa a la vista: el ojo abierto, en el color de la marca. */
.ol-layermanager-visible[aria-pressed="true"] { color: var(--ater-magenta); }
/* Capa apagada: ojo tachado y todo el renglon apagado con el. El cambio de
   icono es el que lleva el dato; el gris solo lo acompaña. */
.ol-layermanager-visible[aria-pressed="false"] {
    background: var(--ater-surface-2);
    color: var(--ater-muted);
}
.ol-layer-oculta > span:first-of-type { color: var(--ater-muted); font-weight: 500; }

/* Area tactil: en pantalla sin mouse los 28px no alcanzan. */
@media (hover: none) and (pointer: coarse) {
    .ol-layermanager-visible,
    .ol-layermanager-referencias { width: 44px; height: 44px; font-size: 1em; }
}

/* Solo tienen boton de referencias las capas que publican simbologia, asi
   que su sola presencia avisa cuales son. Abierto queda encendido: es lo
   que dice que el panel de abajo pertenece a esta capa. */
.ol-layermanager-referencias[aria-expanded="true"] {
    background: var(--ater-ring);
    border-color: var(--ater-magenta);
    color: var(--ater-magenta);
}

/* Un filete y nada mas: la ficha ya es una tarjeta, otra caja adentro solo
   agrega borde sobre borde. */
.ol-layer-referencias {
    display: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--ater-border);
}
.ol-layer.activeImg .ol-layer-referencias {
    display: block;
    animation: ol-referencias-entra var(--ater-t) var(--ater-ease);
}
@keyframes ol-referencias-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.ol-layer-referencias-titulo {
    margin: 0 0 8px;
    color: var(--ater-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ol-layer-referencias--error .ol-layer-referencias-titulo { color: var(--ater-error); }
.ol-layer-referencias--vacio .ol-layer-referencias-titulo,
.ol-layer-referencias--cargando .ol-layer-referencias-titulo {
    color: var(--ater-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: var(--ater-fs-xs);
}
/* Mientras carga, falla o vuelve vacia, la imagen no ocupa lugar: el titulo
   es el que cuenta que esta pasando. */
.ol-layer.activeImg .ol-layer-referencias--cargando .ol-layer-reference-img,
.ol-layer.activeImg .ol-layer-referencias--error .ol-layer-reference-img,
.ol-layer.activeImg .ol-layer-referencias--vacio .ol-layer-reference-img {
    display: none;
}

/* Ancho natural mientras entre en la ficha. La simbologia que publica el
   servicio ronda los 270px, asi que en la practica se ve a tamaño real y sin
   barra de scroll horizontal. */
.ol-layer.activeImg .ol-layer-reference-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.ol-layer-reference-img:hover { box-shadow: none; transform: none; }

/* Boton de consulta de condiciones territoriales del DXF. Se agrega desde
   js/cargarArchivoDxf.js a la ficha de la capa, solo fuera de produccion. */
.ol-layermanager-condiciones {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--ater-card);
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-sm);
    color: var(--ater-magenta);
    font-size: 0.9em;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.ol-layermanager-condiciones:hover {
    background: var(--ater-surface-2);
    border-color: var(--ater-magenta);
}
.ol-layermanager-condiciones:focus {
    outline: none;
    border-color: var(--ater-magenta);
    box-shadow: 0 0 0 3px var(--ater-ring);
}

.attributemanager tr.selected td {
    background: var(--ater-ring);
    border-left: 3px solid var(--ater-magenta);
}

/* =====================================================================
   Mapa y sus controles
   ===================================================================== */
.map { background: #eef0f4; box-shadow: none; }

.map .ol-control,
.map .ol-scale-line,
.map .ol-zoomslider {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-md);
    box-shadow: var(--ater-shadow-sm);
    color: var(--ater-text);
    backdrop-filter: blur(8px);
}

.map .ol-control button {
    border-radius: var(--ater-r-sm);
    color: var(--ater-text);
    border: 1px solid transparent;
}
.map .ol-control button:hover {
    background: var(--ater-surface-2);
    border-color: var(--ater-magenta);
    box-shadow: none;
    transform: none;
}

.map .ol-scale-line-inner { border-color: var(--ater-magenta); color: var(--ater-text); }
.map .ol-zoomslider-thumb { background: var(--ater-grad) !important; border-radius: var(--ater-r-sm); }

/* =====================================================================
   Barra de estado
   ---------------------------------------------------------------------
   El alto del shell se repartia con calc() sobre alturas fijas de menu y
   toolbar (`height: calc(100% - 108px)`). Cuando esas alturas cambiaron,
   la suma paso de 100vh y la barra de estado -que va ultima- quedo fuera
   de la ventana, recortada por el `overflow: hidden` de .application: de
   ahi que desaparecieran las coordenadas del puntero. Se reemplaza el
   calculo por una columna flex, que reparte el alto sola y no vuelve a
   desincronizarse si el menu o la toolbar cambian de tamaño.
   ===================================================================== */
.application {
    display: flex;
    flex-direction: column;
}
/* El mapa se queda con el alto que sobra; el resto ocupa lo suyo. */
.map-container {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
}
.menubar,
.toolbar,
.statusbar { flex: 0 0 auto; }

.statusbar {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: 28px;
    background: var(--ater-card);
    border-top: 1px solid var(--ater-border);
}
/* Los controles de OL vienen como celdas de tabla desde ol.editor.css. */
.statusbar > div,
.statusbar .ol-control {
    display: flex;
    align-items: center;
    height: auto;
    padding: var(--ater-sp-1) var(--ater-sp-3);
    color: var(--ater-muted);
    font-size: var(--ater-fs-xs);
}
.statusbar .ol-control { border-right: 1px solid var(--ater-border); }
.statusbar .ol-control:last-child { border-right: 0; }
.statusbar .ol-message { flex: 1 1 auto; min-width: 0; }
.statusbar .ol-projection select,
.statusbar .ol-rotation input { color: var(--ater-text); font-family: var(--ater-font); }
.statusbar .ol-projection option { background: var(--ater-card); color: var(--ater-text); }

/* ---------------------------------------------------------------------
   Lectura de coordenadas del puntero (js/coordenadasMouse.js)

   Es el unico dato de la barra que cambia de forma continua, asi que se
   lo trata como una lectura de instrumento: rotulo tenue, numeros de
   ancho fijo y un area clickeable que copia el par geografico.
   --------------------------------------------------------------------- */
.statusbar .coordenadas { padding: 0; }

/* OpenLayers da por sentado que todo boton dentro de un .ol-control es uno de
   sus botones cuadrados de 1.375em (`.ol-control button`), asi que estas
   reglas van anidadas para ganarle en especificidad y devolver el boton a
   una caja de texto normal. */
.coordenadas .coordenadas-copiar {
    display: flex;
    align-items: center;
    gap: var(--ater-sp-3);
    width: auto;
    height: 100%;
    min-height: 28px;
    margin: 0;
    padding: var(--ater-sp-1) var(--ater-sp-3);
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--ater-muted);
    font: inherit;
    font-size: var(--ater-fs-xs);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ater-t-fast) var(--ater-ease);
}
.coordenadas .coordenadas-copiar:hover,
.coordenadas .coordenadas-copiar:focus { background: var(--ater-surface-2); }
.coordenadas .coordenadas-copiar:focus { outline: 0; }
.coordenadas .coordenadas-copiar:focus-visible {
    outline: 2px solid var(--ater-magenta);
    outline-offset: -2px;
}

.coordenadas-grupo {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ater-sp-2);
    white-space: nowrap;
}
/* Filete entre los dos sistemas: son lecturas distintas del mismo punto y
   sin el corte los dos pares se leen como una sola fila de numeros. */
.coordenadas-grupo + .coordenadas-grupo {
    border-left: 1px solid var(--ater-border);
    padding-left: var(--ater-sp-3);
}

.coordenadas-rotulo {
    color: var(--ater-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Cifras de ancho fijo: la barra no tiembla mientras se mueve el mouse. */
.coordenadas-valor {
    color: var(--ater-text);
    font-family: var(--ater-font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--ater-fs-xs);
}

/* Estado inicial: todavia no hubo ninguna posicion que mostrar. */
.coordenadas-vacio { color: var(--ater-muted); font-size: var(--ater-fs-xs); }
.coordenadas:not(.coordenadas--vacio) .coordenadas-vacio { display: none; }
.coordenadas--vacio .coordenadas-grupo { display: none; }

/* Puntero fuera del mapa: el ultimo valor sigue ahi para leerlo o copiarlo,
   atenuado para que no se confunda con la posicion actual. */
.coordenadas--suspendido .coordenadas-valor { color: var(--ater-muted); }

/* Fuera del momento de la copia el aviso no ocupa lugar: si no, su hueco
   deja un espacio suelto entre la lectura y el icono. */
.coordenadas-aviso {
    display: none;
    color: var(--ater-ok);
    font-size: var(--ater-fs-xs);
    font-weight: 600;
}
.coordenadas--avisando .coordenadas-aviso { display: inline; }
.coordenadas--error .coordenadas-aviso { color: var(--ater-error); }

/* Unica pista de que la lectura se copia: tenue en reposo, nitida al pasar
   por encima y en verde el instante que confirma la copia. */
.coordenadas-icono {
    color: var(--ater-border-strong);
    font-size: .8em;
    transition: color var(--ater-t-fast) var(--ater-ease);
}
.coordenadas .coordenadas-copiar:hover .coordenadas-icono,
.coordenadas .coordenadas-copiar:focus-visible .coordenadas-icono {
    color: var(--ater-magenta);
}
.coordenadas--avisando .coordenadas-icono { color: var(--ater-ok); }
.coordenadas--error .coordenadas-icono { color: var(--ater-error); }

/* =====================================================================
   Modales y formularios heredados de Bootstrap
   ===================================================================== */
.modal-content { border: 1px solid var(--ater-border); border-radius: var(--ater-r-lg); box-shadow: var(--ater-shadow-lg); }
/* Cabecera en fila: el boton de cerrar venia flotado y un titulo largo se le
   metia debajo. Como en el HTML el boton va primero, se lo manda al final
   con `order`. */
.modal-header {
    display: flex;
    align-items: center;
    gap: var(--ater-sp-3);
    background: var(--ater-grad);
    color: #fff;
    border-bottom: none;
}
/* El clearfix de Bootstrap se volveria un item mas de la fila. */
.modal-header::before,
.modal-header::after { display: none; }
.modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: var(--ater-sp-3);
    color: #fff;
    font-weight: 700;
    /* El titulo puede envolver: nunca se corta ni empuja al boton de cerrar. */
    flex: 1 1 auto;
    min-width: 0;
    order: 0;
    margin: 0;
    line-height: 1.3;
}
/* Chapa del icono del titulo. Vidrio sobre el degradado institucional, no un
   color suelto: el acento de la cabecera ya es la marca. */
.modal-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--ater-r);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: .9em;
}
/* El logotipo institucional es violeta: sobre la cabecera en degradado se
   pasa a blanco, si no desaparece contra el fondo. */
.modal-header img { filter: brightness(0) invert(1); opacity: 1; }
.modal-header .modal-title-logo { max-height: 30px; width: auto; flex-shrink: 0; }
.modal-title-version {
    margin-left: 6px;
    color: rgba(255, 255, 255, .75);
    font-size: var(--ater-fs-xs);
    font-weight: 600;
    letter-spacing: .5px;
}
.modal-header .close {
    order: 1;
    float: none;
    flex-shrink: 0;
    color: #fff;
    opacity: .8;
    /* El area tactil del boton de cerrar llegaba a 20px. */
    min-width: 44px;
    min-height: 44px;
    margin: 0 -8px 0 0;
    font-size: 26px;
    line-height: 1;
}
.modal-header .close:hover { opacity: 1; color: #fff; }

/* El cuerpo scrollea solo: antes, en pantallas bajas o en horizontal, el pie
   con los botones quedaba fuera de la ventana. */
.modal-body {
    max-height: calc(100vh - 230px);
    max-height: calc(100dvh - 230px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal-body .ater-field:last-child,
.modal-body .form-group:last-child { margin-bottom: 0; }
.modal-body p { line-height: 1.6; }
/* Los campos crecieron de 30px a 38px: el label de al lado se centra con ellos. */
.modal-body .form-horizontal .control-label {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: var(--ater-text);
    font-size: var(--ater-fs-sm);
    font-weight: 600;
}
/* Los enlaces azules de Bootstrap no son de la casa. */
.modal-body a { color: var(--ater-magenta); font-weight: 600; }
.modal-body a:hover,
.modal-body a:focus { color: var(--ater-magenta-700); }

/* Titulo de bloque dentro del cuerpo: escalon debajo del titulo del modal. */
.modal-section-title {
    margin: var(--ater-sp-5) 0 var(--ater-sp-3);
    color: var(--ater-text-strong);
    font-size: var(--ater-fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.modal-section-title:first-child { margin-top: 0; }

/* Lista de enlaces: sin viñetas, con area tactil propia. */
.modal-linklist { margin: var(--ater-sp-3) 0; padding: 0; list-style: none; }
.modal-linklist li + li { margin-top: var(--ater-sp-1); }
.modal-linklist a { display: inline-flex; align-items: center; min-height: 32px; }

/* El bloque azul de .bg-primary es de Bootstrap, no de la identidad. */
.modal-body .bg-primary {
    padding: var(--ater-sp-2) var(--ater-sp-3);
    border-radius: var(--ater-r-sm);
    background: var(--ater-violeta);
    color: #fff;
}

/* Boton principal dentro del cuerpo (formulario de contacto). */
.modal-body .btn-primary {
    min-height: 44px;
    padding: 10px 20px;
    background: var(--ater-grad);
    border: none;
    border-radius: var(--ater-r);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--ater-shadow-btn);
}
.modal-body .btn-primary:hover,
.modal-body .btn-primary:focus { background: var(--ater-grad); color: #fff; filter: brightness(1.07); }
/* Deshabilitado: se ve deshabilitado, no solo palido. */
.modal-body .btn[disabled],
.modal-footer .btn[disabled] {
    background: var(--ater-border);
    color: var(--ater-muted);
    box-shadow: none;
    filter: none;
    opacity: 1;
    cursor: not-allowed;
}

/* ---- Botones del pie -------------------------------------------------
   Un solo boton principal por modal. "Cancelar" no destruye nada, asi que
   deja de ser rojo: el rojo queda reservado para lo que borra. */
.modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ater-sp-2);
    min-height: 44px;
    border-radius: var(--ater-r);
    font-weight: 600;
}
.modal-footer .btn-primary,
.modal-footer .btn-success {
    background: var(--ater-grad);
    border: none;
    color: #fff;
    box-shadow: var(--ater-shadow-btn);
}
.modal-footer .btn-primary:hover,
.modal-footer .btn-primary:focus,
.modal-footer .btn-success:hover,
.modal-footer .btn-success:focus { background: var(--ater-grad); color: #fff; filter: brightness(1.07); }

.modal-footer .btn-danger[data-dismiss="modal"] {
    background: #fff;
    border: 1px solid var(--ater-border);
    color: var(--ater-text);
    box-shadow: none;
}
.modal-footer .btn-danger[data-dismiss="modal"]:hover,
.modal-footer .btn-danger[data-dismiss="modal"]:focus {
    background: var(--ater-surface-2);
    border-color: var(--ater-border-strong);
    color: var(--ater-text);
}

/* ---- Avisos dentro de un modal --------------------------------------- */
.modal-body .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ater-sp-3);
    border: none;
    border-left: 4px solid var(--ater-cyan);
    border-radius: var(--ater-r);
    background: rgba(0, 169, 183, .08);
    color: var(--ater-text);
    font-size: var(--ater-fs-sm);
    line-height: 1.55;
}
.modal-body .alert > i { flex-shrink: 0; margin-top: 3px; color: var(--ater-cyan); }

/* El color nunca es la unica senal, pero el que hay tiene que ser el correcto:
   el aviso de error no puede quedar cian como el informativo. */
.modal-body .alert-danger {
    border-left-color: var(--ater-error);
    background: var(--ater-error-bg);
    color: #8f1616;
}
.modal-body .alert-danger > i { color: var(--ater-error); }

.modal-body .alert-warning {
    border-left-color: var(--ater-warn);
    background: var(--ater-warn-bg);
    color: #7c3f06;
}
.modal-body .alert-warning > i { color: var(--ater-warn); }

.modal-body .alert-success {
    border-left-color: var(--ater-ok);
    background: var(--ater-ok-bg);
    color: #0b5d56;
}
.modal-body .alert-success > i { color: var(--ater-ok); }

/* ---- Reparacion de los controles heredados de Bootstrap 3 -------------
   Bootstrap fija `height: 34px` en .form-control, pero el padding y el
   tamano de letra que define ol.editor.css suman 44px: el texto quedaba
   cortado por la mitad (se veia en el <select> del modal de DXF). La altura
   pasa a ser minima y ademas cubre el area tactil de 44px. */
.form-control,
select.form-control {
    height: auto;
    min-height: 44px;
    line-height: 1.5;
}
textarea.form-control { height: auto; }

/* Solo controles: `.input-sm` tambien se usa suelto en algunos <label>. */
input.input-sm,
select.input-sm,
textarea.input-sm,
.form-control.input-sm,
select.form-control.input-sm {
    height: auto;
    min-height: 38px;
    line-height: 1.4;
}

.form-control:focus {
    border-color: var(--ater-magenta);
    box-shadow: 0 0 0 3px var(--ater-ring);
}

/* Debajo de 16px iOS hace zoom al enfocar un campo y desencuadra el mapa. */
@media (max-width: 767px) {
    .form-control,
    .form-control.input-sm { font-size: 16px; }
}

/* ---- Modal en pantallas chicas ---------------------------------------- */
@media (max-width: 767px) {
    .modal-dialog { margin: 10px; }
    .modal-header { padding: 16px; }
    .modal-body { padding: 16px; max-height: calc(100dvh - 190px); }
    .modal-footer { display: flex; flex-wrap: wrap; gap: var(--ater-sp-2); padding: 12px 16px; }
    /* Bootstrap separa los botones con margin-left; con gap sobra y descuadra. */
    .modal-footer .btn + .btn { margin-left: 0; }
    .modal-footer .btn { flex: 1 1 140px; }
}

.modalLoadingCss .fa-spinner { color: var(--ater-magenta); }

/* =====================================================================
   Pantalla de inicio (aviso previo al mapa)
   ===================================================================== */
.startscreen {
    background:
        radial-gradient(900px 600px at 80% -10%, rgba(156, 2, 124, .5), transparent 62%),
        radial-gradient(700px 520px at 5% 105%, rgba(0, 169, 183, .22), transparent 58%),
        linear-gradient(135deg, #2a1748 0%, #1d1136 55%, #150b26 100%);
    backdrop-filter: blur(6px);
    overflow-y: auto;
}

/* Dos columnas: bienvenida y novedades. Se apilan cuando no entran. */
.startscreen.active {
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    gap: clamp(16px, 2vw, 28px);
    padding: clamp(16px, 4vh, 48px) clamp(16px, 4vw, 40px);
}

/* El contenedor real vive en `.vs-welcome`; se anula la caja de Bootstrap. */
.startscreen .container {
    flex: 0 1 620px;
    width: auto;
    max-width: 620px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.vs-welcome {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    padding: clamp(24px, 3.5vw, 36px);
    background: var(--ater-card);
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-lg);
    box-shadow: 0 44px 110px -48px rgba(0, 0, 0, .8);
    animation: vsWelcomeEntra .45s var(--ater-ease) both;
}

@keyframes vsWelcomeEntra {
    from { opacity: 0; transform: translateY(18px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

.vs-welcome-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ater-sp-4);
    flex-wrap: wrap;
    padding-bottom: var(--ater-sp-4);
    border-bottom: 1px solid var(--ater-border);
}

.vs-welcome-head img { height: 42px; width: auto; display: block; }

.vs-welcome h1 {
    margin: var(--ater-sp-5) 0 var(--ater-sp-2);
    color: var(--ater-text-strong);
    font-size: var(--ater-fs-xl);
    font-weight: 800;
    letter-spacing: -.3px;
}

.vs-welcome-lead {
    margin: 0 0 var(--ater-sp-5);
    color: var(--ater-muted);
    font-size: var(--ater-fs-sm);
    line-height: 1.6;
}

.vs-welcome .ater-note + .ater-note { margin-top: var(--ater-sp-3); }

.vs-sources { margin: var(--ater-sp-5) 0; }

.vs-sources-title {
    margin: 0 0 var(--ater-sp-3);
    color: var(--ater-muted);
    font-size: var(--ater-fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.vs-sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ater-sp-2); }

.vs-sources li {
    padding: 10px 14px;
    background: var(--ater-surface-2);
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r);
    font-size: var(--ater-fs-sm);
}
.vs-sources strong { color: var(--ater-text-strong); font-weight: 700; }
.vs-sources a { color: var(--ater-magenta); font-weight: 600; text-decoration: none; word-break: break-all; }
.vs-sources a:hover { text-decoration: underline; }

.vs-cuit-form {
    display: flex;
    gap: var(--ater-sp-2);
    flex-wrap: wrap;
    margin-top: var(--ater-sp-3);
}
.vs-cuit-form .ater-input { flex: 1 1 200px; min-width: 0; }

.vs-welcome-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ater-sp-4);
    padding-top: var(--ater-sp-5);
    border-top: 1px solid var(--ater-border);
    text-align: center;
}

.vs-welcome-foot .ater-btn { width: 100%; max-width: 340px; }

.vs-terms { color: var(--ater-magenta); font-size: var(--ater-fs-sm); font-weight: 600; text-decoration: none; }
.vs-terms:hover { text-decoration: underline; color: var(--ater-magenta-700); }

.vs-noscript {
    display: block;
    margin-top: var(--ater-sp-3);
    padding: 12px;
    background: var(--ater-error-bg);
    border-radius: var(--ater-r);
    color: var(--ater-error);
    font-size: var(--ater-fs-sm);
}

/* =====================================================================
   Documento legal (terminos_y_condiciones.php)
   Columna de lectura sobre el fondo institucional.
   ===================================================================== */
.vs-doc {
    max-width: 76ch;
    margin: clamp(20px, 5vh, 56px) auto;
    padding: clamp(24px, 4vw, 48px);
    background: var(--ater-card);
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-lg);
    box-shadow: var(--ater-shadow);
    color: var(--ater-text);
    font-size: var(--ater-fs-base);
    line-height: 1.7;
}

.vs-doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ater-sp-4);
    flex-wrap: wrap;
    padding-bottom: var(--ater-sp-4);
    border-bottom: 1px solid var(--ater-border);
}
.vs-doc-head img { height: 44px; width: auto; display: block; }
.vs-doc-head .ater-kicker { color: var(--ater-magenta); margin: 0; }

.vs-doc h1 {
    margin: var(--ater-sp-6) 0 var(--ater-sp-3);
    color: var(--ater-text-strong);
    font-size: var(--ater-fs-2xl);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
}

.vs-doc h3 {
    margin: var(--ater-sp-6) 0 var(--ater-sp-3);
    color: var(--ater-text-strong);
    font-size: var(--ater-fs-lg);
    font-weight: 700;
}

.vs-doc p { margin: 0 0 var(--ater-sp-4); }
.vs-doc p > b { color: var(--ater-text-strong); }
.vs-doc hr { margin: var(--ater-sp-5) 0; border: 0; border-top: 1px solid var(--ater-border); }
.vs-doc a { color: var(--ater-magenta); font-weight: 600; }

.vs-doc-foot { text-align: center; }
.vs-doc-foot p { color: var(--ater-muted); font-size: var(--ater-fs-sm); }

/* ---- Novedades (inyectado por js/informacionDeCambios.js) ------------- */
.vs-changelog {
    flex: 0 1 400px;
    max-width: 400px;
    align-self: center;
    padding: clamp(20px, 2.5vw, 26px);
    background: var(--ater-card);
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-lg);
    box-shadow: 0 44px 110px -48px rgba(0, 0, 0, .8);
    animation: vsWelcomeEntra .45s var(--ater-ease) .08s both;
}

.vs-changelog-head {
    display: flex;
    align-items: center;
    gap: var(--ater-sp-3);
    padding-bottom: var(--ater-sp-4);
    margin-bottom: var(--ater-sp-4);
    border-bottom: 1px solid var(--ater-border);
}

.vs-changelog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--ater-r-md);
    background: var(--ater-grad);
    color: #fff;
    box-shadow: var(--ater-shadow-btn);
}
.vs-changelog-icon svg { width: 21px; height: 21px; }

.vs-changelog-head h2 {
    margin: 0;
    color: var(--ater-text-strong);
    font-size: var(--ater-fs-lg);
    font-weight: 800;
    letter-spacing: -.3px;
}
.vs-changelog-head p { margin: 2px 0 0; color: var(--ater-muted); font-size: var(--ater-fs-xs); }

.vs-changelog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ater-sp-2); }

.vs-changelog-list li {
    padding: 12px 14px;
    background: var(--ater-surface-2);
    border-radius: var(--ater-r);
    border-left: 3px solid var(--ater-magenta);
}

.vs-changelog-list strong {
    display: block;
    color: var(--ater-text-strong);
    font-size: var(--ater-fs-sm);
    font-weight: 600;
    line-height: 1.4;
}

.vs-changelog-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--ater-magenta);
    font-size: var(--ater-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vs-changelog-date svg { width: 13px; height: 13px; }

.vs-changelog-empty {
    border-left-color: var(--ater-border);
    color: var(--ater-muted);
    font-size: var(--ater-fs-sm);
}

/* =====================================================================
   Adaptacion a pantallas chicas
   ---------------------------------------------------------------------
   Por debajo de 1100px los paneles dejan de comprimir el mapa: pasan a
   superponerse, asi el lienzo conserva ancho util y los paneles quedan
   legibles. El boton de pin los sigue abriendo y cerrando.
   ===================================================================== */
@media (max-width: 1400px) {
    /* Mapa + paneles tienen que sumar 100% exacto: el mapa (overflow:hidden)
       no se acomoda entre dos floats que no le dejan lugar, se va abajo de
       ellos y queda fuera de la vista (mapa en blanco entre 1101 y 1400px). */
    .pinned-layermanager .map,
    .pinned-attributemanager .map { width: 74%; }
    .pinned-layermanager.pinned-attributemanager .map { width: 48%; }
    .layermanager, .layermanager.pinned,
    .attributemanager, .attributemanager.pinned { width: 26%; }
    .layermanager { margin-left: calc(-26% + 3px); }
    .attributemanager { margin-right: calc(-26% + 3px); }
}

@media (max-width: 1100px) {
    .pinned-layermanager .map,
    .pinned-attributemanager .map,
    .pinned-layermanager.pinned-attributemanager .map { width: 100%; }

    .layermanager, .layermanager.pinned,
    .attributemanager, .attributemanager.pinned {
        position: absolute;
        float: none;
        top: 0;
        height: 100%;
        width: min(86vw, 340px);
        margin: 0;
        z-index: var(--ater-z-panel);
        box-shadow: var(--ater-shadow-lg);
    }

    .layermanager, .layermanager.pinned { left: 0; right: auto; }
    .attributemanager, .attributemanager.pinned { right: 0; left: auto; }

    /* Sin pin quedan fuera de pantalla del todo. Se abren con los botones
       flotantes (.vs-fab): la lengueta de 6px que se abria con hover no
       funcionaba con el dedo (no hay hover y el blanco era minimo). */
    .layermanager:not(.pinned) { transform: translateX(-100%); box-shadow: none; }
    .attributemanager:not(.pinned) { transform: translateX(100%); box-shadow: none; }
    .layermanager, .attributemanager {
        transition: transform .28s var(--ater-ease), box-shadow .28s var(--ater-ease);
        overscroll-behavior: contain;
    }

    /* Prioridad del contenido: con la barra angosta queda el par geografico,
       que es el que se copia; las planas se leen en pantalla grande. */
    .coordenadas-grupo--plano { display: none; }
}

@media (max-width: 640px) {
    .menubar ul li > a { padding: 12px 16px; }
    .menubar ul li.branding > a { padding: 12px 16px; }
    .toolbar .ol-control { padding: 0 6px; }
    /* Area tactil minima de 44px en los controles del mapa. */
    .toolbar .ol-control button { width: 44px; height: 44px; }
    /* Una sola fila con las coordenadas: el selector de proyeccion y la
       rotacion se usan en escritorio y en el celular partian la barra en
       dos filas, robandole alto al mapa. */
    .statusbar { flex-wrap: nowrap; }
    .statusbar .ol-projection,
    .statusbar .ol-rotation { display: none; }
    /* Area tactil minima tambien para el boton que copia. */
    .coordenadas .coordenadas-copiar { min-height: 44px; }
    .vs-welcome-head { justify-content: center; }
}

@media (max-width: 1100px) {
    .claseBoton { width: calc(100% - 8px); }
}

/* =====================================================================
   Celulares y pantallas tactiles
   ---------------------------------------------------------------------
   Lo que delataba "pagina web" en el telefono, de a una cosa por vez.
   Se decide por capacidad ((pointer: coarse), (hover: hover)) y por
   ancho, nunca por el navegador.
   ===================================================================== */

/* El alto de la app sigue al area visible. Con 100vh, en el celular la app
   medía mas que la pantalla (cuenta el alto sin la barra de direcciones) y
   la pagina entera scrolleaba: se iba el menu y la barra inferior quedaba
   partida. El documento no scrollea nunca; scrollean los paneles. */
html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
.application {
    height: 100vh;
    height: 100dvh;
    /* En horizontal, el contenido no se mete debajo del notch. */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
}
.statusbar { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Sin el destello gris que pinta el navegador al tocar. Cada control ya
   tiene su propio estado :active. */
html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* Controles: respuesta inmediata al toque (sin la espera del doble toque)
   y sin seleccionar el texto del boton con una pulsacion larga. El texto
   de contenido (datos de una parcela, coordenadas) sigue seleccionable. */
.menubar a,
.toolbar button,
.bar-title,
.vs-fab,
.vs-panel-close,
.ater-btn,
.item-acordeon > .item {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* El boton del mapa de ubicacion (») tiene z-index 10000 y se veia encima
   de la pantalla de inicio. */
#startscreen.active ~ .application .ol_overview { visibility: hidden; }

/* El anillo de foco queda para el teclado: al tocar una pestana con el
   dedo no debe quedar un recuadro negro alrededor. */
.menubar a:focus:not(:focus-visible),
.vs-fab:focus:not(:focus-visible) { outline: none; }

/* Botones para abrir los paneles. Solo en pantallas chicas: en las grandes
   los paneles se fijan con el chinche, como siempre. */
.vs-fabs, .vs-panel-close, .vs-backdrop { display: none; }

@media (max-width: 1100px) {
    .vs-fabs {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: calc(var(--ater-z-panel) - 2);
        display: flex;
        gap: 8px;
    }
    .vs-fab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid var(--ater-border);
        border-radius: var(--ater-r-pill);
        background: var(--ater-card);
        color: var(--ater-violeta);
        font: 700 var(--ater-fs-sm) / 1 var(--ater-font);
        box-shadow: var(--ater-shadow);
        cursor: pointer;
        transition: transform .12s var(--ater-ease), background .12s var(--ater-ease);
    }
    .vs-fab i { color: var(--ater-magenta); }
    .vs-fab:active { transform: scale(.97); background: var(--ater-surface-2); }
    .vs-fab[aria-expanded="true"] { background: var(--ater-violeta); color: #fff; border-color: var(--ater-violeta); }
    .vs-fab[aria-expanded="true"] i { color: var(--ater-oro); }

    /* Fondo que oscurece el mapa con un panel abierto; tocarlo lo cierra. */
    .vs-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: calc(var(--ater-z-panel) - 1);
        background: rgba(21, 11, 38, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s var(--ater-ease);
    }
    .vs-panel-abierto .vs-backdrop { opacity: 1; pointer-events: auto; }
    /* El boton del mapa de ubicacion (») flotaba encima del panel abierto. */
    .vs-panel-abierto .ol_overview { visibility: hidden; }

    /* En el panel superpuesto el chinche no tiene sentido: se cierra con X. */
    .bar-title a.pin { display: none; }
    .vs-panel-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin: -10px -10px -10px auto;
        border: 0;
        border-radius: var(--ater-r-md);
        background: transparent;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }
    .vs-panel-close:active { background: rgba(255, 255, 255, .15); }

    /* "Cargando recursos" se agrega al titulo del panel: va en su propia
       linea, chico, en lugar de aplastar el titulo en dos columnas. */
    .bar-title { flex-wrap: wrap; gap: 4px 8px; }
    .bar-title #text-temporal {
        order: 3;
        flex: 1 0 100%;
        margin: 0;
        font-size: var(--ater-fs-xs);
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        opacity: .85;
    }
}

/* Con el dedo se hace zoom pellizcando o con los botones de la barra: el
   deslizador ocupaba media franja derecha del mapa en el celular. */
@media (pointer: coarse) {
    .map .ol-zoomslider { display: none; }
    /* Menos de 16px en un campo hace que iOS agrande la pagina al tocarlo. */
    input, select, textarea { font-size: 16px; }
}

@media (max-width: 767px) {
    /* El menu se desplaza de costado: un degradado en el borde avisa que
       hay mas pestanas (Ayuda, Perfil) en lugar de cortarlas en seco. */
    .menubar ul {
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
    }
    .menubar ul li { scroll-snap-align: start; }

    /* Panel casi a lo ancho, con un margen que deja ver que hay mapa atras. */
    .layermanager, .layermanager.pinned,
    .attributemanager, .attributemanager.pinned { width: min(88vw, 360px); }
}

@media (max-width: 640px) {
    /* Pantalla de inicio: centrada verticalmente, cuando no entraba en la
       pantalla se cortaba arriba (logo inaccesible, el scroll no llega ahi).
       En el celular arranca desde arriba. */
    .startscreen.active { align-content: flex-start; align-items: flex-start; }

    /* La caja de mensajes vacia ocupaba media barra: las coordenadas se
       quedan con el ancho. */
    .statusbar .ol-message:empty { display: none; }
    .statusbar .ol-message { flex: 0 1 auto; }
    .statusbar .ol-coordenadas { flex: 1 1 auto; min-width: 0; }

    /* Lo importante primero y el boton siempre a mano. */
    .vs-sources { display: none; }
    .vs-welcome { padding: 20px; }
    .vs-welcome-foot {
        position: sticky;
        bottom: 0;
        margin: 0 -20px -20px;
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
        background: var(--ater-card);
        border-radius: 0 0 var(--ater-r-lg) var(--ater-r-lg);
        box-shadow: 0 -10px 24px -16px rgba(0, 0, 0, .35);
    }
    .vs-welcome-foot .ater-btn { max-width: none; min-height: 48px; }
}