:root {
  
  /* Casals Custom Colors */
  --casals-cyan-900: #003b52;
  --casals-cyan-800: #005575;
  --casals-cyan-700: #00688f;
  --casals-cyan-600: #008dc2;
  --casals-cyan-500: #00aeef;
  --casals-cyan-400: #29c1fa;
  --casals-cyan-300: #a3dff5;
  --casals-cyan-200: #a3dff5;
  --casals-cyan-100: #d1effa;
  --casals-cyan-50: #ecf9fe;

  --casals-grey-1000: #232323;
  --casals-grey-900: #0d0d0d;
  --casals-grey-800: #3d3d3d;
  --casals-grey-700: #515151;
  --casals-grey-600: #7d7d7d;
  --casals-grey-500: #999999;
  --casals-grey-400: #bfbfbf;
  --casals-grey-300: #d6d6d6;
  --casals-grey-200: #e5e5e5;
  --casals-grey-100: #f2f2f2;
  --casals-grey-50: #fcfcfc;

  --casals-surface: #f8f8f8;

  /* Primary-palette Colors */
  --casals-brown-900: #100c09;
  --casals-brown-800: #2a2018;
  --casals-brown-700: #453326;
  --casals-brown-600: #614733;
  --casals-brown-500: #825f45;
  --casals-brown-400: #a17859;
  --casals-brown-300: #b2927b;
  --casals-brown-200: #c1ad9f;
  --casals-brown-100: #d2c8c1;
  --casals-brown-50: #dad6d3;

  /* yellow palette Colors */
  --casals-yellow-900: #695000;
  --casals-yellow-800: #896900;
  --casals-yellow-700: #b18700;
  --casals-yellow-600: #e3ad00;
  --casals-yellow-500: #f9be00;
  --casals-yellow-400: #facb33;
  --casals-yellow-300: #fbd354;
  --casals-yellow-200: #fce18a;
  --casals-yellow-100: #fdebb0;
  --casals-yellow-50: #fef9e6;
  /* orange palette Colors */
  --casals-orange-900: #664000;
  --casals-orange-800: #865400;
  --casals-orange-700: #ad6c00;
  --casals-orange-600: #de8a00;
  --casals-orange-500: #f49800;
  --casals-orange-400: #f6ad33;
  --casals-orange-300: #f8ba54;
  --casals-orange-200: #fad08a;
  --casals-orange-100: #fcdfb0;
  --casals-orange-50: #fef5e6;
  /* strong orange palette Colors */
  --casals-strong-orange-900: #611f06;
  --casals-strong-orange-800: #802808;
  --casals-strong-orange-700: #a5340b;
  --casals-strong-orange-600: #d3420e;
  --casals-strong-orange-500: #e8490f;
  --casals-strong-orange-400: #ed6d3f;
  --casals-strong-orange-300: #f0855e;
  --casals-strong-orange-200: #f4ab91;
  --casals-strong-orange-100: #f8c7b5;
  --casals-strong-orange-50: #fdede7;
  /* red palette Colors */
  --casals-red-900: #601008;
  --casals-red-800: #7d140a;
  --casals-red-700: #a21a0d;
  --casals-red-600: #cf2211;
  --casals-red-500: #e42513;
  --casals-red-400: #e95142;
  --casals-red-300: #ed6d61;
  --casals-red-200: #f39b92;
  --casals-red-100: #f7bbb6;
  --casals-red-50: #fce9e7;
  /* frambuesa red palette Colors */
  --casals-frambuesa-red-900: #470a1d;
  --casals-frambuesa-red-800: #5e0d25;
  --casals-frambuesa-red-700: #791130;
  --casals-frambuesa-red-600: #9b163e;
  --casals-frambuesa-red-500: #aa1844;
  --casals-frambuesa-red-400: #bb4669;
  --casals-frambuesa-red-300: #c66482;
  --casals-frambuesa-red-200: #d895a9;
  --casals-frambuesa-red-100: #e5b7c5;
  --casals-frambuesa-red-50: #f7e8ec;
  /* white palette Colors */
  --casals-white-900: #5c5c5c;
  --casals-white-800: #787878;
  --casals-white-700: #9b9b9b;
  --casals-white-600: #c6c6c6;
  --casals-white-500: #dadada;
  --casals-white-400: #e1e1e1;
  --casals-white-300: #e6e6e6;
  --casals-white-200: #eeeeee;
  --casals-white-100: #f4f4f4;
  --casals-white-50: #fbfbfb;
  /* violet palette Colors */
  --casals-violet-900: #361339;
  --casals-violet-800: #46194a;
  --casals-violet-700: #5b2060;
  --casals-violet-600: #74297b;
  --casals-violet-500: #802d87;
  --casals-violet-400: #99579f;
  --casals-violet-300: #aa72af;
  --casals-violet-200: #c59ec8;
  --casals-violet-100: #d8beda;
  --casals-violet-50: #f2eaf3;
  /* blue palette Colors */
  --casals-blue-900: #eceef6;
  --casals-blue-800: #242e59;
  --casals-blue-700: #2f3c72;
  --casals-blue-600: #3c4c93;
  --casals-blue-500: #4254a1;
  --casals-blue-400: #6876b4;
  --casals-blue-300: #808cc0;
  --casals-blue-200: #a8b0d4;
  --casals-blue-100: #c4cae2;
  --casals-blue-50: #1c2344;
  /* grass green palette Colors */
  --casals-grass-green-900: #2b4714;
  --casals-grass-green-800: #385e1a;
  --casals-grass-green-700: #487921;
  --casals-grass-green-600: #5d9b2b;
  --casals-grass-green-500: #66aa2f;
  --casals-grass-green-400: #85bb59;
  --casals-grass-green-300: #98c674;
  --casals-grass-green-200: #b9d89f;
  --casals-grass-green-100: #d0e5bf;
  --casals-grass-green-50: #f0f7ea;
  /* green palette Colors */
  --casals-green-900: #5a5c09;
  --casals-green-800: #76780c;
  --casals-green-700: #999b0f;
  --casals-green-600: #c4c613;
  --casals-green-500: #d7da15;
  --casals-green-400: #dfe144;
  --casals-green-300: #e4e662;
  --casals-green-200: #edee93;
  --casals-green-100: #f3f4b6;
  --casals-green-50: #fbfbe8;

  --casals-black: #000000;
  --casals-white: #FFFFFF;

  --color1: var(--main-book-color);

  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.5rem;      /* 24px */
  --space-6: 2rem;        /* 32px */
  --space-7: 3rem;        /* 48px */
  --space-8: 4rem;        /* 64px */
  --space-9: 6rem;        /* 96px */
  --space-10: 8.5rem;     /* 136px */

}
/* Font display optimization for Bootstrap Icons */
@font-face {
  font-family: "bootstrap-icons";
  src:
    url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/fonts/bootstrap-icons.woff2?2ab2cbbe07fcebb53bdaa7313bb290f2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/fonts/bootstrap-icons.woff?2ab2cbbe07fcebb53bdaa7313bb290f2")
      format("woff");
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}
* {
  font-family: 'Noto Sans', sans-serif;
}
body {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: regular;
  background-color: var(--casals-grey-50);
  color: var(--casals-primary-900);
}
main {
  display: block;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--casals-primary-500);
  color: var(--casals-grey-900);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  border: 0;
  border: 1px solid var(--casals-primary-500);
  border-radius: 1.5rem;
  gap: 0.5rem;
}
.button:hover {
  background-color: var(--casals-grey-900);
  color: var(--casals-white-50);
}
.button a {
  text-decoration: none;
}
.button:hover {
  text-decoration: underline;
}
.button svg{
  width: 1.5rem;
  height: 1.5rem;
}
.button svg path{
  fill: var(--casals-grey-900);
}
.button:hover svg path{
  fill: var(--casals-white-50);
}
.button-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--casals-white-50);
  color: var(--casals-grey-900);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--casals-grey-900);
  border-radius: 1.5rem;
  gap: 0.5rem;
}
.button-small:hover {
  outline: solid 1px var(--casals-grey-900);
}
.button-small a{
  text-decoration: none;
}
.button-small:hover {
  text-decoration: underline;
}
.button-small svg{
  width: 1.5rem;
  height: 1.5rem;
}
.button-small svg path{
  fill: var(--casals-grey-900);
}
.top-10 {
  top: var(--space-6);
}
.top-20 {
  top: var(--space-8);
}
.top-30 {
  top: var(--space-9);
}
.top-40 {
  top: var(--space-10);
}
.bottom-10 {
  bottom: var(--space-6);
}
.mw-75 {
  max-width: 75% !important;
}

