/*
Extension de bootstrap que añade el viejo panel por que me gusta

*/

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-success {
  --pn-bg-color: #dff0d8;
  --pn-border-color: #d6e9c6;
  --pn-color: #3c763d;
}

.panel-danger {
  --pn-bg-color: #f2dede;
  --pn-border-color: #ebccd1;
  --pn-color: #a94442;
}

.panel-warning {
  --pn-bg-color: #fcf8e3;
  --pn-border-color: #faebcc;
  --pn-color: #8a6d3b;
}

.panel-info {
  --pn-bg-color: #d9edf7;
  --pn-border-color: #bce8f1;
  --pn-color: #31708f;
}

.panel-heading {
  padding: 15px;
  background-color: var(--pn-bg-color);
  border: 1px solid var(--pn-border-color);
  color: var(--pn-color);
  border-radius: 4px 4px 0 0;
}

.panel-body {
  padding: 15px;
  border-right: 1px solid var(--pn-border-color);
  border-left: 1px solid var(--pn-border-color);
  border-bottom: 1px solid var(--pn-border-color);
  border-radius: 0 0 4px 4px;
}


/*
Ejemplo de uso html
<div class="panel">
  <div class="panel-header">
    <h3>Panel Header</h3>
  </div>
  <div class="panel-body">
    <p>Panel Content</p>
  </div>
*/