/***********************************************/ /*** NUEVOS ESTILOS SIGNATURE4DOCUMENTS ***/ /***********************************************/ /********************************/ /* Me hge quedado por /** TABLAS **/ /*********************************************/ /* 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: #e9f0fe; /* 75% + claro */ --primario-highlight-light:#f6f9fe;/* primario-highlight 90% + 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; } } /* Botones */ .btn, .btn[class*="btn-"] { 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(--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; &.disabled { /* pointer-events: none; */ opacity: 0.5; } } :is(.btn:is(.btn-primary, .btn-info, .btn-default)):is(:hover, :active, :focus, [aria-expanded="true"]) { box-shadow: none; background-color: var(--primario-highlight)!important; border-color: var(--primario-dark)!important; color: var(--primario) !important; } :is(.btn-success:not(.modal-ayuda)):is(:hover, :active, :focus) { background-color: var(--success)!important; border-color: var(--success-dark)!important; color: var(--primario); } .btn-danger:is(:hover, :active, :focus) { background-color: var(--danger)!important; border-color: var(--danger-dark)!important; color: white!important; } .panel-footer .btn-group .btn + .float-left .btn { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn.dropdown-toggle { display: flex; justify-content: center; align-items: center; gap: 5px; & .caret { display: flex; justify-content: center; align-items: center; width: var(--body-fs); height: var(--body-fs); border: none; color: inherit; transition: var(--tr04); &:after { content: '\f107'; font-family: var(--icono-ff); font-size: inherit; font-weight: 900; color: inherit; } } &[aria-expanded="true"] { & .caret { &:after { content: '\f106'; } } } } /* 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; background-repeat: no-repeat; background-position: center; transition: var(--tr00); } &[href*="profile"] i.fa { background-image: url('../images/datos_usuario.svg'); } &[href*="usuarios/edit"] i.fa, &[href*="profile/edit"] i.fa { background-image: url('../images/datos_usuario.svg'); } &[href*="change-password"] i.fa { background-image: url('../images/change_pass.svg'); } &[href*="logout"] i.fa { 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"], input[type="tel"], 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; min-height: 35px; & 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); } } /* Botones interrogantes */ .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); } } } & .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; } } } } /* Modal de confirmación / borrado */ &[id*="modal_confirmacion"], &#confirm-delete { & 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-body { padding-block: var(--20-10); } & .modal-footer { padding-top: var(--20-10); margin-top: var(--20-10); } } /** MODAL AYUDA **/ &#modal_ayuda { .modal-dialog { .modal-content { .modal-body, > .panel-body { &.panel-body { padding-top: 0 !important; padding-inline: var(--padding) !important; } } } } } } /** LAYOUTS **/ .row { margin-inline: 0; } /** HEADER **/ #wrapper nav.navbar.navbar-default { --gap: var(--40-20); 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; padding: .75rem; & .navbar-brand { width: 100%; height: 100%; margin: 5% 0 5% 5%; padding: 0; float: none; background-image: url(../images/logo_S4D.png); background-size: contain; 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: var(--10-5); width: fit-content; height: calc(var(--body-fs)* 1.2); margin: 0; padding: 0; line-height: 1; font-weight: 500; border: none!important; border-radius: 0!important; background: none!important; color: var(--primario); overflow: hidden; transition: var(--tr04); &:is(:hover, :active, :focus, [aria-expanded="true"]) { color: var(--primario-accent)!important; background-color: initial!important; } &:before { content:''; display: block; height: calc(var(--body-fs) * 1.33); width: auto; aspect-ratio: 1 / 1; background-size: contain; background-repeat: no-repeat; background-position: center; transition: var(--tr04); } } & > #collapse-menu.btn-info { &:before { background-image: url(../images/minimizar_prim.svg); } &:hover:before, &:focus:before, &[aria-expanded="true"]:before { background-image: url(../images/minimizar_accent.svg); } } & > #collapse-rightnav.btn-info { &:before { background-image: url(../images/maximizar_prim.svg); } &:hover:before, &:focus:before, &[aria-expanded="true"]:before { background-image: url(../images/maximizar_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(--h6-fs); width: var(--size); height: var(--size); font-size: 0; color: inherit; margin: 0; background-size: cover; transition: var(--tr00); #home & { background-image: url('../images/home_blanco.svg'); a:hover & { background-image: url('../images/home_prim.svg'); } .active &, .current & { background-image: url('../images/home_accent.svg'); } } #buzonFirmaMenu & { background-image: url('../images/buzon_firmas_blanco.svg'); a:hover & { background-image: url('../images/buzon_firmas_prim.svg'); } .active &, .current & { background-image: url('../images/buzon_firmas_accent.svg'); } } #pantallas_usuarios & { background-image: url('../images/gestion_administradores_blanco.svg'); a:hover & { background-image: url('../images/gestion_administradores_prim.svg'); } .active &, .current & { background-image: url('../images/gestion_administradores_accent.svg'); } } #pantallas_firmas & { background-image: url('../images/gestion_firmas_blanco.svg'); a:hover & { background-image: url('../images/gestion_firmas_prim.svg'); } .active &, .current & { background-image: url('../images/gestion_firmas_accent.svg'); } } #admin_maestros & { background-image: url('../images/gestion_datos_maestros_blanco.svg'); a:hover & { background-image: url('../images/gestion_datos_maestros_prim.svg'); } .active &, .current & { background-image: url('../images/gestion_datos_maestros_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; } } } &.current { background-color: #fff; & > a { background-color: white; color: var(--primario-accent) !important; } } } } .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; } /* Selector tipo + texto (Empieza por / Igual a / Contiene + input) */ & .filter-pattern-selector { display: flex; flex-direction: column; gap: 4px; } /* Datetime filter (5 selects día/mes/año/hora/minuto) */ & .form-inline { display: flex; flex-wrap: wrap; gap: 4px; & select.form-control { flex: 1 1 auto; min-width: 60px; width: auto; } } /*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.btn { 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: center; 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: 500; gap: 5px; min-width: 85px; min-height: 34px; border: 1px solid transparent; &.btn-default { background-color: #fff; color: var(--primario); border-color: var(--primario-lighter); } &.btn-success { background-color: var(--primario); color: #fff !important; border-color: var(--primario-dark); box-shadow: rgba(44, 56, 98, 0.35) 0 2px 4px, rgba(44, 56, 98, 0.25) 0 7px 13px -3px, rgba(16, 24, 46, 0.4) 0 -3px 0 inset; &:hover, &:focus { color: #fff !important; } } &: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); } &[disabled], &.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } } } } /** 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); &.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; &::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); 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; 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; } & .flip-card-front { opacity:1; transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; &::after { content: 'Alt+' attr(data-shortcut-display); 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%; 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; &::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; } &: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); } } & .home-card-icon { position: relative; z-index: 2; display: block; width: 64px; height: 64px; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 6px 15px rgba(22, 28, 49, 0.4)); animation: float 3s ease-in-out infinite; &.home-card-icon-buzon { background-image: url('../images/buzon_firmas_blanco.svg'); } &.home-card-icon-usuarios { background-image: url('../images/gestion_administradores_blanco.svg'); } &.home-card-icon-firmas { background-image: url('../images/gestion_firmas_blanco.svg'); } &.home-card-icon-maestros { background-image: url('../images/gestion_datos_maestros_blanco.svg'); } &.home-card-icon-default { background-image: url('../images/home_blanco.svg'); } } } & .title { height: 55%; padding: 30px 20px; 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); } } } & .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); 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); &::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; } &::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); 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); & .flip-card-front { opacity:0; transition: all var(--transition-time) cubic-bezier(0.34, 1.56, 0.64, 1); &::after { transform: scale(1.15); } & .icono::before { opacity: 1; } } & .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); } } } } } } @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; } } } /* Formulario Crear clases en calendario */ & > .form-group { padding-top: var(--40-20); margin-bottom: 0; & button { width: fit-content; min-height: unset; } } /* 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: 700; background-color: var(--primario-extra-light); border-bottom-color: var(--primario-highlight); 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; background-repeat: no-repeat; background-position: center; } .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; background-repeat: no-repeat; background-position: center; } .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; background-repeat: no-repeat; background-position: center; } &: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; } } /* 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: #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; 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); background-size: 90%; background-repeat: no-repeat; background-position: center; &:hover, &:focus { color: var(--primario-accent); text-decoration: none; opacity: 0.8; } /* 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; } & + .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; } } } } } /* 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; & > 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; transition: box-shadow .15s, transform .15s, background-color .15s, color .15s; &: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); text-decoration: none; } &: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; 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'); } &.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'); } & + .hidden-xs.btn.btn-info.dropdown-toggle { border-radius: var(--form-radius); } } & > a:not(.glyphicon) { border-top-left-radius: var(--form-radius); border-bottom-left-radius: var(--form-radius); & ~ a:not(.glyphicon) { border-radius: 0; } } & > :last-child { border-top-right-radius: var(--form-radius); border-bottom-right-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); } /** TABLAS **/ & .table-responsive { margin: 0; border: none; & > h3 { color: var(--primario); font-weight: 500; margin-block: var(--15-10); font-size: var(--h6-fs); } > a { 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(--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; text-decoration: none!important; &:hover, &:focus { box-shadow: none; background-color: var(--primario-highlight)!important; border-color: var(--primario-dark)!important; color: var(--primario) !important; } } &: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 { 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; } /* Iconos de acción en filas */ &.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; } } } & 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); & ~ 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; & input[type="checkbox"] { margin-inline: auto; } & 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; } } &: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; & 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); } } } } } & ~ .table-responsive, & table ~ table { margin-block: var(--20-10); } & + .panel-footer { margin-top: var(--40-30); } } /* desglose totales*/ & #desgloseTotales { margin: var(--40-30) 0 0 0; border-collapse: separate; border: none; /*Sumatorios*/ #sumatorios { width: auto; border-collapse: separate; tr { td { font-weight: 500; padding: var(--10-5) var(--30-20); text-align: center; border: 1px solid var(--primario-light); border-bottom: none; &:first-of-type { background-color: var(--primario-extra-light); border-right: none; } } &:first-of-type { td { &:first-of-type { border-top-left-radius: var(--container-radius); } &:last-of-type { border-top-right-radius: var(--container-radius); } } } &:last-of-type { td { font-size: var(--h6-fs); font-weight: 600; border-bottom: 1px solid var(--primario-light); &:first-of-type { border-bottom-left-radius: var(--container-radius); } &:last-of-type { border-bottom-right-radius: var(--container-radius); } } } } } } /***********************************/ /* Formulario Editar DATOS GENERAL */ /***********************************/ & form { /* 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 { --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; /* form group width: 100% */ &[class*="12"] { flex: 1 1 100%; } & .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; 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)); } } } } /* 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; &.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; } } } } /* Selects */ & select { width: 100%; min-width: max-content; min-height: 34px; 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 Editar menos documento firma */ /***********************************/ & form > div[id]:not(#DocumentoFirma) { --gap: var(--15-10); display: flex; flex-wrap: wrap; gap: var(--gap); 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); & > :is(.form-group, .form-field-input) { flex: 1 1 calc(33.33% - var(--gap)); display: flex; flex-direction: column; width: fit-content; min-width: var(--form-item-min-width); max-width: 100%; margin: 0; padding: 0; &[class*="12"] { flex: 1 1 100%; } } /* Botones (form-group sin form-field-input) — encogen al contenido */ & > .form-group:not(.form-field-input) { flex: 0 0 fit-content; min-width: 0; align-self: flex-end; height: fit-content; } /* CREAR DOCUMENTO FIRMA */ &#DocumentoFirma { > .form-group { flex: 1 1 100%; } button { margin-top: auto; } } /* 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 { --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; /* form group width: 100% */ &[class*="12"] { flex: 1 1 100%; } & .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; 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)); } } } } /*************************/ /* CREAR DOCUMENTO FIRMA */ /*************************/ & form > #DocumentoFirma { --gap: var(--15-10); display: flex; gap: var(--gap); flex-wrap: wrap; > .form-group { display: flex; flex-wrap: wrap; gap: var(--gap); float: none; width: calc(100% - 4px); margin-inline: 2px; padding: var(--20-10); border: none; border-radius: 0; box-shadow: var(--shadow-form-group); > div[id] { display: flex; gap: var(--gap); flex-wrap: wrap; padding: 0; > .form-group { padding: 0; flex: 1 1 calc(50% - var(--gap)); } } & #DocumentoFirma_usuariosFirmantes { flex-wrap: wrap; .form-group { flex: 1 1 100%; &:last-child { label { margin-top: var(--10-5); font-size: calc(var(--body-fs) + 2px); } } } } &:nth-last-of-type(-n+2) { flex: 1 1 auto; min-width: unset; max-width: fit-content; margin-top: var(--20-10); margin-inline: 0; padding: 0; box-shadow: none; } /** Usuarios externos **/ #DocumentoFirma_usuariosFirmantes_usuariosExternos { --gap: var(--15-10); display: flex; gap: var(--gap); flex-wrap: wrap; > div:not([class]) { display: flex; gap: 10px; align-items: center; height: 35px; width: 100%; margin-top: 10px; > * { margin: 0!important; } } .usuario-externo-entry { flex: 0 1 calc(50% - var(--gap)); display: flex; flex-wrap: wrap; gap: 10px; padding: var(--20-10); border-radius: var(--form-radius); border: 1px solid var(--primario); align-items: center; > label { margin: 0!important; } [id*="DocumentoFirma_usuariosFirmantes_usuariosExternos_"] { flex: 1 1 100%; --gap: var(--15-10); display: flex; flex-wrap: wrap; gap: var(--gap); > * { flex: 1 1 calc(50% - var(--gap)); } } } } } } /*** EDITAR ESTADO EJERCICIO **/ & form > #ehabilisgestiondelaformacionbundle_ejercicioestado { > .form-group { flex: 1 1 calc(50% - var(--gap))!important; &:nth-last-of-type(-n+2) { flex: 1 1 fit-content !important; min-width: unset !important; max-width: fit-content !important; margin-top: var(--20-10) !important; margin-inline: 0; box-shadow: none; } } } /* 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; &.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; } } } } /* Selects */ & select { width: 100%; 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); } } } } /********************************/ /** 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%; & > 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; 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; justify-content: center; width: calc(100% + 10px); height: 100%; background-color: var(--primario-highlight-light); padding-inline: calc(var(--10-5) + 10px) var(--10-5); padding-block: var(--10-5); margin-left: -10px; line-height: 1; color: var(--primario); text-align: center; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; 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 { background-color: var(--primario-highlight) !important; color: var(--primario-dark) !important; text-decoration: none; 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; } .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); } } /* 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); } } } } } } /* 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 { 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 { padding: var(--20-10); background-color: var(--primario-extra-light); border: none; color: var(--primario); & #deleteForm { box-shadow: none!important; padding: 0!important; margin: 0!important; } /* Fila de arriba */ & #total-registros { & .total-count { padding: 0; margin-bottom: var(--20-10); font-size: var(--small-fs); font-style: italic; } } /* 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; } } } } } } } } } } /*****************************/ /*** 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; } } } } /***********************/ /*** PÁGINA DE LOGIN ***/ /***********************/ body#login-page { --color: #3d4d88; min-height: 100vh!important; background-image: url(../images/fondo_login.jpg)!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%; position: relative; /* Logo*/ &:first-of-type { justify-content: center; width:100%; & .logo-login { max-width: 100%; } } /* Contraseña */ /* Ojito */ & .glyphicon.toggle-password { position: absolute; right: var(--10-5); top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } /* 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))[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; } } } } } } } } /** 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 { display: block; width: 0; height: 0; border-top: 6px solid var(--primario); border-right: 6px solid transparent; border-left: 6px solid transparent; /* Anula el chevron FontAwesome heredado de .btn.dropdown-toggle */ &:before, &:after { content: none !important; display: none !important; } } &: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); } } } /***************************************************/ /*** 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; } } /*** PANTALLA PARA FIRMAR DOCUMENTO ***/ body#firma_documento { #wrapper #page-wrapper { margin-left: 0; padding: 0!important; /*ENCABEZADO*/ .header { height: var(--header-height); #infoTrigger{ display: flex; align-items: center; gap: 5px; font-size: var(--body-fs); font-weight: 500; cursor: pointer; transition: var(--tr02); &:before { content: ''; --size: calc(var(--body-fs) * 1.618); width: var(--size); height: var(--size); display: block; background-image: url(../images/de-confianza.png); background-size: contain; background-repeat: no-repeat; background-position: center; transition: var(--tr02); } &:hover { color: var(--primario-accent); &:before { filter: invert(63%) sepia(55%) saturate(556%) hue-rotate(149deg) brightness(85%) contrast(96%); } } } } /*CUERPO*/ .iframe-container{ height: calc(100vh - var(--header-height) * 2); iframe { height: 100%!important; } } /*PIE*/ .footer { height: var(--header-height); /*Botón firmar*/ .firmar-elemento { margin-right: auto; margin-left: var(--60-30); border-radius: 100vmax; padding-inline: var(--20-10); height: 100%; border: none !important; color: var(--success-dark)!important; background-color: var(--success-light) !important; transition: var(--tr02); position:relative; overflow: hidden; &:before { content: ''; position: absolute; height: 400%; width: 100px; display: block; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255, 0.3) 45%, rgba(255,255,255, 0.3) 55%, rgba(255,255,255, 0) 100%); top: 0; bottom: 0; margin-block: auto; left: -33%; transform: rotate(32deg); transition: all 0s linear; z-index: 1; } &:hover { background-color: var(--success) !important; color: #fff!important; &:before { transition: var(--tr02); top: 100%; left: 200% } } } } } /** MODALES **/ .modal.in { & .modal-dialog { & .modal-content { & .modal-header { background: none; .modal-title { padding: 0!important; margin: 0; } .close { &:hover { opacity: 1; box-shadow: var(--shadow-dropdown-before); background-color: #fff!important; color: var(--danger)!important; } } } & .modal-footer { border: none; padding-bottom: 0; button { float: none; width: 100%; border: none; padding-block: var(--20-10); margin: 0 !important; background-color: var(--primario-accent); color: #fff!important; font-weight: 600; } } } } } }