/* Focus outline utility: visible on keyboard focus, uses brand color */
/* .focus-outline:focus {
  outline: 2px solid var(--casals-cyan-500);
  outline-offset: 2px;
}
.focus-outline:focus:not(:focus-visible) {
  outline: none;
}
.focus-outline:focus-visible {
  outline: 2px solid var(--casals-cyan-500);
  outline-offset: 2px;
} */

/* Focus outline utility: no visible outline when focused */
.focus-outline:focus,
.focus-outline:focus-visible {
  outline: none;
}
.bg-surface {
  background-color: var(--casals-surface);
}
/* Unitat dropdown: check icon only on selected option */
.unitat-option .unitat-option-check {
  display: none;
}
.unitat-option.is-selected .unitat-option-check {
  display: inline-flex;
}
.unitat-option.is-selected .unitat-option-subtitle {
  color: inherit;
}
.bg-casals-primary-900 {
  color: var(--casals-primary-text-900);
  background-color: var(--casals-primary-900);
}
.bg-casals-primary-800 {
  color: var(--casals-primary-text-800);
  background-color: var(--casals-primary-800);
}
.bg-casals-primary-700 {
  color: var(--casals-primary-text-700);
  background-color: var(--casals-primary-700);
}
.bg-casals-primary-600 {
  color: var(--casals-primary-text-600);
  background-color: var(--casals-primary-600);
}
.bg-casals-primary-500 {
  color: var(--casals-primary-text-500);
  background-color: var(--casals-primary-500);
}
.bg-casals-primary-400 {
  color: var(--casals-primary-text-400);
  background-color: var(--casals-primary-400);
}
.bg-casals-primary-300 {
  color: var(--casals-primary-text-300);
  background-color: var(--casals-primary-300);
}
.bg-casals-primary-200 {
  color: var(--casals-primary-text-200);
  background-color: var(--casals-primary-200);
}
.bg-casals-primary-100 {
  color: var(--casals-primary-text-100);
  background-color: var(--casals-primary-100);
}
.bg-casals-primary-50 {
  color: var(--casals-primary-text-50);
  background-color: var(--casals-primary-50);
}
.bg-casals-cyan-800 {
  background-color: var(--casals-cyan-800);
}
.bg-casals-cyan-600 {
  background-color: var(--casals-cyan-600);
}
.bg-casals-cyan-500 {
  background-color: var(--casals-cyan-500);
}
.bg-casals-cyan-400 {
  background-color: var(--casals-cyan-400);
}
.bg-casals-cyan-300 {
  background-color: var(--casals-cyan-300);
}
.bg-casals-cyan-200 {
  background-color: var(--casals-cyan-200);
}
.bg-casals-grey-700 {
  background-color: var(--casals-grey-700);
}
.bg-casals-grey-400 {
  background-color: var(--casals-grey-400);
}
.bg-casals-grey-300 {
  background-color: var(--casals-grey-300);
}

