/**
 * SC Design System — app.css
 * Tokens + Components + Utilitats
 * Generat des de Figma (SC_DS_Complete)
 * Font: DM Sans
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700&display=swap');


/* ============================================================
   1. TOKENS — Custom Properties
   ============================================================ */
:root {

  /* Tipografia */
  --font-family-body:     'DM Sans', sans-serif;
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Colors base */
  --color-base-white:             #ffffff;
  --color-base-white-off:         #fffffa;
  --color-base-white-transparent: rgba(255, 255, 255, 0);
  --color-base-black:             #000000;

  /* Brand — vermell Sostre Cívic */
  --color-brand-25:  #fffafa;
  --color-brand-50:  #fff6f5;
  --color-brand-100: #ffe8e5;
  --color-brand-200: #fed1cd;
  --color-brand-300: #f8a6a0;
  --color-brand-400: #f36f6a;
  --color-brand-500: #e83f43;   /* Principal */
  --color-brand-600: #c7262f;
  --color-brand-700: #a31421;
  --color-brand-800: #810012;
  --color-brand-900: #540008;
  --color-brand-950: #3a0004;
  --color-brand-alpha-08: rgba(232, 64, 67, 0.08);
  --color-brand-alpha-70: rgba(232, 64, 67, 0.80);

  /* Gray — grisos càlids */
  --color-gray-25:  #fffffa;
  --color-gray-50:  #f5f4ec;
  --color-gray-100: #e0e0db;
  --color-gray-200: #c7c6c0;
  --color-gray-300: #b8b8b0;
  --color-gray-400: #a8a79f;
  --color-gray-500: #8a887f;
  --color-gray-600: #6e6d63;
  --color-gray-700: #59574e;
  --color-gray-800: #424137;
  --color-gray-900: #2e2d20;
  --color-gray-950: #13120a;

  /* Success */
  --color-success-25:  #f6fef9;
  --color-success-50:  #ecfdf3;
  --color-success-100: #dcfae6;
  --color-success-300: #75e0a7;
  --color-success-400: #47cd89;
  --color-success-500: #17b26a;
  --color-success-600: #079455;
  --color-success-700: #067647;
  --color-success-800: #085d3a;
  --color-success-900: #074d31;
  --color-success-950: #053321;

  /* Warning */
  --color-warning-25:  #fffcf5;
  --color-warning-50:  #fffaeb;
  --color-warning-100: #fef0c7;
  --color-warning-200: #fedf89;
  --color-warning-300: #fec84b;
  --color-warning-400: #fdb022;
  --color-warning-500: #f79009;
  --color-warning-600: #dc6803;
  --color-warning-700: #b54708;
  --color-warning-800: #93370d;
  --color-warning-900: #7a2e0e;
  --color-warning-950: #4e1d09;

  /* Error */
  --color-error-25:  #fff1f4;
  --color-error-50:  #ffe3e8;
  --color-error-100: #fecbd6;
  --color-error-200: #f9a0b5;
  --color-error-300: #f06c92;
  --color-error-400: #dc3f75;
  --color-error-500: #b91559;
  --color-error-600: #990046;
  --color-error-700: #740034;
  --color-error-800: #550024;
  --color-error-900: #380015;
  --color-error-950: #21000a;

  /* Tokens semàntics — Text */
  --color-text-primary:     var(--color-gray-900);
  --color-text-secondary:   var(--color-gray-700);
  --color-text-tertiary:    var(--color-gray-600);
  --color-text-placeholder: var(--color-gray-500);
  --color-text-disabled:    var(--color-gray-400);
  --color-text-inverse:     var(--color-base-white);
  --color-text-brand:       var(--color-brand-500);

  /* Tokens semàntics — Background */
  --color-bg-primary:      var(--color-base-white-off);
  --color-bg-secondary:    var(--color-gray-50);
  --color-bg-tertiary:     var(--color-gray-100);
  --color-bg-page:         #fafaf7;
  --color-bg-brand:        var(--color-brand-500);
  --color-bg-brand-subtle: var(--color-brand-50);
  --color-bg-success:      var(--color-success-50);
  --color-bg-warning:      var(--color-warning-50);
  --color-bg-error:        var(--color-error-50);

  /* Tokens semàntics — Border */
  --color-border:           rgba(0, 0, 0, 0.1);
  --color-border-primary:   var(--color-gray-300);
  --color-border-secondary: var(--color-gray-200);
  --color-border-brand:     var(--color-brand-500);
  --color-border-error:     var(--color-error-500);

  /* Spacing */
  --spacing-xs:  4px;
  --spacing-sm:  6px;
  --spacing-md:  8px;
  --spacing-lg:  12px;
  --spacing-xl:  16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  20px;
  --radius-pill: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 0 30px rgba(10, 13, 18, 0.05);

  /* Bootstrap 5 overrides */
  --bs-font-sans-serif:    'DM Sans', system-ui, sans-serif;
  --bs-body-font-family:   var(--bs-font-sans-serif);
  --bs-body-color:         var(--color-text-primary);
  --bs-body-bg:            var(--color-bg-primary);
  --bs-primary:            var(--color-brand-500);
  --bs-primary-rgb:        232, 63, 67;
  --bs-secondary:          var(--color-gray-600);
  --bs-secondary-rgb:      110, 109, 99;
  --bs-success:            var(--color-success-500);
  --bs-success-rgb:        23, 178, 106;
  --bs-danger:             var(--color-error-500);
  --bs-danger-rgb:         185, 21, 89;
  --bs-warning:            var(--color-warning-500);
  --bs-warning-rgb:        247, 144, 9;
  --bs-info:               var(--color-gray-500);
  --bs-info-rgb:           138, 136, 127;
  --bs-light:              var(--color-gray-50);
  --bs-dark:               var(--color-gray-900);
  --bs-border-color:       var(--color-border-secondary);
  --bs-border-radius:      var(--radius-md);
  --bs-border-radius-sm:   var(--radius-sm);
  --bs-border-radius-lg:   var(--radius-xl);
  --bs-border-radius-pill: var(--radius-full);
  --bs-box-shadow-sm:      var(--shadow-xs);
  --bs-box-shadow:         var(--shadow-sm);
  --bs-box-shadow-lg:      var(--shadow-md);
}


