/* ============================================================
   TAB6.CSS — Aceros estructurales.
   Layout: panel único con dos columnas (propiedades | STAAD)
   ============================================================ */

/* ---------- OVERRIDE MAIN-CONTAINER ---------- */
.main-container {
  grid-template-columns: 1fr;
  padding: 0.5rem 2rem;
}
.center-column { max-width: 100%; }


/* ---------- CONTENEDOR GENERAL ---------- */
.aceros-container {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
  width:          100%;
  max-width:      1100px;
  margin:         0 auto;
}

/* ---------- PANEL BASE ---------- */
.panel-acero {
  background:    var(--white);
  border-radius: 16px;
  padding:       1.5rem;
  box-shadow:    0 4px 16px var(--shadow);
  position:      relative;
  overflow:      hidden;
}
.panel-acero::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     4px;
  background: linear-gradient(90deg, var(--accent-blue), var(--secondary-blue));
}

/* ---------- SELECTOR COMPARTIDO ---------- */
.selector-acero-row {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  flex-wrap:     wrap;
  margin-bottom: 1.25rem;
}
.selector-acero-row label {
  font-size:   0.875rem;
  font-weight: 500;
  color:       var(--text-light);
  white-space: nowrap;
}
.select-acero {
  flex:          1;
  min-width:     100px;
  max-width:     360px;
  width:         100%;
  padding:       0.6rem 0.75rem;
  border:        2px solid var(--light-blue);
  border-radius: 8px;
  background:    var(--white);
  color:         var(--text-dark);
  font-family:   'Inter', sans-serif;
  font-size:     0.9rem;
  cursor:        pointer;
  transition:    all 0.3s ease;
}
.select-acero:hover { border-color: var(--accent-blue); }
.select-acero:focus {
  outline:      none;
  border-color: var(--secondary-blue);
  box-shadow:   0 0 0 3px rgba(74, 144, 197, 0.15);
}

/* ---------- PLACEHOLDER ---------- */
.placeholder-seleccion {
  text-align:  center;
  color:       var(--text-light);
  font-size:   0.875rem;
  font-style:  italic;
  padding:     1.5rem 0 0.5rem;
}

/* ---------- CUERPO DEL PANEL: 2 columnas ---------- */
.panel-cuerpo {
  display:     flex;
  gap:         0;
  align-items: start;
}

/* Columna izquierda: propiedades — ancho fijo, ~45% del espacio */
.col-propiedades {
  flex:          0 0 420px;
  min-width:     0;
  padding-right: 1.75rem;
}

/* Divisor vertical sutil */
.divisor-vertical {
  width:       1px;
  align-self:  stretch;
  background:  var(--light-blue);
  flex-shrink: 0;
}

/* Columna derecha: STAAD — toma el resto */
.col-staad {
  flex:         1;
  min-width:    0;
  padding-left: 1.75rem;
}

/* ---------- SUB-TÍTULOS DE COLUMNA ---------- */
.col-titulo {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  font-family:   'Montserrat', sans-serif;
  font-size:     0.88rem;
  font-weight:   700;
  color:         var(--primary-blue);
  margin-bottom: 1rem;
}
.col-titulo i { color: var(--accent-blue); font-size: 0.88rem; }

/* ---------- FICHA: encabezado ---------- */
.ficha-header {
  margin-bottom:  1rem;
  padding-bottom: 0.75rem;
  border-bottom:  2px solid var(--light-blue);
}
.ficha-nombre {
  font-family: 'Montserrat', sans-serif;
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--primary-blue);
}
.ficha-meta {
  display:    flex;
  align-items: center;
  gap:        0.75rem;
  margin-top: 0.3rem;
  flex-wrap:  wrap;
}
.ficha-norma {
  font-size:  0.8rem;
  color:      var(--text-light);
  font-style: italic;
}
.badge-grupo {
  display:        inline-flex;
  align-items:    center;
  background:     var(--light-blue);
  color:          var(--secondary-blue);
  padding:        0.15rem 0.6rem;
  border-radius:  20px;
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.03em;
}
.ficha-descripcion {
  margin-top:  0.5rem;
  font-size:   0.82rem;
  color:       var(--text-light);
  line-height: 1.5;
}

