/*
 * El plano de la sala (plano-sala.js, plano-3d.js): el editor de la Junta y la
 * vista del socio. Sacado de base.css el 4 nov 2026: solo lo cargan las
 * pantallas que lo enseñan.
 */

/* #region Plano de la sala (editor de la Junta y vista del socio, plano-sala.js) */
.plano {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    touch-action: none;
    user-select: none;
}

.plano__suelo {
    fill: var(--rs-superficie-1);
}

.plano__cuadricula {
    fill: none;
    stroke: var(--rs-borde-sutil);
    stroke-width: 0.12;
}

.plano__mesa circle:not(.plano__silla),
.plano__mesa rect {
    fill: var(--rs-superficie-3);
    stroke: var(--rs-texto-tenue);
    stroke-width: 0.3;
}

.plano__mesa--reservada circle:not(.plano__silla),
.plano__mesa--reservada rect {
    stroke-dasharray: 0.8 0.5;
}

.plano__nombre-mesa {
    fill: var(--rs-texto);
    font-size: 2.1px;
    font-weight: 700;
    pointer-events: none;
}

.plano__ocupacion {
    fill: var(--rs-texto-tenue);
    font-size: 1.7px;
    pointer-events: none;
}

/* Para quién es la mesa (peña o uso propio, 12 nov 2026) y cuántos van de cada peña. */
.plano__para-mesa {
    fill: var(--marca-acento, var(--rs-texto-tenue));
    font-weight: 700;
    pointer-events: none;
}

.plano__para-mesa--uso {
    fill: var(--rs-aviso-texto, #9A6B00);
}

/* «Ver nombres»: el de cada uno junto a su sitio. */
.plano__nombre-sitio {
    fill: var(--rs-texto);
    font-weight: 500;
    pointer-events: none;
    paint-order: stroke;
    stroke: var(--rs-superficie-1);
    stroke-width: .18px;
}

/* La mesa de quien mira: el color de su asociación y un "Tú" encima. */
.plano__mesa--mia circle:not(.plano__silla),
.plano__mesa--mia rect {
    fill: color-mix(in srgb, var(--marca-acento) 35%, var(--rs-superficie-3));
    stroke: var(--marca-acento);
    stroke-width: 0.7;
}

.plano__pin rect {
    fill: var(--marca-boton);
    stroke: none;
}

.plano__pin text {
    fill: var(--marca-sobre-boton);
    font-size: 2.2px;
    font-weight: 800;
}

.plano__elemento rect,
.plano__elemento ellipse {
    fill: color-mix(in srgb, var(--rs-texto-tenue) 18%, transparent);
    stroke: var(--rs-texto-tenue);
    stroke-width: 0.2;
}

.plano__elemento--escenario :is(rect, ellipse) {
    fill: color-mix(in srgb, var(--rs-aviso) 22%, transparent);
    stroke: var(--rs-aviso);
}

.plano__elemento--puerta :is(rect, ellipse) {
    fill: color-mix(in srgb, var(--rs-exito) 30%, transparent);
    stroke: var(--rs-exito);
}

.plano__elemento--columna :is(rect, ellipse) {
    fill: var(--rs-texto-tenue);
}

.plano__elemento--texto rect {
    fill: transparent;
    stroke: none;
}

.plano__texto-elemento {
    fill: var(--rs-texto-secundario);
    font-size: 1.9px;
    font-weight: 600;
    pointer-events: none;
}

/* Su icono, delante del nombre y del mismo color (los iconos son de trazo). */
.plano__icono-elemento {
    color: var(--rs-texto-secundario);
    pointer-events: none;
}

/* A escala (6 oct 2026): paredes de cada sala, lo de fuera sombreado, sillas y regla. */
.plano__fuera {
    fill: color-mix(in srgb, var(--rs-texto-tenue) 14%, var(--rs-superficie-1));
    pointer-events: none;
}

.plano__sala {
    fill: none;
    stroke: var(--rs-texto-secundario);
    stroke-width: 0.45;
    stroke-linejoin: round;
    pointer-events: none;
}

.plano__nombre-sala {
    fill: var(--rs-texto-tenue);
    font-size: 1.8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    pointer-events: none;
}

.plano__silla {
    fill: var(--rs-superficie-1);
    stroke: var(--rs-texto-tenue);
    stroke-width: 0.12;
}

.plano__silla--ocupada {
    fill: var(--rs-azul);
    stroke: var(--rs-azul);
}

.plano__mesa--mia .plano__silla--ocupada {
    fill: var(--marca-acento);
    stroke: var(--marca-acento);
}

/* Las sillas de una mesa larga, como banco seguido (más de 12 sitios). */
.plano__mesa rect.plano__banco {
    fill: var(--rs-superficie-1);
    stroke: var(--rs-texto-tenue);
    stroke-width: 0.12;
    stroke-dasharray: none;
}

.plano__mesa rect.plano__banco-ocupado {
    fill: var(--rs-azul);
    stroke: none;
}

.plano__mesa--mia rect.plano__banco-ocupado {
    fill: var(--marca-acento);
}

.plano__banco-rayas {
    fill: none;
    stroke: var(--rs-texto-tenue);
    stroke-width: 0.06;
    opacity: 0.6;
    pointer-events: none;
}

.plano__regla path {
    fill: none;
    stroke: var(--rs-texto-secundario);
    stroke-width: 0.2;
}

.plano__regla text {
    fill: var(--rs-texto-secundario);
    font-size: 1.5px;
    font-weight: 600;
}

.plano__dibujando {
    fill: color-mix(in srgb, var(--rs-azul) 10%, transparent);
    stroke: var(--rs-azul);
    stroke-width: 0.35;
    stroke-dasharray: 0.8 0.5;
    pointer-events: none;
}

.plano__esquina {
    fill: var(--rs-azul);
    pointer-events: none;
}

.plano--dibujando {
    cursor: crosshair;
}

.plano__marcada circle:not(.plano__silla),
.plano__marcada rect {
    stroke: var(--rs-aviso);
    stroke-width: 0.7;
}

/* Editor: se agarra, y lo elegido se distingue. */
.plano--editable [data-tipo] {
    cursor: grab;
}

.plano--editable [data-tipo]:focus {
    outline: none;
}

.plano__elegido circle:not(.plano__silla),
.plano__elegido rect,
.plano--editable [data-tipo]:focus-visible circle:not(.plano__silla),
.plano--editable [data-tipo]:focus-visible rect {
    stroke: var(--rs-azul);
    stroke-width: 0.6;
}

/* Los tiradores de lo elegido: el contorno a trazos, cuadrados para el tamaño y un círculo arriba para girar. */
.plano__contorno,
.plano__brazo {
    fill: none;
    stroke: var(--rs-azul);
    stroke-width: 0.18;
    stroke-dasharray: 0.6 0.4;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.plano__contorno {
    stroke-width: 1.5px;
    stroke-dasharray: 5 4;
}

.plano__brazo {
    stroke-width: 1.5px;
    stroke-dasharray: none;
}

.plano__tirador {
    fill: #FFFFFF;
    stroke: var(--rs-azul);
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25));
    transition: fill var(--duracion-hover) var(--curva);
}

