1<#-- Convierte cada enlace http/https en botón "Visita el portal web" -->
2<#macro limpiarHtml html="">${html?replace('<a\\s+[^>]*?href="(https?://[^"]*)"[^>]*>.*?</a>', '<a class="umsa-btn" href="$1" target="_blank" rel="noopener">Visita el portal web</a>', 'ris')}</#macro> 3
4<#if unidad.getSiblings()?has_content>
5<div class="umsa-acc-container">
6
7 <#if titulo.getData()?has_content>
8 <div class="umsa-acc-header">
9 <h2 class="umsa-acc-title">
10 ${titulo.getData()} 11 <#if titulo_resaltado.getData()?has_content>
12 <span>${titulo_resaltado.getData()}</span> 13 </#if>
14 </h2>
15 </div>
16 </#if>
17
18 <div class="umsa-acc-list">
19 <#list unidad.getSiblings() as cur_unidad>
20
21 <div class="umsa-acc-group">
22
23 <#-- ============ UNIDAD ============ -->
24 <div class="umsa-acc-item umsa-acc-nivel-1">
25 <div
26 class="umsa-acc-question"
27 onclick="
28 var item = this.parentNode;
29 var isOpen = item.classList.contains('open'); 30 var all = item.closest('.umsa-acc-list').querySelectorAll('.umsa-acc-nivel-1'); 31 for (var i = 0; i < all.length; i++) { 32 all[i].classList.remove('open'); 33 all[i].querySelector('.umsa-acc-question').setAttribute('aria-expanded', 'false'); 34 }
35 if (!isOpen) { 36 item.classList.add('open'); 37 this.setAttribute('aria-expanded', 'true'); 38 }
39 "
40 onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); this.click(); }" 41 role="button"
42 tabindex="0"
43 aria-expanded="false"
44 >
45 <span class="umsa-acc-question-text">${cur_unidad.getData()}</span> 46 <span class="umsa-acc-chevron"></span>
47 </div>
48 <div class="umsa-acc-answer">
49 <div class="umsa-acc-answer-content">
50 <#if cur_unidad.getChild('contenido')??> 51 <@limpiarHtml html=cur_unidad.getChild('contenido').getData() /> 52 </#if>
53 </div>
54 </div>
55 </div>
56
57 <#-- ============ SUBUNIDADES (tarjetas aparte, debajo) ============ -->
58 <#if cur_unidad.getChild('subunidad')?? && cur_unidad.getChild('subunidad').getData()?has_content> 59 <div class="umsa-acc-sublist">
60 <#list cur_unidad.getChild('subunidad').getSiblings() as cur_sub> 61 <div class="umsa-acc-item umsa-acc-nivel-2">
62 <div
63 class="umsa-acc-question"
64 onclick="
65 var item = this.parentNode;
66 var isOpen = item.classList.contains('open'); 67 var all = item.parentNode.querySelectorAll(':scope > .umsa-acc-item'); 68 for (var i = 0; i < all.length; i++) { 69 all[i].classList.remove('open'); 70 all[i].querySelector('.umsa-acc-question').setAttribute('aria-expanded', 'false'); 71 }
72 if (!isOpen) { 73 item.classList.add('open'); 74 this.setAttribute('aria-expanded', 'true'); 75 }
76 "
77 onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); this.click(); }" 78 role="button"
79 tabindex="0"
80 aria-expanded="false"
81 >
82 <span class="umsa-acc-question-text">${cur_sub.getData()}</span> 83 <span class="umsa-acc-chevron"></span>
84 </div>
85 <div class="umsa-acc-answer">
86 <div class="umsa-acc-answer-content">
87 <#if cur_sub.getChild('contenido_sub')??> 88 <@limpiarHtml html=cur_sub.getChild('contenido_sub').getData() /> 89 </#if>
90 </div>
91 </div>
92 </div>
93 </#list>
94 </div>
95 </#if>
96
97 </div>
98 </#list>
99 </div>
100</div>
101</#if>
102
103<style type="text/css">
104@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); 105
106.umsa-acc-container { 107 --umsa-blue: #024966;
108 --umsa-blue-soft: #f1f6f9;
109 --umsa-red: #C0171D;
110 width: 100%;
111 max-width: 1200px;
112 margin: 35px auto;
113 padding: 0 40px;
114 box-sizing: border-box;
115 font-family: "Inter", Arial, sans-serif;
116}
117
118/* ===== TÍTULO ===== */
119.umsa-acc-header { 120 margin-bottom: 16px;
121 padding: 14px 20px;
122 background: #fff;
123 border: 1px solid var(--umsa-blue);
124 border-left: 5px solid var(--umsa-red);
125 border-radius: 12px;
126 text-align: center;
127 box-sizing: border-box;
128}
129.umsa-acc-title { 130 margin: 0;
131 color: var(--umsa-blue);
132 font-size: 18px;
133 font-weight: 700;
134 text-transform: uppercase;
135 letter-spacing: .3px;
136}
137.umsa-acc-title span { color: var(--umsa-red); } 138
139/* ===== ITEM ===== */
140.umsa-acc-item { 141 margin-bottom: 14px;
142 background: #fff;
143 border: 1px solid var(--umsa-blue);
144 border-radius: 12px;
145 overflow: hidden;
146 transition: box-shadow .25s ease;
147}
148.umsa-acc-item:hover { box-shadow: 0 4px 14px rgba(2, 73, 102, .12); } 149
150.umsa-acc-question { 151 display: flex;
152 align-items: center;
153 justify-content: space-between;
154 min-height: 44px;
155 padding: 12px 18px;
156 box-sizing: border-box;
157 background: #fff;
158 cursor: pointer;
159 user-select: none;
160 transition: background-color .25s ease;
161}
162.umsa-acc-question-text { 163 flex: 1;
164 padding-right: 14px;
165 color: var(--umsa-blue);
166 font-size: 14px;
167 font-weight: 700;
168 text-transform: uppercase;
169 line-height: 1.4;
170}
171.umsa-acc-question:focus { outline: none; } 172.umsa-acc-question:focus-visible { box-shadow: inset 0 0 0 2px rgba(192, 23, 29, .35); } 173
174/* Chevron rojo */
175.umsa-acc-chevron { 176 width: 8px;
177 height: 8px;
178 margin: -4px 4px 0 0;
179 border-right: 2px solid var(--umsa-red);
180 border-bottom: 2px solid var(--umsa-red);
181 transform: rotate(45deg);
182 transition: transform .3s ease, margin .3s ease;
183}
184
185/* ===== ABIERTO ===== */
186.umsa-acc-item.open { box-shadow: 0 5px 18px rgba(2, 73, 102, .10); } 187.umsa-acc-item.open > .umsa-acc-question { background: var(--umsa-blue-soft); } 188.umsa-acc-item.open > .umsa-acc-question .umsa-acc-chevron { 189 transform: rotate(-135deg);
190 margin: 4px 4px 0 0;
191}
192
193/* ===== RESPUESTA ===== */
194.umsa-acc-answer { 195 display: grid;
196 grid-template-rows: 0fr;
197 opacity: 0;
198 transition: grid-template-rows .35s ease, opacity .25s ease;
199}
200.umsa-acc-item.open > .umsa-acc-answer { 201 grid-template-rows: 1fr;
202 opacity: 1;
203}
204.umsa-acc-answer-content { 205 min-height: 0;
206 overflow: hidden;
207 padding: 0 16px;
208 color: var(--umsa-blue);
209 font-size: 12.5px;
210 line-height: 1.7;
211 text-align: justify;
212 transition: padding .35s ease;
213}
214.umsa-acc-item.open > .umsa-acc-answer > .umsa-acc-answer-content { 215 padding-top: 20px;
216 padding-bottom: 22px;
217}
218
219/* ===== SUBUNIDADES: tarjetas aparte, debajo de la unidad ===== */
220.umsa-acc-sublist { display: block; } 221
222.umsa-acc-nivel-2 { 223 margin-left: 40px;
224 border-radius: 10px;
225}
226.umsa-acc-nivel-2 > .umsa-acc-question { min-height: 40px; padding: 10px 16px; } 227.umsa-acc-nivel-2 > .umsa-acc-question .umsa-acc-question-text { font-size: 12.5px; } 228
229/* ===== ELEMENTOS INTERNOS ===== */
230.umsa-acc-answer-content h3 { 231 margin: 0 0 2px;
232 color: var(--umsa-blue);
233 font-size: 14px;
234 font-weight: 700;
235}
236.umsa-acc-answer-content h4 { 237 margin: 0 0 18px;
238 color: var(--umsa-red);
239 font-size: 11.5px;
240 font-weight: 700;
241 text-transform: uppercase;
242}
243.umsa-acc-answer-content h5 { 244 margin: 16px 0 6px;
245 color: var(--umsa-blue);
246 font-size: 12.5px;
247 font-weight: 700;
248 text-transform: uppercase;
249}
250.umsa-acc-answer-content p { margin: 0 0 10px; } 251.umsa-acc-answer-content strong { color: var(--umsa-blue); font-weight: 700; } 252
253.umsa-acc-answer-content ol,
254.umsa-acc-answer-content ul { margin: 6px 0 12px; padding-left: 20px; } 255.umsa-acc-answer-content li { margin-bottom: 6px; padding-left: 4px; } 256.umsa-acc-answer-content li::marker { color: var(--umsa-red); font-weight: 700; } 257
258/* Enlaces normales (mailto, tel) */
259.umsa-acc-answer-content a { 260 color: var(--umsa-blue);
261 font-weight: 600;
262 text-decoration: none;
263 transition: color .2s ease;
264}
265.umsa-acc-answer-content a:hover { color: var(--umsa-red); text-decoration: underline; } 266
267/* Botón automático "Visita el portal web" */
268.umsa-acc-answer-content a.umsa-btn { 269 display: inline-block;
270 margin: 8px 8px 4px 0;
271 padding: 9px 18px;
272 border: 1px solid var(--umsa-blue);
273 border-radius: 8px;
274 background: #fff;
275 color: var(--umsa-blue);
276 font-size: 12px;
277 font-weight: 700;
278 text-decoration: none;
279 transition: background-color .25s ease, color .25s ease, border-color .25s ease;
280}
281.umsa-acc-answer-content a.umsa-btn:hover { 282 background: var(--umsa-red);
283 border-color: var(--umsa-red);
284 color: #fff;
285 text-decoration: none;
286}
287
288/* ===== TABLET ===== */
289@media (max-width: 768px) { 290 .umsa-acc-container { margin: 25px auto; padding: 0 20px; } 291 .umsa-acc-title { font-size: 16px; } 292 .umsa-acc-question { padding: 11px 14px; } 293 .umsa-acc-question-text { font-size: 13px; } 294 .umsa-acc-nivel-2 { margin-left: 24px; } 295}
296
297/* ===== MÓVIL ===== */
298@media (max-width: 480px) { 299 .umsa-acc-container { padding: 0 12px; } 300 .umsa-acc-title { font-size: 14px; } 301 .umsa-acc-question-text { font-size: 12.5px; } 302 .umsa-acc-nivel-2 { margin-left: 12px; } 303 .umsa-acc-answer-content { font-size: 12px; text-align: left; } 304}
305</style>