:root {
  --fondo: #edf1f6;
  --panel: #ffffff;
  --texto: #18253b;
  --suave: #526279;
  --borde: #d7e0eb;
  --azul: #2b54c9;
  --rojo: #c4322b;
  --corte: #111111;
  --marcado: #1f5bd6;
  --grabado: #d9a400;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fondo); }
button, input, select { font: inherit; }

.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; background: #142239; color: #fff; border-bottom: 1px solid #2b3e5c; }
.marca { display: flex; align-items: center; gap: 9px; font-size: 18px; letter-spacing: -.025em; }
.marca-icono { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #2f5ddd; color: #fff; }
.marca-icono::before { content: ""; width: 11px; height: 11px; border: 2px solid; border-top: 0; border-right: 0; transform: rotate(-12deg); }
.version { font-size: 11px; color: #b8c8e0; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.laser { background: #1b2d47; color: #fff; border: 1px solid #3b5070; border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.laser:hover { background: #273e60; border-color: #7391c0; }

.cuerpo { display: grid; grid-template-columns: clamp(160px, 14vw, 214px) minmax(0, 1fr); min-height: 0; }
.modulos { background: var(--panel); border-right: 1px solid var(--borde); padding: 14px; }
.modulos h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); margin: 4px 0 10px; }
.modulos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.modulos button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid transparent; background: #fff; border-radius: 8px; padding: 6px; cursor: pointer; color: var(--texto); font-size: 13px; font-weight: 600; }
.modulos button:hover { background: #f2f6fc; }
.modulos button.activo { border-color: #b6c9f4; background: #eaf1ff; color: #2245aa; }
.modulo-icono { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 6px; background: #edf2f8; }
.activo .modulo-icono { background: #d9e6ff; }
.modulos button:disabled { cursor: default; opacity: .55; }
.modulos .pronto { display: block; font-size: 11px; color: var(--suave); }

.editor { display: grid; grid-template-columns: clamp(248px, 24vw, 328px) minmax(0, 1fr); gap: 12px; padding: 12px; min-width: 0; min-height: 0; }
.formulario, .vista { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; min-width: 0; box-shadow: 0 1px 3px #1c365411; }
.formulario { padding: 14px; }
.vista { display: flex; flex-direction: column; padding: 12px 12px 0; min-height: 0; }
.contenido-vista { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; container-type: size; scrollbar-gutter: stable; }
.pie-vista { flex: none; border-top: 1px solid var(--borde); padding: 8px 0; }
.pie-vista .descargas { margin: 0; }
.barra, .vista > .colocacion, .vista > .pestanas { flex: none; }
.colocacion-global { padding: 7px 8px; background: #f3f6fb; border-radius: 7px; }
.vista .resumen { font-variant-numeric: tabular-nums; }
.vista .hoja svg { max-height: max(180px, calc(100cqh - 104px)); }
.vista [data-panel="3d"] { display: flex; flex-direction: column; min-height: 100%; }
.vista .visor3d { height: max(170px, calc(100cqh - 55px)); min-height: 0; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.cabecera button:focus-visible { outline-color: #a8c0ff; }

@media (min-width: 901px) and (min-height: 560px) {
  body:has(.cuerpo) { height: 100dvh; display: flex; flex-direction: column; }
  .cuerpo { flex: 1; }
  .modulos, .formulario { overflow: auto; min-height: 0; }
  .editor { grid-template-rows: minmax(0, 1fr); }
}

@media (max-width: 900px), (max-height: 559px) {
  .contenido-vista { flex: none; height: clamp(220px, 65dvh, 640px); }
}
.formulario h1 { margin: 0 0 4px; font-size: 20px; }
.desc { margin: 0 0 12px; color: var(--suave); }
fieldset { border: 0; border-top: 1px solid var(--borde); margin: 10px 0 0; padding: 10px 0 0; }
legend { font-weight: 600; font-size: 13px; color: var(--suave); padding-right: 8px; }
.campo { display: grid; gap: 3px; margin-bottom: 9px; }
.campo label { font-size: 13px; font-weight: 600; }
.campo .fila { display: flex; align-items: center; gap: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid #4466f555; border-color: var(--azul); }
.campo textarea { font: inherit; resize: vertical; min-height: 54px; }
.campo .fila .mini { white-space: nowrap; flex: none; }
.campo .unidad { color: var(--suave); font-size: 13px; min-width: 24px; }
.campo .ayuda { font-size: 12px; color: var(--suave); }

.barra { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.resumen { font-weight: 600; }
.leyenda { color: var(--suave); font-size: 13px; }
.l { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin: 0 4px 0 10px; border-radius: 2px; }
.l.corte { background: var(--corte); } .l.marcado { background: var(--marcado); } .l.grabado { background: var(--grabado); }
.hojas { display: grid; gap: 12px; }
.hoja { border: 1px solid var(--borde); border-radius: 10px; padding: 8px; background: #fff; }
.hoja h3 { margin: 0 0 6px; font-size: 13px; color: var(--suave); font-weight: 600; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.hoja h3 .rdworks { flex: none; font-weight: 600; }
.hoja svg { width: 100%; height: auto; display: block; cursor: zoom-in; touch-action: none; user-select: none; }
.hoja svg.ampliada { cursor: grab; }
.hoja svg.ampliada:active { cursor: grabbing; }
.ayuda-zoom { font-size: 12px; color: var(--suave); margin: 0; }
.avisos { margin: 10px 0 0; padding-left: 18px; color: var(--suave); font-size: 13px; }
.error { background: #fdecea; color: var(--rojo); border: 1px solid #f5c2bf; border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.descargas { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
button { border: 1px solid var(--borde); background: #fff; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
button.primario { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
.cargando .hojas { opacity: .55; transition: opacity .15s; }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(640px, 94vw); box-shadow: 0 20px 60px #0004; }
dialog::backdrop { background: #11131a99; }
.laser-form { padding: 18px 20px; display: grid; gap: 10px; }
.laser-form h2 { margin: 0; } .laser-form h3 { margin: 6px 0 0; font-size: 15px; }
.laser-form label { display: grid; gap: 3px; font-size: 13px; font-weight: 600; }
.laser-form input, .laser-form select { padding: 7px 9px; border: 1px solid var(--borde); border-radius: 8px; font-weight: 400; }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rejilla.tres { grid-template-columns: 1fr 1fr 1fr; }
.carta { background: var(--fondo); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.carta summary { cursor: pointer; font-weight: 600; }
.leyenda-carta { columns: 2; margin: 6px 0 0; }
.acciones { display: flex; gap: 8px; align-items: center; }
.hueco { flex: 1; }

.derecha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mini { padding: 3px 9px; border-radius: 7px; }
.trabajo-abierto { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #eef1fe; border: 1px solid #c9d3fc; border-radius: 9px; padding: 7px 10px; margin-bottom: 10px; font-size: 14px; }
.trabajo-abierto em { color: var(--rojo); font-style: normal; font-size: 12px; }
.aviso-ok { margin: 10px 0 0; color: #1d7a3a; font-size: 13px; }
dialog.ancho { width: min(980px, 96vw); }
.cabecera-dialogo { display: flex; justify-content: space-between; align-items: center; }
.laser-form input[type="search"] { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; }
.lista-trabajos { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.fila-trabajo { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--borde); border-radius: 9px; padding: 8px 10px; }
.fila-trabajo .t-nombre { font-weight: 600; }
.fila-trabajo .t-info { font-size: 12px; color: var(--suave); }
.fila-trabajo .t-botones { display: flex; gap: 6px; }
.vacio { color: var(--suave); text-align: center; padding: 20px; }
.zona-subir { display: block; border: 2px dashed #b9c3d6; border-radius: 10px; padding: 18px 12px; text-align: center; color: var(--suave); cursor: pointer; background: #fafbfd; font-size: 13px; }
.zona-subir:hover, .zona-subir.encima { border-color: var(--azul); background: #eef1fe; color: var(--texto); }
.zona-subir input[type="file"] { display: none; }
.miniatura { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--borde); border-radius: 10px; padding: 6px; }
.miniatura img { width: 64px; height: 64px; object-fit: contain; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 6px; }
.nombre-imagen { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botones-imagen { display: flex; gap: 6px; }
.estilos-ia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.estilo-ia { display: grid; gap: 3px; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 400 !important; }
.estilo-ia input { display: none; }
.estilo-ia strong { font-size: 14px; }
.estilo-ia span { color: var(--suave); font-size: 12px; }
.estilo-ia.elegido { border-color: var(--azul); box-shadow: 0 0 0 2px #4466f533; background: #f5f7ff; }
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comparar figure { margin: 0; display: grid; gap: 4px; }
.comparar img { width: 100%; height: 300px; object-fit: contain; border: 1px solid var(--borde); border-radius: 10px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.comparar figcaption { text-align: center; font-size: 13px; color: var(--suave); }
.estado-ia { background: #eef1fe; border-radius: 8px; padding: 9px 11px; margin: 0; }
.vacio.grande { padding: 60px 20px; font-size: 16px; border: 1px dashed var(--borde); border-radius: 10px; }
.l.aviso { background: #e5322d; }
.tabla-scroll { overflow-x: auto; }
.tabla-materiales { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabla-materiales th { text-align: left; font-weight: 600; color: var(--suave); padding: 4px; white-space: nowrap; }
.tabla-materiales td { padding: 3px 4px; }
.tabla-materiales input, .tabla-materiales select { width: 100%; padding: 5px 6px; border: 1px solid var(--borde); border-radius: 6px; font-weight: 400; }
.tabla-materiales input[type="checkbox"] { width: auto; }
.tabla-materiales .n { width: 78px; }
.tabla-materiales .plancha { display: flex; gap: 4px; align-items: center; min-width: 150px; }
.salir { background: transparent; color: #c9cfdb; border: 1px solid #353b55; border-radius: 8px; padding: 6px 10px; }

.pagina-entrar { min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(ellipse at top, #294367, #142239 68%); }
.caja-entrar { background: #fff; border-radius: 14px; padding: clamp(22px, 5vw, 34px); width: min(410px, 92vw); box-shadow: 0 12px 38px #080f2266; }
.caja-entrar h1 { font-size: 23px; line-height: 1.2; margin: 22px 0 16px; }
.caja-entrar form { display: grid; gap: 12px; }
.caja-entrar label { display: grid; gap: 5px; font-weight: 600; font-size: 13px; }
.caja-entrar input { width: 100%; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 8px; }
.marca-grande { font-size: 21px; font-weight: 700; }
.enlace-entrar { color: var(--azul); border: 0; padding: 4px; background: none; justify-self: start; text-decoration: underline; }
.mensaje-entrar { padding: 8px 10px; background: #e9f5ef; color: #215c3b; border-radius: 7px; margin: 0; }

@media (max-width: 900px) {
  .cuerpo { grid-template-columns: 1fr; }
  .modulos { border-right: 0; border-bottom: 1px solid var(--borde); }
  .modulos ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .editor { grid-template-columns: 1fr; padding: 10px; }
  .rejilla, .rejilla.tres { grid-template-columns: 1fr; }
}

/* Conector RDWorks */
a.boton { display: inline-block; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--borde); text-decoration: none; color: inherit; }
a.boton.primario { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.pasos { padding-left: 20px; display: grid; gap: 8px; margin: 10px 0; }
#dlgConector { max-width: 560px; }
#dlgConector code { font-size: 12px; }

/* Letras del PC */
.lista-letras { max-height: 46vh; overflow: auto; border: 1px solid var(--borde); border-radius: 9px; margin-top: 8px; }
.lp-fila { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #eef0f4; font-weight: 400; cursor: pointer; }
.lp-fila:last-child { border-bottom: 0; }
.lp-muestra { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-info { font-size: 12px; color: var(--suave); white-space: nowrap; }
.lp-tengo { opacity: .55; cursor: default; }
#lpProgreso { width: 100%; }
#dlgLetrasPC #lpFiltro { flex: 1; }

/* Galería de figuras */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; max-height: 236px; overflow: auto; padding: 2px; margin-bottom: 4px; }
.ficha-galeria { display: grid; justify-items: center; gap: 2px; padding: 5px 3px 4px; border: 1px solid var(--borde); border-radius: 9px; background: #fff; color: #3b4456; cursor: pointer; font-size: 10.5px; line-height: 1.15; }
.ficha-galeria svg { width: 100%; height: 46px; }
.ficha-galeria span { text-align: center; }
.ficha-galeria:hover { border-color: var(--azul); }
.ficha-galeria.elegida { border-color: var(--azul); background: #eef1fe; color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }

/* Biblioteca de diseños */
.mini-diseno { height: 90px; border: 1px solid var(--borde); border-radius: 9px; background: #fff; padding: 4px; margin-top: 4px; }
.mini-diseno svg, .bb-mini svg { width: 100%; height: 100%; }
.lista-disenos { display: grid; gap: 8px; max-height: 60vh; overflow: auto; margin-top: 8px; }
.bb-fila { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: start; border: 1px solid var(--borde); border-radius: 10px; padding: 8px; }
.bb-mini { width: 96px; height: 96px; background: #fbf8f2; border-radius: 7px; padding: 3px; }
.bb-datos { display: grid; gap: 4px; }
.bb-datos input { padding: 5px 8px; border: 1px solid var(--borde); border-radius: 7px; font-weight: 600; }
.bb-colores { display: grid; gap: 3px; }
.bb-color-fila { display: grid; grid-template-columns: 16px 90px 1fr; gap: 6px; align-items: center; font-size: 12px; font-weight: 400; }
.bb-color-fila select { padding: 3px 6px; border: 1px solid var(--borde); border-radius: 6px; }
.bb-color { width: 14px; height: 14px; border-radius: 4px; border: 1px solid #0003; display: inline-block; }
.bb-botones { display: grid; gap: 6px; }
.objetos-diseno svg { display: block; width: 100%; height: min(56vh, 520px); background: #fafbfd; border: 1px solid var(--borde); border-radius: 8px; touch-action: none; }
.objetos-diseno path { cursor: pointer; pointer-events: visibleStroke; }
.objetos-diseno path.elegido { stroke: var(--azul); stroke-width: 4; }
.objetos-diseno rect { fill: #4366e52b; stroke: var(--azul); pointer-events: none; }
#bbFiltro { flex: 1; padding: 6px 9px; border: 1px solid var(--borde); border-radius: 8px; }
#bbSubir { width: 100%; margin-top: 8px; }
#bbSubir:disabled { cursor: wait; opacity: .7; }

/* Pestañas de la vista */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 10px; }
.pestanas button { border: 1px solid transparent; border-bottom: 0; background: none; padding: 7px 14px; border-radius: 9px 9px 0 0; cursor: pointer; color: var(--suave); font-weight: 600; margin-bottom: -1px; }
.pestanas button.activa { background: #fff; border-color: var(--borde); color: var(--texto); }
.despiece { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dp-pieza { margin: 0; border: 1px solid var(--borde); border-radius: 10px; background: #fff; padding: 8px; display: grid; gap: 6px; }
.dp-dibujo { height: 150px; display: grid; place-items: center; background: #fbf8f2; border-radius: 7px; padding: 6px; }
.dp-dibujo svg { max-width: 100%; max-height: 138px; width: auto; height: auto; }
.dp-pieza figcaption { display: grid; gap: 2px; font-size: 12.5px; }
.dp-pieza figcaption span { color: var(--suave); }
.visor3d-marco { position: relative; }
.visor3d { height: 70vh; min-height: 320px; border-radius: 10px; overflow: hidden; background: #1f2633; }
.visor3d canvas { width: 100% !important; height: 100% !important; display: block; }
.visor3d-mandos { position: absolute; right: 10px; bottom: 34px; display: flex; gap: 10px; align-items: center; background: #1f2633d9; color: #fff; padding: 6px 10px; border-radius: 9px; font-size: 13px; }
.visor3d-mandos label { display: flex; gap: 8px; align-items: center; }

/* Aviso de la carpeta de datos del servidor */
.aviso-datos { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: #fdecec; color: #8a1c1c; border-bottom: 1px solid #f3b5b5; padding: 9px 18px; font-size: 13.5px; font-weight: 600; }
.aviso-datos .mini { flex: none; }

/* Biblioteca: carpetas */
.bb-cuerpo { display: grid; grid-template-columns: 210px 1fr; gap: 12px; margin-top: 6px; }
.bb-carpetas { border: 1px solid var(--borde); border-radius: 10px; padding: 6px; display: grid; align-content: start; gap: 2px; max-height: 60vh; overflow: auto; background: #fafbfd; }
.bb-carpeta { display: flex; justify-content: space-between; gap: 6px; align-items: center; border: 0; background: none; text-align: left; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.bb-carpeta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-carpeta small { color: var(--suave); }
.bb-carpeta:hover { background: #eef1fe; }
.bb-carpeta.abierta { background: var(--azul); color: #fff; }
.bb-carpeta.abierta small { color: #fffc; }
.bb-carpetas-botones { display: flex; gap: 4px; margin-top: 6px; border-top: 1px solid var(--borde); padding-top: 6px; }
.bb-ruta { margin: 0 0 6px; font-weight: 600; font-size: 13.5px; }
.bb-carpeta-campo { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 4px; font-weight: 400; }
.bb-carpeta-campo input { padding: 4px 7px; border: 1px solid var(--borde); border-radius: 6px; font-size: 12.5px; }
@media (max-width: 760px) { .bb-cuerpo { grid-template-columns: 1fr; } }

/* Colocación de las piezas */
.colocacion { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 2px 0 8px; font-size: 13px; }
.colocacion label { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.colocacion select { padding: 4px 8px; border: 1px solid var(--borde); border-radius: 7px; font-weight: 400; }
.colocacion .ayuda { flex: 1 1 260px; }

/* Lista de diseños (Anidar diseños) */
.lista-disenos-campo { display: grid; gap: 6px; margin-bottom: 6px; }
.fila-lista { display: grid; grid-template-columns: 1fr auto 70px auto; gap: 6px; align-items: center; }
.fila-lista select, .fila-lista input { padding: 6px 8px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; min-width: 0; }

/* El nombre se puede arrastrar en la vista */
.hoja svg path.nombre:hover { stroke-width: 2.2; filter: drop-shadow(0 0 1.5px #4466f5); }
.mandos-plancha { margin: 0 0 8px; }
.mandos-plancha input[type=number] { width: 86px; }
.zona-pieza { fill: transparent; stroke: none; cursor: pointer; }
.zona-pieza.elegida { fill: #4466f533; }
.hoja svg path[data-pieza]:not(.zona-pieza) { cursor: pointer; }
.hoja svg path.elegida:not(.zona-pieza) { stroke-width: 2.3; }
.hoja svg path[data-pieza].nombre { cursor: move; }
.rejilla-plancha, .reglas-plancha { display: none; pointer-events: none; }
.hojas.con-regla .rejilla-plancha, .hojas.con-regla .reglas-plancha { display: inline; }
.reglas-plancha text { fill: #404c62; font-family: system-ui, sans-serif; }
.guia-plancha .zona-limite { fill: #63718d22; pointer-events: none; }
.guia-plancha .linea-limite { stroke: #365cf5; stroke-width: 2; stroke-dasharray: 7 4; pointer-events: none; }
.guia-plancha .mando-limite { stroke: transparent; stroke-width: 18; cursor: ew-resize; }
.guia-plancha .asa-limite { fill: #365cf5; cursor: ew-resize; }
.guia-plancha .flecha-limite { fill: #fff; pointer-events: none; }
.aviso-version { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 18px; background: #eef1fe; color: #233876; }
.lista-novedades { display: grid; gap: 14px; }
.novedad { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.novedad h3, .novedad p { margin: 0; }
.novedad p { margin-top: 4px; }
.novedad-dibujo { position: relative; height: 62px; border: 1px solid #b9c4dc; border-radius: 8px; background: #f1f4fc; }
.novedad-dibujo.piezas i, .novedad-dibujo.limite i { position: absolute; width: 22px; height: 16px; border: 1px solid #365cf5; border-radius: 3px; background: #fff; top: 12px; left: 11px; }
.novedad-dibujo.piezas i:nth-child(2) { left: 40px; background: #e3eaff; border-style: dashed; }
.novedad-dibujo.piezas i:nth-child(3), .novedad-dibujo.limite i:nth-child(2) { top: 34px; }
.novedad-dibujo.limite { background: repeating-linear-gradient(0deg, transparent 0 9px, #dce3f4 9px 10px), repeating-linear-gradient(90deg, #f1f4fc 0 9px, #dce3f4 9px 10px); }
.novedad-dibujo.limite i:nth-child(3) { left: 58px; top: 0; height: 100%; width: 0; border: 0; border-left: 2px dashed #365cf5; border-radius: 0; }
.novedad-dibujo.avisos { display: grid; place-items: center; font-size: 30px; }