/* -----------------------------------------------
   BUZONE - Login Page Styles
   Ubicaci�n: assets/css/buz.css
   ----------------------------------------------- */

/* Theme claro (default) */
[data-bs-theme="light"] {
  --buz-heading-color: #A0A0A0;
  --buz-heading-shadow: 0 1px 0 #f1f4fb, 0 2px 6px #0001;
  --buz-heading-weight: 700;
  --buz-heading-font: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: #A0A0A0;
}

/* Theme oscuro */
[data-bs-theme="dark"] {
  --buz-heading-color: #49BEFF;
  --buz-heading-shadow: 0 1px 0 #212e39, 0 2px 8px #39c6e631;
  --buz-heading-weight: 700;
  --buz-heading-font: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: #49BEFF;
}

/* Headings generales */
h1,
h2,
h3,
h4,
h5 {
  color: var(--buz-heading-color);
  font-weight: var(--buz-heading-weight);
  font-family: var(--buz-heading-font);
  letter-spacing: .03em;
  margin-bottom: .7em;
}

h1 {
  font-size: 2.25rem;
  line-height: 1.17;
}

h2 {
  font-size: 1.7rem;
  line-height: 1.22;
}

h3 {
  font-size: 1.33rem;
  line-height: 1.25;
}

h4 {
  font-size: 1.08rem;
  line-height: 1.27;
}

h5 {
  font-size: .97rem;
  line-height: 1.3;
}



body {
  min-height: 100vh;
  background: linear-gradient(140deg, #222E39 0%, #41C8E6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.body-wrapper {
  padding-top: 100px;
  /* Ajusta según la separación y altura real de tu navbar */
}


.iso-bg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-18deg) scale(1.7);
  z-index: 0;
  opacity: 0.09;
  filter: grayscale(1) brightness(4) drop-shadow(0 0 70px #fff5);
  pointer-events: none;
  user-select: none;
  max-width: 900px;
  width: 80vw;
}

