:root {
    /* ===== PALETA COFIDIS (ajusta aquí si cambia la guía de marca) ===== */
    --cf-primary: #E30613;          /* rojo corporativo (VERIFICAR con guía de marca) */
    --cf-primary-rgb: 227, 6, 19;   /* mismo color en RGB, para usar con transparencias */
    --cf-primary-dark: #B3000F;     /* rojo oscuro para títulos */
    --cf-primary-light: #FDE8EA;    /* rojo muy claro para fondos suaves */
    --cf-text: #333333;
    --cf-grey: #707070;

    --nc-font-size-value: 1;
    --nc-font-size-base: calc(var(--nc-font-size-value) * 1rem);
    --nc-branding-logo-width: 0;
    --nc-branding-logo-height: 0;

    --nc-font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --nc-font-weight: 500;
    --nc-font-color: var(--cf-text);
    --nc-font-size: var(--nc-font-size-base);

    --nc-primary-color: var(--cf-primary);

    --nc-button-active-background: var(--nc-primary-color);
    --nc-button-active-color: #FFFFFF;
    --nc-button-disabled-background: rgba(var(--cf-primary-rgb), 0.25);
    --nc-button-disabled-color: rgba(255, 255, 255, 0.8);

    --nc-checkbox-background: var(--nc-primary-color);
    --nc-checkbox-border-color: var(--nc-primary-color);
    --nc-checkbox-container-checked-background: #FFFFFF;
    --nc-checkbox-checkmark-color: #FAFAFA;

    --nc-box-background: rgba(var(--cf-primary-rgb), 0.03);
    --nc-box-document-type-background: #FFFFFF;

    --nc-link-color: var(--nc-primary-color);
    --nc-progress-bar-background: var(--nc-primary-color);
    --nc-icon-document-type-id_card: var(--cf-grey);
    --nc-document-type-selected: var(--nc-primary-color);
    --nc-icon-document-type-passport: var(--cf-grey);
    --fa-chevron-right: var(--nc-primary-color);
    --nc-icon-document-type-driver_license: var(--cf-grey);
    --powered-by-netheos: #FFFFFF;
    --nc-link-previous: var(--nc-primary-color);
    --nc-carousel-left-btn: var(--nc-primary-color);
    --nc-carousel-right-btn: var(--nc-primary-color);
    --nc-title: var(--cf-primary-dark);
    --nc-guidelines-adviser: var(--cf-primary);
    --nc-passport-holding: var(--cf-primary);
    --nc-control-ms-title: var(--cf-grey);
    --nc-icon-document-ko: #5FCE2F;
    --nc-selfie-lightning: var(--cf-primary-light);
    --nc-sub-title: var(--cf-grey);
    --nc-validation-color: #1af9b6;
    --nc-live-control-succeed-color: rgb(25, 216, 115);
    --nc-live-control-fail-color: rgb(255, 57, 57);
    --arrow-color: var(--nc-primary-color);

    --nc-button-font-size: 16px;
    --nc-button-font-weight: bold;
    --nc-button-text-transform: uppercase;
    --nc-button-border-radius: 8px;

    --nc-checkbox-width: 20px;
    --nc-checkbox-height: 20px;

    --nc-box-border-radius: 8px;

    --nc-box-document-type-border-radius: 8px;

    --facematch-height: 100%;

    --min-display-height-value: 600;
    --min-display-height: calc(var(--min-display-height-value) * 1px);
    --min-height-image: 80px;
    --max-height-image: 130px;
    --screen-ratio: calc(100dvh / var(--min-display-height-value));
    --default-font-size: calc(var(--screen-ratio) * 16);

    --min-intro-step-image-height-value: 80;
    --max-intro-step-image-height-value: 130;
    --min-intro-step-image-height: calc(var(--min-intro-step-image-height-value) * 1px);
    --max-intro-step-image-height: calc(var(--max-intro-step-image-height-value) * 1px);
    --intro-step-image-height: var(--max-intro-step-image-height);
    --linear-intro-step-image-height: calc(var(--screen-ratio) * var(--max-intro-step-image-height-value));

    --min-document-type-step-image-height-value: 32;
    --max-document-type-step-image-height-value: 62;
    --min-document-type-step-image-height: calc(var(--min-document-type-step-image-height-value) * 1px);
    --max-document-type-step-image-height: calc(var(--max-document-type-step-image-height-value) * 1px);
    --document-type-step-image-height: var(--max-document-type-step-image-height);
    --linear-document-type-step-image-height: calc(var(--screen-ratio) * var(--max-document-type-step-image-height-value));

    --min-document-type-selector-margin-bottom-value: 8;
    --min-document-type-selector-margin-bottom: calc(var(--min-document-type-selector-margin-bottom-value) * 1px);
    --max-document-type-selector-margin-bottom-value: 24;
    --max-document-type-selector-margin-bottom: calc(var(--max-document-type-selector-margin-bottom-value) * 1px);
    --linear-document-type-selector-margin-bottom: calc(var(--screen-ratio) * var(--max-document-type-selector-margin-bottom-value));
    --document-type-selector-margin-bottom: var(--max-document-type-selector-margin-bottom);

    --min-guide-lines-document-height-value: 70;
    --min-guide-lines-document-height: calc(var(--min-guide-lines-document-height-value) * 1px);
    --max-guide-lines-document-height-value: 150;
    --max-guide-lines-document-height: calc(var(--max-guide-lines-document-height-value) * 1px);
    --linear-guide-lines-document-height: calc(var(--screen-ratio) * var(--max-guide-lines-document-height-value));
    --guide-lines-document-height: var(--max-guide-lines-document-height);

    --min-paper-idcard-helper-icon-height-value: 50;
    --min-paper-idcard-helper-icon-height: calc(var(--min-paper-idcard-helper-icon-height-value) * 1px);
    --max-paper-idcard-helper-icon-height-value: 70;
    --max-paper-idcard-helper-icon-height: calc(var(--max-paper-idcard-helper-icon-height-value) * 1px);
    --linear-paper-idcard-helper-icon-height: calc(var(--screen-ratio) * var(--max-paper-idcard-helper-icon-height-value));
    --paper-idcard-helper-icon-height: var(--max-paper-idcard-helper-icon-height);

    --min-paper-idcard-helper-image-height-value: 80;
    --min-paper-idcard-helper-image-height: calc(var(--min-paper-idcard-helper-image-height-value) * 1px);
    --max-paper-idcard-helper-image-height-value: 100;
    --max-paper-idcard-helper-image-height: calc(var(--max-paper-idcard-helper-image-height-value) * 1px);
    --linear-paper-idcard-helper-image-height: calc(var(--screen-ratio) * var(--max-paper-idcard-helper-image-height-value));
    --paper-idcard-helper-image-height: var(--max-paper-idcard-helper-image-height);
}

