/* public/assets/css/mapa.css
   El plano del balneario, tal como está impreso: la calle arriba, el
   estacionamiento, los servicios, las carpas, las sombrillas y el mar abajo.
   Los colores salen del plano original del cliente (muestreados del archivo).

   Todo se dimensiona con --u (el lado de una unidad). Por defecto --u se
   calcula para que el plano entre completo en el ancho de la pantalla, y el
   control de zoom lo multiplica. */

.plano {
    /* Ancho natural del plano, medido en unidades. Si cambia la distribución de
       algún sector hay que recalibrarlo: a zoom 1 el plano debe entrar justo. */
    --ancho-plano: 24.8;
    --zoom: 1;
    --u: calc(min(calc((100vw - 48px) / var(--ancho-plano)), 34px) * var(--zoom));
    --gap: calc(var(--u) * .16);

    /* Paleta del plano impreso */
    --azul: #146094;
    --amarillo: #EDC56A;
    --amarillo-borde: #C79A3B;
    --tierra: #877553;
    --arena: #D6C5A7;
    --arena-clara: #E9E5DF;
    --asfalto: #CBC3B8;
    --asfalto-linea: #A4A19D;
    --beige: #C2AF99;
    --edificio: #F7F6F3;
    --edificio-borde: #9A948C;
    --mar-1: #657987;
    --mar-2: #374D59;
    --rojo: #B23B32;
    --box: #FBFAF7;
    --linea-box: #8A857C;
    --linea-auto: #B4AEA4;
}

.plano-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background: var(--arena-clara);
    border: 1px solid #C9C2B6;
    border-radius: 4px;
}

.plano-inner {
    width: max-content;
    margin: 0 auto;
}

.plano-scroll::-webkit-scrollbar { height: 8px; }
.plano-scroll::-webkit-scrollbar-thumb { background: var(--asfalto-linea); border-radius: 4px; }


/* ============================================================
   UNIDADES
   ============================================================ */
.unidad-box {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    border: 1px solid var(--amarillo-borde);
    background: var(--amarillo);
    color: #4A3A16;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: filter .12s ease-out, transform .12s ease-out;
    overflow: hidden;
}

.unidad-box .num {
    font-size: clamp(6px, calc(var(--u) * .42), 13px);
    line-height: 1;
    letter-spacing: -.02em;
}

@media (hover: hover) {
    .unidad-box:hover {
        filter: brightness(1.08);
        transform: scale(1.06);
        position: relative;
        z-index: 3;
    }
}

.unidad-box:active { transform: scale(.92); }

.unidad-box:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
    position: relative;
    z-index: 4;
}

/* --- Estados ---
   Libre: la unidad tal cual figura en el plano.
   Con saldo: la misma unidad marcada en rojo, porque hay plata por cobrar.
   Paga: azul de la marca, cerrada. */
.estado-disponible {
    background: var(--amarillo);
    border-color: var(--amarillo-borde);
    color: #4A3A16;
}

.estado-reservado {
    background: repeating-linear-gradient(-45deg,
        var(--amarillo) 0 4px,
        #E2A277 4px 8px);
    border-color: var(--rojo);
    box-shadow: inset 0 0 0 1px var(--rojo);
    color: #5C1F1A;
}

.estado-alquilado {
    background: var(--azul);
    border-color: #0C3F63;
    color: #EAF2F8;
}

.estado-mantenimiento {
    background: #B9B4AC;
    border-color: #8E8981;
    color: #55514B;
}

/* Resaltado al buscar una unidad por número */
.unidad-destacada {
    animation: latido 1s ease-in-out 3;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--azul) !important;
    position: relative;
    z-index: 5;
}

@keyframes latido {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
    .unidad-destacada { animation: none; }
    .unidad-box { transition: none; }
}


/* ============================================================
   SECCIONES DEL PLANO
   ============================================================ */
.sector {
    position: relative;
    padding: calc(var(--u) * .5) calc(var(--u) * .35);
}

.sector-rotulo {
    font-size: clamp(8px, calc(var(--u) * .32), 12px);
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .85);
    margin-bottom: calc(var(--u) * .3);
    text-align: center;
}

.sector-rotulo.oscuro { color: rgba(58, 48, 32, .72); }


/* --- 1. Calle y estacionamiento --- */
.calle {
    height: calc(var(--u) * .55);
    background: #6E6B66;
    border-bottom: 2px dashed #EDE9E2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(7px, calc(var(--u) * .26), 10px);
    font-weight: 700;
    letter-spacing: .2em;
    color: #EDE9E2;
}

