@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{

/* FUENTE */
--monsi-font:'Montserrat',sans-serif;


/* =========================
   COLORES MONSI
========================= */
/* COLORES PRINCIPALES */
--monsi-primary:#ffbb00;
--monsi-primary-hover:#fab801;
--monsi-primary-soft:#FFF3CD;

/* ESCALA DE GRISES */
--monsi-dark:#000000;
--monsi-gray:#7A7A7A;
--monsi-graylight:#d3d2d2;
--monsi-light:#F5F5F5;
--monsi-white:#FFFFFF;

/* BORDES */
--monsi-border:#E5E5E5;

/* SISTEMA */
--monsi-success:#28A745;
--monsi-warning:#ffc011;
--monsi-danger:#DC3545;
--monsi-info:#17A2B8;

/* UI */
--monsi-radius:10px;
--monsi-shadow:0 4px 12px rgba(0,0,0,0.05);

/* BOOTSTRAP OVERRIDE */

--bs-warning:var(--monsi-primary);
--bs-warning-rgb:224,168,0;

--bs-primary:var(--monsi-dark);
--bs-primary-rgb:74,74,74;

--bs-success:var(--monsi-success);
--bs-danger:var(--monsi-danger);
--bs-info:var(--monsi-info);

--bs-body-color:var(--monsi-dark);
--bs-secondary-color:var(--monsi-gray);

--bs-body-bg:#fafafa;

--bs-link-color:var(--monsi-primary);
--bs-link-hover-color:var(--monsi-primary-hover);

--bs-border-color:var(--monsi-border);

--bs-border-radius:var(--monsi-radius);

}

/* GLOBAL */

body{

font-family:var(--monsi-font) !important;
color:var(--monsi-dark) !important;
background:#fafafa !important;
}

*:not(i){
    font-family: var(--monsi-font) !important;
}
/* LINKS */

a{

color:var(--monsi-dark) !important;
text-decoration:none !important;

}

a:hover{

color:var(--monsi-gray) !important;

}

/* BOTONES */

.btn-primary{

background:var(--monsi-primary) !important;
border:none !important;
color:white !important;
border-radius:var(--monsi-radius) !important;

}

.btn-success{
    color:white !important;
}

.btn-success:hover{
    color:white !important;
}

.btn-primary:hover{
background:var(--monsi-primary-hover) !important;
color:var(--monsi-dark) !important;
}

.btn-warning{
color:var(--monsi-dark) !important;
background:var(--monsi-primary) !important;
border:none !important;


}

.btn-warning:hover{
color:white !important;
background:var(--monsi-primary-hover) !important;
}

.btn-outline-warning{

color:var(--monsi-dark) !important;
border-color:var(--monsi-primary) !important;

}

.btn-outline-secondary{
    color:var(--monsi-dark) !important;
    
}

.btn-outline-secondary:hover{
    color:white !important;
    background:var(--monsi-gray) !important;
}

.btn-outline-warning:hover{
color:var(--monsi-primary) !important;
background:var(--monsi-primary) !important;


}

/* CARDS */

.card{

border:1px solid var(--monsi-border) !important;
border-radius:var(--monsi-radius) !important;
box-shadow:var(--monsi-shadow) !important;

}

/* INPUTS */

.form-control{

border:1px solid var(--monsi-border) !important;
border-radius:8px !important;

}

.form-control:focus{

border-color:var(--monsi-primary) !important;
box-shadow:0 0 0 .25rem rgba(224,168,0,.25) !important;

}

/* TABLAS */

table{

border:1px solid var(--monsi-border) !important;

}

thead{

background:var(--monsi-light) !important;
color:var(--monsi-dark) !important;
font-weight:600 !important;

}

tbody tr:hover{

background:#fafafa !important;

}

/* HEADERS */

h1,h2,h3,h4,h5{

font-weight:600 !important;


}

p{
    color:var(--monsi-dark) !important;
    
}

p.footerletter{
    color:var(--monsi-graylight) !important;
}

p.infoBorCor{
  color:  #fafafa !important;
}

.fs-12{
    font-size: 12px !important;
}

.fs-11{
    font-size: 11px !important;
}
.fs-10{
    font-size: 10px !important;
}

