/* ============================================================
   ELEMENTOS-PLACA.CSS — Tab "Elementos tipo placa"
   Grilla 2×2 de paneles (Chapas / Metal Desplegado / Grating M. / Grating P.)
   Cada panel tiene imagen a la izquierda y datos a la derecha.
   Sigue las convenciones de base.css (variables y estructura).
   ============================================================ */

/* ---------- OVERRIDE MAIN-CONTAINER ---------- */
.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:            var(--space-xl);
  width:          100%;
  max-width:      1200px;
  margin:         2rem auto;
}

/* ---------- GRILLA 2×2 DE PANELES ---------- */
.placas-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-lg);
}

/* ---------- TARJETA DE PANEL ---------- */
/* container-type habilita @container queries: el layout interno
   responde al ancho real de la card, no al viewport.            */
.placa-card {
  background:      var(--white);
  border-radius:   var(--radius-lg);
  box-shadow:      var(--shadow-card);
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  position:        relative;
  container-type:  inline-size;
  container-name:  placa;
}

/* Barra superior de color */
.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 DEL PANEL ---------- */
.placa-card-titulo {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1rem 1.25rem 0.75rem;
  font-family:     var(--font-heading);
  font-size:       0.95rem;
  font-weight:     700;
  color:           var(--primary-blue);
  border-bottom:   1px solid var(--light-blue);
  margin-top:      4px;   /* compensar el ::before */
}

/* Grupo izquierdo: ícono + texto del título */
.placa-titulo-izq {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
}

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

/* ---------- BOTÓN INFO — igual visual a .btn-refs de nav-bar ---------- */
.btn-info-placa {
  background:    linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
  color:         var(--white);
  border:        none;
  padding:       0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight:   500;
  font-size:     0.8rem;
  display:       flex;
  align-items:   center;
  gap:           0.35rem;
  transition:    all 0.3s ease;
  box-shadow:    0 2px 8px var(--shadow);
  cursor:        pointer;
  font-family:   var(--font-body);
  white-space:   nowrap;
  flex-shrink:   0;
}

.btn-info-placa:hover {
  transform:  translateY(-1px);
  box-shadow: 0 4px 12px var(--shadow-hover);
}

.btn-info-placa i { font-size: 0.75rem; }

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

/* ── Columna izquierda: imagen ── */
.placa-imagen-col {
  flex:           0 0 140px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-sm);
}

.placa-imagen {
  width:         100%;
  aspect-ratio:  1 / 1;
  object-fit:    cover;
  border-radius: var(--radius-md);
  border:        2px solid var(--light-blue);
  background:    var(--bg);
}

.placa-imagen-caption {
  width:      100%;          /* cubre exactamente el ancho de la imagen */
  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;
}

/* ---------- FILAS DE PROPIEDAD ---------- */
.prop-fila {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  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;
  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: var(--radius-xs);
  background:    var(--white);
  color:         var(--text-dark);
  font-family:   var(--font-body);
  font-size:     0.82rem;
  cursor:        pointer;
  transition:    all var(--transition);
  min-width:     0;
}

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

.prop-select:focus {
  outline:    none;
  border-color: var(--secondary-blue);
  box-shadow: var(--shadow-focus);
}

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


/* ==========================================================
   MODAL INFORMATIVO DE PANEL
   Reutiliza las clases base de core/modal-base.css
   (.modal, .modal-overlay, .modal-content, .modal-close,
    .modal-header, .modal-titulo)
   ========================================================== */

/* Tamaño específico del contenido */
.modal-info-placa-content {
  width:      min(520px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
}

/* Cuerpo del modal: texto e imágenes futuras */
.modal-info-cuerpo {
  padding:    1.25rem 1.75rem 1.75rem;
  font-size:  0.88rem;
  color:      var(--text-dark);
  line-height: 1.65;
}

.modal-info-cuerpo p {
  margin: 0 0 0.75rem;
}

.modal-info-cuerpo p:last-child {
  margin-bottom: 0;
}

/* → Responsive en elementos-placa.responsive.css */

/* ── Botones "Información" de cada card ────────────────────────
   Ocultos temporalmente: las páginas de detalle aún no están
   implementadas. Cuando estén listas, eliminar esta regla.
   ─────────────────────────────────────────────────────────── */
.btn-info-placa {
  display: none;
}