/* =========================================
   CONTENEDOR GENERAL
========================================= */

.norma-detalle {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
}

.norma-layout {
  display: flex;
  gap: 26px;
  align-items: stretch;
}

/* =========================================
   SIDEBAR
========================================= */

.norma-sidebar {
  width: 400px;
  min-width: 400px;

  background: #f5f5f5;

  border: 2px solid #3d6acb;
  border-radius: 16px;

  padding: 16px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}

/* =========================================
   TITULO
========================================= */

.norma-titulo {
  background: #3f69c9;
  color: #fff;

  text-align: center;

  padding: 12px 16px;

  border-radius: 12px;

  font-size: 18px;
  font-weight: 700;

  margin-bottom: 14px;
}

/* =========================================
   BOX
========================================= */

.norma-box {
  margin-bottom: 16px;
}

.norma-box label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #000000 !important;
  margin-bottom: 8px;
  line-height: 1.3;
}

/* =========================================
   CHIP
========================================= */

.norma-chip {
  background: #e3e3e3;

  border-radius: 999px;

  padding: 10px 16px;

  min-height: 42px;

  display: flex;
  align-items: center;

  box-sizing: border-box;

  font-size: 13px;
  font-weight: 500;

  color: #111;

  line-height: 1.3;
}

/* =========================================
   NUMERO
========================================= */

.numero-box .norma-chip {
  font-size: 16px;
  font-weight: 700;
}

/* =========================================
   VIGENCIA
========================================= */

.vigencia-group {
  display: flex;
  gap: 10px;
}

.vigencia {
  flex: 1;

  text-align: center;

  background: #b4b4b4;
  color: #fff;

  border-radius: 999px;

  padding: 10px 12px;

  font-size: 13px;
  font-weight: 700;
}

.vigencia.activa {
  background: #78ba1d;
}

.vigencia.inactiva {
  background: #FF0000;
}

/* =========================================
   RELACIONADAS
========================================= */

.relacionadas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.relacionada-item {
  display: flex;
  align-items: center;

  background: #e3e3e3;

  border-radius: 999px;

  padding: 10px 16px;

  text-decoration: none;

  color: #111;

  font-size: 13px;
  font-weight: 500;

  transition: all 0.3s ease;
}

.relacionada-item:hover {
  background: #3f69c9;
  color: #fff;
}

/* =========================================
   EPIGRAFE
========================================= */

.epigrafe {
  font-size: 13px;
  color: #111;
  line-height: 1.7;
}

/* =========================================
   BOTONES
========================================= */

.btn-documento {
  display: block;
  width: 100%;
  background: #3f69c9;
  color: #FFFFFF !important;
  text-align: center;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.btn-documento:hover {
  background: #2950aa;
}

/* =========================================
   PREVIEW PDF
========================================= */

.norma-preview {
  flex: 1;

  background: #f5f5f5;

  border: 2px solid #3d6acb;
  border-radius: 16px;

  padding: 14px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}

.norma-preview iframe {
  width: 100%;
  height: 100%;

  flex: 1;

  border: none;
  border-radius: 10px;

  background: #fff;
}

/* =========================================
   SCROLL SUAVE
========================================= */

.norma-preview iframe::-webkit-scrollbar,
.norma-sidebar::-webkit-scrollbar {
  width: 6px;
}

.norma-preview iframe::-webkit-scrollbar-thumb,
.norma-sidebar::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 20px;
}

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

@media (max-width: 1100px) {

  .norma-layout {
    flex-direction: column;
  }

  .norma-sidebar {
    width: 100%;
    min-width: 100%;
  }

  .norma-preview {
    width: 100%;
    min-height: 800px;
  }

}

@media (max-width: 768px) {

  .norma-detalle {
    padding: 14px;
  }

  .norma-sidebar {
    width: 100%;
    min-width: 100%;
    padding: 14px;
  }

  .norma-titulo {
    font-size: 16px;
  }

  .norma-box label {
    font-size: 14px;
  }

  .norma-chip,
  .vigencia,
  .relacionada-item,
  .btn-documento,
  .epigrafe {
    font-size: 12px;
  }

  .norma-preview {
    min-height: 650px;
  }

}