/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-family-body);
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}


/* ============================================================
   3. BOTONS
   ============================================================ */
.btn-sc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, transform .1s;
  white-space: nowrap;
  border: none;
}
.btn-sc:active { transform: scale(.99); }

.btn-sc-primary {
  background: var(--color-brand-500);
  color: var(--color-base-white);
  border: 2px solid rgba(255, 255, 255, 0.12);
}
.btn-sc-primary:hover { background: var(--color-brand-600); color: var(--color-base-white); }
.btn-sc-primary:active { background: var(--color-brand-700); }

.btn-sc-outline {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-sc-outline:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }

.btn-sc-ghost {
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
}
.btn-sc-ghost:hover { background: var(--color-bg-secondary); }

/* BS5 compat */
.btn-brand { background-color: var(--color-brand-500); border-color: var(--color-brand-500); color: var(--color-base-white); }
.btn-brand:hover { background-color: var(--color-brand-600); border-color: var(--color-brand-600); color: var(--color-base-white); }
.btn-brand:active { background-color: var(--color-brand-700); border-color: var(--color-brand-700); }
.btn-brand-outline { background-color: transparent; border-color: var(--color-brand-500); color: var(--color-brand-500); }
.btn-brand-outline:hover { background-color: var(--color-brand-50); border-color: var(--color-brand-600); color: var(--color-brand-600); }


/* ============================================================
   4. BADGES
   ============================================================ */
.sc-badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-gray-50);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.sc-badge-light {
  display: inline-flex;
  align-items: center;
  border: 1px solid #f5f4ec;
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: #f5f4ec;
}
.sc-badge-notif {
  margin-left: auto;
  background: var(--color-brand-500);
  color: var(--color-base-white);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, 0.04);
}


/* ============================================================
   5. LAYOUT — Dashboard
   ============================================================ */

body.page-dashboard {
  background-color: #fafaf9;
  min-height: 100vh;
}

.sc-layout {
  display: flex;
  min-height: 100vh;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}


/* ============================================================
   6. SIDEBAR ESQUERRE
   ============================================================ */
.sc-sidebar {
  width: 232px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0 8px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 4;
  overflow-y: auto;
}

.sc-logo { padding: 4px; }
.sc-logo img { height: 35px; width: auto; }

.sc-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

