:root {
      --color-prin: #134d7c;
      --color-bg: #f4f4f4;
      --color-fg: #1e1e1e;
      --color-muted: #777;
      --color-accent: #000000;
      --color-accent-light: #333;
      --color-nav-bg: #f4f4f4;
      --color-border: #ddd;
      --color-shadow: rgba(0, 0, 0, 0.1);
      --color-linea-tabla: #f5f5f5;
      --color-linea-select: #bab6b6;
      --color-bordegris: lightgrey;
       --color-texto: black;
      
      --color-tarjetainfo: #fff;
      
      
        --btn-bg: #134d7c;
        --btn-bg-hover: #0056b3;
        --btn-color: white;
        --color-form-group: #e3e2de;
        --color-blan: #ffffff;
        --color-neg: #1e1e1e;
        --color-filter: invert(0);
  
    }

    .dark-mode {
      --color-neg: #f0f0f0;
      --color-blan: #1e1e1e;
      --color-prin: #134d7c;
      --color-bg: #212120;
      --color-fg: #f0f0f0;
      --color-muted: #aaa;
      --color-accent: #00bcd4;
      --color-accent-light: #66e0f0;
      --color-nav-bg: #1f1f1f;
      --color-border: #333;
      --color-shadow: rgba(255, 255, 255, 0.05);
      --color-form-group: #363533;
      --color-filter: invert(1);
      --color-linea-tabla: #3d3d3d;
      --color-linea-select: #3d3d3d;
      --color-bordegris: black;
      --color-tarjetainfo: #3d3d3d;
      --color-texto: white;
  
    }
    
    .bgc-prin {
  background-color: var(--color-prin);
    }
    // <weight>: Use a value from 300 to 800
// <uniquifier>: Use a unique and descriptive class name
    .google-sans-code-<1> {
  font-family: "Google Sans Code", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}


.ibm-plex-mono-thin {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-mono-extralight {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-mono-light {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-mono-regular {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-mono-medium {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-mono-semibold {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-mono-bold {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.ibm-plex-mono-thin-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  font-style: italic;
}

.ibm-plex-mono-extralight-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 200;
  font-style: italic;
}

.ibm-plex-mono-light-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 300;
  font-style: italic;
}

.ibm-plex-mono-regular-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.ibm-plex-mono-medium-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-style: italic;
}

.ibm-plex-mono-semibold-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-style: italic;
}

.ibm-plex-mono-bold-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-style: italic;
}


    body {
      margin: 0;
      background-color: var(--color-bg);
      color: var(--color-fg);
      font-family: "IBM Plex Mono", monospace;
      font-weight: 300;
      font-style: normal;
      transition: background-color 0.3s, color 0.3s;
    }

    header {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: var(--color-bg);
      box-shadow: 0 2px 10px var(--color-shadow);
      z-index: 1000;
      padding: 0.8rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header img {
      height: 40px;
    }

    #navMenu {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    #navMenu a {
      color: var(--color-fg);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    #navMenu a:hover {
      color: var(--color-accent-light);
    }

    .modo-btn {
      background: none;
      border: none;
      color: var(--color-fg);
      cursor: pointer;
      font-size: 1.2rem;
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
    }

    .hamburger span {
      width: 25px;
      height: 3px;
      background-color: var(--color-fg);
    }

    @media (max-width: 768px) {
      #navMenu {
        display: none;
        position: absolute;
        top: 70px;
        right: 20px;
        background-color: var(--color-nav-bg);
        padding: 1rem;
        border-radius: 5px;
        box-shadow: 0 4px 8px var(--color-shadow);
        flex-direction: column;
        align-items: flex-start;
      }

      #navMenu.show {
        display: flex;
      }

      .hamburger {
        display: flex;
      }
            .container {
        flex-direction: column;
      }
    }


    .hero {
      text-align: center;
      padding: 3rem 0;
    }

    .hero h1 {
      font-size: 2.5rem;
      color: var(--accent);
      margin-bottom: 1rem;
    }

    .hero p {
      font-size: 1.2rem;
      color: var(--muted);
    }