h5 {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}
.shadow-md {
  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.092) !important;
}
.shadow-lb {
  box-shadow: -1px 2px 7px 0px rgb(167 170 130) !important;
}
.text-casals-grey-900 {
  color: var(--casals-grey-900);
}
.text-casals-grey-800 {
  color: var(--casals-grey-800);
}
.text-casals-grey-700 {
  color: var(--casals-grey-700);
}
.text-casals-grey-600 {
  color: var(--casals-grey-600);
}
.text-casals-grey-500 {
  color: var(--casals-grey-500);
}
.text-casals-grey-400 {
  color: var(--casals-grey-400);
}
.text-casals-grey-50 {
  color: var(--casals-grey-50) !important;
}
.casals-primary-text-800 {
  color: var(--casals-primary-text-800);
}
.text-casals-primary-800 {
  color: var(--casals-primary-800);
}
.text-casals-primary-900 {
  color: var(--casals-primary-900);
}
.text-casals-primary-500 {
  color: var(--casals-primary-500);
}
.text-casals-cyan-700 {
  color: var(--casals-cyan-700);
}
.text-casals-white-50 {
  color: var(--casals-white-50);
}
.border-casals-primary-900 {
  border-color: var(--casals-primary-900) !important;
}
.border-casals-primary-800 {
  border-color: var(--casals-primary-800) !important;
}
.border-casals-primary-700 {
  border-color: var(--casals-primary-700) !important;
}
.border-casals-primary-500 {
  border-color: var(--casals-primary-500) !important;
}
.border-casals-primary-600 {
  border-color: var(--casals-primary-600) !important;
}
.border-casals-primary-200 {
  border-color: var(--casals-primary-200) !important;
}
.border-casals-grey-200 {
  border-color: var(--casals-grey-200) !important;
}
.border-casals-grey-300 {
  border-color: var(--casals-grey-300) !important;
}
.border-casals-grey-400 {
  border-color: var(--casals-grey-400) !important;
}
.border-casals-grey-500 {
  border-color: var(--casals-grey-500) !important;
}
.border-casals-grey-600 {
  border-color: var(--casals-grey-600) !important;
}
.border-casals-grey-700 {
  border-color: var(--casals-grey-700) !important;
}
.border-casals-grey-800 {
  border-color: var(--casals-grey-800) !important;
}
.border-casals-grey-900 {
  border-color: var(--casals-grey-900) !important;
}
.mt-5-5 {
  margin-top: 3.8rem;
}
.mt-2-5 {
  margin-top: 1rem;
}
.p-4-5 {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.p-2-5 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-1-5 {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.py-0-5 {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}
.fs-5-5 {
  font-size: 1.125rem;
}
.fs-7 {
  font-size: 0.875rem;
}
.fs-8 {
  font-size: 0.75rem;
}
.custom-tooltip {
  --bs-tooltip-bg: var(--casals-cyan-500);
  --bs-tooltip-color: var(--casals-black);
  opacity: 1;
}

.tooltip-grey {
  --bs-tooltip-bg: var(--casals-grey-400);
  background-color: var(--casals-grey-400);
  opacity: 1;
}
.tooltip-grey .tooltip-inner {
  color: #000;
}
.tooltip-dark-grey {
  --bs-tooltip-bg: var(--casals-grey-700);
  background-color: var(--casals-grey-700);
  opacity: 1;
}
.tooltip-dark-grey .tooltip-inner {
  color: #fff;
  font-weight: 200;
  border-radius: 0.5rem !important;
  opacity: 1;
}
.tooltip-dark-grey .tooltip-inner strong {
  font-weight: 800;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.tooltip.show {
  opacity: 1;
}
.hover-underline:hover {
  text-decoration: underline !important;
  cursor: pointer !important;
}

.dropdown-item:hover {
  background-color: var(--casals-cyan-500) !important;
}

/* Dropdown first item with image hover effect */
.dropdown-menu li.external-arrow .dropdown-item {
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.dropdown-menu li.external-arrow .dropdown-item img {
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 20px;
  margin-left: 0;
  display: inline-block;
}

.dropdown-menu li.external-arrow .dropdown-item:hover img {
  opacity: 1;
}

.help-button:hover {
  background-color: var(--casals-black) !important;
}
.help-button svg {
  fill: var(--casals-black);
}
.help-button:hover svg {
  fill: var(--casals-cyan-500);
}

/* Button icon swap on hover */
.btn-icon-swap svg[swap-position="start"] {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
a.btn-icon-swap svg[swap-position="end"] {
  fill: var(--casals-cyan-500);
}

.btn-icon-swap svg[swap-position="end"] {
  position: absolute;
  right: 0.3rem;
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.btn-light svg[swap-position="end"]{
  transform: scale(0);
}
.btn-icon-swap span {
  transition: transform 0.3s ease;
}
button.btn-icon-swap {
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}

#grupDropdown[aria-expanded="true"] #grupDropdownArrow {
  transform: rotate(180deg);
}

.scrollable-container {
  overflow-x: scroll;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--casals-primary-800) transparent;
  padding-bottom: 10px;
}

.scrollable-container::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

/* Fondo (track) */
.scrollable-container::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
/* .scrollable-container::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 10px;
} */
.scrollable-container::-webkit-scrollbar-thumb {
  color: var(--casals-primary-text-800);
  background-color: var(--casals-primary-800);
  border-radius: 10px;
}

#grupDropdownSelector {
  top: 60px;
  left: calc(50% + 150px);
}
#UserDropdown:hover {
  background-color: var(--casals-cyan-500) !important;
  color: #000000 !important;
}

/* Grup/centre dropdown buttons: black 2px ring on focus (tab), no layout shift */
.grup-dropdown-btn:focus,
.grup-dropdown-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: -2px;
}

/* Navbar nav links: rounded */
.navbar-nav .nav-link {
  border-radius: 2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Navbar nav links: focus (tab) – cyan background, black text */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible {
  background-color: var(--casals-cyan-500) !important;
  color: #000000 !important;
}
.navbar-nav .nav-link:focus:hover svg[swap-position="end"].focus-hover ,
.navbar-nav .nav-link:focus-visible:hover svg[swap-position="end"].focus-hover  {
  fill: var(--casals-cyan-800);
}
/* Collapsible menu sections on small screens */
@media (max-width: 991.98px) {
  .menu-container {
    height: calc(100dvh - 110px) !important;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 20px;
    margin-top: 108px !important;
  }
  .menu-section-header {
    cursor: pointer;
    user-select: none;
  }

  .menu-section-header::after {
    content: "";
    float: right;
    width: 11px;
    height: 6px;
    background-image: url("../images/icons/Vector.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
  }

  .menu-section-header.collapsed::after {
    transform: rotate(180deg);
  }

  .menu-section-content {
    display: none !important;
  }

  .menu-section-content.expanded {
    display: flex !important;
  }
  .menu-section {
    width: 100% !important;
  }
  #grupDropdownSelector {
    top: 60px;
    left: calc(50% - 210px);
  }

  /* When menu is open: hide page scrollbar, only menu-container scrollbar is visible */
  html.menu-open,
  body.menu-open {
    /* overflow: hidden; */
    scrollbar-width: none;
  }
  html.menu-open::-webkit-scrollbar,
  body.menu-open::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
/* Menu overlay: shadows main content when menu is open */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1499;
  background-color: rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s ease;
}
.dropdown-toggle::after {
  content: none !important;
}

@media (min-width: 992px) {
  #menu-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #menu-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .btn-icon-swap:hover svg[swap-position="start"] {
    opacity: 0;
    transform: scale(0);
  }

  .btn-icon-swap:hover svg[swap-position="end"] {
    opacity: 1;
    transform: scale(1);
  }
  .btn-icon-swap:hover span {
    transform: translateX(-30px);
  }

  .btn-icon-swap:hover {
    border-color: #333 !important;
  }
  .menu-section-content {
    display: flex !important;
  }
  .fs-lg-7 {
    font-size: 0.875rem !important;
  }
  .bg-lg-casals-primary-200 {
    color: var(--casals-primary-text-200);
    background-color: var(--casals-primary-200) !important;
  }
  .border-lg-end {
    border-left: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    border-right-style: solid !important;
  }
  .border-lg-casals-primary-900 {
    border-color: var(--casals-primary-900) !important;
  }
  .border-lg-0 {
    border-left: 0px solid !important;
    border-top: 0px solid !important;
    border-bottom: 0px solid !important;
    border-right: 0px solid !important;
  }
  .position-lg-fixed {
    position: fixed;
  }
  .position-lg-absolute {
    position: absolute;
  }
  .hover-lg-none:hover {
    text-decoration: none !important;
    cursor: default !important;
  }
}

@media (min-width: 1200px) {
  .resource-tabs-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .resource-tabs-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .fs-xl-5-5 {
    font-size: 1rem !important;
  }
  .p-xl-4-5 {
    padding: 2rem !important;
  }
}

@media (max-width: 1399px) and (min-width: 992px) {
  .menu-section {
    width: 20% !important;
  }
}
@media (min-width: 992px) and (max-width: 1399px) {
  #grupDropdownSelector {
    left: calc(50% + 40px);
  }
}
button.btn-icon-swap svg[swap-position="start"] {
  fill: var(--casals-primary-800);
}

