.form-titulo {
  margin-top: 5px;
  margin-bottom: 15px;
  padding-top: 5px;
  padding-left: 10px;
  padding-bottom: 5px;
  border-radius: 5px;
  background-color: #f4f8fb;
  font-weight: bold;
  /**/
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid #bdbdbd;
  border-top: 1px solid #bdbdbd;
  border-bottom: 1px solid #bdbdbd;
  box-shadow: 0 2px 8px rgba(28, 45, 65, 0.12);
}

/*
.form-titulo {
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 10px;
	background-color: #eef3ff;
	color: #1f3b8f;
	border-left: 4px solid #1f3b8f;
	box-shadow: 0 2px 8px rgba(95, 118, 232, 0.12);
	font-weight: 700;
}
*/

.form-label {
  font-weight: bold;
}

.form-label-red {
  color: #fd2b2b;
}

.form-button {
  border-radius: 4px !important;
  width: 200px;
}

.form-button-150 {
  border-radius: 4px !important;
  width: 150px;
}

.row-margin {
  margin: 0px;
}

.form-select-my {
  height: 31px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.form-save-button {
  border-radius: 5px !important;
  width: 150px;
  margin-top: 50px;
  margin-bottom: 10px;
}

.form-hr {
  margin-bottom: 10px;
  margin-top: 0px;
}

#cardheader-color {
  background-color: #1c2d41;
}

.br {
  border-radius: 5px !important;
}

.br-10 {
  border-radius: 10px !important;
}

.card-shadow {
  box-shadow: 0px 4px 15px #e1e1e1 !important;
}

.tablabutton {
  width: 29px;
  height: 30px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-right: 5px !important;
  padding-left: 5px !important;
  border-radius: 5px !important;
}

.formbutton {
  width: 29px;
  height: 30px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-right: 5px !important;
  padding-left: 5px !important;
  border-radius: 5px !important;
}

/* DASHBOARD */
#tituloverde {
  margin-top: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 3px;
  background-color: #d3f4e6;
}

#titulorojo {
  margin-top: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 3px;
  background-color: #ffdce2;
}

#titulomorado {
  margin-top: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 3px;
  background-color: #dfe4fa;
}

#tituloazul {
  margin-top: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 3px;
  background-color: #d6eaf8;
}

#tituloasbestos {
  margin-top: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 3px;
  background-color: #1f618d;
}

#tituloasazul2 {
  margin-top: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 3px;
  background-color: #2c3e50;
}

#tituloamarillo {
  margin-top: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 3px;
  background-color: #f1c40f;
}

/*  COLORES  */
.azul1 {
  color: #eaf2f8;
}
.azul2 {
  color: #7fb3d5;
}
.azul3 {
  color: #2980b9;
}
.azul4 {
  color: #1f618d;
}
.azul5 {
  color: #154360;
}

.verde1 {
  color: #d5f5e3;
}
.verde2 {
  color: #82e0aa;
}
.verde3 {
  color: #2ecc71;
}
.verde4 {
  color: #239b56;
}
.verde5 {
  color: #186a3b;
}

.midblue1 {
  color: #d5d8dc;
}
.midblue2 {
  color: #808b96;
}
.midblue3 {
  color: #2c3e50;
}
.midblue4 {
  color: #212f3d;
}
.midblue5 {
  color: #17202a;
}

/* Teals */
.turquoise {
  color: #1abc9c;
}
.green-sea {
  color: #16a085;
}

/* Greens */
.emerald {
  color: #2ecc71;
}
.nephritis {
  color: #27ae60;
}

/* Blues */
.peter-river {
  color: #3498db;
}
.belize-hole {
  color: #2980b9;
}

/* Purples */
.amethyst {
  color: #9b59b6;
}
.wisteria {
  color: #8e44ad;
}
.wisteriab {
  background-color: #8e44ad;
}

/* Blacks */
.wet-asphalt {
  color: #34495e;
}
.midnight-blue {
  color: #2c3e50;
}

/* Yellows */
.sunflower {
  color: #f1c40f;
}
.orange {
  color: #f39c12;
}

