/* ════════════════════════════════════════════════════════════════════════
   Impecable · la administración, con la imagen del No Compra (13/10/2026).

   Pedido de Mauricio: "se tendría que ver la pantalla completa en la
   computadora", como las Estadísticas del CRM. Usa los colores y las
   tarjetas de estilos.css (fondo claro, tarjetas negras, claro y oscuro) y
   un menú a la izquierda como el del CRM.

   Todo va adentro de .imp: varias clases de la administración se llaman
   igual que otras del No Compra (campo, vacio, marca) y no tienen que
   pisarse. Las pastillas de estado son .est y no .chip (en el No Compra,
   .chip es el botón redondeado de los períodos, que acá también se usa).
   ════════════════════════════════════════════════════════════════════════ */

.hoja.imp { max-width: none; padding-bottom: 48px; }
@media (min-width: 900px) { .hoja.imp { padding: 22px 26px 48px; } }

/* ── El menú y el cuerpo ── */
.imp-grid { display: grid; gap: 18px; }
/* Sin esto, una tabla ancha estira la columna y la página se sale de costado en el celular. */
.imp-grid > *, .imp-cuerpo { min-width: 0; }
@media (min-width: 1000px) {
  .imp-grid { grid-template-columns: var(--panel-ancho) minmax(0, 1fr); align-items: start; transition: grid-template-columns .2s var(--curva); }
  .imp-grid.menu-chico { grid-template-columns: var(--panel-chico) minmax(0, 1fr); }
}
.imp-menu {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sombra);
}
@media (min-width: 1000px) { .imp-menu { position: sticky; top: 16px; } }
.imp-menu-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 0 6px 10px; font: 700 12px var(--sans); color: var(--txt-3); text-transform: uppercase; letter-spacing: .5px; }
.imp-menu-cab > span { white-space: nowrap; overflow: hidden; }
/* Achicado (interfaz.js): sólo los íconos; el nombre de cada sección queda en el title. */
@media (min-width: 1000px) {
  .menu-chico .imp-menu { padding-left: 6px; padding-right: 6px; }
  .menu-chico .imp-menu-cab { justify-content: center; padding: 0 0 6px; }
  .menu-chico .imp-menu-cab > span, .menu-chico .imp-item > span, .menu-chico .imp-quien { display: none; }
  .menu-chico .imp-item { justify-content: center; padding: 0; }
}
.imp-item {
  display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 12px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--txt-2);
  font: 600 14.5px var(--sans); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.imp-item svg { width: 19px; height: 19px; flex: none; }
.imp-item:hover { background: var(--surface-2); color: var(--txt); }
.imp-item.activa { background: var(--surface-3); color: var(--txt); box-shadow: inset 3px 0 0 var(--acc); }
.imp-menu-pie { margin-top: 8px; padding: 10px 4px 2px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.imp-quien { padding: 0 8px 6px; font-size: 12.5px; color: var(--txt-3); line-height: 1.35; }
.imp-quien b { display: block; color: var(--txt); font-size: 13.5px; }
/* En el celular el menú es una tira que se desliza. */
@media (max-width: 999px) {
  .imp-menu { flex-direction: row; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .imp-menu::-webkit-scrollbar { display: none; }
  .imp-menu-cab, .imp-quien { display: none; }
  .imp-menu .plegar-panel { display: none; }
  .imp-menu-pie { display: contents; }
  .imp-item.activa { box-shadow: inset 0 -3px 0 var(--acc); }
}

/* ── La cabecera de cada vista ── */
.imp-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.imp-cab h2 { margin: 0; font: 700 23px/1.15 var(--display); letter-spacing: -.4px; color: var(--txt); }
.imp-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--txt-3); }
.imp-cab-der { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.imp select, .imp input, .imp textarea { font-family: var(--sans); }
.imp-sel {
  min-height: 42px; padding: 0 36px 0 12px; border: 1px solid var(--line-campo); border-radius: var(--r-sm);
  background: var(--campo); color: var(--txt); font: 600 14px var(--sans);
}

/* ── Números: las tarjetas negras del No Compra (.kpi de estilos.css) ── */
.imp-kpis, .imp .numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0 0 18px; }
/* En el celular, de a dos (como las tarjetas del No Compra). */
@media (max-width: 599px) {
  .imp-kpis, .imp .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imp .kpi .kpi-n, .imp .numero b { font-size: 22px; }
}
.imp .numero {
  --txt: #F4F2EC; --txt-2: #D2CDC3; --txt-3: #B8B2A7;
  background: var(--tablero-negro, var(--platino)); color: #F4F2EC;
  border: 1px solid rgba(255, 255, 255, .10); border-left: 3px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-sm); padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 30px -14px rgba(0, 0, 0, .9);
}
.imp .numero b { display: block; font: 700 25px/1.1 var(--display); letter-spacing: -.6px; margin: 3px 0 2px; }
.imp .numero span { font-size: 12px; font-weight: 600; color: #D2CDC3; }
.imp .numero span + b + span { font-weight: 500; color: #B8B2A7; font-size: 11.5px; }
.imp .kpi .kpi-n small { font-size: 15px; font-weight: 600; letter-spacing: 0; color: #D2CDC3; }
.imp .kpi.es-ok { border-left-color: #8FD1AE; }
.imp .kpi.es-pend { border-left-color: #F0C66A; }
.imp .kpi.es-mal { border-left-color: #FF9AA0; }
.imp .kpi.es-mal .kpi-n { color: #FF9AA0; }

/* ── Botones de período y de vista: los .chip del No Compra ── */
.imp .solapas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.imp .solapas button {
  min-height: 38px; padding: 0 14px; border: 1px solid var(--chip-line); border-radius: var(--r-pill);
  background: var(--chip); color: var(--txt); font: 600 13.5px var(--sans); cursor: pointer;
}
.imp .solapas button:hover { border-color: var(--acc); }
.imp .solapas button.activa { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); box-shadow: var(--glow); }
.imp-filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 14px; }
.imp-filtros .solapas { margin: 0; }
.imp-filtros .imp-sel { min-height: 38px; width: auto; min-width: 170px; }

/* ── Textos ── */
.imp .seccion { margin: 22px 0 10px; font: 700 12.5px var(--sans); text-transform: uppercase; letter-spacing: .6px; color: var(--txt-3); }
.imp .bajada { margin: 0 0 14px; color: var(--txt-2); font-size: 14px; }
.imp .cargando { padding: 40px 0; text-align: center; color: var(--txt-3); }
.imp .vacio { padding: 26px 14px; text-align: center; color: var(--txt-3); border: 1px dashed var(--line-alta); border-radius: var(--r); background: none; font-size: 14px; }
.imp .nota { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--info-soft); color: var(--txt-2); font-size: 14px; }
.imp .nota.alerta { background: var(--warn-soft); color: var(--warn-txt); }
.imp .rojo { color: var(--bad-txt); font-weight: 700; }

/* ── Pastillas de estado (niveles, cajas, tareas) ── */
.imp .est {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-pill);
  font: 600 12px/1.2 var(--sans); white-space: nowrap; background: var(--surface-2); color: var(--txt-2);
}
.imp .est.nivel-impecable { background: var(--oro-soft); color: var(--oro-txt); }
.imp .est.nivel-bien, .imp .est.listo { background: var(--ok-soft); color: var(--ok-txt); }
.imp .est.nivel-a_mejorar, .imp .est.corregir, .imp .est.sorpresa { background: var(--warn-soft); color: var(--warn-txt); }
.imp .est.nivel-fuera_de_estandar, .imp .est.vencido { background: var(--bad-soft); color: var(--bad-txt); }
.imp .info { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ── Botones ── */
.imp .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto;
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line-alta); border-radius: var(--r-sm);
  background: var(--surface); color: var(--txt); font: 600 14px var(--sans); text-decoration: none; cursor: pointer;
}
.imp .boton:hover { border-color: var(--acc); }
.imp .boton.lima { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.imp .boton.chico { min-height: 38px; padding: 0 12px; font-size: 13.5px; }
.imp .boton:disabled { opacity: .5; cursor: default; }
.imp .botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Tablas ── */
.imp .desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sombra); }
.imp .tabla-datos { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--txt); }
.imp .tabla-datos th, .imp .tabla-datos td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.imp .tabla-datos thead th { font-size: 12px; font-weight: 700; color: var(--txt-3); background: var(--surface-2); }
.imp .tabla-datos tbody tr:last-child td { border-bottom: 0; }
.imp .tabla-datos td.n, .imp .tabla-datos th.n { text-align: right; white-space: nowrap; }
.imp .tabla-datos tr[data-caja]:hover, .imp .tabla-datos tr[data-ir]:hover { background: var(--surface-2); }

