@charset "UTF-8";
:root {
  --l-primary-50: #f5f7ff;
  --l-primary-100: #e0e4fe;
  --l-primary-200: #c5cdfc;
  --l-primary-300: #b6c0f9;
  --l-primary-400: #91a0f5;
  --l-primary-500: #6679f0;
  --l-primary-600: #5363db;
  --l-primary-700: #3f4aa9;
  --l-primary-800: #2f377d;
  --l-primary-900: #1e234d;
  --l-primary-950: #12152e;
  --l-neutral-50: #f9fafb;
  --l-neutral-100: #eff1f5;
  --l-neutral-200: #d4dae2;
  --l-neutral-300: #b2bdcb;
  --l-neutral-400: #909fb4;
  --l-neutral-500: #6e819d;
  --l-neutral-600: #55657d;
  --l-neutral-700: #3e4a5b;
  --l-neutral-800: #272e39;
  --l-neutral-900: #101317;
  --l-neutral-950: #040506;
  --l-green-50: #f8fdf6;
  --l-green-100: #e9fae5;
  --l-green-200: #ccf4c2;
  --l-green-300: #a4ec91;
  --l-green-400: #7be461;
  --l-green-500: #52db30;
  --l-green-600: #3db31f;
  --l-green-700: #2c8217;
  --l-green-800: #1c520e;
  --l-green-900: #0b2106;
  --l-green-950: #030902;
  --l-orange-50: #fffbf5;
  --l-orange-100: #fef3e2;
  --l-orange-200: #fce4ba;
  --l-orange-300: #face84;
  --l-orange-400: #f8b84d;
  --l-orange-500: #f5a216;
  --l-orange-600: #ca8208;
  --l-orange-700: #935f06;
  --l-orange-800: #5c3b04;
  --l-orange-900: #251802;
  --l-orange-950: #0a0600;
  --l-red-50: #fef6f6;
  --l-red-100: #fde3e3;
  --l-red-200: #f9bdbd;
  --l-red-300: #f58989;
  --l-red-400: #f05454;
  --l-red-500: #ec1f1f;
  --l-red-600: #c21111;
  --l-red-700: #8d0c0c;
  --l-red-800: #580808;
  --l-red-900: #240303;
  --l-red-950: #090101;
  --l-blue-50: #f5fcfe;
  --l-blue-100: #e2f5fd;
  --l-blue-200: #bce7fb;
  --l-blue-300: #86d4f8;
  --l-blue-400: #50c1f4;
  --l-blue-500: #1aaef1;
  --l-blue-600: #0c8cc6;
  --l-blue-700: #096690;
  --l-blue-800: #05405a;
  --l-blue-900: #021a25;
  --l-blue-950: #01070a;
  --l-neutral-white-0: #ffffff00;
  --l-neutral-white-5: #ffffff0d;
  --l-neutral-white-10: #ffffff1a;
  --l-neutral-white-15: #ffffff26;
  --l-neutral-white-20: #ffffff33;
  --l-neutral-white-25: #ffffff40;
  --l-neutral-white-30: #ffffff4d;
  --l-neutral-white-35: #ffffff59;
  --l-neutral-white-40: #ffffff66;
  --l-neutral-white-45: #ffffff73;
  --l-neutral-white-50: #ffffff80;
  --l-neutral-white-55: #ffffff8c;
  --l-neutral-white-60: #ffffff99;
  --l-neutral-white-65: #ffffffa6;
  --l-neutral-white-70: #ffffffb2;
  --l-neutral-white-75: #ffffffbf;
  --l-neutral-white-80: #ffffffcc;
  --l-neutral-white-85: #ffffffd9;
  --l-neutral-white-90: #ffffffe5;
  --l-neutral-white-95: #fffffff2;
  --l-neutral-white-100: #ffffffff;
  --l-neutral-black-0: #00000000;
  --l-neutral-black-5: #0000000d;
  --l-neutral-black-10: #0000001a;
  --l-neutral-black-15: #00000026;
  --l-neutral-black-20: #00000033;
  --l-neutral-black-25: #00000040;
  --l-neutral-black-30: #0000004d;
  --l-neutral-black-35: #00000059;
  --l-neutral-black-40: #00000066;
  --l-neutral-black-45: #00000073;
  --l-neutral-black-50: #00000080;
  --l-neutral-black-55: #0000008c;
  --l-neutral-black-60: #00000099;
  --l-neutral-black-65: #000000a6;
  --l-neutral-black-70: #000000b2;
  --l-neutral-black-75: #000000bf;
  --l-neutral-black-80: #000000cc;
  --l-neutral-black-85: #000000d9;
  --l-neutral-black-90: #000000e5;
  --l-neutral-black-95: #000000f2;
  --l-neutral-black-100: #000000ff;
  --d-primary-50: #080c35;
  --d-primary-100: #191F57;
  --d-primary-200: #222967;
  --d-primary-300: #2C3477;
  --d-primary-400: #363E81;
  --d-primary-500: #474F94;
  --d-primary-600: #646cb2;
  --d-primary-700: #7880c2;
  --d-primary-800: #848ccc;
  --d-primary-900: #a7add9;
  --d-primary-950: #b8bde5;
  --d-neutral-50: #191e22;
  --d-neutral-100: #20242c;
  --d-neutral-200: #2e353f;
  --d-neutral-300: #414c59;
  --d-neutral-400: #546173;
  --d-neutral-500: #68778e;
  --d-neutral-600: #818ea2;
  --d-neutral-700: #9ba6b5;
  --d-neutral-800: #b6bdc9;
  --d-neutral-900: #d0d5dc;
  --d-neutral-950: #dde1e6;
  --d-green-50: #152d0f;
  --d-green-100: #1a3a11;
  --d-green-200: #245418;
  --d-green-300: #337922;
  --d-green-400: #429c2b;
  --d-green-500: #51c036;
  --d-green-600: #6ccf54;
  --d-green-700: #8bd978;
  --d-green-800: #a9e39b;
  --d-green-900: #c8edbf;
  --d-green-950: #d8f0d2;
  --d-orange-50: #352206;
  --d-orange-100: #422c0a;
  --d-orange-200: #5e410e;
  --d-orange-300: #855b14;
  --d-orange-400: #ad761a;
  --d-orange-500: #d59221;
  --d-orange-600: #e2a641;
  --d-orange-700: #e8b968;
  --d-orange-800: #eecb90;
  --d-orange-900: #f3ddb8;
  --d-orange-950: #f9e6ca;
  --d-red-50: #300b0b;
  --d-red-100: #400c0c;
  --d-red-200: #5b1212;
  --d-red-300: #801919;
  --d-red-400: #a72121;
  --d-red-500: #ce2828;
  --d-red-600: #db4747;
  --d-red-700: #e36e6e;
  --d-red-800: #ea9494;
  --d-red-900: #f2baba;
  --d-red-950: #f4cfcf;
  --d-blue-50: #0a2931;
  --d-blue-100: #0b3140;
  --d-blue-200: #10445c;
  --d-blue-300: #166183;
  --d-blue-400: #1d7faa;
  --d-blue-500: #249bd2;
  --d-blue-600: #44afdf;
  --d-blue-700: #6bbfe5;
  --d-blue-800: #92d1ed;
  --d-blue-900: #b8e1f3;
  --d-blue-950: #cee8f5;
  --d-neutral-white-0: #1a1a1a00;
  --d-neutral-white-5: #1a1a1a0d;
  --d-neutral-white-10: #1a1a1a1a;
  --d-neutral-white-15: #1a1a1a26;
  --d-neutral-white-20: #1a1a1a33;
  --d-neutral-white-25: #1a1a1a40;
  --d-neutral-white-30: #1a1a1a4d;
  --d-neutral-white-35: #1a1a1a59;
  --d-neutral-white-40: #1a1a1a66;
  --d-neutral-white-45: #1a1a1a73;
  --d-neutral-white-50: #1a1a1a80;
  --d-neutral-white-55: #1a1a1a8c;
  --d-neutral-white-60: #1a1a1a99;
  --d-neutral-white-65: #1a1a1aa6;
  --d-neutral-white-70: #1a1a1ab2;
  --d-neutral-white-75: #1a1a1abf;
  --d-neutral-white-80: #1a1a1acc;
  --d-neutral-white-85: #1a1a1ad9;
  --d-neutral-white-90: #1a1a1ae5;
  --d-neutral-white-95: #1a1a1af2;
  --d-neutral-white-100: #1a1a1aff;
  --d-neutral-black-0: #e5e5e500;
  --d-neutral-black-5: #e5e5e50d;
  --d-neutral-black-10: #e5e5e51a;
  --d-neutral-black-15: #e5e5e526;
  --d-neutral-black-20: #e5e5e533;
  --d-neutral-black-25: #e5e5e540;
  --d-neutral-black-30: #e5e5e54d;
  --d-neutral-black-35: #e5e5e559;
  --d-neutral-black-40: #e5e5e566;
  --d-neutral-black-45: #e5e5e573;
  --d-neutral-black-50: #e5e5e580;
  --d-neutral-black-55: #e5e5e58c;
  --d-neutral-black-60: #e5e5e599;
  --d-neutral-black-65: #e5e5e5a6;
  --d-neutral-black-70: #e5e5e5b2;
  --d-neutral-black-75: #e5e5e5bf;
  --d-neutral-black-80: #e5e5e5cc;
  --d-neutral-black-85: #e5e5e5d9;
  --d-neutral-black-90: #e5e5e5e5;
  --d-neutral-black-95: #e5e5e5f2;
  --d-neutral-black-100: #e5e5e5ff;
}

:root {
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-9999: 9999px;
}

:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;
  --space-18: 72px;
  --space-19: 76px;
  --space-20: 80px;
  --space-21: 84px;
  --space-22: 88px;
  --space-23: 92px;
  --space-24: 96px;
}