button.btn-icon-swap svg[swap-position="end"] {
  fill: var(--casals-secondary-700);
}
.card.active span svg {
  fill: var(--casals-primary-800);
  transition: color 0.3s ease;
}
.card.active:hover span svg {
  fill: var(--casals-secondary-800);
  transition: fill 0.3s ease;
}

/* Classe selector radios: black when selected */
input[name="classe"] {
  accent-color: #0d0d0d;
}
/* BEGIN fisica.css contingut */
/* Grup dropdown: fixed height + scrollable content, button always visible */
#grupDropdownMenu {
  height: 550px;
  max-height: min(550px, 85vh);
  overflow: hidden;
}
#grupDropdownMenu .py-3.d-flex {
  flex: 1 1 0;
  min-height: 0;
}
#grupDropdownMenu .overflow-y-auto.flex-grow-1 {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* School list block: h4 toggles ul with slide animation */
.school-list-block-toggle {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}
.school-list-block-toggle:hover {
  opacity: 0.85;
}
.school-block-list {
  overflow: hidden;
  max-height: 1200px;
  transition:
    max-height 0.35s ease-out,
    opacity 0.25s ease;
}
.school-list-block.collapsed .school-block-list {
  max-height: 0;
  opacity: 0;
}
.school-list-block.collapsed .school-list-block-arrow {
  transform: rotate(-180deg);
}
.school-block-list li:has(input[type="radio"]) {
  cursor: pointer;
 }
