/* ==========================================================
   map-component.css
   Estilos del componente de mapa. Todo prefijado con .mc-
   sin depender de variables CSS del proyecto host.
   ========================================================== */

/* --- Variables internas (prefijo mc-) --- */
:root {
    --mc-height:         100%;

    /* Colores principales */
    --mc-color-primary:          #1a1a2e;          /* Fondo del overlay de carga       */
    --mc-color-surface:          rgba(22,33,62,0.97); /* Fondo del panel de información */
    --mc-color-highlight:        #e94560;           /* FAB, marcador click, etiquetas   */
    --mc-color-highlight-shadow: rgba(233,69,96,0.5);  /* Sombra del highlight          */
    --mc-color-highlight-2:      #533483;           /* Marcador de ubicación GPS        */
    --mc-color-highlight-2-shadow: rgba(83,52,131,0.5); /* Sombra del highlight-2       */
    --mc-color-accent:           #0f3460;           /* FAB en estado de carga           */
    --mc-color-accent-shadow:    rgba(15,52,96,0.5); /* Sombra del accent               */
    --mc-color-point:            #00bcd4;           /* Marcadores de addPoints()        */
    --mc-color-point-shadow:     rgba(0,188,212,0.5); /* Sombra de marcadores de puntos */
    --mc-color-text:             #e0e0e0;           /* Texto principal                  */
    --mc-color-text-dim:         #a0a0b0;           /* Texto secundario / apagado       */
    --mc-color-border:           rgba(255,255,255,0.1); /* Bordes y separadores         */

    /* Dimensiones y efectos */
    --mc-radius-lg:        20px;
    --mc-shadow-panel:     0 -4px 30px rgba(0, 0, 0, 0.5);
    --mc-transition-fast:  0.2s ease;
    --mc-transition-mid:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   CONTENEDOR PRINCIPAL
   ============================================================ */
.mc-wrapper {
    position: relative;
    width: 100%;
    height: var(--mc-height); /* 100% por defecto; sobreescribir con --mc-height o estilo inline */
    min-height: 0;            /* permite shrink en contenedores flex/grid */
    contain: layout paint;    /* 'size' eliminado: causaba que height:100% no heredara del padre */
    overflow: hidden;
}

#mc-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

/* ============================================================
   OVERLAY DE CARGA
   ============================================================ */
#mc-loading-overlay {
    position: absolute;
    inset: 0;
    background: var(--mc-color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 500;
    color: var(--mc-color-text);
    transition: opacity var(--mc-transition-mid);
    pointer-events: all;
}

#mc-loading-overlay p {
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--mc-color-text-dim);
}

#mc-loading-overlay.mc-fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   SPINNERS
   ============================================================ */
.mc-spinner-lg,
.mc-spinner-sm {
    border-radius: 50%;
    border-style: solid;
    animation: mc-spin 0.85s linear infinite;
    flex-shrink: 0;
}

.mc-spinner-lg {
    width: 44px;
    height: 44px;
    border-width: 4px;
    border-color: var(--mc-color-border);
    border-top-color: var(--mc-color-highlight);
}

.mc-spinner-sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   FAB — BOTÓN GPS
   ============================================================ */
#mc-fab {
    position: absolute;
    bottom: 40px;
    right: 14px;
    z-index: 200;
}

.mc-fab-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mc-color-highlight);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px var(--mc-color-highlight-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    will-change: transform;
    transition: transform var(--mc-transition-fast), box-shadow var(--mc-transition-fast);
    min-width: 44px;
    min-height: 44px;
}

.mc-fab-btn .mc-fab-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    /* Ícono GPS como data URI — colores explícitos (blanco),
       sin depender de currentColor ni de herencia CSS */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3Ccircle cx='12' cy='12' r='8' stroke='white' stroke-width='1.8' fill='none'/%3E%3Cline x1='12' y1='2' x2='12' y2='5' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='12' y1='19' x2='12' y2='22' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='2' y1='12' x2='5' y2='12' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='19' y1='12' x2='22' y2='12' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mc-fab-btn:active {
    transform: scale(0.9);
    box-shadow: 0 2px 6px var(--mc-color-highlight-shadow);
}

.mc-fab-btn.mc-loading {
    background: var(--mc-color-accent);
    animation: mc-pulse 1.2s ease infinite;
}

@keyframes mc-pulse {
    0%, 100% { box-shadow: 0 4px 14px var(--mc-color-accent-shadow); }
    50%       { box-shadow: 0 4px 22px var(--mc-color-accent-shadow); }
}