:root {
  /* --- HEADINGS (Escalado fluido agresivo) --- */
  /* 72px -> 36px en móvil */
  --heading-l-regular: clamp(2.25rem, 6vw + 1rem, 4.5rem);
  --heading-l-medium: clamp(2.25rem, 6vw + 1rem, 4.5rem);
  --heading-l-bold: clamp(2.25rem, 6vw + 1rem, 4.5rem);
  /* 64px -> 32px en móvil */
  --heading-l-m-regular: clamp(2rem, 5vw + 1rem, 4rem);
  --heading-l-m-medium: clamp(2rem, 5vw + 1rem, 4rem);
  --heading-l-m-bold: clamp(2rem, 5vw + 1rem, 4rem);
  /* 56px -> 28px en móvil */
  --heading-s-regular: clamp(1.75rem, 4.5vw + 1rem, 3.5rem);
  --heading-s-medium: clamp(1.75rem, 4.5vw + 1rem, 3.5rem);
  --heading-s-bold: clamp(1.75rem, 4.5vw + 1rem, 3.5rem);
  /* --- TITLES (Escalado fluido moderado) --- */
  /* 56px -> 28px */
  --title-xl-medium: clamp(1.75rem, 4.5vw + 1rem, 3.5rem);
  --title-xl-bold: clamp(1.75rem, 4.5vw + 1rem, 3.5rem);
  /* 48px -> 24px */
  --title-l-medium: clamp(1.5rem, 4vw + 1rem, 3rem);
  --title-l-bold: clamp(1.5rem, 4vw + 1rem, 3rem);
  /* 40px -> 22px */
  --title-m-medium: clamp(1.375rem, 3vw + 1rem, 2.5rem);
  --title-m-bold: clamp(1.375rem, 3vw + 1rem, 2.5rem);
  /* 32px -> 20px */
  --title-s-medium: clamp(1.25rem, 2vw + 1rem, 2rem);
  --title-s-bold: clamp(1.25rem, 2vw + 1rem, 2rem);
  /* 24px -> 18px */
  --title-xs-medium: clamp(1.125rem, 1.5vw + 1rem, 1.5rem);
  --title-xs-bold: clamp(1.125rem, 1.5vw + 1rem, 1.5rem);
  /* 20px fijo */
  --title-xxs-medium: 1.25rem;
  --title-xxs-bold: 1.25rem;
  /* --- BODY (Tamaños fijos para legibilidad óptima) --- */
  --body-xl-regular: 1.125rem; /* 18px */
  --body-xl-medium: 1.125rem;
  --body-l-regular: 1rem; /* 16px */
  --body-l-medium: 1rem;
  --body-m-regular: 0.875rem; /* 14px */
  --body-m-medium: 0.875rem;
  --body-s-regular: 0.75rem; /* 12px */
  --body-s-medium: 0.75rem;
  /* --- LABELS (Tamaños fijos) --- */
  --label-l-regular: 1rem; /* 16px */
  --label-l-medium: 1rem;
  --label-l-bold: 1rem;
  --label-m-regular: 0.875rem; /* 14px */
  --label-m-medium: 0.875rem;
  --label-m-bold: 0.875rem;
  --label-s-regular: 0.75rem; /* 12px */
  --label-s-medium: 0.75rem;
  --label-s-bold: 0.75rem;
  /* --- CAPTIONS --- */
  --caption-m-medium: 0.625rem; /* 10px */
  --caption-s-medium: 0.5625rem; /* 9px */
}

:root {
  --l-primary-50: #f5f7ff;
  --l-primary-100: #e0e4fe;
  --l-primary-200: #c5cdfc;
  --l-primary-300: #b6c0f9;
  --l-primary-400: #91a0f5;
  --l-primary-500: #6679f0;
  --l-primary-600: #5363db;
  --l-primary-700: #3f4aa9;
  --l-primary-800: #2f377d;
  --l-primary-900: #1e234d;
  --l-primary-950: #12152e;
  --l-neutral-50: #f9fafb;
  --l-neutral-100: #eff1f5;
  --l-neutral-200: #d4dae2;
  --l-neutral-300: #b2bdcb;
  --l-neutral-400: #909fb4;
  --l-neutral-500: #6e819d;
  --l-neutral-600: #55657d;
  --l-neutral-700: #3e4a5b;
  --l-neutral-800: #272e39;
  --l-neutral-900: #101317;
  --l-neutral-950: #040506;
  --l-green-50: #f8fdf6;
  --l-green-100: #e9fae5;
  --l-green-200: #ccf4c2;
  --l-green-300: #a4ec91;
  --l-green-400: #7be461;
  --l-green-500: #52db30;
  --l-green-600: #3db31f;
  --l-green-700: #2c8217;
  --l-green-800: #1c520e;
  --l-green-900: #0b2106;
  --l-green-950: #030902;
  --l-orange-50: #fffbf5;
  --l-orange-100: #fef3e2;
  --l-orange-200: #fce4ba;
  --l-orange-300: #face84;
  --l-orange-400: #f8b84d;
  --l-orange-500: #f5a216;
  --l-orange-600: #ca8208;
  --l-orange-700: #935f06;
  --l-orange-800: #5c3b04;
  --l-orange-900: #251802;
  --l-orange-950: #0a0600;
  --l-red-50: #fef6f6;
  --l-red-100: #fde3e3;
  --l-red-200: #f9bdbd;
  --l-red-300: #f58989;
  --l-red-400: #f05454;
  --l-red-500: #ec1f1f;
  --l-red-600: #c21111;
  --l-red-700: #8d0c0c;
  --l-red-800: #580808;
  --l-red-900: #240303;
  --l-red-950: #090101;
  --l-blue-50: #f5fcfe;
  --l-blue-100: #e2f5fd;
  --l-blue-200: #bce7fb;
  --l-blue-300: #86d4f8;
  --l-blue-400: #50c1f4;
  --l-blue-500: #1aaef1;
  --l-blue-600: #0c8cc6;
  --l-blue-700: #096690;
  --l-blue-800: #05405a;
  --l-blue-900: #021a25;
  --l-blue-950: #01070a;
  --l-neutral-white-0: #ffffff00;
  --l-neutral-white-5: #ffffff0d;
  --l-neutral-white-10: #ffffff1a;
  --l-neutral-white-15: #ffffff26;
  --l-neutral-white-20: #ffffff33;
  --l-neutral-white-25: #ffffff40;
  --l-neutral-white-30: #ffffff4d;
  --l-neutral-white-35: #ffffff59;
  --l-neutral-white-40: #ffffff66;
  --l-neutral-white-45: #ffffff73;
  --l-neutral-white-50: #ffffff80;
  --l-neutral-white-55: #ffffff8c;
  --l-neutral-white-60: #ffffff99;
  --l-neutral-white-65: #ffffffa6;
  --l-neutral-white-70: #ffffffb2;
  --l-neutral-white-75: #ffffffbf;
  --l-neutral-white-80: #ffffffcc;
  --l-neutral-white-85: #ffffffd9;
  --l-neutral-white-90: #ffffffe5;
  --l-neutral-white-95: #fffffff2;
  --l-neutral-white-100: #ffffffff;
  --l-neutral-black-0: #00000000;
  --l-neutral-black-5: #0000000d;
  --l-neutral-black-10: #0000001a;
  --l-neutral-black-15: #00000026;
  --l-neutral-black-20: #00000033;
  --l-neutral-black-25: #00000040;
  --l-neutral-black-30: #0000004d;
  --l-neutral-black-35: #00000059;
  --l-neutral-black-40: #00000066;
  --l-neutral-black-45: #00000073;
  --l-neutral-black-50: #00000080;
  --l-neutral-black-55: #0000008c;
  --l-neutral-black-60: #00000099;
  --l-neutral-black-65: #000000a6;
  --l-neutral-black-70: #000000b2;
  --l-neutral-black-75: #000000bf;
  --l-neutral-black-80: #000000cc;
  --l-neutral-black-85: #000000d9;
  --l-neutral-black-90: #000000e5;
  --l-neutral-black-95: #000000f2;
  --l-neutral-black-100: #000000ff;
  --d-primary-50: #080c35;
  --d-primary-100: #191F57;
  --d-primary-200: #222967;
  --d-primary-300: #2C3477;
  --d-primary-400: #363E81;
  --d-primary-500: #474F94;
  --d-primary-600: #646cb2;
  --d-primary-700: #7880c2;
  --d-primary-800: #848ccc;
  --d-primary-900: #a7add9;
  --d-primary-950: #b8bde5;
  --d-neutral-50: #191e22;
  --d-neutral-100: #20242c;
  --d-neutral-200: #2e353f;
  --d-neutral-300: #414c59;
  --d-neutral-400: #546173;
  --d-neutral-500: #68778e;
  --d-neutral-600: #818ea2;
  --d-neutral-700: #9ba6b5;
  --d-neutral-800: #b6bdc9;
  --d-neutral-900: #d0d5dc;
  --d-neutral-950: #dde1e6;
  --d-green-50: #152d0f;
  --d-green-100: #1a3a11;
  --d-green-200: #245418;
  --d-green-300: #337922;
  --d-green-400: #429c2b;
  --d-green-500: #51c036;
  --d-green-600: #6ccf54;
  --d-green-700: #8bd978;
  --d-green-800: #a9e39b;
  --d-green-900: #c8edbf;
  --d-green-950: #d8f0d2;
  --d-orange-50: #352206;
  --d-orange-100: #422c0a;
  --d-orange-200: #5e410e;
  --d-orange-300: #855b14;
  --d-orange-400: #ad761a;
  --d-orange-500: #d59221;
  --d-orange-600: #e2a641;
  --d-orange-700: #e8b968;
  --d-orange-800: #eecb90;
  --d-orange-900: #f3ddb8;
  --d-orange-950: #f9e6ca;
  --d-red-50: #300b0b;
  --d-red-100: #400c0c;
  --d-red-200: #5b1212;
  --d-red-300: #801919;
  --d-red-400: #a72121;
  --d-red-500: #ce2828;
  --d-red-600: #db4747;
  --d-red-700: #e36e6e;
  --d-red-800: #ea9494;
  --d-red-900: #f2baba;
  --d-red-950: #f4cfcf;
  --d-blue-50: #0a2931;
  --d-blue-100: #0b3140;
  --d-blue-200: #10445c;
  --d-blue-300: #166183;
  --d-blue-400: #1d7faa;
  --d-blue-500: #249bd2;
  --d-blue-600: #44afdf;
  --d-blue-700: #6bbfe5;
  --d-blue-800: #92d1ed;
  --d-blue-900: #b8e1f3;
  --d-blue-950: #cee8f5;
  --d-neutral-white-0: #1a1a1a00;
  --d-neutral-white-5: #1a1a1a0d;
  --d-neutral-white-10: #1a1a1a1a;
  --d-neutral-white-15: #1a1a1a26;
  --d-neutral-white-20: #1a1a1a33;
  --d-neutral-white-25: #1a1a1a40;
  --d-neutral-white-30: #1a1a1a4d;
  --d-neutral-white-35: #1a1a1a59;
  --d-neutral-white-40: #1a1a1a66;
  --d-neutral-white-45: #1a1a1a73;
  --d-neutral-white-50: #1a1a1a80;
  --d-neutral-white-55: #1a1a1a8c;
  --d-neutral-white-60: #1a1a1a99;
  --d-neutral-white-65: #1a1a1aa6;
  --d-neutral-white-70: #1a1a1ab2;
  --d-neutral-white-75: #1a1a1abf;
  --d-neutral-white-80: #1a1a1acc;
  --d-neutral-white-85: #1a1a1ad9;
  --d-neutral-white-90: #1a1a1ae5;
  --d-neutral-white-95: #1a1a1af2;
  --d-neutral-white-100: #1a1a1aff;
  --d-neutral-black-0: #e5e5e500;
  --d-neutral-black-5: #e5e5e50d;
  --d-neutral-black-10: #e5e5e51a;
  --d-neutral-black-15: #e5e5e526;
  --d-neutral-black-20: #e5e5e533;
  --d-neutral-black-25: #e5e5e540;
  --d-neutral-black-30: #e5e5e54d;
  --d-neutral-black-35: #e5e5e559;
  --d-neutral-black-40: #e5e5e566;
  --d-neutral-black-45: #e5e5e573;
  --d-neutral-black-50: #e5e5e580;
  --d-neutral-black-55: #e5e5e58c;
  --d-neutral-black-60: #e5e5e599;
  --d-neutral-black-65: #e5e5e5a6;
  --d-neutral-black-70: #e5e5e5b2;
  --d-neutral-black-75: #e5e5e5bf;
  --d-neutral-black-80: #e5e5e5cc;
  --d-neutral-black-85: #e5e5e5d9;
  --d-neutral-black-90: #e5e5e5e5;
  --d-neutral-black-95: #e5e5e5f2;
  --d-neutral-black-100: #e5e5e5ff;
}

