/* Minification failed. Returning unminified contents.
(83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(84,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(107,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(108,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(109,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(110,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(112,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(113,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(114,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(115,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(116,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(117,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(134,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(135,21): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(154,23): run-time error CSS1039: Token not allowed after unary operator: '-font-bold'
(155,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(159,21): run-time error CSS1039: Token not allowed after unary operator: '-size-sm'
(164,21): run-time error CSS1039: Token not allowed after unary operator: '-size-sm'
(173,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-monto-a-pagar'
(177,21): run-time error CSS1039: Token not allowed after unary operator: '-clr-saldo-al-dia'
(181,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(182,23): run-time error CSS1039: Token not allowed after unary operator: '-font-bold'
(195,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(209,21): run-time error CSS1039: Token not allowed after unary operator: '-size-lg'
(211,23): run-time error CSS1039: Token not allowed after unary operator: '-font-bold'
(236,25): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(244,20): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(250,21): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(268,21): run-time error CSS1039: Token not allowed after unary operator: '-size-sm'
(273,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-primary'
(275,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-primary'
(290,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-primary'
(291,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-primary'
(296,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-primary'
(297,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-primary'
(328,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(330,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(380,27): run-time error CSS1039: Token not allowed after unary operator: '-font-bold'
(381,21): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(394,25): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(395,31): run-time error CSS1039: Token not allowed after unary operator: '-font-bold'
(402,36): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(403,29): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(408,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(425,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(460,25): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(465,31): run-time error CSS1039: Token not allowed after unary operator: '-font-bold'
(468,36): run-time error CSS1039: Token not allowed after unary operator: '-clr-border'
(473,36): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(485,15): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(494,17): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(496,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(507,21): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(508,25): run-time error CSS1039: Token not allowed after unary operator: '-size-sm'
(540,26): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(550,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-border'
(551,34): run-time error CSS1046: Expect comma, found '0'
(551,38): run-time error CSS1046: Expect comma, found '/'
(566,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-border'
(568,29): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(575,21): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(581,25): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(582,29): run-time error CSS1039: Token not allowed after unary operator: '-size-sm'
(587,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(597,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(619,33): run-time error CSS1039: Token not allowed after unary operator: '-size-sm'
(624,30): run-time error CSS1039: Token not allowed after unary operator: '-clr-secondary'
(625,31): run-time error CSS1039: Token not allowed after unary operator: '-font-bold'
(632,17): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(633,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(638,24): run-time error CSS1039: Token not allowed after unary operator: '-clr-saldo-a-pagar'
(650,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(651,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-white'
(660,26): run-time error CSS1039: Token not allowed after unary operator: '-vel-trans'
(688,22): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(692,26): run-time error CSS1039: Token not allowed after unary operator: '-vel-trans'
(734,15): run-time error CSS1039: Token not allowed after unary operator: '-lupaTooltipTop'
(735,16): run-time error CSS1039: Token not allowed after unary operator: '-lupaTooltipLeft'
(741,21): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
(764,45): run-time error CSS1039: Token not allowed after unary operator: '-lupaLeft'
(764,61): run-time error CSS1039: Token not allowed after unary operator: '-lupaTop'
(764,106): run-time error CSS1039: Token not allowed after unary operator: '-lupaSize'
(764,124): run-time error CSS1046: Expect comma, found '0'
(764,128): run-time error CSS1046: Expect comma, found '/'
(768,40): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(809,17): run-time error CSS1039: Token not allowed after unary operator: '-clr-white'
(813,16): run-time error CSS1039: Token not allowed after unary operator: '-clr-white'
(928,25): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(956,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(957,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(1069,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(1070,28): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue-movistar'
(1262,23): run-time error CSS1046: Expect comma, found '0'
(1262,27): run-time error CSS1046: Expect comma, found '/'
(1312,25): run-time error CSS1039: Token not allowed after unary operator: '-clr-title-richtext'
(1717,40): run-time error CSS1046: Expect comma, found '42'
(1717,46): run-time error CSS1046: Expect comma, found '/'
(1718,41): run-time error CSS1046: Expect comma, found '0'
(1718,45): run-time error CSS1046: Expect comma, found '/'
(1847,36): run-time error CSS1046: Expect comma, found '42'
(1847,42): run-time error CSS1046: Expect comma, found '/'
(1855,21): run-time error CSS1039: Token not allowed after unary operator: '-clr-text'
(2561,15): run-time error CSS1039: Token not allowed after unary operator: '-lupaOnboardingTooltipTop'
(2562,16): run-time error CSS1039: Token not allowed after unary operator: '-lupaOnboardingTooltipLeft'
(2568,21): run-time error CSS1039: Token not allowed after unary operator: '-size-md'
 */