/* ---------- PARÁMETROS: título de grupo ---------- */
.param-grupo-titulo {
  font-family:    'Montserrat', sans-serif;
  font-size:      0.68rem;
  font-weight:    700;
  color:          var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding:        0.75rem 0 0.4rem;
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
}
.param-grupo-titulo::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--light-blue);
}

/* ---------- PARÁMETROS: ítem ---------- */
.param-item {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.42rem 0;
  border-bottom:   1px solid var(--light-blue);
  gap:             0.5rem;
}
.param-label {
  font-size:   0.8rem;
  color:       var(--text-light);
  flex-shrink: 0;
}
.param-valor {
  font-size:   0.87rem;
  font-weight: 600;
  color:       var(--primary-blue);
  text-align:  right;
  white-space: nowrap;
}
.param-valor.fy { color: #2e7d32; }
.param-valor.fu { color: #e65100; }

/* ---------- STAAD: nota informativa ---------- */
.staad-nota {
  display:       flex;
  align-items:   flex-start;
  gap:           0.5rem;
  margin-top:    1rem;
  padding:       0.65rem 0.9rem;
  background:    var(--bg);
  border:        1px solid var(--light-blue);
  border-radius: 8px;
  font-size:     0.78rem;
  color:         var(--text-light);
  line-height:   1.5;
}
.staad-nota i {
  color:      var(--accent-blue);
  font-size:  0.8rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Placeholder sin selección */
.staad-placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      180px;
  background:      var(--bg);
  border:          2px dashed var(--light-blue);
  border-radius:   10px;
  color:           var(--text-light);
  font-size:       0.85rem;
  font-style:      italic;
  text-align:      center;
  padding:         1rem;
}

/* Toolbar con botón copiar */
.code-toolbar {
  display:         flex;
  justify-content: flex-end;
  margin-bottom:   0.35rem;
}
.btn-copiar-code {
  background:    rgba(74, 144, 197, 0.12);
  border:        1px solid rgba(74, 144, 197, 0.3);
  border-radius: 6px;
  padding:       0.3rem 0.8rem;
  cursor:        pointer;
  color:         var(--accent-blue);
  font-family:   'Inter', sans-serif;
  font-size:     0.75rem;
  display:       flex;
  align-items:   center;
  gap:           0.35rem;
  transition:    all 0.25s ease;
}
.btn-copiar-code:hover { background: rgba(74, 144, 197, 0.25); }
.btn-copiar-code.copiado {
  background:   rgba(46, 125, 50, 0.15);
  border-color: rgba(46, 125, 50, 0.35);
  color:        #388e3c;
}

/* Bloque de código */
.code-block {
  background:    #1e2d3d;
  border-radius: 10px;
  padding:       1rem 1.25rem;
  overflow-x:    auto;
  max-width:     100%;
}
.code-block pre {
  margin:      0;
  font-family: 'Courier New', Courier, monospace;
  font-size:   0.8rem;
  line-height: 1.8;
  color:       #cdd9e5;
  white-space: pre-wrap;
  word-break:  break-all;
}
.code-keyword { color: #79b8ff; }
.code-param   { color: #85e89d; }
.code-value   { color: #f8c555; }
.code-comment { color: #6a737d; font-style: italic; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* En pantallas medianas: la col de propiedades se achica un poco */
@media (max-width: 900px) {
  .col-propiedades { flex: 0 0 320px; }
}

/* En pantallas chicas: el STAAD va debajo */
@media (max-width: 700px) {
  .panel-cuerpo {
    flex-direction: column;
  }
  .col-propiedades {
    flex:           unset;
    width:          100%;
    padding-right:  0;
    padding-bottom: 1.25rem;
  }
  .divisor-vertical {
    width:  100%;
    height: 1px;
    margin: 0 0 1.25rem 0;
  }
  .col-staad {
    padding-left: 0;
    min-width:    0;
    width:        100%;
  }
  .main-container { padding: 0.5rem 1rem; }
}