:root {
  --surface-primary-subtle: var(--l-primary-50);
  --surface-primary-medium: var(--l-primary-200);
  --surface-primary-strong: var(--l-primary-500);
  --surface-default-base: var(--l-neutral-100);
  --surface-default-level-1: var(--l-neutral-white-100);
  --surface-default-level-2: var(--l-neutral-50);
  --surface-default-level-3: var(--l-neutral-100);
  --bg-neutral-subtle-default: var(--l-neutral-black-5);
  --bg-neutral-subtle-hover: var(--l-neutral-black-10);
  --bg-neutral-subtle-pressed: var(--l-neutral-black-15);
  --bg-neutral-subtle-focused: var(--l-neutral-black-5);
  --bg-neutral-subtle-active: var(--l-neutral-black-20);
  --bg-neutral-medium-default: var(--l-neutral-black-10);
  --bg-neutral-medium-hover: var(--l-neutral-black-15);
  --bg-neutral-medium-pressed: var(--l-neutral-black-20);
  --bg-neutral-medium-focused: var(--l-neutral-black-10);
  --bg-neutral-medium-active: var(--l-neutral-black-25);
  --bg-neutral-strong-default: var(--l-neutral-black-30);
  --bg-neutral-strong-hover: var(--l-neutral-black-35);
  --bg-neutral-strong-pressed: var(--l-neutral-black-40);
  --bg-neutral-strong-focused: var(--l-neutral-black-30);
  --bg-neutral-strong-active: var(--l-neutral-black-45);
  --bg-primary-subtle-default: var(--l-primary-50);
  --bg-primary-subtle-hover: var(--l-primary-100);
  --bg-primary-subtle-pressed: var(--l-primary-200);
  --bg-primary-subtle-focused: var(--l-primary-50);
  --bg-primary-subtle-active: var(--l-primary-300);
  --bg-primary-medium-default: var(--l-primary-300);
  --bg-primary-medium-hover: var(--l-primary-400);
  --bg-primary-medium-pressed: var(--l-primary-500);
  --bg-primary-medium-focused: var(--l-primary-300);
  --bg-primary-medium-active: var(--l-primary-600);
  --bg-primary-strong-default: var(--l-primary-600);
  --bg-primary-strong-hover: var(--l-primary-700);
  --bg-primary-strong-pressed: var(--l-primary-800);
  --bg-primary-strong-focused: var(--l-primary-600);
  --bg-primary-strong-active: var(--l-primary-900);
  --bg-success-subtle-default: var(--l-green-50);
  --bg-success-subtle-hover: var(--l-green-100);
  --bg-success-subtle-pressed: var(--l-green-200);
  --bg-success-subtle-focused: var(--l-green-50);
  --bg-success-subtle-active: var(--l-green-300);
  --bg-success-medium-default: var(--l-green-300);
  --bg-success-medium-hover: var(--l-green-400);
  --bg-success-medium-pressed: var(--l-green-500);
  --bg-success-medium-focused: var(--l-green-300);
  --bg-success-medium-active: var(--l-green-600);
  --bg-success-strong-default: var(--l-green-600);
  --bg-success-strong-hover: var(--l-green-700);
  --bg-success-strong-pressed: var(--l-green-800);
  --bg-success-strong-focused: var(--l-green-600);
  --bg-success-strong-active: var(--l-green-900);
  --bg-warning-subtle-default: var(--l-orange-50);
  --bg-warning-subtle-hover: var(--l-orange-100);
  --bg-warning-subtle-pressed: var(--l-orange-200);
  --bg-warning-subtle-focused: var(--l-orange-50);
  --bg-warning-subtle-active: var(--l-orange-300);
  --bg-warning-medium-default: var(--l-orange-300);
  --bg-warning-medium-hover: var(--l-orange-400);
  --bg-warning-medium-pressed: var(--l-orange-500);
  --bg-warning-medium-focused: var(--l-orange-300);
  --bg-warning-medium-active: var(--l-orange-600);
  --bg-warning-strong-default: var(--l-orange-600);
  --bg-warning-strong-hover: var(--l-orange-700);
  --bg-warning-strong-pressed: var(--l-orange-800);
  --bg-warning-strong-focused: var(--l-orange-600);
  --bg-warning-strong-active: var(--l-orange-900);
  --bg-error-subtle-default: var(--l-red-50);
  --bg-error-subtle-hover: var(--l-red-100);
  --bg-error-subtle-pressed: var(--l-red-200);
  --bg-error-subtle-focused: var(--l-red-50);
  --bg-error-subtle-active: var(--l-red-300);
  --bg-error-medium-default: var(--l-red-300);
  --bg-error-medium-hover: var(--l-red-400);
  --bg-error-medium-pressed: var(--l-red-500);
  --bg-error-medium-focused: var(--l-red-300);
  --bg-error-medium-active: var(--l-red-600);
  --bg-error-strong-default: var(--l-red-600);
  --bg-error-strong-hover: var(--l-red-700);
  --bg-error-strong-pressed: var(--l-red-800);
  --bg-error-strong-focused: var(--l-red-600);
  --bg-error-strong-active: var(--l-red-900);
  --bg-info-subtle-default: var(--l-blue-50);
  --bg-info-subtle-hover: var(--l-blue-100);
  --bg-info-subtle-pressed: var(--l-blue-200);
  --bg-info-subtle-focused: var(--l-blue-50);
  --bg-info-subtle-active: var(--l-blue-300);
  --bg-info-medium-default: var(--l-blue-300);
  --bg-info-medium-hover: var(--l-blue-400);
  --bg-info-medium-pressed: var(--l-blue-500);
  --bg-info-medium-focused: var(--l-blue-300);
  --bg-info-medium-active: var(--l-blue-600);
  --bg-info-strong-default: var(--l-blue-600);
  --bg-info-strong-hover: var(--l-blue-700);
  --bg-info-strong-pressed: var(--l-blue-800);
  --bg-info-strong-focused: var(--l-blue-600);
  --bg-info-strong-active: var(--l-blue-900);
  --content-default-primary: var(--l-neutral-black-100);
  --content-default-subtle: var(--l-neutral-black-80);
  --content-default-muted: var(--l-neutral-black-60);
  --content-default-faint: var(--l-neutral-black-40);
  --content-default-disabled: var(--l-neutral-black-20);
  --content-default-inverse-primary: var(--l-neutral-white-100);
  --content-default-inverse-subtle: var(--l-neutral-white-80);
  --content-default-inverse-muted: var(--l-neutral-white-60);
  --content-default-inverse-faint: var(--l-neutral-white-40);
  --content-default-inverse-disabled: var(--l-neutral-white-20);
  --content-primary-default: var(--l-primary-600);
  --content-primary-on-subtle: var(--l-primary-800);
  --content-primary-on-medium: var(--l-primary-950);
  --content-primary-on-strong: var(--l-neutral-white-100);
  --content-signal-success-default: var(--l-green-600);
  --content-signal-success-on-subtle: var(--l-green-800);
  --content-signal-success-on-medium: var(--l-green-950);
  --content-signal-success-on-strong: var(--l-neutral-white-100);
  --content-signal-warning-default: var(--l-orange-600);
  --content-signal-warning-on-subtle: var(--l-orange-800);
  --content-signal-warning-on-medium: var(--l-orange-950);
  --content-signal-warning-on-strong: var(--l-neutral-white-100);
  --content-signal-error-default: var(--l-red-600);
  --content-signal-error-on-subtle: var(--l-red-800);
  --content-signal-error-on-medium: var(--l-red-950);
  --content-signal-error-on-strong: var(--l-neutral-white-100);
  --content-signal-info-default: var(--l-blue-600);
  --content-signal-info-on-subtle: var(--l-blue-800);
  --content-signal-info-on-medium: var(--l-blue-950);
  --content-signal-info-on-strong: var(--l-neutral-white-100);
  --border-default-weak: var(--l-neutral-black-10);
  --border-default-medium: var(--l-neutral-black-20);
  --border-default-strong: var(--l-neutral-black-30);
  --border-inverse-weak: var(--l-neutral-white-10);
  --border-inverse-medium: var(--l-neutral-white-20);
  --border-inverse-strong: var(--l-neutral-white-30);
  --border-primary-default: var(--l-primary-600);
  --border-primary-on-subtle: var(--l-primary-800);
  --border-primary-on-medium: var(--l-primary-950);
  --border-primary-on-strong: var(--l-neutral-white-100);
  --border-signal-success-default: var(--l-green-600);
  --border-signal-success-on-subtle: var(--l-green-800);
  --border-signal-success-on-medium: var(--l-green-950);
  --border-signal-success-on-strong: var(--l-neutral-white-100);
  --border-signal-warning-default: var(--l-orange-600);
  --border-signal-warning-on-subtle: var(--l-orange-800);
  --border-signal-warning-on-medium: var(--l-orange-950);
  --border-signal-warning-on-strong: var(--l-neutral-white-100);
  --border-signal-error-default: var(--l-red-600);
  --border-signal-error-on-subtle: var(--l-red-800);
  --border-signal-error-on-medium: var(--l-red-950);
  --border-signal-error-on-strong: var(--l-neutral-white-100);
  --border-signal-info-default: var(--l-blue-600);
  --border-signal-info-on-subtle: var(--l-blue-800);
  --border-signal-info-on-medium: var(--l-blue-950);
  --border-signal-info-on-strong: var(--l-neutral-white-100);
  --overlay-weak: var(--l-neutral-black-10);
  --overlay-medium: var(--l-neutral-black-40);
  --overlay-strong: var(--l-neutral-black-80);
  --shadow-weak: var(--l-neutral-black-10);
  --shadow-medium: var(--l-neutral-black-20);
  --shadow-strong: var(--l-neutral-black-35);
  --data-default-positive: var(--l-green-600);
  --data-default-negative: var(--l-red-600);
  --data-default-neutral: var(--l-neutral-black-600);
  --data-primary-subtle: var(--l-primary-300);
  --data-primary-medium: var(--l-primary-500);
  --data-primary-strong: var(--l-primary-700);
  --data-signal-success-subtle: var(--l-green-300);
  --data-signal-success-medium: var(--l-green-500);
  --data-signal-success-strong: var(--l-green-700);
  --data-signal-warning-subtle: var(--l-orange-300);
  --data-signal-warning-medium: var(--l-orange-500);
  --data-signal-warning-strong: var(--l-orange-700);
  --data-signal-error-subtle: var(--l-red-300);
  --data-signal-error-medium: var(--l-red-500);
  --data-signal-error-strong: var(--l-red-700);
  --data-signal-info-subtle: var(--l-blue-300);
  --data-signal-info-medium: var(--l-blue-500);
  --data-signal-info-strong: var(--l-blue-700);
}

