/*
 * index.css — Estilos de páginas migradas a Net8
 *
 * Páginas:
 *   - _Layout.cshtml / _LayoutB2C.cshtml  (navbar, loader, footer, form-container)
 *   - Login.cshtml           (inicio de sesión)
 *   - MFAChannel.cshtml      (selección de canal MFA)
 *   - MFAEmail.cshtml        (verificación por email)
 *   - MFASms.cshtml          (verificación por SMS)
 *   - MFAWhatsApp.cshtml     (verificación por WhatsApp)
 *   - PasswordChange.cshtml  (cambio de contraseña)
 *   - PasswordRequest.cshtml (solicitud de clave)
 *   - UserRecovery.cshtml    (recuperación de usuario)
 *   - UserRegistration.cshtml (registro de usuario)
 *   - Error.cshtml           (página de error)
 *
 * Estructura:
 *    1. Reset global
 *    2. Fuentes (@font-face)
 *    3. Tipografía base
 *    4. Bootstrap Grid
 *    5. Bootstrap Utilities
 *    6. Inputs globales
 *    7. Botones
 *    8. Layout compartido (main, navbar, footer)
 *    9. Loader
 *   10. Contenedor de formulario
 *   11. Alertas y mensajes
 *   12. Componentes compartidos (ddl, input-control, tooltip)
 *   13. Utilidades compartidas
 *   14. Página: Error
 *   15. Página: Login
 *   16. Páginas: MFA
 *   17. Páginas: Recuperación (PasswordRequest + UserRecovery)
 *   18. Página: PasswordChange
 *   19. Página: UserRegistration
 */

/* ==========================================================================
   1. RESET GLOBAL
   ========================================================================== */

* { margin: 0; padding: 0 }

html { box-sizing: border-box }

*, ::after, ::before { box-sizing: inherit }

/* ==========================================================================
   2. FUENTES (@font-face)
   ========================================================================== */

/* Feather — iconos usados en .alert-icon::before */
@font-face {
    font-family: "feather";
    src: url("//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.eot?t=1501828829848");
    src: url("//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.eot?t=1501828829848#iefix") format("embedded-opentype"),
         url("//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.woff?t=1501828829848") format("woff"),
         url("//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.ttf?t=1501828829848") format("truetype"),
         url("//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.svg?t=1501828829848#feather") format("svg")
}

/* Sura Sans — tipografía corporativa Protección */
@font-face {
    font-family: "SuraSansRegular";
    src: url("/fonts/SuraSans/SuraSans-Regular.otf") format('opentype');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "SuraSansNegrita";
    src: url("/fonts/SuraSans/SuraSans-Negrita.otf") format('opentype');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "SuraSansSeminegrita";
    src: url("/fonts/SuraSans/SuraSans-Seminegrita.otf") format('opentype');
    font-weight: normal;
    font-style: normal
}

/* ==========================================================================
   3. TIPOGRAFÍA BASE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: #292730;
    font-family: SuraSansRegular, sans-serif;
}

h1 b, h1.bold, h2 b, h2.bold, h3 b, h3.bold,
h4 b, h4.bold, h5 b, h5.bold, h6 b, h6.bold {
    font-family: SuraSansNegrita, sans-serif;
}

h1 { font-size: 34px; line-height: 38px }
h2 { font-size: 30px; line-height: 34px }
h3 { font-size: 26px; line-height: 29px }
h4 { font-size: 22px; line-height: 25px }
h5 { font-size: 18px; line-height: 20px }
h6 { font-size: 16px; line-height: 18px }

p, .caption {
    margin: 0;
    color: #292730;
    font-family: SuraSansRegular, sans-serif;
}

p b, p.bold, .caption b, .caption.bold {
    font-family: SuraSansSeminegrita, sans-serif;
}

p {
    font-size: 15px;
    line-height: 22px
}

p.caption, .link-remember {
    font-size: 13px;
    line-height: 19px
}

a {
    cursor: pointer;
    color: #0033a0;
    font-family: SuraSansRegular, sans-serif;
    font-size: 15px;
    line-height: 22px;
    text-decoration: underline
}

.text-center { text-align: center !important }

/* ==========================================================================
   4. BOOTSTRAP GRID (solo clases usadas)
   ========================================================================== */

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 576px)  { .container { max-width: 540px  } }
@media (min-width: 768px)  { .container { max-width: 720px  } }
@media (min-width: 992px)  { .container { max-width: 960px  } }
@media (min-width: 1200px) { .container { max-width: 1140px } }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.col, .col-md-7, .col-lg-5, .col-xl-4 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}

