DataScope26/WEB
0
1.profile-settings-layout {2 display: grid;3 grid-template-columns: minmax(0, 1.5fr) minmax(16.25rem, 0.9fr);4 gap: 1.25rem;5 align-items: start;6 width: 100%;7 min-width: 0;8}9 10.settings-side-column {11 display: flex;12 flex-direction: column;13 gap: 1.25rem;14 min-width: 0;15}16 17.perfil-card {18 position: relative;19 background: var(--color-card);20 border-radius: 0.5rem;21 padding: 2% 4%;22 display: flex;23 flex-direction: column;24 gap: 1.5rem;25 overflow: hidden;26 box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);27 width: 100%;28 max-width: 100%;29 border-left: 0.25rem solid var(--color-accent);30 box-sizing: border-box;31}32 33html[data-theme='light'] .perfil-card {34 border-left: 0.25rem solid var(--green);35 border-bottom: 1px solid var(--color-border);36 border-top: 1px solid var(--color-border);37 border-right: 1px solid var(--color-border);38}39 40.card-heading {41 display: flex;42 align-items: center;43 gap: 0.5rem;44 width: 100%;45}46 47.card-heading-icon {48 display: flex;49 align-items: center;50 justify-content: center;51 color: var(--color-muted);52 flex-shrink: 0;53}54 55.card-title {56 font-family: 'Roboto', sans-serif;57 font-weight: 700;58 font-size: 1.25rem;59 line-height: 1.75rem;60 color: var(--color-text);61 margin: 0;62 white-space: nowrap;63}64 65.form-grid {66 display: grid;67 grid-template-columns: minmax(11.25rem, 13.75rem) minmax(0, 1fr);68 gap: 1.75rem;69 align-items: start;70}71 72.form-left {73 display: flex;74 flex-direction: column;75 gap: 1.5rem;76 min-width: 0;77}78 79.profile-picture-container {80 display: flex;81 flex-direction: column;82 justify-content: flex-start;83 align-items: center;84 gap: 0.75rem;85 padding-top: 0.375rem;86}87 88.profile-picture-shell {89 width: 9.375rem;90 height: 9.375rem;91 border-radius: 50%;92 overflow: hidden;93 border: 0.125rem solid var(--color-border);94 background: var(--surface-2);95 box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);96}97 98.form-field {99 display: flex;100 flex-direction: column;101 gap: 0.5313rem;102}103 104.theme-options {105 display: flex;106 flex-direction: column;107 gap: 0.5rem;108 margin-top: 0.25rem;109}110 111.theme-option {112 display: flex;113 align-items: center;114 gap: 0.625rem;115 font-family: 'Roboto', sans-serif;116 color: var(--color-text);117}118 119.theme-option input {120 accent-color: var(--color-accent);121}122 123.form-label {124 font-family: 'Roboto', sans-serif;125 font-weight: 700;126 font-size: 0.625rem;127 line-height: 0.9375rem;128 letter-spacing: 0.0625rem;129 text-transform: uppercase;130 color: var(--color-muted);131}132 133.form-input {134 width: 100%;135 background: var(--surface);136 border: 0.0625rem solid var(--color-border);137 color: var(--color-text);138 padding: 0.625rem;139 border-radius: 0.75rem;140 outline: none;141 transition: border-color 0.2s ease;142}143 144.form-input:focus {145 border-color: var(--green);146}147 148.form-readonly {149 display: flex;150 align-items: center;151 min-height: 2.625rem;152 height: 2.625rem;153 font-family: 'Roboto', sans-serif;154 font-weight: 500;155 font-size: 1rem;156 line-height: 1.5rem;157 color: rgba(2, 6, 23, 0.92);158 padding: 0.625rem 0.75rem;159 box-sizing: border-box;160 overflow: hidden;161 text-overflow: ellipsis;162 white-space: nowrap;163}164 165html[data-theme='dark'] .form-readonly {166 color: rgba(255, 255, 255, 0.9);167}168 169.form-input span {170 font-family: 'Roboto', sans-serif;171 font-weight: 400;172 font-size: 1rem;173 line-height: 1.5rem;174 color: var(--color-text);175 padding-left: 4%;176 white-space: nowrap;177 overflow: hidden;178 text-overflow: ellipsis;179}180 181.form-role-badge {182 background: var(--color-surface);183 border-bottom: 0.0625rem solid var(--color-border);184 padding: 2% 0% 2%;185 display: flex;186 align-items: center;187 width: 100%;188 box-sizing: border-box;189 position: relative;190 border: none;191}192 193.form-role-badge span {194 font-family: 'Roboto', sans-serif;195 font-weight: 400;196 font-size: 1rem;197 line-height: 1.5rem;198 /* Line-height para asegurar que el texto esté centrado verticalmente dentro del badge */199 color: var(--color-accent);200 padding-left: 4%;201 white-space: nowrap;202 overflow: hidden;203 /* Asegura que el texto no se desborde del contenedor */204 text-overflow: ellipsis;205 /* Agrega puntos suspensivos si el texto es demasiado largo para el contenedor */206}207 208.form-select {209 justify-content: space-between;210 padding-right: 8%;211}212 213.select-chevron {214 color: var(--color-muted);215 width: 1.5rem;216 height: 1.5rem;217 flex-shrink: 0;218}219 220.card-actions {221 display: flex;222 align-items: center;223 justify-content: space-between;224 padding-top: 2%;225 width: 100%;226}227 228.btn-save {229 padding: 0.5rem 0.875rem;230 font-size: 0.875rem;231}232 233.btn-logout {234 padding: 0.5rem 1.5625rem;235}236 237.change-profile-pic {238 width: 100%;239 height: 100%;240 border-radius: 50%;241 object-fit: cover;242 border: none;243 display: block;244 transition: transform 0.2s ease, opacity 0.2s ease;245}246 247.profile-picture-action {248 display: inline-flex;249 align-items: center;250 justify-content: center;251 gap: 0.5rem;252 padding: 0.5625rem 1rem;253 border-radius: 62.4375rem;254 border: 0.0625rem solid var(--color-border);255 background: var(--surface-2);256 color: var(--color-text);257 font-family: 'Roboto', sans-serif;258 font-size: 0.8125rem;259 font-weight: 600;260 line-height: 1;261 transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;262}263 264.profile-picture-action:hover {265 background: rgba(46, 232, 138, 0.08);266 border-color: var(--color-accent);267 transform: translateY(-0.0625rem);268}269 270.icon-only-button {271 width: 2.625rem;272 height: 2.625rem;273 min-width: 2.625rem;274 display: inline-flex;275 align-items: center;276 justify-content: center;277 transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;278}279 280html[data-theme='light'] .custom-button:hover {281 background: rgba(46, 232, 138, 0.08);282}283 284.icon-only-button svg {285 color: #000000 !important;286}287 288/* Profile Picture Modal Styles */289.pfp-modal-overlay {290 position: fixed;291 top: 0;292 left: 0;293 right: 0;294 bottom: 0;295 background: rgba(0, 0, 0, 0.5);296 backdrop-filter: blur(0.125rem);297 display: flex;298 align-items: center;299 justify-content: center;300 z-index: 1000;301 box-shadow: 0 0.25rem 1.25rem var(--color-border-soft);302 303}304 305html[data-theme='light'] .pfp-modal-overlay {306 background: rgba(0, 0, 0, 0.2);307}308 309.pfp-modal-content {310 background: var(--surface-2);311 border-radius: 0.5rem;312 padding: 3.125rem;313 width: 31.25rem;314 max-width: 90vw;315 display: flex;316 flex-direction: column;317 align-items: center;318 gap: 1rem;319 box-shadow: 0 0.25rem 1.25rem var(--color-border-soft);320}321 322.pfp-modal-title {323 font-family: var(--font-body);324 font-weight: 700;325 font-size: 1.5rem;326 line-height: 1.625rem;327 color: var(--color-text);328 margin: 0;329}330 331.pfp-current-image {332 width: 17.5rem;333 height: 17.5rem;334 border-radius: 50%;335 object-fit: cover;336}337 338.pfp-crop-container {339 width: 17.5rem;340 height: 17.5rem;341 border-radius: 50%;342 overflow: hidden;343 touch-action: none;344 cursor: grab;345 background: var(--color-surface);346 position: relative;347}348 349.pfp-crop-container:active {350 cursor: grabbing;351}352 353.pfp-crop-grid {354 position: absolute;355 top: 0;356 left: 0;357 width: 100%;358 height: 100%;359 background-image:360 linear-gradient(0deg, transparent 24%, var(--color-border-soft) 25%, var(--color-border-soft) 26%, transparent 27%, transparent 74%, var(--color-border-soft) 75%, var(--color-border-soft) 76%, transparent 77%, transparent),361 linear-gradient(90deg, transparent 24%, var(--color-border-soft) 25%, var(--color-border-soft) 26%, transparent 27%, transparent 74%, var(--color-border-soft) 75%, var(--color-border-soft) 76%, transparent 77%, transparent);362 background-size: 2.9375rem 2.9375rem;363 border-radius: 50%;364 pointer-events: none;365}366 367.pfp-zoom-controls {368 width: 100%;369 display: flex;370 align-items: center;371 gap: 0.5rem;372}373 374.pfp-zoom-label {375 font-size: 0.75rem;376 color: var(--color-muted);377}378 379.pfp-zoom-slider {380 flex: 1;381}382 383.pfp-modal-actions {384 display: flex;385 align-items: center;386 justify-content: center;387 gap: 0.75rem;388 width: 100%;389}390 391.pfp-modal-actions .btn-save,392.pfp-modal-actions .btn-logout {393 flex: 1;394 padding: 0.875rem 0;395 line-height: 20%;396}397 398.btn-change-photo {399 padding: 0.625rem 1rem;400 margin-bottom: 0.25rem;401 width: 100%;402 font-size: 0.875rem;403}404 405.email-editor-row {406 display: flex;407 align-items: center;408 gap: 0.75rem;409}410 411.email-editor-row .form-input,412.email-editor-row .form-readonly {413 flex: 1;414 min-width: 0;415}416 417.change-email-button {418 display: inline-flex;419 align-items: center;420 justify-content: center;421 gap: 0.5rem;422 white-space: nowrap;423 background: var(--green);424 border: 0.0625rem solid rgba(46, 232, 138, 0.5);425 color: #000000;426}427 428.profile-security-card {429 border-radius: 1rem;430 border: 0.0625rem solid rgba(136, 19, 55, 0.45);431 background: var(--color-card);432 padding: 1.125rem 1.25rem 1.25rem;433 display: flex;434 flex-direction: column;435 gap: 0.75rem;436 min-height: 100%;437 box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);438}439 440.profile-security-header {441 display: flex;442 align-items: center;443 justify-content: space-between;444}445 446.profile-security-title-wrap {447 display: flex;448 align-items: center;449 gap: 0.625rem;450}451 452.profile-security-icon {453 color: #fb7185;454}455 456.profile-security-title {457 margin: 0;458 font-size: 0.9375rem;459 font-weight: 600;460 letter-spacing: -0.01em;461 color: var(--color-text);462}463 464.profile-security-text {465 margin: 0;466 font-size: 0.75rem;467 line-height: 1.6;468 color: var(--muted);469}470 471.profile-security-actions {472 display: flex;473 justify-content: flex-start;474 margin-top: auto;475}476 477 478.email-editor-row {479 display: flex;480 align-items: center;481 gap: 0.75rem;482}483 484.email-editor-row .form-input,485.email-editor-row .form-readonly {486 flex: 1;487 min-width: 0;488}489 490.change-email-button,491.change-password-button {492 display: inline-flex;493 align-items: center;494 justify-content: center;495 gap: 0.5rem;496 white-space: nowrap;497}498 499.change-email-button {500 background: var(--green);501 border: 0.0625rem solid rgba(46, 232, 138, 0.5);502 color: #000000;503}504 505.profile-security-card {506 border-radius: 1rem;507 border: 0.0625rem solid rgba(136, 19, 55, 0.45);508 background: var(--color-card);509 padding: 1.125rem 1.25rem 1.25rem;510 display: flex;511 flex-direction: column;512 gap: 0.75rem;513 min-height: 100%;514 box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);515}516 517.profile-security-header {518 display: flex;519 align-items: center;520 justify-content: space-between;521}522 523.profile-security-title-wrap {524 display: flex;525 align-items: center;526 gap: 0.625rem;527}528 529.profile-security-icon {530 color: #fb7185;531}532 533.profile-security-title {534 margin: 0;535 font-size: 0.9375rem;536 font-weight: 600;537 letter-spacing: -0.01em;538 color: var(--color-text);539}540 541.profile-security-text {542 margin: 0;543 font-size: 0.75rem;544 line-height: 1.6;545 color: var(--muted);546}547 548.profile-security-actions {549 display: flex;550 justify-content: flex-start;551 margin-top: auto;552}553 554.profile-password-button {555 padding: 10px 16px;556}557 558.theme-picker {559 display: flex;560 flex-direction: column;561 gap: 0.5rem;562}563 564.theme-toggle-group {565 display: flex;566 gap: 0.75rem;567 flex-wrap: wrap;568}569 570.theme-toggle-btn {571 border: 0.0625rem solid var(--color-border);572 background: var(--surface-2);573 color: var(--color-text);574 border-radius: 62.4375rem;575 padding: 0.5rem 1rem;576 font: inherit;577 cursor: pointer;578 transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;579}580 581.theme-toggle-btn:hover {582 border-color: var(--green);583}584 585.theme-toggle-btn--active {586 background: var(--green);587 color: #0a0a0a;588 border-color: var(--green);589 font-weight: 700;590}591 592/* Slider-style theme switch */593.theme-switch {594 width: 3.5rem;595 height: 1.75rem;596 background: var(--surface-2);597 border-radius: 62.4375rem;598 border: 0.0625rem solid var(--color-border);599 position: relative;600 padding: 0.25rem;601 display: inline-flex;602 align-items: center;603 cursor: pointer;604}605 606.theme-switch--dark {607 background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));608}609 610.theme-switch__knob {611 width: 1.25rem;612 height: 1.25rem;613 background: var(--green);614 border-radius: 50%;615 transition: transform 0.18s ease;616 transform: translateX(0);617}618 619.theme-switch--dark .theme-switch__knob {620 transform: translateX(28px);621}622 623.pfp-modal-content .form-field {624 width: 100%;625 align-self: stretch;626 box-sizing: border-box;627}628 629.theme-icon {630 color: var(--color-muted);631 transition: color 0.2s ease, transform 0.2s ease;632}633 634.theme-icon--active {635 color: var(--green);636 transform: scale(1.1);637}638 639.username-editor-row {640 display: flex;641 align-items: center;642 gap: 0.625rem;643 width: 100%;644}645 646.username-editor-row .form-input,647.email-editor-row .form-readonly {648 flex: 1;649 min-width: 0;650 height: 2.625rem;651 min-height: 2.625rem;652 box-sizing: border-box;653 border-radius: 0.75rem;654 padding: 0.625rem 0.75rem;655 font-family: 'Roboto', sans-serif;656 font-weight: 500;657 font-size: 1rem;658 line-height: 1.5rem;659}660 661.username-editor-row .form-input {662 background: var(--surface-2);663 border: 0.0625rem solid var(--color-border);664 color: var(--color-text);665}666 667.email-editor-row .form-readonly {668 display: flex;669 align-items: center;670 background: var(--surface-2);671 border: 0.0625rem solid var(--color-border);672 color: rgba(2, 6, 23, 0.92);673 overflow: hidden;674 text-overflow: ellipsis;675 white-space: nowrap;676}677 678html[data-theme='dark'] .email-editor-row .form-readonly {679 color: rgba(255, 255, 255, 0.9);680}681 682.username-edit-actions {683 display: flex;684 align-items: center;685 gap: 0.5rem;686 flex-shrink: 0;687}688 689.username-action-button {690 width: 2.25rem;691 height: 2.25rem;692 min-width: 2.25rem;693 border-radius: 0.625rem;694}695 696.username-action-button--save {697 background: var(--green) !important;698 border-color: rgba(46, 232, 138, 0.45) !important;699 color: #000000 !important;700}701 702.username-action-button--revert {703 background: rgba(239, 68, 68, 0.12) !important;704 border-color: rgba(239, 68, 68, 0.42) !important;705 color: #ef4444 !important;706}707 708.username-action-button--revert svg {709 color: #ef4444 !important;710}711 712.profile-aspect-card {713 border-radius: 1rem;714 border: 0.0625rem solid rgba(46, 232, 138, 0.4);715 background: var(--color-card);716 padding: 1.125rem 1.25rem 1.25rem;717 display: flex;718 flex-direction: column;719 gap: 0.75rem;720 min-height: 100%;721 box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);722}723 724.theme-switch-row {725 display: flex;726 align-items: center;727 gap: 0.75rem;728}729 730@media (max-width: 48rem) {731 .perfil-card {732 padding: 1.5rem 1rem;733 }734 735 /* Las dos columnas (datos + foto) pasan a apilarse */736 .form-grid {737 grid-template-columns: 1fr;738 gap: 1rem;739 }740 741 .card-actions {742 flex-direction: column;743 align-items: stretch;744 gap: 0.75rem;745 }746 747 /* Modal de foto de perfil */748 .pfp-modal-content {749 width: 100%;750 max-width: 92vw;751 padding: 1.5rem;752 }753 754 .pfp-current-image,755 .pfp-crop-container {756 width: 13.75rem;757 height: 13.75rem;758 }759 760 .theme-toggle-group {761 justify-content: center;762 }763}764 765@media (max-width: 30rem) {766 .pfp-current-image,767 .pfp-crop-container {768 width: 11.25rem;769 height: 11.25rem;770 }771}