:root {
  --rojo: #e3202a;
  --rojo-osc: #b8141d;
  --gris: #34383d;
  --gris-2: #5b6168;
  --gris-3: #9aa0a7;
  --linea: #dfe2e6;
  --fondo: #f3f4f6;
  --papel: #ffffff;
  --v: #1f9d55;
  --a: #e09b00;
  --r: #d32f2f;
  --radio: 10px;
  --sombra: 0 1px 3px rgba(20, 24, 28, .08), 0 4px 14px rgba(20, 24, 28, .06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Barlow', system-ui, sans-serif;
  color: var(--gris);
  background: var(--fondo);
  font-size: 15px;
  line-height: 1.4;
}
h1, h2, h3 { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; margin: 0; letter-spacing: .01em; }
button { font: inherit; cursor: pointer; }

/* Cabecera */
.cabecera {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px; background: var(--papel);
  border-bottom: 3px solid var(--rojo);
}
.logo img { height: 46px; width: auto; display: block; }
.titulo { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.titulo h1 { font-size: 26px; text-transform: uppercase; }
.etiqueta-prueba { font-size: 12px; color: var(--gris-2); background: #fff4d6; border: 1px solid #f1d58a; padding: 2px 8px; border-radius: 20px; }
.cabecera nav a { color: var(--gris); text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 8px; }
.cabecera nav a:hover { background: var(--fondo); color: var(--rojo); }

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 12px 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.pasos button {
  border: 1px solid var(--linea); background: var(--papel); color: var(--gris-2);
  padding: 8px 14px; border-radius: 30px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.pasos button b {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--fondo); color: var(--gris); font-size: 13px;
}
.pasos button.activo { border-color: var(--rojo); color: var(--gris); box-shadow: var(--sombra); }
.pasos button.activo b { background: var(--rojo); color: #fff; }
.pasos button.hecho b { background: var(--gris); color: #fff; }

/* Área principal */
.area { display: grid; grid-template-columns: 380px 1fr; gap: 16px; padding: 0 20px 20px; align-items: start; }
.panel {
  background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 18px; max-height: calc(100vh - 150px); overflow: auto;
}
.panel h2 { font-size: 21px; text-transform: uppercase; margin-bottom: 4px; }
.panel h3 { font-size: 17px; margin: 18px 0 6px; display: flex; align-items: center; justify-content: space-between; }
.ayuda { color: var(--gris-2); font-size: 13px; margin: 0 0 10px; }
.dato { font-size: 13px; background: var(--fondo); padding: 8px 10px; border-radius: 8px; margin: 10px 0 0; }
.p { display: none; }
.p.visible { display: block; }

label { font-size: 12.5px; color: var(--gris-2); font-weight: 500; display: block; }
label > span { display: flex; align-items: center; gap: 4px; color: var(--gris); }
input[type=number], input[type=text], select {
  width: 100%; padding: 7px 8px; border: 1px solid var(--linea); border-radius: 7px;
  font: inherit; color: var(--gris); background: #fff; min-width: 0;
}
input:focus, select:focus { outline: 2px solid rgba(227, 32, 42, .25); border-color: var(--rojo); }
.fila3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.lista { display: flex; flex-direction: column; gap: 8px; }
.item {
  border: 1px solid var(--linea); border-radius: 8px; padding: 8px; display: grid; gap: 6px;
  grid-template-columns: repeat(4, 1fr); align-items: end; position: relative;
}
.item.sel { border-color: var(--rojo); box-shadow: 0 0 0 2px rgba(227, 32, 42, .15); }
.item .nombre-item { grid-column: 1 / -1; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.item.zona .ancho2 { grid-column: span 2; }
.aviso-item { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--r); font-weight: 600; }
.vacio { font-size: 13px; color: var(--gris-2); font-style: italic; margin: 0; }

.mini {
  border: 1px solid var(--linea); background: #fff; color: var(--gris); font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
}
.mini:hover { border-color: var(--gris-3); }
.mini.peligro { color: var(--r); }
.mini.confirmar { background: var(--r); color: #fff; border-color: var(--r); }
.x { border: 0; background: none; color: var(--gris-3); font-size: 18px; line-height: 1; padding: 0 4px; }
.x:hover { color: var(--r); }
.boton {
  border: 0; background: var(--gris); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; margin-top: 16px;
}
.boton:hover { background: #22262a; }
.boton.grande { width: 100%; background: var(--rojo); font-size: 16px; padding: 12px; margin-top: 22px; }
.boton.grande:hover { background: var(--rojo-osc); }
.proximo { background: var(--fondo); border-left: 4px solid var(--rojo); padding: 10px 14px; border-radius: 6px; margin-top: 10px; }

/* Catálogo */
.catalogo { display: flex; flex-direction: column; gap: 8px; }
.busca { width: 100%; padding: 9px 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; margin-bottom: 10px; }
.busca:focus { outline: 2px solid rgba(227, 32, 42, .25); border-color: var(--rojo); }
.grupo { border: 1px solid var(--linea); border-radius: 9px; background: #fafbfc; }
.grupo summary { cursor: pointer; padding: 9px 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16.5px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.grupo summary::-webkit-details-marker { display: none; }
.grupo summary::after { content: '▾'; color: var(--gris-3); margin-left: 8px; transition: transform .15s; }
.grupo[open] summary::after { transform: rotate(180deg); }
.grupo .cuenta { margin-left: auto; font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 600; color: var(--gris-2); background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 1px 8px; }
.grupo-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px; }
.tarjeta {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--linea); border-radius: 9px; padding: 8px; background: #fff; cursor: grab;
}
.tarjeta:hover { border-color: var(--gris-3); }
.tarjeta img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 6px; }
.tarjeta .ref { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; }
.tarjeta .nom { font-size: 12.5px; color: var(--gris-2); }
.tarjeta .med { font-size: 12px; color: var(--gris); margin-top: 2px; }
.tarjeta .mini { background: var(--rojo); color: #fff; border-color: var(--rojo); }

/* Selección */
.selbox { border: 2px solid var(--rojo); border-radius: 10px; padding: 12px; margin-bottom: 16px; }
.selbox .cab { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; }
.selbox img { width: 56px; height: 56px; object-fit: contain; }
.selbox .ref { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; }
.selbox .nom { font-size: 12.5px; color: var(--gris-2); }
.selbox .med { font-size: 13px; margin: 8px 0; }
.selbox .acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.selbox a { font-size: 13px; color: var(--rojo); font-weight: 600; }
.avisos { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.avisos li { display: flex; gap: 6px; align-items: baseline; margin-bottom: 3px; }

/* Estado */
.estado { border-radius: 10px; padding: 12px; margin-bottom: 14px; background: var(--fondo); }
.estado .grande { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; display: flex; gap: 8px; align-items: center; }
.estado.v { background: #e8f6ee; } .estado.a { background: #fdf3dc; } .estado.r { background: #fde8e8; }
.estado .sub { font-size: 13px; color: var(--gris-2); margin-top: 2px; }
.estado ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.estado li { display: flex; gap: 6px; align-items: baseline; padding: 3px 4px; border-radius: 5px; cursor: pointer; }
.estado li:hover { background: rgba(255, 255, 255, .7); }
.estado li small { color: var(--gris-2); }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; transform: translateY(1px); }
.punto.v { background: var(--v); } .punto.a { background: var(--a); } .punto.r { background: var(--r); }

/* Instalación eléctrica */
.elec { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; background: #fffdf5; }
.elec summary { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; cursor: pointer; }
.elec label { margin-top: 8px; }
.elec-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.elec-cifras div { background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 7px 9px; }
.elec-cifras span { display: block; font-size: 11.5px; color: var(--gris-2); }
.elec-cifras b { font-size: 14.5px; }
.elec-nota, .elec-aviso { font-size: 12px; color: var(--gris-2); margin: 8px 0; }
.elec-aviso { font-style: italic; }
.elec-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.elec-tabla th { text-align: left; font-size: 11.5px; color: var(--gris-2); border-bottom: 1px solid var(--linea); padding: 4px; }
.elec-tabla td { border-bottom: 1px solid var(--linea); padding: 5px 4px; vertical-align: top; }
.elec-tabla small { color: var(--gris-2); }
.elec-consejos { font-size: 12.5px; padding-left: 18px; margin: 8px 0; }

/* Editor de la forma (paso 1) */
#plano .editor-forma .vertice { fill: #fff; stroke: var(--rojo); stroke-width: 3; vector-effect: non-scaling-stroke; cursor: move; }
#plano .editor-forma .vertice.sel { fill: var(--rojo); }
#plano .editor-forma .mitad { cursor: copy; opacity: .55; }
#plano .editor-forma .mitad:hover { opacity: 1; }
#plano .editor-forma .mitad circle { fill: #fff; stroke: var(--gris-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#plano .editor-forma .mitad path { stroke: var(--gris); stroke-width: 2; vector-effect: non-scaling-stroke; }
#plano .calco { pointer-events: none; }
#plano .calco.movible { pointer-events: all; cursor: move; }
#plano .punto-escala { fill: #2f74c0; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
#plano .linea-escala { stroke: #2f74c0; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
#plano .medida-pared text { fill: var(--gris-2); }
.plantillas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 10px; }
.plantillas button { border: 1px solid var(--linea); background: #fff; border-radius: 8px; padding: 6px 2px 4px; font-size: 11.5px; font-weight: 600; color: var(--gris); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.plantillas button:hover { border-color: var(--rojo); color: var(--rojo); }
.plantillas svg { width: 34px; height: 24px; fill: #eef0f3; stroke: var(--gris); stroke-width: 2; }
.muro-fila { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 6px; align-items: end; border-bottom: 1px solid var(--linea); padding: 6px 0; font-size: 12.5px; }
.muro-fila b { font-size: 12.5px; padding-bottom: 8px; }
.muro-fila label { margin: 0; font-size: 11px; }
.muro-fila .calle { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; font-size: 11.5px; color: var(--gris); cursor: pointer; }
.muro-fila .calle input { accent-color: var(--rojo); }
.calco-caja { border: 1px dashed var(--gris-3); border-radius: 10px; padding: 10px; margin-top: 8px; font-size: 13px; }
.calco-caja .fila-botones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.calco-caja input[type=range] { width: 100%; accent-color: var(--rojo); }
.calco-caja input[type=file] { font-size: 12.5px; max-width: 100%; }
.paso-escala { background: #eef5fd; border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 12.5px; }

/* Forma de la nave */
.esquinas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.esq { border: 1px solid var(--linea); border-radius: 8px; padding: 8px; font-size: 13px; display: flex; flex-direction: column; gap: 5px; }
.esq.activa { border-color: var(--rojo); background: #fff7f7; }
.esq select { width: 100%; padding: 6px; border: 1px solid var(--linea); border-radius: 6px; font: inherit; }
.esq-med { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.esq-med[hidden] { display: none; }
.esq-med label { font-size: 11.5px; margin: 0; }
#aviso-esquinas { margin-top: 6px; }

/* Formulario de presupuesto */
.form-pres { background: var(--fondo); border-radius: 10px; padding: 12px; margin-top: 8px; }
/* Guía paso a paso: la parte señalada se ve nítida (sin capa encima) y el resto se oscurece */
.boton-guia { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--rojo); background: #fff; color: var(--rojo); font: 800 17px/1 inherit; cursor: pointer; margin-right: 12px; vertical-align: middle; }
.boton-guia:hover, .boton-guia:focus-visible { background: var(--rojo); color: #fff; outline: none; }
.guia-capa { position: fixed; inset: 0; z-index: 9990; background: transparent; }
.guia-foco { position: fixed; z-index: 9991; border-radius: 10px; pointer-events: none; outline: 3px solid var(--rojo); outline-offset: 0; box-shadow: 0 0 0 9999px rgba(20, 22, 26, .62), 0 0 0 7px rgba(227, 32, 42, .25); transition: left .25s, top .25s, width .25s, height .25s; }
.guia-burbuja { position: fixed; z-index: 9992; width: 340px; max-width: calc(100vw - 20px); background: #fff; border-radius: 14px; border-top: 4px solid var(--rojo); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); padding: 16px 18px 14px; color: var(--gris); }
.guia-burbuja.centro { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 20px)); }
.guia-burbuja.abajo { left: 10px !important; right: 10px; bottom: 10px; top: auto !important; width: auto; max-width: none; }
.guia-burbuja h3 { margin: 2px 0 6px; font-size: 19px; text-transform: uppercase; }
.guia-burbuja p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; }
.guia-cuenta { font-size: 12px; font-weight: 700; color: var(--rojo); letter-spacing: .06em; text-transform: uppercase; }
.guia-botones { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.guia-botones span { display: flex; gap: 6px; }
.guia-botones .mini { min-height: 38px; padding: 0 14px; font-size: 14px; }
.guia-saltar { border: 0; background: none; color: var(--gris-2); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px 0; }
body.guia-abierta #flotante { display: none !important; }

/* ---------- Móvil y tablet: plano grande, controles cómodos para el dedo y catálogo arriba ---------- */
@media (max-width: 960px) {
  /* plano más grande (antes 4:3, unos 260 px de alto en un móvil) */
  #plano { aspect-ratio: auto !important; height: min(62vh, 620px) !important; min-height: 320px !important; }
  /* barra de opciones compacta: la leyenda de colores ya la explican los avisos */
  .barra { gap: 6px 10px; padding-bottom: 6px; }
  .barra .leyenda { display: none !important; }
  .barra .chk { font-size: 13.5px; }
  /* tamaños cómodos para el dedo (unos 40 px) */
  .mini { min-height: 40px; padding: 0 12px; }
  .zoom .mini, .historial .mini { min-width: 42px; min-height: 42px; }
  #zoom-nivel { min-width: 52px; }
  input[type=checkbox] { width: 20px; height: 20px; }
  .x { min-width: 36px; min-height: 36px; font-size: 22px; }
  .opcion span { padding: 10px 14px; }
  input[type=number], input[type=text], input[type=search], select { min-height: 42px; font-size: 16px; }
  /* paso 2: primero el estado, la máquina seleccionada y el catálogo; la luz y el aire después */
  .p[data-p="2"].visible { display: flex; flex-direction: column; }
  .p[data-p="2"] > * { order: 5; }
  .p[data-p="2"] > #estado { order: 1; }
  .p[data-p="2"] > #seleccion { order: 2; }
  .p[data-p="2"] > #interno-tienda { order: 3; }
  .p[data-p="2"] > .bloque-catalogo { order: 4; margin-bottom: 14px; }
}

/* Cabecera del móvil compacta: logo, título en una línea, "?" e Inicio */
@media (max-width: 560px) {
  .cabecera { gap: 8px !important; }
  .logo img { height: 30px !important; }
  .titulo h1 { font-size: 17px !important; line-height: 1.1; white-space: nowrap; }
  .cabecera nav { display: flex; align-items: center; flex: 0 0 auto; }
  .cabecera nav a { padding: 8px 4px; font-size: 14px; }
  .boton-guia { width: 30px; height: 30px; font-size: 15px; margin-right: 6px; }
}

/* Pieza para ampliar o recortar la nave */
#plano .pieza { cursor: grab; }
#plano .pieza polygon { fill: rgba(227, 32, 42, .10); stroke: var(--rojo); stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
#plano .pieza.sel polygon { fill: rgba(227, 32, 42, .16); stroke-width: 2.5; }
#plano .pieza text { pointer-events: none; }
.piezas button { cursor: grab; }
.pieza-caja { background: #fff4f4; border: 1px solid #f3c4c6; border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
.pieza-caja[hidden] { display: none; }
.pieza-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Versión interna (interno.php): unas partes solo para Syros y otras solo para el público */
.solo-interno { display: none !important; }
body.interno .solo-interno { display: block !important; }
body.interno .solo-publico { display: none !important; }
body.interno .etiqueta-prueba { background: #1c1d20; color: #fff; border-color: #1c1d20; }
#interno-tienda { margin-bottom: 14px; }
.lista-3d { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.lista-3d li::before { content: "✓"; color: var(--rojo); font-weight: 700; margin-right: 8px; }
.form-pres > label { margin-top: 10px; }
.form-pres > label:first-child { margin-top: 0; }
.form-pres textarea { width: 100%; margin-top: 3px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; resize: vertical; }
.opciones { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.opcion { margin: 0; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span { display: inline-block; padding: 7px 14px; border: 1px solid var(--linea); border-radius: 20px; background: #fff; font-weight: 600; font-size: 13.5px; color: var(--gris); }
.opcion input:checked + span { background: var(--gris); color: #fff; border-color: var(--gris); }
.opcion input:focus-visible + span { outline: 2px solid rgba(227, 32, 42, .4); }
.form-pres .boton.grande { margin-top: 14px; }

/* Aire comprimido y compresor */
.elec.aire { background: #f5f9ff; }
.herr-lista { display: grid; grid-template-columns: 1fr; gap: 4px; }
.herr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; color: var(--gris); }
.herr small { color: var(--gris-3); }
.herr input { width: 64px; flex: none; padding: 5px 6px; }
.aire-estado { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 8px; margin-top: 10px; font-size: 13px; }
.aire-estado.v { background: #e8f6ee; } .aire-estado.a { background: #fdf3dc; } .aire-estado.r { background: #fde8e8; }
.aire-estado .punto { margin-top: 4px; }
.aire-estado .mini { margin-top: 6px; }
.mini.rojo { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.cfg-comp { background: var(--fondo); border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; }
.cfg-comp .fila2 { gap: 6px 10px; }
.cfg-comp label { margin-top: 4px; }
.cfg-extras { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 8px; }
.cfg-extras .check { margin: 0; font-size: 12.5px; }

/* Lienzo */
.lienzo { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); padding: 10px; position: sticky; top: 10px; }
.barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 2px 4px 8px; font-size: 13px; }
.chk { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gris); cursor: pointer; }
.leyenda { display: flex; align-items: center; gap: 6px; color: var(--gris-2); margin-left: auto; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.leyenda i.v { background: var(--v); } .leyenda i.a { background: var(--a); } .leyenda i.r { background: var(--r); }
#plano { width: 100%; height: calc(100vh - 230px); min-height: 380px; display: block; background: #f7f8fa; border-radius: 8px; touch-action: none; user-select: none; }
.pista { font-size: 12.5px; color: var(--gris-2); margin: 8px 4px 0; }

/* Formulario de registro */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(20, 24, 28, .55); display: grid; place-items: center; padding: 16px; overflow: auto; }
.modal[hidden] { display: none; }
.modal-caja { background: #fff; border-radius: 14px; max-width: 560px; width: 100%; padding: 22px; position: relative; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); border-top: 4px solid var(--rojo); }
.modal-caja h2 { font-size: 23px; text-transform: uppercase; margin-bottom: 4px; padding-right: 30px; }
.modal-cerrar { position: absolute; top: 12px; right: 12px; font-size: 26px; }
.modal-caja label { margin-top: 10px; }
.modal-caja input[type=text], .modal-caja input[type=email], .modal-caja input[type=tel] { display: block; width: 100%; margin-top: 3px; padding: 9px 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; }
.modal-caja input.mal { border-color: var(--r); background: #fff5f5; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--gris); line-height: 1.4; cursor: pointer; }
.check input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--rojo); }
.check.mal span { color: var(--r); }
.check a { color: var(--rojo); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.error-form { color: var(--r); font-weight: 600; font-size: 13.5px; margin: 10px 0 0; }
.info-rgpd { margin-top: 12px; font-size: 12px; color: var(--gris-2); }
.info-rgpd summary { cursor: pointer; font-weight: 600; }
.info-rgpd p { margin: 6px 0 0; line-height: 1.45; }
.info-rgpd a { color: var(--rojo); }
.modal-botones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.modal-botones .boton { margin-top: 0; }
.modal-botones .boton.grande { width: auto; padding: 11px 20px; }
.boton.secundario { background: #fff; color: var(--gris); border: 1px solid var(--linea); }
.boton.secundario:hover { background: var(--fondo); }
@media (max-width: 560px) { .fila2 { grid-template-columns: 1fr; gap: 0; } .modal-botones { flex-direction: column-reverse; } .modal-botones .boton.grande { width: 100%; } }

/* Barra flotante de la máquina seleccionada */
.lienzo { position: sticky; }
.flotante {
  position: absolute; z-index: 5; display: flex; gap: 2px; padding: 4px;
  background: var(--gris); border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transform: translateX(-50%); transition: opacity .12s;
}
.flotante[hidden] { display: none; }
.flotante::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom: 0; border-top-color: var(--gris);
}
.flotante.abajo::after { bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid var(--gris); }
.flotante button {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 52px;
  border: 0; background: transparent; color: #fff; padding: 5px 6px 4px; border-radius: 8px; font-size: 10.5px; font-weight: 600;
}
.flotante button[hidden] { display: none; }
.flotante button:hover, .flotante button:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.flotante button.peligro:hover { background: var(--r); }
.flotante svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flotante.oculta { opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .flotante button { min-width: 44px; padding: 5px 4px 4px; font-size: 10px; } }

/* SVG */
#plano text { font-family: 'Barlow', sans-serif; fill: var(--gris); paint-order: stroke; stroke: #fff; stroke-linejoin: round; }
#plano .suelo { fill: #fff; }
#plano .rejilla line { stroke: #eef0f2; stroke-width: 1; vector-effect: non-scaling-stroke; }
#plano .rejilla line.r5 { stroke: #dfe2e6; }
#plano .muro { fill: var(--gris); }
#plano .hueco { fill: #fff; }
#plano .muro-fachada { fill: var(--rojo); }
#plano .puerta { cursor: grab; }
#plano .puerta .linea-puerta { stroke: var(--gris); stroke-width: 1.5; vector-effect: non-scaling-stroke; fill: none; }
#plano .puerta .linea-puerta.disc { stroke-dasharray: 6 4; }
#plano .zona-puerta { fill: url(#rayadoPuerta); stroke: #8fbde8; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
#plano .puerta.sel .hueco { fill: #ffe3e4; }
#plano .pilar rect { fill: var(--gris); }
#plano .pilar line { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
#plano .pilar, #plano .zfija { cursor: grab; }
#plano .zfija rect { fill: url(#rayado); stroke: var(--gris-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#plano .zfija.mal rect { stroke: var(--r); }
/* Habitáculos */
#plano .hab { cursor: grab; }
#plano .hab .suelo-hab { stroke: none; }
#plano .hab .tabique { fill: #5d646c; }
#plano .hab.sel .suelo-hab { stroke: var(--rojo); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
#plano .hab.mal .tabique { fill: var(--r); }
#plano .hab.mal .suelo-hab { fill: #fdeaea !important; }
#plano .hab .linea-puerta { stroke: var(--gris); stroke-width: 1.3; vector-effect: non-scaling-stroke; fill: none; }
#plano .hab .linea-puerta.disc { stroke-dasharray: 5 4; }
#plano .hab .paso-hab { fill: url(#rayadoPuerta); stroke: #8fbde8; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .7; pointer-events: none; }
#plano .hab .agarre-puerta { fill: transparent; cursor: ew-resize; }
#plano .hab.paso2 { cursor: default; }
#plano .tirador-tam { fill: #fff; stroke: var(--rojo); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.botones-hab { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.info-hab { grid-column: 1 / -1; margin: 0; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.info-hab .hab-sup { font-weight: 700; color: var(--gris); }
.info-hab .aviso-hab { color: var(--r); font-weight: 600; }
#plano .sel rect.marco, #plano .pilar.sel rect { stroke: var(--rojo); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
#plano .cota line { stroke: var(--gris-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
#plano .cota text { fill: var(--gris-2); }
#plano .cota.azul line { stroke: #2f74c0; stroke-width: 1.5; }
#plano .cota.azul text { fill: #2f74c0; font-weight: 700; }
#plano .cota.azul .estrecho { fill: #2f74c0; }
#plano .cota.azul { pointer-events: none; }
#plano .cota.sel line { stroke: var(--rojo); }
#plano .cota.sel text { fill: var(--rojo); font-weight: 600; }
#plano .cota.sel .cota-min line { stroke-dasharray: 4 3; }
#plano .cota.sel .cota-min text { font-style: italic; }
#plano .rotulo { fill: var(--gris-3); font-weight: 600; letter-spacing: .08em; }

#plano .maq { cursor: grab; }
#plano .maq .zt { stroke-width: 1.2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
#plano .maq.v .zt { fill: rgba(31, 157, 85, .07); stroke: var(--v); }
#plano .maq.a .zt { fill: rgba(224, 155, 0, .12); stroke: var(--a); }
#plano .maq.r .zt { fill: rgba(211, 47, 47, .12); stroke: var(--r); }
#plano .maq .huella { fill: none; stroke: var(--gris-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
#plano .maq.r .huella { stroke: var(--r); stroke-width: 2; }
#plano .maq.sel .huella { stroke: var(--rojo); stroke-width: 2.5; }
#plano .maq.paso1 { opacity: .35; pointer-events: none; }
#plano .acceso .zona-acc { fill: rgba(37, 110, 190, .07); stroke: #2f74c0; stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
#plano .acceso.mal .zona-acc { fill: rgba(211, 47, 47, .10); stroke: var(--r); }
/* Tirador para girar la máquina seleccionada */
#plano .tirador-giro { cursor: grab; }
#plano .tirador-giro:active { cursor: grabbing; }
#plano .tirador-giro line { stroke: var(--rojo); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
#plano .tirador-giro circle { fill: #fff; stroke: var(--rojo); stroke-width: 2; vector-effect: non-scaling-stroke; }
#plano .tirador-giro circle.toque { fill: rgba(227, 32, 42, .08); stroke: none; }
#plano .tirador-giro .flechita { fill: none; stroke: var(--rojo); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#plano .etq-giro { fill: var(--rojo); font-weight: 700; pointer-events: none; }
.giro-caja { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin: 8px 0 2px; }
.giro-caja label { width: 92px; }
.giro-caja label input { width: 64px; }
.giro-ayuda { font-size: 12px; margin: 4px 0 8px; }
#plano .acceso .flecha { fill: #2f74c0; opacity: .55; }
#plano .acceso .etq-acc { fill: #2f74c0; font-weight: 700; letter-spacing: .06em; }
#plano .acceso.mal rect { fill: rgba(211, 47, 47, .10); stroke: var(--r); }
#plano .acceso.mal .flecha { fill: var(--r); }
#plano .acceso.mal .etq-acc { fill: var(--r); }
#plano .acceso.paso1 { opacity: .35; }
#plano .acceso { pointer-events: none; }
#plano .recorrido { fill: none; stroke: #2f74c0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 7; vector-effect: non-scaling-stroke; pointer-events: none; }
#plano .hoja { fill: url(#rayado); stroke: var(--gris-2); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
#plano .s-fill { fill: var(--gris); }
#plano .s-rojo { fill: var(--rojo); }
#plano .s-claro { fill: #c9ced5; stroke: var(--gris-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
#plano .s-line { stroke: var(--gris); stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
#plano .s-thin { stroke: var(--gris-2); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
#plano .s-coche { fill: none; stroke: #7d8790; stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
#plano .s-rueda { fill: #2b2f33; }
#plano .s-rampa { fill: url(#rayado); stroke: var(--gris-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
#plano .s-foso { fill: rgba(52, 56, 61, .08); stroke: var(--gris-2); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
#plano .s-puente { stroke: var(--gris); stroke-width: 4; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; fill: none; opacity: .7; }
#plano .etq { font-weight: 700; }
#plano .etq-m { fill: var(--gris-2); }

.area > * { min-width: 0; }
@media (max-width: 960px) {
  .area { grid-template-columns: minmax(0, 1fr); padding: 0 12px 16px; }
  .lienzo { position: relative; order: -1; }
  .panel { max-height: none; }
  #plano { height: 72vw; min-height: 0; }
  @supports (aspect-ratio: 1) { #plano { height: auto; aspect-ratio: 4 / 3; } }
  .titulo { gap: 4px; }
  .etiqueta-prueba { font-size: 11px; }
  .cabecera { padding: 10px 12px; gap: 10px; }
  .logo img { height: 36px; }
  .titulo h1 { font-size: 21px; }
  .pasos { padding: 10px 12px; }
  .leyenda { margin-left: 0; }
}

/* Aviso tras enviar el plano */
.aviso-envio { font-size: 13.5px; line-height: 1.45; padding: 0; margin-top: 10px; border-radius: 8px; }
.aviso-envio.ok { background: #e8f6ee; padding: 10px 12px; color: var(--gris); }
.aviso-envio.mal { background: #fde8e8; padding: 10px 12px; color: var(--r); font-weight: 600; }
.aviso-envio a { color: var(--rojo); font-weight: 600; }


/* Deshacer / rehacer */
.historial { display: inline-flex; gap: 4px; }
.historial .mini:disabled { opacity: .4; cursor: default; }

.zoom { display: inline-flex; gap: 2px; align-items: center; }
.zoom .mini { min-width: 30px; font-weight: 700; }
#zoom-nivel { font-weight: 600; font-size: 12px; }
#plano.con-zoom { cursor: grab; }
#plano.con-zoom:active { cursor: grabbing; }
.historial .mini { min-width: 34px; font-size: 16px; font-weight: 700; }