/* Grup de nav en targeta */
.sc-nav-card {
  background: white;
  border: 1px solid rgba(128, 128, 128, 0.12);
  border-radius: 20px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--color-text-secondary-dk);
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.sc-nav-item img { width: 20px; height: 20px; flex-shrink: 0; }
.sc-nav-item:hover { background: #f5f5f3; color: var(--color-text-primary-dark); }
.sc-nav-item.active {
  background: #fff2f2;
  color: #d9363a;
}


/* ============================================================
   7. CONTINGUT PRINCIPAL
   ============================================================ */
.sc-main {
  flex: 1;
  min-width: 0;
  padding: 24px 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 3;
  overflow-x: auto;
}

/* Benvinguda */
.sc-welcome { display: flex; flex-direction: column; gap: 4px; }
.sc-welcome-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
  letter-spacing: -0.5px;
  color: #2d1f18;
  margin: 0;
}
.sc-welcome-sub {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  color: var(--color-text-secondary-dk);
  margin: 0;
}

/* Estat sòcia */
.sc-status-block { display: flex; flex-direction: column; gap: 12px; }
.sc-status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-status-label {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: #2d1f18;
  line-height: 20px;
}
.sc-status-desc {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  color: var(--color-text-secondary-dk);
  margin: 0;
}

