/* (cc) 3con14
 * HTML...: ejemplo_01.html
 * CSS....: css/estilos00.css
 * JS.....: js/codigo00.js
 * ---------------------------- 
 */

/* Reglas generales
---------------------------------------- */
:root {
    --font1 : "Courier New", monospace;
    --font2 : "Roboto Mono", monospace;
    --font3 : "Share Tech Mono", monospace;
    --font4 : "Ubuntu Mono", monospace;
    --fontS : georgia, serif;
    --fontSS: verdana, sans-serif;
    --ancho : 5em;
}
html { 
    box-sizing       : border-box;
    font             : 14px sans-serif;
    color            : #333;
    background-color : tan;
    text-shadow: 0 0 1px rgba(51, 51, 51, 0.5);
}
*, *::after, *::before {
    box-sizing : inherit;
    margin     : 0;
    padding    : 0;
    transition : all 0.1s ease-in-out;
    outline : 0 none transparent;
}
input:focus { background : rgba(255,255,0,0.5);}

body {
    min-height     : 80vh;
    max-width      : 100vw;
}

/* contenedores
---------------------------------------- */
.contenedor {
    max-width : 800px;
    width     : 90%;
    margin    : 5vh auto;
}
.ejercicio, .datos, .respuesta {
    margin   : 4em 1em 1em 1em;
    position : relative;
}
.ejercicio {
    font  : italic 1.2em/1.3 georgia, serif;
    color : #333;
}
.datos, .acciones,h2 { text-align : center; }

input, .datos, .respuesta {
    font  : 1.2em var(--font3);
    color : #333;
}
.respuesta { 
    font: 900 1.5em var(--font2);
}

.ejercicio::before, .datos::before, .respuesta::before {
    position        : absolute;
    top             : -2em;
    left            : 0;
    right           : 0;
    font            : 900 1.2em/1.5 var(--fontSS);
    margin          : 0 -1em 0.5em -1em;
    color           : #333;
    text-align      : center;
    background-color: rgba(0,0,0,0.05);
    border-bottom   : 1px solid rgba(0, 0, 0, 0.25);
}
.ejercicio::before { content: "Ejercicio"; }
.datos::before     { content: "Datos";     }
.respuesta::before { content: "Respuesta"; }

.cua2x2, .cua3x3 { display  : grid; grid-gap : 1em; }
.cua2x2 {
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows   : 1fr 1fr; */
}
.cua3x3 {
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows   : 1fr 1fr 1fr; */
}


/* Elementos */
img {
    max-width: 100%;
    height: auto;
}
li { margin-left: 35px; }
.num { width: var(--ancho); text-align: right; }
p,ul { margin-bottom: 0.5em}

/* Botones y cajas de texto
---------------------------------------- */
input { 
  margin        : 0.5em 0.5em 0 0;
  border-radius : 4px;
  box-shadow    : 0 0 1px 0 #666;
}
label, input { 
  padding : 0.2rem;
  border  : 0 none transparent;
}
button {
    padding       : 0.5em 1em;
    margin        : 1em 0.5em;
    border-radius : 8px;
    cursor        : pointer;
    font          : 1em var(--font2);
    background    : #E74C3C; color : #FFF;
    text-shadow   : 1px 1px 1px rgba(0, 0, 0, 0.7);

    border    : 0 none transparent;
    box-shadow: 0 3px  0 0 rgba(0,0,0,0.8),
                0 0 0 1px rgba(0,0,0,0.3);
}
button:focus, button:hover { background: hsla(0, 100%, 75%, 1); }
button:active { 
    transform : translateY(2px);
    box-shadow: 0 3px  0 0 rgba(0,0,0,0),
                0 0 0 1px rgba(0,0,0,0.3);
}