/*==================== GENERALES ====================*/

html {
  box-sizing: border-box;
  background-color: #282828;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

:root {
  /* ===== Colors ===== */
  --body-color: #e4e9f7 !important;
  --sidebar-color: #fff !important;
  --primary-color: #049ce4 !important;
  --primary-color-light: #f6f5ff !important;
  --toggle-color: #0a6285 !important;
  --text-color: #000 !important;
  --color-negro: #000 !important;
  --color-blanco: #fff !important;

  /* ====== Transition ====== */
  --tran-03: all 0.2s ease !important;
  --tran-03: all 0.3s ease !important;
  --tran-04: all 0.3s ease !important;
  --tran-05: all 0.3s ease !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  min-height: 100vh !important;
  background-color: var(--body-color) !important;
  transition: var(--tran-05) !important;
}

::selection {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

body.dark {
  --body-color: #18191a !important;
  --sidebar-color: #242526 !important;
  --primary-color: #3a3b3c !important;
  --primary-color-light: #3a3b3c !important;
  --toggle-color: #fff !important;
  --text-color: #ccc !important;
}

/*==================== MENÚ ====================*/

.sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 250px !important;
  padding: 10px 14px !important;
  background: var(--sidebar-color) !important;
  transition: var(--tran-05) !important;
  z-index: 100 !important;
}
.sidebar.close {
  width: 88px !important;
}

/* ===== Reusable code - Here ===== */
.sidebar li {
  height: 50px !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  margin-top: 10px !important;
}

.sidebar header .image,
.sidebar .icon {
  min-width: 60px !important;
  border-radius: 6px !important;
}

.sidebar .icon {
  min-width: 60px !important;
  border-radius: 6px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.sidebar .text,
.sidebar .icon {
  color: var(--text-color) !important;
  transition: var(--tran-03) !important;
}

.sidebar .text {
  font-size: 17px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}
.sidebar.close .text {
  opacity: 0 !important;
}
/* =========================== */

.sidebar header {
  position: relative !important;
}

.sidebar header .image-text {
  display: flex !important;
  align-items: center !important;
}
.sidebar header .logo-text {
  display: flex !important;
  flex-direction: column !important;
}
header .image-text .name {
  margin-top: 2px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

header .image-text .profession {
  font-size: 16px !important;
  margin-top: -2px !important;
  overflow: hidden !important;
}

.sidebar header .image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sidebar header .image img {
  width: 90px !important;
  border-radius: 6px !important;
}

.sidebar header .toggle {
  position: absolute !important;
  top: 50% !important;
  right: -25px !important;
  transform: translateY(-50%) rotate(180deg) !important;
  height: 25px !important;
  width: 25px !important;
  background-color: var(--primary-color) !important;
  color: var(--sidebar-color) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  cursor: pointer !important;
  transition: var(--tran-05) !important;
}

body.dark .sidebar header .toggle {
  color: var(--text-color) !important;
}

.sidebar.close .toggle {
  transform: translateY(-50%) rotate(0deg) !important;
}

.sidebar .menu {
  margin-top: 40px !important;
}

.sidebar li.search-box {
  border-radius: 6px !important;
  background-color: var(--primary-color-light) !important;
  color: var(--color-blanco) !important;
  cursor: pointer !important;
  transition: var(--tran-05) !important;
}

.sidebar li.search-box input {
  height: 100% !important;
  width: 100% !important;
  outline: none !important;
  border: none !important;
  background-color: var(--primary-color-light) !important;
  color: var(--text-color) !important;
  border-radius: 6px !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  transition: var(--tran-05) !important;
}
.sidebar li a {
  list-style: none !important;
  height: 100% !important;
  background-color: transparent !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: var(--tran-03) !important;
}

.sidebar li a:hover {
  background-color: var(--primary-color) !important;
  color: var(--color-blanco) !important;
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text {
  color: #161616 !important;
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
  color: var(--text-color) !important;
}

.sidebar .menu-bar {
  height: calc(100% - 55px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow-y: scroll !important;
}
.menu-bar::-webkit-scrollbar {
  display: none !important;
}
.sidebar .menu-bar .mode {
  border-radius: 6px !important;
  background-color: var(--primary-color-light) !important;
  position: relative !important;
  transition: var(--tran-05) !important;
}

.menu-bar .mode .sun-moon {
  height: 50px !important;
  width: 60px !important;
}

.mode .sun-moon i {
  position: absolute !important;
}
.mode .sun-moon i.sun {
  opacity: 0 !important;
}
body.dark .mode .sun-moon i.sun {
  opacity: 1 !important;
}
body.dark .mode .sun-moon i.moon {
  opacity: 0 !important;
}

.menu-bar .bottom-content .toggle-switch {
  position: absolute !important;
  right: 0 !important;
  height: 100% !important;
  min-width: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
.toggle-switch .switch {
  position: relative !important;
  height: 22px !important;
  width: 40px !important;
  border-radius: 25px !important;
  background-color: var(--toggle-color) !important;
  transition: var(--tran-05) !important;
}

.switch::before {
  content: "" !important;
  position: absolute !important;
  height: 15px !important;
  width: 15px !important;
  border-radius: 50% !important;
  top: 50% !important;
  left: 5px !important;
  transform: translateY(-50%) !important;
  background-color: var(--sidebar-color) !important;
  transition: var(--tran-04) !important;
}

body.dark .switch::before {
  left: 20px !important;
}

.home {
  position: absolute !important;
  top: 0 !important;
  top: 0 !important;
  left: 250px !important;
  height: 100vh !important;
  width: calc(100% - 250px) !important;
  background-color: var(--body-color) !important;
  transition: var(--tran-05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.home .text {
  font-size: 30px !important;
  font-weight: 500 !important;
  color: var(--text-color) !important;
  padding: 12px 60px !important;
}

.sidebar.close ~ .home {
  left: 78px !important;
  height: 100vh !important;
  width: calc(100% - 78px) !important;
}

body.dark .home .text {
  color: var(--text-color) !important;
}

.nav-link img {
  margin: 15px !important;
}

ul {
  padding-left: 0 !important;
}

/*==================== CONTENEDOR ANIMADO ====================*/

.contenedor {
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: rgb(250, 250, 250);
  padding: 3vh 30px 30px 30px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 95%;
  margin-right: auto;
  max-width: 100% !important;
  max-height: 95%;

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: -webkit-transform 300ms, box-shadow 300ms;
  -moz-transition: -moz-transform 300ms, box-shadow 300ms;
  transition: transform 300ms, box-shadow 300ms;
  box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);

  scroll-snap-type: y mandatory;
  scroll-behavior: smooth !important;
}

.contenedor::-webkit-scrollbar {
  width: 1px;
}
.contenedor::before,
.contenedor::after {
  content: "";
  position: absolute;
  width: 1300px;
  height: 1300px;
  border-top-left-radius: 50%;
  border-top-right-radius: 55%;
  border-bottom-left-radius: 45%;
  border-bottom-right-radius: 50%;
  z-index: -1;
  clip: rect(0px, 1300px, 1300px, 0px);
}
.contenedor::before {
  left: 60%;
  bottom: 10%;
  background-color: rgba(4, 75, 203, 0.15);
  -webkit-animation: wawes 6s infinite linear;
  -moz-animation: wawes 6s infinite linear;
  animation: wawes 6s infinite linear;
}
.contenedor::after {
  left: 55%;
  bottom: 15%;
  background-color: rgba(4, 156, 228, 0.2);
  -webkit-animation: wawes 7s infinite;
  -moz-animation: wawes 7s infinite;
  animation: wawes 7s infinite;
}

@-webkit-keyframes wawes {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes wawes {
  from {
    -moz-transform: rotate(0);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@keyframes wawes {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*==================== TABLAS ====================*/

table {
  width: 100% !important;
  max-width: 100% !important;
  background-color: transparent !important;
  font-weight: 500 !important;
}

table::selection {
  background-color: var(--primary-color);
}

tr:hover {
  background-color: var(--primary-color);
  color: #fff;
  transition: background-color 0.3s ease;
  transition: color 0.3s ease;
}

.tabla {
  justify-content: center;
  text-align: center;
  align-items: center;
  align-content: center;
}

.tabla th {
  background-color: var(--color-negro);
  color: #fff;
  font-weight: bold;
  border: 2px solid var(--color-negro);
}

.tabla td {
  border: 1px solid var(--color-negro);
  justify-content: center;
  text-align: center;
  align-items: center;
  align-content: center;
}

.tabla button {
  background-color: #b94224;
  color: #fff;
  font-weight: bold;
}

.contenedor-tabla {
  overflow-x: auto;
  max-width: 100%;
  overflow-y: auto;
  max-height: 700px;
  -webkit-overflow-scrolling: touch;
}
.tabla-contenedor {
  overflow-x: auto;
  max-width: 100%;
  overflow-y: auto;
  max-height: 700px;
  -webkit-overflow-scrolling: touch;
}

/*==================== PAGINACIÓN ====================*/

.page-info {
  font-size: large;
  margin: auto 10px;
}
.page-item {
  font-size: large;
  font-weight: bolder;
  margin: auto 5px;
}

.page-link {
  color: #fff !important;
  background-color: var(--color-negro);
  border: solid 1px !important;
  border-color: var(--color-negro);
  transition: background-color 0.5s ease !important;
  transition: color 0.5s ease !important;
}

.page-link:hover {
  color: var(--color-blanco) !important;
  background-color: var(--primary-color);
  border: solid 1px !important;
  border: var(--color-negro) !important;
}

/*==================== FORMULARIOS ====================*/

/*==================== CASOS ====================*/
.scroll-y {
  overflow-y: scroll;
}



  /* smartphones */
@media only screen and (max-width: 480px) {
  .orden-formulario-casos {
    display: flex;
    flex-direction: column;
  }
}
  /* smartphone landscape */
@media only screen and (min-width: 481px) and (max-width: 850px) {
  .orden-formulario-casos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
  /* tablet */
@media only screen and (min-width: 851px) and (max-width: 992px) {
  .orden-formulario-casos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
  /* tablet landscape */
@media only screen and (min-width: 993px) and (max-width: 1200px) {
  .orden-formulario-casos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
  /* desktop, laptop */
@media only screen and (min-width: 1201px) {
  .orden-formulario-casos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}


.elemento {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.elemento-especial {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  text-align: center;
  gap: 15px;
  width: 90%;
  font-weight: bold;
  color: #000;
}

.elemento label {
  width: 90%;
  font-weight: bold;
  color: #000;
  margin-bottom: 2px;
}

.elemento input,
select {
  width: 95%;
}

.elemento input,
select {
  height: 100%;
}

.amplio-1 {
  grid-column: 1/3;
}
.amplio-2 {
  grid-column: 3/5;
}
.amplio-3 {
  grid-column: 1/5;
}

.amplio-3 textarea {
  width: 98% !important;
}

.elemento textarea {
  width: 95%;
}

  /* smartphones */
  @media only screen and (max-width: 480px) {
    .amplio-1 {
      grid-column: 1/2;
    }
    .amplio-2 {
      grid-column: 1/2;
    }
    .amplio-3 {
      grid-column: 1/2;
  }
}
    /* smartphone landscape */
  @media only screen and (min-width: 480px) and (max-width: 850px) {
    .amplio-1 {
      grid-column: 1/3;
    }
    .amplio-2 {
      grid-column: 1/3;
    }
    .amplio-3 {
      grid-column: 1/3;
  }
  }
    /* tablet */
  @media only screen and (min-width: 851px) and (max-width: 992px) {
    .amplio-1 {
      grid-column: 1/2;
    }
    .amplio-2 {
      grid-column: 2/4;
    }
    .amplio-3 {
      grid-column: 1/4;
  }
  }
  
    /* tablet landscape */
  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    .amplio-1 {
      grid-column: 1/3;
    }
    .amplio-2 {
      grid-column: 3/5;
    }
    .amplio-3 {
      grid-column: 1/5;
  }
  }
    /* desktop, laptop */
  @media only screen and (min-width: 1200px) {
    .amplio-1 {
      grid-column: 1/3;
    }
    .amplio-2 {
      grid-column: 3/5;
    }
    .amplio-3 {
      grid-column: 1/5;
  }
  }


.formulario-caso-nuevo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.formulario-caso-nuevo input,
select,
label {
  width: 90%;
}
.formulario-unico {
  display: flex;
  flex-direction: column;
}

/*==================== SECCIONES ====================*/
/* smartphones */
@media only screen and (max-width: 480px) {
  .formulario-fecha-caso {
    display: flex;
    flex-direction: column;
  }
}
  /* smartphone landscape */
@media only screen and (min-width: 481px) and (max-width: 850px) {
  .formulario-fecha-caso {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
  /* tablet */
@media only screen and (min-width: 851px) and (max-width: 992px) {
  .formulario-fecha-caso {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
  /* tablet landscape */
@media only screen and (min-width: 993px) and (max-width: 1200px) {
  .formulario-fecha-caso {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}
  /* desktop, laptop */
@media only screen and (min-width: 1201px) {
  .formulario-fecha-caso {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

.formulario-fecha-caso label {
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}

.elemento-fecha-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
  margin: auto;
}

#imagen-preview img {
  width: 60%;
  border-radius: 10px;
}

#previewImagenes {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    justify-items: center !important;
    text-align: center !important;
    align-items: center     !important;
    align-content: center !important;
    max-width: 100% !important;
}
.orden-imagenes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px;
    max-height: 100%;
    align-items: center;
    align-content: center;
  }
  
  .orden-imagenes button {
    background-color: #b94224 !important;
  }

.orden-imagenes img{
  width: 100%;
}

.fotos {
  display: flex;
  flex-direction: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 15px;
  margin: auto;
}

.elemento-fecha-2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  text-align: center;
  gap: 15px;
  margin: auto;
}

.orden-formulario-lineas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.formulario-fecha-lineas label {
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}

.boton-nueva-limea {
  grid-column: 1/3;
  text-align: center;
}

.modal-leo {
  padding: 20px !important;
}

/*==================== ACCIONES MADRE ====================*/

.acciones-madre-3 {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  margin: 20px;
}

@media only screen and (max-width: 992px) {
  .acciones-madre {
    position: relative;
    top: 0;
    right: 0;
    float: right;
  }
}
  /* tablet landscape */
@media only screen and (min-width: 993px) {
  .acciones-madre {
    position: absolute;
    top: 0;
    right: 0;
    float: right;
    margin: 20px;
  }
}
.acciones-madre img {
  cursor: pointer;
}

.acciones-madre-2 {
  position: relative; 
}

.acciones-madre-2 .acciones-madre {
  position: absolute;
  top: 0;
  right: 0;
  float: right;
  margin: 20px;
}

.guardar-comentario {
  position: relative;
}

.guardar-comentario button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin-top: 30px;
  margin-right: 45px;
}

.superior {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  text-align: center;

  margin-bottom: 20px;
}

.superior input {
  width: 50%;
  border: #000 1px solid;
}

/*==================== BOTONES ====================*/
.boton:hover {
  cursor: pointer;
}
.boton-unico {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  margin: 20px;
}

button {
  border: none;
  font-size: large;
  font-weight: bold;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--color-negro);
  color: var(--color-blanco);
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  cursor: pointer !important;
  background-color: var(--primary-color);
  color: var(--color-blanco);
}

.modal-backdrop {
  display: none !important;
}

.interno {
  display: flex;
  flex-direction: row;
}

.interno input,
select,
button,
label {
}

.form-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#plot-container {
  width: 100%;
}
#plot {
  width: 100%;
}

.elemento-h {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
}
.elemento-h label,
select,
input {
  width: 95%;
}

.madre-derecha {
  display: flex;
  flex-direction: column;
  justify-content: right;
  justify-items: right;
}

.interno {
  display: flex;
  flex-direction: row;
  width: 90%;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background-color: #fff;
  border: #0a6285 1px solid;
  border-radius: 20px;
  font-weight: bold;
  padding: 5px;
  margin: 5px;
}

.tag button {
  background-color: #fff;
  color: #0a6285;
  font-weight: bolder;
}

.tarjeta-fondo {
  background-color: rgba(241, 241, 241, 0.3);
  padding: 20px;
  border-radius: 30px;
}

.login-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  align-items: center;
  justify-content: center;
  align-content: center;
  justify-items: center;
  text-align: center;
  background-color: #fff;
}

.login {
  display: grid;
  grid-template-columns: 1fr;
}

.login label {
  display: none;
}

.login input {
  width: 100%;
  font-size: x-large;
}

.imagen-login {
  max-width: 100%;
}

.login button {
  width: 100% !important;
  font-size: x-large !important;
}
.login button:hover {
  cursor: pointer;
}

@media all and (max-width: 480px) {
  .login-contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-content: center;
    width: 90%;
    height: 80%;
    font-size: xx-large;
    margin: 0;
  }

  .login-contenedor input {
    width: 80%;
    margin: 10px;
    height: 80px;
  }

  .login-contenedor button {
    width: 80%;
    margin-top: 20px;
    height: 100px;
    text-transform: uppercase;
  }
}

.titulo-login {
  color: var(--color-negro);
  font-weight: bold;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.select2{
  width: 95%;
}

.contenedor-dos{
  display: grid;
  grid-template-columns: repeat(2,1fr);
}

.contenedor-dos label, select, input{
  width: 95%;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
}

@media only screen and (max-width: 850px) {
  .contenedor-dos {
    display: flex;
    flex-direction: column;
  }
}

.contenedor-imagenes{
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  width: 100%;
  padding: 50px;
}