wagtail-enap-designsystem 1.2.1.194__py3-none-any.whl → 1.2.1.196__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of wagtail-enap-designsystem might be problematic. Click here for more details.

Files changed (20) hide show
  1. enap_designsystem/blocks/form.py +45 -28
  2. enap_designsystem/blocks/html_blocks.py +15 -17
  3. enap_designsystem/blocks/layout_blocks.py +14 -1
  4. enap_designsystem/migrations/0467_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +82760 -0
  5. enap_designsystem/migrations/0468_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +82575 -0
  6. enap_designsystem/static/enap_designsystem/blocks/capsulas.css +618 -26
  7. enap_designsystem/templates/enap_designsystem/blocks/carousel_responsive.html +0 -3
  8. enap_designsystem/templates/enap_designsystem/blocks/carousel_responsivo_snippet.html +1 -3
  9. enap_designsystem/templates/enap_designsystem/form_templates/formulario_page.html +147 -16
  10. enap_designsystem/templates/enap_designsystem/form_templates/formulario_page_landing.html +0 -1
  11. enap_designsystem/templates/enap_designsystem/form_templates/formulario_page_success.html +0 -1
  12. enap_designsystem/templates/enap_designsystem/includes/form_field.html +96 -121
  13. enap_designsystem/templates/enap_designsystem/pages/capsula_page.html +85 -60
  14. enap_designsystem/templates/enap_designsystem/pages/quiz_rota_page.html +314 -829
  15. enap_designsystem/wagtail_hooks.py +150 -38
  16. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/METADATA +1 -1
  17. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/RECORD +20 -18
  18. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/WHEEL +0 -0
  19. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/licenses/LICENSE +0 -0
  20. {wagtail_enap_designsystem-1.2.1.194.dist-info → wagtail_enap_designsystem-1.2.1.196.dist-info}/top_level.txt +0 -0
