/* fondo Modal */
  .📖::before,
  .↗ {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bgM);
    z-index: var(--ziMf);
  }

  .↗ {
    z-index: var(--ziM);
    display: flex;
  }

  .↗ > * {
    display: flex;
  }

  .↗>div {
    position: relative;
    display: flex;
    flex-flow: column;
  }

  .↗ .header {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    top: 0;
    width: 100%;
  }

  .↗ .header>button {
    position: absolute;
    top: 0;
    right: 0;

  }

  .↗ .main {
    overflow-y: auto;
  }

  .↗ .footer {
    z-index: 1;
  }


  /* mensajes */
  .⚠ {
    position: fixed;
    z-index: var(--ziMj);
    width: 100%;
    min-height: var(--eo7);
    /* background: rgb(var(--crE2)); */
    top: -100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--AnVm);
  }

  .mostrar{
    top: var(--eo6);
  }

  .⚠>div {
    max-width: 500px;
    width: 90%;
    background: rgb(var(--crB));
    box-shadow: var(--saM);
    border: solid var(--beB);
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--eo1) var(--eo4) var(--eo1) var(--eo1);
  }

  .cerrarVentana, .cerrarVentanaM {
    position: absolute;
    font-size: 1.5em;
    top: 0;
    right:0;
    width: var(--eo4);
    height: var(--eo4);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .vmV .cerrarVentana, .vmV .cerrarVentanaM{
    background: rgb(var(--crB));
    right: var(--gap);
    top: var(--gap);
  }

  .cerrarVentana:hover, .cerrarVentanaM:hover{
    font-size: 1.75em;
    color: rgb(var(--crS0));
  }

  .⚠ span{
    align-self: flex-start;
  }

  .⚠ span::after {
    content: '';
    font-family: ftI;
    font-size: 1.5em;
    min-width: var(--eo5);
    min-height: var(--eo5);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: var(--eo1);
    padding: var(--eo0);
    border: solid var(--beB) rgba(var(--crB), var(--od3));
    color: rgb(var(--crT3));
  }

  .⚠>div p {
    font-size: var(--fs5);
    letter-spacing: 1px;
    font-weight: bold;
  }

  .⚠.Mj0 div{
    border-color: rgb(var(--crE0));
  }
  .⚠.Mj0 span::after{
    content: '';
    background-color: rgb(var(--crE0));
  }
  .⚠.Mj1 div{
    border-color: rgb(var(--crE1));
  }
  .⚠.Mj1 span::after{
    content: '';
    background-color: rgb(var(--crE1));
  }
  .⚠.Mj2 div{
    border-color: rgb(var(--crE2));
  }
  .⚠.Mj2 span::after{
    content: '';
    background-color: rgb(var(--crE2));
  }

  .⚠ picture{

    align-self: flex-start;

    display: block;
    max-width: 80px;
    width: var(--eo6);
    height: var(--eo6);
    margin-right: var(--eo1);
  }