/* ============================================================
   INDICADOR DE BÚSQUEDA
   ============================================================ */
#mc-search-indicator {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 20, 0.9);
    color: #fff;
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    z-index: 300;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   TOAST / SNACKBAR
   ============================================================ */
#mc-toast {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 20, 0.92);
    color: var(--mc-color-text);
    padding: 10px 18px;
    border-radius: 22px;
    font-size: 0.8rem;
    z-index: 350;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    max-width: calc(100vw - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: opacity 0.4s ease;
    will-change: opacity;
    border: 1px solid var(--mc-color-border);
}

#mc-toast.mc-fading {
    opacity: 0;
}

/* ============================================================
   PANEL INFERIOR DE INFORMACIÓN
   ============================================================ */
#mc-info-panel {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--mc-color-surface) !important;
    border-top-left-radius: var(--mc-radius-lg) !important;
    border-top-right-radius: var(--mc-radius-lg) !important;
    box-shadow: var(--mc-shadow-panel) !important;
    z-index: 400 !important;
    max-height: 56vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-top: 1px solid var(--mc-color-border) !important;
    transform: translateY(0) !important;
    transition: transform var(--mc-transition-mid), opacity var(--mc-transition-mid) !important;
    will-change: transform !important;
    overflow: hidden !important;
    color: var(--mc-color-text) !important;
}

#mc-info-panel.mc-hidden {
    transform: translateY(105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: flex !important;
}

/* Handle decorativo */
.mc-ip-handle {
    width: 36px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 2px !important;
    margin: 10px auto 0 !important;
    flex-shrink: 0 !important;
}

/* Header del panel */
.mc-ip-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 16px 10px !important;
    border-bottom: 1px solid var(--mc-color-border) !important;
    flex-shrink: 0 !important;
    background: none !important;
}

#mc-ip-title {
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--mc-color-text) !important;
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-right: 10px !important;
    background: none !important;
    border: none !important;
}

#mc-ip-close-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: var(--mc-color-text-dim) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    -webkit-appearance: none !important;
    transition: background var(--mc-transition-fast) !important;
}

#mc-ip-close-btn:active {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* Cuerpo del panel */
.mc-ip-body {
    overflow-y: auto !important;
    flex: 1 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: none !important;
}

/* Estado de carga dentro del panel */
#mc-info-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 16px;
    color: var(--mc-color-text-dim);
    font-size: 0.82rem;
    gap: 8px;
}

#mc-info-loading p { margin: 0; }

/* Filas de datos */
.mc-info-row {
    display: flex !important;
    align-items: flex-start !important;
    padding: 9px 16px !important;
    border-bottom: 1px solid var(--mc-color-border) !important;
    gap: 12px !important;
    background: none !important;
}

.mc-info-row:last-child { border-bottom: none !important; }

.mc-info-label {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: var(--mc-color-highlight) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 88px !important;
    flex-shrink: 0 !important;
    padding-top: 2px !important;
    line-height: 1.3 !important;
    background: none !important;
    border: none !important;
}

.mc-info-value {
    font-size: 0.86rem !important;
    color: var(--mc-color-text) !important;
    word-break: break-word !important;
    flex: 1 !important;
    line-height: 1.4 !important;
    background: none !important;
    border: none !important;
}

.mc-coords-row .mc-info-value {
    font-family: 'Courier New', monospace !important;
    font-size: 0.75rem !important;
    color: var(--mc-color-text-dim) !important;
}

.mc-info-row.mc-empty { display: none !important; }

/* ============================================================
   BOTONES DE ACCIÓN DEL POPUP (setPopupTemplate)
   ============================================================ */
.mc-info-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--mc-color-border) !important;
    flex-shrink: 0 !important;
    background: none !important;
}

/* Botón de acción primario */
.mc-info-btn {
    flex: 1 !important;
    min-width: 80px !important;
    padding: 9px 14px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    background: var(--mc-color-highlight) !important;
    background-image: none !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.3 !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: opacity 0.15s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mc-info-btn:active {
    opacity: 0.75 !important;
}

/* Botón secundario */
.mc-info-btn.mc-info-btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--mc-color-text) !important;
}

/* Botón de peligro */
.mc-info-btn.mc-info-btn-danger {
    background: #c62828 !important;
}

/* JQM override para los botones generados dinámicamente */
.mc-wrapper .mc-info-actions .mc-info-btn,
.mc-wrapper .mc-info-actions .mc-info-btn.ui-btn {
    display: inline-block !important;
    flex: 1 !important;
    padding: 9px 14px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    clip: auto !important;
    position: static !important;
    left: auto !important;
}

