@charset "UTF-8"; @import url("/css/colores-fuentes.css?v=236"); html {font-size: 12px} @media screen and (resolution: 1dppx) { html {--un-pixel: 1px} @media (min-width: 1920px) {html {font-size: 16px}} } @media screen and (resolution: 1.25dppx) { html {--un-pixel: 0.8px} @media (min-width: 1536px) {html {font-size: 12.8px}} } @media screen and (resolution: 1.5dppx) { html {--un-pixel: 0.6px} } body {align-items: center; color: var(--color-texto); display: flex; flex-direction: column; font-family: "Segoe UI", var(--fuente-general); height: 100vh; justify-content: center; text-align: center} @media all and (max-color: 5) {body {background-color: #4f4f4f}} @media all and (min-color: 6) {body {background-image: url("/img/fondo.png"); background-repeat: repeat}} main {background-color: #fff; border-radius: 10px; box-shadow: 0 0 5px #ccc; padding: 3rem; width: 300px} img[alt="Logo"] {margin-bottom: 2rem; max-width: 275px} #error {background-color: #f0dcdc; border: var(--un-pixel) solid #f0d2d7; color: #b94b46; margin-bottom: 1rem; padding: 0.5em} form {background-color: #f5f5f5; box-shadow: 0 0 2px #c0c0c0; border-radius: 10px; padding: 1rem} form > div:first-child {align-items: center; display: flex; flex-direction: row; gap: 1rem} #avatar {background-position: center center; background-repeat: no-repeat; background-size: 70px 70px; border-radius: 50%; height: 96px; width: 96px} form > div:last-child {align-items: center; display: flex; flex-direction: row; justify-content: space-between; margin-top: 0.5rem} form > div > div:last-child {display: flex; flex-direction: column; flex-grow: 1} ::placeholder {color: #808080; opacity: 1} input[type="password"], input[type="text"] {background-color: #fff; border: var(--un-pixel) solid #ccc; display: block; font-family: "Segoe UI", var(--fuente-general); font-size: 1rem; outline: none; padding: 0.5rem} input[type="password"]:focus, input[type="text"]:focus {border-color: #005fdc; box-shadow: 0 0 var(--un-pixel) var(--un-pixel) #90c3f4} input[type="password"] {margin-top: 0.75rem} #segundoFactorAutenticacion {display: flex; justify-content: space-between; margin-top: 0.75rem} #segundoFactorAutenticacion > input {text-align: center; width: 1ch} .contenedorCheckbox {align-items: center; display: flex} input[type="checkbox"] { & {appearance: none; background-color: #fff; border: 0.25rem solid #fff; border-radius: 50%; cursor: pointer; height: 1.5rem; outline: 1px solid #c0c0c0; width: 1.5rem} & + label {color: #7d7d7d; cursor: pointer; margin-left: 0.25rem} &:checked {background-color: var(--azul-checkbox)} &:focus {box-shadow: 0 0 1px 1px #90c3f4; outline-color: #005fdc} } button {align-self: end; background-color: rgba(0, 97, 224, .7); border: 0; color: #fff; cursor: pointer; font-family: "Segoe UI", var(--fuentes-auxiliares); font-size: 1rem; padding: 0.5rem 1.25rem} button:hover {background-color: rgba(0, 97, 224, .9)} button:focus {background-color: #3296dc; box-shadow: 0 0 var(--un-pixel) var(--un-pixel) #90c3f4; outline: none}