/* ============================================================
   components.css — Componentes reutilizables
   Cada bloque es independiente y se usa en render.js.
   ============================================================ */

/* ── Etiqueta de sección ── */
.section-label {
  font-family:    var(--font-display);
  font-size:      var(--text-11);
  font-weight:    600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--color-orange);
  margin-bottom:  var(--space-xs);
}

/* ── Sección genérica ── */
.section {
  padding:       var(--page-pad-v) var(--space-md);
  border-bottom: var(--border-soft);
}

.section:last-child { border-bottom: none; }

/* ── Bloque de render (imagen de contexto) ── */
.render-block {
  border-bottom:  var(--border-soft);
  padding:        var(--page-pad-v) var(--space-md) var(--space-sm);
  display:        flex;
  flex-direction: column;
}

.render-block__area {
  background:      var(--color-gray-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  min-height:      200px;
}

.render-block__area img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.render-block__placeholder {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--color-gray-soft);
}

/* ── Bloque de diagrama ── */
.diagram-block {
  padding:        var(--page-pad-v) var(--space-md) var(--space-sm);
  display:        flex;
  flex-direction: column;
  border-bottom:  var(--border-soft);
}

.diagram-block__svg-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-sm) 0;
}

.diagram-block__svg-wrap img {
  max-width: 100%;
  width:     260px;
}

/* ── Bloque de descripción ── */
.desc-block {
  padding: var(--page-pad-v) var(--space-md);
}

.desc-block__text {
  font-size:   var(--text-16);
  line-height: 1.6;
  color:       var(--color-gray-mid);
}

/* Tags */
.tags {
  display:    flex;
  gap:        var(--space-xs);
  margin-top: var(--space-sm);
  flex-wrap:  wrap;
}

.tag {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--color-navy);
  border:         1px solid var(--color-navy);
  padding:        3px 10px;
}

/* ── Tabla de medidas ── */
.medidas-table { width: 100%; }

.medidas-table th {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--color-gray-soft);
  font-weight:    600;
  padding:        0 0 6px;
  text-align:     left;
  border-bottom:  var(--border-soft);
}

.medidas-table td {
  padding:       7px 0;
  font-size:     var(--text-16);
  color:         var(--color-black);
  border-bottom: var(--border-soft);
}

.medidas-table td.val {
  font-family: var(--font-display);
  font-size:   var(--text-21);
  font-weight: 600;
  color:       var(--color-navy);
}

.medidas-table td.ref {
  font-size: var(--text-13);
  color:     var(--color-gray-soft);
}

.medidas-table tr:last-child td { border-bottom: none; }

/* ── Grid de especificaciones ── */
.specs-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-sm) var(--space-xs);
}

.spec-key {
  font-family:    var(--font-display);
  font-size:      var(--text-11);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--color-gray-soft);
  margin-bottom:  3px;
}

.spec-val {
  font-size:   var(--text-16);
  color:       var(--color-black);
  font-weight: 500;
}

/* ── Muestras de color ── */
.colors-row {
  display:     flex;
  gap:         var(--space-md);
  margin-top:  var(--space-sm);
  align-items: flex-start;
}

.color-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
}

.color-swatch {
  width:  28px;
  height: 28px;
  border: 1px solid var(--color-gray-line);
}

.color-name {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  color:          var(--color-gray-mid);
  letter-spacing: 0.5px;
}

/* ── Tabla de techo recomendado ── */
.techo-table { width: 100%; }

.techo-table th {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--color-gray-soft);
  font-weight:    600;
  padding:        0 0 6px;
  text-align:     left;
  border-bottom:  var(--border-strong);
}

.techo-table td {
  padding:       7px 0;
  font-size:     var(--text-16);
  color:         var(--color-black);
  border-bottom: var(--border-soft);
}

.techo-table tr.techo-table__custom td {
  border-bottom: none;
  color:         var(--color-orange);
  font-size:     var(--text-13);
  font-style:    italic;
}

/* ── Precio ── */
.precio-num {
  font-family: var(--font-display);
  font-size:   var(--text-34);
  font-weight: 700;
  color:       var(--color-black);
  line-height: 1;
}

.precio-unit {
  font-size:  var(--text-13);
  color:      var(--color-gray-soft);
  margin-top: 4px;
}

.precio-note {
  font-size:  var(--text-11);
  color:      var(--color-gray-soft);
  margin-top: 6px;
  font-style: italic;
}