@charset "UTF-8";
/* 1. Agregar el import de Google Fonts aquí arriba */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

.fa-rotate-180, .fa-rotate-90, [data-bs-toggle] i {
  transition: all 350ms ease;
}

/*Typography Settings*/
body {
  font-size: 13px;
  font-family: "Inter", sans-serif !important; /* Cambiado Roboto por Inter */
  line-height: 26px !important;
  color: #6c6c6c !important;
  background-color: #f0f0f0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: #1f1f1f;
  font-family: "Source Sans Pro", sans-serif !important;
  margin-bottom: 5px;
  letter-spacing: -0.3px;
}

h1 {
  font-size: 24px;
  line-height: 30px;
}

h2 {
  font-size: 21px;
  line-height: 25px;
}

h3 {
  font-size: 20px;
  line-height: 24px;
}

h4 {
  font-size: 18px;
  line-height: 23px;
}

h5 {
  font-size: 16px;
  line-height: 22px;
}

a {
  text-decoration: none !important;
}

p {
  color: #6c6c6c;
  margin-bottom: 30px;
  padding-bottom: 0px;
}

/*Page Stucture Settings*/
body {
  min-height: 60vh;
}

.notch-clear {
  padding-top: calc(0px + (constant(safe-area-inset-top))*0.8) !important;
  padding-top: calc(0px + (env(safe-area-inset-top))*0.8) !important;
}

.notch-push {
  transform: translateY(-150%) !important;
  top: calc(0px + (constant(safe-area-inset-top))*0.8) !important;
  top: calc(0px + (env(safe-area-inset-top))*0.8) !important;
}

#page {
  position: relative;
}

.page-content {
  overflow-x: hidden;
  transition: all 350ms ease;
  z-index: 90;
  padding-bottom: 80px;
  padding-bottom: calc(80px + (constant(safe-area-inset-bottom))*1.1);
  padding-bottom: calc(80px + (env(safe-area-inset-bottom))*1.1);
}

.content-box {
  background-color: #FFFFFF;
  border-radius: 15px;
  margin-left: 15px;
  margin-right: 15px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.08);
}

/*Content Boxes*/
.content {
  margin: 20px 15px 20px 15px;
}
.content p:last-child {
  margin-bottom: 0px;
}

.content-full {
  margin: 0px;
}

.content-boxed {
  padding: 20px 15px 0px 15px;
}

/*Logos*/
.header-logo {
  background-size: 28px 28px;
  width: 50px;
}

.footer .footer-logo {
  background-size: 80px 80px;
  height: 80px !important;
  margin-bottom: 20px !important;
}

.theme-light .header .header-logo {
  background-image: url(../images/preload-logo.png);
}

.theme-dark .header .header-logo {
  background-image: url(../images/preload-logo.png);
}

.theme-light .footer .footer-logo {
  background-image: url(../images/preload-logo.png);
}

.theme-dark .footer .footer-logo {
  background-image: url(../images/preload-logo.png);
}

/*--Header---*/
.header-title span {
  font-family: "Source Sans Pro", sans-serif;
}

.footer-title span {
  font-family: "Source Sans Pro", sans-serif;
}

.header-logo {
  color: rgba(0, 0, 0, 0) !important;
}
.header-logo span {
  display: none;
  display: none;
}

.header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  height: calc(50px + (constant(safe-area-inset-top))*0.8) !important;
  height: calc(50px + (env(safe-area-inset-top))*0.8) !important;
  z-index: 99;
  transition: all 350ms ease;
  background-color: #FFF;
  border-bottom: solid 1px rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.08);
}
.header .header-title {
  position: absolute;
  height: 50px;
  line-height: 50px;
  margin-top: calc((constant(safe-area-inset-top))*0.8) !important;
  margin-top: calc((env(safe-area-inset-top))*0.8) !important;
  font-size: 14px;
  color: #000;
  font-weight: 600;
  z-index: 1;
  font-family: "Source Sans Pro", sans-serif;
}
.header .header-logo {
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-top: calc((constant(safe-area-inset-top))*0.8) !important;
  margin-top: calc((env(safe-area-inset-top))*0.8) !important;
}
.header .header-icon {
  position: absolute;
  height: 50px;
  width: 45px;
  text-align: center;
  line-height: 49px;
  font-size: 12px;
  color: #1f1f1f;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(0, 0, 0, 0) !important;
}
.header .dropdown-menu {
  z-index: 99;
}

.header-nav {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  z-index: 99;
  transition: all 350ms ease;
}
.header-nav .header-title {
  position: absolute;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #000;
  font-weight: 600;
  z-index: 1;
  font-family: "Source Sans Pro", sans-serif;
}
.header-nav .header-logo {
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  position: absolute;
  z-index: 1;
  left: 50%;
}
.header-nav .header-icon {
  position: absolute;
  height: 50px;
  width: 45px;
  text-align: center;
  line-height: 49px;
  font-size: 12px;
  color: #1f1f1f;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(0, 0, 0, 0) !important;
}

.footer .footer-logo {
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  position: absolute;
  z-index: 1;
  left: 50%;
}

.header-auto-show {
  opacity: 0;
  transition: all 350ms ease;
}

.header-active {
  opacity: 1;
  transition: all 350ms ease;
}

.header-always-show .header {
  margin-top: 0px !important;
}

.header-static {
  position: relative !important;
}

.header-transparent {
  background-color: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
  border: none !important;
}

.header-clear {
  padding-top: 50px;
  padding-top: calc(50px + (constant(safe-area-inset-top))*0.8) !important;
  padding-top: calc(50px + (env(safe-area-inset-top))*0.8) !important;
}

.header-clear-small {
  padding-top: 20px;
  padding-top: calc(20px + (constant(safe-area-inset-top))*0.8) !important;
  padding-top: calc(20px + (env(safe-area-inset-top))*0.8) !important;
}

.header-clear-medium {
  padding-top: 70px;
  padding-top: calc(70px + (constant(safe-area-inset-top))*0.8) !important;
  padding-top: calc(70px + (env(safe-area-inset-top))*0.8) !important;
}

.header-clear-large {
  padding-top: 85px;
  padding-top: calc(85px + (constant(safe-area-inset-top))*0.8) !important;
  padding-top: calc(85px + (env(safe-area-inset-top))*0.8) !important;
}

.header-icon {
  margin-top: calc((constant(safe-area-inset-top))*0.8) !important;
  margin-top: calc((env(safe-area-inset-top))*0.8) !important;
}
.header-icon .badge {
  position: absolute;
  margin-left: -5px;
  color: #FFF !important;
  width: 16px;
  text-align: center;
  line-height: 16px;
  padding: 0px;
  padding-left: 1px !important;
  border-radius: 18px;
  margin-top: 7px;
  font-size: 11px;
}

.header-transparent-light {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none !important;
}
.header-transparent-light a {
  color: #FFF;
}

.header-transparent-dark {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none !important;
}
.header-transparent-dark a {
  color: #000;
}

.header-logo-center .header-icon-1 {
  left: 0px;
}
.header-logo-center .header-icon-2 {
  left: 45px;
}
.header-logo-center .header-icon-3 {
  right: 45px;
}
.header-logo-center .header-icon-4 {
  right: 0px;
}
.header-logo-center .header-title {
  width: 150px;
  left: 50%;
  margin-left: -75px;
  text-align: center;
}
.header-logo-center .header-logo {
  background-position: center center;
  width: 150px !important;
  left: 50%;
  margin-left: -75px;
  text-align: center;
}

.header-logo-left .header-icon-1 {
  right: 0px;
}
.header-logo-left .header-icon-2 {
  right: 45px;
}
.header-logo-left .header-icon-3 {
  right: 90px;
}
.header-logo-left .header-icon-4 {
  right: 135px;
}
.header-logo-left .header-logo {
  left: 0px !important;
  margin-left: 0px !important;
}
.header-logo-left .header-title {
  left: 15px !important;
  margin-left: 0px !important;
}

.header-logo-right .header-icon-1 {
  left: 0px;
}
.header-logo-right .header-icon-2 {
  left: 45px;
}
.header-logo-right .header-icon-3 {
  left: 90px;
}
.header-logo-right .header-icon-4 {
  left: 135px;
}
.header-logo-right .header-logo {
  left: auto !important;
  right: 20px !important;
  margin-left: 0px !important;
}
.header-logo-right .header-title {
  left: auto !important;
  right: 20px !important;
  margin-left: 0px !important;
}

.header-logo-app .header-icon-1 {
  left: 3px;
}
.header-logo-app .header-icon-2 {
  right: 2px;
}
.header-logo-app .header-icon-3 {
  right: 45px;
}
.header-logo-app .header-icon-4 {
  right: 90px;
}
.header-logo-app .header-logo {
  left: 0px !important;
  margin-left: 40px !important;
}
.header-logo-app .header-title {
  left: 0px !important;
  margin-left: 55px !important;
}

.footer-logo span {
  display: none;
}

.header-demo {
  z-index: 98 !important;
  position: relative;
}

.header-search {
  overflow: hidden;
}

.header-search .search-box {
  margin-top: calc(env(safe-area-inset-top) - 10px);
}

.header-search * {
  transition: transform 300ms ease;
}

.header-search-active .header-icon, .header-search-active .header-title {
  transform: translateY(-80px);
}

.header-search .search-box, .header-search input {
  transform: translateY(80px);
  border: 0px;
}

.header-search-active .search-box, .header-search-active input {
  transform: translateY(0px);
}

.header-auto-show {
  pointer-events: none;
}

.header-auto-show.header-active {
  pointer-events: all;
}

/*-Footer Menu-*/
#footer-bar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 98;
  background-color: rgba(249, 249, 249, 0.98);
  box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.06);
  min-height: 60px;
  height: calc(62px + (constant(safe-area-inset-bottom))*1.1);
  height: calc(62px + (env(safe-area-inset-bottom))*1.1);
  display: flex;
  text-align: center;
}
#footer-bar a {
  color: #1f1f1f;
  padding-top: 12px;
  position: relative;
  flex: 1 1 auto;
}
#footer-bar a span {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 10px;
  font-weight: 500;
  margin-top: -6px;
  opacity: 0.7;
  font-family: "Inter", sans-serif !important; /* Cambiado Roboto por Inter */

}
#footer-bar a i {
  font-size: 18px;
  position: relative;
  z-index: 2;
}
#footer-bar .badge {
  font-style: normal;
  z-index: 5;
  top: 0px;
  position: absolute;
  margin-left: 3px;
  color: #FFF !important;
  width: 18px;
  text-align: center;
  line-height: 18px;
  padding: 0px;
  padding-left: 0px !important;
  border-radius: 18px;
  margin-top: 7px;
  font-size: 11px;
}

.footer-bar-2 .active-nav {
  color: #FFF !important;
}
.footer-bar-2 .active-nav strong {
  position: absolute;
  width: 80px;
  left: 50%;
  transform: translateX(-50%);
  top: 0px;
  bottom: 0px;
}

.footer-bar-4 .active-nav {
  color: #FFF !important;
}
.footer-bar-4 .active-nav strong {
  position: absolute;
  width: 47px;
  height: 47px;
  border-radius: 60px;
  left: 50%;
  top: 30px;
  transform: translate(-50%, -50%);
  bottom: 0px;
}
.footer-bar-4 span {
  display: none !important;
}
.footer-bar-4 i {
  padding-top: 10px;
}

.footer-bar-5 .active-nav strong {
  position: absolute;
  width: 50px;
  height: 2px;
  border-radius: 60px;
  left: 50%;
  top: 0px;
  transform: translateX(-50%);
}

.footer-bar-3 span {
  display: none !important;
}
.footer-bar-3 .active-nav {
  padding-top: 11px !important;
}
.footer-bar-3 .active-nav span {
  display: block !important;
}
.footer-bar-3 a {
  padding-top: 18px !important;
}

.footer-menu-hidden {
  transition: all 100ms ease;
  transform: translateY(100%) !important;
}

.footer-bar-white * {
  color: #FFF;
}

#footer-bar.position-relative {
  z-index: 2 !important;
}

.is-ios #footer-bar {
  height: calc(65px + (constant(safe-area-inset-bottom))*1.1);
  height: calc(65px + (env(safe-area-inset-bottom))*1.1);
}

.is-not-ios .footer-menu-clear {
  height: 70px;
  display: block;
}
.is-not-ios .footer {
  padding-bottom: 0px;
}
.is-not-ios #footer-menu a i {
  padding-top: 13px;
}
.is-not-ios #footer-menu a span {
  opacity: 0.6;
}

/*Sticky 4.1 Scrolling Footer Bar*/
.footer-bar-scroll {
  display: block !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
}
.footer-bar-scroll a {
  display: inline-block;
  width: 19.5%;
}

.footer-bar-scroll.footer-bar-4 .active-nav strong {
  margin-top: 1px;
}
.footer-bar-scroll.footer-bar-4 .badge {
  margin-left: -8px !important;
  margin-top: 14px !important;
}

.footer-bar-scroll.footer-bar-3 .badge {
  margin-left: -7px !important;
  margin-top: 0px !important;
}
.footer-bar-scroll.footer-bar-3 i {
  transform: translateY(-10px);
}
.footer-bar-scroll.footer-bar-3 .active-nav i {
  transform: translateY(0px);
}

/*Menus & Action Sheets & Modals*/
#menu-settings {
  overflow: hidden;
}

/*--Menu System---*/
.menu-title h1 {
  font-size: 23px;
  font-weight: 700;
  padding: 20px 0px 3px 20px;
}
.menu-title p {
  font-size: 11px;
  margin: -15px 0px 10px 20px;
  padding: 0px 0px 0px 0px;
}
.menu-title a {
  font-size: 20px;
  color: #dc3545;
  position: absolute;
  text-align: center;
  width: 55px;
  line-height: 85px;
  right: 0px;
  top: 0px;
}

.menu-bg {
  background-color: #f0f0f0;
}

.menu-hider {
  position: fixed;
  top: -100px;
  bottom: -100px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: all 350ms ease;
}

.menu {
  display: none;
  position: fixed;
  background-color: #FFF;
  z-index: 101;
  overflow: scroll;
  transition: all 350ms ease;
  -webkit-overflow-scrolling: touch;
}
.menu .content {
  margin-bottom: 0px !important;
}

.menu-box-left {
  left: 0px;
  top: 0px !important;
  top: constant(safe-area-inset-top) !important;
  top: env(safe-area-inset-top) !important;
  width: 250px;
  height: 100%;
  bottom: 0px;
  box-shadow: 0 15px 25px 1px rgba(0, 0, 0, 0.1);
  transform: translate3d(-100%, 0, 0);
}

.menu-box-right {
  right: 0px;
  transform: translateX(100%);
  top: 0px !important;
  top: constant(safe-area-inset-top) !important;
  top: env(safe-area-inset-top) !important;
  height: 100%;
  bottom: 0px;
  box-shadow: 0 15px 25px 1px rgba(0, 0, 0, 0.1);
  width: 250px;
}

.menu-box-top {
  transform: translate3d(0, -115%, 0);
  top: 0px;
  left: 0px;
  right: 0px;
  height: auto;
}

.menu-box-bottom {
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: auto;
  transform: translate3d(0, 110%, 0);
}

.menu-box-modal {
  top: 50%;
  left: 50%;
  width: 330px;
  max-height: 480px;
  transform: translate(-50%, -50%) scale(0, 0);
  opacity: 0;
  pointer-events: none;
  transition: all 350ms ease;
}

.menu-box-modal-full {
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
}

.menu-box-detached, .menu-box-modal {
  border-radius: 15px;
}

.menu-box-top.menu-box-detached {
  top: 10px;
  left: 10px;
  right: 10px;
}

.menu-box-bottom.menu-box-detached {
  bottom: 20px;
  left: 10px;
  right: 10px;
}

.menu-box-left.menu-active {
  transform: translate3d(0%, 0, 0) !important;
}

.menu-box-right.menu-active {
  transform: translate3d(0%, 0, 0) !important;
}

.menu-box-top.menu-active {
  transform: translate3d(0%, 0, 0) !important;
}

.is-on-homescreen .menu-box-top.menu-active {
  transform: translate3d(0%, 40px, 0) !important;
}

.menu-box-bottom.menu-active {
  transform: translate3d(0%, 0, 0) !important;
}

.menu-box-modal.menu-active {
  transition: all 350ms ease;
  pointer-events: all !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1, 1);
}

.menu-box-modal.menu-box-modal-full {
  max-height: 100%;
  width: 100%;
  height: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  transform: translate(0%, 0%);
}

.menu-hider.menu-active {
  transition: all 350ms ease;
  opacity: 1;
  pointer-events: all;
}

.menu-hider.menu-active.menu-active-clear {
  background-color: rgba(0, 0, 0, 0) !important;
}

.menu-box-left[data-menu-effect=menu-reveal] {
  opacity: 0;
  pointer-events: none;
  transform: translate(0px) !important;
  z-index: 96;
}

.menu-box-right[data-menu-effect=menu-reveal] {
  opacity: 0;
  pointer-events: none;
  transform: translate(0px) !important;
  z-index: 96;
}

.menu-active.menu {
  opacity: 1 !important;
  transition: all 350ms ease;
  pointer-events: all !important;
}

/*Menu Update*/
#menu-update {
  background-color: #FFF;
  position: fixed;
  z-index: 9999;
  width: 310px;
  height: 430px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  border-radius: 10px;
  transition: all 350ms ease;
}

.menu-active {
  opacity: 1 !important;
}

.menu-active-no-click {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.7);
  pointer-events: all !important;
}

#menu-install-pwa-ios {
  overflow: visible !important;
}

.fa-ios-arrow {
  transform: translateY(4px);
}

.theme-light .fa-ios-arrow {
  color: #FFF !important;
}

/*Sticky Utility / Secondary Classes*/
/*Rounded Borders*/
.rounded-0 {
  border-radius: 0px !important;
}

.rounded-xs {
  border-radius: 5px !important;
}

.rounded-s {
  border-radius: 8px !important;
}

.rounded-sm {
  border-radius: 10px !important;
}

.rounded-m {
  border-radius: 15px !important;
}

.rounded-l {
  border-radius: 30px !important;
}

.rounded-xl {
  border-radius: 50px !important;
}

/*Shadows*/
.shadow-none {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
}

.shadow-0 {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
}

.shadow-xs {
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.04) !important;
}

.shadow-s {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1) !important;
}

.shadow-m {
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.08) !important;
}

.shadow-l {
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.09) !important;
}

.shadow-xl {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08) !important;
}

/*Shadows*/
.border-xxs {
  border: solid 1px !important;
}

.border-xs {
  border: solid 2px !important;
}

.border-s {
  border: solid 3px !important;
}

.border-m {
  border: solid 4px !important;
}

.border-l {
  border: solid 5px !important;
}

.border-xl {
  border: solid 6px !important;
}

.border-xxl {
  border: solid 7px !important;
}

/*Line Height Control*/
.line-height-xs {
  line-height: 14px !important;
}

.line-height-s {
  line-height: 17px !important;
}

.line-height-sm {
  line-height: 21px !important;
}

.line-height-m {
  line-height: 24px !important;
}

.line-height-l {
  line-height: 26px !important;
}

.line-height-xl {
  line-height: 37px !important;
}

/*Text Shadow*/
.text-shadow-s {
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}

.text-shadow-l {
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

/*Boxed Text*/
.boxed-text-xl, .boxed-text-l, .boxed-text-m, .boxed-text-s {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.boxed-text-xl {
  width: 90%;
  max-width: 340px;
}

.boxed-text-l {
  width: 85%;
  max-width: 300px;
}

.boxed-text-m {
  width: 80%;
  max-width: 300px;
}

.boxed-text-s {
  width: 70%;
  max-width: 260px;
}

/*Font Weights*/
.font-200 {
  font-weight: 200;
}

.font-300 {
  font-weight: 300;
}

.font-400 {
  font-weight: 400;
}

.font-500 {
  font-weight: 500;
}

.font-600 {
  font-weight: 600;
}

.font-700 {
  font-weight: 700;
}

.font-800 {
  font-weight: 800;
}

.font-900 {
  font-weight: 900;
}

/*Opacity Values - Used for Contrasting Text, example opacity-30 will make the opacity 0.3*/
.opacity-10 {
  opacity: 0.1 !important;
}

.opacity-20 {
  opacity: 0.2 !important;
}

.opacity-30 {
  opacity: 0.3 !important;
}

.opacity-40 {
  opacity: 0.4 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-60 {
  opacity: 0.6 !important;
}

.opacity-70 {
  opacity: 0.7 !important;
}

.opacity-80 {
  opacity: 0.8 !important;
}

.opacity-85 {
  opacity: 0.85 !important;
}

.opacity-90 {
  opacity: 0.9 !important;
}

/*Font Array - Better Typography Control, example font-30 class will make the font size 30px*/
.font-8 {
  font-size: 8px !important;
}

.font-9 {
  font-size: 9px !important;
}

.font-10 {
  font-size: 10px !important;
}

.font-11 {
  font-size: 11px !important;
}

.font-12 {
  font-size: 12px !important;
}

.font-13 {
  font-size: 13px !important;
}

.font-14 {
  font-size: 14px !important;
}

.font-15 {
  font-size: 15px !important;
}

.font-16 {
  font-size: 16px !important;
}

.font-17 {
  font-size: 17px !important;
}

.font-18 {
  font-size: 18px !important;
}

.font-19 {
  font-size: 19px !important;
}

.font-20 {
  font-size: 20px !important;
}

.font-21 {
  font-size: 21px !important;
}

.font-22 {
  font-size: 22px !important;
}

.font-23 {
  font-size: 23px !important;
}

.font-24 {
  font-size: 24px !important;
}

.font-25 {
  font-size: 25px !important;
}

.font-26 {
  font-size: 26px !important;
}

.font-27 {
  font-size: 27px !important;
}

.font-28 {
  font-size: 28px !important;
}

.font-29 {
  font-size: 29px !important;
}

.font-30 {
  font-size: 30px !important;
}

.font-31 {
  font-size: 31px !important;
}

.font-32 {
  font-size: 32px !important;
}

.font-33 {
  font-size: 33px !important;
}

.font-34 {
  font-size: 34px !important;
}

.font-35 {
  font-size: 35px !important;
}

.font-36 {
  font-size: 36px !important;
}

.font-37 {
  font-size: 37px !important;
}

.font-38 {
  font-size: 38px !important;
}

.font-39 {
  font-size: 39px !important;
}

.font-40 {
  font-size: 40px !important;
}

/*Scaling Animation*/
@keyframes scale-animation {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.05, 1.05);
  }
  0% {
    transform: scale(1, 1);
  }
}
.scale-box {
  animation: scale-animation 1.5s;
  animation-iteration-count: infinite;
}

@keyframes scale-icon {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.3, 1.3);
  }
  0% {
    transform: scale(1, 1);
  }
}
.scale-icon {
  animation: scale-icon 1.5s;
  animation-iteration-count: infinite;
}

/*Control Classes*/
::-webkit-scrollbar {
  display: none;
}

img.mx-auto {
  display: block;
}

.disabled {
  display: none !important;
}

.no-click {
  pointer-events: none !important;
}

.no-outline {
  outline: none !important;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

/*Prealoder*/
/* ═══════════════════════════════════════════════════
   PRELOADER — logo breathing, no box, no spinner
   ═══════════════════════════════════════════════════ */
@keyframes breathe {
  0%   { transform: scale(1);    opacity: 1;    filter: drop-shadow(0 0 0px rgba(26,115,232,0)); }
  50%  { transform: scale(1.12); opacity: 0.82; filter: drop-shadow(0 0 18px rgba(26,115,232,.55)); }
  100% { transform: scale(1);    opacity: 1;    filter: drop-shadow(0 0 0px rgba(26,115,232,0)); }
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 220ms ease;
  /* frosted glass — light mode */
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#preloader .spinner-border {
  /* hide old spinner — kept in HTML for compat */
  display: none !important;
}
#preloader img,
#preloader-logo,
#preloader .spinner-border img {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  border-radius: 18px !important;
  object-fit: contain !important;
}
/* logo element injected by JS */
#preloader-logo {
  animation: breathe 2s ease-in-out infinite;
  will-change: transform, opacity, filter;
  user-select: none;
  pointer-events: none;
}

.preloader-hide {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 200ms ease !important;
}

/* dark mode */
.theme-light #preloader {
  background: rgba(255,255,255,0.75);
}
.theme-dark #preloader {
  background: rgba(15,17,23,0.80);
}


/*Buttons*/
.btn {
  transition: all 350ms ease;
}

.btn:hover {
  opacity: 0.9;
}

.btn-full {
  display: block;
}

.btn-xxs, .btn-xs, .btn-s, .btn-sm, .btn-m, .btn-l {
  font-size: 12px !important;
}

.btn-xxs {
  padding: 6px 10px !important;
}

.btn-xs {
  padding: 7px 14px !important;
}

.btn-s {
  padding: 8px 18px !important;
}

.btn-sm {
  padding: 10px 18px !important;
}

.btn-m {
  padding: 12px 20px !important;
}

.btn-l {
  padding: 14px 26px !important;
}

.btn-xl {
  padding: 15px 30px !important;
  font-size: 15px !important;
}

.btn-xxl {
  padding: 17px 34px !important;
  font-size: 17px !important;
}

.btn-uppercase {
  text-transform: uppercase;
}

.btn-center-xs {
  width: 100px;
  margin: 0 auto;
  display: block;
}

.btn-center-s {
  width: 120px;
  margin: 0 auto;
  display: block;
}

.btn-center-m {
  width: 160px;
  margin: 0 auto;
  display: block;
}

.btn-center-l {
  width: 220px;
  margin: 0 auto;
  display: block;
}

.btn-center-xl {
  width: 250px;
  margin: 0 auto;
  display: block;
}

.btn.bg-highlight {
  color: #FFF;
}

.btn-3d {
  transition: all 150ms ease;
  border: none;
  border-bottom: solid 4px;
}

.btn-3d:hover {
  border-width: 2px !important;
}

.btn:focus {
  outline: none !important;
}

.btn-margins {
  margin-left: 17px;
  margin-right: 17px;
  margin-bottom: 30px;
}

.under-slider-btn {
  z-index: 50;
  position: relative;
  margin-top: -20px;
}

.under-btn {
  z-index: 50;
  position: relative;
  margin-top: -20px !important;
}

.btn-icon:hover {
  color: #FFF;
}

.btn-icon {
  padding-left: 50px !important;
  overflow: hidden;
  position: relative;
}

