@font-face {
    font-family:'Santander';
    src: url('../../../../fonts/fonts/SantanderMicroText.otf');
    font-weight:normal;
    font-style:normal;
    font-display:block;
}

body {
    font-family:'Santander', Arial, sans-serif !important;
    line-height:1.5em !important;
}

:root {
    --mibo-purple:#993366;
    --mibo-purple-strong:#732645;
    --mibo-purple-text:#ffffff;
    --mibo-opaque:#888;
    --mibo-solid:#fff;
    --mibo-solid-text:#333;
    --mibo-solid-hover:#eee;
    --mibo-solid-hover-text:#333;
    --mibo-round:6px;
    --mibo-shadow:0 3px 5px rgba(0,0,0,0.15);

    --mibo-action-size:22px;

    --mibo-font-normal:14px;
    --mibo-transition:0.3s;
}

mibo-prestacion {
    display:block;
    position:relative
}
    mibo-prestacion label {
        width: 100%;
        padding: 10px 40px 10px 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    mibo-prestacion a {
        display: flex;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -15px;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        line-height: 1;
        background: #fff;
        color: #111 !important;
        border-radius: 4px;
        font-size: 16px;
    }
mibo-prestacion-add {
    display:block;
    position:relative
}
    mibo-prestacion-add input {
        width: 100%;
        padding: 10px 40px 10px 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    mibo-prestacion-add a {
        display: flex;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -15px;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        line-height: 1;
        background: #222;
        border-radius: 4px;
        font-size: 26px;
    }

mibo-actions {
    display:block;
    position:relative;
    pointer-events:none;
}
    mibo-actions::before {
        display:flex;
        align-items:center;
        justify-content:center;
        content:"···";
        background:var(--mibo-purple);
        color:var(--mibo-purple-text);
        text-align:center;
        width:var(--mibo-action-size);
        height:var(--mibo-action-size);
        font-size:round(up, calc( var(--mibo-action-size) * 0.7 ));
        border-radius:100px;
        margin:0 auto;
        cursor:pointer;
        pointer-events:all;
        line-height:0;
    }
    mibo-actions select {
        display:none;
        opacity:0;
        pointer-events:all;
        position:absolute;
        left:50%; 
        top:50%;
        width:var(--mibo-action-size);
        height:var(--mibo-action-size);
        margin-left:calc( var(--mibo-action-size) / -2 );
        margin-top:calc( var(--mibo-action-size) / -2 );
        z-index:2;
        -webkit-tap-highlight-color:rgba(255, 255, 255, 0);
    }
    mibo-actions mibo-bubble {
        display:flex;
        flex-direction:column;
        padding:26px 6px 6px 6px;
        margin-top:-5px;
        position:absolute;
        left:50%;
        width:200px;
        margin-left:-100px;
        box-sizing:border-box;
        z-index:2;

        pointer-events:none;
        opacity:0;
        transition:var(--mibo-transition);
    }
        mibo-actions:hover mibo-bubble,
        mibo-actions:active mibo-bubble,
        mibo-actions[active] mibo-bubble {
            opacity:1;
            pointer-events:all;
        }
        mibo-actions mibo-bubble::before {
            display:block;
            content:"";
            width:10px;
            height:10px;
            transform:rotate(45deg);
            background:var(--mibo-solid);
            position:absolute;
            left:50%;
            top:16px;
            margin-left:-5px;
            border-radius:1px;
            box-shadow:var(--mibo-shadow);
        }
        mibo-actions mibo-bubble::after {
            display:block;
            content:"";
            position:absolute;
            left:0;
            right:0;
            top:20px;
            bottom:0;
            background:var(--mibo-solid);
            border-radius:var(--mibo-round);
            box-shadow:var(--mibo-shadow);
        }
        mibo-actions mibo-bubble > * {
            display:flex;
            flex-direction:row;
            align-items:center;
            gap:10px;
            padding:8px 12px;
            color:var(--mibo-solid-text) !important;
            text-decoration:none;
            position:relative;
            background:var(--mibo-solid);
            border-radius:var(--mibo-round);
            cursor:pointer;
            z-index:1;
            font-size:var(--mibo-font-normal);
            transition:var(--mibo-transition);
        }
        mibo-actions mibo-bubble > *:hover {
            background:var(--mibo-solid-hover);
            color:var(--mibo-solid-hover-text) !important;
        }
            mibo-actions mibo-bubble > * > i {
                color:var(--mibo-opaque);
            }

mibo-modal {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    padding:30px;
    background:rgba(0, 0, 0, .15);
    z-index:999999;
    backdrop-filter:blur(2px);
    transition:0.3s; 
    opacity:0;
    pointer-events:none
}
mibo-modal[open] { 
    opacity:1;
    pointer-events:all
}
    mibo-modal mibo-card {
        transform:translateY(10px);
    }
    mibo-modal[open] mibo-card {
        transform:translateY(0);
    }
mibo-card {
    display:flex;
    flex-direction:column; 
    border-radius:var(--mibo-round);
    box-shadow:var(--mibo-shadow);
    background:var(--mibo-solid);
    max-height:100%;
    max-width:100%;
    /* overflow:hidden; */
    transition:0.3s; 
}
mibo-card[full] {
    flex:1;
    height:100%
}
mibo-card[limited] {
    max-width:500px;
    max-height:500px;
    margin:auto;
}
    mibo-card mibo-card-head,
    mibo-card mibo-card-foot {
        display:flex;
        flex-direction:row;
        padding:14px 20px;
        border:0 solid #d4d6d7;
        justify-content:space-between;
        gap:20px
    }
    mibo-card mibo-card-head {
        border-bottom-width:1px;
        align-items:center;
    }
    mibo-card mibo-card-foot {
        border-top-width:1px;
        align-items:flex-end;
    }
        mibo-card mibo-card-head > a {
            display:flex;
            align-items:center;
            justify-content:center;
            width:20px;
            height:20px;
            color:var(--mibo-opaque) !important;
            font-size:30px;
            line-height:0;
            cursor:pointer;
            margin-right:-6px
        }
        mibo-card mibo-card-foot > a,
        .mibo-email-sender button {
            border-radius:4px;
            padding:10px 14px;
            color:#222 !important;
            border:1px solid #ddd;
        }
        mibo-card mibo-card-foot > a[submit],
        mibo-card mibo-card-foot > a[accept],
        .mibo-email-sender button {
            color:#fff !important;
            background-color:var(--mibo-purple);
            border-color:var(--mibo-purple);
        }
        mibo-card mibo-card-foot > a[submit]:hover,
        mibo-card mibo-card-foot > a[accept]:hover,
        .mibo-email-sender button:hover {
            background:var(--mibo-purple-strong);
        }
    mibo-card mibo-card-body {
        display:flex;
        padding:10px 20px;
        flex-direction:column;
        overflow:auto;
        flex:1;
    }
    mibo-card mibo-card-body[center]{
        align-items:center;
        justify-content:center;
    }
        mibo-card mibo-card-body > [medium] {
            width:600px;
        }

*:focus-visible {
    outline-color: rgba(0, 0, 0, 0);
    outline-style: solid;
}

mibo-alert {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:20px;
    max-width:400px;
}
    mibo-alert h1 {
        text-align:center;
        font-size:20px;
        color:#343a69
    }
    mibo-alert p {
        text-align:center;
        font-size:16px;
        line-height:1.4;
    }

.mibo-email-sender {
    display:flex;
    flex-direction:row;
    position:relative;
    padding-top:22px;
    gap:10px;
    width:40%;
}
    .mibo-email-sender span {
        display:block;
        position:absolute;
        left:0;
        top:0;
    }
    .mibo-email-sender input[type=email],
    .mibo-email-sender input[type=text] {
        border-radius:var(--mibo-round);
        padding:0 15px;
        outline:none !important;
        border:1px solid var(--mibo-opaque);
        flex:1;
    }

embed[pdf] {
    width:820px;
    height:580px;
    border-radius:5px;
}

[badge]::after {
    display:block;
    content:attr(badge);
    position:absolute;
    right:30px;
    top:-4px;
    background:#fff;
    color:#322;
    padding:7px 7px;
    border-radius:4px;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);
    font-size:11px;
    line-height:0;
}



/*
    Selects que pueden ser reemplazados por inputs.
    Los selects asignan valor a los inputs
*/
.editable-options {}
.editable-options > input {}
.editable-options > i {
    position:absolute;
    right:8px;
    top:50%;
    line-height:0;
    padding:10px;
    margin-top:-3px;
    cursor:pointer;
}
.editable-options > select {
    display:none !important
}
/* Oculta los "i" que esten siguientes a un select vacío */
.editable-options > select:not(:has(option)) + i {
    display:none !important
}
.editable-options.selectable {}
    .editable-options.selectable > input {
        display:none !important
    }
    .editable-options.selectable > i {
        display:none !important
    }
    .editable-options.selectable > select {
        display:block !important
    }

/*
    Componente para dejar "cargando" el body
*/
body {}
    body::before,
    body::after {
        opacity:0;
        pointer-events:none;
        transition:0.3s;
        animation:none;
    }
    body::before {
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        content:attr(loading);
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        padding:30px;
        padding-top:0;
        background:rgba(0, 0, 0, .15);
        z-index:999999999999;
        backdrop-filter:blur(2px);
    }
    body::after {
        display:block;
        content:'';
        border:4px solid #ef2424;
        border-top-color:transparent;
        width:40px;
        height:40px;
        position:fixed;
        left:50%;
        top:50%;
        z-index:999999999999999;
        border-radius:50%;
        box-sizing:border-box;
        margin-left:-20px;
        margin-top:5px;
        -webkit-animation:rotating 1.5s linear infinite;
        -moz-animation:rotating 1.5s linear infinite;
        -ms-animation:rotating 1.5s linear infinite;
        -o-animation:rotating 1.5s linear infinite;
        animation:rotating 1.5s linear infinite;
    }
    body[loading]::before,
    body[loading]::after {
        opacity:1; 
        pointer-events:all;
    }

.boleta-anulada {
    padding: 2px 4px;
    border-radius: 10px;
    background: var(--mibo-purple);
    color: var(--mibo-purple-text);
    text-align: center;
    font-size: 11px;
    display: block;
    font-weight: bold;
}

@keyframes rotating {
    from {
        -ms-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    to {
        -ms-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

@media only screen and (max-width:610px), only screen and (max-device-width:610px) {
    mibo-modal {
        padding:20px 10px;
    }
    embed[pdf] {
        width:100%;
    }
    mibo-card mibo-card-body > [medium] {
        width:unset
    }
    mibo-actions select {
        display:block !important;
    }
    mibo-actions:has(>select) mibo-bubble {
        display:none;
    }
}