/* Telefonica fonts */
@font-face {
    font-family: "TelefonicaItalic";
    src: url(/assets/fonts/telefonica/telefonica-regularitalic-webfont.eot);
    src: url(/assets/fonts/telefonica/telefonica-regularitalic-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/telefonica/telefonica-regularitalic-webfont.woff2) format("woff2"), url(/assets/fonts/telefonica/telefonica-regularitalic-webfont.woff) format("woff"), url(/assets/fonts/telefonica/telefonica-regularitalic-webfont.ttf) format("truetype"), url(/assets/fonts/telefonica/telefonica-regularitalic-webfont.svg#telefonicaitalic) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "TelefonicaBold";
    src: url(/assets/fonts/telefonica/telefonica-bold-webfont.eot);
    src: url(/assets/fonts/telefonica/telefonica-bold-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/telefonica/telefonica-bold-webfont.woff2) format("woff2"), url(/assets/fonts/telefonica/telefonica-bold-webfont.woff) format("woff"), url(/assets/fonts/telefonica/telefonica-bold-webfont.ttf) format("truetype"), url(/assets/fonts/telefonica/telefonica-bold-webfont.svg#telefonicabold) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "TelefonicaLight";
    src: url(/assets/fonts/telefonica/telefonica-light-webfont.eot);
    src: url(/assets/fonts/telefonica/telefonica-light-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/telefonica/telefonica-light-webfont.woff2) format("woff2"), url(/assets/fonts/telefonica/telefonica-light-webfont.woff) format("woff"), url(/assets/fonts/telefonica/telefonica-light-webfont.ttf) format("truetype"), url(/assets/fonts/telefonica/telefonica-light-webfont.svg#telefonicalight) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "TelefonicaExtraLight";
    src: url(/assets/fonts/telefonica/telefonica-extralight-webfont.eot);
    src: url(/assets/fonts/telefonica/telefonica-extralight-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/telefonica/telefonica-extralight-webfont.woff2) format("woff2"), url(/assets/fonts/telefonica/telefonica-extralight-webfont.woff) format("woff"), url(/assets/fonts/telefonica/telefonica-extralight-webfont.ttf) format("truetype"), url(/assets/fonts/telefonica/telefonica-extralight-webfont.svg#telefonicaextralight) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "TelefonicaCapRegular";
    src: url(/assets/fonts/telefonica/telefonicacap-regular-webfont.eot);
    src: url(/assets/fonts/telefonica/telefonicacap-regular-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/telefonica/telefonicacap-regular-webfont.woff2) format("woff2"), url(/assets/fonts/telefonica/telefonicacap-regular-webfont.woff) format("woff"), url(/assets/fonts/telefonica/telefonicacap-regular-webfont.ttf) format("truetype"), url(/assets/fonts/telefonica/telefonicacap-regular-webfont.svg#telefonica_capregular) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "TelefonicaRegular";
    src: url(/assets/fonts/telefonica/telefonica-regular-webfont.eot);
    src: url(/assets/fonts/telefonica/telefonica-regular-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/telefonica/telefonica-regular-webfont.woff2) format("woff2"), url(/assets/fonts/telefonica/telefonica-regular-webfont.woff) format("woff"), url(/assets/fonts/telefonica/telefonica-regular-webfont.ttf) format("truetype"), url(/assets/fonts/telefonica/telefonica-regular-webfont.svg#telefonicaregular) format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "TelefonicaHand";
    src: url(/assets/fonts/telefonica/telefonica-hand-webfont.eot);
    src: url(/assets/fonts/telefonica/telefonica-hand-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/telefonica/telefonica-hand-webfont.woff2) format("woff2"), url(/assets/fonts/telefonica/telefonica-hand-webfont.woff) format("woff"), url(/assets/fonts/telefonica/telefonica-hand-webfont.ttf) format("truetype"), url(/assets/fonts/telefonica/telefonica-hand-webfont.svg#telefonicahand) format("svg");
    font-weight: normal;
    font-style: normal;
}

/* FONTS: San Francisco PRO, Roboto & Telefonica Sans */
@font-face {
    font-family: "TelefonicaSans";
    src: url(/assets/fonts/nuevas/TelefonicaWeb-Regular.eot);
    src: url(/assets/fonts/nuevas/TelefonicaWeb-Regular.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/nuevas/TelefonicaWeb-Regular.woff2) format("woff2"), url(/assets/fonts/nuevas/TelefonicaWeb-Regular.woff) format("woff"), url(/assets/fonts/nuevas/TelefonicaWeb-Regular.ttf) format("truetype"), url(/assets/fonts/nuevas/TelefonicaWeb-Regular.svg#telefonicasans) format("svg");
}

@font-face {
    font-family: "TelefonicaSansBold";
    src: url(/assets/fonts/nuevas/TelefonicaWeb-Bold.eot);
    src: url(/assets/fonts/nuevas/TelefonicaWeb-Bold.eot?#iefix) format("embedded-opentype"), url(/assets/fonts/nuevas/TelefonicaWeb-Bold.woff2) format("woff2"), url(/assets/fonts/nuevas/TelefonicaWeb-Bold.woff) format("woff"), url(/assets/fonts/nuevas/TelefonicaWeb-Bold.ttf) format("truetype"), url(/assets/fonts/nuevas/TelefonicaWeb-Bold.svg#telefonicasansbold) format("svg");
}

@font-face {
    font-family: "SF Pro Display";
    src: url(/assets/fonts/nuevas/SF-Pro-Display-Light.otf) format('opentype');
}

@font-face {
    font-family: "SF Pro Text";
    src: url(/assets/fonts/nuevas/SF-Pro-Text-Medium.otf) format('opentype');
}

/* Colors & vars */
:root {
    --clr-primary: #914B93;
    --clr-primary-hover: #954B97;
    --clr-primary-disabled: #FEDBFF;
    --clr-secondary: #E9EAE8;
    --clr-blue-movistar: #007ACD;
    --clr-white: #FFF;
    --clr-text: #313235;
    --clr-text-footer: #433C3C;
    --clr-text-sub: #313235;
    --clr-tkt-open: #009C8C;
    --clr-tkt-resolution: #F28D15;
    --clr-tkt-close: #C7C4C4;
    --clr-tkt-cancel: #B63D1F;
    --clr-saldo-a-pagar: #E62E00;
    --clr-monto-a-pagar: #504F4F;
    --clr-saldo-al-dia: #5CB615;
    --clr-border: #D6D6D6;
    --clr-border-2: #DDD;
    --bg-noti: #FF0202;
    --height-header: 184px;
    --size-sm: 14px;
    --size-md: 16px;
    --size-lg: 24px;
    --size-xl: 32px;
    --font-bold: 900;
    --vel-trans: 0.4s;
    --border-radius: 4px;
    --lupaSize: 0px;
    --lupaTop: 0px;
    --lupaLeft: 0px;
    --lupaTooltipTop: 0px;
    --lupaTooltipLeft: 0px;
    --offsetX: 0px;
    --offSetY: 0px;
    --clr-title-richtext: #313235;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'TelefonicaLight', sans-serif;
}

body {
    color: var(--clr-text);
    font-size: var(--size-md);
}

.container .error-page h2,
.container .error-page p,
.container .error-page span {
    font-family: 'Roboto', 'TelefonicaLight', sans-serif !important;
}

.dash-gap {
    gap: 30px;
}

.dash-margin {
    margin: 16px 0;
}

/* TEXTOS */
.text-data {
    font-weight: var(--font-bold);
    color: var(--clr-text);
}

.text-subdata {
    font-size: var(--size-sm);
    color: #313235;
}

.text-secondary {
    font-size: var(--size-sm);
    color: #504F4F;
}

.text-monto {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 40px;
    color: var(--clr-monto-a-pagar);
}

    .text-monto.al-dia {
        color: var(--clr-saldo-al-dia);
    }

.dash-link {
    color: var(--clr-blue-movistar);
    font-weight: var(--font-bold);
    text-decoration: none;
}

    .dash-link.btn-disabled {
        opacity: .5;
    }

.link-notificaciones {
    color: #0071c5;
}

.dash-link:hover {
    color: var(--clr-blue-movistar);
    text-decoration: none;
}

.dash-link.dash-disabled {
    cursor: no-drop;
}

.dash-link.toOrders {
    font-weight:500;
    font-size:18px;
}

h2 {
    font-size: var(--size-lg);
    margin: 16px 0;
    font-weight: var(--font-bold);
}


/* BOTONES */
.btn-header {
    background-color: transparent;
    border: 2px solid #fff;
}

    .btn-header span {
        position: relative;
        top: 2px;
        margin-left: 8px;
        color: #fff;
    }

    .btn-header:hover,
    .btn-header:active {
        background-color: #fff;
        text-decoration: none;
    }

        .btn-header:hover span,
        .btn-header:active span {
            color: var(--clr-blue-movistar);
        }

    .btn-header:focus {
        outline: 0;
    }

    .btn-header.btn-ticket:hover svg path {
        fill: var(--clr-blue-movistar);
    }

.btn-b2b {
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--size-md);
    padding: 8px 16px 11px;
    text-decoration: none;
    transition: 0.4s;
}

    .btn-b2b svg,
    .btn-b2b i,
    .btn-b2b span {
        position: relative;
        top: -2px;
    }

    .btn-b2b span {
        margin-left: 8px;
    }

.btn-b2b-sm {
    font-size: var(--size-sm);
    padding: 6px 8px;
}

.btn-b2b-primary {
    background-color: var(--clr-primary);
    color: #fff;
    border: 1px solid var(--clr-primary);
}

    .btn-b2b-primary:hover,
    .btn-b2b-primary:active {
        background-color: #7C337E;
        border: 1px solid #7C337E;
    }

    .btn-b2b-primary:focus {
        outline: 0;
    }

.btn-b2b-secondary {
    background-color: #fff;
    color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
}

    .btn-b2b-secondary:hover,
    .btn-b2b-secondary:active {
        background-color: var(--clr-primary);
        border: 1px solid var(--clr-primary);
        color: #fff;
    }

        .btn-b2b-secondary:hover svg path,
        .btn-b2b-secondary:active svg path {
            fill: #fff;
        }

    .btn-b2b-secondary:focus {
        outline: 0;
    }

.btn-b2b-primary:disabled {
    background-color: #C796C9;
    border-color: #C796C9;
    cursor: not-allowed;
}

.btn-b2b-secondary:disabled {
    color: #C796C9;
    background-color: transparent;
    border-color: #C796C9;
    cursor: not-allowed;
}

    .btn-b2b-secondary:disabled svg path {
        fill: #C796C9;
    }

.btn-b2b-blue-movistar {
    background-color: var(--clr-blue-movistar);
    color: #fff;
    border: 1px solid var(--clr-blue-movistar);
}

    .btn-b2b-blue-movistar svg {
        margin-right: 8px;
    }

        .btn-b2b-blue-movistar svg path {
            fill: white;
        }

    .btn-b2b-blue-movistar:hover,
    .btn-b2b-blue-movistar:active {
        background-color: #E6F5FD;
        color: #005A99;
        border: 1px solid #005A99;
    }

        .btn-b2b-blue-movistar:hover svg path {
            fill: #005A99
        }

    .btn-b2b-blue-movistar:focus {
        outline: 0;
        color: #005A99;
        background-color: #E6F5FD;
        border: none;
    }

        .btn-b2b-blue-movistar:focus svg path {
            fill: #005A99;
        }
/* SPINNER */
.b2b-spinner {
    margin-right: 8px;
}

/* LISTAS */
.b2b-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

    .b2b-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        font-weight: var(--font-bold);
        color: var(--clr-blue-movistar);
        border-bottom: 1px solid #dddddd;
        cursor: pointer;
    }

        .b2b-list li:last-child {
            border: none
        }

        .b2b-list li a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--clr-blue-movistar);
            font-weight: var(--font-bold);
            width: 100%;
            text-decoration: none;
        }

            .b2b-list li a span i,
            .b2b-list li a span svg {
                margin-right: var(--size-md);
                width: var(--size-md);
                text-align: center;
            }

                .b2b-list li a span svg path {
                    fill: var(--clr-blue-movistar);
                }

/* MODAL */
.modal-dialog {
    max-width: 485px;
}

.modal-content {
    border-radius: 10px;
}

.modal-header-b2b {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--clr-blue-movistar);
    color: #fff;
    font-size: 20px;
    padding: 16px 36px;
    border-radius: 10px 10px 0 0;
}

    .modal-header-b2b span {
        position: absolute;
        top: -8px;
        right: 36px;
        cursor: pointer;
        font-size: 48px;
    }

.modal-body-b2b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 40px;
    background: #fff;
}

    .modal-body-b2b .modal-item-b2b {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }

        .modal-body-b2b .modal-item-b2b label {
            color: var(--clr-text);
        }

        .modal-body-b2b .modal-item-b2b input {
            width: 100%;
            font-weight: var(--font-bold);
            padding: 14px 12px;
            border-radius: 4px;
            border: 1px solid var(--clr-border);
            outline: 0;
        }

            .modal-body-b2b .modal-item-b2b input:focus {
                border-color: var(--clr-blue-movistar);
            }

            .modal-body-b2b .modal-item-b2b input::placeholder {
                color: #C9C9C9;
                font-weight: 400;
            }

.modal-footer-b2b {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--size-md);
    padding: 16px 0;
    background: #fff;
    border-radius: 0 0 10px 10px;
}

/*Dropdowm input modal*/
.modal-dropdown i {
    position: absolute;
    right: var(--size-md);
    top: 52px;
    color: var(--clr-blue-movistar);
    transition: 0.5s;
}

    .modal-dropdown i.fa-chevron-down {
        cursor: pointer;
    }

    .modal-dropdown i.clear-input {
        top: 54px;
        right: 58px;
        color: var(--clr-text);
        font-size: var(--size-sm);
        cursor: pointer;
    }

.modal-dropdown.show i.fa-chevron-down {
    transform: rotate(180deg);
}

.cuentas-list {
    position: absolute;
    top: 93px;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    border: 0;
    max-height: 0;
    background: #fff;
    border-radius: 4px;
    padding: 0 16px;
    transition: 0.4s;
    overflow: hidden;
    z-index: 99;
}

    .cuentas-list.list-all {
        position: relative;
        top: 0;
        max-height: 0;
        padding: 0;
        margin-top: var(--size-md);
    }

        .cuentas-list.list-all.show {
            max-height: 181px;
        }

.modal-dropdown.show .cuentas-list {
    max-height: 300px;
    padding: 16px 18px;
    border: 1px solid var(--clr-border);
    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
}

    .modal-dropdown.show .cuentas-list.no-result {
        max-height: 111px;
    }

.cuentas-list .cuenta-search {
    position: relative;
    width: 100%;
}

    .cuentas-list .cuenta-search input {
        position: relative;
        border-radius: 4px;
        border: 1px solid var(--clr-border);
        padding: 6px 8px 8px;
        margin-bottom: var(--size-md);
    }

    .cuentas-list .cuenta-search i {
        position: absolute;
        right: 10px;
        top: 11px;
        color: var(--clr-blue-movistar);
    }

        .cuentas-list .cuenta-search i.clear-input {
            top: 14px;
            right: 48px;
            color: var(--clr-text);
            font-size: var(--size-sm);
            cursor: pointer;
        }

    .cuentas-list .cuenta-search input:focus {
        border-color: var(--clr-blue-movistar);
    }

.cuentas-list ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    list-style: none;
    width: 100%;
    color: var(--clr-text);
    max-height: 202px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

    .cuentas-list ul li {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        cursor: pointer;
        width: 100%;
        border-radius: 4px;
    }

        .cuentas-list ul li span {
            padding: 0 8px;
        }

            .cuentas-list ul li span:nth-child(even) {
                font-size: var(--size-sm);
            }

        .cuentas-list ul li:hover,
        .cuentas-list ul li.active {
            background: var(--clr-secondary);
            font-weight: var(--font-bold);
        }

.listado li.active::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: var(--size-md);
    color: var(--clr-text);
}

.field-error-b2b,
.field-error-b2b:focus {
    border-color: var(--clr-saldo-a-pagar) !important;
}

/* TOOLTIP */
.white-tooltip-b2b {
    position: relative;
}

.tooltip-b2b .dash-tooltip {
    position: absolute;
    top: 0px;
    left: 32px;
    background: var(--clr-text);
    color: var(--clr-white);
    font-family: "SF Pro Text", 'TelefonicaLight';
    font-size: 12px;
    line-height: 20px;
    padding: 8px 8px 9px;
    border-radius: 8px;
    box-shadow: 0px 0px 7px rgba(42, 42, 60, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: all var(--vel-trans) cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10;
}

.tooltip-b2b:hover .dash-tooltip.tooltip-active {
    top: -48px;
    opacity: 1;
    pointer-events: auto;
}

.tooltip-b2b.submenu-item:hover .dash-tooltip.tooltip-active {
    top: -38px;
}

.tooltip-b2b.tooltip-down:hover .dash-tooltip.tooltip-active {
    top: 48px;
}

.tooltip-b2b.tooltip-right:hover .dash-tooltip.tooltip-active {
    top: 60%;
    left: 11%;
}

.tooltip-b2b .dash-tooltip::before {
    content: '';
    position: absolute;
    height: 10px;
    width: 10px;
    background: var(--clr-text);
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    transition: all var(--vel-trans) cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tooltip-b2b.tooltip-down .dash-tooltip::before {
    bottom: 32px;
}

.tooltip-b2b.tooltip-right .dash-tooltip::before {
    left: 0;
    top: 36%;
}

.tooltip-b2b:hover .dash-tooltip {
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}

/*TOOLTIP NCND */
.tooltip-b2b.ncnd .dash-tooltip {
    width: 310px;
    left: -99px;
    padding: 8px 8px 9px;
    border-radius: 8px;
    z-index: 10;
}

.tooltip-b2b.ncnd:hover .dash-tooltip {
    top: -38px;
}

.tooltip-b2b.ncnd .dash-tooltip::before {
    bottom: 0;
    top: 31px;
}


/* FIN TOOLTIP */

/************************* CSS LUPA SHADOW **********************/
.lupa-tooltip {
    display: flex;
    align-items: center;
    width: fit-content;
    top: var(--lupaTooltipTop);
    left: var(--lupaTooltipLeft);
    background-color: #fff;
    cursor: default;
    padding: 8px 15px 8px 24px;
    position: absolute;
    z-index: 2;
    font-size: var(--size-md);
    border-radius: 10px;
}

#lupa-tooltip button:focus {
    outline: none;
}

#lupa-tooltip-msg {
    margin-bottom: 5px;
    margin-right: 20px;
}

.item-lupa-active {
    z-index: 9999;
}

#lupa-shadow {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    background: radial-gradient(1px at var(--lupaLeft) var(--lupaTop), transparent 0px, transparent var(--lupaSize), rgb(0 0 0 / 60%) 0px);
}