@@ -1,3 +1,448 @@
1
+ /* Estilos Base */
2
+ body {
3
+ margin: 0;
4
+ font-family: 'Inter', sans-serif;
5
+ color: #333;
6
+ }
7
+
8
+ /* Estilos do Container Principal */
9
+ .quiz-container {
10
+ display: flex;
11
+ min-height: 100vh;
12
+ background-color: #02333A;
13
+ }
14
+
15
+ /* Lado Esquerdo - Informações */
16
+ .quiz-info {
17
+ width: 50%;
18
+ background-color: #02333A;
19
+ color: white;
20
+ padding: 3rem;
21
+ display: flex;
22
+ flex-direction: column;
23
+ justify-content: space-between;
24
+ }
25
+
26
+ /* Lado Direito - Perguntas */
27
+ .quiz-questions {
28
+ width: 50%;
29
+ background-color: #FFFFFF;
30
+ padding: 3rem;
31
+ box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
32
+ }
33
+
34
+ /* Link para Homepage */
35
+ .home-link {
36
+ display: flex;
37
+ align-items: center;
38
+ color: #FFFFFF;
39
+ text-decoration: none;
40
+ font-weight: 500;
41
+ margin-bottom: 2rem;
42
+ }
43
+
44
+ .home-link svg {
45
+ margin-right: 0.5rem;
46
+ }
47
+
48
+ .home-link svg path {
49
+ stroke: #FFFFFF;
50
+ }
51
+
52
+ /* Indicador de Passos */
53
+ .step-indicator {
54
+ color: #02333A;
55
+ font-size: 0.875rem;
56
+ margin-bottom: 1rem;
57
+ opacity: 0.8;
58
+ }
59
+
60
+ /* Título da Pergunta */
61
+ .question-title {
62
+ color: #FFFFFF;
63
+ font-size: 2.5rem;
64
+ font-weight: 700;
65
+ margin-bottom: 0.5rem;
66
+ line-height: 1.2;
67
+ }
68
+
69
+ .question-subtitle {
70
+ color: rgba(255, 255, 255, 0.8);
71
+ font-size: 1.125rem;
72
+ margin-bottom: 2rem;
73
+ }
74
+
75
+ /* Container da Ilustração */
76
+ .illustration-container {
77
+ margin-top: 2rem;
78
+ }
79
+
80
+ .illustration {
81
+ max-width: 100%;
82
+ height: auto;
83
+ }
84
+
85
+ /* Cards de Perguntas */
86
+ .pergunta-card {
87
+ height: 100%;
88
+ display: flex;
89
+ flex-direction: column;
90
+ justify-content: space-between;
91
+ }
92
+
93
+ /* Container de Opções */
94
+ .options-container {
95
+ display: flex;
96
+ flex-direction: column;
97
+ gap: 0.75rem;
98
+ margin-bottom: 2rem;
99
+ }
100
+
101
+ /* Botões de Opção */
102
+ .option-button {
103
+ display: flex;
104
+ align-items: center;
105
+ padding: 1rem;
106
+ border: 1px solid #E0E0E0;
107
+ border-radius: 8px;
108
+ background-color: white;
109
+ cursor: pointer;
110
+ transition: all 0.2s ease;
111
+ }
112
+
113
+ .option-button:hover {
114
+ border-color: #02333A;
115
+ background-color: rgba(2, 51, 58, 0.05);
116
+ }
117
+
118
+ .option-button.selected {
119
+ border-color: #02333A;
120
+ background-color: rgba(2, 51, 58, 0.05);
121
+ }
122
+
123
+ .option-circle {
124
+ width: 20px;
125
+ height: 20px;
126
+ border: 2px solid #E0E0E0;
127
+ border-radius: 50%;
128
+ margin-right: 1rem;
129
+ transition: all 0.2s ease;
130
+ }
131
+
132
+ .option-button.selected .option-circle {
133
+ background-color: #02333A;
134
+ border-color: #02333A;
135
+ }
136
+
137
+ .option-text {
138
+ font-size: 1rem;
139
+ }
140
+
141
+ /* Botões de Navegação */
142
+ .navigation-buttons {
143
+ display: flex;
144
+ justify-content: space-between;
145
+ margin-top: auto;
146
+ }
147
+
148
+ .button {
149
+ padding: 0.75rem 1.5rem;
150
+ border-radius: 8px;
151
+ font-weight: 500;
152
+ cursor: pointer;
153
+ transition: all 0.2s ease;
154
+ border: 2px solid;
155
+ }
156
+
157
+ .button-primary {
158
+ background-color: #02333A;
159
+ color: white;
160
+ border-color: white;
161
+ }
162
+
163
+ .button-primary:hover {
164
+ background-color: #034854;
165
+ }
166
+
167
+ .button-primary:disabled {
168
+ background-color: #cccccc;
169
+ color: #666666;
170
+ border-color: #cccccc;
171
+ cursor: not-allowed;
172
+ }
173
+
174
+ .button-outline {
175
+ color: white;
176
+ border-color: white;
177
+ background-color: transparent;
178
+ }
179
+
180
+ .button-outline:hover {
181
+ background-color: rgba(255, 255, 255, 0.1);
182
+ }
183
+
184
+ /* Tela de Resultado */
185
+ .resultado-rotas {
186
+ background-color: #02333A;
187
+ color: white;
188
+ min-height: 100vh;
189
+ padding: 3rem 0;
190
+ }
191
+
192
+ .container {
193
+ max-width: 1200px;
194
+ margin: 0 auto;
195
+ padding: 0 1rem;
196
+ }
197
+
198
+ /* Cabeçalho do Resultado */
199
+ .resultado-header {
200
+ margin-bottom: 3rem;
201
+ text-align: center;
202
+ }
203
+
204
+ .resultado-header h1 {
205
+ color: white;
206
+ font-size: 2.5rem;
207
+ margin-bottom: 2rem;
208
+ }
209
+
210
+ /* Resumo das Respostas */
211
+ .resumo-respostas {
212
+ margin-bottom: 2rem;
213
+ }
214
+
215
+ .resumo-respostas h3 {
216
+ color: white;
217
+ font-size: 1.25rem;
218
+ margin-bottom: 1rem;
219
+ }
220
+
221
+ .badges-respostas {
222
+ display: flex;
223
+ flex-wrap: wrap;
224
+ justify-content: center;
225
+ gap: 0.75rem;
226
+ list-style: none;
227
+ padding: 0;
228
+ }
229
+
230
+ .badges-respostas .badge {
231
+ background-color: rgba(255, 255, 255, 0.2);
232
+ color: white;
233
+ padding: 0.5rem 1rem;
234
+ border-radius: 50px;
235
+ font-size: 0.875rem;
236
+ }
237
+
238
+ /* Texto do Resultado */
239
+ .texto-resultado {
240
+ margin-bottom: 2rem;
241
+ max-width: 800px;
242
+ margin-left: auto;
243
+ margin-right: auto;
244
+ }
245
+
246
+ /* Ações do Resultado */
247
+ .acoes-resultado {
248
+ display: flex;
249
+ justify-content: center;
250
+ gap: 1rem;
251
+ margin-bottom: 3rem;
252
+ }
253
+
254
+ .capsulas-recomendadas h2 {
255
+ margin-bottom: 2rem;
256
+ font-size: 1.75rem;
257
+ }
258
+
259
+ /* Grid de Cápsulas */
260
+ .capsulas-grid {
261
+ display: grid;
262
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
263
+ gap: 2rem;
264
+ }
265
+
266
+ /* Cards de Cápsulas */
267
+ .capsula-card {
268
+ background-color: white;
269
+ border-radius: 10px;
270
+ padding: 1.5rem;
271
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
272
+ position: relative;
273
+ color: #333;
274
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
275
+ }
276
+
277
+ .capsula-card:hover {
278
+ transform: translateY(-5px);
279
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
280
+ }
281
+
282
+ .capsula-card.obrigatorio {
283
+ border-left: 5px solid #FF5722;
284
+ }
285
+
286
+ .capsula-card.recomendado {
287
+ border-left: 5px solid #02333A;
288
+ }
289
+
290
+ /* Badge de Prioridade */
291
+ .badge-prioridade {
292
+ position: absolute;
293
+ top: -10px;
294
+ right: 20px;
295
+ padding: 0.25rem 0.75rem;
296
+ border-radius: 50px;
297
+ font-size: 0.75rem;
298
+ font-weight: 700;
299
+ }
300
+
301
+ .badge-obrigatorio {
302
+ background-color: #FF5722;
303
+ color: white;
304
+ }
305
+
306
+ .badge-recomendado {
307
+ color: #02333A;
308
+ border: 2px solid #02333A;
309
+ background-color: rgba(255, 255, 255, 0.9);
310
+ }
311
+
312
+ /* Título da Cápsula */
313
+ .capsula-card h3 {
314
+ margin-top: 0.5rem;
315
+ margin-bottom: 1rem;
316
+ font-size: 1.25rem;
317
+ }
318
+
319
+ .capsula-card h3 a {
320
+ color: #02333A;
321
+ text-decoration: none;
322
+ }
323
+
324
+ .capsula-card h3 a:hover {
325
+ text-decoration: underline;
326
+ }
327
+
328
+ /* Resumo da Cápsula */
329
+ .capsula-resumo {
330
+ font-size: 0.875rem;
331
+ color: #666;
332
+ margin-bottom: 1rem;
333
+ }
334
+
335
+ /* Tags da Cápsula */
336
+ .capsula-tags {
337
+ display: flex;
338
+ flex-wrap: wrap;
339
+ gap: 0.5rem;
340
+ margin-bottom: 1.5rem;
341
+ }
342
+
343
+ .tag {
344
+ background-color: #f0f0f0;
345
+ color: #666;
346
+ padding: 0.25rem 0.75rem;
347
+ border-radius: 50px;
348
+ font-size: 0.75rem;
349
+ }
350
+
351
+ /* Botão de Ler Cápsula */
352
+ .btn-ler-capsula {
353
+ display: inline-block;
354
+ color: #02333A;
355
+ font-weight: bold;
356
+ text-decoration: none;
357
+ margin-top: auto;
358
+ }
359
+
360
+ .btn-ler-capsula:hover {
361
+ text-decoration: underline;
362
+ }
363
+
364
+ /* Mensagem de Sem Resultados */
365
+ .sem-resultados {
366
+ text-align: center;
367
+ padding: 2rem;
368
+ background-color: rgba(255, 255, 255, 0.1);
369
+ border-radius: 8px;
370
+ }
371
+
372
+ .sem-resultados p {
373
+ margin-bottom: 1.5rem;
374
+ font-size: 1.125rem;
375
+ }
376
+
377
+ /* Menu GovBR */
378
+ .menu {
379
+ display: flex;
380
+ align-items: center;
381
+ padding: 0.75rem 2rem;
382
+ color: white;
383
+ }
384
+
385
+ .menu a {
386
+ color: white;
387
+ text-decoration: none;
388
+ font-size: 0.875rem;
389
+ opacity: 0.9;
390
+ }
391
+
392
+ .menu a:hover {
393
+ opacity: 1;
394
+ }
395
+
396
+ .separator {
397
+ width: 1px;
398
+ height: 16px;
399
+ background-color: rgba(255, 255, 255, 0.3);
400
+ margin: 0 1rem;
401
+ }
402
+
403
+ .logo {
404
+ margin-right: 2rem;
405
+ }
406
+
407
+ /* Responsividade */
408
+ @media (max-width: 992px) {
409
+ .quiz-container {
410
+ flex-direction: column;
411
+ }
412
+
413
+ .quiz-info, .quiz-questions {
414
+ width: 100%;
415
+ }
416
+
417
+ .navigation-buttons {
418
+ margin-top: 2rem;
419
+ }
420
+ }
421
+
422
+ @media (max-width: 768px) {
423
+ .capsulas-grid {
424
+ grid-template-columns: 1fr;
425
+ }
426
+
427
+ .acoes-resultado {
428
+ flex-direction: column;
429
+ }
430
+
431
+ .menu {
432
+ flex-wrap: wrap;
433
+ gap: 0.5rem;
434
+ }
435
+
436
+ .separator {
437
+ display: none;
438
+ }
439
+ }
440
+
441
+
442
+
443
+
444
+
445
+
1
446
  /* Estilos de ênfase para elementos principais */
