 
  <script src="../../lib/js/jquery-3.4.1.min.js"></script>  
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Gestión de riesgos</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item"><a href="#">Administración</a></li>
              <li class="breadcrumb-item"><a href="#">Gestión de riesgos</a></li>
              <li class="breadcrumb-item active">Dashboard</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <?php 

      require_once "../../controlador/administracion.controlador.php";

      // Instancia de la clase Administración 
      $administracionControlador = new Controladoradministracion();

      // Ejecución de la función controladora encargada de consultar perfiles.
      $procesos = $administracionControlador->ctrConsultaProcesos();

      $gruposZona = $administracionControlador->ctrConsultaGrupoZona();

    ?>

    <!-- Lista de riesgos relacionados a un proceso -->
    <div class="modal fade" id="modal_riesgos_proceso" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="titulo_riesgos_proceso"></h5>  
          </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-sm-12">
                  <table class="table">
                    <thead>
                      <tr>
                        <th>Titulo</th>
                        <th>Descripción</th>
                        <th>Estado</th>
                        <th>Fecha creación</th>
                      </tr>
                    </thead>
                    <tbody id="lista_riesgo_proceso">

                    </tbody>
                  </table>
                </div>  
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-success" data-dismiss="modal">Cerrar <i class="fas fa-times ml-3"></i></button>
            </div>
        </div>
      </div>
    </div>

    <!-- Main content -->
    <section class="content">

      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <!-- Default box -->
            <div class="card">
              <div class="card-header">
                <h3 class="card-title" onclick="consultaNivelConsecuenciaProceso();"><i class="far fa-chart-bar"></i> Dashboard</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
                    <i class="fas fa-minus"></i></button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
                    <i class="fas fa-times"></i></button>
                </div>
              </div>
              <form autocomplete="off" id="frm_informe_riesgos">  
                <div class="card-body">
                  <div class="row">
                    
                    <!-- En el siguiente div se ubican las graficas -->
                    
                    <div class="col-sm-12" id="charts_riesgos">
                        
                    </div>

                    <div class="row" id="matriz">
                      <!-- <div class="col-sm-1 mt-5 text-center" id="text_probabilidad" style="margin-left: 0px; font-weight: bold; writing-mode: vertical-lr; transform: rotate(180deg);">
                        PROBABILIDAD
                      </div>
                      <div class="col-sm-10 mt-5">
                        <p class="h4"><b>Matriz de riesgos detallando cantidad de riesgos por nivel de consecuencia</b></p>
                        <table class="table table-bordered" id="matriz">
                          
                        </table>
                      </div> -->
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer text-right">
                  <!-- <button class="btn btn-success" type="button" >Guardar <i class="far fa-save ml-3"></i></button> -->
                </div>
              </form>
              <!-- /.card-footer-->
            </div>
            <!-- /.card -->
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>