.espacios-estructuras{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.espacios-estructuras-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--card);
  box-shadow:var(--shadow);
}

.espacios-estructuras-heading h3{
  margin:3px 0 7px;
  color:var(--ink);
  font-size:20px;
  font-weight:900;
}

.espacios-estructuras-heading p:not(.espacios-estructuras-kicker){
  max-width:780px;
  margin:0;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  line-height:1.55;
}

.espacios-estructuras-kicker,
.espacios-estructuras-state-kicker{
  margin:0;
  color:var(--core-orange, #FF5C33);
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.espacios-estructuras-heading-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

.espacios-estructuras-version{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}

.espacios-estructuras-metrics{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.espacios-estructuras-metric{
  display:flex;
  flex-direction:column;
  min-height:122px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow);
}

.espacios-estructuras-metric-label{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.espacios-estructuras-metric-value{
  margin-top:8px;
  color:var(--ink);
  font-size:30px;
  font-weight:900;
  line-height:1;
}

.espacios-estructuras-metric-detail{
  margin-top:auto;
  padding-top:10px;
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  line-height:1.35;
}

.espacios-estructuras-toolbar{
  display:grid;
  grid-template-columns:minmax(220px, 1.45fr) repeat(3, minmax(145px, .7fr)) auto;
  align-items:end;
  gap:10px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow);
}

.espacios-estructuras-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.espacios-estructuras-field > span{
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.espacios-estructuras-field input,
.espacios-estructuras-field select{
  width:100%;
  min-height:40px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:12px;
  outline:none;
  background:var(--card);
  color:var(--ink);
  font:inherit;
  font-size:12px;
  font-weight:650;
}

.espacios-estructuras-field input:focus,
.espacios-estructuras-field select:focus{
  border-color:rgba(255,92,51,.55);
  box-shadow:0 0 0 3px rgba(255,92,51,.08);
}

.espacios-estructuras-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(255,92,51,.25);
  border-radius:12px;
  background:var(--core-orange, #FF5C33);
  color:#fff;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.espacios-estructuras-button.is-secondary{
  background:rgba(255,92,51,.08);
  color:var(--core-orange, #FF5C33);
}

.espacios-estructuras-button.is-ghost{
  border-color:var(--border);
  background:transparent;
  color:var(--muted);
}

.espacios-estructuras-context-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}

.espacios-estructuras-context-line strong{
  color:var(--ink);
}

.espacios-estructuras-workspace{
  display:grid;
  grid-template-columns:minmax(255px, 330px) minmax(0, 1fr);
  align-items:start;
  gap:16px;
}

.espacios-estructuras-list-panel{
  position:sticky;
  top:16px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card);
  box-shadow:var(--shadow);
}

.espacios-estructuras-list{
  display:flex;
  flex-direction:column;
  max-height:720px;
  overflow:auto;
  padding:8px;
  gap:6px;
}

.espacios-estructuras-list-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  gap:5px;
  padding:13px 12px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.espacios-estructuras-list-item:hover{
  border-color:var(--border);
  background:rgba(127,127,127,.05);
}

.espacios-estructuras-list-item.is-active{
  border-color:rgba(255,92,51,.24);
  background:rgba(255,92,51,.08);
}

.espacios-estructuras-list-code{
  color:var(--core-orange, #FF5C33);
  font-size:10px;
  font-weight:900;
  letter-spacing:.03em;
}

.espacios-estructuras-list-name{
  overflow:hidden;
  max-width:100%;
  color:var(--ink);
  font-size:12px;
  font-weight:850;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.espacios-estructuras-list-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}

.espacios-estructuras-list-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.espacios-estructuras-integrity-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border:1px solid rgba(225,165,0,.28);
  border-radius:999px;
  background:rgba(225,165,0,.09);
  color:var(--ink);
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.espacios-estructuras-version-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  margin-top:2px;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.espacios-estructuras-version-badge.is-versioned{
  border-color:rgba(255,92,51,.24);
  background:rgba(255,92,51,.08);
  color:var(--core-orange, #FF5C33);
}

.espacios-estructuras-version-badge.is-legacy{
  background:rgba(127,127,127,.06);
  color:var(--muted);
}

.espacios-estructuras-detail-panel{
  min-width:0;
}

.espacios-estructuras-detail-card{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
  padding:22px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--card);
  box-shadow:var(--shadow);
}

.espacios-estructuras-detail-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.espacios-estructuras-detail-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.espacios-estructuras-detail-card.is-collapsed{
  gap:14px;
}

.espacios-estructuras-detail-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.espacios-estructuras-detail-title-row h3{
  margin:4px 0 0;
  color:var(--ink);
  font-size:20px;
  font-weight:900;
}

.espacios-estructuras-detail-code{
  margin:5px 0 0;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.espacios-estructuras-detail-meta,
.espacios-estructuras-source-meta{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

.espacios-estructuras-source-meta{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.espacios-estructuras-detail-meta > div,
.espacios-estructuras-source-meta > div{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(127,127,127,.035);
}

.espacios-estructuras-detail-meta span,
.espacios-estructuras-source-meta span{
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.espacios-estructuras-detail-meta strong,
.espacios-estructuras-source-meta strong{
  overflow-wrap:anywhere;
  color:var(--ink);
  font-size:11px;
  font-weight:800;
}

.espacios-estructuras-section,
.espacios-estructuras-warnings{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.espacios-estructuras-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}

.espacios-estructuras-section-heading > div{
  display:flex;
  align-items:baseline;
  gap:9px;
}

.espacios-estructuras-section-heading span{
  color:var(--ink);
  font-size:12px;
  font-weight:900;
}

.espacios-estructuras-section-heading strong{
  color:var(--core-orange, #FF5C33);
  font-size:10px;
  font-weight:900;
}

.espacios-estructuras-section-heading p{
  margin:0;
  color:var(--muted);
  font-size:9px;
  font-weight:600;
  text-align:right;
}

.espacios-estructuras-warning{
  padding:10px 12px;
  border:1px solid rgba(225,165,0,.25);
  border-radius:12px;
  background:rgba(225,165,0,.08);
  color:var(--ink);
  font-size:10px;
  font-weight:700;
  line-height:1.45;
}

.espacios-estructuras-components-wrap,
.espacios-estructuras-tree-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
}

.espacios-estructuras-components-table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
}

.espacios-estructuras-components-table th,
.espacios-estructuras-components-table td{
  padding:11px 12px;
  border-bottom:1px solid var(--border);
  color:var(--ink);
  font-size:10px;
  text-align:left;
  vertical-align:middle;
}

.espacios-estructuras-components-table th{
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.espacios-estructuras-components-table tr:last-child td{
  border-bottom:0;
}

.espacios-estructuras-components-table .is-number{
  width:90px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.espacios-estructuras-component-name,
.espacios-estructuras-component-category{
  display:block;
}

.espacios-estructuras-component-name{
  font-weight:800;
}

.espacios-estructuras-component-category{
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  font-weight:700;
}

.espacios-estructuras-link{
  padding:0;
  border:0;
  background:transparent;
  color:var(--core-orange, #FF5C33);
  font:inherit;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.espacios-estructuras-terminal{
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}

.espacios-estructuras-tree-wrap{
  padding:8px;
  background:rgba(127,127,127,.025);
}

.espacios-estructuras-tree,
.espacios-estructuras-tree ul{
  margin:0;
  padding:0;
  list-style:none;
}

.espacios-estructuras-tree-node{
  margin:0;
  padding:0;
}

.espacios-estructuras-tree-row{
  display:flex;
  align-items:center;
  min-height:34px;
  gap:8px;
  padding-left:calc(var(--tree-level) * 22px + 6px);
  border-radius:9px;
}

.espacios-estructuras-tree-row:hover{
  background:rgba(127,127,127,.045);
}

.espacios-estructuras-tree-connector{
  width:10px;
  height:1px;
  flex:0 0 auto;
  background:var(--border);
}

.espacios-estructuras-tree-structure{
  display:inline-flex;
  align-items:center;
  min-width:0;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

.espacios-estructuras-tree-branch{
  margin:0;
  padding:0;
}

.espacios-estructuras-tree-summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
}

.espacios-estructuras-tree-summary::-webkit-details-marker{
  display:none;
}

.espacios-estructuras-tree-toggle{
  position:relative;
  width:20px;
  height:20px;
  flex:0 0 auto;
  border:1px solid var(--border);
  border-radius:7px;
  background:rgba(127,127,127,.035);
}

.espacios-estructuras-tree-toggle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-right:1.5px solid var(--core-orange, #FF5C33);
  border-bottom:1.5px solid var(--core-orange, #FF5C33);
  transform:translate(-60%, -50%) rotate(-45deg);
  transition:transform .16s ease;
}

.espacios-estructuras-tree-branch[open] > .espacios-estructuras-tree-summary .espacios-estructuras-tree-toggle::before{
  transform:translate(-50%, -65%) rotate(45deg);
}

.espacios-estructuras-tree-summary:hover .espacios-estructuras-tree-toggle{
  border-color:rgba(255,92,51,.34);
  background:rgba(255,92,51,.07);
}

.espacios-estructuras-tree-code{
  color:var(--core-orange, #FF5C33);
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}

.espacios-estructuras-tree-name{
  overflow:hidden;
  color:var(--ink);
  font-size:10px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.espacios-estructuras-tree-qty{
  margin-left:auto;
  color:var(--muted);
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}

.espacios-estructuras-tree-warning{
  color:#b27a00;
  font-size:9px;
  font-weight:900;
}

.espacios-estructuras-state{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
}

.espacios-estructuras-state-card,
.espacios-estructuras-detail-empty,
.espacios-estructuras-empty{
  padding:24px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--card);
  color:var(--muted);
  box-shadow:var(--shadow);
}

.espacios-estructuras-state-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:min(520px, 100%);
}

.espacios-estructuras-state-card:not(.is-error){
  flex-direction:row;
  align-items:center;
  gap:12px;
}

.espacios-estructuras-state-card.is-error{
  border-color:rgba(255,92,51,.28);
}

.espacios-estructuras-state-title{
  margin:9px 0 3px;
  color:var(--ink);
  font-size:16px;
  font-weight:900;
}

.espacios-estructuras-state-card:not(.is-error) .espacios-estructuras-state-title{
  margin:0;
}

.espacios-estructuras-state-copy{
  margin:0 0 14px;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
}

.espacios-estructuras-spinner{
  width:22px;
  height:22px;
  flex:0 0 auto;
  border:3px solid var(--border);
  border-top-color:var(--core-orange, #FF5C33);
  border-radius:50%;
  animation:espacios-estructuras-spin .8s linear infinite;
}

@keyframes espacios-estructuras-spin{
  to{transform:rotate(360deg)}
}
}

@media (max-width:1120px){
  .espacios-estructuras-toolbar{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .espacios-estructuras-toolbar .is-search{
    grid-column:1 / -1;
  }

  .espacios-estructuras-workspace{
    grid-template-columns:minmax(220px, 280px) minmax(0, 1fr);
  }

  .espacios-estructuras-detail-meta{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:820px){
  .espacios-estructuras-heading{
    flex-direction:column;
  }

  .espacios-estructuras-detail-header{
    flex-direction:column;
  }

  .espacios-estructuras-detail-actions{
    width:100%;
  }

  .espacios-estructuras-detail-actions .espacios-estructuras-button{
    width:100%;
  }

  .espacios-estructuras-heading-actions{
    width:100%;
    justify-content:flex-start;
  }

  .espacios-estructuras-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .espacios-estructuras-workspace{
    grid-template-columns:1fr;
  }

  .espacios-estructuras-list-panel{
    position:static;
  }

  .espacios-estructuras-list{
    max-height:340px;
  }

  .espacios-estructuras-source-meta{
    grid-template-columns:1fr;
  }
}

@media (max-width:580px){
  .espacios-estructuras-metrics,
  .espacios-estructuras-toolbar,
  .espacios-estructuras-detail-meta{
    grid-template-columns:1fr;
  }

  .espacios-estructuras-toolbar .is-search{
    grid-column:auto;
  }

  .espacios-estructuras-context-line,
  .espacios-estructuras-section-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .espacios-estructuras-section-heading p{
    text-align:left;
  }

  .espacios-estructuras-detail-card{
    padding:16px;
  }
}


/* P-UI1 · presentación compacta y consistente de Producto */
.espacios-estructuras-heading{align-items:center;padding:15px 18px;border-radius:18px;box-shadow:none}
.espacios-estructuras-heading h3{margin:0;font-size:19px}
.espacios-estructuras-heading-actions{margin-left:auto}
.espacios-estructuras-metric{min-height:88px;padding:15px 17px;box-shadow:none}
.espacios-estructuras-metric-value{margin-top:7px;font-size:28px}
.espacios-estructuras-toolbar,.espacios-estructuras-list-panel,.espacios-estructuras-detail-card{box-shadow:none}


/* P5A.1: control global del detalle dentro de Árbol técnico */
.espacios-estructuras-tree-heading-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}

.espacios-estructuras-tree-heading-actions p{
  max-width:520px;
}

.espacios-estructuras-section-heading.is-tree-control{
  align-items:center;
}

.espacios-estructuras-detail-card.is-collapsed .espacios-estructuras-tree-wrap{
  background:rgba(127,127,127,.02);
}

@media (max-width: 820px){
  .espacios-estructuras-section-heading.is-tree-control,
  .espacios-estructuras-tree-heading-actions{
    align-items:flex-start;
    flex-direction:column;
  }
  .espacios-estructuras-tree-heading-actions{ width:100%; }
}


/* P5A.2: tres niveles de lectura de Estructuras */
.espacios-estructuras-hierarchy-control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.espacios-estructuras-hierarchy-control > div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.espacios-estructuras-hierarchy-control span{
  font-weight:800;
}

.espacios-estructuras-hierarchy-control p{
  margin:0;
  color:var(--muted);
  font-size:.82rem;
}

.espacios-estructuras-tree-section{
  margin-top:14px;
}

@media (max-width: 820px){
  .espacios-estructuras-hierarchy-control{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* P5A.3: un único control para detalle por niveles */
.espacios-estructuras-hierarchy-control{
  justify-content:flex-end;
}

.espacios-estructuras-hierarchy-toggle{
  min-width:190px;
}

@media (max-width: 820px){
  .espacios-estructuras-hierarchy-control{
    align-items:stretch;
  }

  .espacios-estructuras-hierarchy-toggle{
    width:100%;
  }
}

/* P5B · edición versionada de Estructuras */
.espacios-estructuras-editor-card{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.espacios-estructuras-editor-note{
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,92,51,.06);
  color:var(--muted);
  font-size:.86rem;
  line-height:1.45;
}

.espacios-estructuras-editor-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.espacios-estructuras-editor-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.espacios-estructuras-editor-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 150px 40px;
  gap:10px;
  align-items:end;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(127,127,127,.035);
}

.espacios-estructuras-editor-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.espacios-estructuras-editor-field > span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.espacios-estructuras-editor-field select,
.espacios-estructuras-editor-field input,
.espacios-estructuras-editor-field textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  font:inherit;
  outline:none;
}

.espacios-estructuras-editor-field select,
.espacios-estructuras-editor-field input{
  min-height:42px;
  padding:0 11px;
}

.espacios-estructuras-editor-field textarea{
  min-height:92px;
  padding:11px;
  resize:vertical;
}

.espacios-estructuras-editor-field select:focus,
.espacios-estructuras-editor-field input:focus,
.espacios-estructuras-editor-field textarea:focus{
  border-color:rgba(255,92,51,.55);
  box-shadow:0 0 0 3px rgba(255,92,51,.09);
}

.espacios-estructuras-editor-field.is-reason{
  margin-top:2px;
}

.espacios-estructuras-editor-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:42px;
  border:1px solid var(--border);
  border-radius:12px;
  background:transparent;
  color:var(--muted);
  font-size:22px;
  cursor:pointer;
}

.espacios-estructuras-editor-remove:hover:not(:disabled){
  border-color:rgba(255,92,51,.42);
  color:#ff5c33;
  background:rgba(255,92,51,.06);
}

.espacios-estructuras-editor-remove:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.espacios-estructuras-editor-error{
  padding:12px 14px;
  border:1px solid rgba(220,53,69,.25);
  border-radius:12px;
  background:rgba(220,53,69,.08);
  color:var(--ink);
  font-size:.86rem;
}

.espacios-estructuras-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

@media (max-width:820px){
  .espacios-estructuras-editor-row{
    grid-template-columns:1fr 120px 40px;
  }
}

@media (max-width:580px){
  .espacios-estructuras-editor-row{
    grid-template-columns:1fr;
  }

  .espacios-estructuras-editor-remove{
    width:100%;
  }

  .espacios-estructuras-editor-actions{
    flex-direction:column-reverse;
  }

  .espacios-estructuras-editor-actions .espacios-estructuras-button{
    width:100%;
  }
}


/* P7B · Variantes de estructura */
.espacios-estructuras-variants{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 0 2px;
  border-top:1px solid var(--border);
}

.espacios-estructuras-variants-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.espacios-estructuras-variants-heading > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.espacios-estructuras-variants-heading span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.espacios-estructuras-variants-heading strong{
  color:var(--ink);
  font-size:.9rem;
}

.espacios-estructuras-variants-heading p{
  margin:0;
  max-width:520px;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.45;
  text-align:right;
}

.espacios-estructuras-variant-buttons{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.espacios-estructuras-variant-button,
.espacios-estructuras-variant-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--card);
  color:var(--muted);
  font:inherit;
  font-size:.8rem;
  font-weight:800;
  cursor:pointer;
  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}

.espacios-estructuras-variant-button{
  padding:0 12px;
}

.espacios-estructuras-variant-add{
  width:36px;
  padding:0;
  color:#ff5c33;
  font-size:1.18rem;
}

.espacios-estructuras-variant-button:hover:not(:disabled),
.espacios-estructuras-variant-add:hover:not(:disabled){
  border-color:rgba(255,92,51,.42);
  background:rgba(255,92,51,.06);
  color:var(--ink);
  transform:translateY(-1px);
}

.espacios-estructuras-variant-button.is-active{
  border-color:rgba(255,92,51,.58);
  background:rgba(255,92,51,.1);
  color:var(--ink);
}

.espacios-estructuras-variant-current-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ff5c33;
  box-shadow:0 0 0 3px rgba(255,92,51,.12);
}

.espacios-estructuras-variant-button:disabled,
.espacios-estructuras-variant-add:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
}

.espacios-estructuras-current-badge{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 11px;
  border:1px solid rgba(52,168,83,.2);
  border-radius:11px;
  background:rgba(52,168,83,.08);
  color:var(--ink);
  font-size:.78rem;
  font-weight:800;
}

.espacios-estructuras-variant-error{
  padding:10px 12px;
  border:1px solid rgba(220,53,69,.24);
  border-radius:11px;
  background:rgba(220,53,69,.07);
  color:var(--ink);
  font-size:.82rem;
}

@media (max-width:820px){
  .espacios-estructuras-variants-heading{
    flex-direction:column;
  }

  .espacios-estructuras-variants-heading p{
    max-width:none;
    text-align:left;
  }
}


/* P7B.1 · Buscador de componentes */
.espacios-estructuras-autocomplete{
  position:relative;
  min-width:0;
}

.espacios-estructuras-autocomplete input[type="search"]{
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  font:inherit;
  outline:none;
}

.espacios-estructuras-autocomplete input[type="search"]:focus{
  border-color:rgba(255,92,51,.55);
  box-shadow:0 0 0 3px rgba(255,92,51,.09);
}

.espacios-estructuras-autocomplete-results{
  display:none;
  position:absolute;
  z-index:80;
  top:calc(100% + 6px);
  left:0;
  right:0;
  max-height:286px;
  overflow:auto;
  padding:6px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow:0 18px 42px rgba(15,23,42,.16);
}

.espacios-estructuras-autocomplete:focus-within
  .espacios-estructuras-autocomplete-results:not(:empty){
  display:block;
}

.espacios-estructuras-autocomplete-option{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:2px 9px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.espacios-estructuras-autocomplete-option:hover,
.espacios-estructuras-autocomplete-option:focus-visible{
  background:rgba(255,92,51,.08);
  outline:none;
}

.espacios-estructuras-autocomplete-option strong{
  grid-row:1 / span 2;
  color:#ff5c33;
  font-size:.82rem;
}

.espacios-estructuras-autocomplete-option span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.88rem;
  font-weight:650;
}

.espacios-estructuras-autocomplete-option small{
  color:var(--muted);
  font-size:.7rem;
}

.espacios-estructuras-autocomplete-empty{
  padding:10px;
  color:var(--muted);
  font-size:.82rem;
}

html[data-theme="dark"]
  .espacios-estructuras-autocomplete-results,
body.dark
  .espacios-estructuras-autocomplete-results{
  box-shadow:0 18px 42px rgba(0,0,0,.32);
}