.highlighted-element {
    box-shadow: 0px 0px 20px 16px var(--clr-blue-movistar);
    background-color: white;
    z-index: 9999;
}

.shortcut-step1 {
    padding: 10px 12px 0px 0px;
    height: 100px;
}

.shortcut-step2 {
    padding: 10px 12px 10px 10px;
    margin-left: 25px;
    scroll-behavior: smooth;
}

.suspender-linea-focus {
    background-color: unset;
}

.modalBack {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Opacidad del fondo */
    z-index: 9998; /* Debe estar por encima de otros elementos */
}

.clickeable {
    z-index: 9999;
}

.focusLupa {
    position: relative;
}
/****************************************************************/

/* RESTRICCIONES */
.btn-off a {
    color: var(--clr-white) !important;
}

.btn-off svg path {
    fill: var(--clr-white) !important;
}
/* FIN RESTRICCIONES */

.input-buscador-ico {
    color: #50535a;
    border: none;
    background-color: #e9eae8;
    background-position: calc(100% - 15px) center;
    background-repeat: no-repeat;
    background-clip: padding-box;
    border: 1px solid transparent;
    font-family: "TelefonicaLight", sans-serif;
    font-size: 16px;
    padding: 0 40px 0 20px;
    border-radius: 5px;
    min-height: 48px;
    -webkit-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
}

