FEED Validator

Sorry

This feed does not validate.

• line 1, column 0: Undefined root element: script [help]

  <script>
  

• line 32, column 0: XML parsing error: <unknown>:32:0: junk after document element [help]

  <style>
  

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendation.

• Feeds should not be served with the "text/html" media type [help]

Source: http://putumayo.gov.co

1. <script>
2. function showTab(tabName) {
3.    const tabs = document.querySelectorAll('.tab-content');
4.    const buttons = document.querySelectorAll('.tab');
5.  
6.    tabs.forEach(tab => tab.classList.remove('active'));
7.    buttons.forEach(btn => btn.classList.remove('active'));
8.  
9.    document.getElementById(`tab-${tabName}`).classList.add('active');
10.    event.target.classList.add('active');
11. }
12.  
13. document.addEventListener('click', (e) => {
14.  const btn = e.target.closest('.tabs--news .tab');
15.  if (!btn) return;
16.  
17.  const tabs = btn.parentElement.querySelectorAll('.tab');
18.  const panes = btn.closest('.news-tabs').querySelectorAll('.tab-pane');
19.  
20.  tabs.forEach(t => { t.classList.remove('is-active'); t.setAttribute('aria-selected','false'); });
21.  panes.forEach(p => { p.classList.remove('is-active'); p.hidden = true; });
22.  
23.  btn.classList.add('is-active');
24.  btn.setAttribute('aria-selected','true');
25.  
26.  const id = btn.dataset.target;
27.  const pane = document.getElementById(id);
28.  if (pane) { pane.classList.add('is-active'); pane.hidden = false; }
29. });
30. </script>
31.  
32. <style>
33. .full-width-section {
34.    width: 99.7vw;
35.    margin-left: calc(-50vw + 50%);
36.    overflow: hidden;
37.    position: relative;
38. }
39.  
40. .tramites-section {
41.    background-color: #164194;
42.    position: relative;
43.    overflow: hidden;
44. }
45.  
46. .tramites-section,
47. .tramites-section * {
48.    color: white !important;
49. }
50.  
51. .tramites-content {
52.    position: relative;
53.    z-index: 2;
54.    padding: 4rem 1rem 12rem; /* padding extra inferior para que la curva no tape nada */
55. }
56.  
57. .tabs {
58.    display: flex;
59.    justify-content: center;
60.    margin-bottom: 1.5rem;
61. }
62.  
63. .tab {
64.    font-weight: bold;
65.    font-size: 1.1rem;
66.    padding: 0.6rem 1.8rem;
67.    margin: 0 0.5rem;
68.    border-radius: 0 0 4px 4px;
69.    border: none;
70.    transition: all 0.3s ease;
71. }
72.  
73. .tab.active {
74.    background-color: white;
75.    color: #0c3c84 !important;
76.    border-bottom: 4px solid var(--govco-fourth-color);
77.    cursor: default;
78. }
79.  
80. .tab.inactive {
81.    background-color: transparent;
82.    color: white;
83.    border-bottom: 4px solid transparent;
84.    cursor: pointer;
85. }
86.  
87. .tab.inactive:hover {
88.    background-color: rgba(255, 255, 255, 0.1);
89.    border-bottom: 4px solid var(--govco-fourth-color);
90. }
91.  
92. .tramites-subtitle {
93.    font-size: 1.1rem;
94.    margin-bottom: 2.5rem;
95.    max-width: 800px;
96.    margin-left: auto;
97.    margin-right: auto;
98. }
99.  
100. .tramites-grid {
101.    display: flex;
102.    justify-content: center;
103.    flex-wrap: wrap;
104.    gap: 3rem 4rem;
105.    margin-bottom: 2rem;
106. }
107.  
108. .tramite-item {
109.    display: flex;
110.    flex-direction: column;
111.    align-items: center;
112.    text-align: center;
113.    text-decoration: none;
114.    color: white;
115.    max-width: 160px;
116.    transition: transform 0.3s ease, background-color 0.3s ease;
117. }
118.  
119. .tramite-item:hover {
120.    transform: translateY(-8px);
121. }
122.  
123. .tramite-icon {
124.    background-color: rgba(255, 255, 255, 0.15);
125.    border-radius: 50%;
126.    padding: 1.3rem;
127.    width: 100px;
128.    height: 100px;
129.    display: flex;
130.    align-items: center;
131.    justify-content: center;
132.    margin-bottom: 1rem;
133.    transition: background-color 0.3s ease, border 0.3s ease;
134.    border: 2px solid transparent;
135. }
136.  
137. .tramite-item:hover .tramite-icon {
138.    background-color: rgba(255, 255, 255, 0.3);
139.    border-color: var(--govco-fourth-color);
140. }
141.  
142. .tramite-icon img {
143.    width: 150px;
144.    height: auto;
145.    filter: brightness(0) invert(1);
146. }
147.  
148. .tramite-title {
149.    font-weight: bold;
150.    font-size: 0.95rem;
151.    white-space: pre-line;
152. }
153.  
154. .tramites-button {
155.    display: inline-block;
156.    padding: 0.6rem 1.5rem;
157.    border: 2px solid var(--govco-fourth-color);
158.    color: white;
159.    border-radius: 25px;
160.    text-decoration: none;
161.    font-weight: 600;
162.    transition: background 0.3s ease;
163.    margin-bottom: 4rem;
164. }
165.  
166. .tramites-button:hover {
167.    background-color: white;
168.    color: #0c3c84 !important;
169. }
170.  
171. .curve-background {
172.    position: absolute;
173.    bottom: 0;
174.    background-color: white !important;
175.    left: 0;
176.    width: 100%;
177.    height: 180px;
178.    background: url('/design/curve.svg') no-repeat bottom center;
179.    background-size: cover;
180.    pointer-events: none;
181.    z-index: 1;
182. }
183.  
184. .tab-content {
185.    display: none;
186. }
187.  
188. .tab-content.active {
189.    display: flex;
190. }
191.  
192. .news-tabs { margin: 2rem auto; }
193. .tabs--news {
194.  display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem;
195. }
196. .tabs--news .tab{
197.  border: 1px solid var(--govco-secondary-color);
198.  background: var(--govco-white-color);
199.  color: var(--govco-secondary-color);
200.  padding: .55rem 1rem;
201.  border-radius: var(--govco-border-radius);
202.  font-weight: 700; cursor: pointer;
203.  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
204. }
205. .tabs--news .tab.is-active{
206.  background: var(--govco-secondary-color);
207.  color: var(--govco-white-color);
208.  box-shadow: var(--govco-box-shadow);
209. }
210. .tab-pane { display: block; }
211. .tab-pane:not(.is-active) { display: none; }
212.  
213. @media (max-width: 992px) {
214.    .full-width-section {
215.        width: 100%;
216.        margin-left: 0;
217.    }
218.  
219.    .tramites-content {
220.        padding: 3rem 1rem 10rem;/
221.    }
222.  
223.    .tramites-grid {
224.        gap: 2rem 1.5rem;/
225.    }
226.  
227.    .tramite-item {
228.        max-width: 100px;
229.    }
230.    .tramite-icon {
231.        width: 80px;
232.        height: 80px;
233.        padding: 1rem;
234.    }
235.    .tramite-icon img {
236.        width: 100px;
237.    }
238.    .tramite-title {
239.        font-size: 0.85rem;
240.    }
241.  
242.    .curve-background {
243.        height: 100px;
244.    }
245.  
246.    .tab {
247.        font-size: 0.9rem;
248.        padding: 0.5rem 0.8rem;
249.    }
250.    
251.    .tabs--news .tab {
252.        font-size: 0.9rem;
253.        padding: .45rem .8rem;
254.    }
255. }
256.  
257. @media (max-width: 576px) {
258.    .tramites-content {
259.        padding: 2rem 0.5rem 8rem;
260.    }
261.    .tramites-grid {
262.        gap: 1.5rem 1rem;
263.    }
264.    .tramite-item {
265.        max-width: 80px;
266.    }
267.    .tramite-icon {
268.        width: 65px;
269.        height: 65px;
270.        padding: 0.8rem;
271.    }
272.    .tramite-icon img {
273.        width: 80px;
274.    }
275.    .tramite-title {
276.        font-size: 0.8rem;
277.    }
278.    .curve-background {
279.        height: 80px;
280.    }
281.  
282.    /* Forzar tabs a apilarse si es necesario */
283.    .tabs {
284.        flex-wrap: wrap;
285.        gap: 0.5rem;
286.    }
287.    .tab {
288.        margin: 0;
289.    }
290. }
291. </style>
292. <!DOCTYPE html>
293. <html lang="es">
294.    <head>
295.        <meta charset="utf-8">
296.        <meta name="viewport" content="width=device-width, initial-scale=1">
297.        <meta name="csrf-token" content="SN2FZw2HSP2auqpdKrgjpLK2HkiwdXE4Zt29Ka6n">
298.  
299.        <title>Gobernación del Putumayo</title>
300.        <link rel="icon" href="http://putumayo.gov.co/icon/putumayo.ico" type="image/x-icon">
301.  
302.        <link rel="stylesheet" href="http://putumayo.gov.co/css/global.css">
303.  
304.        <!-- Fonts -->
305.        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
306.        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
307.        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">
308.        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.css">
309.        <script src="http://putumayo.gov.co/vendor/tinymce/tinymce.min.js"></script>
310.        <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
311.        
312.        <!-- Styles -->
313.        <!-- Livewire Styles -->
314. <style >
315.    [wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {
316.        display: none;
317.    }
318.  
319.    [wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {
320.        display:none;
321.    }
322.  
323.    [wire\:offline] {
324.        display: none;
325.    }
326.  
327.    [wire\:dirty]:not(textarea):not(input):not(select) {
328.        display: none;
329.    }
330.  
331.    input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
332.        animation-duration: 50000s;
333.        animation-name: livewireautofill;
334.    }
335.  
336.    @keyframes livewireautofill { from {} }
337. </style>
338.  
339.        <!-- Scripts -->
340.        <script src="http://putumayo.gov.co/js/app.js" defer></script>
341.        <script src="http://putumayo.gov.co/js/api.js" defer></script>
342.    </head>
343.    <body class="public-layout" x-data="{ loading: true }"
344.    x-init="window.addEventListener('load', () => loading = false)">
345.        <div class="loading-backdrop" x-show="loading" x-cloak>
346.    <div class="loading-spinner-container">
347.        <div class="spinner"></div>
348.        <p class="loading-text">Cargando...</p>
349.    </div>
350. </div>
351.  
352. <style>
353. .loading-backdrop {
354.    position: fixed;
355.    top: 0;
356.    left: 0;
357.    z-index: 9999;
358.    width: 100vw;
359.    height: 100vh;
360.    background-color: rgba(255, 255, 255, 0.8);
361.    backdrop-filter: blur(4px);
362.    display: flex;
363.    justify-content: center;
364.    align-items: center;
365. }
366.  
367. .loading-spinner-container {
368.    display: flex;
369.    flex-direction: column;
370.    align-items: center;
371. }
372.  
373. .spinner {
374.    border: 6px solid #e0e0e0;
375.    border-top: 6px solid #004884;
376.    border-radius: 50%;
377.    width: 60px;
378.    height: 60px;
379.    animation: spin 1s linear infinite;
380.    margin-bottom: 1rem;
381. }
382.  
383. @keyframes  spin {
384.    0% { transform: rotate(0deg); }
385.    100% { transform: rotate(360deg); }
386. }
387.  
388. .loading-text {
389.    color: #004884;
390.    font-size: 1.1rem;
391.    font-weight: bold;
392. }
393. </style>        <script>
394.    const defaultFontSize = 16;
395.    let currentFontSize = defaultFontSize;
396.    const contrastClass = 'high-contrast';
397.  
398.    function increaseFontSize() {
399.        currentFontSize += 2;
400.        document.documentElement.style.fontSize = currentFontSize + 'px';
401.    }
402.  
403.    function decreaseFontSize() {
404.        currentFontSize = Math.max(12, currentFontSize - 2);
405.        document.documentElement.style.fontSize = currentFontSize + 'px';
406.    }
407.  
408.    function toggleContrast() {
409.        document.body.classList.toggle(contrastClass);
410.    }
411. </script>
412.  
413. <div class="accessibility-bar">
414.    <div class="btns btn__fontMax">
415.        <button class="btn-accessibility" onclick="increaseFontSize()">
416.            <img src="http://putumayo.gov.co/icons/font-maximize.svg" alt="Aumentar fuente" class="icon">
417.            <span class="text">Aumentar fuente</span>
418.        </button>
419.    </div>
420.  
421.    <div class="btns btn__fontMin">
422.        <button class="btn-accessibility" onclick="decreaseFontSize()">
423.            <img src="http://putumayo.gov.co/icons/font-minimize.svg" alt="Disminuir fuente" class="icon">
424.            <span class="text">Disminuir fuente</span>
425.        </button>
426.    </div>
427.    
428.    <div class="btns btn__access">
429.        <button class="btn-accessibility" onclick="toggleContrast()">
430.            <img src="http://putumayo.gov.co/icons/adjust.svg" alt="Contraste" class="icon">
431.            <span class="text">Contraste</span>
432.        </button>
433.    </div>
434. </div>
435.  
436. <style>
437. /* Contenedor principal */
438. .accessibility-bar {
439.    position: fixed;
440.    top: 50%;
441.    right: 0;
442.    transform: translateY(-50%);
443.    display: flex;
444.    flex-direction: column;
445.    gap: 10px;
446.    background-color: var(--govco-secondary-color);
447.    padding: 10px;
448.    border-top-left-radius: 8px;
449.    border-bottom-left-radius: 8px;
450.    z-index: 9999;
451. }
452.  
453. .btns {
454.    position: relative;
455. }
456.  
457. .btn-accessibility {
458.    position: relative;
459.    display: flex;
460.    align-items: center;
461.    justify-content: center;
462.    width: 30px; /* Ancho fijo */
463.    height: 30px;
464.    background-color: var(--govco-white-color);
465.    color: var(--govco-secondary-color);
466.    border: none;
467.    border-radius: 8px;
468.    padding: 8px;
469.    cursor: pointer;
470.    transition: background-color 0.3s ease, color 0.3s ease;
471. }
472.  
473. .btn-accessibility:hover {
474.    background-color: var(--govco-primary-color);
475.    color: var(--govco-white-color);
476. }
477.  
478. .btn-accessibility:hover .icon {
479.    filter: brightness(0) invert(1); /* Icono blanco */
480. }
481.  
482. .icon {
483.    width: 16px;
484.    height: 16px;
485.    transition: transform 0.3s ease;
486. }
487.  
488. .text {
489.    position: absolute;
490.    right: calc(100% + 10px); /* Ubica el texto a la izquierda del botón */
491.    top: 50%;
492.    transform: translateY(-50%);
493.    opacity: 0;
494.    visibility: hidden;
495.    white-space: nowrap;
496.    background-color: var(--govco-primary-color);
497.    color: #fff;
498.    border-radius: 5px;
499.    font-size: 0.8rem;
500.    font-family: var(--govco-font-primary);
501.    padding: 5px 10px;
502.    transition: opacity 0.3s ease, visibility 0.3s ease;
503. }
504.  
505. .btn-accessibility:hover .text {
506.    opacity: 1;
507.    visibility: visible;
508. }
509. </style>        <div x-data="{&quot;show&quot;:true,&quot;style&quot;:&quot;success&quot;,&quot;message&quot;:null}"
510.            :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger', 'bg-gray-500': style != 'success' && style != 'danger' }"
511.            style="display: none;"
512.            x-show="show && message"
513.            x-init="
514.                document.addEventListener('banner-message', event => {
515.                    style = event.detail.style;
516.                    message = event.detail.message;
517.                    show = true;
518.                });
519.            ">
520.    <div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
521.        <div class="flex items-center justify-between flex-wrap">
522.            <div class="w-0 flex-1 flex items-center min-w-0">
523.                <span class="flex p-2 rounded-lg" :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger' }">
524.                    <svg x-show="style == 'success'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
525.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
526.                    </svg>
527.                    <svg x-show="style == 'danger'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
528.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
529.                    </svg>
530.                    <svg x-show="style != 'success' && style != 'danger'" class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
531.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
532.                    </svg>
533.                </span>
534.  
535.                <p class="ml-3 font-medium text-sm text-white truncate" x-text="message"></p>
536.            </div>
537.  
538.            <div class="shrink-0 sm:ml-3">
539.                <button
540.                    type="button"
541.                    class="-mr-1 flex p-2 rounded-md focus:outline-none sm:-mr-2 transition"
542.                    :class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger' }"
543.                    aria-label="Dismiss"
544.                    x-on:click="show = false">
545.                    <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
546.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
547.                    </svg>
548.                </button>
549.            </div>
550.        </div>
551.    </div>
552. </div>
553.  
554.                    <header class="navbar-container">
555.    <div class="navbar-top">
556.        <div class="govco-logo">
557.            <a href="https://www.gov.co" target="_blank">
558.                <img src="/logos/logo_govco.png" alt="Logo GOV.CO">
559.            </a>
560.        </div>
561.        <div class="actions">
562.            <a href="https://historico.ticputumayo.gov.co" target="_blank" rel="noopener noreferrer" class="portal-historico__btn">
563.                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="#004085" d="M15 12.5v4l3 2l.75-1.25l-2.25-1.5V12.5zm7-.11V12c0-5.5-4.5-10-10-10C6.47 2 2 6.5 2 12s4.5 10 10 10c.13 0 .24 0 .37-.03c1.06.65 2.3 1.03 3.63 1.03c3.86 0 7-3.14 7-7c0-1.32-.38-2.56-1-3.61m-2.24-2.28l-.17-.11h.15c.01.03.01.07.02.11M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M9.66 10h2.75a7 7 0 0 0-2.84 3.24c-.04-.41-.07-.82-.07-1.24c0-.68.06-1.35.16-2M9.4 4.44C8.8 5.55 8.35 6.75 8 8H5.08A7.92 7.92 0 0 1 9.4 4.44M4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2zm.82 2H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16M16 21c-2.76 0-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5s-2.24 5-5 5"/></svg>
564.                <span>Portal Histórico</span>
565.            </a>
566.            <button id="lang-toggle" class="lang-btn" onclick="toggleLanguage()">
567.                EN
568.            </button>
569.        </div>
570.    </div>
571.  
572.    <nav class="navbar">
573.                <div class="logo entidad-logo">
574.            <a href="http://putumayo.gov.co" class="logo-link">
575.                <img src="http://putumayo.gov.co/img/settings/gobernacion.png
576. " alt="Gobernación del Putumayo" class="logo-img">
577.                <div class="entidad-nombre">
578.                    <span class="entidad-linea-1">GOBERNACIóN DEL</span>
579.                    <span class="entidad-linea-2">PUTUMAYO</span>
580.                </div>
581.            </a>
582.        </div>
583.        <div class="search__login">
584.            <div class="search-bar">
585.                <input type="text" placeholder="Buscar...">
586.                <button type="submit">
587.                    <img src="/icons/search.svg" alt="Buscar..." width="16" height="16">
588.                </button>
589.            </div>
590.            <div class="navbar__login">
591.                <a href="http://putumayo.gov.co/login" class="login__btn">Iniciar Sesión</a>
592.            </div>
593.        </div>
594.    </nav>
595.  
596.    <div class="navbar-bottom">
597.        <div class="nav-links">
598.                            <div class="menu-item selected">
599.                    <a href="http://putumayo.gov.co">Inicio</a>
600.  
601.                                    </div>
602.                            <div class="menu-item ">
603.                    <a href="#">Gobernación</a>
604.  
605.                                            <div class="submenu">
606.                                                            <div class="submenu-item ">
607.                                    <a href="http://putumayo.gov.co/cabinet/Gobernador">Gobernador</a>
608.  
609.                                                                    </div>
610.                                                            <div class="submenu-item ">
611.                                    <a href="http://putumayo.gov.co/institutional/contents">La Entidad</a>
612.  
613.                                                                            <div class="subsubmenu">
614.                                                                                            <a href="#">Sedes</a>
615.                                                                                            <a href="#">Planeación Estratégica</a>
616.                                                                                            <a href="http://putumayo.gov.co/organigrama">Estructura Organizacional</a>
617.                                                                                    </div>
618.                                                                    </div>
619.                                                            <div class="submenu-item ">
620.                                    <a href="#">Gabinete Departamental</a>
621.  
622.                                                                            <div class="subsubmenu">
623.                                                                                            <a href="http://putumayo.gov.co/cabinet/Asesores de Despacho">Asesores de Despacho</a>
624.                                                                                            <a href="http://putumayo.gov.co/cabinet/Secretario%20de%20Despacho">Secretarios Departamentales</a>
625.                                                                                            <a href="http://putumayo.gov.co/cabinet/Jefe%20de%20Oficina">Jefes de Oficina</a>
626.                                                                                    </div>
627.                                                                    </div>
628.                                                            <div class="submenu-item ">
629.                                    <a href="http://putumayo.gov.co/document-retention-table">Tablas de Retención Documental</a>
630.  
631.                                                                    </div>
632.                                                            <div class="submenu-item ">
633.                                    <a href="http://putumayo.gov.co/cabinet/Asamblea%20Departamental">Asamblea Departamental</a>
634.  
635.                                                                    </div>
636.                                                            <div class="submenu-item ">
637.                                    <a href="#">Entidades Descentralizadas</a>
638.  
639.                                                                            <div class="subsubmenu">
640.                                                                                            <a href="https://inderculturaputumayo.gov.co/">Indercultura</a>
641.                                                                                            <a href="https://itp.edu.co/ITP2022/">Instituto Tecnológico del Putumayo</a>
642.                                                                                            <a href="http://www.esehospitalmocoa.gov.co/">E.S.E Hospital José María Hernández</a>
643.                                                                                            <a href="https://www.esehospitallocal.gov.co/">E.S.E Hospital local Puerto Asís</a>
644.                                                                                            <a href="https://www.esehoma.gov.co/">E.S.E Hospital María Angelines</a>
645.                                                                                            <a href="http://www.esehospitalfronterizoladorada-sanmiguel-putumayo.gov.co/">E.S.E Hospital Fronterizo La Dorada</a>
646.                                                                                            <a href="https://esehospitalalcidesjimenez.online/">E.S.E Hospital Alcides Jiménez</a>
647.                                                                                            <a href="https://esehospitalorito.gov.co/">E.S.E. Hospital de Orito</a>
648.                                                                                            <a href="https://www.esejorgejulioguzman.gov.co/">E.S.E Hospital Jorge Julio Guzmán</a>
649.                                                                                            <a href="http://www.esehospitalvillagarzon.gov.co/">E.S.E Hospital San Gabriel Arcángel</a>
650.                                                                                            <a href="https://hospitalhormiga.gov.co/">E.S.E Hospital Sagrado Corazón de Jesús</a>
651.                                                                                    </div>
652.                                                                    </div>
653.                                                            <div class="submenu-item ">
654.                                    <a href="#">Secretarías y Oficinas</a>
655.  
656.                                                                            <div class="subsubmenu">
657.                                                                                            <a href="http://putumayo.gov.co/microsite-treasury">Hacienda</a>
658.                                                                                            <a href="http://putumayo.gov.co/goverment-calls">Gobierno</a>
659.                                                                                            <a href="http://putumayo.gov.co/secop">Servicios administrativos</a>
660.                                                                                            <a href="http://putumayo.gov.co/infraestructure">Infraestructura</a>
661.                                                                                            <a href="http://putumayo.gov.co/competitiveness">Competitividad </a>
662.                                                                                            <a href="http://putumayo.gov.co/planning">Planeación </a>
663.                                                                                            <a href="http://putumayo.gov.co/social">Desarrollo Social  </a>
664.                                                                                            <a href="http://putumayo.gov.co/agriculture">Agricultura</a>
665.                                                                                            <a href="https://www.saludputumayo.gov.co/">Salud</a>
666.                                                                                            <a href="https://www.sedputumayo.gov.co/">Educación</a>
667.                                                                                    </div>
668.                                                                    </div>
669.                                                            <div class="submenu-item ">
670.                                    <a href="http://putumayo.gov.co/sig">Sistema Integrado de Gestión</a>
671.  
672.                                                                    </div>
673.                                                    </div>
674.                                    </div>
675.                            <div class="menu-item ">
676.                    <a href="http://putumayo.gov.co/transparencia">Transparencia y acceso información pública</a>
677.  
678.                                    </div>
679.                            <div class="menu-item ">
680.                    <a href="#">Atención y Servicios a la ciudadanía</a>
681.  
682.                                            <div class="submenu">
683.                                                            <div class="submenu-item ">
684.                                    <a href="http://putumayo.gov.co/judicial-notices">Notificaciones, Autos y Edictos</a>
685.  
686.                                                                    </div>
687.                                                            <div class="submenu-item ">
688.                                    <a href="http://putumayo.gov.co/entity-services">Trámites y Servicios</a>
689.  
690.                                                                    </div>
691.                                                            <div class="submenu-item ">
692.                                    <a href="http://putumayo.gov.co/pqrds-reports">Informes PQRD</a>
693.  
694.                                                                    </div>
695.                                                            <div class="submenu-item ">
696.                                    <a href="http://putumayo.gov.co/user-satisfaction-reports">Informe de Satisfacción de Usuario</a>
697.  
698.                                                                    </div>
699.                                                            <div class="submenu-item ">
700.                                    <a href="https://pqrds.putumayo.gov.co">PQRSD</a>
701.  
702.                                                                    </div>
703.                                                            <div class="submenu-item ">
704.                                    <a href="http://putumayo.gov.co/calendar">Agendar Cita</a>
705.  
706.                                                                    </div>
707.                                                            <div class="submenu-item ">
708.                                    <a href="http://putumayo.gov.co/data-protection">Política de Protección de Datos</a>
709.  
710.                                                                    </div>
711.                                                            <div class="submenu-item ">
712.                                    <a href="http://putumayo.gov.co/site-map">Mapa del Sitio</a>
713.  
714.                                                                    </div>
715.                                                    </div>
716.                                    </div>
717.                            <div class="menu-item ">
718.                    <a href="http://putumayo.gov.co/participate">Participa</a>
719.  
720.                                    </div>
721.                            <div class="menu-item ">
722.                    <a href="http://putumayo.gov.co/news">Noticias</a>
723.  
724.                                            <div class="submenu">
725.                                                            <div class="submenu-item ">
726.                                    <a href="http://putumayo.gov.co/publications/all">Últimas Noticias</a>
727.  
728.                                                                    </div>
729.                                                            <div class="submenu-item ">
730.                                    <a href="http://putumayo.gov.co/news-calls">Convocatorias</a>
731.  
732.                                                                    </div>
733.                                                    </div>
734.                                    </div>
735.                            <div class="menu-item ">
736.                    <a href="#">Contacto</a>
737.  
738.                                            <div class="submenu">
739.                                                            <div class="submenu-item ">
740.                                    <a href="http://putumayo.gov.co/directory">Teléfonos</a>
741.  
742.                                                                    </div>
743.                                                            <div class="submenu-item ">
744.                                    <a href="http://putumayo.gov.co/directory">Correos Electrónicos</a>
745.  
746.                                                                    </div>
747.                                                            <div class="submenu-item ">
748.                                    <a href="http://putumayo.gov.co/headquarters">Ubicación de Sedes</a>
749.  
750.                                                                    </div>
751.                                                    </div>
752.                                    </div>
753.                    </div>
754.    </div>
755. </header>
756.  
757. <script>
758. document.addEventListener('DOMContentLoaded', function() {
759.    const menuItems = document.querySelectorAll('.navbar-bottom .menu-item, .navbar-bottom .submenu-item');
760.  
761.    menuItems.forEach(item => {
762.        const link = item.querySelector(':scope > a');
763.        const submenu = item.querySelector(':scope > .submenu, :scope > .subsubmenu');
764.  
765.        if (link && submenu) {
766.            link.addEventListener('click', function(event) {
767.                event.preventDefault();
768.                
769.                const parent = item.parentElement;
770.                parent.querySelectorAll(':scope > .is-open').forEach(openItem => {
771.                    if (openItem !== item) {
772.                        openItem.classList.remove('is-open');
773.                    }
774.                });
775.  
776.                item.classList.toggle('is-open');
777.            });
778.        }
779.    });
780.  
781.    document.addEventListener('click', function(event) {
782.        if (!event.target.closest('.navbar-bottom')) {
783.            document.querySelectorAll('.navbar-bottom .is-open').forEach(item => {
784.                item.classList.remove('is-open');
785.            });
786.        }
787.    });
788. });
789. </script>
790.  
791. <style scoped>
792. .navbar-container {
793.    top: 0;
794.    width: 100%;
795.    z-index: 1000;
796.    background-color: var(--govco-secondary-color);
797.    height: auto;
798. }
799.  
800. .navbar-top {
801.    background-color: var(--govco-secondary-color);
802.    color: var(--govco-white-color);
803.    display: flex;
804.    justify-content: space-between;
805.    align-items: center;
806.    padding: 0.5rem 2rem;
807.    font-family: var(--govco-font-primary);
808. }
809.  
810. .navbar-top .govco-logo {
811.    display: flex;
812.    align-items: center;
813. }
814.  
815. .navbar-top .govco-logo img {
816.    max-height: 30px;
817.    margin-right: 1rem;
818. }
819.  
820. .navbar-top .lang-btn {
821.    color: var(--govco-white-color);
822.    background-color: transparent;
823.    border: none;
824.    font-size: 0.9rem;
825.    cursor: pointer;
826.    transition: color 0.3s ease;
827. }
828.  
829. .navbar-top .lang-btn:hover {
830.    color: var(--govco-secondary-color);
831.    background-color: var(--govco-white-color);
832. }
833.  
834. .navbar {
835.    display: flex;
836.    justify-content: space-between;
837.    align-items: center;
838.    padding: 1rem 2rem;
839.    background-color: var(--govco-white-color);
840.    border-bottom: 2px solid var(--govco-gray-color);
841.    font-family: var(--govco-font-family);
842. }
843.  
844. .logo {
845.    flex: 1;
846. }
847.  
848. .search__login {
849.    display: flex;
850.    align-items: center;
851.    gap: 1rem;
852.    flex: 1;
853.    justify-content: flex-end;
854. }
855.  
856. .search-bar {
857.    display: flex;
858.    align-items: center;
859.    border: 1px solid var(--govco-gray-color);
860.    border-radius: 4px;
861.    padding: 0.3rem 0.5rem;
862. }
863.  
864. .search-bar input {
865.    border: none;
866.    outline: none;
867.    font-size: 0.9rem;
868.    padding: 0.3rem;
869. }
870.  
871. .search-bar button {
872.    background-color: transparent;
873.    border: none;
874.    color: var(--govco-primary-color);
875.    cursor: pointer;
876. }
877.  
878. .search-bar button:hover {
879.    color: var(--govco-highlight-color);
880. }
881.  
882. .navbar__login {
883.    display: flex;
884.    align-items: center;
885.    justify-content: flex-end;
886. }
887.  
888. .login__btn {
889.    color: var(--govco-white-color);
890.    text-decoration: none;
891.    font-size: 0.9rem;
892.    background-color: var(--govco-secondary-color);
893.    border: none;
894.    padding: 0.5rem 1rem;
895.    border-radius: 4px;
896.    transition: background-color 0.3s ease;
897. }
898.  
899. .login__btn:hover {
900.    background-color: var(--govco-primary-color);
901.    color: var(--govco-white-color);
902. }
903.  
904. .navbar .logo img {
905.    max-width: 200px;
906.    height: auto;
907. }
908.  
909. .btn__login {
910.    background-color: var(--govco-secondary-color);
911.    color: var(--govco-white-color);
912. }
913.  
914. .login-btn {
915.    color: var(--govco-primary-color);
916.    text-decoration: none;
917.    font-size: 0.9rem;
918. }
919.  
920. .portal-historico__btn {
921.    display: inline-flex;
922.    align-items: center;
923.    padding: 8px 16px;
924.    color: var(--govco-white-color);
925.    background-color: var(--govco-white-color);
926.    text-decoration: none;
927.    border-radius: 4px;
928.    font-weight: bold;
929.    white-space: nowrap;
930. }
931.  
932. .portal-historico__btn:hover {
933.    color: var(--govco-secondary-color);
934.    background-color: var(--govco-gray-menu);
935. }
936.  
937. .navbar-bottom {
938.    background-color: var(--govco-gray-menu);
939.    padding: 0 2rem;
940.    font-family: var(--govco-font-primary);
941. }
942.  
943. .nav-links {
944.    display: flex;
945.    justify-content: center;
946.    gap: 1rem;
947. }
948.  
949. .menu-item {
950.    position: relative;
951.    display: flex;
952.    align-items: center;
953.    height: 100%;
954.    padding: 0 1rem;
955.    transition: background-color 0.3s ease;
956. }
957.  
958. .menu-item > a {
959.    color: #000;
960.    text-decoration: none;
961.    font-weight: 500;
962.    font-family: var(--govco-font-primary);
963.    font-size: 0.8rem;
964.    padding: 1rem 0;
965.    display: flex;
966.    align-items: center;
967.    justify-content: center;
968.    height: 100%;
969.    width: 100%;
970.    transition: background-color 0.3s ease, color 0.3s ease;
971. }
972.  
973. .menu-item:has(.submenu) > a::after,
974. .submenu-item:has(.subsubmenu) > a::after {
975.    content: ' ▼';
976.    font-size: 0.6em;
977.    margin-left: 6px;
978.    display: inline-block;
979.    transition: transform 0.2s ease;
980. }
981.  
982. .menu-item.is-open > a::after,
983. .submenu-item.is-open > a::after {
984.    transform: rotate(180deg);
985. }
986.  
987. .menu-item:hover {
988.    background-color: var(--govco-secondary-color);
989. }
990.  
991. .menu-item:hover > a {
992.    color: var(--govco-white-color);
993. }
994.  
995. .submenu {
996.    display: none;
997.    position: absolute;
998.    top: 100%;
999.    left: 0;
1000.    background-color: var(--govco-gray-menu);
1001.    border: 1px solid var(--govco-border-color);
1002.    border-radius: var(--govco-border-radius);
1003.    padding: 0.5rem 0;
1004.    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1005.    z-index: 10;
1006.    min-width: 200px; /* Asegura un ancho mínimo */
1007. }
1008.  
1009. .submenu a {
1010.    display: block;
1011.    padding: 0.5rem 1rem;
1012.    background-color: var(--govco-gray-menu);
1013.    font-family: var(--govco-font-primary, sans-serif);
1014.    text-decoration: none;
1015.    font-size: 0.9rem;
1016.    transition: background-color 0.3s ease, color 0.3s ease;
1017.    color: #000;
1018. }
1019.  
1020. .submenu a:hover {
1021.    background-color: var(--govco-secondary-color);
1022.    color: var(--govco-white-color);
1023.    padding: 0.5rem 1rem;
1024. }
1025.  
1026. .subsubmenu {
1027.    display: none;
1028.    position: absolute;
1029.    top: 0;
1030.    left: 100%;
1031.    width: 225px;
1032.    background-color: var(--govco-gray-menu);
1033.    border: 1px solid var(--govco-border-color);
1034.    border-radius: var(--govco-border-radius);
1035.    padding: 0.5rem 0;
1036.    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1037.    z-index: 20;
1038. }
1039.  
1040. .submenu-item {
1041.    position: relative;
1042. }
1043.  
1044. .subsubmenu a {
1045.    display: block;
1046.    padding: 0.5rem 1rem;
1047.    background-color: var(--govco-gray-menu);
1048.    text-decoration: none;
1049.    font-size: 0.9rem;
1050.    transition: background-color 0.3s ease, color 0.3s ease;
1051.    color: #000;
1052. }
1053.  
1054. .subsubmenu a:hover {
1055.    background-color: var(--govco-secondary-color);
1056.    color: var(--govco-white-color);
1057. }
1058.  
1059. .submenu-item.active, .submenu-item:hover {
1060.    background-color: var(--govco-secondary-color);
1061.    color: var(--govco-white-color);
1062. }
1063.  
1064. .submenu-item:hover > a {
1065.    color: var(--govco-white-color);
1066. }
1067.  
1068. .menu-item.is-open .submenu {
1069.    display: block;
1070. }
1071. .submenu-item.is-open .subsubmenu {
1072.    display: block;
1073. }
1074.  
1075.  
1076. .menu-item.selected {
1077.    border: 2px solid var(--govco-success-color);
1078.    border-radius: 4px;
1079.    box-sizing: border-box;
1080. }
1081.  
1082. /* ... (Estilos de alto contraste) ... */
1083. body.high-contrast .navbar-container { background-color: #000; }
1084. body.high-contrast .navbar-top { background-color: #000; color: #fff; }
1085. body.high-contrast .navbar-top .govco-logo img { filter: invert(1); }
1086. body.high-contrast .navbar-top .lang-btn { color: #fff; background-color: #000; }
1087. body.high-contrast .navbar-top .lang-btn:hover { background-color: #333; }
1088. body.high-contrast .navbar { background-color: #000; color: #fff; }
1089. body.high-contrast .navbar a { color: #0ff; }
1090. body.high-contrast .navbar a:hover { color: #fff; }
1091. body.high-contrast .search-bar { border-color: #fff; }
1092. body.high-contrast .search-bar input { background-color: #000; color: #fff; }
1093. body.high-contrast .search-bar button { color: #fff; }
1094. body.high-contrast .search-bar button:hover { color: #0ff; }
1095. body.high-contrast .login__btn { background-color: #fff; color: #000; }
1096. body.high-contrast .login__btn:hover { background-color: #333; color: #fff; }
1097. body.high-contrast .navbar-bottom { background-color: #000; }
1098. body.high-contrast .menu-item > a { color: #fff; }
1099. body.high-contrast .menu-item:hover { background-color: #333; }
1100. body.high-contrast .menu-item:hover > a { color: #fff; }
1101. body.high-contrast .submenu { background-color: #000; border-color: #fff; }
1102. body.high-contrast .submenu a { color: #fff; }
1103. body.high-contrast .submenu a:hover { background-color: #333; }
1104. body.high-contrast .footer { background-color: #000; color: #fff; }
1105. body.high-contrast .footer a { color: #0ff; }
1106. body.high-contrast .footer a:hover { color: #fff; }
1107.  
1108. .logo.entidad-logo {
1109.    display: flex;
1110.    align-items: center;
1111.    gap: 12px;
1112. }
1113.  
1114. .logo-link {
1115.    display: flex;
1116.    align-items: center;
1117.    text-decoration: none;
1118. }
1119.  
1120. .logo-img {
1121.    height: 50px;
1122.    max-height: 50px;
1123.    object-fit: contain;
1124. }
1125.  
1126. .entidad-nombre {
1127.    display: flex;
1128.    flex-direction: column;
1129.    line-height: 1.1;
1130.    margin-left: 8px;
1131. }
1132.  
1133. .entidad-linea-1 {
1134.    font-size: 14px;
1135.    font-weight: 600;
1136.    text-transform: uppercase;
1137.    color: #212529;
1138.    letter-spacing: 0.02em;
1139. }
1140.  
1141. .entidad-linea-2 {
1142.    font-size: 20px;
1143.    font-weight: 800;
1144.    text-transform: uppercase;
1145.    color: #212529;
1146.    letter-spacing: 0.2em;
1147. }
1148.  
1149.  
1150. @media (max-width: 992px) {
1151.    .navbar-top {
1152.        flex-direction: column;
1153.        align-items: flex-start;
1154.        gap: 0.5rem;
1155.        padding: 0.5rem 1rem;
1156.    }
1157.  
1158.    .actions {
1159.        display: flex;
1160.        flex-direction: column;
1161.        width: 100%;
1162.        gap: 0.5rem;
1163.    }
1164.  
1165.    .portal-historico__btn {
1166.        width: 100%;
1167.        justify-content: center;
1168.    }
1169.  
1170.    .navbar-top .lang-btn {
1171.        width: 100%;
1172.        text-align: left;
1173.        padding: 8px 16px;
1174.    }
1175.  
1176.    .navbar {
1177.        flex-direction: column;
1178.        align-items: flex-start;
1179.        gap: 1rem;
1180.        padding: 1rem;
1181.    }
1182.  
1183.    .search__login {
1184.        flex-direction: column;
1185.        width: 100%;
1186.        gap: 0.5rem;
1187.        align-items: stretch;
1188.    }
1189.  
1190.    .search-bar {
1191.        width: 100%;
1192.        box-sizing: border-box;
1193.    }
1194.    
1195.    .search-bar input {
1196.        flex-grow: 1;
1197.    }
1198.  
1199.    .navbar__login {
1200.        width: 100%;
1201.    }
1202.  
1203.    .login__btn {
1204.        width: 100%;
1205.        text-align: center;
1206.        box-sizing: border-box;
1207.    }
1208.  
1209.    .navbar-bottom {
1210.        padding: 0.5rem 1rem;
1211.    }
1212.  
1213.    .nav-links {
1214.        flex-direction: column;
1215.        justify-content: flex-start;
1216.        gap: 0;
1217.        align-items: stretch;
1218.    }
1219.  
1220.    .menu-item {
1221.        padding: 0;
1222.        width: 100%;
1223.    }
1224.    
1225.    .menu-item > a {
1226.        font-size: 0.9rem;
1227.        padding: 0.8rem 1rem;
1228.        justify-content: space-between;
1229.    }
1230.  
1231.    .submenu {
1232.        position: static;
1233.        box-shadow: none;
1234.        border: none;
1235.        background-color: rgba(0,0,0,0.05);
1236.        padding: 0.5rem 0;
1237.        border-radius: 0;
1238.        min-width: 100%;
1239.    }
1240.  
1241.    .submenu a {
1242.        padding-left: 2rem;
1243.    }
1244.    
1245.    .subsubmenu {
1246.        position: static;
1247.        box-shadow: none;
1248.        border: none;
1249.        background-color: rgba(0,0,0,0.1);
1250.        width: 100%;
1251.        padding: 0.5rem 0;
1252.    }
1253.    
1254.    .subsubmenu a {
1255.         padding-left: 3rem;
1256.    }
1257. }
1258.  
1259. @media (max-width: 768px) {
1260.    .subsubmenu {
1261.        width: 100%;
1262.    }
1263.  
1264.    .entidad-linea-2 {
1265.        font-size: 16px;
1266.        letter-spacing: 0.2em;
1267.    }
1268.  
1269.    .entidad-linea-1 {
1270.        font-size: 12px;
1271.    }
1272.  
1273.    .logo-img {
1274.        height: 40px;
1275.    }
1276. }
1277. </style>        
1278.        <!-- Contenedor principal con clase flex -->
1279.        <div id="container">
1280.            
1281.            <!-- Contenido Principal -->
1282.            <div id="main-content" x-show="!loading" x-cloak>
1283.                <!-- Page Heading -->
1284.                
1285.                <main class="container-centered">
1286.                        <div class="full-width-section">
1287.        <div id="slider-container">
1288.  <div class="slider">
1289.    <div class="slides">
1290.                      <div class="slide" style="--bg: url('img/sliders/69038d444e85c.jpg')">
1291.                      <a class="slide-link" href="https://www.facebook.com/gobernaciondelputumayo?locale=es_LA" target="_blank" rel="noopener">
1292.              <img
1293.                src="img/sliders/69038d444e85c.jpg"
1294.                alt="1ra Etapa Vuelta a Putumayo"
1295.                loading="eager"
1296.                decoding="async"
1297.                fetchpriority="high"
1298.              />
1299.            </a>
1300.                    <div class="slide-info">1ra Etapa Vuelta a Putumayo</div>
1301.        </div>
1302.                      <div class="slide" style="--bg: url('img/sliders/690387fecbbbc.jpg')">
1303.                      <a class="slide-link" href="https://www.facebook.com/gobernaciondelputumayo" target="_blank" rel="noopener">
1304.              <img
1305.                src="img/sliders/690387fecbbbc.jpg"
1306.                alt="𝙏𝙚𝙧𝙘𝙚𝙧𝙖 𝙈𝙚𝙨𝙖 𝘿𝙚𝙥𝙖𝙧𝙩𝙖𝙢𝙚𝙣𝙩𝙖𝙡 𝙙𝙚 𝙉𝙞𝙣̃𝙤𝙨, 𝙉𝙞𝙣̃𝙖𝙨 𝙮 𝘼𝙙𝙤𝙡𝙚𝙨𝙘𝙚𝙣𝙩𝙚𝙨"
1307.                loading="lazy"
1308.                decoding="async"
1309.                fetchpriority="low"
1310.              />
1311.            </a>
1312.                    <div class="slide-info">𝙏𝙚𝙧𝙘𝙚𝙧𝙖 𝙈𝙚𝙨𝙖 𝘿𝙚𝙥𝙖𝙧𝙩𝙖𝙢𝙚𝙣𝙩𝙖𝙡 𝙙𝙚 𝙉𝙞𝙣̃𝙤𝙨, 𝙉𝙞𝙣̃𝙖𝙨 𝙮 𝘼𝙙𝙤𝙡𝙚𝙨𝙘𝙚𝙣𝙩𝙚𝙨</div>
1313.        </div>
1314.                      <div class="slide" style="--bg: url('img/sliders/69038390dadea.jpg')">
1315.                      <a class="slide-link" href="https://sedputumayo.gov.co/" target="_blank" rel="noopener">
1316.              <img
1317.                src="img/sliders/69038390dadea.jpg"
1318.                alt="R𝗲𝗰𝗼𝗻𝗼𝗰𝗶𝗺𝗶𝗲𝗻𝘁𝗼 𝗮𝗹 𝗹𝗶𝗱𝗲𝗿𝗮𝘇𝗴𝗼 𝗽𝗲𝗱𝗮𝗴𝗼́𝗴𝗶𝗰𝗼"
1319.                loading="lazy"
1320.                decoding="async"
1321.                fetchpriority="low"
1322.              />
1323.            </a>
1324.                    <div class="slide-info">R𝗲𝗰𝗼𝗻𝗼𝗰𝗶𝗺𝗶𝗲𝗻𝘁𝗼 𝗮𝗹 𝗹𝗶𝗱𝗲𝗿𝗮𝘇𝗴𝗼 𝗽𝗲𝗱𝗮𝗴𝗼́𝗴𝗶𝗰𝗼</div>
1325.        </div>
1326.                      <div class="slide" style="--bg: url('img/sliders/6903859430efd.jpg')">
1327.                      <a class="slide-link" href="https://www.facebook.com/gobernaciondelputumayo?locale=es_LA" target="_blank" rel="noopener">
1328.              <img
1329.                src="img/sliders/6903859430efd.jpg"
1330.                alt="Encuentro Suramericano por la Cordillera de los Andes (ESCA)"
1331.                loading="lazy"
1332.                decoding="async"
1333.                fetchpriority="low"
1334.              />
1335.            </a>
1336.                    <div class="slide-info">Encuentro Suramericano por la Cordillera de los Andes (ESCA)</div>
1337.        </div>
1338.                      <div class="slide" style="--bg: url('img/sliders/69038abf2c003.jpg')">
1339.                      <a class="slide-link" href="https://www.facebook.com/gobernaciondelputumayo" target="_blank" rel="noopener">
1340.              <img
1341.                src="img/sliders/69038abf2c003.jpg"
1342.                alt="15 pueblos indígenas que integran la 𝗠𝗲𝘀𝗮 𝗣𝗲𝗿𝗺𝗮𝗻𝗲𝗻𝘁𝗲 𝗱𝗲 𝗖𝗼𝗻𝗰𝗲𝗿𝘁𝗮𝗰𝗶𝗼́𝗻"
1343.                loading="lazy"
1344.                decoding="async"
1345.                fetchpriority="low"
1346.              />
1347.            </a>
1348.                    <div class="slide-info">15 pueblos indígenas que integran la 𝗠𝗲𝘀𝗮 𝗣𝗲𝗿𝗺𝗮𝗻𝗲𝗻𝘁𝗲 𝗱𝗲 𝗖𝗼𝗻𝗰𝗲𝗿𝘁𝗮𝗰𝗶𝗼́𝗻</div>
1349.        </div>
1350.          </div>
1351.  
1352.    <button class="prev" onclick="prevSlide()">&#10094;</button>
1353.    <button class="next" onclick="nextSlide()">&#10095;</button>
1354.    <button class="play-pause selected" onclick="toggleAutoSlide()">
1355.      <img id="playPauseIcon" src="/icons/pause.svg" alt="Pause">
1356.      <span class='btn__PlayPause' id="playPauseText">Pausar</span>
1357.    </button>
1358.  </div>
1359.  
1360.  <div class="indicator-container">
1361.          <span class="indicator" onclick="selectSlide(4)"></span>
1362.          <span class="indicator" onclick="selectSlide(3)"></span>
1363.          <span class="indicator" onclick="selectSlide(2)"></span>
1364.          <span class="indicator" onclick="selectSlide(1)"></span>
1365.          <span class="indicator" onclick="selectSlide(0)"></span>
1366.      </div>
1367. </div>
1368.  
1369. <script>
1370. let currentSlide = 0
1371. let autoSlideInterval
1372. let isPlaying = true
1373.  
1374. function showSlide(index) {
1375.  const slides = document.querySelector('.slides')
1376.  const indicators = document.querySelectorAll('.indicator')
1377.  const totalSlides = document.querySelectorAll('.slide').length
1378.  
1379.  if (index >= totalSlides) {
1380.    currentSlide = 0
1381.  } else if (index < 0) {
1382.    currentSlide = totalSlides - 1
1383.  } else {
1384.    currentSlide = index
1385.  }
1386.  
1387.  slides.style.transform = `translateX(-${currentSlide * 100}%)`
1388.  indicators.forEach((indicator, idx) => {
1389.    indicator.classList.toggle('active', idx === currentSlide)
1390.  })
1391. }
1392.  
1393. function nextSlide() {
1394.  showSlide(currentSlide + 1)
1395. }
1396.  
1397. function prevSlide() {
1398.  showSlide(currentSlide - 1)
1399. }
1400.  
1401. function selectSlide(index) {
1402.  showSlide(index)
1403.  resetAutoSlide()
1404. }
1405.  
1406. function startAutoSlide() {
1407.  autoSlideInterval = setInterval(() => {
1408.    nextSlide()
1409.  }, 5000)
1410. }
1411.  
1412. function stopAutoSlide() {
1413.  clearInterval(autoSlideInterval)
1414. }
1415.  
1416. function toggleAutoSlide() {
1417.  const playPauseIcon = document.getElementById('playPauseIcon')
1418.  const playPauseText = document.getElementById('playPauseText')
1419.  const playPauseButton = document.querySelector('.play-pause')
1420.  
1421.  if (isPlaying) {
1422.    stopAutoSlide()
1423.    playPauseIcon.src = '/icons/play.svg'
1424.    playPauseIcon.alt = 'Play'
1425.    playPauseText.textContent = 'Reproducir'
1426.    playPauseButton.classList.add('selected')
1427.  } else {
1428.    startAutoSlide()
1429.    playPauseIcon.src = '/icons/pause.svg'
1430.    playPauseIcon.alt = 'Pause'
1431.    playPauseText.textContent = 'Pausar'
1432.    playPauseButton.classList.remove('selected')
1433.  }
1434.  
1435.  isPlaying = !isPlaying
1436. }
1437.  
1438. function resetAutoSlide() {
1439.  stopAutoSlide()
1440.  startAutoSlide()
1441. }
1442.  
1443. window.addEventListener('load', () => {
1444.  startAutoSlide()
1445.  showSlide(currentSlide)
1446. })
1447. </script>
1448.  
1449. <style>
1450. #slider-container {
1451.  --slider-min-h: 620px;
1452.  --slider-max-h: 650px;
1453.  width: 100%;
1454.  margin-left: 0;
1455.  margin-right: 0;
1456.  height: clamp(var(--slider-min-h), 55vh, var(--slider-max-h));
1457.  min-height: var(--slider-min-h);
1458.  position: relative;
1459.  overflow: hidden;
1460.  background: transparent;
1461. }
1462.  
1463. .slider {
1464.  display: flex;
1465.  width: 100%;
1466.  height: 100%;
1467. }
1468. .slides {
1469.  display: flex;
1470.  width: 100%;
1471.  height: 100%;
1472.  transition: transform 0.5s ease;
1473. }
1474. .slide {
1475.  min-width: 100%;
1476.  height: 100%;
1477.  box-sizing: border-box;
1478.  position: relative;
1479.  display: grid;
1480.  place-items: center;
1481.  overflow: hidden;
1482. }
1483. .slide::before {
1484.  content: "";
1485.  position: absolute;
1486.  inset: -40px;
1487.  background-image: var(--bg);
1488.  background-size: cover;
1489.  background-position: center;
1490.  filter: blur(24px);
1491.  opacity: 0.6;
1492.  z-index: 0;
1493. }
1494. .slide-link, .slide img {
1495.  position: relative;
1496.  z-index: 1;
1497.  display: block;
1498. }
1499. .slide img {
1500.  max-width: 100%;
1501.  max-height: 100%;
1502.  width: auto;
1503.  height: 100%;
1504.  min-height: var(--slider-min-h);/
1505.  object-fit: contain;
1506. }
1507. .slide-info {
1508.  position: absolute;
1509.  top: 0;
1510.  right: 0;
1511.  background: rgba(255,255,255,0.7);
1512.  backdrop-filter: blur(10px);
1513.  padding: 10px 20px;
1514.  color: var(--govco-black-color, #000);
1515.  font-family: var(--govco-font-secondary, sans-serif);
1516.  font-size: 16px;
1517.  font-weight: bold;
1518.  max-width: min(60%, 520px);
1519.  clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 0);
1520.  z-index: 2;
1521.  pointer-events: none;
1522. }
1523. .prev, .next {
1524.  position: absolute;
1525.  top: 50%;
1526.  transform: translateY(-50%);
1527.  background-color: rgba(0, 0, 0, 0.5);
1528.  color: var(--govco-white-color, white);
1529.  border: none;
1530.  font-size: 24px;
1531.  padding: 10px;
1532.  cursor: pointer;
1533.  z-index: 10;
1534.  border-radius: var(--govco-border-radius, 5px);
1535. }
1536. .prev { left: 10px; }
1537. .next { right: 10px; }
1538.  
1539. .play-pause {
1540.  position: absolute;
1541.  bottom: 20px;
1542.  left: 20px;
1543.  top: auto;
1544.  
1545.  background: var(--govco-primary-color);
1546.  border: 2px solid transparent;
1547.  color: var(--govco-white-color);
1548.  padding: 10px 15px;
1549.  border-radius: var(--govco-border-radius, 8px);
1550.  cursor: pointer;
1551.  display: flex;
1552.  align-items: center;
1553.  gap: 8px;
1554.  transition: background-color 0.3s ease, border-color 0.3s ease;
1555.  z-index: 11;
1556. }
1557. .play-pause img {
1558.  width: 16px;
1559.  height: 16px;
1560.  filter: brightness(0) invert(1);
1561. }
1562. .play-pause:hover {
1563.  background-color: var(--govco-secondary-color);
1564. }
1565. .play-pause.selected {
1566.  border-color: var(--govco-success-color);
1567. }
1568. .btn__PlayPause {
1569.  color: var(--govco-white-color);
1570.  font-weight: bold;
1571.  font-family: var(--govco-font-primary, sans-serif);
1572.  font-size: 14px;
1573. }
1574. .indicator-container {
1575.  text-align: center;
1576.  position: absolute;
1577.  bottom: 20px;
1578.  width: 100%;
1579.  z-index: 10;
1580. }
1581. .indicator {
1582.  display: inline-block;
1583.  width: 12px;
1584.  height: 12px;
1585.  margin: 0 5px;
1586.  background-color: rgba(255, 255, 255, 0.5);
1587.  border-radius: 50%;
1588.  cursor: pointer;
1589.  transition: background-color 0.3s ease;
1590.  border: 2px solid transparent;
1591. }
1592. .indicator.active {
1593.  background-color: var(--govco-white-color, rgba(255, 255, 255, 1));
1594.  border-color: var(--govco-success-color);
1595. }
1596.  
1597. @media (max-width: 992px) {
1598.  #slider-container {
1599.    --slider-min-h: auto;
1600.    min-height: auto;
1601.    height: auto;
1602.    aspect-ratio: 16 / 9;
1603.  }
1604.  
1605.  .slide img {
1606.    min-height: auto;
1607.    width: 100%;
1608.    height: 100%;
1609.  }
1610. }
1611.  
1612. @media (max-width: 768px) {
1613.  .slide-info {
1614.    font-size: 14px;
1615.    padding: 8px 12px;
1616.    max-width: 80%;
1617.    clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 0);
1618.  }
1619.  .prev, .next {
1620.    font-size: 20px;
1621.    padding: 8px;
1622.  }
1623.  
1624.  .play-pause {
1625.    top: 10px;
1626.    left: 10px;
1627.    bottom: auto;
1628.    padding: 8px 12px;
1629.  }
1630.  
1631.  .indicator-container {
1632.    bottom: 10px;
1633.  }
1634. }
1635.  
1636. @media (max-width: 576px) {
1637.  #slider-container {
1638.    aspect-ratio: 4 / 3;
1639.  }
1640.  
1641.  .btn__PlayPause {
1642.    display: none;
1643.  }
1644.  .play-pause {
1645.    padding: 8px;
1646.  }
1647.  .indicator {
1648.    width: 10px;
1649.    height: 10px;
1650.    margin: 0 4px;
1651.  }
1652. }
1653. </style>        <section class="tramites-section">
1654.            <div class="tramites-content text-center">
1655.                <div class="tabs">
1656.                    <button class="tab active" onclick="showTab('tramites')">Trámites y Servicios</button>
1657.                    <button class="tab" onclick="showTab('atencion')">Atención al Ciudadano</button>
1658.                </div>
1659.  
1660.                <div id="tab-tramites" class="tramites-grid tab-content active">
1661.                                            <a href="https://softwareenlanube.net/siver-v-putumayo/redirect/" class="tramite-item" target="_blank">
1662.                            <div class="tramite-icon">
1663.                                <img src="http://putumayo.gov.co/icon/vehicle.svg" alt="Pago de Impuestos Automotores">
1664.                            </div>
1665.                            <p class="tramite-title">Pago de Impuestos Automotores</p>
1666.                        </a>
1667.                                            <a href="https://pasaporte.putumayo.gov.co" class="tramite-item" target="_blank">
1668.                            <div class="tramite-icon">
1669.                                <img src="http://putumayo.gov.co/icon/passport-white.svg" alt="Agenda Tu Cita para Tramite Pasaporte">
1670.                            </div>
1671.                            <p class="tramite-title">Agenda Tu Cita para Tramite Pasaporte</p>
1672.                        </a>
1673.                                            <a href="https://www.softwareenlanube.net/estampillas-pro-putumayo/index.php/liquidacionesPSE/pagoPublico" class="tramite-item" target="_blank">
1674.                            <div class="tramite-icon">
1675.                                <img src="http://putumayo.gov.co/icon/stamp-white.svg" alt="Pago Estampillas Trámites, Contrato, Pasaporte">
1676.                            </div>
1677.                            <p class="tramite-title">Pago Estampillas Trámites, Contrato, Pasaporte</p>
1678.                        </a>
1679.                                            <a href="https://www.saludputumayo.gov.co/" class="tramite-item" target="_blank">
1680.                            <div class="tramite-icon">
1681.                                <img src="http://putumayo.gov.co/icon/healt-white.svg" alt="Portal Web Salud">
1682.                            </div>
1683.                            <p class="tramite-title">Portal Web Salud</p>
1684.                        </a>
1685.                                            <a href="https://softwareenlanube.net/siver-r-putumayo/pagoweb/consulta_boleta_contri.php" class="tramite-item" target="_blank">
1686.                            <div class="tramite-icon">
1687.                                <img src="http://putumayo.gov.co/icon/register-taxes.svg" alt="Impuesto de Registro">
1688.                            </div>
1689.                            <p class="tramite-title">Impuesto de Registro</p>
1690.                        </a>
1691.                                    </div>
1692.  
1693.                <div id="tab-atencion" class="tramites-grid tab-content">
1694.                                            <a href="#" class="tramite-item" target="_blank">
1695.                            <div class="tramite-icon">
1696.                                <img src="http://putumayo.gov.co/icon/callme-white.svg" alt="Contáctenos">
1697.                            </div>
1698.                            <p class="tramite-title">Contáctenos</p>
1699.                        </a>
1700.                                            <a href="https://pqrds.putumayo.gov.co" class="tramite-item" target="_blank">
1701.                            <div class="tramite-icon">
1702.                                <img src="http://putumayo.gov.co/icon/pqrds-white.svg" alt="Radicar PQRDS">
1703.                            </div>
1704.                            <p class="tramite-title">Radicar PQRDS</p>
1705.                        </a>
1706.                                            <a href="#" class="tramite-item" target="_blank">
1707.                            <div class="tramite-icon">
1708.                                <img src="http://putumayo.gov.co/icon/complaint-white.svg" alt="Denuncias Anticorrupción">
1709.                            </div>
1710.                            <p class="tramite-title">Denuncias Anticorrupción</p>
1711.                        </a>
1712.                                            <a href="#" class="tramite-item" target="_blank">
1713.                            <div class="tramite-icon">
1714.                                <img src="http://putumayo.gov.co/icon/survey-white.svg" alt="Encuesta de Satisfacción">
1715.                            </div>
1716.                            <p class="tramite-title">Encuesta de Satisfacción</p>
1717.                        </a>
1718.                                    </div>
1719.                <a href="#" class="tramites-button">Ver más trámites</a>
1720.            </div>
1721.            <div class="curve-background"></div>
1722.        </section>
1723.    </div>
1724.        <section class="microsites">
1725.  <div class="ms-container">
1726.    <header class="ms-header">
1727.      <h2 class="ms-title">Micro Sitios</h2>
1728.      <p class="ms-intro">Conoce aquí la información complementaria de todos nuestros procesos y programas.</p>    </header>
1729.  
1730.          <ul class="ms-grid ms-cols-4" role="list">
1731.                  <li class="ms-card">
1732.            <a class="ms-card-link" href="https://historico.ticputumayo.gov.co/index.php/gestion-de-gobierno/rentas-departamental" target="_blank" rel="noopener">
1733.              <span class="ms-media">
1734.                                  <img class="ms-icon" src="/img/microsites/taxes.svg" alt="">
1735.                              </span>
1736.              <span class="ms-label">Rentas Departamental</span>
1737.            </a>
1738.          </li>
1739.                  <li class="ms-card">
1740.            <a class="ms-card-link" href="https://www.putumayo.gov.co/statistical-information-management" target="_blank" rel="noopener">
1741.              <span class="ms-media">
1742.                                  <img class="ms-icon" src="/img/microsites/statistic.svg" alt="">
1743.                              </span>
1744.              <span class="ms-label">Gestión de Información Estadistica</span>
1745.            </a>
1746.          </li>
1747.                  <li class="ms-card">
1748.            <a class="ms-card-link" href="https://historico.ticputumayo.gov.co/index.php/component/sppagebuilder/page/423" target="_blank" rel="noopener">
1749.              <span class="ms-media">
1750.                                  <img class="ms-icon" src="/img/microsites/student.svg" alt="">
1751.                              </span>
1752.              <span class="ms-label">ICETEX</span>
1753.            </a>
1754.          </li>
1755.              </ul>
1756.      </div>
1757.  
1758.  <style>
1759.    .microsites .ms-container { max-width:1200px; margin:auto; padding:1rem 1rem 2rem; }
1760.    .microsites .ms-header { text-align:center; margin-bottom:1.25rem; }
1761.    .microsites .ms-title { font:700 1.75rem/1.2 var(--govco-font-primary); color:var(--govco-secondary-color); }
1762.    .microsites .ms-intro { color:var(--govco-tertiary-color); margin:0 auto 1rem; max-width:60ch; }
1763.  
1764.    .microsites .ms-grid { list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
1765.    .microsites .ms-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
1766.    .microsites .ms-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
1767.    .microsites .ms-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
1768.    .microsites .ms-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
1769.    .microsites .ms-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
1770.    @media (max-width:1024px){ .microsites .ms-grid{grid-template-columns:repeat(3,1fr)} }
1771.    @media (max-width:640px){ .microsites .ms-grid{grid-template-columns:repeat(2,1fr)} }
1772.  
1773.    .microsites .ms-card {
1774.      border: none;
1775.      border-radius: 18px;
1776.      background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.92));
1777.      box-shadow: 0 10px 26px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.06);
1778.      transition: transform .22s ease, box-shadow .22s ease;
1779.      padding: 1.5rem 1rem;
1780.      text-align: center;
1781.    }
1782.    .microsites .ms-card:hover {
1783.      transform: translateY(-5px);
1784.      box-shadow: 0 16px 36px rgba(0,0,0,.14), 0 6px 14px rgba(0,0,0,.1);
1785.    }
1786.  
1787.    .microsites .ms-card-link {
1788.      display: flex;
1789.      flex-direction: column;
1790.      align-items: center;
1791.      gap: 1rem;
1792.      text-decoration: none;
1793.      height: 100%;
1794.    }
1795.  
1796.    .microsites .ms-media{
1797.      width: 80px; height: 80px;
1798.      border-radius: 20px;
1799.      display: grid; place-items: center;
1800.      background: var(--govco-secondary-color);
1801.      position: relative;
1802.      box-shadow: 0 6px 18px rgba(0,0,0,.15), inset 0 0 0 2px rgba(255,255,255,.22);
1803.      transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
1804.    }
1805.    .microsites .ms-media::after{
1806.      content:"";
1807.      position:absolute; inset:0;
1808.      border-radius:20px;
1809.      background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 55%);
1810.      pointer-events:none;
1811.    }
1812.  
1813.    .microsites .ms-card:hover .ms-media{
1814.      transform: scale(1.08) rotate(-2deg);
1815.      box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.28);
1816.    }
1817.  
1818.    .microsites .ms-icon{
1819.      width: 60%; height: 60%;
1820.      object-fit: contain;
1821.      filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,.15));
1822.    }
1823.  
1824.    .microsites .ms-label {
1825.      color: var(--govco-secondary-color);
1826.      font-weight: 800;
1827.      font-size: 1rem;
1828.      line-height: 1.3;
1829.      transition: color .2s ease;
1830.    }
1831.    .microsites .ms-card:hover .ms-label {
1832.      color: var(--govco-primary-color);
1833.    }
1834.  
1835.    .microsites .ms-card-link:focus-visible,
1836.    .microsites .ms-slide-link:focus-visible {
1837.      outline: 3px solid color-mix(in srgb, var(--govco-secondary-color) 40%, white);
1838.      outline-offset: 3px;
1839.      border-radius: 14px;
1840.    }
1841.  
1842.    .microsites .ms-carousel { position:relative; }
1843.    .microsites .ms-track {
1844.      overflow:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; margin:0 2.25rem;
1845.    }
1846.    .microsites .ms-rail { list-style:none; display:flex; gap:1rem; padding:.25rem 0 1.1rem; margin:0; }
1847.    .microsites .ms-slide { min-width:220px; scroll-snap-align:center; }
1848.  
1849.    .microsites .ms-slide-link {
1850.      display:flex; align-items:center; gap:.8rem; text-decoration:none;
1851.      border: none; border-radius:14px;
1852.      padding:1rem 1.05rem;
1853.      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.94));
1854.      box-shadow:
1855.        0 10px 24px rgba(0,0,0,.08),
1856.        0 2px 8px rgba(0,0,0,.05);
1857.      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
1858.    }
1859.    .microsites .ms-slide-link:hover {
1860.      transform: translateY(-3px);
1861.      box-shadow:
1862.        0 16px 36px rgba(0,0,0,.12),
1863.        0 6px 14px rgba(0,0,0,.08);
1864.      filter: saturate(1.02);
1865.    }
1866.  
1867.    .microsites .ms-nav {
1868.      position:absolute; top:50%; transform:translateY(-50%);
1869.      width:44px; height:44px; border-radius:50%;
1870.      border:none; cursor:pointer; display:grid; place-items:center;
1871.      color: var(--govco-white-color);
1872.      background: color-mix(in srgb, var(--govco-secondary-color) 80%, transparent);
1873.      box-shadow: 0 8px 18px rgba(0,0,0,.18);
1874.      transition: transform .15s ease, filter .15s ease, background .15s ease;
1875.    }
1876.    .microsites .ms-nav:hover { transform:translateY(-50%) scale(1.05); filter:brightness(1.05); }
1877.    .microsites .ms-prev { left:0; }
1878.    .microsites .ms-next { right:0; }
1879.  </style>
1880.  
1881.  <script>
1882.    (() => {
1883.      const root = document.currentScript.closest('.microsites');
1884.      const car = root.querySelector('[data-ms-carousel]');
1885.      if(!car) return;
1886.      const track = car.querySelector('.ms-track');
1887.      const prev = car.querySelector('.ms-prev');
1888.      const next = car.querySelector('.ms-next');
1889.  
1890.      function slide(dir=1){
1891.        const card = track.querySelector('.ms-slide');
1892.        if(!card) return;
1893.        const delta = card.getBoundingClientRect().width + 12;
1894.        track.scrollBy({left: dir*delta, behavior:'smooth'});
1895.      }
1896.      prev.addEventListener('click',()=>slide(-1));
1897.      next.addEventListener('click',()=>slide(1));
1898.    })();
1899.  </script>
1900. </section><div class="calls-carousel-container govco-container">
1901.  <h2 class="calls-carousel-title">Convocatorias Vigentes</h2>
1902.  
1903.      <div class="calls-carousel-wrapper">
1904.      <button class="carousel-btn left" onclick="scrollCalls(-1)" aria-label="Anterior">‹</button>
1905.  
1906.      <div class="calls-carousel" id="callsCarousel">
1907.                  
1908.          <div class="call-slide">
1909.            <article class="call-card no-image">
1910.              
1911.              <div class="call-content">
1912.                <div class="call-header">
1913.                  <h3 class="call-title">
1914.                                          Convocatoria de Encargo A-2025-031 Secretaría de Educación - Carrera Administrativa Grado 02 Celador
1915.                                      </h3>
1916.  
1917.                  <div class="call-badges">
1918.                    <span class="badge badge-info">
1919.                      Publicación: 16/10/2025
1920.                    </span>
1921.                                      </div>
1922.                </div>
1923.  
1924.                <p class="call-description">
1925.                  Nivel: Asistencial, Denominación del empleo: Celador, Código: 477, Grado: 02, Carácter del empleo: Carrera Administrativa, Dependencia: Esta...
1926.                </p>
1927.  
1928.                <div class="call-actions">
1929.                  <a href="http://putumayo.gov.co/publications/26?type=4"
1930.                     class="govco-btn btn-primary">Ver más</a>
1931.  
1932.                                      <a href="/storage/app/public/publications/2025-10/documents/0oGaJws2pFEcrIJBq4XsiFlOUf3CSQeHC1ptsNSE.pdf"
1933.                       target="_blank" rel="noopener"
1934.                       class="govco-btn btn-ghost">Documento</a>
1935.                  
1936.                                  </div>
1937.              </div>
1938.            </article>
1939.          </div>
1940.                  
1941.          <div class="call-slide">
1942.            <article class="call-card no-image">
1943.              
1944.              <div class="call-content">
1945.                <div class="call-header">
1946.                  <h3 class="call-title">
1947.                                          Convocatoria de Encargo A-2025-032 Secretaria de Educación
1948.                                      </h3>
1949.  
1950.                  <div class="call-badges">
1951.                    <span class="badge badge-info">
1952.                      Publicación: 16/10/2025
1953.                    </span>
1954.                                      </div>
1955.                </div>
1956.  
1957.                <p class="call-description">
1958.                  Nivel: Asistencial, Denominación del empleo: Auxiliar de Servicios Generales, Código: 470, Grado: 02, Carácter del empleo: Carrera Administr...
1959.                </p>
1960.  
1961.                <div class="call-actions">
1962.                  <a href="http://putumayo.gov.co/publications/27?type=4"
1963.                     class="govco-btn btn-primary">Ver más</a>
1964.  
1965.                                      <a href="/storage/app/public/publications/2025-10/documents/pwYGJaeDXkC4G05HuAYZcAKNSlKScRdEBgiIX6Je.pdf"
1966.                       target="_blank" rel="noopener"
1967.                       class="govco-btn btn-ghost">Documento</a>
1968.                  
1969.                                  </div>
1970.              </div>
1971.            </article>
1972.          </div>
1973.                  
1974.          <div class="call-slide">
1975.            <article class="call-card no-image">
1976.              
1977.              <div class="call-content">
1978.                <div class="call-header">
1979.                  <h3 class="call-title">
1980.                                          <span class="call-title-toggle"
1981.                            data-full="CONVOCATORIA PROCESO DE CONFORMACIÓN DEL BANCO DE HOJAS DE VIDA PARA PROVEER EL EMPLEO DE JEFE DE OFICINA DE CONTROL INTERNO DE LA GOBERNACIÓN DEL DEPARTAMENTO DEL PUTUMAYO Y LAS EMPRESAS SOCIALES DEL ESTADO DE ORDEN DEPARTAMENTAL DEL PUTUMAYO PARA EL PERIODO 2026-2029"
1982.                            data-short="CONVOCATORIA PROCESO DE CONFORMACIÓN DEL BANCO DE HOJAS DE VIDA PARA PROVEER EL EMPLEO DE JEFE DE OFICINA DE CONTROL INT…"
1983.                            data-expanded="0"
1984.                            onclick="toggleTitle(this)">CONVOCATORIA PROCESO DE CONFORMACIÓN DEL BANCO DE HOJAS DE VIDA PARA PROVEER EL EMPLEO DE JEFE DE OFICINA DE CONTROL INT…</span>
1985.                                      </h3>
1986.  
1987.                  <div class="call-badges">
1988.                    <span class="badge badge-info">
1989.                      Publicación: 08/10/2025
1990.                    </span>
1991.                                      </div>
1992.                </div>
1993.  
1994.                <p class="call-description">
1995.                  El banco de hojas de vida será una base de datos de las personas que aspiren a los empleos mencionados que cumplan con los requisitos mínimo...
1996.                </p>
1997.  
1998.                <div class="call-actions">
1999.                  <a href="http://putumayo.gov.co/publications/25?type=4"
2000.                     class="govco-btn btn-primary">Ver más</a>
2001.  
2002.                                      <a href="/storage/app/public/publications/2025-10/documents/wulISZv1ry7JyEc3t6rowYVbbSSIwCAg3c3NgnDQ.pdf"
2003.                       target="_blank" rel="noopener"
2004.                       class="govco-btn btn-ghost">Documento</a>
2005.                  
2006.                                      <a href="https://drive.google.com/drive/folders/1wWbXZGraeEdlPW0RPmYluvvIHXN2NFf9?usp=drive_link"
2007.                       target="_blank" rel="noopener"
2008.                       class="govco-btn btn-ghost">Más información…</a>
2009.                                  </div>
2010.              </div>
2011.            </article>
2012.          </div>
2013.                  
2014.          <div class="call-slide">
2015.            <article class="call-card no-image">
2016.              
2017.              <div class="call-content">
2018.                <div class="call-header">
2019.                  <h3 class="call-title">
2020.                                          Juzgado Tercero (03) administrativo del circuito de Mocoa
2021.                                      </h3>
2022.  
2023.                  <div class="call-badges">
2024.                    <span class="badge badge-info">
2025.                      Publicación: 06/10/2025
2026.                    </span>
2027.                                          <span class="badge badge-range">
2028.                        06/10/2025 – 10/10/2025
2029.                      </span>
2030.                                      </div>
2031.                </div>
2032.  
2033.                <p class="call-description">
2034.                  El Secretario del Juzgado tercero administrativo del circuito de Mocoa, de conformidad a lo establecido en el artículo 21 de la ley 472 de 1...
2035.                </p>
2036.  
2037.                <div class="call-actions">
2038.                  <a href="http://putumayo.gov.co/publications/22?type=4"
2039.                     class="govco-btn btn-primary">Ver más</a>
2040.  
2041.                                      <a href="/storage/app/public/publications/2025-10/documents/7ZHIePTsSTVzZKJJwV5R6dm8I1l1sl2FAWc5ywvR.pdf"
2042.                       target="_blank" rel="noopener"
2043.                       class="govco-btn btn-ghost">Documento</a>
2044.                  
2045.                                  </div>
2046.              </div>
2047.            </article>
2048.          </div>
2049.                  
2050.          <div class="call-slide">
2051.            <article class="call-card no-image">
2052.              
2053.              <div class="call-content">
2054.                <div class="call-header">
2055.                  <h3 class="call-title">
2056.                                          Convocatoria para encargo Carrera Administrativa Grado 01 Técnico Área Salud Secretaría de Salud Departamental
2057.                                      </h3>
2058.  
2059.                  <div class="call-badges">
2060.                    <span class="badge badge-info">
2061.                      Publicación: 02/10/2025
2062.                    </span>
2063.                                      </div>
2064.                </div>
2065.  
2066.                <p class="call-description">
2067.                  Sin observaciones
2068.                </p>
2069.  
2070.                <div class="call-actions">
2071.                  <a href="http://putumayo.gov.co/publications/19?type=4"
2072.                     class="govco-btn btn-primary">Ver más</a>
2073.  
2074.                                      <a href="/storage/app/public/publications/2025-10/documents/HhD9OqjEMui1Ru9NJHvMpnCKO33vsMToKhMjj2uj.pdf"
2075.                       target="_blank" rel="noopener"
2076.                       class="govco-btn btn-ghost">Documento</a>
2077.                  
2078.                                  </div>
2079.              </div>
2080.            </article>
2081.          </div>
2082.              </div>
2083.  
2084.      <button class="carousel-btn right" onclick="scrollCalls(1)" aria-label="Siguiente">›</button>
2085.    </div>
2086.  </div>
2087.  
2088. <script>
2089. function scrollCalls(direction) {
2090.    const container = document.getElementById('callsCarousel');
2091.    const scrollAmount = 330; // Ajusta si quieres que avance más o menos
2092.    container.scrollBy({
2093.        left: direction * scrollAmount,
2094.        behavior: 'smooth'
2095.    });
2096. }
2097.  
2098. function toggleTitle(el) {
2099.  const expanded = el.getAttribute('data-expanded') === '1';
2100.  el.textContent = expanded ? el.dataset.short : el.dataset.full;
2101.  el.setAttribute('data-expanded', expanded ? '0' : '1');
2102. }
2103. </script>
2104. <style>
2105. .calls-carousel-container{
2106.  padding:2rem 1rem; max-width:1200px; margin:auto; position:relative; margin-top:1rem;
2107. }
2108. .calls-carousel-title{
2109.  font-size:2rem; font-weight:800; color:var(--govco-secondary-color);
2110.  text-align:center; margin-bottom:1.25rem;
2111. }
2112.  
2113. .call-title-toggle{
2114.  cursor: pointer;
2115.  color: inherit;
2116.  font: inherit;
2117. }
2118.  
2119. /* layout */
2120. .calls-carousel-wrapper{ position:relative; }
2121. .calls-carousel{
2122.  display:flex; flex-wrap:wrap; justify-content:center; gap:1.25rem; padding:0;
2123. }
2124. .calls-carousel::-webkit-scrollbar{ display:none; }
2125.  
2126. .call-slide{ flex:1 1 320px; max-width:100%; display:flex; }
2127.  
2128. /* Card elegante */
2129. .call-card{
2130.  width:100%;
2131.  display:grid;
2132.  grid-template-columns: 1fr;
2133.  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
2134.  border-radius:18px;
2135.  box-shadow:0 10px 26px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.06);
2136.  overflow:hidden;
2137.  transition: transform .18s ease, box-shadow .18s ease;
2138. }
2139. .call-card:hover{
2140.  transform:translateY(-3px);
2141.  box-shadow:0 16px 36px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.08);
2142. }
2143.  
2144. /* Media (sólo si hay imagen) */
2145. .call-card.has-image .call-media{ max-height:180px; overflow:hidden; }
2146. .call-card.has-image .call-img{
2147.  width:100%; height:180px; object-fit:cover; display:block;
2148. }
2149. .call-card.no-image .call-media{ display:none; }
2150.  
2151. /* Contenido */
2152. .call-content{ padding:1rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.7rem; }
2153. .call-header{ display:flex; flex-direction:column; gap:.35rem; }
2154. .call-title{
2155.  font-size:1.15rem; font-weight:800; color:var(--govco-secondary-color); margin:0;
2156. }
2157.  
2158. /* Badges (fechas) */
2159. .call-badges{ display:flex; flex-wrap:wrap; gap:.35rem; }
2160. .badge{
2161.  display:inline-flex; align-items:center; gap:.4rem;
2162.  border-radius:999px; padding:.25rem .6rem; font-size:.8rem; font-weight:700;
2163. }
2164. .badge-info{
2165.  color:var(--govco-secondary-color);
2166.  background: color-mix(in srgb, var(--govco-secondary-color) 10%, white);
2167.  border:1px solid color-mix(in srgb, var(--govco-secondary-color) 25%, white);
2168. }
2169. .badge-range{
2170.  color:#2e7d32;
2171.  background: color-mix(in srgb, #2e7d32 10%, white);
2172.  border:1px solid color-mix(in srgb, #2e7d32 25%, white);
2173. }
2174.  
2175. /* Descripción */
2176. .call-description{
2177.  color:#333; line-height:1.45; margin:.2rem 0 0; min-height:56px;
2178. }
2179.  
2180. /* Acciones */
2181. .call-actions{ margin-top:.3rem; display:flex; gap:.5rem; flex-wrap:wrap; }
2182.  
2183. /* Botones Govco */
2184. .govco-btn{
2185.  display:inline-block; text-decoration:none; font-weight:700; border-radius:10px;
2186.  padding:.48rem .9rem; font-size:.92rem; transition:filter .15s ease, transform .15s ease;
2187. }
2188. .govco-btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
2189.  
2190. .btn-primary{
2191.  background:var(--govco-secondary-color); color:#fff; border:1px solid var(--govco-secondary-color);
2192. }
2193. .btn-ghost{
2194.  background:transparent; color:var(--govco-secondary-color);
2195.  border:1px solid color-mix(in srgb, var(--govco-secondary-color) 50%, white);
2196. }
2197.  
2198. /* Flechas */
2199. .carousel-btn{
2200.  position:absolute; top:50%; transform:translateY(-50%);
2201.  background: color-mix(in srgb, var(--govco-secondary-color) 85%, transparent);
2202.  color:#fff; border:none; width:44px; height:44px; border-radius:50%;
2203.  font-size:1.35rem; cursor:pointer; z-index:5;
2204.  box-shadow:0 8px 18px rgba(0,0,0,.18);
2205.  display:grid; place-items:center;
2206.  transition: transform .15s ease, filter .15s ease;
2207. }
2208. .carousel-btn:hover{ transform:translateY(-50%) scale(1.05); filter:brightness(1.05); }
2209. .carousel-btn.left{ left:-4px; }
2210. .carousel-btn.right{ right:-4px; }
2211.  
2212. /* Empty state */
2213. .no-calls{ text-align:center; color:var(--govco-tertiary-color); }
2214. </style>    <section class="news-tabs govco-container" aria-label="Sección de noticias">
2215.        <div class="tabs tabs--news" role="tablist">
2216.            <button class="tab is-active"
2217.                    role="tab"
2218.                    aria-selected="true"
2219.                    aria-controls="tab-news"
2220.                    data-target="tab-news">
2221.            Noticias
2222.            </button>
2223.            <button class="tab"
2224.                    role="tab"
2225.                    aria-selected="false"
2226.                    aria-controls="tab-anti"
2227.                    data-target="tab-anti">
2228.            Anticontrabando
2229.            </button>
2230.        </div>
2231.  
2232.        <div id="tab-news" class="tab-pane is-active" role="tabpanel">
2233.            <div class="news-section govco-container">
2234.    <h2 class="news-title">Noticias</h2>
2235.  
2236.            <div class="news-container">
2237.            <!-- Noticia destacada -->
2238.            <div class="featured-news">
2239.                <img src="http://putumayo.gov.co/storage/app/public/publications/2025-10/images/AvGRZmhwLTKRzFrkJclbBiZjTAQsL1Eokz1BCX7W.jpg" alt="Participa de la Campaña de Valoración Integral en Salud" class="featured-image">
2240.                <div class="featured-content">
2241.                    <h3 class="featured-title">Participa de la Campaña de Valoración Integral en Salud</h3>
2242.                    <p class="featured-date">
2243.                        <strong>Publicación:</strong> 07/10/2025
2244.                    </p>
2245.                    <p class="featured-description">#Infancia | Participa de la Campaña de Valoración Integral en Salud, la salud de tus hijos depende del cuidado que les brindes hoy.
2246. Padres, madres y cuidadores &quot;Un chequeo hoy, un futuro más sano&quot; a...</p>
2247.  
2248.                    <div>
2249.                        <a href="http://putumayo.gov.co/publications/24?type=2" class="news-btn">Leer más</a>
2250.  
2251.                                            </div>
2252.                </div>
2253.            </div>
2254.  
2255.            <!-- Lista lateral de noticias -->
2256.            <div class="news-list">
2257.                                    <div class="news-item">
2258.                        <img src="http://putumayo.gov.co/storage/app/public/publications/2025-10/images/M2mqwdlAtpuu1Jw5gRSC0gh56Znu4DtQsFdawK4A.jpg" alt="Día 1 – 𝗙𝗮𝘀𝗲 𝗗𝗲𝗽𝗮𝗿𝘁𝗮𝗺𝗲𝗻𝘁𝗮𝗹 𝗝𝘂𝗲𝗴𝗼𝘀 𝗜𝗻𝘁𝗲𝗿𝗰𝗼𝗹𝗲𝗴𝗶𝗮𝗱𝗼𝘀 𝗡𝗮𝗰𝗶𝗼𝗻𝗮𝗹𝗲𝘀 𝟮𝟬𝟮𝟱" class="news-thumbnail">
2259.                        <div class="news-item-content">
2260.                            <a href="http://putumayo.gov.co/publications/21" class="news-item-title">Día 1 – 𝗙𝗮𝘀𝗲 𝗗𝗲𝗽𝗮𝗿𝘁𝗮𝗺𝗲𝗻𝘁𝗮𝗹 𝗝𝘂𝗲𝗴𝗼𝘀 𝗜𝗻𝘁𝗲𝗿𝗰𝗼𝗹𝗲𝗴𝗶𝗮𝗱𝗼𝘀 𝗡𝗮𝗰𝗶𝗼𝗻𝗮𝗹𝗲𝘀 𝟮𝟬𝟮𝟱</a>
2261.                            <p class="news-item-date">30/09/2025</p>
2262.                        </div>
2263.                    </div>
2264.                                    <div class="news-item">
2265.                        <img src="http://putumayo.gov.co/storage/images/publications/new_3.jpg
2266. " alt="Plan de Desarrollo Integral del Putumayo" class="news-thumbnail">
2267.                        <div class="news-item-content">
2268.                            <a href="http://putumayo.gov.co/publications/3" class="news-item-title">Plan de Desarrollo Integral del Putumayo</a>
2269.                            <p class="news-item-date">15/03/1980</p>
2270.                        </div>
2271.                    </div>
2272.                            </div>
2273.        </div>
2274.    
2275.    <div class="news-more">
2276.        <a href="http://putumayo.gov.co/publications/all?type=2" class="news-more-btn">Ver más noticias</a>
2277.    </div>
2278. </div>
2279.  
2280. <style>
2281. /* Estilos Base (Desktop) */
2282. .govco-container {
2283.    max-width: 1200px;
2284.    margin-left: auto;
2285.    margin-right: auto;
2286.    padding-left: 1rem;
2287.    padding-right: 1rem;
2288. }
2289.  
2290. .news-section {
2291.    padding: 2rem 1rem;
2292.    margin: auto;
2293.    font-family: var(--govco-font-primary, sans-serif);
2294. }
2295.  
2296. .news-title {
2297.    font-size: 2rem;
2298.    font-weight: 700;
2299.    color: var(--govco-secondary-color, #004884);
2300.    text-align: center;
2301.    margin-bottom: 2rem;
2302. }
2303.  
2304. .news-container {
2305.    display: grid;
2306.    grid-template-columns: 2fr 1fr;
2307.    gap: 2rem;
2308.    align-items: flex-start;
2309. }
2310.  
2311. .featured-news {
2312.    background-color: var(--govco-white-color, #fff);
2313.    border-radius: var(--govco-border-radius, 8px);
2314.    box-shadow: var(--govco-box-shadow, 0 2px 6px rgba(0,0,0,0.05));
2315.    overflow: hidden;
2316.    display: flex;
2317.    flex-direction: column;
2318. }
2319.  
2320. .featured-image {
2321.    width: 100%;
2322.    height: 250px;
2323.    object-fit: cover;
2324. }
2325.  
2326. .featured-content {
2327.    padding: 1rem;
2328.    display: flex;
2329.    flex-direction: column;
2330.    justify-content: space-between;
2331.    height: 100%;
2332. }
2333.  
2334. .featured-title {
2335.    font-size: 1.4rem;
2336.    font-weight: bold;
2337.    color: var(--govco-secondary-color, #004884);
2338.    margin-bottom: 0.5rem;
2339. }
2340.  
2341. .featured-date {
2342.    font-size: 0.9rem;
2343.    color: var(--govco-tertiary-color, #666);
2344.    margin-bottom: 0.8rem;
2345. }
2346.  
2347. .featured-description {
2348.    font-size: 0.95rem;
2349.    color: var(--govco-tertiary-color, #333);
2350.    flex-grow: 1;
2351. }
2352.  
2353. .news-btn {
2354.    margin-top: 1rem;
2355.    align-self: flex-start;
2356.    background-color: var(--govco-secondary-color, #004884);
2357.    color: var(--govco-white-color, #fff);
2358.    font-weight: 600;
2359.    padding: 0.5rem 1.2rem;
2360.    border-radius: var(--govco-border-radius, 4px);
2361.    text-decoration: none;
2362.    transition: background 0.3s ease;
2363. }
2364.  
2365. .news-btn:hover {
2366.    background-color: var(--govco-primary-color, #007bff);
2367. }
2368.  
2369. .news-list {
2370.    display: flex;
2371.    flex-direction: column;
2372.    gap: 1rem;
2373. }
2374.  
2375. .news-item {
2376.    display: flex;
2377.    align-items: flex-start;
2378.    gap: 1rem;
2379.    background: var(--govco-white-color, #fff);
2380.    padding: 0.8rem;
2381.    border-radius: var(--govco-border-radius, 6px);
2382.    box-shadow: var(--govco-box-shadow, 0 1px 4px rgba(0,0,0,0.05));
2383. }
2384.  
2385. .news-thumbnail {
2386.    width: 70px;
2387.    height: 70px;
2388.    object-fit: cover;
2389.    border-radius: var(--govco-border-radius, 6px);
2390. }
2391.  
2392. .news-item-content {
2393.    flex: 1;
2394. }
2395.  
2396. .news-item-title {
2397.    font-size: 1rem;
2398.    font-weight: bold;
2399.    color: var(--govco-secondary-color, #004884);
2400.    text-decoration: none;
2401. }
2402.  
2403. .news-item-title:hover {
2404.    color: var(--govco-primary-color, #007bff);
2405. }
2406.  
2407. .news-item-date {
2408.    font-size: 0.85rem;
2409.    color: #888;
2410.    margin-top: 0.25rem;
2411. }
2412.  
2413. .news-more {
2414.    text-align: center;
2415.    margin-top: 2rem;
2416. }
2417.  
2418. .news-more-btn {
2419.    background-color: var(--govco-secondary-color, #004884);
2420.    color: var(--govco-white-color, white);
2421.    padding: 0.7rem 1.5rem;
2422.    font-weight: bold;
2423.    border-radius: var(--govco-border-radius, 5px);
2424.    text-decoration: none;
2425.    transition: background 0.3s;
2426. }
2427.  
2428. .news-more-btn:hover {
2429.    background-color: var(--govco-primary-color, #007bff);
2430. }
2431.  
2432.  
2433. @media (max-width: 992px) {
2434.    .news-container {
2435.        grid-template-columns: 1fr;
2436.        gap: 1.5rem;
2437.    }
2438. }
2439.  
2440. @media (max-width: 768px) {
2441.    .news-section {
2442.        padding: 1.5rem 1rem;
2443.    }
2444.    
2445.    .news-title {
2446.        font-size: 1.8rem;
2447.        margin-bottom: 1.5rem;
2448.    }
2449.  
2450.    .featured-image {
2451.        height: 200px;
2452.    }
2453.  
2454.    .featured-title {
2455.        font-size: 1.2rem;
2456.    }
2457.  
2458.    .featured-description {
2459.        font-size: 0.9rem;
2460.    }
2461. }
2462.  
2463. @media (max-width: 576px) {
2464.    .govco-container {
2465.        padding-left: 0.5rem;
2466.        padding-right: 0.5rem;
2467.    }
2468.  
2469.    .news-section {
2470.        padding: 1rem 0;
2471.    }
2472.  
2473.    .featured-image {
2474.        height: 180px;
2475.    }
2476. }
2477. </style>
2478.        </div>
2479.  
2480.        <div id="tab-anti" class="tab-pane" role="tabpanel" hidden>
2481.            <div class="events-section govco-container">
2482.    <h2 class="events-title">Noticias Anticontrabando</h2>
2483.  
2484.    
2485.            <div class="events-container">
2486.            <!-- Evento destacado -->
2487.            <div class="featured-event">
2488.                <img src="http://putumayo.gov.co/storage/images/publications/new_9.jpg
2489. " alt="Sensibilización y Alianzas en Mocoa: La FND Lucha contra el Contrabando" class="featured-image">
2490.                <div class="featured-content">
2491.                    <h3 class="featured-title">Sensibilización y Alianzas en Mocoa: La FND Lucha contra el Contrabando</h3>
2492.                    <p class="featured-date">
2493.                        <strong>Publicación:</strong> 22/09/2025
2494.                    </p>
2495.                    <p class="featured-description">El Grupo Operativo Anticontrabando de la FND - Federación Nacional de
2496. Departamentos realizó una charla de sensibilización con sus aliados estratégicos,
2497. entre ellos el Ejército Nacional, en Mocoa....</p>
2498.                    <a href="http://putumayo.gov.co/publications/18?type=7" class="event-btn">Leer más</a>
2499.                </div>
2500.            </div>
2501.  
2502.            <!-- Lista lateral de eventos -->
2503.            <div class="events-list">
2504.                                    <div class="event-item">
2505.                        <img src="http://putumayo.gov.co/storage/images/publications/new_6.jpg
2506. " alt="El Grupo Operativo Anticontrabando de la FND" class="event-thumbnail">
2507.                        <div class="event-item-content">
2508.                            <a href="http://putumayo.gov.co/publications/15" class="event-item-title">El Grupo Operativo Anticontrabando de la FND</a>
2509.                            <p class="event-item-date">19/08/2025</p>
2510.                        </div>
2511.                    </div>
2512.                                    <div class="event-item">
2513.                        <img src="http://putumayo.gov.co/storage/images/publications/new_7.jpg
2514. " alt="Lucha contra el Contrabando en Putumayo: Operativos en el Alto Putumayo para Proteger la Salud" class="event-thumbnail">
2515.                        <div class="event-item-content">
2516.                            <a href="http://putumayo.gov.co/publications/16" class="event-item-title">Lucha contra el Contrabando en Putumayo: Operativos en el Alto Putumayo para Proteger la Salud</a>
2517.                            <p class="event-item-date">19/08/2025</p>
2518.                        </div>
2519.                    </div>
2520.                                    <div class="event-item">
2521.                        <img src="http://putumayo.gov.co/storage/images/publications/new_8.jpg
2522. " alt="Campaña anticontrabando en Santiago durante fiestas patronales" class="event-thumbnail">
2523.                        <div class="event-item-content">
2524.                            <a href="http://putumayo.gov.co/publications/17" class="event-item-title">Campaña anticontrabando en Santiago durante fiestas patronales</a>
2525.                            <p class="event-item-date">19/08/2025</p>
2526.                        </div>
2527.                    </div>
2528.                            </div>
2529.        </div>
2530.    
2531.    <div class="events-more">
2532.        <a href="http://putumayo.gov.co/publications/all?type=7" class="events-more-btn">Ver más noticias anticontrabando</a>
2533.    </div>
2534. </div>
2535.  
2536. <style>
2537. .events-section {
2538.    padding: 2rem 1rem;
2539.    margin: auto;
2540. }
2541.  
2542. .events-title {
2543.    font-size: 2rem;
2544.    font-weight: 700;
2545.    color: var(--govco-secondary-color);
2546.    text-align: center;
2547.    margin-bottom: 2rem;
2548. }
2549.  
2550. .events-container {
2551.    display: grid;
2552.    grid-template-columns: 2fr 1fr;
2553.    gap: 2rem;
2554.    align-items: flex-start;
2555. }
2556.  
2557. .featured-event {
2558.    background-color: var(--govco-white-color);
2559.    border-radius: var(--govco-border-radius);
2560.    box-shadow: var(--govco-box-shadow);
2561.    overflow: hidden;
2562.    display: flex;
2563.    flex-direction: column;
2564. }
2565.  
2566. .featured-image {
2567.    width: 100%;
2568.    height: 250px;
2569.    object-fit: cover;
2570. }
2571.  
2572. .featured-content {
2573.    padding: 1rem;
2574.    display: flex;
2575.    flex-direction: column;
2576.    justify-content: space-between;
2577.    height: 100%;
2578. }
2579.  
2580. .featured-title {
2581.    font-size: 1.4rem;
2582.    font-weight: bold;
2583.    color: var(--govco-secondary-color);
2584.    margin-bottom: 0.5rem;
2585. }
2586.  
2587. .featured-date {
2588.    font-size: 0.9rem;
2589.    color: var(--govco-tertiary-color);
2590.    margin-bottom: 0.8rem;
2591. }
2592.  
2593. .featured-description {
2594.    font-size: 0.95rem;
2595.    color: var(--govco-black-color);
2596.    flex-grow: 1;
2597. }
2598.  
2599. .event-btn {
2600.    margin-top: 1rem;
2601.    align-self: flex-start;
2602.    background-color: var(--govco-secondary-color);
2603.    color: var(--govco-white-color);
2604.    font-weight: 600;
2605.    padding: 0.5rem 1.2rem;
2606.    border-radius: var(--govco-border-radius);
2607.    text-decoration: none;
2608.    transition: background 0.3s ease;
2609. }
2610.  
2611. .event-btn:hover {
2612.    background-color: var(--govco-primary-color);
2613. }
2614.  
2615. .events-list {
2616.    display: flex;
2617.    flex-direction: column;
2618.    gap: 1rem;
2619. }
2620.  
2621. .event-item {
2622.    display: flex;
2623.    align-items: flex-start;
2624.    gap: 1rem;
2625.    background: var(--govco-white-color);
2626.    padding: 0.8rem;
2627.    border-radius: var(--govco-border-radius);
2628.    box-shadow: var(--govco-box-shadow);
2629. }
2630.  
2631. .event-thumbnail {
2632.    width: 70px;
2633.    height: 70px;
2634.    object-fit: cover;
2635.    border-radius: var(--govco-border-radius);
2636. }
2637.  
2638. .event-item-content {
2639.    flex: 1;
2640. }
2641.  
2642. .event-item-title {
2643.    font-size: 1rem;
2644.    font-weight: bold;
2645.    color: var(--govco-secondary-color);
2646.    text-decoration: none;
2647. }
2648.  
2649. .event-item-title:hover {
2650.    color: var(--govco-primary-color);
2651. }
2652.  
2653. .event-item-date {
2654.    font-size: 0.85rem;
2655.    color: var(--govco-tertiary-color);
2656.    margin-top: 0.25rem;
2657. }
2658.  
2659. .events-more {
2660.    text-align: center;
2661.    margin-top: 2rem;
2662. }
2663.  
2664. .events-more-btn {
2665.    background-color: var(--govco-secondary-color);
2666.    color: var(--govco-white-color);
2667.    padding: 0.7rem 1.5rem;
2668.    font-weight: bold;
2669.    border-radius: var(--govco-border-radius);
2670.    text-decoration: none;
2671.    transition: background 0.3s;
2672. }
2673.  
2674. .events-more-btn:hover {
2675.    background-color: var(--govco-primary-color);
2676. }
2677. </style>        </div>
2678.    </section>
2679.  
2680. <!--     <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fgobernaciondelputumayo%2F%3Flocale%3Des_LA&tabs=timeline&width=340&height=620&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="620" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
2681. -->
2682.    <div id="custom-carousel">
2683.    <h2>Enlaces de Interés</h2>
2684.    <p>Ingresa a los siguientes enlaces de interés de nuestro municipio</p>
2685.  
2686.    <div class="carousel-container">
2687.        <button id="carousel-prev">&#10094;</button>
2688.        <div class="carousel-slide-container">
2689.            <div class="carousel-slide-track">
2690.                <!-- Carousel Items -->
2691.                <div class="carousel-slide">
2692.                    <a href="https://www.postal.gov.co" target="_blank">
2693.                        <img src="/img/interest-links/0ea90-logopostal.png" alt="Postal">
2694.                    </a>
2695.                </div>
2696.                <div class="carousel-slide">
2697.                    <a href="https://www.colombiacompra.gov.co" target="_blank">
2698.                        <img src="/img/interest-links/1fbca-colombia_compra_eficiente.png" alt="Colombia Compra Eficiente">
2699.                    </a>
2700.                </div>
2701.                <div class="carousel-slide">
2702.                    <a href="https://www.mintic.gov.co" target="_blank">
2703.                        <img src="/img/interest-links/3c7bd-logo_del_ministerio_de_tecnologias_de_la_informacion_y_las_comunicaciones_de_colombia_2022-2026.png" alt="Ministerio de las Tecnologías">
2704.                    </a>
2705.                </div>
2706.                <div class="carousel-slide">
2707.                    <a href="https://www.presidencia.gov.co" target="_blank">
2708.                        <img src="/img/interest-links/8b3ef-presi.jpeg" alt="Presidencia de la República">
2709.                    </a>
2710.                </div>
2711.                <div class="carousel-slide">
2712.                    <a href="https://www.serviciodeempleo.gov.co" target="_blank">
2713.                        <img src="/img/interest-links/29fa9-logos_spe2024-40.png" alt="Servicio Público de Empleo">
2714.                    </a>
2715.                </div>
2716.                <div class="carousel-slide">
2717.                    <a href="https://www.colombia.co" target="_blank">
2718.                        <img src="/img/interest-links/60e60-asa07f5012f32278cd5c.png" alt="CO">
2719.                    </a>
2720.                </div>
2721.                <div class="carousel-slide">
2722.                    <a href="https://www.sisben.gov.co" target="_blank">
2723.                        <img src="/img/interest-links/24107-sisben.png" alt="Sisbén">
2724.                    </a>
2725.                </div>
2726.                <div class="carousel-slide">
2727.                    <a href="https://www.gov.co" target="_blank">
2728.                        <img src="/img/interest-links/a60d0-gov.png" alt="Gov.CO">
2729.                    </a>
2730.                </div>
2731.                <div class="carousel-slide">
2732.                    <a href="https://www.urnadecristal.gov.co" target="_blank">
2733.                        <img src="/img/interest-links/ae7ba-logo-urna.png" alt="Urna de Cristal">
2734.                    </a>
2735.                </div>
2736.                <div class="carousel-slide">
2737.                    <a href="https://www.funcionpublica.gov.co" target="_blank">
2738.                        <img src="/img/interest-links/af0d9-funcion-publica.png" alt="Función Pública">
2739.                    </a>
2740.                </div>
2741.                <div class="carousel-slide">
2742.                    <a href="https://www.metrologia.gov.co" target="_blank">
2743.                        <img src="/img/interest-links/ea995-hora.png" alt="Instituto Nacional de Metrología">
2744.                    </a>
2745.                </div>
2746.                <div class="carousel-slide">
2747.                    <a href="https://www.portalterritorial.gov.co" target="_blank">
2748.                        <img src="/img/interest-links/ee6cd-logoportal4.png" alt="Portal Territorial de Colombia">
2749.                    </a>
2750.                </div>
2751.                <!-- Fin de Carousel Items -->
2752.            </div>
2753.        </div>
2754.        <button id="carousel-next">&#10095;</button>
2755.    </div>
2756. </div>
2757.  
2758. <script>
2759. document.addEventListener('DOMContentLoaded', () => {
2760.    let currentSlide = 0;
2761.    const itemsToShow = 3; // Número de elementos visibles
2762.    const items = document.querySelectorAll('.carousel-slide');
2763.    const totalItems = items.length;
2764.    const track = document.querySelector('.carousel-slide-track');
2765.    
2766.    function updateSlidePosition() {
2767.        const slideWidth = items[0].offsetWidth;
2768.        track.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
2769.    }
2770.  
2771.    function nextSlide() {
2772.        if (currentSlide < totalItems - itemsToShow) {
2773.            currentSlide++;
2774.        } else {
2775.            currentSlide = 0; // Reinicia si llegamos al final
2776.        }
2777.        updateSlidePosition();
2778.    }
2779.  
2780.    function prevSlide() {
2781.        if (currentSlide > 0) {
2782.            currentSlide--;
2783.        } else {
2784.            currentSlide = totalItems - itemsToShow;
2785.        }
2786.        updateSlidePosition();
2787.    }
2788.  
2789.    // Asignar eventos a los botones
2790.    document.querySelector('#carousel-prev').addEventListener('click', prevSlide);
2791.    document.querySelector('#carousel-next').addEventListener('click', nextSlide);
2792.  
2793.    // Deslizamiento automático cada 5 segundos
2794.    let autoSlideInterval = setInterval(nextSlide, 5000);
2795.  
2796.    // Pausar el deslizamiento automático al pasar el ratón sobre el carrusel
2797.    track.addEventListener('mouseenter', () => clearInterval(autoSlideInterval));
2798.  
2799.    // Reanudar el deslizamiento automático cuando se quita el ratón
2800.    track.addEventListener('mouseleave', () => {
2801.        autoSlideInterval = setInterval(nextSlide, 5000);
2802.    });
2803.  
2804.    // Ajustar el tamaño de la ventana y redimensionar
2805.    window.addEventListener('resize', updateSlidePosition);
2806. });
2807. </script>
2808.  
2809. <style>
2810. #custom-carousel {
2811.    text-align: center;
2812.    padding: 20px;
2813. }
2814.  
2815. #custom-carousel h2 {
2816.    font-size: 2rem;
2817.    margin-bottom: 10px;
2818. }
2819.  
2820. #custom-carousel p {
2821.    font-size: 1.2rem;
2822.    margin-bottom: 20px;
2823. }
2824.  
2825. .carousel-container {
2826.    max-width: 1200px;
2827.    display: flex;
2828.    align-items: center;
2829.    justify-content: center;
2830.    position: relative;
2831.    width: 90%;
2832.    margin: 0 auto;
2833.    margin-bottom: 2rem;
2834. }
2835.  
2836. .carousel-slide-container {
2837.    overflow: hidden;
2838.    width: 100%;
2839.    height: auto;
2840. }
2841.  
2842. .carousel-slide-track {
2843.    display: flex;
2844.    transition: transform 0.5s ease;
2845.    justify-content: space-between; /* Ajusta el espaciado entre los elementos */
2846. }
2847.  
2848. .carousel-slide {
2849.    flex: 0 0 auto; /* Evitar que los elementos se encogan o crezcan */
2850.    width: 160px; /* Tamaño fijo para las imágenes */
2851.    padding: 0 15px; /* Añadir espacio alrededor de cada imagen */
2852.    box-sizing: border-box;
2853. }
2854.  
2855. .carousel-slide img {
2856.    width: 100%;
2857.    height: auto;
2858.    object-fit: contain;
2859. }
2860.  
2861. #carousel-prev, #carousel-next {
2862.    background-color: transparent;
2863.    border: none;
2864.    cursor: pointer;
2865.    font-size: 2rem;
2866.    position: absolute;
2867.    top: 50%;
2868.    transform: translateY(-50%);
2869.    z-index: 1;
2870.    padding: 0 20px;
2871. }
2872.  
2873. #carousel-prev {
2874.    left: 0;
2875.    margin-left: 10px;
2876.    color: var(--govco-secondary-color);
2877. }
2878.  
2879. #carousel-next {
2880.    right: 0;
2881.    margin-right: 10px;
2882.    color: var(--govco-secondary-color);
2883. }
2884. </style>
2885.                </main>
2886.            </div>
2887.        </div>
2888.  
2889.                    <footer class="footer-govco">
2890.    <div class="footer-top">
2891.        <div class="footer-column footer-column-logos">
2892.            <img src="/logos/logo_govco.png" alt="GOV.CO" class="footer-logo">
2893.            <img src="/logos/logo_vida.png" alt="Colombia Potencia de la Vida" class="footer-logo">
2894.            <img src="/logos/logo_co.svg" alt="CO Colombia" class="footer-logo-small">
2895.        </div>
2896.  
2897.        <div class="footer-column">
2898.            <h4>Gobernación del Putumayo</h4>
2899.            <p><strong>Dirección:</strong> Calle 8 # 7 - 40 Barrio Centro Mocoa - Putumayo, Colombia.</p>
2900.            <p><strong>Horarios de Atención:</strong></p>
2901.            <p>&bull; Atención Presencial: Lunes - Viernes de 8:00 am a 12:00 pm / 2:00 pm a 6:00 pm.</p>
2902.            <p>&bull; Atención Canales Virtuales: Lunes a Viernes de 8:00 am a 12:00 pm / 2:00 pm a 6:00 pm.</p>
2903.            <p><strong>Código Postal:</strong> 860001</p>
2904.        </div>
2905.  
2906.        <div class="footer-column">
2907.            <h4>Contacto</h4>
2908.            <p><strong>Teléfono:</strong></p>
2909.            <p>&bull; Mocoa: 608 4201515</p>
2910.            <p>&bull; Línea Anticorrupción: 608 4201515</p>
2911.            <p><strong>Correo Institucional:</strong> contactenos@putumayo.gov.co</p>
2912.            <p><strong>Correo correspondencia:</strong> notificaciones.judiciales@putumayo.gov.co - controlintenrodegestion@putumayo.gov.co</p>
2913.            <a href="/contact">Solicita una llamada</a> | <a href="/web-call">Llamada web</a> | <a href="/chat">Hablemos en línea</a>
2914.        </div>
2915.  
2916.        <div class="footer-column">
2917.            <h4>Acerca del sitio</h4>
2918.            <a href="/sitemap">Mapa del sitio</a>
2919.            <a href="/privacy">Políticas de privacidad</a>
2920.            <a href="/copyright">Políticas de derechos de autor</a>
2921.            <a href="/terms">Términos y condiciones</a>
2922.            <h4>Ayudas de accesibilidad</h4>
2923.            <a href="/accessibility">Centro de relevo</a>
2924.            <div class="social-icons">
2925.                <!--a href="https://twitter.com" target="_blank" rel="noopener noreferrer">Síguenos en Twitter</a-->
2926.                <a href="https://www.facebook.com/gobernaciondelputumayo" target="_blank" rel="noopener noreferrer">Síguenos en Facebook</a>
2927.            </div>
2928.        </div>
2929.    </div>
2930.  
2931.    <div class="footer-bottom">
2932.        <p id="local-time"></p>
2933.        
2934.        <p>@2025  - Gobernacion de Putumayo</p>
2935.        <p>Unidad de Gestion de Tecnologia</p>
2936.    </div>
2937. </footer>
2938.  
2939. <script>
2940.    function updateTime() {
2941.        const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'America/Bogota' };
2942.        const timeNow = new Intl.DateTimeFormat('es-CO', options).format(new Date());
2943.        document.getElementById('local-time').textContent = timeNow;
2944.    }
2945.  
2946.    setInterval(updateTime, 1000);
2947.    updateTime();
2948. </script>
2949.  
2950. <style scoped>
2951. .footer-govco {
2952.    background-color: #004884; /* Azul fuerte */
2953.    color: #FFFFFF;
2954.    padding: 30px 0;
2955.    font-family: Arial, sans-serif;
2956. }
2957.  
2958. .footer-top {
2959.    display: flex;
2960.    justify-content: space-between;
2961.    align-items: flex-start;
2962.    padding: 0 40px;
2963.    border-bottom: 4px solid #003F72; /* Línea de separación */
2964. }
2965.  
2966. .footer-column {
2967.    flex: 1;
2968.    max-width: 250px;
2969.    margin: 20px;
2970. }
2971.  
2972. .footer-column h4 {
2973.    font-size: 16px;
2974.    margin-bottom: 10px;
2975.    color: #FFFFFF;
2976.    font-weight: bold;
2977. }
2978.  
2979. .footer-column p,
2980. .footer-column a {
2981.    color: #FFFFFF;
2982.    font-size: 14px;
2983.    margin-bottom: 5px;
2984. }
2985.  
2986. .footer-column a {
2987.    text-decoration: none;
2988.    color: #FFFFFF;
2989. }
2990.  
2991. .footer-column a:hover {
2992.    color: #FFCC00; /* Color de resalto amarillo */
2993. }
2994.  
2995. /* Estilos para la columna de los logos */
2996. .footer-column-logos {
2997.    display: flex;
2998.    flex-direction: column;
2999.    align-items: center;
3000. }
3001.  
3002. .footer-logo {
3003.    width: 120px;
3004.    height: auto;
3005.    margin-bottom: 15px;
3006. }
3007.  
3008. .footer-logo-small {
3009.    width: 80px;
3010.    height: auto;
3011.    margin-bottom: 0;
3012. }
3013.  
3014. .social-icons a {
3015.    display: block;
3016.    margin-bottom: 5px;
3017. }
3018.  
3019. .footer-bottom {
3020.    text-align: center;
3021.    padding: 10px 0;
3022.    background-color: #004080; /* Azul oscuro */
3023. }
3024.  
3025. .footer-bottom p {
3026.    font-size: 14px;
3027.    color: #FFFFFF;
3028.    margin: 0;
3029. }
3030.  
3031. /* Media Queries para el footer en pantallas pequeñas */
3032. @media (max-width: 768px) {
3033.    .footer-top {
3034.        flex-direction: column;
3035.        padding: 0 20px;
3036.    }
3037.  
3038.    .footer-column {
3039.        max-width: 100%;
3040.        margin: 10px 0;
3041.        text-align: center;
3042.    }
3043.  
3044.    .footer-column-logos {
3045.        flex-direction: row;
3046.        justify-content: center;
3047.    }
3048.  
3049.    .footer-logo {
3050.        width: 80px;
3051.        margin-right: 10px;
3052.    }
3053.  
3054.    .social-icons {
3055.        display: flex;
3056.        justify-content: center;
3057.        flex-wrap: wrap;
3058.    }
3059.  
3060.    .social-icons a {
3061.        margin: 0 10px;
3062.    }
3063.  
3064.    .footer-bottom {
3065.        font-size: 12px;
3066.        padding: 10px 20px;
3067.    }
3068. }
3069.  
3070. /* Estilos para el modo de alto contraste */
3071. body.high-contrast .footer-govco {
3072.    background-color: #000; /* Fondo negro */
3073.    color: #fff;            /* Texto blanco */
3074. }
3075.  
3076. body.high-contrast .footer-govco a {
3077.    color: #0ff;            /* Enlaces en cian */
3078. }
3079.  
3080. body.high-contrast .footer-govco a:hover {
3081.    color: #fff;            /* Enlaces en blanco al pasar el cursor */
3082. }
3083.  
3084. body.high-contrast .footer-column h4 {
3085.    color: #fff;            /* Encabezados en blanco */
3086. }
3087.  
3088. body.high-contrast .footer-column p {
3089.    color: #fff;            /* Párrafos en blanco */
3090. }
3091.  
3092. body.high-contrast .footer-logo {
3093.    filter: invert(1);      /* Invertir colores de los logos */
3094. }
3095.  
3096. body.high-contrast .footer-bottom {
3097.    border-top: 1px solid #fff; /* Borde superior en blanco */
3098. }
3099.  
3100. body.high-contrast .footer-bottom p {
3101.    color: #fff;            /* Texto en blanco */
3102. }
3103.  
3104. body.high-contrast .social-icons a {
3105.    color: #0ff;            /* Iconos de redes sociales en cian */
3106. }
3107.  
3108. body.high-contrast .social-icons a:hover {
3109.    color: #fff;            /* Iconos en blanco al pasar el cursor */
3110. }
3111.  
3112. body.high-contrast .social-icons a img {
3113.    filter: invert(1);      /* Invertir colores de los iconos si son imágenes */
3114. }
3115.  
3116. /* Media Queries para el modo de alto contraste en pantallas pequeñas */
3117. @media (max-width: 768px) {
3118.    body.high-contrast .footer-top {
3119.        /* Mantiene los ajustes responsivos */
3120.    }
3121. }
3122. </style>
3123.                
3124.                <!-- Livewire Scripts -->
3125.  
3126. <script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false" ></script>
3127. <script data-turbo-eval="false" data-turbolinks-eval="false" >
3128.    if (window.livewire) {
3129.    console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
3130. }
3131.  
3132.    window.livewire = new Livewire();
3133.    window.livewire.devTools(true);
3134.    window.Livewire = window.livewire;
3135.    window.livewire_app_url = '';
3136.    window.livewire_token = 'SN2FZw2HSP2auqpdKrgjpLK2HkiwdXE4Zt29Ka6n';
3137.  
3138. /* Make sure Livewire loads first. */
3139. if (window.Alpine) {
3140.    /* Defer showing the warning so it doesn't get buried under downstream errors. */
3141.    document.addEventListener("DOMContentLoaded", function () {
3142.        setTimeout(function() {
3143.            console.warn("Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire\'s scripts are loaded before Alpine.\\n\\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js")
3144.        })
3145.    });
3146. }
3147.  
3148. /* Make Alpine wait until Livewire is finished rendering to do its thing. */
3149.    window.deferLoadingAlpine = function (callback) {
3150.        window.addEventListener('livewire:load', function () {
3151.            callback();
3152.        });
3153.    };
3154.  
3155.    let started = false;
3156.  
3157.    window.addEventListener('alpine:initializing', function () {
3158.        if (! started) {
3159.            window.livewire.start();
3160.  
3161.            started = true;
3162.        }
3163.    });
3164.  
3165.    document.addEventListener("DOMContentLoaded", function () {
3166.        if (! started) {
3167.            window.livewire.start();
3168.  
3169.            started = true;
3170.        }
3171.    });
3172. </script>
3173.                        <script>
3174.            function toggleSidebar() {
3175.                let sidebar = document.getElementById("sidebar");
3176.                let mainContent = document.getElementById("main-content");
3177.                let body = document.body;
3178.  
3179.                sidebar.classList.toggle("collapsed");
3180.                body.classList.toggle("sidebar-collapsed");
3181.  
3182.                // Ajustar el ancho del contenido dinámicamente
3183.                if (sidebar.classList.contains("collapsed")) {
3184.                    mainContent.style.width = "calc(100% - 80px)";
3185.                } else {
3186.                    mainContent.style.width = "calc(100% - 260px)";
3187.                }
3188.            }
3189.        </script>
3190.    </body>
3191. </html>
3192.  
3193. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
3194. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
3195. <script src="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.js"></script>