alumnos/css/general.css

/* 
    Created on : Feb 13, 2023, 1:56:53 PM
    Author     : Ale
*/
/***** COLORES *****/
.bg-azul1 { background: var(--azul1) !important; }
.bg-azul2 { background: var(--azul2) !important; }
.bg-mainColor { background: var(--mainColor); }
.text-azul1 { color: var(--azul1) !important; }
.text-azul2 { color: var(--azul2) !important; }
.text-mainColor { color: var(--mainColor) !important; }

/***** GENERAL *****/
label { margin-bottom: 0; }
.lblTit { font-family: 'indivisa-text-bold'; color: var(--primary); margin-right: 1rem;  }
.pointer { cursor: pointer; }
.table { color: var(--dark); }

/***** FONTS *****/
.display-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.2 }
@media (max-width: 1200px) {
    .display-5 { font-size:calc(1.375rem + 1.5vw); }
}
.display-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.2 }
@media (max-width: 1200px) {
    .display-6 { font-size:calc(1.275rem + 0.3vw); }
}
.display-7 { font-size: 1.25rem; font-weight: 300; line-height: 1.2 }
@media (max-width: 1200px) {
    .display-7 { font-size:calc(1.175rem); }
}

/***** CONTENEDORES *****/
body { font-family: 'indivisa-text', Arial; font-size: 14px !important; color: var(--dark); }
.marco{ max-width: 960px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; }
.container-fluid { padding: 0; }

/***** MAIN Y BARRA *****/
.barra { background: var(--mainBG); min-height: 45px; }
.barra > h4 { color: #FFFFFF; font-weight: bold; margin-bottom: 0 !important; }
main { min-height: 600px; }

/***** ENCABEZADOS *****/
h1, h2, h3, h4, h5, h6 { font-family: 'indivisa-text-black'; color: var(--primary); }

/***** BOTONES *****/
.btn { border: 0; }
.btn-verde { color: var(--success); }
.btn-verde:hover, .btn-verde:active, .btn-verde:focus { color: var(--success); background: var(--success-25); }
.btn-rojo { color: var(--danger); }
.btn-rojo:hover, .btn-rojo:active, .btn-rojo:focus { color: var(--danger); background: var(--danger-25); }
.btn-amarillo { color: var(--yellow); }
.btn-amarillo:hover, .btn-amarillo:active, .btn-amarillo:focus { color: var(--yellow); background: var(--yellow-25); }
.btn-gris { color: var(--gray); }
.btn-gris:hover, .btn-gris:active, .btn-gris:focus { color: var(--gray); background: var(--gray-25); }
.btn-azul1 { color: var(--azul1); }
.btn-azul1:hover, .btn-azul1:active, .btn-azul1:focus { color: var(--azul1); background: var(--azul1-25); }
.btn-azul2 { color: var(--azul2); }
.btn-azul2:hover, .btn-azul2:active, .btn-azul2:focus { color: var(--azul2); background: var(--azul2-25); }

/***** MODALS *****/
.modalGral .modal-content { border: 0; background: var(--mainBG); padding: 1rem; }
.modalGral .modal-header, .modalGral .modal-body, .modalGral .modal-footer { color: var(--primary); background: var(--white); border: 0; padding: 1rem; }
.modalGral .modal-title { flex-grow: 1; text-align: center; }
.close, .close:hover { color: var(--azul2); cursor: pointer; }
.modalGral .btnIcon { font-size: 1.5rem; padding: 0.25em 0.5em; margin: 0; }

/***** AVISOS *****/
.msgAviso.modal-content { background: transparent; border: 0; }
.msgAviso > .iconAviso { color: var(--white); border-radius: 25px 0 0 25px; padding: 2rem; }
.msgAviso > .txtAviso { border-radius: 0 25px 25px 0; border: 1px solid var(--light); background: var(--white); padding: 2rem; }
.txtAviso > .rounded-pill { text-align: center; min-width: 75px; cursor: pointer; }
.txtAviso > .rounded-pill:hover { opacity: 0.5; }

/***** TABS *****/
.tabGral { border-bottom: 2px solid var(--azul1); }
.tabGral > button.nav-link { background: var(--gray-25); color: var(--primary); border: 2px solid var(--white) !important; border-bottom: 0 !important; outline: none !important; -webkit-transform: skew(-20deg); -o-transform: skew(-20deg); transform: skew(-20deg); -o-transform: skew(-20deg); }
.tabGral > button.nav-link > label { cursor: pointer; -webkit-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg); -o-transform: skew(20deg); }
.tabGral > button.nav-link.active { background: var(--azul1); font-family: 'indivisa-text-bold'; }
.tabGral > button.nav-link.active, .tabGral > button.nav-link.active > label { cursor: default; }
.tabGral > button.nav-link:not(.active):hover { background: var(--gray-75); color: var(--white); }

/***** ICONOS ACCIONES *****/
.iconAcciones { font-size: 1.25em; margin: 0 0.25em; cursor: pointer; }
.iconAcciones:hover { opacity: 0.5; }
.iconBorder{ border: 15px solid; }
.bigIcon{ font-size: 2rem; }
.bigIcon:hover{ opacity: 0.75; }

/***** MSGBOX *****/
.msgBox { position: relative; min-height: 25vmin; padding: 5vmin; width: 80%; margin: 0 auto; }
.msgBox > .imgBoxIzq, .msgBox > .imgBoxDer { position: absolute; width: 10vmin; }
.msgBox > .imgBoxIzq { top: 0; left: 0; -webkit-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); -o-transform: rotate(-180deg); }
.msgBox > .imgBoxDer { bottom: 0; right: 0; }
.msgBox > .hrArriba, .msgBox > .hrAbajo { position: absolute; border-top-width: 3px; width: 75%; }
.msgBox > .hrArriba { top: 1.5vmin; right: 0; border-top-color: var(--azul1); }
.msgBox > .hrAbajo { bottom: 1.5vmin; left: 0; border-top-color: var(--azul2); }

/***** TOOLTIP *****/
.tooltip-inner { background-color: var(--azul2); }
.bs-tooltip-auto[x-placement^="top"] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: var(--azul2); }
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: var(--azul2); }
.bs-tooltip-auto[x-placement^="left"] .arrow::before, .bs-tooltip-left .arrow::before { border-left-color: var(--azul2); }
.bs-tooltip-auto[x-placement^="right"] .arrow::before, .bs-tooltip-right .arrow::before { border-right-color: var(--azul2); }