/* Extracted control styles for GeneradorCodigo page */

/* Tooltip helper used by map controls */
[data-tooltip] {
    position: relative;
    overflow: visible !important;
}

/* =====================================================
   Styles moved from Pages/Widget/GeneradorCodigo.cshtml
   Centralized here to avoid conflicts and duplicates.
   ===================================================== */

/* In-map modal for locality search */
.rn-locality-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    background: rgba(255,255,255,0.98);
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    width: 320px;
    max-width: calc(100% - 24px);
    pointer-events: auto;
}
.rn-locality-suggest {
    position: absolute;
    z-index: 2100;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    margin-top: 6px;
    width: 100%;
    max-height: 220px;
    overflow: auto;
    border-radius: 6px;
}
.rn-locality-suggest.d-none { display: none; }
.rn-locality-suggest-item {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #212529;
}
.rn-locality-suggest-item:hover, .rn-locality-suggest-item.active {
    background: #f1f5fb;
}
.rn-locality-modal-dialog { }
.rn-locality-modal-header { border-bottom: 1px solid #e9ecef; padding-bottom: 6px; }
.rn-locality-modal-body { padding-top: 8px; }

/* Map container helpers */
#map { cursor: crosshair; }
.leaflet-container { font-family: inherit; }

/* Generated code preview */
#generatedCode {
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Pack icon selector moved from page */
#packIconSelector { justify-content: center; }
#packIconSelector .pack-option {
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .4rem;
    border: 2px solid rgba(0,0,0,0.08);
    border-radius: .375rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
#packIconSelector .pack-option.active {
    border: 3px solid var(--bs-primary) !important;
    background: rgba(13,110,253,0.04);
    box-shadow: 0 0 0 0.35rem rgba(13,110,253,0.12) !important;
    transform: translateY(-1px);
}
#packIconSelector .pack-option:focus { outline: none; box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.12); border-color: var(--bs-primary); }
#packIconSelector .pack-row { justify-content: center; align-items: center; }
#packIconSelector .pack-img { width: 28px; height: 28px; object-fit: contain; display: inline-block; transition: width 0.12s ease, height 0.12s ease; }