[data-theme=dark] {
  --surface-primary-subtle: var(--d-primary-50);
  --surface-primary-medium: var(--d-primary-200);
  --surface-primary-strong: var(--d-primary-500);
  --surface-default-base: var(--d-neutral-100);
  --surface-default-level-1: var(--d-neutral-white-100);
  --surface-default-level-2: var(--d-neutral-50);
  --surface-default-level-3: var(--d-neutral-100);
  --bg-neutral-subtle-default: var(--d-neutral-black-5);
  --bg-neutral-subtle-hover: var(--d-neutral-black-10);
  --bg-neutral-subtle-pressed: var(--d-neutral-black-15);
  --bg-neutral-subtle-focused: var(--d-neutral-black-5);
  --bg-neutral-subtle-active: var(--d-neutral-black-20);
  --bg-neutral-medium-default: var(--d-neutral-black-10);
  --bg-neutral-medium-hover: var(--d-neutral-black-15);
  --bg-neutral-medium-pressed: var(--d-neutral-black-20);
  --bg-neutral-medium-focused: var(--d-neutral-black-10);
  --bg-neutral-medium-active: var(--d-neutral-black-25);
  --bg-neutral-strong-default: var(--d-neutral-black-30);
  --bg-neutral-strong-hover: var(--d-neutral-black-35);
  --bg-neutral-strong-pressed: var(--d-neutral-black-40);
  --bg-neutral-strong-focused: var(--d-neutral-black-30);
  --bg-neutral-strong-active: var(--d-neutral-black-45);
  --bg-primary-subtle-default: var(--d-primary-50);
  --bg-primary-subtle-hover: var(--d-primary-100);
  --bg-primary-subtle-pressed: var(--d-primary-200);
  --bg-primary-subtle-focused: var(--d-primary-50);
  --bg-primary-subtle-active: var(--d-primary-300);
  --bg-primary-medium-default: var(--d-primary-300);
  --bg-primary-medium-hover: var(--d-primary-400);
  --bg-primary-medium-pressed: var(--d-primary-500);
  --bg-primary-medium-focused: var(--d-primary-300);
  --bg-primary-medium-active: var(--d-primary-600);
  --bg-primary-strong-default: var(--d-primary-600);
  --bg-primary-strong-hover: var(--d-primary-700);
  --bg-primary-strong-pressed: var(--d-primary-800);
  --bg-primary-strong-focused: var(--d-primary-600);
  --bg-primary-strong-active: var(--d-primary-900);
  --bg-success-subtle-default: var(--d-green-50);
  --bg-success-subtle-hover: var(--d-green-100);
  --bg-success-subtle-pressed: var(--d-green-200);
  --bg-success-subtle-focused: var(--d-green-50);
  --bg-success-subtle-active: var(--d-green-300);
  --bg-success-medium-default: var(--d-green-300);
  --bg-success-medium-hover: var(--d-green-400);
  --bg-success-medium-pressed: var(--d-green-500);
  --bg-success-medium-focused: var(--d-green-300);
  --bg-success-medium-active: var(--d-green-600);
  --bg-success-strong-default: var(--d-green-600);
  --bg-success-strong-hover: var(--d-green-700);
  --bg-success-strong-pressed: var(--d-green-800);
  --bg-success-strong-focused: var(--d-green-600);
  --bg-success-strong-active: var(--d-green-900);
  --bg-warning-subtle-default: var(--d-orange-50);
  --bg-warning-subtle-hover: var(--d-orange-100);
  --bg-warning-subtle-pressed: var(--d-orange-200);
  --bg-warning-subtle-focused: var(--d-orange-50);
  --bg-warning-subtle-active: var(--d-orange-300);
  --bg-warning-medium-default: var(--d-orange-300);
  --bg-warning-medium-hover: var(--d-orange-400);
  --bg-warning-medium-pressed: var(--d-orange-500);
  --bg-warning-medium-focused: var(--d-orange-300);
  --bg-warning-medium-active: var(--d-orange-600);
  --bg-warning-strong-default: var(--d-orange-600);
  --bg-warning-strong-hover: var(--d-orange-700);
  --bg-warning-strong-pressed: var(--d-orange-800);
  --bg-warning-strong-focused: var(--d-orange-600);
  --bg-warning-strong-active: var(--d-orange-900);
  --bg-error-subtle-default: var(--d-red-50);
  --bg-error-subtle-hover: var(--d-red-100);
  --bg-error-subtle-pressed: var(--d-red-200);
  --bg-error-subtle-focused: var(--d-red-50);
  --bg-error-subtle-active: var(--d-red-300);
  --bg-error-medium-default: var(--d-red-300);
  --bg-error-medium-hover: var(--d-red-400);
  --bg-error-medium-pressed: var(--d-red-500);
  --bg-error-medium-focused: var(--d-red-300);
  --bg-error-medium-active: var(--d-red-600);
  --bg-error-strong-default: var(--d-red-600);
  --bg-error-strong-hover: var(--d-red-700);
  --bg-error-strong-pressed: var(--d-red-800);
  --bg-error-strong-focused: var(--d-red-600);
  --bg-error-strong-active: var(--d-red-900);
  --bg-info-subtle-default: var(--d-blue-50);
  --bg-info-subtle-hover: var(--d-blue-100);
  --bg-info-subtle-pressed: var(--d-blue-200);
  --bg-info-subtle-focused: var(--d-blue-50);
  --bg-info-subtle-active: var(--d-blue-300);
  --bg-info-medium-default: var(--d-blue-300);
  --bg-info-medium-hover: var(--d-blue-400);
  --bg-info-medium-pressed: var(--d-blue-500);
  --bg-info-medium-focused: var(--d-blue-300);
  --bg-info-medium-active: var(--d-blue-600);
  --bg-info-strong-default: var(--d-blue-600);
  --bg-info-strong-hover: var(--d-blue-700);
  --bg-info-strong-pressed: var(--d-blue-800);
  --bg-info-strong-focused: var(--d-blue-600);
  --bg-info-strong-active: var(--d-blue-900);
  --calendar-icon-filter: invert(0) brightness(0.7);
  --content-default-primary: var(--d-neutral-black-100);
  --content-default-subtle: var(--d-neutral-black-80);
  --content-default-muted: var(--d-neutral-black-60);
  --content-default-faint: var(--d-neutral-black-40);
  --content-default-disabled: var(--d-neutral-black-20);
  --content-default-inverse-primary: var(--d-neutral-white-100);
  --content-default-inverse-subtle: var(--d-neutral-white-80);
  --content-default-inverse-muted: var(--d-neutral-white-60);
  --content-default-inverse-faint: var(--d-neutral-white-40);
  --content-default-inverse-disabled: var(--d-neutral-white-20);
  --content-primary-default: var(--d-primary-600);
  --content-primary-on-subtle: var(--d-primary-800);
  --content-primary-on-medium: var(--d-primary-950);
  --content-primary-on-strong: var(--d-neutral-white-100);
  --content-signal-success-default: var(--d-green-600);
  --content-signal-success-on-subtle: var(--d-green-800);
  --content-signal-success-on-medium: var(--d-green-950);
  --content-signal-success-on-strong: var(--d-neutral-white-100);
  --content-signal-warning-default: var(--d-orange-600);
  --content-signal-warning-on-subtle: var(--d-orange-800);
  --content-signal-warning-on-medium: var(--d-orange-950);
  --content-signal-warning-on-strong: var(--d-neutral-white-100);
  --content-signal-error-default: var(--d-red-600);
  --content-signal-error-on-subtle: var(--d-red-800);
  --content-signal-error-on-medium: var(--d-red-950);
  --content-signal-error-on-strong: var(--d-neutral-white-100);
  --content-signal-info-default: var(--d-blue-600);
  --content-signal-info-on-subtle: var(--d-blue-800);
  --content-signal-info-on-medium: var(--d-blue-950);
  --content-signal-info-on-strong: var(--d-neutral-white-100);
  --border-default-weak: var(--d-neutral-black-10);
  --border-default-medium: var(--d-neutral-black-20);
  --border-default-strong: var(--d-neutral-black-30);
  --border-inverse-weak: var(--d-neutral-white-10);
  --border-inverse-medium: var(--d-neutral-white-20);
  --border-inverse-strong: var(--d-neutral-white-30);
  --border-primary-default: var(--d-primary-600);
  --border-primary-on-subtle: var(--d-primary-800);
  --border-primary-on-medium: var(--d-primary-950);
  --border-primary-on-strong: var(--d-neutral-white-100);
  --border-signal-success-default: var(--d-green-600);
  --border-signal-success-on-subtle: var(--d-green-800);
  --border-signal-success-on-medium: var(--d-green-950);
  --border-signal-success-on-strong: var(--d-neutral-white-100);
  --border-signal-warning-default: var(--d-orange-600);
  --border-signal-warning-on-subtle: var(--d-orange-800);
  --border-signal-warning-on-medium: var(--d-orange-950);
  --border-signal-warning-on-strong: var(--d-neutral-white-100);
  --border-signal-error-default: var(--d-red-600);
  --border-signal-error-on-subtle: var(--d-red-800);
  --border-signal-error-on-medium: var(--d-red-950);
  --border-signal-error-on-strong: var(--d-neutral-white-100);
  --border-signal-info-default: var(--d-blue-600);
  --border-signal-info-on-subtle: var(--d-blue-800);
  --border-signal-info-on-medium: var(--d-blue-950);
  --border-signal-info-on-strong: var(--d-neutral-white-100);
  --overlay-weak: var(--d-neutral-black-10);
  --overlay-medium: var(--d-neutral-black-40);
  --overlay-strong: var(--d-neutral-black-80);
  --shadow-weak: var(--d-neutral-black-10);
  --shadow-medium: var(--d-neutral-black-20);
  --shadow-strong: var(--d-neutral-black-35);
  --data-default-positive: var(--d-green-600);
  --data-default-negative: var(--d-red-600);
  --data-default-neutral: var(--d-neutral-black-600);
  --data-primary-subtle: var(--d-primary-300);
  --data-primary-medium: var(--d-primary-500);
  --data-primary-strong: var(--d-primary-700);
  --data-signal-success-subtle: var(--d-green-300);
  --data-signal-success-medium: var(--d-green-500);
  --data-signal-success-strong: var(--d-green-700);
  --data-signal-warning-subtle: var(--d-orange-300);
  --data-signal-warning-medium: var(--d-orange-500);
  --data-signal-warning-strong: var(--d-orange-700);
  --data-signal-error-subtle: var(--d-red-300);
  --data-signal-error-medium: var(--d-red-500);
  --data-signal-error-strong: var(--d-red-700);
  --data-signal-info-subtle: var(--d-blue-300);
  --data-signal-info-medium: var(--d-blue-500);
  --data-signal-info-strong: var(--d-blue-700);
}

