@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
@import url('rst.css');
@import url('menu.css');

:root {
	--white: #fff;
	--black: #000;
	--black-05: #f3f3f3;
	--black-10: #e6e6e6;
	--black-50: #808080;
	--primary: #369;
	--trans-black-90: rgba(0, 0, 0, 0.9);
	--header-height: 62px;
}

body {font-family: "Poppins", sans-serif; font-size: 1em; font-weight: 400; background-color: var(--black-10); color: var(--black);}
h1, h2, h3, h4, h5, h6, strong {font-weight: 800;}
a, i {text-decoration: none; line-height: 1;}
html {scroll-behavior: smooth;}
a, button, section, #responsive-bg, #responsive-nav, #notification, .modal, .modal-content, .lightbox, .lightbox-content {-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}

.wrap {position: relative; width: 100%; min-height: 100vh; overflow: hidden;}

.cont-25 {width: 25%; margin: 0 auto; position: relative;}
.cont-32 {width: 32%; margin: 0 auto; position: relative;}
.cont-50 {width: 50%; margin: 0 auto; position: relative;}
.cont-60 {width: 60%; margin: 0 auto; position: relative;}
.cont-80 {width: 80%; margin: 0 auto; position: relative;}
.cont-90 {width: 90%; margin: 0 auto; position: relative;}
.cont-100 {width: 100%; margin: 0 auto; position: relative;}

.fl-c-sb {display: flex; align-items: center; justify-content: space-between;}

.user-titulo {background-color: var(--white); padding: 2em; border-radius: 12px; text-transform: uppercase; margin-bottom: 18px;}

header {position: fixed; width: 100%; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; background-color: var(--black); z-index: 999}
.logo, .menus, .second-nav, .second-nav a, .login-menu, .nav-container, .nav-container nav, .menu, .menu ul li, .menu ul li a {height: var(--header-height);}

.logo {background-color: var(--primary); padding: 0 5%; display: flex; align-items: center;}
.logo img {max-height: 60%;}

.menus {display: flex; justify-content: space-between; width: 100%;}

.second-nav {display: flex; justify-content: flex-end;}
.second-nav a {display: flex; align-items: center; justify-content: center; width: var(--header-height); color: var(--white);}
.second-nav a:hover {background-color: var(--primary);}
.second-nav .second-active {color: var(--black-50);}

.login-menu {margin-right: 5%;}
.login-menu a {font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.1em}

.login {background-color: var(--white); border-radius: 10px; width: 94%; max-width: 540px; margin: 96px auto 32px auto;}
.login h1 {display: block !important; text-align: center; margin: 0 auto !important; padding: 24px 12px; font-size: 1.8em; letter-spacing: 0.09em;}
.login a {display: block; text-align: center; text-transform: uppercase; margin: 42px 12px 24px 12px; color: var(--white); font-size: 0.9em; letter-spacing: 0.09em;}
.login a:hover {color: var(--blue);}

.form-log input {width: 100%; border: 1px solid var(--primary); color: var(--black) !important; padding: 12px; background-color: transparent; border-radius: 8px; font-size: 1em; margin-bottom: 18px;}
.form-log label {color: var(--primary) !important;}

.form-log {position: relative; padding: 0 18px 24px 18px;}
.form-log button {display: block; margin: 0 auto; font-size: 0.9em; padding: 1em 1.5em; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;}
.form-log button {border: 1px solid var(--primary); background-color: var(--primary); color: var(--white);}
.form-log button:hover {background-color: transparent; color: var(--blue);}
.form-log input:focus {outline: none; background-color: var(--black-10);}
.item-group {position: relative; padding-bottom: 16px; border-bottom: 1px dotted var(--white); margin-bottom: 62px;}
.item-group label i {font-size: 18px; margin-left: 8px; margin-bottom: 8px; display: inline-block;}

#notification {color: var(--white); font-size: 0.9em; padding: 1.4em; text-transform: uppercase; line-height: 180%; position: absolute; right: 24px; width: 80%; max-width: 290px;}
#close-notification {display: block; position: absolute; top: 0; right: 0; font-size: 12px; padding: 8px; color: var(--white); cursor: pointer;}

.notification-hidden {bottom: -50%;}
.notification-visible {bottom: 24px;}

main {width: 100%; max-width: 1366px; margin: 82px auto 24px auto; padding: 24px;}