.btn-icon i {
  position: absolute;
  left: 0px;
  top: 0px;
  line-height: 43px;
  width: 40px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/*Icons*/
.icon:hover {
  color: #FFF;
}

.icon {
  display: inline-block;
  position: relative;
  text-align: center;
}

.icon-xxs i {
  width: 32px;
  line-height: 32px;
  font-size: 13px;
}

.icon-xs i {
  width: 38px;
  line-height: 38px;
  font-size: 14px;
}

.icon-s i {
  width: 40px;
  line-height: 40px;
  font-size: 15px;
}

.icon-m i {
  width: 45px;
  line-height: 45px;
  font-size: 16px;
}

.icon-l i {
  width: 51px;
  line-height: 51px;
  font-size: 17px;
}

.icon-xl i {
  width: 55px;
  line-height: 55px;
  font-size: 18px;
}

.icon-xxl i {
  width: 60px;
  line-height: 60px;
  font-size: 19px;
}

.icon-center {
  display: block;
  margin: 0 auto;
}

/*Accordion Settings*/
.accordion * {
  outline: 0 !important;
  box-shadow: 0px !important;
  box-shadow: none !important;
}
.accordion .btn:first-child {
  width: 100%;
}
.accordion .card {
  transition: all 0ms ease !important;
}
.accordion button {
  transition: all 0ms ease !important;
}
.accordion [data-card-height] button {
  width: 100%;
}

.btn.accordion-btn {
  text-align: left !important;
  padding: 15px 17px;
  font-size: 13px;
  font-weight: 700;
}

.accordion-icon {
  float: right;
  transition: all 250ms ease;
  margin-top: 5px;
}

/*Offline Detector*/
.offline-message {
  position: fixed;
  transform: translateY(-200%);
  padding-bottom: 0px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  transition: all 350ms ease;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 9999;
  line-height: 55px;
}

.online-message {
  position: fixed;
  transform: translateY(-200%);
  padding-bottom: 0px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  transition: all 350ms ease;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 9999;
  line-height: 55px;
}

.is-on-homescreen .offline-message {
  padding-top: 30px !important;
}
.is-on-homescreen .online-message {
  padding-top: 30px !important;
}

.offline-message-active {
  transform: translateY(0%);
}

.online-message-active {
  transform: translateY(0%);
}

/*---Added to Home---*/
.add-to-home-visible {
  opacity: 1 !important;
  pointer-events: all !important;
}

.add-to-home {
  position: fixed;
  background-color: #000;
  z-index: 99;
  left: 15px;
  right: 15px;
  border-radius: 10px;
  height: 80px;
  opacity: 0;
  pointer-events: none;
  transition: all 250ms ease;
}
.add-to-home .close-add-to-home {
  pointer-events: none;
}
.add-to-home h1 {
  position: absolute;
  padding-left: 75px;
  padding-top: 8px;
  color: #FFF;
  font-size: 13px;
}
.add-to-home p {
  color: #ced4da;
  position: absolute;
  font-size: 11px;
  padding-right: 20px;
  padding-left: 75px;
  padding-top: 35px;
  line-height: 14px;
}
.add-to-home img {
  width: 45px;
  margin-top: 17px;
  margin-left: 15px;
}

.add-to-home-ios {
  bottom: 25px;
}
.add-to-home-ios i {
  width: 40px;
  text-align: center;
  position: absolute;
  font-size: 30px;
  left: 50%;
  bottom: -18px !important;
  margin-left: -21px;
  transform: rotate(180deg);
  color: #000;
  display: block;
}
.add-to-home-ios .close-add-to-home {
  position: absolute;
  right: 13px;
  top: 13px;
  transform: scale(0.5, 0.5);
}

.add-to-home-android {
  top: 20px;
}
.add-to-home-android i {
  width: 40px;
  text-align: center;
  position: absolute;
  top: -18px;
  right: 15px;
  font-size: 30px;
  margin-left: -20px;
  color: #000;
  display: block;
}
.add-to-home-android .close-add-to-home {
  position: absolute;
  right: 5px;
  top: 20px;
  transform: scale(0.5, 0.5);
}

/*Ads*/
.ad-300x50 {
  margin: 0 auto;
  width: 300px;
  height: 50px;
}

.ad-300x250 {
  margin: 0 auto;
  width: 300px;
  height: 250px;
}

.ad-300x50-fixed {
  left: 50%;
  margin-left: -150px;
  bottom: 60px;
  bottom: calc(65px + (constant(safe-area-inset-bottom))*1.1) !important;
  bottom: calc(65px + (env(safe-area-inset-bottom))*1.1) !important;
  position: fixed;
  z-index: 90;
}

.ad-time-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  line-height: 27px;
  text-align: center;
  border: solid 2px;
  border-radius: 30px;
}

/*Scroll Fixed Ads*/
.scroll-ad-visible {
  transform: translateY(0%) !important;
}

.is-on-homescreen .scroll-ad {
  bottom: 110px;
}

.scroll-ad {
  position: fixed;
  bottom: 75px;
  left: 10px;
  right: 10px;
  background-color: #FFF;
  z-index: 93;
  height: 80px;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  transform: translateY(150%);
  transition: all 350ms ease;
}
.scroll-ad img {
  width: 60px;
  position: absolute;
  margin: 10px;
  border-radius: 10px;
}
.scroll-ad h1 {
  display: block;
  font-size: 18px;
  padding: 7px 0px 0px 80px;
  margin-bottom: -3px;
}
.scroll-ad em {
  padding: 0px 85px 0px 80px;
  font-style: normal;
  font-size: 11px;
  opacity: 0.7;
  display: block;
  line-height: 15px;
}
.scroll-ad a {
  width: 60px;
  font-size: 9px;
  right: 15px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  position: absolute;
  top: 50%;
  border-radius: 5px;
  transform: translateY(-50%);
}