/* MODAL ALIAS */
#ModalGestionAlias {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

    #ModalGestionAlias label {
        margin: 0;
    }
/* FIN MODAL ALIAS */

/* NEW POPUPS */
#popup {
    display: none;
    align-items: center;
    justify-content: center;
    width: 680px;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.redactar-gestion-holder .redactar-box {
    box-shadow: 3px 3px 20px 3px #00000075;
}

    .redactar-gestion-holder .redactar-box header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding: 13px 0;
    }

        .redactar-gestion-holder .redactar-box header .close-min {
            position: absolute;
            top: 0;
            right: 0;
            padding: 12px 19px;
        }

            .redactar-gestion-holder .redactar-box header .close-min a {
                font-size: 17px;
            }



    .redactar-gestion-holder .redactar-box footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 23px 0;
    }

#mainPopup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    #mainPopup svg {
        margin: 29px 0 22px;
    }

.mensaje-fuerte {
    font-size: 20px;
    padding: 10px 0 15px;
}

.mensaje-debil {
    margin-bottom: 6px;
}
/*V2*/
.redactar-gestion-holder .redactar-box .popup-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 13px 0;
}

    .redactar-gestion-holder .redactar-box .popup-header .close-min {
        position: absolute;
        top: 0;
        right: 0;
        padding: 12px 19px;
    }

        .redactar-gestion-holder .redactar-box .popup-header .close-min a {
            color: var(--clr-blue-movistar);
            font-size: x-large;
        }

.redactar-gestion-holder .redactar-box .popup-section .popup-icon {
    margin: 15px 0 0 !important;
}

.redactar-gestion-holder .redactar-box .popup-section .mensaje-fuerte {
    font-size: 20px;
    padding: 10px 0 15px;
    padding: 0 25px;
}

.redactar-gestion-holder .redactar-box .popup-section .mensaje-debil {
    color: #86888C;
    margin-bottom: 6px;
    padding: 0 25px;
}

.redactar-gestion-holder .redactar-box .popup-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

    .redactar-gestion-holder .redactar-box .popup-footer button {
        background-color: var(--clr-blue-movistar);
        border: 1px solid var(--clr-blue-movistar);
        min-width: 120px;
    }
/*FIN V2*/
/*FIN POPUP FACTU*/
#popux-box-shadow,
#popux-box-shadow-tkt,
#popup-box-shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    background: rgba(49, 50, 53, 0.6);
}

.popux {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: #fff;
    width: 610px;
    padding: 2.5rem;
    box-shadow: 0 1rem 1.875rem rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    transition: .4s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    padding: 3.25rem 1.25rem 3rem;
    visibility: visible;
}

    .popux #disposex {
        position: absolute;
        right: 0;
        top: 0;
        margin: 0.625rem;
        padding: 0.625rem;
    }

    .popux h3 {
        font-family: "Roboto", sans-serif !important;
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 2rem;
        color: #313235;
        margin-top: 1.125rem
    }

    .popux p {
        font-family: "Roboto", sans-serif !important;
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.5rem;
        color: #71768B;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .popux a {
        font-family: "Roboto", sans-serif !important;
    }
/*FIN POPUP FACTU*/
/* FIN NEW POPUPS */
.px-36 {
    padding: 10px 36px;
}

.th-fit-icon {
    width: 4rem;
    padding: 0.75rem 0 !important;
}