/* END fisica.css contingut */
/* Icon with notification badge */
.icon-with-badge {
  line-height: 0;
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.125rem;
  color: #fff;
  text-align: center;
  background-color: var(--casals-red-800);
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Scroll to top button: bottom-left, only on screens smaller than lg (Bootstrap lg = 992px) */
.scroll-to-top-btn {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1.5rem;
  z-index: 100;
  width: 2.75rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: #1a1a1a;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}
.scroll-to-top-btn:hover {
  background-color: #2d2d2d;
}
.scroll-to-top-btn:active {
  transform: scale(0.97);
}
.scroll-to-top-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .scroll-to-top-btn {
    display: inline-flex;
  }
}
.user-dropdown-arrow {
  margin-left: 5px;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}
.dropdown:has(.dropdown-menu.show) .user-dropdown-arrow {
  transform: rotate(-270deg);
}
.grup-dropdown-arrow {
  transition: transform 0.3s ease;
}
#grupDropdown.grup-dropdown-open .grup-dropdown-arrow {
  transform: rotate(180deg);
}
#grupDropdown:hover,
#btn-inici-nav:hover,
#grupDropdown.grup-dropdown-open {
  border-color: var(--casals-grey-800) !important;
  transition: border-color 0.2s ease;
}
#grupDropdownParent #grupDropdown {
  width: 300px;
}
.grup-dropdown-btn:focus,
.grup-dropdown-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: -2px;
}
.dropdown-toggle::after {
  content: none !important;
}
.navbar-nav .nav-link {
  border-radius: 2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
#centres_usuari_login_registre{
  background: url(data:image/svg+xml;base64,PHN2ZwogICAgd2lkdGg9IjE2IgogICAgaGVpZ2h0PSIxNiIKICAgIHZpZXdCb3g9IjAgMCAxNiAxNiIKICAgIHN0eWxlPSJ0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4zcyBlYXNlIgogICAgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCj4KICAgIDxwYXRoCiAgICAgICAgZmlsbC1ydWxlPSJldmVub2RkIgogICAgICAgIGQ9Ik0xLjY0NiA0LjY0NmEuNS41IDAgMCAxIC43MDggMEw4IDEwLjI5M2w1LjY0Ni01LjY0N2EuNS41IDAgMCAxIC43MDguNzA4bC02IDZhLjUuNSAwIDAgMS0uNzA4IDBsLTYtNmEuNS41IDAgMCAxIDAtLjcwOHoiCiAgICAvPgo8L3N2Zz4=) no-repeat 95% 50%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.img-opacitat-50 img{
  opacity: .5;

}
#jsWindow, #jsWindowAlert {
  z-index: 2000 !important;
}
#divJSDialogContent input[type="text"] {
  margin-left: 2px!important;
}
.botons_registre {
  float: right;
  width: 100%;
}
#_fade_div {
  z-index: 1999!important;
}
#btn-inici-nav:hover span {
  text-decoration: underline !important;
}
#videoModal {
  z-index: 1900;
}
#menu-container a{
  color: unset;
  text-decoration: unset;
}
figure {
  margin: 0;
}
/* ecasals custom dropdown 1: Bootstrap 5.3 + minimal overrides */
.ecasals-custom-dropdown-1 .unitat-trigger {
  cursor: pointer;
}
.ecasals-custom-dropdown-1 .unitat-trigger-arrow {
  transition: transform 0.2s ease;
}
.ecasals-custom-dropdown-1.is-open .unitat-trigger .unitat-trigger-arrow {
  transform: rotate(180deg);
}
.ecasals-custom-dropdown-1 .unitat-option {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ecasals-custom-dropdown-1 .unitat-option .unitat-option-check {
  display: none;
}
.ecasals-custom-dropdown-1 .unitat-option.is-selected .unitat-option-check {
  display: inline-flex;
  align-items: center;
}
.ecasals-custom-dropdown-1 .unitat-option:hover {
  color: var(--casals-primary-text-100);
  background-color: var(--casals-primary-100);
}
.ecasals-custom-dropdown-1 .unitat-option-subtitle {
  max-width: 80%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--casals-grey-700);
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: normal;
  font-size: 12px;
}
.ecasals-custom-dropdown-1 .unitat-dropdown-panel::-webkit-scrollbar {
  width: 6px;
  margin-right: 15px;
}
.ecasals-custom-dropdown-1 .unitat-dropdown-panel::-webkit-scrollbar-track {
  background: transparent;
  margin-right: 15px;
}
.ecasals-custom-dropdown-1 .unitat-dropdown-panel::-webkit-scrollbar-thumb {
  color: var(--casals-primary-text-800);
  background-color: var(--casals-primary-800);
  border-radius: 3px;
  margin-right: 15px;
}
.ecasals-custom-dropdown-1 .unitat-dropdown-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--casals-primary-800) transparent;
  direction: ltr;
}
/* Checkbox: transparent, black border, white tick when checked */
.checkbox-transparent-tick {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid #0d0d0d;
  background-color: transparent;
  border-radius: 0.3rem;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.checkbox-transparent-tick:checked {
  background-color: transparent;
  background-image: url("../images/icons/checked.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox-transparent-tick:indeterminate {
  background-color: transparent;
  background-image: url("../images/icons/indeterminate.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox-transparent-tick:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(13, 13, 13, 0.25);
}

.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 6px;
  color: var(--casals-grey-1000);
  background: var(--casals-grey-50);
  border: 1px solid var(--casals-grey-300);
  border-radius: 8px;
  font-size: 14px;
  line-height: 140%;
  margin-top: 16px;
}

.card-tag svg {
  width: 16px;
  height: 16px;
}

.card-tag svg path{
  fill: var(--casals-primary-900);
}

.card-tag li {
  list-style: none;
}

.btn-send-task svg path{
  fill: var(--casals-grey-900);
}

.section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--casals-primary-900);
  cursor: pointer;
  user-select: none;
}