2
447
  .capsulas-hero__title {
3
448
  font-size: 2.5rem;
@@ -7,10 +452,23 @@
7
452
  line-height: 1.2;
8
453
  }
9
454
 
455
+ .wrapper-capsulas-page{
456
+ background-color: #F5F7FA;
457
+ }
458
+
10
459
  .capsulas-illustration{
11
460
  width: 100%;
12
461
  }
13
462
 
463
+ .capsulas-illustration img{
464
+ width: 100%;
465
+ }
466
+
467
+ .capsulas-illustration-card-normas{
468
+ max-width: 200px;
469
+ margin-bottom: 30px ;
470
+ }
471
+
14
472
  .capsulas-section-header{
15
473
  margin-bottom: 50px;
16
474
  }
@@ -132,12 +590,12 @@
132
590
 
133
591
  .capsulas-accordion__icon i {
134
592
  font-size: 1.2rem;
135
- color: var(--primary, #00a39c);
593
+ color: white;
136
594
  }
137
595
 
138
596
  .capsulas-accordion__toggle i {
139
597
  font-size: 1.2rem;
140
- color: var(--primary, #00a39c);
598
+ color: white;
141
599
  transition: all 0.3s ease;
142
600
  }
143
601
 
@@ -166,12 +624,6 @@
166
624
  transition: all 0.3s ease;
167
625
  }
168
626
 
169
- .capsulas-tab-navigation.fixed {
170
- position: sticky;
171
- top: 0;
172
- box-shadow: 0 5px 15px rgba(0,0,0,0.1);
173
- }
174
-
175
627
  .fa-ban:before, .fa-cancel:before {
176
628
  width: 100%;
177
629
  }
@@ -979,6 +1431,7 @@ a:hover, a:focus {
979
1431
  max-width: 1142px;
980
1432
  margin: 0 auto;
981
1433
  padding: 0 1.5rem;
1434
+ width: 100%;
982
1435
  }
983
1436
 
984
1437
  /* Header */
@@ -1098,10 +1551,8 @@ nav a:hover, nav a:focus {
1098
1551
  }
1099
1552
 
1100
1553
  .capsulas-hero__cta:hover, .capsulas-hero__cta:focus {
1101
- background-color: var(--primary-dark);
1102
- transform: translateY(-2px);
1103
- border-color: var(--light);
1104
- outline-offset: 3px;
1554
+ background-color: #006969;
1555
+ color: white;
1105
1556
  }
1106
1557
 
1107
1558
  /* Floating Tab Navigation */
@@ -1112,7 +1563,7 @@ nav a:hover, nav a:focus {
1112
1563
  margin-top: -30px;
1113
1564
  position: relative;
1114
1565
  z-index: 10;
1115
- padding: 0.8rem 1.2rem;
1566
+ padding: 10px;
1116
1567
  transition: all 0.3s ease;
1117
1568
  max-width: 1000px;
1118
1569
  margin-left: auto;
@@ -1121,7 +1572,7 @@ nav a:hover, nav a:focus {
1121
1572
 
1122
1573
  .capsulas-tab-navigation.fixed {
1123
1574
  position: fixed;
1124
- top: 30px;
1575
+ bottom: 0px;
1125
1576
  left: 50%;
1126
1577
  transform: translateX(-50%);
1127
1578
  width: 90%;
@@ -1158,6 +1609,7 @@ nav a:hover, nav a:focus {
1158
1609
  display: flex;
1159
1610
  list-style: none;
1160
1611
  gap: 1rem;
1612
+ margin: 0;
1161
1613
  }
1162
1614
 
1163
1615
  .capsulas-tab-item {
@@ -1185,11 +1637,7 @@ nav a:hover, nav a:focus {
1185
1637
  outline-offset: 2px;
1186
1638
  }
1187
1639
 
1188
- .capsulas-tab-item.capsulas-tab-item--active {
1189
- background-color: var(--tab-active); /* Cor ajustada para melhor contraste */
1190
- color: var(--light);
1191
- border: 2px solid var(--light);
1192
- }
1640
+
1193
1641
 
1194
1642
  .capsulas-tab-arrow {
1195
1643
  width: 44px; /* Aumentado para área de toque adequada */
@@ -1233,13 +1681,33 @@ nav a:hover, nav a:focus {
1233
1681
  position: relative;
1234
1682
  }
1235
1683
 
1236
- .capsulas-content-section:nth-child(even) {
1237
- background-color: var(--primary-light);
1684
+ .bg_dark_green100{
1685
+ background-color: #02333A;
1686
+ color: white;
1687
+ padding: 30px 0;
1688
+ }
1689
+
1690
+ .bg_gray10{
1691
+ background-color: #F5F7FA;
1692
+ color: #333333;
1693
+ padding: 90px 0;
1238
1694
  }
1239
1695
 
1240
- .capsulas-content-section-why {
1696
+ .bg_gray20{
1697
+ background-color: #EBEFF5;
1698
+ color: #333333;
1699
+ padding: 90px 0;
1700
+ }
1701
+
1702
+ .bg_gray30{
1241
1703
  background-color: #DEE3ED;
1242
- color: white;
1704
+ color: #333333;
1705
+ padding: 90px 0;
1706
+ }
1707
+
1708
+ .bg_dark{
1709
+ background-color: #DEE3ED;
1710
+ color: #024248;
1243
1711
  padding: 30px 0;
1244
1712
  }
1245
1713
 
@@ -1302,10 +1770,14 @@ nav a:hover, nav a:focus {
1302
1770
  object-position: top;
1303
1771
  }
1304
1772
 
1773
+ .white{
1774
+ color: white;
1775
+ }
1776
+
1305
1777
  /* Content Cards */
1306
1778
  .capsulas-cards-grid {
1307
1779
  display: grid;
1308
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
1780
+ grid-template-columns: 1fr 1fr 1fr;
1309
1781
  gap: 2rem;
1310
1782
  margin-top: 2rem;
1311
1783
  }
@@ -1374,7 +1846,6 @@ nav a:hover, nav a:focus {
1374
1846
  .capsulas-btn.capsulas-btn--primary:hover,
1375
1847
  .capsulas-btn.capsulas-btn--primary:focus {
1376
1848
  background-color: var(--primary-dark);
1377
- border-color: var(--light);
1378
1849
  }
1379
1850
 
1380
1851
  .capsulas-btn:focus-visible {
@@ -1430,7 +1901,7 @@ nav a:hover, nav a:focus {
1430
1901
  }
1431
1902
 
1432
1903
  .capsulas-accordion__title {
1433
- font-size: 1.1rem;
1904
+ font-size: 24px;
1434
1905
  font-weight: 600;
1435
1906
  color: var(--primary);
1436
1907
  display: flex;
@@ -1581,4 +2052,125 @@ nav a:hover, nav a:focus {
1581
2052
  min-width: 44px;
1582
2053
  min-height: 44px;
1583
2054
  }
2055
+ }
2056
+
2057
+
2058
+
2059
+ /* Estilo para aba ativa */
2060
+ .capsulas-tab-item--active {
2061
+ color: var(--primary, #071d41);
2062
+ font-weight: 600;
2063
+ }
2064
+
2065
+ .capsulas-tab-item--active::after {
2066
+ content: '';
2067
+ position: absolute;
2068
+ bottom: 0;
2069
+ left: 0;
2070
+ width: 100%;
2071
+ height: 3px;
2072
+ background-color: var(--primary, #071d41);
2073
+ border-radius: 3px 3px 0 0;
2074
+ transition: all 0.3s ease;
2075
+ }
2076
+
2077
+ .capsulas-tab-item:hover::after {
2078
+ content: '';
2079
+ position: absolute;
2080
+ bottom: 0;
2081
+ left: 0;
2082
+ width: 100%;
2083
+ height: 2px;
2084
+ background-color: var(--primary-light, #2670e8);
2085
+ border-radius: 3px 3px 0 0;
2086
+ opacity: 0.7;
2087
+ }
2088
+
2089
+ /* Adicionar estilos para melhorar o comportamento da navegação por abas */
2090
+ .capsulas-tabs-container {
2091
+ position: relative;
2092
+ width: 100%;
2093
+ overflow: hidden;
2094
+ }
2095
+
2096
+ .capsulas-tabs-scroll {
2097
+ width: 100%;
2098
+ overflow-x: auto;
2099
+ scrollbar-width: none; /* Firefox */
2100
+ -ms-overflow-style: none; /* IE and Edge */
2101
+ padding: 0 10px;
2102
+ }
2103
+
2104
+ /* Esconder scrollbar para Chrome, Safari e Opera */
2105
+ .capsulas-tabs-scroll::-webkit-scrollbar {
2106
+ display: none;
2107
+ }
2108
+
2109
+ .capsulas-tabs {
2110
+ display: flex;
2111
+ list-style: none;
2112
+ padding: 0;
2113
+ margin: 0;
2114
+ white-space: nowrap;
2115
+ }
2116
+
2117
+ .capsulas-tab-item {
2118
+ display: inline-block;
2119
+ white-space: nowrap;
2120
+ margin: 0 5px;
2121
+ padding: 10px 15px;
2122
+ cursor: pointer;
2123
+ border: none;
2124
+ background: transparent;
2125
+ position: relative;
2126
+ font-weight: 500;
2127
+ transition: all 0.3s ease;
2128
+ }
2129
+
2130
+ .capsulas-tab-arrow {
2131
+ position: absolute;
2132
+ top: 50%;
2133
+ transform: translateY(-50%);
2134
+ width: 40px;
2135
+ height: 40px;
2136
+ border-radius: 50%;
2137
+ background-color: var(--primary, #071d41);
2138
+ color: white;
2139
+ border: none;
2140
+ display: flex;
2141
+ align-items: center;
2142
+ justify-content: center;
2143
+ cursor: pointer;
2144
+ z-index: 10;
2145
+ transition: all 0.3s ease;
2146
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
2147
+ }
2148
+
2149
+ .capsulas-tab-arrow--prev {
2150
+ left: 5px;
2151
+ }
2152
+
2153
+ .capsulas-tab-arrow--next {
2154
+ right: 5px;
2155
+ }
2156
+
2157
+ .capsulas-tab-arrow:hover {
2158
+ background-color: var(--primary-dark, #050e1f);
2159
+ }
2160
+
2161
+ .capsulas-tab-arrow:focus {
2162
+ outline: 2px solid var(--primary-light, #2670e8);
2163
+ outline-offset: 2px;
2164
+ }
2165
+
2166
+ @media (max-width: 768px) {
2167
+ .capsulas-tab-item {
2168
+ padding: 8px 10px;
2169
+ font-size: 0.9rem;
2170
+ }
2171
+
2172
+ .capsulas-tab-arrow {
2173
+ width: 32px;
2174
+ height: 32px;
2175
+ }
1584
2176
  }