/*Importación de fuentes google font import - poppins 700 bold*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

* {
  font-family: Poppins, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ======= colors ======*/
  --color: #c6a68bb8;
  --body-color: #e4e9f7;
  --sidebar-color: #fff;
  --primary-color: #00375e;
  --primary-color-light: #f6f5ff;
  --toggle-color: #ddd;
  --swich-color: #000000a2;
  --text-color: #353535;
  --thead-color: #00375e;
  /*--thead-color: #035c97;*/
  --thead-text-color: #fff;
  --theadold-color: #035c97;
  --theadold-text-color: #fff;
  --tbody-color: #b8b7b72c;
  --trborde-color: #035c97af;
  --btn-hover: #008cff;

  /* ==== transision ====*/
  --train-02: all 0.2 ease;
  --train-03: all 0.2 ease;
  --train-04: all 0.2 ease;
  --train-05: all 0.2 ease;
  --btn-hover: #00375e;
  --form-color: #d0d6e9c4;
  --btn-clean: #00b8ff;
  --btn-success: #00bb28;
  --btn-delete: #f50000;
  --btn-car: #037dcf;
  --btn-extra: #00375e;
  --btn-clean-hover: #009cda;
  --btn-success-hover: #00a323;
  --btn-delete-hover: #ce0000;
  --btn-text: #fff;
  --btn-pdf: #007FFF;
  --form-color-modal: #e4e9f7f1;
  --contenedor: #addaff50;
  --form-text-color: #353535;
  --privi: #000000e5;
  --input-color: #ffffff;
  --input-text-color: #353535;
  --shadow-color: #9b9b9b;
  --sha-color: #ffffff;
  --page-link-text-color: #00375e;
  --pg-disabled: #00375e;
}

body {
  height: 100vh;
  background: var(--body-color);
  transition: var(--train-05);
}

body.dark {
  --body-color: #18191a;
  --sidebar-color: #242526;
  --primary-color: #00375e;
  --primary-color-light: #1a2b3c;
  --toggle-color: #fff;
  --text-color: #f0f0f0;
  --tbody-color: #383838;
  --trborde-color: #178bd8;
  --form-color: #383838f2;
  --form-color-modal: #616060ee;
  --btn-text: #fff;
  --btn-clean: #00b8ff;
  --btn-success: #00bb28;
  --btn-delete: #f50000;
  --btn-car: #00a9ec;
  --btn-extra: #0273be;
  --btn-clean-hover: #009cda;
  --btn-success-hover: #00a323;
  --btn-delete-hover: #ce0000;
  --btn-pdf: #007FFF;
  --form-text-color: #fafafa;
  --contenedor: #e4e9f72c;
  --privi: #eeeeeebe;
  --input-color: #383838;
  --input-text-color: #ffffff;
  --swich-color: #000000a2;
  --shadow-color: #9b9b9b;
  --sha-color: #7d7d7d70;
  --page-link-text-color: #fff;
  --pg-disabled: #00375e;

}


#editor-container {
  max-width: 99%;
  margin: 0 auto;
}

body .tox-tinymce {
  border-radius: 10px !important;
}

body .tox-toolbar {
  background-color: #b8b7b72c !important;
}
/* Para la tarjeta de usuario y empresa*/
/* PARA EL MODO CLARO Y OSCURO*/
.modoco {
  font-size: 12px;
  position: relative;
  display: inline-block;
  width: 55px;
  height: 26px;
}

.page-item .page-link {
  background: transparent !important;
  border-color: var(--page-link-text-color);
  color: var(--page-link-text-color);
}

.page-item.disabled .page-link {
  opacity: 0.5;
  border-color: var(--page-link-text-color);
  color: var(--page-link-text-color);
}

.page-item .page-link.active {
  background: #00375e !important;
  border-color: #00375e !important;
}

.page-item .page-link:hover {
  background: #00375e !important;
  border-color: #fff;
  color: #fff;
  opacity: 0.9;
}

.FormularioAjax {
  overflow: auto;
}

.FormularioAjax::-webkit-scrollbar {
  width: 0;
}



.modoco input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--primary-color);
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 20px;
  left: 4px;
  bottom: 3px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}