/* Oranges */
.carrot {
  color: #e67e22;
}
.pumpkin {
  color: #d35400;
}

/* Reds */
.alizarin {
  color: #e74c3c;
}
.pomegranate {
  color: #c0392b;
}

/* Whites */
.clouds {
  color: #ecf0f1;
}
.silver {
  color: #bdc3c7;
}

/* Grays */
.concrete {
  color: #95a5a6;
}
.asbestos {
  color: #7f8c8d;
}

/* Primary */
.rojo-primario {
  color: #fd2b2b;
}
.verde-primario {
  color: #22ca80;
}

.bg-rojo-primario {
  background-color: #fd2b2b;
}
.bg-verde-primario {
  background-color: #22ca80;
}
.bg-gris-primario {
  background-color: #e5e5e5;
}

/* Dropdown override (high priority) */
.dropdown-menu {
  border: 1px solid #dbe5ff !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(28, 45, 65, 0.12) !important;
  padding: 6px !important;
}

.dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  color: #2a3547 !important;
  font-weight: 500 !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #eef3ff !important;
  color: #1f3b8f !important;
  transform: translateX(2px);
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: #5f76e8 !important;
  color: #fff !important;
}

.dropdown-menu .dropdown-item:focus-visible {
  outline: 2px solid #5f76e8;
  outline-offset: 1px;
}

.dropdown-menu .dropdown-header {
  color: #5b6b86 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 10px 6px 10px !important;
}

.dropdown-menu .dropdown-divider {
  border-top-color: #dbe5ff !important;
  opacity: 1;
  margin: 6px 4px !important;
}

.wizard {
  display: flex;
}

.wizard__step {
  /* Make all steps have the same width */
  flex: 1;
}

.wizard__dot {
  /* Center the content */
  align-items: center;
  display: flex;
  justify-content: center;
}

.wizard__connector {
  flex: 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
}

.wizard__step:first-child .wizard__connector,
.wizard__step:last-child .wizard__connector {
  background-color: transparent;
}

.wizard__number {
  /* Center the content */
  align-items: center;
  display: flex;
  justify-content: center;

  /* Rounded border */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 9999px;
  height: 32px;
  width: 32px;

  /* OPTIONAL: Spacing between it and connectors */
  margin-left: 54px;
  margin-right: 54px;
}

.box {
  border: 5px solid darkblue;
  width: 300px;
  margin: 10%;
  padding: 10%;
  font-family: Segoe UI;
}

.timeline {
  /* Used to position the left vertical line */
  position: relative;
}

.timeline__line {
  /* Border */
  border-right: 2px solid #d1d5db;

  /* Positioned at the left */
  left: 0.75rem;
  position: absolute;
  top: 0px;

  /* Take full height */
  height: 100%;
}

.timeline__items {
  /* Reset styles */
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.timeline__item {
  margin-bottom: 8px;
}

.timeline__top {
  /* Center the content horizontally */
  align-items: center;
  display: flex;
}

.timeline__circle {
  /* Rounded border */
  background-color: #2ecc71;
  border-radius: 9999px;

  /* Size */
  height: 1.65rem;
  width: 1.65rem;
  position: absolute;
  border: 1px solid #fff;
}

.timeline__title {
  /* Take available width */
  flex: 1;
  margin-left: 1.95rem;
}

.timeline__desc {
  /* Make it align with the title */
  margin-left: 2rem;
}

#footer {
  width: 100%;
  height: 81px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.sticky-table-header__sticky {
  /* Background color  */
  background-color: #1c2d41 !important;

  /* Stick to the left */
  left: 0;
  position: sticky;

  /* Displayed on top of other rows when scrolling */
  z-index: 9999;
}

.swal2-styled.swal2-confirm {
  border-left-color: #5d5d5d !important;
  border-right-color: #5d5d5d !important;
}

#imagediv {
  padding: 0px;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border: 1px solid rgba(51, 122, 183, 0.39);
  display: table;
}

#imagediv img {
  width: 100%;
  height: 100%;
}

#imagediv div {
  text-align: center;
  vertical-align: middle;
  height: 300px;
  background: #d3d3d3;
  display: table-cell;
}