.heading-l-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--heading-l-regular);
  line-height: 1.222222;
  font-weight: 400;
}

.heading-l-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--heading-l-medium);
  line-height: 1.222222;
  font-weight: 500;
}

.heading-l-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--heading-l-bold);
  line-height: 1.222222;
  font-weight: 700;
}

.heading-l-m-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--heading-l-m-regular);
  line-height: 1.1875;
  font-weight: 400;
}

.heading-l-m-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--heading-l-m-medium);
  line-height: 1.1875;
  font-weight: 500;
}

.heading-l-m-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--heading-l-m-bold);
  line-height: 1.1875;
  font-weight: 700;
}

.heading-s-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--heading-s-regular);
  line-height: 1.214286;
  font-weight: 400;
}

.heading-s-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--heading-s-medium);
  line-height: 1.214286;
  font-weight: 500;
}

.heading-s-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--heading-s-bold);
  line-height: 1.214286;
  font-weight: 700;
}

.title-xl-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-xl-medium);
  line-height: 1.214286;
  font-weight: 500;
}

.title-xl-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-xl-bold);
  line-height: 1.214286;
  font-weight: 700;
}

.title-l-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-l-medium);
  line-height: 1.208333;
  font-weight: 500;
}

.title-l-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-l-bold);
  line-height: 1.208333;
  font-weight: 700;
}

.title-m-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-m-medium);
  line-height: 1.2;
  font-weight: 500;
}

.title-m-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-m-bold);
  line-height: 1.2;
  font-weight: 700;
}

.title-s-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-s-medium);
  line-height: 1.1875;
  font-weight: 500;
}

.title-s-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-s-bold);
  line-height: 1.1875;
  font-weight: 700;
}

.title-xs-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-xs-medium);
  line-height: 1.25;
  font-weight: 500;
}

.title-xs-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-xs-bold);
  line-height: 1.25;
  font-weight: 700;
}

.title-xxs-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-xxs-medium);
  line-height: 1.2;
  font-weight: 500;
}

.title-xxs-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--title-xxs-bold);
  line-height: 1.2;
  font-weight: 700;
}

.body-xl-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--body-xl-regular);
  line-height: 1.4;
  font-weight: 400;
}

.body-xl-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--body-xl-medium);
  line-height: 1.4;
  font-weight: 500;
}

.body-l-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--body-l-regular);
  line-height: 1.4;
  font-weight: 400;
}

.body-l-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--body-l-medium);
  line-height: 1.4;
  font-weight: 500;
}

.body-m-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--body-m-regular);
  line-height: 1.428571;
  font-weight: 400;
}

.body-m-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--body-m-medium);
  line-height: 1.428571;
  font-weight: 500;
}

.body-s-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--body-s-regular);
  line-height: 1.333333;
  font-weight: 400;
}

.body-s-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--body-s-medium);
  line-height: 1.333333;
  font-weight: 500;
}

.label-l-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--label-l-regular);
  line-height: 1.375;
  font-weight: 400;
}

.label-l-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--label-l-medium);
  line-height: 1.375;
  font-weight: 500;
}

.label-l-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--label-l-bold);
  line-height: 1.375;
  font-weight: 700;
}

.label-m-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--label-m-regular);
  line-height: 1.428571;
  font-weight: 400;
}

.label-m-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--label-m-medium);
  line-height: 1.428571;
  font-weight: 500;
}

.label-m-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--label-m-bold);
  line-height: 1.428571;
  font-weight: 700;
}

.label-s-regular {
  font-family: "Figtree", sans-serif;
  font-size: var(--label-s-regular);
  line-height: 1.333333;
  font-weight: 400;
}

.label-s-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--label-s-medium);
  line-height: 1.333333;
  font-weight: 500;
}

.label-s-bold {
  font-family: "Figtree", sans-serif;
  font-size: var(--label-s-bold);
  line-height: 1.333333;
  font-weight: 700;
}

.caption-m-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--caption-m-medium);
  line-height: 1.2;
  font-weight: 500;
}

.caption-s-medium {
  font-family: "Figtree", sans-serif;
  font-size: var(--caption-s-medium);
  line-height: 1.111111;
  font-weight: 500;
}

.sidebar {
  width: 250px;
  height: 100vh;
  position: sticky;
  flex-shrink: 0;
  left: 0;
  top: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 16px;
  padding-right: 16px;
  background-color: var(--bg-primary-subtle-default);
  transition: width 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sidebar.collapsed {
  width: 80px;
}
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-text {
  opacity: 0;
  pointer-events: none;
}
.sidebar .logo-text,
.sidebar .nav-text {
  transition: opacity 0.3s ease;
}
.sidebar .main-content {
  margin-left: 260px;
  transition: margin-left 0.3s ease;
}
.sidebar .main-content.expanded-content {
  margin-left: 80px;
}
.sidebar .material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  color: var(--content-default-subtle);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.sidebar .sidebar-nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sidebar .sidebar-header {
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: 24px;
  gap: var(--space-2);
}
.sidebar .sidebar-header .logo-text {
  color: var(--content-default-primary);
}
.sidebar .sidebar-header .logo-icon {
  width: 40px;
  height: 40px;
  align-items: center;
  display: block;
  fill: var(--bg-neutral-strong-defaul);
}
.sidebar .nav-item {
  gap: var(--space-3);
  color: var(--content-default-subtle);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: var(--radius-8);
  white-space: nowrap;
  transition: all 0.3s ease-out;
}
.sidebar .nav-item:hover {
  background-color: var(--bg-primary-subtle-hover);
  transition: ease-in 0.3s;
  color: var(--content-default-subtle);
}
.sidebar .nav-item:active {
  background-color: var(--bg-primary-subtle-active);
}
.sidebar .nav-item:active .material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}
.sidebar .nav-item-selected {
  gap: var(--space-3);
  color: var(--content-default-subtle);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: var(--radius-8);
  white-space: nowrap;
  background-color: var(--bg-primary-subtle-pressed);
}
.sidebar .nav-item-selected .material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}
.sidebar #nav-user {
  position: relative;
}
.sidebar #nav-user::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 1px;
  display: block;
  background-color: var(--border-default-medium);
}

.topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--surface-default-level-2);
}
body.modal-open .topbar {
  padding-right: var(--bs-scrollbar-width);
}
.topbar .desktop-topbar-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
}
.topbar .mobile-header {
  display: none;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-6);
}
.topbar .mobile-header .logo-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.topbar .mobile-header .logo-container .logo-icon {
  width: 32px;
  height: 32px;
}
.topbar .mobile-header .logo-container .logo-text {
  color: var(--content-default-primary);
}
.topbar .left-container {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 150px;
}
.topbar .topbar-search {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 200px;
  max-width: 450px;
}
.topbar .topbar-search input {
  width: 100%;
  background-color: var(--surface-default-level-1);
  color: var(--content-default-primary);
  padding: 8px 16px;
  border-radius: var(--radius-12);
  border: 1px solid var(--border-default-weak);
  outline: none;
}
.topbar .topbar-search input::-moz-placeholder {
  color: var(--content-default-disabled);
  opacity: 1;
}
.topbar .topbar-search input::placeholder {
  color: var(--content-default-disabled);
  opacity: 1;
}
.topbar .topbar-search input:focus {
  border-color: var(--content-primary-default);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--content-primary-default) 20%, transparent);
}
.topbar .topbar-actions {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  min-width: 320px;
}
.topbar .icon-btn {
  color: var(--content-primary-default);
  background: var(--surface-default-level-2);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-out;
}
.topbar .icon-btn .material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}
.topbar .icon-btn:hover {
  color: var(--content-primary-on-subtle);
  cursor: pointer;
  transition: ease-in 0.4s;
}