/* ── Panorama: los locales semana a semana ── */
.imp-pano th:first-child, .imp-pano td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 150px; }
.imp-pano thead th:first-child { background: var(--surface-2); }
.imp-pano td.sem { text-align: center; min-width: 78px; }
.imp-pano td.sem small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--txt-3); }
.imp-pano tr[data-ir] { cursor: pointer; }
.imp-pano tr.apagado td { color: var(--txt-3); }
.imp-pano .local b { font-size: 14px; }
.imp-pano .local small { display: block; color: var(--txt-3); font-size: 11.5px; }

/* ── El gráfico de un local ── */
.imp-grafico { background: var(--tablero-negro, var(--platino)); color: #F4F2EC; border-radius: var(--r); padding: 16px 18px 12px; margin: 0 0 18px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9); }
.imp-grafico h3 { margin: 0 0 8px; font: 600 14px var(--sans); color: #D2CDC3; }
.imp-grafico svg { width: 100%; height: auto; display: block; }
.imp-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12px; color: #D2CDC3; }
.imp-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
/* En Por local va al final, cerrado y más chico: lo principal es el croquis (15/10). */
.imp-grafico-det { margin: 22px 0 0; }
.imp-grafico-det > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; list-style: none; cursor: pointer;
                             border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--txt-2); font: 600 13.5px var(--sans); }
.imp-grafico-det > summary::-webkit-details-marker { display: none; }
.imp-grafico-det > summary::before { content: '▸'; color: var(--txt-3); }
.imp-grafico-det[open] > summary::before { content: '▾'; }
.imp-grafico-det > summary:hover { color: var(--txt); }
.imp-grafico-det .imp-grafico { max-width: 720px; margin: 12px 0 0; }

/* ── Módulos del local y fotos ── */
.imp .grilla-local, .imp-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.imp-fotos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.imp .tarjeta-modulo, .imp-foto {
  display: grid; gap: 6px; padding: 0 0 11px; overflow: hidden; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sombra);
  color: var(--txt); font: inherit;
}
.imp .tarjeta-modulo:hover, .imp-foto:hover { border-color: var(--line-alta); }
.imp .tarjeta-modulo img, .imp .tarjeta-modulo .sin-foto, .imp-foto img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #111110; display: grid; place-items: center; color: #B8B2A7; font-size: 13px;
}
.imp .tarjeta-modulo > b, .imp .tarjeta-modulo > small, .imp .tarjeta-modulo > .info,
.imp-foto > b, .imp-foto > small, .imp-foto > .info { padding: 0 11px; }
.imp .tarjeta-modulo > small, .imp-foto > small { color: var(--txt-3); font-size: 12px; line-height: 1.35; }
.imp .tarjeta-modulo.gris { opacity: .6; }