.sector-estacionamiento {
    background:
        radial-gradient(circle at 30% 40%, rgba(120, 112, 100, .30) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 75%, rgba(120, 112, 100, .22) 0 1px, transparent 1px),
        var(--asfalto);
    background-size: 9px 9px, 13px 13px, auto;
}

.estacionamiento-grid {
    display: flex;
    gap: calc(var(--u) * .25);
    align-items: flex-start;
    justify-content: center;
}

.playa-cocheras {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * .28);
}

.bloque-cocheras {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 0;
}

/* El recuadro lo lleva cada fila: así los bloques quedan escalonados
   cuando una fila tiene menos cocheras que la de abajo, como en el plano */
.fila-cocheras {
    display: flex;
    gap: 0;
    width: max-content;
    border: 1px solid var(--linea-box);
    background: var(--box);
}

.fila-cocheras + .fila-cocheras { border-top: 0; }

/* La última fila del sector derecho se extiende hacia la senda: el terreno
   se ensancha hacia el frente */
.bloque-cocheras.corrido { margin-left: calc(var(--u) * -1.9); }

/* Cada cochera es un box del estacionamiento con la silueta del auto */
.fila-cocheras .unidad-box {
    width: var(--u);
    height: calc(var(--u) * 1.65);
    flex: 0 0 auto;
    position: relative;
    border: 0;
    box-shadow: inset -1px -1px 0 var(--linea-box);
    background: var(--box);
    color: #4A453D;
    border-radius: 0;
}

/* La silueta: cuerpo del auto (::before) y techo (::after) */
.fila-cocheras .unidad-box::before {
    content: "";
    position: absolute;
    inset: 12% 18%;
    border: 1px solid var(--linea-auto);
    border-radius: calc(var(--u) * .16);
    pointer-events: none;
}

.fila-cocheras .unidad-box::after {
    content: "";
    position: absolute;
    inset: 34% 30%;
    border: 1px solid var(--linea-auto);
    border-radius: calc(var(--u) * .06);
    pointer-events: none;
}

.fila-cocheras .unidad-box .num {
    position: relative;
    z-index: 2;
    background: var(--box);
    padding: 0 1px;
    border-radius: 2px;
}

/* Estados sobre el box blanco */
.fila-cocheras .estado-reservado {
    background: repeating-linear-gradient(-45deg,
        #F7EFE9 0 4px,
        #E2A277 4px 8px);
    box-shadow: inset 0 0 0 2px var(--rojo);
}

.fila-cocheras .estado-reservado .num { background: #FBF4EF; }

.fila-cocheras .estado-alquilado {
    background: var(--azul);
    color: #EAF2F8;
    box-shadow: inset -1px -1px 0 #0C3F63;
}

.fila-cocheras .estado-alquilado::before,
.fila-cocheras .estado-alquilado::after { border-color: rgba(255, 255, 255, .45); }

.fila-cocheras .estado-alquilado .num { background: var(--azul); }

.fila-cocheras .estado-mantenimiento { background: #C6C1B9; }
.fila-cocheras .estado-mantenimiento .num { background: #C6C1B9; }

/* Entre bloques hay aire: el paso de maniobra del plano */
.calle-maniobra {
    height: calc(var(--u) * .55);
}

/* Ocupa el lugar de una fila de cocheras, para que los bloques de los dos
   sectores queden enfrentados como en el plano */
.espaciador-fila {
    height: calc(var(--u) * 1.65 + 2px);
}

/* Accesos del centro del plano: cada uno es distinto */
.ingresos {
    display: flex;
    gap: calc(var(--u) * .12);
    align-self: stretch;
    align-items: stretch;
}

/* El rótulo va rotado dentro de un span: así el largo del texto no estira
   el sector, que debe medir lo que miden las cocheras */
.ingreso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.ingreso span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(6px, calc(var(--u) * .24), 10px);
    font-weight: 600;
    color: #5A554D;
    white-space: nowrap;
}

/* El ingreso vehicular no es una franja: es el espacio por donde se circula */
.ingreso.vehicular {
    width: calc(var(--u) * .8);
    background: transparent;
}

/* La senda peatonal recorre el estacionamiento de punta a punta */
.ingreso.peatonal {
    width: calc(var(--u) * .95);
    background: #EDEAE4;
    border: 1px solid var(--edificio-borde);
}

/* El playón de bicicletas y motos llega hasta la mitad */
.ingreso.moto {
    width: calc(var(--u) * 1.1);
    align-self: flex-start;
    height: 58%;
    background: #C9B79B;
    border: 1px solid #8E836F;
}

/* Flechas de circulación, como las del plano */
.circulacion {
    align-self: stretch;
    width: calc(var(--u) * 1.1);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: calc(var(--u) * .8) 0;
}

.circulacion svg {
    width: 100%;
    height: calc(var(--u) * 1.6);
    fill: none;
    stroke: #6B665E;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .55;
}


/* --- 2. Franja de servicios --- */
.sector-servicios {
    background: var(--beige);
    padding: calc(var(--u) * .45) calc(var(--u) * .35);
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: calc(var(--u) * .16);
    align-items: stretch;
}

.local {
    background: var(--edificio);
    border: 1px solid var(--edificio-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(5.5px, calc(var(--u) * .23), 10px);
    font-weight: 700;
    color: #4E4940;
    letter-spacing: .02em;
    padding: calc(var(--u) * .12);
    min-height: calc(var(--u) * 1.4);
    line-height: 1.1;
    min-width: 0;
    overflow: hidden;
}

.local.pileta {
    background: #2E7CB8;
    border-color: #14608F;
    color: #fff;
}

.local.vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: .1em;
}

.local.deck {
    background: transparent;
    border: none;
    gap: calc(var(--u) * .18);
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
}

/* Las mesas redondas del sector del bar */
.mesa {
    width: calc(var(--u) * .46);
    height: calc(var(--u) * .46);
    border-radius: 50%;
    background: #A8845A;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    flex: 0 0 auto;
}


/* --- 3. Carpas --- */
.sector-carpas {
    background: var(--tierra);
    padding: calc(var(--u) * .55) calc(var(--u) * .35);
}

.carpas-grid {
    display: flex;
    justify-content: center;
    gap: calc(var(--u) * .5);
}

.columna-carpas {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * .5);
    background: #6F6A61;
    padding: calc(var(--u) * .2);
    width: calc(var(--u) * 3.7);
}

.bloque-carpas {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * .1);
}

/* Cada carpa es un rectángulo ancho, como en el plano */
.bloque-carpas .unidad-box {
    height: calc(var(--u) * .74);
    border-radius: 2px;
}


/* --- 4. Sombrillas --- */
.sector-sombrillas {
    background: var(--arena);
    padding: calc(var(--u) * .5) calc(var(--u) * .3) calc(var(--u) * .7);
}

.sombrillas-grid {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * .34);
    align-items: center;
}

