*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:#eceeec;
  color:#20262a;
}

select{
  margin-left:6px;
}


/* =========================================================
   2. ENCABEZADO
   ========================================================= */
.hd{
  background:#20262a;
  color:#fff;
  padding:0px 24px;
}

.hd b{
  letter-spacing:.03em;
  font-family:Italiana;
}

/* =========================================================
   3. APLICACIÓN: biblioteca | armado | tercera columna
   ========================================================= */
.app{
  display:grid;
  grid-template-columns:350px minmax(0,1fr) 150px;
  width:calc(100% - 30px);
  max-width:1800px;
  height:min(85vh,1000px);
  min-width:0;
  min-height:650px;
  margin:0;
  background:#fff;
  border:1px solid #ddd;
}
/* =========================================================
   4. ÁREA DE ARMADO (lienzo + barra de información)
   ========================================================= */
.cv{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}

.cvw{
  flex:1;
  width:100%;
  min-width:0;
  min-height:0;
  overflow:auto;
  background:#f6f4ef;
}

.hint{
  background:#20262a;
  padding:7px 12px;
  font-size:12px;
  color:#767d7c;
}
.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0;
  border:0;
  font-size:12px;
}

.bar-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.bar button{
  border:0;
  background:none;
  letter-spacing:.08em;
  font-size:12px;
  color:#6e7473;
  cursor:pointer;
  padding:4px 0;
}

.bar #ro{
  margin-left:auto;
  text-align:right;
}

/* Módulos dibujados en el lienzo (SVG) */
.mod{
  cursor:pointer;
  pointer-events:visiblePainted;
}

.mod *{
  pointer-events:visiblePainted;
}

.mod:hover{
  opacity:.72;
}


/* =========================================================
   5. BIBLIOTECA — UI3
   ========================================================= */
:root{
  --ui-bg-panel:#fea500;          /* Fondo amarillo huevo estructura */
  --ui-bg-card: #ffffff;          /* Blanco puro para tarjetas */
  --ui-bg-active: #ffffff;        /* Selector activo flotante */
  --ui-border:#eff555;            /* Líneas divisorias finas */
  --ui-text-main:#2c3330;         /* Texto principal */
  --ui-text-muted:#757d79;        /* Textos secundarios */
  --ui-text-disabled:#929a96;     /* Estados inactivos */
  --ui-radius:7px;                /* Curvatura sutil de interfaz pro */
}

.lib{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  padding:8px;
  background:var(--ui-bg-panel);  /* amarillo huevo base de aplicación */
  border-right:1px solid var(--ui-border);
}

.lib-group{min-width:0;display:flex;flex-direction:column;gap:7px;}
.lib-group h3{
  display:flex;
  align-items:center;
  width:100%;
  min-height:30px;
  margin:2px 0 1px;
  padding:0 5px;
  background:transparent;
  color:var(--ui-text-main);
  font-size:18px;
  font:600 11px/1.35 inherit;
  font-family:Inter,Arial,sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.lib-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:8px 7px;
}
.lib-item{display:flex;flex-direction:column;min-width:0;gap:4px;}

