{"id":4585,"date":"2022-08-13T20:53:35","date_gmt":"2022-08-13T20:53:35","guid":{"rendered":"http:\/\/www.sacs.gob.ve\/site\/?page_id=4585"},"modified":"2026-10-29T15:06:21","modified_gmt":"2026-10-29T15:06:21","slug":"sistemas-en-lineas","status":"publish","type":"page","link":"https:\/\/www.sacs.gob.ve\/site\/sistemas-en-lineas\/","title":{"rendered":"Sistemas En Lineas"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4585\" class=\"elementor elementor-4585\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c352b5 e-flex e-con-boxed e-con e-parent\" data-id=\"7c352b5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c288b77 elementor-widget elementor-widget-html\" data-id=\"c288b77\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\" class=\"light\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>SACS - Sistemas Digitales en L\u00ednea<\/title>\n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            darkMode: 'class',\n            theme: {\n                extend: {\n                    colors: {\n                        sacs: {\n                            DEFAULT: '#152F60',\n                            dark: '#0d1f42',\n                            light: '#1e408a',\n                            accent: '#2563eb'\n                        }\n                    },\n                    fontFamily: {\n                        sans: ['Inter', 'system-ui', 'sans-serif']\n                    }\n                }\n            }\n        }\n    <\/script>\n    <!-- Google Fonts Inter -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n    <style>\n        body {\n            font-family: 'Inter', sans-serif;\n            transition: background-color 0.3s ease, color 0.3s ease;\n        }\n        \n        \/* Glassmorphism effects *\/\n        .glass-card {\n            background: rgba(255, 255, 255, 0.85);\n            backdrop-filter: blur(12px);\n            border: 1px solid rgba(21, 47, 96, 0.08);\n        }\n        .dark .glass-card {\n            background: rgba(15, 23, 42, 0.75);\n            backdrop-filter: blur(12px);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        \/* Subtle Hover Animations *\/\n        .card-hover {\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        .card-hover:hover {\n            transform: translateY(-6px);\n            box-shadow: 0 20px 30px -10px rgba(21, 47, 96, 0.15);\n        }\n        .dark .card-hover:hover {\n            box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(37, 99, 235, 0.2);\n        }\n\n        \/* Pulse glow for online badges *\/\n        @keyframes pulse-glow {\n            0%, 100% { opacity: 1; transform: scale(1); }\n            50% { opacity: 0.6; transform: scale(1.15); }\n        }\n        .animate-pulse-glow {\n            animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 dark:bg-slate-950 dark:text-slate-100 min-h-screen flex flex-col\">\n\n    <!-- Header \/ Navbar -->\n    <header class=\"sticky top-0 z-50 bg-[#152F60] text-white shadow-lg border-b border-blue-900\/40\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between\">\n            \n            <!-- Logo SACS Brand -->\n            <div class=\"flex items-center space-x-4\">\n                <div class=\"w-12 h-12 rounded-xl bg-white\/10 backdrop-blur-md flex items-center justify-center border border-white\/20 p-2 shadow-inner\">\n                    <!-- SVG Logo SACS Concept Shield -->\n                    <svg class=\"w-8 h-8 text-white\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\" \/>\n                    <\/svg>\n                <\/div>\n                <div>\n                    <h1 class=\"text-xl font-extrabold tracking-tight leading-none text-white flex items-center gap-2\">\n                        SACS <span class=\"text-xs bg-blue-500\/30 text-blue-200 border border-blue-400\/30 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider\">Digital<\/span>\n                    <\/h1>\n                    <p class=\"text-xs text-blue-200\/80 font-light mt-0.5\">Servicio Aut\u00f3nomo de Contralor\u00eda Sanitaria<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Top Controls (Theme & External Portal Link) -->\n            <div class=\"flex items-center space-x-3\">\n                <!-- Theme Switcher Toggle Button -->\n                <button id=\"themeToggle\" onclick=\"toggleTheme()\" class=\"p-2.5 rounded-xl bg-white\/10 hover:bg-white\/20 transition-all border border-white\/15 text-blue-100 hover:text-white flex items-center gap-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-white\/40\" title=\"Cambiar tema\">\n                    <!-- Sun Icon (shown in dark mode) -->\n                    <svg id=\"sunIcon\" class=\"w-5 h-5 hidden\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\" \/>\n                    <\/svg>\n                    <!-- Moon Icon (shown in light mode) -->\n                    <svg id=\"moonIcon\" class=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\" \/>\n                    <\/svg>\n                    <span id=\"themeText\" class=\"hidden sm:inline\">Modo Oscuro<\/span>\n                <\/button>\n\n                <!-- SACS Main Portal External Button -->\n                <a href=\"https:\/\/www.sacs.gob.ve\/site\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"hidden md:flex items-center space-x-2 bg-blue-600\/40 hover:bg-blue-600\/60 border border-blue-400\/30 text-white px-4 py-2 rounded-xl text-sm font-semibold transition-all shadow-sm hover:shadow\">\n                    <span>Portal Principal<\/span>\n                    <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" \/>\n                    <\/svg>\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- Hero Section -->\n    <section class=\"bg-gradient-to-b from-[#152F60] via-[#152F60]\/95 to-slate-50 dark:to-slate-950 text-white pt-10 pb-16 px-4 sm:px-6 lg:px-8 relative overflow-hidden\">\n        <!-- Background Ambient Shapes -->\n        <div class=\"absolute -top-24 -right-24 w-96 h-96 bg-blue-500\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\n        <div class=\"absolute top-1\/2 -left-24 w-80 h-80 bg-cyan-500\/10 rounded-full blur-3xl pointer-events-none\"><\/div>\n\n        <div class=\"max-w-7xl mx-auto relative z-10 text-center\">\n            <span class=\"inline-block px-3 py-1 bg-white\/10 backdrop-blur-md border border-white\/20 rounded-full text-xs font-semibold tracking-wider uppercase mb-3 text-blue-200\">\n                Plataforma \u00danica Digital\n            <\/span>\n            <p class=\"text-3xl sm:text-5xl font-black tracking-tight text-white max-w-3xl mx-auto leading-tight text-center\">\n    Sistemas Automatizados e Inocuidad Sanitaria\n<\/p>\n            <p class=\"mt-4 text-base sm:text-lg text-blue-100\/90 max-w-2xl mx-auto font-light\">\n                Acceso directo e instant\u00e1neo a las plataformas de registro, certificaci\u00f3n, autorizaciones e inspecci\u00f3n sanitaria nacional.\n            <\/p>\n\n            <!-- Search and Filter Bar -->\n            <div class=\"mt-8 max-w-3xl mx-auto bg-white\/10 dark:bg-slate-900\/80 backdrop-blur-md p-3 sm:p-4 rounded-2xl border border-white\/20 shadow-2xl flex flex-col md:flex-row items-center gap-3\">\n                <!-- Search Input -->\n                <div class=\"relative w-full flex-1\">\n                    <div class=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400\">\n                        <svg class=\"w-5 h-5 text-blue-200\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <input type=\"text\" id=\"searchInput\" oninput=\"filterSystems()\" placeholder=\"Buscar sistema por nombre, clave o tr\u00e1mite...\" class=\"w-full pl-11 pr-4 py-3 bg-white\/90 dark:bg-slate-800\/90 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-400 text-sm rounded-xl border border-slate-200 dark:border-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all\">\n                <\/div>\n\n                <!-- View Switcher Tabs -->\n                <div class=\"flex items-center bg-slate-200\/40 dark:bg-slate-800\/80 p-1 rounded-xl border border-white\/10 w-full md:w-auto justify-center\">\n                    <button id=\"btnGrid\" onclick=\"setView('grid')\" class=\"px-4 py-2 text-xs font-semibold rounded-lg flex items-center gap-2 transition-all bg-white dark:bg-slate-700 text-[#152F60] dark:text-white shadow-sm\">\n                        <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z\" \/>\n                        <\/svg>\n                        <span>Cards<\/span>\n                    <\/button>\n                    <button id=\"btnList\" onclick=\"setView('list')\" class=\"px-4 py-2 text-xs font-semibold rounded-lg flex items-center gap-2 transition-all text-blue-100 hover:text-white\">\n                        <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h16\" \/>\n                        <\/svg>\n                        <span>Lista<\/span>\n                    <\/button>\n                    <button id=\"btnTable\" onclick=\"setView('table')\" class=\"px-4 py-2 text-xs font-semibold rounded-lg flex items-center gap-2 transition-all text-blue-100 hover:text-white\">\n                        <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z\" \/>\n                        <\/svg>\n                        <span>Tabla<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Main Content Area -->\n    <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-grow -mt-6\">\n\n        <!-- Category Filters Pill Bar -->\n        <div class=\"flex items-center gap-2 overflow-x-auto pb-4 mb-6 no-scrollbar\">\n            <button onclick=\"filterCategory('all')\" class=\"cat-filter active-cat px-4 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all bg-[#152F60] text-white shadow-md\">\n                Todos los Sistemas\n            <\/button>\n            <button onclick=\"filterCategory('cosmeticos')\" class=\"cat-filter px-4 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800\">\n                Cosm\u00e9ticos (SIVERCOS)\n            <\/button>\n            <button onclick=\"filterCategory('establecimientos')\" class=\"cat-filter px-4 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800\">\n                Establecimientos (SIACVISA)\n            <\/button>\n            <button onclick=\"filterCategory('alimentos')\" class=\"cat-filter px-4 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800\">\n                Inocuidad Alimentaria\n            <\/button>\n            <button onclick=\"filterCategory('salud')\" class=\"cat-filter px-4 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800\">\n                Profesionales & Salud\n            <\/button>\n        <\/div>\n\n        <!-- System Counter & Status Header -->\n        <div class=\"flex items-center justify-between mb-6\">\n            <h3 class=\"text-lg font-bold text-slate-800 dark:text-slate-100 flex items-center gap-2\">\n                Sistemas Disponibles\n                <span id=\"systemCount\" class=\"text-xs bg-blue-100 dark:bg-blue-900\/50 text-[#152F60] dark:text-blue-300 font-bold px-2.5 py-0.5 rounded-full\">6<\/span>\n            <\/h3>\n            <span class=\"text-xs text-slate-500 dark:text-slate-400 flex items-center gap-1.5\">\n                <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse-glow\"><\/span>\n                Servidores Operativos\n            <\/span>\n        <\/div>\n\n        <!-- 1. GRID \/ CARDS VIEW (DEFAULT BENTO STYLE) -->\n        <div id=\"gridView\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n            <!-- Dynamic JS Injected Cards -->\n        <\/div>\n\n        <!-- 2. LIST VIEW -->\n        <div id=\"listView\" class=\"hidden space-y-3\">\n            <!-- Dynamic JS Injected List Items -->\n        <\/div>\n\n        <!-- 3. TABLE VIEW -->\n        <div id=\"tableView\" class=\"hidden overflow-x-auto rounded-2xl border border-slate-200 dark:border-slate-800 shadow-xl bg-white dark:bg-slate-900\">\n            <table class=\"w-full text-left text-sm\">\n                <thead class=\"bg-[#152F60] text-white text-xs uppercase tracking-wider\">\n                    <tr>\n                        <th class=\"p-4 font-semibold\">Sistema<\/th>\n                        <th class=\"p-4 font-semibold\">\u00c1rea Sanit\u00e1ria<\/th>\n                        <th class=\"p-4 font-semibold\">Descripci\u00f3n del Tr\u00e1mite<\/th>\n                        <th class=\"p-4 font-semibold\">Estado<\/th>\n                        <th class=\"p-4 font-semibold text-right\">Acci\u00f3n<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody id=\"tableBody\" class=\"divide-y divide-slate-200 dark:divide-slate-800\">\n                    <!-- Dynamic JS Injected Rows -->\n                <\/tbody>\n            <\/table>\n        <\/div>\n\n        <!-- Empty State Message -->\n        <div id=\"emptyState\" class=\"hidden text-center py-16\">\n            <div class=\"w-16 h-16 mx-auto mb-4 bg-slate-200 dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-400\">\n                <svg class=\"w-8 h-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.172 9.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n                <\/svg>\n            <\/div>\n            <h4 class=\"text-base font-bold text-slate-700 dark:text-slate-200\">No se encontraron sistemas<\/h4>\n            <p class=\"text-xs text-slate-500 dark:text-slate-400 mt-1\">Intenta con otros t\u00e9rminos de b\u00fasqueda o selecciona otra categor\u00eda.<\/p>\n        <\/div>\n\n    <\/main>\n\n    <!-- Footer -->\n    <footer class=\"bg-[#152F60] text-blue-200 text-xs border-t border-blue-900\/50 py-8 px-4 sm:px-6 lg:px-8 mt-12\">\n        <div class=\"max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4 text-center md:text-left\">\n            <div>\n                <p class=\"font-semibold text-white\">Servicio Aut\u00f3nomo de Contralor\u00eda Sanitaria (SACS)<\/p>\n                <p class=\"text-blue-300\/70 mt-0.5\">Ministerio del Poder Popular para la Salud \u2022 Rep\u00fablica Bolivariana de Venezuela<\/p>\n            <\/div>\n            <div class=\"flex items-center gap-6\">\n                <a href=\"https:\/\/www.sacs.gob.ve\/site\/\" target=\"_blank\" class=\"hover:text-white transition-colors\">Portal Oficial<\/a>\n                <a href=\"#\" onclick=\"alert('Atenci\u00f3n al Usuario SACS: atencion@sacs.gob.ve')\" class=\"hover:text-white transition-colors\">Soporte T\u00e9cnico<\/a>\n                <span class=\"text-blue-400\/50\">v3.5 - 2026<\/span>\n            <\/div>\n        <\/div>\n    <\/footer>\n\n    <!-- JavaScript Data and Controller Logic -->\n    <script>\n        \/\/ Array of Systems Data with thematic SVGs and Accent Colors\n        const systemsData = [\n            {\n                id: 'sivercos',\n                code: 'SIVERCOS',\n                title: 'SIVERCOS',\n                subtitle: 'Sistema Venezolano de Registro de Cosm\u00e9ticos',\n                category: 'cosmeticos',\n                categoryLabel: 'Cosm\u00e9ticos',\n                description: 'Registro sanitario, notificaci\u00f3n obligatoria y control de productos cosm\u00e9ticos, de higiene personal y de hogar.',\n                url: 'https:\/\/sistemas.sacs.gob.ve\/sivercos',\n                status: 'En L\u00ednea',\n                themeColor: '#ec4899', \/\/ Pink Magenta Modern\n                badgeBg: 'bg-pink-100 dark:bg-pink-950\/50 text-pink-700 dark:text-pink-300 border-pink-300 dark:border-pink-800',\n                btnBg: 'bg-gradient-to-r from-pink-600 to-rose-600 hover:from-pink-700 hover:to-rose-700',\n                \/\/ Custom Modern SVG Lipstick Icon (Stylized based on request)\n                iconSvg: `\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" class=\"w-8 h-8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M12 2L15 5V10H9V5L12 2Z\" fill=\"#f43f5e\" fill-opacity=\"0.25\" stroke=\"#f43f5e\" \/>\n                    <rect x=\"8\" y=\"10\" width=\"8\" height=\"4\" rx=\"1\" fill=\"#e11d48\" stroke=\"#be123c\" \/>\n                    <rect x=\"7\" y=\"14\" width=\"10\" height=\"8\" rx=\"2\" fill=\"#881337\" stroke=\"#9f1239\" \/>\n                    <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"5\" stroke=\"#f43f5e\" stroke-dasharray=\"1 1\"\/>\n                    <circle cx=\"12\" cy=\"18\" r=\"1\" fill=\"#ffffff\"\/>\n                <\/svg>`\n            },\n            {\n                id: 'siacvisa',\n                code: 'SIACVISA',\n                title: 'SIACVISA',\n                subtitle: 'Sistema Informaci\u00f3n Automatizado de Control y Vigilancia Sanitaria',\n                category: 'establecimientos',\n                categoryLabel: 'Infraestructura Sanitaria',\n                description: 'Sistema de inspecci\u00f3n y permiso de funcionamiento sanitario para establecimientos de salud, comerciales y empresas.',\n                url: 'https:\/\/sistemas.sacs.gob.ve\/siacvisa\/',\n                status: 'En L\u00ednea',\n                themeColor: '#06b6d4', \/\/ Cyan Tech\n                badgeBg: 'bg-cyan-100 dark:bg-cyan-950\/50 text-cyan-700 dark:text-cyan-300 border-cyan-300 dark:border-cyan-800',\n                btnBg: 'bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700',\n                \/\/ Custom Building \/ Health Facility SVG Icon\n                iconSvg: `\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" class=\"w-8 h-8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <rect x=\"4\" y=\"3\" width=\"16\" height=\"18\" rx=\"2\" fill=\"#06b6d4\" fill-opacity=\"0.15\" stroke=\"#0891b2\" \/>\n                    <path d=\"M9 21V17H15V21\" stroke=\"#0891b2\" \/>\n                    <path d=\"M9 7H15M9 11H15\" stroke=\"#0e7490\" \/>\n                    <path d=\"M12 4V8M10 6H14\" stroke=\"#0284c7\" stroke-width=\"2\" \/>\n                <\/svg>`\n            },\n            {\n                id: 'siacsv2',\n                code: 'SIACSv2',\n                title: 'SIACSV2',\n                subtitle: 'Sistema de Informaci\u00f3n Automatizado de Contralor\u00eda Sanitaria',\n                category: 'alimentos',\n                categoryLabel: 'Control Alimentario',\n                description: 'Certificaci\u00f3n de inocuidad alimentaria, registro de productos de consumo masivo y permisos de importaci\u00f3n\/exportaci\u00f3n.',\n                url: 'https:\/\/sistemas.sacs.gob.ve\/siacsv2\/',\n                status: 'En L\u00ednea',\n                themeColor: '#10b981', \/\/ Emerald Green \/ Gold\n                badgeBg: 'bg-emerald-100 dark:bg-emerald-950\/50 text-emerald-700 dark:text-emerald-300 border-emerald-300 dark:border-emerald-800',\n                btnBg: 'bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700',\n                \/\/ Custom Shield Food Safety (Apple + Shield) SVG Icon\n                iconSvg: `\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" class=\"w-8 h-8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\" fill=\"#10b981\" fill-opacity=\"0.15\" stroke=\"#059669\" \/>\n                    <path d=\"M12 11c-1.5 0-2.5-1-2.5-2.5 0-1.5 1-2.5 2.5-2.5s2.5 1 2.5 2.5c0 1.5-1 2.5-2.5 2.5z\" fill=\"#34d399\" \/>\n                    <path d=\"M12 6c0-1.5 1-2 2-2\" stroke=\"#047857\" \/>\n                    <path d=\"M9 15l2 2 4-4\" stroke=\"#10b981\" stroke-width=\"2\" \/>\n                <\/svg>`\n            },\n            {\n                id: 'profesionales',\n                code: 'PROFESIONALES',\n                title: 'Registro de Profesionales',\n                subtitle: 'Certificaci\u00f3n del Personal de Salud',\n                category: 'salud',\n                categoryLabel: 'Personal Sanitario',\n                description: 'Matriculaci\u00f3n, validaci\u00f3n de t\u00edtulos y credenciales de m\u00e9dicos, farmac\u00e9uticos, enfermeros y profesionales de la salud.',\n                url: 'https:\/\/sistemas.sacs.gob.ve\/titulos\/contraloria\/profesionales\/',\n                status: 'En L\u00ednea',\n                themeColor: '#2563eb', \/\/ Royal Blue Medical\n                badgeBg: 'bg-blue-100 dark:bg-blue-950\/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-800',\n                btnBg: 'bg-gradient-to-r from-blue-700 to-indigo-700 hover:from-blue-800 hover:to-indigo-800',\n                \/\/ Custom Stethoscope & Doctor Badge SVG Icon\n                iconSvg: `\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" class=\"w-8 h-8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M4.8 2.4A2.4 2.4 0 002.4 4.8v4.8a7.2 7.2 0 0014.4 0V4.8a2.4 2.4 0 00-2.4-2.4\" stroke=\"#2563eb\" \/>\n                    <circle cx=\"19.2\" cy=\"14.4\" r=\"2.4\" fill=\"#3b82f6\" \/>\n                    <path d=\"M9.6 16.8v2.4a3.6 3.6 0 007.2 0v-4.8\" stroke=\"#1d4ed8\" \/>\n                    <path d=\"M12 7h4M14 5v4\" stroke=\"#2563eb\" stroke-width=\"2\" \/>\n                <\/svg>`\n            },\n            {\n                id: 'farmacia',\n                code: 'CENSO',\n                title: 'Censo Nacional Automatizado',\n                subtitle: 'Establecimientos de Salud y Similares',\n                category: 'salud',\n                categoryLabel: 'Establecimientos de Salud',\n                description: 'Inscripci\u00f3n al Censo de Establecimientos de Salud',\n                url: 'https:\/\/sistemas.sacs.gob.ve\/titulos\/censo_establecimientos\/modulos\/inscripcion_censo\/',\n                status: 'En L\u00ednea',\n                themeColor: '#8b5cf6', \/\/ Violet Modern\n                badgeBg: 'bg-purple-100 dark:bg-purple-950\/50 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-800',\n                btnBg: 'bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700',\n                \/\/ Custom Hospital \/ Health Facility SVG Icon\n                iconSvg: `\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" class=\"w-8 h-8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M3 21h18\" stroke=\"#7c3aed\" \/>\n                    <path d=\"M5 21V7l7-4 7 4v14\" fill=\"#8b5cf6\" fill-opacity=\"0.15\" stroke=\"#7c3aed\" \/>\n                    <path d=\"M10 21v-4h4v4\" stroke=\"#6d28d9\" \/>\n                    <path d=\"M12 9v5M9.5 11.5h5\" stroke=\"#8b5cf6\" stroke-width=\"2\" \/>\n                <\/svg>`\n            },\n            {\n                id: 'transporte',\n                code: 'CLV',\n                title: 'CLV',\n                subtitle: '',\n                category: 'establecimientos',\n                categoryLabel: 'Certificaci\u00f3n',\n                description: 'Certificaci\u00f3n Electr\u00f3nicos de Libre Venta.',\n                url: 'https:\/\/sistemas.sacs.gob.ve\/titulos\/clv_sacs\/modulos\/empresas\/',\n                status: 'En L\u00ednea',\n                themeColor: '#f59e0b', \/\/ Amber \/ Gold\n                badgeBg: 'bg-amber-100 dark:bg-amber-950\/50 text-amber-700 dark:text-amber-300 border-amber-300 dark:border-amber-800',\n                btnBg: 'bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700',\n                \/\/ Custom Certificate \/ Stamp SVG Icon\n                iconSvg: `\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" class=\"w-8 h-8\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M15 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7l-5-5z\" fill=\"#f59e0b\" fill-opacity=\"0.15\" stroke=\"#d97706\" \/>\n                    <path d=\"M14 2v4a1 1 0 001 1h4\" stroke=\"#d97706\" \/>\n                    <path d=\"M8 10h8M8 14h5\" stroke=\"#b45309\" stroke-width=\"1.5\" \/>\n                    <circle cx=\"16\" cy=\"16\" r=\"3\" fill=\"#f59e0b\" stroke=\"#d97706\" \/>\n                    <path d=\"M15 18.5l-1 2.5 2-1 2 1-1-2.5\" stroke=\"#b45309\" \/>\n                <\/svg>`\n            }\n        ];\n\n        \/\/ State Management\n        let currentView = 'grid'; \/\/ 'grid' | 'list' | 'table'\n        let currentCategory = 'all';\n        let searchQuery = '';\n\n        \/\/ DOM Load Initializer\n        document.addEventListener('DOMContentLoaded', () => {\n            renderSystems();\n            initTheme();\n        });\n\n        \/\/ Theme Toggle Logic\n        function initTheme() {\n            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n                document.documentElement.classList.add('dark');\n            } else {\n                document.documentElement.classList.remove('dark');\n            }\n            updateThemeUI();\n        }\n\n        function toggleTheme() {\n            document.documentElement.classList.toggle('dark');\n            updateThemeUI();\n        }\n\n        function updateThemeUI() {\n            const isDark = document.documentElement.classList.contains('dark');\n            const sunIcon = document.getElementById('sunIcon');\n            const moonIcon = document.getElementById('moonIcon');\n            const themeText = document.getElementById('themeText');\n\n            if (isDark) {\n                sunIcon.classList.remove('hidden');\n                moonIcon.classList.add('hidden');\n                themeText.textContent = 'Modo Claro';\n            } else {\n                sunIcon.classList.add('hidden');\n                moonIcon.classList.remove('hidden');\n                themeText.textContent = 'Modo Oscuro';\n            }\n        }\n\n        \/\/ View Switching Controller\n        function setView(view) {\n            currentView = view;\n            \n            \/\/ Buttons UI state\n            const btnGrid = document.getElementById('btnGrid');\n            const btnList = document.getElementById('btnList');\n            const btnTable = document.getElementById('btnTable');\n\n            [btnGrid, btnList, btnTable].forEach(btn => {\n                btn.className = \"px-4 py-2 text-xs font-semibold rounded-lg flex items-center gap-2 transition-all text-blue-100 hover:text-white\";\n            });\n\n            const activeClass = \"px-4 py-2 text-xs font-semibold rounded-lg flex items-center gap-2 transition-all bg-white dark:bg-slate-700 text-[#152F60] dark:text-white shadow-sm\";\n\n            if (view === 'grid') btnGrid.className = activeClass;\n            if (view === 'list') btnList.className = activeClass;\n            if (view === 'table') btnTable.className = activeClass;\n\n            \/\/ Display containers\n            document.getElementById('gridView').classList.toggle('hidden', view !== 'grid');\n            document.getElementById('listView').classList.toggle('hidden', view !== 'list');\n            document.getElementById('tableView').classList.toggle('hidden', view !== 'table');\n\n            renderSystems();\n        }\n\n        \/\/ Filtering Logic\n        function filterCategory(cat) {\n            currentCategory = cat;\n            \n            \/\/ UI Button Active Classes\n            const buttons = document.querySelectorAll('.cat-filter');\n            buttons.forEach(btn => {\n                btn.classList.remove('bg-[#152F60]', 'text-white', 'shadow-md');\n                btn.classList.add('bg-white', 'dark:bg-slate-900', 'text-slate-600', 'dark:text-slate-300');\n            });\n\n            event.currentTarget.classList.remove('bg-white', 'dark:bg-slate-900', 'text-slate-600', 'dark:text-slate-300');\n            event.currentTarget.classList.add('bg-[#152F60]', 'text-white', 'shadow-md');\n\n            renderSystems();\n        }\n\n        function filterSystems() {\n            searchQuery = document.getElementById('searchInput').value.toLowerCase().trim();\n            renderSystems();\n        }\n\n        \/\/ Main Render Function\n        function renderSystems() {\n            const filtered = systemsData.filter(sys => {\n                const matchesCategory = currentCategory === 'all' || sys.category === currentCategory;\n                const matchesSearch = sys.title.toLowerCase().includes(searchQuery) ||\n                                      sys.subtitle.toLowerCase().includes(searchQuery) ||\n                                      sys.description.toLowerCase().includes(searchQuery) ||\n                                      sys.code.toLowerCase().includes(searchQuery);\n                return matchesCategory && matchesSearch;\n            });\n\n            document.getElementById('systemCount').textContent = filtered.length;\n\n            const emptyState = document.getElementById('emptyState');\n            if (filtered.length === 0) {\n                emptyState.classList.remove('hidden');\n                document.getElementById('gridView').innerHTML = '';\n                document.getElementById('listView').innerHTML = '';\n                document.getElementById('tableBody').innerHTML = '';\n                return;\n            } else {\n                emptyState.classList.add('hidden');\n            }\n\n            if (currentView === 'grid') renderGrid(filtered);\n            if (currentView === 'list') renderList(filtered);\n            if (currentView === 'table') renderTable(filtered);\n        }\n\n        \/\/ 1. Render Grid Cards\n        function renderGrid(data) {\n            const container = document.getElementById('gridView');\n            container.innerHTML = data.map(sys => `\n                <div class=\"glass-card card-hover rounded-2xl p-6 flex flex-col justify-between relative overflow-hidden group\">\n                    <!-- Top Gradient Line Accent -->\n                    <div class=\"absolute top-0 left-0 right-0 h-1.5\" style=\"background-color: ${sys.themeColor}\"><\/div>\n\n                    <div>\n                        <!-- Header Card -->\n                        <div class=\"flex items-start justify-between gap-4 mb-4\">\n                            <div class=\"p-3 rounded-2xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700\/60 group-hover:scale-110 transition-transform\">\n                                ${sys.iconSvg}\n                            <\/div>\n                            <span class=\"px-2.5 py-1 text-[11px] font-bold rounded-full border flex items-center gap-1.5 ${sys.badgeBg}\">\n                                <span class=\"w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse\"><\/span>\n                                ${sys.status}\n                            <\/span>\n                        <\/div>\n\n                        <!-- Title & Subtitle -->\n                        <div class=\"mb-3\">\n                            <span class=\"text-[10px] font-extrabold uppercase tracking-widest text-slate-400 dark:text-slate-500 block mb-1\">${sys.categoryLabel}<\/span>\n                            <h4 class=\"text-xl font-black text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors\">\n                                ${sys.title}\n                            <\/h4>\n                            <p class=\"text-xs font-semibold text-slate-500 dark:text-slate-400 mt-0.5\">${sys.subtitle}<\/p>\n                        <\/div>\n\n                        <!-- Description -->\n                        <p class=\"text-xs text-slate-600 dark:text-slate-300 leading-relaxed mb-6\">\n                            ${sys.description}\n                        <\/p>\n                    <\/div>\n\n                    <!-- Action Button -->\n                    <a href=\"${sys.url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"w-full ${sys.btnBg} text-white text-xs font-bold py-3 px-4 rounded-xl flex items-center justify-center space-x-2 shadow-md hover:shadow-lg transition-all group-hover:translate-x-0.5\">\n                        <span>Acceder al Sistema<\/span>\n                        <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\" \/>\n                        <\/svg>\n                    <\/a>\n                <\/div>\n            `).join('');\n        }\n\n        \/\/ 2. Render List View\n        function renderList(data) {\n            const container = document.getElementById('listView');\n            container.innerHTML = data.map(sys => `\n                <div class=\"glass-card rounded-2xl p-4 sm:p-5 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 hover:border-blue-500\/40 transition-all\">\n                    <div class=\"flex items-center gap-4\">\n                        <div class=\"p-3 rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shrink-0\">\n                            ${sys.iconSvg}\n                        <\/div>\n                        <div>\n                            <div class=\"flex items-center gap-2\">\n                                <h4 class=\"text-base font-bold text-slate-900 dark:text-white\">${sys.title}<\/h4>\n                                <span class=\"text-[10px] bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-400 px-2 py-0.5 rounded font-mono\">${sys.code}<\/span>\n                            <\/div>\n                            <p class=\"text-xs text-slate-500 dark:text-slate-400 mt-0.5\">${sys.description}<\/p>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"flex items-center gap-3 w-full sm:w-auto justify-between sm:justify-end border-t sm:border-t-0 pt-3 sm:pt-0 border-slate-200 dark:border-slate-800\">\n                        <span class=\"px-2.5 py-1 text-[10px] font-bold rounded-full border ${sys.badgeBg}\">\n                            ${sys.status}\n                        <\/span>\n                        <a href=\"${sys.url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"${sys.btnBg} text-white text-xs font-bold py-2.5 px-4 rounded-xl flex items-center gap-2 shadow hover:opacity-90 transition-all\">\n                            <span>Ingresar<\/span>\n                            <svg class=\"w-3.5 h-3.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" \/>\n                            <\/svg>\n                        <\/a>\n                    <\/div>\n                <\/div>\n            `).join('');\n        }\n\n        \/\/ 3. Render Table View\n        function renderTable(data) {\n            const container = document.getElementById('tableBody');\n            container.innerHTML = data.map(sys => `\n                <tr class=\"hover:bg-slate-50 dark:hover:bg-slate-800\/50 transition-colors\">\n                    <td class=\"p-4 font-bold text-slate-900 dark:text-white flex items-center gap-3\">\n                        <div class=\"p-1.5 rounded-lg bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700\">\n                            ${sys.iconSvg}\n                        <\/div>\n                        <div>\n                            <div>${sys.title}<\/div>\n                            <div class=\"text-[10px] text-slate-400 font-normal\">${sys.code}<\/div>\n                        <\/div>\n                    <\/td>\n                    <td class=\"p-4 text-xs font-medium text-slate-600 dark:text-slate-300\">\n                        ${sys.categoryLabel}\n                    <\/td>\n                    <td class=\"p-4 text-xs text-slate-500 dark:text-slate-400 max-w-xs\">\n                        ${sys.description}\n                    <\/td>\n                    <td class=\"p-4\">\n                        <span class=\"inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold border ${sys.badgeBg}\">\n                            ${sys.status}\n                        <\/span>\n                    <\/td>\n                    <td class=\"p-4 text-right\">\n                        <a href=\"${sys.url}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-1.5 ${sys.btnBg} text-white text-xs font-bold py-1.5 px-3 rounded-lg shadow-sm hover:shadow transition-all\">\n                            <span>Abrir<\/span>\n                            <svg class=\"w-3 h-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" \/>\n                            <\/svg>\n                        <\/a>\n                    <\/td>\n                <\/tr>\n            `).join('');\n        }\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SACS &#8211; Sistemas Digitales en L\u00ednea SACS Digital Servicio Aut\u00f3nomo de Contralor\u00eda Sanitaria Modo Oscuro Portal Principal Plataforma \u00danica Digital Sistemas Automatizados e Inocuidad Sanitaria Acceso directo e instant\u00e1neo a las plataformas de registro, certificaci\u00f3n, autorizaciones e inspecci\u00f3n sanitaria nacional. Cards Lista Tabla Todos los Sistemas Cosm\u00e9ticos (SIVERCOS) Establecimientos (SIACVISA) Inocuidad Alimentaria Profesionales &#038; Salud&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":[],"rop_publish_now_history":[],"rop_publish_now_status":"pending","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-4585","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sacs.gob.ve\/site\/wp-json\/wp\/v2\/pages\/4585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sacs.gob.ve\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sacs.gob.ve\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sacs.gob.ve\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sacs.gob.ve\/site\/wp-json\/wp\/v2\/comments?post=4585"}],"version-history":[{"count":339,"href":"https:\/\/www.sacs.gob.ve\/site\/wp-json\/wp\/v2\/pages\/4585\/revisions"}],"predecessor-version":[{"id":19285,"href":"https:\/\/www.sacs.gob.ve\/site\/wp-json\/wp\/v2\/pages\/4585\/revisions\/19285"}],"wp:attachment":[{"href":"https:\/\/www.sacs.gob.ve\/site\/wp-json\/wp\/v2\/media?parent=4585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}