app-copyright .powered-by-netheos {
    display: none;
}

/* ===== LOGO COFIDIS =====
   Sube tu logo (por ejemplo cofidis-logo.svg) junto al resto de assets y
   ajusta el selector al contenedor de cabecera que use tu plataforma.
   Ejemplo (descomentar y adaptar):

app-header .logo,
.nc-branding-logo {
    background: url(cofidis-logo.svg) no-repeat center / contain;
    width: 140px;
    height: 40px;
}
*/

.nc-link-previous img {
    padding: 40px 40px 0 0;
    width: 0;
    height: 0;
    background: url(arrow-left.svg) no-repeat center;
}

.nc-icon-document-type-id_card,
.nc-icon-document-type-passport,
.nc-icon-document-type-residence_permit,
.nc-icon-document-type-driver_license {
    padding: 62px 62px 0 0;
    width: 0;
    height: 0;
    background-repeat: no-repeat;
    background-position: center;
}

.nc-icon-document-type-id_card {
    background: url(ID_CARD.svg);
}

.nc-icon-document-type-passport {
    background: url(PASSPORT.svg);
}

.nc-icon-document-type-residence_permit {
    background: url(RESIDENCE_PERMIT.svg);
}

.nc-icon-document-type-driver_license {
    background: url(DRIVER_LICENSE.svg);
}

app-carousel .carousel-body {
    background-image: url(circle.svg) !important;
}

app-intro-step div.content img {
    height: var(--intro-step-image-height);
}

app-document-type-step div.content i.fa-chevron-right {
    color: var(--arrow-color);
}

app-document-type-step div.content img {
    height: var(--document-type-step-image-height);
}

app-guide-lines-document-step app-carousel app-time-bar .loading-bar,
app-guide-lines-selfie-step app-carousel app-time-bar .loading-bar {
    background-color: rgba(var(--cf-primary-rgb), 0.12);
}

