:root {
   --field-width: 250px;
   --icon-height: 24px;
}

.perf-contenedor {
   display: grid;
   grid-template-columns: repeat(40, 1fr);
   grid-template-rows: repeat(40, minmax(20px, auto));
   grid-gap: 5px;
   max-width: var(--ancho);
   width: 98%;
   margin: auto;
}

.item-avatar {
   background: transparent;
   grid-column: 2 / 9;
   grid-row: 2 / 9;
   box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%);
   text-align: center;
   display: inline-flex;
   align-content: center;
   align-items: end;
}

.item-avatar > FIGURE {
   display: inline-flex;
   align-content: center;
   align-items: end;
}

.item-avatar > FIGURE > IMG {
   width: 100%;
   height: auto;
}

.item-cambiar-avatar {
   background: transparent;
   grid-column: 2 / 40;
   grid-row: 10 / 11;
   text-align: left;
}

.item-nombre {
   background: transparent;
   grid-column: 2 / 40;
   grid-row: 11 / 12;
   text-align: left;
}

.item-cumple {
   background: transparent;
   grid-column: 2 / 40;
   grid-row: 12 / 13;
   text-align: left;
}

.item-alta {
   background: transparent;
   grid-column: 2 / 40;
   grid-row: 13 / 14;
   text-align: left;
}

.body-row {
   font-family: var(--font1);
   font-size: 1.3rem;
   padding:10px 0;
}

.body-row-caption {
   display: inline-block;
   font-weight: bold;
   width:  var(--field-width);
}

.body-row-value {
   display: inline-flex;
   align-content: center;
   align-items: center;
}

INPUT {
   font-size: 1.3rem;
   padding: 0.3rem 1rem;
   background: white;
   color: black;
   box-sizing: border-box;
}

DIV > .bModal > INPUT {
   width: 90%;
   margin: 10px 0;
   border:1px silver solid;
}

.icon {
   margin: 0 5px;
   cursor: pointer;
   height: var(--icon-height);
}

.icon > FIGURE > IMG {
   height: var(--icon-height);
}

.icon > FIGURE > IMG:hover {
   -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
   filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, 0.3));
}

INPUT[type="file"] {
   visibility: hidden;
   cursor: pointer;
}

.get-data-form {
    display: grid;
    grid-template-columns: repeat(49, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    font-weight: normal;
}

.button-get-data-form {
   margin: 0;
   font-size: 1.2rem;
   grid-column: 2 / 10;
   grid-row: 14 / 14;
}

.input-get-name-form {
   font-size: 20px;
   padding: 0.3rem 1rem;
   grid-column: 12 / 38;
}

.alert-warning {
   padding: 1rem;
   font-family: var(--font0);
   font-size: 24px;
   background: #fff3cd;
   border-color: #ffeeba;
   color: #856404;
   border: 1px solid transparent;
}

.advertencia-small{
   color: #838383;
   font-size: small;
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.modal-content {
  background-color: #fff;
  margin: 20% auto;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 400px;
  text-align: center;
}
.btn-deleteAceptar {
  padding: 10px 20px;
  background-color: #00456e;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-deleteAceptar:hover {
  background-color: #012d47;
}
.btn-deleteCancelar {
  padding: 10px 20px;
  background-color: #a30505;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-deleteCancelar:hover {
  background-color: #790606;
}


@media (max-width: 768px) {
   .item-avatar {
      grid-column: 2 / 19;
   }
   .perf-contenedor {
      margin-top: 10px;
      grid-template-rows: repeat(40, auto);
   }

   INPUT {
      width: 100%;
      margin-bottom: 0.5rem;
   }

   .button-get-data-form {
      grid-column: 2 / 40;
   }
}

.item-modificar {
   color: blue;
   background: transparent;
   grid-column: 2 / 40;
   grid-row: 14 / 15;
   text-align: left;
}

.item-modificar > A {
   color: blue!important;
}
.item-eliminar {
   color: red;
   background: transparent;
   grid-column: 2 / 40;
   grid-row: 15 / 15;
   text-align: left;
}

.item-eliminar > A {
   color: red!important;
}