:root {
       --primary: #003399;
       --primary-dark: #002266;
       --secondary: #ffcc00;
       --accent: #00a3e0;
       --bg-light: #f8fafc;
       --text-dark: #1e293b;
       --text-muted: #64748b;
       --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
       --card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
   }

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

   body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
       background: var(--bg-light);
       color: var(--text-dark);
       line-height: 1.6;
   }

   /* Header & Navigation */
   header {
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
       color: white;
       padding: 1rem 2rem;
       position: sticky;
       top: 0;
       z-index: 100;
       box-shadow: var(--card-shadow);
   }

   nav {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .logo {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       font-weight: 700;
       font-size: 1.5rem;
       text-decoration: none;
       color: white;
   }

   .logo-icon {
       width: 45px;
       height: 45px;
       background: var(--secondary);
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
   }

   .nav-links {
       display: flex;
       gap: 2rem;
       list-style: none;
   }

   .nav-links a {
       color: white;
       text-decoration: none;
       font-weight: 500;
       opacity: 0.9;
       transition: opacity 0.2s;
   }

   .nav-links a:hover {
       opacity: 1;
   }

   /* Page Header */
   .page-header {
       background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
       color: white;
       padding: 3rem 2rem;
       text-align: center;
   }

   .page-header h1 {
       font-size: 2.5rem;
       font-weight: 700;
       margin-bottom: 0.5rem;
   }

   .page-header p {
       opacity: 0.9;
       font-size: 1.1rem;
       max-width: 600px;
       margin: 0 auto;
   }

   /* Info Banner */
   .info-banner {
       background: linear-gradient(90deg, var(--secondary), #ffe066);
       padding: 1rem 2rem;
       text-align: center;
   }

   .info-banner p {
       max-width: 800px;
       margin: 0 auto;
       color: var(--primary-dark);
       font-weight: 500;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
   }

   /* Main Content */
   main {
       max-width: 1200px;
       margin: 0 auto;
       padding: 3rem 2rem;
   }

   /* Tabs */
   .tabs {
       display: flex;
       gap: 0.5rem;
       margin-bottom: 2rem;
       flex-wrap: wrap;
   }

   .tab {
       padding: 0.75rem 1.5rem;
       background: white;
       border: 2px solid transparent;
       border-radius: 50px;
       cursor: pointer;
       font-weight: 500;
       color: var(--text-muted);
       transition: all 0.2s;
   }

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

   .tab.active {
       background: var(--primary);
       color: white;
   }

   /* Document Container */
   .document-container {
       background: white;
       border-radius: 20px;
       box-shadow: var(--card-shadow);
       overflow: hidden;
   }

   .document-header {
       padding: 1.5rem 2rem;
       background: var(--bg-light);
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       gap: 1rem;
   }

   .document-title {
       display: flex;
       align-items: center;
       gap: 1rem;
   }

   .document-title h2 {
       font-size: 1.25rem;
       font-weight: 600;
   }

   .document-badge {
       background: var(--primary);
       color: white;
       padding: 0.25rem 0.75rem;
       border-radius: 50px;
       font-size: 0.75rem;
       font-weight: 600;
   }

   .document-actions {
       display: flex;
       gap: 0.5rem;
   }

   .btn-small {
       padding: 0.5rem 1rem;
       border-radius: 8px;
       text-decoration: none;
       font-weight: 500;
       font-size: 0.875rem;
       transition: all 0.2s;
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       border: none;
       cursor: pointer;
   }

   .btn-outline {
       background: white;
       color: var(--primary);
       border: 2px solid var(--primary);
   }

   .btn-outline:hover {
       background: var(--primary);
       color: white;
   }

   .btn-filled {
       background: var(--primary);
       color: white;
   }

   .btn-filled:hover {
       background: var(--primary-dark);
   }

   /* Document Content - Article for Hypothesis */
   .document-content {
       padding: 3rem;
       line-height: 1.8;
       font-size: 1rem;
   }

   .document-content h2 {
       font-size: 1.75rem;
       font-weight: 700;
       margin: 2rem 0 1rem;
       color: var(--primary);
       padding-bottom: 0.5rem;
       border-bottom: 2px solid var(--secondary);
   }

   .document-content h3 {
       font-size: 1.35rem;
       font-weight: 600;
       margin: 1.5rem 0 0.75rem;
       color: var(--text-dark);
   }

   .document-content h4 {
       font-size: 1.1rem;
       font-weight: 600;
       margin: 1.25rem 0 0.5rem;
       color: var(--text-dark);
   }

   .document-content p {
       margin-bottom: 1rem;
       text-align: justify;
   }

   .document-content ul,
   .document-content ol {
       margin: 1rem 0 1rem 2rem;
   }

   .document-content li {
       margin-bottom: 0.5rem;
   }

   .document-content blockquote {
       background: var(--bg-light);
       border-left: 4px solid var(--primary);
       padding: 1rem 1.5rem;
       margin: 1.5rem 0;
       font-style: italic;
       color: var(--text-muted);
   }

   .document-content .article-info {
       background: linear-gradient(135deg, rgba(0, 51, 153, 0.05), rgba(0, 163, 224, 0.05));
       border-radius: 12px;
       padding: 1.5rem;
       margin-bottom: 2rem;
   }

   .document-content .article-number {
       font-weight: 700;
       color: var(--primary);
   }

   /* Hypothesis Instructions */
   .hypothesis-guide {
       background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
       border-radius: 16px;
       padding: 2rem;
       margin-bottom: 2rem;
       border: 1px solid #bae6fd;
   }

   .hypothesis-guide h3 {
       color: var(--primary);
       margin-bottom: 1rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   .hypothesis-guide ol {
       margin-left: 1.5rem;
   }

   .hypothesis-guide li {
       margin-bottom: 0.5rem;
   }

   .hypothesis-guide .tip {
       background: white;
       padding: 1rem;
       border-radius: 8px;
       margin-top: 1rem;
       font-size: 0.9rem;
   }

   /* Footer */
   footer {
       background: var(--text-dark);
       color: white;
       padding: 2rem;
       text-align: center;
       margin-top: 4rem;
   }

   footer a {
       color: var(--secondary);
       text-decoration: none;
   }

   footer a:hover {
       text-decoration: underline;
   }

   /* Tab Content */
   .tab-content {
       display: none;
   }

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

   /* ============================================
           EUR-LEX CLASSES STYLING
           Permite colar diretamente HTML do EUR-Lex
           ============================================ */

   /* Container do conteúdo EUR-Lex */
   .eur-lex-content {
       padding: 2rem 3rem;
       line-height: 1.8;
       font-size: 1rem;
   }

   .eur-lex-content .content {
       margin-bottom: 2rem;
   }

   .eur-lex-content .contentWrapper {
       max-width: 100%;
   }

   /* Logo e cabeçalho institucional */
   .eur-lex-content .Logo {
       display: flex;
       align-items: center;
       gap: 1rem;
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--primary);
       margin-bottom: 1rem;
       padding: 1rem;
       background: linear-gradient(135deg, rgba(0, 51, 153, 0.05), rgba(0, 163, 224, 0.05));
       border-radius: 12px;
   }

   .eur-lex-content .Logo img {
       height: 50px;
       width: auto;
   }

   /* Datas e referências */
   .eur-lex-content .Emission,
   .eur-lex-content .Rfrenceinstitutionnelle,
   .eur-lex-content .Rfrenceinterinstitutionnelle {
       font-size: 0.9rem;
       color: var(--text-muted);
       margin-bottom: 0.5rem;
   }

   .eur-lex-content .Emission {
       font-weight: 600;
   }

   /* Estatuto e tipo de documento */
   .eur-lex-content .Statut {
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: var(--text-muted);
       margin: 2rem 0 0.5rem;
   }

   .eur-lex-content .Typedudocument,
   .eur-lex-content .Typedudocument_cp {
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--primary);
       margin-bottom: 0.5rem;
       line-height: 1.3;
   }

   .eur-lex-content .Titreobjet,
   .eur-lex-content .Titreobjet_cp {
       font-size: 1.25rem;
       font-weight: 600;
       color: var(--text-dark);
       margin-bottom: 1rem;
   }

   .eur-lex-content .IntrtEEE,
   .eur-lex-content .IntrtEEE_cp {
       font-style: italic;
       color: var(--text-muted);
       margin-bottom: 1rem;
   }

   .eur-lex-content .CrossReference_cp {
       font-size: 0.85rem;
       color: var(--text-muted);
   }

   /* Exposição de Motivos */
   .eur-lex-content .Exposdesmotifstitre {
       font-size: 1.75rem;
       font-weight: 700;
       color: var(--primary);
       margin: 2rem 0 1.5rem;
       padding-bottom: 0.5rem;
       border-bottom: 3px solid var(--secondary);
   }

   /* Headings manuais */
   .eur-lex-content .ManualHeading1 {
       font-size: 1.35rem;
       font-weight: 700;
       color: var(--primary);
       margin: 2rem 0 1rem;
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
   }

   .eur-lex-content .ManualHeading1 .num {
       background: var(--primary);
       color: white;
       padding: 0.25rem 0.75rem;
       border-radius: 50px;
       font-size: 1rem;
       min-width: 2rem;
       text-align: center;
   }

   .eur-lex-content .ManualHeading2 {
       font-size: 1.1rem;
       font-weight: 600;
       color: var(--text-dark);
       margin: 1.5rem 0 0.75rem;
       display: flex;
       align-items: flex-start;
       gap: 0.5rem;
   }

   .eur-lex-content .ManualHeading2 .num {
       color: var(--primary);
       font-weight: 700;
   }

   /* Textos principais */
   .eur-lex-content .Text1 {
       margin-bottom: 1rem;
       text-align: justify;
   }

   .eur-lex-content .Normal {
       margin-bottom: 1rem;
   }

   /* Considerandos */
   .eur-lex-content .ManualConsidrant {
       margin-bottom: 1rem;
       padding-left: 0;
       display: flex;
       align-items: flex-start;
       gap: 0.5rem;
   }

   .eur-lex-content .ManualConsidrant .num {
       background: var(--bg-light);
       color: var(--primary);
       font-weight: 700;
       padding: 0.25rem 0.5rem;
       border-radius: 4px;
       min-width: 2.5rem;
       text-align: center;
       flex-shrink: 0;
   }

   /* Artigos e Capítulos */
   .eur-lex-content .ChapterTitle {
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--primary);
       margin: 2.5rem 0 1rem;
       padding: 1rem;
       background: linear-gradient(135deg, rgba(0, 51, 153, 0.08), rgba(0, 163, 224, 0.05));
       border-radius: 8px;
       border-left: 4px solid var(--primary);
   }

   .eur-lex-content .SectionTitle {
       font-size: 1.15rem;
       font-weight: 600;
       color: var(--text-dark);
       margin: 2rem 0 1rem;
       padding-bottom: 0.5rem;
       border-bottom: 1px solid var(--secondary);
   }

   .eur-lex-content .Titrearticleb,
   .eur-lex-content .Titrearticle {
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--primary);
       margin: 2rem 0 0.5rem;
   }

   /* Listas e pontos */
   .eur-lex-content .li {
       display: flex;
       align-items: flex-start;
       gap: 0.5rem;
       margin-bottom: 0.75rem;
   }

   .eur-lex-content .li .num {
       font-weight: 600;
       color: var(--primary);
       min-width: 1.5rem;
       flex-shrink: 0;
   }

   .eur-lex-content .Point0,
   .eur-lex-content .Point1,
   .eur-lex-content .Point2 {
       margin-bottom: 0.75rem;
       padding-left: 0;
   }

   .eur-lex-content .Point1 {
       margin-left: 1.5rem;
   }

   .eur-lex-content .Point2 {
       margin-left: 3rem;
   }

   .eur-lex-content .Tiret1 {
       margin-left: 1.5rem;
       margin-bottom: 0.5rem;
   }

   /* Fórmulas e declarações institucionais */
   .eur-lex-content .Institutionquiagit,
   .eur-lex-content .Formuledadoption {
       font-weight: 600;
       font-size: 1.1rem;
       margin: 1.5rem 0 1rem;
       color: var(--text-dark);
   }

   /* Footnotes */
   .eur-lex-content .FootnoteReference0 {
       font-size: 0.75rem;
       vertical-align: super;
   }

   .eur-lex-content .footnoteRef {
       color: var(--primary);
       text-decoration: none;
       font-weight: 600;
   }

   .eur-lex-content .footnoteRef:hover {
       text-decoration: underline;
   }

   /* Links externos */
   .eur-lex-content .externalRef {
       color: var(--primary);
       text-decoration: none;
   }

   .eur-lex-content .externalRef:hover {
       text-decoration: underline;
   }

   /* Page breaks (ocultar) */
   .eur-lex-content .pageBreak {
       display: none;
   }

   /* cpMarking (ocultar se vazio) */
   .eur-lex-content .cpMarking:empty {
       display: none;
   }

   /* Responsive para EUR-Lex content */
   @media (max-width: 768px) {
       .eur-lex-content {
           padding: 1rem 1.5rem;
       }

       .eur-lex-content .ManualHeading1,
       .eur-lex-content .ManualConsidrant,
       .eur-lex-content .li {
           flex-direction: column;
           gap: 0.25rem;
       }

       .eur-lex-content .ManualHeading1 .num,
       .eur-lex-content .ManualConsidrant .num {
           align-self: flex-start;
       }
   }

   /* Responsive */
   @media (max-width: 768px) {
       .page-header h1 {
           font-size: 1.75rem;
       }

       .nav-links {
           display: none;
       }

       .document-content {
           padding: 1.5rem;
       }

       .document-header {
           flex-direction: column;
           align-items: flex-start;
       }
   }


   :root {
       --primary: #003399;
       --primary-dark: #002266;
       --secondary: #ffcc00;
       --accent: #00a3e0;
       --bg-light: #f8fafc;
       --text-dark: #1e293b;
       --text-muted: #64748b;
       --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
   }

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

   body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
       background: var(--bg-light);
       color: var(--text-dark);
       line-height: 1.6;
   }

   /* Header */
   header {
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
       color: white;
       padding: 1rem 2rem;
       position: sticky;
       top: 0;
       z-index: 100;
       box-shadow: var(--card-shadow);
   }

   nav {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .logo {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       font-weight: 700;
       font-size: 1.5rem;
       text-decoration: none;
       color: white;
   }

   .logo-icon {
       width: 45px;
       height: 45px;
       background: var(--secondary);
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
   }

   .nav-links {
       display: flex;
       gap: 2rem;
       list-style: none;
   }

   .nav-links a {
       color: white;
       text-decoration: none;
       font-weight: 500;
       opacity: 0.9;
   }

   .nav-links a:hover {
       opacity: 1;
   }

   /* Page Header */
   .page-header {
       background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
       color: white;
       padding: 3rem 2rem;
       text-align: center;
   }

   .page-header h1 {
       font-size: 2.5rem;
       font-weight: 700;
       margin-bottom: 0.5rem;
   }

   .page-header p {
       opacity: 0.9;
       font-size: 1.1rem;
   }

   /* Hypothesis Instructions */
   .hypothesis-guide {
       background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
       border-radius: 16px;
       padding: 2rem;
       margin-bottom: 2rem;
       border: 1px solid #bae6fd;
   }

   .hypothesis-guide h3 {
       color: var(--primary);
       margin-bottom: 1rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   .hypothesis-guide ol {
       margin-left: 1.5rem;
   }

   .hypothesis-guide li {
       margin-bottom: 0.5rem;
   }

   .hypothesis-guide .tip {
       background: white;
       padding: 1rem;
       border-radius: 8px;
       margin-top: 1rem;
       font-size: 0.9rem;
   }

   /* Tabs */
   .tabs {
       display: flex;
       gap: 0.5rem;
       margin-bottom: 2rem;
       flex-wrap: wrap;
   }

   .tab {
       padding: 0.75rem 1.5rem;
       background: white;
       border: 2px solid transparent;
       border-radius: 50px;
       cursor: pointer;
       font-weight: 500;
       color: var(--text-muted);
       transition: all 0.2s;
   }

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

   .tab.active {
       background: var(--primary);
       color: white;
   }

   /* Info Banner */
   .info-banner {
       background: linear-gradient(90deg, var(--secondary), #ffe066);
       padding: 1rem 2rem;
       text-align: center;
   }

   .info-banner p {
       color: var(--primary-dark);
       font-weight: 500;
   }

   /* Main Content */
   main {
       max-width: 1000px;
       margin: 0 auto;
       padding: 2rem;
   }

   /* Document Container */
   .document-container {
       background: white;
       border-radius: 20px;
       box-shadow: var(--card-shadow);
       overflow: hidden;
   }

   .document-header {
       padding: 1.5rem 2rem;
       background: var(--bg-light);
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       gap: 1rem;
   }

   .document-title h2 {
       font-size: 1.25rem;
       font-weight: 600;
   }

   .document-badge {
       background: var(--primary);
       color: white;
       padding: 0.25rem 0.75rem;
       border-radius: 50px;
       font-size: 0.75rem;
       font-weight: 600;
       margin-left: 1rem;
   }

   .btn-small {
       padding: 0.5rem 1rem;
       border-radius: 8px;
       text-decoration: none;
       font-weight: 500;
       font-size: 0.875rem;
       background: var(--primary);
       color: white;
   }

   .btn-small:hover {
       background: var(--primary-dark);
   }

   /* ============================================
           ESTILOS PARA O CONTEÚDO EUR-LEX
           ============================================ */

   #eur-lex-content {
       padding: 2rem 3rem;
       line-height: 1.8;
       font-size: 1rem;
   }

   #eur-lex-content .contentWrapper {
       max-width: 100%;
   }

   #eur-lex-content .content {
       margin-bottom: 2rem;
   }

   /* Logo e cabeçalho */
   #eur-lex-content .Logo {
       display: flex;
       align-items: center;
       gap: 1rem;
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--primary);
       margin-bottom: 1rem;
       padding: 1rem;
       background: rgba(0, 51, 153, 0.05);
       border-radius: 12px;
   }

   #eur-lex-content .Logo img {
       height: 50px;
   }

   /* Datas e referências */
   #eur-lex-content .Emission,
   #eur-lex-content .Rfrenceinstitutionnelle,
   #eur-lex-content .Rfrenceinterinstitutionnelle {
       font-size: 0.9rem;
       color: var(--text-muted);
       margin-bottom: 0.5rem;
   }

   /* Tipo de documento */
   #eur-lex-content .Statut {
       font-size: 0.875rem;
       text-transform: uppercase;
       color: var(--text-muted);
       margin: 2rem 0 0.5rem;
   }

   #eur-lex-content .Typedudocument,
   #eur-lex-content .Typedudocument_cp {
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--primary);
       margin-bottom: 0.5rem;
   }

   #eur-lex-content .Titreobjet,
   #eur-lex-content .Titreobjet_cp {
       font-size: 1.25rem;
       font-weight: 600;
       margin-bottom: 1rem;
   }

   #eur-lex-content .IntrtEEE,
   #eur-lex-content .IntrtEEE_cp {
       font-style: italic;
       color: var(--text-muted);
       margin-bottom: 1rem;
   }

   #eur-lex-content .CrossReference_cp {
       font-size: 0.85rem;
       color: var(--text-muted);
   }

   /* Exposição de Motivos */
   #eur-lex-content .Exposdesmotifstitre {
       font-size: 1.75rem;
       font-weight: 700;
       color: var(--primary);
       margin: 2rem 0 1.5rem;
       padding: 1rem;
       padding-right: 3rem;
       background: linear-gradient(135deg, rgba(0, 51, 153, 0.08), rgba(0, 163, 224, 0.05));
       border-radius: 8px;
       border-left: 4px solid var(--secondary);
   }

   /* Headings */
   #eur-lex-content .ManualHeading1 {
       font-size: 1.35rem;
       font-weight: 700;
       color: var(--primary);
       margin: 2rem 0 1rem;
       padding: 0.75rem 1rem;
       padding-right: 3rem;
       background: rgba(0, 51, 153, 0.05);
       border-radius: 8px;
       display: flex;
       gap: 0.75rem;
   }



   /* Fórmulas institucionais */
   #eur-lex-content .Institutionquiagit,
   #eur-lex-content .Formuledadoption {
       font-weight: 600;
       font-size: 1.1rem;
       margin: 1.5rem 0 1rem;
   }

   /* Footnotes */
   #eur-lex-content .FootnoteReference0 {
       font-size: 0.7rem;
       vertical-align: super;
       line-height: 0;
       position: relative;
       top: -0.3em;
   }

   #eur-lex-content .footnoteRef {
       color: white;
       background: var(--primary);
       text-decoration: none;
       font-weight: 600;
       padding: 0.1rem 0.35rem;
       border-radius: 3px;
       margin: 0 0.1rem;
       transition: background 0.2s;
   }

   #eur-lex-content .footnoteRef:hover {
       background: var(--accent);
       text-decoration: none;
   }

   /* Links */
   #eur-lex-content .externalRef {
       color: var(--primary);
       text-decoration: none;
   }

   #eur-lex-content .externalRef:hover {
       text-decoration: underline;
   }

   /* Ocultar elementos desnecessários */
   #eur-lex-content .pageBreak,
   #eur-lex-content .cpMarking:empty {
       display: none;
   }

   /* ============================================
           SECÇÕES COLAPSÁVEIS
           ============================================ */

   .collapsible {
       cursor: pointer;
       user-select: none;
       position: relative;
   }

   .collapsible::after {
       content: '▼';
       position: absolute;
       right: 1rem;
       top: 50%;
       transform: translateY(-50%);
       font-size: 0.75rem;
       color: var(--primary);
       transition: transform 0.3s ease;
   }

   .collapsible.collapsed::after {
       transform: translateY(-50%) rotate(-90deg);
   }

   .collapsible:hover {
       opacity: 0.85;
   }

   .collapsible-content {
       overflow: hidden;
       transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
       max-height: none;
       opacity: 1;
   }

   .collapsible-content.collapsed {
       max-height: 0 !important;
       opacity: 0;
       margin: 0 !important;
       padding: 0 !important;
   }

   /* Botões de controlo global */
   .collapse-controls {
       display: flex;
       gap: 0.5rem;
       margin-bottom: 1rem;
       padding: 1rem;
       background: var(--bg-light);
       border-radius: 8px;
       position: sticky;
       top: 70px;
       z-index: 50;
   }

   .collapse-btn {
       padding: 0.5rem 1rem;
       border: 2px solid var(--primary);
       background: white;
       color: var(--primary);
       border-radius: 6px;
       cursor: pointer;
       font-weight: 500;
       font-size: 0.875rem;
       transition: all 0.2s;
   }

   .collapse-btn:hover {
       background: var(--primary);
       color: white;
   }

   /* Footer */
   footer {
       background: var(--text-dark);
       color: white;
       padding: 2rem;
       text-align: center;
       margin-top: 4rem;
   }

   footer a {
       color: var(--secondary);
       text-decoration: none;
   }

   /* Responsive */
   @media (max-width: 768px) {
       .page-header h1 {
           font-size: 1.75rem;
       }

       .nav-links {
           display: none;
       }

       #eur-lex-content {
           padding: 1rem 1.5rem;
       }

       #eur-lex-content .ManualHeading1,
       #eur-lex-content .ManualConsidrant,
       #eur-lex-content .li {
           flex-direction: column;
           gap: 0.25rem;
       }
   }