:root { --pix-color-primario: #012b43; }



/*Grid*/
.pix-grid * { box-sizing: border-box; }
.pix-grid { display: block; clear: both; font-size: 0 }
.pix-grid.pad-10 .pix-fila > div { padding: 10px }
.pix-fila { width: 100%; }
.pix-fila > div { display: inline-block; font-size: initial; vertical-align: top }
.pix-fila > div { /*border: dotted 1px #f00; Solo para desarrollo*/ }


/*Vista PC*/
.pix-fila > div.pc-0 { display:none; }
.pix-fila > div.pc-1 { width: 8.33% }
.pix-fila > div.pc-2 { width: 16.66% }
.pix-fila > div.pc-3 { width: 25% }
.pix-fila > div.pc-4 { width: 33.33% }
.pix-fila > div.pc-5 { width: 41.66% }
.pix-fila > div.pc-6 { width: 50% }
.pix-fila > div.pc-7 { width: 58.33% }
.pix-fila > div.pc-8 { width: 66.66% }
.pix-fila > div.pc-9 { width: 75% }
.pix-fila > div.pc-10 { width: 83.33% }
.pix-fila > div.pc-11 { width: 91.66% }
.pix-fila > div.pc-12 { width: 100% }

@media only screen and (max-width:1200px) {

    /*Vista TABLET*/
    .pix-fila > div.tb-0 { display:none; }
    .pix-fila > div.tb-1 { width: 8.33% }
    .pix-fila > div.tb-2 { width: 16.66% }
    .pix-fila > div.tb-3 { width: 25% }
    .pix-fila > div.tb-4 { width: 33.33% }
    .pix-fila > div.tb-5 { width: 41.66% }
    .pix-fila > div.tb-6 { width: 50% }
    .pix-fila > div.tb-7 { width: 58.33% }
    .pix-fila > div.tb-8 { width: 66.66% }
    .pix-fila > div.tb-9 { width: 75% }
    .pix-fila > div.tb-10 { width: 83.33% }
    .pix-fila > div.tb-11 { width: 91.66% }
    .pix-fila > div.tb-12 { width: 100% }
}


@media only screen and (max-width:800px) {
    /*Vista MÓVIL*/
    .pix-fila > div.mv-0 { display:none; }
    .pix-fila > div.mv-1 { width: 8.33% }
    .pix-fila > div.mv-2 { width: 16.66% }
    .pix-fila > div.mv-3 { width: 25% }
    .pix-fila > div.mv-4 { width: 33.33% }
    .pix-fila > div.mv-5 { width: 41.66% }
    .pix-fila > div.mv-6 { width: 50% }
    .pix-fila > div.mv-7 { width: 58.33% }
    .pix-fila > div.mv-8 { width: 66.66% }
    .pix-fila > div.mv-9 { width: 75% }
    .pix-fila > div.mv-10 { width: 83.33% }
    .pix-fila > div.mv-11 { width: 91.66% }
    .pix-fila > div.mv-12 { width: 100% }
}


/*Fin de grid*/




/*Controles*/

.pix-campo { display: block; width: 100%; position: relative; padding-bottom: 16px; }
.pix-campo:after { content: ''; display: block; bottom: 16px; height: 2px; width: 0; background-color: transparent; left: 50%; position: absolute; }

body:not(.pix-form-cargado) .pix-campo > label { opacity: 0 }

.pix-campo > label { position: absolute; color: #999; font-size: 16px; line-height: 32px; display: block; top: 0; left: 4px; width: 100%; pointer-events: none; padding: 4px 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
.pix-form-cargado .pix-campo:after { transition: width .3s, left .3s, background-color .1s; }
.pix-form-cargado .pix-campo > label { transition: top .2s, font-size .2s, line-height .2s, color .3s; opacity: 1; }

.pix-campo.pix-foco > label,.pix-campo.pix-relleno > label,.pix-campo.pix-label-fija > label,.pix-campo.pix-no-valido > label { top: 0; font-size: 12px;line-height:12px }
.pix-campo.pix-foco > label { color: var(--pix-color-primario) }
.pix-campo.pix-no-valido > label, .pix-campo.limite >label{ color: #e53935 }
.pix-campo.pix-no-valido:after { width: 100%; left: 0; background-color: #e53935 !important; bottom: 16px; transition: background-color .3s }
.pix-campo.pix-foco:after { width: 100%; left: 0; background-color: var(--pix-color-primario); }
.pix-campo > textarea, .pix-campo > input[type="text"], .pix-campo > input[type="password"], .pix-campo > input[type="email"], .pix-campo > input[type="url"], .pix-campo > input[type="number"], .pix-campo > input[type="tel"], .pix-campo > input[type="search"], .pix-campo > input[type="date"], .pix-campo > input[type="time"], .pix-campo > select { border: none; outline: none; border-bottom: 1px solid rgba(0,0,0,.12); display: block; font-size: 16px; line-height: 32px; margin: 0; padding: 18px 4px 0 4px; width: 100%; background-color: rgba(0,0,0,.012); text-align: left; color: inherit;transition:background-color .1s }

.pix-campo > textarea:read-only, .pix-campo > input[type="text"]:read-only, .pix-campo > input[type="password"]:read-only, .pix-campo > input[type="email"]:read-only, .pix-campo > input[type="url"]:read-only, .pix-campo > input[type="number"]:read-only, .pix-campo > input[type="tel"]:read-only, .pix-campo > input[type="search"]:read-only, .pix-campo > input[type="date"]:read-only, .pix-campo > input[type="time"]:read-only { color:#78909c}
.pix-campo > textarea:disabled, .pix-campo > input[type="text"]:disabled, .pix-campo > input[type="password"]:disabled, .pix-campo > input[type="email"]:disabled, .pix-campo > input[type="url"]:disabled, .pix-campo > input[type="number"]:disabled, .pix-campo > input[type="tel"]:disabled, .pix-campo > input[type="search"]:disabled, .pix-campo > input[type="date"]:disabled, .pix-campo > input[type="time"]:disabled { color: #78909c; cursor:not-allowed }


.pix-campo > textarea{max-width:100%; min-width:100%;  line-height:24px; height:120px; min-height:80px;padding-top:4px}
.pix-campo.pix-textarea {padding-top:16px}
.pix-campo > input, .pix-campo > textarea, .pix-campo > select { border-top-left-radius: 3px; border-top-right-radius: 3px; }
.pix-campo:hover > input, .pix-campo:hover > textarea, .pix-campo:hover > select { background-color: rgba(0,0,0,.02) }
.pix-campo.pix-foco > input, .pix-campo.pix-foco > textarea, .pix-campo.pix-foco > select {  background-color: rgba(0,0,0,.03) }
.pix-campo > input[type="color"] { padding: 1px;  width: 100%; outline: none; height: 24px; cursor: pointer; border-radius: 12px; margin: 0; margin-top: 20px; border: solid 2px rgba(0,0,0,.12); }
.pix-campo > input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border: none; border-radius: 12px;margin:0 }
.pix-campo > input[type="color"]::-webkit-color-swatch { padding: 0; border: none; border-radius: 12px; margin: 0 }

.pix-campo > select { height: 51px; cursor: pointer; }
.pix-campo > select > option { text-indent: 5px; }
.pix-campo .pix-span-error { color: #e53935; display: block; font-size: 12px; position: absolute; bottom: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100% }
.pix-campo .pix-contador-caracteres{ position: absolute; right: 0; font-size: 12px; line-height: 16px; color: #78909c; transition:color .3s}
.pix-campo .pix-texto-info { position: absolute; left: 0; font-size: 12px; line-height: 16px; color: #78909c; transition: color .3s; padding-right: 30px; padding-left: 4px; white-space: nowrap; width: 100%; text-overflow: ellipsis; overflow: hidden; } }
.pix-campo.limite .pix-contador-caracteres { color: #e53935 }
.pix-campo.limite:after { background-color: #e53935; }

.pix-radio > label { color: #222; line-height: 32px; padding-top: 18px; display: block; position: relative; display: inline-block; padding-left: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.pix-radio > label input, .pix-check > label input { position: absolute; opacity: 0; }
.pix-radio > label .pix-marcado{ position: absolute; top: 24px; left: 0; height: 20px; width: 20px; border-radius: 50%; border: solid 2px rgba(0,0,0,.12); }
.pix-radio > label:hover input ~ .pix-marcado, .pix-check > label:hover input ~ .pix-marcado { background-color: rgba(0,0,0,.1); }
.pix-radio > label input:checked ~ .pix-marcado { border-color: var(--pix-color-primario); }
.pix-radio > label .pix-marcado:after { content: ""; position: absolute; display: none; }
.pix-radio > label input:checked ~ .pix-marcado:after, .pix-check > label input:checked ~ .pix-marcado:after { display: block; }
.pix-radio > label .pix-marcado:after { top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #2c2c2c; }

.pix-campo > .pix-radio, .pix-campo > .pix-check{display:inline-block; margin-right:8px}

.pix-check > label { color: #222; line-height: 32px; padding-top: 18px; display: block; position: relative; padding-left: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.pix-check > label .pix-marcado { position: absolute; top: 24px; left: 0; height: 20px; width: 20px; border-radius: 2px; border: solid 2px rgba(0,0,0,.12); }
.pix-check > label input:checked ~ .pix-marcado { border-color: var(--pix-color-primario); background-color: var(--pix-color-primario) }
.pix-check > label .pix-marcado:after { content: "\f00c"; position: absolute; display: none; font-family: 'Font Awesome 5 Pro'; font-weight: bold; color: #fff }
.pix-check > label .pix-marcado:after { width: 100%; line-height: 16px; font-size: 12px; text-align: center; }


/*Fin de controles*/

/*https://www.sitepoint.com/html5-forms-markup/*/
/*https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input*/
/*OJO: Faltan input file*/