/* ── CÓMO SE VE CADA COSA DEL PLANO DEL SALÓN ────────────────────────────────────────────────────
   Compartido entre el EDITOR (donde se dibuja) y el MOSTRADOR (donde se atiende). Vive en un archivo
   y no en el <style> de cada página a propósito: si el acceso fuera verde en el editor y gris en el
   mostrador, quien dibuja el salón estaría configurando una cosa y viendo otra.

   Los colores no son decorativos, dicen QUÉ ES cada pieza: verde lo que se cruza, ámbar lo que
   estorba, el color de marca para donde se atiende, gris sólido para lo estructural, y azul para los
   destinos (caja, baños). Es lo que permite leer el plano sin leer las etiquetas — que no entran
   cuando la pieza es angosta.

   Todo con variables del tema, nunca hex: el plano se mira en claro y en oscuro. */

/* ── EL TEXTO DE LA MESA ESCALA CON LA MESA ──────────────────────────────────────────────────────
   El número iba en un tamaño FIJO (Typo.h5 ≈ 24px). Con el plano dibujado la mesa mide lo que mide
   en el salón: una mesa de dos, o cualquier mesa en un celular, queda de 30 px y un número de 24 px
   NO ENTRA — se desborda encima de las vecinas. En el celular eso se ve como números gigantes
   pisándose unos a otros y el plano deja de poder leerse.

   `cqmin` = porcentaje del lado MENOR de la mesa. Así el número ocupa siempre la misma proporción de
   su pieza, mida lo que mida, y una mesa angosta no lo desborda por el lado corto.

   El `clamp` pone los dos límites que importan: nunca tan chico que no se lea, nunca tan grande que
   se salga. Y `overflow:hidden` es la red de seguridad — antes que desbordar sobre la mesa de al
   lado, se recorta.

   Los cubiertos DESAPARECEN en las piezas muy chicas. Es a propósito: entre "4 cub." ilegible
   encimado al número y no mostrarlo, gana el número, que es lo que identifica la mesa. El dato
   completo sigue estando en el tooltip. */
.mesa-pieza {
    container-type: size;
    padding: 2px;
    overflow: hidden;
}

.mesa-pieza .mesa-numero {
    font-size: clamp(11px, 34cqmin, 26px);
    line-height: 1.05;
}

.mesa-pieza .mesa-cub {
    font-size: clamp(8px, 15cqmin, 12px);
    line-height: 1.05;
    opacity: .75;
}

/* Por debajo de ~46 px de lado no entra nada más que el número. */
@container (max-height: 46px) {
    .mesa-cub { display: none; }
}

/* ── EL LIENZO EN PANTALLAS ANGOSTAS ─────────────────────────────────────────────────────────────
   El plano es una maqueta a escala: ocupa el 100% del ancho y su alto sale de la relación del salón.
   En un celular eso son unos 360 px, y veinte mesas ahí adentro quedan del tamaño de una uña, con el
   número sin lugar para entrar. Es lo que se veía como "las mesas se dibujan mal".

   Con un ancho mínimo, el plano conserva el tamaño que tiene en una tablet y la pantalla se desplaza
   en horizontal. Se pierde ver el salón entero de un vistazo, y se gana poder tocar la mesa correcta
   —que es para lo que se abre esta pantalla—.

   NO se cae a la grilla automática en el celular: la grilla es legible pero pierde el mapa, y
   encontrar la mesa 12 entre veinte cuadrados iguales obliga a traducir del salón a la pantalla, que
   es justamente lo que el plano vino a evitar. */
@media (max-width: 700px) {
    .plano-lienzo { min-width: 700px; }
}

.elemento {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    font-size: .7rem;
    line-height: 1.1;
    border-radius: 3px;
    background: rgba(var(--mud-palette-text-primary-rgb), .18);
    color: var(--mud-palette-text-primary);
    border: 1px dashed var(--mud-palette-divider);
}

