/**
 * Estilos base del proyecto.
 * Convención de tipografía: fuente Inter; h1 = 22px, h2 = 16px, h3 = 14px,
 * texto = 13px, subtítulo = 14px, texto pequeño = 12px. Variables en :root.
 */
@font-face {
  font-family: 'inter';
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2'),
       url('fonts/inter-v18-latin-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'inter';
  src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

:root {
  --primary-color: #425a76;
  --secondary-color: #169cea;
  --text-color: #434343;
  --border-color: #CCC;
  --bg-color: #ededed;
  --error-color: #ff0000;
  --success-color: #529565;
  --warning-color: #F8C254;
  /* Convención de tipografía del proyecto */
  --font-family-base: 'inter', sans-serif;
  --font-size-base: 13px;
  --font-size-h1: 22px;
  --font-size-h2: 16px;
  --font-size-h3: 14px;
  --font-size-subtitle: 14px;
  --font-size-small: 12px;
}

* {
  box-sizing: border-box !important;
  font-family: 'inter', sans-serif !important;
  font-size: 13px;
  color: var(--text-color);
  transition: all 0.1s ease !important;
}

body {
  margin: 0;
  background-color: var(--bg-color);
}


main {
  padding: 0 0 0 50px !important;
}


input,
select {
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  border: solid 1px rgba(134, 134, 134, 0.51);
  box-shadow: none;
  outline: none;
  color: #252525;
  width: 100%;
  text-align: left;
}

input[type="checkbox"] {
  width: auto;
  margin: 0px;
}

select {
  appearance: none;
  background: url(../img/icons/arrow_dropdown.svg) right center/20px no-repeat;
  padding-right: 30px;
}

input:focus,
input:hover,
select:focus,
select:hover {
  border-color: rgba(38, 144, 206, 0.59);
  background-color: #FFF;
}