/* public/assets/css/mapa.css
   El plano del balneario, de la calle al mar: arriba la calle, donde da el
   restaurant, las carpas, las sombrillas, las sombras y el mar contra el pie.
   El estacionamiento va en su propia solapa y lo arma el dueño.
   Los colores salen del mapa 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
       alguna fila hay que recalibrarlo: a zoom 1 el plano debe entrar justo.
       Lo definen las filas de sombras, que son las más anchas (13 de un lado). */
    --ancho-plano: 28.4;
    --zoom: 1;
    --u: calc(min(calc((100vw - 48px) / var(--ancho-plano)), 34px) * var(--zoom));
    --gap: calc(var(--u) * .16);

    /* Paleta del mapa impreso */
    --azul: #146094;
    --amarillo: #EDC56A;
    --amarillo-borde: #C79A3B;
    --arena-mapa: #FFE996;        /* el fondo amarillo del mapa */
    --camino: #FCC37E;            /* los caminos naranja del mapa */
    --camino-borde: #E9A55C;
    --arena-clara: #E9E5DF;
    --asfalto: #CBC3B8;
    --asfalto-linea: #A4A19D;
    --edificio: #E4E4E2;
    --edificio-borde: #7E7B76;
    --mar-1: #657987;
    --mar-2: #374D59;
    --rojo: #B23B32;
    --box: #FFFFFF;
    --linea-box: #3B3A37;
    --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;
    min-width: calc(var(--u) * var(--ancho-plano));
    margin: 0 auto;
}

/* Bootstrap ya esconde lo que tiene [hidden]; esto lo deja explicito, porque
   de eso depende que las solapas muestren una vista por vez. */
.plano-inner[hidden] { display: none; }

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


/* ============================================================
   UNIDADES
   Como en el mapa impreso: libre es la caja blanca con borde
   negro. Los demás estados la pintan encima.
   ============================================================ */
.unidad-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    font-weight: 700;
    border: 1px solid var(--linea-box);
    background: var(--box);
    color: #2B2620;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: filter .12s ease-out, transform .12s ease-out;
    overflow: hidden;
    flex: 0 0 auto;
}

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

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

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

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

/* --- Estados ---
   Cada situación con su color y su textura, para que se distingan también
   impresas en blanco y negro o a contraluz:
     Libre      blanco, como figura en el mapa.
     Guardada   verde liso: se la guardamos al cliente, paga cuando viene.
     Reservada  rayado rojo: la pidió el cliente y todavía no dejó nada.
     Seña       rayado azul sobre naranja: pagó una parte, queda saldo.
     Paga       azul liso, cerrada. */
.estado-disponible {
    background: var(--box);
    border-color: var(--linea-box);
    color: #2B2620;
}

.estado-cortesia {
    background: var(--verde);
    border-color: #2C5C3C;
    color: #EAF5EE;
}

/* Guardada vencida: el mismo verde -sigue siendo del cliente hasta que alguien
   la libere- con el borde rojo del aviso. El sistema no la vende solo. */
.estado-vencida {
    background: var(--verde);
    border-color: var(--rojo);
    box-shadow: inset 0 0 0 2px var(--rojo);
    color: #EAF5EE;
}

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

.estado-reservado .num {
    background: #FBF1EE;
    padding: 0 2px;
    border-radius: 2px;
}

.estado-parcial {
    background: repeating-linear-gradient(-45deg,
        var(--naranja) 0 5px,
        var(--azul) 5px 10px);
    border-color: var(--azul-oscuro);
    color: #FFF3E4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.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;
    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; }
}


/* --- Formas, como en el mapa ---
   La cruz es el techo de la sombra: cuatro palos y la lona, sin paredes.
   Va en un ::before para no pelearse con el fondo de cada estado, y del color
   del texto, así se lee sobre el blanco y sobre el azul. */
.u-sombra,
.u-carpa.con-cruz {
    width: calc(var(--u) * .82);
    height: calc(var(--u) * .82);
}

.u-sombra::before,
.u-carpa.con-cruz::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background:
        linear-gradient(to top right, transparent calc(50% - .7px), currentColor calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)),
        linear-gradient(to bottom right, transparent calc(50% - .7px), currentColor calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px));
}