form {display: block; width: 100%; padding: 26px 12px; text-align: center; position: relative;}
form input, form select {width: 100%; background-color: transparent; border: 1px solid #369; border-radius: 10px; font-size: 1em; padding: 0.7em; margin-bottom: 14px;}
input:focus {outline: none; background-color: #fff;}

form button {background-color: #369; color: #fff; border: 2px solid #369; font-size: 0.85em; padding: 1em 2em; margin: 0 auto; border-radius: 24px; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer;}
form button:hover {background-color: #fff; color: #369;}
form p {display: block; text-align: left; margin: 12px; text-transform: uppercase;}
form label {display: block; text-align: left; font-size: 0.8em; text-transform: uppercase; color: #369; padding-left: 12px;}
form .fila {display: flex; align-items: center; justify-content: space-between; width: 100%;}
form input[type=file] {
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #555;
}
form input[type=file]::file-selector-button {
  margin-right: 20px;
  border: none;
  background: #369;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

form input[type=file]::file-selector-button:hover {
  background: #0d45a5;
}

form .w32 {width: 32%;}
form .w49 {width: 49%;}
form .w100 {width: 100%;}
form .uploading {position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); color: #fff;}
form .uploading p {color: #fff;}

.icon-bg {background-color: var(--white); padding: 16px 22px; border-radius: 18px; color: #000; display: flex; align-items: center; justify-content: space-between; border: 1px solid #fff; margin-top: 16px;}
.icon-bg:hover {background-color: transparent;}
.icon-bg img {max-width: 180px;}
.icon-bg h4 {font-weight: 700; font-size: 1.2em; text-transform: uppercase; line-height: 100%;}
.icon-bg p {font-size: 0.85em; text-transform: uppercase;}
.icon-bg h3 {text-transform: uppercase;}

.icon-bg .icon-right {width: 35%; text-align: right; display: inline-flex; justify-content: flex-end;}
.icon-bg .title-left {width: 65%; text-align: left;}
.mar-btm-24 {margin-bottom: 24px;}

.icon-bg .icon-right button {border: none; color: #fff; margin-left: 8px; padding: 8px 10px; cursor: pointer; border-radius: 8px;}
.icon-bg .icon-right button span {font-size: 0.9em; text-transform: uppercase;}
.icon-bg .icon-right button i {font-size: 1.2em; margin-left: 3px;}
.icon-bg .icon-right .edit {background-color: #369;}
.icon-bg .icon-right .delete {background-color: #f00;}

.row-space-btwn {display: flex; align-items: center; justify-content: space-between;}

.files-card {background-color: var(--white); padding: 16px 22px; margin-bottom: 20px; border-radius: 12px; color: #000; border: 1px solid #e6e6e6;}
.files-card:hover {background-color: var(--black-05);}
.files-card a {display: block; font-size: 1.2em; padding: 1em; font-weight: 800; line-height: 150%; color: #000;}
.files-card button {border: none; color: #fff; margin-left: 8px; padding: 8px 10px; cursor: pointer; border-radius: 8px;}
.files-card button:hover {opacity: 0.6;}
.files-card button i {font-size: 1.2em;}
.files-card .edit {background-color: #369;}
.files-card .delete {background-color: #f00;}
.files-card .details {padding-top: 12px; border-top: 1px solid #000; display: flex; align-items: center; justify-content: space-between;}
.files-card .details p {display: inline-block; padding: 0.4em; font-size: 1em; margin: 0 3px; line-height: 150%;}
.files-card .details p span {font-weight: 800;}
.files-card .details p .edit-item {cursor: pointer;}

.abre-archivo:hover {text-decoration: underline;}

.second-button {display: block; padding: 0.6em; background-color: var(--black-50); color: #fff; font-size: 0.73em; text-transform: uppercase; border-radius: 6px; margin-left: 8px; cursor: pointer; text-align: center;}
.second-button:hover {background-color: #369;}

.tarjeta {background-color: #e6e6e6; border-radius: 8px; padding: 1em}
.tarjeta h3, .tarjeta p {text-transform: uppercase;}
.tarjeta p {font-size: 0.9em;}

.titulo-seccion {font-size: 2em; margin: 20px 0; text-align: center; line-height: 150%;}

.btn-control {display: inline-block; padding: 0.8em 1.2em; background-color: #369; border: 2px solid #369; border-radius: 28px; color: #fff; text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.1em;}
.btn-control:hover {background-color: #fff; color: #369;}

.name-user {font-size: 0.96em; text-transform: uppercase; text-align: right;}

#toTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 99;
  font-size: 20px;
  border: none;
  outline: none;
  background-color: #369;
  color: #fff;
  cursor: pointer;
  padding: 0 10px;
  border-radius: 50%;
}
#toTop:hover {
  opacity: 0.7;
}

.modal-content .body .edit-form-user{
    display: flex; justify-content: space-between; padding: 12px 12px
}
.modal-content .body .edit-form-user input{
    padding: 0.9em; margin-bottom: 6px;
}

.modal-content .body .edit-form-user button{
    font-size: 10px; padding: 0 6px; border-radius: 8px; margin-left: 4px;
}

footer {padding: 32px; text-align: center; color: var(--black-50);}

@media screen and (max-width: 1024px) {
  .cont-60 {width: 100%;}
}

@media screen and (max-width: 998px) {
  .logo {padding: 0 3%;}
  .logo img {max-height: 50%;}
  .cont-90 {width: 100%;}
}