.fs-9{
    font-size: 9px !important;
}
.fs-7{
    font-size: 7px !important;
}

/* NAVBAR */

.navbar{

background:white !important;
border-bottom:1px solid var(--monsi-border) !important;

}

/* BADGES */

.badge.bg-warning{

background:var(--monsi-primary) !important;
color:var(--monsi-dark) !important;

}

.badge.text-bg-warning{
background:var(--monsi-primary) !important;
color:var(--monsi-dark) !important;
}

.text-bg-warning {
    color: #000 !important;
    background:var(--monsi-primary) !important;
}

/* ALERTS */

.alert-warning{

background:#FFF3CD !important;
border-color:var(--monsi-primary) !important;
color:var(--monsi-dark) !important;

}

/* SCROLL */

::-webkit-scrollbar{

width:8px !important;

}

::-webkit-scrollbar-thumb{

background:var(--monsi-primary) !important;
border-radius:10px !important;

}

button,a{
transition:all .2s ease !important;
}

.card:hover{
transform:translateY(-2px) !important;
}

.table{
border-radius:10px !important;
overflow:hidden !important;
}

.checkbox-wrapper-46 .cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--monsi-primary) !important;
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
    background: var(--monsi-primary) !important;
    border-color: var(--monsi-primary) !important;
    animation: wave-46 0.4s ease;
}

.checkbox-wrapper-46 .cbx:hover span:first-child {
    border-color: var(--monsi-primary) !important;
}

.btn-outline-primary{

--bs-btn-color: var(--monsi-primary)!important;
--bs-btn-border-color: var(--monsi-primary)!important;

--bs-btn-hover-color: var(--monsi-white)!important;
--bs-btn-hover-bg: var(--monsi-primary)!important;
--bs-btn-hover-border-color: var(--monsi-primary-hover)!important;

--bs-btn-focus-shadow-rgb: 255,187,0!important;

--bs-btn-active-color: var(--monsi-white)!important;
--bs-btn-active-bg: var(--monsi-primary-hover)!important;
--bs-btn-active-border-color: var(--monsi-primary-hover)!important;

--bs-btn-disabled-color: var(--monsi-primary)!important;
--bs-btn-disabled-bg: transparent!important;
--bs-btn-disabled-border-color: var(--monsi-primary)!important;

}

.ribbon {
    --r: .8em;
    border-block: .5em solid #0000;
    padding-inline: .5em calc(var(--r) + .25em);
    line-height: 1.8;
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%, 100% calc(100% - .25em), calc(100% - var(--r)) 50%, 100% .25em);
    background: radial-gradient(.2em 50% at left, #000a, #0000) border-box, #ffbb00 padding-box !important;
    width: fit-content;
}


.ribbonpedidos {
    --r: .4em;
    --c: #ffbb00 !important;
    position: absolute;
    top: 20px;
    left: calc(-1 * var(--r));
    line-height: 1.8;
    padding: 0 .5em calc(2 * var(--r));
    border-radius: var(--r) 0 0 var(--r);
    background: radial-gradient(100% 50% at left, var(--c) 98%, #0000 101%) 100% 0 / .5lh calc(100% - 2 * var(--r)), radial-gradient(100% 50% at right, #0005 98%, #0000 101%) 0 100% / var(--r) calc(2 * var(--r)), conic-gradient(from 90deg at var(--r) calc(100% - 2 * var(--r)), #0000 25%, var(--c) 0) 0 0 / calc(101% - .5lh) 100%;
    background-repeat: no-repeat;
}


.buttonComprar {
    background-color: #ffbf11;
}

.paquete {
    background-color: #ffc01118;
    border: 2px solid #ffbb00;
}

.btn-sistema {
    background-color: #ffbb00 !important;
}

.tarjeta p{
    color:  #fafafa !important;
}

.formulario-tarjeta .btn-enviar {
    background: #ffbb00 !important;
    box-shadow: 2px 2px 10px 0px rgba(255, 196, 2, 0.4);
}

.accordion-button:not(.collapsed) {
    color: var(--monsi-dark) !important;
    background-color: #ffbb00 !important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