.u-sombrilla {
    width: calc(var(--u) * .9);
    height: calc(var(--u) * .9);
    border-radius: 50%;
}

/* La carpa es un rectángulo apaisado, y en cada calle van pegadas de a cinco */
.u-carpa {
    width: calc(var(--u) * 1.7);
    height: calc(var(--u) * .66);
}


/* ============================================================
   LA PLAYA
   ============================================================ */
.playa { background: var(--arena-mapa); }

/* El camino central baja de punta a punta: es el fondo de este contenedor,
   una franja en el medio. Cada fila deja libre esa columna. */
.playa-fondo {
    --ancho-camino: calc(var(--u) * .7);
    background: linear-gradient(90deg,
        transparent calc(50% - var(--ancho-camino) / 2),
        var(--camino) calc(50% - var(--ancho-camino) / 2) calc(50% + var(--ancho-camino) / 2),
        transparent calc(50% + var(--ancho-camino) / 2));
    padding-bottom: calc(var(--u) * .5);
}

.sector-playa { padding: calc(var(--u) * .15) 0 calc(var(--u) * .35); }

/* El cartel de cada sector cae sobre el camino central: lleva el fondo del
   mapa para leerse. */
.rotulo-playa {
    text-align: center;
    margin: calc(var(--u) * .1) 0 calc(var(--u) * .3);
    line-height: 1;
}

.rotulo-playa span {
    display: inline-block;
    background: var(--arena-mapa);
    padding: 2px .7em;
    border-radius: 2px;
    font-size: clamp(7px, calc(var(--u) * .3), 11px);
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(90, 64, 20, .8);
}

/* Cada fila se parte en dos mitades iguales, con el camino en el medio */
.fila-playa {
    display: grid;
    grid-template-columns: 1fr var(--ancho-camino) 1fr;
    align-items: start;
}

.fila-playa > .mitad:first-child { grid-column: 1; }
.fila-playa > .mitad:last-child  { grid-column: 3; }

.mitad {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(var(--u) * .2);
    padding: 0 calc(var(--u) * .35);
    min-width: 0;
}

.fila-sombras + .fila-sombras,
.fila-sombrillas + .fila-sombrillas { margin-top: calc(var(--u) * .3); }

/* Las filas 4 y 5 de sombras (las del lado de las sombrillas) entran un poco,
   como en el mapa */
.fila-sombras.corrida > .mitad:first-child { padding-left: calc(var(--u) * .75); }

.fila-sombrillas .mitad { padding: 0 calc(var(--u) * .45); }

/* Los caminos que cruzan de lado a lado */
.pasillo {
    height: calc(var(--u) * .42);
    margin: calc(var(--u) * .25) 0;
    background: var(--camino);
}

/* --- Carpas: ocho calles, cuatro de cada lado --- */
.calle-carpas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--u) * .42);
}

/* La carpa con letra cierra la calle, del lado del mar */
.calle-carpas > .con-cruz { margin-top: calc(var(--u) * .1); }

.tanda-carpas {
    display: flex;
    flex-direction: column;
}

.tanda-carpas .unidad-box + .unidad-box { margin-top: -1px; }

/* Contra la calle: la fila de quince, en tandas de cinco paradas, y el camino */
.frente-carpas { margin-bottom: calc(var(--u) * .5); align-items: start; }

.frente-carpas .mitad { flex-direction: column; justify-content: flex-start; }
.frente-carpas .mitad:first-child { padding: 0; }
.frente-carpas .mitad:last-child { align-items: flex-end; padding-right: calc(var(--u) * .35); }

.frente-carpas .pasillo { align-self: stretch; margin-bottom: 0; }

.fila-calle-carpas {
    display: flex;
    gap: calc(var(--u) * 1.2);
    padding-left: calc(var(--u) * .5);
}

.tanda-baja { display: flex; }

.tanda-baja .u-carpa {
    width: calc(var(--u) * .66);
    height: calc(var(--u) * 1.5);
}

.tanda-baja .unidad-box + .unidad-box { margin-left: -1px; }

.tanda-baja .num { font-size: clamp(5px, calc(var(--u) * .3), 11px); }