.col { flex-basis: 0; flex-grow: 1; max-width: 100% }
.col-no-padding { padding-left: 0; padding-right: 0; }

@media (min-width: 768px)  { .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333% } }
@media (min-width: 992px)  { .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667% } }
@media (min-width: 1200px) { .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333% } }

/* ==========================================================================
   5. BOOTSTRAP UTILITIES
   ========================================================================== */

.justify-content-center { justify-content: center !important }

/* ==========================================================================
   6. INPUTS GLOBALES
   ========================================================================== */

input {
    outline: 0;
    color: #626277;
    background-color: white;
    border: solid 1px #e2e7ed;
    border-radius: 3px;
    min-height: 40px;
    font-family: SuraSansRegular, sans-serif;
    font-size: 15px;
    line-height: 1.47;
    padding: 8px 12px;
    transition-duration: .15s
}

input:focus {
    box-shadow: 0 2px 4px 0 rgba(149,150,153,0.2),
                0 1px 10px 0 rgba(149,150,153,0.12),
                0 4px 5px 0 rgba(149,150,153,0.14);
    border-color: #0033a0
}

input[type=password] {
    font-family: SuraSansRegular, sans-serif;
}

/* ==========================================================================
   7. BOTONES
   ========================================================================== */

.btn, button {
    outline: none;
    border: none;
    cursor: pointer;
    min-width: 100px;
    border-radius: 4px;
    color: #0033a0;
    font-family: SuraSansRegular, sans-serif;
    letter-spacing: 0.5px;
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 16px;
    text-decoration: none;
    user-select: none;
}