/* ── La ventana (un módulo, una foto, una caja) ── */
.ventana-fondo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(10, 10, 9, .62); }
.ventana {
  width: min(860px, 100%); max-height: 92vh; overflow: auto; padding: 20px;
  background: var(--surface); color: var(--txt); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sombra-alta);
  font-family: var(--sans);
}
.ventana h1 { margin: 0 0 4px; font: 700 21px var(--display); }
.ventana .bajada { margin: 0 0 12px; color: var(--txt-2); font-size: 14px; }
.ventana .seccion { margin: 18px 0 8px; font: 700 12.5px var(--sans); text-transform: uppercase; letter-spacing: .6px; color: var(--txt-3); }
.ventana .vacio { padding: 22px; text-align: center; color: var(--txt-3); border: 1px dashed var(--line-alta); border-radius: var(--r-sm); }
.ventana .nota { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--info-soft); color: var(--txt-2); font-size: 14px; }
.ventana .nota.alerta { background: var(--warn-soft); color: var(--warn-txt); }
.ventana .boton { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-alta); border-radius: var(--r-sm); background: var(--surface); color: var(--txt); font: 600 14px var(--sans); cursor: pointer; }
.ventana .foto-grande { width: 100%; max-height: 64vh; object-fit: contain; background: #111110; border-radius: var(--r-sm); display: block; }
.ventana .est { display: inline-flex; padding: 4px 9px; border-radius: var(--r-pill); font: 600 12px var(--sans); background: var(--surface-2); color: var(--txt-2); }
.ventana .est.nivel-impecable { background: var(--oro-soft); color: var(--oro-txt); }
.ventana .est.nivel-bien { background: var(--ok-soft); color: var(--ok-txt); }
.ventana .est.nivel-a_mejorar { background: var(--warn-soft); color: var(--warn-txt); }
.ventana .est.nivel-fuera_de_estandar { background: var(--bad-soft); color: var(--bad-txt); }
.ventana ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--txt-2); }
.historia { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.foto-chica { margin: 0; }
.foto-chica img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: var(--r-sm); background: #111110; cursor: zoom-in; }
.foto-chica figcaption { margin-top: 4px; font-size: 12px; color: var(--txt-3); }
/* Un día de caja: los números y las fotos del cierre grandes, una debajo de la otra. */
.ventana .caja-dia { width: 100%; border-collapse: collapse; font-size: 14px; }
.ventana .caja-dia th, .ventana .caja-dia td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.ventana .caja-dia th { font-size: 12px; color: var(--txt-3); background: var(--surface-2); }
.ventana .caja-dia .n { text-align: right; white-space: nowrap; }
.fotos-cierre { display: grid; gap: 22px; }
.foto-cierre img { aspect-ratio: auto; max-height: 72vh; }
.foto-cierre figcaption { margin: 0 0 6px; font-size: 14px; color: var(--txt-2); }
.foto-cierre figcaption b { font-size: 15px; color: var(--txt); }
.lectura-ia { margin-top: 8px; font-size: 14px; color: var(--txt-2); }
.lectura-ia ul { margin: 4px 0 0; }
.lectura-ia .boton.chico { min-height: 36px; padding: 0 12px; margin-left: 6px; font-size: 13px; }
/* (SQL 122) Falta cargar un número, y los que cargó la IA desde la foto. */
.falta-cargar { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn-txt); font: 700 12px var(--sans); }
.de-ia { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--info-soft); color: var(--txt-2); font: 700 10.5px var(--sans); vertical-align: 1px; }
.ventana .bajada-chica { margin: 6px 0 0; font-size: 13px; color: var(--txt-3); }

/* ── El editor de los ajustes ── */
.imp .renglon {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-bottom: 10px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.imp .campo { display: grid; gap: 5px; margin: 0 0 12px; }
.imp .campo > span { font: 600 12.5px var(--sans); color: var(--txt-2); text-transform: none; letter-spacing: 0; }
.imp .campo input, .imp .campo select, .imp .campo textarea {
  width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line-campo); border-radius: var(--r-sm);
  background: var(--campo); color: var(--txt); font: 500 14px var(--sans); box-sizing: border-box;
}
.imp .renglon .campo { margin: 0; }
.imp .renglon .campo.c-chico { width: 90px; }
.imp .renglon .campo.c-medio { width: 170px; }
.imp .renglon .campo.c-grande { flex: 1 1 260px; }
.imp .renglon .campo.c-bool { display: flex; flex-direction: row; align-items: center; gap: 7px; min-height: 42px; font-size: 13.5px; color: var(--txt-2); }
.imp .renglon .campo.c-bool input { width: 19px; height: 19px; min-height: 0; accent-color: var(--acc); }
.imp .renglon .acciones-renglon { display: flex; gap: 6px; margin-left: auto; }
.imp .dias { display: flex; gap: 4px; }
.imp .dias label { display: grid; place-items: center; width: 34px; height: 42px; border: 1px solid var(--line-campo); border-radius: var(--r-sm); background: var(--campo); color: var(--txt-2); font: 700 13px var(--sans); cursor: pointer; }
.imp .dias input { display: none; }
.imp .dias label.si { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.imp .ref-mini { width: 54px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }

/* ── Entrar (sin sesión) ── */
.imp-entrar { max-width: 520px; margin: 40px auto; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sombra); }
.imp-entrar h2 { margin: 0 0 6px; font: 700 22px var(--display); }
.imp-entrar p { margin: 0 0 16px; color: var(--txt-2); font-size: 14.5px; }

/* ── El cartel (avisos cortos) ── */
.imp-cartel {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 70; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: var(--r-pill); background: var(--acc); color: var(--acc-ink);
  font: 600 14px var(--sans); box-shadow: var(--sombra-alta);
}
@media (max-width: 899px) { .imp-cartel { bottom: calc(var(--nav, 54px) + 18px); } }

