/* ══ Plano único del salón (29-sep-2026) ════════════════════════════════════
   El mismo dibujo en Salones y mesas (operación y diseño), Mis mesas, el
   Monitor del piso, Recepción, la Agenda y el selector de comensales: la mesa
   de madera con su forma, giro, tamaño y sillas, como se diseñó (maqueta 04).
   El estado se pinta ENCIMA con una sola paleta (maqueta 03 + D8): un halo del
   color del estado, un ícono y las sillas ocupadas rellenas. Prefijo pl-.
   Lo cargan los layouts; las sillas las pone plano.js. */

:root {
    --pl-libre: #2E8B57;
    --pl-ocupada: #C2413B;
    --pl-impresa: #C2413B;
    --pl-reservada: #D9822B;
    --pl-porlimpiar: #8A7F6E;
    --pl-bloqueada: #7C818A;
    --pl-mantenimiento: #2F6FC4;
    --pl-inactiva: #B8B2A7;
    --pl-madera: #e2bf8e;
    --pl-madera-borde: #9b6f43;
    --pl-silla: #8a5a33;
    --pl-silla-borde: #6b4424;
    --pl-tinta: #2c2a27;
    --pl-tinta-suave: #4a3522;
}

/* ── Lienzo ── */
.pl {
    position: relative; width: 100%; aspect-ratio: 4 / 3;
    border-radius: 14px; overflow: hidden; border: 1px solid #d8d4c8;
    /* piso genérico (duela) cuando no hay imagen subida */
    background: repeating-linear-gradient(90deg, #efe9dd 0 46px, #e6dfd0 46px 48px);
}
.pl--barra { min-height: 120px; }
.pl-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pl-titulo {
    position: absolute; top: 8px; left: 10px; z-index: 3;
    padding: 2px 12px; border-radius: 999px;
    background: rgba(46, 75, 70, .88); color: #fff; font-weight: 600; font-size: .85rem;
}

/* ── Mesa: madera, forma, giro (--rot) y tamaño (--tam) del diseño ── */
.pl-mesa {
    --pl-c: transparent;
    position: absolute; z-index: 2;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    display: flex; align-items: center; justify-content: center;
    width: calc(13% * var(--tam, 1)); aspect-ratio: 1 / 1; padding: 0; margin: 0;
    background: var(--pl-madera); border: 3px solid var(--pl-madera-borde); border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    color: var(--pl-tinta); font: inherit; text-decoration: none; text-align: center;
    user-select: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pl-mesa:hover { color: var(--pl-tinta); }
.pl-mesa.forma-redonda { border-radius: 50%; }
.pl-mesa.forma-rect { aspect-ratio: 2 / 1; width: calc(19% * var(--tam, 1)); border-radius: 12px; }
/* Silla: un lugar individual dibujado solo como la silla (asiento con respaldo), sin mesa. */
.pl-mesa.forma-silla {
    width: calc(7.5% * var(--tam, 1)); min-width: 40px; aspect-ratio: 1 / 1.15;
    background: var(--pl-silla); border-color: var(--pl-silla-borde); border-width: 2px;
    border-radius: 22% 22% 40% 40%; box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    color: #fff;
}
.pl-mesa.forma-silla::before {
    content: ""; position: absolute; left: 8%; right: 8%; top: -14%; height: 26%;
    background: var(--pl-silla-borde); border-radius: 40% 40% 12% 12%; z-index: -1;
}
.pl-mesa.forma-silla:is(.pl-mesa--ocupada, .pl-mesa--impresa, .pl-mesa--reservada, .pl-mesa--bloqueada, .pl-mesa--mantenimiento) { background: var(--pl-c); }
.pl-mesa.forma-silla .pl-num { font-size: clamp(.7rem, 2vw, .95rem); }
.pl-mesa.forma-silla .pl-sub { display: none; }
a.pl-mesa:active, button.pl-mesa:active { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.96); }
.pl-mesa:focus-visible { outline: 3px solid var(--flux-ink-900, #0A0A0A) !important; outline-offset: 4px; }

/* La etiqueta se lee derecha: gira de regreso como una sola pieza. */
.pl-etq {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    max-width: 100%; line-height: 1.1; pointer-events: none;
    transform: rotate(calc(var(--rot, 0deg) * -1));
}
/* Girada de lado, a lo ancho solo cabe el lado corto de la mesa. */
.pl-mesa--de-lado.forma-rect .pl-etq { max-width: 50%; }
.pl-num { font-size: clamp(.85rem, 2.6vw, 1.25rem); font-weight: 800; line-height: 1.1; }
.pl-sub {
    display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%;
    font-size: clamp(.55rem, 1.5vw, .75rem); font-weight: 600; color: var(--pl-tinta-suave);
    line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-sub:empty { display: none; }
.pl-sub .flux-ico { width: .95em; height: .95em; flex: none; }
.pl-dato { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.pl-mesa--de-lado.forma-rect .pl-sub { white-space: normal; flex-wrap: wrap; }

/* ── Sillas (plano.js): la capacidad dibujada, las ocupadas rellenas ── */
.pl-sillas { position: absolute; inset: 0; z-index: -1; pointer-events: none; font-style: normal; }
.pl-silla {
    position: absolute; transform: translate(-50%, -50%) rotate(var(--sr, 0deg));
    background: var(--pl-silla); border: 1.5px solid var(--pl-silla-borde);
    border-radius: 45% 45% 18% 18%; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    font-style: normal;
}
.pl-silla.ocupada { background: var(--pl-c); border-color: rgba(0, 0, 0, .35); }
.pl-silla.extra { background: var(--pl-reservada); border-style: dashed; border-color: #8a4d12; }

/* ── Estado: halo del color, ícono y sillas ocupadas. Libre = madera limpia. ── */
.pl-mesa--ocupada { --pl-c: var(--pl-ocupada); }
.pl-mesa--impresa { --pl-c: var(--pl-impresa); }
.pl-mesa--reservada { --pl-c: var(--pl-reservada); }
.pl-mesa--porlimpiar { --pl-c: var(--pl-porlimpiar); }
.pl-mesa--bloqueada { --pl-c: var(--pl-bloqueada); }
.pl-mesa--mantenimiento { --pl-c: var(--pl-mantenimiento); }
.pl-mesa:is(.pl-mesa--ocupada, .pl-mesa--impresa, .pl-mesa--reservada, .pl-mesa--bloqueada, .pl-mesa--mantenimiento) {
    outline: 4px solid var(--pl-c); outline-offset: 3px;
}
.pl-mesa--porlimpiar { outline: 3px dashed var(--pl-c); outline-offset: 3px; }
.pl-mesa:is(.pl-mesa--bloqueada, .pl-mesa--mantenimiento) { filter: saturate(.35); }
.pl-mesa--inactiva, .pl-mesa--baja { opacity: .5; border-style: dashed; }

.pl-marca {
    position: absolute; top: -10px; left: -10px; z-index: 3;
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--pl-c); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transform: rotate(calc(var(--rot, 0deg) * -1));
}
.pl-marca .flux-ico { width: 13px; height: 13px; }
.pl-aviso {
    position: absolute; top: -12px; right: -10px; z-index: 3;
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--flux-gold-500, #D3BC8D); color: #0A0A0A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transform: rotate(calc(var(--rot, 0deg) * -1));
}
.pl-aviso .flux-ico { width: 14px; height: 14px; }

/* Mis mesas: las de los compañeros se ven, atenuadas. */
.pl-mesa.ajena { opacity: .42; filter: saturate(.3); }

/* Barra: bancos individuales, compactos, sin sillas. */
.pl--barra .pl-mesa { width: calc(8.5% * var(--tam, 1)); min-width: 44px; border-width: 2px; }
.pl--barra .pl-num { font-size: clamp(.7rem, 2.1vw, .95rem); }
.pl--barra .pl-sub { font-size: clamp(.5rem, 1.3vw, .65rem); }

/* Diseño: la mesa se ve como se va a construir, sin estado. */
.pl--diseno .pl-mesa { outline: none; filter: none; opacity: 1; border-style: solid; }
.pl--diseno .pl-mesa.pl-mesa--baja { opacity: .5; border-style: dashed; }
.pl--diseno .pl-mesa:active { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }

/* ── Elementos del salón que no son mesas (maqueta 04) ──
   Barra, paredes, puertas, plantas, áreas y textos: orientan, no se tocan
   en la operación. Medidas en % del lienzo; --rot los gira. */
.pe {
    position: absolute; z-index: 1; pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; font-weight: 700; color: #2c2a27; text-align: center; line-height: 1.1;
}
.pe__txt { font-size: clamp(.6rem, 1.6vw, .85rem); padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pe--barra { background: linear-gradient(180deg, #7a5a3a, #5e4329); border-radius: 8px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.25); }
.pe--barra .pe__txt { background: #fff; border-radius: 6px; padding: 2px 8px; }
.pe--pared { background: #3b3834; border-radius: 2px; }
.pe--puerta { border-top: 4px solid #3b3834; }
.pe--puerta::after {
    content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    border: 2px dashed #6d675e; border-left: 0; border-bottom: 0; border-radius: 0 100% 0 0;
}
.pe--planta {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #7fb069 0 22%, transparent 23%),
                radial-gradient(circle at 65% 40%, #5c9448 0 24%, transparent 25%),
                radial-gradient(circle at 48% 68%, #4a7d39 0 26%, transparent 27%),
                radial-gradient(circle, #3d6b2e 0 60%, #2f5424 61%);
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
}
.pe--area { border: 2px dashed; border-radius: 12px; align-items: flex-start; justify-content: flex-start; padding: 6px; }
.pe--area .pe__txt { text-transform: uppercase; letter-spacing: .04em; font-size: clamp(.55rem, 1.4vw, .75rem); }
.pe--c-oro   { background: rgba(211, 188, 141, .22); border-color: #b39a63; color: #6f5a2e; }
.pe--c-verde { background: rgba(46, 139, 87, .14); border-color: #2E8B57; color: #1f6b41; }
.pe--c-azul  { background: rgba(47, 111, 196, .13); border-color: #2F6FC4; color: #1f4f91; }
.pe--c-gris  { background: rgba(124, 129, 138, .14); border-color: #7C818A; color: #4d525a; }
.pe--texto .pe__txt { font-size: clamp(.7rem, 1.9vw, 1rem); white-space: normal; }

/* ── Leyenda, punto y pastilla: la misma paleta fuera del plano ── */
.pl-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--flux-ink-700, #171717); }
.pl-leyenda li { display: inline-flex; align-items: center; }
.pl-punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; flex: none; }
.pl-punto--libre { background: var(--pl-madera); box-shadow: inset 0 0 0 2px var(--pl-madera-borde); }
.pl-punto--ocupada { background: var(--pl-ocupada); }
.pl-punto--impresa { background: var(--pl-impresa); box-shadow: inset 0 0 0 3px #fbe3e1; }
.pl-punto--reservada { background: var(--pl-reservada); }
.pl-punto--porlimpiar { background: #fff; box-shadow: inset 0 0 0 2px var(--pl-porlimpiar); }
.pl-punto--bloqueada { background: var(--pl-bloqueada); }
.pl-punto--mantenimiento { background: var(--pl-mantenimiento); }
.pl-punto--inactiva { background: var(--pl-inactiva); }

.pl-pildora {
    display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 999px;
    font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.pl-pildora--libre { background: #f3e9d8; color: #5e4329; }
.pl-pildora--ocupada, .pl-pildora--impresa { background: #fbe3e1; color: #9b2f2a; }
.pl-pildora--reservada { background: #fdebd8; color: #9a5413; }
.pl-pildora--porlimpiar { background: #efebe4; color: #5d554a; }
.pl-pildora--bloqueada { background: #e6e7ea; color: #4d525a; }
.pl-pildora--mantenimiento { background: #e2ecfa; color: #1f4f91; }
.pl-pildora--inactiva { background: #f1efeb; color: #8a8378; }

/* Tarjetas de mesa (vista lista de Mis mesas, cuentas de una mesa): la misma paleta. */
.estado-libre { border-color: var(--pl-madera-borde); background: #fbf6ee; }
.estado-ocupada, .estado-impresa { border-color: var(--pl-ocupada); background: #fbeceb; }
.estado-reservada { border-color: var(--pl-reservada); background: #fdf1e5; }
.estado-porlimpiar { border-color: var(--pl-porlimpiar); background: #efebe4; border-style: dashed; }
.estado-bloqueada { border-color: var(--pl-bloqueada); background: #e9eaec; }
.estado-mantenimiento { border-color: var(--pl-mantenimiento); background: #e8f0fb; }

/* ── Una mesa sola, grande (abrir cuenta: ¿cuántos comensales?) ── */
.pl-solo {
    position: relative; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; margin: 0 auto 8px;
}
.pl-solo .pl-mesa { left: 50%; top: 50%; width: 44%; cursor: default; }
.pl-solo .pl-mesa.forma-rect { width: 60%; }
.pl-solo .pl-mesa:active { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
.pl-solo .pl-num { font-size: 1.15rem; }
.pl-solo .pl-sub { font-size: .8rem; }
.pl-solo .pl-silla { background: #f7f1e6; border-color: var(--pl-madera-borde); }
.pl-solo .pl-silla.ocupada { background: var(--flux-ink-900, #0A0A0A); border-color: var(--flux-ink-900, #0A0A0A); }
.pl-solo .pl-silla.extra { background: var(--pl-reservada); border-color: #8a4d12; }
.pl-silla b {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 800; color: #fff;
    transform: rotate(calc((var(--sr, 0deg) + var(--rot, 0deg)) * -1));
}
.pl-solo .pl-silla:not(.ocupada):not(.extra) b { color: var(--pl-tinta-suave); }