/* BANNER ERROR NC */
.errorNc {
    display: none;
    padding: 35px 34px;
}

    .errorNc div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 48px 64px;
        gap: 24px;
        border: 1px solid #DDDDDD;
        border-radius: 16px;
        background: #FFFFFF;
    }

    .errorNc p {
        font-family: 'SF Pro Display';
        font-size: 24px;
        line-height: 32px;
        margin: 0;
    }

    .errorNc span {
        font-family: 'Roboto';
        font-size: 18px;
        line-height: 24px;
        color: #86888C;
        margin-bottom: 16px;
    }

    .errorNc button {
        background-color: var(--clr-blue-movistar);
        border-color: var(--clr-blue-movistar);
        font-family: 'Roboto';
        font-size: 18px;
        line-height: 24px;
    }

        .errorNc button:hover {
            background-color: #0356C9;
            border-color: #0356C9;
        }
/* FIN BANNER ERROR NC */

/* SKELETON LOADING */
.skeleton {
    opacity: .7;
    animation: skeleton-loading 1s infinite alternate;
}

.skeleton-accesos-directos {
    width: 285px;
    height: 87px;
    border-radius: 8px;
    margin-right: 10px;
}

.skeleton-card {
    position: relative;
    width: 498px;
    height: 362px;
    border-radius: 8px;
}

.skeleton-title {
    position: relative;
    width: 97px;
    height: 8px;
    left: -35px;
    border-radius: 8px;
}

.skeleton-text {
    width: 100%;
    height: 8px;
    border-radius: 8px;
    margin: 16px 0;
}

    .skeleton-text.text-tkt {
        height: 11px;
    }

    .skeleton-text:last-child {
        width: 80%;
        margin-bottom: 0;
    }

.skeleton-menu {
    height: 12px;
}

.skeleton-banner {
    width: 100%;
    border-radius: 8px;
}

.skeleton-calipso {
    width: 90px !important;
}

.skeleton-tickets {
    height: 119px;
}

.skeleton-chip {
    height: 36px;
    width: 70px;
    border-radius: 24px;
}

.skeleton-text.skeleton-chip-service {
    width: 9.875rem;
    margin: 1rem 1rem;
    flex-shrink: 0;
}

.skeleton-circle {
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

.skeleton-circle-lg {
    height: 97px;
    width: 97px;
    border-radius: 50%;
}

.skeleton-tkt {
    height: 208px;
    width: 100%;
    border-radius: 4px;
}

.skeleton-filter {
    height: 40px;
    width: 100%;
    border-radius: 6px;
}

.skeleton-shortcut {
    height: 108px;
    border-radius: 8px;
}

.skeleton-form,
.skeleton-form-sm,
.skeleton-form-lg {
    height: 48px;
    width: 300px;
    border-radius: 8px;
    margin: 32px 0;
}

.skeleton-form-sm {
    width: 124px;
}

.skeleton-form-lg {
    height: 85px;
    width: 543px;
    margin: 32px 0 0;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 70%);
    }

    100% {
        background-color: hsl(200, 20%, 95%);
    }
}
/* FIN SKELETON LOADING */

/* CONFIG NOTIFICACIONES */
.row-config {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
}

    .row-config label {
        margin: 0;
        cursor: pointer;
    }

input[type="checkbox"].b2b-switch {
    position: relative;
    /*width: 34px;
    height: 14px;
    background: rgb(176, 182, 202);*/
    outline: none;
    transition: all 0.2s ease-in 0s;
    appearance: none;
    -webkit-appearance: none;
    /*border-radius: 40px;*/
    cursor: pointer;
    /* == estilos actuales == */
    width: 60px;
    height: 34px;
    border-radius: 34px;
    background-color: #ccc;
}

input:checked[type="checkbox"].b2b-switch {
    background: rgb(209, 213, 228);
    /* == estilos actuales == */
    background-color: #2196f3;
}

input[type="checkbox"].b2b-switch:before {
    content: '';
    position: absolute;
    /*top: 1px;*/
    bottom: 0px;
    /*right: 21px;
    width: 20px;
    height: 20px;*/
    margin: -4px;
    border-radius: 50%;
    transition: all 0.2s ease-in 0s;
    box-shadow: rgb(0 0 0 / 30%) 1px 1px 2px;
    /*background-color: rgb(209, 213, 228);*/
    /* == estilos actuales == */
    height: 26px;
    width: 26px;
    right: 31px;
    top: 8px;
    background-color: #fff;
}

input:checked[type="checkbox"].b2b-switch:before {
    /*right: 1px;
    background-color: var(--clr-blue-movistar);*/
    /* == estilos actuales == */
    right: 10px;
}

/* FIN CONFIG NOTIFICACIONES */

/* RICHTEXT */
#popup-richtext {
    width: 1250px;
    padding: 30px 44px 20px;
}

    #popup-richtext .title-richtext {
        font-family: 'Roboto';
        font-weight: 700;
        font-size: 28px;
        line-height: 32px;
        margin: 0;
    }

    #popup-richtext .richText .richText-editor,
    #popup-richtext .richText .richText-editor p,
    #popup-richtext .richText .richText-editor h1,
    #popup-richtext .richText .richText-editor h2,
    #popup-richtext .richText .richText-editor h3,
    #popup-richtext .richText .richText-editor h4 {
        font-family: 'TelefonicaLight', sans-serif !important;
        font-weight: 400;
        color: #313235;
        margin: 0;
        text-align: left;
    }

        #popup-richtext .richText .richText-editor h1,
        #popup-richtext .richText .richText-editor h2,
        #popup-richtext .richText .richText-editor h3,
        #popup-richtext .richText .richText-editor h4 {
            color: var(--clr-title-richtext);
        }
/* FIN RICHTEXT */


/* BUTTON */
.button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border: 0;
    outline: 0;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 500;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: 0.4s;
    overflow: hidden;
    background-color: transparent;
    min-width: 138px;
    user-select: none;
}

    .button span {
        font-family: "Roboto", sans-serif !important;
    }

    .button:focus {
        outline: 0 !important;
    }

.button-table {
    margin: 0 auto !important;
}

.button.button-sm span {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.button.button-md span {
    font-size: 1rem;
    line-height: 1.5rem;
}
/* BUTTON CIRCLE */
.button.button-circle {
    border-radius: 50%;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #fff;
    outline: 0;
    min-width: 40px !important;
}

    .button.button-circle:hover svg path,
    .button.button-circle:active svg path {
        fill: #007acd;
    }

    .button.button-circle:active {
        border-color: #007acd;
    }

    .button.button-circle.button-table:hover svg path,
    .button.button-circle.button-table:active svg path {
        fill: #005a99;
    }

    .button.button-circle.button-table:active {
        border-color: #005a99;
    }
/* BUTTON PRIMARY */
.button.button-primary {
    background-color: #007acd;
    border: 1px solid #007acd;
    color: #fff;
    outline: 0;
}

    .button.button-primary svg path {
        fill: #fff;
    }

    .button.button-primary .text-content span {
        color: #fff;
    }

    .button.button-primary:hover .text-content span,
    .button.button-primary:disabled .text-content span {
        color: #005a99;
    }

    .button.button-primary:hover,
    .button.button-primary:active,
    .button.button-primary:disabled,
    .button.button-circle:disabled {
        background-color: #e6f5fd;
        color: #005a99;
    }

    .button.button-primary:hover,
    .button.button-primary:disabled,
    .button.button-circle:disabled {
        border-color: #e6f5fd;
    }

    .button.button-primary:active,
    .button.button-primary:disabled {
        border-color: #005a99;
    }

        .button.button-primary:hover svg path,
        .button.button-primary:active svg path,
        .button-primary:disabled svg path,
        .button.button-circle:disabled svg path {
            fill: #005a99;
        }
/* BUTTON SECONDARY */
.button.button-secondary {
    background-color: #fff;
    color: #007acd;
    border: 1.5px solid #007acd;
    outline: 0;
}

    .button.button-secondary .text-content span {
        color: #005a99;
    }

    .button.button-secondary:hover .text-content span {
        color: #fff;
    }

    .button.button-secondary:hover {
        background-color: #005a99;
        color: #fff;
    }

    .button.button-secondary:active {
        border-color: #005a99;
        color: #005a99;
        background-color: #fff;
    }

    .button.button-secondary:hover svg:not(.not-hover) path {
        fill: #fff;
    }

    .button.button-secondary:active svg:not(.not-hover) path {
        fill: #005a99;
    }

.button .text-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 1;
    padding: 0.75rem 1.75rem;
    transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1), transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.button.button-secondary .text-content {
    padding: 0.75rem;
}

