:root{
      --primary:#2563EB; /* azul Docscolar */
      --primary-dark:#1D4ED8;
      --muted:#6b7280;
    }

    html,body{height:100%;}
    body{
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: #f3f4f6;
      margin:0;
    }

    /* Container principal */
      .sf-login-bg {
        background: url('../img/background.jpg') no-repeat center center;
        background-size: cover;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 25px;
    }


      .sf-login-container {
          width: 100%;
          max-width: 380px;
      }

      .sf-login-card {
          background: #fff;
          padding: 35px 30px;
          border-radius: 8px;
          box-shadow: 0 4px 16px rgba(0,0,0,0.25);
      }

      .sf-login-title {
          font-weight: 600;
          color: #032d60;
      }

      .sf-label {
          font-weight: 600;
          font-size: 14px;
          color: #1a1a1a;
      }

      .sf-input {
          border-radius: 4px !important;
          border: 1px solid #dce1e6;
          padding: 11px !important;
          font-size: 15px;
      }

      .sf-eye {
          border: 1px solid #dce1e6;
          background: #f1f3f4;
          border-radius: 0 4px 4px 0 !important;
      }

      .sf-btn {
          background: #0176d3;
          color: #fff;
          font-weight: 600;
          padding: 12px;
          border-radius: 4px;
          transition: .2s;
      }

      .sf-btn:hover {
          background: #005fb2;
      }

      .sf-remember {
          font-size: 14px;
      }

      .sf-link {
          color: #0176d3;
          font-weight: 600;
          text-decoration: none;
      }

      .sf-link:hover {
          text-decoration: underline;
      }