/*
* Tiene los estilos generales para todas las páginas.
*/
:root {
    --rojo: #31259a;
    --azul-ppal: #255777;
    --azul-claro: #00A3D8;
    --blanco: white;
    --gris: #403F3F;
    --gris-claro: #DDDDDD;
    --gris-claro2: #969696;
    --verde: #008C23;

    --z-back-2 : -20;
    --z-back : -10;
    --z-normal : 1;
    --z-tooltip : 10;
    --z-index-nav: 100;
    --z-modal : 1000;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.centrar {
    margin-left: auto;
    margin-right: auto;
}

.contenedor {
    width: 90%;
}

body {
    font-family: Helvetica, Arial, sans-serif;
}

a {
    color: var(--azul-claro);
}

/*Botones*/
[class*="btn-"]{
    display: inline-block;
    height: 40px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding-top: 10px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 5px;
    text-transform: uppercase;
}

.btn-rojo{
    background-color: var(--rojo);
    color: var(--blanco);
    border: none;
}

.btn-gris{
    background-color: var(--gris);
    color: var(--blanco);
    border: none;
    text-transform: none;
}

.btn-azul{
    background-color: var(--azul-ppal);
    color: var(--blanco);
    border: none;
}

.btn-whatsapp {
    background-color: var(--verde);
    color: var(--blanco);
}

.btn-whatsapp img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

/*Input*/
.custom-input-text {
    border: none;
    width: 100%;
    height: 30px;
    border-radius: 5px;
    padding-left: 5px;
    color: var(--azul-ppal);
}

/*
Personalización de select, adaptado de:
https://codepen.io/vkjgr/pen/VYMeXp
*/
select.custom-select {
    /* styling */
    color: var(--azul-ppal);
    background-color: white;
    height: 30px;
    border: none;
    font-family: Arial;
    border-radius: 5px;
    display: inline-block;
    font: inherit;
    line-height: 1em;
    padding: 0.5em 3.5em 0.5em 0.5em;

    /*arrow*/
    background-image:
      linear-gradient(45deg, transparent 50%, var(--azul-ppal) 50%),
      linear-gradient(135deg, var(--azul-ppal) 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      calc(100% - 20px) calc(0.7em + 2px),
      calc(100% - 15px) calc(0.7em + 2px),
      calc(100% - 2.5em) 0.5em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1em;
    background-repeat: no-repeat;
  
    /* reset */
    margin: 0;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*Quitar lina negra alrededor de campos en Chrome*/
input:focus, textarea:focus, select:focus{
    outline: none;
}