.restaurant {
    width: calc(var(--u) * 6.5);
    height: calc(var(--u) * 1.6);
    background: var(--edificio);
    border: 1px solid var(--edificio-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(7px, calc(var(--u) * .34), 13px);
    font-weight: 700;
    color: #3F3C37;
}


/* --- El mar, abajo, contra el pie --- */
.mar {
    height: calc(var(--u) * 2.6);
    background: linear-gradient(180deg, var(--arena-mapa) 0%, #B9C3BE 18%, var(--mar-1) 50%, 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);
}

/* --- La calle --- */
.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;
}


/* ============================================================
   EL ESTACIONAMIENTO
   Una grilla de casilleros. El lado del casillero (--c) se ajusta
   a la cantidad de columnas del terreno, así a zoom 1 entra en el
   mismo ancho que la playa.
   ============================================================ */

.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); }

.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;
}

.lienzo-estacionamiento {
    /* Con un terreno chico los casilleros no crecen más que 1,3 unidades: un
       lugar no puede verse el triple de grande que una carpa. */
    --c: min(calc(var(--u) * (var(--ancho-plano) - .8) / var(--cols)), calc(var(--u) * 1.3));
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--c));
    grid-template-rows: repeat(var(--filas), var(--c));
    width: max-content;
    margin: 0 auto;
    background: rgba(255, 255, 255, .22);
    outline: 1px solid rgba(90, 82, 70, .35);
}

/* Un lugar: la caja del mapa con la silueta del auto */
.lienzo-estacionamiento .unidad-box {
    width: auto;
    height: auto;
    margin: 1px;
    border-radius: 1px;
}

.lienzo-estacionamiento .unidad-box .num {
    font-size: clamp(5px, calc(var(--c) * .42), 13px);
}

.lienzo-estacionamiento .unidad-box::after {
    content: "";
    position: absolute;
    inset: 16% 22%;
    border: 1px solid var(--linea-auto);
    border-radius: calc(var(--c) * .18);
    opacity: .7;
    pointer-events: none;
}

.lienzo-estacionamiento .unidad-box.acostado::after { inset: 22% 16%; }

.lienzo-estacionamiento .unidad-box:not(.estado-disponible)::after { border-color: rgba(255, 255, 255, .45); }

/* Con sombra: la media sombra tendida sobre el lugar. Es una trama que se
   ve igual sobre cualquier estado. */
.con-sombra::before,
.leyenda-techo {
    background-image:
        repeating-linear-gradient(45deg, rgba(34, 52, 42, .32) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(34, 52, 42, .32) 0 1px, transparent 1px 4px);
}

.lienzo-estacionamiento .con-sombra::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-top: 3px solid rgba(34, 52, 42, .7);
}

.lienzo-estacionamiento .con-sombra.acostado::before { border-top: 0; border-left: 3px solid rgba(34, 52, 42, .7); }

