/* ==========================================================
   RUMB - Bundled CSS (Generated automatically by assemble-html.js)
   ========================================================== */

/* --- SECTION: base.css --- */
/* ===================================================
   DESIGN TOKENS & RESET (LinkedIn Inspired)
   =================================================== */

:root {
  /* Colors */
  --li-blue: #0a66c2;
  --li-blue-hover: #004182;
  --li-blue-light: #70b5f9;
  --li-blue-faint: #f0f7ff;
  --li-blue-dark: #004182;
  
  --text-primary: rgba(0, 0, 0, 0.9);
  --text-secondary: rgba(0, 0, 0, 0.6);
  --text-muted: rgba(0, 0, 0, 0.45);
  --text-main: #24292e;
  
  --bg-body: #f3f2ef;
  --bg-surface: #ffffff;
  --bg-secondary: #f8f9fa;
  
  --border: #e0e0e0;
  --border-color: #dce6f1;
  
  --success: #057642;
  --success-faint: #e6f4ea;
  --danger: #d11124;
  --danger-faint: #fdf2f2;
  --warning: #915907;
  --warning-faint: #fff8e1;
  
  /* Layout */
  --container-width: 1128px;
  --header-height: 52px;
  --header-h: 52px; /* Alias per compatibilitat */
  --tabbar-h: 52px;
  --bg-tab: #ffffff;
  --radius-sm: 4px;

  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Transitions */
  --transition: 0.167s;
  --transition-slow: 0.3s;
  
  /* Typography */
  --font-main: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Fira Sans', Ubuntu, Oxygen, 'Oxygen Sans', Cantarell, 'Droid Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lucida Grande', Helvetica, Arial, sans-serif;
}

/* Base Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: opacity 0.5s ease;
}

body.loading {
  opacity: 0;
}

/* Splash Screen / Cortina de càrrega */
#page-curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-surface, #ffffff);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#page-curtain.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes curtainPulseLogo {
  0% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 0.85; }
}

.curtain-logo {
  width: 72px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  animation: curtainPulseLogo 1.5s ease-in-out infinite;
}

.curtain-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(10, 102, 194, 0.15);
  border-top-color: var(--li-blue, #0a66c2);
  border-radius: 50%;
  animation: curtainSpin 0.8s linear infinite;
}

@keyframes curtainSpin {
  to { transform: rotate(360deg); }
}

a {
  color: var(--li-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
}

/* Root level responsive utilities */
@media (max-width: 1128px) {
  :root {
    --container-width: 95%;
  }
}

/* --- COMMON ANIMATIONS --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Justificar text en les visualitzacions del CV en pantalla (s'aplica al contingut real del CV) */
.cv-actual-content p {
  text-align: justify;
}

/* ===================================================
   CV CUSTOMIZATION BAR & DYNAMIC FONTS/SIZES
   =================================================== */
.cv-actions-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.cv-customization-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  flex: 1 1 100%;
  margin-right: 0;
}

.cv-customization-control {
  display: flex;
  align-items: center;
  flex: 1 1 120px;
  min-width: 0;
}

.cv-ctrl-font {
  flex: 1.6 1 140px;
  min-width: 0;
}

.cv-ctrl-size {
  flex: 0.8 1 75px;
  min-width: 0;
}

.cv-ctrl-synthesis,
.cv-filter-popover-container {
  flex: 2 1 160px;
  min-width: 0;
}

/* Barra de botons d'acció del resultat (Descarrega / Copia / Imprimeix).
   Permet el salt de línia perquè en pantalles estretes els botons no
   sobreïxin per la dreta. */
.cv-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-grow: 1;
}

.cv-result-actions .secondary-btn.compact,
.cv-result-actions .primary-btn.compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
  min-width: max-content;
}

@media (max-width: 768px) {
  .cv-actions-wrapper {
    width: 100%;
  }
  .cv-customization-bar {
    width: 100%;
    margin-right: 0;
    display: flex;
    gap: 6px;
  }
  .cv-customization-control {
    flex: 1 1 auto;
  }
  .cv-customization-control:first-child {
    flex: 2 1 auto;
  }
  .cv-customization-control select {
    width: 100% !important;
  }
  .cv-result-actions {
    width: 100%;
  }
  .cv-result-actions .secondary-btn.compact,
  .cv-result-actions .primary-btn.compact {
    flex: 1 1 auto;
    justify-content: center;
    white-space: normal;
  }
  
  /* CV generation parameters */
  .cv-generation-controls {
    width: 100%;
    flex-wrap: nowrap !important;
  }
  .cv-generation-control-lang {
    flex: 1 1 auto;
  }
  .cv-generation-control-accent {
    flex: 2 1 auto;
  }
  .cv-generation-control-lang select,
  .cv-generation-control-accent select {
    width: 100% !important;
  }
  

  /* Carta de presentació i Cerca activa - Selectors mòbil */
  #elements-carta-selector {
    flex-direction: column;
    align-items: stretch;
  }
  #elements-carta-selector .chip {
    width: 100%;
    text-align: center;
  }

  /* Perfil - Selectors mòbil fluids */
  #profile-tabs-selector {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    gap: 6px !important;
  }
  #profile-tabs-selector .chip {
    flex: 1 1 auto;
    text-align: center;
  }

  /* Auditoria i Benchmark buttons */
  .comp-actions-wrapper {
    width: 100%;
  }
  .comp-actions-wrapper button {
    width: 100%;
  }
}

.cv-customization-control label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cv-customization-control select {
  width: 100% !important;
  min-width: 0;
  height: 32px;
  padding: 0 24px 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--li-blue);
  font-size: 0.82rem;
  font-weight: 600;
  background-color: var(--bg-surface, #ffffff);
  color: var(--li-blue);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  box-sizing: border-box;
}

#select-cv-adaptat-font,
#select-construeix-cv-font {
  width: 100%;
}

#select-cv-adaptat-size,
#select-construeix-cv-size {
  width: 100%;
  padding: 0 20px 0 10px;
}

.cv-customization-control select:hover {
  background-color: var(--li-blue-faint, #f0f7ff);
  border-color: var(--li-blue);
}

.cv-customization-control select:focus-visible,
.cv-customization-control select:focus {
  border-color: var(--li-blue);
  box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.15);
}

/* Àrea real del text del CV per a mides i fonts dinàmiques (Blanc i Negre exclusiu) */
.cv-actual-content {
  color: #111111 !important;
}

/* Encapçalaments i paràgrafs del CV basats en mides relatives per escalat proporcional */
.cv-actual-content h1 {
  font-size: 2.0em !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  color: #000000 !important;
}
.cv-actual-content h2 {
  font-size: 1.4em !important;
  margin-top: 18px !important;
  margin-bottom: 8px !important;
  color: #000000 !important;
  border-bottom: 1.5px solid #000000 !important;
}
.cv-actual-content h3 {
  font-size: 1.15em !important;
  margin-top: 12px !important;
  margin-bottom: 6px !important;
  color: #000000 !important;
}
.cv-actual-content p {
  font-size: 1.0em !important;
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
  text-align: justify !important;
  color: #111111 !important;
}
.cv-actual-content li {
  font-size: 1.0em !important;
  line-height: 1.55 !important;
  margin-bottom: 4px !important;
  color: #111111;
  list-style-type: disc !important;
}
.cv-actual-content li:has(.cv-synthesis-excluded) {
  color: #94a3b8 !important;
  opacity: 0.5 !important;
}
.cv-actual-content strong {
  color: #000000 !important;
  font-weight: 700 !important;
}
.cv-actual-content a {
  color: #000000 !important;
  text-decoration: underline !important;
}
.cv-actual-content ul {
  list-style-type: disc !important;
  padding-left: 1.25rem !important;
  margin-bottom: 8px !important;
}
.cv-actual-content ol {
  list-style-type: decimal !important;
  padding-left: 1.25rem !important;
  margin-bottom: 8px !important;
}

/* ===================================================
   CV HEADER & PHOTO STYLING
   =================================================== */
.cv-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}

.cv-header-container.photo-left {
  flex-direction: row !important;
}

.cv-header-container.photo-right {
  flex-direction: row !important;
}

.cv-header-text {
  flex: 1;
  min-width: 0;
}

.cv-header-photo {
  flex-shrink: 0;
}

.cv-photo-img {
  width: 85px;
  height: 85px;
  object-fit: cover;
  display: block;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.cv-photo-img.cv-photo-circle {
  border-radius: 50% !important;
}

.cv-photo-img.cv-photo-square {
  border-radius: 10px !important;
}

#select-cv-adaptat-photo-pos,
#select-construeix-cv-photo-pos {
  width: 120px;
}

#select-cv-adaptat-photo-shape,
#select-construeix-cv-photo-shape {
  width: 95px;
}

#select-cv-adaptat-photo-source,
#select-construeix-cv-photo-source {
  width: 110px;
}



/* --- SECTION: layout.css --- */
/* ===================================================
   LAYOUT & SHELL
   =================================================== */

/* AUTH VISIBILITY CONTROL */
.app-header,
main,
#app-footer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  pointer-events: none;
}

body.auth-verified .app-header,
body.auth-verified main,
body.auth-verified #app-footer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.app-header {
  height: var(--header-height);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
}

.header-inner {
  width: var(--container-width);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}


.logo-text {
  display: flex;
  flex-direction: column;
}

.app-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--li-blue);
  line-height: 1;
}

.app-subtitle {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.header-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #057642;
  /* Actiu */
}

/* Coloracions del badge i punt de la capçalera segons estat */
.badge-dot.green {
  background-color: #057642;
}
.badge-dot.amber {
  background-color: #d97706;
}
.badge-dot.red {
  background-color: #dc3545;
}
.badge-dot.blue {
  background-color: #0073b1;
  animation: pulse-dot 1.5s infinite ease-in-out;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.header-badge.green {
  background-color: rgba(5, 118, 66, 0.05);
  border-color: rgba(5, 118, 66, 0.2);
  color: #057642;
}
.header-badge.amber {
  background-color: rgba(217, 119, 6, 0.05);
  border-color: rgba(217, 119, 6, 0.2);
  color: #d97706;
}
.header-badge.red {
  background-color: rgba(220, 53, 69, 0.05);
  border-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}
.header-badge.blue {
  background-color: rgba(0, 115, 177, 0.05);
  border-color: rgba(0, 115, 177, 0.2);
  color: #0073b1;
}

/* Overrides per al mode fosc (dark-mode) */
body.dark-mode .badge-dot.green {
  background-color: #10b981;
}
body.dark-mode .badge-dot.amber {
  background-color: #f59e0b;
}
body.dark-mode .badge-dot.red {
  background-color: #ef4444;
}
body.dark-mode .badge-dot.blue {
  background-color: #38bdf8;
}

body.dark-mode .header-badge.green {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
body.dark-mode .header-badge.amber {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
body.dark-mode .header-badge.red {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
body.dark-mode .header-badge.blue {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}


.tab-bar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;
  z-index: 1900;
  height: var(--tabbar-h);
  background: var(--bg-tab);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  padding: 0 16px;
  max-width: 100vw;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  /* Efecte de desvaniment de vores (fade mask) */
  transition: mask-image 0.3s ease, -webkit-mask-image 0.3s ease;
}

.tab-bar::-webkit-scrollbar {
  display: none;
}



.tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
  outline: none;
  flex-shrink: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  color: var(--li-blue);
  font-weight: 700;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--li-blue);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-slow);
}

.tab-btn.active .tab-indicator {
  transform: scaleX(1);
}

.tab-icon {
  display: flex;
  align-items: center;
  opacity: 0.8;
}

.tab-btn.tab-locked {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.9);
}

.tab-btn.tab-locked:hover {
  background: transparent;
  color: var(--text-secondary);
}

.tab-btn.tab-locked .tab-label::after {
  content: '🔒';
  font-size: 0.65rem;
  margin-left: 6px;
  vertical-align: middle;
  filter: none;
}

.tab-btn.tab-readonly .tab-label::after {
  content: '🔒';
  font-size: 0.65rem;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.8;
}

.permission-locked {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  filter: grayscale(0.5);
  position: relative;
}

.permission-readonly {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  filter: grayscale(0.6);
  position: relative;
}

/* TAB DROPDOWN (OVERFLOW) */
.tab-dropdown {
  position: relative;
  display: flex;
  /* Sempre visible en escriptori, la lògica d'overflow es regeix per JS */
  align-items: stretch;
  margin-left: auto;
  /* Per empènyer-ho a la dreta si cal */
}

/* Alineació a la dreta de la pestanya CV i Admin per defecte en pantalles grans */
#tab-el-meu-cv {
  margin-left: 0;
}

#tab-dropdown-more[style*="display: none"] + #tab-el-meu-cv,
#tab-dropdown-more[style*="display: none"] ~ #tab-el-meu-cv {
  margin-left: auto !important;
}

.tab-dropdown-content {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  min-width: 250px;
  z-index: 2100;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
}

.tab-dropdown.open .tab-dropdown-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tab-dropdown-content .tab-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 0;
  justify-content: flex-start;
}

.tab-dropdown-content .tab-btn:hover {
  background: var(--bg-secondary);
}

.tab-dropdown-content .tab-indicator {
  display: none;
  /* No volem indicador blau dins del menú vertical */
}

/* Visibilitat de pestanyes per defecte (Pantalles grans) */
.tab-dropdown-only {
  display: none;
}





/* MAIN CONTENT */
.main-content {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--tabbar-h) + 24px) 16px 20px;
  min-height: calc(100vh - var(--header-h) - var(--tabbar-h));
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  animation: panel-in var(--transition-slow) ease both;
}

.col-span-2 {
  grid-column: span 2;
}

.grid-2-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cv-next-steps-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: stretch;
  width: 100%;
  margin-top: 14px;
}

.cv-next-steps-buttons .next-step-card-btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 10px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .cv-next-steps-buttons {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }
}



/* SECTION TITLE */
.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 16px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-left: 16px;
}

/* FORMS */
.form-group {
  margin-bottom: 20px;
}

.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 32px 16px;
  text-align: center;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
  position: relative;
  background: white;
}

.drop-zone:hover,
.drop-zone.drag-over {
  background: var(--li-blue-faint);
  border-color: var(--li-blue);
}

.drop-zone.missing-file {
  border-color: var(--danger);
  background-color: var(--danger-faint);
}

.drop-zone-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dz-icon {
  width: 24px;
  height: 24px;
  color: var(--li-blue);
}

.drop-zone p {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.file-status {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  border: 1px solid var(--border);
}

.file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.filename {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--li-blue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* FOOTER */
#app-footer {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  margin-top: 20px;
}

#app-footer a {
  color: var(--li-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition);
}

#app-footer a:hover {
  color: var(--li-blue-dark);
  text-decoration: underline;
}

/* Footer Signature (Mobile Only) */
#footer-signature {
  font-size: 0.85rem;
  color: var(--li-blue);
  margin-bottom: 12px;
  font-weight: 500;
}

#footer-signature strong {
  color: var(--li-blue-dark);
}

@media (max-width: 1200px) {
  .tab-bar {
    padding: 0 8px;
  }

  .tab-btn {
    padding: 0 10px;
    font-size: 0.78rem;
    gap: 4px;
  }

  .tab-label {
    display: inline-block;
  }
}

@media (max-width: 800px) {
  .app-subtitle {
    display: none;
  }

  .tab-label {
    font-size: 0.75rem;
  }
}

@media (max-width: 500px) {
  .tab-label {
    display: none;
  }
}

@media (max-width: 768px) {

  .panel-grid {
    grid-template-columns: 1fr;
  }

  .col-span-2 {
    grid-column: span 1;
  }

  .grid-2-cols {
    grid-template-columns: 1fr;
  }

  .cv-next-steps-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .header-badge {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    justify-content: flex-start;
    box-sizing: border-box;
    z-index: 1999;
    padding: 0 16px;
  }

  .tab-bar {
    top: calc(var(--header-h) + 20px) !important;
  }



  .main-content {
    padding-top: calc(var(--header-h) + var(--tabbar-h) + 20px + 24px) !important;
  }
}



@media (max-width: 600px) {

  .app-title,
  .app-subtitle {
    display: none;
  }

  .header-inner {
    padding: 0 12px;
  }



  /* Reposició de la barra a sota */
  .tab-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: 64px !important;
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: none !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    z-index: 2500 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 8px !important;
    margin: 0 !important;
    overflow: visible !important;
    /* Perquè es vegi el desplegable cap a dalt */
  }

  /* Ocultar Admin a la barra inferior */
  #tab-admin {
    display: none !important;
  }

  /* Opcions de pestanyes com a botons mòbils verticals */
  .tab-bar .tab-btn {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 6px 2px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
  }

  .tab-bar .tab-btn .tab-icon {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
  }

  .tab-bar .tab-btn .tab-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Forçar que es vegi el label a sota */
  .tab-bar .tab-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-align: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    opacity: 0.8 !important;
  }

  /* Estat actiu */
  .tab-bar .tab-btn.active {
    color: var(--li-blue) !important;
    background: transparent !important;
  }

  .tab-bar .tab-btn.active .tab-label {
    font-weight: 600 !important;
    opacity: 1 !important;
  }

  .tab-bar .tab-btn.active .tab-icon {
    transform: scale(1.08) !important;
  }

  /* Desactivar indicador horitzontal clàssic */
  .tab-bar .tab-indicator {
    display: none !important;
  }

  /* AJUST DEL DESPLEGABLE CAP A DALT */
  .tab-dropdown {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
  }

  .tab-dropdown .tab-more-btn {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .tab-dropdown-content {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    /* 8px de marge superior per sobre de la barra */
    right: 0 !important;
    left: auto !important;
    min-width: 200px !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--border) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transform: translateY(10px) !important;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important;
  }

  .tab-dropdown.open .tab-dropdown-content {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .tab-dropdown-content .tab-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    height: auto !important;
    font-size: 0.88rem !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-light) !important;
  }

  .tab-dropdown-content .tab-btn:last-child {
    border-bottom: none !important;
  }

  .tab-dropdown-content .tab-btn .tab-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .tab-dropdown-content .tab-btn .tab-label {
    font-size: 0.88rem !important;
    text-align: left !important;
    opacity: 1 !important;
  }

  /* Ajust del contingut principal per no quedar cobert per la barra inferior i la senyal d'estat a dalt */
  .main-content {
    padding-top: calc(var(--header-h) + 20px + 16px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 20px !important;
    min-height: calc(100vh - var(--header-h)) !important;
  }

  /* Ajust del footer per no quedar cobert per la barra inferior */
  #app-footer {
    padding-bottom: 96px !important;
  }
}

/* Home Dashboard Disclaimer */
.home-disclaimer {
  margin-top: 50px;
  padding: 30px 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  width: 100%;
}

.home-disclaimer p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  max-width: 650px;
  margin: 0 auto;
}

/* UTILITIES */
.mt-1 {
  margin-top: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mt-4 {
  margin-top: 24px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.mb-4 {
  margin-bottom: 24px !important;
}

.w-full {
  width: 100% !important;
}

/* Home Presentation */
.home-presentation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 24px 32px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.home-presentation-logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--li-blue-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.home-presentation-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-presentation-title {
  font-size: 1.6rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  font-weight: 700;
}

.home-presentation-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Mobile Alignment */
@media (max-width: 768px) {
  .home-presentation {
    align-items: flex-start;
  }
}

/* --- SECTION: components.css --- */
/* ===================================================
   REUSABLE UI COMPONENTS
   (panels, hero, settings cards, expandable content,
    mobile tab optimizations)

   NOTA: aquest fitxer s'ha subdividit. Vegeu també:
     forms.css     — formularis, drop zone, tag input, selector d'idioma
     buttons.css   — botons, chips & tags, badges
     feedback.css  — alerts, progress, spinners, skeletons, tooltip, toasts
     modals.css    — modals de monetització/support, targetes de paquets, ATS
   =================================================== */

/* TAB PANELS */
.tab-panel {
  animation: panel-in var(--transition-slow) ease both;
}

.tab-panel[hidden] {
  display: none;
}


/* PANEL HERO */
.panel-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

@keyframes heroHighlightGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0), var(--shadow-sm);
    border-color: var(--border);
    transform: translateY(0);
  }
  20% {
    box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.35), 0 8px 24px rgba(220, 38, 38, 0.2);
    border-color: #dc2626;
    transform: translateY(-2px);
  }
  40% {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25), 0 6px 18px rgba(220, 38, 38, 0.15);
    border-color: #dc2626;
    transform: translateY(-1px);
  }
  70% {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12), 0 4px 12px rgba(220, 38, 38, 0.08);
    border-color: #dc2626;
    transform: translateY(0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0), var(--shadow-sm);
    border-color: var(--border);
    transform: translateY(0);
  }
}