.elemento.pared {
    background: var(--mud-palette-text-secondary);
    color: var(--mud-palette-surface);
    border: none;
    border-radius: 2px;
}

.elemento.barra {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    border: none;
}

.elemento.acceso {
    background: rgba(var(--mud-palette-success-rgb), .30);
    color: var(--mud-palette-success);
    border: 2px dashed var(--mud-palette-success);
}

.elemento.obstaculo {
    background: rgba(var(--mud-palette-warning-rgb), .30);
    color: var(--mud-palette-warning);
    border: 2px solid var(--mud-palette-warning);
}

/* Columna y planta son redondas porque en el salón se ven redondas. Reconocer la forma de un vistazo
   es lo que hace que el plano se lea sin leerlo. */
.elemento.columna {
    background: var(--mud-palette-text-secondary);
    color: var(--mud-palette-surface);
    border: none;
    border-radius: 50%;
}

.elemento.planta {
    background: rgba(var(--mud-palette-success-rgb), .55);
    color: var(--mud-palette-surface);
    border: none;
    border-radius: 50%;
}

/* Los destinos del salón: adónde se paga, dónde está el baño, de dónde sale la comida. Sólidos
   porque son puntos de referencia, no estorbos. */
.elemento.caja {
    background: var(--mud-palette-info);
    color: var(--mud-palette-info-text);
    border: none;
}

.elemento.bano {
    background: rgba(var(--mud-palette-info-rgb), .35);
    color: var(--mud-palette-info);
    border: 1px solid var(--mud-palette-info);
}

.elemento.cocina {
    background: rgba(var(--mud-palette-secondary-rgb), .35);
    color: var(--mud-palette-secondary);
    border: 1px solid var(--mud-palette-secondary);
}

/* Rayada: es lo que la distingue de un rectángulo cualquiera cuando la etiqueta no entra. */
.elemento.escalera {
    background: repeating-linear-gradient(
        0deg,
        var(--mud-palette-text-secondary) 0 3px,
        transparent 3px 10px);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-text-secondary);
}

/* El texto es un cartel, no un mueble: sin fondo ni borde, para que no parezca algo que ocupa lugar
   en el salón. */
.elemento.texto {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border: none;
    font-weight: 600;
    font-size: .8rem;
}

/* ── LA LEYENDA ──────────────────────────────────────────────────────────────────────────────────
   Reusa las mismas clases de tipo que las piezas, así el color de la referencia NO puede quedar
   distinto del que se ve en el plano. */
.muestra {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.muestra.mesa { background: var(--mud-palette-primary); }
.muestra.pared { background: var(--mud-palette-text-secondary); }
.muestra.barra { background: var(--mud-palette-secondary); }
.muestra.caja { background: var(--mud-palette-info); }
.muestra.columna { background: var(--mud-palette-text-secondary); border-radius: 50%; }
.muestra.planta { background: rgba(var(--mud-palette-success-rgb), .55); border-radius: 50%; }

.muestra.acceso {
    background: rgba(var(--mud-palette-success-rgb), .30);
    border: 2px dashed var(--mud-palette-success);
}

.muestra.obstaculo {
    background: rgba(var(--mud-palette-warning-rgb), .30);
    border: 2px solid var(--mud-palette-warning);
}

.muestra.bano {
    background: rgba(var(--mud-palette-info-rgb), .35);
    border: 1px solid var(--mud-palette-info);
}

.muestra.cocina {
    background: rgba(var(--mud-palette-secondary-rgb), .35);
    border: 1px solid var(--mud-palette-secondary);
}

.muestra.escalera {
    background: repeating-linear-gradient(
        0deg, var(--mud-palette-text-secondary) 0 2px, transparent 2px 5px);
    border: 1px solid var(--mud-palette-text-secondary);
}

.muestra.texto { border: 1px dashed var(--mud-palette-divider); }