.leyenda-techo { background-color: #fff; border-color: #3B3A37 !important; }

/* Un camino: el asfalto oscuro con la línea cortada del medio */
.camino {
    position: relative;
    background: #8E8A83;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.camino span {
    font-size: clamp(6px, calc(var(--c) * .4), 12px);
    font-weight: 700;
    letter-spacing: .14em;
    color: #F4F1EC;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.lienzo-vacio {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    text-align: center;
    padding: 1rem;
    color: rgba(58, 48, 32, .8);
    font-size: clamp(11px, calc(var(--u) * .34), 14px);
    line-height: 1.45;
    pointer-events: none;
}

.lienzo-vacio span { color: rgba(58, 48, 32, .62); }

.zona-pie {
    text-align: center;
    color: rgba(58, 48, 32, .62);
    font-size: clamp(7px, calc(var(--u) * .26), 10px);
    letter-spacing: .06em;
    margin-top: calc(var(--u) * .35);
}


/* --- El editor (solo el dueño) ---
   La barra vive arriba del plano, fuera del scroll lateral, y queda pegada
   debajo del menú mientras se baja por el terreno: así Guardar y lo que se
   hace con lo elegido están siempre a mano. El `top` lo pone el JS con la
   altura real del menú. */
.editor-estacionamiento {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #2F2A24;
    color: #F1ECE4;
    border-radius: 6px;
    padding: .5rem .6rem;
    margin-bottom: .5rem;
    font-size: .8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* En el celular la ayuda ocupa media pantalla: se queda solo en la compu */
@media (max-width: 575.98px) {
    .editor-ayuda { display: none; }
    .editor-terreno { margin-left: 0; }
}

.editor-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
}

.editor-fila + .editor-fila {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.editor-fila-n { width: auto; }
.editor-fila-n .form-control { width: 3.6rem; }

.editor-terreno {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-left: auto;
}

.editor-terreno label { font-weight: 600; }
.editor-terreno .form-control { width: 3.8rem; }

.editor-guardar { display: flex; gap: .35rem; }

.editor-elegido {
    flex: 1 1 12rem;
    font-weight: 600;
    color: #D8D1C5;
}

.editor-estacionamiento .btn[aria-pressed="true"] {
    background: #F1ECE4;
    color: #2F2A24;
}

.editor-ayuda {
    margin: .45rem 0 0;
    color: #BFB7AA;
    line-height: 1.4;
}

.editor-ayuda kbd {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: .72rem;
    padding: 0 .3em;
}

/* Mientras se edita, la grilla muestra sus casilleros */
.lienzo-estacionamiento.editando {
    background-color: rgba(255, 255, 255, .3);
    background-image:
        linear-gradient(rgba(60, 54, 46, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 54, 46, .16) 1px, transparent 1px);
    background-size: var(--c) var(--c);
    user-select: none;
}

.ed-elemento {
    position: relative;
    touch-action: none;            /* arrastrar no desplaza la pantalla */
    cursor: grab;
}

.ed-elemento.arrastrando { cursor: grabbing; z-index: 5; opacity: .9; }

.ed-elemento.elegido {
    outline: 2px solid #1F7AE0;
    outline-offset: 1px;
    z-index: 4;
}

.ed-elemento.choca {
    outline: 2px solid var(--rojo);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(178, 59, 50, .3);
}

/* Al editar, el lugar no se agranda ni se achica bajo el puntero: se mueve */
.editando .unidad-box { transition: none; }
.editando .unidad-box:hover,
.editando .unidad-box:active { transform: none; filter: none; }

/* El lugar nuevo todavía no tiene número: se lo da el servidor al guardar */
.ed-lugar.nuevo { border-style: dashed; }
.ed-lugar.nuevo .num { opacity: .6; }

/* El tirador para estirar un camino */
.tirador {
    position: absolute;
    right: 0;
    bottom: 0;
    width: max(10px, calc(var(--c) * .45));
    height: max(10px, calc(var(--c) * .45));
    background: #fff;
    border: 2px solid #1F7AE0;
    border-radius: 2px;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 2;
}

/* El recuadro para elegir varios con el mouse */
.ed-recuadro {
    position: absolute;
    border: 1px dashed #1F7AE0;
    background: rgba(31, 122, 224, .12);
    pointer-events: none;
    z-index: 6;
}


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

.leyenda-estados {
    /* La leyenda vive fuera del .plano: le hacen falta sus colores */
    --box: #FFFFFF;
    --linea-box: #3B3A37;
    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-estados span[hidden] { display: none; }

.leyenda-punto {
    width: 13px;
    height: 13px;
    border: 1px solid var(--linea-box);
    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; }


/* ============================================================
   GLOBITO CON EL NOMBRE DEL TITULAR
   Cuelga del <body> con position:fixed para que no lo recorten
   el scroll del plano ni el overflow de la propia unidad.
   ============================================================ */
.globo-titular {
    position: fixed;
    z-index: 1080;
    max-width: min(260px, calc(100vw - 16px));
    padding: 6px 10px;
    border-radius: 7px;
    background: #2B2620;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease-out;
}

.globo-titular.visible { opacity: 1; }

/* La flechita: apunta hacia abajo, o hacia arriba si el globo cayo debajo */
.globo-titular::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #2B2620;
    top: 100%;
}

.globo-titular.abajo::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #2B2620;
}

/* En pantallas tactiles no hay mouse: el nombre se ve al tocar la unidad */
@media (hover: none) {
    .globo-titular { display: none; }
}