.claro svg {
  position: absolute;
  top: 2px;
  left: 32px;
  z-index: 1;
  width: 20px;
  height: 20px;
}

.oscuro svg {
  fill: #ffffff;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  width: 19px;
  height: 19px;
}

/* Estilo cuando el botón está activo */
.active-button {
  background-color: white;
  border-color: blue;
  color: blue;
}

/* Estilo del botón por defecto */
.default-button {
  background-color: #007bff; /* botón primary */
  border-color: #fff;
  color: white;
}

/* .switch:hover */
.claro svg {
  animation: rotate 15s linear infinite;
}

@keyframes rotate {

  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* .switch:hover */
.oscuro svg {
  animation: tilt 5s linear infinite;
}

@keyframes tilt {

  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.modoclaos:checked+.slider {
  background-color: #183153;
}

.modoclaos:focus+.slider {
  box-shadow: 0 0 1px #183153;
}

.modoclaos:checked+.slider:before {
  transform: translateX(28px);
}

/*FINAL DEL CÖDIGO DEL MODO CLARO Y OSCURO*/


.carduserup {
  justify-content: center;
  align-items: center;
  align-content: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.compaimg {
  height: 170px;
  width: 170px;
  border-radius: 50%;
  box-shadow: 5px 5px 10px var(--shadow-color),
    -5px -5px 10px var(--sha-color);
}

.carduserup .cardleft {
  background: linear-gradient(180deg, #00a2ff, #0072ff);
}

.cardusup {
  background-color: var(--form-color);
  border-radius: 1rem;
  box-shadow: 20px 20px 60px var(--shadow-color),
    -20px -20px 60px var(--sha-color);
  /* box-shadow: 0 1rem 1rem rgba(0, 0, 0, .2); */
  display: flex;
  margin: 2rem 1rem;
  overflow: hidden;
}

.left-column {
  color: white;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.left-column h2 {
  color: white;
}

.LOGO a:hover {
  background: none;
}

.sidebar li .logo:hover {
  background: none;
}

.cardimg {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 10px;
}

.cardimg .cardfoto {
  width: calc(100% - 35%);
  border: 2px solid white;
  border-radius: 50%;
}

.left-column .cardbtn {
  background: #ffffff65;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.left-column .cardbtn:hover {
  background: #ffffff65;
  color: white;
  font-weight: bold;
  border: 2px solid white;
}

.form-select {
  overflow: auto;
}

.form-select::-webkit-scrollbar {
  width: 0px;
}

.trtabla tr:hover {
  background: #85b6d054;
}

body.dark .trtabla tr:hover {
  background: #85b6d0bd;
}

/* end */
.txtbg {
  color: var(--form-text-color);
}

/*  avatar */
.cardimg:first-child {
  align-items: center;
}

.cardimg:first-child input {
  display: none;
}

.cardimg:first-child label {
  background: linear-gradient(180deg, #00a2ff, #0072ff);
  color: white;
  padding: 6px 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 10px;
}

.imagenes {
  padding: 8px 20px;
  border: 1px solid #AAA;
  border-radius: 3px;
}

.cardft {
  border: 2px solid white;
  border-radius: 50%;
  height: 200px;
  width: 200px;
  box-shadow: 9px 9px 18px var(--shadow-color),
    -9px -9px 18px var(--sha-color);
}

/* Final del avatar*/
/* === sidebar === */
.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 185px;
  padding: 10px 2px;
  background: var(--sidebar-color);
  transition: var(--train-05);
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}

.inpt {
  color: var(--input-text-color);
  background-color: var(--input-color);
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  appearance: none;
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.sidebar::-webkit-scrollbar {
  width: 0px;
  position: absolute;
  left: 0;
}

.sidebar.close {
  width: 55px;
}

/* === Reusable CSS === */
.sidebar .text {
  font-weight: 500;
  color: var(--text-color);
  transition: var(--train-04);
  white-space: nowrap;
  opacity: 1;
}

.sidebar .mode .mode-text {
  font-weight: 500;
  color: var(--text-color);
  transition: var(--train-04);
  white-space: nowrap;
  opacity: 1;
}

.sidebar.close .mode .mode-text {
  display: none;
}

.sidebar.close .text {
  opacity: 0;
}

.sidebar.close .image-text img {
  height: auto;
  width: 100%;
}

.principal {
  margin-bottom: 40px;
}

.sidebar .image {
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar li {
  height: 40px;
  margin-top: 5px;
  list-style: none;
  display: flex;
  align-items: center;
}

.sidebar li .icon {
  min-width: 40px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar li .icon,
.sidebar li .text {
  color: var(--text-color);
  transition: var(--train-02);
}

.sidebar header {
  position: relative;
}

.sidebar .image-text img {
  height: auto;
  width: 50%;
  border-radius: 6px;
}

.sidebar header .image-text {
  display: flex;
  align-items: center;
}

header .image-text .header-text {
  display: flex;
  flex-direction: column;
}

.header-text .name {
  font-weight: 600;
}

.header-text .profession {
  margin-top: -2px;
}

.sidebar header .toggle {
  position: fixed;
  top: 30px;
  left: 170px;
  transform: translate(0%) rotate(180deg);
  height: 25px;
  width: 25px;
  background: var(--primary-color);
  color: var(--sidebar-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: var(--train-04);
}

.sidebar.close header .toggle {
  top: 35px;
  left: 45px;
  transform: translateX(0%);
}

body.dark .sidebar header .toggle {
  color: var(--text-color);
  top: 35px;
  right: -40px;
}

.sidebar .menu {
  margin-top: 5px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* .sidebar .search-box{
    background: var(--primary-color-light);
    border-radius: 6px;
    transition: var(--train-05);
}
.search-box input{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    background: var(--primary-color-light);
} */
.sidebar li a {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: 6px;
  transition: var(--train-04);
}

.sidebar li .salir .icon {
  color: rgb(255, 0, 0);
}

.sidebar li .salir:hover {
  background: rgb(255, 0, 0);
  color: white;
}

.sidebar li a:hover {
  background: var(--primary-color);
}

.homeicon {
  font-size: 30px;
  color: var(--thead-text-color);
}

.hometile {
  font-size: 20px;
}


.sidebar li a:hover .icon,
.sidebar li a:hover .text {
  color: var(--sidebar-color);
}

body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
  color: var(--text-color);
}

.sidebar .menu-bar {
  /*   height: calc(100% - 10%); */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bottom-content {
  align-items: self-end;
}

.cbtna {
  justify-content: right;
}

.addbtn {
  background: var(--thead-color);
  color: var(--thead-text-color);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0px;
  display: flex;
  border-radius: 10px;
}

body.dark .switch::before {
  left: 24px;
}

.home {
  position: relative;
  left: 185px;
  height: 100vh;
  width: calc(100% - 185px);
  background: var(--body-color);
  transition: var(--train-05);
  overflow: auto;
}

.home::-webkit-scrollbar {
  width: 0px;
}

.home .text {
  font-weight: 500;
  color: var(--text-color);
  padding: 8px 5px 0 10px;
}

.sidebar.close~.home {
  left: 55px;
  width: calc(100% - 55px);
}

.menu-links {
  padding-left: 0;
}

.thead {
  background: var(--thead-color);
  color: var(--thead-text-color);
}

.theadmo {
  background: var(--thead-color);
  color: var(--thead-text-color);
}

.theadold {
  background: var(--theadold-color);
  color: var(--theadold-text-color);
}

.tbody {
  background: var(--tbody-color);
}

/* ================================ PARA LOS RADIO BUTTONS =============0*/
.mbody {
  overflow: auto;
}

.mbody::-webkit-scrollbar {
  width: 0px;
}

.form-check-input:checked {
  animation: jelly 0.4s ease;
}

.radio-inputs {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio-inputs>* {
  margin: 6px;
}

.radio-input:checked+.radio-tile {
  border-color: #2260ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #2260ff;
}

.radio-input:checked+.radio-tile:before {
  transform: scale(1);
  opacity: 1;
  background-color: #2260ff;
  border-color: #2260ff;
}

.radio-input:checked+.radio-tile .radio-icon i {
  fill: #2260ff;
}

.radio-input:checked+.radio-tile .radio-label {
  color: #2260ff;
}

.radio-input:focus+.radio-tile {
  border-color: #2260ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
}

.radio-input:focus+.radio-tile:before {
  transform: scale(1);
  opacity: 1;
}

.radio-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  min-height: 80px;
  border-radius: 0.5rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: 0.15s ease;
  cursor: pointer;
  position: relative;
}

.radio-tile:before {
  content: "";
  position: absolute;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #b5bfd9;
  background-color: #fff;
  border-radius: 50%;
  top: 0.25rem;
  left: 0.25rem;
  opacity: 0;
  transform: scale(0);
  transition: 0.25s ease;
}

.radio-tile:hover {
  border-color: #2260ff;
}

.radio-tile:hover:before {
  transform: scale(1);
  opacity: 1;
}

.radio-icon i {
  font-size: 30px;
  fill: #494949;
}

.radio-label {
  color: #707070;
  transition: 0.375s ease;
  text-align: center;
  font-size: 13px;
}

.radio-input {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ===================== END RADIO bUTTON =============*/

/* ================== ESTILOS PARA BOTONES ================*/

table .tablebtn {
  margin: 5px 0 5px 0;
  border-radius: 10px;
  border: 3px solid white;
  background: var(--btn-success);
  color: white;
  padding: 5px 15px 5px 15px;
  display: flex;
}

table .tablebtn:hover {
  margin: 5px 0 5px 0;
  border-radius: 10px;
  border: 3px solid white;
  background: var(--btn-success);
  color: white;
  padding: 5px 15px 5px 15px;
  display: flex;
}

.text .delete {
  border-radius: 10px;
  background: var(--btn-delete);
  color: var(--btn-text);
  padding-left: 10px;
  padding-right: 10px;
}

.btn-close {
  border-radius: 10px;
  background: var(--btn-delete);
  color: var(--btn-text);
  padding-left: 10px;
  padding-right: 10px;
}

.btn-close:hover {
  border-radius: 10px;
  background: var(--btn-delete);
  color: var(--btn-text);
  padding-left: 10px;
  padding-right: 10px;
}

.text .limpiar {
  border-radius: 10px;
  background: var(--btn-clean);
  color: var(--btn-text);
  padding-left: 10px;
  padding-right: 10px;
}

.text .validar {
  border-radius: 10px;
  background: var(--btn-success);
  color: var(--btn-text);
  padding-left: 10px;
  padding-right: 10px;
}

.text .limpiar:hover {
  background: var(--btn-clean-hover);
  color: var(--btn-text);
}

.text .validar:hover {
  background: var(--btn-success-hover);
  color: var(--btn-text);
}

.text .delete:hover {
  background: var(--btn-delete-hover);
  color: var(--btn-text);
}
.form-text {
  padding: 0 4px 0 4px !important;
  height: 29px;
  font-size: 14px;
}
.tabla1 {
  width: 100%;
}

.tabla1 th,
td {
  padding: 2px;
}
.tabla2 {
  width: 100%;
}

.tabla2 th,
td {
  padding: 2px;
}
.hidden {
  display: none;
}


/* Estilos del scrollbar horizontal */
.table-responsive::-webkit-scrollbar {
  height: 7px;
  /* Altura del scrollbar horizontal */
  background-color: rgb(187, 186, 186);
  /* Color de fondo del área del scrollbar */
}

.table-responsive::-webkit-scrollbar-thumb {
  background-color: rgb(187, 186, 186);
  /* Color del "thumb" del scrollbar (la parte que se puede arrastrar) */
  border-radius: 6px;
  /* Bordes redondeados del "thumb" */
  opacity: 0.1;
}

.table-responsive::-webkit-scrollbar-track {
  background-color: var(--body-color);
  /* Color del "track" del scrollbar (el área del fondo) */
}

a div.btn {
  border: 2px solid var(--thead-color);
  color: var(--text-color);
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 0px;
  display: flex;
}

.btn.acti {
  background-color: var(--primary-color);
  color: var(--thead-text-color);
  border: none;

}

.btn.acti:hover {
  background-color: var(--primary-color);
  color: var(--thead-text-color);
  border: 3px solid var(--thead-text-color);
}

a div.btn:hover {
  background-color: var(--btn-hover);
  border: 3px solid var(--thead-text-color);
  color: var(--thead-text-color);
}


/* ===============================================*/
#register_form fieldset:not(:first-of-type) {
  display: none;
}

/* ================== new ===============*/

.lform {
  width: 100%;
}

/*=== Form ===*/
.form {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
}

.Bienvenido {
  font-weight: bold;
  text-align: center;
  /* Alinea el texto al centro */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.loginlabel {
  margin-left: 15px;
  margin-bottom: 5px;
}

.loginlabel .icono {
  line-height: 1em;
}

.linput {
  width: 95%;
  height: 95%;
  border: 1px solid #999595;
  height: 45px;
  padding-left: 35px;
  text-align: left;
  border-radius: 10px;
  padding: 0rem 2rem;
  font-size: 1.2rem;
}

.btnlogin {
  width: 95%;
  padding: .5rem;
  outline: none;
  background: linear-gradient(to right, #000000, #474747);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.shape1 {
  top: -7rem;
  left: -3.5rem;
  background: linear-gradient(180deg, #000 0%, rgba(196, 196, 196, 0) 100%);
}

.shape2 {
  bottom: -6rem;
  right: -5.5rem;
  background: linear-gradient(180deg, #000 0%, rgba(196, 196, 196, 0) 100%);
  transform: rotate(180deg);
}

/* Teléfonos pequeños (portrait y landscape) */
@media screen and (min-width: 319px) and (max-width: 480px) {

  /* Estilos para teléfonos pequeños */
  /*=== Shapes ===*/
  .loginimg {
    display: none;
  }

  .lform {
    margin-top: 20px;
  }

  .loginimg img {
    display: none;
  }

  .avatar .fa-7x {
    font-size: 3em;
    /* Cambia el tamaño según tus preferencias */
  }

  .text-center {
    font-size: 35px;
  }

  .shape1,
  .shape2 {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
  }

  .form {
    height: 100vh;
    width: 100%;
  }

  .col-md-4 {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
  }

  .loginlabel {
    margin-left: 15px;
    margin-bottom: 2px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 180px;
    padding: 10px 2px;
    background: var(--sidebar-color);
    transition: var(--train-05);
    z-index: 100;
    overflow-y: auto;
  }

  .sidebar .text {
    font-size: 10px;
  }

  .sidebar .mode-text {
    font-size: 11px;
  }

  .sidebar .user {
    font-size: 9px;
  }

  .sidebar header .toggle {
    position: fixed;
    top: 45px;
    left: 170px;
    transform: translate(0%) rotate(180deg);
    height: 30px;
    width: 30px;
    background: var(--primary-color);
    color: var(--sidebar-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    transition: var(--train-04);
  }

  .sidebar.close header .toggle {
    top: 45px;
    left: 50px;
    transform: translateX(0%);
  }

  .home {
    position: relative;
    left: 180px;
    height: 100vh;
    width: calc(100% - 180px);
    background: var(--body-color);
    transition: var(--train-05);
    overflow: auto;
  }

  .sidebar.close~.home {
    left: 75px;
    width: calc(100% - 75px);
  }

  .menu-bar {
    overflow-y: auto;
  }

  .menu-bar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar .bottom-content {
    position: sticky;
    bottom: 0;
    background: var(--sidebar-color);
  }

  .menu-bar {
    overflow-y: auto;
  }

  .menu-bar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar .bottom-content {
    position: sticky;
    bottom: 0;
    background: var(--sidebar-color);
  }

  .sidebar~.home .homeicon {
    font-size: 20px;
  }

  .sidebar~.home .hometile {
    font-size: 13px;
  }

  .sidebar.close~.home .homeicon {
    font-size: 25px;
  }

  .sidebar.close~.home .hometile {
    font-size: 15px;
  }
}

/* Teléfonos medianos (portrait y landscape) */
@media screen and (min-width: 481px) and (max-width: 768px) {

  /* Estilos para teléfonos medianos */
  .shape1,
  .shape2 {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
  }

  .form {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
  }

  .col-md-4 {
    max-width: 50%;
    flex: 0 0 50%;
  }

  .col-md-5 {
    max-width: 50%;
    flex: 0 0 50%;
  }

  .bottom-content {
    position: absolute;
    width: 99%;
    bottom: 15px;
  }
}

/* Teléfonos grandes (portrait y landscape) */
@media screen and (min-width: 769px) and (max-width: 968px) {

  /* Estilos para teléfonos grandes */
  .shape1,
  .shape2 {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }

  .form {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
  }

  .col-md-4 {
    max-width: 50%;
    flex: 0 0 50%;
  }

  .col-md-5 {
    max-width: 50%;
    flex: 0 0 50%;
  }

  .bottom-content {
    position: absolute;
    width: 99%;
    bottom: 15px;
  }
}

/* Tablets pequeñas (portrait y landscape) */
@media screen and (min-width: 769px) and (max-width: 1024px) {

  /* Estilos para tablets pequeñas */
  .shape1,
  .shape2 {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }

  .form {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
  }

  .col-md-4 {
    max-width: 50%;
    flex: 0 0 50%;
  }

  .col-md-5 {
    max-width: 50%;
    flex: 0 0 50%;
  }

  .bottom-content {
    position: absolute;
    width: 98%;
    bottom: 15px;
  }
}

/* Tablets medianas (portrait y landscape) */
@media screen and (min-width: 1025px) and (max-width: 1224px) {

  /* Estilos para tablets medianas */
  .shape1,
  .shape2 {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
  }

  .bottom-content {
    position: absolute;
    width: 98%;
    bottom: 15px;
  }
}

/* Tablets grandes (portrait y landscape) */
@media screen and (min-width: 1225px) and (max-width: 1440px) {

  /* Estilos para tablets grandes */
  .shape1,
  .shape2 {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
  }
}

/* Laptops de pantalla pequeña */
@media screen and (min-width: 1441px) and (max-width: 1680px) {

  /* Estilos para laptops de pantalla pequeña */
  .shape1,
  .shape2 {
    position: absolute;
    width: 270px;
    height: 270px;
    border-radius: 50%;
  }

  .bottom-content {
    position: absolute;
    width: 98%;
    bottom: 15px;
  }
}

/* Laptops de pantalla mediana */
@media screen and (min-width: 1681px) and (max-width: 1920px) {

  /* Estilos para laptops de pantalla mediana */
  .shape1,
  .shape2 {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
  }

  .containerdash {
    padding: 0 15px 0 0;
    display: grid;
    width: 100%;
    margin: 0 auto;
    gap: 0.5rem;
    grid-template-columns: 14rem auto;
  }

  .bottom-content {
    position: absolute;
    width: 98%;
    bottom: 15px;
  }
}

/* Laptops de pantalla grande */
@media screen and (min-width: 1921px) {

  /* Estilos para laptops de pantalla grande */
  .shape1,
  .shape2 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
  }

  .right .top button {
    display: none;
  }

  .containerdash {
    padding: 0 15px 0 0;
    display: grid;
    width: 100%;
    margin: 0 auto;
    gap: 0.5rem;
    grid-template-columns: 14rem auto;
  }

  .bottom-content {
    position: absolute;
    width: 98%;
    bottom: 15px;
  }
}

/* ========= Error 404 =====*/

.container-404 {
  background: #000428;
  background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
  color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-login {
  width: 90%;
  padding: 10px 0;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 30px;
  background-color: grren;
  background: linear-gradient(to right, #11998e, #38ef7d);
  color: #fff;
  border: none;
  transition: all 0.2s ease-out;
}

.btn-login:hover {
  background: linear-gradient(to right, #028f15, #6bfd47);
  background-color: linear-gradient(to right, #028f15, #6bfd47);
  border: 0px solid #fff;
  text-decoration: none;
  color: #fff;
}

.btn-login:active,
.btn-login:focus {
  outline: none;
}





/*   ===================== NEW CODE FOR NAVIGATION BUTTONS ==============   */
.page-link {
  transition: all .2s ease-in-out;
}