* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Open Sans", sans-serif;
   }

   body {
     display: flex;
     flex-direction: column;
     align-items: center;
     min-height: 100vh;
     background-color: #FFFFFF;
   }

   .container {
     width: 100%;
     margin: 0 auto;
     background-color: #FFFFFF;
     display: flex;
     flex-direction: column;
   }

   @media (min-width: 992px) {
     .container {
       flex-direction: row;
       min-height: 100vh;
     }
   }

   h1 {
     text-align: center;
     font-size: 2.0rem;
     font-weight: 600;
     font-style: italic;
     color: #7c7c7d;
     margin-bottom: 20px;
     padding-bottom: 10px;
   }

   h2 {
     text-align: center;
     font-size: 1.5rem;
     font-weight: 600;
     text-transform: uppercase;
     font-style: italic;
     color: #7c7c7d;
     margin-bottom: 20px;
     padding-bottom: 10px;
   }

   .fade-border {
     position: relative;
   }

   .fade-border::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg,
         transparent 0%,
         #a6d4f3 20%,
         #a6d4f3 80%,
         transparent 100%);
   }

   .map-container {
     position: relative;
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
     background-color: #FFFFFF;
     padding: 15px;
   }

   @media (min-width: 992px) {
     .map-container {
       width: 40%;
       padding: 20px;
     }
   }

   svg {
     width: 100%;
     height: auto;
     display: block;
     filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.5));
     max-height: 80vh;
   }

   .provincia {
     fill: #06aa0b;
     stroke: #07510a;
     stroke-width: 1.5;
     transition: all 0.3s ease;
     cursor: pointer;
   }

   .provincia:hover {
     fill: #81c784;
     stroke-width: 2.5;
   }

   .provincia.active {
     fill: #035205;
     stroke-width: 2.5;
     filter: drop-shadow(0 0 5px rgba(76, 175, 80, 0.7));
   }

   .point {
     cursor: pointer;
     transition: all 0.3s ease;
   }

   .point circle {
     fill: #e74c3c;
     stroke: white;
     stroke-width: 2;
     transition: all 0.3s ease;
   }

   .point text {
     font-size: 1.5rem;
     fill: #e8edf2;
     font-weight: 500;
     text-anchor: middle;
     text-shadow:
       -2px -2px 0 black,
       2px -2px 0 black,
       -2px 2px 0 black,
       2px 2px 0 black;
     transition: all 0.3s ease;
   }

   .point:hover image {
     transition: transform 0.3s ease;
   }

   .point:hover image {
     transform: translateY(-5px);
   }

   .point:active {
     transform: translateY(-2px);
   }

   .point:hover circle,
   .point.active circle {
     fill: #c0392b;
     r: 8;
   }

   .point:hover text,
   .point.active text {
     font-weight: bold;
     fill: #c4e218;
   }

   .info-box {
     width: 100%;
     padding: 15px;
     background-color: #FFFFFF;
   }

   @media (min-width: 992px) {
     .info-box {
       width: 60%;
       max-height: 100vh;
     }
   }

   footer {
     text-align: center;
     margin-top: 20px;
     color: #7f8c8d;
     font-size: 14px;
     padding: 15px;
     width: 100%;
   }

   /* Iconos usando UTF-8 */
   .icon-plan::before {
     content: '📋';
   }

   .icon-requisitos::before {
     content: '📝';
   }

   .icon-tramites::before {
     content: '📑';
   }

   .icon-informacion::before {
     content: 'ℹ️';
   }

   .icon-contacto::before {
     content: '📞';
   }

   .controls {
     display: flex;
     justify-content: center;
     margin-bottom: 15px;
     gap: 10px;
     flex-wrap: wrap;
   }

   .btn {
     padding: 8px 15px;
     background-color: #3498db;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.3s;
   }

   .btn:hover {
     background-color: #2980b9;
   }

   .table-responsive {
     display: block;
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     border-radius: 10px;
     box-shadow: -2px -3px 20px 1px rgba(0, 0, 0, 0.05);
   }

   .table-responsive>.table-bordered {
     border: 0;
   }

   .table-info {
     border-collapse: collapse;
     width: 100%; 
   }

   .table-info td,
   .table-info th {
     background-color: #fff;
   }

   .table-info-bordered th,
   .table-info-bordered td {
     border: 1px solid #dee2e6;
   }

   .table-info-striped tbody tr:nth-of-type(odd) {
     background-color: rgba(0, 0, 0, 0.05);
   }

   .custom-table thead tr,
   .custom-table thead th {
     padding-top: 20px;
     padding-bottom: 30px;
     text-align: center;
     font-weight: 400;
     color: #4e4e4e;
     border-bottom: 1px solid #777;
   }

   .custom-table tbody th,
   .custom-table tbody td {
     color: #777;
     font-weight: 400;
     padding: 20px;
     font-weight: 300;
     border: none;
     transition: .3s all ease;
   }

   .custom-table tbody th small,
   .custom-table tbody td small {
     color: #b3b3b3;
     font-weight: 400;
   }

   .custom-table tbody tr .title {
     color: #02538e;
     font-weight: 400;
   }

   .custom-table tbody tr .description {
     font-weight: 300;
     padding-top: 5px;
     font-size: 13px;
   }

   .custom-table tbody tr .admision {
     padding-top: 15px;
     font-weight: 300;
   }

   .custom-table tbody tr {
     transition: .3s all ease;
   }

   .custom-table tbody tr .name {
     text-decoration: line-through;
     position: relative;
     display: inline-block;
   }

   .custom-table tbody tr .name:before {
     content: "";
     height: 2px;
     top: 50%;
     position: absolute;
     left: 0;
     right: 0;
     background: #dc3545;
     opacity: 0;
     visibility: hidden;
   }

   .custom-table tbody tr.active {
     opacity: .4;
   }

   .custom-table tbody tr.active .name:before {
     opacity: 1;
     visibility: visible;
   }

   .btn-info {
     padding-top: 5px;
     height: 35px;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     border: none;
     border-radius: 4px;
     overflow: hidden;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.164);
     cursor: pointer;
     margin-top: 10px;
   }

   .text {
     width: 90%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     background-color: #0569ac;
   }

   .svgIcon {
     width: 10%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     padding: 5px;
     background-color: #04558b;
   }

   .btn-info:hover .text {
     background-color: #035891;
   }

   .btn-info:hover .svgIcon {
     background-color: #01395f;
   }

   .celda-fondo {
     background-image: url("../imagenes/acreditado2.png");
     background-repeat: no-repeat;
     background-position: calc(100% - 20px) 10px;
     background-size: 80px auto;
   }

   .select-container {
     position: relative;
     margin-bottom: 30px;
     width: 100%;
   }

   .custom-select {
     width: 100%;
     padding: 16px 20px;
     border: 2px solid #e2e8f0;
     border-radius: 12px;
     background: white;
     font-size: 1rem;
     color: #4a5568;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: all 0.3s ease;
   }

   .custom-select:hover {
     border-color: #667eea;
   }

   .custom-select.open {
     border-radius: 12px 12px 0 0;
     border-color: #667eea;
     box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
   }

   .select-options {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: white;
     border: 2px solid #667eea;
     border-top: none;
     border-radius: 0 0 12px 12px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
     z-index: 10;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   }

   .select-options.open {
     max-height: 300px;
     overflow-y: auto;
   }

   .option {
     padding: 15px 20px;
     cursor: pointer;
     transition: background 0.2s ease;
     display: flex;
     align-items: center;
     gap: 12px;
   }

   .option:hover {
     background: #f1f5f9;
   }

   .option i {
     color: #667eea;
     font-size: 1.2rem;
     width: 24px;
   }

   .content-area {
     background: #f8fafc;
     border-radius: 12px;
     padding: 25px;
     min-height: 200px;
     transition: all 0.4s ease;
   }

   .content-placeholder {
     text-align: center;
     color: #a0aec0;
     padding: 40px 20px;
   }

   .content-placeholder i {
     font-size: 3rem;
     margin-bottom: 15px;
     color: #cbd5e0;
   }

   .content-card {
     display: none;
     animation: fadeIn 0.5s ease;
   }

   .content-card h2 {
     color: #4a5568;
     margin-bottom: 15px;
     font-size: 1.8rem;
   }

   .content-card p {
     line-height: 1.6;
     margin-bottom: 15px;
     color: #718096;
   }

   .content-card ul {
     padding-left: 20px;
     margin-bottom: 15px;
   }

   .content-card li {
     margin-bottom: 8px;
     color: #4a5568;
   }

   .content-card img {
     width: 100%;
     border-radius: 8px;
     margin-top: 15px;
   }

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

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

   /* Responsive para móviles */
   @media (max-width: 768px) {
     h1 {
       font-size: 1.5rem;
     }

     h2 {
       font-size: 1.2rem;
     }
     .point text {
       font-size: 2.4em;
     }

     .btn-info {
       height: 30px;
       font-size: 0.9rem;
     }

     .custom-select {
       padding: 14px 16px;
     }

     .option {
       padding: 12px 16px;
     }
   }

   /* Mejoras para el menú contextual (si se usa en el futuro) */
   .context-menu {
     position: absolute;
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     padding: 0;
     z-index: 100;
     display: none;
     min-width: 250px;
     animation: fadeIn 0.2s ease;
     overflow: hidden;
   }

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

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