/* ============================================================
   MARCADORES MAPLIBRE
   ============================================================ */
.mc-marker-click {
    width: 30px;
    height: 40px;
    cursor: pointer;
}

.mc-marker-click-inner {
    width: 30px;
    height: 30px;
    background: var(--mc-color-highlight);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 3px solid #fff;
    box-shadow: 0 3px 10px var(--mc-color-highlight-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-marker-click-inner::after {
    content: '';
    width: 9px;
    height: 9px;
    background: #fff;
    border-radius: 50%;
    transform: rotate(45deg);
}

.mc-marker-location {
    width: 34px;
    height: 34px;
}

.mc-marker-location-inner {
    width: 34px;
    height: 34px;
    background: var(--mc-color-highlight-2);
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--mc-color-highlight-2-shadow), 0 4px 10px var(--mc-color-highlight-2-shadow);
    animation: mc-location-pulse 2s ease-in-out infinite;
}

@keyframes mc-location-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--mc-color-highlight-2-shadow), 0 4px 10px var(--mc-color-highlight-2-shadow); }
    50%       { box-shadow: 0 0 0 9px transparent, 0 4px 10px var(--mc-color-highlight-2-shadow); }
}

/* ============================================================
   MARCADORES DE PUNTOS (addPoints)
   ============================================================ */
.mc-marker-point {
    width: 26px;
    height: 36px;
    cursor: pointer;
}

.mc-marker-point-inner {
    width: 26px;
    height: 26px;
    background: var(--mc-color-point);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 3px solid #fff;
    box-shadow: 0 3px 10px var(--mc-color-point-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-marker-point-inner::after {
    content: '';
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    transform: rotate(45deg);
}

/* ============================================================
   POPUP DE PUNTOS
   ============================================================ */

/* Wrapper de MapLibre — aplana estilos por defecto */
.mc-popup .maplibregl-popup-content {
    background: rgba(22, 33, 62, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0;
    color: #e0e0e0;
    font-family: inherit;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

/* Flecha del popup apuntando hacia abajo (mapa encima del marcador) */
.mc-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
    border-top-color: rgba(22, 33, 62, 0.97);
}
.mc-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip {
    border-bottom-color: rgba(22, 33, 62, 0.97);
}
.mc-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: rgba(22, 33, 62, 0.97);
}
.mc-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: rgba(22, 33, 62, 0.97);
}

/* Botón de cierre */
.mc-popup .maplibregl-popup-close-button {
    color: rgba(160, 160, 176, 0.8);
    font-size: 1.1rem;
    line-height: 1;
    padding: 6px 8px;
    right: 0;
    top: 0;
    background: transparent;
    border: none;
}

.mc-popup .maplibregl-popup-close-button:hover {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.08);
}

/* Contenido interno del popup */
.mc-popup-content {
    padding: 12px 14px 10px;
    min-width: 160px;
}

.mc-popup-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #e0e0e0;
    margin: 0 18px 4px 0; /* margen derecho para no solapar el X */
    line-height: 1.3;
}

.mc-popup-description {
    font-size: 0.78rem;
    color: #a0a0b0;
    line-height: 1.45;
    margin-bottom: 8px;
}

/* Filas de datos adicionales (info) */
.mc-popup-rows {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 7px;
    margin-bottom: 7px;
}

.mc-popup-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
}

.mc-popup-label {
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--mc-color-point);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    min-width: 64px;
    flex-shrink: 0;
}

.mc-popup-value {
    font-size: 0.78rem;
    color: #e0e0e0;
    flex: 1;
    word-break: break-word;
}