.lib .it{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  width:100%;
  min-width:0;
  min-height:130px;
  padding:10px 7px;
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  background:var(--ui-bg-card);
  text-align:center;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.025);
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.lib .it:hover{
  background:#fff;
  border-color:#cbd4ce;
  box-shadow:0 3px 8px rgba(30,55,40,.07);
  transform:translateY(-1px);
}
.lib .it:focus-visible{outline:2px solid #318850;outline-offset:2px;}
.lib .it img{
  width:70px;
  height:70px;
  flex:0 0 70px;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.lib .it span{min-width:0;width:100%;}
.lib .it b{
  display:block;
  color:var(--ui-text-main);
  font-size:10.5px;
  font-weight:600;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.lib .it small{
  display:block;
  margin-top:3px;
  color:var(--ui-text-disabled);
  font-size:9px;
  font-weight:400;
  line-height:1.3;
  overflow-wrap:anywhere;
}

/* Selectores de ancho: control segmentado */
.lib .ctl{min-width:0;padding:0 1px 3px;background:transparent;}
.width-options{
  display:flex;
  align-items:center;
  width:100%;
  gap:2px;
  margin-top:2px;
  padding:2px;
  border-radius:var(--ui-radius);
  background:#ffda96;
  box-sizing:border-box;
}
.width-options label{
  position:relative;
  display:inline-flex;
  flex:1 1 0;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:5px 1px;
  border-radius:5px;
  color:var(--ui-text-muted);
  font-size:9.5px;
  font-weight:500;
  cursor:pointer;
  user-select:none;
  transition:color .12s ease,background-color .12s ease,box-shadow .12s ease;
}
.width-options label:hover{color:var(--ui-text-main);}
.width-options input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
.width-options label:has(input:checked){
  background:var(--ui-bg-active);
  color:var(--ui-text-main);
  font-weight:650;
  box-shadow:0 1px 2px rgba(0,0,0,.09),0 0 1px rgba(0,0,0,.12);
}
.width-options label:has(input:focus-visible){outline:2px solid #318850;outline-offset:1px;}

.btn-cotizar{
  position:absolute;
  left:10px;
  bottom:38px;
  z-index:20;
  padding:12px 22px;
  border:0;
  border-radius:3px;
  background:#ffda96;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.16);
}

.btn-cotizar:hover{
  background:#fea500;
}
/* =========================================================
   6. PANTALLA COMPLETA
   ========================================================= */
.btn-fullscreen{
  position:absolute;
  right:-125px;
  bottom:12px;
  z-index:10;
  padding:9px 12px;
  border:1px solid #d5ded9;
  border-radius:5px;
  background:#fff;
  color:#46534d;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.btn-fullscreen,
.btn-reiniciar,
.btn-quitar {
  padding: 16px 12px;
  border: 1px solid #d5ded9;
  border-radius: 5px;
  background: #fff;
  color: #46534d;
  font: inherit;
  font-size: 13px;
  letter-spacing: .08em;
  cursor: pointer;
}
.bar button.btn-reiniciar,
.bar button.btn-quitar {
  border: 1px solid #d5ded9;
  background: #fff;
  color: #46534d;
  font-size: 13px;
}
.btn-fullscreen:hover,
.btn-reiniciar:hover,
.btn-quitar:hover {
  background: #e9eeeb;
  border-color: #8fa09a;
}
.app:fullscreen{
  width:100%;
  max-width:none;
  height:100%;
  min-height:0;
  margin:0;
  border:0;
  background:#fff;
}
/* FULLSCREEN: limpiar las barras sin ocultar su contenido */
.app:fullscreen .cv{
  position:relative;
}
.app:fullscreen .hint{
	display: none
	}
.app:fullscreen .bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  border:0;
  padding:8px 18px;
}
.app:fullscreen .bar button{
  color:#46534d;
}
/* =========================================================
   7. RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .app{display:grid;grid-template-columns:180px minmax(0,1fr);width:100%;max-width:100%;height:85vh;min-height:550px;}
  .lib{display:flex;flex-direction:column;gap:12px;width:auto;min-width:0;overflow-y:auto;padding:6px;}
  .lib-group{width:100%;}
  .lib-grid{grid-template-columns:minmax(0,1fr);}
  .lib .it{flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;min-height:74px;padding:7px 8px;text-align:left;}
  .lib .it img{width:48px;height:56px;flex:0 0 48px;}
  .lib .it span{width:auto;text-align:left;}
  .lib .ctl{padding:0 5px 5px;}
  .cv{min-width:0;width:auto;overflow:hidden;}
  #cfg{min-width:0;}
  .btn-fullscreen{right:22px;bottom:35px;}
  .btn-reiniciar{padding: 2px 12px;font-size: 10px;letter-spacing: .05em;}
}

@media (max-width:600px) and (orientation:portrait){
  .app{grid-template-columns:64px minmax(0,1fr);width:100%;height:85vh;min-height:450px;}
  .lib{width:auto;padding:4px;gap:8px;}
  .lib-group h3,.lib .ctl,.lib .it span{display:none;}
  .lib-grid{gap:5px;}
  .lib .it{flex-direction:row;justify-content:center;align-items:center;min-height:54px;padding:3px;gap:0;}
  .lib .it img{width:42px;height:46px;flex:0 0 42px;object-fit:contain;}
  .hint{font-size:10px;padding:7px;}
  .bar{padding:7px;font-size:11px;gap:5px;}
  .btn-fullscreen{right:8px;bottom:65px;padding:9px;font-size:11px;}
  .btn-cotizar{left:8px;bottom:65px;padding:9px;font-size:11px;}
}

/* En pantallas chicas, COMPOSICIÓN queda fuera del lienzo hasta que se solicite. */
.btn-cfg-toggle,.dc-cfg-close{display:none;}
@media(max-width:900px){
.btn-cfg-toggle{
  display:block;
  position:absolute;
  z-index:20;
  top:60px;
  right:22px;
  left:auto;
  padding:8px 11px;
  border:1px solid #d5ded9;
  border-radius:5px;
  background:#fff;
  color:#46534d;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
  #cfg{display:none;}
  #cfg.cfg-open{display:block;position:fixed;z-index:1000;top:12px;right:12px;bottom:100px;width:min(150px,calc(100vw - 24px));max-width:none;overflow-y:auto;background:#fff;border:1px solid #d5ded9;box-shadow:0 8px 30px rgba(0,0,0,.22);}
  .dc-cfg{width:100%;max-width:none;min-height:100%;border:0;}
  .dc-cfg-head{display:flex;align-items:center;justify-content:space-between;margin-top:0;padding:7px 12px;font-size:11px;}
  .dc-cfg-body{padding:14px;}
  .dc-cfg-scroll-container{max-height:none;}
  .dc-cfg-close{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer;}
}