app-guide-lines-document-step app-carousel app-time-bar.active .loading-bar,
app-guide-lines-selfie-step app-carousel app-time-bar.active .loading-bar {
    background-color: rgba(var(--cf-primary-rgb), 0.25);
}

app-guide-lines-document-step app-carousel .mat-mini-fab.mat-warn,
app-guide-lines-selfie-step app-carousel .mat-mini-fab.mat-warn {
    color: var(--arrow-color);
}

app-sending-step .mat-progress-bar-buffer {
    background-color: rgba(var(--cf-primary-rgb), 0.25);
}

app-final-step .nc-content-final {
    display: none !important;
}

app-final-step .nc-icon-final-step {
    content: url(loader.gif) !important;
    height: 120px;
    width: auto;
}

@media only screen and (height < 600px) {
    :root {
        --nc-font-size: clamp(0.7rem, var(--default-font-size), var(--nc-font-size-base));
        --intro-step-image-height: clamp(var(--min-intro-step-image-height), var(--linear-intro-step-image-height), var(--max-intro-step-image-height));
        --document-type-step-image-height: clamp(var(--min-document-type-step-image-height), var(--linear-document-type-step-image-height), var(--max-document-type-step-image-height));
        --document-type-selector-margin-bottom: clamp(var(--min-document-type-selector-margin-bottom), var(--linear-document-type-selector-margin-bottom), var(--max-document-type-selector-margin-bottom));
        --guide-lines-document-height: clamp(var(--min-guide-lines-document-height), var(--linear-guide-lines-document-height), var(--max-guide-lines-document-height));
        --paper-idcard-helper-icon-height: clamp(var(--min-paper-idcard-helper-icon-height), var(--linear-paper-idcard-helper-icon-height), var(--max-paper-idcard-helper-icon-height));
        --paper-idcard-helper-image-height: clamp(var(--min-paper-idcard-helper-image-height), var(--linear-paper-idcard-helper-image-height), var(--max-paper-idcard-helper-image-height));
    }

    app-intro-step div.content > div:first-of-type,
    app-intro-step div.content > div:nth-of-type(2) {
        display: none !important;
    }

    app-document-type-step > div.step-wrapper > div.header {
        margin-top: 0 !important;
    }

    app-document-type-step div.content button {
        margin-bottom: var(--document-type-selector-margin-bottom) !important;
    }

    app-guide-lines-document-step div.header {
        margin-top: 0 !important;
    }

    app-guide-lines-document-step div.content {
        margin-bottom: 0 !important;
        justify-content: flex-start !important;
    }

    app-guide-lines-document-step div.content div.carousel-content {
        margin: auto;
    }

    app-guide-lines-document-step div.content .carousel-content  {
        app-lottie-viewer:not(#animation-guideline-quality-card-reflect, #animation-guideline-quality-card-blur) {
            height: var(--guide-lines-document-height) !important;
            & > div, & svg {
                height: var(--guide-lines-document-height) !important;
            }
        }
    }

    app-guide-lines-selfie-step div.header {
        margin-top: 0 !important;
    }

    app-guide-lines-selfie-step div.content {
        justify-content: flex-start !important;
        margin-bottom: 0 !important;
    }

    app-paper-idcard-helper div.step-wrapper {
        min-height: unset;
    }

    app-paper-idcard-helper img.nc-icon-info {
        height: var(--paper-idcard-helper-icon-height) !important;
        aspect-ratio: 1;
    }

    app-paper-idcard-helper img {
        height: var(--paper-idcard-helper-image-height) !important;
    }

    app-video-document-step .step-wrapper .framing-frontside-header,
    app-video-document-step .step-wrapper .front-incline-x-header,
    app-video-document-step .step-wrapper .front-incline-y-header,
    app-video-document-step .step-wrapper .framing-backside-header,
    app-video-document-step .step-wrapper .back-incline-x-header,
    app-video-document-step .step-wrapper .back-incline-y-header {
        top: clamp(15px, calc(var(--screen-ratio) * 20), 20px) !important;
    }

    app-final-step div.header {
        display: none !important;
    }

    app-final-step div.content {
        margin-top: 1rem;
    }

    app-recover-error {
        p.nc-error-title {
            padding: 0 !important;
        }
        p.nc-error-title, p.nc-error-cause {
            font-size: var(--nc-font-size) !important;
        }
    }
}