/*
     Colors Palette
#3ce1f9
*/
html {
     scroll-behavior: smooth;
     scroll-padding-top: 70px;
     font-size: .85rem;
}

:root {
     color-scheme: light dark;
     /* Backgrounds / borders / shadows */
     --bg-color: light-dark(#f5f7fa,#0d1117);
     --bg-color-darker: light-dark(#f3f5f7,#0a0e12);
     --border-separator: light-dark(#dbe9ff,#1e1e1e);
     --box-shadow: 0 .46875rem 1.5rem rgba(31.5, 53, 108, .03), 0 .75rem 1rem rgba(31.5, 53, 108, .03), 0 .25rem .375rem rgba(31.5, 53, 108, .05), 0 .125rem .125rem rgba(31.5, 53, 108, .03);
     /* Palette */
     --primary-color: light-dark(#0052CC,#1f6feb);
     --primary-color-hover: light-dark(#003D99,#2078ff);
     --primary-color-active: light-dark(#002D73,#1b62d0);
     --primary-color-text: light-dark(#f5f7fa,#f5f7fa);
     --color-palette-1: light-dark(#dbe9ff,#1661a2);
     /* Headings / links */
     --h1-color: light-dark(#1e1e1e,#d1d1d1);
     --h2-color: light-dark(#1661a2,#F8FAFC);
     --a-link: light-dark(#3a72c6,#80bbff);
     --a-link-hover: light-dark(#254b86,#aed4ff);
     /* Font */
     --font-family-regular: roboto-regular;
     --font-family-bold: roboto-bold;
     --font-family-italic: roboto-italic;
     --font-size-medium: 12pt;
     --font-size-regular: .85rem;
     --font-size-small: .75rem;
     --font-color-regular: light-dark(#333,#F8FAFC);
     /* Radius */
     --border-small: 5px;
     --border-large: 20px;
     /* Buttons / inputs */
     --button-color: light-dark(#1661a2,#aed4ff);
     --button-border: light-dark(#f2f2f2,#0e131b);
     --button-bg: light-dark(rgba(250, 250, 250, 1),#131821);
     --button-bg-hover: light-dark(rgba(245, 245, 245, 1),#0e131b);
     --button-bg-active: light-dark(#f2f2f2,#070707);
     --button-bg-disabled: light-dark(#E0E0E0,#2C2C2C);
     --button-bg-text-disabled: light-dark(#9E9E9E,#6E6E6E);
     --button-border-width: 1px;
     --input-bg: light-dark(#F0F4F8,#161b22);
     --input-bg-border: light-dark(#e0e8ef,#0a0e15);
     --input-bg-focus: light-dark(#fff,#080808);
     --label-color: light-dark(#2A4365,#73b4ff);
     --table-bg: light-dark(#fff,#0d1117);
     --table-bg-separator: light-dark(#f9f9f9,#0a0d12);
     --validation-error-color: light-dark(darkred,#fff);
     --validation-error-bg: light-dark(#ffd3d3,#641010);
     --register-detail-border: light-dark(#e3f3ff,#1c2d46);
     --register-detail-bg: light-dark(#e9f3fb,#152235);
}

/*#region Default */
a {
     text-decoration: none;
}

p {
     margin: 0;
}

b {
     font-weight: normal;
     font-family: var(--font-bold);
}

h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
     margin: 0;
     padding: 0;
     font-family: var(--font-family-bold);
}

h1, h2 {
     font-size: 18pt;
     margin: 30px 0 15px 0;
}

h1 {
     color: var(--h1-color);
}

h2 {
     color: var(--h2-color);
}

ul {
     padding: 0;
     margin: 0;
}

     ul li {
          list-style-type: none;
     }

body {
     background-color: var(--bg-color);
     font-family: var(--font-family-regular);
     user-select: none;
     font-size: var(--font-size-regular);
     color: var(--font-color-regular);
     padding: 0;
     margin: 0;
}

input[type=text], input[type=email], input[type=password], input[type=password] {
     border: none;
     font-family: var(--font-bold);
     font-size: 12pt;
     width: 100%;
     background-color: var(--input-bg);
}

button {
     border: none;
     cursor: pointer;
}
/*#endregion */

/*#region Colors */
.color-1 {
     color: var(--color-palette-1);
}
/*#endregion */

/*#region Footer */
footer {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     display: flex;
     border-top: solid 1px var(--border-separator);
     padding: 10px;
     justify-content: center;
     font-size: var(--font-size-small);
     background-color: var(--bg-color);
}

     footer .app-data {
          display: flex;
          gap: 20px;
          align-items: center;
     }

          footer .app-data div {
               display: flex;
               gap: 5px;
               align-items: center;
          }
/*#endregion*/

/*#region Nav */
nav {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     padding: 10px;
     border-bottom: solid 1px var(--border-separator);
}

     nav .nav-content {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-end;
          width: 800px;
          gap: 5px;
          align-items: center;
     }

.nav-button {
     border: solid var(--button-border-width) var(--button-border);
     padding: 10px;
     font-size: 10pt;
     width: 40px;
     height: 40px;
     border-radius: var(--border-small);
     color: var(--button-color);
     background: var(--button-bg);
}

     .nav-button.small {
          padding: 10px !important;
          width: 20px;
          height: 20px;
          justify-content: center;
          align-items: center;
          display: flex;
          box-sizing: border-box;
     }

          .nav-button.small i {
               font-size: 8pt;
          }

     .nav-button:hover {
          background: var(--button-bg-hover);
     }

     .nav-button:active {
          background: var(--button-bg-active);
          transform: scale(0.97);
     }

     .nav-button svg {
          fill: var(--button-color) !important;
     }

.nav-lang a {
     color: var(--a-link);
     font-family: var(--font-family-bold);
}

     .nav-lang a:hover {
          color: var(--a-link-hover);
     }
/*#endregion */

/*#region Darkmode */
#theme-switch svg:first-child {
     display: block;
}

#theme-switch svg:last-child {
     display: none;
}

.darkmode #theme-switch svg:first-child {
     display: none;
}

.darkmode #theme-switch svg:last-child {
     display: block;
}
/*#endregion */


@keyframes scroll-down-info {
     0% {
          top: -100vh;
          bottom: 100vh;
     }

     100% {
          top: 0vh;
          bottom: 0vh;
     }
}

@keyframes scroll-up-info {
     0% {
          top: 0vh;
          bottom: 0vh;
     }

     100% {
          top: -100vh;
          bottom: 100vh;
     }
}

/*#region PageInfo */
.page-info {
     background-color: var(--bg-color-darker);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 20px;
     box-sizing: border-box;
     text-align: center;
     display: none;
     border-bottom: solid 1px var(--border-separator);
}

     .page-info.hide {
          display: block;
          animation-name: scroll-up-info;
          animation-duration: 500ms;
          animation-timing-function: ease-in-out;
          animation-fill-mode: forwards;
     }

     .page-info.show {
          display: block;
          animation-name: scroll-down-info;
          animation-duration: 1s;
          animation-timing-function: ease-in-out;
          animation-fill-mode: forwards;
     }

     .page-info p.title {
          margin-top: 20px;
          font-family: var(--font-family-bold);
          font-size: var(--font-size-medium);
     }

     .page-info table {
          margin: 0 auto;
          min-width: 400px;
          max-width: 800px;
          border-collapse: collapse;
          background-color: var(--table-bg);
          border-radius: 10px;
          font-size: 8pt;
     }

          .page-info table tr td {
               width: 50%;
               padding: 10px;
          }

          .page-info table tr:not(:last-child) td {
               border-bottom: solid 1px var(--table-bg-separator);
          }

          .page-info table tr td:first-child {
               text-align: right;
          }

          .page-info table tr td:last-child {
               text-align: left;
               white-space: pre-wrap;
               font-family: var(--font-family-bold);
          }
/*#endregion */

.flex-row {
     display: flex;
     flex-direction: row;
}

     .flex-row.center {
          justify-content: center;
     }

     .flex-row.gap-20 {
          gap: 20px;
     }

     .flex-row.padding-20 {
          padding: 20px;
     }

.a-link {
     color: var(--a-link);
     font-family: var(--font-family-bold);
}

     .a-link:hover {
          color: var(--a-link-hover);
     }

     .a-link.with-icon {
          display: flex;
          align-items: center;
     }

          .a-link.with-icon i {
               color: var(--a-link);
          }

.button-chevron-down::after {
     content: "\f078";
     font-size: 0.8rem;
     color: var(--button-color);
     position: absolute;
     margin-top: 30px;
     margin-left: -15px;
     opacity: 0;
     font-family: FontAwesome;
     transition: opacity 0.2s ease-in-out;
}

.button-chevron-down:hover::after {
     opacity: 1;
}

.login-section {
     display: flex;
     justify-content: center;
}

.login-panel {
     position: absolute;
     display: flex;
     width: 100%;
     max-width: 800px;
     gap: 40px;
     align-items: center;
     top: 50%;
     transform: translateY(-50%);
     padding: 40px;
     box-sizing: border-box;
}

.login-form {
     width: 100%;
}

     .login-form form {
     }

     .login-form .form-group-panel {
          display: flex;
          gap: 10px;
          flex-direction: column;
     }

     .login-form .form-group {
          display: flex;
          flex-direction: row;
          gap: 10px;
          align-items: center;
          background-color: var(--input-bg);
          padding: 10px 20px;
          width: 100%;
          box-sizing: border-box;
          border-radius: var(--border-small);
          border: solid 1px var(--input-bg-border);
     }

     .login-form i {
          color: var(--label-color);
          width: 30px;
          font-size: 12pt;
     }

     .login-form label {
          color: var(--label-color);
     }

     .login-form .input {
          display: flex;
          flex-direction: column;
          width: 100%;
     }

     .login-form input::placeholder {
          font-family: roboto-italic;
     }

     .login-form input[type=email], .login-form input[type=password], .login-form input[type=text] {
          width: 100%;
          outline: none;
          background-color: var(--input-bg);
          padding: 0;
          margin-top: 3px;
     }

          .login-form input[type=email]:focus, .login-form input[type=password]:focus, .login-form input[type=text]:focus {
               background-color: var(--input-bg-focus);
               transition: background-color 0.3s ease;
          }

form .form-group:has(input:focus) {
     background-color: var(--input-bg-focus);
     transition: background-color 0.3s ease;
}

.button {
     font-family: roboto-bold;
     padding: 12px 10px;
     display: flex;
     gap: 10px;
     box-shadow: var(--box-shadow);
     border-radius: var(--border-small);
     max-width: 200px;
}

     .button.primary {
          background-color: var(--primary-color);
          color: var(--primary-color-text);
     }

          .button.primary:hover {
               background-color: var(--primary-color-hover);
               box-shadow: 0 1px 4px rgba(0,0,0,0.05);
          }

          .button.primary:active {
               background-color: var(--primary-color-active);
          }

          .button.primary:disabled {
               opacity: 0.6;
               cursor: not-allowed;
          }

     .button.large {
          width: 100%;
          justify-content: center;
     }

     .button:disabled {
          background-color: var(--button-bg-disabled) !important;
          color: var(--button-bg-text-disabled) !important;
          cursor: not-allowed;
     }

.flex-end {
     display: flex;
     justify-content: flex-end;
}

.flex-row {
     display: flex;
     align-items: center;
     gap: 10px;
}

.flex-column {
     display: flex;
     flex-direction: column;
}

.client-info-summary {
     border-top: solid 1px var(--border-separator);
     padding-top: 10px;
     display: flex;
     flex-direction: row;
     gap: 10px;
}

     .client-info-summary p {
          font-size: 7.5pt;
          display: flex;
          flex-direction: column;
          color: #777D;
          font-family: robotocondensed-regular;
     }

          .client-info-summary p b {
               font-family: robotocondensed-bold;
          }

.validation-error ul li {
     color: var(--validation-error-color);
     background-color: var(--validation-error-bg);
     padding: 10px;
     border-radius: 5px;
     margin-top: 10px;
     text-align: center;
}

.align-center {
     text-align: center !important;
     justify-content: center !important;
}

.form-control.hide {
     display: none;
}

.register-detail {
     border: solid 1px var(--register-detail-border);
     background-color: var(--register-detail-bg);
     border-radius: 10px;
     padding: 10px;
     box-sizing: border-box;
     gap: 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

     .register-detail ul {
          display: flex;
     }

          .register-detail ul li {
               text-align: center;
          }

     .register-detail input {
          background-color: transparent !important;
          text-align: center;
          font-size: 10pt;
          font-family: roboto-bold;
     }


     .register-detail.center input {
          text-align: center !important;
          justify-content: center !important;
     }

input[type=text]:disabled {
     background-color: transparent !important;
}

.form-group.icon.disabled {
     background-color: transparent !important;
}

.form-group-panel .center-form {
     display: flex;
     flex-direction: row;
     gap: 10px;
}

.form-group-panel .center-input {
     text-align: center;
     justify-content: center;
}

     .form-group-panel .center-input input {
          text-align: center;
          justify-content: center;
     }

.register-detail b {
     font-family: roboto-bold;
     font-weight: normal;
}

:root {
     --popup-message-bg-color: light-dark(#FFC107,#d4a107);
     --popup-message-text-color: light-dark(#624c0c,#332701);
}

.popup-message {
     display: flex;
     flex-direction: row;
     gap: 10px;
     background-color: var(--popup-message-bg-color);
     justify-content: center;
     font-family: roboto-medium;
     align-items: center;
     border-top: 1px solid #E5AC00;
     border-bottom: 2px solid #E5AC00;
     box-shadow: 0 4px 10px rgba(255, 193, 7, 0.2);
}

     .popup-message p {
          padding: 7px 10px;
          display: flex;
          flex-direction: row;
          gap: 10px;
          font-size: 11px;
          color: var(--popup-message-text-color);
          align-items: center;
     }

          .popup-message p b {
               font-family: roboto-bold;
          }

.error {
     text-align: center;
     display: flex;
     align-items: center;
     flex-direction: column;
}

     .error .icon-error {
          font-size: 150px;
          font-family: roboto-bold;
          background-color: #d9d9d9;
          border-radius: 100px;
          display: flex;
          width: 200px;
          height: 200px;
          justify-content: center;
          transform: rotate(0deg);
     }

     .error .o-line:before {
          background-color: #333;
          border-bottom: solid 1px #333;
          height: 10px;
          width: 100px;
          content: ' ';
     }

.separator-osrisk {
     display: flex;
     align-items: center;
     text-align: center;
     width: 600px;
     margin: 20px auto; /* Centra el componente en la página */
}

     .separator-osrisk::before,
     .separator-osrisk::after {
          content: '';
          flex: 1;
          border-bottom: 1px solid #30363d; /* Grosor y color de la línea */
     }

     .separator-osrisk span {
          padding: 0 15px; /* Espacio alrededor de la letra O */
          font-size: 11px;
          font-family: roboto-bold;
          color: #333;
          text-transform: uppercase;
     }

:root {
     --icon-big-color: light-dark(#1661a2, #aed4ff);
     --terms-options-border-bottom: light-dark(#dbe9ff, #1e1e1e);
     --terms-options-a-link: light-dark(#305592, #F8FAFC);
     --terms-options-a-link-active: light-dark(#305592, #F8FAFC);
     --terms-options-border-bottom-hover: light-dark(#30559288, #1661a288);
     --terms-options-border-bottom-active: light-dark(#305592, #1661a2);
}

.big-icon svg {
     fill: var(--icon-big-color) !important;
     height: 300px;
}

.terms-options {
     display: flex;
     flex-direction: row;
     gap: 30px;
     border-bottom: solid 1px var(--terms-options-border-bottom);
}

     .terms-options a {
          padding: 10px 0;
          font-family: roboto-medium;
          color: var(--terms-options-a-link);
          border-bottom: solid 3px none;
          opacity: .75;
     }

          .terms-options a:hover {
               border-bottom: solid 3px var(--terms-options-border-bottom-hover);
               opacity: 1;
          }

          .terms-options a.active {
               font-family: roboto-bold;
               border-bottom: solid 3px var(--terms-options-border-bottom-active);
               opacity: 1;
          }

.terms-page h1 {
     margin-bottom: 0;
}

.terms-page h2 {
     color: var(--h2);
     margin: 50px 0 30px 0;
}

.terms-page h3 {
     text-align: center;
     margin: 30px 0;
}

.two-columns {
     display: flex;
     flex-direction: row;
     max-width: 1024px;
     gap: 50px;
}

     .two-columns b {
          font-family: roboto-bold;
     }

     .two-columns .column-1 {
          width: 400px;
     }

          .two-columns .column-1 .menu {
               display: flex;
               flex-direction: column;
               gap: 20px;
               position: sticky;
               top: 20px;
          }

               .two-columns .column-1 .menu a {
                    font-family: roboto-medium;
                    font-size: 13px;
                    color: var(--terms-options-a-link);
                    opacity: .75;
                    border-left: 3px solid transparent;
                    padding-left: 7px;
                    border-radius: 0 4px 4px 0;
               }

                    .two-columns .column-1 .menu a:hover {
                         opacity: 1;
                    }

     .two-columns .column-2 {
          width: 100%;
          opacity: .8;
     }

          .two-columns .column-2 p {
               font-size: 15px;
               line-height: 30px;
               margin-bottom: 20px;
          }

          .two-columns .column-2 ul {
               margin-left: 50px;
          }

               .two-columns .column-2 ul li {
                    font-size: 15px;
                    line-height: 30px;
                    margin-bottom: 20px;
                    list-style-type: circle;
               }

.add-border {
     border: solid 1px #d0d2d3;
     padding: 20px;
     border-radius: 10px;
     display: flex;
     height: auto;
     flex-direction: column;
     gap: 10px;
     line-height: 20px;
}

.a-link-list.active {
     color: var(--terms-options-a-link-active) !important;
     border-left: 3px solid var(--terms-options-a-link-active) !important;
     border-radius: 0 4px 4px 0;
     font-family: roboto-bold;
     opacity: 1 !important;
}