/* YOLKA_MASTER_REFRESH_R45B_CSS */

#detailPage .master-facts .yolka-value-total-refresh{
  position:relative;
  padding-bottom:38px;
}

/*
  Boton abajo y a la derecha.
*/
#detailPage .master-fact-refresh{
  position:absolute;

  right:9px;
  bottom:7px;

  width:29px;
  height:29px;

  padding:0;
  margin:0;

  border:1px solid rgba(32,65,105,.20);
  border-radius:8px;

  background:rgba(255,255,255,.76);

  cursor:pointer;

  opacity:.80;

  transition:
    opacity .15s ease,
    background .15s ease,
    border-color .15s ease;
}

#detailPage .master-fact-refresh:hover{
  opacity:1;
  background:#fff;
  border-color:rgba(32,65,105,.35);
}

/*
  Icono de refresh dibujado con CSS.
  No usa caracter Unicode ni icono hardcodeado.
*/
#detailPage .master-fact-refresh::before{
  content:"";

  position:absolute;

  left:7px;
  top:6px;

  width:11px;
  height:11px;

  border:2px solid currentColor;
  border-left-color:transparent;

  border-radius:50%;
}

#detailPage .master-fact-refresh::after{
  content:"";

  position:absolute;

  right:5px;
  top:5px;

  width:0;
  height:0;

  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:5px solid currentColor;

  transform:rotate(-28deg);
}

#detailPage .master-fact-refresh:disabled{
  cursor:default;
  opacity:.45;
}

/*
  Durante el refresh gira solamente el dibujo.
*/
#detailPage .master-fact-refresh.is-refreshing::before{
  animation:
    yolka-r45b-refresh-spin
    .70s
    linear
    infinite;
}

@keyframes yolka-r45b-refresh-spin{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}
/* YOLKA_MASTER_REFRESH_VISUAL_R45C
   Icono mas grande y mas abajo.
   R45B funcional permanece intacto.
*/

#detailPage .master-fact-refresh{
  width:36px !important;
  height:36px !important;

  right:7px !important;
  bottom:1px !important;

  border-radius:9px !important;
}

#detailPage .master-fact-refresh::before{
  left:9px !important;
  top:8px !important;

  width:14px !important;
  height:14px !important;

  border-width:2.5px !important;
  border-left-color:transparent !important;
}

#detailPage .master-fact-refresh::after{
  right:6px !important;
  top:6px !important;

  border-top-width:5px !important;
  border-bottom-width:5px !important;
  border-left-width:6px !important;
}


/* YOLKA_MASTER_REFRESH_OUTSIDE_R45D
   Boton completamente fuera de la tarjeta de totales.
*/

#detailPage .master-facts{
  position:relative !important;
  overflow:visible !important;

  /*
     Reserva espacio debajo para que el boton no tape
     ningun elemento posterior.
  */
  margin-bottom:44px !important;
}

/*
  La ultima celda deja de ser el contenedor
  de posicionamiento del boton.
*/
#detailPage .master-facts .yolka-value-total-refresh{
  position:static !important;
  padding-bottom:0 !important;
}

/*
  El boton ahora toma como referencia master-facts.
  Queda completamente por debajo de la tarjeta.
*/
#detailPage .master-fact-refresh{
  position:absolute !important;

  right:2px !important;
  bottom:-41px !important;

  width:36px !important;
  height:36px !important;

  z-index:5 !important;
}