/* ============================================================
   Electronode Unified Cards - Stage
   Corrige títulos mochados y uniforma matriz izquierda.
   ============================================================ */

html, body {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

/* Shell de Materiales/Seguridad */
body .en-stage-shell {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  padding: 18px !important;
  gap: 22px !important;
  overflow: hidden !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* Columnas */
body .en-stage-white-card,
body .en-stage-blue-panel {
  height: calc(100vh - 36px) !important;
  min-height: 0 !important;
  max-height: calc(100vh - 36px) !important;
  box-sizing: border-box !important;
}

body .en-stage-white-card {
  padding: 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  place-items: start center !important;
  align-content: start !important;
}

body .en-stage-blue-panel {
  padding: 44px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  justify-content: center !important;
}

/* Grid de Stage */
body .en-stage-grid,
body .materials-stage-grid,
body .safety-stage-grid,
body .devices-stage-grid {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 12px !important;
  align-content: start !important;
  padding-bottom: 18px !important;
}

/* Mini cards uniformes */
body .en-stage-mini-card,
body .materials-stage-card,
body .safety-stage-card,
body .devices-stage-card,
body [class*="stage-card"] {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  padding: 11px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

/* Imagen de mini card */
body .en-stage-mini-card img,
body .materials-stage-card img,
body .safety-stage-card img,
body .devices-stage-card img,
body [class*="stage-card"] img {
  height: 98px !important;
  min-height: 98px !important;
  max-height: 98px !important;
  width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 9px auto !important;
  flex: 0 0 98px !important;
}

/* Título mini card: más alto para que no se mochen */
body .en-stage-mini-card h3,
body .materials-stage-card h3,
body .safety-stage-card h3,
body .devices-stage-card h3,
body [class*="stage-card"] h3 {
  font-size: 16px !important;
  line-height: 1.08 !important;
  margin: 0 0 6px 0 !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  max-height: 54px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

/* Descripción mini card */
body .en-stage-mini-card p,
body .materials-stage-card p,
body .safety-stage-card p,
body .devices-stage-card p,
body [class*="stage-card"] p {
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: #475569 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

/* Panel azul */
body .en-stage-kicker {
  font-size: clamp(22px, 2vw, 34px) !important;
  margin-bottom: 20px !important;
}

body .en-stage-title {
  font-size: clamp(44px, 4.3vw, 72px) !important;
  line-height: 1.04 !important;
  margin-bottom: 28px !important;
  overflow-wrap: anywhere !important;
}

body .en-stage-desc {
  font-size: clamp(23px, 2.1vw, 35px) !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body .en-stage-meta {
  margin-top: 28px !important;
}

/* Imagen grande en detalle */
body .en-stage-big-img {
  max-width: 100% !important;
  max-height: calc(100vh - 150px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Scrollbars */
body .en-stage-white-card::-webkit-scrollbar,
body .en-stage-blue-panel::-webkit-scrollbar {
  width: 8px !important;
}

body .en-stage-white-card::-webkit-scrollbar-thumb,
body .en-stage-blue-panel::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.35) !important;
  border-radius: 999px !important;
}