/**
 * MasterPlan 3D Pro - Frontend Viewer Styles
 */

/* Container Principal */
.masterplan-public-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.masterplan-public-map {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

/* Marcadores de Lotes con Pulse */
.lot-marker {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.marker-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.4);
    animation: pulse 2s ease-out infinite;
}

.marker-number {
    position: relative;
    z-index: 10;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: bold;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

/* POI Markers (Stalk Style) */
.poi-marker-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Anchor at bottom */
    width: 100px; /* Width for label */
    height: 150px; /* Total height including stalk */
    pointer-events: none; /* Let clicks pass to children */
}

.poi-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    margin-bottom: -2px; /* Connect to stalk */
    transition: transform 0.2s ease;
}

.poi-content:hover {
    transform: scale(1.1);
    z-index: 20;
}

.poi-icon {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    background-color: white;
    margin-bottom: 5px;
}

.poi-label {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    margin-bottom: 5px;
}

.poi-stalk {
    width: 2px;
    height: 100%; /* Fills remaining space */
    background: white;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    flex-grow: 1;
}

.poi-anchor {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    margin-top: -4px; /* Center on stalk end */
}

/* Animación Pulse */
@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Overlay */
.masterplan-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.masterplan-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* UI Controls (Top Left & Bottom Center) */
.masterplan-ui-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500;
}

#masterplan-logo-container {
    position: absolute;
    top: 20px;
    right: 80px; /* To left of buttons or stacked? User said Top Right Vertical. Let's stack them. */
    /* Actually, user said "buttons... top right corner... vertical... logo... top right corner".
       So they share the corner. Let's put Logo to the left of the buttons or above.
       "Buttons... top right corner vertical".
       "Logo... top right corner".
       Let's put the Logo absolute top: 20px, right: 80px (to left of buttons) to avoid overlap.
       Or top: 20px, right: 20px, and buttons below it.
       Let's put buttons below. */
    right: 20px;
    z-index: 501;
    pointer-events: auto;
    display: flex;
    justify-content: flex-end;
}

.masterplan-project-logo {
    max-width: 120px; /* Smaller, minimalist */
    max-height: 60px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
}

.masterplan-control-bar {
    position: absolute;
    top: 20px;
    left: 20px; /* Top Left */
    display: flex;
    flex-direction: column; /* Vertical */
    gap: 20px;
    z-index: 501;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: none;
    transform: none;
    right: auto;
}

.mp-control-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Circular */
    background: rgba(255, 255, 255, 0.1); /* Minimalist Glass */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 215, 0, 0.3); /* Thin Gold Border */
    color: #d4af37; /* Luxury Gold */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.mp-control-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.mp-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: #d4af37;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2); /* Gold Glow */
}

.mp-control-btn.active {
    background: rgba(255, 215, 0, 0.1);
    border-color: #d4af37;
    color: #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.1); /* Inner & Outer Glow */
}

.mp-btn-icon {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

/* Off-Canvas Sidebar */
.masterplan-sidebar {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100%;
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    padding: 0;
    overflow-y: auto;
    transition: right 0.3s ease-in-out;
}

.masterplan-sidebar.active {
    right: 0;
}

.sidebar-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 36px;
    color: #64748b;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.sidebar-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.sidebar-content {
    padding: 20px;
}

/* Detalles del Lote */
.lot-detail {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.lot-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.lot-header {
    margin-bottom: 15px;
}

.lot-number-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.lot-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 10px 0;
    line-height: 1.3;
}