/* Los locales sin módulos, nombrados abajo del Panorama. */
.imp-enlace { padding: 0; border: 0; background: none; color: var(--txt); font: 600 14px var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* El mapa del local (SQL 99) */
.imp-mapa { margin: 0 0 16px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sombra); color: var(--txt-2); }
.imp-mapa-acc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.imp-mapa-dibujos { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1100px) { .imp-mapa-dibujos { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.imp .mapa-svg, .ventana .mapa-svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.imp .mapa-svg.cuadrado { max-width: 620px; }
.imp .mapa-svg.deposito { max-width: 440px; }
.imp .mapa-svg .mapa-mod { cursor: pointer; }
.imp .mapa-ley, .ventana .mapa-ley { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 12px 0 0; }
.imp .mapa-sec, .ventana .mapa-sec { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--txt); font: 500 13.5px var(--sans); text-align: left; }
.imp button.mapa-sec, .ventana button.mapa-sec { cursor: pointer; }
.imp button.mapa-sec:hover, .ventana button.mapa-sec:hover { border-color: var(--acc); }
.ventana .mapa-sec.actual { border: 2px solid var(--acc); }
.imp .mapa-sec i, .ventana .mapa-sec i { width: 16px; height: 16px; border-radius: 5px; flex: none; }
.imp .mapa-sec small, .ventana .mapa-sec small { display: block; margin-top: 2px; color: var(--txt-3); font-size: 12px; }
.imp textarea { resize: vertical; }
.imp-mapa-vista { margin: 0 0 14px; padding: 10px; border: 1px dashed var(--line-alta); border-radius: var(--r-sm); color: var(--txt-2); }
.ventana .imp-mapa-vista .mapa-svg { width: 100%; max-width: none; height: 300px; }
/* Los módulos del centro, en el editor de la forma: número, nombre y "Sacar". */
.imp-islas { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.imp-islas .bajada { margin: 0; }
.imp-isla { display: flex; align-items: center; gap: 8px; }
.imp-isla b { flex: 0 0 auto; min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line-campo); font: 700 14px var(--sans); color: var(--txt); }
.ventana .imp-isla input { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line-campo); border-radius: var(--r-sm); background: var(--campo); color: var(--txt); font: 500 14px var(--sans); box-sizing: border-box; }
#eIslaMas { margin: 0 0 6px; }
/* Los formularios adentro de las ventanas */
.ventana .campo { display: grid; gap: 5px; margin: 0 0 12px; }
.ventana .campo > span { font: 600 12.5px var(--sans); color: var(--txt-2); }
.ventana .campo input, .ventana .campo select, .ventana .campo textarea { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line-campo); border-radius: var(--r-sm); background: var(--campo); color: var(--txt); font: 500 14px var(--sans); box-sizing: border-box; }
.ventana .renglon { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 0 0 10px; }
.ventana .renglon .campo { margin: 0; }
.ventana .renglon .campo.c-chico { width: 110px; }
.ventana .renglon .campo.c-medio { width: 230px; }
.ventana .renglon .campo.c-grande { flex: 1 1 260px; }
.ventana .boton.lima { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }

/* Productos testigo (SQL 102) */
.imp-testigo-locales { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 0 0 14px; }
.imp-testigo-local { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--txt);
                     font: 600 13.5px var(--sans); text-align: left; cursor: pointer; }
.imp-testigo-local small { color: var(--txt-3); font-weight: 500; font-size: 12px; }
.imp-testigo-local.bien small { color: var(--ok-txt); }
.imp-testigo-local.mal small { color: var(--bad-txt); }
.imp-testigo-local.actual { border: 2px solid var(--acc); }
.imp-locales { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; margin: 6px 0 10px; }
.imp-check { display: flex; align-items: center; gap: 8px; font: 500 14px var(--sans); color: var(--txt); cursor: pointer; }
.imp-check input { width: 18px; height: 18px; }
.ventana .imp-prod { margin-bottom: 6px; }
.imp-video { display: block; width: 100%; max-height: 70vh; background: #000; border-radius: var(--r-sm); }
.ventana .imp-mapa-vista .mapa-svg.deposito { height: auto; max-height: 230px; margin-top: 10px; }
.imp .mapa-nombres { margin: 10px 0 0; font: 500 13px var(--sans); line-height: 1.5; color: var(--txt-2); }

/* El croquis (SQL 112): grande para tocar cada lugar; lo del centro y lo fijo se arrastran. */
.ventana .imp-mapa-vista.croquis .mapa-svg { height: auto; max-height: 76vh; }
.ventana .imp-mapa-vista.croquis .mapa-svg.deposito { max-height: 60vh; margin-top: 0; }
.ventana .mapa-toque { cursor: pointer; }
.ventana .mapa-toque:hover { fill: rgba(198, 244, 50, .2); }
.ventana .mapa-toque.arrastrable, .ventana .mapa-svg [data-fijo] { cursor: grab; touch-action: none; }
.ventana .mapa-svg [data-puerta], .ventana .mapa-marca-puerta { cursor: pointer; }
.imp-lugar-ops { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
#eFijoMas { margin: 0 0 6px; }

/* Etapa E: lo que se arrastra se levanta con sombra, rebota al soltarlo y se eleva al pasar el mouse. */
.ventana .mapa-svg .levantado { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35)); }
.ventana .mapa-svg .mapa-rebota { animation: mapaRebota .34s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
@keyframes mapaRebota { 0% { transform: scale(1.07); } 55% { transform: scale(.97); } 100% { transform: scale(1); } }
.ventana .mapa-svg .mapa-mod:has(+ .mapa-toque.arrastrable:hover), .ventana .mapa-svg [data-fijo]:hover { filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .3)); }
@media (prefers-reduced-motion: reduce) { .ventana .mapa-svg .mapa-rebota { animation: none; } }

