.btnAprendeMx { box-sizing:border-box; border-color:rgba(0,0,0,0.2); border-bottom-style:solid; border-width:2px; box-shadow:0 0 4px rgba(0, 0, 0, 0.1); overflow:hidden;}
.btnAprendeMx::before { box-sizing:border-box; content:''; position:absolute; left:0; top:0; width:46px; height:46px; pointer-events:none; display:none; }
.btnAprendeMx[data-active="true"]:active { border-style:solid; border-width:1px; }
.btnAprendeMx[data-active="true"]:active::before { background-position:1px 1px; width:47px; border-width:1px; }
.btnAprendeMx[data-active="false"] { border-width: 0; }

/* estilo de los botones (https://flatuicolors.com/) */
/* boton turquoise, cuadro icono green_sea */
.turquoise, .verdeAgua { background:#1abc9c !important; }
.turquoise::before, .verdeAgua::before { background:#16a085; }
/* boton emerald, cuadro icono nephritis */
.emerald, .verdeClaro { background:#2ecc71 !important; }
.emerald::before, .verdeClaro::before { background:#27ae60; }
/* boton peter_river, cuadro icono belize_hole */
.peter_river, .azul { background:#3498db !important; }
.peter_river::before, .azul::before { background:#2980b9; }
/* boton amethyst, cuadro icono wisteria */
.amethyst, .lavanda { background:#9b59b6 !important; }
.amethyst::before, .lavanda::before { background:#8e44ad; }
/* boton wet_asphalt, cuadro icono midnight_blue */
.wet_asphalt, .azulOscuro { background:#34495e !important; }
.wet_asphalt::before, .azulOscuro::before { background:#2c3e50; }
/* boton sun_flower, cuadro icono orange */
.sun_flower, .amarillo { background:#f1c40f !important; }
.sun_flower::before, .amarillo::before { background:#f39c12; }
/* boton carrot, cuadro icono pumpkin */
.carrot, .naranja { background:#e67e22 !important; }
.carrot::before, .naranja::before { background:#d35400; }
/* boton alizarin, cuadro icono pomegranate */
.alizarin, .bermellon { background:#e74c3c !important; }
.alizarin::before, .bermellon::before { background:#c0392b; }
/* boton concrete, cuadro icono asbestos */
.concrete, .cian { background:#95a5a6 !important; }
.concrete::before, .cian::before { background:#7f8c8d; }
/* boton clouds, cuadro icono silver */
.clouds, .blanco { background:#ecf0f1 !important; }
.clouds::before, .blanco::before { background:#bdc3c7; }


/* estilo de los botones con iconos */
.calcular::before { background-image: url('icon_calcular.png'); display:block; }
.casa::before { background-image: url('icon_casa.png'); display:block; }
.cerrar::before { background-image: url('icon_cerrar.png'); display:block; }
.corazon::before{ background-image: url('icon_corazon.png'); display:block; }
.correo::before { background-image: url('icon_correo.png'); display:block; }
.dislike::before { background-image: url('icon_dislike.png'); display:block; }
.estrella::before { background-image: url('icon_estrella.png'); display:block; }
.home::before { background-image: url('icon_home.png'); display:block; }
.huella::before{ background-image: url('icon_huella.png'); display:block; }
.iniciar::before { background-image: url('icon_iniciar.png'); display:block; }
.regresar::before { background-image: url('icon_regresar.png'); display:block; }
.investigar::before { background-image: url('icon_investigar.png'); display:block; }
.libro::before { background-image: url('icon_libro.png'); display:block; }
.like::before { background-image: url('icon_like.png'); display:block; }
.pi::before { background-image: url('icon_pi.png'); display:block; }
.puntero::before { background-image: url('icon_puntero.png'); display:block; }
.reloj::before { background-image: url('icon_reloj.png'); display:block; }

.arriba::before { background-image: url('icon_arriba.png'); display:block; }
.abajo::before { background-image: url('icon_abajo.png'); display:block; }
.izquierda::before { background-image: url('icon_izquierda.png'); display:block; }
.derecha::before { background-image: url('icon_derecha.png'); display:block; }

.play::before { background-image: url('icon_play.png'); display:block; }
.detener::before, .stop::before { background-image: url('icon_stop.png'); display:block; }
.pause::before { background-image: url('icon_pause.png'); display:block; }
.restart::before { background-image: url('icon_restart.png'); display:block; }
.on_off::before { background-image: url('icon_on_off.png'); display:block; }
.on::before { background-image: url('icon_on.png'); display:block; }
.off::before { background-image: url('icon_off.png'); display:block; }
.paso_adelante::before { background-image: url('icon_paso_adelante.png'); display:block; }
.paso_atras::before { background-image: url('icon_paso_atras.png'); display:block; }
.al_inicio::before { background-image: url('icon_al_inicio.png'); display:block; }
.al_final::before { background-image: url('icon_al_final.png'); display:block; }

.agregar::before { background-image: url('icon_agregar.png'); display:block; }
.borrar::before { background-image: url('icon_borrar.png'); display:block; }
.checar::before { background-image: url('icon_checar.png'); display:block; }
.mapa::before { background-image: url('icon_mapa.png'); display:block; }
.ruta::before { background-image: url('icon_ruta.png'); display:block; }
.enter::before { background-image: url('icon_enter.png'); display:block; }
