/* ============================================
   TAILWIND-LIKE UTILITY CLASSES (static, no CDN)
   ============================================ */

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-grow { flex-grow: 1; }
.flex-1 { flex: 1 1 0%; }
.h-screen { height: 100vh; }
.h-full { height: 100%; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-2 { top: 0.5rem; }
.top-4 { top: 1rem; }
.top-5 { top: 1.25rem; }
.right-2 { right: 0.5rem; }
.right-4 { right: 1rem; }
.right-5 { right: 1.25rem; }
.z-\[1000\] { z-index: 1000; }
.z-\[2000\] { z-index: 2000; }

/* Spacing */
.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mr-2 { margin-right: 0.5rem; }
.p-0 { padding: 0; }
.p-3 { padding: 0.75rem; }
.p-5 { padding: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.pb-2 { padding-bottom: 0.5rem; }

/* Gap */
.gap-2 { gap: 0.5rem; }
.gap-5 { gap: 1.25rem; }

/* Width / Height */
.w-20 { width: 5rem; }
.w-\[350px\] { width: 350px; }

/* Typography */
.font-sans { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-\[24px\] { font-size: 24px; }
.text-\[28px\] { font-size: 28px; }
.leading-none { line-height: 1; }
.text-white { color: #ffffff; }
.text-neutral-300 { color: #d4d4d4; }
.text-neutral-400 { color: #a3a3a3; }
.text-neutral-500 { color: #737373; }
.hover\:text-white:hover { color: #ffffff; }

/* Backgrounds */
.bg-neutral-700 { background-color: #404040; }
.bg-neutral-800 { background-color: #262626; }
.bg-neutral-900 { background-color: #171717; }
.bg-transparent { background-color: transparent; }
.bg-blue-600 { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }

/* Border */
.border { border-width: 1px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }
.border-none { border: none; }
.border-neutral-700 { border-color: #404040; }
.rounded { border-radius: 0.25rem; }
.rounded-tr-xl { border-top-right-radius: 0.75rem; }

/* Shadow */
.shadow-\[-2px_0_10px_rgba\(0\,0\,0\,0\.5\)\] { box-shadow: -2px 0 10px rgba(0,0,0,0.5); }
.shadow-\[0_-2px_10px_rgba\(0\,0\,0\,0\.5\)\] { box-shadow: 0 -2px 10px rgba(0,0,0,0.5); }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-crosshair { cursor: crosshair; }

/* Misc */
.appearance-none { -webkit-appearance: none; appearance: none; }
.transition-transform { transition-property: transform; }
.duration-300 { transition-duration: 300ms; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* Media query: md:transform-none (768px+) */
@media (min-width: 768px) {
    .md\:transform-none { transform: none !important; }
}

/* ============================================
   CUSTOM STYLES
   ============================================ */
/* ============================================
   BASE & LEAFLET STYLES
   ============================================ */
#map { z-index: 1; }

/* ============================================
   MAP ARROW ICONS
   ============================================ */
.arrow-div-icon { background: none; border: none; }
.arrow-container { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.arrow-head { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #ffcc00; filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.8)); }
.arrow-label { position: absolute; top: -18px; color: #111; font-weight: bold; font-family: monospace; font-size: 14px; padding: 2px 4px; pointer-events: auto; white-space: nowrap; text-shadow: 0px 0px 4px rgba(0,0,0,0.8), 1px 1px 2px rgba(0,0,0,0.8); }
.distance-label { color: white !important; font-size: 18px; }

/* ============================================
   MAP MARKER ICONS
   ============================================ */
.custom-camera-icon { background: transparent; border: none; cursor: pointer; }
.runner-icon { background: transparent; border: none; }

/* ============================================
   AUTOCOMPLETE DROPDOWN
   ============================================ */
.autocomplete-items { position: absolute; top: 100%; left: 0; right: 0; z-index: 1001; background-color: #333; border: 1px solid #555; border-top: none; max-height: 200px; overflow-y: auto; border-radius: 0 0 3px 3px; box-shadow: 0 4px 6px rgba(0,0,0,0.5); display: none; }
.autocomplete-items.active { display: block; }
.autocomplete-items div { padding: 8px; cursor: pointer; color: #ddd; font-size: 12px; border-bottom: 1px solid #444; line-height: 1.3; }
.autocomplete-items div:last-child { border-bottom: none; }
.autocomplete-items div:hover { background-color: #007bff; color: #fff; }

/* ============================================
   FORM COMPONENTS - Consistent Sizing
   ============================================ */

/* All inputs base style */
.form-input {
    width: 100%;
    padding: 6px 10px;
    background-color: #4b5563;
    color: #ffffff;
    border: 1px solid #6b7280;
    border-radius: 2px;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
}
.form-input:focus {
    outline: none;
    border-color: #3b82f6;
}

/* Form labels */
.form-label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #9ca3af;
}

/* Primary action buttons (Buscar) */
.btn-primary {
    padding: 6px 14px;
    background-color: #6b7280;
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-primary:hover {
    background-color: #5b6778;
}

.btn-action {
    background-color: #4b5563;
    color: #ffffff;
    font-size: 18px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    height: 31px;
    width: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn-action:hover {
    background-color: #374151;
}
.btn-action.active {
    background-color: #3b82f6;
}

/* Icon/clear buttons (X buttons) */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    width: 28px;
    height: 28px;
}
.btn-icon:hover {
    color: #ef4444;
}

/* Input with clear button wrapper */
.input-with-clear {
    position: relative;
    flex: 1;
}
.input-with-clear .form-input {
    padding-right: 36px;
}
.input-with-clear .btn-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

/* Helper text */
.helper-text {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    margin: 8px 0 0 0;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */
@media (max-width: 768px) {
    #menu-toggle {
        display: block !important;
    }
    #right-panel {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        transform: translateX(100%);
        width: 320px;
        max-width: 85vw;
        box-sizing: border-box;
    }
    #right-panel.open {
        transform: translateX(0);
    }
    .close-panel-btn {
        display: block !important;
    }
    .autocomplete-items {
        right: 0;
    }
    .leaflet-control-attribution {
        margin-bottom: 70px !important;
    }
}

@media (min-width: 769px) {
    #menu-toggle {
        display: none !important;
    }
    .close-panel-btn {
        display: none !important;
    }
}