/* Las piezas del croquis (14/10): botones con su dibujito. */
.imp-piezas .boton { display: inline-flex; align-items: center; gap: 8px; }
.pieza-ico { width: 34px; height: 24px; flex: none; }
.imp-isla .pieza-ico { width: 40px; height: 28px; }
@media (max-width: 560px) { .imp-isla .pieza-ico { display: none; } }
/* El ancho de la entrada, al lado de "Mover la entrada". */
.imp-ancho-puerta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.imp-ancho-puerta > span { font: 600 13px var(--sans); color: var(--txt-2); margin: 0 2px 0 6px; }
.imp-ancho-puerta[hidden] { display: none; }
/* Arrastrar un lugar de una pared (14/10): se agarra, y el lugar donde va a caer se marca en lima. */
.ventana .mapa-toque[data-lugar] { cursor: grab; }
.ventana .mapa-toque[data-lugar].levantado { cursor: grabbing; }
.ventana .mapa-svg .mapa-destino { fill: rgba(198, 244, 50, .32); stroke: #C6F432; stroke-width: 3; stroke-dasharray: 6 4; }
/* Con el dedo, sobre un lugar de una pared la pantalla no se desliza (se arrastra manteniéndolo apretado; para
   desplazar, se toca el piso o los costados). El lugar elegido para "Cambiar de lugar", marcado. */
.ventana .mapa-svg [data-lugar] { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ventana .mapa-svg .mapa-origen { fill: rgba(198, 244, 50, .38); stroke: #C6F432; stroke-width: 3.5; animation: mapaLatido 1.1s ease-in-out infinite; }
@keyframes mapaLatido { 50% { fill: rgba(198, 244, 50, .14); } }
@media (prefers-reduced-motion: reduce) { .ventana .mapa-svg .mapa-origen { animation: none; } }
.imp .ver-app-admin { font: 600 12.5px var(--sans); color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
/* Arrastrar un mueble desde la bandeja hasta el dibujo (14/10). */
.imp-piezas [data-pieza] { touch-action: none; cursor: grab; }
.pieza-fantasma { position: fixed; z-index: 200; width: 96px; pointer-events: none; transform: translate(-50%, -50%) scale(1.25); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.pieza-fantasma .pieza-ico { width: 96px; height: 64px; }
.ventana .imp-mapa-vista.soltar-aca { border-color: #C6F432; border-style: solid; box-shadow: 0 0 0 3px rgba(198, 244, 50, .35); }

/* ═══ Cajas: el cierre del mes (SQL 115) ═══════════════════════════════ */
.imp .cajas-vista { margin-bottom: 8px; }
.imp .cierre-mes { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sombra); }
.imp .cierre-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; font-size: 15px; }
.imp .cierre-obs { margin: 4px 0; font-size: 15px; font-weight: 600; color: var(--txt); }
.imp .cierre-quien { margin: 4px 0 0; font-size: 13.5px; color: var(--txt-2); }
.imp .cierre-mes .botones { margin-top: 10px; }
.imp .solapas button .mes-ok { font-style: normal; font-weight: 800; color: var(--ok-txt); margin-left: 3px; }
.imp .solapas button.activa .mes-ok { color: inherit; }
.imp .solapas button .mes-falta { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--warn-txt); vertical-align: middle; }
.ventana .cierre-medios { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 12px; }
.ventana .cierre-medios > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; color: var(--txt-2); }
.ventana .cierre-medios b { font-size: 14px; color: var(--txt); }
.ventana .rojo { color: var(--bad-txt); font-weight: 700; }
.ventana .cierre-historia > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ventana .cierre-historia > div:last-child { border-bottom: 0; }
.ventana .cierre-historia span { margin-left: 8px; font-size: 13px; color: var(--txt-3); }
.ventana .cierre-historia p { margin: 4px 0 0; font-size: 14px; }
.imp .cierre-titulo { margin: 24px 0 10px; font: 700 17px var(--display); color: var(--txt); }
.imp .cajas-meses td.obs { min-width: 110px; white-space: normal; color: var(--txt-2); }
.imp .cajas-meses th, .imp .cajas-meses td { padding: 9px 10px; }
.imp .cajas-meses td.n b { display: block; font-size: 14px; }
.imp .cajas-meses td.n small, .imp .cajas-meses th small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--txt-3); }
.imp .cajas-meses td.cierre-est { white-space: nowrap; }
.imp .cajas-meses td.cierre-est small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--txt-3); }
.imp .cajas-meses tr.mes-activo td { background: var(--surface-2); }

/* ── Cajas: cada medio de pago, un bloque (14/10, Mauricio: "segmentame bien eso … un color
   delicado para diferenciar los segmentos"). Un fondo apenas teñido, una rayita de su color
   arriba del título y una línea que lo separa del siguiente. Sirve en claro y en oscuro. ── */
