:root {
    --guinda: #6B1F3A;
    --guinda-dark: #4E1629;
    --guinda-light: #8C2E52;
    --verde: #2E7D32;
    --verde-dark: #1B5E20;
    --verde-light: #4C9950;
}

/* Botones y elementos "primary" -> guinda */
.btn-primary {
    background-color: var(--guinda) !important;
    border-color: var(--guinda) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--guinda-dark) !important;
    border-color: var(--guinda-dark) !important;
}
.btn-outline-primary {
    color: var(--guinda) !important;
    border-color: var(--guinda) !important;
}
.btn-outline-primary:hover {
    background-color: var(--guinda) !important;
    color: #fff !important;
}

.bg-primary { background-color: var(--guinda) !important; }
.text-primary { color: var(--guinda) !important; }
.border-primary { border-color: var(--guinda) !important; }
.badge-primary { background-color: var(--guinda) !important; }

a { color: var(--guinda); }
a:hover { color: var(--guinda-dark); }

/* Encabezado del menu de usuario (navbar, arriba a la derecha): AdminLTE no
   trae ningun color de texto propio para .user-header -- espera que venga
   de una clase bg-* que lo empareje con texto claro. Aqui el fondo se pone
   con estilo inline (var(--guinda)), asi que sin esto el nombre/rol se ven
   en el negro por defecto del body, ilegibles sobre el guinda oscuro. */
.user-header,
.user-header p,
.user-header p small {
    color: #fff;
}

/* Secundario -> verde */
.btn-secondary-brand,
.bg-verde { background-color: var(--verde) !important; }
.text-verde { color: var(--verde) !important; }
.text-guinda { color: var(--guinda) !important; }
.badge-verde { background-color: var(--verde) !important; color: #fff; }

/* Sidebar */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--guinda) !important;
    color: #fff !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(107, 31, 58, 0.5);
}
.brand-link { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }

.main-sidebar.sidebar-dark-primary,
.main-sidebar.sidebar-dark-primary .sidebar {
    background-color: #241016 !important;
}

/* Navbar / cards con acento */
.card-primary.card-outline { border-top: 3px solid var(--guinda) !important; }
.card-success.card-outline,
.card-outline.card-verde { border-top: 3px solid var(--verde) !important; }

.navbar-white { border-bottom: 3px solid var(--guinda); }