/* Badges d'estat */
.sc-badge-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  color: white;
  border: 1px solid rgba(255,255,255,0);
}
.sc-badge-success { background: #44b874; }
.sc-badge-neutral  { background: #9e9b95; }


/* ============================================================
   8. SECCIONS I CARDS
   ============================================================ */

/* Capçalera de secció */
.sc-section { display: flex; flex-direction: column; gap: 20px; }
.sc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sc-section-title {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: #2d1f18;
  margin: 0;
}
.sc-section-link {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: #9e9b95;
  text-decoration: underline;
}
.sc-section-link:hover { color: var(--color-action-primary); }

/* Grid de tasques "Per fer ara" */
.sc-task-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.sc-task-card {
  background: white;
  border: 1px solid rgba(128, 128, 128, 0.12);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 212px;
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(0,0,0,0.04);
}
.sc-task-icon {
  width: 40px;
  height: 40px;
  background: #fff2f2;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sc-task-icon img { width: 20px; height: 20px; }
.sc-task-body { display: flex; flex-direction: column; gap: 8px; }
.sc-task-date {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  color: #514941;
  margin: 0;
}
.sc-task-title {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 22px;
  letter-spacing: -0.5px;
  color: var(--color-text-primary-dark);
  margin: 0;
}
.sc-task-sub {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  color: var(--color-text-primary-dark);
  margin: 0;
}

/* Cards d'activitats amb imatge */
.sc-cards-grid {
  display: flex;
  gap: 16px;
  position: relative;
}
.sc-activity-card {
  flex: 1;
  height: 384px;
  border-radius: 20px;
  border: 1px solid rgba(128, 128, 128, 0.12);
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 24px rgba(0,0,0,0.04);
}
.sc-activity-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sc-activity-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sc-activity-tags {
  padding: 14px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sc-tag {
  background: white;
  border: 1px solid #9e9b95;
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: #514941;
  line-height: 16px;
}
.sc-activity-bottom {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,0.04);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-activity-date  { font-size: 14px; font-weight: var(--font-weight-light); color: #514941; margin: 0; }
.sc-activity-title { font-size: 20px; font-weight: var(--font-weight-semibold); line-height: 24px; letter-spacing: -0.5px; color: var(--color-text-primary-dark); margin: 0; }
.sc-activity-desc  { font-size: 14px; font-weight: var(--font-weight-light); line-height: 18px; color: var(--color-text-primary-dark); margin: 0; }
.sc-activity-arrow { width: 20px; height: 20px; margin-top: 4px; }

/* Banner ajuda */
.sc-help-banner {
  background: #f5f5f3;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.sc-help-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
  letter-spacing: -0.5px;
  color: #2d1f18;
  margin: 0;
}
.sc-help-sub {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  color: var(--color-text-secondary-dk);
  margin: 4px 0 0;
}
.sc-help-actions { display: flex; gap: 8px; flex-shrink: 0; }

.btn-sc-outline-dark {
  background: white;
  border: 1px solid rgba(0,0,0,0.4);
  color: var(--color-text-primary-dark);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  height: 38px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-sc-outline-dark:hover { background: #f5f5f3; }


/* ============================================================
   9. SIDEBAR DRET
   ============================================================ */
.sc-sidebar-right {
  width: 200px;
  flex-shrink: 0;
  padding: 112px 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 2;
  overflow-y: auto;
}

/* Botons capçalera (notificacions + avatar) */
.sc-topbar-actions {
  position: absolute;
  top: 24px;
  right: 17px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.sc-notif-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sc-notif-btn img { width: 20px; height: 20px; }
.sc-notif-badge {
  position: absolute;
  bottom: -1px;
  right: -15px;
  background: var(--color-action-primary);
  color: white;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0);
  min-width: 20px;
  text-align: center;
}

.sc-avatar-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: #686158;
  border: 0.75px solid rgba(255,255,255,0);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sc-avatar-initials {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: white;
  line-height: 18px;
}
.sc-avatar-online {
  position: absolute;
  bottom: -0.75px;
  right: -0.75px;
  width: 8px;
  height: 8px;
  background: #44b874;
  border: 1.5px solid white;
  border-radius: var(--radius-full);
}

/* Widget destacats */
.sc-widget-section { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.sc-widget-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 18px;
  color: var(--color-text-secondary-dk);
}
.sc-widget-list { display: flex; flex-direction: column; gap: 8px; }

.sc-doc-card {
  background: white;
  border: 1px solid rgba(128, 128, 128, 0.12);
  border-radius: 20px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 0 0 24px rgba(0,0,0,0.04);
}
.sc-doc-info { flex: 1; min-width: 0; }
.sc-doc-title {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 18px;
  color: var(--color-text-primary-dark);
  margin: 0;
}
.sc-doc-sub {
  font-size: 12px;
  font-weight: var(--font-weight-light);
  line-height: 16px;
  color: var(--color-text-primary-dark);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-doc-icon { width: 24px; height: 24px; flex-shrink: 0; }


/* ============================================================
   11. LOGIN
   ============================================================ */

/* Nous tokens del DesignKit (La Interna) */
:root {
  --color-text-primary-dark: #1b1210;
  --color-text-secondary-dk: #686158;
  --color-text-tertiary-dk:  #9e9b95;
  --color-surface:           #ffffff;
  --color-action-primary:    #e74044;
  --color-action-secondary:  #514941;
  --color-border-input:      rgba(0, 0, 0, 0.4);
  --radius-input:            16px;
  --shadow-elevation-2:      0 0 24px rgba(0,0,0,0.04), 0 0 24px rgba(0,0,0,0.02);
}

/* Pàgina completa centrada */
body.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-page);
  min-height: 100vh;
  padding: var(--spacing-4xl) var(--spacing-xl);
}

/* Logo fix top-left */
.sc-login-logo {
  position: fixed;
  top: 24px;
  left: 16px;
  padding: var(--spacing-md) var(--spacing-xs);
  z-index: 10;
}

/* Contenidor central */
.sc-login-wrapper {
  width: 100%;
  max-width: 343px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Capçalera */
.sc-login-header { text-align: center; }
.sc-login-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--color-text-primary-dark);
  margin: 0;
}
.sc-login-subtitle {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  color: var(--color-text-secondary-dk);
  margin: 2px 0 0;
}

/* Grup de camps */
.sc-login-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Camp individual amb label */
.sc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-field-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 18px;
  color: var(--color-text-secondary-dk);
  margin: 0;
}
.sc-field-input {
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-input);
  padding: 10px 14px;
  height: 44px;
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: var(--font-weight-light);
  line-height: 20px;
  color: var(--color-text-primary-dark);
  width: 100%;
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .15s;
}
.sc-field-hint {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  color: var(--color-text-secondary-dk);
  margin: 0;
}
.sc-field-input::placeholder {
  color: var(--color-text-tertiary-dk);
  font-weight: var(--font-weight-light);
}
.sc-field-input:focus {
  border-color: var(--color-action-primary);
  box-shadow: 0 0 0 3px rgba(231, 64, 68, 0.12);
}

/* Camp amb botó de mostrar/amagar contrasenya */
.sc-field-input-wrap { position: relative; }
.sc-field-input-wrap .sc-field-input { padding-right: 40px; }
.sc-field-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-field-toggle img { width: 16px; height: 16px; }

/* Accions login */
.sc-login-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* Botó full width */
.btn-sc-full { width: 100%; }

/* Override botó primari per al nou DS */
body.page-login .btn-sc-primary {
  background: var(--color-action-primary);
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: var(--radius-pill);
  height: 44px;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-elevation-2);
}
body.page-login .btn-sc-primary:hover  { background: var(--color-brand-600); }
body.page-login .btn-sc-primary:active { background: var(--color-brand-700); }

/* Enllaç "Has oblidat..." */
.sc-forgot-link {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 18px;
  color: var(--color-action-secondary);
  text-decoration: underline;
  text-align: center;
  display: block;
}
.sc-forgot-link:hover { color: var(--color-action-primary); }


/* ============================================================
   12. FOOTER
   ============================================================ */
.sc-footer {
  padding-top: var(--spacing-5xl);
  border-top: 1px solid var(--color-gray-200);
  margin-top: var(--spacing-md);
}
.sc-footer-logo img  { height: 16px; width: auto; margin-bottom: var(--spacing-5xl); }
.sc-footer-label     { font-size: 12px; font-weight: var(--font-weight-light); color: var(--color-text-tertiary); margin-bottom: var(--spacing-xl); }
.sc-footer-social    { display: flex; gap: var(--spacing-xl); align-items: center; margin-bottom: var(--spacing-5xl); }
.sc-footer-social img { width: 18px; height: 18px; }
.sc-footer-col-title { font-size: 12px; font-weight: var(--font-weight-light); color: var(--color-text-tertiary); margin-bottom: var(--spacing-xl); }
.sc-footer-link      { font-size: 12px; font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-bottom: var(--spacing-lg); display: block; text-decoration: none; }
.sc-footer-link:hover { color: var(--color-brand-500); }
.sc-footer-note      { font-size: 12px; font-weight: var(--font-weight-light); color: var(--color-text-primary); border-top: 1px solid var(--color-gray-200); padding-top: var(--spacing-3xl); margin-top: var(--spacing-5xl); }


/* ============================================================
   13. UTILITATS
   ============================================================ */
.text-brand        { color: var(--color-brand-500) !important; }
.text-primary-sc   { color: var(--color-text-primary) !important; }
.text-secondary-sc { color: var(--color-text-secondary) !important; }
.text-tertiary     { color: var(--color-text-tertiary) !important; }
.bg-brand          { background-color: var(--color-brand-500) !important; }
.bg-brand-subtle   { background-color: var(--color-brand-50) !important; }
.bg-surface        { background-color: var(--color-bg-secondary) !important; }


/* ============================================================
   14. CASA MEVA — Pàgina unitat d'habitatge
   ============================================================ */

/* Capçalera de pàgina */
.sc-page-header { display: flex; align-items: flex-end; justify-content: space-between; }
.sc-page-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
  letter-spacing: -0.5px;
  color: #2d1f18;
  margin: 0;
}
.sc-page-sub {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  color: var(--color-text-secondary-dk);
  margin: 2px 0 0;
}

/* Panell de contingut */
.sc-panel {
  background: #f5f5f3;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sc-panel-alt { background: #f5f5f3; }

.sc-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.sc-panel-title {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: #2d1f18;
  margin: 0;
}
.sc-panel-sub {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  line-height: 18px;
  color: var(--color-text-secondary-dk);
  margin: 2px 0 0;
}

/* Selector mes/any */
.sc-billing-meta { display: flex; flex-direction: column; gap: 12px; }
.sc-billing-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary-dark);
  margin: 0;
}
.sc-selector-row { display: flex; gap: 4px; }
.sc-selector-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: var(--radius-full);
  padding: 8px 8px 8px 12px;
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: #514941;
  cursor: pointer;
  height: 36px;
}
.sc-selector-btn img { width: 20px; height: 20px; }
.sc-selector-btn:hover { background: #f5f5f3; }

/* Fila info factura */
.sc-billing-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.sc-billing-info { display: flex; align-items: center; gap: 4px; }
.sc-billing-info-label { font-size: 12px; font-weight: var(--font-weight-light); color: var(--color-text-secondary-dk); }
.sc-billing-info-value { font-size: 14px; font-weight: var(--font-weight-medium); color: var(--color-text-primary-dark); }

/* Grid de dades */
.sc-data-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Card resum import */
.sc-data-card {
  flex: 1;
  background: white;
  border: 1px solid rgba(128,128,128,0.12);
  border-radius: 20px;
  padding: 14px;
  position: relative;
  box-shadow: 0 0 24px rgba(0,0,0,0.04);
  min-width: 140px;
}
.sc-data-card-highlight { background: #fff2f2; }
.sc-data-card-inner { display: flex; flex-direction: column; gap: 8px; }
.sc-data-card-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary-dark);
  margin: 0;
}
.sc-data-card-amount {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-text-primary-dark);
  margin: 0;
}
.sc-data-card-pdf {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: #9e9b95;
  text-decoration: underline;
}
.sc-data-card-pdf-brand { color: #f76a6e; font-weight: var(--font-weight-semibold); }

/* Desglossament consums */
.sc-breakdown { display: flex; flex-direction: column; gap: 16px; }
.sc-breakdown-title {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary-dark);
  margin: 0;
}

