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.register-modal {4  width: min(55rem, 94vw);5  max-width: 94vw;6  background: var(--surface-2);7  border-radius: 1.5rem;8  padding: 0;9  color: var(--color-text);10  font-family: 'Roboto', sans-serif;11  position: fixed;12  top: 50%;13  left: 50%;14  transform: translate(-50%, -50%);15  z-index: 1000;16  box-shadow: 0 1.375rem 4.375rem rgba(0, 0, 0, 0.32);17  border: 0.0625rem solid var(--color-border-soft);18  overflow: hidden;19}20 21.register-modal__layout {22  display: grid;23  grid-template-columns: 1fr 1.2fr;24  min-height: 32.5rem;25}26 27/* ---------- Columna narrativa ---------- */28 29.register-modal__story {30  position: relative;31  background: var(--surface);32  border-right: 0.0625rem solid var(--color-border-soft);33  padding: 3rem 2.75rem;34  display: flex;35  flex-direction: column;36  justify-content: center;37  align-items: flex-start;38  box-sizing: border-box;39  overflow: hidden;40}41 42.register-modal__eyebrow {43  display: inline-flex;44  align-items: center;45  gap: 0.5rem;46  margin: 0 0 1.25rem;47  padding: 0.375rem 0.75rem;48  border-radius: 62.4375rem;49  border: 0.0625rem solid rgba(46, 232, 138, 0.35);50  background: rgba(46, 232, 138, 0.08);51  font-size: 0.6875rem;52  letter-spacing: 0.14em;53  text-transform: uppercase;54  color: var(--green);55  font-weight: 700;56  position: relative;57  z-index: 1;58}59 60.register-modal__eyebrow::before {61  content: "";62  width: 0.375rem;63  height: 0.375rem;64  border-radius: 50%;65  background: var(--green);66  box-shadow: 0 0 0 0.1875rem rgba(46, 232, 138, 0.2);67}68 69.register-modal__story h1 {70  margin: 0;71  font-size: clamp(2rem, 3vw, 2.7rem);72  line-height: 1.08;73  letter-spacing: -0.03em;74  font-weight: 700;75  color: var(--color-text);76  position: relative;77  z-index: 1;78}79 80.register-modal__copy {81  margin: 1.125rem 0 0;82  font-size: 1rem;83  line-height: 1.65;84  color: var(--color-muted);85  max-width: 30ch;86  position: relative;87  z-index: 1;88}89 90.register-modal__benefits {91  display: flex;92  flex-direction: column;93  gap: 0.75rem;94  margin: 1.5rem 0 0;95  padding: 1.25rem 0 0 1.25rem;96  border-top: 0.0625rem solid var(--color-border-soft);97  color: var(--color-text);98  font-size: 0.875rem;99  line-height: 1.5;100  position: relative;101  z-index: 1;102}103 104.register-modal__benefits li::marker {105  color: var(--green);106}107 108.register-modal__benefits strong {109  color: var(--green);110  font-weight: 700;111}112 113.register-modal__meta {114  display: flex;115  align-items: center;116  gap: 0.625rem;117  margin-top: 1.75rem;118  padding-top: 1.25rem;119  border-top: 0.0625rem solid var(--color-border-soft);120  font-size: 0.7813rem;121  color: var(--color-muted);122  position: relative;123  z-index: 1;124}125 126.register-modal__meta strong {127  color: var(--color-text);128  font-weight: 700;129}130 131/* ---------- Columna formulario ---------- */132 133.register-modal__form {134  background: var(--surface-2);135  padding: 3rem 2.75rem 2rem;136  display: flex;137  flex-direction: column;138  justify-content: center;139  box-sizing: border-box;140}141 142.register-modal h2 {143  margin: 0 0 1.25rem;144  font-size: clamp(1.6rem, 2vw, 1.9rem);145  line-height: 1.2;146  letter-spacing: -0.03em;147}148 149.input-group {150  margin-bottom: 0.875rem;151}152 153.input-group label {154  display: block;155  font-size: 0.625rem;156  color: var(--muted);157  margin-bottom: 0.4375rem;158  letter-spacing: 0.1em;159  text-transform: uppercase;160  font-weight: 600;161}162 163.input-group input {164  width: 100%;165  background: var(--surface-3);166  border: 0.0625rem solid var(--color-border);167  color: var(--color-text);168  padding: 0.8125rem 1rem;169  font-size: 0.95rem;170  outline: none;171  border-radius: 0.625rem;172  transition: border-color 0.2s ease, box-shadow 0.2s ease;173  box-sizing: border-box;174}175 176.input-group input:focus {177  border-color: rgba(46, 232, 138, 0.72);178  box-shadow: none;179}180 181.input-group input::placeholder {182  color: var(--muted);183}184 185.input-icon {186  position: relative;187}188 189.icon {190  position: absolute;191  right: 0.875rem;192  top: 50%;193  transform: translateY(-50%);194  color: var(--muted);195}196 197.password-checklist {198  margin-top: 0.5rem;199  display: flex;200  flex-direction: column;201  gap: 0.1875rem;202  font-size: 0.7188rem;203  line-height: 1.5;204  transition: color 0.2s ease;205  color: var(--color-muted);206}207 208.remember {209  display: flex;210  align-items: center;211  gap: 0.5rem;212  margin: 0.875rem 0 1.125rem;213  font-size: 0.75rem;214  color: var(--muted);215}216 217.remember input {218  -webkit-appearance: none;219  appearance: none;220  width: 1.125rem;221  height: 1.125rem;222  background: var(--surface-2);223  border: 0.125rem solid var(--color-text);224  border-radius: 0.25rem;225  display: inline-block;226  vertical-align: middle;227  cursor: pointer;228  position: relative;229  box-sizing: border-box;230}231 232.remember input::after {233  content: "";234  position: absolute;235  left: 50%;236  top: 50%;237  width: 0.375rem;238  height: 0.625rem;239  transform: translate(-50%, -50%) rotate(45deg);240  border: solid transparent;241  border-width: 0 0.125rem 0.125rem 0;242  opacity: 0;243  transition: opacity 120ms ease, transform 120ms ease;244  box-sizing: border-box;245  pointer-events: none;246}247 248.remember input:checked {249  background: #2ee88a;250  border-color: #2ee88a;251}252 253.remember input:checked::after {254  border-color: #fff;255  opacity: 1;256  border-width: 0 0.1875rem 0.1875rem 0;257}258 259.remember input:focus {260  outline: none;261}262 263.error-text {264  color: #ff4d4f;265  font-size: 0.8125rem;266  margin: 0 0 0.875rem;267  line-height: 1.5;268}269 270.error-text--animated {271  animation: fadeInUp 0.4s ease-out forwards;272}273 274@keyframes fadeInUp {275  from {276    opacity: 0;277    transform: translateY(0.5rem);278  }279  to {280    opacity: 1;281    transform: translateY(0);282  }283}284 285.register-btn {286  width: 100%;287  padding: 0.875rem 1.25rem;288  font-size: 1rem;289  font-weight: 700;290  border-radius: 0.625rem;291  margin-top: 0.625rem;292  transition: transform 0.15s ease, box-shadow 0.15s ease;293}294 295.register-btn:hover {296  transform: translateY(-0.0625rem);297  box-shadow: 0 0.5rem 1.25rem rgba(46, 232, 138, 0.25);298}299 300.loader-icon-animation {301  animation: spin 3s linear infinite;302}303 304@keyframes spin {305  from {306    transform: rotate(0deg);307  }308 309  to {310    transform: rotate(360deg);311  }312}313 314.bottom-text {315  text-align: center;316  margin-top: 1.25rem;317  color: var(--muted);318  font-size: 0.8438rem;319  line-height: 1.6;320}321 322.bottom-text span {323  color: var(--green);324  font-weight: 600;325  cursor: pointer;326}327 328.bottom-text span:hover {329  text-decoration: underline;330}331 332.copyright {333  text-align: center;334  margin-top: 0.875rem;335  font-size: 0.625rem;336  color: var(--green);337  letter-spacing: 0.08em;338  opacity: 0.7;339}340 341.modal-backdrop {342  position: fixed;343  inset: 0;344  background: rgba(0, 0, 0, 0.55);345  backdrop-filter: blur(0.1875rem);346  z-index: 1000;347}348 349.success-state {350  display: flex;351  flex-direction: column;352  justify-content: center;353  align-items: center;354  gap: 0.625rem;355  min-height: 20rem;356  padding: 0 1.25rem;357  color: var(--color-text);358  text-align: center;359}360 361.success-state h2 {362  margin: 0;363}364 365.success-state p {366  margin: 0;367  max-width: 36ch;368  color: var(--color-muted);369  line-height: 1.7;370}371 372@media (max-width: 48rem) {373  .register-modal {374    width: min(94vw, 30rem);375    max-width: 94vw;376    border-radius: 1.25rem;377  }378 379  .register-modal__layout {380    grid-template-columns: 1fr;381    min-height: auto;382  }383 384  .register-modal__story {385    order: 1;386    border-right: none;387    border-bottom: 0.0625rem solid var(--color-border-soft);388    padding: 1.875rem 1.5rem 1.5rem;389    align-items: center;390    text-align: center;391  }392 393  .register-modal__eyebrow {394    margin-left: auto;395    margin-right: auto;396  }397 398  .register-modal__copy {399    max-width: none;400    font-size: 0.95rem;401    text-align: center;402  }403 404  .register-modal__meta {405    justify-content: center;406  }407 408  .register-modal__form {409    order: 2;410    padding: 1.75rem 1.5rem 1.375rem;411  }412 413  .register-modal__story h1 {414    font-size: clamp(1.8rem, 7vw, 2.3rem);415  }416}417 418/* ── LIGHT THEME OVERRIDES ── */419html[data-theme='light'] .modal-backdrop {420  background: rgba(0, 0, 0, 0.2);421}422 423html[data-theme='light'] .input-group label {424  color: #6b7280;425}426 427html[data-theme='light'] .input-group input::placeholder {428  color: #9ca3af;429}430 431html[data-theme='light'] .icon {432  color: #6b7280;433}434 435html[data-theme='light'] .remember {436  color: #6b7280;437}