@media (max-width: 900px) {
  .topbar .desktop-topbar-content {
    display: none;
  }
  .topbar .mobile-header {
    display: flex;
  }
  .icon-btn {
    color: var(--content-primary-default);
    background: var(--bg-primary-subtle-default);
    border-radius: var(--radius-24);
    padding: var(--space-3);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
  }
  .icon-btn .material-symbols-rounded {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  }
  .icon-btn:hover {
    color: var(--content-primary-on-subtle);
    cursor: pointer;
    transition: ease-in 0.4s;
  }
}
.offcanvas-end {
  background-color: var(--surface-default-level-2);
  width: 400px;
  max-width: 100%;
}
.offcanvas-end .offcanvas-header {
  display: flex;
  justify-content: space-between;
  background-color: none;
  padding: var(--space-4);
}
.offcanvas-end .offcanvas-body {
  padding: 0;
}
.offcanvas-end .offcanvas-title {
  margin-bottom: 0px;
  color: var(--content-primary-on-subtle);
}
.offcanvas-end .btn-close {
  color: var(--content-primary-default);
  background-image: none;
  font-size: 20px;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-24);
  transition: all 0.3s ease-out;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offcanvas-end .btn-close::before {
  content: "\e5cd";
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
  display: inline-block;
}
.offcanvas-end .mobile-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4);
  gap: var(--space-4);
}
.offcanvas-end .mobile-actions .icon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.offcanvas-end .mobile-actions .actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.offcanvas-end .mobile-actions .actions .btn-primary {
  justify-content: center;
}
.offcanvas-end .mobile-nav {
  padding: var(--space-4);
}
.offcanvas-end .navbar-nav {
  display: flex;
  flex-direction: column;
}
.offcanvas-end .nav-item {
  gap: var(--space-3);
  color: var(--content-default-subtle);
  text-decoration: none;
  display: flex;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-radius: var(--radius-8);
  transition: all 0.3s ease-out;
}
.offcanvas-end .nav-item:hover {
  background-color: var(--bg-primary-subtle-hover);
  transition: ease-in 0.3s;
  color: var(--content-default-subtle);
}
.offcanvas-end .nav-item:active {
  background-color: var(--bg-primary-subtle-active);
}
.offcanvas-end .nav-item:active .material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}
.offcanvas-end .nav-item .nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-home {
  background-color: var(--surface-default-level-3);
  display: flex;
  flex-direction: row;
}
.page-home .main-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-home h1 {
  color: var(--content-primary-on-subtle);
  margin-bottom: var(--space-6);
}
.page-home h3 {
  color: var(--content-default-subtle);
}
.page-home #main-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  width: 100%;
  max-width: 1300px;
}
.page-home #body-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
}
.page-home #first-container,
.page-home #second-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.page-home .section-header {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  margin-bottom: var(--space-6);
}
.page-home .section-header h2 {
  margin: 0;
  color: var(--content-primary-on-subtle);
}
.page-home .card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}
.page-home .task-card {
  display: flex;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
  background-color: var(--surface-default-level-1);
  border-radius: var(--radius-12);
  padding: var(--space-4);
  gap: var(--space-3);
}
.page-home .task-card .task-title {
  font-size: var(--title-m-medium);
  color: var(--content-primary-on-subtle);
  padding-right: var(--space-2);
}
.page-home .task-card .card-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.page-home .task-card .task-description {
  font-size: var(--label-l-medium);
  color: var(--content-default-on-subtle);
}
.page-home .task-card .card-text {
  color: var(--content-default-faint);
  margin-bottom: var(--space-3);
}
.page-home .task-card .btn-primary {
  justify-content: center;
}
.page-home .performance {
  padding: var(--space-4);
  background-color: var(--surface-default-level-1);
  border-radius: var(--radius-12);
}
.page-home .performance canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 320px;
}
.page-home .ending-proyects {
  padding: var(--space-4);
  background-color: var(--surface-default-level-1);
  border-radius: var(--radius-12);
}
.page-home .progress-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.page-home .title-proyect {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.page-home .label-date {
  color: var(--content-default-subtle);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}
.page-home #second-container .btn-secondary {
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-9999);
  aspect-ratio: 1/1;
  text-decoration: none;
}
.page-home .activity {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--surface-default-level-1);
  border-radius: var(--radius-12);
}
.page-home .activity .section-header {
  margin-bottom: 0;
}
.page-home .activity .activity-card {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
}
.page-home .activity .activity-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.page-home .activity-feed {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-6);
  color: var(--content-default-subtle);
}
.page-home .activity-feed .material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  color: var(--content-primary-default);
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}
.page-home time {
  color: var(--content-default-muted);
}

@media (max-width: 1100px) {
  .page-home #body-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .page-home #first-container {
    width: 100%;
  }
  .page-home #second-container {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .page-home .card-list {
    grid-template-columns: 1fr;
  }
}
.page-login {
  min-height: 100vh;
  width: 100%;
  background: radial-gradient(circle, #6679f0, #b6c0f9);
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-login #login-section {
  width: 40%;
  max-width: 400px;
  height: -moz-fit-content;
  height: fit-content;
  padding: var(--space-8);
  background-color: var(--surface-primary-subtle);
  border-radius: var(--radius-24);
  box-shadow: 0 2px 20px var(--shadow-medium);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page-login .logo-container {
  width: 60px;
  height: 60px;
  margin-bottom: var(--space-10);
}
.page-login .logo-container .logo {
  width: 100%;
  height: 100%;
  color: var(--content-primary);
  -o-object-fit: contain;
     object-fit: contain;
}
.page-login h1 {
  margin-bottom: var(--space-5);
}
.page-login #form-inputs {
  width: 100%;
  margin-bottom: var(--space-8);
}
.page-login .form-item {
  margin-bottom: var(--space-5);
}
.page-login .login-form {
  width: 100%;
}
.page-login .form-check-input:checked {
  background-color: var(--bg-primary-strong-default);
  border-color: var(--bg-primary-strong-default);
}
.page-login input:focus,
.page-login select:focus,
.page-login .form-control:focus {
  border-color: var(--content-primary-default);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--content-primary-default) 20%, transparent);
}
.page-login input::-moz-placeholder, .page-login .form-control::-moz-placeholder {
  color: var(--content-default-disabled);
  opacity: 1;
}
.page-login input::placeholder,
.page-login .form-control::placeholder {
  color: var(--content-default-disabled);
  opacity: 1;
}
.page-login .btn-submit {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: var(--space-2);
  background-color: var(--bg-primary-strong-default);
  border-radius: var(--radius-24);
  padding: var(--space-md, 8px) var(--space-lg, 12px);
  color: var(--content-default-inverse-primary);
  transition: all 0.3s ease-out;
}
.page-login .btn-submit:hover {
  background-color: var(--bg-primary-strong-hover);
}
.page-login .btn-link {
  margin-top: var(--space-4);
  color: var(--content-primary-default);
  text-decoration: none;
}
.page-login .btn-link:hover {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .page-login #login-section {
    width: 80%;
  }
}

.page-details {
  background-color: var(--surface-default-level-3);
  display: flex;
  flex-direction: row;
}
.page-details .main-body {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}
.page-details h1 {
  color: var(--content-primary-on-subtle);
}
.page-details h2 {
  color: var(--content-primary-on-subtle);
}
.page-details #main-content {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  width: 100%;
  max-width: 1300px;
  gap: var(--space-6);
}
.page-details .main-details {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--surface-default-level-1);
  border-radius: var(--radius-12);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.page-details .section-header {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.page-details .section-header .header-buttons {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.page-details .return-link {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  text-decoration: none;
  color: var(--content-primary-default);
  margin-bottom: var(--space-2);
  transition: all 0.3s ease-out;
}
.page-details .return-link:hover {
  color: var(--content-primary-on-subtle);
  cursor: pointer;
  transition: ease-in 0.4s;
}
.page-details .header-group {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-2);
}
.page-details .main-block {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.page-details .first-block {
  gap: var(--space-6);
  width: 1fr;
  display: flex;
  flex-direction: column;
}
.page-details .creator-info {
  color: var(--content-default-subtle);
  display: flex;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.page-details .creator-info .label-creator {
  margin-bottom: var(--space-2);
}
.page-details .creator-info .user-info {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  padding: var(--space-2);
  padding-left: var(--space-2);
  padding-right: var(--space-3);
  width: -moz-fit-content;
  width: fit-content;
  border-radius: var(--radius-12);
  align-items: center;
  background-color: var(--bg-primary-subtle-default);
}
.page-details .highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(113px, 1fr));
  width: 100%;
  gap: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-12);
  background-color: var(--bg-primary-subtle-default);
  color: var(--content-default-subtle);
}
.page-details .highlights .material-symbols-rounded {
  color: var(--content-primary-default);
}
.page-details .highlights .highlight-item {
  min-width: 113px;
  max-width: 130px;
}
.page-details .second-block {
  width: 1fr;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.page-details .second-block .description-label {
  color: var(--content-primary-on-subtle);
}
.page-details .second-block .description-text {
  color: var(--content-default-muted);
}
.page-details .latest-tasks {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.page-details .latest-tasks .section-header {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.page-details .tasks {
  display: grid;
  height: -moz-fit-content;
  height: fit-content;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}
.page-details .task-card {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  background-color: var(--surface-default-level-1);
  border-radius: var(--radius-12);
  padding: var(--space-4);
  gap: var(--space-3);
}
.page-details .task-card .task-title {
  color: var(--content-primary-on-subtle);
  padding-right: var(--space-2);
}
.page-details .task-card .card-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  gap: var(--space-2);
}
.page-details .task-card .card-text {
  color: var(--content-default-muted);
  margin-bottom: var(--space-2);
}
.page-details .task-card .btn-primary {
  width: 100%;
  justify-content: center;
}
.page-details .ghost {
  display: flex;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-24);
  color: var(--content-default-subtle);
  transition: all 0.3s ease-out;
}
.page-details .ghost:hover {
  color: var(--content-primary-on-subtle);
  cursor: pointer;
  transition: ease-in 0.4s;
}
.page-details .ghost .text-hide,
.page-details .ghost .icon-up {
  opacity: 0;
  display: none;
}
.page-details .ghost[aria-expanded=true] .text-show,
.page-details .ghost[aria-expanded=true] .icon-down {
  opacity: 0;
  display: none;
}
.page-details .ghost[aria-expanded=true] .text-hide,
.page-details .ghost[aria-expanded=true] .icon-up {
  display: inline-flex;
  opacity: 1;
  animation: fadeIn 0.3s forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.page-details .more-tasks.show, .page-details .more-tasks.collapsing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.page-details .more-tasks {
  flex-wrap: wrap;
  gap: var(--space-6);
}
.page-details .last-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.page-details .activity {
  display: flex;
  flex-wrap: wrap;
  width: 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--surface-default-level-1);
  border-radius: var(--radius-12);
}
.page-details .activity .activity-card {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: var(--space-2);
}
.page-details .activity .activity-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.page-details .activity-feed {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: column;
  gap: var(--space-6);
  color: var(--content-default-subtle);
}
.page-details .activity-feed .material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  color: var(--content-primary-default);
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}
.page-details time {
  color: var(--content-default-muted);
}
.page-details .documents {
  width: 100%;
  gap: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  height: -moz-fit-content;
  height: fit-content;
}
.page-details .pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .page-details .main-block {
    grid-template-columns: 1fr;
  }
  .page-details .last-container {
    grid-template-columns: 1fr;
  }
}
.page-projects {
  background-color: var(--surface-default-level-3);
  display: flex;
  flex-direction: row;
}
.page-projects .main-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-projects h1 {
  color: var(--content-primary-on-subtle);
  margin-bottom: var(--space-6);
}
.page-projects #main-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  width: 100%;
  max-width: 1300px;
}
.page-projects .custom-filter-tabs {
  gap: var(--space-1);
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-wrap: nowrap;
  align-items: end;
}
.page-projects .custom-filter-tabs .nav-link {
  background-color: var(--bg-neutral-subtle-default);
  color: var(--content-default-muted);
  border-top-left-radius: var(--radius-12);
  border-top-right-radius: var(--radius-12);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: var(--space-3) var(--space-6);
  transition: all 0.2s ease;
}
.page-projects .custom-filter-tabs .nav-link.active {
  background-color: var(--bg-primary-subtle-default);
  color: var(--content-default-subtle);
  padding: var(--space-4) var(--space-6);
  font-weight: 600;
}
.page-projects .custom-filter-tabs .nav-link:hover:not(.active) {
  background-color: var(--bg-primary-subtle-hover);
}
.page-projects .tab-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
}
.page-projects .tab-content {
  background-color: var(--bg-primary-subtle-default);
  padding-top: var(--space-6);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  border-bottom-left-radius: var(--radius-12);
  border-bottom-right-radius: var(--radius-12);
  border-top-right-radius: var(--radius-12);
}
.page-projects .button-group {
  display: flex;
  gap: var(--space-1);
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: var(--space-2);
}
.page-projects .card-projects {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--surface-default-level-1);
  padding: var(--space-6);
  border-radius: var(--radius-12);
  width: 100%;
}
.page-projects .card-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.page-projects .trailing-slot {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.page-projects .ghost {
  display: flex;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  border: none;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-24);
  color: var(--content-default-subtle);
  transition: all 0.3s ease-out;
}
.page-projects .ghost:hover {
  background-color: var(--bg-primary-subtle-hover);
  color: var(--content-default-primary);
  cursor: pointer;
  transition: ease-in 0.4s;
}
.page-projects .ghost .icon-arrow-down {
  display: inline-flex;
}
.page-projects .ghost .icon-arrow-up {
  display: none;
}
.page-projects .ghost[aria-expanded=true] .icon-arrow-down {
  display: none;
}
.page-projects .ghost[aria-expanded=true] .icon-arrow-up {
  display: inline-flex;
}
.page-projects .card-title {
  color: var(--content-default-primary);
}
.page-projects .card-date {
  color: var(--content-default-muted);
}
.page-projects .description {
  color: var(--content-default-muted);
  margin-bottom: var(--space-3);
}
@media (max-width: 768px) {
  .page-projects .tab-header {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 0;
  }
  .page-projects .custom-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0px;
    border-top-left-radius: var(--radius-12);
    border-top-right-radius: var(--radius-12);
    overflow: hidden;
  }
  .page-projects .custom-filter-tabs .nav-item {
    width: 100%;
  }
  .page-projects .custom-filter-tabs .nav-link {
    width: 100%;
    border-radius: 0;
    text-align: left;
    padding: var(--space-4);
  }
  .page-projects .custom-filter-tabs .nav-link.active {
    padding: var(--space-4);
  }
  .page-projects .button-group {
    width: 100%;
    margin-bottom: 0;
    padding: var(--space-3) var(--space-6);
    background-color: var(--bg-primary-subtle-default);
  }
  .page-projects .trailing-slot {
    width: 100%;
  }
}