.button.button-sm .text-content {
    padding: 0.375rem 0 !important;
}

.button.button-md .text-content {
    padding: 0.5rem 1rem 0.5625rem !important;
}

.button .loading-content {
    display: inline-flex;
    gap: 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1), transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    background: #fff;
    width: 100%;
}

.button.button-sm .loading-content {
    padding: 0.375rem 0 !important;
}

.button.button-primary .loading-content {
    background: #007acd !important;
}

.button .loading-content svg {
    flex-shrink: 0;
    animation: mistica-rotator 1.4s linear infinite;
}

    .button .loading-content svg circle {
        stroke-dasharray: 187;
        stroke-dashoffset: 0;
        transform-origin: center;
        animation: mistica-dash 1.4s ease-in-out infinite;
    }

.button.button-loading {
    pointer-events: none !important;
}

    .button.button-loading .loading-content {
        transform: translateY(0);
        opacity: 1;
    }

    .button.button-loading .text-content {
        transform: translateY(-2rem);
        opacity: 0;
    }
/* BUTTON LINK */
.button.button-link {
    justify-content: flex-start;
    color: #007acd;
}
/* BUTTON CHIP */
.button.button-chip {
    background-color: #E6F5FD;
    border-radius: 999px;
    color: #005A99;
    padding: 4px 12px;
    min-width: 93px;
    border: 1px solid #005A99;
}

    .button.button-chip span {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .button.button-chip:hover span {
        color: #FFF;
    }

    .button.button-chip:disabled {
        background-color: #F6F6F6;
        border-color: #F6F6F6;
        color: #86888C;
        opacity: 1 !important;
    }

    .button.button-chip:hover {
        background-color: #005A99;
        color: #FFF;
    }

        .button.button-chip:hover svg path {
            fill: #FFF;
        }

.button:disabled {
    opacity: .5 !important;
    pointer-events: none !important;
}

.button.button-circle:disabled {
    background-color: transparent;
    border: 1px solid #005A99;
}

button.button-chip-kite {
    background-color: #E6F5FD;
    border-radius: 999px;
    color: #005A99;
    min-width: 93px;
    cursor: default;
}

.button-chip-kite span {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px;
}

.button-chip-kite:disabled {
    background-color: #F6F6F6;
    border-color: #F6F6F6;
    color: #86888C;
    opacity: 1 !important;
}
/*FIN BUTTON */

/* MODAL NUEVOS */
.link-modal {
    color: #007ACD;
    font-weight: 600;
}


/* NEW CALENDAR */
.calendar-container {
    margin-top: 25px;
    max-width: 494px;
}

    .calendar-container .calendar-title {
        font-size: 14px;
        line-height: 20px;
        color: #757575;
        margin-left: 10px;
    }

    .calendar-container .months-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        place-items: center;
        padding: 32px 26px;
        gap: 27px;
        border: 1px solid #D1D5E4;
        border-radius: 4px;
        margin-top: 24px;
    }

        .calendar-container .months-container.months-container-dash {
            padding: 16px 13px;
            gap: 13px;
        }

    .calendar-container .backAnios {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        padding: 0 10px;
    }

        .calendar-container .backAnios p {
            font-size: 22px;
            line-height: 24px;
            margin: 0;
        }

        .calendar-container .backAnios.backAniosDashboard p {
            font-size: 18px;
        }

        .calendar-container .backAnios .nav-year {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .calendar-container .backAnios button:last-child {
            justify-content: flex-end !important;
        }

#btn-prev-year-calipso,
#btn-next-year-calipso {
    font-size: 14px;
}
/* FIN NEW CALENDAR */
/* TOOLTIPS STYLES */
[tooltip] {
    position: relative;
}


    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        font-size: 12px;
        line-height: 20px;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }

    [tooltip]::before {
        content: "";
        border: 5px solid transparent;
        z-index: 1001;
    }

    [tooltip]::after {
        content: attr(tooltip);
        font-family: "SF Pro Text", 'TelefonicaLight';
        text-align: center;
        min-width: 3em;
        max-width: 23em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 8px 8px 9px;
        border-radius: 8px;
        box-shadow: 0px 0px 7px rgb(42 42 60 / 20%);
        text-shadow: 0px -1px 0px rgb(0 0 0 / 40%);
        background: #4C4D52;
        color: #fff;
        z-index: 1000;
    }


    .tooltip-father:hover [tooltip]::before, [tooltip]:hover::before,
    .tooltip-father:hover [tooltip]::after, [tooltip]:hover::after {
        display: block;
    }

