/* ============================================================
   TAB4.CSS — Elementos tipo placa
   Grilla 2×2 de secciones (Chapas / Rejillas / Grating M. / Grating P.)
   Cada sección tiene imagen a la izquierda y datos a la derecha.
   Sigue las convenciones de base.css y tab8.css (variables y estructura).
   ============================================================ */

/* ---------- OVERRIDE MAIN-CONTAINER (igual que tab8) ---------- */
.main-container {
  grid-template-columns: 1fr;
  padding: 0.5rem 2rem;
}

.center-column {
  max-width: 100%;
}



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

/* ---------- GRILLA 2×2 DE SECCIONES ---------- */
.placas-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;  /* 2 columnas iguales */
  gap:                   1.5rem;
}

/* ---------- TARJETA DE SECCIÓN ---------- */
/* Cada una de las 4 secciones ocupa una celda de la grilla */
.placa-card {
  background:    var(--white);
  border-radius: 16px;
  box-shadow:    0 4px 16px var(--shadow);
  display:       flex;
  flex-direction: column;
  overflow:      hidden;        /* que el borde superior quede recortado */
  position:      relative;
}

/* Barra superior de color (igual que .bloque::before en tab8) */
.placa-card::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     4px;
  background: linear-gradient(90deg, var(--accent-blue), var(--secondary-blue));
  z-index:    1;
}

/* ---------- TÍTULO DE LA TARJETA ---------- */
.placa-card-titulo {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  padding:     1rem 1.25rem 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--primary-blue);
  border-bottom: 1px solid var(--light-blue);
  margin-top:  4px;   /* compensar el ::before */
}

.placa-card-titulo i {
  color:     var(--accent-blue);
  font-size: 0.95rem;
}

/* ---------- CUERPO: IMAGEN + DATOS lado a lado ---------- */
.placa-card-cuerpo {
  display: flex;
  flex:    1;
  padding: 1rem 1.25rem 1.25rem;
  gap:     1rem;
}

/* ── Columna izquierda: imagen ── */
.placa-imagen-col {
  flex:           0 0 140px;   /* ancho fijo, no crece ni se encoge */
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
}

.placa-imagen {
  width:         100%;
  aspect-ratio:  1 / 1;       /* cuadrada */
  object-fit:    cover;
  border-radius: 10px;
  border:        2px solid var(--light-blue);
  background:    var(--bg);   /* color de fondo mientras carga */
}

/* Texto debajo de la imagen cuando no hay archivo */
.placa-imagen-caption {
  font-size:  0.7rem;
  color:      var(--text-light);
  text-align: center;
  font-style: italic;
}

/* ── Columna derecha: datos ── */
.placa-datos-col {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            0.45rem;
  min-width:      0;           /* evita overflow en flex */
}

/* ---------- FILAS DE PROPIEDAD ---------- */
/* Cada propiedad es una fila: etiqueta a la izquierda, valor a la derecha */
.prop-fila {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.82rem;
  padding:     0.35rem 0;
  border-bottom: 1px solid var(--light-blue);
}

.prop-fila:last-child {
  border-bottom: none;
}

.prop-label {
  flex:        0 0 110px;   /* ancho fijo para alinear valores */
  font-weight: 500;
  color:       var(--text-light);
  white-space: nowrap;
}

.prop-valor {
  flex:      1;
  color:     var(--text-dark);
  font-weight: 400;
  min-width: 0;
  word-break: break-word;
}

/* ---------- SELECTORES DENTRO DE PROP-FILA ---------- */
.prop-select {
  flex:          1;
  padding:       0.3rem 0.4rem;
  border:        2px solid var(--light-blue);
  border-radius: 6px;
  background:    var(--white);
  color:         var(--text-dark);
  font-family:   'Inter', sans-serif;
  font-size:     0.82rem;
  cursor:        pointer;
  transition:    all 0.2s ease;
  min-width:     0;
}

.prop-select:hover { border-color: var(--accent-blue); }

.prop-select:focus {
  outline:      none;
  border-color: var(--secondary-blue);
  box-shadow:   0 0 0 3px rgba(74, 144, 197, 0.15);
}

/* ---------- LINK DEL CATÁLOGO ---------- */
.prop-catalogo-link {
  color:           var(--accent-blue);
  text-decoration: none;
  font-size:       0.82rem;
  transition:      color 0.2s ease;
}

.prop-catalogo-link:hover {
  color: var(--secondary-blue);
  text-decoration: underline;
}

/* Estilo cuando no hay link disponible */
.prop-catalogo-vacio {
  color:      var(--text-light);
  font-style: italic;
  font-size:  0.82rem;
}

/* ---------- HIGHLIGHT: valores numéricos principales ---------- */
.prop-valor-destacado {
  color:       var(--primary-blue);
  font-weight: 600;
  font-size:   0.88rem;
}


/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

/* Tablet: columnas más chicas */
@media (max-width: 900px) {
  .placa-imagen-col {
    flex: 0 0 110px;
  }
  .prop-label {
    flex: 0 0 95px;
  }
}

/* Tablet chica: la grilla pasa a 1 columna */
@media (max-width: 700px) {
  .placas-grid {
    grid-template-columns: 1fr;
  }

  .placa-imagen-col {
    flex: 0 0 130px;
  }
}

/* Celular */
@media (max-width: 480px) {
  .main-container {
    padding: 0.5rem 1rem;
  }

  /* En celular muy chico, imagen arriba y datos abajo */
  .placa-card-cuerpo {
    flex-direction: column;
    padding:        0.75rem;
  }

  .placa-imagen-col {
    flex:           0 0 auto;
    flex-direction: row;
    align-items:    flex-start;
    gap:            0.75rem;
  }

  .placa-imagen {
    width:  100px;
    height: 100px;
  }

  .prop-label {
    flex: 0 0 90px;
  }

}