.alert h4 {
  padding-left: 47px;
  margin-bottom: -5px;
}
.alert button {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  text-align: center;
}
.alert button span {
  background-color: transparent;
}
.alert button:active {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
.alert button:focus {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
.alert span {
  background-color: rgba(255, 255, 255, 0.2);
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 47px;
}
.alert span i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.alert strong {
  padding-left: 47px;
  font-weight: 400;
}

/*Notifications*/
.notification {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 101;
  border-radius: 10px;
  opacity: 0.98;
  transform: translateY(-120%);
  transition: all 250ms ease;
}
.notification .notification-icon {
  padding: 5px 5px;
  display: block;
  background-color: #343a40;
}
.notification .notification-icon i:first-child {
  margin: 0px 5px 0px 10px;
  font-size: 10px;
}
.notification .notification-icon i:last-child {
  position: absolute;
  right: 0px;
  line-height: 30px;
  width: 40px;
  text-align: center;
}
.notification .notification-icon em {
  font-size: 11px;
  text-transform: uppercase;
  font-style: normal;
}
.notification h1 {
  margin: 10px 15px -7px 15px;
}
.notification p {
  line-height: 15px;
  margin: 5px 15px 18px 15px;
  color: #FFF;
}

.notification.show {
  transform: translateY(0%) !important;
}

.is-ios.is-on-homescreen .notification.show {
  transform: translateY(30px) !important;
}

.notification-android {
  left: 5px;
  right: 5px;
  top: 5px;
  border-radius: 3px;
}
.notification-android i {
  position: absolute;
  top: 50%;
  transform: translateY(-55%);
  width: 35px;
  margin-left: 15px;
  line-height: 35px;
  border-radius: 35px;
  text-align: center;
  font-size: 13px;
}
.notification-android h1 {
  padding-left: 55px;
}
.notification-android p {
  padding-right: 60px;
  padding-left: 55px;
  font-size: 12px;
}
.notification-android strong {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 10px;
  font-weight: 400;
  font-style: normal;
}
.notification-android .notification-buttons {
  width: 100%;
  margin-left: 70px;
  padding-top: 5px;
  border-top: solid 1px rgba(255, 255, 255, 0.1);
}
.notification-android .notification-buttons i {
  opacity: 0.6;
  font-size: 11px;
  position: relative;
  float: left;
  margin: 0px 10px 0px 0px;
  width: auto;
  transform: translateY(-22px);
}
.notification-android a {
  font-size: 11px;
  color: #FFF;
  text-transform: uppercase;
  text-align: left;
  font-weight: 500;
}

.notification-material {
  left: 0px;
  right: 0px;
  top: 0px;
  border-radius: 0px;
}
.notification-material strong {
  font-size: 10px;
  font-weight: 400;
}
.notification-material em {
  text-transform: none !important;
}
.notification-material .notification-icon {
  background-color: rgba(0, 0, 0, 0) !important;
  margin-bottom: -15px;
}
.notification-material img {
  position: absolute;
  width: 50px;
  border-radius: 50px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.notification-material p {
  padding-right: 50px;
}

/*Back to Top*/
.content .back-to-top-badge {
  transform: translate(0, 0) !important;
  width: 130px;
  margin: 10px auto 20px auto !important;
  left: auto;
  bottom: auto;
  display: block;
  position: relative !important;
}
.content .back-to-top-icon {
  transform: scale(1, 1) translate(0, 0px) !important;
  margin: 0px auto 30px auto;
  right: auto;
  bottom: auto;
  display: block;
  position: relative !important;
}

.back-to-top-badge {
  position: fixed;
  z-index: 90;
  bottom: 80px;
  left: 50%;
  transform: translate(-50%, 70px);
  display: inline-block;
  padding: 5px 20px;
  border-radius: 35px;
  color: #FFF;
  text-align: center;
  font-size: 12px;
  transition: all 350ms ease;
}
.back-to-top-badge i {
  padding: 0px 10px 0px 0px;
}

.back-to-top-icon {
  position: fixed;
  z-index: 9999;
  bottom: 70px;
  right: 15px;
  display: inline-block;
  width: 35px;
  line-height: 35px;
  border-radius: 35px;
  color: #FFF;
  text-align: center;
  font-size: 12px;
  transform: scale(0, 0);
  transition: all 350ms ease;
}
.back-to-top-icon span {
  display: none;
}

.back-to-top-badge.back-to-top-visible {
  transform: translate(-50%, 0px);
}

.back-to-top-icon.back-to-top-visible {
  transform: scale(1, 1);
}

.back-to-top-icon-square {
  border-radius: 0px;
}

.back-to-top-icon-round {
  border-radius: 5px;
}

.back-to-top-icon-circle {
  border-radius: 40px;
}

/*Extending Cards Features*/
.row {
  margin-bottom: 30px;
}

.card {
  -webkit-transform: translate3d(0, 0, 0);
  background-size: cover;
  border: 0px !important;
  max-height: 150000px;
  margin-bottom: 30px;
  background-position: center center !important;
}

.cover-slider .card {
  margin-bottom: 0px !important;
}

[data-card-height=cover].card {
  margin-bottom: 0px !important;
}

.card-style {
  overflow: hidden;
  margin: 0px 16px 30px 16px;
  border-radius: 15px;
  border: none;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
}
.card-style .card-body {
  padding: 15px;
}

.card-style .card-overlay {
  border-radius: 15px;
}

.card-body {
  z-index: 2;
}

.card-header {
  z-index: 2;
}

.card-footer {
  z-index: 2;
}

.card-top {
  z-index: 2;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
}

.card-bottom {
  z-index: 2;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.card-center {
  z-index: 2;
  position: absolute;
  display: block;
  left: 0px;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.card-overlay {
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  z-index: 1;
}

.card .img-fluid {
  width: 100% !important;
}

.card-image {
  display: block;
  width: 100%;
  min-height: 250px;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.card-image img {
  transition: all 450ms ease;
}

.card-overflow {
  overflow: visible !important;
  z-index: 20;
}

[data-card-height] p {
  padding-bottom: 0px;
}

/*Card Effects*/
.card-scale-image {
  transform: scale(1.05, 1.05) !important;
}

.card-rotate-image {
  transform: rotate(5deg) scale(1.2, 1.2) !important;
}

.card-grayscale-image {
  filter: grayscale(100%);
}

.card-blur-image {
  filter: blur(5px);
}

.card-hide-image {
  opacity: 0 !important;
}

.card-hide div {
  transition: all 350ms ease;
}
.card-hide * {
  transition: all 350ms ease;
}

.polaroid-effect {
  background-color: #FFF;
  padding: 5px;
  border: solid 1px rgba(0, 0, 0, 0.1);
}

.card-scale * {
  transition: all 350ms ease;
}

.card-rotate * {
  transition: all 350ms ease;
}

.card-grayscale * {
  transition: all 350ms ease;
}

.card-blur * {
  transition: all 350ms ease;
}

.card-overlay {
  background-position: center center;
  background-size: cover !important;
}

.card-overlay-infinite {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 2000px;
  height: 100%;
  z-index: 0;
  animation: infiniteBG 600s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background-size: cover;
  background-repeat: repeat;
  background-position: left bottom;
  transform: translateX(0px);
}

@keyframes infiniteBG {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-1400px);
  }
  100% {
    transform: translateX(0px);
  }
}
.over-card {
  z-index: 10;
  position: relative;
  overflow: visible !important;
}

.under-slider {
  z-index: 2;
  position: relative;
  padding-top: 100px;
  transform: translateY(-120px);
  margin-bottom: -100px;
}

.over-slider, .slider-over {
  z-index: 5;
  position: relative !important;
}

/*Shadow Cards - Added in Sticky 4.5*/
/*Shadow Backgrounds*/
.shadow-bg:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -1;
}

.shadow-bg {
  background-size: cover;
  position: relative;
  z-index: 10;
  overflow: visible !important;
}

.shadow-bg-xs::after {
  transform: scale(0.75) translateY(5px) translateZ(0px);
  filter: blur(8px);
}

.shadow-bg-s::after {
  transform: scale(0.8) translateY(5px) translateZ(0px);
  filter: blur(12px);
}

.shadow-bg-m::after {
  transform: scale(0.85) translateY(7px) translateZ(0px);
  filter: blur(12px);
}

.shadow-bg-l::after {
  transform: scale(0.95) translateY(10px) translateZ(0px);
  filter: blur(12px);
}

.theme-dark .shadow-card:after {
  opacity: 0.12 !important;
}

.theme-dark #footer-bar .circle-nav-2::before,
.theme-dark .shadow-bg:after {
  opacity: 0.5 !important;
}

/*Shadow Cards*/
.shadow-card .card-top,
.shadow-card .card-center,
.shadow-card .card-bottom {
  z-index: 2;
}

.shadow-card .card-overlay {
  z-index: 1;
}

.shadow-card::before {
  background-image: inherit;
  content: "";
  top: 0px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-size: cover;
  z-index: 0;
}

.shadow-card::after {
  transform: scale(0.95) translateY(10px) translateZ(-36px);
  filter: blur(12px);
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  background-color: inherit;
  z-index: -1;
}

.shadow-card {
  z-index: 5;
  overflow: visible;
}

.shadow-card .card-overlay {
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

.shadow-card-s::after {
  transform: scale(0.8) translateY(15px) translateZ(-26px);
  filter: blur(12px);
}

.shadow-card-m::after {
  transform: scale(0.85) translateY(15px) translateZ(-36px);
  filter: blur(12px);
}

.shadow-card-l::after {
  transform: scale(0.95) translateY(15px) translateZ(-46px);
  filter: blur(12px);
}

.theme-light .shadow-card:after {
  opacity: 0.8;
}

.theme-dark .shadow-card:after {
  opacity: 0.3;
}

/*Chips*/
.chip {
  display: inline-block;
  margin: 0px 10px 15px 0px;
  border-radius: 30px;
  padding-right: 15px;
}
.chip * {
  font-size: 12px;
}
.chip span {
  line-height: 29px;
}
.chip i {
  width: 30px;
  line-height: 30px;
  border-radius: 30px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}
.chip img {
  display: inline;
  margin-right: 9px;
  border-radius: 30px;
  width: 31px;
  line-height: 31px;
}

.chip-small {
  transform: scale(1, 1);
}

.chip-medium {
  transform: scale(1.05, 1.05);
}

.chip-large {
  transform: scale(1.15, 1.15);
}

/*Dividers*/
.divider {
  height: 1px;
  display: block;
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.divider-margins {
  margin: 0px 17px 30px 17px;
}

.divider-icon {
  height: 1px;
  display: block;
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 50px;
}
.divider-icon i {
  position: absolute;
  width: 50px;
  background-color: #f0f0f0;
  text-align: center;
  margin-top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.content-boxed .divider-icon i {
  background-color: #f0f0f0;
}

.divider-small {
  height: 2px;
  width: 80px;
  margin: auto;
}

/*Custom Switches*/
.custom-control * {
  cursor: pointer;
  user-select: none !important;
}

.switch-is-unchecked {
  display: none;
}

.switch-is-checked {
  display: block;
}

.scale-switch {
  transform: scale(0.9, 0.9);
}

.small-switch {
  transform: scale(0.8, 0.8);
}

.menu .custom-control {
  margin-top: -42px !important;
}

/*iOS Switcher*/
.ios-switch {
  margin-right: -32px;
  margin-top: 12px !important;
  position: relative;
  padding-left: 10px;
}
.ios-switch label::before {
  content: "";
  display: block !important;
  background-color: #e8e9ea;
  pointer-events: all;
  margin-top: -5px;
  margin-left: -1px;
  width: 58px !important;
  height: 32px !important;
  border-radius: 50px !important;
  transition: all 250ms ease;
}
.ios-switch label::after {
  content: "";
  display: block !important;
  margin-top: -31px;
  z-index: 6;
  width: 30px !important;
  height: 30px !important;
  transition: all 250ms ease;
  border-radius: 50px !important;
  background-color: #FFF;
  border: solid 1px rgba(152, 152, 152, 0.4);
  transition: all 250ms ease;
}
.ios-switch input {
  display: none;
}

.ios-input:checked ~ .custom-control-label::after {
  -webkit-transform: translateX(26px) !important;
}
.ios-input:checked ~ .custom-control-label::before {
  background-color: #8CC152 !important;
}

.ios-switch-icon label::before {
  background-color: #21b2c1 !important;
}
.ios-switch-icon i {
  line-height: 32px;
  pointer-events: none;
  z-index: 5;
  position: absolute;
  left: 20px;
  margin-top: -5px !important;
}
.ios-switch-icon i:last-child {
  z-index: 5;
  position: absolute;
  margin-left: 26px;
}
.ios-switch-icon span {
  font-size: 9px;
  font-weight: 700;
  color: #FFF;
  line-height: 32px;
  pointer-events: none;
  z-index: 5;
  position: absolute;
  margin-top: -5px !important;
  left: 19px;
}
.ios-switch-icon span:last-child {
  z-index: 5;
  position: absolute;
  margin-left: 24px;
}

/*Android Switcher*/
.android-switch {
  padding-left: 10px;
  margin-right: -32px;
}
.android-switch label::before {
  display: block !important;
  content: "";
  pointer-events: all;
  margin-top: 5px;
  margin-left: -2px;
  width: 53px !important;
  height: 17px !important;
  border-radius: 50px !important;
  background-color: #AAB2BD;
  transition: all 250ms ease;
}
.android-switch label::after {
  display: block !important;
  content: "";
  border: solid 1px rgba(0, 0, 0, 0.1) !important;
  margin-top: -22px;
  margin-left: -3px;
  width: 28px !important;
  height: 28px !important;
  background-color: #FFF !important;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2) !important;
  border-radius: 50px !important;
  transition: all 250ms ease;
}
.android-switch input {
  display: none !important;
}

.android-input {
  transform: translateY(1px) !important;
}
.android-input:checked ~ .custom-control-label::after {
  background-color: #458be3 !important;
  border: none !important;
  -webkit-transform: translateX(30px) !important;
}
.android-input:checked ~ .custom-control-label::before {
  background-color: #458be3 !important;
}

[data-activate] {
  cursor: pointer;
  display: block;
  width: 100%;
}

/*Classic Switcher*/
.classic-switch input {
  display: none;
}
.classic-switch label::before {
  pointer-events: all;
  width: 40px !important;
  height: 40px !important;
  transform: translateX(11px);
  margin-top: -10px;
  border: none;
  background-color: rgba(0, 0, 0, 0) !important;
}
.classic-switch i {
  pointer-events: none;
  transition: all 250ms ease;
}

.classic-input:checked ~ .custom-control-label::after {
  -webkit-transform: translateX(26px) !important;
}
.classic-input:checked ~ .fa-plus {
  color: #21b2c1 !important;
  transform: rotate(45deg);
  transition: all 250ms ease;
}
.classic-input:checked ~ .fa-angle-down {
  color: #21b2c1 !important;
  transform: rotate(180deg);
  transition: all 250ms ease;
}
.classic-input:checked ~ .fa-circle {
  color: #21b2c1 !important;
  transform: scale(1.3, 1.3);
  transition: all 250ms ease;
}

/*---Checkboxes & Radios---*/
.icon-check {
  margin-left: -30px;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
  width: auto;
  display: block;
}
.icon-check input {
  position: absolute !important;
  transform: translateX(-10000px);
}
.icon-check input:checked ~ .icon-check-1 {
  opacity: 0 !important;
  display: none !important;
}
.icon-check input:checked ~ .icon-check-2 {
  display: block;
}
.icon-check .fa-check-circle {
  display: none;
}
.icon-check i {
  width: 20px;
  text-align: center;
  pointer-events: none;
  position: absolute;
  left: 30px;
  top: 1px;
  height: 24px;
  line-height: 24px;
}
.icon-check label {
  cursor: pointer;
  font-size: 13px;
  padding: 0px 15px 0px 40px;
}
.icon-check .icon-check-2 {
  display: none;
}

/*Font Awesome Default*/
.fac {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  display: block;
  vertical-align: middle;
  font-size: 14px;
}
.fac label {
  margin: 0em 1em 0em 0em;
  padding-left: 1.5em;
  cursor: pointer;
  font-weight: inherit;
}
.fac > input + label:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  margin-top: 0.5px;
  transition: opacity 150ms ease-in-out;
}
.fac > input:checked + label:before {
  opacity: 1;
}
.fac > span::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  margin-top: 0.5px;
}
.fac input {
  display: none;
}

.checkboxes-demo .fac {
  display: block;
}

.fac-checkbox > input + label:before {
  opacity: 0;
}
.fac-checkbox > input:checked + label:before {
  opacity: 1;
}
.fac-checkbox > span::after {
  content: "";
  opacity: 1;
}
.fac-checkbox > input[type=checkbox] + label:before {
  content: "";
  color: #FFF !important;
  font-size: 10px !important;
  padding-left: 2px;
}

.fac-checkbox-round > input + label:before {
  opacity: 0;
}
.fac-checkbox-round > span::after {
  content: "";
}
.fac-checkbox-round > input[type=checkbox] + label:before {
  content: "";
  color: #FFF !important;
  font-size: 8px !important;
  padding-left: 3px;
}

.fac-radio > input + label:before {
  opacity: 0;
}
.fac-radio > input:checked + label:before {
  opacity: 1;
}
.fac-radio > span::after {
  content: "";
}
.fac-radio > input[type=radio] + label:before {
  content: "";
  color: #FFF !important;
  font-size: 10px !important;
  padding-left: 2px;
}

.fac-checkbox-o > input + label:before {
  opacity: 0;
}
.fac-checkbox-o > input:checked + label:before {
  opacity: 1;
}

.fac-checkbox-round-o > input + label:before {
  opacity: 0;
}
.fac-checkbox-round-o > input:checked + label:before {
  opacity: 1;
}

.fac-default > input + label:before {
  color: #adb5bd;
}
.fac-default > span::after {
  color: #adb5bd;
}

.fac-blue > input + label:before {
  color: #0d6efd;
}
.fac-blue > span::after {
  color: #0d6efd;
}

.fac-green > input + label:before {
  color: #198754;
}
.fac-green > span::after {
  color: #198754;
}

.fac-orange > input + label:before {
  color: #ffc107;
}
.fac-orange > span::after {
  color: #ffc107;
}

.fac-red > input + label:before {
  color: #dc3545;
}
.fac-red > span::after {
  color: #dc3545;
}

.fac-radio-full > span::after {
  content: "";
  font-size: 12px !important;
}
.fac-radio-full > input[type=radio] + label:before {
  content: "\c";
}

/*Interests Checks*/
.theme-dark .interest-check label {
  background-color: #070707 !important;
}

.interest-check {
  margin-left: -20px;
  margin-right: 10px;
  margin-bottom: 35px;
  height: 25px;
  cursor: pointer;
  position: relative;
  width: auto;
  display: inline-block;
}
.interest-check input {
  position: absolute !important;
  transform: translateX(-150524px);
}
.interest-check input:checked ~ .fa {
  display: block !important;
}
.interest-check input:checked ~ .fa:last-child {
  display: none !important;
}
.interest-check input:checked ~ .fab:last-child {
  display: none !important;
}
.interest-check input:checked ~ .fas:last-child {
  display: none !important;
}
.interest-check input:checked ~ .far:last-child {
  display: none !important;
}
.interest-check .fa-check-circle {
  display: none;
}
.interest-check i {
  width: 20px;
  text-align: center;
  pointer-events: none;
  position: absolute;
  left: 30px;
  top: 0px;
  height: 46px;
  line-height: 46px;
}
.interest-check label {
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  font-family: "Source Sans Pro", sans-serif;
  padding: 10px 15px 10px 40px;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.09), 0 5px 15px 0 rgba(0, 0, 0, 0.02) !important;
}

input[type=range] {
  -webkit-appearance: none;
  height: 20px;
  width: 100%;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #F26B5E;
  position: relative;
  z-index: 3;
}
input[type=range]::-webkit-slider-thumb:after {
  content: " ";
  height: 10px;
  position: absolute;
  z-index: 1;
  right: 20px;
  top: 5px;
  background: #ff5b32;
  background: linear-gradient(to right, #f088fc 1%, #AC6CFF 70%);
}

[data-bs-toggle]:focus,
[data-bs-dismiss]:focus {
  outline: none !important;
}

/*File Upload*/
.upload-file {
  text-indent: -999px;
  outline: none;
  width: 100%;
  height: 45px;
  color: rgba(0, 0, 0, 0) !important;
}

.upload-file-text {
  pointer-events: none;
  margin-top: -36px !important;
  text-align: center;
  color: #FFF;
  height: 10px;
  text-transform: uppercase;
  font-weight: 900;
}

.file-data input[type=file] {
  font-size: 0px !important;
}

input {
  font-size: 12px !important;
}
input::placeholder {
  font-size: 12px !important;
}
input:focus {
  outline: none;
}

select:focus {
  outline: none;
}

textarea:focus {
  outline: none;
}

button:focus {
  outline: none;
}

.tooltip {
  font-size: 13px;
}

code {
  font-size: 11px;
  line-height: 22px;
}

.stepper {
  width: 102px;
  border: solid 1px rgba(0, 0, 0, 0.1);
}
.stepper:after {
  content: "";
  display: table;
  clear: both;
}
.stepper input {
  height: 33px;
  width: 33px;
  float: left;
  border: none !important;
  text-align: center;
  display: block;
  line-height: 33px;
  font-size: 11px !important;
  background-color: transparent;
}
.stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper a {
  text-align: center;
  width: 33px;
  height: 33px;
  line-height: 33px;
  font-size: 9px;
}
.stepper a:first-child {
  float: left;
  border-right: solid 1px rgba(0, 0, 0, 0.1);
}
.stepper a:last-child {
  float: right;
  border-left: solid 1px rgba(0, 0, 0, 0.1);
}

.btn, input, select {
  box-shadow: none !important;
  outline: 0px !important;
}

input:hover,
input:focus,
input:active,
select:hover,
select:focus,
select:active,
select option,
textarea:hover,
textarea:focus,
textarea:active,
.btn:hover,
.btn:focus,
.btn:active,
button:hover,
button:focus,
button:active {
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

.theme-light input, select, textarea {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.input-style {
  position: relative;
  margin-bottom: 15px !important;
}

.input-style input,
.input-style select,
.input-style textarea {
  font-size: 12px;
  width: 100%;
  line-height: 45px;
  height: 45px;
  border-top-width: 0px;
  border-right-width: 0px;
  border-left-width: 0px;
  padding: 0px;
  border-radius: 0px;
}

.input-style select,
.input-style select option,
.input-style select option:disabled {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.input-style label {
  opacity: 0;
  left: 0px !important;
  transform: translateX(30px);
  position: absolute;
  top: -12px;
  height: 10px;
  font-size: 10px;
  transition: all 150ms ease;
  background-color: #FFF;
}

.input-style-active label {
  opacity: 1;
  transform: none !important;
}

.input-style.has-icon i:first-child {
  position: absolute;
  top: 50%;
  width: 10px;
  text-align: center;
  margin-top: -8px;
}

.input-style.has-icon.has-borders i:first-child {
  position: absolute;
  top: 50%;
  width: 10px;
  padding-left: 15px !important;
  text-align: center;
  margin-top: -7px;
}

.input-style.has-icon.has-borders input,
.input-style.has-icon.has-borders select,
.input-style.has-icon.has-borders textarea {
  padding-left: 35px !important;
}

.input-style.has-icon input,
.input-style.has-icon select,
.input-style.has-icon textarea {
  padding-left: 25px;
}

.input-style input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0.3;
}

.input-style textarea {
  line-height: 20px !important;
  padding-top: 15px !important;
  transition: all 250ms ease !important;
}

.input-style select {
  color: inherit;
}

.input-style input[type=date] {
  color: inherit;
  width: calc(100vw - 64px);
  display: block;
  appearance: none;
  -webkit-appearance: none;
  padding-top: 2px;
}

.input-style em,
.input-style span,
.input-style .valid,
.input-style .invalid {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: 5px;
  pointer-events: none;
}

.input-style em,
.input-style span {
  margin-top: -12px;
  font-size: 10px;
  font-style: normal;
  opacity: 0.3;
}

.input-style.has-borders input,
.input-style.has-borders select,
.input-style.has-borders textarea {
  height: 53px;
  border-left-width: 1px !important;
  border-right-width: 1px !important;
  border-top-width: 1px !important;
  padding-left: 13px !important;
  padding-right: 10px !important;
  border-radius: 10px !important;
}

.input-style.has-borders .valid,
.input-style.has-borders .invalid,
.input-style.has-borders span,
.input-style.has-borders em {
  margin-right: 10px;
}

.input-style.input-style-active label {
  left: 4px !important;
  transform: translateX(-14px) !important;
  position: absolute;
  padding: 0px 8px !important;
  height: 23px;
  font-size: 12px;
  transition: all 250ms ease;
  background-color: #FFF;
}

.input-style.has-borders.input-style-active label {
  margin-left: 14px !important;
}

.input-style textarea:focus {
  height: 150px;
  transition: all 250ms ease !important;
}

.input-style.no-borders.input-style-always-active label {
  opacity: 1;
  left: 6px !important;
  transform: translateX(-14px) !important;
  margin-left: 0px !important;
  position: absolute;
  padding: 0px 8px !important;
  height: 23px;
  font-size: 12px;
  transition: all 250ms ease;
  background-color: #FFF;
}

.input-style.has-borders.input-style-always-active label {
  opacity: 1;
  left: 23px !important;
  transform: translateX(-14px) !important;
  margin-left: 0px !important;
  position: absolute;
  padding: 0px 5px !important;
  height: 23px;
  font-size: 12px;
  transition: all 250ms ease;
  background-color: #FFF;
}

/*Remove Number Arrows*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.input-transparent * {
  color: #FFF !important;
  background-color: transparent !important;
}

.input-transparent.no-borders input {
  border-bottom-width: 1px !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.device-is-android .input-style input[type=date] {
  color: inherit !important;
  line-height: 25px !important;
  padding-top: 12px !important;
  height: 55px !important;
  transform: translateY(7px) translateX(0px) !important;
  margin-bottom: 30px !important;
}

.device-is-android .input-style input[type=date] ~ label.color-highlight {
  margin-top: 7px !important;
}

.otp {
  width: 50px;
  height: 50px;
  border: solid 1px #cacaca;
}

.otp:focus, .otp:active {
  outline: solid 1px #000 !important;
}

.min-ios15 select {
  background-color: inherit !important;
}

.min-ios15 input[type=date] {
  text-align: left !important;
  text-indent: calc(-100% + 70px) !important;
}

/*Range Sliders*/
.ios-slider {
  height: 40px !important;
  background: linear-gradient(to right, #5D9CEC 0%, #5D9CEC 100%);
  background-size: 100% 3px;
  background-position: center;
  background-repeat: no-repeat;
}
.ios-slider::-webkit-slider-thumb {
  background-color: #FFF !important;
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  height: 25px !important;
  width: 25px !important;
  box-shadow: -3px 3px 10px 1px rgba(0, 0, 0, 0.2) !important;
}

.material-slider {
  height: 40px !important;
  background: linear-gradient(to right, #CCD1D9 0%, #CCD1D9 100%);
  background-size: 100% 18px;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0px 3px 0px 3px;
}
.material-slider::-webkit-slider-thumb {
  background-color: #1f1f1f !important;
  border: solid 1px rgba(0, 0, 0, 0.1);
  height: 10px !important;
  width: 30px !important;
}

.classic-slider {
  height: 20px !important;
  background-color: #FFF;
  border: solid 1px rgba(0, 0, 0, 0.1);
  border-radius: 30px !important;
  background-size: 100% 25px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
  padding: 0px 3px 0px 3px;
  -webkit-box-shadow: inset 0 2px 2px 1px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 2px 2px 1px rgba(0, 0, 0, 0.1);
}
.classic-slider::-webkit-slider-thumb {
  background-color: #0d6efd !important;
  border: solid 1px rgba(0, 0, 0, 0);
  height: 16px !important;
  border-radius: 20px;
  width: 16px !important;
  box-shadow: -3px 3px 10px 1px rgba(0, 0, 0, 0.2) !important;
}

.range-slider-icons {
  padding: 0px 30px 0px 30px;
}

.range-slider.range-slider-icons i {
  position: absolute;
  top: 0px;
  height: 44px;
  line-height: 44px;
  text-align: center;
}

.range-slider {
  position: relative;
}
.range-slider .fa-range-icon-1 {
  left: 0px;
}
.range-slider .fa-range-icon-2 {
  right: 0px;
}

/*List Groups*/
.list-custom-small {
  line-height: 50px;
}
.list-custom-small .badge {
  position: absolute;
  right: 15px;
  margin-top: 16px !important;
  font-size: 9px;
  padding: 5px 8px 5px 8px;
  font-weight: 700;
}
.list-custom-small a {
  color: #1f1f1f;
  font-weight: 500;
  font-size: 13px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
.list-custom-small a i:first-child {
  margin-left: 0px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  text-align: center;
  float: left;
  margin-right: 10px;
}
.list-custom-small a i:last-child {
  float: right;
  font-size: 10px;
  opacity: 0.5;
}
.list-custom-small i {
  line-height: 50px;
}
.list-custom-small .custom-control {
  z-index: 10;
  position: absolute;
  right: 40px;
  margin-top: -38px !important;
}
.list-custom-small .custom-control input {
  transform: translateY(-5px) !important;
}

.menu .list-custom-small a i:first-child {
  margin-left: 6px;
}

.list-custom-large a {
  line-height: 70px;
  color: #1f1f1f;
  font-weight: 500;
  font-size: 13px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
.list-custom-large a span:not(.badge) {
  font-size: 14px;
  position: absolute;
  margin-top: -6px;
}
.list-custom-large a strong {
  font-size: 7px;
  position: absolute;
  font-size: 11px;
  margin-top: 10px;
  color: #adb5bd;
  font-weight: 500;
}
.list-custom-large a i:first-child {
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: 21px;
  text-align: center;
  float: left;
  margin-right: 15px;
}
.list-custom-large a i:last-child {
  float: right;
  font-size: 10px;
}
.list-custom-large .badge {
  position: absolute;
  right: 10px;
  margin-top: 30px;
  font-size: 9px;
  padding: 5px 8px 5px 8px;
  font-weight: 700;
}
.list-custom-large i {
  line-height: 74px;
}
.list-custom-large .custom-control {
  z-index: 10;
  position: absolute;
  right: 40px;
  margin-top: 22px;
}
.list-custom-large .custom-control input {
  transform: translateY(-12px) !important;
}

.list-boxes a {
  line-height: 60px;
  margin-bottom: 10px;
  color: #1f1f1f;
  font-weight: 500;
  font-size: 13px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
.list-boxes a span:not(.badge) {
  padding-left: 10px;
  font-size: 14px;
  position: absolute;
  margin-top: -4px;
}
.list-boxes a strong {
  padding-left: 10px;
  font-size: 7px;
  position: absolute;
  font-size: 11px;
  margin-top: 10px;
  color: #6c757d;
  font-weight: 500;
}
.list-boxes a i:first-child {
  width: 40px;
  float: left;
  padding-left: 15px;
}
.list-boxes a i:last-child {
  float: right;
  font-size: 16px;
  margin-top: -5px;
  margin-right: 15px;
}
.list-boxes a u {
  position: absolute;
  right: 0px;
  margin-right: 9px;
  width: 60px;
  font-size: 7px;
  text-align: center;
  margin-top: 13px;
  text-decoration: none;
}
.list-boxes .badge {
  position: absolute;
  right: 10px;
  margin-top: 30px;
  font-size: 9px;
  padding: 5px 8px 5px 8px;
  font-weight: 700;
}
.list-boxes i {
  line-height: 64px;
}

.short-border {
  margin-left: 45px;
}
.short-border i:first-child {
  margin-left: -45px;
  margin-top: 23px;
}

.list-group .badge {
  z-index: 2;
}

.list-icon-0 a i:first-child {
  margin-left: -3px !important;
}

.icon-list {
  margin-left: 0px;
  padding-left: 0px;
}
.icon-list li {
  list-style: none;
}
.icon-list li i {
  padding-right: 10px;
}

/*Badge Text in Lists*/
.badge-text {
  margin-top: 13px !important;
  transform: translateY(-3px);
  padding-right: 20px !important;
}

/*List Groups*/
.check-visited .visited-link i:last-child::before {
  opacity: 0;
}

.check-visited .visited-link i:last-child::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 13px;
  font-size: 16px;
  margin-top: 0.5px;
  content: "";
  opacity: 1;
  color: #A0D468;
}

.list-custom-small {
  line-height: 50px;
}

/*Pricing*/
.pricing-1 {
  max-width: 280px;
  margin: 0 auto 30px auto;
  border: solid 1px rgba(0, 0, 0, 0.05);
  padding: 20px 0px 30px 0px;
}
.pricing-1 * {
  list-style: none;
}
.pricing-1 .pricing-icon {
  font-size: 50px;
}
.pricing-1 .pricing-title {
  font-size: 32px;
  padding: 20px 0px 0px 0px;
}
.pricing-1 .pricing-value {
  font-size: 40px;
  font-weight: 300;
  padding: 20px 0px 0px 0px;
}
.pricing-1 .pricing-value sup {
  font-size: 12px;
  top: -18px;
}
.pricing-1 .pricing-value sup:first-child {
  padding-right: 5px;
  top: -13px;
  font-size: 20px;
}
.pricing-1 .pricing-subtitle {
  opacity: 0.6;
  font-size: 11px;
  line-height: 18px;
  font-weight: 300;
  padding: 0px 0px 10px 0px;
}
.pricing-1 .pricing-list {
  padding: 0px;
}
.pricing-1 .pricing-list li {
  line-height: 40px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
}
.pricing-1 .pricing-list li:last-child {
  border-bottom: none;
  margin-bottom: -20px;
}

.pricing-2 {
  max-width: 280px;
  margin: 0 auto 30px auto;
  border: solid 1px rgba(0, 0, 0, 0.05);
  padding: 0px 0px 10px 0px;
  overflow: hidden;
}
.pricing-2 * {
  list-style: none;
}
.pricing-2 .pricing-icon {
  font-size: 50px;
  padding: 10px 0px 10px 0px;
}
.pricing-2 .pricing-title {
  font-size: 25px;
  padding: 15px 0px 15px 0px;
  margin: -10px 0px 20px 0px;
}
.pricing-2 .pricing-overtitle {
  font-size: 25px;
  padding: 15px 0px 15px 0px;
  margin: -10px 0px 0px 0px;
}
.pricing-2 .pricing-value {
  font-size: 43px;
  padding: 15px 0px 0px 0px;
}
.pricing-2 .pricing-value sup {
  font-size: 12px;
  top: -18px;
}
.pricing-2 .pricing-value sup:first-child {
  padding-right: 5px;
  top: -13px;
  font-size: 20px;
}
.pricing-2 .pricing-subtitle {
  font-size: 11px;
  line-height: 18px;
  font-weight: 400;
  padding: 0px 0px 0px 0px;
}
.pricing-2 .pricing-list {
  padding: 0px;
}
.pricing-2 .pricing-list li {
  line-height: 40px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.04);
  font-size: 14px;
  font-weight: 500;
}
.pricing-2 .pricing-list li:last-child {
  border-bottom: none;
}

.pricing-3 {
  max-width: 280px;
  margin: 0 auto 30px auto;
  border: solid 1px rgba(0, 0, 0, 0.05);
  padding: 0px 0px 10px 0px;
  overflow: hidden;
}
.pricing-3 * {
  list-style: none;
}
.pricing-3 .btn {
  max-width: 90%;
  margin: -10px auto 10px auto;
}
.pricing-3 .pricing-icon {
  font-size: 50px;
}
.pricing-3 .pricing-title {
  font-size: 28px;
  padding: 30px 0px 0px 20px;
}
.pricing-3 .pricing-value {
  text-align: center;
  font-size: 40px;
  font-weight: 300;
  padding: 20px 0px 20px 0px;
}
.pricing-3 .pricing-value sup {
  font-size: 12px;
  top: -18px;
}
.pricing-3 .pricing-value sup:first-child {
  padding-right: 5px;
  top: -13px;
  font-size: 20px;
}
.pricing-3 .pricing-subtitle {
  opacity: 0.6;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  padding: 0px 0px 30px 20px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
.pricing-3 .pricing-list {
  padding: 0px;
}
.pricing-3 .pricing-list i {
  padding-right: 20px;
  width: 30px;
}
.pricing-3 .pricing-list li {
  line-height: 50px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
  padding: 0px 0px 0px 20px;
}

.pricing-4 {
  max-width: 280px;
  margin: 0 auto 30px auto;
  border: solid 1px rgba(0, 0, 0, 0.05);
  padding: 0px 0px 10px 0px;
  overflow: hidden;
}
.pricing-4 * {
  list-style: none;
}
.pricing-4 .pricing-title {
  font-size: 18px;
  padding: 15px 0px 15px 0px;
  margin: 0px 0px 0px 0px;
}
.pricing-4 .pricing-value {
  font-size: 43px;
  padding: 30px 0px 20px 0px;
}
.pricing-4 .pricing-value sup {
  font-size: 12px;
  top: -18px;
}
.pricing-4 .pricing-value sup:first-child {
  padding-right: 5px;
  top: -13px;
  font-size: 20px;
}
.pricing-4 .pricing-subtitle {
  font-size: 11px;
  line-height: 18px;
  font-weight: 400;
  padding: 0px 0px 20px 0px;
  margin-top: -10px;
}
.pricing-4 .pricing-list {
  padding: 0px;
  margin-bottom: 20px;
}
.pricing-4 .pricing-list li {
  line-height: 40px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 500;
}
.pricing-4 .pricing-list li:last-child {
  border-bottom: none;
}

.pricing-single {
  max-width: 280px;
  margin: 0 auto;
}

.pricing-double-1 {
  width: 48%;
  float: left;
  margin-right: 4%;
}

.pricing-double-2 {
  width: 48%;
  float: left;
}

.pricing-list {
  list-style: none !important;
}
.pricing-list ul {
  list-style: none !important;
}
.pricing-list li {
  list-style: none !important;
}

/*Toasts*/
.toast-tiny {
  width: 150px;
  z-index: 90;
  position: fixed;
  left: 50%;
  line-height: 35px;
  padding: 0px 20px;
  color: #FFF;
  transition: all 200ms ease;
  max-width: auto !important;
  font-size: 12px;
  border-radius: 60px;
  border: 0px !important;
}

.toast-bottom {
  bottom: 60px;
  bottom: calc(65px + (constant(safe-area-inset-bottom))*1.1) !important;
  bottom: calc(65px + (env(safe-area-inset-bottom))*1.1) !important;
  transform: translate(-50%, 60px);
}

.toast-bottom.toast-tiny.show {
  transform: translate(-50%, 0px);
}

.toast-top {
  top: 60px;
  top: calc(65px + (constant(safe-area-inset-bottom))*1.1) !important;
  top: calc(65px + (env(safe-area-inset-bottom))*1.1) !important;
  transform: translate(-50%, -60px);
}

.toast-top.toast-tiny.show {
  transform: translate(-50%, 0px);
}

/*Snackbars*/
.snackbar-toast {
  bottom: 70px !important;
  bottom: calc(70px + (constant(safe-area-inset-bottom))*1.1) !important;
  bottom: calc(70px + (env(safe-area-inset-bottom))*1.1) !important;
  position: fixed;
  left: 10px !important;
  right: 10px !important;
  padding: 0px 18px;
  line-height: 50px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 95;
  transform: translateY(100px);
  transition: all 350ms ease;
}

.snackbar-toast.show {
  transform: translateY(0px);
}

/*Pagination*/
.pagination {
  margin-bottom: 30px;
}
.pagination .page-link {
  padding: 10px 14px;
}
.pagination .page-item {
  margin-right: 5px;
  margin-left: 5px;
}

.page-item.active a {
  color: #FFF !important;
}

/*Search*/
.search-results {
  overflow: scroll;
}

.disabled-search-list {
  position: relative;
  max-height: 0px !important;
  padding: 0px !important;
  margin: 0px !important;
  overflow: hidden;
}

.disabled-search {
  display: none;
}

.search-box {
  position: relative;
  line-height: 50px;
  border: solid 1px rgba(0, 0, 0, 0.08);
}
.search-box input {
  outline: none !important;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  padding-left: 40px;
  line-height: 45px;
}
.search-box .fa-search {
  position: absolute;
  left: 0px;
  line-height: 52px;
  padding: 0px 15px 0px 15px;
}
.search-box a {
  position: absolute;
  right: 15px;
  font-size: 14px;
  line-height: 52px;
  width: 45px;
  text-align: center;
  top: 0px;
  margin-top: 0px;
}
.search-box input.bg-white {
  color: #000 !important;
}

.search-color input {
  color: #FFF;
}
.search-color input::placeholder {
  color: #FFF;
}
.search-color i {
  color: #FFF !important;
  z-index: 10;
}

.search-icon-list {
  padding-left: 10px;
  padding-top: 10px;
}
.search-icon-list a {
  color: #1f1f1f;
  line-height: 35px;
}
.search-icon-list a i {
  padding-right: 10px;
}

.search-page .search-result-list {
  position: relative;
  min-height: 80px;
  margin-bottom: 20px;
}
.search-page .search-results img {
  width: 80px;
  position: absolute;
  border-radius: 10px;
}
.search-page .search-results h1 {
  font-size: 15px;
  font-weight: 600;
  padding-left: 100px;
  margin-bottom: 0px;
}
.search-page .search-results p {
  font-size: 12px;
  line-height: 20px;
  padding-left: 100px;
  padding-right: 80px;
}
.search-page .search-results a {
  position: absolute;
  right: 0px;
  height: 30px;
  line-height: 31px;
  padding: 0px 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #FFF;
  font-size: 10px;
  font-weight: 500;
  border-radius: 10px;
}

/*Tabs*/
.tab-controls {
  display: flex;
}

.tab-controls a {
  font-family: "Source Sans Pro", sans-serif;
  color: #1f1f1f;
  background-color: #FFF;
  width: 100%;
  text-align: center;
  border-right: solid 0px !important;
  border: solid 1px rgba(0, 0, 0, 0.07);
  align-self: center;
  margin: 0 auto;
}
.tab-controls a:last-child {
  border-right: solid 1px rgba(0, 0, 0, 0.07) !important;
}

.tabs-small {
  line-height: 35px;
}

.tabs-medium {
  line-height: 40px;
}

.tabs-large {
  line-height: 45px;
}

.tabs-rounded a:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.tabs-rounded a:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*Working Hours*/
.working-hours {
  border-radius: 5px;
}
.working-hours p {
  padding-top: 34px;
  padding-bottom: 15px !important;
  line-height: 0px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: -8px !important;
  width: 33.3%;
  float: left;
  margin-bottom: 10px;
  display: inline-block;
}
.working-hours p:nth-child(2) {
  text-align: center;
}
.working-hours p:last-child {
  text-align: right;
}
.working-hours::after {
  content: "";
  clear: both;
  display: table;
}

/*Responsive Videos and iframes*/
.max-iframe {
  max-height: 200px !important;
  height: 300px !important;
  padding-bottom: 0px !important;
  margin: 0 auto;
}

.responsive-iframe {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.responsive-iframe object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.responsive-iframe embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/*--Footer--*/
.footer {
  padding: 20px 30px 10px 30px;
  margin-bottom: 0px !important;
  z-index: 11;
}
.footer strong {
  font-size: 10px;
  display: block;
  text-align: center;
  font-weight: 700;
  margin-top: 0px;
  text-transform: uppercase;
}
.footer strong i {
  padding: 0px 5px;
}
.footer .footer-text {
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  padding: 5px 10px 0px 10px;
}
.footer .footer-copyright {
  border-top: solid 1px rgba(0, 0, 0, 0.05);
}
.footer .footer-links {
  border-top: solid 1px rgba(0, 0, 0, 0.05);
  padding-top: 13px;
  display: block;
  text-align: center;
  font-size: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.footer .footer-links a {
  padding: 40px 5px 1px 5px;
}
.footer .footer-title {
  color: #1f1f1f;
  width: 100%;
  font-size: 28px;
  text-align: center;
  font-weight: 900;
  font-family: "Source Sans Pro", sans-serif;
}
.footer .footer-logo {
  position: relative;
  width: 100%;
  left: auto;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0);
  position: relative;
  width: 100%;
  left: auto;
  margin: 0 auto;
}
.footer .footer-logo span {
  display: none !important;
}

.footer-title {
  text-align: center;
  display: block;
}

.footer-socials {
  max-width: 240px;
  margin: 0px auto 30px auto;
}
.footer-socials a {
  float: left;
  font-size: 14px;
  margin: 0px 4px;
  color: #FFF;
  border-radius: 10px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.08) !important;
}
.footer-socials a i {
  width: 38px;
  line-height: 38px;
  text-align: center;
  display: block;
  float: left;
}
.footer-socials:after {
  content: "";
  display: table;
  clear: both;
}

.footer-copyright {
  border-top: solid 1px rgba(255, 255, 255, 0.03);
  text-align: center;
  margin-bottom: -5px;
  padding-top: 15px;
  font-size: 11px;
  line-height: 24px;
}

.footer-logo span {
  display: none;
}

.under-slider-btn {
  margin-top: -20px;
  position: relative;
  z-index: 50;
}

.splide .under-slider-btn {
  margin-top: -45px;
}

.splide .card {
  overflow: hidden;
}

.double-slider .splide__pagination {
  margin-bottom: -15px !important;
}

.splide.slider-no-arrows .splide__arrows {
  display: none !important;
}

.splide.slider-no-dots .splide__pagination {
  display: none !important;
}

.splide.slider-arrows .splide__arrow--prev {
  margin-left: 30px !important;
}

.splide.slider-arrows .splide__arrow--next {
  margin-right: 30px !important;
}

.cover-button-top {
  position: absolute;
  width: 170px;
  left: 50%;
  margin-left: -85px;
  top: 20px;
  top: calc(20px + (env(safe-area-inset-top))*1.1) !important;
  z-index: 99;
  font-size: 12px;
}

.cover-button-bottom {
  position: absolute;
  left: 50px;
  right: 50px;
  bottom: calc(60px + (env(safe-area-inset-bottom))*1.1);
  z-index: 99;
  font-size: 12px;
}

.cover-next {
  position: absolute;
  z-index: 99;
  bottom: calc(20px + (env(safe-area-inset-bottom))*1.1);
  right: 0;
}

.cover-prev {
  position: absolute;
  z-index: 99;
  bottom: calc(20px + (env(safe-area-inset-bottom))*1.1);
  left: 0;
}

.theme-light #walkthrough-slider .is-active {
  background: #1f1f1f !important;
}

.theme-dark #walkthrough-slider .is-active {
  background: #FFF !important;
}

#walkthrough-slider .splide__pagination {
  padding-bottom: calc(20px + (env(safe-area-inset-bottom))*1.1);
}

[data-card-height=cover] .card-bottom,
#walkthrough-slider .card-bottom {
  padding-bottom: calc((env(safe-area-inset-bottom))*1.1);
}

.visible-slider {
  padding-right: 60px !important;
}

/*PageApp Calendar*/
.calendar {
  position: relative;
  background-color: #FFF;
  border-radius: 5px;
  overflow: hidden;
  max-width: 90%;
  margin: 0px auto 30px auto;
}

.cal-title {
  color: #FFF;
  line-height: 60px;
  margin-bottom: 0px;
  padding: 0px 15px;
}

.cal-sub-title {
  color: #FFF;
  line-height: 60px;
  margin-bottom: 0px;
  padding: 0px 15px;
}

.cal-title-right {
  float: right;
  margin-top: -60px;
  line-height: 62px;
  height: 50px;
  padding-right: 20px;
}

.cal-title-left {
  float: left;
  margin-top: -60px;
  line-height: 62px;
  height: 50px;
  padding-left: 20px;
}

.cal-days a {
  position: relative;
  width: 14.28%;
  float: left;
  text-align: center;
  height: 35px;
  line-height: 35px;
  color: #FFF;
  position: realtive;
  z-index: 3;
  font-weight: 800;
}

.cal-disabled {
  color: #ced4da !important;
}

.cal-selected span {
  z-index: 2;
  position: relative;
  color: #FFF;
}
.cal-selected i {
  color: #000;
  z-index: 0;
  opacity: 1;
  font-size: 32px;
  position: absolute;
  width: 32px;
  height: 32px;
  top: 50%;
  left: 50%;
  margin: -16px 0px 0px -16px;
  text-align: center;
  line-height: 32px;
}

.cal-dates a {
  position: relative;
  width: 14.2857142857%;
  float: left;
  text-align: center;
  line-height: 45px;
  color: #1f1f1f;
  font-weight: 500;
}

.theme-dark .cal-dates a {
  color: #FFF;
}

.theme-dark .cal-disabled {
  opacity: 0.3;
}

.cal-dates-border a {
  overflow: hidden;
  border-right: solid 1px rgba(0, 0, 0, 0.05);
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}

.cal-schedule {
  min-height: 80px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.055);
}
.cal-schedule em {
  line-height: 20px;
  padding: 20px 0px 0px 20px;
  position: absolute;
  font-size: 11px;
  font-style: normal;
}
.cal-schedule strong {
  color: #000;
  display: block;
  padding: 17px 0px 0px 100px;
  font-size: 14px;
}
.cal-schedule span {
  display: block;
  font-size: 10px;
  color: #adb5bd;
  margin-top: 0px;
}
.cal-schedule span i {
  width: 50px;
  display: inline-block;
  text-align: center;
  padding: 0px 20px 0px 102px;
}

.theme-dark .cal-schedule strong {
  color: #FFF !important;
}

.theme-dark .cal-schedule span {
  color: #FFF !important;
  opacity: 0.5;
}

.cal-message {
  display: block;
}
.cal-message i {
  position: absolute;
  height: 40px;
  line-height: 43px;
  font-size: 27px;
  right: 20px;
}
.cal-message strong {
  display: block;
  line-height: 20px;
  font-weight: 400;
  font-size: 11px;
  padding-left: 20px;
}

/*-Pageapp Chat-*/
.speech-left {
  max-width: 200px;
  float: right;
  border-bottom-right-radius: 0px !important;
  color: #FFF;
}

.speech-right {
  float: left;
  max-width: 200px;
  border-bottom-left-radius: 0px !important;
}

.speach-image {
  padding: 0px !important;
}
.speach-image img {
  margin: 0px;
}

.speech-last {
  margin-bottom: 0px !important;
}

/* ═══════════════════════════════════════
   ESTRUCTURA DE BURBUJAS (ESTILO PREMIUM LIMPIO)
   Respetando proporciones originales
═══════════════════════════════════════ */

.speech-bubble {
  position: relative;
  border-radius: 20px; /* Bordes un poco más orgánicos y suaves */
  padding: 12px 18px;   /* Conserva la proporción original con sutil holgura */
  margin-bottom: 15px;
  line-height: 24px;   /* Mejora la legibilidad del texto en pantalla móvil */
  font-size: 14px;     /* Tamaño base alineado a apps como Telegram/WhatsApp */
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.speech-bubble:after {
  content: "";
  display: block;
  clear: both;
}

/* Burbuja del Usuario (Izquierda en tu HTML / bg-dark-light original) */
.speech-bubble.speech-left {
    background: linear-gradient(135deg, #f9f9f9 0%, #ffffffb3 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px -1px rgba(59, 130, 246, 0.25) !important;
    color: #000000 !important;
    border-radius: 20px 20px 4px 20px !important;
}

/* Forzar que todos los textos/iconos del usuario hereden el color blanco */
.speech-left p, 
.speech-left span, 


/* Burbuja de la IA (Derecha en tu HTML / bg-theme original) */
.speech-bubble.speech-right, 
.speech-bubble.bg-theme {
  background: #ffffff !important;
  /* Un borde casi imperceptible para separar las burbujas blancas del fondo gris claro */
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.02) !important;
  color: #1e293b !important;
  /* Cola de la burbuja redondeada hacia la derecha inferior */
  border-radius: 24px 24px 24px 4px !important;
}

/* Ajuste fino para bloques de código inyectados dentro de las respuestas */
.speech-bubble pre {
  background: #0f172a !important; /* Slate muy oscuro estilo Tailwind */
  border-radius: 12px;
  padding: 14px;
  margin: 10px 0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.speech-bubble code {
  font-family: 'Fira Code', 'Courier New', Courier, monospace !important;
  color: #e2e8f0 !important;
}

.speech-read {
  font-size: 10px;
  font-style: normal;
  display: block;
  text-align: right;
  font-weight: 500;
  color: #adb5bd;
  margin-bottom: 80px;
}

.speach-input input {
  width: 100%;
  display: block;
  line-height: 45px;
  height: 45px;
  margin-top: 8px;
  border-radius: 45px;
}

.speach-icon a {
  padding-top: 0px !important;
  display: block;
  border-radius: 35px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin-top: 3px;
  transform: translateY(10px);
}

.speech-icon-left, .speech-icon-right {
  position: relative;
  display: block;
}

.speech-icon-left img,
.speech-icon-right img {
  width: 30px;
  position: absolute;
  bottom: 0px;
}

.speech-icon-left img {
  left: 0px;
}

.speech-icon-right img {
  right: 0px;
}

.speech-icon-left .speech-bubble {
  margin-left: 20px !important;
}

.speech-icon-right .speech-bubble {
  margin-right: 20px !important;
}

/*Contact Form*/
.form-field span {
  position: absolute;
  right: 20px;
  font-size: 9px;
  opacity: 0.5;
}
.form-field input {
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(0, 0, 0, 0) !important;
  border-radius: 10px;
  margin: 0px 0px 15px 0px;
}
.form-field textarea {
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(0, 0, 0, 0) !important;
  border-radius: 10px;
  margin: 0px 0px 15px 0px;
}

.form-name input {
  line-height: 40px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  width: 100%;
  padding: 0px 10px 0px 10px;
}

.form-email input {
  line-height: 40px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  width: 100%;
  padding: 0px 10px 0px 10px;
}

.form-text textarea {
  height: 145px;
  line-height: 24px;
  width: 100%;
  border: solid 1px rgba(0, 0, 0, 0.1);
  padding: 10px 10px 0px 10px;
  margin-bottom: 30px;
}

.contactSubmitButton {
  width: 100%;
  display: block;
  border-radius: 10px;
  color: #FFF !important;
  padding: 12px 0px !important;
}

.fieldHasError {
  border: solid 1px #BF263C !important;
}

/*Map Full*/
.map-full .card-overlay {
  transition: all 350ms ease;
  z-index: 2;
}

.map-full .card-center {
  z-index: 3;
}

.hide-map {
  position: absolute;
  margin-top: -120px;
  width: 200px;
  left: 50%;
  margin-left: -100px;
  text-align: center;
  z-index: 2;
}

.map-full .card {
  z-index: 2;
  position: absolute;
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.map-full iframe {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.activate-map {
  opacity: 1 !important;
  transition: all 250ms ease;
  transition: all 350ms ease;
}

.deactivate-map {
  opacity: 0 !important;
  pointer-events: none;
  transition: all 350ms ease;
}

/*Gallery Views*/
.gallery-view-controls a {
  float: left;
  width: 33.3%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #1f1f1f;
}

.theme-dark .gallery-view-controls a {
  color: #FFF;
}

.theme-dark .gallery-view-controls {
  border-bottom: solid 1px rgba(255, 255, 255, 0.07);
}

.gallery-view-controls {
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.gallery-view-1 a {
  width: 30%;
  float: left;
}

.gallery-view-1 .caption {
  display: none;
}

.gallery-view-2 .caption {
  display: none;
}

.gallery-view-3 .caption {
  padding-top: 20px;
}

.gallery-view-1 a {
  margin-bottom: 5%;
}

.gallery-view-1 a:nth-child(3n-1) {
  margin: auto 5% auto 5%;
}

.gallery-view-2 a {
  width: 47.5%;
  margin-bottom: 5%;
  float: left;
}

.gallery-view-2 a:nth-child(2n-1) {
  margin-right: 5%;
}

/*Page Timeline*/
.timeline-cover {
  height: 330px;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0px;
  background-position: center center;
  background-size: cover;
  margin-top: 50px;
}

.timeline-cover .overlay {
  opacity: 0.8;
}

.timeline-cover .content {
  z-index: 10;
}

.timeline-body {
  position: relative;
  margin-top: 200px;
  padding-top: 5px;
  z-index: 2;
  background-color: #f0f0f0;
  padding-bottom: 10px;
  box-shadow: none !important;
}

.timeline-header {
  height: 55px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
}

.timeline-header .back-button {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  color: #FFF;
  z-index: 11;
}

.timeline-header .menu-icon {
  position: absolute;
  top: 2px;
  right: 0px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  color: #FFF;
  z-index: 11;
}

.timeline-header .menu-icon em {
  background-color: #FFF;
}

.timeline-logo {
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 10;
  width: 100%;
}

.timeline-deco {
  background-color: rgba(0, 0, 0, 0.08);
  position: absolute;
  top: 0px;
  z-index: 0;
  bottom: 0px;
  left: 43px;
  width: 1px;
}

.timeline-item-content, .timeline-item-content-full {
  border: solid 1px rgba(0, 0, 0, 0.1);
  background-color: #FFF;
  margin: 0px 15px 30px 90px;
  padding: 20px 15px;
}

.timeline-item {
  position: relative;
  z-index: 2;
}

.timeline-item-content-full {
  padding: 0px;
}

.timeline-item-content-full h5 {
  padding: 5px 15px 15px 15px;
}

.timeline-item .timeline-icon {
  position: absolute;
  width: 45px;
  height: 45px;
  left: 21px;
  line-height: 45px;
  border-radius: 45px;
  top: 25px;
  font-size: 18px;
  text-align: center;
}

/*Timeline Center*/
.timeline-cover-center .timeline-sub-heading,
.timeline-cover-center .timeline-heading {
  padding-left: 0px;
  text-align: center;
}

.timeline-cover-center .timeline-image {
  top: 50%;
  bottom: auto;
  margin-top: -150px;
  left: 50%;
  margin-left: -60px;
  background-size: 120px 120px;
  width: 120px;
  height: 120px;
  border-radius: 100px;
}

.timeline-body-center {
  padding-bottom: 40px;
}

.timeline-body-center .timeline-icon {
  width: 60px;
  height: 60px;
  left: 50%;
  line-height: 60px;
  margin-left: -31px;
  margin-top: -115px;
}

.timeline-body-center .timeline-deco {
  left: 50%;
  margin-left: -1px;
}

.timeline-body-center .timeline-item-content,
.timeline-body-center .timeline-item-content-full {
  margin: 120px 20px 20px 20px !important;
  padding: 20px;
}

/*Gradient Adjustments*/
.bg-gradient {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.8) 70%, black 100%) !important;
}

.bg-gradient-fade {
  bottom: 0px !important;
}

.theme-light .bg-gradient-fade {
  background: linear-gradient(to bottom, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 0.99) 65%, #f0f0f0 100%);
}

.theme-dark .bg-gradient-fade {
  background: linear-gradient(to bottom, rgba(27, 29, 33, 0) 0%, rgba(27, 29, 33, 0.99) 65%, #1b1d21 100%);
}

.theme-light .bg-gradient-fade-small {
  background: linear-gradient(to bottom, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 0.2) 50%, rgba(240, 240, 240, 0.9) 75%, #f0f0f0 100%);
}

.theme-dark .bg-gradient-fade-small {
  background: linear-gradient(to bottom, rgba(27, 29, 33, 0) 0%, rgba(27, 29, 33, 0.2) 50%, rgba(27, 29, 33, 0.9) 75%, #1b1d21 100%);
}

/*Basic Colors*/
.color-white {
  color: #FFF !important;
}

.color-black {
  color: #000 !important;
}

.bg-white {
  background-color: #FFF !important;
}

.bg-black {
  background-color: #000 !important;
}

/*Main Color Settings*/
.theme-dark .bg-theme {
  background-color: #0f1117 !important;
}

.theme-light .bg-theme {
  background-color: #FFF !important;
}

.theme-light .color-theme {
  color: #0f1117 !important;
}

.theme-dark .color-theme {
  color: #FFF !important;
}

.theme-light .border-theme {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.theme-dark .border-theme {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/*Hide Show Based on Color Scheme*/
.theme-dark .show-on-theme-dark {
  display: block;
}

.theme-dark .show-on-theme-light {
  display: none;
}

.theme-light .show-on-theme-light {
  display: block;
}

.theme-light .show-on-theme-dark {
  display: none;
}

/*Dark Theme Settings*/
.theme-dark p {
  color: #898989;
}

.theme-dark code {
  color: #898989;
  opacity: 0.7;
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
.theme-dark #footer-bar a i,
.theme-dark #footer-bar a span .theme-dark p strong {
  color: #FFF;
}

.theme-dark .accordion-btn,
.theme-dark .menu .nav-title,
.theme-dark .menu .nav a i,
.theme-dark .menu .nav a span,
.theme-dark .menu .nav .active-nav i,
.theme-dark .menu .nav .active-nav span,
.theme-dark .header .header-icon,
.theme-dark .header .header-title,
.theme-dark .search-header .fa-search,
.theme-dark .color-theme,
.theme-dark .countdown div,
.theme-dark .list-group i:last-child,
.theme-dark .search-icon-list a,
.theme-dark .fac label,
.theme-dark .pagination a,
.theme-dark .accordion-style-2 a,
.theme-dark input,
.theme-dark .contact-form i,
.theme-dark .demo-icon-font article,
.theme-dark [data-tab],
.theme-dark span:not(.badge),
.theme-dark .profile-2 .profile-stats a,
.theme-dark .vcard-field *,
.theme-dark .search-header input,
.theme-dark .footer .footer-title {
  color: #FFF !important;
}

.theme-dark .loader-main,
.theme-dark .instant-article,
.theme-dark .divider-icon i,
.theme-dark .table tr.even td,
.theme-dark .timeline-body,
.theme-dark table,
.theme-dark td {
  background-color: #1b1d21 !important;
}

.theme-dark,
.theme-dark .page-bg,
.theme-dark #page {
  background-color: #1b1d21;
}

.theme-dark .ios-switch label::before,
.theme-dark .android-switch label::before {
  background-color: #1b1d21;
  border: solid 1px rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .bg-theme {
  background-color: #0f1117 !important;
}

.theme-dark .form-floating-over > .form-control:focus ~ label,
.theme-dark .form-floating-over > .form-control:not(:placeholder-shown) ~ label,
.theme-dark .form-floating-over > .form-select ~ label,
.theme-dark .footer,
.theme-dark .card {
  background-color: #0f1117;
}


.theme-dark .link-list-3 a,
.theme-dark .pricing-1,
.theme-dark .pricing-2,
.theme-dark .pricing-3,
.theme-dark .pricing-4,
.theme-dark .search-box,
.theme-dark .link-list-2 a,
.theme-dark .vcard-field,
.theme-dark table {
  border: solid 1px rgba(255, 255, 255, 0.05);
}

.theme-dark select,
.theme-dark .form-field input,
.theme-dark .form-field textarea {
  color: #FFF !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.theme-dark input,
.theme-dark textarea,
.theme-dark select {
  border-color: rgba(255, 255, 255, 0.05);
}

.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
  border-color: #495057 !important;
}

.theme-dark .list-custom-large a,
.theme-dark .list-custom-small a {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .timeline-deco {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .footer-links,
.theme-dark #footer-bar,
.theme-dark .footer-copyright {
  border-top: solid 1px rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .border-left {
  border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .border-right {
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.theme-dark th,
.theme-dark .menu,
.theme-dark .header,
.theme-dark .polaroid-effect,
.theme-dark .timeline-item-content,
.theme-dark .tab-controls,
.theme-dark #footer-bar,
.theme-dark .menu .form-style label,
.theme-dark .menu .form-floating-style label,
.theme-dark .menu .form-border-bottom label,
.theme-dark .timeline-item-content-full {
  background-color: #21252a !important;
  color: #FFF;
}

.theme-dark .divider,
.theme-dark .menu .nav a:hover,
.theme-dark .menu .nav .active-subnav,
.theme-dark .menu .nav .divider {
  background-color: rgba(255, 255, 255, 0.05);
}

.theme-dark .menu-hider {
  background-color: rgba(0, 0, 0, 0.7);
}

.theme-dark .gallery-filter-controls li {
  color: #FFF;
}

.theme-dark .gallery-view-controls a {
  color: #FFF;
}

.theme-dark .gallery-view-controls {
  border-bottom: solid 1px rgba(255, 255, 255, 0.05);
}

.theme-dark .tab-controls a {
  border: solid 1px rgba(255, 255, 255, 0.05);
}

.theme-dark .form-control:focus,
.theme-dark .form-control {
  background-color: transparent !important;
}

.theme-dark[data-gradient=body-default] #page, .body-default {
  background-image: none !important;
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: #FFF !important;
}

.theme-dark input:not([type=file]),
.theme-dark select,
.theme-dark textarea {
  color: #FFF !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .stepper a:first-child {
  border-right: solid 1px rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .stepper a:last-child {
  border-left: solid 1px rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .stepper {
  border: solid 1px rgba(255, 255, 255, 0.1) !important;
}

.theme-dark label {
  background-color: #0f1117 !important;
}

.theme-dark .menu label {
  background-color: #21252a !important;
}

.theme-dark [data-card-height=cover] label {
  background-color: transparent !important;
}

/* Generating Color Pack*/
.color-highlight {
  color: #21b2c1 !important;
}

.bg-highlight {
  background-color: #21b2c1 !important;
  color: #FFF !important;
}

.border-highlight {
  border-color: #21b2c1 !important;
}

.gradient-highlight {
  background-image: linear-gradient(to bottom, #ED5565, #21b2c1) !important;
}

.gradient-menu {
  background-image: linear-gradient(130deg, #7ea5f6, #ff384c) !important;
}

.color-default-light {
  color: #f2f2f7 !important;
}

.color-default-dark {
  color: #f2f2f7 !important;
}

[data-gradient=body-default] #page, .background-changer .body-default {
  background-image: linear-gradient(0deg, #f2f2f7, #f2f2f7) !important;
}

.color-plum-light {
  color: #3D3949 !important;
}

.color-plum-dark {
  color: #6772A4 !important;
}

[data-gradient=body-plum] #page, .background-changer .body-plum {
  background-image: linear-gradient(0deg, #3D3949, #6772A4) !important;
}

.color-magenta-light {
  color: #2b2741 !important;
}

.color-magenta-dark {
  color: #413a65 !important;
}

[data-gradient=body-magenta] #page, .background-changer .body-magenta {
  background-image: linear-gradient(0deg, #2b2741, #413a65) !important;
}

.color-violet-light {
  color: #492D3D !important;
}

.color-violet-dark {
  color: #673c58 !important;
}

[data-gradient=body-violet] #page, .background-changer .body-violet {
  background-image: linear-gradient(0deg, #492D3D, #673c58) !important;
}

.color-red-light {
  color: #6F1025 !important;
}

.color-red-dark {
  color: #c62f50 !important;
}

[data-gradient=body-red] #page, .background-changer .body-red {
  background-image: linear-gradient(0deg, #6F1025, #c62f50) !important;
}

.color-green-light {
  color: #2d7335 !important;
}

.color-green-dark {
  color: #6eb148 !important;
}

[data-gradient=body-green] #page, .background-changer .body-green {
  background-image: linear-gradient(0deg, #2d7335, #6eb148) !important;
}

.color-sky-light {
  color: #0F5F79 !important;
}

.color-sky-dark {
  color: #188FB6 !important;
}

[data-gradient=body-sky] #page, .background-changer .body-sky {
  background-image: linear-gradient(0deg, #0F5F79, #188FB6) !important;
}

.color-orange-light {
  color: #C15140 !important;
}

.color-orange-dark {
  color: #E96A57 !important;
}

[data-gradient=body-orange] #page, .background-changer .body-orange {
  background-image: linear-gradient(0deg, #C15140, #E96A57) !important;
}

.color-yellow-light {
  color: #996A22 !important;
}

.color-yellow-dark {
  color: #CCA64F !important;
}

[data-gradient=body-yellow] #page, .background-changer .body-yellow {
  background-image: linear-gradient(0deg, #996A22, #CCA64F) !important;
}

.color-dark-light {
  color: #343341 !important;
}

.color-dark-dark {
  color: #535468 !important;
}

[data-gradient=body-dark] #page, .background-changer .body-dark {
  background-image: linear-gradient(0deg, #343341, #535468) !important;
}

.color-highlight-light {
  color: #ED5565 !important;
}

.bg-highlight-light {
  background-color: #ED5565 !important;
  color: #FFF !important;
}

.bg-fade-highlight-dark {
  background-color: !important;
  color: #FFF !important;
}

.bg-fade-highlight-light {
  background-color: !important;
  color: #FFF !important;
}

.color-highlight-dark {
  color: #21b2c1 !important;
}

.color-icon-highlight {
  stroke: #21b2c1 !important;
  fill: !important;
}

.bg-highlight-dark {
  background-color: #21b2c1 !important;
  color: #FFF !important;
}

.border-highlight-light {
  border-color: #21b2c1 !important;
}

.border-highlight-dark {
  border-color: #21b2c1 !important;
}

.focus-highlight:focus {
  border-color: #21b2c1 !important;
}

.gradient-highlight {
  background-image: linear-gradient(to bottom, #ED5565, #21b2c1);
}

.color-green-light {
  color: #A0D468 !important;
}

.bg-green-light {
  background-color: #A0D468 !important;
  color: #FFF !important;
}

.bg-fade-green-dark {
  background-color: rgba(140, 193, 82, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-green-light {
  background-color: rgba(140, 193, 82, 0.3) !important;
  color: #FFF !important;
}

.color-green-dark {
  color: #8CC152 !important;
}

.color-icon-green {
  stroke: #8CC152 !important;
  fill: rgba(140, 193, 82, 0.3) !important;
}

.bg-green-dark {
  background-color: #8CC152 !important;
  color: #FFF !important;
}

.border-green-light {
  border-color: #A0D468 !important;
}

.border-green-dark {
  border-color: #8CC152 !important;
}

.focus-green:focus {
  border-color: #8CC152 !important;
}

.gradient-green {
  background-image: linear-gradient(to bottom, #A0D468, #8CC152);
}

.color-grass-light {
  color: #34cc73 !important;
}

.bg-grass-light {
  background-color: #34cc73 !important;
  color: #FFF !important;
}

.bg-fade-grass-dark {
  background-color: rgba(140, 193, 82, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-grass-light {
  background-color: rgba(140, 193, 82, 0.3) !important;
  color: #FFF !important;
}

.color-grass-dark {
  color: #2ABA66 !important;
}

.color-icon-grass {
  stroke: #2ABA66 !important;
  fill: rgba(140, 193, 82, 0.3) !important;
}

.bg-grass-dark {
  background-color: #2ABA66 !important;
  color: #FFF !important;
}

.border-grass-light {
  border-color: #34cc73 !important;
}

.border-grass-dark {
  border-color: #2ABA66 !important;
}

.focus-grass:focus {
  border-color: #2ABA66 !important;
}

.gradient-grass {
  background-image: linear-gradient(to bottom, #34cc73, #2ABA66);
}

.color-red-light {
  color: #ED5565 !important;
}

.bg-red-light {
  background-color: #ED5565 !important;
  color: #FFF !important;
}

.bg-fade-red-dark {
  background-color: rgba(218, 68, 83, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-red-light {
  background-color: rgba(218, 68, 83, 0.3) !important;
  color: #FFF !important;
}

.color-red-dark {
  color: #DA4453 !important;
}

.color-icon-red {
  stroke: #DA4453 !important;
  fill: rgba(218, 68, 83, 0.3) !important;
}

.bg-red-dark {
  background-color: #DA4453 !important;
  color: #FFF !important;
}

.border-red-light {
  border-color: #ED5565 !important;
}

.border-red-dark {
  border-color: #DA4453 !important;
}

.focus-red:focus {
  border-color: #DA4453 !important;
}

.gradient-red {
  background-image: linear-gradient(to bottom, #ED5565, #DA4453);
}

.color-orange-light {
  color: #FC6E51 !important;
}

.bg-orange-light {
  background-color: #FC6E51 !important;
  color: #FFF !important;
}

.bg-fade-orange-dark {
  background-color: rgba(233, 87, 63, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-orange-light {
  background-color: rgba(233, 87, 63, 0.3) !important;
  color: #FFF !important;
}

.color-orange-dark {
  color: #E9573F !important;
}

.color-icon-orange {
  stroke: #E9573F !important;
  fill: rgba(233, 87, 63, 0.3) !important;
}

.bg-orange-dark {
  background-color: #E9573F !important;
  color: #FFF !important;
}

.border-orange-light {
  border-color: #FC6E51 !important;
}

.border-orange-dark {
  border-color: #E9573F !important;
}

.focus-orange:focus {
  border-color: #E9573F !important;
}

.gradient-orange {
  background-image: linear-gradient(to bottom, #FC6E51, #E9573F);
}

.color-yellow-light {
  color: #FFCE54 !important;
}

.bg-yellow-light {
  background-color: #FFCE54 !important;
  color: #FFF !important;
}

.bg-fade-yellow-dark {
  background-color: rgba(246, 187, 66, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-yellow-light {
  background-color: rgba(246, 187, 66, 0.3) !important;
  color: #FFF !important;
}

.color-yellow-dark {
  color: #F6BB42 !important;
}

.color-icon-yellow {
  stroke: #F6BB42 !important;
  fill: rgba(246, 187, 66, 0.3) !important;
}

.bg-yellow-dark {
  background-color: #F6BB42 !important;
  color: #FFF !important;
}

.border-yellow-light {
  border-color: #FFCE54 !important;
}

.border-yellow-dark {
  border-color: #F6BB42 !important;
}

.focus-yellow:focus {
  border-color: #F6BB42 !important;
}

.gradient-yellow {
  background-image: linear-gradient(to bottom, #FFCE54, #F6BB42);
}

.color-sunny-light {
  color: #f0b31b !important;
}

.bg-sunny-light {
  background-color: #f0b31b !important;
  color: #FFF !important;
}

.bg-fade-sunny-dark {
  background-color: rgba(246, 187, 66, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-sunny-light {
  background-color: rgba(246, 187, 66, 0.3) !important;
  color: #FFF !important;
}

.color-sunny-dark {
  color: #d99914 !important;
}

.color-icon-sunny {
  stroke: #d99914 !important;
  fill: rgba(246, 187, 66, 0.3) !important;
}

.bg-sunny-dark {
  background-color: #d99914 !important;
  color: #FFF !important;
}

.border-sunny-light {
  border-color: #f0b31b !important;
}

.border-sunny-dark {
  border-color: #d99914 !important;
}

.focus-sunny:focus {
  border-color: #d99914 !important;
}

.gradient-sunny {
  background-image: linear-gradient(to bottom, #f0b31b, #d99914);
}

.color-blue-light {
  color: #5D9CEC !important;
}

.bg-blue-light {
  background-color: #5D9CEC !important;
  color: #FFF !important;
}

.bg-fade-blue-dark {
  background-color: rgba(74, 137, 220, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-blue-light {
  background-color: rgba(74, 137, 220, 0.3) !important;
  color: #FFF !important;
}

.color-blue-dark {
  color: #4A89DC !important;
}

.color-icon-blue {
  stroke: #4A89DC !important;
  fill: rgba(74, 137, 220, 0.3) !important;
}

.bg-blue-dark {
  background-color: #4A89DC !important;
  color: #FFF !important;
}

.border-blue-light {
  border-color: #5D9CEC !important;
}

.border-blue-dark {
  border-color: #4A89DC !important;
}

.focus-blue:focus {
  border-color: #4A89DC !important;
}

.gradient-blue {
  background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
}

.color-teal-light {
  color: #A0CECB !important;
}

.bg-teal-light {
  background-color: #A0CECB !important;
  color: #FFF !important;
}

.bg-fade-teal-dark {
  background-color: rgba(125, 177, 177, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-teal-light {
  background-color: rgba(125, 177, 177, 0.3) !important;
  color: #FFF !important;
}

.color-teal-dark {
  color: #7DB1B1 !important;
}

.color-icon-teal {
  stroke: #7DB1B1 !important;
  fill: rgba(125, 177, 177, 0.3) !important;
}

.bg-teal-dark {
  background-color: #7DB1B1 !important;
  color: #FFF !important;
}

.border-teal-light {
  border-color: #A0CECB !important;
}

.border-teal-dark {
  border-color: #7DB1B1 !important;
}

.focus-teal:focus {
  border-color: #7DB1B1 !important;
}

.gradient-teal {
  background-image: linear-gradient(to bottom, #A0CECB, #7DB1B1);
}

.color-mint-light {
  color: #48CFAD !important;
}

.bg-mint-light {
  background-color: #48CFAD !important;
  color: #FFF !important;
}

.bg-fade-mint-dark {
  background-color: rgba(55, 188, 155, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-mint-light {
  background-color: rgba(55, 188, 155, 0.3) !important;
  color: #FFF !important;
}

.color-mint-dark {
  color: #37BC9B !important;
}

.color-icon-mint {
  stroke: #37BC9B !important;
  fill: rgba(55, 188, 155, 0.3) !important;
}

.bg-mint-dark {
  background-color: #37BC9B !important;
  color: #FFF !important;
}

.border-mint-light {
  border-color: #48CFAD !important;
}

.border-mint-dark {
  border-color: #37BC9B !important;
}

.focus-mint:focus {
  border-color: #37BC9B !important;
}

.gradient-mint {
  background-image: linear-gradient(to bottom, #48CFAD, #37BC9B);
}

.color-pink-light {
  color: #EC87C0 !important;
}

.bg-pink-light {
  background-color: #EC87C0 !important;
  color: #FFF !important;
}

.bg-fade-pink-dark {
  background-color: rgba(215, 112, 173, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-pink-light {
  background-color: rgba(215, 112, 173, 0.3) !important;
  color: #FFF !important;
}

.color-pink-dark {
  color: #D770AD !important;
}

.color-icon-pink {
  stroke: #D770AD !important;
  fill: rgba(215, 112, 173, 0.3) !important;
}

.bg-pink-dark {
  background-color: #D770AD !important;
  color: #FFF !important;
}

.border-pink-light {
  border-color: #EC87C0 !important;
}

.border-pink-dark {
  border-color: #D770AD !important;
}

.focus-pink:focus {
  border-color: #D770AD !important;
}

.gradient-pink {
  background-image: linear-gradient(to bottom, #EC87C0, #D770AD);
}

.color-pink2-light {
  color: #ff5982 !important;
}

.bg-pink2-light {
  background-color: #ff5982 !important;
  color: #FFF !important;
}

.bg-fade-pink2-dark {
  background-color: rgba(215, 112, 173, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-pink2-light {
  background-color: rgba(215, 112, 173, 0.3) !important;
  color: #FFF !important;
}

.color-pink2-dark {
  color: #fb3365 !important;
}

.color-icon-pink2 {
  stroke: #fb3365 !important;
  fill: rgba(215, 112, 173, 0.3) !important;
}

.bg-pink2-dark {
  background-color: #fb3365 !important;
  color: #FFF !important;
}

.border-pink2-light {
  border-color: #ff5982 !important;
}

.border-pink2-dark {
  border-color: #fb3365 !important;
}

.focus-pink2:focus {
  border-color: #fb3365 !important;
}

.gradient-pink2 {
  background-image: linear-gradient(to bottom, #ff5982, #fb3365);
}

.color-magenta-light {
  color: #AC92EC !important;
}

.bg-magenta-light {
  background-color: #AC92EC !important;
  color: #FFF !important;
}

.bg-fade-magenta-dark {
  background-color: rgba(150, 122, 220, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-magenta-light {
  background-color: rgba(150, 122, 220, 0.3) !important;
  color: #FFF !important;
}

.color-magenta-dark {
  color: #967ADC !important;
}

.color-icon-magenta {
  stroke: #967ADC !important;
  fill: rgba(150, 122, 220, 0.3) !important;
}

.bg-magenta-dark {
  background-color: #967ADC !important;
  color: #FFF !important;
}

.border-magenta-light {
  border-color: #AC92EC !important;
}

.border-magenta-dark {
  border-color: #967ADC !important;
}

.focus-magenta:focus {
  border-color: #967ADC !important;
}

.gradient-magenta {
  background-image: linear-gradient(to bottom, #AC92EC, #967ADC);
}

.color-brown-light {
  color: #BAA286 !important;
}

.bg-brown-light {
  background-color: #BAA286 !important;
  color: #FFF !important;
}

.bg-fade-brown-dark {
  background-color: rgba(170, 142, 105, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-brown-light {
  background-color: rgba(170, 142, 105, 0.3) !important;
  color: #FFF !important;
}

.color-brown-dark {
  color: #AA8E69 !important;
}

.color-icon-brown {
  stroke: #AA8E69 !important;
  fill: rgba(170, 142, 105, 0.3) !important;
}

.bg-brown-dark {
  background-color: #AA8E69 !important;
  color: #FFF !important;
}

.border-brown-light {
  border-color: #BAA286 !important;
}

.border-brown-dark {
  border-color: #AA8E69 !important;
}

.focus-brown:focus {
  border-color: #AA8E69 !important;
}

.gradient-brown {
  background-image: linear-gradient(to bottom, #BAA286, #AA8E69);
}

.color-gray-light {
  color: #e2e5ea !important;
}

.bg-gray-light {
  background-color: #e2e5ea !important;
  color: #FFF !important;
}

.bg-fade-gray-dark {
  background-color: rgba(170, 178, 189, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-gray-light {
  background-color: rgba(170, 178, 189, 0.3) !important;
  color: #FFF !important;
}

.color-gray-dark {
  color: #AAB2BD !important;
}

.color-icon-gray {
  stroke: #AAB2BD !important;
  fill: rgba(170, 178, 189, 0.3) !important;
}

.bg-gray-dark {
  background-color: #AAB2BD !important;
  color: #FFF !important;
}

.border-gray-light {
  border-color: #e2e5ea !important;
}

.border-gray-dark {
  border-color: #AAB2BD !important;
}

.focus-gray:focus {
  border-color: #AAB2BD !important;
}

.gradient-gray {
  background-image: linear-gradient(to bottom, #e2e5ea, #AAB2BD);
}

.color-aqua-light {
  color: #4FC1E9 !important;
}

.bg-aqua-light {
  background-color: #4FC1E9 !important;
  color: #FFF !important;
}

.bg-fade-aqua-dark {
  background-color: rgba(67, 74, 84, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-aqua-light {
  background-color: rgba(67, 74, 84, 0.3) !important;
  color: #FFF !important;
}

.color-aqua-dark {
  color: #3BAFDA !important;
}

.color-icon-aqua {
  stroke: #3BAFDA !important;
  fill: rgba(67, 74, 84, 0.3) !important;
}

.bg-aqua-dark {
  background-color: #3BAFDA !important;
  color: #FFF !important;
}

.border-aqua-light {
  border-color: #4FC1E9 !important;
}

.border-aqua-dark {
  border-color: #3BAFDA !important;
}

.focus-aqua:focus {
  border-color: #3BAFDA !important;
}

.gradient-aqua {
  background-image: linear-gradient(to bottom, #4FC1E9, #3BAFDA);
}

.color-night-light {
  color: #222529 !important;
}

.bg-night-light {
  background-color: #222529 !important;
  color: #FFF !important;
}

.bg-fade-night-dark {
  background-color: rgba(67, 74, 84, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-night-light {
  background-color: rgba(67, 74, 84, 0.3) !important;
  color: #FFF !important;
}

.color-night-dark {
  color: #16181c !important;
}

.color-icon-night {
  stroke: #16181c !important;
  fill: rgba(67, 74, 84, 0.3) !important;
}

.bg-night-dark {
  background-color: #16181c !important;
  color: #FFF !important;
}

.border-night-light {
  border-color: #222529 !important;
}

.border-night-dark {
  border-color: #16181c !important;
}

.focus-night:focus {
  border-color: #16181c !important;
}

.gradient-night {
  background-image: linear-gradient(to bottom, #222529, #16181c);
}

.color-dark-light {
  color: #656D78 !important;
}

.bg-dark-light {
  background-color: #656D78 !important;
  color: #FFF !important;
}

.bg-fade-dark-dark {
  background-color: rgba(67, 74, 84, 0.7) !important;
  color: #FFF !important;
}

.bg-fade-dark-light {
  background-color: rgba(67, 74, 84, 0.3) !important;
  color: #FFF !important;
}

.color-dark-dark {
  color: #434A54 !important;
}

.color-icon-dark {
  stroke: #434A54 !important;
  fill: rgba(67, 74, 84, 0.3) !important;
}

.bg-dark-dark {
  background-color: #434A54 !important;
  color: #FFF !important;
}

.border-dark-light {
  border-color: #656D78 !important;
}

.border-dark-dark {
  border-color: #434A54 !important;
}

.focus-dark:focus {
  border-color: #434A54 !important;
}

.gradient-dark {
  background-image: linear-gradient(to bottom, #656D78, #434A54);
}

.theme-light input:not([type=submit]):not(.focus-color):focus, .theme-light select:focus, .theme-light textarea:active {
  border-color: rgba(0, 0, 0, 0.3) !important;
}

.theme-light [data-card-height=cover] input:not([type=submit]):not(.focus-color):focus, .theme-light [data-card-height=cover] select:focus, .theme-light [data-card-height=cover] textarea:active {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-dark input:not([type=submit]):not(.focus-color):focus, .theme-dark select:focus, .theme-dark textarea:active {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/*Social Colors*/
.color-facebook {
  color: #3b5998 !important;
}

.bg-facebook {
  background-color: #3b5998 !important;
  color: #FFF;
}

.color-linkedin {
  color: #0077B5 !important;
}

.bg-linkedin {
  background-color: #0077B5 !important;
  color: #FFF;
}

.color-twitter {
  color: #4099ff !important;
}

.bg-twitter {
  background-color: #4099ff !important;
  color: #FFF;
}

.color-google {
  color: #d34836 !important;
}

.bg-google {
  background-color: #d34836 !important;
  color: #FFF;
}

.color-whatsapp {
  color: #34AF23 !important;
}

.bg-whatsapp {
  background-color: #34AF23 !important;
  color: #FFF;
}

.color-pinterest {
  color: #C92228 !important;
}

.bg-pinterest {
  background-color: #C92228 !important;
  color: #FFF;
}

.color-mail {
  color: #3498db !important;
}

.bg-mail {
  background-color: #3498db !important;
  color: #FFF;
}

.color-phone {
  color: #27ae60 !important;
}

.bg-phone {
  background-color: #27ae60 !important;
  color: #FFF;
}

.color-instagram {
  color: #e1306c !important;
}

.bg-instagram {
  background-color: #e1306c !important;
  color: #FFF;
}

/*Default Colors*/
.color-white {
  color: #FFF !important;
}

.color-black {
  color: #000 !important;
}

.bg-white {
  background-color: #FFF !important;
}

.bg-black {
  background-color: #000 !important;
}

.border-transparent {
  border-color: transparent !important;
}

/*Default Highlight Colors*/
.footer-bar-2 .active-nav,
.footer-bar-5 strong,
.footer-bar-4 strong,
.splide__pagination__page.is-active {
  background-color: #21b2c1 !important;
}

.footer-bar-1 .active-nav i,
.footer-bar-1 .active-nav span,
.footer-bar-3 .active-nav i {
  color: #21b2c1 !important;
}

.form-floating-over > .form-control:focus ~ label {
  color: #21b2c1;
}

.form-floating-over > .form-control:not(:placeholder-shown) ~ label {
  color: #21b2c1;
}

.form-floating-over > .form-select ~ label {
  color: #21b2c1;
}

.color-highlight {
  color: #21b2c1;
}

.bg-highlight {
  background-color: #21b2c1;
  color: #FFF !important;
}

/*Styles used to showcase the demo product on ThemeForest and create backgrounds. These can be deleted to increase speed of loading*/
.bg-0 {
  background-image: url(../images/pictures/0l.jpg);
}

.bg-1 {
  background-image: url(../images/pictures/1.jpg);
}

.bg-2 {
  background-image: url(../images/pictures/2.jpg);
}

.bg-3 {
  background-image: url(../images/pictures/3.jpg);
}

.bg-4 {
  background-image: url(../images/pictures/4.jpg);
}

.bg-5 {
  background-image: url(../images/pictures/5.jpg);
}

.bg-6 {
  background-image: url(../images/pictures/6.jpg);
}

.bg-7 {
  background-image: url(../images/pictures/7.jpg);
}

.bg-8 {
  background-image: url(../images/pictures/8.jpg);
}

.bg-9 {
  background-image: url(../images/pictures/9.jpg);
}

.bg-10 {
  background-image: url(../images/pictures/10.jpg);
}

.bg-11 {
  background-image: url(../images/pictures/11.jpg);
}

.bg-12 {
  background-image: url(../images/pictures/12.jpg);
}

.bg-13 {
  background-image: url(../images/pictures/13.jpg);
}

.bg-14 {
  background-image: url(../images/pictures/14.jpg);
}

.bg-15 {
  background-image: url(../images/pictures/15.jpg);
}

.bg-16 {
  background-image: url(../images/pictures/16.jpg);
}

.bg-17 {
  background-image: url(../images/pictures/17.jpg);
}

.bg-18 {
  background-image: url(../images/pictures/aptsbg.jpg);
}

.bg-19 {
  background-image: url(../images/pictures/19.jpg);
}

.bg-20 {
  background-image: url(../images/pictures/20.jpg);
}

.bg-21 {
  background-image: url(../images/pictures/21.jpg);
}

.bg-22 {
  background-image: url(../images/pictures/22.jpg);
}

.bg-23 {
  background-image: url(../images/pictures/23.jpg);
}

.bg-24 {
  background-image: url(../images/pictures/24.jpg);
}

.bg-25 {
  background-image: url(../images/pictures/25.jpg);
}

.bg-26 {
  background-image: url(../images/pictures/26.jpg);
}

.bg-27 {
  background-image: url(../images/pictures/27.jpg);
}

.bg-28 {
  background-image: url(../images/pictures/28.jpg);
}

.bg-29 {
  background-image: url(../images/pictures/29.jpg);
}

.bg-30 {
  background-image: url(../images/pictures/30.jpg);
}

/*Demo Colors*/
.demo-color {
  width: 100%;
  line-height: 45px;
  padding-left: 20px;
  text-transform: capitalize;
  border-bottom: solid 1px rgba(255, 255, 255, 0.05);
}

.demo-color span {
  font-size: 10px;
  position: absolute;
  right: 20px;
  line-height: 48px;
  color: rgba(255, 255, 255, 0.5);
}

/*Highlight Changer*/
.theme-change-transition {
  transition: all 150ms ease !important;
}

.highlight-changer a {
  width: 20%;
  float: left;
  text-align: center;
  line-height: 42px;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: -5px;
}

.highlight-changer a i {
  margin-top: 10px;
  display: block;
  font-size: 26px !important;
}

.highlight-changer a span {
  font-size: 11px;
  display: block;
  margin-top: -10px;
  margin-bottom: -5px;
}

.background-changer a {
  width: 20%;
  float: left;
  text-align: center;
  line-height: 42px;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: -5px;
}

.background-changer a i {
  margin-top: 10px;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  color: rgba(255, 255, 255, 0);
  margin: 10px auto 0px auto;
}

.background-changer .bg-theme {
  border: solid 1px rgba(0, 0, 0, 0.2);
}

.background-changer a span {
  font-size: 11px;
  display: block;
  margin-top: -10px;
  margin-bottom: -5px;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__container {
  position: relative;
  box-sizing: border-box;
}

.splide__list {
  margin: 0 !important;
  padding: 0 !important;
  width: -webkit-max-content;
  width: max-content;
  will-change: transform;
}

.splide.is-active .splide__list {
  display: flex;
}

.splide__pagination {
  display: inline-flex;
  align-items: center;
  width: 95%;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.splide__pagination li {
  list-style-type: none;
  display: inline-block;
  line-height: 1;
  margin: 0;
}

.splide {
  visibility: hidden;
}

.splide,
.splide__slide {
  position: relative;
  outline: none;
}

.splide__slide {
  box-sizing: border-box;
  list-style-type: none !important;
  margin: 0;
  flex-shrink: 0;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__slider {
  position: relative;
}

.splide__spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #999;
  border-left-color: transparent;
  animation: splide-loading 1s linear infinite;
}

.splide__track {
  position: relative;
  z-index: 0;
}

.splide--draggable > .splide__track > .splide__list > .splide__slide {
  -webkit-user-select: none;
  user-select: none;
}

.splide--fade > .splide__track > .splide__list {
  display: block;
}

.splide--fade > .splide__track > .splide__list > .splide__slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}

.splide--fade > .splide__track > .splide__list > .splide__slide.is-active {
  position: relative;
  z-index: 1;
  opacity: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide--ttb > .splide__track > .splide__list {
  display: block;
}

.splide--ttb > .splide__pagination {
  width: auto;
}

.splide__arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  opacity: 0.7;
  background: #ccc;
}

.splide__arrow svg {
  width: 1.2em;
  height: 1.2em;
}

.splide__arrow:hover {
  cursor: pointer;
  opacity: 0.9;
}

.splide__arrow:focus {
  outline: none;
}

.splide__arrow--prev {
  left: 1em;
}

.splide__arrow--prev svg {
  transform: scaleX(-1);
}

.splide__arrow--next {
  right: 1em;
}

.splide__pagination {
  position: absolute;
  z-index: 1;
  bottom: 0.5em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
}

.splide__pagination__page {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 50%;
  margin: 0px 7px;
  padding: 0;
  transition: transform 0.2s linear;
  border: none;
  opacity: 0.7;
}

.splide__pagination__page.is-active {
  transform: scale(1.4);
  background: #fff;
}

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: 0.9;
}

.splide__pagination__page:focus {
  outline: none;
}

.splide__progress__bar {
  width: 0;
  height: 3px;
  background: #ccc;
}

.splide--nav > .splide__track > .splide__list > .splide__slide {
  border: 3px solid transparent;
}

.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
  border-color: #000;
}

.splide--nav > .splide__track > .splide__list > .splide__slide:focus {
  outline: none;
}

.splide--rtl > .splide__arrows .splide__arrow--prev,
.splide--rtl > .splide__track > .splide__arrows .splide__arrow--prev {
  right: 1em;
  left: auto;
}

.splide--rtl > .splide__arrows .splide__arrow--prev svg,
.splide--rtl > .splide__track > .splide__arrows .splide__arrow--prev svg {
  transform: scaleX(1);
}

.splide--rtl > .splide__arrows .splide__arrow--next,
.splide--rtl > .splide__track > .splide__arrows .splide__arrow--next {
  left: 1em;
  right: auto;
}

.splide--rtl > .splide__arrows .splide__arrow--next svg,
.splide--rtl > .splide__track > .splide__arrows .splide__arrow--next svg {
  transform: scaleX(-1);
}

.splide--ttb > .splide__arrows .splide__arrow,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow {
  left: 50%;
  transform: translate(-50%);
}

.splide--ttb > .splide__arrows .splide__arrow--prev,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow--prev {
  top: 1em;
}

.splide--ttb > .splide__arrows .splide__arrow--prev svg,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow--prev svg {
  transform: rotate(-90deg);
}

.splide--ttb > .splide__arrows .splide__arrow--next,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow--next {
  top: auto;
  bottom: 1em;
}

.splide--ttb > .splide__arrows .splide__arrow--next svg,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow--next svg {
  transform: rotate(90deg);
}

.splide--ttb > .splide__pagination {
  display: flex;
  flex-direction: column;
  bottom: 50%;
  left: auto;
  right: 0.5em;
  transform: translateY(50%);
}

.slider-cover-dots .splide__pagination {
  transform: translate(-50%, -40px) !important;
}
/* Estilos globales para todos los Select2 */
.select2-container--default .select2-selection--single {
    border: 1px solid #ebebeb;  /* borde delgado y color */
    border-radius: 8px;          /* puntas redondeadas */
    height: 55px;                /* altura del select */
    line-height: 43px;           /* alinear texto verticalmente */
    padding: 0 10px;             /* padding interno */
    font-size: 14px;             /* tamaño de fuente */
    background-color: #fff;      /* fondo blanco */
}

/* Opcional: cuando esté enfocado */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single.select2-selection--focus {
    border-color: #ebebeb;       /* mismo borde al enfocar */
    box-shadow: none;            /* quitar sombra */
}
/* Contenedor Principal (Estilo Apple Sólido) */
.swal2-popup {
    background: #ffffff !important; /* Fondo blanco sólido, sin transparencia */
    border-radius: 24px !important;
    /* Sombra amplia y suave típica de macOS para dar profundidad sin usar cristal */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    padding: 2.5em 1.5em 2em !important;
    border: none !important;
}

/* Título con tipografía nativa de Apple */
.swal2-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #1c1c1e !important; /* Gris muy oscuro de iOS */
    margin-bottom: 0.5em !important;
}

/* Texto de descripción */
.swal2-html-container {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
    color: #3a3a3c !important; /* Gris medio nativo */
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
}

/* Botón de Confirmación (Estilo iOS Azul Sólido) */
.swal2-confirm.swal2-styled {
    background: #007aff !important; /* Azul nativo de Apple */
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    box-shadow: none !important; /* Apple prefiere botones planos sin sombra externa */
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.swal2-confirm.swal2-styled:hover {
    background: #0062cc !important;
    transform: scale(0.97) !important; /* Efecto de presión nativo */
}

/* Botón de Cancelar (Gris secundario de Apple) */
.swal2-cancel.swal2-styled {
    background: #f2f2f7 !important; /* Gris claro de iOS */
    color: #007aff !important; /* Texto azul para la acción secundaria */
    border-radius: 12px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border: none !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.swal2-cancel.swal2-styled:hover {
    background: #e5e5ea !important;
    transform: scale(0.97) !important;
}

/* Ajuste de los Iconos */
.swal2-icon {
    border-width: 3px !important;
    margin-top: 0 !important;
    margin-bottom: 1.5em !important;
    transform: scale(0.85); /* Usamos transform en lugar de scale para mejor compatibilidad */
}



/* --- MODERNIZACIÓN VISUAL BOUTME --- */

/* 1. Fondo de la App: Un degradado sutil para que el Glassmorphism destaque */
body {
    background: radial-gradient(circle at top left, #f8fafc, #ffffff) !important;
}

/* 2. Las 6 Tarjetas Principales (Grid) */
/* Asumiendo que tienen una clase común o atacando sus contenedores */
.content-box, [class*="col-"] .card, .card-style {
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 24px !important; /* Bordes más circulares */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
}

.content-box:hover {
    transform: translateY(-5px) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1) !important;
}




/* Color de la barra con gradiente */
.bg-highlight, .progress-bar-inner {
    background: linear-gradient(90deg, #101275, #21b2c1) !important;
}




body, h1, h2, h3, h4, h5, h6, .header-title span, p {
    font-family: 'Inter', sans-serif !important;
}
/* ==========================================================================
   LÓGICA ADAPTADA PARA DESKTOP (COORDINADO CON JAVASCRIPT)
   ========================================================================== */
@media (min-width: 1024px) {
    /* 1. Forzar el contenedor del menú lateral a encajarse al 25% de la pantalla (Excepto en Chat) */
    body:not(.view-chat-interface):not(.shop-front) #menu-main, 
    body:not(.view-chat-interface):not(.shop-front) #menu-sidebar-left-2, 
    body:not(.view-chat-interface):not(.shop-front) .menu-sidebar-left-2 {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(0px) !important; /* Anula la animación de ocultado móvil */
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 999 !important;
        border-radius: 0 !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.05) !important;
    }

    /* 2. Forzar al Header a ocupar exactamente el 75% de la derecha (Excepto en Chat) */
    body:not(.view-chat-interface):not(.shop-front) .header { 
        left: 25% !important; 
        right: 0 !important;
        width: 75% !important;
        min-width: 75% !important;
        max-width: 75% !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    .theme-light .bg-gradient-fade-small {
        background: linear-gradient(to bottom, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 0.2) 70%, rgba(240, 240, 240, 0.9) 100%, #f0f0f0 100%);
    }

    /* 3. Forzar al Footer Bar a ocupar exactamente el 75% de la derecha (Excepto en Chat) */
    body:not(.view-chat-interface):not(.shop-front) #footer-bar { 
        left: 25% !important; 
        right: 0 !important;
        width: 75% !important;
        min-width: 75% !important;
        max-width: 75% !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Estilo responsivo flotante para los modales inferiores activos (Excepto en Chat) */
    body:not(.view-chat-interface):not(.shop-front) .menu-box-bottom.menu-active {
        transform: translate3d(0%, 0, 0) !important;
        width: 50% !important;
        left: 40% !important;
        bottom: 15px !important; 
        border-radius: 16px !important; 
        transition: transform 0.3s ease !important;
        z-index: 1001 !important; /* Por encima del hider */
    }

    /* 4. Adaptación del contenido central (Excepto en Chat) */
    body:not(.view-chat-interface):not(.shop-front) .page-content {
        left: 25% !important;
        right: 0 !important;
        width: 85% !important;
        min-width: 75% !important;
        max-width: 75% !important;
        margin: 0 !important;
        padding-left: 50px !important;
        padding-right: 50px !important;
        padding-top: 30px !important;
        box-sizing: border-box !important;
        position: relative;
    }
    
    /* Configuración por defecto del hider en PC (Excepto en Chat) */
    body:not(.view-chat-interface):not(.shop-front) .menu-hider {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background-color: rgba(0, 0, 0, 0.4) !important;
        z-index: 1000 !important; /* Entre la barra lateral fija y el modal activo */
        display: block !important; /* Siempre en block, controlamos con opacidad y visibilidad */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 300ms ease, visibility 300ms ease !important;
    }

    /* ESTADO ACTIVO: Cuando JS inyecte .menu-active (Excepto en Chat) */
    body:not(.view-chat-interface):not(.shop-front) .menu-hider.menu-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body:not(.view-chat-interface):not(.shop-front) .header-icon-1 {
        display: none;
    }
}

/* ==========================================================================
   BOUTME DESIGN SYSTEM v2.0 — APPLE / PREMIUM SAAS
   Foundation tokens + base overrides. Must stay at the END of this file:
   it neutralizes the global glassmorphism block (~line 6999) via cascade.
   ========================================================================== */

:root {
    --ds-bg: #f5f5f7;
    --ds-surface: #ffffff;
    --ds-text-primary: #1d1d1f;
    --ds-text-secondary: #6e6e73;
    --ds-text-muted: #aeaeb2;
    --ds-border: rgba(0, 0, 0, 0.06);
    --ds-accent: #1e5b85;
    --ds-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06);
    --ds-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.10);
    --ds-radius-card: 16px;
    --ds-radius-sm: 10px;
}

body {
    background: var(--ds-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Apple system font stack (overrides the unloaded 'Inter' rule above) */
body, h1, h2, h3, h4, h5, h6, .header-title span, p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif !important;
}

/* Neutralize blanket glassmorphism: clean white cards, hairline border */
.content-box, [class*="col-"] .card, .card-style {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-card) !important;
    box-shadow: var(--ds-shadow-card) !important;
}

/* Solid surface only on cards that don't carry a background image */
.card-style:not(.preload-img) {
    background-color: var(--ds-surface) !important;
}

/* Header: dark glass */
.header {
    background: rgba(22, 22, 24, 0.95) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.22) !important;
}

/* Footer bar: light glass */
#footer-bar {
    background: rgba(249, 249, 251, 0.94) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--ds-border);
}

/* Hairline dividers */
.divider {
    background-color: var(--ds-border) !important;
    height: 1px !important;
}

/* Accent progress / highlight bars */
.bg-highlight, .progress-bar-inner {
    background: linear-gradient(90deg, #007aff, #34aadc) !important;
    border-radius: 100px;
}

/* Tables */
.table-responsive {
    border-radius: 14px;
    box-shadow: var(--ds-shadow-card);
}
.table-responsive table { margin-bottom: 0; }
.table-responsive th {
    background: var(--ds-bg);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ds-text-secondary);
}
.table-responsive td {
    background: var(--ds-surface);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.table-responsive tbody tr:hover td { background: rgba(0, 122, 255, 0.04); }

/* ==========================================================================
   SETTINGS VIEW (app/Views/settings/index.php) — scoped via .page-settings
   ========================================================================== */

.page-settings .card-style {
    margin-bottom: 18px;
    overflow: hidden;
}

/* Hero banner */
.page-settings .preload-img { border-radius: 20px !important; }
.page-settings .preload-img h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Section titles */
.page-settings .content h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text-primary);
}

/* Collapsible row headers — iOS Settings style */
.page-settings h5[data-bs-toggle="collapse"] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s ease;
}
.page-settings h5[data-bs-toggle="collapse"]:active { opacity: 0.55; }

/* Leading icon chip */
.page-settings h5[data-bs-toggle="collapse"] > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--ds-radius-sm);
    background: rgba(0, 122, 255, 0.10);
    color: var(--ds-accent);
    font-size: 15px;
}

/* Trailing chevron: kill float, rotate when expanded */
.page-settings h5[data-bs-toggle="collapse"] .fa-angle-down {
    float: none !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    color: var(--ds-text-muted);
    opacity: 1 !important;
    font-size: 13px;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.page-settings h5[aria-expanded="true"] .fa-angle-down { transform: rotate(180deg); }

/* Labels & fields */
.page-settings label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-secondary);
    margin-bottom: 6px;
}
.page-settings .form-control {
    background-color: var(--ds-bg);
    border: 1px solid transparent;
    border-radius: 12px;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--ds-text-primary);
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.page-settings .form-control:focus {
    background-color: var(--ds-surface);
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
    outline: none;
}

/* Native selects: flat look + custom chevron */
.page-settings select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Color pickers */
.page-settings input[type="color"].form-control {
    height: 46px;
    padding: 6px;
    cursor: pointer;
}

/* Switch-style radios & checkboxes: iOS green when on */
.page-settings .form-check-input {
    box-shadow: none !important;
    cursor: pointer;
}
.page-settings .form-check-input:checked {
    background-color: #34c759 !important;
    border-color: #34c759 !important;
}

/* Theme / icon / font carousels */
.page-settings .carousel-item img {
    border-radius: 16px;
    box-shadow: var(--ds-shadow-card);
    object-fit: cover;
}
.page-settings .text-center > .btn.btn-sm {
    width: 44px;
    height: 44px;
    margin: 12px 6px 0;
    padding: 0;
    border-radius: 50%;
    background: var(--ds-bg);
    color: var(--ds-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}
.page-settings .text-center > .btn.btn-sm:active {
    transform: scale(0.92);
    background: #e8e8ed;
}
.page-settings .text-center > .btn.btn-sm i { font-size: 18px !important; }

/* Widgets list (sortable) */
.page-settings .collapse .table-responsive {
    box-shadow: none;
    border-radius: 0;
}
.page-settings #widgets-table td {
    background: transparent;
    padding: 14px 8px;
    border-bottom: 1px solid var(--ds-border);
    font-size: 15px;
    font-weight: 500;
    color: var(--ds-text-primary);
}
.page-settings #widgets-table tr:last-child td { border-bottom: none; }
.page-settings #widgets-table .drag-handle { color: var(--ds-text-muted) !important; }
.page-settings #widgets-table tr.sortable-ghost td { background: rgba(0, 122, 255, 0.06); }

/* Summernote editor (Custom Area) */
.page-settings .note-editor.note-frame {
    border: 1px solid var(--ds-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none;
}
.page-settings .note-editor .note-toolbar { background: var(--ds-bg); }

/* Save button */
.page-settings input[type="submit"] {
    border-radius: 14px !important;
    height: 52px;
    font-size: 13px;
    letter-spacing: 1px;
    background: var(--ds-text-primary) !important;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-settings input[type="submit"]:active {
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Desktop: admin-style settings — compact header, 2-column grid,
   sections always expanded (accordions are a mobile pattern) */
@media (min-width: 1024px) {
    .page-settings .card-style.preload-img {
        max-width: 1280px;
        height: 140px !important;
        margin: 0 auto 24px !important;
        border-radius: 20px !important;
    }
    .page-settings .preload-img h1 { font-size: 26px; }
    .page-settings .preload-img i.fa-3x { font-size: 34px; }

    .page-settings form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
        max-width: 1280px;
        margin: 0 auto;
    }
    .page-settings form .card.card-style { margin: 0 !important; }
    /* Save button row spans both columns, centered */
    .page-settings form > .content {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: 420px;
        margin: 8px 0 0 !important;
    }

    /* Admin mode: every section visible, headers become plain labels */
    .page-settings .collapse { display: block !important; }
    .page-settings .collapsing { height: auto !important; transition: none !important; }
    .page-settings h5[data-bs-toggle="collapse"] { pointer-events: none; cursor: default; }
    .page-settings h5[data-bs-toggle="collapse"] .fa-angle-down { display: none; }
}

/* ==========================================================================
   PROFILE VIEW (app/Views/profile/index.php)
   ap-* classes are namespaced to this view (also used inside the
   #menu-password bottom sheet, which sits outside .page-profile).
   ========================================================================== */

.ap-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 0 20px;
    margin: 24px 0 8px;
}
.ap-group {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow-card);
    overflow: hidden;
    margin: 0 16px;
}
.ap-row {
    display: flex;
    align-items: center;
    padding: 0 16px;
    min-height: 50px;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ap-row:last-child { border-bottom: none; }
.ap-row:active { background: rgba(0, 0, 0, 0.03); }
.ap-row-icon { font-size: 17px; color: var(--ds-accent); width: 24px; text-align: center; }
.ap-row-body { flex: 1; padding: 9px 0; }
.ap-row-label { font-size: 16px; color: var(--ds-text-primary); }
.ap-row-sub { font-size: 13px; color: var(--ds-text-muted); margin-top: 2px; }
.ap-field-inline {
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--ds-text-secondary);
    text-align: right;
    width: 100%;
}
.ap-field-inline:focus { color: var(--ds-text-primary); }
.ap-field-inline::placeholder { color: var(--ds-text-muted); }

/* Avatar */
.ap-avatar-wrap { display: flex; flex-direction: column; align-items: center; padding: 32px 0 16px; }
.ap-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #e5e5ea;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 0 4px var(--ds-surface), var(--ds-shadow-hover);
}
.ap-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ap-avatar-camera {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ap-avatar-camera i { color: #fff; font-size: 12px; }
.ap-avatar-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text-primary);
    margin-top: 16px;
}
.ap-avatar-email { font-size: 15px; color: var(--ds-text-secondary); margin-top: 4px; }

/* Buttons */
.ap-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 16px 16px 0;
    height: 50px;
    border-radius: 14px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.ap-btn:active { transform: scale(0.98); filter: brightness(0.95); }
.ap-btn-light { background: rgba(0, 122, 255, 0.10); color: var(--ds-accent) !important; }
.ap-btn-red { background: rgba(255, 59, 48, 0.10); color: #ff3b30 !important; }

/* Status badges */
.ap-badge {
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}
.ap-badge-on { background: rgba(52, 199, 89, 0.15); color: #1d7a3c; }
.ap-badge-off { background: #e8e8ed; color: var(--ds-text-secondary); }

/* Menus: never let entrance animations or stacking hide an open menu.
   styleopt.css starts every .card-style at opacity:0 (fadeUp) — inside a menu
   that starts display:none the animation can misfire, so disable it there. */
.menu .card-style, .menu .content-box {
    animation: none !important;
    opacity: 1 !important;
}
.menu.menu-active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Desktop: admin-style profile — sticky identity card left, content right */
@media (min-width: 1024px) {
    .page-profile {
        display: grid;
        grid-template-columns: 320px minmax(0, 720px);
        justify-content: center;
        column-gap: 28px;
        row-gap: 0;
        align-items: start;
    }
    .page-profile > * { grid-column: 2; }
    .page-profile > .ap-avatar-wrap {
        grid-column: 1;
        grid-row: 1 / span 40;
        align-self: start;
        position: sticky;
        top: 96px;
        background: var(--ds-surface);
        border: 1px solid var(--ds-border);
        border-radius: var(--ds-radius-card);
        box-shadow: var(--ds-shadow-card);
        padding: 40px 24px;
    }
    .page-profile .ap-group { margin-left: 0; margin-right: 0; }
    .page-profile .ap-section-label { padding: 0 4px; margin-top: 28px; }
    .page-profile .ap-row { min-height: 54px; }
    .page-profile .ap-btn {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        max-width: 360px;
    }
}

/* ==========================================================================
   DASHBOARD VIEW (app/Views/dashboard/index.php)
   Moved out of the view's inline <style> block and unified with the
   design system. Mobile keeps App Kit's hero + pull-up sheet untouched.
   ========================================================================== */

.iconswrap { display: flex; flex-wrap: wrap; justify-content: center; }

/* Hidden on mobile, shown on desktop */
.desktop-hero-logo, .hero-quick-stats { display: none; }
.hero-content-wrapper { display: flex; align-items: center; width: 100%; margin-top: 50px !important; }

/* App icon grid — Apple-style on every viewport */
.iconswrap .card.card-style {
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: var(--ds-shadow-card) !important;
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s ease !important;
}
.iconswrap .p-3 { padding: 18px 8px !important; }
.iconswrap h4 {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    color: var(--ds-text-secondary) !important;
    opacity: 1 !important;
    margin-top: 8px !important;
}

/* ==========================================================================
   SAAS DESKTOP LAYER — fixed 280px sidebar + fluid content (≥1024px)
   Overrides the percentage-based desktop block above; keep at END of file.
   ========================================================================== */

.sidebar-desktop-actions { display: none; }

@media (min-width: 1024px) {

    /* ── Layout geometry: fixed sidebar, fluid content ─────────────── */
    body:not(.view-chat-interface):not(.shop-front) #menu-main,
    body:not(.view-chat-interface):not(.shop-front) #menu-sidebar-left-2,
    body:not(.view-chat-interface):not(.shop-front) .menu-sidebar-left-2 {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        background: #f9f9fb !important;
        border-right: 1px solid var(--ds-border) !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        padding-bottom: 24px !important;
    }
    body:not(.view-chat-interface):not(.shop-front) .header {
        left: 280px !important;
        width: calc(100% - 280px) !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    body:not(.view-chat-interface):not(.shop-front) .page-content {
        left: 280px !important;
        width: calc(100% - 280px) !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 36px 48px 80px !important;
    }
    /* SaaS apps don't show a mobile tab bar — quick actions live in the sidebar */
    body:not(.view-chat-interface):not(.shop-front) #footer-bar { display: none !important; }

    /* Bottom-sheet modals centered over the content area */
    body:not(.view-chat-interface):not(.shop-front) .menu-box-bottom.menu-active {
        width: 100% !important;
        max-width: 720px !important;
        left: calc(200px + ((100% - 280px) / 2) - 260px) !important;
    }

    /* ── Sidebar: flat, light, SaaS-style ──────────────────────────── */
    .sidebar-desktop-actions { display: block; }

    #menu-sidebar-left-2 .card-style {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 6px 2px !important;
        animation: none !important;
        opacity: 1 !important;
    }
    #menu-sidebar-left-2 .content { padding: 6px 12px !important; margin: 0 !important; }

    /* User chip at the top */
    #menu-sidebar-left-2 .bg-theme {
        background: var(--ds-surface) !important;
        border: 1px solid var(--ds-border) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    /* Section titles */
    #menu-sidebar-left-2 h5.text-uppercase {
        font-size: 11px !important;
        letter-spacing: 0.7px;
        color: var(--ds-text-muted) !important;
        opacity: 1 !important;
        padding: 10px 12px 4px !important;
    }

    /* Nav items: pill hover + active state */
    #menu-sidebar-left-2 .list-group a {
        border: none !important;
        border-radius: 10px !important;
        padding: 9px 12px !important;
        margin-bottom: 2px !important;
        transition: background 0.15s ease;
    }
    #menu-sidebar-left-2 .list-group a:hover { background: rgba(0, 0, 0, 0.05) !important; }
    #menu-sidebar-left-2 .list-group a.is-active { background: rgba(0, 122, 255, 0.10) !important; }
    #menu-sidebar-left-2 .list-group a.is-active span {
        color: var(--ds-accent) !important;
        font-weight: 600 !important;
    }
    #menu-sidebar-left-2 .list-group a span { font-size: 14px !important; }

    /* Icon chips: blue tint instead of dark gradient */
    #menu-sidebar-left-2 .list-group a > i:first-child {
        background: rgba(0, 122, 255, 0.10) !important;
        background-image: none !important;
        color: var(--ds-accent) !important;
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        border-radius: 8px !important;
        text-align: center;
    }
    /* Trailing chevrons: muted */
    #menu-sidebar-left-2 .list-group a > i.fa-angle-right { color: var(--ds-text-muted) !important; opacity: 0.6; }

    /* ── Dashboard: SaaS hero + stats grid ─────────────────────────── */
    .page-content .card.preload-img.position-fixed {
        position: relative !important;
        height: 200px !important;
        background-image: linear-gradient(135deg, #174969 0%, #0d293c 100%) !important;
        background-size: auto !important;
        border-radius: 20px !important;
        border: none !important;
        box-shadow: 0 12px 32px rgba(13, 41, 60, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 36px !important;
        margin-bottom: 8px !important;
        overflow: hidden !important;
    }
    .page-content .card.preload-img.position-fixed .card-overlay { display: none !important; }

    .hero-content-wrapper {
        justify-content: space-between !important;
        margin-top: 0 !important;
    }
    .hero-left-side { display: flex !important; align-items: center !important; }
    .desktop-hero-logo {
        display: block !important;
        width: 88px;
        height: 88px;
        border-radius: 16px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        margin-right: 24px;
    }
    .page-content .card.preload-img .card-bottom {
        position: relative !important;
        left: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .page-content .card.preload-img h1 {
        color: #ffffff !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em;
        margin: 0 !important;
    }
    .page-content .card.preload-img h1 br { display: none; }

    .hero-quick-stats { display: flex !important; gap: 14px !important; }
    .stat-badge {
        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        padding: 12px 22px !important;
        border-radius: 14px !important;
        text-align: center !important;
        min-width: 104px !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .stat-badge i { font-size: 15px !important; margin-bottom: 4px !important; display: block !important; }
    .stat-badge .stat-val { color: #fff !important; font-size: 21px !important; font-weight: 700 !important; display: block !important; line-height: 1.1 !important; }
    .stat-badge .stat-lbl { color: rgba(255, 255, 255, 0.6) !important; font-size: 11px !important; text-transform: uppercase !important; font-weight: 600 !important; letter-spacing: 0.5px; }

    /* Mobile spacer + pull-up sheet chrome: not needed on desktop */
    .page-content .card.bg-transparent[data-card-height="340"] { display: none !important; }
    .page-content > .card.card-style.mx-0.pb-5 {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        animation: none !important;
        opacity: 1 !important;
    }
    .page-content > .card.card-style.mx-0.pb-5 > .divider { display: none !important; }

    /* Icon grid: hover lift */
    .iconswrap .card.card-style:hover {
        transform: translateY(-4px) !important;
        box-shadow: var(--ds-shadow-hover) !important;
    }

    /* Stats section: 2-column grid of equal cards */
    #cardstats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        align-items: stretch !important;
    }
    #cardstats .card.card-style {
        margin: 0 !important;
        height: auto !important;
        min-height: 420px;
        max-height: 480px;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #cardstats .card.card-style .content {
        width: 100% !important;
        margin: auto 0 !important;
        padding: 24px !important;
        box-sizing: border-box !important;
    }
    #cardstats .card.card-style .content:not(.mb-0) {
        text-align: center !important;
        margin: auto !important;
    }

    /* Admin launcher: 6 compact tiles per row */
    .iconswrap > [class*="col-"] {
        flex: 0 0 16.666% !important;
        max-width: 16.666% !important;
        padding: 0 8px;
    }
    .iconswrap .p-3 { padding: 16px 6px !important; }
    .iconswrap .p-3 i { font-size: 24px !important; }
    .iconswrap h4 { font-size: 10px !important; margin-top: 6px !important; }

    /* Pull-up sheet content hugs the new grid */
    .page-content > .card.card-style.mx-0.pb-5 > .content {
        padding: 24px 0 0 !important;
        margin: 0 !important;
    }
    #cardstats { margin-top: 24px; }
    #cardstats .card.card-style { min-height: 360px; }
}

/* Wide desktop: KPI cards in 3 columns, link stats spanning full width */
@media (min-width: 1440px) {
    #cardstats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    #cardstats > .card.card-style:nth-child(4) { grid-column: 1 / -1; min-height: auto; }
}

/* ==========================================================================
   GLOBAL COMPONENTS — Apple forms, sheets, DataTables (inherited by ALL views)
   ========================================================================== */

/* Labels */
.page-content label,
.menu label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-secondary);
    margin-bottom: 6px;
}

/* Text fields, selects, textareas */
.page-content .form-control,
.menu .form-control {
    background-color: var(--ds-bg);
    border: 1px solid transparent;
    border-radius: 12px;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--ds-text-primary);
    box-shadow: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.page-content .form-control:focus,
.menu .form-control:focus {
    background-color: var(--ds-surface);
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
    outline: none;
}
.page-content select.form-control,
.menu select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}
.page-content textarea.form-control,
.menu textarea.form-control { min-height: 100px; }

/* Switches & checks: iOS green when on */
.page-content .form-check-input,
.menu .form-check-input { box-shadow: none !important; cursor: pointer; }
.page-content .form-check-input:checked,
.menu .form-check-input:checked {
    background-color: #34c759 !important;
    border-color: #34c759 !important;
}

/* Buttons: unified radius + press feedback */
.page-content .btn,
.menu .btn {
    border-radius: 12px !important;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.page-content .btn:active,
.menu .btn:active { transform: scale(0.97); }

/* Bottom sheets & modals */
.menu-box-bottom.menu-box-detached {
    border-radius: 22px;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
}
.menu-box-modal { border-radius: 18px; }
.menu-title h1 { font-weight: 700; letter-spacing: -0.02em; }

/* DataTables skin (used across module list views) */
.dataTables_wrapper { font-size: 14px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--ds-bg);
    border: 1px solid transparent !important;
    border-radius: 10px;
    padding: 7px 12px;
    margin-left: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
    background: var(--ds-surface);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 9px !important;
    border: none !important;
    background: transparent !important;
    color: var(--ds-text-secondary) !important;
    padding: 5px 11px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(0, 122, 255, 0.10) !important;
    color: var(--ds-accent) !important;
}
.dataTables_wrapper .dataTables_info { color: var(--ds-text-muted); font-size: 12px; }

/* Select2 single selects share the Apple field look */
.select2-container--default .select2-selection--single {
    background-color: var(--ds-bg) !important;
    border: 1px solid transparent !important;
    cursor: text;
    height: 50px !important;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

/* ==========================================================================
   MODERN UPLOADS — App Kit .file-data becomes an Apple-style dropzone
   ========================================================================== */

.page-content .file-data,
.menu .file-data {
    position: relative;
    border: 2px dashed rgba(0, 122, 255, 0.35);
    border-radius: 16px;
    background: rgba(0, 122, 255, 0.04);
    padding: 22px 16px !important;
    margin: 0 auto 12px;
    max-width: 420px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.page-content .file-data:hover,
.menu .file-data:hover {
    background: rgba(0, 122, 255, 0.08);
    border-color: var(--ds-accent);
}
.file-data input.upload-file {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 2;
}
.file-data .upload-file-text {
    color: var(--ds-accent) !important;
    font-weight: 600;
    margin: 0 0 2px;
    pointer-events: none;
}
.file-data .upload-file-text::before {
    content: "\f0ee";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    display: block;
    font-size: 22px;
    margin-bottom: 6px;
}
.file-data small { color: var(--ds-text-muted); position: relative; }

/* ==========================================================================
   AUTO TWO-COLUMN DESKTOP — any view with 3+ top-level cards becomes a
   2-column admin grid; heroes and non-card elements span the full width
   ========================================================================== */

@media (min-width: 1200px) {
    body:not(.view-chat-interface):not(.shop-front)
        .page-content:has(> .card.card-style ~ .card.card-style ~ .card.card-style) {
        display: grid;
        /* columnas limitadas + centrado — sin tocar el offset del sidebar */
        grid-template-columns: repeat(2, minmax(0, 570px));
        justify-content: center;
        gap: 20px;
        align-items: start;
    }
    body:not(.view-chat-interface):not(.shop-front)
        .page-content:has(> .card.card-style ~ .card.card-style ~ .card.card-style) > .card.card-style {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    body:not(.view-chat-interface):not(.shop-front)
        .page-content:has(> .card.card-style ~ .card.card-style ~ .card.card-style) > :not(.card-style),
    body:not(.view-chat-interface):not(.shop-front)
        .page-content:has(> .card.card-style ~ .card.card-style ~ .card.card-style) > .module-hero {
        grid-column: 1 / -1;
    }
}

/* Module nav section in sidebar (built by footer.php from #footer-bar) */
.sidebar-module-nav { display: none; }
@media (min-width: 1024px) {
    .sidebar-module-nav { display: block; }

    /* Default admin column for every module view: top-level cards centered
       and capped. Views with their own grids (settings/profile/dashboard)
       override this with more specific rules. */
    body:not(.view-chat-interface):not(.shop-front) .page-content > .card.card-style {
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================================
   LINKS VIEW (app/Views/links/index.php) — scoped via .page-links
   ========================================================================== */

.page-links .btn-add-link {
    background-color: #1c1c1e;
    color: #ffffff;
    border-radius: 50px;
    padding: 16px 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    display: block;
    margin: 0 auto 30px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    border: 1px solid #1c1c1e;
}
.page-links .btn-add-link:hover {
    background-color: #2c2c2e;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.page-links .links-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text-primary);
    font-size: 20px;
}
.page-links .links-hint { color: var(--ds-text-muted); font-size: 12px; }

.page-links .apple-list-container { border-radius: 16px; }
.page-links #tablelinks {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.page-links #tablelinks tr {
    background-color: var(--ds-surface);
    border-radius: 12px;
    box-shadow: var(--ds-shadow-card);
}
.page-links #tablelinks td {
    padding: 12px 15px;
    vertical-align: middle;
    background: transparent;
    border-bottom: none;
}
.page-links #tablelinks td:first-child { border-radius: 12px 0 0 12px; }
.page-links #tablelinks td:last-child { border-radius: 0 12px 12px 0; }
.page-links #tablelinks .drag-cell { width: 40px; color: var(--ds-text-muted); padding-left: 15px; }
.page-links #tablelinks .myDragClass { font-size: 18px; cursor: grab; }
.page-links #tablelinks .actions-cell { width: 100px; text-align: right; padding-right: 15px; }
.page-links .link-action-edit { color: var(--ds-accent); font-size: 19px; }
.page-links .link-action-delete { color: #ff3b30; font-size: 19px; }

.page-links .apple-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
    display: block;
}
.page-links .update-text {
    font-weight: 500;
    font-size: 15px;
    color: var(--ds-text-primary);
    outline: none;
}

/* Top toast */
.apple-toast {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(28, 28, 30, 0.96);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 99999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.apple-toast.show { top: 30px; opacity: 1; }
.apple-toast i { color: #34c759; font-size: 16px; }

/* Desktop: centered admin column */
@media (min-width: 1024px) {
    .page-links > .px-3,
    .page-links > .content {
        max-width: 860px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .page-links .btn-add-link { max-width: 360px; }
    .page-links #tablelinks tr { transition: box-shadow 0.2s ease, transform 0.2s ease; }
    .page-links #tablelinks tr:hover { box-shadow: var(--ds-shadow-hover); }
}

/* ==========================================================================
   CARD INFO VIEW (app/Views/cardinfo/index.php) — scoped via .page-cardinfo
   App Kit .input-style floating-label fields, Apple-ified
   ========================================================================== */

.page-cardinfo .input-style.has-borders {
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 12px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-cardinfo .input-style:focus-within {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}
.page-cardinfo .input-style .form-control,
.page-cardinfo .input-style select {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0;
}
.page-cardinfo .input-style label {
    background: var(--ds-surface) !important;
    border-radius: 6px;
    padding: 0 6px;
    color: var(--ds-text-secondary) !important;
}
.page-cardinfo .input-style em { color: var(--ds-text-muted); }
.page-cardinfo .file-data { min-width: 260px; }

/* Desktop: form + quick links side by side.
   width:100% on the grid items is required — the generic module rule sets
   margin auto !important, which would otherwise shrink-fit grid children. */
@media (min-width: 1024px) {
    .page-cardinfo {
        display: grid;
        grid-template-columns: minmax(0, 760px) 320px;
        justify-content: center;
        align-items: start;
        column-gap: 24px;
        row-gap: 0;
    }
    .page-cardinfo > * { grid-column: 1 / -1; }
    .page-cardinfo > .card.card-style { width: 100% !important; max-width: none !important; }
    .page-cardinfo > .cardinfo-form-card {
        grid-column: 1;
        margin: 0 !important;
    }
    .page-cardinfo > .cardinfo-form-card + .card-style {
        grid-column: 2;
        margin: 0 !important;
        position: sticky;
        top: 96px;
    }
}

/* ==========================================================================
   CONTACTS VIEW (app/Views/contacts/index.php) — scoped via .page-contacts
   ========================================================================== */

.page-contacts .search-box {
    border-radius: 14px !important;
    background: var(--ds-bg) !important;
}
.page-contacts .search-box input { color: var(--ds-text-primary); }
.page-contacts .d-flex.align-items-center { padding: 10px 0; }
.page-contacts .d-flex.align-items-center img { box-shadow: var(--ds-shadow-card); }
.page-contacts h5 { font-weight: 600; color: var(--ds-text-primary); }

@media (min-width: 1024px) {
    .page-contacts > .card-style {
        max-width: 860px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .page-contacts .d-flex.align-items-center {
        border-radius: 12px;
        padding: 10px 12px;
        transition: background 0.15s ease;
    }
    .page-contacts .d-flex.align-items-center:hover { background: rgba(0, 122, 255, 0.04); }
}

/* ==========================================================================
   GALLERY VIEW (app/Views/gallerycard/gallerycard.php) — scoped .page-gallery
   ========================================================================== */

.page-gallery #gallery {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}
/* Force full-width through the whole a > .col > .card chain — App Kit and
   Bootstrap both try to size these elements themselves */
.page-gallery #gallery > a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.page-gallery #gallery .col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}
.page-gallery #gallery .card {
    position: relative;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: var(--ds-shadow-card);
    margin-bottom: 0 !important;
}
.page-gallery #gallery img.card-img-top {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}
.page-gallery #gallery .delimg { position: absolute !important; top: 0; right: 0; z-index: 5; }

/* Info toast: compact pill, not a full-width stripe */
.page-gallery #infoorder {
    width: auto !important;
    max-width: 540px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100px !important;
    padding: 10px 22px;
}
.page-gallery .delimg {
    background: rgba(255, 255, 255, 0.92);
    color: #ff3b30;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    cursor: pointer;
}

@media (min-width: 1024px) {
    .page-gallery > .card-style {
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .page-gallery #gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
    .page-gallery #gallery .card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .page-gallery #gallery .card:hover { transform: scale(1.02); box-shadow: var(--ds-shadow-hover); }
}

/* ==========================================================================
   APPLE MOTION — iOS spring curve for sheets/menus, smooth micro-interactions
   ========================================================================== */

.menu {
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease !important;
}
.menu-hider { transition: opacity 0.35s ease, visibility 0.35s ease !important; }
.list-group a, .icon, .header-icon { transition: opacity 0.15s ease, background 0.15s ease; }
.list-group a:active { opacity: 0.6; }

/* ==========================================================================
   DATATABLES — responsive Apple table (all module list views)
   ========================================================================== */

.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
table.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
}
table.dataTable thead th,
table.dataTable thead td {
    background: var(--ds-bg) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ds-text-secondary);
    padding: 12px 14px;
    border-bottom: none !important;
}
table.dataTable thead th:first-child { border-radius: 12px 0 0 12px; }
table.dataTable thead th:last-child { border-radius: 0 12px 12px 0; }
table.dataTable tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 14px;
    color: var(--ds-text-primary);
    vertical-align: middle;
    background: var(--ds-surface);
    transition: background 0.15s ease;
}
table.dataTable tbody tr:hover td { background: rgba(0, 122, 255, 0.04); }
table.dataTable tbody tr:last-child td { border-bottom: none; }
table.dataTable.no-footer { border-bottom: none !important; }

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length { float: none; text-align: left; }
    .dataTables_wrapper .dataTables_filter label { display: block; }
    .dataTables_wrapper .dataTables_filter input {
        width: calc(100% - 8px);
        margin-left: 0;
        margin-top: 4px;
    }
    table.dataTable thead th, table.dataTable tbody td {
        padding: 10px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* ==========================================================================
   DAYCARE / PROJECT MODULE COMPONENTS
   (these classes pointed at /assets/css/daycare.css, which never existed —
   defined here for the first time)
   ========================================================================== */

.childbox { text-align: center; }

.daycare-card {
    display: inline-block;
    width: 47%;
    margin: 1.5%;
    text-decoration: none;
    vertical-align: top;
}
.daycare-card > div,
.daycare-card > a {
    display: block;
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border);
    border-radius: 16px !important;
    box-shadow: var(--ds-shadow-card);
    padding: 12px 10px 18px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.2s ease;
}
.daycare-card > div:hover,
.daycare-card > a:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-hover); }
/* Images without an explicit width (assist view) rendered at natural size */
.daycare-card img:not([width]) {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
}
.daycare-card .type-label {
    font-size: 12px;
    color: var(--ds-text-secondary);
    margin: 2px 0 4px;
}
.daycare-card > .bg-fade-red-light { background: #fff5f5 !important; }
.daycare-card img {
    border-radius: 14px;
    position: static !important;
    left: 0 !important;
}
.daycare-card h1 {
    font-size: 17px !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 8px 0 0;
    color: var(--ds-text-primary);
}
.daycare-card h3 {
    font-size: 13px !important;
    font-weight: 500;
    color: var(--ds-text-secondary);
    margin: 0 0 6px;
}
.daycare-card span { font-size: 12px; color: var(--ds-text-secondary); }

.status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    border-radius: 100px;
    padding: 4px 12px;
    margin-top: 8px;
}
.status-badge.status-assist { background: rgba(52, 199, 89, 0.15); color: #1d7a3c; }
.status-badge.status-other { background: rgba(255, 59, 48, 0.12); color: #c0392b; }

.deleteButton {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.10);
    z-index: 5;
    position: relative;
}
.deleteButton i { color: #ff3b30 !important; font-size: 14px !important; }

@media (min-width: 1024px) {
    .daycare-card { width: 23%; margin: 1%; }
}

/* When the card is already inside a Bootstrap grid column (assist view),
   let it fill the column instead of stacking another 47% width on top
   (which collapsed the cards to a tiny sliver). */
[class*="col-"] > .daycare-card {
    display: block;
    width: 100%;
    margin: 0 0 1rem;
}

/* ==========================================================================
   DAYCARE ASSIST MODAL (assist/actions/Modal-assist.php) — .modern-form
   These classes were never defined, so the Add Assistance form buttons and
   signature pad rendered as bare unstyled text.
   ========================================================================== */
.modern-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-text-primary);
    margin: 0 0 6px;
}
.modern-form .form-group { margin-bottom: 16px; }
.modern-form .form-control {
    width: 100%;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modern-form .form-control:focus {
    outline: none;
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
.modern-form textarea.form-control { resize: vertical; min-height: 80px; }

.modern-form #signature-pad {
    width: 100%;
    max-width: 350px;
    height: 140px;
    border: 1px dashed var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: #fafafa;
    touch-action: none;
}
.modern-form #clear-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 59, 48, 0.25);
    border-radius: 100px;
    background: rgba(255, 59, 48, 0.08);
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.modern-form #clear-button:hover { background: rgba(255, 59, 48, 0.14); }

.modern-form .submit-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 14px 18px;
    border: none;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.modern-form .submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 122, 255, 0.32); }
.modern-form .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ==========================================================================
   STORE FRONT (store/front/shop-front.php) — body.shop-front
   Public customer-facing shop. Excluded from the app desktop layout via
   :not(.shop-front) on every layout selector. Mobile keeps App Kit behavior.
   ========================================================================== */

/* Product cards (all viewports): clean white, soft shadow, accent CTA */
.shop-front .shop-grid .card.card-style {
    border-radius: 16px !important;
    overflow: hidden;
}
.shop-front .shop-grid .card.card-style .card.card-style {
    border-radius: 14px !important;
    box-shadow: none !important;
    border: none !important;
    background-size: cover !important;
    background-position: center;
}
.shop-front .shop-grid h5 {
    font-weight: 600;
    color: var(--ds-text-primary);
    letter-spacing: -0.01em;
}
.shop-front .shop-grid h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text-primary);
}
.shop-front .shop-grid .getprodinfo {
    background: var(--ds-accent) !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 10px 22px;
    font-weight: 600;
    border: none;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.shop-front .shop-grid .getprodinfo:active { transform: scale(0.96); filter: brightness(0.92); }

/* Cart badge on the floating tab button */
.shop-front #cart-count { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }

/* Desktop: modern online-shop layout */
@media (min-width: 1024px) {
    .shop-front { background: var(--ds-bg) !important; }

    /* Shop header always visible: light glass bar */
    .shop-front .header.header-auto-show {
        opacity: 1 !important;
        pointer-events: all !important;
        transform: translateY(0) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 1px 16px rgba(0, 0, 0, 0.08) !important;
    }
    .shop-front .header a.header-icon { color: #ffffff !important; }

    /* Hero: landing full-bleed con parallax (la imagen queda fija al hacer
       scroll y el catálogo se desliza por encima) */
    .shop-front .page-content > .card.preload-img.position-fixed {
        position: relative !important;
        height: 62vh !important;
        min-height: 420px;
        width: 100% !important;
        max-width: none !important;
        margin: 64px 0 0 !important;
        border-radius: 0 !important;
        background-size: contain !important;
        background-position: center !important;
        background-attachment: fixed !important; /* parallax */
        background-color: #0d1117 !important;
        box-shadow: none !important;
        overflow: hidden;
        display: flex !important;
        align-items: flex-end !important;
    }
    /* Velo de gradiente para legibilidad del título */
    .shop-front .page-content > .card.preload-img.position-fixed::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(13, 17, 23, 0.25) 0%,
                    rgba(13, 17, 23, 0.05) 45%, rgba(13, 17, 23, 0.82) 100%);
        pointer-events: none;
    }
    .shop-front .page-content > .card.preload-img .card-bottom {
        position: relative !important;
        z-index: 2;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto 36px !important;
        padding: 0 24px;
    }
    .shop-front .page-content > .card.preload-img .card-bottom h1 {
        font-size: 52px !important;
        font-weight: 800 !important;
        letter-spacing: -0.03em;
        color: #fff !important;
        text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
        animation: vitkHeroIn 0.8s cubic-bezier(0.21, 1.02, 0.73, 1) both;
    }
    .shop-front .page-content > .card.preload-img .card-bottom p {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 2px;
        animation: vitkHeroIn 0.8s 0.15s cubic-bezier(0.21, 1.02, 0.73, 1) both;
    }
    /* Mobile pull-up spacer not needed */
    .shop-front .page-content > .card.bg-transparent[data-card-height] { display: none !important; }

    /* Catalog sheet: flat light surface, centered */
    .shop-front .page-content > .card.card-style.mx-0.pb-5 {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        max-width: 1200px;
        margin: 24px auto 0 !important;
        animation: none !important;
        opacity: 1 !important;
    }
    /* Category titles readable on light background */
    .shop-front .shop-grid h3 {
        color: var(--ds-text-primary) !important;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.02em;
        text-align: left;
    }

    /* Product grid: hover lift */
    .shop-front .shop-grid { text-align: left; }
    .shop-front .shop-grid > [class*="col-"] { padding: 0 10px; }
    .shop-front .shop-grid .card.card-style {
        border: 1px solid var(--ds-border) !important;
        transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s ease !important;
    }
    .shop-front .shop-grid > [class*="col-"]:hover .card.card-style {
        transform: translateY(-5px);
        box-shadow: var(--ds-shadow-hover) !important;
    }
    .shop-front .shop-grid .card.card-style .card.card-style[data-card-height] {
        height: 210px !important;
    }

    /* Desktop: cart lives in the header — hide the mobile tab bar */
    .shop-front #footer-bar { display: none !important; }

    /* Contact + footer centered */
    .shop-front #contact, .shop-front .footer.card {
        max-width: 1200px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (min-width: 1280px) {
    .shop-front .shop-grid > .col-lg-4 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}
@keyframes vitkHeroIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   MODULE DASHBOARDS (daycare/health/project/...) — .page-module-dash
   Reusable: .module-hero, .iconswrap tiles, .dash-duo, birthday/stats cards
   ========================================================================== */

/* Standalone module hero: works on ANY banner card (51 module views carry
   this class). The !important gradient also beats inline background-image
   set by App Kit's preload-img loader. */
.module-hero {
    background: linear-gradient(135deg, #174969 0%, #0d293c 100%) !important;
    background-image: linear-gradient(135deg, #174969 0%, #0d293c 100%) !important;
    border: none !important;
    box-shadow: 0 10px 28px rgba(13, 41, 60, 0.22) !important;
    border-radius: 20px !important;
    overflow: hidden;
}
.module-hero .card-overlay { display: none !important; }
.module-hero h1 {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}
.module-hero h1 + p, .module-hero p { color: rgba(255, 255, 255, 0.65); }

@media (min-width: 1024px) {
    .page-content > .module-hero {
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Child avatars inside lists/tables (daycare assist, meals, reports):
   they rendered at natural size — fixed Apple chip */
table img[src*="plugins/daycare/nino"],
table img[src*="plugins/daycare/nina"],
.list-group img[src*="plugins/daycare/"] {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: var(--ds-shadow-card);
}

.page-module-dash .module-hero {
    background: linear-gradient(135deg, #174969 0%, #0d293c 100%) !important;
    border: none !important;
    box-shadow: 0 10px 28px rgba(13, 41, 60, 0.22) !important;
    border-radius: 20px !important;
}
.page-module-dash .module-hero-title {
    color: #fff !important;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}
.page-module-dash .module-hero-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    margin: 2px 0 0;
}

/* Birthday + stats: white cards on tokens */
.birthday-card, .stats-container {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card);
    box-shadow: var(--ds-shadow-card);
    padding: 22px 20px;
    margin: 0 16px 20px;
}
.birthday-title, .stats-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text-primary);
    margin: 0 0 2px;
}
.birthday-subtitle, .stats-subtitle {
    font-size: 13px;
    color: var(--ds-text-secondary);
    margin: 0 0 14px;
}
.birthday-list { list-style: none; margin: 0; padding: 0; }
.birthday-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 15px;
    font-weight: 500;
    color: var(--ds-text-primary);
}
.birthday-list li:last-child { border-bottom: none; }
.birthday-list li span {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-accent);
    background: rgba(0, 122, 255, 0.10);
    border-radius: 100px;
    padding: 3px 10px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.stat-card {
    background: var(--ds-bg);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
}
.stat-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 10px;
}
.stat-card h3 { font-size: 14px; font-weight: 600; color: var(--ds-text-primary); margin: 0 0 2px; }
.stat-card p { font-size: 12px; color: var(--ds-text-secondary); margin: 0; }

/* Desktop: birthdays + stats side by side, capped */
@media (min-width: 1024px) {
    .page-module-dash .module-hero {
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .page-module-dash .dash-duo {
        display: grid;
        grid-template-columns: 380px minmax(0, 1fr);
        gap: 20px;
        max-width: 100%;
        margin: 20px auto 0;
        align-items: start;
    }
    .page-module-dash .dash-duo .birthday-card,
    .page-module-dash .dash-duo .stats-container { margin: 0; }
    .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   SIGNUP (auth/signup.php) — .page-signup
   ========================================================================== */

.page-signup .signup-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    box-shadow: var(--ds-shadow-hover);
    padding: 36px 28px;
    width: calc(100vw - 32px);
    max-width: 420px;
    margin: 0 auto;
}
.page-signup .signup-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ds-text-primary);
}
.page-signup .signup-sub { color: var(--ds-text-secondary); font-size: 14px; }
.page-signup .signup-btn { height: 50px; }
.page-signup .signup-footer { font-size: 13px; color: var(--ds-text-secondary); }
.page-signup .signup-footer a { color: var(--ds-accent); font-weight: 600; }

/* ==========================================================================
   UPGRADE / PLUGIN STORE (upgrade.php, pluginstore.php) — .page-upgrade
   ========================================================================== */

.page-upgrade .pricing-4 {
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: var(--ds-shadow-card) !important;
    border: 1px solid var(--ds-border);
    margin-bottom: 20px;
    padding-bottom: 22px;
    background: var(--ds-surface) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-upgrade .pricing-title { letter-spacing: 0.5px; }
.page-upgrade .pricing-list { color: var(--ds-text-secondary); }

@media (min-width: 1024px) {
    .page-upgrade > .row,
    .page-upgrade > .card-style {
        max-width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .page-upgrade .pricing-4:hover {
        transform: translateY(-4px);
        box-shadow: var(--ds-shadow-hover) !important;
    }
}

/* ============================================================================
   MODULE VIEWS SaaS v3 — health / project / daycare / gallery / resume
   Scope: .page-mod en .page-content (+ .page-mod-{módulo} para el acento).
   Desktop ≥1024px = panel SaaS en columnas; móvil = app Apple.
   Aplica a las 38 vistas de módulo etiquetadas el 2026-06-12.
   ============================================================================ */

.page-mod {
    --mod-accent: var(--ds-accent);
    --mod-hero-a: #174969;
    --mod-hero-b: #0d293c;
    background: var(--ds-bg) !important;   /* mata bg inline grises */
    background-image: none !important;
    height: auto !important;               /* mata heights fijos inline */
    min-height: 100vh;
}
.page-mod-health  { --mod-accent: #34c759; --mod-hero-a: #0e4d3a; --mod-hero-b: #11342a; }
.page-mod-project { --mod-accent: #ff9500; --mod-hero-a: #5a3a10; --mod-hero-b: #2b1d08; }
.page-mod-daycare { --mod-accent: #af52de; --mod-hero-a: #4a1d6e; --mod-hero-b: #28113c; }
.page-mod-gallery { --mod-accent: #007aff; --mod-hero-a: #14385c; --mod-hero-b: #0c2238; }
.page-mod-resume  { --mod-accent: #5856d6; --mod-hero-a: #2f2e78; --mod-hero-b: #1b1a45; }

/* ── Hero del módulo: gradiente con tinte del acento ── */
.page-mod .module-hero {
    background:
        radial-gradient(130% 110% at 85% 0%, color-mix(in srgb, var(--mod-accent) 30%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, var(--mod-hero-a) 0%, var(--mod-hero-b) 100%) !important;
    border-radius: var(--ds-radius-card) !important;
    overflow: hidden;
}
.page-mod .module-hero h1,
.page-mod .module-hero .module-hero-title {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
}
.page-mod .module-hero p,
.page-mod .module-hero .module-hero-sub {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.page-mod .module-hero i { color: color-mix(in srgb, var(--mod-accent) 70%, #fff) !important; }
.page-mod .module-hero .card-overlay { display: none !important; }

/* ── Tiles del menú: icono en chip tintado con el acento ── */
.page-mod .iconswrap .card.card-style i,
.page-mod .row.text-center .card.card-style i.fa-3x {
    font-size: 24px !important;
    width: 54px; height: 54px; line-height: 54px;
    border-radius: 16px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.21, 1.02, 0.73, 1);
}
.page-mod .iconswrap .card.card-style:hover i,
.page-mod .row.text-center .card.card-style:hover i.fa-3x { transform: scale(1.08); }
.page-mod .iconswrap h4,
.page-mod .row.text-center .card.card-style h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    color: var(--ds-text-primary) !important;
}

/* ── Tabs segmented (pill) ── */
.page-mod .tab-controls {
    border: none !important;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 100px !important;
    padding: 4px;
    overflow: hidden;
}
.page-mod .tab-controls a {
    border: none !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    color: var(--ds-text-secondary) !important;
}
.page-mod .tab-controls a[data-active] {
    background: var(--ds-text-primary) !important;
    color: #fff !important;
}

/* ── Search box (projectdash y listados) ── */
.page-mod .search-box {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border);
    border-radius: 14px !important;
    box-shadow: var(--ds-shadow-card);
}
.page-mod .search-box input {
    color: var(--ds-text-primary) !important;
    font-size: 15px;
}
.page-mod .search-box input::placeholder { color: var(--ds-text-muted); }
.page-mod .search-box i { color: var(--ds-text-muted) !important; }

/* ── Cards de proyecto (pricing-2 en projectdash) ── */
.page-mod .pricing-2 {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-card) !important;
    box-shadow: var(--ds-shadow-card) !important;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.21, 1.02, 0.73, 1), box-shadow 0.25s ease;
}
.page-mod .pricing-2:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-hover) !important; }
.page-mod .pricing-2 .pricing-icon {
    background: linear-gradient(135deg, var(--mod-hero-a), var(--mod-hero-b)) !important;
    border-radius: 0 !important;
}
.page-mod .pricing-2 .pricing-title {
    background: transparent !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
.page-mod .pricing-list li { border-color: var(--ds-border) !important; }

/* ── Botones y badges ── */
.page-mod .btn { border-radius: 100px !important; letter-spacing: 0.4px !important; }
.page-mod .btn:active { transform: scale(0.97); }
.page-mod .badge { border-radius: 100px; font-weight: 700; letter-spacing: 0.3px; }

/* ── Tipografía y divisores ── */
.page-mod h1, .page-mod h2, .page-mod h3, .page-mod h4 { letter-spacing: -0.02em; }
.page-mod .divider { background: var(--ds-border) !important; }

/* ── Estado vacío ── */
.page-mod .content > p:only-child { color: var(--ds-text-secondary); text-align: center; padding: 26px 0; }

/* ── DESKTOP: panel SaaS centrado ── */
@media (min-width: 1024px) {
    .page-mod > .card,
    .page-mod > .container,
    .page-mod > .row,
    .page-mod > .content,
    .page-mod > .iconswrap,
    .page-mod > .app-container,
    .page-mod > div:not(#backdrop):not(.menu):not([id^="menu-"]):not(.bg-black):not(.toast):not([id^="toast"]) {
        max-width: 1180px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .page-mod .module-hero {
        min-height: 130px;
    }
    .page-mod .module-hero h1,
    .page-mod .module-hero .module-hero-title { font-size: 30px !important; }

    /* Tablas como panel admin */
    .page-mod .table-responsive { border-radius: 16px; }

    /* Grids de tiles más densos en desktop */
    .page-mod .iconswrap .card.card-style .p-3 { padding: 20px 10px !important; }
}

/* ── MÓVIL: aire y touch targets ── */
@media (max-width: 1023px) {
    .page-mod .card-style { border-radius: 18px !important; }
    .page-mod .btn-full { min-height: 48px; }
}
/* ============================================================================
   BOUTME DESIGN SYSTEM v4 — "DF STYLE" (look del daycare-front, paleta sobria)
   Aplica el lenguaje visual del front de daycare a TODO el sistema:
   Syne/Inter, heroes slate oscuros con glows sutiles, cards radius 20-22,
   botones pill, inputs con focus ring, tabbar flotante, modales suaves.
   Este bloque debe permanecer AL FINAL de style.css.
   ========================================================================= */

:root {
    --df-ink:      #19202b;
    --df-ink-2:    #38465c;
    --df-muted:    #6b7280;
    --df-bg:       #f5f6f8;
    --df-card:     #ffffff;
    --df-line:     rgba(15, 23, 42, .08);
    --df-accent:   #1e5b85;            /* azul sobrio único */
    --df-accent-soft: rgba(47, 111, 237, .10);
    --df-radius:   20px;
    --df-radius-lg:24px;
    --df-shadow:   0 14px 38px rgba(15, 23, 42, .08);
    --df-shadow-hover: 0 18px 44px rgba(15, 23, 42, .13);
    --df-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --df-display:  'Syne', 'Inter', sans-serif;
}

/* ── Base ── */
body.theme-light {
    background: var(--df-bg) !important;
    font-family: var(--df-font);
    color: var(--df-ink);
    -webkit-font-smoothing: antialiased;
}
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5,
.menu h1, .menu h2, .menu h3, .menu h4 {
    font-family: var(--df-font);
    letter-spacing: -0.02em;
    color: var(--df-ink);
}

/* ── Cards: superficie DF ── */
.page-content .card-style,
.menu .card-style {
    background: var(--df-card) !important;
    border: 1px solid var(--df-line) !important;
    border-radius: var(--df-radius) !important;
    box-shadow: var(--df-shadow) !important;
    backdrop-filter: none !important;
}
.page-content .iconswrap .card.card-style:hover,
.page-content a > .card.card-style:hover {
    transform: translateY(-4px);
    box-shadow: var(--df-shadow-hover) !important;
    border-color: transparent !important;
}

/* ── Module hero: slate oscuro con glows sutiles (paleta sobria) ──
   Los selectores .page-content/.menu .card-style.module-hero (esp. 0,3,0)
   DEBEN ganarle a `.page-content .card-style{background:#fff!important}` (0,2,0),
   o el hero queda como caja blanca. NO bajar esta especificidad. */
.page-content .card-style.module-hero,
.menu .card-style.module-hero,
.module-hero {
    background:
        radial-gradient(900px 300px at 88% -20%, color-mix(in srgb, var(--mod-hero-a, #2f6fed) 26%, transparent), transparent 60%),
        radial-gradient(700px 300px at 0% 0%, rgba(0, 184, 169, .12), transparent 55%),
        linear-gradient(165deg, #1c2533 0%, #0f1622 70%) !important;
    border: none !important;
    border-radius: var(--df-radius) !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .18) !important;
    overflow: hidden;
    position: relative;
}
.module-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.6px);
    background-size: 26px 26px;
    pointer-events: none;
}
.module-hero h1, .module-hero .module-hero-title {
    font-family: var(--df-display) !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    position: relative; z-index: 1;
}
/* Texto del hero siempre claro sobre el slate (gana a `.page-content h1`) */
.page-content .module-hero h1, .menu .module-hero h1,
.page-content .module-hero .module-hero-title, .menu .module-hero .module-hero-title {
    color: #fff !important;
}
.page-content .module-hero p, .menu .module-hero p,
.page-content .module-hero .module-hero-sub, .menu .module-hero .module-hero-sub {
    color: rgba(255, 255, 255, .72) !important;
    position: relative; z-index: 1;
}
.page-content .module-hero i, .menu .module-hero i {
    color: color-mix(in srgb, var(--mod-hero-a, #2f6fed) 60%, #fff) !important;
}
.module-hero .card-overlay { display: none !important; }

/* Acentos por módulo, versión sobria/desaturada */
.page-mod-daycare   { --mod-hero-a: #5b6ee1; --mod-hero-b: #7886e8; }
.page-mod-project   { --mod-hero-a: #b07a45; --mod-hero-b: #c4946a; }
.page-mod-health    { --mod-hero-a: #2e9e8f; --mod-hero-b: #55b5a8; }
.page-mod-gallery   { --mod-hero-a: #4d82d6; --mod-hero-b: #6f9bde; }
.page-mod-resume    { --mod-hero-a: #5f5fce; --mod-hero-b: #7d7dd8; }
.page-mod-inventory { --mod-hero-a: #46708f; --mod-hero-b: #6389a5; }
.page-mod-cloud     { --mod-hero-a: #3d7ec2; --mod-hero-b: #5f96cf; }
.page-mod-store     { --mod-hero-a: #3f6f8f; --mod-hero-b: #5f8aa5; }
.page-mod-cashflow  { --mod-hero-a: #2f8f6b; --mod-hero-b: #4fa987; --mod-accent: #16a34a; }
.page-mod-apts      { --mod-hero-a: #a85a44; --mod-hero-b: #c07a62; --mod-accent: #ff7a59; }
.page-mod-links     { --mod-hero-a: #4d6fd6; --mod-hero-b: #6f8bde; --mod-accent: #4d6fd6; }
.page-mod-schedule  { --mod-hero-a: #5b53b8; --mod-hero-b: #7b73c8; --mod-accent: #6c5ce7; }
.page-mod-store     { --mod-accent: #2f6fed; }
.page-mod-inventory { --mod-accent: #0ea5e9; }

/* Heroes glass propios (cashflow / health dash) → mismo look DF que .module-hero */
.page-mod .hero-glass {
    position: relative !important;
    background:
        radial-gradient(900px 300px at 88% -20%, color-mix(in srgb, var(--mod-hero-a, #2f6fed) 26%, transparent), transparent 60%),
        radial-gradient(700px 300px at 0% 0%, rgba(0, 184, 169, .12), transparent 55%),
        linear-gradient(165deg, #1c2533 0%, #0f1622 70%) !important;
    border-radius: var(--df-radius) !important;
    box-shadow: var(--df-shadow) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
}
.page-mod .hero-glass::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.6px);
    background-size: 26px 26px; pointer-events: none;
}
.page-mod .hero-glass .glass-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
    position: relative; z-index: 1;
}
.page-mod .hero-glass h1 {
    color: #fff !important;
    font-family: var(--df-display) !important;
    font-weight: 800 !important;
}
.page-mod .hero-glass h1 i { color: color-mix(in srgb, var(--mod-hero-a, #2f6fed) 70%, #fff) !important; }

/* ── Tiles de iconos: chip tintado sobrio ── */
.page-content .iconswrap i[class*="fa-"],
.page-content .iconswrap i[class*="lni-"] {
    color: var(--mod-hero-a, var(--df-accent)) !important;
}

/* ── Botones: pill DF ── */
.page-content .btn, .menu .btn {
    border-radius: 14px !important;
    font-family: var(--df-font);
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    transition: transform .15s, box-shadow .2s, filter .2s !important;
}
.page-content .btn:active, .menu .btn:active { transform: scale(.97); }
.page-content .btn.bg-dark, .menu .btn.bg-dark,
.page-content .btn.bg-dark-dark, .menu .btn.bg-dark-dark,
.page-content .btn.bg-highlight, .menu .btn.bg-highlight {
    background: linear-gradient(135deg, var(--df-ink), var(--df-ink-2)) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(25, 32, 43, .25) !important;
    border: none !important;
}
.page-content .btn.bg-blue-dark, .menu .btn.bg-blue-dark {
    background: linear-gradient(135deg, var(--df-accent), #5b8cf2) !important;
    box-shadow: 0 10px 24px rgba(47, 111, 237, .30) !important;
    border: none !important;
}
.page-content .btn.bg-green-dark, .menu .btn.bg-green-dark {
    background: linear-gradient(135deg, #2e9e8f, #44b3a4) !important;
    box-shadow: 0 10px 24px rgba(46, 158, 143, .28) !important;
    border: none !important;
}
.page-content .btn.bg-red-dark, .menu .btn.bg-red-dark {
    background: linear-gradient(135deg, #c0392b, #d35445) !important;
    box-shadow: 0 10px 24px rgba(192, 57, 43, .25) !important;
    border: none !important;
}

/* ── Inputs: campo DF con focus ring ── */
.page-content .input-style input, .page-content .input-style select, .page-content .input-style textarea,
.menu .input-style input, .menu .input-style select, .menu .input-style textarea,
.page-content input.form-control, .menu input.form-control,
.page-content select.form-control, .menu select.form-control,
.page-content textarea.form-control, .menu textarea.form-control {
    border: 1.5px solid var(--df-line) !important;
    border-radius: 14px !important;
    background: #fbfcfe !important;
    font-family: var(--df-font) !important;
    font-weight: 500;
    color: var(--df-ink) !important;
    transition: border-color .2s, box-shadow .2s, background .2s !important;
    box-shadow: none !important;
}
.page-content .input-style input:focus, .menu .input-style input:focus,
.page-content input.form-control:focus, .menu input.form-control:focus,
.page-content select.form-control:focus, .menu select.form-control:focus,
.page-content textarea.form-control:focus, .menu textarea.form-control:focus {
    border-color: var(--df-accent) !important;
    box-shadow: 0 0 0 4px var(--df-accent-soft) !important;
    background: #fff !important;
    outline: none !important;
}
.page-content .input-style.has-borders, .menu .input-style.has-borders { border: none !important; }

/* ── Menús / bottom sheets: DF modal ── */
.menu.menu-box-bottom, .menu.menu-box-top {
    border-radius: var(--df-radius-lg) var(--df-radius-lg) 0 0 !important;
    box-shadow: 0 -18px 60px rgba(15, 23, 42, .25) !important;
}
.menu.menu-box-modal {
    border-radius: var(--df-radius-lg) !important;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .35) !important;
}
.menu .menu-title h1 { font-family: var(--df-display); font-size: 20px !important; }
.menu .menu-title a i {
    width: 34px; height: 34px; display: grid; place-items: center;
    background: #eef1f6; border-radius: 50%; font-size: 13px; color: var(--df-ink);
}

/* ── Tabbar móvil: pill flotante DF ── */
@media (max-width: 1023px) {
    #footer-bar {
        left: 12px !important;
        right: 12px !important;
        bottom: 10px !important;
        border-radius: 999px !important;
        background: rgba(25, 32, 43, .94) !important;
        backdrop-filter: blur(14px) !important;
        box-shadow: 0 16px 40px rgba(15, 23, 42, .35) !important;
        border: none !important;
    }
    /* Color de iconos/labels SOLO para la tabbar real, no para el composer del chat
       (en .view-chat-interface el #footer-bar es el input blanco → iconos en blanco = invisibles) */
    body:not(.view-chat-interface) #footer-bar a { color: rgba(255, 255, 255, .75) !important; }
    body:not(.view-chat-interface) #footer-bar a span { color: rgba(255, 255, 255, .75) !important; font-weight: 600; }
    body:not(.view-chat-interface) #footer-bar a i { color: rgba(255, 255, 255, .8) !important; }
    body:not(.view-chat-interface) #footer-bar a.active-nav i,
    body:not(.view-chat-interface) #footer-bar a.active-nav span { color: #fff !important; }
    body:not(.view-chat-interface) #footer-bar a.active-nav strong { background-color: rgba(255, 255, 255, .16) !important; border-radius: 50%; }
    .page-content { padding-bottom: 96px !important; }
}

/* ── Tablas: refinamiento DF ── */
.page-content .table-responsive {
    border-radius: 16px !important;
    border: 1px solid var(--df-line);
    box-shadow: var(--df-shadow) !important;
}
.page-content table th {
    font-family: var(--df-font) !important;
    letter-spacing: 1px !important;
}

/* ── Badges y chips sobrios ── */
.page-content .badge { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .6px; }

/* ── Tabs pill ── */
.page-content .tab-controls {
    border-radius: 999px !important;
    background: #eef1f6 !important;
    border: none !important;
    overflow: hidden;
}

/* ── Sidebar desktop: tipografía DF ── */
@media (min-width: 1024px) {
    #menu-sidebar-left-2 { font-family: var(--df-font); }
    #menu-sidebar-left-2 .is-active {
        background: var(--df-accent-soft) !important;
        color: var(--df-accent) !important;
        border-radius: 12px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   INVENTORY — scope page-mod-inventory + doble columna desktop
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
    .page-mod-inventory .inv-duo,
    .page-mod-resume .res-duo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        align-items: start;
        max-width: 1180px;
        margin: 0 auto;
    }
    .page-mod-inventory .inv-duo > *,
    .page-mod-resume .res-duo > * {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .page-mod-inventory .inv-duo > .inv-span-2,
    .page-mod-resume .res-duo > .res-span-2 { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════════
   RESUME FORM — secciones como cards DF, doble columna desktop
   ════════════════════════════════════════════════════════════════════════ */
.page-mod-resume .card-style .content h3,
.page-mod-resume .card-style .content h2 { font-family: var(--df-display); }
@media (min-width: 1100px) {
    .page-mod-resume.res-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 570px));
        gap: 18px;
        justify-content: center;
        align-items: start;
    }
    .page-mod-resume.res-form-grid > .card.card-style { width: 100%; margin: 0 !important; }
    .page-mod-resume.res-form-grid > .module-hero,
    .page-mod-resume.res-form-grid > .card.module-hero,
    .page-mod-resume.res-form-grid > .res-span-2 { grid-column: 1 / -1; }
}


/* ── INVENTORY: grid de productos y polish DF ── */
.page-mod-inventory .inv-products .card.card-style {
    text-align: center;
    padding-bottom: 0;
}
.page-mod-inventory .inv-products .card.card-style a.getEditapt h1 {
    color: var(--df-ink) !important;
    font-size: 15px !important;
    font-weight: 700;
    padding: 0 10px;
}
.page-mod-inventory .inv-products .card.card-style i.fa-cubes {
    color: var(--mod-hero-a) !important;
    background: color-mix(in srgb, var(--mod-hero-a) 12%, transparent);
    width: 64px; height: 64px;
    display: inline-grid; place-items: center;
    border-radius: 18px;
    font-size: 26px;
    margin-top: 18px !important;
}
.page-mod-inventory .inv-products .btn {
    border-radius: 0 0 var(--df-radius) var(--df-radius) !important;
    letter-spacing: .5px !important;
    font-size: 11px;
}
.page-mod-inventory .search-box {
    background: #fff !important;
    border: 1.5px solid var(--df-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--df-shadow);
}
.page-mod-inventory .search-box input { color: var(--df-ink) !important; }
.page-mod-inventory .search-box i { color: var(--df-muted) !important; }

@media (min-width: 1100px) {
    /* Doble densidad en desktop: 4 productos por fila */
    .page-mod-inventory .inv-products { --bs-gutter-x: 1rem; }
    .page-mod-inventory .inv-products > .col-6 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    /* Tablas (combinations / discharge) como panel doble columna centrado */
    .page-mod-inventory > .card.card-style:not(.module-hero) {
        max-width: 1180px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ── RESUME FORM: editor DF en doble columna desktop ── */
.page-mod-resume #resumeForm .card {
    background: var(--df-card);
    border: 1px solid var(--df-line);
    border-radius: var(--df-radius) !important;
    box-shadow: var(--df-shadow);
    overflow: hidden;
}
.page-mod-resume #resumeForm .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--df-line) !important;
    font-family: var(--df-display) !important;
    font-size: 18px !important;
    color: var(--df-ink);
    padding: 18px 22px;
}
.page-mod-resume #resumeTabs {
    border: none !important;
    gap: 6px;
}
.page-mod-resume #resumeTabs .nav-link {
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 13px;
    color: var(--df-muted);
    background: #eef1f6;
    padding: 9px 16px;
    transition: background .2s, color .2s;
}
.page-mod-resume #resumeTabs .nav-link.active {
    background: linear-gradient(135deg, var(--df-ink), var(--df-ink-2)) !important;
    color: #fff !important;
}
/* Photo card: matar inline styles viejos */
.page-mod-resume .container > .card.card-style.mb-4.text-center {
    max-width: none !important;
    box-shadow: var(--df-shadow) !important;
    border-radius: var(--df-radius) !important;
}
.page-mod-resume #photoPreview { border-color: var(--df-accent) !important; }

@media (min-width: 1100px) {
    .page-mod-resume {
        display: grid;
        grid-template-columns: 340px minmax(0, 780px);
        gap: 0 18px;
        justify-content: center;
        align-items: start;
    }
    /* Hero ancho completo */
    .page-mod-resume > .module-hero,
    .page-mod-resume > .card.module-hero { grid-column: 1 / -1; }
    /* Columna izquierda: foto + pasos (sticky) */
    .page-mod-resume > .container { grid-column: 1; margin: 0 0 14px !important; max-width: none !important; padding: 0 !important; }
    .page-mod-resume > .container.my-3 { position: sticky; top: 90px; }
    .page-mod-resume #resumeTabs { flex-direction: column; align-items: stretch; }
    .page-mod-resume #resumeTabs .nav-item { width: 100%; }
    .page-mod-resume #resumeTabs .nav-link { display: block; text-align: left; padding: 12px 18px; }
    /* Columna derecha: el wizard */
    .page-mod-resume > #resumeForm {
        grid-column: 2;
        grid-row: 2 / span 6;
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }
    /* Overlays y menús fuera del grid (defensa) */
    .page-mod-resume > .menu,
    .page-mod-resume > #backdrop,
    .page-mod-resume > .bg-black { grid-column: 1 / -1; }
}


/* =========================================================================
   BOUTME — iPadOS REFINEMENT v5  (must remain the LAST block of style.css)
   Keeps the existing structure/heroes but trades the "generic Bootstrap/SaaS"
   feel for native iPadOS: SF Pro system type (no more Inter/Syne webfont look),
   iOS system palette, calmer non-shouty buttons, segmented controls, iOS
   switches, grouped inset lists and softer materials. Scoped to
   .page-content / .menu so public fronts and chat are untouched.
   ========================================================================= */
:root {
    --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
    --ios-blue:  #007aff;
    --ios-green: #34c759;
    --ios-red:   #ff3b30;
    --ios-orange:#ff9500;
    --ios-ink:   #1c1c1e;
    --ios-gray:  #8e8e93;
    --ios-gray2: #c7c7cc;
    --ios-bg:    #f2f2f7;
    --ios-surface:#ffffff;
    --ios-fill:  rgba(118,118,128,.12);   /* iOS secondary system fill */
    --ios-sep:   rgba(60,60,67,.12);       /* iOS separator */
    --ios-radius:    18px;
    --ios-radius-lg: 22px;
    --ios-radius-sm: 12px;
    /* Resolve the inherited DF font vars to SF Pro everywhere */
    --df-font:    var(--ios-font);
    --df-display: var(--ios-font);
}

/* ── Typography: native SF Pro, iOS tracking ── */
body.theme-light { background: var(--ios-bg) !important; font-family: var(--ios-font); letter-spacing: -0.01em; }
.page-content, .menu { font-family: var(--ios-font); }
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5,
.menu h1, .menu h2, .menu h3, .menu h4 {
    font-family: var(--ios-font) !important;
    letter-spacing: -0.022em;
    font-weight: 700;
}

/* ── Buttons: iOS, calm (drop the uppercase + heavy tracking from v4) ── */
.page-content .btn, .menu .btn {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
    border-radius: var(--ios-radius-sm) !important;
}
.page-content .btn.text-uppercase, .menu .btn.text-uppercase { text-transform: none !important; }
.page-content .btn.rounded-s, .page-content .btn.rounded-m, .page-content .btn.rounded-sm,
.menu .btn.rounded-s, .menu .btn.rounded-m { border-radius: var(--ios-radius-sm) !important; }
/* Pill-shaped CTAs stay fully round */
.page-content .btn.rounded-xl, .page-content .btn.rounded-50, .menu .btn.rounded-xl { border-radius: 980px !important; }

/* ── Segmented control: iOS pills for Bootstrap nav-pills / tabs ── */
.page-content .nav-pills, .menu .nav-pills,
.page-content ul.nav-tabs, .menu ul.nav-tabs {
    background: var(--ios-fill);
    border-radius: 10px !important;
    border: none !important;
    padding: 2px;
    gap: 2px;
}
.page-content .nav-pills .nav-link, .menu .nav-pills .nav-link,
.page-content ul.nav-tabs .nav-link, .menu ul.nav-tabs .nav-link {
    border: none !important;
    border-radius: 8px !important;
    color: var(--ios-ink) !important;
    font-weight: 600 !important;
    font-size: 13px;
    background: transparent !important;
}
.page-content .nav-pills .nav-link.active, .menu .nav-pills .nav-link.active,
.page-content ul.nav-tabs .nav-link.active, .menu ul.nav-tabs .nav-link.active {
    background: var(--ios-surface) !important;
    color: var(--ios-ink) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 1px 1px rgba(0,0,0,.04) !important;
}

/* ── iOS switches: turn Bootstrap form-switch toggles into iOS toggles ── */
.page-content .form-switch .form-check-input, .menu .form-switch .form-check-input {
    -webkit-appearance: none; appearance: none;
    width: 51px; height: 31px; border-radius: 31px;
    background: var(--ios-gray2) !important; border: none !important;
    position: relative; cursor: pointer; transition: background .25s ease; margin: 0;
}
.page-content .form-switch .form-check-input:checked, .menu .form-switch .form-check-input:checked {
    background: var(--ios-green) !important;
}
.page-content .form-switch .form-check-input::after, .menu .form-switch .form-check-input::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 27px; height: 27px; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.page-content .form-switch .form-check-input:checked::after, .menu .form-switch .form-check-input:checked::after {
    transform: translateX(20px);
}

/* ── Grouped inset lists (iOS Settings/Health style) — page content only;
      the App Kit side-menu has its own list look, don't box it in. ── */
.page-content .list-group:not(.list-custom-small) {
    border-radius: var(--ios-radius) !important;
    border: 1px solid var(--ios-sep) !important;
    overflow: hidden;
    box-shadow: none !important;
    background: var(--ios-surface);
}
.page-content .list-group-item, .menu .list-group-item {
    border: none !important;
    border-bottom: 1px solid var(--ios-sep) !important;
    padding: 13px 16px !important;
    font-size: 15px;
    color: var(--ios-ink);
}
.page-content .list-group-item:last-child, .menu .list-group-item:last-child { border-bottom: none !important; }
/* Chevron affordance on tappable rows */
.page-content a.list-group-item[href]:not(.no-chevron)::after,
.menu a.list-group-item[href]:not(.no-chevron)::after {
    content: '\f054'; font-family: 'Font Awesome 5 Free', 'FontAwesome'; font-weight: 900;
    float: right; color: var(--ios-gray2); font-size: 12px; margin-top: 2px;
}

/* ── Badges: iOS pill / count look ── */
.page-content .badge, .menu .badge {
    border-radius: 980px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* ── Form fields: iOS inset fill + tighter focus ring ── */
.page-content input.form-control, .menu input.form-control,
.page-content select.form-control, .menu select.form-control,
.page-content textarea.form-control, .menu textarea.form-control,
.page-content .input-style input, .menu .input-style input {
    border-radius: var(--ios-radius-sm) !important;
    font-family: var(--ios-font) !important;
    letter-spacing: -0.01em;
}
.page-content input.form-control:focus, .menu input.form-control:focus,
.page-content select.form-control:focus, .menu select.form-control:focus,
.page-content textarea.form-control:focus, .menu textarea.form-control:focus {
    border-color: var(--ios-blue) !important;
    box-shadow: 0 0 0 4px rgba(0,122,255,.12) !important;
}

/* ── Materials: translucent header & bottom sheets (iOS vibrancy) ── */
.menu.menu-box-bottom, .menu.menu-box-top {
    border-radius: var(--ios-radius-lg) var(--ios-radius-lg) 0 0 !important;
}
.menu .menu-title h1 { font-family: var(--ios-font) !important; letter-spacing: -0.022em; }

/* ── Links / accents to iOS blue (only generic text links, not buttons) ── */
.page-content a.color-highlight, .page-content .color-blue-dark:not(.btn) { color: var(--ios-blue) !important; }

/* ── Mobile tabbar: lighter iOS material instead of the dark slate pill ── */
@media (max-width: 1023px) {
    body:not(.view-chat-interface) #footer-bar {
        background: rgba(255,255,255,.82) !important;
        backdrop-filter: saturate(180%) blur(20px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
        border: 1px solid rgba(255,255,255,.6) !important;
    }
    body:not(.view-chat-interface) #footer-bar a,
    body:not(.view-chat-interface) #footer-bar a span,
    body:not(.view-chat-interface) #footer-bar a i { color: var(--ios-gray) !important; font-weight: 500; }
    body:not(.view-chat-interface) #footer-bar a.active-nav i,
    body:not(.view-chat-interface) #footer-bar a.active-nav span { color: var(--ios-blue) !important; }
    body:not(.view-chat-interface) #footer-bar a.active-nav strong { background-color: rgba(0,122,255,.12) !important; }
}

/* ── Dashboard: iPadOS home-screen icon tiles (colorful rounded squares) ──
   The single most recognisable iPadOS signal and font-independent, so the
   change is visible on every platform (not just Apple devices). */
.page-content:not(.page-mod) .iconswrap .card.card-style {
    border-radius: 20px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.05) !important;
    border: 1px solid rgba(0,0,0,.04) !important;
}
.page-content:not(.page-mod) .iconswrap .card.card-style .p-3 i[class*="fa-"],
.page-content:not(.page-mod) .iconswrap .card.card-style .p-3 i[class*="lni-"] {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 58px; height: 58px;
    border-radius: 16px;
    font-size: 26px !important;
    color: #fff !important;
    margin: 4px auto 2px !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
/* Rotating iOS app-icon palette across the tiles (main dashboard only) */
.page-content:not(.page-mod) .iconswrap > [class*="col-"]:nth-child(6n+1) .card .p-3 i { background: linear-gradient(135deg,#0a84ff,#0064e0); }
.page-content:not(.page-mod) .iconswrap > [class*="col-"]:nth-child(6n+2) .card .p-3 i { background: linear-gradient(135deg,#34c759,#28a847); }
.page-content:not(.page-mod) .iconswrap > [class*="col-"]:nth-child(6n+3) .card .p-3 i { background: linear-gradient(135deg,#ff9f0a,#f08000); }
.page-content:not(.page-mod) .iconswrap > [class*="col-"]:nth-child(6n+4) .card .p-3 i { background: linear-gradient(135deg,#ff375f,#e0244b); }
.page-content:not(.page-mod) .iconswrap > [class*="col-"]:nth-child(6n+5) .card .p-3 i { background: linear-gradient(135deg,#bf5af2,#a23cd6); }
.page-content:not(.page-mod) .iconswrap > [class*="col-"]:nth-child(6n)   .card .p-3 i { background: linear-gradient(135deg,#5ac8fa,#32ade6); }
.page-content:not(.page-mod) .iconswrap h4 { font-weight: 600 !important; letter-spacing: -0.01em !important; color: var(--ios-ink) !important; opacity: .9; }

/* ── Dashboard hero: drop the whole card below the header and let it grow ── */
@media (max-width: 767px) {
    .dashboard-hero {
        height: auto !important;
        min-height: 150px !important;
        margin-top: 72px !important;   /* push the hero down, clear of the fixed header */
        padding-bottom: 16px !important;
    }
    .dashboard-hero .hero-content-wrapper { margin-top: 12px !important; }
}

/* ── Footer-bar icons: pin to the FA4 webfont (one face = every glyph present).
   Fixes home/share/qr rendering as tofu under the mixed FA4/FA5/FA6 setup
   (the regular FA6 face that .fa resolves to lacks those solid-only glyphs). */
#footer-bar a i,
.sidebar-module-nav a i { font-family: 'FontAwesome' !important; font-weight: normal !important; }

/* ── Side menu: iOS grouped-list polish (App Kit .list-custom-small) ── */
.menu #menu-sidebar-left-2 ~ *,
.menu.menu-sidebar .list-group.list-custom-small > a {
    border-radius: 12px;
}
.menu.menu-sidebar .card-style { border-radius: var(--ios-radius) !important; box-shadow: 0 6px 18px rgba(0,0,0,.05) !important; }
.menu.menu-sidebar .list-group.list-custom-small > a { padding-top: 11px !important; padding-bottom: 11px !important; }
.menu.menu-sidebar h5.text-uppercase { letter-spacing: .04em !important; color: var(--ios-gray) !important; }
.menu.menu-sidebar .list-group.list-custom-small > a i:first-child {
    border-radius: 9px !important;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  REWARDS PLUGIN — admin styles                                      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.page-mod-rewards { padding-bottom: 90px; }

/* Hero toolbar */
.rw-hero { display:flex; align-items:center; gap:14px; padding:18px 20px 14px; background:#fff; border-radius:0 0 22px 22px; margin-bottom:16px; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.rw-hero-icon { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; background:var(--ios-blue); flex-shrink:0; }
.rw-hero-text { flex:1; min-width:0; }
.rw-hero-actions { display:flex; gap:8px; flex-shrink:0; }
.rw-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px; border:1.5px solid #e0e3ea; background:#fff; font-size:13px; font-weight:600; color:#333; cursor:pointer; text-decoration:none; transition:all .18s; }
.rw-btn:hover { border-color:#6c5ce7; color:#6c5ce7; }
.rw-btn-pri { background:#6c5ce7; color:#fff; border-color:#6c5ce7; }
.rw-btn-pri:hover { background:#5a4bd1; border-color:#5a4bd1; color:#fff; }

/* KPI grid */
.rw-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:12px; padding:0 16px 16px; }
.rw-kpi-card { background:#fff; border-radius:18px; padding:18px 16px; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.rw-kpi-val { font-size:28px; font-weight:800; letter-spacing:-1px; color:#1a1a2e; }
.rw-kpi-lbl { font-size:11px; color:#a0aab4; margin-top:3px; font-weight:600; }
.rw-kpi-blue  .rw-kpi-val { color:#6c5ce7; }
.rw-kpi-orange .rw-kpi-val { color:#e17360; }
.rw-kpi-green  .rw-kpi-val { color:#00b894; }
.rw-kpi-purple .rw-kpi-val { color:#a29bfe; }

/* Cards */
.rw-card { margin:0 16px 16px !important; border-radius:18px !important; }

/* Quick grid */
.rw-quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rw-quick-item { display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:inherit; }
.rw-quick-ic { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
.rw-quick-lbl { font-size:11px; font-weight:700; text-align:center; }

/* Copy wrap */
.rw-copy-wrap { display:flex; gap:6px; }
.rw-copy-input { flex:1; border:1.5px solid #e0e3ea; border-radius:10px; padding:8px 12px; font-size:12px; outline:none; color:#636e72; }
.rw-copy-btn { padding:8px 12px; border-radius:10px; border:none; background:#6c5ce7; color:#fff; cursor:pointer; }

/* Search */
.rw-search { width:100%; border:1.5px solid #e0e3ea; border-radius:12px; padding:10px 14px; font-size:14px; outline:none; transition:border .2s; }
.rw-search:focus { border-color:#6c5ce7; }

/* Member rows */
.rw-member-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f0f2f5; }
.rw-member-row:last-child { border-bottom:none; }
.rw-member-avatar { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:700; flex-shrink:0; }
.rw-member-info { flex:1; min-width:0; }
.rw-tier-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; color:#fff; margin-top:4px; }
.rw-member-pts { text-align:right; flex-shrink:0; }
.rw-pts-big { font-size:22px; font-weight:800; color:#6c5ce7; letter-spacing:-1px; }
.rw-icon-btn { background:none; border:none; cursor:pointer; padding:6px 8px; border-radius:8px; font-size:15px; color:#636e72; transition:all .15s; }
.rw-icon-btn:hover { background:#f0f2f5; color:#333; }

/* Drawer */
.rw-drawer { position:fixed; top:0; right:-400px; width:min(400px,100vw); height:100vh; background:#fff; z-index:9999; box-shadow:-8px 0 30px rgba(0,0,0,.12); transition:right .28s cubic-bezier(.4,0,.2,1); overflow-y:auto; display:flex; flex-direction:column; }
.rw-drawer.open { right:0; }
.rw-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9998; opacity:0; pointer-events:none; transition:opacity .28s; }
.rw-drawer-overlay.open { opacity:1; pointer-events:all; }
.rw-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid #f0f2f5; font-weight:700; font-size:16px; position:sticky; top:0; background:#fff; z-index:1; }
.rw-drawer-close { background:none; border:none; cursor:pointer; font-size:20px; color:#636e72; }
.rw-drawer-body { flex:1; padding:16px 20px; }
.rw-hist-header { display:flex; align-items:center; gap:16px; padding:12px; background:#f8f9fa; border-radius:14px; margin-bottom:16px; }
.rw-pts-circle { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#6c5ce7,#a29bfe); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:800; line-height:1; flex-shrink:0; }
.rw-pts-circle span { font-size:10px; font-weight:600; opacity:.85; }
.rw-hist-adjust { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:12px; background:#f0f2f5; border-radius:12px; margin-bottom:12px; }
.rw-txn-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f8f9fa; }
.rw-txn-row:last-child { border-bottom:none; }

/* Catalog grid */
.rw-catalog-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; padding:0 16px 16px; }
.rw-catalog-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); border:1.5px solid #f0f2f5; transition:all .2s; }
.rw-catalog-card:hover { box-shadow:0 8px 24px rgba(108,92,231,.15); border-color:#6c5ce7; }
.rw-catalog-img { width:100%; height:140px; object-fit:cover; }
.rw-catalog-imgph { width:100%; height:140px; background:#f8f9fa; display:flex; align-items:center; justify-content:center; color:#a0aab4; }
.rw-catalog-body { padding:14px; }
.rw-catalog-type { font-size:10px; color:#a0aab4; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.rw-catalog-pts { font-size:14px; font-weight:800; color:#6c5ce7; margin-top:8px; }
.rw-catalog-actions { display:flex; gap:4px; padding:8px 14px 12px; border-top:1px solid #f0f2f5; }
.rw-inactive { opacity:.55; }

/* Tabs */
.rw-tabs { border-bottom:2px solid #f0f2f5; margin-bottom:0; }
.rw-tabs .nav-link { font-size:13px; font-weight:700; color:#636e72; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; }
.rw-tabs .nav-link.active { color:#6c5ce7; border-bottom-color:#6c5ce7; }

/* Redemption rows */
.rw-redeem-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #f0f2f5; }
.rw-redeem-row:last-child { border-bottom:none; }
.rw-redeem-code { font-family:monospace; font-size:15px; font-weight:800; color:#6c5ce7; background:#6c5ce722; padding:6px 10px; border-radius:8px; flex-shrink:0; }
.rw-redeem-info { flex:1; min-width:0; }
.rw-redeem-btns { display:flex; gap:6px; flex-direction:column; align-items:flex-end; }
.rw-badge-pts { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:10px; background:#6c5ce722; color:#6c5ce7; font-size:11px; font-weight:700; margin-top:4px; }
.rw-redeem-fulfilled { opacity:.6; }
.rw-redeem-cancelled { opacity:.45; }

/* Tier rows */
.rw-tier-row { display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid #f0f2f5; }
.rw-tier-row:last-child { border-bottom:none; }
.rw-tier-badge-big { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; flex-shrink:0; }

/* Push notifications */
.rw-push-templates { display:flex; flex-wrap:wrap; gap:8px; }
.rw-tmpl-btn { padding:6px 12px; border-radius:20px; border:1.5px solid #6c5ce7; background:#fff; color:#6c5ce7; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.rw-tmpl-btn:hover { background:#6c5ce7; color:#fff; }
.rw-push-row { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid #f0f2f5; }
.rw-push-row:last-child { border-bottom:none; }
.rw-push-ic { width:36px; height:36px; border-radius:10px; background:#6c5ce722; display:flex; align-items:center; justify-content:center; color:#6c5ce7; flex-shrink:0; }

/* Empty state */
.rw-empty { text-align:center; padding:40px 20px; color:#a0aab4; }

/* Responsive */
@media (max-width: 600px) {
    .rw-kpi-grid { grid-template-columns:repeat(2,1fr); }
    .rw-quick-grid { grid-template-columns:repeat(3,1fr); }
    .rw-catalog-grid { grid-template-columns:repeat(2,1fr); }
}

/* ============================================================================
   DAYCARE PLUGIN MODERN APPLE-STYLE OVERRIDES
   Aplica a todas las páginas de daycare con la clase .page-mod-daycare en el body.
   ============================================================================ */

/* Page Background */
body.page-mod-daycare {
    background-color: #f5f5f7 !important;
}

/* Modals / Menus */
body.page-mod-daycare .menu,
body.page-mod-daycare .menu-box-bottom,
body.page-mod-daycare .menu-box-modal {
    background-color: #ffffff !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
}
@media (min-width: 768px) {
    body.page-mod-daycare .menu,
    body.page-mod-daycare .menu-box-bottom,
    body.page-mod-daycare .menu-box-modal {
        border-radius: 28px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
    }
}

/* Modal Title / Header */
body.page-mod-daycare .menu-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 24px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    margin: 0 !important;
    height: auto !important;
}
body.page-mod-daycare .menu-title h1,
body.page-mod-daycare .menu-title h2 {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1c1c1e !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}
body.page-mod-daycare .menu-title .close-menu {
    width: 32px !important;
    height: 32px !important;
    background: #f5f5f7 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    color: #8e8e93 !important;
    transition: background 0.2s, color 0.2s !important;
    position: static !important;
    margin: 0 !important;
}
body.page-mod-daycare .menu-title .close-menu:hover {
    background: #e5e5ea !important;
    color: #1c1c1e !important;
}
body.page-mod-daycare .menu-title .close-menu i {
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Form Container */
body.page-mod-daycare .menu .content,
body.page-mod-daycare .menu .modern-form,
body.page-mod-daycare .menu form {
    padding: 24px !important;
    margin: 0 !important;
}
body.page-mod-daycare .menu .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Input Fields (Apple Style) */
body.page-mod-daycare .form-group,
body.page-mod-daycare .input-style {
    margin-bottom: 18px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
body.page-mod-daycare label,
body.page-mod-daycare .form-group label,
body.page-mod-daycare .input-style label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #8e8e93 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: static !important;
    transform: none !important;
    transition: none !important;
}
body.page-mod-daycare .form-control,
body.page-mod-daycare .input-style input,
body.page-mod-daycare .input-style select,
body.page-mod-daycare .input-style textarea,
body.page-mod-daycare input[type="text"],
body.page-mod-daycare input[type="number"],
body.page-mod-daycare input[type="date"],
body.page-mod-daycare input[type="datetime-local"],
body.page-mod-daycare select,
body.page-mod-daycare textarea {
    width: 100% !important;
    background-color: #f5f5f7 !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1c1e !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    outline: none !important;
    height: auto !important;
}
body.page-mod-daycare .form-control:focus,
body.page-mod-daycare .input-style input:focus,
body.page-mod-daycare .input-style select:focus,
body.page-mod-daycare .input-style textarea:focus,
body.page-mod-daycare input:focus,
body.page-mod-daycare select:focus,
body.page-mod-daycare textarea:focus {
    background-color: #ffffff !important;
    border-color: var(--mod-accent, #af52de) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mod-accent, #af52de) 15%, transparent) !important;
}
body.page-mod-daycare .form-control[readonly] {
    background-color: #e5e5ea !important;
    color: #8e8e93 !important;
    cursor: not-allowed !important;
}

/* Buttons (Apple Style) */
body.page-mod-daycare .submit-btn,
body.page-mod-daycare .btn-apple-submit,
body.page-mod-daycare button[type="submit"],
body.page-mod-daycare .btn.bg-dark,
body.page-mod-daycare .btn.color-white,
body.page-mod-daycare #addmeal,
body.page-mod-daycare #update_rest,
body.page-mod-daycare #add_rest,
body.page-mod-daycare #record_rest,
body.page-mod-daycare #end_rest {
    background: linear-gradient(135deg, var(--mod-accent, #af52de), color-mix(in srgb, var(--mod-accent, #af52de) 70%, #fff)) !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 14px 24px !important;
    width: 100% !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--mod-accent, #af52de) 20%, transparent) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
body.page-mod-daycare .submit-btn:hover,
body.page-mod-daycare .btn-apple-submit:hover,
body.page-mod-daycare button[type="submit"]:hover,
body.page-mod-daycare .btn.bg-dark:hover,
body.page-mod-daycare #addmeal:hover,
body.page-mod-daycare #update_rest:hover,
body.page-mod-daycare #add_rest:hover,
body.page-mod-daycare #record_rest:hover,
body.page-mod-daycare #end_rest:hover {
    filter: brightness(1.05) !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--mod-accent, #af52de) 30%, transparent) !important;
}
body.page-mod-daycare .submit-btn:active,
body.page-mod-daycare .btn-apple-submit:active,
body.page-mod-daycare button[type="submit"]:active,
body.page-mod-daycare .btn.bg-dark:active,
body.page-mod-daycare #addmeal:active,
body.page-mod-daycare #update_rest:active,
body.page-mod-daycare #add_rest:active,
body.page-mod-daycare #record_rest:active,
body.page-mod-daycare #end_rest:active {
    transform: scale(0.98) !important;
}

/* Signature Pad Style */
body.page-mod-daycare canvas#signature-pad,
body.page-mod-daycare canvas#signature-pad-edit {
    border: 2px dashed rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;
    background: #f8f9fa !important;
    width: 100% !important;
    height: 180px !important;
    display: block !important;
    margin-bottom: 8px !important;
}
body.page-mod-daycare #clear-button,
body.page-mod-daycare #clear-button-edit {
    background: #fdecea !important;
    color: #c0392b !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.2s !important;
}
body.page-mod-daycare #clear-button:hover,
body.page-mod-daycare #clear-button-edit:hover {
    background: #fcdbd7 !important;
}

/* Search Box in Modals */
body.page-mod-daycare .menu .search-box {
    background: #f5f5f7 !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}
body.page-mod-daycare .menu .search-box input {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1c1e !important;
    width: 100% !important;
}