[tooltip=""]::before,
[tooltip=""]::after {
    display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #4C4D52;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -0.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #4C4D52;
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, 0.5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #4C4D52;
    left: calc(0em - 5px);
    transform: translate(-0.5em, -50%);
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-0.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #4C4D52;
    right: calc(0em - 5px);
    transform: translate(0.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(0.5em, -50%);
}


/* KEYFRAMES */
@keyframes tooltips-vert {
    to {
        opacity: 0.9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: 0.9;
        transform: translate(0, -50%);
    }
}

/* FX All The Things */
.tooltip-father:hover [tooltip]:not([flow])::before, [tooltip]:not([flow]):hover::before,
.tooltip-father:hover [tooltip]:not([flow])::after, [tooltip]:not([flow]):hover::after,
.tooltip-father:hover [tooltip][flow^="up"]::before, [tooltip][flow^="up"]:hover::before,
.tooltip-father:hover [tooltip][flow^="up"]::after, [tooltip][flow^="up"]:hover::after,
.tooltip-father:hover [tooltip][flow^="down"]::before, [tooltip][flow^="down"]:hover::before,
.tooltip-father:hover [tooltip][flow^="down"]::after, [tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
}

.tooltip-father:hover [tooltip][flow^="left"]::before, [tooltip][flow^="left"]:hover::before,
.tooltip-father:hover [tooltip][flow^="left"]::after, [tooltip][flow^="left"]:hover::after,
.tooltip-father:hover [tooltip][flow^="right"]::before, [tooltip][flow^="right"]:hover::before,
.tooltip-father:hover [tooltip][flow^="right"]::after, [tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
}

/* WHITE TOOLTIPS*/

.white-tooltip {
    position: absolute;
    top: 1rem;
    left: 0rem;
    width: 100%;
    padding: 0.5rem 1rem;
    z-index: 9;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-shadow: 0px 0px 7px rgb(42 42 60 / 20%);
    border-radius: 8px;
    min-width: max-content;
    visibility: hidden;
}

    .white-tooltip > p {
        font-family: 'Roboto';
        color: var(--clr-text);
        margin: 0;
        font-weight: 400;
        font-size: 16px;
    }

    .white-tooltip.white-tooltip__whit-content > p span.info-tipo-tkt {
        font-weight: 600;
    }

    .white-tooltip.white-tooltip__whit-content > p span.example-tipo-tkt {
        font-weight: 400;
    }

/* FIN TOOLTIP STYLES */

/* DETALLE DE LLAMADAS */
.detalle-consumos__heading {
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    margin-top: 1rem;
    padding: 1rem 2rem .5rem 0.5rem;
}

.detalle-consumos__periodos-select {
    background-color: transparent;
    color: #007ACD;
    border: none;
    font-weight: 600;
    margin-left: 1rem;
}

button.detalle-consumos__periodos-select:focus {
    outline: none !important;
    border: none !important;
}

.detalle-consumos__periodos-select:hover {
    cursor: pointer;
}

.detalle-consumos__periodos-select > svg {
    transition: all 0.2s ease-in-out;
    transform: rotate(180deg);
}

    .detalle-consumos__periodos-select > svg.active {
        transform: rotate(0deg);
    }

.detalle-consumos__cambio-periodo-container {
    position: relative;
    margin-left: 2rem;
}

.detalle-consumos__periodos-list {
    position: absolute;
    will-change: transform;
    top: -1.5rem;
    right: -32px;
    transform: translate3d(-24px, 55px, 0px);
    display: none;
    z-index: 9;
    border: #dddddd solid 1px;
    border-radius: 4px;
    background-color: #fff;
    padding: 0.5rem 0;
}

    .detalle-consumos__periodos-list > ul {
        list-style: none;
    }

    .detalle-consumos__periodos-list.show {
        display: block;
    }


.period-item {
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #000000;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

    .period-item:hover {
        background-color: #F2F4FF;
        font-weight: 600;
    }

    .period-item.active {
        background-color: #fff;
        color: #007ACD;
    }

#comboUltimosCiclos {
    display: flex;
    margin-top: .8rem;
}

.detalle-consumos__chip {
    background: #E6F5FD;
    border-radius: 24px;
    padding: 0.3rem 1rem;
    font-weight: 600;
    color: #031A34;
}

    .detalle-consumos__chip.empty-period {
        background: white;
        color: #D10000;
        padding: 0;
        width:260px;
    }

    .detalle-consumos__chip.hide {
        background: white;
        color: white;
    }


/* SCROLL BAR */
::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
    background: white;
}

::-webkit-scrollbar-thumb {
    background: #B0B6CA;
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: white;
    box-shadow: none;
}

/* NEW TICKET */
.popup-tkt {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fff;
    padding: 30px 25px 27px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    transition: 0.4s;
    visibility: hidden;
    width: 564px;
}

    .popup-tkt * {
        font-family: 'Roboto', sans-serif !important;
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
    }

    .popup-tkt.active {
        top: 50%;
        visibility: visible;
    }

    .popup-tkt .popup-header,
    .popup-tkt .popup-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .popup-tkt .popup-footer {
        position: relative;
    }

        .popup-tkt .popup-footer > div > .white-tooltip {
            top: -2.5rem;
            left: -5.5rem;
        }

        .popup-tkt .popup-footer > div > .svg-tooltip:hover ~ .white-tooltip {
            visibility: visible;
        }

    .popup-tkt .popup-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4px;
        margin: 16px 0;
        overflow-y: auto;
        padding-right: 8px;
        height: unset;
    }

    .popup-tkt h2 {
        font-size: 24px;
        line-height: 20px;
        font-weight: 500;
        color: #757575;
        margin: 0;
    }

    .popup-tkt h3 {
        font-weight: 500;
        color: #031A34;
        margin: 0;
    }

        .popup-tkt h3 b {
            color: #757575;
        }

    .popup-tkt ul {
        display: flex;
        gap: 16px;
        margin: 22px 0 0;
    }

        .popup-tkt ul li {
            display: flex;
            align-items: center;
            gap: 6px;
        }

            .popup-tkt ul li input[type="radio"] {
                width: 20px;
                height: 20px;
                cursor: pointer;
            }

            .popup-tkt ul li label {
                font-size: 14px;
                font-weight: 500;
                color: #757575;
                margin: 0;
                cursor: pointer;
            }

    .popup-tkt .popup-content .popup-row {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
    }

    .popup-tkt select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

        .popup-tkt select::-ms-expand {
            display: none;
        }

    .popup-tkt a {
        font-weight: 500;
        color: #007ACD;
        text-decoration: none;
    }

.clasification-dropdown {
    width: 100%;
    position: relative;
}

    .clasification-dropdown svg {
        position: absolute;
        top: 8px;
        right: 0;
        margin: 19px 19px 17px;
        z-index: -1;
    }

.popup-item {
    width: 100%;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 14px 16px 13px;
    background-color: transparent;
    outline: 0;
    max-height: 47px;
    margin-top: 8px;
}

.error-tkt {
    border-color: #ec130e !important;
}

.popup-item.textarea-item {
    resize: none;
    height: 79px;
    max-height: 79px;
}

.row-attached {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    padding: 9px 16px;
    background: #F6F6F6;
    border: 1px dashed #C4C4C4;
    border-radius: 6px;
    width: 100%;
}

    .row-attached span {
        font-size: 14px;
        font-weight: 500;
        color: #031A34;
    }

    .row-attached button {
        border: 1px solid #4E5259;
    }

.helper-attached {
    font-size: 14px;
    color: #757575;
    margin: 0;
}

.error-helper-text {
    color: #ec130e;
    opacity: 0;
    height: 20px;
}

    .error-helper-text.show-error {
        opacity: 1;
        margin: 4px 0;
    }

input.error-helper-text {
    color: #031a34;
    border: 1px solid #ec130e;
}

