/* ==========================================================
   UI.CSS
   Librería de componentes reutilizables
   IzquierdaDerecha - Macuahuitl Games
==========================================================*/

/* ==========================================================
   CARDS
==========================================================*/

.card{

    background:rgba(255,255,255,.16);

    border:2px solid rgba(255,255,255,.22);

    border-radius:18px;

    padding:15px;

    box-shadow:
        0 6px 15px rgba(0,0,0,.25);

}

.card-dark{

    background:rgba(0,0,0,.35);

    border:2px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:15px;

}

.card-light{

    background:rgba(255,255,255,.28);

    border:2px solid rgba(255,255,255,.35);

    border-radius:18px;

    padding:15px;

}

/* ==========================================================
   PANEL
==========================================================*/

.panel{

    background:rgba(0,0,0,.20);

    border-radius:20px;

    padding:15px;

}

/* ==========================================================
   GRID
==========================================================*/

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

}

.grid-auto{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));

    gap:12px;

}

/* ==========================================================
   FLEX
==========================================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/* ==========================================================
   BADGES
==========================================================*/

.badge{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:6px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:bold;

}

.badge-success{

    background:#2eaf3b;

    color:white;

}

.badge-warning{

    background:#ff9800;

    color:white;

}

.badge-danger{

    background:#d32f2f;

    color:white;

}

.badge-info{

    background:#2196f3;

    color:white;

}

/* ==========================================================
   DIVISORES
==========================================================*/

.divider{

    width:100%;

    height:2px;

    margin:12px 0;

    background:rgba(255,255,255,.18);

}

.divider-gold{

    width:100%;

    height:2px;

    margin:12px 0;

    background:linear-gradient(
        to right,
        transparent,
        #ffd36b,
        transparent
    );

}

/* ==========================================================
   SOMBRAS
==========================================================*/

.shadow{

    box-shadow:
        0 6px 15px rgba(0,0,0,.25);

}

.shadow-lg{

    box-shadow:
        0 10px 25px rgba(0,0,0,.35);

}

/* ==========================================================
   BORDES
==========================================================*/

.rounded{

    border-radius:10px;

}

.rounded-lg{

    border-radius:18px;

}

.rounded-xl{

    border-radius:25px;

}

.circle{

    border-radius:50%;

}

/* ==========================================================
   ESPACIADO
==========================================================*/

.mt-5{margin-top:5px;}
.mt-10{margin-top:10px;}
.mt-15{margin-top:15px;}
.mt-20{margin-top:20px;}

.mb-5{margin-bottom:5px;}
.mb-10{margin-bottom:10px;}
.mb-15{margin-bottom:15px;}
.mb-20{margin-bottom:20px;}

.ml-10{margin-left:10px;}
.mr-10{margin-right:10px;}

.p-5{padding:5px;}
.p-10{padding:10px;}
.p-15{padding:15px;}
.p-20{padding:20px;}

/* ==========================================================
   TEXTO
==========================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-bold{

    font-weight:bold;

}

.text-small{

    font-size:12px;

}

.text-large{

    font-size:20px;

}

/* ==========================================================
   BOTONES
==========================================================*/

.btn{

    border:none;

    border-radius:12px;

    padding:10px 18px;

    cursor:pointer;

    transition:.2s;

}

.btn:active{

    transform:scale(.96);

}

.btn-success{

    background:linear-gradient(
        180deg,
        #57c957,
        #2d8f2d
    );

    color:white;

}

.btn-danger{

    background:linear-gradient(
        180deg,
        #ff5a5a,
        #d62828
    );

    color:white;

}

.btn-warning{

    background:linear-gradient(
        180deg,
        #ffd36b,
        #ff9800
    );

    color:#4a2500;

}

.btn-info{

    background:linear-gradient(
        180deg,
        #5bc0ff,
        #2196f3
    );

    color:white;

}

/* ==========================================================
   ANIMACIONES
==========================================================*/

.scale{

    transition:.2s;

}

.scale:hover{

    transform:scale(1.03);

}

.scale:active{

    transform:scale(.96);

}

.fade{

    transition:.3s;

}

.hidden{

    display:none !important;

}

.visible{

    display:block !important;

}