.pagination {
  gap: 6px;
}

.pagination .page-link {
  color: #1c2d41;
  border: 1px solid #1c2d41;
  border-radius: 5px;
  padding: 6px 10px;
  transition: all 0.25s ease-in-out;
  font-weight: 500;
  background-color: #ffffff;
}

/* Hover suave */
.pagination .page-link:hover {
  background-color: #1c2d41;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(28, 45, 65, 0.25);
}

/* Página activa */
.pagination .page-item.active .page-link {
  background-color: #1c2d41;
  border-color: #1c2d41;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(28, 45, 65, 0.35);
}

/* Quitar focus feo azul de Bootstrap */
.pagination .page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(28, 45, 65, 0.25);
}

.modal-content {
  border-radius: 18px;
}

.modal-header {
  background: linear-gradient(135deg, #1c2d41, #243b55);
  color: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.modal-title {
  font-weight: 600;
  letter-spacing: 0.3px;
}

.btn-primary {
  background-color: #1c2d41;
  border-color: #1c2d41;
  transition: all 0.25s ease;
}

.btn-primary:hover {
  background-color: #162433;
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(28, 45, 65, 0.3);
}

.modal.fade .modal-dialog {
  transform: translateY(30px);
  transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
  transform: translateY(0);
}

/* Sidebar hover improvements (skin6) */
#main-wrapper[data-layout="vertical"]
  .left-sidebar[data-sidebarbg="skin6"]
  .sidebar-nav
  #sidebarnav
  .sidebar-item
  > .sidebar-link,
#main-wrapper[data-layout="horizontal"]
  .left-sidebar[data-sidebarbg="skin6"]
  .sidebar-nav
  #sidebarnav
  .sidebar-item
  > .sidebar-link {
  border-radius: 10px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#main-wrapper[data-layout="vertical"]
  .left-sidebar[data-sidebarbg="skin6"]
  .sidebar-nav
  #sidebarnav
  .sidebar-item
  > .sidebar-link:hover,
#main-wrapper[data-layout="horizontal"]
  .left-sidebar[data-sidebarbg="skin6"]
  .sidebar-nav
  #sidebarnav
  .sidebar-item
  > .sidebar-link:hover {
  background: #eef3ff;
  color: #1f3b8f;
  transform: translateX(4px);
  box-shadow: inset 2px 0 0 #1c2d41;
}

#main-wrapper[data-layout="vertical"]
  .left-sidebar[data-sidebarbg="skin6"]
  .sidebar-nav
  #sidebarnav
  .sidebar-item
  > .sidebar-link:hover
  i,
#main-wrapper[data-layout="horizontal"]
  .left-sidebar[data-sidebarbg="skin6"]
  .sidebar-nav
  #sidebarnav
  .sidebar-item
  > .sidebar-link:hover
  i {
  color: #1f3b8f;
}

/* Accesibilidad con teclado */
.sidebar-nav #sidebarnav .sidebar-item > .sidebar-link:focus-visible {
  outline: 2px solid #1c2d41;
  outline-offset: 2px;
}

/*.card:hover{
transform:translateY(-2px);
transition:.2s;
}*/

.table-hover tbody tr:hover {
  background: #f8f9fa;
}

.module-card {
  width: 110px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  background: white;
  text-decoration: none;
  color: #333;
  transition: 0.2s;
  font-size: 13px;
}

.module-card i {
  font-size: 22px;
  margin-bottom: 6px;
  color: #555;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  border-color: #3b82f6;
}

.module-card:hover i {
  color: #3b82f6;
}

/* Variantes */

.module-card.success:hover {
  border-color: #22c55e;
}
.module-card.success:hover i {
  color: #22c55e;
}

.module-card.warning:hover {
  border-color: #f59e0b;
}
.module-card.warning:hover i {
  color: #f59e0b;
}

.module-card.info:hover {
  border-color: #0ea5e9;
}
.module-card.info:hover i {
  color: #0ea5e9;
}

.module-card.highlight {
  border: 2px solid #3b82f6;
}