.imp .tabla-cajas { --g-mp: 0, 158, 227; --g-tarjeta: 124, 92, 255; --g-gocuotas: 38, 166, 110; --g-efectivo: 214, 150, 30; }
.imp .tabla-cajas .g-mp       { background: rgba(var(--g-mp), .045); }
.imp .tabla-cajas .g-tarjeta  { background: rgba(var(--g-tarjeta), .045); }
.imp .tabla-cajas .g-gocuotas { background: rgba(var(--g-gocuotas), .045); }
.imp .tabla-cajas .g-efectivo { background: rgba(var(--g-efectivo), .055); }
.imp .tabla-cajas thead th.g-mp       { background: rgba(var(--g-mp), .10); }
.imp .tabla-cajas thead th.g-tarjeta  { background: rgba(var(--g-tarjeta), .10); }
.imp .tabla-cajas thead th.g-gocuotas { background: rgba(var(--g-gocuotas), .10); }
.imp .tabla-cajas thead th.g-efectivo { background: rgba(var(--g-efectivo), .12); }
.imp .tabla-cajas th.grupo { text-align: center; color: var(--txt); font-size: 13px; letter-spacing: .2px; }
.imp .tabla-cajas th.grupo small { text-align: center; }
.imp .tabla-cajas th.grupo.g-mp       { box-shadow: inset 0 3px 0 rgb(var(--g-mp)); }
.imp .tabla-cajas th.grupo.g-tarjeta  { box-shadow: inset 0 3px 0 rgb(var(--g-tarjeta)); }
.imp .tabla-cajas th.grupo.g-gocuotas { box-shadow: inset 0 3px 0 rgb(var(--g-gocuotas)); }
.imp .tabla-cajas th.grupo.g-efectivo { box-shadow: inset 0 3px 0 rgb(var(--g-efectivo)); }
.imp .tabla-cajas .ini { border-left: 1px solid var(--line-alta); }
.imp .tabla-cajas tr.fila-total td { font-weight: 700; border-top: 2px solid var(--line-alta); }
.imp .tabla-cajas.cajas-meses td.n { text-align: center; }
/* El mes que se está viendo: una rayita a la izquierda (el fondo de cada medio queda). */
.imp .tabla-cajas.cajas-meses tr.mes-activo td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
.imp .a-cargo td:last-child { white-space: normal; color: var(--txt-2); }

