body {
     background: #fff;
     font-family: inherit;
     font-family: 'Poppins', sans-serif;
 }

 /* Keep header and footer rendered above Incode SDK's fixed dark overlay */
 header.header {
     position: relative;
     z-index: 999999;
 }

 footer.footer {
     position: relative;
     z-index: 999999;
 }

 .login-wrapper#login-wrapper {
     width: 100%;
     min-height: inherit;
     background: #fff;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     overflow-y: auto;
 }

 .iframe-full-wrapper {
     background: #fff;
     height: 80svh;
 }

 .iframe-full-wrapper iframe {
     height: 100%;
     width: 80%;
     margin: 0 auto;
     display: block;
 }

 /* ── Regresar bar ── */
 .verify-back-bar {
     width: 100%;
     height: 40px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     padding: 0 32px;
     border-bottom: 1px solid #E8ECF0;
 }

 .btn-back {
     background: none;
     border: none;
     color: #266AEA;
     font-size: 0.95rem;
     font-weight: 500;
     font-family: inherit;
     cursor: pointer;
     padding: 0;
     opacity: 0.85;
     transition: opacity 0.18s;
     display: block;
     text-decoration: none;
 }

 .btn-back:hover {
     opacity: 1;
     color: #266AEA;
 }

 /* ── Full-page verify layout ── */
 #verify-main {
     display: none;
     flex-direction: column;
     align-items: center;
     width: 100%;
     max-width: 520px;
     padding: 40px 24px 48px;
 }

 .verify-header {
     text-align: center;
     margin-bottom: 0;
     width: 100%;
 }

 .verify-header h2 {
     text-align: center;
     font-family: 'Poppins', sans-serif;
     font-size: 40px;
     font-weight: bold;
     line-height: 60px;
     letter-spacing: 0;
     color: #7B868C;
     opacity: 1;
     margin: 0 0 12px;
 }

 .verify-header p {
     text-align: center;
     font-family: 'Poppins', sans-serif;
     font-size: 16px;
     font-weight: 300;
     line-height: 16px;
     letter-spacing: 0;
     color: #7B868C;
     opacity: 1;
     margin: 0 auto;
 }

 /* ── Camera error body ── */
 #camera-error-body {
     display: none;
     width: 100%;
     margin-top: 36px;
 }

 .camera-icon-wrapper {
     text-align: center;
     margin-bottom: 28px;
 }

 .camera-icon-wrapper img {
     width: 186px;
     height: 186px;
     opacity: 1;
 }

 .camera-alert {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     background: #EFF4FF;
     border: 1px solid #B5CDFF;
     border-radius: 8px;
     padding: 14px 16px;
     margin-bottom: 20px;
     text-align: left;
 }

 .camera-alert-icon {
     flex-shrink: 0;
     width: 22px;
     height: 22px;
     margin-top: 1px;
 }

 .camera-alert p {
     font: normal 300 16px/25px 'Poppins', sans-serif;
     letter-spacing: 0;
     color: #7B868C;
     margin: 0;
 }

 .camera-actions {
     border-radius: 12px;
     padding: 20px 0;
     text-align: center;
 }

 .camera-actions-title {
     font: normal 300 16px/25px 'Poppins', sans-serif;
     letter-spacing: 0;
     color: #7B868C;
     margin: 0 0 16px;
 }

 .camera-actions-buttons {
     display: flex;
     gap: 10px;
 }

 .camera-actions-buttons button {
     flex: 1;
     padding: 12px 8px;
     border-radius: 8px;
     font-size: 0.85rem;
     font-weight: 500;
     cursor: pointer;
     transition: opacity 0.18s;
 }

 .camera-actions-buttons button:hover {
     opacity: 0.82;
 }

 .btn-retry-camera {
     background: #FFFFFF;
     border: 2px solid #266AEA;
     color: #266AEA;
 }

 .btn-guest {
     background: #EFF4FF;
     border: none;
     color: #266AEA;
 }

 /* ── Incode active / error body ── */
 #incode-active-body {
     display: none;
     flex-direction: column;
     align-items: center;
     width: 100%;
     margin-top: 24px;
     min-height: 420px;
 }

 #incode-container {
     width: 100%;
     max-width: 480px;
     position: relative;
 }

 /* Best-effort: tint Incode SDK's progress ring blue */
 #incode-container circle,
 #incode-container [class*="progress"],
 #incode-container [class*="loader"],
 #incode-container [class*="Progress"],
 #incode-container [class*="Loader"] {
     stroke: #266AEA !important;
     border-color: #266AEA !important;
     color: #266AEA !important;
 }

 .scan-status-label {
     width: 100%;
     max-width: 480px;
     padding: 14px 24px;
     border-radius: 8px;
     text-align: center;
     font: normal bold 16px/18px 'Poppins', sans-serif;
     letter-spacing: 0;
     color: #FFFFFF;
     text-transform: uppercase;
     opacity: 1;
     margin-top: -20px;
 }

 .scan-status--active {
     background: #266AEA;
 }

 .scan-status--error {
     background: #EA2626;
 }

 .scan-footer-subtitle {
     text-align: center;
     font: normal 300 20px/35px 'Poppins', sans-serif;
     letter-spacing: 0;
     color: #7B868C;
     opacity: 1;
     margin: 24px 0 0;
 }

 .scan-footer-actions {
     display: flex;
     gap: 12px;
     width: 100%;
     max-width: 480px;
     margin-top: 20px;
 }

 .btn-scan-retry,
 .btn-scan-guest {
     flex: 1;
     padding: 14px 16px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: opacity 0.18s;
     font-family: 'Poppins', sans-serif;
 }

 .btn-scan-retry:hover,
 .btn-scan-guest:hover {
     opacity: 0.82;
 }

 .btn-scan-retry {
     background: #FFFFFF;
     border: 2px solid #266AEA;
     color: #266AEA;
 }

 .btn-scan-guest {
     background: #EFF4FF;
     border: none;
     color: #266AEA;
 }

 /* ── Loading body ── */
 #loading-body {
     display: none;
     flex-direction: column;
     align-items: center;
     width: 100%;
     margin-top: 50px;
 }

 .loading-ring-container {
     position: relative;
     width: 100%;
     max-width: 480px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .loading-progress-ring {
     width: 100%;
     height: auto;
     transform: rotate(-90deg);
 }

 .ring-bg {
     fill: none;
     stroke: rgba(38, 106, 234, 0.12);
     stroke-width: 6;
 }

 .ring-fill {
     fill: none;
     stroke: #266AEA;
     stroke-width: 6;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.05s linear;
 }

 .loading-percent {
     position: absolute;
     font: bold 56px/1 'Poppins', sans-serif;
     letter-spacing: 0;
     color: #266AEA;
 }

 /* Incode SDK dark overlay → plain white, no visible content start */
 body>div:not(#login-wrapper):not(#iframe-wrapper) {
     /*background: #fff;*/
     /*tiene conflictos con el menu hamburguesa en moviles*/
 }

 body>div:not(#login-wrapper):not(#iframe-wrapper):not(#back-wrapper) * {
     /*visibility: hidden;*/
     /*tiene conflictos con el menu hamburguesa en moviles*/
 }

 /* Incode SDK dark overlay → plain white, no visible content end */


 /* ── Iframe: inline block so site header and footer stay visible ── */
 #iframe-wrapper {
     display: none;
     width: 100%;
     position: static !important;
     z-index: auto !important;
 }

 #iframe-wrapper.active {
     display: block;
 }

 #app-iframe {
     display: block;
     width: 100%;
     height: calc(100vh - 80px);
     border: none;
 }

 .IncodeDefaultComponentContainer .IncodeLoginContainer {
     padding-top: 0px;
 }

 #incode-container .IncodeDefaultComponentContainer {
     height: inherit;
 }

 #incode-container .IncodeLoginWebcamContainer {
     height: 580px;
 }

 #incode-container .IncodeDefaultComponentContainer [class*="IncodeLoginNotification"] {
     /* background: blue!important; */
     position: absolute !important;
     top: 0 !important;
     color: #494f53 !important;
 }

 #incode-container .IncodeLoginCaptureButtonContainer {
     position: absolute !important;
 }

 .login-page {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0px 40px 40px 20px;
 }

 .login-split {
     display: flex;
     height: 762px;
     overflow: hidden;
     width: 95%;
     max-width: 1240px;
 }

 .login-image-panel {
     position: relative;
     width: 50%;
     max-width: 618px;
     flex-shrink: 0;
     background-image: url('../img/homedemo/medico_login.png');
     background-size: cover;
     background-position: center;
 }

 .login-image-panel.patient {
     background-image: url('../img/homedemo/paciente_login.png');
 }

 .image-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 48px 28px 32px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.60) 0%, transparent 100%);
 }

 .image-caption-text {
     text-align: left;
     font: normal normal normal 30px/35px Poppins;
     letter-spacing: 0px;
     color: #FFF;
     text-transform: uppercase;
     opacity: 1;
     font-size: 30px;
     margin: 0;
 }

 .login-content-panel {
     width: 50%;
     background: #fff;
     display: flex;
     flex-direction: column;
     padding: 50px 52px;
     align-items: center;
     justify-content: center;
 }

 .login-heading-title {
     text-align: center;
     font: normal normal bold 40px/60px Poppins;
     letter-spacing: 0px;
     color: #7B868C;
     opacity: 1;
     size: 40px;
     margin: 0;
 }

 .login-heading-subtitle {
     text-align: center;
     font: normal normal 300 20px/35px Poppins;
     letter-spacing: 0px;
     color: #7B868C;
     opacity: 1;
     size: 20px;
     margin: 0;
 }

 /* ── Actions ── */
 .login-actions {
     display: flex;
     flex-direction: column;
     margin-top: 40px;
     width: 100%;
 }

 .btn-biometric {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     width: 100%;
     padding: 18px 24px;
     background: #266AEA;
     border: none;
     border-radius: 8px;
     text-align: center;
     font: normal 300 16px/18px 'Poppins', sans-serif;
     letter-spacing: 0;
     color: #FFFFFF;
     opacity: 1;
     text-decoration: none;
     cursor: pointer;
     transition: opacity 0.18s;
 }

 .btn-biometric:hover {
     opacity: 0.88;
     color: #FFFFFF;
 }

 .btn-biometric img {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
 }

 .login-divider {
     border: none;
     border-top: 2px solid #266AEA;
     margin: 40px 0 0;
 }

 .login-register-label {
     text-align: center;
     font: normal 300 16px/18px 'Poppins', sans-serif;
     letter-spacing: 0;
     color: #7B868C;
     opacity: 1;
     size: 20px;
     margin: 40px 0 0;
 }

 .btn-register {
     display: block;
     width: 100%;
     padding: 18px 24px;
     margin-top: 20px;
     background: transparent;
     border: 1px solid #266AEA;
     border-radius: 8px;
     text-align: center;
     font: normal 300 16px/18px 'Poppins', sans-serif;
     letter-spacing: 0;
     color: #266AEA;
     opacity: 1;
     text-decoration: none;
     cursor: pointer;
     transition: opacity 0.18s;
 }

 .btn-register:hover {
     opacity: 0.88;
     color: #266AEA;
 }

 .btn-guest-light {
     display: block;
     width: 100%;
     padding: 18px 24px;
     margin-top: 24px;
     background: #EFF4FF;
     border: none;
     border-radius: 8px;
     text-align: center;
     font: normal 300 16px/18px 'Poppins', sans-serif;
     letter-spacing: 0;
     color: #266AEA;
     opacity: 1;
     text-decoration: none;
     cursor: pointer;
     transition: opacity 0.18s;
 }

 .btn-guest-light:hover {
     opacity: 0.88;
     color: #266AEA;
 }

 .load-section {
     position: relative;
     width: 100%;
     min-height: 70svh;
     height: 100%;
     background: #fff;
 }

 #logged-user:not(.active),
 #verify-main:not(.active) {
     display: none !important;
 }

 .loader {
     display: flex;
     justify-self: center;
     align-self: center;
     position: absolute;
     top: calc(50% - 40px);
     width: 80px;
     aspect-ratio: 1;
     border-radius: 50%;
     background:
         radial-gradient(farthest-side, #266AEA 94%, #0000) top/8px 8px no-repeat,
         conic-gradient(#0000 30%, #266AEA);
     -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
     animation: l13 1s infinite linear;
 }

 @keyframes l13 {
     100% {
         transform: rotate(1turn)
     }
 }

 @media (max-width: 768px) {
     .login-page {
         padding: 0;
         background: #fff;
     }

     .login-split {
         height: 100vh;
         border-radius: 0;
         box-shadow: none;
         display: block;
     }

     .login-image-panel {
         height: 300px;
         width: 100%;
         background-position: center;
     }

     .login-content-panel {
         width: 100%;
         padding: 48px 28px;
     }

     #incode-container .IncodeDefaultComponentContainer {
         position: relative !important;
     }
 }