.page-tasks {
  background-color: var(--surface-default-level-3);
  display: flex;
  flex-direction: row;
}
.page-tasks .main-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-tasks h1 {
  color: var(--content-primary-on-subtle);
}
.page-tasks h2 {
  color: var(--content-primary-on-subtle);
}
.page-tasks h3 {
  color: var(--content-primary-on-subtle);
}
.page-tasks #main-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  width: 100%;
  gap: var(--space-4);
  max-width: 1300px;
}
.page-tasks .section-header {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.page-tasks .section-header .header-buttons {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.page-tasks .tag-default {
  color: var(--content-default-primary);
  background-color: var(--surface-primary-medium);
  border-radius: var(--radius-8);
  padding: var(--space-1) var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.page-tasks .pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.page-tasks .ghost {
  display: flex;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-24);
  color: var(--content-default-subtle);
  transition: all 0.3s ease-out;
}
.page-tasks .ghost:hover {
  color: var(--content-primary-on-subtle);
  cursor: pointer;
  transition: ease-in 0.4s;
}
.page-tasks .header-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.page-tasks .header-group .action-group {
  display: flex;
  flex-wrap: wrap;
  width: -moz-fit-content;
  width: fit-content;
  gap: var(--space-3);
}
.page-tasks .task-title {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}
.page-tasks .task-title .main-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.page-tasks .main-task {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  background-color: var(--surface-default-level-1);
  border-radius: var(--radius-12);
  border-top: 5px solid var(--surface-primary-strong);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.page-tasks .task-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}
.page-tasks .main-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.page-tasks .first-block {
  gap: var(--space-6);
  width: 66%;
  display: flex;
  flex-direction: column;
}
.page-tasks .first-block .description-label {
  color: var(--content-primary-on-subtle);
}
.page-tasks .first-block .description-text {
  color: var(--content-default-muted);
}
.page-tasks .first-block .highlights {
  display: flex;
  flex-wrap: wrap;
  width: -moz-fit-content;
  width: fit-content;
  gap: var(--space-6);
  border-radius: var(--radius-12);
}
.page-tasks .first-block .highlights .material-symbols-rounded {
  color: var(--content-primary-default);
}
.page-tasks .first-block .highlights .highlight-item {
  min-width: 113px;
  max-width: 130px;
  color: var(--content-default-subtle);
}
.page-tasks .first-block .creator-info {
  color: var(--content-default-subtle);
  display: flex;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.page-tasks .first-block .creator-info .label-creator {
  margin-bottom: var(--space-2);
}
.page-tasks .first-block .creator-info .user-info {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  padding: var(--space-2);
  padding-left: var(--space-2);
  padding-right: var(--space-3);
  width: -moz-fit-content;
  width: fit-content;
  border-radius: var(--radius-12);
  align-items: center;
  background-color: var(--bg-primary-subtle-default);
}
.page-tasks .first-block .description {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  height: -moz-fit-content;
  height: fit-content;
}
.page-tasks .second-block {
  height: -moz-fit-content;
  height: fit-content;
  width: 32%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.page-tasks .task-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.page-tasks .task-cards .card-task {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: var(--space-4);
  background-color: var(--surface-default-level-1);
  padding: var(--space-6);
  border-radius: var(--radius-12);
}
.page-tasks .task-cards .card-task:hover {
  transition: ease-in 0.4s;
  background-color: var(--surface-primary-subtle);
  box-shadow: 0 1px 20px 2px var(--shadow-weak);
  cursor: pointer;
}
.page-tasks .task-cards .card-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}
.page-tasks .task-cards .card-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--space-2);
  justify-content: space-between;
  color: var(--content-default-subtle);
}
.page-tasks .task-cards .card-date {
  color: var(--content-default-muted);
}
@media (max-width: 900px) {
  .page-tasks {
    flex-direction: column;
  }
  .page-tasks .main-task {
    padding: var(--space-4);
  }
  .page-tasks .first-block {
    width: 100%;
  }
  .page-tasks .second-block {
    width: 100%;
  }
  .page-tasks .highlights {
    flex-direction: column;
  }
  .page-tasks .header-group {
    flex-direction: column;
    gap: var(--space-3);
  }
  .page-tasks .action-group {
    flex-wrap: wrap;
  }
}

.page-user-area {
  background-color: var(--surface-default-level-3);
  display: flex;
  flex-direction: row;
}
.page-user-area .main-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-user-area h1 {
  color: var(--content-primary-on-subtle);
}
.page-user-area h2 {
  color: var(--content-primary-on-subtle);
}
.page-user-area h3 {
  color: var(--content-primary-on-subtle);
}
.page-user-area #main-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  width: 100%;
  align-items: center;
  gap: var(--space-4);
  max-width: 1300px;
}
.page-user-area .user-settings {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 600px;
  margin-top: var(--space-4);
  background-color: var(--surface-default-level-1);
  padding: var(--space-6);
  border-radius: var(--radius-12);
}
.page-user-area .picture-container {
  display: flex;
  justify-content: center;
}
.page-user-area .picture-container .img-icon {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.page-user-area .button-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: end;
}
.page-user-area .form-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
}
.page-user-area .user-data {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: column;
  gap: var(--space-3);
}
.page-user-area .secondary-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.page-user-area .secondary-data .group-email {
  width: 100%;
}
.page-user-area .secondary-data .group-phone {
  width: 100%;
}
.page-user-area label {
  color: var(--content-default-muted);
}
.page-user-area input {
  width: 100%;
  background-color: var(--surface-default-level-1);
  color: var(--content-default-subtle);
  border: 1px solid var(--border-default-weak);
}
.page-user-area input::-moz-placeholder {
  color: var(--content-default-disabled);
  opacity: 1;
}
.page-user-area input::placeholder {
  color: var(--content-default-disabled);
  opacity: 1;
}
.page-user-area input:-moz-read-only {
  color: var(--content-default-subtle);
  cursor: default;
}
.page-user-area input:read-only {
  color: var(--content-default-subtle);
  cursor: default;
}
.page-user-area input:focus {
  border-color: var(--content-primary-default);
  background-color: var(--surface-default-level-1);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--content-primary-default) 20%, transparent);
}
.page-user-area .caption {
  margin-top: var(--space-6);
  width: 100%;
  color: var(--content-default-muted);
}
.page-user-area .switch-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}
.page-user-area .switch-container .title-tasks {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.page-user-area .switch-container .switch-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-3);
}
.page-user-area .switch-container .switch-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-primary-subtle-default);
  padding: var(--space-4);
  border-radius: var(--radius-12);
  gap: var(--space-4);
  width: 100%;
}
.page-user-area .switch-container .switch-item .text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.page-user-area .switch-container .switch-item .text-container .switch-title {
  margin-bottom: 2px;
  color: var(--content-primary-on-subtle);
}
.page-user-area .switch-container .switch-item .text-container .switch-body {
  color: var(--content-default-subtle);
  margin-bottom: 0;
  line-height: 1.4;
}
.page-user-area .switch-container .switch-item .form-switch {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
}
.page-user-area .switch-container .switch-item .form-switch .form-check-input {
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.page-user-area .switch-container .switch-item .form-switch .form-check-input:checked {
  background-color: var(--content-primary-default);
  border-color: var(--content-primary-default);
}
@media (max-width: 768px) {
  .page-user-area .secondary-data {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
  }
  .page-user-area input {
    width: 100%;
  }
}

body {
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Figtree", sans-serif;
  overflow-x: hidden;
}

.offcanvas-tasks {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-default-level-2);
}
.offcanvas-tasks h2 {
  color: var(--content-primary-on-subtle);
}
.offcanvas-tasks .offcanvas-header {
  display: flex;
  border: none;
  border-radius: var(--radius-24);
  align-items: center;
  padding: var(--space-3);
  padding-bottom: 2px;
  transition: all 0.3s ease-out;
}
.offcanvas-tasks .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-3);
}
.offcanvas-tasks .description-text {
  color: var(--content-default-muted);
}
.offcanvas-tasks .highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.offcanvas-tasks .highlight-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.offcanvas-tasks .material-symbols-rounded {
  color: var(--content-primary-default);
}
.offcanvas-tasks p {
  color: var(--content-default-subtle);
}
.offcanvas-tasks h2 {
  margin-bottom: var(--space-3);
}
.offcanvas-tasks .button-footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
  justify-content: end;
}
.offcanvas-tasks .button-footer .material-symbols-rounded {
  line-height: 1;
  color: var(--content-default-inverse-primary);
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}