.lot-status {
    display: inline-block;
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Información del Lote */
.lot-info {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

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

.info-label {
    font-weight: 600;
    color: #64748b;
}

.info-value {
    color: #1e293b;
    font-weight: 500;
}

.info-value.price {
    font-size: 20px;
    font-weight: 700;
    color: #10b981;
}

.lot-description {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Acciones */
.lot-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.btn-whatsapp {
    background: #25d366;
    color: white;
}

.btn-whatsapp:hover {
    background: #20ba5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.btn-contact {
    background: #3b82f6;
    color: white;
}

.btn-contact:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Formulario de Contacto */
.contact-form-container {
    background: #f8fafc;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.contact-form-container h3 {
    margin: 0 0 15px;
    color: #1e293b;
    font-size: 18px;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
}

#contact-form input:focus,
#contact-form textarea:focus {
    outline: none;
    border-color: #3b82f6;
}

#contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .masterplan-sidebar {
        width: 100%;
        right: -100%;
    }

    .masterplan-sidebar.active {
        right: 0;
    }

    .lot-image {
        height: 200px;
    }

    .lot-title {
        font-size: 20px;
    }

    .marker-number {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Scrollbar personalizado para sidebar */
.masterplan-sidebar::-webkit-scrollbar {
    width: 8px;
}

.masterplan-sidebar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.masterplan-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.masterplan-sidebar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Compatibilidad con MapLibre */
.maplibregl-popup {
    max-width: 300px;
}

.maplibregl-popup-content {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* =========================================
   NUEVOS ESTILOS DE PINES Y MODAL (2025)
   ========================================= */

/* Contenedor de Overlay para Modo Imagen */
.poi-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Permitir clicks a través, excepto en los hijos */
    z-index: 50; /* Encima del canvas */
}

/* Base POI Marker */
.poi-marker {
    position: relative; /* Default for MapLibre Wrapper content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    pointer-events: auto;
    /* Removed default transition/transform that conflicts with MapLibre positioning */
    z-index: 100;
    /* Ensure no offset unless explicitly handled by wrapper */
}

/* For Custom Image Mode, we absolutely position the wrapper or the marker */
.poi-overlay-container .poi-marker {
    position: absolute; /* Only for image mode overlay */
    transform: translate(-50%, -100%); /* Image mode needs this */
}

.poi-marker:hover {
    transform: scale(1.1) translateY(-5px);
    z-index: 101;
}

/* === ESTILO 1: ORTOGONAL (Línea Larga Blanca) === */
.poi-marker.style-orthogonal {
    width: 40px;
    height: 120px; /* Alto total */
}

.poi-marker.style-orthogonal .poi-icon-box {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

.poi-marker.style-orthogonal .poi-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.poi-marker.style-orthogonal .poi-line {
    width: 2px;
    height: 80px; /* Resto de la altura */
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.poi-marker.style-orthogonal .poi-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    margin-top: -4px; /* Centrar en el fin de la línea */
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* === ESTILO 2: GOLD 3D (Icono Dorado) === */
.poi-marker.style-gold {
    width: 60px;
    height: 70px;
}

.poi-marker.style-gold .poi-icon-wrapper {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4), inset -2px -2px 5px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid #fff8dc;
}

.poi-marker.style-gold .poi-icon-inner {
    width: 34px;
    height: 34px;
    background: white;
    border-radius: 50%;
    transform: rotate(45deg); /* Contrarrestar rotación */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

.poi-marker.style-gold .poi-icon-inner img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.poi-marker.style-gold::after {
    content: '';
    width: 20px;
    height: 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    position: absolute;
    bottom: -5px;
    filter: blur(2px);
}

/* === ESTILO 3: FLAG (Bandera) === */
.poi-marker.style-flag {
    width: 60px;
    height: 80px;
    align-items: flex-start; /* Alinear a la izquierda (el palo) */
}

.poi-marker.style-flag .poi-flag-content {
    background: linear-gradient(90deg, #ff4d4d, #cc0000);
    color: white;
    padding: 5px 10px;
    border-radius: 4px 4px 4px 0;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 60px;
}

.poi-marker.style-flag .poi-pole {
    width: 3px;
    height: 100%;
    background: #333;
    border-radius: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* === ESTILO 4: ORTOGONAL CON ETIQUETA (Nuevo) === */
.poi-marker.style-orthogonal-label {
    width: 2px;
    height: 100px;
    overflow: visible;
}

.poi-marker.style-orthogonal-label .poi-vertical-line {
    width: 2px;
    height: 60px;
    background: white;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    margin-top: auto;
}

.poi-marker.style-orthogonal-label .poi-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    margin-left: -2px; /* Center relative to vertical line */
    margin-top: -3px;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.poi-marker.style-orthogonal-label .poi-label-content {
    position: absolute;
    bottom: 60px; /* Starts at top of vertical line */
    left: 0; /* Aligned with vertical line */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.poi-marker.style-orthogonal-label .poi-horizontal-line {
    width: 60px; /* Fixed length for consistency */
    height: 2px;
    background: white;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.poi-marker.style-orthogonal-label .poi-label-text {
    background: transparent;
    color: white;
    padding: 0;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    margin-bottom: 2px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
}


/* === BOTTOM SHEET MODAL (Professional Glassmorphism) === */
.poi-bottom-sheet {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.05);
    z-index: 10000;
    transform: translateY(150%);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    padding: 0;
    max-height: 80vh;
    overflow-y: auto;
}

/* Scrollbar invisible */
.poi-bottom-sheet::-webkit-scrollbar {
    display: none;
}
.poi-bottom-sheet {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.poi-bottom-sheet.active {
    transform: translateY(0);
}

.poi-sheet-header {
    padding: 15px;
    display: flex;
    justify-content: center;
    position: relative;
    /* No border bottom for cleaner look */
}

.poi-sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.poi-sheet-close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(5px);
}

.poi-sheet-close:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

.poi-sheet-content {
    padding: 0 30px 30px 30px;
    text-align: left;
}

.poi-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 500px) {
    .poi-content-grid.has-image {
        grid-template-columns: 120px 1fr;
        align-items: start;
    }
}

.poi-sheet-image-wrapper {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: white;
}

.poi-sheet-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.poi-details-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poi-sheet-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    font-weight: 700;
    margin-bottom: 4px;
}

.poi-sheet-title {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.poi-sheet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
    color: #555;
    font-size: 13px;
}

.poi-sheet-distance {
    background: #f0fdf4;
    color: #166534;
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.poi-sheet-type {
    background: #eff6ff;
    color: #1e40af;
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: 600;
}

.poi-sheet-actions {
    margin-top: 20px;
}

/* Ocultar el marcador por defecto si usamos los nuevos */
.poi-marker-default {
    /* Estilos para el marcador simple por defecto */
}