.top-bar {
      background-color: #1f38a8d9;
      color: white;
      padding: 10px 30px;
      text-align: right;
      font-size: 14px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1100;
    }

    .navbar {
      position: absolute !important; /* <- esto obliga a usar absolute aunque haya otros estilos */
      top: 30px;
      left: 0;
      width: 100%;
      background-color: transparent;
      z-index: 1000;
      padding-top: 5px;
      padding-bottom: 5px;
    }


    .nav-link {
      background-color: #e0e0e0;   /* color plomo claro */
      color: #000000;
      transition: all 0.3s ease;
      font-weight: 500;
      padding: 8px 15px;
      border-radius: 5px;
      margin-right: 5px;           /* separa un poco entre botones */
    }

    .nav-link:hover {
      background-color: black;
      color: white !important;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    .navbar-toggler {
      border-color: white; /* borde blanco */
    }

    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

    .navbar-brand img {
      height: 70px;
    }

    @media (max-width: 768px) {
      .navbar-brand img {
        height: 45px; /* reduce el logo */
      }

      .navbar {
        padding-top: 5px;
        padding-bottom: 5px;
      }

      .nav-link {
        font-size: 14px;
        padding: 6px 10px;
        margin-right: 3px;
      }

      .top-bar {
        font-size: 12px;
        padding: 5px 15px;
        text-align: center;
      }
    }

    .footer {
      background-color: #1f38a8d9;
      color: white;
      padding: 20px;
      text-align: center;
      margin-top: 40px;
    }
    .nav-link {
        color: #000000;
        transition: all 0.3s ease;
        font-weight: 500;
        padding: 8px 15px;
        border-radius: 5px;
    }

    .nav-link:hover {
        background-color: black;
        color: white !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }