/* Generated by Copilot */
/* Corporate redesign of the unit-info popup rendered by themes/2/tooltip.js
   (ShowInfo() in PlanimetriaPTD-v2.aspx/.html). The raw popup markup is a table
   generated by ShowInfoNewSLMovil.aspx; enhanceUnitModal() in the .aspx/.html
   rebuilds it into .unit-modal__* semantic blocks, styled here.

   Variante elegida: Light Clean SaaS (sin línea de acento superior) — tarjeta
   blanca, filas con separadores, precio destacado en verde, medidas en chips. */

/* ---------- backdrop (atenuar el mapa detrás de la tarjeta) ---------- */
#unitModalBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 21, 0.5) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 2147483646;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

#unitModalBackdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* hides the callout arrow tooltip.js draws pointing at the clicked ball;
   a floating card reads cleaner without it in sticky mode */
#mcttCo {
    display: none !important;
}

/* the modal must appear centered on screen, not anchored to the clicked
   ball and not flying in from a side: tooltip.js inline-styles/anims the
   wrapper's left/top for its "slide" effect, so !important is required to
   force centering. (The slide is also disabled from ShowInfo() via
   effect:"fade".) */
#mcTooltipWrapper {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    /* oculto hasta que enhanceUnitModal reconstruya el contenido compacto:
       evita el parpadeo de la tabla cruda (a alto completo) antes de
       redimensionarse al tamaño final */
    opacity: 0 !important;
    pointer-events: none;
}

#mcTooltipWrapper.unit-modal-ready {
    opacity: 1 !important;
    pointer-events: auto;
    transition: opacity .15s ease;
}

/* ---------- tooltip shell: quitar padding del vendor y fijar el ancho ---------- */
#mcTooltip {
    border: 1px solid rgba(15, 17, 21, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(15, 17, 21, .28), 0 4px 14px rgba(15, 17, 21, .12) !important;
    background: #ffffff !important;
    padding: 0 !important;
    width: 380px !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    /* el alto lo define el contenido, no las tablas crudas de 252px */
    font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
    animation: unitModalIn .18s ease;
}

div.mcTooltipInner {
    /* tooltip.js inline-styles this element to position:absolute + a fixed
       width/height sized to the ORIGINAL raw table (see enhanceUnitModal()) —
       an absolutely-positioned child doesn't drive its parent's height:auto,
       which collapsed #mcTooltip to 0px; the fixed width also overflowed
       #mcTooltip's 380px and got clipped by its overflow:hidden. !important
       is required on both since inline styles otherwise win. */
    position: static !important;
    width: 100% !important;
    height: auto !important;
}

@keyframes unitModalIn {
    from {
        opacity: 0;
        transform: scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- botón de cierre ---------- */
#mcttCloseButton {
    top: 9px !important;
    right: 9px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 21, .05) !important;
    color: #4b4f57 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

#mcttCloseButton:hover {
    background: rgba(255, 59, 48, .12) !important;
    color: #d32f2f !important;
}

/* ---------- fallback: mientras llega el contenido async y se reconstruye ---------- */
.mcTooltipInner table table .unitHeader {
    font-size: 11px;
    color: #6b7280;
}

.mcTooltipInner table table .unitValue {
    font-size: 13px;
    color: #14161a;
}

/* ============================================================
   Tarjeta de unidad (estructura generada por enhanceUnitModal)
   NOTA: se usa !important en los fondos porque el <head> de las
   paginas tiene 'body div { background-color: transparent
   !important; }' (mismo caso resuelto en .map-zoomctrl y
   .map-minimap de map-zoom.css).
   ============================================================ */
.unit-modal {
    width: 100%;
    background: #ffffff !important;
    font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* --- cabecera: código de unidad + badge de estado --- */
.unit-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    /* padding-derecho mayor: reserva espacio para el botón de cierre (×) y
        evita que el badge de estado se solape con él */
    padding: 13px 40px 11px 16px;
}

.unit-modal__head-code {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.unit-modal__head-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .18em;
    color: #8a94a0;
    text-transform: uppercase;
}

.unit-modal__head-value {
    font-size: 16px;
    font-weight: 800;
    color: #14161a;
    letter-spacing: -.01em;
    line-height: 1.2;
    word-break: break-word;
}

.unit-modal__badge {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 3px 8px !important;
    border-radius: 999px;
    font-size: 10px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    flex: none;
}

.unit-modal__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.unit-modal__badge--disponible {
    background: rgba(52, 199, 89, .12);
    color: #1c8a3d !important;
}

.unit-modal__badge--reservada {
    background: rgba(255, 204, 0, .16);
    color: #a67c00 !important;
}

.unit-modal__badge--vendida {
    background: rgba(255, 59, 48, .12);
    color: #d32f2f !important;
}

.unit-modal__badge--nodisponible {
    background: rgba(148, 163, 184, .14);
    color: #64748b !important;
}