.btn.primario, button.primario { background-color: #e3e829 }

.btn.primario:hover,  button.primario:hover  { background-color: #f5f548 }
.btn.primario:active, button.primario:active { background-color: #dfde1f }

.btn.secundario, button.secundario {
    background-color: white;
    border: 1px solid #0033a0
}

.btn.secundario:hover,  button.secundario:hover  { color: #eef2f7; background-color: #0033a0 }
.btn.secundario:active, button.secundario:active { color: #eef2f7; background-color: #0033a0 }

.btn.small, button.small { padding: 4px 8px; font-size: 13px; line-height: 1.54 }

.buttons button { padding: 12px 16px }

#api .buttons button { margin-bottom: 8px }

.btn.terciario, button.terciario { background-color: #dbdbdb }

.btn.terciario:hover,  button.terciario:hover,
.btn.terciario:active, button.terciario:active { background-color: #dbdbdb }

.btn:disabled, .btn:disabled:active, .btn:disabled:hover,
button:disabled, button:disabled:active, button:disabled:hover {
    cursor: no-drop;
    color: #626277;
    background-color: #e2e7ed
}

/* ==========================================================================
   8. LAYOUT COMPARTIDO
   ========================================================================== */

/* --- Main --- */
.main { background-color: #fafbfc; min-height: calc(100vh - 158px) }
.main .section { padding-bottom: 40px }

/* --- Navbar --- */
.navbar {
    height: 67px;
    background: white;
    border-top: 4px solid #e3e829;
    border-bottom: 1px solid #e2e7ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px
}

.navbar .navbar-brand { width: 150px; display: flex; align-items: center; }
.navbar .navbar-brand img { width: 100%; height: auto; }

@media (max-width: 768px) { .navbar .navbar-brand { width: 120px } }

/* --- Footer --- */
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 94px;
    background-color: #fafbfc;
    border-top: 1px solid #e2e7ed;
    border-bottom: 4px solid #e3e829;
}

.footer-title { display: flex; align-items: center; color: #0033a0; margin-right: 40px }
.footer-title svg { width: 14.6px; height: 14.6px; margin-right: 6px }

.footer-section { margin: 0 16px }
.footer-section p { color: #292730 }
.footer-section p.caption { color: #626277 }

.footer-logo-superintendencia {
    height: 18px;
    width: 183.27px;
    margin-left: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.footer-contact-section { display: flex; }
.footer-logo-container { background: #fafbfc; }

@media (max-width: 680px) {
    .footer { flex-direction: column; height: auto; padding: 15px 0 }
    .footer-title { margin-right: 0 }
    .footer-section { text-align: center; margin: 10px 0 }
    .footer-contact-section { flex-direction: column; }
    .footer-logo-section { text-align: center; }
    .footer-logo-superintendencia { margin-left: 0; }
}

@media (min-width: 681px) and (max-width: 1024px) {
    .footer-section { margin: 0 10px }
    .footer-logo-section { width: 681px; }
}

@media (min-width: 681px)  { .footer-contact-section { margin-left: 25px; } }
@media (min-width: 1065px) { .footer-logo-section { width: 1040.16px; margin: 0 auto; } .footer-logo-superintendencia { margin-left: 10px; } }

/* ==========================================================================
   9. LOADER
   ========================================================================== */

.loader-modal {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10;
    visibility: hidden;
}

.loader-modal__backdrop {
    position: fixed;
    background-color: white;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.loader-modal__content {
    position: fixed;
    top: 64px;
    border-radius: 4px;
    background-color: #FFF;
    text-align: center;
    z-index: 2;
    padding: 24px;
    box-shadow: 0px 2px 4px rgba(149, 150, 153, 0.2),
                0px 1px 10px rgba(149, 150, 153, 0.12),
                0px 4px 5px rgba(149, 150, 153, 0.14);
    margin: 16px;
}

@media (min-width: 576px) {
    .loader-modal__content { left: 50%; margin-top: 48px; margin-left: -227.5px; width: 455px; }
}

.loader__title {
    width: 100%;
    font-family: SuraSansNegrita, Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    line-height: 1.5em;
    color: #0033A0;
    margin-bottom: 0;
}

.loader__icon { margin: 24px 0 16px 0; }

.loader__spinner {
    width: 80px;
    height: 80px;
    border: 4px solid #E2E7ED;
    border-top: 4px solid #0033A0;
    border-radius: 100%;
    position: relative;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.loader__message {
    text-align: center;
    font-family: SuraSansRegular, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5em;
    color: #292730;
    margin-bottom: 0;
}

/* ==========================================================================
   10. CONTENEDOR DE FORMULARIO
   ========================================================================== */

.container-form-target { margin-top: 64px }
.margin-title-login    { margin-top: 30px }

.container-form-target .title {
    text-align: center;
    color: #626277;
    margin-bottom: 12px
}

.form-container {
    border-radius: 4px 4px 24px 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 rgba(149,150,153,0.2),
                0 2px 1px 0 rgba(149,150,153,0.12),
                0 1px 1px 0 rgba(149,150,153,0.12);
    padding: 24px
}

.form-container .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px
}

.form-container .form-group label {
    display: block;
    margin-bottom: 4px;
    font-family: SuraSansRegular, sans-serif;
    font-size: 15px;
    line-height: 1.47;
    color: #626277
}

.form-container .form-group:focus-within label {
    font-family: SuraSansSeminegrita, sans-serif;
}

#api label { margin-bottom: 0px }

.form-container .btn-fullwidth { display: block; width: 100%; margin-bottom: 8px; text-align: center; }

@media (max-width: 768px) { .container-form-target { margin-top: 40px } }

@media (max-width: 576px) {
    .container-form-target { margin-top: 16px }
    .container-form-target .title { font-size: 18px; line-height: 1.11 }
    .form-container { padding: 16px 12px }
}

/* ==========================================================================
   11. ALERTAS Y MENSAJES
   ========================================================================== */

.alert {
    padding: 6px 8px;
    border-radius: 4px;
    display: flex;
    line-height: 19px;
    word-break: break-word;
}

.alert.danger { background: #fee; }
.alert.danger a { display: contents; }
.alert.danger, .alert.danger p { color: #992d1e }
.alert.danger.alert-icon::before {
    padding: 0 9px 0 0;
    content: "\e81c";
    font-family: "feather", sans-serif;
    font-size: 20px;
    color: #992d1e
}

.alert.primary { background: #cce5ff; }
.alert.primary a { display: contents; font-weight: bold; }
.alert.primary, .alert.primary p { color: #004085; }
.alert.primary.alert-icon::before {
    padding: 0 9px 0 0;
    content: "\e81c";
    font-family: "feather", sans-serif;
    font-size: 22px;
    color: #004085
}

.alert.warning { background: #fff3cd; }
.alert.warning, .alert.warning p { color: #856404; }
.alert.warning.alert-icon::before {
    padding: 0 9px 0 0;
    content: "\e81c";
    font-family: "feather", sans-serif;
    font-size: 22px;
    color: #856404
}

.AlertStyle {
    font-family: SuraSansRegular, sans-serif;
    font-size: 13px;
    margin-bottom: 16px;
}

.hide         { visibility: hidden; }
.display-none { display: none; }

/* ==========================================================================
   12. COMPONENTES COMPARTIDOS
   ========================================================================== */

/* Dropdown tipo de documento */
.ddl {
    outline: 0;
    color: #626277;
    background-color: white;
    border: solid 1px #e2e7ed;
    border-radius: 3px;
    min-height: 40px;
    font-family: SuraSansRegular, sans-serif;
    font-size: 15px;
    line-height: 1.47;
    padding: 8px 12px;
    transition-duration: .15s;
    width: 100%;
    margin-bottom: 24px;
    height: 100%;
}

/* Input con icono (ojo de contraseña) — PasswordChange + UserRegistration */
.input-control { position: relative }
.input-control input { width: 100% }

.input-control.icon-right:not(.error) input { padding-right: 35.2px }

.input-control.icon-right:not(.error) .icon-right {
    position: absolute;
    width: 22px;
    height: 22px;
    right: 10px;
    top: calc(50% - 11px)
}

.input-control.icon-right:not(.error) .icon-right .icon { font-size: 22px }

.input-control.error input  { color: #992d1e; border-color: #992d1e }
.input-control.error .icon-right { display: none }

/* Tooltip de requisitos de contraseña — PasswordChange + UserRegistration */
.tooltip .tooltip-content { cursor: pointer }

.tooltip .tooltip-text {
    position: absolute;
    width: 176px;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    transition-duration: .15s
}

.tooltip .tooltip-text .content {
    float: right;
    min-width: 100px;
    max-width: 176px;
    border-radius: 4px;
    padding: 4px 8px;
    background: #ebf6fd;
    box-shadow: 0 5px 5px 0 rgba(149,150,153,0.2),
                0 3px 14px 0 rgba(149,150,153,0.12),
                0 8px 10px 0 rgba(149,150,153,0.14)
}

.tooltip .tooltip-text .content,
.tooltip .tooltip-text .content p { color: #2d6b9c }

.tooltip .tooltip-text .content::before {
    content: "";
    position: absolute;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-top: 5px solid #ebf6fd
}

.tooltip .tooltip-text.top-right { top: -160%; right: -23% }
.tooltip .tooltip-text.top-right .content::before { bottom: -10px; right: 10px }
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1 }

/* ==========================================================================
   13. UTILIDADES COMPARTIDAS
   ========================================================================== */

.all-width             { width: 100%; }
.display-contents      { display: contents; }
.direction-column      { flex-direction: column; }
.text-center           { text-align: center !important }
.color-primario400     { color: #3f66b3 }
.error-under-field     { color: #992d1e; }
.input-credential-margin { margin-top: 4px; margin-bottom: 4px; }
.ul-style-type         { list-style-type: none; }
.information-password  { display: flex; margin-bottom: 4px; }
.margin-bottom-textBox { margin-bottom: 20px; }
.user-credential-input { width: 100%; margin-bottom: 20px; }
#simplemodal-overlay {
    background: transparent !important;
    opacity: 0 !important;
}

/* ==========================================================================
   14. PÁGINA: Error
   ========================================================================== */

.error-container {
    background-color: #FFFFFF;
    border-radius: 0px 0px 16px 4px;
    box-shadow: 0 1px 3px 0 rgba(149,150,153,0.2),
                0 2px 1px 0 rgba(149,150,153,0.12),
                0 1px 1px 0 rgba(149,150,153,0.12);
    text-align: center;
    padding: 24px;
    max-width: 85%;
    width: 100%;
    height: 285px;
    border-top: 4px solid #E3E829;
    margin: 64px auto 0;
    display: block;
    position: relative;
    overflow: hidden;
}

.error-icon {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 7px solid #992D1E;
    margin-bottom: 15px;
}

.error-icon::before, .error-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #992D1E;
}

.error-icon::before { top: 12px; width: 6px; height: 20px; border-radius: 4px; }
.error-icon::after  { bottom: 12px; width: 7px; height: 7px; border-radius: 50%; }

.error-title {
    font-size: 22px;
    font-family: SuraSansNegrita, sans-serif;
    color: #0033A0;
    margin-bottom: 10px;
}

.error-message {
    font-family: SuraSansRegular, sans-serif;
    color: #626277;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    position: inherit;
    z-index: 1;
}

.background-icon {
    position: absolute;
    top: 50%;
    left: -30px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: white;
    border: 15px solid rgba(250, 244, 244, 255);
}

.background-icon::before, .background-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(250, 244, 244, 255);
}

.background-icon::before { top: 25%; width: 16px; height: 50px; border-radius: 10px; }
.background-icon::after  { bottom: 22%; width: 18px; height: 18px; border-radius: 50%; }

@media (max-width: 497px) { .background-icon { display: none; } }

/* ==========================================================================
   15. PÁGINA: Login
   ========================================================================== */

.textoPersonas {
    font-family: SuraSansNegrita, sans-serif;
    font-size: 34px;
    line-height: 38px;
    text-align: center;
    color: #0033A0;
    margin-bottom: 10px;
}

.title-bottom { margin-bottom: 2px !important; }

.transacciones-sin-clave-card {
    border-radius: 8px;
    background-color: #FFFFFF;
    padding: 21px;
    border: 1px solid #CBD1DE;
    margin-top: 16px;
}

.transacciones-sin-clave-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0033A0;
    font-family: SuraSansRegular, sans-serif;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
}

.transacciones-sin-clave-paragraph {
    margin-bottom: 16px;
    font-weight: 400;
    font-size: 15px;
    color: #292730;
}

#transaccionesSinClaveBtn { padding: 6px; }

/* ==========================================================================
   16. PÁGINAS: MFA (Channel + Email + SMS + WhatsApp)
   ========================================================================== */

.mfa-auth-page-title {
    text-align: center;
    color: #0033a0;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 12px
}

.mfa-auth-page-subtitle {
    color: #292730;
    text-align: center;
    font-size: 16px;
    margin-bottom: 12px
}

@media (max-width: 576px) {
    .mfa-auth-page-title   { font-size: 22px; line-height: 1.11 }
    .mfa-auth-page-subtitle { font-size: 15px; line-height: 1.11 }
}

/* Selector de canal (MFAChannel) */
.card-channels {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.card-channels .content {
    border: #E2E7ED solid 1px;
    border-radius: 5px;
    background-color: #fafbfc;
    position: relative;
    text-align: center;
    width: 130px;
    padding: 16px 0px;
}

.card-channels .content .option {
    appearance: none;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 1;
}

.card-channels .content svg {
    display: block;
    margin: 0 auto 0px;
    width: 24px;
    height: 24px;
}

.card-channels .content label { position: relative; z-index: 2; pointer-events: none; }
.card-channels .content .nameChannel { color: #0033a0; }
.card-channels .content .labelChannel { display: flex; flex-direction: column; align-items: center; }

.card-channels .content input[type="radio"]:checked {
    border-color: #0033a0;
    background-color: #0033a0;
}

.card-channels .content input[type="radio"]:checked + label svg { fill: #ffffff; stroke: #ffffff; }
.card-channels .content input[type="radio"]:checked + label svg path { fill: #ffffff; }
.card-channels .content input[type="radio"]:checked + label svg polyline { stroke: #0033a0; }
.card-channels .content input[type="radio"]:checked + label .nameChannel { color: #ffffff; }

/* Verificación con código (MFAEmail + MFASms + MFAWhatsApp) */
.new-code { text-align: left; margin-bottom: 24px; }

/* ==========================================================================
   17. PÁGINAS: Recuperación (PasswordRequest + UserRecovery)
   ========================================================================== */

/* Estilos específicos en sección 13 (utilidades compartidas):
   .user-credential-input, .display-contents */

/* ==========================================================================
   18. PÁGINA: PasswordChange
   ========================================================================== */

/* Estilos específicos en sección 12 (componentes compartidos):
   .input-control, .tooltip */

/* ==========================================================================
   19. PÁGINA: UserRegistration
   ========================================================================== */

.terms-conditions {
    text-align: center;
    margin-bottom: 10px;
}

.form-container .form-group .terms-conditions label { display: inline; }

input[type="checkbox"].checkbox-terms {
    min-height: 0;
    padding: 0;
    border: initial;
    border-radius: initial;
    background-color: initial;
    transition: none;
}

input[type="checkbox"].checkbox-terms:focus {
    box-shadow: none;
    border-color: initial;
}