/* ═══ Productos testigo: las semanas y las estadísticas (SQL 117) ═════════ */
.imp .testigo-vista { margin-bottom: 10px; }
/* La semana y el período: el selector común (interfaz.js, .per en estilos.css). */
.imp .testigo-semanas { margin: 0 0 12px; }
.imp .cajas-per { margin: 2px 0 14px; }
.imp .testigo-filtros .bajada-chica { flex-basis: 100%; margin: 0; }
.imp .testigo-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 14px; }
.imp .testigo-filtros .campo { margin: 0; min-width: 220px; }
.imp .barra-pct { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.imp .barra-pct i { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.imp .barra-pct s { display: block; height: 100%; background: var(--warn-txt); text-decoration: none; }
.imp .barra-pct.pct-mal s { background: var(--bad-txt); }
.imp .barra-pct b { min-width: 40px; text-align: right; font-size: 13.5px; }
.imp .pct-bien { color: var(--ok-txt); }
.imp .pct-medio { color: var(--warn-txt); font-weight: 600; }
.imp .pct-mal { color: var(--bad-txt); font-weight: 700; }
.imp .testigo-ranking tr.sin-datos td { color: var(--txt-3); }
.imp .testigo-meses tr.total td { background: var(--surface-2); }
.imp .bajada-chica { font-size: 12.5px; color: var(--txt-3); }
/* En el celular: el local, el % y los controles (lo demás, en la PC). */
@media (max-width: 600px) { .imp .testigo-ranking .col-sec { display: none; } .imp .barra-pct { min-width: 96px; gap: 6px; } .imp .testigo-ranking th, .imp .testigo-ranking td { padding: 8px 7px; } }

/* ── Ajustes (15/10/2026): El local en frases, las reglas por punto, las fotos ejemplo y la foto modelo ── */
.imp .renglon.frases { display: block; padding: 14px 16px; }
.imp .frase { margin: 0 0 8px; font-size: 14.5px; line-height: 2.55; color: var(--txt); }
.imp .frase.aclara { line-height: 1.5; font-size: 13px; color: var(--txt-3); }
.imp .frase .en-frase {
  display: inline-block; width: auto; min-height: 36px; padding: 4px 9px; margin: 0 2px; vertical-align: middle;
  border: 1px solid var(--line-campo); border-radius: var(--r-sm); background: var(--campo); color: var(--txt); font: 600 14px var(--sans); box-sizing: border-box;
}
.imp .frase input.en-frase[type=text] { width: 13em; max-width: 100%; }
.imp .frase input.en-frase.num { width: 76px; text-align: center; }
.imp .frase input.en-frase.hora { width: 116px; }
.imp .frase .dias.en-frase { display: inline-flex; gap: 3px; padding: 0; border: 0; background: none; }
.imp .frase .dias.en-frase label { width: 32px; height: 36px; }
.imp .frase-si { display: inline-flex; align-items: flex-start; gap: 9px; line-height: 1.5; cursor: pointer; }
.imp .frase-si input { width: 19px; height: 19px; margin: 1px 0 0; flex: none; accent-color: var(--acc); }
.imp .renglon.frases .acciones-renglon { justify-content: flex-end; flex-wrap: wrap; margin: 6px 0 0; }
.imp .aj-grupo { margin: 30px 0 2px; font: 700 18px var(--display); color: var(--txt); }
.imp .aj-bajada { margin: -4px 0 8px; }
.imp .aj-sub { margin: 16px 0 8px; font: 600 13px var(--sans); color: var(--txt-2); }
.imp .aj-agregar { margin: 0 0 4px; }
.imp textarea[data-k], .imp .nueva-regla textarea { resize: none; min-height: 42px; line-height: 1.45; overflow: hidden; }
.imp .renglon .campo.c-tipo { width: 196px; }
.imp [data-reglas] > .vacio { padding: 10px 14px; }
.imp .renglon.nueva-regla { border-style: dashed; }
.imp .aj-colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0 10px; }
.imp .aj-colores > div:not(.renglon) { display: contents; }   /* los colores que se agregan llegan en su propia caja */
.imp .aj-colores .campo.c-chico { width: 64px; }
.imp .aj-colores input[type=color] { padding: 3px; }
.imp .aj-ejemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 168px)); gap: 12px; }
.imp .aj-ejemplo { display: grid; gap: 7px; align-content: start; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.imp .aj-ejemplo img, .imp .aj-ejemplo .sin-foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.imp .aj-ejemplo .sin-foto { display: grid; place-items: center; color: var(--txt-3); font-size: 13px; }
.imp .aj-ejemplo b { font-size: 13.5px; }
.imp .aj-ejemplo-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.ventana .vm-usar { margin: 8px 0 0; }
.ventana .foto-chica .boton { width: 100%; margin-top: 5px; padding-left: 6px; padding-right: 6px; font-size: 12.5px; }
.ventana .vm-propio-acc { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.ventana .vm-liq { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.ventana .vm-liq input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--lima, #C5F04A); }
.ventana .vm-liq span { display: grid; gap: 2px; }
.ventana .vm-liq small { color: var(--txt-3); font-size: 12.5px; }
.ventana .boton:disabled { opacity: .5; cursor: default; }
.ventana .vm-modelo { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
.ventana .vm-modelo .ref-mini { width: 72px; height: 96px; flex: none; object-fit: cover; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.ventana .vm-modelo .sin-foto { display: grid; place-items: center; padding: 6px; text-align: center; font-size: 11px; color: var(--txt-3); box-sizing: border-box; }
.ventana .vm-modelo .bajada-chica { margin: 4px 0 8px; }
.ventana .vm-modelo .imp-mapa-acc { margin: 0; }
.ventana .vm-sacar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ═══ "Armar el croquis" a pantalla completa (15/10) ═══════════════════
   Mauricio: "que sea pantalla completa… más práctico y más rápido para armarlo". Arriba lo de siempre (Volver,
   Salón | Depósito, Guardar), el dibujo ocupa todo lo que queda y al costado, lo que se cambia. Tapa la barra
   (que está en 45) y los menús que se abren encima (ventana(), 60, después en el body) quedan arriba. */
.ventana-fondo.editor-fondo { padding: 0; place-items: stretch; background: var(--bg); }
.ventana.editor {
  width: 100%; max-width: none; height: 100%; max-height: none; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; overflow: hidden;
}
.ed-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ventana.editor .ed-cab h1 { margin: 0; font-size: 19px; line-height: 1.15; }
.ed-cab h1 small { display: block; margin-top: 1px; font: 500 12.5px var(--sans); color: var(--txt-3); }
.ed-solapas { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); }
.ed-solapas button { min-height: 40px; padding: 0 22px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--txt-2); font: 700 14.5px var(--sans); cursor: pointer; }
.ed-solapas button:hover { color: var(--txt); }
.ed-solapas button[aria-selected="true"] { background: var(--acc); color: var(--acc-ink); box-shadow: var(--glow); }
.ed-total { flex: 1 1 220px; margin: 0; font: 500 13px var(--sans); color: var(--txt-3); text-align: right; }
.ed-total b { display: block; font-weight: 700; color: var(--warn-txt); }
.ed-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 188px minmax(0, 1fr) 300px; }
.ed-dibujo { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface-2); }
.ventana.editor .ed-dibujo .imp-mapa-vista { flex: 1; min-width: 0; min-height: 0; margin: 0; padding: 4px; border: 2px dashed transparent; display: flex; align-items: center; justify-content: center; }
.ventana.editor .ed-dibujo .imp-mapa-vista[hidden] { display: none; }
.ventana.editor .imp-mapa-vista.croquis .mapa-svg,
.ventana.editor .imp-mapa-vista.croquis .mapa-svg.deposito { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
/* El aviso de "Tocá el lugar…" / "Tocá un + verde…": arriba del dibujo (no encima, que tapaba y se comía los toques de
   la pared del fondo) y con fondo propio, para que se lea. */
.ventana.editor .ed-flota { flex: none; align-self: center; max-width: 100%; margin: 0; display: block; text-align: center;
                            padding: 8px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--txt); font-weight: 600; box-shadow: var(--sombra-alta); }
.ventana.editor .ed-flota .boton { margin-left: 10px; vertical-align: middle; }
.ventana.editor .ed-flota[hidden] { display: none; }
.ed-panel { min-height: 0; overflow: auto; padding: 14px 16px 20px; border-left: 1px solid var(--line); background: var(--surface); }
/* Lo de la derecha (15/10, "como un juego… sin tanta lectura"): grupos chicos, con botones y nada para escribir. */
.ed-grupo { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.ed-grupo:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ed-grupo[hidden] { display: none; }
.ed-grupo h4 { margin: 0 0 8px; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .6px; color: var(--txt-3); }
.ed-oculto { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.ed-tira { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.ed-tira button { flex: 1 1 0; min-width: 0; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px;
                  border: 0; border-radius: 9px; background: transparent; color: var(--txt-2); font: 700 13px var(--sans); cursor: pointer; transition: background .15s, color .15s; }
.ed-tira button:hover { color: var(--txt); }
.ed-tira button[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); box-shadow: var(--glow); }
.ed-tira svg { width: 18px; height: 15px; flex: none; }
/* Las cuatro paredes alrededor del local, cada una con su − n +. */
.ed-plano { display: grid; grid-template-columns: auto minmax(36px, 1fr) auto; grid-template-areas: ". f ." "i c d" ". v ."; gap: 6px; align-items: center; justify-items: center; }
.ed-lado { display: grid; justify-items: center; gap: 3px; }
.ed-lado small { font: 600 11px var(--sans); color: var(--txt-3); }
.ed-lado[data-lado="fondo"] { grid-area: f; }
.ed-lado[data-lado="izquierda"] { grid-area: i; }
.ed-lado[data-lado="derecha"] { grid-area: d; }
.ed-lado[data-lado="frente"] { grid-area: v; }
.ed-plano-local { grid-area: c; align-self: stretch; justify-self: stretch; min-height: 58px; display: flex; align-items: flex-end; justify-content: center;
                  border: 2px solid var(--line); border-bottom: 4px solid var(--acc); border-radius: 6px; background: var(--surface-2); }
.ed-plano-local span { padding-bottom: 3px; font: 700 9.5px var(--sans); text-transform: uppercase; letter-spacing: .5px; color: var(--txt-3); }
.ed-paso { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--line-campo); border-radius: 10px; background: var(--campo); }
.ed-paso button { width: 30px; height: 34px; border: 0; background: var(--surface-2); color: var(--txt); font: 700 17px var(--sans); cursor: pointer; transition: background .12s, color .12s; }
.ed-paso button:hover { background: var(--acc); color: var(--acc-ink); }
.ed-paso button:active { transform: scale(.92); }
.ventana.editor .ed-paso input { width: 36px; min-height: 0; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--txt);
                                 font: 700 15px var(--sans); text-align: center; box-shadow: none; -moz-appearance: textfield; appearance: textfield; }
.ed-paso input::-webkit-outer-spin-button, .ed-paso input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ventana.editor .ed-panel .imp-lugar-ops { margin-bottom: 0; }
.ed-chico { margin: 8px 0 0; font: 500 12px var(--sans); color: var(--txt-3); }
.ed-chico:empty { display: none; }

/* La caja de muebles (izquierda): fichas grandes con su dibujito, para arrastrar al local "como un juego". */
.ed-bandeja { position: relative; min-height: 0; overflow: auto; padding: 12px 10px; border-right: 1px solid var(--line); background: var(--surface); }
.ed-bandeja-tit { margin: 0 2px 10px; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .6px; color: var(--txt-3); }
.ventana.editor .ed-bandeja .ed-piezas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.ed-ficha { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 64px; padding: 8px 4px 6px;
            border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--txt); font: 600 12px var(--sans); line-height: 1.1; text-align: center;
            cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.ed-ficha:hover { transform: translateY(-2px); border-color: var(--acc); box-shadow: var(--sombra-alta); }
.ed-ficha:active { cursor: grabbing; transform: scale(.95); }
.ed-ficha .pieza-ico { width: 52px; height: 36px; }
.ed-ficha > * { pointer-events: none; }
.ed-ficha-mod { grid-column: 1 / -1; flex-direction: row; gap: 10px; min-height: 56px; border-color: var(--acc); }
.ed-ficha-mod span { font-size: 13.5px; font-weight: 700; }
/* Mientras se arrastra algo del dibujo, la caja es el tacho: soltarlo ahí lo saca. */
.ed-tacho { display: none; }
.editor-fondo.arrastrando .ed-tacho { position: absolute; inset: 8px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px;
  border: 2px dashed var(--bad); border-radius: 14px; background: var(--surface); color: var(--bad-txt); font: 700 13px var(--sans); text-align: center; transition: background .12s, transform .12s; }
.ed-tacho svg { width: 34px; height: 34px; }
.ed-bandeja.tacho-activo .ed-tacho { background: var(--bad-soft); transform: scale(1.03); }
.mapa-svg .a-sacar { opacity: .35; }
/* Lo que se tocó en el dibujo: resaltado, y su globito al lado. */
.mapa-svg .ed-elegido { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #F2D27A); }
.ed-burbuja { position: absolute; z-index: 4; width: 236px; display: grid; gap: 8px; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 14px;
              background: var(--surface); color: var(--txt); box-shadow: var(--sombra-alta); }
.ed-burbuja[hidden] { display: none; }
.ed-burbuja-tit { padding-right: 26px; font: 700 13.5px var(--sans); }
.ed-burbuja-x { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--txt-3); font: 500 20px/1 var(--sans); cursor: pointer; }
.ed-burbuja-x:hover { background: var(--surface-2); color: var(--txt); }
.ventana.editor .ed-burbuja input { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--line-campo); border-radius: var(--r-sm); background: var(--campo); color: var(--txt);
                                    font: 500 14px var(--sans); box-sizing: border-box; }
