DataScope26/WEB

1@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400&family=Roboto:ital,wght@0,400;0,700;1,700&display=swap');2 3.input-group input:-webkit-autofill,4.input-group input:-webkit-autofill:hover,5.input-group input:-webkit-autofill:focus,6.input-group input:-webkit-autofill:active {7  -webkit-box-shadow: 0 0 0 62.5rem var(--surface-2) inset;8  box-shadow: 0 0 0 62.5rem var(--bg) inset;9  -webkit-text-fill-color: var(--color-text);10  caret-color: var(--color-text);11  transition: background-color 5000s ease-in-out 0s;12}13 14.login-modal {15  width: 32.5rem;16  max-width: 95%;17  background: var(--surface-2);18  border-radius: 1.75rem;19  padding: 3.75rem 3.5rem;20  color: var(--color-text);21  font-family: 'Roboto', sans-serif;22  position: fixed;23  top: 50%;24  left: 50%;25  transform: translate(-50%, -50%);26  z-index: 1000;27  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.12);28}29 30.login-modal h1 {31  text-align: center;32  font-size: 2.375rem;33  margin-bottom: 1.875rem;34  font-weight: 600;35}36 37.input-group {38  margin-bottom: 1.125rem;39}40 41.input-group label {42  display: block;43  font-size: 0.625rem;44  color: #8a8a8a;45  margin-bottom: 0.375rem;46  letter-spacing: 0.0625rem;47}48 49.input-group input:focus { border-color: var(--green); box-shadow: none; }50 51.remember {52  display: flex;53  align-items: center;54  gap: 0.5rem;55  margin: 1.125rem 0 1.5rem;56  font-size: 0.75rem;57  color: #999;58}59 60.remember input {61  -webkit-appearance: none;62  appearance: none;63  width: 1.125rem;64  height: 1.125rem;65  background: var(--surface-2);66  border: 0.125rem solid var(--color-text);67  border-radius: 0.25rem;68  display: inline-block;69  vertical-align: middle;70  cursor: pointer;71  position: relative;72  box-sizing: border-box;73}74 75.remember input::after {76  content: "";77  position: absolute;78  left: 50%;79  top: 50%;80  width: 0.375rem;81  height: 0.625rem;82  transform: translate(-50%, -50%) rotate(45deg);83  border: solid transparent;84  border-width: 0 0.125rem 0.125rem 0;85  opacity: 0;86  transition: opacity 120ms ease, transform 120ms ease;87  box-sizing: border-box;88  pointer-events: none;89}90 91.remember input:checked {92  background: #2ee88a;93  border-color: #2ee88a;94}95 96.remember input:checked::after {97  border-color: #fff;98  opacity: 1;99  border-width: 0 0.1875rem 0.1875rem 0;100}101 102.remember input:focus {103  outline: none;104}105 106.error-text {107  color: #ff4d4f;108  font-size: 0.875rem;109  margin-bottom: 1.125rem;110}111 112.error-text--animated {113  animation: fadeInUp 0.4s ease-out forwards;114}115 116@keyframes fadeInUp {117  from {118    opacity: 0;119    transform: translateY(0.5rem);120  }121  to {122    opacity: 1;123    transform: translateY(0);124  }125}126 127.login-btn {128  width: 100%;129  padding: 0.875rem;130  font-size: 1.375rem;131}132 133.loader-icon-animation {134  animation: spin 3s linear infinite;135}136 137@keyframes spin {138  from {139    transform: rotate(0deg);140  }141 142  to {143    transform: rotate(360deg);144  }145}146 147.bottom-text {148  text-align: center;149  margin-top: 2.5rem;150  color: #888;151  font-size: 0.875rem;152}153 154.bottom-text span {155  color: #32f28b;156  font-weight: 600;157  cursor: pointer;158}159 160.bottom-text span:hover {161  text-decoration: underline;162}163 164.copyright {165  text-align: center;166  margin-top: 1.875rem;167  font-size: 0.625rem;168  color: #2ee88a;169}170 171.login-modal__close {172  position: absolute;173  top: 1rem;174  right: 1.25rem;175  background: transparent;176  border: none;177  color: #ffffff;178  font-size: 1.75rem;179  line-height: 1;180  padding: 0;181  cursor: pointer;182  outline: none;183}184 185.login-modal__close:hover {186  opacity: 0.85;187}188 189.modal-backdrop {190  position: fixed;191  inset: 0;192  /* top:0; right:0; bottom:0; left:0 */193  background: rgba(0, 0, 0, 0.5);194  backdrop-filter: blur(0.125rem);195  /* Aplica un desenfoque al contenido que está detrás del backdrop. */196  z-index: 900;197}198 199/* ── LIGHT THEME OVERRIDES ── */200html[data-theme='light'] .modal-backdrop {201  background: rgba(0, 0, 0, 0.2);202}203 204html[data-theme='light'] .input-group label {205  color: #6b7280;206}207 208html[data-theme='light'] .input-group input::placeholder {209  color: #9ca3af;210}211 212html[data-theme='light'] .icon {213  color: #6b7280;214}215 216html[data-theme='light'] .remember {217  color: #6b7280;218}219 220html[data-theme='light'] .login-modal__close {221  color: #111827;222}