.buzone-login-card {
  position: relative;
  z-index: 1;
  border-radius: 2.2rem;
  background: rgba(30, 41, 54, 0.70);
  box-shadow: 0 10px 32px 0 rgba(36, 143, 206, 0.12), 0 1.5px 10px 0 rgba(34, 46, 57, 0.17);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  padding: 2.6rem 2.2rem 2rem 2.2rem;
  max-width: 410px;
  width: 100%;
  min-width: 285px;
  animation: fadeInUp .8s cubic-bezier(.29, .89, .52, 1.45);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.buzone-logo {
  width: 80%;
  max-width: 260px;
  display: block;
  margin: auto auto;
  filter: drop-shadow(0 4px 20px #1ccad7a9);
  transition: .2s cubic-bezier(.53, 1.55, .48, 1.14);
  border-radius: 24px;
}

.form-label {
  color: #9de4f8;
  font-weight: 500;
  letter-spacing: .5px;
}

.form-control {
  background: rgba(255, 255, 255, 0.13);
  color: #f6fcff;
  border: none;
  border-radius: 1.5rem;
  font-size: 1.09em;
  font-weight: 500;
  box-shadow: 0 1px 6px 0 rgba(34, 206, 239, 0.07);
  transition: box-shadow 0.18s, background 0.19s;
  outline: none;
  text-align: center;
}

.form-control:focus {
  background: rgba(60, 200, 255, 0.13);
  border-color: #3bd2fa;
  box-shadow: 0 2px 12px 0 #39c6e588;
  color: #b8e7fd;
  text-align: center;
}

.btn-buzone {
  background: linear-gradient(90deg, #1ccad7 40%, #41C8E6 90%);
  color: #fff;
  font-weight: 600;
  letter-spacing: .7px;
  border-radius: 2rem;
  box-shadow: 0 2px 12px 0 #37bddc65;
  transition: .18s cubic-bezier(.4, 1.7, .37, 1.06);
  padding: 0.7em 0;
  font-size: 1.09em;
}

.btn-buzone:hover {
  background: linear-gradient(90deg, #2ed4c9 10%, #48d9f8 100%);
  color: #fff;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 24px 0 #47cee84f;
}

.form-check-label,
.link-secondary,
.buzone-footer {
  color: #81b1c8 !important;
  font-size: 0.97em;
}

.form-check-input:checked {
  background-color: #39C6E5;
  border-color: #39C6E5;
}

.buzone-footer {
  margin-top: 2.2rem;
  text-align: center;
}

.buzone-footer a {
  color: #39C6E5;
  font-weight: 500;
  transition: color .18s;
}

.buzone-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.text-acceso {
  color: #a0d8f3;
  font-size: 1.01em;
  letter-spacing: .04em;
}

.text-acceso-marca {
  color: #fff;
  font-weight: 600;
  display: inline-block;
}

.dashboard-page-container {
  min-height: 100vh;
  background: linear-gradient(140deg, #222E39 0%, #41C8E6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow-x: hidden;
  padding-top: 50px;
  /* Espacio para el nav y margen superior */
  padding-bottom: 40px;
}

/* Reusar el fondo iso */
.dashboard-page-container .iso-bg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-18deg) scale(1.6);
  z-index: 0;
  opacity: 0.08;
  filter: grayscale(1) brightness(4) drop-shadow(0 0 70px #fff5);
  pointer-events: none;
  user-select: none;
  max-width: 1100px;
  width: 88vw;
}

/* Tarjeta flotante tipo login, pero adaptada a dashboard */
.dashboard-card {
  position: relative;
  z-index: 1;
  border-radius: 1.8rem;
  background: rgba(30, 41, 54, 0.80);
  box-shadow: 0 10px 40px 0 rgba(36, 143, 206, 0.10), 0 2px 14px 0 rgba(34, 46, 57, 0.17);
  backdrop-filter: blur(11px);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  padding: 2.3rem 1.7rem 1.6rem 1.7rem;
  width: 100%;
  margin: 0 auto;
}

/* Opcional: espacio arriba/abajo de otros bloques dentro del container */
.dashboard-top-content,
.dashboard-bottom-content {
  width: 100%;
  z-index: 2;
}


/* ----- Header flotante con separaci�n ----- */
.app-header {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  pointer-events: none;
  /* Para que el espacio vac�o no reciba clicks, solo el nav */
}

/* Navbar flotante y separado de los bordes */
.app-header .navbar {
  width: auto;
  max-width: 1900px;
  margin: 22px auto 0 auto;
  /* 22px arriba, auto a los lados */
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 #1ccad724;
  padding: 0 1.6rem;
  min-height: 58px;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.34s, box-shadow 0.23s, margin 0.21s;
  border-bottom: none;
  backdrop-filter: none;
  pointer-events: auto;
  /* El nav s� recibe clicks */
}

.app-header .navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6em;
  /* Ajusta el espacio entre iconos aquí */
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}



/* Navbar fondo sólido cuando hay scroll */
.app-header.scrolled .navbar {
  background: #1d2732 !important;
  /* Puedes ajustar el color a tu branding */
  box-shadow: 0 2px 24px 0 #15304118;
  backdrop-filter: blur(7px);
  transition: background 0.34s, box-shadow 0.23s, margin 0.21s;
}

/* Que los links (iconos) estén bien centrados */
.app-header .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  /* Puedes ajustar padding si quieres iconos más grandes/espaciados */
}

.introjs-tooltip,
.introjs-tooltip.buzone-intro-tooltip {
  border-radius: 18px !important;
  background: #212529 !important;
  color: #fff !important;
  border: 2px solid #13ffd2 !important;
  font-size: 1.07em !important;
  box-shadow: 0 4px 16px -2px #0003 !important;
  padding: 18px 20px 16px 20px !important;
  z-index: 10999 !important;
}

/* Títulos del tooltip */
.introjs-tooltip-header,
.introjs-tooltip-title {
  background: transparent !important;
  color: #13ffd2 !important;
  font-size: 1.22em !important;
  font-weight: bold !important;
  border-bottom: none !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.4px;
}

/* Botones del tour */
.introjs-button,
.introjs-tooltip.buzone-intro-tooltip .introjs-button {
  background: #2379b6 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  border: none !important;
  min-width: 70px;
  box-shadow: none !important;
  margin: 0 4px !important;
}

.introjs-tooltip .introjs-skipbutton,
.introjs-tooltip .introjs-donebutton {
  background: #13ffd2 !important;
  color: #212529 !important;
  border-radius: 8px !important;
  font-weight: bold !important;
}

.introjs-arrow {
  border-color: #13ffd2 !important;
}

.introjs-tooltiptext {
  color: #fff !important;
  font-size: 1.07em !important;
}

.introjs-bullets .active a,
.introjs-bullets a:focus,
.introjs-bullets a:hover {
  background: #13ffd2 !important;
}

.introjs-bullets a {
  background: #2379b6 !important;
}

.introjs-progressbar {
  background: #13ffd2 !important;
}

/* Asegura mayor z-index para estar encima de modals si aplica */
.introjs-tooltip {
  z-index: 10999 !important;
}

.form-control-buz,
.bg-buz-filter {
  min-height: 44px;
  font-size: 1em;
}


/* Igualar Select2 al estilo de .form-select de Bootstrap */
.select2-container--default .select2-selection--single {
  display: block;
  width: 100%;
  padding: .375rem 2.25rem .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color, #212529bd);
  background-color: var(--bs-body-bg, #fff);
  background-image: var(--bs-form-select-bg-img, none);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #ced4da);
  border-radius: var(--bs-border-radius, .375rem);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  min-height: 38px;
}

.select2-container--default .select2-results__option[aria-selected] {
  background-color: #000000;
  color: #0dcaf0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #233C4A;
  color: #A1A1A1;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ffffff;
}


.select2-dropdown {
  background-color: #0dcaf0;
  border: 1px solid #aaaaaa00;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051;
}

/* Paginación DataTables con clases dt-paging-button */
nav[aria-label="pagination"] .dt-paging-button {
  background: #fff !important;
  color: #113857 !important;
  border: 1.5px solid #113857 !important;
  border-radius: 0.5em !important;
  margin: 0 0.15em !important;
  min-width: 2.2em !important;
  min-height: 2.2em !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: background 0.15s, color 0.15s;
  box-shadow: none !important;
  outline: none !important;
  vertical-align: middle;
  display: inline-block;
  padding: 0.3em 0.7em;
}

nav[aria-label="pagination"] .dt-paging-button.current,
nav[aria-label="pagination"] .dt-paging-button:active,
nav[aria-label="pagination"] .dt-paging-button:focus {
  background: #113857 !important;
  color: #fff !important;
  border-color: #113857 !important;
}

nav[aria-label="pagination"] .dt-paging-button.disabled,
nav[aria-label="pagination"] .dt-paging-button[aria-disabled="true"] {
  opacity: 0.45 !important;
  background: #e9ecef !important;
  color: #999 !important;
  cursor: not-allowed !important;
}

nav[aria-label="pagination"] .ellipsis {
  color: #113857 !important;
  font-size: 1.1em !important;
  padding: 0 0.5em;
}


.fc-event-tarea {
  background-color: #198754 !important;
  /* verde */
  border-color: #198754 !important;
  color: white !important;
}


@media (max-width: 991px) {

  .app-header .navbar,
  .app-header.scrolled .navbar {
    width: calc(100vw - 10px);
    /* 5px de separación a cada lado */
    max-width: 100vw;
    margin: 10px 5px 0 5px;
    border-radius: 10px;
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    /* IMPORTANTE: nunca se apilen */
  }

  .app-header .navbar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: .15em;
  }

  .app-header .ms-auto {
    flex-wrap: nowrap !important;
  }

  .dashboard-page-container .iso-bg {
    max-width: 170vw;
    width: 170vw;
  }

  .dashboard-card {
    border-radius: 1.1rem;
    padding: 1.2rem 0.4rem 1rem 0.4rem;
  }
}

@media (max-width: 600px) {
  .app-header .navbar-nav {
    gap: 0.4em;
  }
}


/* ------------------ Responsive ------------------ */
@media (max-width: 650px) {
  body {
    align-items: flex-start;
    justify-content: center;
    padding: 0;
  }

  .buzone-login-card {
    max-width: 90vw;
    min-width: 0;
    margin: 24px auto 12px auto;
    padding: 1.6rem 0.7rem 1.3rem 0.7rem;
    border-radius: 1.3rem;
    box-shadow: 0 4px 16px 0 #1ccad77a, 0 1.5px 7px 0 rgba(34, 46, 57, 0.11);
  }

  .buzone-logo {
    max-width: 80vw;
    margin-bottom: 1.3rem;
  }

  .iso-bg {
    max-width: 140vw;
    width: 140vw;
  }

  .form-control {
    font-size: 1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .btn-buzone {
    font-size: 1em;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.35rem;
  }

  h2 {
    font-size: 1.13rem;
  }

  h3 {
    font-size: 1.02rem;
  }

  h4 {
    font-size: .92rem;
  }

  h5 {
    font-size: .86rem;
  }
}

@media (max-width: 370px) {
  .buzone-login-card {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }
}

/* Placeholder color */
::placeholder {
  color: #bbe7f4b9 !important;
  opacity: 1;
}