/* Card consum individual */
.sc-usage-card {
  flex: 1;
  background: white;
  border: 1px solid rgba(128,128,128,0.12);
  border-radius: 20px;
  padding: 14px;
  position: relative;
  box-shadow: 0 0 24px rgba(0,0,0,0.04);
  min-width: 180px;
  display: flex;
  flex-direction: column;
}
.sc-usage-card-inner { display: flex; flex-direction: column; gap: 8px; padding-right: 40px; }
.sc-usage-label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary-dark);
  margin: 0;
}
.sc-usage-values { display: flex; align-items: baseline; gap: 8px; }
.sc-usage-amount {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-text-primary-dark);
}
.sc-usage-unit {
  font-size: 14px;
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary-dark);
}
.sc-usage-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.sc-usage-icon img { width: 20px; height: 20px; }

/* Tabs */
.sc-tabs {
  display: inline-flex;
  background: white;
  border: 1px solid rgba(128,128,128,0.12);
  border-radius: var(--radius-full);
  padding: 1px;
  gap: 0;
}
.sc-tab {
  padding: 8px 12px;
  height: 38px;
  border-radius: var(--radius-full);
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: #514941;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.sc-tab.active {
  background: var(--color-action-primary);
  color: white;
  box-shadow: var(--shadow-elevation-2);
}
.sc-tab:hover:not(.active) { background: #f5f5f3; }

/* Cards actuacions */
.sc-cards-flex {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.sc-act-card {
  flex: 1;
  background: white;
  border: 1px solid rgba(128,128,128,0.12);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 200px;
  box-shadow: 0 0 24px rgba(0,0,0,0.04);
  height: 235px;
}
.sc-act-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.sc-tag-neutral {
  background: #f5f5f3;
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: #514941;
  line-height: 16px;
  height: 21px;
  display: inline-flex;
  align-items: center;
}
.sc-act-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sc-act-date { font-size: 14px; font-weight: var(--font-weight-light); color: #514941; margin: 0; }
.sc-act-title {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 22px;
  letter-spacing: -0.5px;
  color: var(--color-text-primary-dark);
  margin: 0;
}
.sc-act-desc { font-size: 14px; font-weight: var(--font-weight-light); line-height: 18px; color: var(--color-text-primary-dark); margin: 0; }
.sc-act-link { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.sc-act-link img { width: 20px; height: 20px; }

/* Botó ghost petit */
.sc-btn-ghost-sm {
  background: white;
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: var(--radius-full);
  padding: 8px 12px;
  height: 38px;
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: #514941;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.sc-btn-ghost-sm:hover { background: #f5f5f3; }

/* Sidebar dret — Info unitat */
.sc-unit-info-card {
  background: white;
  border: 1px solid rgba(128,128,128,0.12);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.sc-unit-header { display: flex; align-items: center; justify-content: space-between; }
.sc-unit-row { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.sc-unit-label {
  font-size: 12px;
  font-weight: var(--font-weight-light);
  color: var(--color-text-secondary-dk);
  line-height: 16px;
}
.sc-unit-value {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary-dark);
  line-height: 20px;
}
.sc-unit-value-sm {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary-dark);
  line-height: 18px;
  margin: 0;
}
.sc-unit-divider { height: 1px; background: #cfcfcc; margin: 8px 0; }
.sc-convivents { display: flex; flex-direction: column; gap: 4px; }
.sc-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: #9e9b95;
  text-decoration: underline;
  padding: 4px 0;
}
.sc-edit-link img { width: 20px; height: 20px; }


/* ============================================================
   15. NAV AMB SUBNIVELLS (El meu projecte)
   ============================================================ */

/* Ítem parent expandible */
.sc-nav-parent {
  cursor: pointer;
  background: rgba(255,242,242,0.4) !important;
  color: #d9363a !important;
  justify-content: flex-start;
}

/* Chevron al final */
.sc-nav-chevron {
  margin-left: auto;
  width: 16px !important;
  height: 16px !important;
  opacity: 0.6;
}

/* Contenidor subnivells */
.sc-nav-subitems {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 4px;
}

/* Subítem */
.sc-nav-subitem {
  font-size: 15px !important;
  padding-left: 8px !important;
}
.sc-nav-subitem.active {
  background: #fff2f2 !important;
  color: #d9363a !important;
}
.sc-nav-subitem img { opacity: 0.7; }
.sc-nav-subitem.active img { opacity: 1; }