/* Estados de usuario / badges de rol */
.badge-administrador,
.badge-guinda { background-color: var(--guinda); color: #fff; }

/* Estadisticas del dashboard (small-box) */
.small-box.bg-guinda { background-color: var(--guinda) !important; color: #fff; }
.small-box.bg-guinda .icon { color: rgba(255, 255, 255, 0.35); }
.small-box.bg-verde-brand { background-color: var(--verde) !important; color: #fff; }
.small-box.bg-verde-brand .icon { color: rgba(255, 255, 255, 0.35); }

/* Pills / tabs activos */
.nav-pills .nav-link.active {
    background-color: var(--guinda) !important;
}

/* Switches */
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--verde);
    background-color: var(--verde);
}

/* Scrollbar sutil de marca (navegadores basados en WebKit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--guinda-light); border-radius: 4px; }
::-webkit-scrollbar-track { background: #f0f0f0; }

/* ==========================================================================
   Prisma de Promotoria: arbol expandible (tabla + flechas).
   Tema CLARO a proposito (a diferencia de la demo de OrgChart JS que sirvio
   de referencia visual, que es oscura) — se mantiene consistente con el
   resto del panel de AdminLTE, sin fondo oscuro propio.
   ========================================================================== */
.prisma-tabla { font-size: 0.92rem; }

/* Scroll propio de la tabla (no de toda la pagina): el contenedor tiene una
   altura maxima fija y su propio scroll vertical, y el encabezado se queda
   pegado arriba (position: sticky) mientras se recorre. El fondo blanco del
   th es necesario para que el sticky no deje ver las filas pasando "debajo"
   del encabezado, y el box-shadow reemplaza al borde inferior (que position:
   sticky puede cortar de forma rara en algunos navegadores). */
.prisma-tabla-scroll { max-height: 65vh; overflow-y: auto; }

/* Regionales/Seccionales/Promotores/Promovidos/Meta/Sumatoria: un poco mas
   grandes que el resto de la tabla para que se noten mas a simple vista,
   sin que se desborden de la celda (son numeros cortos, formateados con
   toLocaleString, nunca ocupan mucho ancho). */
.prisma-celda-numero { font-size: 1.08rem; font-weight: 600; }
.prisma-tabla thead th {
    position: sticky; top: 0; z-index: 2;
    background: #fff; box-shadow: inset 0 -1px 0 #dee2e6;
}

/* Boton circular de expandir/colapsar. La flecha rota 90 grados cuando el
   nodo esta expandido (clase "prisma-expandido" en el propio boton), en vez
   de cambiar de icono, para que la animacion de giro se vea suave. */
.prisma-toggle {
    width: 22px; height: 22px; padding: 0; margin-right: 6px;
    border: 1px solid #dee2e6; border-radius: 50%; background: #fff;
    color: var(--guinda); font-size: 11px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform 0.15s ease-in-out;
}
.prisma-toggle:hover { background: #f8f0f3; }
.prisma-toggle.prisma-expandido { transform: rotate(90deg); }
/* Los nodos sin hijos (ej. un Promovido) no tienen flecha que darle click;
   se deja un espacio del mismo tamano para que el nombre siga alineado con
   el de sus hermanos que si tienen flecha. */
.prisma-toggle-vacio { display: inline-block; width: 22px; margin-right: 6px; flex-shrink: 0; }

.prisma-fila-nodo { display: flex; align-items: center; }
.prisma-foto {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    margin-right: 8px; flex-shrink: 0;
}
.prisma-nombre-rol .prisma-nombre { font-weight: 600; }
.prisma-nombre-rol .prisma-rol { font-size: 0.78rem; color: #6c757d; }

/* Fila "Cargar mas" (paginacion dentro de un mismo nodo, cuando tiene mas
   hijos directos que TAMANO_PAGINA_HIJOS — ver includes/prisma.php). */
.prisma-cargar-mas td { text-align: center; padding: 6px; background: #fafafa; }

/* Al llegar desde un resultado del buscador, la fila encontrada se resalta
   brevemente para que sea facil ubicarla a simple vista entre todas las que
   se acaban de expandir automaticamente. */
@keyframes prismaResaltar {
    0%   { background-color: #fdf3e7; }
    100% { background-color: transparent; }
}
.prisma-resaltada { animation: prismaResaltar 2.5s ease-out; }

/* ==========================================================================
   Modal de detalle de Prisma de Promotoria (ver assets/js/prisma-modal.js).
   ==========================================================================
   Sistema de modales PROPIO (no usa el componente Modal de Bootstrap): cada
   nivel de la pila es un "slot" posicionado (centrado + desplazamiento en
   cascada, calculado en JS) que contiene el panel visible en si (que solo
   se encarga de la animacion de entrada/salida). Se separan en 2 elementos
   para que el transform de POSICION (slot) y el transform de ANIMACION
   (panel) nunca se pisen entre si. */
.prisma-modal-abierto { overflow: hidden; }

.prisma-modal-overlay {
    position: fixed; inset: 0; z-index: 1070;
    background: rgba(0, 0, 0, 0); pointer-events: none;
    opacity: 0; transition: opacity 0.2s ease, background-color 0.2s ease;
}
.prisma-modal-overlay-visible { opacity: 1; pointer-events: auto; background: rgba(0, 0, 0, 0.5); }
.prisma-modal-lienzo { position: relative; width: 100%; height: 100%; }

/* Migaja de pan: en escritorio muestra la ruta completa (cada nombre da
   click para "regresar" a ese nivel, cerrando lo que se abrio despues de
   el). En movil hace de boton "Regresar" al nivel anterior — ver
   renderBreadcrumbPrisma() en prisma-modal.js. */
.prisma-modal-migaja {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.55); color: #fff; padding: 6px 16px; border-radius: 20px;
    font-size: 0.82rem; display: flex; align-items: center; max-width: 90vw;
    overflow-x: auto; white-space: nowrap; z-index: 1071;
}
.prisma-modal-migaja button.btn-link { color: #fff; text-decoration: underline; }
.prisma-modal-migaja-actual { font-weight: 600; }

.prisma-modal-panel-slot { position: absolute; top: 50%; left: 50%; }

.prisma-modal-panel {
    width: min(640px, 92vw); max-height: min(640px, calc(100vh - 90px));
    background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; transform: translateY(10px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.prisma-modal-panel-visible { opacity: 1; transform: translateY(0) scale(1); }
/* Paneles que no son el de hasta arriba de la pila: se ven detras (efecto
   cascada), pero no reciben clicks — solo el de arriba es interactivo. */
.prisma-modal-panel-fondo { pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }

@media (max-width: 767px) {
    /* Por debajo de este ancho, la cascada se cae a pantalla completa (un
       solo panel visible a la vez, el de hasta arriba) — ver
       esVistaMovilPrisma() en prisma-modal.js. */
    .prisma-modal-panel { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}

.prisma-modal-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; padding: 14px 16px; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.prisma-modal-nombre { font-weight: 700; font-size: 1.05rem; }
.prisma-modal-rol { font-size: 0.8rem; color: var(--guinda); font-weight: 600; }
.prisma-modal-datos-chicos { font-size: 0.8rem; color: #6c757d; margin-top: 4px; }
.prisma-modal-datos-chicos span { display: block; }
.prisma-modal-header-botones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.prisma-modal-avance { padding: 10px 16px; flex-shrink: 0; }
.prisma-modal-barra { height: 18px; }
.prisma-modal-barra .progress-bar { font-size: 0.72rem; line-height: 18px; }

/* Tarjetas de conteo (Regionales/Seccionales/Promotores/Promovidos): solo
   se dibujan las que aplican al rol del nodo abierto (ver TARJETAS_CONFIG
   en prisma-modal.js) — las que no aplican ni siquiera se agregan al DOM,
   no se dejan ocultas con CSS, para que las demas se acomoden sin huecos. */
.prisma-modal-tarjetas { display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap; flex-shrink: 0; }
.prisma-modal-tarjeta {
    flex: 1 1 120px; border: 1px solid #eee; border-radius: 8px; background: #fafafa;
    padding: 8px 10px; text-align: center; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.prisma-modal-tarjeta:hover { background: #f8f0f3; border-color: var(--guinda-light); }
.prisma-modal-tarjeta-activa { background: #f8f0f3; border-color: var(--guinda); }
.prisma-modal-tarjeta-concepto { font-size: 0.72rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.02em; }
.prisma-modal-tarjeta-numero { font-size: 1.35rem; font-weight: 700; color: var(--guinda); }

.prisma-modal-lista-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 16px; background: #fafafa; border-top: 1px solid #eee; border-bottom: 1px solid #eee;
    font-size: 0.82rem; font-weight: 600; color: #495057; flex-shrink: 0;
}
.prisma-modal-lista { overflow-y: auto; flex: 1 1 auto; }
.prisma-modal-lista-fila { padding: 8px 16px; border-bottom: 1px solid #f2f2f2; }
.prisma-modal-lista-fila a { font-weight: 600; }
.prisma-modal-lista-cargar-mas { text-align: center; padding: 8px; }

/* Truco de z-index: el modal de "ficha completa" (Bootstrap, compartido con
   Captura de Registros) tiene que verse SIEMPRE por encima de este modal
   propio cuando se abre desde el boton "Ver ficha completa" — ver
   verFichaDesdeModalPrisma() en prisma-modal.js. Sin esto, ese modal (con
   su z-index normal de Bootstrap) quedaria atrapado DETRAS de nuestro
   overlay (z-index 1070 arriba). */
body.prisma-modal-elevar-ficha #modalDetalleCaptura { z-index: 2500; }
body.prisma-modal-elevar-ficha .modal-backdrop { z-index: 2400; }

/* ==========================================================================
   AVANCE TERRITORIAL (panel/avance_territorial.php)
   ==========================================================================
   Prefijo "at-" para no chocar con nada mas del proyecto. */

/* Etiqueta numerica en el centro de cada poligono (numero de region o de
   seccion) — equivalente a la clase "numero-poligono" de la pagina
   independiente original (mapas/avance_programas.html), renombrada para
   seguir la convencion de prefijos del proyecto. */
.at-etiqueta-poligono {
    background: transparent;
    border: none;
    color: #000;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff; /* legible sobre cualquier color de fondo */
}

/* Pin de una persona individual (registro con latitud/longitud). Un solo
   color fijo (verde del proyecto) porque, a diferencia de los poligonos, los
   pines no llevan semaforo — su color no representa avance, solo marcan
   "aqui hay una persona capturada". */
.at-pin-persona { cursor: pointer; }
.at-pin-persona i {
    font-size: 26px;
    color: var(--verde);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.at-pin-persona:hover i { color: var(--guinda); }

/* Pin de DOMICILIO (latitud_dom/longitud_dom): mismo tamano/forma que el
   pin de GPS de arriba, pero en guinda para distinguirlo de un vistazo
   cuando los 2 checkboxes de Avance Territorial estan activos a la vez. */
.at-pin-domicilio { cursor: pointer; }
.at-pin-domicilio i {
    font-size: 26px;
    color: var(--guinda);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.at-pin-domicilio:hover i { color: var(--guinda-dark); }

/* Popup de un poligono (Region/Seccion): un poco mas de aire entre lineas
   que el popup por defecto de Leaflet, para que la tabla de datos
   (Responsable/Lista Nominal/Meta/Sumatoria/Avance) se lea comoda. */
.popup-avance-territorial .leaflet-popup-content { font-size: 13px; line-height: 1.6; margin: 10px 12px; }

/* ==========================================================================
   ESTRUCTURA DE REPRESENTACION (panel/estructura_representacion_mapa.php)
   ==========================================================================
   Prefijo "er-" para no chocar con nada mas del proyecto. */

/* Etiqueta central de cada poligono de seccion (vista de "detalle de una
   Ruta", con su cubito de siempre): icono + numero de seccion, apilados en
   2 lineas (a diferencia de .at-etiqueta-poligono en Avance Territorial,
   que solo muestra el numero). */
.er-etiqueta-poligono {
    background: transparent;
    border: none;
    color: #000;
    font-size: 12px;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
}
.er-etiqueta-poligono i { font-size: 14px; }

/* NUEVO (2026-09-13, arquitectura "Representante General por Ruta"):
   ------------------------------------------------------------------------
   .er-etiqueta-seccion-referencia: la CAPA DE FONDO de la vista inicial del
   mapa -- TODAS las 174 secciones dibujadas con trazo delgado negro (ver
   dibujarSeccionReferencia() en assets/js/estructura_representacion.js),
   solo de referencia visual (no son clickeables). Su etiqueta es chica, sin
   negritas ni icono, para no competir visualmente con las Rutas de encima. */
.er-etiqueta-seccion-referencia {
    background: transparent;
    border: none;
    color: #333;
    /* Subido de 9px a 11px (pedido explicito de Beto, 2026-09-13: "se
       pierde" con el tamaño original) -- sigue mas chica que
       .er-etiqueta-ruta (13px) a propósito, para no competir con las Rutas
       de encima, pero ya se alcanza a leer sin acercarse tanto al mapa. */
    font-size: 11px;
    white-space: nowrap;
    text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff;
}

/* .er-etiqueta-ruta: la CAPA DE ENCIMA de la vista inicial -- las 69 Rutas,
   con su trazo grueso semaforizado y un icono de ruta (en vez del cubito de
   Secciones) para distinguirlas de un vistazo. Etiqueta mas grande y en
   negritas a proposito, para que se lea por encima de las secciones finas
   de fondo. */
.er-etiqueta-ruta {
    background: transparent;
    border: none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    text-shadow: 1px 1px 3px #fff, -1px -1px 3px #fff, 0 0 4px #fff;
}
.er-etiqueta-ruta i { font-size: 15px; }

/* El modal de Casillas (selector de Sección + tarjetas) se puede abrir
   DESDE DENTRO del popup del General de una Ruta -- mismo patron ya
   resuelto en assets/css/panel.css (#modalLM / .modal-lm-encima) para que
   un modal "hijo" quede SIEMPRE encima del modal que lo abrio, en vez de
   quedar tapado por compartir el mismo z-index de Bootstrap 4. El backdrop
   reutiliza la MISMA clase ".modal-lm-encima" (ver panel.css, z-index:1060)
   -- aplicada desde JS al mostrarse (ver assets/js/estructura_representacion.js).
   BUG REAL corregido (2026-09-13, reportado por Beto -- "la pantalla se
   queda deshabilitada"): este modal se habia dejado en el MISMO z-index
   (1060) que su propio backdrop -- con los dos EMPATADOS, el navegador
   podia pintar el backdrop (oscuro) ENCIMA del modal en vez de debajo,
   dejando todo el contenido visible pero sin poder darle clic a nada
   (el backdrop capturaba el clic). Se sube el modal a 1070 -- EXACTO el
   mismo valor que ya usa #modalLM para este mismo problema -- para que
   quede siempre ARRIBA de su backdrop (1060), pase lo que pase, se abra
   solo o encima de otro modal. */
#modalCasillasRuta { z-index: 1070; }

/* ==========================================================================
   ESTRUCTURA DE REPRESENTACION — LISTADO (panel/estructura_representacion_listado.php)
   ========================================================================== */
/* La fila-resumen es clickeable (alterna la fila de detalle debajo) — el
   cursor de mano y un hover sutil dejan claro que se puede interactuar. */
.erl-fila-resumen { cursor: pointer; }
.erl-fila-resumen:hover { background-color: rgba(0, 0, 0, 0.035); }
.erl-chevron { transition: transform 0.15s ease-in-out; color: var(--guinda); }
/* La fila de detalle no debe verse clickeable como la de resumen (evita
   heredar el cursor de mano sobre las tarjetas editables de adentro). */
.erl-fila-detalle { cursor: default; }
.erl-fila-detalle td { background-color: #fafafa; }

/* ==========================================================================
   CASAS LM (panel/casas_lm_mapa.php)
   ========================================================================== */
/* Etiqueta central de cada poligono: SOLO el numero de seccion (sin icono
   — a diferencia de Avance Territorial/Estructura de Representacion, aqui
   el icono de casa se reservo para el PIN de cada Casa LM real). */
.cl-etiqueta-poligono {
    background: transparent;
    border: none;
    color: #000;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
}

/* Pin de una Casa LM ya registrada: icono de casa en verde (el mismo verde
   que ya usa "con Casa LM" en el poligono, para que se lean como el mismo
   concepto). */
.cl-pin-casa { cursor: pointer; }
.cl-pin-casa i {
    font-size: 24px;
    color: var(--verde);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.cl-pin-casa:hover i { color: var(--guinda); }

.prisma-fila.d-none { display: none; }

/* ==========================================================================
   IMPRESION DE MAPAS (panel/impresion_mapas.php)
   ==========================================================================
   Prefijo "im-" para no chocar con nada mas del proyecto. Pedido explicito
   de Beto (2026-09-11): esta pantalla solo dibuja CONTORNOS (sin relleno,
   sin popup) con 2 estilos de etiqueta bien diferenciados -- el numero de
   Region/Ruta debe verse mas "importante" (grande y grueso) que el numero
   de Seccion (mas chico y delgado), aunque ambos deben quedar legibles.

   AJUSTE 2026-09-11 (segunda ronda): las etiquetas de puro texto se perdian
   contra el fondo del mapa (calles, colores, otras etiquetas encima) -- se
   pidio explicitamente ponerlas dentro de una "insignia" de color solido
   (circulo gris para Seccion, circulo rojo para Region/Ruta) en vez de solo
   texto con halo blanco. El texto real sigue viniendo del <b> que arma
   MapaLM.dibujarPoligono() (assets/js/mapa-lm.js) -- aqui solo se le da
   fondo/forma via el selector "> b", sin tocar ese archivo generico (lo
   usan otros modulos con el estilo de texto plano de siempre). El
   position:absolute + transform:translate(-50%,-50%) que ya trae ese <b>
   inline sigue centrando la insignia igual que antes, sin importar su
   tamano nuevo. */

/* Etiqueta EXTERIOR: nombre de Region/Ruta (ej. "REGION 12", "RUTA 40") --
   insignia en forma de PILDORA (no circulo perfecto: el nombre es texto
   largo, un circulo real lo recortaria o lo distorsionaria) en rojo
   intenso solido, texto blanco en negritas. */
.im-etiqueta-exterior b {
    display: inline-block;
    background: #e60000;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    border-radius: 999px;
    padding: 3px 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    text-shadow: none;
}

/* Etiqueta INTERIOR: numero de Seccion -- insignia en CIRCULO real (el
   numero es corto, cabe bien) gris solido, texto blanco. Mas chica y con
   menos peso visual que la de Region/Ruta (NUNCA invisible: pedido
   explicito "de igual manera visible"). */
.im-etiqueta-interior b {
    display: inline-block;
    background: #6c757d;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    text-shadow: none;
}

/* --------------------------------------------------------------------------
   Herramienta de impresion en MOSAICO (agregada 2026-09-11, segunda ronda)
   -- adaptacion de HERRAMIENTA_IMPRESION_MOSAICO.md. Ver
   assets/js/impresion_mapas_mosaico.js y assets/js/impresion_mapas_pdf.js.
-------------------------------------------------------------------------- */

/* Cada bloque (1/2/3) del panel lateral, con una separacion clara entre
   ellos (la propia <hr> del HTML ya separa visualmente, esto solo evita
   que el ultimo parrafo de un bloque quede pegado a la siguiente <hr>). */
.im-bloque-mosaico { margin-bottom: 4px; }
.im-bloque-mosaico .btn { margin-bottom: 6px; }

/* Envuelve el mapa (#mapa-impresion-mapas) para poder centrarlo (con
   margin:auto) cuando la herramienta de mosaico le fija un tamano de hoja
   fijo -- ver fijarTamanoDelMapaSegunHoja() en impresion_mapas_mosaico.js
   para el porque completo. En su estado normal (sin cuadricula activa),
   el mapa ocupa todo el contenedor como siempre. */
#im-contenedor-mapa {
    display: flex;
    border-radius: 4px;
}
#mapa-impresion-mapas {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}

/* "Modo hoja fija": el contenedor se ve gris (para distinguir el area que
   NO es el mapa) y el mapa mismo deja de estirarse -- toma el ancho/alto
   fijo en pixeles que le puso JavaScript, centrado, con un borde guinda
   bien visible para que sea obvio que ESE recuadro es exactamente lo que
   se va a capturar. */
#im-contenedor-mapa.im-contenedor-modo-hoja-fija {
    background: #e9ecef;
}
#mapa-impresion-mapas.im-mapa-tamano-fijo {
    flex: none;
    margin: auto;
    box-shadow: 0 0 0 3px var(--guinda);
}

/* Mientras el mapa esta en "modo hoja fija" se ocultan los controles
   propios de Leaflet que no se quieren en las capturas -- los botones de
   zoom (+/-) y el credito de OpenStreetMap "roban" visibilidad en el
   mosaico impreso, y ademas, en este modo, hacer zoom a mano con esos
   botones romperia la alineacion entre la cuadricula dibujada y lo que se
   termina capturando (la navegacion correcta aqui es siempre "Ir a
   celda", que si respeta el zoom fijo de la cuadricula). */
#mapa-impresion-mapas.im-mapa-tamano-fijo .leaflet-control-zoom,
#mapa-impresion-mapas.im-mapa-tamano-fijo .leaflet-control-attribution {
    display: none;
}

/* Numerito "1", "2", "3"... dibujado sobre cada celda de la cuadricula
   (ver dibujarCuadriculaEnMapa() en impresion_mapas_mosaico.js). */
.im-etiqueta-celda {
    background: rgba(44, 62, 80, 0.85);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

/* La celda "activa" (a la que se navego por ultima vez con "Ir a celda")
   se resalta con un brillo dorado, para que sea obvio cual es la que se
   va a capturar con "Capturar celda actual". */
.im-celda-cuadricula-activa {
    filter: drop-shadow(0 0 3px #ffd700);
}