.ed-burbuja-ops { display: flex; gap: 6px; }
.ventana.editor .ed-burbuja-ops .boton { flex: 1; }
.ed-pista { flex: none; margin: 0; text-align: center; font: 500 12px var(--sans); color: var(--txt-3); }
/* En el celular, una columna: arriba fijo, el dibujo grande y lo que se cambia, abajo. */
@media (max-width: 860px) {
  .ventana.editor { overflow: auto; }
  .ed-cab { position: sticky; top: 0; z-index: 3; padding: 8px 12px; }
  .ventana.editor .ed-cab h1 { flex: 1 1 auto; font-size: 17px; }
  .ed-solapas { order: 4; flex: 1 1 100%; }
  .ed-solapas button { flex: 1; }
  .ed-total { order: 5; flex-basis: 100%; text-align: left; }
  .ed-cuerpo { display: block; flex: none; }
  .ed-dibujo { height: 62vh; min-height: 320px; padding: 8px; }
  .ed-panel { overflow: visible; border-left: 0; border-top: 1px solid var(--line); }
  /* La caja de muebles, en una tira que se desliza de costado (arrastrar para abajo la lleva al dibujo). */
  .ed-bandeja { overflow-x: auto; overflow-y: hidden; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ed-bandeja-tit { display: none; }
  .ventana.editor .ed-bandeja .ed-piezas { display: flex; gap: 6px; }
  .ed-ficha { flex: none; width: 74px; min-height: 60px; touch-action: pan-x; }
  .ed-ficha-mod { width: auto; padding: 0 12px; }
  .editor-fondo.arrastrando .ed-tacho { inset: 4px; flex-direction: row; }
  .ed-pista { display: none; }
}