/* Widget checkbox visual state when unchecked to improve visibility */
.widget-checkbox:not(:checked) {
    border: 2px solid #0d6efd !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}
.widget-checkbox:not(:checked):focus { border-color: #0d6efd !important; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; }

.widget-item { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; line-height: 1.5; text-align: left !important; }
.rn-favicon { width: 20px; height: 20px; vertical-align: middle; margin: 0 6px; }
.rn-title { color: var(--bs-primary); text-decoration: none; font-weight: 600; margin-right: .3em; }
.rn-domain { font-size: .85rem; color: #6c757d; }

/* Fullscreen active helper (from page) */
.rn-map-fullscreen-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1060 !important;
}


/* Highlight subsection label line with turquoise background and white text */
.rn-subsection > label.form-label {
    display: inline-block;
    background: linear-gradient(90deg,#17a2b8,#0dc1b0);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

/* Variant that can be applied directly to a label element without
   requiring the parent to be .rn-subsection. Use for labels inside rows. */
.rn-subsection-title {
    display: inline-block;
    background: linear-gradient(90deg,#17a2b8,#0dc1b0);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

/* Full-width variant used when the subtitle must occupy the container width */
.rn-subsection-title-full {
    display: block;
    width: 100%;
    background: linear-gradient(90deg,#17a2b8,#0dc1b0);
    color: #fff;
    padding: 8px 12px;
    border-radius: .375rem;
    font-weight: 600;
    margin-bottom: .5rem;
    box-sizing: border-box;
}

/* UTM layout: fixed label width and flexible input, add spacing between columns */
.rn-utm-row .input-group-text {
    min-width: 140px; /* ancho fijo para las etiquetas UTM */
    justify-content: flex-start;
}
.rn-utm-row .input-group .form-control {
    flex: 1 1 auto;
}
.rn-utm-row .col-md-6 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Make columns and input groups align horizontally and allow inputs to shrink properly */
.rn-utm-row .col-md-6 {
    display: flex;
    align-items: center;
}
.rn-utm-row .input-group {
    width: 100%;
}
.rn-utm-row .input-group-text {
    flex: 0 0 140px; /* fixed label width */
}
.rn-utm-row .input-group .form-control {
    flex: 1 1 auto;
    min-width: 0; /* allow flex child to shrink inside flex container */
}
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: 140%;
    transform: translateY(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 13px;
    /* Force consistent typography across controls: prefer Bootstrap/system sans-serif */
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
    font-weight: 500;
    pointer-events: none;
    z-index: 99999;
    opacity: 1;
}
[data-tooltip]:hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 128%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #333;
    z-index: 99998;
    opacity: 1;
}

/* Layer control layout tweaks */
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers label {
    text-align: left;
}
.leaflet-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
    align-items: stretch;
}
.leaflet-bar > * {
    display: block !important;
}
.leaflet-bar a {
    display: block !important;
}
/* Keep zoom in/out buttons contiguous (no gap between them) */
.leaflet-control-zoom.leaflet-bar {
    gap: 0 !important;
}
.leaflet-control-zoom.leaflet-bar a {
    margin: 0 !important;
    border-radius: 0 !important;
}
.leaflet-control-zoom.leaflet-bar a.leaflet-control-zoom-in {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}
.leaflet-control-zoom.leaflet-bar a.leaflet-control-zoom-out {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}
.leaflet-control-layers label {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: flex-start;
    white-space: nowrap;
    line-height: 18px;
    font-size: 0.95rem;
}
.leaflet-control-layers label > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.leaflet-control-layers label span {
    display: inline-block;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

/* Mini preview image inside layer control */
.rn-layer-icon {
    width: 56px;
    height: 34px;
    object-fit: cover;
    margin-right: .5rem;
    border-radius: 3px;
}

/* Fullscreen/search button consistent look */
.rn-map-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #ffffff !important;
    color: #212529 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    cursor: pointer;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.rn-map-fullscreen-btn i { font-size: 14px; line-height: 1; }
.rn-map-fullscreen-btn:hover { background: #f8f9fa; }

/* Make only the 'Pantalla completa' control slightly smaller */
.rn-fullscreen-control.rn-map-fullscreen-btn {
    width: 32px;
    height: 32px;
}
.rn-fullscreen-control.rn-map-fullscreen-btn i { font-size: 14px; }

/* Make the in-map search control the same size as fullscreen control */
/* More specific rules to override Leaflet defaults */
.leaflet-bar a.rn-search-control.rn-map-fullscreen-btn,
.leaflet-control .rn-search-control.rn-map-fullscreen-btn {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 !important;
}
.leaflet-bar a.rn-search-control.rn-map-fullscreen-btn i,
.leaflet-control .rn-search-control.rn-map-fullscreen-btn i {
    font-size: 14px !important;
    line-height: 14px !important;
}

/* Ensure Leaflet zoom controls match 32x32 size */
.leaflet-control-zoom a,
.leaflet-control-zoom a.leaflet-control-zoom-in,
.leaflet-control-zoom a.leaflet-control-zoom-out,
.leaflet-control-zoomhome a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.leaflet-control-zoom a.leaflet-control-zoom-in {
    /* Ensure the 'Acercar' button does not inherit extra styles */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    background: #ffffff !important;
}
.leaflet-control-zoom a.leaflet-control-zoom-in .bi,
.leaflet-control-zoom a.leaflet-control-zoom-in svg {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 1 !important;
}
.leaflet-control-zoom a.leaflet-control-zoom-in,
.leaflet-control-zoom a.leaflet-control-zoom-out {
    margin: 0 !important;
}
.leaflet-control-zoom a > .bi,
.leaflet-control-zoomhome a > .bi,
.leaflet-control-zoom a svg,
.leaflet-control-zoomhome a svg {
    font-size: 14px !important;
    line-height: 1 !important;
}

.leaflet-control a.rn-search-control,
.leaflet-bar a.rn-search-control,
.leaflet-control .rn-search-control {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.leaflet-control a.rn-search-control > .bi,
.leaflet-bar a.rn-search-control > .bi {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Zoom control: remove inter-button gap and make buttons contiguous */
.leaflet-control-zoom {
    gap: 0 !important;
}
.leaflet-control-zoom a {
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.leaflet-control-zoom a:first-child {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}
.leaflet-control-zoom a:last-child {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* Subtle separator between zoom in/out for visual clarity.
   Use an inset box-shadow instead of border-top so it's not affected
   by other border rules/shorthand elsewhere. */
.leaflet-control-zoom a + a {
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.08) !important;
    margin-top: 0 !important;
}

/* Ensure zoom anchors are positioned so pseudo-element can draw separator reliably */
.leaflet-control-zoom a {
    position: relative !important;
}

/* Reliable separator using pseudo-element (won't be removed by other box-shadow/border rules) */
.leaflet-control-zoom.leaflet-bar a + a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    right: 6px;
    height: 1px;
    background: rgba(0,0,0,0.08) !important;
    pointer-events: none;
}



/* Uniform appearance for all Leaflet control buttons to avoid visual size mismatch */
.leaflet-bar a.rn-map-fullscreen-btn,
.leaflet-bar a.rn-search-control,
.leaflet-control-zoom a,
.leaflet-control-zoomhome a {
    background: #ffffff !important;
    color: #212529 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    border-radius: 4px;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    box-sizing: border-box !important;
}

.leaflet-bar a .bi,
.leaflet-control a .bi,
.leaflet-control-zoom a svg,
.leaflet-control-zoomhome a svg {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    margin: 0 auto !important;
    line-height: 14px !important;
    transform: none !important;
}


/* Keep visually hidden inputs accessible */
.leaflet-control-layers label input[type="radio"],
.leaflet-control-layers label input[type="checkbox"] {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

/* Tooltip adjustments specifically for zoom controls (fix vertical alignment of the arrow for 'Alejar') */
.leaflet-control-zoom a[data-tooltip] {
    /* ensure the anchor is the positioning context and visible for pseudo-elements */
    position: relative !important;
    overflow: visible !important;
}
.leaflet-control-zoom a[data-tooltip]::after,
.leaflet-control-zoom a[data-tooltip]::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
}
/* Place tooltip to the right of the button with a small offset */
.leaflet-control-zoom a[data-tooltip]::after {
    /* posicionar respecto al borde derecho del botón y desplazar con transform (más estable) */
    left: 100% !important;
    transform: translateY(-50%) translateX(14px) !important;
}
.leaflet-control-zoom a[data-tooltip]::before {
    left: 100% !important;
    /* mover la flecha ligeramente hacia la derecha (ajuste menor) */
    transform: translateY(-50%) translateX(13px) !important;
}

/* Más específico: aplicar cuando se hace hover para sobreescribir reglas generales [data-tooltip]:hover */
.leaflet-control-zoom a[data-tooltip]:hover::after {
    left: 100% !important;
    transform: translateY(-50%) translateX(16px) !important;
    z-index: 100001 !important;
}
.leaflet-control-zoom a[data-tooltip]:hover::before {
    left: 100% !important;
    /* ajustar también en hover para mantener la flecha ligeramente a la derecha */
    transform: translateY(-50%) translateX(11px) !important;
    z-index: 100002 !important;
}

/* Ensure the separator line pseudo-element does not affect tooltip stacking */
.leaflet-control-zoom.leaflet-bar a + a::before {
    pointer-events: none;
    z-index: 1;
}

/* Asegurar que la flecha del tooltip esté por encima del recuadro (zoom controls) */
.leaflet-control-zoom a[data-tooltip]::before {
    z-index: 100000 !important;
    pointer-events: none !important;
}
.leaflet-control-zoom a[data-tooltip]::after {
    z-index: 99999 !important;
    pointer-events: none !important;
}

/* Apply same tooltip offsets used in zoom controls to fullscreen/search controls */
.leaflet-bar a.rn-map-fullscreen-btn[data-tooltip],
.leaflet-bar a.rn-search-control[data-tooltip],
.leaflet-control a.rn-search-control[data-tooltip] {
    position: relative !important;
    overflow: visible !important;
}
.leaflet-bar a.rn-map-fullscreen-btn[data-tooltip]::after,
.leaflet-bar a.rn-search-control[data-tooltip]::after,
.leaflet-control a.rn-search-control[data-tooltip]::after {
    top: 50% !important;
    left: 100% !important;
    transform: translateY(-50%) translateX(14px) !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}
.leaflet-bar a.rn-map-fullscreen-btn[data-tooltip]::before,
.leaflet-bar a.rn-search-control[data-tooltip]::before,
.leaflet-control a.rn-search-control[data-tooltip]::before {
    top: 50% !important;
    left: 100% !important;
    transform: translateY(-50%) translateX(13px) !important;
    z-index: 100000 !important;
    pointer-events: none !important;
}
.leaflet-bar a.rn-map-fullscreen-btn[data-tooltip]:hover::after,
.leaflet-bar a.rn-search-control[data-tooltip]:hover::after,
.leaflet-control a.rn-search-control[data-tooltip]:hover::after {
    left: 100% !important;
    transform: translateY(-50%) translateX(16px) !important;
    z-index: 100001 !important;
}
.leaflet-bar a.rn-map-fullscreen-btn[data-tooltip]:hover::before,
.leaflet-bar a.rn-search-control[data-tooltip]:hover::before,
.leaflet-control a.rn-search-control[data-tooltip]:hover::before {
    left: 100% !important;
    transform: translateY(-50%) translateX(11px) !important;
    z-index: 100002 !important;
}