.section-title .toggle-icon {
  float: right;
  transition: transform 0.3s;
}

.section-title.collapsed .toggle-icon {
  transform: rotate(180deg);
}

.section-title .toggle-icon path{
  fill: var(--casals-primary-900);
}

.ld-card-actions-trigger {
  background-color: unset;
  width: 36px;
  height: 36px;
}

.ld-card-actions-trigger--on-dark.show,
.ld-card-actions .ld-card-actions-trigger--on-dark ~ .dropdown-menu {
  color: var(--casals-grey-900);
  background-color: var(--casals-grey-300);
}

.ld-card-actions-trigger--on-light.show,
.ld-card-actions .ld-card-actions-trigger--on-light ~ .dropdown-menu {
  color: var(--casals-grey-50);
  background-color: var(--casals-grey-700);
}

.ld-card-actions .dropdown-menu {
  padding: 2px;
}

.ld-card-actions-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 4px 8px;
}

.ld-card-actions-item:hover {
  text-decoration: underline;
  color: var(--casals-grey-900);
  background-color: var(--casals-grey-400);
}

.ld-card-actions-item .dropdown-item {
  padding: 0 8px;
}

.ld-card-actions .ld-card-actions-trigger--on-light ~ .dropdown-menu .dropdown-item {
  color: var(--casals-grey-50);
}

