/***********************************************/
/*** NUEVOS ESTILOS SDWEB UNIVERSITY MANAGER ***/
/***********************************************/
/* Poppins, todos los pesos */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;700;800;900&display=swap');
/** NUEVAS VARIABLES **/
:root {
/* Colores */
--primario:#2c3862;
--primario-rgb: 44, 56, 98;
--primario-dark: #161c31; /* 50% + oscuro */
--primario-medio: #485ca1;
--primario-medio-link: #2e4cb7;
--primario-light: #808fc5; /* 50% + claro */
--primario-lighter: #ccd2e8; /* 80% + claro */
--primario-extra-light: #e5e8f3; /* 90% + claro */
--primario-highlight: #a8c6fc;
--primario-highlight-medio: #d3e2fd; /* highlight 50% + claro */
--primario-highlight-light:#e9f0fe;/* highlight 75% + claro */
--primario-accent: #5377f5; /* Azul del logo V */
--secundario: #deb64a; /* Amarillo del logo V */
--secundario-rgb: 222, 182, 74;
--secundario-dark: #7d6116; /*50% + oscuro */
--secundario-medio: #e6c877; /* 25% + claro */
--secundario-light: #eedaa4; /* 50% + claro */
--secundario-extra-light:#fbf7ec; /* 90% + claro */
--gris-oscuro: #666666;
--gris-claro: #c3d3e2;
--danger: #dd141b;
--danger-dark: #6e090d; /* 50% + oscuro */
--success: #78c842;
--success-light: #bbe3a0; /* 50% + claro */
--success-dark: #3b671d; /* 50% + oscuro */
--progress: #fe5b48;
--progress-dark: #a21100; /* 50% + oscuro */
/* Tipografía */
--font-family: 'Poppins', Arial, Helvetica, sans-serif;
--icono-ff: FontAwesome;
/* Tamaños de fuente */
--min-vw:360;
--max-vw:1920;
--fs-scale: 1.2;
--body-min-fs: 14;
--body-max-fs: 16;
--body-fs: calc((var(--body-min-fs) * 1px) + (var(--body-max-fs) - var(--body-min-fs)) * ((100vw - (var(--min-vw) * 1px)) / (var(--max-vw) - var(--min-vw))));
--h6-fs: calc(var(--body-fs) * var(--fs-scale));
--h5-fs: calc(var(--h6-fs) * var(--fs-scale));
--h4-fs: calc(var(--h5-fs) * var(--fs-scale));
--h3-fs: calc(var(--h4-fs) * var(--fs-scale));
--h2-fs: calc(var(--h3-fs) * var(--fs-scale));
--h1-fs: calc(var(--h2-fs) * var(--fs-scale));
--small-fs: calc(var(--body-fs) * 0.9);
/* Layouts */
--header-height: 67px;
--sidebar-left-w: 250px;
/* Clamps */
--120-60: clamp(60px, 50.307px + 2.6923vw, 120px);
--90-45: clamp(45px, 34.626px + 2.8841vw, 90px);
--80-60: clamp(60px, 55.384px + 1.2821vw, 80px);
--80-40: clamp(40px, 30.77px + 2.5641vw, 80px);
--60-30: clamp(30px, 23.077px + 1.9231vw, 60px);
--50-25: clamp(25px, 19.24px + 1.6021vw, 50px);
--40-20: clamp(20px, 15.384px + 1.2821vw, 40px);
--40-30: clamp(30px, 27.693px + 0.641vw, 40px);
--30-15: clamp(15px, 11.549px + 0.9610vw, 30px);
--30-20: clamp(20px, 17.693px + 0.641vw, 30px);
--20-10: clamp(10px, 7.693px + 0.6410vw, 20px) ;
--24-18: clamp(18px, 16.616px + 0.3846vw, 24px);
--15-10: clamp(10px, 8.845px + 0.3210vw, 15px);
--10-5: clamp(5px, 3.856px + 0.3200vw, 10px);
/* Radius */
--form-radius: 5px;
--btn-radius: 4px;
--container-radius: 16px;
--full-radius: 100vmax;
/* Transitions */
--tr00: all 0s linear;
--tr02: all 0.2s ease-in-out;
--tr04: all 0.4s ease-in-out;
/* Sombras */
--shadow-avatar: 3px 3px 5px 0px #999999;
--shadow-dropdown: 2px 2px 4px 0px var(--primario-dark);
--shadow-dropdown-before: 2px 1px 4px var(--primario-dark);
--shadow-form-group: 2px 3px 6px 3px var(--primario-lighter);
--shadow-modal-content: 4px 4px 12px #000000;
/* Formularios */
--form-item-min-width: 450px;
}
/** GENERALIDADES **/
/* Tipografía*/
body {
font-family: var(--font-family);
font-size: var(--body-fs);
line-height: 1.2;
background: #ffffff;
/* Quito el overlay "modal-backdrop" */
&.modal-open {
.modal-backdrop.fade.in {
display: none;
}
}
}
h6, .h6 {
font-size: var(--h6-fs);
}
h5, .h5 {
font-size: var(--h5-fs);
}
h4, .h4 {
font-size: var(--h4-fs);
}
h3, .h3 {
font-size: var(--h3-fs);
}
h2, .h2 {
font-size: var(--h2-fs);
}
h1, .h1 {
font-size: var(--h1-fs);
}
a {
transition: var(--tr04);
}
a:hover {
transition: var(--tr04);
}
/* Iconos */
.glyphicon {
&.glyphicon-ok-circle {
color: var(--success)!important;
}
&.glyphicon-ban-circle {
color: var(--danger)!important;
}
}
/* Lista desplegable dropdown menú */
.dropdown .dropdown-menu, .btn-group .dropdown-menu {
height: 0;
width: fit-content;
top: calc(100% + 12px);
right: 0;
left: unset!important;
margin: 0 auto;
padding: 0;
border: none;
border-radius: var(--container-radius)!important;
box-shadow: var(--shadow-dropdown);
overflow: hidden;
z-index: 1001;
&:not(.dropdown-user) {
min-width: 100%;
max-width: 100%;
left: 0;
}
&:before {
display: none;
}
& li {
border: none;
font-size: calc(var(--small-fs) - 2px);
&:first-child {
border-top-left-radius: var(--container-radius);
border-top-right-radius: var(--container-radius);
position: relative;
&:before {
--size: 16px;
content: '';
width: var(--size);
height:var(--size);
display: block;
background-color: white;
position: absolute;
top: calc(var(--size) * -0.5);
left: 0;
right: 0;
margin-inline: auto;
transform: rotate(45deg);
box-shadow: var(--shadow-dropdown-before);
}
& a {
position: relative;
white-space: normal;
border-top-left-radius: var(--container-radius)!important;
border-top-right-radius: var(--container-radius)!important;
}
}
&:last-child {
border-bottom-left-radius: var(--container-radius);
border-bottom-right-radius: var(--container-radius);
& a {
border-bottom-left-radius: var(--container-radius)!important;
border-bottom-right-radius: var(--container-radius)!important;
}
}
& a {
padding: var(--10-5) var(--20-10);
font-size: inherit;
border-radius: 0 !important;
color: var(--primario);
background-color: white;
transition: var(--tr04);
white-space: normal;
&:hover {
background-color: var(--primario-highlight);
}
&:focus {
background-color: white;
}
}
}
/* Menú de usuario */
&.dropdown-user {
& li {
& a {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
i.fa {
--size: var(--body-fs);
width: var(--size);
height: var(--size);
font-size: 0;
color: inherit;
margin: 0;
background-size: cover;
transition: var(--tr00);
/* Datos usuario */
a[href*="profile"] & {
background-image: url('../images/datos_usuario.svg');
}
/* Editar datos usuario */
a[href*="usuarios/edit"] & {
background-image: url('../images/datos_usuario.svg');
}
/* cambiar contraseña */
a[href*="change-password"] & {
background-image: url('../images/change_pass.svg');
}
/* salir */
a[href*="logout"] & {
background-image: url('../images/exit.svg');
}
}
}
}
}
}
.open .dropdown-menu {
height: fit-content;
overflow: visible;
}
/** ELEMENTOS DE FORMULARIOS **/
/* Labels */
label {
font-size: var(--body-fs);
color: var(--primario);
line-height: 1.4;
font-weight: 500;
&.control-label {
margin-bottom: 4px;
white-space: nowrap;
&:empty {
margin: 0;
}
}
/* requeridos */
&.marcado-obligatorio {
display: flex;
overflow: hidden;
text-indent: -10px;
margin-left: 10px;
&:before {
content: '*';
position: absolute;
margin-right: 10px;
color: var(--danger);
font-size: var(--body-fs);
font-weight: 500;
}
}
}
/* Checkboxes */
.button-checkbox {
display: none!important;
}
/* Inputs text, e-mail, number */
.input-group {
display: flex;
}
input[type="text"], input[type="email"], input[type="number"], input[type="password"], textarea.form-control {
float: none;
width: 100%;
padding: calc(var(--10-5) * 0.33) var(--10-5)!important;
border-radius: var(--form-radius);
color: var(--primario);
font-size: var(--body-fs);
border: 1px solid var(--primario);
transition: var(--tr02);
&::placeholder {
color: var(--primario);
opacity: 0.66;
}
&::-webkit-inner-spin-button {
appearance: none;
}
&::-webkit-outer-spin-button {
appearance: none;
}
&:focus {
border-color: var(--primario-accent);
box-shadow: 0 0 6px 2px var(--primario-accent);
}
& ~ .input-group-addon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
padding: calc(var(--10-5) * 0.33) var(--10-5);
border: 1px solid var(--primario);
border-left: none;
border-radius: 0 var(--form-radius) var(--form-radius) 0;
font-size: var(--body-fs);
font-weight: 500;
color: var(--primario);
background-color: var(--primario-extra-light);
transition: var(--tr02);
}
}
/* Input Color */
label[for*="color"]::before {
content:'';
--size: calc(var(--body-fs) * 1.2);
width: var(--size);
height: var(--size);
aspect-ratio: 1 / 1;
float: left;
margin-right: 5px;
border-radius: var(--form-radius);
background-image: url(../images/colores.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
input[type="color"] {
border: 1px solid var(--primario);
width: auto;
height: 34px;
background-color: #e9e9e9;
color: var(--primario);
aspect-ratio: 2 / 1;
cursor: pointer;
transition: var(--tr04);
float: none;
&:hover {
background-color: var(--primario-highlight);
}
}
input[type="color"]::-webkit-color-swatch, input[type="color"]::-moz-color-swatch {
width: 20px;
height: 20px;
border: 1px solid var(--primario);
border-radius: var(--form-radius);
}
/* Inputs file */
input[type="file"] {
color: var(--primario);
font-family: var(--font-family);
font-size: var(--small-fs);
&::file-selector-button {
height: 34px;
margin-right: var(--15-10);
padding: calc(var(--10-5) * 0.33) var(--10-5) calc(var(--10-5) * 0.33) calc(var(--10-5) * 2 + var(--h6-fs));
border-radius: var(--form-radius);
color: inherit;
font-family: inherit;
font-size: inherit;
line-height: 1;
transition: var(--tr02);
cursor: pointer;
background-image: url(../images/file_upload.svg);
background-size: var(--h5-fs);
background-repeat: no-repeat;
background-position: var(--10-5) center;
border: none;
background-color: var(--primario-highlight-light);
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
}
&:hover::file-selector-button {
background-color: var(--primario-highlight);
border-color: var(--primario-dark);
transition: var(--tr02);
}
}
/* Div Añadir adjunto */
#button-add-adjunt {
height: 34px;
padding: calc(var(--10-5) * 0.33) var(--10-5) calc(var(--10-5) * 0.33) calc(var(--10-5) * 2 + var(--h6-fs));
font-size: inherit;
background-image: url(../images/add_file_upload.svg);
background-size: var(--h5-fs);
background-repeat: no-repeat;
background-position: var(--10-5) center;
background-color: var(--primario-highlight-light);
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
&:is(:hover, :active:hover) {
background-color: var(--primario-highlight);
border-color: var(--primario);
color: var(--primario);
}
}
/* Inputs checkbox y radio */
input[type="checkbox"], & input[type="radio"] {
--check-size: 16px;
--color: var(--primario-highlight);
--color-dark: var(--primario-medio-link);
display: block !important;
accent-color: var(--color, var(--secundario));
cursor: pointer;
float: none !important;
width: var(--check-size, 16px);
height: var(--check-size, 16px);
margin: 0;
border-radius: 4px;
&:checked {
--check-size: 12px;
margin: 2px;
box-shadow: 0 0 0px 2px var(--color-dark, var(--secundario-dark));
}
}
/* Select */
select, select.form-control {
height: 30px;
padding: calc(var(--10-5) * 0.33) var(--10-5);
border-radius: var(--form-radius);
border: 1px solid var(--primario);
color: var(--primario);
font-size: var(--body-fs);
font-weight: 400;
letter-spacing: 1px;
text-align: center;
background-color: var(--primario-extra-light);
cursor: pointer;
transition: var(--tr02);
&:hover, &:focus {
background-color: var(--primario-lighter);
border-color: var(--primario-dark);
}
}
/* Select 2 (custom select) */
span.select2.select2-container {
width: 100% !important;
.selection {
width: 100% !important;
}
}
.select2-container {
/* width: 100%; */
& .select2-selection {
display: flex;
align-items: center;
height: 34px;
padding: calc(var(--10-5) * 0.33) var(--10-5);
border-radius: var(--form-radius);
color: var(--primario);
font-size: var(--body-fs);
border: 1px solid var(--primario);
transition: var(--tr02);
& .select2-selection__rendered {
display: block;
height: auto;
width: calc(100% - 20px);
padding: 0;
color: var(--primario);
line-height: 1;
/* overflow: auto; */
& > .select2-search {
max-width: 100%;
& * {
max-width: 100%;
}
& input.select2-search__field {
margin-top: 0;
width: max-content!important;
max-width: 100%;
}
}
& .select2-selection__clear {
order: 2;
margin-inline: auto 0;
margin-block: auto;
font-size: var(--h6-fs);
&:hover {
color: var(--danger);
}
}
& .select2-selection__choice {
margin-top: auto;
padding: 2px 6px;
border: 1px solid var(--primario-lighter);
border-radius: var(--form-radius);
font-size: var(--small-fs);
background-color: var(--primario-extra-light);
color: var(--primario-medio);
& .select2-selection__choice__remove {
color: inherit;
&:hover {
color: var(--danger);
}
}
}
}
& .select2-selection__placeholder {
color: rgba(var(--primario-rgb), 0.66);
}
& .select2-selection__arrow {
right: var(--10-5);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
b {
display: none;
}
&:before {
content: '\f107';
margin-top: -2px;
color: var(--primario);
transition: var(--tr04);
font-size: var(--h6-fs);
font-family: var(--icono-ff);
font-weight: bold;
}
}
&[aria-expanded="true"] {
border-color: var(--primario-accent);
box-shadow: 0 0 6px 2px var(--primario-accent);
& .select2-selection__arrow {
&:before {
transform: rotate(180deg);
}
}
}
/* selección múltiple */
&.select2-selection--multiple {
height: fit-content;
& ul.select2-selection__rendered {
position: relative;
flex-wrap: wrap;
overflow: hidden;
width: 100%;
height: fit-content;
padding-right: 16px;
& .select2-selection__clear {
position: absolute;
right: 0;
top: 0;
}
}
}
}
&.select2-container--disabled {
.select2-selection--single {
background-color: rgba(var(--primario-rgb), 0.06);
cursor: not-allowed;
}
}
}
/* Select2 desplegado */
.select2-container--open .select2-dropdown {
margin-top: var(--form-radius);
border: 1px solid var(--primario) !important;
border-radius: var(--form-radius) !important;
box-shadow: var(--shadow-dropdown);
& .select2-results__option {
&:hover, &.select2-results__option--highlighted {
background-color: var(--primario-highlight);
color: var(--primario);
}
&[aria-selected="true"] {
background-color: var(--primario-lighter);
color: var(--primario-medio);
&:hover, &.select2-results__option--highlighted {
background-color: var(--primario-highlight);
color: var(--primario);
}
}
}
}
/* Calendarios en inputs de fecha datetimepicker */
.datetimepicker {
padding: 0!important;
box-shadow: var(--shadow-dropdown);
.datetimepicker-days {
table {
--day-w: 40px;
position: relative;
thead {
tr {
&:first-of-type {
position: absolute;
top: 0;
width: 100%;
padding-top: 3px;
display: flex;
justify-content: space-between;
align-items: center;
> * {
display: flex;
justify-content: center;
align-items: center;
border-radius: 0;
> * {
top: unset;
}
}
.switch {
flex-grow: 1;
font-weight: 500;
line-height: 1.2;
}
}
&:nth-of-type(2) {
background-color: var(--primario-extra-light);
border-top: 26px solid #fff;
th {
width: var(--day-w);
max-width: var(--day-w);
}
}
}
}
tbody {
tr {
td {
width: var(--day-w);
max-width: var(--day-w);
&.active {
background-color: var(--secundario);
background-image: none;
color: #3c3c3b;
}
}
}
}
}
}
}
/* Texto ayuda */
.texto-ayuda {
width: 100%;
margin: var(--10-5) 0;
font-size: calc(var(--small-fs) - 2px);
font-style: oblique;
color: var(--primario-medio);
}
/* Eliminar archivo */
.sdweb-eliminar-archivo {
& .row {
display: flex;
margin-block: var(--20-10) var(--10-5);
gap: var(--10-5);
&:before, &:after {
display: none;
}
& > * {
flex-basis: fit-content;
display: flex;
align-items: stretch;
padding: 0;
}
& label {
margin-bottom: 0;
line-height: 1.2;
}
}
}
/* Padding de subida de archivos */
[class*="vich"] [class*="col"] {
padding-inline: 0;
}
/* Errores */
.has-error {
scroll-margin-top: var(--header-height);
* {
scroll-margin-top: var(--header-height);
}
.form-control {
border-color: var(--danger);
box-shadow: 0 0 6px 2px var(--danger);
}
}
.form-group-with-help {
display: flex;
gap: 0 10px;
flex-wrap: wrap;
height: max-content;
.btn.btn-success.modal-ayuda {
--size: calc(var(--body-fs) * 1.3);
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
aspect-ratio: 1 / 1;
padding: 0;
border: none;
border-radius: var(--full-radius);
background-color: var(--primario);
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
&:before {
content: '?';
font-family: var(--font-family);
font-size: var(--body-fs);
line-height: 1;
letter-spacing: 0;
font-weight: 500;
color: #fff;
}
&:is(:hover, :active, :focus) {
background-color: var(--primario-accent) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
transform: translateY(-2px);
}
+ div {
display: flex;
align-items: center;
width: 100%!important;
min-height: 34px;
}
}
}
/* Anular estilos cuando el div tiene ambas clases */
.consulta-campo.form-group-with-help {
flex-wrap: unset;
height: auto;
}
/* Switcher */
.switch-container {
gap: var(--10-5);
margin-bottom: var(--30-20)!important;
.switch-label {
font-size: var(--body-fs);
color: var(--primario-highlight);
transition: all 0.4s ease-in-out;
&.selected {
color: var(--primario);
}
}
.switch {
width: 50px;
height: 24px;
margin: 0;
& .slider {
background-color: var(--primario-highlight-light) !important;
box-shadow: 0 0 1px #2196F3;
&:before {
background-color: var(--primario)!important;
height: 16px;
width: 16px;
}
}
}
}
/* Párrafos dentro de form-control */
.form-control p {
margin-bottom: 0;
}
/* Grupos con bloques ocultos */
.form-group.form-field-input:has( > .hidden) {
display: none;
}
/* Elementos deshabilitados */
.form-control, input {
&[disabled], &[readonly] {
border-color: var(--primario);
background-color: #f1f3f8;
cursor: not-allowed;
opacity: 0.5;
}
}
/** Barra de progreso pace **/
.pace .pace-progress {
height: var(--10-5);
background-color: var(--secundario);
border-radius: 0 var(--full-radius) var(--full-radius) 0;
opacity: 0.7;
}
/** Filtros Rápidos **/
#filtros-rapidos {
display: flex;
flex-wrap: wrap;
background-color: var(--primario-highlight-light);
--gap: var(--15-10);
gap: var(--gap);
}
/** Scrollbars **/
/** Firefox **/
* {
scrollbar-width: auto;
scrollbar-color: var(--secundario) transparent;
scrollbar-gutter: auto;
}
/** Chrome, Edge, y Safari **/
*::-webkit-scrollbar {
width: 0.66rem;
height: 0.66rem;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: var(--secundario);
border-radius: 100vmax;
}
/** MODALES **/
.modal:not(.in) {
transition: var(--tr00);
}
.modal.in {
position: fixed;
inset: 0;
margin: auto;
transition: var(--tr04);
& .modal-dialog {
--margin-v: 5vh;
display: flex;
justify-content: center;
align-items: center;
width: 1000px;
max-width: 80%;
height: calc(100vh - var(--margin-v) * 2);
margin: var(--margin-v) auto;
& .modal-content {
--padding: var(--15-10);
position: relative;
max-width: 100%;
max-height: 100%;
margin: auto;
padding: var(--padding);
border: none;
border-radius: var(--form-radius);
box-shadow: var(--shadow-modal-content);
/* overflow: auto; */
& .modal-header {
padding: 0;
border: none;
& .close {
--size: 30px;
width: var(--size);
height: var(--size);
position: absolute;
top: calc(var(--size) * -0.33);
margin: 0 !important;
right: calc(var(--size) * -0.33);
background-color: var(--primario-highlight);
opacity: 1;
color: var(--primario);
border-radius: var(--full-radius)!important;
z-index: 1;
text-shadow: none;
& span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-weight: 400;
font-size: var(--h5-fs);
line-height: 1;
}
&:hover {
opacity: 1;
box-shadow: var(--shadow-dropdown-before);
background-color: #fff;
color: var(--danger);
}
}
}
& .panel-body {
margin-block: var(--15-10);
& .panel.panel-default {
margin: 0!important;
box-shadow: none;
& > .panel-heading {
position: relative;
width: calc(100% + var(--padding) * 2);
margin-top: calc(var(--padding) * -2 - 1px);
margin-left: calc(var(--padding) * -1);
border-radius: var(--form-radius) var(--form-radius) 0 0 !important;
padding: var(--padding) !important;
background-color: var(--primario-highlight) !important;
z-index: 0;
& h4 {
font-size: var(--h5-fs);
}
}
& .panel-footer {
width: calc(100% + var(--padding) * 2);
margin-bottom: calc(var(--padding) * -1);
margin-left: calc(var(--padding) * -1);
padding: 0!important;
border-radius: 0 0 var(--form-radius) var(--form-radius)!important;
background-color: var(--primario-highlight-medio) !important;
& > *:not(:empty) {
padding: var(--padding) !important;
}
}
/* botones */
& .botones-controles-grupos {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--gap);
margin-bottom: var(--15-10);
& > * {
float: none;
flex: 0 0 fit-content;
}
}
}
& .panel-body {
& h4 {
color: var(--primario);
font-size: var(--h6-fs);
font-weight: 500;
margin-bottom: var(--10-5);
}
& *:last-child {
margin-bottom: 0;
}
& .panel-heading {
margin-top: calc(var(--padding) * -3 - 1px);
}
& .panel-footer {
margin-bottom: calc(var(--padding) * -3);
}
}
& #modalAlertaIbanContenido {
position: relative;
& .panel-default-layout {
padding: 0;
& .panel.panel-default {
border:none;
& .panel-heading {
margin-top: calc(var(--padding) * -1 - 1px);
& h4 {
margin: 0;
}
}
& .panel-body {
margin-block: var(--10-5);
}
& .panel-footer {
position: relative;
}
}
}
}
& #modalAlertaAsignaturasContenido {
& .panel-default-layout {
padding: 0;
& .panel.panel-default {
border:none;
& .panel-heading {
margin-top: calc(var(--padding) * -3 - 1px);
& h4 {
margin: 0;
}
}
& .panel-footer {
margin-bottom: calc(var(--padding) * -3 - 1px);
}
}
}
}
}
& .modal-body, > .panel-body {
&.modal-body {
padding: 0;
.alert.alert-info {
padding: 0;
background: none;
border: none;
font-size: var(--body-fs);
color: var(--primario);
line-height: 1.4;
}
}
&.panel-body {
width: calc(100% + var(--padding) * 2 + 2px);
margin-left: calc(var(--padding) * -1 - 1px);
margin-top: calc(var(--padding) * -1 - 1px);
padding-top: var(--15-10);
}
.modal-title {
flex: 1 1 100%;
margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
border-radius: var(--form-radius) var(--form-radius) 0 0;
font-size: var(--h5-fs);
line-height: 1.1;
color: var(--primario) !important;
background-color: var(--primario-highlight) !important;
padding: var(--20-10);
font-weight: 500;
border: none;
text-align: left;
}
form {
display: flex;
flex-direction: column;
label {
text-align: left;
}
& input, & .select2-container {
margin-bottom: var(--15-10);
}
button {
margin-left: auto;
}
}
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-inline: 0;
padding-bottom: 0;
&:before, &:after {
display: none;
}
> * {
flex: 0 0 fit-content;
width: fit-content;
padding: 0;
}
}
}
}
/* Crear Clase & Crear Festivo*/
&#modal_crear_clase, &#modal_crear_festivo {
& .modal-content > .panel-body {
margin: calc(var(--padding) * -1)!important;
border-radius: var(--form-radius);
overflow: auto;
padding: var(--15-10)!important;
&:before, &:after {
display: none;
}
& #modalCrearClaseContenido, & #modalCrearFestivoContenido {
display: flex;
& *:not(.cke *) {
float: none;
}
& .panel-default-layout {
& .panel {
margin-bottom: 0;
box-shadow: none;
}
& .panel-heading {
max-width: calc(100% + var(--padding) * 2 - 2px);
margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
font-size: var(--h5-fs);
line-height: 1.1;
color: var(--primario);
background-color: var(--primario-highlight) !important;
}
& .panel-body {
max-width: calc(100% + var(--padding) * 2 - 2px);
max-height: calc((90vh - var(--padding) * 2) - ((var(--h4-fs) * 1.1) + (var(--padding) * 4)));
margin-block: var(--15-10) 0!important;
padding-top: 6px!important;
overflow: visible;
& [name="calendar_schedule_festive"], & [name="calendar_schedule"] {
--gap: var(--15-10);
display: flex;
gap: var(--gap);
flex-wrap: wrap;
& > * {
flex: 1 1 calc(50% - var(--gap));
& > .form-field-input {
padding: 5px;
width: 100%!important;
}
.form-field-input {
padding: 0;
}
&.form-group {
margin: 0 0 0 5px!important;
/*Festivo*/
[name="calendar_schedule_festive"] & {
&:last-of-type:has(button) {
margin-inline: calc(var(--padding) * -1) !important;
width: calc(100% + var(--padding) * 2 - 2px) !important;
margin-bottom: calc(var(--padding) * -1) !important;
padding: var(--padding) !important;
display: flex;
background-color: var(--primario-highlight-medio);
}
}
}
}
}
/* Clase */
[name="calendar_schedule"] {
flex-direction: row;
max-height: calc((90vh - var(--padding) * 2) - ((var(--h4-fs) * 1.1) + (var(--padding) * 4)));
overflow: auto;
> .form-group {
flex: 1 1 100%;
}
.form-group:has(button) {
flex: 0 0 fit-content;
margin-left: auto !important;
margin-block: var(--padding) !important;
&:last-of-type {
margin-left: 0px!important;
&:has(#calendar_schedule_save) {
margin-left: auto !important;
}
}
button {
all: unset;
align-items: center;
position: relative !important;
inset: unset !important;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
}
}
}
}
}
& form {
& > .form-group, .form-field-input {
box-shadow: none;
padding: 0;
&:last-of-type:has(button) {
margin-left: auto!important;
}
}
}
}
}
}
/* Modal aviso festivo creado */
&#modal_contador_festivos {
& .modal-body {
padding: 0;
& .modal-title {
width: calc(100% + var(--padding) * 2);
margin-top: calc(var(--padding) * -1 - 1px);
margin-bottom: var(--20-10);
margin-left: calc(var(--padding) * -1);
border-radius: var(--form-radius) var(--form-radius) 0 0 !important;
padding: var(--padding) !important;
background-color: var(--primario-highlight) !important;
z-index: 0;
font-size: var(--h5-fs);
color: var(--primario) !important;
}
}
}
&[id*="modal_confirmacion"], &#modal_aviso_alumno_matricula, &#modal-confirmar-sync-alumnos, &#confirm-master-delete, &#confirm-delete, &#modal-confirmar-sync-matriculas, &#modal-eliminar-opciones, &#modal-config-orden {
& h3 {
position: relative;
width: calc(100% + var(--padding) * 2);
margin-top: calc(var(--padding) * -1 - 1px);
margin-left: calc(var(--padding) * -1);
border-radius: var(--form-radius) var(--form-radius) 0 0 !important;
padding: var(--padding) !important;
background-color: var(--primario-highlight) !important;
z-index: 0;
font-size: var(--h5-fs);
color: var(--primario) !important;
}
& .modal-footer {
width: calc(100% + var(--padding) * 2);
margin-left: calc(var(--padding) * -1);
margin-bottom: calc(var(--padding) * -1 - 1px);
margin-top: var(--padding);
background-color: var(--primario-highlight-medio) !important;
display: flex;
justify-content: flex-end;
gap: 10px;
padding: var(--padding);
border: none;
border-radius: 0 0 var(--form-radius) var(--form-radius) !important;
button {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
&[id*="modal_confirmacion"], &#modal-eliminar-opciones, &#modal-config-orden {
& .modal-body {
padding-block: var(--20-10);
}
& .modal-footer {
padding-top: var(--20-10);
margin-top: var(--20-10);
button {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
&#modal-confirmar-sync-alumnos {
& h3 {
width: calc(100% + var(--padding) * 4);
margin-top: calc(var(--padding) * -3);
margin-left: calc(var(--padding) * -2);
}
& .modal-body {
padding: 0;
margin-block: var(--padding);
}
}
/* Modal gestionar beca */
&#modal_gestionar_beca {
& .modal-dialog {
& .modal-content {
overflow: visible;
/* & .modal-header {
} */
& .modal-body {
max-height: 100%;
padding: 0;
& #modalGestionarBecaContenido {
& #wrapper #page-wrapper {
min-height: unset !important;
& .panel {
margin: 0;
box-shadow: none;
}
& .panel-heading {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--h4-fs);
font-weight: 600;
line-height: 1.1;
border: none;color: var(--primario);
position: relative;
width: calc(100% + var(--padding) * 2);
margin-top: calc(var(--padding) * -1 - 1px);
margin-left: calc(var(--padding) * -1);
border-radius: var(--form-radius) var(--form-radius) 0 0 !important;
padding: var(--padding) !important;
background-color: var(--primario-highlight) !important;
z-index: 0;
}
& .panel-body {
&:before, &:after {
display: none;
}
& #ehabilisgestiondelaformacionbundle_planformacionmatricula {
margin: 0;
padding: var(--10-5);
box-shadow: none;
}
}
}
}
}
}
}
}
/* Modales añadir / qiutar alumnos / docentes */
&:is(#modal_anadir_docentes, #modal_quitar_docentes, #modal_anadir_alumnos, #modal_quitar_alumnos, #modal_anadir_usuarios_notificacion_noticia){
/* Simulo overlay */
&::before {
content: '';
position: fixed;
inset: 0;
background-color: rgba(0,0,0,0.3);
}
/**********************/
& > .modal-dialog > .modal-content > .panel-body {
max-height: calc(100vh - var(--margin-v) * 2 - var(--15-10) * 3);
& #modalAnadirDocentesContenido, & #modalQuitarDocentesContenido, & #modalAnadirAlumnosContenido, & #modalQuitarAlumnosContenido {
--gap: var(--15-10);
& * {
float: none;
}
/* filtros modal */
& > form {
margin-top: calc(var(--padding) * -2);
margin-left: calc(var(--padding) * -1);
margin-right: calc(var(--padding) * -1);
padding: calc(var(--padding) * 2) var(--padding) var(--padding);
border-top-left-radius: var(--form-radius);
border-top-right-radius: var(--form-radius);
background: var(--primario-light);
& > .row {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
&:before, &:after {
display: none;
}
& > * {
flex: 1 1 calc(50% - var(--gap));
padding: 0!important;
&[class*="12"] {
flex: 1 1 100%;
}
}
&:last-of-type {
& > * {
flex: 1 1 fit-content;
max-width: fit-content;
}
}
}
& + .panel-default-layout {
& .panel-heading {
margin-top: 0;
border-radius: 0!important;
}
& form {
& .panel-body {
& .table-responsive {
max-height: calc(75vh - 230px);
overflow: auto;
}
}
& .panel-footer {
margin-bottom: calc(var(--padding) * -2);
}
}
}
}
/* Tabla de resultados */
#tablaListadoModal {
.table-responsive {
max-height: calc(75vh - 300px);
overflow: auto;
}
}
}
}
}
/* Modales validar acta de calificaciones */
&#modal_validar_acta {
& .modal-dialog {
& .modal-content {
padding: 0;
& .panel-body {
width: 100%;
margin: 0;
padding: 0;
& #modalValidarActaCalificacionContenido, #modalValidarActaEvaluacionContenido {
& .panel-default-layout {
padding: 0;
& .panel.panel-primary.center-block {
margin: 0;
& .panel-heading {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 var(--padding);
padding: var(--20-10);
border-radius: var(--form-radius) var(--form-radius) 0 0;
font-size: var(--h5-fs);
line-height: 1.1;
color: var(--primario);
background-color: var(--primario-highlight) !important;
font-weight: 500;
border: none;
> div {
display: flex;
align-items: center;
.glyphicon-plus {
width: var(--h4-fs);
height: var(--h4-fs);
margin-right: 10px;
font-size: 0;
background-image: url('../images/icono_ok_prim.svg');
background-size: contain;
}
}
&:before, &:after {
display: none;
}
}
& .panel-body {
& form {
&> .form-group {
display: flex;
flex-direction: column;
gap: var(--padding);
&> .grupo-campos {
display: flex;
flex-wrap: wrap;
gap: var(--padding);
&:before, &:after {
display: none;
}
/*Estado*/
& .form-field-input:not(.form-group) {
flex: 1 1 calc(33.33% - var(--padding));
display: flex;
align-items: center;
gap: 0;
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
& label {
display: flex;
align-items: center;
height: 100%;
white-space: nowrap;
margin: 0;
padding-inline: var(--10-5) calc(var(--10-5) + 10px);
padding-block: var(--10-5);
background-color: var(--primario-lighter);
font-size: var(--body-fs);
font-weight: 500;
line-height: 1;
color: var(--primario-dark);
clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
z-index: 2;
}
& .select2 {
min-height: unset;
height: 100%;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
font-size: var(--body-fs);
color: var(--primario-dark);
& .selection {
display: flex;
align-items: center;
width: calc(100% + 10px);
height: 100%;
background-color: var(--primario-extra-light);
padding-inline: calc(var(--10-5) + 10px) var(--10-5);
padding-block: var(--10-5);
margin-left: -10px;
line-height: 1;
& * {
all: unset;
min-width: fit-content;
}
& .select2-selection__arrow {
display: none;
}
}
}
}
& .form-group {
margin: 0;
padding: 0;
}
}
&> .form-group {
width: fit-content;
margin-left: auto;
padding: 0;
}
}
}
}
}
}
}
}
}
}
}
/* Modal Añadir Alumno en las notifiaciones de las noticias */
&#modal_anadir_usuarios_notificacion_noticia {
.modal-dialog {
& .modal-content {
overflow: visible;
> .panel-body {
margin-bottom: 0!important;
}
#filters_anadir_usuarios_notificacion_noticia {
/* filtros modal */
form {
--gap: var(--15-10);
margin-top: calc(var(--padding) * -2);
margin-left: calc(var(--padding) * -1);
margin-right: calc(var(--padding) * -1);
padding: calc(var(--padding) * 2) var(--padding) var(--padding);
border-top-left-radius: var(--form-radius);
border-top-right-radius: var(--form-radius);
background: var(--primario-light);
display: flex;
flex-wrap: wrap;
gap: var(--gap);
& > .row {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
&:before, &:after {
display: none;
}
& > * {
flex: 1 1 calc(50% - var(--gap));
padding: 0!important;
margin: 0!important;
&[class*="12"] {
flex: 1 1 100%;
}
}
&:last-of-type {
& > * {
flex: 1 1 fit-content;
max-width: fit-content;
}
}
}
& + .panel-default-layout {
& .panel-heading {
margin-top: 0;
border-radius: 0!important;
}
& form {
& .panel-body {
margin-bottom: 0!important;
& .table-responsive {
max-height: calc(75vh - 230px);
overflow: auto;
}
}
& .panel-footer {
margin-bottom: calc(var(--padding) * -2);
}
}
}
}
}
/* Resto modal */
.panel.panel-default {
.panel-heading {
margin-top: 0;
border-radius: 0!important;
}
}
}
}
}
/** MODAL AYUDA **/
&#modal_ayuda {
.modal-dialog {
.modal-content {
.modal-body, > .panel-body {
&.panel-body {
padding-top: 0 !important;
padding-inline: var(--padding) !important;
}
}
}
}
}
/* Modal expedición de título */
&#modal_emision_certificado_oficial_titulo {
.modal-dialog {
.modal-content {
overflow-y: unset!important;
scrollbar-width: unset!important;
padding-bottom: 0;
#modalEmisionCertificadoOficialTituloContenido {
width: calc(100% + var(--padding) * 2 + 2px);
margin-left: calc(var(--padding) * -1 - 1px);
margin-top: calc(var(--padding) * -1 - 1px);
padding-top: 0;
max-height: 100%;
#page-wrapper {
all: unset!important;
display: flex;
flex-direction: column;
.panel.panel-primary.center-block {
margin: 0;
.panel-heading {
all: unset;
position: relative;
width: calc(100% - var(--padding) * 2);
border-radius: var(--form-radius) var(--form-radius) 0 0 !important;
padding: var(--padding) !important;
background-color: var(--primario-highlight) !important;
z-index: 0;
font-size: var(--h5-fs);
color: var(--primario) !important;
display: flex;
}
.panel-body {
margin: 0;
padding: var(--padding);
#ehabilisgestiondelaformacionbundle_expediente {
.form-group {
margin: 0;
width: 100%;
box-shadow: none;
}
}
}
}
}
}
}
}
}
}
/** LAYOUTS **/
.row {
margin-inline: 0;
}
/** HEADER **/
#wrapper nav.navbar.navbar-default {
--gap: var(--40-20);
/* position: unset; */
display: flex;
align-items: center;
gap: var(--gap);
height: var(--header-height);
background-color: #fff;
box-shadow: none;
&:before, &:after {
display: none;
}
/* Logotipo */
& .navbar-header {
display: flex;
justify-content: center;
align-items: center;
height: var(--header-height);
width: var(--sidebar-left-w);
margin: 0;
& .navbar-brand {
width: 100%;
height: 100%;
margin: 0%;
padding: 0;
float: none;
/* background-image: url(../images/logotipo.jpg); */
background-image:url('../images/logotipo.png');
background-size: 90%;
background-repeat: no-repeat;
background-position: center;
font-size: 0;
}
}
/* Menú y Filtro */
& > :is(#collapse-menu, #collapse-rightnav).btn.btn-info {
display: flex;
align-items: center;
gap: 5px;
width: fit-content;
height: calc(var(--body-fs)* 1.2);
margin: 0;
padding: 0;
line-height: 1;
font-weight: 500;
border: none!important;
background: none!important;
border-radius: 0;
color: var(--primario);
overflow: hidden;
transition: var(--tr00)!important;
&:hover {
color: var(--primario-accent)!important;
}
&:before {
content:'';
display: block;
height: calc(var(--body-fs)* 1.3);
width: auto;
aspect-ratio: 1 / 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}
& > #collapse-menu.btn-info {
/* Mimnimizar*/
&:before {
background-image: url('../images/minimizar_prim.svg');
}
&:hover {
&:before {
background-image: url('../images/minimizar_accent.svg');
}
}
/* Maximizar */
body:has(#page-wrapper.menu-active) & {
&:before {
background-image: url('../images/maximizar_prim.svg');
}
&:hover {
&:before {
background-image: url('../images/maximizar_accent.svg');
}
}
}
}
& > #collapse-rightnav.btn-info {
/* Maximizar normal */
&:before {
background-image: url('../images/maximizar_prim.svg');
}
&:hover {
&:before {
background-image: url('../images/maximizar_accent.svg');
}
}
/* Minimizar */
body:has(#page-wrapper.right-nav-active) & {
&:before {
background-image: url('../images/minimizar_prim.svg');
}
&:hover {
&:before {
background-image: url('../images/minimizar_accent.svg');
}
}
}
}
/* Menú usuario */
& ul.navbar-top-links {
margin-left: auto;
margin-right: var(--40-20);
& li.dropdown {
margin: 0;
& a.dropdown-toggle {
display: flex;
justify-content: center;
align-items: center;
gap: var(--10-5);
padding: 0;
color: var(--primario);
transition: var(--tr04);
background: none;
& .nav-user-name {
margin: 0;
font-size: var(--body-fs);
font-weight: 500;
color: inherit;
transition: var(--tr04);
.rolPr {
display: flex;
gap: 3px;
flex-wrap: wrap;
align-items:first baseline;
span {
font-size: calc(var(--small-fs) - 2px)!important;
font-weight: 300;
&:first-of-type {
font-size: var(--small-fs)!important;
font-weight: 400;
}
}
}
}
& .fa.fa-user.fa-fw {
--avatar-size: 50px;
display: flex;
justify-content: center;
align-items: center;
height: var(--avatar-size);
width: var(--avatar-size);
aspect-ratio: 1;
margin: 0;
padding: 0;
border: 3px solid currentColor;
box-shadow: var(--shadow-avatar);
border-radius: var(--full-radius);
transition: var(--tr04);
&:before {
content: '';
display: block;
width: 100%;
height:100%;
background-image: url(../images/user-default.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
& .fa.fa-caret-down {
position: absolute;
top: 0;
bottom: 0;
left: calc(100% - calc(var(--body-fs) / 2));
right: 0;
width: var(--body-fs);
height: var(--body-fs);
padding: var(--10-5);
margin: auto;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: var(--full-radius);
background-color: var(--primario);
box-shadow: var(--shadow-avatar);
transition: var(--tr04);
&:before {
content: '\f107';
color: white;
transition: var(--tr04);
}
}
&:hover {
color: var(--primario-accent);
transition: var(--tr04);
& .fa.fa-caret-down {
background-color: var(--primario-accent);
transition: var(--tr04);
}
}
}
/* desplegado */
&.open {
& .fa.fa-caret-down:before {
content: '\f106'!important;
transition: var(--tr04);
}
}
}
}
}
@media (max-width: 600px) {
#wrapper nav.navbar.navbar-default {
& ul.navbar-top-links {
& li.dropdown {
& a.dropdown-toggle {
& .nav-user-name {
.rolPr {
width: min-content;
span {
&:first-of-type {
display: none;
}
}
}
}
}
}
}
}
}
/** SIDEBAR MENÚ **/
#wrapper #menu-sidebar {
width: var(--sidebar-left-w);
top: var(--header-height);
padding: 0;
background-color: var(--primario);
max-height: calc(100vh - var(--header-height));
& ul#side-menu {
overflow: auto;
& li {
border: none;
&:hover {
background-color: initial;
color: #fff;
}
& a {
color: white;
font-size: calc(var(--body-fs) - 2px);
display: flex;
align-items: flex-start;
gap: 8px;
padding: var(--10-5);
font-weight: 400;
line-height: 1.2;
box-shadow: 0 1px 2px var(--primario-medio);
background-color: unset;
transition: var(--tr00);
& i.glyphicon {
--size: var(--body-fs);
width: var(--size);
height: var(--size);
font-size: 0;
color: inherit;
margin: 0;
background-size: cover;
transition: var(--tr00);
/* Home */
#home & {
background-image: url('../images/home_blanco.svg');
a:hover & {
background-image: url('../images/home_prim.svg');
}
.active & {
background-image: url('../images/home_accent.svg');
}
}
/* mensajería */
#mensajeria & {
background-image: url('data:image/svg+xml,');
a:hover & {
background-image: url('data:image/svg+xml,');
}
.active & {
background-image: url('data:image/svg+xml,');
}
}
/* Buzón de firmas */
#buzonFirma & {
background-image: url('../images/buzon_firmas_blanco.svg');
a:hover & {
background-image: url('../images/buzon_firmas_prim.svg');
}
.active & {
background-image: url('../images/buzon_firmas_accent.svg');
}
}
/* Mapa titulaciones */
#mapa-titulaciones & {
background-image: url('../images/mapa_titulaciones_blanco.svg');
a:hover & {
background-image: url('../images/mapa_titulaciones_prim.svg');
}
.active & {
background-image: url('../images/mapa_titulaciones_accent.svg');
}
}
/* Gestión de planes lectivos */
#gestion_planes_lectivos & {
background-image: url('../images/gestion_planes_lectivos_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/gestion_planes_lectivos_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/gestion_planes_lectivos_accent.svg');
}
}
/* Secreataría */
#gestion-matriculas & {
background-image: url('../images/secretaria_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/secretaria_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/secretaria_accent.svg');
}
}
/* Gestión de expedientes */
#expedientes_personas & {
background-image: url('../images/gestion_expedientes_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/gestion_expedientes_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/gestion_expedientes_accent.svg');
}
}
/* Plan de ordenación académica */
#plan_ordenacion_academica & {
background-image: url('../images/plan_ordenacion_academica_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/plan_ordenacion_academica_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/plan_ordenacion_academica_accent.svg');
}
}
/* Gestión deconómica */
#gestion_economica & {
background-image: url('../images/gestion_economica_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/gestion_economica_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/gestion_economica_accent.svg');
}
}
/* Ocupación de aulas */
#ocupacion-aula & {
background-image: url('../images/ocupacion_aula_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/ocupacion_aula_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/ocupacion_aula_accent.svg');
}
}
/* Calidad */
#calidad & {
background-image: url('../images/calidad_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/calidad_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/calidad_accent.svg');
}
}
/* Exlplotación de datos */
#explotacion_datos & {
background-image: url('../images/explotacion_datos_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/explotacion_datos_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/explotacion_datos_accent.svg');
}
}
/* Gestión de datos maestros */
#admin_maestros & {
background-image: url('../images/gestion_datos_maestros_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/gestion_datos_maestros_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/gestion_datos_maestros_accent.svg');
}
}
/* Gestión de administradores */
#gestion-administradores & {
background-image: url('../images/gestion_administradores_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/gestion_administradores_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/gestion_administradores_accent.svg');
}
}
/* Cuadro de mandos */
#cuadro_de_mando & {
background-image: url('../images/cuadro_mandos_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/cuadro_mandos_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/cuadro_mandos_accent.svg');
}
}
/* Gestión de noticias */
#gestion_noticias & {
background-image: url('../images/gestion_noticias_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/gestion_noticias_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/gestion_noticias_accent.svg');
}
}
/* Gestión de prácticas */
#gestion_practicas & {
background-image: url('../images/gestion_practicas_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/gestion_practicas_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/gestion_practicas_accent.svg');
}
}
/* Acccesos directos */
#accesos-directos & {
background-image: url('../images/accesos_directos_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/accesos_directos_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/accesos_directos_accent.svg');
}
}
/* Manuales */
#manuales & {
background-image: url('../images/manuales_blanco.svg');
a:hover & { /*2c3862*/
background-image: url('../images/manuales_prim.svg');
}
.active & { /*5377f5*/
background-image: url('../images/manuales_accent.svg');
}
}
}
& span.fa.arrow {
margin-left: auto;
font-size: inherit;
font-weight: 900;
color: whiteinherit;
float: none;
line-height: 1.2;
&:before {
content:'\f107';
}
}
&:hover, &:focus {
background-color: var(--primario-highlight);
color: var(--primario);
margin: 0;
}
}
&.current {
& > a {
background-color: var(--primario-extra-light);
color: var(--primario-accent)!important;
& i.glyphicon, & span.fa.arrow {
color: inherit!important;
}
&:hover {
background-color: var(--primario-highlight);
color: var(--primario)!important;
margin: 0;
& i.glyphicon, & span.fa.arrow {
color: inherit!important;
}
}
}
}
&.current_ancestor {
& ul.nav-second-level {
& li {
&.current {
background-color: #fff;
}
&:not(.current) {
background-color: var(--primario-highlight-light);
a {
color: var(--primario-medio);
&:hover {
color: var(--primario)!important;
}
}
}
}
}
}
&.active {
& > a {
background-color: var(--primario-lighter);
color: var(--primario-accent)!important;
& i.glyphicon, & span.fa.arrow {
color: inherit!important;
}
&:hover {
background-color: var(--primario-highlight);
color: var(--primario)!important;
margin: 0;
& i.glyphicon {
color: inherit!important;
}
& span.fa.arrow {
color: inherit!important;
&:before {
content:'\f106';
}
}
}
}
& > a {
& span.fa.arrow {
&:before {
content:'\f106';
}
}
}
& ul.nav-second-level li {
background: none;
& a {
background-color: var(--primario-highlight-light);
color: var(--primario-medio) !important;
&:hover {
background-color: var(--primario-highlight);
color: var(--primario)!important;
margin: 0;
& i.glyphicon {
color: inherit!important;
}
}
}
}
}
/* aviso notificaciones */
.badge {
margin-left: auto;
margin-right: 0!important;
background-color: var(--primario-accent);
font-weight: 400;
}
}
}
}
/** SIDEBAR FILTROS **/
#wrapper #nav-right {
max-height: calc(100vh - var(--margin-top));
--margin-top: calc(var(--header-height) + var(--small-fs) + var(--10-5) + 2px);
margin-top: var(--margin-top);
padding: var(--15-10);
border: none;
border-radius: 0;
box-shadow: none;
background-color: var(--primario-extra-light);
color: var(--primario);
& #filters {
max-height: 100%;
overflow: auto;
margin: 0;
& label {
&.control-label {
white-space: normal;
}
}
& select, select.form-control {
background-color: #fff;
&:focus {
border-color: var(--primario-accent);
box-shadow: 0 0 6px 2px var(--primario-accent);
}
}
& form {
display: flex;
flex-wrap: wrap;
gap: var(--15-10);
padding-inline: 5px;
& > * {
flex: 1 1 100%;
max-width: 100%;
float: none;
padding: 0;
}
& .filter-date-range {
display: flex;
gap: 5px;
}
/*selects*/
.select2-container {
position: relative;
.selection {
.select2-selection {
.select2-selection__rendered {
position: relative;
.select2-selection__clear {
top: 0;
bottom: 0;
margin-block: auto;
float: none;
left: 100%;
width: 15px;
height: 25px;
background-color: #fff;
position: absolute;
right: 0;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
}
}
}
& .botones, > .form-group:has(button) {
flex:0 0 fit-content !important;
padding-bottom: 25px;
& + .form-group.col-lg-12.col-md-4 {
margin: 0;
}
}
}
button {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
/** BLOQUE CENTRAL **/
#wrapper #page-wrapper {
min-height: 100vh!important;
margin-left: var(--sidebar-left-w);
padding-top: var(--header-height) !important;
padding-bottom: 0!important;
padding-inline: var(--15-10)!important;
border: none;
transition: var(--tr04);
position: relative;
/* z-index: 1000; */
&.menu-active {
margin-left: 0;
}
& > .row {
margin: 0;
& > .panel {
border: none;
box-shadow: none;
}
/** PORTADA CON BLOQUES - DISEÑO PREMIUM **/
&> .col-md-12:not(.panel-default-layout) {
padding: 0;
& .divPadre {
--gap: 30px;
--transition-time: 0.6s;
--card-radius: 20px;
display: grid;
grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
grid-auto-rows: auto;
grid-auto-flow: dense;
gap: var(--gap);
padding: 40px 30px;
& .enlaceA {
text-decoration: none;
position: relative;
/* Efecto glow al hover del enlace - tonos más oscuros y premium */
&::before {
content: '';
position: absolute;
inset: -8px;
border-radius: calc(var(--card-radius) + 8px);
background: linear-gradient(135deg,
var(--primario-dark) 0%,
var(--primario) 40%,
var(--primario-medio) 70%,
var(--secundario-dark) 100%);
opacity: 0;
z-index: -1;
filter: blur(25px);
transition: opacity var(--transition-time) ease-in-out;
}
&:hover::before {
opacity: 0.4;
}
& .panel {
display: flex;
flex-direction: column;
justify-content: stretch;
position: relative;
width: 100%;
height: auto;
aspect-ratio: 1.5 / 1;
margin:0;
border:none;
border-radius: var(--card-radius);
/* Sombra premium oscura y profunda */
box-shadow:
0 10px 25px rgba(22, 28, 49, 0.15),
0 6px 12px rgba(44, 56, 98, 0.12),
0 3px 6px rgba(44, 56, 98, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(44, 56, 98, 0.05);
text-align: center;
overflow:hidden;
transition:
transform var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow var(--transition-time) ease-in-out;
transform-style: preserve-3d;
/* Fondo premium con tonos oscuros sutiles */
background: linear-gradient(145deg,
#fafbfd 0%,
#f4f6fa 50%,
#fafbfd 100%);
border: 1px solid rgba(44, 56, 98, 0.08);
& :is(.flip-card-front, .flip-card-back) {
position: absolute;
display: flex;
justify-content: stretch;
align-content: center;
flex-direction: column;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* FRONT card */
& .flip-card-front {
opacity:1;
transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
/* Badge con indicador de atajo de teclado */
&::after {
content: 'Alt+' attr(data-shortcut);
position: absolute;
top: 10px;
right: 10px;
padding: 4px 8px;
line-height: 1;
text-align: center;
background: linear-gradient(135deg,
rgba(72, 92, 161, 0.92) 0%,
rgba(44, 56, 98, 0.88) 100%);
color: rgba(255, 255, 255, 0.95);
font-size: 10px;
font-weight: 700;
border-radius: 12px;
box-shadow:
0 2px 8px rgba(44, 56, 98, 0.35),
0 0 0 2px rgba(72, 92, 161, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
z-index: 10;
opacity: 1;
transform: scale(1);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
white-space: nowrap;
letter-spacing: 0.3px;
} &> * {
display: flex;
justify-content: center;
align-content: center;
}
& .icono {
--color1: var(--primario-dark);
--color2: var(--primario);
--color3: var(--primario-medio);
display: flex;
justify-content:center;
align-items: center;
height: 45%;
/* Gradiente oscuro y premium con 3 tonos */
background: linear-gradient(135deg,
var(--color1) 0%,
var(--color2) 50%,
var(--color3) 100%);
border-bottom-left-radius: 50% 30%;
border-bottom-right-radius: 50% 30%;
position: relative;
overflow: hidden;
/* Efecto de brillo sutil y elegante */
&::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.15) 0%,
rgba(125, 97, 22, 0.1) 50%,
transparent 70%
);
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
/* Sombra inferior profunda y oscura */
&:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: -2px;
border-bottom-left-radius: 50% 30%;
border-bottom-right-radius: 50% 30%;
z-index: -1;
filter: blur(15px);
background: linear-gradient(135deg,
rgba(22, 28, 49, 0.8) 0%,
rgba(44, 56, 98, 0.6) 50%,
rgba(72, 92, 161, 0.4) 100%);
opacity: 0.7;
}
& .glyphicon {
position: relative;
z-index: 2;
filter: drop-shadow(0 6px 15px rgba(22, 28, 49, 0.4));
animation: float 3s ease-in-out infinite;
&:before {
color:white;
font-size: 48px;
text-shadow:
0 3px 12px rgba(22, 28, 49, 0.5),
0 1px 3px rgba(0, 0, 0, 0.3);
}
}
}
& .title {
height: 55%;
padding: 30px 20px;
/* Fondo neutro premium */
background: linear-gradient(180deg,
rgba(255,255,255,0.98) 0%,
rgba(248,250,252,1) 50%,
rgba(255,255,255,0.95) 100%);
&> * {
display: flex;
justify-content: center;
align-items:center;
width: 100%;
height: auto;
}
& > h2 {
margin: 0;
font-size: var(--h4-fs);
font-weight: 500;
line-height: 1.3;
color: var(--primario);
letter-spacing: -0.5px;
text-shadow: 0 1px 3px rgba(44, 56, 98, 0.08);
}
}
}
/* BACK card - Reverso con colores corporativos */
& .flip-card-back {
display: flex;
justify-content: center;
align-content: center;
padding: 35px 30px;
opacity:0;
transform: rotateY(180deg);
transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1);
/* Gradiente premium con toques dorados sutiles */
background: linear-gradient(135deg,
#fafbfd 0%,
#f4f6fa 30%,
rgba(230, 200, 119, 0.06) 100%);
border: 2px solid var(--primario-lighter);
box-shadow:
inset 0 0 40px rgba(44, 56, 98, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
/* Decoración de fondo sutil con tonos oscuros */
&::before {
content: '';
position: absolute;
top: -30%;
right: -30%;
width: 80%;
height: 80%;
background: radial-gradient(
circle,
rgba(44, 56, 98, 0.08) 0%,
rgba(125, 97, 22, 0.05) 50%,
transparent 70%
);
opacity: 0.8;
}
/* Segundo elemento decorativo dorado oscuro */
&::after {
content: '';
position: absolute;
bottom: -20%;
left: -20%;
width: 60%;
height: 60%;
background: radial-gradient(
circle,
rgba(125, 97, 22, 0.08) 0%,
transparent 70%
);
opacity: 0.6;
}
& h5 {
position: relative;
z-index: 1;
margin-bottom: 15px;
font-size: var(--h5-fs);
font-weight: 700;
line-height: 1.3;
color: var(--primario);
text-shadow: 0 2px 4px rgba(44, 56, 98, 0.08);
}
& p {
position: relative;
z-index: 1;
line-height: 1.6;
font-size: var(--body-fs);
color: var(--primario-medio);
font-weight: 400;
text-shadow: 0 1px 2px rgba(44, 56, 98, 0.03);
}
}
}
&:hover {
& .panel {
transform: rotateY(180deg) translateY(-8px);
/* Sombra elevada premium con tonos oscuros */
box-shadow:
0 25px 50px rgba(22, 28, 49, 0.2),
0 15px 30px rgba(44, 56, 98, 0.15),
0 8px 16px rgba(44, 56, 98, 0.1),
0 0 2px rgba(44, 56, 98, 0.3),
0 0 40px rgba(125, 97, 22, 0.12);
/* FRONT card */
& .flip-card-front {
opacity:0;
transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1);
/* Animar badge al hacer hover */
&::after {
transform: scale(1.15);
}
& .icono::before {
opacity: 1;
}
}
/* BACK card */
& .flip-card-back {
backface-visibility: visible;
background-color:white;
opacity:1;
transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1);
}
}
}
}
}
}
/* Animación flotante para los iconos */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/*************************/
/*Breadcrumbs*/
& #enlaces_migas {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--10-5);
background-color: transparent;
padding: 0;
font-size: var(--small-fs);
margin-bottom: var(--10-5);
& li {
margin: 0;
& a {
display: inline-flex;
align-items: center;
gap: var(--10-5);
font-size: var(--small-fs);
line-height: 1;
color: var(--primario);
transition: var(--tr04);
&:hover {
color: var(--primario-accent);
text-decoration: none;
transition: var(--tr04);
}
}
&:first-child {
font-size: 0;
& a {
&:before {
content: '';
--size: var(--body-fs);
width: var(--size);
height: var(--size);
font-size: 0;
color: inherit;
margin: 0;
background-size: cover;
transition: var(--tr00);
background-image: url('../images/home_prim.svg');
}
}
}
&:not(:first-child) {
& a {
padding-left: calc(var(--10-5) / 2);
}
}
&:last-child {
& a {
font-weight: 500;
}
}
}
/* Título del aula en el calendatrio */
&+ .form-group.float-right {
width: 100%;
padding: var(--15-10) 0 var(--10-5);
text-align: center;
& h3#aulario-text-date {
margin: 0;
padding: 0;
font-size: var(--h4-fs) !important;
font-weight: 400;
}
/* Botón volver a vista aulario desde el aula */
+ .btn-group:has(#btn-redirect-aulario) {
float: none;
display: flex;
width: 100%;
padding: 0 0 var(--15-10);
text-align: center;
margin-bottom: 40px;
justify-content: flex-end;
#btn-redirect-aulario {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
}
/* Formulario Crear clases en calendario */
& > .form-group {
padding-top: var(--40-20);
margin-bottom: 0;
&:has(#importacion-clases) {
margin-top: var(--15-10);
padding: 0;
float: none;
display: flex;
width: fit-content;
margin-left: auto;
}
&:has(#crear-festivo-button, #crear-clases-button) {
margin-block: var(--15-10);
padding: 0;
float: right;
display: flex;
width: fit-content;
margin-left: 10px;
#crear-festivo-button, #crear-clases-button {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
& button {
width: fit-content;
min-height: unset;
&#importacion-clases, &#btn-aulario-planformacion-calendario {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
/* Pestañas */
& #nav-tab.nav-tabs {
border: none;
& li {
margin: 0;
& a {
--border-width: 2px;
margin-right: 0.1rem;
padding: var(--10-5) var(--15-10) calc(var(--10-5) - var(--border-width));
border: none;
border-bottom: var(--border-width) solid var(--primario-lighter);
border-radius: 0;
background-color: var(--primario-lighter);
color: var(--primario);
font-size: var(--small-fs);
line-height: 1;
&.active {
font-weight: 500;
background-color: var(--primario-extra-light);
border-bottom-color: var(--primario-accent);
pointer-events: none;
}
&:hover {
background-color: var(--primario-highlight);
border-bottom-color: var(--primario-highlight);
color: var(--primario);
}
}
}
}
& .panel-default-layout {
padding: 0;
& > .panel.panel-default {
border: none;
margin-bottom: var(--20-10);
}
}
& .panel-primary {
border: none;
}
/* encabezado */
& .panel-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--10-5);
flex-wrap: wrap;
padding: var(--20-10);
font-size: var(--h4-fs);
font-weight: 500;
line-height: 1.1;
background-color: var(--primario-extra-light);
border: none;
border-radius: 0;
color: var(--primario);
/* Iconos */
.glyphicon-ok {
width: var(--h2-fs);
height: var(--h2-fs);
font-size: 0;
background-image: url('../images/icono_ok_prim.svg');
background-size: contain;
}
.glyphicon-pencil {
width: var(--h4-fs);
height: var(--h4-fs);
margin-right: 10px;
font-size: 0;
background-image: url('../images/icono_pencil_prim.svg');
background-size: contain;
}
.glyphicon-plus {
width: var(--h4-fs);
height: var(--h4-fs);
margin-right: 10px;
font-size: 0;
background-image: url('../images/icono_crear_prim.svg');
background-size: contain;
}
#dropdownMenuLink {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
height: 32px;
.caret {
border-top: 6px solid var(--primario);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
& .tui-full-calendar-content {
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
}
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
&:before {
content: '';
width: var(--h6-fs);
height: var(--h6-fs);
font-size: 0;
background-image: url('../images/icono_descarga_prim.svg');
background-size: contain;
}
}
/* Botón ? ayuda */
.btn.btn-success.modal-ayuda {
--size: calc(var(--body-fs) * 1.3);
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
aspect-ratio: 1 / 1;
padding: 0;
border: none;
border-radius: var(--full-radius);
background-color: var(--primario);
flex-grow: 0;
margin-right: auto;
margin-top: -1.5rem;
margin-left: 0.5rem;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
&:is(:hover, :active, :focus) {
background-color: var(--primario-accent) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
transform: translateY(-2px);
}
&:before {
content: '?';
font-family: var(--font-family);
font-size: var(--body-fs);
line-height: 1;
letter-spacing: 0;
font-weight: 500;
color: #fff;
}
}
> * {
flex: 1 1 auto;
}
/* Botones */
.btn-group {
display: flex;
#anadir-alumnos-button {
margin-left: auto;
}
}
/* Botones de validar / desvalidar selección de clases */
#validar-clases-seleccionadas, #desvalidar-clases-seleccionadas {
position: unset!important;
}
&:before, &:after {
display: none;
}
& > [class*="col"] {
max-width: fit-content;
}
& > .row {
--gap: var(--10-5);
display: flex;
justify-content: space-between;
align-items: center;
row-gap: calc(var(--gap) * 1.66);
column-gap: var(--gap);
flex-wrap: wrap;
width: 100%;
&:before, &:after {
display: none;
}
& > div {
padding: 0;
width: fit-content;
/* Título*/
&:first-child {
display: flex;
align-items: center;
margin-right: auto;
& h4 {
margin: 0;
font-weight: 500;
}
/* Gestión de cobros -> Código de matrícula */
& .datos-alumno-matricula {
font-size: var(--body-fs);
& > div {
width: 100%;
& ul {
display: inline-flex;
gap: var(--gap);
flex-wrap: wrap;
padding: 0;
list-style: none;
& br {
display:none;
}
& li {
display: flex;
flex-grow: 1;
white-space: nowrap;
font-size: 0;
font-weight: 500;
& key {
margin: 0;
padding-inline: var(--10-5) calc(var(--10-5) + 10px);
padding-block: 5px;
background-color: var(--primario-highlight);
font-size: var(--body-fs);
color: var(--primario-dark);
clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
& value {
width: 100%;
margin-left: -10px;
font-size: var(--body-fs);
background-color: var(--primario-lighter);
padding-inline: calc(var(--10-5) + 10px) var(--10-5);
padding-block: 5px;
color: var(--primario);
& a {
color: var(--primario-medio);
&:hover {
color: var(--primario-accent);
text-decoration: none;
}
}
}
}
}
}
}
}
/* Botones */
&:nth-child(2) {
margin-left: auto;
font-size: var(--body-fs);
& > div {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--10-5);
& label {
margin-bottom: 0;
margin-right: 5px;
font-weight: 500;
&:has(+ select:not(.form-control)) {
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
}
}
& select:not(.form-control) {
align-items: center;
background-color: /*var(--primario-highlight-medio);*/ #fff;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: 0 5px 0 var(--10-5);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
}
& > :is(.btn, .btn-group) {
font-size: var(--small-fs);
border-radius: var(--btn-radius);
display: flex;
align-items: center;
& .float-right {
float: none;
order: 1;
& a.btn-sm.btn-default.glyphicon {
order: 1;
width: var(--h6-fs);
height: var(--h6-fs);
margin-left: var(--10-5);
padding: 0;
font-size: var(--h6-fs);
line-height: 1;
background-color: transparent;
color: var(--primario);
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px;
background-size: 90%;
background-repeat: no-repeat;
background-position: center;
&:hover, &:focus {
color: var(--primario-accent);
text-decoration: none;
}
/* Iconos */
&.glyphicon-th-list {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/icono_volver_prim.svg');
background-size: contain;
}
&.glyphicon-edit {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/icono_editar_prim.svg');
}
&.glyphicon-stats {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/icono_resumen_prim.svg');
}
&.glyphicon-duplicate {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/icono_clonar_prim.svg');
}
&.glyphicon-eye-open {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/eye-scan-prim.svg');
background-size: contain;
}
&:hover, &:focus {
opacity: 0.8;;
text-decoration: none;
}
& + .hidden-xs.btn.btn-info.dropdown-toggle {
border-radius: var(--form-radius);
}
}
& + .dropdown.btn-group {
& .hidden-xs.btn.btn-info.dropdown-toggle {
border-radius: var(--btn-radius);
}
}
}
/*único*/
&:only-child, :first-child:last-child {
border-radius: var(--btn-radius);
}
/* Primero de varios */
&:first-child:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* los del medio */
& ~ :is(.btn, .btn-group):not(:last-child) {
border-radius: 0;
}
/* Último de varios */
&:last-of-type:not(:first-of-type) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
& .btn {
&.updateGrades {
border-radius: var(--btn-radius)!important;
}
&.calificacion-total {
border-top-right-radius: var(--btn-radius)!important;
border-bottom-right-radius: var(--btn-radius)!important;
}
&[data-target="#modalImportar"] {
border-right: none;
}
}
}
}
}
/* Filtros con display none */
&:nth-child(3){
display: none;
}
}
& + .col-md-12 {
display: none;
}
}
/* Botones en edición */
& > [class*="float-"] {
flex: 0 0 fit-content;
display: flex;
align-items: center;
flex-wrap: wrap;
}
& > .float-right, .text-right {
margin-left: auto;
& > .btn-group {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 3px;
width: fit-content;
margin-left: auto;
min-height: 30px;
margin-top: -2px;
/* Botón exportar remesas */
.dropdown.remesas-show-export {
max-height: fit-content;
display: flex;
margin-left: 5px;
}
& > a.btn-sm.btn-default.glyphicon {
order: 1;
width: 32px;
height: 32px;
margin-left: var(--10-5);
padding: 0;
font-size: var(--h5-fs);
line-height: 1;
background-color: #fff;
color: var(--primario);
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
background-size: var(--h5-fs);
background-repeat: no-repeat;
background-position: top 3px center;
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
/* Iconos */
&.glyphicon-th-list {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/icono_volver_prim.svg');
}
&.glyphicon-edit {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/icono_editar_prim.svg');
}
&.glyphicon-stats {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/icono_resumen_prim.svg');
}
&.glyphicon-duplicate {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/icono_clonar_prim.svg');
}
&.glyphicon-eye-open {
width: var(--h4-fs);
height: var(--h4-fs);
font-size: 0;
background-image: url('../images/eye-scan-prim.svg');
}
&.glyphicon-download-alt {
font-size: 0;
background-image: url('../images/icono_descarga_prim.svg');
}
&:hover, &:focus {
opacity: 0.8;;
text-decoration: none;
}
& + .hidden-xs.btn.btn-info.dropdown-toggle {
border-radius: var(--form-radius);
}
}
& > a:not(.glyphicon), & > button:not(.glyphicon), & > .dropdown.btn-group {
border-radius: var(--form-radius) !important;
margin: 0;
> .btn.dropdown-toggle {
border-radius: var(--form-radius) !important;
}
}
& > :last-child {
border-top-right-radius: var(--form-radius);
border-bottom-right-radius: var(--form-radius);
button:only-of-type {
border-radius: var(--form-radius);
}
}
}
}
}
/* Cuerpo */
& .panel-body {
padding: 0;
margin-block: var(--15-10);
/** Deshacer float de bootstrap **/
& div[class*="col"] {
float: none;
}
& > h3 {
color: var(--primario);
font-weight: 500;
margin-block: var(--15-10);
font-size: var(--h6-fs);
}
/* Tabla Adaptaciones */
#ver_maestro_equivalencia {
& #tablaAdaptaciones {
flex: 1 1 100%;
& #cabeceraTablaAdaptaciones {
& .row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0;
&:before, &:after {
display: none;
}
h5 {
width: 100%;
align-items: center;
padding: var(--20-10);
font-size: var(--h6-fs);
background-color: var(--primario-highlight-light);
color: var(--primario);
display: flex;
margin-block: 0;
}
h6 {
width: 100%;
align-items: center;
padding-block: var(--10-5) var(--20-10);
font-size: var(--h6-fs);
color: var(--primario);
display: flex;
margin-block: 0;
text-decoration: underline 2px var(--primario-accent);
}
&:last-of-type {
gap: 0 10px;
padding: var(--15-10);
background-color: var(--primario-highlight-light);
& > [class*="columna"] {
max-width: 100%;
margin: 0;
padding: 0;
width: fit-content;
display: flex;
align-items: center;
line-height: 1;
.form-group {
label {
margin: 0;
}
}
> * {
margin: 0;
padding-inline: 0!important;
}
}
& .columnaOrigen {
position: relative;
.form-group {
display: flex;
flex-direction: column;
}
&:after {
content: '';
--size: 25px;
height: var(--size);
width: var(--size);
margin-block: auto;
background-image: url(../images/chevron-double-right.svg);
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
margin-left: 5px;
}
}
& .columnaDestino {
position: relative;
.form-group {
display: flex;
flex-direction: column;
}
}
}
}
& hr {
display: none;
}
}
& > #cuerpoTablaAdaptaciones {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0;
&:before, &:after {
display: none;
}
& hr {
display: none;
}
& .fila-adaptacion {
margin: 0 0 var(--10-5);
border: none;
padding: var(--15-10);
color: var(--primario);
display: flex;
gap: 0 30px;
flex-wrap: wrap;
background-color: #f6f6f6;
.col-lg-1.col-md-1.col-1 {
flex: 1 1 100%;
margin-bottom: var(--10-5);
padding: 0;
label {
padding-left: 0 var(--20-10);
font-size: var(--body-fs);
color: var(--primario);
text-transform: capitalize;
&:after {
content:':';
}
}
span.input {
font-size: var(--body-fs);
color: var(--primario);
}
}
& > [class*="columna"] {
max-width: 100%;
margin: 0;
width: calc(50% - 15px);
display: flex;
align-items: flex-start;
line-height: 1;
flex-wrap: wrap;
padding: var(--15-10);
min-width: unset;
border: 1px solid var(--primario-highlight);
border-radius: var(--form-radius);
h6 {
width: 100%;
font-size: var(--body-fs);
color: var(--primario);
margin-bottom: var(--10-5);
}
> * {
margin: 0;
}
.container-fluid {
width: 100%;
margin-bottom: 15px;
padding: 0;
&:last-of-type {
margin-bottom: 0;
}
&:only-of-type {
margin: 0;
}
.fila-asignatura {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 5px;
&:before, &:after {
display: none;
}
> * {
width: fit-content;
padding: 0;
margin: 0;
&.numero-creditos {
max-width: fit-content;
height: fit-content;
padding: 5px;
background: var(--primario-highlight);
margin: -5px 0;
border-radius: var(--form-radius);
color: var(--primario-dark);
font-weight: 500;
}
}
}
}
}
& .columnaOrigen {
position: relative;
&:after {
content: '';
--size: 25px;
height: var(--size);
width: var(--size);
margin-block: auto;
background-image: url(../images/chevron-double-right.svg);
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
position: absolute;
bottom: 0;
right: -30px;
top: 0;
}
}
}
}
}
/* Responsive */
@media (max-width:999px) {
#tablaAdaptaciones {
& > #cuerpoTablaAdaptaciones {
& .fila-adaptacion {
flex-direction: column;
.col-lg-1.col-md-1.col-1 {
width: 100%;
flex: unset;
}
> [class*="columna"] {
width: 100%;
&.columnaOrigen {
margin-bottom: 30px;
&::after {
margin-block: 0;
bottom: unset;
top: calc(100% + 3.5px);
right: 0;
left: 0;
margin-inline: auto;
transform: rotate(90deg);
}
}
}
}
}
}
}
}
/* Tabla Adaptaciones Dentro de un form */
form {
& #tablaAdaptaciones {
& #cabeceraTablaAdaptaciones {
& .row {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
gap: var(--gap) calc(var(--gap) * 2);
&:before, &:after {
display: none;
}
& > [class*="columna"] {
flex: 1 1 calc(50% - var(--gap));
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
}
& .columnaOrigen {
> .form-group {
position: relative;
padding: 0;
&:after {
content: '';
--size: 25px;
height: var(--size);
width: var(--size);
position: absolute;
bottom: 5px;
right: calc(var(--size) * -1 - 3.5px);
background-image: url(../images/chevron-double-right.svg);
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
}
}
}
}
& hr {
display: none;
}
}
& > #cuerpoTablaAdaptaciones {
position: relative;
margin-bottom: var(--40-30);
& hr {
display: none;
}
& :is(div, span)[class*="col-"] {
width: 100%;
padding: 0;
}
& > .row {
&.fila-adaptacion {
display: flex;
flex-wrap: wrap;
gap: var(--gap) calc(var(--gap) * 2);
margin: 0;
border: none;
padding: var(--15-10) 0;
color: var(--primario);
& .botonEliminarGrupo {
display: flex;
align-items: center;
gap: var(--15-10);
& label {
margin: 0;
}
}
& .columnaOrigen {
position: relative;
&:after {
content: '';
--size: 25px;
height: var(--size);
width: var(--size);
position: absolute;
bottom: 0;
top: 0;
right: calc(var(--size) * -1 - 3.5px);
margin-block: auto;
background-image: url(../images/chevron-double-right.svg);
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
}
}
& .columnaDestino {
.numero-creditos:not(:empty) {
display: flex;
align-items: center;
width: fit-content;
height: 34px;
padding: 5px 10px;
background-color: var(--primario-extra-light);
border-radius: var(--form-radius);
font-size: var(--body-fs);
font-weight: 500;
color: var(--primario);
}
}
& .columnaOrigen, & .columnaDestino {
flex: 1 1 calc(50% - var(--gap));
display: flex;
flex-direction: column;
gap: var(--gap);
max-width: calc(50% - var(--gap));
padding: var(--20-10);
border-radius: var(--form-radius);
border: 1px solid var(--primario);
h6 {
font-size: calc(var(--body-fs) + 2px);
}
&> * {
width: 100%;
}
& [class*="botonAgregarAsignatura"], & [class*="botonEliminarAsignatura"]{
display: flex;
align-items: center;
gap: var(--15-10);
& label {
margin: 0;
}
}
& [class*="botonEliminarAsignatura"] {
order: 2;
height: fit-content;
margin-top: auto;
}
& .container-fluid {
display: flex;
flex-grow: 1;
&:before, &:after {
display: none;
}
& .row {
padding: 0;
flex-grow: 1;
&:before, &:after {
display: none;
}
}
}
}
& .row.fila-asignatura {
max-width: 100%;
&:before, &:after {
display: none;
}
}
&:before, &:after {
display: none;
}
& > div {
flex: 1 1 100%;
padding: 0;
& > div {
padding: 0;
& > .row {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
margin: 0;
border: none;
padding: var(--15-10) 0;
& > div {
flex: 1 1 100%;
padding: 0;
}
}
}
}
}
}
}
/* Pie tabla adaptaciones */
& > #pieTablaAdaptaciones {
--gap: var(--15-10);
display: flex;
gap: var(--gap);
flex-wrap: wrap;
&:before, &:after {
display: none;
}
& > * {
flex: 1 1 100%;
max-width: 100%;
padding: 0;
&:empty {
display: none;
}
}
& #botonAgregarGrupo {
display: flex;
align-items: center;
gap: var(--15-10);
& label {
margin: 0;
}
}
}
}
}
/** TABLAS **/
& .table-responsive {
margin: 0;
border: none;
&:has(table:only-child) {
box-shadow: var(--shadow-avatar);
border-radius: var(--container-radius);
}
&:has(> div:first-child) {
> table {
margin: 4px;
box-shadow: var(--shadow-avatar);
border-radius: var(--container-radius);
}
}
& > h3 {
color: var(--primario);
font-weight: 500;
margin-block: var(--15-10);
font-size: var(--h6-fs);
}
&:has(~ .table-responsive) {
tr th:not(:last-child) {
border-right: none;
}
tr:last-child th {
border-bottom-color: var(--primario-extra-light);
}
}
&~ .table-responsive {
margin-top: vaR(--20-10);
}
& ~ .table-responsive, & table ~ table {
margin-block: var(--20-10);
}
& + .panel-footer {
margin-top: var(--40-30);
}
& table {
margin: 0;
border-collapse: separate;
border: none;
& thead {
& tr {
&:first-of-type:not(:last-of-type) {
& th {
background-color: var(--primario-lighter);
font-size: calc(var(--body-fs) + 1px);
}
& th:first-child {
border-left-color: var(--primario-lighter);
border-radius: var(--container-radius) 0 0 0;
}
& th:last-child {
border-right-color: var(--primario-lighter);
border-radius: 0 var(--container-radius) 0 0;
}
& th:only-child {
border-left-color: var(--primario-lighter);
border-right-color: var(--primario-lighter);
border-radius: var(--container-radius) var(--container-radius) 0 0;
}
}
& ~ tr {
& th {
border-radius: 0!important;
&:not([class*="col"]) {
border-left-color: #fff;
}
}
}
}
}
& tr {
& :is(th, td) {
padding: var(--10-5) var(--15-10);
vertical-align: middle;
white-space: nowrap;
& :has(iframe) {
min-width: 700px;
}
& a {
color: var(--primario-medio-link);
&:hover {
color: var(--primario-accent);
text-decoration: none;
}
/* Iconos */
&.glyphicon {
--size: 18px;
&.glyphicon-search, &.glyphicon-edit, &.glyphicon-stats {
&:before {
content: '';
width: var(--size);
height: var(--size);
display: block;
background-size: cover;
}
}
&.glyphicon-search {
&:before {
background-image: url('../images/icono_ver_prim.svg');
}
}
&.glyphicon-edit{
&:before {
background-image: url('../images/icono_editar_prim.svg');
}
}
&.glyphicon-stats {
&:before {
background-image: url('../images/icono_resumen_prim.svg');
}
}
&.glyphicon-ok-circle {
color: var(--success)!important;
}
&.glyphicon-ban-circle {
color: var(--danger)!important;
}
}
}
/* Avatar */
&.alturaFoto {
--size: 50px;
width: fit-content;
text-align: center;
color: var(--primario);
& img {
width: var(--size);
max-width: var(--size);
height: var(--size);
margin: auto;
border: 3px solid currentColor;
box-shadow: var(--shadow-avatar);
border-radius: var(--full-radius);
object-fit: contain;
}
}
/** Faltas de asistencia a clase **/
& input[type="checkbox"] {
display: inline!important;
}
&.faltaAsistencia-clase {
box-shadow: inset 0px 0px 16px var(--color);
}
/* Tipo de falta 01 */
&.faltaAsistencia-clase[tipo-falta="01"] {
--color: var(--danger);
}
/* Tipo de falta 03 */
&.faltaAsistencia-clase[tipo-falta="03"] {
--color: orange;
}
/* Tipo de falta 02 */
&.faltaAsistencia-clase[tipo-falta="02"] {
--color: var(--success-light);
}
/* Tipo de falta 04 */
&.faltaAsistencia-clase[tipo-falta="04"] {
--color: var(--success-light);
}
/* Tipo de falta 05 */
&.faltaAsistencia-clase[tipo-falta="05"] {
--color: darkcyan;
}
/* No tiene falta de asistencia */
&.faltaAsistencia-clase.faltaAsistencia-noHasFaltaAsistencia {
--color: var(--success);
}
}
& th {
text-align: center;
font-weight: 500;
border-left: 1px solid var(--primario-extra-light);
border-bottom: 1px solid white;
background-color: var(--primario-extra-light);
border-top-color: var(--primario-extra-light);
color: var(--primario);
/** Input marcar-todas-clases checked **/
input#marcar-todas-clases[value="1"] {
appearance: none;
border: 2px solid var(--primario-medio-link);
background-color: var(--primario-highlight);
background-image: url(../images/check-input-checked.svg);
border-radius: 3px;
background-size: 150%;
background-repeat: no-repeat;
background-position: center;
margin-bottom: -2px;
}
/***************************************/
& ~ th {
border-left-color: #fff;
}
&.sorted {
position: relative;
&:after {
content: '';
height: 5px;
background-image: linear-gradient(var(--primario-extra-light) 0%, var(--primario-accent) 100%);
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
& a {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
&:after {
--size: var(--h5-fs);
content: '';
display: block;
width: var(--size);
height: var(--size);
background-size: cover;
color: inherit;
transition: var(--tr04);
}
&.asc:after {
background-image: url('../images/icono_flecha_arriba_accent.svg');
}
&.desc:after {
background-image: url('../images/icono_flecha_abajo_accent.svg');
}
&:hover {
opacity: 0.8;
&:after {
opacity: 0.8;
}
}
&:focus {
text-decoration: none;
}
}
}
&:first-of-type {
border-radius: var(--container-radius) 0 0 0;
}
&:last-of-type {
border-radius: 0 var(--container-radius) 0 0;
}
&:only-of-type {
border-radius: var(--container-radius) var(--container-radius) 0 0;
}
}
& td {
border-right: 1px solid var(--primario-extra-light);
border-top: 1px solid var(--primario-extra-light);
border-left: none;
border-bottom: none;
background-color: white;
/* Totales */
.importe-total {
font-weight: 500;
text-transform: uppercase;
font-size: var(--body-fs);
background-color: #f4f6fd !important;
}
/* Importe gestión de cobros */
&.planFormacionMatriculaHitoImporte {
padding-right: var(--30-15) !important;
}
/* color asignatura */
&.colorAsignatura, &.campoColor {
position: relative;
&:before {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border: 1.2rem solid #fff;
border-block-width: 1rem;
}
}
/********************/
& input:checked {
--check-size: 14px;
}
&:first-child {
border-left: 1px solid var(--primario-extra-light);
}
/* Estados */
& [class*="estado"] {
color: inherit;
border-radius: var(--full-radius);
padding: 5px var(--10-5);
font-size: var(--small-fs);
font-weight: 500;
}
& :is(.estado_ejecucion, .estado_aceptado, .estado_matriculado, .estado_iniciado, .estado_activo,.estado_sincronizado) {
background-color: var(--success);
}
& .estado_preinscripcion {
background-color: #ae00c4;
color: white;
}
& .estado_publicado {
background-color: #008175;
color: white;
}
& .estado_certificacion, .estado_confirmada {
background-color: #00b5c0;
}
& :is(.estado_solicitado, .estado_pendiente, .estado_validado, .estado_aprobado, .estado_planificada, .estado_realizada) {
background-color: #1573b3;
color: white;
}
& :is(.estado_cerrado, .estado_privado, .estado_rechazado, .estado_cancelada, .estado_inactivo,.estado_no_sincronizado) {
background-color: var(--danger);
color: white;
}
& .estado_borrador, .estado_no_realizada, .estado_anulada {
background-color: #e60032;
color: white;
}
& :is(.estado_finalizada, .estado_finalizado) {
background-color: #b6b44f;
}
& .estado_bloqueado {
background-color: #565656;
color: white;
}
& .estado_matricula {
background-color: #fc2e1d;
color: white;
}
}
&:last-child {
& td {
border-bottom: 1px solid var(--primario-extra-light);
&:first-child {
border-bottom-left-radius: var(--container-radius);
}
&:last-child {
border-bottom-right-radius: var(--container-radius);
}
}
}
&.highlight {
background: none!important;
}
}
& thead {
& td {
background-color: var(--primario-highlight-light);
}
}
& tbody {
& tr {
background-color: transparent!important;
&:hover td {
background-color: var(--primario-highlight-light);
&.colorAsignatura, &.campoColor{
&::before {
border: 1.2rem solid var(--primario-highlight-light);
}
}
}
& td:first-of-type {
border-left: 1px solid var(--primario-extra-light);
}
& th {
background-color: var(--primario-highlight-light);
border-radius: 0!important;
&:last-child {
border-right: 1px solid var(--primario-extra-light);
}
}
&:last-child {
& th {
border-bottom-left-radius: var(--container-radius)!important;
border-bottom-color: var(--primario-highlight-light);
& + td {
border-bottom-left-radius: 0!important;
}
}
& td:first-of-type:not(:last-child) {
border-bottom-left-radius: var(--container-radius);
}
& td:last-of-type {
border-bottom-right-radius: var(--container-radius);
}
& td:only-of-type:not(:last-child) {
border-bottom-left-radius: var(--container-radius);
border-bottom-right-radius: var(--container-radius);
}
}
&#total-importe-hitos-matricula-row {
& td {
background-color: var(--primario-extra-light);
font-size: calc(var(--body-fs) + 1px);
font-weight: 500;
&.total-importe-hitos-label {
text-align: right;
}
}
}
/* Gestión económica - Resumen económico */
&.primera {
td {
border-top: 2px solid var(--primario-lighter);
}
}
/*totales*/
&.primera ~ tr:last-child {
td {
background-color: var(--primario-extra-light);
font-size: var(--h6-fs);
font-weight: 500;
border-width: 1px;
border-color: var(--primario-lighter);
}
}
}
}
}
& ~ .table-responsive, & table ~ table {
margin-block: var(--20-10);
}
& + .panel-footer {
margin-top: var(--40-30);
}
}
/***********************************/
/* Formulario Editar DATOS GENERAL */
/***********************************/
& form, & form > div[id] {
/* Subapartados */
& > .form-group {
float: none;
width: calc(100% - 4px);
margin-inline: 2px;
margin-bottom: var(--40-20);
padding: var(--20-10);
border: none;
border-radius: 0;
box-shadow: var(--shadow-form-group);
/* Título subapartado */
& > label.control-label.grupo-campos-label {
margin: 0 0 var(--20-10);
font-size: var(--h5-fs);
color: var(--primario);
line-height: 1.1;
}
& > .grupo-campos, #ehabilisgestiondelaformacionbundle_titulacion {
--gap: var(--15-10);
float: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
&:before, &:after {
display: none;
}
& > :is(.form-group, .form-field-input) {
flex: 1 1 calc(33.33% - var(--gap));
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
@media (max-width: 500px) {
min-width: 100%;
&[class*="12"] {
min-width: 100%!important;
}
}
/* form group width: 100% */
&[class*="12"] {
flex: 1 1 100%;
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
}
& .radio {
& label {
position: relative;
padding-left: var(--20-10);
& input {
left: 0;
margin: 2px 0 0!important;
&:checked {
--check-size: 16px;
box-shadow: none;
}
}
}
}
}
& label ~ div[class=""] {
--check-size: 16px;
--color: var(--primario-highlight);
--color-dark: var(--primario-medio-link);
position: relative;
top: 2px;
display: inline-flex !important;
width: var(--check-size);
height: var(--check-size);
margin-left: var(--10-5);
margin-right: var(--20-10);
padding: 0 !important;
border-radius: 4px;
overflow: hidden;
input[type="checkbox"]:checked {
--check-size: 16px;
position: absolute;
inset: 0;
/*margin: auto;*/
margin: auto 2px;
width: calc(var(--check-size) - 4px);
height: calc(var(--check-size) - 4px);
box-shadow: 0 0 0px 2px var(--color-dark, var(--secundario-dark));
accent-color: var(--color, var(--secundario));
}
}
/** Reconocimientos **/
.select-universidad {
flex: 1 1 100%;
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
}
.campos-movilidad {
flex: 1 1 100%;
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
> :is(.form-group, .form-field-input) {
flex: 1 1 calc(33.33% - var(--gap));
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
}
}
}
}
/* Botones */
& > .form-group:not(.form-field-input) {
width: fit-content!important;
float: left!important;
margin: 0 var(--10-5) var(--15-10) 0!important;
padding: 0!important;
box-shadow: none!important;
& > button {
width: fit-content;
margin-left: auto;
&.btn.disabled {
opacity: 0.5;
color: var(--primario);
background-color: var(--primario-extra-light);
cursor: not-allowed;
&:hover {
color: var(--primario)!important;
background-color: var(--primario-extra-light)!important;
}
}
}
}
& #buttons-table-ajax {
margin-bottom: var(--10-5);
}
/* SUBAPARTADOS CAJAS, PAGOS e HITOS */
& :is(#cajas, #pagos, #hitos):not(:empty) {
--gap: var(--15-10);
width: calc(100% - 4px);
margin-inline: 2px;
margin-block: var(--20-10) var(--40-20);
padding: var(--20-10)!important;
border: none;
border-radius: 0;
box-shadow: var(--shadow-form-group);
display: flex;
flex-direction: column;
/*flex-wrap: wrap;*/
float: none;
clear: both;
& h3 {
color: var(--primario);
font-weight: 500;
margin-block: var(--15-10);
margin-inline: 0;
font-size: var(--h6-fs);
}
& > .table-responsive {
max-width: 100%;
overflow: auto;
margin-bottom: var(--15-10);
& table {
margin-bottom: var(--15-10);
color: var(--primario);
& thead {
& tr {
& th {
border-bottom: none;
border-right: none;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-radius: 0!important;
font-size: var(--small-fs);
&:first-child {
border-left: 1px solid var(--primario-extra-light);
}
&:last-child {
border-right: 1px solid var(--primario-extra-light);
}
&:only-child {
border-left: 1px solid var(--primario-extra-light);
border-right: 1px solid var(--primario-extra-light);
}
}
&:first-of-type {
& th {
background-color: var(--primario-lighter);
&:first-child {
border-left: 1px solid var(--primario-lighter);
}
&:last-child {
border-right: 1px solid var(--primario-lighter);
}
&:only-child {
border-left: 1px solid var(--primario-lighter);
border-right: 1px solid var(--primario-lighter);
}
}
}
}
}
& tbody {
& tr {
& td {
border-bottom: none;
border-right: none;
border-left: 1px solid var(--primario-extra-light);
border-top: 1px solid var(--primario-extra-light);
border-radius: 0!important;
font-size: var(--small-fs);
&:last-of-type {
border-right: 1px solid var(--primario-extra-light);
}
}
&:last-of-type {
& td {
border-bottom: 1px solid var(--primario-extra-light);
&:first-child {
border-bottom-left-radius: var(--container-radius);
}
&:last-child {
border-bottom-right-radius: var(--container-radius);
}
&:only-child {
border-bottom-left-radius: var(--container-radius);
border-bottom-right-radius: var(--container-radius);
}
}
}
& th {
font-size: var(--body-fs);
border-radius: 0 !important;
border-color: var(--primario-extra-light);
}
}
&.asignaturas {
& tr:nth-last-child(2) {
& td {
border-bottom: 1px solid var(--primario-extra-light);
&:first-of-type {
border-bottom-left-radius: var(--container-radius)!important;
}
&:last-of-type {
border-bottom-right-radius: var(--container-radius)!important;
}
&:only-of-type {
border-bottom-left-radius: var(--container-radius)!important;
border-bottom-right-radius: var(--container-radius)!important;
}
}
}
}
/* Asignaturas ajenas */
&.tablaAsignaturaAjena {
.form-group[class*="2"] {
width: auto;
}
}
}
& tfoot {
& td {
border-radius: 0!important;
font-size: var(--h6-fs);
font-weight: 600;
background-color: var(--primario-lighter);
}
}
}
}
& .caja-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--10-5);
padding: var(--15-10);
background-color: var(--primario-extra-light);
color: var(--primario);
& > * {
flex: 0 0 fit-content;
padding: 0;
max-width: 100%;
& span:not([id]) {
font-size: var(--small-fs);
font-style: italic;
}
& span[id] {
margin-left: 5px;
font-weight: 500;
}
}
& + .panel-footer {
display: none;
}
}
}
& #pagos {
& .table-responsive {
& table {
width: fit-content;
max-width: 100%;
margin: 0;
& tbody {
& tr {
display: flex;
align-items: center;
gap: 0;
width: 100%;
max-width: 100%;
margin: 0 0 10px;
padding: 0;
& th {
display: flex;
align-items: center;
height: 100%;
white-space: nowrap !important;
margin: 0;
padding-inline: var(--10-5) calc(var(--10-5) + 10px);
padding-block: var(--10-5);
background-color: var(--primario-lighter);
font-size: var(--h6-fs) !important;
font-weight: 500;
line-height: 1;
color: var(--primario-dark);
clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
z-index: 1;
&:after {
content: ':';
margin-left: 2px;
}
}
& td {
border: none!important;
&:empty {
display: none;
}
}
& td:not(:empty) {
display: flex;
align-items: center;
width: max-content;
height: 100%;
background-color: var(--primario-extra-light);
padding-inline: calc(var(--10-5) + 10px);
padding-block: var(--10-5);
margin-left: -10px;
border-block: 1px solid var(--primario-extra-light)!important;
line-height: 1;
font-size: var(--h6-fs) !important;
flex-grow: 1;
&:first-of-type {
clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
+ td:not(:empty) {
margin-left: -8px;
clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
}
&:last-of-type {
& th, & td {
font-weight: 600;
}
}
/* campo totalizador intermedio */
& td[colspan="3"]:empty {
+ td:last-of-type {
margin-left: 0;
font-weight: 600;
width: calc(100% - 10px);
clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
justify-content: flex-end;
}
}
}
}
}
}
}
/* Selects */
& select {
width: 100%;
height: 34px;
min-width: max-content;
float: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: calc(var(--10-5) * 0.33) var(--30-20) calc(var(--10-5) * 0.33) var(--10-5);
border-radius: var(--form-radius);
color: var(--primario);
font-size: var(--body-fs);
border: 1px solid var(--primario);
background-color: #fff;
transition: var(--tr02);
&:hover {
background-color: inherit;
}
&:focus {
border-color: var(--primario-accent);
box-shadow: 0 0 6px 2px var(--primario-accent);
}
}
/* Totalizadores */
& #totalizadores {
flex: 1 1 100%;
padding: var(--20-10) !important;
line-height: 1.1;
background-color: var(--primario-extra-light);
border: none;
border-radius: 0;
color: var(--primario);
& #total {
display: flex;
flex-wrap: wrap;
& h3 {
flex: 1 1 100%;
}
& p {
display: inline-flex;
flex: 1 1 calc(33.33% - var(--gap));
margin: 0;
& .importe_texto {
margin: 0;
padding-inline: var(--10-5) calc(var(--10-5) + 10px);
padding-block: 5px;
background-color: var(--primario-highlight);
font-size: var(--body-fs);
color: var(--primario-dark);
clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
white-space: nowrap;
}
& .importe_numero {
width: 100%;
margin-left: -10px;
font-size: var(--body-fs);
background-color: var(--primario-lighter);
padding-inline: calc(var(--10-5) + 10px) var(--10-5);
padding-block: 5px;
color: var(--primario);
}
}
}
}
}
/* Formulario con div contenedor con id específico intermedio */
& form > div[id]:not(#cajas, #pagos, #hitos) {
--gap: var(--15-10);
width: calc(100% - 4px);
margin-inline: 2px;
/* margin-bottom: var(--40-20); */
/* padding: var(--20-10); */
border: none;
border-radius: 0;
/* box-shadow: var(--shadow-form-group); */
display: flex;
flex-wrap: wrap;
gap: var(--gap);
& > * {
flex: 1 1 calc(33.33% - var(--gap));
padding: 0!important;
max-width: 100%;
}
& > [class*="12"] {
flex: 1 1 100%;
}
& > .form-group {
box-shadow: none;
margin: var(--15-10) 0;
&:not(.form-field-input) {
float: none !important;
margin: 0 !important;
clear: both;
height: fit-content;
align-self: flex-end;
flex: 0 0 fit-content;
&[class*="12"] {
flex: 1 1 100%;
}
}
+ .form-group {
margin-top: 0;
}
}
& .form-group.form-field-input {
float: none;
flex: 1 1 100%;
padding: 0;
&[style*="block"] {
flex: 1 1 100%!important;
}
& #ehabilisgestiondelaformacionbundle_planformacioncurso_evaluaciones {
padding: 0;
& > .form-group.form-field-input {
& > [id*="ehabilisgestiondelaformacionbundle_planformacioncurso_evaluaciones_"] {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
padding: 0;
& > * {
flex: 1 1 calc(33.33% - var(--gap));
padding: 0;
& input {
width: 100%;
}
}
}
}
}
& .grupo-campos{
display: flex;
flex-wrap: wrap;
gap: var(--gap);
padding: 0;
& > * {
flex: 1 1 calc(33.33% - var(--gap));
padding: 0;
&[class*="12"] {
flex: 1 1 100%;
}
}
/* Grupos de traducción */
&.grupo-traduccion {
float: none;
&:before, &:after {
display: none;
}
& > * {
flex: 1 1 calc(33.33% - var(--gap))!important;
margin: 0;
}
& .grupo-campos[id*="subGrupo"] {
flex-direction: column;
& > * {
width: 100%;
margin: 0;
}
}
& + [id*="div-add-traduccion"] {
margin-top: var(--10-5);
input {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
& .tui-full-calendar-content {
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
}
&:focus {
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
}
}
/* Crear remesa Bancaria */
&#ehabilisgestiondelaformacionbundle_remesabancaria {
float: none;
width: calc(100% - 4px);
margin-inline: 2px;
margin-bottom: var(--40-20);
padding: var(--20-10);
border: none;
border-radius: 0;
box-shadow: var(--shadow-form-group);
> * {
flex: 1 1 calc(33.33% - var(--gap));
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
&#buttons-table-ajax {
flex: 1 1 100%;
#table-ajax-hitoscobro {
margin-bottom: var(--40-30)!important;
}
}
&:last-of-type {
min-width: fit-content;
flex: 0 0 fit-content;
}
}
}
/* Generar nuevo fichero de alumnos */
&#ehabilisgestiondelaformacionbundle_ficheroNavision {
float: none;
width: calc(100% - 4px);
margin-inline: 2px;
margin-bottom: var(--40-20);
padding: var(--20-10);
border: none;
border-radius: 0;
box-shadow: var(--shadow-form-group);
> * {
flex: 1 1 calc(33.33% - var(--gap));
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
&#tablaListado, &#totalizadores {
flex: 1 1 100%;
.table-responsive {
margin-bottom: var(--40-30)!important;
}
}
&#totalizadores {
padding: var(--15-10);
h3 {
margin-bottom: var(--10-5)
}
}
&:last-of-type {
min-width: fit-content;
flex: 0 0 fit-content;
}
}
}
}
form {
> div[id]:not(#cajas, #pagos, #hitos) {
/* all: unset; */
> .form-group {
float: none;
width: calc(100% - 4px);
margin-inline: 2px;
margin-block: var(--15-10);
padding: var(--20-10)!important;
border: none;
border-radius: 0;
box-shadow: var(--shadow-form-group);
+ .form-group {
margin-top: 0;
}
&:not(.form-field-input):has(button) {
margin-left: auto !important;
padding: 0 !important;
~ .form-group:not(.form-field-input):has(button) {
margin-left: 0 !important;
}
}
}
}
}
/* Formulario editar Crear adaptaciones Alumno */
& form[name="ehabilisgestiondelaformacionbundle_titulacionadaptacion"] {
& > * {
flex: 1 1 calc(33.33% - var(--gap)) !important;
padding: 0 !important;
box-shadow: none!important;
&:not([class*="12"]) {
max-width: fit-content;
}
}
& #cajas {
box-shadow: none!important;
padding: 0!important;
}
}
/* Formulario editar Crear Reconocimientos Alumno */
& form[name="ehabilisgestiondelaformacionbundle_titulacionreconocimiento"], & form[name="ehabilisgestiondelaformacionbundle_titulacionreconocimiento"] > div[id], & form[name="ehabilisgestiondelaformacionbundle_titulacionadaptacion"], & form[name="ehabilisgestiondelaformacionbundle_titulacionadaptacion"] > div[id] {
& :is(#cajas, #pagos, #hitos):not(:empty) {
margin-bottom: 0;
& > .table-responsive {
padding: 0;
& table {
border-collapse: collapse;
& tbody {
&.asignaturas {
& tr {
& td[style*="#a79797"] {
font-weight: 500;
background-color:var(--primario-extra-light)!important;
}
& td[rowspan] {
border-bottom: 1px solid var(--primario-extra-light);
}
&:nth-last-child(2) {
& td {
border-radius: 0!important;
}
}
&.asignatura {
+ tr {
td:nth-last-child(n-1) {
border-right: 1px solid var(--primario-extra-light);
}
/*td:last-child {
display: none;
}*/
}
}
}
}
}
}
}
}
}
/* Formulario editar Grupo */
& #ehabilisgestiondelaformacionbundle_planformacioncursoagrupamientocurso_grupoNombre {
float: none;
display: flex;
padding: 0;
gap: var(--gap);
}
/* Formulario repartir plazas */
#ehabilisgestiondelaformacionbundle_planformacioncurso_gruposAsignaturaActivos {
& * {
float: none;
}
& #ehabilisgestiondelaformacionbundle_planformacioncurso_gruposAsignaturaActivos_0 {
display: flex;
gap: var(--gap);
padding: 0;
& > * {
flex: 1 1 calc(33.33% - var(--gap));
max-width: fit-content;
padding: 0;
&:has( > .hidden) {
display: none;
}
}
}
& #ehabilisgestiondelaformacionbundle_planformacioncurso_plazasMaximo, & #ehabilisgestiondelaformacionbundle_planformacioncurso_plazasUsadas {
max-width: fit-content;
}
}
/* Formulario Crear Fichero Cuaderno 57 */
& form[name="ehabilisgestiondelaformacionbundle_ficherocuaderno57"] {
& #buttons-table-ajax {
flex: 1 1 100%!important;
}
}
/* Formulario Crear - modificar matrícula */
& form[name="ehabilisgestiondelaformacionbundle_planformacionmatricula"] {
& :is(#cajas, #pagos, #hitos):not(:empty) {
& > .table-responsive {
& table {
& tr {
& :is(th, td) {
white-space: initial;
}
td:nth-last-of-type(2):has(+ .hidden) {
border-right: 1px solid var(--primario-extra-light)!important;
}
&:nth-last-of-type(2) {
td:nth-last-of-type(2):has(+ .hidden) {
border-bottom-right-radius: var(--container-radius) !important;
}
}
}
/* Asignaturas ajenas*/
tbody.tablaAsignaturaAjena {
td {
.form-group {
padding: 0;
width: 100%;
[id*="ehabilisgestiondelaformacionbundle_asignaturaajena_grupoNombre"]:not(input) {
padding: 0;
& + div[id] {
margin: auto;
width: fit-content;
}
}
}
/*nota tipo */
.notaTipo {
+ .select2.select2-container {
.select2-selection__placeholder {
margin-right: 20px;
}
}
}
}
}
}
}
}
}
/* Formulario crear / editar titulación y Noticia*/
& form[name*="ehabilisgestiondelaformacionbundle_titulacion"], & form[name="ehabilisgestiondelaformacionbundle_noticia"] {
> .form-group {
> .grupo-campos {
div[id] {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
padding: 0;
& > * {
flex: 1 1 calc(33.33% - var(--gap));
padding: 0;
& input {
width: 100%;
}
}
}
& .grupo-campos{
display: flex;
flex-wrap: wrap;
gap: var(--gap);
padding: 0;
& > * {
flex: 1 1 calc(33.33% - var(--gap));
padding: 0;
&[class*="12"] {
flex: 1 1 100%;
}
}
/* Grupos de traducción */
&.grupo-traduccion {
float: none;
&:before, &:after {
display: none;
}
& > * {
flex: 1 1 calc(33.33% - var(--gap))!important;
margin: 0;
}
& .grupo-campos[id*="subGrupo"] {
flex-direction: column;
& > * {
width: 100%;
margin: 0;
}
}
& + [id*="div-add-traduccion"] {
margin-top: var(--10-5);
width: fit-content;
input[type="button"] {
padding: calc(var(--10-5) * 0.33) var(--10-5);
}
}
}
}
#div-add-adjunt {
width: 100%;
input#button-add-adjunt {
flex: 0 1 auto;
padding: calc(var(--10-5) * 0.33) var(--10-5) calc(var(--10-5) * 0.33) calc(var(--10-5) * 2 + var(--h6-fs));
}
}
}
> .form-group {
padding: 0;
& .grupo-campos {
--gap: var(--15-10);
display: flex;
flex-wrap: wrap;
gap: var(--gap);
padding: 0;
&:before, &:after {
display: none;
}
& > * {
flex: 1 1 calc(33.33% - var(--gap));
padding: 0;
&[class*="12"] {
flex: 1 1 100%;
}
}
}
}
}
}
/********************************/
/** Visualizaciones en General **/
/********************************/
& [id*="ver_"] {
--gap: 4px;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
width: calc(100% - 4px);
margin-inline: 2px;
margin-bottom: var(--40-20);
padding: var(--20-10);
border: none;
border-radius: 0;
box-shadow: var(--shadow-form-group);
&:before, &:after {
display: none;
}
& br {
display: none;
}
& .row {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
width: 100%;
&:before, &:after {
display: none;
}
& .consulta-campo.sdweb-show-grupo-label {
flex: 1 1 100%;
display: inline-block;
margin: var(--20-10) 0 var(--10-5);
& label.control-label:not(:empty) {
margin: 0;
padding: 0;
font-size: var(--h5-fs);
line-height: 1.1;
font-weight: 500;
color: var(--primario);
text-decoration: 2px underline var(--primario-accent);
background: none;
}
&:after {
color: inherit;
margin-left: -3px;
}
}
/* El consulta campo de la foto, como no tiene clase que lo identifique uso :has */
& .consulta-campo:has(a img.img-responsive.miniatura) {
--size: var(--80-60);
background: none;
&:after {
display: none;
}
& > a {
position: relative;
width: var(--size);
height: var(--size);
aspect-ratio: 1;
margin: 0 0 var(--20-10);
overflow: hidden;
border: 3px solid currentColor;
box-shadow: var(--shadow-avatar);
border-radius: var(--full-radius);
padding: 0;
background: none;
color: var(--primario);
& > img.img-responsive.miniatura {
position: absolute;
inset: -100%;
width: 100%;
height: auto;
object-fit: contain;
margin: auto;
padding: 0;
background-color: #ffffff;
}
&:hover {
color: var(--primario-accent);
}
}
}
& .consulta-campo:has( > img.img-responsive.miniatura) {
--size: var(--80-60);
background: none;
& > img.img-responsive.miniatura {
width: var(--size);
height: var(--size);
aspect-ratio: 1;
margin: 0 0 var(--20-10);
overflow: hidden;
border: 3px solid var(--primario);
box-shadow: var(--shadow-avatar);
border-radius: var(--full-radius);
padding: 3px;
object-fit: contain;
}
}
& > .consulta-campo:not(.sdweb-show-grupo-label):first-of-type {
& + .consulta-campo.sdweb-show-grupo-label + .consulta-campo:not(.sdweb-show-grupo-label) {
flex: 1 1 100%;
/* padding: var(--15-10) 0; */
& > img.img-responsive {
--size: 80px;
width: var(--size);
max-width: var(--size);
height: var(--size);
margin: 0 0 var(--20-10);
padding: 0;
border: 3px solid currentColor;
background: none;
color: var(--primario);
box-shadow: var(--shadow-avatar);
border-radius: var(--full-radius);
}
}
}
/***************************fin avatar *************************************/
& .consulta-campo:not(.sdweb-show-grupo-label) {
flex: 1 1 calc(33.33% - var(--gap));
display: flex;
align-items: center;
gap: 0;
width: fit-content;
/*min-width: var(--form-item-min-width);*/
max-width: 100%;
margin: 0;
padding: 0;
/* Consulta-campo width:100% */
&[class*="12"] {
flex: 1 1 100%;
}
/* labels */
& .control-label:not(:empty) {
display: flex;
align-items: center;
height: 100%;
white-space: nowrap;
margin: 0;
padding-inline: var(--10-5) calc(var(--10-5) + 10px);
padding-block: var(--10-5);
background-color: var(--primario-lighter);
font-size: var(--body-fs);
font-weight: 500;
line-height: 1;
color: var(--primario-dark);
clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
&+ div[class=""] {
display: flex;
align-items: center;
flex-wrap: wrap;
width: calc(100% + 10px);
height: 100%;
margin: 0 0 0 -10px;
padding-inline: calc(var(--10-5) + 10px) var(--10-5);
padding-block: var(--10-5);
border: none;
border-radius: 0;
box-shadow: none;
font-size: var(--body-fs);
line-height: 1;
color: var(--primario-dark);
background-color: var(--primario-extra-light);
}
}
& .form-control {
width: 100%;
min-height: unset;
height: 100%;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
font-size: var(--body-fs);
color: var(--primario-dark);
& > *:not(:empty) {
display: flex;
align-items: center;
width: calc(100% + 10px);
height: 100%;
background-color: var(--primario-extra-light);
padding-inline: calc(var(--10-5) + 10px) var(--10-5);
padding-block: var(--10-5);
margin-left: -10px;
line-height: 1;
}
}
&.vich_file a, & > a {
display: flex;
align-items: center;
width: calc(100% + 10px);
height: 100%;
background-color: var(--primario-extra-light);
padding-inline: calc(var(--10-5) + 10px) var(--10-5);
padding-block: var(--10-5);
margin-left: -10px;
line-height: 1;
.icon_files {
content: url(../images/file_download.svg);
height: 28px;
width: auto;
background-color: white;
border-radius: var(--full-radius);
padding: 2px;
}
&:hover {
.icon_files {
content: url(../images/file_download_bl.svg);
background-color: var(--primario-accent);
}
}
}
& .well:not(:empty) {
display: flex;
align-items: center;
width: calc(100% + 10px);
height: 100%;
overflow: auto;
margin:0 0 0 -10px;
padding-inline: calc(var(--10-5) + 10px) var(--10-5);
padding-block: var(--10-5);
border: none;
border-radius: 0;
box-shadow: none;
background-color: var(--primario-extra-light);
font-size: var(--body-fs);
line-height: 1;
color: var(--primario-dark);
}
& > .well:empty {
width: calc(100% + 10px);
height: 100%;
padding: 0;
margin-left: -10px;
margin-bottom: 0;
border: none;
border-radius: 0;
box-shadow: none;
background-color: var(--primario-extra-light);
}
}
/* Color asignatura */
& .consulta-campo.colorAsignatura, & .consulta-campo.campoColor{
background-color: var(--primario-extra-light);
& label:before {
content:'';
--size: calc(var(--body-fs) * 1.2);
width: var(--size);
height: var(--size);
aspect-ratio: 1 / 1;
float: left;
margin-right: 5px;
border-radius: var(--form-radius);
background-image: url(../images/colores.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
& .form-control {
width: auto;
height: 66%;
aspect-ratio: 1;
margin-left: var(--15-10);
border-radius: var(--form-radius);
}
}
/* Consulta-campo con tabla */
& .consulta-campo.tabla, .consulta-campo:has(table) {
flex: 1 1 100%;
flex-direction: column;
align-items: stretch;
& .control-label:not(:empty) {
width: 100%!important;
height: fit-content;
padding-inline: var(--20-10);
clip-path: unset;
}
/* Elementos vacíos */
& .well:empty {
display: none;
}
& .well:not(:empty) {
width: 100%!important;
max-width: 100%;
overflow: auto;
min-height: unset;
margin:0;
padding: var(--20-10) var(--10-5);
& > * {
width: auto;
max-width: 100%;
line-height: 1.2;
&:has(table) {
overflow: auto;
}
}
}
}
/* Tablas */
& .table {
min-width: fit-content;
margin: 0;
&:not(:has(td:not(:empty))) {
display: none;
}
& th {
padding: 5px 10px 0px;
color: var(--primario);
border-bottom: 2px solid var(--primario-light);
font-weight: 500;
background-color: var(--primario-lighter);
font-size: var(--body-fs);
white-space: nowrap;
&:first-child {
border-top-left-radius: var(--container-radius);
}
&:last-child {
border-top-right-radius: var(--container-radius);
}
}
& td {
padding: var(--10-5);
border-top: none;
color: var(--primario);
border-bottom: 1px solid var(--primario-extra-light);
text-align: left;
font-size: var(--small-fs);
background-color: #fff;
white-space: nowrap;
& p {
margin: 0;
}
/* &:empty {
display: none;
} */
}
& tbody tr {
background: none;
&:last-child {
& td {
border-bottom: none;
}
& td:first-child {
border-radius: 0 0 0 var(--container-radius);
}
& td:last-child {
border-radius: 0 0 var(--container-radius) 0;
}
& td:only-child {
border-radius: 0 0 var(--container-radius) var(--container-radius);
}
}
}
}
}
/*Maestro tipo de condición especial*/
&#ver_TipoCaracteristica {
& .row {
& .table {
& td {
&:empty {
display: table-cell;
}
}
}
}
}
}
/* Visualización Con cabecera (por ejemplo clases) */
& .cabecera, & > .col-12:first-child {
display: flex;
flex-direction: column;
--gap: var(--10-5);
gap: var(--gap);
margin-bottom: var(--20-10);
& .resumen-sdweb-contenedor.row {
display: flex;
flex-direction: column;
gap: var(--gap);
&:before, &:after {
display: none;
}
& .resumen-sdweb-fila {
display: flex !important;
align-items: center;
gap: 0;
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
font-size: 0;
& > [class*="col"] {
display: flex !important;
align-items: center;
gap: 0;
width: fit-content;
min-width: var(--form-item-min-width);
max-width: 100%;
margin: 0;
padding: 0;
font-size: 0;
}
& b {
display: flex;
align-items: center;
height: 100%;
white-space: nowrap;
margin: 0;
padding-inline: var(--10-5) calc(var(--10-5) + 10px);
padding-block: var(--10-5);
background-color: var(--primario-lighter);
font-size: var(--body-fs);
font-weight: 500;
line-height: 1;
color: var(--primario-dark);
clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
& span:not(:empty) {
display: flex;
justify-content: center;
align-items: center;
width: calc(100% + 10px);
height: 100%;
background-color: var(--primario-extra-light);
padding: var(--10-5);
margin-left: -10px;
font-size: var(--body-fs);
line-height: 1;
}
}
}
}
}
/* Footer*/
.panel-footer {
display: flex;
flex-wrap: wrap;
margin-top: var(--30-15);
padding: var(--20-10);
background-color: var(--primario-extra-light);
border: none;
color: var(--primario);
.form-group {
margin: 0;
}
.btn-group:only-child {
margin-left: auto;
}
& #deleteForm {
box-shadow: none!important;
padding: 0!important;
margin: 0!important;
}
/* Fila de arriba */
& #total-registros {
width: fit-content;
& .total-count {
padding: 0;
margin-bottom: var(--20-10);
font-size: var(--small-fs);
font-style: italic;
}
+ .row {
width: fit-content;
margin-left: auto;
}
}
/* Fila de abajo */
& > .row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--30-15) var(--10-5);
width: 100%;
&:before, &:after {
display: none;
}
& > div {
flex: 1 1 fit-content;
padding: 0;
text-align: unset;
max-width: 100%;
/* Paginación */
& ul.pagination {
display: flex;
justify-content: center;
justify-content: flex-end;
align-items: center;
gap: var(--10-5);
flex-wrap: wrap;
width: fit-content;
width: 100%;
max-width: 100%;
margin: 0 0 0 auto;
& li {
--size: var(--40-30);
width: fit-content;
& a, & span {
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
aspect-ratio: 1 / 1;
margin: 0;
padding: 0;
border: none;
border-radius: var(--full-radius);
background-color: var(--primario-light);
font-size: var(--small-fs);
color: #fff;
&:hover {
background-color: var(--primario-highlight);
color: var(--primario);
}
}
&.active {
& a, & span {
background-color: var(--primario-highlight);
pointer-events: none;
color: var(--primario);
}
}
&:first-child, &:last-child {
& a, & span {
min-width: fit-content;
padding-inline: var(--15-10);
aspect-ratio: unset;
width: auto;
}
}
&.disabled {
& a, & span {
background-color: var(--primario-lighter);
color: var(--primario-medio)
}
&:not(:first-child, :last-child) {
& a, & span {
background: transparent;
align-items: flex-end;
width: fit-content;
aspect-ratio: unset;
pointer-events: none;
}
}
}
}
}
}
}
}
}
}
/* Formulario Solicitud de la formación */
.panel-body + form[name="ehabilisgestiondelaformacionbundle_planformacionsolicitud"] {
--form-item-min-width: 300px;
--primario: #474747;
--primario-rgb: 71, 71, 71;
--primario-dark: #232323;
--primario-medio: #5d5d5d;
--primario-medio-link: #727272;
--primario-light: #909090;
--primario-higlight: #d2d2d2;
--primario-lighter: #dadada;
--primario-accent: #a4a4a4;
--accent-color: #00cf58;
--bg-color: #485ca1;
width: min(1200px, 90%);
margin: auto;
@media (max-width: 767px) {
margin-top: var(--header-height) !important;
width: min(1200px, 96%);
}
@media (max-width: 400px) {
--form-item-min-width: 250px;
width: min(1200px, 100%);
}
> * {
float: none;
}
/* Logo */
.logo-formulario-reserva {
width: 100vw;
margin-left: calc(-50vw + 50%);
background-color: var(--bg-color);
padding-block: var(--30-20);
display: flex;
justify-content: center;
align-items: center;
height: auto;
max-height: calc(80px + var(--30-20) * 2) !important;
margin-bottom: var(--40-30);
box-shadow: 0 2px 6px var(--primario);
margin-top: calc((var(--15-10) * 2 + var(--header-height)) * -1);
& img {
max-height: calc(150px + var(--30-20) * 2) !important;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
}
/* Título */
.titulo-formulario-reserva {
font-size: var(--h2-fs);
margin-bottom: var(--30-20);
font-weight: 500;
}
> .form-group:not(:nth-last-child(2)) {
width: 100%;
margin-bottom: var(--15-10);
padding: var(--15-10);
box-shadow: var(--shadow-form-group);
background-color: #fff;
z-index: 9;
> .grupo-campos-label {
margin-block: 5px var(--15-10);
white-space: normal;
}
.grupo-campos {
--gap: var(--15-10);
display: flex;
flex-wrap: wrap;
gap: var(--gap);
padding: 0;
&:before, &:after {
display: none;
}
.form-group {
flex: 1 1 calc(25% - var(--gap));
margin: 0;
padding: 0;
min-width: var(--form-item-min-width);
&[class*="col-lg-12"] {
flex: 1 1 100%;
}
}
}
}
/* el form-group de la normativa de pago */
.form-group:has(#ehabilisgestiondelaformacionbundle_planformacionsolicitud_persona_alumno_aceptaNormativaPago) {
display: flex;
flex-wrap: wrap;
align-items: center;
> * {
width: fit-content;
margin-bottom: 0;
}
}
/* el form-group del botón de guardar */
> .form-group:nth-last-child(2) {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: var(--15-10);
margin-left: auto;
padding: 0;
}
/* el form group del recatpcha */
> .form-group:nth-last-child(3) {
padding: 0!important;
box-shadow: none!important;
}
/* El enlace sin href */
a:not([href]) {
display: none;
}
/* Check y radio */
input[type="checkbox"], & input[type="radio"] {
accent-color: var(--accent-color);
}
/* Input de agregar foto */
.vich-image {
[class*="col"] {
width: 100%;
input[type="file"] {
&:hover {
&::file-selector-button {
opacity: 0.8;
}
}
&::file-selector-button {
box-shadow: none;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="iso-8859-1"%3F>');
background-color: var(--primario-higlight);
color: var(--primario);
border-radius: 100vmax;
@media (max-width: 450px) {
display: flex;
align-items: center;
}
}
}
}
}
/* Botón Enviar */
#ehabilisgestiondelaformacionbundle_planformacionsolicitud_save {
position: relative;
align-content: center;
justify-content: space-between;
padding: 10px 50px 10px 15px;
width: fit-content;
border-radius: 100vmax;
border: none;
z-index: 2;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
background-color: var(--primario)!important;
height: 40px;
/* opacity: 1 !important; */
color: #fff !important;
&:before {
content: '';
--size: 30px;
width: var(--size);
height: var(--size);
position: absolute;
right: 6px;
background-color: #ccc;
top: 0;
bottom:0;
margin-block: auto;
border-radius: 50%;
transition: 0.4s ease-in-out;
z-index: -1;
}
&:after {
content: '';
background-size: 200% 100%;
background-repeat: no-repeat ;
background-position: center right;
overflow: hidden;
position: absolute;
right: 11px;
top: 0;
bottom:0;
margin-block: auto;
--size: 20px;
width: var(--size);
height: var(--size);
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s ease-in-out;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
&:not(.disabled):hover{
color: var(--primario)!important;
&:before {
width: 100%;
height: 100%;
right: 0;
border-radius: 100vmax;
transform-origin: right center;
}
&:after {
background-position: center left;
transform-origin: right center;
}
}
}
}
/* Mensajes despué sdel envío del formulario */
.mensaje-success-solicitud-externo {
width: min(1000px, 90%);
margin: var(--60-30) auto var(--30-15);
h1 {
font-size: var(--h2-fs);
margin-bottom: var(--30-20);
font-weight: 500;
}
}
/* Hitos de cobros */
.hito-cobro-info {
--form-item-min-width: 300px;
--primario: #474747;
--primario-rgb: 71, 71, 71;
--primario-dark: #232323;
--primario-medio: #5d5d5d;
--primario-medio-link: #727272;
--primario-light: #909090;
--primario-higlight: #d2d2d2;
--primario-lighter: #dadada;
--primario-accent: #a4a4a4;
--accent-color: #00cf58;
--bg-color: #485ca1;
width: min(1000px, 90%);
margin: auto;
border: none;
box-shadow: none;
border-radius: 0;
.panel-heading {
background-color: var(--primario);
border: 1px solid var(--primario);
border-radius: 0;
font-weight: 600;
font-size: var(--h5-fs);
i {
margin-right: var(--10-5);
}
}
.panel-body {
border: 1px solid #ccc;
.consulta-campo {
display: flex;
align-items: center;
gap: 5px var(--10-5);
flex-wrap: wrap;
height: fit-content;
margin-bottom: var(--10-5);
padding-block: 4px;
> * {
flex: 0 1 fit-content;
padding: 0;
margin: 0;
border: none;
box-shadow: none;
display: flex;
align-items: center;
justify-content: flex-start;
line-height: 1;
height: fit-content;
}
label {
font-weight: 500;
color: #333;
}
}
}
.panel-footer {
display: flex;
justify-content: flex-end;
border: none!important;
background-color: transparent;
padding: var(--30-20) 0 0;
a.btn.pagar {
position: relative;
align-content: center;
justify-content: space-between;
padding: 10px 50px 10px 15px;
width: fit-content;
border-radius: 100vmax;
border: none;
z-index: 2;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
background-color: var(--primario)!important;
box-shadow: var(--shadow-avatar);
height: 40px;
color: #ffff !important;
transform: unset !important;
&:before {
content: '';
--size: 30px;
width: var(--size);
height: var(--size);
position: absolute;
right: 6px;
background-color: var(--accent-color);
top: 0;
bottom:0;
margin-block: auto;
border-radius: 50%;
transition: 0.4s ease-in-out;
z-index: -1;
}
&:after {
content: '';
background-size: 200% 100%;
background-repeat: no-repeat ;
background-position: center right;
overflow: hidden;
position: absolute;
right: 11px;
top: 0;
bottom:0;
margin-block: auto;
--size: 20px;
width: var(--size);
height: var(--size);
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s ease-in-out;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
&:not(.disabled):hover {
&:before {
width: 100%;
height: 100%;
right: 0;
border-radius: 100vmax;
transform-origin: right center;
}
&:after {
background-position: center left;
transform-origin: right center;
}
}
}
}
}
/* Hitos de cobros */
.hito-cobro-info {
--form-item-min-width: 300px;
--primario: #474747;
--primario-rgb: 71, 71, 71;
--primario-dark: #232323;
--primario-medio: #5d5d5d;
--primario-medio-link: #727272;
--primario-light: #909090;
--primario-higlight: #d2d2d2;
--primario-lighter: #dadada;
--primario-accent: #a4a4a4;
--accent-color: #00cf58;
--bg-color: #485ca1;
width: min(1000px, 90%);
margin: auto;
border: none;
box-shadow: none;
border-radius: 0;
.panel-heading {
background-color: var(--primario);
border: 1px solid var(--primario);
border-radius: 0;
font-weight: 600;
font-size: var(--h5-fs);
i {
margin-right: var(--10-5);
}
}
.panel-body {
border: 1px solid #ccc;
.consulta-campo {
display: flex;
align-items: center;
gap: 5px var(--10-5);
flex-wrap: wrap;
height: fit-content;
margin-bottom: var(--10-5);
padding-block: 4px;
> * {
flex: 0 1 fit-content;
padding: 0;
margin: 0;
border: none;
box-shadow: none;
display: flex;
align-items: center;
justify-content: flex-start;
line-height: 1;
height: fit-content;
}
label {
font-weight: 500;
color: #333;
}
}
}
.panel-footer {
display: flex;
justify-content: flex-end;
border: none!important;
background-color: transparent;
padding: var(--30-20) 0 0;
a.btn.pagar {
position: relative;
align-content: center;
justify-content: space-between;
padding: 10px 50px 10px 15px;
width: fit-content;
border-radius: 100vmax;
border: none;
z-index: 2;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
background-color: var(--primario)!important;
box-shadow: var(--shadow-avatar);
height: 40px;
color: #ffff !important;
transform: unset !important;
&:before {
content: '';
--size: 30px;
width: var(--size);
height: var(--size);
position: absolute;
right: 6px;
background-color: var(--accent-color);
top: 0;
bottom:0;
margin-block: auto;
border-radius: 50%;
transition: 0.4s ease-in-out;
z-index: -1;
}
&:after {
content: '';
background-size: 200% 100%;
background-repeat: no-repeat ;
background-position: center right;
overflow: hidden;
position: absolute;
right: 11px;
top: 0;
bottom:0;
margin-block: auto;
--size: 20px;
width: var(--size);
height: var(--size);
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s ease-in-out;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
&:not(.disabled):hover {
&:before {
width: 100%;
height: 100%;
right: 0;
border-radius: 100vmax;
transform-origin: right center;
}
&:after {
background-position: center left;
transform-origin: right center;
}
}
}
}
}
/*******************/
/*** CALENDARIOS ***/
/*******************/
#wrapper #page-wrapper .row {
/* & > #all-buttons {
margin-top: 0;
padding-block: var(--10-5);
& #head-buttons {
display: flex;
justify-content: center;
align-items: flex-start;
height: fit-content;
margin: 0 auto;
#aulario-change-view-id {
float: none;
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
height: 30px;
padding: calc(var(--10-5) * 0.33) var(--10-5);
border-radius: var(--form-radius);
color: var(--primario);
font-size: var(--body-fs);
font-weight: 400;
font-family: var(--font-family);
border: 1px solid var(--primario);
transition: var(--tr02);
box-shadow: var(--shadow-avatar);
background-color: #fff;
&:hover {
background-color: var(--primario-highlight);
}
}
& #center-buttons {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
row-gap: var(--10-5);
width: 500px;
& #change-view-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: var(--20-10);
}
& button {
float: none;
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
height: 30px;
padding: calc(var(--10-5) * 0.33) var(--10-5);
border-radius: var(--form-radius);
color: var(--primario);
font-size: var(--body-fs);
font-weight: 400;
font-family: var(--font-family);
border: 1px solid var(--primario);
transition: var(--tr02);
background-color: var(--primario-lighter);
box-shadow: var(--shadow-avatar);
&.selected {
font-weight: 500;
background-color: var(--primario-highlight);
color: var(--primario-dark);
}
&:hover {
background-color: var(--primario-highlight);
}
&.today {
background-color: #fff;
&:hover {
background-color: var(--primario-highlight);
}
}
}
& #render-range {
flex: 1 1 100%;
margin-left: var(--10-5);
padding: 0;
font-family: var(--font-family);
font-size: var(--h5-fs);
font-weight: 800;
color: var(--primario);
line-height: 1;
}
}
& > .nav-button {
--size: 34px;
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
margin-top: 3px;
background: none!important;
text-indent: unset!important;
&:before {
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
aspect-ratio: 1 / 1;
border: 1px solid currentColor;
border-radius: var(--full-radius);
font-family: var(--icono-ff);
font-size: var(--h5-fs);
font-weight: 800;
color: var(--primario);
line-height: 1;
background-color: #fff;
box-shadow: var(--shadow-avatar);
}
&:hover:before {
background-color: var(--primario-highlight);
}
&:active:before {
transform: scale(0.95);
transform-origin: center center;
}
&.prev {
&:before {
content: '\f104';
padding-right: 2px;
}
}
&.next {
&:before {
content: '\f105';
padding-left: 2px;
}
}
}
}
} */
> #all-buttons {
margin-top: var(--15-10);
#head-buttons {
--gap: var(--20-10);
width: 100%;
height: fit-content;
margin-top: calc(var(--40-20) * -1);
padding: var(--30-20);
background-color: var(--primario-extra-light);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: var(--gap);
/* Flechas */
.nav-button {
--size: 34px;
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
border-radius: var(--full-radius);
background-image: none !important;
&:before {
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
border: none;
border-radius: var(--full-radius);
font-family: var(--icono-ff);
font-size: var(--h6-fs);
font-weight: 800;
color: var(--primario);
line-height: 1;
text-indent: 0;
background-color: var(--primario-highlight-light);
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
}
&:hover::before {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
/* anterior */
&.prev {
&:before {
content: '\f104';
padding-right: 2px;
}
}
/* siguiente */
&.next {
&:before {
content: '\f105';
padding-left: 2px;
}
}
}
/* Literal día */
#render-range {
margin: 0;
color: var(--primario);
font-weight: 500;
font-size: var(--body-fs);
}
/* Botones de cambio de vista */
#center-buttons {
order: 1;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: var(--gap);
#change-view-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: var(--gap);
.change-view-button {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
height: 30px;
padding: calc(var(--10-5) * 0.33) var(--10-5);
color: var(--primario);
font-size: var(--small-fs);
font-weight: 400;
font-family: var(--font-family);
cursor: pointer;
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&.selected {
background-color: var(--primario-highlight-medio) !important;
pointer-events: none;
}
}
}
}
/* Botón de hoy y cambio de vista a aulario*/
& .nav-button.today, #aulario-change-view-id {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
height: 30px;
padding: calc(var(--10-5) * 0.33) var(--10-5);
color: var(--primario);
font-size: var(--small-fs);
font-weight: 400;
font-family: var(--font-family);
cursor: pointer;
all: unset;
align-items: center;
appearance: none;
background-color: #fff;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
order: 2;
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&#aulario-change-view-id {
order: -1;
}
}
}
}
& #calendar-container {
--bg-popup: #fff;
--padding: var(--15-10);
--border-color: #e4e2e6;
height: fit-content!important;
margin-top: 0;
font-family: var(--font-family);
/*Popups ver más*/
& .tui-full-calendar-layout {
& .tui-full-calendar-floating-layer {
width: fit-content !important;
height: auto !important;
max-width: 80% !important;
max-height: 60vh !important;
box-shadow: var(--shadow-modal-content);
border-radius: 1rem;
isolation: isolate;
z-index: 1000 !important;
& .tui-full-calendar-month-guide.tui-full-calendar-month-guide-focused, & .tui-full-calendar-month-guide-cover {
inset: 0!important;
border-radius: var(--form-radius) !important;
height: inherit !important;
padding: 4px!important;
* {
color: rgba(0,0,0,0.3)!important;
padding: 0!important;
}
}
& .tui-full-calendar-month-guide.tui-full-calendar-month-guide-focused {
background-color: #e9f0fe !important;
opacity: 1;
}
.tui-full-calendar-month-more {
padding-bottom: 0;
border-radius: 1rem;
overflow: hidden;
.tui-full-calendar-month-more-list {
max-height: calc(60vh - 100px)!important;
padding-bottom: 2rem !important;
overflow: auto;
> div {
margin-right: 0;
}
}
.tui-full-calendar-month-more-title-day {
font-size: var(--h6-fs)!important;
}
.tui-full-calendar-month-more-title-day-label {
font-size: var(--body-fs)!important;
}
}
}
}
/***************/
/*encabezado días semana VISTA MES */
.tui-full-calendar-month-dayname {
height: 31px !important;
margin: 0;
border: none !important;
background: none !important;
& .tui-full-calendar-month-dayname-item {
margin: 0 !important;
background-color: #fff !important;
color: #000;
font-size: var(--body-fs);
font-weight: 400;
letter-spacing: 1px;
border-bottom: 2px solid var(--border-color)!important;
& span {
color: inherit!important;
font-weight: inherit;
}
}
}
/*encabezado días semana VISTA SEMANA */
& .tui-full-calendar-week-container {
isolation: isolate;
& .tui-full-calendar-dayname-layout {
height: 31px !important;
margin: 0;
border: none !important;
background: none !important;
& * {
max-height: 100%;
}
& .tui-full-calendar-dayname-container {
background-color: #fff !important;
border: none!important;
& .tui-full-calendar-dayname {
margin: 0 !important;
background-color: #fff !important;
border-bottom: 2px solid var(--border-color);
& .tui-full-calendar-dayname-date-area {
display: flex;
justify-content: center;
align-items: center;
& span {
color: #000;
font-size: var(--body-fs);
font-weight: 400;
line-height: 1;
letter-spacing: 1px;
&.tui-full-calendar-dayname-date {
font-weight: 600;
}
}
}
}
}
}
}
/* Grid de la semana VISTA MES */
& .tui-full-calendar-month-week-item {
/* primera fila */
&:first-child {
& .tui-full-calendar-weekday-grid-line {
border-top: none!important;
}
}
/* última fila */
&:last-child {
& .tui-full-calendar-weekday-grid-line {
border-bottom-width: 2px!important;
}
}
& .tui-full-calendar-weekday-grid-more-schedules {
position: absolute;
right: 0;
color: var(--primario);
&:hover {
color: var(--primario-accent);
}
}
}
& .tui-full-calendar-weekday-grid {
border-radius: 0!important;
/*Colores de las casillas */
/*Mes vigente*/
& .tui-full-calendar-weekday-grid-line {
background: #fff !important;
border-left: 2px solid var(--border-color) !important;
border-bottom: 2px solid var(--border-color) !important;
border-top: none !important;
&:last-child {
border-right: 2px solid var(--border-color) !important;
}
/* Día de hoy */
&.tui-full-calendar-today {
background-color: var(--primario-lighter) !important;
border-right: 2px solid var(--primario-lighter) !important;
.tui-full-calendar-weekday-grid-date-decorator {
box-shadow: 0 0 8px var(--primario-accent);
background-color: var(--primario) !important;
font-weight: 500;
}
}
}
/* Mes pasado y siguiente */
& .tui-full-calendar-weekday-grid-line.tui-full-calendar-extra-date {
background: #eaeaea !important;
border-right: 2px solid #eaeaea !important;
}
}
/* Grid de la semana VISTA SEMANA */
& .tui-full-calendar-timegrid-container {
/* Columna Horas */
& .tui-full-calendar-timegrid-timezone {
border-right: 2px solid var(--border-color)!important;
background-color: #fff!important;
& .tui-full-calendar-timegrid-hour {
& * {
color: #000;
font-size: var(--body-fs);
font-weight: 400;
line-height: 1;
letter-spacing: 1px;
}
}
& .tui-full-calendar-timegrid-hourmarker {
& .tui-full-calendar-timegrid-hourmarker-time {
color: #087fe7!important;
font-size: var(--h5-fs)!important;
font-weight: 600!important;
}
}
}
/* Grid central */
& .tui-full-calendar-timegrid-right {
/* Filas */
& .tui-full-calendar-timegrid-h-grid {
background-color: #fff !important;
/*filas*/
& .tui-full-calendar-timegrid-gridline {
border-bottom: 2px solid var(--border-color) !important;
&:last-child {
border-bottom: 4px solid var(--primario-extra-light);
}
}
}
/* Columnas */
& .tui-full-calendar-timegrid-schedules {
& .tui-full-calendar-timegrid-schedules-container {
height: 100%;
& .tui-full-calendar-time-date {
border-right: 2px solid var(--border-color) !important;
/*CLASES Y EVENTOS */
& .tui-full-calendar-time-date-schedule-block-wrap {
margin-right: 0!important;
border-radius: 0 !important;
& .tui-full-calendar-time-date-schedule-block {
min-width:65px;
margin: 2px;
padding: 0!important;
border-radius: 0 !important;
&:hover {
& .tui-full-calendar-time-schedule {
box-shadow: 0 0 8px 2px #fff;
z-index: 9998;
transition: var(--tr02);
~ .tui-full-calendar-time-resize-handle {
z-index: 9999;
transition: var(--tr02);
}
}
}
/* Notas del calendario */
& .tui-full-calendar-time-schedule {
color: #000 !important;
border-radius: 0 !important;
margin-right: 1px !important;
box-shadow: var(--shadow-avatar);
& .tui-full-calendar-time-schedule-content {
--padding: 3px;
width: 100%;
max-height: 100%;
display: block;
padding: var(--padding);
border: none !important;
box-shadow: var(--shadow-avatar);
border-radius: 0 !important;
overflow: hidden;
color: inherit;
background-color: rgba(255,255,255,0.33);
border-radius: 0 !important;
white-space: normal;
word-wrap: break-word;
& span.title-hour:not(:empty) {
height: calc(var(--body-fs) + 2px);
display: block;
float: left;
border-top-left-radius: var(--form-radius);
border-bottom-left-radius: var(--form-radius);
font-size: var(--body-fs) !important;
font-weight: 500;
color: #000 !important;
width: fit-content;
margin-right: 5px;
}
}
/* Colores */
/* Cursos*/
&[class*="course"] {
--color: #35aedd;
}
/* Tareas */
&[class*="assing"] {
--color: #ff6ed6;
}
/* Videoconferencia */
&[class*="videoconference"] {
--color: #fdc666;
}
/* Última hora */
&[class*="notice"] {
--color: #00f526;
}
/* Festivo */
&[class*="festivo"] {
--color: #ff1818;
}
/*Cambio el color de la letra según el color de fondo*/
&[style*="background-color:#000000"] {
color: #fff!important;
& .tui-full-calendar-time-schedule-content {
border-color: #3c3c3b!important
}
}
/* CLASE VALIDADADA */
&.validada {
& .tui-full-calendar-time-schedule-content {
& span.title-hour:not(:empty) {
&:after {
content: '';
width: var(--small-fs);
height: var(--small-fs);
margin-left: auto;
background-image: url(../images/validada.png);
background-size: var(--small-fs);
background-position: center;
background-repeat: no-repeat;
}
}
}
}
/* CLASE RESERVADA */
&.reservada {
& .tui-full-calendar-time-schedule-content {
& span.title-hour:not(:empty) {
&:after {
content: '';
width: var(--small-fs);
height: var(--small-fs);
margin-left: auto;
background-image: url(../images/reservada3.png);
background-size: var(--small-fs);
background-position: center;
background-repeat: no-repeat;
}
}
}
}
}
& .tui-full-calendar-time-resize-handle.handle-x {
margin: 0px 0 0 1px !important;
height: 8px;
bottom: 0px;
width: calc(100% - 1px);
background-position: center;
background-color: #999999;
background-image: url('data:image/svg+xml,');
}
}
}
&:last-child {
margin-left: -4px;
}
}
/* Hoy */
& .tui-full-calendar-today {
background-color: rgba(255,255,255,0);
& .tui-full-calendar-time-date-schedule-block-wrap {
background-color: rgba(var(--primario-rgb), 0.06);
}
}
}
}
/* Líneas */
& .tui-full-calendar-timegrid-hourmarker {
& [class*="tui-full-calendar-timegrid-hourmarker-line"] {
width: 100% !important;
border-color: #087fe7!important;
border-width: 2px!important;
box-shadow: 0 2px 4px #25dbf3, 0 -2px 4px #25dbf3;
&[style*="border-top: none;"] {
box-shadow: none;
}
}
& .tui-full-calendar-timegrid-todaymarker {
background-color: #087fe7 !important;
box-shadow: 0 0px 4px 2px #25dbf3;
z-index: 9;
}
}
}
}
/* Nota del día */
& .tui-full-calendar-weekday-schedule {
--form-radius: 0;
--color: var(--secundario);
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: fit-content !important;
padding: 0;
border-radius: var(--form-radius) !important;
box-shadow: var(--shadow-avatar);
color: #3c3c3b !important;
margin-top: 10px;
&:before {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: var(--form-radius) !important;
}
&:hover:before {
background-color: rgba(255,255,255,0.2);
transition: var(--tr02);
}
& * {
padding: 0;
color: inherit!important;
font-size: var(--small-fs);
line-height: 1.5;
}
& .tui-full-calendar-weekday-schedule-title {
padding-inline: 4px;
border-radius: var(--form-radius);
width: calc(100% - 4px);
color: #000 !important;
background-color: rgba(255,255,255,0.4);
box-shadow: 0 0 6px var(--border-color);
text-overflow: ellipsis;
line-height: calc(var(--body-fs) * 2);
& .title-hour:not(:empty) {
height: 100%;
display: block;
float: left;
margin-left: -4px;
margin-right: 4px;
padding: 4px;
border-top-left-radius: var(--form-radius);
border-bottom-left-radius: var(--form-radius);
/* background-color: #ccc; */
font-size: var(--body-fs) !important;
font-weight: 500;
color: #000 !important;
width: 50px;
}
}
}
& .tui-full-calendar-weekday-schedule-block {
margin-top: -10px!important;
}
/* POPUPS */
.tui-full-calendar-popup.tui-full-calendar-popup-detail {
--color: #000;
/*contenedor*/
& .tui-full-calendar-popup-container {
width: 400px;
min-width: unset;
height: auto;
padding: 0;
background-color: #fff;
box-shadow: var(--shadow-modal-content);
border-radius: var(--form-radius);
position: relative;
/*encabezado*/
& .tui-full-calendar-section-header {
background-color: #e8e8e8;
padding: var(--padding);
& .tui-full-calendar-schedule-title {
display: inline-block;
width: 100%;
text-align: center;
font-size: var(--h6-fs);
font-weight: 600;
line-height: 1.2;
color: var(--color);
& * {
all: inherit;
}
}
}
/*detalles*/
& .tui-full-calendar-section-detail {
margin-bottom: 0;
padding: 10px 15px;
.container-fluid > .row {
/*ETIQUETAS*/
/* Clase validada y reservada */
&.clase-validada, &.clase-reservada {
--size: 25px;
position: absolute;
top: calc(var(--size) * -0.5);
right: calc(var(--size) * -0.5);
width: var(--size);
height: var(--size);
font-size: 0;
&:before {
content: '';
width: var(--size);
height: var(--size);
margin-left: auto;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #e8e8e8;
border-radius: 50%;
box-shadow: 2px 2px 12px -5px #000, 2px -2px 12px -5px #000;
}
}
/*validada*/
&.clase-validada {
&:before {
background-image: url(../images/validada.png);
}
}
/*reservada*/
&.clase-reservada {
&:before {
background-image: url(../images/reservada.png);
border: 2px solid #000;
background-size: 70%;
}
}
&.reserva {
--size: 25px;
position: absolute;
top: calc(var(--size) * -0.5);
right: calc(var(--size) * -0.5);
width: var(--size);
height: var(--size);
font-size: 0;
&:before {
content: '';
width: var(--size);
height: var(--size);
margin-left: auto;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #e8e8e8;
border-radius: 50%;
box-shadow: 2px 2px 12px -5px #000, 2px -2px 12px -5px #000;
background-image: url(../images/reservada.png);
border: 2px solid #000;
background-size: 70%;
}
}
/*DOCENTES*/
&.docente {
margin-bottom: 10px;
label {
color: #000;
}
}
/*FECHAS*/
&.fechas {
margin-bottom: 15px;
.date-label {
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
/*inicio y fin*/
.date-init, .date-end {
color: #000;
border-radius: 0;
background-image: none;
position: relative;
padding: 5px 10px;
display: flex;
align-items: center;
gap: 7px;
margin: 0;
p {
all: unset;
}
/*iconos*/
&:before {
content: '';
width: var(--body-fs);
height: var(--body-fs);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
}
/*inicio*/
.date-init {
background-color: #39a935 !important;
/*icono*/
&:before {
background-image: url(../images/calendar-icon-date-star-grafito.svg);
}
}
/*fin*/
.date-end {
background-color: #ebb53f !important;
/*icono*/
&:before {
background-image: url(../images/calendar-icon-date-end-grafito.svg);
}
}
}
}
/*LUGAR*/
&.lugar {
padding-bottom: 5px;
border-bottom: 1px solid #3c3c3b;
margin-bottom: 5px;
.titulo {
font-size: var(--body-fs);
text-decoration: underline 2px;
margin-bottom: 5px;
}
.centro, .aula {
display: flex;
gap: 0 5px;
flex-wrap: wrap;
&:before, &:after {
display: none;
}
* {
margin: 0;
padding: 0;
}
}
}
/*GRUPO*/
&.grupo {
padding-bottom: 5px;
border-bottom: 1px solid #3c3c3b;
margin-bottom: 5px;
.titulo {
font-size: var(--body-fs);
text-decoration: underline 2px;
margin-bottom: 5px;
}
.asignatura, .tipo_clase {
display: flex;
gap: 0 5px;
flex-wrap: wrap;
&:before, &:after {
display: none;
}
* {
margin: 0;
padding: 0;
}
}
}
}
/* la fila de la etiqueta NO tiene bien puesta la clase */
& [clas="row"], & .etiqueta {
.schedule-label.description {
margin: 0;
font-size: var(--small-fs);
text-align: center;
background-color: #e8e8e8;
border-radius: 0;
padding: 5px;
}
}
}
}
/*botones*/
& .tui-full-calendar-section-button {
border: none;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 10px;
padding-inline: 10px;
div {
display: none;
}
button {
width: fit-content !important;
justify-content: center;
align-items: center;
height: 30px;
padding: calc(var(--10-5) * 0.33) var(--10-5);
border-radius: var(--form-radius);
color: var(--primario);
font-size: var(--body-fs);
font-weight: 400;
font-family: var(--font-family);
border: 1px solid var(--primario);
transition: var(--tr02);
background-color: var(--primario-lighter);
gap: 5px;
&[style*="block"] {
display: flex!important;
}
* {
transition: var(--tr02);
}
.tui-full-calendar-icon {
margin: 0;
position: unset;
width: var(--body-fs);
height: var(--body-fs);
background-size: var(--body-fs);
background-position: center;
background-repeat: no-repeat;
/* Editar */
&.tui-full-calendar-ic-edit {
background-image: url('../images/icono_editar_prim.svg');
}
/* Borrar */
&.tui-full-calendar-ic-delete {
background-image: url('../images/icono_eliminar_prim.svg');
}
}
.tui-full-calendar-content {
width: fit-content;
min-width: unset;
height: auto;
position: unset;
font-size: var(--small-fs);
color: inherit!important;
}
&:hover, &:focus {
background-color: var(--primario-highlight)!important;
border-color: var(--primario-dark)!important;
color: var(--primario-dark) !important;
&.tui-full-calendar-popup-delete, &.tui-full-calendar-popup-delete-master {
background-color: var(--danger)!important;
border-color: var(--danger-dark);
color: #fff!important;
.tui-full-calendar-icon {
filter: brightness(0) invert(1);
}
}
}
}
}
/* Barra superior */
& .tui-full-calendar-popup-top-line {
/*--height: 8px;
left: 0;
right: 0;
width: calc(100% - var(--padding) * 2);
height: var(--height);
margin: -2px auto auto;
background-color: var(--color) !important;
box-shadow: 0px -2px 8px -2px var(--primario-dark);
border-radius: var(--form-radius);*/
display: none;
}
/* Flechas bocadillo*/
& #tui-full-calendar-popup-arrow {
&.tui-full-calendar-arrow-left {
& .tui-full-calendar-popup-arrow-fill {
border-right-color: var(--bg-popup);
}
}
&.tui-full-calendar-arrow-right {
& .tui-full-calendar-popup-arrow-fill {
border-left-color: var(--bg-popup);
}
}
}
}
/* Colores según el tipo de nota del calendario */
& :is([class*="schedule-"], [class*="popup-"]) {
/* Cursos*/
&[class*="course"] {
--color: #35aedd;
}
/* Tareas */
&[class*="assing"] {
--color: #ff6ed6;
}
/* Videoconferencia */
&[class*="videoconference"] {
--color: #fdc666;
}
/* Última hora */
&[class*="notice"] {
--color: #00f526;
}
/* Festivo */
&[class*="festivo"] {
--color: #ff1818;
& .tui-full-calendar-popup-container {
aspect-ratio: unset;
}
}
}
}
}
/***************************/
/********* AULARIO *********/
/***************************/
/* Encabezado aulario */
#wrapper #page-wrapper {
& > .row {
#head-buttons-aulario {
width: 100% !important;
margin-top: calc(var(--40-20) * -1) !important;
padding: var(--30-20) !important;
background-color: var(--primario-extra-light);
--gap: var(--20-10);
display: flex !important;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: var(--gap);
/* Aulario con nombre */
&.aulario-tiene-titulo {
/* Chevron atrás */
.form-group:has(#aulario-previous-day-button) {
margin-left: auto;
}
/* Nombre Curso */
> :first-of-type {
flex: 1 1 100%;
justify-content: flex-start;
.nombre-descriptivo {
font-size: var(--h4-fs);
font-weight: 600;
line-height: 1.1;
}
/* Botón Importar Clases */
+ .form-group {
order: 10;
margin-left: auto;
/* Botón Vista Curso */
+ .form-group {
order: 11;
button {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
}
/* Literal día */
& > :last-of-type {
margin-right: -200px;
}
}
& > * {
display: flex;
justify-content: center;
align-items: center;
gap: var(--gap);
width: fit-content;
margin: 0;
padding: 0;
color: var(--primario);
font-size: var(--body-fs);
&:nth-child(3) {
order: 1;
}
/*navegación*/
& .nav-button {
--size: 34px;
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
border-radius: var(--full-radius);
background-image: none !important;
&:before {
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
border: none;
border-radius: var(--full-radius);
font-family: var(--icono-ff);
font-size: var(--h6-fs);
font-weight: 800;
color: var(--primario);
line-height: 1;
text-indent: 0;
background-color: var(--primario-highlight-light);
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
}
&:hover::before {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&.prev {
&:before {
content: '\f104';
padding-right: 2px;
}
}
&.next {
&:before {
content: '\f105';
padding-left: 2px;
}
}
}
/* Literal día */
&:last-of-type {
& #aulario-text-date {
margin: 0;
color: var(--primario);
font-weight: 500;
font-size: var(--body-fs);
}
}
/* Botón de hoy */
& #aulario-today-button, & #aulario-calendar-input-date {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
height: 30px;
padding: calc(var(--10-5) * 0.33) var(--10-5);
color: var(--primario);
font-size: var(--small-fs);
font-weight: 400;
font-family: var(--font-family);
cursor: pointer;
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:hover {
background-color: var(--primario-highlight)!important;
}
}
& #aulario-today-button {
background-color: #fff;
}
}
}
/* Grid del aulario */
#aula-calendar-table {
--border-color: #e4e2e6;
margin-top: 0;
border: none;
font-family: var(--font-family);
box-shadow: none;
& thead {
& tr {
&:first-child {
& th:not(:empty) {
font-size: var(--h6-fs);
font-weight: 500;
}
}
&:last-child {
& th:not(:empty) {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
/* &:last-child {
border-right: none;
} */
}
}
& th {
border:none;
}
& th:not(:empty) {
border-right: 1px solid #fff;
background-color: var(--primario) !important;
color: #fff;
text-align: center;
font-size: var(--body-fs);
font-weight: 400;
letter-spacing: 1px;
&:hover {
filter: unset;
background-color: var(--primario-light) !important;
}
}
& th:empty {
background-color: var(--primario) !important;
border-right: 1px solid #fff;
tr:nth-child(2) & {
border-bottom: 1px solid #fff;
}
}
}
}
& tbody {
& tr {
& td {
background-color: #fff;
border-color: var(--border-color);
&.clase-aula-td {
position: relative;
padding: 0;
.clase-aula {
--margin: 5px;
width: calc(100% - var(--margin) * 2);
height: calc(100% - var(--margin) * 2);
margin: var(--margin);
border-radius: 0;
box-shadow: var(--shadow-avatar);
font-size: var(--small-fs);
/* text-overflow: ellipsis;*/
overflow: hidden;
white-space: wrap;
position: absolute;
inset: 0;
padding: var(--margin);
background-image: url(../images/overlay_blanco_03.png);
text-align: left;
&:before {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 0 !important;
}
&:hover::before {
background-color: rgba(255,255,255,0.2);
transition: var(--tr02);
}
&.anulada {
opacity: 0.5;
cursor: not-allowed;
background-image: url(../images/icono_close_rojo.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
}
}
&:hover {
filter: unset;
background-color: var(--primario-highlight-light) !important;
}
/* columna Horas*/
&:first-child {
background-color: var(--primario) !important;
color: #fff;
text-align: center;
font-size: var(--body-fs);
font-weight: 400;
letter-spacing: 1px;
border:none;
border-bottom: 1px solid #fff;
}
/* cuadrícula horas */
&:not(:first-child) {
color: #000;
font-weight: 400;
letter-spacing: 1px;
font-size: var(--body-fs);
}
}
}
}
}
/* Modal evento */
& #modal_crear_evento {
& .modal-dialog {
& .modal-content {
& > .panel-body {
max-width: 100%;
margin: 0;
#calendar_schedule_save {
border: none;
}
&:before, &:after {
display: none;
}
& #modalCrearEventoContenido {
display: flex;
& *:not(.cke *) {
float: none;
}
& .panel-default-layout {
& .panel.panel-primary.center-block {
margin-bottom: 0;
box-shadow: none;
& .panel-heading {
margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
border-radius: var(--form-radius) var(--form-radius) 0 0;
font-size: var(--h5-fs);
line-height: 1.1;
color: var(--primario);
background-color: var(--primario-highlight) !important;
& .float-left {
float: none;
/* & .glyphicon {
} */
}
}
& .panel-body {
max-height: calc((90vh - var(--padding) * 2) - ((var(--h4-fs) * 1.1) + (var(--padding) * 4)));
margin-block: var(--15-10) 0!important;
padding-top: 6px!important;
overflow: auto;
& form[name="calendar_schedule"] {
--gap: var(--15-10);
display: flex;
gap: var(--gap);
flex-wrap: wrap;
& .form-group {
margin-bottom: 0;
padding: 0;
}
& .form-group.form-field-input {
box-shadow: none;
& [id*="calendar_schedule_configuracionClase_grupo"]:not(input) {
padding: 0;
& .form-group {
margin-block: var(--15-10);
}
}
& .radio {
& label {
position: relative;
padding-left: var(--20-10);
& input {
left: 0;
margin: 2px 0 0!important;
&:checked {
--check-size: 16px;
box-shadow: none;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
/** Modal detalle evento **/
& #head-buttons-aulario ~ #modal_popup_detalle {
inset: 0 !important;
width: 100%;
height: 100%;
transform: unset;
.modal-dialog {
width: 100vw;
max-width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3);
margin: 0;
.modal-content {
width: min(450px, 100%);
min-width: unset;
height: auto;
padding: 0;
background-color: #fff;
box-shadow: var(--shadow-modal-content);
border-radius: var(--form-radius);
position: relative;
.modal-header {
position: absolute;
right: 0px;
top: 0px;
.close {
background-color: #e8e8e8;
&:hover {
background-color: #fff;
}
}
}
.panel-body {
max-width: 100%;
margin: 0;
#modalDetalleContenido {
.container-fluid {
padding: 0;
> .row {
margin-block: var(--10-5)!important;
*:not(label.grupo-campos-label) {
font-size: var(--small-fs)!important;
}
/* Título */
&:first-of-type {
margin-top: 0!important;
#aulario-preview-titulo {
width: 100%;
background-color: #e8e8e8;
padding: var(--padding);
border-radius: var(--form-radius) var(--form-radius) 0 0;
label.grupo-campos-label {
display: inline-block;
width: 100%;
text-align: center;
font-size: var(--h6-fs);
font-weight: 600;
line-height: 1.2;
color: #000;
}
}
}
/* Docentes */
&:nth-of-type(2) {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 10px 15px;
label {
margin: 0;
color: #000;
}
.value {
margin: 0;
#aulario-preview-docentes {
margin: 0;
}
}
}
/* fechas */
&:nth-of-type(3) {
margin-bottom: var(--30-15)!important;
.date-label {
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
/*inicio y fin*/
.date-init, .date-end {
color: #000;
border-radius: 0;
background-image: none;
position: relative;
padding: 5px 10px;
display: flex;
align-items: center;
gap: 7px;
margin: 0;
p {
all: unset;
}
/*iconos*/
&:before {
content: '';
width: var(--body-fs);
height: var(--body-fs);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
}
/*inicio*/
.date-init {
background-color: #39a935 !important;
/*icono*/
&:before {
background-image: url(../images/calendar-icon-date-star-grafito.svg);
}
}
/*fin*/
.date-end {
background-color: #ebb53f !important;
/*icono*/
&:before {
background-image: url(../images/calendar-icon-date-end-grafito.svg);
}
}
}
}
/* Centro */
&:nth-of-type(4) {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 5px;
padding: 0px 15px;
margin-bottom: 5px!important;
&:before, &:after {
display: none;
}
> div[class*="col"] {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0 5px;
width: fit-content;
padding: 0;
> p {
display: none;
}
* {
color: #000;
margin: 0;
padding: 0;
}
}
}
/* Aula */
&:nth-of-type(5) {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
margin-inline: 15px;
margin-top: 0!important;
&:before, &:after {
display: none;
}
> div[class*="col"] {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 5px;
width: fit-content;
padding: 0;
> p {
display: none;
}
* {
color: #000;
margin: 0;
padding: 0;
}
}
}
/* Tipo de docencia y clase */
&:nth-of-type(6) {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
flex-wrap: wrap;
margin-inline: 15px;
margin-bottom: 5px;
&:before, &:after {
display: none;
}
> div[class*="col"] {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0 5px;
width: fit-content;
padding: 0;
> p {
display: none;
}
* {
color: #000;
margin: 0;
padding: 0;
}
}
}
/* Grupo de asignatura */
&:nth-of-type(7):not([style*="none"]) {
display: flex;
align-items: center; justify-content: flex-start;
gap: 5px;
flex-wrap: wrap;
margin-inline: 15px;
margin-bottom: 10px !important;
padding-bottom: 10px;
&:before, &:after {
display: none;
}
> .schedule-label.grupoAsignatura {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 5px;
width: fit-content;
padding: 0;
> p {
display: none;
}
* {
color: #000;
margin: 0;
padding: 0;
}
}
}
/* Descripción */
&:nth-of-type(8) {
padding-inline: 15px;
.schedule-label.description {
padding: 0;
}
&:has(#preview-reserva-descripcion > div:empty) {
display: none;
}
#preview-reserva-descripcion {
> div {
* {
font-size: var(--small-fs);
}
}
}
}
}
}
}
.modal-footer {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--15-10) var(--30-20);
margin: 0;
padding: var(--padding);
background-color: #f3f3f3;
border-color: #e8e8e8;
border-radius: 0 0 var(--form-radius) var(--form-radius);
font-size: var(--h6-fs);
line-height: 1.1;
color: var(--primario);
&:before, &:after {
display: none;
}
&> .container-fluid {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: var(--10-5);
flex-wrap: wrap;
&:before, &:after {
display: none;
}
& * {
width: fit-content;
margin: 0 auto;
}
& div {
padding: 0;
button {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px!important;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
}
}
}
}
}
/* Vistas de calendario del aulario */
& h3#aulario-text-date {
margin-top: calc(var(--40-20) * -0.5);
margin-left: -15px;
padding-bottom: var(--15-10);
color: var(--primario);
}
}
}
/***************/
/*** ÁMBITOS ***/
/***************/
#wrapper #page-wrapper {
& > .row {
& .panel-body {
.sdweb-AdminCrudBundle-show-entity {
padding-block: 0;
/*Encabezado*/
& .sdweb-AdminCrudBundle-show-entity-header {
display: flex;
align-items: center;
gap: var(--10-5);
margin: 0;
border: none;
padding: var(--15-10);
background-color: var(--primario-highlight-light);
color: var(--primario);
& > * {
margin: 0;
color: inherit;
}
& h2 {
font-size: var(--h5-fs);
font-weight: 500;
}
& h1 {
font-size: var(--h4-fs);
font-weight: 600;
}
}
/*Cuerpo*/
& .sdweb-AdminCrudBundle-show-entity-section{
display: flex;
flex-direction: column;
gap: var(--gap);
--gap: var(--15-10);
flex-wrap: wrap;
margin: 0;
border: none;
padding: var(--15-10);
color: var(--primario);
& > h3 {
margin-inline: 0;
font-size: var(--h5-fs);
text-decoration: underline 2px var(--primario-accent);
}
& > p {
/* flex: 1 1 calc(33.33% - var(--gap));
display: flex;
align-items: center;
background-color: var(--primario-extra-light);
padding-inline: 0 vaR(--15-10);
padding-block: 0;
margin: 0;
font-size: var(--body-fs);
line-height: 1; */
margin: 0;
font-size: var(--body-fs);
font-weight: 400;
line-height: 1;
color: var(--primario);
padding-bottom: var(--15-10);
padding-inline: var(--10-5);
border-bottom: 1px var(--primario-lighter);
border-bottom-style: dashed;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
& .sdweb-bold {
/* height: 100%;
margin-right: 10px;
padding-inline: var(--10-5) calc(var(--10-5) + 10px);
padding-block: 5px;
background-color: var(--primario-lighter);
font-size: inherit;
font-weight: 500;
line-height: 1;
color: var(--primario-dark);
clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%); */
margin: 0;
padding: 0;
font-size: inherit;
font-weight: 500;
line-height: 1;
color: inherit;
}
}
&:last-child {
margin-bottom: var(--40-30);
}
}
}
}
}
}
/*****************************/
/*** Jerarquia de Permisos ***/
/*****************************/
#wrapper #page-wrapper {
& > .row {
& .panel-heading {
& > .row {
.btn-group {
max-width: 100%;
flex-wrap: wrap;
}
.buscador-roles {
display: flex;
gap: var(--10-5);
& > div {
display: flex;
align-items: center;
width: fit-content;
padding: 0;
& label {
white-space: nowrap;
}
}
}
}
}
& #jerarquiaPermisos {
width: calc(100% - 4px);
margin-block: var(--15-10) var(--40-30);
padding: var(--20-10);
box-shadow: var(--shadow-form-group);
/* Nodo */
.jstree-node:not(.jstree-leaf) {
/* Cerrado */
&.jstree-closed {
& > .jstree-icon.jstree-ocl {
background: none;
&:before{
content: '\f105';
font-family: var(--icono-ff);
font-weight: 900;
font-size: var(--h5-fs);
font-style: normal;
color: var(--primario-medio);
&:hover {
color: var(--primario-accent);
}
}
}
}
/* Abierto */
&.jstree-open {
& > .jstree-icon.jstree-ocl {
background: none;
&:before{
content: '\f107';
font-family: var(--icono-ff);
font-weight: 900;
font-size: var(--h5-fs);
font-style: normal;
color: var(--primario-medio);
&:hover {
color: var(--primario-accent);
}
}
}
}
}
/* fila seleccionada */
& .jstree-wholerow-clicked {
background: none;
}
/* fila hover */
& .jstree-wholerow-hovered {
background: none;
background-color: var(--primario-highlight-light);
}
/* fila normal */
.jstree-anchor {
margin-bottom: 5px;
}
& .jstree-clicked {
color: var(--primario-accent);
font-weight: 500;
& .jstree-icon.jstree-checkbox {
border-color: var(--primario-medio-link);
background-color: var(--primario-highlight);
color: var(--primario-medio-link);
background-image: url(../images/check_recursos.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
& .jstree-icon.jstree-checkbox {
--check-size: 16px;
width: var(--check-size);
height: var(--check-size);
margin: 3px 6px 3px 0;
border: 2px solid #8f8f9d;
border-radius: 4px;
background: none;
}
}
}
}
/*************************************/
/*** Estadísticas Cuadro de mandos ***/
/*************************************/
#wrapper #page-wrapper {
/* informe global de formación */
& #user-acciones-trimestre-participantes, #container-grafica-estados-alumnado {
margin: 0;
padding: var(--10-5);
box-shadow: var(--shadow-form-group);
border-radius: var(--form-radius);
.graph-grafica-estados-alumnado & {
padding: 0!important;
box-shadow: none!important;
border-radius: 0!important;
}
}
& .row.graficas_estadisticos {
& .panel-default-layout {
--column-ancha: 700px;
--column-w: 360px;
--gap: var(--20-10);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--column-w), min(var(--column-w), 100%)));
grid-auto-flow: dense;
gap: var(--gap);
justify-content: center;
/** Gráficas que necesitan un ancho mayor: Mediante clase de tipo de tabla ***/
&:has(.tipo_tabla_line, .tipo_tabla_bar, .tipo_tabla_bubble, .tipo_tabla_mixed, .tipo_tabla_scatter) {
display: flex;
flex-wrap: wrap;
align-items: stretch;
> * {
flex: 0 1 var(--column-w);
&:has(.tipo_tabla_line, .tipo_tabla_bar, .tipo_tabla_bubble, .tipo_tabla_mixed, .tipo_tabla_scatter) {
flex: 0 1 var(--column-ancha);
}
}
}
& > .separador-fila {
display: none;
}
& > [class*="graph-"] {
position: relative;
margin: 0;
padding: var(--10-5);
box-shadow: var(--shadow-form-group);
border-radius: var(--form-radius);
> [id] {
height: 100%;
display: flex;
flex-direction: column;
}
& .chart-title {
margin-block: var(--10-5);
text-align: center;
font-size: var(--h6-fs);
color: var(--primario);
font-weight: 500;
}
.chart-stage {
height: 100%;
display: flex;
flex-direction: column;
}
& [id*="info-"] {
width: fit-content;
margin-bottom: var(--10-5);
margin-top: auto;
margin-left: auto;
& a {
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
& [id*="leyenda-"] {
& ul:not(:empty) {
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
width: fit-content;
margin-inline: auto;
margin-bottom: var(--15-10);
padding: var(--10-5);
background-color: var(--primario-highlight-light);
border-radius: var(--form-radius);
box-shadow: var(--shadow-avatar);
& li {
font-size: calc(var(--small-fs) - 2px);
color: var(--primario);
margin-block: 0px;
strong {
font-weight: 600!important;
}
&:last-child {
margin-bottom: 0;
}
}
}
}
& .chart-notes {
display: flex;
flex-direction: column;
gap: var(--10-5);
margin-top: auto;
& a {
width: fit-content;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
/* Sin datos */
&:has(img[alt="Sin datos"]) {
display: none;
}
}
#user-acciones-trimestre-participantes {
padding: 0!important;
box-shadow: none!important;
border-radius: 0!important;
}
}
/* Botón ? ayuda */
.btn.btn-success.modal-ayuda {
--size: calc(var(--body-fs) * 1.3);
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
aspect-ratio: 1 / 1;
padding: 0;
border: none;
border-radius: var(--full-radius);
background-color: var(--primario);
flex-grow: 0;
position: absolute;
right: var(--10-5);
top: var(--10-5);
&:before {
content: '?';
font-family: var(--font-family);
font-size: var(--body-fs);
line-height: 1;
letter-spacing: 0;
font-weight: 500;
color: #fff;
}
&:is(:hover, :active, :focus) {
border-color: var(--primario-accent)!important;
background-color: var(--primario-accent)!important;
transition: var(--tr04);
}
}
/* Modal ayuda */
#modal_ayuda {
.panel-default-layout {
display: flex;
.panel-heading {
width: calc(100% + var(--padding) * 3 - 3px);
margin-left: calc(var(--padding) * -1 + 1px);
}
}
}
/* Tablas */
+ .double-scroll-container {
margin-top: var(--40-20);
}
}
}
/* Informe global de formación*/
#wrapper #page-wrapper {
& .graph-informe-global-left {
--column-w: 600px;
display: flex;
justify-content: center;
gap: var(--40-30);
& .chart-title {
margin-block: var(--10-5);
text-align: center;
font-size: var(--h6-fs);
color: var(--primario);
font-weight: 500;
}
& > .chart-wrapper {
flex: 0 1 var(--column-w);
max-width: 100%;
}
& [id*="info-"] {
width: fit-content;
margin-block: var(--10-5);
&:only-child {
margin-inline: auto;
}
& a {
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
margin-bottom: var(--15-10);
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
& [id*="leyenda-"] {
& ul:not(:empty) {
list-style: none;
width: fit-content;
margin-inline: auto;
margin-bottom: var(--15-10);
padding: var(--10-5);
background-color: var(--primario-highlight-light);
border-radius: var(--form-radius);
box-shadow: var(--shadow-avatar);
& li {
color: var(--primario);
margin-block: 5px;
&:last-child {
margin-bottom: 0;
}
}
}
}
& .chart-notes {
display: flex;
flex-direction: column;
gap: var(--10-5);
& a {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
min-height: 30px;
padding: calc(var(--10-5) * 0.33) var(--10-5);
border-radius: var(--btn-radius);
color: var(--primario) !important;
font-size: var(--body-fs);
border: 1px solid var(--primario);
transition: var(--tr02) !important;
background-color: var(--primario-extra-light);
letter-spacing: 1px;
&:hover, &:focus {
background-color: var(--primario-highlight);
text-decoration: none;
}
}
}
}
& .graph-informe-global-right {
margin-top: var(--30-20);
& .chart-title {
color: var(--primario);
font-size: var(--h6-fs);
margin-bottom: var(--15-10);
}
}
}
/** FILTROS RÁPIDOS **/
#filtros-rapidos {
--gap: var(--15-10);
display: flex;
justify-content: space-between;
gap: var(--gap);
flex-wrap: wrap;
margin-bottom: var(--10-5);
padding: var(--20-10) var(--10-5);
&:before, &:after {
display: none;
}
& > div {
flex: 1 1 calc(33.33% - var(--gap));
padding: 0;
/* filtro */
&.form-inline {
flex: 0 0 fit-content;
label {
display: flex;
align-items: center;
flex-wrap: nowrap;
font-weight: 400!important;
gap: var(--gap);
select {
align-items: center;
background-color: #fff !important;
border-radius: 4px !important;
border-width: 0 !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario) !important;
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
padding: 0 5px 0 var(--10-5) !important;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s !important;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap !important;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px) !important;
font-weight: 400;
gap: 5px;
}
}
}
/* buscador*/
&.qsearch-box {
display: flex;
align-items: center;
input {
background-color: #fff;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
line-height: 1;
list-style: none;
overflow: hidden;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: var(--small-fs);
font-weight: 400;
}
}
}
}
/****************/
/*** INFORMES ***/
/****************/
#ver_Informe {
& .row {
& .consulta-campo:not(.sdweb-show-grupo-label) {
& > [class=""] {
flex: 1 1 100%;
height: 100%;
margin-left: -10px;
padding-inline: calc(var(--10-5) + 10px) var(--10-5);
padding-block: var(--10-5);
background-color: var(--primario-extra-light);
line-height: 1;
}
}
}
}
#wrapper #page-wrapper .row {
.panel-body {
& .class-div-info {
padding-inline: var(--20-10);
margin-bottom: var(--15-10);
color: var(--primario);
font-size: var(--small-fs);
font-style: oblique;
}
&:has(> table) {
overflow: auto;
}
}
}
/************************/
/*** DETALLE MENSAJES ***/
/************************/
#messages-container {
--gap: 8px;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
width: calc(100% - 4px);
min-height: 70dvh;
margin-inline: 2px;
margin-bottom: 85px;
padding: var(--20-10);
border: none;
border-radius: var(--form-radius);
background-color: #fafbfc;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
flex-direction: column;
overflow-y: auto;
justify-content: flex-start;
.message-item {
.message-bubble {
width: fit-content;
max-width: calc(100% - var(--120-60));
background-color: white;
box-shadow: 0 2px 8px rgba(44, 56, 98, 0.08);
margin-bottom: clamp(8px, 8px + 0.66vw, 12px);
margin-left: var(--15-10);
border-radius: 16px;
padding: 12px 16px;
position: relative;
font-size: var(--body-fs);
background-color: var(--primario-extra-light);
display: flex;
gap: 8px;
flex-wrap: wrap;
line-height: 1.4;
border: 1px solid var(--primario-lighter);
transition: transform 0.15s ease, box-shadow 0.15s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 3px 12px rgba(44, 56, 98, 0.12);
}
.message-author {
text-decoration: none;
color: var(--primario);
font-weight: 600;
order: 1;
font-size: var(--small-fs);
}
.message-text {
order: 3;
flex: 1 1 100%;
color: var(--primario-dark);
}
.message-date {
color: var(--gris-oscuro);
font-size: calc(var(--small-fs) - 1px);
order: 2;
display: flex;
align-items: center;
opacity: 0.75;
}
/* Mis mensajes */
&.current-user {
margin-left: auto;
margin-right: var(--15-10);
background: linear-gradient(135deg, var(--primario) 0%, var(--primario-medio) 100%);
border-color: var(--primario);
.message-text {
color: #fff;
}
.message-date {
color: rgba(255, 255, 255, 0.85);
}
}
}
}
}
.mensajes-form-container {
--gap: 4px;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
width: calc(100vw - var(--sidebar-left-w) - var(--15-10) * 2 - 4px);
margin-inline: 2px;
margin-bottom: var(--10-5);
padding: 16px var(--20-10) 18px;
border: none;
border-radius: 0;
box-shadow: 0 -4px 12px rgba(44, 56, 98, 0.08);
flex-direction: column;
position: fixed;
bottom: 0;
left: calc(var(--sidebar-left-w) + var(--15-10));
background-color: #fff;
border-top: 2px solid var(--primario-extra-light);
backdrop-filter: blur(10px);
.mensajes-form-wrapper {
display: flex;
gap: 12px;
align-items: flex-end;
.mensajes-form-input-wrapper {
flex: 1;
textarea {
border-radius: 24px;
padding: 12px 18px;
border: 2px solid var(--primario-lighter);
background-color: var(--primario-highlight-light);
transition: all 0.2s ease;
resize: none;
font-size: var(--body-fs);
color: var(--primario-dark);
&::placeholder {
color: var(--primario-light);
}
&:focus {
border-color: var(--primario);
background-color: #fff;
box-shadow: 0 0 0 3px rgba(44, 56, 98, 0.08);
outline: none;
}
}
}
.btn.btn-primary.btn-send {
width: 40px;
height: 40px;
min-height: 40px;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primario) 0%, var(--primario-medio) 100%);
border: none;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(44, 56, 98, 0.25);
cursor: pointer;
&:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 16px rgba(44, 56, 98, 0.35);
}
&:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 2px 8px rgba(44, 56, 98, 0.3);
}
i {
margin: 0;
font-size: 16px;
color: #fff;
}
}
}
}
/*******************************/
/*** NUEVA CONVERSACIÓN MENSAJES ***/
/*******************************/
#nueva-conversacion-form {
padding: 20px 0;
.form-container-centered {
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
}
/* Transiciones suaves para campos que aparecen/desaparecen */
#tutor-legal-group,
#tutor-legal-select-group,
#sin-tutores-msg {
transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, margin 0.5s ease-in-out, padding 0.5s ease-in-out;
overflow: hidden;
}
#tutor-legal-group,
#tutor-legal-select-group {
opacity: 0;
max-height: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
#tutor-legal-group.show {
opacity: 1;
max-height: 250px;
margin-bottom: 25px;
}
#tutor-legal-select-group.show {
opacity: 1;
max-height: 300px;
margin-bottom: 25px;
padding-top: 0;
padding-bottom: 0;
}
.form-group-modern {
margin-bottom: 25px;
width: 100%;
label {
font-weight: 600;
color: var(--primario-dark);
margin-bottom: 8px;
font-size: 14px;
display: block;
}
}
/* Campos de formulario */
.form-control-lg {
height: 45px;
font-size: 15px;
border-radius: var(--form-radius);
border: 1px solid var(--primario-lighter);
padding: 10px 15px;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
box-sizing: border-box !important;
&:focus {
border-color: var(--primario);
box-shadow: 0 0 0 3px rgba(44, 56, 98, 0.1);
outline: none;
}
}
textarea.form-control-lg {
height: auto;
min-height: 190px;
resize: vertical;
font-family: inherit;
line-height: 1.6;
}
select.form-control-lg {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 40px;
&:disabled {
background-color: #f5f5f5;
cursor: not-allowed;
opacity: 0.6;
}
}
.required {
color: var(--danger);
font-weight: bold;
margin-left: 2px;
}
/* Label estándar */
.form-label {
font-weight: 600;
color: var(--primario-dark);
margin-bottom: 8px;
font-size: 14px;
display: block;
}
/* Checkbox moderno estilo toggle */
.checkbox-modern-wrapper {
margin: 0;
padding: 10px 0;
width: auto;
display: block;
}
.checkbox-modern {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
position: relative;
padding-left: 0;
margin-bottom: 0;
input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
}
.checkbox-modern-slider {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
background-color: #ccc;
border-radius: 26px;
transition: all 0.3s ease;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
&:before {
content: "";
position: absolute;
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
}
.checkbox-modern input[type="checkbox"]:checked + .checkbox-modern-slider {
background-color: var(--primario);
&:before {
transform: translateX(24px);
}
}
.checkbox-modern input[type="checkbox"]:disabled + .checkbox-modern-slider {
opacity: 0.5;
cursor: not-allowed;
}
.checkbox-modern:hover .checkbox-modern-slider {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 0 3px rgba(44, 56, 98, 0.1);
}
/* Mensaje sin tutores */
#sin-tutores-msg {
display: block;
margin-top: 10px;
padding: 8px 12px;
background-color: #f8f9fa;
border-left: 3px solid #5bc0de;
border-radius: 3px;
color: #5a6268;
font-size: 13px;
i {
margin-right: 5px;
}
}
/* Botones mejorados */
.btn-lg {
padding: 12px 30px;
font-size: 16px;
border-radius: var(--btn-radius);
font-weight: 600;
transition: all 0.3s ease;
}
.btn-success {
background-color: #2C3862;
color: #fff;
border-color: var(--success-dark);
&:hover {
background-color: var(--success-dark);
border-color: var(--success-dark);
transform: translateY(-1px);
}
}
.btn-default {
background-color: #fff;
border-color: #ccc;
color: #333;
&:hover {
background-color: #f5f5f5;
border-color: #adadad;
transform: translateY(-1px);
}
}
/* Centrar las filas del formulario */
.row-centered {
display: flex;
flex-direction: column;
align-items: center;
margin-left: -15px;
margin-right: -15px;
}
.row-buttons {
display: flex;
justify-content: center;
margin-top: 20px;
margin-left: -15px;
margin-right: -15px;
}
.col-md-6 {
padding-left: 15px;
padding-right: 15px;
width: 50%;
float: left;
box-sizing: border-box;
}
/* Responsive */
@media (min-width: 992px) {
.row-centered .col-md-6 {
width: 600px;
max-width: 600px;
}
}
@media (max-width: 768px) {
.col-md-6 {
width: 100%;
display: block;
}
.form-control-lg {
font-size: 14px;
}
.btn-lg {
padding: 10px 20px;
font-size: 14px;
width: 100%;
margin-top: 10px;
}
textarea.form-control-lg {
min-height: 150px;
}
}
}
/***********************/
/*** PÁGINA DE LOGIN ***/
/***********************/
body#login-page {
--color: #3d4d88;
min-height: 100vh!important;
background-size: cover!important;
& #page-wrapper {
display: flex;
justify-content: flex-end;
height: 100% !important;
min-height: 100vh;
padding: 0px !important;
color: var(--color);
& #panel_right_login {
display: flex;
height: fit-content;
width: 33%;
min-height: 100vh;
background-color: #fff;
padding: var(--60-30);
box-shadow: -4px 0 12px var(--color);
& form {
position: relative;
display: flex;
flex-direction: column;
gap: var(--15-10);
max-width: 100%;
margin-block: auto;
& .form-group {
display: flex;
align-items: center;
gap: 5px;
width: var(--form-item-min-width);
max-width: 100%;
/* Logo*/
&:first-of-type {
justify-content: center;
width:100%;
& .logo-login {
content: url('../images/logotipo.png');
max-width: 100%;
max-height: var(--80-60);
margin-bottom: var(--30-15);
}
}
/* Contraseña */
& .password-container {
position: relative;
width: 100%;
/* Ojito */
& .glyphicon.toggle-password {
position: absolute;
right: var(--10-5);
}
}
/* Recordarme*/
&:last-of-type {
align-items: flex-start;
}
& #remember_me {
margin-top: 2px;
&+ label {
margin: 0;
color: inherit;
}
}
/* Botón Entrar / Acceder */
&.submit {
position: relative;
display: flex;
justify-content: center;
gap: 40px;
width: fit-content;
margin-top: 10px;
margin-inline: auto;
float: none;
padding: 0;
background-color: var(--primario);
border-radius: 100vmax;
&:before {
content: '';
--size: 30px;
width: var(--size);
height: var(--size);
position: absolute;
right: 6px;
background-color: var(--secundario);
top: 0;
bottom: 0;
margin-block: auto;
border-radius: 50%;
transition: 0.4s ease-in-out;
}
&:after {
content: '';
background: url(../images/icono_flecha_doble_primario.svg);
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: center right;
overflow: hidden;
position: absolute;
right: 11px;
top: 0;
bottom: 0;
margin-block: auto;
--size: 20px;
width: var(--size);
height: var(--size);
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s ease-in-out;
}
& input {
align-content: center;
padding: 10px 50px 10px 15px;
width: fit-content;
background-color: transparent;
border-radius: 100vmax;
border: none;
z-index: 2;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
color: #fff!important;
font-size: 17px;
text-align: center;
line-height: 20px;
height: auto;
&:hover, &:focus {
background-color: transparent!important;
}
}
&:hover, &:focus {
input {
background-color: transparent;
color: var(--primario)!important;
}
&:before {
width: 100%;
height: 100%;
right: 0;
border-radius: 100vmax;
transform-origin: right center;
}
&:after {
background-position: center left;
transform-origin: right center;
}
}
}
}
/* Mensaje bienvenida */
& > h2 {
margin-block: 0 20px;
font-size: var(--h4-fs);
font-weight: 600;
color: inherit;
}
& > br {
display: none;
}
/*Iniciar sesión */
& > p {
font-size: var(--h6-fs);
color: inherit;
text-decoration: underline 2px var(--secundario);
& strong {
font-weight: 500;
}
}
/* Mensaje de error */
& .alert {
position: absolute;
inset: 0;
margin: auto;
width: fit-content;
height: fit-content;
background-color: var(--danger);
color: white;
border-radius: var(--container-radius);
box-shadow: var(--shadow-modal-content);
border-color: var(--danger-dark);
}
}
}
}
}
@media (max-width: 991px) {
body#login-page {
& #page-wrapper {
& #panel_right_login {
width: 100%;
min-height: unset;
align-self: end;
padding: var(--40-30);
& form {
--gap: var(--10-5);
flex-direction: row;
flex-wrap: wrap;
gap: var(--gap);
align-items: flex-start;
/* logo */
& .logo-login {
max-width: 200px !important;
max-height: 200px;
object-fit: contain;
}
/* Mensaje de bienvenida */
& > h2 {
font-size: var(--h5-fs);
}
/*Iniciar sesión */
& > p {
flex: 1 1 100%;
/*Iputs*/
&+ .form-group, &+ .form-group + .form-group {
flex: 1 1 calc(50% - var(--gap));
min-width: 300px;
}
}
/* Recordarme*/
& .form-group:last-of-type {
flex: 1 1 100%;
}
}
}
}
}
}
/***********************/
/*** PÁGINA DE ERROR ***/
/***********************/
body.error {
display: flex;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
&:before {
content: '';
background-color: var(--primario);
position: fixed;
inset: 0;
opacity: 0.3;
z-index: -1;
}
& .cabecera-error {
&:not(:empty) {
width:100%;
background-color: white;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
}
& .mensaje-error {
display: flex;
justify-content: center;
height: fit-content;
margin: 16vh auto auto;
background-color: white;
padding: var(--20-10) var(--40-30);
box-shadow: var(--shadow-modal-content);
border-radius: var(--container-radius);
border: 2px solid var(--primario-medio);
& .sidi-mascota-robot {
--size:120px;
width: var(--size);
height:var(--size);
margin-top: 5px;
display: block;
background-image: url('../images/SIDI-4-Rec.png');
background-size: 95%;
background-size: contain;
background-repeat: no-repeat;
}
& .cuerpo-error {
display: flex;
flex-wrap: wrap;
gap: var(--10-5);
width: 700px;
max-width: 100%;
& h1.http-error-titulo {
flex: 1 1 100%;
color: var(--primario);
margin-block: 0 20px;
font-size: var(--h2-fs);
font-weight: 600;
}
& p {
flex: 1 1 100%;
margin: 0;
color: var(--primario);
&.http-error-contenido {
font-size: var(--h6-fs);
font-weight: 500;
text-align: center;
}
}
& a {
position: relative;
/* salir */
&:is(.btn-success:not(.modal-ayuda), button#crear-clases-button, button#crear-festivo-button)[href*="logout"] {
order: 1;
margin-left: auto;
&:is(:hover, :active, :focus) {
background-color: var(--danger)!important;
border-color: var(--danger-dark)!important;
color: white!important;
}
}
}
}
}
}
/*****************/
/*** RESPONSVE ***/
/*****************/
@media (max-width: 767px){
/* Menú Burguer */
#wrapper nav.navbar.navbar-default {
& .navbar-header {
& .navbar-toggle {
margin-left: 15px;
margin-right: 0;
padding: 5px;
background-color: var(--primario);
border: none;
border-radius: var(--form-radius);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 30px;
height: 30px;
aspect-ratio: 1 / 1;
box-shadow: 2px 2px 4px var(--primario-highlight);
& .icon-bar {
background-color: #ffffff;
margin: 0;
width:100%;
}
&:hover {
background-color: var(--primario-accent);
}
}
}
/* menú burguer desplegado */
&:has(.sidebar-nav.navbar-collapse.collapse.in) {
& .navbar-toggle {
justify-content: space-between;
background-color: var(--secundario);
box-shadow: 2px 2px 4px var(--secundario-light);
&:hover {
background-color: var(--secundario-medio);
}
& .icon-bar {
width: 22px;
height: 3px;
transition: 0.2s all ease-in-out;
&:nth-child(2) {
position: relative;
top: 9px;
transform: rotate(45deg);
}
&:nth-child(3) {
opacity: 0;
visibility: hidden;
}
&:nth-child(4){
position: relative;
bottom: 8px;
transform: rotate(-45deg);
}
}
}
}
/* menú */
& .sidebar-nav.navbar-collapse {
&.collapse.in, &.collapsing {
position: fixed;
left: var(--15-10);
top: var(--header-height);
border-radius: var(--form-radius);
border: none;
max-height: calc(100vh - var(--header-height));
overflow: auto;
box-shadow: var(--shadow-modal-content);
&:before {
content: '';
}
& #menu-sidebar {
max-height: unset;
}
}
}
/* Menú usuario */
& ul.navbar-top-links {
margin-right: 0;
& li.dropdown {
& a.dropdown-toggle {
& .fa.fa-user.fa-fw {
--avatar-size: 40px;
}
& .nav-user-name {
font-size: var(--small-fs);
}
}
}
}
}
/* Filtros */
#wrapper #nav-right {
margin-top: 0;
max-height: unset;
}
/*Bloque central*/
#wrapper #page-wrapper {
margin-left: 0;
padding: var(--15-10) !important;
}
/*****************/
/* CONTENIDO */
/*****************/
#wrapper #page-wrapper {
& > .row {
& .panel-heading {
font-size: var(--h5-fs);
}
& .panel-body {
& [id*="ver_"] {
& .row {
& .consulta-campo:not(.sdweb-show-grupo-label) {
flex: 1 1 calc(50% - var(--gap));
min-width: 300px;
background-color: var(--primario-extra-light);
& .control-label:not(:empty) {
white-space: normal;
width: fit-content;
}
& * {
font-size: var(--small-fs)!important;
}
/* Con label pero sin contenido */
& .well, & .form-control {
width: fit-content!important;
}
}
& .consulta-campo.sdweb-show-grupo-label {
& label.control-label:not(:empty) {
white-space: normal;
font-size: var(--h6-fs);
}
&:after {
display: none;
}
}
}
}
}
}
}
}
/***************************************************/
/*** FIN NUEVOS ESTILOS SDWEB UNIVERSITY MANAGER ***/
/***************************************************/
/*CSS para la animación de espera para la importación*/
body {
position: relative;
}
#fondoCarga{
--bg-color: #ffffff;
--color: var(--primario, #2c3862);
position: absolute;
width: 100%;
height: 100%;
background-color: var(--bg-color, #fff);
opacity: 0.4;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
z-index: 9999;
}
#floatingCirclesG{
position:fixed;
inset: 0;
width:125px;
height:125px;
margin:auto;
transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:var(--bg-color, #fff);
height:22px;
width:22px;
border-radius: 50%;
animation-name:f_fadeG;
animation-duration:1.2s;
animation-iteration-count:infinite;
animation-direction:normal;
}
#frotateG_01{
left:0;
top:51px;
animation-delay:0.45s;
}
#frotateG_02{
left:15px;
top:15px;
animation-delay:0.6s;
}
#frotateG_03{
left:51px;
top:0;
animation-delay:0.75s;
}
#frotateG_04{
right:15px;
top:15px;
animation-delay:0.9s;
}
#frotateG_05{
right:0;
top:51px;
animation-delay:1.05s;
}
#frotateG_06{
right:15px;
bottom:15px;
animation-delay:1.2s;
}
#frotateG_07{
left:51px;
bottom:0;
animation-delay:1.35s;
}
#frotateG_08{
left:15px;
bottom:15px;
animation-delay:1.5s;
}
@keyframes f_fadeG{
0%{
background-color: var(--color);
}
100%{
background-color:var(--bg-color, #fff);
}
}
/* Fin animación de espera para la importación */
/** REGLA PARA SAFARI Y OTROS ORDENADORES QUE NO SOPORTAN EL HEIGHT: FIT-CONTENT **/
@supports not (height: fit-content) {
.open .dropdown-menu, .select2-selection--multiple, ul.select2-selection__rendered, [class*="botonEliminarAsignatura"], .form-group:not(.form-field-input), :is(.consulta-campo.tabla, .consulta-campo:has(table)) .control-label:not(:empty), #head-buttons, #calendar-container, #wrapper #page-wrapper .row #calendar-container .tui-full-calendar-timegrid-container .tui-full-calendar-timegrid-right .tui-full-calendar-timegrid-schedules .tui-full-calendar-timegrid-schedules-container .tui-full-calendar-time-date .tui-full-calendar-time-date-schedule-block-wrap :is(.tui-full-calendar-time-date-schedule-block, .tui-full-calendar-time-date-schedule-block .tui-full-calendar-time-schedule .tui-full-calendar-time-schedule-content), #calendar-container .tui-full-calendar-weekday-schedule, #panel_right_login, .alert, .mensaje-error {
height: auto!important;
}
}
/** Modal Alerta IBAN **/
#modal_alerta_iban.modal.in {
& .modal-dialog {
& .modal-content {
& .panel-body {
margin: 0;
padding: 0;
}
}
}
}
/** Modal de Sincronizar alumnos **/
#modalSincronizarAlumnos {
.modal-body {
padding: 0;
.estado_modal.modal-title {
margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
border-radius: var(--form-radius) var(--form-radius) 0 0;
font-size: var(--h5-fs);
line-height: 1.1;
color: var(--primario) !important;
background-color: var(--primario-highlight) !important;
padding: var(--20-10);
font-weight: 500;
border: none;
text-align: left;
}
#importer-file-explanation {
border: none;
background: none;
color: #333;
font-weight: 400;
}
}
.modal-footer {
margin: 0;
border-radius: var(--form-radius) var(--form-radius) 0 0;
font-size: var(--h5-fs);
line-height: 1.1;
color: var(--primario) !important;
padding: 0 0 var(--20-10);
border: none;
display: flex;
justify-content: space-between;
width: 100%;
gap: var(--gap);
--gap: var(--10-5);
&:before, &:after {
display: none;
}
& > * {
flex: 1 1 calc(50% - var(--gap));
padding: 0;
display: flex;
justify-content: center;
margin: 0;
& .btn-secondary:hover {
background-color: var(--danger) !important;
border-color: var(--danger-dark) !important;
color: white !important;
}
}
}
}
/** Modal importar **/
#modalImportar.modal.in, #modal_importer.modal.in, #modalImportarCosteAsignaturas.modal.in {
/*cierre*/
& .modal-dialog {
& .modal-content {
& .modal-header {
& .close {
border-radius: 50%!important;
}
}
/* Overlay de carga para operaciones */
& .modal-loading-overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
z-index: 1000;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: var(--form-radius);
&.active {
display: flex;
}
& .spinner-lg {
border: 5px solid #f3f3f3;
border-top: 5px solid var(--primario);
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
& p {
color: var(--primario);
font-weight: 500;
font-size: var(--body-fs);
margin: 0;
}
}
/* Spinner de carga del modal */
& .loading-content {
text-align: center;
padding: 40px 20px;
& .spinner-lg {
border: 5px solid #f3f3f3;
border-top: 5px solid var(--primario);
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
}
}
}
.modal-body {
padding: 0;
display: flex;
flex-wrap: wrap;
--gap: var(--15-10);
gap: var(--gap);
&:before, &:after {
display: none;
}
.modal-title {
flex: 1 1 100%;
margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
border-radius: var(--form-radius) var(--form-radius) 0 0;
font-size: var(--h5-fs);
line-height: 1.1;
color: var(--primario) !important;
background-color: var(--primario-highlight) !important;
padding: var(--20-10);
font-weight: 500;
border: none;
text-align: left;
}
#importer-file-explanation {
margin: 0;
padding-block: 0;
border: none;
background: none;
color: #333;
font-size: var(--body-fs);
font-weight: 400;
p {
text-align: justify!important;
}
a {
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px!important;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding-block: var(--10-5);
padding-left: calc(var(--20-10) * 2);
padding-right: var(--10-5);
background-image: url(../images/file_download.svg);
background-position: left calc(var(--10-5) / 2) center;
background-size: contain;
margin: var(--20-10) auto;
display: flex;
width: fit-content;
background-repeat: no-repeat;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:hover {
background-color: var(--primario-highlight) !important;
border-color: var(--primario-dark) !important;
text-decoration: none;
}
}
}
.form-group {
flex: 1 1 calc(50% - var(--gap));
width: calc(50% - var(--gap));
min-width: 300px;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px var(--10-5);
justify-content: flex-start;
align-items: flex-start;
&.full-width {
flex: 1 1 100%;
}
}
/* Select2 con flecha de desplegable */
.select2-container {
width: 100% !important;
.select2-selection--multiple {
position: relative;
padding-right: 25px;
min-height: 34px;
&::after {
content: '\f107';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--primario);
font-family: var(--icono-ff);
font-weight: bold;
font-size: var(--h6-fs);
pointer-events: none;
}
}
&.select2-container--open .select2-selection--multiple::after {
transform: translateY(-50%) rotate(180deg);
}
}
/* Input adjuntar archivo */
input#adjuntarArchivo {
width: fit-content;
margin: auto;
border: none;
box-shadow: none;
padding: 0;
font-weight: 400;
}
/* Mensajes de alerta */
> .alert.fade {
order: 100;
margin-block: var(--15-10);
}
/* Tabla */
#importer-file-table {
overflow: auto;
max-width: 100%;
max-height: 50vh;
&:empty {
display: none;
}
table#importer-table {
margin: 0;
border-collapse: separate;
border: none;
& thead {
& tr {
&:first-of-type:not(:last-of-type) {
& th {
background-color: var(--primario-lighter);
font-size: calc(var(--body-fs) + 1px);
}
& th:first-child {
border-left-color: var(--primario-lighter);
border-radius: var(--container-radius) 0 0 0;
}
& th:last-child {
border-right-color: var(--primario-lighter);
border-radius: 0 var(--container-radius) 0 0;
}
& th:only-child {
border-left-color: var(--primario-lighter);
border-right-color: var(--primario-lighter);
border-radius: var(--container-radius) var(--container-radius) 0 0;
}
}
& ~ tr {
& th {
border-radius: 0!important;
&:not([class*="col"]) {
border-left-color: #fff;
}
}
}
}
}
& tr {
& :is(th, td) {
padding: var(--10-5) var(--15-10);
vertical-align: middle;
white-space: nowrap;
& a {
color: var(--primario-medio-link);
&:hover {
color: var(--primario-accent);
text-decoration: none;
}
}
}
& th {
text-align: center;
font-weight: 500;
border-left: 1px solid var(--primario-extra-light);
border-bottom: 1px solid white;
background-color: var(--primario-extra-light);
border-top-color: var(--primario-extra-light);
color: var(--primario);
/** Input marcar-todas-clases checked **/
input#marcar-todas-clases[value="1"] {
appearance: none;
border: 2px solid var(--primario-medio-link);
background-color: var(--primario-highlight);
background-image: url(../images/check-input-checked.svg);
border-radius: 3px;
background-size: 150%;
background-repeat: no-repeat;
background-position: center;
margin-bottom: -2px;
}
/***************************************/
& ~ th {
border-left-color: #fff;
}
&.sorted {
position: relative;
&:after {
content: '';
height: 5px;
background-image: linear-gradient(var(--primario-extra-light) 0%, var(--primario-accent) 100%);
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
& a {
color: var(--primario-accent);
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
&:after {
color: inherit;
transition: var(--tr04);
font-family: var(--icono-ff);
font-size: var(--h6-fs);
font-weight: 900;
}
&.asc:after {
content: '\f106';
}
&.desc:after {
content: '\f107';
}
&:hover {
color: var(--primario-medio-link);
}
&:focus {
text-decoration: none;
}
}
}
&:first-of-type {
border-radius: var(--container-radius) 0 0 0;
}
&:last-of-type {
border-radius: 0 var(--container-radius) 0 0;
}
&:only-of-type {
border-radius: var(--container-radius) var(--container-radius) 0 0;
}
}
& td {
border-right: 1px solid var(--primario-extra-light);
border-top: 1px solid var(--primario-extra-light);
border-left: none;
border-bottom: none;
background-color: white;
font-weight: 400;
& input:checked {
--check-size: 14px;
}
&:first-child {
border-left: 1px solid var(--primario-extra-light);
}
}
&:last-child {
& td {
border-bottom: 1px solid var(--primario-extra-light);
&:first-child {
border-bottom-left-radius: var(--container-radius);
}
&:last-child {
border-bottom-right-radius: var(--container-radius);
}
}
}
&.highlight {
background: none!important;
}
}
& thead {
& td {
background-color: var(--primario-highlight-light);
}
}
& tbody {
& tr {
background-color: transparent!important;
&:hover td {
background-color: var(--primario-highlight-light);
}
& td:first-of-type {
border-left: 1px solid var(--primario-extra-light);
}
& th {
background-color: var(--primario-highlight-light);
border-radius: 0!important;
&:last-child {
border-right: 1px solid var(--primario-extra-light);
}
}
&:last-child {
& th {
border-bottom-left-radius: var(--container-radius)!important;
border-bottom-color: var(--primario-highlight-light);
& + td {
border-bottom-left-radius: 0!important;
}
}
& td:first-of-type:not(:last-child) {
border-bottom-left-radius: var(--container-radius);
}
& td:last-of-type {
border-bottom-right-radius: var(--container-radius);
}
& td:only-of-type:not(:last-child) {
border-bottom-left-radius: var(--container-radius);
border-bottom-right-radius: var(--container-radius);
}
}
}
}
}
}
}
.modal-footer {
margin: 0 calc(var(--15-10) * -1) calc(var(--15-10) * -1);
width: calc(100% + var(--15-10) * 2) !important;
border-radius: 0 0 var(--form-radius) var(--form-radius);
font-size: var(--h5-fs);
line-height: 1.1;
color: var(--primario) !important;
padding: var(--15-10);
border: none;
display: flex;
justify-content: flex-end;
gap: 5px;
--gap: var(--10-5);
background-color: var(--primario-highlight-medio);
&:before, &:after {
display: none;
}
> div[class*="col"] {
flex: 0 0 fit-content;
width: fit-content;
}
button {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
/** Modal Resultado **/
#modalResultado.modal.in {
/*cierre*/
& .modal-dialog {
& .modal-content {
& .modal-header {
& .close {
border-radius: 50%!important;
}
}
}
}
.modal-body {
padding: 0;
display: flex;
flex-wrap: wrap;
--gap: var(--15-10);
gap: var(--gap);
&:before, &:after {
display: none;
}
.modal-title {
flex: 1 1 100%;
margin: calc(var(--padding) * -1) calc(var(--padding) * -1) var(--padding);
border-radius: var(--form-radius) var(--form-radius) 0 0;
font-size: var(--h5-fs);
line-height: 1.1;
color: var(--primario) !important;
background-color: var(--primario-highlight) !important;
padding: var(--20-10);
font-weight: 500;
border: none;
text-align: left;
}
#importer-file-explanation {
background: none !important;
border: none;
margin: 0;
color: inherit;
h4 {
font-size: var(--h6-fs)!important;
margin-bottom: var(--20-10);
}
p {
font-size: var(--h6-fs)!important;
}
}
#importer-file-table {
h5 {
font-size: var(--h6-fs)!important;
margin-bottom: var(--20-10);
}
table {
margin: 0;
border-collapse: separate;
border: none;
& thead {
& tr {
&:first-of-type:not(:last-of-type) {
& th {
background-color: var(--primario-lighter);
font-size: calc(var(--body-fs) + 1px);
}
& th:first-child {
border-left-color: var(--primario-lighter);
border-radius: var(--container-radius) 0 0 0;
}
& th:last-child {
border-right-color: var(--primario-lighter);
border-radius: 0 var(--container-radius) 0 0;
}
& th:only-child {
border-left-color: var(--primario-lighter);
border-right-color: var(--primario-lighter);
border-radius: var(--container-radius) var(--container-radius) 0 0;
}
}
& ~ tr {
& th {
border-radius: 0!important;
&:not([class*="col"]) {
border-left-color: #fff;
}
}
}
}
}
& tr {
& :is(th, td) {
padding: var(--10-5) var(--15-10);
vertical-align: middle;
white-space: nowrap;
}
& th {
text-align: center;
font-weight: 500;
font-size: var(--body-fs);
border-left: 1px solid var(--primario-extra-light);
border-bottom: 1px solid white;
background-color: var(--primario-extra-light);
border-top-color: var(--primario-extra-light);
color: var(--primario);
& ~ th {
border-left-color: #fff;
}
&:first-of-type {
border-radius: var(--container-radius) 0 0 0;
}
&:last-of-type {
border-radius: 0 var(--container-radius) 0 0;
}
&:only-of-type {
border-radius: var(--container-radius) var(--container-radius) 0 0;
}
}
& td {
border-right: 1px solid var(--primario-extra-light);
border-top: 1px solid var(--primario-extra-light);
border-left: none;
border-bottom: none;
background-color: white;
font-weight: 400;
font-size: var(--small-fs);
&:first-child {
border-left: 1px solid var(--primario-extra-light);
}
}
&:last-child {
& td {
border-bottom: 1px solid var(--primario-extra-light);
&:first-child {
border-bottom-left-radius: var(--container-radius);
}
&:last-child {
border-bottom-right-radius: var(--container-radius);
}
}
}
}
}
/*paginador*/
#pagination {
--size: 25px;
display: flex;
justify-content: center;
gap: 5px;
button {
display: flex;
justify-content: center;
align-items: center;
width: var(--size);
height: var(--size);
aspect-ratio: 1 / 1;
margin: 0;
padding: 0;
border: none;
border-radius: var(--full-radius);
background-color: var(--primario-light);
font-size: var(--small-fs);
color: #fff;
&:hover {
background-color: var(--primario-highlight);
color: var(--primario);
}
&:only-of-type {
display: none;
}
&.active {
background-color: var(--primario-highlight);
pointer-events: none;
color: var(--primario);
}
}
}
}
}
.modal-footer {
display: none;
}
}
/* Estilos que añadio Fran directamente en twig para crear un botón deslizante */
.switch-container {
display: flex;
align-items: center;
margin: 10px 0; /* Ajusta el margen superior e inferior según sea necesario */
}
.switch-label {
margin: 0 5px; /* Ajusta el margen según sea necesario para pegar los textos al switch */
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Fin de los estilos que añadio Fran directamente en twig para crear un botón deslizante */
/* Estilos para el scroll de arriba */
.double-scroll-container {
position: relative;
width: 100%;
}
.scroll-top {
overflow-x: auto;
overflow-y: hidden;
height: 20px;
margin-bottom: 5px;
}
.scroll-top {
-ms-overflow-style: scrollbar;
scrollbar-width: auto;
}
/* Fin estilos para el scroll de arriba */
/** BOTONES VERSIÓN 2 **/
#wrapper #page-wrapper .row {
& #calendar-container {
& .tui-full-calendar-popup.tui-full-calendar-popup-detail {
& .tui-full-calendar-section-button {
display: grid;
grid-template-columns: repeat(2, auto);
justify-items: center;
gap: 15px 10px;
margin-top: 15px;
font-size: calc(var(--small-fs) - 2px);
& button {
all: unset;
align-items: center;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
& .tui-full-calendar-content {
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
}
&:focus {
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
}
}
}
/** BOTONES EN GENERAL **/
.panel-heading, .panel-body, .panel-footer {
.btn-group {
gap: var(--10-5);
}
button.btn, a.btn {
all: unset;
align-items: center;
position: relative !important;
inset: unset !important;
appearance: none;
background-color: var(--primario-highlight-light);
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: var(--primario);
cursor: pointer;
display: inline-flex;
justify-content: space-between;
line-height: 1;
list-style: none;
overflow: hidden;
padding: var(--10-5) var(--15-10);
position: relative;
text-align: left;
text-decoration:none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
gap: 5px;
.caret {
border-top: 6px solid var(--primario);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
& .tui-full-calendar-content {
font-size: calc(var(--small-fs) - 2px);
font-weight: 400;
}
&:focus {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
&:hover {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}
&:active {
background-color: var(--primario-highlight) !important;
color: var(--primario-dark) !important;
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
}
}
/* Animación global del spinner */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ==========================================================================
MODAL QR ASISTENCIAS
========================================================================== */
/* Contenedor del modal */
#modal_qr_asistencia .modal-dialog {
max-width: 1100px;
margin: 50px auto;
}
#modal_qr_asistencia .modal-content {
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
/* Cabecera */
#modal_qr_asistencia .modal-qr-header {
background: #2c3862;
color: #fff;
padding: 20px 30px;
border-bottom: 3px solid #1e2741;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#modal_qr_asistencia .modal-qr-header-info {
flex: 1;
margin-right: 15px;
}
#modal_qr_asistencia .modal-qr-header .modal-title {
font-weight: 600;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
margin: 0 0 8px;
}
#modal_qr_asistencia .modal-qr-header-course {
opacity: 0.95;
font-size: 15px;
color: #fff;
font-weight: 500;
}
#modal_qr_asistencia .modal-qr-close {
position: static;
top: auto;
right: auto;
width: auto;
height: auto;
opacity: 1;
background: transparent;
border-radius: 0;
box-shadow: none;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
margin-left: 15px;
padding: 0;
line-height: 1;
font-size: 2rem;
color: #fff;
}
#modal_qr_asistencia .modal-qr-close span {
color: #fff;
}
#modal_qr_asistencia .modal-qr-close:hover,
#modal_qr_asistencia .modal-qr-close:focus {
background: transparent;
box-shadow: none;
color: #fff;
}
/* Cuerpo */
#modal_qr_asistencia .modal-qr-body {
padding: 30px;
background: #fff;
max-height: calc(100vh - 280px);
overflow-y: auto;
}
/* Configuracion */
#modal_qr_asistencia .modal-qr-config-card {
border: 1px solid #e9ecef;
border-radius: 8px;
max-width: 700px;
margin: 0 auto;
background: #fff;
}
#modal_qr_asistencia .modal-qr-config-header {
background: linear-gradient(90deg, #2c3862 0%, #3d4a75 100%);
color: #fff;
border-radius: 8px 8px 0 0;
}
#modal_qr_asistencia .modal-qr-config-body {
padding: 25px;
}
#modal_qr_asistencia .modal-qr-label {
font-weight: 600;
color: #2c3862;
}
#modal_qr_asistencia .modal-qr-input {
font-size: 16px;
}
#modal_qr_asistencia .modal-qr-checkbox {
padding-left: 2rem;
}
#modal_qr_asistencia .modal-qr-start {
padding: 15px 0 5px 0;
margin: 0;
}
#modal_qr_asistencia .btn-qr-start {
background: linear-gradient(135deg, #28a745 0%, #218838 100%);
color: #ffffff !important;
padding: 12px 40px;
font-weight: 600;
font-size: 16px;
border: none;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.5;
gap: 8px;
}
/* Tarjeta QR */
#modal_qr_asistencia .modal-qr-card {
border: none;
border-radius: 8px;
}
#modal_qr_asistencia .modal-qr-card-title {
color: #3d5a80;
font-weight: 600;
}
#modal_qr_asistencia .modal-qr-card-title .fa {
color: #4a6fa5;
}
#modal_qr_asistencia .modal-qr-container {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
#modal_qr_asistencia #qr-image {
max-width: 280px;
border-radius: 8px;
}
#modal_qr_asistencia .modal-qr-progress {
height: 30px;
border-radius: 15px;
background: #e9ecef;
}
#modal_qr_asistencia .modal-qr-progress .progress-bar {
font-size: 14px;
font-weight: 600;
}
#modal_qr_asistencia .modal-qr-alert {
background: #ffffff;
border-radius: 8px;
border: 2px solid #e3f2fd;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
margin-bottom: 0;
}
#modal_qr_asistencia .modal-qr-alert-title {
color: #2c3862;
font-weight: 600;
border-bottom: 2px solid #e3f2fd;
padding-bottom: 8px;
text-align: left;
}
#modal_qr_asistencia .modal-qr-alert-list {
font-size: 14px;
line-height: 1.8;
color: #333;
text-align: left;
}
#modal_qr_asistencia .modal-qr-alert-list li {
margin-bottom: 6px;
}
#modal_qr_asistencia .modal-qr-alert-meta {
background: #f8f9fa;
padding: 12px;
border-radius: 6px;
border-left: 4px solid #4a90e2;
font-size: 13px;
color: #555;
}
#modal_qr_asistencia .modal-qr-alert-meta > div {
margin-bottom: 6px;
}
#modal_qr_asistencia .modal-qr-alert-meta > div:last-child {
margin-bottom: 0;
}
#modal_qr_asistencia .modal-qr-alert-meta .fa-shield {
color: #28a745;
}
#modal_qr_asistencia .modal-qr-alert-meta .fa-hourglass-half {
color: #ff9800;
}
/* Tarjeta asistencias */
#modal_qr_asistencia .modal-qr-attendance-card {
border: none;
border-radius: 8px;
height: 100%;
}
#modal_qr_asistencia .modal-qr-attendance-header {
background: linear-gradient(90deg, #28a745 0%, #218838 100%);
color: white;
border-radius: 8px 8px 0 0;
padding: 15px 20px;
}
#modal_qr_asistencia .modal-qr-attendance-header h5 {
font-weight: 600;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#modal_qr_asistencia .modal-qr-attendance-badge {
font-size: 16px;
padding: 6px 12px;
color: #28a745;
background: #fff;
}
#modal_qr_asistencia .modal-qr-list {
max-height: 470px;
overflow-y: auto;
}
#modal_qr_asistencia .modal-qr-empty .fa-users {
font-size: 60px;
opacity: 0.3;
margin-bottom: 20px;
}
/* Footer */
#modal_qr_asistencia .modal-qr-footer {
background: #fff;
border-top: 2px solid #e9ecef;
padding: 15px 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
#modal_qr_asistencia .modal-qr-footer-text {
flex: 1;
min-width: 200px;
}
#modal_qr_asistencia .modal-qr-footer .btn {
display: inline-block;
padding: 8px 20px;
font-size: 14px;
font-weight: 500;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
}
#modal_qr_asistencia .modal-qr-footer .btn.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
#modal_qr_asistencia .modal-qr-footer .btn.btn-default:hover {
background-color: #e6e6e6;
border-color: #adadad;
}
#modal_qr_asistencia .modal-qr-footer .btn.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #eea236;
}
#modal_qr_asistencia .modal-qr-footer .btn.btn-warning:hover {
background-color: #ec971f;
border-color: #d58512;
}
/* Responsive */
@media (max-width: 768px) {
#modal_qr_asistencia .modal-dialog {
margin: 10px;
max-width: calc(100vw - 20px);
}
#modal_qr_asistencia .modal-qr-header {
padding: 10px 15px;
}
#modal_qr_asistencia .modal-qr-header .modal-title {
font-size: 1rem;
margin-bottom: 0.25rem;
}
#modal_qr_asistencia .modal-qr-header-course {
font-size: 0.85rem;
}
#modal_qr_asistencia .modal-qr-body {
padding: 15px;
max-height: calc(100vh - 150px);
}
#modal_qr_asistencia .card-body {
padding: 15px;
}
#modal_qr_asistencia .card-header h5 {
font-size: 1rem;
}
#modal_qr_asistencia .form-group {
margin-bottom: 0.75rem;
}
#modal_qr_asistencia .form-group label {
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
#modal_qr_asistencia .form-control {
font-size: 0.9rem;
padding: 0.375rem 0.75rem;
}
#modal_qr_asistencia .form-text {
font-size: 0.75rem;
}
#modal_qr_asistencia .alert {
padding: 10px;
margin-bottom: 0.75rem;
}
#modal_qr_asistencia .modal-qr-alert-title {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
#modal_qr_asistencia .modal-qr-alert-list {
font-size: 0.75rem;
line-height: 1.4;
padding-left: 1rem;
}
#modal_qr_asistencia .modal-qr-alert-list li {
margin-bottom: 4px;
}
#modal_qr_asistencia .btn-lg {
padding: 10px 20px;
font-size: 0.9rem;
}
#modal_qr_asistencia .modal-qr-footer {
padding: 10px 15px;
}
#modal_qr_asistencia .modal-qr-footer small {
font-size: 0.75rem;
}
#modal_qr_asistencia #qr-container {
padding: 10px;
}
#modal_qr_asistencia #qr-image {
max-width: 200px;
}
#modal_qr_asistencia .mb-3 {
margin-bottom: 0.75rem;
}
#modal_qr_asistencia .p-4 {
padding: 1rem;
}
}
@media (max-width: 576px) {
#modal_qr_asistencia .modal-dialog {
margin: 5px;
max-width: calc(100vw - 10px);
}
#modal_qr_asistencia .modal-qr-header .modal-title {
font-size: 0.9rem;
}
#modal_qr_asistencia #qr-image {
max-width: 150px;
}
}
/* Asistencias - indicadores de cambios pendientes */
body.asistencias-page .asistencia-pendiente {
outline: 3px solid #f0ad4e;
outline-offset: -3px;
box-shadow: inset 0 0 0 2px rgba(240, 173, 78, 0.5);
}
body.asistencias-page .asistencia-selector-pendiente {
border-color: #f0ad4e !important;
background-color: #fff8e1 !important;
}
body.asistencias-page .checkbox-container input.asistencia-check-pendiente {
outline: 2px solid #f0ad4e;
outline-offset: 2px;
box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.3);
}
body.asistencias-page .sdweb-formato-fecha-faltaAsistencia {
cursor: pointer;
}
body.asistencias-page td.clase-container {
cursor: pointer;
}