:root {

            --primary-color: #1e3c72;

            --secondary-color: #2a5298;

            --accent-color: #667eea;

            --light-color: #f8f9fa;

            --dark-color: #343a40;

        }

        

        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background-color: #f5f7fa;

            color: #333;

            line-height: 1.6;

        }

        

        .big-font {

            font-size: 1.1rem;

        }

        

        .light {

            font-weight: 300;

        }

        

        .bordered {

            border-bottom: 2px solid var(--accent-color);

            padding-bottom: 10px;

            margin-bottom: 30px;

        }

        

        .main-title {

            color: var(--primary-color);

            font-size: 2.5rem;

            margin-top: 20px;

        }

        

        .main-title span {

            color: var(--accent-color);

            font-weight: 600;

        }

        

        .parrafo {

            text-align: justify;

            font-size: 1.1rem;

        }

        

        .img-rounded {

            border-radius: 10px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

        }

        

        /* Estilos para las pestañas verticales */

        .vertical-tabs-container {

            display: flex;

            margin: 40px 0;

            background: white;

            border-radius: 15px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

            overflow: hidden;

        }

        

        .vertical-tabs {

            width: 300px;

            background: linear-gradient(135deg, #2B96CC 0%, var(--secondary-color) 100%);

            padding: 20px 0;

            

        }

        

        .vertical-tab {

            padding: 15px 20px;

            color: white;

            cursor: pointer;

            transition: all 0.3s ease;

            border-left: 4px solid transparent;

            display: flex;

            align-items: center;

            gap: 15px;

        }

        

        .vertical-tab:hover {

            background: rgba(255, 255, 255, 0.1);

        }

        

        .vertical-tab.active {

            background: rgba(255, 255, 255, 0.15);

            border-left: 4px solid #38408d;

        }

        

        .vertical-tab-number {

            background: var(--accent-color);

            width: 30px;

            height: 30px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: bold;

        }

        

        .vertical-tab-title {

            flex: 1;

            font-size: 1rem;

        }

        

        .vertical-tab-content {

            flex: 1;

            padding: 30px;

            display: none;

        }

        

        .vertical-tab-content.active {

            display: block;

            animation: fadeIn 0.5s ease;

        }

        

        @keyframes fadeIn {

            from { opacity: 0; transform: translateY(10px); }

            to { opacity: 1; transform: translateY(0); }

        }

        

        .tab-title {

            color: var(--primary-color);

            margin-bottom: 20px;

            font-size: 1.8rem;

            border-bottom: 2px solid var(--accent-color);

            padding-bottom: 10px;

        }

        

        .tab-description {

            margin-bottom: 25px;

            font-size: 1.1rem;

        }

        

        .tab-features {

            margin-bottom: 25px;

        }

        

        .tab-features h4 {

            color: var(--secondary-color);

            margin-bottom: 15px;

        }

        

        .tab-features ul {

            padding-left: 20px;

        }

        

        .tab-features li {

            margin-bottom: 10px;

            position: relative;

        }

        

        .tab-features li:before {

            content: "•";

            color: var(--accent-color);

            font-weight: bold;

            position: absolute;

            left: -15px;

        }

        

        .tab-actions {

            display: flex;

            gap: 15px;

            flex-wrap: wrap;

        }

        

        .tab-btn {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 10px 20px;

            background: var(--primary-color);

            color: white;

            text-decoration: none;

            border-radius: 30px;

            font-weight: 600;

            transition: all 0.3s ease;

            border: none;

        }

        

        .tab-btn:hover {

            background: var(--primary-color);

            color: white;

            transform: translateY(-3px);

            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);

        }

        

        .tab-btn-secondary {

            background: #2a63a2;

            border: 2px solid var(--accent-color);

            color: #fff;

        }

        

        .tab-btn-secondary:hover {

            background: #8fcfe8;

            color: #000;

        }

        

        /* Estilos para el carrusel */

        .image-carousel .item {

            text-align: center;

        }

        

        /* Responsive */

        @media (max-width: 992px) {

            .vertical-tabs-container {

                flex-direction: column;

            }

            

            .vertical-tabs {

                width: 100%;

                display: flex;

                flex-wrap: wrap;

                padding: 10px;

            }

            

            .vertical-tab {

                flex: 1 0 45%;

                border-left: none;

                border-bottom: 3px solid transparent;

                justify-content: center;

                text-align: center;

                flex-direction: column;

                gap: 8px;

                padding: 10px 5px;

            }

            

            .vertical-tab.active {

                border-left: none;

                border-bottom: 3px solid var(--accent-color);

            }

            

            .vertical-tab-title {

                font-size: 0.9rem;

            }

        }

        

        @media (max-width: 576px) {

            .vertical-tab {

                flex: 1 0 100%;

            }

            

            .main-title {

                font-size: 2rem;

            }

            

            .tab-actions {

                flex-direction: column;

            }

            

            .tab-btn {

                justify-content: center;

            }

        }

        

        /* table responsive */

        

        /* The Modal (background) */

            .modal {

              display: none; /* Hidden by default */

              position: fixed; /* Stay in place */

              z-index: 1; /* Sit on top */

              left: 0;

              top: 0;

              width: 100%; /* Full width */

              height: 100%; /* Full height */

              overflow: auto; /* Enable scroll if needed */

              background-color: rgb(0,0,0); /* Fallback color */

              background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

            }

            

            /* Modal Content/Box */

            .modal-content {

              background-color: #fefefe;

              margin: 15% auto; /* 15% from the top and centered */

              padding: 10px;

              border: 1px solid #888;

              width: 50%; /* Could be more or less, depending on screen size */

            }

            

            /* The Close Button */

            .close {

              color: #aaa;

              float: right;

              font-size: 28px;

              font-weight: bold;

            }

            

            .close:hover,

            .close:focus {

              color: black;

              text-decoration: none;

              cursor: pointer;

            }

            .paragraph {

                line-height: 2.0; 

                width:100%; 

                text-align:justify;

                

            }

            

            /*---------------------------------------------*/

            /*      estilos de calendario participacion    */

            /*--------------------------------------------*/

            

            .calendario-hitos {

              background: #f9f9f9;

              padding: 2rem;

              border-radius: 12px;

              box-shadow: 0 2px 6px rgba(0,0,0,0.1);

              font-family: "Segoe UI", sans-serif;

            }

            .calendario-hitos h2 {

              color: #005b7f;

              text-align: center;

              margin-bottom: 1rem;

            }

            .calendario-hitos p {

              text-align: justify;

              margin-bottom: 1.5rem;

              color: #333;

            }

            .tabla-calendario table {

              width: 100%;

              border-collapse: collapse;

            }

            .tabla-calendario th {

              background-color: #2b88c2;

              color: #fff;

              padding: 0.8rem;

              text-align: left;

            }

            .tabla-calendario td {

              padding: 0.8rem;

              border-bottom: 1px solid #ddd;

            }

            .tabla-calendario tr:nth-child(even) {

              background-color: #f2f2f2;

            }

            .boton-descarga {

              text-align: center;

              margin-top: 1.5rem;

            }

            .boton-descarga button {

              background-color: #0078d7;

              color: #fff;

              border: none;

              padding: 0.8rem 1.2rem;

              border-radius: 8px;

              cursor: pointer;

              font-size: 1rem;

              transition: background-color 0.3s ease;

            }

            .boton-descarga button:hover {

              background-color: #005a9e;

            }

            @media (max-width: 768px) {

              .tabla-calendario table, .tabla-calendario thead, .tabla-calendario tbody, .tabla-calendario th, .tabla-calendario td, .tabla-calendario tr {

                display: block;

              }

              .tabla-calendario tr {

                margin-bottom: 1rem;

                background-color: #fff;

                border-radius: 8px;

                box-shadow: 0 1px 4px rgba(0,0,0,0.1);

              }

              .tabla-calendario td {

                padding-left: 50%;

                position: relative;

              }

              .tabla-calendario td::before {

                position: absolute;

                top: 0;

                left: 0;

                width: 45%;

                padding-left: 0.5rem;

                font-weight: bold;

                color: #005b7f;

              }

              .tabla-calendario td:nth-of-type(1)::before { content: "Etapa / Actividad"; }

              .tabla-calendario td:nth-of-type(2)::before { content: "Descripción"; }

              .tabla-calendario td:nth-of-type(3)::before { content: "Fecha Estimada"; }

              .tabla-calendario td:nth-of-type(4)::before { content: "Responsable"; }

            }

            

            /* Table Responsive Rendicion de cuentas */

            /* Estilos para la tabla de decisiones adoptadas */

            .table-success thead {

                background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;

                color: white;

            }

            

            .table-success thead th {

                border-bottom: 2px solid #1e7e34;

                font-weight: 600;

            }

            

            .text-muted {

                font-size: 0.85rem;

            }

            

            .alert-info {

                border-left: 4px solid #17a2b8;

                border-radius: 8px;

            }

            

           

          .modal {

            display: none;

            position: fixed;

            z-index: 1050;

            padding-top: 60px;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            overflow-y: auto;

            background-color: rgba(0, 0, 0, 0.4);

          }

        

          .modal-content {

            background-color: #fff;

            margin: auto;

            border-radius: 10px;

            padding: 20px;

            max-width: 1000px;

            width: 90%;

            box-shadow: 0 5px 15px rgba(0,0,0,0.3);

          }

        

          .close {

            float: right;

            font-size: 28px;

            font-weight: bold;

            cursor: pointer;

          }

        

          .close:hover {

            color: #d00;

          }

        

          .dashboard {

            display: grid;

            grid-template-columns: 1fr 300px;

            gap: 20px;

            align-items: start;

          }

        

          table {

            width: 100%;

            border-collapse: collapse;

            background-color: #fff;

            border: 1px solid #ddd;

          }

        

          thead {

            background-color: #2b88c2;

            color: #fff;

          }

        

          th, td {

            padding: 10px;

            border-bottom: 1px solid #ddd;

            text-align: left;

            font-size: 14px;

          }

        

          

        

          .panel-lateral {

            border-left: 2px solid #eef3fb;

            padding-left: 16px;

            background: #f9fafc;

            border-radius: 8px;

          }

        

          .panel-lateral h3 {

            font-size: 16px;

            margin-bottom: 8px;

            color: #004b87;

          }

        

          .panel-lateral p {

            font-size: 13px;

            margin: 6px 0;

          }

        

          .signal {

            display: inline-block;

            width: 14px;

            height: 14px;

            border-radius: 50%;

            margin-right: 6px;

            vertical-align: middle;

          }

        

          .signal.green { background: #4CAF50; }

          .signal.yellow { background: #FFC107; }

          .signal.red { background: #F44336; }

        

          .btn-refresh {

            display: block;

            margin-top: 10px;

            padding: 8px 12px;

            background-color: #004b87;

            color: white;

            border: none;

            border-radius: 6px;

            cursor: pointer;

          }

        

          .btn-refresh:hover {

            background-color: #0062b5;

          }

        

          /* Responsive */

          @media (max-width: 768px) {

            .dashboard {

              grid-template-columns: 1fr;

            }

            .panel-lateral {

              border-left: none;

              border-top: 1px solid #eef3fb;

              padding-top: 12px;

            }

            th, td {

              font-size: 13px;

            }

          }