/*-------------------------------
    CSS para ejemplos JavaScript
    (cc) 3con14, mar-2017
   ------------------------------- */
* { 
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  transition : all 0.25s ease-in;
}
:focus { outline: 0 none transparent; }
body {
  min-height       : 100vh;
  font             : 16px/1.2 sans-serif;
  display          : flex;
  /* background-color : rgba(70, 130, 180, 0.6); */
  background-color : tan;
}
h1,h2,h3,h4,h5,h6,p { padding: 0.2rem; }
hr { 
  border           : 0;
  margin           : 0.5em 0;
  height           : 1px;
  background-color : rgba(0, 0, 0, 0.5);
}
ol, ul { margin: 0.5em 0 0.5em 35px; }

.txt-S  { font-size  :  80%;   }
.txt-M  { font-size  :  90%;   }
.txt-L  { font-size  : 110%;   }
.dcha   { text-align : right;  }
.centro { text-align : center; }

.contenedor {
  max-width        : 800px;
  width            : 90%;
  min-height       : 90vh;
  margin           : auto;
  padding          : 2rem;
  border-top       : 10px solid rgba(0, 0,0, 0.2);
  background-color : rgba(0, 0, 0, 0.05);
}
label, input { 
  margin  : 0.5rem 0.1rem 0.5rem 0.1rem;
  padding : 0.3rem 0.2rem 0.2rem 0.2rem;
  border  : 0;
}
input { 
  background-color : rgba(255,255,255,0.2);
  font             : 1.1em "Lucida Console", "Courier New", monospace;
}
textarea {
  max-width  : 100vw;
  width      : 96%;
  min-height : 10vh;
  display    : block;
  border     : 1px solid #fff;
  overflow   : auto;
  padding    : 1em;
  margin     : 0.5em;
  box-shadow : 1px 1px 5px 1px rgba(0, 0, 0, 0.3) inset;
}
.inp-txt { 
  border      : 1px solid #fff;
  font        : 1.1em "Lucida Console", "Courier New", monospace;
  box-shadow  : 0.5px 0.5px 3px 0 rgba(112, 112, 112, 0.8) inset;
}
.inp-chk {
  width          : 1.2rem;
  height         : 1.2rem;
  vertical-align : middle;
  display        : inline-block;
}
#info, #resultado {
  min-height : 5vh;
  margin     : 1em 0;
  padding    : 0.5em;
  overflow   : auto;    
}
#titulo { 
  font : 900 1.3em/1.2 verdana,sans-serif;
  color: rgba(0, 0, 0, 0.6);
}
#info { 
  font             : italic 1em/1.1 serif;
  background-color : rgba(255, 255, 255, 0.1);
  overflow         : auto;  
}
#resultado { 
  background-color : rgba(0, 0, 0, 0.05);
  font             : 100 1.2em/1.2 "Lucida Console", "Courier New", monospace;
}
/* BOTONES */
 button {
  margin    : 0.5em 0.25em;
  padding   : 0.25em 0.5em;
  cursor    : pointer;
  font-size : 1em;
  border    : 0;
 }
.boton {
  text-align    : center; text-decoration : none;
  font-family   : "Lucida Console", "Courier New", monospace;
  display       : inline-block; position : relative;
  background    : #777; color : #FFF;
  text-shadow   : 1px 1px 1px rgba(0, 0, 0, 0.7);
  padding       : 5px 13px; margin : 10px 5px;
  border-radius : 100px; white-space : nowrap;
  border        : 1px solid transparent;
  transition    : all 0.1s ease-in-out;
  border        : 1px solid transparent;  
}
.gris         { background: #777; box-shadow: 0px 3px 0 0 hsla(0, 0%, 27%, 1); }
.gris:hover   { background: hsla(0, 0%, 57%, 1); }
.rojo         { background: #E74C3C; box-shadow: 0px 3px 0 0 hsla(6, 63%, 26%, 1); }
.rojo:hover   { background: hsla(5, 100%, 70%, 1); }
.verde        { background: #2ECC71; box-shadow: 0px 3px 0 0 hsla(145, 63%, 22%, 1); }
.verde:hover  { background: hsla(145, 70%, 60%, 1); }
.azul         { background: #3498DB; box-shadow: 0px 3px 0 0 hsla(204, 54%, 34%, 1); }
.azul:hover   { background: hsla(204, 77%, 60%, 1); }
.rojo:active, .verde:active, .azul:active, .gris:active { transform: translateY(4px); }
.rojo:hover, .verde:hover, .azul:hover, .gris:hover     { border: 1px solid rgba(255, 255, 255, 0.4); }

.bg-b { background-color: rgba(0, 0, 0, 0.5); color: #fff;}
.bg-w { background-color: rgba(255, 255, 255, 0.5); color #000;}
.bg-r { background-color: rgba(255, 0, 0, 0.5); }
.bg-v { background-color: rgba(0,255, 0, 0.5); }
.bg-a { background-color: rgba(0, 0, 255, 0.5); }
.bg-n,.bg-b,.bg-r, .bg-v, .bg-a { color: #000; padding: 5px 10px; }

/* TABLAS */

table {
  margin : auto;
  width  : 100%;
}

td {
  text-align : right;
  padding    : 4px;
}
td { background-color: rgba(255, 0, 0, 0.1); }
tr { background-color: rgba(255, 0, 0, 0.1); }
tr:first-child { background-color: rgba(0, 0, 0, 0.2); }
td:first-child { background-color: rgba(255, 128, 0, 0.2); }
tr:hover { background-color: rgba(255, 255, 255, 0.3); }
td:hover { box-shadow: 0 0 0 2px #fff; cursor: pointer; }

table td:hover:before{
content          : attr(data-n);
padding          : 10px;
position         : absolute;
transform        : translate(-70%,-120%);
font             : 1.1em/1 sans-serif;
color            : #fff;
text-shadow      : 2px 2px 6px #333;
background-color : rgba(255, 0, 0, 1);
}