:root {
    --gap: 24px;
    --radius: 12px;
    --shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    --shadow-hover: rgba(0, 0, 0, 0.15) 0px 8px 16px;
    /* Cores de Status */
    --color-approved: #28a745;
    --color-rejected: #dc3545;
    --color-pending: #ffc107;
    --color-pending-text: #333;
    --primary-brown-50: #FFF8F5;
    --primary-brown-100: #FFE1D6;
    --primary-brown-200: #F5BBA6;
    --primary-brown-300: #E09175;
    --primary-brown-400: #CC785A;
    --primary-brown-500: #B86142;
    --primary-brown-600: #A3573B;
    --primary-brown-700: #7A412C;
    --primary-brown-800: #522B1D;
    --primary-brown-900: #3D2016;
    --primary-brown-950: #29160F;
    --primary-green-50: #F5FFFC;
    --primary-green-100: #D6FFF1;
    --primary-green-200: #ADFFE4;
    --primary-green-300: #85FFD6;
    --primary-green-400: #3FE0AB;
    --primary-green-500: #08CC8B;
    --primary-green-600: #00A36D;
    --primary-green-700: #007A52;
    --primary-green-800: #005236;
    --primary-green-900: #003D29;
    --primary-green-950: #00291B;
    --primary-10: #fffaf7;
    --primary-20: #fff5ef;
    --primary-30: #ffeae0;
    --primary-40: #ffd8c2;
    --primary-50: #ffb590;
    --primary-60: #ffa47a;
    --primary-70: #ff9364;
    --primary-80: #ff824e;
    --primary-90: #ff7138;
    --primary-100: #ff6032;
    --primary-200: #e65300;
    --primary-300: #cc4b00;
    --primary-400: #b34300;
    --primary-500: #993b00;
    --primary-600: #803300;
    --primary-700: #662b00;
    --primary-800: #4d2200;
    --primary-900: #331900;
    --secondary-orange-50: #FFF9F5;
    --secondary-orange-100: #FFE5D6;
    --secondary-orange-200: #FFB185;
    --secondary-orange-300: #E07A3F;
    --secondary-orange-400: #B85116;
    --secondary-orange-500: #A34814;
    --secondary-orange-600: #7A360F;
    --secondary-orange-700: #662D0C;
    --secondary-orange-800: #52240A;
    --secondary-orange-900: #3D1B07;
    --secondary-orange-950: #291205;
    --secondary-pink-50: #FFF5F7;
    --secondary-pink-100: #FFD6E0;
    --secondary-pink-200: #FFADC2;
    --secondary-pink-300: #E07590;
    --secondary-pink-400: #CC5A76;
    --secondary-pink-500: #B8425F;
    --secondary-pink-600: #A33B55;
    --secondary-pink-700: #7A2C40;
    --secondary-pink-800: #521D2A;
    --secondary-pink-900: #3D1620;
    --secondary-pink-950: #290F15;
    --secondary-blue-50: #F5FBFF;
    --secondary-blue-100: #D6EEFF;
    --secondary-blue-200: #ADDDFF;
    --secondary-blue-300: #85CCFF;
    --secondary-blue-400: #45ABF5;
    --secondary-blue-500: #0A93F5;
    --secondary-blue-600: #005FA3;
    --secondary-blue-700: #003C66;
    --secondary-blue-800: #00243D;
    --secondary-blue-900: #001829;
    --secondary-blue-950: #000C14;
    --secondary-red-50: #FFF5F5;
    --secondary-red-100: #FFD6D6;
    --secondary-red-200: #FFADAD;
    --secondary-red-300: #FF8585;
    --secondary-red-400: #FF5C5C;
    --secondary-red-500: #FF3333;
    --secondary-red-600: #B80000;
    --secondary-red-700: #7A0000;
    --secondary-red-800: #7A0000;
    --secondary-red-900: #3D0000;
    --secondary-red-950: #290000;
    --secoundary-10: #fff9f4;
    --secoundary-20: #fff4e8;
    --secoundary-30: var(--primary-brown-100);
    --secoundary-40: #ffd6af;
    --secoundary-50: #ffba70;
    --secoundary-60: #ffad5a;
    --secoundary-70: #ffa045;
    --secoundary-80: #ff932f;
    --secoundary-90: #ff8619;
    --secoundary-100: #ff7904;
    --secoundary-200: #e66b04;
    --secoundary-300: #cc5d04;
    --secoundary-400: #b34f04;
    --secoundary-500: #994104;
    --secoundary-600: #803304;
    --secoundary-700: #662504;
    --secoundary-800: #4d1704;
    --secoundary-900: #330904;
    --secondary-white-50: #FFFFFF;
    --secondary-white-100: #F7F7F7;
    --secondary-white-200: #E3E3E3;
    --secondary-white-300: #A3A3A3;
    --secondary-white-400: #737373;
    --secondary-white-500: #3A3A3A;
    --text-10: #fafafa;
    --text-20: #f6f6f6;
    --text-30: #edece;
    --text-40: #e1e1e1;
    --text-50: #c6c6c5;
    --text-60: #b8b8b7;
    --text-70: #acacac;
    --text-80: #9e9e9e;
    --text-90: #919190;
    --text-100: #838382;
    --text-200: #757574;
    --text-300: #676767;
    --text-400: #5c5c5b;
    --text-500: #4e4e4d;
    --text-600: #424242;
    --text-700: #323231;
    --text-800: #252524;
    --text-900: #191918;
    --background-1: var(--secoundary-30);
    --banner-1: url('images/banner-light-orange.png');
    /* Fase 0: era #5C8AC7 (azul), un valor muerto que .design-light siempre pisaba.
       Unificado al token de marca (#32E696) para eliminar el conflicto de --color-primary. */
    --color-primary: var(--color-brand-primary-400, #32E696);
    --color-accent: #00386F;
    --light-gray: #F7F7F7;
    --light-gray-vector: #C3C3C9;
    --dark-gray: #6E6E6E;
    --color-red: #CD0000;
    --link-color: #0094FF;
    --success-color: var(--primary-green-500);
    --warning-color: var(--secondary-orange-400);
    --error-color: var(--secondary-red-500);
    --focus-ring: 0 0 0 3px var(--secondary-blue-200);
    --hover-bg: var(--secondary-blue-50);
    /* ===================== */
    /* Design System Tokens  */
    /* ===================== */
    /* Base */
    --color-base-black: #000000;
    --color-base-white: #FFFFFF;
    --light: rgba(255, 255, 255, 0.2);
    /* Gray scale */
    --color-neutral-50: #F5F5F5;
    --color-neutral-100: #E9E9E9;
    --color-neutral-200: #D9D9D9;
    --color-neutral-300: #C4C4C4;
    --color-neutral-400: #9D9D9D;
    --color-neutral-500: #5F5F5F;
    --color-neutral-600: #555555;
    --color-neutral-700: #434343;
    --color-neutral-800: #262626;
    --color-neutral-900: #111827;
    --color-neutral-950: #030712;
    /* Background */
    --color-surface-neutral: #C9CBCA;
    --color-surface-app: #FAFAFA;
    /* Primary brand scale */
    --color-brand-primary-50: #EFFFF7;
    --color-brand-primary-100: #DAFEED;
    --color-brand-primary-200: #B7FBDC;
    --color-brand-primary-300: #7FF6C1;
    --color-brand-primary-400: #32E696;
    --color-brand-primary-500: #17D07E;
    --color-brand-primary-600: #0DAC66;
    --color-brand-primary-700: #0E8752;
    --color-brand-primary-800: #116A44;
    --color-brand-primary-900: #10573A;
    --color-brand-primary-950: #02311F;
    /* Feedback / Information */
    --color-feedback-info-100: #EBF3FF;
    --color-feedback-info-500: #85A1CC;
    --color-feedback-info-700: #1952A6;
    /* Feedback / Warning */
    --color-feedback-warning-100: #FFF6EB;
    --color-feedback-warning-500: #CCAD85;
    --color-feedback-warning-700: #A66919;
    /* Feedback / Negative */
    --color-feedback-negative-100: #FFEBF4;
    --color-feedback-negative-500: #CC8585;
    --color-feedback-negative-700: #A61919;
    /* Feedback / Positive */
    --color-feedback-positive-100: #EEFFEB;
    --color-feedback-positive-500: #90CC84;
    --color-feedback-positive-700: #27B812;
    /* Borders */
    --color-border-input: #7B7B7B;
    --color-border-container: #E5E7EB;
    /* Specific colors */
    --yellow: #FFDD00;
    --sky-blue: #28ABE3;
    --cold-green: #07B59A;
    --red: #FF0000;
    --orange: #FF8000;
    --pink: #E4097D;
    --green: #23E589;
    /* Aliases & compatibility with existing CSS usages */
    --gray-color-neutral-50: var(--color-neutral-50);
    --gray-color-neutral-100: var(--color-neutral-100);
    --gray-color-neutral-200: var(--color-neutral-200);
    --gray-color-neutral-300: var(--color-neutral-300);
    --gray-color-neutral-400: var(--color-neutral-400);
    --gray-color-neutral-500: var(--color-neutral-500);
    --gray-color-neutral-600: var(--color-neutral-600);
    --gray-color-neutral-700: var(--color-neutral-700);
    --gray-color-neutral-800: var(--color-neutral-800);
    --gray-color-neutral-900: var(--color-neutral-900);
    --gray-color-neutral-950: var(--color-neutral-950);
    --background-color-surface-app: var(--color-surface-app);
    --Primary-color-brand-primary-500: var(--color-brand-primary-500);
    --Border-inputs: var(--color-border-input);
    --Border-Containers: var(--color-border-container);
    /* Radius & Shadows */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    /* Surfaces */
    --surface: #ffffff;
    --surface-alt: #f8fafc;
    /* Text & Links helpers */
    --color-link: #006bb7;
    --color-body-text: var(--color-neutral-800);
    --color-body-text-light: var(--color-neutral-600);
    --color-secondary: var(--color-accent);
    --color-danger: #dc3545;
    --color-divider: #E5E7EB;
    --default-border-radius: 8px;
}

html {
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    color: var(--color-neutral-800);
    background-color: var(--color-surface-app) !important;
}

.custom-paragraph {
    color: var(--gray-color-neutral-800, #262626);
    /* Body/Large */
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
    line-height: 24px; /* 150% */
}

.home-banners {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

    .home-banners.slick-initialized {
        visibility: visible;
        opacity: 1;
    }

.slick-slider-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

    .slick-slider-container.slick-initialized {
        visibility: visible;
        opacity: 1;
    }

.cards-estrellas {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

    .cards-estrellas.slick-initialized {
        visibility: visible;
        opacity: 1;
    }

.cards-sorteos {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

    .cards-sorteos.slick-initialized {
        visibility: visible;
        opacity: 1;
    }

.carousel-desktop {
    display: none;
}

.carousel-mobile {
    display: none;
}

@media (min-width: 768px) {
    .carousel-desktop {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .carousel-mobile {
        display: block;
    }
}

.slick-dots {
    position: !important;
    bottom: -25px !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    text-align: center !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    justify-content: center;
}

    .slick-dots li {
        display: flex !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

        .WMBSC .slick-dots li.slick-active:hover,
        .WMBSC .slick-dots li.slick-active:hover button,
        .slick-dots li:hover {
            opacity: .7 !important;
        }

        .slick-dots li button {
            font-size: 0 !important;
            line-height: 0 !important;
            display: block !important;
            width: 12px !important;
            height: 12px !important;
            padding: 5px !important;
            cursor: pointer !important;
            color: black !important;
            border: 0 !important;
            outline: none !important;
            background: transparent !important;
            fill: var(--gray-color-neutral-200, #D9D9D9) !important;
        }

            /* Inactive dots - darker blue-gray circles */
            .slick-dots li button:before {
            }

.WMBSC .slick-dots li.slick-active button,
.WMBSC .slick-dots li.slick-active,
.slick-active button,
.slick-active {
    width: 24px !important;
    height: 12px !important;
    opacity: 1 !important;
    border-radius: 16px;
    background: var(--Primary-color-brand-primary-500, #17D07E);
}
/* Active dot - lighter blue-gray circle */
.slick-dots li.slick-active button:before {
}

input {
    caret-color: var(--color-accent);
}
/* FONT */
.f-10 {
    font-size: 10px;
}

.f-12 {
    font-size: 12px;
}

.f-14 {
    font-size: 14px;
}

.f-16 {
    font-size: 16px;
}

.f-18 {
    font-size: 18px;
}

.f-20 {
    font-size: 20px;
}

.f-22 {
    font-size: 22px;
}

.f-24 {
    font-size: 24px;
}

.f-40 {
    font-size: 40px;
}

.f-bold, button, .btn {
    font-weight: bold;
}

.f-semibold {
    font-weight: 500;
}

.f-accent {
    color: var(--color-accent);
}

.f-red {
    color: var(--color-red);
}
/* ASSET */
.color-primary {
    color: var(--color-primary);
}

.color-accent {
    color: var(--color-accent);
}

.color-dark-gray {
    color: var(--dark-gray);
}

.color-ligth-gray-vector {
    color: var(--light-gray-vector);
}

.bg-red {
    background-color: var(--color-red) !important;
}
/* WIDTH */
.w-50px {
    width: 50px;
}
/* MARGINS & PADDINGS*/
.no-margin-b {
    margin-bottom: 0px;
}

.m-5 {
    margin: 5px !important;
}

.mblock-20 {
    margin-block: 20px;
}

.mblock-30 {
    margin-block: 30px;
}

.p-20 {
    padding: 20px;
}

.mb-4-c {
    margin-bottom: 4px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mb-14 {
    margin-bottom: 14px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.margin-bottom-16 {
    margin-bottom: 16px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-24 {
    margin-bottom: 24px !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mt-24 {
    margin-top: 24px !important;
}

.mt-32 {
    margin-top: 32px !important;
}

.mb-48 {
    margin-bottom: 48px !important;
}

.mt-16 {
    margin-top: 16px !important;
}
/* PADDING */
.pl-20 {
    padding-left: 20px !important;
}

.p-24 {
    padding: 24px !important;
}
/* BACKGROUND */
.bg-accent {
}

.bg-primary {
    background-color: var(--color-primary) !important;
}
/* BORDER RADIUS*/
.border-radius-4 {
    border-radius: 4px;
}

.border-radius-6 {
    border-radius: 6px;
}

.border-radius-8 {
    border-radius: 8px;
}

.border-radius-16 {
    border-radius: 16px;
}

a {
    text-decoration: none;
}

.link {
    color: var(--link-color);
    font-weight: bold;
}
/* INPUT */
.border-05-accent {
    border: 0.5px solid var(--color-accent);
}
/* INPUT */
.input-light-gray {
    color: var(--dark-gray);
    background-color: var(--light-gray);
}

.input-44 {
    height: 44px;
    padding-block: 14px;
    padding-left: 18px;
}

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    color: #fff;
    height: auto;
    background-color: var(--color-base-black);
}

    .footer a {
        color: white;
        font-weight: 600;
    }

    .footer .footer-title {
        font-size: 25px;
    }

    .footer .store {
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        padding-top: 30px;
    }

@media(max-width: 767px) {
    .footer {
        margin: 50px 0 0 0;
    }

        .footer .links, .footer .store {
            text-align: center;
        }

        .footer .store {
            border: none;
            padding: 0;
            margin-top: 20px;
        }
}

.footer .BrandFooter img {
    width: 160px;
}

.footer .footer-copyright {
    font-size: 10px;
    font-weight: 400;
}

.links ul {
    padding-left: 0px;
}

.RedesFooter {
    padding-top: 30px;
}

    .RedesFooter img {
        width: 40px;
    }

.appStore img {
    width: 123px;
}

.footer-phone-svg {
    width: 54px;
    margin-right: 15px;
}

a, .btn-link {
    color: #006bb7;
}

.btn {
    min-width: fit-content;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding: 2%;
    max-width: 1440px;
    margin: auto;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.navbar {
    height: 72px;
    background: var(--color-brand-primary-400, #32E696);
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-base-black, #000);
    /* Shadow/shadow.surface.lg */
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.08);
}

.navbar > .container {
    max-width: 1260px;
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width: 1024px) {
    body {
        padding-top: 80px;
    }

    body > header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
    }

    .navbar {
        padding: 0;
        height: auto;
        border-bottom: none;
        box-shadow: none;
        background: transparent;
    }

    .navbar > .container {
        height: 80px;
        padding: 16px;
        background: var(--color-brand-primary-400, #32E696);
        border-bottom: 1px solid var(--color-base-black, #000);
        box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.08);
    }

    .navbar-options .nav-link {
        padding: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Tablet: header 80px per Figma — handled by max-width: 1024px block above */

.navbar-options {
    gap: 16px;
    flex-shrink: 0;
}

/* Navbar breakpoint utilities – mobile ↔ desktop at 1024px */
.navbar-desktop-only {
    display: none !important;
}

.navbar-mobile-only {
    display: block !important;
}

@media (min-width: 1025px) {
    .navbar-desktop-only {
        display: flex !important;
    }

    .navbar-mobile-only {
        display: none !important;
    }
}

/* Mobile + tablet: Figma icon gap is 8px */
@media (max-width: 1024px) {
    .navbar-options {
        gap: 8px;
    }
}

/* Show add-business button at tablet+ */
@media (min-width: 768px) {
    #add-business {
        display: flex !important;
        flex-shrink: 0;
    }
}

.navbar-brand img {
    width: 168px;
    height: 32px;
}

a.nav-link {
    color: white !important;
}

.navbar-light .navbar-nav .active > .nav-link {
    color: white;
    font-weight: bold;
}

.navbar-collapse {
    justify-content: space-between;
}

#search-top-bar {
    color: var(--gray-color-neutral-500, #5F5F5F);
    /* Body/Large */
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
    line-height: 24px; /* 150% */
}

    #search-top-bar:focus {
        border-color: inherit;
        box-shadow: none;
    }

.btn-primary,
.btn-outline,
.btn-outline-primary {
    height: 48px;
    padding-inline: 24px;
}

.btn-primary {
    background-color: var(--color-accent);
    border-color: #00386F;
}

.btn-secondary {
    background-color: #5C89C6;
    border-color: #5C89C6;
    height: 48px;
    padding-inline: 24px;
}

.btn-tertiary {
    background-color: white;
    color: #00386F;
    border-color: #00386F;
}

@media(max-width: 992px) {
    #btn-add-my-brand {
        display: none !important;
    }
}

.navbar-search-box {
    flex: 0 0 358px;
    max-width: 358px;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--Border-inputs, #7B7B7B);
    background: var(--gray-color-neutral-50, #F5F5F5);
    border-radius: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
}

    /* Foco de campo del DS: el anillo va en la pildora (el input interno es borderless) */
    .navbar-search-box:focus-within {
        border-color: var(--input-border-focus, #077574);
        box-shadow: 0 0 0 1px var(--input-border-focus, #077574);
    }

    .navbar-search-box > i {
        font-size: 20px;
        color: #777;    
    }

    .navbar-search-box > input {
        flex: 1;
        height: auto;
        border: none;
        outline: none;
        font-size: 16px;
        padding: 0;
        padding-left: 0;
        background: transparent !important;
    }

    /* El input interno no muestra foco propio (lo muestra la pildora via :focus-within) */
    .navbar-search-box input:focus,
    .navbar-search-box .form-control:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .navbar-search-box > input::placeholder {
        color: #5F5F5F;
        opacity: 1;
    }

    .navbar-search-box > img {
        height: 21px;
    }

.nav-icon,
.search-magnifier {
    width: 24px;
    height: 24px;
}
/*.bottom-navbar {
    overflow: hidden;
    background-color: white;
    position: fixed;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: -2px -2px 4px 0px #00000040;
    padding-inline: 16px;
}*/
/*
    .bottom-navbar a {
        text-align: center;
        text-decoration: none;
        font-size: 17px;
    }*/

.menu-desplegable {
    width: 230px;
    background-color: #fff;
    display: none;
    float: inline-end;
    position: relative;
    height: 0px;
    z-index: 1;
}

.menu-items-container {
    background-color: white;
    height: 91.5vh;
    box-shadow: -2px 2px 4px 0px #00000040;
}

@media(max-width: 400px) {
    .menu-desplegable {
        background-color: white;
        font-size: 0.8em;
        width: 190px;
    }
}

.box-shadow {
    box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, 0.05)
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 10px;
    color: #00386F;
    border-bottom: 1px solid #EAEAEA;
    text-decoration: none;
    background-color: white;
}

    .menu-item:hover {
        text-decoration: none;
    }

    .menu-item img.icon {
        margin-right: 10px;
        width: 20px;
        height: 20px;
    }

    .menu-item:hover {
        background-color: #F2F2F2;
    }

.menu-separador {
    height: 1px;
    background: var(--Border-Containers, #E5E7EB);
}

.usuario-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: var(--color-primary);
    color: #fff;
    height: 74px;
}

    .usuario-info .usuario-icono {
        width: 36px;
        height: 36px;
    }

    .usuario-info .usuario-nome {
        flex-grow: 1;
        padding-left: 10px;
    }

    .usuario-info .nome,
    .usuario-info .apellido {
        display: block;
    }

    .usuario-info .cerrar-menu {
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
    }

        .usuario-info .cerrar-menu:hover {
            color: #eaeaea;
        }

.valid.modified:not([type=checkbox]) {
    outline: none !important;
}

.custom-checkbox {
    background-color: black;
    accent-color: black;
    width: 1.2rem;
    height: 1.2rem;
    border: 1px solid black;
}

.promo-card {
    position: relative;
    width: 365px;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.promo-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.promo-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.promo-content {
    position: absolute;
    top: 40px;
    left: 20px;
}

    .promo-content h2 {
        font-size: 18px;
        margin: 0 0 10px;
        margin-top: 30px;
    }

.promo-price {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.price {
    font-size: 24px;
    font-weight: bold;
    color: white;
}

.points {
    font-size: 16px;
    color: #fff;
}

.promo-details {
    font-size: 14px;
    margin: 0;
}

/* ── Proportional scaling wrapper for preview cards ── */
.promo-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.promo-scale-box {
    width: 600px;
    height: 365px;
}

.promo-scale-box > * {
    width: 100%;
    height: 100%;
    display: block;
}

.promo-star {
    position: absolute;
    top: -40px;
    left: -20px;
    border-radius: 50%;
    padding: 10px;
}

.star-icon {
    content: url('full-star.svg');
    width: 20px;
    height: 20px;
}

.star-icon-logo {
    content: url('Images/navbar-logo.svg');
    width: 110px;
    height: 40px;
}








.sorteo-card {
    position: relative;
    width: 365px;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sorteo-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.sorteo-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 64, 128, 0.9);
    color: white;
    clip-path: polygon(0 0, 48% 0, 59% 100%, 0% 100%)
}

.sorteo-content {
    position: absolute;
    top: 40px;
    left: 20px;
}

    .sorteo-content h2 {
        font-size: 18px;
        margin: 0 0 10px;
        margin-top: 30px;
    }

.sorteo-price {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.sorteo-details {
    font-size: 14px;
    margin: 0;
}

.sorteo-star {
    position: absolute;
    top: -40px;
    left: -20px;
    border-radius: 50%;
    padding: 10px;
}

.star-icon {
    content: url('full-star.svg');
    width: 20px;
    height: 20px;
}

.star-icon-logo {
    content: url('Images/navbar-logo.svg');
    width: 110px;
    height: 40px;
}

.bg-warning {
    background-color: #FFBA19 !important;
}

.f-dark {
    color: #4A4A4A !important;
}


.my-account-panel {
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: flex-start;
    align-content: center;
}

@media(max-width: 767px) {
    .my-account-panel {
        gap: 0;
    }
}

.my-account-panel .panel-sidebar {
    position: static;
    align-self: stretch;
}

/* El menú lateral llega hasta abajo de la caja de la página (Carolina, 13/10, SCRUM-514).
   El sidebar ya se estiraba respecto del panel, pero el panel medía lo que midiera su
   contenido, y el <main> se estira solo hasta el pie: quedaba una franja blanca debajo del
   menú — 139px en la pantalla de Sucursales, medidos.

   La cadena se corta en <main>, que es display:block: aunque el body lo estira con flex, su
   contenido no hereda ese alto. Haciéndolo columna flex, el contenedor del contenido y el
   panel crecen, y recién ahí el height:100% del menú tiene contra qué resolver.

   Va acotado con :has() a propósito: <main> y .article-container los usan todas las páginas
   de la app, y estirarlos en todas movería contenido que hoy se centra vertical. */
/* La fila de packs de Suscripción necesita más ancho que el contenedor estándar (SCRUM-213).
   El diseño la quiere en 1328px —nodo 3735-75625— y main.container topea en 1140, que con los
   padding de la cadena (15 del container y 22,2 del article) deja 1066 útiles: las cards salían
   en 254 en vez de 320, que es lo que Carolina reportó como "tamaño".

   El valor va con holgura a propósito y no calculado al milímetro: el padding del
   .article-container es porcentual —2% a cada lado, 27,5px a este ancho— así que crece junto
   con el contenedor y perseguir el número exacto acá sería frágil. Con 1440 sobra espacio y el
   ancho final lo fija el max-width de .packs-promo, que es el del diseño.

   Acotado con :has() a la pantalla que tiene la promo, porque el contenedor lo usa toda la
   app. La tarjeta de la marca no se mueve: la acota su propio .subscriptions-content en 480px. */
main.container:has(.packs-promo) {
    max-width: 1440px;
}

/* La banda gris de la sección de packs se dibuja con un pseudo-elemento de 100vw, y 100vw
   incluye la barra de scroll: sin esto sobresale ~7px por lado y aparece scroll horizontal.
   clip y no hidden porque hidden crea un contenedor de scroll y rompería cualquier sticky.
   Acotado con :has() a esta pantalla, que es la única que dibuja la banda (SCRUM-213). */
body:has(.packs-promo) {
    overflow-x: clip;
}

/* La página oficial va sobre Grey/color-neutral-100 y no sobre el #FAFAFA del resto de la
   app: lo pidió Carolina el 09/10 (SCRUM-126) y el frame de Figma 2875:273936 lo declara así.
   Acotado con :has() y no cambiando --color-surface-app, que es el fondo de TODAS las
   pantallas. Va en html y body y no en el contenedor de la página porque el contenido no
   llega al alto de la ventana: pintar el contenedor dejaría los costados y el pie del color
   viejo. Las cajas blancas quedan como están — contra este gris es cuando se despegan.

   El !important no es decorativo: la regla base de html,body (más arriba en este mismo
   archivo) ya lo lleva, así que sin él esta no gana por más específica que sea. Con los dos
   en !important decide la especificidad, y :has() la sube. */
html:has(.pagina-oficial),
body:has(.pagina-oficial) {
    background-color: var(--color-neutral-100, #E9E9E9) !important;
}

main.container:has(.my-account-panel) {
    display: flex;
    flex-direction: column;
}

main.container:has(.my-account-panel) > .article-container {
    flex: 1 1 auto;
}

.my-account-panel {
    flex: 1 1 auto;
}

@media (max-width: 767) {
    .my-account-panel .panel-sidebar {
        display: none !important;
    }
}

.my-account-panel .panel-main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}


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


.padding-0 {
    padding: 0 !important;
}

hr {
    width: 100%;
}

.footer-content button {
    color: var(--color-base-black, #000);
    text-align: center;
    /* Button/Label Medium */
    font-family: var(--font-family-Poppins, Poppins);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: 20px; /* 142.857% */
}

.picker-arrow-container {
    height: -webkit-fill-available;
    align-items: center;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .navbar .container .navbar-search-box {
        margin-bottom: 0;
    }
}

.header-title .back-container .back-button {
    display: none;
}

@media(max-width: 767px) {
    .consultant-card {
        max-width: 100%;
    }

    .container-indication {
        max-width: 100%;
    }

    .header-title .back-container .back-button {
        display: block;
    }

    .main-menu-container,
    .back-container {
        display: none;
    }
}


@media(max-width: 769px) {
}



.header-title {
    display: flex;
}


.upload-card {
    border-radius: 12px;
}

    .upload-card.empty .upload-icon {
        width: 48px;
        height: 48px;
    }
/* Botão ver mais */
.btn-see-more {
    font-size: .95rem;
    color: var(--color-brand-primary-500, #24CB80);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    border: none;
    background: none;
    padding: 4px 12px;
}

    .btn-see-more:hover {
        opacity: .85;
    }


.WMBSC .slick-prev,
.WMBSC .slick-next {
}

.WMBSC .slick-prev {
    left: -25px !important;
}

.WMBSC .slick-next {
    right: -25px !important;
}

.slick-dotted.slick-slider {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.panel-main-content {
    max-width: 664px;
}

@media(max-width: 767px) {
    .panel-main-content {
        margin: 0 auto;
        max-width: 100%;
    }
}

.post-reason-card {
    display: flex;
    min-width: 224px;
    max-width: 354px;
    padding: var(--8, 32px) var(--4, 16px) var(--6, 24px) var(--4, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 8px;
    background: var(--color-base-white, #FFF);
    /* Shadow/shadow.surface.lg */
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}

    .post-reason-card .ph:before {
        width: 32px !important;
        height: 32px !important;
        font-size: 48px;
    }

@media(max-width: 1024px) {
    .post-reason-card {
        display: flex;
        min-width: 224px;
        max-width: 354px;
        padding: var(--8, 32px) var(--4, 16px) var(--6, 24px) var(--4, 16px);
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        align-self: stretch;
    }

    .post-reason-card__body {
        padding: 0;
        min-height: 230px;
    }
}

@media(max-width: 768px) {
    .post-reason-card {
        min-width: 100%;
        max-width: 100%;
    }

    .post-reason-card__body {
    }

    .post-reason-card__body {
        padding: 0;
        min-height: 0;
    }
}


.post-intro {
    max-width: 720px;
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.post-intro__title {
    color: var(--gray-color-neutral-800, #262626);
    /* Title/Semibold/32 */
    font-family: var(--font-family-Poppins, Poppins);
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 32px; /* 100% */
    max-width: 900px;
}

.post-intro__desc {
    color: var(--color-base-black, #000);
    /* Body/Regular/20 */
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 20px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
    line-height: 24px; /* 120% */
}

@media (max-width:600px) {
    .post-reasons__grid {
        grid-template-columns: 1fr;
    }

    .post-intro {
        padding: 48px 24px;
    }

    .post-reasons__title {
        font-size: 1.5rem;
    }
}

.content-area {
    max-width: 992px;
    margin: 0 auto;
    width: 100%;
}

.post-flags {
    display: flex;
    justify-content: flex-end;
    margin: 8px auto 8px;
    padding: 0 16px;
    max-width: 992px;
}


.post-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.components-reconnect-dialog,
.components-reconnect-overlay {
    display: none !important;
}

.post-section-content .e-ddl.e-input-group .e-input-value {
    padding: 10px;
}

.components-reconnect-overlay.components-reconnect-visible,
.components-reconnect-dialog {
    display: none !important;
}

.banner-container .banner-image, .post-hero__image {
    width: 100%;
    height: auto;
    display: block;
}

.e-carousel .e-carousel-items .e-carousel-item {
    height: fit-content !important;
}

.e-toast-container .e-toast {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Shared loader overlay (image upload / cropper) ── */
.local-loader-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    animation: localLoaderFadeIn 0.3s ease;
}

.local-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-brand-primary-600, #00C853);
    border-radius: 50%;
    animation: localLoaderSpin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes localLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes localLoaderFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

post-form__label {
    margin-top: .5rem;
    display: block;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-weight: 600;
    font-size: 16px;
}

/* ── Form button loading spinner (SSR pages) ── */
.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.55s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.btn.is-loading {
    opacity: 0.85;
}