.container-fluid {
    margin: 0 auto;
    max-width: 800px; /* Cambia este valor según tus necesidades */
    padding: 20px;
    background-color: #f0f0f0;
  }
  #the-canvas {
    border: 1px solid black;
    direction: ltr;
  }
 /* ===== Cabecera del reglamento */
.reglamento-hero {
  background: linear-gradient(135deg, #0b3f3a 0%, #0e5c54 100%);
  color: #fff;
  border-radius: 16px;
  margin-top: 12px;
}
.reglamento-hero .h2 { margin: 0; padding: clamp(16px, 4vw, 28px) 0; text-align:center; }

/* ===== Visor PDF */
.pdf-viewer {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  padding: clamp(12px, 2.5vw, 20px);
}

/* Barra de controles */
.pdf-viewer .controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f7f7f7;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.pdf-viewer .controls .left,
.pdf-viewer .controls .right { display: flex; align-items: center; gap: 10px; }

/* Botones */
.pdf-viewer .btn {
  appearance: none;
  border: 0;
  background: #0e5c54;
  color: #fff;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.pdf-viewer .btn:hover { background: #0b4c46; transform: translateY(-1px); }
.pdf-viewer .btn:active { transform: translateY(0); }
.pdf-viewer .btn:disabled { background: #b6c8c6; cursor: not-allowed; }

/* Lienzo: 100% del ancho, altura auto (la controla el render) */
.canvas-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
  border: 1px solid #eee;
}
#the-canvas {
  display: block;
  width: 100% !important;   /* responsive */
  height: auto !important;  /* mantiene proporción */
  direction: ltr;
}

/* Ajustes responsive */
@media (max-width: 640px){
  .pdf-viewer .controls {
    flex-direction: column;
    align-items: stretch;
  }
  .pdf-viewer .controls .left, .pdf-viewer .controls .right {
    justify-content: space-between;
  }
}