/* ==================================================================
   PLANO DEL SALON
   Estilos del editor (admin). Todo va prefijado con .plano- para no
   pisar nada del resto del sistema.
   ================================================================== */

.plano-editor{ position:relative; }

.plano-cabecera .box-title small{ color:#888; margin-left:8px; font-weight:normal; }
.plano-cabecera-acciones{ display:flex; align-items:center; gap:8px; }

.plano-estado{ font-size:12px; color:#888; margin-right:6px; display:none; }

.plano-aviso{
	position:sticky; top:0; z-index:1200;
	margin-bottom:10px; padding:10px 14px; font-size:13px;
	box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* ---------- INTERRUPTOR ---------- */
.plano-interruptor{
	display:flex; align-items:center; gap:14px;
	padding:12px 16px; margin-bottom:14px;
	background:#f4f4f4; border-left:4px solid #999; border-radius:3px;
	transition:background .2s, border-color .2s;
}
.plano-interruptor.encendido{ background:#eaf7ea; border-left-color:#00a65a; }
.plano-interruptor-texto{ display:flex; flex-direction:column; line-height:1.35; }
.plano-interruptor-texto small{ color:#777; }

.plano-switch{ position:relative; display:inline-block; width:52px; height:28px; margin:0; flex:0 0 52px; }
.plano-switch input{ opacity:0; width:0; height:0; }
.plano-switch-bola{
	position:absolute; cursor:pointer; inset:0;
	background:#bbb; border-radius:28px; transition:background .2s;
}
.plano-switch-bola:before{
	content:""; position:absolute; height:22px; width:22px; left:3px; top:3px;
	background:#fff; border-radius:50%; transition:transform .2s;
	box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.plano-switch input:checked + .plano-switch-bola{ background:#00a65a; }
.plano-switch input:checked + .plano-switch-bola:before{ transform:translateX(24px); }

/* ---------- ZONAS ---------- */
.plano-zonas{ display:flex; flex-wrap:wrap; gap:6px; }
.plano-zona-btn{
	border:1px solid #d2d6de; background:#fff; color:#444;
	padding:6px 16px; border-radius:3px; font-size:13px; cursor:pointer;
}
.plano-zona-btn:hover{ background:#f4f4f4; }
.plano-zona-btn.activa{ background:#3c8dbc; border-color:#367fa9; color:#fff; font-weight:600; }

/* ---------- CUERPO: bandejas + lienzo ---------- */
.plano-cuerpo{ display:flex; gap:12px; align-items:flex-start; }

.plano-bandejas{ flex:0 0 210px; display:flex; flex-direction:column; gap:12px; }
.plano-bandeja{
	background:#fff; border:1px solid #d2d6de; border-radius:3px; padding:10px;
}
.plano-bandeja-titulo{
	font-size:11px; font-weight:700; color:#666; letter-spacing:.5px;
	margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.plano-bandeja-cuerpo{
	display:flex; flex-wrap:wrap; gap:5px;
	max-height:190px; overflow-y:auto; margin-bottom:8px;
}
.plano-ayuda{ color:#999; font-size:11px; line-height:1.3; display:block; }
.plano-vacia{ font-style:italic; }

.plano-chip{
	display:inline-block; padding:5px 10px; font-size:12px;
	background:#f4f4f4; border:1px solid #ddd; border-radius:3px;
	cursor:grab; user-select:none; touch-action:none;
	transition:background .12s, transform .12s;
}
.plano-chip:hover{ background:#e3e9ef; border-color:#aab6c2; transform:translateY(-1px); }
.plano-chip:active{ cursor:grabbing; }
.plano-chip.ocupada{ background:#fcf8e3; border-color:#f0ad4e; color:#8a6d3b; }
.plano-chip.ocupada .fa{ font-size:7px; vertical-align:middle; color:#f0ad4e; }

.plano-chip-dom{
	display:inline-block; padding:5px 11px; font-size:12px; margin:0 4px 4px 0;
	background:#f4f4f4; border:1px dashed #bbb; border-radius:14px;
	cursor:pointer; user-select:none; color:#999;
}
.plano-chip-dom.encendida{ background:#e8f4fd; border:1px solid #3c8dbc; color:#2b6f92; font-weight:600; }

/* ---------- LIENZO ---------- */
.plano-lienzo-marco{
	flex:1 1 auto; min-width:0;
	background:#fff; border:1px solid #d2d6de; border-radius:3px;
}
.plano-lienzo-barra{
	display:flex; justify-content:space-between; align-items:center;
	padding:7px 12px; border-bottom:1px solid #eee; font-size:12px; color:#666;
}
.plano-contador b{ color:#333; }
.plano-zoom{ display:flex; align-items:center; gap:6px; }
.plano-zoom span{ min-width:42px; text-align:center; }

.plano-lienzo-scroll{ overflow:auto; max-height:62vh; padding:12px; }

.plano-lienzo{
	position:relative; margin:0 auto;
	background-color:#fafbfc;
	background-image:
		linear-gradient(to right,  rgba(0,0,0,.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0,0,0,.055) 1px, transparent 1px);
	border:1px solid #e4e7ea; border-radius:2px;
	touch-action:none;
}
.plano-lienzo.recibiendo{ background-color:#eef7ff; border-color:#3c8dbc; }

.plano-vacio{
	position:absolute; inset:0; display:flex; flex-direction:column;
	align-items:center; justify-content:center; color:#b0b7be; text-align:center;
	pointer-events:none;
}
.plano-vacio .fa{ font-size:36px; margin-bottom:12px; }
.plano-vacio p{ font-size:13px; line-height:1.5; }

/* ---------- MESAS ---------- */
.plano-mesa{
	position:absolute; cursor:grab; user-select:none; touch-action:none;
	display:flex; align-items:center; justify-content:center;
	transition:box-shadow .12s;
}
.plano-mesa:active{ cursor:grabbing; }

.plano-mesa-cara{
	position:absolute; inset:12%;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	background:#dfe6ec; border:2px solid #aab6c2; color:#3a4149;
	font-size:11px; font-weight:600; text-align:center; overflow:hidden;
	box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.plano-mesa.forma-R .plano-mesa-cara{ border-radius:50%; }
.plano-mesa.forma-C .plano-mesa-cara{ border-radius:4px; }
.plano-mesa.forma-T .plano-mesa-cara{ border-radius:4px; inset:22% 6%; }

.plano-mesa-nombre{ padding:0 3px; line-height:1.15; word-break:break-word; }

.plano-mesa.seleccionada .plano-mesa-cara{
	border-color:#3c8dbc; background:#d3e7f5; box-shadow:0 0 0 2px rgba(60,141,188,.35);
}
.plano-mesa.activa .plano-mesa-cara{ border-color:#367fa9; border-width:3px; }
.plano-mesa.ocupada .plano-mesa-cara{ border-color:#f0ad4e; background:#fcf3e3; }
.plano-punto-ocupada{ font-size:6px; color:#f0ad4e; margin-top:2px; }

/* sillas dibujadas alrededor */
.plano-silla{
	position:absolute; width:20%; height:20%; max-width:13px; max-height:13px;
	background:#c4ccd4; border-radius:3px;
	left:50%; top:50%; margin-left:-10%; margin-top:-10%;
	transform-origin:center 250%;
}
.plano-silla.lado-arriba   { left:var(--pos); top:-2%;  margin-left:-6px; transform:none; }
.plano-silla.lado-abajo    { left:var(--pos); top:auto; bottom:-2%; margin-left:-6px; margin-top:0; transform:none; }
.plano-silla.lado-izquierda{ top:var(--pos);  left:-2%; margin-top:-6px; margin-left:0; transform:none; }
.plano-silla.lado-derecha  { top:var(--pos);  left:auto; right:-2%; margin-top:-6px; margin-left:0; transform:none; }

/* ---------- MUROS: paredes, columnas y divisiones ---------- */
.plano-muro{
	position:absolute; z-index:2;
	background:#8d949c;
	border:1px solid #6f767e; border-radius:2px;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
	cursor:grab; user-select:none; touch-action:none;
}
/* Una pared fina puede quedar de 6px: imposible de agarrar con el dedo.
   Esto le da un margen invisible para tomarla, sin engordar el dibujo. */
.plano-muro:after{
	content:""; position:absolute; top:-7px; right:-7px; bottom:-7px; left:-7px;
}
.plano-muro:active{ cursor:grabbing; }
.plano-muro:hover{ background:#7d848c; }
.plano-muro.seleccionado{
	background:#6d747c; border-color:#3c8dbc;
	box-shadow:0 0 0 2px rgba(60,141,188,.55);
}

/* ---------- PUNTO DE REFERENCIA: la caja ---------- */
.plano-ref{
	position:absolute; z-index:5;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:2px; cursor:grab; user-select:none; touch-action:none;
	background:repeating-linear-gradient(45deg,#4a5560,#4a5560 6px,#414c56 6px,#414c56 12px);
	border:2px solid #333c45; border-radius:3px; color:#fff;
	font-size:10px; font-weight:700; letter-spacing:.5px; text-align:center;
	box-shadow:0 2px 6px rgba(0,0,0,.28);
	overflow:hidden;
}
.plano-ref:active{ cursor:grabbing; }
.plano-ref .fa{ font-size:13px; opacity:.9; }
.plano-ref-nombre{ padding:0 3px; line-height:1.1; word-break:break-word; }
.plano-ref.seleccionada{ border-color:#3c8dbc; box-shadow:0 0 0 2px rgba(60,141,188,.5); }

.plano-barra-ref .plano-ref-input{ width:120px; height:26px; font-size:12px; padding:2px 7px; }

/* recuadro de seleccion multiple */
.plano-marco{
	position:absolute; border:1px dashed #3c8dbc; background:rgba(60,141,188,.12);
	pointer-events:none; z-index:50;
}

/* ---------- BARRA FLOTANTE ---------- */
.plano-barra-flotante{
	position:absolute; z-index:1100;
	display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	background:#fff; border:1px solid #c8cfd6; border-radius:4px;
	padding:7px 11px; box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.plano-barra-nombre{ font-weight:700; font-size:12px; color:#333; padding-right:6px; border-right:1px solid #eee; }
.plano-barra-nombre small{ color:#888; font-weight:normal; }
.plano-barra-grupo{ display:flex; align-items:center; gap:3px; }
.plano-barra-etiqueta{ font-size:11px; color:#888; margin-right:2px; }
.plano-barra-valor{ min-width:18px; text-align:center; font-size:12px; font-weight:700; }

/* ---------- DOMICILIOS ---------- */
.plano-domicilios{
	margin-top:12px; padding:10px 14px;
	background:#fff; border:1px solid #d2d6de; border-radius:3px;
}
.plano-domicilios-titulo{
	font-size:11px; font-weight:700; color:#666; letter-spacing:.5px;
	display:block; margin-bottom:8px;
}
.plano-domicilios-cuerpo{ display:flex; flex-wrap:wrap; margin-bottom:5px; }

/* ---------- PANTALLAS ANGOSTAS ---------- */
@media (max-width:900px){
	.plano-cuerpo{ flex-direction:column; }
	.plano-bandejas{ flex:1 1 auto; width:100%; flex-direction:row; }
	.plano-bandeja{ flex:1 1 50%; }
	.plano-lienzo-marco{ width:100%; }
	.plano-lienzo-scroll{ max-height:52vh; }
}

/* ==================================================================
   PLANO EN EL SALON (lo que ven admin, cajero y mesero cuando el
   sitio tiene el interruptor encendido). Nada de esto se aplica si
   el plano esta apagado: las clases ni siquiera se generan.
   ================================================================== */

.plano-s-oculto{ display:none !important; }

.plano-s-zona{ margin-bottom:14px; }
.plano-s-zona-titulo{
	font-size:12px; font-weight:700; color:#555; letter-spacing:.5px;
	padding:5px 2px; border-bottom:1px solid #e4e7ea; margin-bottom:8px;
}
/* El plano va centrado en el hueco disponible, no pegado arriba a la
   izquierda. El "safe" es para que, cuando el plano sea mas grande que el
   marco, el centrado no coma el comienzo y se pueda recorrer completo. */
.plano-s-scroll{
	overflow:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;
	display:flex; align-items:safe center; justify-content:safe center;
}
.plano-s-encuadre{ flex:0 0 auto; }

.plano-s-lienzo{
	position:relative;
	background-color:#fafbfc;
	background-image:
		linear-gradient(to right,  rgba(0,0,0,.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px);
	border:1px solid #e4e7ea; border-radius:3px;
}

/* muros en el salon: se ven, pero no se tocan */
.plano-s-muro{
	position:absolute; z-index:1;
	background:#8d949c; border:1px solid #6f767e; border-radius:2px;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
	pointer-events:none;
}

/* la caja / punto de referencia */
.plano-s-ref{
	position:absolute; z-index:1;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	background:repeating-linear-gradient(45deg,#4a5560,#4a5560 6px,#414c56 6px,#414c56 12px);
	border:2px solid #333c45; border-radius:3px; color:#fff;
	font-size:10px; font-weight:700; letter-spacing:.5px; text-align:center;
	overflow:hidden; pointer-events:none;
}
.plano-s-ref .fa{ font-size:12px; opacity:.9; }

/* mesa dibujada.
   Ojo: .mesa-card de custom-datatienda.css trae position:relative !important,
   min-height:120px y border-radius !important. Por eso el molde del plano NO
   usa esa clase y aqui se va con !important donde hace falta: el salon tiene
   que quedar calcado del editor. */
.plano-s-mesa{
	position:absolute !important; cursor:pointer; z-index:2;
	margin:0 !important; padding:0 !important;
}
.plano-s-cara{
	position:absolute !important;
	top:12% !important; right:12% !important; bottom:12% !important; left:12% !important;
	width:auto !important; height:auto !important; min-height:0 !important;
	margin:0 !important; padding:0 !important;
	display:flex !important; flex-direction:column; align-items:center; justify-content:center;
	background:#dfe6ec; color:#3a4149;
	border:2px solid rgba(0,0,0,.18); overflow:hidden;
	font-size:11px; line-height:1.15; text-align:center;
	box-shadow:0 1px 3px rgba(0,0,0,.12);
	transition:box-shadow .12s;
	transform:none !important;
}
.plano-s-mesa.plano-forma-R .plano-s-cara{ border-radius:50% !important; }
.plano-s-mesa.plano-forma-C .plano-s-cara{ border-radius:5px !important; }
.plano-s-mesa.plano-forma-T .plano-s-cara{
	border-radius:5px !important;
	top:22% !important; bottom:22% !important; left:6% !important; right:6% !important;
}
.plano-s-mesa:hover .plano-s-cara{ box-shadow:0 3px 10px rgba(0,0,0,.28); }

/* El tamano de la letra lo calcula planoAjustaMesa() en tender.js: se mide
   lo que cabe de verdad en el cuadro de la mesa. Aqui solo va el respaldo
   por si el JS no alcanzo a correr. Ojo: NO volver a dividir la letra por
   la escala a secas (--esc), que fue lo que hacia que el texto se montara
   en las mesas chicas. */
.plano-s-nombre{
	font-weight:700; padding:0 1px; line-height:1.05;
	font-size:11px;
	max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.plano-s-datos{
	display:flex; flex-direction:column; opacity:.92;
	font-size:9px; line-height:1.15; max-width:100%; overflow:hidden;
}
.plano-s-total{ font-weight:700; }
.plano-s-timer{ position:absolute; top:1px; right:3px; font-size:9px; }

/* Mesa chica (o celular): adentro va SOLO el nombre. Lo demas se consulta
   dejando el dedo puesto / pasando el mouse. El color sigue diciendo el
   estado, y la mesa por pagar conserva su franja pero sin el rotulo. */
.plano-s-solonombre .plano-s-datos,
.plano-s-solonombre .plano-s-timer,
.plano-s-apretado .plano-s-datos,
.plano-s-apretado .plano-s-timer{ display:none !important; }

.plano-s-solonombre .plano-s-cara.bg-aqua .plano-s-pagar{
	font-size:0; padding:0; height:26%; top:50%;
}
.plano-s-solonombre .plano-s-cara.bg-aqua .plano-s-pagar .fa{ font-size:0; }

/* aviso de mesa por pagar, propio del plano */
.plano-s-pagar{
	position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
	background:rgba(0,0,0,.75); color:#fff; z-index:5;
	font-size:9px; font-weight:700; padding:4px 2px; text-align:center;
	display:none;
}
.plano-s-cara.bg-aqua .plano-s-pagar{ display:block; }

/* sillas alrededor */
.plano-s-silla{
	position:absolute; width:18%; height:18%; max-width:12px; max-height:12px;
	background:#c4ccd4; border-radius:3px;
	left:50%; top:50%; margin-left:-9%; margin-top:-9%;
	transform-origin:center 250%;
}
.plano-s-silla.lado-arriba   { left:var(--pos); top:-2%;  margin-left:-5px; transform:none; }
.plano-s-silla.lado-abajo    { left:var(--pos); top:auto; bottom:-2%; margin-left:-5px; margin-top:0; transform:none; }
.plano-s-silla.lado-izquierda{ top:var(--pos);  left:-2%; margin-top:-5px; margin-left:0; transform:none; }
.plano-s-silla.lado-derecha  { top:var(--pos);  left:auto; right:-2%; margin-top:-5px; margin-left:0; transform:none; }

/* franja del pie: las mesas que no se dibujan */
.plano-s-otras{
	margin-top:10px; border:1px solid #d2d6de; border-radius:3px; background:#fff;
}
.plano-s-otras-titulo{
	padding:8px 12px; font-size:11px; font-weight:700; color:#666; letter-spacing:.5px;
	cursor:pointer; user-select:none;
}
.plano-s-otras-titulo .fa{ transition:transform .15s; display:inline-block; }
.plano-s-otras.abierta .plano-s-otras-titulo .fa{ transform:rotate(180deg); }
.plano-s-otras-cuerpo{ display:none; flex-wrap:wrap; gap:6px; padding:0 12px 12px; }
.plano-s-otras.abierta .plano-s-otras-cuerpo{ display:flex; }

.plano-s-chip{
	display:inline-flex; align-items:center; gap:5px;
	padding:8px 13px; font-size:13px; border-radius:4px;
	background:#f4f4f4; border:1px solid #ddd; color:#444;
	cursor:pointer; position:relative;
}
.plano-s-chip.ocupada{ font-weight:700; color:#fff; border-color:rgba(0,0,0,.15); }
.plano-s-chip b{ margin-left:3px; }

/* en pantalla de celular el plano se recorre con el dedo */
@media (max-width:768px){
	.plano-s-chip{ padding:10px 15px; font-size:14px; }
}

/* ---------- encuadre y zoom del salon ---------- */
.plano-s-barra{
	display:flex; justify-content:flex-end; align-items:center;
	padding:6px 2px 10px; gap:8px;
}
.plano-s-zoom{ display:flex; align-items:center; gap:5px; font-size:12px; color:#666; }
.plano-s-zoom span{ min-width:44px; text-align:center; }

/* el envoltorio reserva el hueco real que ocupa el lienzo ya escalado */
.plano-s-encuadre{ position:relative; overflow:hidden; }
.plano-s-lienzo{ transform-origin:0 0; }

/* en celular las mesas del plano necesitan texto legible y area tocable */
@media (max-width:768px){
	.plano-s-barra{ position:sticky; top:0; z-index:20; background:#ecf0f5; padding:8px 2px; }
	.plano-s-zoom .btn{ padding:7px 13px; }
	.plano-s-mesa{ touch-action:manipulation; }
}

/* ==================================================================
   ANUNCIO "dibuja el plano de tu salon"
   Va sobre el salon de cuadros y solo lo ve el administrador.
   ================================================================== */
.plano-anuncio{
	display:flex; align-items:center; gap:22px;
	margin:0 0 16px; padding:18px 22px;
	background:linear-gradient(120deg,#1e3c72 0%,#2a5298 45%,#3c8dbc 100%);
	border-radius:8px; color:#fff;
	box-shadow:0 6px 22px rgba(30,60,114,.28);
	position:relative; overflow:hidden;
}
/* un brillo suave en diagonal, para que no sea un rectangulo plano */
.plano-anuncio:before{
	content:""; position:absolute; top:-60%; right:-10%;
	width:420px; height:280%;
	background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,0));
	transform:rotate(18deg); pointer-events:none;
}

.plano-anuncio-texto{ flex:1 1 auto; min-width:0; position:relative; z-index:1; }

.plano-anuncio-nuevo{
	display:inline-block; margin-bottom:7px; padding:3px 10px;
	background:#f39c12; color:#fff; border-radius:11px;
	font-size:10px; font-weight:700; letter-spacing:1.2px;
}
.plano-anuncio h3{
	margin:0 0 6px; font-size:21px; font-weight:700; line-height:1.2; color:#fff;
}
.plano-anuncio p{
	margin:0 0 14px; font-size:13.5px; line-height:1.5;
	color:rgba(255,255,255,.92); max-width:560px;
}

.plano-anuncio-botones{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.plano-anuncio-btn{
	border:none; border-radius:5px; cursor:pointer;
	padding:11px 22px; font-size:14.5px; font-weight:700;
	background:#f39c12; color:#fff;
	box-shadow:0 3px 10px rgba(0,0,0,.22);
	transition:background .15s, transform .12s, box-shadow .15s;
}
.plano-anuncio-btn:hover{
	background:#e08e0b; transform:translateY(-1px);
	box-shadow:0 5px 14px rgba(0,0,0,.3);
}
.plano-anuncio-btn .fa{ margin-right:7px; }

/* al cajero, en vez del boton, se le dice quien lo dibuja */
.plano-anuncio-aviso{
	display:inline-flex; align-items:center; gap:8px;
	padding:10px 15px; border-radius:5px;
	background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
	font-size:13px; line-height:1.35; color:#fff; max-width:430px;
}
.plano-anuncio-aviso .fa{ font-size:16px; opacity:.9; flex:0 0 auto; }

.plano-anuncio-no{
	border:none; background:none; cursor:pointer; padding:6px 2px;
	font-size:12px; color:rgba(255,255,255,.72); text-align:left;
	text-decoration:underline; text-underline-offset:3px;
}
.plano-anuncio-no:hover{ color:#fff; }

.plano-anuncio-video{
	flex:0 0 auto; width:42%; max-width:520px; position:relative; z-index:1;
}
.plano-anuncio-video video{
	display:block; width:100%; height:auto;
	border-radius:6px; background:#0d1b2a;
	box-shadow:0 4px 16px rgba(0,0,0,.34);
}

/* en pantallas angostas se apila y el video va primero */
@media (max-width:900px){
	.plano-anuncio{ flex-direction:column-reverse; align-items:stretch; gap:14px; padding:16px; }
	.plano-anuncio-video{ width:100%; max-width:none; }
	.plano-anuncio h3{ font-size:18px; }
	.plano-anuncio p{ font-size:13px; }
	.plano-anuncio-btn{ width:100%; padding:13px 18px; }
	.plano-anuncio-no{ text-align:center; width:100%; }
}

/* ==================================================================
   PANTALLA COMPLETA
   El plano se sale de la plantilla (cabecera, menu lateral, margenes)
   y se queda con toda la pantalla. Solo se activa con el boton; si no,
   nada de esto se aplica.
   ================================================================== */
body.plano-full{ overflow:hidden !important; }

body.plano-full #df-salon{
	position:fixed !important; top:0; right:0; bottom:0; left:0;
	z-index:1040; margin:0 !important; padding:6px 8px 8px !important;
	background:#eef1f6; overflow:hidden;
	display:flex; flex-direction:column;
}
body.plano-full #plano_salon_zonas{ flex:1 1 auto; min-height:0; overflow:auto; }
body.plano-full .plano-s-barra{
	position:sticky; top:0; z-index:30; background:#eef1f6;
	padding:4px 2px 8px; flex:0 0 auto;
}
body.plano-full .plano-s-zona{ margin-bottom:8px; }
body.plano-full .plano-s-lienzo{ box-shadow:0 2px 14px rgba(0,0,0,.10); }

/* el boton de pantalla completa se ve mas en el celular */
@media (max-width:768px){
	.plano-s-btn-full{ padding:7px 15px !important; }
}

/* ---------- arrastre del fondo (computador) ---------- */
.plano-s-lienzo{ cursor:grab; }
.plano-s-scroll.arrastrando{ cursor:grabbing; user-select:none; }
.plano-s-scroll.arrastrando .plano-s-lienzo{ cursor:grabbing; }
.plano-s-mesa{ cursor:pointer; }

/* realce de la mesa bajo el cursor */
.plano-s-mesa:hover{ z-index:6; }
.plano-s-mesa:hover .plano-s-cara{
	box-shadow:0 4px 14px rgba(0,0,0,.32);
	outline:2px solid rgba(60,141,188,.85); outline-offset:-2px;
}

/* ==================================================================
   CUADRITO DE INFORMACION
   Sale al pasar el mouse por una mesa, o al dejar el dedo puesto en
   el celular. Se alimenta de los data-i-* del molde: sin consultas.
   ================================================================== */
.plano-s-info{
	position:fixed; z-index:2000; display:none;
	min-width:186px; max-width:270px;
	background:#fff; border:1px solid #c3ccd6; border-radius:5px;
	box-shadow:0 6px 22px rgba(0,0,0,.24);
	font-size:12px; color:#3a4149; overflow:hidden;
	pointer-events:none;   /* nunca se interpone entre el dedo y la mesa */
}
.plano-s-info-cab{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:7px 11px; font-size:13px; color:#fff; background:#5b6b7c;
}
.plano-s-info-cab b{ font-weight:700; word-break:break-word; }
.plano-s-info-cab span{ font-size:10px; letter-spacing:.4px; text-transform:uppercase; opacity:.95; white-space:nowrap; }
.plano-s-info-cab.libre    { background:#8a9199; }
.plano-s-info-cab.abierto  { background:#e08e0b; }
.plano-s-info-cab.sinenviar{ background:#c9302c; }
.plano-s-info-cab.pagar    { background:#00a4bd; }

/* la plata, que es lo que mas se mira, va destacada bajo el titulo */
.plano-s-info-plata{
	display:flex; align-items:baseline; justify-content:space-between; gap:10px;
	padding:8px 11px; background:#f7f9fb; border-bottom:1px solid #e7ebf0;
}
.plano-s-info-plata-et{
	font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:#8a929b;
}
.plano-s-info-plata-va{
	font-size:19px; font-weight:700; color:#1f7a3d; line-height:1.1;
	margin-left:auto; word-break:break-all;
}
.plano-s-info-plata.vacia .plano-s-info-plata-va{
	font-size:13px; font-weight:600; color:#98a2ad; margin:0 auto;
}

.plano-s-info-cuerpo{ padding:7px 11px 9px; }
.plano-s-info-fila{
	display:flex; align-items:baseline; gap:7px;
	padding:3px 0; line-height:1.25;
}
.plano-s-info-fila + .plano-s-info-fila{ border-top:1px solid #f0f2f5; }
.plano-s-info-fila .fa{ width:13px; text-align:center; color:#98a2ad; flex:0 0 13px; }
.plano-s-info-et{ color:#8a929b; flex:0 0 auto; }
.plano-s-info-va{ margin-left:auto; text-align:right; font-weight:600; word-break:break-word; }