.segmented-control { position: relative; display: inline-block; border: 1px solid currentColor; font-style: normal; font-weight: normal; text-decoration: none; overflow: hidden; margin: 0.8em auto; border-radius: 2px; box-sizing: border-box; -webkit-user-select: none; user-select: none; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-tap-highlight-color: transparent; } .segmented-control > input { position: absolute; left: -10000px; opacity: 0; } .segmented-control > input[type='checkbox'] ~ label { transition-duration: 0; } .segmented-control > input[type='checkbox'] ~ label:before { opacity: 0; } /* this section controls the division of the slider if you have 2 options = 50%, 3 options = 33% and so on but also the selected input matters. (input-1)*percentage you'll also need to add a new entry for the new option to do so just copy the last entry and change the numbers to [new highest] and also make sure to set left: xx% correctly */ .segmented-control > input:disabled:nth-child(1) ~ label:nth-of-type(1) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:nth-of-type(1):before { opacity: 1; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(1) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 0; } .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 0; } /* entry #2 */ .segmented-control > input:disabled:nth-child(2) ~ label:nth-of-type(2) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:nth-of-type(2):before { opacity: 1; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before { left: 50%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before { left: 33.33333%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 25%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 20%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 16.66%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 14.28%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 12.5%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 11.1111%; } .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 10%; } /* entry #3 */ .segmented-control > input:disabled:nth-child(3) ~ label:nth-of-type(3) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(3):checked ~ label:nth-of-type(3):after, .segmented-control > input:nth-child(3):checked ~ label:nth-of-type(3):before { opacity: 1; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before { left: 66.66667%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 50%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 40%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 33.3333%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 28.57%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 25%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 22.2222%; } .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(3):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 20%; } /* entry #4 */ .segmented-control > input:disabled:nth-child(4) ~ label:nth-of-type(4) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(4):checked ~ label:nth-of-type(4):after, .segmented-control > input:nth-child(4):checked ~ label:nth-of-type(4):before { opacity: 1; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 75%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 60%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 50%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 42.86%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 37.5%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 33.333%; } .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 30%; } /* entry #5 */ .segmented-control > input:disabled:nth-child(5) ~ label:nth-of-type(5) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(5):checked ~ label:nth-of-type(5):after, .segmented-control > input:nth-child(5):checked ~ label:nth-of-type(5):before { opacity: 1; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 80%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 66.6667%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 57.14%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 50%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 44.4444%; } .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(5):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 40%; } /* entry #6 */ .segmented-control > input:disabled:nth-child(6) ~ label:nth-of-type(6) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(6):checked ~ label:nth-of-type(6):after, .segmented-control > input:nth-child(6):checked ~ label:nth-of-type(6):before { opacity: 1; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 83.3333%; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 71.43%; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 62.5%; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 55.56%; } .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(6):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 50%; } /* entry #7 */ .segmented-control > input:disabled:nth-child(7) ~ label:nth-of-type(7) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(7):checked ~ label:nth-of-type(7):after, .segmented-control > input:nth-child(7):checked ~ label:nth-of-type(7):before { opacity: 1; } .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(7):after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(7):before, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(7) ~ label:before { left: 85.71%; } .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 75%; } .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 66.6667%; } .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(7):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 60%; } /* entry #8 */ .segmented-control > input:disabled:nth-child(8) ~ label:nth-of-type(8) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(8):checked ~ label:nth-of-type(8):after, .segmented-control > input:nth-child(8):checked ~ label:nth-of-type(8):before { opacity: 1; } .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(8):after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(8):before, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(8) ~ label:before { left: 87.5%; } .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 77.7778%; } .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(8):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 70%; } /* entry #9 */ .segmented-control > input:disabled:nth-child(9) ~ label:nth-of-type(9) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(9):checked ~ label:nth-of-type(9):after, .segmented-control > input:nth-child(9):checked ~ label:nth-of-type(9):before { opacity: 1; } .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(9):after, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(9):before, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(9) ~ label:before { left: 88.8889%; } .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(9):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 80%; } /* entry #10 */ .segmented-control > input:disabled:nth-child(10) ~ label:nth-of-type(10) { opacity: 0.3; cursor: not-allowed; } .segmented-control > input:nth-child(10):checked ~ label:nth-of-type(10):after, .segmented-control > input:nth-child(10):checked ~ label:nth-of-type(10):before { opacity: 1; } .segmented-control > input:nth-child(10):checked ~ label:first-of-type:nth-last-of-type(10):after, .segmented-control > input:nth-child(10):checked ~ label:first-of-type:nth-last-of-type(10):before, .segmented-control > input:nth-child(10):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > input:nth-child(10):checked ~ label:first-of-type:nth-last-of-type(10) ~ label:before { left: 90%; } /* this section controls the size of the options for each number of total options */ .segmented-control > label:first-of-type:nth-last-of-type(1), .segmented-control > label:first-of-type:nth-last-of-type(1):after, .segmented-control > label:first-of-type:nth-last-of-type(1):before, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(1) ~ label:before { width: 100%; } .segmented-control > label:first-of-type:nth-last-of-type(2), .segmented-control > label:first-of-type:nth-last-of-type(2):after, .segmented-control > label:first-of-type:nth-last-of-type(2):before, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(2) ~ label:before { width: 50%; } .segmented-control > label:first-of-type:nth-last-of-type(3), .segmented-control > label:first-of-type:nth-last-of-type(3):after, .segmented-control > label:first-of-type:nth-last-of-type(3):before, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(3) ~ label:before { width: 33.33333%; } .segmented-control > label:first-of-type:nth-last-of-type(4), .segmented-control > label:first-of-type:nth-last-of-type(4):after, .segmented-control > label:first-of-type:nth-last-of-type(4):before, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:before { width: 25%; } .segmented-control > label:first-of-type:nth-last-of-type(5), .segmented-control > label:first-of-type:nth-last-of-type(5):after, .segmented-control > label:first-of-type:nth-last-of-type(5):before, .segmented-control > label:first-of-type:nth-last-of-type(5) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(5) ~ label:before { width: 20%; } .segmented-control > label:first-of-type:nth-last-of-type(6), .segmented-control > label:first-of-type:nth-last-of-type(6):after, .segmented-control > label:first-of-type:nth-last-of-type(6):before, .segmented-control > label:first-of-type:nth-last-of-type(6) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(6) ~ label:before { width: 16.6667%; } .segmented-control > label:first-of-type:nth-last-of-type(7), .segmented-control > label:first-of-type:nth-last-of-type(7):after, .segmented-control > label:first-of-type:nth-last-of-type(7):before, .segmented-control > label:first-of-type:nth-last-of-type(7) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(7) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(7) ~ label:before { width: 14.2857%; } .segmented-control > label:first-of-type:nth-last-of-type(8), .segmented-control > label:first-of-type:nth-last-of-type(8):after, .segmented-control > label:first-of-type:nth-last-of-type(8):before, .segmented-control > label:first-of-type:nth-last-of-type(8) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(8) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(8) ~ label:before { width: 12.5%; } .segmented-control > label:first-of-type:nth-last-of-type(9), .segmented-control > label:first-of-type:nth-last-of-type(9):after, .segmented-control > label:first-of-type:nth-last-of-type(9):before, .segmented-control > label:first-of-type:nth-last-of-type(9) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(9) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(9) ~ label:before { width: 11.1111%; } .segmented-control > label:first-of-type:nth-last-of-type(10), .segmented-control > label:first-of-type:nth-last-of-type(10):after, .segmented-control > label:first-of-type:nth-last-of-type(10):before, .segmented-control > label:first-of-type:nth-last-of-type(10) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(10) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(10) ~ label:before { width: 10%; } .segmented-control > label { display: inline-block; padding: 0 0.71em; cursor: pointer; float: left; line-height: 3em; font-style: inherit; font-weight: inherit; text-decoration: inherit; transition-property: none; transition-duration: inherit; transition-timing-function: inherit; } .segmented-control > label:before, .segmented-control > label:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .segmented-control > label:after { color: white; content: attr(data-value); text-align: center; padding: inherit; z-index: 10; font-style: inherit; text-decoration: inherit; font-weight: inherit; opacity: 0; transition-property: opacity, left; transition-duration: inherit; transition-timing-function: inherit; } .segmented-control > label:after, .segmented-control > label { text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .segmented-control > label:before { content: ""; color: inherit; background: currentColor; transition-property: left; transition-duration: inherit; transition-timing-function: inherit; } .segmented-control.italic, .segmented-control .italic { font-style: italic; } .segmented-control.bold, .segmented-control .bold { font-weight: bold; } .segmented-control.underline, .segmented-control .underline { text-decoration: underline; } .segmented-control.line-through, .segmented-control .line-through { text-decoration: line-through; } .Crono_cronoSection__4Ui\+o{background-color:#1a1a1a;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.2);padding:24px;margin-bottom:24px}.Crono_cronoSection__4Ui\+o h2{font-size:22px;margin-bottom:8px;color:#fff}.Crono_cronoSection__4Ui\+o p{color:#ccc;margin-bottom:20px}.Crono_cronoContainer__cT8K2{border-radius:8px;padding:30px;max-width:900px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.Crono_cronoRow__xxoG0{display:grid;grid-template-columns:250px 160px 80px 1fr 1fr;grid-gap:20px;gap:20px;align-items:center;margin-bottom:20px}.Crono_cronoRow__xxoG0:first-of-type{margin-bottom:10px}.Crono_cronoHeader__VrKMx{display:grid;grid-template-columns:250px 160px 80px 1fr 1fr;grid-gap:20px;gap:20px;align-items:center;margin-bottom:20px;margin-top:20px}.Crono_cronoHeader__VrKMx .Crono_cronoLabel__08Vgt{font-size:18px;font-weight:500;color:#fff}.Crono_cronoHeader__VrKMx .Crono_cronoDuration__MTzrT,.Crono_cronoHeader__VrKMx .Crono_cronoUnit__Y7ZQ8,.Crono_cronoHeader__VrKMx .Crono_cronoDate__6WYy9{font-size:18px;font-weight:500;color:#fff;text-align:center}.Crono_cronoLabel__08Vgt{font-size:18px;font-weight:400;color:#fff}.Crono_cronoInput__Kbww6 input{width:100%;padding:10px 12px;background:hsla(0,0%,100%,.07);border:1px solid hsla(0,0%,100%,.2);border-radius:4px;color:#fff;font-size:16px;text-align:center}.Crono_cronoInput__Kbww6 input:focus{outline:none;border-color:#4a90e2}.Crono_cronoInput__Kbww6 input:disabled{opacity:.5;cursor:not-allowed}.Crono_cronoUnit__Y7ZQ8{font-size:16px;color:#fff;text-align:center}.Crono_cronoDate__6WYy9{padding:10px 12px;background:hsla(0,0%,100%,.07);border:1px solid hsla(0,0%,100%,.2);border-radius:4px;color:#fff;font-size:16px;text-align:center}.Crono_dateInput__Qv\+\+G{cursor:pointer}.Crono_numberInput__sTNXO{text-align:center}.Crono_saveContainer__ZMou3{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:12px 16px;background:rgba(74,144,226,.1);border:1px solid rgba(74,144,226,.3);border-radius:6px;animation:Crono_slideDown__YmS5f .3s ease-out}@keyframes Crono_slideDown__YmS5f{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.Crono_saveButton__XQxOP{background:#4a90e2;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:6px}.Crono_saveButton__XQxOP:hover:not(:disabled){background:#357abd;transform:translateY(-1px)}.Crono_saveButton__XQxOP:active:not(:disabled){transform:translateY(0)}.Crono_saveButton__XQxOP:disabled{background:#666;cursor:not-allowed;opacity:.7}.Crono_unsavedIndicator__X27M7{color:#ff6b6b;font-size:16px;font-weight:bold}@keyframes Crono_pulse__hUK-D{0%,100%{opacity:1}50%{opacity:.5}}.Crono_emptyMessage__UKdbO{text-align:center;padding:40px;color:#ccc}.Crono_emptyMessage__UKdbO p{font-size:16px;margin:0}.Crono_stageCronoCard__a4gxt{background:#1a1a2e;border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 4px 12px rgba(0,0,0,.15);border:1px solid hsla(0,0%,100%,.1);transition:all .3s ease}.Crono_stageCronoCard__a4gxt:last-child{margin-bottom:0}.Crono_stageCronoCardActive__pFwko{border:2px solid #4caf50;box-shadow:0 4px 12px rgba(76,175,80,.3);background:#1a1a2e}.Crono_stageCronoCardInactive__Erl\+c{background:rgba(78,118,138,.08);border:1px solid rgba(76,175,165,.2)}.Crono_stageCronoCardInactive__Erl\+c:hover{background:rgba(76,175,163,.12);border-color:rgba(76,175,80,.3)}.Crono_accordionHeader__vNSIn{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;margin:-24px -24px 20px -24px;background:rgba(77,138,162,.15);border-radius:12px 12px 0 0;cursor:pointer;transition:all .2s ease}.Crono_accordionHeader__vNSIn:hover{background:rgba(76,172,175,.22)}.Crono_accordionHeader__vNSIn .Crono_stageTitle__NbU7P{margin:0;padding:0;border:none;font-size:18px;display:flex;align-items:center;gap:12px}.Crono_accordionHeader__vNSIn .Crono_stageTitle__NbU7P::before{display:none}.Crono_accordionIcon__mZAl3{font-size:14px;color:#4caf50;transition:transform .3s ease}.Crono_accordionBadge__10CFQ{font-size:12px;color:hsla(0,0%,100%,.6);background:rgba(0,0,0,.2);padding:4px 12px;border-radius:12px;font-weight:500}.Crono_stageHeader__7cj8L{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid hsla(0,0%,100%,.1)}.Crono_headerButtons__i-EXb{display:flex;align-items:center;gap:12px}.Crono_ganttButton__nRlDy{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px rgba(102,126,234,.3);display:flex;align-items:center;gap:6px}.Crono_ganttButton__nRlDy:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.4);background:linear-gradient(135deg, #764ba2 0%, #667eea 100%)}.Crono_ganttButton__nRlDy:active{transform:translateY(0)}.Crono_saveButton__XQxOP{background-color:#00c87f;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s ease;box-shadow:0 2px 8px rgba(0,200,127,.3)}.Crono_saveButton__XQxOP:hover:not(:disabled){background-color:#00b870;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,200,127,.4)}.Crono_saveButton__XQxOP:disabled{background-color:#666;cursor:not-allowed;opacity:.6}.Crono_saveButtonDisabled__d0Mwh{background-color:#666 !important;cursor:not-allowed !important;opacity:.6 !important}.Crono_checkIcon__kiaga{font-size:1rem;font-weight:bold}.Crono_spinner__WnDVJ{width:16px;height:16px;border:2px solid #fff;border-top:2px solid rgba(0,0,0,0);border-radius:50%;animation:Crono_spin__2cqyv 1s linear infinite}@keyframes Crono_spin__2cqyv{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.Crono_ganttChart__s96wG{background:#1a1a2e;border-radius:12px;padding:24px;margin:20px 0;box-shadow:0 4px 12px rgba(0,0,0,.15);border:1px solid hsla(0,0%,100%,.1);overflow-x:auto}.Crono_ganttHeader__BRdfL{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid hsla(0,0%,100%,.1)}.Crono_ganttHeader__BRdfL h3{color:#fff;font-size:20px;font-weight:600;margin:0}.Crono_ganttLegend__0CkdS{display:flex;gap:16px;flex-wrap:wrap}.Crono_legendItem__t9bQM{display:flex;align-items:center;gap:8px;color:#ccc;font-size:14px}.Crono_legendColor__5m80C{width:12px;height:12px;border-radius:2px}.Crono_ganttContainer__tZLWB{position:relative;overflow-x:auto;overflow-y:visible}.Crono_ganttTimeline__GIBpd{position:relative;min-width:1200px;height:400px;background:#2a2a3e;border-radius:8px;padding:20px}.Crono_monthLabels__Y-b5q{position:relative;height:30px;margin-bottom:20px;border-bottom:1px solid hsla(0,0%,100%,.2)}.Crono_monthLabel__OqoRg{position:absolute;top:0;font-size:12px;color:#ccc;transform:translateX(-50%);white-space:nowrap}.Crono_tasksContainer__hGEvG{position:relative;height:300px}.Crono_ganttTask__YixnO{position:absolute;height:40px;border-radius:6px;display:flex;align-items:center;padding:0 12px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.2);border:1px solid hsla(0,0%,100%,.1)}.Crono_ganttTask__YixnO:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.3);z-index:10}.Crono_taskName__ZNNfy{color:#fff;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Crono_ganttModalOverlay__Hjptz{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;padding:10px}.Crono_ganttModal__\+rzEn{background:#1a1a2e;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.3);border:1px solid hsla(0,0%,100%,.1);width:98vw;height:95vh;max-width:1800px;max-height:95vh;display:flex;flex-direction:column;overflow:hidden}.Crono_ganttModalHeader__WQ9j1{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid hsla(0,0%,100%,.1);background:#2a2a3e}.Crono_ganttModalHeader__WQ9j1 h2{color:#fff;font-size:24px;font-weight:600;margin:0}.Crono_ganttModalClose__EZ-zr{background:#ff4757;color:#fff;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;font-weight:bold;transition:all .2s ease}.Crono_ganttModalClose__EZ-zr:hover{background:#ff3742;transform:scale(1.1)}.Crono_ganttModalContent__94jQi{flex:1 1;overflow:auto;padding:0;display:flex;flex-direction:column}.Crono_ganttFilter__Axlz6{background:#2a2a3e;border-radius:8px;padding:20px;margin:20px;border:1px solid hsla(0,0%,100%,.1);flex-shrink:0}.Crono_filterHeader__18Bpe{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid hsla(0,0%,100%,.1)}.Crono_filterHeader__18Bpe h4{color:#fff;font-size:16px;font-weight:600;margin:0}.Crono_filterActions__bEyT8{display:flex;gap:8px}.Crono_filterButton__RMYP7{background:#4a5568;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.Crono_filterButton__RMYP7:hover:not(:disabled){background:#5a6578;transform:translateY(-1px)}.Crono_filterButton__RMYP7:disabled{background:#374151;color:#9ca3af;cursor:not-allowed;transform:none}.Crono_filterOptions__8hOOv{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));grid-gap:12px;gap:12px;margin-bottom:16px}.Crono_filterOption__vewZh{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px;border-radius:6px;transition:background-color .2s ease}.Crono_filterOption__vewZh:hover{background:hsla(0,0%,100%,.05)}.Crono_filterCheckbox__LXB4M{width:16px;height:16px;accent-color:#00d4ff;cursor:pointer}.Crono_filterColorIndicator__6WxiM{width:12px;height:12px;border-radius:2px;flex-shrink:0}.Crono_filterLabel__zBVUq{color:#e2e8f0;font-size:14px;font-weight:500;flex:1 1}.Crono_filterStats__db9R8{color:#9ca3af;font-size:12px;text-align:center;padding-top:12px;border-top:1px solid hsla(0,0%,100%,.1)}.Crono_stageTitle__NbU7P{font-size:24px;font-weight:600;color:#fff;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid rgba(74,144,226,.3);display:flex;align-items:center}.Crono_stageTitle__NbU7P::before{content:"";width:8px;height:8px;background:#4a90e2;border-radius:50%;margin-right:12px}.Crono_stageReferenceSelector__X0le-{background:rgba(74,144,226,.1);border:1px solid rgba(74,144,226,.3);border-radius:8px;padding:16px;margin-bottom:20px}.Crono_referenceHeader__6SeJC{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.Crono_referenceHeader__6SeJC h4{font-size:16px;font-weight:600;color:#fff;margin:0}.Crono_checkboxLabel__xHOeE{display:flex;align-items:center;cursor:pointer;font-size:14px;color:#ccc}.Crono_checkboxLabel__xHOeE input[type=checkbox]{margin-right:8px;width:16px;height:16px;accent-color:#4a90e2}.Crono_checkboxLabel__xHOeE span{-webkit-user-select:none;user-select:none}.Crono_referenceControls__oayYq{display:flex;flex-direction:column;gap:12px}.Crono_referenceRow__I0zZT{display:flex;align-items:center;gap:12px}.Crono_referenceLabel__b7GGN{font-size:14px;color:#ccc;min-width:120px;text-align:right}.Crono_referenceSelect__IJDlL{background:#2a2a3e;border:1px solid #444;border-radius:4px;color:#fff;padding:8px 12px;font-size:14px;min-width:200px}.Crono_referenceSelect__IJDlL:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px rgba(74,144,226,.2)}.Crono_referenceSelect__IJDlL option{background:#2a2a3e;color:#fff}.Crono_offsetInput__ZYZvI{display:flex;align-items:center;gap:8px}.Crono_offsetNumber__AUOLB{background:#2a2a3e;border:1px solid #444;border-radius:4px;color:#fff;padding:8px 12px;font-size:14px;width:80px;text-align:center}.Crono_offsetNumber__AUOLB:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px rgba(74,144,226,.2)}.Crono_offsetLabel__V3U2K{font-size:14px;color:#ccc}.Crono_referenceInfo__57VLN{margin-top:8px}.Crono_referenceInfo__57VLN small{color:#888;font-style:italic}.Crono_stageInfo__PlMA9{background:#2a2a3e;border:1px solid #444;border-radius:4px;color:#fff;padding:8px 12px;font-size:14px;min-width:200px;display:inline-block;font-weight:500}.Crono_referenceToggle__Lb0aq{display:flex;align-items:center;gap:10px;margin-top:10px}.Crono_referenceToggle__Lb0aq .Crono_checkboxLabel__xHOeE{display:flex;align-items:center;gap:8px;cursor:pointer;color:#fff;font-size:14px}.Crono_referenceToggle__Lb0aq .Crono_checkboxLabel__xHOeE input[type=checkbox]{width:16px;height:16px;accent-color:#007bff}.Crono_referenceToggle__Lb0aq .Crono_configureButton__HByA-{padding:6px 12px;background:rgba(0,123,255,.2);border:1px solid rgba(0,123,255,.3);border-radius:4px;color:#007bff;font-size:12px;cursor:pointer;transition:all .2s ease}.Crono_referenceToggle__Lb0aq .Crono_configureButton__HByA-:hover{background:rgba(0,123,255,.3);border-color:rgba(0,123,255,.5)}.Crono_modalOverlay__1AsqI{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000}.Crono_referenceModal__JwgP9{background:#1a1a1a;border-radius:12px;border:1px solid hsla(0,0%,100%,.1);width:90%;max-width:500px;max-height:90vh;overflow-y:auto}.Crono_referenceModal__JwgP9 .Crono_modalHeader__m2HWp{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid hsla(0,0%,100%,.1)}.Crono_referenceModal__JwgP9 .Crono_modalHeader__m2HWp h3{margin:0;color:#fff;font-size:18px;font-weight:600}.Crono_referenceModal__JwgP9 .Crono_modalHeader__m2HWp .Crono_closeButton__OuVFY{background:none;border:none;color:#ccc;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px}.Crono_referenceModal__JwgP9 .Crono_modalHeader__m2HWp .Crono_closeButton__OuVFY:hover{background:hsla(0,0%,100%,.1);color:#fff}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme{padding:20px}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_referenceInfo__57VLN{margin-bottom:20px;padding:15px;background:rgba(0,123,255,.1);border-radius:8px;border:1px solid rgba(0,123,255,.2)}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_referenceInfo__57VLN .Crono_stageInfo__PlMA9{color:#007bff;font-size:14px;font-weight:500;background:none;border:none;padding:0;min-width:auto}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_referenceInfo__57VLN .Crono_stageInfo__PlMA9 strong{display:block;margin-bottom:5px}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o{margin-bottom:20px}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o .Crono_formLabel__vpCt-{display:block;margin-bottom:8px;color:#fff;font-size:14px;font-weight:500}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o .Crono_formSelect__u0JJg{width:100%;padding:10px 12px;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:6px;color:#fff;font-size:14px}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o .Crono_formSelect__u0JJg:focus{outline:none;border-color:#007bff}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o .Crono_formSelect__u0JJg option{background:#1a1a1a;color:#fff}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o .Crono_offsetContainer__kAiQx{display:flex;align-items:center;gap:10px}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o .Crono_offsetContainer__kAiQx .Crono_offsetInput__ZYZvI{width:100px;padding:10px 12px;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:6px;color:#fff;font-size:14px;text-align:center}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o .Crono_offsetContainer__kAiQx .Crono_offsetInput__ZYZvI:focus{outline:none;border-color:#007bff}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o .Crono_offsetContainer__kAiQx .Crono_offsetUnit__eOG3T{color:#ccc;font-size:14px}.Crono_referenceModal__JwgP9 .Crono_modalContent__vUpme .Crono_formGroup__ZXa1o .Crono_offsetPreview__0oa8h{margin-top:8px;color:#ccc;font-size:12px;font-style:italic}.Crono_referenceModal__JwgP9 .Crono_modalFooter__74cf\+{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid hsla(0,0%,100%,.1)}.Crono_referenceModal__JwgP9 .Crono_modalFooter__74cf\+ .Crono_cancelButton__J6mOk{padding:10px 20px;background:rgba(0,0,0,0);border:1px solid hsla(0,0%,100%,.2);border-radius:6px;color:#ccc;font-size:14px;cursor:pointer;transition:all .2s ease}.Crono_referenceModal__JwgP9 .Crono_modalFooter__74cf\+ .Crono_cancelButton__J6mOk:hover{background:hsla(0,0%,100%,.05);border-color:hsla(0,0%,100%,.3);color:#fff}.Crono_referenceModal__JwgP9 .Crono_modalFooter__74cf\+ .Crono_applyButton__3fUwB{padding:10px 20px;background:#007bff;border:1px solid #007bff;border-radius:6px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.Crono_referenceModal__JwgP9 .Crono_modalFooter__74cf\+ .Crono_applyButton__3fUwB:hover{background:#0056b3;border-color:#0056b3} .ModalCreditConst_modalOverlay__nviPP{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.ModalCreditConst_modalContainer__5FYvh{background-color:#fff;border-radius:8px;width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.15)}.ModalCreditConst_modalHeader__\+ZFZo{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background-color:#f8f9fa;border-bottom:1px solid #e0e0e0}.ModalCreditConst_modalHeader__\+ZFZo h2{margin:0;font-size:1.5rem;font-weight:600;color:#333}.ModalCreditConst_closeButton__ciw66{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.ModalCreditConst_closeButton__ciw66:hover{background-color:#e9ecef}.ModalCreditConst_modalBody__sYfsA{padding:24px;overflow-y:auto;flex:1 1;display:flex;flex-direction:column;gap:32px}.ModalCreditConst_section__LWHOW h3{margin:0 0 20px 0;font-size:1.2rem;font-weight:600;color:#333;border-bottom:2px solid #e0e0e0;padding-bottom:8px}.ModalCreditConst_formGrid__ajlrM{display:grid;grid-template-columns:2fr 1fr 2fr;grid-gap:16px;gap:16px;align-items:end}.ModalCreditConst_formGroup__5tl-B{display:flex;flex-direction:column;gap:8px}.ModalCreditConst_formGroup__5tl-B label{font-weight:500;color:#333;font-size:.95rem}.ModalCreditConst_formGroupSmall__NzUBn{max-width:200px}.ModalCreditConst_formGroupLarge__9JYJ7{min-width:280px}.ModalCreditConst_loadButton__pBR3W{background:none;border:1px solid #1976d2;color:#1976d2;padding:4px 12px;border-radius:4px;font-size:.8rem;cursor:pointer;transition:all .2s;white-space:nowrap;margin-left:8px}.ModalCreditConst_loadButton__pBR3W:hover{background-color:#1976d2;color:#fff}.ModalCreditConst_loadButton__pBR3W:active{transform:scale(0.98)}.ModalCreditConst_labelWithButton__fEfpl{display:flex;align-items:center;justify-content:space-between}.ModalCreditConst_toggleContainer__\+xBDS{display:flex;background-color:#f5f5f5;border-radius:8px;padding:4px;gap:4px;border:1px solid #e0e0e0}.ModalCreditConst_toggleButton__gvcUO{flex:1 1;padding:10px 16px;border:none;border-radius:6px;background-color:rgba(0,0,0,0);color:#666;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s ease}.ModalCreditConst_toggleButton__gvcUO:hover{background-color:#e8e8e8;color:#333}.ModalCreditConst_toggleActive__NXiX1{background-color:#1976d2 !important;color:#fff !important;box-shadow:0 2px 4px rgba(25,118,210,.3)}.ModalCreditConst_toggleActive__NXiX1:hover{background-color:#1565c0 !important}.ModalCreditConst_toggleDescription__z3piC{font-size:.8rem;color:#666;margin-top:4px;font-style:italic}.ModalCreditConst_inputWithLabel__ySzTm{position:relative;display:flex;flex-direction:column;gap:4px}.ModalCreditConst_inputWithLabel__ySzTm .ModalCreditConst_fieldLabel__vqrXo{font-size:.8rem;color:#666;font-weight:500}.ModalCreditConst_inputField__mCk4H,.ModalCreditConst_selectInput__OrpkR,.ModalCreditConst_readonlyInput__GXmBS{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:6px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.ModalCreditConst_inputField__mCk4H:focus,.ModalCreditConst_selectInput__OrpkR:focus,.ModalCreditConst_readonlyInput__GXmBS:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 2px rgba(25,118,210,.1)}.ModalCreditConst_monthYearContainer__1QGic{display:flex;gap:12px;width:100%}.ModalCreditConst_monthYearContainer__1QGic .ModalCreditConst_selectInput__OrpkR{flex:1 1}.ModalCreditConst_dateButton__V9bxK{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:6px;font-size:.95rem;background:#fff;cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s}.ModalCreditConst_dateButton__V9bxK:hover{border-color:#1976d2}.ModalCreditConst_dateButton__V9bxK:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 2px rgba(25,118,210,.1)}.ModalCreditConst_readonlyInput__GXmBS{background-color:#f8f9fa;color:#666;cursor:not-allowed}.ModalCreditConst_modalFooter__VKgtS{padding:20px 24px;display:flex;justify-content:flex-end;gap:12px;background-color:#f8f9fa;border-top:1px solid #e0e0e0}.ModalCreditConst_cancelButton__cFwW7,.ModalCreditConst_saveButton__yRAnG{padding:10px 20px;border-radius:6px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s;border:none}.ModalCreditConst_cancelButton__cFwW7{background-color:#f0f0f0;color:#666}.ModalCreditConst_cancelButton__cFwW7:hover{background-color:#e6e6e6}.ModalCreditConst_saveButton__yRAnG{background-color:#1976d2;color:#fff}.ModalCreditConst_saveButton__yRAnG:hover{background-color:#1565c0}@media(max-width: 768px){.ModalCreditConst_modalContainer__5FYvh{max-width:95vw;max-height:95vh}.ModalCreditConst_formGrid__ajlrM{grid-template-columns:1fr}.ModalCreditConst_modalBody__sYfsA{padding:16px;gap:24px}}.ModalCreditConst_creditoConsolidadoField__cmMBT{max-width:300px} .DatePickerPopup_overlay__1pIed{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2000}.DatePickerPopup_popup__Y1XLz{background:#2c2c2c;border-radius:12px;padding:20px;min-width:300px;box-shadow:0 8px 32px rgba(0,0,0,.3)}.DatePickerPopup_header__RNtas{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;color:#fff}.DatePickerPopup_navButton__\+YN6e{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:8px 12px;border-radius:6px;transition:background-color .2s}.DatePickerPopup_navButton__\+YN6e:hover:not(:disabled){background-color:hsla(0,0%,100%,.1)}.DatePickerPopup_navButton__\+YN6e:disabled{opacity:.3;cursor:not-allowed}.DatePickerPopup_year__v6V9A{font-size:1.2rem;font-weight:600}.DatePickerPopup_monthGrid__cnt9u{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:8px;gap:8px;margin-bottom:20px}.DatePickerPopup_monthButton__WDlxl{background:#404040;border:none;color:#fff;padding:12px 8px;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s;min-height:40px}.DatePickerPopup_monthButton__WDlxl:hover:not(:disabled){background:#4a90e2}.DatePickerPopup_monthButton__WDlxl.DatePickerPopup_selected__gPzFm{background:#4caf50;color:#fff}.DatePickerPopup_monthButton__WDlxl.DatePickerPopup_disabled__tbpjm{background:#2a2a2a;color:#666;cursor:not-allowed;opacity:.5}.DatePickerPopup_footer__vEPp8{display:flex;justify-content:flex-end}.DatePickerPopup_cancelButton__bwcva{background:#404040;border:none;color:#fff;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.DatePickerPopup_cancelButton__bwcva:hover{background:#555} .PyGComponent_container__aYTs0{padding:25px;flex:1 1;background-color:#1a1a2e;color:#fff}.PyGComponent_title__FspHq{font-size:28px;margin-bottom:10px;font-weight:600;color:#fff}.PyGComponent_subtitle__hg3T7{font-size:16px;color:#8492a6;margin-bottom:30px}.PyGComponent_warning__\+FDGL{padding:20px;background-color:rgba(255,193,7,.1);border-left:4px solid #ffc107;border-radius:4px}.PyGComponent_warning__\+FDGL p{margin:0;color:#ffc107}.PyGComponent_tableContainer__lW7WC{background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)}.PyGComponent_row__bVm13{display:grid;grid-template-columns:2fr 1fr 1fr;align-items:center;border-bottom:1px solid #e8e8e8}.PyGComponent_row__bVm13:last-child{border-bottom:none}.PyGComponent_row__bVm13.PyGComponent_header__OYrSj{background-color:#f5f5f5;font-weight:600;color:#333;padding:15px 20px;font-size:14px;text-transform:uppercase}.PyGComponent_row__bVm13.PyGComponent_nivel0__DhtLA{padding:12px 20px;font-weight:500;color:#333;background-color:#fff}.PyGComponent_row__bVm13.PyGComponent_nivel0__DhtLA:hover{background-color:#f9f9f9}.PyGComponent_row__bVm13.PyGComponent_nivel1__NH1g0{padding:10px 20px;padding-left:50px;font-weight:400;color:#666;background-color:#fafafa;font-size:14px}.PyGComponent_row__bVm13.PyGComponent_nivel2__Fqlv8{padding:8px 20px;padding-left:80px;font-weight:400;color:#888;background-color:#fff;font-size:13px;font-style:italic;border-bottom:1px solid #f0f0f0}.PyGComponent_row__bVm13.PyGComponent_subItem__7Y7ux{background-color:#f8f9fa}.PyGComponent_row__bVm13.PyGComponent_resultado__75cqr{background-color:rgba(66,179,179,.2);font-weight:600;color:#2e7d32;border-top:2px solid rgba(66,179,179,.6);padding:15px 20px}.PyGComponent_nombreCell__xkX2g{display:flex;align-items:center;gap:10px}.PyGComponent_expandIcon__5m0Jh{color:#4a90e2;font-size:12px;transition:transform .2s ease}.PyGComponent_nombreTexto__eHYrN{flex:1 1}.PyGComponent_totalCell__6UpXc{text-align:right;font-family:"Courier New",monospace}.PyGComponent_porcentajeCell__Tmq3o{text-align:right;font-family:"Courier New",monospace;color:#666} .InformesEtapaComponent_container__m-W-w{padding:25px;flex:1 1;background-color:#1a1a2e;color:#fff}.InformesEtapaComponent_title__No\+66{font-size:28px;margin-bottom:10px;font-weight:600;color:#fff}.InformesEtapaComponent_subtitle__o1aYG{font-size:16px;color:#8492a6;margin-bottom:30px}.InformesEtapaComponent_warning__cJJGv{padding:20px;background-color:rgba(255,193,7,.1);border-left:4px solid #ffc107;border-radius:4px}.InformesEtapaComponent_warning__cJJGv p{margin:0;color:#ffc107}.InformesEtapaComponent_tableContainer__OEbh6{background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)}.InformesEtapaComponent_row__U5Z6W{display:grid;grid-template-columns:2fr 1.5fr .7fr 1.5fr .7fr 1.5fr;align-items:center;border-bottom:1px solid #e8e8e8}.InformesEtapaComponent_row__U5Z6W:last-child{border-bottom:none}.InformesEtapaComponent_header__t011y{background-color:#f5f5f5;font-weight:600;color:#333;padding:15px 20px;font-size:14px;text-transform:uppercase}.InformesEtapaComponent_primaryRow__rUHGi{background-color:#f8f9fa;font-weight:600;color:#333;padding:12px 20px;border-top:2px solid #e0e0e0}.InformesEtapaComponent_primaryRow__rUHGi:first-of-type{border-top:none}.InformesEtapaComponent_conceptCell__6NfEP{padding:12px 20px;text-align:left;font-size:14px;color:#333;font-weight:500}.InformesEtapaComponent_valueCell__PgY2z{padding:12px 15px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_percentCell__pmGHw{padding:12px 10px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#666}.InformesEtapaComponent_row__U5Z6W:not(.InformesEtapaComponent_header__t011y):not(.InformesEtapaComponent_primaryRow__rUHGi){padding:12px 20px;background-color:#fff}.InformesEtapaComponent_row__U5Z6W:not(.InformesEtapaComponent_header__t011y):not(.InformesEtapaComponent_primaryRow__rUHGi):hover{background-color:#f9f9f9}.InformesEtapaComponent_capitalRiesgoTitle__Dogfe{font-size:22px;margin-top:50px;margin-bottom:20px;font-weight:600;color:#fff;text-align:center}.InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellCapital__1KH2I){display:grid;grid-template-columns:2fr 1fr}.InformesEtapaComponent_conceptCellCapital__1KH2I{padding:12px 20px;text-align:left;font-size:14px;color:#333;font-weight:500;display:flex;align-items:center;gap:10px}.InformesEtapaComponent_valueCellCapital__f0-y7{padding:12px 20px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_expandableRow__UianD:hover{background-color:#f9f9f9}.InformesEtapaComponent_expandIcon__4S8yC{color:#4a90e2;font-size:12px;transition:transform .2s ease}.InformesEtapaComponent_subItemRow__BN\+nn{background-color:#f8f9fa}.InformesEtapaComponent_subItemRow__BN\+nn .InformesEtapaComponent_conceptCellCapital__1KH2I{padding-left:50px;font-weight:400;color:#666;font-size:13px}.InformesEtapaComponent_subItemRow__BN\+nn .InformesEtapaComponent_valueCellCapital__f0-y7{color:#666;font-size:13px}.InformesEtapaComponent_subItemRow__BN\+nn:hover{background-color:#f0f0f0}.InformesEtapaComponent_loteInfoTitle__GtCUr{font-size:22px;margin-top:50px;margin-bottom:20px;font-weight:600;color:#fff;text-align:center}.InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellLote__5FcvI){display:grid;grid-template-columns:1.2fr repeat(6, 1fr)}.InformesEtapaComponent_conceptCellLote__5FcvI{padding:12px 20px;text-align:left;font-size:14px;color:#333;font-weight:500}.InformesEtapaComponent_faseCellLote__ceVs\+{padding:12px 15px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_informeVentasTitle__vgX9d{font-size:22px;margin-top:50px;margin-bottom:20px;font-weight:600;color:#fff;text-align:center}.InformesEtapaComponent_sectionSubtitle__Wqoeu{font-size:18px;font-weight:600;color:#fff;margin-top:30px;margin-bottom:15px;text-align:left}.InformesEtapaComponent_rangoReferencia__x9oz2{margin-left:10px;color:#7f8c8d;font-size:.9em}.InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellVentas__iBhva){display:grid;grid-template-columns:2fr .5fr 2fr}.InformesEtapaComponent_conceptCellVentas__iBhva{padding:12px 20px;text-align:left;font-size:14px;color:#333;font-weight:500}.InformesEtapaComponent_valueCellVentas__V9qcx{padding:12px 15px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellEvolucion__Gp7xz){display:grid;grid-template-columns:2fr 2fr 1.5fr}.InformesEtapaComponent_conceptCellEvolucion__Gp7xz{padding:12px 20px;text-align:left;font-size:14px;color:#333;font-weight:500}.InformesEtapaComponent_valueCellEvolucion__lBRCG{padding:12px 15px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_fechaCellEvolucion__Rnhc9{padding:12px 15px;text-align:center;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellCrono__5gW1Y){display:grid;grid-template-columns:2fr 2fr 1.5fr 1fr 1.2fr}.InformesEtapaComponent_conceptCellCrono__5gW1Y{padding:12px 20px;text-align:left;font-size:14px;color:#333;font-weight:500}.InformesEtapaComponent_valueCellCrono__4o\+5f{padding:12px 15px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_fechaCellCrono__Hgda4{padding:12px 15px;text-align:center;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_mesesCellCrono__OHE4M{padding:12px 15px;text-align:center;font-size:14px;font-family:"Courier New",monospace;font-weight:600;color:#333}.InformesEtapaComponent_valorizacionCellCrono__MmA4H{padding:12px 15px;text-align:center;font-size:14px;font-family:"Courier New",monospace;font-weight:600;color:#333}.InformesEtapaComponent_valorizacionPreventas__LgM0c{background-color:rgba(134,239,172,.3)}.InformesEtapaComponent_valorizacionVentas__6xPcF{background-color:rgba(252,165,165,.3)}.InformesEtapaComponent_valorizacionTotal__v4okN{background-color:rgba(253,224,71,.3)}.InformesEtapaComponent_relacionesConstruccionTitle__byoIk{font-size:22px;margin-top:50px;margin-bottom:20px;font-weight:600;color:#fff;text-align:center}.InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellConstruccion__GLrTN){display:grid;grid-template-columns:1.8fr 1.5fr .9fr 1.5fr .9fr .9fr}.InformesEtapaComponent_conceptCellConstruccion__GLrTN{padding:12px 20px;text-align:left;font-size:14px;color:#333;font-weight:500}.InformesEtapaComponent_valueCellConstruccion__aKOxJ{padding:12px 15px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_percentCellConstruccion__KwlmF{padding:12px 10px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_percentVtasCellConstruccion__2TrpQ{padding:12px 10px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#059669;font-weight:600}.InformesEtapaComponent_analisisMargenTitle__YOneY{font-size:22px;margin-top:50px;margin-bottom:20px;font-weight:600;color:#fff;text-align:center}.InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellMargen__D43ny){display:grid;grid-template-columns:2fr 1.5fr 1.5fr 1.3fr 1.3fr}.InformesEtapaComponent_conceptCellMargen__D43ny{padding:12px 20px;text-align:left;font-size:14px;color:#333;font-weight:500}.InformesEtapaComponent_valueCellMargen__eMZzm{padding:12px 15px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333}.InformesEtapaComponent_variacionCellMargen__t5NaD{padding:12px 15px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#2563eb;font-weight:500}.InformesEtapaComponent_variacionPctCellMargen__MkWAt{padding:12px 15px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#7c3aed;font-weight:500}.InformesEtapaComponent_separadorRow__dyuOD{border-top:2px solid #e0e0e0;border-bottom:2px solid #e0e0e0;background-color:#f8f9fa}.InformesEtapaComponent_ratioRow__p3jNI{background-color:#fff7ed;font-weight:600}.InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellImpacto__HmX\+z){display:grid;grid-template-columns:2fr 3fr}.InformesEtapaComponent_conceptCellImpacto__HmX\+z{padding:12px 20px;text-align:left;font-size:14px;color:#333;font-weight:500}.InformesEtapaComponent_valueCellImpacto__7wNsD{padding:12px 20px;text-align:right;font-size:14px;font-family:"Courier New",monospace;color:#333;font-weight:600}.InformesEtapaComponent_impactoPositivo__UBEUN{color:#059669 !important;background-color:rgba(5,150,105,.1)}.InformesEtapaComponent_impactoNegativo__rivN7{color:#dc2626 !important;background-color:rgba(220,38,38,.1)}.InformesEtapaComponent_informesVentasContainer__MYm4A{display:flex;gap:15px;margin-top:20px;flex-wrap:wrap}@media(min-width: 1400px){.InformesEtapaComponent_informesVentasContainer__MYm4A{flex-wrap:nowrap}}.InformesEtapaComponent_informeVentasItem__\+Bi1L{flex:1 1;min-width:280px}@media(min-width: 1400px){.InformesEtapaComponent_informeVentasItem__\+Bi1L{min-width:0}}.InformesEtapaComponent_informeVentasItem__\+Bi1L .InformesEtapaComponent_sectionSubtitle__Wqoeu{margin-top:0;margin-bottom:10px;font-size:14px;font-weight:600}.InformesEtapaComponent_informeVentasItemCompacto__YGQzz{flex:.75 1}.InformesEtapaComponent_informeVentasItemCompacto__YGQzz .InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellVentas__iBhva){grid-template-columns:1.5fr .3fr 1.7fr}.InformesEtapaComponent_informeVentasItemMedio__iHel5{flex:.9 1}.InformesEtapaComponent_informeVentasItemMedio__iHel5 .InformesEtapaComponent_row__U5Z6W:has(.InformesEtapaComponent_conceptCellEvolucion__Gp7xz){grid-template-columns:1.2fr 2.2fr 2fr}.InformesEtapaComponent_informeVentasItemAmplio__D5haL{flex:1.5 1}.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_tableContainer__OEbh6{font-size:.9em}.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_conceptCellVentas__iBhva,.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_conceptCellEvolucion__Gp7xz,.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_conceptCellCrono__5gW1Y{padding:8px 12px;font-size:12px}.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_valueCellVentas__V9qcx,.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_valueCellEvolucion__lBRCG,.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_valueCellCrono__4o\+5f,.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_fechaCellEvolucion__Rnhc9,.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_fechaCellCrono__Hgda4,.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_mesesCellCrono__OHE4M,.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_valorizacionCellCrono__MmA4H{padding:8px 10px;font-size:12px}.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_header__t011y{padding:10px 12px;font-size:12px}.InformesEtapaComponent_informeVentasItemAmplio__D5haL .InformesEtapaComponent_row__U5Z6W:not(.InformesEtapaComponent_header__t011y):not(.InformesEtapaComponent_primaryRow__rUHGi){padding:8px 12px}.InformesEtapaComponent_optionsContainer__C3dXP{display:flex;margin-bottom:20px;border-bottom:1px solid hsla(0,0%,100%,.2)}.InformesEtapaComponent_optionButton__ICaxh{padding:10px 20px;cursor:pointer;font-size:16px;background-color:rgba(0,0,0,0);border:none;color:#fff;transition:all .3s;position:relative;margin-right:5px}.InformesEtapaComponent_optionButton__ICaxh.InformesEtapaComponent_active__c9c5Y{color:#4a90e2;font-weight:500}.InformesEtapaComponent_optionButton__ICaxh.InformesEtapaComponent_active__c9c5Y:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background-color:#4a90e2}.InformesEtapaComponent_optionButton__ICaxh:hover{background-color:rgba(74,144,226,.15)}.InformesEtapaComponent_contentContainer__4GgOJ{flex:1 1;background-color:hsla(0,0%,100%,.02);border-radius:12px;padding:30px;border:1px solid hsla(0,0%,100%,.1)}.InformesEtapaComponent_tabContent__JjDYn{width:100%}.InformesEtapaComponent_placeholder__Gfsrq{display:flex;align-items:center;justify-content:center;min-height:300px}.InformesEtapaComponent_placeholder__Gfsrq p{font-size:18px;color:#b0b8c1} .VariacionEAGrafica_graficaContainer__jmuE9{margin-top:30px;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.VariacionEAGrafica_graficaTitle__CmYbO{font-size:18px;font-weight:600;margin-bottom:15px;color:#1f2937}.VariacionEAGrafica_subtitle__ES1ZE{font-size:14px;font-weight:500;margin-bottom:10px;color:#4b5563}.VariacionEAGrafica_resumenVariacion__eCY5D{display:flex;gap:30px;margin-bottom:15px;padding:12px;background:#f9fafb;border-radius:6px;flex-wrap:wrap}.VariacionEAGrafica_resumenItem__95BEc{display:flex;flex-direction:column;gap:5px;min-width:200px}.VariacionEAGrafica_resumenLabel__E2pty{font-size:12px;color:#6b7280;font-weight:500}.VariacionEAGrafica_resumenValue__FfE-1{font-size:18px;font-weight:700;color:#1f2937}.VariacionEAGrafica_resumenFecha__DaxEP{font-size:11px;color:#9ca3af}.VariacionEAGrafica_graficasContainer__mVAX5{display:flex;gap:15px;flex-wrap:wrap}@media(min-width: 1200px){.VariacionEAGrafica_graficasContainer__mVAX5{flex-wrap:nowrap}}.VariacionEAGrafica_chartWrapper__uOLbR{flex:1 1;min-width:300px;width:100%}.VariacionEAGrafica_customTooltip__2RM72{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:10px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.VariacionEAGrafica_tooltipLabel__suPTp{font-weight:600;margin-bottom:8px;color:#1f2937;font-size:13px}.VariacionEAGrafica_tooltipEA__-qIcL{font-size:11px;color:#6b7280;font-weight:500}.VariacionEAGrafica_tooltipPhase__y9N1Z{font-size:10px;color:#9ca3af;font-style:italic;margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid #e5e7eb}.VariacionEAGrafica_noData__bO5kA{padding:40px;text-align:center;color:#6b7280;background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1)} .pricing-feasibility-module { padding: 25px; flex: 1 1; background-color: #111116; min-height: 100%; } .tabs-container { display: flex; gap: 0; margin-bottom: 30px; border-bottom: 2px solid #2a2a2f; } .tab-button { padding: 14px 24px; background: transparent; border: none; color: #9ca3af; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; position: relative; border-bottom: 3px solid transparent; } .tab-button:hover { color: #e5e7eb; background-color: rgba(74, 144, 226, 0.1); } .tab-button.active { color: #4a90e2; border-bottom-color: #4a90e2; } .tab-content { padding: 30px; background-color: #1a1a1f; border-radius: 8px; color: #ffffff; font-size: 18px; font-weight: 500; min-height: 400px; display: flex; align-items: center; justify-content: center; } /* Estilos para formulario */ .pfm-form-section { padding: 30px; background-color: #1a1a1f; border-radius: 8px; color: #ffffff; } .pfm-section-title { font-size: 22px; font-weight: 600; color: #ffffff; margin-bottom: 20px; border-bottom: 2px solid #2a2a2f; padding-bottom: 10px; } .pfm-form-row { display: flex; align-items: center; margin-bottom: 20px; gap: 15px; } .pfm-form-label { flex: 0 0 350px; font-size: 15px; color: #d1d5db; font-weight: 500; } .pfm-form-input { flex: 1 1; max-width: 300px; padding: 10px 14px; background-color: #111116; border: 1px solid #2a2a2f; border-radius: 6px; color: #ffffff; font-size: 15px; transition: all 0.3s ease; } .pfm-form-input:focus { outline: none; border-color: #4a90e2; box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1); } .pfm-form-input::placeholder { color: #6b7280; } /* Estilos para tabla */ .pfm-table-container { overflow-x: auto; margin-top: 20px; border-radius: 8px; border: 1px solid #2a2a2f; } .pfm-table { width: 100%; border-collapse: collapse; background-color: #111116; } .pfm-table thead { background-color: #1a1a1f; border-bottom: 2px solid #2a2a2f; } .pfm-table th { padding: 14px 16px; text-align: left; font-size: 14px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; } .pfm-table tbody tr { border-bottom: 1px solid #2a2a2f; transition: background-color 0.2s ease; } .pfm-table tbody tr:hover { background-color: #1a1a1f; } .pfm-table tbody tr:last-child { border-bottom: none; } .pfm-table td { padding: 12px 16px; font-size: 14px; color: #d1d5db; } .pfm-input-table { width: 100%; padding: 8px 10px; background-color: #1a1a1f; border: 1px solid #2a2a2f; border-radius: 4px; color: #ffffff; font-size: 14px; transition: all 0.2s ease; } .pfm-input-table:focus { outline: none; border-color: #4a90e2; background-color: #111116; } /* Botones */ .pfm-btn-add { margin-top: 20px; padding: 12px 24px; background-color: #4a90e2; border: none; border-radius: 6px; color: #ffffff; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .pfm-btn-add:hover { background-color: #3a7bc8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3); } .pfm-button-secondary { padding: 10px 16px; background-color: #2a2a2f; border: 1px solid #4a4a4f; border-radius: 6px; color: #ffffff; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; } .pfm-button-secondary:hover { background-color: #3a3a3f; border-color: #5a5a5f; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(74, 74, 79, 0.3); } .pfm-btn-delete { padding: 6px 14px; background-color: #dc2626; border: none; border-radius: 4px; color: #ffffff; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .pfm-btn-delete:hover:not(:disabled) { background-color: #b91c1c; } .pfm-btn-delete:disabled { background-color: #4b5563; cursor: not-allowed; opacity: 0.5; } /* Estilos para Variables */ .pfm-variables-list { margin-top: 20px; display: flex; flex-direction: column; gap: 15px; } .pfm-variable-row { display: flex; align-items: center; gap: 15px; padding: 15px; background-color: #111116; border-radius: 6px; border: 1px solid #2a2a2f; } .pfm-empty-message { padding: 40px; text-align: center; background-color: #111116; border-radius: 8px; border: 1px dashed #2a2a2f; margin-top: 20px; } .pfm-empty-message p { color: #9ca3af; font-size: 15px; margin: 0; } .pfm-variables-table { min-width: 800px; } .pfm-variables-table th { white-space: nowrap; } .pfm-variables-table td input { max-width: 100px; } /* Estilos para contenedor de variable completo */ .pfm-variable-container { margin-bottom: 20px; padding: 20px; background-color: #111116; border-radius: 8px; border: 1px solid #2a2a2f; } /* Estilos para editor de escala */ .pfm-scale-editor { margin-top: 20px; padding: 15px; background-color: #1a1a1f; border-radius: 6px; border: 1px solid #2a2a2f; } .pfm-scale-editor-title { font-size: 14px; font-weight: 600; color: #9ca3af; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .pfm-scale-rows { display: flex; flex-direction: column; gap: 8px; } .pfm-scale-row { display: flex; align-items: center; gap: 12px; } .pfm-scale-value { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; background-color: #4a90e2; color: #ffffff; font-weight: 600; font-size: 14px; border-radius: 4px; } .pfm-scale-input { flex: 1 1; padding: 8px 12px; background-color: #111116; border: 1px solid #2a2a2f; border-radius: 4px; color: #ffffff; font-size: 14px; transition: all 0.2s ease; } .pfm-scale-input:focus { outline: none; border-color: #4a90e2; background-color: #1a1a1f; } .pfm-scale-input::placeholder { color: #6b7280; } /* Estilos para celda de score con helper */ .pfm-score-cell { display: flex; flex-direction: column; gap: 4px; } .pfm-score-helper { font-size: 11px; color: #9ca3af; font-style: italic; padding: 2px 4px; background-color: rgba(74, 144, 226, 0.1); border-radius: 3px; text-align: center; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Estilos para KPIs Grid */ .pfm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 16px; gap: 16px; margin-bottom: 32px; } .pfm-kpi-card { background-color: #111116; padding: 16px 20px; border-radius: 8px; border: 1px solid #2a2a2f; transition: all 0.3s ease; } .pfm-kpi-card:hover { border-color: #4a90e2; box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15); transform: translateY(-2px); } .pfm-kpi-label { font-size: 12px; color: #9ca3af; margin-bottom: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .pfm-kpi-value { font-size: 20px; font-weight: 700; color: #ffffff; line-height: 1.2; } /* Estilos para tabla de resultados */ .pfm-results-table { width: 100%; border-collapse: collapse; background-color: #111116; } .pfm-results-table thead { background-color: #1a1a1f; border-bottom: 2px solid #2a2a2f; } .pfm-results-table th { padding: 14px 16px; text-align: left; font-size: 13px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; } .pfm-results-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: background-color 0.2s ease; } .pfm-results-table tbody tr:hover { background-color: #1a1a1f; } .pfm-results-table td { padding: 12px 16px; font-size: 14px; color: #d1d5db; text-align: left; } .pfm-results-total-row { background-color: #1a1a1f !important; border-top: 2px solid #4a90e2 !important; border-bottom: none !important; } .pfm-results-total-row td { color: #ffffff; font-weight: 600; } .pfm-results-total-row:hover { background-color: #1a1a1f !important; } /* Estilos para Heatmap */ .pfm-heatmap-section { margin-top: 24px; margin-bottom: 24px; } /* Controles del heatmap */ .pfm-heatmap-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; } .pfm-heatmap-controls-label { opacity: 0.8; color: #9ca3af; font-weight: 500; } .pfm-chip-button { border-radius: 999px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: #9ca3af; font-size: 11px; cursor: pointer; transition: all 0.2s ease; font-weight: 500; } .pfm-chip-button:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #d1d5db; } .pfm-chip-button-active { background: rgba(74, 144, 226, 0.2); border-color: rgba(74, 144, 226, 0.4); color: #4a90e2; } .pfm-heatmap-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; opacity: 0.8; margin-bottom: 12px; color: #9ca3af; } .pfm-heatmap-legend-bar { flex: 1 1; height: 8px; border-radius: 4px; background: linear-gradient( to right, hsl(0, 70%, 40%), hsl(60, 70%, 40%), hsl(120, 70%, 40%) ); } .pfm-heatmap-grid { display: flex; flex-direction: column; gap: 6px; } .pfm-heatmap-row { display: flex; align-items: flex-start; gap: 8px; } .pfm-heatmap-floor-label { width: 70px; font-size: 12px; opacity: 0.8; padding-top: 4px; color: #9ca3af; font-weight: 500; } .pfm-heatmap-row-cells { display: flex; gap: 6px; flex-wrap: wrap; } .pfm-heatmap-cell { min-width: 80px; padding: 6px 8px; border-radius: 6px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-size: 11px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); cursor: pointer; transition: all 0.2s ease; } .pfm-heatmap-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 200, 150, 0.3); border-color: rgba(0, 200, 150, 0.5); } .pfm-heatmap-cell-unit { font-weight: 600; margin-bottom: 2px; color: #ffffff; } .pfm-heatmap-cell-percent { opacity: 0.8; color: #d1d5db; } /* Acciones de resultados */ .pfm-results-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; margin-bottom: 16px; } .pfm-btn-excel { padding: 10px 20px; background-color: #10b981; border: none; border-radius: 6px; color: #ffffff; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } .pfm-btn-excel:hover { background-color: #059669; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } .pfm-btn-excel:active { transform: translateY(0); } /* Acciones de Excel en pestaña Base */ .pfm-base-excel-actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } /* Acciones de Excel en pestaña Variables */ .pfm-variables-excel-actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } /* Panel de insights */ .pfm-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-gap: 16px; gap: 16px; margin-top: 24px; margin-bottom: 24px; } .pfm-insights-column { background: #15151a; border-radius: 8px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.06); } .pfm-insights-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 8px; } .pfm-insights-subtitle { font-size: 12px; font-weight: 500; margin-top: 12px; margin-bottom: 6px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.5px; } .pfm-insights-list { list-style: none; padding: 0; margin: 0 0 8px 0; } .pfm-insights-list li { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .pfm-insights-list li:last-child { border-bottom: none; } .pfm-insights-unit { opacity: 0.85; color: #d1d5db; } .pfm-insights-value { font-weight: 500; color: #ffffff; } .pfm-insights-item { margin-bottom: 16px; font-size: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .pfm-insights-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .pfm-insights-label { font-size: 11px; color: #9ca3af; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .pfm-insights-warning { margin-top: 6px; font-size: 11px; color: #ffb347; padding: 4px 8px; background-color: rgba(255, 179, 71, 0.1); border-radius: 4px; border-left: 2px solid #ffb347; } .pfm-insights-empty { font-size: 11px; opacity: 0.5; color: #9ca3af; font-style: italic; } .pfm-insights-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 6px 0 0 0; } .pfm-insights-tags li { font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 179, 71, 0.3); background-color: rgba(255, 179, 71, 0.1); color: #ffb347; }