.unit-modal__badge--default {
    background: rgba(90, 120, 255, .12);
    color: #3355cc !important;
}

/* --- cuerpo --- */
.unit-modal__body {
    padding: 0 16px 13px;
}

.unit-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f2f4;
}

.unit-modal__row-label {
    font-size: 11.5px;
    color: #6b7280;
}

.unit-modal__row-value {
    font-size: 12.5px;
    font-weight: 600;
    color: #14161a;
    text-align: right;
}

/* precio total: caja verde destacada */
.unit-modal__row--price {
    background: #f2f9f4 !important;
    border: 1px solid #dcefe1;
    border-radius: 8px;
    padding: 7px 10px;
    margin-top: 5px;
}

.unit-modal__row--price .unit-modal__row-label {
    color: #2f6b41;
    font-weight: 600;
}

.unit-modal__row--price .unit-modal__row-value {
    color: #1a7f37;
    font-weight: 800;
    font-size: 14px;
}

.unit-modal__divider {
    height: 1px;
    background: #f0f2f4;
    margin: 10px 0 8px;
}

/* --- medidas (chips) --- */
.unit-modal__measures {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.unit-modal__measure {
    /* flex: 1 1 0% + min-width:0 => los 4 chips (Norte/Sur/Este/Oeste)
       se reparten la fila equitativamente y nunca bajan a otra línea */
    flex: 1 1 0%;
    min-width: 0;
    background: #f7f8fa !important;
    border: 1px solid #eceef0;
    border-radius: 8px;
    padding: 6px 4px;
    text-align: center;
}

/* metros totales: caja verde de ancho completo en la parte superior */
.unit-modal__measure--total {
    flex: 1 1 100%;
    min-width: 100%;
    background: #f2f9f4 !important;
    border-color: #dcefe1;
    padding: 8px 4px;
}

.unit-modal__measure--total .unit-modal__measure-label {
    color: #2f6b41;
}

.unit-modal__measure--total .unit-modal__measure-value {
    font-size: 16px;
    color: #1a7f37;
}

.unit-modal__measure-label {
    display: block;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #9aa3ad;
    text-transform: uppercase;
    margin-bottom: 1px;
}

.unit-modal__measure-value {
    font-size: 11.5px;
    font-weight: 700;
    color: #14161a;
}

/* --- footer con la marca --- */
.unit-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid #f0f2f4;
    background: #fafbfc !important;
}

.unit-modal__foot-brand {
    font-size: 10px;
    font-weight: 700;
    color: #14161a;
}

.unit-modal__foot-red {
    font-style: normal;
    color: #ff3b30;
}

.unit-modal__foot-meta {
    font-size: 9.5px;
    color: #9aa3ad;
}

/* ============================================================
   Móvil: modal legible en pantallas chicas (<=640px)
   Mismo diseño; tipografías, paddings y target táctil más grandes.
   ============================================================ */
@media (max-width: 640px) {

    /* ocupar casi todo el ancho y limitar el alto con scroll interno
       (evita que el contenido se corte en pantallas bajas) */
    #mcTooltip {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - 32px);
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* botón de cierre: target táctil >= 40px */
    #mcttCloseButton {
        top: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 22px !important;
    }

    .unit-modal__head {
        /* padding-derecho mayor: reserva espacio para el × de 40px */
        padding: 16px 56px 14px 18px;
        gap: 12px;
    }

    .unit-modal__head-label {
        font-size: 12px;
    }

    .unit-modal__head-value {
        font-size: 22px;
    }

    .unit-modal__badge {
        font-size: 14px !important;
        padding: 6px 12px !important;
        gap: 6px;
    }

    .unit-modal__badge::before {
        width: 8px;
        height: 8px;
    }

    .unit-modal__body {
        padding: 0 18px 16px;
    }

    .unit-modal__row {
        padding: 10px 0;
    }

    .unit-modal__row-label {
        font-size: 15px;
    }

    .unit-modal__row-value {
        font-size: 16px;
    }

    .unit-modal__row--price {
        padding: 11px 12px;
        margin-top: 8px;
    }

    .unit-modal__row--price .unit-modal__row-value {
        font-size: 20px;
    }

    .unit-modal__divider {
        margin: 12px 0 10px;
    }

    .unit-modal__measures {
        gap: 8px;
    }

    .unit-modal__measure {
        padding: 9px 6px;
    }

    .unit-modal__measure--total {
        padding: 11px 6px;
    }

    .unit-modal__measure-label {
        font-size: 11px;
        margin-bottom: 2px;
    }

    .unit-modal__measure-value {
        font-size: 15px;
    }

    .unit-modal__measure--total .unit-modal__measure-value {
        font-size: 20px;
    }

    .unit-modal__foot {
        padding: 13px 18px;
    }

    .unit-modal__foot-brand {
        font-size: 14px;
    }

    .unit-modal__foot-meta {
        font-size: 13px;
    }
}