.fila-sombrillas {
    display: flex;
    gap: calc(var(--u) * .45);
    align-items: center;
}

.bloque-sombrillas {
    display: flex;
    gap: calc(var(--u) * .14);
}

.bloque-sombrillas .unidad-box {
    width: calc(var(--u) * .86);
    height: calc(var(--u) * .86);
    border-radius: 50%;
}

.pasillo-playa {
    align-self: stretch;
    height: calc(var(--u) * .68);
    margin: calc(var(--u) * .12) 0;
    background: var(--arena-clara);
    border-top: 1px solid rgba(135, 117, 83, .35);
    border-bottom: 1px solid rgba(135, 117, 83, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(6px, calc(var(--u) * .24), 10px);
    font-weight: 700;
    letter-spacing: .12em;
    color: #7A6A4E;
    white-space: nowrap;
}


/* --- 5. El mar --- */
.mar {
    height: calc(var(--u) * 3.2);
    background: linear-gradient(180deg, #CFC5AC 0%, #A9B3AE 20%, var(--mar-1) 45%, var(--mar-2) 100%);
    position: relative;
    overflow: hidden;
}

.mar::before,
.mar::after {
    content: "";
    position: absolute;
    left: -10%;
    width: 120%;
    height: calc(var(--u) * .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
}

.mar::before { top: 36%; }
.mar::after  { top: 60%; opacity: .5; }

.mar span {
    position: absolute;
    bottom: calc(var(--u) * .22);
    width: 100%;
    text-align: center;
    font-size: clamp(7px, calc(var(--u) * .28), 11px);
    font-weight: 700;
    letter-spacing: .3em;
    color: rgba(255, 255, 255, .92);
}


/* ============================================================
   BARRA DE HERRAMIENTAS Y LEYENDA
   ============================================================ */
.plano-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.leyenda-estados {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .8rem;
    align-items: center;
    font-size: .72rem;
    font-weight: 600;
    color: #5A544A;
}

.leyenda-estados span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.leyenda-punto {
    width: 13px;
    height: 13px;
    border: 1px solid var(--amarillo-borde);
    display: inline-block;
    flex: 0 0 auto;
}

.zoom-group .btn { min-width: 38px; font-weight: 700; }

.pista-scroll {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 600;
    color: #6B655B;
    padding-top: .3rem;
}

.plano.desplazable .pista-scroll { display: flex; }