.plano__tirador:hover {
    fill: var(--rs-azul);
}

.plano__tirador--giro {
    cursor: grab;
}

.plano__tirador--giro:active {
    cursor: grabbing;
}

/* El plano en 3D (plano-3d.js, 26 oct 2026): de noche, con los nombres en grande. */
.plano--3d {
    background: #07090D;
    border-color: #1E2935;
    touch-action: auto;
}

.plano3d__fondo {
    fill: #07090D;
}

.plano3d__nombre {
    fill: #FFFFFF;
    font-family: var(--fuente-display);
    font-weight: 700;
}

.plano3d__ocupacion {
    fill: #A7B0BC;
    font-family: var(--fuente-ui);
    font-weight: 600;
}

/* Para quién es la mesa (peña o uso propio, 12 nov 2026), debajo del nombre. */
.plano3d__para {
    font-family: var(--fuente-ui);
    font-weight: 700;
    letter-spacing: .01em;
}

/* El rótulo que chocaría con otro se esconde y sale al pasar por encima o al tocar la mesa. */
.plano3d__rotulo {
    transition: opacity .15s ease;
}

.plano3d__rotulo--oculto {
    opacity: 0;
}

.plano--3d .plano__mesa:hover .plano3d__rotulo--oculto,
.plano--3d .plano__mesa:focus-visible .plano3d__rotulo--oculto,
.plano--3d .plano__mesa--mia .plano3d__rotulo--oculto {
    opacity: 1;
}

.plano3d__elemento {
    fill: #DDE3EA;
    font-family: var(--fuente-ui);
    font-weight: 600;
    paint-order: stroke;
    stroke: rgb(7 9 13 / .7);
    stroke-width: .5px;
}

.plano3d__elemento--texto {
    fill: #A7B0BC;
}

.plano--3d .plano__mesa--tocable,
.plano--3d [data-tocable] {
    cursor: pointer;
}

.plano--3d .plano__mesa,
.plano--3d .plano__mesa:focus,
.plano--3d .plano__mesa:focus-visible {
    outline: none;
}

.plano--3d .plano__mesa:focus-visible .plano3d__pildora {
    stroke: var(--rs-azul) !important;
    stroke-width: .6px !important;
}
/* #endregion */

/* #region Lo que ha cambiado en cada mesa desde el último reparto (12 nov 2026, migración 0405) */
.plano__mesa .plano__cambios circle {
    fill: var(--rs-exito-solido, #13865A);
    stroke: var(--rs-superficie-1);
    stroke-width: 0.25;
}

.plano__mesa .plano__cambios text {
    fill: #fff;
    font-weight: 800;
    pointer-events: none;
}

.plano__mesa--cambiada > g > rect:not([class]),
.plano__mesa--cambiada > g > circle:not([class]) {
    stroke: var(--rs-exito);
    stroke-width: 0.45;
}
/* #endregion */