.btn-close {
  color: var(--content-default-subtle);
  background-image: none;
  font-size: 20px;
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-24);
  transition: all 0.3s ease-out;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-close:hover, .btn-close:focus {
  background-color: transparent;
  color: var(--content-primary-on-subtle);
  cursor: pointer;
  transition: ease-in 0.4s;
  outline: none;
  box-shadow: none;
}
.btn-close::before {
  content: "\e5cd";
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
  display: inline-block;
}

.modal-content {
  background-color: var(--surface-default-level-2);
}
.modal-content .step-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-3);
  flex: 1;
  min-height: 0;
}
.modal-content .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  gap: var(--space-2);
}
.modal-content .modal-header h1 {
  margin: 0px;
}
.modal-content .modal-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.modal-content .modal-body h1 {
  margin-bottom: var(--space-3);
}
.modal-content form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  overflow: hidden;
}
.modal-content .info-message {
  width: 100%;
  gap: var(--space-2);
  background-color: var(--bg-info-subtle-default);
  padding: var(--space-2);
  border-radius: var(--radius-12);
  color: var(--content-signal-info-default);
}
.modal-content .info-message .info {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.modal-content .modal-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: column;
  gap: var(--space-1);
}
.modal-content .form-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--space-4);
}
.modal-content .form-row > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 160px;
  gap: var(--space-1);
}
.modal-content .created-tasks {
  color: var(--content-primary-on-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.modal-content .created-tasks .task-card {
  display: flex;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
  background-color: var(--surface-default-level-1);
  border-radius: var(--radius-12);
  padding: var(--space-4);
  gap: var(--space-3);
}
.modal-content .created-tasks h2 {
  margin-bottom: 0;
}
.modal-content .card-body {
  display: flex;
  justify-content: space-between;
  gap: var(--space-1);
}
.modal-content h3 {
  overflow-wrap: anywhere;
  color: var(--content-primary-on-subtle);
  font-size: var(--body-l-medium) !important;
}
.modal-content .step-2-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.modal-content .step-2-container .task-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: 0;
}
.modal-content .step-2-container .created-tasks {
  padding-right: var(--space-1);
}
@media (max-width: 768px) {
  .modal-content .step-2-container {
    grid-template-columns: 1fr;
  }
  .modal-content .step-2-container .task-form {
    position: static;
  }
}
.modal-content .form-row select,
.modal-content input {
  width: 100%;
}
.modal-content h5 {
  color: var(--content-primary-on-subtle);
}
.modal-content label {
  color: var(--content-default-subtle);
}
.modal-content .form-control,
.modal-content .form-select {
  background-color: var(--surface-default-level-1);
  color: var(--content-default-muted);
  border: 1px solid var(--border-default-weak);
}
.modal-content .form-control:focus,
.modal-content .form-select:focus {
  border-color: var(--content-primary-default);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--content-primary-default) 20%, transparent);
}
.modal-content .form-control option,
.modal-content .form-select option {
  background-color: var(--surface-default-level-1);
  color: var(--content-default-subtle);
  max-width: 100%;
}
.modal-content .modal-group-fields {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.modal-content .modal-group-fields > div {
  flex: 1;
}
.modal-content input {
  border: 1px solid var(--border-default-weak);
  background-color: var(--surface-default-level-1);
  color: var(--content-default-subtle);
}
.modal-content input::-moz-placeholder {
  color: var(--content-default-disabled);
  opacity: 1;
}
.modal-content input::placeholder {
  color: var(--content-default-disabled);
  opacity: 1;
}
.modal-content input[type=date] {
  color: var(--content-default-muted);
}
.modal-content input[type=date]::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24" height="24" fill="%23ffffff"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  color: transparent;
  cursor: pointer;
  opacity: 1;
  filter: var(--calendar-icon-filter, invert(0.6));
}
.modal-content input[type=file]::file-selector-button {
  color: var(--content-default-subtle);
  background-color: var(--bg-primary-subtle-default) !important;
}
.modal-content input[type=file]::file-selector-button:hover {
  cursor: pointer;
}
.modal-content input:focus {
  border-color: var(--content-primary-default);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--content-primary-default) 20%, transparent);
}
.modal-content .form-label {
  color: var(--content-default-muted);
  margin-bottom: 0;
}
.modal-content .border-dashed {
  background-color: var(--surface-default-level-1);
  color: var(--content-default-muted);
  border: 3px dashed var(--border-default-weak);
}
.modal-content .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-default-weak);
}

.step-3 .btn-secondary {
  padding: var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
}
.step-3 h2 {
  overflow-wrap: anywhere;
  color: var(--content-primary-on-subtle);
}
.step-3 h3 {
  overflow-wrap: anywhere;
  color: var(--content-primary-on-subtle);
}
.step-3 .header-text {
  width: 100%;
  color: var(--content-primary-on-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: space-between;
}
.step-3 .modal-row {
  background-color: var(--surface-primary-subtle);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-12);
  gap: var(--space-4);
}
.step-3 .project-header {
  display: flex;
  width: 100%;
  gap: var(--space-2);
}
.step-3 .project-header .title-project {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  color: var(--content-primary-on-subtle);
}
.step-3 .project-header p {
  color: var(--content-default-muted);
  overflow-wrap: anywhere;
  margin-bottom: 0;
}
.step-3 .project-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(113px, 1fr));
  width: 100%;
  gap: var(--space-6);
  color: var(--content-default-subtle);
}
.step-3 .project-info .text-item {
  min-width: 113px;
  max-width: 130px;
  overflow-wrap: anywhere;
}
.step-3 .pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.progress {
  background-color: var(--bg-neutral-medium-default);
  border-radius: var(--radius-24);
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.progress-bar {
  background-color: var(--surface-primary-strong);
  height: 100%;
  width: 25%;
}

.label-progress {
  color: var(--content-default-subtle);
  margin-bottom: var(--space-2);
}

.tag-high {
  color: var(--content-default-primary);
  background-color: var(--bg-error-medium-default);
  border-radius: var(--radius-8);
  padding: var(--space-1) var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.tag-medium {
  color: var(--content-default-primary);
  background-color: var(--bg-warning-medium-default);
  border-radius: var(--radius-8);
  padding: var(--space-1) var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.tag-low {
  color: var(--content-default-primary);
  background-color: var(--bg-success-medium-default);
  border-radius: var(--radius-8);
  padding: var(--space-1) var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.tag-complete {
  color: var(--content-default-primary);
  background-color: var(--bg-info-medium-default);
  border-radius: var(--radius-8);
  padding: var(--space-1) var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.btn-secondary {
  height: -moz-fit-content;
  height: fit-content;
  min-height: 32px;
  min-width: -moz-fit-content;
  min-width: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: none;
  text-decoration: none;
  gap: var(--space-1);
  color: var(--content-default-subtle);
  background-color: var(--bg-primary-subtle-default);
  border-radius: var(--radius-24);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  box-shadow: 0 1px 4px 0 var(--shadow-weak);
  transition: all 0.3s ease-out;
}
.btn-secondary:hover {
  background-color: var(--bg-primary-subtle-hover);
  color: var(--content-default-primary);
  cursor: pointer;
  transition: ease-in 0.4s;
}

.add-task-btn {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: var(--space-3);
  justify-content: center;
}

.btn-primary {
  min-width: -moz-fit-content;
  min-width: fit-content;
  min-height: 32px;
  background-color: var(--bg-primary-strong-default);
  border-radius: var(--radius-24);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  color: var(--content-default-inverse-primary);
  border: none;
  display: flex;
  gap: var(--space-1);
  align-items: center;
  transition: all 0.3s ease-out;
}
.btn-primary .material-symbols-rounded {
  line-height: 1;
  font-family: "Material Symbols Rounded";
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}
.btn-primary:hover {
  background-color: var(--bg-primary-strong-hover);
  cursor: pointer;
  transition: ease-in 0.4s;
}

.attachment-pill {
  color: var(--content-default-subtle);
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  padding-left: var(--space-1);
  padding-right: var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: var(--radius-12);
  align-items: center;
  background-color: var(--bg-primary-subtle-default);
  transition: all 0.3s ease-out;
}
.attachment-pill .material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  color: var(--content-primary-default);
  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
}
.attachment-pill:hover {
  background-color: var(--bg-primary-subtle-hover);
  cursor: pointer;
  transition: ease-in 0.4s;
}

.dropdown-menu {
  background-color: var(--surface-default-level-1);
  border: 1px solid var(--border-default-weak);
  border-radius: var(--radius-8, 8px);
  padding: var(--space-2, 8px) 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dropdown-menu .dropdown-item {
  color: var(--content-default-subtle);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
  background-color: var(--surface-default-level-3);
  color: var(--content-primary-on-subtle);
}
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active {
  background-color: var(--content-primary-default);
  color: var(--content-default-inverse-primary);
}

@media (max-width: 900px) {
  .sidebar {
    display: none;
  }
  .modal-content .form-row {
    flex-direction: column;
  }
  .modal-content .form-row > div {
    width: 100%;
  }
  .modal-group-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
}
@media (max-width: 900px) and (max-width: 500px) {
  .btn-secondary {
    min-height: 44px;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .btn-primary {
    min-height: 44px;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}/*# sourceMappingURL=main.css.map */