.ld-card-actions-item .dropdown-item:focus {
  color: var(--casals-grey-900);
  background-color: unset !important;
}

.ld-card-actions .ld-card-actions-trigger--on-dark ~ .dropdown-menu .dropdown-item:focus {
  color: var(--casals-grey-900);
}

.ld-card-actions .ld-card-actions-trigger--on-light ~ .dropdown-menu .dropdown-item:focus {
  color: var(--casals-grey-50);
}

.ld-card-actions .ld-card-actions-trigger--on-light ~ .dropdown-menu .ld-card-actions-item:hover .dropdown-item {
  color: var(--casals-grey-900);
}

.ld-card-actions-item .dropdown-item:hover {
  color: var(--casals-grey-900);
  background-color: unset !important;
}

.ld-card-actions-item svg,
.ld-card-actions-item img.svg {
  width: 24px;
}

.ld-card-actions .ld-card-actions-trigger--on-dark ~ .dropdown-menu svg path,
.ld-card-actions .ld-card-actions-trigger--on-dark ~ .dropdown-menu img.svg path {
  fill: var(--casals-grey-900);
}

.ld-card-actions .ld-card-actions-trigger--on-light ~ .dropdown-menu svg path,
.ld-card-actions .ld-card-actions-trigger--on-light ~ .dropdown-menu img.svg path {
  fill: var(--casals-white);
}