.hero-highlight-pulse {
  animation: heroHighlightGlow 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes elementHighlightGlow {
  0% {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
  20% {
    outline: 2px solid #dc2626;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.4), 0 4px 16px rgba(220, 38, 38, 0.25);
  }
  40% {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.25), 0 3px 10px rgba(220, 38, 38, 0.15);
  }
  70% {
    outline: 2px solid rgba(220, 38, 38, 0.5);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
  }
  100% {
    outline: 2px solid transparent;
    outline-offset: 0px;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.element-highlight-pulse {
  animation: elementHighlightGlow 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.panel-hero-icon {
  width: 64px;
  height: 64px;
  background-color: var(--li-blue-faint);
  color: var(--li-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panel-hero-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}


.panel-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.panel-description {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* SETTINGS CARDS */
.settings-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.settings-header {
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.settings-header > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* EXPANDABLE CONTENT */
.expandable-container {
  position: relative;
  width: 100%;
}

.expandable-content {
  position: relative;
  max-height: 140px;
  overflow: hidden !important;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.expandable-content.expanded {
  max-height: 5000px !important;
}

.expandable-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, #f8f9fa);
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.expand-toggle-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  color: var(--li-blue);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* ===================================================
   MOBILE OPTIMIZATIONS (RUMB TABS)
   =================================================== */

/* Base style for title area to align chevron */
/* Base style for title area to align chevron */
.settings-title-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

/* Collapsible panels logic */
.mobile-collapsible {
  transition: max-height 0.4s ease;
  overflow: hidden;
  position: relative;
}

.mobile-collapsible .settings-header {
  cursor: pointer;
  /* Prevent text selection when tapping */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.card-chevron {
  transition: transform 0.3s ease;
  color: var(--li-blue);
}

.mobile-collapsible.collapsed .card-chevron {
  transform: rotate(0deg);
}
.mobile-collapsible:not(.collapsed) .card-chevron {
  transform: rotate(180deg);
}

/* Estils gràfics per a l'àrea col·lapsable (gradient i botons) */
.mobile-collapsible-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  pointer-events: none; /* let clicks pass through gradient */
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Gradient ONLY when collapsed */
.mobile-collapsible.collapsed .mobile-collapsible-footer {
  background: linear-gradient(to bottom, transparent 0%, var(--bg-surface, #ffffff) 60%, var(--bg-surface, #ffffff) 100%);
}

/* When expanded, no gradient */
.mobile-collapsible:not(.collapsed) .mobile-collapsible-footer {
  background: transparent;
  height: 48px;
}

.mobile-collapsible-btn {
  pointer-events: auto; /* make button clickable */
  background: var(--bg-surface, #ffffff);
  color: var(--li-blue, #0a66c2);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  z-index: 2;
}

.dark-mode .mobile-collapsible-btn {
  background: var(--bg-surface-dark, #1e293b);
  border-color: var(--border-dark, rgba(255,255,255,0.1));
}

/* Toggle button text visibility via CSS */
.mobile-collapsible.collapsed .btn-collapse-text { display: none; }
.mobile-collapsible.collapsed .btn-expand-text { display: inline; }

.mobile-collapsible:not(.collapsed) .btn-collapse-text { display: inline; }
.mobile-collapsible:not(.collapsed) .btn-expand-text { display: none; }

/* Alert Collapsible - Collapses on ALL resolutions */
.alert-mobile-collapsible {
  cursor: pointer;
}

.alert-mobile-collapsible .card-chevron {
  display: block !important;
}

.alert-mobile-collapsible.collapsed {
  max-height: 48px !important;
  padding-bottom: 12px !important;
}

@media (max-width: 480px) {
  .alert-mobile-collapsible.collapsed {
    max-height: 72px !important;
  }
}

.alert-mobile-collapsible.collapsed .settings-header {
  margin-bottom: 0 !important;
}

/* 2. Mobile-Only Collapsible */
@media (max-width: 768px) {
  .mobile-collapsible:not(.alert-mobile-collapsible) {
    padding-bottom: 48px !important;
  }
  .mobile-collapsible:not(.alert-mobile-collapsible).collapsed {
    max-height: 140px;
    padding-bottom: 0 !important;
  }
}

@media (min-width: 769px) {
  .mobile-collapsible:not(.alert-mobile-collapsible) .card-chevron {
    display: none !important;
  }
  .mobile-collapsible:not(.alert-mobile-collapsible) .mobile-collapsible-footer {
    display: none !important;
  }
  .mobile-collapsible:not(.alert-mobile-collapsible).collapsed {
    max-height: none !important;
  }
}

@media (max-width: 768px) {
  /* Hero components size reduction */
  .panel-hero {
    padding: 20px;
    gap: 16px;
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }
  .panel-hero-icon {
    width: 48px;
    height: 48px;
  }
  .panel-hero-icon img {
    width: 32px;
    height: 32px;
  }
  .panel-hero-icon svg {
    width: 24px;
    height: 24px;
  }
  .panel-title {
    font-size: 1.25rem;
  }
  #home-welcome-title {
    font-size: 1.28rem !important; /* 1.6rem × 0.8 */
  }
  .panel-description {
    font-size: 0.9rem;
  }

  /* Global font reduction 10% for marked areas */
  .result-panel {
    font-size: 90%;
  }

  .results-action-buttons {
    width: 100%;
  }
  .results-action-buttons > button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* SIMULATOR RESPONSES GRID */
.sim-responses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .sim-responses-grid {
    grid-template-columns: 1fr;
  }
}

/* PROFILE CONTEXT BANNER (HANGING PILL TAB DOCKED FLUSH RIGHT) */
.panel-hero:has(+ .profile-context-banner),
.panel-hero.has-context-banner {
  margin-bottom: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.profile-context-banner {
  position: relative;
  margin-bottom: 24px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.profile-context-header {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e0e0e0);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 6px 16px;
  margin-top: -1px;
  margin-left: auto;
  margin-right: 0; /* FLUSH RIGHT with Hero right edge */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  max-width: 100%;
}

.profile-context-header:hover {
  background: var(--li-blue-faint, #f0f7ff);
  border-color: var(--li-blue-light, #70b5f9);
}

.profile-context-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.profile-context-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary, rgba(0, 0, 0, 0.9));
  white-space: nowrap;
}

.profile-context-badge {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--li-blue, #0a66c2);
  background: var(--li-blue-faint, #f0f7ff);
  border: 1px solid rgba(10, 102, 194, 0.15);
  padding: 2px 10px;
  border-radius: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.profile-context-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-goto-cv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--li-blue, #0a66c2);
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--li-blue-light, #70b5f9);
  border-radius: var(--radius-full, 9999px);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-goto-cv:hover {
  background: var(--li-blue, #0a66c2);
  color: #ffffff;
}

.btn-toggle-banner {
  background: transparent;
  border: none;
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.btn-toggle-banner:hover {
  color: var(--text-primary, rgba(0, 0, 0, 0.9));
}

.btn-toggle-banner .card-chevron {
  transition: transform 0.3s ease;
  font-size: 0.85rem;
}

.profile-context-banner.expanded .btn-toggle-banner .card-chevron {
  transform: rotate(180deg);
}

.profile-context-banner.expanded .btn-expand-text { display: none !important; }
.profile-context-banner.expanded .btn-collapse-text { display: inline !important; }

.profile-context-banner:not(.expanded) .btn-expand-text { display: inline !important; }
.profile-context-banner:not(.expanded) .btn-collapse-text { display: none !important; }

.profile-context-drawer {
  display: none;
  align-self: stretch;
  margin-top: 12px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--li-blue, #0a66c2);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.04);
  position: relative;
}

.profile-context-banner.expanded .profile-context-drawer {
  display: block;
}

/* Fletxeta de connexió visual entre la pestanya acoblada i el contenidor desplegable */
.profile-context-banner.expanded .profile-context-drawer::before {
  content: '';
  position: absolute;
  top: -11px;
  right: 18px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--li-blue, #0a66c2);
  z-index: 5;
}

.profile-context-banner.expanded .profile-context-drawer::after {
  content: '';
  position: absolute;
  top: -8px;
  right: 19px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff;
  z-index: 6;
}

@media (max-width: 640px) {
  .profile-context-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 
      "icon title actions"
      "badge badge badge";
    row-gap: 6px;
    column-gap: 8px;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
    max-width: 100%;
    padding: 8px 12px;
  }
  .profile-context-info {
    display: contents;
  }
  .profile-context-info > svg {
    grid-area: icon;
  }
  .profile-context-title {
    grid-area: title;
  }
  .profile-context-actions {
    grid-area: actions;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .profile-context-badge {
    grid-area: badge;
    width: 100%;
    max-width: 100%;
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
    border-radius: 8px;
    padding: 3px 8px;
  }
}

/* ─── Diagnòstic Executiu Anàlisi Salarial ─── */
.salarial-diagnostic-box {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.salarial-diagnostic-header-row {
  display: contents;
}

.salarial-diagnostic-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-size: 36px !important;
  color: var(--li-blue);
  align-self: start;
  margin-top: 2px;
}

.salarial-diagnostic-author {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.salarial-diagnostic-text {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
  white-space: pre-line;
}

@media (max-width: 768px) {
  #salarial-diagnostic-card .settings-content {
    padding: 14px;
  }
  .salarial-diagnostic-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }
  .salarial-diagnostic-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .salarial-diagnostic-icon {
    font-size: 24px !important;
    margin-top: 0;
  }
  .salarial-diagnostic-author {
    font-size: 0.7rem;
  }
  .salarial-diagnostic-text {
    width: 100%;
    font-size: 0.85rem;
    line-height: 1.5;
  }
}

/* ===================================================
   KPI DUAL VIEW (Anàlisi Salarial)
   =================================================== */
.kpi-widget-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.kpi-widget-card:hover {
  border-color: #cbd5e1;
}

.kpi-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.kpi-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.kpi-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.kpi-summary-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.kpi-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--li-blue);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  margin-left: auto;
}

.kpi-toggle-btn:hover {
  background: var(--li-blue-faint);
  border-color: var(--li-blue);
}

.kpi-detail-content {
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease;
  max-height: 3500px;
  opacity: 1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.kpi-widget-card.is-collapsed .kpi-detail-content {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  pointer-events: none;
  visibility: hidden;
}

.kpi-global-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.kpi-global-toggle-btn:hover {
  background: var(--li-blue-faint);
  color: var(--li-blue);
  border-color: var(--li-blue);
}

@media (max-width: 576px) {
  .kpi-header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ─── STATUS RIBBON (Diagnosi ràpida Anàlisi Salarial) ─── */
.salarial-status-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  margin-bottom: 20px;
  align-items: center;
}

.salarial-ribbon-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

.salarial-ribbon-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.8rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid var(--border, #cbd5e1);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-primary, #334155);
  font-family: inherit;
  outline: none;
}

.salarial-ribbon-pill:hover {
  border-color: var(--li-blue, #0a66c2);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(10, 102, 194, 0.12);
}

.salarial-ribbon-pill.green-accent {
  border-left: 4px solid #22c55e;
}
.salarial-ribbon-pill.amber-accent {
  border-left: 4px solid #f59e0b;
  background: #fffdf5;
}
.salarial-ribbon-pill.red-accent {
  border-left: 4px solid #ef4444;
  background: #fef2f2;
}

.salarial-ribbon-pill .ribbon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.salarial-ribbon-pill .ribbon-dot.green { background: #22c55e; }
.salarial-ribbon-pill .ribbon-dot.amber { background: #f59e0b; }
.salarial-ribbon-pill .ribbon-dot.red { background: #ef4444; }

@keyframes kpiHighlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(10, 102, 194, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(10, 102, 194, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(10, 102, 194, 0); }
}

.kpi-highlight-pulse {
  animation: kpiHighlightPulse 1.2s ease-out;
}





/* --- SECTION: forms.css --- */
/* ===================================================
   FORMS & INPUTS
   (form elements, drop zone, tag input, language selector)
   =================================================== */

/* FORM ELEMENTS */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  pointer-events: none;
}

.input-with-icon input,
.input-with-icon select {
  padding-left: 32px;
  width: 100%;
}

.form-input,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="time"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background-color: var(--bg-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  color: var(--text-primary);
  outline: none;
}

.form-input:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--li-blue);
  box-shadow: 0 0 0 1px var(--li-blue);
}

.input-error {
  border-color: var(--danger) !important;
  background-color: var(--danger-faint) !important;
}

.required-mark {
  color: var(--danger);
  margin-left: 4px;
  font-weight: bold;
}


.input-hint {
  font-size: 0.725rem;
  color: var(--text-secondary);
  margin-top: 4px;
}


.code-textarea {
  width: 100%;
  min-height: 350px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #f8f9fa;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #24292e;
  resize: vertical;
  outline: none;
}

.code-textarea:focus {
  border-color: var(--li-blue);
  background: white;
  box-shadow: 0 0 0 1px var(--li-blue);
}

.textarea-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 16px;
}

/* DROP ZONE (PDF) */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 32px 16px;
  text-align: center;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
  position: relative;
}

/* Versió compacta per a "El meu CV" (secció Perfil professional, on l'espai vertical és escàs) */
#drop-zone-cv {
  padding: 16px;
}

.drop-zone:hover,
.drop-zone.drag-over {
  background: var(--li-blue-faint);
  border-color: var(--li-blue);
}

.drop-zone-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dz-icon {
  width: 24px;
  height: 24px;
  color: var(--li-blue);
}

.file-status {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  border: 1px solid var(--border);
}

.file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.filename {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--li-blue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}

.action-btn:hover {
  background: var(--li-blue-faint);
  color: var(--li-blue);
  border-color: var(--li-blue);
}

/* TAG INPUT */
.tag-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  min-height: 42px;
  transition: border-color var(--transition);
}

.tag-input-wrapper:focus-within {
  border-color: var(--li-blue);
  box-shadow: 0 0 0 1px var(--li-blue-light);
}

.tag-remove {
  cursor: pointer;
  display: inline-flex;
  opacity: 0.6;
}

.tag-remove:hover {
  opacity: 1;
}

.tag-input-wrapper input {
  border: none !important;
  box-shadow: none !important;
  height: 28px;
  padding: 0 4px;
  flex: 1;
  min-width: 80px;
  background: transparent;
}

.tag-input-wrapper.no-go .tag {
  background: var(--danger-faint);
  color: var(--danger);
}

.tag-input-wrapper.core .tag {
  background: var(--success-faint);
  color: var(--success);
}

/* =========================================================
   CUSTOM LANGUAGE SELECTOR (profile modal)
   ========================================================= */

.lang-custom-select {
  position: relative;
  width: 100%;
  user-select: none;
  z-index: 10;
}

.lang-custom-select.open,
.lang-custom-select:focus-within {
  z-index: 2000;
}

.lang-custom-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: white;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lang-custom-selected:hover {
  border-color: var(--li-blue);
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.1);
}

.lang-custom-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  z-index: 2000;
  overflow: hidden;
}

/* Elevació de z-index del contenidor per evitar solapaments amb mapes Leaflet o altres controls */
.form-group:has(.lang-custom-options.open),
.form-group:has(.lang-custom-select.open),
.form-group:has(.esco-suggestions-list:not([style*="display: none"])) {
  position: relative;
  z-index: 2000;
}

.lang-custom-select.open-upward .lang-custom-options {
  top: auto;
  bottom: calc(100% + 4px);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12);
}

.lang-custom-options.open {
  display: block;
}

.lang-custom-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.lang-custom-option:hover {
  background: var(--bg-hover, #f3f6f9);
}

.lang-custom-option.selected {
  background: var(--li-blue-ultralight, #e8f0fe);
  font-weight: 600;
}

/* Franja de bandera (inline, 6px × 20px) */
.lang-flag-strip {
  display: inline-block;
  width: 6px;
  min-width: 6px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Català – Senyera (9 franges: 5 grogues + 4 vermelles) */
.lang-flag-strip.flag-ca-strip {
  background: linear-gradient(to bottom,
    #ffc72c 0%,    #ffc72c 11.11%,
    #c60b1e 11.11%,#c60b1e 22.22%,
    #ffc72c 22.22%,#ffc72c 33.33%,
    #c60b1e 33.33%,#c60b1e 44.44%,
    #ffc72c 44.44%,#ffc72c 55.55%,
    #c60b1e 55.55%,#c60b1e 66.66%,
    #ffc72c 66.66%,#ffc72c 77.77%,
    #c60b1e 77.77%,#c60b1e 88.88%,
    #ffc72c 88.88%,#ffc72c 100%
  );
}

/* Espanyol – Vermell, Groc, Vermell (1:2:1) */
.lang-flag-strip.flag-es-strip {
  background: linear-gradient(to bottom,
    #c60b1e 25%, #ffc72c 25%, #ffc72c 75%, #c60b1e 75%
  );
}

/* Regne Unit – Blau, Blanc, Vermell, Blanc, Blau */
.lang-flag-strip.flag-uk-strip {
  background: linear-gradient(to bottom,
    #012169 0%,  #012169 30%,
    #eeeeee 30%, #eeeeee 35%,
    #C8102E 35%, #C8102E 65%,
    #eeeeee 65%, #eeeeee 70%,
    #012169 70%, #012169 100%
  );
}

/* Italià – Verd, Blanc, Vermell (vertical stripes, horizontal gradient) */
.lang-flag-strip.flag-it-strip {
  background: linear-gradient(to right,
    #009246 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ce2b37 66.66%
  );
}

/* Dark mode adaptations */
.dark-mode .lang-custom-selected,
.dark-mode .lang-custom-options {
  background: var(--bg-card-dark, #1e293b);
  border-color: var(--border-dark, rgba(255,255,255,0.12));
  color: var(--text-primary-dark, #e2e8f0);
}

.dark-mode .lang-custom-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark-mode .lang-custom-option.selected {
  background: rgba(10, 102, 194, 0.25);
}

/* Country selector inside .input-with-icon: el globus SVG ocupa 32px esquerra */
.input-with-icon .lang-custom-select {
  width: 100%;
}
.input-with-icon .lang-custom-selected {
  padding-left: 32px;
}

/* Country dropdown: llista llarga → scroll */
.country-custom-options {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.country-custom-options::-webkit-scrollbar {
  width: 4px;
}
.country-custom-options::-webkit-scrollbar-track {
  background: transparent;
}
.country-custom-options::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* LinkedIn Autofill balloon */
.autofill-balloon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
  margin-top: 6px;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  animation: rumbBounceIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.autofill-balloon::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #bfdbfe transparent;
}

@keyframes rumbBounceIn {
  0% {
    transform: translateY(5px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* --- SECTION: buttons.css --- */
/* ===================================================
   BUTTONS, CHIPS & BADGES
   =================================================== */

/* BUTTONS */
.primary-btn {
  background-color: var(--li-blue);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  padding: 0 24px;
  height: 40px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.primary-btn:hover {
  background-color: var(--li-blue-hover);
}

.primary-btn:disabled {
  background-color: var(--border);
  cursor: not-allowed;
}

.primary-btn.compact {
  padding: 4px 16px;
  height: 28px;
  font-size: 0.75rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.primary-btn.btn-prominent {
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  height: auto;
}

.secondary-btn {
  background: white;
  border: 1px solid var(--li-blue);
  color: var(--li-blue);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.secondary-btn:hover {
  background: var(--li-blue-faint);
}

.secondary-btn.compact {
  padding: 4px 12px;
  height: 28px;
  font-size: 0.75rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.secondary-btn.success {
  color: #28a745;
  border-color: #28a745;
  background-color: #f0fff4;
}

.secondary-btn.design-done {
  color: #dc2626;
  border-color: #fca5a5;
  background-color: #fef2f2;
}

.danger-btn {
  background-color: #dc2626 !important;
  color: white !important;
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color var(--transition);
}

.danger-btn:hover {
  background-color: #b91c1c !important;
}

.success-btn {
  background-color: #16a34a !important;
  color: white !important;
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color var(--transition);
}

.success-btn:hover {
  background-color: #15803d !important;
}

/* CHIPS & TAGS */
.chip-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.chip.active {
  background: var(--li-blue);
  color: #fff;
  border-color: var(--li-blue);
}

.chip.danger {
  background-color: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

.chip.danger:hover {
  background-color: #fecaca;
  color: #b91c1c;
}

.chip.danger.active {
  background-color: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.chip.chip-control {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border-color: #86efac !important;
}

.chip.chip-control:hover {
  background-color: #bbf7d0 !important;
  color: #14532d !important;
  border-color: #4ade80 !important;
}

.chip.chip-control.active {
  background-color: #16a34a !important;
  color: #ffffff !important;
  border-color: #15803d !important;
}

body.dark-mode .chip.chip-control {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

body.dark-mode .chip.chip-control:hover {
  background-color: rgba(34, 197, 94, 0.25) !important;
  color: #bbf7d0 !important;
}

body.dark-mode .chip.chip-control.active {
  background-color: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

.chip.chip-billing {
  background-color: #fef9c3 !important;
  color: #854d0e !important;
  border-color: #fde047 !important;
}

.chip.chip-billing:hover {
  background-color: #fef08a !important;
  color: #713f12 !important;
  border-color: #facc15 !important;
}

.chip.chip-billing.active {
  background-color: #ca8a04 !important;
  color: #ffffff !important;
  border-color: #a16207 !important;
}

body.dark-mode .chip.chip-billing {
  background-color: rgba(234, 179, 8, 0.15) !important;
  color: #fde047 !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}

body.dark-mode .chip.chip-billing:hover {
  background-color: rgba(234, 179, 8, 0.25) !important;
  color: #fef08a !important;
}

body.dark-mode .chip.chip-billing.active {
  background-color: #ca8a04 !important;
  color: #ffffff !important;
  border-color: #ca8a04 !important;
}

@media (max-width: 768px) {
  #admin-mode-selector {
    gap: 6px;
  }
  #admin-mode-selector .chip {
    flex: 1 1 auto;
    text-align: center;
  }
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--li-blue-faint);
  color: var(--li-blue);
}

/* CREDIT BADGES */
.credit-badge {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #856404;
  background: #fff3cd;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid #ffeeba;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  pointer-events: none;
}

.credit-badge.outside {
  position: relative;
  bottom: auto;
  right: auto;
  margin-left: 0;
  font-size: 0.75rem;
  padding: 3px 6px 3px 0;
  border-radius: 6px;
  pointer-events: auto; /* Permetre veure el tooltip si n'hi ha */
}

/* PREMIUM BADGE (only premium) - per a botons amb data-permission bloquejats per pla Lite */
.premium-badge {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #5b21b6;
  background: #ede9fe;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid #c4b5fd;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* ===================================================
   NEXT STEP ACTION CARDS (Square / Tile Action Buttons)
   =================================================== */
.next-step-card-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 18px 12px;
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  position: relative;
  border: 1.5px solid transparent;
  color: #ffffff;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%; /* Garanteix alçada uniforme en CSS Grid */
}

.next-step-card-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.next-step-card-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.next-step-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transition: transform 0.2s ease, background 0.2s ease;
}

.next-step-card-icon svg,
.next-step-card-btn svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.next-step-card-btn:hover .next-step-card-icon {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.25);
}

.next-step-card-label {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  display: block;
  color: #ffffff;
}

/* Paletes de color sòlides (Proposta 3A) */
.next-step-card-btn.card-neutral {
  background: linear-gradient(135deg, #475569, #334155);
  border-color: #334155;
}
.next-step-card-btn.card-neutral:hover {
  background: linear-gradient(135deg, #334155, #1e293b);
  border-color: #1e293b;
  box-shadow: 0 8px 20px rgba(51, 65, 85, 0.25);
}

.next-step-card-btn.card-green {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #15803d;
}
.next-step-card-btn.card-green:hover {
  background: linear-gradient(135deg, #15803d, #166534);
  border-color: #166534;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.28);
}

.next-step-card-btn.card-blue {
  background: linear-gradient(135deg, #0a66c2, #004182);
  border-color: #004182;
}
.next-step-card-btn.card-blue:hover {
  background: linear-gradient(135deg, #004182, #002b55);
  border-color: #002b55;
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.32);
}

.next-step-card-btn.card-amber {
  background: linear-gradient(135deg, #d97706, #b45309);
  border-color: #b45309;
}
.next-step-card-btn.card-amber:hover {
  background: linear-gradient(135deg, #b45309, #92400e);
  border-color: #92400e;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3);
}

.next-step-card-btn.card-orange {
  background: linear-gradient(135deg, #ea580c, #c2410c);
  border-color: #c2410c;
}
.next-step-card-btn.card-orange:hover {
  background: linear-gradient(135deg, #c2410c, #9a3412);
  border-color: #9a3412;
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.3);
}

.next-step-card-btn.card-teal {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border-color: #0f766e;
}
.next-step-card-btn.card-teal:hover {
  background: linear-gradient(135deg, #0f766e, #115e59);
  border-color: #115e59;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
}

.next-step-card-btn.card-indigo {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #6d28d9;
}
.next-step-card-btn.card-indigo:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
  border-color: #5b21b6;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.32);
}

@media (max-width: 640px) {
  .next-step-card-btn {
    padding: 16px 10px;
    min-height: 125px;
  }
  .next-step-card-icon {
    width: 38px;
    height: 38px;
  }
  .next-step-card-label {
    font-size: 0.82rem;
  }
}

/* Botó destacat d'IA / Assistent (Lila) */
.btn-ai-purple {
  background: #7c3aed !important;
  color: #ffffff !important;
  border: 1px solid #6d28d9 !important;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 5px rgba(124, 58, 237, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ai-purple:hover {
  background: #6d28d9 !important;
  border-color: #5b21b6 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
}

.btn-ai-purple:active {
  background: #5b21b6 !important;
  transform: translateY(0);
}



/* --- SECTION: feedback.css --- */
/* ===================================================
   FEEDBACK & STATUS
   (alerts, progress, spinners, skeleton loaders, tooltip, toasts)
   =================================================== */

/* INFO ALERTS UNIFICATION */
.info-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  transition: all var(--transition);
}

.info-alert.compact {
  padding: 10px 12px;
}

/* 1. Disclaimers: Clear background (no shading), soft border, "i" icon */
.info-alert.alert-disclaimer {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  box-shadow: none;
}
.info-alert.alert-disclaimer svg {
  stroke: var(--text-secondary);
}

/* 2. Avisos: Soft blue background, soft blue border, "i" icon */
.info-alert.alert-aviso {
  background-color: var(--li-blue-faint);
  border: 1px solid var(--li-blue-light);
  color: var(--text-primary);
  box-shadow: none;
}
.info-alert.alert-aviso svg {
  stroke: var(--li-blue);
}

/* 3. Alarmes: Soft reddish background, warning/alert icon */
.info-alert.alert-alarma {
  background-color: var(--danger-faint);
  border: 1px solid #fee2e2;
  color: #991b1b;
  box-shadow: none;
}
.info-alert.alert-alarma svg {
  stroke: var(--danger);
}

/* PROGRESS BAR */
.progress-container {
  margin-bottom: 24px;
  background: var(--li-blue-faint);
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--li-blue-faint);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--li-blue);
}

@keyframes progressShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: var(--bg-surface-secondary, #eef2f6);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.progress-filler {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #0a66c2 0%, #0077b5 50%, #004182 100%);
  background-size: 200px 100%;
  border-radius: 6px;
  transition: width 0.4s ease-out;
  animation: progressShimmer 2s infinite linear;
}

/* SPINNERS */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.status-loader {
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(10, 102, 194, 0.22);
  border-top-color: var(--li-blue, #0a66c2);
  border-radius: 50%;
  animation: spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Spinner en botons primaris, de crèdits o foscos */
.primary-btn .status-loader,
.consultor-strategic-cta-btn .status-loader,
.danger-btn .status-loader,
.success-btn .status-loader {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}

/* Spinner en mode fosc */
.dark-mode .status-loader {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: var(--li-blue-light, #70b5f9);
}

.dark-mode .primary-btn .status-loader,
.dark-mode .consultor-strategic-cta-btn .status-loader {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}

/* ==========================================
   SMART SKELETON LOADERS (PROPOSTA A)
   ========================================== */
.glass-skeleton-loader {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0;
  position: relative;
  overflow: hidden;
  animation: skeleton-pulse 2.2s infinite ease-in-out;
  transition: all 0.4s ease;
}

.dark-mode .glass-skeleton-loader {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  animation: shimmer-animation 1.8s infinite;
  pointer-events: none;
}

.dark-mode .skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.skeleton-block {
  background: rgba(0, 115, 177, 0.05);
  border-radius: var(--radius-sm);
  height: 16px;
  width: 100%;
  animation: skeleton-block-glow 2.2s infinite ease-in-out;
}

.dark-mode .skeleton-block {
  background: rgba(255, 255, 255, 0.04);
}

.skeleton-block.title {
  height: 24px;
  width: 40%;
  margin-bottom: 8px;
}

.skeleton-block.subtitle {
  height: 16px;
  width: 60%;
  margin-bottom: 12px;
}

.skeleton-block.short {
  width: 30%;
}

.skeleton-block.medium {
  width: 70%;
}

.skeleton-block.circular {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.step-phasing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  margin-top: 12px;
  z-index: 2;
  position: relative;
}

.step-phasing-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Animacions dels loaders */
@keyframes skeleton-pulse {
  0% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.75;
  }
}

@keyframes skeleton-block-glow {
  0% {
    background-color: rgba(0, 115, 177, 0.05);
  }
  50% {
    background-color: rgba(0, 115, 177, 0.1);
  }
  100% {
    background-color: rgba(0, 115, 177, 0.05);
  }
}

@keyframes shimmer-animation {
  100% {
    transform: translateX(100%);
  }
}

.step-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 115, 177, 0.15);
  border-top-color: var(--li-blue);
  border-radius: 50%;
  animation: spinner-rotation 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

@keyframes spinner-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================
   INFO TOOLTIP
   ========================================== */
.info-tooltip-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  margin-left: 6px;
  color: var(--text-muted, #64748b);
  transition: color 0.2s;
}

.info-tooltip-container:hover {
  color: var(--li-blue, #0a66c2);
}

.info-tooltip-container svg {
  width: 16px;
  height: 16px;
}

.info-tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-card-dark, #1e293b);
  color: #fff;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 6px);
  width: max-content;
  max-width: 280px;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

.info-tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--bg-card-dark, #1e293b) transparent transparent transparent;
}

.info-tooltip-container:hover .info-tooltip-content {
  visibility: visible;
  opacity: 1;
}


@keyframes fade-out-down {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* ── First CV upload tip toast ── */
.rumb-tip-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    max-width: 340px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
    padding: 14px 14px 14px 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: rumb-toast-in 0.35s ease;
}
.rumb-tip-toast.hiding {
    animation: rumb-toast-out 0.35s ease forwards;
}
@keyframes rumb-toast-in {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes rumb-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(50px); }
}
.rumb-tip-toast__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.rumb-tip-toast__body {
    flex: 1;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #1e3a5f;
}
.rumb-tip-toast__title {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    color: #1d4ed8;
    margin-bottom: 4px;
}
.rumb-tip-toast__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    margin-top: 1px;
}
.rumb-tip-toast__close:hover { color: #6b7280; }
.rumb-tip-toast__link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: underline;
    cursor: pointer;
}
.rumb-tip-toast__link:hover { color: #1e40af; }

/* ── Green variant (purchase success) ── */
.rumb-tip-toast--success {
    border-color: #bbf7d0;
    border-left-color: #16a34a;
    background: #f0fdf4;
}
.rumb-tip-toast--success .rumb-tip-toast__title { color: #15803d; }
.rumb-tip-toast--success .rumb-tip-toast__body  { color: #166534; }

/* ── Red variant (error) ── */
.rumb-tip-toast--error {
    border-color: #fecaca;
    border-left-color: #dc2626;
    background: #fef2f2;
}
.rumb-tip-toast--error .rumb-tip-toast__title { color: #dc2626; }
.rumb-tip-toast--error .rumb-tip-toast__body  { color: #991b1b; }

/* ── Amber / Info variant (cancelled / info) ── */
.rumb-tip-toast--warning,
.rumb-tip-toast--info {
    border-color: #fde68a;
    border-left-color: #d97706;
    background: #fffbeb;
}
.rumb-tip-toast--warning .rumb-tip-toast__title,
.rumb-tip-toast--info .rumb-tip-toast__title { color: #b45309; }
.rumb-tip-toast--warning .rumb-tip-toast__body,
.rumb-tip-toast--info .rumb-tip-toast__body  { color: #92400e; }


/* --- SECTION: modals.css --- */
/* ===================================================
   RUMB - MODALS GENERALS, SUPORT I AVALUACIÓ ATS
   Mòdul d'estils per a finestres modals de suport,
   informe d'avaluació ATS i guies interactives.
   =================================================== */

/* ── SUPPORT MODAL ── */
.support-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  animation: fade-in 0.3s ease;
  padding: 20px;
}

.support-modal-overlay.fade-out {
  animation: fade-out 0.3s ease forwards;
}

.support-modal-content {
  background: var(--bg-surface);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: scale-up 0.3s ease;
  display: flex;
  flex-direction: column;
}

.support-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--li-blue-faint);
}

.support-modal-header h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--li-blue);
  margin: 0;
}

.support-close-btn {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s;
}

.support-close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.support-modal-body {
  padding: 24px;
  overflow-y: auto;
}

.support-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-secondary);
}

#support-form .form-group {
  margin-bottom: 16px;
}

#support-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

#support-form input,
#support-form select,
#support-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
}

#support-form textarea {
  resize: vertical;
  min-height: 100px;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ── ATS Evaluation Modal Styles (Modern Compact & Responsive Layout) ── */
.ats-results-dialog {
  max-width: 680px !important;
  width: 92% !important;
  max-height: 90vh !important;
  background: var(--bg-surface, #ffffff) !important;
  border-radius: var(--radius-lg, 12px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative;
  animation: scale-up 0.25s ease;
}

.ats-results-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.ats-results-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ats-header-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}

.ats-header-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.ats-results-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Hero Row: Score + Verdict side-by-side */
.ats-hero-grid {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.ats-score-card {
  flex: 0 0 130px;
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ats-score-card .ats-score-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.ats-score-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}

.ats-score-circle span {
  font-size: 1.45rem;
  font-weight: 800;
}

.ats-verdict-card {
  flex: 1;
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border);
  border-left: 4px solid var(--li-blue, #0a66c2);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.ats-verdict-card h4 {
  margin: 0 0 6px 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--li-blue, #0a66c2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ats-verdict-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-primary);
}

/* Advice Section */
.ats-advice-section {
  text-align: left;
}

.ats-advice-section h4 {
  margin: 0 0 8px 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ats-advice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ats-advice-item {
  background: var(--bg-secondary, #f8f9fa);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-primary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ats-advice-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--li-blue, #0a66c2);
}

.ats-advice-item span {
  flex: 1;
}

/* Actions Section */
.ats-actions-box {
  background: var(--li-blue-faint, #f0f7ff);
  border: 1px solid rgba(10, 102, 194, 0.18);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  text-align: left;
}

.ats-actions-box h4 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--li-blue, #0a66c2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ats-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.ats-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 14px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm, 4px) !important;
  text-align: center !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

.ats-results-footer {
  padding: 10px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.ats-results-footer .btn-close-modal {
  padding: 6px 20px;
  font-size: 0.85rem;
  border-radius: 20px;
}

@media (max-width: 768px) {
  .fullscreen-mobile-modal {
    padding: 0 !important;
    align-items: flex-start !important;
    background: var(--bg-body, #f8f9fa) !important;
  }

  .fullscreen-mobile-modal .ats-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .fullscreen-mobile-modal .modal-body {
    flex-grow: 1;
  }

  .fullscreen-mobile-modal .modal-footer {
    margin-top: auto;
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
}

@media (max-width: 600px) {
  .ats-hero-grid {
    flex-direction: column;
  }
  .ats-score-card {
    flex: none;
    width: 100%;
    flex-direction: row;
    gap: 14px;
    padding: 8px 14px;
  }
  .ats-score-card .ats-score-label {
    margin-bottom: 0;
  }
  .ats-score-circle {
    width: 52px;
    height: 52px;
  }
  .ats-score-circle span {
    font-size: 1.2rem;
  }
  .ats-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* ── All Interactive Guide Modals Mobile Fullscreen (LinkedIn Copy, Oferta URL, Oferta Copy) ── */
@media (max-width: 768px) {
  .guide-modal-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  .linkedin-copy-guide-modal,
  .oferta-url-guide-modal,
  .oferta-copy-guide-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100% !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  .oferta-url-guide-modal,
  .oferta-copy-guide-modal {
    padding: 16px 14px !important;
  }

  .linkedin-copy-guide-modal {
    padding: 0 !important;
  }

  .linkedin-guide-mobile-tabs,
  .oferta-guide-mobile-tabs,
  .oferta-copy-guide-mobile-tabs {
    display: flex !important;
  }

  .linkedin-guide-body-grid,
  .oferta-guide-body-grid,
  .oferta-copy-guide-body-grid {
    grid-template-columns: 1fr !important;
  }

  #linkedin-guide-schema-col,
  #oferta-guide-schema-col,
  #oferta-copy-guide-schema-col {
    display: none;
    border-right: none !important;
  }

  .linkedin-mobile-banner-preview {
    display: block !important;
  }
}

/* --- SECTION: modals-monetization.css --- */
/* ==========================================================
   RUMB - MODAL DE MONETITZACIÓ & BOTIGA DE CRÈDITS
   Mòdul d'estils per a la passarel·la de crèdits, comparativa web,
   selecció de paquets, selector compacte mòbil i disclaimers.
   ========================================================== */

/* ── MONETIZATION MODAL ── */
.monetization-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: fade-in 0.3s ease;
  padding: 20px;
}

.monetization-modal-content {
  background: var(--bg-surface);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  animation: scale-up 0.3s ease;
  position: relative;
}

.monetization-modal-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--li-blue-faint);
  position: sticky;
  top: 0;
  z-index: 10;
}

.monetization-modal-header .header-titles h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--li-blue);
  margin-bottom: 4px;
}

.monetization-modal-header .subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.monetization-close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 0.5;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s;
}

.monetization-close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.monetization-modal-body {
  padding: 32px;
}

.monetization-support-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.82rem;
}

.monetization-support-card-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}

.monetization-support-card-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.monetization-support-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.45;
}

.monetization-support-card-title {
  color: var(--text-primary);
  font-weight: 600;
}

.monetization-support-card-text span {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.monetization-btn-support {
  background: transparent;
  color: var(--li-blue);
  border: 1px solid var(--li-blue-light);
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
}

.monetization-btn-support:hover {
  background: var(--li-blue-faint);
  border-color: var(--li-blue);
}

/* ── MONETIZATION TABS ── */
.monetization-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  padding: 0 32px;
  background: var(--bg-surface);
}

.monetization-tab {
  padding: 14px 20px;
  background: none;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.monetization-tab.active {
  color: var(--li-blue);
}

.monetization-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--li-blue);
}

.monetization-tab-content {
  display: none;
  animation: fade-in 0.3s ease;
}

.monetization-tab-content.active {
  display: block;
}

/* ── MONETIZATION BENEFITS LIST ── */
.monetization-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.benefit-category-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

.benefit-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.benefit-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--li-blue-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.benefit-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.packages-catalog {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.packages-section {
  width: 100%;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 0;
}

.packages-section--services {
  width: 100%;
}

.packages-services-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.packages-services-list:has(> :only-child) {
  grid-template-columns: 1fr;
}

.pkg-top-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 20px;
  margin-bottom: 4px;
}

.pkg-badge-pill {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
}

.pkg-badge-pill--promo {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.pkg-badge-pill--recommended {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.pkg-badge-pill--special-offer {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.15);
}

.pkg-badge-pill--service {
  background: #e0e7ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.pkg-badge-pill--test {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.pkg-price-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
}

.pkg-price-old {
  font-size: 0.92rem;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 500;
}

.pkg-price-current {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
}

.pkg-price-current--discount {
  color: #166534;
}

.package-card {
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.package-card.clickable-card {
  cursor: pointer;
}

.package-card:hover {
  border-color: var(--li-blue-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.package-card.selected {
  border-color: var(--li-blue);
  background: var(--li-blue-faint);
}

.pkg-credits {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--li-blue);
  margin-bottom: 4px;
}

.pkg-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pkg-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.4;
}

.pkg-desc strong {
  color: var(--text-primary);
  font-weight: 700;
}

.pkg-price-tag {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: auto;
}

.monetization-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ── MONETIZATION INFO ROW ── */
.monetization-info-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 14px;
}

.monetization-info-row .monetization-disclaimer {
  flex: 1 1 50%;
  margin-top: 0;
  box-sizing: border-box;
}

.monetization-info-row .monetization-support-card {
  flex: 1 1 50%;
  margin-top: 0;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .monetization-info-row {
    flex-direction: column;
  }

  .monetization-info-row .monetization-disclaimer,
  .monetization-info-row .monetization-support-card {
    flex: 1 1 100%;
  }
}

/* ── MONETIZATION DISCLAIMER ── */
.monetization-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  text-align: left;
}

.disclaimer-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.disclaimer-text {
  flex: 1;
}

.disclaimer-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── WEB: targetes de paquets refinades ── */
.package-card.clickable-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pkg-unit-price {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.01em;
}

.package-card.clickable-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10, 102, 194, 0.12);
  border-color: var(--li-blue-light);
}

.package-card.clickable-card.selected::before {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: var(--li-blue);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(10, 102, 194, 0.4);
  z-index: 5;
}

.package-card.clickable-card.selected {
  border-color: var(--li-blue);
  background: linear-gradient(180deg, var(--li-blue-faint) 0%, var(--bg-surface) 100%);
  box-shadow: 0 4px 16px rgba(10, 102, 194, 0.15);
}

/* ── PRODUCTES DE VALOR AFEGIT I POST-VENDA (BASE / DESKTOP) ── */
.package-card.package-card--service {
  border-color: #c7d2fe;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, var(--bg-surface) 100%);
}

.package-card.package-card--service:hover {
  border-color: #818cf8;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.package-card.package-card--service.selected {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, var(--bg-surface) 100%);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}

/* Targeta de Servei en graella a 2 columnes per a resolucions mitjanes i grans */
.package-card--service.package-card--horizontal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  text-align: left;
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.package-card--service.package-card--horizontal.selected::before {
  display: none !important;
}

.pkg-service-mobile-icon {
  display: none;
}

.pkg-service-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

.pkg-service-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.pkg-service-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pkg-service-credits-pill {
  font-size: 0.74rem;
  font-weight: 700;
  color: #4338ca;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pkg-service-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}

.pkg-service-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.pkg-service-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-left: none;
  border-top: 1px solid #e0e7ff;
  padding-left: 0;
  padding-top: 12px;
  margin-top: auto;
  gap: 12px;
  text-align: left;
  width: 100%;
}

.pkg-service-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pkg-service-select-indicator {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pkg-service-select-btn {
  background: rgba(99, 102, 241, 0.08);
  border: 1.5px solid #c7d2fe;
  color: #4338ca;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

.package-card--service.package-card--horizontal:hover .pkg-service-select-btn {
  background: #6366f1;
  border-color: #6366f1;
  color: #ffffff;
}

.package-card--service.package-card--horizontal.selected .pkg-service-select-btn {
  background: #4338ca;
  border-color: #4338ca;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.35);
}

/* ── MOBILE MONETIZATION MODAL ADAPTATIONS ── */
@media (max-width: 768px) {
  .monetization-modal-overlay {
    padding: 0;
  }

  .monetization-modal-content {
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: 100%;
    max-height: 100%;
    max-height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .monetization-modal-header {
    padding: 12px 16px;
  }

  .monetization-modal-header .header-titles h2 {
    font-size: 1.05rem;
  }

  .monetization-modal-header .subtitle {
    font-size: 0.8rem;
  }

  .monetization-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  .monetization-tabs {
    padding: 12px 16px 0;
  }

  .monetization-tab {
    flex: 1 1 50%;
    text-align: center;
    font-size: 0.85rem;
    padding: 12px 8px;
  }

  .monetization-support-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .monetization-btn-support {
    width: 100%;
    justify-content: center;
  }

  .monetization-modal-footer {
    padding: 10px 16px !important;
  }

  /* Direcció "Compacte llista": una columna, cada paquet és una fila */
  .packages-catalog {
    gap: 16px;
  }

  .packages-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .packages-services-list {
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .packages-services-list > * {
    min-width: 0;
  }

  .pkg-top-badges {
    display: none;
  }

  /* Paquets seleccionables → fila horitzontal: crèdits · nom ···· preu › */
  .package-card.clickable-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 14px;
    gap: 6px 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .package-card.clickable-card .pkg-credits {
    order: 1;
    flex: 0 0 auto;
    font-size: 1.1rem;
    margin-bottom: 0;
  }

  .package-card.clickable-card .pkg-name {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    margin-bottom: 0;
  }

  .package-card.clickable-card .pkg-price-tag,
  .package-card.clickable-card .pkg-price-wrap {
    order: 3;
    flex: 0 0 auto;
    margin-top: 0;
    font-size: 0.95rem;
    gap: 4px;
  }

  .package-card.clickable-card .pkg-price-old {
    font-size: 0.8rem;
  }

  .package-card.clickable-card .pkg-price-current {
    font-size: 0.95rem;
  }

  .package-card.clickable-card .pkg-unit-price {
    display: none;
  }

  .package-card.clickable-card::after {
    content: "›";
    order: 4;
    flex: 0 0 auto;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--text-muted);
    transition: transform 0.2s ease;
  }

  .package-card.clickable-card.selected::after {
    transform: rotate(90deg);
  }

  .package-card.clickable-card.selected::before {
    display: none;
  }

  .package-card.clickable-card .pkg-desc {
    display: none;
  }

  .package-card.clickable-card.selected .pkg-desc {
    display: block;
    order: 5;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
    min-height: 0;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .package-card.clickable-card.selected .pkg-desc * {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Comportament mòbil específic per a la targeta de servei horitzontal */
  .package-card--service.package-card--horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 14px;
    gap: 6px 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .package-card--service.package-card--horizontal .pkg-service-mobile-icon {
    display: flex;
    order: 1;
    flex: 0 0 auto;
    font-size: 1.1rem;
    font-weight: 800;
    color: #4338ca;
    margin-bottom: 0;
  }

  .package-card--service.package-card--horizontal .pkg-service-main,
  .package-card--service.package-card--horizontal .pkg-service-side {
    display: contents;
  }

  .package-card--service.package-card--horizontal .pkg-service-title {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    margin-bottom: 0;
    font-weight: 700;
  }

  .package-card--service.package-card--horizontal .pkg-service-pricing {
    order: 3;
    flex: 0 0 auto;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .package-card--service.package-card--horizontal .pkg-service-pricing .pkg-unit-price {
    display: none;
  }

  .package-card--service.package-card--horizontal .pkg-service-select-indicator {
    display: none;
  }

  .package-card--service.package-card--horizontal .pkg-service-top-row {
    display: none;
  }

  .package-card--service.package-card--horizontal.selected .pkg-service-top-row {
    display: flex;
    order: 6;
    flex: 1 1 100%;
    width: 100%;
    margin-top: 8px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .monetization-disclaimer {
    margin-top: 14px;
    padding: 10px 12px;
    gap: 10px;
  }

  .disclaimer-icon {
    font-size: 1.2rem;
  }

  .disclaimer-text {
    font-size: 0.75rem;
  }
}

/* Targetes en mode de proves per a administradors (sense Lemon URL) */
.package-card.package-card--admin-test {
  border: 1.5px dashed #f59e0b !important;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%) !important;
}

.package-card.package-card--admin-test:hover {
  border-color: #d97706 !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2) !important;
}

.package-card.package-card--admin-test.selected {
  border: 2px solid #d97706 !important;
  background: linear-gradient(180deg, #fef3c7 0%, #ffffff 100%) !important;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.25) !important;
}

.pkg-test-badge {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #fde68a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pkg-promo-badge {
  background: #dcfce7;
  color: #166534;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #86efac;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pkg-service-badge {
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #c7d2fe;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Modal Post-venda Servei */
.post-purchase-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.25s ease-out;
}

.post-purchase-modal-card {
  background: #ffffff;
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 28px 24px;
  text-align: center;
  animation: scaleUp 0.25s ease-out;
  box-sizing: border-box;
}

.post-purchase-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.post-purchase-modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px;
  line-height: 1.3;
}

.post-purchase-modal-product {
  display: inline-block;
  background: #f1f5f9;
  color: #475569;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.post-purchase-modal-message {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.55;
  margin: 0 0 20px;
  background: #f8fafc;
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 4px solid #6366f1;
  text-align: left;
  white-space: pre-wrap;
}

.post-purchase-modal-message strong {
  color: #0f172a;
  font-weight: 700;
}

.post-purchase-modal-premium-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: left;
}

/* ── Producte Recomanat (Destacat) ── */
.package-card.package-card--featured {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
}

.package-card.package-card--featured:hover {
  border-color: #d97706;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.22);
}

.package-card.package-card--featured.selected {
  border-color: #d97706;
  background: linear-gradient(180deg, #fef3c7 0%, #ffffff 100%);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.25);
}

body.dark-mode .package-card.package-card--featured {
  border-color: #b45309;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.1) 0%, rgba(30, 41, 59, 1) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-mode .package-card.package-card--featured:hover {
  border-color: #d97706;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.18);
}

body.dark-mode .package-card.package-card--featured.selected {
  border-color: #f59e0b;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.2) 0%, rgba(30, 41, 59, 1) 100%);
}


/* --- SECTION: features-dashboard.css --- */
/* ==========================================================
   RUMB - DASHBOARD HUB & ALERTES DEL SISTEMA (HOME)
   Mòdul d'estils per a l'estructura del Home, accessos ràpids,
   alertes de perfil, mètriques ESCO i missatges del sistema.
   ========================================================== */

/* ── PROFILE ALERTS CONTAINER (Home) ── */
.profile-alerts-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.profile-alerts-container:empty {
  display: none;
}

.profile-alert {
  padding: 12px 16px;
  border-radius: var(--radius-md, 8px);
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  line-height: 1.45;
  animation: fadeIn 0.3s ease;
  border: 1px solid transparent;
  gap: 12px;
}

.profile-alert svg {
  margin-right: 0;
  flex-shrink: 0;
}

.profile-alert-content {
  flex-grow: 1;
  min-width: 0;
}

.profile-alert-action {
  margin-left: 16px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .profile-alert {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .profile-alert-action {
    margin-left: 0;
    margin-top: 4px;
    align-self: flex-start;
  }
}

/* 1. Disclaimers (info) */
.profile-alert.info {
  background-color: var(--bg-surface, #ffffff);
  border-color: var(--border);
  color: var(--text-primary);
}

.profile-alert.info svg {
  stroke: var(--text-secondary);
}

/* 2. Avisos (warn) */
.profile-alert.warn {
  background-color: var(--li-blue-faint);
  border-color: var(--li-blue-light);
  color: var(--text-primary);
}

.profile-alert.warn svg {
  stroke: var(--li-blue);
}

/* 3. Alarmes (danger) */
.profile-alert.danger {
  background-color: var(--danger-faint);
  border-color: #fee2e2;
  color: #991b1b;
}

.profile-alert.danger svg {
  stroke: var(--danger);
}

/* Dark mode support */
body.dark-mode .profile-alert.info {
  background-color: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

body.dark-mode .profile-alert.info svg {
  stroke: #94a3b8;
}

body.dark-mode .profile-alert.warn {
  background-color: rgba(10, 102, 194, 0.15);
  border-color: rgba(112, 181, 249, 0.3);
  color: #e0f2fe;
}

body.dark-mode .profile-alert.warn svg {
  stroke: #70b5f9;
}

body.dark-mode .profile-alert.danger {
  background-color: rgba(209, 17, 36, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fee2e2;
}

body.dark-mode .profile-alert.danger svg {
  stroke: #f87171;
}

/* ── DASHBOARD HUB BASE ── */
.hub-header {
  margin-bottom: 20px;
}

.hub-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.hub-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.hub-grid,
.dashboard-hub-grid,
#home-services-area {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.hub-card {
  background-color: var(--bg-surface, #ffffff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition, 0.2s ease);
  position: relative;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--li-blue-light);
}

.hub-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.hub-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: var(--li-blue-faint);
  color: var(--li-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.hub-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.hub-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.hub-card-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 16px 0;
  flex-grow: 1;
}

.hub-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.hub-indicator.green {
  background-color: var(--success);
}

.hub-indicator.amber {
  background-color: var(--warning);
}

.hub-indicator.red {
  background-color: var(--danger);
}

.hub-indicator.gray {
  background-color: var(--text-muted);
}

.hub-card-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 16px;
  background-color: var(--li-blue-faint);
  color: var(--li-blue);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: all 0.15s ease;
  cursor: pointer;
  text-align: center;
}

.hub-card:hover .hub-card-btn {
  background-color: var(--li-blue);
  color: #ffffff;
  border-color: var(--li-blue);
}

/* ── ESCO INSIGHTS (Home) ── */
.esco-insights-container {
  margin-top: 20px;
}

.esco-insights-grid {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.esco-insights-right-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.esco-insights-right-column .sector-card {
  flex-grow: 1;
}

.esco-insight-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.esco-insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.esco-insight-card.full-width {
  grid-column: 1 / -1;
}

.insight-maturity {
  display: flex;
  align-items: center;
  gap: 20px;
}

.insight-maturity.larger {
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 16px;
  height: 100%;
  justify-content: center;
}

.insight-maturity.pending {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.maturity-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.insight-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--li-blue);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.insight-text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: var(--text-primary);
}

.esco-source-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.85;
  white-space: nowrap;
}

.maturity-role-title {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.maturity-metadata {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.badge-metadata {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0 8px;
  background: var(--li-blue-faint);
  color: var(--li-blue);
  border-radius: 4px;
  border: 1px solid rgba(0, 115, 177, 0.1);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.sector-skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.sector-skills-list li {
  font-size: 0.85rem;
  line-height: 1.4;
  padding-left: 20px;
  position: relative;
}

.sector-skills-list li::before {
  content: "•";
  color: var(--li-blue);
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 1.2rem;
  top: -2px;
}

/* ── SYSTEM MESSAGES (HOME) ── */
.system-messages-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.system-message-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  padding: 20px;
  gap: 16px;
  animation: fadeInDown 0.4s ease-out;
  border-left: 4px solid var(--li-blue);
  position: relative;
}

.system-message-branding {
  font-size: 0.8rem;
  color: var(--li-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  display: block;
}

.system-message-type {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: block;
  font-weight: 500;
}

.system-message-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--li-blue-faint);
  color: var(--li-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.system-message-content {
  flex-grow: 1;
}

.system-message-title {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.system-message-body {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  word-break: break-word;
}

.system-message-body p {
  margin: 0 0 10px 0;
}

.system-message-body p:last-child {
  margin-bottom: 0;
}

.system-message-body ul {
  list-style: disc !important;
  list-style-type: disc !important;
  list-style-position: outside !important;
  margin: 8px 0 12px 0 !important;
  padding-left: 24px !important;
}

.system-message-body ol {
  list-style: decimal !important;
  list-style-type: decimal !important;
  list-style-position: outside !important;
  margin: 8px 0 12px 0 !important;
  padding-left: 24px !important;
}

.system-message-body li {
  display: list-item !important;
  list-style-type: inherit !important;
  margin-bottom: 4px !important;
  padding-left: 2px !important;
}

.system-message-body strong,
.system-message-body b {
  color: var(--text-primary);
  font-weight: 600;
}

.system-message-body a {
  color: var(--li-blue);
  text-decoration: underline;
  font-weight: 600;
}

.system-message-body a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.system-message-body code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: monospace;
}

.system-message-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.system-message-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

/* ── Scrollable grid for Home dashboard ── */
#home-eu-countries-grid {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#home-eu-countries-grid::-webkit-scrollbar {
  width: 6px;
}

#home-eu-countries-grid::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 10px;
}

/* ── Ensure collapsible content can grow enough ── */
.collapsible-section.active #home-eu-countries-grid {
  margin-bottom: 10px;
}

.collapsible-section.active .collapsible-content,
#home-salary-data-collapsible.active .collapsible-content,
#home-market-health-collapsible.active .collapsible-content {
  max-height: 4000px !important;
}

.collapsible-section.active {
  overflow: visible;
}

@media (max-width: 768px) {
  .collapsible-section.active .collapsible-content,
  #home-salary-data-collapsible.active .collapsible-content,
  #home-market-health-collapsible.active .collapsible-content {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 24px !important;
  }

  .profile-insight-box {
    margin-top: 16px;
    margin-bottom: 8px;
    padding: 14px 16px;
    font-size: 0.82rem;
    line-height: 1.5;
    box-sizing: border-box;
  }
}

/* ── PROMO BANNERS ROW (Home) ── */
.home-promo-row {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.home-promo-row[data-cols="1"] {
  grid-template-columns: 1fr;
}
.home-promo-row[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-promo-row[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-promo-row[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-promo-row[data-cols="auto"] {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 992px) {
  .home-promo-row[data-cols="3"],
  .home-promo-row[data-cols="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-promo-row[data-cols="2"],
  .home-promo-row[data-cols="3"],
  .home-promo-row[data-cols="4"] {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------
   CUSTOM WIDGET HIGHLIGHT BACKGROUNDS (Admin Configurable)
   ---------------------------------------------------------- */
.widget-bg-blue,
.widget-bg-blue.collapsible-section,
.widget-bg-blue.esco-insight-card {
  background: linear-gradient(180deg, #f0f7ff 0%, #f8fbff 100%) !important;
  border-color: #bfdbfe !important;
}
.widget-bg-blue .nb-card,
.widget-bg-blue .market-card-empty {
  background: linear-gradient(180deg, #f0f7ff 0%, #f8fbff 100%) !important;
  border-color: #bfdbfe !important;
}

.widget-bg-green,
.widget-bg-green.collapsible-section,
.widget-bg-green.esco-insight-card {
  background: linear-gradient(180deg, #f0fdf4 0%, #f8fcf9 100%) !important;
  border-color: #bbf7d0 !important;
}
.widget-bg-green .nb-card,
.widget-bg-green .market-card-empty {
  background: linear-gradient(180deg, #f0fdf4 0%, #f8fcf9 100%) !important;
  border-color: #bbf7d0 !important;
}

.widget-bg-amber,
.widget-bg-amber.collapsible-section,
.widget-bg-amber.esco-insight-card {
  background: linear-gradient(180deg, #fffbeb 0%, #fefdf8 100%) !important;
  border-color: #fde68a !important;
}
.widget-bg-amber .nb-card,
.widget-bg-amber .market-card-empty {
  background: linear-gradient(180deg, #fffbeb 0%, #fefdf8 100%) !important;
  border-color: #fde68a !important;
}

.widget-bg-purple,
.widget-bg-purple.collapsible-section,
.widget-bg-purple.esco-insight-card {
  background: linear-gradient(180deg, #faf5ff 0%, #fcfaff 100%) !important;
  border-color: #e9d5ff !important;
}
.widget-bg-purple .nb-card,
.widget-bg-purple .market-card-empty {
  background: linear-gradient(180deg, #faf5ff 0%, #fcfaff 100%) !important;
  border-color: #e9d5ff !important;
}

.widget-bg-rose,
.widget-bg-rose.collapsible-section,
.widget-bg-rose.esco-insight-card {
  background: linear-gradient(180deg, #fff1f2 0%, #fff8f8 100%) !important;
  border-color: #fecdd3 !important;
}
.widget-bg-rose .nb-card,
.widget-bg-rose .market-card-empty {
  background: linear-gradient(180deg, #fff1f2 0%, #fff8f8 100%) !important;
  border-color: #fecdd3 !important;
}

.widget-bg-gray,
.widget-bg-gray.collapsible-section,
.widget-bg-gray.esco-insight-card {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-color: #cbd5e1 !important;
}
.widget-bg-gray .nb-card,
.widget-bg-gray .market-card-empty {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-color: #cbd5e1 !important;
}

/* --- SECTION: features-dashboard-market.css --- */
/* ==========================================================
   RUMB - DADES DE MERCAT, SALARIS I EUROSTAT (HOME)
   Mòdul d'estils per a mètriques salarials, context macroeconòmic,
   atur (Eurostat / INE / Idescat) i sparklines de tendència.
   ========================================================== */

/* ── MARKET STATS CONTAINER (Home) ── */
.market-stats-container {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 24px;
  margin-top: 16px;
}

.market-card-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary);
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.market-stat-item {
  background: var(--bg-surface-hover);
  border-radius: var(--radius-md);
  padding: 20px;
  border: 1px solid var(--border);
  transition: transform var(--transition);
}

.market-stat-item:hover {
  transform: translateY(-2px);
}

.market-stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.market-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--li-blue);
}

/* ── Market Context (Eurostat) ── */
.market-context-section {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  animation: slideUp 0.4s ease-out;
}

.market-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.market-data-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.market-data-grid>* {
  min-width: 0;
}

/* ── PROFILE BREAKDOWN (Sector, Studies, Age) ── */
.market-profile-item {
  padding: 16px;
  border-radius: 8px;
}

.market-profile-item.compact {
  padding: 10px 16px;
}

.profile-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.profile-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.profile-stat-diff {
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Market Health (Home) ── */
.health-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.health-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.health-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.health-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.health-stat-diff {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 4px;
}

.market-health-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
}

.profile-breakdown-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--li-blue-faint);
}

/* ── Market Trend Sparklines (Market Health) ──────── */
.market-trend-enriched {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.03);
  padding: 8px 12px;
  border-radius: 8px;
  margin-left: 8px;
}

.trend-meta {
  font-size: 0.65rem;
  line-height: 1.2;
  color: var(--text-secondary);
  white-space: nowrap;
}

.trend-meta.start {
  text-align: right;
}

.trend-meta.end {
  text-align: left;
}

.trend-svg-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.trend-svg-container svg {
  display: block;
}

.trend-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: bold;
}

.market-stat-item.full-width {
  grid-column: 1 / -1;
}

/* ==========================================================
   TARGETES DE MÈTRIQUES SALARIALS I BANDERES (HOME)
   ========================================================== */
.salary-secondary-row {
  display: contents;
}

.market-grid.salary-main-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.salary-main-grid .market-stat-item.salary-card {
  padding: 14px 16px;
}

.salary-main-grid .market-stat-label {
  font-size: 0.78rem;
}

.salary-main-grid .market-stat-value {
  font-size: 1.6rem;
}

.market-stat-item.salary-card {
  padding: 18px 20px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.market-stat-item.salary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.market-stat-item.salary-card.profile-highlight {
  border-color: var(--li-blue-light);
  background: var(--li-blue-faint);
}

.market-stat-item.salary-card.occupations-highlight.theme-green {
  border-color: #bbf7d0;
  background: var(--success-faint);
}

.market-stat-item.salary-card.occupations-highlight.theme-green .market-stat-value,
.market-stat-item.salary-card.occupations-highlight.theme-green .market-stat-label {
  color: var(--success) !important;
}

.market-stat-item.salary-card.occupations-highlight.theme-amber {
  border-color: #fef3c7;
  background: var(--warning-faint);
}

.market-stat-item.salary-card.occupations-highlight.theme-amber .market-stat-value,
.market-stat-item.salary-card.occupations-highlight.theme-amber .market-stat-label {
  color: var(--warning) !important;
}

.market-stat-item.salary-card.occupations-highlight.theme-red {
  border-color: #fecaca;
  background: var(--danger-faint);
}

.market-stat-item.salary-card.occupations-highlight.theme-red .market-stat-value,
.market-stat-item.salary-card.occupations-highlight.theme-red .market-stat-label {
  color: var(--danger) !important;
}

.market-stat-item.salary-card.country-card {
  padding-left: 28px;
}

.market-stat-item.salary-card.country-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6px;
  background: var(--country-flag-gradient, var(--li-blue));
}

.market-stat-item.small[class*="flag-"] {
  position: relative;
  overflow: hidden;
  padding-left: 22px;
}

.market-stat-item.small[class*="flag-"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6px;
  background: var(--country-flag-gradient, var(--li-blue));
}

/* ── Responsivitat mòbil de mercat i salaris ── */
@media (max-width: 768px) {
  #home-market-stats {
    overflow-x: hidden;
  }

  #home-market-stats .market-stat-value {
    font-size: 1.6rem;
  }

  #home-market-stats .salary-secondary-row .market-stat-value {
    font-size: 1.37rem;
  }

  #home-market-health .health-stat-value {
    font-size: 1.76rem !important;
  }

  .salary-main-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .salary-secondary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .salary-secondary-row .market-stat-item {
    flex: 1;
    min-width: 0;
  }

  .salary-secondary-row .market-stat-item.salary-card {
    flex: 1 1 100%;
    min-width: 0;
  }

  .market-data-grid {
    grid-template-columns: 1fr !important;
  }

  .market-data-grid>div:nth-child(2) {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--border);
    padding-top: 10px;
  }

  .health-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .health-profile-grid {
    grid-template-columns: 1fr !important;
  }
}


/* --- SECTION: features-career.css --- */
/* VENTALL PROFESSIONAL */
.occupations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 1025px) {
  .occupations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.occupation-card {
  padding: 16px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  container-type: inline-size;
}

.occupation-badges {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.occupation-badge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 8px;
  width: 70px;
  height: 48px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  gap: 2px;
  text-align: center;
}

.occupation-badge-box.essential {
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #cce8d5;
}

.occupation-badge-box.optional {
  background: #fef7e0;
  color: #b06000;
  border: 1px solid #fbe7b2;
}

.occupation-badge-value {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.occupation-badge-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1;
}

/* Ventall Skill List */
.ventall-skill-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9rem;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.ventall-skill-name-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.ventall-skill-right-area {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
}

.occupation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.occupation-actions>button {
  flex: 1 1 0;
  min-width: max-content;
  justify-content: center;
}

/* Consultoria de carrera — layout base */
.consultor-search-row {
  display: flex;
  flex-direction: row;
}

.consultor-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Consultoria de carrera — responsive mòbil */
@media (max-width: 600px) {
  .consultor-search-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .consultor-search-row #consultor-search-btn {
    width: 100%;
  }
  .consultor-search-row .esco-suggestions {
    width: 100% !important;
  }
  .consultor-results-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile optimizations for Ventall */
@media (max-width: 768px) {
  #panel-ventall-professional {
    font-size: 90%;
  }
  .ventall-skill-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .ventall-skill-name-area {
    width: 100%;
    align-items: center;
  }
  .ventall-skill-right-area {
    align-self: flex-end;
    justify-content: flex-end;
    width: 100%;
    margin-top: 2px;
  }
}

@media (max-width: 600px) {
  .occupation-badges {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
  }
  .occupation-badge-box {
    width: 60px !important;
    height: 42px !important;
    min-width: 0;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2px 4px !important;
  }
  .occupation-badge-label {
    font-size: 0.65rem !important;
  }
  .occupation-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  .occupation-actions button {
    width: 100% !important;
    justify-content: center;
    text-align: center;
    height: auto !important;
    min-height: 36px;
    white-space: normal !important;
    padding: 8px 16px !important;
  }
  .occupation-actions .credit-badge.outside {
    align-self: center;
    margin-top: -4px;
    margin-bottom: 8px;
  }
}

/* --- PROPOSTA 2: KPI SELECTOR GRID & DETAIL HUB --- */
.occupations-kpi-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
  grid-column: 1 / -1;
}

.occupations-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  width: 100%;
  padding: 8px 4px 14px 4px;
  box-sizing: border-box;
}

.occupation-kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease-in-out;
  position: relative;
  user-select: none;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}

.occupation-kpi-card:hover {
  border-color: var(--li-blue-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.08);
}

.occupation-kpi-card.active {
  border: 2px solid var(--li-blue);
  background: #f0f7ff;
  box-shadow: 0 4px 14px rgba(10, 102, 194, 0.15);
}

.occupation-kpi-card.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--li-blue);
}

.occupation-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.occupation-kpi-role-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-surface-hover);
  color: var(--text-secondary);
  white-space: nowrap;
}

.occupation-kpi-card.active .occupation-kpi-role-tag {
  background: var(--li-blue-faint);
  color: var(--li-blue);
}

.occupation-kpi-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: capitalize;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.occupation-kpi-badges {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.occupation-kpi-badge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 6px;
  text-align: center;
}

.occupation-kpi-badge.essential {
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #cce8d5;
}

.occupation-kpi-badge.optional {
  background: #fef7e0;
  color: #b06000;
  border: 1px solid #fbe7b2;
}

.occupation-kpi-badge-pct {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
}

.occupation-kpi-badge-sub {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.85;
}

/* HUB DE DETALL COMÚ */
.occupation-detail-hub {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.06));
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: hubFadeIn 0.25s ease-out;
}

@keyframes hubFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.occupation-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.occupation-detail-title-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 300px;
}

.occupation-detail-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  text-transform: capitalize;
}

/* RESPONSIVE MÒBIL (< 768px) */
@media (max-width: 768px) {
  .occupations-kpi-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 14px 4px;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }

  .occupation-kpi-card {
    flex: 0 0 210px;
    scroll-snap-align: center;
  }

  .occupation-kpi-card.active::after {
    display: block;
    bottom: -11px;
    z-index: 10;
  }

  .occupation-detail-hub {
    padding: 16px;
  }

  .occupation-detail-title {
    font-size: 1.15rem;
  }
}

/* ===================================================
   CONSULTORIA DE FORMACIÓ - RESPONSIVE & TABBED UI
   =================================================== */

.consultor-profile-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  background: var(--bg-surface-hover);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  margin-bottom: 16px;
}

.consultor-profile-donut {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.consultor-profile-info {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consultor-profile-eqf {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  border-left: 1px solid var(--border-light);
  padding-left: 24px;
}

.cc-more-skills-btn {
  background: var(--li-blue-faint);
  color: var(--li-blue);
  border: 1px solid var(--li-blue);
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cc-more-skills-btn:hover {
  background: var(--li-blue);
  color: #ffffff;
}

.cc-eqf-badge-btn {
  background: var(--li-blue-faint);
  color: var(--li-blue);
  border: 1px solid var(--li-blue);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.cc-eqf-badge-btn:hover {
  background: var(--li-blue);
  color: #ffffff;
}

/* Responsive mòbil per al Card de Perfil (< 768px) */
@media (max-width: 767px) {
  .consultor-profile-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }

  .consultor-profile-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border-light);
  }

  .consultor-profile-eqf {
    border-left: none;
    padding-left: 0;
    align-items: flex-end;
    text-align: right;
  }

  .consultor-profile-info {
    min-width: 0;
  }
}

/* Pestanyes Horitzontals de Formació (Estil idèntic a Examina Oferta) */
.consultor-tabs-container {
  margin-top: 20px;
}

.consultor-tabs-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--border-light, #e1e9ee);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.consultor-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin-bottom: -2px; /* Superposar l'indicador inferior de 2px a la línia base */
}

.consultor-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary, #666);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  border-radius: 6px 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.consultor-tab-btn:hover {
  color: var(--li-blue, #0a66c2);
  background: var(--bg-surface-hover, rgba(10, 102, 194, 0.04));
}

.consultor-tab-btn.active {
  color: var(--li-blue, #0a66c2);
  border-bottom-color: var(--li-blue, #0a66c2);
  background: var(--bg-surface-hover, rgba(10, 102, 194, 0.06));
  font-weight: 700;
}

.consultor-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.consultor-tab-btn.active .consultor-tab-badge {
  background: var(--li-blue);
  color: #ffffff;
  border-color: var(--li-blue);
}

.consultor-tab-panel {
  padding: 8px 0 0 0;
  background: transparent;
  animation: fade-in 0.2s ease;
}

/* Modal Popup de Competències Essencials */
.consultor-skills-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 16px;
  animation: fade-in 0.2s ease;
}

.consultor-skills-modal-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
}

.consultor-skills-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface-hover);
}

.consultor-skills-modal-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.consultor-skills-modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Impressió: Mostrar totes les àrees informatives a l'informe d'impressió */
.consultor-all-sections-print {
  display: none;
}

@media print {
  .consultor-tabs-container {
    display: none !important;
  }
  .consultor-all-sections-print {
    display: block !important;
  }
  .cc-eqf-badge-btn, .cc-more-skills-btn {
    display: none !important;
  }
}


/* --- SECTION: features-career-training.css --- */
/* ==========================================================
   RUMB - AUDITORIA ESTRATÈGICA DE FORMACIÓ I SENIORITAT
   Mòdul d'estils per a l'informe estratègic, diagnosi EQF,
   eixos competencials i full de ruta formatiu.
   ========================================================== */

/* ── Targeta CTA Estratègica ── */
.consultor-strategic-cta {
  margin-top: 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1a2e5e 0%, #1d4ed8 60%, #0ea5e9 100%);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(29, 78, 216, 0.3);
  position: relative;
  overflow: hidden;
}
.consultor-strategic-cta::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.consultor-strategic-cta-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 200px;
}
.consultor-strategic-cta-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: #fbbf24;
}
.consultor-strategic-cta-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.consultor-strategic-cta-desc {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}
.consultor-strategic-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fff;
  color: #1d4ed8;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
}
.consultor-strategic-cta-btn:hover:not(:disabled) {
  background: #f0f9ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.consultor-strategic-cta-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .consultor-strategic-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 14px;
  }
  .consultor-strategic-cta-inner {
    min-width: 0;
    width: 100%;
  }
  .consultor-strategic-cta-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding: 12px 16px;
  }
}

/* ── Hub Estratègic Unificat (Proposta C) ── */
.consultor-strategic-hub {
  margin-top: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.strategic-hub-nav {
  display: flex;
  align-items: stretch;
  background: var(--bg-surface);
  border-bottom: 2px solid var(--border-light, #e5e7eb);
  padding: 6px 16px 0;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.strategic-hub-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 11px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary, #666);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  border-radius: 6px 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -2px; /* Superposar l'indicador inferior de 3px a la línia base */
  flex-shrink: 0;
}

.strategic-hub-tab:hover {
  color: var(--li-blue, #0a66c2);
  background: var(--bg-surface-hover, rgba(10, 102, 194, 0.04));
}

.strategic-hub-tab.active {
  color: var(--li-blue, #0a66c2);
  border-bottom-color: var(--li-blue, #0a66c2);
  background: var(--bg-surface-hover, rgba(10, 102, 194, 0.06));
  font-weight: 700;
}

.strategic-hub-tab-badge {
  display: inline-block;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 12px;
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary, #64748b);
  border: 1px solid var(--border, #e2e8f0);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.strategic-hub-tab.active .strategic-hub-tab-badge {
  background: #e8f0fe;
  color: #1a56db;
  border-color: #bfdbfe;
}

body.dark-mode .strategic-hub-tab.active .strategic-hub-tab-badge {
  background: rgba(10, 102, 194, 0.18);
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.25);
}

.strategic-hub-panel {
  padding: 20px 24px;
}

@media (max-width: 600px) {
  .strategic-hub-nav {
    padding: 6px 10px 0;
    gap: 4px;
  }
  .strategic-hub-tab {
    padding: 10px 12px;
    font-size: 0.85rem;
    gap: 6px;
  }
  .strategic-hub-tab-badge {
    max-width: 220px;
    font-size: 0.68rem;
    padding: 1px 6px;
    text-align: left;
  }
  .strategic-hub-panel {
    padding: 14px;
  }
}

/* ── Contenidor de l'informe estratègic ── */
.consultor-strategic-report {
  margin-top: 20px;
  animation: strategicFadeIn 0.5s ease-out both;
}
@keyframes strategicFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.consultor-strategic-report-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(90deg, #1a2e5e 0%, #1d4ed8 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: #fbbf24;
}
.consultor-strategic-report-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

/* ── Targeta de diagnosi de senioritat ── */
.consultor-seniority-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-top: none;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.consultor-seniority-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.consultor-seniority-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.consultor-seniority-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.badge-compensat { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.badge-gap       { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.badge-ok        { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

.consultor-seniority-resum {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.consultor-seniority-justificacio {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-surface-hover);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--li-blue);
}
.consultor-seniority-eqf-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  padding: 10px 8px;
  background: var(--bg-surface-hover);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  width: 100%;
  margin: 0 auto;
}
.consultor-seniority-eqf-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  min-width: 0;
  gap: 2px;
}
.consultor-seniority-eqf-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}
.consultor-seniority-eqf-value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--li-blue);
  line-height: 1;
  text-align: center;
}
.consultor-seniority-eqf-value.text-success { color: #1e8e3e; }
.consultor-seniority-eqf-value.text-warning  { color: #e6a817; }
.consultor-seniority-eqf-arrow {
  font-size: 1.1rem;
  color: var(--text-secondary);
  align-self: center;
  flex-shrink: 0;
  text-align: center;
  user-select: none;
  padding: 0 2px;
}

@media (min-width: 600px) {
  .consultor-seniority-eqf-row {
    gap: 12px;
    padding: 12px 16px;
  }
  .consultor-seniority-eqf-label {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }
  .consultor-seniority-eqf-value {
    font-size: 2rem;
  }
  .consultor-seniority-eqf-arrow {
    font-size: 1.5rem;
    padding: 0;
  }
}

/* ── Secció d'iniciatives de formació / eixos competencials ── */
.consultor-initiatives-section {
  display: flex;
  flex-direction: column;
}
.consultor-initiatives-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 14px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-top: none;
}
.consultor-initiatives-header svg {
  color: var(--li-blue);
  flex-shrink: 0;
}
.consultor-initiatives-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

/* ── Graella d'eixos competencials ── */
.consultor-axis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-top: none;
}
@media (min-width: 768px) {
  .consultor-axis-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .consultor-axis-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Llegenda de colors d'estat (al peu de la graella) ── */
.consultor-axis-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-light, #e2e8f0);
  border-top: none;
}
.consultor-legend-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  font-size: 0.84rem;
}
.consultor-legend-header svg {
  color: var(--li-blue, #0a66c2);
  flex-shrink: 0;
}
.consultor-legend-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .consultor-legend-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.consultor-legend-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
}
.consultor-legend-card.legend-card-achieved {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.consultor-legend-card.legend-card-recommended {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.consultor-legend-card.legend-card-pending {
  background: #fefce8;
  border-color: #fef08a;
}
.consultor-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  flex-shrink: 0;
}
.consultor-legend-pill.status-assolit {
  background: #dcfce7;
  color: #166534;
}
.consultor-legend-pill.status-recomanat {
  background: #dbeafe;
  color: #1d4ed8;
}
.consultor-legend-pill.status-pendent {
  background: #fef9c3;
  color: #854d0e;
}
.consultor-legend-desc {
  font-size: 0.78rem;
  color: var(--text-secondary, #475569);
  line-height: 1.35;
}

.consultor-axis-card {
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.2s, transform 0.15s;
}
.consultor-axis-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.consultor-axis-card.axis-achieved {
  background: #f0fdf4;
  border-color: #86efac;
}
.consultor-axis-card.axis-recommended {
  background: #eff6ff;
  border-color: #93c5fd;
}
.consultor-axis-card.axis-pending {
  background: #fefce8;
  border-color: #fde047;
}

.consultor-axis-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.consultor-axis-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.axis-achieved .consultor-axis-icon  { background: #dcfce7; color: #166534; }
.axis-recommended .consultor-axis-icon { background: #dbeafe; color: #1d4ed8; }
.axis-pending .consultor-axis-icon   { background: #fef9c3; color: #854d0e; }

.consultor-axis-title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.consultor-axis-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}
.consultor-axis-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  width: fit-content;
}
.consultor-axis-status-pill.status-assolit {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
.consultor-axis-status-pill.status-recomanat {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}
.consultor-axis-status-pill.status-pendent {
  background: #fef9c3;
  color: #854d0e;
  border-color: #fde047;
}

.consultor-axis-justification {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.consultor-axis-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
}

.consultor-axis-row {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.consultor-axis-label {
  font-weight: 700;
  color: var(--text-primary);
}

.consultor-axis-val {
  color: var(--text-secondary);
}

.consultor-axis-val.val-current {
  color: var(--text-primary);
}

.consultor-axis-val.val-rec {
  color: var(--li-blue);
  font-weight: 600;
}

.consultor-axis-redundancy-alert {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
  background: #fffbeb;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid #f59e0b;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.consultor-axis-redundancy-alert svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: #f59e0b;
}

.consultor-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  line-height: 1.3;
}

/* ── Graella de mètriques al peu de les targetes d'eix ── */
.consultor-axis-metrics-table {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.consultor-metrics-row {
  display: grid;
  gap: 4px;
  align-items: center;
  text-align: center;
}
.consultor-metrics-row.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.consultor-metrics-row.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.consultor-metrics-header .consultor-metric-cell {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.consultor-metrics-values .consultor-metric-cell {
  display: flex;
  justify-content: center;
}
.consultor-metrics-values .consultor-badge {
  font-size: 0.7rem;
  padding: 3px 6px;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.consultor-axis-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.badge-esfor-baix  { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.badge-esfor-mitja { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.badge-esfor-alt   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-impacte-alt  { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-impacte-mitja{ background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.badge-impacte-baix { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }

/* ── Full de ruta ── */
.consultor-roadmap-card {
  margin: 0;
  padding: 18px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.consultor-roadmap-card:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-bottom: 20px;
}
.consultor-roadmap-title {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--li-blue-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.consultor-roadmap-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.consultor-roadmap-step p {
  margin: 4px 0 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.consultor-roadmap-step strong {
  font-size: 0.85rem;
  color: var(--text-primary);
}
.consultor-roadmap-step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--li-blue);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.consultor-roadmap-step-num-2 {
  background: #0ea5e9;
}

/* ── Caixa de línies desaconsellades ── */
.consultor-antirec-box {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.consultor-antirec-title {
  margin: 0 0 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #c2410c;
  display: flex;
  align-items: center;
  gap: 6px;
}
.consultor-antirec-desc {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #9a3412;
}
.consultor-antirec-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.consultor-antirec-item {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7c2d12;
  padding: 5px 10px;
  background: #ffedd5;
  border-radius: var(--radius-sm);
  border: 1px solid #fed7aa;
}

/* ── Targeta de resum del perfil professional auditat ── */
.consultor-profile-summary-card {
  margin: 0;
  padding: 16px 20px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-top: none;
  border-radius: 0;
}

body.dark-mode .consultor-profile-summary-card {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(51, 65, 85, 0.7);
}

.consultor-profile-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  color: var(--primary, #0073b1);
}

body.dark-mode .consultor-profile-summary-header {
  border-bottom-color: rgba(51, 65, 85, 0.6);
  color: #38bdf8;
}

.consultor-profile-summary-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.consultor-profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 16px;
}

.consultor-profile-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.consultor-profile-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

body.dark-mode .consultor-profile-label {
  color: #94a3b8;
}

.consultor-profile-value {
  font-size: 0.86rem;
  font-weight: 600;
  color: #1e293b;
  word-break: break-word;
}

body.dark-mode .consultor-profile-value {
  color: #f1f5f9;
}

.consultor-profile-value.highlight {
  color: var(--primary, #0073b1);
  font-weight: 700;
}

body.dark-mode .consultor-profile-value.highlight {
  color: #38bdf8;
}

.consultor-profile-subdesc {
  font-size: 0.74rem;
  color: #64748b;
  font-style: italic;
  margin-top: 2px;
  line-height: 1.25;
}

body.dark-mode .consultor-profile-subdesc {
  color: #94a3b8;
}

@media print {
  .consultor-profile-summary-card {
    margin: 10px 0;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #cc-strategic-cta, .info-alert.alert-warning {
    display: none !important;
  }
}


/* --- SECTION: features-examina.css --- */
/* EXAMINA OFERTA UI */
.dual-input-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.dual-input-container.single-column {
  grid-template-columns: 1fr;
  max-width: 500px;
}

.input-option-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}

.input-option-card:focus-within {
  border-color: var(--li-blue-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.option-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--li-blue);
  margin-bottom: 4px;
}

.option-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.4;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  pointer-events: none;
}

.input-with-icon input,
.input-with-icon select {
  padding-left: 32px;
  width: 100%;
}

.manual-entry-textarea {
  flex-grow: 1;
  min-height: 140px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.875rem;
  resize: none;
  background: #fdfdfd;
}

.manual-entry-textarea:focus {
  border-color: var(--li-blue);
  box-shadow: 0 0 0 1px var(--li-blue);
  outline: none;
}

.analysis-controls {
  grid-column: 1 / -1;
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-start;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
  animation: slideUp 0.4s ease;
}

.comparison-column {
  display: flex;
  flex-direction: column;
  background-color: white !important;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.column-content {
  padding: 24px;
  height: 650px;
  flex: 1;
  overflow-y: auto;
}

#panel-comparativa-perfil-cv .comparison-column .column-content,
#col-oferta .column-content,
#col-cv .column-content {
  height: 650px;
  max-height: 650px;
}

#panel-construeix-cv .column-content {
  height: 700px;
  max-height: 700px;
}

#col-analisi {
  grid-column: 1 / -1;
}

/* GLOBAL COMPATIBILITY INDICATOR */
.global-indicator-card {
  grid-column: 1 / -1;
  background: white;
  padding: 24px 32px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.global-bar-container {
  width: 100%;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(to right, #e74c3c 0%, #e74c3c 50%, #f39c12 50%, #f39c12 75%, #2ecc71 75%, #2ecc71 100%);
  position: relative;
  margin-top: 20px;
}

.global-marker {
  position: absolute;
  top: -12px;
  height: 44px;
  width: 4px;
  background: #111;
  border-radius: 4px;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 0 0 2px white;
  transition: left 0.5s ease;
}

.marker-triangle {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #111;
}

/* ANALYSIS DASHBOARD */
.analysis-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  animation: slideUp 0.4s ease-out;
  width: 100%;
}

@media (min-width: 900px) {
  .analysis-dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
}

.analysis-item {
  background: #fff;
  border: 1px solid #e1e9ee;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.analysis-item:hover {
  border-color: var(--li-blue-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.analysis-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.analysis-summary::-webkit-details-marker {
  display: none;
}

.analysis-summary::after {
  content: "▼";
  font-size: 0.8rem;
  color: var(--li-blue);
  transition: transform 0.3s ease;
  margin-left: 12px;
  margin-top: 5px;
  opacity: 0.8;
  display: inline-block;
  font-weight: bold;
}

details[open].analysis-item .analysis-summary::after {
  transform: rotate(180deg);
}

.analysis-info {
  flex-grow: 1;
}

.analysis-label {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.analysis-value {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.status-indicator {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.status-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.status-circle.green {
  background-color: #28a745;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.4);
}

.status-circle.amber {
  background-color: #ffc107;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
}

.status-circle.red {
  background-color: #dc3545;
  box-shadow: 0 0 10px rgba(220, 53, 69, 0.4);
}

.analysis-details {
  padding: 0 16px 16px 16px;
  border-top: 1px solid #f1f5f9;
  margin-top: 8px;
  padding-top: 16px;
  animation: fadeIn 0.3s ease;
}

.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.kpi-column h5 {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 700;
}

.kpi-column p {
  font-size: 0.85rem;
  line-height: 1.5;
}

.kpi-disclaimer {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: #f8fafc;
  padding: 10px;
  border-radius: 6px;
  border-left: 3px solid #cbd5e1;
}

/* EXPERT CONCLUSIONS */
.expert-conclusions-card {
  grid-column: 1 / -1;
  background: var(--li-blue-faint);
  border: 1px solid var(--li-blue-light);
  border-left: 6px solid var(--li-blue);
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
}

.expert-conclusions-card ul {
  list-style: disc !important;
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding-left: 20px !important;
}

.expert-conclusions-card li {
  list-style: disc !important;
  list-style-type: disc !important;
  margin-bottom: 6px;
}

/* RESULT PANEL VISUAL STATES */
.result-panel {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.result-panel.status-success {
  background-color: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

.result-panel.status-error {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
}

.result-panel.status-stale {
  background-color: #fefce8 !important;
  border-color: #fef08a !important;
}

@media (max-width: 1024px) {
  .comparison-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .dual-input-container,
  .comparison-grid {
    grid-template-columns: 1fr;
  }
}

/* Base styles for Next Steps action cards in Examina Oferta */
.next-steps-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px 0 16px 0;
  background: transparent;
  width: 100%;
}

.next-steps-container .next-step-card-btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 10px;
  box-sizing: border-box;
}

#next-steps-disclaimer {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 900px) {
  .next-steps-container {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .next-steps-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 400px) {
  .next-steps-container {
    grid-template-columns: 1fr;
  }
}

.expert-response-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  background: #f8f9fa;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-radius: 0;
  font-size: 0.9rem;
  margin-top: 16px;
  margin-left: -24px;
  margin-right: -24px;
  width: calc(100% + 48px);
  box-sizing: border-box;
}

/* FLATTEN INTERNAL CONTAINERS IN ANALYSIS COLUMN TO GAIN WIDTH SPACE */
#col-analisi .global-indicator-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 24px !important;
}

#col-analisi #oferta-next-steps-area.collapsible-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 24px !important;
}

/* STATUS RIBBON (Cinturó de semàfors d'Examina Oferta) */
.oferta-status-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  margin-top: 14px;
  margin-bottom: 20px;
  align-items: center;
}

.oferta-ribbon-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

.oferta-ribbon-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.8rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid var(--border, #cbd5e1);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-primary, #334155);
  font-family: inherit;
  outline: none;
}

.oferta-ribbon-pill:hover {
  border-color: var(--li-blue, #0a66c2);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(10, 102, 194, 0.12);
}

.oferta-ribbon-pill.green-accent {
  border-left: 4px solid #22c55e;
}
.oferta-ribbon-pill.amber-accent {
  border-left: 4px solid #f59e0b;
  background: #fffdf5;
}
.oferta-ribbon-pill.red-accent {
  border-left: 4px solid #ef4444;
  background: #fef2f2;
}

.oferta-ribbon-pill .ribbon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.oferta-ribbon-pill .ribbon-dot.green { background: #22c55e; }
.oferta-ribbon-pill .ribbon-dot.amber { background: #f59e0b; }
.oferta-ribbon-pill .ribbon-dot.red { background: #ef4444; }

@keyframes kpiHighlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(10, 102, 194, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(10, 102, 194, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(10, 102, 194, 0); }
}

.kpi-highlight-pulse {
  animation: kpiHighlightPulse 1.2s ease-out;
  border-color: var(--li-blue, #0a66c2) !important;
}

#col-analisi #oferta-kpis-collapsible.collapsible-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
  margin-bottom: 24px !important;
}

#col-analisi #oferta-next-steps-area .collapsible-header {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  margin-bottom: 12px !important;
}

#col-analisi #oferta-kpis-collapsible .collapsible-header {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--border, #e2e8f0) !important;
  margin-bottom: 16px !important;
  cursor: default !important;
}

#col-analisi .collapsible-header .chevron {
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

#col-analisi #oferta-next-steps-area .collapsible-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

#col-analisi #oferta-kpis-collapsible .collapsible-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#col-analisi #oferta-next-steps-area.active .collapsible-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

#col-analisi #oferta-kpis-collapsible.active .collapsible-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#col-analisi .analysis-item {
  background: #ffffff !important;
  border: 1px solid var(--border-light, #edf2f7) !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
}

#col-analisi .analysis-item:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

#col-analisi .analysis-item.is-alert-amber {
  border-left: 4px solid #f59e0b !important;
  background: #fffdfa !important;
}

#col-analisi .analysis-item.is-alert-red {
  border-left: 4px solid #ef4444 !important;
  background: #fef8f8 !important;
}

#col-analisi .analysis-item.is-success-green {
  border-left: 4px solid #22c55e !important;
}

#col-analisi .analysis-summary {
  padding: 12px 16px !important;
  cursor: pointer !important;
}

#col-analisi .analysis-details {
  padding: 14px 16px 16px 16px !important;
  background: var(--bg-secondary, #f8fafc) !important;
  border-top: 1px solid var(--border-light, #edf2f7) !important;
}

#col-analisi .analysis-item.is-alert-amber .analysis-details {
  background: #fffdf5 !important;
}

#col-analisi .analysis-item.is-alert-red .analysis-details {
  background: #fef8f8 !important;
}

#col-analisi .analysis-item:last-child {
  border-bottom: 1px solid var(--border-light, #edf2f7) !important;
}

@media (max-width: 600px) {
  .oferta-status-ribbon {
    padding: 10px;
    gap: 6px;
  }
  .oferta-ribbon-pill {
    padding: 4px 9px;
    font-size: 0.75rem;
  }
  .oferta-ribbon-title {
    width: 100%;
    margin-bottom: 2px;
  }
}

@media (max-width: 768px) {
  #col-analisi .column-content {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* EXPERT ANALYSIS TABS */
.expert-tabs-bar {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border-light, #e1e9ee);
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.expert-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary, #666);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  border-radius: 6px 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.expert-tab-btn:hover {
  color: var(--li-blue, #0a66c2);
  background: var(--bg-surface-hover, rgba(10, 102, 194, 0.04));
}

.expert-tab-btn.active {
  color: var(--li-blue, #0a66c2);
  border-bottom-color: var(--li-blue, #0a66c2);
  background: var(--bg-surface-hover, rgba(10, 102, 194, 0.06));
  font-weight: 700;
}

.expert-tab-content {
  animation: fadeIn 0.25s ease-in-out;
}

@media print {
  .expert-tabs-bar {
    display: none !important;
  }
  .expert-tab-content {
    display: block !important;
    margin-bottom: 24px !important;
    animation: none !important;
  }
}

/* ROLE COMPARISON & TRANSFERABILITY MATRIX */
.role-comparison-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e1e9ee);
  border-radius: var(--radius-md, 8px);
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.role-comparison-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  flex-wrap: wrap;
}

.role-comparison-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.role-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .role-comparison-grid {
    grid-template-columns: 1fr;
  }
}

.role-comparison-col {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.role-comparison-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.role-comparison-role-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
}

.role-comparison-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.role-comparison-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.transferability-toggle-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-surface-hover, #f8fafc);
  color: var(--text-primary, #1e293b);
  margin-top: 8px;
  cursor: pointer;
  text-align: left;
  white-space: normal;
  box-sizing: border-box;
  transition: background-color var(--transition, 0.2s ease), border-color var(--transition, 0.2s ease);
}

.transferability-toggle-btn:hover {
  background: var(--bg-secondary, #f1f5f9);
  border-color: var(--border, #cbd5e1);
}

.transferability-toggle-btn span {
  flex: 1;
  line-height: 1.35;
  text-align: left;
  word-break: break-word;
  overflow-wrap: break-word;
}

.transferability-toggle-btn .transferability-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}

.transferability-matrix-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-light, #e2e8f0);
}

.transferability-block {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 6px;
  padding: 12px 14px;
}

.transferability-block-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary, #334155);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 480px) {
  .role-comparison-card {
    padding: 14px 12px;
  }
  .transferability-toggle-btn {
    padding: 8px 10px;
    font-size: 0.78rem;
    gap: 8px;
  }
  .role-comparison-pill {
    font-size: 0.74rem;
    padding: 4px 8px;
  }
}




/* --- SECTION: features-shared.css --- */
/* ESCO Autocomplete Suggestions */
.esco-suggestions,
.esco-suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 250px;
  overflow-y: auto;
}

.esco-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--li-blue-faint);
  transition: background var(--transition);
  text-align: left;
}

.esco-suggestion-item:last-child {
  border-bottom: none;
}

.esco-suggestion-item:hover {
  background: var(--li-blue-faint);
}

.esco-suggestion-item span:first-child {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--li-blue);
}

.esco-extra {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* PROMINENT ACTIONS & LOADERS */
.prominent-action-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.contextual-loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--li-blue-faint);
  border-top-color: var(--li-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

/* AI ADVICE / EXPANDABLE REPORTS */
.expandable-container {
  position: relative;
  width: 100%;
}

.expandable-content {
  position: relative;
  max-height: 140px;
  overflow: hidden !important;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  width: 100%;
}

.expandable-content.expanded {
  max-height: 5000px !important;
}

.expandable-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, #f8f9fa);
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.expandable-content.expanded .expandable-overlay {
  opacity: 0;
}

.expand-toggle-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  color: var(--li-blue);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.expand-toggle-btn:hover {
  background: var(--li-blue-faint);
}

.ia-response-content h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--li-blue);
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.ia-response-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 16px;
  margin-bottom: 8px;
}

.ia-response-content p {
  line-height: 1.6;
  margin-bottom: 12px;
}

.ia-response-content ul,
.ia-response-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.ia-response-content li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.ia-response-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* RESPONSIVE SHARED FEATURES */
@media (max-width: 1200px) {
  .esco-insights-grid {
    grid-template-columns: 1fr;
  }

  .insight-maturity {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .maturity-info {
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  .ai-advice-box {
    padding: 12px;
  }
}

/* --- REUSABLE MARKET GRID (4 & 5 COLUMNS) --- */
.market-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.market-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 1100px) {
  .market-grid-5 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .market-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .market-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {

  .market-grid-4,
  .market-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {

  .market-grid-4,
  .market-grid-5 {
    grid-template-columns: 1fr;
  }
}

.market-stat-item.small {
  padding: 16px;
  background: #f8f9fa;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.market-stat-item.small.compressed {
  padding: 8px 10px;
}

.market-stat-item.small .market-stat-value {
  font-size: 1.5rem;
}

.market-stat-item.small.compressed .market-stat-value {
  font-size: 1.25rem;
}

.market-stat-item.small.compressed .market-stat-label {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-diff-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

.stat-diff-badge.plus {
  background: #fee2e2;
  color: #b21414;
}

.stat-diff-badge.minus {
  background: #e6fffa;
  color: #0d9488;
}

.market-stat-item.small .market-trend-enriched {
  padding: 4px 8px;
  gap: 8px;
  margin-left: 0;
  margin-top: 0;
  width: 100%;
  justify-content: space-between;
}

.market-stat-item.small .market-trend-enriched .trend-svg-container {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.market-stat-item.small .market-trend-enriched .trend-svg-container svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Unified Match Header Styles */
.unified-match-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

.unified-match-metadata {
  flex: 1 1 350px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  text-align: left;
}

.unified-match-action-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 100%;
  box-sizing: border-box;
}

.match-percent-badge {
  margin-left: auto;
}

.unified-match-date {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.8;
  text-align: right;
  margin-top: 2px;
  width: 100%;
}

.unified-match-link {
  font-size: 0.75rem;
  color: var(--li-blue);
  text-decoration: none;
  display: block;
  word-break: break-all;
  max-width: 100%;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .unified-match-action-block {
    align-items: stretch;
    flex: 1 1 100%;
  }

  .unified-match-action-block .match-percent-badge {
    align-self: flex-end;
  }

  .unified-match-date {
    text-align: left;
  }
}

/* Dropdown per a descàrregues del CV */
.cv-download-dropdown-container {
  position: relative;
  display: inline-block;
  flex: 1 1 auto;
}

.cv-download-dropdown-container .secondary-btn.compact {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cv-download-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: white;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
  min-width: 160px;
  display: none;
  flex-direction: column;
  z-index: 100;
  padding: 6px 0;
  overflow: hidden;
}

.cv-download-dropdown-menu.show {
  display: flex;
}

.cv-download-dropdown-item {
  padding: 8px 16px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  width: 100%;
  display: block;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.cv-download-dropdown-item:hover {
  background: var(--bg-secondary, #f8fafc);
  color: var(--li-blue);
}

/* Popover de personalització de foto al CV */
.cv-photo-popover-container {
  position: relative;
  display: inline-flex;
  flex: 1.3 1 130px;
  min-width: 0;
}

.cv-photo-trigger-btn {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--li-blue);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--bg-surface, #ffffff);
  color: var(--li-blue);
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
}

.cv-photo-trigger-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: left;
}

.cv-photo-trigger-btn:hover {
  border-color: var(--li-blue);
  background: var(--li-blue-faint, #f0f7ff);
}

.cv-photo-trigger-btn:focus-visible {
  border-color: var(--li-blue);
  box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.15);
}

.cv-photo-trigger-btn .cv-chevron {
  transition: transform 0.2s ease;
  color: var(--li-blue);
  flex-shrink: 0;
}

.cv-photo-trigger-btn svg:first-child {
  flex-shrink: 0;
  stroke: var(--li-blue);
}

.cv-photo-trigger-btn[aria-expanded="true"] .cv-chevron {
  transform: rotate(180deg);
}

.cv-photo-popover-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  min-width: 250px;
  max-width: 300px;
  z-index: 1050;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cvPopoverFadeIn 0.15s ease-out;
  box-sizing: border-box;
}

@keyframes cvPopoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

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

.cv-popover-header {
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.cv-popover-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.cv-popover-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cv-popover-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
}

/* Control segmentat modern */
.cv-segmented-control {
  display: flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}

.cv-seg-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.cv-seg-btn:hover:not(.active) {
  color: #0f172a;
}

.cv-seg-btn.active {
  background: #ffffff;
  color: var(--li-blue, #0a66c2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Opcions de font d'imatge */
.cv-source-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cv-source-btn {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  text-align: left;
}

.cv-source-btn:hover:not(.disabled) {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.cv-source-btn.active {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--li-blue, #0a66c2);
  font-weight: 600;
}

.cv-source-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Popover unificat de Filtres de Contingut i Antiguitat */
.cv-filter-popover-container {
  position: relative;
  display: inline-flex;
  flex: 2 1 170px;
  min-width: 0;
}

.cv-filter-trigger-btn {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--li-blue);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--bg-surface, #ffffff);
  color: var(--li-blue);
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  white-space: nowrap;
  min-width: 0;
  box-sizing: border-box;
}

.cv-filter-trigger-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: left;
}

.cv-filter-trigger-btn:hover {
  border-color: var(--li-blue);
  background: var(--li-blue-faint, #f0f7ff);
}

.cv-filter-trigger-btn:focus-visible {
  border-color: var(--li-blue);
  box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.15);
}

.cv-filter-trigger-btn.has-active-filter {
  border-color: var(--li-blue);
  background: var(--li-blue-faint, #f0f7ff);
  color: var(--li-blue);
}

.cv-filter-trigger-btn .cv-chevron {
  transition: transform 0.2s ease;
  color: var(--li-blue);
  flex-shrink: 0;
}

.cv-filter-trigger-btn svg:first-child {
  flex-shrink: 0;
  stroke: var(--li-blue);
}

.cv-filter-trigger-btn[aria-expanded="true"] .cv-chevron {
  transform: rotate(180deg);
}

.cv-filter-popover-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  min-width: 290px;
  max-width: 330px;
  z-index: 1050;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: cvPopoverFadeIn 0.15s ease-out;
  box-sizing: border-box;
}

/* Stepper numèric per a l'antiguitat */
.cv-stepper-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
}

.cv-stepper-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  flex: 1;
}

.cv-stepper-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cv-stepper-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s ease;
  user-select: none;
}

.cv-stepper-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.cv-stepper-btn:active {
  background: #dbeafe;
}

.cv-stepper-input {
  width: 44px;
  height: 28px;
  text-align: center;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  -moz-appearance: textfield;
}

.cv-stepper-input::-webkit-outer-spin-button,
.cv-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cv-stepper-unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}

.cv-popover-tip {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
  margin: 0;
  padding: 0 2px;
}

/* ==========================================================
   AUDITORIA DE MARCA PERSONAL (ESTRUCTURADA)
   ========================================================== */
.comparativa-structured-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.comp-hero-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.comp-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.comp-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.comp-hero-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.comp-hero-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.comp-dim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  width: 100%;
}

.comp-dim-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-xs);
}

.comp-dim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.comp-dim-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.comp-badge-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.comp-dim-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.comp-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.comp-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 8px 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comp-list-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-xs);
}

.comp-list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.comp-list-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.comp-list-item-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.comp-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  width: 100%;
}

.comp-synergy-box {
  background: var(--bg-secondary);
  border-left: 4px solid var(--li-blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 16px;
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.comp-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.comp-action-item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-xs);
}

.comp-action-num {
  background: var(--li-blue);
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.comp-action-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comp-action-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.comp-action-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.comp-action-detail {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

@media print {
  .comparativa-structured-container {
    display: block !important;
    width: 100% !important;
  }

  .comp-section {
    break-inside: auto !important;
    page-break-inside: auto !important;
    margin-top: 14px !important;
    margin-bottom: 12px !important;
    display: block !important;
  }

  .comp-section-title {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  .comp-hero-card,
  .comp-dim-grid,
  .comp-dim-card,
  .comp-list-card,
  .comp-brand-grid,
  .comp-synergy-box,
  .comp-action-item {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .comp-actions-list {
    display: block !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
}




.cv-public-profile-toggle-container {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
}

.cv-toggle-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--li-blue);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--bg-surface, #ffffff);
  color: var(--li-blue);
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition, 0.2s ease);
  white-space: nowrap;
  box-sizing: border-box;
  user-select: none;
}

.cv-toggle-btn:hover {
  border-color: var(--li-blue);
  background: var(--li-blue-faint, #f0f7ff);
  color: var(--li-blue);
}

.cv-toggle-btn.active {
  background: var(--li-blue, #0a66c2) !important;
  color: #ffffff !important;
  border-color: var(--li-blue, #0a66c2) !important;
  box-shadow: 0 2px 6px rgba(10, 102, 194, 0.2);
}

.cv-toggle-btn.active svg {
  stroke: #ffffff !important;
}

.cv-toggle-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

/* ==========================================================
   POPOVER UNIFICAT DE VISIBILITAT DE CAMPS (MOSTRAR)
   ========================================================== */
.cv-header-visibility-popover-container {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
}

.cv-visibility-trigger-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--li-blue);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--bg-surface, #ffffff);
  color: var(--li-blue);
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  white-space: nowrap;
  box-sizing: border-box;
}

.cv-visibility-trigger-btn:hover {
  border-color: var(--li-blue);
  background: var(--li-blue-faint, #f0f7ff);
}

.cv-visibility-trigger-btn:focus-visible {
  border-color: var(--li-blue);
  box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.15);
}

.cv-visibility-trigger-btn .cv-chevron {
  transition: transform 0.2s ease;
  color: var(--li-blue);
  flex-shrink: 0;
}

.cv-visibility-trigger-btn svg:first-child {
  flex-shrink: 0;
  stroke: var(--li-blue);
}

.cv-visibility-trigger-btn[aria-expanded="true"] .cv-chevron {
  transform: rotate(180deg);
}

.cv-visibility-popover-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  min-width: 250px;
  max-width: 300px;
  z-index: 1050;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cvPopoverFadeIn 0.15s ease-out;
  box-sizing: border-box;
}

.cv-visibility-options-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cv-visibility-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.cv-visibility-checkbox-item:hover {
  background: var(--bg-secondary, #f1f5f9);
}

.cv-visibility-checkbox-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--li-blue, #0a66c2);
  margin: 0;
  flex-shrink: 0;
}

.cv-visibility-checkbox-item .cv-checkbox-icon {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--li-blue, #0a66c2);
  flex-shrink: 0;
  line-height: 1;
}

@media (max-width: 768px) {
  .cv-visibility-popover-menu,
  .cv-photo-popover-menu,
  .cv-filter-popover-menu {
    left: 0;
    right: auto;
    min-width: 230px;
    max-width: min(320px, calc(100vw - 24px));
  }
}

/* --- SECTION: flags.css --- */
/* ===================================================
   COUNTRY FLAG GRADIENTS
   (.flag-XX → --country-flag-gradient per a les targetes;
    .lang-flag-strip.flag-XX-strip → background per als dropdowns)
   Regional + EU-27/EEA + Iberoamèrica
   =================================================== */

/* DEFINICIÓ DE LES BANDERES MITJANÇANT GRADIENTS VERTICALS */

/* Unió Europea (UE): Blau marí (#003399) amb franja daurada (#ffcc00) */
.flag-eu {
  --country-flag-gradient: linear-gradient(to bottom, #003399 0%, #003399 42%, #ffcc00 42%, #ffcc00 58%, #003399 58%, #003399 100%);
}

/* França: Blau, Blanc (Gris molt suau), Vermell */
.flag-fr {
  --country-flag-gradient: linear-gradient(to bottom, #00209F 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #d80027 66.66%);
}

.lang-flag-strip.flag-fr-strip {
  background: linear-gradient(to bottom, #00209F 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #d80027 66.66%);
}

/* Itàlia: Verd, Blanc (Gris molt suau), Vermell */
.flag-it {
  --country-flag-gradient: linear-gradient(to bottom, #008c45 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #cd212a 66.66%);
}

.lang-flag-strip.flag-it-strip {
  background: linear-gradient(to bottom, #008c45 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #cd212a 66.66%);
}

/* Espanya: Vermell, Groc, Vermell (proporcions 1:2:1) */
.flag-es {
  --country-flag-gradient: linear-gradient(to bottom, #c60b1e 25%, #ffc72c 25%, #ffc72c 75%, #c60b1e 75%);
}

/* Regne Unit: Blau Reial, Blanc, Vermell, Blanc, Blau Reial (evocació de la Union Jack) */
.flag-uk {
  --country-flag-gradient: linear-gradient(to bottom,
      #012169 0%, #012169 30%,
      #eeeeee 30%, #eeeeee 35%,
      #C8102E 35%, #C8102E 65%,
      #eeeeee 65%, #eeeeee 70%,
      #012169 70%, #012169 100%);
}

/* Catalunya i Territoris de parla catalana: Senyera de 9 franges (5 grogues, 4 vermelles) */
.flag-cat {
  --country-flag-gradient: linear-gradient(to bottom,
      #ffc72c 0%, #ffc72c 11.11%,
      #c60b1e 11.11%, #c60b1e 22.22%,
      #ffc72c 22.22%, #ffc72c 33.33%,
      #c60b1e 33.33%, #c60b1e 44.44%,
      #ffc72c 44.44%, #ffc72c 55.55%,
      #c60b1e 55.55%, #c60b1e 66.66%,
      #ffc72c 66.66%, #ffc72c 77.77%,
      #c60b1e 77.77%, #c60b1e 88.88%,
      #ffc72c 88.88%, #ffc72c 100%);
}

/* Euskadi (Ikurriña colors): Vermell, Blanc, Verd */
.flag-euskadi {
  --country-flag-gradient: linear-gradient(to bottom, #dc241f 33.33%, #ffffff 33.33%, #ffffff 66.66%, #009b48 66.66%);
}

/* Galicia: Blanc, Blau cel, Blanc */
.flag-galicia {
  --country-flag-gradient: linear-gradient(to bottom, #ffffff 33.33%, #009cc6 33.33%, #009cc6 66.66%, #ffffff 66.66%);
}

/* =========================================================
   EU-27 + EEA COUNTRY FLAGS (salary cards + custom dropdowns)
   Format: .flag-XX   → --country-flag-gradient (per la franja de la targeta)
           .lang-flag-strip.flag-XX-strip           → background directe (per custom dropdowns)
   ========================================================= */

/* AT – Àustria: Vermell / Blanc / Vermell */
.flag-at {
  --country-flag-gradient: linear-gradient(to bottom, #ED2939 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #ED2939 66.66%);
}

.lang-flag-strip.flag-at-strip {
  background: linear-gradient(to bottom, #ED2939 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #ED2939 66.66%);
}

/* BE – Bèlgica: Negre / Groc / Vermell */
.flag-be {
  --country-flag-gradient: linear-gradient(to bottom, #000000 33.33%, #FAE042 33.33%, #FAE042 66.66%, #EF3340 66.66%);
}

.lang-flag-strip.flag-be-strip {
  background: linear-gradient(to bottom, #000000 33.33%, #FAE042 33.33%, #FAE042 66.66%, #EF3340 66.66%);
}

/* BG – Bulgària: Blanc / Verd / Vermell */
.flag-bg {
  --country-flag-gradient: linear-gradient(to bottom, #eeeeee 33.33%, #00966E 33.33%, #00966E 66.66%, #D01C1F 66.66%);
}

.lang-flag-strip.flag-bg-strip {
  background: linear-gradient(to bottom, #eeeeee 33.33%, #00966E 33.33%, #00966E 66.66%, #D01C1F 66.66%);
}

/* CY – Xipre: Blanc / Taronja / Verd (simplificació) */
.flag-cy {
  --country-flag-gradient: linear-gradient(to bottom, #eeeeee 33.33%, #F08000 33.33%, #F08000 66.66%, #4E7B2E 66.66%);
}

.lang-flag-strip.flag-cy-strip {
  background: linear-gradient(to bottom, #eeeeee 33.33%, #F08000 33.33%, #F08000 66.66%, #4E7B2E 66.66%);
}

/* CZ – República Txeca: Blau / Blanc / Vermell */
.flag-cz {
  --country-flag-gradient: linear-gradient(to bottom, #11457E 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #D7141A 66.66%);
}

.lang-flag-strip.flag-cz-strip {
  background: linear-gradient(to bottom, #11457E 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #D7141A 66.66%);
}

/* DE – Alemanya: Negre / Vermell / Groc */
.flag-de {
  --country-flag-gradient: linear-gradient(to bottom, #000000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCE00 66.66%);
}

.lang-flag-strip.flag-de-strip {
  background: linear-gradient(to bottom, #000000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCE00 66.66%);
}

/* DK – Dinamarca: Vermell / Blanc / Vermell (creu nòrdica) */
.flag-dk {
  --country-flag-gradient: linear-gradient(to bottom, #C60C30 40%, #eeeeee 40%, #eeeeee 60%, #C60C30 60%);
}

.lang-flag-strip.flag-dk-strip {
  background: linear-gradient(to bottom, #C60C30 40%, #eeeeee 40%, #eeeeee 60%, #C60C30 60%);
}

/* EE – Estònia: Blau / Negre / Blanc */
.flag-ee {
  --country-flag-gradient: linear-gradient(to bottom, #0072CE 33.33%, #000000 33.33%, #000000 66.66%, #eeeeee 66.66%);
}

.lang-flag-strip.flag-ee-strip {
  background: linear-gradient(to bottom, #0072CE 33.33%, #000000 33.33%, #000000 66.66%, #eeeeee 66.66%);
}

/* FI – Finlàndia: Blanc / Blau / Blanc (creu nòrdica) */
.flag-fi {
  --country-flag-gradient: linear-gradient(to bottom, #eeeeee 40%, #003580 40%, #003580 60%, #eeeeee 60%);
}

.lang-flag-strip.flag-fi-strip {
  background: linear-gradient(to bottom, #eeeeee 40%, #003580 40%, #003580 60%, #eeeeee 60%);
}

/* GR – Grècia: 9 franges Blau / Blanc alternants */
.flag-gr {
  --country-flag-gradient: linear-gradient(to bottom, #0D5EAF 0% 11.11%, #eeeeee 11.11% 22.22%, #0D5EAF 22.22% 33.33%, #eeeeee 33.33% 44.44%, #0D5EAF 44.44% 55.55%, #eeeeee 55.55% 66.66%, #0D5EAF 66.66% 77.77%, #eeeeee 77.77% 88.88%, #0D5EAF 88.88% 100%);
}

.lang-flag-strip.flag-gr-strip {
  background: linear-gradient(to bottom, #0D5EAF 0% 11.11%, #eeeeee 11.11% 22.22%, #0D5EAF 22.22% 33.33%, #eeeeee 33.33% 44.44%, #0D5EAF 44.44% 55.55%, #eeeeee 55.55% 66.66%, #0D5EAF 66.66% 77.77%, #eeeeee 77.77% 88.88%, #0D5EAF 88.88% 100%);
}

/* HR – Croàcia: Vermell / Blanc / Blau */
.flag-hr {
  --country-flag-gradient: linear-gradient(to bottom, #FF0000 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #171796 66.66%);
}

.lang-flag-strip.flag-hr-strip {
  background: linear-gradient(to bottom, #FF0000 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #171796 66.66%);
}

/* HU – Hongria: Vermell / Blanc / Verd */
.flag-hu {
  --country-flag-gradient: linear-gradient(to bottom, #CE2939 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #477050 66.66%);
}

.lang-flag-strip.flag-hu-strip {
  background: linear-gradient(to bottom, #CE2939 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #477050 66.66%);
}

/* IE – Irlanda: Verd / Blanc / Taronja */
.flag-ie {
  --country-flag-gradient: linear-gradient(to bottom, #169B62 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #FF883E 66.66%);
}

.lang-flag-strip.flag-ie-strip {
  background: linear-gradient(to bottom, #169B62 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #FF883E 66.66%);
}

/* LT – Lituània: Groc / Verd / Vermell */
.flag-lt {
  --country-flag-gradient: linear-gradient(to bottom, #FDB913 33.33%, #006A44 33.33%, #006A44 66.66%, #C1272D 66.66%);
}

.lang-flag-strip.flag-lt-strip {
  background: linear-gradient(to bottom, #FDB913 33.33%, #006A44 33.33%, #006A44 66.66%, #C1272D 66.66%);
}

/* LU – Luxemburg: Vermell / Blanc / Blau clar */
.flag-lu {
  --country-flag-gradient: linear-gradient(to bottom, #EF3340 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #00A3E0 66.66%);
}

.lang-flag-strip.flag-lu-strip {
  background: linear-gradient(to bottom, #EF3340 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #00A3E0 66.66%);
}

/* LV – Letònia: Carmesí / Blanc / Carmesí */
.flag-lv {
  --country-flag-gradient: linear-gradient(to bottom, #9E3039 40%, #eeeeee 40%, #eeeeee 60%, #9E3039 60%);
}

.lang-flag-strip.flag-lv-strip {
  background: linear-gradient(to bottom, #9E3039 40%, #eeeeee 40%, #eeeeee 60%, #9E3039 60%);
}

/* MT – Malta: Blanc / Vermell */
.flag-mt {
  --country-flag-gradient: linear-gradient(to bottom, #eeeeee 50%, #CF142B 50%);
}

.lang-flag-strip.flag-mt-strip {
  background: linear-gradient(to bottom, #eeeeee 50%, #CF142B 50%);
}

/* NL – Països Baixos: Vermell / Blanc / Blau */
.flag-nl {
  --country-flag-gradient: linear-gradient(to bottom, #AE1C28 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #21468B 66.66%);
}

.lang-flag-strip.flag-nl-strip {
  background: linear-gradient(to bottom, #AE1C28 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #21468B 66.66%);
}

/* PL – Polònia: Blanc / Vermell */
.flag-pl {
  --country-flag-gradient: linear-gradient(to bottom, #eeeeee 50%, #DC143C 50%);
}

.lang-flag-strip.flag-pl-strip {
  background: linear-gradient(to bottom, #eeeeee 50%, #DC143C 50%);
}

/* PT – Portugal: Verd / Vermell (franges verticals → representació horitzontal) */
.flag-pt {
  --country-flag-gradient: linear-gradient(to bottom, #006600 40%, #FF0000 40%);
}

.lang-flag-strip.flag-pt-strip {
  background: linear-gradient(to bottom, #006600 40%, #FF0000 40%);
}

/* RO – Romania: Blau / Groc / Vermell (franges verticals → representació horitzontal) */
.flag-ro {
  --country-flag-gradient: linear-gradient(to bottom, #002B7F 33.33%, #FCD116 33.33%, #FCD116 66.66%, #CE1126 66.66%);
}

.lang-flag-strip.flag-ro-strip {
  background: linear-gradient(to bottom, #002B7F 33.33%, #FCD116 33.33%, #FCD116 66.66%, #CE1126 66.66%);
}

/* SE – Suècia: Blau / Groc / Blau (creu nòrdica) */
.flag-se {
  --country-flag-gradient: linear-gradient(to bottom, #006AA7 40%, #FECC02 40%, #FECC02 60%, #006AA7 60%);
}

.lang-flag-strip.flag-se-strip {
  background: linear-gradient(to bottom, #006AA7 40%, #FECC02 40%, #FECC02 60%, #006AA7 60%);
}

/* SI – Eslovènia: Blanc / Blau / Vermell */
.flag-si {
  --country-flag-gradient: linear-gradient(to bottom, #eeeeee 33.33%, #003DA5 33.33%, #003DA5 66.66%, #EC1920 66.66%);
}

.lang-flag-strip.flag-si-strip {
  background: linear-gradient(to bottom, #eeeeee 33.33%, #003DA5 33.33%, #003DA5 66.66%, #EC1920 66.66%);
}

/* SK – Eslovàquia: Blanc / Blau / Vermell */
.flag-sk {
  --country-flag-gradient: linear-gradient(to bottom, #eeeeee 33.33%, #0B4EA2 33.33%, #0B4EA2 66.66%, #EE1C25 66.66%);
}

.lang-flag-strip.flag-sk-strip {
  background: linear-gradient(to bottom, #eeeeee 33.33%, #0B4EA2 33.33%, #0B4EA2 66.66%, #EE1C25 66.66%);
}

/* IS – Islàndia: Blau / Blanc / Vermell */
.flag-is {
  --country-flag-gradient: linear-gradient(to bottom, #003897 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #D72828 66.66%);
}

.lang-flag-strip.flag-is-strip {
  background: linear-gradient(to bottom, #003897 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #D72828 66.66%);
}

/* NO – Noruega: Vermell / Blanc / Blau / Blanc / Vermell (creu nòrdica) */
.flag-no {
  --country-flag-gradient: linear-gradient(to bottom, #EF2B2D 0% 38%, #eeeeee 38% 43%, #002868 43% 57%, #eeeeee 57% 62%, #EF2B2D 62% 100%);
}

.lang-flag-strip.flag-no-strip {
  background: linear-gradient(to bottom, #EF2B2D 0% 38%, #eeeeee 38% 43%, #002868 43% 57%, #eeeeee 57% 62%, #EF2B2D 62% 100%);
}

/* LI – Liechtenstein: Blau / Vermell */
.flag-li {
  --country-flag-gradient: linear-gradient(to bottom, #002B7F 50%, #CE1126 50%);
}

.lang-flag-strip.flag-li-strip {
  background: linear-gradient(to bottom, #002B7F 50%, #CE1126 50%);
}

/* CH – Suïssa: Vermell / Blanc / Vermell (creu) */
.flag-ch {
  --country-flag-gradient: linear-gradient(to bottom, #FF0000 40%, #eeeeee 40%, #eeeeee 60%, #FF0000 60%);
}

.lang-flag-strip.flag-ch-strip {
  background: linear-gradient(to bottom, #FF0000 40%, #eeeeee 40%, #eeeeee 60%, #FF0000 60%);
}

/* TR – Turquia: Vermell / Blanc / Vermell (evocació mitja lluna i estrella blanques sobre fons vermell) */
.flag-tr {
  --country-flag-gradient: linear-gradient(to bottom, #E30A17 40%, #eeeeee 40%, #eeeeee 60%, #E30A17 60%);
}

.lang-flag-strip.flag-tr-strip {
  background: linear-gradient(to bottom, #E30A17 40%, #eeeeee 40%, #eeeeee 60%, #E30A17 60%);
}

/* MA – Marroc: Vermell (fons) / Verd (estrella Sulayman) → representació en franges: Vermell / Verd / Vermell */
.flag-ma {
  --country-flag-gradient: linear-gradient(to bottom, #C1272D 40%, #006233 40%, #006233 60%, #C1272D 60%);
}

.lang-flag-strip.flag-ma-strip {
  background: linear-gradient(to bottom, #C1272D 40%, #006233 40%, #006233 60%, #C1272D 60%);
}

/* DZ – Algèria: Verd / Blanc */
.flag-dz {
  --country-flag-gradient: linear-gradient(to bottom, #006233 50%, #eeeeee 50%);
}

.lang-flag-strip.flag-dz-strip {
  background: linear-gradient(to bottom, #006233 50%, #eeeeee 50%);
}

/* TN – Tunísia: Vermell (dominant) / Blanc / Vermell (evocació del cercle central) */
.flag-tn {
  --country-flag-gradient: linear-gradient(to bottom, #E70013 35%, #eeeeee 35%, #eeeeee 65%, #E70013 65%);
}

.lang-flag-strip.flag-tn-strip {
  background: linear-gradient(to bottom, #E70013 35%, #eeeeee 35%, #eeeeee 65%, #E70013 65%);
}

/* ==========================================================
   IBEROAMÈRICA FLAGS (mapa de desocupació global)
   Format: .flag-XX   → --country-flag-gradient (franja de la targeta)
           .lang-flag-strip.flag-XX-strip → background (custom dropdowns)
   ========================================================== */

/* AR – Argentina: Blau cel / Blanc / Blau cel */
.flag-ar {
  --country-flag-gradient: linear-gradient(to bottom, #74ACDF 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #74ACDF 66.66%);
}

.lang-flag-strip.flag-ar-strip {
  background: linear-gradient(to bottom, #74ACDF 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #74ACDF 66.66%);
}

/* BO – Bolívia: Vermell / Groc / Verd */
.flag-bo {
  --country-flag-gradient: linear-gradient(to bottom, #D52B1E 33.33%, #F4E400 33.33%, #F4E400 66.66%, #007A33 66.66%);
}

.lang-flag-strip.flag-bo-strip {
  background: linear-gradient(to bottom, #D52B1E 33.33%, #F4E400 33.33%, #F4E400 66.66%, #007A33 66.66%);
}

/* BR – Brasil: Verd / Groc (romboide representat com a franges) */
.flag-br {
  --country-flag-gradient: linear-gradient(to bottom, #009C3B 33.33%, #FEDF00 33.33%, #FEDF00 66.66%, #002776 66.66%);
}

.lang-flag-strip.flag-br-strip {
  background: linear-gradient(to bottom, #009C3B 33.33%, #FEDF00 33.33%, #FEDF00 66.66%, #002776 66.66%);
}

/* CL – Xile: Vermell / Blanc / Blau */
.flag-cl {
  --country-flag-gradient: linear-gradient(to bottom, #D52B1E 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #0039A6 66.66%);
}

.lang-flag-strip.flag-cl-strip {
  background: linear-gradient(to bottom, #D52B1E 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #0039A6 66.66%);
}

/* CO – Colòmbia: Groc / Blau / Vermell (proporcions 2:1:1) */
.flag-co {
  --country-flag-gradient: linear-gradient(to bottom, #FCD116 50%, #003087 50%, #003087 75%, #CE1126 75%);
}

.lang-flag-strip.flag-co-strip {
  background: linear-gradient(to bottom, #FCD116 50%, #003087 50%, #003087 75%, #CE1126 75%);
}

/* CR – Costa Rica: Blau / Blanc / Vermell / Blanc / Blau (proporcions 1:1:2:1:1) */
.flag-cr {
  --country-flag-gradient: linear-gradient(to bottom, #002B7F 16.66%, #eeeeee 16.66%, #eeeeee 33.33%, #CE1126 33.33%, #CE1126 66.66%, #eeeeee 66.66%, #eeeeee 83.33%, #002B7F 83.33%);
}

.lang-flag-strip.flag-cr-strip {
  background: linear-gradient(to bottom, #002B7F 16.66%, #eeeeee 16.66%, #eeeeee 33.33%, #CE1126 33.33%, #CE1126 66.66%, #eeeeee 66.66%, #eeeeee 83.33%, #002B7F 83.33%);
}

/* DO – República Dominicana: Blau / Vermell (creu blanca) */
.flag-do {
  --country-flag-gradient: linear-gradient(to bottom, #002D62 40%, #eeeeee 40%, #eeeeee 60%, #CE1126 60%);
}

.lang-flag-strip.flag-do-strip {
  background: linear-gradient(to bottom, #002D62 40%, #eeeeee 40%, #eeeeee 60%, #CE1126 60%);
}

/* EC – Equador: Groc / Blau / Vermell (proporcions 2:1:1) */
.flag-ec {
  --country-flag-gradient: linear-gradient(to bottom, #FFD100 50%, #003DA5 50%, #003DA5 75%, #FF0000 75%);
}

.lang-flag-strip.flag-ec-strip {
  background: linear-gradient(to bottom, #FFD100 50%, #003DA5 50%, #003DA5 75%, #FF0000 75%);
}

/* SV – El Salvador: Blau / Blanc / Blau */
.flag-sv {
  --country-flag-gradient: linear-gradient(to bottom, #0F47AF 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #0F47AF 66.66%);
}

.lang-flag-strip.flag-sv-strip {
  background: linear-gradient(to bottom, #0F47AF 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #0F47AF 66.66%);
}

/* GT – Guatemala: Blau / Blanc / Blau (franges verticals) */
.flag-gt {
  --country-flag-gradient: linear-gradient(to bottom, #4997D0 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #4997D0 66.66%);
}

.lang-flag-strip.flag-gt-strip {
  background: linear-gradient(to bottom, #4997D0 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #4997D0 66.66%);
}

/* HN – Hondures: Blau / Blanc / Blau */
.flag-hn {
  --country-flag-gradient: linear-gradient(to bottom, #0073CF 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #0073CF 66.66%);
}

.lang-flag-strip.flag-hn-strip {
  background: linear-gradient(to bottom, #0073CF 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #0073CF 66.66%);
}

/* MX – Mèxic: Verd / Blanc / Vermell */
.flag-mx {
  --country-flag-gradient: linear-gradient(to bottom, #006847 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #CE1126 66.66%);
}

.lang-flag-strip.flag-mx-strip {
  background: linear-gradient(to bottom, #006847 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #CE1126 66.66%);
}

/* NI – Nicaragua: Blau / Blanc / Blau */
.flag-ni {
  --country-flag-gradient: linear-gradient(to bottom, #3E6EB4 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #3E6EB4 66.66%);
}

.lang-flag-strip.flag-ni-strip {
  background: linear-gradient(to bottom, #3E6EB4 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #3E6EB4 66.66%);
}

/* PA – Panamà: Blau / Vermell / Blanc (quadrants) → representació: Blanc / Blau / Blanc / Vermell */
.flag-pa {
  --country-flag-gradient: linear-gradient(to bottom, #eeeeee 25%, #005293 25%, #005293 50%, #eeeeee 50%, #eeeeee 75%, #D21034 75%);
}

.lang-flag-strip.flag-pa-strip {
  background: linear-gradient(to bottom, #eeeeee 25%, #005293 25%, #005293 50%, #eeeeee 50%, #eeeeee 75%, #D21034 75%);
}

/* PY – Paraguai: Vermell / Blanc / Blau */
.flag-py {
  --country-flag-gradient: linear-gradient(to bottom, #D52B1E 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #0038A8 66.66%);
}

.lang-flag-strip.flag-py-strip {
  background: linear-gradient(to bottom, #D52B1E 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #0038A8 66.66%);
}

/* PE – Perú: Vermell / Blanc / Vermell */
.flag-pe {
  --country-flag-gradient: linear-gradient(to bottom, #D91023 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #D91023 66.66%);
}

.lang-flag-strip.flag-pe-strip {
  background: linear-gradient(to bottom, #D91023 33.33%, #eeeeee 33.33%, #eeeeee 66.66%, #D91023 66.66%);
}

/* UY – Uruguai: Blanc / Blau / Blanc / Blau / Blanc (nou franges) */
.flag-uy {
  --country-flag-gradient: linear-gradient(to bottom, #eeeeee 0% 11.11%, #5486BF 11.11% 22.22%, #eeeeee 22.22% 33.33%, #5486BF 33.33% 44.44%, #eeeeee 44.44% 55.55%, #5486BF 55.55% 66.66%, #eeeeee 66.66% 77.77%, #5486BF 77.77% 88.88%, #eeeeee 88.88% 100%);
}

.lang-flag-strip.flag-uy-strip {
  background: linear-gradient(to bottom, #eeeeee 0% 11.11%, #5486BF 11.11% 22.22%, #eeeeee 22.22% 33.33%, #5486BF 33.33% 44.44%, #eeeeee 44.44% 55.55%, #5486BF 55.55% 66.66%, #eeeeee 66.66% 77.77%, #5486BF 77.77% 88.88%, #eeeeee 88.88% 100%);
}

/* VE – Veneçuela: Groc / Blau / Vermell */
.flag-ve {
  --country-flag-gradient: linear-gradient(to bottom, #CF142B 33.33%, #00247D 33.33%, #00247D 66.66%, #CF142B 66.66%);
}

.lang-flag-strip.flag-ve-strip {
  background: linear-gradient(to bottom, #CF142B 33.33%, #00247D 33.33%, #00247D 66.66%, #CF142B 66.66%);
}



/* --- SECTION: maps.css --- */
/* ===================================================
   GEOSPATIAL & MAP STYLES
   =================================================== */

/* LEAFLET OVERRIDES */
.leaflet-container {
    background: #f0f2f5;
}

.leaflet-tile {
    filter: grayscale(100%) brightness(105%) contrast(90%);
}

/* Millora visual quan el mapa està en pantalla completa */
:fullscreen, :-webkit-full-screen {
    background-color: white !important;
    width: 100vw !important;
    height: 100vh !important;
}

#european-unemployment-map:fullscreen,
#col-leaflet-map:fullscreen,
#bce-inflation-map:fullscreen,
#bce-debt-map:fullscreen,
#european-unemployment-map:-webkit-full-screen,
#col-leaflet-map:-webkit-full-screen,
#bce-inflation-map:-webkit-full-screen,
#bce-debt-map:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    background-color: white !important;
}

.leaflet-container {
  font-family: inherit;
  background-color: #f8fbff;
}

#european-unemployment-map, #col-leaflet-map, #bce-inflation-map, #bce-debt-map {
  margin-left: 4px;
  margin-right: 4px;
  width: calc(100% - 8px) !important;
}

#map-container,
#residence-map {
  position: relative;
  z-index: 1;
}

.custom-div-icon {
  background: none;
  border: none;
}

.map-tooltip,
.map-tooltip-floating {
  background: rgba(25, 25, 25, 0.9) !important;
  border: none !important;
  border-radius: var(--radius-sm, 6px) !important;
  color: white !important;
  padding: 8px 12px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.85rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 9000 !important;
  max-width: 280px;
  line-height: 1.4;
}

.info.legend {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  line-height: 1.5;
  color: #555;
  font-size: 12px;
}

.info.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}

/* COLLAPSIBLE MAP SECTION */
.collapsible-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.collapsible-header {
  position: relative;
  width: 100%;
  padding: 16px 52px 16px 20px;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--text-primary);
  font-weight: 600;
  box-sizing: border-box;
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  padding: 0 20px;
}

.collapsible-section.active .collapsible-content {
  max-height: 4000px;
  padding: 0 20px 20px 20px;
}

.collapsible-header .chevron {
  position: absolute;
  right: 20px;
  top: 18px;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.3s ease;
  margin: 0 !important;
  z-index: 2;
}

.collapsible-section.active .collapsible-header .chevron {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .collapsible-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 46px 14px 16px;
  }
  .collapsible-header .chevron {
    position: absolute;
    right: 16px;
    top: 16px;
  }
  .collapsible-header .header-content {
    order: 1;
    max-width: calc(100% - 10px);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .collapsible-header .btn-header-refresh {
    order: 2;
    margin-left: auto;
    margin-right: 0 !important;
  }
  #subtab-mapes-selector {
    order: 3;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
  }
  #subtab-mapes-selector .chip {
    text-align: center;
    padding: 6px 8px;
    font-size: 0.8rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    line-height: 1.2;
  }
}

/* ===================================================
   COST OF LIVING MAP
   =================================================== */

/* Controls bar */
.col-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin-top: 12px;
  padding: 12px 10px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  overflow-x: auto;
}

/* Metric selector */
.col-metric-selector {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.col-metric-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  white-space: nowrap;
}

.col-metric-btn:hover {
  border-color: var(--li-blue-light);
  color: var(--li-blue);
  background: var(--li-blue-faint);
}

.col-metric-btn.active {
  background: var(--li-blue);
  color: #fff;
  border-color: var(--li-blue);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(10, 102, 194, 0.25);
}

.col-metric-btn svg {
  flex-shrink: 0;
}

/* View toggle */
.col-view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.col-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg-surface);
  border: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}

.col-view-btn+.col-view-btn {
  border-left: 1px solid var(--border);
}

.col-view-btn.active {
  background: var(--li-blue-faint);
  color: var(--li-blue);
  font-weight: 600;
}

.col-view-btn:hover:not(.active) {
  background: var(--bg-secondary);
}

/* Map footer */
.col-map-footer {
  font-size: 0.73rem;
  color: var(--text-secondary);
  opacity: 0.75;
  font-style: italic;
  text-align: right;
  margin-top: 8px;
}

/* Map legend */
.col-map-legend {
  position: absolute;
  bottom: 28px;
  right: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.75rem;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 800;
  min-width: 160px;
}

.col-legend-title {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.col-legend-gradient {
  display: flex;
  height: 12px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.col-legend-step {
  flex: 1;
}

.col-legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Tooltips Leaflet */
.col-city-tooltip-wrapper .leaflet-tooltip {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.col-city-tooltip {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: 'Inter', sans-serif;
}

.col-city-tooltip strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.col-tooltip-country {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.col-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.col-tooltip-row strong {
  display: inline;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.col-country-tooltip {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Table view */
.col-table-container {
  margin-top: 12px;
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.col-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}

.col-data-table thead {
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 1;
}

.col-data-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.col-data-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--bg-secondary);
  color: var(--text-primary);
  vertical-align: middle;
}

.col-data-table tbody tr:hover {
  background: var(--li-blue-faint);
}

.col-data-table tbody tr:last-child td {
  border-bottom: none;
}

.col-table-rank {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  width: 36px;
}

.col-table-value-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.col-table-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .col-controls-bar {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .col-metric-selector {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .col-controls-bar {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
    gap: 12px;
  }

  .col-metric-selector {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }

  .col-metric-btn {
    font-size: 0.78rem;
    padding: 8px 12px;
    width: 100%;
    justify-content: center;
  }

  .col-view-toggle {
    width: 100%;
  }

  .col-view-btn {
    flex: 1;
    justify-content: center;
  }
}

/* Marges simètrics per als subpanells de dades del BCE */
#sub-panel-mapes-bce-inflacio,
#sub-panel-mapes-bce-deute {
  margin-left: 10px !important;
  margin-right: 10px !important;
}


/* --- SECTION: admin.css --- */
/* ===================================================
   ADMIN PANEL STYLES
   =================================================== */

.admin-actions-cell {
  position: relative;
  text-align: center;
}

.btn-admin-actions {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-admin-actions:hover {
  background: #f0f2f5;
  color: var(--li-blue);
}

.admin-actions-menu {
  position: fixed;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 5000;
  width: 260px;
  padding: 8px 0;
  display: none;
  pointer-events: none;
}

.admin-actions-menu.active {
  display: block;
  pointer-events: auto;
  animation: menuFadeIn 0.15s ease-out;
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.admin-menu-item {
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s;
  text-align: left;
  width: 100%;
  border: none;
  background: none;
}

.admin-menu-item:hover {
  background: #f8f9fa;
  color: var(--li-blue);
}

.admin-menu-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}


.admin-menu-item.danger {
  color: #dc2626;
}

.admin-menu-item.danger:hover {
  background: #fef2f2;
}

/* ADMIN MODALS */

/* --- Admin modals (migrat des de features.css) --- */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-modal {
  background: white;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 450px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.system-msg-modal,
.credit-pack-modal,
.roles-modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.system-msg-modal .admin-modal-body,
.credit-pack-modal .admin-modal-body,
.roles-modal .admin-modal-body {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

@keyframes modalPop {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 768px) {

  .admin-modal-overlay:has(.system-msg-modal),
  .admin-modal-overlay:has(.credit-pack-modal),
  .admin-modal-overlay:has(.roles-modal) {
    padding: 0;
    align-items: stretch;
  }

  .system-msg-modal,
  .credit-pack-modal,
  .roles-modal {
    max-width: none !important;
    width: 100% !important;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    animation: none;
  }

  .system-msg-modal .admin-modal-body,
  .credit-pack-modal .admin-modal-body,
  .roles-modal .admin-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.admin-modal-header {
  padding: 24px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--border);
}

.admin-modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.admin-modal-body {
  padding: 24px;
}

.admin-modal-user-box {
  background: #f0f7ff;
  padding: 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #d0e1f9;
}

.admin-modal-user-info {
  display: flex;
  flex-direction: column;
}

.admin-modal-user-info strong {
  font-size: 1rem;
  color: var(--li-blue-dark);
}

.admin-modal-user-info span {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 24px 24px;
  border-top: 1px solid var(--border);
}

.admin-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-modal {
  background: white;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 450px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes modalPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.admin-modal-header {
  padding: 24px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--border);
}

/* ADMIN TABLES */
.admin-table-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th {
  text-align: left;
  padding: 12px 12px;
  background: var(--li-blue-faint);
  border-bottom: 2px solid var(--border);
  color: var(--li-blue-dark);
  font-weight: 600;
}

.admin-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.admin-table tr:hover {
  background: var(--li-blue-faint);
}

/* SYSTEM MESSAGES TABLE (Desktop) */
.system-messages-table {
  table-layout: fixed;
  width: 100%;
}

.system-messages-table th,
.system-messages-table td {
  overflow: hidden;
}

.system-message-title-cell {
  font-weight: 600;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: normal;
  line-height: 1.35;
  max-height: 2.7em;
}

.system-message-body-cell {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: normal;
  line-height: 1.35;
  max-height: 2.7em;
}

/* Amaga les etiquetes de targeta mòbil en escriptori */
.user-mobile-label,
.whitelist-mobile-label,
.pkg-mobile-label,
.support-mobile-label,
.sysmsg-mobile-label,
.override-mobile-label,
.rev-mobile-label,
.pl-mobile-label,
.exp-mobile-label,
.perm-unit-mobile {
  display: none !important;
}

/* MOBILE CARD-BASED TABLES */
@media (max-width: 768px) {
  .admin-table thead { display: none !important; }

  .admin-table tr {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-bottom: 2px solid var(--border);
    background: white;
    position: relative;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .admin-table td {
    border-bottom: none;
    padding: 2px 0;
    display: block;
    width: 100%;
    overflow-wrap: anywhere;
  }

  /* Etiquetes mòbils comunes */
  .user-mobile-label,
  .whitelist-mobile-label,
  .pkg-mobile-label,
  .support-mobile-label,
  .sysmsg-mobile-label,
  .override-mobile-label,
  .rev-mobile-label,
  .pl-mobile-label,
  .exp-mobile-label {
    display: block !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 3px !important;
  }

  /* === USERS TABLE === */
  #users-table tbody tr,
  .users-table-style tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 10px !important;
    padding: 14px 48px 14px 14px !important; /* espai reservat pel botó d'acció */
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
  }

  body.dark-mode #users-table tbody tr,
  body.dark-mode .users-table-style tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  #users-table tbody td,
  .users-table-style tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  /* 1. Indicador en línia */
  #users-table .user-cell-status-dot,
  .users-table-style .user-cell-status-dot {
    order: 1 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    padding-top: 10px !important;
    margin-right: 2px !important;
  }

  /* 2. Informació de l'usuari (Fila 1 completa: màxim aire per a nom, correu i crèdits) */
  #users-table .user-cell-info,
  .users-table-style .user-cell-info {
    order: 2 !important;
    flex: 1 1 calc(100% - 24px) !important;
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #users-table .user-name-title,
  .users-table-style .user-name-title {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    font-size: 0.95rem !important;
  }

  #users-table .user-rol-esco,
  .users-table-style .user-rol-esco {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  #users-table .user-email-text,
  .users-table-style .user-email-text {
    word-break: break-all !important;
  }

  /* Oculta UID en mòbil per estalviar espai vertical */
  #users-table .user-uid,
  .users-table-style .user-uid {
    display: none !important;
  }

  /* 3. Botó d'accions (menú de 3 punts) a dalt a la dreta */
  #users-table .user-cell-actions {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  /* 4. Grid de 2 columnes: Rol & Perfil + Accés (Fila 2) */
  #users-table .user-cell-role,
  .users-table-style .user-cell-role {
    order: 3 !important;
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 125px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }

  #users-table .user-cell-meta,
  #users-table .user-cell-lang,
  .users-table-style .user-cell-lang {
    order: 4 !important;
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 125px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }

  body.dark-mode #users-table .user-cell-role,
  body.dark-mode .users-table-style .user-cell-role,
  body.dark-mode #users-table .user-cell-meta,
  body.dark-mode #users-table .user-cell-lang,
  body.dark-mode .users-table-style .user-cell-lang {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* 5. Dates de registre i últim accés (Fila 3 a amplada completa) */
  #users-table .user-cell-dates,
  .users-table-style .user-cell-dates {
    order: 6 !important;
    flex: 1 1 100% !important;
    border-top: 1px dashed var(--border, #e2e8f0) !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
  }

  /* === PACKAGES TABLE === */
  .packages-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 10px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
  }

  body.dark-mode .packages-table tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  .packages-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  /* 1. Nom a l'esquerra, Estat a la dreta */
  .packages-table .pkg-cell-name {
    order: 1 !important;
    flex: 1 1 calc(100% - 130px) !important;
    min-width: 140px !important;
  }

  .packages-table .pkg-cell-status {
    order: 2 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin-left: auto !important;
    text-align: right !important;
  }

  .packages-table .pkg-cell-status .pkg-mobile-label {
    text-align: right !important;
  }

  /* 2. Grid de 2 columnes: Tipus & Rol assignat */
  .packages-table .pkg-cell-type {
    order: 3 !important;
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 125px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .packages-table .pkg-cell-role {
    order: 4 !important;
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 125px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* 3. Grid de valors econòmics: Crèdits, Preu & Descompte */
  .packages-table .pkg-cell-credits {
    order: 5 !important;
    flex: 1 1 calc(33.333% - 7px) !important;
    min-width: 85px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .packages-table .pkg-cell-price {
    order: 6 !important;
    flex: 1 1 calc(33.333% - 7px) !important;
    min-width: 85px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .packages-table .pkg-cell-discount,
  .packages-table .pkg-cell-featured {
    order: 7 !important;
    flex: 1 1 calc(33.333% - 7px) !important;
    min-width: 85px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  body.dark-mode .packages-table .pkg-cell-type,
  body.dark-mode .packages-table .pkg-cell-role,
  body.dark-mode .packages-table .pkg-cell-credits,
  body.dark-mode .packages-table .pkg-cell-price,
  body.dark-mode .packages-table .pkg-cell-discount,
  body.dark-mode .packages-table .pkg-cell-featured {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* 4. Barra d'accions */
  .packages-table .pkg-cell-actions {
    order: 8 !important;
    flex: 1 1 100% !important;
    border-top: 1px dashed var(--border, #e2e8f0) !important;
    padding-top: 10px !important;
    margin-top: 2px !important;
  }

  .packages-table .pkg-cell-actions > div {
    justify-content: flex-end !important;
  }

  /* Filter select: override min-width to prevent horizontal scroll */
  #monet-user-filter {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  /* User summary card: wrap on small screens */
  .monet-summary-card {
    flex-wrap: wrap;
    gap: 8px;
  }

  .monet-summary-card > div:last-child {
    text-align: left;
  }

  /* === WHITELIST TABLE === */
  #whitelist-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 10px !important;
    padding: 14px 48px 14px 14px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
  }

  body.dark-mode #whitelist-table tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  #whitelist-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  /* 1. Usuari a l'esquerra (amplada completa de fila 1) */
  #whitelist-table .whitelist-cell-user {
    order: 1 !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Botó d'acció a dalt a la dreta */
  #whitelist-table .whitelist-cell-actions {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  /* 2. Grid de 2 columnes: Email & Rol/Tipus */
  #whitelist-table .whitelist-cell-email {
    order: 2 !important;
    flex: 1 1 calc(60% - 6px) !important;
    min-width: 140px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    word-break: break-all !important;
  }

  #whitelist-table .whitelist-cell-role {
    order: 3 !important;
    flex: 1 1 calc(40% - 6px) !important;
    min-width: 110px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }

  body.dark-mode #whitelist-table .whitelist-cell-email,
  body.dark-mode #whitelist-table .whitelist-cell-role {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* === SUPPORT TABLE === */
  #support-table tbody tr,
  .support-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 10px !important;
    padding: 14px 48px 14px 14px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
  }

  body.dark-mode #support-table tbody tr,
  body.dark-mode .support-table tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  #support-table tbody td,
  .support-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  /* 1. Assumpte (títol clicable, amplada completa de fila 1) */
  #support-table .support-cell-subject,
  .support-table .support-cell-subject {
    order: 1 !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Botó d'acció a dalt a la dreta */
  #support-table .support-cell-actions,
  .support-table .support-cell-actions {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  /* 2. Dues files separades: Classificació (fila 2) i Remitent (fila 3) */
  #support-table .support-cell-category,
  .support-table .support-cell-category {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }

  #support-table .support-cell-email,
  .support-table .support-cell-email {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    word-break: break-all !important;
  }

  body.dark-mode #support-table .support-cell-category,
  body.dark-mode #support-table .support-cell-email,
  body.dark-mode .support-table .support-cell-category,
  body.dark-mode .support-table .support-cell-email {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* 3. Data de suport */
  #support-table .support-cell-date,
  .support-table .support-cell-date {
    order: 4 !important;
    flex: 1 1 100% !important;
    border-top: 1px dashed var(--border, #e2e8f0) !important;
    padding-top: 8px !important;
    margin-top: 2px !important;
  }

  .perm-unit-desktop {
    display: none !important;
  }
  .perm-unit-mobile {
    display: inline !important;
  }

  /* Ajustar padding del contenidor de settings a mòbil */
  .settings-card .settings-content {
    padding: 14px 10px !important;
  }

  .admin-table-wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* === PERMISSIONS TABLE === */
  .permissions-table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .permissions-table tbody {
    display: table-row-group !important;
    width: 100% !important;
  }

  .permissions-table tr {
    display: table-row !important;
    width: 100% !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Capçalera de grup: banner net de secció */
  .permissions-table .permissions-group-row {
    background: var(--li-blue-faint, #eef3f8) !important;
  }

  body.dark-mode .permissions-table .permissions-group-row {
    background: rgba(10, 102, 194, 0.15) !important;
  }

  .permissions-table .permissions-group-row td {
    display: table-cell !important;
    padding: 10px 10px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--li-blue-dark, #0a66c2) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border-top: 1px solid var(--border, #cbd5e1) !important;
    border-bottom: 1px solid var(--border, #cbd5e1) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  body.dark-mode .permissions-table .permissions-group-row td {
    color: #60a5fa !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Fila de permís estàndard */
  .permissions-table tr:not(.permissions-group-row) {
    background: #ffffff !important;
  }

  body.dark-mode .permissions-table tr:not(.permissions-group-row) {
    background: var(--bg-surface, #1e293b) !important;
  }

  .permissions-table tr:not(.permissions-group-row):hover {
    background: var(--bg-surface-hover, #f8fafc) !important;
  }

  /* 1. Nom del servei / permís (esquerra, ocupa tot l'ample disponible) */
  .permissions-table .perm-cell-label,
  .permissions-table td:nth-child(1) {
    display: table-cell !important;
    width: calc(100% - 90px) !important;
    vertical-align: middle !important;
    padding: 10px 6px 10px 8px !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    border-bottom: 1px solid var(--border-light, #f1f5f9) !important;
  }

  body.dark-mode .permissions-table .perm-cell-label,
  body.dark-mode .permissions-table td:nth-child(1) {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  }

  /* 2. Clau interna: oculta a mòbil per estalviar espai */
  .permissions-table .perm-cell-key,
  .permissions-table td:nth-child(2) {
    display: none !important;
  }

  /* 3. Control unificat (dreta, exactament 90px per no sortir de pantalla) */
  .permissions-table .perm-cell-control,
  .permissions-table td:nth-child(3) {
    display: table-cell !important;
    width: 90px !important;
    max-width: 90px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    text-align: right !important;
    padding: 10px 8px 10px 2px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-light, #f1f5f9) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  body.dark-mode .permissions-table .perm-cell-control,
  body.dark-mode .permissions-table td:nth-child(3) {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  }

  /* Eliminar qualsevol pseudo-element residual */
  .permissions-table .perm-cell-control::before,
  .permissions-table td:nth-child(3)::before,
  .permissions-table td:nth-child(4)::before {
    display: none !important;
    content: none !important;
  }

  /* Checkbox de permís */
  .permissions-table input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    accent-color: var(--li-blue, #0073b1) !important;
    vertical-align: middle !important;
  }

  /* Input numèric de crèdits */
  .permissions-table input[type="number"] {
    width: 42px !important;
    padding: 3px 2px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    font-weight: 700 !important;
    border: 1px solid var(--border, #cbd5e1) !important;
    border-radius: 6px !important;
    background: var(--bg-surface, #ffffff) !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
  }

  /* Fila especial Home (amb reordenació i desplegables de fons) */
  .permissions-table .home-widget-options {
    margin-left: 0 !important;
    margin-top: 6px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* === ROLE OVERRIDES TABLE === */
  .role-overrides-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 6px !important;
    padding: 12px 44px 12px 12px !important;
    margin-bottom: 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
  }

  body.dark-mode .role-overrides-table tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  .role-overrides-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  /* 1. Servei / Eina (Fila 1 completa amb espai reservat per al botó eliminar) */
  .role-overrides-table .override-cell-service {
    order: 1 !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    padding-bottom: 4px !important;
  }

  /* Botó eliminar ancorat a dalt a la dreta */
  .role-overrides-table .override-cell-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  .role-overrides-table .override-cell-actions button {
    padding: 6px 10px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    background: #fff5f5 !important;
    border: 1px solid #fecaca !important;
  }

  body.dark-mode .role-overrides-table .override-cell-actions button {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
  }

  /* 2. Grid de 3 columnes per a les propietats de l'excepció (Fila 2) */
  .role-overrides-table .override-cell-access,
  .role-overrides-table .override-cell-mode,
  .role-overrides-table .override-cell-cost {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-width: 80px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .role-overrides-table .override-cell-access {
    order: 2 !important;
  }

  .role-overrides-table .override-cell-mode {
    order: 3 !important;
  }

  .role-overrides-table .override-cell-cost {
    order: 4 !important;
  }

  body.dark-mode .role-overrides-table .override-cell-access,
  body.dark-mode .role-overrides-table .override-cell-mode,
  body.dark-mode .role-overrides-table .override-cell-cost {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  .role-overrides-table .override-cell-access .badge-metadata,
  .role-overrides-table .override-cell-mode .badge-metadata {
    font-size: 0.68rem !important;
    padding: 3px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* === SYSTEM MESSAGES TABLE === */
  .system-messages-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 10px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
  }

  body.dark-mode .system-messages-table tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  .system-messages-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  /* 1. Títol a l'esquerra, Estat a la dreta */
  .system-messages-table .sysmsg-cell-title {
    order: 1 !important;
    flex: 1 1 calc(100% - 130px) !important;
    min-width: 140px !important;
  }

  .system-messages-table .sysmsg-cell-status {
    order: 2 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin-left: auto !important;
    text-align: right !important;
  }

  .system-messages-table .sysmsg-cell-status .sysmsg-mobile-label {
    text-align: right !important;
  }

  /* 2. Contingut / Cos del missatge */
  .system-messages-table .sysmsg-cell-body {
    order: 3 !important;
    flex: 1 1 100% !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    color: var(--text-primary) !important;
    margin-top: 2px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 100% !important;
  }

  body.dark-mode .system-messages-table .sysmsg-cell-body {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  /* 3. Vigència a l'esquerra, Botons d'acció a la dreta */
  .system-messages-table .sysmsg-cell-dates {
    order: 4 !important;
    flex: 1 1 calc(60% - 6px) !important;
    min-width: 140px !important;
    border-top: 1px dashed var(--border, #e2e8f0) !important;
    padding-top: 10px !important;
    margin-top: 2px !important;
    text-align: left !important;
  }

  .system-messages-table .sysmsg-cell-actions {
    order: 5 !important;
    flex: 1 1 calc(40% - 6px) !important;
    min-width: 100px !important;
    border-top: 1px dashed var(--border, #e2e8f0) !important;
    padding-top: 10px !important;
    margin-top: 2px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
}

/* === SERVEIS DE VALOR AFEGIT (CRM) TABLE === */
.services-orders-table .service-mobile-label,
.services-orders-table .service-btn-mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .services-orders-table thead {
    display: none !important;
  }

  .services-orders-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 10px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
  }

  body.dark-mode .services-orders-table tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  .services-orders-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  .services-orders-table .service-mobile-label {
    display: block !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 3px !important;
  }

  .services-orders-table .service-btn-desktop-only {
    display: none !important;
  }

  .services-orders-table .service-btn-mobile-only {
    display: inline-flex !important;
  }

  /* 1. Checkbox per a selecció en vista finalitzada */
  .services-orders-table .service-cell-checkbox {
    order: 1 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin-top: 3px !important;
    margin-right: 6px !important;
  }

  /* 2. Capçalera de la targeta (esquerra): Servei adquirit */
  .services-orders-table .service-cell-product {
    order: 2 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  .services-orders-table .service-product-title {
    font-size: 0.95rem !important;
    color: var(--li-blue-dark, #0a66c2) !important;
    line-height: 1.25 !important;
  }

  /* 3. Capçalera de la targeta (dreta): Selector d'estat */
  .services-orders-table .service-cell-status {
    order: 3 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin-left: auto !important;
    text-align: right !important;
  }

  .services-orders-table .service-cell-status .service-mobile-label {
    text-align: right !important;
    margin-bottom: 2px !important;
  }

  .services-orders-table .service-cell-status .service-status-select {
    font-size: 0.74rem !important;
    padding: 4px 6px !important;
    max-width: 140px !important;
    width: auto !important;
  }

  /* 4. Bloc Usuari (Client) */
  .services-orders-table .service-cell-user {
    order: 4 !important;
    flex: 1 1 100% !important;
    background: var(--bg-surface-hover, #f8fafc) !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    margin-top: 2px !important;
  }

  body.dark-mode .services-orders-table .service-cell-user {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  /* 5. Contacte directe (telèfon, WhatsApp, ciutat, LinkedIn) */
  .services-orders-table .service-cell-contact {
    order: 5 !important;
    flex: 1 1 100% !important;
    padding: 2px 4px !important;
  }

  /* 6. Dues columnes: Data compra (esquerra) i Import & Crèdits (dreta) */
  .services-orders-table .service-cell-date {
    order: 6 !important;
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 130px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }

  body.dark-mode .services-orders-table .service-cell-date {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  .services-orders-table .service-cell-finance {
    order: 7 !important;
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 130px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  body.dark-mode .services-orders-table .service-cell-finance {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  .services-orders-table .service-cell-finance .service-finance-val {
    align-items: flex-start !important;
  }

  /* 8. Atès per (membre assignat de l'equip) */
  .services-orders-table .service-cell-assignee {
    order: 8 !important;
    flex: 1 1 100% !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
  }

  .services-orders-table .service-cell-assignee .service-assignee-select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 9. Notes internes de seguiment */
  .services-orders-table .service-cell-notes {
    order: 9 !important;
    flex: 1 1 100% !important;
    border-top: 1px dashed var(--border, #e2e8f0) !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
  }

  /* Controls de filtre i cercador del CRM */
  #services-search-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #services-status-filter {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* === REVENUE & SALES TABLE === */
.revenue-table .rev-mobile-label {
  display: none !important;
}

@media (max-width: 768px) {
  .revenue-table thead {
    display: none !important;
  }

  .revenue-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 6px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  body.dark-mode .revenue-table tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  .revenue-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  /* 1. Capçalera de la targeta: Producte a l'esquerra, Net Líquid (Payout) a la dreta */
  .revenue-table .rev-cell-product {
    order: 1 !important;
    flex: 1 1 calc(100% - 105px) !important;
    min-width: 140px !important;
    align-self: center !important;
  }

  .revenue-table .rev-cell-product .rev-mobile-label {
    display: none !important;
  }

  .revenue-table .rev-product-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .revenue-table .rev-product-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 1.25 !important;
  }

  .revenue-table .rev-cell-net {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    text-align: right !important;
  }

  .revenue-table .rev-cell-net .rev-mobile-label {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: var(--text-secondary, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
    text-align: right !important;
  }

  .revenue-table .rev-cell-net .rev-net-val {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #059669 !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .revenue-table .rev-cell-net .rev-net-sub {
    display: none !important;
  }

  /* 2. Bloc Client (Email i UID) */
  .revenue-table .rev-cell-client {
    order: 3 !important;
    flex: 1 1 100% !important;
    background: var(--bg-surface-hover, #f8fafc) !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    margin-top: 2px !important;
  }

  body.dark-mode .revenue-table .rev-cell-client {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  .revenue-table .rev-cell-client .rev-mobile-label {
    display: none !important;
  }

  .revenue-table .rev-client-email {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    word-break: break-all !important;
    line-height: 1.3 !important;
  }

  .revenue-table .rev-client-uid {
    font-size: 0.68rem !important;
    color: var(--text-secondary) !important;
    font-family: monospace !important;
    margin-top: 1px !important;
    word-break: break-all !important;
  }

  /* 3. Metadades de transacció: Data (esquerra) i Núm. Comanda (dreta) */
  .revenue-table .rev-cell-date {
    order: 4 !important;
    flex: 1 1 calc(50% - 4px) !important;
    font-size: 0.73rem !important;
    color: var(--text-secondary) !important;
    padding: 2px 0 !important;
    align-self: center !important;
  }

  .revenue-table .rev-cell-date .rev-mobile-label {
    display: none !important;
  }

  .revenue-table .rev-date-val {
    font-size: 0.73rem !important;
    color: var(--text-secondary) !important;
  }

  .revenue-table .rev-cell-order {
    order: 5 !important;
    flex: 1 1 calc(50% - 4px) !important;
    text-align: right !important;
    font-size: 0.73rem !important;
    padding: 2px 0 !important;
    align-self: center !important;
  }

  .revenue-table .rev-cell-order .rev-mobile-label {
    display: none !important;
  }

  .revenue-table .rev-order-val {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    font-family: monospace !important;
    color: var(--text-secondary) !important;
  }

  /* 4. Sub-graella de 3 columnes de desglossament financer */
  .revenue-table .rev-cell-pvp,
  .revenue-table .rev-cell-tax,
  .revenue-table .rev-cell-fee {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-width: 80px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .revenue-table .rev-cell-pvp {
    order: 6 !important;
  }

  .revenue-table .rev-cell-tax {
    order: 7 !important;
  }

  .revenue-table .rev-cell-fee {
    order: 8 !important;
  }

  body.dark-mode .revenue-table .rev-cell-pvp,
  body.dark-mode .revenue-table .rev-cell-tax,
  body.dark-mode .revenue-table .rev-cell-fee {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  .revenue-table .rev-cell-pvp .rev-mobile-label,
  .revenue-table .rev-cell-tax .rev-mobile-label,
  .revenue-table .rev-cell-fee .rev-mobile-label {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 2px !important;
  }

  .revenue-table .rev-pvp-val {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    font-variant-numeric: tabular-nums !important;
  }

  .revenue-table .rev-tax-val {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #b45309 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .revenue-table .rev-fee-val {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .revenue-table .rev-pvp-sub,
  .revenue-table .rev-tax-sub,
  .revenue-table .rev-fee-sub {
    font-size: 0.64rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }
}

/* === BALANÇ I RENDIBILITAT (P&L) TABLE === */
.pl-table .pl-mobile-label {
  display: none !important;
}

@media (max-width: 768px) {
  .pl-table thead {
    display: none !important;
  }

  .pl-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 6px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  body.dark-mode .pl-table tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  .pl-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  /* 1. Capçalera de la targeta: Mes a l'esquerra, Marge Operatiu a la dreta */
  .pl-table .pl-cell-month {
    order: 1 !important;
    flex: 1 1 calc(100% - 130px) !important;
    min-width: 130px !important;
    align-self: center !important;
  }

  .pl-table .pl-cell-month .pl-mobile-label {
    display: none !important;
  }

  .pl-table .pl-month-val {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
  }

  .pl-table .pl-cell-margin {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    text-align: right !important;
  }

  .pl-table .pl-cell-margin .pl-mobile-label {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: var(--text-secondary, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
    text-align: right !important;
  }

  .pl-table .pl-margin-val {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* 2. Sub-capçalera: Estat (esquerra) i Rendibilitat % (dreta) */
  .pl-table .pl-cell-status {
    order: 3 !important;
    flex: 1 1 calc(50% - 4px) !important;
    align-self: center !important;
  }

  .pl-table .pl-cell-status .pl-mobile-label {
    display: none !important;
  }

  .pl-table .pl-cell-pct {
    order: 4 !important;
    flex: 1 1 calc(50% - 4px) !important;
    text-align: right !important;
    align-self: center !important;
  }

  .pl-table .pl-cell-pct .pl-mobile-label {
    display: none !important;
  }

  .pl-table .pl-pct-val {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
  }

  /* 3. Sub-graella de 3 columnes de mètriques financeres */
  .pl-table .pl-cell-revenue,
  .pl-table .pl-cell-expense,
  .pl-table .pl-cell-sales {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-width: 80px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .pl-table .pl-cell-revenue {
    order: 5 !important;
  }

  .pl-table .pl-cell-expense {
    order: 6 !important;
  }

  .pl-table .pl-cell-sales {
    order: 7 !important;
  }

  body.dark-mode .pl-table .pl-cell-revenue,
  body.dark-mode .pl-table .pl-cell-expense,
  body.dark-mode .pl-table .pl-cell-sales {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  .pl-table .pl-cell-revenue .pl-mobile-label,
  .pl-table .pl-cell-expense .pl-mobile-label,
  .pl-table .pl-cell-sales .pl-mobile-label {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 2px !important;
  }

  .pl-table .pl-rev-net {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #047857 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .pl-table .pl-exp-net {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #b91c1c !important;
    font-variant-numeric: tabular-nums !important;
  }

  .pl-table .pl-sales-val {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
  }

  .pl-table .pl-rev-pvp,
  .pl-table .pl-exp-vat,
  .pl-table .pl-sales-sub {
    font-size: 0.64rem !important;
    color: var(--text-secondary) !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
  }
}

/* === DESPESES D'INFRAESTRUCTURA (GCP) TABLE === */
.expense-table .exp-mobile-label {
  display: none !important;
}

@media (max-width: 768px) {
  .expense-table thead {
    display: none !important;
  }

  .expense-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px 6px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border, #e2e8f0) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  body.dark-mode .expense-table tbody tr {
    background: var(--bg-surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
  }

  .expense-table tbody td {
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
  }

  /* 1. Capçalera: Mes a l'esquerra, Cost Net GCP a la dreta */
  .expense-table .exp-cell-month {
    order: 1 !important;
    flex: 1 1 calc(100% - 130px) !important;
    min-width: 130px !important;
    align-self: center !important;
  }

  .expense-table .exp-cell-month .exp-mobile-label {
    display: none !important;
  }

  .expense-table .exp-month-wrap {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
  }

  .expense-table .exp-cell-net {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    text-align: right !important;
  }

  .expense-table .exp-cell-net .exp-mobile-label {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: var(--text-secondary, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
    text-align: right !important;
  }

  .expense-table .exp-net-val {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #0284c7 !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* 2. Sub-capçalera: Variació (esquerra) i Net + IVA (dreta) */
  .expense-table .exp-cell-var {
    order: 3 !important;
    flex: 1 1 calc(50% - 4px) !important;
    text-align: left !important;
    align-self: center !important;
  }

  .expense-table .exp-cell-var .exp-mobile-label {
    display: none !important;
  }

  .expense-table .exp-cell-vat {
    order: 4 !important;
    flex: 1 1 calc(50% - 4px) !important;
    text-align: right !important;
    align-self: center !important;
  }

  .expense-table .exp-cell-vat .exp-mobile-label {
    display: none !important;
  }

  .expense-table .exp-vat-val {
    font-size: 0.76rem !important;
    color: var(--text-secondary) !important;
  }

  /* 3. Proporció (Barra de progrés d'amplada completa) */
  .expense-table .exp-cell-prop {
    order: 5 !important;
    flex: 1 1 100% !important;
    padding: 2px 0 !important;
  }

  .expense-table .exp-cell-prop .exp-mobile-label {
    display: none !important;
  }

  /* 4. Sub-graella de 3 columnes (Cost Brut, Descompte, Usuaris/Detall) */
  .expense-table .exp-cell-gross,
  .expense-table .exp-cell-discount,
  .expense-table .exp-cell-detail {
    flex: 1 1 calc(33.333% - 4px) !important;
    min-width: 80px !important;
    background: #fafafa !important;
    border: 1px solid var(--border-light, #f1f5f9) !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .expense-table .exp-cell-gross {
    order: 6 !important;
  }

  .expense-table .exp-cell-discount {
    order: 7 !important;
  }

  .expense-table .exp-cell-detail {
    order: 8 !important;
  }

  body.dark-mode .expense-table .exp-cell-gross,
  body.dark-mode .expense-table .exp-cell-discount,
  body.dark-mode .expense-table .exp-cell-detail {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }

  .expense-table .exp-cell-gross .exp-mobile-label,
  .expense-table .exp-cell-discount .exp-mobile-label,
  .expense-table .exp-cell-detail .exp-mobile-label {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 2px !important;
  }

  .expense-table .exp-gross-val {
    font-size: 0.86rem !important;
    color: var(--text-secondary) !important;
    font-variant-numeric: tabular-nums !important;
  }

  .expense-table .exp-disc-val {
    font-size: 0.86rem !important;
    font-variant-numeric: tabular-nums !important;
  }

  .expense-table .exp-detail-wrap {
    justify-content: flex-start !important;
  }

  /* Tfoot responsive per a despeses */
  .expense-table tfoot tr {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 6px !important;
    border-radius: 8px !important;
  }

  .expense-table tfoot td {
    padding: 2px 0 !important;
    text-align: left !important;
    border: none !important;
  }
}

/* Reduce bottom spacing: halve the 24px inline margin-bottom on the last card of each admin section */
.admin-section > .settings-card:last-child {
  margin-bottom: 12px !important;
}

/* ADMIN BADGES */
.badge-role {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-role.admin { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.badge-role.admin_finance { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }
.badge-role.gestorcrm { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.badge-role.premium { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.badge-role.lite { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
.badge-role.rumbuser, .badge-role.usuari { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
.badge-role.baixa { background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }
.badge-role.admin_deleted { background: #f3f4f6; color: #991b1b; border: 1px solid #fca5a5; }
.badge-role.banned { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.badge-role.recurrent { background: #ffedd5; color: #ea580c; border: 1px solid #fed7aa; }

.badge-metadata {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--border);
  color: var(--text-secondary);
}

.badge-metadata.success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-metadata.danger { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.badge-metadata.amber { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.badge-metadata.info { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.badge-metadata.google { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.badge-metadata.linkedin { background: #e0f2fe; color: #0a66c2; border: 1px solid #bae6fd; }
.badge-metadata.email { background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db; }
.badge-metadata.mobile-app { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }

/* ROLES CUSTOMIZATION MODAL */
.roles-modal {
  max-width: 650px;
  width: 95%;
}

.role-edit-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.role-edit-card:hover {
  border-color: var(--li-blue, #0a66c2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.role-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light, #f3f4f6);
  padding-bottom: 8px;
}

.role-edit-system-tag {
  font-family: monospace;
  font-size: 0.70rem;
  background: var(--bg-secondary, #f8f9fa);
  color: var(--text-secondary, #6b7280);
  padding: 2px 6px;
  border-radius: 4px;
}

.role-edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .role-edit-row {
    grid-template-columns: 1fr;
  }
}

.role-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-input-group label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #4b5563);
}

.role-color-picker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-color-picker-wrap input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 32px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.role-color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.role-color-picker-wrap input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.role-color-hex {
  font-family: monospace;
  font-size: 0.74rem;
  color: var(--text-primary);
  width: 70px;
}

.role-preview-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary, #f9fafb);
  border: 1px dashed var(--border, #d1d5db);
  border-radius: 6px;
  padding: 8px 12px;
}

/* STATUS DOT */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d1d5db;
  display: inline-block;
  box-shadow: 0 0 0 2px white;
}

.status-dot.online {
  background-color: #10b981;
  box-shadow: 0 0 0 2px white, 0 0 4px rgba(16, 185, 129, 0.4);
}

/* EXPENSE CHARTS TABS & CARDS */
.expense-chart-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.expense-chart-tab {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #cbd5e1);
  color: var(--text-secondary, #64748b);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.expense-chart-tab:hover {
  background: #f1f5f9;
  color: var(--text-primary, #0f172a);
  border-color: #94a3b8;
}

.expense-chart-tab.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

.chart-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 60px;
  position: relative;
}

.chart-bar-column {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 180px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding-bottom: 2px;
}

.chart-bar {
  flex: 1;
  max-width: 24px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease, filter 0.2s ease;
  cursor: pointer;
  position: relative;
}

.chart-bar:hover {
  filter: brightness(1.15);
}

/* Capses interactives de KPIs de Serveis (filtres d'estat) */
.services-kpi-card {
  cursor: pointer;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
}

.services-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.services-kpi-card:active {
  transform: translateY(0);
}

.services-kpi-card.active {
  transform: translateY(-2px);
}

.services-kpi-card[data-status="all"].active {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 2px #6366f1, 0 4px 12px rgba(99, 102, 241, 0.25) !important;
}

.services-kpi-card[data-status="pending"].active {
  border-color: #d97706 !important;
  box-shadow: 0 0 0 2px #f59e0b, 0 4px 12px rgba(245, 158, 11, 0.25) !important;
}

.services-kpi-card[data-status="first_contact"].active {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px #3b82f6, 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

.services-kpi-card[data-status="date_scheduled"].active {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 2px #8b5cf6, 0 4px 12px rgba(139, 92, 246, 0.25) !important;
}

.services-kpi-card[data-status="completed"].active {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 2px #22c55e, 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}

/* ==========================================================================
   FACTURACIÓ: SUBÀREES COL·LAPSABLES I KPIS
   ========================================================================== */

.billing-section-card {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.billing-section-header {
  transition: background-color 0.15s ease;
}

.billing-section-header:hover {
  background-color: #f1f5f9 !important;
}

.billing-kpi-subcard {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.billing-kpi-subcard .kpi-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.billing-kpi-subcard .kpi-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.billing-kpi-subcard .kpi-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* KPI GRID I CARDS PER A FACTURACIÓ I PANELS */
.admin-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
}

.kpi-card {
  background: white;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-height: 96px;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kpi-card .kpi-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary, #64748b);
  letter-spacing: 0.5px;
}

.kpi-card .kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
  line-height: 1.2;
}

.kpi-card .kpi-subtext {
  font-size: 0.72rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.35;
}

.stat-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  box-sizing: border-box;
  min-height: 96px;
}

/* RESPONSIVE LAYOUT PER ALS INDICADORS DE FACTURACIÓ I PANELS (2 PER FILA EN MÒBIL) */
@media (max-width: 768px) {
  #billing-global-kpis-container,
  #pl-kpi-container,
  #revenue-kpi-container,
  .admin-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .admin-kpi-grid .kpi-card,
  #billing-global-kpis-container .kpi-card {
    padding: 12px 10px !important;
    min-height: 108px !important;
    border-radius: 8px !important;
    gap: 4px !important;
  }

  .admin-kpi-grid .kpi-card .kpi-title,
  #billing-global-kpis-container .kpi-card .kpi-title {
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.2px !important;
    min-height: 2.5em !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .admin-kpi-grid .kpi-card .kpi-value,
  #billing-global-kpis-container .kpi-card .kpi-value {
    font-size: 1.3rem !important;
    line-height: 1.15 !important;
    margin: 3px 0 !important;
    word-break: break-word !important;
  }

  .admin-kpi-grid .kpi-card .kpi-subtext,
  #billing-global-kpis-container .kpi-card .kpi-subtext {
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
  }

  /* Subtargetes secundàries de facturació (P&L i Vendes) */
  #pl-kpi-container .billing-kpi-subcard,
  #revenue-kpi-container .billing-kpi-subcard {
    padding: 10px 10px !important;
    min-height: 85px !important;
    border-radius: 8px !important;
  }

  #pl-kpi-container .billing-kpi-subcard .kpi-label,
  #revenue-kpi-container .billing-kpi-subcard .kpi-label {
    font-size: 0.64rem !important;
    line-height: 1.25 !important;
    min-height: 2.4em !important;
  }

  #pl-kpi-container .billing-kpi-subcard .kpi-val,
  #revenue-kpi-container .billing-kpi-subcard .kpi-val {
    font-size: 1.15rem !important;
    line-height: 1.15 !important;
  }

  #pl-kpi-container .billing-kpi-subcard .kpi-sub,
  #revenue-kpi-container .billing-kpi-subcard .kpi-sub {
    font-size: 0.64rem !important;
    line-height: 1.2 !important;
  }

  /* Barra de control superior de facturació en mòbil */
  .billing-control-bar {
    padding: 10px 12px !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .billing-period-controls {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .billing-filter-group {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .billing-filter-group label[for="billing-global-month-filter"] {
    display: none !important;
  }

  #billing-global-month-filter {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    font-size: 0.8rem !important;
  }

  #btn-refresh-billing {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .billing-badges-group {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .billing-badges-group .billing-checkbox-pill {
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center !important;
    font-size: 0.74rem !important;
    padding: 5px 8px !important;
  }

  .billing-expand-controls {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
  }

  .billing-expand-controls button {
    flex: 1 1 calc(50% - 4px) !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

body.dark-mode .kpi-card {
  background: var(--bg-surface, #1e293b);
  border-color: var(--border, #334155);
}

body.dark-mode .billing-control-bar {
  background: var(--bg-surface, #1e293b) !important;
  border-color: var(--border, #334155) !important;
}

body.dark-mode .billing-control-bar select#billing-global-month-filter {
  background: var(--bg-surface, #1e293b) !important;
  color: var(--text-primary, #f8fafc) !important;
  border-color: var(--border, #334155) !important;
}

body.dark-mode .billing-checkbox-pill[for="chk-include-fixed-quotes"] {
  background: rgba(79, 70, 229, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  color: #a5b4fc !important;
}

body.dark-mode .billing-checkbox-pill[for="chk-include-variable-expenses"] {
  background: rgba(219, 39, 119, 0.15) !important;
  border-color: rgba(244, 114, 182, 0.35) !important;
  color: #f472b6 !important;
}





.billing-expand-controls {
  margin-left: auto !important;
  justify-content: flex-end !important;
}

/* Pestanya Panell de Control (verd suau) */
.chip.chip-control {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border-color: #86efac !important;
}

.chip.chip-control:hover {
  background-color: #bbf7d0 !important;
  color: #14532d !important;
  border-color: #4ade80 !important;
}

.chip.chip-control.active {
  background-color: #16a34a !important;
  color: #ffffff !important;
  border-color: #15803d !important;
}

body.dark-mode .chip.chip-control {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

body.dark-mode .chip.chip-control:hover {
  background-color: rgba(34, 197, 94, 0.25) !important;
  color: #bbf7d0 !important;
}

body.dark-mode .chip.chip-control.active {
  background-color: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

.chip.chip-billing {
  background-color: #fef9c3 !important;
  color: #854d0e !important;
  border-color: #fde047 !important;
}

.chip.chip-billing:hover {
  background-color: #fef08a !important;
  color: #713f12 !important;
  border-color: #facc15 !important;
}

.chip.chip-billing.active {
  background-color: #ca8a04 !important;
  color: #ffffff !important;
  border-color: #a16207 !important;
}

body.dark-mode .chip.chip-billing {
  background-color: rgba(234, 179, 8, 0.15) !important;
  color: #fde047 !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}

body.dark-mode .chip.chip-billing:hover {
  background-color: rgba(234, 179, 8, 0.25) !important;
  color: #fef08a !important;
}

body.dark-mode .chip.chip-billing.active {
  background-color: #ca8a04 !important;
  color: #ffffff !important;
  border-color: #ca8a04 !important;
}

/* ==========================================================================
   PANELL DE CONTROL - ENLLAÇOS I INTERACCIÓ D'USUARIS
   ========================================================================== */
.user-uid {
  transition: all 0.15s ease;
}

.user-uid:hover {
  color: var(--primary, #0284c7) !important;
  text-decoration: underline;
}


/* ==========================================================================
   UNIFICACIÓ DE TÍTOLS D'ÀREA A LES PESTANYES D'ADMIN
   ========================================================================== */
#admin-panel .settings-title,
.admin-section .settings-title,
.settings-card .settings-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

#admin-panel .settings-card .settings-header,
.admin-section .settings-card .settings-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.admin-subarea-title {
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: normal !important;
}


/* --- SECTION: auth.css --- */
/* ===================================================
   AUTHENTICATION & USER PROFILE
   =================================================== */

/* LOGIN OVERLAY */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  animation: fadeIn 0.4s ease-out;
}

.login-card {
  background: var(--bg-surface);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  border: 1px solid var(--border);
  animation: slideUpScale 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

@keyframes slideUpScale {
  from { transform: translateY(40px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.login-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.login-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

/* AUTH TABS */
.login-tabs {
  display: flex;
  background: var(--li-blue-faint);
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 32px;
}

.login-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.25s ease;
}

.login-tab.active {
  background: var(--bg-surface);
  color: var(--li-blue);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.login-view {
  display: none;
}

.login-view.active {
  display: block;
}

/* BUTTONS & FORMS */
.google-login-btn {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: white;
  border: 1px solid #dadce0;
  border-radius: 12px;
  color: #3c4043;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.google-login-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
}

.login-info-box {
  background: var(--li-blue-faint);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}

.login-info-box p {
  font-size: 0.85rem;
  color: var(--li-blue-dark);
  line-height: 1.4;
  margin: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.auth-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  align-items: center;
}

.text-link {
  background: none;
  border: none;
  color: var(--li-blue);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  padding: 0;
  text-align: center;
}

.text-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.back-to-home-link {
  position: absolute;
  top: 16px;
  left: 20px;
  color: var(--li-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
  z-index: 10;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
}

.back-to-home-link:hover {
  opacity: 1;
  transform: translateX(-2px);
  color: var(--li-blue-dark);
}

.login-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.login-footer p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
}

/* HEADER USER AREA */
.header-user-area {
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  cursor: pointer;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08);
  object-fit: cover;
}

.user-name {
  font-size: 0.85rem;
  font-weight: 600;
}

/* DROPDOWN MENU */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 260px;
  display: none;
  flex-direction: column;
  z-index: 2100;
  padding: 8px 0;
}

.dropdown-menu.show {
  display: flex;
}

.dropdown-item {
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.dropdown-item:hover {
  background: var(--bg-secondary);
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.logout-item {
  color: var(--danger) !important;
}

.logout-item:hover {
  background: var(--danger-faint) !important;
}

/* BADGES */
.admin-badge, .admin-finance-badge, .gestorcrm-badge, .rumbuser-badge, .premium-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: white;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.admin-badge { background: var(--li-blue); }
.admin-finance-badge { background: #4338ca; }
.gestorcrm-badge { background: #d97706; }
.rumbuser-badge { background: #0284c7; }
.premium-badge { background: linear-gradient(135deg, #f59e0b, #d97706); }

/* Subtipus de badges per a transaccions */
.admin-badge.badge-blue { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.admin-badge.badge-orange { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }
.admin-badge.badge-green { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.admin-badge.badge-purple { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }

/* VERIFICATION VIEW */
.verification-content {
  padding: 20px 0;
  text-align: center;
}

.pending-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
}

.view-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

/* RESPONSIVE TRUNCATION */
@media (max-width: 600px) {
  .user-name {
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }
}


/* --- SECTION: markdown.css --- */
/* ===================================================
   MARKDOWN & AI RESPONSE STYLING
   =================================================== */

.markdown-body,
.markdown-preview,
.ia-response-content {
  color: var(--text-main);
  line-height: 1.6;
  font-family: inherit;
}

.markdown-body p,
.markdown-preview p,
.ia-response-content p {
  margin-bottom: 14px;
}

.markdown-body ul,
.markdown-body ol,
.markdown-preview ul,
.markdown-preview ol,
.ia-response-content ul,
.ia-response-content ol {
  margin-bottom: 14px;
  padding-left: 1.5rem !important;
  list-style-position: outside;
}

.markdown-body li,
.markdown-preview li,
.ia-response-content li {
  margin-bottom: 6px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3,
.ia-response-content h1,
.ia-response-content h2,
.ia-response-content h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--li-blue);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.markdown-body h1,
.markdown-preview h1,
.ia-response-content h1 {
  font-size: 1.4rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.markdown-body h2,
.markdown-preview h2,
.ia-response-content h2 {
  font-size: 1.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.markdown-body h3,
.markdown-preview h3,
.ia-response-content h3 {
  font-size: 1.1rem;
}

.markdown-body strong,
.markdown-preview strong,
.ia-response-content strong {
  color: var(--li-blue-dark);
  font-weight: 700;
}

.markdown-body blockquote,
.markdown-preview blockquote,
.ia-response-content blockquote {
  border-left: 4px solid var(--li-blue-light);
  padding: 8px 16px;
  background-color: var(--li-blue-faint);
  color: var(--text-secondary);
  font-style: italic;
  margin: 16px 0;
}

.markdown-body code,
.markdown-preview code,
.ia-response-content code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  background-color: var(--li-blue-faint);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--li-blue-dark);
}

.markdown-body hr,
.markdown-preview hr,
.ia-response-content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

/* Habilitats clau en graella de 3 columnes (CV adaptat / proposta ATS).
   Definit per classe perquè DOMPurify mutila el grid-template-columns inline. */
.markdown-body .cv-skills-grid,
.markdown-preview .cv-skills-grid,
.ia-response-content .cv-skills-grid,
.cv-actual-content .cv-skills-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px 16px;
  margin: 8px 0 16px;
}

@media (max-width: 600px) {
  .markdown-body .cv-skills-grid,
  .markdown-preview .cv-skills-grid,
  .ia-response-content .cv-skills-grid,
  .cv-actual-content .cv-skills-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Rol / Càrrec objectiu al CV */
.markdown-body .cv-role,
.markdown-preview .cv-role,
.ia-response-content .cv-role {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary, #000);
  margin-top: 4px;
  margin-bottom: 8px;
  line-height: 1.25;
  display: block;
}

/* ===================================================
   DESIGN MODE STYLES
   =================================================== */

.cv-section-wrapper {
  position: relative;
  transition: opacity 0.3s ease;
}

/* Quan estem en mode disseny */
.design-mode-active .cv-section-wrapper {
  padding-left: 36px; /* Espai pel botó toggle a l'esquerra */
}

/* Secció oculta en mode disseny (es veu semitransparent) */
.design-mode-active .cv-section-deselected {
  opacity: 0.3;
}

/* Secció oculta en mode normal (no es mostra) */
.cv-section-deselected:not(.design-mode-active *) {
  display: none !important;
}

/* Botó toggle (només visible en mode disseny) */
.btn-cv-section-toggle {
  display: none;
  position: absolute;
  top: 22px;
  left: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  z-index: 2;
  align-items: center;
  justify-content: center;
}

.btn-cv-section-toggle:hover {
  background-color: var(--li-blue-faint);
  color: var(--li-blue);
}

.design-mode-active .btn-cv-section-toggle {
  display: inline-flex;
}

.btn-cv-section-toggle .material-symbols-outlined {
  font-size: 20px;
}

.cv-hashtags-wrapper {
  position: relative;
  margin-top: 22px;
  margin-bottom: 12px;
}

.cv-hashtags-wrapper .btn-cv-section-toggle {
  top: -4px;
}

.cv-experience-tags {
  color: #4D5994;
  font-size: 0.88em;
  font-weight: 500;
  margin-top: 22px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.cv-hashtag {
  color: #4D5994;
  font-weight: 500;
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 4px;
  background-color: rgba(77, 89, 148, 0.08);
  padding: 1px 7px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.cv-hashtag:hover {
  background-color: rgba(77, 89, 148, 0.16);
}

/* Responsive CV Generation Controls Row */
.cv-generation-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.cv-generation-controls {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  gap: 12px;
  width: 100%;
}

@media (min-width: 600px) {
  .cv-generation-controls {
    grid-template-columns: 1fr 1fr; /* 2x2 grid */
  }
}

.cv-generation-controls > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  width: 100%;
}

.cv-generation-btn-wrapper {
  width: 100%;
  display: flex;
}

.cv-generation-bottom-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  align-items: end;
}

@media (min-width: 600px) {
  .cv-generation-bottom-row.has-instructions,
  .cv-generation-bottom-row:has(#cv-adaptat-instruccions-container:not([style*="display: none"])) {
    grid-template-columns: 1fr 1fr;
  }
  
  .cv-generation-bottom-row.has-instructions .cv-generation-btn-wrapper,
  .cv-generation-bottom-row:has(#cv-adaptat-instruccions-container:not([style*="display: none"])) .cv-generation-btn-wrapper {
    margin-bottom: 18px;
  }
}

#btn-crea-cv-adaptat {
  width: 100%;
  justify-content: center;
}

/* ===================================================
   ALERTES IA - Overrides de color per al fons ambre
   strong, code, a i em no han de sortir en blau
   =================================================== */
#cv-alertes-container strong,
#cv-alertes-container code,
#cv-alertes-container a,
#cv-alertes-container em,
.alert-mobile-collapsible strong,
.alert-mobile-collapsible code,
.alert-mobile-collapsible a,
.alert-mobile-collapsible em {
  color: #78350f; /* marró fosc harmònic amb el fons ataronjat */
}

#cv-alertes-container code,
.alert-mobile-collapsible code {
  background-color: rgba(146, 64, 14, 0.12);
  border-radius: 4px;
  padding: 1px 4px;
}

.cv-actual-content ul,
.markdown-body ul,
.markdown-preview ul,
.ia-response-content ul {
  list-style-type: disc !important;
  padding-left: 1.25rem !important;
}

.cv-actual-content li,
.markdown-body li,
.markdown-preview li,
.ia-response-content li {
  list-style-type: disc !important;
}

/* ===================================================
   SÍNTESI MoSCoW & FILTRE D'ANTIGUITAT - Items exclosos / tatxats
   =================================================== */
.cv-synthesis-excluded {
  display: inline;
  opacity: 0.5 !important;
  color: var(--text-muted, #94a3b8) !important;
  text-decoration: line-through !important;
  font-style: italic !important;
  transition: opacity 0.3s ease;
  user-select: none;
}

div.cv-synthesis-excluded,
.cv-exp-omitted-item {
  display: block;
  opacity: 0.55 !important;
  color: var(--text-muted, #94a3b8) !important;
  font-style: italic !important;
  transition: opacity 0.3s ease;
  border-left: 3px dashed var(--amber-500, #f59e0b);
  padding-left: 12px;
  margin-bottom: 16px;
}

.cv-exp-omitted-item h3,
.cv-exp-omitted-item p,
.cv-exp-omitted-item li,
.cv-exp-omitted-item span:not(.cv-exp-omitted-banner),
.cv-exp-omitted-item em,
.cv-exp-omitted-item strong {
  color: var(--text-muted, #94a3b8) !important;
  text-decoration: line-through !important;
}

.cv-exp-omitted-banner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #b45309 !important;
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  margin-bottom: 8px !important;
  text-decoration: none !important;
  font-style: normal !important;
}

li:has(.cv-synthesis-excluded),
.cv-actual-content li:has(.cv-synthesis-excluded) {
  opacity: 0.5 !important;
  color: var(--text-muted, #94a3b8) !important;
}

@media print {
  li:has(.cv-synthesis-excluded),
  .cv-actual-content li:has(.cv-synthesis-excluded),
  .cv-synthesis-excluded,
  .cv-exp-omitted-item {
    display: none !important;
  }
}

/* Auditoria Estratègica de Carrera - Capçalera d'ocupació i etiqueta de grau d'assoliment */
.markdown-body .strategic-audit-occ-header,
.ia-response-content .strategic-audit-occ-header,
.strategic-audit-occ-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 12px;
  width: 100%;
}

.markdown-body .strategic-audit-occ-title,
.ia-response-content .strategic-audit-occ-title,
.strategic-audit-occ-title {
  flex: 1;
  min-width: 0;
}

.markdown-body .strategic-audit-badge,
.ia-response-content .strategic-audit-badge,
.strategic-audit-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .markdown-body .strategic-audit-occ-header,
  .ia-response-content .strategic-audit-occ-header,
  .strategic-audit-occ-header {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .markdown-body .strategic-audit-badge,
  .ia-response-content .strategic-audit-badge,
  .strategic-audit-badge {
    align-self: flex-end !important;
    margin-top: 2px;
  }
}



/* --- SECTION: itinerary.css --- */
/* ==========================================================
   RUMB CAREER ITINERARY STYLES (Metro Stepper & Scenarios)
   ========================================================== */

#home-itinerary-area.collapsible-section {
  margin-top: 32px;
  margin-bottom: 24px;
  padding: 0;
  background: var(--bg-surface, #ffffff);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-height, 52px) + 20px);
}

#home-itinerary-area .collapsible-content {
  padding: 16px 20px 20px;
}

/* ----------------------------------------------------------
   1. Scenario Selector Nav (Pills sense emojis, amb SVG)
   ---------------------------------------------------------- */
.itinerary-scenario-nav {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  padding-bottom: 12px;
  scroll-margin-top: calc(var(--header-height, 52px) + 20px);
}

.itinerary-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}

.itinerary-pills::-webkit-scrollbar {
  height: 4px;
}

.itinerary-pills::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.itinerary-pill {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-surface, #ffffff);
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  flex-shrink: 0;
}

.itinerary-pill-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1.2;
}

.itinerary-pill:hover {
  background: var(--bg-subtle, #f8fafc);
  border-color: #cbd5e1;
  color: var(--text-primary, #0f172a);
}

.itinerary-pill.active {
  background: var(--pill-active-bg, var(--primary, #1967d2));
  border-color: var(--pill-active-bg, var(--primary, #1967d2));
  color: var(--pill-active-color, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.itinerary-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.itinerary-pill-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------
   2. Main Metro Stepper Widget Container
   ---------------------------------------------------------- */
.itinerary-metro-widget {
  background: transparent;
  border: none;
  padding: 4px 0 0 0;
  position: relative;
  min-height: 280px;
}

.metro-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.metro-scenario-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
}

.metro-line-pill-badge {
  font-size: 0.74rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.metro-scenario-desc {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
  max-width: 640px;
  line-height: 1.4;
}

.metro-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.metro-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full, 9999px);
  background: #e2e8f0;
  color: var(--text-secondary, #475569);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.metro-chip.time {
  background: #eff6ff;
  color: var(--primary, #1967d2);
}

.metro-chip.level {
  background: #f1f5f9;
  color: #334155;
}

/* ----------------------------------------------------------
   3. The Metro Line / Track
   ---------------------------------------------------------- */
.metro-track-container {
  position: relative;
  margin: 22px 0 16px 0;
  padding: 0 8px;
}

.metro-track {
  display: flex;
  align-items: flex-start;
  position: relative;
  width: 100%;
}

.metro-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  transition: transform 0.2s ease;
}

/* Metro rail connecting from previous station circle to this station circle */
.metro-node:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  z-index: 1;
  transition: background 0.3s ease;
}

/* Color rail segment when previous station is completed */
.metro-node.prev-done:not(:first-child)::before {
  background: var(--line-color, var(--success, #059669));
}

.metro-circle {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full, 9999px);
  background: #ffffff;
  border: 2.5px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text-muted, #64748b);
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* Terminus stations: first and last actions are rounded squares */
.metro-node:first-child .metro-circle,
.metro-node:last-child .metro-circle {
  border-radius: 8px;
}

.metro-circle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metro-node:hover .metro-circle {
  border-color: var(--line-color, var(--primary, #1967d2));
  transform: scale(1.08);
}

/* Completed node state */
.metro-node.done .metro-circle {
  background: var(--line-color, var(--success, #059669));
  border-color: var(--line-color, var(--success, #059669));
  color: var(--line-contrast, #ffffff);
}

/* Currently focused / active node state */
.metro-node.current .metro-circle {
  background: #ffffff;
  border-color: var(--line-color, var(--primary, #1967d2));
  color: var(--line-color, var(--primary, #1967d2));
  box-shadow: 0 0 0 4px var(--line-soft, rgba(25, 103, 210, 0.18));
}

.metro-node.current.done .metro-circle {
  background: var(--line-color, var(--success, #059669));
  border-color: var(--line-color, var(--success, #059669));
  color: var(--line-contrast, #ffffff);
  box-shadow: 0 0 0 4px var(--line-soft, rgba(5, 150, 105, 0.22));
}

.metro-node-label {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.25;
  max-width: 130px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.metro-node.done .metro-node-label {
  color: #334155;
}

.metro-node-time {
  font-size: 0.7rem;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
  font-weight: 500;
}

.metro-loop-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  background: #fef3c7;
  color: #d97706;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #fde68a;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   4. Action Drawer / Contextual Step Card
   ---------------------------------------------------------- */
.metro-detail-card {
  margin-top: 16px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: var(--radius-md, 10px);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.metro-detail-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.metro-step-indicator {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full, 9999px);
  background: var(--line-color, var(--primary, #1967d2));
  color: var(--line-contrast, #ffffff);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metro-step-indicator.done {
  background: var(--line-color, var(--success, #059669));
  color: var(--line-contrast, #ffffff);
}

.metro-detail-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.metro-detail-desc {
  font-size: 0.8rem;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
  line-height: 1.35;
}

.metro-detail-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-metro-action {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-md, 8px);
  border: none;
  background: var(--line-color, var(--primary, #1967d2));
  color: var(--line-contrast, #ffffff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.btn-metro-action:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.metro-toggle-btn {
  background: transparent;
  border: 1px solid var(--border, #e2e8f0);
  padding: 6px 10px;
  border-radius: var(--radius-md, 8px);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.metro-toggle-btn:hover {
  background: #f1f5f9;
  color: var(--text-primary, #0f172a);
}

.metro-toggle-btn.is-done {
  color: var(--line-color, var(--success, #059669));
  border-color: var(--line-border, #a7f3d0);
  background: var(--line-soft, #ecfdf5);
}

/* ----------------------------------------------------------
   5. Metro Network Interactive Map (Xarxa Global)
   ---------------------------------------------------------- */
.metro-map-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: metroFadeIn 0.2s ease-out;
}

@keyframes metroFadeIn {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

.metro-map-header {
  margin-bottom: 2px;
}

.metro-map-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.metro-map-desc {
  font-size: 0.84rem;
  color: var(--text-secondary, #64748b);
  margin-top: 3px;
  line-height: 1.4;
}

.metro-map-canvas-wrapper {
  background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 12px 10px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.03);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.metro-network-svg {
  width: 100%;
  height: auto;
  min-width: 640px;
  max-height: 480px;
  display: block;
  margin: 0 auto;
}

.metro-network-svg path {
  fill: none;
}

/* SVG Line paths & Interactions */
.metro-map-line-group,
.metro-map-terminus-item,
.metro-map-station-item,
.metro-map-hub-group {
  cursor: pointer;
  outline: none;
}

.metro-map-hit-area {
  pointer-events: stroke;
}

.metro-map-line-bg {
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.metro-map-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke-width 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease;
}

.metro-map-line-group:hover .metro-map-line,
.metro-map-line-group:focus-visible .metro-map-line {
  stroke-width: 9px;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}

.metro-map-terminus-item rect {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease;
}

.metro-map-terminus-item:hover rect {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  stroke-width: 2.5px;
  stroke: #ffffff;
}

/* SVG Hub nodes */
.metro-map-hub-group {
  transition: transform 0.2s ease;
}

.metro-map-hub-group:hover circle:first-child {
  r: 15;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.2));
}

.metro-map-hub-group:hover .metro-map-station-title {
  font-weight: 800;
  fill: #0284c7;
}

/* SVG Station dot text */
.metro-map-station-item {
  user-select: none;
  transition: transform 0.15s ease;
}

.metro-map-station-item:hover circle {
  stroke-width: 4px;
}

.metro-map-station-title {
  font-size: 11px;
  font-weight: 700;
  fill: #0f172a;
}

.metro-map-station-simple {
  font-size: 10.5px;
  font-weight: 600;
  fill: #334155;
}

/* Metro Legend Grid (Cards) */
.metro-map-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.metro-line-card-btn {
  font-family: inherit;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.metro-line-card-btn:hover {
  background: var(--card-hover-bg, #f8fafc);
  border-color: var(--card-hover-border, #cbd5e1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.metro-line-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.metro-line-badge-lg,
.metro-line-card-badge {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 4px 10px;
  margin: 0 8px 0 2px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  line-height: 1.2;
  min-width: 32px;
  text-align: center;
}

.metro-line-card-content {
  flex: 1;
  min-width: 0;
}

.metro-line-card-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.3;
}

.metro-line-card-meta,
.metro-line-card-desc {
  font-size: 0.74rem;
  color: var(--text-secondary, #64748b);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metro-line-card-arrow {
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.metro-line-card-btn:hover .metro-line-card-arrow {
  transform: translateX(3px);
  color: var(--text-primary, #0f172a);
}

.metro-back-to-map-btn {
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border, #e2e8f0);
  background: #f8fafc;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.metro-back-to-map-btn:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: var(--text-primary, #0f172a);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.metro-back-to-map-btn svg {
  width: 14px;
  height: 14px;
}

/* ----------------------------------------------------------
   6. Mobile & Responsive Layouts
   ---------------------------------------------------------- */
@media (max-width: 860px) {
  .metro-track-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .metro-track {
    display: flex;
    position: relative;
    width: max-content;
    min-width: 100%;
    justify-content: flex-start;
    padding: 0 12px;
  }
  
  .metro-node {
    flex: 0 0 110px;
    width: 110px;
    min-width: 110px;
    max-width: 110px;
  }

  .metro-detail-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .metro-detail-right {
    justify-content: flex-end;
  }

  .metro-map-canvas-wrapper {
    overflow-x: hidden;
    padding: 8px 4px;
  }

  .metro-network-svg {
    min-width: 0;
    width: 100%;
    height: auto;
    max-height: none;
  }

  .metro-map-legend-grid {
    grid-template-columns: 1fr;
  }
}



/* --- SECTION: xatbot.css --- */
/* ==========================================================
   RUMB - Xatbot de Suport Tècnic (LinkedIn Style)
   ========================================================== */

/* Botó flotant (FAB) */
.rumb-chatbot-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, box-shadow 0.3s;
}

.rumb-chatbot-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
}

.rumb-chatbot-fab:active {
    transform: scale(0.95);
}

/* Animació de morphing/rotació de les icones del FAB */
.rumb-chatbot-fab svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.rumb-chatbot-fab.open svg {
    transform: rotate(90deg);
}

/* Efecte Pulse dinàmic (anell exterior) */
.rumb-chatbot-fab.pulse::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 2px solid #7c3aed;
    animation: fab-pulse-ring 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    opacity: 0;
}

@keyframes fab-pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Panell de Xat Emergent */
.rumb-chatbot-panel {
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 380px;
    height: 500px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 120px);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.2);
    z-index: 2700;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease, width 0.25s ease, height 0.25s ease;
}

.rumb-chatbot-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.rumb-chatbot-panel.maximized {
    width: var(--rumb-chatbot-maximized-width, 570px);
    height: var(--rumb-chatbot-maximized-height, 750px);
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 120px);
}

/* Capçalera del xat */
.rumb-chatbot-header {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #ffffff;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.rumb-chatbot-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.rumb-chatbot-info {
    flex: 1;
}

.rumb-chatbot-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.rumb-chatbot-subtitle {
    font-size: 0.75rem;
    opacity: 0.85;
    margin: 0;
}

/* Accions de la capçalera */
.rumb-chatbot-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.rumb-chatbot-header-action-btn {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    border-radius: 6px;
    transition: opacity 0.2s, transform 0.1s, background-color 0.2s;
    line-height: 1;
}

.rumb-chatbot-header-action-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.08);
}

.rumb-chatbot-header-action-btn:active {
    transform: scale(0.95);
}

.rumb-chatbot-header-action-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Botó de tancament a la capçalera (X) */
.rumb-chatbot-header-close-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    border-radius: 6px;
    transition: opacity 0.2s, transform 0.1s, background-color 0.2s;
    line-height: 1;
}

.rumb-chatbot-header-close-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.rumb-chatbot-header-close-btn:active {
    transform: scale(0.9);
}

/* Zona de missatges */
.rumb-chatbot-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #f4f6f8;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Estils de les bombolles de missatges */
.rumb-chatbot-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
}

/* Missatge inicial de suport o bot */
.rumb-chatbot-msg.bot {
    background: #ffffff;
    color: #333333;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rumb-chatbot-msg.bot p {
    margin: 0;
}

.rumb-chatbot-msg.bot p:not(:last-child) {
    margin-bottom: 8px;
}

.rumb-chatbot-msg.bot ul,
.rumb-chatbot-msg.bot ol {
    margin: 6px 0 8px 0;
    padding-left: 20px;
}

.rumb-chatbot-msg.bot li {
    margin-bottom: 4px;
}

.rumb-chatbot-msg.bot li:last-child {
    margin-bottom: 0;
}

/* Missatge de l'usuari */
.rumb-chatbot-msg.user {
    background: #0073b1;
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 115, 177, 0.1);
}

/* Missatges d'error o quota */
.rumb-chatbot-msg.error {
    background: #fee2e2;
    color: #b91c1c;
    align-self: center;
    text-align: center;
    font-weight: 500;
    max-width: 90%;
    border: 1px solid #fca5a5;
}

/* Zona d'entrada / Input */
.rumb-chatbot-input-area {
    padding: 12px 16px;
    background: #ffffff;
    border-top: 1px solid #e1e9ee;
    display: flex;
    gap: 8px;
    align-items: center;
}

.rumb-chatbot-input {
    flex: 1;
    border: 1px solid #b2c2cd;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    background: #ffffff;
    color: #333333;
}

.rumb-chatbot-input:focus {
    border-color: #0073b1;
}

.rumb-chatbot-input:disabled {
    background: #f4f6f8;
    color: #888888;
    cursor: not-allowed;
}

.rumb-chatbot-send-btn {
    background: #7c3aed;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    flex-shrink: 0;
}

.rumb-chatbot-send-btn:hover:not(:disabled) {
    background: #5b21b6;
}

.rumb-chatbot-send-btn:active:not(:disabled) {
    transform: scale(0.92);
}

.rumb-chatbot-send-btn:disabled {
    background: #b2c2cd;
    cursor: not-allowed;
}

/* Punts de càrrega parpellejant (loading state) */
.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background-color: #7c3aed;
    border-radius: 50%;
    animation: loading-blink 1.4s infinite both;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loading-blink {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================================
   SUPORT DE DARK MODE
   ========================================================== */
body.dark-mode .rumb-chatbot-panel {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .rumb-chatbot-messages {
    background: #0f172a;
}

body.dark-mode .rumb-chatbot-msg.bot {
    background: #1e293b;
    color: #f1f5f9;
}

body.dark-mode .rumb-chatbot-input-area {
    background: #1e293b;
    border-top-color: #334155;
}

body.dark-mode .rumb-chatbot-input {
    background: #0f172a;
    border-color: #475569;
    color: #f1f5f9;
}

body.dark-mode .rumb-chatbot-input:focus {
    border-color: #0073b1;
}

body.dark-mode .rumb-chatbot-msg.error {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #ef4444;
}

body.dark-mode .loading-dots span {
    background-color: #38bdf8;
}

/* Enllaços de drecera a pestanyes dins els missatges de la IA */
.rumb-chatbot-msg.bot a[href^="#tab-"] {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 115, 177, 0.08);
    color: var(--li-blue, #0073b1);
    border: 1px solid rgba(0, 115, 177, 0.15);
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    margin: 2px 4px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.rumb-chatbot-msg.bot a[href^="#tab-"]:hover {
    background: var(--li-blue, #0073b1);
    color: #ffffff !important;
    border-color: var(--li-blue, #0073b1);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 115, 177, 0.15);
}

body.dark-mode .rumb-chatbot-msg.bot a[href^="#tab-"] {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.2);
}

body.dark-mode .rumb-chatbot-msg.bot a[href^="#tab-"]:hover {
    background: #38bdf8;
    color: #0f172a !important;
    border-color: #38bdf8;
}

/* ==========================================================
   PILLS I GUIATGE CONVERSACIONAL (WIZARD MODE)
   ========================================================== */
.rumb-chatbot-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 4px 16px 14px 16px;
    animation: rumbPillsFadeIn 0.25s ease-out;
}

@keyframes rumbPillsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.rumb-chatbot-pill-btn {
    background: #ffffff;
    border: 1.5px solid var(--li-blue, #0a66c2);
    color: var(--li-blue, #0a66c2);
    padding: 7px 13px;
    border-radius: 18px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.25;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rumb-chatbot-pill-btn:hover {
    background: var(--li-blue-faint, #f0f7fd);
    border-color: var(--li-blue-dark, #004182);
    color: var(--li-blue-dark, #004182);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(10, 102, 194, 0.2);
}

.rumb-chatbot-pill-btn.primary {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
}

.rumb-chatbot-pill-btn.primary:hover {
    background: #5b21b6;
    border-color: #5b21b6;
    color: #ffffff;
}

.rumb-chatbot-pill-btn.secondary {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

.rumb-chatbot-pill-btn.secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}

/* Selector múltiple de pills (amb checkboxes interactius) */
.rumb-chatbot-pills.multi-select {
    flex-direction: column;
    gap: 8px;
}

.rumb-chatbot-multiselect-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.rumb-chatbot-toggle-pill {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 6px 12px;
    border-radius: 18px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.rumb-chatbot-toggle-pill:hover {
    border-color: var(--li-blue, #0a66c2);
    color: var(--li-blue, #0a66c2);
    background: var(--li-blue-faint, #f0f7fd);
    transform: translateY(-1px);
}

.rumb-chatbot-toggle-pill.active {
    background: var(--li-blue, #0a66c2);
    border-color: var(--li-blue, #0a66c2);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(10, 102, 194, 0.25);
}

.rumb-chatbot-toggle-pill.active:hover {
    background: var(--li-blue-dark, #004182);
    border-color: var(--li-blue-dark, #004182);
    color: #ffffff;
}

/* Efecte d'il·luminació al camp actualitzat pel xatbot */
.field-wizard-highlight {
    animation: wizardHighlight 1.5s ease-out;
}

@keyframes wizardHighlight {
    0% {
        box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.45);
        border-color: #0a66c2 !important;
    }
    50% {
        box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.25);
        border-color: #0a66c2 !important;
    }
    100% {
        box-shadow: none;
    }
}

/* Mode fosc per a les pills */
body.dark-mode .rumb-chatbot-pill-btn {
    background: #1e293b;
    border-color: #38bdf8;
    color: #38bdf8;
}
body.dark-mode .rumb-chatbot-pill-btn:hover {
    background: #0f172a;
    border-color: #7dd3fc;
    color: #7dd3fc;
}
body.dark-mode .rumb-chatbot-pill-btn.primary {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}
body.dark-mode .rumb-chatbot-pill-btn.secondary {
    background: #1e293b;
    border-color: #475569;
    color: #94a3b8;
}

body.dark-mode .rumb-chatbot-toggle-pill {
    background: #1e293b;
    border-color: #475569;
    color: #cbd5e1;
}

body.dark-mode .rumb-chatbot-toggle-pill:hover {
    border-color: #38bdf8;
    color: #38bdf8;
    background: #0f172a;
}

body.dark-mode .rumb-chatbot-toggle-pill.active {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

/* ==========================================================
   DISSENY ADAPTAT PER A MÒBILS (< 768px)
   ========================================================== */
@media (max-width: 768px) {
    #rumb-chatbot-header-maximize-btn {
        display: none !important;
    }

    .rumb-chatbot-fab {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .rumb-chatbot-panel {
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
        transform: translateY(100%);
    }

    .rumb-chatbot-panel.open {
        transform: translateY(0);
    }
    
    .rumb-chatbot-header {
        padding-top: env(safe-area-inset-top, 16px);
    }

    /* Mode guiat en mòbils: format Bottom Sheet (meitat inferior) */
    .rumb-chatbot-panel.guided-mode {
        top: auto;
        bottom: 0;
        height: 52vh;
        max-height: 52vh;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
        border-top: 2px solid var(--li-blue, #0a66c2);
    }

    .rumb-chatbot-panel.guided-mode .rumb-chatbot-header {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* Ajustos per a pantalles mòbils petites amb barra de navegació inferior de Rumb */
@media (max-width: 600px) {
    .rumb-chatbot-fab {
        bottom: 80px; /* 64px d'alçada de la barra inferior + 16px de marge */
    }

    .rumb-chatbot-panel {
        bottom: 64px; /* Per sobre de la barra inferior de pestanyes */
        height: calc(100% - 64px);
    }

    .rumb-chatbot-panel.guided-mode {
        bottom: 64px;
        height: calc(52vh - 20px);
        max-height: calc(52vh - 20px);
    }
}