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