/* Coordenadas al pie del popup */
.mc-popup-coords {
    font-family: 'Courier New', monospace;
    font-size: 0.63rem;
    color: rgba(160, 160, 176, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 6px;
    margin-top: 6px;
}

/* ============================================================
   MAPLIBRE — CONTROLES (scoped al componente)
   ============================================================ */
.mc-wrapper .maplibregl-ctrl-top-right {
    top: 8px !important;
    right: 8px !important;
}

.mc-wrapper .maplibregl-ctrl-top-left {
    top: 8px !important;
    left: 8px !important;
}

.mc-wrapper .maplibregl-ctrl-bottom-left {
    bottom: 2px !important;
}

.mc-wrapper .maplibregl-ctrl-bottom-right {
    bottom: 2px !important;
}

.mc-wrapper .maplibregl-ctrl-attrib {
    font-size: 0.6rem !important;
    background: rgba(0, 0, 0, 0.5) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 4px !important;
}

.mc-wrapper .maplibregl-ctrl-attrib a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.mc-wrapper .maplibregl-ctrl-logo { display: none !important; }

.mc-wrapper .maplibregl-ctrl-group {
    background: rgba(10, 10, 20, 0.88) !important;
    border: 1px solid var(--mc-color-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
    backdrop-filter: blur(4px);
}

.mc-wrapper .maplibregl-ctrl-group button {
    background: transparent !important;
    border-bottom: 1px solid var(--mc-color-border) !important;
    width: 36px !important;
    height: 36px !important;
}

.mc-wrapper .maplibregl-ctrl-group button:last-child {
    border-bottom: none !important;
}

.mc-wrapper .maplibregl-ctrl-icon {
    filter: invert(0.85) !important;
}

.mc-wrapper .maplibregl-ctrl-scale {
    background: rgba(10, 10, 20, 0.8) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(160, 160, 176, 0.5) !important;
    border-radius: 4px !important;
    font-size: 0.65rem !important;
    padding: 2px 4px !important;
}

/* ============================================================
   AISLAMIENTO DE JQUERY MOBILE
   Neutraliza los estilos que jQuery Mobile inyecta en botones,
   headings, spans y cualquier elemento dentro del componente.
   ============================================================ */

/* ── Sombra de texto global — JQM aplica text-shadow oscura/blanca
      a casi todos sus elementos. Desactivar dentro del componente. ── */
.mc-wrapper,
.mc-wrapper * {
    text-shadow: none !important;
}

/* ── FAB ── */
.mc-wrapper .mc-fab-btn,
.mc-wrapper .mc-fab-btn.ui-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--mc-color-highlight) !important;
    background-image: none !important;
    /* color!important garantiza que currentColor en el SVG resuelva a blanco
       incluso cuando JQM sobreescribe con su tema (ej. color:#333 en theme-d) */
    color: #fff !important;
    box-shadow: 0 4px 14px var(--mc-color-highlight-shadow) !important;
    line-height: normal !important;
    text-align: center !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

/* JQM icon-only: aplica clip:rect(0,0,0,0) + left:-99999px al .ui-btn-text
   Revertir para que el SVG sea visible */
.mc-wrapper .mc-fab-btn .ui-btn-inner,
.mc-wrapper .mc-fab-btn .ui-btn-text,
.mc-wrapper #mc-ip-close-btn .ui-btn-inner,
.mc-wrapper #mc-ip-close-btn .ui-btn-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    clip: auto !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    color: inherit !important;
}

/* Ícono del FAB: es un <span> con background-image.
   JQM no toca spans, pero garantizamos que nada sobreescriba el bg. */
.mc-wrapper .mc-fab-btn .mc-fab-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-shrink: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    /* background-image se define en la regla base del componente;
       aquí solo nos aseguramos de que nada la elimine */
}

/* Estado loading del FAB */
.mc-wrapper .mc-fab-btn.mc-loading {
    background: var(--mc-color-accent) !important;
    animation: mc-pulse 1.2s ease infinite !important;
}

/* Pseudo-elementos JQM — eliminar */
.mc-wrapper .mc-fab-btn::before,
.mc-wrapper .mc-fab-btn::after,
.mc-wrapper #mc-ip-close-btn::before,
.mc-wrapper #mc-ip-close-btn::after {
    display: none !important;
    content: none !important;
}

/* ── Botón cerrar panel ── */
.mc-wrapper #mc-ip-close-btn,
.mc-wrapper #mc-ip-close-btn.ui-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    background-image: none !important;
    color: var(--mc-color-text-dim) !important;
    box-shadow: none !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

/* ── Botones de controles MapLibre — no tocar background-image
      (MapLibre pone sus iconos en .maplibregl-ctrl-icon vía bg-image) ── */
.mc-wrapper .maplibregl-ctrl-group button,
.mc-wrapper .maplibregl-ctrl-group button.ui-btn {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--mc-color-border) !important;
    border-radius: 0 !important;
    width: 36px !important;
    height: 36px !important;
}

/* ── Headings dentro del panel ── */
.mc-wrapper #mc-ip-title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--mc-color-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* ── Párrafos y spans informativos ── */
.mc-wrapper #mc-loading-overlay p,
.mc-wrapper .mc-info-label,
.mc-wrapper .mc-info-value,
.mc-wrapper #mc-search-indicator span {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

/* ============================================================
   UTILIDAD
   ============================================================ */
.mc-hidden { display: none !important; }