.chip-adjunto {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    background: #FFFFFF;
    color: #313235;
    border: 1px solid #ddd;
    border-radius: 1.5rem;
    padding: 0.375rem 2.125rem 0.375rem 0.75rem;
    max-width: 165px;
    margin: .5rem 0 0;
}

    .chip-adjunto p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0;
    }

    .chip-adjunto svg {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

/* MENSAJE OK|ERROR DESDE EL POPUP NUEVO TICKET */
.popup-tkt.popup-tkt-aux {
    border-radius: 5px;
    width: 492px;
    height: auto;
    padding: 8px 10px;
}

    .popup-tkt.popup-tkt-aux .popup-header .button-circle {
        padding: 10px;
    }

    .popup-tkt.popup-tkt-aux .popup-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 8px;
        height: auto !important;
        overflow: hidden;
        padding: 0 52px;
    }

        .popup-tkt.popup-tkt-aux .popup-content svg {
            align-self: center;
        }

        .popup-tkt.popup-tkt-aux .popup-content h2 {
            font-size: 24px;
            font-weight: 500;
            line-height: 20px;
            color: #031A34;
            margin: 0;
            white-space: nowrap;
        }

        .popup-tkt.popup-tkt-aux .popup-content h3 {
            font-family: "Roboto";
            font-size: 18px;
            font-weight: 500;
            line-height: 20px;
            color: #757575;
            margin: 0;
        }

        .popup-tkt.popup-tkt-aux .popup-content p {
            font-size: 16px;
            line-height: 20px;
            color: #757575;
            margin: 12px 0;
        }

            .popup-tkt.popup-tkt-aux .popup-content p b {
                font-family: "Roboto";
                font-weight: 500;
            }

        .popup-tkt.popup-tkt-aux .popup-content button {
            margin: 12px 0;
        }

/* MEDIA QUERIES PARA POPUP TKT*/
@media screen and (max-width: 1600px) {
    .popup-tkt .popup-content {
        height: 578px;
    }
}

@media screen and (max-width: 1366px) {
    .popup-tkt .popup-content {
        height: 432px;
    }
}

/* ANIMATIONS */
@keyframes mistica-rotator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(270deg);
    }
}

@keyframes mistica-dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        transform: rotate(450deg);
    }
}

/* NOTIFICATION BOTTOM RIGHT */
.notif-b2b {
    position: absolute;
    right: 30px;
    bottom: 30px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    /*z-index: 999;*/
}

    .notif-b2b .notif-b2b-x {
        position: absolute;
        right: 0;
        margin: 13px;
        cursor: pointer;
    }

    .notif-b2b .notif-b2b-content {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 20px;
    }

        .notif-b2b .notif-b2b-content .notif-b2b-msj {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
        }

            .notif-b2b .notif-b2b-content .notif-b2b-msj h4 {
                font-family: "Roboto";
                font-weight: 500;
                font-size: 14px;
                line-height: 24px;
                color: #031A34;
                margin: 0;
            }

            .notif-b2b .notif-b2b-content .notif-b2b-msj p {
                font-family: "Roboto";
                font-size: 12px;
                line-height: 18px;
                color: #757575;
                margin: 0;
            }

                .notif-b2b .notif-b2b-content .notif-b2b-msj p b {
                    font-family: "Roboto";
                    font-weight: 500;
                }

            .notif-b2b .notif-b2b-content .notif-b2b-msj button {
                margin-top: 6px;
            }

/* PANTALLA PARA RESOLUCION MOVIL */
#landing-mobile {
    margin: 1rem;
    padding-bottom: 76px;
    box-sizing: border-box;
}
    /* Tengo que hacer esto porque sino toma la fuente del selector universal */
    #landing-mobile * {
        font-family: 'Roboto';
        font-style: normal;
    }

    #landing-mobile .lm-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 76px;
    }

        #landing-mobile .lm-container .lm-top {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 66px;
            /* Asegura que lm-top no ocupe más espacio del necesario */
            flex-shrink: 0;
        }

            #landing-mobile .lm-container .lm-top h2 {
                font-weight: 700;
                font-size: 24px;
                line-height: 32px;
                color: #313235;
            }

            #landing-mobile .lm-container .lm-top #primerLanding {
                font-weight: 300;
                font-size: 32px;
                line-height: 40px;
                color: #313235;
            }

            #landing-mobile .lm-container .lm-top p {
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
                color: #86888C;
            }

        #landing-mobile .lm-container .fixed-bottom button span {
            font-weight: 700;
            font-size: 16px;
            line-height: 24px;
            color: #FFF;
        }

.btn-mobile-view {
    bottom: 1rem;
    left: 1rem;
    width: calc(100% - 2rem);
    box-sizing: border-box;
}

.a-all-width {
    display: block;
    background-color: #ffffff;
    text-align: center;
    padding: 0.35rem 1rem;
    cursor: pointer;
    text-decoration: none;
}

    .a-all-width span {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #007ACD;
    }

/* ONBOARDING */
.popup-Onboarding {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fff;
    padding: 30px 40px 27px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    transition: 0.4s;
    visibility: hidden;
    width: 583px;
    height: 473px;
}

    .popup-Onboarding * {
        font-family: 'Roboto', sans-serif !important;
        font-size: 16px;
        line-height: 10px;
        font-weight: 400;
    }

    .popup-Onboarding.active {
        top: 50%;
        visibility: visible;
    }

    .popup-Onboarding .popup-header {
        display: flex;
        justify-content: right;
        align-items: center;
    }

    .popup-Onboarding .popup-footer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .popup-Onboarding .popup-footer {
        position: relative;
    }

        .popup-Onboarding .popup-footer > div > .white-tooltip {
            top: -2.5rem;
            left: -5.5rem;
        }

        .popup-Onboarding .popup-footer > div > .svg-tooltip:hover ~ .white-tooltip {
            visibility: visible;
        }

    .popup-Onboarding .popup-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4px;
        margin: 16px 0;
        overflow-y: auto;
        padding-right: 8px;
        height: unset;
    }

    .popup-Onboarding span {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #86888C;
    }

    .popup-Onboarding h3 {
        font-weight: 300;
        font-size: 32px;
        line-height: 40px;
        color: #504F4F;
    }

    .popup-Onboarding .popup-content .popup-row {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
    }
/************************* CSS LUPA ONBOARDING **********************/
.lupa-onboarding-tooltip {
    display: flex;
    align-items: center;
    width: fit-content;
    top: var(--lupaOnboardingTooltipTop);
    left: var(--lupaOnboardingTooltipLeft);
    background-color: #fff;
    cursor: default;
    padding: 8px 15px 8px 24px;
    position: absolute;
    z-index: 99;
    font-size: var(--size-md);
    border-radius: 10px;
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px;
    line-height: 15px;
    font-weight: 400;
    width: 350px;
}

#lupa-onboarding-tooltip button:focus {
    outline: none;
}

#lupa-onboarding-tooltip-msg {
    margin-bottom: 5px;
    margin-right: 20px;
}

.lupa-onboarding-tooltip-msg span {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #86888C;
    font-family: 'Roboto', sans-serif !important;
}

.item-onboarding-lupa-active {
    box-shadow: 0px 0px 1px;
    background-color: white;
    z-index: 9999;
    height: 40px;
}

#lupa-onboarding-shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9997;
    background: rgba(49, 50, 53, 0.6);
}

.focusLupa-onboarding {
    position: relative;
}

.icono-excel {
    background-image: url(/assets/img/excel_detalle_solid.svg);
    height: 18px;
    width: 18px;
    margin-top: 8px;
    display: inline-block;
}

#descargaXlsx:hover .icono-excel {
    background-image: url(/assets/img/excel_detalle_regular.svg);
}

.icono-excel-reg {
    background-image: url(/assets/img/excel_detalle_regular.svg);
    height: 18px;
    width: 18px;
    margin-top: 8px;
    display: inline-block;
}
/****************************************************************/