.ld-card-actions .ld-card-actions-trigger--on-light ~ .dropdown-menu .ld-card-actions-item:hover svg path,
.ld-card-actions .ld-card-actions-trigger--on-light ~ .dropdown-menu .ld-card-actions-item:hover img.svg path {
  fill: var(--casals-grey-900);
}

.breadcrumb {
  font-size: 14px;
  color: var(--casals-primary-900);
  background: none;
  padding: 0;
  margin-bottom: 8px;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: var(--casals-primary-900);
}
.breadcrumb-item.active {
  color: var(--casals-primary-900);
  font-weight: 700;
}
@media (max-width: 1199px) {
  #breadcrumb-container
  {
    max-width: 47vw;
  }
  /* Breadcrumb title: max 40% viewport width, single line, ellipsis if overflow */
  .activitats-breadcrumb-title {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}
@media (max-width: 991.98px) {
  #breadcrumb-container
  {
    max-width: 29vw;
  }
  .activitats-breadcrumb-title {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}
@media (max-width: 767px) {
  #breadcrumb-container
  {
    max-width: 50vw;
  }
  #grupDropdownParent #grupDropdown {
    width: auto;
  }
  .activitats-breadcrumb-title {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}
@media (max-width: 575px) {
  #breadcrumb-container
  {
    max-width: 60vw;
  }
}
#toast-container > div {
  padding: 16px 40px 16px 50px;
  width: 379px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background-position: 16px 16px!important;
  box-shadow: none;
  color: var(--casals-grey-900);
  opacity: 1;
}
#toast-container > .toast-info {
  background-color: var(--casals-grey-200);
  background-image: url(/templates/ld/ld2026/assets/images/icons/Info_2.svg) !important;
}
#toast-container > .toast-info svg{
  fill: var(--casals-grey-900);
}
#toast-container > .toast-info .toast-title {
  font-size: 16px;
  font-weight: 800;
}
#toast-container > .toast-info .toast-close-button {
  color: var(--casals-grey-900);
  right: -1em;
  font-size: 25px;
  font-weight: 300;
}
.info-svg:hover {
  color: var(--casals-primary-text-50);
  background-color: var(--casals-primary-50);
}